Sterling Theme

While sterling-svelte components do not apply any default style, a set of CSS styles defined is provided for you to use if you like.

You can choose to import all the component styles:

import '@geoffcox/sterling-svelte/css/sterling.css'

or pick the individual component styles:

import '@geoffcox/sterling-svelte/css/light-mode.css'
import '@geoffcox/sterling-svelte/css/dark-mode.css'
import '@geoffcox/sterling-svelte/css/Button.css'
import '@geoffcox/sterling-svelte/css/Checkbox.css'

Component classes

Components render HTML structure and class names to support styling and themes. They can be considered an API contract for the CSS styles. Any changes are considered breaking changes.

• Each component’s root element has a stering-<component> class name. For example, Button has sterling-button.
• Components use the natural state pseudo-selectors whenever they exist for the HTML element being rendered. For example, Button styles use :hover, :active, and :disabled selectors.
• When components have state that isn’t represented by built-in pseudo-selectors, they apply class names (e.g. '.checked, .open, .disabled, .vertical).
• Components also apply class names to help identify child elements (e.g. .item, .container, .fill, .thumb).

CSS variables

• The sterling theme uses css variables starting with --stsv- to switch modes.
• Each CSS variable follows the BlockElementModifier (BEM) naming convention. For example, --stsv-button__background-color, --stsv-button__border-color, and -stsv-button__color.
• There are fewer than 100 CSS variables defined to handle common, button, input, and status colors.

Light and dark modes

The sterling theme supports light and dark mode by changing CSS variable values.

• The applyLightDarkMode action applies .light-mode or .dark-mode class name and the theme will apply styles based on selecting these. This action can automatically switch modes based on the browser and user preferences.
• When light/dark mode changes, the variables are updated to show the theme without re-rendering the button.

Variants

Each component has a variant string property. The variant value appended to the component’s root element class property. This allows callers to vary the style.

You can apply multiple variants. For example Button can have circular and tool applied. The variants are listed in each component’s documentation.

Custom Theming

You can define CSS in your application using any CSS framework you like (e.g. LESS, SASS, Tailwind, Bootstrap). Then you can include it after the sterling theme, or replace the sterling theme.

To figure out what selectors to put in your CSS, you can look at the component source, inspect the component’s HTML, or use the sterling theme CSS as an example.

For example, the base Button styles here demonstrate setting the default and state styles.

• .sterling-button
• .sterling-button:hover
• .sterling-button:active
• .sterling-button:focus-visible
• .sterling-button:disabled

The .sterling-button:disabled::after style shows the disabled diagnonal stripe (i.e. no step) pattern over the button.

Theme Values

Common

The common variables are used for body text and containers (e.g. lists, trees).

Common - Outline

Outline colors are used across components to indicate keyboard focus.

Common - Disabled

Components indicate disabled state as an overlay with a diagonal striped pattern.

• The pattern is taken from the diagonal “NO STEP” pattern on aircraft.
• The stripes are white and black with low opacity and work well across light and dark themes.

Traditionally, disabled state is indicated using dimmed colors of the component often centering aroound a midline gray. This tends to damage contrast when the background, border, and foreground colors are near the disabled colors.

Common - Secondary, Subtle, and Faint

Secondary, subtle, and faint colors are used for less important text, placeholders, visually separate regions, and decorations.

Button

These are used for clickable buttons that take action.

Button - Hover

Button - Focus

Button - Active

Input

These are used with interactive form controls (e.g. checkbox, text input, radio)

Input - Hover

Input - Focus

Input - Selected

Status Colors

Several colors are used to create an association with a status.

Sterling Theme Colorful CSS Vars

Many components support a colorful variant to apply accent colors.

Common

Common - Secondary, Subtle, and Faint

Button

Button - Hover

Button - Focus

Button - Active

Input

Input - Hover

Input - Focus

Input - Selected