Presets
Style Presets
A collection of foundational design tokens combined into a preset to define reusable styles for interface elements and their interactive states.
Overview
Style Presets define properties such as colour, border-radius and text-decoration, across multiple states. For example, one style preset can contain the style for all states of a button.
In combination with Typography Presets, Sizing, and Spacing, Style Presets provide the visual attributes of a component.
Style Preset style properties
Style Presets use a combination of the following styles:
| Token | Accepted Values | Description |
|---|
Careful consideration should be given when choosing CSS values due to the impact on the theming system.
Style Preset states
The following states can be applied to Style Presets styles:
| Example | State | Description |
|---|
Using Style Presets
Style Presets can be applied to NewsKit components in a number of ways, learn more about using a theme in code to better understand the trade-offs associated with each approach. For more advanced use cases, Style Presets can be accessed from the theme by calling getStylePreset or Emotion’s useTheme hook.
Code example
This example demonstrates declaring style presets for the Button component. It can be passed to the createTheme function:
1const buttonSolidPrimary: StylePresetStates = {
2 base: {
3 backgroundColor: '{{colors.interactivePrimary030}}',
4 borderRadius: '{{borders.borderRadiusCircle}}',
5 color: '{{colors.inkInverse}}',
6 iconColor: '{{colors.inkInverse}}',
7 },
8 hover: {
9 backgroundColor: '{{colors.interactivePrimary040}}',
10 },
11 active: {
12 backgroundColor: '{{colors.interactivePrimary050}}',
13 },
14 disabled: {
15 backgroundColor: '{{colors.interactiveDisabled010}}',
16 color: '{{colors.inkNonEssential}}',
17 iconColor: '{{colors.inkNonEssential}}',
18 },
19 loading: {
20 backgroundColor: '{{colors.interactivePrimary020}}',
21 color: '{{colors.inkBrand010}}',
22 iconColor: '{{colors.inkBrand010}}',
23 },
24};Adding custom Style Presets to the theme
Custom Style Presets can be added to the theme. See the Creating Themes guide for more details.