--surf-badge-caution-bg
Status
…
Source and references
:root
oklch(from color-mix(in srgb, var(--surf-status-caution-fg) 3%, var(--surf-status-caution-bg)) l c h / alpha)tokens.css:795
Design tokens
Lists every token's value, aliases, and source per theme.
Principles
- Reference a token, never its value. Write
var(--surf-ink), not the color it resolves to, so themes and screen sizes reach your code. - Choose a token by its role. Role tokens such as
--surf-ink-muted,--surf-canvas, and--surf-space-4say what a value is for, and each theme decides how it looks. - Tune a component through its own tokens. Component tokens such as
--surf-control-heightalias role tokens, so one override reaches every part without restyling internals.
Reading a token
Each row shows a token's name, category, and purpose, then its value in the current theme and window width. Switch the theme or resize the window, and the values follow.
Source and references lists every declaration with its context, file, and line, and links the tokens it aliases. Copy puts var(--name) on the clipboard.
All tokens
389 tokens, generated from the CSS source. Search by name, purpose, or alias.
389 matching tokens / 24 shown
--surf-badge-danger-bg
Status
…
Source and references
:root
oklch(from color-mix(in srgb, var(--surf-status-danger-fg) 3%, var(--surf-status-danger-bg)) l c h / alpha)tokens.css:786
--surf-badge-info-bg
Status
…
Source and references
:root
oklch(from color-mix(in srgb, var(--surf-status-info-fg) 3%, var(--surf-status-info-bg)) l c h / alpha)tokens.css:805
--surf-badge-neutral-bg
Status
…
Source and references
:root
var(--surf-status-neutral-bg)tokens.css:776
--surf-badge-progress-bg
Status
…
Source and references
:root
var(--surf-status-progress-bg)tokens.css:804
--surf-badge-success-bg
Status
…
Source and references
:root
oklch(from color-mix(in srgb, var(--surf-status-success-fg) 3%, var(--surf-status-success-bg)) l c h / alpha)tokens.css:777
--surf-brand
Color / Surface for primary actions and limited emphasis
…
Source and references
:root
oklch(0.82 0.12 210)tokens.css:59
:root[data-theme="light"]
oklch(0.82 0.12 210)tokens.css:116
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.82 0.12 210)tokens.css:560
--surf-brand-ink
Color / Link and brand text color with contrast against the background
…
Source and references
:root
oklch(0.82 0.12 210)tokens.css:62
:root[data-theme="light"]
oklch(0.2368845 0.00973297 248.23792711)tokens.css:117
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.2368845 0.00973297 248.23792711)tokens.css:561
--surf-brand-mark
Color / Brand as a mark on the sheet, such as a progress fill; darker in light themes for 3:1
…
Source and references
:root
var(--surf-brand)tokens.css:377
:root[data-theme="light"]
oklch(from var(--surf-brand) min(l, 0.6) min(c, 0.12) h)tokens.css:383
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(from var(--surf-brand) min(l, 0.6) min(c, 0.12) h)tokens.css:543
--surf-brand-tint
Color
…
Source and references
:root
oklch(0.82 0.12 210 / 0.25098039)tokens.css:68
:root[data-theme="light"]
oklch(0.82 0.12 210 / 0.30196078)tokens.css:121
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.82 0.12 210 / 0.30196078)tokens.css:565
--surf-canvas
Color / Main content surface that holds work or documents
…
Source and references
:root
oklch(0.27850211 0.01320057 253.03643104)tokens.css:29
:root[data-theme="light"]
oklch(1 0 0)tokens.css:105
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(1 0 0)tokens.css:549
--surf-caution
Color
…
Source and references
:root
oklch(0.88362398 0.17366333 93.66977695)tokens.css:76
:root[data-theme="light"]
oklch(0.88362398 0.17366333 93.66977695)tokens.css:129
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.88362398 0.17366333 93.66977695)tokens.css:573
--surf-chart-category-1
Color
…
Source and references
:root
oklch(0.76 0.12 250)tokens.css:833
:root[data-theme="light"]
oklch(0.5 0.14 255)tokens.css:860
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.5 0.14 255)tokens.css:887
--surf-chart-category-10
Color
…
Source and references
:root
oklch(0.9 0.105 108)tokens.css:842
:root[data-theme="light"]
oklch(0.45 0.09 108)tokens.css:869
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.45 0.09 108)tokens.css:896
--surf-chart-category-11
Color
…
Source and references
:root
oklch(0.87 0.065 52)tokens.css:843
:root[data-theme="light"]
oklch(0.42 0.105 52)tokens.css:870
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.42 0.105 52)tokens.css:897
--surf-chart-category-12
Color
…
Source and references
:root
oklch(0.86 0.095 345)tokens.css:844
:root[data-theme="light"]
oklch(0.4 0.12 345)tokens.css:871
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.4 0.12 345)tokens.css:898
--surf-chart-category-13
Color
…
Source and references
:root
oklch(0.56 0.12 250)tokens.css:845
:root[data-theme="light"]
oklch(0.64 0.14 255)tokens.css:872
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.64 0.14 255)tokens.css:899
--surf-chart-category-14
Color
…
Source and references
:root
oklch(0.63 0.11 185)tokens.css:846
:root[data-theme="light"]
oklch(0.63 0.085 190)tokens.css:873
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.63 0.085 190)tokens.css:900
--surf-chart-category-15
Color
…
Source and references
:root
oklch(0.55 0.14 135)tokens.css:847
:root[data-theme="light"]
oklch(0.62 0.13 140)tokens.css:874
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.62 0.13 140)tokens.css:901
--surf-chart-category-16
Color
…
Source and references
:root
oklch(0.64 0.13 80)tokens.css:848
:root[data-theme="light"]
oklch(0.64 0.12 70)tokens.css:875
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.64 0.12 70)tokens.css:902
--surf-chart-category-17
Color
…
Source and references
:root
oklch(0.58 0.14 25)tokens.css:849
:root[data-theme="light"]
oklch(0.64 0.17 25)tokens.css:876
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.64 0.17 25)tokens.css:903
--surf-chart-category-18
Color
…
Source and references
:root
oklch(0.61 0.12 310)tokens.css:850
:root[data-theme="light"]
oklch(0.64 0.15 310)tokens.css:877
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.64 0.15 310)tokens.css:904
--surf-chart-category-19
Color
…
Source and references
:root
oklch(0.67 0.065 280)tokens.css:851
:root[data-theme="light"]
oklch(0.58 0.12 280)tokens.css:878
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.58 0.12 280)tokens.css:905
--surf-chart-category-2
Color
…
Source and references
:root
oklch(0.78 0.11 185)tokens.css:834
:root[data-theme="light"]
oklch(0.52 0.09 190)tokens.css:861
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.52 0.09 190)tokens.css:888