public-css-variable-migration.md

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