@databricks/design-system 2.0.1 → 2.0.3

package/dist/index-dark.css

@@ -10911,316 +10911,6 @@ textarea.du-bois-dark-input {
 /* stylelint-disable */
 /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
 
-/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
-/* stylelint-disable no-duplicate-selectors */
-/* stylelint-disable */
-/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
-.du-bois-dark-modal {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  color: #E8ECF0;
-  font-size: 13px;
-  font-variant: tabular-nums;
-  line-height: 20px;
-  list-style: none;
-  font-feature-settings: tnum;
-  pointer-events: none;
-  position: relative;
-  top: 100px;
-  width: auto;
-  max-width: calc(100vw - 32px);
-  margin: 0 auto;
-  padding-bottom: 24px;
-}
-.du-bois-dark-modal.du-bois-dark-zoom-enter,
-.du-bois-dark-modal.du-bois-darkzoom-appear {
-  transform: none;
-  opacity: 0;
-  animation-duration: 0.3s;
-  user-select: none;
-}
-.du-bois-dark-modal-mask {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1000;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.45);
-}
-.du-bois-dark-modal-mask-hidden {
-  display: none;
-}
-.du-bois-dark-modal-wrap {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: auto;
-  outline: 0;
-  -webkit-overflow-scrolling: touch;
-}
-.du-bois-dark-modal-wrap {
-  z-index: 1000;
-}
-.du-bois-dark-modal-title {
-  margin: 0;
-  color: rgba(255, 255, 255, 0.85);
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 22px;
-  word-wrap: break-word;
-}
-.du-bois-dark-modal-content {
-  position: relative;
-  background-color: #1f1f1f;
-  background-clip: padding-box;
-  border: 0;
-  border-radius: 4px;
-  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.2);
-  pointer-events: auto;
-}
-.du-bois-dark-modal-close {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 10;
-  padding: 0;
-  color: #92A4B3;
-  font-weight: 700;
-  line-height: 1;
-  text-decoration: none;
-  background: transparent;
-  border: 0;
-  outline: 0;
-  cursor: pointer;
-  transition: color 0.3s;
-}
-.du-bois-dark-modal-close-x {
-  display: block;
-  width: 102px;
-  height: 102px;
-  font-size: 18px;
-  font-style: normal;
-  line-height: 102px;
-  text-align: center;
-  text-transform: none;
-  text-rendering: auto;
-}
-.du-bois-dark-modal-close:focus,
-.du-bois-dark-modal-close:hover {
-  color: rgba(255, 255, 255, 0.75);
-  text-decoration: none;
-}
-.du-bois-dark-modal-header {
-  padding: 40px 40px 20px;
-  color: #E8ECF0;
-  background: #1f1f1f;
-  border-bottom: 0px solid #303030;
-  border-radius: 4px 4px 0 0;
-}
-.du-bois-dark-modal-body {
-  padding: 0 40px;
-  font-size: 13px;
-  line-height: 20px;
-  word-wrap: break-word;
-}
-.du-bois-dark-modal-footer {
-  padding: 0px 0px;
-  text-align: right;
-  background: transparent;
-  border-top: 0px solid #303030;
-  border-radius: 0 0 4px 4px;
-}
-.du-bois-dark-modal-footer .du-bois-dark-btn + .du-bois-dark-btn:not(.du-bois-dark-dropdown-trigger) {
-  margin-bottom: 0;
-  margin-left: 8px;
-}
-.du-bois-dark-modal-open {
-  overflow: hidden;
-}
-.du-bois-dark-modal-centered {
-  text-align: center;
-}
-.du-bois-dark-modal-centered::before {
-  display: inline-block;
-  width: 0;
-  height: 100%;
-  vertical-align: middle;
-  content: '';
-}
-.du-bois-dark-modal-centered .du-bois-dark-modal {
-  top: 0;
-  display: inline-block;
-  text-align: left;
-  vertical-align: middle;
-}
-@media (max-width: 767px) {
-  .du-bois-dark-modal {
-    max-width: calc(100vw - 16px);
-    margin: 8px auto;
-  }
-  .du-bois-dark-modal-centered .du-bois-dark-modal {
-    flex: 1;
-  }
-}
-.du-bois-dark-modal-confirm .du-bois-dark-modal-header {
-  display: none;
-}
-.du-bois-dark-modal-confirm .du-bois-dark-modal-body {
-  padding: 32px 32px 24px;
-}
-.du-bois-dark-modal-confirm-body-wrapper::before {
-  display: table;
-  content: '';
-}
-.du-bois-dark-modal-confirm-body-wrapper::after {
-  display: table;
-  clear: both;
-  content: '';
-}
-.du-bois-dark-modal-confirm-body .du-bois-dark-modal-confirm-title {
-  display: block;
-  overflow: hidden;
-  color: rgba(255, 255, 255, 0.85);
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 1.4;
-}
-.du-bois-dark-modal-confirm-body .du-bois-dark-modal-confirm-content {
-  margin-top: 8px;
-  color: #E8ECF0;
-  font-size: 13px;
-}
-.du-bois-dark-modal-confirm-body > .anticon {
-  float: left;
-  margin-right: 16px;
-  font-size: 22px;
-}
-.du-bois-dark-modal-confirm-body > .anticon + .du-bois-dark-modal-confirm-title + .du-bois-dark-modal-confirm-content {
-  margin-left: 38px;
-}
-.du-bois-dark-modal-confirm .du-bois-dark-modal-confirm-btns {
-  float: right;
-  margin-top: 24px;
-}
-.du-bois-dark-modal-confirm .du-bois-dark-modal-confirm-btns .du-bois-dark-btn + .du-bois-dark-btn {
-  margin-bottom: 0;
-  margin-left: 8px;
-}
-.du-bois-dark-modal-confirm-error .du-bois-dark-modal-confirm-body > .anticon {
-  color: #E65B77;
-}
-.du-bois-dark-modal-confirm-warning .du-bois-dark-modal-confirm-body > .anticon,
-.du-bois-dark-modal-confirm-confirm .du-bois-dark-modal-confirm-body > .anticon {
-  color: #AF5B23;
-}
-.du-bois-dark-modal-confirm-info .du-bois-dark-modal-confirm-body > .anticon {
-  color: #64727D;
-}
-.du-bois-dark-modal-confirm-success .du-bois-dark-modal-confirm-body > .anticon {
-  color: #34824F;
-}
-.du-bois-dark-modal .du-bois-dark-picker-clear,
-.du-bois-dark-modal .du-bois-dark-slider-handle,
-.du-bois-dark-modal .du-bois-dark-anchor-wrapper,
-.du-bois-dark-modal .du-bois-dark-collapse-content,
-.du-bois-dark-modal .du-bois-dark-timeline-item-head,
-.du-bois-dark-modal .du-bois-dark-card {
-  background-color: #1f1f1f;
-}
-.du-bois-dark-modal .du-bois-dark-transfer-list-header {
-  background: #1f1f1f;
-  border-bottom: 1px solid #3a3a3a;
-}
-.du-bois-dark-modal .du-bois-dark-transfer-list-content-item:not(.du-bois-dark-transfer-list-content-item-disabled):hover {
-  background-color: rgba(255, 255, 255, 0.08);
-}
-.du-bois-dark-modal tr.du-bois-dark-table-expanded-row > td,
-.du-bois-dark-modal tr.du-bois-dark-table-expanded-row:hover > td {
-  background: #272727;
-}
-.du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-small thead > tr > th {
-  background-color: #1f1f1f;
-  border-bottom: 1px solid #3a3a3a;
-}
-.du-bois-dark-modal .du-bois-dark-table {
-  background-color: #1f1f1f;
-}
-.du-bois-dark-modal .du-bois-dark-table .du-bois-dark-table-row-expand-icon {
-  border: 1px solid #3a3a3a;
-}
-.du-bois-dark-modal .du-bois-dark-table tfoot > tr > th,
-.du-bois-dark-modal .du-bois-dark-table tfoot > tr > td {
-  border-bottom: 1px solid #3a3a3a;
-}
-.du-bois-dark-modal .du-bois-dark-table thead > tr > th {
-  background-color: #272727;
-  border-bottom: 1px solid #3a3a3a;
-}
-.du-bois-dark-modal .du-bois-dark-table tbody > tr > td {
-  border-bottom: 1px solid #3a3a3a;
-}
-.du-bois-dark-modal .du-bois-dark-table tbody > tr > td.du-bois-dark-table-cell-fix-left,
-.du-bois-dark-modal .du-bois-dark-table tbody > tr > td.du-bois-dark-table-cell-fix-right {
-  background-color: #1f1f1f;
-}
-.du-bois-dark-modal .du-bois-dark-table tbody > tr.du-bois-dark-table-row:hover > td {
-  background: #303030;
-}
-.du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-bordered .du-bois-dark-table-title {
-  border: 1px solid #3a3a3a;
-}
-.du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-bordered thead > tr > th,
-.du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-bordered tbody > tr > td,
-.du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-bordered tfoot > tr > th,
-.du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-bordered tfoot > tr > td {
-  border-right: 1px solid #3a3a3a;
-}
-.du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-bordered .du-bois-dark-table-cell-fix-right-first::after {
-  border-right: 1px solid #3a3a3a;
-}
-.du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-bordered table thead > tr:not(:last-child) > th {
-  border-bottom: 1px solid #303030;
-}
-.du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-bordered .du-bois-dark-table-container {
-  border: 1px solid #3a3a3a;
-}
-.du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-bordered .du-bois-dark-table-expanded-row-fixed::after {
-  border-right: 1px solid #3a3a3a;
-}
-.du-bois-dark-modal .du-bois-dark-table.du-bois-dark-table-bordered .du-bois-dark-table-footer {
-  border: 1px solid #3a3a3a;
-}
-.du-bois-dark-modal .du-bois-dark-table .du-bois-dark-table-filter-trigger-container-open {
-  background-color: #525252;
-}
-.du-bois-dark-modal .du-bois-dark-picker-calendar-full {
-  background-color: #1f1f1f;
-}
-.du-bois-dark-modal .du-bois-dark-picker-calendar-full .du-bois-dark-picker-panel {
-  background-color: #1f1f1f;
-}
-.du-bois-dark-modal .du-bois-dark-picker-calendar-full .du-bois-dark-picker-panel .du-bois-dark-picker-calendar-date {
-  border-top: 2px solid #3a3a3a;
-}
-.du-bois-dark-modal .du-bois-dark-tabs.du-bois-dark-tabs-card .du-bois-dark-tabs-card-bar .du-bois-dark-tabs-tab-active {
-  background-color: #1f1f1f;
-  border-bottom: 1px solid #1f1f1f;
-}
-.du-bois-dark-modal .du-bois-dark-badge-count {
-  box-shadow: 0 0 0 1px #1f1f1f;
-}
-.du-bois-dark-modal .du-bois-dark-tree-show-line .du-bois-dark-tree-switcher {
-  background: #1f1f1f;
-}
-/* stylelint-disable no-duplicate-selectors */
-/* stylelint-disable */
-/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
-
 /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
 /* stylelint-disable no-duplicate-selectors */
 /* stylelint-disable */
@@ -16556,125 +16246,254 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-color-text-validation-success: #3ba65e;
   --db-color-text-validation-warning: #de7921;
   --db-color-tooltip-background-tooltip: #e8ecf0;
+  --db-color-tooltip-text-tooltip: #11171c;
 }
 
-/* Layout primitive classes — internal Du Bois use for now (not a published
- * consumer API yet; see the Stefan/Sheng weekly decision to "give it a try
- * just within the Du Bois components"). Two primitives, both plain CSS so they
- * ride the mortar cascade like the other component styles:
- *
- *   .ds-stack    — vertical flow, even gap between direct children.
- *   .ds-cluster  — horizontal group that wraps, even gap between children.
- *
- * Each primitive exposes a small set of `--ds-*` knobs, defaulted on the class
- * itself (not via a `var()` fallback, which would freeze the default at every
- * call site). Override any of them on the element — inline
- * `style={{ '--ds-stack-gap': ... }}` or a more specific selector — without a
- * new modifier class:
- *
- *   stack:   --ds-stack-gap (spacing), --ds-stack-align (align-items)
- *   cluster: --ds-cluster-gap (spacing), --ds-cluster-align (align-items),
- *            --ds-cluster-justify (justify-content)
- *
- * Gap defaults point at the system spacing scale (`--db-space-*`). Padding is
- * intentionally NOT a knob — a layout primitive owns the space between children,
- * not its own box padding. */
+/*
+  Vertical "stack" of elements.
+  Use this for any layout where items are laid out vertically.
 
-/* Cluster wraps by design: a long row reflows onto multiple lines rather than
- * overflowing. A row that must NOT wrap (e.g. a single-line control strip) is
- * not a cluster — keep it bespoke. */
+  \3c !-- Basic: default gap between each child -->
+  <div class="ds-stack">
+    <h2>Title</h2>
+    <p>Body</p>
+    <button>Action</button>
+  </div>
 
-/* Category-tier tokens shared by selection-control components:
- * <Checkbox>, <Switch>, <Radio>. Each value here references a SYSTEM token
- * from system-tokens.css — never a raw hex/px literal — so the only place a
- * brand-level theme change has to land is the system tier.
- *
- * Component-tier files (e.g. design-system/Checkbox/tokens.css) inherit from
- * these via `var()` so consumers can override a single selection control by
- * targeting only its component tokens. */
+  \3c !-- Wider gap for this instance -->
+  <div class="ds-stack" style="--ds-stack-gap: var(--db-spacing-lg)">…</div>
 
-/* Re-declared under both theme classes as well as :root: these values are
- * `var()` indirections onto SYSTEM tokens, and a custom property resolves its
- * var() at its DECLARATION site. Declared only at :root, they would freeze at
- * the root (light) system values and never re-read the dark system tokens
- * inside a `.du-bois-dark` subtree. Re-declaring at every theme boundary makes
- * the indirection re-resolve per theme. See DUBOIS-448 dark-mode scoping. */
-:where(:root, .du-bois-light, .du-bois-dark) {
-  --db-selection-toggle-bg-default: var(--db-color-background-primary);
-  --db-selection-toggle-bg-hover: var(--db-color-action-default-background-hover);
-  --db-selection-toggle-bg-press: var(--db-color-action-default-background-press);
-  --db-selection-toggle-bg-checked: var(--db-color-action-primary-background-default);
-  --db-selection-toggle-bg-checked-hover: var(--db-color-action-primary-background-hover);
-  --db-selection-toggle-bg-checked-press: var(--db-color-action-primary-background-press);
-  --db-selection-toggle-bg-disabled: var(--db-color-action-disabled-background);
+  \3c !-- Don't stretch children to full width (e.g. left-aligned buttons) -->
+  <div class="ds-stack" style="--ds-stack-align: flex-start">…</div>
+ */
 
-  --db-selection-toggle-border-default: var(--db-color-action-default-border-default);
-  --db-selection-toggle-border-hover: var(--db-color-action-primary-background-hover);
-  --db-selection-toggle-border-press: var(--db-color-action-primary-background-press);
-  --db-selection-toggle-border-focus: var(--db-color-action-default-border-focus);
-  --db-selection-toggle-border-disabled: var(--db-color-action-disabled-border);
+/**
+  Responsive, horizontal "cluster" of elements.
+  Use this for any layout where items are laid out horizontally and should wrap on smaller viewport sizes.
 
-  /* Raw literal, not a system token (exception to the file rule above): the mark
-   * sits on the theme-invariant blue checked fill, so it must stay white in BOTH
-   * themes. No non-flipping white system token exists — action-primary-icon flips
-   * to near-black under .du-bois-dark, which made the mark nearly invisible. */
-  --db-selection-toggle-icon-color: #ffffff;
-  --db-selection-toggle-icon-color-disabled: var(--db-color-action-disabled-text);
-  --db-selection-toggle-text: var(--db-color-text-primary);
-  --db-selection-toggle-text-disabled: var(--db-color-action-disabled-text);
+    \3c !-- Basic: items wrap as needed -->
+    <div class="ds-cluster">
+      <span>one</span>
+      <span>two</span>
+      <span>three</span>
+    </div>
 
-  --db-selection-toggle-size: 16px;
-  --db-selection-toggle-border-radius: var(--db-radius-sm);
-  --db-selection-toggle-spacing: var(--db-space-sm);
+    \3c !-- Push children apart (e.g. title left, actions right) -->
+    <div class="ds-cluster" style="--ds-cluster-justify: space-between">…</div>
+
+    \3c !-- Looser gap for this instance -->
+    <div class="ds-cluster" style="--ds-cluster-gap: var(--db-spacing-sm)">…</div>
+ */
+
+
+
+:where(.du-bois-dark) {
+  /* Neutral */
+  --db-neutral-surface: var(--db-color-background-primary);
+  --db-subtle-neutral-surface: var(--db-color-background-secondary);
+  --db-strong-neutral-surface: initial; /* TODO */
+
+  --db-text-on-neutral-surface: var(--db-color-text-primary);
+  --db-subtle-text-on-neutral-surface: var(--db-color-text-secondary);
+  --db-strong-text-on-neutral-surface: initial; /* TODO */
+
+  --db-neutral-border: var(--db-color-border);
+  --db-subtle-neutral-border: initial; /* TODO */
+  --db-strong-neutral-border: var(--db-color-border-accessible);
+
+  --db-neutral-surface-active: var(--db-color-table-background-selected-default);
+  --db-neutral-surface-hover: var(--db-color-table-background-unselected-hover);
+  --db-neutral-surface-pressed: var(--db-color-table-background-selected-hover);
+  --db-neutral-surface-disabled: var(--db-color-action-disabled-background);
+  --db-text-on-neutral-surface-disabled: var(--db-color-action-disabled-text);
+
+  /* Primary */
+  --db-primary-surface: var(--db-color-action-primary-background-default);
+  --db-subtle-primary-surface: var(--db-color-action-default-background-hover);
+  --db-strong-primary-surface: var(--db-color-action-primary-background-hover);
+
+  --db-text-on-primary-surface: var(--db-color-action-primary-text-default);
+  --db-primary-text-on-neutral-surface: var(--db-color-action-link-default);
+  --db-subtle-text-on-primary-surface: initial; /* TODO */
+  --db-strong-text-on-primary-surface: var(--db-color-action-primary-text-default);
+
+  --db-primary-border: var(--db-color-action-primary-background-default);
+  --db-subtle-primary-border: initial; /* TODO */
+  --db-strong-primary-border: var(--db-color-action-primary-background-press);
+
+  --db-primary-surface-active: initial; /* TODO */
+  --db-primary-surface-hover: var(--db-color-action-primary-background-hover);
+  --db-primary-surface-pressed: var(--db-color-action-primary-background-press);
+  --db-primary-surface-disabled: var(--db-color-action-disabled-background);
+  --db-text-on-primary-surface-disabled: var(--db-color-action-disabled-text);
+
+  /* Error */
+  --db-error-surface: var(--db-color-action-danger-primary-background-default);
+  --db-subtle-error-surface: var(--db-color-background-danger);
+  --db-strong-error-surface: var(--db-color-action-danger-primary-background-hover);
+
+  --db-text-on-error-surface: var(--db-color-action-danger-primary-text);
+  --db-error-text-on-neutral-surface: var(--db-color-text-validation-danger);
+  --db-subtle-text-on-error-surface: initial; /* TODO */
+  --db-strong-text-on-error-surface: var(--db-color-action-danger-primary-text);
+
+  --db-error-border: var(--db-color-action-danger-default-border-default);
+  --db-subtle-error-border: var(--db-color-border-danger);
+  --db-strong-error-border: var(--db-color-action-danger-primary-background-press);
+
+  --db-error-surface-active: initial; /* TODO */
+  --db-error-surface-hover: var(--db-color-action-danger-primary-background-hover);
+  --db-error-surface-pressed: var(--db-color-action-danger-primary-background-press);
+  --db-error-surface-disabled: var(--db-color-action-disabled-background);
+  --db-text-on-error-surface-disabled: var(--db-color-action-disabled-text);
+
+  /* Warning */
+  --db-warning-surface: initial; /* TODO */
+  --db-subtle-warning-surface: var(--db-color-background-warning);
+
+  --db-text-on-warning-surface: initial; /* TODO */
+  --db-warning-text-on-neutral-surface: var(--db-color-text-validation-warning);
+
+  --db-warning-border: var(--db-color-border-warning);
+
+  /* Success */
+  --db-success-surface: initial; /* TODO */
+  --db-subtle-success-surface: var(--db-color-background-success);
+
+  --db-text-on-success-surface: initial; /* TODO */
+  --db-success-text-on-neutral-surface: var(--db-color-text-validation-success);
+
+  --db-success-border: initial; /* TODO */
+}
+
+:where(.du-bois-dark) {
+  --db-layout-unit: 0.25rem; /* 4px */
+  --db-density-scalar: 1;
+  --db-size-scalar: 1;
+  --db-spacing-scalar: 1;
+
+  /* Size and spacing are the same steps, but with their own scalars included in the calc. */
+
+  --db-size-3xs: calc(var(--db-layout-unit) * 1 * var(--db-density-scalar) * var(--db-size-scalar)); /* 4px */
+  --db-size-2xs: calc(var(--db-layout-unit) * 2 * var(--db-density-scalar) * var(--db-size-scalar)); /* 8px */
+  --db-size-xs: calc(var(--db-layout-unit) * 4 * var(--db-density-scalar) * var(--db-size-scalar)); /* 16px */
+  --db-size-sm: calc(var(--db-layout-unit) * 6 * var(--db-density-scalar) * var(--db-size-scalar)); /* 24px */
+  --db-size-md: calc(var(--db-layout-unit) * 8 * var(--db-density-scalar) * var(--db-size-scalar)); /* 32px */
+  --db-size-lg: calc(var(--db-layout-unit) * 10 * var(--db-density-scalar) * var(--db-size-scalar)); /* 40px */
+
+  --db-spacing-3xs: calc(var(--db-layout-unit) * 1 * var(--db-density-scalar) * var(--db-spacing-scalar)); /* 4px */
+  --db-spacing-2xs: calc(var(--db-layout-unit) * 2 * var(--db-density-scalar) * var(--db-spacing-scalar)); /* 8px */
+  --db-spacing-xs: calc(var(--db-layout-unit) * 4 * var(--db-density-scalar) * var(--db-spacing-scalar)); /* 16px */
+  --db-spacing-sm: calc(var(--db-layout-unit) * 6 * var(--db-density-scalar) * var(--db-spacing-scalar)); /* 24px */
+  --db-spacing-md: calc(var(--db-layout-unit) * 8 * var(--db-density-scalar) * var(--db-spacing-scalar)); /* 32px */
+  --db-spacing-lg: calc(var(--db-layout-unit) * 10 * var(--db-density-scalar) * var(--db-spacing-scalar)); /* 40px */
+}
+
+:where(.du-bois-dark) {
+  --db-font-family:
+    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --db-mono-font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  --db-font-size-2xs: 0.6875rem; /* 11px */
+  --db-font-size-xs: 0.75rem; /* 12px */
+  --db-font-size-base: 0.8125rem; /* 13px */
+  --db-font-size-md: 0.875rem; /* 14px */
+  --db-font-size-lg: 0.9375rem; /* 15px */
+  --db-font-size-xl: 1rem; /* 16px */
+  --db-font-size-2xl: 1.25rem; /* 20px */
+  --db-font-size-3xl: 1.5rem; /* 24px */
+  --db-font-size-4xl: 2rem; /* 32px */
+
+  /* Du Bois v1 ships 400 and 600 only */
+  --db-font-weight-normal: 400;
+  --db-font-weight-medium: initial; /*  TODO */
+  --db-font-weight-semibold: 600;
+  --db-font-weight-bold: initial; /*  TODO */
+}
+
+:where(.du-bois-dark) {
+  --db-elevation-inset: initial; /*  TODO */
+  --db-elevation-low: 0px 2px 3px -1px rgba(0, 0, 0, 0.05), 0px 1px 0px 0px rgba(0, 0, 0, 0.02);
+  --db-elevation-med: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
+  --db-elevation-high: 0px 8px 40px 0px rgba(0, 0, 0, 0.13);
+}
+
+:where(.du-bois-dark) {
+  --db-focus-ring-color: var(--db-color-action-default-border-focus);
+  --db-focus-ring-width: 2px;
+}
+
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-selection-toggle-border-radius: 4px;
+
+  /* Color */
+  --db-selection-toggle-surface: var(--db-neutral-surface);
+  --db-selection-toggle-mark: var(--db-text-on-primary-surface);
+  --db-selection-toggle-text: var(--db-text-on-neutral-surface);
+  --db-selection-toggle-border: var(--db-strong-neutral-border);
+
+  --db-selection-toggle-surface-hover: var(--db-neutral-surface-hover);
+  --db-selection-toggle-surface-press: var(--db-neutral-surface-pressed);
+  --db-selection-toggle-surface-checked: var(--db-primary-surface);
+  --db-selection-toggle-surface-checked-hover: var(--db-primary-surface-hover);
+  --db-selection-toggle-surface-checked-press: var(--db-primary-surface-pressed);
+  --db-selection-toggle-surface-disabled: var(--db-neutral-surface-disabled);
+  --db-selection-toggle-surface-checked-disabled: var(--db-neutral-surface-disabled);
+
+  --db-selection-toggle-border-hover: var(--db-primary-surface-hover);
+  --db-selection-toggle-border-press: var(--db-primary-surface-pressed);
+  --db-selection-toggle-border-disabled: var(--db-neutral-border);
+
+  --db-selection-toggle-mark-disabled: var(--db-text-on-neutral-surface-disabled);
+  --db-selection-toggle-text-disabled: var(--db-text-on-neutral-surface-disabled);
 
-  /* Focus ring matches AntD legacy variant; offset keeps it outside the toggle.
-   * Hard-coded for now — Figma export doesn't include shadow tokens. */
   --db-selection-toggle-shadow-checked: 0 0 0 1px var(--db-color-action-primary-background-default);
-  --db-selection-toggle-focus-ring-width: 2px;
-  --db-selection-toggle-focus-ring-offset: 2px;
+
+  /* Density */
+  --db-selection-toggle-size: var(--db-size-xs);
+  --db-selection-toggle-label-spacing: var(--db-spacing-2xs);
+
+  /* Motion */
   --db-selection-toggle-transition-duration: 120ms;
 }
 
-/* Component-tier tokens for <Checkbox>. Each value defaults to a CATEGORY
- * (selection-toggle) token via var(); consumers can override here to retheme
- * checkboxes without affecting switch / radio. */
-
-/* Re-declared under both theme classes (not just :root) so the var() chain onto
- * category/system tokens re-resolves inside a `.du-bois-dark` subtree instead of
- * freezing at the root (light) values. See DUBOIS-448 dark-mode scoping. */
-:where(:root, .du-bois-light, .du-bois-dark) {
-  --db-checkbox-size: var(--db-selection-toggle-size);
+:where(.du-bois-dark) {
+  /* Shape */
   --db-checkbox-border-radius: var(--db-selection-toggle-border-radius);
   --db-checkbox-border-width: 1px;
-  --db-checkbox-spacing: var(--db-selection-toggle-spacing);
 
-  --db-checkbox-bg-default: var(--db-selection-toggle-bg-default);
-  --db-checkbox-bg-hover: var(--db-selection-toggle-bg-hover);
-  --db-checkbox-bg-press: var(--db-selection-toggle-bg-press);
-  --db-checkbox-bg-checked: var(--db-selection-toggle-bg-checked);
-  --db-checkbox-bg-checked-hover: var(--db-selection-toggle-bg-checked-hover);
-  --db-checkbox-bg-checked-press: var(--db-selection-toggle-bg-checked-press);
-  --db-checkbox-bg-disabled: var(--db-selection-toggle-bg-disabled);
+  /* Color */
+  --db-checkbox-surface: var(--db-selection-toggle-surface);
+  --db-checkbox-surface-hover: var(--db-color-action-default-background-hover);
+  --db-checkbox-surface-press: var(--db-color-action-default-background-press);
+  --db-checkbox-surface-checked: var(--db-selection-toggle-surface-checked);
+  --db-checkbox-surface-checked-hover: var(--db-selection-toggle-surface-checked-hover);
+  --db-checkbox-surface-checked-press: var(--db-selection-toggle-surface-checked-press);
+  --db-checkbox-surface-disabled: var(--db-selection-toggle-surface-disabled);
 
-  --db-checkbox-border-default: var(--db-selection-toggle-border-default);
+  --db-checkbox-border: var(--db-color-action-default-border-default);
   --db-checkbox-border-hover: var(--db-selection-toggle-border-hover);
   --db-checkbox-border-press: var(--db-selection-toggle-border-press);
-  --db-checkbox-border-focus: var(--db-selection-toggle-border-focus);
-  --db-checkbox-border-disabled: var(--db-selection-toggle-border-disabled);
+  --db-checkbox-focus-ring: var(--db-focus-ring-color);
+  --db-checkbox-border-disabled: var(--db-color-action-disabled-border);
 
-  --db-checkbox-icon-color: var(--db-selection-toggle-icon-color);
-  --db-checkbox-icon-color-disabled: var(--db-selection-toggle-icon-color-disabled);
+  --db-checkbox-mark: #ffffff;
+  --db-checkbox-mark-disabled: var(--db-selection-toggle-mark-disabled);
   --db-checkbox-text: var(--db-selection-toggle-text);
   --db-checkbox-text-disabled: var(--db-selection-toggle-text-disabled);
 
   --db-checkbox-shadow-checked: var(--db-selection-toggle-shadow-checked);
-  --db-checkbox-focus-ring-width: var(--db-selection-toggle-focus-ring-width);
-  --db-checkbox-focus-ring-offset: var(--db-selection-toggle-focus-ring-offset);
-  --db-checkbox-transition-duration: var(--db-selection-toggle-transition-duration);
 
-  /* Indeterminate mark — sized to look like AntD's `<inner>` ::after dash. */
-  --db-checkbox-indeterminate-mark-width: 8px;
-  --db-checkbox-indeterminate-mark-height: 2px;
+  /* Density */
+  --db-checkbox-size: var(--db-selection-toggle-size);
+  --db-checkbox-label-spacing: var(--db-selection-toggle-label-spacing);
+  --db-checkbox-focus-ring-width: var(--db-focus-ring-width);
+  --db-checkbox-indeterminate-mark-width: var(--db-size-2xs); /* 8px */
+  --db-checkbox-indeterminate-mark-height: calc(var(--db-size-3xs) * 0.75); /* 3px */
+
+  /* Motion */
+  --db-checkbox-transition-duration: var(--db-selection-toggle-transition-duration);
 }
 
 /* Native-input <Checkbox> styles. Classic CSS only — no native nesting (the
@@ -16699,10 +16518,9 @@ span.du-bois-dark-typography-ellipsis-single-line {
  * field) inside the label children, and a descendant `input` selector would hide
  * / absolutely-position that field and mis-drive the `:has(…)` state rules. */
 
-/* Hover/press live on the root (label), not on the input: the input has
- * `pointer-events: none` (so a single click target stays on the label and
- * label/input association toggles the box), which means `input:hover` would
- * never match. Putting `:hover` on the root also makes the entire label area
+/* Hover/press live on the root (label), not on the input: the input is
+ * visually hidden (opacity:0), so an `input:hover` rule wouldn't be visible
+ * anyway. Putting `:hover` on the root also makes the entire label area
  * — not just the indicator square — drive the visual feedback. */
 
 /* Selected fill — checked and indeterminate share the same surface. */
@@ -16715,9 +16533,15 @@ span.du-bois-dark-typography-ellipsis-single-line {
  * `input:disabled` so the standalone-disabled and group-disabled paths both
  * land here without needing a separate root modifier class. */
 
-/* Visually-hidden native input, kept interactive and in the tab order so
- * `:has()` lookups above can read its state. Pointer events fall through to
- * the label, so clicking anywhere toggles the box. */
+/* Visually-hidden native input (opacity:0) overlaying the indicator square,
+ * kept interactive and in the tab order so `:has()` lookups above can read its
+ * state. It stays pointer-clickable — matching AntD's `.ant-checkbox-input` —
+ * so it is the top-most hit-test target over the box: `getByRole('checkbox').click()`
+ * (Playwright, and any coordinate click that lands on the box) resolves to the
+ * real control instead of the decorative indicator overlay. Making the input
+ * `pointer-events: none` (the prior native-only behavior) is what regressed
+ * interaction tests vs. the AntD variant. `cursor: inherit` tracks the label's
+ * pointer / disabled `not-allowed` cursor so the box keeps AntD's cursor too. */
 
 /* Indicator — square with the border/fill that responds to state above.
  * Vertical math: aligns the indicator to the cap-height of the first text
@@ -16761,73 +16585,42 @@ span.du-bois-dark-typography-ellipsis-single-line {
 
 /* Vertical: .ds-stack supplies flex-direction + gap; we only retarget the knob. */
 
-/* Component-tier tokens for <Radio>. Each value defaults to a CATEGORY
- * (selection-toggle) token via var(); consumers can override here to retheme
- * radios without affecting checkbox / switch.
- *
- * Radio differs from Checkbox in two ways: the indicator is a full circle
- * (border-radius) and the "mark" is a filled dot rather than a checkmark/dash. */
-
-/* Re-declared under both theme classes (not just :root) so the var() chain onto
- * category/system tokens re-resolves inside a `.du-bois-dark` subtree instead of
- * freezing at the root (light) values. See DUBOIS-448 dark-mode scoping. */
-:where(:root, .du-bois-light, .du-bois-dark) {
-  --db-radio-size: var(--db-selection-toggle-size);
-  /* Circle, not a rounded square — the one shape token that does NOT inherit
-   * the category (square) radius. */
+:where(.du-bois-dark) {
+  /* Shape */
   --db-radio-border-radius: var(--db-radius-full);
   --db-radio-border-width: 1px;
-  --db-radio-spacing: var(--db-selection-toggle-spacing);
 
-  --db-radio-bg-default: var(--db-selection-toggle-bg-default);
-  --db-radio-bg-hover: var(--db-selection-toggle-bg-hover);
-  --db-radio-bg-press: var(--db-selection-toggle-bg-press);
-  --db-radio-bg-checked: var(--db-selection-toggle-bg-checked);
-  --db-radio-bg-checked-hover: var(--db-selection-toggle-bg-checked-hover);
-  /* AntD checked active/press background is actionDefaultBackgroundPress (NOT the
-   * primary press), so this maps to the default press bg category token — see
-   * getRadioInputStyles checked active in AntDRadioInternal.tsx. */
-  --db-radio-bg-checked-press: var(--db-selection-toggle-bg-press);
-  --db-radio-bg-disabled: var(--db-selection-toggle-bg-disabled);
+  /* Color */
+  --db-radio-surface: var(--db-selection-toggle-surface);
+  --db-radio-surface-hover: var(--db-color-action-default-background-hover);
+  --db-radio-surface-press: var(--db-color-action-default-background-press);
+  --db-radio-surface-checked: var(--db-selection-toggle-surface-checked);
+  --db-radio-surface-checked-hover: var(--db-selection-toggle-surface-checked-hover);
+  --db-radio-surface-checked-press: var(--db-color-action-default-background-press);
+  --db-radio-surface-disabled: var(--db-selection-toggle-surface-disabled);
 
-  --db-radio-border-default: var(--db-selection-toggle-border-default);
+  --db-radio-border: var(--db-color-action-default-border-default);
   --db-radio-border-hover: var(--db-selection-toggle-border-hover);
   --db-radio-border-press: var(--db-selection-toggle-border-press);
-  --db-radio-border-focus: var(--db-selection-toggle-border-focus);
-  --db-radio-border-disabled: var(--db-selection-toggle-border-disabled);
-
-  /* Two-tone checked hover/press border ring (AntD getRadioInputStyles checked
-   * states): the border is a DARKER shade than the fill, not equal to it.
-   * - checked hover border = actionPrimaryBackgroundPress (== the press category
-   *   token, which is action-primary-background-press).
-   * - checked press border = actionDefaultBorderPress; no selection-toggle
-   *   category token equals this color, so reference the system token directly. */
+  --db-radio-border-focus: var(--db-focus-ring-color);
+  --db-radio-border-disabled: var(--db-color-action-disabled-border);
   --db-radio-border-checked-hover: var(--db-selection-toggle-border-press);
   --db-radio-border-checked-press: var(--db-color-action-default-border-press);
+  --db-radio-border-unchecked-focus: var(--db-color-action-primary-background-default);
+  --db-radio-outline-checked-focus: var(--db-color-action-primary-background-default);
 
-  /* Unchecked keyboard-focus border (AntD getRadioInputStyles unchecked focus):
-   * borderColor = actionPrimaryBackgroundDefault, with NO outline ring. No
-   * selection-toggle category token equals this color (the closest is a bg
-   * token), so reference the system token directly. */
-  --db-radio-border-focus-unchecked: var(--db-color-action-primary-background-default);
-  /* Checked focus-visible outline color (AntD: outline 1px solid
-   * actionPrimaryBackgroundDefault, outlineOffset 1). */
-  --db-radio-focus-outline-checked-color: var(--db-color-action-primary-background-default);
-
-  /* The dot. Shares the category icon-color token (white over the filled
-   * primary surface) so a retheme moves checkbox checkmark + radio dot together. */
-  --db-radio-dot-color: var(--db-selection-toggle-icon-color);
-  --db-radio-dot-color-disabled: var(--db-selection-toggle-icon-color-disabled);
+  --db-radio-mark: #ffffff;
+  --db-radio-mark-disabled: var(--db-selection-toggle-mark-disabled);
   --db-radio-text: var(--db-selection-toggle-text);
   --db-radio-text-disabled: var(--db-selection-toggle-text-disabled);
 
-  --db-radio-focus-ring-width: var(--db-selection-toggle-focus-ring-width);
-  --db-radio-focus-ring-offset: var(--db-selection-toggle-focus-ring-offset);
-  --db-radio-transition-duration: var(--db-selection-toggle-transition-duration);
+  /* Density */
+  --db-radio-size: var(--db-selection-toggle-size);
+  --db-radio-label-spacing: var(--db-selection-toggle-label-spacing);
+  --db-radio-mark-size: var(--db-size-3xs);
 
-  /* Diameter of the inner dot. Mirrors the AntD checked `::after` size, which uses
-   * `theme.spacing.xs` (4px) — see getRadioInputStyles in AntDRadioInternal.tsx. */
-  --db-radio-dot-size: var(--db-space-xs);
+  /* Motion */
+  --db-radio-transition-duration: var(--db-selection-toggle-transition-duration);
 }
 
 /* Native-input <Radio> styles. Classic CSS only — no native nesting (the
@@ -16854,9 +16647,9 @@ span.du-bois-dark-typography-ellipsis-single-line {
  * TODO(DUBOIS-452): the indicator/dot state styles below are identical to
  * NativeCheckbox.css — consolidate them into a shared `.ds-selection-toggle` class. */
 
-/* Hover/press live on the root (label), not on the input: the input has
- * `pointer-events: none`, so `input:hover` would never match, and the whole
- * label area should drive the feedback. */
+/* Hover/press live on the root (label), not on the input: the input is
+ * visually hidden (opacity:0), so an `input:hover` rule wouldn't be visible
+ * anyway, and the whole label area should drive the feedback. */
 
 /* Selected fill. */
 
@@ -16881,9 +16674,15 @@ span.du-bois-dark-typography-ellipsis-single-line {
 /* Disabled (covers checked and unchecked). Sourced from `input:disabled` so the
  * standalone-disabled and group-disabled paths both land here. */
 
-/* Visually-hidden native input, kept interactive and in the tab order so the
- * `:has()` lookups above can read its state. Pointer events fall through to the
- * label, so clicking anywhere toggles the radio. */
+/* Visually-hidden native input (opacity:0) overlaying the indicator circle,
+ * kept interactive and in the tab order so the `:has()` lookups above can read
+ * its state. It stays pointer-clickable — matching AntD's `.ant-radio-input` —
+ * so it is the top-most hit-test target over the circle: `getByRole('radio').click()`
+ * (Playwright, and any coordinate click that lands on the circle) resolves to the
+ * real control instead of the decorative indicator overlay. Making the input
+ * `pointer-events: none` (the prior native-only behavior) is what regressed
+ * interaction tests vs. the AntD variant. `cursor: inherit` tracks the label's
+ * pointer / disabled `not-allowed` cursor so the circle keeps AntD's cursor too. */
 
 /* Indicator — circle with the border/fill that responds to state above.
  * Vertical math aligns the indicator to the cap-height of the first text line
@@ -16954,68 +16753,58 @@ span.du-bois-dark-typography-ellipsis-single-line {
 /* AntD `&& + form-message { marginTop: sm }` (horizontal): a form-message following
  * the whole group is separated by sm. */
 
-/* Component-tier tokens for <Switch>. Colors default to the selection-toggle category tokens;
- * geometry is hand-authored (the pill track + sliding thumb are unique to Switch). */
-
-/* Re-declared under both theme classes (not just :root) so the var() chain onto
- * category/system tokens re-resolves inside a `.du-bois-dark` subtree instead of
- * freezing at the root (light) values. See DUBOIS-448 dark-mode scoping. */
-:where(:root, .du-bois-light, .du-bois-dark) {
-  --db-switch-track-width: 28px;
-  --db-switch-track-height: 16px;
-  /* Thumb fills the track height by design; expressed via track-height so the two can't drift. */
-  --db-switch-thumb-size: var(--db-switch-track-height);
-  /* Pill radius overrides the category (square) radius, mirroring Radio's circular override. */
+:where(.du-bois-dark) {
+  /* Shape */
   --db-switch-border-radius: var(--db-radius-full);
   --db-switch-border-width: 1px;
-  --db-switch-spacing: var(--db-selection-toggle-spacing);
 
-  --db-switch-bg-default: var(--db-selection-toggle-bg-default);
-  --db-switch-bg-hover: var(--db-selection-toggle-bg-hover);
-  --db-switch-bg-press: var(--db-selection-toggle-bg-press);
-  --db-switch-bg-checked: var(--db-selection-toggle-bg-checked);
-  --db-switch-bg-checked-hover: var(--db-selection-toggle-bg-checked-hover);
-  --db-switch-bg-checked-press: var(--db-selection-toggle-bg-checked-press);
-  --db-switch-bg-disabled: var(--db-selection-toggle-bg-disabled);
+  /* Color */
+  --db-switch-surface: var(--db-selection-toggle-surface);
+  --db-switch-surface-hover: var(--db-color-action-default-background-hover);
+  --db-switch-surface-press: var(--db-color-action-default-background-press);
+  --db-switch-surface-checked: var(--db-selection-toggle-surface-checked);
+  --db-switch-surface-checked-hover: var(--db-selection-toggle-surface-checked-hover);
+  --db-switch-surface-checked-press: var(--db-selection-toggle-surface-checked-press);
+  --db-switch-surface-disabled: var(--db-selection-toggle-surface-disabled);
+  --db-switch-surface-checked-disabled: var(--db-color-action-disabled-text);
 
-  --db-switch-border-default: var(--db-selection-toggle-border-default);
+  --db-switch-border: var(--db-color-action-default-border-default);
   --db-switch-border-hover: var(--db-selection-toggle-border-hover);
   --db-switch-border-press: var(--db-selection-toggle-border-press);
-  --db-switch-border-disabled: var(--db-selection-toggle-border-disabled);
-  /* AntD paints the checked track border equal to the checked fill, so these alias the checked bg. */
-  --db-switch-border-checked: var(--db-selection-toggle-bg-checked);
-  --db-switch-border-checked-hover: var(--db-selection-toggle-bg-checked-hover);
-  --db-switch-border-checked-press: var(--db-selection-toggle-bg-checked-press);
-  --db-switch-border-focus: var(--db-selection-toggle-bg-checked);
-  /* AntD fills the disabled+checked track with actionDisabledText; no category token matches, so
-   * reference the system token directly (same escape hatch Radio uses for its checked-press border). */
-  --db-switch-bg-checked-disabled: var(--db-color-action-disabled-text);
+  --db-switch-border-disabled: var(--db-color-action-disabled-border);
+  --db-switch-border-checked: var(--db-selection-toggle-surface-checked);
+  --db-switch-border-checked-hover: var(--db-selection-toggle-surface-checked-hover);
+  --db-switch-border-checked-press: var(--db-selection-toggle-surface-checked-press);
+  --db-switch-border-focus: var(--db-selection-toggle-surface-checked);
 
-  /* AntD paints the handle the off-track surface color in every state. */
-  --db-switch-thumb-color: var(--db-selection-toggle-bg-default);
+  --db-switch-thumb: var(--db-selection-toggle-surface);
 
-  /* A token (not inherit) so the label text flips in dark mode. */
-  --db-switch-text: var(--db-color-text-primary);
+  --db-switch-text: var(--db-selection-toggle-text);
   --db-switch-text-disabled: var(--db-selection-toggle-text-disabled);
 
-  /* AntD's focus ring is a 1px outline (the category default is 2px). */
-  --db-switch-focus-ring-width: 1px;
-  --db-switch-focus-ring-offset: 1px;
-  --db-switch-focus-ring-color: var(--db-selection-toggle-border-focus);
+  /* Density */
+  --db-switch-track-width: calc(var(--db-size-xs) * 1.75); /* 28px */
+  --db-switch-track-height: var(--db-size-xs); /* 16px */
+  --db-switch-thumb-size: var(--db-switch-track-height);
+  --db-switch-label-spacing: var(--db-selection-toggle-label-spacing);
+
+  /* Motion */
   --db-switch-transition-duration: var(--db-selection-toggle-transition-duration);
 }
 
-/* Hover/press live on the root (label), not the input: the input has `pointer-events: none`. */
+/* The track. `appearance: none` strips the native checkbox rendering so the input itself can be styled. */
 
-/* On focus, recolor the track border to the checked-fill color on top of the outline ring. Matching
- * AntD, the ring sits flush when off and gains a 1px offset when checked (see the checked rule below). */
+/* The thumb. A pseudo-element keeps the input the switch's only element, so nothing can overlay it
+ * and intercept clicks. Offset left by the border width to sit flush with the track's outer edge. */
 
-/* Disabled + on: more specific than the plain disabled rule, so it wins regardless of source order. */
+/* `<label for>` propagates `:hover` to the input, so scope hover/press to the control, not `input:hover`. */
 
-/* Hidden but still focusable/in tab order so `:has()` can read its state; pointer events fall through
- * to the label. */
+/* On focus, recolor the border to the checked-fill color on top of the outline ring. Matching AntD,
+ * the ring sits flush when off and gains a 1px offset when checked.
+ * TODO: width/offset are hardcoded 1px to preserve the AntD look; adopt the system 2px focus ring
+ * (var(--db-focus-ring-width)) in a separate change. */
 
-/* `border-color: inherit` picks up the track's per-state color, so it's only set on the track. */
+/* Disabled + on: more specific than the plain disabled rule, so it wins regardless of source order. */
 
 /* `:first-child` scopes this to the label-first layout; the plain layout renders the label last. */