@financial-times/o-typography
Advanced tools
@financial-times/o-typography - npm Package Compare versions
Comparing version 6.4.1 to 6.4.2
@@ -28,3 +28,3 @@ { | ||
| "name": "@financial-times/o-typography", | ||
| "version": "6.4.1", | ||
| "version": "6.4.2", | ||
| "dependencies": { | ||
@@ -42,6 +42,11 @@ "@financial-times/o-colors": "^5.0.0", | ||
| "devDependencies": { | ||
| "eslint": "^7.1.0", | ||
| "eslint-config-origami-component": "^2.0.1", | ||
| "origami-ci-tools": "^2.0.0", | ||
| "remark": "^12.0.0", | ||
| "remark-lint": "^7.0.0", | ||
| "remark-preset-lint-origami-component": "^1.1.1", | ||
| "stylelint": "^13.5.0", | ||
| "stylelint-config-origami-component": "^1.0.2" | ||
| } | ||
| } |
| # o-typography [](#licence) | ||
| Typographical styles for FT branded sites. The component provides 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 such as [editorial typography](https://github.com/Financial-Times/o-editorial-typography), [quotes](https://github.com/Financial-Times/o-quote/), or [big numbers](https://github.com/Financial-Times/o-big-number/). | ||
| Typographical styles for FT branded sites. | ||
| ---- | ||
| - [Overview](#overview) | ||
| - [Markup](#markup) | ||
@@ -11,7 +10,12 @@ - [Sass](#sass) | ||
| - [Troubleshooting](#troubleshooting) | ||
| - [Migration guide](#migration) | ||
| - [Migration guide](#migration-guide) | ||
| - [Contact](#contact) | ||
| - [Licence](#licence) | ||
| ## Overview | ||
| The component provides 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 such as [editorial typography](https://github.com/Financial-Times/o-editorial-typography), [quotes](https://github.com/Financial-Times/o-quote/), or [big numbers](https://github.com/Financial-Times/o-big-number/). | ||
| By default, o-typography uses a single typographic scale for use with all fonts. The scale consists of font-size and line-height combinations, as shown below: | ||
@@ -107,3 +111,3 @@ | ||
| // configure o-typography to not include progressive font fallback css | ||
| $o-typography-progressive-font-loading:: false; | ||
| $o-typography-progressive-font-loading: false; | ||
| // import dependencies | ||
@@ -125,9 +129,9 @@ @import 'o-typography/main'; | ||
| ```js | ||
| var rootElement = document.querySelector('html') | ||
| if (/(^|\s)o-typography-fonts-loaded=1(;|$)/.test(document.cookie)) { | ||
| var fontLabels = ['sans', 'sans-bold', 'display', 'display-bold'] | ||
| for (var i = 0; i < fontLabels.length; i++) { | ||
| rootElement.className = rootElement.className.replace('o-typography--loading-' + fontLabels[i], '') | ||
| } | ||
| } | ||
| var rootElement = document.querySelector('html') | ||
| if (/(^|\s)o-typography-fonts-loaded=1(;|$)/.test(document.cookie)) { | ||
| var fontLabels = ['sans', 'sans-bold', 'display', 'display-bold'] | ||
| for (var i = 0; i < fontLabels.length; i++) { | ||
| rootElement.className = rootElement.className.replace('o-typography--loading-' + fontLabels[i], '') | ||
| } | ||
| } | ||
| ``` | ||
@@ -137,3 +141,3 @@ | ||
| ### Sass | ||
| ## Sass | ||
@@ -198,5 +202,5 @@ To include all typography classes use the `oTypography` mixin: | ||
| .fancy-typography-used-only-here { | ||
| // throws an error which includes the `$o-typography-error-for-missing-fonts` message. | ||
| // a thin/italic font face has not been included | ||
| @include oTypographySans($scale: 1, $weight: 'thin', $style: 'normal'); | ||
| // throws an error which includes the `$o-typography-error-for-missing-fonts` message. | ||
| // a thin/italic font face has not been included | ||
| @include oTypographySans($scale: 1, $weight: 'thin', $style: 'normal'); | ||
| } | ||
@@ -409,15 +413,15 @@ ``` | ||
| $example-custom-font-scale: ( | ||
| -2: (12, 16), // $scale: ($font-size, $line-height) | ||
| -1: (14, 16), | ||
| 0: (16, 20), | ||
| 1: (18, 20), | ||
| 2: (20, 24), | ||
| 3: (24, 28), | ||
| 4: (28, 32), | ||
| 5: (32, 32), | ||
| 6: (40, 40), | ||
| 7: (48, 48), | ||
| 8: (56, 56), | ||
| 9: (72, 72), | ||
| 10: (84, 84), | ||
| -2: (12, 16), // $scale: ($font-size, $line-height) | ||
| -1: (14, 16), | ||
| 0: (16, 20), | ||
| 1: (18, 20), | ||
| 2: (20, 24), | ||
| 3: (24, 28), | ||
| 4: (28, 32), | ||
| 5: (32, 32), | ||
| 6: (40, 40), | ||
| 7: (48, 48), | ||
| 8: (56, 56), | ||
| 9: (72, 72), | ||
| 10: (84, 84), | ||
| ); | ||
@@ -446,9 +450,9 @@ | ||
| @include oTypographyCustomize(( | ||
| 'blockquote-color': hotpink, // Update the blockquote border color to hotpink. | ||
| 'heading-level-one': ( | ||
| 'scale': 7, // Update the size of h1. | ||
| ), | ||
| 'heading-level-two': ( | ||
| 'scale': 6 // Update the size of h2 (up to h6 is supported heading-level-six). | ||
| ) | ||
| 'blockquote-color': hotpink, // Update the blockquote border color to hotpink. | ||
| 'heading-level-one': ( | ||
| 'scale': 7, // Update the size of h1. | ||
| ), | ||
| 'heading-level-two': ( | ||
| 'scale': 6 // Update the size of h2 (up to h6 is supported heading-level-six). | ||
| ) | ||
| )); | ||
@@ -499,3 +503,3 @@ | ||
| ## Migration | ||
| ## Migration guide | ||
@@ -518,3 +522,3 @@ State | Major Version | Last Minor Release | Migration guide | | ||
| ---- | ||
| --- | ||
@@ -525,4 +529,1 @@ ## Licence | ||
| For more see the [demos in the registry](registry). | ||
| [registry]: https://registry.origami.ft.com/components/o-typography/ | ||
| [sassdoc]: https://registry.origami.ft.com/components/o-typography/sassdoc |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by0.03%
130352
- Number of package files
- increased by4.76%
22
- Lines of code
- increased by0.26%
386
- Number of lines in readme file
- increased by0.19%
520
Worsened metrics
- Dev dependency count
- increased by166.67%
8
No dependency changes