@databricks/design-system 2.0.5 → 2.0.6

package/dist/index-dark.css

@@ -16300,7 +16300,7 @@ span.du-bois-dark-typography-ellipsis-single-line {
 
   --db-surface-selected: var(--db-color-table-background-selected-hover);
   --db-surface-selected-hover: initial; /* TODO */;
-  --db-surface-selected-active: initial; /* TODO */;
+  --db-surface-selected-active: var(--db-color-table-background-selected-hover); /* no distinct active value */
 
   /* Surface alpha-blending modifiers */
   --db-surface-backdrop: initial; /* TODO */;
@@ -16326,7 +16326,7 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-accent-surface-strong: var(--db-color-action-primary-background-hover);
 
   --db-accent-surface-hover: var(--db-color-action-primary-background-hover);
-  --db-accent-surface-active: initial; /* TODO */
+  --db-accent-surface-active: var(--db-color-action-primary-background-press); /* no distinct active value */
   --db-accent-surface-selected: var(--db-color-action-primary-background-press);
 
   /* In the current design, the text color for an accent surface does not change with hover, active, etc. */
@@ -16343,7 +16343,7 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-negative-surface-strong: var(--db-color-action-danger-primary-background-hover);
 
   --db-negative-surface-hover: var(--db-color-action-danger-primary-background-hover);
-  --db-negative-surface-active: initial; /* TODO */
+  --db-negative-surface-active: var(--db-color-action-danger-primary-background-press); /* no distinct active value */
   --db-negative-surface-selected: var(--db-color-action-danger-primary-background-press);
 
   --db-negative-text: var(--db-color-text-validation-danger);
@@ -16384,6 +16384,11 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-positive-border: initial; /* TODO */
   --db-positive-border-hover: initial; /* TODO */
   --db-positive-border-active: initial; /* TODO */
+
+  /* Branded (theme-invariant — same values as light) */
+  --db-ai-gradient-start: #4299e0;
+  --db-ai-gradient-mid: #ca42e0;
+  --db-ai-gradient-end: #ff5f46;
 }
 
 :where(.du-bois-dark) {
@@ -16462,6 +16467,47 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-shape-pill: 999px;
 }
 
+:where(.du-bois-dark) {
+  /* Shape */
+  /* Mirrors the ShapeTokens host-override var used by list items; falls back to the theme radius. */
+  --db-list-item-border-radius: var(--list-item-border-radius, 4px);
+
+  /* Color */
+  --db-list-surface: var(--db-surface-base);
+  --db-list-text: var(--db-text-base);
+  --db-list-header-text: var(--db-text-subtle);
+  --db-list-separator: var(--db-border-subtle);
+
+  --db-list-item-surface-hover: var(--db-surface-hover);
+  --db-list-item-surface-active: var(--db-surface-active);
+  --db-list-item-surface-selected: var(--db-accent-surface-subtle);
+  --db-list-item-surface-disabled: var(--db-surface-disabled);
+
+  --db-list-item-text-selected: var(--db-accent-text);
+  --db-list-item-text-disabled: var(--db-text-disabled);
+
+  --db-list-item-danger-text: var(--db-negative-text);
+  --db-list-item-danger-surface-hover: var(--db-negative-surface-subtle);
+
+  /* Density */
+  --db-list-item-padding: var(--db-space-2);
+  --db-list-item-height: var(--db-size-8);
+}
+
+:where(.du-bois-dark) {
+  /* Shape */
+  /* Mirrors the ShapeTokens host-override var; falls back to the v1 value (borderRadiusSm). */
+  --db-popup-border-radius: var(--popup-border-radius, 4px);
+
+  /* Color */
+  --db-popup-surface: var(--db-surface-base);
+  --db-popup-text: var(--db-text-base);
+  --db-popup-border: var(--db-border-base);
+
+  /* Elevation */
+  --db-popup-elevation: var(--db-elevation-med);
+}
+
 :where(.du-bois-dark) {
   /* Shape */
   --db-selection-toggle-border-radius: 4px;
@@ -16473,15 +16519,15 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-selection-toggle-border: var(--db-border-strong);
 
   --db-selection-toggle-surface-hover: var(--db-surface-hover);
-  --db-selection-toggle-surface-press: var(--db-surface-selected);
+  --db-selection-toggle-surface-active: var(--db-surface-selected-active);
   --db-selection-toggle-surface-checked: var(--db-accent-surface);
   --db-selection-toggle-surface-checked-hover: var(--db-accent-surface-hover);
-  --db-selection-toggle-surface-checked-press: var(--db-accent-surface-selected);
+  --db-selection-toggle-surface-checked-active: var(--db-accent-surface-active);
   --db-selection-toggle-surface-disabled: var(--db-surface-disabled);
   --db-selection-toggle-surface-checked-disabled: var(--db-surface-disabled);
 
   --db-selection-toggle-border-hover: var(--db-accent-surface-hover);
-  --db-selection-toggle-border-press: var(--db-accent-surface-selected);
+  --db-selection-toggle-border-active: var(--db-accent-surface-active);
   --db-selection-toggle-border-disabled: var(--db-border-base);
 
   --db-selection-toggle-mark-disabled: var(--db-text-disabled);
@@ -16497,6 +16543,120 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-selection-toggle-transition-duration: 120ms;
 }
 
+
+
+/* Component-tier tokens for the native <Button>, grouped by area (density, shape, typography, color).
+ * Colors alias the action-* system tokens; sizes alias the system density scale.
+ *
+ * Follows the mortar/action.css pattern: one semantic set (surface / border / text, each with
+ * -hover / -active / -disabled) whose defaults are the secondary variant. The variant classes that
+ * re-set these tokens per variant live in NativeButton.css; this file declares only tokens. */
+
+/* Declared under the theme classes too (not just :root) so the var() chain re-resolves inside a
+ * `.du-bois-dark` subtree (or a portal that re-applies the theme class) instead of freezing at the root values. */
+:where(.du-bois-dark) {
+  /* ── Density ──────────────────────────────────────────────────────────── */
+  --db-btn-height: var(--db-size-8);
+  --db-btn-height-small: var(--db-size-6);
+  --db-btn-icon-size: var(--db-size-4);
+  --db-btn-border-width: 1px;
+  --db-btn-padding-vertical: var(--db-space-1);
+  --db-btn-padding-horizontal: var(--db-space-3);
+  --db-btn-padding-horizontal-small: var(--db-space-2);
+  /* Icon/force-icon horizontal padding: half the standard horizontal padding. */
+  --db-btn-padding-horizontal-icon: calc(var(--db-space-3) / 2); /* 6px */
+  --db-btn-gap: var(--db-space-1);
+  --db-btn-end-icon-gap: var(--db-space-2);
+  --db-btn-end-icon-gap-small: var(--db-space-1);
+  /* Width of a content-less button while loading, so the standalone spinner has room. */
+  --db-btn-loading-empty-width: var(--db-size-10);
+
+  /* ── Shape ────────────────────────────────────────────────────────────── */
+  --db-btn-border-radius: var(--db-shape-control);
+
+  /* ── Typography ───────────────────────────────────────────────────────── */
+  --db-btn-font-size: var(--db-font-size-base);
+  --db-btn-icon-only-font-size: var(--db-font-size-lg); /* 15px */
+  --db-btn-font-weight: var(--db-font-weight-normal);
+  /* Line heights are hard-coded until the typography scale ships computed per-level line-height tokens. */
+  --db-btn-line-height: 1.25rem; /* 20px */
+  --db-btn-line-height-small: 1rem; /* 16px */
+
+  /* ── Color: semantic set (defaults = secondary variant) ───────────────── */
+  --db-btn-surface: var(--db-color-action-default-background-default);
+  --db-btn-surface-hover: var(--db-color-action-default-background-hover);
+  --db-btn-surface-active: var(--db-color-action-default-background-press);
+  --db-btn-surface-disabled: transparent;
+  --db-btn-border: var(--db-color-action-default-border-default);
+  --db-btn-border-hover: var(--db-color-action-default-border-hover);
+  --db-btn-border-active: var(--db-color-action-default-border-press);
+  --db-btn-border-disabled: var(--db-color-action-disabled-border);
+  --db-btn-text: var(--db-color-action-default-text-default);
+  --db-btn-text-hover: var(--db-color-action-default-text-hover);
+  --db-btn-text-active: var(--db-color-action-default-text-press);
+  --db-btn-text-disabled: var(--db-color-action-disabled-text);
+
+  /* ── Focus & icon ─────────────────────────────────────────────────────── */
+  --db-btn-focus-ring: var(--db-color-action-default-border-focus);
+  --db-btn-danger-focus-ring: var(--db-color-action-danger-primary-background-default);
+  --db-btn-icon-glyph: var(--db-color-text-secondary);
+}
+
+/* Native <Button> visual styles. Consumes the component-tier `--db-btn-*` tokens (see tokens.css);
+ * the variant classes below re-set those tokens per variant and the rules that follow paint them.
+ * Shipped via mortar.css. */
+
+/* ── 0. Variant token re-sets ──────────────────────────────────────────────
+ * Each variant class re-sets the semantic tokens declared in tokens.css; combined classes win by
+ * specificity, which beats the `:where(:root)` (specificity 0) defaults regardless of file order. */
+/* Link is borderless and text-only, so its hover/press surface stays transparent. */
+/* Every danger button (icon included) disables to the filled treatment. */
+/* Danger, filled (primary): re-set only the surface; text/transparent border come from primary. */
+/* Danger, secondary/outlined. */
+/* Danger, tertiary/link: danger text everywhere, danger surface on hover/press; resting/disabled
+ * surface stay the tertiary ghost (override the filled danger-disabled set above). */
+/* Icon-only renders as the ghost (tertiary) treatment regardless of variant; re-set the semantic set
+ * so the icon-only rules paint from these component tokens. */
+/* Danger icon-only keeps the ghost resting surface (inherited above) but uses danger text and a
+ * danger hover/press surface. */
+
+/* ── 1. Base — paints the default (secondary) variant ────────────────────── */
+
+/* ── 2. Padding ──────────────────────────────────────────────────────────── */
+
+/* ── 3. Interactive states ───────────────────────────────────────────────── */
+
+/* ── 4. Focus ────────────────────────────────────────────────────────────── */
+
+/* ── 5. Small / block (full-width) / empty ────────────────────────────────── */
+
+/* ── 6. Tertiary & link ──────────────────────────────────────────────────── */
+/* Re-declare the text color for a non-icon-only tertiary/link at two-class weight so a plain
+ * call-site `color` override loses; an icon-only glyph stays at base weight so its override wins. */
+/* Keep the resting border at two-class weight (parity with the shielded border-color). */
+
+/* ── 7. Danger ───────────────────────────────────────────────────────────── */
+
+/* ── 8. Icon-only ────────────────────────────────────────────────────────── */
+/* `:where()` keeps this at (0,1,0) so a call-site `css` width override wins, as it does for `height`. */
+/* `:where()` on the exclusion holds this at (0,2,0): enough to tint an un-overridden icon-only link
+ * over the base color, while still letting a consumer's own icon-color override win on source order. */
+
+/* ── 9. Disabled — base rules paint the per-variant `*-disabled` tokens (see tokens.css) ──────── */
+/* Empty disabled buttons keep a transparent border (set elsewhere), so exclude them.
+ * `:where()` on the exclusion holds this at (0,2,0): enough to beat the base border, while still
+ * letting a consumer's own `[disabled]` border override win on source order. */
+
+/* ── 10. Icon & content layout ───────────────────────────────────────────── */
+/* The leading icon renders unwrapped as the button's direct `.anticon` child (see NativeButton.tsx),
+ * so `> .anticon` targets only a real icon glyph — a non-glyph `icon` (e.g. a Spinner) keeps its own
+ * sizing — and out-specifies AntD's runtime-injected global `.anticon` rule. */
+
+/* ── 11. Loading ─────────────────────────────────────────────────────────── */
+
+/* ── 12. dangerouslySetForceIconStyles ───────────────────────────────────── */
+
+
 :where(.du-bois-dark) {
   /* Shape */
   --db-checkbox-border-radius: var(--db-selection-toggle-border-radius);
@@ -16505,15 +16665,15 @@ span.du-bois-dark-typography-ellipsis-single-line {
   /* 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-active: 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-checked-active: var(--db-selection-toggle-surface-checked-active);
   --db-checkbox-surface-disabled: var(--db-selection-toggle-surface-disabled);
 
   --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-active: var(--db-selection-toggle-border-active);
   --db-checkbox-focus-ring: var(--db-focus-ring-color);
   --db-checkbox-border-disabled: var(--db-color-action-disabled-border);
 
@@ -16610,7 +16770,7 @@ span.du-bois-dark-typography-ellipsis-single-line {
  * vertical margin Hint/FormMessage carry. */
 
 /* Group spacing against sibling form text — 8px gap above the group when it
- * follows a Hint, 8px gap above a FormMessage when it follows the group.
+ * follows a Label or 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 `.db-stack` primitive; the
@@ -16624,6 +16784,162 @@ span.du-bois-dark-typography-ellipsis-single-line {
 
 /* Vertical: .db-stack supplies flex-direction + gap; we only retarget the knob. */
 
+
+
+:where(.du-bois-dark) {
+  /* Density */
+  --db-drawer-padding-horizontal: var(--db-space-6);
+  --db-drawer-padding-horizontal-small: var(--db-space-4);
+  --db-drawer-content-padding-top: var(--db-space-4);
+  --db-drawer-content-padding-top-small: var(--db-space-2);
+  --db-drawer-footer-padding-top: var(--db-space-4);
+  --db-drawer-footer-padding-bottom: var(--db-space-6);
+  --db-drawer-footer-padding-bottom-small: var(--db-space-4);
+  --db-drawer-title-margin-bottom: var(--db-space-2);
+  --db-drawer-close-button-margin: var(--db-space-1);
+
+  /* Color */
+  --db-drawer-surface: var(--db-surface-base);
+  --db-drawer-text: var(--db-text-base);
+  --db-drawer-border: var(--db-border-base);
+  /* No v2 token holds the drawer scrim yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-drawer-overlay: var(--db-color-overlay-overlay);
+}
+
+:where(.du-bois-dark) {
+  /* Elevation */
+  /* No v2 token holds the dark drawer elevation yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-drawer-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.87);
+}
+
+
+
+
+
+
+
+
+
+
+/* Component tokens for the native Icon. */
+:where(.du-bois-dark) {
+  --db-icon-size: var(--db-font-size-xl);
+  --db-icon-color-danger: var(--db-color-text-validation-danger);
+  --db-icon-color-warning: var(--db-color-text-validation-warning);
+  --db-icon-color-success: var(--db-color-text-validation-success);
+  --db-icon-ai-gradient-start: var(--db-ai-gradient-start);
+  --db-icon-ai-gradient-mid: var(--db-ai-gradient-mid);
+  --db-icon-ai-gradient-end: var(--db-ai-gradient-end);
+}
+
+/* Native Icon styles. Ships through mortar.css and reads only component-tier --db-icon-* tokens.
+ * Icon size is driven solely by the `--db-icon-size` design token: to resize an icon, set that
+ * token in scope (default 16px in tokens.css) rather than overriding `font-size`. */
+
+/* TODO: remove once clickable-icon callsites are gone. Kept for backwards compatibility with the
+ * AntD icon, which made icons clickable via onClick; some callsites still rely on it. Actual icons
+ * should never carry a tabindex — a clickable icon belongs inside a button. */
+
+/* Semantic colors set `color` only; the SVG glyph paints its `fill`/`stroke` from `currentColor`,
+ * so setting the text color recolors the icon. */
+
+@keyframes db-icon-loading-circle {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+
+
+
+:where(.du-bois-dark) {
+  /* Shape */
+  /* Must not scale with density; no non-scaling system token holds it. TODO(FEINF-6505): adopt a v2 system token when one is added. */
+  --db-navigation-menu-indicator-thickness: 4px;
+  /* No system token holds this control-specific inset. TODO(FEINF-6505): adopt a v2 system token when one is added. */
+  --db-navigation-menu-focus-ring-offset: -1px;
+
+  /* Color */
+  --db-navigation-menu-indicator: var(--db-accent-surface);
+  --db-navigation-menu-focus-ring: var(--db-focus-ring-color);
+  --db-navigation-menu-text: var(--db-text-subtle);
+  --db-navigation-menu-text-selected: var(--db-text-base);
+  /* No v2 semantic for default-action link text yet; bridges on the v1 --db-color-* token. */
+  --db-navigation-menu-text-hover: var(--db-color-action-default-text-hover);
+  --db-navigation-menu-text-active: var(--db-color-action-default-text-press);
+
+  /* Density */
+  --db-navigation-menu-item-height: var(--db-size-8);
+  --db-navigation-menu-item-min-width: var(--db-size-6);
+  --db-navigation-menu-link-padding-top: var(--db-space-1);
+  --db-navigation-menu-link-padding-bottom: var(--db-space-2);
+  --db-navigation-menu-focus-ring-width: var(--db-focus-ring-width);
+}
+
+
+:where(.du-bois-dark) {
+  /* Color */
+  /* No v2 token holds tertiary action-text states yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-overflow-trigger-text: var(--db-color-action-tertiary-text-default);
+  --db-overflow-trigger-text-hover: var(--db-color-action-tertiary-text-hover);
+  --db-overflow-trigger-text-press: var(--db-color-action-tertiary-text-press);
+
+  /* Density */
+  --db-overflow-spacing: var(--db-space-2);
+  --db-overflow-menu-spacing: var(--db-space-1);
+}
+
+
+
+/* Popover is a neutral-card member of the popup family: surface, text, border, and radius come
+ * from --db-popup-*. Link, focus, and spacing are popover-specific and reference system tokens
+ * directly. The popup elevation scale is light-only, so the dark shadow is re-declared below. */
+
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-popover-border-radius: var(--db-popup-border-radius);
+
+  /* Color */
+  --db-popover-surface: var(--db-popup-surface);
+  --db-popover-text: var(--db-popup-text);
+  --db-popover-border: var(--db-popup-border);
+  /* No v2 token holds the tertiary link text yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-popover-link-text: var(--db-color-action-tertiary-text-default);
+  --db-popover-link-text-hover: var(--db-color-action-tertiary-text-hover);
+  --db-popover-focus-ring: var(--db-focus-ring-color);
+
+  /* Density */
+  --db-popover-spacing: var(--db-space-2);
+  --db-popover-focus-ring-width: var(--db-focus-ring-width);
+
+  /* Elevation */
+  --db-popover-shadow: var(--db-popup-elevation);
+}
+
+:where(.du-bois-dark) {
+  /* No v2 token holds the dark-scope popover elevation shadow yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-popover-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.61);
+}
+
+
+/* Declared under the theme classes too (not just :root) so the var() chain re-resolves inside a
+ * `.du-bois-dark` subtree instead of freezing at the light values. */
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-progress-border-radius: var(--db-shape-pill);
+
+  /* Color */
+  --db-progress-track: var(--db-color-progress-track);
+  --db-progress-fill: var(--db-color-progress-fill);
+
+  /* Density */
+  --db-progress-size: var(--db-size-2);
+
+  /* Motion */
+  /* No v2 motion token holds this duration. TODO(FEINF-6505): adopt a v2 motion token when one is added. */
+  --db-progress-transition-duration: 300ms;
+}
+
 :where(.du-bois-dark) {
   /* Shape */
   --db-radio-border-radius: var(--db-radius-full);
@@ -16632,19 +16948,19 @@ span.du-bois-dark-typography-ellipsis-single-line {
   /* 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-active: 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-checked-active: var(--db-color-action-default-background-press);
   --db-radio-surface-disabled: var(--db-selection-toggle-surface-disabled);
 
   --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-active: var(--db-selection-toggle-border-active);
   --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-checked-hover: var(--db-selection-toggle-border-active);
+  --db-radio-border-checked-active: 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);
 
@@ -16792,6 +17108,76 @@ 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. */
 
+
+
+
+
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-slider-border-radius: var(--db-shape-pill);
+
+  /* Color */
+  /* No v2 token holds the track + disabled-range surface yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-slider-track-surface: #e8ecf0;
+  --db-slider-range-surface-disabled: #e8ecf0;
+  /* No v2 token holds the range fill yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-slider-range-surface: #2272b4;
+
+  --db-slider-thumb-surface: var(--db-accent-surface);
+  --db-slider-thumb-surface-hover: var(--db-accent-surface-hover);
+  --db-slider-thumb-surface-press: var(--db-accent-surface-active);
+  /* No v2 token holds the disabled thumb yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-slider-thumb-surface-disabled: #d1d9e1;
+
+  /* Density */
+  --db-slider-size: var(--db-size-5); /* 20px */
+  --db-slider-thumb-size: var(--db-size-5); /* 20px */
+  --db-slider-track-thickness: calc(var(--db-size-1) * 0.75); /* 3px */
+}
+
+:where(.du-bois-dark) {
+  /* Shape */
+  /* TODO(FEINF-6505): adopt --db-shape-container-* once a 4px container radius exists; kept on --db-radius-sm to preserve 4px. */
+  --db-snackbar-border-radius: var(--db-radius-sm);
+
+  /* Density */
+  --db-snackbar-spacing-vertical: var(--db-space-3);
+  --db-snackbar-spacing-horizontal: var(--db-space-4);
+  --db-snackbar-close-button-spacing: var(--db-space-2);
+
+  /* Color */
+  /* No v1/v2 system token holds this theme-invariant white. TODO(FEINF-6505): adopt a v2 system token when one is added. */
+  --db-snackbar-text: #ffffff;
+  /* No v1/v2 system token holds these theme-invariant close-icon colors. TODO(FEINF-6505): adopt a v2 system token when one is added. */
+  --db-snackbar-close-icon: #e8ecf0;
+  --db-snackbar-close-icon-hover: #8acaff;
+  --db-snackbar-close-icon-active: #bae1fc;
+}
+
+:where(.du-bois-dark) {
+  /* Color */
+  /* No v1/v2 system token holds this light/dark surface pair. TODO(FEINF-6505): adopt a v2 system token when one is added. */
+  --db-snackbar-surface: #445461;
+
+  /* Elevation */
+  /* No v1/v2 system token holds this dark shadow; --db-elevation-med is theme-invariant (light). TODO(FEINF-6505): adopt a v2 system token when one is added. */
+  --db-snackbar-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.61);
+}
+
+/* Spacer's height is a spacing step. The size prop (xs/sm/mid/md/lg) selects one component token,
+ * each aliasing the system space scale — theme-invariant, so a single block (no light/dark split). */
+
+:where(.du-bois-dark) {
+  /* Density */
+  --db-spacer-size-xs: var(--db-space-1); /* 4px */
+  --db-spacer-size-sm: var(--db-space-2); /* 8px */
+  --db-spacer-size-mid: var(--db-space-3); /* 12px */
+  --db-spacer-size-md: var(--db-space-4); /* 16px */
+  --db-spacer-size-lg: var(--db-space-6); /* 24px */
+}
+
+
+
 :where(.du-bois-dark) {
   /* Shape */
   --db-switch-border-radius: var(--db-radius-full);
@@ -16800,20 +17186,20 @@ span.du-bois-dark-typography-ellipsis-single-line {
   /* 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-active: 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-checked-active: var(--db-selection-toggle-surface-checked-active);
   --db-switch-surface-disabled: var(--db-selection-toggle-surface-disabled);
   --db-switch-surface-checked-disabled: var(--db-color-action-disabled-text);
 
   --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-active: var(--db-selection-toggle-border-active);
   --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-checked-active: var(--db-selection-toggle-surface-checked-active);
   --db-switch-border-focus: var(--db-selection-toggle-surface-checked);
 
   --db-switch-thumb: var(--db-selection-toggle-surface);
@@ -16854,168 +17240,79 @@ span.du-bois-dark-typography-ellipsis-single-line {
  * so Chromium can hash-reject it instead of attempting the match against every element on every
  * recalc (the leading/middle :is() groups aren't the key selector, so they're left as-is). */
 
-/* Component-tier tokens for the native <Button>, grouped by area (density, shape, typography, color).
- * Colors alias the action-* system tokens; sizes alias the system density scale.
- *
- * Follows the mortar/action.css pattern: one semantic set (surface / border / text, each with
- * -hover / -press / -disabled) whose defaults are the secondary variant. The variant classes that
- * re-set these tokens per variant live in NativeButton.css; this file declares only tokens. */
-
-/* Declared under the theme classes too (not just :root) so the var() chain re-resolves inside a
- * `.du-bois-dark` subtree (or a portal that re-applies the theme class) instead of freezing at the root values. */
+/* Component tokens for Tabs (no family). Re-declared under the theme classes, not only :root, so the
+ * var() chain re-resolves inside a .du-bois-dark subtree instead of freezing at the light value. */
 :where(.du-bois-dark) {
   /* ── Density ──────────────────────────────────────────────────────────── */
-  --db-btn-height: var(--db-size-8);
-  --db-btn-height-small: var(--db-size-6);
-  --db-btn-icon-size: var(--db-size-4);
-  --db-btn-border-width: 1px;
-  --db-btn-padding-vertical: var(--db-space-1);
-  --db-btn-padding-horizontal: var(--db-space-3);
-  --db-btn-padding-horizontal-small: var(--db-space-2);
-  /* Icon/force-icon horizontal padding: half the standard horizontal padding. */
-  --db-btn-padding-horizontal-icon: calc(var(--db-space-3) / 2); /* 6px */
-  --db-btn-gap: var(--db-space-1);
-  --db-btn-end-icon-gap: var(--db-space-2);
-  --db-btn-end-icon-gap-small: var(--db-space-1);
-  /* Width of a content-less button while loading, so the standalone spinner has room. */
-  --db-btn-loading-empty-width: var(--db-size-10);
+  --db-tabs-height: var(--db-size-8);
+  --db-tabs-trigger-min-width: var(--db-size-6);
+  --db-tabs-trigger-min-width-closable: var(--db-size-10);
+  --db-tabs-list-margin-bottom: var(--db-space-4);
+  --db-tabs-trigger-gap: var(--db-space-4);
+  --db-tabs-trigger-padding-top: var(--db-space-1);
+  --db-tabs-trigger-padding-bottom: var(--db-space-2);
+  --db-tabs-close-icon-gap: var(--db-space-1);
+  --db-tabs-add-button-margin-top: var(--db-space-0-5);
+  /* No 1.5-unit space step exists; synthesize 6px from the nearest. TODO: use a direct step if one lands. */
+  --db-tabs-add-button-margin-bottom: calc(var(--db-space-1) * 1.5);
 
   /* ── Shape ────────────────────────────────────────────────────────────── */
-  --db-btn-border-radius: var(--db-shape-control);
+  --db-tabs-scrollbar-radius: var(--db-shape-control);
+  --db-tabs-focus-ring-width: var(--db-focus-ring-width);
 
   /* ── Typography ───────────────────────────────────────────────────────── */
-  --db-btn-font-size: var(--db-font-size-base);
-  --db-btn-icon-only-font-size: var(--db-font-size-lg); /* 15px */
-  --db-btn-font-weight: var(--db-font-weight-normal);
-  /* Line heights are hard-coded until the typography scale ships computed per-level line-height tokens. */
-  --db-btn-line-height: 1.25rem; /* 20px */
-  --db-btn-line-height-small: 1rem; /* 16px */
+  --db-tabs-font-size: var(--db-font-size-base);
+  --db-tabs-font-weight: var(--db-font-weight-semibold);
+  /* No v2 token holds the tab line-height yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-tabs-line-height: 1.25rem;
 
-  /* ── Color: semantic set (defaults = secondary variant) ───────────────── */
-  --db-btn-surface: var(--db-color-action-default-background-default);
-  --db-btn-surface-hover: var(--db-color-action-default-background-hover);
-  --db-btn-surface-press: var(--db-color-action-default-background-press);
-  --db-btn-surface-disabled: transparent;
-  --db-btn-border: var(--db-color-action-default-border-default);
-  --db-btn-border-hover: var(--db-color-action-default-border-hover);
-  --db-btn-border-press: var(--db-color-action-default-border-press);
-  --db-btn-border-disabled: var(--db-color-action-disabled-border);
-  --db-btn-text: var(--db-color-action-default-text-default);
-  --db-btn-text-hover: var(--db-color-action-default-text-hover);
-  --db-btn-text-press: var(--db-color-action-default-text-press);
-  --db-btn-text-disabled: var(--db-color-action-disabled-text);
-
-  /* ── Focus & icon ─────────────────────────────────────────────────────── */
-  --db-btn-focus-ring: var(--db-color-action-default-border-focus);
-  --db-btn-danger-focus-ring: var(--db-color-action-danger-primary-background-default);
-  --db-btn-icon-glyph: var(--db-color-text-secondary);
+  /* ── Color ────────────────────────────────────────────────────────────── */
+  /* No v2 token holds the tab text / hover / press / active / disabled colors yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-tabs-text: var(--db-color-text-secondary);
+  --db-tabs-text-hover: var(--db-color-action-default-text-hover);
+  --db-tabs-text-press: var(--db-color-action-default-text-press);
+  --db-tabs-text-active: var(--db-color-text-primary);
+  --db-tabs-text-disabled: var(--db-color-action-disabled-text);
+  /* No v2 token holds the tab panel content text color yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-tabs-content-text: var(--db-color-text-primary);
+  /* No v2 token holds the active-tab underline yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-tabs-indicator: var(--db-color-action-primary-background-default);
+  /* No v2 token holds the list divider yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-tabs-border: var(--db-color-action-default-border-default);
+  /* No v2 token holds the focus ring color yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-tabs-focus-ring: var(--db-color-action-default-border-focus);
 }
 
-/* Native <Button> visual styles. Consumes the component-tier `--db-btn-*` tokens (see tokens.css);
- * the variant classes below re-set those tokens per variant and the rules that follow paint them.
- * Shipped via mortar.css. */
-
-/* ── 0. Variant token re-sets ──────────────────────────────────────────────
- * Each variant class re-sets the semantic tokens declared in tokens.css; combined classes win by
- * specificity, which beats the `:where(:root)` (specificity 0) defaults regardless of file order. */
-/* Link is borderless and text-only, so its hover/press surface stays transparent. */
-/* Every danger button (icon included) disables to the filled treatment. */
-/* Danger, filled (primary): re-set only the surface; text/transparent border come from primary. */
-/* Danger, secondary/outlined. */
-/* Danger, tertiary/link: danger text everywhere, danger surface on hover/press; resting/disabled
- * surface stay the tertiary ghost (override the filled danger-disabled set above). */
-/* Icon-only renders as the ghost (tertiary) treatment regardless of variant; re-set the semantic set
- * so the icon-only rules paint from these component tokens. */
-/* Danger icon-only keeps the ghost resting surface (inherited above) but uses danger text and a
- * danger hover/press surface. */
-
-/* ── 1. Base — paints the default (secondary) variant ────────────────────── */
-
-/* ── 2. Padding ──────────────────────────────────────────────────────────── */
-
-/* ── 3. Interactive states ───────────────────────────────────────────────── */
-
-/* ── 4. Focus ────────────────────────────────────────────────────────────── */
-
-/* ── 5. Small / full-width / empty ────────────────────────────────────────── */
-
-/* ── 6. Tertiary & link ──────────────────────────────────────────────────── */
-/* Re-declare the text color for a non-icon-only tertiary/link at two-class weight so a plain
- * call-site `color` override loses; an icon-only glyph stays at base weight so its override wins. */
-/* Keep the resting border at two-class weight (parity with the shielded border-color). */
-
-/* ── 7. Danger ───────────────────────────────────────────────────────────── */
-
-/* ── 8. Icon-only ────────────────────────────────────────────────────────── */
-/* `:where()` keeps this at (0,1,0) so a call-site `css` width override wins, as it does for `height`. */
-/* `:where()` on the exclusion holds this at (0,2,0): enough to tint an un-overridden icon-only link
- * over the base color, while still letting a consumer's own icon-color override win on source order. */
-
-/* ── 9. Disabled — base rules paint the per-variant `*-disabled` tokens (see tokens.css) ──────── */
-/* Empty and loading disabled buttons keep a transparent border (set elsewhere), so exclude them.
- * `:where()` on the exclusion holds this at (0,2,0): enough to beat the base border, while still
- * letting a consumer's own `[disabled]` border override win on source order. */
-
-/* ── 10. Icon & content layout ───────────────────────────────────────────── */
-/* The leading icon renders unwrapped as the button's direct `.anticon` child (see NativeButton.tsx),
- * so `> .anticon` targets only a real icon glyph — a non-glyph `icon` (e.g. a Spinner) keeps its own
- * sizing — and out-specifies AntD's runtime-injected global `.anticon` rule. */
+/* No v2 token holds the scrollbar thumb yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+:where(.du-bois-dark) {
+  --db-tabs-scrollbar-thumb: rgba(255, 255, 255, 0.2);
+  --db-tabs-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
+}
 
-/* ── 11. Loading ─────────────────────────────────────────────────────────── */
 
-/* ── 12. dangerouslySetForceIconStyles ───────────────────────────────────── */
 
 :where(.du-bois-dark) {
   /* Shape */
-  /* Must not scale with density; no non-scaling system token holds it. TODO(FEINF-6505): adopt a v2 system token when one is added. */
-  --db-navigation-menu-indicator-thickness: 4px;
-  /* No system token holds this control-specific inset. TODO(FEINF-6505): adopt a v2 system token when one is added. */
-  --db-navigation-menu-focus-ring-offset: -1px;
+  --db-toolbar-border-radius: var(--db-shape-control);
 
   /* Color */
-  --db-navigation-menu-indicator: var(--db-accent-surface);
-  --db-navigation-menu-focus-ring: var(--db-focus-ring-color);
-  --db-navigation-menu-text: var(--db-text-subtle);
-  --db-navigation-menu-text-active: var(--db-text-base);
-  /* No v2 semantic for default-action link text yet; bridges on the v1 --db-color-* token. */
-  --db-navigation-menu-text-hover: var(--db-color-action-default-text-hover);
-  --db-navigation-menu-text-press: var(--db-color-action-default-text-press);
+  --db-toolbar-surface: var(--db-surface-subtle);
+  --db-toolbar-border: var(--db-border-base);
+  --db-toolbar-separator-surface: var(--db-border-base);
+  --db-toolbar-toggle-item-text: var(--db-text-base);
+  /* No v2 token holds the toggle hover / press text yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-toolbar-toggle-item-text-hover: var(--db-color-action-default-text-hover);
+  --db-toolbar-toggle-item-text-press: var(--db-color-action-default-text-press);
+  --db-toolbar-shadow: var(--db-elevation-med);
 
   /* Density */
-  --db-navigation-menu-item-height: var(--db-size-8);
-  --db-navigation-menu-item-min-width: var(--db-size-6);
-  --db-navigation-menu-link-padding-top: var(--db-space-1);
-  --db-navigation-menu-link-padding-bottom: var(--db-space-2);
-  --db-navigation-menu-focus-ring-width: var(--db-focus-ring-width);
-}
-
-:where(.du-bois-dark) {
-  /* Shape */
-  /* TODO(FEINF-6505): adopt --db-shape-container-* once a 4px container radius exists; kept on --db-radius-sm to preserve 4px. */
-  --db-snackbar-border-radius: var(--db-radius-sm);
-
-  /* Density */
-  --db-snackbar-spacing-vertical: var(--db-space-3);
-  --db-snackbar-spacing-horizontal: var(--db-space-4);
-  --db-snackbar-close-button-spacing: var(--db-space-2);
-
-  /* Color */
-  /* No v1/v2 system token holds this theme-invariant white. TODO(FEINF-6505): adopt a v2 system token when one is added. */
-  --db-snackbar-text: #ffffff;
-  /* No v1/v2 system token holds these theme-invariant close-icon colors. TODO(FEINF-6505): adopt a v2 system token when one is added. */
-  --db-snackbar-close-icon: #e8ecf0;
-  --db-snackbar-close-icon-hover: #8acaff;
-  --db-snackbar-close-icon-press: #bae1fc;
+  --db-toolbar-gap: var(--db-space-4);
+  --db-toolbar-spacing: var(--db-space-2);
 }
 
 :where(.du-bois-dark) {
-  /* Color */
-  /* No v1/v2 system token holds this light/dark surface pair. TODO(FEINF-6505): adopt a v2 system token when one is added. */
-  --db-snackbar-surface: #445461;
-
-  /* Elevation */
-  /* No v1/v2 system token holds this dark shadow; --db-elevation-med is theme-invariant (light). TODO(FEINF-6505): adopt a v2 system token when one is added. */
-  --db-snackbar-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.61);
+  /* No v2 token holds the dark-mode elevation shadow yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-toolbar-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.61);
 }
 
 /* Tooltip renders an inverted surface (dark chip in light mode, light chip in dark mode), so it does
@@ -17042,7 +17339,7 @@ span.du-bois-dark-typography-ellipsis-single-line {
   /* Darker v1 blue primitives than light mode — the chip is light here, so links need contrast. */
   --db-tooltip-link-text: #2272b4; /* blue600 */
   --db-tooltip-link-text-hover: #0e538b; /* blue700 */
-  --db-tooltip-link-text-press: #04355d; /* blue800 */
+  --db-tooltip-link-text-active: #04355d; /* blue800 */
 
   /* Elevation */
   /* v2 elevation tokens are theme-invariant, so --db-elevation-med would keep the light shadow here.
@@ -17050,32 +17347,3 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-tooltip-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.61);
 }
 
-/* Declared under the theme classes too (not just :root) so the var() chain re-resolves inside a
- * `.du-bois-dark` subtree instead of freezing at the light values. */
-:where(.du-bois-dark) {
-  /* Shape */
-  --db-progress-border-radius: var(--db-shape-pill);
-
-  /* Color */
-  --db-progress-track: var(--db-color-progress-track);
-  --db-progress-fill: var(--db-color-progress-fill);
-
-  /* Density */
-  --db-progress-size: var(--db-size-2);
-
-  /* Motion */
-  /* No v2 motion token holds this duration. TODO(FEINF-6505): adopt a v2 motion token when one is added. */
-  --db-progress-transition-duration: 300ms;
-}
-
-:where(.du-bois-dark) {
-  /* Color */
-  /* No v2 token holds tertiary action-text states yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
-  --db-overflow-trigger-text: var(--db-color-action-tertiary-text-default);
-  --db-overflow-trigger-text-hover: var(--db-color-action-tertiary-text-hover);
-  --db-overflow-trigger-text-press: var(--db-color-action-tertiary-text-press);
-
-  /* Density */
-  --db-overflow-spacing: var(--db-space-2);
-  --db-overflow-menu-spacing: var(--db-space-1);
-}