Soracom

Overview 

For developing new components or components outside SDS, a set of global css vars are available.

Global color css vars automatically support dark-mode and change depending on the browsers dark-mode setting. Use the light-mode/dark-mode toggle above right to see how specific colors adjust.

.custom-element {
  color: var(--color-default);
  border: 1px solid var(--color-background-shade);
}

.custom-element.error {
  color: var(--color-alert);
  border: 1px solid var(--color-alert);
}

Semantic global vars 

These globals represent the intended use/application of the colors (i.e. make this text the ‘default’ color instead of make this text ‘ink’ color) and should be used in preference to setting a specific global var.

Default (Text) 

The primary text (or foreground) color is var(--color-default) - this should be used for all text by default, and may be used for borders/outlines as required. Always ensure text contrast is readable.

Backgrounds 

The primary background color is var(--color-background) - this should be used for background, and may be used for borders/outlines as required. Always ensure text contrast is readable.

Visual states 

The 4x visual states - Alert, Warning, Success, Info are also available as global css vars eg. var(--color-alert).

Applied to text 

Applied to backgrounds 

Highlight 

The highlight color is the accent color (celeste) used through the console: var(--color-highlight)

Links 

Link color can be set with the global css var: var(--color-link)

Modal background 

Non SDS modals background can be set with the global css var var(--color-modal)

Specific global vars 

Colors 

Non SDS elements can be styled using specific global css named color vars shown in the Color swatches. These colors should only be used if other semantic css global vars do not suit.