diff --git a/src/docs/theme/css-variables.stories.mdx b/src/docs/theme/css-variables.stories.mdx index 258c2a87..0b9013d0 100644 --- a/src/docs/theme/css-variables.stories.mdx +++ b/src/docs/theme/css-variables.stories.mdx @@ -24,7 +24,7 @@ Several [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_C ``` -## Variables +## Default theme variables Read more about how to override or define your own CSS variables in the [Themes](/docs/theming-theme--custom-theme) section. @@ -78,3 +78,52 @@ Read more about how to override or define your own CSS variables in the [Themes] | `--theme-scale-size-4` | Size level 4 | calc(var(--theme-scale-size-base) \* 0.9rem) | | `--theme-scale-size-5` | Size level 5 | calc(var(--theme-scale-size-base) \* 0.72rem) | | `--theme-scale-size-6` | Size level 6 | calc(var(--theme-scale-size-base) \* 0.66rem) | + +## Adding custom variables + +For some projects, you may need more style attributes that you can define globally while allowing it to be customisable. You may be doing so using SCSS variable in your `main.scss` but that prevent those styles from being customised/overridden from the client side. Hence, it is a good practice to define such thematic styles in the `Theme` component using CSS variables. + +For example, you want to define the border radius for your info cards in you app. You can create a new set of styles in the `` as follows – + +```svelte + + + + + +``` + +You can also use Svelte's variables to change the CSS values assigned on some condition. +e.g. A smaller border radius on mobile screens. + +```svelte + + + + + + + +``` diff --git a/src/docs/typography/custom-fonts.stories.mdx b/src/docs/typography/custom-fonts.stories.mdx new file mode 100644 index 00000000..b12c5371 --- /dev/null +++ b/src/docs/typography/custom-fonts.stories.mdx @@ -0,0 +1,66 @@ +import { Meta } from '@storybook/addon-docs'; +import { parameters } from '$docs/utils/docsPage.js'; + +import Gfont from './gfonts.png'; + + + +![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) + +# Adding custom fonts + +For some projects, you may need to use typefaces other than the defaults provided by the GraphicsKit. + +You will need to: + +- Import the fonts in your code. +- Declare the `font-family` in the corresponding CSS variables in the Theme. + +## Importing custom fonts + +There are many ways to load fonts, but care should be taken that the font files load first before page render, to avoid layout shifts during font swapping after the font is downloaded. For this reason, we will use `` method in the page `head` instead of CSS imports. + +In this sample from [Google Fonts](https://fonts.google.com/), once we have selected the font families, copy the `` code. + + + +In your project, navigate to `Pages` > `layout.svelte` and add the code in `svelte:head` fragment as follows: + +```svelte + + + + + + + +``` + +Similarly, you can add fonts from Adobe Typekit or custom local fonts with the correct paths to the URL. + +## Adding fonts to the theme + +You can customise one or more of the the pre-defined font families in the Theme. + +> Do not directly apply the font family in your CSS. Always use the CSS variables defined in the Theme so that it configures and reflects across the page design. + +```svelte + + + +``` + +Read more about customising typefaces in the [How to use](/docs/typography-how-to-use--typefaces) section. diff --git a/src/docs/typography/customising.stories.mdx b/src/docs/typography/customising.stories.mdx deleted file mode 100644 index 16acd595..00000000 --- a/src/docs/typography/customising.stories.mdx +++ /dev/null @@ -1,12 +0,0 @@ -import { Meta } from '@storybook/addon-docs'; -import { parameters } from '$docs/utils/docsPage.js'; - -import Typeset from './typeset.png'; -import TypeGuides from './type-guides.png' - - - -![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg) - -# Customising typographic styles - diff --git a/src/docs/typography/docs/style.md b/src/docs/typography/docs/style.md index d5687a26..68626bb5 100644 --- a/src/docs/typography/docs/style.md +++ b/src/docs/typography/docs/style.md @@ -7,15 +7,15 @@ The styles are automatically applied to native HTML elements like the `H` and `p ``` -These are the available **text styles** and their **corresponding tokens**. The `font-size-` inherits the sizes based on the scale as described by the [Type System](/docs/typography-intro--page). Check out the CSS variables in the Styling section to see the default values assigned by the Theme. +These are the available **text styles** and their **corresponding tokens**. The `font-size-` inherits the sizes based on the scale as described by the [Type System](/docs/typography-intro--page). Check out the CSS variables in the Styling section to see the default values and roles assigned by the Theme. | Style | class | mixin | CSS vars used from Theme | | ------------- | ---------------- | --------------- | -------------------------------------------------------------------------------------------- | -| Page title | `.font-hed ` | `font-hed ` | `--theme-font-size-hed`, `--theme-font-family-hed` , `--theme-colour-text-primary` | +| Page title | `.font-hed` | `font-hed` | `--theme-font-size-hed`, `--theme-font-family-hed` , `--theme-colour-text-primary` | | Section title | `.font-subhed-1` | `font-subhed-1` | `--theme-font-size-subhed-1`, `--theme-font-family-subhed` , `--theme-colour-text-primary` | | Subhed | `.font-subhed-2` | `font-subhed-2` | `--theme-font-size-subhed-2`, `--theme-font-family-subhed` , `--theme-colour-text-primary` | | Smallhed | `.font-subhed-3` | `font-subhed-3` | `--theme-font-size-subhed-3`, `--theme-font-family-subhed` , `--theme-colour-text-secondary` | -| Body text | `.font-body ` | `font-body` | `--theme-font-size-body`, `--theme-font-family-body` , `--theme-colour-text-primary` | +| Body text | `.font-body` | `font-body` | `--theme-font-size-body`, `--theme-font-family-body` , `--theme-colour-text-primary` | | Body note | `.font-note-1` | `font-note-1` | `--theme-font-size-note-1`, `--theme-font-family-note` , `--theme-colour-text-primary` | | Endnotes | `.font-note-2` | `font-note-2` | `--theme-font-size-note-2`, `--theme-font-family-note` , `--theme-colour-text-secondary` | | Footnotes | `.font-note-3` | `font-note-3` | `--theme-font-size-note-3`, `--theme-font-family-note` , `--theme-colour-text-secondary` | diff --git a/src/docs/typography/gfonts.png b/src/docs/typography/gfonts.png new file mode 100644 index 00000000..65849c82 Binary files /dev/null and b/src/docs/typography/gfonts.png differ diff --git a/src/docs/typography/intro.stories.mdx b/src/docs/typography/intro.stories.mdx index 18b453de..fb31b714 100644 --- a/src/docs/typography/intro.stories.mdx +++ b/src/docs/typography/intro.stories.mdx @@ -2,7 +2,7 @@ import { Meta } from '@storybook/addon-docs'; import { parameters } from '$docs/utils/docsPage.js'; import Typeset from './typeset.png'; -import TypeGuides from './type-guides.png' +import TypeGuides from './type-guides.png'; import DemoImg from './demo.png'; @@ -11,21 +11,12 @@ import DemoImg from './demo.png'; # Typography -Our design system includes a typographic scale based on the scale of fifths to create six harmonic levels of font sizes. These will guide the basic sizing of headlines, body text and spacing in a graphics page. +Our design system includes a typographic scale based on the scale of fifths to create six harmonic levels of font sizes. These will guide the basic sizing of headlines, body text and spacing in a graphics page. The typographic scale is set using the CSS variable in the theme component. You can customise them if you need a bespoke typesetting for your project. - - ## The type system - - +## How it works + + + +Text styles are composed using [CSS variables](/docs/theming-css-variables--page) for size, family and colours from the `Theme`. The font size inherits `--theme-scale-size-*` and font family inherits `--theme-typeface-*`. See which CSS vars flow in to the type system in the [How to use text styles](/docs/typography-how-to-use--text-styles) section. + ## Default usage In your projects, you will use the typographic styles as per the function – + - Page title, subheads and section titles - Body copy - Graphic descriptions, captions and other notes The styles are also applied to native HTML elements like the `H` and `p` tags. -> For Graphics Kit users, the typographic styles are already imported and applied to the individual components. So, if you want to customise them, check the next `Customising text styles` section. +> For Graphics Kit users, the typographic styles are already imported and applied to the individual components. - -## How it works - -Somthing about the base sizes and derived scale coupled with other styles \ No newline at end of file