NewsKit Mobile Logo

StylePreset

Overview

Every style preset carries a meaning and purpose. Specific shapes, colours or effects are used to communicate intent or give cues about the interaction.

stylepreset
  1. Overlay
  2. Border
  3. Fill (image or solid colour)
  4. Shadow

Contained within a shape of:

  • Square (sharp)
  • Rounded
  • Pill
  • Circle

A combination of the above can be used at different states, for example a button might not have a shadow until the user hovers over.

In some scenarios you will want to change the look and feel of a component in ways that aren't possible through changing tokens in a theme, this is where style presets come in. They can be thought of as a subset of CSS used to define look and feel of components. Style presets and their default mapping are defined on a theme, additional style presets can be created as and when needed.

Not all properties will style a given component, you should refer to specific component's to see what's supported.

The base theme defines default style presets for each component for instance

These can be overridden in a child theme.

Often we will only want to update a specific instance of a component to style in a different manner, in this scenario we can pass a style preset to a component. Nearly all visual components will take at least one style preset. It may help to think of this as applying a class to an element in HTML.

<Paragraph stylePreset="interactivePrimary040" />

If no style preset is provided, the button will render in the default state. Configuring this is detailed above.

<Paragraph />

In the future some components will take multiple style presets, that apply across multiple child components.

StylePreset States

NameTypeDescription
basebaseline cssthis is a group of style preset preset css styles
hovercss Pseudo-classessee https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
focuscss Pseudo-classessee https://developer.mozilla.org/en-US/docs/Web/CSS/:focus
activecss Pseudo-classessee https://developer.mozilla.org/en-US/docs/Web/CSS/:active
visitedcss Pseudo-classessee https://developer.mozilla.org/en-US/docs/Web/CSS/:visited
disabledcss Pseudo-classessee https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled
selectedcomponent statethis is a set of css styles to override the base when the component is selected, for example, in a tab menu the "selected" would be the selected tab
loadingcomponent statethis is a css styles to override the base when component is in transitional "loading" state

StylePreset Properties

NameDescription
boxShadowThe box-shadow property, set to a token from theme.shadows
colorThe text color, set this to a token from theme.colors
iconColorThe icon color and fill for any child icons, set this to a token from theme.colors
placeholderColorThe color of input field placeholder text - this will only have effect on elements supporting the ::placeholder pseudo selector
backgroundColorThe background-color, set this to a token from theme.colors
backgroundImageAlternative to background-color, see https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
backgroundRepeatUsed in conjunction with backgroundImage, see https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
backgroundPositionUsed in conjunction with backgroundImage, see see https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
borderStyleThe border-style property, set this to any valid css border-style value
borderColorThe border-color property, set this to a token from theme.colors
borderRadiusThe border-radius property, set to a border radius token from theme.borders
borderWidthThe border-width property, set to a border width token from theme.borders
textDecorationThe text-decoration property, see https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
textOverflowThe text-overflow property, see https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
caretColorThis property sets the color of the insertion caret, see https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color