164 lines
4.5 KiB
Text
164 lines
4.5 KiB
Text
import { Meta, Canvas } from '@storybook/blocks';
|
|
|
|
import * as ThemeStories from './Theme.stories.svelte';
|
|
|
|
<Meta of={ThemeStories} />
|
|
|
|
# Theme
|
|
|
|
The `Theme` component wraps your page content and uses [CSS variables](../?path=/docs/scss-css-variables--page) to set major colour and typography styles for your page. All the components from this library that are added to your page will use the CSS variables set by `Theme`.
|
|
|
|
Use the [theme builder](?path=/docs/components-theming-theme-builder--docs) to test custom themes.
|
|
|
|
```svelte
|
|
<script>
|
|
import { Theme } from '@reuters-graphics/graphics-components';
|
|
</script>
|
|
|
|
<Theme base="light">
|
|
<!-- Page content, now styled according to your theme! -->
|
|
</Theme>
|
|
```
|
|
|
|
> In Graphics Kit, the `Theme` is set in both `pages/+page.svelte` and in `App.svelte`.
|
|
|
|
<Canvas of={ThemeStories.Demo} />
|
|
|
|
## Custom theme
|
|
|
|
You can customise your page's theme in two ways:
|
|
|
|
- Choose the `base` theme, either `light` or `dark`
|
|
- Pass a custom theme object to the `theme` prop, which will override styles in the `base` theme.
|
|
|
|
Use the [theme builder](?path=/docs/components-theming-theme-builder--docs) to see what properties you can customise.
|
|
|
|
```svelte
|
|
<Theme
|
|
base="dark"
|
|
theme={{
|
|
colour: { accent: 'var(--tr-light-orange)' },
|
|
font: { family: { hed: 'FreightText, serif' } },
|
|
}}
|
|
>
|
|
<!-- Page content -->
|
|
</Theme>
|
|
```
|
|
|
|
> **Note:** The `Theme` component only styles child components or elements, so if you're changing the background colour of your page, make sure to also set the `background-color` on your `body` element in global SCSS.
|
|
>
|
|
> ```scss
|
|
> // global.scss
|
|
> body {
|
|
> background-color: #2e3440;
|
|
> }
|
|
> ```
|
|
|
|
<Canvas of={ThemeStories.CustomTheme} />
|
|
|
|
## Custom font
|
|
|
|
To use typefaces other than the defaults provided by the Graphics Kit, download the font files from services such as [Google Fonts](https://fonts.google.com/) or [Adobe Typekit](https://fonts.adobe.com/). Make a folder called `fonts` inside `statics/` and put the font file -- for example, `IndieFlower-Regular.ttf` downloaded from [Google Fonts](https://fonts.google.com/share?selection.family=Indie+Flower) -- in `statics/fonts/`.
|
|
|
|
Then, declare it as a `@font-face` in `global.scss`:
|
|
|
|
```scss
|
|
/* global.scss in Graphics Kit */
|
|
@font-face {
|
|
// If you're unsure of the font-family name,
|
|
// click on "Get embed code" on the Google font page and check the CSS class.
|
|
font-family: 'Indie Flower';
|
|
|
|
// Path to the font file. Change format depending on the font file type.
|
|
src: url('/fonts/IndieFlower-Regular.ttf') format('truetype');
|
|
font-weight: normal; // Optional
|
|
font-style: normal; // Optional
|
|
}
|
|
```
|
|
|
|
Finally, pass the font to the appropriate text type in `Theme`:
|
|
|
|
```svelte
|
|
<Theme
|
|
base="light"
|
|
theme={{
|
|
font: {
|
|
family: {
|
|
hed: 'IndieFlower', // Set header text font to `IndieFlower`
|
|
body: 'IndieFlower', // Set body text font to `IndieFlower`
|
|
// etc...
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<!-- Page content -->
|
|
</Theme>
|
|
```
|
|
|
|
<Canvas of={ThemeStories.CustomFont} />
|
|
|
|
## Background patterns
|
|
|
|
To use a background pattern or image, set the background colour property in `Theme` to `transparent`:
|
|
|
|
```svelte
|
|
<Theme
|
|
base="dark"
|
|
theme={{
|
|
colour: { background: 'transparent' },
|
|
}}
|
|
>
|
|
<!-- Page content -->
|
|
</Theme>
|
|
```
|
|
|
|
Then in `global.scss`, set your image, which should be stored in `statics/images/`, as `background-image`:
|
|
|
|
```scss
|
|
/* global.scss */
|
|
body {
|
|
background-image: url('/images/my-pattern.png');
|
|
}
|
|
```
|
|
|
|
You may also want to override the background on the header nav if it conflicts with your background, especially the dropdown menu:
|
|
|
|
```scss
|
|
/* global.scss
|
|
Main nav container */
|
|
.nav-container .inner {
|
|
background: darkblue !important;
|
|
/* Dropdown menu */
|
|
.dropdown {
|
|
background: darkblue !important;
|
|
}
|
|
}
|
|
/* Mobile nav overlay */
|
|
header + .overlay {
|
|
background: darkblue !important;
|
|
}
|
|
```
|
|
|
|
<Canvas of={ThemeStories.BackgroundPatterns} />
|
|
|
|
## Inheritance
|
|
|
|
Styles that use `Theme`'s CSS variables will always use those set by the nearest parent `Theme`. That lets you change the theme for parts of your page by simply wrapping that bit in a new `Theme` with different styles.
|
|
|
|
The demo below shows a more complex example of nesting themes, but more likely you'll so something like this:
|
|
|
|
```svelte
|
|
<script>
|
|
import { Theme } from '@reuters-graphics/graphics-components';
|
|
</script>
|
|
|
|
<Theme>
|
|
<!-- Page content styled with the default light theme. -->
|
|
<Theme theme={{ colour: { background: 'lightgrey' } }}>
|
|
<!-- A darker background for this section. -->
|
|
</Theme>
|
|
<!-- Back to normal here... -->
|
|
</Theme>
|
|
```
|
|
|
|
<Canvas of={ThemeStories.Inheritance} />
|