@databricks/design-system 2.0.2 → 2.0.3

package/dist/index.css

@@ -15836,7 +15836,7 @@ span.du-bois-light-typography-ellipsis-single-line {
  * Source: design-system/src/theme/tokens/*.json
  * Regenerate via: yarn theme-regenerate */
 
-:where(:root, .du-bois-light) {
+:where(:root), :where(.du-bois-light) {
   --db-radius-0: 0px;
   --db-radius-full: 999px;
   --db-radius-lg: 12px;
@@ -15975,44 +15975,57 @@ span.du-bois-light-typography-ellipsis-single-line {
  * Source: design-system/src/theme/tokens/*.json
  * Regenerate via: yarn theme-regenerate */
 
-/* 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.
+
+  \3c !-- Basic: default gap between each child -->
+  <div class="ds-stack">
+    <h2>Title</h2>
+    <p>Body</p>
+    <button>Action</button>
+  </div>
 
+  \3c !-- Wider gap for this instance -->
+  <div class="ds-stack" style="--ds-stack-gap: var(--db-spacing-lg)">…</div>
+
+  \3c !-- Don't stretch children to full width (e.g. left-aligned buttons) -->
+  <div class="ds-stack" style="--ds-stack-align: flex-start">…</div>
+ */
 .ds-stack {
-  --ds-stack-gap: var(--db-space-md);
+  /* These variables act as the *parameters* for the stack instance. */
+  --ds-stack-gap: var(--db-spacing-xs);
   --ds-stack-align: stretch;
+
   display: flex;
   flex-direction: column;
   align-items: var(--ds-stack-align);
   gap: var(--ds-stack-gap);
 }
 
-/* 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. */
+/**
+  Responsive, horizontal "cluster" of elements.
+  Use this for any layout where items are laid out horizontally and should wrap on smaller viewport sizes.
+
+    \3c !-- Basic: items wrap as needed -->
+    <div class="ds-cluster">
+      <span>one</span>
+      <span>two</span>
+      <span>three</span>
+    </div>
+
+    \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>
+ */
 .ds-cluster {
-  --ds-cluster-gap: var(--db-space-sm);
+  /* These variables act as the *parameters* for the cluster instance. */
+  --ds-cluster-gap: var(--db-spacing-2xs);
   --ds-cluster-align: center;
   --ds-cluster-justify: flex-start;
+
   display: flex;
   flex-wrap: wrap;
   align-items: var(--ds-cluster-align);
@@ -16020,97 +16033,215 @@ span.du-bois-light-typography-ellipsis-single-line {
   gap: var(--ds-cluster-gap);
 }
 
-/* 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. */
+:where(:root), :where(.du-bois-light) {
+  /* 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(:root), :where(.du-bois-light) {
+  --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. */
 
-/* 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);
+  --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-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);
+  --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(:root), :where(.du-bois-light) {
+  --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(:root), :where(.du-bois-light) {
+  --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(:root), :where(.du-bois-light) {
+  --db-focus-ring-color: var(--db-color-action-default-border-focus);
+  --db-focus-ring-width: 2px;
+}
+
+:where(:root), :where(.du-bois-light) {
+  /* Shape */
+  --db-selection-toggle-border-radius: 4px;
 
-  /* 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);
+  /* 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-size: 16px;
-  --db-selection-toggle-border-radius: var(--db-radius-sm);
-  --db-selection-toggle-spacing: var(--db-space-sm);
+  --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(:root), :where(.du-bois-light) {
+  /* 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 — the horizontal dash shown in the mixed state. */
-  --db-checkbox-indeterminate-mark-width: 8px;
-  --db-checkbox-indeterminate-mark-height: 3px;
+  /* 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
@@ -16157,35 +16288,34 @@ span.du-bois-light-typography-ellipsis-single-line {
   width: fit-content;
 }
 
-/* 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. */
 .ds-checkbox:hover:has(.ds-checkbox-input:not(:disabled, :checked, :indeterminate)) .ds-checkbox-indicator {
-  background-color: var(--db-checkbox-bg-hover);
+  background-color: var(--db-checkbox-surface-hover);
   border-color: var(--db-checkbox-border-hover);
 }
 
 .ds-checkbox:active:has(.ds-checkbox-input:not(:disabled, :checked, :indeterminate)) .ds-checkbox-indicator {
-  background-color: var(--db-checkbox-bg-press);
+  background-color: var(--db-checkbox-surface-press);
   border-color: var(--db-checkbox-border-press);
 }
 
 /* Selected fill — checked and indeterminate share the same surface. */
 .ds-checkbox:has(.ds-checkbox-input:is(:checked, :indeterminate)) .ds-checkbox-indicator {
-  background-color: var(--db-checkbox-bg-checked);
-  border-color: var(--db-checkbox-bg-checked);
+  background-color: var(--db-checkbox-surface-checked);
+  border-color: var(--db-checkbox-surface-checked);
 }
 
 .ds-checkbox:hover:has(.ds-checkbox-input:is(:checked, :indeterminate):not(:disabled)) .ds-checkbox-indicator {
-  background-color: var(--db-checkbox-bg-checked-hover);
-  border-color: var(--db-checkbox-bg-checked-hover);
+  background-color: var(--db-checkbox-surface-checked-hover);
+  border-color: var(--db-checkbox-surface-checked-hover);
 }
 
 .ds-checkbox:active:has(.ds-checkbox-input:is(:checked, :indeterminate):not(:disabled)) .ds-checkbox-indicator {
-  background-color: var(--db-checkbox-bg-checked-press);
-  border-color: var(--db-checkbox-bg-checked-press);
+  background-color: var(--db-checkbox-surface-checked-press);
+  border-color: var(--db-checkbox-surface-checked-press);
 }
 
 /* Mark visibility. */
@@ -16199,8 +16329,8 @@ span.du-bois-light-typography-ellipsis-single-line {
 
 /* Focus-visible (keyboard only). */
 .ds-checkbox:has(.ds-checkbox-input:focus-visible) .ds-checkbox-indicator {
-  outline: var(--db-checkbox-focus-ring-width) solid var(--db-checkbox-border-focus);
-  outline-offset: var(--db-checkbox-focus-ring-offset);
+  outline: var(--db-checkbox-focus-ring-width) solid var(--db-checkbox-focus-ring);
+  outline-offset: 4px;
 }
 
 /* Disabled (covers unchecked, checked, indeterminate). Sourced from
@@ -16215,22 +16345,28 @@ span.du-bois-light-typography-ellipsis-single-line {
 }
 
 .ds-checkbox:has(.ds-checkbox-input:disabled) .ds-checkbox-indicator {
-  background-color: var(--db-checkbox-bg-disabled);
+  background-color: var(--db-checkbox-surface-disabled);
   border-color: var(--db-checkbox-border-disabled);
   box-shadow: none;
 }
 
 .ds-checkbox:has(.ds-checkbox-input:disabled) .ds-checkbox-checkmark {
-  color: var(--db-checkbox-icon-color-disabled);
+  color: var(--db-checkbox-mark-disabled);
 }
 
 .ds-checkbox:has(.ds-checkbox-input:disabled) .ds-checkbox-dash {
-  background-color: var(--db-checkbox-icon-color-disabled);
+  background-color: var(--db-checkbox-mark-disabled);
 }
 
-/* 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. */
 .ds-checkbox .ds-checkbox-input {
   position: absolute;
   inset: 0;
@@ -16238,7 +16374,7 @@ span.du-bois-light-typography-ellipsis-single-line {
   block-size: var(--db-checkbox-size);
   margin: 0;
   opacity: 0;
-  pointer-events: none;
+  cursor: inherit;
 }
 
 /* Indicator — square with the border/fill that responds to state above.
@@ -16249,12 +16385,18 @@ span.du-bois-light-typography-ellipsis-single-line {
   display: grid;
   place-items: center;
   flex-shrink: 0;
+  /* Decorative only — the overlaid input owns hit-testing. Without this, the
+   * indicator (and its inherited checkmark/dash children) intercept
+   * `getByRole('checkbox').click()`; clicks on any edge sliver the input does
+   * not cover fall through to the label, which toggles via label/input
+   * association. */
+  pointer-events: none;
   inline-size: var(--db-checkbox-size);
   block-size: var(--db-checkbox-size);
   margin-top: calc((var(--db-line-height-base, 20px) - var(--db-checkbox-size)) / 2);
-  border: var(--db-checkbox-border-width) solid var(--db-checkbox-border-default);
+  border: var(--db-checkbox-border-width) solid var(--db-checkbox-border);
   border-radius: var(--db-checkbox-border-radius);
-  background-color: var(--db-checkbox-bg-default);
+  background-color: var(--db-checkbox-surface);
   box-sizing: border-box;
   transition:
     background-color var(--db-checkbox-transition-duration) ease,
@@ -16266,7 +16408,7 @@ span.du-bois-light-typography-ellipsis-single-line {
   grid-area: 1 / 1;
   inline-size: 100%;
   block-size: 100%;
-  color: var(--db-checkbox-icon-color);
+  color: var(--db-checkbox-mark);
   opacity: 0;
   transition: opacity var(--db-checkbox-transition-duration) ease;
 }
@@ -16286,7 +16428,7 @@ span.du-bois-light-typography-ellipsis-single-line {
   /* CSS clamps this to half the 3px height, giving fully rounded end caps so the
    * dash reads as a pill rather than a flat bar. */
   border-radius: 4px;
-  background-color: var(--db-checkbox-icon-color);
+  background-color: var(--db-checkbox-mark);
   opacity: 0;
   transition: opacity var(--db-checkbox-transition-duration) ease;
 }
@@ -16298,7 +16440,7 @@ span.du-bois-light-typography-ellipsis-single-line {
  * as the AntD variant. */
 .ds-checkbox .ds-checkbox-label {
   color: var(--db-checkbox-text);
-  padding-inline: var(--db-checkbox-spacing);
+  padding-inline: var(--db-checkbox-label-spacing);
   word-break: break-word;
 }
 
@@ -16323,7 +16465,7 @@ span.du-bois-light-typography-ellipsis-single-line {
 .ds-checkbox.ds-checkbox + .du-bois-dark-form-message,
 .ds-checkbox.ds-checkbox + .du-bois-light-hint + .du-bois-light-form-message,
 .ds-checkbox.ds-checkbox + .du-bois-dark-hint + .du-bois-dark-form-message {
-  padding-left: var(--db-space-lg);
+  padding-left: var(--db-spacing-sm);
   margin-top: 0;
 }
 
@@ -16334,7 +16476,7 @@ span.du-bois-light-typography-ellipsis-single-line {
 .du-bois-dark-hint + .ds-checkbox-group.ds-checkbox-group,
 .ds-checkbox-group.ds-checkbox-group + .du-bois-light-form-message,
 .ds-checkbox-group.ds-checkbox-group + .du-bois-dark-form-message {
-  margin-top: var(--db-space-sm);
+  margin-top: var(--db-spacing-2xs);
 }
 
 /* CheckboxGroup layout. Vertical delegates to the `.ds-stack` primitive; the
@@ -16350,82 +16492,51 @@ span.du-bois-light-typography-ellipsis-single-line {
  * off the vertical element so it never fights the stack primitive's gap. */
 .ds-checkbox-group:not(.ds-stack) {
   flex-wrap: nowrap;
-  column-gap: var(--db-checkbox-spacing);
+  column-gap: var(--db-checkbox-label-spacing);
   row-gap: 0;
 }
 
 /* Vertical: .ds-stack supplies flex-direction + gap; we only retarget the knob. */
 .ds-checkbox-group.ds-stack {
-  --ds-stack-gap: var(--db-checkbox-spacing);
+  --ds-stack-gap: var(--db-checkbox-label-spacing);
 }
 
-/* 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(:root), :where(.du-bois-light) {
+  /* 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
@@ -16464,36 +16575,36 @@ span.du-bois-light-typography-ellipsis-single-line {
   width: fit-content;
 }
 
-/* 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. */
 .ds-radio:hover:has(input:not(:disabled, :checked)) .ds-radio-indicator {
-  background-color: var(--db-radio-bg-hover);
+  background-color: var(--db-radio-surface-hover);
   border-color: var(--db-radio-border-hover);
 }
 
 .ds-radio:active:has(input:not(:disabled, :checked)) .ds-radio-indicator {
-  background-color: var(--db-radio-bg-press);
+  background-color: var(--db-radio-surface-press);
   border-color: var(--db-radio-border-press);
 }
 
 /* Selected fill. */
 .ds-radio:has(input:checked) .ds-radio-indicator {
-  background-color: var(--db-radio-bg-checked);
-  border-color: var(--db-radio-bg-checked);
+  background-color: var(--db-radio-surface-checked);
+  border-color: var(--db-radio-surface-checked);
 }
 
 /* AntD getRadioInputStyles checked hover: background = actionPrimaryBackgroundHover,
  * borderColor = actionPrimaryBackgroundPress (a darker ring than the fill). */
 .ds-radio:hover:has(input:checked:not(:disabled)) .ds-radio-indicator {
-  background-color: var(--db-radio-bg-checked-hover);
+  background-color: var(--db-radio-surface-checked-hover);
   border-color: var(--db-radio-border-checked-hover);
 }
 
 /* AntD getRadioInputStyles checked active: background = actionDefaultBackgroundPress,
  * borderColor = actionDefaultBorderPress (two-tone, not flat). */
 .ds-radio:active:has(input:checked:not(:disabled)) .ds-radio-indicator {
-  background-color: var(--db-radio-bg-checked-press);
+  background-color: var(--db-radio-surface-checked-press);
   border-color: var(--db-radio-border-checked-press);
 }
 
@@ -16508,16 +16619,16 @@ span.du-bois-light-typography-ellipsis-single-line {
  * UNCHECKED focus (AntD `&:not(disabled) > input:focus + inner`): only the border
  * color changes to actionPrimaryBackgroundDefault — NO outline ring. */
 .ds-radio:has(input:focus-visible:not(:checked)) .ds-radio-indicator {
-  border-color: var(--db-radio-border-focus-unchecked);
+  border-color: var(--db-radio-border-unchecked-focus);
 }
 
 /* CHECKED focus-visible (AntD `&.checked &:not(disabled) > input:focus-visible + inner`):
  * background = actionPrimaryBackgroundDefault, borderColor = actionDefaultBorderFocus,
  * outline = 1px solid actionPrimaryBackgroundDefault, outlineOffset = 1. */
 .ds-radio:has(input:focus-visible:checked) .ds-radio-indicator {
-  background-color: var(--db-radio-bg-checked);
+  background-color: var(--db-radio-surface-checked);
   border-color: var(--db-radio-border-focus);
-  outline: 1px solid var(--db-radio-focus-outline-checked-color);
+  outline: 1px solid var(--db-radio-outline-checked-focus);
   outline-offset: 1px;
 }
 
@@ -16532,18 +16643,24 @@ span.du-bois-light-typography-ellipsis-single-line {
 }
 
 .ds-radio:has(input:disabled) .ds-radio-indicator {
-  background-color: var(--db-radio-bg-disabled);
+  background-color: var(--db-radio-surface-disabled);
   border-color: var(--db-radio-border-disabled);
   box-shadow: none;
 }
 
 .ds-radio:has(input:disabled) .ds-radio-dot {
-  background-color: var(--db-radio-dot-color-disabled);
+  background-color: var(--db-radio-mark-disabled);
 }
 
-/* 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. */
 .ds-radio input {
   position: absolute;
   inset: 0;
@@ -16551,7 +16668,7 @@ span.du-bois-light-typography-ellipsis-single-line {
   block-size: var(--db-radio-size);
   margin: 0;
   opacity: 0;
-  pointer-events: none;
+  cursor: inherit;
 }
 
 /* Indicator — circle with the border/fill that responds to state above.
@@ -16561,12 +16678,17 @@ span.du-bois-light-typography-ellipsis-single-line {
   display: grid;
   place-items: center;
   flex-shrink: 0;
+  /* Decorative only — the overlaid input owns hit-testing. Without this, the
+   * indicator (and its inherited dot child) intercept `getByRole('radio').click()`;
+   * clicks on any edge sliver the input does not cover fall through to the label,
+   * which toggles via label/input association. */
+  pointer-events: none;
   inline-size: var(--db-radio-size);
   block-size: var(--db-radio-size);
   margin-top: calc((var(--db-line-height-base, 20px) - var(--db-radio-size)) / 2);
-  border: var(--db-radio-border-width) solid var(--db-radio-border-default);
+  border: var(--db-radio-border-width) solid var(--db-radio-border);
   border-radius: var(--db-radio-border-radius);
-  background-color: var(--db-radio-bg-default);
+  background-color: var(--db-radio-surface);
   box-sizing: border-box;
   transition:
     background-color var(--db-radio-transition-duration) ease,
@@ -16576,10 +16698,10 @@ span.du-bois-light-typography-ellipsis-single-line {
 
 .ds-radio .ds-radio-indicator > .ds-radio-dot {
   grid-area: 1 / 1;
-  inline-size: var(--db-radio-dot-size);
-  block-size: var(--db-radio-dot-size);
+  inline-size: var(--db-radio-mark-size);
+  block-size: var(--db-radio-mark-size);
   border-radius: var(--db-radius-full);
-  background-color: var(--db-radio-dot-color);
+  background-color: var(--db-radio-mark);
   opacity: 0;
   transition: opacity var(--db-radio-transition-duration) ease;
 }
@@ -16597,7 +16719,7 @@ span.du-bois-light-typography-ellipsis-single-line {
  * trailing whitespace that separates adjacent radios in a row. */
 .ds-radio .ds-radio-label {
   color: var(--db-radio-text);
-  padding-inline: var(--db-radio-spacing);
+  padding-inline: var(--db-radio-label-spacing);
   word-break: break-word;
 }
 
@@ -16611,7 +16733,7 @@ span.du-bois-light-typography-ellipsis-single-line {
 .ds-radio.ds-radio + .du-bois-dark-form-message,
 .ds-radio.ds-radio + .du-bois-light-hint + .du-bois-light-form-message,
 .ds-radio.ds-radio + .du-bois-dark-hint + .du-bois-dark-form-message {
-  padding-inline-start: var(--db-space-lg);
+  padding-inline-start: var(--db-spacing-sm);
   margin-top: 0;
 }
 
@@ -16627,8 +16749,8 @@ span.du-bois-light-typography-ellipsis-single-line {
 .ds-radio-group.ds-stack > .ds-radio.ds-radio + .du-bois-dark-form-message,
 .ds-radio-group.ds-stack > .ds-radio.ds-radio + .du-bois-light-hint + .du-bois-light-form-message,
 .ds-radio-group.ds-stack > .ds-radio.ds-radio + .du-bois-dark-hint + .du-bois-dark-form-message {
-  margin-top: calc(-1 * var(--db-space-sm));
-  margin-bottom: var(--db-space-sm);
+  margin-top: calc(-1 * var(--db-spacing-2xs));
+  margin-bottom: var(--db-spacing-2xs);
 }
 
 /* AntD `& > label:last-of-type + hint { marginTop: 0 }`: the last radio has no
@@ -16646,7 +16768,7 @@ span.du-bois-light-typography-ellipsis-single-line {
 .du-bois-dark-hint + .ds-radio-group.ds-radio-group,
 .ds-radio-group.ds-radio-group + .du-bois-light-form-message,
 .ds-radio-group.ds-radio-group + .du-bois-dark-form-message {
-  margin-top: var(--db-space-sm);
+  margin-top: var(--db-spacing-2xs);
 }
 
 /* RadioGroup layout. Vertical (the default) delegates flex-direction to the
@@ -16662,12 +16784,12 @@ span.du-bois-light-typography-ellipsis-single-line {
  * no gap of its own, so we zero out the gap and reproduce the rhythm via
  * padding-bottom on each radio. */
 .ds-radio-group.ds-stack {
-  --ds-stack-gap: var(--db-space-0);
+  --ds-stack-gap: 0;
 }
 
 /* AntD `& > label { paddingBottom: sm }`. */
 .ds-radio-group.ds-stack > .ds-radio {
-  padding-bottom: var(--db-space-sm);
+  padding-bottom: var(--db-spacing-2xs);
 }
 
 /* AntD `& > label:last-of-type { paddingBottom: 0 }`. */
@@ -16683,7 +16805,7 @@ span.du-bois-light-typography-ellipsis-single-line {
 .ds-radio-group.ds-stack > .du-bois-light-radio-tile + .du-bois-dark-radio-tile,
 .ds-radio-group.ds-stack > .du-bois-dark-radio-tile + .du-bois-light-radio-tile,
 .ds-radio-group.ds-stack > .du-bois-dark-radio-tile + .du-bois-dark-radio-tile {
-  margin-top: var(--db-space-md);
+  margin-top: var(--db-spacing-xs);
 }
 
 /* Horizontal: AntD `getHorizontalRadioGroupStyles` is a TWO-ROW grid (NOT a flex
@@ -16696,7 +16818,7 @@ span.du-bois-light-typography-ellipsis-single-line {
   display: grid;
   grid-template-rows: [label] auto [hint] auto;
   grid-auto-columns: max-content;
-  column-gap: var(--db-space-md);
+  column-gap: var(--db-spacing-xs);
 }
 
 /* Equal column widths: AntD `gridAutoColumns: minmax(0, 1fr)`. */
@@ -16729,64 +16851,52 @@ span.du-bois-light-typography-ellipsis-single-line {
  * the group itself gets a top margin (room above the two-row grid). */
 .ds-radio-group--horizontal:has(> .du-bois-light-hint),
 .ds-radio-group--horizontal:has(> .du-bois-dark-hint) {
-  margin-top: var(--db-space-sm);
+  margin-top: var(--db-spacing-2xs);
 }
 
 /* AntD `&& + form-message { marginTop: sm }` (horizontal): a form-message following
  * the whole group is separated by sm. */
 .ds-radio-group--horizontal + .du-bois-light-form-message,
 .ds-radio-group--horizontal + .du-bois-dark-form-message {
-  margin-top: var(--db-space-sm);
+  margin-top: var(--db-spacing-2xs);
 }
 
-/* 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(:root), :where(.du-bois-light) {
+  /* 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);
 }
 
@@ -16798,7 +16908,7 @@ span.du-bois-light-typography-ellipsis-single-line {
   cursor: pointer;
   user-select: none;
   width: fit-content;
-  margin-inline-end: var(--db-switch-spacing);
+  margin-inline-end: var(--db-switch-label-spacing);
 }
 
 .ds-switch:has(input:disabled) {
@@ -16814,9 +16924,9 @@ span.du-bois-light-typography-ellipsis-single-line {
   cursor: pointer;
   inline-size: var(--db-switch-track-width);
   block-size: var(--db-switch-track-height);
-  border: var(--db-switch-border-width) solid var(--db-switch-border-default);
+  border: var(--db-switch-border-width) solid var(--db-switch-border);
   border-radius: var(--db-switch-border-radius);
-  background-color: var(--db-switch-bg-default);
+  background-color: var(--db-switch-surface);
   box-sizing: border-box;
   transition:
     background-color var(--db-switch-transition-duration) ease,
@@ -16835,7 +16945,7 @@ span.du-bois-light-typography-ellipsis-single-line {
   border: var(--db-switch-border-width) solid;
   border-color: inherit;
   border-radius: var(--db-switch-border-radius);
-  background-color: var(--db-switch-thumb-color);
+  background-color: var(--db-switch-thumb);
   box-sizing: border-box;
   transform: translateY(-50%);
   transition: transform var(--db-switch-transition-duration) ease;
@@ -16843,27 +16953,27 @@ span.du-bois-light-typography-ellipsis-single-line {
 
 /* `<label for>` propagates `:hover` to the input, so scope hover/press to the control, not `input:hover`. */
 .ds-switch:hover input:not(:disabled):not(:checked) {
-  background-color: var(--db-switch-bg-hover);
+  background-color: var(--db-switch-surface-hover);
   border-color: var(--db-switch-border-hover);
 }
 
 .ds-switch:active input:not(:disabled):not(:checked) {
-  background-color: var(--db-switch-bg-press);
+  background-color: var(--db-switch-surface-press);
   border-color: var(--db-switch-border-press);
 }
 
 .ds-switch input:checked {
-  background-color: var(--db-switch-bg-checked);
+  background-color: var(--db-switch-surface-checked);
   border-color: var(--db-switch-border-checked);
 }
 
 .ds-switch:hover input:checked:not(:disabled) {
-  background-color: var(--db-switch-bg-checked-hover);
+  background-color: var(--db-switch-surface-checked-hover);
   border-color: var(--db-switch-border-checked-hover);
 }
 
 .ds-switch:active input:checked:not(:disabled) {
-  background-color: var(--db-switch-bg-checked-press);
+  background-color: var(--db-switch-surface-checked-press);
   border-color: var(--db-switch-border-checked-press);
 }
 
@@ -16872,27 +16982,29 @@ span.du-bois-light-typography-ellipsis-single-line {
 }
 
 /* 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. */
+ * 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. */
 .ds-switch input:focus-visible {
   border-color: var(--db-switch-border-focus);
-  outline: var(--db-switch-focus-ring-width) solid var(--db-switch-focus-ring-color);
+  outline: 1px solid var(--db-focus-ring-color);
   outline-offset: 0;
 }
 
 .ds-switch input:checked:focus-visible {
-  outline-offset: var(--db-switch-focus-ring-offset);
+  outline-offset: 1px;
 }
 
 .ds-switch input:disabled {
   cursor: not-allowed;
-  background-color: var(--db-switch-bg-disabled);
+  background-color: var(--db-switch-surface-disabled);
   border-color: var(--db-switch-border-disabled);
 }
 
 /* Disabled + on: more specific than the plain disabled rule, so it wins regardless of source order. */
 .ds-switch input:checked:disabled {
-  background-color: var(--db-switch-bg-checked-disabled);
-  border-color: var(--db-switch-bg-checked-disabled);
+  background-color: var(--db-switch-surface-checked-disabled);
+  border-color: var(--db-switch-surface-checked-disabled);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -16909,13 +17021,13 @@ span.du-bois-light-typography-ellipsis-single-line {
 
 .ds-switch-wrapper .ds-switch-state-message {
   margin-inline-start: auto;
-  margin-inline-end: var(--db-switch-spacing);
+  margin-inline-end: var(--db-switch-label-spacing);
 }
 
 /* `:first-child` scopes this to the label-first layout; the plain layout renders the label last. */
 .ds-switch-wrapper > .du-bois-light-label:first-child,
 .ds-switch-wrapper > .du-bois-dark-label:first-child {
-  margin-inline-end: var(--db-switch-spacing);
+  margin-inline-end: var(--db-switch-label-spacing);
 }
 
 .ds-switch-state-message {
@@ -16934,7 +17046,7 @@ span.du-bois-light-typography-ellipsis-single-line {
   + :is(.du-bois-light-hint, .du-bois-dark-hint, .du-bois-light-form-message, .du-bois-dark-form-message), :is(.ds-switch.ds-switch, .ds-switch-wrapper.ds-switch-wrapper)
   + :is(.du-bois-light-hint, .du-bois-dark-hint)
   + :is(.du-bois-light-form-message, .du-bois-dark-form-message) {
-  padding-inline-start: calc(var(--db-space-sm) + var(--db-switch-track-width));
+  padding-inline-start: calc(var(--db-spacing-2xs) + var(--db-switch-track-width));
 }
 
 :is(.ds-switch.ds-switch, .ds-switch-wrapper.ds-switch-wrapper)