@techsio/ui-kit 0.39.0 → 0.40.0

package/dist/src/theme/theme-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-config.d.ts","sourceRoot":"","sources":["../../../src/theme/theme-config.ts"],"names":[],"mappings":"AAaA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC,yEAAyE;AACzE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAA;AAE9C,MAAM,MAAM,WAAW,GAAG;IACxB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,sEAAsE;IACtE,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;;;;;CAG6B,CAAA;AAEhD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,MAAM,CAAA;AAE1C,eAAO,MAAM,aAAa,EAAE,QAAiB,CAAA;AAC7C,eAAO,MAAM,YAAY,EAAE,WAAsB,CAAA;AAEjD,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,aAAa,CAAA;AAC3C,eAAO,MAAM,gBAAgB,YAAY,CAAA;AAEzC,wBAAgB,SAAS,IAAI,QAAQ,EAAE,CAEtC;AAED,wBAAgB,QAAQ,CAAC,GAAG,EAAE,QAAQ,GAAG,WAAW,CAEnD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,QAAQ,CAE3D;AAED,kFAAkF;AAClF,wBAAgB,SAAS,CAAC,GAAG,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,CAE3D;AAED,kFAAkF;AAClF,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,QAAQ,GAAG,OAAO,CAExD;AAED,mFAAmF;AACnF,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,QAAQ,GAAG,WAAW,EAAE,CAElE"}
+{"version":3,"file":"theme-config.d.ts","sourceRoot":"","sources":["../../../src/theme/theme-config.ts"],"names":[],"mappings":"AAaA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC,yEAAyE;AACzE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAA;AAE9C,MAAM,MAAM,WAAW,GAAG;IACxB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,sEAAsE;IACtE,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAI6B,CAAA;AAEhD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,MAAM,CAAA;AAE1C,eAAO,MAAM,aAAa,EAAE,QAAiB,CAAA;AAC7C,eAAO,MAAM,YAAY,EAAE,WAAsB,CAAA;AAEjD,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,aAAa,CAAA;AAC3C,eAAO,MAAM,gBAAgB,YAAY,CAAA;AAEzC,wBAAgB,SAAS,IAAI,QAAQ,EAAE,CAEtC;AAED,wBAAgB,QAAQ,CAAC,GAAG,EAAE,QAAQ,GAAG,WAAW,CAEnD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,QAAQ,CAE3D;AAED,kFAAkF;AAClF,wBAAgB,SAAS,CAAC,GAAG,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,CAE3D;AAED,kFAAkF;AAClF,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,QAAQ,GAAG,OAAO,CAExD;AAED,mFAAmF;AACnF,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,QAAQ,GAAG,WAAW,EAAE,CAElE"}

package/dist/stories/changelog/changelog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAoKtD,iBAAS,SAAS,4CAUjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAM,CAAA"}
+{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAgLtD,iBAAS,SAAS,4CAUjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAM,CAAA"}

package/dist/theme/theme-config.js

@@ -13,6 +13,13 @@ const THEMES = {
             "dark"
         ],
         attr: "neo"
+    },
+    business: {
+        label: "Business",
+        modes: [
+            "light"
+        ],
+        attr: "business"
     }
 };
 const DEFAULT_BRAND = "base";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "type": "module",
   "repository": {
     "type": "git",

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";
@@ -31,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/_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);
 }