Skip to content
Skip design navigation
Etesie Alpha
Loading account
Manage

Token reference

Every resolved value is rendered as real text — useful to people, search engines and agents alike.

1576resolved values
1527non-color tokens
49scheme-aware color roles
View tokens.json

Typeface references and every type-scale property.

TokenValueProvenance
"Geist", system-ui, sans-serif Generated
"Inter", system-ui, sans-serif Generated
"Geist Mono", ui-monospace, monospace Generated
"Geist", system-ui, sans-serif Generated
76px Generated
1.05 Generated
0px Generated
600 Generated
"Geist", system-ui, sans-serif Generated
61px Generated
1.08 Generated
0px Generated
600 Generated
"Geist", system-ui, sans-serif Generated
49px Generated
1.1 Generated
0px Generated
600 Generated
"Geist", system-ui, sans-serif Generated
39px Generated
1.2 Generated
0px Generated
600 Generated
"Geist", system-ui, sans-serif Generated
31px Generated
1.22 Generated
0px Generated
600 Generated
"Geist", system-ui, sans-serif Generated
25px Generated
1.25 Generated
0px Generated
600 Generated
"Geist", system-ui, sans-serif Generated
25px Generated
1.3 Generated
0px Generated
600 Generated
"Geist", system-ui, sans-serif Generated
20px Generated
1.35 Generated
0px Generated
600 Generated
"Geist", system-ui, sans-serif Generated
16px Generated
1.4 Generated
0px Generated
600 Generated
"Inter", system-ui, sans-serif Generated
20px Generated
1.55 Generated
0px Generated
400 Generated
"Inter", system-ui, sans-serif Generated
16px Generated
1.55 Generated
0px Generated
400 Generated
"Inter", system-ui, sans-serif Generated
13px Generated
1.5 Generated
0px Generated
400 Generated
"Inter", system-ui, sans-serif Generated
16px Generated
1.4 Generated
0px Generated
500 Generated
"Inter", system-ui, sans-serif Generated
13px Generated
1.35 Generated
0px Generated
500 Generated
"Inter", system-ui, sans-serif Generated
11px Generated
1.3 Generated
0px Generated
500 Generated
"Geist", system-ui, sans-serif Generated
76px Generated
1.05 Generated
0px Derived
800 Derived
"Geist", system-ui, sans-serif Generated
61px Generated
1.08 Generated
0px Derived
800 Derived
"Geist", system-ui, sans-serif Generated
49px Generated
1.1 Generated
0px Derived
800 Derived
"Geist", system-ui, sans-serif Generated
39px Generated
1.2 Generated
0px Derived
800 Derived
"Geist", system-ui, sans-serif Generated
31px Generated
1.22 Generated
0px Derived
800 Derived
"Geist", system-ui, sans-serif Generated
25px Generated
1.25 Generated
0px Derived
800 Derived
"Geist", system-ui, sans-serif Generated
25px Generated
1.3 Generated
0px Derived
800 Derived
"Geist", system-ui, sans-serif Generated
20px Generated
1.35 Generated
0px Derived
800 Derived
"Geist", system-ui, sans-serif Generated
16px Generated
1.4 Generated
0px Derived
800 Derived
"Inter", system-ui, sans-serif Generated
20px Generated
1.55 Generated
0px Derived
700 Derived
"Inter", system-ui, sans-serif Generated
16px Generated
1.55 Generated
0px Derived
700 Derived
"Inter", system-ui, sans-serif Generated
13px Generated
1.5 Generated
0px Derived
700 Derived
"Inter", system-ui, sans-serif Generated
16px Generated
1.4 Generated
0px Derived
700 Derived
"Inter", system-ui, sans-serif Generated
13px Generated
1.35 Generated
0px Derived
700 Derived
"Inter", system-ui, sans-serif Generated
11px Generated
1.3 Generated
0px Derived
700 Derived
"Geist Mono", ui-monospace, monospace Derived
16px Derived
1.55 Derived
400 Generated
"Geist Mono", ui-monospace, monospace Derived
13px Derived
1.5 Derived
400 Generated
"Geist Mono", ui-monospace, monospace Derived
13px Derived
1.35 Derived
500 Generated
"tnum" Generated
"Geist Mono", ui-monospace, monospace Derived
16px Derived
1.4 Derived
500 Generated
"Geist Mono", ui-monospace, monospace Derived
16px Derived
1.55 Derived
400 Generated
"tnum" Generated
"Geist Mono", ui-monospace, monospace Derived
13px Derived
1.5 Derived
400 Generated
"Geist Mono", ui-monospace, monospace Derived
13px Derived
1.5 Derived
400 Generated
Module · Scheme-aware

Color roles →

One semantic role, explicit light and dark values. Extensions keep their --et-* namespace.

TokenLightDarkProvenance
#33618d#9ecafclight: generated
dark: generated
#ffffff#003256light: generated
dark: generated
#d0e4ff#154974light: generated
dark: generated
#154974#d0e4fflight: generated
dark: generated
#526070#bac8dblight: generated
dark: generated
#ffffff#243140light: generated
dark: generated
#d6e4f7#3b4857light: generated
dark: generated
#3b4857#d6e4f7light: generated
dark: generated
#6a5779#d5bee5light: generated
dark: generated
#ffffff#3a2a48light: generated
dark: generated
#f1dbff#514060light: generated
dark: generated
#514060#f1dbfflight: generated
dark: generated
#b61a13#ffb2a7light: generated
dark: generated
#ffffff#670001light: generated
dark: generated
#ffdad3#900001light: generated
dark: generated
#400000#ffdad3light: generated
dark: generated
#f9f9fa#121415light: generated
dark: generated
#1a1c1d#e2e2e3light: generated
dark: generated
#dadadb#121415light: generated
dark: generated
#f9f9fa#38393alight: generated
dark: generated
#ffffff#0c0e0flight: generated
dark: generated
#f3f3f4#1a1c1dlight: generated
dark: generated
#eeeeef#1e2021light: generated
dark: generated
#e8e8e9#282a2blight: generated
dark: generated
#e2e2e3#333536light: generated
dark: generated
#e2e2e3#454748light: generated
dark: generated
#454748#c6c6c7light: generated
dark: generated
#767778#909192light: generated
dark: generated
#c6c6c7#454748light: generated
dark: generated
#2f3132#e2e2e3light: generated
dark: generated
#f1f0f2#2f3132light: generated
dark: generated
#9ecafc#33618dlight: generated
dark: generated
#000000#000000light: generated
dark: generated
#000000#000000light: generated
dark: generated
#33618d#9ecafclight: generated
dark: generated
et— Etesie extension#006c56#62dbbalight: generated
dark: generated
et— Etesie extension#ffffff#00382clight: generated
dark: generated
et— Etesie extension#80f8d6#005140light: generated
dark: generated
et— Etesie extension#002118#80f8d6light: generated
dark: generated
et— Etesie extension#606100#c8cc61light: generated
dark: generated
et— Etesie extension#ffffff#313200light: generated
dark: generated
et— Etesie extension#e4e87e#484900light: generated
dark: generated
et— Etesie extension#1c1d00#e4e87elight: generated
dark: generated
et— Etesie extension#00659b#90cefflight: generated
dark: generated
et— Etesie extension#ffffff#003453light: generated
dark: generated
et— Etesie extension#c9e7ff#004c76light: generated
dark: generated
et— Etesie extension#001e33#c9e7fflight: generated
dark: generated
et— Etesie extension#5a6675#5a6675light: generated
dark: generated
et— Etesie extension#ffffff#fffffflight: generated
dark: generated

Material measurement steps consumed by component and product-layout recipes.

TokenValueProvenance
0px Generated
2px Generated
4px Generated
6px Generated
8px Generated
10px Generated
12px Generated
14px Generated
16px Generated
20px Generated
24px Generated
32px Generated
36px Generated
40px Generated
48px Generated
56px Generated
64px Generated
72px Generated
48px Generated
Module

Shape →

Corner values generated from the active shape profile.

TokenValueProvenance
0px Generated
2px Generated
6px Generated
8px Generated
10px Generated
14px Generated
18px Generated
20px Generated
32px Generated
var(--md-sys-shape-corner-value-none) Derived
var(--md-sys-shape-corner-value-extra-small) Derived
var(--md-sys-shape-corner-value-small) Derived
var(--md-sys-shape-corner-value-medium) Derived
var(--md-sys-shape-corner-value-large) Derived
var(--md-sys-shape-corner-value-large-increased) Derived
var(--md-sys-shape-corner-value-extra-large) Derived
var(--md-sys-shape-corner-value-extra-large-increased) Derived
var(--md-sys-shape-corner-value-extra-extra-large) Derived
9999px Generated
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium) Derived
var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-medium) Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) Derived
var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-large) Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-large-increased) var(--md-sys-shape-corner-large-increased) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-large-increased) var(--md-sys-shape-corner-large-increased) Derived
var(--md-sys-shape-corner-large-increased) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-large-increased) Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-large-increased) var(--md-sys-shape-corner-large-increased) var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) Derived
var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-extra-large) Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-extra-large-increased) var(--md-sys-shape-corner-extra-large-increased) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-extra-large-increased) var(--md-sys-shape-corner-extra-large-increased) Derived
var(--md-sys-shape-corner-extra-large-increased) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-extra-large-increased) Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-extra-large-increased) var(--md-sys-shape-corner-extra-large-increased) var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-extra-extra-large) var(--md-sys-shape-corner-extra-extra-large) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-extra-extra-large) var(--md-sys-shape-corner-extra-extra-large) Derived
var(--md-sys-shape-corner-extra-extra-large) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-extra-extra-large) Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-extra-extra-large) var(--md-sys-shape-corner-extra-extra-large) var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) Derived
var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-full) Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-none) Derived

Surface shadow levels, including neutral-variant tint derivation.

TokenValueProvenance
0 Generated
1 Generated
2 Generated
3 Generated
4 Generated
5 Generated
none Generated
0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 23%, transparent), 0 1px 3px 1px color-mix(in srgb, var(--md-sys-color-shadow) 11%, transparent) Generated
0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 23%, transparent), 0 2px 6px 2px color-mix(in srgb, var(--md-sys-color-shadow) 11%, transparent) Generated
0 1px 3px 0 color-mix(in srgb, var(--md-sys-color-shadow) 23%, transparent), 0 4px 8px 3px color-mix(in srgb, var(--md-sys-color-shadow) 11%, transparent) Generated
0 2px 3px 0 color-mix(in srgb, var(--md-sys-color-shadow) 23%, transparent), 0 6px 10px 4px color-mix(in srgb, var(--md-sys-color-shadow) 11%, transparent) Generated
0 4px 4px 0 color-mix(in srgb, var(--md-sys-color-shadow) 23%, transparent), 0 8px 12px 6px color-mix(in srgb, var(--md-sys-color-shadow) 11%, transparent) Generated
Module

Motion →

Duration and easing tokens, including reduced-motion output.

TokenValueProvenance
cubic-bezier(0, 0, 1, 1) Generated
cubic-bezier(0.2, 0, 0, 1) Generated
cubic-bezier(0.3, 0, 1, 1) Generated
cubic-bezier(0, 0, 0, 1) Generated
cubic-bezier(0.3, 0, 0.8, 0.15) Generated
cubic-bezier(0.05, 0.7, 0.1, 1) Generated
cubic-bezier(0.4, 0, 0.2, 1) Generated
cubic-bezier(0.4, 0, 1, 1) Generated
cubic-bezier(0, 0, 0.2, 1) Generated
linear(0, 0.0014 1.3%, 0.006 2.7%, 0.0147 4.2%, 0.0281 5.8%, 0.0472 7.4%, 0.0725 9%, 0.1049 10.5%, 0.1452 12%, 0.1941 13.4%, 0.2523 14.6%, 0.3207 15.7%, 0.4 16.7%, 0.5 17.7%, 0.5903 19.1%, 0.6709 20.9%, 0.7422 23.5%, 0.8043 27%, 0.8575 31.8%, 0.9019 38%, 0.9378 46%, 0.9653 55.9%, 0.9847 68.1%, 0.9962 82.7%, 1) Derived
50ms Generated
100ms Generated
150ms Generated
200ms Generated
250ms Generated
300ms Generated
350ms Generated
400ms Generated
450ms Generated
500ms Generated
550ms Generated
600ms Generated
700ms Generated
800ms Generated
900ms Generated
1000ms Generated
cubic-bezier(0.27, 1.06, 0.18, 1) Generated
350ms Generated
cubic-bezier(0.31, 0.94, 0.34, 1) Generated
150ms Generated
cubic-bezier(0.27, 1.06, 0.18, 1) Generated
500ms Generated
cubic-bezier(0.34, 0.8, 0.34, 1) Generated
200ms Generated
cubic-bezier(0.27, 1.06, 0.18, 1) Generated
750ms Generated
cubic-bezier(0.34, 0.88, 0.34, 1) Generated
300ms Generated
cubic-bezier(0.42, 1.67, 0.21, 0.9) Generated
350ms Generated
cubic-bezier(0.31, 0.94, 0.34, 1) Generated
150ms Generated
cubic-bezier(0.38, 1.21, 0.22, 1) Generated
500ms Generated
cubic-bezier(0.34, 0.8, 0.34, 1) Generated
200ms Generated
cubic-bezier(0.39, 1.29, 0.35, 0.98) Generated
650ms Generated
cubic-bezier(0.34, 0.88, 0.34, 1) Generated
300ms Generated
0.90 Generated
1400 Generated
cubic-bezier(0.27, 1.06, 0.18, 1) Generated
350ms Generated
1.00 Generated
3800 Generated
cubic-bezier(0.31, 0.94, 0.34, 1) Generated
150ms Generated
0.90 Generated
700 Generated
cubic-bezier(0.27, 1.06, 0.18, 1) Generated
500ms Generated
1.00 Generated
1600 Generated
cubic-bezier(0.34, 0.8, 0.34, 1) Generated
200ms Generated
0.90 Generated
300 Generated
cubic-bezier(0.27, 1.06, 0.18, 1) Generated
750ms Generated
1.00 Generated
800 Generated
cubic-bezier(0.34, 0.88, 0.34, 1) Generated
300ms Generated
linear Generated
Module

Icons →

The Lucide binding and its surviving stroke and component-part tokens.

TokenValueProvenance
1rem Generated
2 Generated
2.25 Derived
Module

States →

State-layer opacities and the keyboard focus indicator, shared by every component.

TokenValueProvenance
8% Generated
10% Generated
10% Generated
16% Generated
12% Generated
38% Generated
var(--md-sys-color-secondary) Generated
3px Generated
8px Generated
2px Generated
var(--md-sys-motion-duration-long4) Generated

Library-neutral anatomy tokens derived from color, type, spacing, shape, elevation, motion and icons.

Button

TokenValueProvenance
var(--md-sys-shape-corner-small) Derived
0px Derived
transparent Derived
40px Derived
var(--md-sys-measurement-space200) Derived
var(--md-sys-measurement-space200) Derived
var(--md-sys-measurement-space200) Derived
var(--md-sys-measurement-space100) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-large-size) Derived
var(--md-sys-typescale-label-large-line-height) Derived
var(--md-sys-typescale-label-large-tracking) Derived
var(--md-sys-typescale-label-large-weight) Derived
var(--et-motion-spring-fast-effects-duration) Derived
var(--et-motion-spring-fast-effects-easing) Derived
transparent Derived
var(--md-sys-color-primary) Derived
var(--md-sys-color-primary) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
transparent Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-color-outline-variant) Derived
transparent Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-color-inverse-surface) Derived
var(--md-sys-color-inverse-on-surface) Derived
var(--md-sys-color-inverse-on-surface) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
var(--md-sys-color-surface-container-low) Derived
var(--md-sys-color-primary) Derived
var(--md-sys-color-primary) Derived
var(--md-sys-elevation-shadow-level1) Derived
var(--md-sys-elevation-shadow-level2) Derived
var(--md-sys-color-surface-container-low) Derived
var(--md-sys-color-primary) Derived
var(--md-sys-color-primary) Derived
var(--md-sys-color-primary) Derived
var(--md-sys-color-on-primary) Derived
var(--md-sys-color-on-primary) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
none Derived
var(--md-sys-color-secondary-container) Derived
var(--md-sys-color-on-secondary-container) Derived
var(--md-sys-color-on-secondary-container) Derived
var(--md-sys-color-secondary-container) Derived
var(--md-sys-color-on-secondary-container) Derived
var(--md-sys-color-on-secondary-container) Derived
var(--md-sys-color-secondary) Derived
var(--md-sys-color-on-secondary) Derived
var(--md-sys-color-on-secondary) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
var(--md-sys-color-primary) Derived
var(--md-sys-color-on-primary) Derived
var(--md-sys-color-on-primary) Derived
var(--md-sys-elevation-shadow-level0) Derived
var(--md-sys-elevation-shadow-level1) Derived
var(--md-sys-color-surface-container) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-color-primary) Derived
var(--md-sys-color-on-primary) Derived
var(--md-sys-color-on-primary) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
none Derived
var(--md-sys-color-error) Derived
var(--md-sys-color-on-error) Derived
var(--md-sys-color-on-error) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
32px Derived
var(--md-sys-measurement-space200) Derived
var(--md-sys-measurement-space200) Derived
var(--md-sys-measurement-space200) Derived
var(--md-sys-measurement-space100) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-large-size) Derived
var(--md-sys-typescale-label-large-line-height) Derived
var(--md-sys-typescale-label-large-tracking) Derived
var(--md-sys-typescale-label-large-weight) Derived
56px Derived
var(--md-sys-measurement-space300) Derived
var(--md-sys-measurement-space300) Derived
var(--md-sys-measurement-space300) Derived
var(--md-sys-measurement-space100) Derived
var(--md-ref-typeface-brand) Derived
var(--md-sys-typescale-title-medium-size) Derived
var(--md-sys-typescale-title-medium-line-height) Derived
var(--md-sys-typescale-title-medium-tracking) Derived
var(--md-sys-typescale-title-medium-weight) Derived
96px Derived
var(--md-sys-measurement-space600) Derived
var(--md-sys-measurement-space600) Derived
var(--md-sys-measurement-space600) Derived
var(--md-sys-measurement-space150) Derived
var(--md-ref-typeface-brand) Derived
var(--md-sys-typescale-headline-small-size) Derived
var(--md-sys-typescale-headline-small-line-height) Derived
var(--md-sys-typescale-headline-small-tracking) Derived
var(--md-sys-typescale-headline-small-weight) Derived
136px Derived
var(--md-sys-measurement-space800) Derived
var(--md-sys-measurement-space800) Derived
var(--md-sys-measurement-space800) Derived
var(--md-sys-measurement-space200) Derived
var(--md-ref-typeface-brand) Derived
var(--md-sys-typescale-headline-large-size) Derived
var(--md-sys-typescale-headline-large-line-height) Derived
var(--md-sys-typescale-headline-large-tracking) Derived
var(--md-sys-typescale-headline-large-weight) Derived
1px Derived
1px Derived
1px Derived
2px Derived
3px Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-medium) Derived
var(--md-sys-shape-corner-large) Derived
var(--md-sys-shape-corner-large) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-medium) Derived
var(--md-sys-shape-corner-medium) Derived
var(--md-comp-focus-ring-width) Derived
var(--md-comp-focus-ring-color) Derived
var(--md-comp-focus-ring-outward-offset) Derived
20px Derived
20px Derived
var(--et-icon-stroke) Derived
20px Derived
20px Derived
24px Derived
24px Derived
32px Derived
32px Derived
40px Derived
40px Derived

Icon button

TokenValueProvenance
var(--md-sys-shape-corner-small) Derived
0px Derived
transparent Derived
40px Derived
40px Derived
8px Derived
8px Derived
var(--et-motion-spring-fast-effects-duration) Derived
var(--et-motion-spring-fast-effects-easing) Derived
max(100%, var(--et-min-target)) Derived
max(100%, var(--et-min-target)) Derived
transparent Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-color-on-surface-variant) Derived
transparent Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-color-on-surface-variant) Derived
transparent Derived
var(--md-sys-color-primary) Derived
var(--md-sys-color-primary) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
transparent Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-color-outline-variant) Derived
transparent Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-color-inverse-surface) Derived
var(--md-sys-color-inverse-on-surface) Derived
var(--md-sys-color-inverse-on-surface) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
var(--md-sys-color-secondary-container) Derived
var(--md-sys-color-on-secondary-container) Derived
var(--md-sys-color-on-secondary-container) Derived
var(--md-sys-color-secondary-container) Derived
var(--md-sys-color-on-secondary-container) Derived
var(--md-sys-color-on-secondary-container) Derived
var(--md-sys-color-secondary) Derived
var(--md-sys-color-on-secondary) Derived
var(--md-sys-color-on-secondary) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
var(--md-sys-color-primary) Derived
var(--md-sys-color-on-primary) Derived
var(--md-sys-color-on-primary) Derived
var(--md-sys-color-surface-container) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-color-primary) Derived
var(--md-sys-color-on-primary) Derived
var(--md-sys-color-on-primary) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
32px Derived
32px Derived
6px Derived
6px Derived
56px Derived
56px Derived
16px Derived
16px Derived
96px Derived
96px Derived
32px Derived
32px Derived
136px Derived
136px Derived
48px Derived
48px Derived
1px Derived
1px Derived
1px Derived
2px Derived
3px Derived
4px Derived
4px Derived
calc(20px + 2 * 4px) Derived
10px Derived
10px Derived
calc(20px + 2 * 10px) Derived
4px Derived
4px Derived
calc(24px + 2 * 4px) Derived
14px Derived
14px Derived
calc(24px + 2 * 14px) Derived
12px Derived
12px Derived
calc(24px + 2 * 12px) Derived
24px Derived
24px Derived
calc(24px + 2 * 24px) Derived
16px Derived
16px Derived
calc(32px + 2 * 16px) Derived
48px Derived
48px Derived
calc(32px + 2 * 48px) Derived
32px Derived
32px Derived
calc(40px + 2 * 32px) Derived
72px Derived
72px Derived
calc(40px + 2 * 72px) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-medium) Derived
var(--md-sys-shape-corner-large) Derived
var(--md-sys-shape-corner-large) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-medium) Derived
var(--md-sys-shape-corner-large) Derived
var(--md-sys-shape-corner-large) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-medium) Derived
var(--md-sys-shape-corner-medium) Derived
var(--md-comp-focus-ring-width) Derived
var(--md-comp-focus-ring-color) Derived
var(--md-comp-focus-ring-outward-offset) Derived
24px Derived
24px Derived
var(--et-icon-stroke) Derived
var(--et-icon-stroke-emphasized) Derived
20px Derived
20px Derived
24px Derived
24px Derived
32px Derived
32px Derived
40px Derived
40px Derived

Navigation rail

TokenValueProvenance
var(--md-sys-measurement-space50) Derived
var(--md-sys-measurement-space150) Derived
var(--md-sys-measurement-space100) Derived
80px Derived
var(--md-sys-measurement-space75) Derived
var(--md-sys-measurement-space75) Derived
var(--md-sys-measurement-space25) Derived
transparent Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-shape-corner-small) Derived
1px Derived
transparent Derived
var(--md-sys-motion-duration-short3) Derived
var(--md-sys-motion-easing-standard) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-color-surface-container-high) Derived
var(--md-sys-color-on-surface) Derived
var(--md-sys-shape-corner-medium) Derived
var(--md-sys-color-on-surface) Derived
var(--md-sys-color-secondary-container) Derived
var(--md-sys-color-on-secondary-container) Derived
var(--md-sys-shape-corner-medium) Derived
var(--md-sys-color-outline-variant) Derived
var(--md-sys-color-on-secondary-container) Derived
var(--md-comp-focus-ring-width) Derived
var(--md-comp-focus-ring-color) Derived
var(--md-comp-focus-ring-outward-offset) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
20px Derived
20px Derived
var(--et-icon-stroke) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-small-size) Derived
var(--md-sys-typescale-label-small-line-height) Derived
var(--md-sys-typescale-label-small-tracking) Derived
var(--md-sys-typescale-label-small-weight) Derived
-7px Derived
4px Derived
22px Derived
0 var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) 0 Derived
var(--md-sys-color-on-surface) Derived
-7px Derived
22px Derived
3px Derived
var(--md-sys-shape-corner-none) var(--md-sys-shape-corner-none) 0 0 Derived

Tabs

TokenValueProvenance
var(--md-sys-color-on-surface) Derived
var(--md-sys-measurement-space50) Derived
var(--md-sys-color-outline-variant) Derived
1px Derived
48px Derived
var(--md-sys-measurement-space200) Derived
var(--md-sys-measurement-space100) Derived
transparent Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-large-size) Derived
var(--md-sys-typescale-label-large-line-height) Derived
var(--md-sys-typescale-label-large-tracking) Derived
var(--md-sys-typescale-label-large-weight) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-color-surface-container-low) Derived
var(--md-sys-color-primary) Derived
var(--md-sys-color-primary) Derived
var(--md-comp-focus-ring-width) Derived
var(--md-comp-focus-ring-color) Derived
var(--md-comp-focus-ring-outward-offset) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
3px Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-color-primary) Derived
var(--et-motion-spring-fast-spatial-duration) Derived
var(--et-motion-spring-fast-spatial-easing) Derived
2px Derived
var(--md-sys-shape-corner-none) Derived
var(--md-sys-measurement-space200) Derived
var(--md-sys-color-on-surface) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-body-medium-size) Derived
var(--md-sys-typescale-body-medium-line-height) Derived
var(--md-sys-typescale-body-medium-tracking) Derived
var(--md-sys-typescale-body-medium-weight) Derived
var(--md-sys-color-on-surface) Derived
var(--md-comp-focus-ring-width) Derived
var(--md-comp-focus-ring-color) Derived
var(--md-comp-focus-ring-outward-offset) Derived

Accordion

TokenValueProvenance
var(--md-sys-color-surface-container-lowest) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-color-outline-variant) Derived
0px Derived
var(--md-sys-color-outline-variant) Derived
1px Derived
0px Derived
56px Derived
var(--md-sys-measurement-space200) Derived
var(--md-sys-measurement-space150) Derived
var(--md-sys-measurement-space150) Derived
0 Derived
transparent Derived
var(--md-sys-color-on-surface) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-medium-size) Derived
var(--md-sys-typescale-label-medium-line-height) Derived
var(--md-sys-typescale-label-medium-tracking) Derived
var(--md-sys-typescale-label-medium-weight) Derived
var(--md-sys-color-on-surface) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-small-top) Derived
var(--md-sys-shape-corner-small-top) Derived
var(--md-sys-shape-corner-small-bottom) Derived
transparent Derived
transparent Derived
var(--md-comp-focus-ring-width) Derived
var(--md-comp-focus-ring-color) Derived
var(--md-comp-focus-ring-outward-offset) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-medium-size) Derived
var(--md-sys-typescale-label-medium-line-height) Derived
var(--md-sys-typescale-label-medium-tracking) Derived
var(--md-sys-typescale-label-medium-weight) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
var(--et-icon-size-xs) Derived
var(--et-icon-size-xs) Derived
var(--md-sys-color-on-surface-variant) Derived
rotate(0deg) Derived
var(--et-motion-spring-fast-effects-duration) Derived
var(--et-motion-spring-fast-effects-easing) Derived
rotate(180deg) Derived
var(--md-sys-measurement-space200) Derived
var(--md-sys-color-surface-container-lowest) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-body-medium-size) Derived
var(--md-sys-typescale-body-medium-line-height) Derived
var(--md-sys-typescale-body-medium-tracking) Derived
var(--md-sys-typescale-body-medium-weight) Derived
var(--md-sys-measurement-space100) Derived
var(--md-sys-measurement-space200) Derived
var(--md-sys-shape-corner-small-bottom) Derived
var(--md-sys-motion-duration-medium2) Derived
var(--md-sys-motion-easing-emphasized-decelerate) Derived
var(--md-sys-motion-duration-short4) Derived
var(--md-sys-motion-easing-emphasized-accelerate) Derived

Code

TokenValueProvenance
var(--md-sys-color-surface-container-low) Derived
var(--md-sys-color-on-surface) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-color-outline-variant) Derived
1px Derived
var(--md-sys-color-surface-container) Derived
var(--md-sys-measurement-space100) Derived
var(--md-sys-measurement-space200) Derived
var(--md-sys-measurement-space100) Derived
var(--md-sys-color-outline-variant) Derived
1px Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-small-size) Derived
var(--md-sys-typescale-label-small-line-height) Derived
var(--md-sys-typescale-label-small-tracking) Derived
var(--md-sys-typescale-label-small-weight) Derived
var(--md-sys-measurement-space200) Derived
var(--et-typescale-code-block-font) Derived
var(--et-typescale-code-block-size) Derived
var(--et-typescale-code-block-line-height) Derived
var(--et-typescale-code-block-weight) Derived

Code editor

TokenValueProvenance
var(--md-sys-color-surface-container-lowest) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-color-outline-variant) Derived
1px Derived

Text field

TokenValueProvenance
var(--md-sys-measurement-space75) Derived
var(--md-sys-color-on-surface) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-large-size) Derived
var(--md-sys-typescale-label-large-line-height) Derived
var(--md-sys-typescale-label-large-tracking) Derived
var(--md-sys-typescale-label-large-weight) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
36px Derived
var(--md-sys-measurement-space100) Derived
var(--md-sys-color-surface-container) Derived
var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-color-surface-container) Derived
transparent Derived
var(--md-sys-color-outline) Derived
1px Derived
0 0 0 1px var(--md-sys-color-primary) Derived
var(--md-sys-color-primary) Derived
0 0 0 1px var(--md-sys-color-error) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
var(--et-icon-size-xs) Derived
var(--et-icon-size-xs) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--et-icon-stroke) Derived
var(--md-sys-measurement-space125) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
var(--md-sys-measurement-space125) Derived
var(--md-sys-color-on-surface) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-body-small-size) Derived
var(--md-sys-typescale-body-small-line-height) Derived
var(--md-sys-typescale-body-small-tracking) Derived
var(--md-sys-typescale-body-small-weight) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-color-primary) Derived
var(--md-sys-color-on-primary) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
96px Derived
var(--md-sys-measurement-space150) Derived
var(--md-sys-color-on-surface) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-body-medium-size) Derived
var(--md-sys-typescale-body-medium-line-height) Derived
var(--md-sys-typescale-body-medium-tracking) Derived
var(--md-sys-typescale-body-medium-weight) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-measurement-space125) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-body-small-size) Derived
var(--md-sys-typescale-body-small-line-height) Derived
var(--md-sys-typescale-body-small-tracking) Derived
var(--md-sys-typescale-body-small-weight) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-body-small-size) Derived
var(--md-sys-typescale-body-small-line-height) Derived
var(--md-sys-typescale-body-small-tracking) Derived
var(--md-sys-typescale-body-small-weight) Derived
var(--md-sys-color-error) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived

Combobox

TokenValueProvenance
100% Derived
var(--md-sys-color-on-surface) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-large-size) Derived
var(--md-sys-typescale-label-large-line-height) Derived
var(--md-sys-typescale-label-large-tracking) Derived
var(--md-sys-typescale-label-large-weight) Derived
var(--md-sys-measurement-space100) Derived
var(--md-sys-measurement-space100) Derived
36px Derived
var(--md-sys-measurement-space125) Derived
var(--md-sys-measurement-space100) Derived
var(--md-sys-color-surface-container) Derived
var(--md-sys-shape-corner-extra-small) Derived
0 0 0 1px var(--md-sys-color-primary) Derived
var(--md-sys-measurement-space125) Derived
var(--md-sys-color-on-surface) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-body-small-size) Derived
var(--md-sys-typescale-body-small-line-height) Derived
var(--md-sys-typescale-body-small-tracking) Derived
var(--md-sys-typescale-body-small-weight) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--et-icon-size-xs) Derived
var(--et-icon-size-xs) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-comp-focus-ring-width) Derived
var(--md-comp-focus-ring-color) Derived
var(--md-comp-focus-ring-outward-offset) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-measurement-space50) Derived
320px Derived
var(--md-sys-color-surface-container) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-measurement-space100) Derived
var(--md-sys-elevation-shadow-level2) Derived
var(--md-sys-color-outline-variant) Derived
1px Derived
var(--md-sys-measurement-space25) Derived
var(--md-sys-measurement-space25) Derived
1px Derived
var(--md-sys-color-outline-variant) Derived
var(--md-sys-measurement-space100) Derived
var(--md-sys-measurement-space150) Derived
var(--md-sys-measurement-space150) Derived
var(--md-sys-measurement-space50) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-medium-size) Derived
var(--md-sys-typescale-label-medium-line-height) Derived
var(--md-sys-typescale-label-medium-tracking) Derived
var(--md-sys-typescale-label-medium-weight) Derived
48px Derived
var(--md-sys-measurement-space150) Derived
var(--md-sys-measurement-space100) Derived
var(--md-sys-shape-corner-extra-small) Derived
transparent Derived
var(--md-sys-color-on-surface) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-body-medium-size) Derived
var(--md-sys-typescale-body-medium-line-height) Derived
var(--md-sys-typescale-body-medium-tracking) Derived
var(--md-sys-typescale-body-medium-weight) Derived
var(--md-sys-color-surface-container-high) Derived
var(--md-sys-color-secondary-container) Derived
var(--md-sys-color-on-secondary-container) Derived
var(--md-comp-focus-ring-width) Derived
var(--md-sys-color-on-secondary-container) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
currentColor Derived
currentColor Derived
var(--md-sys-measurement-space150) Derived
var(--md-sys-measurement-space100) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-body-small-size) Derived
var(--md-sys-typescale-body-small-line-height) Derived
var(--md-sys-typescale-body-small-tracking) Derived
var(--md-sys-typescale-body-small-weight) Derived

Select

TokenValueProvenance
100% Derived
var(--md-sys-color-on-surface) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-large-size) Derived
var(--md-sys-typescale-label-large-line-height) Derived
var(--md-sys-typescale-label-large-tracking) Derived
var(--md-sys-typescale-label-large-weight) Derived
36px Derived
var(--md-sys-measurement-space125) Derived
var(--md-sys-measurement-space100) Derived
var(--md-sys-color-surface-container) Derived
var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-color-on-surface) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-body-small-size) Derived
var(--md-sys-typescale-body-small-line-height) Derived
var(--md-sys-typescale-body-small-tracking) Derived
var(--md-sys-typescale-body-small-weight) Derived
var(--md-sys-color-on-surface) Derived
var(--md-sys-color-surface-container) Derived
transparent Derived
var(--md-sys-color-outline) Derived
1px Derived
var(--md-sys-color-primary) Derived
0 0 0 1px var(--md-sys-color-primary) Derived
var(--md-comp-focus-ring-width) Derived
var(--md-comp-focus-ring-color) Derived
var(--md-comp-focus-ring-outward-offset) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
var(--md-sys-measurement-space125) Derived
currentColor Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-body-small-size) Derived
var(--md-sys-typescale-body-small-line-height) Derived
var(--md-sys-typescale-body-small-tracking) Derived
var(--md-sys-typescale-body-small-weight) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--et-icon-size-xs) Derived
var(--et-icon-size-xs) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--et-motion-spring-fast-spatial-duration) Derived
180deg Derived
var(--md-sys-measurement-space50) Derived
320px Derived
var(--md-sys-color-surface-container) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-measurement-space100) Derived
var(--md-sys-elevation-shadow-level2) Derived
var(--md-sys-motion-duration-short4) Derived
var(--md-sys-motion-easing-emphasized-decelerate) Derived
var(--md-sys-motion-duration-short3) Derived
var(--md-sys-motion-easing-emphasized-accelerate) Derived
var(--md-sys-measurement-space25) Derived
var(--md-sys-measurement-space150) Derived
var(--md-sys-measurement-space100) Derived
var(--md-sys-color-on-surface-variant) Derived
1 Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-small-size) Derived
var(--md-sys-typescale-label-small-line-height) Derived
var(--md-sys-typescale-label-small-tracking) Derived
var(--md-sys-typescale-label-small-weight) Derived
48px Derived
var(--md-sys-measurement-space150) Derived
var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-color-on-surface) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-body-medium-size) Derived
var(--md-sys-typescale-body-medium-line-height) Derived
var(--md-sys-typescale-body-medium-tracking) Derived
var(--md-sys-typescale-body-medium-weight) Derived
var(--md-sys-color-surface-container-high) Derived
var(--md-sys-color-secondary-container) Derived
var(--md-sys-color-on-secondary-container) Derived
var(--md-comp-focus-ring-width) Derived
var(--md-sys-color-on-secondary-container) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
currentColor Derived
currentColor Derived

Listbox

TokenValueProvenance
var(--md-sys-measurement-space100) Derived
var(--md-sys-color-on-surface) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-medium-size) Derived
var(--md-sys-typescale-label-medium-line-height) Derived
var(--md-sys-typescale-label-medium-tracking) Derived
var(--md-sys-typescale-label-medium-weight) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
var(--md-sys-measurement-space50) Derived
var(--md-sys-measurement-space50) Derived
var(--md-sys-measurement-space50) Derived
var(--md-sys-color-on-surface-variant) Derived
1 Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-small-size) Derived
var(--md-sys-typescale-label-small-line-height) Derived
var(--md-sys-typescale-label-small-tracking) Derived
var(--md-sys-typescale-label-small-weight) Derived
var(--md-sys-measurement-space100) Derived
var(--md-sys-measurement-space75) Derived
var(--md-sys-measurement-space125) Derived
var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-color-surface-container-lowest) Derived
1px Derived
var(--md-sys-color-outline-variant) Derived
var(--md-sys-color-on-surface) Derived
var(--md-sys-color-surface-container) Derived
var(--md-sys-color-outline) Derived
var(--md-sys-color-primary-container) Derived
var(--md-sys-color-on-primary-container) Derived
var(--md-sys-color-primary) Derived
var(--md-comp-focus-ring-width) Derived
var(--md-sys-color-on-primary-container) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
var(--md-sys-measurement-space0) Derived
currentColor Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-medium-size) Derived
var(--md-sys-typescale-label-medium-line-height) Derived
var(--md-sys-typescale-label-medium-tracking) Derived
var(--md-sys-typescale-label-medium-weight) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-body-small-size) Derived
var(--md-sys-typescale-body-small-line-height) Derived
var(--md-sys-typescale-body-small-tracking) Derived
var(--md-sys-typescale-body-small-weight) Derived
currentColor Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
var(--et-icon-size-xs) Derived
var(--et-icon-size-xs) Derived
currentColor Derived

Slider

TokenValueProvenance
var(--md-sys-measurement-space100) Derived
var(--md-sys-color-on-surface) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-large-size) Derived
var(--md-sys-typescale-label-large-line-height) Derived
var(--md-sys-typescale-label-large-tracking) Derived
var(--md-sys-typescale-label-large-weight) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
40px Derived
4px Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-color-secondary-container) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-color-primary) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
var(--md-sys-color-on-primary) Derived
20px Derived
20px Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-color-primary) Derived
var(--md-sys-elevation-shadow-level1) Derived
1.1 Derived
var(--md-comp-focus-ring-width) Derived
var(--md-comp-focus-ring-color) Derived
var(--md-comp-focus-ring-outward-offset) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-large-size) Derived
var(--md-sys-typescale-label-large-line-height) Derived
var(--md-sys-typescale-label-large-tracking) Derived
var(--md-sys-typescale-label-large-weight) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
var(--md-sys-measurement-space75) Derived
var(--md-sys-color-on-surface-variant) Derived
2px Derived
2px Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived

Checkbox

TokenValueProvenance
var(--md-sys-measurement-space100) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
var(--md-sys-color-primary) Derived
18px Derived
18px Derived
var(--md-sys-shape-corner-none) Derived
transparent Derived
var(--md-sys-color-on-surface-variant) Derived
2px Derived
var(--md-sys-color-primary) Derived
var(--md-sys-color-primary) Derived
var(--md-sys-color-on-primary) Derived
var(--md-comp-focus-ring-width) Derived
var(--md-comp-focus-ring-color) Derived
var(--md-comp-focus-ring-outward-offset) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
100% Derived
100% Derived
currentColor Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
var(--md-sys-color-on-surface) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-body-medium-size) Derived
var(--md-sys-typescale-body-medium-line-height) Derived
var(--md-sys-typescale-body-medium-tracking) Derived
var(--md-sys-typescale-body-medium-weight) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived

Badge

TokenValueProvenance
20px Derived
20px Derived
var(--md-sys-measurement-space50) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-color-secondary-container) Derived
var(--md-sys-color-on-secondary-container) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-medium-size) Derived
var(--md-sys-typescale-label-medium-line-height) Derived
var(--md-sys-typescale-label-medium-tracking) Derived
var(--md-sys-typescale-label-medium-weight) Derived
8px Derived
8px Derived
0px Derived
var(--md-sys-color-error) Derived
var(--md-sys-color-error-container) Derived
var(--md-sys-color-on-error-container) Derived
transparent Derived
1px Derived
var(--md-sys-color-outline-variant) Derived
var(--md-sys-color-on-surface-variant) Derived

Table

TokenValueProvenance
var(--md-sys-shape-corner-small) Derived
1px Derived
var(--md-sys-color-outline-variant) Derived
var(--md-sys-color-surface-container-lowest) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-body-small-size) Derived
var(--md-sys-typescale-body-small-line-height) Derived
var(--md-sys-typescale-body-small-tracking) Derived
var(--md-sys-typescale-body-small-weight) Derived
var(--md-sys-measurement-space100) Derived
var(--md-sys-measurement-space150) Derived
var(--md-sys-color-surface-container-low) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-medium-size) Derived
var(--md-sys-typescale-label-medium-line-height) Derived
var(--md-sys-typescale-label-medium-tracking) Derived
var(--md-sys-typescale-label-medium-weight) Derived
1px Derived
var(--md-sys-color-outline-variant) Derived
var(--md-sys-color-surface-container-low) Derived
var(--md-sys-measurement-space100) Derived
var(--md-sys-measurement-space150) Derived
var(--md-sys-color-on-surface) Derived

Connected button group

TokenValueProvenance
2px Derived
40px Derived
var(--md-sys-measurement-space200) Derived
var(--md-sys-shape-corner-small) Derived
transparent Derived
1px Derived
var(--md-sys-color-outline-variant) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-medium-size) Derived
var(--md-sys-typescale-label-medium-line-height) Derived
var(--md-sys-typescale-label-medium-tracking) Derived
var(--md-sys-typescale-label-medium-weight) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-color-surface-container-high) Derived
var(--md-sys-color-secondary-container) Derived
var(--md-sys-color-on-secondary-container) Derived
transparent Derived
var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-color-on-secondary-container) Derived
var(--md-comp-focus-ring-width) Derived
var(--md-comp-focus-ring-color) Derived
var(--md-comp-focus-ring-outward-offset) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived

Segmented control

TokenValueProvenance
transparent Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-measurement-space25) Derived
var(--md-sys-measurement-space25) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
1.75rem Derived
var(--md-sys-measurement-space100) Derived
var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-medium-size) Derived
var(--md-sys-typescale-label-medium-line-height) Derived
var(--md-sys-typescale-label-medium-tracking) Derived
var(--md-sys-typescale-label-medium-weight) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-color-on-surface) Derived
var(--md-sys-color-on-surface) Derived
var(--md-comp-focus-ring-width) Derived
var(--md-comp-focus-ring-color) Derived
var(--md-comp-focus-ring-outward-offset) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
var(--md-sys-color-surface-container-high) Derived
var(--md-sys-shape-corner-extra-small) Derived
none Derived
var(--et-motion-spring-fast-spatial-duration) Derived
var(--et-motion-spring-fast-spatial-easing) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived

Dialog

TokenValueProvenance
color-mix(in srgb, var(--md-sys-color-scrim) 60%, transparent) Derived
blur(4px) Derived
var(--md-sys-motion-duration-short4) Derived
var(--md-sys-motion-easing-emphasized-decelerate) Derived
var(--md-sys-motion-duration-short3) Derived
var(--md-sys-motion-easing-emphasized-accelerate) Derived
var(--md-sys-measurement-space200) Derived
var(--md-sys-color-surface-container-high) Derived
var(--md-sys-shape-corner-large) Derived
var(--md-sys-measurement-space300) Derived
var(--md-sys-elevation-shadow-level3) Derived
var(--md-sys-motion-duration-medium2) Derived
var(--md-sys-motion-easing-emphasized-decelerate) Derived
var(--md-sys-motion-duration-short4) Derived
var(--md-sys-motion-easing-emphasized-accelerate) Derived
var(--md-sys-color-on-surface) Derived
var(--md-ref-typeface-brand) Derived
var(--md-sys-typescale-title-medium-size) Derived
var(--md-sys-typescale-title-medium-line-height) Derived
var(--md-sys-typescale-title-medium-tracking) Derived
var(--md-sys-typescale-title-medium-weight) Derived
var(--md-sys-measurement-space200) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-body-medium-size) Derived
var(--md-sys-typescale-body-medium-line-height) Derived
var(--md-sys-typescale-body-medium-tracking) Derived
var(--md-sys-typescale-body-medium-weight) Derived
var(--md-sys-measurement-space300) Derived
var(--md-sys-measurement-space100) Derived
40px Derived
40px Derived
var(--md-sys-shape-corner-small) Derived
transparent Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-comp-focus-ring-width) Derived
var(--md-comp-focus-ring-color) Derived
var(--md-comp-focus-ring-outward-offset) Derived

Card

TokenValueProvenance
var(--md-sys-color-surface-container-low) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-measurement-space200) Derived
var(--md-sys-color-outline-variant) Derived
0px Derived
var(--md-sys-elevation-shadow-level1) Derived
var(--md-sys-color-surface-container-highest) Derived
var(--md-sys-elevation-shadow-level0) Derived
var(--md-sys-color-surface) Derived
1px Derived
var(--md-sys-elevation-shadow-level0) Derived
var(--md-sys-measurement-space50) Derived
var(--md-sys-color-on-surface) Derived
var(--md-ref-typeface-brand) Derived
var(--md-sys-typescale-title-medium-size) Derived
var(--md-sys-typescale-title-medium-line-height) Derived
var(--md-sys-typescale-title-medium-tracking) Derived
var(--md-sys-typescale-title-medium-weight) Derived
var(--md-sys-color-on-surface-variant) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-body-medium-size) Derived
var(--md-sys-typescale-body-medium-line-height) Derived
var(--md-sys-typescale-body-medium-tracking) Derived
var(--md-sys-typescale-body-medium-weight) Derived
var(--md-sys-measurement-space200) Derived
var(--md-sys-measurement-space200) Derived
var(--md-sys-measurement-space100) Derived

Chip

TokenValueProvenance
28px Derived
var(--md-sys-measurement-space150) Derived
var(--md-sys-measurement-space75) Derived
var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-color-secondary-container) Derived
var(--md-sys-color-on-secondary-container) Derived
var(--md-sys-color-outline-variant) Derived
0px Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-large-size) Derived
var(--md-sys-typescale-label-large-line-height) Derived
var(--md-sys-typescale-label-large-tracking) Derived
var(--md-sys-typescale-label-large-weight) Derived
transparent Derived
var(--md-sys-color-on-surface-variant) Derived
1px Derived
var(--md-sys-elevation-shadow-level1) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
currentColor Derived
var(--md-sys-color-on-surface) Derived
var(--md-comp-focus-ring-width) Derived
var(--md-sys-color-on-secondary-container) Derived
var(--md-comp-focus-ring-outward-offset) Derived
var(--md-comp-focus-ring-color) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived

Loading indicator

TokenValueProvenance
48px Derived
48px Derived
var(--md-sys-color-primary) Derived
var(--md-sys-motion-duration-extra-long4) Derived
var(--md-sys-motion-easing-linear) Derived
var(--md-sys-motion-duration-long2) Derived
var(--md-sys-motion-easing-emphasized) Derived

Tooltip

TokenValueProvenance
var(--md-sys-color-inverse-surface) Derived
var(--md-sys-color-inverse-on-surface) Derived
var(--md-sys-shape-corner-none) Derived
var(--md-sys-measurement-space100) Derived
var(--md-sys-measurement-space50) Derived
var(--md-sys-elevation-shadow-level2) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-body-small-size) Derived
var(--md-sys-typescale-body-small-line-height) Derived
var(--md-sys-typescale-body-small-tracking) Derived
var(--md-sys-typescale-body-small-weight) Derived
var(--md-sys-motion-duration-short3) Derived
var(--md-sys-motion-easing-emphasized-decelerate) Derived
var(--md-sys-motion-duration-short2) Derived
var(--md-sys-motion-easing-emphasized-accelerate) Derived

Button group

TokenValueProvenance
var(--md-sys-measurement-space150) Derived
40px Derived
2px Derived
var(--md-sys-shape-corner-small) Derived
padding-inline, border-radius Derived
var(--et-motion-spring-fast-spatial-duration) Derived
var(--et-motion-spring-fast-spatial-easing) Derived
var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-shape-corner-small) Derived

Split button

TokenValueProvenance
2px Derived
var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-none) Derived
var(--md-sys-shape-corner-none) Derived
var(--md-sys-measurement-space150) Derived
var(--md-sys-measurement-space150) Derived
var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-shape-corner-extra-small) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-color-surface-container) Derived
var(--md-sys-shape-corner-none) Derived
var(--md-sys-elevation-shadow-level2) Derived
var(--md-sys-measurement-space50) Derived
112px Derived
48px Derived
var(--md-sys-measurement-space150) Derived
var(--md-sys-color-on-surface) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-large-size) Derived
var(--md-sys-typescale-label-large-line-height) Derived
var(--md-sys-typescale-label-large-tracking) Derived
var(--md-sys-typescale-label-large-weight) Derived
var(--md-sys-color-on-surface) Derived
var(--md-sys-color-surface-container-high) Derived
var(--md-comp-focus-ring-width) Derived
var(--md-comp-focus-ring-color) Derived
var(--md-comp-focus-ring-outward-offset) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
22px Derived
22px Derived
var(--et-motion-spring-fast-effects-duration) Derived
rotate Derived
180deg Derived

Floating action button

TokenValueProvenance
56px Derived
56px Derived
var(--md-sys-shape-corner-medium) Derived
var(--md-sys-color-primary-container) Derived
var(--md-sys-color-on-primary-container) Derived
var(--md-sys-elevation-shadow-level3) Derived
var(--md-sys-measurement-space100) Derived
var(--md-sys-color-on-primary-container) Derived
var(--md-sys-color-secondary-container) Derived
var(--md-sys-color-on-secondary-container) Derived
var(--md-sys-color-on-secondary-container) Derived
var(--md-sys-color-tertiary-container) Derived
var(--md-sys-color-on-tertiary-container) Derived
var(--md-sys-color-on-tertiary-container) Derived
40px Derived
40px Derived
var(--md-sys-shape-corner-small) Derived
80px Derived
80px Derived
96px Derived
96px Derived
var(--md-sys-shape-corner-large) Derived
var(--md-sys-measurement-space200) Derived
var(--md-sys-measurement-space200) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-large-size) Derived
var(--md-sys-typescale-label-large-line-height) Derived
var(--md-sys-typescale-label-large-tracking) Derived
var(--md-sys-typescale-label-large-weight) Derived
var(--md-sys-elevation-shadow-level1) Derived
var(--md-sys-elevation-shadow-level4) Derived
var(--md-sys-elevation-shadow-level2) Derived
var(--md-sys-elevation-shadow-level1) Derived
var(--md-comp-focus-ring-width) Derived
var(--md-comp-focus-ring-color) Derived
var(--md-comp-focus-ring-outward-offset) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
none Derived
24px Derived
24px Derived
var(--et-icon-stroke) Derived
32px Derived
32px Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-large-size) Derived
var(--md-sys-typescale-label-large-line-height) Derived
var(--md-sys-typescale-label-large-tracking) Derived
var(--md-sys-typescale-label-large-weight) Derived

FAB menu

TokenValueProvenance
var(--md-sys-measurement-space50) Derived
var(--md-sys-measurement-space100) Derived
56px Derived
var(--md-sys-shape-corner-small) Derived
var(--md-sys-color-primary-container) Derived
var(--md-sys-color-on-primary-container) Derived
var(--md-sys-elevation-shadow-level3) Derived
var(--md-sys-measurement-space100) Derived
var(--md-sys-measurement-space300) Derived
var(--md-sys-measurement-space300) Derived
var(--md-sys-color-on-primary-container) Derived
var(--md-ref-typeface-plain) Derived
var(--md-sys-typescale-label-large-size) Derived
var(--md-sys-typescale-label-large-line-height) Derived
var(--md-sys-typescale-label-large-tracking) Derived
var(--md-sys-typescale-label-large-weight) Derived
var(--md-comp-focus-ring-width) Derived
var(--md-comp-focus-ring-color) Derived
var(--md-comp-focus-ring-outward-offset) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), var(--md-sys-color-surface)) Derived
color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent) Derived
24px Derived
24px Derived
var(--et-icon-stroke) Derived