Tokens

Color Value Example
content-main rgba(247, 249, 250, 1)
content-secondary rgba(180, 186, 197, 1)
content-action rgba(247, 249, 250, 1)
content-placeholder rgba(130, 136, 147, 1)
content-disabled rgba(130, 136, 147, 1)
content-link rgba(149, 185, 255, 1)
content-link-hover rgba(235, 237, 255, 1)
content-link-visited rgba(222, 189, 255, 1)
content-negative rgba(255, 185, 185, 1)
content-warning rgba(253, 168, 70, 1)
content-positive rgba(145, 232, 123, 1)
content-info rgba(149, 185, 255, 1)
content-spinner rgba(180, 186, 197, 1)
content-progress rgba(149, 185, 255, 1)
content-logo rgba(255, 255, 255, 1)
content-inverse-main rgba(43, 45, 51, 1)
content-inverse-secondary rgba(99, 102, 112, 1)
content-on-action rgba(54, 64, 245, 1)
content-on-inverse-action rgba(247, 249, 250, 1)
content-always-light rgba(247, 249, 250, 1)
content-always-dark rgba(43, 45, 51, 1)
background-main rgba(30, 30, 36, 1)
background-surface rgba(43, 45, 51, 1)
background-surface-alt rgba(99, 102, 112, 1)
background-action rgba(247, 249, 250, 1)
background-action-hover rgba(235, 237, 255, 1)
background-action-active rgba(189, 195, 255, 1)
background-action-subtle rgba(130, 143, 255, 0.3)
background-action-subtle-hover rgba(130, 143, 255, 0.2)
background-disabled rgba(99, 102, 112, 1)
background-negative rgba(195, 47, 47, 1)
background-negative-hover rgba(252, 123, 123, 1)
background-negative-active rgba(170, 0, 0, 1)
background-negative-subtle rgba(152, 93, 97, 0.3)
background-negative-subtle-hover rgba(152, 93, 97, 0.2)
background-warning rgba(227, 133, 25, 1)
background-warning-subtle rgba(251, 194, 127, 0.2)
background-positive rgba(21, 179, 18, 1)
background-positive-subtle rgba(157, 239, 184, 0.2)
background-info rgba(92, 108, 255, 1)
background-info-subtle rgba(130, 143, 255, 0.2)
background-input rgba(30, 30, 36, 1)
background-input-selected rgba(247, 249, 250, 1)
background-spinner rgba(213, 218, 224, 0.15)
background-progress rgba(149, 185, 255, 0.15)
background-overlay rgba(0, 0, 0, 0.8)
background-overlay-subtle rgba(0, 0, 0, 0.5)
background-inverse-main rgba(247, 249, 250, 1)
background-inverse-surface rgba(252, 252, 253, 1)
background-inverse-action rgba(54, 64, 245, 1)
background-switch-selected rgba(92, 108, 255, 1)
background-switch-handle-selected rgba(252, 252, 253, 1)
background-switch-selected-hover rgba(130, 143, 255, 1)
background-switch-handle-selected-hover rgba(130, 136, 147, 1)
background-switch-handle-unselected rgba(130, 136, 147, 1)
background-switch-handle-unselected-hover rgba(180, 186, 197, 1)
background-switch-handle-unselected-disabled rgba(99, 102, 112, 1)
content-switch-handle-selected rgba(92, 108, 255, 1)
content-switch-handle-selected-hover rgba(130, 143, 255, 1)
content-switch-handle-selected-disabled rgba(71, 73, 82, 1)
border-switch-selected rgba(92, 108, 255, 1)
border-switch-selected-hover rgba(130, 143, 255, 1)
border-switch-selected-disabled rgba(99, 102, 112, 1)
border-separator rgba(71, 73, 82, 1)
border-input rgba(130, 136, 147, 1)
border-input-hover rgba(180, 186, 197, 1)
border-action rgba(130, 136, 147, 1)
border-action-hover rgba(180, 186, 197, 1)
border-action-subtle rgba(101, 105, 160, 1)
border-disabled rgba(71, 73, 82, 1)
border-negative rgba(245, 78, 78, 1)
border-negative-subtle rgba(152, 93, 97, 1)
border-warning rgba(227, 133, 25, 1)
border-warning-subtle rgba(150, 125, 96, 1)
border-positive rgba(21, 179, 18, 1)
border-positive-subtle rgba(108, 137, 94, 1)
border-info rgba(92, 108, 255, 1)
border-info-subtle rgba(101, 105, 160, 1)
border-input-selected rgba(247, 249, 250, 1)
border-focus-inner rgba(30, 30, 36, 1)
border-action-focus rgba(189, 195, 255, 1)
border-negative-focus rgba(245, 78, 78, 1)
border-inverse-action rgba(54, 64, 245, 1)