Colours · Components
Slot-level overrides per component
Component tokens narrow semantic colours down to specific slots — button-primary-default-background, alert-error-stroke, tooltip-heading. They give every component a stable contract even as the underlying palette evolves.
Button
29 tokens
Button
29 tokens--button-primary-default-background
hsl(222.8 70.09% 41.96%)
--button-primary-pressed-background
hsl(222.8 70.09% 41.96%)
--button-primary-hover-background
hsl(223.18 75.86% 34.12%)
--button-primary-text
#ffffff
--button-primary-icon
#ffffff
--button-primary-outline-default-background
#ffffff
--button-primary-outline-pressed-background
#ffffff
--button-primary-outline-hover-background
hsl(225 80% 96.08%)
--button-primary-outline-border
hsl(222.8 70.09% 41.96%)
--button-primary-outline-text
hsl(222.8 70.09% 41.96%)
--button-primary-outline-icon
hsl(222.8 70.09% 41.96%)
--button-secondary-default-background
hsl(225 80% 96.08%)
--button-secondary-pressed-background
hsl(225 80% 96.08%)
--button-secondary-hover-background
hsl(221.82 80.49% 91.96%)
--button-secondary-text
hsl(222.8 70.09% 41.96%)
--button-secondary-icon
hsl(222.8 70.09% 41.96%)
--button-ghost-default-background
#ffffff
--button-ghost-pressed-background
#ffffff
--button-ghost-hover-background
hsl(225 80% 96.08%)
--button-ghost-text
hsl(222.8 70.09% 41.96%)
--button-ghost-icon
hsl(222.8 70.09% 41.96%)
--button-error-default-background
hsl(3.04 71.82% 43.14%)
--button-error-pressed-background
hsl(3.04 71.82% 43.14%)
--button-error-hover-background
hsl(2.13 77.05% 35.88%)
--button-error-text
hsl(3.53 80.95% 95.88%)
--button-error-icon
hsl(3.53 80.95% 95.88%)
--button-disabled-background
hsl(0 0% 85.1%)
--button-disabled-text
hsl(0 0% 61.96%)
--button-disabled-icon
hsl(0 0% 61.96%)
Alert
19 tokens
Alert
19 tokens--alert-default-trailing-icon
#000000
--alert-default-leading-icon
#000000
--alert-default-background
hsl(0 0% 96.08%)
--alert-default-stroke
hsl(0 0% 92.16%)
--alert-label-text
#000000
--alert-body
hsl(0 0% 38.82%)
--alert-cta
#000000
--alert-success-trailing-icon
#000000
--alert-success-leading-icon
hsl(125.14 50.24% 40.98%)
--alert-success-background
hsl(123 76.92% 94.9%)
--alert-success-stroke
hsl(125 78.26% 90.98%)
--alert-error-trailing-icon
#000000
--alert-error-leading-icon
hsl(3.04 71.82% 43.14%)
--alert-error-background
hsl(3.53 80.95% 95.88%)
--alert-error-stroke
hsl(3.87 75.61% 91.96%)
--alert-warning-trailing-icon
#000000
--alert-warning-leading-icon
hsl(47.94 95.33% 41.96%)
--alert-warning-background
hsl(46.96 92% 95.1%)
--alert-warning-stroke
hsl(48 86.96% 90.98%)
Checkbox
6 tokens
Checkbox
6 tokens--checkbox-text-label-text
#000000
--checkbox-text-subtext
hsl(0 0% 49.02%)
--checkbox-disabled-background
hsl(0 0% 96.08%)
--checkbox-disabled-stroke-icon
hsl(0 0% 85.1%)
--checkbox-active-background
hsl(225 80% 96.08%)
--checkbox-active-stroke-icon
hsl(222.8 70.09% 41.96%)
Radio
5 tokens
Radio
5 tokens--radio-text-label-text
#000000
--radio-disabled-background
hsl(0 0% 96.08%)
--radio-disabled-stroke-icon
hsl(0 0% 85.1%)
--radio-active-background
hsl(225 80% 96.08%)
--radio-active-stroke-icon
hsl(222.8 70.09% 41.96%)
Badge
52 tokens
Badge
52 tokens--badge-light-default-background
hsl(0 0% 96.08%)
--badge-light-default-stroke
hsl(0 0% 92.16%)
--badge-light-default-number-icon-bg
#000000
--badge-light-default-number-icon-text
#ffffff
--badge-light-success-background
hsl(125 78.26% 90.98%)
--badge-light-success-stroke
hsl(128.4 60.98% 83.92%)
--badge-light-success-number-icon-bg
hsl(125.14 50.24% 40.98%)
--badge-light-success-number-icon-text
hsl(123 76.92% 94.9%)
--badge-light-error-background
hsl(3.87 75.61% 91.96%)
--badge-light-error-stroke
hsl(3.33 75% 85.88%)
--badge-light-error-number-icon-bg
hsl(3.04 71.82% 43.14%)
--badge-light-error-number-icon-text
hsl(3.53 80.95% 95.88%)
--badge-light-warning-background
hsl(48 86.96% 90.98%)
--badge-light-warning-stroke
hsl(48.75 88.89% 85.88%)
--badge-light-warning-number-icon-bg
#000000
--badge-light-warning-number-icon-text
#ffffff
--badge-light-info-background
hsl(203.33 78.26% 90.98%)
--badge-light-info-stroke
hsl(203.61 75.31% 84.12%)
--badge-light-info-number-icon-bg
hsl(203.77 71.96% 41.96%)
--badge-light-info-number-icon-text
hsl(201.18 80.95% 95.88%)
--badge-leading-icon-black
#000000
--badge-leading-icon-white
#ffffff
--badge-leading-icon-static-black
#000000
--badge-leading-icon-static-white
#ffffff
--badge-trailing-icon-black
#000000
--badge-trailing-icon-white
#ffffff
--badge-trailing-icon-static-black
#000000
--badge-trailing-icon-static-white
#ffffff
--badge-text-black
#000000
--badge-text-white
#ffffff
--badge-text-static-black
#000000
--badge-text-static-white
#ffffff
--badge-heavy-default-background
hsl(0 0% 27.84%)
--badge-heavy-default-stroke
hsl(0 0% 12.16%)
--badge-heavy-default-number-icon-bg
#ffffff
--badge-heavy-default-number-icon-text
#000000
--badge-heavy-success-background
hsl(125.14 50.24% 40.98%)
--badge-heavy-success-stroke
hsl(125.19 49.69% 31.96%)
--badge-heavy-success-number-icon-bg
#ffffff
--badge-heavy-success-number-icon-text
hsl(125.14 50.24% 40.98%)
--badge-heavy-error-background
hsl(3.04 71.82% 43.14%)
--badge-heavy-error-stroke
hsl(2.13 77.05% 35.88%)
--badge-heavy-error-number-icon-bg
#ffffff
--badge-heavy-error-number-icon-text
hsl(3.04 71.82% 43.14%)
--badge-heavy-warning-background
hsl(49.09 81.96% 50%)
--badge-heavy-warning-stroke
hsl(47.94 95.33% 41.96%)
--badge-heavy-warning-number-icon-bg
#000000
--badge-heavy-warning-number-icon-text
#ffffff
--badge-heavy-info-background
hsl(203.77 71.96% 41.96%)
--badge-heavy-info-stroke
hsl(204.86 83.33% 32.94%)
--badge-heavy-info-number-icon-bg
#ffffff
--badge-heavy-info-number-icon-text
hsl(203.77 71.96% 41.96%)
Toggle
6 tokens
Toggle
6 tokens--toggle-track-bg-on
hsl(125.14 50.24% 40.98%)
--toggle-track-bg-default
hsl(0 0% 85.1%)
--toggle-track-bg-disabled
hsl(0 0% 85.1%)
--toggle-circle-bg-active
#ffffff
--toggle-circle-bg-dsabled
hsl(0 0% 92.16%)
--toggle-label-text
#000000
Tooltip
4 tokens
Tooltip
4 tokens--tooltip-trailing-icon
#000000
--tooltip-heading
#000000
--tooltip-subtext
hsl(0 0% 38.82%)
--tooltip-background
hsl(0 0% 96.08%)
EmptyStateCard
4 tokens
EmptyStateCard
4 tokens--empty-state-cards-label-text
#000000
--empty-state-cards-subtext
hsl(0 0% 38.82%)
--empty-state-cards-backgroung
hsl(0 0% 96.08%)
--empty-state-cards-stroke
hsl(0 0% 92.16%)
Tabs
4 tokens
Tabs
4 tokens--tabs-active-text
hsl(222.8 70.09% 41.96%)
--tabs-default-text
hsl(0 0% 38.82%)
--tabs-active-signifier
hsl(222.8 70.09% 41.96%)
--tabs-underline
hsl(0 0% 92.16%)
Switches
4 tokens
Switches
4 tokens--switches-active-text
hsl(222.8 70.09% 41.96%)
--switches-active-tab-bg
#ffffff
--switches-default-text
hsl(0 0% 38.82%)
--switches-track-bg
hsl(225 80% 96.08%)
Avatar
8 tokens
Avatar
8 tokens--avataar-background
hsl(0 0% 96.08%)
--avataar-stroke
hsl(0 0% 92.16%)
--avataar-icon-or-text
#000000
--avataar-notifier-bg-busy
hsl(3.04 71.82% 43.14%)
--avataar-notifier-bg-online
hsl(125.14 50.24% 40.98%)
--avataar-notifier-bg-away
hsl(49.09 81.96% 50%)
--avataar-notifier-bg-offline
hsl(0 0% 74.9%)
--avataar-notifier-stroke
#ffffff
TitleBar
10 tokens
TitleBar
10 tokens--title-bar-on-dark-surface-leading-icon
#ffffff
--title-bar-on-dark-surface-lable-text
#ffffff
--title-bar-on-dark-surface-subtext
hsl(0 0% 61.96%)
--title-bar-on-dark-surface-trailing-icon
#ffffff
--title-bar-on-dark-surface-background
#000000
--title-bar-on-light-surface-leading-icon
#000000
--title-bar-on-light-surface-lable-text
#000000
--title-bar-on-light-surface-subtext
hsl(0 0% 49.02%)
--title-bar-on-light-surface-trailing-icon
#000000
--title-bar-on-light-surface-background
#ffffff
InputField
15 tokens
InputField
15 tokens--input-fields-default-background
#ffffff
--input-fields-disabled-background
hsl(0 0% 96.08%)
--input-fields-label
#000000
--input-fields-default-stroke
hsl(0 0% 74.9%)
--input-fields-focused-stroke
hsl(222.8 70.09% 41.96%)
--input-fields-error-stroke
hsl(3.04 71.82% 43.14%)
--input-fields-helper-text-error
hsl(3.04 71.82% 43.14%)
--input-fields-default-body-text
hsl(0 0% 61.96%)
--input-fields-active-body-text
hsl(0 0% 27.84%)
--input-fields-helper-text
hsl(0 0% 27.84%)
--input-fields-active-trailing-icon
#000000
--input-fields-active-leading-icon
#000000
--input-fields-disabled-trailing-icon
hsl(0 0% 61.96%)
--input-fields-disabled-leading-icon
hsl(0 0% 61.96%)
--input-fields-cursor-indicator
hsl(0 0% 85.1%)