Tokens

Color Value Example
content-main rgba(43, 45, 51, 1)
content-secondary rgba(99, 102, 112, 1)
content-action rgba(54, 64, 245, 1)
content-placeholder rgba(130, 136, 147, 1)
content-disabled rgba(130, 136, 147, 1)
content-link rgba(54, 64, 245, 1)
content-link-hover rgba(35, 42, 173, 1)
content-link-visited rgba(129, 35, 173, 1)
content-negative rgba(195, 47, 47, 1)
content-warning rgba(158, 75, 8, 1)
content-positive rgba(5, 125, 39, 1)
content-info rgba(54, 64, 245, 1)
content-spinner rgba(99, 102, 112, 1)
content-progress rgba(54, 64, 245, 1)
content-logo rgba(54, 64, 245, 1)
content-inverse-main rgba(247, 249, 250, 1)
content-inverse-secondary rgba(213, 218, 224, 1)
content-on-action rgba(247, 249, 250, 1)
content-on-inverse-action rgba(54, 64, 245, 1)
content-always-light rgba(247, 249, 250, 1)
content-always-dark rgba(43, 45, 51, 1)
background-main rgba(247, 249, 250, 1)
background-surface rgba(252, 252, 253, 1)
background-surface-alt rgba(233, 236, 240, 1)
background-action rgba(54, 64, 245, 1)
background-action-hover rgba(92, 108, 255, 1)
background-action-active rgba(35, 42, 173, 1)
background-action-subtle rgba(54, 64, 245, 0.1)
background-action-subtle-hover rgba(54, 64, 245, 0.05)
background-disabled rgba(233, 236, 240, 1)
background-negative rgba(195, 47, 47, 1)
background-negative-hover rgba(245, 78, 78, 1)
background-negative-active rgba(170, 0, 0, 1)
background-negative-subtle rgba(195, 47, 47, 0.1)
background-negative-subtle-hover rgba(195, 47, 47, 0.05)
background-warning rgba(227, 133, 25, 1)
background-warning-subtle rgba(227, 133, 25, 0.1)
background-positive rgba(21, 179, 18, 1)
background-positive-subtle rgba(21, 179, 18, 0.1)
background-info rgba(54, 64, 245, 1)
background-info-subtle rgba(54, 64, 245, 0.1)
background-input rgba(252, 252, 253, 1)
background-input-selected rgba(54, 64, 245, 1)
background-spinner rgba(99, 102, 112, 0.15)
background-progress rgba(54, 64, 245, 0.15)
background-overlay rgba(0, 0, 0, 0.8)
background-overlay-subtle rgba(0, 0, 0, 0.5)
background-inverse-main rgba(30, 30, 36, 1)
background-inverse-surface rgba(43, 45, 51, 1)
background-inverse-action rgba(255, 255, 255, 1)
background-switch-selected rgba(54, 64, 245, 1)
background-switch-handle-selected rgba(252, 252, 253, 1)
background-switch-selected-hover rgba(92, 108, 255, 1)
background-switch-handle-selected-hover rgba(252, 252, 253, 1)
background-switch-handle-unselected rgba(130, 136, 147, 1)
background-switch-handle-unselected-hover rgba(99, 102, 112, 1)
background-switch-handle-unselected-disabled rgba(233, 236, 240, 1)
content-switch-handle-selected rgba(54, 64, 245, 1)
content-switch-handle-selected-hover rgba(92, 108, 255, 1)
content-switch-handle-selected-disabled rgba(233, 236, 240, 1)
border-switch-selected rgba(54, 64, 245, 1)
border-switch-selected-hover rgba(92, 108, 255, 1)
border-switch-selected-disabled rgba(233, 236, 240, 1)
border-separator rgba(233, 236, 240, 1)
border-input rgba(130, 136, 147, 1)
border-input-hover rgba(99, 102, 112, 1)
border-action rgba(54, 64, 245, 1)
border-action-hover rgba(92, 108, 255, 1)
border-action-subtle rgba(189, 195, 255, 1)
border-disabled rgba(233, 236, 240, 1)
border-negative rgba(195, 47, 47, 1)
border-negative-subtle rgba(255, 185, 185, 1)
border-warning rgba(227, 133, 25, 1)
border-warning-subtle rgba(235, 193, 144, 1)
border-positive rgba(5, 125, 39, 1)
border-positive-subtle rgba(137, 211, 163, 1)
border-info rgba(54, 64, 245, 1)
border-info-subtle rgba(189, 195, 255, 1)
border-input-selected rgba(54, 64, 245, 1)
border-focus-inner rgba(255, 255, 255, 1)
border-action-focus rgba(35, 42, 173, 1)
border-negative-focus rgba(170, 0, 0, 1)
border-inverse-action rgba(255, 255, 255, 1)