Sterling Theme

The Sterling theme provides modern, elegant, and accessible styles with light and dark mode variations.

The @geoffcox/sterling-svelte-themes package provides the Sterling theme.

You can follow the steps in the Installation documentation for adding the Sterling Theme. Also read the Architecture - Theme Ready to understand how sterling-svelte components make styling easier.

CSS Variables

CSS variables are prefixed with --stsv-
Naming follows the Block**Element**Modifier (BEM) convention. For example, Button CSS uses these variables:
```
--stsv-button__background-color
--stsv-button__border-color--hover
--stsv-common__outline-color
```
The variables are grouped:
- common - application wide
- button - for buttons and clickable components
- input - for inputs, radios, checkboxes and other form components

Light and Dark Modes

CSS variables are set to different values based on the light-mode class or dark-mode class being set on a div, the body element, or html element.

Variations

Some component CSS have special classes to provide for visual variations. For example, Button has several:

capsule, circular, square - shapes
secondary, tool - usage/location
blue, green, orange, red - colors

You can mix and match classes.

Values

Common

--stsv-common__background-color

--stsv-common__border-color

--stsv-common__color

Common - Outline

--stsv-common__outline-color

Common - Disabled

Common - Reduced Emphasis

--stsv-common__background-color--secondary

--stsv-common__color--secondary

--stsv-common__background-color--subtle

--stsv-common__color--subtle

--stsv-common__background-color--faint

--stsv-common__color--faint

Common - Status

--stsv-common__background-color--info

--stsv-common__border-color--info

--stsv-common__color--info

--stsv-common__background-color--success

--stsv-common__border-color--success

--stsv-common__color--success

--stsv-common__background-color--warning

--stsv-common__border-color--warning

--stsv-common__color--warning

--stsv-common__background-color--error

--stsv-common__border-color--error

--stsv-common__color--error

Button

--stsv-button__background-color

--stsv-button__border-color

--stsv-button__color

--stsv-button__background-color--hover

--stsv-button__border-color--hover

--stsv-button__color--hover

--stsv-button__background-color--focus

--stsv-button__border-color--focus

--stsv-button__color--focus

--stsv-button__background-color--active

--stsv-button__border-color--active

--stsv-button__color--active

Button - Colors

--stsv-button__background-color--blue

--stsv-button__border-color--blue

--stsv-button__color--blue

--stsv-button__background-color--blue-hover

--stsv-button__border-color--blue-hover

--stsv-button__color--blue-hover

--stsv-button__background-color--blue-focus

--stsv-button__border-color--blue-focus

--stsv-button__color--blue-focus

--stsv-button__background-color--blue-active

--stsv-button__border-color--blue-active

--stsv-button__color--blue-active

--stsv-button__background-color--green

--stsv-button__border-color--green

--stsv-button__color--green

--stsv-button__background-color--green-hover

--stsv-button__border-color--green-hover

--stsv-button__color--green-hover

--stsv-button__background-color--green-focus

--stsv-button__border-color--green-focus

--stsv-button__color--green-focus

--stsv-button__background-color--green-active

--stsv-button__border-color--green-active

--stsv-button__color--green-active

--stsv-button__background-color--orange

--stsv-button__border-color--orange

--stsv-button__color--orange

--stsv-button__background-color--orange-hover

--stsv-button__border-color--orange-hover

--stsv-button__color--orange-hover

--stsv-button__background-color--orange-focus

--stsv-button__border-color--orange-focus

--stsv-button__color--orange-focus

--stsv-button__background-color--orange-active

--stsv-button__border-color--orange-active

--stsv-button__color--orange-active

--stsv-button__background-color--red

--stsv-button__border-color--red

--stsv-button__color--red

--stsv-button__background-color--red-hover

--stsv-button__border-color--red-hover

--stsv-button__color--red-hover

--stsv-button__background-color--red-focus

--stsv-button__border-color--red-focus

--stsv-button__color--red-focus

--stsv-button__background-color--red-active

--stsv-button__border-color--red-active

--stsv-button__color--red-active

Input

--stsv-input__background-color

--stsv-input__border-color

--stsv-input__color

--stsv-input__background-color--hover

--stsv-input__border-color--hover

--stsv-input__color--hover

--stsv-input__background-color--focus

--stsv-input__border-color--focus

--stsv-input__color--focus

--stsv-input__background-color--selected

--stsv-input__border-color--selected

--stsv-input__color--selected