| 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)
|