@databricks/design-system 2.0.8 → 2.0.10

package/dist/design-system/Input/NativeInput.css

@@ -0,0 +1,111 @@
+/*
+  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). */
+.db-input-affix-container {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--db-input-affix-gap);
+}
+
+/* The inner <input> is transparent and borderless; the container owns the border, fill, padding,
+   height, and typography, which the input inherits. */
+.db-input-affix-container input {
+  flex: 1;
+  min-inline-size: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  color: inherit;
+  font: inherit;
+}
+.db-input-affix-container input::placeholder {
+  color: var(--db-input-text-placeholder);
+}
+
+.db-input-prefix,
+.db-input-suffix {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--db-input-affix-gap);
+  color: var(--db-input-text-affix);
+}
+
+/* TODO: confirm this doesn't breaks buttons passed as `suffix` content. */
+/* Icon buttons for e.g. clear, password visibility toggle, etc. */
+.db-input-suffix > button {
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--db-input-text-affix);
+  cursor: pointer;
+}
+
+.db-input-suffix > button:hover {
+  color: var(--db-input-text);
+}
+
+/* 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). */
+.db-input-clear svg {
+  font-size: 12px;
+}
+
+/* Disabled affix container: :disabled matches only the inner <input>, so the container (which carries
+   the border and fill) takes the disabled treatment via :has(). */
+.db-input-affix-container:has(input:disabled) {
+  background-color: var(--db-input-surface-disabled);
+  border-color: var(--db-input-border-disabled);
+}
+.db-input-affix-container:has(input:disabled) input {
+  color: var(--db-input-text-disabled);
+}
+
+/* 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. */
+.db-input-addon-group {
+  display: inline-flex;
+  inline-size: 100%;
+  align-items: stretch;
+}
+.db-input-addon-group > .db-input {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+/* 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). */
+.db-input-addon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  padding-inline: var(--db-input-spacing-horizontal);
+  border: var(--db-input-border-width) solid var(--db-input-border);
+  border-radius: var(--db-input-border-radius);
+  background-color: var(--db-input-addon-surface);
+  color: var(--db-input-text);
+  font-size: var(--db-input-font-size);
+  line-height: var(--db-input-line-height);
+}
+
+/* Seam between the addon and the field: square the touching corners and drop the doubled border. */
+.db-input-addon-group > .db-input-addon {
+  border-inline-end: none;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+.db-input-addon-group > .db-input-addon + .db-input {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}

package/dist/design-system/Input/group/NativeGroup.css

@@ -0,0 +1,51 @@
+/*
+  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. */
+.db-input-group {
+  display: inline-flex;
+}
+
+/* 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. */
+.db-input-group .db-input {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+/* 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. */
+.db-input-group .db-input:disabled {
+  border-color: transparent;
+}
+
+/*
+  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.
+*/
+
+.db-input-group-compact.db-input-group-button-end .db-input,
+.db-input-group-compact.db-input-group-button-start button:not(.db-input-affix-container button) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.db-input-group-compact.db-input-group-button-start .db-input,
+.db-input-group-compact.db-input-group-button-end button:not(.db-input-affix-container button) {
+  margin-inline-start: calc(-1 * var(--db-input-border-width));
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+/* Lift the hovered or focused member so its border and focus ring paint over the shared seam. */
+.db-input-group-compact .db-input:is(:hover, :focus-within),
+.db-input-group-compact button:not(.db-input-affix-container button):is(:hover, :focus-within) {
+  position: relative;
+  z-index: 1;
+}

package/dist/design-system/Input/textarea/NativeTextArea.css

@@ -0,0 +1,27 @@
+/*
+  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).
+*/
+
+.db-input-textarea {
+  display: block;
+  resize: vertical;
+}
+
+/* Auto-grow controls the height, so manual resizing is disabled. */
+.db-input-textarea-autosize {
+  resize: none;
+}
+
+@supports (field-sizing: content) {
+  .db-input-textarea-autosize {
+    field-sizing: content;
+    /* Cap growth at maxRows when the component sets --db-textarea-max-rows; the large default leaves
+       it effectively uncapped (autoSize: true). The row floor (minRows, or one row) comes from the
+       `rows` attribute, which field-sizing treats as the minimum height. */
+    max-height: calc(
+      var(--db-textarea-max-rows, 9999) * 1lh + 2 * var(--db-input-spacing-vertical) + 2 * var(--db-input-border-width)
+    );
+  }
+}

package/dist/design-system/LegacyNotification/notification.less

@@ -0,0 +1,45 @@
+@import '~antd/lib/notification/style/index.less';
+
+@shadowLow: 0px 4px 16px rgba(46, 56, 64, 0.12);
+
+.@{notification-prefix-cls}-notice {
+  padding: 10px 40px 10px 32px;
+  box-shadow: @shadowLow;
+
+  .@{notification-prefix-cls}-notice-icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+    margin-left: 0;
+    left: 12px;
+    top: 12px;
+    line-height: 16px;
+  }
+
+  .@{notification-prefix-cls}-notice-close {
+    top: 12px;
+    right: 12px;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+
+    span[role='img'] {
+      font-size: 16px;
+    }
+  }
+
+  .@{notification-prefix-cls}-notice-message {
+    display: flex;
+    align-items: center;
+    min-height: 20px;
+    line-height: 20px;
+    font-weight: 600;
+  }
+
+  .@{notification-prefix-cls}-notice-message,
+  .@{notification-prefix-cls}-notice-description {
+    margin-left: unset;
+    font-size: 13px;
+    margin-bottom: 0;
+  }
+}

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

@@ -0,0 +1,15 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Shape */
+  --db-listbox-border-radius: var(--db-list-item-border-radius);
+  --db-listbox-focus-ring-width: var(--db-focus-ring-width);
+
+  /* Color */
+  --db-listbox-surface: var(--db-list-surface);
+  --db-listbox-empty-text: var(--db-text-subtle);
+  --db-listbox-focus-ring-color: var(--db-focus-ring-color);
+
+  /* Density */
+  --db-listbox-spacing: var(--db-space-2);
+  --db-listbox-empty-spacing-horizontal: var(--db-space-3);
+  --db-listbox-empty-spacing-vertical: calc(var(--db-space-2) * 0.75);
+}

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

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

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

@@ -0,0 +1,23 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Shape */
+  /* Must not scale with density; no non-scaling system token holds it. TODO(FEINF-6505): adopt a v2 system token when one is added. */
+  --db-navigation-menu-indicator-thickness: 4px;
+  /* No system token holds this control-specific inset. TODO(FEINF-6505): adopt a v2 system token when one is added. */
+  --db-navigation-menu-focus-ring-offset: -1px;
+
+  /* Color */
+  --db-navigation-menu-indicator: var(--db-accent-surface);
+  --db-navigation-menu-focus-ring: var(--db-focus-ring-color);
+  --db-navigation-menu-text: var(--db-text-subtle);
+  --db-navigation-menu-text-selected: var(--db-text-base);
+  /* No v2 semantic for default-action link text yet; bridges on the v1 --db-color-* token. */
+  --db-navigation-menu-text-hover: var(--db-color-action-default-text-hover);
+  --db-navigation-menu-text-active: var(--db-color-action-default-text-press);
+
+  /* Density */
+  --db-navigation-menu-item-height: var(--db-size-8);
+  --db-navigation-menu-item-min-width: var(--db-size-6);
+  --db-navigation-menu-link-padding-top: var(--db-space-1);
+  --db-navigation-menu-link-padding-bottom: var(--db-space-2);
+  --db-navigation-menu-focus-ring-width: var(--db-focus-ring-width);
+}

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

@@ -0,0 +1,35 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Shape */
+  --db-notification-border-radius: var(--db-popup-border-radius);
+
+  /* Density */
+  --db-notification-padding: var(--db-space-3);
+  --db-notification-column-gap: var(--db-space-1);
+  --db-notification-description-gap: var(--db-space-1);
+  --db-notification-close-offset: calc(var(--db-space-1) * 1.5);
+  --db-notification-close-size: var(--db-size-5);
+  --db-notification-viewport-padding: var(--db-space-3);
+  --db-notification-viewport-gap: var(--db-space-3);
+  --db-notification-viewport-margin: var(--db-space-6);
+  --db-notification-viewport-width: 440px;
+
+  /* Color */
+  --db-notification-surface: var(--db-popup-surface);
+  --db-notification-border: var(--db-popup-border);
+  --db-notification-text: var(--db-popup-text);
+  --db-notification-icon: var(--db-text-subtle);
+  --db-notification-icon-success: var(--db-positive-text);
+  --db-notification-icon-warning: var(--db-caution-text);
+  --db-notification-icon-error: var(--db-negative-text);
+}
+
+:where(:root), :where(.du-bois-light) {
+  /* Elevation */
+  --db-notification-shadow: var(--db-elevation-med);
+}
+
+:where(.du-bois-dark) {
+  /* 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-notification-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.61);
+}

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

@@ -0,0 +1,11 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Color */
+  /* No v2 token holds tertiary action-text states yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-overflow-trigger-text: var(--db-color-action-tertiary-text-default);
+  --db-overflow-trigger-text-hover: var(--db-color-action-tertiary-text-hover);
+  --db-overflow-trigger-text-press: var(--db-color-action-tertiary-text-press);
+
+  /* Density */
+  --db-overflow-spacing: var(--db-space-2);
+  --db-overflow-menu-spacing: var(--db-space-1);
+}

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

@@ -0,0 +1,14 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Density */
+  --db-page-wrapper-spacing-horizontal: var(--db-space-4);
+}
+
+:where(:root), :where(.du-bois-light) {
+  /* Color */
+  --db-page-wrapper-surface: transparent;
+}
+
+:where(.du-bois-dark) {
+  /* Color */
+  --db-page-wrapper-surface: var(--db-surface-base);
+}

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

@@ -0,0 +1,73 @@
+/* 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(:root), :where(.du-bois-light), :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(:root), :where(.du-bois-light) {
+  /* Color */
+  /* No v2 token holds the large-size icon chip surface yet (v1 grey100). TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-pill-control-icon-surface: #e8ecf0;
+}
+
+: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;
+}

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

@@ -0,0 +1,29 @@
+/* Popover is a neutral-card member of the popup family: surface, text, border, and radius come
+ * from --db-popup-*. Link, focus, and spacing are popover-specific and reference system tokens
+ * directly. The popup elevation scale is light-only, so the dark shadow is re-declared below. */
+
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Shape */
+  --db-popover-border-radius: var(--db-popup-border-radius);
+
+  /* Color */
+  --db-popover-surface: var(--db-popup-surface);
+  --db-popover-text: var(--db-popup-text);
+  --db-popover-border: var(--db-popup-border);
+  /* No v2 token holds the tertiary link text yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-popover-link-text: var(--db-color-action-tertiary-text-default);
+  --db-popover-link-text-hover: var(--db-color-action-tertiary-text-hover);
+  --db-popover-focus-ring: var(--db-focus-ring-color);
+
+  /* Density */
+  --db-popover-spacing: var(--db-space-2);
+  --db-popover-focus-ring-width: var(--db-focus-ring-width);
+
+  /* Elevation */
+  --db-popover-shadow: var(--db-popup-elevation);
+}
+
+:where(.du-bois-dark) {
+  /* No v2 token holds the dark-scope popover elevation shadow yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-popover-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.61);
+}

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

@@ -0,0 +1,46 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Shape */
+  --db-preview-card-border-radius: var(--db-card-border-radius);
+  --db-preview-card-image-border-radius: var(--info-container-border-radius, 4px);
+  --db-preview-card-border-width: 1px;
+
+  /* Density */
+  --db-preview-card-padding: var(--db-space-4);
+  --db-preview-card-padding-large: var(--db-space-6);
+  --db-preview-card-gap: var(--db-space-2);
+  --db-preview-card-gap-large: var(--db-space-4);
+  --db-preview-card-action-spacing: var(--db-space-4);
+
+  /* Color */
+  --db-preview-card-text: var(--db-text-subtle);
+  --db-preview-card-title-text: var(--db-card-text);
+  --db-preview-card-border: var(--db-card-border);
+  /* No v2 token holds the active/focus border yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-preview-card-border-hover: var(--db-color-action-default-border-hover);
+  /* No v2 token holds the focus outline ring yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-preview-card-border-focus: var(--db-color-action-default-border-focus);
+  /* No v2 token holds the active surface tint yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-preview-card-surface-active: var(--db-color-action-tertiary-background-press);
+  --db-preview-card-surface-disabled: var(--db-surface-disabled);
+  /* No v2 token holds the disabled border yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-preview-card-border-disabled: var(--db-color-action-disabled-border);
+  --db-preview-card-text-disabled: var(--db-text-disabled);
+
+  /* Typography */
+  --db-preview-card-title-font-weight: var(--db-font-weight-semibold);
+}
+
+:where(:root), :where(.du-bois-light) {
+  /* Elevation */
+  --db-preview-card-shadow: var(--db-elevation-low);
+  /* No v2 elevation token holds the hover/focus shadow yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-preview-card-shadow-hover: 0px 3px 6px 0px rgba(0, 0, 0, 0.05);
+}
+
+:where(.du-bois-dark) {
+  /* Elevation */
+
+  /* No v2 elevation token holds the dark shadows yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-preview-card-shadow: 0px 2px 3px -1px rgba(0, 0, 0, 0.45), 0px 1px 0px 0px rgba(0, 0, 0, 0.26);
+  --db-preview-card-shadow-hover: 0px 3px 6px 0px rgba(0, 0, 0, 0.45);
+}

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

@@ -0,0 +1,17 @@
+/* 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), :where(.du-bois-dark) {
+  /* Shape */
+  --db-progress-border-radius: var(--db-shape-pill);
+
+  /* Color */
+  --db-progress-track: var(--db-color-progress-track);
+  --db-progress-fill: var(--db-color-progress-fill);
+
+  /* Density */
+  --db-progress-size: var(--db-size-2);
+
+  /* Motion */
+  /* No v2 motion token holds this duration. TODO(FEINF-6505): adopt a v2 motion token when one is added. */
+  --db-progress-transition-duration: 300ms;
+}