Tokens
Custom properties, declared for each palette in light and dark, on the page or any element with data-palette or data-theme. Re-theme with SCSS maps, or override them in unlayered CSS.
Palette for the whole site:
Cloud, light
Forced with
data-palette and data-theme on any element.Cloud, dark
Forced with
data-palette and data-theme on any element.Solar, light
Forced with
data-palette and data-theme on any element.Solar, dark
Forced with
data-palette and data-theme on any element.Pop, light
Forced with
data-palette and data-theme on any element.Pop, dark
Forced with
data-palette and data-theme on any element.Cyber, light
Forced with
data-palette and data-theme on any element.Cyber, dark
Forced with
data-palette and data-theme on any element.Kawaii, light
Forced with
data-palette and data-theme on any element.Kawaii, dark
Forced with
data-palette and data-theme on any element.Ranger, light
Forced with
data-palette and data-theme on any element.Ranger, dark
Forced with
data-palette and data-theme on any element.Surfaces
--gm-color-bg
--gm-color-surface
--gm-color-surface-hover
--gm-color-surface-sunken
--gm-color-overlay
Text
--gm-color-heading
--gm-color-text
--gm-color-text-muted
--gm-color-text-subtle
--gm-color-text-faint
Brand
--gm-color-primary
--gm-color-primary-hover
--gm-color-accent
--gm-color-link
--gm-color-link-hover
Status
--gm-color-success
--gm-color-warning
--gm-color-danger
Borders
--gm-color-border-subtle
--gm-color-border
--gm-color-border-strong
--gm-color-border-hover
Glass
What frosted surfaces are made of, along with surface and overlay. --gm-glass-ambient sets the strength of the colour behind the page.
--gm-glass-highlight
--gm-glass-edge
--gm-glass-sheen
--gm-glass-shadow
Type
--gm-text-xsCommunity cloud--gm-text-smCommunity cloud--gm-text-mdCommunity cloud--gm-text-lgCommunity cloud--gm-text-xlCommunity cloud--gm-text-2xlCommunity cloud--gm-text-3xlCommunity cloud--gm-text-4xlCommunity cloud--gm-text-5xlCommunity cloud--gm-font-bodyThe quick brown fox jumps over the lazy dog.--gm-font-mononpm install gui-mellowSpace
--gm-space-1--gm-space-2--gm-space-3--gm-space-4--gm-space-5--gm-space-6--gm-space-7--gm-space-8--gm-space-9Radii
--gm-radius-sm
--gm-radius-md
--gm-radius-lg
--gm-radius-pill