@databricks/design-system 2.0.4 → 2.0.5

package/dist/index.css

@@ -15994,7 +15994,7 @@ span.du-bois-light-typography-ellipsis-single-line {
  */
 .db-stack {
   /* These variables act as the *parameters* for the stack instance. */
-  --db-stack-gap: var(--db-spacing-xs);
+  --db-stack-gap: var(--db-space-4);
   --db-stack-align: stretch;
 
   display: flex;
@@ -16022,7 +16022,7 @@ span.du-bois-light-typography-ellipsis-single-line {
  */
 .db-cluster {
   /* These variables act as the *parameters* for the cluster instance. */
-  --db-cluster-gap: var(--db-spacing-2xs);
+  --db-cluster-gap: var(--db-space-2);
   --db-cluster-align: center;
   --db-cluster-justify: flex-start;
 
@@ -16035,81 +16035,101 @@ span.du-bois-light-typography-ellipsis-single-line {
 
 :where(:root), :where(.du-bois-light) {
   /* Neutral */
-  --db-neutral-surface: var(--db-color-background-primary);
-  --db-subtle-neutral-surface: var(--db-color-background-secondary);
-  --db-strong-neutral-surface: initial; /* TODO */
+  --db-surface-base: var(--db-color-background-primary);
+  --db-surface-subtle: var(--db-color-background-secondary);
+  --db-surface-strong: 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-surface-inverse: initial; /* TODO */
+  --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-neutral-border: var(--db-color-border);
-  --db-subtle-neutral-border: initial; /* TODO */
-  --db-strong-neutral-border: var(--db-color-border-accessible);
+  --db-surface-selected: var(--db-color-table-background-selected-hover);
+  --db-surface-selected-hover: initial; /* TODO */;
+  --db-surface-selected-active: initial; /* TODO */;
 
-  --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);
+  /* Surface alpha-blending modifiers */
+  --db-surface-backdrop: initial; /* TODO */;
+  /* TODO: surface-tint for containers that distinguish some content */
 
-  /* Primary */
-  --db-primary-surface: var(--db-color-action-primary-background-default);
-  --db-subtle-primary-surface: var(--db-color-action-default-background-hover);
-  --db-strong-primary-surface: var(--db-color-action-primary-background-hover);
+  --db-text-base: var(--db-color-text-primary);
+  --db-text-subtle: var(--db-color-text-secondary);
+  --db-text-strong: initial; /* TODO */
+  --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-on-primary-surface: var(--db-color-action-primary-text-default);
-  --db-primary-text-on-neutral-surface: var(--db-color-action-link-default);
-  --db-subtle-text-on-primary-surface: initial; /* TODO */
-  --db-strong-text-on-primary-surface: var(--db-color-action-primary-text-default);
+  --db-border-base: var(--db-color-border);
+  --db-border-subtle: initial; /* TODO */
+  --db-border-strong: var(--db-color-border-accessible);
+  --db-border-hover: initial; /* TODO */
+  --db-border-active: initial; /* TODO */
+  --db-border-disabled: initial; /* TODO */
 
-  --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);
+  /* 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-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);
+  --db-accent-surface-hover: var(--db-color-action-primary-background-hover);
+  --db-accent-surface-active: initial; /* TODO */
+  --db-accent-surface-selected: var(--db-color-action-primary-background-press);
 
-  /* 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);
+  /* In the current design, the text color for an accent surface does not change with hover, active, etc. */
+  --db-accent-text: var(--db-color-action-link-default);
+  --db-text-on-accent-surface: var(--db-color-action-primary-text-default);
 
-  --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-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-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);
+  /* 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-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);
+  --db-negative-surface-hover: var(--db-color-action-danger-primary-background-hover);
+  --db-negative-surface-active: initial; /* TODO */
+  --db-negative-surface-selected: var(--db-color-action-danger-primary-background-press);
 
-  /* Warning */
-  --db-warning-surface: initial; /* TODO */
-  --db-subtle-warning-surface: var(--db-color-background-warning);
+  --db-negative-text: var(--db-color-text-validation-danger);
+  --db-text-on-negative-surface: var(--db-color-action-danger-primary-text);
 
-  --db-text-on-warning-surface: initial; /* TODO */
-  --db-warning-text-on-neutral-surface: var(--db-color-text-validation-warning);
+  --db-negative-border: var(--db-color-action-danger-default-border-default);
+  --db-negative-border-hover: initial; /* TODO */
+  --db-negative-border-active: initial; /* TODO */
 
-  --db-warning-border: var(--db-color-border-warning);
+  /* Caution */
+  --db-caution-surface: initial; /* TODO */
+  --db-caution-surface-subtle: var(--db-color-background-warning);
+  --db-caution-surface-strong: initial; /* TODO */
 
-  /* Success */
-  --db-success-surface: initial; /* TODO */
-  --db-subtle-success-surface: var(--db-color-background-success);
+  --db-caution-surface-hover: initial; /* TODO */
+  --db-caution-surface-active: initial; /* TODO */
+  --db-caution-surface-selected: initial; /* TODO */
 
-  --db-text-on-success-surface: initial; /* TODO */
-  --db-success-text-on-neutral-surface: var(--db-color-text-validation-success);
+  --db-caution-text: var(--db-color-text-validation-warning);
+  --db-text-on-caution-surface: initial; /* TODO */
 
-  --db-success-border: initial; /* TODO */
+  --db-caution-border: var(--db-color-border-warning);
+  --db-caution-border-hover: initial; /* TODO */
+  --db-caution-border-active: initial; /* TODO */
+
+  /* Positive */
+  --db-positive-surface: initial; /* TODO */
+  --db-positive-surface-subtle: var(--db-color-background-success);
+  --db-positive-surface-strong: initial; /* TODO */
+
+  --db-positive-surface-hover: initial; /* TODO */
+  --db-positive-surface-active: initial; /* TODO */
+  --db-positive-surface-selected: initial; /* TODO */
+
+  --db-positive-text: var(--db-color-text-validation-success);
+  --db-text-on-positive-surface: initial; /* TODO */
+
+  --db-positive-border: initial; /* TODO */
+  --db-positive-border-hover: initial; /* TODO */
+  --db-positive-border-active: initial; /* TODO */
 }
 
 
@@ -16118,32 +16138,39 @@ span.du-bois-light-typography-ellipsis-single-line {
   --db-layout-unit: 0.25rem; /* 4px */
   --db-density-scalar: 1;
   --db-size-scalar: 1;
-  --db-spacing-scalar: 1;
+  --db-space-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-size-1: calc(var(--db-layout-unit) * 1 * var(--db-density-scalar) * var(--db-size-scalar)); /* 4px */
+  --db-size-2: calc(var(--db-layout-unit) * 2 * var(--db-density-scalar) * var(--db-size-scalar)); /* 8px */
+  --db-size-3: calc(var(--db-layout-unit) * 3 * var(--db-density-scalar) * var(--db-size-scalar)); /* 12px */
+  --db-size-4: calc(var(--db-layout-unit) * 4 * var(--db-density-scalar) * var(--db-size-scalar)); /* 16px */
+  --db-size-5: calc(var(--db-layout-unit) * 5 * var(--db-density-scalar) * var(--db-size-scalar)); /* 20px */
+  --db-size-6: calc(var(--db-layout-unit) * 6 * var(--db-density-scalar) * var(--db-size-scalar)); /* 24px */
+  --db-size-7: calc(var(--db-layout-unit) * 7 * var(--db-density-scalar) * var(--db-size-scalar)); /* 28px */
+  --db-size-8: calc(var(--db-layout-unit) * 8 * var(--db-density-scalar) * var(--db-size-scalar)); /* 32px */
+  --db-size-10: calc(var(--db-layout-unit) * 10 * var(--db-density-scalar) * var(--db-size-scalar)); /* 40px */
+  --db-size-12: calc(var(--db-layout-unit) * 12 * var(--db-density-scalar) * var(--db-size-scalar)); /* 48px */
 
-  --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 */
+  --db-space-0-5: calc(var(--db-layout-unit) * 0.5 * var(--db-density-scalar) * var(--db-space-scalar)); /* 2px */
+  --db-space-1: calc(var(--db-layout-unit) * 1 * var(--db-density-scalar) * var(--db-space-scalar)); /* 4px */
+  --db-space-2: calc(var(--db-layout-unit) * 2 * var(--db-density-scalar) * var(--db-space-scalar)); /* 8px */
+  --db-space-3: calc(var(--db-layout-unit) * 3 * var(--db-density-scalar) * var(--db-space-scalar)); /* 12px */
+  --db-space-4: calc(var(--db-layout-unit) * 4 * var(--db-density-scalar) * var(--db-space-scalar)); /* 16px */
+  --db-space-6: calc(var(--db-layout-unit) * 6 * var(--db-density-scalar) * var(--db-space-scalar)); /* 24px */
+  --db-space-8: calc(var(--db-layout-unit) * 8 * var(--db-density-scalar) * var(--db-space-scalar)); /* 32px */
+  --db-space-10: calc(var(--db-layout-unit) * 10 * var(--db-density-scalar) * var(--db-space-scalar)); /* 40px */
 }
 
 :where(:root), :where(.du-bois-light) {
   --db-font-family:
     "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --db-numeric-font-family: var(--db-font-family);
   --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-xs: 0.6875rem; /* 11px */
+  --db-font-size-sm: 0.75rem; /* 12px */
   --db-font-size-base: 0.8125rem; /* 13px */
   --db-font-size-md: 0.875rem; /* 14px */
   --db-font-size-lg: 0.9375rem; /* 15px */
@@ -16152,6 +16179,8 @@ span.du-bois-light-typography-ellipsis-single-line {
   --db-font-size-3xl: 1.5rem; /* 24px */
   --db-font-size-4xl: 2rem; /* 32px */
 
+  /* TODO: media query for mobile font sizes */
+
   /* Du Bois v1 ships 400 and 600 only */
   --db-font-weight-normal: 400;
   --db-font-weight-medium: initial; /*  TODO */
@@ -16169,6 +16198,16 @@ span.du-bois-light-typography-ellipsis-single-line {
 :where(:root), :where(.du-bois-light) {
   --db-focus-ring-color: var(--db-color-action-default-border-focus);
   --db-focus-ring-width: 2px;
+  --db-focus-ring-offset: 2px;
+}
+
+:where(:root), :where(.du-bois-light) {
+  --db-shape-control: 4px;
+  --db-shape-control-large: 999px;
+  --db-shape-container-small: 8px;
+  --db-shape-container-medium: 12px;
+  --db-shape-container-large: 16px;
+  --db-shape-pill: 999px;
 }
 
 :where(:root), :where(.du-bois-light) {
@@ -16176,31 +16215,31 @@ span.du-bois-light-typography-ellipsis-single-line {
   --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: var(--db-surface-base);
+  --db-selection-toggle-mark: var(--db-text-on-accent-surface);
+  --db-selection-toggle-text: var(--db-text-base);
+  --db-selection-toggle-border: var(--db-border-strong);
 
-  --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-surface-hover: var(--db-surface-hover);
+  --db-selection-toggle-surface-press: var(--db-surface-selected);
+  --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-disabled: var(--db-surface-disabled);
+  --db-selection-toggle-surface-checked-disabled: var(--db-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-border-hover: var(--db-accent-surface-hover);
+  --db-selection-toggle-border-press: var(--db-accent-surface-selected);
+  --db-selection-toggle-border-disabled: var(--db-border-base);
 
-  --db-selection-toggle-mark-disabled: var(--db-text-on-neutral-surface-disabled);
-  --db-selection-toggle-text-disabled: var(--db-text-on-neutral-surface-disabled);
+  --db-selection-toggle-mark-disabled: var(--db-text-disabled);
+  --db-selection-toggle-text-disabled: var(--db-text-disabled);
 
   --db-selection-toggle-shadow-checked: 0 0 0 1px var(--db-color-action-primary-background-default);
 
   /* Density */
-  --db-selection-toggle-size: var(--db-size-xs);
-  --db-selection-toggle-label-spacing: var(--db-spacing-2xs);
+  --db-selection-toggle-size: var(--db-size-4);
+  --db-selection-toggle-label-spacing: var(--db-space-2);
 
   /* Motion */
   --db-selection-toggle-transition-duration: 120ms;
@@ -16237,8 +16276,8 @@ span.du-bois-light-typography-ellipsis-single-line {
   --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 */
+  --db-checkbox-indeterminate-mark-width: var(--db-size-2); /* 8px */
+  --db-checkbox-indeterminate-mark-height: calc(var(--db-size-1) * 0.75); /* 3px */
 
   /* Motion */
   --db-checkbox-transition-duration: var(--db-selection-toggle-transition-duration);
@@ -16465,7 +16504,7 @@ span.du-bois-light-typography-ellipsis-single-line {
 .db-checkbox.db-checkbox + .du-bois-dark-form-message,
 .db-checkbox.db-checkbox + .du-bois-light-hint + .du-bois-light-form-message,
 .db-checkbox.db-checkbox + .du-bois-dark-hint + .du-bois-dark-form-message {
-  padding-left: var(--db-spacing-sm);
+  padding-left: var(--db-space-6);
   margin-top: 0;
 }
 
@@ -16476,7 +16515,7 @@ span.du-bois-light-typography-ellipsis-single-line {
 .du-bois-dark-hint + .db-checkbox-group.db-checkbox-group,
 .db-checkbox-group.db-checkbox-group + .du-bois-light-form-message,
 .db-checkbox-group.db-checkbox-group + .du-bois-dark-form-message {
-  margin-top: var(--db-spacing-2xs);
+  margin-top: var(--db-space-2);
 }
 
 /* CheckboxGroup layout. Vertical delegates to the `.db-stack` primitive; the
@@ -16533,7 +16572,7 @@ span.du-bois-light-typography-ellipsis-single-line {
   /* 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);
+  --db-radio-mark-size: var(--db-size-1);
 
   /* Motion */
   --db-radio-transition-duration: var(--db-selection-toggle-transition-duration);
@@ -16733,7 +16772,7 @@ span.du-bois-light-typography-ellipsis-single-line {
 .db-radio.db-radio + .du-bois-dark-form-message,
 .db-radio.db-radio + .du-bois-light-hint + .du-bois-light-form-message,
 .db-radio.db-radio + .du-bois-dark-hint + .du-bois-dark-form-message {
-  padding-inline-start: var(--db-spacing-sm);
+  padding-inline-start: var(--db-space-6);
   margin-top: 0;
 }
 
@@ -16749,8 +16788,8 @@ span.du-bois-light-typography-ellipsis-single-line {
 .db-radio-group.db-stack > .db-radio.db-radio + .du-bois-dark-form-message,
 .db-radio-group.db-stack > .db-radio.db-radio + .du-bois-light-hint + .du-bois-light-form-message,
 .db-radio-group.db-stack > .db-radio.db-radio + .du-bois-dark-hint + .du-bois-dark-form-message {
-  margin-top: calc(-1 * var(--db-spacing-2xs));
-  margin-bottom: var(--db-spacing-2xs);
+  margin-top: calc(-1 * var(--db-space-2));
+  margin-bottom: var(--db-space-2);
 }
 
 /* AntD `& > label:last-of-type + hint { marginTop: 0 }`: the last radio has no
@@ -16768,7 +16807,7 @@ span.du-bois-light-typography-ellipsis-single-line {
 .du-bois-dark-hint + .db-radio-group.db-radio-group,
 .db-radio-group.db-radio-group + .du-bois-light-form-message,
 .db-radio-group.db-radio-group + .du-bois-dark-form-message {
-  margin-top: var(--db-spacing-2xs);
+  margin-top: var(--db-space-2);
 }
 
 /* RadioGroup layout. Vertical (the default) delegates flex-direction to the
@@ -16789,7 +16828,7 @@ span.du-bois-light-typography-ellipsis-single-line {
 
 /* AntD `& > label { paddingBottom: sm }`. */
 .db-radio-group.db-stack > .db-radio {
-  padding-bottom: var(--db-spacing-2xs);
+  padding-bottom: var(--db-space-2);
 }
 
 /* AntD `& > label:last-of-type { paddingBottom: 0 }`. */
@@ -16805,7 +16844,7 @@ span.du-bois-light-typography-ellipsis-single-line {
 .db-radio-group.db-stack > .du-bois-light-radio-tile + .du-bois-dark-radio-tile,
 .db-radio-group.db-stack > .du-bois-dark-radio-tile + .du-bois-light-radio-tile,
 .db-radio-group.db-stack > .du-bois-dark-radio-tile + .du-bois-dark-radio-tile {
-  margin-top: var(--db-spacing-xs);
+  margin-top: var(--db-space-4);
 }
 
 /* Horizontal: AntD `getHorizontalRadioGroupStyles` is a TWO-ROW grid (NOT a flex
@@ -16818,7 +16857,7 @@ span.du-bois-light-typography-ellipsis-single-line {
   display: grid;
   grid-template-rows: [label] auto [hint] auto;
   grid-auto-columns: max-content;
-  column-gap: var(--db-spacing-xs);
+  column-gap: var(--db-space-4);
 }
 
 /* Equal column widths: AntD `gridAutoColumns: minmax(0, 1fr)`. */
@@ -16851,14 +16890,14 @@ span.du-bois-light-typography-ellipsis-single-line {
  * the group itself gets a top margin (room above the two-row grid). */
 .db-radio-group--horizontal:has(> .du-bois-light-hint),
 .db-radio-group--horizontal:has(> .du-bois-dark-hint) {
-  margin-top: var(--db-spacing-2xs);
+  margin-top: var(--db-space-2);
 }
 
 /* AntD `&& + form-message { marginTop: sm }` (horizontal): a form-message following
  * the whole group is separated by sm. */
 .db-radio-group--horizontal + .du-bois-light-form-message,
 .db-radio-group--horizontal + .du-bois-dark-form-message {
-  margin-top: var(--db-spacing-2xs);
+  margin-top: var(--db-space-2);
 }
 
 :where(:root), :where(.du-bois-light) {
@@ -16891,8 +16930,8 @@ span.du-bois-light-typography-ellipsis-single-line {
   --db-switch-text-disabled: var(--db-selection-toggle-text-disabled);
 
   /* Density */
-  --db-switch-track-width: calc(var(--db-size-xs) * 1.75); /* 28px */
-  --db-switch-track-height: var(--db-size-xs); /* 16px */
+  --db-switch-track-width: calc(var(--db-size-4) * 1.75); /* 28px */
+  --db-switch-track-height: var(--db-size-4); /* 16px */
   --db-switch-thumb-size: var(--db-switch-track-height);
   --db-switch-label-spacing: var(--db-selection-toggle-label-spacing);
 
@@ -17041,17 +17080,545 @@ span.du-bois-light-typography-ellipsis-single-line {
 }
 
 /* Indent a following hint/message past the track. The class is doubled to out-specify FormMessage's
- * own margin rule. */
-:is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper)
-  + :is(.du-bois-light-hint, .du-bois-dark-hint, .du-bois-light-form-message, .du-bois-dark-form-message), :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper)
+ * own margin rule. Each rule's key (rightmost) selector is a single class, not a multi-item :is(),
+ * 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). */
+:is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .du-bois-light-hint, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .du-bois-dark-hint, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .du-bois-light-form-message, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .du-bois-dark-form-message, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper)
+  + :is(.du-bois-light-hint, .du-bois-dark-hint)
+  + .du-bois-light-form-message, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper)
   + :is(.du-bois-light-hint, .du-bois-dark-hint)
-  + :is(.du-bois-light-form-message, .du-bois-dark-form-message) {
-  padding-inline-start: calc(var(--db-spacing-2xs) + var(--db-switch-track-width));
+  + .du-bois-dark-form-message {
+  padding-inline-start: calc(var(--db-space-2) + var(--db-switch-track-width));
 }
 
-:is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper)
-  + :is(.du-bois-light-form-message, .du-bois-dark-form-message), :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper)
+:is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .du-bois-light-form-message, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .du-bois-dark-form-message, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper)
   + :is(.du-bois-light-hint, .du-bois-dark-hint)
-  + :is(.du-bois-light-form-message, .du-bois-dark-form-message) {
+  + .du-bois-light-form-message, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper)
+  + :is(.du-bois-light-hint, .du-bois-dark-hint)
+  + .du-bois-dark-form-message {
   margin-top: 0;
 }
+
+/* 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. */
+:where(:root), :where(.du-bois-light) {
+  /* ── 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-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);
+}
+
+/* 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. */
+.db-btn-primary {
+  --db-btn-surface: var(--db-color-action-primary-background-default);
+  --db-btn-surface-hover: var(--db-color-action-primary-background-hover);
+  --db-btn-surface-press: var(--db-color-action-primary-background-press);
+  --db-btn-surface-disabled: var(--db-color-action-disabled-border);
+  --db-btn-border: transparent;
+  --db-btn-border-hover: transparent;
+  --db-btn-border-press: transparent;
+  --db-btn-border-disabled: transparent;
+  --db-btn-text: var(--db-color-action-primary-text-default);
+  --db-btn-text-hover: var(--db-color-action-primary-text-hover);
+  --db-btn-text-press: var(--db-color-action-primary-text-press);
+  --db-btn-text-disabled: var(--db-color-action-primary-text-default);
+}
+.db-btn-tertiary,
+.db-btn-link {
+  --db-btn-surface: var(--db-color-action-tertiary-background-default);
+  --db-btn-surface-disabled: var(--db-color-action-tertiary-background-default);
+  --db-btn-border: var(--db-color-action-tertiary-background-default);
+  --db-btn-border-hover: transparent;
+  --db-btn-border-press: transparent;
+  --db-btn-border-disabled: transparent;
+  --db-btn-text: var(--db-color-action-tertiary-text-default);
+  --db-btn-text-hover: var(--db-color-action-tertiary-text-hover);
+  --db-btn-text-press: var(--db-color-action-tertiary-text-press);
+  --db-btn-text-disabled: var(--db-color-action-disabled-text);
+}
+.db-btn-tertiary {
+  --db-btn-surface-hover: var(--db-color-action-tertiary-background-hover);
+  --db-btn-surface-press: var(--db-color-action-tertiary-background-press);
+}
+/* Link is borderless and text-only, so its hover/press surface stays transparent. */
+.db-btn-link {
+  --db-btn-surface-hover: transparent;
+  --db-btn-surface-press: transparent;
+}
+/* Every danger button (icon included) disables to the filled treatment. */
+.db-btn-danger {
+  --db-btn-surface-disabled: var(--db-color-action-disabled-border);
+  --db-btn-border-disabled: transparent;
+  --db-btn-text-disabled: var(--db-color-action-primary-text-default);
+}
+/* Danger, filled (primary): re-set only the surface; text/transparent border come from primary. */
+.db-btn-primary.db-btn-danger:not(.db-btn-icon-only) {
+  --db-btn-surface: var(--db-color-action-danger-primary-background-default);
+  --db-btn-surface-hover: var(--db-color-action-danger-primary-background-hover);
+  --db-btn-surface-press: var(--db-color-action-danger-primary-background-press);
+}
+/* Danger, secondary/outlined. */
+.db-btn-danger:not(.db-btn-primary):not(.db-btn-tertiary):not(.db-btn-link):not(.db-btn-icon-only) {
+  --db-btn-surface: var(--db-color-action-danger-default-background-default);
+  --db-btn-surface-hover: var(--db-color-action-danger-default-background-hover);
+  --db-btn-surface-press: var(--db-color-action-danger-default-background-press);
+  --db-btn-border: var(--db-color-action-danger-default-border-default);
+  --db-btn-border-hover: var(--db-color-action-danger-default-border-hover);
+  --db-btn-border-press: var(--db-color-action-danger-default-border-press);
+  --db-btn-text: var(--db-color-action-danger-default-text-default);
+  --db-btn-text-hover: var(--db-color-action-danger-default-text-hover);
+  --db-btn-text-press: var(--db-color-action-danger-default-text-press);
+}
+/* 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). */
+.db-btn-tertiary.db-btn-danger,
+.db-btn-link.db-btn-danger {
+  --db-btn-surface-hover: var(--db-color-action-danger-default-background-hover);
+  --db-btn-surface-press: var(--db-color-action-danger-default-background-press);
+  --db-btn-surface-disabled: var(--db-color-action-tertiary-background-default);
+  --db-btn-text: var(--db-color-action-danger-default-text-default);
+  --db-btn-text-hover: var(--db-color-action-danger-default-text-hover);
+  --db-btn-text-press: var(--db-color-action-danger-default-text-press);
+  --db-btn-text-disabled: var(--db-color-action-disabled-text);
+}
+/* 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. */
+.db-btn-icon-only {
+  --db-btn-surface: var(--db-color-action-tertiary-background-default);
+  --db-btn-surface-hover: var(--db-color-action-tertiary-background-hover);
+  --db-btn-surface-press: var(--db-color-action-tertiary-background-press);
+  --db-btn-text: var(--db-color-action-tertiary-text-default);
+  --db-btn-text-hover: var(--db-color-action-tertiary-text-hover);
+  --db-btn-text-press: var(--db-color-action-tertiary-text-press);
+}
+/* Danger icon-only keeps the ghost resting surface (inherited above) but uses danger text and a
+ * danger hover/press surface. */
+.db-btn-icon-only.db-btn-danger {
+  --db-btn-surface-hover: var(--db-color-action-danger-default-background-hover);
+  --db-btn-surface-press: var(--db-color-action-danger-default-background-press);
+  --db-btn-text: var(--db-color-action-danger-default-text-default);
+  --db-btn-text-hover: var(--db-color-action-danger-default-text-hover);
+  --db-btn-text-press: var(--db-color-action-danger-default-text-press);
+}
+
+/* ── 1. Base — paints the default (secondary) variant ────────────────────── */
+.db-btn {
+  appearance: none;
+  box-sizing: border-box;
+  position: relative; /* anchors the loading spinner */
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  vertical-align: middle;
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  height: var(--db-btn-height) !important;
+  font-family: inherit;
+  font-size: var(--db-btn-font-size);
+  font-weight: var(--db-btn-font-weight);
+  line-height: var(--db-btn-line-height) !important;
+  text-decoration: none !important;
+  border: var(--db-btn-border-width) solid var(--db-btn-border);
+  border-color: var(--db-btn-border) !important;
+  border-radius: var(--db-btn-border-radius) !important;
+  box-shadow: none !important;
+  background-color: var(--db-btn-surface) !important;
+  color: var(--db-btn-text) !important;
+}
+
+/* ── 2. Padding ──────────────────────────────────────────────────────────── */
+.db-btn.db-btn:where(:not(.db-btn-icon-only, .db-btn-force-icon, .db-btn-link)) {
+  padding: var(--db-btn-padding-vertical) var(--db-btn-padding-horizontal) !important;
+}
+.db-btn.db-btn-small:where(:not(.db-btn-icon-only, .db-btn-force-icon, .db-btn-link)) {
+  padding: 0 var(--db-btn-padding-horizontal-small) !important;
+}
+.db-btn.db-btn-link {
+  padding: 0 !important;
+}
+.db-btn.db-btn-force-icon {
+  padding: 0 var(--db-btn-padding-horizontal-icon) !important;
+}
+
+/* ── 3. Interactive states ───────────────────────────────────────────────── */
+.db-btn:hover:not(:disabled, .db-btn-loading) {
+  background-color: var(--db-btn-surface-hover) !important;
+  border-color: var(--db-btn-border-hover) !important;
+  color: var(--db-btn-text-hover) !important;
+}
+.db-btn:active:not(:disabled, .db-btn-loading) {
+  background-color: var(--db-btn-surface-press) !important;
+  border-color: var(--db-btn-border-press) !important;
+  color: var(--db-btn-text-press) !important;
+}
+
+/* ── 4. Focus ────────────────────────────────────────────────────────────── */
+.db-btn:focus-visible {
+  outline: 2px solid var(--db-btn-focus-ring);
+  outline-offset: -2px;
+}
+.db-btn-primary:focus-visible {
+  outline-offset: 1px;
+}
+.db-btn-use-focus-pseudo-class:focus {
+  outline: 2px solid var(--db-btn-focus-ring);
+  outline-offset: 1px;
+}
+
+/* ── 5. Small / full-width / empty ────────────────────────────────────────── */
+.db-btn-small {
+  height: var(--db-btn-height-small) !important;
+}
+.db-btn-full-width {
+  width: 100%;
+}
+.db-btn-empty {
+  background-color: transparent !important;
+  border-color: transparent !important;
+}
+.db-btn-default.db-btn-empty {
+  color: var(--db-btn-icon-glyph) !important;
+}
+.db-btn-empty.db-btn-loading {
+  width: var(--db-btn-loading-empty-width);
+}
+
+/* ── 6. Tertiary & link ──────────────────────────────────────────────────── */
+.db-btn-link {
+  height: auto !important;
+  border: none !important;
+}
+/* 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. */
+.db-btn-tertiary:not(.db-btn-icon-only),
+.db-btn-link:not(.db-btn-icon-only) {
+  color: var(--db-btn-text) !important;
+}
+/* Keep the resting border at two-class weight (parity with the shielded border-color). */
+.db-btn.db-btn-tertiary,
+.db-btn.db-btn-link {
+  border-color: var(--db-btn-border) !important;
+}
+
+/* ── 7. Danger ───────────────────────────────────────────────────────────── */
+.db-btn-danger:focus-visible {
+  outline-color: var(--db-btn-danger-focus-ring);
+}
+
+/* ── 8. Icon-only ────────────────────────────────────────────────────────── */
+.db-btn-icon-only {
+  padding: 0;
+  border: none !important;
+  background-color: var(--db-btn-surface) !important;
+  font-size: var(--db-btn-icon-only-font-size);
+}
+/* `:where()` keeps this at (0,1,0) so a call-site `css` width override wins, as it does for `height`. */
+.db-btn-icon-only:where(:not(.db-btn-small)) {
+  width: var(--db-btn-height) !important;
+}
+.db-btn-icon-only:not(.db-btn-link, .db-btn-tertiary, [href], :hover, :active, :disabled) {
+  color: var(--db-btn-icon-glyph) !important;
+}
+/* `: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. */
+.db-btn-icon-only[href]:where(:not(.db-btn-tertiary, .db-btn-link, .db-btn-danger, :disabled)) {
+  color: var(--db-btn-text) !important;
+}
+.db-btn-icon-only:where(.db-btn-small) {
+  width: var(--db-btn-height-small);
+}
+.db-btn-icon-only.db-btn-small {
+  line-height: var(--db-btn-line-height-small) !important;
+}
+.db-btn-icon-only:hover:not(:disabled, .db-btn-loading) {
+  background-color: var(--db-btn-surface-hover) !important;
+  color: var(--db-btn-text-hover) !important;
+}
+.db-btn-icon-only:active:not(:disabled, .db-btn-loading) {
+  background-color: var(--db-btn-surface-press) !important;
+  color: var(--db-btn-text-press) !important;
+}
+.db-btn-icon-only:enabled:not(.db-btn-primary, .db-btn-tertiary, .db-btn-link, .db-btn-danger, :hover, :active)
+  > .anticon {
+  color: var(--db-btn-icon-glyph);
+}
+.db-btn-icon-only.db-btn-danger:not(:hover, :active) > .anticon {
+  color: var(--db-btn-text);
+}
+.db-btn-icon-only.db-btn-danger:hover:not(:disabled, .db-btn-loading) {
+  background-color: var(--db-btn-surface-hover) !important;
+  color: var(--db-btn-text-hover) !important;
+}
+.db-btn-icon-only.db-btn-danger:active:not(:disabled, .db-btn-loading) {
+  background-color: var(--db-btn-surface-press) !important;
+  color: var(--db-btn-text-press) !important;
+}
+
+/* ── 9. Disabled — base rules paint the per-variant `*-disabled` tokens (see tokens.css) ──────── */
+.db-btn:disabled {
+  cursor: not-allowed;
+  background-color: var(--db-btn-surface-disabled) !important;
+  color: var(--db-btn-text-disabled) !important;
+}
+/* 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. */
+.db-btn:disabled:where(:not(.db-btn-empty, .db-btn-loading)) {
+  border-color: var(--db-btn-border-disabled) !important;
+}
+.db-btn-icon-only:disabled {
+  border: none;
+}
+.db-btn-icon-only:disabled:hover {
+  background-color: transparent !important;
+}
+.db-btn:disabled > .anticon {
+  color: inherit !important;
+}
+
+/* ── 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. */
+.db-btn > .anticon,
+.db-btn-end-icon,
+.db-btn-end-icon > .anticon {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--db-btn-icon-size) !important;
+  line-height: 0;
+}
+.db-btn-small > .anticon .anticon {
+  line-height: 0;
+}
+.db-btn > .db-btn-content > .anticon {
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+}
+.db-btn-content {
+  display: inline-flex;
+  align-items: center;
+}
+.db-btn > .anticon + .db-btn-content {
+  margin-inline-start: var(--db-btn-gap) !important;
+}
+.db-btn-end-icon {
+  margin-inline-start: var(--db-btn-end-icon-gap) !important;
+}
+.db-btn-small .db-btn-end-icon {
+  margin-inline-start: var(--db-btn-end-icon-gap-small) !important;
+}
+.db-btn-default:not(.db-btn-danger, [href], :hover, :active, :disabled) > .anticon {
+  color: var(--db-btn-icon-glyph);
+}
+.db-btn-default[href]:not(.db-btn-danger, :hover, :active, :disabled) .db-btn-end-icon {
+  color: var(--db-btn-icon-glyph);
+}
+.db-btn-default:not([href], .db-btn-danger, :hover, :active, :disabled)
+  > .db-btn-content
+  > .db-btn-end-icon
+  > .anticon {
+  color: var(--db-btn-icon-glyph);
+}
+
+/* ── 11. Loading ─────────────────────────────────────────────────────────── */
+.db-btn-loading {
+  cursor: default;
+}
+.db-btn-loading:disabled {
+  border-color: transparent !important;
+}
+.db-btn-spinner {
+  color: inherit !important;
+  pointer-events: none;
+}
+.db-btn-loading-with-icon .db-btn-content {
+  padding-inline-start: calc(var(--db-btn-icon-size) + var(--db-btn-gap));
+}
+.db-btn-loading .db-btn-spinner {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.db-btn-loading.db-btn-icon-only .db-btn-spinner {
+  position: static;
+  transform: none;
+}
+
+/* ── 12. dangerouslySetForceIconStyles ───────────────────────────────────── */
+.db-btn-force-icon {
+  width: var(--db-btn-height) !important;
+  color: var(--db-btn-icon-glyph) !important;
+}
+.db-btn-force-icon.db-btn-small {
+  width: var(--db-btn-height-small) !important;
+}
+
+:where(:root), :where(.du-bois-light) {
+  /* 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-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);
+
+  /* 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(:root), :where(.du-bois-light) {
+  /* 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;
+}
+
+:where(:root), :where(.du-bois-light) {
+  /* 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: #11171c;
+
+  /* Elevation */
+  --db-snackbar-shadow: var(--db-elevation-med);
+}
+
+/* Tooltip renders an inverted surface (dark chip in light mode, light chip in dark mode), so it does
+ * not draw from the popover family's neutral surface. Surface/text reference the v1 tooltip
+ * primitives from tokens-groups until a v2 semantic exists. */
+
+:where(:root), :where(.du-bois-light) {
+  /* Shape */
+  --db-tooltip-border-radius: var(--db-radius-sm);
+
+  /* Density */
+  --db-tooltip-spacing-vertical: var(--db-space-1);
+  --db-tooltip-spacing-horizontal: var(--db-space-2);
+
+  /* Typography */
+  --db-tooltip-font-size: var(--db-font-size-base);
+  --db-tooltip-font-weight: var(--db-font-weight-normal);
+}
+
+:where(:root), :where(.du-bois-light) {
+  /* Color */
+  --db-tooltip-surface: var(--db-color-tooltip-background-tooltip);
+  --db-tooltip-text: var(--db-color-tooltip-text-tooltip);
+  /* v1 blue primitives, held as literals until a v2 link-on-tooltip semantic exists. */
+  --db-tooltip-link-text: #4299e0; /* blue500 */
+  --db-tooltip-link-text-hover: #8acaff; /* blue400 */
+  --db-tooltip-link-text-press: #bae1fc; /* blue300 */
+
+  /* Elevation */
+  --db-tooltip-shadow: var(--db-elevation-med);
+}
+
+/* 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(:root), :where(.du-bois-light) {
+  /* 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(:root), :where(.du-bois-light) {
+  /* 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);
+}