Representative Design Tokens and CSS Utilities for foreground, surfaces, and border colors.
Colors for text and icons
Color
|
CSS variable
|
CSS utility
| ||
|---|---|---|---|---|
Aa
| current | - | d-fc-current | |
Aa
| transparent | - | d-fc-transparent | |
Aa
| unset | - | d-fc-unset | |
Aa
| disabled | var(--dt-color-foreground-disabled) | d-fc-disabled | |
Aa
| muted | var(--dt-color-foreground-muted) | d-fc-muted | |
Aa
| placeholder | var(--dt-color-foreground-placeholder) | d-fc-placeholder | |
Aa
| primary | var(--dt-color-foreground-primary) | d-fc-primary | |
Aa
| secondary | var(--dt-color-foreground-secondary) | d-fc-secondary | |
Aa
| tertiary | var(--dt-color-foreground-tertiary) | d-fc-tertiary | |
Aa
| neutral black | var(--dt-color-neutral-black) | d-fc-neutral-black | |
Aa
| neutral transparent | var(--dt-color-neutral-transparent) | d-fc-neutral-transparent | |
Aa
| neutral white | var(--dt-color-neutral-white) | d-fc-neutral-white | |
Foreground colors distinguishing important information with a status role.
Color
|
CSS variable
|
CSS utility
| ||
|---|---|---|---|---|
Aa
| critical | var(--dt-color-foreground-critical) | d-fc-critical | |
Aa
| critical strong | var(--dt-color-foreground-critical-strong) | d-fc-critical-strong | |
Aa
| info | var(--dt-color-foreground-info) | d-fc-info | |
Aa
| info strong | var(--dt-color-foreground-info-strong) | d-fc-info-strong | |
Aa
| positive | var(--dt-color-foreground-positive) | d-fc-positive | |
Aa
| positive strong | var(--dt-color-foreground-positive-strong) | d-fc-positive-strong | |
Aa
| warning | var(--dt-color-foreground-warning) | d-fc-warning | |
Aa
| warning strong Indicates a strong warning state on surfaces that require a stronger contrast. | var(--dt-color-foreground-warning-strong) | d-fc-warning-strong | |
Background colors for application UI surfaces. Surface colors are container blocks — such as pages, modals, tables, headers, and cards — containing foreground content or elements.
Color
|
CSS variable
|
CSS utility
| ||
|---|---|---|---|---|
| transparent | - | d-bgc-transparent | ||
| unset | - | d-bgc-unset | ||
| ai | var(--dt-color-surface-ai) | d-bgc-ai | ||
| backdrop Background color for a modal-like backdrop. | var(--dt-color-surface-backdrop) | d-bgc-backdrop | ||
| bold | var(--dt-color-surface-bold) | d-bgc-bold | ||
| bold opaque | var(--dt-color-surface-bold-opaque) | d-bgc-bold-opaque | ||
| brand Background surface color containing messaging or elements communicated as generally informational. | var(--dt-color-surface-brand) | d-bgc-brand | ||
| brand opaque | var(--dt-color-surface-brand-opaque) | d-bgc-brand-opaque | ||
| brand strong | var(--dt-color-surface-brand-strong) | d-bgc-brand-strong | ||
| brand subtle A softer version of the default informational surface. | var(--dt-color-surface-brand-subtle) | d-bgc-brand-subtle | ||
| brand subtle opaque | var(--dt-color-surface-brand-subtle-opaque) | d-bgc-brand-subtle-opaque | ||
| contrast | var(--dt-color-surface-contrast) | d-bgc-contrast | ||
| contrast opaque | var(--dt-color-surface-contrast-opaque) | d-bgc-contrast-opaque | ||
| critical Background surface color containing error, danger, or otherwise critical messaging or elements. | var(--dt-color-surface-critical) | d-bgc-critical | ||
| critical opaque | var(--dt-color-surface-critical-opaque) | d-bgc-critical-opaque | ||
| critical strong | var(--dt-color-surface-critical-strong) | d-bgc-critical-strong | ||
| critical subtle A softer version of the Critical surface. | var(--dt-color-surface-critical-subtle) | d-bgc-critical-subtle | ||
| critical subtle opaque | var(--dt-color-surface-critical-subtle-opaque) | d-bgc-critical-subtle-opaque | ||
| info Background surface color containing messaging or elements communicated as generally informational. | var(--dt-color-surface-info) | d-bgc-info | ||
| info opaque | var(--dt-color-surface-info-opaque) | d-bgc-info-opaque | ||
| info strong | var(--dt-color-surface-info-strong) | d-bgc-info-strong | ||
| info subtle | var(--dt-color-surface-info-subtle) | d-bgc-info-subtle | ||
| info subtle opaque | var(--dt-color-surface-info-subtle-opaque) | d-bgc-info-subtle-opaque | ||
| moderate | var(--dt-color-surface-moderate) | d-bgc-moderate | ||
| moderate opaque | var(--dt-color-surface-moderate-opaque) | d-bgc-moderate-opaque | ||
| overlay | var(--dt-color-surface-overlay) | d-bgc-overlay | ||
| positive Background surface color containing messaging or elements expressing a positive or successful state. | var(--dt-color-surface-positive) | d-bgc-positive | ||
| positive opaque | var(--dt-color-surface-positive-opaque) | d-bgc-positive-opaque | ||
| positive strong | var(--dt-color-surface-positive-strong) | d-bgc-positive-strong | ||
| positive subtle A softer version of the default positive surface. | var(--dt-color-surface-positive-subtle) | d-bgc-positive-subtle | ||
| positive subtle opaque | var(--dt-color-surface-positive-subtle-opaque) | d-bgc-positive-subtle-opaque | ||
| primary | var(--dt-color-surface-primary) | d-bgc-primary | ||
| primary opaque | var(--dt-color-surface-primary-opaque) | d-bgc-primary-opaque | ||
| secondary | var(--dt-color-surface-secondary) | d-bgc-secondary | ||
| secondary opaque | var(--dt-color-surface-secondary-opaque) | d-bgc-secondary-opaque | ||
| strong | var(--dt-color-surface-strong) | d-bgc-strong | ||
| strong opaque | var(--dt-color-surface-strong-opaque) | d-bgc-strong-opaque | ||
| warning | var(--dt-color-surface-warning) | d-bgc-warning | ||
| warning opaque | var(--dt-color-surface-warning-opaque) | d-bgc-warning-opaque | ||
| warning strong | var(--dt-color-surface-warning-strong) | d-bgc-warning-strong | ||
| warning subtle | var(--dt-color-surface-warning-subtle) | d-bgc-warning-subtle | ||
| warning subtle opaque | var(--dt-color-surface-warning-subtle-opaque) | d-bgc-warning-subtle-opaque | ||
| chart neutral | var(--dt-color-chart-neutral) | d-bgc-chart-neutral | ||
| chart accent | var(--dt-color-chart-accent) | d-bgc-chart-accent | ||
| chart accent hover | var(--dt-color-chart-accent-hover) | d-bgc-chart-accent-hover | ||
| chart accent selected | var(--dt-color-chart-accent-selected) | d-bgc-chart-accent-selected | ||
| chart critical | var(--dt-color-chart-critical) | d-bgc-chart-critical | ||
| chart critical hover | var(--dt-color-chart-critical-hover) | d-bgc-chart-critical-hover | ||
| chart critical selected | var(--dt-color-chart-critical-selected) | d-bgc-chart-critical-selected | ||
| chart info | var(--dt-color-chart-info) | d-bgc-chart-info | ||
| chart info hover | var(--dt-color-chart-info-hover) | d-bgc-chart-info-hover | ||
| chart info selected | var(--dt-color-chart-info-selected) | d-bgc-chart-info-selected | ||
| chart positive | var(--dt-color-chart-positive) | d-bgc-chart-positive | ||
| chart positive hover | var(--dt-color-chart-positive-hover) | d-bgc-chart-positive-hover | ||
| chart positive selected | var(--dt-color-chart-positive-selected) | d-bgc-chart-positive-selected | ||
| chart warning | var(--dt-color-chart-warning) | d-bgc-chart-warning | ||
| chart warning hover | var(--dt-color-chart-warning-hover) | d-bgc-chart-warning-hover | ||
| chart warning selected | var(--dt-color-chart-warning-selected) | d-bgc-chart-warning-selected | ||
| chart categorical 01 | var(--dt-color-chart-categorical-01) | d-bgc-chart-categorical-01 | ||
| chart categorical 01 hover | var(--dt-color-chart-categorical-01-hover) | d-bgc-chart-categorical-01-hover | ||
| chart categorical 01 selected | var(--dt-color-chart-categorical-01-selected) | d-bgc-chart-categorical-01-selected | ||
| chart categorical 02 | var(--dt-color-chart-categorical-02) | d-bgc-chart-categorical-02 | ||
| chart categorical 02 hover | var(--dt-color-chart-categorical-02-hover) | d-bgc-chart-categorical-02-hover | ||
| chart categorical 02 selected | var(--dt-color-chart-categorical-02-selected) | d-bgc-chart-categorical-02-selected | ||
| chart categorical 03 | var(--dt-color-chart-categorical-03) | d-bgc-chart-categorical-03 | ||
| chart categorical 03 hover | var(--dt-color-chart-categorical-03-hover) | d-bgc-chart-categorical-03-hover | ||
| chart categorical 03 selected | var(--dt-color-chart-categorical-03-selected) | d-bgc-chart-categorical-03-selected | ||
| chart categorical 04 | var(--dt-color-chart-categorical-04) | d-bgc-chart-categorical-04 | ||
| chart categorical 04 hover | var(--dt-color-chart-categorical-04-hover) | d-bgc-chart-categorical-04-hover | ||
| chart categorical 04 selected | var(--dt-color-chart-categorical-04-selected) | d-bgc-chart-categorical-04-selected | ||
| chart categorical 05 | var(--dt-color-chart-categorical-05) | d-bgc-chart-categorical-05 | ||
| chart categorical 05 hover | var(--dt-color-chart-categorical-05-hover) | d-bgc-chart-categorical-05-hover | ||
| chart categorical 05 selected | var(--dt-color-chart-categorical-05-selected) | d-bgc-chart-categorical-05-selected | ||
| chart categorical 06 | var(--dt-color-chart-categorical-06) | d-bgc-chart-categorical-06 | ||
| chart categorical 06 hover | var(--dt-color-chart-categorical-06-hover) | d-bgc-chart-categorical-06-hover | ||
| chart categorical 06 selected | var(--dt-color-chart-categorical-06-selected) | d-bgc-chart-categorical-06-selected | ||
| chart categorical 07 | var(--dt-color-chart-categorical-07) | d-bgc-chart-categorical-07 | ||
| chart categorical 07 hover | var(--dt-color-chart-categorical-07-hover) | d-bgc-chart-categorical-07-hover | ||
| chart categorical 07 selected | var(--dt-color-chart-categorical-07-selected) | d-bgc-chart-categorical-07-selected | ||
| chart categorical 08 | var(--dt-color-chart-categorical-08) | d-bgc-chart-categorical-08 | ||
| chart categorical 08 hover | var(--dt-color-chart-categorical-08-hover) | d-bgc-chart-categorical-08-hover | ||
| chart categorical 08 selected | var(--dt-color-chart-categorical-08-selected) | d-bgc-chart-categorical-08-selected | ||
| chart categorical 09 | var(--dt-color-chart-categorical-09) | d-bgc-chart-categorical-09 | ||
| chart categorical 09 hover | var(--dt-color-chart-categorical-09-hover) | d-bgc-chart-categorical-09-hover | ||
| chart categorical 09 selected | var(--dt-color-chart-categorical-09-selected) | d-bgc-chart-categorical-09-selected | ||
| chart categorical 10 | var(--dt-color-chart-categorical-10) | d-bgc-chart-categorical-10 | ||
| chart categorical 10 hover | var(--dt-color-chart-categorical-10-hover) | d-bgc-chart-categorical-10-hover | ||
| chart categorical 10 selected | var(--dt-color-chart-categorical-10-selected) | d-bgc-chart-categorical-10-selected | ||
| chart categorical 11 | var(--dt-color-chart-categorical-11) | d-bgc-chart-categorical-11 | ||
| chart categorical 11 hover | var(--dt-color-chart-categorical-11-hover) | d-bgc-chart-categorical-11-hover | ||
| chart categorical 11 selected | var(--dt-color-chart-categorical-11-selected) | d-bgc-chart-categorical-11-selected | ||
| chart categorical 12 | var(--dt-color-chart-categorical-12) | d-bgc-chart-categorical-12 | ||
| chart categorical 12 hover | var(--dt-color-chart-categorical-12-hover) | d-bgc-chart-categorical-12-hover | ||
| chart categorical 12 selected | var(--dt-color-chart-categorical-12-selected) | d-bgc-chart-categorical-12-selected | ||
| chart categorical 13 | var(--dt-color-chart-categorical-13) | d-bgc-chart-categorical-13 | ||
| chart categorical 13 hover | var(--dt-color-chart-categorical-13-hover) | d-bgc-chart-categorical-13-hover | ||
| chart categorical 13 selected | var(--dt-color-chart-categorical-13-selected) | d-bgc-chart-categorical-13-selected | ||
| chart categorical 14 | var(--dt-color-chart-categorical-14) | d-bgc-chart-categorical-14 | ||
| chart categorical 14 hover | var(--dt-color-chart-categorical-14-hover) | d-bgc-chart-categorical-14-hover | ||
| chart categorical 14 selected | var(--dt-color-chart-categorical-14-selected) | d-bgc-chart-categorical-14-selected | ||
| chart categorical 15 | var(--dt-color-chart-categorical-15) | d-bgc-chart-categorical-15 | ||
| chart categorical 15 hover | var(--dt-color-chart-categorical-15-hover) | d-bgc-chart-categorical-15-hover | ||
| chart categorical 15 selected | var(--dt-color-chart-categorical-15-selected) | d-bgc-chart-categorical-15-selected | ||
| chart categorical 16 | var(--dt-color-chart-categorical-16) | d-bgc-chart-categorical-16 | ||
| chart categorical 16 hover | var(--dt-color-chart-categorical-16-hover) | d-bgc-chart-categorical-16-hover | ||
| chart categorical 16 selected | var(--dt-color-chart-categorical-16-selected) | d-bgc-chart-categorical-16-selected | ||
| chart categorical 17 | var(--dt-color-chart-categorical-17) | d-bgc-chart-categorical-17 | ||
| chart categorical 17 hover | var(--dt-color-chart-categorical-17-hover) | d-bgc-chart-categorical-17-hover | ||
| chart categorical 17 selected | var(--dt-color-chart-categorical-17-selected) | d-bgc-chart-categorical-17-selected | ||
| chart categorical 18 | var(--dt-color-chart-categorical-18) | d-bgc-chart-categorical-18 | ||
| chart categorical 18 hover | var(--dt-color-chart-categorical-18-hover) | d-bgc-chart-categorical-18-hover | ||
| chart categorical 18 selected | var(--dt-color-chart-categorical-18-selected) | d-bgc-chart-categorical-18-selected | ||
| chart categorical 19 | var(--dt-color-chart-categorical-19) | d-bgc-chart-categorical-19 | ||
| chart categorical 19 hover | var(--dt-color-chart-categorical-19-hover) | d-bgc-chart-categorical-19-hover | ||
| chart categorical 19 selected | var(--dt-color-chart-categorical-19-selected) | d-bgc-chart-categorical-19-selected | ||
| chart categorical 20 | var(--dt-color-chart-categorical-20) | d-bgc-chart-categorical-20 | ||
| chart categorical 20 hover | var(--dt-color-chart-categorical-20-hover) | d-bgc-chart-categorical-20-hover | ||
| chart categorical 20 selected | var(--dt-color-chart-categorical-20-selected) | d-bgc-chart-categorical-20-selected | ||
| chart categorical 21 | var(--dt-color-chart-categorical-21) | d-bgc-chart-categorical-21 | ||
| chart categorical 21 hover | var(--dt-color-chart-categorical-21-hover) | d-bgc-chart-categorical-21-hover | ||
| chart categorical 21 selected | var(--dt-color-chart-categorical-21-selected) | d-bgc-chart-categorical-21-selected | ||
| chart categorical 22 | var(--dt-color-chart-categorical-22) | d-bgc-chart-categorical-22 | ||
| chart categorical 22 hover | var(--dt-color-chart-categorical-22-hover) | d-bgc-chart-categorical-22-hover | ||
| chart categorical 22 selected | var(--dt-color-chart-categorical-22-selected) | d-bgc-chart-categorical-22-selected | ||
| chart categorical 23 | var(--dt-color-chart-categorical-23) | d-bgc-chart-categorical-23 | ||
| chart categorical 23 hover | var(--dt-color-chart-categorical-23-hover) | d-bgc-chart-categorical-23-hover | ||
| chart categorical 23 selected | var(--dt-color-chart-categorical-23-selected) | d-bgc-chart-categorical-23-selected | ||
| chart categorical 24 | var(--dt-color-chart-categorical-24) | d-bgc-chart-categorical-24 | ||
| chart categorical 24 hover | var(--dt-color-chart-categorical-24-hover) | d-bgc-chart-categorical-24-hover | ||
| chart categorical 24 selected | var(--dt-color-chart-categorical-24-selected) | d-bgc-chart-categorical-24-selected | ||
| chart categorical 25 | var(--dt-color-chart-categorical-25) | d-bgc-chart-categorical-25 | ||
| chart categorical 25 hover | var(--dt-color-chart-categorical-25-hover) | d-bgc-chart-categorical-25-hover | ||
| chart categorical 25 selected | var(--dt-color-chart-categorical-25-selected) | d-bgc-chart-categorical-25-selected | ||
| chart categorical 26 | var(--dt-color-chart-categorical-26) | d-bgc-chart-categorical-26 | ||
| chart categorical 26 hover | var(--dt-color-chart-categorical-26-hover) | d-bgc-chart-categorical-26-hover | ||
| chart categorical 26 selected | var(--dt-color-chart-categorical-26-selected) | d-bgc-chart-categorical-26-selected | ||
| chart categorical 27 | var(--dt-color-chart-categorical-27) | d-bgc-chart-categorical-27 | ||
| chart categorical 27 hover | var(--dt-color-chart-categorical-27-hover) | d-bgc-chart-categorical-27-hover | ||
| chart categorical 27 selected | var(--dt-color-chart-categorical-27-selected) | d-bgc-chart-categorical-27-selected | ||
| chart categorical 28 | var(--dt-color-chart-categorical-28) | d-bgc-chart-categorical-28 | ||
| chart categorical 28 hover | var(--dt-color-chart-categorical-28-hover) | d-bgc-chart-categorical-28-hover | ||
| chart categorical 28 selected | var(--dt-color-chart-categorical-28-selected) | d-bgc-chart-categorical-28-selected | ||
| chart categorical 29 | var(--dt-color-chart-categorical-29) | d-bgc-chart-categorical-29 | ||
| chart categorical 29 hover | var(--dt-color-chart-categorical-29-hover) | d-bgc-chart-categorical-29-hover | ||
| chart categorical 29 selected | var(--dt-color-chart-categorical-29-selected) | d-bgc-chart-categorical-29-selected | ||
| chart categorical 30 | var(--dt-color-chart-categorical-30) | d-bgc-chart-categorical-30 | ||
| chart categorical 30 hover | var(--dt-color-chart-categorical-30-hover) | d-bgc-chart-categorical-30-hover | ||
| chart categorical 30 selected | var(--dt-color-chart-categorical-30-selected) | d-bgc-chart-categorical-30-selected | ||
| chart sequential 01 First color in sequential chart series. | var(--dt-color-chart-sequential-01) | d-bgc-chart-sequential-01 | ||
| chart sequential 01 hover Hover state for first sequential chart color. | var(--dt-color-chart-sequential-01-hover) | d-bgc-chart-sequential-01-hover | ||
| chart sequential 01 selected Selected state for first sequential chart color. | var(--dt-color-chart-sequential-01-selected) | d-bgc-chart-sequential-01-selected | ||
| chart sequential 02 Second color in sequential chart series, very light shade. | var(--dt-color-chart-sequential-02) | d-bgc-chart-sequential-02 | ||
| chart sequential 02 hover Hover state for second sequential chart color. | var(--dt-color-chart-sequential-02-hover) | d-bgc-chart-sequential-02-hover | ||
| chart sequential 02 selected Selected state for second sequential chart color. | var(--dt-color-chart-sequential-02-selected) | d-bgc-chart-sequential-02-selected | ||
| chart sequential 03 Third color in sequential chart series, light shade. | var(--dt-color-chart-sequential-03) | d-bgc-chart-sequential-03 | ||
| chart sequential 03 hover Hover state for third sequential chart color. | var(--dt-color-chart-sequential-03-hover) | d-bgc-chart-sequential-03-hover | ||
| chart sequential 03 selected Selected state for third sequential chart color. | var(--dt-color-chart-sequential-03-selected) | d-bgc-chart-sequential-03-selected | ||
| chart sequential 04 Fourth color in sequential chart series, light-medium shade. | var(--dt-color-chart-sequential-04) | d-bgc-chart-sequential-04 | ||
| chart sequential 04 hover Hover state for fourth sequential chart color. | var(--dt-color-chart-sequential-04-hover) | d-bgc-chart-sequential-04-hover | ||
| chart sequential 04 selected Selected state for fourth sequential chart color. | var(--dt-color-chart-sequential-04-selected) | d-bgc-chart-sequential-04-selected | ||
| chart sequential 05 Fifth color in sequential chart series, medium shade. | var(--dt-color-chart-sequential-05) | d-bgc-chart-sequential-05 | ||
| chart sequential 05 hover Hover state for fifth sequential chart color. | var(--dt-color-chart-sequential-05-hover) | d-bgc-chart-sequential-05-hover | ||
| chart sequential 05 selected Selected state for fifth sequential chart color. | var(--dt-color-chart-sequential-05-selected) | d-bgc-chart-sequential-05-selected | ||
| chart sequential 06 Sixth color in sequential chart series, medium-dark shade. | var(--dt-color-chart-sequential-06) | d-bgc-chart-sequential-06 | ||
| chart sequential 06 hover Hover state for sixth sequential chart color. | var(--dt-color-chart-sequential-06-hover) | d-bgc-chart-sequential-06-hover | ||
| chart sequential 06 selected Selected state for sixth sequential chart color. | var(--dt-color-chart-sequential-06-selected) | d-bgc-chart-sequential-06-selected | ||
| chart sequential 07 Seventh color in sequential chart series, dark shade. | var(--dt-color-chart-sequential-07) | d-bgc-chart-sequential-07 | ||
| chart sequential 07 hover Hover state for seventh sequential chart color. | var(--dt-color-chart-sequential-07-hover) | d-bgc-chart-sequential-07-hover | ||
| chart sequential 07 selected Selected state for seventh sequential chart color. | var(--dt-color-chart-sequential-07-selected) | d-bgc-chart-sequential-07-selected | ||
| chart sequential 08 Eighth color in sequential chart series, very dark shade. | var(--dt-color-chart-sequential-08) | d-bgc-chart-sequential-08 | ||
| chart sequential 08 hover Hover state for eighth sequential chart color. | var(--dt-color-chart-sequential-08-hover) | d-bgc-chart-sequential-08-hover | ||
| chart sequential 08 selected Selected state for eighth sequential chart color. | var(--dt-color-chart-sequential-08-selected) | d-bgc-chart-sequential-08-selected | ||
| chart sequential 09 Ninth color in sequential chart series, extremely dark shade. | var(--dt-color-chart-sequential-09) | d-bgc-chart-sequential-09 | ||
| chart sequential 09 hover Hover state for ninth sequential chart color. | var(--dt-color-chart-sequential-09-hover) | d-bgc-chart-sequential-09-hover | ||
| chart sequential 09 selected Selected state for ninth sequential chart color. | var(--dt-color-chart-sequential-09-selected) | d-bgc-chart-sequential-09-selected | ||
| chart sequential 10 Tenth color in sequential chart series. | var(--dt-color-chart-sequential-10) | d-bgc-chart-sequential-10 | ||
| chart sequential 10 hover Hover state for tenth sequential chart color. | var(--dt-color-chart-sequential-10-hover) | d-bgc-chart-sequential-10-hover | ||
| chart sequential 10 selected Selected state for tenth sequential chart color. | var(--dt-color-chart-sequential-10-selected) | d-bgc-chart-sequential-10-selected | ||
| chart sequential range 00 end Start color value for default sequential range. Use to create a dynamically generated sequential series, must be paired with a start color. | var(--dt-color-chart-sequential-range-00-end) | d-bgc-chart-sequential-range-00-end | ||
| chart sequential range 00 start Start color value for default sequential range. Use to create a dynamically generated sequential series, must be paired with an end color. | var(--dt-color-chart-sequential-range-00-start) | d-bgc-chart-sequential-range-00-start | ||
| chart sequential range 01 end | var(--dt-color-chart-sequential-range-01-end) | d-bgc-chart-sequential-range-01-end | ||
| chart sequential range 01 start | var(--dt-color-chart-sequential-range-01-start) | d-bgc-chart-sequential-range-01-start | ||
| chart sequential range 02 end | var(--dt-color-chart-sequential-range-02-end) | d-bgc-chart-sequential-range-02-end | ||
| chart sequential range 02 start | var(--dt-color-chart-sequential-range-02-start) | d-bgc-chart-sequential-range-02-start | ||
| chart sequential range 03 end | var(--dt-color-chart-sequential-range-03-end) | d-bgc-chart-sequential-range-03-end | ||
| chart sequential range 03 start | var(--dt-color-chart-sequential-range-03-start) | d-bgc-chart-sequential-range-03-start | ||
| chart sequential range 04 end | var(--dt-color-chart-sequential-range-04-end) | d-bgc-chart-sequential-range-04-end | ||
| chart sequential range 04 start | var(--dt-color-chart-sequential-range-04-start) | d-bgc-chart-sequential-range-04-start | ||
| chart sequential range 05 end | var(--dt-color-chart-sequential-range-05-end) | d-bgc-chart-sequential-range-05-end | ||
| chart sequential range 05 start | var(--dt-color-chart-sequential-range-05-start) | d-bgc-chart-sequential-range-05-start | ||
| chart sequential range 06 end | var(--dt-color-chart-sequential-range-06-end) | d-bgc-chart-sequential-range-06-end | ||
| chart sequential range 06 start | var(--dt-color-chart-sequential-range-06-start) | d-bgc-chart-sequential-range-06-start | ||
| chart sequential range 07 end | var(--dt-color-chart-sequential-range-07-end) | d-bgc-chart-sequential-range-07-end | ||
| chart sequential range 07 start | var(--dt-color-chart-sequential-range-07-start) | d-bgc-chart-sequential-range-07-start | ||
| chart sequential range 08 end | var(--dt-color-chart-sequential-range-08-end) | d-bgc-chart-sequential-range-08-end | ||
| chart sequential range 08 start | var(--dt-color-chart-sequential-range-08-start) | d-bgc-chart-sequential-range-08-start | ||
| chart sequential range 09 end | var(--dt-color-chart-sequential-range-09-end) | d-bgc-chart-sequential-range-09-end | ||
| chart sequential range 09 start | var(--dt-color-chart-sequential-range-09-start) | d-bgc-chart-sequential-range-09-start | ||
| chart sequential range 10 end | var(--dt-color-chart-sequential-range-10-end) | d-bgc-chart-sequential-range-10-end | ||
| chart sequential range 10 start | var(--dt-color-chart-sequential-range-10-start) | d-bgc-chart-sequential-range-10-start | ||
| neutral black | var(--dt-color-neutral-black) | d-bgc-neutral-black | ||
| neutral transparent | var(--dt-color-neutral-transparent) | d-bgc-neutral-transparent | ||
| neutral white | var(--dt-color-neutral-white) | d-bgc-neutral-white | ||
| chart neutral hover | var(--dt-color-chart-neutral-hover) | d-bgc-chart-neutral-hover | ||
| chart neutral selected | var(--dt-color-chart-neutral-selected) | d-bgc-chart-neutral-selected | ||
Define the edge of key content area, components, or surfaces.
Color
|
CSS variable
|
CSS utility
| ||
|---|---|---|---|---|
| current | - | d-bc-current | ||
| transparent | - | d-bc-transparent | ||
| unset | - | d-bc-unset | ||
| accent | var(--dt-color-border-accent) | d-bc-accent | ||
| ai | var(--dt-color-border-ai) | d-bc-ai | ||
| bold | var(--dt-color-border-bold) | d-bc-bold | ||
| brand | var(--dt-color-border-brand) | d-bc-brand | ||
| brand strong | var(--dt-color-border-brand-strong) | d-bc-brand-strong | ||
| brand subtle | var(--dt-color-border-brand-subtle) | d-bc-brand-subtle | ||
| critical | var(--dt-color-border-critical) | d-bc-critical | ||
| critical strong | var(--dt-color-border-critical-strong) | d-bc-critical-strong | ||
| critical subtle | var(--dt-color-border-critical-subtle) | d-bc-critical-subtle | ||
| default | var(--dt-color-border-default) | d-bc-default | ||
| focus | var(--dt-color-border-focus) | d-bc-focus | ||
| info | var(--dt-color-border-info) | d-bc-info | ||
| info strong | var(--dt-color-border-info-strong) | d-bc-info-strong | ||
| info subtle | var(--dt-color-border-info-subtle) | d-bc-info-subtle | ||
| moderate | var(--dt-color-border-moderate) | d-bc-moderate | ||
| positive | var(--dt-color-border-positive) | d-bc-positive | ||
| positive strong | var(--dt-color-border-positive-strong) | d-bc-positive-strong | ||
| positive subtle | var(--dt-color-border-positive-subtle) | d-bc-positive-subtle | ||
| subtle | var(--dt-color-border-subtle) | d-bc-subtle | ||
| warning | var(--dt-color-border-warning) | d-bc-warning | ||
| warning strong | var(--dt-color-border-warning-strong) | d-bc-warning-strong | ||
| warning subtle | var(--dt-color-border-warning-subtle) | d-bc-warning-subtle | ||
| chart neutral | var(--dt-color-chart-neutral) | d-bc-chart-neutral | ||
| chart accent | var(--dt-color-chart-accent) | d-bc-chart-accent | ||
| chart accent hover | var(--dt-color-chart-accent-hover) | d-bc-chart-accent-hover | ||
| chart accent selected | var(--dt-color-chart-accent-selected) | d-bc-chart-accent-selected | ||
| chart critical | var(--dt-color-chart-critical) | d-bc-chart-critical | ||
| chart critical hover | var(--dt-color-chart-critical-hover) | d-bc-chart-critical-hover | ||
| chart critical selected | var(--dt-color-chart-critical-selected) | d-bc-chart-critical-selected | ||
| chart info | var(--dt-color-chart-info) | d-bc-chart-info | ||
| chart info hover | var(--dt-color-chart-info-hover) | d-bc-chart-info-hover | ||
| chart info selected | var(--dt-color-chart-info-selected) | d-bc-chart-info-selected | ||
| chart positive | var(--dt-color-chart-positive) | d-bc-chart-positive | ||
| chart positive hover | var(--dt-color-chart-positive-hover) | d-bc-chart-positive-hover | ||
| chart positive selected | var(--dt-color-chart-positive-selected) | d-bc-chart-positive-selected | ||
| chart warning | var(--dt-color-chart-warning) | d-bc-chart-warning | ||
| chart warning hover | var(--dt-color-chart-warning-hover) | d-bc-chart-warning-hover | ||
| chart warning selected | var(--dt-color-chart-warning-selected) | d-bc-chart-warning-selected | ||
| chart categorical 01 | var(--dt-color-chart-categorical-01) | d-bc-chart-categorical-01 | ||
| chart categorical 01 hover | var(--dt-color-chart-categorical-01-hover) | d-bc-chart-categorical-01-hover | ||
| chart categorical 01 selected | var(--dt-color-chart-categorical-01-selected) | d-bc-chart-categorical-01-selected | ||
| chart categorical 02 | var(--dt-color-chart-categorical-02) | d-bc-chart-categorical-02 | ||
| chart categorical 02 hover | var(--dt-color-chart-categorical-02-hover) | d-bc-chart-categorical-02-hover | ||
| chart categorical 02 selected | var(--dt-color-chart-categorical-02-selected) | d-bc-chart-categorical-02-selected | ||
| chart categorical 03 | var(--dt-color-chart-categorical-03) | d-bc-chart-categorical-03 | ||
| chart categorical 03 hover | var(--dt-color-chart-categorical-03-hover) | d-bc-chart-categorical-03-hover | ||
| chart categorical 03 selected | var(--dt-color-chart-categorical-03-selected) | d-bc-chart-categorical-03-selected | ||
| chart categorical 04 | var(--dt-color-chart-categorical-04) | d-bc-chart-categorical-04 | ||
| chart categorical 04 hover | var(--dt-color-chart-categorical-04-hover) | d-bc-chart-categorical-04-hover | ||
| chart categorical 04 selected | var(--dt-color-chart-categorical-04-selected) | d-bc-chart-categorical-04-selected | ||
| chart categorical 05 | var(--dt-color-chart-categorical-05) | d-bc-chart-categorical-05 | ||
| chart categorical 05 hover | var(--dt-color-chart-categorical-05-hover) | d-bc-chart-categorical-05-hover | ||
| chart categorical 05 selected | var(--dt-color-chart-categorical-05-selected) | d-bc-chart-categorical-05-selected | ||
| chart categorical 06 | var(--dt-color-chart-categorical-06) | d-bc-chart-categorical-06 | ||
| chart categorical 06 hover | var(--dt-color-chart-categorical-06-hover) | d-bc-chart-categorical-06-hover | ||
| chart categorical 06 selected | var(--dt-color-chart-categorical-06-selected) | d-bc-chart-categorical-06-selected | ||
| chart categorical 07 | var(--dt-color-chart-categorical-07) | d-bc-chart-categorical-07 | ||
| chart categorical 07 hover | var(--dt-color-chart-categorical-07-hover) | d-bc-chart-categorical-07-hover | ||
| chart categorical 07 selected | var(--dt-color-chart-categorical-07-selected) | d-bc-chart-categorical-07-selected | ||
| chart categorical 08 | var(--dt-color-chart-categorical-08) | d-bc-chart-categorical-08 | ||
| chart categorical 08 hover | var(--dt-color-chart-categorical-08-hover) | d-bc-chart-categorical-08-hover | ||
| chart categorical 08 selected | var(--dt-color-chart-categorical-08-selected) | d-bc-chart-categorical-08-selected | ||
| chart categorical 09 | var(--dt-color-chart-categorical-09) | d-bc-chart-categorical-09 | ||
| chart categorical 09 hover | var(--dt-color-chart-categorical-09-hover) | d-bc-chart-categorical-09-hover | ||
| chart categorical 09 selected | var(--dt-color-chart-categorical-09-selected) | d-bc-chart-categorical-09-selected | ||
| chart categorical 10 | var(--dt-color-chart-categorical-10) | d-bc-chart-categorical-10 | ||
| chart categorical 10 hover | var(--dt-color-chart-categorical-10-hover) | d-bc-chart-categorical-10-hover | ||
| chart categorical 10 selected | var(--dt-color-chart-categorical-10-selected) | d-bc-chart-categorical-10-selected | ||
| chart categorical 11 | var(--dt-color-chart-categorical-11) | d-bc-chart-categorical-11 | ||
| chart categorical 11 hover | var(--dt-color-chart-categorical-11-hover) | d-bc-chart-categorical-11-hover | ||
| chart categorical 11 selected | var(--dt-color-chart-categorical-11-selected) | d-bc-chart-categorical-11-selected | ||
| chart categorical 12 | var(--dt-color-chart-categorical-12) | d-bc-chart-categorical-12 | ||
| chart categorical 12 hover | var(--dt-color-chart-categorical-12-hover) | d-bc-chart-categorical-12-hover | ||
| chart categorical 12 selected | var(--dt-color-chart-categorical-12-selected) | d-bc-chart-categorical-12-selected | ||
| chart categorical 13 | var(--dt-color-chart-categorical-13) | d-bc-chart-categorical-13 | ||
| chart categorical 13 hover | var(--dt-color-chart-categorical-13-hover) | d-bc-chart-categorical-13-hover | ||
| chart categorical 13 selected | var(--dt-color-chart-categorical-13-selected) | d-bc-chart-categorical-13-selected | ||
| chart categorical 14 | var(--dt-color-chart-categorical-14) | d-bc-chart-categorical-14 | ||
| chart categorical 14 hover | var(--dt-color-chart-categorical-14-hover) | d-bc-chart-categorical-14-hover | ||
| chart categorical 14 selected | var(--dt-color-chart-categorical-14-selected) | d-bc-chart-categorical-14-selected | ||
| chart categorical 15 | var(--dt-color-chart-categorical-15) | d-bc-chart-categorical-15 | ||
| chart categorical 15 hover | var(--dt-color-chart-categorical-15-hover) | d-bc-chart-categorical-15-hover | ||
| chart categorical 15 selected | var(--dt-color-chart-categorical-15-selected) | d-bc-chart-categorical-15-selected | ||
| chart categorical 16 | var(--dt-color-chart-categorical-16) | d-bc-chart-categorical-16 | ||
| chart categorical 16 hover | var(--dt-color-chart-categorical-16-hover) | d-bc-chart-categorical-16-hover | ||
| chart categorical 16 selected | var(--dt-color-chart-categorical-16-selected) | d-bc-chart-categorical-16-selected | ||
| chart categorical 17 | var(--dt-color-chart-categorical-17) | d-bc-chart-categorical-17 | ||
| chart categorical 17 hover | var(--dt-color-chart-categorical-17-hover) | d-bc-chart-categorical-17-hover | ||
| chart categorical 17 selected | var(--dt-color-chart-categorical-17-selected) | d-bc-chart-categorical-17-selected | ||
| chart categorical 18 | var(--dt-color-chart-categorical-18) | d-bc-chart-categorical-18 | ||
| chart categorical 18 hover | var(--dt-color-chart-categorical-18-hover) | d-bc-chart-categorical-18-hover | ||
| chart categorical 18 selected | var(--dt-color-chart-categorical-18-selected) | d-bc-chart-categorical-18-selected | ||
| chart categorical 19 | var(--dt-color-chart-categorical-19) | d-bc-chart-categorical-19 | ||
| chart categorical 19 hover | var(--dt-color-chart-categorical-19-hover) | d-bc-chart-categorical-19-hover | ||
| chart categorical 19 selected | var(--dt-color-chart-categorical-19-selected) | d-bc-chart-categorical-19-selected | ||
| chart categorical 20 | var(--dt-color-chart-categorical-20) | d-bc-chart-categorical-20 | ||
| chart categorical 20 hover | var(--dt-color-chart-categorical-20-hover) | d-bc-chart-categorical-20-hover | ||
| chart categorical 20 selected | var(--dt-color-chart-categorical-20-selected) | d-bc-chart-categorical-20-selected | ||
| chart categorical 21 | var(--dt-color-chart-categorical-21) | d-bc-chart-categorical-21 | ||
| chart categorical 21 hover | var(--dt-color-chart-categorical-21-hover) | d-bc-chart-categorical-21-hover | ||
| chart categorical 21 selected | var(--dt-color-chart-categorical-21-selected) | d-bc-chart-categorical-21-selected | ||
| chart categorical 22 | var(--dt-color-chart-categorical-22) | d-bc-chart-categorical-22 | ||
| chart categorical 22 hover | var(--dt-color-chart-categorical-22-hover) | d-bc-chart-categorical-22-hover | ||
| chart categorical 22 selected | var(--dt-color-chart-categorical-22-selected) | d-bc-chart-categorical-22-selected | ||
| chart categorical 23 | var(--dt-color-chart-categorical-23) | d-bc-chart-categorical-23 | ||
| chart categorical 23 hover | var(--dt-color-chart-categorical-23-hover) | d-bc-chart-categorical-23-hover | ||
| chart categorical 23 selected | var(--dt-color-chart-categorical-23-selected) | d-bc-chart-categorical-23-selected | ||
| chart categorical 24 | var(--dt-color-chart-categorical-24) | d-bc-chart-categorical-24 | ||
| chart categorical 24 hover | var(--dt-color-chart-categorical-24-hover) | d-bc-chart-categorical-24-hover | ||
| chart categorical 24 selected | var(--dt-color-chart-categorical-24-selected) | d-bc-chart-categorical-24-selected | ||
| chart categorical 25 | var(--dt-color-chart-categorical-25) | d-bc-chart-categorical-25 | ||
| chart categorical 25 hover | var(--dt-color-chart-categorical-25-hover) | d-bc-chart-categorical-25-hover | ||
| chart categorical 25 selected | var(--dt-color-chart-categorical-25-selected) | d-bc-chart-categorical-25-selected | ||
| chart categorical 26 | var(--dt-color-chart-categorical-26) | d-bc-chart-categorical-26 | ||
| chart categorical 26 hover | var(--dt-color-chart-categorical-26-hover) | d-bc-chart-categorical-26-hover | ||
| chart categorical 26 selected | var(--dt-color-chart-categorical-26-selected) | d-bc-chart-categorical-26-selected | ||
| chart categorical 27 | var(--dt-color-chart-categorical-27) | d-bc-chart-categorical-27 | ||
| chart categorical 27 hover | var(--dt-color-chart-categorical-27-hover) | d-bc-chart-categorical-27-hover | ||
| chart categorical 27 selected | var(--dt-color-chart-categorical-27-selected) | d-bc-chart-categorical-27-selected | ||
| chart categorical 28 | var(--dt-color-chart-categorical-28) | d-bc-chart-categorical-28 | ||
| chart categorical 28 hover | var(--dt-color-chart-categorical-28-hover) | d-bc-chart-categorical-28-hover | ||
| chart categorical 28 selected | var(--dt-color-chart-categorical-28-selected) | d-bc-chart-categorical-28-selected | ||
| chart categorical 29 | var(--dt-color-chart-categorical-29) | d-bc-chart-categorical-29 | ||
| chart categorical 29 hover | var(--dt-color-chart-categorical-29-hover) | d-bc-chart-categorical-29-hover | ||
| chart categorical 29 selected | var(--dt-color-chart-categorical-29-selected) | d-bc-chart-categorical-29-selected | ||
| chart categorical 30 | var(--dt-color-chart-categorical-30) | d-bc-chart-categorical-30 | ||
| chart categorical 30 hover | var(--dt-color-chart-categorical-30-hover) | d-bc-chart-categorical-30-hover | ||
| chart categorical 30 selected | var(--dt-color-chart-categorical-30-selected) | d-bc-chart-categorical-30-selected | ||
| chart sequential 01 First color in sequential chart series. | var(--dt-color-chart-sequential-01) | d-bc-chart-sequential-01 | ||
| chart sequential 01 hover Hover state for first sequential chart color. | var(--dt-color-chart-sequential-01-hover) | d-bc-chart-sequential-01-hover | ||
| chart sequential 01 selected Selected state for first sequential chart color. | var(--dt-color-chart-sequential-01-selected) | d-bc-chart-sequential-01-selected | ||
| chart sequential 02 Second color in sequential chart series, very light shade. | var(--dt-color-chart-sequential-02) | d-bc-chart-sequential-02 | ||
| chart sequential 02 hover Hover state for second sequential chart color. | var(--dt-color-chart-sequential-02-hover) | d-bc-chart-sequential-02-hover | ||
| chart sequential 02 selected Selected state for second sequential chart color. | var(--dt-color-chart-sequential-02-selected) | d-bc-chart-sequential-02-selected | ||
| chart sequential 03 Third color in sequential chart series, light shade. | var(--dt-color-chart-sequential-03) | d-bc-chart-sequential-03 | ||
| chart sequential 03 hover Hover state for third sequential chart color. | var(--dt-color-chart-sequential-03-hover) | d-bc-chart-sequential-03-hover | ||
| chart sequential 03 selected Selected state for third sequential chart color. | var(--dt-color-chart-sequential-03-selected) | d-bc-chart-sequential-03-selected | ||
| chart sequential 04 Fourth color in sequential chart series, light-medium shade. | var(--dt-color-chart-sequential-04) | d-bc-chart-sequential-04 | ||
| chart sequential 04 hover Hover state for fourth sequential chart color. | var(--dt-color-chart-sequential-04-hover) | d-bc-chart-sequential-04-hover | ||
| chart sequential 04 selected Selected state for fourth sequential chart color. | var(--dt-color-chart-sequential-04-selected) | d-bc-chart-sequential-04-selected | ||
| chart sequential 05 Fifth color in sequential chart series, medium shade. | var(--dt-color-chart-sequential-05) | d-bc-chart-sequential-05 | ||
| chart sequential 05 hover Hover state for fifth sequential chart color. | var(--dt-color-chart-sequential-05-hover) | d-bc-chart-sequential-05-hover | ||
| chart sequential 05 selected Selected state for fifth sequential chart color. | var(--dt-color-chart-sequential-05-selected) | d-bc-chart-sequential-05-selected | ||
| chart sequential 06 Sixth color in sequential chart series, medium-dark shade. | var(--dt-color-chart-sequential-06) | d-bc-chart-sequential-06 | ||
| chart sequential 06 hover Hover state for sixth sequential chart color. | var(--dt-color-chart-sequential-06-hover) | d-bc-chart-sequential-06-hover | ||
| chart sequential 06 selected Selected state for sixth sequential chart color. | var(--dt-color-chart-sequential-06-selected) | d-bc-chart-sequential-06-selected | ||
| chart sequential 07 Seventh color in sequential chart series, dark shade. | var(--dt-color-chart-sequential-07) | d-bc-chart-sequential-07 | ||
| chart sequential 07 hover Hover state for seventh sequential chart color. | var(--dt-color-chart-sequential-07-hover) | d-bc-chart-sequential-07-hover | ||
| chart sequential 07 selected Selected state for seventh sequential chart color. | var(--dt-color-chart-sequential-07-selected) | d-bc-chart-sequential-07-selected | ||
| chart sequential 08 Eighth color in sequential chart series, very dark shade. | var(--dt-color-chart-sequential-08) | d-bc-chart-sequential-08 | ||
| chart sequential 08 hover Hover state for eighth sequential chart color. | var(--dt-color-chart-sequential-08-hover) | d-bc-chart-sequential-08-hover | ||
| chart sequential 08 selected Selected state for eighth sequential chart color. | var(--dt-color-chart-sequential-08-selected) | d-bc-chart-sequential-08-selected | ||
| chart sequential 09 Ninth color in sequential chart series, extremely dark shade. | var(--dt-color-chart-sequential-09) | d-bc-chart-sequential-09 | ||
| chart sequential 09 hover Hover state for ninth sequential chart color. | var(--dt-color-chart-sequential-09-hover) | d-bc-chart-sequential-09-hover | ||
| chart sequential 09 selected Selected state for ninth sequential chart color. | var(--dt-color-chart-sequential-09-selected) | d-bc-chart-sequential-09-selected | ||
| chart sequential 10 Tenth color in sequential chart series. | var(--dt-color-chart-sequential-10) | d-bc-chart-sequential-10 | ||
| chart sequential 10 hover Hover state for tenth sequential chart color. | var(--dt-color-chart-sequential-10-hover) | d-bc-chart-sequential-10-hover | ||
| chart sequential 10 selected Selected state for tenth sequential chart color. | var(--dt-color-chart-sequential-10-selected) | d-bc-chart-sequential-10-selected | ||
| chart sequential range 00 end Start color value for default sequential range. Use to create a dynamically generated sequential series, must be paired with a start color. | var(--dt-color-chart-sequential-range-00-end) | d-bc-chart-sequential-range-00-end | ||
| chart sequential range 00 start Start color value for default sequential range. Use to create a dynamically generated sequential series, must be paired with an end color. | var(--dt-color-chart-sequential-range-00-start) | d-bc-chart-sequential-range-00-start | ||
| chart sequential range 01 end | var(--dt-color-chart-sequential-range-01-end) | d-bc-chart-sequential-range-01-end | ||
| chart sequential range 01 start | var(--dt-color-chart-sequential-range-01-start) | d-bc-chart-sequential-range-01-start | ||
| chart sequential range 02 end | var(--dt-color-chart-sequential-range-02-end) | d-bc-chart-sequential-range-02-end | ||
| chart sequential range 02 start | var(--dt-color-chart-sequential-range-02-start) | d-bc-chart-sequential-range-02-start | ||
| chart sequential range 03 end | var(--dt-color-chart-sequential-range-03-end) | d-bc-chart-sequential-range-03-end | ||
| chart sequential range 03 start | var(--dt-color-chart-sequential-range-03-start) | d-bc-chart-sequential-range-03-start | ||
| chart sequential range 04 end | var(--dt-color-chart-sequential-range-04-end) | d-bc-chart-sequential-range-04-end | ||
| chart sequential range 04 start | var(--dt-color-chart-sequential-range-04-start) | d-bc-chart-sequential-range-04-start | ||
| chart sequential range 05 end | var(--dt-color-chart-sequential-range-05-end) | d-bc-chart-sequential-range-05-end | ||
| chart sequential range 05 start | var(--dt-color-chart-sequential-range-05-start) | d-bc-chart-sequential-range-05-start | ||
| chart sequential range 06 end | var(--dt-color-chart-sequential-range-06-end) | d-bc-chart-sequential-range-06-end | ||
| chart sequential range 06 start | var(--dt-color-chart-sequential-range-06-start) | d-bc-chart-sequential-range-06-start | ||
| chart sequential range 07 end | var(--dt-color-chart-sequential-range-07-end) | d-bc-chart-sequential-range-07-end | ||
| chart sequential range 07 start | var(--dt-color-chart-sequential-range-07-start) | d-bc-chart-sequential-range-07-start | ||
| chart sequential range 08 end | var(--dt-color-chart-sequential-range-08-end) | d-bc-chart-sequential-range-08-end | ||
| chart sequential range 08 start | var(--dt-color-chart-sequential-range-08-start) | d-bc-chart-sequential-range-08-start | ||
| chart sequential range 09 end | var(--dt-color-chart-sequential-range-09-end) | d-bc-chart-sequential-range-09-end | ||
| chart sequential range 09 start | var(--dt-color-chart-sequential-range-09-start) | d-bc-chart-sequential-range-09-start | ||
| chart sequential range 10 end | var(--dt-color-chart-sequential-range-10-end) | d-bc-chart-sequential-range-10-end | ||
| chart sequential range 10 start | var(--dt-color-chart-sequential-range-10-start) | d-bc-chart-sequential-range-10-start | ||
| neutral black | var(--dt-color-neutral-black) | d-bc-neutral-black | ||
| neutral transparent | var(--dt-color-neutral-transparent) | d-bc-neutral-transparent | ||
| neutral white | var(--dt-color-neutral-white) | d-bc-neutral-white | ||
| chart neutral hover | var(--dt-color-chart-neutral-hover) | d-bc-chart-neutral-hover | ||
| chart neutral selected | var(--dt-color-chart-neutral-selected) | d-bc-chart-neutral-selected | ||
CSS variables for themeable parts of the UI, primarily targeting the top bar and left bar.
Color
|
Section
|
State
|
Property
|
Variable
|
|---|---|---|---|---|
| action | pressing | background-color | --dt-shell-action-color-background-muted-active | |
| action | resting | background-color | --dt-shell-action-color-background-muted-default | |
| action | hovering | background-color | --dt-shell-action-color-background-muted-hover | |
| action | selected | background-color | --dt-shell-action-color-background-muted-selected | |
| action | pressing | background-color | --dt-shell-action-color-background-primary-active | |
| action | resting | background-color | --dt-shell-action-color-background-primary-default | |
| action | hovering | background-color | --dt-shell-action-color-background-primary-hover | |
| action | selected | background-color | --dt-shell-action-color-background-primary-selected | |
| action | pressing | background-color | --dt-shell-action-color-background-secondary-active | |
| action | resting | background-color | --dt-shell-action-color-background-secondary-default | |
| action | hovering | background-color | --dt-shell-action-color-background-secondary-hover | |
| action | selected | background-color | --dt-shell-action-color-background-secondary-selected | |
Ag | action | pressing | color | --dt-shell-action-color-foreground-muted-active |
Ag | action | resting | color | --dt-shell-action-color-foreground-muted-default |
Ag | action | hovering | color | --dt-shell-action-color-foreground-muted-hover |
Ag | action | selected | color | --dt-shell-action-color-foreground-muted-selected |
Ag | action | resting | color | --dt-shell-action-color-foreground-primary-default |
Ag | action | resting | color | --dt-shell-action-color-foreground-primary-disabled |
Ag | action | resting | color | --dt-shell-action-color-foreground-primary-strong |
Ag | action | resting | color | --dt-shell-action-color-foreground-secondary-default |
Ag | action | resting | color | --dt-shell-action-color-foreground-secondary-disabled |
Ag | action | resting | color | --dt-shell-action-color-foreground-tertiary-default |
| - | resting | border-color | --dt-shell-color-border-default | |
| - | resting | border-color | --dt-shell-color-border-subtle | |
Ag | - | resting | color | --dt-shell-color-foreground-critical |
Ag | - | resting | color | --dt-shell-color-foreground-disabled |
Ag | - | resting | color | --dt-shell-color-foreground-muted |
Ag | - | resting | color | --dt-shell-color-foreground-positive |
Ag | - | resting | color | --dt-shell-color-foreground-primary |
Ag | - | resting | color | --dt-shell-color-foreground-secondary |
Ag | - | resting | color | --dt-shell-color-foreground-strong |
Ag | - | resting | color | --dt-shell-color-foreground-tertiary |
Ag | - | resting | color | --dt-shell-color-foreground-warning |
| - | resting | background-color | --dt-shell-color-surface-default | |
| logo | resting | background-color | --dt-shell-logo-color-star | |
| logo | resting | background-color | --dt-shell-logo-color-wordmark | |
Ag | mention | resting | color | --dt-shell-mention-color-foreground-primary |
Ag | mention | resting | color | --dt-shell-mention-color-foreground-secondary |
| mention | resting | background-color | --dt-shell-mention-color-surface-primary | |
| mention | resting | background-color | --dt-shell-mention-color-surface-secondary | |
| presence | available | background-color | --dt-shell-presence-color-available | |
| presence | busy | background-color | --dt-shell-presence-color-busy | |
| presence | resting | background-color | --dt-shell-presence-color-offline | |
| presence | resting | background-color | --dt-shell-presence-color-unavailable |
Base colors are the literal value of all available colors. Use these only if all abstracted Text, Status text, Surface, or Border colors do not fit your need — consult a Product Designer.
All semantic design tokens reference to these base colors, and base colors are not meant to be used directly. For example, in Light mode
var(--dt-color-foreground-primary) might be aliased to var(--dt-color-black-900), and
var(--dt-color-foreground-critical) might be aliased to
var(--dt-color-red-300), and will have a different value in Dark mode.
Materials are the reference colors used for the "black" ramp, depending on the "Material" theme selected. They do not have direct CSS variables or CSS Utilities. "Sandstone" is the default.
Product Color Palette documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope