Semantic Tokens
Tokens
Colors
SCSS Variable
Value
$bds-placeholder-color
--color-grey-70$bds-placeholder-color-hover
--color-grey-90$bds-placeholder-color--locked
--color-grey-80$bds-brand-primary-color
--bds-brand-primary-color$bds-brand-color-hovered
--bds-brand-color-hovered$bds-brand-color-locked
--bds-brand-primary-color-locked$bds-brand-color-locked-lowContrast
--bds-brand-primary-color-locked-lowContrast$bds-branding-light-color
--color-grey-98$bds-branding-dark-color
--color-grey-25$bds-primaryText-color
--color-grey-25$bds-primaryText-color--locked
--color-grey-70$bds-secondaryText-color
--color-grey-40$bds-tertiaryText-color
--color-grey-54$bds-color-error
--color-red-50$bds-color-info
--color-blue-45$bds-color-light
--color-grey-98$bds-color-success
--color-green-50$bds-color-warning
--color-ochre-70$bds-input-bgColor
--color-grey-93$bds-brand-primary-bgColor
--bds-brand-primary-color$bds-untapped-bgColor
--color-grey-90$bds-cta-bgColor
--color-grape-86$bds-cta-bgColor-locked
--color-grape-90$bds-outline-focus
--color-azure-45$bds-outline-focus-light
--color-azure-80$bds-componentDetail-bgColor
--color-grey-98$bds-componentDetail-bgColor--locked
--color-grey-86$bds-componentDetail-dark-bgColor
--color-grey-86$bds-componentDetail-dark-bgColor--hovered
--color-grey-80$bds-bgColor-main
--color-grey-93$bds-bgColor-error
--color-red-95$bds-bgColor-info
--color-blue-95$bds-bgColor-light
--color-grey-90$bds-bgColor-success
--color-green-95$bds-bgColor-warning
--color-ochre-95$bds-greyscale-bgColor--hover
--grey-90$bds-greyscale-bgColor--active
--color-grey-90$bds-greyscale-bgColor--locked
--grey-95$bds-brand-bgColor--locked
--bds-brand-bgColor--locked$bds-untapped-bgColor-locked
--color-grey-86$bds-floating-bgColor
--color-grey-98$bds-tooltip-bgColor
--color-grey-25$bds-brand-bgColor-selected
--primary-bgColor-selected$bds-greyscale-bgColor-hover
--color-grey-90$bds-selected-bgColor
--color-gradient-glass-1-color$bds-container-bgColor--locked
--color-grey-90$bds-input-outline-color-locked
--color-grey-86$bds-outline-color-locked
--color-grey-86$bds-outline-color-focus
--color-azure-45$bds-secondary-outline-color
--color-grey-86$bds-image-outline-color-light
--color-gradient-glass-1-color$bds-image-overlay
--color-gradient-glass-2-gradient$bds-image-overlay-locked
--color-gradient-glass-4-color$bds-image-overlay-brand-color--locked
--color-gradient-glass-1-lila-colorEffects
SCSS Variable
Value
$bds-input-tiny-boxShadow
--die-cut-05$bds-input-tiny-boxShadow-hovered
--die-cut-1$bds-componentDetail-floating-boxShadow
--elevation-1$bds-componentDetail-floating-boxShadow-hovered
--elevation-2$bds-flatElement-hovered
--embossed-1--grey-98$bds-input-boxShadow
--debossed-1--grey-95$bds-input-boxShadow--hovered
--debossed-2--grey-95$bds-emphasis-boxShadow
--embossed-2--grey-98$bds-emphasis-boxShadow-hovered
--embossed-4--grey-98$bds-cta-boxShadow-hovered
--embossed-6--grey-95$bds-emphasis-boxShadow--active
--bds-emphasis-boxShadow--active$bds-menuElement-floating-boxShadow
--elevation-4$bds-draggable-item-boxShadow
--elevation-05$bds-draggable-item-boxShadow-hovered
--elevation-1$bds-draggable-item-boxShadow-dragged
--elevation-2$bds-clickable-item-boxShadow
--embossed-1--grey-95$bds-clickable-item-boxShadow--hovered
--embossed-2--grey-95$bds-clickable-item-boxShadow--active
--debossed-1--grey-95$bds-flatElement-light-hovered
--primary-embossed-1$bds-flatElement-light-active
--primary-debossed-2$bds-flatElement-dark-hovered
--embossed-1--grey-95$bds-flatElement-dark-active
--debossed-1--grey-95$bds-flatElement--hovered
--embossed-1--grey-98$bds-flatElement--active
--debossed-1--grey-98$bds-flatElement-brand--active
--bds-flatElement-brand--activeGutters
SCSS Variable
Value
$bds-cornerRadius
--gutter-2xs$bds-cornerRadius-soft
--gutter-l$bds-form-padding
--gutter-s$bds-form-iconText-gap
--gutter-s