@techsio/ui-kit 0.11.0 → 0.13.0

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.11.0",
+  "version": "0.13.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"
@@ -78,27 +82,28 @@
     "@iconify-json/mdi-light": "^1.2.2",
     "@iconify-json/svg-spinners": "^1.2.4",
     "@iconify/tailwind4": "^1.1.0",
-    "@zag-js/accordion": "^1.31.1",
-    "@zag-js/carousel": "^1.31.1",
-    "@zag-js/checkbox": "^1.31.1",
-    "@zag-js/combobox": "^1.31.1",
-    "@zag-js/dialog": "^1.31.1",
-    "@zag-js/i18n-utils": "^1.31.1",
-    "@zag-js/menu": "^1.31.1",
-    "@zag-js/number-input": "^1.31.1",
-    "@zag-js/pagination": "^1.31.1",
-    "@zag-js/popover": "^1.31.1",
-    "@zag-js/radio-group": "^1.31.1",
-    "@zag-js/rating-group": "^1.31.1",
-    "@zag-js/react": "^1.31.1",
-    "@zag-js/select": "^1.31.1",
-    "@zag-js/slider": "^1.31.1",
-    "@zag-js/steps": "^1.31.1",
-    "@zag-js/switch": "^1.31.1",
-    "@zag-js/tabs": "^1.31.1",
-    "@zag-js/toast": "^1.31.1",
-    "@zag-js/tooltip": "^1.31.1",
-    "@zag-js/tree-view": "^1.31.1",
+    "@zag-js/accordion": "^1.41.2",
+    "@zag-js/carousel": "^1.41.2",
+    "@zag-js/checkbox": "^1.41.2",
+    "@zag-js/combobox": "^1.41.2",
+    "@zag-js/dialog": "^1.41.2",
+    "@zag-js/i18n-utils": "^1.41.2",
+    "@zag-js/menu": "^1.41.2",
+    "@zag-js/number-input": "^1.41.2",
+    "@zag-js/pagination": "^1.41.2",
+    "@zag-js/popover": "^1.41.2",
+    "@zag-js/radio-group": "^1.41.2",
+    "@zag-js/rating-group": "^1.41.2",
+    "@zag-js/react": "^1.41.2",
+    "@zag-js/select": "^1.41.2",
+    "@zag-js/slider": "^1.41.2",
+    "@zag-js/steps": "^1.41.2",
+    "@zag-js/switch": "^1.41.2",
+    "@zag-js/tabs": "^1.41.2",
+    "@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/components/organisms/_footer.css

@@ -1,85 +1,11 @@
+/*
+ * Footer — runtime tokens come entirely from
+ * libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept: `--footer-cols` runtime grid-template-columns value
+ * (repeat/minmax can't be expressed as a Figma variable).
+ */
+
 @theme static {
   --footer-cols: repeat(auto-fit, minmax(22%, 1fr));
-
-  /* === COLORS === */
-  --color-footer: var(--color-surface);
-
-  /* Background */
-  --color-footer-bg: var(--color-footer);
-  --color-footer-container-bg: var(--color-footer);
-  --color-footer-section-bg: var(--color-footer);
-  --color-footer-list-bg: var(--color-footer);
-  --color-footer-bottom-bg: var(--color-footer);
-
-  /* Foreground */
-  --color-footer-fg-primary: var(--color-fg-primary);
-  --color-footer-fg-secondary: var(--color-fg-secondary);
-
-  --color-footer-title-fg: var(--color-footer-fg-primary);
-  --color-footer-title-fg-hover: var(--color-primary);
-  --color-footer-link-fg: var(--color-footer-fg-secondary);
-  --color-footer-link-fg-hover: var(--color-primary);
-  --color-footer-text-fg: var(--color-footer-fg-secondary);
-
-  /* Divider & Bottom */
-  --color-footer-divider-bg: var(--color-fg-reverse);
-
-  /* === TYPOGRAPHY === */
-  --text-footer-title-sm: var(--text-md);
-  --text-footer-title-md: var(--text-lg);
-  --text-footer-title-lg: var(--text-xl);
-
-  --text-footer-link-sm: var(--text-sm);
-  --text-footer-link-md: var(--text-md);
-  --text-footer-link-lg: var(--text-lg);
-
-  --text-footer-text-sm: var(--text-xs);
-  --text-footer-text-md: var(--text-sm);
-  --text-footer-text-lg: var(--text-md);
-
-  --font-weight-footer-title: var(--font-weight-semibold);
-  --font-weight-footer-link: var(--font-weight-normal);
-
-  /* === SIZES === */
-  --container-footer-max: var(--container-max-w);
-
-  /* === SPACING === */
-  /* Root padding */
-  --padding-footer-root-sm: var(--spacing-100);
-  --padding-footer-root-md: var(--spacing-200);
-  --padding-footer-root-lg: var(--spacing-300);
-
-  /* Container spacing */
-  --spacing-footer-container-sm: var(--spacing-300);
-  --spacing-footer-container-md: var(--spacing-400);
-  --spacing-footer-container-lg: var(--spacing-500);
-
-  /* Section spacing */
-  --spacing-footer-section-sm: var(--spacing-50);
-  --spacing-footer-section-md: var(--spacing-100);
-  --spacing-footer-section-lg: var(--spacing-150);
-
-  /* List spacing */
-  --spacing-footer-list-gap: var(--spacing-100);
-  --spacing-footer-list-gap-sm: var(--spacing-50);
-  --spacing-footer-list-gap-md: var(--spacing-100);
-  --spacing-footer-list-gap-lg: var(--spacing-150);
-
-  /* Bottom padding */
-  --padding-footer-bottom: var(--spacing-300);
-  --padding-footer-bottom-sm: var(--spacing-200);
-  --padding-footer-bottom-md: var(--spacing-300);
-  --padding-footer-bottom-lg: var(--spacing-400);
-
-  /* Divider margins */
-  --margin-footer-divider-sm: var(--spacing-200);
-  --margin-footer-divider-md: var(--spacing-300);
-  --margin-footer-divider-lg: var(--spacing-400);
-
-  /* === BORDERS & EFFECTS === */
-  --border-width-footer: var(--border-width-md);
-  --color-footer-border: var(--color-border-primary);
-  --height-footer-divider: 2px;
-
-  --radius-footer: 0;
 }

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

@@ -1,35 +1,13 @@
-@theme static {
-  /* === REFERENCE LAYER === */
-  --color-gallery: var(--color-surface);
-  --color-gallery-accent: var(--color-primary);
-
-  /* === DERIVED COLORS === */
-  --color-gallery-trigger-bg: oklch(
-    from var(--color-gallery) calc(l - var(--surface-increment) * 2) c h
-  );
-  --color-gallery-trigger-bg-active: oklch(
-    from var(--color-gallery) calc(l - var(--surface-increment) * 3) c h
-  );
-  --color-gallery-trigger-border: var(--color-border-primary);
-  --color-gallery-trigger-border-active: var(--color-gallery-accent);
-  --color-gallery-trigger-ring: var(--color-ring);
-
-  /* === SPACING === */
-  --spacing-gallery-xs: var(--spacing-50);
-  --spacing-gallery-sm: var(--spacing-100);
-  --spacing-gallery-md: var(--spacing-200);
-  --spacing-gallery-lg: var(--spacing-300);
-  --spacing-gallery-root: var(--spacing-200);
-  --padding-gallery-trigger: 0 0;
-
-  /* === DIMENSIONS === */
+/*
+ * Gallery — runtime tokens come entirely from
+ * libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept: `--height-gallery` responsive cap. Figma flattens it to a fixed
+ * dimension (576px); the `min(60svh, 36rem)` viewport behaviour can't be
+ * expressed as a Figma variable, so an unlayered `:root` override (which
+ * beats Figma's `@theme static`) restores it.
+ */
+
+:root {
   --height-gallery: min(60svh, 36rem);
-
-  /* === EFFECTS === */
-  --brightness-gallery-trigger: 70%;
-  --brightness-gallery-trigger-active: 100%;
-  --shadow-gallery-trigger: var(--shadow-sm);
-
-  /* === BORDERS === */
-  --radius-gallery-trigger: var(--radius-sm);
 }

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

@@ -1,3 +1,13 @@
+/*
+ * Header — runtime tokens come entirely from
+ * libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept:
+ * - `:root @media (width < 48rem)` nav-spacing override (responsive,
+ *   conditional value — can't be expressed as a Figma variable).
+ * - glyph utilities mapping the menu/close icons.
+ */
+
 :root {
   @media (width < 48rem) {
     --spacing-header-nav-sm: var(--spacing-50);
@@ -6,89 +16,10 @@
   }
 }
 
-@theme static {
-  /* === REFERENCE LAYER === */
-  /* These tokens reference semantic tokens from _semantic.css */
-  --color-header: var(--color-surface);
-  --color-header-accent: var(--color-primary);
-
-  /* Reference typhography */
-  --text-header-sm: var(--text-sm);
-  --text-header-md: var(--text-md);
-  --text-header-lg: var(--text-lg);
-
-  /* === DERIVED COLORS === */
-  /* Background colors */
-  --color-header-bg: var(--color-header);
-
-  /* === ITEMS === */
-  --color-header-nav-item-bg: transparent;
-  --color-header-nav-item-bg-hover: transparent;
-
-  --text-header-item-sm: var(--text-header-sm);
-  --text-header-item-md: var(--text-header-md);
-  --text-header-item-lg: var(--text-header-lg);
-
-  /* === ACTIONS === */
-
-  /* Foreground colors */
-  --color-header-fg: var(--color-fg-primary);
-  --color-header-nav-fg: var(--color-fg-secondary);
-  --color-header-nav-fg-hover: var(--color-header-fg);
-  --color-header-nav-fg-active: var(--color-header-accent);
-  --color-header-actions-fg: var(--color-primary);
-  --color-header-actions-fg-hover: var(--color-header-fg);
-
-  /* Border colors */
-
-  /* === SIZE === */
-  /* Width constraints */
-  --width-header-max: 100%;
-
-  /* === SPACING === */
-  /* Section spacing */
-  --spacing-header-container: var(--spacing-100);
-
-  --padding-header-item-sm: var(--spacing-100);
-  --padding-header-item-md: var(--spacing-150);
-  --padding-header-item-lg: var(--spacing-200);
-
-  --spacing-header-nav-sm: var(--spacing-200);
-  --spacing-header-nav-md: var(--spacing-300);
-  --spacing-header-nav-lg: var(--spacing-400);
-
-  --spacing-header-actions-sm: var(--spacing-200);
-  --spacing-header-actions-md: var(--spacing-300);
-  --spacing-header-actions-lg: var(--spacing-400);
-
-  /* === TYPOGRAPHY === */
-  --font-weight-header-nav: var(--font-weight-medium);
-  --font-weight-header-nav-active: var(--font-weight-semibold);
-
-  /* === Z-INDEX === */
-  /* Mobile menu hamburger colors */
-  --color-header-hamburger-fg: var(--color-fg-primary);
-  --color-header-hamburger-fg-hover: var(--color-fg-secondary);
-
-  /* hamburger button */
-  --text-header-hamburger-sm: var(--text-header-sm);
-  --text-header-hamburger-md: var(--text-header-md);
-  --text-header-hamburger-lg: var(--text-header-lg);
-
-  --padding-header-hamburger-sm: var(--spacing-100);
-  --padding-header-hamburger-md: var(--spacing-150);
-  --padding-header-hamburger-lg: var(--spacing-200);
-
-  /* breakpoint */
-  --container-header-desktop: 48rem;
-
-  --duration-header: 300ms;
-}
-
 @utility token-icon-header-menu {
   @apply token-icon-menu;
 }
 
 @utility token-icon-header-close {
   @apply token-icon-close;
-}
+}

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

@@ -1,63 +1,17 @@
-@theme static {
-  /* === BASE COLOR MAPPING === */
-  --color-table: var(--color-surface);
-  --color-table-border: var(--color-border-primary);
-  --color-table-accent: var(--color-primary);
-
-  /* === DERIVED COLORS === */
-  /* Background colors */
-  --color-table-bg: var(--color-table);
-  --color-table-header-bg: oklch(
-    from var(--color-table-bg) calc(l - var(--surface-increment)) c h
-  );
-  --color-table-footer-bg: var(--color-table-header-bg);
-  --color-table-row-bg: transparent;
-  --color-table-row-bg-hover: oklch(
-    from var(--color-table-bg) calc(l + var(--state-hover)) c h
-  );
-  --color-table-row-bg-selected: --alpha(var(--color-table-accent) / 0.1);
-  --color-table-row-striped-bg-primary: oklch(
-    from var(--color-table-bg) calc(l - var(--surface-increment)) c h
-  );
-  --color-table-row-striped-bg-secondary: var(--color-table-row-bg);
-
-  /* Foreground colors */
-  --color-table-fg: var(--color-fg-primary);
-  --color-table-header-fg: var(--color-fg-primary);
-  --color-table-footer-fg: var(--color-fg-secondary);
-  --color-table-caption-fg: var(--color-fg-secondary);
-
-  /* === SPACING === */
-  /* Cell padding */
-  --padding-table-cell-sm: var(--spacing-100) var(--spacing-150);
-  --padding-table-cell-md: var(--spacing-150) var(--spacing-200);
-  --padding-table-cell-lg: var(--spacing-200) var(--spacing-250);
-
-  /* Caption padding */
-  --padding-table-caption-sm: var(--spacing-100);
-  --padding-table-caption-md: var(--spacing-150);
-  --padding-table-caption-lg: var(--spacing-200);
+/*
+ * Table — runtime tokens come entirely from
+ * libs/ui/src/tokens/figma/variables.css.
+ *
+ * Kept: `--padding-table-cell-{sm,md,lg}` composites. Figma exports the cell
+ * padding split into `-x`/`-y`; the `p-table-cell-*` shorthand utilities are
+ * rebuilt here (padding: y x) from those Figma halves.
+ */
 
-  /* === TYPOGRAPHY === */
-  /* Font weights */
-  --font-weight-table-header: var(--font-weight-semibold);
-  --font-weight-table-footer: var(--font-weight-medium);
-  --font-weight-table-caption: var(--font-weight-normal);
-
-  /* Text sizes for table content */
-  --text-table-sm: var(--text-sm);
-  --text-table-md: var(--text-md);
-  --text-table-lg: var(--text-lg);
-
-  /* Caption text sizes */
-  --text-table-caption-sm: var(--text-xs);
-  --text-table-caption-md: var(--text-sm);
-  --text-table-caption-lg: var(--text-md);
-
-  /* === BORDERS & RADIUS === */
-  --border-width-table: var(--border-width-sm);
-  --radius-table: var(--radius-sm);
-
-  /* === SHADOWS === */
-  --shadow-table-outline: var(--shadow-sm);
+@theme static {
+  --padding-table-cell-sm: var(--padding-table-cell-sm-y)
+    var(--padding-table-cell-sm-x);
+  --padding-table-cell-md: var(--padding-table-cell-md-y)
+    var(--padding-table-cell-md-x);
+  --padding-table-cell-lg: var(--padding-table-cell-lg-y)
+    var(--padding-table-cell-lg-x);
 }

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-12T13:18:24.711Z
+ * Exported at: 2026-06-16T10:13:13.205Z
  * Format: Raw CSS variables grouped by kind
  */
 :root {
@@ -291,6 +291,7 @@
   --color-fill-highlight: var(--color-neutral-700);
   --color-fill-hover: var(--color-white-10);
   --color-fill-overlay: var(--color-neutral-800);
+  --color-fill-selected: var(--color-primary-alpha-10);
   --color-fill-surface: var(--color-neutral-800);
   --color-float: var(--color-fill-highlight);
   --color-footer-bg: var(--color-fill-surface);
@@ -483,6 +484,7 @@
   --color-primary-900: oklch(0.391 0.089 240.611);
   --color-primary-accent-fg: var(--color-fg-accent-primary);
   --color-primary-active: var(--color-bg-primary-active);
+  --color-primary-alpha-10: oklch(0.807 0.101 250.446 / 0.1);
   --color-primary-disabled: var(--color-bg-disabled);
   --color-primary-hover: var(--color-bg-primary-hover);
   --color-primary-light: var(--color-bg-light-primary-base);
@@ -741,14 +743,14 @@
   --color-table-border: var(--color-border-primary);
   --color-table-caption-fg: var(--color-fg-secondary);
   --color-table-fg: var(--color-fg-primary);
-  --color-table-footer-bg: var(--color-bg-light-primary-base);
+  --color-table-footer-bg: var(--color-fill-base);
   --color-table-footer-fg: var(--color-fg-secondary);
-  --color-table-header-bg: var(--color-bg-light-primary-base);
+  --color-table-header-bg: var(--color-fill-base);
   --color-table-header-fg: var(--color-fg-primary);
   --color-table-row-bg: var(--color-bg-transparent);
-  --color-table-row-bg-hover: var(--color-bg-light-primary-base);
-  --color-table-row-bg-selected: var(--color-bg-light-primary-base);
-  --color-table-row-striped-primary: var(--color-bg-light-primary-base);
+  --color-table-row-bg-hover: var(--color-fill-hover);
+  --color-table-row-bg-selected: var(--color-fill-selected);
+  --color-table-row-striped-primary: var(--color-fill-base);
   --color-table-row-striped-secondary: var(--color-bg-transparent);
   --color-tabs-bg: var(--color-fill-surface);
   --color-tabs-border-base: var(--color-border-primary);
@@ -1329,6 +1331,7 @@
   --shadow-accordion-root-md: var(--shadow-xl);
   --shadow-accordion-root-sm: var(--shadow-primary);
   --shadow-dialog-content: var(--shadow-primary);
+  --shadow-gallery-trigger: var(--shadow-sm);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
   --shadow-menu-content: var(--shadow-lg);
@@ -1338,6 +1341,7 @@
   --shadow-select-content: var(--shadow-md);
   --shadow-slider-thumb: var(--shadow-sm);
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-table-outline: var(--shadow-sm);
   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
   --size-1: 0.06rem;
   --size-12: 0.75rem;