@databricks/design-system 2.0.8 → 2.0.10

package/dist/design-system/Switch/switch.less

@@ -0,0 +1,93 @@
+@import '~antd/lib/switch/style/index.less';
+
+// TODO: Use shared color variables
+@switch-color: #2273b5;
+@switch-color-unchecked: #64727d;
+@switch-color-disabled: #a2aeb8;
+@switch-hover-color: #186099;
+@switch-hover-active: #0d4f85;
+@switch-bg: white;
+
+.@{switch-prefix-cls} {
+  transition: none;
+  border: 1px solid @switch-color-unchecked;
+  background-color: white;
+  margin-right: 8px;
+
+  .@{switch-prefix-cls}-handle::before {
+    box-shadow: 0px 0px 0px 1px @switch-color-unchecked;
+  }
+
+  &-checked {
+    border: 1px solid @switch-color;
+    background-color: @switch-color;
+
+    .@{switch-prefix-cls}-handle::before {
+      box-shadow: none;
+    }
+  }
+
+  &:focus-visible {
+    box-shadow: 0px 0px 0px 1px @switch-color;
+    border: 1px solid @switch-color;
+
+    .@{switch-prefix-cls}-handle::before {
+      box-shadow: 0px 0px 0px 1px @switch-color;
+    }
+  }
+
+  &-checked:focus-visible {
+    box-shadow:
+      0px 0px 0px 1px #ffffff,
+      0px 0px 0px 3px @switch-color;
+  }
+
+  &:hover {
+    border: 1px solid @switch-hover-color;
+    background-color: fade(@switch-color, 8%);
+
+    .@{switch-prefix-cls}-handle::before {
+      box-shadow: 0px 0px 0px 1px @switch-hover-color;
+    }
+  }
+
+  &-checked:hover {
+    background-color: @switch-hover-color;
+  }
+
+  &:active {
+    background-color: fade(@switch-color, 16%);
+  }
+
+  &-checked:active {
+    background-color: @switch-hover-active;
+  }
+
+  &-disabled,
+  &-disabled:hover {
+    border: 1px solid @switch-color-disabled;
+
+    .@{switch-prefix-cls}-handle::before {
+      box-shadow: 0px 0px 0px 1px @switch-color-disabled;
+    }
+  }
+
+  &-disabled&-checked {
+    background-color: @switch-color-disabled;
+  }
+
+  // Don't expand handle when it's active
+  &:not(&-disabled):active {
+    .@{switch-prefix-cls}-handle::before {
+      right: 0;
+      left: 0;
+    }
+
+    &.@{switch-prefix-cls}-checked {
+      .@{switch-prefix-cls}-handle::before {
+        right: 0;
+        left: 0;
+      }
+    }
+  }
+}

package/dist/design-system/Switch/tokens.css

@@ -0,0 +1,38 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Shape */
+  --db-switch-border-radius: var(--db-radius-full);
+  --db-switch-border-width: 1px;
+
+  /* Color */
+  --db-switch-surface: var(--db-selection-toggle-surface);
+  --db-switch-surface-hover: var(--db-color-action-default-background-hover);
+  --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-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-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-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);
+
+  --db-switch-text: var(--db-selection-toggle-text);
+  --db-switch-text-disabled: var(--db-selection-toggle-text-disabled);
+
+  /* Density */
+  --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);
+
+  /* Motion */
+  --db-switch-transition-duration: var(--db-selection-toggle-transition-duration);
+}

package/dist/design-system/Tabs/tokens.css

@@ -0,0 +1,52 @@
+/* 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(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* ── Density ──────────────────────────────────────────────────────────── */
+  --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-tabs-scrollbar-radius: var(--db-shape-control);
+  --db-tabs-focus-ring-width: var(--db-focus-ring-width);
+
+  /* ── Typography ───────────────────────────────────────────────────────── */
+  --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 ────────────────────────────────────────────────────────────── */
+  /* 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);
+}
+
+/* No v2 token holds the scrollbar thumb yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+:where(:root), :where(.du-bois-light) {
+  --db-tabs-scrollbar-thumb: rgba(17, 23, 28, 0.2);
+  --db-tabs-scrollbar-thumb-hover: rgba(17, 23, 28, 0.3);
+}
+: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);
+}

package/dist/design-system/ToggleButton/tokens.css

@@ -0,0 +1,36 @@
+:where(:root), :where(.du-bois-light), :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);
+}

package/dist/design-system/Toolbar/tokens.css

@@ -0,0 +1,23 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Shape */
+  --db-toolbar-border-radius: var(--db-shape-control);
+
+  /* Color */
+  --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-toolbar-gap: var(--db-space-4);
+  --db-toolbar-spacing: var(--db-space-2);
+}
+
+:where(.du-bois-dark) {
+  /* 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);
+}

package/dist/design-system/Tooltip/tokens.css

@@ -0,0 +1,44 @@
+/* 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), :where(.du-bois-dark) {
+  /* 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-active: #bae1fc; /* blue300 */
+
+  /* Elevation */
+  --db-tooltip-shadow: var(--db-elevation-med);
+}
+
+:where(.du-bois-dark) {
+  /* Color */
+  --db-tooltip-surface: var(--db-color-tooltip-background-tooltip);
+  --db-tooltip-text: var(--db-color-tooltip-text-tooltip);
+  /* 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-active: #04355d; /* blue800 */
+
+  /* Elevation */
+  /* v2 elevation tokens are theme-invariant, so --db-elevation-med would keep the light shadow here.
+   * 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);
+}

package/dist/design-system/_shared_/Menu/tokens.css

@@ -0,0 +1,42 @@
+:where(:root), :where(.du-bois-light), :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(:root), :where(.du-bois-light) {
+  /* Elevation */
+  --db-menu-elevation: var(--db-elevation-med);
+}
+
+: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);
+}

package/dist/design-system/general-overrides.less

@@ -0,0 +1,33 @@
+.du-bois-light-typography {
+  a {
+    // actionTertiaryTextDefault
+    color: #2272b4;
+
+    &:hover {
+      // actionTertiaryTextHover
+      color: #0e538b;
+    }
+
+    &:focus {
+      // actionTertiaryTextPress
+      color: #04355d;
+    }
+  }
+}
+
+.du-bois-dark-typography {
+  a {
+    // actionTertiaryTextDefault
+    color: #4299e0;
+
+    &:hover {
+      // actionTertiaryTextHover
+      color: #8acaff;
+    }
+
+    &:focus {
+      // actionTertiaryTextPress
+      color: #bae1fc;
+    }
+  }
+}

package/dist/design-system/utils/debug.less

@@ -0,0 +1,4 @@
+[data-dubois-show-outline] {
+  outline: 1px dashed #308613 !important;
+  outline-offset: 2px !important;
+}

package/dist/design-tokens/family-tokens/actions-tokens.css

@@ -0,0 +1,29 @@
+/* ⚠️ Not yet used, staged for future use. */
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Shape */
+  /* Mirrors the ShapeTokens host-override var used by Button/Tag/etc.; falls back to the theme radius. */
+  --db-action-border-radius: var(--action-border-radius, 4px);
+
+  /* Color — defaults to the neutral palette (the base, unmodified action). */
+  --db-action-surface: var(--db-surface-base);
+  --db-action-text: var(--db-text-base);
+  --db-action-border: var(--db-border-base);
+
+  --db-action-surface-hover: var(--db-surface-hover);
+  --db-action-surface-active: var(--db-surface-active);
+  --db-action-surface-selected: var(--db-surface-selected);
+  --db-action-surface-disabled: var(--db-surface-disabled);
+
+  --db-action-text-hover: var(--db-text-base);
+  --db-action-text-active: var(--db-text-base);
+  --db-action-text-disabled: var(--db-text-disabled);
+
+  --db-action-border-hover: var(--db-border-strong);
+  --db-action-border-active: var(--db-border-strong);
+  --db-action-border-disabled: var(--db-surface-disabled);
+
+  /* Density */
+  --db-action-size: var(--db-size-10);
+  --db-action-size-small: var(--db-size-6);
+  --db-action-padding: var(--db-space-4);
+}

package/dist/design-tokens/family-tokens/cards-tokens.css

@@ -0,0 +1,10 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Shape */
+  --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-color-action-default-border-hover);
+}

package/dist/design-tokens/family-tokens/inputs-tokens.css

@@ -0,0 +1,43 @@
+/*
+  Shared token primitives for the input family: the text Input and input-like controls such as
+  DatePicker and TypeaheadCombobox.
+ */
+:where(:root), :where(.du-bois-light), :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. */
+}

package/dist/design-tokens/family-tokens/lists-tokens.css

@@ -0,0 +1,26 @@
+:where(:root), :where(.du-bois-light), :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);
+}

package/dist/design-tokens/family-tokens/popups-tokens.css

@@ -0,0 +1,13 @@
+:where(:root), :where(.du-bois-light), :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);
+}

package/dist/design-tokens/family-tokens/selection-toggles-tokens.css

@@ -0,0 +1,34 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Shape */
+  --db-selection-toggle-border-radius: 4px;
+
+  /* Color */
+  --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-surface-hover);
+  --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-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-active: var(--db-accent-surface-active);
+  --db-selection-toggle-border-disabled: var(--db-border-base);
+
+  --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-4);
+  --db-selection-toggle-label-spacing: var(--db-space-2);
+
+  /* Motion */
+  --db-selection-toggle-transition-duration: 120ms;
+}

package/dist/design-tokens/system-tokens/colors-dark-tokens.css

@@ -0,0 +1,103 @@
+:where(.du-bois-dark) {
+  /* Neutral */
+  --db-surface-base: var(--db-color-background-primary);
+  --db-surface-subtle: var(--db-color-background-secondary);
+  --db-surface-strong: #37444f;
+
+  --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: 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: 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: var(--db-color-text-primary);
+  --db-text-disabled: var(--db-color-action-disabled-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: #ffffff0f;
+  --db-border-strong: var(--db-color-border-accessible);
+  --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-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 */
+  --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. */
+  --db-accent-text: var(--db-color-action-link-default);
+  --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-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-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: #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: var(--db-color-action-danger-default-border-hover);
+  --db-negative-border-active: var(--db-color-action-danger-default-border-press);
+
+  /* Caution */
+  --db-caution-surface: #5f1b02;
+  --db-caution-surface-subtle: var(--db-color-background-warning);
+  --db-caution-surface-strong: #de7921;
+
+  --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: #11171c;
+
+  --db-caution-border: var(--db-color-border-warning);
+  --db-caution-border-hover: #f2be88;
+  --db-caution-border-active: #f8d4a5;
+
+  /* Positive */
+  --db-positive-surface: #093919;
+  --db-positive-surface-subtle: var(--db-color-background-success);
+  --db-positive-surface-strong: #3ba65e;
+
+  --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: #11171c;
+
+  --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;
+  --db-ai-gradient-mid: #ca42e0;
+  --db-ai-gradient-end: #ff5f46;
+}