Foreground #
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 Status #
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 | var(--dt-color-foreground-warning-strong) | d-fc-warning-strong | |
Surface #
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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | var(--dt-color-chart-sequential-01) | d-bgc-chart-sequential-01 | ||
| chart sequential 01 hover | var(--dt-color-chart-sequential-01-hover) | d-bgc-chart-sequential-01-hover | ||
| chart sequential 01 selected | var(--dt-color-chart-sequential-01-selected) | d-bgc-chart-sequential-01-selected | ||
| chart sequential 02 | var(--dt-color-chart-sequential-02) | d-bgc-chart-sequential-02 | ||
| chart sequential 02 hover | var(--dt-color-chart-sequential-02-hover) | d-bgc-chart-sequential-02-hover | ||
| chart sequential 02 selected | var(--dt-color-chart-sequential-02-selected) | d-bgc-chart-sequential-02-selected | ||
| chart sequential 03 | var(--dt-color-chart-sequential-03) | d-bgc-chart-sequential-03 | ||
| chart sequential 03 hover | var(--dt-color-chart-sequential-03-hover) | d-bgc-chart-sequential-03-hover | ||
| chart sequential 03 selected | var(--dt-color-chart-sequential-03-selected) | d-bgc-chart-sequential-03-selected | ||
| chart sequential 04 | var(--dt-color-chart-sequential-04) | d-bgc-chart-sequential-04 | ||
| chart sequential 04 hover | var(--dt-color-chart-sequential-04-hover) | d-bgc-chart-sequential-04-hover | ||
| chart sequential 04 selected | var(--dt-color-chart-sequential-04-selected) | d-bgc-chart-sequential-04-selected | ||
| chart sequential 05 | var(--dt-color-chart-sequential-05) | d-bgc-chart-sequential-05 | ||
| chart sequential 05 hover | var(--dt-color-chart-sequential-05-hover) | d-bgc-chart-sequential-05-hover | ||
| chart sequential 05 selected | var(--dt-color-chart-sequential-05-selected) | d-bgc-chart-sequential-05-selected | ||
| chart sequential 06 | var(--dt-color-chart-sequential-06) | d-bgc-chart-sequential-06 | ||
| chart sequential 06 hover | var(--dt-color-chart-sequential-06-hover) | d-bgc-chart-sequential-06-hover | ||
| chart sequential 06 selected | var(--dt-color-chart-sequential-06-selected) | d-bgc-chart-sequential-06-selected | ||
| chart sequential 07 | var(--dt-color-chart-sequential-07) | d-bgc-chart-sequential-07 | ||
| chart sequential 07 hover | var(--dt-color-chart-sequential-07-hover) | d-bgc-chart-sequential-07-hover | ||
| chart sequential 07 selected | var(--dt-color-chart-sequential-07-selected) | d-bgc-chart-sequential-07-selected | ||
| chart sequential 08 | var(--dt-color-chart-sequential-08) | d-bgc-chart-sequential-08 | ||
| chart sequential 08 hover | var(--dt-color-chart-sequential-08-hover) | d-bgc-chart-sequential-08-hover | ||
| chart sequential 08 selected | var(--dt-color-chart-sequential-08-selected) | d-bgc-chart-sequential-08-selected | ||
| chart sequential 09 | var(--dt-color-chart-sequential-09) | d-bgc-chart-sequential-09 | ||
| chart sequential 09 hover | var(--dt-color-chart-sequential-09-hover) | d-bgc-chart-sequential-09-hover | ||
| chart sequential 09 selected | var(--dt-color-chart-sequential-09-selected) | d-bgc-chart-sequential-09-selected | ||
| chart sequential 10 | var(--dt-color-chart-sequential-10) | d-bgc-chart-sequential-10 | ||
| chart sequential 10 hover | var(--dt-color-chart-sequential-10-hover) | d-bgc-chart-sequential-10-hover | ||
| chart sequential 10 selected | var(--dt-color-chart-sequential-10-selected) | d-bgc-chart-sequential-10-selected | ||
| chart sequential range 00 end | var(--dt-color-chart-sequential-range-00-end) | d-bgc-chart-sequential-range-00-end | ||
| chart sequential range 00 start | 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 | ||
Borders #
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 | var(--dt-color-chart-sequential-01) | d-bc-chart-sequential-01 | ||
| chart sequential 01 hover | var(--dt-color-chart-sequential-01-hover) | d-bc-chart-sequential-01-hover | ||
| chart sequential 01 selected | var(--dt-color-chart-sequential-01-selected) | d-bc-chart-sequential-01-selected | ||
| chart sequential 02 | var(--dt-color-chart-sequential-02) | d-bc-chart-sequential-02 | ||
| chart sequential 02 hover | var(--dt-color-chart-sequential-02-hover) | d-bc-chart-sequential-02-hover | ||
| chart sequential 02 selected | var(--dt-color-chart-sequential-02-selected) | d-bc-chart-sequential-02-selected | ||
| chart sequential 03 | var(--dt-color-chart-sequential-03) | d-bc-chart-sequential-03 | ||
| chart sequential 03 hover | var(--dt-color-chart-sequential-03-hover) | d-bc-chart-sequential-03-hover | ||
| chart sequential 03 selected | var(--dt-color-chart-sequential-03-selected) | d-bc-chart-sequential-03-selected | ||
| chart sequential 04 | var(--dt-color-chart-sequential-04) | d-bc-chart-sequential-04 | ||
| chart sequential 04 hover | var(--dt-color-chart-sequential-04-hover) | d-bc-chart-sequential-04-hover | ||
| chart sequential 04 selected | var(--dt-color-chart-sequential-04-selected) | d-bc-chart-sequential-04-selected | ||
| chart sequential 05 | var(--dt-color-chart-sequential-05) | d-bc-chart-sequential-05 | ||
| chart sequential 05 hover | var(--dt-color-chart-sequential-05-hover) | d-bc-chart-sequential-05-hover | ||
| chart sequential 05 selected | var(--dt-color-chart-sequential-05-selected) | d-bc-chart-sequential-05-selected | ||
| chart sequential 06 | var(--dt-color-chart-sequential-06) | d-bc-chart-sequential-06 | ||
| chart sequential 06 hover | var(--dt-color-chart-sequential-06-hover) | d-bc-chart-sequential-06-hover | ||
| chart sequential 06 selected | var(--dt-color-chart-sequential-06-selected) | d-bc-chart-sequential-06-selected | ||
| chart sequential 07 | var(--dt-color-chart-sequential-07) | d-bc-chart-sequential-07 | ||
| chart sequential 07 hover | var(--dt-color-chart-sequential-07-hover) | d-bc-chart-sequential-07-hover | ||
| chart sequential 07 selected | var(--dt-color-chart-sequential-07-selected) | d-bc-chart-sequential-07-selected | ||
| chart sequential 08 | var(--dt-color-chart-sequential-08) | d-bc-chart-sequential-08 | ||
| chart sequential 08 hover | var(--dt-color-chart-sequential-08-hover) | d-bc-chart-sequential-08-hover | ||
| chart sequential 08 selected | var(--dt-color-chart-sequential-08-selected) | d-bc-chart-sequential-08-selected | ||
| chart sequential 09 | var(--dt-color-chart-sequential-09) | d-bc-chart-sequential-09 | ||
| chart sequential 09 hover | var(--dt-color-chart-sequential-09-hover) | d-bc-chart-sequential-09-hover | ||
| chart sequential 09 selected | var(--dt-color-chart-sequential-09-selected) | d-bc-chart-sequential-09-selected | ||
| chart sequential 10 | var(--dt-color-chart-sequential-10) | d-bc-chart-sequential-10 | ||
| chart sequential 10 hover | var(--dt-color-chart-sequential-10-hover) | d-bc-chart-sequential-10-hover | ||
| chart sequential 10 selected | var(--dt-color-chart-sequential-10-selected) | d-bc-chart-sequential-10-selected | ||
| chart sequential range 00 end | var(--dt-color-chart-sequential-range-00-end) | d-bc-chart-sequential-range-00-end | ||
| chart sequential range 00 start | 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 | ||
Theme Shell #
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-base | |
| - | 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 Palette #
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.
Material Palette #
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.