Usage #
Use d-bgc-{color} to set an element's background color.
<div class="d-p-200 d-bar-300 d-bgc-primary">Primary</div> <div class="d-p-200 d-bar-300 d-bgc-critical">Critical</div>
Hover #
Use h:d-bgc-{color} to change an element's :hover state background color.
<dt-button kind="unstyled" class="d-p-200 d-bgc-primary h:d-bgc-critical"> Hover over me </dt-button>
Focus #
Use f:d-bgc-{color} to change an element's :focus and :focus-within state background color.
<dt-button kind="unstyled" class="d-p-200 d-bgc-primary f:d-bgc-critical"> Focus me </dt-button>
Focus Visible #
Use fv:d-bgc-{color} to change an element's :focus-visible state background color [only when focused by keyboard].
<dt-button kind="unstyled" class="d-p-200 d-bgc-primary fv:d-bgc-critical"> Keyboard focus me </dt-button>
Changing Opacity #
Use d-bgo{stop} to change an element's background color opacity. You can also change the background color opacity on :hover, :focus, :focus-visible by using the respective h:d-bgo{stop}, f:d-bgo{stop}, fv:d-bgo{stop} prefixes.
<div class="d-p-100 d-bgc-critical d-bar-300 d-bgo100">100%</div> <div class="d-p-100 d-bgc-critical d-bar-300 d-bgo99">99%</div> <div class="d-p-100 d-bgc-critical d-bar-300 d-bgo95">95%</div> <div class="d-p-100 d-bgc-critical d-bar-300 d-bgo90">90%</div> <div class="d-p-100 d-bgc-critical d-bar-300 d-bgo75">75%</div> <div class="d-p-100 d-bgc-critical d-bar-300 d-bgo50">50%</div> <div class="d-p-100 d-bgc-critical d-bar-300 d-bgo25">25%</div> <div class="d-p-100 d-bgc-critical d-bar-300 d-bgo10">10%</div> <div class="d-p-100 d-bgc-critical d-bar-300 d-bgo0">0%</div>
Inverted #
<div v-dt-mode:invert class="d-p-200 d-bar-300 d-bgc-primary">Primary</div> <div v-dt-mode:invert class="d-p-200 d-bar-300 d-bgc-critical">Critical</div>
Classes #
Class
|
Output
|
|---|---|
d-bgc-neutral-black | background-color: oklch(from var(--dt-color-neutral-black) l c h / var(--bgo, alpha)) !important; |
d-bgc-neutral-transparent | background-color: oklch(from var(--dt-color-neutral-transparent) l c h / var(--bgo, alpha)) !important; |
d-bgc-neutral-white | background-color: oklch(from var(--dt-color-neutral-white) l c h / var(--bgo, alpha)) !important; |
d-bgc-transparent | background-color: transparent !important;
background-image: none !important; |
d-bgc-unset | background-color: unset !important;
background-image: unset !important; |
d-bgc-ai | background-image: var(--dt-color-surface-ai) !important; |
d-bgc-backdrop | background-color: oklch(from var(--dt-color-surface-backdrop) l c h / var(--bgo, alpha)) !important; |
d-bgc-bold | background-color: oklch(from var(--dt-color-surface-bold) l c h / var(--bgo, alpha)) !important; |
d-bgc-bold-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-bold-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-bold-opaque | background-color: oklch(from var(--dt-color-surface-bold-opaque) l c h / var(--bgo, alpha)) !important; |
d-bgc-bold-opaque-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-bold-opaque-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-border-box | background-clip: border-box !important; |
d-bgc-brand | background-color: oklch(from var(--dt-color-surface-brand) l c h / var(--bgo, alpha)) !important; |
d-bgc-brand-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-brand-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-brand-opaque | background-color: oklch(from var(--dt-color-surface-brand-opaque) l c h / var(--bgo, alpha)) !important; |
d-bgc-brand-opaque-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-brand-opaque-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-brand-strong | background-color: oklch(from var(--dt-color-surface-brand-strong) l c h / var(--bgo, alpha)) !important; |
d-bgc-brand-strong-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-brand-strong-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-brand-subtle | background-color: oklch(from var(--dt-color-surface-brand-subtle) l c h / var(--bgo, alpha)) !important; |
d-bgc-brand-subtle-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-brand-subtle-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-brand-subtle-opaque | background-color: oklch(from var(--dt-color-surface-brand-subtle-opaque) l c h / var(--bgo, alpha)) !important; |
d-bgc-brand-subtle-opaque-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-brand-subtle-opaque-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-content-box | background-clip: content-box !important; |
d-bgc-contrast | background-color: oklch(from var(--dt-color-surface-contrast) l c h / var(--bgo, alpha)) !important; |
d-bgc-contrast-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-contrast-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-contrast-opaque | background-color: oklch(from var(--dt-color-surface-contrast-opaque) l c h / var(--bgo, alpha)) !important; |
d-bgc-contrast-opaque-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-contrast-opaque-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-critical | background-color: oklch(from var(--dt-color-surface-critical) l c h / var(--bgo, alpha)) !important; |
d-bgc-critical-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-critical-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-critical-opaque | background-color: oklch(from var(--dt-color-surface-critical-opaque) l c h / var(--bgo, alpha)) !important; |
d-bgc-critical-opaque-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-critical-opaque-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-critical-strong | background-color: oklch(from var(--dt-color-surface-critical-strong) l c h / var(--bgo, alpha)) !important; |
d-bgc-critical-strong-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-critical-strong-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-critical-subtle | background-color: oklch(from var(--dt-color-surface-critical-subtle) l c h / var(--bgo, alpha)) !important; |
d-bgc-critical-subtle-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-critical-subtle-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-critical-subtle-opaque | background-color: oklch(from var(--dt-color-surface-critical-subtle-opaque) l c h / var(--bgo, alpha)) !important; |
d-bgc-critical-subtle-opaque-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-critical-subtle-opaque-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-info | background-color: oklch(from var(--dt-color-surface-info) l c h / var(--bgo, alpha)) !important; |
d-bgc-info-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-info-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-info-opaque | background-color: oklch(from var(--dt-color-surface-info-opaque) l c h / var(--bgo, alpha)) !important; |
d-bgc-info-opaque-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-info-opaque-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-info-strong | background-color: oklch(from var(--dt-color-surface-info-strong) l c h / var(--bgo, alpha)) !important; |
d-bgc-info-strong-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-info-strong-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-info-subtle | background-color: oklch(from var(--dt-color-surface-info-subtle) l c h / var(--bgo, alpha)) !important; |
d-bgc-info-subtle-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-info-subtle-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-info-subtle-opaque | background-color: oklch(from var(--dt-color-surface-info-subtle-opaque) l c h / var(--bgo, alpha)) !important; |
d-bgc-info-subtle-opaque-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-info-subtle-opaque-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-moderate | background-color: oklch(from var(--dt-color-surface-moderate) l c h / var(--bgo, alpha)) !important; |
d-bgc-moderate-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-moderate-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-moderate-opaque | background-color: oklch(from var(--dt-color-surface-moderate-opaque) l c h / var(--bgo, alpha)) !important; |
d-bgc-moderate-opaque-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-moderate-opaque-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-overlay | background-color: oklch(from var(--dt-color-surface-overlay) l c h / var(--bgo, alpha)) !important; |
d-bgc-padding-box | background-clip: padding-box !important; |
d-bgc-positive | background-color: oklch(from var(--dt-color-surface-positive) l c h / var(--bgo, alpha)) !important; |
d-bgc-positive-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-positive-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-positive-opaque | background-color: oklch(from var(--dt-color-surface-positive-opaque) l c h / var(--bgo, alpha)) !important; |
d-bgc-positive-opaque-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-positive-opaque-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-positive-strong | background-color: oklch(from var(--dt-color-surface-positive-strong) l c h / var(--bgo, alpha)) !important; |
d-bgc-positive-strong-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-positive-strong-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-positive-subtle | background-color: oklch(from var(--dt-color-surface-positive-subtle) l c h / var(--bgo, alpha)) !important; |
d-bgc-positive-subtle-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-positive-subtle-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-positive-subtle-opaque | background-color: oklch(from var(--dt-color-surface-positive-subtle-opaque) l c h / var(--bgo, alpha)) !important; |
d-bgc-positive-subtle-opaque-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-positive-subtle-opaque-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-primary | background-color: oklch(from var(--dt-color-surface-primary) l c h / var(--bgo, alpha)) !important; |
d-bgc-primary-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-primary-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-primary-opaque | background-color: oklch(from var(--dt-color-surface-primary-opaque) l c h / var(--bgo, alpha)) !important; |
d-bgc-primary-opaque-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-primary-opaque-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-secondary | background-color: oklch(from var(--dt-color-surface-secondary) l c h / var(--bgo, alpha)) !important; |
d-bgc-secondary-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-secondary-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-secondary-opaque | background-color: oklch(from var(--dt-color-surface-secondary-opaque) l c h / var(--bgo, alpha)) !important; |
d-bgc-secondary-opaque-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-secondary-opaque-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-strong | background-color: oklch(from var(--dt-color-surface-strong) l c h / var(--bgo, alpha)) !important; |
d-bgc-strong-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-strong-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-strong-opaque | background-color: oklch(from var(--dt-color-surface-strong-opaque) l c h / var(--bgo, alpha)) !important; |
d-bgc-strong-opaque-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-strong-opaque-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-success
Deprecated
| background-color: oklch(from var(--dt-color-surface-success) l c h / var(--bgo, alpha)) !important; |
d-bgc-success-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-success-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-success-opaque
Deprecated
| background-color: oklch(from var(--dt-color-surface-success-opaque) l c h / var(--bgo, alpha)) !important; |
d-bgc-success-opaque-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-success-opaque-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-success-strong
Deprecated
| background-color: oklch(from var(--dt-color-surface-success-strong) l c h / var(--bgo, alpha)) !important; |
d-bgc-success-subtle
Deprecated
| background-color: oklch(from var(--dt-color-surface-success-subtle) l c h / var(--bgo, alpha)) !important; |
d-bgc-success-subtle-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-success-subtle-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-success-subtle-opaque
Deprecated
| background-color: oklch(from var(--dt-color-surface-success-subtle-opaque) l c h / var(--bgo, alpha)) !important; |
d-bgc-success-subtle-opaque-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-success-subtle-opaque-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-text | color: transparent !important;
-webkit-background-clip: text !important;
background-clip: text !important; |
d-bgc-warning | background-color: oklch(from var(--dt-color-surface-warning) l c h / var(--bgo, alpha)) !important; |
d-bgc-warning-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-warning-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-warning-opaque | background-color: oklch(from var(--dt-color-surface-warning-opaque) l c h / var(--bgo, alpha)) !important; |
d-bgc-warning-opaque-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-warning-opaque-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-warning-strong | background-color: oklch(from var(--dt-color-surface-warning-strong) l c h / var(--bgo, alpha)) !important; |
d-bgc-warning-strong-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-warning-strong-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-warning-subtle | background-color: oklch(from var(--dt-color-surface-warning-subtle) l c h / var(--bgo, alpha)) !important; |
d-bgc-warning-subtle-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-warning-subtle-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-warning-subtle-opaque | background-color: oklch(from var(--dt-color-surface-warning-subtle-opaque) l c h / var(--bgo, alpha)) !important; |
d-bgc-warning-subtle-opaque-inverted
Deprecated
| background-color: oklch(from var(--dt-color-surface-warning-subtle-opaque-inverted) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-neutral | background-color: oklch(from var(--dt-color-chart-neutral) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-neutral-hover | background-color: oklch(from var(--dt-color-chart-neutral-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-neutral-selected | background-color: oklch(from var(--dt-color-chart-neutral-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-accent | background-color: oklch(from var(--dt-color-chart-accent) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-accent-hover | background-color: oklch(from var(--dt-color-chart-accent-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-accent-selected | background-color: oklch(from var(--dt-color-chart-accent-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-critical | background-color: oklch(from var(--dt-color-chart-critical) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-critical-hover | background-color: oklch(from var(--dt-color-chart-critical-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-critical-selected | background-color: oklch(from var(--dt-color-chart-critical-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-info | background-color: oklch(from var(--dt-color-chart-info) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-info-hover | background-color: oklch(from var(--dt-color-chart-info-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-info-selected | background-color: oklch(from var(--dt-color-chart-info-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-positive | background-color: oklch(from var(--dt-color-chart-positive) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-positive-hover | background-color: oklch(from var(--dt-color-chart-positive-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-positive-selected | background-color: oklch(from var(--dt-color-chart-positive-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-warning | background-color: oklch(from var(--dt-color-chart-warning) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-warning-hover | background-color: oklch(from var(--dt-color-chart-warning-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-warning-selected | background-color: oklch(from var(--dt-color-chart-warning-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-01 | background-color: oklch(from var(--dt-color-chart-categorical-01) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-01-hover | background-color: oklch(from var(--dt-color-chart-categorical-01-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-01-selected | background-color: oklch(from var(--dt-color-chart-categorical-01-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-02 | background-color: oklch(from var(--dt-color-chart-categorical-02) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-02-hover | background-color: oklch(from var(--dt-color-chart-categorical-02-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-02-selected | background-color: oklch(from var(--dt-color-chart-categorical-02-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-03 | background-color: oklch(from var(--dt-color-chart-categorical-03) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-03-hover | background-color: oklch(from var(--dt-color-chart-categorical-03-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-03-selected | background-color: oklch(from var(--dt-color-chart-categorical-03-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-04 | background-color: oklch(from var(--dt-color-chart-categorical-04) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-04-hover | background-color: oklch(from var(--dt-color-chart-categorical-04-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-04-selected | background-color: oklch(from var(--dt-color-chart-categorical-04-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-05 | background-color: oklch(from var(--dt-color-chart-categorical-05) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-05-hover | background-color: oklch(from var(--dt-color-chart-categorical-05-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-05-selected | background-color: oklch(from var(--dt-color-chart-categorical-05-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-06 | background-color: oklch(from var(--dt-color-chart-categorical-06) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-06-hover | background-color: oklch(from var(--dt-color-chart-categorical-06-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-06-selected | background-color: oklch(from var(--dt-color-chart-categorical-06-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-07 | background-color: oklch(from var(--dt-color-chart-categorical-07) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-07-hover | background-color: oklch(from var(--dt-color-chart-categorical-07-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-07-selected | background-color: oklch(from var(--dt-color-chart-categorical-07-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-08 | background-color: oklch(from var(--dt-color-chart-categorical-08) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-08-hover | background-color: oklch(from var(--dt-color-chart-categorical-08-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-08-selected | background-color: oklch(from var(--dt-color-chart-categorical-08-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-09 | background-color: oklch(from var(--dt-color-chart-categorical-09) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-09-hover | background-color: oklch(from var(--dt-color-chart-categorical-09-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-09-selected | background-color: oklch(from var(--dt-color-chart-categorical-09-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-10 | background-color: oklch(from var(--dt-color-chart-categorical-10) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-10-hover | background-color: oklch(from var(--dt-color-chart-categorical-10-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-10-selected | background-color: oklch(from var(--dt-color-chart-categorical-10-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-11 | background-color: oklch(from var(--dt-color-chart-categorical-11) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-11-hover | background-color: oklch(from var(--dt-color-chart-categorical-11-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-11-selected | background-color: oklch(from var(--dt-color-chart-categorical-11-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-12 | background-color: oklch(from var(--dt-color-chart-categorical-12) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-12-hover | background-color: oklch(from var(--dt-color-chart-categorical-12-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-12-selected | background-color: oklch(from var(--dt-color-chart-categorical-12-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-13 | background-color: oklch(from var(--dt-color-chart-categorical-13) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-13-hover | background-color: oklch(from var(--dt-color-chart-categorical-13-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-13-selected | background-color: oklch(from var(--dt-color-chart-categorical-13-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-14 | background-color: oklch(from var(--dt-color-chart-categorical-14) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-14-hover | background-color: oklch(from var(--dt-color-chart-categorical-14-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-14-selected | background-color: oklch(from var(--dt-color-chart-categorical-14-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-15 | background-color: oklch(from var(--dt-color-chart-categorical-15) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-15-hover | background-color: oklch(from var(--dt-color-chart-categorical-15-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-15-selected | background-color: oklch(from var(--dt-color-chart-categorical-15-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-16 | background-color: oklch(from var(--dt-color-chart-categorical-16) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-16-hover | background-color: oklch(from var(--dt-color-chart-categorical-16-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-16-selected | background-color: oklch(from var(--dt-color-chart-categorical-16-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-17 | background-color: oklch(from var(--dt-color-chart-categorical-17) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-17-hover | background-color: oklch(from var(--dt-color-chart-categorical-17-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-17-selected | background-color: oklch(from var(--dt-color-chart-categorical-17-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-18 | background-color: oklch(from var(--dt-color-chart-categorical-18) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-18-hover | background-color: oklch(from var(--dt-color-chart-categorical-18-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-18-selected | background-color: oklch(from var(--dt-color-chart-categorical-18-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-19 | background-color: oklch(from var(--dt-color-chart-categorical-19) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-19-hover | background-color: oklch(from var(--dt-color-chart-categorical-19-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-19-selected | background-color: oklch(from var(--dt-color-chart-categorical-19-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-20 | background-color: oklch(from var(--dt-color-chart-categorical-20) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-20-hover | background-color: oklch(from var(--dt-color-chart-categorical-20-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-20-selected | background-color: oklch(from var(--dt-color-chart-categorical-20-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-21 | background-color: oklch(from var(--dt-color-chart-categorical-21) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-21-hover | background-color: oklch(from var(--dt-color-chart-categorical-21-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-21-selected | background-color: oklch(from var(--dt-color-chart-categorical-21-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-22 | background-color: oklch(from var(--dt-color-chart-categorical-22) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-22-hover | background-color: oklch(from var(--dt-color-chart-categorical-22-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-22-selected | background-color: oklch(from var(--dt-color-chart-categorical-22-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-23 | background-color: oklch(from var(--dt-color-chart-categorical-23) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-23-hover | background-color: oklch(from var(--dt-color-chart-categorical-23-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-23-selected | background-color: oklch(from var(--dt-color-chart-categorical-23-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-24 | background-color: oklch(from var(--dt-color-chart-categorical-24) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-24-hover | background-color: oklch(from var(--dt-color-chart-categorical-24-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-24-selected | background-color: oklch(from var(--dt-color-chart-categorical-24-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-25 | background-color: oklch(from var(--dt-color-chart-categorical-25) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-25-hover | background-color: oklch(from var(--dt-color-chart-categorical-25-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-25-selected | background-color: oklch(from var(--dt-color-chart-categorical-25-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-26 | background-color: oklch(from var(--dt-color-chart-categorical-26) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-26-hover | background-color: oklch(from var(--dt-color-chart-categorical-26-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-26-selected | background-color: oklch(from var(--dt-color-chart-categorical-26-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-27 | background-color: oklch(from var(--dt-color-chart-categorical-27) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-27-hover | background-color: oklch(from var(--dt-color-chart-categorical-27-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-27-selected | background-color: oklch(from var(--dt-color-chart-categorical-27-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-28 | background-color: oklch(from var(--dt-color-chart-categorical-28) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-28-hover | background-color: oklch(from var(--dt-color-chart-categorical-28-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-28-selected | background-color: oklch(from var(--dt-color-chart-categorical-28-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-29 | background-color: oklch(from var(--dt-color-chart-categorical-29) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-29-hover | background-color: oklch(from var(--dt-color-chart-categorical-29-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-29-selected | background-color: oklch(from var(--dt-color-chart-categorical-29-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-30 | background-color: oklch(from var(--dt-color-chart-categorical-30) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-30-hover | background-color: oklch(from var(--dt-color-chart-categorical-30-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-categorical-30-selected | background-color: oklch(from var(--dt-color-chart-categorical-30-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-01 | background-color: oklch(from var(--dt-color-chart-sequential-01) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-01-hover | background-color: oklch(from var(--dt-color-chart-sequential-01-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-01-selected | background-color: oklch(from var(--dt-color-chart-sequential-01-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-02 | background-color: oklch(from var(--dt-color-chart-sequential-02) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-02-hover | background-color: oklch(from var(--dt-color-chart-sequential-02-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-02-selected | background-color: oklch(from var(--dt-color-chart-sequential-02-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-03 | background-color: oklch(from var(--dt-color-chart-sequential-03) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-03-hover | background-color: oklch(from var(--dt-color-chart-sequential-03-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-03-selected | background-color: oklch(from var(--dt-color-chart-sequential-03-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-04 | background-color: oklch(from var(--dt-color-chart-sequential-04) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-04-hover | background-color: oklch(from var(--dt-color-chart-sequential-04-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-04-selected | background-color: oklch(from var(--dt-color-chart-sequential-04-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-05 | background-color: oklch(from var(--dt-color-chart-sequential-05) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-05-hover | background-color: oklch(from var(--dt-color-chart-sequential-05-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-05-selected | background-color: oklch(from var(--dt-color-chart-sequential-05-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-06 | background-color: oklch(from var(--dt-color-chart-sequential-06) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-06-hover | background-color: oklch(from var(--dt-color-chart-sequential-06-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-06-selected | background-color: oklch(from var(--dt-color-chart-sequential-06-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-07 | background-color: oklch(from var(--dt-color-chart-sequential-07) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-07-hover | background-color: oklch(from var(--dt-color-chart-sequential-07-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-07-selected | background-color: oklch(from var(--dt-color-chart-sequential-07-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-08 | background-color: oklch(from var(--dt-color-chart-sequential-08) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-08-hover | background-color: oklch(from var(--dt-color-chart-sequential-08-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-08-selected | background-color: oklch(from var(--dt-color-chart-sequential-08-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-09 | background-color: oklch(from var(--dt-color-chart-sequential-09) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-09-hover | background-color: oklch(from var(--dt-color-chart-sequential-09-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-09-selected | background-color: oklch(from var(--dt-color-chart-sequential-09-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-10 | background-color: oklch(from var(--dt-color-chart-sequential-10) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-10-hover | background-color: oklch(from var(--dt-color-chart-sequential-10-hover) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-10-selected | background-color: oklch(from var(--dt-color-chart-sequential-10-selected) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-00-end | background-color: oklch(from var(--dt-color-chart-sequential-range-00-end) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-00-start | background-color: oklch(from var(--dt-color-chart-sequential-range-00-start) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-01-end | background-color: oklch(from var(--dt-color-chart-sequential-range-01-end) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-01-start | background-color: oklch(from var(--dt-color-chart-sequential-range-01-start) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-02-end | background-color: oklch(from var(--dt-color-chart-sequential-range-02-end) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-02-start | background-color: oklch(from var(--dt-color-chart-sequential-range-02-start) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-03-end | background-color: oklch(from var(--dt-color-chart-sequential-range-03-end) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-03-start | background-color: oklch(from var(--dt-color-chart-sequential-range-03-start) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-04-end | background-color: oklch(from var(--dt-color-chart-sequential-range-04-end) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-04-start | background-color: oklch(from var(--dt-color-chart-sequential-range-04-start) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-05-end | background-color: oklch(from var(--dt-color-chart-sequential-range-05-end) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-05-start | background-color: oklch(from var(--dt-color-chart-sequential-range-05-start) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-06-end | background-color: oklch(from var(--dt-color-chart-sequential-range-06-end) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-06-start | background-color: oklch(from var(--dt-color-chart-sequential-range-06-start) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-07-end | background-color: oklch(from var(--dt-color-chart-sequential-range-07-end) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-07-start | background-color: oklch(from var(--dt-color-chart-sequential-range-07-start) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-08-end | background-color: oklch(from var(--dt-color-chart-sequential-range-08-end) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-08-start | background-color: oklch(from var(--dt-color-chart-sequential-range-08-start) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-09-end | background-color: oklch(from var(--dt-color-chart-sequential-range-09-end) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-09-start | background-color: oklch(from var(--dt-color-chart-sequential-range-09-start) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-10-end | background-color: oklch(from var(--dt-color-chart-sequential-range-10-end) l c h / var(--bgo, alpha)) !important; |
d-bgc-chart-sequential-range-10-start | background-color: oklch(from var(--dt-color-chart-sequential-range-10-start) l c h / var(--bgo, alpha)) !important; |
d-bgc-berry-50
Deprecated
| background-color: oklch(from var(--dt-color-berry-50) l c h / var(--bgo, alpha)) !important; |
d-bgc-berry-100
Deprecated
| background-color: oklch(from var(--dt-color-berry-100) l c h / var(--bgo, alpha)) !important; |
d-bgc-berry-200
Deprecated
| background-color: oklch(from var(--dt-color-berry-200) l c h / var(--bgo, alpha)) !important; |
d-bgc-berry-300
Deprecated
| background-color: oklch(from var(--dt-color-berry-300) l c h / var(--bgo, alpha)) !important; |
d-bgc-berry-400
Deprecated
| background-color: oklch(from var(--dt-color-berry-400) l c h / var(--bgo, alpha)) !important; |
d-bgc-berry-500
Deprecated
| background-color: oklch(from var(--dt-color-berry-500) l c h / var(--bgo, alpha)) !important; |
d-bgc-berry-600
Deprecated
| background-color: oklch(from var(--dt-color-berry-600) l c h / var(--bgo, alpha)) !important; |
d-bgc-berry-700
Deprecated
| background-color: oklch(from var(--dt-color-berry-700) l c h / var(--bgo, alpha)) !important; |
d-bgc-berry-800
Deprecated
| background-color: oklch(from var(--dt-color-berry-800) l c h / var(--bgo, alpha)) !important; |
d-bgc-berry-900
Deprecated
| background-color: oklch(from var(--dt-color-berry-900) l c h / var(--bgo, alpha)) !important; |
d-bgc-berry-950
Deprecated
| background-color: oklch(from var(--dt-color-berry-950) l c h / var(--bgo, alpha)) !important; |
d-bgc-berry-1000
Deprecated
| background-color: oklch(from var(--dt-color-berry-1000) l c h / var(--bgo, alpha)) !important; |
d-bgc-black-50
Deprecated
| background-color: oklch(from var(--dt-color-black-50) l c h / var(--bgo, alpha)) !important; |
d-bgc-black-100
Deprecated
| background-color: oklch(from var(--dt-color-black-100) l c h / var(--bgo, alpha)) !important; |
d-bgc-black-150
Deprecated
| background-color: oklch(from var(--dt-color-black-150) l c h / var(--bgo, alpha)) !important; |
d-bgc-black-200
Deprecated
| background-color: oklch(from var(--dt-color-black-200) l c h / var(--bgo, alpha)) !important; |
d-bgc-black-250
Deprecated
| background-color: oklch(from var(--dt-color-black-250) l c h / var(--bgo, alpha)) !important; |
d-bgc-black-300
Deprecated
| background-color: oklch(from var(--dt-color-black-300) l c h / var(--bgo, alpha)) !important; |
d-bgc-black-350
Deprecated
| background-color: oklch(from var(--dt-color-black-350) l c h / var(--bgo, alpha)) !important; |
d-bgc-black-400
Deprecated
| background-color: oklch(from var(--dt-color-black-400) l c h / var(--bgo, alpha)) !important; |
d-bgc-black-450
Deprecated
| background-color: oklch(from var(--dt-color-black-450) l c h / var(--bgo, alpha)) !important; |
d-bgc-black-500
Deprecated
| background-color: oklch(from var(--dt-color-black-500) l c h / var(--bgo, alpha)) !important; |
d-bgc-black-550
Deprecated
| background-color: oklch(from var(--dt-color-black-550) l c h / var(--bgo, alpha)) !important; |
d-bgc-black-600
Deprecated
| background-color: oklch(from var(--dt-color-black-600) l c h / var(--bgo, alpha)) !important; |
d-bgc-black-650
Deprecated
| background-color: oklch(from var(--dt-color-black-650) l c h / var(--bgo, alpha)) !important; |
d-bgc-black-700
Deprecated
| background-color: oklch(from var(--dt-color-black-700) l c h / var(--bgo, alpha)) !important; |
d-bgc-black-750
Deprecated
| background-color: oklch(from var(--dt-color-black-750) l c h / var(--bgo, alpha)) !important; |
d-bgc-black-800
Deprecated
| background-color: oklch(from var(--dt-color-black-800) l c h / var(--bgo, alpha)) !important; |
d-bgc-black-850
Deprecated
| background-color: oklch(from var(--dt-color-black-850) l c h / var(--bgo, alpha)) !important; |
d-bgc-black-900
Deprecated
| background-color: oklch(from var(--dt-color-black-900) l c h / var(--bgo, alpha)) !important; |
d-bgc-black-950
Deprecated
| background-color: oklch(from var(--dt-color-black-950) l c h / var(--bgo, alpha)) !important; |
d-bgc-black-1000
Deprecated
| background-color: oklch(from var(--dt-color-black-1000) l c h / var(--bgo, alpha)) !important; |
d-bgc-blue-50
Deprecated
| background-color: oklch(from var(--dt-color-blue-50) l c h / var(--bgo, alpha)) !important; |
d-bgc-blue-100
Deprecated
| background-color: oklch(from var(--dt-color-blue-100) l c h / var(--bgo, alpha)) !important; |
d-bgc-blue-200
Deprecated
| background-color: oklch(from var(--dt-color-blue-200) l c h / var(--bgo, alpha)) !important; |
d-bgc-blue-300
Deprecated
| background-color: oklch(from var(--dt-color-blue-300) l c h / var(--bgo, alpha)) !important; |
d-bgc-blue-400
Deprecated
| background-color: oklch(from var(--dt-color-blue-400) l c h / var(--bgo, alpha)) !important; |
d-bgc-blue-500
Deprecated
| background-color: oklch(from var(--dt-color-blue-500) l c h / var(--bgo, alpha)) !important; |
d-bgc-blue-600
Deprecated
| background-color: oklch(from var(--dt-color-blue-600) l c h / var(--bgo, alpha)) !important; |
d-bgc-blue-700
Deprecated
| background-color: oklch(from var(--dt-color-blue-700) l c h / var(--bgo, alpha)) !important; |
d-bgc-blue-800
Deprecated
| background-color: oklch(from var(--dt-color-blue-800) l c h / var(--bgo, alpha)) !important; |
d-bgc-blue-900
Deprecated
| background-color: oklch(from var(--dt-color-blue-900) l c h / var(--bgo, alpha)) !important; |
d-bgc-blue-950
Deprecated
| background-color: oklch(from var(--dt-color-blue-950) l c h / var(--bgo, alpha)) !important; |
d-bgc-blue-1000
Deprecated
| background-color: oklch(from var(--dt-color-blue-1000) l c h / var(--bgo, alpha)) !important; |
d-bgc-coral-50
Deprecated
| background-color: oklch(from var(--dt-color-coral-50) l c h / var(--bgo, alpha)) !important; |
d-bgc-coral-100
Deprecated
| background-color: oklch(from var(--dt-color-coral-100) l c h / var(--bgo, alpha)) !important; |
d-bgc-coral-200
Deprecated
| background-color: oklch(from var(--dt-color-coral-200) l c h / var(--bgo, alpha)) !important; |
d-bgc-coral-300
Deprecated
| background-color: oklch(from var(--dt-color-coral-300) l c h / var(--bgo, alpha)) !important; |
d-bgc-coral-400
Deprecated
| background-color: oklch(from var(--dt-color-coral-400) l c h / var(--bgo, alpha)) !important; |
d-bgc-coral-500
Deprecated
| background-color: oklch(from var(--dt-color-coral-500) l c h / var(--bgo, alpha)) !important; |
d-bgc-coral-600
Deprecated
| background-color: oklch(from var(--dt-color-coral-600) l c h / var(--bgo, alpha)) !important; |
d-bgc-coral-700
Deprecated
| background-color: oklch(from var(--dt-color-coral-700) l c h / var(--bgo, alpha)) !important; |
d-bgc-coral-800
Deprecated
| background-color: oklch(from var(--dt-color-coral-800) l c h / var(--bgo, alpha)) !important; |
d-bgc-coral-900
Deprecated
| background-color: oklch(from var(--dt-color-coral-900) l c h / var(--bgo, alpha)) !important; |
d-bgc-coral-950
Deprecated
| background-color: oklch(from var(--dt-color-coral-950) l c h / var(--bgo, alpha)) !important; |
d-bgc-coral-1000
Deprecated
| background-color: oklch(from var(--dt-color-coral-1000) l c h / var(--bgo, alpha)) !important; |
d-bgc-gold-50
Deprecated
| background-color: oklch(from var(--dt-color-gold-50) l c h / var(--bgo, alpha)) !important; |
d-bgc-gold-100
Deprecated
| background-color: oklch(from var(--dt-color-gold-100) l c h / var(--bgo, alpha)) !important; |
d-bgc-gold-200
Deprecated
| background-color: oklch(from var(--dt-color-gold-200) l c h / var(--bgo, alpha)) !important; |
d-bgc-gold-300
Deprecated
| background-color: oklch(from var(--dt-color-gold-300) l c h / var(--bgo, alpha)) !important; |
d-bgc-gold-400
Deprecated
| background-color: oklch(from var(--dt-color-gold-400) l c h / var(--bgo, alpha)) !important; |
d-bgc-gold-500
Deprecated
| background-color: oklch(from var(--dt-color-gold-500) l c h / var(--bgo, alpha)) !important; |
d-bgc-gold-600
Deprecated
| background-color: oklch(from var(--dt-color-gold-600) l c h / var(--bgo, alpha)) !important; |
d-bgc-gold-700
Deprecated
| background-color: oklch(from var(--dt-color-gold-700) l c h / var(--bgo, alpha)) !important; |
d-bgc-gold-800
Deprecated
| background-color: oklch(from var(--dt-color-gold-800) l c h / var(--bgo, alpha)) !important; |
d-bgc-gold-900
Deprecated
| background-color: oklch(from var(--dt-color-gold-900) l c h / var(--bgo, alpha)) !important; |
d-bgc-gold-950
Deprecated
| background-color: oklch(from var(--dt-color-gold-950) l c h / var(--bgo, alpha)) !important; |
d-bgc-gold-1000
Deprecated
| background-color: oklch(from var(--dt-color-gold-1000) l c h / var(--bgo, alpha)) !important; |
d-bgc-green-50
Deprecated
| background-color: oklch(from var(--dt-color-green-50) l c h / var(--bgo, alpha)) !important; |
d-bgc-green-100
Deprecated
| background-color: oklch(from var(--dt-color-green-100) l c h / var(--bgo, alpha)) !important; |
d-bgc-green-200
Deprecated
| background-color: oklch(from var(--dt-color-green-200) l c h / var(--bgo, alpha)) !important; |
d-bgc-green-300
Deprecated
| background-color: oklch(from var(--dt-color-green-300) l c h / var(--bgo, alpha)) !important; |
d-bgc-green-400
Deprecated
| background-color: oklch(from var(--dt-color-green-400) l c h / var(--bgo, alpha)) !important; |
d-bgc-green-500
Deprecated
| background-color: oklch(from var(--dt-color-green-500) l c h / var(--bgo, alpha)) !important; |
d-bgc-green-600
Deprecated
| background-color: oklch(from var(--dt-color-green-600) l c h / var(--bgo, alpha)) !important; |
d-bgc-green-700
Deprecated
| background-color: oklch(from var(--dt-color-green-700) l c h / var(--bgo, alpha)) !important; |
d-bgc-green-800
Deprecated
| background-color: oklch(from var(--dt-color-green-800) l c h / var(--bgo, alpha)) !important; |
d-bgc-green-900
Deprecated
| background-color: oklch(from var(--dt-color-green-900) l c h / var(--bgo, alpha)) !important; |
d-bgc-green-950
Deprecated
| background-color: oklch(from var(--dt-color-green-950) l c h / var(--bgo, alpha)) !important; |
d-bgc-green-1000
Deprecated
| background-color: oklch(from var(--dt-color-green-1000) l c h / var(--bgo, alpha)) !important; |
d-bgc-indigo-50
Deprecated
| background-color: oklch(from var(--dt-color-indigo-50) l c h / var(--bgo, alpha)) !important; |
d-bgc-indigo-100
Deprecated
| background-color: oklch(from var(--dt-color-indigo-100) l c h / var(--bgo, alpha)) !important; |
d-bgc-indigo-200
Deprecated
| background-color: oklch(from var(--dt-color-indigo-200) l c h / var(--bgo, alpha)) !important; |
d-bgc-indigo-300
Deprecated
| background-color: oklch(from var(--dt-color-indigo-300) l c h / var(--bgo, alpha)) !important; |
d-bgc-indigo-400
Deprecated
| background-color: oklch(from var(--dt-color-indigo-400) l c h / var(--bgo, alpha)) !important; |
d-bgc-indigo-500
Deprecated
| background-color: oklch(from var(--dt-color-indigo-500) l c h / var(--bgo, alpha)) !important; |
d-bgc-indigo-600
Deprecated
| background-color: oklch(from var(--dt-color-indigo-600) l c h / var(--bgo, alpha)) !important; |
d-bgc-indigo-700
Deprecated
| background-color: oklch(from var(--dt-color-indigo-700) l c h / var(--bgo, alpha)) !important; |
d-bgc-indigo-800
Deprecated
| background-color: oklch(from var(--dt-color-indigo-800) l c h / var(--bgo, alpha)) !important; |
d-bgc-indigo-900
Deprecated
| background-color: oklch(from var(--dt-color-indigo-900) l c h / var(--bgo, alpha)) !important; |
d-bgc-indigo-950
Deprecated
| background-color: oklch(from var(--dt-color-indigo-950) l c h / var(--bgo, alpha)) !important; |
d-bgc-indigo-1000
Deprecated
| background-color: oklch(from var(--dt-color-indigo-1000) l c h / var(--bgo, alpha)) !important; |
d-bgc-magenta-50
Deprecated
| background-color: oklch(from var(--dt-color-magenta-50) l c h / var(--bgo, alpha)) !important; |
d-bgc-magenta-100
Deprecated
| background-color: oklch(from var(--dt-color-magenta-100) l c h / var(--bgo, alpha)) !important; |
d-bgc-magenta-200
Deprecated
| background-color: oklch(from var(--dt-color-magenta-200) l c h / var(--bgo, alpha)) !important; |
d-bgc-magenta-300
Deprecated
| background-color: oklch(from var(--dt-color-magenta-300) l c h / var(--bgo, alpha)) !important; |
d-bgc-magenta-400
Deprecated
| background-color: oklch(from var(--dt-color-magenta-400) l c h / var(--bgo, alpha)) !important; |
d-bgc-magenta-500
Deprecated
| background-color: oklch(from var(--dt-color-magenta-500) l c h / var(--bgo, alpha)) !important; |
d-bgc-magenta-600
Deprecated
| background-color: oklch(from var(--dt-color-magenta-600) l c h / var(--bgo, alpha)) !important; |
d-bgc-magenta-700
Deprecated
| background-color: oklch(from var(--dt-color-magenta-700) l c h / var(--bgo, alpha)) !important; |
d-bgc-magenta-800
Deprecated
| background-color: oklch(from var(--dt-color-magenta-800) l c h / var(--bgo, alpha)) !important; |
d-bgc-magenta-900
Deprecated
| background-color: oklch(from var(--dt-color-magenta-900) l c h / var(--bgo, alpha)) !important; |
d-bgc-magenta-950
Deprecated
| background-color: oklch(from var(--dt-color-magenta-950) l c h / var(--bgo, alpha)) !important; |
d-bgc-magenta-1000
Deprecated
| background-color: oklch(from var(--dt-color-magenta-1000) l c h / var(--bgo, alpha)) !important; |
d-bgc-olive-50
Deprecated
| background-color: oklch(from var(--dt-color-olive-50) l c h / var(--bgo, alpha)) !important; |
d-bgc-olive-100
Deprecated
| background-color: oklch(from var(--dt-color-olive-100) l c h / var(--bgo, alpha)) !important; |
d-bgc-olive-200
Deprecated
| background-color: oklch(from var(--dt-color-olive-200) l c h / var(--bgo, alpha)) !important; |
d-bgc-olive-300
Deprecated
| background-color: oklch(from var(--dt-color-olive-300) l c h / var(--bgo, alpha)) !important; |
d-bgc-olive-400
Deprecated
| background-color: oklch(from var(--dt-color-olive-400) l c h / var(--bgo, alpha)) !important; |
d-bgc-olive-500
Deprecated
| background-color: oklch(from var(--dt-color-olive-500) l c h / var(--bgo, alpha)) !important; |
d-bgc-olive-600
Deprecated
| background-color: oklch(from var(--dt-color-olive-600) l c h / var(--bgo, alpha)) !important; |
d-bgc-olive-700
Deprecated
| background-color: oklch(from var(--dt-color-olive-700) l c h / var(--bgo, alpha)) !important; |
d-bgc-olive-800
Deprecated
| background-color: oklch(from var(--dt-color-olive-800) l c h / var(--bgo, alpha)) !important; |
d-bgc-olive-900
Deprecated
| background-color: oklch(from var(--dt-color-olive-900) l c h / var(--bgo, alpha)) !important; |
d-bgc-olive-950
Deprecated
| background-color: oklch(from var(--dt-color-olive-950) l c h / var(--bgo, alpha)) !important; |
d-bgc-olive-1000
Deprecated
| background-color: oklch(from var(--dt-color-olive-1000) l c h / var(--bgo, alpha)) !important; |
d-bgc-purple-50
Deprecated
| background-color: oklch(from var(--dt-color-purple-50) l c h / var(--bgo, alpha)) !important; |
d-bgc-purple-100
Deprecated
| background-color: oklch(from var(--dt-color-purple-100) l c h / var(--bgo, alpha)) !important; |
d-bgc-purple-200
Deprecated
| background-color: oklch(from var(--dt-color-purple-200) l c h / var(--bgo, alpha)) !important; |
d-bgc-purple-300
Deprecated
| background-color: oklch(from var(--dt-color-purple-300) l c h / var(--bgo, alpha)) !important; |
d-bgc-purple-400
Deprecated
| background-color: oklch(from var(--dt-color-purple-400) l c h / var(--bgo, alpha)) !important; |
d-bgc-purple-500
Deprecated
| background-color: oklch(from var(--dt-color-purple-500) l c h / var(--bgo, alpha)) !important; |
d-bgc-purple-600
Deprecated
| background-color: oklch(from var(--dt-color-purple-600) l c h / var(--bgo, alpha)) !important; |
d-bgc-purple-700
Deprecated
| background-color: oklch(from var(--dt-color-purple-700) l c h / var(--bgo, alpha)) !important; |
d-bgc-purple-800
Deprecated
| background-color: oklch(from var(--dt-color-purple-800) l c h / var(--bgo, alpha)) !important; |
d-bgc-purple-900
Deprecated
| background-color: oklch(from var(--dt-color-purple-900) l c h / var(--bgo, alpha)) !important; |
d-bgc-purple-950
Deprecated
| background-color: oklch(from var(--dt-color-purple-950) l c h / var(--bgo, alpha)) !important; |
d-bgc-purple-1000
Deprecated
| background-color: oklch(from var(--dt-color-purple-1000) l c h / var(--bgo, alpha)) !important; |
d-bgc-red-50
Deprecated
| background-color: oklch(from var(--dt-color-red-50) l c h / var(--bgo, alpha)) !important; |
d-bgc-red-100
Deprecated
| background-color: oklch(from var(--dt-color-red-100) l c h / var(--bgo, alpha)) !important; |
d-bgc-red-200
Deprecated
| background-color: oklch(from var(--dt-color-red-200) l c h / var(--bgo, alpha)) !important; |
d-bgc-red-300
Deprecated
| background-color: oklch(from var(--dt-color-red-300) l c h / var(--bgo, alpha)) !important; |
d-bgc-red-400
Deprecated
| background-color: oklch(from var(--dt-color-red-400) l c h / var(--bgo, alpha)) !important; |
d-bgc-red-500
Deprecated
| background-color: oklch(from var(--dt-color-red-500) l c h / var(--bgo, alpha)) !important; |
d-bgc-red-600
Deprecated
| background-color: oklch(from var(--dt-color-red-600) l c h / var(--bgo, alpha)) !important; |
d-bgc-red-700
Deprecated
| background-color: oklch(from var(--dt-color-red-700) l c h / var(--bgo, alpha)) !important; |
d-bgc-red-800
Deprecated
| background-color: oklch(from var(--dt-color-red-800) l c h / var(--bgo, alpha)) !important; |
d-bgc-red-900
Deprecated
| background-color: oklch(from var(--dt-color-red-900) l c h / var(--bgo, alpha)) !important; |
d-bgc-red-950
Deprecated
| background-color: oklch(from var(--dt-color-red-950) l c h / var(--bgo, alpha)) !important; |
d-bgc-red-1000
Deprecated
| background-color: oklch(from var(--dt-color-red-1000) l c h / var(--bgo, alpha)) !important; |
d-bgc-tan-50
Deprecated
| background-color: oklch(from var(--dt-color-tan-50) l c h / var(--bgo, alpha)) !important; |
d-bgc-tan-100
Deprecated
| background-color: oklch(from var(--dt-color-tan-100) l c h / var(--bgo, alpha)) !important; |
d-bgc-tan-200
Deprecated
| background-color: oklch(from var(--dt-color-tan-200) l c h / var(--bgo, alpha)) !important; |
d-bgc-tan-300
Deprecated
| background-color: oklch(from var(--dt-color-tan-300) l c h / var(--bgo, alpha)) !important; |
d-bgc-tan-400
Deprecated
| background-color: oklch(from var(--dt-color-tan-400) l c h / var(--bgo, alpha)) !important; |
d-bgc-tan-500
Deprecated
| background-color: oklch(from var(--dt-color-tan-500) l c h / var(--bgo, alpha)) !important; |
d-bgc-tan-600
Deprecated
| background-color: oklch(from var(--dt-color-tan-600) l c h / var(--bgo, alpha)) !important; |
d-bgc-tan-700
Deprecated
| background-color: oklch(from var(--dt-color-tan-700) l c h / var(--bgo, alpha)) !important; |
d-bgc-tan-800
Deprecated
| background-color: oklch(from var(--dt-color-tan-800) l c h / var(--bgo, alpha)) !important; |
d-bgc-tan-900
Deprecated
| background-color: oklch(from var(--dt-color-tan-900) l c h / var(--bgo, alpha)) !important; |
d-bgc-tan-950
Deprecated
| background-color: oklch(from var(--dt-color-tan-950) l c h / var(--bgo, alpha)) !important; |
d-bgc-tan-1000
Deprecated
| background-color: oklch(from var(--dt-color-tan-1000) l c h / var(--bgo, alpha)) !important; |
d-bgc-teal-50
Deprecated
| background-color: oklch(from var(--dt-color-teal-50) l c h / var(--bgo, alpha)) !important; |
d-bgc-teal-100
Deprecated
| background-color: oklch(from var(--dt-color-teal-100) l c h / var(--bgo, alpha)) !important; |
d-bgc-teal-200
Deprecated
| background-color: oklch(from var(--dt-color-teal-200) l c h / var(--bgo, alpha)) !important; |
d-bgc-teal-300
Deprecated
| background-color: oklch(from var(--dt-color-teal-300) l c h / var(--bgo, alpha)) !important; |
d-bgc-teal-400
Deprecated
| background-color: oklch(from var(--dt-color-teal-400) l c h / var(--bgo, alpha)) !important; |
d-bgc-teal-500
Deprecated
| background-color: oklch(from var(--dt-color-teal-500) l c h / var(--bgo, alpha)) !important; |
d-bgc-teal-600
Deprecated
| background-color: oklch(from var(--dt-color-teal-600) l c h / var(--bgo, alpha)) !important; |
d-bgc-teal-700
Deprecated
| background-color: oklch(from var(--dt-color-teal-700) l c h / var(--bgo, alpha)) !important; |
d-bgc-teal-800
Deprecated
| background-color: oklch(from var(--dt-color-teal-800) l c h / var(--bgo, alpha)) !important; |
d-bgc-teal-900
Deprecated
| background-color: oklch(from var(--dt-color-teal-900) l c h / var(--bgo, alpha)) !important; |
d-bgc-teal-950
Deprecated
| background-color: oklch(from var(--dt-color-teal-950) l c h / var(--bgo, alpha)) !important; |
d-bgc-teal-1000
Deprecated
| background-color: oklch(from var(--dt-color-teal-1000) l c h / var(--bgo, alpha)) !important; |