Socket
Socket
Sign inDemoInstall

@financial-times/o-typography

Package Overview
Dependencies
Maintainers
18
Versions
63
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 5.12.0 to 6.0.0-beta.1

src/js/typography.js

2

browser.js

@@ -12,3 +12,3 @@ "use strict";

const constructAll = function constructAll() {
var constructAll = function constructAll() {
_typography.default.init();

@@ -15,0 +15,0 @@

12

dist/js/typography.js

@@ -38,7 +38,7 @@ "use strict";

weight: 600,
label: 'sansBold'
label: 'sans-bold'
}, {
family: 'FinancierDisplayWeb',
weight: 700,
label: 'displayBold'
label: 'display-bold'
}];

@@ -59,3 +59,3 @@

static getOptions(typographyEl) {
const dataset = Object(typographyEl.dataset);
var dataset = Object(typographyEl.dataset);
return Object.keys(dataset).reduce((col, key) => {

@@ -67,3 +67,3 @@ // Phantom doesn't like Object.entries :sob:

const shortKey = key.replace(/^oTypography(\w)(\w+)$/, (m, m1, m2) => m1.toLowerCase() + m2);
var shortKey = key.replace(/^oTypography(\w)(\w+)$/, (m, m1, m2) => m1.toLowerCase() + m2);

@@ -104,3 +104,3 @@ try {

setCookie() {
const domain = /.ft.com$/.test(location.hostname) ? '.ft.com' : location.hostname; // set cookie for a week
var domain = /.ft.com$/.test(location.hostname) ? '.ft.com' : location.hostname; // set cookie for a week
// TODO - use RUM to work out what a good value for this would actually be

@@ -129,3 +129,3 @@

const fontPromises = this.fontConfigs.map(fontConfig => {
var fontPromises = this.fontConfigs.map(fontConfig => {
return new _fontfaceobserverStandalone.default(fontConfig.family, {

@@ -132,0 +132,0 @@ weight: fontConfig.weight

67

origami.json
{
"description": "Typographical styles for FT products - font families, weight, colors, sizes and vertical rhythm",
"keywords": ["font", "link", "links", "heading", "headings", "text", "copy"],
"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.",
"keywords": ["font", "link", "links", "heading", "headings", "text", "copy", "scale", "caption", "footer", "list", "lists"],
"origamiType": "module",

@@ -27,3 +27,3 @@ "origamiCategory": "primitives",

"dependencies": ["o-grid@^4.0.0", "o-normalise@^1.0.0"],
"documentClasses": "o-grid-container o-typography--loading-display o-typography--loading-sans o-typography--loading-sansBold o-typography--loading-displayBold"
"documentClasses": "o-grid-container o-typography--loading-display o-typography--loading-sans o-typography--loading-sans-bold o-typography--loading-display-bold"
},

@@ -49,36 +49,8 @@ "ci": {

{
"name": "headings-master",
"title": "Headings",
"template": "demos/src/headings.mustache",
"data": {
"headline": true
},
"brands": [
"master"
],
"description": "Article headings."
},
{
"name": "headings",
"title": "Headings",
"template": "demos/src/headings.mustache",
"data": {
"headingLevel6": true
},
"brands": [
"internal",
"whitelabel"
],
"description": "Headings."
},
{
"name": "product-headings",
"title": "Product Headings",
"template": "demos/src/product-headings.mustache",
"brands": [
"master"
],
"description": "Non-article headings."
},
{
"name": "body",

@@ -90,8 +62,2 @@ "title": "Body",

{
"name": "blockquote",
"title": "Blockquote",
"template": "demos/src/blockquote.mustache",
"description": ""
},
{
"name": "footer",

@@ -115,29 +81,2 @@ "title": "Footer",

{
"name": "big-number",
"title": "Big Number",
"template": "demos/src/big-number.mustache",
"brands": [
"master"
],
"description": ""
},
{
"name": "read-next",
"title": "Read Next",
"template": "demos/src/read-next.mustache",
"brands": [
"master"
],
"description": ""
},
{
"name": "article",
"title": "Article",
"template": "demos/src/article.mustache",
"brands": [
"master"
],
"description": "This shows article styles such as the collection headings, topic, author name, standfirst, timestamp, and big number."
},
{
"name": "wrapper",

@@ -144,0 +83,0 @@ "title": "Wrapper",

19

package.json

@@ -12,2 +12,4 @@ {

"*.json",
"*.js",
"!main.js",
"scss",

@@ -27,15 +29,18 @@ "!bower.json",

"name": "@financial-times/o-typography",
"version": "5.12.0",
"version": "6.0.0-beta.1",
"dependencies": {
"fontfaceobserver": "^2.0.9",
"superstore-sync": "^2.1.0",
"@financial-times/o-colors": "^4.7.9",
"@financial-times/o-fonts": "^3.2.0",
"@financial-times/o-grid": "^4.3.1",
"@financial-times/o-icons": ">=4.4.2 <6",
"@financial-times/o-spacing": "^2.0.0"
"@financial-times/o-colors": "5.0.0-beta.1",
"@financial-times/o-fonts": "4.0.0-beta.1",
"@financial-times/o-grid": "5.0.0-beta.2",
"@financial-times/o-icons": "6.0.0-beta.3",
"@financial-times/o-spacing": "^2.0.0",
"@financial-times/o-normalise": "2.0.0-beta.3"
},
"component": "o-typography",
"scripts": {},
"devDependencies": {}
"devDependencies": {
"origami-ci-tools": "^1.0.0"
}
}

437

README.md
# o-typography [![Build Status](https://circleci.com/gh/Financial-Times/o-typography.png?style=shield&circle-token=9ca314332de2a9b6a80eb8477e097d9acbc96e0b)](https://circleci.com/gh/Financial-Times/o-typography) [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](#licence)
Typographical styles for FT branded sites - font families, weight, colors, sizes and vertical rhythm. The component provides styles for headings, titles, leads and body content.
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/).

@@ -11,3 +11,3 @@ ----

- [Troubleshooting](#troubleshooting)
- [Migration guide](#migration-guide)
- [Migration guide](#migration)
- [Contact](#contact)

@@ -54,3 +54,3 @@ - [Licence](#licence)

`o-typography` also provides wrapper classes. These reduce the need for developers to apply styles to specific elements. By using a wrapper, body styles get applied to the HTML element and descendent typographic elements: h1, h2, h3, h4, h5, p, a, blockquote, footer, strong, em, small, sup, sub, ul, ol, li.
`o-typography` also provides wrapper classes. These reduce the need for developers to apply styles to specific elements. By using a wrapper, body styles get applied to the HTML element and descendent typographic elements: h1, h2, h3, h4, h5, p, a, footer, strong, em, small, sup, sub, ul, ol, li.

@@ -70,7 +70,7 @@ Example:

### Progressive loading web fonts
### Progressive Loading Web Fonts
One of the drawbacks of using web fonts is some browsers hide the text while the font is downloading (Flash of Invisible Text, aka FOIT). A common pattern for avoiding this is to use a system fallback font initially. Then, once the web font has loaded, remove a class from the html element used to display the fallback font.
One of the drawbacks of using web fonts is some browsers hide the text while the font is downloading (Flash of Invisible Text, aka FOIT). The [font-display](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) property may be used within font faces to show a system font fallback initially. Then either swap immediately when the font has loaded or on the next page load.
The CSS would look a little like this:
However `font-display` is not supported by Internet Explorer or mobile Safari 10, so `o-typography` provides a custom implementation which works by removing a class from the html element used to display the fallback font. Using this approach we're able to support older browsers and adjust the size of the fallback font so it looks more similar to our custom font. The CSS would look a little like this:

@@ -90,8 +90,34 @@ ```css

Include both the CSS and JavaScript for o-typography in your project. While ensuring you have the loading classes for each font you wish to load on your html element:
#### Disable Progressive Loading
If you do not want to use `o-typography` progressive font loading set `$o-typography-progressive-font-loading: false;` at the top of your project before importing components:
```scss
// configure o-typography to not include progressive font fallback css
$o-typography-progressive-font-loading:: false;
// import dependencies
@import 'o-typography/main';
@import 'o-fonts/main';
```
#### Setup Progressive Loading
To setup `o-typography` progressive font loading include both its CSS and JavaScript in your project. While ensuring you have the loading classes for each font you wish to load on your html element:
```html
<html class="o-typography--loading-sans o-typography--loading-sansBold o-typography--loading-display o-typography--loading-displayBold">
<html class="o-typography--loading-sans o-typography--loading-sans-bold o-typography--loading-display o-typography--loading-display-bold">
```
The fallback font will be switched for the custom font on each page load, as o-typography JavaScript detects the font has loaded and removes the above CSS classes. This causes a visual "flash". To prevent that add the following JavaScript snippet in the `head` of your page:
```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], '')
}
}
```
If you build your projects using Sass, styles for progressively loading fonts are output by default when using the [use case mixins](#use-case-mixins) or [type mixins](#type-mixins).

@@ -103,4 +129,4 @@

```sass
@include oTypography();
```scss
@include oTypography();
```

@@ -110,6 +136,6 @@

```sass
@include oTypography($opts: (
'wrapper'
));
```scss
@include oTypography($opts: (
'wrapper'
));
```

@@ -119,17 +145,10 @@

|------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------|
| headings | Heading classes. E.g. `o-typography-heading-level-1`, `o-typography-heading-level-2`, etc. For the master brand these are currently article-style headings, but standard sans-serif headings for internal and whitelabel brands. | master, internal, whitelabel |
| headings | Heading classes. E.g. `o-typography-heading-level-1`, `o-typography-heading-level-2`, etc. | master, internal, whitelabel |
| wrapper | A class `o-typography-wrapper` which styles children elements based on semantics including headings, paragraphs, lists, links, and more e.g. `<h1>`, `<p>`, `<li>`, `<a>`, `<figcaption>` | master, internal, whitelabel |
| body | A class for standard body copy, such as paragraphs. | master, internal, whitelabel |
| links | A class for anchor tags, including a seperate class to indicate external links. | master, internal, whitelabel |
| links | A class for anchor tags, including a septate class to indicate external links. | master, internal, whitelabel |
| lists | Classes to style lists, ordered or unordered. | master, internal, whitelabel |
| caption | A class to style captions. | master, internal, whitelabel |
| footer | A class to style footers. | master, internal, whitelabel |
| blockquote | A class to style blockquotes, including child paragraphs and footer. | master, internal, whitelabel |
| utilities | A collection of classes to modify typography including weight, style, superscript, and subscript. | master, internal, whitelabel |
| product-headings | Non-article heading classes, sans-serif. E.g. `o-typography-product-heading-level-1` | master, internal(deprecated) |
| product-wrapper | A class `o-typography-wrapper--product`, which acts like the wrapper feature described above, but with non-article/product headings. | master, internal(deprecated) |
| article | This outputs article classes such as for collection headings, topic, author name, standfirst, timestamp, and big number. | master |
| big-number | Outputs a class to style a big number `o-typography-big-number`. | master |
| collection | Outputs a class to style a collection header `o-typography-collection-heading`. Previously used within articles but now a candidate for potential deprecation. | master |
| read-next | Outputs a class `o-typography-read-next` to style the heading in an article's aside. This is a candidate for potential deprecation. | master |

@@ -140,174 +159,196 @@ [See the demos](http://registry.origami.ft.com/components/o-typography) for a full list of the CSS classes provided by these features.

By calling the mixin `oTypography`, or if silent mode is off (set to `false`), `o-typography` will download FT webfonts. To suppress this, set `$o-typography-load-fonts` to `false`:
Calling `oTypography` will output font faces to download custom Financial Times fonts. However IE11 may download fonts which are not used. To include font faces more granularly based on your use of o-typography set `$o-typography-load-fonts: false` and use [o-fonts](https://registry.origami.ft.com/components/o-fonts).
```sass
```scss
// configure o-typography to not include fonts
$o-typography-load-fonts: false;
// import dependencies
@import 'o-typography/main';
@import 'o-fonts/main';
// include css for select fonts manually
@include oFontsInclude(MetricWeb, regular);
@include oFontsInclude(FinancierDisplayWeb, regular);
@include oFontsInclude(FinancierDisplayWeb, bold);
// include css for all typography
@include oTypography();
```
If silent mode is on (set to `true`) and the main mixin `oTypography()` is **not** used, `o-typography` does not load web fonts. In this case products should load web fonts themselves using **[o-fonts](https://github.com/financial-times/o-fonts).**
The Sass in o-typography also provides several mixins for use in your project. To explore all functions/mixins see the [SassDoc documentation](sassdoc) in the registry.
### Use Case mixins
### Use Case Mixins
The module has common typographic use cases that are available as mixins, rather than using `o-typography` classes output with the main `oTypography()` mixin.
To avoid duplicated CSS we recommend using default o-typography classes output by [oTypography](#sass). Where you are unable to use o-typography markup, Sass mixins may be used to output styles for usecases such as headings, body copy, and links.
E.g:
See [o-typography SassDoc](https://registry.origami.ft.com/components/o-typography/sassdoc) for a full list of mixins including more details and examples. Also see [editorial typography](https://github.com/Financial-Times/o-editorial-typography), [quotes](https://github.com/Financial-Times/o-quote/), and [big numbers](https://github.com/Financial-Times/o-big-number/) for more specific typography usecases.
- `oTypographyHeadline`
- `oTypographyHeadingLevel1`
- `oTypographyHeadingLevel2`
- `oTypographyBody`
- `oTypographyLink`
- `oTypographyCaption`
- `oTypographyBlockquote`
- ...
#### oTypographyHeading
Use `oTypographyHeading` to output styles for heading levels 1-6.
```scss
.article {
blockquote {
@include oTypographyBlockquote;
}
h2 {
@include oTypographyHeading($level: 2);
}
```
See more usecase mixins in the registry [SassDoc documentation](sassdoc).
#### oTypographyBody
### Type mixins
Use `oTypographyBody` to output styles for body copy such as paragraph text.
If you want to output only the font-family, font-size, and line-height, with no extra styles, use the type mixins.
```scss
p {
@include oTypographyBody();
}
```
- `oTypographySerif`
- `oTypographyDisplay`
- `oTypographySans`
- `oTypographyDisplayBold`
- `oTypographySansBold`
- `oTypographySerifBold`
- `oTypographySerifItalic`
- ...
#### oTypographyLink
These mixins take three arguments:
Use `oTypographyLink` to output styles for links.
- **scale**: The number on the font scale you want to output. Value can be a map to specify responsive font scales.
- **line-height**: An override value for the line-height.
- **progressive**: Whether to output progressive font loading styles. `true` by default.
Sass:
```scss
.example {
// Outputs font-family, line-height, and font-size for the given scale, with a fallback font for progressive font loading.
@include oTypographySans($scale: 7);
a {
@include oTypographyLink();
}
```
Set the `$external` argument to to indicate the link leads to a different website with an icon.
```scss
.example {
// Outputs font-family, font-size for the given scale, the custom line-height, and no fallback font.
@include oTypographySans($scale: 1, $line-height: 28px, $progressive: false);
.my-external-link {
@include oTypographyLink($external: true);
}
```
To create a custom link style set the `$theme` argument. Where `$theme` is a map of configuration including:
- **base**: an [o-colors](https://registry.origami.ft.com/components/o-colors) palette colour name for the link
- **hover**: an [o-colors](https://registry.origami.ft.com/components/o-colors) palette colour name for link on hover
```scss
.example {
// Responsive font scales are also supported
// In this example the scale is 0, then 1 on a medium display, 2 on an extra large display.
@include oTypographySans($scale: (default: 0, M: 1, XL: 2) );
.my-custom-link {
@include oTypographyLink($theme: ('base': 'claret', 'hover': 'claret-30'));
}
```
See more type mixins in the registry [SassDoc documentation](sassdoc).
#### oTypographyList
### Font Scale mixin
`oTypographyList` outputs styles for lists such as `ul` or `ol` elements and styles child `li` elements. It does not output specific font styles such as font size, weight, etc. Font styles are instead inherited from the parent element.
If you want to output only the font-size and line-height from the font scale, you can use the `oTypographySize` mixin.
`oTypographyList` by default outputs only shared styles between all list types. To output all styles for a list type set the `$type` argument to either `unordered` or `ordered`.
E.g. to output styles for an unordered list:
```scss
.example {
@include oTypographySize($scale: 8);
.my-unordered-list {
@include oTypographyList('unordered');
}
```
It can also accept a second parameter of `$line-height` to override the default value from the font scale.
Use `$include-base-styles` to avoid duplicating shared styles between list types:
```scss
.example {
@include oTypographySize($scale: 8, $line-height: 1.4);
.my-list {
@include oTypographyList();
}
.my-list--ordered {
@include oTypographyList($type: 'ordered', $include-base-styles: false);
}
.my-list--unordered {
@include oTypographyList($type: 'unordered', $include-base-styles: false);
}
```
As with the [type mixins](#type-mixins), the `oTypographySize` mixin can accept a map for a responsive scale.
#### oTypographyCaption
`oTypographyCaption` outputs styles for credit/captions, e.g. for photo or video elements.
```scss
.example {
@include oTypographySize($scale: (default: 0, M: 1, XL: 2));
caption {
@include oTypographyCaption();
}
```
To provide a custom line height for each individual breakpoint pass the scale as a list, where the custom line height is the second item. In this example the scale is `0` and line-height is `1.4` by default. On large `XL` screens the scale is `2` and the line-height is `1.2`.
#### oTypographyFooter
`oTypographyFooter` outputs styles for footer elements.
```scss
.example {
@include oTypographySize($scale: (default: (0, 1.4), XL: (2, 1.2)));
footer {
@include oTypographyFooter();
}
```
There is also a function that will cap line width based on the scale and the characters per line:
#### oTypographySub and oTypographySuper
- `oTypographyMaxLineWidth($scale, $character-per-line)` - (function) returns a pixel value.
`oTypographySub` and `oTypographySuper` provide styles for sans-serif subscript and superscript elements.
### Spacing
```scss
sup {
@include oTypographySuper;
}
**`o-typography` spacing Sass is now deprecated, use [o-spacing](https://github.com/Financial-Times/o-spacing) Sass instead.**
sub {
@include oTypographySub;
}
```
Before [o-spacing](https://github.com/Financial-Times/o-spacing) `o-typography` provided spacing Sass for placing elements within our baseline grid. The baseline grid defaults to `4px`, and is stored in `$o-typography-baseline-unit`.
### Type Mixins
There are 2 mixins and a function provided for working with the baseline grid. Each mixin or function takes arguments used as multipliers of the `$o-typography-baseline-unit` variable.
If you want to output only the font-family, font-size, and line-height, with no extra styles, use the type mixins.
- `oTypographyMargin($top, $bottom)` - (mixin) output top and bottom margins
- `oTypographyPadding($top, $bottom)` - (mixin) output top and bottom padding
- `oTypographySpacingSize($units)` - (function) returns a pixel value
- `oTypographySans` - Typically for UI elements.
- `oTypographySerif` - Typically for editorial body copy.
- `oTypographyDisplay` - Typically for editorial headings.
These are now deprecated in favour of [o-spacing](https://github.com/Financial-Times/o-spacing) Sass. See more details about spacing in the registry [SassDoc documentation](sassdoc).
These mixins take arguments:
### Custom link mixin
- **scale**: The number on the font scale from -2 to 10, or a map of scales to specify the scale responsively at different breakpoints. This sets a font-size and line height according to the font scale.
- **line-height**: The line-height value to set. Defaults to the line-height for the chosen `scale` or `null` if no scale is chosen.
- **weight**: The weight value to set, e.g. `regular`, `semibold`, `bold`. `null` by default.
- **style**: The style value to set, `normal` or `italic`. `null` by default.
- **include-font-family**: Whether to output the `font-family` property. `true` by default.
- **include-progressive**: Whether to output progressive font loading styles. `true` by default.
Links in o-typography have a custom underline which uses borders. As well as the default link mixin (`oTypographyLink`), we expose `oTypographyLinkCustom` which allows you to output link styles with your own colors.
For a link that launches another window / tab, use oTypographyLinkExternal.
Output a font-family property only for the serif font.
```scss
@include oTypographySerif();
```
This mixin accepts four arguments, all of which must be valid o-colors palette colors:
Output font-family, font-size, and line-height for the sans font.
```scss
@include oTypographySans($scale: 1);
```
- **baseColor**: The base text color of the link. This is mixed with `backgroundColor` to create the underline color.
- **hoverColor**: The text color of the link when it's hovered or focused.
- **backgroundColor**: The color of the background the link will sit on. Defaults to `paper`.
- **outlineColor**: The outline color of the link when it receives focus. Defaults to `teal`.
Output font-family, font-size, and line-height for the serif font responsively. The scale is 0 by default, 1 on a medium display, 2 on an extra large display.
```scss
@include oTypographySerif($scale: ('default': 0, 'M': 1, 'XL': 2));
```
Example usage:
Output font-family, font-size, and line-height for the display font. Set a custom line-height of 1.6.
```scss
@include oTypographyDisplay($scale: 1, $line-height: 1.6);
```
Output font-family, font-size, line-height, font-weight, and font-style for the serif font.
```scss
.my-custom-link {
@include oTypographyLinkCustom(
$baseColor: 'claret',
$hoverColor: 'claret-30'
);
}
@include oTypographySerif($scale: 1, $weight: 'bold', $style: 'italic');
```
.dark-background .my-custom-link {
@include oTypographyLinkCustom(
$baseColor: 'lemon',
$hoverColor: 'lemon-30',
$backgroundColor: 'slate'
);
}
Output sans font properties without the font-family property. This is useful if modifying the scale of existing typography where the font family is inherited and does not need repeating.
```scss
@include oTypographySans($scale: 1, $style: 'italic', $include-font-family: false);
```
### Line Width capping
Output serif font properties without sizes for the fallback font (without progressive font loading).
```scss
@include oTypographySerif($scale: 1, $style: 'italic', $include-progressive: false);
```
If you need to cap the line width, o-typography provides a function which limits that value based on the size of the font and an optimal amount of characters per line (65~).
### Line Width Capping
If you need to cap the line width, o-typography provides a function which limits that value based on the size of the font and an optimal amount of characters per line (65~). Limiting the line length of typography improves readability.
```scss
max-width: oTypographyMaxLineWidth($scale: 1);
max-width: oTypographyMaxLineWidth();
```

@@ -322,6 +363,6 @@

```scss
// Set custom sans font.
@include oTypographySetFont($type: 'sans', $family: 'MySansFont, sans');
// The custom sans font is now output by other `o-typography` mixins such as `oTypography`.
@include oTypography();
// Set custom sans font.
@include oTypographySetFont($type: 'sans', $family: 'MySansFont, sans');
// The custom sans font is now output by other `o-typography` mixins such as `oTypography`.
@include oTypography();
```

@@ -385,18 +426,8 @@

h1 {
@include oTypographyHeadingLevel1();
@include oTypographyHeading($level: 1);
}
h2 {
@include oTypographyHeadingLevel2();
@include oTypographyHeading($level: 2);
}
blockquote {
p {
@include oTypographyBlockquote;
}
footer {
@include oTypographyFooter;
}
}
```

@@ -413,3 +444,3 @@

```js
const oTypography = require('o-typography');
import oTypography from 'o-typography';

@@ -434,130 +465,18 @@ const otypography = new oTypography();

### Fonts not loading in any brower
### Fonts not loading in any browser
This is likely due to the server sending the fonts having misconfigured Cross Origin Resource Sharing (CORS). The solution to this is to set the header `Access-Control-Allow-Origin` with the value `*` for any font requests.
## Migration guide
## Migration
### Migrating from v4 to v5
State | Major Version | Last Minor Release | Migration guide |
:---: | :---: | :---: | :---:
✨ active | 6 | N/A | [migrate to v6](MIGRATION.md#migrating-from-v5-to-v6) |
⚠ maintained | 5 | 5.12 | [migrate to v5](MIGRATION.md#migrating-from-v4-to-v5) |
╳ deprecated | 4 | 4.3 | - |
╳ deprecated | 3 | 3.3 | - |
╳ deprecated | 2 | 2.0 | - |
╳ deprecated | 1 | 1.16 | - |
V5 of o-typography is a complete overhaul of the typographic system for FT products. The update includes:
- introducing a **new typographic scale**, replacing the type matrix system in the previous version. This affects the [mixins and sizes](#mixins-and-sizes) provided by the API.
- new use cases, updated to reflect the latest master brand styles. These are available via new [CSS classes](#css-classes) and mixins.
- removing access to the `FinancierText` font family and replace serif font with `Georgia`.
#### Mixins and sizes
To help you migrate from the v4 mixins to the v5 mixins. We have provided a [table recommending the mixins and font scale](migrating-v4-v5.md) you should use when migrating from v4 to v5.
The following mixins are now renamed:
```diff
- oTypographySerifDisplayBold
+ oTypographyDisplayBold
- oTypographySerifDisplay
+ oTypographyDisplay
- oTypographySansDataBold
+ oTypographySansBold
- oTypographySansData
+ oTypographySans
- font-size
+ oTypographySize
- oTypographyProgressiveFont
+ oTypographyProgressiveFontFallback
- oTypographyFallbackFontSize
+ _oTypographyProgressiveFontFallbackSize
- oTypographyHeading1
+ oTypographyHeadline
- oTypographyHeading2
+ oTypographyHeadingLevel2
- oTypographyHeading3
+ oTypographyHeadingLevel3
- oTypographyHeading4
+ oTypographyHeadingLevel4
- oTypographyHeading5
+ oTypographyHeadingLevel5
- oTypographyLinkTopic
- oTypographyLinkTopicMedium
+ oTypographyTopic
```
v5 also removes the following mixins:
```diff
- oTypographySansSize
- oTypographySansBoldSize
- oTypographySansDataSize
- oTypographySansDataBoldSize
- oTypographySansDataItalicSize
- oTypographySerifSize
- oTypographySerifBoldSize
- oTypographySerifItalicSize
- oTypographySerifDisplaySize
- oTypographySerifDisplayBoldSize
- oTypographySerifDisplayItalicSize
```
#### CSS classes
v5 introduces several changes to the CSS classes that are available. Whether using the build service or Sass with silent mode switched off you will need to update to the new classnames. The following diff shows removed class and what classname you should use instead, if available.
```diff
- .o-typography-block
+ .o-typography-body
- .o-typography-lead
- .o-typography-lead--small
+ .o-typography-standfirst
- o-typography-heading1
+ o-typography-headline
- o-typography-heading2
+ o-typography-heading-level-2
- o-typography-heading3
+ o-typography-heading-level-3
- o-typography-heading4
+ o-typography-heading-level-4
- o-typography-heading5
+ o-typography-heading-level-5
- .o-typography-link-topic
- .o-typography-link-topic--medium
+ .o-typography-topic
- .o-typography-body-wrapper
+ .o-typography-wrapper
// The following classnames do not have like-for-like replacements
- .o-typography-flyline
- .o-typography-subhead
- .o-typography-subhead--standard
- .o-typography-subhead--crosshead
- .o-typography-aside__title
- .o-typography-aside__title--large
- .o-typography-aside__headline
- .o-typography-aside__headline--small
- .o-typography-aside__headline--large
- .o-typography-aside__body
- .o-typography-aside__body--small
- .o-typography-aside-wrapper
```
---

@@ -564,0 +483,0 @@ 

dist/scss/_deprecated.scss
dist/scss/_type-mixins.scss
dist/scss/use-cases/_article.scss
dist/scss/use-cases/_asides.scss
dist/scss/use-cases/_headings.scss
dist/scss/use-cases/_product-headings.scss
src/scss/_deprecated.scss
src/scss/_type-mixins.scss
src/scss/use-cases/_article.scss
src/scss/use-cases/_asides.scss
src/scss/use-cases/_headings.scss
src/scss/use-cases/_product-headings.scss
dist/scss/_brand.scss

Sorry, the diff of this file is not supported yet

dist/scss/_functions.scss

Sorry, the diff of this file is not supported yet

dist/scss/_mixins.scss

Sorry, the diff of this file is not supported yet

dist/scss/_variables.scss

Sorry, the diff of this file is not supported yet

dist/scss/use-cases/_general.scss

Sorry, the diff of this file is not supported yet

dist/scss/use-cases/_wrapper.scss

Sorry, the diff of this file is not supported yet

main.scss

Sorry, the diff of this file is not supported yet

src/scss/_brand.scss

Sorry, the diff of this file is not supported yet

src/scss/_functions.scss

Sorry, the diff of this file is not supported yet

src/scss/_mixins.scss

Sorry, the diff of this file is not supported yet

src/scss/_variables.scss

Sorry, the diff of this file is not supported yet

src/scss/use-cases/_general.scss

Sorry, the diff of this file is not supported yet

src/scss/use-cases/_wrapper.scss

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc