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

Comparing version 5.9.1 to 5.10.0

package.json

		@@ -25,3 +25,3 @@ {
		"name": "@financial-times/o-typography",
		"version": "5.9.1",
		"version": "5.10.0",
		"dependencies": {
		@@ -28,0 +28,0 @@ "fontfaceobserver": "^2.0.9",

README.md

		@@ -352,2 +352,49 @@ # 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)

		### Customisation

		`o-typography` provides mixins to [set a custom font](#use-a-custom-font) and a [custom font scale](#use-a-custom-font-scale). If your project uses the `whitelabel` brand, `o-typography` provides the option to customise typography further with the `oTypographyCustomize` mixin.

		With `oTypographyCustomize` you can change the size of heading levels and update the colour of `o-typography`'s blockquote. In the below example, we update the size of `h1` and `h2` headings, and change the blockquote colour to `hotpink`. For a full list of brand variables which may be customised, see the [oTypographyCustomize SassDoc](https://registry.origami.ft.com/components/o-typography/sassdoc?brand=whitelabel#mixin-oTypographyCustomize).

		```scss
		$o-brand: whitelabel;
		@import 'o-typography/main';

		// 1. Set a custom font.
		// See "Use A Custom Font".

		// 2. Set a custom typographic scale.
		// See "Use A Custom Font Scale".

		// 3. Customise typography variants.
		@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).
		)
		));

		// 4. Output typography styles.
		h1 {
		@include oTypographyHeadingLevel1();
		}

		h2 {
		@include oTypographyHeadingLevel2();
		}

		blockquote {
		p {
		@include oTypographyBlockquote;
		}

		footer {
		@include oTypographyFooter;
		}
		}
		```

		## JavaScript
		@@ -354,0 +401,0 @@

dist/scss/_brand.scss