@databricks/design-system 2.0.9 → 2.0.10

package/dist/assets/icons/ZoomToFitIcon.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 3.56066L5.46967 6.53033L6.53033 5.46967L3.56066 2.5L6 2.5V1H1V6H2.5L2.5 3.56066Z" fill="#5F7281"/>
+<path d="M10.5303 6.53033L13.5 3.56066V6H15V1H10V2.5L12.4393 2.5L9.46967 5.46967L10.5303 6.53033Z" fill="#5F7281"/>
+<path d="M9.46967 10.5303L12.4393 13.5H10V15H15V10H13.5V12.4393L10.5303 9.46967L9.46967 10.5303Z" fill="#5F7281"/>
+<path d="M5.46967 9.46967L2.5 12.4393L2.5 10H1V15H6V13.5H3.56066L6.53033 10.5303L5.46967 9.46967Z" fill="#5F7281"/>
+</svg>

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

@@ -0,0 +1,28 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Shape */
+  --db-avatar-border-radius: var(--db-radius-sm);
+
+  /* Density */
+  --db-avatar-group-gap: var(--db-space-1);
+  --db-avatar-group-border-width: 1px;
+
+  /* Color */
+  /* No v2 token holds the secondary icon glyph yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-avatar-icon: var(--db-color-text-secondary);
+  /* No v2 token holds the default avatar surface yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-avatar-surface: var(--db-color-tag-background-default);
+  /* No v2 token holds the group divider border yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-avatar-group-border-color: var(--db-color-background-primary);
+}
+
+:where(:root), :where(.du-bois-light) {
+  /* Color */
+  /* No v2 token holds the initials/icon glyph on a colored avatar yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-avatar-text: #ffffff;
+}
+
+:where(.du-bois-dark) {
+  /* Color */
+  /* No v2 token holds the initials/icon glyph on a colored avatar yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-avatar-text: #e8ecf0;
+}

package/dist/design-system/Breadcrumb/NativeBreadcrumb.css

@@ -0,0 +1,43 @@
+.db-breadcrumb a {
+  color: var(--db-breadcrumb-text);
+  text-decoration: none;
+}
+
+.db-breadcrumb a:hover,
+.db-breadcrumb a:focus {
+  color: var(--db-breadcrumb-text-hover);
+}
+
+.db-breadcrumb a:focus-visible {
+  outline-color: var(--db-breadcrumb-focus-ring);
+  outline-style: auto;
+}
+
+.db-breadcrumb-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--db-breadcrumb-separator-spacing);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.db-breadcrumb-item,
+.db-breadcrumb-separator {
+  display: inline-flex;
+  align-items: center;
+}
+
+.db-breadcrumb-separator {
+  color: var(--db-breadcrumb-separator-text);
+  font-size: var(--db-breadcrumb-separator-font-size);
+  user-select: none;
+}
+
+.db-breadcrumb-separator :is(.anticon),
+.db-breadcrumb-separator :is(.db-icon) {
+  font-size: var(--db-breadcrumb-icon-size);
+  /* The chevron path is optically top-heavy even when its box is mathematically centered. */
+  transform: translateY(1px);
+}

package/dist/design-system/Breadcrumb/breadcrumb.less

@@ -0,0 +1,8 @@
+@import '~antd/es/style/mixins/index.less';
+@import '~antd/es/breadcrumb/style/index.less';
+
+.@{breadcrumb-prefix-cls} {
+  a {
+    .operation-unit();
+  }
+}

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

@@ -0,0 +1,13 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Color */
+  --db-breadcrumb-text: var(--db-accent-text);
+  /* TODO(FEINF-6179): Replace these fallbacks when v2 link-hover and placeholder semantic tokens exist. */
+  --db-breadcrumb-text-hover: var(--db-color-action-link-hover);
+  --db-breadcrumb-separator-text: var(--db-color-text-placeholder);
+  --db-breadcrumb-focus-ring: var(--db-focus-ring-color);
+
+  /* Density and typography */
+  --db-breadcrumb-separator-spacing: var(--db-space-1);
+  --db-breadcrumb-separator-font-size: var(--db-font-size-xl);
+  --db-breadcrumb-icon-size: var(--db-font-size-base);
+}

package/dist/design-system/Button/NativeButton.css

@@ -0,0 +1,370 @@
+/* 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-active: 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-active: 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-active: 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-active: 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-active: 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-active: 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-active: 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-active: 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-active: 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-active: 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-active: 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-active: 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-active: 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-active: 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-active: 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-active: 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-active: 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-active) !important;
+  border-color: var(--db-btn-border-active) !important;
+  color: var(--db-btn-text-active) !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 / block (full-width) / empty ────────────────────────────────── */
+.db-btn-small {
+  height: var(--db-btn-height-small) !important;
+}
+.db-btn-block {
+  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-active) !important;
+  color: var(--db-btn-text-active) !important;
+}
+.db-btn-icon-only:enabled:not(.db-btn-primary, .db-btn-tertiary, .db-btn-link, .db-btn-danger, :hover, :active)
+  > .anticon,
+.db-btn-icon-only:enabled:not(.db-btn-primary, .db-btn-tertiary, .db-btn-link, .db-btn-danger, :hover, :active)
+  > .db-icon {
+  color: var(--db-btn-icon-glyph);
+}
+.db-btn-icon-only.db-btn-danger:not(:hover, :active) > .anticon,
+.db-btn-icon-only.db-btn-danger:not(:hover, :active) > .db-icon {
+  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-active) !important;
+  color: var(--db-btn-text-active) !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 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)) {
+  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,
+.db-btn:disabled > .db-icon {
+  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 > .db-icon,
+.db-btn-end-icon,
+.db-btn-end-icon > .anticon,
+.db-btn-end-icon > .db-icon {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--db-btn-icon-size) !important;
+  line-height: 0;
+}
+.db-btn-small > .anticon .anticon,
+.db-btn-small > .anticon .db-icon,
+.db-btn-small > .db-icon .anticon,
+.db-btn-small > .db-icon .db-icon {
+  line-height: 0;
+}
+.db-btn > .db-btn-content > .anticon,
+.db-btn > .db-btn-content > .db-icon {
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+}
+.db-btn-content {
+  display: inline-flex;
+  align-items: center;
+}
+.db-btn > .anticon + .db-btn-content,
+.db-btn > .db-icon + .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,
+.db-btn-default:not(.db-btn-danger, [href], :hover, :active, :disabled) > .db-icon {
+  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,
+.db-btn-default:not([href], .db-btn-danger, :hover, :active, :disabled)
+  > .db-btn-content
+  > .db-btn-end-icon
+  > .db-icon {
+  color: var(--db-btn-icon-glyph);
+}
+
+/* ── 11. Loading ─────────────────────────────────────────────────────────── */
+.db-btn-loading {
+  cursor: default;
+}
+.db-btn-force-icon.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;
+}

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

@@ -0,0 +1,56 @@
+/* Component-tier tokens for the native <Button>, grouped by area (density, shape, typography, color).
+ * Colors alias the action-* system tokens; sizes alias the system density scale.
+ *
+ * Follows the mortar/action.css pattern: one semantic set (surface / border / text, each with
+ * -hover / -active / -disabled) whose defaults are the secondary variant. The variant classes that
+ * re-set these tokens per variant live in NativeButton.css; this file declares only tokens. */
+
+/* Declared under the theme classes too (not just :root) so the var() chain re-resolves inside a
+ * `.du-bois-dark` subtree (or a portal that re-applies the theme class) instead of freezing at the root values. */
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* ── Density ──────────────────────────────────────────────────────────── */
+  --db-btn-height: var(--db-size-8);
+  --db-btn-height-small: var(--db-size-6);
+  --db-btn-icon-size: var(--db-size-4);
+  --db-btn-border-width: 1px;
+  --db-btn-padding-vertical: var(--db-space-1);
+  --db-btn-padding-horizontal: var(--db-space-3);
+  --db-btn-padding-horizontal-small: var(--db-space-2);
+  /* Icon/force-icon horizontal padding: half the standard horizontal padding. */
+  --db-btn-padding-horizontal-icon: calc(var(--db-space-3) / 2); /* 6px */
+  --db-btn-gap: var(--db-space-1);
+  --db-btn-end-icon-gap: var(--db-space-2);
+  --db-btn-end-icon-gap-small: var(--db-space-1);
+  /* Width of a content-less button while loading, so the standalone spinner has room. */
+  --db-btn-loading-empty-width: var(--db-size-10);
+
+  /* ── Shape ────────────────────────────────────────────────────────────── */
+  --db-btn-border-radius: var(--db-shape-control);
+
+  /* ── Typography ───────────────────────────────────────────────────────── */
+  --db-btn-font-size: var(--db-font-size-base);
+  --db-btn-icon-only-font-size: var(--db-font-size-lg); /* 15px */
+  --db-btn-font-weight: var(--db-font-weight-normal);
+  /* Line heights are hard-coded until the typography scale ships computed per-level line-height tokens. */
+  --db-btn-line-height: 1.25rem; /* 20px */
+  --db-btn-line-height-small: 1rem; /* 16px */
+
+  /* ── Color: semantic set (defaults = secondary variant) ───────────────── */
+  --db-btn-surface: var(--db-color-action-default-background-default);
+  --db-btn-surface-hover: var(--db-color-action-default-background-hover);
+  --db-btn-surface-active: var(--db-color-action-default-background-press);
+  --db-btn-surface-disabled: transparent;
+  --db-btn-border: var(--db-color-action-default-border-default);
+  --db-btn-border-hover: var(--db-color-action-default-border-hover);
+  --db-btn-border-active: var(--db-color-action-default-border-press);
+  --db-btn-border-disabled: var(--db-color-action-disabled-border);
+  --db-btn-text: var(--db-color-action-default-text-default);
+  --db-btn-text-hover: var(--db-color-action-default-text-hover);
+  --db-btn-text-active: var(--db-color-action-default-text-press);
+  --db-btn-text-disabled: var(--db-color-action-disabled-text);
+
+  /* ── Focus & icon ─────────────────────────────────────────────────────── */
+  --db-btn-focus-ring: var(--db-color-action-default-border-focus);
+  --db-btn-danger-focus-ring: var(--db-color-action-danger-primary-background-default);
+  --db-btn-icon-glyph: var(--db-color-text-secondary);
+}

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

@@ -0,0 +1,29 @@
+/* Component-tier tokens for Card. Shared surface, text, border, and container radius come from the cards
+ * family (design-tokens/family-tokens/cards-tokens.css); Card-only shape, density, and elevation tokens
+ * live here. Card CSS reads only --db-card-* tokens. */
+
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Shape */
+  --db-card-bar-border-radius: var(--db-radius-sm);
+
+  /* Density */
+  --db-card-padding: var(--db-space-4);
+  --db-card-bar-spacing-vertical: var(--db-space-2);
+  --db-card-content-padding: var(--db-space-6);
+}
+
+:where(:root), :where(.du-bois-light) {
+  /* Elevation */
+  --db-card-shadow: var(--db-elevation-low);
+  /* The hover shadow (v1 shadows.md, 3px/6px) matches no --db-elevation-* step; held as a literal.
+   * TODO(FEINF-6178): adopt a v2 elevation token when one exists. */
+  --db-card-shadow-hover: 0px 3px 6px 0px rgba(0, 0, 0, 0.05);
+}
+
+:where(.du-bois-dark) {
+  /* Elevation */
+  /* --db-elevation-low is theme-invariant (light values), so re-declare the v1 dark resting/hover
+   * shadows as literals here. TODO(FEINF-6178): adopt v2 elevation tokens when they gain dark values. */
+  --db-card-shadow: 0px 2px 3px -1px rgba(0, 0, 0, 0.45), 0px 1px 0px 0px rgba(0, 0, 0, 0.26);
+  --db-card-shadow-hover: 0px 3px 6px 0px rgba(0, 0, 0, 0.45);
+}