@techsio/ui-kit 0.38.0 → 0.40.0

package/src/tokens/components/_popup-surface.css

@@ -0,0 +1,163 @@
+/*
+ * Shared popup-surface foundation.
+ *
+ * Every floating list surface (Select, Combobox, Menu, and everything that
+ * composes them — PhoneInput's country picker, DataTable's column settings)
+ * draws its panel and its options from one set of tokens, so hover, radius,
+ * colour and keyboard/focus behaviour are identical across all of them.
+ *
+ * SOURCE OF TRUTH: the `popup-surface` collection in Figma. Its tokens
+ * (--color-popup-*, --radius-popup-*, --padding-popup-*, --spacing-popup-*,
+ * --shadow-popup, --size-popup-indicator, --border-width-popup) arrive via
+ * tokens/figma/variables.css and are NOT redeclared here. The component
+ * collections (select, menu, combobox) alias the same popup variables in
+ * Figma, so the two layers cannot drift.
+ *
+ * This file holds only what Figma has no concept of:
+ *   - the @utility blocks that compose those tokens,
+ *   - `--z-popup` layering (code-side, same precedent as `--z-content`),
+ *   - the `--popup-item-*` runtime scale, set per size by popup-size-*.
+ */
+@theme static {
+  /*
+   * Single layer for every popup. Nesting bumps --layer-index rather than
+   * hard-coding a bigger number, so a Select inside a Popover always wins.
+   */
+  --z-popup: 50;
+
+  /*
+   * Foreground for a row that is checked but painted on NO filled background
+   * — Menu's checkbox/radio rows. Distinct from
+   * --color-popup-item-fg-selected, which is white because Select/Combobox
+   * paint a solid --color-popup-item-bg-selected behind it.
+   *
+   * Only the LIGHT half is a fix. On a light panel that white landed on the
+   * hover tint at 1.42:1 (base) / 1.46:1 (neo) — invisible. primary-800
+   * clears it at 6.21:1 / 5.73:1; primary-700 was rejected because it fails
+   * neo at 4.41:1.
+   *
+   * The DARK half stays white deliberately. There the same white was already
+   * correct — 9.46:1 (base) / 8.34:1 (neo) against the dark hover tint — so
+   * changing it would alter a mode that was never broken. An earlier version
+   * of this fix used primary-200 for dark, which still passed but needlessly
+   * dropped contrast to 7.10 / 5.73.
+   *
+   * Named for the state it serves, not the colour: it is an accent in light
+   * and plain white in dark, so an appearance-based name would lie in one of
+   * the two modes.
+   *
+   * TEMPORARY BRIDGE: Figma has no popup-surface token for this yet, which is
+   * why this declaration survives (figma/variables.css is imported after this
+   * file and would otherwise win). Delete once Figma exports it.
+   */
+  --color-popup-item-fg-checked: light-dark(
+    var(--color-primary-800),
+    var(--color-white)
+  );
+}
+
+/*
+ * Panel foundation. Surface only — placement animation stays in the
+ * component's tv() slots because it differs per Zag machine.
+ *
+ * Height is capped at the space the positioner actually measured
+ * (--available-height, set by Zag/Floating UI) rather than a fixed height or
+ * a magic pixel value, so a 2-option list is short and a 50-option list
+ * scrolls instead of running off-screen.
+ */
+@utility popup-surface-base {
+  background-color: var(--color-popup-bg);
+  border-width: var(--border-width-popup);
+  border-style: solid;
+  border-color: var(--color-popup-border);
+  border-radius: var(--radius-popup);
+  box-shadow: var(--shadow-popup);
+  padding: var(--padding-popup-viewport);
+  max-height: var(--available-height);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  z-index: calc(var(--z-popup) + var(--layer-index, 0));
+
+  /* The panel takes DOM focus for keyboard navigation, but that focus is
+   * never the thing the user should see — the highlighted option is. */
+  outline: none;
+
+  /* Scale from the trigger, whichever side the panel flipped to. */
+  transform-origin: var(--transform-origin);
+}
+
+/*
+ * Per-size scale. Applied to the panel so every option inside inherits it —
+ * this is what ties the open dropdown's proportions to the size of the
+ * control that opened it. Each size also matches the panel's corner radius to
+ * the trigger's radius at the same size.
+ */
+@utility popup-size-xs {
+  --popup-item-x: var(--padding-popup-item-x-xs);
+  --popup-item-y: var(--padding-popup-item-y-xs);
+  --popup-item-gap: var(--spacing-popup-item-xs);
+
+  border-radius: var(--radius-popup-xs);
+}
+
+@utility popup-size-sm {
+  --popup-item-x: var(--padding-popup-item-x-sm);
+  --popup-item-y: var(--padding-popup-item-y-sm);
+  --popup-item-gap: var(--spacing-popup-item-sm);
+
+  border-radius: var(--radius-popup-sm);
+}
+
+@utility popup-size-md {
+  --popup-item-x: var(--padding-popup-item-x-md);
+  --popup-item-y: var(--padding-popup-item-y-md);
+  --popup-item-gap: var(--spacing-popup-item-md);
+
+  border-radius: var(--radius-popup-md);
+}
+
+@utility popup-size-lg {
+  --popup-item-x: var(--padding-popup-item-x-lg);
+  --popup-item-y: var(--padding-popup-item-y-lg);
+  --popup-item-gap: var(--spacing-popup-item-lg);
+
+  border-radius: var(--radius-popup-lg);
+}
+
+/*
+ * Option foundation.
+ *
+ * Two independent states, never conflated:
+ *   - highlighted (pointer hover OR keyboard cursor) → background tint
+ *   - checked (current selection)                    → indicator + accent fg
+ * They can co-occur, and the indicator means selection is never signalled by
+ * colour alone.
+ */
+@utility popup-item-base {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border-radius: var(--radius-popup-item);
+  color: var(--color-popup-item-fg);
+
+  /* --popup-item-x/y/gap are set per size by the panel's popup-size-*;
+   * md is the fallback for a panel that declares no size. */
+  padding: var(--popup-item-y, var(--padding-popup-item-y-md))
+    var(--popup-item-x, var(--padding-popup-item-x-md));
+  gap: var(--popup-item-gap, var(--spacing-popup-item-md));
+
+  /* Permanent gutter for the selection indicator. */
+  padding-inline-end: calc(
+    var(--popup-item-x, var(--padding-popup-item-x-md)) +
+    var(--size-popup-indicator)
+  );
+
+  /* Every popup option is clickable — signal it like any other control. */
+  cursor: pointer;
+  user-select: none;
+
+  /* Highlight is the focus affordance; a second ring on top of it reads as
+   * two selected rows. */
+  outline: none;
+}

package/src/tokens/components/components.css

@@ -1,5 +1,5 @@
 @import "./_form-control.css";
-@import "./_icon-button.css";
+@import "./_popup-surface.css";
 
 @import "./atoms/_badge.css";
 @import "./atoms/_button.css";
@@ -19,6 +19,7 @@
 @import "./molecules/_accordion.css";
 @import "./molecules/_breadcrumb.css";
 @import "./molecules/_carousel.css";
+@import "./molecules/_chart.css";
 @import "./molecules/_color-select.css";
 @import "./molecules/_combobox.css";
 @import "./molecules/_dialog.css";
@@ -30,7 +31,6 @@
 @import "./molecules/_tabs.css";
 @import "./molecules/_product-card.css";
 @import "./molecules/_slider.css";
-@import "./molecules/_search-form.css";
 @import "./molecules/_select.css";
 @import "./molecules/_phone-input.css";
 @import "./molecules/_steps.css";

package/src/tokens/components/molecules/_chart.css

@@ -0,0 +1,98 @@
+/*
+ * Chart — PROTOTYPE tokens (not yet exported from Figma; once the MVP look is
+ * signed off, mirror these into Figma via the figma-token-binding skill).
+ *
+ * Series palette: six fixed-order categorical hues for data identity. The
+ * exact primitive steps were chosen so the SAME values pass the dataviz
+ * six-checks validator (lightness band, chroma floor, adjacent-pair CVD
+ * separation, normal-vision floor, >=3:1 surface contrast) on BOTH the light
+ * (white) and dark (gray-950) chart surfaces — hence no light-dark() split.
+ *
+ * `--color-primary` (blue-300/sky-300) is deliberately NOT series-1: it sits
+ * outside the chart lightness band in light mode. Brand themes that want
+ * branded charts should override `--color-chart-series-*` with steps that
+ * re-pass the validator, not alias the brand accent directly.
+ */
+
+@theme static {
+  /* Reference layer — series identity, assigned in fixed order. The palette is
+   * six entries and TanStack indexes it modulo its length (scales.js), so a 7th
+   * distinct series wraps back onto series-1 rather than erroring. Keep charts
+   * to <=6 series; Chart warns in dev when a dataset exceeds that.
+   *
+   * Note: `--color-blue-500` is re-declared by figma/variables.css, which is
+   * imported after this file — series-1 therefore resolves to the Figma step
+   * (chroma 0.188), not Tailwind's default (chroma 0.214). Series 2-6 have no
+   * Figma counterpart and resolve to Tailwind defaults. Re-run the dataviz
+   * validator against these *resolved* values before treating the set as
+   * signed off. */
+  --color-chart-series-1: var(--color-blue-500);
+  --color-chart-series-2: var(--color-orange-600);
+  --color-chart-series-3: var(--color-emerald-600);
+  --color-chart-series-4: var(--color-violet-500);
+  --color-chart-series-5: var(--color-rose-500);
+  --color-chart-series-6: var(--color-cyan-600);
+
+  /* Derived layer — chart chrome and tooltip surface. Axis/tick/legend text
+   * renders at small sizes inside the SVG, so it wears primary ink rather than
+   * the secondary tone.
+   *
+   * Caveat on the contrast math: TanStack composites this color before it
+   * paints — tick/legend labels at fillOpacity 0.68, axis lines at
+   * strokeOpacity 0.28 (scene.js). So the *rendered* label is fg-primary at 68%
+   * over the surface, not fg-primary itself, and it does not reach the repo's
+   * 90 Lc gold gate on its own. Fixing that properly means compensating for the
+   * library opacity (or overriding it), not swapping this token — tracked in
+   * https://github.com/TechsioCZ/new-engine/issues/608 rather than silently
+   * claimed as passing. */
+  --color-chart-fg: var(--color-fg-primary);
+  --color-chart-tooltip-bg: var(--color-tooltip-bg);
+  --color-chart-tooltip-fg: var(--color-tooltip-fg);
+  --color-chart-tooltip-border: var(--color-tooltip-border-outline);
+  --radius-chart-tooltip: var(--radius-tooltip);
+  --text-chart-tooltip: var(--text-tooltip-md);
+  --padding-chart-tooltip: var(--padding-tooltip-md);
+  --border-width-chart-tooltip: var(--border-width-tooltip);
+  --font-chart-tooltip: var(--font-body);
+  --font-weight-chart-tooltip: var(--font-weight-medium);
+}
+
+/*
+ * Bridge our series tokens into TanStack Charts' categorical palette
+ * variables (`--ts-chart-1..6`). Axis text, muted labels and grid lines
+ * inherit `currentColor`, so the host also carries `text-chart-fg`.
+ */
+@utility chart-base {
+  --ts-chart-1: var(--color-chart-series-1);
+  --ts-chart-2: var(--color-chart-series-2);
+  --ts-chart-3: var(--color-chart-series-3);
+  --ts-chart-4: var(--color-chart-series-4);
+  --ts-chart-5: var(--color-chart-series-5);
+  --ts-chart-6: var(--color-chart-series-6);
+}
+
+/*
+ * Surface styling for the library's native HTML tooltip element.
+ *
+ * `!important` is load-bearing, not defensive: TanStack's `createTooltip()`
+ * writes background/color/border/border-radius/padding and a `font` shorthand
+ * directly onto `element.style`, then only *appends* this class. Inline styles
+ * beat class rules, so without `!important` every declaration below is dead and
+ * the tooltip renders in the system `Canvas`/`CanvasText` colors — visible as an
+ * unthemed tooltip under the neo/cyber brands and in dark mode. The `font`
+ * shorthand also resets font-size, so that too must win.
+ */
+@utility chart-tooltip {
+  background: var(--color-chart-tooltip-bg) !important;
+  color: var(--color-chart-tooltip-fg) !important;
+  border: var(--border-width-chart-tooltip) solid
+    var(--color-chart-tooltip-border) !important;
+  border-radius: var(--radius-chart-tooltip) !important;
+  padding: var(--padding-chart-tooltip) !important;
+  /* The inline `font` shorthand sets family, weight, size and line-height in
+   * one go, so countering only the size would leave the chart tooltip in
+   * system-ui while every other tooltip in the library uses --font-body. */
+  font-family: var(--font-chart-tooltip) !important;
+  font-size: var(--text-chart-tooltip) !important;
+  font-weight: var(--font-weight-chart-tooltip) !important;
+}

package/src/tokens/components/molecules/_combobox.css

@@ -4,10 +4,7 @@
  * Kept here:
  *   - `--padding-combobox-input-{size}` semantic aliases (Figma exports
  *     the shared per-size spacing axis).
- *   - `--padding-combobox-item-{size}` combined shorthands (Figma splits
- *     the item padding into x + per-size y).
  *   - `--padding-combobox-trigger` composite.
- *   - `--z-combobox-content` layering (code-side).
  */
 
 @theme static {
@@ -15,16 +12,7 @@
   --padding-combobox-input-md: var(--spacing-combobox-md);
   --padding-combobox-input-lg: var(--spacing-combobox-lg);
 
-  --padding-combobox-item-sm: var(--spacing-combobox-item-padding-y-sm)
-    var(--spacing-combobox-item-padding-x);
-  --padding-combobox-item-md: var(--spacing-combobox-item-padding-y-md)
-    var(--spacing-combobox-item-padding-x);
-  --padding-combobox-item-lg: var(--spacing-combobox-item-padding-y-lg)
-    var(--spacing-combobox-item-padding-x);
-
   --padding-combobox-trigger: 0 var(--spacing-100);
-
-  --z-combobox-content: 20;
 }
 
 /* Semantic tokens for combobox icons */

package/src/tokens/components/molecules/_menu.css

@@ -3,12 +3,16 @@
  *
  * Kept here:
  *   - semantic glyph @utility aliases.
+ *   - `--text-menu-xs` — Figma exports sm/md/lg for this component; xs was
+ *     added code-side alongside DataTable's xs-sized column-settings menu.
  */
 
 @theme static {
   /* Tailwind's h- utility doesn't read the --size-* namespace; alias the
    * Figma token into --height-* so `h-menu-separator` keeps working. */
   --height-menu-separator: var(--size-menu-separator-height);
+
+  --text-menu-xs: var(--text-xs);
 }
 
 /* Semantic tokens for menu icons */

package/src/tokens/components/molecules/_select.css

@@ -4,23 +4,12 @@
  * Kept here:
  *   - `--color-select-danger` — helper-text color seed (Figma has only
  *     border validation colors).
- *   - `--padding-select-item` composite bridge (Figma splits x/y).
- *   - `--spacing-content` — consumed as a raw var() inside calc() in the
- *     TSX; aliases Figma's --spacing-select-content.
- *   - `--z-content` layering (code-side).
  */
 
 @theme static {
   --color-select-danger: var(--color-danger);
-
-  --padding-select-item: var(--padding-select-item-y) var(--padding-select-item-x);
-
-  --spacing-content: var(--spacing-select-content);
-
-  --z-content: 50;
 }
 
-
 /* === ICONS === */
 @utility token-icon-select-indicator {
   @apply token-icon-chevron-down;

package/src/tokens/components/organisms/_table.css

@@ -14,4 +14,21 @@
     var(--padding-table-cell-md-x);
   --padding-table-cell-lg: var(--padding-table-cell-lg-y)
     var(--padding-table-cell-lg-x);
+
+  /*
+   * Foreground for a selected row. Figma exports
+   * --color-table-row-bg-selected but has no `fg` counterpart, so
+   * `text-table-row-fg-selected` in table.tsx generated no utility at all and
+   * selected rows silently kept their normal text colour on the filled brand
+   * background. Reported by review; this restores the intended pairing.
+   *
+   * White clears AA against every selected background the row can have:
+   * base light #155dfc 5.24:1, base dark #0069a8 5.86:1, neo #e60101 4.81:1
+   * in both modes. Mode-invariant, because the selected fill stays a solid
+   * brand colour in light and dark alike.
+   *
+   * TEMPORARY BRIDGE: delete once Figma exports color/table/row/fg/selected —
+   * figma/variables.css is imported after this file and would win.
+   */
+  --color-table-row-fg-selected: var(--color-white);
 }

package/src/tokens/figma/brand-overrides.css

@@ -9,17 +9,42 @@
  */
 
 [data-theme="neo"] {
-  --color-badge-fg-primary: var(--color-fg-reverse);
+  --color-bg-danger-active: light-dark(oklch(0.584 0.191 22.13), oklch(0.881 0.063 18.416));
+  --color-bg-danger-hover: light-dark(oklch(0.624 0.19 22.474), oklch(0.855 0.079 18.827));
+  --color-bg-light-danger-active: light-dark(oklch(0.685 0.114 22.469), oklch(0.962 0.019 25.602));
+  --color-bg-light-danger-base: oklch(0.9 0.048 18.09);
+  --color-bg-light-danger-hover: light-dark(oklch(0.725 0.114 22.247), oklch(0.953 0.023 24.126));
   --color-bg-light-primary-active: var(--color-primary-300);
   --color-bg-light-primary-base: var(--color-primary-100);
   --color-bg-light-primary-hover: var(--color-primary-200);
+  --color-bg-light-secondary-active: light-dark(oklch(0.685 0.128 47.292), oklch(0.97 0.107 105.368));
+  --color-bg-light-secondary-base: oklch(0.893 0.063 56.696);
+  --color-bg-light-secondary-hover: light-dark(oklch(0.726 0.128 47.749), oklch(0.97 0.107 105.368));
+  --color-bg-light-tertiary-active: light-dark(oklch(0.802 0.073 346.374), oklch(0.884 0.064 6.283));
+  --color-bg-light-tertiary-base: oklch(0.941 0.034 344.058);
+  --color-bg-light-tertiary-hover: light-dark(oklch(0.842 0.072 346.249), oklch(0.857 0.079 9.107));
+  --color-bg-light-warning-active: light-dark(oklch(0.775 0.11 86.269), oklch(0.975 0.117 107.339));
+  --color-bg-light-warning-base: oklch(0.928 0.073 92.942);
+  --color-bg-light-warning-hover: light-dark(oklch(0.816 0.11 86.477), oklch(0.975 0.117 107.339));
   --color-bg-outlined-primary-active: var(--color-primary-200);
   --color-bg-outlined-primary-hover: var(--color-primary-100);
   --color-bg-primary-active: var(--color-primary-800);
   --color-bg-primary-base: var(--color-primary-600);
   --color-bg-primary-hover: var(--color-primary-700);
-  --color-button-fg-primary: var(--color-fg-reverse);
+  --color-bg-tertiary-active: light-dark(oklch(0.704 0.119 346.312), oklch(0.769 0.142 7.776));
+  --color-bg-tertiary-hover: light-dark(oklch(0.743 0.12 345.839), oklch(0.747 0.158 9.988));
+  --color-bg-warning-active: light-dark(oklch(0.678 0.142 76.945), oklch(0.937 0.199 105.01));
+  --color-bg-warning-hover: light-dark(oklch(0.718 0.149 79.256), oklch(0.909 0.189 99.865));
+  --color-fg-accent-danger: oklch(0.452 0.066 4.881);
   --color-fg-accent-primary: var(--color-primary-600);
+  --color-fg-accent-secondary: oklch(0.447 0.076 49.767);
+  --color-fg-accent-success: light-dark(var(--color-success-500), var(--color-success-300));
+  --color-fg-accent-tertiary: oklch(0.511 0.054 323.997);
+  --color-fg-accent-warning: oklch(0.492 0.079 93.623);
+  --color-fg-on-primary-indicator: light-dark(var(--color-fg-reverse), var(--color-white));
+  --color-fg-on-primary-solid: light-dark(var(--color-fg-reverse), var(--color-white));
+  --color-fg-on-primary-solid-neo: light-dark(var(--color-fg-reverse), var(--color-white));
+  --color-fill-selected: var(--color-primary-600);
   --color-primary-100: oklch(0.936 0.032 17.738);
   --color-primary-200: oklch(0.883 0.062 18.386);
   --color-primary-300: oklch(0.805 0.111 19.782);
@@ -29,21 +54,118 @@
   --color-primary-700: light-dark(oklch(0.509 0.209 28.513), oklch(0.583 0.239 28.476));
   --color-primary-800: light-dark(oklch(0.445 0.177 26.787), oklch(0.509 0.209 28.513));
   --color-primary-900: light-dark(oklch(0.397 0.141 25.714), oklch(0.445 0.177 26.787));
-  --color-primary-alpha-10: oklch(0.581 0.238 29.234 / 0.1);
-  --color-product-card-button-cart-fg: var(--color-fg-reverse);
-  --color-radio-card-addon-fg-solid-checked: var(--color-fg-reverse);
-  --color-radio-card-item-description-fg-solid-checked: var(--color-fg-reverse);
-  --color-radio-card-item-indicator-bg-solid-checked: var(--color-fg-reverse);
-  --color-radio-card-item-indicator-border-solid-checked: var(--color-fg-reverse);
-  --color-secondary-100: #fef3c7;
-  --color-secondary-200: #fde68a;
-  --color-secondary-300: #fcd34d;
-  --color-secondary-400: #fbbf24;
-  --color-secondary-500: #f59e0b;
-  --color-secondary-600: #d97706;
-  --color-secondary-700: #b45309;
-  --color-secondary-800: #92400e;
-  --color-secondary-900: #78350f;
-  --color-steps-indicator-fg-solid: var(--color-fg-reverse);
-  --color-tabs-trigger-fg-solid-selected: var(--color-fg-reverse);
+  --color-secondary-100: oklch(0.962 0.058 95.617);
+  --color-secondary-200: oklch(0.924 0.115 95.746);
+  --color-secondary-300: oklch(0.879 0.153 91.605);
+  --color-secondary-400: oklch(0.837 0.164 84.429);
+  --color-secondary-500: oklch(0.769 0.165 70.08);
+  --color-secondary-600: oklch(0.666 0.157 58.318);
+  --color-secondary-700: oklch(0.555 0.146 48.998);
+  --color-secondary-800: oklch(0.473 0.125 46.201);
+  --color-secondary-900: oklch(0.414 0.105 45.904);
+}
+
+[data-theme="business"] {
+  --color-base: var(--color-white);
+  --color-base-reverse: var(--color-gray-950);
+  --color-bg-badge-danger-solid: var(--color-danger-300);
+  --color-bg-badge-primary-solid: var(--color-primary-800);
+  --color-bg-badge-secondary-solid: var(--color-secondary-800);
+  --color-bg-danger-active: var(--color-danger-500);
+  --color-bg-danger-hover: var(--color-danger-400);
+  --color-bg-disabled: var(--color-neutral-100);
+  --color-bg-light-danger-active: var(--color-danger-300);
+  --color-bg-light-danger-base: var(--color-danger-100);
+  --color-bg-light-danger-hover: var(--color-danger-200);
+  --color-bg-light-primary-active: var(--color-primary-300);
+  --color-bg-light-primary-base: var(--color-primary-100);
+  --color-bg-light-primary-hover: var(--color-primary-200);
+  --color-bg-light-secondary-active: var(--color-secondary-300);
+  --color-bg-light-secondary-base: var(--color-secondary-100);
+  --color-bg-light-secondary-hover: var(--color-secondary-200);
+  --color-bg-light-tertiary-active: var(--color-tertiary-300);
+  --color-bg-light-tertiary-base: var(--color-tertiary-100);
+  --color-bg-light-tertiary-hover: var(--color-tertiary-200);
+  --color-bg-light-warning-active: var(--color-warning-300);
+  --color-bg-light-warning-base: var(--color-warning-100);
+  --color-bg-light-warning-hover: var(--color-warning-200);
+  --color-bg-outlined-danger-active: oklch(0.7 0.191 23.399 / 0.122);
+  --color-bg-outlined-danger-hover: oklch(0.702 0.19 23.327 / 0.161);
+  --color-bg-outlined-primary-active: var(--color-primary-200);
+  --color-bg-outlined-primary-hover: var(--color-primary-100);
+  --color-bg-outlined-secondary-active: var(--color-secondary-200);
+  --color-bg-outlined-secondary-hover: var(--color-secondary-100);
+  --color-bg-outlined-tertiary-active: oklch(0.816 0.114 343.311 / 0.122);
+  --color-bg-outlined-tertiary-hover: oklch(0.819 0.125 347.339 / 0.161);
+  --color-bg-outlined-warning-active: oklch(0.789 0.163 80.949 / 0.122);
+  --color-bg-outlined-warning-hover: oklch(0.788 0.162 82.711 / 0.161);
+  --color-bg-primary-active: var(--color-primary-700);
+  --color-bg-primary-base: var(--color-primary-500);
+  --color-bg-primary-hover: var(--color-primary-600);
+  --color-bg-scrim: oklch(0.129 0.041 264.695 / 0.1);
+  --color-bg-secondary-active: var(--color-secondary-700);
+  --color-bg-secondary-hover: var(--color-secondary-600);
+  --color-bg-success: var(--color-success-500);
+  --color-bg-switch-checked-hover: var(--color-success-600);
+  --color-bg-switch-hover: var(--color-neutral-300);
+  --color-bg-switch-invalid: var(--color-danger-400);
+  --color-bg-tertiary-active: var(--color-tertiary-500);
+  --color-bg-tertiary-hover: var(--color-tertiary-400);
+  --color-bg-warning-active: var(--color-warning-500);
+  --color-bg-warning-hover: var(--color-warning-400);
+  --color-border-danger-focus: var(--color-danger-400);
+  --color-border-danger-hover: var(--color-danger-500);
+  --color-border-disabled: var(--color-neutral-300);
+  --color-border-primary: var(--color-black-15);
+  --color-border-success-focus: var(--color-success-500);
+  --color-border-success-hover: var(--color-success-600);
+  --color-border-warning-focus: var(--color-warning-500);
+  --color-border-warning-hover: var(--color-warning-600);
+  --color-fg-accent-danger: var(--color-danger-600);
+  --color-fg-accent-primary: var(--color-primary-600);
+  --color-fg-accent-secondary: var(--color-secondary-700);
+  --color-fg-accent-success: var(--color-success-600);
+  --color-fg-accent-tertiary: var(--color-tertiary-600);
+  --color-fg-accent-warning: var(--color-warning-600);
+  --color-fg-badge-on-solid: var(--color-fg-reverse);
+  --color-fg-icon-tree: var(--color-fg-primary);
+  --color-fg-on-accent-solid: var(--color-fg-reverse);
+  --color-fg-on-primary-solid-neo: var(--color-fg-reverse);
+  --color-fg-primary: var(--color-slate-950);
+  --color-fg-reverse: var(--color-white);
+  --color-fg-status-error: var(--color-danger-400);
+  --color-fg-status-success: var(--color-success-500);
+  --color-fg-status-warning: var(--color-warning-500);
+  --color-fill-active: var(--color-black-15);
+  --color-fill-base: var(--color-black-5);
+  --color-fill-borderless-active: oklch(0 0 0 / 0);
+  --color-fill-borderless-base: oklch(0 0 0 / 0);
+  --color-fill-borderless-hover: oklch(0 0 0 / 0);
+  --color-fill-highlight: var(--color-neutral-300);
+  --color-fill-hover: var(--color-primary-200);
+  --color-fill-overlay: var(--color-neutral-200);
+  --color-fill-selected: var(--color-primary-600);
+  --color-fill-surface: var(--color-neutral-100);
+  --color-link: var(--color-blue-500);
+  --color-primary-100: oklch(0.952 0.016 253.903);
+  --color-primary-200: oklch(0.877 0.039 250.677);
+  --color-primary-300: oklch(0.774 0.066 247.294);
+  --color-primary-400: oklch(0.666 0.095 248.083);
+  --color-primary-500: oklch(0.522 0.117 253.551);
+  --color-primary-600: oklch(0.452 0.106 253.721);
+  --color-primary-700: oklch(0.391 0.097 256.616);
+  --color-primary-800: oklch(0.339 0.082 255.266);
+  --color-primary-900: oklch(0.287 0.065 255.034);
+  --color-ring-default: var(--color-black);
+  --color-secondary-100: oklch(0.957 0.017 183.538);
+  --color-secondary-200: oklch(0.886 0.041 181.135);
+  --color-secondary-300: oklch(0.78 0.072 181.145);
+  --color-secondary-400: oklch(0.679 0.094 181.719);
+  --color-secondary-500: oklch(0.593 0.097 179.623);
+  --color-secondary-600: oklch(0.509 0.082 181.568);
+  --color-secondary-700: oklch(0.445 0.073 178.22);
+  --color-secondary-800: oklch(0.381 0.06 182.018);
+  --color-secondary-900: oklch(0.327 0.051 180.942);
+  --color-success: var(--color-success-500);
+  --default-ring-color: oklch(0 0 0);
 }