Styling

Base Styles

All components are prestyled when importing the predefined CSS custom properties from @steeze-ui/components/base.css as seen in the documentation examples. The properties deliver most tokens a design system should have like colors, font sizes or shadows which are used throughout the components.

Most components also define their own properties which at first extend from the base properties but are globally overridable.

All tokens of the steeze design system are prefixed with st ( e.g –st-field-font-size )

Dark Theme

Steeze UI provides a dark and light variant of all components by default. Just add .light or .dark to the html or body tag (with dark theme as the default if nothing is provided)

Overriding Properties

Base Overrides

Some properties are used in many places, like the --st-field-border-radius property which is used to define the border radius of all input fields (e.g Select or TextField). These can be used to quickly change the overall look of the components.

Define them in the root of your stylesheet or wherever you want to apply them (but after the base styles import). You can also override only a part of your app to have for example square borders

Component Overrides

Whenever a component would use something from the design system like background-color, it will be availabe for you to override with a prefix of the component. For example if you want to change the background color of the Button component, you can override the base bg with: --st-button-bg-color or the font size with: --st-button-font-size

Component Parts

When a component isn’t as simple as the Button component and has multiple parts, they are marked as such. E.g the Label component of a Select always has the attribute part="label", so you can access it globally like:

:global([part='select'] [part='label']) {
	color: var(--st-colors-gray4);
}

Every Component also defines its name as a data-component attribute in Kebab case.

Theming

All components have access to the theme property, so you can define multiple variants of a component.

For example if we want to add a borderless variant to our select components, simply add this global style:

:global([data-component='select'][data-theme*='borderless'] [part='field-container']) {
	border: none;
}

Now you can use the theme like this:

<Select {items} theme="borderless" />

It is also possible to add multiple themes, just split the names with a space like:

<Select {items} theme="borderless dimmed small" />

Predefined Themes

Some components have already defined themes. (which you can always lookup in the docs under Styling Reference -> Themes )

Global Themes

Additionally to the predefined Themes, some you can apply globally via classes. (Styling Reference -> Globals)

<div class="st-small">
	<Select {items} />
	<TextField />
</div>

Now every all components inside the div have the small theme applied. This can be useful to control different sizes for different devices.