@databricks/design-system 2.0.9 → 2.0.10

package/dist/index-dark.css

@@ -16292,39 +16292,39 @@ span.du-bois-dark-typography-ellipsis-single-line {
   /* Neutral */
   --db-surface-base: var(--db-color-background-primary);
   --db-surface-subtle: var(--db-color-background-secondary);
-  --db-surface-strong: initial; /* TODO */
+  --db-surface-strong: #37444f;
 
-  --db-surface-inverse: initial; /* TODO */
+  --db-surface-inverse: var(--db-color-tooltip-background-tooltip);
   --db-surface-active: var(--db-color-table-background-selected-default);
   --db-surface-hover: var(--db-color-table-background-unselected-hover);
   --db-surface-disabled: var(--db-color-action-disabled-background);
 
   --db-surface-selected: var(--db-color-table-background-selected-hover);
-  --db-surface-selected-hover: initial; /* TODO */;
+  --db-surface-selected-hover: var(--db-color-table-background-selected-hover);
   --db-surface-selected-active: var(--db-color-table-background-selected-hover); /* no distinct active value */
 
   /* Surface alpha-blending modifiers */
-  --db-surface-backdrop: initial; /* TODO */;
+  --db-surface-backdrop: var(--db-color-overlay-overlay);
   /* TODO: surface-tint for containers that distinguish some content */
 
   --db-text-base: var(--db-color-text-primary);
   --db-text-subtle: var(--db-color-text-secondary);
-  --db-text-strong: initial; /* TODO */
+  --db-text-strong: var(--db-color-text-primary);
   --db-text-disabled: var(--db-color-action-disabled-text);
-  --db-text-suggestion: initial; /* TODO - e.g. input placeholder, loading text */
-  --db-text-inverse: initial; /* TODO, stark contrast e.g. tooltip text */
+  --db-text-suggestion: var(--db-color-text-placeholder);
+  --db-text-inverse: var(--db-color-tooltip-text-tooltip);
 
   --db-border-base: var(--db-color-border);
-  --db-border-subtle: initial; /* TODO */
+  --db-border-subtle: #ffffff0f;
   --db-border-strong: var(--db-color-border-accessible);
-  --db-border-hover: initial; /* TODO */
-  --db-border-active: initial; /* TODO */
-  --db-border-disabled: initial; /* TODO */
+  --db-border-hover: #a3a3a3;
+  --db-border-active: #d4d4d4;
+  --db-border-disabled: var(--db-color-action-disabled-border);
 
   /* Accent */
   --db-accent-surface: var(--db-color-action-primary-background-default);
   --db-accent-surface-subtle: var(--db-color-action-default-background-hover);
-  --db-accent-surface-strong: var(--db-color-action-primary-background-hover);
+  --db-accent-surface-strong: var(--db-color-action-primary-background-default);
 
   --db-accent-surface-hover: var(--db-color-action-primary-background-hover);
   --db-accent-surface-active: var(--db-color-action-primary-background-press); /* no distinct active value */
@@ -16335,56 +16335,56 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-text-on-accent-surface: var(--db-color-action-primary-text-default);
 
   --db-accent-border: var(--db-color-action-primary-background-default);
-  --db-accent-border-hover: var(--db-color-action-primary-background-press);
-  --db-accent-border-active:  initial; /* TODO */;
+  --db-accent-border-hover: var(--db-color-action-primary-background-hover);
+  --db-accent-border-active: var(--db-color-action-primary-background-press);
 
   /* Negative */
   --db-negative-surface: var(--db-color-action-danger-primary-background-default);
   --db-negative-surface-subtle: var(--db-color-background-danger);
-  --db-negative-surface-strong: var(--db-color-action-danger-primary-background-hover);
+  --db-negative-surface-strong: var(--db-color-action-danger-primary-background-default);
 
   --db-negative-surface-hover: var(--db-color-action-danger-primary-background-hover);
   --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-surface-selected: #9e102c;
 
   --db-negative-text: var(--db-color-text-validation-danger);
   --db-text-on-negative-surface: var(--db-color-action-danger-primary-text);
 
   --db-negative-border: var(--db-color-action-danger-default-border-default);
-  --db-negative-border-hover: initial; /* TODO */
-  --db-negative-border-active: initial; /* TODO */
+  --db-negative-border-hover: var(--db-color-action-danger-default-border-hover);
+  --db-negative-border-active: var(--db-color-action-danger-default-border-press);
 
   /* Caution */
-  --db-caution-surface: initial; /* TODO */
+  --db-caution-surface: #5f1b02;
   --db-caution-surface-subtle: var(--db-color-background-warning);
-  --db-caution-surface-strong: initial; /* TODO */
+  --db-caution-surface-strong: #de7921;
 
-  --db-caution-surface-hover: initial; /* TODO */
-  --db-caution-surface-active: initial; /* TODO */
-  --db-caution-surface-selected: initial; /* TODO */
+  --db-caution-surface-hover: #f2be88;
+  --db-caution-surface-active: #f8d4a5;
+  --db-caution-surface-selected: #93320b;
 
   --db-caution-text: var(--db-color-text-validation-warning);
-  --db-text-on-caution-surface: initial; /* TODO */
+  --db-text-on-caution-surface: #11171c;
 
   --db-caution-border: var(--db-color-border-warning);
-  --db-caution-border-hover: initial; /* TODO */
-  --db-caution-border-active: initial; /* TODO */
+  --db-caution-border-hover: #f2be88;
+  --db-caution-border-active: #f8d4a5;
 
   /* Positive */
-  --db-positive-surface: initial; /* TODO */
+  --db-positive-surface: #093919;
   --db-positive-surface-subtle: var(--db-color-background-success);
-  --db-positive-surface-strong: initial; /* TODO */
+  --db-positive-surface-strong: #3ba65e;
 
-  --db-positive-surface-hover: initial; /* TODO */
-  --db-positive-surface-active: initial; /* TODO */
-  --db-positive-surface-selected: initial; /* TODO */
+  --db-positive-surface-hover: #8ddda8;
+  --db-positive-surface-active: #b1ecc5;
+  --db-positive-surface-selected: #115026;
 
   --db-positive-text: var(--db-color-text-validation-success);
-  --db-text-on-positive-surface: initial; /* TODO */
+  --db-text-on-positive-surface: #11171c;
 
-  --db-positive-border: initial; /* TODO */
-  --db-positive-border-hover: initial; /* TODO */
-  --db-positive-border-active: initial; /* TODO */
+  --db-positive-border: #8ddda8;
+  --db-positive-border-hover: #3ba65e;
+  --db-positive-border-active: #8ddda8;
 
   /* Branded (theme-invariant — same values as light) */
   --db-ai-gradient-start: #4299e0;
@@ -16439,7 +16439,7 @@ span.du-bois-dark-typography-ellipsis-single-line {
 
   /* TODO: media query for mobile font sizes */
 
-  /* Du Bois v1 ships 400 and 600 only */
+  /* dbui v1 ships 400 and 600 only */
   --db-font-weight-normal: 400;
   --db-font-weight-medium: initial; /*  TODO */
   --db-font-weight-semibold: 600;
@@ -16470,14 +16470,13 @@ span.du-bois-dark-typography-ellipsis-single-line {
 
 :where(.du-bois-dark) {
   /* Shape */
-  /* Mirrors the ShapeTokens host-override var used by Card; falls back to the theme radius. */
-  --db-card-border-radius: var(--info-container-border-radius, 8px);
+  --db-card-border-radius: var(--db-radius-md);
 
   /* Color */
   --db-card-surface: var(--db-surface-base);
   --db-card-text: var(--db-text-base);
   --db-card-border: var(--db-border-base);
-  --db-card-border-hover: var(--db-border-strong);
+  --db-card-border-hover: var(--db-color-action-default-border-hover);
 }
 
 :where(.du-bois-dark) {
@@ -16556,6 +16555,88 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-selection-toggle-transition-duration: 120ms;
 }
 
+/*
+  Shared token primitives for the input family: the text Input and input-like controls such as
+  DatePicker and TypeaheadCombobox.
+ */
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-input-border-radius: var(--input-border-radius, 4px); /* From design-system/src/design-system/shape-tokens.ts */
+  --db-input-border-width: 1px;
+
+  /* Color */
+  --db-input-surface: transparent;
+  --db-input-surface-disabled: var(--db-surface-disabled);
+  --db-input-surface-locked: var(--db-surface-subtle); /* Read-only "locked" fill (v2 → v1 background-secondary). */
+  --db-input-addon-surface: var(--db-surface-subtle); /* Bordered addon-cell fill. */
+
+  --db-input-text: var(--db-text-base);
+  --db-input-text-placeholder: var(--db-color-text-placeholder);
+  --db-input-text-disabled: var(--db-text-disabled);
+  --db-input-text-affix: var(--db-text-subtle); /* prefix & suffix connect, typically icons */
+
+  --db-input-border: var(--db-color-action-default-border-default);
+  --db-input-border-hover: var(--db-accent-surface-hover);
+  --db-input-border-focus: var(--db-focus-ring-color);
+  --db-input-border-disabled: var(--db-color-action-disabled-border);
+  --db-input-border-error: var(--db-negative-surface);
+  --db-input-border-warning: var(--db-caution-text);
+  --db-input-border-success: var(--db-positive-text);
+
+  /* Density */
+  --db-input-height: var(--db-size-8);
+  --db-input-height-small: var(--db-size-6);
+
+  --db-input-spacing-vertical: calc(var(--db-space-1) * 1.25); /* Scale to match Du Bois v1 */
+  --db-input-spacing-horizontal: calc(var(--db-space-2) * 1.5); /* Scale to match Du Bois v1 */
+  --db-input-spacing-vertical-small: 0;
+  --db-input-spacing-horizontal-small: var(--db-space-2);
+
+  --db-input-affix-gap: var(--db-space-2); /* Gap between an affix (prefix/suffix) and the input value. */
+
+  /* Typography */
+  --db-input-font-size: var(--db-font-size-base);
+  --db-input-line-height: calc(20 / 13); /* 20:13 ratio scales with the user's text-size setting. */
+}
+
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-menu-border-radius: var(--db-popup-border-radius);
+  --db-menu-separator-height: 1px;
+  /* No token for the control-specific focus inset. TODO(FEINF-6188): adopt a v2 token when one lands. */
+  --db-menu-item-focus-ring-offset: -1px;
+
+  /* Color */
+  --db-menu-surface: var(--db-popup-surface);
+  --db-menu-text: var(--db-popup-text);
+  --db-menu-border: var(--db-popup-border);
+  --db-menu-separator: var(--db-border-base);
+  /* No v2 token holds the action-tint item highlight yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-menu-item-surface-hover: var(--db-color-action-tertiary-background-hover);
+  --db-menu-item-focus-ring: var(--db-focus-ring-color);
+  --db-menu-item-text-disabled: var(--db-list-item-text-disabled);
+  --db-menu-meta-text: var(--db-text-subtle);
+  --db-menu-info-icon-text: var(--db-text-subtle);
+
+  /* Density */
+  --db-menu-content-padding-vertical: var(--db-space-1);
+  --db-menu-item-padding-horizontal: var(--db-space-3);
+  /* No exact density step for 6px. TODO(FEINF-6188): adopt a direct step if the scale adds one. */
+  --db-menu-item-padding-vertical: calc(var(--db-space-1) * 1.5);
+  --db-menu-separator-margin-vertical: var(--db-space-1);
+  --db-menu-separator-margin-horizontal: var(--db-space-2);
+  --db-menu-info-icon-padding-start: var(--db-space-1);
+  --db-menu-item-focus-ring-width: var(--db-focus-ring-width);
+
+  /* Typography */
+  --db-menu-meta-font-size: var(--db-font-size-sm);
+}
+
+:where(.du-bois-dark) {
+  /* No v2 system token holds the dark popup shadow; --db-elevation-med carries the light value in both themes. TODO(FEINF-6188): adopt a dark elevation token when one lands. */
+  --db-menu-elevation: 0px 2px 16px 0px rgba(0, 0, 0, 0.61);
+}
+
 :where(.du-bois-dark) {
   /* Shape */
   --db-avatar-border-radius: var(--db-radius-sm);
@@ -16580,6 +16661,22 @@ span.du-bois-dark-typography-ellipsis-single-line {
 }
 
 
+:where(.du-bois-dark) {
+  /* Color */
+  --db-breadcrumb-text: var(--db-accent-text);
+  /* TODO(FEINF-6179): Replace these fallbacks when v2 link-hover and placeholder semantic tokens exist. */
+  --db-breadcrumb-text-hover: var(--db-color-action-link-hover);
+  --db-breadcrumb-separator-text: var(--db-color-text-placeholder);
+  --db-breadcrumb-focus-ring: var(--db-focus-ring-color);
+
+  /* Density and typography */
+  --db-breadcrumb-separator-spacing: var(--db-space-1);
+  --db-breadcrumb-separator-font-size: var(--db-font-size-xl);
+  --db-breadcrumb-icon-size: var(--db-font-size-base);
+}
+
+
+
 /* 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.
  *
@@ -16691,6 +16788,27 @@ span.du-bois-dark-typography-ellipsis-single-line {
 
 /* ── 12. dangerouslySetForceIconStyles ───────────────────────────────────── */
 
+/* Component-tier tokens for Card. Shared surface, text, border, and container radius come from the cards
+ * family (design-tokens/family-tokens/cards-tokens.css); Card-only shape, density, and elevation tokens
+ * live here. Card CSS reads only --db-card-* tokens. */
+
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-card-bar-border-radius: var(--db-radius-sm);
+
+  /* Density */
+  --db-card-padding: var(--db-space-4);
+  --db-card-bar-spacing-vertical: var(--db-space-2);
+  --db-card-content-padding: var(--db-space-6);
+}
+
+:where(.du-bois-dark) {
+  /* Elevation */
+  /* --db-elevation-low is theme-invariant (light values), so re-declare the v1 dark resting/hover
+   * shadows as literals here. TODO(FEINF-6178): adopt v2 elevation tokens when they gain dark values. */
+  --db-card-shadow: 0px 2px 3px -1px rgba(0, 0, 0, 0.45), 0px 1px 0px 0px rgba(0, 0, 0, 0.26);
+  --db-card-shadow-hover: 0px 3px 6px 0px rgba(0, 0, 0, 0.45);
+}
 
 :where(.du-bois-dark) {
   /* Shape */
@@ -16819,7 +16937,94 @@ span.du-bois-dark-typography-ellipsis-single-line {
 
 /* Vertical: .db-stack supplies flex-direction + gap; we only retarget the knob. */
 
+:where(.du-bois-dark) {
+  /* Color */
+  --db-context-menu-label-text: var(--db-text-subtle);
+
+  /* Density */
+  --db-context-menu-label-padding-vertical: calc(var(--db-space-1) * 1.5);
+  --db-context-menu-label-padding-horizontal: var(--db-space-2);
+  --db-context-menu-hint-padding-start: var(--db-space-2);
+  --db-context-menu-item-indicator-padding-end: var(--db-space-1);
+  --db-context-menu-icon-width: var(--db-size-4);
+  --db-context-menu-radio-unchecked-indent: calc(
+    var(--db-context-menu-icon-width) + var(--db-context-menu-item-indicator-padding-end) +
+      var(--db-menu-item-padding-horizontal)
+  );
+  --db-context-menu-checkbox-gap: calc(
+    var(--db-context-menu-icon-width) + var(--db-context-menu-item-indicator-padding-end)
+  );
+}
+
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-dialog-combobox-trigger-border-radius: var(--db-shape-control);
+  --db-dialog-combobox-count-badge-border-radius: var(--db-shape-control);
+
+  /* Color */
+  --db-dialog-combobox-trigger-text: var(--db-text-base);
+  --db-dialog-combobox-trigger-icon: var(--db-text-subtle);
+  --db-dialog-combobox-trigger-text-disabled: var(--db-text-disabled);
+  --db-dialog-combobox-trigger-focus-ring: var(--db-focus-ring-color);
+
+  /* No v2 token holds the action-default trigger border and hover surface yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-dialog-combobox-trigger-border: var(--db-color-action-default-border-default);
+  --db-dialog-combobox-trigger-border-hover: var(--db-color-action-default-border-hover);
+  --db-dialog-combobox-trigger-surface-hover: var(--db-color-action-default-background-hover);
+
+  /* No v2 token holds the disabled trigger surface and border yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-dialog-combobox-trigger-surface-disabled: var(--db-color-action-disabled-background);
+  --db-dialog-combobox-trigger-border-disabled: var(--db-color-action-disabled-border);
+
+  /* No v2 token holds the placeholder text yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-dialog-combobox-trigger-placeholder-text: var(--db-color-text-placeholder);
+
+  /* No v2 token holds the validation-state trigger borders yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-dialog-combobox-trigger-error-border: var(--db-color-action-danger-primary-background-default);
+  --db-dialog-combobox-trigger-warning-border: var(--db-color-text-validation-warning);
+  --db-dialog-combobox-trigger-success-border: var(--db-color-text-validation-success);
+
+  --db-dialog-combobox-option-icon: var(--db-text-subtle);
+  --db-dialog-combobox-option-focus-ring: var(--db-focus-ring-color);
+
+  /* No v2 token holds the tertiary option hover and focus surface yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-dialog-combobox-option-surface-hover: var(--db-color-action-tertiary-background-hover);
+
+  --db-dialog-combobox-hint-text: var(--db-text-subtle);
+  --db-dialog-combobox-hint-text-disabled: var(--db-text-disabled);
+
+  --db-dialog-combobox-search-surface: var(--db-surface-base);
+
+  /* Typography */
+  --db-dialog-combobox-trigger-font-size: var(--db-font-size-base);
+  --db-dialog-combobox-count-badge-font-size: var(--db-font-size-base);
+  --db-dialog-combobox-hint-font-size: var(--db-font-size-sm);
+
+  /* Density */
+  --db-dialog-combobox-trigger-height: var(--db-size-8);
+  --db-dialog-combobox-trigger-height-small: var(--db-size-6);
+  --db-dialog-combobox-trigger-padding-vertical: calc(var(--db-space-2) * 0.75);
+  --db-dialog-combobox-trigger-padding-horizontal: var(--db-space-2);
+  --db-dialog-combobox-trigger-padding-horizontal-start: var(--db-space-3);
+  --db-dialog-combobox-trigger-value-gap: var(--db-space-1);
+  --db-dialog-combobox-trigger-message-spacing: var(--db-space-2);
+
+  --db-dialog-combobox-count-badge-padding-vertical: var(--db-space-0-5);
+  --db-dialog-combobox-count-badge-padding-horizontal: var(--db-space-1);
 
+  --db-dialog-combobox-option-icon-spacing: var(--db-space-2);
+  --db-dialog-combobox-option-info-icon-spacing: var(--db-space-0-5);
+
+  --db-dialog-combobox-search-padding-vertical: var(--db-space-2);
+  --db-dialog-combobox-search-padding-horizontal: var(--db-space-3);
+  --db-dialog-combobox-search-gap: var(--db-space-2);
+}
+
+:where(.du-bois-dark) {
+  /* Color */
+  /* No v2 token holds the count-badge tag surface yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-dialog-combobox-count-badge-surface: #37444f;
+}
 
 :where(.du-bois-dark) {
   /* Density */
@@ -16847,6 +17052,29 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-drawer-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.87);
 }
 
+:where(.du-bois-dark) {
+  /* Color */
+  --db-dropdown-menu-arrow-fill: var(--db-popup-surface);
+  --db-dropdown-menu-arrow-stroke: var(--db-popup-border);
+  --db-dropdown-menu-icon-text: var(--db-text-subtle);
+  --db-dropdown-menu-label-text: var(--db-text-subtle);
+  --db-dropdown-menu-indicator-text: var(--db-text-subtle);
+  /* No v2 token holds the action-tint sub-trigger open state yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-dropdown-menu-subtrigger-surface-open: var(--db-color-action-tertiary-background-hover);
+  --db-dropdown-menu-item-danger-text: var(--db-negative-text);
+  /* No v2 token holds the danger-item hover yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-dropdown-menu-item-danger-surface-hover: var(--db-color-action-danger-default-background-hover);
+
+  /* Density */
+  --db-dropdown-menu-icon-size: var(--db-size-4);
+  --db-dropdown-menu-icon-padding-end: var(--db-space-2);
+  --db-dropdown-menu-indicator-icon-size: var(--db-size-4);
+  --db-dropdown-menu-indicator-offset: calc((var(--db-size-4) + var(--db-space-2)) * -1);
+  --db-dropdown-menu-checkbox-indent: calc(var(--db-size-4) + var(--db-space-3) + var(--db-space-2));
+  --db-dropdown-menu-submenu-icon-size: var(--db-size-6);
+  --db-dropdown-menu-submenu-icon-margin: calc(var(--db-menu-item-padding-vertical) / -2)
+    calc(var(--db-menu-item-padding-vertical) - var(--db-space-2) * 1.5) calc(var(--db-menu-item-padding-vertical) / -2) auto;
+}
 
 :where(.du-bois-dark) {
   /* Color */
@@ -16863,9 +17091,39 @@ span.du-bois-dark-typography-ellipsis-single-line {
 
 
 
+:where(.du-bois-dark) {
+  /* Density */
+  --db-header-title-row-gap: var(--db-space-2);
+  --db-header-title-padding-vertical: var(--db-space-0-5);
+  --db-header-title-margin-top: var(--db-space-0-5);
+  --db-header-breadcrumb-margin-bottom: var(--db-space-1);
+  --db-header-buttons-margin-start: var(--db-space-2);
+  --db-header-title-add-ons-margin-start: var(--db-space-2);
+  --db-header-title-add-ons-gap: var(--db-space-1);
+}
 
 
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-hover-card-border-radius: var(--db-popup-border-radius);
 
+  /* Color */
+  --db-hover-card-surface: var(--db-popup-surface);
+  --db-hover-card-text: var(--db-popup-text);
+  --db-hover-card-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-hover-card-link-text: var(--db-color-action-tertiary-text-default);
+  --db-hover-card-link-text-hover: var(--db-color-action-tertiary-text-hover);
+  --db-hover-card-focus-ring: var(--db-focus-ring-color);
+
+  /* Density */
+  --db-hover-card-padding: var(--db-space-2);
+}
+
+:where(.du-bois-dark) {
+  /* No v2 system token holds the dark popup shadow; --db-elevation-med carries the light value in both themes. TODO(FEINF-6188): adopt a dark elevation token when one lands. */
+  --db-hover-card-elevation: 0px 2px 16px 0px rgba(0, 0, 0, 0.61);
+}
 
 /* Component tokens for the native Icon. */
 :where(.du-bois-dark) {
@@ -16895,6 +17153,86 @@ span.du-bois-dark-typography-ellipsis-single-line {
   }
 }
 
+/*
+  The shared surface for the "input" family of controls: the text Input and input-like controls
+  such as DatePicker and TypeaheadCombobox. A component applies `.db-input` to whichever element
+  carries the border (the <input> itself, or a container wrapping it) and layers its own internal
+  composition on top.
+*/
+
+/* Focus swaps the border for an inset ring so the box does not shift by a pixel. `:focus-within`
+   covers composite controls, where focus lands on an inner element rather than the bordered box. */
+
+/* Locked: read-only, kept legible on a subtle fill (unlike the greyed-out disabled state). */
+
+/* Small: a fixed shorter height with tighter horizontal padding. */
+
+/* Validation state colors the border (and the focus ring) instead of the resting/hover color. */
+
+/*
+  Composition of the native Input and Password, layered on the shared `.db-input` building blocks
+  from `mortar/input.css`.
+*/
+
+/* Affix container: the .db-input border box becomes a flex row holding an optional prefix, the
+   borderless inner <input>, and an optional suffix (a clear button and/or trailing content). */
+
+/* The inner <input> is transparent and borderless; the container owns the border, fill, padding,
+   height, and typography, which the input inherits. */
+
+/* TODO: confirm this doesn't breaks buttons passed as `suffix` content. */
+/* Icon buttons for e.g. clear, password visibility toggle, etc. */
+
+/* AntD renders the clear affix smaller than the standard DS icon (12px vs 16px). Match that here,
+   scoped to the clear button, so the native input stays visually backwards-compatible with the AntD
+   input through the migration. The @ant-design icon is a 1em-sized <svg>, so its font-size sets its
+   box. Color is left on the muted affix token: the DS standardizes muted icons at that grey and has
+   no token for AntD's lighter clear grey (which would also be invisible in dark). */
+
+/* Disabled affix container: :disabled matches only the inner <input>, so the container (which carries
+   the border and fill) takes the disabled treatment via :has(). */
+
+/* Addon group: lays the addon cell and the field out as one joined, full-width control; the field
+   flexes to fill. Distinct from the button group (`.db-input-group`, group/NativeGroup.css) — that
+   one shrinks to its content, whereas an addon-input stays full width like a plain field. */
+
+/* Addon: a bordered cell holding the input's `addonBefore` content — a static label that sits just
+   outside the field's border and joins seamlessly to it (e.g. a `#` prefix or a fixed path prefix). */
+
+/* Seam between the addon and the field: square the touching corners and drop the doubled border. */
+
+/*
+  Native TextArea specifics, layered on the shared `.db-input` surface from `mortar/input.css`:
+  block layout, vertical resize, and auto-grow via CSS `field-sizing` where the browser supports it
+  (the component falls back to JS measurement otherwise).
+*/
+
+/* Auto-grow controls the height, so manual resizing is disabled. */
+
+/*
+  Input group composes an input and a button in one seamless control.
+  A `buttonSide` prop (left == start, right == end) controls which side the button appears.
+
+  Avoid direct-child selectors (`>`) here, as there may be intermediate elements with `display: contents`.
+*/
+/* A button group shrinks to its content (an inline-flex box is auto-width), like the AntD group. */
+
+/* The field grows to fill the group but keeps its own width as the flex basis, so the auto-width
+   group doesn't collapse the field to its content. */
+
+/* A disabled field hides its border so the disabled button's border is the group's only seam line;
+   the field then shows just its disabled fill, matching the AntD group (which drops the border here).
+   Transparent rather than removed keeps the field's box the same size as when enabled. */
+
+/*
+  A *compact* input group collapses spacing and borders between the input and adjacent button.
+  We un-round the border-radius so the input and the button seamlessly fit together.
+  We target buttons that are not contained within .db-input-affix-container to avoid
+    affecting prefix/suffix icon buttons.
+*/
+
+/* Lift the hovered or focused member so its border and focus ring paint over the shared seam. */
+
 
 :where(.du-bois-dark) {
   /* Shape */
@@ -16912,6 +17250,43 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-listbox-empty-spacing-vertical: calc(var(--db-space-2) * 0.75);
 }
 
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-modal-border-radius: var(--info-container-border-radius, 12px);
+  --db-modal-overlay-border-radius: var(--db-radius-sm);
+
+  /* Color */
+  --db-modal-surface: var(--db-surface-base);
+  --db-modal-text: var(--db-text-base);
+  /* No v2 token holds the overlay scrim yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-modal-overlay-surface: var(--db-color-overlay-overlay);
+  --db-modal-danger-icon: var(--db-negative-text);
+
+  /* Density */
+  --db-modal-content-padding-bottom: var(--db-space-6);
+  --db-modal-header-padding-top: var(--db-space-4);
+  --db-modal-header-padding-right: var(--db-space-4);
+  --db-modal-header-padding-bottom: var(--db-space-4);
+  --db-modal-header-padding-left: var(--db-space-6);
+  --db-modal-title-padding-right: var(--db-space-6);
+  --db-modal-title-padding-right-non-closable: var(--db-space-2);
+  --db-modal-body-padding-horizontal: var(--db-space-6);
+  --db-modal-body-padding-vertical: var(--db-space-2);
+  --db-modal-footer-padding-top: var(--db-space-4);
+  --db-modal-footer-padding-horizontal: var(--db-space-6);
+  --db-modal-footer-button-gap: var(--db-space-2);
+  --db-modal-close-offset: var(--db-space-4);
+  --db-modal-mobile-margin: var(--db-space-2);
+
+  /* Typography */
+  --db-modal-body-font-size: var(--db-font-size-base);
+}
+
+:where(.du-bois-dark) {
+  /* Elevation */
+  /* No v2 token holds the dark modal elevation yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-modal-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.87);
+}
 
 :where(.du-bois-dark) {
   /* Shape */
@@ -16980,7 +17355,83 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-overflow-menu-spacing: var(--db-space-1);
 }
 
+:where(.du-bois-dark) {
+  /* Density */
+  --db-page-wrapper-spacing-horizontal: var(--db-space-4);
+}
+
+:where(.du-bois-dark) {
+  /* Color */
+  --db-page-wrapper-surface: var(--db-surface-base);
+}
+
+/* PillControl is a Radix RadioGroup rendered as action-shaped pills, so its colors alias the v1
+ * --db-color-action-* semantics (as Button does) rather than the selection-toggle accent family.
+ * Declared under the theme classes too, so the var() chain re-resolves inside a `.du-bois-dark`
+ * subtree instead of freezing at the root values. */
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-pill-control-border-radius: var(--db-shape-pill);
+  --db-pill-control-border-width: 1px;
+
+  /* Color */
+  /* No v2 token holds the action-pill surface yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-pill-control-surface: var(--db-color-action-default-background-default);
+  --db-pill-control-surface-hover: var(--db-color-action-default-background-hover);
+  --db-pill-control-surface-active: var(--db-color-action-default-background-press);
+  --db-pill-control-surface-checked: var(--db-color-action-default-background-press);
+  --db-pill-control-surface-disabled: var(--db-color-action-disabled-background);
+
+  /* No v2 token holds the action-pill border yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-pill-control-border: var(--db-color-action-default-border-default);
+  --db-pill-control-border-hover: var(--db-color-action-link-hover);
+  --db-pill-control-border-active: var(--db-color-action-link-press);
+  --db-pill-control-border-checked: transparent;
+  --db-pill-control-border-checked-hover: var(--db-color-action-link-press);
+  --db-pill-control-border-disabled: var(--db-color-action-disabled-border);
+
+  /* No v2 token holds the action-pill text yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-pill-control-text: var(--db-color-text-primary);
+  --db-pill-control-text-hover: var(--db-color-action-default-text-hover);
+  --db-pill-control-text-active: var(--db-color-action-default-text-press);
+  --db-pill-control-text-checked: var(--db-color-action-default-text-press);
+  --db-pill-control-text-disabled: var(--db-color-action-disabled-text);
+
+  /* No v2 token holds the pill icon colors yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-pill-control-icon: var(--db-color-text-secondary);
+  --db-pill-control-icon-surface-hover: var(--db-color-action-icon-background-hover);
+  --db-pill-control-icon-surface-active: var(--db-color-action-icon-background-press);
+  --db-pill-control-icon-surface-checked: var(--db-color-action-icon-background-press);
+
+  --db-pill-control-focus-ring: var(--db-focus-ring-color);
+
+  /* Density */
+  --db-pill-control-size: var(--db-size-8);
+  --db-pill-control-size-small: var(--db-size-6);
+  --db-pill-control-size-large: calc(var(--db-size-10) * 1.1);
+  --db-pill-control-gap: var(--db-space-2);
+  --db-pill-control-padding-inline: var(--db-space-3);
+  --db-pill-control-padding-inline-small: var(--db-space-2);
+  --db-pill-control-padding-inline-large: var(--db-space-4);
+  --db-pill-control-padding-inline-start-large: calc(var(--db-space-3) / 2);
+  --db-pill-control-icon-gap: var(--db-space-1);
+  --db-pill-control-icon-gap-large: var(--db-space-2);
+  --db-pill-control-icon-surface-padding: var(--db-space-2);
+  --db-pill-control-focus-ring-width: var(--db-focus-ring-width);
+
+  /* Typography */
+  --db-pill-control-font-size: var(--db-font-size-base);
+  --db-pill-control-font-weight: var(--db-font-weight-normal);
 
+  /* Motion */
+  --db-pill-control-transition-duration: 200ms;
+}
+
+:where(.du-bois-dark) {
+  /* Color */
+  /* No v2 token holds the large-size icon chip surface yet (v1 grey650). TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-pill-control-icon-surface: #37444f;
+}
 
 /* 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
@@ -17238,8 +17689,49 @@ 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) {
+  /* Color */
+  /* No v1/v2 token holds this theme-invariant grey. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-resource-status-indicator-text: #5f7281;
+}
+
+
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-sidebar-nav-button-active-border-radius: var(--db-shape-control);
 
+  /* Elevation */
+  /* No v2 token holds this highlight shadow. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-sidebar-edge-highlight-shadow: 0px 0px 8px rgba(0, 0, 0, 0.33);
 
+  /* Color */
+  --db-sidebar-surface: var(--db-surface-base);
+  --db-sidebar-border: var(--db-border-base);
+  --db-sidebar-panel-header-text: var(--db-text-base);
+  --db-sidebar-collapse-button-surface: var(--db-surface-base);
+  --db-sidebar-collapse-button-icon: var(--db-text-subtle);
+  --db-sidebar-collapse-button-focus-ring: var(--db-focus-ring-color);
+  /* No v2 token holds these action colors yet. TODO(FEINF-6505): adopt v2 tokens when they land. */
+  --db-sidebar-nav-button-active-surface: var(--db-color-action-default-background-press);
+  --db-sidebar-nav-button-active-icon: var(--db-color-action-tertiary-text-press);
+  --db-sidebar-border-hover: var(--db-color-action-default-border-hover);
+
+  /* Density */
+  --db-sidebar-nav-gap: var(--db-space-1);
+  --db-sidebar-nav-padding: var(--db-space-1);
+  --db-sidebar-panel-header-min-height: var(--db-size-8);
+  --db-sidebar-panel-header-padding-start: var(--db-space-2);
+  --db-sidebar-panel-header-padding-end: var(--db-space-1);
+  --db-sidebar-panel-header-buttons-gap: var(--db-space-1);
+  --db-sidebar-panel-header-buttons-padding-end: var(--db-space-1);
+  --db-sidebar-panel-header-title-close-button-offset: var(--db-space-6);
+  --db-sidebar-panel-body-padding-horizontal: var(--db-space-2);
+  --db-sidebar-compact-toggle-spacing: var(--db-space-4);
+  --db-sidebar-collapsed-strip-width: var(--db-space-4);
+
+  /* Typography */
+  --db-sidebar-panel-header-font-weight: var(--db-font-weight-semibold);
+}
 
 
 :where(.du-bois-dark) {
@@ -17248,7 +17740,7 @@ span.du-bois-dark-typography-ellipsis-single-line {
 
   /* 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-track-surface: #e8ecf0; /* TODO: --db-surface-disabled */
   --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;
@@ -17268,30 +17760,30 @@ span.du-bois-dark-typography-ellipsis-single-line {
 :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);
+  --db-snack-bar-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);
+  --db-snack-bar-spacing-vertical: var(--db-space-3);
+  --db-snack-bar-spacing-horizontal: var(--db-space-4);
+  --db-snack-bar-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;
+  --db-snack-bar-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;
+  --db-snack-bar-close-icon: #e8ecf0;
+  --db-snack-bar-close-icon-hover: #8acaff;
+  --db-snack-bar-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;
+  --db-snack-bar-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);
+  --db-snack-bar-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,
@@ -17425,6 +17917,42 @@ span.du-bois-dark-typography-ellipsis-single-line {
 }
 
 
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-toggle-button-border-radius: var(--action-border-radius, 4px);
+
+  /* Color */
+  --db-toggle-button-surface: transparent;
+  /* No v2 token holds the action surface tint yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-toggle-button-surface-hover: var(--db-color-action-default-background-hover);
+  --db-toggle-button-surface-selected: var(--db-color-action-default-background-press);
+  /* No v2 token holds the action text yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-toggle-button-text: var(--db-color-action-default-text-default);
+  --db-toggle-button-text-hover: var(--db-color-action-default-text-hover);
+  --db-toggle-button-text-selected: var(--db-color-action-default-text-press);
+  --db-toggle-button-text-disabled: var(--db-color-action-disabled-text);
+  /* No v2 token holds the off-state icon color yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-toggle-button-icon: var(--db-color-text-secondary);
+  /* No v2 token holds the action border yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-toggle-button-border: var(--db-color-action-default-border-default);
+  --db-toggle-button-border-hover: var(--db-color-action-default-border-hover);
+  --db-toggle-button-border-selected: var(--db-color-action-default-border-press);
+  --db-toggle-button-border-disabled: var(--db-color-action-disabled-border);
+  /* No v2 token holds the checkbox-glyph stroke yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-toggle-button-icon-stroke: var(--db-color-border);
+
+  /* Typography */
+  --db-toggle-button-font-size: var(--db-font-size-base);
+
+  /* Density */
+  --db-toggle-button-border-width: 1px;
+  --db-toggle-button-height: var(--db-size-8);
+  --db-toggle-button-height-small: var(--db-size-6);
+  --db-toggle-button-padding-vertical: var(--db-space-1);
+  --db-toggle-button-padding-horizontal: var(--db-space-3);
+  --db-toggle-button-padding-horizontal-small: var(--db-space-2);
+  --db-toggle-button-icon-gap: var(--db-space-1);
+}
 
 :where(.du-bois-dark) {
   /* Shape */
@@ -17481,4 +18009,3 @@ span.du-bois-dark-typography-ellipsis-single-line {
    * Hold the v1 dark shadow as a literal to avoid a regression until elevation gains a dark value. */
   --db-tooltip-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.61);
 }
-