designsystem-405706-colors-color-css-variables.md
This topic lists all semantic color CSS variables used in the DevExpress Design System for the following entities:
Each entity has an associated set of CSS variables based on its color role schema. While DevExpress components always reference the same variables, application appearance adapts dynamically to the active theme and its color mode (light or dark).
This topic lists CSS variables and associated values in the DevExpress Fluent Blue theme. To see the list of shadow-specific CSS variables, refer to the following help topic: Shadows in the DevExpress Design System.
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-neutral-default-rest | #FFFFFE | |
--dxds-color-surface-neutral-default-hovered | #F4F4F3 | |
--dxds-color-surface-neutral-default-active | #DEDEDD | |
--dxds-color-surface-neutral-default-selected | #E9E9E8 | |
--dxds-color-surface-neutral-default-selected-hovered | #D3D3D2 | |
--dxds-color-surface-neutral-default-disabled | #F4F4F3 | |
--dxds-color-surface-neutral-default-inverted-rest | #252525 | |
--dxds-color-surface-neutral-default-inverted-hovered | #3F3F3E | |
--dxds-color-surface-neutral-default-inverted-active | #1D1E1D | |
--dxds-color-surface-neutral-default-inverted-selected | #2E2E2D | |
--dxds-color-surface-neutral-default-inverted-disabled | #161616 | |
--dxds-color-surface-neutral-default-static-light-rest | #FFFFFE | |
--dxds-color-surface-neutral-default-static-light-hovered | #F4F4F3 | |
--dxds-color-surface-neutral-default-static-light-active | #DEDEDD | |
--dxds-color-surface-neutral-default-static-light-selected | #E9E9E8 | |
--dxds-color-surface-neutral-default-static-light-disabled | #F4F4F3 | |
--dxds-color-surface-neutral-default-static-dark-rest | #252525 | |
--dxds-color-surface-neutral-default-static-dark-hovered | #3F3F3E | |
--dxds-color-surface-neutral-default-static-dark-active | #1D1E1D | |
--dxds-color-surface-neutral-default-static-dark-selected | #2E2E2D | |
--dxds-color-surface-neutral-default-static-dark-disabled | #161616 | |
--dxds-color-surface-neutral-default-on-surface-rest | #FFFFFE | |
--dxds-color-surface-neutral-default-on-surface-hovered | #F4F4F3 | |
--dxds-color-surface-neutral-default-on-surface-active | #DEDEDD | |
--dxds-color-surface-neutral-default-on-surface-selected | #E9E9E8 | |
--dxds-color-surface-neutral-default-on-surface-disabled | #F4F4F3 | |
--dxds-color-surface-neutral-subdued-rest | #F4F4F3 | |
--dxds-color-surface-neutral-subdued-hovered | #E9E9E8 | |
--dxds-color-surface-neutral-subdued-active | #C8C8C7 | |
--dxds-color-surface-neutral-subdued-disabled | #F4F4F3 | |
--dxds-color-surface-neutral-deep-rest | #E9E9E8 | |
--dxds-color-surface-neutral-deep-hovered | #DEDEDD | |
--dxds-color-surface-neutral-deep-active | #D3D3D2 | |
--dxds-color-surface-neutral-deep-disabled | #F4F4F3 | |
--dxds-color-surface-neutral-compound-on-surface-rest | #FFFFFE | |
--dxds-color-surface-neutral-compound-on-surface-hovered | #FFFFFE | |
--dxds-color-surface-neutral-compound-on-surface-active | #FFFFFE | |
--dxds-color-surface-neutral-compound-on-surface-disabled | #FFFFFE66 | |
--dxds-color-surface-neutral-alpha-rest | #16161600 | |
--dxds-color-surface-neutral-alpha-hovered | #1616160D | |
--dxds-color-surface-neutral-alpha-active | #16161626 | |
--dxds-color-surface-neutral-alpha-disabled | #16161600 | |
--dxds-color-surface-neutral-alpha-on-surface-rest | #FFFFFE00 | |
--dxds-color-surface-neutral-alpha-on-surface-hovered | #FFFFFE26 | |
--dxds-color-surface-neutral-alpha-on-surface-active | #FFFFFE0D | |
--dxds-color-surface-neutral-alpha-on-surface-disabled | #FFFFFE00 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-neutral-default-rest | #252525 | |
--dxds-color-surface-neutral-default-hovered | #3F3F3E | |
--dxds-color-surface-neutral-default-active | #1D1E1D | |
--dxds-color-surface-neutral-default-selected | #2E2E2D | |
--dxds-color-surface-neutral-default-selected-hovered | #505150 | |
--dxds-color-surface-neutral-default-disabled | #161616 | |
--dxds-color-surface-neutral-default-inverted-rest | #FFFFFE | |
--dxds-color-surface-neutral-default-inverted-hovered | #F4F4F3 | |
--dxds-color-surface-neutral-default-inverted-active | #DEDEDD | |
--dxds-color-surface-neutral-default-inverted-selected | #E9E9E8 | |
--dxds-color-surface-neutral-default-inverted-disabled | #F4F4F3 | |
--dxds-color-surface-neutral-default-static-light-rest | #FFFFFE | |
--dxds-color-surface-neutral-default-static-light-hovered | #F4F4F3 | |
--dxds-color-surface-neutral-default-static-light-active | #DEDEDD | |
--dxds-color-surface-neutral-default-static-light-selected | #E9E9E8 | |
--dxds-color-surface-neutral-default-static-light-disabled | #F4F4F3 | |
--dxds-color-surface-neutral-default-static-dark-rest | #252525 | |
--dxds-color-surface-neutral-default-static-dark-hovered | #3F3F3E | |
--dxds-color-surface-neutral-default-static-dark-active | #1D1E1D | |
--dxds-color-surface-neutral-default-static-dark-selected | #2E2E2D | |
--dxds-color-surface-neutral-default-static-dark-disabled | #161616 | |
--dxds-color-surface-neutral-default-on-surface-rest | #FFFFFE | |
--dxds-color-surface-neutral-default-on-surface-hovered | #F4F4F3 | |
--dxds-color-surface-neutral-default-on-surface-active | #DEDEDD | |
--dxds-color-surface-neutral-default-on-surface-selected | #E9E9E8 | |
--dxds-color-surface-neutral-default-on-surface-disabled | #F4F4F3 | |
--dxds-color-surface-neutral-subdued-rest | #1D1E1D | |
--dxds-color-surface-neutral-subdued-hovered | #363636 | |
--dxds-color-surface-neutral-subdued-active | #161616 | |
--dxds-color-surface-neutral-subdued-disabled | #161616 | |
--dxds-color-surface-neutral-deep-rest | #161616 | |
--dxds-color-surface-neutral-deep-hovered | #2E2E2D | |
--dxds-color-surface-neutral-deep-active | #161616 | |
--dxds-color-surface-neutral-deep-disabled | #161616 | |
--dxds-color-surface-neutral-compound-on-surface-rest | #FFFFFE | |
--dxds-color-surface-neutral-compound-on-surface-hovered | #FFFFFE | |
--dxds-color-surface-neutral-compound-on-surface-active | #FFFFFE | |
--dxds-color-surface-neutral-compound-on-surface-disabled | #FFFFFE66 | |
--dxds-color-surface-neutral-alpha-rest | #FFFFFE00 | |
--dxds-color-surface-neutral-alpha-hovered | #FFFFFE26 | |
--dxds-color-surface-neutral-alpha-active | #FFFFFE0D | |
--dxds-color-surface-neutral-alpha-disabled | #FFFFFE00 | |
--dxds-color-surface-neutral-alpha-on-surface-rest | #FFFFFE00 | |
--dxds-color-surface-neutral-alpha-on-surface-hovered | #FFFFFE26 | |
--dxds-color-surface-neutral-alpha-on-surface-active | #FFFFFE0D | |
--dxds-color-surface-neutral-alpha-on-surface-disabled | #FFFFFE00 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-primary-default-rest | #0F6CBD | |
--dxds-color-surface-primary-default-hovered | #0B5699 | |
--dxds-color-surface-primary-default-active | #053B6C | |
--dxds-color-surface-primary-default-selected | #064982 | |
--dxds-color-surface-primary-default-disabled | #7AB2F0 | |
--dxds-color-surface-primary-subdued-rest | #B3D1F3 | |
--dxds-color-surface-primary-subdued-hovered | #98C2F1 | |
--dxds-color-surface-primary-subdued-active | #5DA2EC | |
--dxds-color-surface-primary-subdued-selected | #7AB2F0 | |
--dxds-color-surface-primary-deep-rest | #E7EFF9 | |
--dxds-color-surface-primary-deep-hovered | #B3D1F3 | |
--dxds-color-surface-primary-deep-active | #98C2F1 | |
--dxds-color-surface-primary-deep-selected | #CEE0F5 | |
--dxds-color-surface-primary-deep-static-light-rest | #E7EFF9 | |
--dxds-color-surface-primary-deep-static-light-hovered | #B3D1F3 | |
--dxds-color-surface-primary-deep-static-light-selected | #CEE0F5 | |
--dxds-color-surface-primary-compound-rest | #0F6CBD | |
--dxds-color-surface-primary-compound-hovered | #0B5699 | |
--dxds-color-surface-primary-compound-active | #053B6C |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-primary-default-rest | #0F6CBD | |
--dxds-color-surface-primary-default-hovered | #1582E1 | |
--dxds-color-surface-primary-default-active | #053B6C | |
--dxds-color-surface-primary-default-selected | #064982 | |
--dxds-color-surface-primary-default-disabled | #064982 | |
--dxds-color-surface-primary-subdued-rest | #064982 | |
--dxds-color-surface-primary-subdued-hovered | #0B5699 | |
--dxds-color-surface-primary-subdued-active | #032E56 | |
--dxds-color-surface-primary-subdued-selected | #053B6C | |
--dxds-color-surface-primary-deep-rest | #022242 | |
--dxds-color-surface-primary-deep-hovered | #053B6C | |
--dxds-color-surface-primary-deep-active | #022242 | |
--dxds-color-surface-primary-deep-selected | #032E56 | |
--dxds-color-surface-primary-deep-static-light-rest | #E7EFF9 | |
--dxds-color-surface-primary-deep-static-light-hovered | #B3D1F3 | |
--dxds-color-surface-primary-deep-static-light-selected | #CEE0F5 | |
--dxds-color-surface-primary-compound-rest | #3C92E9 | |
--dxds-color-surface-primary-compound-hovered | #5DA2EC | |
--dxds-color-surface-primary-compound-active | #0B5699 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-secondary-default-rest | #FFFFFF | |
--dxds-color-surface-secondary-default-hovered | #F7F7F7 | |
--dxds-color-surface-secondary-default-active | #E6E6E6 | |
--dxds-color-surface-secondary-default-selected | #EEEEEE | |
--dxds-color-surface-secondary-default-disabled | #F7F7F7 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-secondary-default-rest | #282828 | |
--dxds-color-surface-secondary-default-hovered | #3A3A3A | |
--dxds-color-surface-secondary-default-active | #282828 | |
--dxds-color-surface-secondary-default-selected | #3A3A3A | |
--dxds-color-surface-secondary-default-disabled | #161616 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-info-default-rest | #4F6BED | |
--dxds-color-surface-info-default-hovered | #3042BD | |
--dxds-color-surface-info-default-active | #1D2298 | |
--dxds-color-surface-info-default-selected | #2632AB | |
--dxds-color-surface-info-subdued-rest | #BECDF6 | |
--dxds-color-surface-info-subdued-hovered | #A8BCF5 | |
--dxds-color-surface-info-subdued-active | #7E99F3 | |
--dxds-color-surface-info-subdued-selected | #92AAF5 | |
--dxds-color-surface-info-deep-rest | #EAEEFA | |
--dxds-color-surface-info-deep-hovered | #BECDF6 | |
--dxds-color-surface-info-deep-active | #A8BCF5 | |
--dxds-color-surface-info-deep-selected | #D4DDF7 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-info-default-rest | #4F6BED | |
--dxds-color-surface-info-default-hovered | #5B7AFD | |
--dxds-color-surface-info-default-active | #1D2298 | |
--dxds-color-surface-info-default-selected | #2632AB | |
--dxds-color-surface-info-subdued-rest | #2632AB | |
--dxds-color-surface-info-subdued-hovered | #3042BD | |
--dxds-color-surface-info-subdued-active | #151A7B | |
--dxds-color-surface-info-subdued-selected | #1D2298 | |
--dxds-color-surface-info-deep-rest | #0E125F | |
--dxds-color-surface-info-deep-hovered | #1D2298 | |
--dxds-color-surface-info-deep-active | #0E125F | |
--dxds-color-surface-info-deep-selected | #151A7B |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-success-default-rest | #107C10 | |
--dxds-color-surface-success-default-hovered | #0B680B | |
--dxds-color-surface-success-default-active | #064806 | |
--dxds-color-surface-success-default-selected | #095809 | |
--dxds-color-surface-success-subdued-rest | #B0DCAC | |
--dxds-color-surface-success-subdued-hovered | #98CF93 | |
--dxds-color-surface-success-subdued-active | #66B461 | |
--dxds-color-surface-success-subdued-selected | #80C17B | |
--dxds-color-surface-success-deep-rest | #E7F2E6 | |
--dxds-color-surface-success-deep-hovered | #B0DCAC | |
--dxds-color-surface-success-deep-active | #98CF93 | |
--dxds-color-surface-success-deep-selected | #C8E9C5 | |
--dxds-color-surface-success-compound-rest | #107C10 | |
--dxds-color-surface-success-compound-hovered | #0B680B | |
--dxds-color-surface-success-compound-active | #064806 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-success-default-rest | #107C10 | |
--dxds-color-surface-success-default-hovered | #299027 | |
--dxds-color-surface-success-default-active | #064806 | |
--dxds-color-surface-success-default-selected | #095809 | |
--dxds-color-surface-success-subdued-rest | #095809 | |
--dxds-color-surface-success-subdued-hovered | #0B680B | |
--dxds-color-surface-success-subdued-active | #043904 | |
--dxds-color-surface-success-subdued-selected | #064806 | |
--dxds-color-surface-success-deep-rest | #022B02 | |
--dxds-color-surface-success-deep-hovered | #064806 | |
--dxds-color-surface-success-deep-active | #022B02 | |
--dxds-color-surface-success-deep-selected | #043904 | |
--dxds-color-surface-success-compound-rest | #4BA747 | |
--dxds-color-surface-success-compound-hovered | #66B461 | |
--dxds-color-surface-success-compound-active | #0B680B |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-warning-default-rest | #F7630C | |
--dxds-color-surface-warning-default-hovered | #B24000 | |
--dxds-color-surface-warning-default-active | #722300 | |
--dxds-color-surface-warning-default-selected | #913200 | |
--dxds-color-surface-warning-subdued-rest | #FFC5AC | |
--dxds-color-surface-warning-subdued-hovered | #FDB191 | |
--dxds-color-surface-warning-subdued-active | #F78E62 | |
--dxds-color-surface-warning-subdued-selected | #F69C76 | |
--dxds-color-surface-warning-deep-rest | #FBEBE4 | |
--dxds-color-surface-warning-deep-hovered | #FFC5AC | |
--dxds-color-surface-warning-deep-active | #FDB191 | |
--dxds-color-surface-warning-deep-selected | #FFD6C3 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-warning-default-rest | #F7630C | |
--dxds-color-surface-warning-default-hovered | #F77132 | |
--dxds-color-surface-warning-default-active | #722300 | |
--dxds-color-surface-warning-default-selected | #913200 | |
--dxds-color-surface-warning-subdued-rest | #913200 | |
--dxds-color-surface-warning-subdued-hovered | #B24000 | |
--dxds-color-surface-warning-subdued-active | #501A01 | |
--dxds-color-surface-warning-subdued-selected | #722300 | |
--dxds-color-surface-warning-deep-rest | #3C1301 | |
--dxds-color-surface-warning-deep-hovered | #722300 | |
--dxds-color-surface-warning-deep-active | #2A0B01 | |
--dxds-color-surface-warning-deep-selected | #501A01 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-danger-default-rest | #C50F1F | |
--dxds-color-surface-danger-default-hovered | #A10B18 | |
--dxds-color-surface-danger-default-active | #72050D | |
--dxds-color-surface-danger-default-selected | #890813 | |
--dxds-color-surface-danger-subdued-rest | #FEBAB3 | |
--dxds-color-surface-danger-subdued-hovered | #F8A59C | |
--dxds-color-surface-danger-subdued-active | #E97970 | |
--dxds-color-surface-danger-subdued-selected | #F08F86 | |
--dxds-color-surface-danger-deep-rest | #FCEAE8 | |
--dxds-color-surface-danger-deep-hovered | #FEBAB3 | |
--dxds-color-surface-danger-deep-active | #F8A59C | |
--dxds-color-surface-danger-deep-selected | #FFD0CA | |
--dxds-color-surface-danger-compound-rest | #C50F1F | |
--dxds-color-surface-danger-compound-hovered | #A10B18 | |
--dxds-color-surface-danger-compound-active | #72050D |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-danger-default-rest | #C50F1F | |
--dxds-color-surface-danger-default-hovered | #CE3F3C | |
--dxds-color-surface-danger-default-active | #72050D | |
--dxds-color-surface-danger-default-selected | #890813 | |
--dxds-color-surface-danger-subdued-rest | #890813 | |
--dxds-color-surface-danger-subdued-hovered | #A10B18 | |
--dxds-color-surface-danger-subdued-active | #5B0309 | |
--dxds-color-surface-danger-subdued-selected | #72050D | |
--dxds-color-surface-danger-deep-rest | #460205 | |
--dxds-color-surface-danger-deep-hovered | #72050D | |
--dxds-color-surface-danger-deep-active | #310203 | |
--dxds-color-surface-danger-deep-selected | #5B0309 | |
--dxds-color-surface-danger-compound-rest | #E0615A | |
--dxds-color-surface-danger-compound-hovered | #E97970 | |
--dxds-color-surface-danger-compound-active | #A10B18 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-utility-blue-default-rest | #0078D4 | |
--dxds-color-surface-utility-blue-subdued-rest | #A9D3F2 | |
--dxds-color-surface-utility-cyan-default-rest | #0099BC | |
--dxds-color-surface-utility-cyan-subdued-rest | #A4DEEB | |
--dxds-color-surface-utility-gray-default-rest | #393939 | |
--dxds-color-surface-utility-gray-subdued-rest | #C4C4C4 | |
--dxds-color-surface-utility-green-default-rest | #107C10 | |
--dxds-color-surface-utility-green-subdued-rest | #9FD89F | |
--dxds-color-surface-utility-indigo-default-rest | #4F6BED | |
--dxds-color-surface-utility-indigo-subdued-rest | #C8D1FA | |
--dxds-color-surface-utility-orange-default-rest | #F7630C | |
--dxds-color-surface-utility-orange-subdued-rest | #FDCFB4 | |
--dxds-color-surface-utility-pink-default-rest | #E43BA6 | |
--dxds-color-surface-utility-pink-subdued-rest | #F7C0E3 | |
--dxds-color-surface-utility-purple-default-rest | #5C2E91 | |
--dxds-color-surface-utility-purple-subdued-rest | #C6B1DE | |
--dxds-color-surface-utility-red-default-rest | #D13438 | |
--dxds-color-surface-utility-red-subdued-rest | #F1BBBC | |
--dxds-color-surface-utility-teal-default-rest | #006666 | |
--dxds-color-surface-utility-teal-subdued-rest | #92D1D1 | |
--dxds-color-surface-utility-yellow-default-rest | #EAA300 | |
--dxds-color-surface-utility-yellow-subdued-rest | #F9E2AE |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-utility-blue-default-rest | #0078D4 | |
--dxds-color-surface-utility-blue-subdued-rest | #004377 | |
--dxds-color-surface-utility-cyan-default-rest | #0099BC | |
--dxds-color-surface-utility-cyan-subdued-rest | #005669 | |
--dxds-color-surface-utility-gray-default-rest | #393939 | |
--dxds-color-surface-utility-gray-subdued-rest | #515151 | |
--dxds-color-surface-utility-green-default-rest | #107C10 | |
--dxds-color-surface-utility-green-subdued-rest | #0C5E0C | |
--dxds-color-surface-utility-indigo-default-rest | #4F6BED | |
--dxds-color-surface-utility-indigo-subdued-rest | #2C3C85 | |
--dxds-color-surface-utility-orange-default-rest | #F7630C | |
--dxds-color-surface-utility-orange-subdued-rest | #8A3707 | |
--dxds-color-surface-utility-pink-default-rest | #E43BA6 | |
--dxds-color-surface-utility-pink-subdued-rest | #80215D | |
--dxds-color-surface-utility-purple-default-rest | #5C2E91 | |
--dxds-color-surface-utility-purple-subdued-rest | #532982 | |
--dxds-color-surface-utility-red-default-rest | #D13438 | |
--dxds-color-surface-utility-red-subdued-rest | #751D1F | |
--dxds-color-surface-utility-teal-default-rest | #006666 | |
--dxds-color-surface-utility-teal-subdued-rest | #004E4E | |
--dxds-color-surface-utility-yellow-default-rest | #EAA300 | |
--dxds-color-surface-utility-yellow-subdued-rest | #835B00 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-transparent-rest | #FFFFFE00 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-transparent-rest | #FFFFFE00 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-highlight-rest | #FFEE80 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-highlight-rest | #665400 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-backdrop-default-rest | rgba(0, 0, 0, 0.4) |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-backdrop-default-rest | rgba(0, 0, 0, 0.5) |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-neutral-default-rest | #161616 | |
--dxds-color-content-neutral-default-hovered | #161616 | |
--dxds-color-content-neutral-default-active | #161616 | |
--dxds-color-content-neutral-default-selected | #161616 | |
--dxds-color-content-neutral-default-selected-hovered | #161616 | |
--dxds-color-content-neutral-default-disabled | #A8A9A8 | |
--dxds-color-content-neutral-default-inverted-rest | #FFFFFE | |
--dxds-color-content-neutral-default-inverted-hovered | #FFFFFE | |
--dxds-color-content-neutral-default-inverted-active | #FFFFFE | |
--dxds-color-content-neutral-default-inverted-disabled | #767676 | |
--dxds-color-content-neutral-default-static-light-rest | #161616 | |
--dxds-color-content-neutral-default-static-light-hovered | #161616 | |
--dxds-color-content-neutral-default-static-light-active | #161616 | |
--dxds-color-content-neutral-default-static-light-disabled | #A8A9A8 | |
--dxds-color-content-neutral-default-static-dark-rest | #FFFFFE | |
--dxds-color-content-neutral-default-static-dark-hovered | #FFFFFE | |
--dxds-color-content-neutral-default-static-dark-active | #FFFFFE | |
--dxds-color-content-neutral-default-static-dark-disabled | #767676 | |
--dxds-color-content-neutral-default-on-surface-rest | #FFFFFE | |
--dxds-color-content-neutral-default-on-surface-hovered | #FFFFFE | |
--dxds-color-content-neutral-default-on-surface-active | #FFFFFE | |
--dxds-color-content-neutral-default-on-surface-disabled | #FFFFFE66 | |
--dxds-color-content-neutral-subdued-rest | #3F3F3E | |
--dxds-color-content-neutral-subdued-hovered | #161616 | |
--dxds-color-content-neutral-subdued-active | #161616 | |
--dxds-color-content-neutral-subdued-selected | #161616 | |
--dxds-color-content-neutral-subdued-selected-hovered | #161616 | |
--dxds-color-content-neutral-subdued-disabled | #C8C8C7 | |
--dxds-color-content-neutral-subdued-inverted-rest | #C8C8C7 | |
--dxds-color-content-neutral-subdued-static-light-rest | #3F3F3E | |
--dxds-color-content-neutral-subdued-static-dark-rest | #C8C8C7 | |
--dxds-color-content-neutral-subdued-on-surface-rest | #FFFFFEBF | |
--dxds-color-content-neutral-subdued-on-surface-hovered | #FFFFFEE6 | |
--dxds-color-content-neutral-subdued-on-surface-active | #FFFFFEE6 | |
--dxds-color-content-neutral-subdued-on-surface-disabled | #FFFFFE33 | |
--dxds-color-content-neutral-deep-rest | #767676 | |
--dxds-color-content-neutral-deep-hovered | #161616 | |
--dxds-color-content-neutral-deep-active | #161616 | |
--dxds-color-content-neutral-deep-selected | #161616 | |
--dxds-color-content-neutral-deep-disabled | #C8C8C7 | |
--dxds-color-content-neutral-deep-on-surface-rest | #FFFFFE99 | |
--dxds-color-content-neutral-deep-on-surface-hovered | #FFFFFEE6 | |
--dxds-color-content-neutral-deep-on-surface-active | #FFFFFEE6 | |
--dxds-color-content-neutral-deep-on-surface-disabled | #FFFFFE33 | |
--dxds-color-content-neutral-compound-on-surface-rest | #FFFFFE | |
--dxds-color-content-neutral-compound-on-surface-hovered | #FFFFFE | |
--dxds-color-content-neutral-compound-on-surface-active | #FFFFFE | |
--dxds-color-content-neutral-compound-on-surface-disabled | #FFFFFE66 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-neutral-default-rest | #FFFFFE | |
--dxds-color-content-neutral-default-hovered | #FFFFFE | |
--dxds-color-content-neutral-default-active | #FFFFFE | |
--dxds-color-content-neutral-default-selected | #FFFFFE | |
--dxds-color-content-neutral-default-selected-hovered | #FFFFFE | |
--dxds-color-content-neutral-default-disabled | #767676 | |
--dxds-color-content-neutral-default-inverted-rest | #161616 | |
--dxds-color-content-neutral-default-inverted-hovered | #161616 | |
--dxds-color-content-neutral-default-inverted-active | #161616 | |
--dxds-color-content-neutral-default-inverted-disabled | #A8A9A8 | |
--dxds-color-content-neutral-default-static-light-rest | #161616 | |
--dxds-color-content-neutral-default-static-light-hovered | #161616 | |
--dxds-color-content-neutral-default-static-light-active | #161616 | |
--dxds-color-content-neutral-default-static-light-disabled | #A8A9A8 | |
--dxds-color-content-neutral-default-static-dark-rest | #FFFFFE | |
--dxds-color-content-neutral-default-static-dark-hovered | #FFFFFE | |
--dxds-color-content-neutral-default-static-dark-active | #FFFFFE | |
--dxds-color-content-neutral-default-static-dark-disabled | #767676 | |
--dxds-color-content-neutral-default-on-surface-rest | #FFFFFE | |
--dxds-color-content-neutral-default-on-surface-hovered | #FFFFFE | |
--dxds-color-content-neutral-default-on-surface-active | #FFFFFE | |
--dxds-color-content-neutral-default-on-surface-disabled | #FFFFFE66 | |
--dxds-color-content-neutral-subdued-rest | #C8C8C7 | |
--dxds-color-content-neutral-subdued-hovered | #E9E9E8 | |
--dxds-color-content-neutral-subdued-active | #E9E9E8 | |
--dxds-color-content-neutral-subdued-selected | #E9E9E8 | |
--dxds-color-content-neutral-subdued-selected-hovered | #E9E9E8 | |
--dxds-color-content-neutral-subdued-disabled | #505150 | |
--dxds-color-content-neutral-subdued-inverted-rest | #505150 | |
--dxds-color-content-neutral-subdued-static-light-rest | #3F3F3E | |
--dxds-color-content-neutral-subdued-static-dark-rest | #C8C8C7 | |
--dxds-color-content-neutral-subdued-on-surface-rest | #FFFFFEBF | |
--dxds-color-content-neutral-subdued-on-surface-hovered | #FFFFFEE6 | |
--dxds-color-content-neutral-subdued-on-surface-active | #FFFFFEE6 | |
--dxds-color-content-neutral-subdued-on-surface-disabled | #FFFFFE33 | |
--dxds-color-content-neutral-deep-rest | #949493 | |
--dxds-color-content-neutral-deep-hovered | #E9E9E8 | |
--dxds-color-content-neutral-deep-active | #E9E9E8 | |
--dxds-color-content-neutral-deep-selected | #E9E9E8 | |
--dxds-color-content-neutral-deep-disabled | #505150 | |
--dxds-color-content-neutral-deep-on-surface-rest | #FFFFFE99 | |
--dxds-color-content-neutral-deep-on-surface-hovered | #FFFFFEE6 | |
--dxds-color-content-neutral-deep-on-surface-active | #FFFFFEE6 | |
--dxds-color-content-neutral-deep-on-surface-disabled | #FFFFFE33 | |
--dxds-color-content-neutral-compound-on-surface-rest | #FFFFFE | |
--dxds-color-content-neutral-compound-on-surface-hovered | #FFFFFE | |
--dxds-color-content-neutral-compound-on-surface-active | #FFFFFE | |
--dxds-color-content-neutral-compound-on-surface-disabled | #FFFFFE66 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-primary-default-rest | #0F6CBD | |
--dxds-color-content-primary-default-hovered | #0B5699 | |
--dxds-color-content-primary-default-active | #053B6C | |
--dxds-color-content-primary-compound-rest | #0F6CBD | |
--dxds-color-content-primary-compound-hovered | #0B5699 | |
--dxds-color-content-primary-compound-active | #053B6C |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-primary-default-rest | #3C92E9 | |
--dxds-color-content-primary-default-hovered | #5DA2EC | |
--dxds-color-content-primary-default-active | #0B5699 | |
--dxds-color-content-primary-compound-rest | #3C92E9 | |
--dxds-color-content-primary-compound-hovered | #5DA2EC | |
--dxds-color-content-primary-compound-active | #0B5699 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-secondary-default-rest | #161616 | |
--dxds-color-content-secondary-default-hovered | #161616 | |
--dxds-color-content-secondary-default-active | #161616 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-secondary-default-rest | #FFFFFF | |
--dxds-color-content-secondary-default-hovered | #FFFFFF | |
--dxds-color-content-secondary-default-active | #FFFFFF |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-info-default-rest | #4F6BED | |
--dxds-color-content-info-default-hovered | #3042BD | |
--dxds-color-content-info-default-active | #1D2298 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-info-default-rest | #6A87F0 | |
--dxds-color-content-info-default-hovered | #7E99F3 | |
--dxds-color-content-info-default-active | #3042BD |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-success-default-rest | #107C10 | |
--dxds-color-content-success-default-hovered | #0B680B | |
--dxds-color-content-success-default-active | #064806 | |
--dxds-color-content-success-compound-rest | #107C10 | |
--dxds-color-content-success-compound-hovered | #0B680B | |
--dxds-color-content-success-compound-active | #064806 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-success-default-rest | #4BA747 | |
--dxds-color-content-success-default-hovered | #66B461 | |
--dxds-color-content-success-default-active | #0B680B | |
--dxds-color-content-success-compound-rest | #4BA747 | |
--dxds-color-content-success-compound-hovered | #66B461 | |
--dxds-color-content-success-compound-active | #0B680B |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-warning-default-rest | #F7630C | |
--dxds-color-content-warning-default-hovered | #B24000 | |
--dxds-color-content-warning-default-active | #722300 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-warning-default-rest | #F7804C | |
--dxds-color-content-warning-default-hovered | #F78E62 | |
--dxds-color-content-warning-default-active | #B24000 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-danger-default-rest | #C50F1F | |
--dxds-color-content-danger-default-hovered | #A10B18 | |
--dxds-color-content-danger-default-active | #72050D | |
--dxds-color-content-danger-compound-rest | #C50F1F | |
--dxds-color-content-danger-compound-hovered | #A10B18 | |
--dxds-color-content-danger-compound-active | #72050D |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-danger-default-rest | #E0615A | |
--dxds-color-content-danger-default-hovered | #E97970 | |
--dxds-color-content-danger-default-active | #A10B18 | |
--dxds-color-content-danger-compound-rest | #E0615A | |
--dxds-color-content-danger-compound-hovered | #E97970 | |
--dxds-color-content-danger-compound-active | #A10B18 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-utility-blue-default-rest | #006CBF | |
--dxds-color-content-utility-blue-subdued-on-surface-rest | #004377 | |
--dxds-color-content-utility-cyan-default-rest | #00748F | |
--dxds-color-content-utility-cyan-subdued-on-surface-rest | #005669 | |
--dxds-color-content-utility-gray-default-rest | #686868 | |
--dxds-color-content-utility-gray-subdued-on-surface-rest | #2B2B2B | |
--dxds-color-content-utility-green-default-rest | #107C10 | |
--dxds-color-content-utility-green-subdued-on-surface-rest | #094509 | |
--dxds-color-content-utility-indigo-default-rest | #4760D5 | |
--dxds-color-content-utility-indigo-subdued-on-surface-rest | #2C3C85 | |
--dxds-color-content-utility-orange-default-rest | #BC4B09 | |
--dxds-color-content-utility-orange-subdued-on-surface-rest | #8A3707 | |
--dxds-color-content-utility-pink-default-rest | #CD3595 | |
--dxds-color-content-utility-pink-subdued-on-surface-rest | #80215D | |
--dxds-color-content-utility-purple-default-rest | #7C52AB | |
--dxds-color-content-utility-purple-subdued-on-surface-rest | #341A51 | |
--dxds-color-content-utility-red-default-rest | #BC2F32 | |
--dxds-color-content-utility-red-subdued-on-surface-rest | #751D1F | |
--dxds-color-content-utility-teal-default-rest | #0E7878 | |
--dxds-color-content-utility-teal-subdued-on-surface-rest | #003939 | |
--dxds-color-content-utility-yellow-default-rest | #B27C00 | |
--dxds-color-content-utility-yellow-subdued-on-surface-rest | #835B00 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-utility-blue-default-rest | #3595DE | |
--dxds-color-content-utility-blue-subdued-on-surface-rest | #A9D3F2 | |
--dxds-color-content-utility-cyan-default-rest | #31AFCC | |
--dxds-color-content-utility-cyan-subdued-on-surface-rest | #A4DEEB | |
--dxds-color-content-utility-gray-default-rest | #C4C4C4 | |
--dxds-color-content-utility-gray-subdued-on-surface-rest | #DFDFDF | |
--dxds-color-content-utility-green-default-rest | #54B054 | |
--dxds-color-content-utility-green-subdued-on-surface-rest | #9FD89F | |
--dxds-color-content-utility-indigo-default-rest | #778DF1 | |
--dxds-color-content-utility-indigo-subdued-on-surface-rest | #C8D1FA | |
--dxds-color-content-utility-orange-default-rest | #F98845 | |
--dxds-color-content-utility-orange-subdued-on-surface-rest | #FDCFB4 | |
--dxds-color-content-utility-pink-default-rest | #EA66BA | |
--dxds-color-content-utility-pink-subdued-on-surface-rest | #F7C0E3 | |
--dxds-color-content-utility-purple-default-rest | #C6B1DE | |
--dxds-color-content-utility-purple-subdued-on-surface-rest | #C6B1DE | |
--dxds-color-content-utility-red-default-rest | #E37D80 | |
--dxds-color-content-utility-red-subdued-on-surface-rest | #F1BBBC | |
--dxds-color-content-utility-teal-default-rest | #41A3A3 | |
--dxds-color-content-utility-teal-subdued-on-surface-rest | #92D1D1 | |
--dxds-color-content-utility-yellow-default-rest | #EFB839 | |
--dxds-color-content-utility-yellow-subdued-on-surface-rest | #F9E2AE |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-transparent-rest | #FFFFFE00 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-transparent-rest | #FFFFFE00 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-highlight-rest | #161616 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-highlight-rest | #FFFFFE |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-neutral-default-rest | #D3D3D2 | |
--dxds-color-border-neutral-default-hovered | #C8C8C7 | |
--dxds-color-border-neutral-default-active | #BDBEBD | |
--dxds-color-border-neutral-default-disabled | #DEDEDD | |
--dxds-color-border-neutral-default-inverted-rest | #767676 | |
--dxds-color-border-neutral-default-inverted-hovered | #A8A9A8 | |
--dxds-color-border-neutral-default-inverted-active | #636363 | |
--dxds-color-border-neutral-default-inverted-disabled | #505150 | |
--dxds-color-border-neutral-default-static-light-rest | #D3D3D2 | |
--dxds-color-border-neutral-default-static-light-hovered | #C8C8C7 | |
--dxds-color-border-neutral-default-static-light-active | #BDBEBD | |
--dxds-color-border-neutral-default-static-light-disabled | #DEDEDD | |
--dxds-color-border-neutral-default-static-dark-rest | #767676 | |
--dxds-color-border-neutral-default-static-dark-hovered | #A8A9A8 | |
--dxds-color-border-neutral-default-static-dark-active | #636363 | |
--dxds-color-border-neutral-default-static-dark-disabled | #505150 | |
--dxds-color-border-neutral-compound-on-surface-rest | #FFFFFE | |
--dxds-color-border-neutral-compound-on-surface-hovered | #FFFFFE | |
--dxds-color-border-neutral-compound-on-surface-active | #FFFFFE | |
--dxds-color-border-neutral-compound-on-surface-disabled | #FFFFFE66 | |
--dxds-color-border-neutral-accessible-rest | #767676 | |
--dxds-color-border-neutral-accessible-hovered | #505150 | |
--dxds-color-border-neutral-accessible-active | #252525 | |
--dxds-color-border-neutral-accessible-disabled | #C8C8C7 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-neutral-default-rest | #767676 | |
--dxds-color-border-neutral-default-hovered | #A8A9A8 | |
--dxds-color-border-neutral-default-active | #636363 | |
--dxds-color-border-neutral-default-disabled | #505150 | |
--dxds-color-border-neutral-default-inverted-rest | #D3D3D2 | |
--dxds-color-border-neutral-default-inverted-hovered | #C8C8C7 | |
--dxds-color-border-neutral-default-inverted-active | #BDBEBD | |
--dxds-color-border-neutral-default-inverted-disabled | #DEDEDD | |
--dxds-color-border-neutral-default-static-light-rest | #D3D3D2 | |
--dxds-color-border-neutral-default-static-light-hovered | #C8C8C7 | |
--dxds-color-border-neutral-default-static-light-active | #BDBEBD | |
--dxds-color-border-neutral-default-static-light-disabled | #DEDEDD | |
--dxds-color-border-neutral-default-static-dark-rest | #767676 | |
--dxds-color-border-neutral-default-static-dark-hovered | #A8A9A8 | |
--dxds-color-border-neutral-default-static-dark-active | #636363 | |
--dxds-color-border-neutral-default-static-dark-disabled | #505150 | |
--dxds-color-border-neutral-compound-on-surface-rest | #FFFFFE | |
--dxds-color-border-neutral-compound-on-surface-hovered | #FFFFFE | |
--dxds-color-border-neutral-compound-on-surface-active | #FFFFFE | |
--dxds-color-border-neutral-compound-on-surface-disabled | #FFFFFE66 | |
--dxds-color-border-neutral-accessible-rest | #A8A9A8 | |
--dxds-color-border-neutral-accessible-hovered | #C8C8C7 | |
--dxds-color-border-neutral-accessible-active | #D3D3D2 | |
--dxds-color-border-neutral-accessible-disabled | #505150 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-primary-default-rest | #5DA2EC | |
--dxds-color-border-primary-default-hovered | #1582E1 | |
--dxds-color-border-primary-compound-rest | #0F6CBD | |
--dxds-color-border-primary-compound-hovered | #0B5699 | |
--dxds-color-border-primary-compound-active | #053B6C |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-primary-default-rest | #3C92E9 | |
--dxds-color-border-primary-default-hovered | #5DA2EC | |
--dxds-color-border-primary-compound-rest | #3C92E9 | |
--dxds-color-border-primary-compound-hovered | #5DA2EC | |
--dxds-color-border-primary-compound-active | #0B5699 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-secondary-default-rest | #D6D6D6 | |
--dxds-color-border-secondary-default-hovered | #C5C5C5 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-secondary-default-rest | #CECECE | |
--dxds-color-border-secondary-default-hovered | #D6D6D6 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-info-default-rest | #7E99F3 | |
--dxds-color-border-info-default-hovered | #5B7AFD |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-info-default-rest | #6A87F0 | |
--dxds-color-border-info-default-hovered | #7E99F3 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-success-default-rest | #66B461 | |
--dxds-color-border-success-default-hovered | #299027 | |
--dxds-color-border-success-compound-rest | #107C10 | |
--dxds-color-border-success-compound-hovered | #0B680B | |
--dxds-color-border-success-compound-active | #064806 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-success-default-rest | #4BA747 | |
--dxds-color-border-success-default-hovered | #66B461 | |
--dxds-color-border-success-compound-rest | #4BA747 | |
--dxds-color-border-success-compound-hovered | #66B461 | |
--dxds-color-border-success-compound-active | #0B680B |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-warning-default-rest | #F78E62 | |
--dxds-color-border-warning-default-hovered | #F77132 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-warning-default-rest | #F7804C | |
--dxds-color-border-warning-default-hovered | #F78E62 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-danger-default-rest | #E97970 | |
--dxds-color-border-danger-default-hovered | #CE3F3C | |
--dxds-color-border-danger-compound-rest | #C50F1F | |
--dxds-color-border-danger-compound-hovered | #A10B18 | |
--dxds-color-border-danger-compound-active | #72050D |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-danger-default-rest | #E0615A | |
--dxds-color-border-danger-default-hovered | #E97970 | |
--dxds-color-border-danger-compound-rest | #E0615A | |
--dxds-color-border-danger-compound-hovered | #E97970 | |
--dxds-color-border-danger-compound-active | #A10B18 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-utility-blue-default-rest | #0078D4 | |
--dxds-color-border-utility-cyan-default-rest | #0099BC | |
--dxds-color-border-utility-gray-default-rest | #393939 | |
--dxds-color-border-utility-green-default-rest | #107C10 | |
--dxds-color-border-utility-indigo-default-rest | #4F6BED | |
--dxds-color-border-utility-orange-default-rest | #F7630C | |
--dxds-color-border-utility-pink-default-rest | #E43BA6 | |
--dxds-color-border-utility-purple-default-rest | #5C2E91 | |
--dxds-color-border-utility-red-default-rest | #D13438 | |
--dxds-color-border-utility-teal-default-rest | #006666 | |
--dxds-color-border-utility-yellow-default-rest | #EAA300 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-utility-blue-default-rest | #5CAAE5 | |
--dxds-color-border-utility-cyan-default-rest | #56BFD7 | |
--dxds-color-border-utility-gray-default-rest | #888888 | |
--dxds-color-border-utility-green-default-rest | #54B054 | |
--dxds-color-border-utility-indigo-default-rest | #93A4F4 | |
--dxds-color-border-utility-orange-default-rest | #FAA06B | |
--dxds-color-border-utility-pink-default-rest | #EF85C8 | |
--dxds-color-border-utility-purple-default-rest | #9470BD | |
--dxds-color-border-utility-red-default-rest | #E37D80 | |
--dxds-color-border-utility-teal-default-rest | #41A3A3 | |
--dxds-color-border-utility-yellow-default-rest | #F2C661 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-transparent-rest | #FFFFFE00 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-transparent-rest | #FFFFFE00 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-focus-default | #161616 | |
--dxds-color-border-focus-inverted | #FFFFFE | |
--dxds-color-border-focus-static-dark | #FFFFFE | |
--dxds-color-border-focus-static-light | #161616 |
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-focus-default | #FFFFFE | |
--dxds-color-border-focus-inverted | #161616 | |
--dxds-color-border-focus-static-dark | #FFFFFE | |
--dxds-color-border-focus-static-light | #161616 |