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