@techsio/ui-kit 0.12.0 → 0.14.0

package/dist/.storybook/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../.storybook/main.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAE9D,QAAA,MAAM,MAAM,EAAE,eAoBb,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../.storybook/main.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAE9D,QAAA,MAAM,MAAM,EAAE,eAkBb,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/.storybook/preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../.storybook/preview.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,yBAAyB,CAAA;AAEhC,QAAA,MAAM,OAAO,EAAE,OA4Cd,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../.storybook/preview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAU1D,OAAO,yBAAyB,CAAA;AA2ChC,QAAA,MAAM,OAAO,EAAE,OA0Dd,CAAA;AAED,eAAe,OAAO,CAAA"}

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

@@ -0,0 +1,41 @@
+export type ColorMode = "light" | "dark";
+/** What the user can pick for the mode axis. `system` follows the OS. */
+export type ModeSetting = ColorMode | "system";
+export type BrandConfig = {
+    /** Human label shown in togglers. */
+    label: string;
+    /** Concrete modes this brand ships. Light-only brands omit "dark". */
+    modes: ColorMode[];
+    /**
+     * `data-theme` attribute value for this brand. Omitted for the base brand,
+     * which is the default `:root` / `@theme` and needs no attribute.
+     */
+    attr?: string;
+};
+export declare const THEMES: {
+    readonly base: {
+        readonly label: "Default";
+        readonly modes: ["light", "dark"];
+    };
+    readonly neo: {
+        readonly label: "Neo (Red)";
+        readonly modes: ["light", "dark"];
+        readonly attr: "neo";
+    };
+};
+export type BrandKey = keyof typeof THEMES;
+export declare const DEFAULT_BRAND: BrandKey;
+export declare const DEFAULT_MODE: ModeSetting;
+/** localStorage keys used by the provider for persistence. */
+export declare const BRAND_STORAGE_KEY = "ui-brand";
+export declare const MODE_STORAGE_KEY = "ui-mode";
+export declare function brandKeys(): BrandKey[];
+export declare function getBrand(key: BrandKey): BrandConfig;
+export declare function isBrandKey(value: string): value is BrandKey;
+/** `data-theme` value for a brand, or `undefined` for the attribute-less base. */
+export declare function brandAttr(key: BrandKey): string | undefined;
+/** Whether a brand ships a dark variant (and therefore allows mode switching). */
+export declare function brandSupportsDark(key: BrandKey): boolean;
+/** Mode settings a brand allows in a toggler. Light-only brands get just light. */
+export declare function availableModeSettings(key: BrandKey): ModeSetting[];
+//# sourceMappingURL=theme-config.d.ts.map

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

@@ -0,0 +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"}

package/dist/src/theme/theme-provider.d.ts

@@ -0,0 +1,37 @@
+import { type PropsWithChildren } from "react";
+import { type BrandKey, type ColorMode, type ModeSetting } from "./theme-config";
+type AppThemeProviderProps = PropsWithChildren<{
+    defaultBrand?: BrandKey;
+    defaultMode?: ModeSetting;
+}>;
+export declare function AppThemeProvider({ defaultBrand, defaultMode, children, }: AppThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export type UseAppThemeResult = {
+    /** Active brand key. */
+    brand: BrandKey;
+    /** All brand keys, for building a brand toggler. */
+    brands: BrandKey[];
+    setBrand: (brand: BrandKey) => void;
+    /** Current mode setting (may be "system"). */
+    mode: ModeSetting;
+    /** Resolved concrete mode after applying "system". */
+    resolvedMode: ColorMode;
+    setMode: (mode: ModeSetting) => void;
+    /** Mode settings allowed for the active brand (light-only brands get just light). */
+    availableModes: ModeSetting[];
+    /** False during SSR and the first client render; gate brand-dependent UI on it. */
+    mounted: boolean;
+};
+export declare function useAppTheme(): UseAppThemeResult;
+/**
+ * Pre-hydration script that applies the persisted brand's `data-theme` before
+ * the page paints, preventing a flash of the default brand. Render it as early
+ * as possible: in `<head>`, or — for the Next.js App Router, which does not
+ * allow arbitrary `<head>` children in a layout — as the first child of
+ * `<body>`, where it still runs synchronously before any body content renders.
+ * better-themes injects its own equivalent script for the mode axis.
+ */
+export declare function BrandThemeScript({ defaultBrand, }: {
+    defaultBrand?: BrandKey;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=theme-provider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AAaA,OAAO,EAEL,KAAK,iBAAiB,EAIvB,MAAM,OAAO,CAAA;AACd,OAAO,EAGL,KAAK,QAAQ,EAIb,KAAK,SAAS,EAKd,KAAK,WAAW,EACjB,MAAM,gBAAgB,CAAA;AAmFvB,KAAK,qBAAqB,GAAG,iBAAiB,CAAC;IAC7C,YAAY,CAAC,EAAE,QAAQ,CAAA;IACvB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAC,CAAA;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,YAA4B,EAC5B,WAA0B,EAC1B,QAAQ,GACT,EAAE,qBAAqB,2CAavB;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,wBAAwB;IACxB,KAAK,EAAE,QAAQ,CAAA;IACf,oDAAoD;IACpD,MAAM,EAAE,QAAQ,EAAE,CAAA;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAA;IACnC,8CAA8C;IAC9C,IAAI,EAAE,WAAW,CAAA;IACjB,sDAAsD;IACtD,YAAY,EAAE,SAAS,CAAA;IACvB,OAAO,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IACpC,qFAAqF;IACrF,cAAc,EAAE,WAAW,EAAE,CAAA;IAC7B,mFAAmF;IACnF,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,wBAAgB,WAAW,IAAI,iBAAiB,CA4B/C;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,YAA4B,GAC7B,EAAE;IACD,YAAY,CAAC,EAAE,QAAQ,CAAA;CACxB,2CAoBA"}

package/dist/src/theme/theme-toggle.d.ts

@@ -0,0 +1,4 @@
+export declare function ThemeToggle({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=theme-toggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/theme/theme-toggle.tsx"],"names":[],"mappings":"AA6BA,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CA6ChE"}

package/dist/theme/theme-config.js

@@ -0,0 +1,46 @@
+const THEMES = {
+    base: {
+        label: "Default",
+        modes: [
+            "light",
+            "dark"
+        ]
+    },
+    neo: {
+        label: "Neo (Red)",
+        modes: [
+            "light",
+            "dark"
+        ],
+        attr: "neo"
+    }
+};
+const DEFAULT_BRAND = "base";
+const DEFAULT_MODE = "system";
+const BRAND_STORAGE_KEY = "ui-brand";
+const MODE_STORAGE_KEY = "ui-mode";
+function brandKeys() {
+    return Object.keys(THEMES);
+}
+function getBrand(key) {
+    return THEMES[key];
+}
+function isBrandKey(value) {
+    return Object.hasOwn(THEMES, value);
+}
+function brandAttr(key) {
+    return getBrand(key).attr;
+}
+function brandSupportsDark(key) {
+    return getBrand(key).modes.includes("dark");
+}
+function availableModeSettings(key) {
+    return brandSupportsDark(key) ? [
+        "light",
+        "dark",
+        "system"
+    ] : [
+        "light"
+    ];
+}
+export { BRAND_STORAGE_KEY, DEFAULT_BRAND, DEFAULT_MODE, MODE_STORAGE_KEY, THEMES, availableModeSettings, brandAttr, brandKeys, brandSupportsDark, getBrand, isBrandKey };

package/dist/theme/theme-provider.js

@@ -0,0 +1,101 @@
+"use client"
+import { jsx } from "react/jsx-runtime";
+import { ThemeProvider, useTheme } from "better-themes";
+import { createContext, useContext, useEffect, useState } from "react";
+import { BRAND_STORAGE_KEY, DEFAULT_BRAND, DEFAULT_MODE, MODE_STORAGE_KEY, availableModeSettings, brandAttr, brandKeys, brandSupportsDark, isBrandKey } from "./theme-config.js";
+function readStoredBrand() {
+    if ("undefined" == typeof window) return null;
+    try {
+        const value = window.localStorage.getItem(BRAND_STORAGE_KEY);
+        return value && isBrandKey(value) ? value : null;
+    } catch  {
+        return null;
+    }
+}
+function persistBrand(brand) {
+    if ("undefined" == typeof window) return;
+    try {
+        window.localStorage.setItem(BRAND_STORAGE_KEY, brand);
+    } catch  {}
+}
+function applyBrandAttr(brand) {
+    if ("undefined" == typeof document) return;
+    const attr = brandAttr(brand);
+    const root = document.documentElement;
+    if (attr) root.setAttribute("data-theme", attr);
+    else root.removeAttribute("data-theme");
+}
+const BrandContext = /*#__PURE__*/ createContext(null);
+function BrandProvider({ defaultBrand, children }) {
+    const { setTheme } = useTheme();
+    const [brand, setBrandState] = useState(()=>readStoredBrand() ?? defaultBrand);
+    const [mounted, setMounted] = useState(false);
+    useEffect(()=>{
+        setMounted(true);
+    }, []);
+    useEffect(()=>{
+        applyBrandAttr(brand);
+        persistBrand(brand);
+        if (!brandSupportsDark(brand)) setTheme("light");
+    }, [
+        brand,
+        setTheme
+    ]);
+    return /*#__PURE__*/ jsx(BrandContext.Provider, {
+        value: {
+            brand,
+            setBrand: setBrandState,
+            mounted
+        },
+        children: children
+    });
+}
+function AppThemeProvider({ defaultBrand = DEFAULT_BRAND, defaultMode = DEFAULT_MODE, children }) {
+    return /*#__PURE__*/ jsx(ThemeProvider, {
+        attribute: "class",
+        defaultTheme: defaultMode,
+        disableTransitionOnChange: true,
+        enableSystem: true,
+        storageKey: MODE_STORAGE_KEY,
+        themes: [
+            "light",
+            "dark"
+        ],
+        children: /*#__PURE__*/ jsx(BrandProvider, {
+            defaultBrand: defaultBrand,
+            children: children
+        })
+    });
+}
+function useAppTheme() {
+    const brandCtx = useContext(BrandContext);
+    if (!brandCtx) throw new Error("useAppTheme must be used within AppThemeProvider");
+    const { theme, systemTheme, setTheme } = useTheme();
+    const { brand, setBrand, mounted } = brandCtx;
+    const mode = theme ?? DEFAULT_MODE;
+    const resolvedMode = "system" === mode ? systemTheme ?? "light" : mode;
+    return {
+        brand,
+        brands: brandKeys(),
+        setBrand,
+        mode,
+        resolvedMode,
+        setMode: (next)=>{
+            if ("light" === next || brandSupportsDark(brand)) setTheme(next);
+        },
+        availableModes: availableModeSettings(brand),
+        mounted
+    };
+}
+function BrandThemeScript({ defaultBrand = DEFAULT_BRAND }) {
+    const attrByBrand = {};
+    for (const key of brandKeys())attrByBrand[key] = brandAttr(key);
+    const script = `(function(){try{var d=${JSON.stringify(defaultBrand)};var m=${JSON.stringify(attrByBrand)};var k=localStorage.getItem(${JSON.stringify(BRAND_STORAGE_KEY)});if(!k||!Object.prototype.hasOwnProperty.call(m,k)){k=d;}var a=m[k];var e=document.documentElement;if(a){e.setAttribute('data-theme',a);}else{e.removeAttribute('data-theme');}}catch(e){}})();`;
+    return /*#__PURE__*/ jsx("script", {
+        dangerouslySetInnerHTML: {
+            __html: script
+        },
+        suppressHydrationWarning: true
+    });
+}
+export { AppThemeProvider, BrandThemeScript, useAppTheme };

package/dist/theme/theme-toggle.js

@@ -0,0 +1,71 @@
+"use client"
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../atoms/button.js";
+import { tv } from "../utils.js";
+import { getBrand } from "./theme-config.js";
+import { useAppTheme } from "./theme-provider.js";
+const themeToggle = tv({
+    slots: {
+        root: "",
+        group: "flex flex-col gap-100",
+        modeGroup: "mt-150 flex flex-col gap-100",
+        label: "text-sm",
+        row: "flex gap-50"
+    }
+});
+const MODE_LABELS = {
+    light: "Light",
+    dark: "Dark",
+    system: "System"
+};
+function ThemeToggle({ className }) {
+    const { brand, brands, setBrand, mode, setMode, availableModes, mounted } = useAppTheme();
+    const showModes = availableModes.length > 1;
+    const { root, group, modeGroup, label, row } = themeToggle();
+    return /*#__PURE__*/ jsxs("div", {
+        className: root({
+            className
+        }),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: group(),
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: label(),
+                        children: "Brand"
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: row(),
+                        children: brands.map((key)=>/*#__PURE__*/ jsx(Button, {
+                                onClick: ()=>setBrand(key),
+                                size: "sm",
+                                theme: mounted && key === brand ? "solid" : "outlined",
+                                variant: "primary",
+                                children: getBrand(key).label
+                            }, key))
+                    })
+                ]
+            }),
+            showModes && /*#__PURE__*/ jsxs("div", {
+                className: modeGroup(),
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: label(),
+                        children: "Mode"
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: row(),
+                        children: availableModes.map((value)=>/*#__PURE__*/ jsx(Button, {
+                                onClick: ()=>setMode(value),
+                                size: "sm",
+                                theme: mounted && value === mode ? "solid" : "outlined",
+                                variant: "secondary",
+                                children: MODE_LABELS[value]
+                            }, value))
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { ThemeToggle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -44,6 +44,10 @@
       "types": "./dist/src/templates/*.d.ts",
       "import": "./dist/templates/*.js"
     },
+    "./theme/*": {
+      "types": "./dist/src/theme/*.d.ts",
+      "import": "./dist/theme/*.js"
+    },
     "./utils": {
       "types": "./dist/src/utils.d.ts",
       "import": "./dist/utils.js"
@@ -99,6 +103,7 @@
     "@zag-js/toast": "^1.41.2",
     "@zag-js/tooltip": "^1.41.2",
     "@zag-js/tree-view": "^1.41.2",
+    "better-themes": "^1.1.0",
     "libphonenumber-js": "^1.13.2",
     "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.1.1",
@@ -117,12 +122,10 @@
     "@semantic-release/github": "^12.0.2",
     "@semantic-release/npm": "^13.1.2",
     "@semantic-release/release-notes-generator": "^14.1.0",
-    "@storybook/addon-a11y": "^10.0.3",
-    "@storybook/addon-links": "^10.0.2",
-    "@storybook/addon-onboarding": "^10.0.2",
-    "@storybook/addon-themes": "^10.0.2",
-    "@storybook/react": "^10.0.2",
-    "@storybook/test-runner": "^0.24.2",
+    "@storybook/addon-a11y": "^10.4.4",
+    "@storybook/addon-themes": "^10.4.4",
+    "@storybook/react": "^10.4.4",
+    "@storybook/test-runner": "^0.24.4",
     "@tailwindcss/postcss": "^4.1.17",
     "@techsio/storybook-a11y-reporter": "0.1.3",
     "@techsio/storybook-better-a11y": "0.1.3",
@@ -133,9 +136,9 @@
     "postcss": "^8.5.6",
     "rsbuild-plugin-publint": "^0.3.3",
     "semantic-release": "^25.0.2",
-    "storybook": "^10.0.2",
-    "storybook-addon-rslib": "^2.1.6",
-    "storybook-react-rsbuild": "^2.1.4",
+    "storybook": "^10.4.4",
+    "storybook-addon-rslib": "^3.3.4",
+    "storybook-react-rsbuild": "^3.3.4",
     "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3"
   },

package/src/tokens/_tokens-base.css

@@ -20,6 +20,12 @@
  * Generated by merge-figma-themes.mjs from figma/{light,dark}/variables.css. */
 @import "./figma/variables.css";
 
+/* Brand theme overrides ([data-theme="…"]). Imported AFTER variables.css so
+ * the unlayered selectors win over the @theme base values, while their
+ * light-dark() halves still follow `color-scheme`. Only non-base brands
+ * (e.g. neo) emit tokens here; base is the default @theme above. */
+@import "./figma/brand-overrides.css";
+
 /* Base styles */
 :root {
   color-scheme: light dark;

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

@@ -0,0 +1,49 @@
+/*
+ * Brand theme overrides — non-base brands keyed by [data-theme].
+ * Generated by merge-figma-themes.mjs. DO NOT EDIT BY HAND.
+ *
+ * Only tokens whose merged value differs from the base brand are
+ * emitted; everything else inherits base via var() chains. Plain
+ * (unlayered) selectors so they win over @theme while still
+ * respecting `color-scheme` for the light-dark() halves.
+ */
+
+[data-theme="neo"] {
+  --color-badge-fg-primary: var(--color-fg-reverse);
+  --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-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-fg-accent-primary: 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);
+  --color-primary-400: light-dark(oklch(0.702 0.189 22.228), oklch(0.745 0.155 20.548));
+  --color-primary-500: light-dark(oklch(0.638 0.237 25.436), oklch(0.702 0.189 22.228));
+  --color-primary-600: oklch(0.581 0.238 29.234);
+  --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);
+}

package/src/tokens/figma/dark/variables.css

@@ -1,6 +1,6 @@
 /*
  * Design tokens exported from Figma
- * Exported at: 2026-06-15T06:51:18.175Z
+ * Exported at: 2026-06-16T10:13:13.205Z
  * Format: Raw CSS variables grouped by kind
  */
 :root {

package/src/tokens/figma/light/variables.css

@@ -1,6 +1,6 @@
 /*
  * Design tokens exported from Figma
- * Exported at: 2026-06-15T06:51:18.168Z
+ * Exported at: 2026-06-16T10:13:13.198Z
  * Format: Raw CSS variables grouped by kind
  */
 :root {