@financial-times/o-typography - npm Package Compare versions

Comparing version 7.3.6 to 7.4.0

CHANGELOG.md

 # Changelog
 
+## [7.4.0](https://www.github.com/Financial-Times/origami/compare/o-typography-v7.3.6...o-typography-v7.4.0) (2023-05-24)
+
+
+### Features
+
+* o-typography, introduce themes for body and links ([c85f10e](https://www.github.com/Financial-Times/origami/commit/c85f10ecb9f4ba88ce9b0995802961381eb1ced4))
+
 ### [7.3.6](https://www.github.com/Financial-Times/origami/compare/o-typography-v7.3.5...o-typography-v7.3.6) (2023-04-28)
@@ -4,0 +11,0 @@

origami.json

@@ -53,2 +53,25 @@ {
 		{
+			"name": "links-inverse",
+			"title": "Inverse Links",
+			"template": "demos/src/links-inverse.mustache",
+			"description": "Link styles for use on dark backgrounds.",
+			"documentClasses": "o-grid-container o-typography--loading-display o-typography--loading-sans o-typography--loading-sans-bold o-typography--loading-display-bold demo-inverse",
+			"brands": ["core"]
+		},
+		{
+			"name": "professional-links",
+			"title": "Professional Links",
+			"template": "demos/src/professional-links.mustache",
+			"description": "Link styles for the FT Professional sub-brand.",
+			"brands": ["core"]
+		},
+		{
+			"name": "professional-links-inverse",
+			"title": "Inverse Professional Links",
+			"template": "demos/src/professional-links-inverse.mustache",
+			"description": "Link styles for the FT Professional sub-brand.",
+			"documentClasses": "o-grid-container o-typography--loading-display o-typography--loading-sans o-typography--loading-sans-bold o-typography--loading-display-bold demo-inverse",
+			"brands": ["core"]
+		},
+		{
 			"name": "body",
@@ -55,0 +78,0 @@ "title": "Body",

package.json

 {
   "name": "@financial-times/o-typography",
-  "version": "7.3.6",
+  "version": "7.4.0",
   "description": "Typographical styles for FT branded sites. Including typographical fundamentals such as font scales, vertical rhythm, and font fallbacks; plus styles for UI including links, headings, and titles. Other components build on o-typography to provide for more specific usecases.",
@@ -40,3 +40,3 @@ "keywords": [
     "@financial-times/math": "^1.0.0",
-    "@financial-times/o-colors": "^6.5.0",
+    "@financial-times/o-colors": "^6.6.0",
     "@financial-times/o-fonts": "^5.0.0",
@@ -50,3 +50,4 @@ "@financial-times/o-grid": "^6.1.1",
     "@financial-times/o-grid": "^6.1.1",
-    "@financial-times/o-normalise": "^3.3.0"
+    "@financial-times/o-normalise": "^3.3.0",
+    "@financial-times/o-colors": "^6.6.0"
   },
@@ -53,0 +54,0 @@ "engines": {

README.md

@@ -87,2 +87,17 @@ # o-typography
 
+#### Theme Class
+
+`o-typography` also provides wrapper classes for theming.
+
+- `o-typography-inverse` - Make body copy and links white, for use on a dark background.
+- `o-typography-professional` - Change link colours for the FT Professional sub-brand (core brand only)
+- `o-typography-professional o-typography-inverse` - A version of the inverse theme for use with the FT Professional sub-brand (core brand only)
+
+E.g:
+```html
+<div class="o-typography-professional">
+	<a class="o-typography-link" href="#">Some link using FT Professional branding.</a>
+</div>
+```
+
 ### Progressive Loading Web Fonts
@@ -238,2 +253,9 @@
 
+You may also output body styles for use on a dark background using the `inverse` theme:
+```scss
+p {
+	@include oTypographyBody($theme: 'inverse');
+}
+```
+
 #### oTypographyLink
@@ -249,4 +271,15 @@
 
-To create a custom link style set the `$theme` argument. Where `$theme` is a map of configuration including:
+You may also output link styles for a given theme:
+- `inverse`
+- `professional` (core brand only)
+- `professional-inverse` (core brand only)
 
+```scss
+a {
+	@include oTypographyLink($theme: 'professional');
+}
+```
+
+To create a custom link style set the `$theme` argument to a map:
+
 - **base**: an [o-colors](https://registry.origami.ft.com/components/o-colors) palette colour name or colour for the link
@@ -253,0 +286,0 @@ - **hover**: an [o-colors](https://registry.origami.ft.com/components/o-colors) palette colour name or colour for link on hover

No alert changes

Improved metrics

Total package byte prevSize

127691

increased by5.75%

Number of package files

29

increased by11.54%

Lines of code

280

increased by8.95%

Number of lines in readme file

560

increased by6.26%

Worsened metrics

Dev dependency count

3

increased by50%

No dependency changes