Every style preset carries a meaning and purpose. Specific shapes, colours or effects are used to communicate intent or give cues about the interaction.
- Fill (image or solid colour)
Contained within a shape of:
- Square (sharp)
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.
In the future some components will take multiple style presets, that apply across multiple child components.
|base||baseline css||this is a group of style preset preset css styles|
|hover||css Pseudo-classes||see https://developer.mozilla.org/en-US/docs/Web/CSS/:hover|
|focus||css Pseudo-classes||see https://developer.mozilla.org/en-US/docs/Web/CSS/:focus|
|active||css Pseudo-classes||see https://developer.mozilla.org/en-US/docs/Web/CSS/:active|
|visited||css Pseudo-classes||see https://developer.mozilla.org/en-US/docs/Web/CSS/:visited|
|disabled||css Pseudo-classes||see https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled|
|selected||component state||this 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|
|loading||component state||this is a css styles to override the base when component is in transitional "loading" state|
|boxShadow||The box-shadow property, set to a token from |
|color||The text color, set this to a token from |
|iconColor||The icon color and fill for any child icons, set this to a token from |
|placeholderColor||The color of input field placeholder text - this will only have effect on elements supporting the ::placeholder pseudo selector|
|backgroundColor||The background-color, set this to a token from |
|backgroundImage||Alternative to background-color, see https://developer.mozilla.org/en-US/docs/Web/CSS/background-image|
|backgroundRepeat||Used in conjunction with backgroundImage, see https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat|
|backgroundPosition||Used in conjunction with backgroundImage, see see https://developer.mozilla.org/en-US/docs/Web/CSS/background-position|
|borderStyle||The border-style property, set this to any valid css border-style value|
|borderColor||The border-color property, set this to a token from |
|borderRadius||The border-radius property, set to a border radius token from |
|borderWidth||The border-width property, set to a border width token from |
|textDecoration||The text-decoration property, see https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration|
|textOverflow||The text-overflow property, see https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow|
|caretColor||This property sets the color of the insertion caret, see https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color|