Appearance
Semantic colors mapped to light and dark: backgrounds, text, borders, and component states.
3D layer / swatch 1 / solid
Name
Token
Value
1
$appearance-3d-layer-swatch-1-solid-1
$core-color-iris-light-iris-6
2
$appearance-3d-layer-swatch-1-solid-2
$core-color-marine-light-marine-6
3
$appearance-3d-layer-swatch-1-solid-3
$core-color-purple-light-purple-5
4
$appearance-3d-layer-swatch-1-solid-4
$core-color-yellow-light-yellow-6
5
$appearance-3d-layer-swatch-1-solid-5
$core-color-orange-light-orange-6
6
$appearance-3d-layer-swatch-1-solid-6
$color-gray-neutral-light-6
3D layer / swatch 1 / tinted
Name
Token
Value
1
$appearance-3d-layer-swatch-1-tinted-1
$core-color-iris-light-alpha-iris-a3
2
$appearance-3d-layer-swatch-1-tinted-2
$core-color-marine-light-alpha-marine-a3
3
$appearance-3d-layer-swatch-1-tinted-3
$core-color-purple-light-alpha-purple-a3
4
$appearance-3d-layer-swatch-1-tinted-4
$core-color-yellow-light-alpha-yellow-a3
5
$appearance-3d-layer-swatch-1-tinted-5
$core-color-orange-light-alpha-orange-a3
3D layer / swatch 2
Name
Token
Value
1
$appearance-3d-layer-swatch-2-1
$core-color-purple-light-purple-7
2
$appearance-3d-layer-swatch-2-2
$core-color-iris-light-iris-6
3
$appearance-3d-layer-swatch-2-3
$core-color-blue-light-blue-6
4
$appearance-3d-layer-swatch-2-4
$core-color-sky-light-sky-4
5
$appearance-3d-layer-swatch-2-5
$core-color-marine-light-marine-6
6
$appearance-3d-layer-swatch-2-6
$color-gray-neutral-light-6
3D layer / swatch 3
Name
Token
Value
1
$appearance-3d-layer-swatch-3-1
$core-color-emerald-light-emerald-3
2
$appearance-3d-layer-swatch-3-2
$core-color-teal-light-teal-5
3
$appearance-3d-layer-swatch-3-3
$core-color-teal-light-teal-7
4
$appearance-3d-layer-swatch-3-4
$core-color-sky-light-sky-6
5
$appearance-3d-layer-swatch-3-5
$core-color-sky-light-sky-10
6
$appearance-3d-layer-swatch-3-6
$color-gray-neutral-light-6
3D layer / swatch 4
Name
Token
Value
1
$appearance-3d-layer-swatch-4-1
$core-color-iris-light-iris-5
2
$appearance-3d-layer-swatch-4-2
$core-color-blue-light-blue-5
3
$appearance-3d-layer-swatch-4-3
$core-color-marine-light-marine-6
4
$appearance-3d-layer-swatch-4-4
$core-color-emerald-light-emerald-5
5
$appearance-3d-layer-swatch-4-5
$core-color-green-light-green-4
6
$appearance-3d-layer-swatch-4-6
$color-gray-neutral-light-6
3D layer / swatch 5
Name
Token
Value
1
$appearance-3d-layer-swatch-5-1
$core-color-magenta-light-magenta-4
2
$appearance-3d-layer-swatch-5-2
$core-color-iris-light-iris-5
3
$appearance-3d-layer-swatch-5-3
$core-color-sky-light-sky-6
4
$appearance-3d-layer-swatch-5-4
$core-color-marine-light-marine-5
5
$appearance-3d-layer-swatch-5-5
$core-color-teal-light-teal-4
level 6
$appearance-3d-layer-swatch-5-level-6
$color-gray-neutral-light-6
3D layer / swatch 6
Name
Token
Value
1
$appearance-3d-layer-swatch-6-1
$core-color-marine-light-marine-11
2
$appearance-3d-layer-swatch-6-2
$core-color-teal-light-teal-6
3
$appearance-3d-layer-swatch-6-3
$core-color-yellow-light-yellow-5
4
$appearance-3d-layer-swatch-6-4
$core-color-orange-light-orange-5
5
$appearance-3d-layer-swatch-6-5
$core-color-orange-light-orange-10
6
$appearance-3d-layer-swatch-6-6
$color-gray-neutral-light-6
Background / accent / solid / base
Name
Token
Value
default
$appearance-background-accent-solid-base-default
$color-accent-accent-light-6
hover
$appearance-background-accent-solid-base-hover
$color-accent-accent-light-7
selected
$appearance-background-accent-solid-base-selected
$color-accent-accent-light-6
Background / accent / solid / high
Name
Token
Value
default
$appearance-background-accent-solid-high-default
$color-accent-accent-light-7
hover
$appearance-background-accent-solid-high-hover
$color-accent-accent-light-8
selected
$appearance-background-accent-solid-high-selected
$color-accent-accent-light-7
Background / accent / tinted / base
Name
Token
Value
default
$appearance-background-accent-tinted-base-default
$color-accent-accent-light-alpha-1
hover
$appearance-background-accent-tinted-base-hover
$color-accent-accent-light-alpha-2
selected
$appearance-background-accent-tinted-base-selected
$color-accent-accent-light-alpha-1
Background
Name
Token
Value
inverse
$appearance-background-inverse
$color-gray-neutral-light-11
primary
$appearance-background-primary
$color-gray-neutral-light-white
secondary
$appearance-background-secondary
$color-gray-neutral-light-2
surface
$appearance-background-surface
$color-gray-neutral-light-6
tertiary
$appearance-background-tertiary
$color-gray-neutral-light-4
Background / layering
Name
Token
Value
dark
$appearance-background-layering-dark
$color-gray-neutral-light-11
primary
$appearance-background-layering-primary
$appearance-background-primary
quaternary
$appearance-background-layering-quaternary
$appearance-background-primary
secondary
$appearance-background-layering-secondary
$appearance-background-primary
tertiary
$appearance-background-layering-tertiary
$appearance-background-primary
white
$appearance-background-layering-white
$appearance-variable-white
Background / overlay
Name
Token
Value
adaptive
$appearance-background-overlay-adaptive
$core-color-white-alpha-white-a1
black-20
$appearance-background-overlay-black-20
$color-gray-overlay-dark-6
black-40
$appearance-background-overlay-black-40
$color-gray-overlay-dark-6
black-60
$appearance-background-overlay-black-60
$color-gray-overlay-dark-8
black-70
$appearance-background-overlay-black-70
$color-gray-overlay-dark-9
black-80
$appearance-background-overlay-black-80
$color-gray-overlay-dark-10
blue-1
$appearance-background-overlay-blue-1
$core-color-blue-light-alpha-blue-a9
blue-2
$appearance-background-overlay-blue-2
$core-color-slate-light-alpha-slate-a7
blue-3
$appearance-background-overlay-blue-3
$core-color-blue-light-alpha-blue-a5
blue-4
$appearance-background-overlay-blue-4
$core-color-blue-light-alpha-blue-a5
white-5
$appearance-background-overlay-white-5
$core-color-white-alpha-white-a1
white-20
$appearance-background-overlay-white-20
$core-color-white-alpha-white-a4
white-30
$appearance-background-overlay-white-30
$core-color-white-alpha-white-a5
white-40
$appearance-background-overlay-white-40
$core-color-white-alpha-white-a6
white-60
$appearance-background-overlay-white-60
$core-color-white-alpha-white-a8
white-70
$appearance-background-overlay-white-70
$core-color-white-alpha-white-a9
white-80
$appearance-background-overlay-white-80
$core-color-white-alpha-white-a10
Background / semantic / error / solid / base
Name
Token
Value
default
$appearance-background-semantic-error-solid-base-default
$core-color-red-light-red-5
hover
$appearance-background-semantic-error-solid-base-hover
$core-color-red-light-red-6
selected
$appearance-background-semantic-error-solid-base-selected
$core-color-red-light-red-5
Background / semantic / error / solid / high
Name
Token
Value
default
$appearance-background-semantic-error-solid-high-default
$core-color-red-light-red-6
hover
$appearance-background-semantic-error-solid-high-hover
$core-color-red-light-red-7
selected
$appearance-background-semantic-error-solid-high-selected
$core-color-red-light-red-6
Background / semantic / error / tinted / base
Name
Token
Value
default
$appearance-background-semantic-error-tinted-base-default
$core-color-red-light-alpha-red-a2
hover
$appearance-background-semantic-error-tinted-base-hover
$core-color-red-light-alpha-red-a3
selected
$appearance-background-semantic-error-tinted-base-selected
$core-color-red-light-red-6
Background / semantic / error / tinted / high
Name
Token
Value
default
$appearance-background-semantic-error-tinted-high-default
$core-color-red-light-red-1
hover
$appearance-background-semantic-error-tinted-high-hover
$core-color-red-light-alpha-red-a3
selected
$appearance-background-semantic-error-tinted-high-selected
$core-color-red-light-red-6
Background / semantic / fuchsia / solid / base
Name
Token
Value
default
$appearance-background-semantic-fuchsia-solid-base-default
$core-color-fuchsia-light-fuchsia-5
hover
$appearance-background-semantic-fuchsia-solid-base-hover
$core-color-fuchsia-light-fuchsia-6
selected
$appearance-background-semantic-fuchsia-solid-base-selected
$core-color-fuchsia-light-fuchsia-5
Background / semantic / fuchsia / solid / high
Name
Token
Value
default
$appearance-background-semantic-fuchsia-solid-high-default
$core-color-fuchsia-light-fuchsia-6
hover
$appearance-background-semantic-fuchsia-solid-high-hover
$core-color-fuchsia-light-fuchsia-7
selected
$appearance-background-semantic-fuchsia-solid-high-selected
$core-color-fuchsia-light-fuchsia-6
Background / semantic / fuchsia / tinted / base
Name
Token
Value
default
$appearance-background-semantic-fuchsia-tinted-base-default
$core-color-fuchsia-light-alpha-fuchsia-a2
hover
$appearance-background-semantic-fuchsia-tinted-base-hover
$core-color-fuchsia-light-alpha-fuchsia-a3
selected
$appearance-background-semantic-fuchsia-tinted-base-selected
$core-color-fuchsia-light-fuchsia-6
Background / semantic / fuchsia / tinted / high
Name
Token
Value
default
$appearance-background-semantic-fuchsia-tinted-high-default
$core-color-fuchsia-light-fuchsia-2
hover
$appearance-background-semantic-fuchsia-tinted-high-hover
$core-color-fuchsia-light-alpha-fuchsia-a3
selected
$appearance-background-semantic-fuchsia-tinted-high-selected
$core-color-fuchsia-light-fuchsia-6
Background / semantic / indigo / solid / base
Name
Token
Value
default
$appearance-background-semantic-indigo-solid-base-default
$core-color-indigo-light-indigo-5
hover
$appearance-background-semantic-indigo-solid-base-hover
$core-color-indigo-light-indigo-6
selected
$appearance-background-semantic-indigo-solid-base-selected
$core-color-indigo-light-indigo-5
Background / semantic / indigo / solid / high
Name
Token
Value
default
$appearance-background-semantic-indigo-solid-high-default
$core-color-indigo-light-indigo-6
hover
$appearance-background-semantic-indigo-solid-high-hover
$core-color-indigo-light-indigo-7
selected
$appearance-background-semantic-indigo-solid-high-selected
$core-color-indigo-light-indigo-6
Background / semantic / indigo / tinted / base
Name
Token
Value
default
$appearance-background-semantic-indigo-tinted-base-default
$core-color-indigo-light-alpha-indigo-a2
hover
$appearance-background-semantic-indigo-tinted-base-hover
$core-color-indigo-light-alpha-indigo-a3
selected
$appearance-background-semantic-indigo-tinted-base-selected
$core-color-indigo-light-indigo-6
Background / semantic / indigo / tinted / high
Name
Token
Value
default
$appearance-background-semantic-indigo-tinted-high-default
$core-color-indigo-light-indigo-2
hover
$appearance-background-semantic-indigo-tinted-high-hover
$core-color-indigo-light-alpha-indigo-a3
selected
$appearance-background-semantic-indigo-tinted-high-selected
$core-color-indigo-light-indigo-6
Background / semantic / info / solid / base
Name
Token
Value
default
$appearance-background-semantic-info-solid-base-default
$core-color-marine-light-marine-5
hover
$appearance-background-semantic-info-solid-base-hover
$core-color-marine-light-marine-6
selected
$appearance-background-semantic-info-solid-base-selected
$core-color-marine-light-marine-5
Background / semantic / info / solid / high
Name
Token
Value
default
$appearance-background-semantic-info-solid-high-default
$core-color-marine-light-marine-6
hover
$appearance-background-semantic-info-solid-high-hover
$core-color-marine-light-marine-7
selected
$appearance-background-semantic-info-solid-high-selected
$core-color-marine-light-marine-6
Background / semantic / info / tinted / base
Name
Token
Value
default
$appearance-background-semantic-info-tinted-base-default
$core-color-marine-light-alpha-marine-a2
hover
$appearance-background-semantic-info-tinted-base-hover
$core-color-marine-light-alpha-marine-a3
selected
$appearance-background-semantic-info-tinted-base-selected
$core-color-marine-light-marine-6
Background / semantic / info / tinted / high
Name
Token
Value
default
$appearance-background-semantic-info-tinted-high-default
$core-color-marine-light-marine-2
hover
$appearance-background-semantic-info-tinted-high-hover
$core-color-marine-light-alpha-marine-a3
selected
$appearance-background-semantic-info-tinted-high-selected
$core-color-marine-light-marine-6
Background / semantic / neutral / solid / base
Name
Token
Value
default
$appearance-background-semantic-neutral-solid-base-default
$color-gray-neutral-light-5
disabled
$appearance-background-semantic-neutral-solid-base-disabled
$color-gray-neutral-light-3
hover
$appearance-background-semantic-neutral-solid-base-hover
$color-gray-neutral-light-6
selected
$appearance-background-semantic-neutral-solid-base-selected
$color-gray-neutral-light-5
Background / semantic / neutral / solid / high
Name
Token
Value
default
$appearance-background-semantic-neutral-solid-high-default
$color-gray-neutral-light-6
disabled
$appearance-background-semantic-neutral-solid-high-disabled
$color-gray-neutral-light-4
hover
$appearance-background-semantic-neutral-solid-high-hover
$color-gray-neutral-light-7
selected
$appearance-background-semantic-neutral-solid-high-selected
$color-gray-neutral-light-6
Background / semantic / neutral / tinted / base
Name
Token
Value
default
$appearance-background-semantic-neutral-tinted-base-default
$color-gray-neutral-light-alpha-4
hover
$appearance-background-semantic-neutral-tinted-base-hover
$color-gray-neutral-light-alpha-2
selected
$appearance-background-semantic-neutral-tinted-base-selected
$color-gray-neutral-light-2
Background / semantic / neutral / tinted / high
Name
Token
Value
default
$appearance-background-semantic-neutral-tinted-high-default
$color-gray-neutral-light-3
hover
$appearance-background-semantic-neutral-tinted-high-hover
$color-gray-neutral-light-2
selected
$appearance-background-semantic-neutral-tinted-high-selected
$color-gray-neutral-light-2
Background / semantic / omen / solid / base
Name
Token
Value
default
$appearance-background-semantic-omen-solid-base-default
$core-color-orange-light-orange-5
hover
$appearance-background-semantic-omen-solid-base-hover
$core-color-orange-light-orange-6
selected
$appearance-background-semantic-omen-solid-base-selected
$core-color-orange-light-orange-5
Background / semantic / omen / solid / high
Name
Token
Value
default
$appearance-background-semantic-omen-solid-high-default
$core-color-orange-light-orange-6
hover
$appearance-background-semantic-omen-solid-high-hover
$core-color-orange-light-orange-7
selected
$appearance-background-semantic-omen-solid-high-selected
$core-color-orange-light-orange-6
Background / semantic / omen / tinted / base
Name
Token
Value
default
$appearance-background-semantic-omen-tinted-base-default
$core-color-orange-light-alpha-orange-a2
hover
$appearance-background-semantic-omen-tinted-base-hover
$core-color-orange-light-alpha-orange-a3
selected
$appearance-background-semantic-omen-tinted-base-selected
$core-color-orange-light-orange-6
Background / semantic / omen / tinted / high
Name
Token
Value
default
$appearance-background-semantic-omen-tinted-high-default
$core-color-orange-light-orange-2
hover
$appearance-background-semantic-omen-tinted-high-hover
$core-color-orange-light-alpha-orange-a3
selected
$appearance-background-semantic-omen-tinted-high-selected
$core-color-orange-light-orange-6
Background / semantic / purple / solid / base
Name
Token
Value
default
$appearance-background-semantic-purple-solid-base-default
$core-color-purple-light-purple-5
hover
$appearance-background-semantic-purple-solid-base-hover
$core-color-purple-light-purple-6
selected
$appearance-background-semantic-purple-solid-base-selected
$core-color-purple-light-purple-5
Background / semantic / purple / solid / high
Name
Token
Value
default
$appearance-background-semantic-purple-solid-high-default
$core-color-purple-light-purple-6
hover
$appearance-background-semantic-purple-solid-high-hover
$core-color-purple-light-purple-7
selected
$appearance-background-semantic-purple-solid-high-selected
$core-color-purple-light-purple-6
Background / semantic / purple / tinted / base
Name
Token
Value
default
$appearance-background-semantic-purple-tinted-base-default
$core-color-purple-light-alpha-purple-a2
hover
$appearance-background-semantic-purple-tinted-base-hover
$core-color-purple-light-alpha-purple-a3
selected
$appearance-background-semantic-purple-tinted-base-selected
$core-color-purple-light-purple-6
Background / semantic / purple / tinted / high
Name
Token
Value
default
$appearance-background-semantic-purple-tinted-high-default
$core-color-purple-light-purple-3
hover
$appearance-background-semantic-purple-tinted-high-hover
$core-color-purple-light-alpha-purple-a3
selected
$appearance-background-semantic-purple-tinted-high-selected
$core-color-purple-light-purple-6
Background / semantic / sand / solid / base
Name
Token
Value
default
$appearance-background-semantic-sand-solid-base-default
$core-color-sand-light-sand-5
hover
$appearance-background-semantic-sand-solid-base-hover
$core-color-sand-light-sand-6
selected
$appearance-background-semantic-sand-solid-base-selected
$core-color-sand-light-sand-5
Background / semantic / sand / solid / high
Name
Token
Value
default
$appearance-background-semantic-sand-solid-high-default
$core-color-sand-light-sand-6
hover
$appearance-background-semantic-sand-solid-high-hover
$core-color-sand-light-sand-7
selected
$appearance-background-semantic-sand-solid-high-selected
$core-color-sand-light-sand-6
Background / semantic / sand / tinted / base
Name
Token
Value
default
$appearance-background-semantic-sand-tinted-base-default
$core-color-sand-light-alpha-sand-a1
hover
$appearance-background-semantic-sand-tinted-base-hover
$core-color-sand-light-alpha-sand-a2
selected
$appearance-background-semantic-sand-tinted-base-selected
$core-color-sand-light-sand-6
Background / semantic / success / solid / base
Name
Token
Value
default
$appearance-background-semantic-success-solid-base-default
$core-color-green-light-green-5
hover
$appearance-background-semantic-success-solid-base-hover
$core-color-green-light-green-6
selected
$appearance-background-semantic-success-solid-base-selected
$core-color-green-light-green-5
Background / semantic / success / solid / high
Name
Token
Value
default
$appearance-background-semantic-success-solid-high-default
$core-color-green-light-green-6
hover
$appearance-background-semantic-success-solid-high-hover
$core-color-green-light-green-7
selected
$appearance-background-semantic-success-solid-high-selected
$core-color-green-light-green-6
Background / semantic / success / tinted / base
Name
Token
Value
default
$appearance-background-semantic-success-tinted-base-default
$core-color-green-light-alpha-green-a1
hover
$appearance-background-semantic-success-tinted-base-hover
$core-color-green-light-alpha-green-a2
selected
$appearance-background-semantic-success-tinted-base-selected
$core-color-green-light-green-6
Background / semantic / success / tinted / high
Name
Token
Value
default
$appearance-background-semantic-success-tinted-high-default
$core-color-green-light-green-2
hover
$appearance-background-semantic-success-tinted-high-hover
$core-color-green-light-alpha-green-a2
selected
$appearance-background-semantic-success-tinted-high-selected
$core-color-green-light-green-6
Background / semantic / teal / solid / base
Name
Token
Value
default
$appearance-background-semantic-teal-solid-base-default
$core-color-teal-light-teal-5
hover
$appearance-background-semantic-teal-solid-base-hover
$core-color-teal-light-teal-6
selected
$appearance-background-semantic-teal-solid-base-selected
$core-color-teal-light-teal-5
Background / semantic / teal / solid / high
Name
Token
Value
default
$appearance-background-semantic-teal-solid-high-default
$core-color-teal-light-teal-6
hover
$appearance-background-semantic-teal-solid-high-hover
$core-color-teal-light-teal-7
selected
$appearance-background-semantic-teal-solid-high-selected
$core-color-teal-light-teal-6
Background / semantic / teal / tinted / base
Name
Token
Value
default
$appearance-background-semantic-teal-tinted-base-default
$core-color-teal-light-alpha-teal-a2
hover
$appearance-background-semantic-teal-tinted-base-hover
$core-color-teal-light-alpha-teal-a3
selected
$appearance-background-semantic-teal-tinted-base-selected
$core-color-teal-light-teal-6
Background / semantic / teal / tinted / high
Name
Token
Value
default
$appearance-background-semantic-teal-tinted-high-default
$core-color-teal-light-teal-2
hover
$appearance-background-semantic-teal-tinted-high-hover
$core-color-teal-light-alpha-teal-a3
selected
$appearance-background-semantic-teal-tinted-high-selected
$core-color-teal-light-teal-6
Background / semantic / warning / solid / base
Name
Token
Value
default
$appearance-background-semantic-warning-solid-base-default
$core-color-yellow-light-yellow-5
hover
$appearance-background-semantic-warning-solid-base-hover
$core-color-yellow-light-yellow-6
selected
$appearance-background-semantic-warning-solid-base-selected
$core-color-yellow-light-yellow-5
Background / semantic / warning / solid / high
Name
Token
Value
default
$appearance-background-semantic-warning-solid-high-default
$core-color-yellow-light-yellow-6
hover
$appearance-background-semantic-warning-solid-high-hover
$core-color-yellow-light-yellow-7
selected
$appearance-background-semantic-warning-solid-high-selected
$core-color-yellow-light-yellow-6
Background / semantic / warning / tinted / base
Name
Token
Value
default
$appearance-background-semantic-warning-tinted-base-default
$core-color-yellow-light-alpha-yellow-a2
hover
$appearance-background-semantic-warning-tinted-base-hover
$core-color-yellow-light-alpha-yellow-a3
selected
$appearance-background-semantic-warning-tinted-base-selected
$core-color-yellow-light-yellow-6
Background / semantic / warning / tinted / high
Name
Token
Value
default
$appearance-background-semantic-warning-tinted-high-default
$core-color-yellow-light-yellow-2
hover
$appearance-background-semantic-warning-tinted-high-hover
$core-color-yellow-light-alpha-yellow-a3
selected
$appearance-background-semantic-warning-tinted-high-selected
$core-color-yellow-light-yellow-6
Background / skeleton
Name
Token
Value
1
$appearance-background-skeleton-1
$color-gray-neutral-light-2
2
$appearance-background-skeleton-2
$color-gray-neutral-light-3
Border
Name
Token
Value
1
$appearance-border-1
$color-gray-neutral-light-2
2
$appearance-border-2
$color-gray-neutral-light-3
3
$appearance-border-3
$color-gray-neutral-light-4
4
$appearance-border-4
$color-gray-neutral-light-5
5
$appearance-border-5
$color-gray-neutral-light-6
6
$appearance-border-6
$appearance-background-overlay-blue-2
7
$appearance-border-7
$core-color-white-alpha-white-a2
8
$appearance-border-8
$core-color-black-alpha-black-a2
inverse
$appearance-border-inverse
$appearance-variable-white-to-dark
on accent
$appearance-border-on-accent
$appearance-variable-white
on subtle accent
$appearance-border-on-subtle-accent
$appearance-variable-dark
Border / accent
Name
Token
Value
default
$appearance-border-accent-default
$color-accent-accent-light-6
hover
$appearance-border-accent-hover
$color-accent-accent-light-6
intense
$appearance-border-accent-intense
$color-accent-accent-light-alpha-6
selected
$appearance-border-accent-selected
$color-accent-accent-light-6
subtle
$appearance-border-accent-subtle
$color-accent-accent-light-alpha-2
Border / connector
Name
Token
Value
accent
$appearance-border-connector-accent
$color-accent-accent-light-6
marine
$appearance-border-connector-marine
$core-color-marine-light-marine-6
purple
$appearance-border-connector-purple
$core-color-purple-light-purple-6
yellow
$appearance-border-connector-yellow
$core-color-yellow-light-yellow-6
Border / semantic / error / solid
Name
Token
Value
base
$appearance-border-semantic-error-solid-base
$core-color-red-light-red-5
high
$appearance-border-semantic-error-solid-high
$core-color-red-light-red-6
Border / semantic / error / tinted
Name
Token
Value
base
$appearance-border-semantic-error-tinted-base
$core-color-red-light-alpha-red-a4
Border / semantic / fuchsia
Name
Token
Value
solid
$appearance-border-semantic-fuchsia-solid
$core-color-fuchsia-light-fuchsia-6
tinted
$appearance-border-semantic-fuchsia-tinted
$core-color-fuchsia-light-alpha-fuchsia-a5
Border / semantic / info
Name
Token
Value
solid
$appearance-border-semantic-info-solid
$core-color-marine-light-marine-6
tinted
$appearance-border-semantic-info-tinted
$core-color-marine-light-alpha-marine-a4
Border / semantic / omen
Name
Token
Value
solid
$appearance-border-semantic-omen-solid
$core-color-orange-light-orange-6
tinted
$appearance-border-semantic-omen-tinted
$core-color-orange-light-alpha-orange-a4
Border / semantic / purple
Name
Token
Value
solid
$appearance-border-semantic-purple-solid
$core-color-purple-light-purple-6
tinted
$appearance-border-semantic-purple-tinted
$core-color-purple-light-alpha-purple-a5
Border / semantic / sand
Name
Token
Value
solid-1
$appearance-border-semantic-sand-solid-1
$core-color-sand-light-sand-7
solid-2
$appearance-border-semantic-sand-solid-2
$core-color-sand-light-sand-6
tinted-1
$appearance-border-semantic-sand-tinted-1
$core-color-sand-light-alpha-sand-a1
tinted-2
$appearance-border-semantic-sand-tinted-2
$core-color-sand-light-alpha-sand-a3
Border / semantic / success
Name
Token
Value
solid
$appearance-border-semantic-success-solid
$core-color-green-light-green-6
tinted
$appearance-border-semantic-success-tinted
$core-color-green-light-alpha-green-a4
Border / semantic / teal
Name
Token
Value
solid
$appearance-border-semantic-teal-solid
$core-color-teal-light-teal-6
tinted
$appearance-border-semantic-teal-tinted
$core-color-teal-light-alpha-teal-a4
Border / semantic / warning
Name
Token
Value
solid
$appearance-border-semantic-warning-solid
$core-color-yellow-light-yellow-6
tinted
$appearance-border-semantic-warning-tinted
$core-color-yellow-light-alpha-yellow-a6
Chart
Name
Token
Value
background 1
$appearance-chart-background-1
$color-gray-neutral-light-4
background 2
$appearance-chart-background-2
$color-gray-neutral-light-2
background 3
$appearance-chart-background-3
$color-gray-neutral-light-alpha-4
Chart / fall
Name
Token
Value
blue-1
$appearance-chart-fall-blue-1
$core-color-blue-light-blue-4
blue-2
$appearance-chart-fall-blue-2
$core-color-blue-light-blue-8
emerald-1
$appearance-chart-fall-emerald-1
$core-color-emerald-light-emerald-6
grass-1
$appearance-chart-fall-grass-1
$core-color-green-light-green-10
grey-1
$appearance-chart-fall-grey-1
$color-gray-neutral-light-8
orange-1
$appearance-chart-fall-orange-1
$core-color-orange-light-orange-3
sand-1
$appearance-chart-fall-sand-1
$core-color-sand-light-sand-3
sand-2
$appearance-chart-fall-sand-2
$core-color-sand-light-sand-10
sand-3
$appearance-chart-fall-sand-3
$core-color-sand-light-sand-6
sky-1
$appearance-chart-fall-sky-1
$core-color-sky-light-sky-8
teal-1
$appearance-chart-fall-teal-1
$core-color-teal-light-teal-8
yellow-1
$appearance-chart-fall-yellow-1
$core-color-yellow-light-yellow-11
Chart / monotone
Name
Token
Value
1
$appearance-chart-monotone-1
$color-accent-accent-light-1
2
$appearance-chart-monotone-2
$color-accent-accent-light-2
3
$appearance-chart-monotone-3
$color-accent-accent-light-3
4
$appearance-chart-monotone-4
$color-accent-accent-light-4
5
$appearance-chart-monotone-5
$color-accent-accent-light-5
6
$appearance-chart-monotone-6
$color-accent-accent-light-6
7
$appearance-chart-monotone-7
$color-accent-accent-light-7
8
$appearance-chart-monotone-8
$color-accent-accent-light-8
9
$appearance-chart-monotone-9
$color-accent-accent-light-9
10
$appearance-chart-monotone-10
$color-accent-accent-light-10
11
$appearance-chart-monotone-11
$color-accent-accent-light-11
a1
$appearance-chart-monotone-a1
$color-accent-accent-light-alpha-1
a2
$appearance-chart-monotone-a2
$color-accent-accent-light-alpha-2
a3
$appearance-chart-monotone-a3
$color-accent-accent-light-alpha-3
a4
$appearance-chart-monotone-a4
$color-accent-accent-light-alpha-4
a5
$appearance-chart-monotone-a5
$color-accent-accent-light-alpha-5
a6
$appearance-chart-monotone-a6
$color-accent-accent-light-alpha-6
a7
$appearance-chart-monotone-a7
$color-accent-accent-light-alpha-7
Chart / pastel
Name
Token
Value
blue
$appearance-chart-pastel-blue
$core-color-blue-light-blue-3
blue-alpha
$appearance-chart-pastel-blue-alpha
$core-color-blue-light-alpha-blue-a1
fuchia-alpha
$appearance-chart-pastel-fuchia-alpha
$core-color-fuchsia-light-alpha-fuchsia-a2
fuchsia
$appearance-chart-pastel-fuchsia
$core-color-fuchsia-light-fuchsia-4
grass
$appearance-chart-pastel-grass
$core-color-emerald-light-emerald-3
grass-alpha
$appearance-chart-pastel-grass-alpha
$core-color-emerald-light-alpha-emerald-a3
green
$appearance-chart-pastel-green
$core-color-green-light-green-3
green-alpha
$appearance-chart-pastel-green-alpha
$core-color-green-light-alpha-green-a2
iris
$appearance-chart-pastel-iris
$core-color-iris-light-iris-3
iris-alpha
$appearance-chart-pastel-iris-alpha
$core-color-iris-light-alpha-iris-a2
magenta
$appearance-chart-pastel-magenta
$core-color-magenta-light-magenta-4
magenta-alpha
$appearance-chart-pastel-magenta-alpha
$core-color-magenta-light-alpha-magenta-a2
marine
$appearance-chart-pastel-marine
$core-color-marine-light-marine-3
marine-alpha
$appearance-chart-pastel-marine-alpha
$core-color-marine-light-alpha-marine-a2
orange
$appearance-chart-pastel-orange
$core-color-orange-light-orange-3
orange-alpha
$appearance-chart-pastel-orange-alpha
$core-color-orange-light-alpha-orange-a3
purple
$appearance-chart-pastel-purple
$core-color-purple-light-purple-4
purple-alpha
$appearance-chart-pastel-purple-alpha
$core-color-purple-light-alpha-purple-a2
red
$appearance-chart-pastel-red
$core-color-red-light-red-3
red-alpha
$appearance-chart-pastel-red-alpha
$core-color-red-light-alpha-red-a1
sand
$appearance-chart-pastel-sand
$core-color-sand-light-sand-3
sand-alpha
$appearance-chart-pastel-sand-alpha
$core-color-sand-light-alpha-sand-a1
sky
$appearance-chart-pastel-sky
$core-color-sky-light-sky-3
sky-alpha
$appearance-chart-pastel-sky-alpha
$core-color-sky-light-alpha-sky-a2
teal
$appearance-chart-pastel-teal
$core-color-teal-light-teal-4
teal-alpha
$appearance-chart-pastel-teal-alpha
$core-color-teal-light-alpha-teal-a1
yellow
$appearance-chart-pastel-yellow
$core-color-yellow-light-yellow-4
yellow-alpha
$appearance-chart-pastel-yellow-alpha
$core-color-yellow-light-alpha-yellow-a3
Chart / spring
Name
Token
Value
blue
$appearance-chart-spring-blue
$core-color-blue-light-blue-4
emerald
$appearance-chart-spring-emerald
$core-color-emerald-light-emerald-3
green
$appearance-chart-spring-green
$core-color-green-light-green-4
grey
$appearance-chart-spring-grey
$color-gray-neutral-dark-10
magenta
$appearance-chart-spring-magenta
$core-color-magenta-light-magenta-4
sand
$appearance-chart-spring-sand
$core-color-sand-light-sand-3
sky
$appearance-chart-spring-sky
$core-color-sky-light-sky-3
yellow
$appearance-chart-spring-yellow
$core-color-yellow-light-yellow-4
Chart / vivid
Name
Token
Value
blue
$appearance-chart-vivid-blue
$core-color-blue-light-blue-6
blue-alpha
$appearance-chart-vivid-blue-alpha
$core-color-blue-light-alpha-blue-a1
emerald
$appearance-chart-vivid-emerald
$core-color-emerald-light-emerald-7
emerald-alpha
$appearance-chart-vivid-emerald-alpha
$core-color-emerald-light-alpha-emerald-a3
fuchia-alpha
$appearance-chart-vivid-fuchia-alpha
$core-color-fuchsia-light-alpha-fuchsia-a2
fuchsia
$appearance-chart-vivid-fuchsia
$core-color-fuchsia-light-fuchsia-7
green
$appearance-chart-vivid-green
$core-color-green-light-green-7
green-alpha
$appearance-chart-vivid-green-alpha
$core-color-green-light-alpha-green-a2
iris
$appearance-chart-vivid-iris
$core-color-iris-light-iris-6
iris-alpha
$appearance-chart-vivid-iris-alpha
$core-color-iris-light-alpha-iris-a2
magenta
$appearance-chart-vivid-magenta
$core-color-magenta-light-magenta-6
magenta-alpha
$appearance-chart-vivid-magenta-alpha
$core-color-magenta-light-alpha-magenta-a2
marine
$appearance-chart-vivid-marine
$core-color-marine-light-marine-7
marine-alpha
$appearance-chart-vivid-marine-alpha
$core-color-marine-light-alpha-marine-a2
orange
$appearance-chart-vivid-orange
$core-color-orange-light-orange-6
orange-alpha
$appearance-chart-vivid-orange-alpha
$core-color-orange-light-alpha-orange-a3
purple
$appearance-chart-vivid-purple
$core-color-purple-light-purple-6
purple-alpha
$appearance-chart-vivid-purple-alpha
$core-color-purple-light-alpha-purple-a2
red
$appearance-chart-vivid-red
$core-color-red-light-red-8
red-alpha
$appearance-chart-vivid-red-alpha
$core-color-red-light-alpha-red-a1
sand
$appearance-chart-vivid-sand
$core-color-sand-light-sand-7
sand-alpha
$appearance-chart-vivid-sand-alpha
$core-color-sand-light-alpha-sand-a1
sky
$appearance-chart-vivid-sky
$core-color-sky-light-sky-6
sky-alpha
$appearance-chart-vivid-sky-alpha
$core-color-sky-light-alpha-sky-a2
teal
$appearance-chart-vivid-teal
$core-color-teal-light-teal-6
teal-alpha
$appearance-chart-vivid-teal-alpha
$core-color-teal-light-alpha-teal-a1
yellow
$appearance-chart-vivid-yellow
$core-color-yellow-light-yellow-6
yellow-alpha
$appearance-chart-vivid-yellow-alpha
$core-color-yellow-light-alpha-yellow-a3
Component / avatar
Name
Token
Value
avatar-1
$appearance-component-avatar-avatar-1
$core-color-purple-light-purple-6
avatar-2
$appearance-component-avatar-avatar-2
$core-color-marine-light-marine-7
avatar-3
$appearance-component-avatar-avatar-3
$core-color-teal-light-teal-5
avatar-4
$appearance-component-avatar-avatar-4
$core-color-sky-light-sky-7
avatar-5
$appearance-component-avatar-avatar-5
$core-color-magenta-light-magenta-5
avatar-6
$appearance-component-avatar-avatar-6
$core-color-iris-light-iris-5
avatar-7
$appearance-component-avatar-avatar-7
$core-color-yellow-light-yellow-6
avatar-8
$appearance-component-avatar-avatar-8
$core-color-orange-light-orange-6
avatar-9
$appearance-component-avatar-avatar-9
$core-color-sand-light-sand-6
avatar-10
$appearance-component-avatar-avatar-10
$core-color-fuchsia-light-fuchsia-6
avatar-11
$appearance-component-avatar-avatar-11
$core-color-emerald-light-emerald-6
avatar-12
$appearance-component-avatar-avatar-12
$core-color-indigo-light-indigo-5
Component / axis
Name
Token
Value
X
$appearance-component-axis-x
$core-color-red-light-red-6
Y
$appearance-component-axis-y
$core-color-green-light-green-6
Z
$appearance-component-axis-z
$core-color-blue-light-blue-6
Component / chip
Name
Token
Value
bg-disabled
$appearance-component-chip-bg-disabled
$color-gray-neutral-light-5
icon-disabled
$appearance-component-chip-icon-disabled
$color-gray-neutral-light-9
text-disabled
$appearance-component-chip-text-disabled
$color-gray-neutral-light-9
Component / list / primary
Name
Token
Value
list-bg-hover
$appearance-component-list-primary-list-bg-hover
$core-color-blue-light-alpha-blue-a2
list-bg-selected
$appearance-component-list-primary-list-bg-selected
$core-color-blue-light-alpha-blue-a1
list-icon
$appearance-component-list-primary-list-icon
$core-color-blue-light-blue-6
list-text
$appearance-component-list-primary-list-text
$core-color-blue-light-blue-6
Component / list / secondary
Name
Token
Value
list-bg-hover
$appearance-component-list-secondary-list-bg-hover
$color-gray-neutral-light-alpha-4
list-bg-selected
$appearance-component-list-secondary-list-bg-selected
$color-gray-neutral-light-alpha-3
Component / slider
Name
Token
Value
slider-handle-bg
$appearance-component-slider-slider-handle-bg
$appearance-variable-white
slider-handle-border
$appearance-component-slider-slider-handle-border
$appearance-background-accent-solid-base-default
Component / tab
Name
Token
Value
selected
$appearance-component-tab-selected
$color-gray-neutral-light-11
Icon / accent
Name
Token
Value
default
$appearance-icon-accent-default
$color-accent-accent-light-6
disabled
$appearance-icon-accent-disabled
$color-gray-neutral-light-7
hover
$appearance-icon-accent-hover
$color-accent-accent-light-6
selected
$appearance-icon-accent-selected
$color-accent-accent-light-6
subtle
$appearance-icon-accent-subtle
$color-accent-accent-light-3
Icon / domain
Name
Token
Value
access-control
$appearance-icon-domain-access-control
$core-color-magenta-light-magenta-6
fire
$appearance-icon-domain-fire
$core-color-orange-light-orange-6
hvac
$appearance-icon-domain-hvac
$core-color-marine-light-marine-6
intrusion-detection
$appearance-icon-domain-intrusion-detection
$core-color-red-light-red-6
lift
$appearance-icon-domain-lift
$core-color-purple-light-purple-6
lighting
$appearance-icon-domain-lighting
$core-color-yellow-light-yellow-6
power
$appearance-icon-domain-power
$core-color-emerald-light-emerald-6
security
$appearance-icon-domain-security
$core-color-iris-light-iris-6
video-fuel
$appearance-icon-domain-video-fuel
$core-color-teal-light-teal-6
waste-bwc
$appearance-icon-domain-waste-bwc
$core-color-sand-light-sand-6
Icon
Name
Token
Value
inverse
$appearance-icon-inverse
$appearance-variable-dark-to-white
on accent
$appearance-icon-on-accent
$appearance-variable-white
on subtle accent
$appearance-icon-on-subtle-accent
$appearance-variable-dark
overlay
$appearance-icon-overlay
$core-color-black-alpha-black-a9
primary
$appearance-icon-primary
$color-gray-neutral-light-11
quaternary
$appearance-icon-quaternary
$color-gray-neutral-light-5
secondary
$appearance-icon-secondary
$color-gray-neutral-light-7
tertiary
$appearance-icon-tertiary
$color-gray-neutral-light-6
Icon / link
Name
Token
Value
rested
$appearance-icon-link-rested
$appearance-text-tertiary
visited
$appearance-icon-link-visited
$core-color-purple-light-purple-6
Icon / semantic / error / base
Name
Token
Value
default
$appearance-icon-semantic-error-base-default
$core-color-red-light-red-5
hover
$appearance-icon-semantic-error-base-hover
$core-color-red-light-red-7
selected
$appearance-icon-semantic-error-base-selected
$core-color-red-light-red-7
Icon / semantic / error / high
Name
Token
Value
default
$appearance-icon-semantic-error-high-default
$core-color-red-light-red-8
hover
$appearance-icon-semantic-error-high-hover
$core-color-red-light-red-7
selected
$appearance-icon-semantic-error-high-selected
$core-color-red-light-red-7
Icon / semantic / error / medium
Name
Token
Value
default
$appearance-icon-semantic-error-medium-default
$core-color-red-light-red-6
hover
$appearance-icon-semantic-error-medium-hover
$core-color-red-light-red-7
selected
$appearance-icon-semantic-error-medium-selected
$core-color-red-light-red-7
Icon / semantic / error / tinted
Name
Token
Value
default
$appearance-icon-semantic-error-tinted-default
$core-color-red-light-red-3
hover
$appearance-icon-semantic-error-tinted-hover
$core-color-red-light-red-7
selected
$appearance-icon-semantic-error-tinted-selected
$core-color-red-light-red-7
Icon / semantic / fuchsia / base
Name
Token
Value
default
$appearance-icon-semantic-fuchsia-base-default
$core-color-fuchsia-light-fuchsia-5
hover
$appearance-icon-semantic-fuchsia-base-hover
$core-color-fuchsia-light-fuchsia-6
selected
$appearance-icon-semantic-fuchsia-base-selected
$core-color-fuchsia-light-fuchsia-5
Icon / semantic / fuchsia / high
Name
Token
Value
default
$appearance-icon-semantic-fuchsia-high-default
$core-color-fuchsia-light-fuchsia-8
hover
$appearance-icon-semantic-fuchsia-high-hover
$core-color-fuchsia-light-fuchsia-9
selected
$appearance-icon-semantic-fuchsia-high-selected
$core-color-fuchsia-light-fuchsia-8
Icon / semantic / fuchsia / medium
Name
Token
Value
default
$appearance-icon-semantic-fuchsia-medium-default
$core-color-fuchsia-light-fuchsia-6
hover
$appearance-icon-semantic-fuchsia-medium-hover
$core-color-fuchsia-light-fuchsia-7
selected
$appearance-icon-semantic-fuchsia-medium-selected
$core-color-fuchsia-light-fuchsia-6
Icon / semantic / indigo / base
Name
Token
Value
default
$appearance-icon-semantic-indigo-base-default
$core-color-indigo-light-indigo-5
hover
$appearance-icon-semantic-indigo-base-hover
$core-color-indigo-light-indigo-6
selected
$appearance-icon-semantic-indigo-base-selected
$core-color-indigo-light-indigo-5
Icon / semantic / indigo / high
Name
Token
Value
default
$appearance-icon-semantic-indigo-high-default
$core-color-indigo-light-indigo-8
hover
$appearance-icon-semantic-indigo-high-hover
$core-color-indigo-light-indigo-9
selected
$appearance-icon-semantic-indigo-high-selected
$core-color-indigo-light-indigo-8
Icon / semantic / indigo / medium
Name
Token
Value
default
$appearance-icon-semantic-indigo-medium-default
$core-color-indigo-light-indigo-6
hover
$appearance-icon-semantic-indigo-medium-hover
$core-color-indigo-light-indigo-7
selected
$appearance-icon-semantic-indigo-medium-selected
$core-color-indigo-light-indigo-6
Icon / semantic / info / base
Name
Token
Value
default
$appearance-icon-semantic-info-base-default
$core-color-marine-light-marine-5
hover
$appearance-icon-semantic-info-base-hover
$core-color-marine-light-marine-7
selected
$appearance-icon-semantic-info-base-selected
$core-color-marine-light-marine-4
Icon / semantic / info / high
Name
Token
Value
default
$appearance-icon-semantic-info-high-default
$core-color-marine-light-marine-8
hover
$appearance-icon-semantic-info-high-hover
$core-color-marine-light-marine-7
selected
$appearance-icon-semantic-info-high-selected
$core-color-marine-light-marine-4
Icon / semantic / info / medium
Name
Token
Value
default
$appearance-icon-semantic-info-medium-default
$core-color-marine-light-marine-6
hover
$appearance-icon-semantic-info-medium-hover
$core-color-marine-light-marine-7
selected
$appearance-icon-semantic-info-medium-selected
$core-color-marine-light-marine-4
Icon / semantic / info / tinted
Name
Token
Value
default
$appearance-icon-semantic-info-tinted-default
$core-color-marine-light-marine-3
hover
$appearance-icon-semantic-info-tinted-hover
$core-color-marine-light-marine-7
selected
$appearance-icon-semantic-info-tinted-selected
$core-color-marine-light-marine-4
Icon / semantic / omen / base
Name
Token
Value
default
$appearance-icon-semantic-omen-base-default
$core-color-orange-light-orange-5
hover
$appearance-icon-semantic-omen-base-hover
$core-color-orange-light-orange-7
selected
$appearance-icon-semantic-omen-base-selected
$core-color-orange-light-orange-7
Icon / semantic / omen / high
Name
Token
Value
default
$appearance-icon-semantic-omen-high-default
$core-color-orange-light-orange-8
hover
$appearance-icon-semantic-omen-high-hover
$core-color-orange-light-orange-7
selected
$appearance-icon-semantic-omen-high-selected
$core-color-orange-light-orange-7
Icon / semantic / omen / medium
Name
Token
Value
default
$appearance-icon-semantic-omen-medium-default
$core-color-orange-light-orange-6
hover
$appearance-icon-semantic-omen-medium-hover
$core-color-orange-light-orange-7
selected
$appearance-icon-semantic-omen-medium-selected
$core-color-orange-light-orange-7
Icon / semantic / omen / tinted
Name
Token
Value
default
$appearance-icon-semantic-omen-tinted-default
$core-color-orange-light-orange-3
hover
$appearance-icon-semantic-omen-tinted-hover
$core-color-orange-light-orange-7
selected
$appearance-icon-semantic-omen-tinted-selected
$core-color-orange-light-orange-7
Icon / semantic / purple / base
Name
Token
Value
default
$appearance-icon-semantic-purple-base-default
$core-color-purple-light-purple-5
hover
$appearance-icon-semantic-purple-base-hover
$core-color-purple-light-purple-7
selected
$appearance-icon-semantic-purple-base-selected
$core-color-purple-light-purple-7
Icon / semantic / purple / high
Name
Token
Value
default
$appearance-icon-semantic-purple-high-default
$core-color-purple-light-purple-8
hover
$appearance-icon-semantic-purple-high-hover
$core-color-purple-light-purple-7
selected
$appearance-icon-semantic-purple-high-selected
$core-color-purple-light-purple-7
Icon / semantic / purple / medium
Name
Token
Value
default
$appearance-icon-semantic-purple-medium-default
$core-color-purple-light-purple-6
hover
$appearance-icon-semantic-purple-medium-hover
$core-color-purple-light-purple-7
selected
$appearance-icon-semantic-purple-medium-selected
$core-color-purple-light-purple-7
Icon / semantic / sand / base
Name
Token
Value
default
$appearance-icon-semantic-sand-base-default
$core-color-sand-light-sand-5
hover
$appearance-icon-semantic-sand-base-hover
$core-color-sand-light-sand-6
selected
$appearance-icon-semantic-sand-base-selected
$core-color-sand-light-sand-5
Icon / semantic / sand / high
Name
Token
Value
default
$appearance-icon-semantic-sand-high-default
$core-color-sand-light-sand-8
hover
$appearance-icon-semantic-sand-high-hover
$core-color-sand-light-sand-9
selected
$appearance-icon-semantic-sand-high-selected
$core-color-sand-light-sand-8
Icon / semantic / sand / medium
Name
Token
Value
default
$appearance-icon-semantic-sand-medium-default
$core-color-sand-light-sand-6
hover
$appearance-icon-semantic-sand-medium-hover
$core-color-sand-light-sand-7
selected
$appearance-icon-semantic-sand-medium-selected
$core-color-sand-light-sand-6
Icon / semantic / success / base
Name
Token
Value
default
$appearance-icon-semantic-success-base-default
$core-color-green-light-green-5
hover
$appearance-icon-semantic-success-base-hover
$core-color-green-light-green-7
selected
$appearance-icon-semantic-success-base-selected
$core-color-green-light-green-7
Icon / semantic / success / high
Name
Token
Value
default
$appearance-icon-semantic-success-high-default
$core-color-green-light-green-8
hover
$appearance-icon-semantic-success-high-hover
$core-color-green-light-green-7
selected
$appearance-icon-semantic-success-high-selected
$core-color-green-light-green-7
Icon / semantic / success / medium
Name
Token
Value
default
$appearance-icon-semantic-success-medium-default
$core-color-green-light-green-6
hover
$appearance-icon-semantic-success-medium-hover
$core-color-green-light-green-7
selected
$appearance-icon-semantic-success-medium-selected
$core-color-green-light-green-7
Icon / semantic / success / tinted
Name
Token
Value
default
$appearance-icon-semantic-success-tinted-default
$core-color-green-light-green-4
hover
$appearance-icon-semantic-success-tinted-hover
$core-color-green-light-green-7
selected
$appearance-icon-semantic-success-tinted-selected
$core-color-green-light-green-7
Icon / semantic / teal / base
Name
Token
Value
default
$appearance-icon-semantic-teal-base-default
$core-color-teal-light-teal-5
hover
$appearance-icon-semantic-teal-base-hover
$core-color-teal-light-teal-6
selected
$appearance-icon-semantic-teal-base-selected
$core-color-teal-light-teal-5
Icon / semantic / teal / high
Name
Token
Value
default
$appearance-icon-semantic-teal-high-default
$core-color-teal-light-teal-8
hover
$appearance-icon-semantic-teal-high-hover
$core-color-teal-light-teal-9
selected
$appearance-icon-semantic-teal-high-selected
$core-color-teal-light-teal-8
Icon / semantic / teal / medium
Name
Token
Value
default
$appearance-icon-semantic-teal-medium-default
$core-color-teal-light-teal-6
hover
$appearance-icon-semantic-teal-medium-hover
$core-color-teal-light-teal-7
selected
$appearance-icon-semantic-teal-medium-selected
$core-color-teal-light-teal-6
Icon / semantic / warning / base
Name
Token
Value
default
$appearance-icon-semantic-warning-base-default
$core-color-yellow-light-yellow-8
hover
$appearance-icon-semantic-warning-base-hover
$core-color-yellow-light-yellow-5
selected
$appearance-icon-semantic-warning-base-selected
$core-color-yellow-light-yellow-7
Icon / semantic / warning / high
Name
Token
Value
default
$appearance-icon-semantic-warning-high-default
$core-color-yellow-light-yellow-6
hover
$appearance-icon-semantic-warning-high-hover
$core-color-yellow-light-yellow-5
selected
$appearance-icon-semantic-warning-high-selected
$core-color-yellow-light-yellow-7
Icon / semantic / warning / medium
Name
Token
Value
default
$appearance-icon-semantic-warning-medium-default
$core-color-yellow-light-yellow-7
hover
$appearance-icon-semantic-warning-medium-hover
$core-color-yellow-light-yellow-5
selected
$appearance-icon-semantic-warning-medium-selected
$core-color-yellow-light-yellow-7
Icon / semantic / warning / tinted
Name
Token
Value
default
$appearance-icon-semantic-warning-tinted-default
$core-color-yellow-light-yellow-4
hover
$appearance-icon-semantic-warning-tinted-hover
$core-color-yellow-light-yellow-5
selected
$appearance-icon-semantic-warning-tinted-selected
$core-color-yellow-light-yellow-7
Logo
Name
Token
Value
24k-accent
$appearance-logo-24k-accent
$core-color-sky-light-sky-4
24k-text
$appearance-logo-24k-text
$appearance-variable-dark
sj-blue
$appearance-logo-sj-blue
$core-color-blue-light-blue-6
sj-impact red
$appearance-logo-sj-impact-red
$core-color-red-light-red-6
sj-neutral
$appearance-logo-sj-neutral
$color-gray-neutral-light-white
Text / accent
Name
Token
Value
default
$appearance-text-accent-default
$color-accent-accent-light-6
disabled
$appearance-text-accent-disabled
$color-gray-neutral-light-7
hover
$appearance-text-accent-hover
$color-accent-accent-light-6
selected
$appearance-text-accent-selected
$color-accent-accent-light-6
subtle
$appearance-text-accent-subtle
$color-accent-accent-light-3
Text / domain
Name
Token
Value
access-control
$appearance-text-domain-access-control
$core-color-magenta-light-magenta-6
fire
$appearance-text-domain-fire
$core-color-orange-light-orange-6
hvac
$appearance-text-domain-hvac
$core-color-marine-light-marine-6
intrusion-detection
$appearance-text-domain-intrusion-detection
$core-color-red-light-red-6
lift
$appearance-text-domain-lift
$core-color-purple-light-purple-6
lighting
$appearance-text-domain-lighting
$core-color-yellow-light-yellow-6
power
$appearance-text-domain-power
$core-color-emerald-light-emerald-6
security
$appearance-text-domain-security
$core-color-iris-light-iris-6
video-fuel
$appearance-text-domain-video-fuel
$core-color-teal-light-teal-6
waste
$appearance-text-domain-waste
$core-color-sand-light-sand-6
Text
Name
Token
Value
inverse
$appearance-text-inverse
$appearance-variable-dark-to-white
on accent
$appearance-text-on-accent
$appearance-variable-white
on subtle accent
$appearance-text-on-subtle-accent
$appearance-variable-dark
overlay
$appearance-text-overlay
$core-color-black-alpha-black-a9
primary
$appearance-text-primary
$color-gray-neutral-light-11
quaternary
$appearance-text-quaternary
$color-gray-neutral-light-5
secondary
$appearance-text-secondary
$color-gray-neutral-light-7
tertiary
$appearance-text-tertiary
$color-gray-neutral-light-6
Text / link
Name
Token
Value
rested
$appearance-text-link-rested
$appearance-text-tertiary
visited
$appearance-text-link-visited
$core-color-purple-light-purple-6
Text / semantic / error / base
Name
Token
Value
default
$appearance-text-semantic-error-base-default
$core-color-red-light-red-5
hover
$appearance-text-semantic-error-base-hover
$core-color-red-light-red-7
selected
$appearance-text-semantic-error-base-selected
$core-color-red-light-red-4
Text / semantic / error / high
Name
Token
Value
default
$appearance-text-semantic-error-high-default
$core-color-red-light-red-8
hover
$appearance-text-semantic-error-high-hover
$core-color-red-light-red-7
selected
$appearance-text-semantic-error-high-selected
$core-color-red-light-red-4
Text / semantic / error / medium
Name
Token
Value
default
$appearance-text-semantic-error-medium-default
$core-color-red-light-red-6
hover
$appearance-text-semantic-error-medium-hover
$core-color-red-light-red-7
selected
$appearance-text-semantic-error-medium-selected
$core-color-red-light-red-4
Text / semantic / info / base
Name
Token
Value
default
$appearance-text-semantic-info-base-default
$core-color-marine-light-marine-5
hover
$appearance-text-semantic-info-base-hover
$core-color-marine-light-marine-7
selected
$appearance-text-semantic-info-base-selected
$core-color-marine-light-marine-7
Text / semantic / info / high
Name
Token
Value
default
$appearance-text-semantic-info-high-default
$core-color-marine-light-marine-8
hover
$appearance-text-semantic-info-high-hover
$core-color-marine-light-marine-7
selected
$appearance-text-semantic-info-high-selected
$core-color-marine-light-marine-7
Text / semantic / info / medium
Name
Token
Value
default
$appearance-text-semantic-info-medium-default
$core-color-marine-light-marine-6
hover
$appearance-text-semantic-info-medium-hover
$core-color-marine-light-marine-7
selected
$appearance-text-semantic-info-medium-selected
$core-color-marine-light-marine-7
Text / semantic / omen / base
Name
Token
Value
default
$appearance-text-semantic-omen-base-default
$core-color-orange-light-orange-5
hover
$appearance-text-semantic-omen-base-hover
$core-color-orange-light-orange-7
selected
$appearance-text-semantic-omen-base-selected
$core-color-orange-light-orange-7
Text / semantic / omen / high
Name
Token
Value
default
$appearance-text-semantic-omen-high-default
$core-color-orange-light-orange-8
hover
$appearance-text-semantic-omen-high-hover
$core-color-orange-light-orange-7
selected
$appearance-text-semantic-omen-high-selected
$core-color-orange-light-orange-7
Text / semantic / omen / medium
Name
Token
Value
default
$appearance-text-semantic-omen-medium-default
$core-color-orange-light-orange-6
hover
$appearance-text-semantic-omen-medium-hover
$core-color-orange-light-orange-7
selected
$appearance-text-semantic-omen-medium-selected
$core-color-orange-light-orange-7
Text / semantic / purple / base
Name
Token
Value
default
$appearance-text-semantic-purple-base-default
$core-color-purple-light-purple-5
hover
$appearance-text-semantic-purple-base-hover
$core-color-purple-light-purple-7
selected
$appearance-text-semantic-purple-base-selected
$core-color-purple-light-purple-7
Text / semantic / purple / high
Name
Token
Value
default
$appearance-text-semantic-purple-high-default
$core-color-purple-light-purple-8
hover
$appearance-text-semantic-purple-high-hover
$core-color-purple-light-purple-7
selected
$appearance-text-semantic-purple-high-selected
$core-color-purple-light-purple-7
Text / semantic / purple / medium
Name
Token
Value
default
$appearance-text-semantic-purple-medium-default
$core-color-purple-light-purple-6
hover
$appearance-text-semantic-purple-medium-hover
$core-color-purple-light-purple-7
selected
$appearance-text-semantic-purple-medium-selected
$core-color-purple-light-purple-7
Text / semantic / success / base
Name
Token
Value
default
$appearance-text-semantic-success-base-default
$core-color-green-light-green-5
hover
$appearance-text-semantic-success-base-hover
$core-color-green-light-green-7
selected
$appearance-text-semantic-success-base-selected
$core-color-green-light-green-7
Text / semantic / success / high
Name
Token
Value
default
$appearance-text-semantic-success-high-default
$core-color-green-light-green-8
hover
$appearance-text-semantic-success-high-hover
$core-color-green-light-green-7
selected
$appearance-text-semantic-success-high-selected
$core-color-green-light-green-7
Text / semantic / success / medium
Name
Token
Value
default
$appearance-text-semantic-success-medium-default
$core-color-green-light-green-6
hover
$appearance-text-semantic-success-medium-hover
$core-color-green-light-green-7
selected
$appearance-text-semantic-success-medium-selected
$core-color-green-light-green-7
Text / semantic / warning / base
Name
Token
Value
default
$appearance-text-semantic-warning-base-default
$core-color-yellow-light-yellow-8
hover
$appearance-text-semantic-warning-base-hover
$core-color-yellow-light-yellow-5
selected
$appearance-text-semantic-warning-base-selected
$core-color-yellow-light-yellow-7
Text / semantic / warning / high
Name
Token
Value
default
$appearance-text-semantic-warning-high-default
$core-color-yellow-light-yellow-6
hover
$appearance-text-semantic-warning-high-hover
$core-color-yellow-light-yellow-5
selected
$appearance-text-semantic-warning-high-selected
$core-color-yellow-light-yellow-7
Text / semantic / warning / medium
Name
Token
Value
default
$appearance-text-semantic-warning-medium-default
$core-color-yellow-light-yellow-7
hover
$appearance-text-semantic-warning-medium-hover
$core-color-yellow-light-yellow-5
selected
$appearance-text-semantic-warning-medium-selected
$core-color-yellow-light-yellow-7
Variable
Name
Token
Value
dark
$appearance-variable-dark
$color-gray-neutral-light-11
dark-to-white
$appearance-variable-dark-to-white
$color-gray-neutral-light-1
white
$appearance-variable-white
$color-gray-neutral-light-white
white-to-dark
$appearance-variable-white-to-dark
$color-gray-neutral-light-11