@databricks/design-system 2.0.2 → 2.0.4

package/dist/index-dark.css

@@ -16249,123 +16249,251 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --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="db-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="db-stack" style="--db-stack-gap: var(--db-spacing-lg)">…</div>
+
+  \3c !-- Don't stretch children to full width (e.g. left-aligned buttons) -->
+  <div class="db-stack" style="--db-stack-align: flex-start">…</div>
+ */
+
+/**
+  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="db-cluster">
+      <span>one</span>
+      <span>two</span>
+      <span>three</span>
+    </div>
+
+    \3c !-- Push children apart (e.g. title left, actions right) -->
+    <div class="db-cluster" style="--db-cluster-justify: space-between">…</div>
+
+    \3c !-- Looser gap for this instance -->
+    <div class="db-cluster" style="--db-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);
 
-/* 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);
+  /* 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-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-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);
 
-  /* 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);
+  --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-selection-toggle-size: 16px;
-  --db-selection-toggle-border-radius: var(--db-radius-sm);
-  --db-selection-toggle-spacing: var(--db-space-sm);
+  --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 — 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
@@ -16376,24 +16504,23 @@ span.du-bois-dark-typography-ellipsis-single-line {
  *
  * Structure (assumed by the React component):
  *
- *   <label class="ds-checkbox">
- *     <input type="checkbox" class="ds-checkbox-input" />
- *     <span  class="ds-checkbox-indicator">         ← border + fill react to state
- *       <svg class="ds-checkbox-checkmark" .../>    ← visible when :checked
- *       <span class="ds-checkbox-dash" />           ← visible when :indeterminate
+ *   <label class="db-checkbox">
+ *     <input type="checkbox" class="db-checkbox-input" />
+ *     <span  class="db-checkbox-indicator">         ← border + fill react to state
+ *       <svg class="db-checkbox-checkmark" .../>    ← visible when :checked
+ *       <span class="db-checkbox-dash" />           ← visible when :indeterminate
  *     </span>
- *     <span class="ds-checkbox-label">{children}</span>
+ *     <span class="db-checkbox-label">{children}</span>
  *   </label>
  *
- * State and hiding rules target `.ds-checkbox-input` — the checkbox's OWN input —
+ * State and hiding rules target `.db-checkbox-input` — the checkbox's OWN input —
  * never a bare `input`: consumers may render an inline <input> (e.g. a number
  * 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. */
@@ -16406,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
@@ -16428,7 +16561,7 @@ span.du-bois-dark-typography-ellipsis-single-line {
  *
  * Each helper-text class is listed once per theme (`du-bois-light-*` /
  * `du-bois-dark-*`). The selectors deliberately repeat the root/group class
- * (`.ds-checkbox.ds-checkbox`) to push specificity to (0,3,0). That
+ * (`.db-checkbox.db-checkbox`) to push specificity to (0,3,0). That
  * overrides `FormMessage`'s own `&&`-doubled `margin-top: 8px` declared with
  * Emotion at runtime — without doubling we'd lose on the specificity tie and
  * the validation message would keep an 8px gap below the checkbox. */
@@ -16441,84 +16574,53 @@ span.du-bois-dark-typography-ellipsis-single-line {
  * follows a Hint, 8px gap above a FormMessage when it follows the group.
  * Doubled class on the group side beats FormMessage's `&&` for the same reason. */
 
-/* CheckboxGroup layout. Vertical delegates to the `.ds-stack` primitive; the
+/* CheckboxGroup layout. Vertical delegates to the `.db-stack` primitive; the
  * horizontal default stays bespoke because it must NOT wrap (a long row of
  * checkboxes overflows horizontally rather than reflowing onto multiple lines),
- * which is the one thing `.ds-cluster` won't do. Both wire their gap to the
+ * which is the one thing `.db-cluster` won't do. Both wire their gap to the
  * checkbox spacing token so a retheme moves with the rest of the component. */
 
-/* Horizontal (default): single non-wrapping row. `:not(.ds-stack)` keeps this
+/* Horizontal (default): single non-wrapping row. `:not(.db-stack)` keeps this
  * off the vertical element so it never fights the stack primitive's gap. */
 
-/* Vertical: .ds-stack supplies flex-direction + gap; we only retarget the knob. */
+/* Vertical: .db-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
@@ -16529,12 +16631,12 @@ span.du-bois-dark-typography-ellipsis-single-line {
  *
  * Structure (assumed by the React component):
  *
- *   <label class="ds-radio">
+ *   <label class="db-radio">
  *     <input type="radio" />
- *     <span  class="ds-radio-indicator">     ← circle border + fill react to state
- *       <span class="ds-radio-dot" />        ← visible when :checked
+ *     <span  class="db-radio-indicator">     ← circle border + fill react to state
+ *       <span class="db-radio-dot" />        ← visible when :checked
  *     </span>
- *     <span class="ds-radio-label">{children}</span>
+ *     <span class="db-radio-label">{children}</span>
  *   </label>
  *
  * The root only ever has one <input> descendant, so a bare `input` selector is
@@ -16543,11 +16645,11 @@ span.du-bois-dark-typography-ellipsis-single-line {
  * checkmark/dash, and there is no indeterminate state.
  *
  * TODO(DUBOIS-452): the indicator/dot state styles below are identical to
- * NativeCheckbox.css — consolidate them into a shared `.ds-selection-toggle` class. */
+ * NativeCheckbox.css — consolidate them into a shared `.db-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. */
 
@@ -16572,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
@@ -16595,16 +16703,16 @@ span.du-bois-dark-typography-ellipsis-single-line {
  * after a radio gets `marginTop: -sm` (cancels the preceding radio's
  * `paddingBottom: sm` so the hint tucks directly under its label) and
  * `marginBottom: sm` (gap before the next radio). The negative top margin relies on
- * the .ds-stack gap being 0 (set below). Scoped to .ds-stack so it never perturbs
+ * the .db-stack gap being 0 (set below). Scoped to .db-stack so it never perturbs
  * the horizontal grid, where hints are positioned by grid-row instead. */
 
 /* AntD `& > label:last-of-type + hint { marginTop: 0 }`: the last radio has no
  * `paddingBottom` to cancel, so its trailing hint keeps its natural top position. */
 
 /* RadioGroup layout. Vertical (the default) delegates flex-direction to the
- * .ds-stack primitive; horizontal is a two-row grid (mirroring AntD). */
+ * .db-stack primitive; horizontal is a two-row grid (mirroring AntD). */
 
-/* Vertical: .ds-stack supplies flex-direction: column. AntD's vertical helper
+/* Vertical: .db-stack supplies flex-direction: column. AntD's vertical helper
  * (getVerticalRadioGroupStyles) produces its item rhythm purely from
  * `& > label { paddingBottom: sm }` plus the negative-margin hint trick above — it
  * uses NO flex gap. The negative `marginTop` on hints only works if the stack adds
@@ -16616,9 +16724,9 @@ span.du-bois-dark-typography-ellipsis-single-line {
 /* AntD `& > label:last-of-type { paddingBottom: 0 }`. */
 
 /* AntD getVerticalRadioGroupStyles `.${prefix}-radio-tile + .${prefix}-radio-tile {
- * marginTop: md }`: RadioTiles are not matched by the `.ds-radio` padding-bottom
+ * marginTop: md }`: RadioTiles are not matched by the `.db-radio` padding-bottom
  * rhythm above (the tile's own class is du-bois-{light,dark}-radio-tile), so space
- * consecutive tiles explicitly. The .ds-stack gap is 0, so this margin is the spacing. */
+ * consecutive tiles explicitly. The .db-stack gap is 0, so this margin is the spacing. */
 
 /* Horizontal: AntD `getHorizontalRadioGroupStyles` is a TWO-ROW grid (NOT a flex
  * row) so each radio sits in the [label] row and its following hint drops into the
@@ -16631,13 +16739,13 @@ span.du-bois-dark-typography-ellipsis-single-line {
 
 /* AntD `& > label, & > .${prefix}-radio-tile { gridRow: label / label; marginRight: 0 }`:
  * every radio (and every RadioTile button, whose own class is
- * du-bois-{light,dark}-radio-tile and is NOT matched by `> .ds-radio`) lives in the
+ * du-bois-{light,dark}-radio-tile and is NOT matched by `> .db-radio`) lives in the
  * label row. grid-auto-flow defaults to row, so successive items advance the implicit
  * column. */
 
 /* AntD `& > label + hint { display: inline-block; gridRow: hint / hint }`: a hint
  * following a radio drops into the hint row of the column its radio occupies. The
- * vertical negative-margin rules are scoped to .ds-stack, so nothing to reset here. */
+ * vertical negative-margin rules are scoped to .db-stack, so nothing to reset here. */
 
 /* AntD `:has(> hint) { marginTop: sm }`: when the horizontal group contains a hint,
  * the group itself gets a top margin (room above the two-row grid). */
@@ -16645,54 +16753,42 @@ 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);
 }
 
@@ -16704,13 +16800,15 @@ span.du-bois-dark-typography-ellipsis-single-line {
 /* `<label for>` propagates `:hover` to the input, so scope hover/press to the control, not `input:hover`. */
 
 /* 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. */
 
 /* 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. */
 
-/* Target the <Label>'s class, not a bare `label` — that would also match the .ds-switch root <label>. */
+/* Target the <Label>'s class, not a bare `label` — that would also match the .db-switch root <label>. */
 
 /* Indent a following hint/message past the track. The class is doubled to out-specify FormMessage's
  * own margin rule. */