All Tokens
Tabular overview of all tokens from the central YAML export.
Source: dist/tokens/tokens.yaml (420 tokens)
420 of 420 tokens shown
| Name | Scope | Value |
|---|---|---|
brand-color-accent |
brand:a |
var(--color-brand-a-green-400) |
brand-color-accent |
brand:b |
var(--color-brand-b-green-400) |
brand-color-accent-dark |
brand:a |
var(--color-brand-a-green-600) |
brand-color-accent-dark |
brand:b |
var(--color-brand-b-green-800) |
brand-color-functional-base |
brand:a |
var(--color-brand-a-green-700) |
brand-color-functional-base |
brand:b |
var(--color-brand-b-purple-700) |
brand-color-functional-base-dark |
brand:a |
var(--color-brand-a-green-900) |
brand-color-functional-base-dark |
brand:b |
var(--color-brand-b-purple-900) |
brand-color-functional-danger |
brand:a |
var(--color-brand-a-red-600) |
brand-color-functional-danger |
brand:b |
var(--color-brand-b-red-600) |
brand-color-functional-success |
brand:a |
var(--color-brand-a-green-600) |
brand-color-functional-success |
brand:b |
var(--color-brand-b-green-600) |
brand-color-primary |
brand:a |
var(--color-brand-a-sand-700) |
brand-color-primary |
brand:b |
var(--color-brand-b-purple-600) |
brand-color-primary-dark |
brand:a |
var(--color-brand-a-sand-900) |
brand-color-primary-dark |
brand:b |
var(--color-brand-b-purple-800) |
brand-color-subtle |
brand:a |
var(--color-neutral-500) |
brand-color-subtle |
brand:b |
var(--color-neutral-500) |
brand-color-subtle-dark |
brand:a |
var(--color-neutral-800) |
brand-color-subtle-dark |
brand:b |
var(--color-neutral-800) |
brand-color-subtle-light |
brand:a |
var(--color-neutral-200) |
brand-color-subtle-light |
brand:b |
var(--color-neutral-200) |
brand-corner-button |
brand:a |
var(--size-radius-700) |
brand-corner-button |
brand:b |
var(--size-radius-000) |
brand-corner-card |
brand:a |
var(--size-radius-200) |
brand-corner-card |
brand:b |
var(--size-radius-100) |
brand-corner-input |
brand:a |
var(--size-radius-200) |
brand-corner-input |
brand:b |
var(--size-radius-000) |
brand-corner-modal |
brand:a |
var(--size-radius-400) |
brand-corner-modal |
brand:b |
var(--size-radius-200) |
brand-font-base |
brand:a |
var(--font-family-sans) |
brand-font-base |
brand:b |
var(--font-family-sans) |
brand-font-lead |
brand:a |
var(--font-family-serif) |
brand-font-lead |
brand:b |
var(--font-family-serif) |
breakpoint-100 |
global:core-primitives |
580px |
breakpoint-200 |
global:core-primitives |
760px |
breakpoint-300 |
global:core-primitives |
960px |
breakpoint-400 |
global:core-primitives |
1200px |
breakpoint-500 |
global:core-primitives |
1440px |
breakpoint-600 |
global:core-primitives |
1920px |
button-border-color-disabled |
global:components-ui |
var(--color-border-disabled) |
button-border-radius |
global:components-ui |
var(--brand-corner-button) |
button-border-size-active |
global:components-ui |
var(--size-border-200) |
button-border-size-default |
global:components-ui |
var(--size-border-100) |
button-border-size-hover |
global:components-ui |
var(--size-border-100) |
button-container-background-disabled |
global:components-ui |
var(--color-fill-disabled) |
button-font-family |
global:components-ui |
var(--brand-font-lead) |
button-font-size |
global:components-ui |
var(--typography-label-font-size) |
button-font-weight |
global:components-ui |
var(--typography-label-font-weight) |
button-gap |
global:components-ui |
var(--size-spacing-200) |
button-ghost-border-color-active |
global:components-ui |
var(--color-transparent) |
button-ghost-border-color-default |
global:components-ui |
var(--color-transparent) |
button-ghost-border-color-focus |
global:components-ui |
var(--color-transparent) |
button-ghost-border-color-hover |
global:components-ui |
var(--color-transparent) |
button-ghost-container-background-active |
global:components-ui |
var(--color-fill-surface) |
button-ghost-container-background-default |
global:components-ui |
var(--color-fill-surface) |
button-ghost-container-background-focus |
global:components-ui |
var(--color-fill-surface) |
button-ghost-container-background-hover |
global:components-ui |
var(--color-fill-surface) |
button-ghost-text-color-active |
global:components-ui |
var(--color-text-brand) |
button-ghost-text-color-default |
global:components-ui |
var(--color-text-brand) |
button-ghost-text-color-hover |
global:components-ui |
var(--color-text-brand) |
button-group-gap |
global:components-ui |
var(--size-spacing-200) |
button-height-min |
global:components-ui |
2.5rem |
button-line-height |
global:components-ui |
var(--typography-label-line-height) |
button-outline-border-color-active |
global:components-ui |
var(--color-border-brand) |
button-outline-border-color-default |
global:components-ui |
var(--color-border-brand) |
button-outline-border-color-focus |
global:components-ui |
var(--color-border-brand) |
button-outline-border-color-hover |
global:components-ui |
var(--color-border-brand) |
button-outline-container-background-active |
global:components-ui |
var(--color-fill-surface) |
button-outline-container-background-default |
global:components-ui |
var(--color-fill-surface) |
button-outline-container-background-focus |
global:components-ui |
var(--color-fill-surface) |
button-outline-container-background-hover |
global:components-ui |
var(--color-fill-surface) |
button-outline-text-color-active |
global:components-ui |
var(--color-text-brand) |
button-outline-text-color-default |
global:components-ui |
var(--color-text-brand) |
button-outline-text-color-hover |
global:components-ui |
var(--color-text-brand) |
button-overlay-active |
global:components-ui |
var(--color-overlay-active) |
button-overlay-hover |
global:components-ui |
var(--color-overlay-hover) |
button-padding-block |
global:components-ui |
var(--size-spacing-200) |
button-padding-inline |
global:components-ui |
var(--size-spacing-400) |
button-padding-inline-icon-only |
global:components-ui |
var(--size-spacing-200) |
button-solid-border-color-active |
global:components-ui |
var(--color-border-brand) |
button-solid-border-color-default |
global:components-ui |
var(--color-border-brand) |
button-solid-border-color-focus |
global:components-ui |
var(--color-border-brand) |
button-solid-border-color-hover |
global:components-ui |
var(--color-border-brand) |
button-solid-container-background-active |
global:components-ui |
var(--color-fill-brand) |
button-solid-container-background-default |
global:components-ui |
var(--color-fill-brand) |
button-solid-container-background-focus |
global:components-ui |
var(--color-fill-brand) |
button-solid-container-background-hover |
global:components-ui |
var(--color-fill-brand) |
button-solid-text-color-active |
global:components-ui |
var(--color-text-inverse) |
button-solid-text-color-default |
global:components-ui |
var(--color-text-inverse) |
button-solid-text-color-hover |
global:components-ui |
var(--color-text-inverse) |
button-text-color-disabled |
global:components-ui |
var(--color-text-disabled) |
button-width-min |
global:components-ui |
2.5rem |
checkbox-border-size-default |
global:components-ui |
var(--size-border-100) |
checkbox-border-size-disabled |
global:components-ui |
var(--size-border-000) |
checkbox-border-size-hover |
global:components-ui |
var(--size-border-200) |
color-border-brand |
mode:dark |
var(--brand-color-primary) |
color-border-brand |
mode:light |
var(--brand-color-primary) |
color-border-danger |
mode:dark |
var(--brand-color-functional-danger) |
color-border-danger |
mode:light |
rgb(255 0 0) |
color-border-default |
mode:dark |
var(--color-neutral-800) |
color-border-default |
mode:light |
var(--color-neutral-800) |
color-border-disabled |
mode:dark |
var(--color-neutral-500) |
color-border-disabled |
mode:light |
var(--color-neutral-500) |
color-border-strong |
mode:dark |
var(--color-neutral-1000) |
color-border-strong |
mode:light |
var(--color-neutral-1000) |
color-border-subtle |
mode:dark |
var(--brand-color-subtle-dark) |
color-border-subtle |
mode:light |
var(--brand-color-subtle) |
color-brand-a-green-100 |
global:core-primitives |
rgb(243 246 233) |
color-brand-a-green-200 |
global:core-primitives |
rgb(223 231 197) |
color-brand-a-green-300 |
global:core-primitives |
rgb(207 219 169) |
color-brand-a-green-400 |
global:core-primitives |
rgb(191 207 140) |
color-brand-a-green-500 |
global:core-primitives |
rgb(175 195 111) |
color-brand-a-green-600 |
global:core-primitives |
rgb(159 183 82) |
color-brand-a-green-700 |
global:core-primitives |
rgb(137 158 66) |
color-brand-a-green-800 |
global:core-primitives |
rgb(112 129 54) |
color-brand-a-green-900 |
global:core-primitives |
rgb(81 93 39) |
color-brand-a-red-100 |
global:core-primitives |
rgb(254 251 251) |
color-brand-a-red-200 |
global:core-primitives |
rgb(250 224 230) |
color-brand-a-red-300 |
global:core-primitives |
rgb(244 179 195) |
color-brand-a-red-400 |
global:core-primitives |
rgb(238 135 160) |
color-brand-a-red-500 |
global:core-primitives |
rgb(231 90 124) |
color-brand-a-red-600 |
global:core-primitives |
rgb(225 46 89) |
color-brand-a-red-700 |
global:core-primitives |
rgb(191 28 67) |
color-brand-a-red-800 |
global:core-primitives |
rgb(147 21 52) |
color-brand-a-red-900 |
global:core-primitives |
rgb(102 15 36) |
color-brand-a-sand-100 |
global:core-primitives |
rgb(240 240 229) |
color-brand-a-sand-200 |
global:core-primitives |
rgb(221 222 197) |
color-brand-a-sand-300 |
global:core-primitives |
rgb(192 193 172) |
color-brand-a-sand-400 |
global:core-primitives |
rgb(164 165 147) |
color-brand-a-sand-500 |
global:core-primitives |
rgb(136 137 122) |
color-brand-a-sand-600 |
global:core-primitives |
rgb(108 109 97) |
color-brand-a-sand-700 |
global:core-primitives |
rgb(80 81 72) |
color-brand-a-sand-800 |
global:core-primitives |
rgb(52 52 47) |
color-brand-a-sand-900 |
global:core-primitives |
rgb(24 24 22) |
color-brand-b-blue-100 |
global:core-primitives |
rgb(206 219 253) |
color-brand-b-blue-200 |
global:core-primitives |
rgb(158 183 250) |
color-brand-b-blue-300 |
global:core-primitives |
rgb(109 147 248) |
color-brand-b-blue-400 |
global:core-primitives |
rgb(61 111 245) |
color-brand-b-blue-500 |
global:core-primitives |
rgb(12 75 243) |
color-brand-b-blue-600 |
global:core-primitives |
rgb(10 60 194) |
color-brand-b-blue-700 |
global:core-primitives |
rgb(7 45 146) |
color-brand-b-blue-800 |
global:core-primitives |
rgb(5 30 97) |
color-brand-b-blue-900 |
global:core-primitives |
rgb(2 15 49) |
color-brand-b-green-100 |
global:core-primitives |
rgb(246 254 250) |
color-brand-b-green-200 |
global:core-primitives |
rgb(200 249 223) |
color-brand-b-green-300 |
global:core-primitives |
rgb(154 244 196) |
color-brand-b-green-400 |
global:core-primitives |
rgb(108 239 170) |
color-brand-b-green-500 |
global:core-primitives |
rgb(62 234 143) |
color-brand-b-green-600 |
global:core-primitives |
rgb(19 174 92) |
color-brand-b-green-700 |
global:core-primitives |
rgb(14 129 68) |
color-brand-b-green-800 |
global:core-primitives |
rgb(8 69 36) |
color-brand-b-green-900 |
global:core-primitives |
rgb(4 37 19) |
color-brand-b-purple-200 |
global:core-primitives |
rgb(222 192 255) |
color-brand-b-purple-300 |
global:core-primitives |
rgb(196 143 255) |
color-brand-b-purple-600 |
global:core-primitives |
rgb(151 71 255) |
color-brand-b-purple-700 |
global:core-primitives |
rgb(122 20 255) |
color-brand-b-purple-800 |
global:core-primitives |
rgb(85 26 139) |
color-brand-b-purple-900 |
global:core-primitives |
rgb(58 18 95) |
color-brand-b-red-100 |
global:core-primitives |
rgb(255 255 255) |
color-brand-b-red-200 |
global:core-primitives |
rgb(255 204 204) |
color-brand-b-red-300 |
global:core-primitives |
rgb(255 153 153) |
color-brand-b-red-400 |
global:core-primitives |
rgb(255 102 102) |
color-brand-b-red-500 |
global:core-primitives |
rgb(255 51 51) |
color-brand-b-red-600 |
global:core-primitives |
rgb(255 0 0) |
color-brand-b-red-700 |
global:core-primitives |
rgb(153 0 0) |
color-brand-b-red-800 |
global:core-primitives |
rgb(102 0 0) |
color-brand-b-red-900 |
global:core-primitives |
rgb(51 0 0) |
color-fill-active |
mode:dark |
var(--brand-color-accent) |
color-fill-active |
mode:light |
var(--brand-color-accent) |
color-fill-brand |
mode:dark |
var(--brand-color-primary) |
color-fill-brand |
mode:light |
var(--brand-color-primary) |
color-fill-danger |
mode:dark |
var(--brand-color-functional-danger) |
color-fill-danger |
mode:light |
var(--brand-color-functional-danger) |
color-fill-disabled |
mode:dark |
var(--color-neutral-300) |
color-fill-disabled |
mode:light |
var(--color-neutral-300) |
color-fill-hover |
mode:dark |
var(--color-neutral-alpha-500) |
color-fill-hover |
mode:light |
var(--color-neutral-alpha-500) |
color-fill-subtle |
mode:dark |
var(--brand-color-subtle) |
color-fill-subtle |
mode:light |
var(--brand-color-subtle-light) |
color-fill-success |
mode:dark |
var(--brand-color-functional-success) |
color-fill-success |
mode:light |
var(--brand-color-functional-success) |
color-fill-surface |
mode:dark |
var(--color-neutral-1000) |
color-fill-surface |
mode:light |
var(--color-neutral-000) |
color-focus |
mode:dark |
var(--brand-color-primary-dark) |
color-focus |
mode:light |
var(--brand-color-primary) |
color-neutral-000 |
global:core-primitives |
rgb(255 255 255) |
color-neutral-100 |
global:core-primitives |
rgb(230 230 230) |
color-neutral-200 |
global:core-primitives |
rgb(204 204 204) |
color-neutral-300 |
global:core-primitives |
rgb(179 179 179) |
color-neutral-400 |
global:core-primitives |
rgb(128 128 128) |
color-neutral-500 |
global:core-primitives |
rgb(128 128 128) |
color-neutral-600 |
global:core-primitives |
rgb(102 102 102) |
color-neutral-700 |
global:core-primitives |
rgb(77 77 77) |
color-neutral-800 |
global:core-primitives |
rgb(51 51 51) |
color-neutral-900 |
global:core-primitives |
rgb(26 26 26) |
color-neutral-1000 |
global:core-primitives |
rgb(0 0 0) |
color-neutral-alpha-000 |
global:core-primitives |
rgba(0 0 0 / 0) |
color-neutral-alpha-100 |
global:core-primitives |
rgba(0 0 0 / 0.1) |
color-neutral-alpha-200 |
global:core-primitives |
rgba(0 0 0 / 0.2) |
color-neutral-alpha-300 |
global:core-primitives |
rgba(0 0 0 / 0.3) |
color-neutral-alpha-400 |
global:core-primitives |
rgba(0 0 0 / 0.4) |
color-neutral-alpha-500 |
global:core-primitives |
rgba(0 0 0 / 0.5) |
color-neutral-alpha-600 |
global:core-primitives |
rgba(0 0 0 / 0.6) |
color-neutral-alpha-700 |
global:core-primitives |
rgba(0 0 0 / 0.7) |
color-neutral-alpha-800 |
global:core-primitives |
rgba(0 0 0 / 0.8) |
color-neutral-alpha-900 |
global:core-primitives |
rgba(0 0 0 / 0.9) |
color-overlay-active |
mode:dark |
var(--color-neutral-alpha-400) |
color-overlay-active |
mode:light |
var(--color-neutral-alpha-400) |
color-overlay-backdrop |
mode:dark |
var(--color-neutral-alpha-400) |
color-overlay-backdrop |
mode:light |
var(--color-neutral-alpha-400) |
color-overlay-hover |
mode:dark |
var(--color-neutral-alpha-200) |
color-overlay-hover |
mode:light |
var(--color-neutral-alpha-200) |
color-overlay-selected |
mode:dark |
var(--color-neutral-alpha-600) |
color-overlay-selected |
mode:light |
var(--color-neutral-alpha-600) |
color-text-brand |
mode:dark |
var(--brand-color-primary-dark) |
color-text-brand |
mode:light |
var(--brand-color-primary) |
color-text-danger |
mode:dark |
var(--brand-color-functional-danger) |
color-text-danger |
mode:light |
var(--brand-color-functional-danger) |
color-text-default |
mode:dark |
var(--color-neutral-800) |
color-text-default |
mode:light |
var(--color-neutral-800) |
color-text-disabled |
mode:dark |
var(--color-neutral-600) |
color-text-disabled |
mode:light |
var(--color-neutral-600) |
color-text-inverse |
mode:dark |
var(--color-neutral-1000) |
color-text-inverse |
mode:light |
var(--color-neutral-000) |
color-text-strong |
mode:dark |
var(--color-neutral-1000) |
color-text-strong |
mode:light |
var(--color-neutral-1000) |
color-text-subtle |
mode:dark |
var(--brand-color-subtle-dark) |
color-text-subtle |
mode:light |
var(--brand-color-subtle) |
color-text-success |
mode:dark |
var(--brand-color-functional-success) |
color-text-success |
mode:light |
var(--brand-color-functional-success) |
color-transparent |
global:core-primitives |
rgba(0 0 0 / 0) |
container-100 |
global:core-primitives |
192px |
container-200 |
global:core-primitives |
384px |
container-300 |
global:core-primitives |
576px |
container-400 |
global:core-primitives |
768px |
container-500 |
global:core-primitives |
960px |
container-600 |
global:core-primitives |
1152px |
corner-button-radius |
global:semantics-roles |
var(--brand-corner-button) |
corner-card-radius |
global:semantics-roles |
var(--brand-corner-card) |
corner-checkbox-radius |
global:semantics-roles |
var(--brand-corner-input) |
corner-form-radius |
global:semantics-roles |
var(--brand-corner-card) |
corner-modal-radius |
global:semantics-roles |
var(--brand-corner-modal) |
font-family-mono |
global:core-primitives |
SFMono-Regular |
font-family-sans |
global:core-primitives |
Inter |
font-family-serif |
global:core-primitives |
Rokkitt |
font-size-lg |
global:core-primitives |
1.25rem |
font-size-md |
global:core-primitives |
1rem |
font-size-sm |
global:core-primitives |
.875rem |
font-size-xl |
global:core-primitives |
1.5rem |
font-size-xs |
global:core-primitives |
.75rem |
font-size-xxl |
global:core-primitives |
2rem |
font-size-xxxl |
global:core-primitives |
2.5rem |
font-weight-100 |
global:core-primitives |
100 |
font-weight-200 |
global:core-primitives |
200 |
font-weight-300 |
global:core-primitives |
300 |
font-weight-400 |
global:core-primitives |
400 |
font-weight-500 |
global:core-primitives |
500 |
font-weight-600 |
global:core-primitives |
600 |
font-weight-700 |
global:core-primitives |
700 |
font-weight-800 |
global:core-primitives |
800 |
font-weight-900 |
global:core-primitives |
900 |
form-border-radius |
global:components-ui |
var(--brand-corner-card) |
form-border-size |
global:components-ui |
var(--size-border-100) |
form-container-background |
global:components-ui |
var(--color-fill-surface) |
form-container-border-color |
global:components-ui |
var(--color-border-subtle) |
form-field-gap |
global:components-ui |
var(--size-spacing-200) |
form-field-helper-text-color-default |
global:components-ui |
var(--color-text-subtle) |
form-field-helper-text-color-invalid |
global:components-ui |
var(--color-text-danger) |
form-gap |
global:components-ui |
var(--size-spacing-400) |
form-group-gap |
global:components-ui |
var(--size-spacing-400) |
form-group-title-color |
global:components-ui |
var(--color-text-default) |
form-padding-block |
global:components-ui |
var(--size-spacing-400) |
form-padding-inline |
global:components-ui |
var(--size-spacing-400) |
input-border-color-disabled |
global:components-ui |
var(--color-border-disabled) |
input-border-radius |
global:components-ui |
var(--brand-corner-input) |
input-border-size-active |
global:components-ui |
var(--size-border-200) |
input-border-size-default |
global:components-ui |
var(--size-border-100) |
input-border-size-hover |
global:components-ui |
var(--size-border-100) |
input-checkbox-border-color-active |
global:components-ui |
var(--color-border-brand) |
input-checkbox-border-color-default |
global:components-ui |
var(--color-border-subtle) |
input-checkbox-border-color-disabled |
global:components-ui |
var(--color-border-disabled) |
input-checkbox-border-color-focus |
global:components-ui |
var(--color-border-brand) |
input-checkbox-border-color-hover |
global:components-ui |
var(--color-border-strong) |
input-checkbox-border-color-invalid |
global:components-ui |
var(--color-border-danger) |
input-checkbox-border-color-valid |
global:components-ui |
var(--color-border-strong) |
input-checkbox-container-background-active |
global:components-ui |
var(--color-fill-brand) |
input-checkbox-container-background-default |
global:components-ui |
var(--color-fill-surface) |
input-checkbox-container-background-disabled |
global:components-ui |
var(--color-fill-disabled) |
input-checkbox-container-background-focus |
global:components-ui |
var(--color-fill-surface) |
input-checkbox-container-background-hover |
global:components-ui |
var(--color-fill-surface) |
input-checkbox-text-color-active |
global:components-ui |
var(--color-text-inverse) |
input-checkbox-text-color-default |
global:components-ui |
var(--color-text-default) |
input-checkbox-text-color-disabled |
global:components-ui |
var(--color-text-disabled) |
input-checkbox-text-color-hover |
global:components-ui |
var(--color-text-strong) |
input-container-background-disabled |
global:components-ui |
var(--color-fill-disabled) |
input-font-family |
global:components-ui |
var(--brand-font-base) |
input-font-size |
global:components-ui |
var(--typography-label-font-size) |
input-font-weight |
global:components-ui |
var(--typography-body-font-weight) |
input-gap |
global:components-ui |
var(--size-spacing-200) |
input-height |
global:components-ui |
2.5rem |
input-line-height |
global:components-ui |
var(--typography-body-line-height) |
input-overlay-active |
global:components-ui |
var(--color-transparent) |
input-overlay-hover |
global:components-ui |
var(--color-transparent) |
input-padding-block |
global:components-ui |
var(--size-spacing-200) |
input-padding-inline |
global:components-ui |
var(--size-spacing-200) |
input-padding-inline-icon-only |
global:components-ui |
var(--size-spacing-200) |
input-radio-border-color-active |
global:components-ui |
var(--color-border-brand) |
input-radio-border-color-default |
global:components-ui |
var(--color-border-subtle) |
input-radio-border-color-disabled |
global:components-ui |
var(--color-border-disabled) |
input-radio-border-color-focus |
global:components-ui |
var(--color-border-brand) |
input-radio-border-color-hover |
global:components-ui |
var(--color-border-strong) |
input-radio-container-background-active |
global:components-ui |
var(--color-fill-brand) |
input-radio-container-background-default |
global:components-ui |
var(--color-fill-surface) |
input-radio-container-background-disabled |
global:components-ui |
var(--color-fill-disabled) |
input-radio-container-background-focus |
global:components-ui |
var(--color-fill-surface) |
input-radio-container-background-hover |
global:components-ui |
var(--color-fill-surface) |
input-radio-text-color-active |
global:components-ui |
var(--color-text-inverse) |
input-radio-text-color-default |
global:components-ui |
var(--color-text-default) |
input-radio-text-color-disabled |
global:components-ui |
var(--color-text-disabled) |
input-radio-text-color-hover |
global:components-ui |
var(--color-text-strong) |
input-text-border-color-active |
global:components-ui |
var(--color-border-brand) |
input-text-border-color-default |
global:components-ui |
var(--color-border-default) |
input-text-border-color-focus |
global:components-ui |
var(--color-border-brand) |
input-text-border-color-hover |
global:components-ui |
var(--color-border-brand) |
input-text-border-color-invalid |
global:components-ui |
var(--color-border-danger) |
input-text-border-color-valid |
global:components-ui |
var(--color-border-strong) |
input-text-color-disabled |
global:components-ui |
var(--color-text-disabled) |
input-text-container-background-active |
global:components-ui |
var(--color-fill-surface) |
input-text-container-background-default |
global:components-ui |
var(--color-fill-surface) |
input-text-container-background-focus |
global:components-ui |
var(--color-fill-surface) |
input-text-container-background-hover |
global:components-ui |
var(--color-fill-surface) |
input-text-height-min |
global:components-ui |
2.5rem |
input-text-text-color-active |
global:components-ui |
var(--color-text-default) |
input-text-text-color-default |
global:components-ui |
var(--color-text-default) |
input-text-text-color-hover |
global:components-ui |
var(--color-text-default) |
input-text-text-color-placeholder |
global:components-ui |
var(--color-text-subtle) |
layout-base-grid |
global:core-primitives |
.25rem |
layout-column-max-width |
global:core-primitives |
412px |
layout-columns |
global:core-primitives |
12 |
layout-float-breakpoint |
global:core-primitives |
1220px |
layout-gutter |
global:core-primitives |
1rem |
layout-max-width |
global:core-primitives |
1236px |
line-height-lg |
global:core-primitives |
1.75rem |
line-height-md |
global:core-primitives |
1.5rem |
line-height-sm |
global:core-primitives |
1.25rem |
line-height-xl |
global:core-primitives |
2rem |
line-height-xs |
global:core-primitives |
1rem |
line-height-xxl |
global:core-primitives |
2.75rem |
line-height-xxxl |
global:core-primitives |
3.5rem |
modal-backdrop-color |
global:components-ui |
var(--color-overlay-backdrop) |
modal-surface-border-radius |
global:components-ui |
var(--brand-corner-modal) |
modal-surface-color |
global:components-ui |
var(--color-fill-surface) |
radio-border-size-default |
global:components-ui |
var(--size-border-100) |
radio-border-size-disabled |
global:components-ui |
var(--size-border-000) |
radio-border-size-hover |
global:components-ui |
var(--size-border-200) |
shadow-focus |
global:core-primitives |
.5rem |
size-border-000 |
global:core-primitives |
0 |
size-border-100 |
global:core-primitives |
.0625rem |
size-border-200 |
global:core-primitives |
.125rem |
size-border-300 |
global:core-primitives |
.1875rem |
size-radius-000 |
global:core-primitives |
0 |
size-radius-100 |
global:core-primitives |
.125rem |
size-radius-200 |
global:core-primitives |
.25rem |
size-radius-300 |
global:core-primitives |
.375rem |
size-radius-400 |
global:core-primitives |
.5rem |
size-radius-500 |
global:core-primitives |
.75rem |
size-radius-600 |
global:core-primitives |
1rem |
size-radius-700 |
global:core-primitives |
1.25rem |
size-radius-800 |
global:core-primitives |
1.5rem |
size-radius-900 |
global:core-primitives |
2rem |
size-radius-full |
global:core-primitives |
625rem |
size-spacing-000 |
global:core-primitives |
0 |
size-spacing-100 |
global:core-primitives |
.25rem |
size-spacing-200 |
global:core-primitives |
.5rem |
size-spacing-300 |
global:core-primitives |
.75rem |
size-spacing-400 |
global:core-primitives |
1rem |
size-spacing-500 |
global:core-primitives |
1.25rem |
size-spacing-600 |
global:core-primitives |
1.5rem |
size-spacing-700 |
global:core-primitives |
2rem |
size-spacing-800 |
global:core-primitives |
2.5rem |
size-spacing-900 |
global:core-primitives |
3rem |
size-spacing-1000 |
global:core-primitives |
4rem |
typography-body-font-family |
global:semantics-roles |
var(--brand-font-base) |
typography-body-font-size |
global:semantics-roles |
var(--font-size-md) |
typography-body-font-weight |
global:semantics-roles |
var(--font-weight-400) |
typography-body-line-height |
global:semantics-roles |
var(--line-height-md) |
typography-code |
global:semantics-roles |
var(--font-family-mono) |
typography-heading-font-family |
global:semantics-roles |
var(--brand-font-lead) |
typography-heading-font-size-lg |
global:semantics-roles |
var(--font-size-lg) |
typography-heading-font-size-md |
global:semantics-roles |
var(--font-size-md) |
typography-heading-font-size-sm |
global:semantics-roles |
var(--font-size-sm) |
typography-heading-font-size-xl |
global:semantics-roles |
var(--font-size-xl) |
typography-heading-font-size-xs |
global:semantics-roles |
var(--font-size-xs) |
typography-heading-font-size-xxl |
global:semantics-roles |
var(--font-size-xxl) |
typography-heading-font-size-xxxl |
global:semantics-roles |
var(--font-size-xxxl) |
typography-heading-font-weight |
global:semantics-roles |
var(--font-weight-700) |
typography-heading-line-height-lg |
global:semantics-roles |
var(--line-height-lg) |
typography-heading-line-height-md |
global:semantics-roles |
var(--line-height-md) |
typography-heading-line-height-sm |
global:semantics-roles |
var(--line-height-sm) |
typography-heading-line-height-xl |
global:semantics-roles |
var(--line-height-xl) |
typography-heading-line-height-xs |
global:semantics-roles |
var(--line-height-xs) |
typography-heading-line-height-xxl |
global:semantics-roles |
var(--line-height-xxl) |
typography-heading-line-height-xxxl |
global:semantics-roles |
var(--line-height-xxxl) |
typography-label-font-family |
global:semantics-roles |
var(--brand-font-lead) |
typography-label-font-size |
global:semantics-roles |
var(--font-size-md) |
typography-label-font-weight |
global:semantics-roles |
var(--font-weight-600) |
typography-label-gap |
global:semantics-roles |
var(--size-spacing-200) |
typography-label-line-height |
global:semantics-roles |
var(--line-height-md) |
zindex-base |
global:core-primitives |
0 |
zindex-dropdown |
global:core-primitives |
1000 |
zindex-dropdown-base |
global:core-primitives |
900 |
zindex-fixed |
global:core-primitives |
1030 |
zindex-hidden |
global:core-primitives |
-1 |
zindex-modal |
global:core-primitives |
1050 |
zindex-modal-overlay |
global:core-primitives |
1040 |
zindex-popover |
global:core-primitives |
1060 |
zindex-raised |
global:core-primitives |
1 |
zindex-sticky |
global:core-primitives |
1020 |
zindex-tooltip |
global:core-primitives |
1070 |