Newskit Logo
About

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:

TokenAccepted ValuesDescription

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:

ExampleStateDescription

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.

Transition Presets

A collection of motion attributes combined into a preset to define reusable motion transition from one state to another.

Transition Presets

A collection of motion attributes combined into a preset to define reusable motion transition from one state to another.