Semantic CSS Variables
- 9 minutes to read
This topic lists all semantic color CSS variables used in the DevExpress Design System for the following entities:
- Surface (background)
- Content (text or graphics)
- Borders
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.
Surface CSS Variables
Neutral
| 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 |
Primary
| 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 |
Secondary
| 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 |
Info
| 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 |
Success
| 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 |
Warning
| 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 |
Danger
| 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 |
Utility
| 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 |
Transparent
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-transparent-rest |
#FFFFFE00 |
Highlight
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-highlight-rest |
#FFEE80 |
Backdrop
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-surface-backdrop-default-rest |
rgba(0, 0, 0, 0.4) |
Content CSS Variables
Neutral
| 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 |
Primary
| 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 |
Secondary
| 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 |
Info
| 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 |
Success
| 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 |
Warning
| 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 |
Danger
| 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 |
Utility
| 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 |
Transparent
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-transparent-rest |
#FFFFFE00 |
Highlight
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-content-highlight-rest |
#161616 |
Border CSS Variables
Neutral
| 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 |
Primary
| 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 |
Secondary
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-secondary-default-rest |
#D6D6D6 | |
--dxds-color-border-secondary-default-hovered |
#C5C5C5 |
Info
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-info-default-rest |
#7E99F3 | |
--dxds-color-border-info-default-hovered |
#5B7AFD |
Success
| 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 |
Warning
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-warning-default-rest |
#F78E62 | |
--dxds-color-border-warning-default-hovered |
#F77132 |
Danger
| 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 |
Utility
| 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 |
Transparent
| CSS Variable | Value | Preview |
|---|---|---|
--dxds-color-border-transparent-rest |
#FFFFFE00 |
Focus
| 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 |