Derived tokens¶
Computed from the knobs. Not meant to be overridden — overriding one breaks the link that keeps the system coherent. They are listed so you can read them, and so you can tell whether the value you need already exists before adding one.
Colours carry both themes in one light-dark() value; see Dark mode.
neutrals¶
| token | value |
|---|---|
--ads-n-0 |
hsl(var(--ads-neutral-hue) calc(0% * var(--ads-neutral-chroma)) 100%) |
--ads-n-50 |
hsl(var(--ads-neutral-hue) calc(20% * var(--ads-neutral-chroma)) 98%) |
--ads-n-100 |
hsl(var(--ads-neutral-hue) calc(14% * var(--ads-neutral-chroma)) 96%) |
--ads-n-200 |
hsl(var(--ads-neutral-hue) calc(13% * var(--ads-neutral-chroma)) 91%) |
--ads-n-300 |
hsl(var(--ads-neutral-hue) calc(12% * var(--ads-neutral-chroma)) 84%) |
--ads-n-400 |
hsl(var(--ads-neutral-hue) calc(11% * var(--ads-neutral-chroma)) 65%) |
--ads-n-500 |
hsl(var(--ads-neutral-hue) calc(9% * var(--ads-neutral-chroma)) 46%) |
--ads-n-600 |
hsl(var(--ads-neutral-hue) calc(14% * var(--ads-neutral-chroma)) 34%) |
--ads-n-700 |
hsl(var(--ads-neutral-hue) calc(19% * var(--ads-neutral-chroma)) 27%) |
--ads-n-800 |
hsl(var(--ads-neutral-hue) calc(28% * var(--ads-neutral-chroma)) 17%) |
--ads-n-900 |
hsl(var(--ads-neutral-hue) calc(39% * var(--ads-neutral-chroma)) 11%) |
--ads-n-950 |
hsl(var(--ads-neutral-hue) calc(71% * var(--ads-neutral-chroma)) 4%) |
roles: what a colour is FOR, in both themes at once¶
| token | value |
|---|---|
--ads-page |
light-dark(var(--ads-n-100), var(--ads-n-950)) |
--ads-surface |
light-dark(var(--ads-n-0), var(--ads-n-900)) |
--ads-raised |
light-dark(var(--ads-n-0), var(--ads-n-800)) |
--ads-sunken |
light-dark(var(--ads-n-50), var(--ads-n-950)) |
--ads-sunken-strong |
light-dark(var(--ads-n-100), var(--ads-n-900)) |
--ads-line |
light-dark(var(--ads-n-200), var(--ads-n-800)) |
--ads-line-strong |
light-dark(var(--ads-n-300), var(--ads-n-700)) |
--ads-line-soft |
color-mix(in srgb, light-dark(var(--ads-n-800), var(--ads-n-0)) 12%, transparent) |
--ads-ink |
light-dark(var(--ads-n-700), var(--ads-n-100)) |
--ads-ink-strong |
light-dark(var(--ads-n-900), var(--ads-n-0)) |
--ads-ink-muted |
light-dark( color-mix(in oklab, var(--ads-n-500), black calc(var(--ads-contrast) * 12%)), var(--ads-n-400)) |
--ads-ink-soft |
color-mix(in srgb, var(--ads-ink-muted) 75%, transparent) |
brand and status tints, all computed from the one colour¶
| token | value |
|---|---|
--ads-brand-hover |
color-mix(in oklab, var(--ads-brand) 88%, black) |
--ads-brand-active |
color-mix(in oklab, var(--ads-brand) 76%, black) |
--ads-brand-ink |
light-dark( color-mix(in oklab, var(--ads-brand), black calc(var(--ads-contrast) * 25%)), color-mix(in oklab, var(--ads-brand) 55%, white)) |
--ads-brand-wash |
color-mix(in srgb, var(--ads-brand) 8%, transparent) |
--ads-brand-edge |
color-mix(in oklab, var(--ads-brand) 30%, transparent) |
--ads-ring |
color-mix(in oklab, var(--ads-brand) 35%, transparent) |
--ads-brand-tint |
color-mix(in srgb, var(--ads-brand) 10%, transparent) |
--ads-brand-fill |
color-mix(in srgb, var(--ads-brand) 8%, var(--ads-surface)) |
--ads-brand-line |
color-mix(in srgb, var(--ads-brand) 20%, var(--ads-surface)) |
--ads-success-ink |
light-dark( color-mix(in oklab, var(--ads-success), black calc(var(--ads-contrast) * 25%)), color-mix(in oklab, var(--ads-success) 55%, white)) |
--ads-success-tint |
color-mix(in srgb, var(--ads-success) 10%, transparent) |
--ads-success-fill |
color-mix(in srgb, var(--ads-success) 8%, var(--ads-surface)) |
--ads-success-line |
color-mix(in srgb, var(--ads-success) 20%, var(--ads-surface)) |
--ads-warning-ink |
light-dark( color-mix(in oklab, var(--ads-warning), black calc(var(--ads-contrast) * 25%)), color-mix(in oklab, var(--ads-warning) 55%, white)) |
--ads-warning-tint |
color-mix(in srgb, var(--ads-warning) 10%, transparent) |
--ads-warning-fill |
color-mix(in srgb, var(--ads-warning) 8%, var(--ads-surface)) |
--ads-warning-line |
color-mix(in srgb, var(--ads-warning) 20%, var(--ads-surface)) |
--ads-danger-ink |
light-dark( color-mix(in oklab, var(--ads-danger), black calc(var(--ads-contrast) * 25%)), color-mix(in oklab, var(--ads-danger) 55%, white)) |
--ads-danger-tint |
color-mix(in srgb, var(--ads-danger) 10%, transparent) |
--ads-danger-fill |
color-mix(in srgb, var(--ads-danger) 8%, var(--ads-surface)) |
--ads-danger-line |
color-mix(in srgb, var(--ads-danger) 20%, var(--ads-surface)) |
--ads-info-ink |
light-dark( color-mix(in oklab, var(--ads-info), black calc(var(--ads-contrast) * 25%)), color-mix(in oklab, var(--ads-info) 55%, white)) |
--ads-info-tint |
color-mix(in srgb, var(--ads-info) 10%, transparent) |
--ads-info-fill |
color-mix(in srgb, var(--ads-info) 8%, var(--ads-surface)) |
--ads-info-line |
color-mix(in srgb, var(--ads-info) 20%, var(--ads-surface)) |
--ads-neutral |
var(--ads-ink-muted) |
--ads-neutral-ink |
var(--ads-ink-muted) |
--ads-neutral-tint |
light-dark(var(--ads-n-100), var(--ads-n-800)) |
--ads-neutral-fill |
var(--ads-sunken) |
--ads-neutral-line |
var(--ads-line) |
--ads-danger-solid |
color-mix(in oklab, var(--ads-danger), black calc(var(--ads-contrast) * 10%)) |
--ads-danger-hover |
color-mix(in oklab, var(--ads-danger) 88%, black) |
--ads-tone |
var(--ads-brand-ink) |
--ads-tone-solid |
var(--ads-brand) |
--ads-tone-tint |
var(--ads-brand-tint) |
--ads-tone-fill |
var(--ads-brand-fill) |
--ads-tone-line |
var(--ads-brand-line) |
radii: one scale¶
| token | value |
|---|---|
--ads-radius-xs |
calc(2px * var(--ads-radius-scale)) |
--ads-radius-sm |
calc(4px * var(--ads-radius-scale)) |
--ads-radius |
calc(6px * var(--ads-radius-scale)) |
--ads-radius-lg |
calc(8px * var(--ads-radius-scale)) |
--ads-radius-xl |
calc(12px * var(--ads-radius-scale)) |
--ads-radius-pill |
calc(100rem * var(--ads-radius-scale)) |
shadows: geometry fixed, opacity on the strength knob¶
| token | value |
|---|---|
--ads-shadow-xs |
0 1px 2px 0 color-mix(in srgb, var(--ads-shadow-color) calc(5% * var(--ads-shadow-strength)), transparent) |
--ads-shadow-sm |
0 1px 3px 0 color-mix(in srgb, var(--ads-shadow-color) calc(10% * var(--ads-shadow-strength)), transparent), 0 1px 2px 0 color-mix(in srgb, var(--ads-shadow-color) calc(6% * var(--ads-shadow-strength)), transparent) |
--ads-shadow |
0 2px 4px -1px color-mix(in srgb, var(--ads-shadow-color) calc(6% * var(--ads-shadow-strength)), transparent), 0 4px 6px -1px color-mix(in srgb, var(--ads-shadow-color) calc(8% * var(--ads-shadow-strength)), transparent) |
--ads-shadow-md |
0 4px 6px -2px color-mix(in srgb, var(--ads-shadow-color) calc(5% * var(--ads-shadow-strength)), transparent), 0 10px 15px -3px color-mix(in srgb, var(--ads-shadow-color) calc(8% * var(--ads-shadow-strength)), transparent) |
--ads-shadow-lg |
0 10px 10px -5px color-mix(in srgb, var(--ads-shadow-color) calc(4% * var(--ads-shadow-strength)), transparent), 0 20px 25px -5px color-mix(in srgb, var(--ads-shadow-color) calc(10% * var(--ads-shadow-strength)), transparent) |
--ads-shadow-overlay |
0 2px 4px 0 color-mix(in srgb, var(--ads-shadow-color) calc(4% * var(--ads-shadow-strength)), transparent), 0 5px 8px 0 color-mix(in srgb, var(--ads-shadow-color) calc(4% * var(--ads-shadow-strength)), transparent), 0 10px 18px 0 color-mix(in srgb, var(--ads-shadow-color) calc(3% * var(--ads-shadow-strength)), transparent), 0 24px 48px 0 color-mix(in srgb, var(--ads-shadow-color) calc(3% * var(--ads-shadow-strength)), transparent), 0 0 0 1px color-mix(in srgb, var(--ads-shadow-color) calc(10% * var(--ads-shadow-strength)), transparent) |
space: one scale, eight steps¶
| token | value |
|---|---|
--ads-space-1 |
calc(var(--ads-space-unit) * 1 * var(--ads-space-scale)) |
--ads-space-2 |
calc(var(--ads-space-unit) * 2 * var(--ads-space-scale)) |
--ads-space-3 |
calc(var(--ads-space-unit) * 3 * var(--ads-space-scale)) |
--ads-space-4 |
calc(var(--ads-space-unit) * 4 * var(--ads-space-scale)) |
--ads-space-5 |
calc(var(--ads-space-unit) * 5 * var(--ads-space-scale)) |
--ads-space-6 |
calc(var(--ads-space-unit) * 6 * var(--ads-space-scale)) |
--ads-space-8 |
calc(var(--ads-space-unit) * 8 * var(--ads-space-scale)) |
--ads-space-12 |
calc(var(--ads-space-unit) * 12 * var(--ads-space-scale)) |
--ads-space-16 |
calc(var(--ads-space-unit) * 16 * var(--ads-space-scale)) |
type: Tabler's steps, as multiples of the one knob¶
| token | value | note |
|---|---|---|
--ads-text-xs |
calc(var(--ads-text-base) * 0.714) |
10px |
--ads-text-sm |
calc(var(--ads-text-base) * 0.857) |
12px |
--ads-text |
var(--ads-text-base) |
14px |
--ads-text-md |
calc(var(--ads-text-base) * 1.143) |
16px |
--ads-text-lg |
calc(var(--ads-text-base) * 1.429) |
20px |
--ads-text-xl |
calc(var(--ads-text-base) * 1.714) |
24px |
--ads-line-sm |
calc(var(--ads-text-base) * 1.143) |
16px — small controls |
--ads-line-control |
calc(var(--ads-text-base) * 1.429) |
20px — default controls |
--ads-line-heading |
calc(var(--ads-text-base) * 2) |
28px — a heading's own leading |
controls: height follows space and type¶
| token | value |
|---|---|
--ads-control-pad-y |
calc(var(--ads-space-2) + 1px) |
--ads-control-pad-x |
var(--ads-space-4) |
--ads-control-xs |
var(--ads-line-control) |
--ads-control-sm |
calc(var(--ads-line-control) + var(--ads-space-1)) |
--ads-control-md |
calc(var(--ads-line-control) + var(--ads-space-3)) |
--ads-control |
calc(var(--ads-line-control) + var(--ads-space-5)) |
--ads-control-lg |
calc(var(--ads-control) + var(--ads-space-4)) |
--ads-tap |
1.5rem |