Newskit 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
invalidcomponent statethis is a css styles to override the base when component is valid, for example, any input or form component whose contents validate unsuccessfully
validcomponent statethis is a css styles to override the base when component is invalid, for example, any input or form component whose contents validate successfully

The following component states will only be applied if selected, valid, invalid and visited states are in the stylePresets as well. For example, 'selected:hover' can be applied if there is a selected state in the stylePreset.

NameTypeDescription
'selected:hover'component statethis is a css styles to override the hover state when component is in the selected state as well as the hover state
'selected:focus'component statethis is a css styles to override the focus state when component is in the selected state as well as the focus state
'valid:hover'component statethis is a css styles to override the hover state when component is in the valid state as well as the hover state
'invalid:hover'component statethis is a css styles to override the hover state when component is in the invalid state as well as the hover state
'valid:focus'component statethis is a css styles to override the focus state when component is in the valid state as well as the focus state
'invalid:focus'component statethis is a css styles to override the focus state when component is in the invalid state as well as the focus state
'visited:hover'component statethis is a css styles to override the hover state when component is in the visited state as well as the hover state
'visited:focus'component statethis is a css styles to override the focus state when component is in the visited state as well as the focus state

StylePreset Properties

NameDescription
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
boxShadowThe box-shadow property, set to a token from theme.shadows
caretColorThis property sets the color of the insertion caret, see https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color
colorThe text color, set this to a token from theme.colors
hyphensThe hyphens property, see https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
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
textAlignThe text-align property, see https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
textOverflowThe text-overflow property, see https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
textDecorationThe text-decoration property, see https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
textTransformThe text-transform property, see https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform
whiteSpaceThe white-space property, see https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
wordBreakThe word-break property, see https://developer.mozilla.org/en-US/docs/Web/CSS/word-break