Skip to content

Latest commit

 

History

History
638 lines (559 loc) · 33.6 KB

File metadata and controls

638 lines (559 loc) · 33.6 KB

Base Theme Palette CSS Variables

Primary

v26.1 and earlier v26.2+
--dxds-primary-10 --dxds-primary-20
--dxds-primary-20 --dxds-primary-30
--dxds-primary-30 --dxds-primary-40
--dxds-primary-40 --dxds-primary-50
--dxds-primary-50 --dxds-primary-60
--dxds-primary-60 --dxds-primary-70
--dxds-primary-70 --dxds-primary-80
--dxds-primary-80 --dxds-primary-90
--dxds-primary-90 --dxds-primary-100
--dxds-primary-100 --dxds-primary-110
--dxds-primary-110 --dxds-primary-120
--dxds-primary-120 --dxds-primary-130
--dxds-primary-130 --dxds-primary-140
--dxds-primary-140 --dxds-primary-150
--dxds-primary-150 --dxds-primary-160
--dxds-primary-160 --dxds-primary-170
--dxds-primary-170 --dxds-primary-180

Secondary

v26.1 and earlier v26.2+
--dxds-secondary-10 --dxds-secondary-20
--dxds-secondary-20 --dxds-secondary-30
--dxds-secondary-30 --dxds-secondary-40
--dxds-secondary-40 --dxds-secondary-50
--dxds-secondary-50 --dxds-secondary-60
--dxds-secondary-60 --dxds-secondary-70
--dxds-secondary-70 --dxds-secondary-80
--dxds-secondary-80 --dxds-secondary-90
--dxds-secondary-90 --dxds-secondary-100
--dxds-secondary-100 --dxds-secondary-110
--dxds-secondary-110 --dxds-secondary-120
--dxds-secondary-120 --dxds-secondary-130
--dxds-secondary-130 --dxds-secondary-140
--dxds-secondary-140 --dxds-secondary-150
--dxds-secondary-150 --dxds-secondary-160
--dxds-secondary-160 --dxds-secondary-170
--dxds-secondary-170 --dxds-secondary-180

Info

v26.1 and earlier v26.2+
--dxds-info-10 --dxds-info-20
--dxds-info-20 --dxds-info-30
--dxds-info-30 --dxds-info-40
--dxds-info-40 --dxds-info-50
--dxds-info-50 --dxds-info-60
--dxds-info-60 --dxds-info-70
--dxds-info-70 --dxds-info-80
--dxds-info-80 --dxds-info-90
--dxds-info-90 --dxds-info-100
--dxds-info-100 --dxds-info-110
--dxds-info-110 --dxds-info-120
--dxds-info-120 --dxds-info-130
--dxds-info-130 --dxds-info-140
--dxds-info-140 --dxds-info-150
--dxds-info-150 --dxds-info-160
--dxds-info-160 --dxds-info-170
--dxds-info-170 --dxds-info-180

Success

v26.1 and earlier v26.2+
--dxds-success-10 --dxds-success-20
--dxds-success-20 --dxds-success-30
--dxds-success-30 --dxds-success-40
--dxds-success-40 --dxds-success-50
--dxds-success-50 --dxds-success-60
--dxds-success-60 --dxds-success-70
--dxds-success-70 --dxds-success-80
--dxds-success-80 --dxds-success-90
--dxds-success-90 --dxds-success-100
--dxds-success-100 --dxds-success-110
--dxds-success-110 --dxds-success-120
--dxds-success-120 --dxds-success-130
--dxds-success-130 --dxds-success-140
--dxds-success-140 --dxds-success-150
--dxds-success-150 --dxds-success-160
--dxds-success-160 --dxds-success-170
--dxds-success-170 --dxds-success-180

Warning

v26.1 and earlier v26.2+
--dxds-warning-10 --dxds-warning-20
--dxds-warning-20 --dxds-warning-30
--dxds-warning-30 --dxds-warning-40
--dxds-warning-40 --dxds-warning-50
--dxds-warning-50 --dxds-warning-60
--dxds-warning-60 --dxds-warning-70
--dxds-warning-70 --dxds-warning-80
--dxds-warning-80 --dxds-warning-90
--dxds-warning-90 --dxds-warning-100
--dxds-warning-100 --dxds-warning-110
--dxds-warning-110 --dxds-warning-120
--dxds-warning-120 --dxds-warning-130
--dxds-warning-130 --dxds-warning-140
--dxds-warning-140 --dxds-warning-150
--dxds-warning-150 --dxds-warning-160
--dxds-warning-160 --dxds-warning-170
--dxds-warning-170 --dxds-warning-180

Danger

v26.1 and earlier v26.2+
--dxds-danger-10 --dxds-danger-20
--dxds-danger-20 --dxds-danger-30
--dxds-danger-30 --dxds-danger-40
--dxds-danger-40 --dxds-danger-50
--dxds-danger-50 --dxds-danger-60
--dxds-danger-60 --dxds-danger-70
--dxds-danger-70 --dxds-danger-80
--dxds-danger-80 --dxds-danger-90
--dxds-danger-90 --dxds-danger-100
--dxds-danger-100 --dxds-danger-110
--dxds-danger-110 --dxds-danger-120
--dxds-danger-120 --dxds-danger-130
--dxds-danger-130 --dxds-danger-140
--dxds-danger-140 --dxds-danger-150
--dxds-danger-150 --dxds-danger-160
--dxds-danger-160 --dxds-danger-170
--dxds-danger-170 --dxds-danger-180

Neutral

v26.1 and earlier v26.2+
--dxds-neutral-10 --dxds-neutral-10
--dxds-neutral-20 --dxds-neutral-20
--dxds-neutral-30 --dxds-neutral-30
--dxds-neutral-40 --dxds-neutral-40
--dxds-neutral-50 --dxds-neutral-60
--dxds-neutral-60 --dxds-neutral-70
--dxds-neutral-70 --dxds-neutral-80
--dxds-neutral-80 --dxds-neutral-90
--dxds-neutral-90 --dxds-neutral-100
--dxds-neutral-100 --dxds-neutral-110
--dxds-neutral-110 --dxds-neutral-120
--dxds-neutral-120 --dxds-neutral-130
--dxds-neutral-130 --dxds-neutral-140
--dxds-neutral-140 --dxds-neutral-150
--dxds-neutral-150 --dxds-neutral-160
--dxds-neutral-160 --dxds-neutral-170
--dxds-neutral-170 --dxds-neutral-180
--dxds-neutral-180 --dxds-neutral-190
--dxds-neutral-190 --dxds-neutral-210
--dxds-neutral-200 --dxds-neutral-220
--dxds-neutral-210 --dxds-neutral-230
--dxds-neutral-220 --dxds-neutral-240
--dxds-neutral-230 --dxds-neutral-250
--dxds-neutral-240 --dxds-neutral-260
--dxds-neutral-250 --dxds-neutral-270

Semantic Background CSS Variables

Neutral

v26.1 and earlier v26.2+
--dxds-color-surface-neutral-default-rest --dxds-color-bg
--dxds-color-surface-neutral-default-hovered --dxds-color-bg-hovered
--dxds-color-surface-neutral-default-active --dxds-color-bg-active
--dxds-color-surface-neutral-default-selected --dxds-color-bg-selected
--dxds-color-surface-neutral-default-selected-hovered --dxds-color-bg-selected-hovered
--dxds-color-surface-neutral-default-disabled --dxds-color-bg-disabled
--dxds-color-surface-neutral-default-inverted-rest --dxds-color-bg-inverted
--dxds-color-surface-neutral-default-inverted-hovered --dxds-color-bg-inverted-hovered
--dxds-color-surface-neutral-default-inverted-active --dxds-color-bg-inverted-active
--dxds-color-surface-neutral-default-inverted-selected --dxds-color-bg-inverted-selected
--dxds-color-surface-neutral-default-inverted-disabled --dxds-color-bg-inverted-disabled
--dxds-color-surface-neutral-default-static-light-rest --dxds-color-bg-static-light
--dxds-color-surface-neutral-default-static-light-hovered --dxds-color-bg-static-light-hovered
--dxds-color-surface-neutral-default-static-light-active --dxds-color-bg-static-light-active
--dxds-color-surface-neutral-default-static-light-selected --dxds-color-bg-static-light-selected
--dxds-color-surface-neutral-default-static-light-disabled --dxds-color-bg-static-light-disabled
--dxds-color-surface-neutral-default-static-dark-rest --dxds-color-bg-static-dark
--dxds-color-surface-neutral-default-static-dark-hovered --dxds-color-bg-static-dark-hovered
--dxds-color-surface-neutral-default-static-dark-active --dxds-color-bg-static-dark-active
--dxds-color-surface-neutral-default-static-dark-selected --dxds-color-bg-static-dark-selected
--dxds-color-surface-neutral-default-static-dark-disabled --dxds-color-bg-static-dark-disabled
--dxds-color-surface-neutral-alpha-rest --dxds-color-bg-alpha
--dxds-color-surface-neutral-alpha-hovered --dxds-color-bg-alpha-hovered
--dxds-color-surface-neutral-alpha-active --dxds-color-bg-alpha-active
--dxds-color-surface-neutral-alpha-selected --dxds-color-bg-alpha-selected
--dxds-color-surface-neutral-alpha-disabled --dxds-color-bg-alpha-disabled
--dxds-color-surface-neutral-subdued-rest --dxds-color-bg-canvas
--dxds-color-surface-neutral-deep-rest --dxds-color-bg-low
--dxds-color-surface-neutral-deep-hovered --dxds-color-bg-low-hovered
--dxds-color-surface-neutral-deep-active --dxds-color-bg-low-active
--dxds-color-surface-neutral-default-on-surface-rest --dxds-color-bg-on-color
--dxds-color-surface-neutral-default-on-surface-hovered --dxds-color-bg-on-color-hovered
--dxds-color-surface-neutral-default-on-surface-active --dxds-color-bg-on-color-active
--dxds-color-surface-neutral-default-on-surface-selected --dxds-color-bg-on-color-selected
--dxds-color-surface-neutral-default-on-surface-disabled --dxds-color-bg-on-color-disabled
--dxds-color-surface-neutral-alpha-on-surface-rest --dxds-color-bg-on-color-alpha
--dxds-color-surface-neutral-alpha-on-surface-hovered --dxds-color-bg-on-color-alpha-hovered
--dxds-color-surface-neutral-alpha-on-surface-active --dxds-color-bg-on-color-alpha-active
--dxds-color-surface-neutral-alpha-on-surface-disabled --dxds-color-bg-on-color-alpha-disabled
--dxds-color-surface-neutral-compound-on-surface-rest --dxds-color-bg-on-color-shared
--dxds-color-surface-neutral-compound-on-surface-disabled --dxds-color-bg-on-color-shared-disabled
--dxds-color-surface-neutral-compound-on-surface-hovered --dxds-color-bg-on-color
--dxds-color-surface-neutral-compound-on-surface-active --dxds-color-bg-on-color
--dxds-color-surface-neutral-deep-disabled --dxds-color-bg-disabled
--dxds-color-surface-neutral-subdued-hovered --dxds-color-bg-low-hovered
--dxds-color-surface-neutral-subdued-active --dxds-color-bg-low-active
--dxds-color-surface-neutral-subdued-disabled --dxds-color-bg-disabled

Primary

v26.1 and earlier v26.2+
--dxds-color-surface-primary-default-rest --dxds-color-bg-primary
--dxds-color-surface-primary-default-hovered --dxds-color-bg-primary-hovered
--dxds-color-surface-primary-default-active --dxds-color-bg-primary-active
--dxds-color-surface-primary-default-selected --dxds-color-bg-primary-selected
--dxds-color-surface-primary-alpha-rest --dxds-color-bg-primary-alpha
--dxds-color-surface-primary-alpha-hovered --dxds-color-bg-primary-alpha-hovered
--dxds-color-surface-primary-alpha-active --dxds-color-bg-primary-alpha-active
--dxds-color-surface-primary-alpha-selected --dxds-color-bg-primary-alpha-selected
--dxds-color-surface-primary-compound-rest --dxds-color-bg-primary-shared
--dxds-color-surface-primary-compound-hovered --dxds-color-bg-primary-shared-hovered
--dxds-color-surface-primary-compound-active --dxds-color-bg-primary-shared-active
--dxds-color-surface-primary-subdued-rest --dxds-color-bg-primary-subtle
--dxds-color-surface-primary-subdued-hovered --dxds-color-bg-primary-subtle-hovered
--dxds-color-surface-primary-subdued-active --dxds-color-bg-primary-subtle-active
--dxds-color-surface-primary-subdued-selected --dxds-color-bg-primary-subtle-selected
--dxds-color-surface-primary-deep-rest --dxds-color-bg-primary-subtler
--dxds-color-surface-primary-deep-hovered --dxds-color-bg-primary-subtler-hovered
--dxds-color-surface-primary-deep-active --dxds-color-bg-primary-subtler-active
--dxds-color-surface-primary-deep-selected --dxds-color-bg-primary-subtler-selected
--dxds-color-surface-primary-default-disabled --dxds-color-bg-disabled
--dxds-color-surface-primary-deep-static-light-rest --dxds-color-bg-primary-subtler
--dxds-color-surface-primary-deep-static-light-hovered --dxds-color-bg-primary-subtler-hovered
--dxds-color-surface-primary-deep-static-light-selected --dxds-color-bg-primary-subtler-selected

Secondary

v26.1 and earlier v26.2+
--dxds-color-surface-secondary-default-rest --dxds-color-bg-secondary
--dxds-color-surface-secondary-default-hovered --dxds-color-bg-secondary-hovered
--dxds-color-surface-secondary-default-active --dxds-color-bg-secondary-active
--dxds-color-surface-secondary-default-selected --dxds-color-bg-secondary-selected
--dxds-color-surface-secondary-subdued-rest --dxds-color-bg-secondary-subtle
--dxds-color-surface-secondary-default-disabled --dxds-color-bg-disabled

Info

v26.1 and earlier v26.2+
--dxds-color-surface-info-default-rest --dxds-color-bg-info
--dxds-color-surface-info-default-hovered --dxds-color-bg-info-hovered
--dxds-color-surface-info-default-active --dxds-color-bg-info-active
--dxds-color-surface-info-default-selected --dxds-color-bg-info-selected
--dxds-color-surface-info-subdued-rest --dxds-color-bg-info-subtle
--dxds-color-surface-info-subdued-hovered --dxds-color-bg-info-subtle-hovered
--dxds-color-surface-info-subdued-active --dxds-color-bg-info-subtle-active
--dxds-color-surface-info-subdued-selected --dxds-color-bg-info-subtle-selected
--dxds-color-surface-info-deep-rest --dxds-color-bg-info-subtler
--dxds-color-surface-info-deep-hovered --dxds-color-bg-info-subtler-hovered
--dxds-color-surface-info-deep-active --dxds-color-bg-info-subtler-active
--dxds-color-surface-info-deep-selected --dxds-color-bg-info-subtler-selected

Success

v26.1 and earlier v26.2+
--dxds-color-surface-success-default-rest --dxds-color-bg-success
--dxds-color-surface-success-default-hovered --dxds-color-bg-success-hovered
--dxds-color-surface-success-default-active --dxds-color-bg-success-active
--dxds-color-surface-success-default-selected --dxds-color-bg-success-selected
--dxds-color-surface-success-compound-rest --dxds-color-bg-success-shared
--dxds-color-surface-success-compound-hovered --dxds-color-bg-success-shared-hovered
--dxds-color-surface-success-compound-active --dxds-color-bg-success-shared-active
--dxds-color-surface-success-subdued-rest --dxds-color-bg-success-subtle
--dxds-color-surface-success-subdued-hovered --dxds-color-bg-success-subtle-hovered
--dxds-color-surface-success-subdued-active --dxds-color-bg-success-subtle-active
--dxds-color-surface-success-subdued-selected --dxds-color-bg-success-subtle-selected
--dxds-color-surface-success-deep-rest --dxds-color-bg-success-subtler
--dxds-color-surface-success-deep-hovered --dxds-color-bg-success-subtler-hovered
--dxds-color-surface-success-deep-active --dxds-color-bg-success-subtler-active
--dxds-color-surface-success-deep-selected --dxds-color-bg-success-subtler-selected

Warning

v26.1 and earlier v26.2+
--dxds-color-surface-warning-default-rest --dxds-color-bg-warning
--dxds-color-surface-warning-default-hovered --dxds-color-bg-warning-hovered
--dxds-color-surface-warning-default-active --dxds-color-bg-warning-active
--dxds-color-surface-warning-default-selected --dxds-color-bg-warning-selected
--dxds-color-surface-warning-subdued-rest --dxds-color-bg-warning-subtle
--dxds-color-surface-warning-subdued-hovered --dxds-color-bg-warning-subtle-hovered
--dxds-color-surface-warning-subdued-active --dxds-color-bg-warning-subtle-active
--dxds-color-surface-warning-subdued-selected --dxds-color-bg-warning-subtle-selected
--dxds-color-surface-warning-deep-rest --dxds-color-bg-warning-subtler
--dxds-color-surface-warning-deep-hovered --dxds-color-bg-warning-subtler-hovered
--dxds-color-surface-warning-deep-active --dxds-color-bg-warning-subtler-active
--dxds-color-surface-warning-deep-selected --dxds-color-bg-warning-subtler-selected

Danger

v26.1 and earlier v26.2+
--dxds-color-surface-danger-default-rest --dxds-color-bg-danger
--dxds-color-surface-danger-default-hovered --dxds-color-bg-danger-hovered
--dxds-color-surface-danger-default-active --dxds-color-bg-danger-active
--dxds-color-surface-danger-default-selected --dxds-color-bg-danger-selected
--dxds-color-surface-danger-compound-rest --dxds-color-bg-danger-shared
--dxds-color-surface-danger-compound-hovered --dxds-color-bg-danger-shared-hovered
--dxds-color-surface-danger-compound-active --dxds-color-bg-danger-shared-active
--dxds-color-surface-danger-subdued-rest --dxds-color-bg-danger-subtle
--dxds-color-surface-danger-subdued-hovered --dxds-color-bg-danger-subtle-hovered
--dxds-color-surface-danger-subdued-active --dxds-color-bg-danger-subtle-active
--dxds-color-surface-danger-subdued-selected --dxds-color-bg-danger-subtle-selected
--dxds-color-surface-danger-deep-rest --dxds-color-bg-danger-subtler
--dxds-color-surface-danger-deep-hovered --dxds-color-bg-danger-subtler-hovered
--dxds-color-surface-danger-deep-active --dxds-color-bg-danger-subtler-active
--dxds-color-surface-danger-deep-selected --dxds-color-bg-danger-subtler-selected

Utility

v26.1 and earlier v26.2+
--dxds-color-surface-utility-blue-default-rest --dxds-color-bg-blue
--dxds-color-surface-utility-blue-subdued-rest --dxds-color-bg-blue-subtle
--dxds-color-surface-utility-cyan-default-rest --dxds-color-bg-cyan
--dxds-color-surface-utility-cyan-subdued-rest --dxds-color-bg-cyan-subtle
--dxds-color-surface-utility-gray-default-rest --dxds-color-bg-gray
--dxds-color-surface-utility-gray-subdued-rest --dxds-color-bg-gray-subtle
--dxds-color-surface-utility-green-default-rest --dxds-color-bg-green
--dxds-color-surface-utility-green-subdued-rest --dxds-color-bg-green-subtle
--dxds-color-surface-utility-indigo-default-rest --dxds-color-bg-indigo
--dxds-color-surface-utility-indigo-subdued-rest --dxds-color-bg-indigo-subtle
--dxds-color-surface-utility-orange-default-rest --dxds-color-bg-orange
--dxds-color-surface-utility-orange-subdued-rest --dxds-color-bg-orange-subtle
--dxds-color-surface-utility-pink-default-rest --dxds-color-bg-pink
--dxds-color-surface-utility-pink-subdued-rest --dxds-color-bg-pink-subtle
--dxds-color-surface-utility-purple-default-rest --dxds-color-bg-purple
--dxds-color-surface-utility-purple-subdued-rest --dxds-color-bg-purple-subtle
--dxds-color-surface-utility-red-default-rest --dxds-color-bg-red
--dxds-color-surface-utility-red-subdued-rest --dxds-color-bg-red-subtle
--dxds-color-surface-utility-teal-default-rest --dxds-color-bg-teal
--dxds-color-surface-utility-teal-subdued-rest --dxds-color-bg-teal-subtle
--dxds-color-surface-utility-yellow-default-rest --dxds-color-bg-yellow
--dxds-color-surface-utility-yellow-subdued-rest --dxds-color-bg-yellow-subtle

Transparent

v26.1 and earlier v26.2+
--dxds-color-surface-transparent-rest --dxds-color-none

Highlight

v26.1 and earlier v26.2+
--dxds-color-surface-highlight-rest --dxds-color-bg-highlight

Backdrop

v26.1 and earlier v26.2+
--dxds-color-surface-backdrop-default-rest --dxds-color-bg-backdrop

Semantic Content CSS Variables

Neutral

v26.1 and earlier v26.2+
--dxds-color-content-neutral-default-rest --dxds-color-content
--dxds-color-content-neutral-default-disabled --dxds-color-content-disabled
--dxds-color-content-neutral-default-inverted-rest --dxds-color-content-inverted
--dxds-color-content-neutral-default-inverted-disabled --dxds-color-content-inverted-disabled
--dxds-color-content-neutral-default-static-light-rest --dxds-color-content-static-light
--dxds-color-content-neutral-default-static-light-disabled --dxds-color-content-static-light-disabled
--dxds-color-content-neutral-default-static-dark-rest --dxds-color-content-static-dark
--dxds-color-content-neutral-default-static-dark-disabled --dxds-color-content-static-dark-disabled
--dxds-color-content-neutral-subdued-rest --dxds-color-content-subtle
--dxds-color-content-neutral-deep-rest --dxds-color-content-subtler
--dxds-color-content-neutral-default-on-surface-rest --dxds-color-content-on-color
--dxds-color-content-neutral-default-on-surface-disabled --dxds-color-content-on-color-disabled
--dxds-color-content-neutral-compound-on-surface-rest --dxds-color-content-on-color-shared
--dxds-color-content-neutral-compound-on-surface-disabled --dxds-color-content-on-color-shared-disabled
--dxds-color-content-neutral-subdued-on-surface-rest --dxds-color-content-on-color-subtle
--dxds-color-content-neutral-deep-on-surface-rest --dxds-color-content-on-color-subtler
--dxds-color-content-neutral-default-hovered --dxds-color-content
--dxds-color-content-neutral-default-active --dxds-color-content
--dxds-color-content-neutral-default-selected --dxds-color-content
--dxds-color-content-neutral-default-selected-hovered --dxds-color-content
--dxds-color-content-neutral-default-inverted-hovered --dxds-color-content-inverted
--dxds-color-content-neutral-default-inverted-active --dxds-color-content-inverted
--dxds-color-content-neutral-default-static-light-hovered --dxds-color-content-static-light
--dxds-color-content-neutral-default-static-light-active --dxds-color-content-static-light
--dxds-color-content-neutral-default-static-dark-hovered --dxds-color-content-static-dark
--dxds-color-content-neutral-default-static-dark-active --dxds-color-content-static-dark
--dxds-color-content-neutral-subdued-hovered --dxds-color-content
--dxds-color-content-neutral-subdued-active --dxds-color-content
--dxds-color-content-neutral-subdued-selected --dxds-color-content
--dxds-color-content-neutral-subdued-selected-hovered --dxds-color-content
--dxds-color-content-neutral-subdued-disabled --dxds-color-content-disabled
--dxds-color-content-neutral-subdued-inverted-rest --dxds-color-content-subtle
--dxds-color-content-neutral-subdued-static-light-rest --dxds-color-content-subtle
--dxds-color-content-neutral-subdued-static-dark-rest --dxds-color-content-subtle
--dxds-color-content-neutral-deep-hovered --dxds-color-content
--dxds-color-content-neutral-deep-active --dxds-color-content
--dxds-color-content-neutral-deep-selected --dxds-color-content
--dxds-color-content-neutral-deep-disabled --dxds-color-content-disabled
--dxds-color-content-neutral-default-on-surface-hovered --dxds-color-content-on-color
--dxds-color-content-neutral-default-on-surface-active --dxds-color-content-on-color
--dxds-color-content-neutral-compound-on-surface-hovered --dxds-color-content-on-color-shared
--dxds-color-content-neutral-compound-on-surface-active --dxds-color-content-on-color-shared
--dxds-color-content-neutral-subdued-on-surface-hovered --dxds-color-content-on-color-subtle
--dxds-color-content-neutral-subdued-on-surface-active --dxds-color-content-on-color-subtle
--dxds-color-content-neutral-subdued-on-surface-disabled --dxds-color-content-on-color-disabled
--dxds-color-content-neutral-deep-on-surface-hovered --dxds-color-content-on-color-subtler
--dxds-color-content-neutral-deep-on-surface-active --dxds-color-content-on-color-subtler
--dxds-color-content-neutral-deep-on-surface-disabled --dxds-color-content-on-color-disabled

Primary

v26.1 and earlier v26.2+
--dxds-color-content-primary-default-rest --dxds-color-content-primary
--dxds-color-content-primary-default-hovered --dxds-color-content-primary-hovered
--dxds-color-content-primary-default-active --dxds-color-content-primary-active
--dxds-color-content-primary-compound-rest --dxds-color-content-primary-shared
--dxds-color-content-primary-compound-hovered --dxds-color-content-primary-shared-hovered
--dxds-color-content-primary-compound-active --dxds-color-content-primary-shared-active

Secondary

v26.1 and earlier v26.2+
--dxds-color-content-secondary-default-rest --dxds-color-content
--dxds-color-content-secondary-default-hovered --dxds-color-content
--dxds-color-content-secondary-default-active --dxds-color-content

Info

v26.1 and earlier v26.2+
--dxds-color-content-info-default-rest --dxds-color-content-info
--dxds-color-content-info-default-hovered --dxds-color-content-info-hovered
--dxds-color-content-info-default-active --dxds-color-content-info-active

Success

v26.1 and earlier v26.2+
--dxds-color-content-success-default-rest --dxds-color-content-success
--dxds-color-content-success-default-hovered --dxds-color-content-success-hovered
--dxds-color-content-success-default-active --dxds-color-content-success-active
--dxds-color-content-success-compound-rest --dxds-color-content-success-shared
--dxds-color-content-success-compound-hovered --dxds-color-content-success-shared-hovered
--dxds-color-content-success-compound-active --dxds-color-content-success-shared-active

Warning

v26.1 and earlier v26.2+
--dxds-color-content-warning-default-rest --dxds-color-content-warning
--dxds-color-content-warning-default-hovered --dxds-color-content-warning-hovered
--dxds-color-content-warning-default-active --dxds-color-content-warning-active

Danger

v26.1 and earlier v26.2+
--dxds-color-content-danger-default-rest --dxds-color-content-danger
--dxds-color-content-danger-default-hovered --dxds-color-content-danger-hovered
--dxds-color-content-danger-default-active --dxds-color-content-danger-active
--dxds-color-content-danger-compound-rest --dxds-color-content-danger-shared
--dxds-color-content-danger-compound-hovered --dxds-color-content-danger-shared-hovered
--dxds-color-content-danger-compound-active --dxds-color-content-danger-shared-active

Utility

v26.1 and earlier v26.2+
--dxds-color-content-utility-blue-default-rest --dxds-color-content-blue
--dxds-color-content-utility-blue-subdued-on-surface-rest --dxds-color-content-on-subtle-blue
--dxds-color-content-utility-cyan-default-rest --dxds-color-content-cyan
--dxds-color-content-utility-cyan-subdued-on-surface-rest --dxds-color-content-on-subtle-cyan
--dxds-color-content-utility-gray-default-rest --dxds-color-content-gray
--dxds-color-content-utility-gray-subdued-on-surface-rest --dxds-color-content-on-subtle-gray
--dxds-color-content-utility-green-default-rest --dxds-color-content-green
--dxds-color-content-utility-green-subdued-on-surface-rest --dxds-color-content-on-subtle-green
--dxds-color-content-utility-indigo-default-rest --dxds-color-content-indigo
--dxds-color-content-utility-indigo-subdued-on-surface-rest --dxds-color-content-on-subtle-indigo
--dxds-color-content-utility-orange-default-rest --dxds-color-content-orange
--dxds-color-content-utility-orange-subdued-on-surface-rest --dxds-color-content-on-subtle-orange
--dxds-color-content-utility-pink-default-rest --dxds-color-content-pink
--dxds-color-content-utility-pink-subdued-on-surface-rest --dxds-color-content-on-subtle-pink
--dxds-color-content-utility-purple-default-rest --dxds-color-content-purple
--dxds-color-content-utility-purple-subdued-on-surface-rest --dxds-color-content-on-subtle-purple
--dxds-color-content-utility-red-default-rest --dxds-color-content-red
--dxds-color-content-utility-red-subdued-on-surface-rest --dxds-color-content-on-subtle-red
--dxds-color-content-utility-teal-default-rest --dxds-color-content-teal
--dxds-color-content-utility-teal-subdued-on-surface-rest --dxds-color-content-on-subtle-teal
--dxds-color-content-utility-yellow-default-rest --dxds-color-content-yellow
--dxds-color-content-utility-yellow-subdued-on-surface-rest --dxds-color-content-on-subtle-yellow

Transparent

v26.1 and earlier v26.2+
--dxds-color-content-transparent-rest --dxds-color-none

Highlight

v26.1 and earlier v26.2+
--dxds-color-content-highlight-rest --dxds-color-content-on-highlight

Semantic Border CSS Variables

Neutral

v26.1 and earlier v26.2+
--dxds-color-border-neutral-default-rest --dxds-color-border
--dxds-color-border-neutral-default-hovered --dxds-color-border-hovered
--dxds-color-border-neutral-default-active --dxds-color-border-active
--dxds-color-border-neutral-default-disabled --dxds-color-border-disabled
--dxds-color-border-neutral-default-inverted-rest --dxds-color-border-inverted
--dxds-color-border-neutral-default-inverted-hovered --dxds-color-border-inverted-hovered
--dxds-color-border-neutral-default-inverted-active --dxds-color-border-inverted-active
--dxds-color-border-neutral-default-inverted-disabled --dxds-color-border-inverted-disabled
--dxds-color-border-neutral-default-static-light-rest --dxds-color-border-static-light
--dxds-color-border-neutral-default-static-light-hovered --dxds-color-border-static-light-hovered
--dxds-color-border-neutral-default-static-light-active --dxds-color-border-static-light-active
--dxds-color-border-neutral-default-static-light-disabled --dxds-color-border-static-light-disabled
--dxds-color-border-neutral-default-static-dark-rest --dxds-color-border-static-dark
--dxds-color-border-neutral-default-static-dark-hovered --dxds-color-border-static-dark-hovered
--dxds-color-border-neutral-default-static-dark-active --dxds-color-border-static-dark-active
--dxds-color-border-neutral-default-static-dark-disabled --dxds-color-border-static-dark-disabled
--dxds-color-border-neutral-subdued-rest --dxds-color-border-subtle
--dxds-color-border-neutral-deep-rest --dxds-color-border-subtler
--dxds-color-border-neutral-accessible-rest --dxds-color-border-contrast
--dxds-color-border-neutral-accessible-hovered --dxds-color-border-contrast-hovered
--dxds-color-border-neutral-accessible-active --dxds-color-border-contrast-active
--dxds-color-border-neutral-compound-on-surface-rest --dxds-color-border-on-color-shared
--dxds-color-border-neutral-compound-on-surface-disabled --dxds-color-border-on-color-shared-disabled
--dxds-color-border-neutral-compound-on-surface-hovered --dxds-color-border-on-color-shared
--dxds-color-border-neutral-compound-on-surface-active --dxds-color-border-on-color-shared
--dxds-color-border-neutral-accessible-disabled --dxds-color-border-disabled

Primary

v26.1 and earlier v26.2+
--dxds-color-border-primary-default-rest --dxds-color-border-primary
--dxds-color-border-primary-compound-rest --dxds-color-border-primary-shared
--dxds-color-border-primary-compound-hovered --dxds-color-border-primary-shared-hovered
--dxds-color-border-primary-compound-active --dxds-color-border-primary-shared-active
--dxds-color-border-primary-default-hovered --dxds-color-border-primary

Secondary

v26.1 and earlier v26.2+
--dxds-color-border-secondary-default-rest --dxds-color-border
--dxds-color-border-secondary-default-hovered --dxds-color-border-hovered

Info

v26.1 and earlier v26.2+
--dxds-color-border-info-default-rest --dxds-color-border-info
--dxds-color-border-info-default-hovered --dxds-color-border-info

Success

v26.1 and earlier v26.2+
--dxds-color-border-success-default-rest --dxds-color-border-success
--dxds-color-border-success-compound-rest --dxds-color-border-success-shared
--dxds-color-border-success-compound-hovered --dxds-color-border-success-shared-hovered
--dxds-color-border-success-compound-active --dxds-color-border-success-shared-active
--dxds-color-border-success-default-hovered --dxds-color-border-success

Warning

v26.1 and earlier v26.2+
--dxds-color-border-warning-default-rest --dxds-color-border-warning
--dxds-color-border-warning-default-hovered --dxds-color-border-warning

Danger

v26.1 and earlier v26.2+
--dxds-color-border-danger-default-rest --dxds-color-border-danger
--dxds-color-border-danger-compound-rest --dxds-color-border-danger-shared
--dxds-color-border-danger-compound-hovered --dxds-color-border-danger-shared-hovered
--dxds-color-border-danger-compound-active --dxds-color-border-danger-shared-active
--dxds-color-border-danger-default-hovered --dxds-color-border-danger

Utility

v26.1 and earlier v26.2+
--dxds-color-border-utility-blue-default-rest --dxds-color-border-blue
--dxds-color-border-utility-cyan-default-rest --dxds-color-border-cyan
--dxds-color-border-utility-gray-default-rest --dxds-color-border-gray
--dxds-color-border-utility-green-default-rest --dxds-color-border-green
--dxds-color-border-utility-indigo-default-rest --dxds-color-border-indigo
--dxds-color-border-utility-orange-default-rest --dxds-color-border-orange
--dxds-color-border-utility-pink-default-rest --dxds-color-border-pink
--dxds-color-border-utility-purple-default-rest --dxds-color-border-purple
--dxds-color-border-utility-red-default-rest --dxds-color-border-red
--dxds-color-border-utility-teal-default-rest --dxds-color-border-teal
--dxds-color-border-utility-yellow-default-rest --dxds-color-border-yellow

Transparent

v26.1 and earlier v26.2+
--dxds-color-border-transparent-rest --dxds-color-none

Focus

v26.1 and earlier v26.2+
--dxds-color-border-focus-default --dxds-color-border-focus