52 lines
2.7 KiB
Text
52 lines
2.7 KiB
Text
import { Meta } from '@storybook/addon-docs';
|
|
import { parameters } from '$docs/utils/docsPage.js';
|
|
|
|
<Meta title="SCSS/CSS variables" parameters={{ ...parameters }} />
|
|
|
|
|
|
|
|
# CSS variables
|
|
|
|
Several [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are provided by the [`Theme`](?path=/docs/components-theme--default) component. All other components in this library use these variables for styling basic colours and typography. You can (and probably _should_) use them in you own code, too.
|
|
|
|
> In the future, client's may be allowed to override our CSS variables to match their own house styles. So when using CSS variables, it's a good idea to set a [fallback value](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#custom_property_fallback_values), in case a client misconfigures a variable override.
|
|
>
|
|
> **Note:** CSS variables do not currently affect [ai2svelte](https://github.com/reuters-graphics/ai2svelte/) graphics, so you should continue to make sure your colours match the theme of your page directly in Adobe Illustrator for those graphics.
|
|
|
|
```svelte
|
|
<p>My custom text</p>
|
|
|
|
<style lang="scss">
|
|
p {
|
|
color: var(--theme-colour-text-primary, #333);
|
|
font-family: var(--theme-font-family-body, Knowledge);
|
|
}
|
|
</style>
|
|
```
|
|
|
|
## Variables
|
|
|
|
### Colours
|
|
|
|
| CSS variable | Role |
|
|
| ------------------------------- | ------------------------------- |
|
|
| `--theme-colour-background` | Background colour |
|
|
| `--theme-colour-text-primary` | Primary text colour body text |
|
|
| `--theme-colour-text-secondary` | Secondary text colour for notes |
|
|
| `--theme-colour-accent` | A single accent colour |
|
|
| `--theme-colour-brand-logo` | Reuters logo kinesis colour |
|
|
| `--theme-colour-brand-rules` | Rules in header and footer |
|
|
| `--theme-colour-brand-shadow` | Box shadow on header |
|
|
|
|
### Fonts
|
|
|
|
| CSS variable | Role |
|
|
| -------------------------------- | ------------------------------- |
|
|
| `--theme-font-size-base` | Base font size |
|
|
| `--theme-font-family-serif` | Base serif font family |
|
|
| `--theme-font-family-sans-serif` | Base sans-serif font family |
|
|
| `--theme-font-family-monospace` | Base monospace font family |
|
|
| `--theme-font-family-hed` | Headline (`h1`) font family |
|
|
| `--theme-font-family-subhed` | Subhead (`h2`-`h6`) font family |
|
|
| `--theme-font-family-body` | Body text font family |
|
|
| `--theme-font-family-note` | Note font family |
|