Back to Devexpress

Semantic CSS Variables

designsystem-405706-colors-color-css-variables.md

latest46.9 KB
Original Source

Semantic CSS Variables

  • Dec 15, 2025
  • 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 VariableValuePreview
--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 VariableValuePreview
--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

Primary

CSS VariableValuePreview
--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 VariableValuePreview
--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

Secondary

CSS VariableValuePreview
--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 VariableValuePreview
--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

Info

CSS VariableValuePreview
--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 VariableValuePreview
--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

Success

CSS VariableValuePreview
--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 VariableValuePreview
--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

Warning

CSS VariableValuePreview
--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 VariableValuePreview
--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

Danger

CSS VariableValuePreview
--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 VariableValuePreview
--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

Utility

CSS VariableValuePreview
--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 VariableValuePreview
--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

Transparent

CSS VariableValuePreview
--dxds-color-surface-transparent-rest#FFFFFE00
CSS VariableValuePreview
--dxds-color-surface-transparent-rest#FFFFFE00

Highlight

CSS VariableValuePreview
--dxds-color-surface-highlight-rest#FFEE80
CSS VariableValuePreview
--dxds-color-surface-highlight-rest#665400

Backdrop

CSS VariableValuePreview
--dxds-color-surface-backdrop-default-restrgba(0, 0, 0, 0.4)
CSS VariableValuePreview
--dxds-color-surface-backdrop-default-restrgba(0, 0, 0, 0.5)

Content CSS Variables

Neutral

CSS VariableValuePreview
--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 VariableValuePreview
--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

Primary

CSS VariableValuePreview
--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 VariableValuePreview
--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

Secondary

CSS VariableValuePreview
--dxds-color-content-secondary-default-rest#161616
--dxds-color-content-secondary-default-hovered#161616
--dxds-color-content-secondary-default-active#161616
CSS VariableValuePreview
--dxds-color-content-secondary-default-rest#FFFFFF
--dxds-color-content-secondary-default-hovered#FFFFFF
--dxds-color-content-secondary-default-active#FFFFFF

Info

CSS VariableValuePreview
--dxds-color-content-info-default-rest#4F6BED
--dxds-color-content-info-default-hovered#3042BD
--dxds-color-content-info-default-active#1D2298
CSS VariableValuePreview
--dxds-color-content-info-default-rest#6A87F0
--dxds-color-content-info-default-hovered#7E99F3
--dxds-color-content-info-default-active#3042BD

Success

CSS VariableValuePreview
--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 VariableValuePreview
--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

Warning

CSS VariableValuePreview
--dxds-color-content-warning-default-rest#F7630C
--dxds-color-content-warning-default-hovered#B24000
--dxds-color-content-warning-default-active#722300
CSS VariableValuePreview
--dxds-color-content-warning-default-rest#F7804C
--dxds-color-content-warning-default-hovered#F78E62
--dxds-color-content-warning-default-active#B24000

Danger

CSS VariableValuePreview
--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 VariableValuePreview
--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

Utility

CSS VariableValuePreview
--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 VariableValuePreview
--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

Transparent

CSS VariableValuePreview
--dxds-color-content-transparent-rest#FFFFFE00
CSS VariableValuePreview
--dxds-color-content-transparent-rest#FFFFFE00

Highlight

CSS VariableValuePreview
--dxds-color-content-highlight-rest#161616
CSS VariableValuePreview
--dxds-color-content-highlight-rest#FFFFFE

Border CSS Variables

Neutral

CSS VariableValuePreview
--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 VariableValuePreview
--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

Primary

CSS VariableValuePreview
--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 VariableValuePreview
--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

Secondary

CSS VariableValuePreview
--dxds-color-border-secondary-default-rest#D6D6D6
--dxds-color-border-secondary-default-hovered#C5C5C5
CSS VariableValuePreview
--dxds-color-border-secondary-default-rest#CECECE
--dxds-color-border-secondary-default-hovered#D6D6D6

Info

CSS VariableValuePreview
--dxds-color-border-info-default-rest#7E99F3
--dxds-color-border-info-default-hovered#5B7AFD
CSS VariableValuePreview
--dxds-color-border-info-default-rest#6A87F0
--dxds-color-border-info-default-hovered#7E99F3

Success

CSS VariableValuePreview
--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 VariableValuePreview
--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

Warning

CSS VariableValuePreview
--dxds-color-border-warning-default-rest#F78E62
--dxds-color-border-warning-default-hovered#F77132
CSS VariableValuePreview
--dxds-color-border-warning-default-rest#F7804C
--dxds-color-border-warning-default-hovered#F78E62

Danger

CSS VariableValuePreview
--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 VariableValuePreview
--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

Utility

CSS VariableValuePreview
--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 VariableValuePreview
--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

Transparent

CSS VariableValuePreview
--dxds-color-border-transparent-rest#FFFFFE00
CSS VariableValuePreview
--dxds-color-border-transparent-rest#FFFFFE00

Focus

CSS VariableValuePreview
--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 VariableValuePreview
--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