A style api to make system.css your own
Color scheme toggle
system.css uses the custom property --system-cs-is-light to toggle the state of the
color mode. Light or dark.
:root {
/**
* color-scheme state
*
* Example:
* color-mix(): Light mode is the first color value and dark mode the second.
* color: color-mix(in oklab, black var(--system-cs-state), white);
*/
--system-cs-state: calc(var(--system-cs-is-light, 1 /* fallback to light mode */) * 100%);
}
@media (prefers-color-scheme: dark) {
:root {
--system-cs-is-light: 0; /* OFF */
}
}
System Colors
Colour mixing
With color-mix() we create light and dark mode overrides that are easy to maintain.
--system-canvas: color-mix(
in oklab,
var(--gray-0) var(--system-cs-state),
var(--gray-9)
);| Property | Initial value (default) |
|---|---|
| --system-accent-color | AccentColor |
| --system-accent-color-text | AccentColorText |
| --system-active-text | ActiveText |
| --system-button-border | ButtonBorder |
| --system-button-face | ButtonFace |
| --system-button-text | ButtonText |
| --system-canvas | Canvas |
| --system-canvas-text | CanvasText |
| --system-field | Field |
| --system-field-text | FieldText |
| --system-gray-text | GrayText |
| --system-highlight | Highlight |
| --system-highlight-text | HighlightText |
| --system-link-text | LinkText |
| --system-mark | Mark |
| --system-mark-text | MarkText |
| --system-selected-item | SelectedItem |
| --system-selected-item-text | SelectedItemText |
| --system-visited-text | VisitedText |
Browser Bugs
A number of system values don't work well in dark mode.
Custom colors
| Property | color-mix properties (default) |
|---|---|
| --system-surface-color |
color-mix(
in oklab,
/* light mode */
color-mix(
in oklab,
var(--system-canvas) 95%,
var(--system-canvas-text)
) var(--system-cs-state), /* toggle dark mode */
/* dark mode */
color-mix(
in oklab,
var(--system-canvas) 85%,
var(--system-canvas-text)
)
)
|
| --system-stroke-color |
color-mix(in oklab, var(--system-canvas) 55%, var(--system-canvas-text))
|
| --system-invalid-color |
color-mix(in oklab, var(--system-active-text) 90%, var(--system-canvas-text))
|
| --system-interactive-color | var(--system-accent-color) |
| --system-canvas-text-inverted | var(--system-canvas) |
| --system-content-color-light |
color-mix( in oklab, var(--system-canvas) var(--system-cs-state),
var(--system-canvas-text) )
|
| --system-content-color-dark |
color-mix( in oklab, var(--system-canvas-text) var(--system-cs-state),
var(--system-canvas) )
|
Typography
| Property | Initial values (default) |
|---|---|
| --system-font-family-display | system-ui |
| --system-font-family-data | system-ui |
| --system-font-family-interactive | system-ui |
| --system-font-family-body | Charter, ... , serif |
| --system-font-family-code | ui-monospace |
| --system-font-size | 112.5% => 18px |
| --system-line-height | 1.5 |
| --system-line-height-compact | 1.2 |
| --system-line-height-display | 1.1 |
| --system-font-size-xxxl | xxx-large |
| --system-font-size-xxl | xx-large |
| --system-font-size-xl | x-large |
| --system-font-size-l | large |
| --system-font-size-m | medium |
| --system-font-size-s | small |
| --system-font-size-xs | x-small |
| --system-font-size-xxs | xx-small |
| --system-font-weight-thin | 100 |
| --system-font-weight-extralight | 200 |
| --system-font-weight-light | 300 |
| --system-font-weight-normal | 400 |
| --system-font-weight-medium | 500 |
| --system-font-weight-semibold | 600 |
| --system-font-weight-bold | 700 |
| --system-font-weight-extrabold | 800 |
| --system-font-weight-black | 900 |
Stroke
| Property | Initial values (default) |
|---|---|
| --system-stroke-thin | thin |
| --system-stroke-medium | medium |
| --system-stroke-thick | thick |
| --system-stroke-offset | calc(1cap - 1ex) |
Spacing
| Property | Initial values (default) |
|---|---|
| --system-spacing-single | clamp(8px, 1rem, 24px) |
| --system-spacing-double | clamp(16px, 2rem, 48px) |
| --system-spacing-page-block | 0 |
| --system-spacing-page-inline | max(var(--system-spacing-single), 5vw) |
| --system-spacing-heading-block-start | max(var(--system-spacing-double), 2.5ex) |
| --system-spacing-heading-block-end | var(--system-spacing-main) |
| --system-spacing-main | clamp(var(--system-spacing-single), 1ex, var(--system-spacing-double)) |
| --system-spacing-main-block | clamp(var(--system-spacing-single), 1ex, var(--system-spacing-double)) |
| --system-spacing-main-inline | clamp(var(--system-spacing-single), 1ex, var(--system-spacing-double)) |
| --system-spacing-section-block | max(var(--system-spacing-double), 2.5ex) |
| --system-spacing-section-inline | 0 |
| --system-spacing-column-gap |
clamp(var(--system-spacing-single), 3cqw, var(--system-spacing-double))
|
| --system-spacing-row-gap |
clamp(var(--system-spacing-single), 3cqw, var(--system-spacing-double))
|
| --system-spacing-element-block | 0.5ex |
| --system-spacing-element-inline | 0.5ch |
| --system-spacing-element |
var(--system-spacing-element-block) var(--system-spacing-element-inline)
|
| --system-interactive-block |
0.8ex
|
| --system-interactive-inline |
1.5ch
|
| --system-interactive |
var(--system-spacing-interactive-block)
var(--system-spacing-interactive-inline)
|
Dimensions
| Property | Initial values (default) |
|---|---|
| --system-dimension-min-width | 320px |
| --system-dimension-content-width | 85ch |
Radii
| Property | Initial values (default) |
|---|---|
| --system-radius | clamp(3px, 0.6666ex, var(--system-spacing-single)) |