import { Meta } from '@storybook/addon-docs';
import { parameters } from '$docs/utils/docsPage.js';

<Meta title="SCSS/CSS variables" parameters={{ ...parameters }} />

![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)

# 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                |