wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

custom fonts and css vars

Browse source
This commit is contained in:
Prasanta Kumar Dutta 2023-03-16 15:23:04 +05:30
parent d146d601b0
commit be250cf97f
6 changed files with 134 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/docs/theme/css-variables.stories.mdx vendored
View file

@ -24,7 +24,7 @@ Several [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_C
</style>
```
## 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 `<Theme>` as follows –
```svelte
<Theme
base="light"
theme="{{
style: {
'border-radius': '22px',
},
}}"
>
<!-- page stuff -->
</Theme>
<style lang="scss">
.card {
border-radius: var(--theme-style-border-radius);
}
</style>
```
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
<script>
// other code
let windowWidth;
</script>
<svelte:window bind:innerWidth="{windowWidth}" />
<Theme
base="light"
theme="{{
style: {
'border-radius': windowWidth > 475 ? '22px' : '11px',
},
}}"
>
<!-- page stuff -->
</Theme>
```

66
src/docs/typography/custom-fonts.stories.mdx Normal file
View file

@ -0,0 +1,66 @@
import { Meta } from '@storybook/addon-docs';
import { parameters } from '$docs/utils/docsPage.js';
import Gfont from './gfonts.png';
<Meta title="Typography/Adding custom fonts" parameters={{ ...parameters }} />
![](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 `<link>` 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 `<link>` code.
<img
className="feature"
src={Gfont}
width="100%"
style={{ margin: '3rem 0' }}
/>
In your project, navigate to `Pages` > `layout.svelte` and add the code in `svelte:head` fragment as follows:
```svelte
<svelte:head>
<!-- Replace this with your own font url-->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Figtree&display=swap"
rel="stylesheet"
/>
<!-- -->
</svelte:head>
```
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
<Theme
base="light"
theme="{{
font: { 'family-sans-serif': 'Figtree', sans-serif },
}}"
>
<!-- Page content -->
</Theme>
```
Read more about customising typefaces in the [How to use](/docs/typography-how-to-use--typefaces) section.

12
src/docs/typography/customising.stories.mdx
View file

@ -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'
<Meta title="Typography/Customising" parameters={{ ...parameters }} />
![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
# Customising typographic styles

6
src/docs/typography/docs/style.md
View file

@ -7,15 +7,15 @@ The styles are automatically applied to native HTML elements like the `H` and `p
</div>
```
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` |

BIN
src/docs/typography/gfonts.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 328 KiB

31
src/docs/typography/intro.stories.mdx
View file

@ -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';
<Meta title="Typography/Intro" parameters={{ ...parameters }} />
@ -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
<img
className="feature"
src={Typeset}
width="100%"
style={{ margin: '3rem 0' }}
/>
<img
className="feature"
src={TypeGuides}
@ -33,16 +24,28 @@ The typographic scale is set using the CSS variable in the theme component. You
style={{ margin: '3rem 0' }}
/>
## How it works
<img
className="feature"
src={Typeset}
width="100%"
style={{ margin: '3rem 0' }}
/>
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.
<img
className="feature"
@ -50,7 +53,3 @@ The styles are also applied to native HTML elements like the `H` and `p` tags.
width="100%"
style={{ margin: '3rem 0' }}
/>
## How it works
Somthing about the base sizes and derived scale coupled with other styles