From aaee20e2dd44886e7f6ad5910020339bce3e06e0 Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Wed, 13 Aug 2025 06:55:54 +0200
Subject: [PATCH 01/44] use new name for spacing in components token

---
 libs/ui/src/molecules/select.tsx              |  2 +-
 .../ui/src/tokens/components/atoms/_badge.css |  4 ++--
 .../src/tokens/components/atoms/_button.css   | 12 +++++------
 .../ui/src/tokens/components/atoms/_input.css | 10 +++++-----
 .../src/tokens/components/atoms/_rating.css   |  6 +++---
 libs/ui/src/tokens/components/atoms/_tabs.css | 12 +++++------
 .../src/tokens/components/atoms/_textarea.css |  6 +++---
 .../src/tokens/components/atoms/_tooltip.css  |  8 ++++----
 .../components/molecules/_breadcrumb.css      |  8 ++++----
 .../tokens/components/molecules/_carousel.css |  8 ++++----
 .../tokens/components/molecules/_checkbox.css |  2 +-
 .../tokens/components/molecules/_combobox.css | 10 +++++-----
 .../tokens/components/molecules/_dialog.css   |  6 +++---
 .../src/tokens/components/molecules/_menu.css | 14 ++++++-------
 .../components/molecules/_numeric-input.css   | 12 +++++------
 .../components/molecules/_pagination.css      |  2 +-
 .../tokens/components/molecules/_popover.css  | 12 +++++------
 .../components/molecules/_product-card.css    | 10 +++++-----
 .../components/molecules/_range-slider.css    | 20 +++++++++----------
 .../components/molecules/_search-form.css     |  6 +++---
 .../tokens/components/molecules/_select.css   | 12 +++++------
 .../tokens/components/molecules/_steps.css    | 14 ++++++-------
 .../tokens/components/molecules/_switch.css   |  8 ++++----
 .../tokens/components/molecules/_toast.css    |  6 +++---
 .../components/molecules/_tree-view.css       |  6 +++---
 25 files changed, 108 insertions(+), 108 deletions(-)

diff --git a/libs/ui/src/molecules/select.tsx b/libs/ui/src/molecules/select.tsx
index ceb65e9dae..00107bd4f6 100644
--- a/libs/ui/src/molecules/select.tsx
+++ b/libs/ui/src/molecules/select.tsx
@@ -45,7 +45,7 @@ const selectVariants = tv({
     content: [
       'bg-select-content-bg border border-select-content-border',
       'rounded-select shadow-select-content-shadow max-h-fit',
-      'h-[calc(var(--available-height)-var(--spacing-lg))]',
+      'h-[calc(var(--available-height)-var(--spacing-450))]',
       'overflow-auto z-50',
     ],
     item: [
diff --git a/libs/ui/src/tokens/components/atoms/_badge.css b/libs/ui/src/tokens/components/atoms/_badge.css
index 664f4c30b4..545457fc49 100644
--- a/libs/ui/src/tokens/components/atoms/_badge.css
+++ b/libs/ui/src/tokens/components/atoms/_badge.css
@@ -1,8 +1,8 @@
 @import "../../_semantic.css";
 
 @theme static {
-  --padding-badge-x: var(--spacing-3xs);
-  --padding-badge-y: var(--spacing-3xs);
+  --padding-badge-x: var(--spacing-100);
+  --padding-badge-y: var(--spacing-100);
 
   --text-badge-size: var(--text-xs);
 
diff --git a/libs/ui/src/tokens/components/atoms/_button.css b/libs/ui/src/tokens/components/atoms/_button.css
index 3e5287f39f..e23fc19286 100644
--- a/libs/ui/src/tokens/components/atoms/_button.css
+++ b/libs/ui/src/tokens/components/atoms/_button.css
@@ -200,14 +200,14 @@
 
   /* === PADDING === */
 
-  --padding-btn-sm: var(--spacing-2xs) var(--spacing-sm);
-  --padding-btn-md: var(--spacing-xs) var(--spacing-md);
-  --padding-btn-lg: var(--spacing-sm) var(--spacing-lg);
+  --padding-btn-sm: var(--spacing-150) var(--spacing-250);
+  --padding-btn-md: var(--spacing-200) var(--spacing-350);
+  --padding-btn-lg: var(--spacing-250) var(--spacing-450);
 
   /* Spacing between icon and text */
-  --spacing-btn-sm: var(--spacing-2xs);
-  --spacing-btn-md: var(--spacing-xs);
-  --spacing-btn-lg: var(--spacing-sm);
+  --spacing-btn-sm: var(--spacing-150);
+  --spacing-btn-md: var(--spacing-200);
+  --spacing-btn-lg: var(--spacing-250);
 
   /* === TYPOGRAPHY === */
   /* Text sizes */
diff --git a/libs/ui/src/tokens/components/atoms/_input.css b/libs/ui/src/tokens/components/atoms/_input.css
index 698bcbbe87..b2be131378 100644
--- a/libs/ui/src/tokens/components/atoms/_input.css
+++ b/libs/ui/src/tokens/components/atoms/_input.css
@@ -81,7 +81,7 @@
   --color-label-text: var(--color-input-text);
   --color-label-disabled: var(--color-input-text-disabled);
   --color-label-required: var(--color-input-danger);
-  --margin-label: var(--spacing-3xs);
+  --margin-label: var(--spacing-100);
 
   /* Error/Helper/Extra colors */
   --color-error-text: var(--color-danger);
@@ -103,10 +103,10 @@
   );
 
   /* Spacing - keeping your existing values */
-  --padding-input-sm: var(--spacing-sm) var(--spacing-sm);
-  --padding-input-md: var(--spacing-md) var(--spacing-sm);
-  --padding-input-lg: var(--spacing-lg) var(--spacing-md);
-  --padding-with-button: var(--spacing-3xl);
+  --padding-input-sm: var(--spacing-250) var(--spacing-250);
+  --padding-input-md: var(--spacing-350) var(--spacing-250);
+  --padding-input-lg: var(--spacing-450) var(--spacing-350);
+  --padding-with-button: var(--spacing-950);
 
   /* Typography */
   --text-input-sm: var(--text-sm);
diff --git a/libs/ui/src/tokens/components/atoms/_rating.css b/libs/ui/src/tokens/components/atoms/_rating.css
index ebde6242ef..74fa3f037c 100644
--- a/libs/ui/src/tokens/components/atoms/_rating.css
+++ b/libs/ui/src/tokens/components/atoms/_rating.css
@@ -9,9 +9,9 @@
   );
 
   /* Spacing */
-  --spacing-rating-sm: var(--spacing-3xs);
-  --spacing-rating-md: var(--spacing-2xs);
-  --spacing-rating-lg: var(--spacing-xs);
+  --spacing-rating-sm: var(--spacing-100);
+  --spacing-rating-md: var(--spacing-150);
+  --spacing-rating-lg: var(--spacing-200);
 
   /*Size*/
   --text-rating-sm: var(--text-icon-sm);
diff --git a/libs/ui/src/tokens/components/atoms/_tabs.css b/libs/ui/src/tokens/components/atoms/_tabs.css
index 591d7b3cdc..a2a2af3c89 100644
--- a/libs/ui/src/tokens/components/atoms/_tabs.css
+++ b/libs/ui/src/tokens/components/atoms/_tabs.css
@@ -26,14 +26,14 @@
 
   /* === PADDING === */
   /* Trigger padding */
-  --padding-tabs-trigger-sm: var(--spacing-3xs) var(--spacing-2xs);
-  --padding-tabs-trigger-md: var(--spacing-2xs) var(--spacing-xs);
-  --padding-tabs-trigger-lg: var(--spacing-xs) var(--spacing-sm);
+  --padding-tabs-trigger-sm: var(--spacing-100) var(--spacing-150);
+  --padding-tabs-trigger-md: var(--spacing-150) var(--spacing-200);
+  --padding-tabs-trigger-lg: var(--spacing-200) var(--spacing-250);
 
   /* Content padding */
-  --spacing-tabs-content-sm: var(--spacing-xs);
-  --spacing-tabs-content-md: var(--spacing-sm);
-  --spacing-tabs-content-lg: var(--spacing-md);
+  --spacing-tabs-content-sm: var(--spacing-200);
+  --spacing-tabs-content-md: var(--spacing-250);
+  --spacing-tabs-content-lg: var(--spacing-350);
   --spacing-tabs-content: var(--spacing-tabs-content-md);
 
   /* === TYPOGRAPHY === */
diff --git a/libs/ui/src/tokens/components/atoms/_textarea.css b/libs/ui/src/tokens/components/atoms/_textarea.css
index 1c3a814a8a..d4b6d22686 100644
--- a/libs/ui/src/tokens/components/atoms/_textarea.css
+++ b/libs/ui/src/tokens/components/atoms/_textarea.css
@@ -76,9 +76,9 @@
   );
 
   /* Spacing */
-  --spacing-textarea-sm: var(--spacing-3xs);
-  --spacing-textarea-md: var(--spacing-2xs);
-  --spacing-textarea-lg: var(--spacing-xs);
+  --spacing-textarea-sm: var(--spacing-100);
+  --spacing-textarea-md: var(--spacing-150);
+  --spacing-textarea-lg: var(--spacing-200);
 
   /* Typography */
   --text-textarea-sm: var(--text-sm);
diff --git a/libs/ui/src/tokens/components/atoms/_tooltip.css b/libs/ui/src/tokens/components/atoms/_tooltip.css
index 922fc1bd90..7fc298e563 100644
--- a/libs/ui/src/tokens/components/atoms/_tooltip.css
+++ b/libs/ui/src/tokens/components/atoms/_tooltip.css
@@ -3,9 +3,9 @@
   --color-tooltip-bg: var(--color-overlay);
 
   /* === SIZING & SPACING === */
-  --padding-tooltip-sm: var(--spacing-2xs) var(--spacing-xs);
-  --padding-tooltip-md: var(--spacing-xs) var(--spacing-sm);
-  --padding-tooltip-lg: var(--spacing-sm) var(--spacing-md);
+  --padding-tooltip-sm: var(--spacing-150) var(--spacing-200);
+  --padding-tooltip-md: var(--spacing-200) var(--spacing-250);
+  --padding-tooltip-lg: var(--spacing-250) var(--spacing-350);
 
   --text-tooltip-sm: var(--text-xs);
   --text-tooltip-md: var(--text-sm);
@@ -15,6 +15,6 @@
   --shadow-tooltip: var(--shadow-md);
 
   /* Required for Zag.js */
-  --tooltip-arrow-size: var(--spacing-2xs);
+  --tooltip-arrow-size: var(--spacing-150);
   --tooltip-arrow-background: var(--color-tooltip-bg);
 }
diff --git a/libs/ui/src/tokens/components/molecules/_breadcrumb.css b/libs/ui/src/tokens/components/molecules/_breadcrumb.css
index 47fe9ed06c..a25f8412b4 100644
--- a/libs/ui/src/tokens/components/molecules/_breadcrumb.css
+++ b/libs/ui/src/tokens/components/molecules/_breadcrumb.css
@@ -17,12 +17,12 @@
   --text-breadcrumb-lg: var(--text-md);
 
   /* Gap between items */
-  --gap-breadcrumb-sm: var(--spacing-3xs);
-  --gap-breadcrumb-md: var(--spacing-2xs);
-  --gap-breadcrumb-lg: var(--spacing-xs);
+  --gap-breadcrumb-sm: var(--spacing-100);
+  --gap-breadcrumb-md: var(--spacing-150);
+  --gap-breadcrumb-lg: var(--spacing-200);
 
   /* Padding */
-  --spacing-breadcrumb: var(--spacing-2xs);
+  --spacing-breadcrumb: var(--spacing-150);
 
   /* Focus ring */
   --color-breadcrumb-link-ring: var(--color-primary);
diff --git a/libs/ui/src/tokens/components/molecules/_carousel.css b/libs/ui/src/tokens/components/molecules/_carousel.css
index 0bf94e5f66..6d070cf87d 100644
--- a/libs/ui/src/tokens/components/molecules/_carousel.css
+++ b/libs/ui/src/tokens/components/molecules/_carousel.css
@@ -11,14 +11,14 @@
 
   /* === CONTROL COLORS === */
   --color-carousel-control-bg: var(--color-overlay);
-  --padding-carousel-control: var(--spacing-3xs);
-  --gap-carousel-control: var(--spacing-xs);
+  --padding-carousel-control: var(--spacing-100);
+  --gap-carousel-control: var(--spacing-200);
 
   /* === INDICATOR === */
-  --gap-carousel-indicator: var(--spacing-3xs);
+  --gap-carousel-indicator: var(--spacing-100);
   --color-carousel-indicator-active: var(--color-primary);
   --aspect-carousel-indicator: var(--aspect-ratio-square);
-  --width-carousel-indicator: var(--spacing-xs);
+  --width-carousel-indicator: var(--spacing-200);
 
   /* === FOCUS STATES === */
   --color-carousel-focus-ring: --alpha(
diff --git a/libs/ui/src/tokens/components/molecules/_checkbox.css b/libs/ui/src/tokens/components/molecules/_checkbox.css
index f0fd473137..5f67a74e47 100644
--- a/libs/ui/src/tokens/components/molecules/_checkbox.css
+++ b/libs/ui/src/tokens/components/molecules/_checkbox.css
@@ -15,7 +15,7 @@
   --color-checkbox-offset: var(--color-base);
   --color-checkbox-border-error: var(--color-checkbox-error);
 
-  --spacing-checkbox: var(--spacing-xs);
+  --spacing-checkbox: var(--spacing-200);
   --color-icon-text: var(--color-fg-dark);
   --text-checkbox-icon-md: var(--text-xs);
   --radius-checkbox: var(--radius-sm);
diff --git a/libs/ui/src/tokens/components/molecules/_combobox.css b/libs/ui/src/tokens/components/molecules/_combobox.css
index cb840b13b4..39c2ec3b5b 100644
--- a/libs/ui/src/tokens/components/molecules/_combobox.css
+++ b/libs/ui/src/tokens/components/molecules/_combobox.css
@@ -57,8 +57,8 @@
     from var(--color-combobox-trigger) min(l - 0.4, 1) c h
   );
   --text-combobox-trigger-size: var(--text-lg);
-  --spacing-combobox-trigger: var(--spacing-xs);
-  --spacing-combobox-trigger-right: var(--spacing-lg);
+  --spacing-combobox-trigger: var(--spacing-200);
+  --spacing-combobox-trigger-right: var(--spacing-450);
   --color-combobox-trigger-bg: transparent;
   --color-combobox-trigger-bg-hover: var(--color-combobox-trigger-bg);
   --color-combobox-trigger-bg-active: var(--color-combobox-trigger-bg);
@@ -70,11 +70,11 @@
   --color-combobox-item-fg: var(--color-fg-primary);
   --color-combobox-item-selected: var(--color-highlight);
   --color-combobox-item-hover: var(--color-combobox-item-selected);
-  --spacing-combobox-item: var(--spacing-3xs);
-  --spacing-combobox-item-lg: var(--spacing-2xs);
+  --spacing-combobox-item: var(--spacing-100);
+  --spacing-combobox-item-lg: var(--spacing-150);
 
   /* Spacing */
-  --spacing-combobox-root: var(--spacing-3xs);
+  --spacing-combobox-root: var(--spacing-100);
 }
 
 /* Semantic tokens for combobox icons */
diff --git a/libs/ui/src/tokens/components/molecules/_dialog.css b/libs/ui/src/tokens/components/molecules/_dialog.css
index df86e1d2bd..49e5f0e85f 100644
--- a/libs/ui/src/tokens/components/molecules/_dialog.css
+++ b/libs/ui/src/tokens/components/molecules/_dialog.css
@@ -20,9 +20,9 @@
   --radius-dialog-content: var(--radius-sm);
   --shadow-dialog-content: var(--shadow-xl);
 
-  --gap-dialog-content: var(--spacing-sm);
+  --gap-dialog-content: var(--spacing-250);
   --height-dialog-content: 80svh;
-  --padding-dialog-content: var(--spacing-lg);
+  --padding-dialog-content: var(--spacing-450);
 
   /* ===== DIALOG TITLE ===== */
   --text-dialog-title-size: var(--text-xl);
@@ -36,7 +36,7 @@
   /* ===== DIALOG CLOSE TRIGGER (Button) ===== */
   --color-dialog-close-trigger-fg: var(--color-dialog-fg);
   --radius-dialog-close-trigger: var(--radius-full);
-  --spacing-dialog-close-trigger-padding: var(--spacing-2xs);
+  --spacing-dialog-close-trigger-padding: var(--spacing-150);
 
   /* ===== FOCUS RING (General for focusable elements within dialog) ===== */
   --color-dialog-ring: --alpha(var(--color-primary) / var(--opacity-ring));
diff --git a/libs/ui/src/tokens/components/molecules/_menu.css b/libs/ui/src/tokens/components/molecules/_menu.css
index ba19ce06eb..c6f22d3069 100644
--- a/libs/ui/src/tokens/components/molecules/_menu.css
+++ b/libs/ui/src/tokens/components/molecules/_menu.css
@@ -5,16 +5,16 @@
   --radius-menu: var(--radius-sm);
   --shadow-menu-content-shadow: var(--shadow-lg);
 
-  --padding-menu-content: var(--spacing-xs);
+  --padding-menu-content: var(--spacing-200);
 
   /* ===== MENU ITEM ===== */
   --color-menu-item-fg: var(--color-fg-primary);
   --color-menu-item-hover: var(--color-surface-hover);
   --radius-menu-item: var(--radius-xs);
 
-  --padding-menu-item-x: var(--spacing-sm);
-  --padding-menu-item-y: var(--spacing-xs);
-  --gap-menu-item: var(--spacing-xs);
+  --padding-menu-item-x: var(--spacing-250);
+  --padding-menu-item-y: var(--spacing-200);
+  --gap-menu-item: var(--spacing-200);
 
   /* ===== MENU ITEM ICON ===== */
   --text-menu-item-icon-size: var(--text-lg);
@@ -23,12 +23,12 @@
   /* ===== MENU SEPARATOR ===== */
   --color-menu-separator-bg: var(--color-stroke-primary);
   --height-menu-separator: 1px;
-  --margin-menu-separator: var(--spacing-xs);
+  --margin-menu-separator: var(--spacing-200);
 
   /* ===== MENU SUBMENU INDICATOR ===== */
   --color-menu-submenu-indicator-fg: var(--color-fg-secondary);
-  --spacing-menu-submenu-indicator: var(--spacing-sm);
-  --spacing-menu-submenu-offset: var(--spacing-xs);
+  --spacing-menu-submenu-indicator: var(--spacing-250);
+  --spacing-menu-submenu-offset: var(--spacing-200);
 
   /* ===== MENU DISABLED STATE ===== */
   --opacity-menu-disabled: 50%;
diff --git a/libs/ui/src/tokens/components/molecules/_numeric-input.css b/libs/ui/src/tokens/components/molecules/_numeric-input.css
index ce47bd6971..b3945dc7be 100644
--- a/libs/ui/src/tokens/components/molecules/_numeric-input.css
+++ b/libs/ui/src/tokens/components/molecules/_numeric-input.css
@@ -9,9 +9,9 @@
   --color-ni-border: var(--color-stroke-primary);
   --border-width-ni: var(--border-width-input);
 
-  --gap-ni-root-sm: var(--spacing-2xs);
-  --gap-ni-root-md: var(--spacing-xs);
-  --gap-ni-root-lg: var(--spacing-sm);
+  --gap-ni-root-sm: var(--spacing-150);
+  --gap-ni-root-md: var(--spacing-200);
+  --gap-ni-root-lg: var(--spacing-250);
 
   /* ==== TYPOGRAPHY ==== */
   --text-ni-sm: var(--text-sm);
@@ -22,12 +22,12 @@
   --color-ni-input-bg: transparent;
   --color-ni-input-bg-hover: transparent;
   --color-ni-input-bg-active: transparent;
-  --padding-ni-input: 0 0 0 var(--spacing-2xs);
+  --padding-ni-input: 0 0 0 var(--spacing-150);
 
   /* === TRIGGER === */
   --color-ni-trigger-container: var(--color-surface);
-  --padding-ni-trigger-x: var(--spacing-2xs);
-  --padding-ni-trigger-y: var(--spacing-3xs);
+  --padding-ni-trigger-x: var(--spacing-150);
+  --padding-ni-trigger-y: var(--spacing-100);
 
   /* === INCREMENT BUTTON === */
 
diff --git a/libs/ui/src/tokens/components/molecules/_pagination.css b/libs/ui/src/tokens/components/molecules/_pagination.css
index d59180fe07..b732c9f5cc 100644
--- a/libs/ui/src/tokens/components/molecules/_pagination.css
+++ b/libs/ui/src/tokens/components/molecules/_pagination.css
@@ -35,7 +35,7 @@
   --color-pagination-ring: --alpha(var(--color-primary) / var(--opacity-ring));
 
   /* Spacing */
-  --spacing-pagination: var(--spacing-xs);
+  --spacing-pagination: var(--spacing-200);
   --spacing-pagination-list: var(--spacing-pagination);
 
   /* height */
diff --git a/libs/ui/src/tokens/components/molecules/_popover.css b/libs/ui/src/tokens/components/molecules/_popover.css
index 345ca1170e..de96122cd2 100644
--- a/libs/ui/src/tokens/components/molecules/_popover.css
+++ b/libs/ui/src/tokens/components/molecules/_popover.css
@@ -1,5 +1,5 @@
 @theme static {
-  --arrow-size: var(--spacing-2xs);
+  --arrow-size: var(--spacing-150);
 
   /* Background & Text Colors */
   --color-popover-bg: var(--color-overlay);
@@ -9,19 +9,19 @@
   --arrow-background: var(--color-popover-bg);
 
   /* Spacing */
-  --spacing-popover-sm: var(--spacing-xs);
-  --spacing-popover-md: var(--spacing-sm);
-  --spacing-popover-lg: var(--spacing-md);
+  --spacing-popover-sm: var(--spacing-200);
+  --spacing-popover-md: var(--spacing-250);
+  --spacing-popover-lg: var(--spacing-350);
 
   /* Trigger */
-  --padding-popover-trigger: var(--spacing-3xs) var(--spacing-2xs);
+  --padding-popover-trigger: var(--spacing-100) var(--spacing-150);
 
   /* Title */
   --text-popover-title-sm: var(--text-md);
   --text-popover-title-md: var(--text-lg);
   --text-popover-title-lg: var(--text-xl);
   --font-weight-popover-title: var(--font-weight-semibold);
-  --spacing-popover-title-mb: var(--spacing-2xs);
+  --spacing-popover-title-mb: var(--spacing-150);
 
   /*description*/
   --text-popover-description: var(--text-sm);
diff --git a/libs/ui/src/tokens/components/molecules/_product-card.css b/libs/ui/src/tokens/components/molecules/_product-card.css
index 50af989fc8..c54d5e3464 100644
--- a/libs/ui/src/tokens/components/molecules/_product-card.css
+++ b/libs/ui/src/tokens/components/molecules/_product-card.css
@@ -6,11 +6,11 @@
   --radius-pc: var(--radius-md);
 
   /* Card spacing */
-  --spacing-pc-row-layout: var(--spacing-sm);
+  --spacing-pc-row-layout: var(--spacing-250);
   --spacing-pc-max: 100%; /* temporary value */
-  /* --spacing-pc-col-layout: var(--spacing-3xs);*/
-  --spacing-pc-box: var(--spacing-2xs);
-  --spacing-pc-padding: var(--spacing-2xs);
+  /* --spacing-pc-col-layout: var(--spacing-100);*/
+  --spacing-pc-box: var(--spacing-150);
+  --spacing-pc-padding: var(--spacing-150);
 
   --color-pc-name-fg: var(--color-fg-primary);
   --text-pc-name-size: var(--text-md);
@@ -93,5 +93,5 @@
 }
 
 @utility gap-pc-col-layout {
-  gap: var(--spacing-3xs);
+  gap: var(--spacing-100);
 }
diff --git a/libs/ui/src/tokens/components/molecules/_range-slider.css b/libs/ui/src/tokens/components/molecules/_range-slider.css
index c00344ffe8..5bbcdc6d8d 100644
--- a/libs/ui/src/tokens/components/molecules/_range-slider.css
+++ b/libs/ui/src/tokens/components/molecules/_range-slider.css
@@ -39,20 +39,20 @@
   --color-slider-ring: --alpha(var(--color-primary) / var(--opacity-ring));
 
   /* === SIZING === */
-  --spacing-slider-thumb-sm: var(--spacing-xs);
-  --spacing-slider-thumb-md: var(--spacing-sm);
-  --spacing-slider-thumb-lg: var(--spacing-md);
+  --spacing-slider-thumb-sm: var(--spacing-200);
+  --spacing-slider-thumb-md: var(--spacing-250);
+  --spacing-slider-thumb-lg: var(--spacing-350);
 
-  --width-slider-track-sm: var(--spacing-3xs);
-  --width-slider-track-md: var(--spacing-2xs);
-  --width-slider-track-lg: var(--spacing-xs);
+  --width-slider-track-sm: var(--spacing-100);
+  --width-slider-track-md: var(--spacing-150);
+  --width-slider-track-lg: var(--spacing-200);
 
-  --height-slider-track-sm: var(--spacing-3xs);
-  --height-slider-track-md: var(--spacing-2xs);
-  --height-slider-track-lg: var(--spacing-xs);
+  --height-slider-track-sm: var(--spacing-100);
+  --height-slider-track-md: var(--spacing-150);
+  --height-slider-track-lg: var(--spacing-200);
 
   /* === SPACING === */
-  --spacing-slider-root: var(--spacing-xs);
+  --spacing-slider-root: var(--spacing-200);
 
   /* === TYPOGRAPHY === */
   --text-slider-value-size: var(--text-sm);
diff --git a/libs/ui/src/tokens/components/molecules/_search-form.css b/libs/ui/src/tokens/components/molecules/_search-form.css
index 59ef6dc41d..997fddd35b 100644
--- a/libs/ui/src/tokens/components/molecules/_search-form.css
+++ b/libs/ui/src/tokens/components/molecules/_search-form.css
@@ -1,8 +1,8 @@
 @theme static {
   /* Spacing for stacked layout */
-  --spacing-search-form-sm: var(--spacing-2xs);
-  --spacing-search-form-md: var(--spacing-xs);
-  --spacing-search-form-lg: var(--spacing-sm);
+  --spacing-search-form-sm: var(--spacing-150);
+  --spacing-search-form-md: var(--spacing-200);
+  --spacing-search-form-lg: var(--spacing-250);
 }
 
 @utility token-icon-search {
diff --git a/libs/ui/src/tokens/components/molecules/_select.css b/libs/ui/src/tokens/components/molecules/_select.css
index 931519600f..274463bce8 100644
--- a/libs/ui/src/tokens/components/molecules/_select.css
+++ b/libs/ui/src/tokens/components/molecules/_select.css
@@ -12,7 +12,7 @@
 
   /* === ROOT === */
   --color-select-root-bg: var(--color-select-bg);
-  --gap-select-root: var(--spacing-2xs);
+  --gap-select-root: var(--spacing-150);
 
   /* === LABEL === 
   --color-label: var(--color-fg-primary);*/
@@ -22,13 +22,13 @@
   --color-select-trigger-border: var(--color-select-border);
   --color-select-trigger-hover: var(--color-fill-hover);
   --color-select-trigger-focus: var(--color-primary);
-  --padding-select-trigger: var(--spacing-3xs);
+  --padding-select-trigger: var(--spacing-100);
 
   /* === CLEAR TRIGGER === */
   --color-select-clear-trigger-fg: var(--color-select-fg);
   --color-select-clear-trigger-bg: transparent;
-  --padding-select-clear-trigger: var(--spacing-3xs);
-  --spacing-select-right: var(--spacing-lg);
+  --padding-select-clear-trigger: var(--spacing-100);
+  --spacing-select-right: var(--spacing-450);
 
   /* === DROPDOWN CONTENT === */
   --color-select-content-bg: var(--color-surface);
@@ -41,13 +41,13 @@
   --color-select-item-hover: var(--color-fill-hover);
   --color-select-item-selected-bg: var(--color-overlay);
   --color-select-item-selected-fg: var(--color-primary);
-  --padding-select-item: var(--spacing-2xs) var(--spacing-sm);
+  --padding-select-item: var(--spacing-150) var(--spacing-250);
 
   /* === INDICATOR === */
   --color-select-indicator: var(--color-primary);
 
   /* === PADDING === */
-  --padding-select-trigger: var(--spacing-xs);
+  --padding-select-trigger: var(--spacing-200);
 
   /* === TYPOGRAPHY === */
   --text-select-trigger: var(--text-md);
diff --git a/libs/ui/src/tokens/components/molecules/_steps.css b/libs/ui/src/tokens/components/molecules/_steps.css
index 02f575c2cd..ff3d96301d 100644
--- a/libs/ui/src/tokens/components/molecules/_steps.css
+++ b/libs/ui/src/tokens/components/molecules/_steps.css
@@ -10,29 +10,29 @@
 
   /* === ROOT === */
   --color-steps-root-bg: var(--color-steps);
-  --gap-root: var(--spacing-sm);
+  --gap-root: var(--spacing-250);
 
   /* === LIST === */
   --color-steps-list-bg: var(--color-steps);
-  --gap-list: var(--spacing-xs);
+  --gap-list: var(--spacing-200);
 
   /* === ITEM === */
   --color-steps-item-bg: transparent;
-  --gap-item: var(--spacing-2xs);
+  --gap-item: var(--spacing-150);
 
   /* === TRIGGERS === */
 
-  --gap-trigger: var(--spacing-2xs);
+  --gap-trigger: var(--spacing-150);
 
   /* === CONTENT === */
   --color-steps-content-bg: var(--color-steps-accent);
-  --padding-content: var(--spacing-sm);
+  --padding-content: var(--spacing-250);
 
   /* === INDICATOR === */
   --color-steps-indicator-bg: var(--color-steps-accent);
   --color-steps-indicator-complete: var(--color-steps-active);
   --color-steps-indicator-current: var(--color-steps-active);
-  --height-steps-indicator: var(--spacing-md);
+  --height-steps-indicator: var(--spacing-350);
 
   /* === SEPARATOR === */
   --color-steps-separator-bg: var(--color-steps-accent);
@@ -41,7 +41,7 @@
   --width-steps-separator: 2px;
 
   /* === BUTTON STEPS === */
-  --padding-steps-btn: var(--spacing-3xs) var(--spacing-xs);
+  --padding-steps-btn: var(--spacing-100) var(--spacing-200);
 }
 
 /* Semantic tokens for steps icons */
diff --git a/libs/ui/src/tokens/components/molecules/_switch.css b/libs/ui/src/tokens/components/molecules/_switch.css
index 5f506b7b6d..ee57c01667 100644
--- a/libs/ui/src/tokens/components/molecules/_switch.css
+++ b/libs/ui/src/tokens/components/molecules/_switch.css
@@ -44,10 +44,10 @@
   );
 
   /* === SPACING === */
-  --spacing-root: var(--spacing-sm);
-  --spacing-control-padding: var(--spacing-3xs);
-  --spacing-track-width: var(--spacing-xl);
-  --spacing-track-height: var(--spacing-md);
+  --spacing-root: var(--spacing-250);
+  --spacing-control-padding: var(--spacing-100);
+  --spacing-track-width: var(--spacing-600);
+  --spacing-track-height: var(--spacing-350);
   /* Padding inside the control container */
   --spacing-control-padding: 0.125rem;
 
diff --git a/libs/ui/src/tokens/components/molecules/_toast.css b/libs/ui/src/tokens/components/molecules/_toast.css
index e1529b9d52..0dc61380c8 100644
--- a/libs/ui/src/tokens/components/molecules/_toast.css
+++ b/libs/ui/src/tokens/components/molecules/_toast.css
@@ -52,9 +52,9 @@
   /* === FOCUS RING === */
 
   /* === SPACING === */
-  --padding-toast-root: var(--spacing-sm);
-  --gap-toast-content: var(--spacing-xs);
-  --spacing-toast-description-gap: var(--spacing-3xs);
+  --padding-toast-root: var(--spacing-250);
+  --gap-toast-content: var(--spacing-200);
+  --spacing-toast-description-gap: var(--spacing-100);
 
   /* === TYPOGRAPHY === */
   --font-weight-toast-title: var(--font-weight-medium);
diff --git a/libs/ui/src/tokens/components/molecules/_tree-view.css b/libs/ui/src/tokens/components/molecules/_tree-view.css
index 7373f9fc05..57e1a3da51 100644
--- a/libs/ui/src/tokens/components/molecules/_tree-view.css
+++ b/libs/ui/src/tokens/components/molecules/_tree-view.css
@@ -17,7 +17,7 @@
   --color-tree-node-hover: var(--color-primary-hover);
   --color-tree-node-selected: var(--color-primary-active);
   --color-tree-node-focus: var(--color-ring-primary);
-  --padding-tree-node: var(--spacing-3xs);
+  --padding-tree-node: var(--spacing-100);
 
   /* Text colors */
   --color-tree-fg-hover: var(--color-fg-reverse);
@@ -30,8 +30,8 @@
   --color-tree-icon-hover: var(--color-fg-primary);
 
   /* === SPACING & SIZING === */
-  --tree-indent-per-level: var(--spacing-3xs);
-  --spacing-tree-icon: var(--spacing-2xs);
+  --tree-indent-per-level: var(--spacing-100);
+  --spacing-tree-icon: var(--spacing-150);
 
   /* Size variants */
   --text-tree-size: var(--text-sm);

From 67aafb3b081fa62dccba0cbd872ee9a8aceda95d Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Wed, 13 Aug 2025 07:24:19 +0200
Subject: [PATCH 02/44] refactor(ui): rename text tokens to fg for consistency

---
 libs/ui/src/atoms/button.tsx                  | 42 +++++++-------
 libs/ui/src/atoms/error-text.tsx              |  2 +-
 libs/ui/src/atoms/extra-text.tsx              |  2 +-
 libs/ui/src/atoms/input.tsx                   |  4 +-
 libs/ui/src/atoms/label.tsx                   |  2 +-
 libs/ui/src/atoms/textarea.tsx                |  6 +-
 libs/ui/src/molecules/checkbox.tsx            |  4 +-
 libs/ui/src/tokens/_semantic.css              |  2 +-
 libs/ui/src/tokens/_spacing.css               |  3 +-
 .../src/tokens/components/atoms/_button.css   | 56 +++++++++----------
 .../ui/src/tokens/components/atoms/_input.css | 20 +++----
 .../src/tokens/components/atoms/_textarea.css |  4 +-
 .../tokens/components/molecules/_checkbox.css |  2 +-
 13 files changed, 74 insertions(+), 75 deletions(-)

diff --git a/libs/ui/src/atoms/button.tsx b/libs/ui/src/atoms/button.tsx
index 7251077796..1eb72968e7 100644
--- a/libs/ui/src/atoms/button.tsx
+++ b/libs/ui/src/atoms/button.tsx
@@ -11,7 +11,7 @@ export const buttonVariants = tv({
     'transition-all duration-200',
     'focus:outline-none',
     'focus-visible:ring-3 focus-visible:ring-offset-2',
-    'disabled:text-btn-text-disabled disabled:pointer-events-none',
+    'disabled:text-btn-fg-disabled disabled:pointer-events-none',
   ],
   variants: {
     variant: {
@@ -49,7 +49,7 @@ export const buttonVariants = tv({
         'bg-btn-primary',
         'hover:bg-btn-primary-hover',
         'active:bg-btn-primary-active',
-        'text-btn-text-primary',
+        'text-btn-fg-primary',
       ],
     },
     {
@@ -59,7 +59,7 @@ export const buttonVariants = tv({
         'bg-btn-secondary',
         'hover:bg-btn-secondary-hover',
         'active:bg-btn-secondary-active',
-        'text-btn-text-secondary',
+        'text-btn-fg-secondary',
       ],
     },
     {
@@ -69,7 +69,7 @@ export const buttonVariants = tv({
         'bg-btn-tertiary',
         'hover:bg-btn-tertiary-hover',
         'active:bg-btn-tertiary-active',
-        'text-btn-text-tertiary',
+        'text-btn-fg-tertiary',
       ],
     },
     {
@@ -79,7 +79,7 @@ export const buttonVariants = tv({
         'bg-btn-warning',
         'hover:bg-btn-warning-hover',
         'active:bg-btn-warning-active',
-        'text-btn-text-warning',
+        'text-btn-fg-warning',
       ],
     },
     {
@@ -89,7 +89,7 @@ export const buttonVariants = tv({
         'bg-btn-danger',
         'hover:bg-btn-danger-hover',
         'active:bg-btn-danger-active',
-        'text-btn-text-danger',
+        'text-btn-fg-danger',
       ],
     },
     {
@@ -99,7 +99,7 @@ export const buttonVariants = tv({
         'bg-btn-primary-light',
         'hover:bg-btn-primary-light-hover',
         'active:bg-btn-primary-light-active',
-        'text-btn-text-primary-light',
+        'text-btn-fg-primary-light',
       ],
     },
     {
@@ -109,7 +109,7 @@ export const buttonVariants = tv({
         'bg-btn-secondary-light',
         'hover:bg-btn-secondary-light-hover',
         'active:bg-btn-secondary-light-active',
-        'text-btn-text-secondary-light',
+        'text-btn-fg-secondary-light',
       ],
     },
     {
@@ -119,7 +119,7 @@ export const buttonVariants = tv({
         'bg-btn-tertiary-light',
         'hover:bg-btn-tertiary-light-hover',
         'active:bg-btn-tertiary-light-active',
-        'text-btn-text-tertiary-light',
+        'text-btn-fg-tertiary-light',
       ],
     },
     {
@@ -129,7 +129,7 @@ export const buttonVariants = tv({
         'bg-btn-warning-light',
         'hover:bg-btn-warning-light-hover',
         'active:bg-btn-warning-light-active',
-        'text-btn-text-warning-light',
+        'text-btn-fg-warning-light',
       ],
     },
     {
@@ -139,7 +139,7 @@ export const buttonVariants = tv({
         'bg-btn-danger-light',
         'hover:bg-btn-danger-light-hover',
         'active:bg-btn-danger-light-active',
-        'text-btn-text-danger-light',
+        'text-btn-fg-danger-light',
       ],
     },
     {
@@ -149,7 +149,7 @@ export const buttonVariants = tv({
         'border-btn-border-primary',
         'hover:bg-btn-outlined-primary-hover',
         'active:bg-btn-outlined-primary-active',
-        'text-btn-text-outlined-primary',
+        'text-btn-fg-outlined-primary',
       ],
     },
     {
@@ -159,7 +159,7 @@ export const buttonVariants = tv({
         'border-btn-border-secondary',
         'hover:bg-btn-outlined-secondary-hover',
         'active:bg-btn-outlined-secondary-active',
-        'text-btn-text-outlined-secondary',
+        'text-btn-fg-outlined-secondary',
       ],
     },
     {
@@ -169,7 +169,7 @@ export const buttonVariants = tv({
         'border-btn-border-tertiary',
         'hover:bg-btn-outlined-tertiary-hover',
         'active:bg-btn-outlined-tertiary-active',
-        'text-btn-text-outlined-tertiary',
+        'text-btn-fg-outlined-tertiary',
       ],
     },
     {
@@ -179,7 +179,7 @@ export const buttonVariants = tv({
         'border-btn-border-warning',
         'hover:bg-btn-outlined-warning-hover',
         'active:bg-btn-outlined-warning-active',
-        'text-btn-text-outlined-warning',
+        'text-btn-fg-outlined-warning',
       ],
     },
     {
@@ -189,33 +189,33 @@ export const buttonVariants = tv({
         'border-btn-border-danger',
         'hover:bg-btn-outlined-danger-hover',
         'active:bg-btn-outlined-danger-active',
-        'text-btn-text-outlined-danger',
+        'text-btn-fg-outlined-danger',
       ],
     },
     {
       variant: 'primary',
       theme: 'borderless',
-      className: ['text-btn-text-primary-borderless'],
+      className: ['text-btn-fg-primary-borderless'],
     },
     {
       variant: 'secondary',
       theme: 'borderless',
-      className: ['text-btn-text-secondary-borderless'],
+      className: ['text-btn-fg-secondary-borderless'],
     },
     {
       variant: 'tertiary',
       theme: 'borderless',
-      className: ['text-btn-text-tertiary-borderless'],
+      className: ['text-btn-fg-tertiary-borderless'],
     },
     {
       variant: 'warning',
       theme: 'borderless',
-      className: ['text-btn-text-warning-borderless'],
+      className: ['text-btn-fg-warning-borderless'],
     },
     {
       variant: 'danger',
       theme: 'borderless',
-      className: ['text-btn-text-danger-borderless'],
+      className: ['text-btn-fg-danger-borderless'],
     },
     {
       theme: 'outlined',
diff --git a/libs/ui/src/atoms/error-text.tsx b/libs/ui/src/atoms/error-text.tsx
index c477efb769..52cad84693 100644
--- a/libs/ui/src/atoms/error-text.tsx
+++ b/libs/ui/src/atoms/error-text.tsx
@@ -4,7 +4,7 @@ import { tv } from '../utils'
 import { Icon } from './icon'
 
 const errorVariants = tv({
-  base: ['text-error-text', 'flex items-center gap-1'],
+  base: ['text-error-fg', 'flex items-center gap-1'],
   variants: {
     size: {
       sm: 'text-error-sm',
diff --git a/libs/ui/src/atoms/extra-text.tsx b/libs/ui/src/atoms/extra-text.tsx
index b23cff47de..f861c1bfe7 100644
--- a/libs/ui/src/atoms/extra-text.tsx
+++ b/libs/ui/src/atoms/extra-text.tsx
@@ -3,7 +3,7 @@ import type { VariantProps } from 'tailwind-variants'
 import { tv } from '../utils'
 
 const extraTextVariants = tv({
-  base: ['text-helper-text'],
+  base: ['text-helper-fg'],
   variants: {
     size: {
       sm: 'text-helper-sm',
diff --git a/libs/ui/src/atoms/input.tsx b/libs/ui/src/atoms/input.tsx
index 0292b3779f..2d4fe6a6f7 100644
--- a/libs/ui/src/atoms/input.tsx
+++ b/libs/ui/src/atoms/input.tsx
@@ -6,7 +6,7 @@ const inputVariants = tv({
   base: [
     'block w-full',
     'bg-input',
-    'text-input-text',
+    'text-input-fg',
     'placeholder:text-input-placeholder',
     'border border-input-border',
     'rounded-input',
@@ -58,7 +58,7 @@ const inputVariants = tv({
       true: [
         'bg-input-disabled',
         'border-input-border-disabled',
-        'text-input-text-disabled',
+        'text-input-fg-disabled',
         'placeholder:text-input-placeholder-disabled',
       ],
     },
diff --git a/libs/ui/src/atoms/label.tsx b/libs/ui/src/atoms/label.tsx
index 982b806861..5a4e3e957c 100644
--- a/libs/ui/src/atoms/label.tsx
+++ b/libs/ui/src/atoms/label.tsx
@@ -3,7 +3,7 @@ import type { VariantProps } from 'tailwind-variants'
 import { tv } from '../utils'
 
 const labelVariants = tv({
-  base: ['block', 'text-label-text', 'font-label'],
+  base: ['block', 'text-label-fg', 'font-label'],
   variants: {
     size: {
       sm: 'text-label-sm',
diff --git a/libs/ui/src/atoms/textarea.tsx b/libs/ui/src/atoms/textarea.tsx
index 722433cc66..bdb9141962 100644
--- a/libs/ui/src/atoms/textarea.tsx
+++ b/libs/ui/src/atoms/textarea.tsx
@@ -6,7 +6,7 @@ const textareaVariants = tv({
   base: [
     'block w-full',
     'bg-textarea',
-    'text-textarea-text',
+    'text-textarea-fg',
     'placeholder:text-textarea-placeholder',
     'border-(length:--textarea-border-width) border-textarea-border',
     'rounded-textarea',
@@ -14,7 +14,7 @@ const textareaVariants = tv({
     'hover:bg-textarea-hover hover:border-textarea-border-hover',
     'focus:outline-none focus:bg-textarea-focus focus:border-textarea-border-focus',
     'focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-textarea-ring',
-    'disabled:pointer-events-none disabled:bg-textarea-disabled disabled:border-textarea-border-disabled disabled:text-textarea-text-disabled',
+    'disabled:pointer-events-none disabled:bg-textarea-disabled disabled:border-textarea-border-disabled disabled:text-textarea-fg-disabled',
   ],
   variants: {
     variant: {
@@ -57,7 +57,7 @@ const textareaVariants = tv({
       both: 'resize',
     },
     readonly: {
-      true: 'bg-textarea-disabled cursor-default pointer-events-none opacity-90 text-textarea-text-disabled border-textarea-border-disabled',
+      true: 'bg-textarea-disabled cursor-default pointer-events-none opacity-90 text-textarea-fg-disabled border-textarea-border-disabled',
     },
   },
   defaultVariants: {
diff --git a/libs/ui/src/molecules/checkbox.tsx b/libs/ui/src/molecules/checkbox.tsx
index 4240ae0e1a..a3f808eeae 100644
--- a/libs/ui/src/molecules/checkbox.tsx
+++ b/libs/ui/src/molecules/checkbox.tsx
@@ -17,7 +17,7 @@ const checkboxVariants = tv({
       'bg-checkbox data-[state=checked]:bg-checkbox-checked border-checkbox',
       /* center icon, grid and place items do not work e.g. flex */
       'after:absolute after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2',
-      'data-[state=checked]:after:token-icon-checkbox text-icon-text data-[state=checked]:text-checkbox-icon-md',
+      'data-[state=checked]:after:token-icon-checkbox text-icon-fg data-[state=checked]:text-checkbox-icon-md',
       'data-[disabled]:opacity-checkbox-disabled data-[disabled]:cursor-not-allowed data-[disabled]:grayscale',
       'transition-all duration-200',
       'data-[focus]:outline-none data-[focus]:ring-2 data-[focus]:ring-checkbox-ring data-[focus]:ring-offset-checkbox-offset data-[focus]:ring-offset-2',
@@ -25,7 +25,7 @@ const checkboxVariants = tv({
       'data-[invalid]:border-checkbox-border-error',
       'data-[state=indeterminate]:bg-checkbox-indeterminate',
       'data-[state=indeterminate]:after:w-indeterminate data-[state=indeterminate]:after:h-indeterminate',
-      'data-[state=indeterminate]:after:bg-icon-text',
+      'data-[state=indeterminate]:after:bg-icon-fg',
     ],
   },
 })
diff --git a/libs/ui/src/tokens/_semantic.css b/libs/ui/src/tokens/_semantic.css
index 1b8ebc60a9..64a783b203 100644
--- a/libs/ui/src/tokens/_semantic.css
+++ b/libs/ui/src/tokens/_semantic.css
@@ -288,7 +288,7 @@
   /*Disabled state - Disabled
   It is used to fill all kinds of forbidden elements in the interface, such as background, text, stroke, fill, etc*/
   --color-disabled-bg: --alpha(var(--color-base-reverse) / 10%);
-  --color-disabled-text: --alpha(
+  --color-disabled-fg: --alpha(
     var(--color-fg-primary) /
     var(--opacity-disabled)
   );
diff --git a/libs/ui/src/tokens/_spacing.css b/libs/ui/src/tokens/_spacing.css
index 0253cfa487..c44ab05de9 100644
--- a/libs/ui/src/tokens/_spacing.css
+++ b/libs/ui/src/tokens/_spacing.css
@@ -20,7 +20,6 @@
   --spacing-900: clamp(6.1875rem, 5.9484rem + 1.1957vw, 6.875rem);
   --spacing-950: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);
 
-
   /* Legacy aliases for backward compatibility */
   --spacing-3xs: var(--spacing-100); /* 4px */
   --spacing-2xs: var(--spacing-150); /* 8px */
@@ -31,4 +30,4 @@
   --spacing-xl: var(--spacing-600); /* 48px */
   --spacing-2xl: var(--spacing-750); /* 64px */
   --spacing-3xl: var(--spacing-950); /* 96px */
-}
\ No newline at end of file
+}
diff --git a/libs/ui/src/tokens/components/atoms/_button.css b/libs/ui/src/tokens/components/atoms/_button.css
index e23fc19286..a1d0d7a2f1 100644
--- a/libs/ui/src/tokens/components/atoms/_button.css
+++ b/libs/ui/src/tokens/components/atoms/_button.css
@@ -147,37 +147,37 @@
 
   /* === UNIFIED DISABLED STATES === */
   --color-btn-disabled: var(--color-disabled-bg);
-  --color-btn-text-disabled: var(--color-disabled-text);
+  --color-btn-fg-disabled: var(--color-disabled-fg);
   --color-btn-border-disabled: var(--color-disabled-border);
 
   /* === TEXT COLORS === */
-  --color-btn-text: var(--color-fg-reverse);
-
-  --color-btn-text-outlined: var(--color-fg-primary);
-
-  --color-btn-text-primary: var(--color-btn-text);
-  --color-btn-text-secondary: var(--color-btn-text);
-  --color-btn-text-tertiary: var(--color-btn-text);
-  --color-btn-text-warning: var(--color-btn-text);
-  --color-btn-text-danger: var(--color-btn-text);
-
-  --color-btn-text-primary-light: var(--color-btn-text-light);
-  --color-btn-text-secondary-light: var(--color-btn-text-light);
-  --color-btn-text-tertiary-light: var(--color-btn-text-light);
-  --color-btn-text-warning-light: var(--color-btn-text-light);
-  --color-btn-text-danger-light: var(--color-btn-text-light);
-
-  --color-btn-text-outlined-primary: var(--color-btn-text-outlined);
-  --color-btn-text-outlined-secondary: var(--color-btn-text-outlined);
-  --color-btn-text-outlined-tertiary: var(--color-btn-text-outlined);
-  --color-btn-text-outlined-warning: var(--color-btn-text-outlined);
-  --color-btn-text-outlined-danger: var(--color-btn-text-outlined);
-
-  --color-btn-text-primary-borderless: var(--color-btn-primary);
-  --color-btn-text-secondary-borderless: var(--color-btn-secondary);
-  --color-btn-text-tertiary-borderless: var(--color-btn-tertiary);
-  --color-btn-text-warning-borderless: var(--color-btn-warning);
-  --color-btn-text-danger-borderless: var(--color-btn-danger);
+  --color-btn-fg: var(--color-fg-reverse);
+
+  --color-btn-fg-outlined: var(--color-fg-primary);
+
+  --color-btn-fg-primary: var(--color-btn-fg);
+  --color-btn-fg-secondary: var(--color-btn-fg);
+  --color-btn-fg-tertiary: var(--color-btn-fg);
+  --color-btn-fg-warning: var(--color-btn-fg);
+  --color-btn-fg-danger: var(--color-btn-fg);
+
+  --color-btn-fg-primary-light: var(--color-btn-fg-light);
+  --color-btn-fg-secondary-light: var(--color-btn-fg-light);
+  --color-btn-fg-tertiary-light: var(--color-btn-fg-light);
+  --color-btn-fg-warning-light: var(--color-btn-fg-light);
+  --color-btn-fg-danger-light: var(--color-btn-fg-light);
+
+  --color-btn-fg-outlined-primary: var(--color-btn-fg-outlined);
+  --color-btn-fg-outlined-secondary: var(--color-btn-fg-outlined);
+  --color-btn-fg-outlined-tertiary: var(--color-btn-fg-outlined);
+  --color-btn-fg-outlined-warning: var(--color-btn-fg-outlined);
+  --color-btn-fg-outlined-danger: var(--color-btn-fg-outlined);
+
+  --color-btn-fg-primary-borderless: var(--color-btn-primary);
+  --color-btn-fg-secondary-borderless: var(--color-btn-secondary);
+  --color-btn-fg-tertiary-borderless: var(--color-btn-tertiary);
+  --color-btn-fg-warning-borderless: var(--color-btn-warning);
+  --color-btn-fg-danger-borderless: var(--color-btn-danger);
 
   /* === FOCUS RINGS === */
   --color-btn-ring-primary: --alpha(
diff --git a/libs/ui/src/tokens/components/atoms/_input.css b/libs/ui/src/tokens/components/atoms/_input.css
index b2be131378..c3493b7c66 100644
--- a/libs/ui/src/tokens/components/atoms/_input.css
+++ b/libs/ui/src/tokens/components/atoms/_input.css
@@ -3,7 +3,7 @@
   /* Base input colors */
   --color-input: var(--color-fill-base);
   --color-input-border: var(--color-stroke-primary);
-  --color-input-text: var(--color-fg-primary);
+  --color-input-fg: var(--color-fg-primary);
   --color-input-disabled: var(--color-disabled-bg);
 
   /* Validation states - primary colors */
@@ -63,29 +63,29 @@
   );
 
   /* Text colors */
-  --color-input-text-disabled: --alpha(
-    var(--color-input-text) /
+  --color-input-fg-disabled: --alpha(
+    var(--color-input-fg) /
     var(--opacity-disabled)
   );
   --color-input-placeholder: --alpha(
-    var(--color-input-text) /
+    var(--color-input-fg) /
     var(--opacity-placeholder)
   );
 
   --color-input-placeholder-disabled: --alpha(
-    var(--color-input-text) /
+    var(--color-input-fg) /
     var(--opacity-disabled-placeholder)
   );
 
   /* Label colors */
-  --color-label-text: var(--color-input-text);
-  --color-label-disabled: var(--color-input-text-disabled);
+  --color-label-fg: var(--color-input-fg);
+  --color-label-disabled: var(--color-input-fg-disabled);
   --color-label-required: var(--color-input-danger);
   --margin-label: var(--spacing-100);
 
   /* Error/Helper/Extra colors */
-  --color-error-text: var(--color-danger);
-  --color-helper-text: var(--color-input-text);
+  --color-error-fg: var(--color-danger);
+  --color-helper-fg: var(--color-input-fg);
 
   /* Focus ring colors - using consistent opacity */
   --color-input-ring: --alpha(var(--color-primary) / var(--opacity-ring));
@@ -133,5 +133,5 @@
   --text-helper-sm: var(--text-input-sm);
   --text-helper-md: var(--text-input-md);
   --text-helper-lg: var(--text-input-lg);
-  --color-helper-text: var(--color-fg-secondary);
+  --color-helper-fg: var(--color-fg-secondary);
 }
diff --git a/libs/ui/src/tokens/components/atoms/_textarea.css b/libs/ui/src/tokens/components/atoms/_textarea.css
index d4b6d22686..5d7b6bac7b 100644
--- a/libs/ui/src/tokens/components/atoms/_textarea.css
+++ b/libs/ui/src/tokens/components/atoms/_textarea.css
@@ -3,7 +3,7 @@
   /* Primary variables mapped from semantic tokens */
   --color-textarea: var(--color-fill-base);
   --color-textarea-border: var(--color-stroke-primary);
-  --color-textarea-text: var(--color-fg-primary);
+  --color-textarea-fg: var(--color-fg-primary);
   --color-textarea-placeholder: --alpha(
     var(--color-fg-primary) /
     var(--opacity-placeholder)
@@ -58,7 +58,7 @@
   --color-textarea-borderless: --alpha(var(--color-textarea) / 50%);
 
   /* Text states */
-  --color-textarea-text-disabled: var(--color-disabled-text);
+  --color-textarea-fg-disabled: var(--color-disabled-fg);
 
   /* Focus rings */
   --color-textarea-ring: --alpha(var(--color-primary) / var(--opacity-ring));
diff --git a/libs/ui/src/tokens/components/molecules/_checkbox.css b/libs/ui/src/tokens/components/molecules/_checkbox.css
index 5f67a74e47..71bbe01eb7 100644
--- a/libs/ui/src/tokens/components/molecules/_checkbox.css
+++ b/libs/ui/src/tokens/components/molecules/_checkbox.css
@@ -16,7 +16,7 @@
   --color-checkbox-border-error: var(--color-checkbox-error);
 
   --spacing-checkbox: var(--spacing-200);
-  --color-icon-text: var(--color-fg-dark);
+  --color-icon-fg: var(--color-fg-dark);
   --text-checkbox-icon-md: var(--text-xs);
   --radius-checkbox: var(--radius-sm);
 

From 9786331885b4c6ed5686898560f79fd9e8077efb Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Wed, 13 Aug 2025 11:23:04 +0200
Subject: [PATCH 03/44] refactor(ui): automate semantic color light variants
 with oklch calculations

  - Replace static light-dark() definitions with dynamic oklch derivation
  - Add configurable state variables for light variant customization
  - Create comprehensive color palette story for design system documentation
  - Ensure consistent light variant behavior across all theme modes
---
 libs/ui/src/tokens/_semantic.css              |  44 ++-
 .../templates/color-palette.stories.tsx       | 336 ++++++++++++++++++
 .../templates/comprehensive-form.stories.tsx  |   2 +-
 3 files changed, 365 insertions(+), 17 deletions(-)
 create mode 100644 libs/ui/stories/templates/color-palette.stories.tsx

diff --git a/libs/ui/src/tokens/_semantic.css b/libs/ui/src/tokens/_semantic.css
index 64a783b203..882a4b6428 100644
--- a/libs/ui/src/tokens/_semantic.css
+++ b/libs/ui/src/tokens/_semantic.css
@@ -8,7 +8,9 @@
 :root {
   --state-hover: -0.08;
   --state-active: -0.12;
-  --state-disabled-chroma: 0.05;
+  --state-disabled-chroma: 0.01;
+  --state-light-variant: 0.2; /* Always make colors lighter for -light variant */
+  --state-light-chroma: 0.6; /* Reduce saturation for softer, pastel colors */
   --opacity-ring: 80%;
   --opacity-disabled: 60%;
   --opacity-placeholder: 60%;
@@ -78,7 +80,10 @@
   --color-primary-disabled: oklch(
     from var(--color-primary) l var(--state-disabled-chroma) h
   );
-  --color-primary-light: light-dark(var(--color-blue-300), var(--color-sky-200));
+  --color-primary-light: oklch(
+    from var(--color-primary) clamp(0, calc(l + var(--state-light-variant)), 1)
+      calc(c * var(--state-light-chroma)) h
+  );
   --color-primary-light-hover: oklch(
     from var(--color-primary-light) calc(l + var(--state-hover)) c h
   );
@@ -97,9 +102,10 @@
   --color-secondary-disabled: oklch(
     from var(--color-secondary) l var(--state-disabled-chroma) h
   );
-  --color-secondary-light: light-dark(
-    var(--color-orange-300),
-    var(--color-amber-200)
+  --color-secondary-light: oklch(
+    from var(--color-secondary)
+      clamp(0, calc(l + var(--state-light-variant)), 1)
+      calc(c * var(--state-light-chroma)) h
   );
   --color-secondary-light-hover: oklch(
     from var(--color-secondary-light) calc(l + var(--state-hover)) c h
@@ -119,9 +125,9 @@
   --color-tertiary-disabled: oklch(
     from var(--color-tertiary) l var(--state-disabled-chroma) h
   );
-  --color-tertiary-light: light-dark(
-    var(--color-pink-300),
-    var(--color-rose-200)
+  --color-tertiary-light: oklch(
+    from var(--color-tertiary) clamp(0, calc(l + var(--state-light-variant)), 1)
+      calc(c * var(--state-light-chroma)) h
   );
   --color-tertiary-light-hover: oklch(
     from var(--color-tertiary-light) calc(l + var(--state-hover)) c h
@@ -144,9 +150,9 @@
   --color-success-disabled: oklch(
     from var(--color-success) l var(--state-disabled-chroma) h
   );
-  --color-success-light: light-dark(
-    var(--color-emerald-100),
-    var(--color-emerald-100)
+  --color-success-light: oklch(
+    from var(--color-success) clamp(0, calc(l + var(--state-light-variant)), 1)
+      calc(c * var(--state-light-chroma)) h
   );
   --color-success-light-hover: oklch(
     from var(--color-success-light) calc(l + var(--state-hover)) c h
@@ -166,7 +172,10 @@
   --color-info-disabled: oklch(
     from var(--color-info) l var(--state-disabled-chroma) h
   );
-  --color-info-light: light-dark(var(--color-teal-300), var(--color-cyan-200));
+  --color-info-light: oklch(
+    from var(--color-info) clamp(0, calc(l + var(--state-light-variant)), 1)
+      calc(c * var(--state-light-chroma)) h
+  );
   --color-info-light-hover: oklch(
     from var(--color-info-light) calc(l + var(--state-hover)) c h
   );
@@ -185,9 +194,9 @@
   --color-warning-disabled: oklch(
     from var(--color-warning) l var(--state-disabled-chroma) h
   );
-  --color-warning-light: light-dark(
-    var(--color-yellow-300),
-    var(--color-yellow-200)
+  --color-warning-light: oklch(
+    from var(--color-warning) clamp(0, calc(l + var(--state-light-variant)), 1)
+      calc(c * var(--state-light-chroma)) h
   );
   --color-warning-light-hover: oklch(
     from var(--color-warning-light) calc(l + var(--state-hover)) c h
@@ -207,7 +216,10 @@
   --color-danger-disabled: oklch(
     from var(--color-danger) l var(--state-disabled-chroma) h
   );
-  --color-danger-light: light-dark(var(--color-red-300), var(--color-red-200));
+  --color-danger-light: oklch(
+    from var(--color-danger) clamp(0, calc(l + var(--state-light-variant)), 1)
+      calc(c * var(--state-light-chroma)) h
+  );
   --color-danger-light-hover: oklch(
     from var(--color-danger-light) calc(l + var(--state-hover)) c h
   );
diff --git a/libs/ui/stories/templates/color-palette.stories.tsx b/libs/ui/stories/templates/color-palette.stories.tsx
new file mode 100644
index 0000000000..07d72ae5d8
--- /dev/null
+++ b/libs/ui/stories/templates/color-palette.stories.tsx
@@ -0,0 +1,336 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import '../../src/tokens/_colors.css'
+import '../../src/tokens/_semantic.css'
+
+const meta: Meta = {
+  title: 'Templates/Color Palette',
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+export default meta
+type Story = StoryObj
+
+const semanticColors = [
+  'primary',
+  'secondary', 
+  'tertiary',
+  'info',
+  'success',
+  'warning',
+  'danger',
+] as const
+
+const colorVariants = [
+  { suffix: '', label: 'Default' },
+  { suffix: '-light', label: 'Light' },
+] as const
+
+const stateVariants = [
+  { state: '', label: 'Default' },
+  { state: 'hover', label: 'Hover' },
+  { state: 'active', label: 'Active' },
+  { state: 'disabled', label: 'Disabled' },
+] as const
+
+function ColorSwatch({ 
+  color, 
+  variant, 
+  state,
+  showLabel = true 
+}: { 
+  color: string
+  variant: string
+  state: string
+  showLabel?: boolean
+}) {
+  const [copied, setCopied] = useState(false)
+  
+  const baseColorVar = `--color-${color}${variant}`
+  
+  // For disabled state, we use the predefined -disabled variant
+  // For other states, we calculate the color modification
+  const computedColor = state === 'disabled' 
+    ? `var(--color-${color}${variant}-disabled)`
+    : state && state !== ''
+    ? `oklch(from var(${baseColorVar}) calc(l + var(--state-${state})) c h)`
+    : `var(${baseColorVar})`
+  
+  // Get the correct CSS variable name to copy
+  const colorVar = state === 'disabled' 
+    ? `--color-${color}${variant}-disabled`
+    : baseColorVar
+  
+  const handleCopy = () => {
+    navigator.clipboard.writeText(colorVar)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+  
+  return (
+    <div 
+      className="group relative flex flex-col items-center gap-2 p-3 rounded-lg transition-all hover:bg-fill-hover cursor-pointer"
+      onClick={handleCopy}
+    >
+      <div 
+        className="relative w-20 h-20 rounded-lg shadow-md transition-transform group-hover:scale-110 border border-stroke-primary"
+        style={{ 
+          backgroundColor: computedColor,
+        }}
+      >
+        {copied && (
+          <div className="absolute inset-0 flex items-center justify-center bg-base-reverse/75 text-fg-reverse text-xs rounded-lg">
+            Copied!
+          </div>
+        )}
+      </div>
+      {showLabel && (
+        <div className="text-center">
+          <div className="text-xs font-medium text-fg-primary">
+            {color}{variant}
+          </div>
+          {state && (
+            <div className="text-xs text-fg-secondary-light">
+              {state}
+            </div>
+          )}
+          <div className="text-xs font-mono text-fg-secondary-light mt-1 opacity-0 group-hover:opacity-100 transition-opacity">
+            {colorVar}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ColorGroup({ color }: { color: string }) {
+  return (
+    <div className="bg-surface rounded-xl shadow-lg p-6">
+      <h3 className="text-lg font-semibold mb-4 capitalize text-fg-primary">
+        {color}
+      </h3>
+      
+      <div className="space-y-6">
+        {colorVariants.map(({ suffix, label }) => (
+          <div key={suffix}>
+            <h4 className="text-sm font-medium text-fg-secondary mb-3">
+              {label}
+            </h4>
+            <div className="grid grid-cols-4 gap-2">
+              {stateVariants.map(({ state, label: stateLabel }) => (
+                <ColorSwatch
+                  key={state}
+                  color={color}
+                  variant={suffix}
+                  state={state}
+                />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function ColorPaletteGrid() {
+  const [filter, setFilter] = useState<string>('all')
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')
+  
+  const filteredColors = filter === 'all' 
+    ? semanticColors 
+    : semanticColors.filter(c => c === filter)
+  
+  return (
+    <div className="min-h-screen bg-base p-8">
+      <div className="max-w-7xl mx-auto">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-fg-primary mb-2">
+            Color Palette
+          </h1>
+          <p className="text-fg-secondary">
+            Click any color swatch to copy its CSS variable name
+          </p>
+        </div>
+        
+        {/* Controls */}
+        <div className="flex flex-wrap gap-4 mb-8">
+          <div className="flex gap-2">
+            <button
+              onClick={() => setViewMode('grid')}
+              className={`px-4 py-2 rounded-lg transition-colors ${
+                viewMode === 'grid'
+                  ? 'bg-primary text-fg-reverse'
+                  : 'bg-fill-base hover:bg-fill-hover text-fg-primary'
+              }`}
+            >
+              Grid View
+            </button>
+            <button
+              onClick={() => setViewMode('list')}
+              className={`px-4 py-2 rounded-lg transition-colors ${
+                viewMode === 'list'
+                  ? 'bg-primary text-fg-reverse'
+                  : 'bg-fill-base hover:bg-fill-hover text-fg-primary'
+              }`}
+            >
+              List View
+            </button>
+          </div>
+          
+          <select
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            className="px-4 py-2 rounded-lg bg-surface border border-stroke-primary text-fg-primary"
+          >
+            <option value="all">All Colors</option>
+            {semanticColors.map(color => (
+              <option key={color} value={color} className="capitalize">
+                {color}
+              </option>
+            ))}
+          </select>
+        </div>
+        
+        {/* Color Grid/List */}
+        <div className={
+          viewMode === 'grid' 
+            ? 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6'
+            : 'space-y-6'
+        }>
+          {filteredColors.map(color => (
+            <ColorGroup key={color} color={color} />
+          ))}
+        </div>
+        
+        {/* Quick Reference */}
+        <div className="mt-12 bg-surface rounded-xl shadow-lg p-6">
+          <h2 className="text-xl font-semibold mb-4 text-fg-primary">
+            Quick Reference
+          </h2>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <h3 className="text-sm font-medium text-fg-secondary mb-3">
+                Color Variants
+              </h3>
+              <div className="space-y-2">
+                {colorVariants.map(({ suffix, label }) => (
+                  <div key={suffix} className="flex justify-between text-sm">
+                    <span className="text-fg-primary">{label}</span>
+                    <code className="font-mono text-fg-secondary-light">
+                      {suffix || '(default)'}
+                    </code>
+                  </div>
+                ))}
+              </div>
+            </div>
+            
+            <div>
+              <h3 className="text-sm font-medium text-fg-secondary mb-3">
+                State Modifiers
+              </h3>
+              <div className="space-y-2">
+                {stateVariants.map(({ state, label }) => (
+                  <div key={state} className="flex justify-between text-sm">
+                    <span className="text-fg-primary">{label}</span>
+                    <code className="font-mono text-fg-secondary-light">
+                      {state ? `--state-${state}` : '(default)'}
+                    </code>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+          
+          <div className="mt-6 p-4 bg-overlay rounded-lg">
+            <h3 className="text-sm font-medium text-fg-secondary mb-2">
+              Usage Example
+            </h3>
+            <code className="text-sm font-mono text-fg-primary">
+              background-color: var(--color-primary-light);
+            </code>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: () => <ColorPaletteGrid />,
+}
+
+// Compact view for all colors at once
+function CompactColorGrid() {
+  return (
+    <div className="min-h-screen bg-base p-8">
+      <div className="max-w-7xl mx-auto">
+        <h1 className="text-3xl font-bold text-fg-primary mb-8">
+          Color Palette - Compact View
+        </h1>
+        
+        <div className="bg-surface rounded-xl shadow-lg p-6">
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-stroke-primary">
+                  <th className="text-left py-3 px-4 text-sm font-medium text-fg-secondary">
+                    Color
+                  </th>
+                  {colorVariants.map(({ label }) => (
+                    <th key={label} colSpan={4} className="text-center py-3 px-2 text-sm font-medium text-fg-secondary">
+                      {label}
+                    </th>
+                  ))}
+                </tr>
+                <tr className="border-b border-stroke-primary">
+                  <th></th>
+                  {colorVariants.map(({ label }) => (
+                    <React.Fragment key={label}>
+                      {stateVariants.map(({ label: stateLabel }) => (
+                        <th key={stateLabel} className="text-center py-2 px-1 text-xs text-fg-secondary-light">
+                          {stateLabel}
+                        </th>
+                      ))}
+                    </React.Fragment>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {semanticColors.map(color => (
+                  <tr key={color} className="border-b border-stroke-primary/50">
+                    <td className="py-4 px-4 font-medium capitalize text-fg-primary">
+                      {color}
+                    </td>
+                    {colorVariants.map(({ suffix }) => (
+                      <React.Fragment key={suffix}>
+                        {stateVariants.map(({ state }) => (
+                          <td key={state} className="p-2">
+                            <ColorSwatch
+                              color={color}
+                              variant={suffix}
+                              state={state}
+                              showLabel={false}
+                            />
+                          </td>
+                        ))}
+                      </React.Fragment>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const Compact: Story = {
+  render: () => <CompactColorGrid />,
+}
\ No newline at end of file
diff --git a/libs/ui/stories/templates/comprehensive-form.stories.tsx b/libs/ui/stories/templates/comprehensive-form.stories.tsx
index 1a66917dbf..98b255cde2 100644
--- a/libs/ui/stories/templates/comprehensive-form.stories.tsx
+++ b/libs/ui/stories/templates/comprehensive-form.stories.tsx
@@ -8,7 +8,7 @@ import { Textarea } from '../../src/atoms/textarea'
 import { Combobox } from '../../src/molecules/combobox'
 import { FormCheckbox } from '../../src/molecules/form-checkbox'
 import { FormInput } from '../../src/molecules/form-input'
-import { NumericInput } from '../../src/molecules/numeric-input'
+import { NumericInput } from '../../src/atoms/numeric-input'
 import { Select } from '../../src/molecules/select'
 import { Switch } from '../../src/molecules/switch'
 

From c7cc8094dd99bdaf147308359dbd0679c4c54988 Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Wed, 13 Aug 2025 15:30:18 +0200
Subject: [PATCH 04/44] refactor(ui): migrate border tokens from hardcoded
 colors to alpha-based system

  - Replace --color-stroke-* with --color-border-* naming convention
  - minor refactor light variants to use min pattern intead of clamp
---
 libs/ui/src/tokens/_semantic.css              |  36 ++++--
 .../ui/src/tokens/components/atoms/_badge.css |   2 +-
 .../ui/src/tokens/components/atoms/_input.css |   2 +-
 .../src/tokens/components/atoms/_textarea.css |   2 +-
 .../components/molecules/_accordion.css       |   2 +-
 .../tokens/components/molecules/_checkbox.css |   2 +-
 .../tokens/components/molecules/_combobox.css |   2 +-
 .../tokens/components/molecules/_dialog.css   |   2 +-
 .../src/tokens/components/molecules/_menu.css |   4 +-
 .../components/molecules/_numeric-input.css   |   2 +-
 .../components/molecules/_pagination.css      |   2 +-
 .../components/molecules/_product-card.css    |   2 +-
 .../components/molecules/_range-slider.css    |   2 +-
 .../tokens/components/molecules/_select.css   |   4 +-
 .../tokens/components/molecules/_switch.css   |   2 +-
 .../components/molecules/_tree-view.css       |   2 +-
 .../templates/color-palette.stories.tsx       | 112 +++++++++++++++---
 17 files changed, 137 insertions(+), 45 deletions(-)

diff --git a/libs/ui/src/tokens/_semantic.css b/libs/ui/src/tokens/_semantic.css
index 882a4b6428..ca869f7ca6 100644
--- a/libs/ui/src/tokens/_semantic.css
+++ b/libs/ui/src/tokens/_semantic.css
@@ -9,8 +9,10 @@
   --state-hover: -0.08;
   --state-active: -0.12;
   --state-disabled-chroma: 0.01;
-  --state-light-variant: 0.2; /* Always make colors lighter for -light variant */
+  --state-light-variant: 0.1; /* Always make colors lighter for -light variant */
   --state-light-chroma: 0.6; /* Reduce saturation for softer, pastel colors */
+  --state-border: 15%;
+  --max-lightness: 0.97;
   --opacity-ring: 80%;
   --opacity-disabled: 60%;
   --opacity-placeholder: 60%;
@@ -81,7 +83,8 @@
     from var(--color-primary) l var(--state-disabled-chroma) h
   );
   --color-primary-light: oklch(
-    from var(--color-primary) clamp(0, calc(l + var(--state-light-variant)), 1)
+    from var(--color-primary)
+      min(var(--max-lightness), calc(l + var(--state-light-variant)))
       calc(c * var(--state-light-chroma)) h
   );
   --color-primary-light-hover: oklch(
@@ -104,7 +107,7 @@
   );
   --color-secondary-light: oklch(
     from var(--color-secondary)
-      clamp(0, calc(l + var(--state-light-variant)), 1)
+      min(var(--max-lightness), calc(l + var(--state-light-variant)))
       calc(c * var(--state-light-chroma)) h
   );
   --color-secondary-light-hover: oklch(
@@ -126,7 +129,8 @@
     from var(--color-tertiary) l var(--state-disabled-chroma) h
   );
   --color-tertiary-light: oklch(
-    from var(--color-tertiary) clamp(0, calc(l + var(--state-light-variant)), 1)
+    from var(--color-tertiary)
+      min(var(--max-lightness), calc(l + var(--state-light-variant)))
       calc(c * var(--state-light-chroma)) h
   );
   --color-tertiary-light-hover: oklch(
@@ -151,7 +155,8 @@
     from var(--color-success) l var(--state-disabled-chroma) h
   );
   --color-success-light: oklch(
-    from var(--color-success) clamp(0, calc(l + var(--state-light-variant)), 1)
+    from var(--color-success)
+      min(var(--max-lightness), calc(l + var(--state-light-variant)))
       calc(c * var(--state-light-chroma)) h
   );
   --color-success-light-hover: oklch(
@@ -173,7 +178,8 @@
     from var(--color-info) l var(--state-disabled-chroma) h
   );
   --color-info-light: oklch(
-    from var(--color-info) clamp(0, calc(l + var(--state-light-variant)), 1)
+    from var(--color-info)
+      min(var(--max-lightness), calc(l + var(--state-light-variant)))
       calc(c * var(--state-light-chroma)) h
   );
   --color-info-light-hover: oklch(
@@ -195,7 +201,8 @@
     from var(--color-warning) l var(--state-disabled-chroma) h
   );
   --color-warning-light: oklch(
-    from var(--color-warning) clamp(0, calc(l + var(--state-light-variant)), 1)
+    from var(--color-warning)
+      min(var(--max-lightness), calc(l + var(--state-light-variant)))
       calc(c * var(--state-light-chroma)) h
   );
   --color-warning-light-hover: oklch(
@@ -217,7 +224,8 @@
     from var(--color-danger) l var(--state-disabled-chroma) h
   );
   --color-danger-light: oklch(
-    from var(--color-danger) clamp(0, calc(l + var(--state-light-variant)), 1)
+    from var(--color-danger)
+      min(var(--max-lightness), calc(l + var(--state-light-variant)))
       calc(c * var(--state-light-chroma)) h
   );
   --color-danger-light-hover: oklch(
@@ -266,8 +274,14 @@
   );
 
   /* Borders */
-  --color-stroke-primary: var(--color-gray-300);
-  --color-stroke-secondary: var(--color-gray-600);
+  --color-border-primary: --alpha(
+    var(--color-base-reverse) /
+    var(--state-border)
+  );
+  --color-border-secondary: --alpha(
+    var(--color-base-reverse) /
+    calc(var(--state-border) * 1.5)
+  );
   --border-width-none: 0px;
   --border-width-sm: 1px;
   --border-width-md: 2px;
@@ -305,7 +319,7 @@
     var(--opacity-disabled)
   );
   --color-disabled-border: --alpha(
-    var(--color-stroke-primary) /
+    var(--color-border-primary) /
     var(--opacity-disabled)
   );
   --color-disabled-fill: --alpha(
diff --git a/libs/ui/src/tokens/components/atoms/_badge.css b/libs/ui/src/tokens/components/atoms/_badge.css
index 545457fc49..e66e6a912c 100644
--- a/libs/ui/src/tokens/components/atoms/_badge.css
+++ b/libs/ui/src/tokens/components/atoms/_badge.css
@@ -51,5 +51,5 @@
   /* Outline variant */
   --color-badge-outline-bg: transparent;
   --color-badge-outline-fg: var(--color-fg-secondary);
-  --color-badge-border-outline: var(--color-border-neutral);
+  --color-badge-border-outline: var(--color-border-primary);
 }
diff --git a/libs/ui/src/tokens/components/atoms/_input.css b/libs/ui/src/tokens/components/atoms/_input.css
index c3493b7c66..6085b0549e 100644
--- a/libs/ui/src/tokens/components/atoms/_input.css
+++ b/libs/ui/src/tokens/components/atoms/_input.css
@@ -2,7 +2,7 @@
   /* BASE TOKENS - direct mapping from semantic tokens */
   /* Base input colors */
   --color-input: var(--color-fill-base);
-  --color-input-border: var(--color-stroke-primary);
+  --color-input-border: var(--color-border-primary);
   --color-input-fg: var(--color-fg-primary);
   --color-input-disabled: var(--color-disabled-bg);
 
diff --git a/libs/ui/src/tokens/components/atoms/_textarea.css b/libs/ui/src/tokens/components/atoms/_textarea.css
index 5d7b6bac7b..887e2ec867 100644
--- a/libs/ui/src/tokens/components/atoms/_textarea.css
+++ b/libs/ui/src/tokens/components/atoms/_textarea.css
@@ -2,7 +2,7 @@
   /* === BASE TOKEN MAPPING === */
   /* Primary variables mapped from semantic tokens */
   --color-textarea: var(--color-fill-base);
-  --color-textarea-border: var(--color-stroke-primary);
+  --color-textarea-border: var(--color-border-primary);
   --color-textarea-fg: var(--color-fg-primary);
   --color-textarea-placeholder: --alpha(
     var(--color-fg-primary) /
diff --git a/libs/ui/src/tokens/components/molecules/_accordion.css b/libs/ui/src/tokens/components/molecules/_accordion.css
index 14a9ce6098..12a8009ed5 100644
--- a/libs/ui/src/tokens/components/molecules/_accordion.css
+++ b/libs/ui/src/tokens/components/molecules/_accordion.css
@@ -1,7 +1,7 @@
 @theme static {
   /* === BASE TOKEN MAPPING === */
   --color-accordion: var(--color-surface);
-  --color-accordion-border: var(--color-stroke-primary);
+  --color-accordion-border: var(--color-border-primary);
 
   /* === STATE VARIATIONS === */
   --color-accordion-hover: oklch(
diff --git a/libs/ui/src/tokens/components/molecules/_checkbox.css b/libs/ui/src/tokens/components/molecules/_checkbox.css
index 71bbe01eb7..39f5997405 100644
--- a/libs/ui/src/tokens/components/molecules/_checkbox.css
+++ b/libs/ui/src/tokens/components/molecules/_checkbox.css
@@ -3,7 +3,7 @@
   --color-checkbox: var(--color-fill-active);
   --color-checkbox-error: var(--color-danger);
   --color-checkbox-checked: var(--color-success);
-  --color-checkbox-border: var(--color-stroke-primary);
+  --color-checkbox-border: var(--color-border-primary);
   --opacity-checkbox-disabled: var(--opacity-disabled);
 
   --color-checkbox-indeterminate: var(--color-primary);
diff --git a/libs/ui/src/tokens/components/molecules/_combobox.css b/libs/ui/src/tokens/components/molecules/_combobox.css
index 39c2ec3b5b..8b505539f6 100644
--- a/libs/ui/src/tokens/components/molecules/_combobox.css
+++ b/libs/ui/src/tokens/components/molecules/_combobox.css
@@ -2,7 +2,7 @@
   --z-combobox-content: 20;
   /* ===== CONTROL (Input Container) ===== */
   --color-combobox: var(--color-fill-base);
-  --color-combobox-border: var(--color-stroke-primary);
+  --color-combobox-border: var(--color-border-primary);
   --color-combobox-hover: oklch(
     from var(--color-combobox) calc(l + var(--state-hover)) c h
   );
diff --git a/libs/ui/src/tokens/components/molecules/_dialog.css b/libs/ui/src/tokens/components/molecules/_dialog.css
index 49e5f0e85f..8ac91ee13f 100644
--- a/libs/ui/src/tokens/components/molecules/_dialog.css
+++ b/libs/ui/src/tokens/components/molecules/_dialog.css
@@ -16,7 +16,7 @@
   /* ===== DIALOG CONTENT PANEL ===== */
   --color-dialog-content-bg: var(--color-dialog-bg);
   --color-dialog-content-fg: var(--color-dialog-fg);
-  --color-dialog-content-border: var(--color-stroke-primary);
+  --color-dialog-content-border: var(--color-border-primary);
   --radius-dialog-content: var(--radius-sm);
   --shadow-dialog-content: var(--shadow-xl);
 
diff --git a/libs/ui/src/tokens/components/molecules/_menu.css b/libs/ui/src/tokens/components/molecules/_menu.css
index c6f22d3069..41c8911675 100644
--- a/libs/ui/src/tokens/components/molecules/_menu.css
+++ b/libs/ui/src/tokens/components/molecules/_menu.css
@@ -1,7 +1,7 @@
 @theme static {
   /* ===== MENU CONTENT PANEL ===== */
   --color-menu-content-bg: var(--color-surface);
-  --color-menu-content-border: var(--color-stroke-primary);
+  --color-menu-content-border: var(--color-border-primary);
   --radius-menu: var(--radius-sm);
   --shadow-menu-content-shadow: var(--shadow-lg);
 
@@ -21,7 +21,7 @@
   --color-menu-item-icon-fg: var(--color-fg-secondary);
 
   /* ===== MENU SEPARATOR ===== */
-  --color-menu-separator-bg: var(--color-stroke-primary);
+  --color-menu-separator-bg: var(--color-border-primary);
   --height-menu-separator: 1px;
   --margin-menu-separator: var(--spacing-200);
 
diff --git a/libs/ui/src/tokens/components/molecules/_numeric-input.css b/libs/ui/src/tokens/components/molecules/_numeric-input.css
index b3945dc7be..21cd3952e8 100644
--- a/libs/ui/src/tokens/components/molecules/_numeric-input.css
+++ b/libs/ui/src/tokens/components/molecules/_numeric-input.css
@@ -6,7 +6,7 @@
   --color-ni-invalid-border: var(--color-danger);
   --color-ni-invalid-bg: --alpha(var(--color-danger) / 10%);
 
-  --color-ni-border: var(--color-stroke-primary);
+  --color-ni-border: var(--color-border-primary);
   --border-width-ni: var(--border-width-input);
 
   --gap-ni-root-sm: var(--spacing-150);
diff --git a/libs/ui/src/tokens/components/molecules/_pagination.css b/libs/ui/src/tokens/components/molecules/_pagination.css
index b732c9f5cc..8b7ad11c1d 100644
--- a/libs/ui/src/tokens/components/molecules/_pagination.css
+++ b/libs/ui/src/tokens/components/molecules/_pagination.css
@@ -20,7 +20,7 @@
   );
 
   /* Border colors */
-  --color-pagination-border: var(--color-stroke-primary);
+  --color-pagination-border: var(--color-border-primary);
   --color-pagination-border-active: var(--color-primary);
   --color-pagination-border-hover: --alpha(
     var(--color-pagination-border-active) /
diff --git a/libs/ui/src/tokens/components/molecules/_product-card.css b/libs/ui/src/tokens/components/molecules/_product-card.css
index c54d5e3464..64e595653b 100644
--- a/libs/ui/src/tokens/components/molecules/_product-card.css
+++ b/libs/ui/src/tokens/components/molecules/_product-card.css
@@ -1,7 +1,7 @@
 @theme static {
   --color-pc: var(--color-surface);
 
-  --border-pc-border: var(--color-stroke-primary);
+  --border-pc-border: var(--color-border-primary);
   --border-pc-width: var(--border-width-sm);
   --radius-pc: var(--radius-md);
 
diff --git a/libs/ui/src/tokens/components/molecules/_range-slider.css b/libs/ui/src/tokens/components/molecules/_range-slider.css
index 5bbcdc6d8d..db5c6c9b84 100644
--- a/libs/ui/src/tokens/components/molecules/_range-slider.css
+++ b/libs/ui/src/tokens/components/molecules/_range-slider.css
@@ -3,7 +3,7 @@
   --color-slider-track: var(--color-fill-base);
   --color-slider-range: var(--color-primary);
   --color-slider-thumb: var(--color-base-light);
-  --color-slider-border: var(--color-stroke-primary);
+  --color-slider-border: var(--color-border-primary);
   --color-slider-error: var(--color-danger);
 
   --opacity-slider-disabled: var(--opacity-disabled);
diff --git a/libs/ui/src/tokens/components/molecules/_select.css b/libs/ui/src/tokens/components/molecules/_select.css
index 274463bce8..60e519329b 100644
--- a/libs/ui/src/tokens/components/molecules/_select.css
+++ b/libs/ui/src/tokens/components/molecules/_select.css
@@ -1,7 +1,7 @@
 @theme static {
   /* === BASE TOKEN MAPPING === */
   --color-select-bg: var(--color-base);
-  --color-select-border: var(--color-stroke-primary);
+  --color-select-border: var(--color-border-primary);
   --color-select-fg: var(--color-fg-primary);
   --color-select-placeholder: --alpha(
     var(--color-fg-secondary) /
@@ -32,7 +32,7 @@
 
   /* === DROPDOWN CONTENT === */
   --color-select-content-bg: var(--color-surface);
-  --color-select-content-border: var(--color-stroke-primary);
+  --color-select-content-border: var(--color-border-primary);
   --color-select-content-shadow: var(--shadow-md);
 
   /* === OPTION ITEM === */
diff --git a/libs/ui/src/tokens/components/molecules/_switch.css b/libs/ui/src/tokens/components/molecules/_switch.css
index ee57c01667..a88b11f24f 100644
--- a/libs/ui/src/tokens/components/molecules/_switch.css
+++ b/libs/ui/src/tokens/components/molecules/_switch.css
@@ -7,7 +7,7 @@
   /* === BASE TOKEN MAPPING === */
   --color-switch-bg: var(--color-overlay);
   --color-switch-checked: var(--color-success);
-  --color-switch-border: var(--color-stroke-primary);
+  --color-switch-border: var(--color-border-primary);
   --color-switch-thumb: var(--color-base-light);
 
   /* === STATE VARIATIONS === */
diff --git a/libs/ui/src/tokens/components/molecules/_tree-view.css b/libs/ui/src/tokens/components/molecules/_tree-view.css
index 57e1a3da51..cdc611a0bb 100644
--- a/libs/ui/src/tokens/components/molecules/_tree-view.css
+++ b/libs/ui/src/tokens/components/molecules/_tree-view.css
@@ -3,7 +3,7 @@
   /* === BASE TOKEN MAPPING === */
   --color-tree-bg: transparent;
   --color-tree-fg: var(--color-fg-primary);
-  --color-tree-border: var(--color-stroke-primary);
+  --color-tree-border: var(--color-border-primary);
 
   /* Tree root */
   --color-tree-root-bg: transparent;
diff --git a/libs/ui/stories/templates/color-palette.stories.tsx b/libs/ui/stories/templates/color-palette.stories.tsx
index 07d72ae5d8..0c6a006c1c 100644
--- a/libs/ui/stories/templates/color-palette.stories.tsx
+++ b/libs/ui/stories/templates/color-palette.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { useState } from 'react'
+import React, { useState, useRef } from 'react'
 import '../../src/tokens/_colors.css'
 import '../../src/tokens/_semantic.css'
 
@@ -39,14 +39,17 @@ function ColorSwatch({
   color, 
   variant, 
   state,
-  showLabel = true 
+  showLabel = true,
+  copyMode = 'variable'
 }: { 
   color: string
   variant: string
   state: string
   showLabel?: boolean
+  copyMode?: 'variable' | 'oklch'
 }) {
   const [copied, setCopied] = useState(false)
+  const swatchRef = useRef<HTMLDivElement>(null)
   
   const baseColorVar = `--color-${color}${variant}`
   
@@ -64,7 +67,18 @@ function ColorSwatch({
     : baseColorVar
   
   const handleCopy = () => {
-    navigator.clipboard.writeText(colorVar)
+    let textToCopy: string
+    
+    if (copyMode === 'oklch' && swatchRef.current) {
+      // Get oklch value from computed styles
+      const oklch = window.getComputedStyle(swatchRef.current).backgroundColor
+      textToCopy = oklch
+    } else {
+      // Copy variable name
+      textToCopy = colorVar
+    }
+    
+    navigator.clipboard.writeText(textToCopy)
     setCopied(true)
     setTimeout(() => setCopied(false), 2000)
   }
@@ -75,14 +89,18 @@ function ColorSwatch({
       onClick={handleCopy}
     >
       <div 
-        className="relative w-20 h-20 rounded-lg shadow-md transition-transform group-hover:scale-110 border border-stroke-primary"
+        ref={swatchRef}
+        className="relative w-20 h-20 rounded-lg shadow-md transition-transform group-hover:scale-110 border border--border-primary"
         style={{ 
           backgroundColor: computedColor,
         }}
       >
         {copied && (
-          <div className="absolute inset-0 flex items-center justify-center bg-base-reverse/75 text-fg-reverse text-xs rounded-lg">
-            Copied!
+          <div className="absolute inset-0 flex flex-col items-center justify-center bg-base-reverse/75 text-fg-reverse text-xs rounded-lg">
+            <div>Copied!</div>
+            <div className="text-[10px] opacity-75">
+              {copyMode === 'oklch' ? 'OKLCH' : 'VAR'}
+            </div>
           </div>
         )}
       </div>
@@ -97,7 +115,10 @@ function ColorSwatch({
             </div>
           )}
           <div className="text-xs font-mono text-fg-secondary-light mt-1 opacity-0 group-hover:opacity-100 transition-opacity">
-            {colorVar}
+            {copyMode === 'oklch' && swatchRef.current 
+              ? window.getComputedStyle(swatchRef.current).backgroundColor
+              : colorVar
+            }
           </div>
         </div>
       )}
@@ -105,7 +126,7 @@ function ColorSwatch({
   )
 }
 
-function ColorGroup({ color }: { color: string }) {
+function ColorGroup({ color, copyMode }: { color: string; copyMode: 'variable' | 'oklch' }) {
   return (
     <div className="bg-surface rounded-xl shadow-lg p-6">
       <h3 className="text-lg font-semibold mb-4 capitalize text-fg-primary">
@@ -125,6 +146,7 @@ function ColorGroup({ color }: { color: string }) {
                   color={color}
                   variant={suffix}
                   state={state}
+                  copyMode={copyMode}
                 />
               ))}
             </div>
@@ -138,6 +160,7 @@ function ColorGroup({ color }: { color: string }) {
 function ColorPaletteGrid() {
   const [filter, setFilter] = useState<string>('all')
   const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')
+  const [copyMode, setCopyMode] = useState<'variable' | 'oklch'>('oklch')
   
   const filteredColors = filter === 'all' 
     ? semanticColors 
@@ -152,7 +175,7 @@ function ColorPaletteGrid() {
             Color Palette
           </h1>
           <p className="text-fg-secondary">
-            Click any color swatch to copy its CSS variable name
+            Click any color swatch to copy its {copyMode === 'variable' ? 'CSS variable name' : 'OKLCH value'}
           </p>
         </div>
         
@@ -181,10 +204,34 @@ function ColorPaletteGrid() {
             </button>
           </div>
           
+          <div className="flex gap-2 items-center">
+            <span className="text-sm text-fg-secondary">Copy format:</span>
+            <button
+              onClick={() => setCopyMode('variable')}
+              className={`px-3 py-2 rounded-lg transition-colors ${
+                copyMode === 'variable'
+                  ? 'bg-primary text-fg-reverse'
+                  : 'bg-fill-base hover:bg-fill-hover text-fg-primary'
+              }`}
+            >
+              CSS Variable
+            </button>
+            <button
+              onClick={() => setCopyMode('oklch')}
+              className={`px-3 py-2 rounded-lg transition-colors ${
+                copyMode === 'oklch'
+                  ? 'bg-primary text-fg-reverse'
+                  : 'bg-fill-base hover:bg-fill-hover text-fg-primary'
+              }`}
+            >
+              OKLCH Value
+            </button>
+          </div>
+          
           <select
             value={filter}
             onChange={(e) => setFilter(e.target.value)}
-            className="px-4 py-2 rounded-lg bg-surface border border-stroke-primary text-fg-primary"
+            className="px-4 py-2 rounded-lg bg-surface border border--border-primary text-fg-primary"
           >
             <option value="all">All Colors</option>
             {semanticColors.map(color => (
@@ -202,7 +249,7 @@ function ColorPaletteGrid() {
             : 'space-y-6'
         }>
           {filteredColors.map(color => (
-            <ColorGroup key={color} color={color} />
+            <ColorGroup key={color} color={color} copyMode={copyMode} />
           ))}
         </div>
         
@@ -266,18 +313,48 @@ export const Default: Story = {
 
 // Compact view for all colors at once
 function CompactColorGrid() {
+  const [copyMode, setCopyMode] = useState<'variable' | 'oklch'>('variable')
+  
   return (
     <div className="min-h-screen bg-base p-8">
       <div className="max-w-7xl mx-auto">
-        <h1 className="text-3xl font-bold text-fg-primary mb-8">
-          Color Palette - Compact View
-        </h1>
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-fg-primary mb-2">
+            Color Palette - Compact View
+          </h1>
+          <p className="text-fg-secondary mb-4">
+            Click any color swatch to copy its {copyMode === 'variable' ? 'CSS variable name' : 'OKLCH value'}
+          </p>
+          <div className="flex gap-2 items-center">
+            <span className="text-sm text-fg-secondary">Copy format:</span>
+            <button
+              onClick={() => setCopyMode('variable')}
+              className={`px-3 py-2 rounded-lg transition-colors ${
+                copyMode === 'variable'
+                  ? 'bg-primary text-fg-reverse'
+                  : 'bg-fill-base hover:bg-fill-hover text-fg-primary'
+              }`}
+            >
+              CSS Variable
+            </button>
+            <button
+              onClick={() => setCopyMode('oklch')}
+              className={`px-3 py-2 rounded-lg transition-colors ${
+                copyMode === 'oklch'
+                  ? 'bg-primary text-fg-reverse'
+                  : 'bg-fill-base hover:bg-fill-hover text-fg-primary'
+              }`}
+            >
+              OKLCH Value
+            </button>
+          </div>
+        </div>
         
         <div className="bg-surface rounded-xl shadow-lg p-6">
           <div className="overflow-x-auto">
             <table className="w-full">
               <thead>
-                <tr className="border-b border-stroke-primary">
+                <tr className="border-b border--border-primary">
                   <th className="text-left py-3 px-4 text-sm font-medium text-fg-secondary">
                     Color
                   </th>
@@ -287,7 +364,7 @@ function CompactColorGrid() {
                     </th>
                   ))}
                 </tr>
-                <tr className="border-b border-stroke-primary">
+                <tr className="border-b border--border-primary">
                   <th></th>
                   {colorVariants.map(({ label }) => (
                     <React.Fragment key={label}>
@@ -302,7 +379,7 @@ function CompactColorGrid() {
               </thead>
               <tbody>
                 {semanticColors.map(color => (
-                  <tr key={color} className="border-b border-stroke-primary/50">
+                  <tr key={color} className="border-b border--border-primary/50">
                     <td className="py-4 px-4 font-medium capitalize text-fg-primary">
                       {color}
                     </td>
@@ -315,6 +392,7 @@ function CompactColorGrid() {
                               variant={suffix}
                               state={state}
                               showLabel={false}
+                              copyMode={copyMode}
                             />
                           </td>
                         ))}

From a480e5b4bee0ed33f47a8f3304ad5dd73265a400 Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Mon, 18 Aug 2025 06:33:22 +0200
Subject: [PATCH 05/44] fix(ui): resolve undefined token references and naming
 inconsistencies

---
 libs/ui/src/molecules/carousel.tsx                |  2 +-
 libs/ui/src/tokens/_typography.css                |  7 +++++++
 libs/ui/src/tokens/components/atoms/_button.css   | 15 ++++++++++-----
 .../tokens/components/molecules/_accordion.css    |  2 +-
 .../src/tokens/components/molecules/_carousel.css |  2 +-
 .../src/tokens/components/molecules/_combobox.css |  2 +-
 .../tokens/components/molecules/_range-slider.css |  2 +-
 .../src/tokens/components/molecules/_switch.css   |  4 ++--
 8 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/libs/ui/src/molecules/carousel.tsx b/libs/ui/src/molecules/carousel.tsx
index 7fd693bb34..fca0df9af6 100644
--- a/libs/ui/src/molecules/carousel.tsx
+++ b/libs/ui/src/molecules/carousel.tsx
@@ -59,7 +59,7 @@ const carouselVariants = tv({
       slots: ['autoplayTrigger', 'indicator', 'prevTrigger', 'nextTrigger'],
       class: [
         'p-carousel-trigger bg-carousel-trigger-bg',
-        'focus:outline-none text-carousel-trigger-text focus:ring-2 focus:ring-carousel-focus-ring focus:ring-offset-2',
+        'focus:outline-none text-carousel-trigger-fg focus:ring-2 focus:ring-carousel-focus-ring focus:ring-offset-2',
       ],
     },
   ],
diff --git a/libs/ui/src/tokens/_typography.css b/libs/ui/src/tokens/_typography.css
index 74a99ec0a4..64adcd233c 100644
--- a/libs/ui/src/tokens/_typography.css
+++ b/libs/ui/src/tokens/_typography.css
@@ -8,4 +8,11 @@
   --text-2xl: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem); /* 31.1px - 39.06px */
   --text-3xl: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem); /* 37.32px - 48.83px */
   --text-4xl: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem); /* 44.79px - 61.04px */
+
+  /* === TEXT WEIGHT === */
+  --font-weight-light: 100;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
 }
diff --git a/libs/ui/src/tokens/components/atoms/_button.css b/libs/ui/src/tokens/components/atoms/_button.css
index a1d0d7a2f1..e5952c6518 100644
--- a/libs/ui/src/tokens/components/atoms/_button.css
+++ b/libs/ui/src/tokens/components/atoms/_button.css
@@ -153,6 +153,8 @@
   /* === TEXT COLORS === */
   --color-btn-fg: var(--color-fg-reverse);
 
+  /*--color-btn-fg-light: var(--color-fg-reverse);*/
+
   --color-btn-fg-outlined: var(--color-fg-primary);
 
   --color-btn-fg-primary: var(--color-btn-fg);
@@ -182,21 +184,24 @@
   /* === FOCUS RINGS === */
   --color-btn-ring-primary: --alpha(
     var(--color-btn-primary) /
-    var(--alpha-ring)
+    var(--opacity-ring)
   );
   --color-btn-ring-secondary: --alpha(
     var(--color-btn-secondary) /
-    var(--alpha-ring)
+    var(--opacity-ring)
   );
   --color-btn-ring-tertiary: --alpha(
     var(--color-btn-tertiary) /
-    var(--alpha-ring)
+    var(--opacity-ring)
   );
   --color-btn-ring-warning: --alpha(
     var(--color-btn-warning) /
-    var(--alpha-ring)
+    var(--opacity-ring)
+  );
+  --color-btn-ring-danger: --alpha(
+    var(--color-btn-danger) /
+    var(--opacity-ring)
   );
-  --color-btn-ring-danger: --alpha(var(--color-btn-danger) / var(--alpha-ring));
 
   /* === PADDING === */
 
diff --git a/libs/ui/src/tokens/components/molecules/_accordion.css b/libs/ui/src/tokens/components/molecules/_accordion.css
index 12a8009ed5..585b40003e 100644
--- a/libs/ui/src/tokens/components/molecules/_accordion.css
+++ b/libs/ui/src/tokens/components/molecules/_accordion.css
@@ -11,7 +11,7 @@
   /* === TEXT COLORS === */
   --color-accordion-fg: var(--color-fg-primary);
   --color-accordion-fg-disabled: --alpha(
-    var(--color-disabled-text) /
+    var(--color-disabled-fg) /
     var(--opacity-disabled)
   );
 
diff --git a/libs/ui/src/tokens/components/molecules/_carousel.css b/libs/ui/src/tokens/components/molecules/_carousel.css
index 6d070cf87d..45d4ddbb89 100644
--- a/libs/ui/src/tokens/components/molecules/_carousel.css
+++ b/libs/ui/src/tokens/components/molecules/_carousel.css
@@ -7,7 +7,7 @@
   /* === TRIGGER COMMON === */
   --padding-carousel-trigger: 0 0;
   --color-carousel-trigger-bg: var(--color-highlight);
-  --color-carousel-trigger-text: var(--color-fg-dark);
+  --color-carousel-trigger-fg: var(--color-fg-dark);
 
   /* === CONTROL COLORS === */
   --color-carousel-control-bg: var(--color-overlay);
diff --git a/libs/ui/src/tokens/components/molecules/_combobox.css b/libs/ui/src/tokens/components/molecules/_combobox.css
index 8b505539f6..46bc976367 100644
--- a/libs/ui/src/tokens/components/molecules/_combobox.css
+++ b/libs/ui/src/tokens/components/molecules/_combobox.css
@@ -18,7 +18,7 @@
 
   /* Disabled states */
   --color-combobox-disabled: var(--color-disabled-bg);
-  --color-combobox-fg-disabled: var(--color-disabled-text);
+  --color-combobox-fg-disabled: var(--color-disabled-fg);
   --color-combobox-border-disabled: var(--color-disabled-border);
 
   /* Validation states */
diff --git a/libs/ui/src/tokens/components/molecules/_range-slider.css b/libs/ui/src/tokens/components/molecules/_range-slider.css
index db5c6c9b84..8d09b36748 100644
--- a/libs/ui/src/tokens/components/molecules/_range-slider.css
+++ b/libs/ui/src/tokens/components/molecules/_range-slider.css
@@ -25,7 +25,7 @@
 
   /* === DISABLED STATES === */
   --color-slider-track-disabled: var(--color-disabled-bg);
-  --color-slider-range-disabled: var(--color-disabled-text);
+  --color-slider-range-disabled: var(--color-disabled-fg);
   /* we must avoid transparent paint, otherwise the range would be visible */
   --color-slider-thumb-disabled: var(--color-highlight);
   --color-slider-border-disabled: var(--color-disabled-border);
diff --git a/libs/ui/src/tokens/components/molecules/_switch.css b/libs/ui/src/tokens/components/molecules/_switch.css
index a88b11f24f..8ba4a8482a 100644
--- a/libs/ui/src/tokens/components/molecules/_switch.css
+++ b/libs/ui/src/tokens/components/molecules/_switch.css
@@ -23,7 +23,7 @@
   /* === DISABLED STATES === */
   --color-switch-disabled: var(--color-disabled-bg);
   --color-switch-thumb-disabled: --alpha(
-    var(--color-disabled-text) /
+    var(--color-disabled-fg) /
     var(--opacity-disabled)
   );
   --color-switch-border-disabled: var(--color-disabled-border);
@@ -35,7 +35,7 @@
 
   /* === TEXT COLORS === */
   --color-switch-label: var(--color-fg-primary);
-  --color-switch-label-disabled: var(--color-disabled-text);
+  --color-switch-label-disabled: var(--color-disabled-fg);
 
   /* === FOCUS RING === */
   --color-switch-ring: --alpha(

From f756d8c3f1323ef3f50dbd1bfdc23e68ea7cfa11 Mon Sep 17 00:00:00 2001
From: Your Name <your-email@example.com>
Date: Mon, 18 Aug 2025 10:16:45 +0200
Subject: [PATCH 06/44] docs(ui): add token contribution guide, development
 docs and analysis scripts

  - Add token-contribution.md with naming conventions and file structure rules
  - Update CLAUDE.md with token system requirements and component patterns
  - Fix naming pattern to --color-component-bg-primary (consistent with semantic tokens)
  - validate-token-usage.js: Validates Tailwind classes have corresponding token
    definitions
  - validate-token-definitions.js: Identifies unused tokens with dependency analysis
---
 libs/ui/CLAUDE.md                             | 395 ++++++++++----
 libs/ui/package.json                          |   5 +-
 libs/ui/scripts/validate-token-definitions.js | 499 ++++++++++++++++++
 libs/ui/scripts/validate-token-usage.js       | 327 ++++++++++++
 libs/ui/token-contribution.md                 | 276 ++++++++++
 5 files changed, 1398 insertions(+), 104 deletions(-)
 create mode 100755 libs/ui/scripts/validate-token-definitions.js
 create mode 100755 libs/ui/scripts/validate-token-usage.js
 create mode 100644 libs/ui/token-contribution.md

diff --git a/libs/ui/CLAUDE.md b/libs/ui/CLAUDE.md
index 2bb2105b70..a8ca16781b 100644
--- a/libs/ui/CLAUDE.md
+++ b/libs/ui/CLAUDE.md
@@ -8,15 +8,9 @@ This is a React 19 + Tailwind v4 UI library using atomic design principles. We e
 - **tailwind-variants** for component styling
 - **Zag.js** for complex interactive components
 
-**IMPORTANT**: Never mention or use `tailwind.config`, `forwardRef`, or `useCallback`.
+**CRITICAL**: Never mention or use `tailwind.config`, `forwardRef`, or `useCallback`.
 
-## Required Tools
-
-**YOU MUST** use these tools when implementing components:
-- **MCP Quillopy**: For studying Tailwind v4, tailwind-variants, and React 19 documentation
-- **Context7**: For researching Zag.js patterns and component implementations
-
-## File Structure
+## Architecture Overview
 
 ```
 libs/ui/src/
@@ -24,112 +18,209 @@ libs/ui/src/
 ├── molecules/      # Composite components (Dialog, Combobox, Toast)
 ├── organisms/      # Complex sections (rarely used in this library)
 ├── tokens/         # Design tokens
-│   └── components/ # Component-specific tokens (_button.css, _combobox.css)
+│   ├── components/
+│   │   ├── atoms/  # Atomic component tokens
+│   │   └── molecules/ # Molecular component tokens
+│   └── _semantic.css # Base semantic tokens
 └── utils/          # Shared utilities (tv setup)
 ```
 
-## CSS Token System
+## Component Development Workflow
 
-### Token Definition Rules
+### Creating New Component (Required Process)
+
+1. **Research Phase**:
+   - **Context7**: Study Zag.js component documentation for interactive components
+   - **MCP Quillopy**: Research tailwind-variants patterns and Tailwind v4 features
+
+2. **File Creation**:
+   - Component: `libs/ui/src/[atoms|molecules]/component-name.tsx`
+   - Tokens: `libs/ui/src/tokens/components/[atoms|molecules]/_component-name.css`
+   - Story: `libs/ui/stories/component-name.stories.tsx`
 
-**IMPORTANT**: All component tokens must be defined in `@theme static` blocks:
+3. **Token Definition** (follow rules below)
+
+4. **Component Implementation** using tv() pattern
+
+5. **Story Creation** covering all variants and states
+
+## Token System Rules (MANDATORY)
+
+### Token File Structure
+
+**ALL component token files MUST follow this exact structure:**
 
 ```css
-/* libs/ui/src/tokens/components/_component-name.css */
+/* Only for opacity values or calculations */
+:root {
+  --opacity-component-specific: 50%;
+}
+
 @theme static {
-  /* Category-Component-Property-State pattern */
-  --color-button-bg: var(--color-primary);
-  --color-button-bg-hover: oklch(from var(--color-button-bg) calc(l + var(--state-hover)) c h);
-  --spacing-button-sm: var(--spacing-xs);
+  /* === BASE COLOR MAPPING === */
+  /* Reference layer - single source of truth for theming */
+  --color-component-primary: var(--color-primary);
+  --color-component-secondary: var(--color-secondary);
+  --color-component-base: var(--color-surface);
+  
+  /* === DERIVED COLORS === */
+  /* Background colors - using reference layer */
+  --color-component-bg: var(--color-component-base);
+  --color-component-bg-primary: var(--color-component-primary);
+  
+  /* Foreground colors */
+  --color-component-fg: var(--color-fg-primary);
+  --color-component-fg-primary: var(--color-fg-reverse);
+  
+  /* Border colors */
+  --color-component-border: var(--color-border-primary);
+  --color-component-border-primary: var(--color-component-primary);
+  
+  /* === STATE VARIATIONS === */
+  --color-component-bg-hover: oklch(from var(--color-component-bg) calc(l + var(--state-hover)) c h);
+  --color-component-bg-primary-hover: oklch(from var(--color-component-bg-primary) calc(l + var(--state-hover)) c h);
+  
+  /* === COMPONENT VARIANTS === */
+  /* Light, outlined, borderless variants as needed */
+  
+  /* === VALIDATION STATES === */
+  --color-component-bg-danger: var(--color-danger);
+  --color-component-bg-success: var(--color-success);
+  
+  /* === DISABLED STATES === */
+  --color-component-bg-disabled: var(--color-disabled-bg);
+  
+  /* === SPACING === */
+  --spacing-component-padding: var(--spacing-250);
+  --spacing-component-gap: var(--spacing-200);
+  
+  /* === TYPOGRAPHY === */
+  --text-component-sm: var(--text-sm);
+  --text-component-md: var(--text-md);
+  
+  /* === BORDERS & RADIUS === */
+  --border-width-component: var(--border-width-sm);
+  --radius-component: var(--radius-md);
+  
+  /* === FOCUS RINGS === */
+  --color-component-ring-primary: --alpha(var(--color-component-primary) / var(--opacity-ring));
 }
 ```
 
-### Allowed Token Prefixes
-
-**YOU MUST** use these prefixes for design tokens:
-
-- `--color-`: All color values
-- `--text-`: Font sizes (must map to Tailwind text sizes)
-- `--font-weight-`: Font weights (100-900 or semantic)
-- `--border-`: Border width, style, color
-- `--opacity-`: Transparency values (0-100%)
-- `--spacing-`: Padding, margin, gap, AND width/height values that need max/min variants
-- `--width-`: Width values (only when you don't need max/min variants)
-- `--height-`: Height values (only when you don't need max/min variants)
-- `--gap-`: Flex/grid gaps
-- `--padding-`: Padding values
-- `--margin-`: Margin values
+### Naming Convention Authority
+
+**Mandatory Pattern**: `--[prefix]-[component]-[part?]-[property]-[state?]`
+
+**Required Prefixes**:
+- `--color-`: ALL colors (never without suffix)
+- `--spacing-`: Spacing including width/height needing max/min variants
+- `--text-`: Font sizes only
+- `--border-`: Border properties
 - `--radius-`: Border radius
 - `--shadow-`: Box shadows
+- `--opacity-`: Transparency values
 
-**IMPORTANT**: Use `--spacing-` prefix for any width/height values that need `max-w`/`min-w`/`max-h`/`min-h` utilities!
+**Required Color Suffixes**:
+- `-bg`: Background colors (MANDATORY - never `--color-button`)
+- `-fg`: Foreground/text colors (never `-text`)
+- `-border`: Border colors
+- `-hover`: Hover states
+- `-active`: Active states
+- `-disabled`: Disabled states
 
-### Forbidden Patterns
+**Component Naming Rules**:
+```css
+/* ✅ CORRECT - Consistent with semantic tokens */
+--color-button-bg-primary     /* Matches --color-bg-primary pattern */
+--color-accordion-fg-title    /* Matches --color-fg-primary pattern */
+--color-product-card-bg       /* Base background */
+
+/* ❌ FORBIDDEN */
+--color-btn-primary           /* Use 'button' not 'btn' */
+--color-pc-bg                 /* Use 'product-card' not 'pc' */
+--color-button                /* Missing -bg suffix */
+--color-button-text           /* Use -fg not -text */
+--color-button-primary-bg     /* Wrong order - should be -bg-primary */
+```
 
-- ❌ `--grid-cols-product-grid-base` (too specific)
-- ❌ `--layout-*` (use specific properties like `--spacing-` or `--width-`)
-- ❌ `--component-specific-anything` (aim for generic, reusable token names)
+### Two-Layer Token Strategy
+
+**ALWAYS** implement reference layer for theming:
+
+```css
+/* === BASE COLOR MAPPING === */
+/* Reference layer - allows easy theming */
+--color-component-primary: var(--color-primary);
+--color-component-secondary: var(--color-secondary);
+
+/* === DERIVED COLORS === */  
+/* Actual usage tokens */
+--color-component-bg-primary: var(--color-component-primary);
+--color-component-fg-primary: var(--color-fg-reverse);
+```
+
+**Benefits**: One-line component theme changes, consistent theming patterns.
 
 ### Token Usage in Components
 
 ```typescript
 // ✅ CORRECT - Use Tailwind classes that reference your tokens
-'bg-button-bg'         // Uses --color-button-bg
-'text-button-fg'       // Uses --color-button-fg
-'p-button-sm'          // Uses --spacing-button-sm
+'bg-button-bg-primary'     // Uses --color-button-bg-primary
+'text-button-fg-primary'   // Uses --color-button-fg-primary
+'p-button-sm'             // Uses --spacing-button-sm
 
 // ❌ WRONG - Never use arbitrary values
-'bg-[var(--color-button-bg)]'
+'bg-[var(--color-button-bg-primary)]'
 'p-[var(--spacing-button-sm)]'
 ```
 
-## Component Development Workflow
+## Component Implementation Patterns
 
-### 1. Creating New Component
+### Basic Component Structure
 
-1. **Research with MCP Quillopy/Context7**:
-   - For Zag.js components: Study the specific component documentation
-   - For styling: Research tailwind-variants patterns
+```typescript
+import { tv } from '../utils'
+
+const componentVariants = tv({
+  slots: {
+    root: ['flex', 'bg-component-bg', 'data-[state=open]:bg-component-bg-open'],
+    content: ['text-component-fg', 'p-component-padding']
+  },
+  variants: {
+    variant: {
+      primary: { 
+        root: 'bg-component-bg-primary', 
+        content: 'text-component-fg-primary' 
+      },
+      secondary: { 
+        root: 'bg-component-bg-secondary', 
+        content: 'text-component-fg-secondary' 
+      }
+    },
+    size: {
+      sm: { root: 'p-component-sm', content: 'text-component-sm' },
+      md: { root: 'p-component-md', content: 'text-component-md' }
+    }
+  },
+  defaultVariants: {
+    variant: 'primary',
+    size: 'md'
+  }
+})
+
+export function Component({ variant, size, ref, ...props }) {
+  const { root, content } = componentVariants({ variant, size })
+  return (
+    <div ref={ref} className={root()} {...props}>
+      <div className={content()}>Content</div>
+    </div>
+  )
+}
+```
 
-2. **Create Files**:
-   - Component: `libs/ui/src/[atoms|molecules]/component-name.tsx`
-   - Tokens: `libs/ui/src/tokens/components/_component-name.css`
-   - Story: `libs/ui/stories/component-name.stories.tsx`
+### Zag.js Interactive Components
 
-3. **Define Tokens** (follow prefix rules above)
-
-4. **Implement Component**:
-   ```typescript
-   import { tv } from '../utils'
-   
-   const componentVariants = tv({
-     slots: {
-       root: ['flex', 'bg-component-bg', 'data-[state=open]:bg-component-bg-open'],
-       content: ['text-component-fg', 'p-component']
-     },
-     variants: {
-       size: {
-         sm: { root: 'p-component-sm', content: 'text-component-sm' },
-         md: { root: 'p-component-md', content: 'text-component-md' }
-       }
-     }
-   })
-   
-   export function Component({ size = 'md', ref, ...props }) {
-     const { root, content } = componentVariants({ size })
-     return (
-       <div ref={ref} className={root()} {...props}>
-         <div className={content()}>Content</div>
-       </div>
-     )
-   }
-   ```
-
-5. **Create Comprehensive Stories** covering all variants and states
-
-## Zag.js Integration Pattern
-
-**IMPORTANT**: Always use MCP Quillopy/Context7 to study Zag.js documentation for the specific component.
+**REQUIRED**: Use Context7 to study specific Zag.js component documentation.
 
 ```typescript
 import * as component from '@zag-js/component-name'
@@ -153,40 +244,138 @@ export function Component(props: ComponentProps) {
 }
 ```
 
-## State-Based Styling
+### State-Based Styling
 
 Use data attributes for dynamic styling:
 
 ```typescript
 // State attributes from Zag.js or custom
 'data-[state=open]:rotate-180'
-'data-[highlighted]:bg-item-hover'
+'data-[highlighted]:bg-component-bg-hover'
 'data-[disabled]:opacity-disabled'
-'data-[validation=error]:border-danger'
+'data-[validation=error]:border-component-border-danger'
+```
+
+## Required Tools Integration
+
+**YOU MUST use these tools**:
+- **Context7**: For researching Zag.js patterns and component implementations
+- **MCP Quillopy**: For studying Tailwind v4, tailwind-variants, and React 19 documentation
+
+**When to use each**:
+- Creating interactive components → Context7 first
+- Styling questions → MCP Quillopy
+- Complex state management → Context7 for Zag.js patterns
+
+## Development Commands
+
+```bash
+# Component development
+bunx nx run ui:storybook    # Start Storybook for component preview
+bunx nx run ui:build        # Build UI library
+
+# Token validation
+pnpm validate:tokens        # Validate token naming and structure
+pnpm check:unused-tokens    # Find unused token definitions
 ```
 
-## Common Pitfalls to Avoid
+## Quality Standards
+
+### Component Validation Checklist
 
-1. **Token Usage**:
-   - ❌ Using arbitrary values: `bg-[#ff0000]`
-   - ✅ Using token-based classes: `bg-button-danger`
+Before considering a component complete:
 
-2. **React 19 Patterns**:
+- [ ] **Token file structure**: Follows mandatory section order
+- [ ] **Token naming**: All colors have explicit suffixes (-bg, -fg)
+- [ ] **Reference layer**: Implemented for all themeable properties
+- [ ] **Component implementation**: Uses tv() with token-based classes
+- [ ] **No arbitrary values**: All styling uses semantic tokens
+- [ ] **Story coverage**: All variants and states documented
+- [ ] **Tool usage**: Used Context7/MCP Quillopy for research
+- [ ] **React 19 patterns**: No forwardRef, ref as prop
+- [ ] **State styling**: Data attributes for dynamic states
+- [ ] **No forbidden patterns**: No tailwind.config mentions
+
+### Common Pitfalls to Avoid
+
+1. **Token Naming Errors**:
+   - ❌ `--color-button` (missing -bg suffix)
+   - ❌ `--color-btn-primary` (use 'button' not 'btn')
+   - ❌ `--color-button-text` (use -fg not -text)
+   - ✅ `--color-button-bg-primary`
+
+2. **React 19 Violations**:
    - ❌ `forwardRef<HTMLDivElement, Props>((props, ref) => ...)`
+   - ❌ `useCallback(() => {}, [])`
    - ✅ `function Component({ ref, ...props }: Props & { ref?: Ref<HTMLDivElement> })`
 
-3. **Tailwind v4**:
+3. **Tailwind v4 Violations**:
    - ❌ Mentioning `tailwind.config.js`
-   - ✅ Using `@theme static` blocks
+   - ❌ Using arbitrary values `bg-[#ff0000]`
+   - ✅ Using `@theme static` blocks and token classes
 
-## Validation Checklist
+4. **Architecture Violations**:
+   - ❌ Direct semantic token usage: `bg-primary`
+   - ❌ Missing reference layer
+   - ✅ Component-specific tokens: `bg-button-bg-primary`
 
-Before considering a component complete:
+## Storybook Integration
+
+```typescript
+// component-name.stories.tsx
+export default {
+  title: 'Atoms/ComponentName',
+  component: Component,
+  parameters: {
+    docs: { description: { component: 'Component description...' } }
+  }
+}
+
+// Cover ALL variants and states
+export const AllVariants: Story = {
+  render: () => (
+    <div className="grid gap-4">
+      <Component variant="primary" size="sm" />
+      <Component variant="secondary" size="md" />
+      <Component variant="primary" size="lg" disabled />
+    </div>
+  )
+}
+```
 
-- [ ] Token file follows all prefix rules
-- [ ] Component uses `tv()` with token-based classes
-- [ ] No arbitrary values in styling
-- [ ] Story file covers all variants and states
-- [ ] Used MCP Quillopy/Context7 for documentation research
-- [ ] No React 18 patterns (forwardRef, useCallback)
-- [ ] Data attributes used for state-based styling
\ No newline at end of file
+## File Organization Rules
+
+### Component Files
+- **Atoms**: `src/atoms/component-name.tsx`
+- **Molecules**: `src/molecules/component-name.tsx`
+- **Stories**: `stories/component-name.stories.tsx`
+
+### Token Files
+- **Atoms**: `src/tokens/components/atoms/_component-name.css`
+- **Molecules**: `src/tokens/components/molecules/_component-name.css`
+
+### Naming Conventions
+- **Files**: kebab-case (`component-name.tsx`)
+- **Components**: PascalCase (`ComponentName`)
+- **Tokens**: kebab-case (`--color-component-name-bg`)
+
+## Do Not Section
+
+**NEVER**:
+- Mention `tailwind.config.js` or `tailwind.config.ts`
+- Use `forwardRef` or `useCallback` (React 19 doesn't need them)
+- Use arbitrary values in styling (`bg-[#ff0000]`)
+- Create tokens without proper prefixes
+- Skip the reference layer in token architecture
+- Use abbreviations in component names (`btn`, `pc`, etc.)
+- Create components without comprehensive stories
+- Implement interactive components without studying Zag.js docs via Context7
+
+**ALWAYS**:
+- Use `@theme static` blocks for token definitions
+- Implement two-layer token strategy (reference + derived)
+- Use data attributes for state-based styling
+- Research with Context7 for Zag.js components
+- Research with MCP Quillopy for Tailwind v4 features
+- Follow the mandatory token file structure
+- Create comprehensive Storybook stories
\ No newline at end of file
diff --git a/libs/ui/package.json b/libs/ui/package.json
index c4f736feb6..810c4c8225 100644
--- a/libs/ui/package.json
+++ b/libs/ui/package.json
@@ -39,7 +39,10 @@
     "storybook": "storybook dev",
     "lint:tailwind": "eslint \"**/*.{js,jsx,ts,tsx}\" --config eslint.config.js",
     "lint:tailwind:fix": "eslint \"**/*.{js,jsx,ts,tsx}\" --config eslint.config.js --fix",
-    "check:unused-tokens": "node scripts/check-unused-tokens.js"
+    "check:unused-tokens": "node scripts/check-unused-tokens.js",
+    "validate:tokens": "node scripts/validate-token-usage.js && node scripts/validate-token-definitions.js",
+    "validate:token-usage": "node scripts/validate-token-usage.js",
+    "validate:token-definitions": "node scripts/validate-token-definitions.js"
   },
   "dependencies": {
     "@zag-js/accordion": "^1.15.0",
diff --git a/libs/ui/scripts/validate-token-definitions.js b/libs/ui/scripts/validate-token-definitions.js
new file mode 100755
index 0000000000..77c5c718b0
--- /dev/null
+++ b/libs/ui/scripts/validate-token-definitions.js
@@ -0,0 +1,499 @@
+#!/usr/bin/env node
+
+/**
+ * Token Definition Validation Script
+ * 
+ * Identifies unused tokens with smart exception handling.
+ * Analyzes dependency graphs and reference chains to determine actual usage.
+ */
+
+import fs from 'fs'
+import path from 'path'
+import { glob } from 'glob'
+
+// Configuration for validation
+const CONFIG = {
+  // Tokens to always consider "used" (whitelist)
+  whitelistPatterns: [
+    /^--color-primary$/,
+    /^--color-secondary$/,
+    /^--color-danger$/,
+    /^--color-warning$/,
+    /^--color-success$/,
+    /^--color-info$/,
+    /^--spacing-(xs|sm|md|lg|xl)$/,
+    /^--text-(xs|sm|md|lg|xl)$/,
+    /^--radius-(sm|md|lg)$/,
+    // Base system tokens
+    /^--color-.*-(50|100|200|300|400|500|600|700|800|900)$/,
+    /^--state-(hover|focus|active|disabled)$/
+  ],
+  
+  // Patterns to ignore completely
+  ignorePatterns: [
+    /^--tw-/, // Tailwind internal variables
+    /_test$/,
+    /_debug$/
+  ],
+  
+  // File patterns to exclude from usage scanning
+  excludeFiles: [
+    '**/*.stories.tsx',
+    '**/*.test.tsx',
+    '**/*.spec.tsx',
+    '**/node_modules/**'
+  ]
+}
+
+/**
+ * Parse CSS tokens from a file
+ */
+function parseTokensFromFile(filePath) {
+  const content = fs.readFileSync(filePath, 'utf8')
+  const tokens = new Map()
+  
+  // Match CSS custom properties with their values
+  const tokenRegex = /--([\w-]+)\s*:\s*([^;]+);/g
+  let match
+  
+  while ((match = tokenRegex.exec(content)) !== null) {
+    const [fullMatch, name, value] = match
+    const tokenName = `--${name}`
+    
+    tokens.set(tokenName, {
+      value: value.trim(),
+      file: filePath,
+      line: content.substring(0, match.index).split('\n').length
+    })
+  }
+  
+  return tokens
+}
+
+/**
+ * Load all defined tokens from CSS files
+ */
+function loadAllTokens() {
+  const allTokens = new Map()
+  const tokenFiles = glob.sync('src/tokens/components/**/*.css')
+  
+  for (const file of tokenFiles) {
+    const tokens = parseTokensFromFile(file)
+    for (const [name, data] of tokens) {
+      allTokens.set(name, data)
+    }
+  }
+  
+  return allTokens
+}
+
+/**
+ * Extract token references from CSS value
+ */
+function extractTokenReferences(value) {
+  const references = new Set()
+  
+  // Match var() functions
+  const varMatches = value.matchAll(/var\(\s*(--[\w-]+)/g)
+  for (const match of varMatches) {
+    references.add(match[1])
+  }
+  
+  // Match oklch() from function references
+  const oklchMatches = value.matchAll(/oklch\([^)]*var\(\s*(--[\w-]+)/g)
+  for (const match of oklchMatches) {
+    references.add(match[1])
+  }
+  
+  return references
+}
+
+/**
+ * Build dependency graph of token references
+ */
+function buildTokenDependencyGraph(allTokens) {
+  const dependencyGraph = new Map()
+  const reverseDependencyGraph = new Map()
+  
+  for (const [tokenName, tokenData] of allTokens) {
+    const references = extractTokenReferences(tokenData.value)
+    dependencyGraph.set(tokenName, references)
+    
+    // Build reverse dependencies
+    for (const ref of references) {
+      if (!reverseDependencyGraph.has(ref)) {
+        reverseDependencyGraph.set(ref, new Set())
+      }
+      reverseDependencyGraph.get(ref).add(tokenName)
+    }
+  }
+  
+  return { dependencyGraph, reverseDependencyGraph }
+}
+
+/**
+ * Map CSS token to possible Tailwind utility classes
+ */
+function tokenToUtilityClasses(tokenName) {
+  const classes = new Set()
+  
+  // Simplified token parsing
+  const tokenParts = tokenName.slice(2).split('-') // Remove '--' and split
+  if (tokenParts.length < 2) return classes
+  
+  const primaryNamespace = tokenParts[0]
+  const subNamespace = tokenParts.length > 2 ? tokenParts[1] : null
+  const key = tokenParts.slice(subNamespace ? 2 : 1).join('-')
+  
+  // Complete namespace to utility prefix mappings per Tailwind v4 docs
+  const mappings = {
+    // Color namespace - most extensive
+    'color': [
+      'bg', 'text', 'border', 'outline', 'decoration', 'shadow', 'inset-shadow',
+      'ring', 'ring-offset', 'inset-ring', 'accent', 'caret', 'fill', 'stroke'
+    ],
+    
+    // Spacing namespace - very extensive (general spacing)
+    'spacing': [
+      // Padding
+      'p', 'px', 'py', 'pt', 'pr', 'pb', 'pl', 'ps', 'pe',
+      // Margin (including negative variants)
+      'm', 'mx', 'my', 'mt', 'mr', 'mb', 'ml', 'ms', 'me',
+      '-m', '-mx', '-my', '-mt', '-mr', '-mb', '-ml', '-ms', '-me',
+      // Width & Height
+      'w', 'h', 'min-w', 'min-h', 'max-w', 'max-h',
+      // Position
+      'inset', 'inset-x', 'inset-y', 'top', 'right', 'bottom', 'left', 'start', 'end',
+      '-inset', '-inset-x', '-inset-y', '-top', '-right', '-bottom', '-left', '-start', '-end',
+      // Layout
+      'gap', 'space-x', 'space-y'
+    ],
+    
+    // Specific spacing namespaces (more specific than general spacing)
+    'padding': [
+      'p', 'px', 'py', 'pt', 'pr', 'pb', 'pl', 'ps', 'pe'
+    ],
+    'margin': [
+      'm', 'mx', 'my', 'mt', 'mr', 'mb', 'ml', 'ms', 'me',
+      '-m', '-mx', '-my', '-mt', '-mr', '-mb', '-ml', '-ms', '-me'
+    ],
+    'gap': ['gap'],
+    
+    // Width namespace (when not using spacing)
+    'width': ['w', 'min-w', 'max-w'],
+    
+    // Height namespace (when not using spacing)  
+    'height': ['h', 'min-h', 'max-h'],
+    
+    // Typography
+    'text': ['text'], // Font size
+    'font': ['font'], // Font family
+    'tracking': ['tracking'], // Letter spacing
+    'leading': ['leading'], // Line height
+    
+    // Border & Effects
+    'radius': ['rounded'],
+    'shadow': ['shadow'],
+    'inset-shadow': ['inset-shadow'],
+    'drop-shadow': ['drop-shadow'],
+    'blur': ['blur'],
+    'perspective': ['perspective'],
+    
+    // Layout
+    'aspect': ['aspect'],
+    
+    // Animation
+    'ease': ['ease'],
+    'animate': ['animate'],
+    
+    // Other
+    'opacity': ['opacity'],
+    'border': ['border'],
+    
+    // Special cases that don't map to utilities directly
+    'z': [], // z-index values, handled differently
+    'arrow': [], // Custom properties for arrows, not utilities
+    'tree': [], // Custom component-specific properties
+    'textarea': [], // Custom component properties
+    'tooltip': [] // Custom component properties
+  }
+  
+  // Simplified namespace and key handling
+  let namespace = primaryNamespace
+  let tokenKey = key
+  
+  // Handle special font-weight case
+  if (primaryNamespace === 'font' && subNamespace === 'weight') {
+    namespace = 'font-weight'
+  } else if (subNamespace && mappings[`${primaryNamespace}-${subNamespace}`]) {
+    namespace = `${primaryNamespace}-${subNamespace}`
+  } else if (subNamespace) {
+    tokenKey = `${subNamespace}-${key}`
+  }
+  
+  // Skip custom properties that don't map to utilities
+  const customPropertyPrefixes = [
+    'arrow', 'tree', 'tooltip', 'textarea', 'z', 'opacity-bg', 'opacity-borderless',
+    'spacing-translate', 'spacing-pc', 'spacing-menu-submenu'
+  ]
+  
+  if (customPropertyPrefixes.some(prefix => tokenName.includes(`--${prefix}`))) {
+    return classes
+  }
+  
+  const prefixes = mappings[namespace] || mappings[primaryNamespace] || []
+  
+  for (const prefix of prefixes) {
+    if (namespace === 'font-weight') {
+      // Special case: --font-weight-bold → font-bold (strip "weight")
+      classes.add(`font-${tokenKey}`)
+    } else {
+      classes.add(`${prefix}-${tokenKey}`)
+    }
+  }
+  
+  return classes
+}
+
+/**
+ * Search for token usage in component files (cached version)
+ */
+function findTokenUsageInComponentsCache(tokenName, componentFilesCache) {
+  const usage = new Set()
+  const possibleClasses = tokenToUtilityClasses(tokenName)
+  
+  if (possibleClasses.size === 0) return usage
+  
+  for (const [file, content] of componentFilesCache) {
+    // Check for direct var() usage
+    if (content.includes(`var(${tokenName})`)) {
+      usage.add(`${file} (direct var() reference)`)
+    }
+    
+    // Check for utility class usage (simplified patterns)
+    for (const className of possibleClasses) {
+      const escapedClass = className.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+      
+      // Simplified patterns - covers most cases
+      const patterns = [
+        // Matches: 'class', hover:class, data-[...]:class, sm:class
+        new RegExp(`\\b(?:[a-z-]+:|data-\\[[^\\]]+\\]:|(?:sm|md|lg|xl|2xl):)?${escapedClass}\\b`),
+        // Matches inside quotes with optional spacing
+        new RegExp(`['"\`][^'"\`]*\\s${escapedClass}\\s[^'"\`]*['"\`]`)
+      ]
+      
+      for (const pattern of patterns) {
+        const match = content.search(pattern)
+        if (match !== -1) {
+          // Efficient line number calculation
+          const lineNumber = content.substring(0, match).split('\n').length
+          usage.add(`${file}:${lineNumber} (class: ${className})`)
+          break
+        }
+      }
+    }
+  }
+  
+  return usage
+}
+
+/**
+ * Search for token usage in CSS files (var() references)
+ */
+function findTokenUsageInCSS(tokenName, allTokens) {
+  const usage = new Set()
+  
+  // Check usage in other tokens (reuse already loaded token data)
+  for (const [otherTokenName, tokenData] of allTokens) {
+    if (otherTokenName === tokenName) continue
+    
+    if (tokenData.value.includes(`var(${tokenName})`)) {
+      usage.add(`${tokenData.file}:${tokenData.line} (referenced by ${otherTokenName})`)
+    }
+  }
+  
+  // Check usage directly in CSS properties using already loaded files
+  const processedFiles = new Set()
+  
+  for (const [, tokenData] of allTokens) {
+    const file = tokenData.file
+    if (processedFiles.has(file)) continue
+    
+    processedFiles.add(file)
+    
+    try {
+      const content = fs.readFileSync(file, 'utf8')
+      const lines = content.split('\n')
+      
+      lines.forEach((line, index) => {
+        // Skip custom property definitions
+        if (line.trim().startsWith(`${tokenName}:`)) return
+        
+        // Look for var() usage in CSS properties
+        if (line.includes(`var(${tokenName})`) && !line.includes(`${tokenName}:`)) {
+          usage.add(`${file}:${index + 1} (CSS property)`)
+        }
+      })
+    } catch (error) {
+      // Skip files that can't be read
+    }
+  }
+  
+  return usage
+}
+
+/**
+ * Check if token should be whitelisted
+ */
+function isWhitelisted(tokenName) {
+  return CONFIG.whitelistPatterns.some(pattern => pattern.test(tokenName))
+}
+
+/**
+ * Check if token should be ignored
+ */
+function shouldIgnoreToken(tokenName) {
+  return CONFIG.ignorePatterns.some(pattern => pattern.test(tokenName))
+}
+
+/**
+ * Find all tokens that depend on a given token (recursive)
+ */
+function findDependentTokens(tokenName, reverseDependencyGraph, visited = new Set()) {
+  if (visited.has(tokenName)) return new Set()
+  
+  visited.add(tokenName)
+  const dependents = new Set()
+  
+  const directDependents = reverseDependencyGraph.get(tokenName) || new Set()
+  for (const dependent of directDependents) {
+    dependents.add(dependent)
+    const transitiveDependents = findDependentTokens(dependent, reverseDependencyGraph, visited)
+    for (const transitive of transitiveDependents) {
+      dependents.add(transitive)
+    }
+  }
+  
+  return dependents
+}
+
+/**
+ * Main validation function
+ */
+function validateTokenDefinitions() {
+  console.log('🔍 Analyzing token definitions and usage...')
+  
+  const allTokens = loadAllTokens()
+  console.log(`📋 Found ${allTokens.size} total tokens\n`)
+  
+  const { dependencyGraph, reverseDependencyGraph } = buildTokenDependencyGraph(allTokens)
+  
+  // Cache component files content for reuse
+  const componentFilesCache = new Map()
+  const componentFiles = glob.sync('src/**/*.{ts,tsx}', {
+    ignore: CONFIG.excludeFiles
+  })
+  
+  for (const file of componentFiles) {
+    try {
+      componentFilesCache.set(file, fs.readFileSync(file, 'utf8'))
+    } catch (error) {
+      console.warn(`⚠️  Could not read ${file}: ${error.message}`)
+    }
+  }
+  
+  const unusedTokens = []
+  const usedTokens = new Set()
+  let checkedCount = 0
+  
+  for (const [tokenName, tokenData] of allTokens) {
+    checkedCount++
+    
+    if (shouldIgnoreToken(tokenName)) {
+      continue
+    }
+    
+    if (isWhitelisted(tokenName)) {
+      usedTokens.add(tokenName)
+      continue
+    }
+    
+    // Check component usage with cached content
+    const componentUsage = findTokenUsageInComponentsCache(tokenName, componentFilesCache)
+    
+    // Check CSS usage
+    const cssUsage = findTokenUsageInCSS(tokenName, allTokens)
+    
+    const totalUsage = new Set([...componentUsage, ...cssUsage])
+    
+    if (totalUsage.size > 0) {
+      usedTokens.add(tokenName)
+    } else {
+      // Check if any dependent tokens are used
+      const dependents = findDependentTokens(tokenName, reverseDependencyGraph)
+      const usedDependents = Array.from(dependents).filter(dep => usedTokens.has(dep))
+      
+      if (usedDependents.length > 0) {
+        usedTokens.add(tokenName)
+      } else {
+        unusedTokens.push({
+          name: tokenName,
+          file: tokenData.file,
+          line: tokenData.line,
+          value: tokenData.value
+        })
+      }
+    }
+  }
+  
+  // Report results
+  console.log(`\n📊 Validation Summary:`)
+  console.log(`   Total tokens: ${allTokens.size}`)
+  console.log(`   Used tokens: ${usedTokens.size}`)
+  console.log(`   Unused tokens: ${unusedTokens.length}`)
+  
+  if (unusedTokens.length === 0) {
+    console.log('\n✅ All tokens are being used!')
+    return true
+  } else {
+    console.log(`\n⚠️  Found ${unusedTokens.length} potentially unused tokens:\n`)
+    
+    // Group by file
+    const tokensByFile = new Map()
+    for (const token of unusedTokens) {
+      if (!tokensByFile.has(token.file)) {
+        tokensByFile.set(token.file, [])
+      }
+      tokensByFile.get(token.file).push(token)
+    }
+    
+    for (const [file, tokens] of tokensByFile) {
+      console.log(`📄 ${file}:`)
+      for (const token of tokens) {
+        console.log(`  Line ${token.line}: ${token.name} = ${token.value}`)
+      }
+      console.log()
+    }
+    
+    console.log('💡 Note: These tokens might be used in ways not detected by this script.')
+    console.log('   Consider:\n   - Dynamic class generation\n   - External usage\n   - Future planned usage\n')
+    
+    return false
+  }
+}
+
+/**
+ * Run validation
+ */
+if (import.meta.url === `file://${process.argv[1]}`) {
+  try {
+    const success = validateTokenDefinitions()
+    process.exit(success ? 0 : 1)
+  } catch (error) {
+    console.error('💥 Validation failed:', error.message)
+    console.error(error.stack)
+    process.exit(1)
+  }
+}
+
+export { validateTokenDefinitions, buildTokenDependencyGraph, findTokenUsageInComponentsCache }
\ No newline at end of file
diff --git a/libs/ui/scripts/validate-token-usage.js b/libs/ui/scripts/validate-token-usage.js
new file mode 100755
index 0000000000..5bc6b675f6
--- /dev/null
+++ b/libs/ui/scripts/validate-token-usage.js
@@ -0,0 +1,327 @@
+#!/usr/bin/env node
+
+/**
+ * Token Usage Validation Script
+ * 
+ * Validates that all Tailwind classes in components have corresponding token definitions.
+ * Follows Tailwind v4 theme variable namespace rules for precise mapping.
+ */
+
+import fs from 'fs'
+import path from 'path'
+import { glob } from 'glob'
+
+// Tailwind v4 namespace to utility prefix mappings
+const NAMESPACE_MAPPINGS = {
+  'color': ['bg', 'text', 'border', 'fill', 'stroke', 'outline', 'ring', 'shadow', 'accent', 'caret', 'decoration'],
+  'spacing': ['p', 'px', 'py', 'pt', 'pr', 'pb', 'pl', 'm', 'mx', 'my', 'mt', 'mr', 'mb', 'ml', 'gap', 'w', 'h', 'max-w', 'min-w', 'max-h', 'min-h', 'top', 'right', 'bottom', 'left', 'inset'],
+  'text': ['text'],
+  'font-weight': ['font'],
+  'font': ['font'],
+  'radius': ['rounded'],
+  'shadow': ['shadow', 'drop-shadow'],
+  'blur': ['blur'],
+  'opacity': ['opacity'],
+  'border': ['border']
+}
+
+// Standard Tailwind utilities to ignore (not custom tokens)
+const IGNORE_PATTERNS = [
+  // Layout & positioning
+  /^(flex|grid|block|inline|hidden|absolute|relative|fixed|sticky)$/,
+  /^(items|justify|content|self)-(start|end|center|stretch|between|around|evenly)$/,
+  /^(flex|grid)-(row|col|flow|wrap|nowrap)$/,
+  /^(order|col|row)-(start|end|\d+)$/,
+  
+  // Standard spacing (without custom tokens)
+  /^(p|m|gap|w|h|max-w|min-w|max-h|min-h|top|right|bottom|left|inset|space)-(0|px|0\.5|1|1\.5|2|2\.5|3|3\.5|4|5|6|7|8|9|10|11|12|14|16|20|24|28|32|36|40|44|48|52|56|60|64|72|80|96|auto|full|screen|min|max|fit)$/,
+  
+  // Standard colors including transparent
+  /^(bg|text|border)-(transparent|current|black|white|slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-?\d{0,3}$/,
+  /^(bg|text|border)-(transparent|current|black|white|inherit)$/,
+  
+  // Standard typography
+  /^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/,
+  /^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/,
+  /^font-(sans|serif|mono)$/,
+  /^(leading|tracking)-(none|tight|snug|normal|relaxed|loose|wide|wider|widest)$/,
+  
+  // Standard borders & effects
+  /^(border|rounded)-(none|sm|md|lg|xl|2xl|3xl|full)$/,
+  /^border-(0|2|4|8)$/,
+  /^shadow-(sm|md|lg|xl|2xl|inner|none)$/,
+  /^opacity-(0|5|10|20|25|30|40|50|60|70|75|80|90|95|100)$/,
+  
+  // Pseudo-classes and state modifiers
+  /^(hover|focus|active|disabled|group-hover|group-focus):/,
+  /^data-\[.+\]:/,
+  
+  // Responsive prefixes
+  /^(sm|md|lg|xl|2xl):/,
+  
+  // Transform & animation
+  /^(transform|rotate|scale|translate|skew|transition|duration|ease|delay|animate)-.+$/,
+  
+  // Special edge cases
+  /^w-\(--reference-width\)$/,  // Dynamic width references
+  /^max-h-\(--available-height\)$/, // Dynamic height references
+  /^\*:max-h-\(--available-height\)$/, // Selector prefixes
+  /^left-(1\/2)$/, // Fractional positioning
+  
+  // Misc utilities
+  /^(sr-only|not-sr-only|pointer-events|select|resize|appearance|cursor|outline|ring)-.+$/
+]
+
+/**
+ * Extract Tailwind classes from TypeScript/JSX content
+ */
+function extractTailwindClasses(content, filePath) {
+  const classes = new Set()
+  
+  // Match className props (string values)
+  const classNameMatches = content.matchAll(/className\s*=\s*["'`]([^"'`]+)["'`]/g)
+  for (const match of classNameMatches) {
+    const classString = match[1]
+    classString.split(/\s+/).forEach(cls => cls && classes.add(cls.trim()))
+  }
+  
+  // Match className arrays: className: ['class1', 'class2'] or className={['class1', 'class2']}
+  const classNameArrayMatches = content.matchAll(/className\s*[:=]\s*(?:\{)?\s*\[([^\]]+)\]/g)
+  for (const match of classNameArrayMatches) {
+    const arrayContent = match[1]
+    // Extract strings from array elements
+    const stringMatches = arrayContent.matchAll(/['"`]([^'"`]+)['"`]/g)
+    for (const stringMatch of stringMatches) {
+      const classString = stringMatch[1]
+      classString.split(/\s+/).forEach(cls => cls && classes.add(cls.trim()))
+    }
+  }
+  
+  // Match template literals in className
+  const templateMatches = content.matchAll(/className\s*=\s*`([^`]+)`/g)
+  for (const match of templateMatches) {
+    const classString = match[1]
+    // Extract static classes, ignore interpolations
+    const staticParts = classString.split(/\$\{[^}]+\}/)
+    staticParts.forEach(part => {
+      part.split(/\s+/).forEach(cls => cls && classes.add(cls.trim()))
+    })
+  }
+  
+  // Match tailwind-variants tv() configurations
+  const tvMatches = content.matchAll(/tv\s*\(\s*\{[\s\S]*?\}\s*\)/g)
+  for (const match of tvMatches) {
+    const tvConfig = match[0]
+    
+    // Extract from slots (arrays)
+    const slotMatches = tvConfig.matchAll(/\[\s*['"`]([^'"`]+)['"`]/g)
+    for (const slotMatch of slotMatches) {
+      const classString = slotMatch[1]
+      classString.split(/\s+/).forEach(cls => cls && classes.add(cls.trim()))
+    }
+    
+    // Extract from variant values
+    const variantMatches = tvConfig.matchAll(/:\s*\{\s*[^}]*['"`]([^'"`]+)['"`]/g)
+    for (const variantMatch of variantMatches) {
+      const classString = variantMatch[1]
+      classString.split(/\s+/).forEach(cls => cls && classes.add(cls.trim()))
+    }
+  }
+  
+  // Match clsx/cn utility calls
+  const clsxMatches = content.matchAll(/(?:clsx|cn)\s*\(\s*([^)]+)\)/g)
+  for (const match of clsxMatches) {
+    const args = match[1]
+    const stringMatches = args.matchAll(/['"`]([^'"`]+)['"`]/g)
+    for (const stringMatch of stringMatches) {
+      const classString = stringMatch[1]
+      classString.split(/\s+/).forEach(cls => cls && classes.add(cls.trim()))
+    }
+  }
+  
+  // Match any quoted strings that might be CSS classes (broader approach)
+  const quotedStringMatches = content.matchAll(/['"`]([^'"`]*(?:bg-|text-|border-|p-|m-|w-|h-|flex|grid|rounded)[^'"`]*)['"`]/g)
+  for (const match of quotedStringMatches) {
+    const classString = match[1]
+    // Only extract if it looks like CSS classes
+    if (/^[a-z-\s:[\]()]+$/i.test(classString)) {
+      classString.split(/\s+/).forEach(cls => cls && classes.add(cls.trim()))
+    }
+  }
+  
+  return Array.from(classes).filter(cls => cls.length > 0)
+}
+
+/**
+ * Map Tailwind utility class to possible CSS custom properties
+ */
+function mapClassToPossibleTokens(className) {
+  // Remove state modifiers (hover:, focus:, data-[...]:, etc.)
+  const baseClass = className.replace(/^[^:]*:/, '').replace(/^data-\[[^\]]+\]:/, '')
+  
+  // Parse utility class: prefix-value (non-greedy matching)
+  // Match known prefixes first, then everything else as value
+  const knownPrefixes = Object.values(NAMESPACE_MAPPINGS).flat()
+  let prefix = null
+  let value = null
+  
+  // Try to match against known prefixes (longest first to handle cases like 'ring-offset')
+  const sortedPrefixes = knownPrefixes.sort((a, b) => b.length - a.length)
+  
+  for (const knownPrefix of sortedPrefixes) {
+    if (baseClass.startsWith(`${knownPrefix}-`)) {
+      prefix = knownPrefix
+      value = baseClass.slice(knownPrefix.length + 1) // +1 for the dash
+      break
+    }
+  }
+  
+  if (!prefix || !value) return []
+  
+  const possibleTokens = []
+  
+  // Find which namespaces this prefix could belong to
+  for (const [namespace, prefixes] of Object.entries(NAMESPACE_MAPPINGS)) {
+    if (prefixes.includes(prefix)) {
+      // Special handling for font-weight
+      if (namespace === 'font-weight') {
+        possibleTokens.push(`--font-weight-${value}`)
+      } else {
+        possibleTokens.push(`--${namespace}-${value}`)
+      }
+    }
+  }
+  
+  // Add specific namespace alternatives for spacing-related utilities
+  if (['p', 'px', 'py', 'pt', 'pr', 'pb', 'pl', 'ps', 'pe'].includes(prefix)) {
+    possibleTokens.push(`--padding-${value}`)
+  }
+  
+  if (['m', 'mx', 'my', 'mt', 'mr', 'mb', 'ml', 'ms', 'me', '-m', '-mx', '-my', '-mt', '-mr', '-mb', '-ml', '-ms', '-me'].includes(prefix)) {
+    possibleTokens.push(`--margin-${value}`)
+  }
+  
+  if (['gap'].includes(prefix)) {
+    possibleTokens.push(`--gap-${value}`)
+  }
+  
+  if (['w', 'min-w', 'max-w'].includes(prefix)) {
+    possibleTokens.push(`--width-${value}`)
+  }
+  
+  if (['h', 'min-h', 'max-h'].includes(prefix)) {
+    possibleTokens.push(`--height-${value}`)
+  }
+  
+  return possibleTokens
+}
+
+/**
+ * Load all defined tokens from CSS files
+ */
+function loadDefinedTokens() {
+  const tokens = new Set()
+  const tokenFiles = glob.sync('src/tokens/**/*.css')
+  
+  for (const file of tokenFiles) {
+    const content = fs.readFileSync(file, 'utf8')
+    
+    // Match CSS custom properties
+    const tokenMatches = content.matchAll(/--([a-z][a-z0-9-]*)\s*:/g)
+    for (const match of tokenMatches) {
+      tokens.add(`--${match[1]}`)
+    }
+  }
+  
+  return tokens
+}
+
+/**
+ * Check if a class should be ignored
+ */
+function shouldIgnoreClass(className) {
+  // Remove state modifiers for checking
+  const baseClass = className.replace(/^[^:]*:/, '').replace(/^data-\[[^\]]+\]:/, '')
+  
+  return IGNORE_PATTERNS.some(pattern => pattern.test(baseClass))
+}
+
+/**
+ * Main validation function
+ */
+function validateTokenUsage() {
+  console.log('🔍 Validating token usage in components...\n')
+  
+  const definedTokens = loadDefinedTokens()
+  console.log(`📋 Found ${definedTokens.size} defined tokens`)
+  
+  const componentFiles = glob.sync('src/**/*.{ts,tsx}', {
+    ignore: ['**/*.stories.tsx', '**/*.test.tsx', '**/*.spec.tsx']
+  })
+  
+  let totalErrors = 0
+  const errorsByFile = new Map()
+  
+  for (const file of componentFiles) {
+    const content = fs.readFileSync(file, 'utf8')
+    const classes = extractTailwindClasses(content, file)
+    const fileErrors = []
+    
+    for (const className of classes) {
+      if (shouldIgnoreClass(className)) continue
+      
+      const possibleTokens = mapClassToPossibleTokens(className)
+      if (possibleTokens.length === 0) continue
+      
+      // Check if ANY of the possible tokens exists
+      const hasMatchingToken = possibleTokens.some(token => definedTokens.has(token))
+      
+      if (!hasMatchingToken) {
+        fileErrors.push({
+          className,
+          expectedTokens: possibleTokens,
+          line: content.split('\n').findIndex(line => line.includes(className)) + 1
+        })
+      }
+    }
+    
+    if (fileErrors.length > 0) {
+      errorsByFile.set(file, fileErrors)
+      totalErrors += fileErrors.length
+    }
+  }
+  
+  // Report results
+  if (totalErrors === 0) {
+    console.log('✅ All component classes have corresponding token definitions!')
+    return true
+  } else {
+    console.log(`❌ Found ${totalErrors} missing token definitions:\n`)
+    
+    for (const [file, errors] of errorsByFile) {
+      console.log(`📄 ${file}:`)
+      for (const error of errors) {
+        const tokenList = error.expectedTokens.join(' OR ')
+        console.log(`  Line ${error.line}: ${error.className} → Missing token: ${tokenList}`)
+      }
+      console.log()
+    }
+    
+    return false
+  }
+}
+
+/**
+ * Run validation
+ */
+if (import.meta.url === `file://${process.argv[1]}`) {
+  try {
+    const success = validateTokenUsage()
+    process.exit(success ? 0 : 1)
+  } catch (error) {
+    console.error('💥 Validation failed:', error.message)
+    process.exit(1)
+  }
+}
+
+export { validateTokenUsage, mapClassToPossibleTokens, extractTailwindClasses }
\ No newline at end of file
diff --git a/libs/ui/token-contribution.md b/libs/ui/token-contribution.md
new file mode 100644
index 0000000000..4ac45f49ff
--- /dev/null
+++ b/libs/ui/token-contribution.md
@@ -0,0 +1,276 @@
+🎯 BASIC PRINCIPLES
+
+1. Predictability Over Brevity
+
+- Token names MUST be self-explanatory
+- No abbreviations that are not widely known
+- Consistency is more important than short names
+
+2. Single Source of Truth
+
+- Each component has a reference layer for theming
+- All derived tokens use references
+- One token = one responsibility
+
+3. Scalable Architecture
+
+- The pattern must work for 100+ components
+- Must support variants, states, themes
+- Automated validation rules
+
+---
+📋 NAMING CONVENTION AUTHORITY
+
+Mandatory Pattern
+
+--[prefix]-[component]-[part?]-[property]-[state?]
+
+Required Prefixes
+
+| PREFIX     | USAGE                                          | EXAMPLE                   |
+|------------|------------------------------------------------|---------------------------|
+| --color-   | ALL colors                                     | --color-button-bg-primary |
+| --spacing- | Spacing including width/height needing max/min | --spacing-button-padding  |
+| --text-    | Font sizes only                                | --text-button-lg          |
+| --border-  | Border properties                              | --border-button-width     |
+| --radius-  | Border radius                                  | --radius-button-sm        |
+| --shadow-  | Box shadows                                    | --shadow-button-focus     |
+| --opacity- | Transparency values                            | --opacity-button-disabled |
+
+Required Suffixes for Colors
+
+| SUFFIX    | USAGE                  | FORBIDDEN                 |
+|-----------|------------------------|---------------------------|
+| -bg       | Background colors      | --color-button ❌          |
+| -fg       | Foreground/text colors | --color-button-text ❌     |
+| -border   | Border colors          | --color-button-outline ❌  |
+| -hover    | Hover states           | --color-button-hovered ❌  |
+| -active   | Active states          | --color-button-pressed ❌  |
+| -disabled | Disabled states        | --color-button-inactive ❌ |
+| -focus    | Focus states           | --color-button-focused ❌  |
+
+Component Naming Rules
+
+/* ✅ CORRECT */
+--color-button-bg-primary
+--color-accordion-fg-title
+--color-product-card-bg
+
+/* ❌ FORBIDDEN */
+--color-btn-primary           /* Use 'button' not 'btn' */
+--color-pc-bg                 /* Use 'product-card' not 'pc' */
+--color-button                /* Missing -bg suffix */
+--color-button-text           /* Use -fg not -text */
+
+---
+🏗️ MANDATORY FILE STRUCTURE
+
+/* === COMPONENT TOKEN FILE STRUCTURE === */
+
+/* 1. LOCAL VARIABLES */
+/* Only for opacity values or complex calculations */
+:root {
+    --opacity-component-specific: 50%;
+    --custom-calculation: calc(var(--spacing-base) * 2);
+}
+
+/* 2. THEME TOKENS */
+@theme static {
+    /* === BASE COLOR MAPPING === */
+    /* Reference layer - single source of truth for theming */
+
+    /* === DERIVED COLORS === */
+    /* Background, foreground, border colors using references */
+
+    /* === STATE VARIATIONS === */
+    /* Auto-calculated from derived colors */
+
+    /* === COMPONENT VARIANTS === */
+    /* Light, outlined, borderless variants */
+
+    /* === VALIDATION STATES === */
+    /* Success, warning, danger states */
+
+    /* === DISABLED STATES === */
+    /* Disabled appearance */
+
+    /* === SPACING === */
+    /* Padding, margin, gap values */
+
+    /* === TYPOGRAPHY === */
+    /* Font sizes and weights */
+
+    /* === BORDERS & RADIUS === */
+    /* Border widths and radius values */
+
+    /* === SHADOWS === */
+    /* Box shadow definitions */
+
+    /* === FOCUS RINGS === */
+    /* Focus ring colors and styles */
+}
+
+/* 3. UTILITIES */
+/* Component-specific utility classes */
+@utility component-variant {
+    /* utility definitions */
+}
+
+/* 4. SEMANTIC ICON TOKENS */
+/* Icon mappings if needed */
+@utility token-icon-component-action {
+    @apply icon-[mdi--icon-name];
+}
+
+---
+🎨 COLOR TOKEN ARCHITECTURE
+
+Reference Layer Pattern
+
+/* === BASE COLOR MAPPING === */
+/* Reference layer - single source of truth for theming */
+--color-component-primary: var(--color-primary);       /* Theme reference */
+--color-component-secondary: var(--color-secondary);   /* Theme reference */
+--color-component-base: var(--color-surface);          /* Base reference */
+--color-component-success: var(--color-success);       /* State reference */
+--color-component-warning: var(--color-warning);       /* State reference */
+--color-component-danger: var(--color-danger);         /* State reference */
+
+Derived Colors
+
+/* === DERIVED COLORS === */
+/* Background colors - using reference layer */
+--color-component-bg: var(--color-component-base);
+--color-component-bg-primary: var(--color-component-primary);
+--color-component-bg-secondary: var(--color-component-secondary);
+
+/* Foreground colors */
+--color-component-fg: var(--color-fg-primary);
+--color-component-fg-primary: var(--color-fg-reverse);
+--color-component-fg-secondary: var(--color-fg-reverse);
+
+/* Border colors */
+--color-component-border: var(--color-border-primary);
+--color-component-border-primary: var(--color-component-primary);
+--color-component-border-secondary: var(--color-component-secondary);
+
+State Calculations
+
+/* === STATE VARIATIONS === */
+/* Auto-calculated using semantic state modifiers */
+--color-component-bg-hover: oklch(
+    from var(--color-component-bg) calc(l + var(--state-hover)) c h
+);
+--color-component-bg-primary-hover: oklch(
+    from var(--color-component-bg-primary) calc(l + var(--state-hover)) c h
+);
+--color-component-bg-primary-active: oklch(
+    from var(--color-component-bg-primary) calc(l + var(--state-active)) c h
+);
+
+---
+📏 SPACING & SIZING TOKENS
+
+Spacing Naming
+
+/* === SPACING === */
+/* Use semantic spacing tokens */
+--spacing-component-padding: var(--spacing-250);           /* Generic padding */
+--spacing-component-padding-sm: var(--spacing-200);        /* Small variant */
+--spacing-component-padding-lg: var(--spacing-350);        /* Large variant */
+--spacing-component-gap: var(--spacing-200);               /* Gap between elements */
+--spacing-component-margin: var(--spacing-150);            /* External margin */
+
+/* Composite spacing (multiple values) */
+--spacing-component-padding-composite: var(--spacing-200) var(--spacing-350);
+
+Typography Tokens
+
+/* === TYPOGRAPHY === */
+--text-component-sm: var(--text-sm);                       /* Small text */
+--text-component-md: var(--text-md);                       /* Medium text */
+--text-component-lg: var(--text-lg);                       /* Large text */
+--font-weight-component: var(--font-weight-medium);        /* Font weight */
+--font-weight-component-title: var(--font-weight-semibold); /* Title weight */
+
+---
+💡 VARIANT PATTERNS
+
+Component Variants
+
+/* === LIGHT VARIANTS === */
+--color-component-bg-primary-light: var(--color-primary-light);
+--color-component-fg-primary-light: var(--color-fg-reverse);
+--color-component-bg-primary-light-hover: oklch(
+    from var(--color-component-bg-primary-light) calc(l + var(--state-hover)) c h
+);
+
+/* === OUTLINED VARIANTS === */
+--color-component-bg-outlined-primary: transparent;
+--color-component-fg-outlined-primary: var(--color-component-primary);
+--color-component-border-outlined-primary: var(--color-component-primary);
+--color-component-bg-outlined-primary-hover: --alpha(
+    var(--color-component-primary) / var(--opacity-outlined-hover)
+);
+
+/* === BORDERLESS VARIANTS === */
+--color-component-bg-borderless: transparent;
+--color-component-fg-borderless: var(--color-fg-primary);
+--color-component-border-borderless: transparent;
+--color-component-bg-borderless-hover: var(--color-fill-hover);
+
+---
+🚨 VALIDATION RULES
+
+Mandatory Checks
+
+1. All colors MUST have explicit suffix (-bg, -fg, -border)
+2. No abbreviations except universally known (no btn, pc, etc.)
+3. Reference layer before derived colors
+4. Consistent section ordering
+5. No hardcoded values in component tokens (use semantic references)
+
+Forbidden Patterns
+
+/* ❌ FORBIDDEN */
+--color-button:                          /* Missing suffix */
+--color-btn-primary:                     /* Abbreviation */
+--color-button-text:                     /* Use -fg not -text */
+--color-button-primary: #3b82f6;         /* Hardcoded value */
+--padding-btn-sm:                        /* Use 'button' not 'btn' */
+--spacing-component: 1rem;               /* Use semantic token */
+
+/* ✅ CORRECT */
+--color-button-bg-primary:               /* Explicit suffix */
+--color-button-primary: var(--color-primary); /* Reference layer */
+--color-button-fg-primary:               /* Use -fg for text */
+--spacing-button-padding: var(--spacing-200); /* Semantic reference */
+
+---
+📝 COMMENT CONVENTIONS
+
+Section Headers
+
+/* === SECTION NAME === */
+
+Subsection Headers
+
+/* Subsection description */
+
+Inline Comments
+
+--token-name: value; /* Explanation when needed */
+
+Required Section Order
+
+1. /* === BASE COLOR MAPPING === */
+2. /* === DERIVED COLORS === */
+3. /* === STATE VARIATIONS === */
+4. /* === COMPONENT VARIANTS === */
+5. /* === VALIDATION STATES === */
+6. /* === DISABLED STATES === */
+7. /* === SPACING === */
+8. /* === TYPOGRAPHY === */
+9. /* === BORDERS & RADIUS === */
+10. /* === SHADOWS === */
+11. /* === FOCUS RINGS === */
\ No newline at end of file

From 1d219688f2ca9b8d8b082aae422d58d2bbffcdc9 Mon Sep 17 00:00:00 2001
From: Your Name <your-email@example.com>
Date: Mon, 18 Aug 2025 15:33:25 +0200
Subject: [PATCH 07/44] refactor(ui/button): reorganize button tokens to follow
 contribution standards

---
 libs/ui/src/atoms/button.tsx                  | 162 ++++-----
 .../src/tokens/components/atoms/_button.css   | 322 +++++++++---------
 2 files changed, 239 insertions(+), 245 deletions(-)

diff --git a/libs/ui/src/atoms/button.tsx b/libs/ui/src/atoms/button.tsx
index 1eb72968e7..37a95c3691 100644
--- a/libs/ui/src/atoms/button.tsx
+++ b/libs/ui/src/atoms/button.tsx
@@ -11,30 +11,30 @@ export const buttonVariants = tv({
     'transition-all duration-200',
     'focus:outline-none',
     'focus-visible:ring-3 focus-visible:ring-offset-2',
-    'disabled:text-btn-fg-disabled disabled:pointer-events-none',
+    'disabled:text-button-fg-disabled disabled:pointer-events-none',
   ],
   variants: {
     variant: {
-      primary: 'focus:ring-btn-ring-primary',
-      secondary: 'focus:ring-btn-ring-secondary',
-      tertiary: 'focus:ring-btn-ring-tertiary',
-      danger: 'focus:ring-btn-ring-danger',
-      warning: 'focus:ring-btn-ring-warning',
+      primary: 'focus:ring-button-ring-primary',
+      secondary: 'focus:ring-button-ring-secondary',
+      tertiary: 'focus:ring-button-ring-tertiary',
+      danger: 'focus:ring-button-ring-danger',
+      warning: 'focus:ring-button-ring-warning',
     },
     theme: {
-      solid: 'disabled:bg-btn-disabled',
-      light: 'disabled:bg-btn-disabled',
+      solid: 'disabled:bg-button-bg-disabled',
+      light: 'disabled:bg-button-bg-disabled',
       borderless:
-        'hover:bg-btn-borderless-hover active:bg-btn-borderless-active',
-      outlined: 'border disabled:border-btn-border-disabled',
+        'bg-button-bg-borderless hover:bg-button-bg-borderless-hover active:bg-button-bg-borderless-active',
+      outlined: 'border disabled:border-button-border-disabled',
     },
     uppercase: {
       true: 'uppercase',
     },
     size: {
-      sm: 'p-btn-sm text-btn-sm rounded-btn-sm gap-btn-sm',
-      md: 'p-btn-md text-btn-md rounded-btn-md gap-btn-md',
-      lg: 'p-btn-lg text-btn-lg rounded-btn-lg gap-btn-lg',
+      sm: 'p-button-sm text-button-sm rounded-button-sm gap-button-sm',
+      md: 'p-button-md text-button-md rounded-button-md gap-button-md',
+      lg: 'p-button-lg text-button-lg rounded-button-lg gap-button-lg',
     },
 
     block: {
@@ -46,191 +46,191 @@ export const buttonVariants = tv({
       variant: 'primary',
       theme: 'solid',
       className: [
-        'bg-btn-primary',
-        'hover:bg-btn-primary-hover',
-        'active:bg-btn-primary-active',
-        'text-btn-fg-primary',
+        'bg-button-bg-primary',
+        'hover:bg-button-bg-primary-hover',
+        'active:bg-button-bg-primary-active',
+        'text-button-fg-primary',
       ],
     },
     {
       variant: 'secondary',
       theme: 'solid',
       className: [
-        'bg-btn-secondary',
-        'hover:bg-btn-secondary-hover',
-        'active:bg-btn-secondary-active',
-        'text-btn-fg-secondary',
+        'bg-button-bg-secondary',
+        'hover:bg-button-bg-secondary-hover',
+        'active:bg-button-bg-secondary-active',
+        'text-button-fg-secondary',
       ],
     },
     {
       variant: 'tertiary',
       theme: 'solid',
       className: [
-        'bg-btn-tertiary',
-        'hover:bg-btn-tertiary-hover',
-        'active:bg-btn-tertiary-active',
-        'text-btn-fg-tertiary',
+        'bg-button-bg-tertiary',
+        'hover:bg-button-bg-tertiary-hover',
+        'active:bg-button-bg-tertiary-active',
+        'text-button-fg-tertiary',
       ],
     },
     {
       variant: 'warning',
       theme: 'solid',
       className: [
-        'bg-btn-warning',
-        'hover:bg-btn-warning-hover',
-        'active:bg-btn-warning-active',
-        'text-btn-fg-warning',
+        'bg-button-bg-warning',
+        'hover:bg-button-bg-warning-hover',
+        'active:bg-button-bg-warning-active',
+        'text-button-fg-warning',
       ],
     },
     {
       variant: 'danger',
       theme: 'solid',
       className: [
-        'bg-btn-danger',
-        'hover:bg-btn-danger-hover',
-        'active:bg-btn-danger-active',
-        'text-btn-fg-danger',
+        'bg-button-bg-danger',
+        'hover:bg-button-bg-danger-hover',
+        'active:bg-button-bg-danger-active',
+        'text-button-fg-danger',
       ],
     },
     {
       variant: 'primary',
       theme: 'light',
       className: [
-        'bg-btn-primary-light',
-        'hover:bg-btn-primary-light-hover',
-        'active:bg-btn-primary-light-active',
-        'text-btn-fg-primary-light',
+        'bg-button-bg-primary-light',
+        'hover:bg-button-bg-primary-light-hover',
+        'active:bg-button-bg-primary-light-active',
+        'text-button-fg-primary-light',
       ],
     },
     {
       variant: 'secondary',
       theme: 'light',
       className: [
-        'bg-btn-secondary-light',
-        'hover:bg-btn-secondary-light-hover',
-        'active:bg-btn-secondary-light-active',
-        'text-btn-fg-secondary-light',
+        'bg-button-bg-secondary-light',
+        'hover:bg-button-bg-secondary-light-hover',
+        'active:bg-button-bg-secondary-light-active',
+        'text-button-fg-secondary-light',
       ],
     },
     {
       variant: 'tertiary',
       theme: 'light',
       className: [
-        'bg-btn-tertiary-light',
-        'hover:bg-btn-tertiary-light-hover',
-        'active:bg-btn-tertiary-light-active',
-        'text-btn-fg-tertiary-light',
+        'bg-button-bg-tertiary-light',
+        'hover:bg-button-bg-tertiary-light-hover',
+        'active:bg-button-bg-tertiary-light-active',
+        'text-button-fg-tertiary-light',
       ],
     },
     {
       variant: 'warning',
       theme: 'light',
       className: [
-        'bg-btn-warning-light',
-        'hover:bg-btn-warning-light-hover',
-        'active:bg-btn-warning-light-active',
-        'text-btn-fg-warning-light',
+        'bg-button-bg-warning-light',
+        'hover:bg-button-bg-warning-light-hover',
+        'active:bg-button-bg-warning-light-active',
+        'text-button-fg-warning-light',
       ],
     },
     {
       variant: 'danger',
       theme: 'light',
       className: [
-        'bg-btn-danger-light',
-        'hover:bg-btn-danger-light-hover',
-        'active:bg-btn-danger-light-active',
-        'text-btn-fg-danger-light',
+        'bg-button-bg-danger-light',
+        'hover:bg-button-bg-danger-light-hover',
+        'active:bg-button-bg-danger-light-active',
+        'text-button-fg-danger-light',
       ],
     },
     {
       variant: 'primary',
       theme: 'outlined',
       className: [
-        'border-btn-border-primary',
-        'hover:bg-btn-outlined-primary-hover',
-        'active:bg-btn-outlined-primary-active',
-        'text-btn-fg-outlined-primary',
+        'border-button-border-primary',
+        'hover:bg-button-bg-outlined-primary-hover',
+        'active:bg-button-bg-outlined-primary-active',
+        'text-button-fg-outlined-primary',
       ],
     },
     {
       variant: 'secondary',
       theme: 'outlined',
       className: [
-        'border-btn-border-secondary',
-        'hover:bg-btn-outlined-secondary-hover',
-        'active:bg-btn-outlined-secondary-active',
-        'text-btn-fg-outlined-secondary',
+        'border-button-border-secondary',
+        'hover:bg-button-bg-outlined-secondary-hover',
+        'active:bg-button-bg-outlined-secondary-active',
+        'text-button-fg-outlined-secondary',
       ],
     },
     {
       variant: 'tertiary',
       theme: 'outlined',
       className: [
-        'border-btn-border-tertiary',
-        'hover:bg-btn-outlined-tertiary-hover',
-        'active:bg-btn-outlined-tertiary-active',
-        'text-btn-fg-outlined-tertiary',
+        'border-button-border-tertiary',
+        'hover:bg-button-bg-outlined-tertiary-hover',
+        'active:bg-button-bg-outlined-tertiary-active',
+        'text-button-fg-outlined-tertiary',
       ],
     },
     {
       variant: 'warning',
       theme: 'outlined',
       className: [
-        'border-btn-border-warning',
-        'hover:bg-btn-outlined-warning-hover',
-        'active:bg-btn-outlined-warning-active',
-        'text-btn-fg-outlined-warning',
+        'border-button-border-warning',
+        'hover:bg-button-bg-outlined-warning-hover',
+        'active:bg-button-bg-outlined-warning-active',
+        'text-button-fg-outlined-warning',
       ],
     },
     {
       variant: 'danger',
       theme: 'outlined',
       className: [
-        'border-btn-border-danger',
-        'hover:bg-btn-outlined-danger-hover',
-        'active:bg-btn-outlined-danger-active',
-        'text-btn-fg-outlined-danger',
+        'border-button-border-danger',
+        'hover:bg-button-bg-outlined-danger-hover',
+        'active:bg-button-bg-outlined-danger-active',
+        'text-button-fg-outlined-danger',
       ],
     },
     {
       variant: 'primary',
       theme: 'borderless',
-      className: ['text-btn-fg-primary-borderless'],
+      className: ['text-button-fg-primary-borderless'],
     },
     {
       variant: 'secondary',
       theme: 'borderless',
-      className: ['text-btn-fg-secondary-borderless'],
+      className: ['text-button-fg-secondary-borderless'],
     },
     {
       variant: 'tertiary',
       theme: 'borderless',
-      className: ['text-btn-fg-tertiary-borderless'],
+      className: ['text-button-fg-tertiary-borderless'],
     },
     {
       variant: 'warning',
       theme: 'borderless',
-      className: ['text-btn-fg-warning-borderless'],
+      className: ['text-button-fg-warning-borderless'],
     },
     {
       variant: 'danger',
       theme: 'borderless',
-      className: ['text-btn-fg-danger-borderless'],
+      className: ['text-button-fg-danger-borderless'],
     },
     {
       theme: 'outlined',
       size: 'sm',
-      className: 'border-(length:--border-btn-width-sm)',
+      className: 'border-(length:--border-button-width-sm)',
     },
     {
       theme: 'outlined',
       size: 'md',
-      className: 'border-(length:--border-btn-width-md)',
+      className: 'border-(length:--border-button-width-md)',
     },
     {
       theme: 'outlined',
       size: 'lg',
-      className: 'border-(length:--border-btn-width-lg)',
+      className: 'border-(length:--border-button-width-lg)',
     },
   ],
   defaultVariants: {
diff --git a/libs/ui/src/tokens/components/atoms/_button.css b/libs/ui/src/tokens/components/atoms/_button.css
index e5952c6518..b90bed2e95 100644
--- a/libs/ui/src/tokens/components/atoms/_button.css
+++ b/libs/ui/src/tokens/components/atoms/_button.css
@@ -1,239 +1,233 @@
-@import "../../_semantic.css";
-
 :root {
-  --opacity-borderless-hover: 8%;
-  --opacity-borderless-active: 12%;
   --opacity-outlined-hover: 16%;
   --opacity-outlined-active: 12%;
 }
 
 @theme static {
   /* === BASE COLOR MAPPING === */
-  /* Single source of truth */
-  --color-btn-primary: var(--color-primary);
-  --color-btn-secondary: var(--color-secondary);
-  --color-btn-tertiary: var(--color-tertiary);
-  --color-btn-warning: var(--color-warning);
-  --color-btn-danger: var(--color-danger);
+  /* Reference layer - single source of truth for theming */
+  --color-button-primary: var(--color-primary);
+  --color-button-secondary: var(--color-secondary);
+  --color-button-tertiary: var(--color-tertiary);
+  --color-button-warning: var(--color-warning);
+  --color-button-danger: var(--color-danger);
+  --color-button-borderless: var(--color-base);
+
+  /* === DERIVED COLORS === */
+  /* Background colors - using reference layer */
+  --color-button-bg-primary: var(--color-button-primary);
+  --color-button-bg-secondary: var(--color-button-secondary);
+  --color-button-bg-tertiary: var(--color-button-tertiary);
+  --color-button-bg-warning: var(--color-button-warning);
+  --color-button-bg-danger: var(--color-button-danger);
+
+  /* Foreground colors */
+  --color-button-fg: var(--color-fg-reverse);
+  --color-button-fg-light: var(--color-fg-reverse);
+  --color-button-fg-outlined: var(--color-fg-primary);
+  --color-button-fg-primary: var(--color-button-fg);
+  --color-button-fg-secondary: var(--color-button-fg);
+  --color-button-fg-tertiary: var(--color-button-fg);
+  --color-button-fg-warning: var(--color-button-fg);
+  --color-button-fg-danger: var(--color-button-fg);
+  --color-button-fg-primary-light: var(--color-button-fg-light);
+  --color-button-fg-secondary-light: var(--color-button-fg-light);
+  --color-button-fg-tertiary-light: var(--color-button-fg-light);
+  --color-button-fg-warning-light: var(--color-button-fg-light);
+  --color-button-fg-danger-light: var(--color-button-fg-light);
+  --color-button-fg-outlined-primary: var(--color-button-fg-outlined);
+  --color-button-fg-outlined-secondary: var(--color-button-fg-outlined);
+  --color-button-fg-outlined-tertiary: var(--color-button-fg-outlined);
+  --color-button-fg-outlined-warning: var(--color-button-fg-outlined);
+  --color-button-fg-outlined-danger: var(--color-button-fg-outlined);
+  --color-button-fg-primary-borderless: var(--color-button-primary);
+  --color-button-fg-secondary-borderless: var(--color-button-secondary);
+  --color-button-fg-tertiary-borderless: var(--color-button-tertiary);
+  --color-button-fg-warning-borderless: var(--color-button-warning);
+  --color-button-fg-danger-borderless: var(--color-button-danger);
+
+  /* Border colors */
+  --color-button-border-primary: var(--color-button-primary);
+  --color-button-border-secondary: var(--color-button-secondary);
+  --color-button-border-tertiary: var(--color-button-tertiary);
+  --color-button-border-warning: var(--color-button-warning);
+  --color-button-border-danger: var(--color-button-danger);
 
   /* === STATE VARIATIONS === */
-  /* Primary */
-  --color-btn-primary-hover: oklch(
-    from var(--color-btn-primary) calc(l + var(--state-hover)) c h
+  /* Primary states */
+  --color-button-bg-primary-hover: oklch(
+    from var(--color-button-primary) calc(l + var(--state-hover)) c h
   );
-  --color-btn-primary-active: oklch(
-    from var(--color-btn-primary) calc(l + var(--state-active)) c h
+  --color-button-bg-primary-active: oklch(
+    from var(--color-button-primary) calc(l + var(--state-active)) c h
   );
 
-  /* Secondary */
-  --color-btn-secondary-hover: oklch(
-    from var(--color-btn-secondary) calc(l + var(--state-hover)) c h
+  /* Secondary states */
+  --color-button-bg-secondary-hover: oklch(
+    from var(--color-button-secondary) calc(l + var(--state-hover)) c h
   );
-  --color-btn-secondary-active: oklch(
-    from var(--color-btn-secondary) calc(l + var(--state-active)) c h
+  --color-button-bg-secondary-active: oklch(
+    from var(--color-button-secondary) calc(l + var(--state-active)) c h
   );
 
-  /* Tertiary */
-  --color-btn-tertiary-hover: oklch(
-    from var(--color-btn-tertiary) calc(l + var(--state-hover)) c h
+  /* Tertiary states */
+  --color-button-bg-tertiary-hover: oklch(
+    from var(--color-button-tertiary) calc(l + var(--state-hover)) c h
   );
-  --color-btn-tertiary-active: oklch(
-    from var(--color-btn-tertiary) calc(l + var(--state-active)) c h
+  --color-button-bg-tertiary-active: oklch(
+    from var(--color-button-tertiary) calc(l + var(--state-active)) c h
   );
 
-  /* Warning */
-  --color-btn-warning-hover: oklch(
-    from var(--color-btn-warning) calc(l + var(--state-hover)) c h
+  /* Warning states */
+  --color-button-bg-warning-hover: oklch(
+    from var(--color-button-warning) calc(l + var(--state-hover)) c h
   );
-  --color-btn-warning-active: oklch(
-    from var(--color-btn-warning) calc(l + var(--state-active)) c h
+  --color-button-bg-warning-active: oklch(
+    from var(--color-button-warning) calc(l + var(--state-active)) c h
   );
 
-  /* Danger */
-  --color-btn-danger-hover: oklch(
-    from var(--color-btn-danger) calc(l + var(--state-hover)) c h
+  /* Danger states */
+  --color-button-bg-danger-hover: oklch(
+    from var(--color-button-danger) calc(l + var(--state-hover)) c h
   );
-  --color-btn-danger-active: oklch(
-    from var(--color-btn-danger) calc(l + var(--state-active)) c h
+  --color-button-bg-danger-active: oklch(
+    from var(--color-button-danger) calc(l + var(--state-active)) c h
   );
 
-  /* === LIGHT VARIANTS === */
-  --color-btn-primary-light: var(--color-primary-light);
-  --color-btn-secondary-light: var(--color-secondary-light);
-  --color-btn-tertiary-light: var(--color-tertiary-light);
-  --color-btn-warning-light: var(--color-warning-light);
-  --color-btn-danger-light: var(--color-danger-light);
+  /* Borderless states */
+  --color-button-bg-borderless: var(--color-button-borderless);
+  --color-button-bg-borderless-hover: var(--color-fill-hover);
+  --color-button-bg-borderless-active: var(--color-fill-active);
+
+  /* === COMPONENT VARIANTS === */
+  /* Light variants */
+  --color-button-bg-primary-light: var(--color-primary-light);
+  --color-button-bg-secondary-light: var(--color-secondary-light);
+  --color-button-bg-tertiary-light: var(--color-tertiary-light);
+  --color-button-bg-warning-light: var(--color-warning-light);
+  --color-button-bg-danger-light: var(--color-danger-light);
 
-  --color-btn-primary-light-hover: oklch(
-    from var(--color-btn-primary-light) calc(l + var(--state-hover)) c h
+  /* Light variant states */
+  --color-button-bg-primary-light-hover: oklch(
+    from var(--color-button-primary-light) calc(l + var(--state-hover)) c h
   );
-  --color-btn-primary-light-active: oklch(
-    from var(--color-btn-primary-light) calc(l + var(--state-active)) c h
+  --color-button-bg-primary-light-active: oklch(
+    from var(--color-button-primary-light) calc(l + var(--state-active)) c h
   );
-
-  --color-btn-secondary-light-hover: oklch(
-    from var(--color-btn-secondary-light) calc(l + var(--state-hover)) c h
+  --color-button-bg-secondary-light-hover: oklch(
+    from var(--color-button-secondary-light) calc(l + var(--state-hover)) c h
   );
-  --color-btn-secondary-light-active: oklch(
-    from var(--color-btn-secondary-light) calc(l + var(--state-active)) c h
+  --color-button-bg-secondary-light-active: oklch(
+    from var(--color-button-secondary-light) calc(l + var(--state-active)) c h
   );
-
-  --color-btn-tertiary-light-hover: oklch(
-    from var(--color-btn-tertiary-light) calc(l + var(--state-hover)) c h
+  --color-button-bg-tertiary-light-hover: oklch(
+    from var(--color-button-tertiary-light) calc(l + var(--state-hover)) c h
   );
-  --color-btn-tertiary-light-active: oklch(
-    from var(--color-btn-tertiary-light) calc(l + var(--state-active)) c h
+  --color-button-bg-tertiary-light-active: oklch(
+    from var(--color-button-tertiary-light) calc(l + var(--state-active)) c h
   );
-
-  --color-btn-warning-light-hover: oklch(
-    from var(--color-btn-warning-light) calc(l + var(--state-hover)) c h
+  --color-button-bg-warning-light-hover: oklch(
+    from var(--color-button-warning-light) calc(l + var(--state-hover)) c h
   );
-  --color-btn-warning-light-active: oklch(
-    from var(--color-btn-warning-light) calc(l + var(--state-active)) c h
+  --color-button-bg-warning-light-active: oklch(
+    from var(--color-button-warning-light) calc(l + var(--state-active)) c h
   );
-
-  --color-btn-danger-light-hover: oklch(
-    from var(--color-btn-danger-light) calc(l + var(--state-hover)) c h
+  --color-button-bg-danger-light-hover: oklch(
+    from var(--color-button-danger-light) calc(l + var(--state-hover)) c h
   );
-  --color-btn-danger-light-active: oklch(
-    from var(--color-btn-danger-light) calc(l + var(--state-active)) c h
+  --color-button-bg-danger-light-active: oklch(
+    from var(--color-button-danger-light) calc(l + var(--state-active)) c h
   );
 
-  /* === BORDERLESS THEME === */
-  --color-btn-borderless-hover: var(--color-fill-hover);
-  --color-btn-borderless-active: var(--color-fill-active);
-
-  /* === OUTLINED THEME === */
-  --color-btn-outlined-primary-hover: --alpha(
-    var(--color-btn-primary) /
+  /* Outlined variants */
+  --color-button-bg-outlined-primary-hover: --alpha(
+    var(--color-button-primary) /
     var(--opacity-outlined-hover)
   );
-  --color-btn-outlined-primary-active: --alpha(
-    var(--color-btn-primary) /
+  --color-button-bg-outlined-primary-active: --alpha(
+    var(--color-button-primary) /
     var(--opacity-outlined-active)
   );
-  --color-btn-outlined-secondary-hover: --alpha(
-    var(--color-btn-secondary) /
+  --color-button-bg-outlined-secondary-hover: --alpha(
+    var(--color-button-secondary) /
     var(--opacity-outlined-hover)
   );
-  --color-btn-outlined-secondary-active: --alpha(
-    var(--color-btn-secondary) /
+  --color-button-bg-outlined-secondary-active: --alpha(
+    var(--color-button-secondary) /
     var(--opacity-outlined-active)
   );
-  --color-btn-outlined-tertiary-hover: --alpha(
-    var(--color-btn-tertiary) /
+  --color-button-bg-outlined-tertiary-hover: --alpha(
+    var(--color-button-tertiary) /
     var(--opacity-outlined-hover)
   );
-  --color-btn-outlined-tertiary-active: --alpha(
-    var(--color-btn-tertiary) /
+  --color-button-bg-outlined-tertiary-active: --alpha(
+    var(--color-button-tertiary) /
     var(--opacity-outlined-active)
   );
-  --color-btn-outlined-warning-hover: --alpha(
-    var(--color-btn-warning) /
+  --color-button-bg-outlined-warning-hover: --alpha(
+    var(--color-button-warning) /
     var(--opacity-outlined-hover)
   );
-  --color-btn-outlined-warning-active: --alpha(
-    var(--color-btn-warning) /
+  --color-button-bg-outlined-warning-active: --alpha(
+    var(--color-button-warning) /
     var(--opacity-outlined-active)
   );
-  --color-btn-outlined-danger-hover: --alpha(
-    var(--color-btn-danger) /
+  --color-button-bg-outlined-danger-hover: --alpha(
+    var(--color-button-danger) /
     var(--opacity-outlined-hover)
   );
-  --color-btn-outlined-danger-active: --alpha(
-    var(--color-btn-danger) /
+  --color-button-bg-outlined-danger-active: --alpha(
+    var(--color-button-danger) /
     var(--opacity-outlined-active)
   );
 
-  /* === UNIFIED DISABLED STATES === */
-  --color-btn-disabled: var(--color-disabled-bg);
-  --color-btn-fg-disabled: var(--color-disabled-fg);
-  --color-btn-border-disabled: var(--color-disabled-border);
-
-  /* === TEXT COLORS === */
-  --color-btn-fg: var(--color-fg-reverse);
+  /* === DISABLED STATES === */
+  --color-button-bg-disabled: var(--color-disabled-bg);
+  --color-button-fg-disabled: var(--color-disabled-fg);
+  --color-button-border-disabled: var(--color-disabled-border);
 
-  /*--color-btn-fg-light: var(--color-fg-reverse);*/
+  /* === SPACING === */
+  --spacing-button-sm: var(--spacing-150);
+  --spacing-button-md: var(--spacing-200);
+  --spacing-button-lg: var(--spacing-250);
 
-  --color-btn-fg-outlined: var(--color-fg-primary);
+  --padding-button-sm: var(--spacing-150) var(--spacing-250);
+  --padding-button-md: var(--spacing-200) var(--spacing-350);
+  --padding-button-lg: var(--spacing-250) var(--spacing-450);
 
-  --color-btn-fg-primary: var(--color-btn-fg);
-  --color-btn-fg-secondary: var(--color-btn-fg);
-  --color-btn-fg-tertiary: var(--color-btn-fg);
-  --color-btn-fg-warning: var(--color-btn-fg);
-  --color-btn-fg-danger: var(--color-btn-fg);
-
-  --color-btn-fg-primary-light: var(--color-btn-fg-light);
-  --color-btn-fg-secondary-light: var(--color-btn-fg-light);
-  --color-btn-fg-tertiary-light: var(--color-btn-fg-light);
-  --color-btn-fg-warning-light: var(--color-btn-fg-light);
-  --color-btn-fg-danger-light: var(--color-btn-fg-light);
+  /* === TYPOGRAPHY === */
+  --text-button-sm: var(--text-sm);
+  --text-button-md: var(--text-md);
+  --text-button-lg: var(--text-lg);
 
-  --color-btn-fg-outlined-primary: var(--color-btn-fg-outlined);
-  --color-btn-fg-outlined-secondary: var(--color-btn-fg-outlined);
-  --color-btn-fg-outlined-tertiary: var(--color-btn-fg-outlined);
-  --color-btn-fg-outlined-warning: var(--color-btn-fg-outlined);
-  --color-btn-fg-outlined-danger: var(--color-btn-fg-outlined);
+  /* === BORDERS & RADIUS === */
+  --radius-button-sm: var(--radius-sm);
+  --radius-button-md: var(--radius-md);
+  --radius-button-lg: var(--radius-lg);
 
-  --color-btn-fg-primary-borderless: var(--color-btn-primary);
-  --color-btn-fg-secondary-borderless: var(--color-btn-secondary);
-  --color-btn-fg-tertiary-borderless: var(--color-btn-tertiary);
-  --color-btn-fg-warning-borderless: var(--color-btn-warning);
-  --color-btn-fg-danger-borderless: var(--color-btn-danger);
+  --border-button-width-sm: var(--border-width-sm);
+  --border-button-width-md: var(--border-width-md);
+  --border-button-width-lg: var(--border-width-lg);
 
   /* === FOCUS RINGS === */
-  --color-btn-ring-primary: --alpha(
-    var(--color-btn-primary) /
+  --color-button-ring-primary: --alpha(
+    var(--color-button-primary) /
     var(--opacity-ring)
   );
-  --color-btn-ring-secondary: --alpha(
-    var(--color-btn-secondary) /
+  --color-button-ring-secondary: --alpha(
+    var(--color-button-secondary) /
     var(--opacity-ring)
   );
-  --color-btn-ring-tertiary: --alpha(
-    var(--color-btn-tertiary) /
+  --color-button-ring-tertiary: --alpha(
+    var(--color-button-tertiary) /
     var(--opacity-ring)
   );
-  --color-btn-ring-warning: --alpha(
-    var(--color-btn-warning) /
+  --color-button-ring-warning: --alpha(
+    var(--color-button-warning) /
     var(--opacity-ring)
   );
-  --color-btn-ring-danger: --alpha(
-    var(--color-btn-danger) /
+  --color-button-ring-danger: --alpha(
+    var(--color-button-danger) /
     var(--opacity-ring)
   );
-
-  /* === PADDING === */
-
-  --padding-btn-sm: var(--spacing-150) var(--spacing-250);
-  --padding-btn-md: var(--spacing-200) var(--spacing-350);
-  --padding-btn-lg: var(--spacing-250) var(--spacing-450);
-
-  /* Spacing between icon and text */
-  --spacing-btn-sm: var(--spacing-150);
-  --spacing-btn-md: var(--spacing-200);
-  --spacing-btn-lg: var(--spacing-250);
-
-  /* === TYPOGRAPHY === */
-  /* Text sizes */
-  --text-btn-sm: var(--text-sm);
-  --text-btn-md: var(--text-md);
-  --text-btn-lg: var(--text-lg);
-
-  /* === RADIUS === */
-  --radius-btn-sm: var(--radius-sm);
-  --radius-btn-md: var(--radius-md);
-  --radius-btn-lg: var(--radius-lg);
-
-  /* ===== Border colors ===== */
-  --color-btn-border-primary: var(--color-btn-primary);
-  --color-btn-border-secondary: var(--color-btn-secondary);
-  --color-btn-border-tertiary: var(--color-btn-tertiary);
-  --color-btn-border-warning: var(--color-btn-warning);
-  --color-btn-border-danger: var(--color-btn-danger);
-
-  /* Border width */
-  --border-btn-width-sm: var(--border-width-sm);
-  --border-btn-width-md: var(--border-width-md);
-  --border-btn-width-lg: var(--border-width-lg);
 }

From 7cff8db245499ed86315e967cc2c44e085f3e71e Mon Sep 17 00:00:00 2001
From: Your Name <your-email@example.com>
Date: Mon, 18 Aug 2025 15:57:25 +0200
Subject: [PATCH 08/44] refactor(ui/badge): reorganize badge tokens to follow
 contribution standards

---
 libs/ui/src/atoms/badge.tsx                   | 22 ++---
 .../ui/src/tokens/components/atoms/_badge.css | 93 ++++++++++---------
 2 files changed, 60 insertions(+), 55 deletions(-)

diff --git a/libs/ui/src/atoms/badge.tsx b/libs/ui/src/atoms/badge.tsx
index 4385546efe..37edc52921 100644
--- a/libs/ui/src/atoms/badge.tsx
+++ b/libs/ui/src/atoms/badge.tsx
@@ -5,37 +5,37 @@ import { tv } from '../utils'
 const badgeVariants = tv({
   base: [
     'inline-flex items-center justify-center',
-    'px-badge-x py-badge-y',
-    'rounded-badge border-badge',
+    'p-badge',
+    'rounded-badge border-badge-border',
     'text-badge-size',
     'border-(length:--border-width-badge-dynamic)',
   ],
   variants: {
     variant: {
       primary: [
-        'bg-badge-primary-bg text-badge-primary-fg border-badge-border-primary',
+        'bg-badge-bg-primary text-badge-fg-primary border-badge-border-primary',
       ],
       secondary: [
-        'bg-badge-secondary-bg text-badge-secondary-fg border-badge-border-secondary',
+        'bg-badge-bg-secondary text-badge-fg-secondary border-badge-border-secondary',
       ],
       tertiary: [
-        'bg-badge-tertiary-bg text-badge-tertiary-fg border-badge-border-tertiary',
+        'bg-badge-bg-tertiary text-badge-fg-tertiary border-badge-border-tertiary',
       ],
       discount: [
-        'bg-badge-discount-bg text-badge-discount-fg border-badge-border-discount',
+        'bg-badge-bg-discount text-badge-fg-discount border-badge-border-discount',
       ],
-      info: ['bg-badge-info-bg text-badge-info-fg border-badge-border-info'],
+      info: ['bg-badge-bg-info text-badge-fg-info border-badge-border-info'],
       success: [
-        'bg-badge-success-bg text-badge-success-fg border-badge-border-success',
+        'bg-badge-bg-success text-badge-fg-success border-badge-border-success',
       ],
       warning: [
-        'bg-badge-warning-bg text-badge-warning-fg border-badge-border-warning',
+        'bg-badge-bg-warning text-badge-fg-warning border-badge-border-warning',
       ],
       danger: [
-        'bg-badge-danger-bg text-badge-danger-fg border-badge-border-danger',
+        'bg-badge-bg-danger text-badge-fg-danger border-badge-border-danger',
       ],
       outline: [
-        'bg-badge-outline-bg text-badge-outline-fg border-badge-border-outline',
+        'bg-badge-bg-outline text-badge-fg-outline border-badge-border-outline',
       ],
       dynamic: [],
     },
diff --git a/libs/ui/src/tokens/components/atoms/_badge.css b/libs/ui/src/tokens/components/atoms/_badge.css
index e66e6a912c..487e67b0e5 100644
--- a/libs/ui/src/tokens/components/atoms/_badge.css
+++ b/libs/ui/src/tokens/components/atoms/_badge.css
@@ -1,55 +1,60 @@
-@import "../../_semantic.css";
-
 @theme static {
-  --padding-badge-x: var(--spacing-100);
-  --padding-badge-y: var(--spacing-100);
-
-  --text-badge-size: var(--text-xs);
-
-  --radius-badge: var(--radius-sm);
-  --border-width-badge: var(--border-width-sm);
-
-  /* Primary variant */
-  --color-badge-primary-bg: var(--color-primary);
-  --color-badge-primary-fg: var(--color-fg-reverse);
+  /* === BASE COLOR MAPPING === */
+  /* Reference layer - single source of truth for theming */
+  --color-badge-primary: var(--color-primary);
+  --color-badge-secondary: var(--color-secondary);
+  --color-badge-tertiary: var(--color-tertiary);
+  --color-badge-info: var(--color-info);
+  --color-badge-success: var(--color-success);
+  --color-badge-warning: var(--color-warning);
+  --color-badge-danger: var(--color-danger);
+
+  /* === DERIVED COLORS === */
+  /* Background colors - using reference layer */
+  --color-badge-bg-primary: var(--color-badge-primary);
+  --color-badge-bg-secondary: var(--color-badge-secondary);
+  --color-badge-bg-tertiary: var(--color-badge-tertiary);
+  --color-badge-bg-info: var(--color-badge-info);
+  --color-badge-bg-success: var(--color-badge-success);
+  --color-badge-bg-warning: var(--color-badge-warning);
+  --color-badge-bg-danger: var(--color-badge-danger);
+  --color-badge-bg-discount: var(--color-badge-danger); /* Alias for discount */
+
+  /* Foreground colors */
+  --color-badge-fg: var(--color-fg-reverse);
+  --color-badge-fg-primary: var(--color-badge-fg);
+  --color-badge-fg-secondary: var(--color-badge-fg);
+  --color-badge-fg-tertiary: var(--color-badge-fg);
+  --color-badge-fg-info: var(--color-badge-fg);
+  --color-badge-fg-success: var(--color-badge-fg);
+  --color-badge-fg-warning: var(--color-badge-fg);
+  --color-badge-fg-danger: var(--color-badge-fg);
+  --color-badge-fg-discount: var(--color-fg-dark); /* Keep original for discount */
+
+  /* Border colors */
+  --color-badge-border: var(--color-border-primary);
   --color-badge-border-primary: transparent;
-
-  /* Secondary variant */
-  --color-badge-secondary-bg: var(--color-secondary);
-  --color-badge-secondary-fg: var(--color-fg-reverse);
   --color-badge-border-secondary: transparent;
-
-  /* Tertiary variant */
-  --color-badge-tertiary-bg: var(--color-tertiary);
-  --color-badge-tertiary-fg: var(--color-fg-reverse);
   --color-badge-border-tertiary: transparent;
-
-  --color-badge-discount-bg: var(--color-danger);
-  --color-badge-discount-fg: var(--color-fg-dark);
-  --color-badge-border-discount: transparent;
-
-  /* Info variant */
-  --color-badge-info-bg: var(--color-info);
-  --color-badge-info-fg: var(--color-fg-reverse);
   --color-badge-border-info: transparent;
-
-  /* Success variant */
-  --color-badge-success-bg: var(--color-success);
-  --color-badge-success-fg: var(--color-fg-reverse);
   --color-badge-border-success: transparent;
-
-  /* Warning variant */
-  --color-badge-warning-bg: var(--color-warning);
-  --color-badge-warning-fg: var(--color-fg-reverse);
   --color-badge-border-warning: transparent;
-
-  /* Danger variant */
-  --color-badge-danger-bg: var(--color-danger);
-  --color-badge-danger-fg: var(--color-fg-reverse);
   --color-badge-border-danger: transparent;
+  --color-badge-border-discount: transparent;
 
+  /* === COMPONENT VARIANTS === */
   /* Outline variant */
-  --color-badge-outline-bg: transparent;
-  --color-badge-outline-fg: var(--color-fg-secondary);
-  --color-badge-border-outline: var(--color-border-primary);
+  --color-badge-bg-outline: transparent;
+  --color-badge-fg-outline: var(--color-fg-secondary);
+  --color-badge-border-outline: var(--color-badge-border);
+
+  /* === SPACING === */
+  --padding-badge: var(--spacing-100) var(--spacing-100);
+
+  /* === TYPOGRAPHY === */
+  --text-badge-size: var(--text-xs);
+
+  /* === BORDERS & RADIUS === */
+  --radius-badge: var(--radius-sm);
+  --border-width-badge: var(--border-width-sm);
 }

From 7c47e64b328a45a10ffee51150c0b1ef4db38b1d Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Tue, 19 Aug 2025 15:28:03 +0200
Subject: [PATCH 09/44] fix ui bug

---
 libs/ui/src/tokens/components/atoms/_button.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/ui/src/tokens/components/atoms/_button.css b/libs/ui/src/tokens/components/atoms/_button.css
index b90bed2e95..d9cb173613 100644
--- a/libs/ui/src/tokens/components/atoms/_button.css
+++ b/libs/ui/src/tokens/components/atoms/_button.css
@@ -11,7 +11,7 @@
   --color-button-tertiary: var(--color-tertiary);
   --color-button-warning: var(--color-warning);
   --color-button-danger: var(--color-danger);
-  --color-button-borderless: var(--color-base);
+  --color-button-borderless: transparent;
 
   /* === DERIVED COLORS === */
   /* Background colors - using reference layer */

From 7f105ad6716fd8b36479db1b7ee45471563667a5 Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Wed, 20 Aug 2025 08:28:58 +0200
Subject: [PATCH 10/44] refactor(ui/tooltip): remove hardcoded padding

---
 libs/ui/src/atoms/tooltip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/ui/src/atoms/tooltip.tsx b/libs/ui/src/atoms/tooltip.tsx
index 787813b449..67cf510ff7 100644
--- a/libs/ui/src/atoms/tooltip.tsx
+++ b/libs/ui/src/atoms/tooltip.tsx
@@ -5,7 +5,7 @@ import { type VariantProps, tv } from 'tailwind-variants'
 
 const tooltipVariants = tv({
   slots: {
-    trigger: ['inline-flex py-0 px-0'],
+    trigger: ['inline-flex'],
     content: [
       '[--arrow-size:var(--tooltip-arrow-size)]',
       '[--arrow-background:var(--tooltip-arrow-background)]',

From f9c7cf373da17a4746b946cb0f9e8d16ad0c4ecd Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Wed, 20 Aug 2025 11:47:13 +0200
Subject: [PATCH 11/44] refactor(ui):set light-dark shadow variant

---
 libs/ui/src/tokens/_base.css | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/libs/ui/src/tokens/_base.css b/libs/ui/src/tokens/_base.css
index fcb5eccdfe..0c4e522208 100644
--- a/libs/ui/src/tokens/_base.css
+++ b/libs/ui/src/tokens/_base.css
@@ -5,8 +5,17 @@
   --radius-lg: 12px;
   --radius-full: 9999px;
 
-  --shadow-primary: 0 1px 3px -1px rgba(0, 0, 0, 0.16), 0 2px 6px -1px
-    rgba(0, 0, 0, 0.06), 0 4px 12px -2px rgba(0, 0, 0, 0.1);
+  --color-shadow-1: light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 1));
+  --color-shadow-2: light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 1));
+  --color-shadow-3: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1));
+
+  --offset-shadow-1: 0px 1px 3px 0px;
+  --offset-shadow-2: 0px 5px 6px 0px;
+  --offset-shadow-3: 1px 1px 20px 0px;
+
+  --shadow-primary: var(--offset-shadow-1) var(--color-shadow-1),
+    var(--offset-shadow-2) var(--color-shadow-2), var(--offset-shadow-3)
+    var(--color-shadow-3);
 
   /* Shadows */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);

From 71108c678cabd6d3e30eac2f997eac80c395a747 Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Thu, 21 Aug 2025 07:39:11 +0200
Subject: [PATCH 12/44]  feat(ui): add Image component stories with Next.js
 integration

 Enable testing of polymorphic Image component with both native img
 and Next.js Image. Configure static assets serving in Storybook.
 Next.js devDependency enables testing framework-specific components
 like Next Image, Next Link (for ButtonLink), and other integrations.
---
 libs/ui/.storybook/main.ts              |   1 +
 libs/ui/package.json                    |   8 ++-
 libs/ui/stories/assets/test-image.webp  | Bin 0 -> 26370 bytes
 libs/ui/stories/assets/types.d.ts       |   4 ++
 libs/ui/stories/atoms/image.stories.tsx |  81 ++++++++++++++++++++++++
 5 files changed, 92 insertions(+), 2 deletions(-)
 create mode 100644 libs/ui/stories/assets/test-image.webp
 create mode 100644 libs/ui/stories/assets/types.d.ts
 create mode 100644 libs/ui/stories/atoms/image.stories.tsx

diff --git a/libs/ui/.storybook/main.ts b/libs/ui/.storybook/main.ts
index 929ea93db0..e57e0ac197 100644
--- a/libs/ui/.storybook/main.ts
+++ b/libs/ui/.storybook/main.ts
@@ -14,6 +14,7 @@ const config: StorybookConfig = {
     '../stories/**/*.mdx',
     '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
+  staticDirs: ['../stories/assets'],
   addons: [
     '@storybook/addon-onboarding',
     '@storybook/addon-links',
diff --git a/libs/ui/package.json b/libs/ui/package.json
index 810c4c8225..a9ea288ffe 100644
--- a/libs/ui/package.json
+++ b/libs/ui/package.json
@@ -31,7 +31,10 @@
   },
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": ["dist", "src/tokens"],
+  "files": [
+    "dist",
+    "src/tokens"
+  ],
   "scripts": {
     "build": "rslib build",
     "build:storybook": "storybook build",
@@ -51,6 +54,7 @@
     "@zag-js/combobox": "^1.15.0",
     "@zag-js/dialog": "^1.15.0",
     "@zag-js/i18n-utils": "^1.15.0",
+    "@zag-js/menu": "^1.15.0",
     "@zag-js/number-input": "^1.15.0",
     "@zag-js/pagination": "^1.15.0",
     "@zag-js/popover": "^1.15.0",
@@ -59,7 +63,6 @@
     "@zag-js/select": "^1.15.0",
     "@zag-js/slider": "^1.15.0",
     "@zag-js/steps": "^1.15.0",
-    "@zag-js/menu": "^1.15.0",
     "@zag-js/switch": "^1.15.0",
     "@zag-js/tabs": "^1.15.0",
     "@zag-js/toast": "^1.15.0",
@@ -90,6 +93,7 @@
     "eslint": "^9.0.0",
     "eslint-plugin-tailwindcss": "npm:@hyoban/eslint-plugin-tailwindcss@4.0.0-alpha.12",
     "glob": "^11.0.2",
+    "next": "^15.5.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "storybook": "^8.6.12",
diff --git a/libs/ui/stories/assets/test-image.webp b/libs/ui/stories/assets/test-image.webp
new file mode 100644
index 0000000000000000000000000000000000000000..0c9a7cd6415c854f18dd2f5cc88ccbab047bd102
GIT binary patch
literal 26370
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
V-OLln!6^ZDtsr{uB!+X9Pyp>Q77YLZ

literal 0
HcmV?d00001

diff --git a/libs/ui/stories/assets/types.d.ts b/libs/ui/stories/assets/types.d.ts
new file mode 100644
index 0000000000..f1d0793780
--- /dev/null
+++ b/libs/ui/stories/assets/types.d.ts
@@ -0,0 +1,4 @@
+declare module '*.webp' {
+  const src: string
+  export default src
+}
diff --git a/libs/ui/stories/atoms/image.stories.tsx b/libs/ui/stories/atoms/image.stories.tsx
new file mode 100644
index 0000000000..19bb1de712
--- /dev/null
+++ b/libs/ui/stories/atoms/image.stories.tsx
@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Image } from '../../src/atoms/image'
+import NextImage from 'next/image'
+import testImg from '../assets/test-image.webp'
+
+
+const meta: Meta<typeof Image> = {
+  title: 'Atoms/Image',
+  component: Image,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Framework-agnostic image component that accepts any image component via the `as` prop'
+      }
+    }
+  },
+  args: {
+    src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=400&fit=crop',
+    alt: 'Mountain landscape',
+    className: 'w-full max-w-md rounded-lg'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof Image>
+
+// Basic usage with native img
+export const Default: Story = {
+  render: () => (
+    <Image src="https://images.unsplash.com/photo-1540206395-68808572332f?w=600&h=600&fit=crop"
+        alt="Small"
+        className="w-40 h-40 object-cover rounded" />
+  )
+}
+
+
+// Different sizes
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex gap-4 items-end">
+      <Image
+        src="https://images.unsplash.com/photo-1540206395-68808572332f?w=600&h=600&fit=crop"
+        alt="Small"
+        className="w-20 h-20 object-cover rounded"
+      />
+      <Image
+        src="https://images.unsplash.com/photo-1540206395-68808572332f?w=600&h=600&fit=crop"
+        alt="Medium"
+        className="w-32 h-32 object-cover rounded-lg"
+      />
+      <Image
+        src="https://images.unsplash.com/photo-1540206395-68808572332f?w=600&h=600&fit=crop"
+        alt="Large"
+        className="w-48 h-48 object-cover rounded-xl"
+      />
+    </div>
+  )
+}
+
+// With Next.js Image component
+export const WithNextImage: Story = {
+  render: () => {
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-gray-600">Using Next.js Image via `as` prop:</p>
+        <Image
+          as={NextImage}
+          src={testImg}
+          alt="Next.js optimized image"
+          width={200}
+          height={200}
+          className="rounded-lg"
+          priority
+          placeholder='blur'
+          blurDataURL={testImg}
+          unoptimized
+        />
+      </div>
+    )
+  }
+}
\ No newline at end of file

From b1441cb4a53059837303f545ea39ac00081b01a4 Mon Sep 17 00:00:00 2001
From: Your Name <your-email@example.com>
Date: Fri, 29 Aug 2025 00:20:07 +0200
Subject: [PATCH 13/44] fix: add missing import RangeSlider

---
 libs/ui/stories/templates/comprehensive-form.stories.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/libs/ui/stories/templates/comprehensive-form.stories.tsx b/libs/ui/stories/templates/comprehensive-form.stories.tsx
index 98b255cde2..7f553dde73 100644
--- a/libs/ui/stories/templates/comprehensive-form.stories.tsx
+++ b/libs/ui/stories/templates/comprehensive-form.stories.tsx
@@ -11,6 +11,7 @@ import { FormInput } from '../../src/molecules/form-input'
 import { NumericInput } from '../../src/atoms/numeric-input'
 import { Select } from '../../src/molecules/select'
 import { Switch } from '../../src/molecules/switch'
+import {RangeSlider} from '../../src/molecules/range-slider'
 
 const meta: Meta = {
   title: 'Templates/Comprehensive Form',

From 73a2b19258f2ae7b310b6e3e8234a97435e97d90 Mon Sep 17 00:00:00 2001
From: Your Name <your-email@example.com>
Date: Fri, 29 Aug 2025 00:34:45 +0200
Subject: [PATCH 14/44] refactor: Update color-palette stories for color scheme
 overview

---
 .../templates/color-palette.stories.tsx       | 418 +++---------------
 1 file changed, 72 insertions(+), 346 deletions(-)

diff --git a/libs/ui/stories/templates/color-palette.stories.tsx b/libs/ui/stories/templates/color-palette.stories.tsx
index 0c6a006c1c..d7f40a60bf 100644
--- a/libs/ui/stories/templates/color-palette.stories.tsx
+++ b/libs/ui/stories/templates/color-palette.stories.tsx
@@ -1,7 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import React, { useState, useRef } from 'react'
+import { useState } from 'react'
+import { Select } from '../../src/molecules/select'
 import '../../src/tokens/_colors.css'
 import '../../src/tokens/_semantic.css'
+import { ColorSelect } from '../../src/atoms/color-select'
 
 const meta: Meta = {
   title: 'Templates/Color Palette',
@@ -35,137 +37,14 @@ const stateVariants = [
   { state: 'disabled', label: 'Disabled' },
 ] as const
 
-function ColorSwatch({ 
-  color, 
-  variant, 
-  state,
-  showLabel = true,
-  copyMode = 'variable'
-}: { 
-  color: string
-  variant: string
-  state: string
-  showLabel?: boolean
-  copyMode?: 'variable' | 'oklch'
-}) {
-  const [copied, setCopied] = useState(false)
-  const swatchRef = useRef<HTMLDivElement>(null)
-  
-  const baseColorVar = `--color-${color}${variant}`
-  
-  // For disabled state, we use the predefined -disabled variant
-  // For other states, we calculate the color modification
-  const computedColor = state === 'disabled' 
-    ? `var(--color-${color}${variant}-disabled)`
-    : state && state !== ''
-    ? `oklch(from var(${baseColorVar}) calc(l + var(--state-${state})) c h)`
-    : `var(${baseColorVar})`
-  
-  // Get the correct CSS variable name to copy
-  const colorVar = state === 'disabled' 
-    ? `--color-${color}${variant}-disabled`
-    : baseColorVar
-  
-  const handleCopy = () => {
-    let textToCopy: string
-    
-    if (copyMode === 'oklch' && swatchRef.current) {
-      // Get oklch value from computed styles
-      const oklch = window.getComputedStyle(swatchRef.current).backgroundColor
-      textToCopy = oklch
-    } else {
-      // Copy variable name
-      textToCopy = colorVar
-    }
-    
-    navigator.clipboard.writeText(textToCopy)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
-  }
-  
-  return (
-    <div 
-      className="group relative flex flex-col items-center gap-2 p-3 rounded-lg transition-all hover:bg-fill-hover cursor-pointer"
-      onClick={handleCopy}
-    >
-      <div 
-        ref={swatchRef}
-        className="relative w-20 h-20 rounded-lg shadow-md transition-transform group-hover:scale-110 border border--border-primary"
-        style={{ 
-          backgroundColor: computedColor,
-        }}
-      >
-        {copied && (
-          <div className="absolute inset-0 flex flex-col items-center justify-center bg-base-reverse/75 text-fg-reverse text-xs rounded-lg">
-            <div>Copied!</div>
-            <div className="text-[10px] opacity-75">
-              {copyMode === 'oklch' ? 'OKLCH' : 'VAR'}
-            </div>
-          </div>
-        )}
-      </div>
-      {showLabel && (
-        <div className="text-center">
-          <div className="text-xs font-medium text-fg-primary">
-            {color}{variant}
-          </div>
-          {state && (
-            <div className="text-xs text-fg-secondary-light">
-              {state}
-            </div>
-          )}
-          <div className="text-xs font-mono text-fg-secondary-light mt-1 opacity-0 group-hover:opacity-100 transition-opacity">
-            {copyMode === 'oklch' && swatchRef.current 
-              ? window.getComputedStyle(swatchRef.current).backgroundColor
-              : colorVar
-            }
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-function ColorGroup({ color, copyMode }: { color: string; copyMode: 'variable' | 'oklch' }) {
-  return (
-    <div className="bg-surface rounded-xl shadow-lg p-6">
-      <h3 className="text-lg font-semibold mb-4 capitalize text-fg-primary">
-        {color}
-      </h3>
-      
-      <div className="space-y-6">
-        {colorVariants.map(({ suffix, label }) => (
-          <div key={suffix}>
-            <h4 className="text-sm font-medium text-fg-secondary mb-3">
-              {label}
-            </h4>
-            <div className="grid grid-cols-4 gap-2">
-              {stateVariants.map(({ state, label: stateLabel }) => (
-                <ColorSwatch
-                  key={state}
-                  color={color}
-                  variant={suffix}
-                  state={state}
-                  copyMode={copyMode}
-                />
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
 
 function ColorPaletteGrid() {
   const [filter, setFilter] = useState<string>('all')
-  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')
-  const [copyMode, setCopyMode] = useState<'variable' | 'oklch'>('oklch')
-  
   const filteredColors = filter === 'all' 
     ? semanticColors 
     : semanticColors.filter(c => c === filter)
-  
+    
+
   return (
     <div className="min-h-screen bg-base p-8">
       <div className="max-w-7xl mx-auto">
@@ -174,134 +53,83 @@ function ColorPaletteGrid() {
           <h1 className="text-3xl font-bold text-fg-primary mb-2">
             Color Palette
           </h1>
-          <p className="text-fg-secondary">
-            Click any color swatch to copy its {copyMode === 'variable' ? 'CSS variable name' : 'OKLCH value'}
-          </p>
         </div>
         
         {/* Controls */}
-        <div className="flex flex-wrap gap-4 mb-8">
-          <div className="flex gap-2">
-            <button
-              onClick={() => setViewMode('grid')}
-              className={`px-4 py-2 rounded-lg transition-colors ${
-                viewMode === 'grid'
-                  ? 'bg-primary text-fg-reverse'
-                  : 'bg-fill-base hover:bg-fill-hover text-fg-primary'
-              }`}
-            >
-              Grid View
-            </button>
-            <button
-              onClick={() => setViewMode('list')}
-              className={`px-4 py-2 rounded-lg transition-colors ${
-                viewMode === 'list'
-                  ? 'bg-primary text-fg-reverse'
-                  : 'bg-fill-base hover:bg-fill-hover text-fg-primary'
-              }`}
-            >
-              List View
-            </button>
-          </div>
-          
-          <div className="flex gap-2 items-center">
-            <span className="text-sm text-fg-secondary">Copy format:</span>
-            <button
-              onClick={() => setCopyMode('variable')}
-              className={`px-3 py-2 rounded-lg transition-colors ${
-                copyMode === 'variable'
-                  ? 'bg-primary text-fg-reverse'
-                  : 'bg-fill-base hover:bg-fill-hover text-fg-primary'
-              }`}
-            >
-              CSS Variable
-            </button>
-            <button
-              onClick={() => setCopyMode('oklch')}
-              className={`px-3 py-2 rounded-lg transition-colors ${
-                copyMode === 'oklch'
-                  ? 'bg-primary text-fg-reverse'
-                  : 'bg-fill-base hover:bg-fill-hover text-fg-primary'
-              }`}
-            >
-              OKLCH Value
-            </button>
+        <div className="flex flex-wrap gap-4 mb-8">                    
+          <div className="w-48">
+            <Select
+              defaultValue={['all']}
+              clearIcon={false}
+              value={[filter]}
+              onValueChange={(details) => setFilter(details.value[0])}
+              options={[
+                { label: 'All Colors', value: 'all' },
+                ...semanticColors.map((color: string) => ({
+                  label: color.charAt(0).toUpperCase() + color.slice(1),
+                  value: color,
+                }))
+              ]}
+              size="md"
+            />
           </div>
-          
-          <select
-            value={filter}
-            onChange={(e) => setFilter(e.target.value)}
-            className="px-4 py-2 rounded-lg bg-surface border border--border-primary text-fg-primary"
-          >
-            <option value="all">All Colors</option>
-            {semanticColors.map(color => (
-              <option key={color} value={color} className="capitalize">
-                {color}
-              </option>
-            ))}
-          </select>
         </div>
         
-        {/* Color Grid/List */}
-        <div className={
-          viewMode === 'grid' 
-            ? 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6'
-            : 'space-y-6'
-        }>
+        <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
           {filteredColors.map(color => (
-            <ColorGroup key={color} color={color} copyMode={copyMode} />
-          ))}
-        </div>
-        
-        {/* Quick Reference */}
-        <div className="mt-12 bg-surface rounded-xl shadow-lg p-6">
-          <h2 className="text-xl font-semibold mb-4 text-fg-primary">
-            Quick Reference
-          </h2>
-          
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div>
-              <h3 className="text-sm font-medium text-fg-secondary mb-3">
-                Color Variants
-              </h3>
-              <div className="space-y-2">
-                {colorVariants.map(({ suffix, label }) => (
-                  <div key={suffix} className="flex justify-between text-sm">
-                    <span className="text-fg-primary">{label}</span>
-                    <code className="font-mono text-fg-secondary-light">
-                      {suffix || '(default)'}
-                    </code>
-                  </div>
-                ))}
-              </div>
-            </div>
-            
-            <div>
-              <h3 className="text-sm font-medium text-fg-secondary mb-3">
-                State Modifiers
-              </h3>
-              <div className="space-y-2">
-                {stateVariants.map(({ state, label }) => (
-                  <div key={state} className="flex justify-between text-sm">
-                    <span className="text-fg-primary">{label}</span>
-                    <code className="font-mono text-fg-secondary-light">
-                      {state ? `--state-${state}` : '(default)'}
-                    </code>
+            <div className="bg-surface rounded-xl shadow-lg p-6">
+            <h3 className="text-lg font-semibold mb-4 capitalize text-fg-primary">
+              {color}
+            </h3>
+      
+      <div className="space-y-6">
+        {colorVariants.map(({ suffix, label }) => (
+          <div key={suffix}>
+            <h4 className="text-sm font-medium text-fg-secondary mb-3">
+              {label}
+            </h4>
+            <div className="grid grid-cols-4 gap-4">
+              {stateVariants.map(({ state, label: stateLabel }) => {
+                const baseColorVar = `--color-${color}${suffix}`
+                const computedColor = state === 'disabled' 
+                  ? `var(--color-${color}${suffix}-disabled)`
+                  : state !== ''
+                  ? `oklch(from var(${baseColorVar}) calc(l + var(--state-${state})) c h)`
+                  : `var(${baseColorVar})`
+
+                const colorTokenName = state === 'disabled' 
+                  ? `--color-${color}${suffix}-disabled`
+                  : state !== ''
+                  ? `--color-${color}${suffix}-${state}`
+                  : `--color-${color}${suffix}`
+
+                return (
+                  <div key={state} className="flex flex-col items-center gap-2 min-w-0">
+                    <div className='h-16 w-16 flex-shrink-0'>
+                      <ColorSelect
+                        color={computedColor}
+                        size='full'
+                        radius='md'
+                      />
+                    </div>
+                    <div className="text-center w-full">
+                      <div className="text-xs font-medium text-fg-primary truncate">
+                        {state || 'Default'}
+                      </div>
+                      <div className="text-xs font-mono text-fg-secondary mt-1 break-all leading-tight">
+                        {colorTokenName}
+                      </div>
+                    </div>
                   </div>
-                ))}
-              </div>
+                )
+              })}
             </div>
           </div>
-          
-          <div className="mt-6 p-4 bg-overlay rounded-lg">
-            <h3 className="text-sm font-medium text-fg-secondary mb-2">
-              Usage Example
-            </h3>
-            <code className="text-sm font-mono text-fg-primary">
-              background-color: var(--color-primary-light);
-            </code>
-          </div>
-        </div>
+        ))}
+      </div>
+    </div>
+          ))}
+        </div>        
       </div>
     </div>
   )
@@ -310,105 +138,3 @@ function ColorPaletteGrid() {
 export const Default: Story = {
   render: () => <ColorPaletteGrid />,
 }
-
-// Compact view for all colors at once
-function CompactColorGrid() {
-  const [copyMode, setCopyMode] = useState<'variable' | 'oklch'>('variable')
-  
-  return (
-    <div className="min-h-screen bg-base p-8">
-      <div className="max-w-7xl mx-auto">
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold text-fg-primary mb-2">
-            Color Palette - Compact View
-          </h1>
-          <p className="text-fg-secondary mb-4">
-            Click any color swatch to copy its {copyMode === 'variable' ? 'CSS variable name' : 'OKLCH value'}
-          </p>
-          <div className="flex gap-2 items-center">
-            <span className="text-sm text-fg-secondary">Copy format:</span>
-            <button
-              onClick={() => setCopyMode('variable')}
-              className={`px-3 py-2 rounded-lg transition-colors ${
-                copyMode === 'variable'
-                  ? 'bg-primary text-fg-reverse'
-                  : 'bg-fill-base hover:bg-fill-hover text-fg-primary'
-              }`}
-            >
-              CSS Variable
-            </button>
-            <button
-              onClick={() => setCopyMode('oklch')}
-              className={`px-3 py-2 rounded-lg transition-colors ${
-                copyMode === 'oklch'
-                  ? 'bg-primary text-fg-reverse'
-                  : 'bg-fill-base hover:bg-fill-hover text-fg-primary'
-              }`}
-            >
-              OKLCH Value
-            </button>
-          </div>
-        </div>
-        
-        <div className="bg-surface rounded-xl shadow-lg p-6">
-          <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead>
-                <tr className="border-b border--border-primary">
-                  <th className="text-left py-3 px-4 text-sm font-medium text-fg-secondary">
-                    Color
-                  </th>
-                  {colorVariants.map(({ label }) => (
-                    <th key={label} colSpan={4} className="text-center py-3 px-2 text-sm font-medium text-fg-secondary">
-                      {label}
-                    </th>
-                  ))}
-                </tr>
-                <tr className="border-b border--border-primary">
-                  <th></th>
-                  {colorVariants.map(({ label }) => (
-                    <React.Fragment key={label}>
-                      {stateVariants.map(({ label: stateLabel }) => (
-                        <th key={stateLabel} className="text-center py-2 px-1 text-xs text-fg-secondary-light">
-                          {stateLabel}
-                        </th>
-                      ))}
-                    </React.Fragment>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
-                {semanticColors.map(color => (
-                  <tr key={color} className="border-b border--border-primary/50">
-                    <td className="py-4 px-4 font-medium capitalize text-fg-primary">
-                      {color}
-                    </td>
-                    {colorVariants.map(({ suffix }) => (
-                      <React.Fragment key={suffix}>
-                        {stateVariants.map(({ state }) => (
-                          <td key={state} className="p-2">
-                            <ColorSwatch
-                              color={color}
-                              variant={suffix}
-                              state={state}
-                              showLabel={false}
-                              copyMode={copyMode}
-                            />
-                          </td>
-                        ))}
-                      </React.Fragment>
-                    ))}
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const Compact: Story = {
-  render: () => <CompactColorGrid />,
-}
\ No newline at end of file

From 93fac157c9dda894439708f5514898a71092d6cb Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Sun, 31 Aug 2025 09:46:33 +0200
Subject: [PATCH 15/44] refactor(ui/tokens): simplify secondary text color
 system

- Remove redundant fg-primary-light and fg-secondary-light tokens
- Implement dynamic secondary text using OKLCH color space
---
 libs/ui/src/tokens/_semantic.css | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/libs/ui/src/tokens/_semantic.css b/libs/ui/src/tokens/_semantic.css
index ca869f7ca6..5a140c225d 100644
--- a/libs/ui/src/tokens/_semantic.css
+++ b/libs/ui/src/tokens/_semantic.css
@@ -11,6 +11,7 @@
   --state-disabled-chroma: 0.01;
   --state-light-variant: 0.1; /* Always make colors lighter for -light variant */
   --state-light-chroma: 0.6; /* Reduce saturation for softer, pastel colors */
+  --state-secondary-text: 0.15;
   --state-border: 15%;
   --max-lightness: 0.97;
   --opacity-ring: 80%;
@@ -26,6 +27,7 @@
 :is(.dark, .always-dark) {
   --state-hover: 0.08;
   --state-active: 0.12;
+  --state-secondary-text: -0.15;
   --surface-increment: -0.05;
 }
 
@@ -34,6 +36,7 @@
   :root:not(.light):not(.always-light) {
     --state-hover: 0.08;
     --state-active: 0.12;
+    --state-secondary-text: -0.15;
     --surface-increment: -0.05;
   }
 }
@@ -42,12 +45,14 @@
 :is(.light, .always-light) .reverse {
   --state-hover: 0.08;
   --state-active: 0.12;
+  --state-secondary-text: -0.15;
   --surface-increment: -0.05;
 }
 
 :is(.dark, .always-dark) .reverse {
   --state-hover: -0.08;
   --state-active: -0.12;
+  --state-secondary-text: 0.15;
   --surface-increment: 0.05;
 }
 
@@ -56,6 +61,7 @@
   .reverse:not(.dark):not(.always-dark):not(.light):not(.always-light) {
     --state-hover: 0.08;
     --state-active: 0.12;
+    --state-secondary-text: -0.15;
     --surface-increment: -0.05;
   }
 }
@@ -64,6 +70,7 @@
   .reverse:not(.dark):not(.always-dark):not(.light):not(.always-light) {
     --state-hover: -0.08;
     --state-active: -0.12;
+    --state-secondary-text: 0.15;
     --surface-increment: 0.05;
   }
 }
@@ -240,14 +247,9 @@
   --color-fg-light: var(--color-slate-800); /* Light mode */
   --color-fg-dark: var(--color-white); /* Dark mode */
   --color-fg-primary: light-dark(var(--color-fg-light), var(--color-fg-dark));
-  --color-fg-primary-light: --alpha(
-    var(--color-fg-primary) /
-    var(--opacity-text-secondary)
-  );
-  --color-fg-secondary: light-dark(var(--color-gray-900), var(--color-gray-200));
-  --color-fg-secondary-light: --alpha(
-    var(--color-fg-secondary) /
-    var(--opacity-text-secondary)
+
+  --color-fg-secondary: oklch(
+    from var(--color-fg-primary) calc(l + var(--state-secondary-text)) c h
   );
   --color-fg-reverse: light-dark(var(--color-fg-dark), var(--color-fg-light));
 

From a29fa48efcb51a10125410fc15b0127ccd69b537 Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Sun, 31 Aug 2025 16:25:51 +0200
Subject: [PATCH 16/44] chore(ui): upgrade tailwind-variants to v3.1.0

---
 libs/ui/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/ui/package.json b/libs/ui/package.json
index a9ea288ffe..f584698d77 100644
--- a/libs/ui/package.json
+++ b/libs/ui/package.json
@@ -68,7 +68,7 @@
     "@zag-js/toast": "^1.15.0",
     "@zag-js/tooltip": "^1.15.0",
     "@zag-js/tree-view": "^1.15.0",
-    "tailwind-variants": "^1.0.0"
+    "tailwind-variants": "^3.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.0.0",

From 5e333d6d92ec9ecdcd800c6ee12bbe6e8eef550a Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Mon, 1 Sep 2025 05:18:55 +0200
Subject: [PATCH 17/44] "feat(ui/tokens): add layout primitive tokens for
 responsive design

- Add new _layout.css with container widths, aspect ratios, breakpoints
- Move aspect from semantic to layout
- fix invalid naming: aspect-ratio-* => aspect-*
---
 libs/ui/src/tokens/_layout.css                | 33 +++++++++++++++++++
 libs/ui/src/tokens/_semantic.css              |  6 ----
 .../tokens/components/molecules/_carousel.css |  2 +-
 .../components/molecules/_product-card.css    |  2 +-
 libs/ui/src/tokens/index.css                  |  1 +
 5 files changed, 36 insertions(+), 8 deletions(-)
 create mode 100644 libs/ui/src/tokens/_layout.css

diff --git a/libs/ui/src/tokens/_layout.css b/libs/ui/src/tokens/_layout.css
new file mode 100644
index 0000000000..c1c1c1011f
--- /dev/null
+++ b/libs/ui/src/tokens/_layout.css
@@ -0,0 +1,33 @@
+@theme static {
+  /* === BREAKPOINTS === */
+  --breakpoint-xs: 30rem;
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
+
+  /* === RESPONSIVE CONTAINER WIDTHS === */
+  /* Main layout containers - responsive max-widths */
+  --spacing-container-3xs: 20rem;
+  --spacing-container-2xs: 24rem; /* Small screens */
+  --spacing-container-xs: 28rem; /* Small screens */
+  --spacing-container-sm: 32rem; /* Medium screens */
+  --spacing-container-md: 36rem; /* Large screens */
+  --spacing-container-lg: 42rem; /* Extra large screens */
+  --spacing-container-xl: 48rem; /* 2X large screens */
+  --spacing-container-2xl: 56rem; /* Ultra wide screens */
+  --spacing-container-3xl: 64rem; /* Ultra wide screens */
+  --spacing-container-4xl: 72rem;
+  --spacing-container-max: 80rem;
+  --spacing-container-prose: 65ch; /* Optimal reading width */
+
+  /* === ASPECT RATIOS === */
+  --aspect-square: 1;
+  --aspect-video: 16 / 9;
+  --aspect-portrait: 3 / 4;
+  --aspect-landscape: 4 / 3;
+  --aspect-wide: 21 / 9;
+  --aspect-card: 3 / 2;
+  --aspect-golden: 1.618;
+}
diff --git a/libs/ui/src/tokens/_semantic.css b/libs/ui/src/tokens/_semantic.css
index 5a140c225d..76728fcbb8 100644
--- a/libs/ui/src/tokens/_semantic.css
+++ b/libs/ui/src/tokens/_semantic.css
@@ -334,10 +334,4 @@
 
   /* Focus ring */
   --color-ring-primary: --alpha(var(--color-primary) / var(--opacity-ring));
-
-  /* Aspect ratio */
-  --aspect-ratio-square: 1 / 1;
-  --aspect-ratio-portrait: 3 / 4;
-  --aspect-ratio-landscape: 4 / 3;
-  --aspect-ratio-16-9: 16 / 9;
 }
diff --git a/libs/ui/src/tokens/components/molecules/_carousel.css b/libs/ui/src/tokens/components/molecules/_carousel.css
index 45d4ddbb89..9b846d56e7 100644
--- a/libs/ui/src/tokens/components/molecules/_carousel.css
+++ b/libs/ui/src/tokens/components/molecules/_carousel.css
@@ -17,7 +17,7 @@
   /* === INDICATOR === */
   --gap-carousel-indicator: var(--spacing-100);
   --color-carousel-indicator-active: var(--color-primary);
-  --aspect-carousel-indicator: var(--aspect-ratio-square);
+  --aspect-carousel-indicator: var(--aspect-square);
   --width-carousel-indicator: var(--spacing-200);
 
   /* === FOCUS STATES === */
diff --git a/libs/ui/src/tokens/components/molecules/_product-card.css b/libs/ui/src/tokens/components/molecules/_product-card.css
index 64e595653b..389133876c 100644
--- a/libs/ui/src/tokens/components/molecules/_product-card.css
+++ b/libs/ui/src/tokens/components/molecules/_product-card.css
@@ -49,7 +49,7 @@
   --color-btn-wishlist-fg: var(--color-btn-text);
 
   /* === PRODUCT CARD IMAGE === */
-  --aspect-pc-image: var(--aspect-ratio-square);
+  --aspect-pc-image: var(--aspect-square);
   --radius-pc-image: var(--radius-pc);
 }
 
diff --git a/libs/ui/src/tokens/index.css b/libs/ui/src/tokens/index.css
index 4b1102291b..3a23727268 100644
--- a/libs/ui/src/tokens/index.css
+++ b/libs/ui/src/tokens/index.css
@@ -6,6 +6,7 @@
 @import "./_colors.css";
 @import "./_spacing.css";
 @import "./_typography.css";
+@import "./_layout.css";
 
 /* Semantic tokens (dependent on primitives) */
 @import "./_semantic.css";

From e40b6938c23029071609c1da2bf11e438b155c98 Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Mon, 1 Sep 2025 05:26:40 +0200
Subject: [PATCH 18/44] "refactor(ui/stories): simplify color palette story
 implementation

- Remove interactive filter with Select component
- Remove useState hook and filter logic
- Convert to static color grid display
- Simplify component to pure presentation without controls"
---
 .../templates/color-palette.stories.tsx       | 45 ++-----------------
 1 file changed, 4 insertions(+), 41 deletions(-)

diff --git a/libs/ui/stories/templates/color-palette.stories.tsx b/libs/ui/stories/templates/color-palette.stories.tsx
index d7f40a60bf..257a1809be 100644
--- a/libs/ui/stories/templates/color-palette.stories.tsx
+++ b/libs/ui/stories/templates/color-palette.stories.tsx
@@ -1,6 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { useState } from 'react'
-import { Select } from '../../src/molecules/select'
 import '../../src/tokens/_colors.css'
 import '../../src/tokens/_semantic.css'
 import { ColorSelect } from '../../src/atoms/color-select'
@@ -38,45 +36,14 @@ const stateVariants = [
 ] as const
 
 
-function ColorPaletteGrid() {
-  const [filter, setFilter] = useState<string>('all')
-  const filteredColors = filter === 'all' 
-    ? semanticColors 
-    : semanticColors.filter(c => c === filter)
-    
 
-  return (
+export const Default: Story = {
+  render: () => (
     <div className="min-h-screen bg-base p-8">
       <div className="max-w-7xl mx-auto">
-        {/* Header */}
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold text-fg-primary mb-2">
-            Color Palette
-          </h1>
-        </div>
-        
-        {/* Controls */}
-        <div className="flex flex-wrap gap-4 mb-8">                    
-          <div className="w-48">
-            <Select
-              defaultValue={['all']}
-              clearIcon={false}
-              value={[filter]}
-              onValueChange={(details) => setFilter(details.value[0])}
-              options={[
-                { label: 'All Colors', value: 'all' },
-                ...semanticColors.map((color: string) => ({
-                  label: color.charAt(0).toUpperCase() + color.slice(1),
-                  value: color,
-                }))
-              ]}
-              size="md"
-            />
-          </div>
-        </div>
         
         <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
-          {filteredColors.map(color => (
+          {semanticColors.map(color => (
             <div className="bg-surface rounded-xl shadow-lg p-6">
             <h3 className="text-lg font-semibold mb-4 capitalize text-fg-primary">
               {color}
@@ -132,9 +99,5 @@ function ColorPaletteGrid() {
         </div>        
       </div>
     </div>
-  )
-}
-
-export const Default: Story = {
-  render: () => <ColorPaletteGrid />,
+  ),
 }

From 6724953a6f967df24a4ea70c6c241f574bd8f8ac Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Mon, 1 Sep 2025 10:30:09 +0200
Subject: [PATCH 19/44] refactor(ui/storybook): reorganize stories for better
 navigation

---
 libs/ui/.storybook/preview.ts                       | 13 +++++++++++++
 .../color-palette.stories.tsx                       |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)
 rename libs/ui/stories/{templates => overview}/color-palette.stories.tsx (98%)

diff --git a/libs/ui/.storybook/preview.ts b/libs/ui/.storybook/preview.ts
index 4613e41bef..dc949205ca 100644
--- a/libs/ui/.storybook/preview.ts
+++ b/libs/ui/.storybook/preview.ts
@@ -11,6 +11,19 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    options: {
+      storySort: {
+        order: [
+          'Atoms',
+          'Molecules',
+          'Organisms',
+          'Templates',
+          'Pages',
+          'Overview',
+          '*',
+        ],
+      },
+    },
   },
   decorators: [
     withThemeByClassName({
diff --git a/libs/ui/stories/templates/color-palette.stories.tsx b/libs/ui/stories/overview/color-palette.stories.tsx
similarity index 98%
rename from libs/ui/stories/templates/color-palette.stories.tsx
rename to libs/ui/stories/overview/color-palette.stories.tsx
index 257a1809be..c7b736dac2 100644
--- a/libs/ui/stories/templates/color-palette.stories.tsx
+++ b/libs/ui/stories/overview/color-palette.stories.tsx
@@ -4,7 +4,7 @@ import '../../src/tokens/_semantic.css'
 import { ColorSelect } from '../../src/atoms/color-select'
 
 const meta: Meta = {
-  title: 'Templates/Color Palette',
+  title: 'Overview/Color Palette',
   parameters: {
     layout: 'fullscreen',
   },

From 95b0f6277f5a3ead4c5263610d30d86e780d5a99 Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Tue, 2 Sep 2025 19:35:12 +0200
Subject: [PATCH 20/44] fix(ui/tokens): correct button icon references in token
 names

---
 .../src/tokens/components/atoms/_button.css   | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/libs/ui/src/tokens/components/atoms/_button.css b/libs/ui/src/tokens/components/atoms/_button.css
index d9cb173613..87bf53d305 100644
--- a/libs/ui/src/tokens/components/atoms/_button.css
+++ b/libs/ui/src/tokens/components/atoms/_button.css
@@ -109,34 +109,35 @@
 
   /* Light variant states */
   --color-button-bg-primary-light-hover: oklch(
-    from var(--color-button-primary-light) calc(l + var(--state-hover)) c h
+    from var(--color-button-bg-primary-light) calc(l + var(--state-hover)) c h
   );
   --color-button-bg-primary-light-active: oklch(
-    from var(--color-button-primary-light) calc(l + var(--state-active)) c h
+    from var(--color-button-bg-primary-light) calc(l + var(--state-active)) c h
   );
   --color-button-bg-secondary-light-hover: oklch(
-    from var(--color-button-secondary-light) calc(l + var(--state-hover)) c h
+    from var(--color-button-bg-secondary-light) calc(l + var(--state-hover)) c h
   );
   --color-button-bg-secondary-light-active: oklch(
-    from var(--color-button-secondary-light) calc(l + var(--state-active)) c h
+    from var(--color-button-bg-secondary-light) calc(l + var(--state-active)) c
+      h
   );
   --color-button-bg-tertiary-light-hover: oklch(
-    from var(--color-button-tertiary-light) calc(l + var(--state-hover)) c h
+    from var(--color-button-bg-tertiary-light) calc(l + var(--state-hover)) c h
   );
   --color-button-bg-tertiary-light-active: oklch(
-    from var(--color-button-tertiary-light) calc(l + var(--state-active)) c h
+    from var(--color-button-bg-tertiary-light) calc(l + var(--state-active)) c h
   );
   --color-button-bg-warning-light-hover: oklch(
-    from var(--color-button-warning-light) calc(l + var(--state-hover)) c h
+    from var(--color-button-bg-warning-light) calc(l + var(--state-hover)) c h
   );
   --color-button-bg-warning-light-active: oklch(
-    from var(--color-button-warning-light) calc(l + var(--state-active)) c h
+    from var(--color-button-bg-warning-light) calc(l + var(--state-active)) c h
   );
   --color-button-bg-danger-light-hover: oklch(
-    from var(--color-button-danger-light) calc(l + var(--state-hover)) c h
+    from var(--color-button-bg-danger-light) calc(l + var(--state-hover)) c h
   );
   --color-button-bg-danger-light-active: oklch(
-    from var(--color-button-danger-light) calc(l + var(--state-active)) c h
+    from var(--color-button-bg-danger-light) calc(l + var(--state-active)) c h
   );
 
   /* Outlined variants */

From 2c782a2c48731f80474377e78208e6e0ff0a8a22 Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Wed, 3 Sep 2025 17:57:45 +0200
Subject: [PATCH 21/44] update zag.js to the latest

---
 libs/ui/package.json | 40 ++++++++++++++++++++--------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/libs/ui/package.json b/libs/ui/package.json
index f584698d77..409cef25c5 100644
--- a/libs/ui/package.json
+++ b/libs/ui/package.json
@@ -48,26 +48,26 @@
     "validate:token-definitions": "node scripts/validate-token-definitions.js"
   },
   "dependencies": {
-    "@zag-js/accordion": "^1.15.0",
-    "@zag-js/carousel": "^1.15.0",
-    "@zag-js/checkbox": "^1.15.0",
-    "@zag-js/combobox": "^1.15.0",
-    "@zag-js/dialog": "^1.15.0",
-    "@zag-js/i18n-utils": "^1.15.0",
-    "@zag-js/menu": "^1.15.0",
-    "@zag-js/number-input": "^1.15.0",
-    "@zag-js/pagination": "^1.15.0",
-    "@zag-js/popover": "^1.15.0",
-    "@zag-js/rating-group": "^1.15.0",
-    "@zag-js/react": "^1.15.0",
-    "@zag-js/select": "^1.15.0",
-    "@zag-js/slider": "^1.15.0",
-    "@zag-js/steps": "^1.15.0",
-    "@zag-js/switch": "^1.15.0",
-    "@zag-js/tabs": "^1.15.0",
-    "@zag-js/toast": "^1.15.0",
-    "@zag-js/tooltip": "^1.15.0",
-    "@zag-js/tree-view": "^1.15.0",
+    "@zag-js/accordion": "^1.22.1",
+    "@zag-js/carousel": "^1.22.1",
+    "@zag-js/checkbox": "^1.22.1",
+    "@zag-js/combobox": "^1.22.1",
+    "@zag-js/dialog": "^1.22.1",
+    "@zag-js/i18n-utils": "^1.22.1",
+    "@zag-js/menu": "^1.22.1",
+    "@zag-js/number-input": "^1.22.1",
+    "@zag-js/pagination": "^1.22.1",
+    "@zag-js/popover": "^1.22.1",
+    "@zag-js/rating-group": "^1.22.1",
+    "@zag-js/react": "^1.22.1",
+    "@zag-js/select": "^1.22.1",
+    "@zag-js/slider": "^1.22.1",
+    "@zag-js/steps": "^1.22.1",
+    "@zag-js/switch": "^1.22.1",
+    "@zag-js/tabs": "^1.22.1",
+    "@zag-js/toast": "^1.22.1",
+    "@zag-js/tooltip": "^1.22.1",
+    "@zag-js/tree-view": "^1.22.1",
     "tailwind-variants": "^3.1.0"
   },
   "devDependencies": {

From 748dafe8350ccfc92864cf9b1edc57e450d18aa6 Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Thu, 4 Sep 2025 03:27:03 +0200
Subject: [PATCH 22/44] chore: apply biome formatting to ui library files

Format scripts, components and stories with biome linter
---
 libs/ui/scripts/validate-token-definitions.js | 387 +++++++++++-------
 libs/ui/scripts/validate-token-usage.js       | 243 +++++++----
 libs/ui/src/molecules/form-input.tsx          |   2 +-
 libs/ui/src/molecules/steps.tsx               |   6 +-
 libs/ui/src/tokens/tokens-only.css            |   2 +-
 libs/ui/stories/atoms/image.stories.tsx       |  45 +-
 .../stories/atoms/numeric-input.stories.tsx   |   2 +-
 libs/ui/stories/atoms/tooltip.stories.tsx     |   4 +-
 .../ui/stories/molecules/checkbox.stories.tsx |   4 +-
 .../molecules/form-numeric-input.stories.tsx  |  70 +++-
 libs/ui/stories/molecules/menu.stories.tsx    | 331 ++++++++++++---
 libs/ui/stories/molecules/popover.stories.tsx | 109 +++--
 libs/ui/stories/molecules/steps.stories.tsx   |  22 +-
 libs/ui/stories/molecules/toast.stories.tsx   |  26 +-
 .../stories/molecules/tree-view.stories.tsx   |   3 +-
 .../overview/color-palette.stories.tsx        | 110 ++---
 .../templates/comprehensive-form.stories.tsx  |   4 +-
 17 files changed, 917 insertions(+), 453 deletions(-)

diff --git a/libs/ui/scripts/validate-token-definitions.js b/libs/ui/scripts/validate-token-definitions.js
index 77c5c718b0..e81915adbb 100755
--- a/libs/ui/scripts/validate-token-definitions.js
+++ b/libs/ui/scripts/validate-token-definitions.js
@@ -2,13 +2,12 @@
 
 /**
  * Token Definition Validation Script
- * 
+ *
  * Identifies unused tokens with smart exception handling.
  * Analyzes dependency graphs and reference chains to determine actual usage.
  */
 
 import fs from 'fs'
-import path from 'path'
 import { glob } from 'glob'
 
 // Configuration for validation
@@ -26,23 +25,23 @@ const CONFIG = {
     /^--radius-(sm|md|lg)$/,
     // Base system tokens
     /^--color-.*-(50|100|200|300|400|500|600|700|800|900)$/,
-    /^--state-(hover|focus|active|disabled)$/
+    /^--state-(hover|focus|active|disabled)$/,
   ],
-  
+
   // Patterns to ignore completely
   ignorePatterns: [
     /^--tw-/, // Tailwind internal variables
     /_test$/,
-    /_debug$/
+    /_debug$/,
   ],
-  
+
   // File patterns to exclude from usage scanning
   excludeFiles: [
     '**/*.stories.tsx',
     '**/*.test.tsx',
     '**/*.spec.tsx',
-    '**/node_modules/**'
-  ]
+    '**/node_modules/**',
+  ],
 }
 
 /**
@@ -51,22 +50,22 @@ const CONFIG = {
 function parseTokensFromFile(filePath) {
   const content = fs.readFileSync(filePath, 'utf8')
   const tokens = new Map()
-  
+
   // Match CSS custom properties with their values
   const tokenRegex = /--([\w-]+)\s*:\s*([^;]+);/g
   let match
-  
+
   while ((match = tokenRegex.exec(content)) !== null) {
     const [fullMatch, name, value] = match
     const tokenName = `--${name}`
-    
+
     tokens.set(tokenName, {
       value: value.trim(),
       file: filePath,
-      line: content.substring(0, match.index).split('\n').length
+      line: content.substring(0, match.index).split('\n').length,
     })
   }
-  
+
   return tokens
 }
 
@@ -76,14 +75,14 @@ function parseTokensFromFile(filePath) {
 function loadAllTokens() {
   const allTokens = new Map()
   const tokenFiles = glob.sync('src/tokens/components/**/*.css')
-  
+
   for (const file of tokenFiles) {
     const tokens = parseTokensFromFile(file)
     for (const [name, data] of tokens) {
       allTokens.set(name, data)
     }
   }
-  
+
   return allTokens
 }
 
@@ -92,19 +91,19 @@ function loadAllTokens() {
  */
 function extractTokenReferences(value) {
   const references = new Set()
-  
+
   // Match var() functions
   const varMatches = value.matchAll(/var\(\s*(--[\w-]+)/g)
   for (const match of varMatches) {
     references.add(match[1])
   }
-  
+
   // Match oklch() from function references
   const oklchMatches = value.matchAll(/oklch\([^)]*var\(\s*(--[\w-]+)/g)
   for (const match of oklchMatches) {
     references.add(match[1])
   }
-  
+
   return references
 }
 
@@ -114,11 +113,11 @@ function extractTokenReferences(value) {
 function buildTokenDependencyGraph(allTokens) {
   const dependencyGraph = new Map()
   const reverseDependencyGraph = new Map()
-  
+
   for (const [tokenName, tokenData] of allTokens) {
     const references = extractTokenReferences(tokenData.value)
     dependencyGraph.set(tokenName, references)
-    
+
     // Build reverse dependencies
     for (const ref of references) {
       if (!reverseDependencyGraph.has(ref)) {
@@ -127,7 +126,7 @@ function buildTokenDependencyGraph(allTokens) {
       reverseDependencyGraph.get(ref).add(tokenName)
     }
   }
-  
+
   return { dependencyGraph, reverseDependencyGraph }
 }
 
@@ -136,92 +135,165 @@ function buildTokenDependencyGraph(allTokens) {
  */
 function tokenToUtilityClasses(tokenName) {
   const classes = new Set()
-  
+
   // Simplified token parsing
   const tokenParts = tokenName.slice(2).split('-') // Remove '--' and split
   if (tokenParts.length < 2) return classes
-  
+
   const primaryNamespace = tokenParts[0]
   const subNamespace = tokenParts.length > 2 ? tokenParts[1] : null
   const key = tokenParts.slice(subNamespace ? 2 : 1).join('-')
-  
+
   // Complete namespace to utility prefix mappings per Tailwind v4 docs
   const mappings = {
     // Color namespace - most extensive
-    'color': [
-      'bg', 'text', 'border', 'outline', 'decoration', 'shadow', 'inset-shadow',
-      'ring', 'ring-offset', 'inset-ring', 'accent', 'caret', 'fill', 'stroke'
+    color: [
+      'bg',
+      'text',
+      'border',
+      'outline',
+      'decoration',
+      'shadow',
+      'inset-shadow',
+      'ring',
+      'ring-offset',
+      'inset-ring',
+      'accent',
+      'caret',
+      'fill',
+      'stroke',
     ],
-    
+
     // Spacing namespace - very extensive (general spacing)
-    'spacing': [
+    spacing: [
       // Padding
-      'p', 'px', 'py', 'pt', 'pr', 'pb', 'pl', 'ps', 'pe',
+      'p',
+      'px',
+      'py',
+      'pt',
+      'pr',
+      'pb',
+      'pl',
+      'ps',
+      'pe',
       // Margin (including negative variants)
-      'm', 'mx', 'my', 'mt', 'mr', 'mb', 'ml', 'ms', 'me',
-      '-m', '-mx', '-my', '-mt', '-mr', '-mb', '-ml', '-ms', '-me',
+      'm',
+      'mx',
+      'my',
+      'mt',
+      'mr',
+      'mb',
+      'ml',
+      'ms',
+      'me',
+      '-m',
+      '-mx',
+      '-my',
+      '-mt',
+      '-mr',
+      '-mb',
+      '-ml',
+      '-ms',
+      '-me',
       // Width & Height
-      'w', 'h', 'min-w', 'min-h', 'max-w', 'max-h',
+      'w',
+      'h',
+      'min-w',
+      'min-h',
+      'max-w',
+      'max-h',
       // Position
-      'inset', 'inset-x', 'inset-y', 'top', 'right', 'bottom', 'left', 'start', 'end',
-      '-inset', '-inset-x', '-inset-y', '-top', '-right', '-bottom', '-left', '-start', '-end',
+      'inset',
+      'inset-x',
+      'inset-y',
+      'top',
+      'right',
+      'bottom',
+      'left',
+      'start',
+      'end',
+      '-inset',
+      '-inset-x',
+      '-inset-y',
+      '-top',
+      '-right',
+      '-bottom',
+      '-left',
+      '-start',
+      '-end',
       // Layout
-      'gap', 'space-x', 'space-y'
+      'gap',
+      'space-x',
+      'space-y',
     ],
-    
+
     // Specific spacing namespaces (more specific than general spacing)
-    'padding': [
-      'p', 'px', 'py', 'pt', 'pr', 'pb', 'pl', 'ps', 'pe'
-    ],
-    'margin': [
-      'm', 'mx', 'my', 'mt', 'mr', 'mb', 'ml', 'ms', 'me',
-      '-m', '-mx', '-my', '-mt', '-mr', '-mb', '-ml', '-ms', '-me'
+    padding: ['p', 'px', 'py', 'pt', 'pr', 'pb', 'pl', 'ps', 'pe'],
+    margin: [
+      'm',
+      'mx',
+      'my',
+      'mt',
+      'mr',
+      'mb',
+      'ml',
+      'ms',
+      'me',
+      '-m',
+      '-mx',
+      '-my',
+      '-mt',
+      '-mr',
+      '-mb',
+      '-ml',
+      '-ms',
+      '-me',
     ],
-    'gap': ['gap'],
-    
+    gap: ['gap'],
+
     // Width namespace (when not using spacing)
-    'width': ['w', 'min-w', 'max-w'],
-    
-    // Height namespace (when not using spacing)  
-    'height': ['h', 'min-h', 'max-h'],
-    
+    width: ['w', 'min-w', 'max-w'],
+
+    // Height namespace (when not using spacing)
+    height: ['h', 'min-h', 'max-h'],
+
     // Typography
-    'text': ['text'], // Font size
-    'font': ['font'], // Font family
-    'tracking': ['tracking'], // Letter spacing
-    'leading': ['leading'], // Line height
-    
+    text: ['text'], // Font size
+    font: ['font'], // Font family
+    tracking: ['tracking'], // Letter spacing
+    leading: ['leading'], // Line height
+
     // Border & Effects
-    'radius': ['rounded'],
-    'shadow': ['shadow'],
+    radius: ['rounded'],
+    shadow: ['shadow'],
     'inset-shadow': ['inset-shadow'],
     'drop-shadow': ['drop-shadow'],
-    'blur': ['blur'],
-    'perspective': ['perspective'],
-    
+    blur: ['blur'],
+    perspective: ['perspective'],
+
     // Layout
-    'aspect': ['aspect'],
-    
+    aspect: ['aspect'],
+
     // Animation
-    'ease': ['ease'],
-    'animate': ['animate'],
-    
+    ease: ['ease'],
+    animate: ['animate'],
+
     // Other
-    'opacity': ['opacity'],
-    'border': ['border'],
-    
+    opacity: ['opacity'],
+    border: ['border'],
+
     // Special cases that don't map to utilities directly
-    'z': [], // z-index values, handled differently
-    'arrow': [], // Custom properties for arrows, not utilities
-    'tree': [], // Custom component-specific properties
-    'textarea': [], // Custom component properties
-    'tooltip': [] // Custom component properties
+    z: [], // z-index values, handled differently
+    arrow: [], // Custom properties for arrows, not utilities
+    tree: [], // Custom component-specific properties
+    textarea: [], // Custom component properties
+    tooltip: [], // Custom component properties
   }
-  
+
   // Simplified namespace and key handling
   let namespace = primaryNamespace
   let tokenKey = key
-  
+
   // Handle special font-weight case
   if (primaryNamespace === 'font' && subNamespace === 'weight') {
     namespace = 'font-weight'
@@ -230,19 +302,29 @@ function tokenToUtilityClasses(tokenName) {
   } else if (subNamespace) {
     tokenKey = `${subNamespace}-${key}`
   }
-  
+
   // Skip custom properties that don't map to utilities
   const customPropertyPrefixes = [
-    'arrow', 'tree', 'tooltip', 'textarea', 'z', 'opacity-bg', 'opacity-borderless',
-    'spacing-translate', 'spacing-pc', 'spacing-menu-submenu'
+    'arrow',
+    'tree',
+    'tooltip',
+    'textarea',
+    'z',
+    'opacity-bg',
+    'opacity-borderless',
+    'spacing-translate',
+    'spacing-pc',
+    'spacing-menu-submenu',
   ]
-  
-  if (customPropertyPrefixes.some(prefix => tokenName.includes(`--${prefix}`))) {
+
+  if (
+    customPropertyPrefixes.some((prefix) => tokenName.includes(`--${prefix}`))
+  ) {
     return classes
   }
-  
+
   const prefixes = mappings[namespace] || mappings[primaryNamespace] || []
-  
+
   for (const prefix of prefixes) {
     if (namespace === 'font-weight') {
       // Special case: --font-weight-bold → font-bold (strip "weight")
@@ -251,7 +333,7 @@ function tokenToUtilityClasses(tokenName) {
       classes.add(`${prefix}-${tokenKey}`)
     }
   }
-  
+
   return classes
 }
 
@@ -261,27 +343,29 @@ function tokenToUtilityClasses(tokenName) {
 function findTokenUsageInComponentsCache(tokenName, componentFilesCache) {
   const usage = new Set()
   const possibleClasses = tokenToUtilityClasses(tokenName)
-  
+
   if (possibleClasses.size === 0) return usage
-  
+
   for (const [file, content] of componentFilesCache) {
     // Check for direct var() usage
     if (content.includes(`var(${tokenName})`)) {
       usage.add(`${file} (direct var() reference)`)
     }
-    
+
     // Check for utility class usage (simplified patterns)
     for (const className of possibleClasses) {
       const escapedClass = className.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-      
+
       // Simplified patterns - covers most cases
       const patterns = [
         // Matches: 'class', hover:class, data-[...]:class, sm:class
-        new RegExp(`\\b(?:[a-z-]+:|data-\\[[^\\]]+\\]:|(?:sm|md|lg|xl|2xl):)?${escapedClass}\\b`),
+        new RegExp(
+          `\\b(?:[a-z-]+:|data-\\[[^\\]]+\\]:|(?:sm|md|lg|xl|2xl):)?${escapedClass}\\b`
+        ),
         // Matches inside quotes with optional spacing
-        new RegExp(`['"\`][^'"\`]*\\s${escapedClass}\\s[^'"\`]*['"\`]`)
+        new RegExp(`['"\`][^'"\`]*\\s${escapedClass}\\s[^'"\`]*['"\`]`),
       ]
-      
+
       for (const pattern of patterns) {
         const match = content.search(pattern)
         if (match !== -1) {
@@ -293,7 +377,7 @@ function findTokenUsageInComponentsCache(tokenName, componentFilesCache) {
       }
     }
   }
-  
+
   return usage
 }
 
@@ -302,35 +386,40 @@ function findTokenUsageInComponentsCache(tokenName, componentFilesCache) {
  */
 function findTokenUsageInCSS(tokenName, allTokens) {
   const usage = new Set()
-  
+
   // Check usage in other tokens (reuse already loaded token data)
   for (const [otherTokenName, tokenData] of allTokens) {
     if (otherTokenName === tokenName) continue
-    
+
     if (tokenData.value.includes(`var(${tokenName})`)) {
-      usage.add(`${tokenData.file}:${tokenData.line} (referenced by ${otherTokenName})`)
+      usage.add(
+        `${tokenData.file}:${tokenData.line} (referenced by ${otherTokenName})`
+      )
     }
   }
-  
+
   // Check usage directly in CSS properties using already loaded files
   const processedFiles = new Set()
-  
+
   for (const [, tokenData] of allTokens) {
     const file = tokenData.file
     if (processedFiles.has(file)) continue
-    
+
     processedFiles.add(file)
-    
+
     try {
       const content = fs.readFileSync(file, 'utf8')
       const lines = content.split('\n')
-      
+
       lines.forEach((line, index) => {
         // Skip custom property definitions
         if (line.trim().startsWith(`${tokenName}:`)) return
-        
+
         // Look for var() usage in CSS properties
-        if (line.includes(`var(${tokenName})`) && !line.includes(`${tokenName}:`)) {
+        if (
+          line.includes(`var(${tokenName})`) &&
+          !line.includes(`${tokenName}:`)
+        ) {
           usage.add(`${file}:${index + 1} (CSS property)`)
         }
       })
@@ -338,7 +427,7 @@ function findTokenUsageInCSS(tokenName, allTokens) {
       // Skip files that can't be read
     }
   }
-  
+
   return usage
 }
 
@@ -346,34 +435,42 @@ function findTokenUsageInCSS(tokenName, allTokens) {
  * Check if token should be whitelisted
  */
 function isWhitelisted(tokenName) {
-  return CONFIG.whitelistPatterns.some(pattern => pattern.test(tokenName))
+  return CONFIG.whitelistPatterns.some((pattern) => pattern.test(tokenName))
 }
 
 /**
  * Check if token should be ignored
  */
 function shouldIgnoreToken(tokenName) {
-  return CONFIG.ignorePatterns.some(pattern => pattern.test(tokenName))
+  return CONFIG.ignorePatterns.some((pattern) => pattern.test(tokenName))
 }
 
 /**
  * Find all tokens that depend on a given token (recursive)
  */
-function findDependentTokens(tokenName, reverseDependencyGraph, visited = new Set()) {
+function findDependentTokens(
+  tokenName,
+  reverseDependencyGraph,
+  visited = new Set()
+) {
   if (visited.has(tokenName)) return new Set()
-  
+
   visited.add(tokenName)
   const dependents = new Set()
-  
+
   const directDependents = reverseDependencyGraph.get(tokenName) || new Set()
   for (const dependent of directDependents) {
     dependents.add(dependent)
-    const transitiveDependents = findDependentTokens(dependent, reverseDependencyGraph, visited)
+    const transitiveDependents = findDependentTokens(
+      dependent,
+      reverseDependencyGraph,
+      visited
+    )
     for (const transitive of transitiveDependents) {
       dependents.add(transitive)
     }
   }
-  
+
   return dependents
 }
 
@@ -382,18 +479,19 @@ function findDependentTokens(tokenName, reverseDependencyGraph, visited = new Se
  */
 function validateTokenDefinitions() {
   console.log('🔍 Analyzing token definitions and usage...')
-  
+
   const allTokens = loadAllTokens()
   console.log(`📋 Found ${allTokens.size} total tokens\n`)
-  
-  const { dependencyGraph, reverseDependencyGraph } = buildTokenDependencyGraph(allTokens)
-  
+
+  const { dependencyGraph, reverseDependencyGraph } =
+    buildTokenDependencyGraph(allTokens)
+
   // Cache component files content for reuse
   const componentFilesCache = new Map()
   const componentFiles = glob.sync('src/**/*.{ts,tsx}', {
-    ignore: CONFIG.excludeFiles
+    ignore: CONFIG.excludeFiles,
   })
-  
+
   for (const file of componentFiles) {
     try {
       componentFilesCache.set(file, fs.readFileSync(file, 'utf8'))
@@ -401,38 +499,43 @@ function validateTokenDefinitions() {
       console.warn(`⚠️  Could not read ${file}: ${error.message}`)
     }
   }
-  
+
   const unusedTokens = []
   const usedTokens = new Set()
   let checkedCount = 0
-  
+
   for (const [tokenName, tokenData] of allTokens) {
     checkedCount++
-    
+
     if (shouldIgnoreToken(tokenName)) {
       continue
     }
-    
+
     if (isWhitelisted(tokenName)) {
       usedTokens.add(tokenName)
       continue
     }
-    
+
     // Check component usage with cached content
-    const componentUsage = findTokenUsageInComponentsCache(tokenName, componentFilesCache)
-    
+    const componentUsage = findTokenUsageInComponentsCache(
+      tokenName,
+      componentFilesCache
+    )
+
     // Check CSS usage
     const cssUsage = findTokenUsageInCSS(tokenName, allTokens)
-    
+
     const totalUsage = new Set([...componentUsage, ...cssUsage])
-    
+
     if (totalUsage.size > 0) {
       usedTokens.add(tokenName)
     } else {
       // Check if any dependent tokens are used
       const dependents = findDependentTokens(tokenName, reverseDependencyGraph)
-      const usedDependents = Array.from(dependents).filter(dep => usedTokens.has(dep))
-      
+      const usedDependents = Array.from(dependents).filter((dep) =>
+        usedTokens.has(dep)
+      )
+
       if (usedDependents.length > 0) {
         usedTokens.add(tokenName)
       } else {
@@ -440,24 +543,26 @@ function validateTokenDefinitions() {
           name: tokenName,
           file: tokenData.file,
           line: tokenData.line,
-          value: tokenData.value
+          value: tokenData.value,
         })
       }
     }
   }
-  
+
   // Report results
   console.log(`\n📊 Validation Summary:`)
   console.log(`   Total tokens: ${allTokens.size}`)
   console.log(`   Used tokens: ${usedTokens.size}`)
   console.log(`   Unused tokens: ${unusedTokens.length}`)
-  
+
   if (unusedTokens.length === 0) {
     console.log('\n✅ All tokens are being used!')
     return true
   } else {
-    console.log(`\n⚠️  Found ${unusedTokens.length} potentially unused tokens:\n`)
-    
+    console.log(
+      `\n⚠️  Found ${unusedTokens.length} potentially unused tokens:\n`
+    )
+
     // Group by file
     const tokensByFile = new Map()
     for (const token of unusedTokens) {
@@ -466,7 +571,7 @@ function validateTokenDefinitions() {
       }
       tokensByFile.get(token.file).push(token)
     }
-    
+
     for (const [file, tokens] of tokensByFile) {
       console.log(`📄 ${file}:`)
       for (const token of tokens) {
@@ -474,10 +579,14 @@ function validateTokenDefinitions() {
       }
       console.log()
     }
-    
-    console.log('💡 Note: These tokens might be used in ways not detected by this script.')
-    console.log('   Consider:\n   - Dynamic class generation\n   - External usage\n   - Future planned usage\n')
-    
+
+    console.log(
+      '💡 Note: These tokens might be used in ways not detected by this script.'
+    )
+    console.log(
+      '   Consider:\n   - Dynamic class generation\n   - External usage\n   - Future planned usage\n'
+    )
+
     return false
   }
 }
@@ -496,4 +605,8 @@ if (import.meta.url === `file://${process.argv[1]}`) {
   }
 }
 
-export { validateTokenDefinitions, buildTokenDependencyGraph, findTokenUsageInComponentsCache }
\ No newline at end of file
+export {
+  validateTokenDefinitions,
+  buildTokenDependencyGraph,
+  findTokenUsageInComponentsCache,
+}
diff --git a/libs/ui/scripts/validate-token-usage.js b/libs/ui/scripts/validate-token-usage.js
index 5bc6b675f6..9be948b3e3 100755
--- a/libs/ui/scripts/validate-token-usage.js
+++ b/libs/ui/scripts/validate-token-usage.js
@@ -2,27 +2,65 @@
 
 /**
  * Token Usage Validation Script
- * 
+ *
  * Validates that all Tailwind classes in components have corresponding token definitions.
  * Follows Tailwind v4 theme variable namespace rules for precise mapping.
  */
 
 import fs from 'fs'
-import path from 'path'
 import { glob } from 'glob'
 
 // Tailwind v4 namespace to utility prefix mappings
 const NAMESPACE_MAPPINGS = {
-  'color': ['bg', 'text', 'border', 'fill', 'stroke', 'outline', 'ring', 'shadow', 'accent', 'caret', 'decoration'],
-  'spacing': ['p', 'px', 'py', 'pt', 'pr', 'pb', 'pl', 'm', 'mx', 'my', 'mt', 'mr', 'mb', 'ml', 'gap', 'w', 'h', 'max-w', 'min-w', 'max-h', 'min-h', 'top', 'right', 'bottom', 'left', 'inset'],
-  'text': ['text'],
+  color: [
+    'bg',
+    'text',
+    'border',
+    'fill',
+    'stroke',
+    'outline',
+    'ring',
+    'shadow',
+    'accent',
+    'caret',
+    'decoration',
+  ],
+  spacing: [
+    'p',
+    'px',
+    'py',
+    'pt',
+    'pr',
+    'pb',
+    'pl',
+    'm',
+    'mx',
+    'my',
+    'mt',
+    'mr',
+    'mb',
+    'ml',
+    'gap',
+    'w',
+    'h',
+    'max-w',
+    'min-w',
+    'max-h',
+    'min-h',
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'inset',
+  ],
+  text: ['text'],
   'font-weight': ['font'],
-  'font': ['font'],
-  'radius': ['rounded'],
-  'shadow': ['shadow', 'drop-shadow'],
-  'blur': ['blur'],
-  'opacity': ['opacity'],
-  'border': ['border']
+  font: ['font'],
+  radius: ['rounded'],
+  shadow: ['shadow', 'drop-shadow'],
+  blur: ['blur'],
+  opacity: ['opacity'],
+  border: ['border'],
 }
 
 // Standard Tailwind utilities to ignore (not custom tokens)
@@ -32,44 +70,44 @@ const IGNORE_PATTERNS = [
   /^(items|justify|content|self)-(start|end|center|stretch|between|around|evenly)$/,
   /^(flex|grid)-(row|col|flow|wrap|nowrap)$/,
   /^(order|col|row)-(start|end|\d+)$/,
-  
+
   // Standard spacing (without custom tokens)
   /^(p|m|gap|w|h|max-w|min-w|max-h|min-h|top|right|bottom|left|inset|space)-(0|px|0\.5|1|1\.5|2|2\.5|3|3\.5|4|5|6|7|8|9|10|11|12|14|16|20|24|28|32|36|40|44|48|52|56|60|64|72|80|96|auto|full|screen|min|max|fit)$/,
-  
+
   // Standard colors including transparent
   /^(bg|text|border)-(transparent|current|black|white|slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-?\d{0,3}$/,
   /^(bg|text|border)-(transparent|current|black|white|inherit)$/,
-  
+
   // Standard typography
   /^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/,
   /^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/,
   /^font-(sans|serif|mono)$/,
   /^(leading|tracking)-(none|tight|snug|normal|relaxed|loose|wide|wider|widest)$/,
-  
+
   // Standard borders & effects
   /^(border|rounded)-(none|sm|md|lg|xl|2xl|3xl|full)$/,
   /^border-(0|2|4|8)$/,
   /^shadow-(sm|md|lg|xl|2xl|inner|none)$/,
   /^opacity-(0|5|10|20|25|30|40|50|60|70|75|80|90|95|100)$/,
-  
+
   // Pseudo-classes and state modifiers
   /^(hover|focus|active|disabled|group-hover|group-focus):/,
   /^data-\[.+\]:/,
-  
+
   // Responsive prefixes
   /^(sm|md|lg|xl|2xl):/,
-  
+
   // Transform & animation
   /^(transform|rotate|scale|translate|skew|transition|duration|ease|delay|animate)-.+$/,
-  
+
   // Special edge cases
-  /^w-\(--reference-width\)$/,  // Dynamic width references
+  /^w-\(--reference-width\)$/, // Dynamic width references
   /^max-h-\(--available-height\)$/, // Dynamic height references
   /^\*:max-h-\(--available-height\)$/, // Selector prefixes
   /^left-(1\/2)$/, // Fractional positioning
-  
+
   // Misc utilities
-  /^(sr-only|not-sr-only|pointer-events|select|resize|appearance|cursor|outline|ring)-.+$/
+  /^(sr-only|not-sr-only|pointer-events|select|resize|appearance|cursor|outline|ring)-.+$/,
 ]
 
 /**
@@ -77,57 +115,63 @@ const IGNORE_PATTERNS = [
  */
 function extractTailwindClasses(content, filePath) {
   const classes = new Set()
-  
+
   // Match className props (string values)
-  const classNameMatches = content.matchAll(/className\s*=\s*["'`]([^"'`]+)["'`]/g)
+  const classNameMatches = content.matchAll(
+    /className\s*=\s*["'`]([^"'`]+)["'`]/g
+  )
   for (const match of classNameMatches) {
     const classString = match[1]
-    classString.split(/\s+/).forEach(cls => cls && classes.add(cls.trim()))
+    classString.split(/\s+/).forEach((cls) => cls && classes.add(cls.trim()))
   }
-  
+
   // Match className arrays: className: ['class1', 'class2'] or className={['class1', 'class2']}
-  const classNameArrayMatches = content.matchAll(/className\s*[:=]\s*(?:\{)?\s*\[([^\]]+)\]/g)
+  const classNameArrayMatches = content.matchAll(
+    /className\s*[:=]\s*(?:\{)?\s*\[([^\]]+)\]/g
+  )
   for (const match of classNameArrayMatches) {
     const arrayContent = match[1]
     // Extract strings from array elements
     const stringMatches = arrayContent.matchAll(/['"`]([^'"`]+)['"`]/g)
     for (const stringMatch of stringMatches) {
       const classString = stringMatch[1]
-      classString.split(/\s+/).forEach(cls => cls && classes.add(cls.trim()))
+      classString.split(/\s+/).forEach((cls) => cls && classes.add(cls.trim()))
     }
   }
-  
+
   // Match template literals in className
   const templateMatches = content.matchAll(/className\s*=\s*`([^`]+)`/g)
   for (const match of templateMatches) {
     const classString = match[1]
     // Extract static classes, ignore interpolations
     const staticParts = classString.split(/\$\{[^}]+\}/)
-    staticParts.forEach(part => {
-      part.split(/\s+/).forEach(cls => cls && classes.add(cls.trim()))
+    staticParts.forEach((part) => {
+      part.split(/\s+/).forEach((cls) => cls && classes.add(cls.trim()))
     })
   }
-  
+
   // Match tailwind-variants tv() configurations
   const tvMatches = content.matchAll(/tv\s*\(\s*\{[\s\S]*?\}\s*\)/g)
   for (const match of tvMatches) {
     const tvConfig = match[0]
-    
+
     // Extract from slots (arrays)
     const slotMatches = tvConfig.matchAll(/\[\s*['"`]([^'"`]+)['"`]/g)
     for (const slotMatch of slotMatches) {
       const classString = slotMatch[1]
-      classString.split(/\s+/).forEach(cls => cls && classes.add(cls.trim()))
+      classString.split(/\s+/).forEach((cls) => cls && classes.add(cls.trim()))
     }
-    
+
     // Extract from variant values
-    const variantMatches = tvConfig.matchAll(/:\s*\{\s*[^}]*['"`]([^'"`]+)['"`]/g)
+    const variantMatches = tvConfig.matchAll(
+      /:\s*\{\s*[^}]*['"`]([^'"`]+)['"`]/g
+    )
     for (const variantMatch of variantMatches) {
       const classString = variantMatch[1]
-      classString.split(/\s+/).forEach(cls => cls && classes.add(cls.trim()))
+      classString.split(/\s+/).forEach((cls) => cls && classes.add(cls.trim()))
     }
   }
-  
+
   // Match clsx/cn utility calls
   const clsxMatches = content.matchAll(/(?:clsx|cn)\s*\(\s*([^)]+)\)/g)
   for (const match of clsxMatches) {
@@ -135,21 +179,23 @@ function extractTailwindClasses(content, filePath) {
     const stringMatches = args.matchAll(/['"`]([^'"`]+)['"`]/g)
     for (const stringMatch of stringMatches) {
       const classString = stringMatch[1]
-      classString.split(/\s+/).forEach(cls => cls && classes.add(cls.trim()))
+      classString.split(/\s+/).forEach((cls) => cls && classes.add(cls.trim()))
     }
   }
-  
+
   // Match any quoted strings that might be CSS classes (broader approach)
-  const quotedStringMatches = content.matchAll(/['"`]([^'"`]*(?:bg-|text-|border-|p-|m-|w-|h-|flex|grid|rounded)[^'"`]*)['"`]/g)
+  const quotedStringMatches = content.matchAll(
+    /['"`]([^'"`]*(?:bg-|text-|border-|p-|m-|w-|h-|flex|grid|rounded)[^'"`]*)['"`]/g
+  )
   for (const match of quotedStringMatches) {
     const classString = match[1]
     // Only extract if it looks like CSS classes
     if (/^[a-z-\s:[\]()]+$/i.test(classString)) {
-      classString.split(/\s+/).forEach(cls => cls && classes.add(cls.trim()))
+      classString.split(/\s+/).forEach((cls) => cls && classes.add(cls.trim()))
     }
   }
-  
-  return Array.from(classes).filter(cls => cls.length > 0)
+
+  return Array.from(classes).filter((cls) => cls.length > 0)
 }
 
 /**
@@ -157,17 +203,19 @@ function extractTailwindClasses(content, filePath) {
  */
 function mapClassToPossibleTokens(className) {
   // Remove state modifiers (hover:, focus:, data-[...]:, etc.)
-  const baseClass = className.replace(/^[^:]*:/, '').replace(/^data-\[[^\]]+\]:/, '')
-  
+  const baseClass = className
+    .replace(/^[^:]*:/, '')
+    .replace(/^data-\[[^\]]+\]:/, '')
+
   // Parse utility class: prefix-value (non-greedy matching)
   // Match known prefixes first, then everything else as value
   const knownPrefixes = Object.values(NAMESPACE_MAPPINGS).flat()
   let prefix = null
   let value = null
-  
+
   // Try to match against known prefixes (longest first to handle cases like 'ring-offset')
   const sortedPrefixes = knownPrefixes.sort((a, b) => b.length - a.length)
-  
+
   for (const knownPrefix of sortedPrefixes) {
     if (baseClass.startsWith(`${knownPrefix}-`)) {
       prefix = knownPrefix
@@ -175,11 +223,11 @@ function mapClassToPossibleTokens(className) {
       break
     }
   }
-  
+
   if (!prefix || !value) return []
-  
+
   const possibleTokens = []
-  
+
   // Find which namespaces this prefix could belong to
   for (const [namespace, prefixes] of Object.entries(NAMESPACE_MAPPINGS)) {
     if (prefixes.includes(prefix)) {
@@ -191,28 +239,49 @@ function mapClassToPossibleTokens(className) {
       }
     }
   }
-  
+
   // Add specific namespace alternatives for spacing-related utilities
   if (['p', 'px', 'py', 'pt', 'pr', 'pb', 'pl', 'ps', 'pe'].includes(prefix)) {
     possibleTokens.push(`--padding-${value}`)
   }
-  
-  if (['m', 'mx', 'my', 'mt', 'mr', 'mb', 'ml', 'ms', 'me', '-m', '-mx', '-my', '-mt', '-mr', '-mb', '-ml', '-ms', '-me'].includes(prefix)) {
+
+  if (
+    [
+      'm',
+      'mx',
+      'my',
+      'mt',
+      'mr',
+      'mb',
+      'ml',
+      'ms',
+      'me',
+      '-m',
+      '-mx',
+      '-my',
+      '-mt',
+      '-mr',
+      '-mb',
+      '-ml',
+      '-ms',
+      '-me',
+    ].includes(prefix)
+  ) {
     possibleTokens.push(`--margin-${value}`)
   }
-  
+
   if (['gap'].includes(prefix)) {
     possibleTokens.push(`--gap-${value}`)
   }
-  
+
   if (['w', 'min-w', 'max-w'].includes(prefix)) {
     possibleTokens.push(`--width-${value}`)
   }
-  
+
   if (['h', 'min-h', 'max-h'].includes(prefix)) {
     possibleTokens.push(`--height-${value}`)
   }
-  
+
   return possibleTokens
 }
 
@@ -222,17 +291,17 @@ function mapClassToPossibleTokens(className) {
 function loadDefinedTokens() {
   const tokens = new Set()
   const tokenFiles = glob.sync('src/tokens/**/*.css')
-  
+
   for (const file of tokenFiles) {
     const content = fs.readFileSync(file, 'utf8')
-    
+
     // Match CSS custom properties
     const tokenMatches = content.matchAll(/--([a-z][a-z0-9-]*)\s*:/g)
     for (const match of tokenMatches) {
       tokens.add(`--${match[1]}`)
     }
   }
-  
+
   return tokens
 }
 
@@ -241,9 +310,11 @@ function loadDefinedTokens() {
  */
 function shouldIgnoreClass(className) {
   // Remove state modifiers for checking
-  const baseClass = className.replace(/^[^:]*:/, '').replace(/^data-\[[^\]]+\]:/, '')
-  
-  return IGNORE_PATTERNS.some(pattern => pattern.test(baseClass))
+  const baseClass = className
+    .replace(/^[^:]*:/, '')
+    .replace(/^data-\[[^\]]+\]:/, '')
+
+  return IGNORE_PATTERNS.some((pattern) => pattern.test(baseClass))
 }
 
 /**
@@ -251,62 +322,70 @@ function shouldIgnoreClass(className) {
  */
 function validateTokenUsage() {
   console.log('🔍 Validating token usage in components...\n')
-  
+
   const definedTokens = loadDefinedTokens()
   console.log(`📋 Found ${definedTokens.size} defined tokens`)
-  
+
   const componentFiles = glob.sync('src/**/*.{ts,tsx}', {
-    ignore: ['**/*.stories.tsx', '**/*.test.tsx', '**/*.spec.tsx']
+    ignore: ['**/*.stories.tsx', '**/*.test.tsx', '**/*.spec.tsx'],
   })
-  
+
   let totalErrors = 0
   const errorsByFile = new Map()
-  
+
   for (const file of componentFiles) {
     const content = fs.readFileSync(file, 'utf8')
     const classes = extractTailwindClasses(content, file)
     const fileErrors = []
-    
+
     for (const className of classes) {
       if (shouldIgnoreClass(className)) continue
-      
+
       const possibleTokens = mapClassToPossibleTokens(className)
       if (possibleTokens.length === 0) continue
-      
+
       // Check if ANY of the possible tokens exists
-      const hasMatchingToken = possibleTokens.some(token => definedTokens.has(token))
-      
+      const hasMatchingToken = possibleTokens.some((token) =>
+        definedTokens.has(token)
+      )
+
       if (!hasMatchingToken) {
         fileErrors.push({
           className,
           expectedTokens: possibleTokens,
-          line: content.split('\n').findIndex(line => line.includes(className)) + 1
+          line:
+            content.split('\n').findIndex((line) => line.includes(className)) +
+            1,
         })
       }
     }
-    
+
     if (fileErrors.length > 0) {
       errorsByFile.set(file, fileErrors)
       totalErrors += fileErrors.length
     }
   }
-  
+
   // Report results
   if (totalErrors === 0) {
-    console.log('✅ All component classes have corresponding token definitions!')
+    console.log(
+      '✅ All component classes have corresponding token definitions!'
+    )
     return true
   } else {
     console.log(`❌ Found ${totalErrors} missing token definitions:\n`)
-    
+
     for (const [file, errors] of errorsByFile) {
       console.log(`📄 ${file}:`)
       for (const error of errors) {
         const tokenList = error.expectedTokens.join(' OR ')
-        console.log(`  Line ${error.line}: ${error.className} → Missing token: ${tokenList}`)
+        console.log(
+          `  Line ${error.line}: ${error.className} → Missing token: ${tokenList}`
+        )
       }
       console.log()
     }
-    
+
     return false
   }
 }
@@ -324,4 +403,4 @@ if (import.meta.url === `file://${process.argv[1]}`) {
   }
 }
 
-export { validateTokenUsage, mapClassToPossibleTokens, extractTailwindClasses }
\ No newline at end of file
+export { validateTokenUsage, mapClassToPossibleTokens, extractTailwindClasses }
diff --git a/libs/ui/src/molecules/form-input.tsx b/libs/ui/src/molecules/form-input.tsx
index 728e095cd3..8c137414e2 100644
--- a/libs/ui/src/molecules/form-input.tsx
+++ b/libs/ui/src/molecules/form-input.tsx
@@ -39,7 +39,7 @@ export function FormInputRaw({
         variant={validateStatus}
         disabled={disabled}
         {...props}
-        className='p-input-sm md:p-input-md'
+        className="p-input-sm md:p-input-md"
       />
 
       {/* Status message */}
diff --git a/libs/ui/src/molecules/steps.tsx b/libs/ui/src/molecules/steps.tsx
index f9b18b2143..da31bf17fc 100644
--- a/libs/ui/src/molecules/steps.tsx
+++ b/libs/ui/src/molecules/steps.tsx
@@ -135,7 +135,11 @@ export function Steps({
     <div className={root()} {...api.getRootProps()}>
       <div className={list()} {...api.getListProps()}>
         {items.map((step, index) => (
-          <div className={item()} key={slugify(step.title)} {...api.getItemProps({ index })}>
+          <div
+            className={item()}
+            key={slugify(step.title)}
+            {...api.getItemProps({ index })}
+          >
             <button className={trigger()} {...api.getTriggerProps({ index })}>
               <span
                 className={indicator()}
diff --git a/libs/ui/src/tokens/tokens-only.css b/libs/ui/src/tokens/tokens-only.css
index 8dcb683283..862541c2df 100644
--- a/libs/ui/src/tokens/tokens-only.css
+++ b/libs/ui/src/tokens/tokens-only.css
@@ -63,4 +63,4 @@ body {
 .sbdocs-preview {
   background-color: var(--color-base) !important;
   color: var(--color-fg-primary) !important;
-}
\ No newline at end of file
+}
diff --git a/libs/ui/stories/atoms/image.stories.tsx b/libs/ui/stories/atoms/image.stories.tsx
index 19bb1de712..58e7218a7a 100644
--- a/libs/ui/stories/atoms/image.stories.tsx
+++ b/libs/ui/stories/atoms/image.stories.tsx
@@ -1,24 +1,24 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { Image } from '../../src/atoms/image'
 import NextImage from 'next/image'
+import { Image } from '../../src/atoms/image'
 import testImg from '../assets/test-image.webp'
 
-
 const meta: Meta<typeof Image> = {
   title: 'Atoms/Image',
   component: Image,
   parameters: {
     docs: {
       description: {
-        component: 'Framework-agnostic image component that accepts any image component via the `as` prop'
-      }
-    }
+        component:
+          'Framework-agnostic image component that accepts any image component via the `as` prop',
+      },
+    },
   },
   args: {
     src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=400&fit=crop',
     alt: 'Mountain landscape',
-    className: 'w-full max-w-md rounded-lg'
-  }
+    className: 'w-full max-w-md rounded-lg',
+  },
 }
 
 export default meta
@@ -27,34 +27,35 @@ type Story = StoryObj<typeof Image>
 // Basic usage with native img
 export const Default: Story = {
   render: () => (
-    <Image src="https://images.unsplash.com/photo-1540206395-68808572332f?w=600&h=600&fit=crop"
-        alt="Small"
-        className="w-40 h-40 object-cover rounded" />
-  )
+    <Image
+      src="https://images.unsplash.com/photo-1540206395-68808572332f?w=600&h=600&fit=crop"
+      alt="Small"
+      className="h-40 w-40 rounded object-cover"
+    />
+  ),
 }
 
-
 // Different sizes
 export const Sizes: Story = {
   render: () => (
-    <div className="flex gap-4 items-end">
+    <div className="flex items-end gap-4">
       <Image
         src="https://images.unsplash.com/photo-1540206395-68808572332f?w=600&h=600&fit=crop"
         alt="Small"
-        className="w-20 h-20 object-cover rounded"
+        className="h-20 w-20 rounded object-cover"
       />
       <Image
         src="https://images.unsplash.com/photo-1540206395-68808572332f?w=600&h=600&fit=crop"
         alt="Medium"
-        className="w-32 h-32 object-cover rounded-lg"
+        className="h-32 w-32 rounded-lg object-cover"
       />
       <Image
         src="https://images.unsplash.com/photo-1540206395-68808572332f?w=600&h=600&fit=crop"
         alt="Large"
-        className="w-48 h-48 object-cover rounded-xl"
+        className="h-48 w-48 rounded-xl object-cover"
       />
     </div>
-  )
+  ),
 }
 
 // With Next.js Image component
@@ -62,7 +63,9 @@ export const WithNextImage: Story = {
   render: () => {
     return (
       <div className="space-y-4">
-        <p className="text-sm text-gray-600">Using Next.js Image via `as` prop:</p>
+        <p className="text-gray-600 text-sm">
+          Using Next.js Image via `as` prop:
+        </p>
         <Image
           as={NextImage}
           src={testImg}
@@ -71,11 +74,11 @@ export const WithNextImage: Story = {
           height={200}
           className="rounded-lg"
           priority
-          placeholder='blur'
+          placeholder="blur"
           blurDataURL={testImg}
           unoptimized
         />
       </div>
     )
-  }
-}
\ No newline at end of file
+  },
+}
diff --git a/libs/ui/stories/atoms/numeric-input.stories.tsx b/libs/ui/stories/atoms/numeric-input.stories.tsx
index edaccc548e..7cf135fa1e 100644
--- a/libs/ui/stories/atoms/numeric-input.stories.tsx
+++ b/libs/ui/stories/atoms/numeric-input.stories.tsx
@@ -150,4 +150,4 @@ export const Controlled: Story = {
       </VariantContainer>
     )
   },
-}
\ No newline at end of file
+}
diff --git a/libs/ui/stories/atoms/tooltip.stories.tsx b/libs/ui/stories/atoms/tooltip.stories.tsx
index 6379e6c732..ec8c39bc71 100644
--- a/libs/ui/stories/atoms/tooltip.stories.tsx
+++ b/libs/ui/stories/atoms/tooltip.stories.tsx
@@ -168,9 +168,7 @@ export const RichContent: Story = {
           View and edit your profile settings
         </div>
         <div className="mt-3 flex gap-2">
-          <button className="rounded bg-primary px-2 py-1 text-xs">
-            Edit
-          </button>
+          <button className="rounded bg-primary px-2 py-1 text-xs">Edit</button>
           <button className="rounded bg-secondary px-2 py-1 text-xs">
             View
           </button>
diff --git a/libs/ui/stories/molecules/checkbox.stories.tsx b/libs/ui/stories/molecules/checkbox.stories.tsx
index 87a25c0522..ab333f870c 100644
--- a/libs/ui/stories/molecules/checkbox.stories.tsx
+++ b/libs/ui/stories/molecules/checkbox.stories.tsx
@@ -218,7 +218,9 @@ export const IndeterminateTest: Story = {
               <Checkbox
                 id={`item-${item.id}`}
                 checked={item.checked}
-                onCheckedChange={(checked) => handleChildChange(item.id, checked)}
+                onCheckedChange={(checked) =>
+                  handleChildChange(item.id, checked)
+                }
               />
               <label htmlFor={`item-${item.id}`}>{item.name}</label>
             </div>
diff --git a/libs/ui/stories/molecules/form-numeric-input.stories.tsx b/libs/ui/stories/molecules/form-numeric-input.stories.tsx
index 5998b998f2..9073e640bd 100644
--- a/libs/ui/stories/molecules/form-numeric-input.stories.tsx
+++ b/libs/ui/stories/molecules/form-numeric-input.stories.tsx
@@ -80,12 +80,37 @@ export const Basic: Story = {
     return (
       <VariantContainer>
         <div className="grid gap-4">
-          <FormNumericInput id="size-sm" label="Size sm" size="sm" hideControls={false} {...baseArgs} />
-          <FormNumericInput id="size-md" label="Size md" size="md" hideControls={false} {...baseArgs} />
-          <FormNumericInput id="size-lg" label="Size lg" size="lg" hideControls={false} {...baseArgs} />
+          <FormNumericInput
+            id="size-sm"
+            label="Size sm"
+            size="sm"
+            hideControls={false}
+            {...baseArgs}
+          />
+          <FormNumericInput
+            id="size-md"
+            label="Size md"
+            size="md"
+            hideControls={false}
+            {...baseArgs}
+          />
+          <FormNumericInput
+            id="size-lg"
+            label="Size lg"
+            size="lg"
+            hideControls={false}
+            {...baseArgs}
+          />
         </div>
         <div className="grid gap-4">
-          <FormNumericInput id="disabled" size="sm" label="Disabled" disabled hideControls={false} {...baseArgs} />
+          <FormNumericInput
+            id="disabled"
+            size="sm"
+            label="Disabled"
+            disabled
+            hideControls={false}
+            {...baseArgs}
+          />
           <FormNumericInput
             id="invalid-demo"
             size="sm"
@@ -95,7 +120,11 @@ export const Basic: Story = {
             onChange={(value) => setCurrentValue(value)}
             hideControls={false}
             validateStatus={currentValue === 10 ? 'error' : 'default'}
-            helpText={currentValue === 10 ? 'Value cannot be 10' : 'Enter a value other than 10'}
+            helpText={
+              currentValue === 10
+                ? 'Value cannot be 10'
+                : 'Enter a value other than 10'
+            }
           />
         </div>
       </VariantContainer>
@@ -116,11 +145,11 @@ export const WithDefaultValues: Story = {
           hideControls={false}
           helpText="Value must be between 10 and 20"
         />
-        <FormNumericInput 
+        <FormNumericInput
           id="custom-step"
-          label="Custom Step (5)" 
-          defaultValue={25} 
-          step={5} 
+          label="Custom Step (5)"
+          defaultValue={25}
+          step={5}
           hideControls={false}
           helpText="Increments by 5"
         />
@@ -244,12 +273,12 @@ export const FormExample: Story = {
   render: () => {
     const [quantity, setQuantity] = useState(1)
     const [price, setPrice] = useState(29.99)
-    
+
     return (
       <VariantContainer>
-        <form className="space-y-4 w-[20rem]">
-          <h3 className="text-lg font-semibold mb-4">Order Form</h3>
-          
+        <form className="w-[20rem] space-y-4">
+          <h3 className="mb-4 font-semibold text-lg">Order Form</h3>
+
           <FormNumericInput
             id="order-quantity"
             label="Quantity"
@@ -261,7 +290,7 @@ export const FormExample: Story = {
             hideControls={false}
             helpText="Minimum order quantity is 1"
           />
-          
+
           <FormNumericInput
             id="unit-price"
             label="Unit Price"
@@ -277,12 +306,13 @@ export const FormExample: Story = {
             }}
             helpText="Price per unit in USD"
           />
-          
-          <div className="pt-4 border-t">
-            <p className="text-sm text-gray-600">
-              Total: {new Intl.NumberFormat('en-US', {
+
+          <div className="border-t pt-4">
+            <p className="text-gray-600 text-sm">
+              Total:{' '}
+              {new Intl.NumberFormat('en-US', {
                 style: 'currency',
-                currency: 'USD'
+                currency: 'USD',
               }).format(quantity * price)}
             </p>
           </div>
@@ -290,4 +320,4 @@ export const FormExample: Story = {
       </VariantContainer>
     )
   },
-}
\ No newline at end of file
+}
diff --git a/libs/ui/stories/molecules/menu.stories.tsx b/libs/ui/stories/molecules/menu.stories.tsx
index 6d700931e2..a2f6085a08 100644
--- a/libs/ui/stories/molecules/menu.stories.tsx
+++ b/libs/ui/stories/molecules/menu.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import React from 'react'
 import { Menu, type MenuItem } from '../../src/molecules/menu'
 
 const meta: Meta<typeof Menu> = {
@@ -26,11 +25,26 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 const basicItems: MenuItem[] = [
-  { type: 'action', value: 'new-file', label: 'New File', icon: 'token-icon-plus' },
-  { type: 'action', value: 'open', label: 'Open...', icon: 'token-icon-folder' },
+  {
+    type: 'action',
+    value: 'new-file',
+    label: 'New File',
+    icon: 'token-icon-plus',
+  },
+  {
+    type: 'action',
+    value: 'open',
+    label: 'Open...',
+    icon: 'token-icon-folder',
+  },
   { type: 'separator', id: 'separator-1' },
   { type: 'action', value: 'save', label: 'Save', icon: 'token-icon-save' },
-  { type: 'action', value: 'save-as', label: 'Save As...', icon: 'token-icon-save' },
+  {
+    type: 'action',
+    value: 'save-as',
+    label: 'Save As...',
+    icon: 'token-icon-save',
+  },
   { type: 'separator', id: 'separator-2' },
   { type: 'action', value: 'exit', label: 'Exit', icon: 'token-icon-close' },
 ]
@@ -69,11 +83,27 @@ export const WithCustomPositioning: Story = {
 }
 
 const itemsWithDisabled: MenuItem[] = [
-  { type: 'action', value: 'cut', label: 'Cut', icon: 'icon-[mdi--content-cut]' },
+  {
+    type: 'action',
+    value: 'cut',
+    label: 'Cut',
+    icon: 'icon-[mdi--content-cut]',
+  },
   { type: 'action', value: 'copy', label: 'Copy', icon: 'token-icon-copy' },
-  { type: 'action', value: 'paste', label: 'Paste', icon: 'token-icon-clipboard', disabled: true },
+  {
+    type: 'action',
+    value: 'paste',
+    label: 'Paste',
+    icon: 'token-icon-clipboard',
+    disabled: true,
+  },
   { type: 'separator', id: 'separator' },
-  { type: 'action', value: 'delete', label: 'Delete', icon: 'token-icon-trash' },
+  {
+    type: 'action',
+    value: 'delete',
+    label: 'Delete',
+    icon: 'token-icon-trash',
+  },
 ]
 
 export const WithDisabledItems: Story = {
@@ -89,7 +119,12 @@ const contextMenuItems: MenuItem[] = [
   { type: 'separator', id: 'separator-1' },
   { type: 'action', value: 'cut', label: 'Cut', icon: 'token-icon-scissors' },
   { type: 'action', value: 'copy', label: 'Copy', icon: 'token-icon-copy' },
-  { type: 'action', value: 'paste', label: 'Paste', icon: 'token-icon-clipboard' },
+  {
+    type: 'action',
+    value: 'paste',
+    label: 'Paste',
+    icon: 'token-icon-clipboard',
+  },
   { type: 'separator', id: 'separator-2' },
   { type: 'action', value: 'select-all', label: 'Select All' },
 ]
@@ -105,7 +140,7 @@ export const CustomTrigger: Story = {
   args: {
     items: basicItems,
     customTrigger: (
-      <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
+      <button className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
         Custom Trigger
       </button>
     ),
@@ -117,29 +152,59 @@ export const WithSelectHandler: Story = {
     items: basicItems,
     triggerText: 'Actions',
     onSelect: (details: { value: string }) => {
-      console.log('Selected:', details.value)
       alert(`You selected: ${details.value}`)
     },
   },
 }
 
 const viewMenuItems: MenuItem[] = [
-  { type: 'checkbox', value: 'show-sidebar', label: 'Show Sidebar', checked: true },
-  { type: 'checkbox', value: 'show-toolbar', label: 'Show Toolbar', checked: true },
-  { type: 'checkbox', value: 'show-statusbar', label: 'Show Status Bar', checked: false },
+  {
+    type: 'checkbox',
+    value: 'show-sidebar',
+    label: 'Show Sidebar',
+    checked: true,
+  },
+  {
+    type: 'checkbox',
+    value: 'show-toolbar',
+    label: 'Show Toolbar',
+    checked: true,
+  },
+  {
+    type: 'checkbox',
+    value: 'show-statusbar',
+    label: 'Show Status Bar',
+    checked: false,
+  },
   { type: 'separator', id: 'separator-1' },
-  { type: 'radio', value: 'list-view', label: 'List View', name: 'view-mode', checked: true },
-  { type: 'radio', value: 'grid-view', label: 'Grid View', name: 'view-mode', checked: false },
-  { type: 'radio', value: 'detail-view', label: 'Detail View', name: 'view-mode', checked: false },
+  {
+    type: 'radio',
+    value: 'list-view',
+    label: 'List View',
+    name: 'view-mode',
+    checked: true,
+  },
+  {
+    type: 'radio',
+    value: 'grid-view',
+    label: 'Grid View',
+    name: 'view-mode',
+    checked: false,
+  },
+  {
+    type: 'radio',
+    value: 'detail-view',
+    label: 'Detail View',
+    name: 'view-mode',
+    checked: false,
+  },
 ]
 
 export const WithOptionsMenu: Story = {
   args: {
     items: viewMenuItems,
     triggerText: 'View',
-    onCheckedChange: (item: MenuItem, checked: boolean) => {
-      console.log('Option changed:', (item as any).value, 'checked:', checked)
-    },
+    onCheckedChange: (_item: MenuItem, _checked: boolean) => {},
   },
 }
 
@@ -153,7 +218,8 @@ export const KeyboardNavigation: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Use arrow keys to navigate, Enter to select, and type to search',
+        story:
+          'Use arrow keys to navigate, Enter to select, and type to search',
       },
     },
   },
@@ -170,27 +236,81 @@ const positioningItems: MenuItem[] = [
 export const DifferentPlacements: Story = {
   render: () => (
     <div className="grid grid-cols-2 gap-16 p-20">
-      <Menu items={positioningItems} triggerText="Top" positioning={{ placement: 'top' }} />
-      <Menu items={positioningItems} triggerText="Right" positioning={{ placement: 'right' }} />
-      <Menu items={positioningItems} triggerText="Bottom" positioning={{ placement: 'bottom' }} />
-      <Menu items={positioningItems} triggerText="Left" positioning={{ placement: 'left' }} />
+      <Menu
+        items={positioningItems}
+        triggerText="Top"
+        positioning={{ placement: 'top' }}
+      />
+      <Menu
+        items={positioningItems}
+        triggerText="Right"
+        positioning={{ placement: 'right' }}
+      />
+      <Menu
+        items={positioningItems}
+        triggerText="Bottom"
+        positioning={{ placement: 'bottom' }}
+      />
+      <Menu
+        items={positioningItems}
+        triggerText="Left"
+        positioning={{ placement: 'left' }}
+      />
     </div>
   ),
 }
 
 // Story pro mixed content
 const mixedContentItems: MenuItem[] = [
-  { type: 'action', value: 'profile', label: 'My Profile', icon: 'token-icon-user' },
-  { type: 'action', value: 'settings', label: 'Settings', icon: 'token-icon-settings' },
+  {
+    type: 'action',
+    value: 'profile',
+    label: 'My Profile',
+    icon: 'token-icon-user',
+  },
+  {
+    type: 'action',
+    value: 'settings',
+    label: 'Settings',
+    icon: 'token-icon-settings',
+  },
   { type: 'separator', id: 'sep-1' },
-  { type: 'checkbox', value: 'notifications', label: 'Enable Notifications', checked: true },
+  {
+    type: 'checkbox',
+    value: 'notifications',
+    label: 'Enable Notifications',
+    checked: true,
+  },
   { type: 'checkbox', value: 'sounds', label: 'Enable Sounds', checked: false },
   { type: 'separator', id: 'sep-2' },
-  { type: 'radio', value: 'light', label: 'Light Theme', name: 'theme', checked: true },
-  { type: 'radio', value: 'dark', label: 'Dark Theme', name: 'theme', checked: false },
-  { type: 'radio', value: 'system', label: 'System Theme', name: 'theme', checked: false },
+  {
+    type: 'radio',
+    value: 'light',
+    label: 'Light Theme',
+    name: 'theme',
+    checked: true,
+  },
+  {
+    type: 'radio',
+    value: 'dark',
+    label: 'Dark Theme',
+    name: 'theme',
+    checked: false,
+  },
+  {
+    type: 'radio',
+    value: 'system',
+    label: 'System Theme',
+    name: 'theme',
+    checked: false,
+  },
   { type: 'separator', id: 'sep-3' },
-  { type: 'action', value: 'logout', label: 'Logout', icon: 'token-icon-logout' },
+  {
+    type: 'action',
+    value: 'logout',
+    label: 'Logout',
+    icon: 'token-icon-logout',
+  },
 ]
 
 export const ComplexMenu: Story = {
@@ -225,8 +345,18 @@ export const ScrollableMenu: Story = {
 
 // Story pro nested menu
 const nestedMenuItems: MenuItem[] = [
-  { type: 'action', value: 'new-file', label: 'New File', icon: 'token-icon-plus' },
-  { type: 'action', value: 'open', label: 'Open...', icon: 'token-icon-folder' },
+  {
+    type: 'action',
+    value: 'new-file',
+    label: 'New File',
+    icon: 'token-icon-plus',
+  },
+  {
+    type: 'action',
+    value: 'open',
+    label: 'Open...',
+    icon: 'token-icon-folder',
+  },
   { type: 'separator', id: 'sep-1' },
   {
     type: 'submenu',
@@ -248,8 +378,18 @@ const nestedMenuItems: MenuItem[] = [
     label: 'Share',
     icon: 'token-icon-share',
     items: [
-      { type: 'action', value: 'email', label: 'Email', icon: 'token-icon-email' },
-      { type: 'action', value: 'link', label: 'Copy Link', icon: 'token-icon-link' },
+      {
+        type: 'action',
+        value: 'email',
+        label: 'Email',
+        icon: 'token-icon-email',
+      },
+      {
+        type: 'action',
+        value: 'link',
+        label: 'Copy Link',
+        icon: 'token-icon-link',
+      },
       { type: 'separator', id: 'sep-share' },
       {
         type: 'submenu',
@@ -264,7 +404,12 @@ const nestedMenuItems: MenuItem[] = [
       },
     ],
   },
-  { type: 'action', value: 'print', label: 'Print...', icon: 'token-icon-print' },
+  {
+    type: 'action',
+    value: 'print',
+    label: 'Print...',
+    icon: 'token-icon-print',
+  },
   { type: 'separator', id: 'sep-3' },
   { type: 'action', value: 'exit', label: 'Exit', icon: 'token-icon-close' },
 ]
@@ -273,14 +418,13 @@ export const NestedMenu: Story = {
   args: {
     items: nestedMenuItems,
     triggerText: 'File',
-    onSelect: (details: { value: string }) => {
-      console.log('Selected from nested menu:', details.value)
-    },
+    onSelect: (_details: { value: string }) => {},
   },
   parameters: {
     docs: {
       description: {
-        story: 'Menu with nested submenus. Supports multiple levels of nesting.',
+        story:
+          'Menu with nested submenus. Supports multiple levels of nesting.',
       },
     },
   },
@@ -382,14 +526,14 @@ export const CategoryMenu: Story = {
     triggerText: 'Shop by Category',
     triggerIcon: 'token-icon-grid',
     onSelect: (details: { value: string }) => {
-      console.log('Selected category:', details.value)
       alert(`Navigate to category: ${details.value}`)
     },
   },
   parameters: {
     docs: {
       description: {
-        story: 'Complex nested menu structure suitable for e-commerce categories with multiple levels of hierarchy.',
+        story:
+          'Complex nested menu structure suitable for e-commerce categories with multiple levels of hierarchy.',
       },
     },
   },
@@ -397,7 +541,12 @@ export const CategoryMenu: Story = {
 
 // Story pro mixed nested menu with options
 const mixedNestedItems: MenuItem[] = [
-  { type: 'action', value: 'dashboard', label: 'Dashboard', icon: 'token-icon-home' },
+  {
+    type: 'action',
+    value: 'dashboard',
+    label: 'Dashboard',
+    icon: 'token-icon-home',
+  },
   { type: 'separator', id: 'sep-1' },
   {
     type: 'submenu',
@@ -405,17 +554,45 @@ const mixedNestedItems: MenuItem[] = [
     label: 'View',
     icon: 'token-icon-eye',
     items: [
-      { type: 'checkbox', value: 'show-sidebar', label: 'Show Sidebar', checked: true },
-      { type: 'checkbox', value: 'show-toolbar', label: 'Show Toolbar', checked: true },
+      {
+        type: 'checkbox',
+        value: 'show-sidebar',
+        label: 'Show Sidebar',
+        checked: true,
+      },
+      {
+        type: 'checkbox',
+        value: 'show-toolbar',
+        label: 'Show Toolbar',
+        checked: true,
+      },
       { type: 'separator', id: 'sep-view' },
       {
         type: 'submenu',
         value: 'theme',
         label: 'Theme',
         items: [
-          { type: 'radio', value: 'light', label: 'Light', name: 'theme', checked: true },
-          { type: 'radio', value: 'dark', label: 'Dark', name: 'theme', checked: false },
-          { type: 'radio', value: 'system', label: 'System', name: 'theme', checked: false },
+          {
+            type: 'radio',
+            value: 'light',
+            label: 'Light',
+            name: 'theme',
+            checked: true,
+          },
+          {
+            type: 'radio',
+            value: 'dark',
+            label: 'Dark',
+            name: 'theme',
+            checked: false,
+          },
+          {
+            type: 'radio',
+            value: 'system',
+            label: 'System',
+            name: 'theme',
+            checked: false,
+          },
         ],
       },
       {
@@ -423,9 +600,27 @@ const mixedNestedItems: MenuItem[] = [
         value: 'layout',
         label: 'Layout',
         items: [
-          { type: 'radio', value: 'comfortable', label: 'Comfortable', name: 'layout', checked: true },
-          { type: 'radio', value: 'compact', label: 'Compact', name: 'layout', checked: false },
-          { type: 'radio', value: 'spacious', label: 'Spacious', name: 'layout', checked: false },
+          {
+            type: 'radio',
+            value: 'comfortable',
+            label: 'Comfortable',
+            name: 'layout',
+            checked: true,
+          },
+          {
+            type: 'radio',
+            value: 'compact',
+            label: 'Compact',
+            name: 'layout',
+            checked: false,
+          },
+          {
+            type: 'radio',
+            value: 'spacious',
+            label: 'Spacious',
+            name: 'layout',
+            checked: false,
+          },
         ],
       },
     ],
@@ -436,10 +631,25 @@ const mixedNestedItems: MenuItem[] = [
     label: 'Tools',
     icon: 'token-icon-settings',
     items: [
-      { type: 'action', value: 'import', label: 'Import Data...', icon: 'token-icon-download' },
-      { type: 'action', value: 'export', label: 'Export Data...', icon: 'token-icon-upload' },
+      {
+        type: 'action',
+        value: 'import',
+        label: 'Import Data...',
+        icon: 'token-icon-download',
+      },
+      {
+        type: 'action',
+        value: 'export',
+        label: 'Export Data...',
+        icon: 'token-icon-upload',
+      },
       { type: 'separator', id: 'sep-tools' },
-      { type: 'action', value: 'preferences', label: 'Preferences...', icon: 'token-icon-settings' },
+      {
+        type: 'action',
+        value: 'preferences',
+        label: 'Preferences...',
+        icon: 'token-icon-settings',
+      },
     ],
   },
   { type: 'separator', id: 'sep-2' },
@@ -450,18 +660,15 @@ export const MixedNestedMenu: Story = {
   args: {
     items: mixedNestedItems,
     triggerText: 'Application',
-    onSelect: (details: { value: string }) => {
-      console.log('Action selected:', details.value)
-    },
-    onCheckedChange: (item: MenuItem, checked: boolean) => {
-      console.log('Option changed:', (item as any).value, 'checked:', checked)
-    },
+    onSelect: (_details: { value: string }) => {},
+    onCheckedChange: (_item: MenuItem, _checked: boolean) => {},
   },
   parameters: {
     docs: {
       description: {
-        story: 'Nested menu with mixed content types including checkboxes and radio buttons in submenus.',
+        story:
+          'Nested menu with mixed content types including checkboxes and radio buttons in submenus.',
       },
     },
   },
-}
\ No newline at end of file
+}
diff --git a/libs/ui/stories/molecules/popover.stories.tsx b/libs/ui/stories/molecules/popover.stories.tsx
index cf199a7763..443e1c6f28 100644
--- a/libs/ui/stories/molecules/popover.stories.tsx
+++ b/libs/ui/stories/molecules/popover.stories.tsx
@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { useState } from 'react'
-import { Popover } from '../../src/molecules/popover'
 import { Button } from '../../src/atoms/button'
+import { Icon } from '../../src/atoms/icon'
 import { Input } from '../../src/atoms/input'
 import { Label } from '../../src/atoms/label'
-import { Icon } from '../../src/atoms/icon'
+import { Popover } from '../../src/molecules/popover'
 
 const meta = {
   title: 'Molecules/Popover',
@@ -81,7 +81,7 @@ export const DifferentSizes: Story = {
           <p className="text-xs">Small content</p>
         </div>
       </Popover>
-      
+
       <Popover
         trigger="Medium"
         size="md"
@@ -92,7 +92,7 @@ export const DifferentSizes: Story = {
           <p>Medium content</p>
         </div>
       </Popover>
-      
+
       <Popover
         trigger="Large"
         size="lg"
@@ -119,7 +119,7 @@ export const DifferentPlacements: Story = {
       <Popover trigger="Top End" placement="top-end">
         <div className="w-32">Top End</div>
       </Popover>
-      
+
       <Popover trigger="Left" placement="left">
         <div className="w-32">Left</div>
       </Popover>
@@ -131,7 +131,7 @@ export const DifferentPlacements: Story = {
       <Popover trigger="Right" placement="right">
         <div className="w-32">Right</div>
       </Popover>
-      
+
       <Popover trigger="Bottom Start" placement="bottom-start">
         <div className="w-32">Bottom Start</div>
       </Popover>
@@ -148,7 +148,7 @@ export const DifferentPlacements: Story = {
 export const Controlled: Story = {
   render: () => {
     const [open, setOpen] = useState(false)
-    
+
     return (
       <div className="flex flex-col items-center gap-4">
         <div className="flex gap-2">
@@ -159,7 +159,7 @@ export const Controlled: Story = {
             Close Popover
           </Button>
         </div>
-        
+
         <Popover
           trigger="Controlled Popover"
           open={open}
@@ -169,9 +169,9 @@ export const Controlled: Story = {
         >
           <div className="mt-4">
             <p>The popover is {open ? 'open' : 'closed'}.</p>
-            <Button 
-              onClick={() => setOpen(false)} 
-              size="sm" 
+            <Button
+              onClick={() => setOpen(false)}
+              size="sm"
               variant="secondary"
               className="mt-2"
             >
@@ -192,14 +192,27 @@ export const WithForm: Story = {
       <form className="mt-4 space-y-4">
         <div>
           <Label htmlFor="name">Name</Label>
-          <Input size='sm' className='px-2 py-2' id="name" placeholder="Enter your name" />
+          <Input
+            size="sm"
+            className="px-2 py-2"
+            id="name"
+            placeholder="Enter your name"
+          />
         </div>
         <div>
           <Label htmlFor="email">Email</Label>
-          <Input size='sm' className='px-2 py-2' id="email" type="email" placeholder="Enter your email" />
+          <Input
+            size="sm"
+            className="px-2 py-2"
+            id="email"
+            type="email"
+            placeholder="Enter your email"
+          />
         </div>
         <div className="flex gap-2">
-          <Button type="submit" size="sm">Save</Button>
+          <Button type="submit" size="sm">
+            Save
+          </Button>
         </div>
       </form>
     ),
@@ -222,11 +235,11 @@ export const CustomTrigger: Story = {
           <p>This popover uses a custom trigger with an icon.</p>
         </div>
       </Popover>
-      
+
       <Popover
         trigger={
-          <div className="p-2 border-2 border-dashed border-border rounded-lg">
-            <p className="text-sm text-muted">Click this custom area</p>
+          <div className="rounded-lg border-2 border-border border-dashed p-2">
+            <p className="text-muted text-sm">Click this custom area</p>
           </div>
         }
         triggerClassName="hover:border-primary focus:border-primary"
@@ -256,13 +269,16 @@ export const Modal: Story = {
     trigger: 'Open Modal Popover',
     modal: true,
     title: 'Modal Popover',
-    description: 'This popover acts as a modal - it traps focus and blocks interactions outside.',
+    description:
+      'This popover acts as a modal - it traps focus and blocks interactions outside.',
     showCloseButton: true,
     closeOnInteractOutside: false,
     children: (
       <div className="mt-4">
         <p>Try clicking outside - it won't close!</p>
-        <p className="mt-2 text-sm text-muted">Press Escape or use the close button to dismiss.</p>
+        <p className="mt-2 text-muted text-sm">
+          Press Escape or use the close button to dismiss.
+        </p>
       </div>
     ),
   },
@@ -272,18 +288,18 @@ export const AsyncContent: Story = {
   render: () => {
     const [loading, setLoading] = useState(false)
     const [data, setData] = useState<string | null>(null)
-    
+
     const loadData = async () => {
       setLoading(true)
       setData(null)
-      
+
       // Simulate API call
-      await new Promise(resolve => setTimeout(resolve, 1500))
-      
+      await new Promise((resolve) => setTimeout(resolve, 1500))
+
       setData('Data loaded successfully!')
       setLoading(false)
     }
-    
+
     return (
       <Popover
         trigger="Load Async Content"
@@ -293,15 +309,24 @@ export const AsyncContent: Story = {
           }
         }}
       >
-        <div className="w-64 min-h-[100px] flex items-center justify-center">
+        <div className="flex min-h-[100px] w-64 items-center justify-center">
           {loading ? (
             <div className="flex items-center gap-2">
-              <Icon icon="token-icon-spinner" size="sm" className="animate-spin" />
+              <Icon
+                icon="token-icon-spinner"
+                size="sm"
+                className="animate-spin"
+              />
               <span>Loading...</span>
             </div>
           ) : data ? (
             <div className="text-center">
-              <Icon icon="token-icon-check" size="lg" color="success" className="mx-auto mb-2" />
+              <Icon
+                icon="token-icon-check"
+                size="lg"
+                color="success"
+                className="mx-auto mb-2"
+              />
               <p>{data}</p>
             </div>
           ) : (
@@ -315,14 +340,10 @@ export const AsyncContent: Story = {
 
 export const NestedPopovers: Story = {
   render: () => (
-    <Popover
-      trigger="Level 1"
-      title="First Level"
-      placement="bottom"
-    >
+    <Popover trigger="Level 1" title="First Level" placement="bottom">
       <div className="mt-4 space-y-4">
         <p>This is the first level popover.</p>
-        
+
         <Popover
           trigger="Open Level 2"
           title="Second Level"
@@ -331,7 +352,7 @@ export const NestedPopovers: Story = {
         >
           <div className="mt-4 space-y-4">
             <p className="text-sm">This is nested inside the first popover.</p>
-            
+
             <Popover
               trigger="Open Level 3"
               title="Third Level"
@@ -355,20 +376,20 @@ export const LongContent: Story = {
     title: 'Detailed Information',
     showCloseButton: true,
     children: (
-      <div className="mt-4 max-h-96 overflow-y-auto space-y-4">
+      <div className="mt-4 max-h-96 space-y-4 overflow-y-auto">
         <p>This popover contains a lot of content that might need scrolling.</p>
-        
+
         {Array.from({ length: 10 }, (_, i) => (
-          <div key={i} className="p-3 bg-muted rounded">
+          <div key={i} className="rounded bg-muted p-3">
             <h4 className="font-semibold">Section {i + 1}</h4>
-            <p className="text-sm mt-1">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-              Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            <p className="mt-1 text-sm">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
             </p>
           </div>
         ))}
-        
-        <p className="text-sm text-muted">End of content</p>
+
+        <p className="text-muted text-sm">End of content</p>
       </div>
     ),
   },
@@ -381,10 +402,10 @@ export const NonPortalled: Story = {
     children: (
       <div className="w-64">
         <p>This popover is rendered in place, not in a portal.</p>
-        <p className="text-sm text-muted mt-2">
+        <p className="mt-2 text-muted text-sm">
           Useful when you need the popover to be clipped by a parent container.
         </p>
       </div>
     ),
   },
-}
\ No newline at end of file
+}
diff --git a/libs/ui/stories/molecules/steps.stories.tsx b/libs/ui/stories/molecules/steps.stories.tsx
index 97e60c2c3f..6e70610ef3 100644
--- a/libs/ui/stories/molecules/steps.stories.tsx
+++ b/libs/ui/stories/molecules/steps.stories.tsx
@@ -1,8 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { useState } from 'react'
-import { Steps } from '../../src/molecules/steps'
 import { Select } from '../../src/molecules/select'
-import { Button } from '../../src/atoms/button'
+import { Steps } from '../../src/molecules/steps'
 
 const meta: Meta<typeof Steps> = {
   title: 'Molecules/Steps',
@@ -133,10 +132,10 @@ const stepsWithCustomContent = [
     value: 0,
     title: 'Account',
     content: (
-      <div className="p-4 rounded-lg">
-        <h3 className="text-lg font-semibold mb-2">Create your account</h3>
+      <div className="rounded-lg p-4">
+        <h3 className="mb-2 font-semibold text-lg">Create your account</h3>
         <p>This is custom content for the account step.</p>
-        <button className="mt-4 px-4 py-2 bg-blue-500 text-white rounded">
+        <button className="mt-4 rounded bg-blue-500 px-4 py-2 text-white">
           Custom Action
         </button>
       </div>
@@ -151,11 +150,18 @@ const stepsWithCustomContent = [
     value: 2,
     title: 'Settings',
     content: (
-      <div className="p-4 border border-gray-200 rounded">
+      <div className="rounded border border-gray-200 p-4">
         <h3 className="font-semibold">Custom Settings Form</h3>
-        <label className="block mt-2">
+        <label className="mt-2 block">
           <span className="text-gray-700">Preference</span>
-          <Select label="options" options={[{label: "first", value:"first"}, {label: "second", value: "second"}]} size='xs' />
+          <Select
+            label="options"
+            options={[
+              { label: 'first', value: 'first' },
+              { label: 'second', value: 'second' },
+            ]}
+            size="xs"
+          />
         </label>
       </div>
     ),
diff --git a/libs/ui/stories/molecules/toast.stories.tsx b/libs/ui/stories/molecules/toast.stories.tsx
index ef649283da..db7402096d 100644
--- a/libs/ui/stories/molecules/toast.stories.tsx
+++ b/libs/ui/stories/molecules/toast.stories.tsx
@@ -288,19 +288,19 @@ export const PauseResumeExample: Story = {
 
             {toastId && (
               <Button
-                  size="sm"
-                  variant="secondary"
-                  onClick={() => {
-                    if (isPaused) {
-                      toaster.resume(toastId)
-                    } else {
-                      toaster.pause(toastId)
-                    }
-                    setIsPaused(!isPaused)
-                  }}
-                >
-                  {isPaused ? 'Resume Timer' : 'Pause Timer'}
-                </Button>
+                size="sm"
+                variant="secondary"
+                onClick={() => {
+                  if (isPaused) {
+                    toaster.resume(toastId)
+                  } else {
+                    toaster.pause(toastId)
+                  }
+                  setIsPaused(!isPaused)
+                }}
+              >
+                {isPaused ? 'Resume Timer' : 'Pause Timer'}
+              </Button>
             )}
           </div>
 
diff --git a/libs/ui/stories/molecules/tree-view.stories.tsx b/libs/ui/stories/molecules/tree-view.stories.tsx
index 7c73e8b65d..418779b62d 100644
--- a/libs/ui/stories/molecules/tree-view.stories.tsx
+++ b/libs/ui/stories/molecules/tree-view.stories.tsx
@@ -457,8 +457,7 @@ export const TypeaheadDebugDemo: Story = {
       { id: 'beta', name: 'Beta' },
       { id: 'gamma', name: 'Gamma' },
     ]
-    const handleKeyDown = (_e: React.KeyboardEvent<HTMLDivElement>) => {
-    }
+    const handleKeyDown = (_e: React.KeyboardEvent<HTMLDivElement>) => {}
 
     return (
       <div className="space-y-4">
diff --git a/libs/ui/stories/overview/color-palette.stories.tsx b/libs/ui/stories/overview/color-palette.stories.tsx
index c7b736dac2..2c0eefeaa7 100644
--- a/libs/ui/stories/overview/color-palette.stories.tsx
+++ b/libs/ui/stories/overview/color-palette.stories.tsx
@@ -15,7 +15,7 @@ type Story = StoryObj
 
 const semanticColors = [
   'primary',
-  'secondary', 
+  'secondary',
   'tertiary',
   'info',
   'success',
@@ -35,68 +35,70 @@ const stateVariants = [
   { state: 'disabled', label: 'Disabled' },
 ] as const
 
-
-
 export const Default: Story = {
   render: () => (
     <div className="min-h-screen bg-base p-8">
-      <div className="max-w-7xl mx-auto">
-        
-        <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
-          {semanticColors.map(color => (
-            <div className="bg-surface rounded-xl shadow-lg p-6">
-            <h3 className="text-lg font-semibold mb-4 capitalize text-fg-primary">
-              {color}
-            </h3>
-      
-      <div className="space-y-6">
-        {colorVariants.map(({ suffix, label }) => (
-          <div key={suffix}>
-            <h4 className="text-sm font-medium text-fg-secondary mb-3">
-              {label}
-            </h4>
-            <div className="grid grid-cols-4 gap-4">
-              {stateVariants.map(({ state, label: stateLabel }) => {
-                const baseColorVar = `--color-${color}${suffix}`
-                const computedColor = state === 'disabled' 
-                  ? `var(--color-${color}${suffix}-disabled)`
-                  : state !== ''
-                  ? `oklch(from var(${baseColorVar}) calc(l + var(--state-${state})) c h)`
-                  : `var(${baseColorVar})`
+      <div className="mx-auto max-w-7xl">
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+          {semanticColors.map((color) => (
+            <div className="rounded-xl bg-surface p-6 shadow-lg">
+              <h3 className="mb-4 font-semibold text-fg-primary text-lg capitalize">
+                {color}
+              </h3>
 
-                const colorTokenName = state === 'disabled' 
-                  ? `--color-${color}${suffix}-disabled`
-                  : state !== ''
-                  ? `--color-${color}${suffix}-${state}`
-                  : `--color-${color}${suffix}`
+              <div className="space-y-6">
+                {colorVariants.map(({ suffix, label }) => (
+                  <div key={suffix}>
+                    <h4 className="mb-3 font-medium text-fg-secondary text-sm">
+                      {label}
+                    </h4>
+                    <div className="grid grid-cols-4 gap-4">
+                      {stateVariants.map(({ state, label: stateLabel }) => {
+                        const baseColorVar = `--color-${color}${suffix}`
+                        const computedColor =
+                          state === 'disabled'
+                            ? `var(--color-${color}${suffix}-disabled)`
+                            : state !== ''
+                              ? `oklch(from var(${baseColorVar}) calc(l + var(--state-${state})) c h)`
+                              : `var(${baseColorVar})`
 
-                return (
-                  <div key={state} className="flex flex-col items-center gap-2 min-w-0">
-                    <div className='h-16 w-16 flex-shrink-0'>
-                      <ColorSelect
-                        color={computedColor}
-                        size='full'
-                        radius='md'
-                      />
-                    </div>
-                    <div className="text-center w-full">
-                      <div className="text-xs font-medium text-fg-primary truncate">
-                        {state || 'Default'}
-                      </div>
-                      <div className="text-xs font-mono text-fg-secondary mt-1 break-all leading-tight">
-                        {colorTokenName}
-                      </div>
+                        const colorTokenName =
+                          state === 'disabled'
+                            ? `--color-${color}${suffix}-disabled`
+                            : state !== ''
+                              ? `--color-${color}${suffix}-${state}`
+                              : `--color-${color}${suffix}`
+
+                        return (
+                          <div
+                            key={state}
+                            className="flex min-w-0 flex-col items-center gap-2"
+                          >
+                            <div className="h-16 w-16 flex-shrink-0">
+                              <ColorSelect
+                                color={computedColor}
+                                size="full"
+                                radius="md"
+                              />
+                            </div>
+                            <div className="w-full text-center">
+                              <div className="truncate font-medium text-fg-primary text-xs">
+                                {state || 'Default'}
+                              </div>
+                              <div className="mt-1 break-all font-mono text-fg-secondary text-xs leading-tight">
+                                {colorTokenName}
+                              </div>
+                            </div>
+                          </div>
+                        )
+                      })}
                     </div>
                   </div>
-                )
-              })}
+                ))}
+              </div>
             </div>
-          </div>
-        ))}
-      </div>
-    </div>
           ))}
-        </div>        
+        </div>
       </div>
     </div>
   ),
diff --git a/libs/ui/stories/templates/comprehensive-form.stories.tsx b/libs/ui/stories/templates/comprehensive-form.stories.tsx
index 7f553dde73..e171d28694 100644
--- a/libs/ui/stories/templates/comprehensive-form.stories.tsx
+++ b/libs/ui/stories/templates/comprehensive-form.stories.tsx
@@ -4,14 +4,14 @@ import { VariantContainer, VariantGroup } from '../../.storybook/decorator'
 import { ErrorText } from '../../src/atoms/error-text'
 import { ExtraText } from '../../src/atoms/extra-text'
 import { Label } from '../../src/atoms/label'
+import { NumericInput } from '../../src/atoms/numeric-input'
 import { Textarea } from '../../src/atoms/textarea'
 import { Combobox } from '../../src/molecules/combobox'
 import { FormCheckbox } from '../../src/molecules/form-checkbox'
 import { FormInput } from '../../src/molecules/form-input'
-import { NumericInput } from '../../src/atoms/numeric-input'
+import { RangeSlider } from '../../src/molecules/range-slider'
 import { Select } from '../../src/molecules/select'
 import { Switch } from '../../src/molecules/switch'
-import {RangeSlider} from '../../src/molecules/range-slider'
 
 const meta: Meta = {
   title: 'Templates/Comprehensive Form',

From 2b8fa55704df683a8c70a7f8a2fe29c792ba82d2 Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Thu, 4 Sep 2025 04:02:34 +0200
Subject: [PATCH 23/44] refactor(ui/tokens): remove deprecated spacing aliases

---
 libs/ui/src/tokens/_spacing.css | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/libs/ui/src/tokens/_spacing.css b/libs/ui/src/tokens/_spacing.css
index c44ab05de9..675580caee 100644
--- a/libs/ui/src/tokens/_spacing.css
+++ b/libs/ui/src/tokens/_spacing.css
@@ -19,15 +19,4 @@
   --spacing-850: clamp(5.625rem, 5.4076rem + 1.087vw, 6.25rem);
   --spacing-900: clamp(6.1875rem, 5.9484rem + 1.1957vw, 6.875rem);
   --spacing-950: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);
-
-  /* Legacy aliases for backward compatibility */
-  --spacing-3xs: var(--spacing-100); /* 4px */
-  --spacing-2xs: var(--spacing-150); /* 8px */
-  --spacing-xs: var(--spacing-200); /* 12px */
-  --spacing-sm: var(--spacing-250); /* 16px */
-  --spacing-md: var(--spacing-350); /* 24px */
-  --spacing-lg: var(--spacing-450); /* 32px */
-  --spacing-xl: var(--spacing-600); /* 48px */
-  --spacing-2xl: var(--spacing-750); /* 64px */
-  --spacing-3xl: var(--spacing-950); /* 96px */
 }

From d875d528a7bd6eb19c67bea0116532c2d8e89d8a Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Thu, 4 Sep 2025 04:16:44 +0200
Subject: [PATCH 24/44] refactor: eliminate duplicates between CLAUDE.md and  
 token-contribution.md

---
 libs/ui/CLAUDE.md             | 130 ++++------------------------------
 libs/ui/token-contribution.md | 124 ++++++++++++++++++++++++++------
 2 files changed, 113 insertions(+), 141 deletions(-)

diff --git a/libs/ui/CLAUDE.md b/libs/ui/CLAUDE.md
index a8ca16781b..36e2a8b74f 100644
--- a/libs/ui/CLAUDE.md
+++ b/libs/ui/CLAUDE.md
@@ -44,134 +44,28 @@ libs/ui/src/
 
 5. **Story Creation** covering all variants and states
 
-## Token System Rules (MANDATORY)
+## Token System Rules
 
-### Token File Structure
+See comprehensive token documentation in [`token-contribution.md`](./token-contribution.md)
 
-**ALL component token files MUST follow this exact structure:**
+### Key Points:
+- **Two-layer token strategy**: Reference layer → Derived tokens
+- **Strict naming conventions**: `--[prefix]-[component]-[part?]-[property]-[state?]`
+- **Required suffixes**: All colors must have `-bg`, `-fg`, or `-border`
+- **No abbreviations**: Use full names (`button` not `btn`)
+- **Validation tools**: Run `pnpm validate:tokens` to check compliance
 
-```css
-/* Only for opacity values or calculations */
-:root {
-  --opacity-component-specific: 50%;
-}
-
-@theme static {
-  /* === BASE COLOR MAPPING === */
-  /* Reference layer - single source of truth for theming */
-  --color-component-primary: var(--color-primary);
-  --color-component-secondary: var(--color-secondary);
-  --color-component-base: var(--color-surface);
-  
-  /* === DERIVED COLORS === */
-  /* Background colors - using reference layer */
-  --color-component-bg: var(--color-component-base);
-  --color-component-bg-primary: var(--color-component-primary);
-  
-  /* Foreground colors */
-  --color-component-fg: var(--color-fg-primary);
-  --color-component-fg-primary: var(--color-fg-reverse);
-  
-  /* Border colors */
-  --color-component-border: var(--color-border-primary);
-  --color-component-border-primary: var(--color-component-primary);
-  
-  /* === STATE VARIATIONS === */
-  --color-component-bg-hover: oklch(from var(--color-component-bg) calc(l + var(--state-hover)) c h);
-  --color-component-bg-primary-hover: oklch(from var(--color-component-bg-primary) calc(l + var(--state-hover)) c h);
-  
-  /* === COMPONENT VARIANTS === */
-  /* Light, outlined, borderless variants as needed */
-  
-  /* === VALIDATION STATES === */
-  --color-component-bg-danger: var(--color-danger);
-  --color-component-bg-success: var(--color-success);
-  
-  /* === DISABLED STATES === */
-  --color-component-bg-disabled: var(--color-disabled-bg);
-  
-  /* === SPACING === */
-  --spacing-component-padding: var(--spacing-250);
-  --spacing-component-gap: var(--spacing-200);
-  
-  /* === TYPOGRAPHY === */
-  --text-component-sm: var(--text-sm);
-  --text-component-md: var(--text-md);
-  
-  /* === BORDERS & RADIUS === */
-  --border-width-component: var(--border-width-sm);
-  --radius-component: var(--radius-md);
-  
-  /* === FOCUS RINGS === */
-  --color-component-ring-primary: --alpha(var(--color-component-primary) / var(--opacity-ring));
-}
-```
-
-### Naming Convention Authority
-
-**Mandatory Pattern**: `--[prefix]-[component]-[part?]-[property]-[state?]`
-
-**Required Prefixes**:
-- `--color-`: ALL colors (never without suffix)
-- `--spacing-`: Spacing including width/height needing max/min variants
-- `--text-`: Font sizes only
-- `--border-`: Border properties
-- `--radius-`: Border radius
-- `--shadow-`: Box shadows
-- `--opacity-`: Transparency values
-
-**Required Color Suffixes**:
-- `-bg`: Background colors (MANDATORY - never `--color-button`)
-- `-fg`: Foreground/text colors (never `-text`)
-- `-border`: Border colors
-- `-hover`: Hover states
-- `-active`: Active states
-- `-disabled`: Disabled states
-
-**Component Naming Rules**:
-```css
-/* ✅ CORRECT - Consistent with semantic tokens */
---color-button-bg-primary     /* Matches --color-bg-primary pattern */
---color-accordion-fg-title    /* Matches --color-fg-primary pattern */
---color-product-card-bg       /* Base background */
-
-/* ❌ FORBIDDEN */
---color-btn-primary           /* Use 'button' not 'btn' */
---color-pc-bg                 /* Use 'product-card' not 'pc' */
---color-button                /* Missing -bg suffix */
---color-button-text           /* Use -fg not -text */
---color-button-primary-bg     /* Wrong order - should be -bg-primary */
-```
-
-### Two-Layer Token Strategy
-
-**ALWAYS** implement reference layer for theming:
-
-```css
-/* === BASE COLOR MAPPING === */
-/* Reference layer - allows easy theming */
---color-component-primary: var(--color-primary);
---color-component-secondary: var(--color-secondary);
-
-/* === DERIVED COLORS === */  
-/* Actual usage tokens */
---color-component-bg-primary: var(--color-component-primary);
---color-component-fg-primary: var(--color-fg-reverse);
-```
-
-**Benefits**: One-line component theme changes, consistent theming patterns.
-
-### Token Usage in Components
+### Quick Token Usage in Components:
 
 ```typescript
 // ✅ CORRECT - Use Tailwind classes that reference your tokens
 'bg-button-bg-primary'     // Uses --color-button-bg-primary
 'text-button-fg-primary'   // Uses --color-button-fg-primary
-'p-button-sm'             // Uses --spacing-button-sm
+'p-button-padding'         // Uses --spacing-button-padding
 
 // ❌ WRONG - Never use arbitrary values
-'bg-[var(--color-button-bg-primary)]'
-'p-[var(--spacing-button-sm)]'
+'bg-[var(--color-button-bg-primary)]'  // Don't use arbitrary values
+'p-[1rem]'                             // Use token classes instead
 ```
 
 ## Component Implementation Patterns
diff --git a/libs/ui/token-contribution.md b/libs/ui/token-contribution.md
index 4ac45f49ff..a6a0d86253 100644
--- a/libs/ui/token-contribution.md
+++ b/libs/ui/token-contribution.md
@@ -1,3 +1,41 @@
+## 🚀 QUICK REFERENCE
+
+### Essential Rules
+1. **All colors need suffixes**: `-bg`, `-fg`, `-border` (never just `--color-button`)
+2. **Two-layer strategy**: Reference layer → Derived tokens
+3. **No abbreviations**: `button` not `btn`, `product-card` not `pc`
+4. **Follow the pattern**: `--[prefix]-[component]-[part?]-[property]-[state?]`
+
+### Validation
+```bash
+pnpm validate:tokens        # Check token naming compliance
+pnpm check:unused-tokens    # Find unused tokens
+```
+
+### Real Example (Button)
+```css
+/* Optional: only if needed */
+:root {
+  --opacity-outlined-hover: 16%;
+}
+
+@theme static {
+  /* Reference layer first */
+  --color-button-primary: var(--color-primary);
+  --color-button-secondary: var(--color-secondary);
+  
+  /* Then derived tokens */
+  --color-button-bg-primary: var(--color-button-primary);
+  --color-button-fg-primary: var(--color-fg-reverse);
+  
+  /* Spacing - separate single and composite */
+  --spacing-button-sm: var(--spacing-150);
+  --padding-button-sm: var(--spacing-150) var(--spacing-250);
+}
+```
+
+---
+
 🎯 BASIC PRINCIPLES
 
 1. Predictability Over Brevity
@@ -67,11 +105,11 @@ Component Naming Rules
 
 /* === COMPONENT TOKEN FILE STRUCTURE === */
 
-/* 1. LOCAL VARIABLES */
-/* Only for opacity values or complex calculations */
+/* 1. LOCAL VARIABLES (OPTIONAL) */
+/* Only when needed for opacity values or complex calculations */
 :root {
-    --opacity-component-specific: 50%;
-    --custom-calculation: calc(var(--spacing-base) * 2);
+    --opacity-outlined-hover: 16%;
+    --opacity-outlined-active: 12%;
 }
 
 /* 2. THEME TOKENS */
@@ -140,19 +178,22 @@ Derived Colors
 
 /* === DERIVED COLORS === */
 /* Background colors - using reference layer */
---color-component-bg: var(--color-component-base);
---color-component-bg-primary: var(--color-component-primary);
---color-component-bg-secondary: var(--color-component-secondary);
+--color-button-bg-primary: var(--color-button-primary);
+--color-button-bg-secondary: var(--color-button-secondary);
+--color-button-bg-danger: var(--color-button-danger);
 
-/* Foreground colors */
---color-component-fg: var(--color-fg-primary);
---color-component-fg-primary: var(--color-fg-reverse);
---color-component-fg-secondary: var(--color-fg-reverse);
+/* Foreground colors - can have shared base */
+--color-button-fg: var(--color-fg-reverse);  /* Shared base */
+--color-button-fg-primary: var(--color-button-fg);
+--color-button-fg-secondary: var(--color-button-fg);
+--color-button-fg-danger: var(--color-button-fg);
 
 /* Border colors */
---color-component-border: var(--color-border-primary);
---color-component-border-primary: var(--color-component-primary);
---color-component-border-secondary: var(--color-component-secondary);
+--color-button-border-primary: var(--color-button-primary);
+--color-button-border-secondary: var(--color-button-secondary);
+
+/* Aliases for special cases */
+--color-badge-bg-discount: var(--color-badge-danger); /* Alias */
 
 State Calculations
 
@@ -171,18 +212,21 @@ State Calculations
 ---
 📏 SPACING & SIZING TOKENS
 
-Spacing Naming
+Spacing Patterns
 
 /* === SPACING === */
-/* Use semantic spacing tokens */
---spacing-component-padding: var(--spacing-250);           /* Generic padding */
---spacing-component-padding-sm: var(--spacing-200);        /* Small variant */
---spacing-component-padding-lg: var(--spacing-350);        /* Large variant */
---spacing-component-gap: var(--spacing-200);               /* Gap between elements */
---spacing-component-margin: var(--spacing-150);            /* External margin */
+/* Single spacing values for uniform padding */
+--spacing-button-sm: var(--spacing-150);           /* Small size */
+--spacing-button-md: var(--spacing-200);           /* Medium size */
+--spacing-button-lg: var(--spacing-250);           /* Large size */
 
-/* Composite spacing (multiple values) */
---spacing-component-padding-composite: var(--spacing-200) var(--spacing-350);
+/* Composite padding (vertical horizontal) */
+--padding-button-sm: var(--spacing-150) var(--spacing-250);
+--padding-button-md: var(--spacing-200) var(--spacing-350);
+--padding-button-lg: var(--spacing-250) var(--spacing-450);
+
+/* Simple composite for badges */
+--padding-badge: var(--spacing-100) var(--spacing-100);
 
 Typography Tokens
 
@@ -219,6 +263,40 @@ Component Variants
 --color-component-border-borderless: transparent;
 --color-component-bg-borderless-hover: var(--color-fill-hover);
 
+---
+🔧 COMPONENT INTEGRATION
+
+Using Tokens in Components
+
+```typescript
+// With tailwind-variants (tv) - Real button example
+const buttonVariants = tv({
+  base: 'transition-colors font-medium',
+  variants: {
+    variant: {
+      primary: 'bg-button-bg-primary text-button-fg-primary hover:bg-button-bg-primary-hover',
+      secondary: 'bg-button-bg-secondary text-button-fg-secondary hover:bg-button-bg-secondary-hover',
+      outlined: 'bg-transparent border-button-border-primary text-button-fg-outlined-primary'
+    },
+    size: {
+      sm: 'p-button-sm text-button-sm rounded-button-sm',
+      md: 'p-button-md text-button-md rounded-button-md',
+      lg: 'p-button-lg text-button-lg rounded-button-lg'
+    }
+  }
+})
+```
+
+State-Based Styling
+
+```typescript
+// Use data attributes for dynamic states
+'data-[state=open]:bg-button-bg-open'
+'data-[highlighted]:bg-button-bg-hover'
+'data-[disabled]:opacity-button-disabled'
+'data-[validation=error]:border-button-border-danger'
+```
+
 ---
 🚨 VALIDATION RULES
 

From f20e35e4da27114d5a243392d430c48031823386 Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Thu, 4 Sep 2025 04:17:20 +0200
Subject: [PATCH 25/44] remove unused font-weight

---
 libs/ui/src/tokens/_typography.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/libs/ui/src/tokens/_typography.css b/libs/ui/src/tokens/_typography.css
index 64adcd233c..b90147e7d8 100644
--- a/libs/ui/src/tokens/_typography.css
+++ b/libs/ui/src/tokens/_typography.css
@@ -10,7 +10,6 @@
   --text-4xl: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem); /* 44.79px - 61.04px */
 
   /* === TEXT WEIGHT === */
-  --font-weight-light: 100;
   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;

From 5d80bae9fbb2bd6c502773474ddbb4aa46a5051c Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Thu, 4 Sep 2025 09:00:40 +0200
Subject: [PATCH 26/44] small edits in layout.css

---
 libs/ui/src/tokens/_layout.css | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/libs/ui/src/tokens/_layout.css b/libs/ui/src/tokens/_layout.css
index c1c1c1011f..888eb38055 100644
--- a/libs/ui/src/tokens/_layout.css
+++ b/libs/ui/src/tokens/_layout.css
@@ -7,25 +7,26 @@
   --breakpoint-xl: 80rem;
   --breakpoint-2xl: 96rem;
 
-  /* === RESPONSIVE CONTAINER WIDTHS === */
-  /* Main layout containers - responsive max-widths */
-  --spacing-container-3xs: 20rem;
-  --spacing-container-2xs: 24rem; /* Small screens */
-  --spacing-container-xs: 28rem; /* Small screens */
-  --spacing-container-sm: 32rem; /* Medium screens */
-  --spacing-container-md: 36rem; /* Large screens */
-  --spacing-container-lg: 42rem; /* Extra large screens */
-  --spacing-container-xl: 48rem; /* 2X large screens */
-  --spacing-container-2xl: 56rem; /* Ultra wide screens */
-  --spacing-container-3xl: 64rem; /* Ultra wide screens */
-  --spacing-container-4xl: 72rem;
-  --spacing-container-max: 80rem;
-  --spacing-container-prose: 65ch; /* Optimal reading width */
+  /* === CONTAINER SIZES === */
+  --container-3xs: 16rem;
+  --container-2xs: 18rem;
+  --container-xs: 20rem;
+  --container-sm: 24rem;
+  --container-md: 28rem;
+  --container-lg: 32rem;
+  --container-xl: 36rem;
+  --container-2xl: 42rem;
+  --container-3xl: 48rem;
+  --container-4xl: 56rem;
+  --container-5xl: 64rem;
+  --container-6xl: 72rem;
+  --container-max: 80rem;
+  --container-prose: 65ch;
 
   /* === ASPECT RATIOS === */
   --aspect-square: 1;
   --aspect-video: 16 / 9;
-  --aspect-portrait: 3 / 4;
+  --aspect-portrait: 9 / 16;
   --aspect-landscape: 4 / 3;
   --aspect-wide: 21 / 9;
   --aspect-card: 3 / 2;

From c00cec24b44d47dfce3c6eb98ec2d08ef1d69673 Mon Sep 17 00:00:00 2001
From: Petr Glaser <syreanis+1@gmail.com>
Date: Fri, 5 Sep 2025 21:49:05 +0200
Subject: [PATCH 27/44] fix: fix legacy tokens

---
 libs/ui/scripts/validate-token-definitions.js           | 6 +++---
 libs/ui/scripts/validate-token-usage.js                 | 6 +++---
 libs/ui/src/molecules/dialog.tsx                        | 2 +-
 libs/ui/src/molecules/form-checkbox.tsx                 | 2 +-
 libs/ui/src/molecules/form-numeric-input.tsx            | 2 +-
 libs/ui/src/molecules/search-form.tsx                   | 2 +-
 libs/ui/src/tokens/components/molecules/_pagination.css | 1 +
 7 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/libs/ui/scripts/validate-token-definitions.js b/libs/ui/scripts/validate-token-definitions.js
index e81915adbb..8fa0340edd 100755
--- a/libs/ui/scripts/validate-token-definitions.js
+++ b/libs/ui/scripts/validate-token-definitions.js
@@ -8,7 +8,7 @@
  */
 
 import fs from 'fs'
-import { glob } from 'glob'
+import { globSync } from 'glob'
 
 // Configuration for validation
 const CONFIG = {
@@ -74,7 +74,7 @@ function parseTokensFromFile(filePath) {
  */
 function loadAllTokens() {
   const allTokens = new Map()
-  const tokenFiles = glob.sync('src/tokens/components/**/*.css')
+  const tokenFiles = globSync('src/tokens/components/**/*.css')
 
   for (const file of tokenFiles) {
     const tokens = parseTokensFromFile(file)
@@ -488,7 +488,7 @@ function validateTokenDefinitions() {
 
   // Cache component files content for reuse
   const componentFilesCache = new Map()
-  const componentFiles = glob.sync('src/**/*.{ts,tsx}', {
+  const componentFiles = globSync('src/**/*.{ts,tsx}', {
     ignore: CONFIG.excludeFiles,
   })
 
diff --git a/libs/ui/scripts/validate-token-usage.js b/libs/ui/scripts/validate-token-usage.js
index 9be948b3e3..2029eea4b1 100755
--- a/libs/ui/scripts/validate-token-usage.js
+++ b/libs/ui/scripts/validate-token-usage.js
@@ -8,7 +8,7 @@
  */
 
 import fs from 'fs'
-import { glob } from 'glob'
+import { globSync } from 'glob'
 
 // Tailwind v4 namespace to utility prefix mappings
 const NAMESPACE_MAPPINGS = {
@@ -290,7 +290,7 @@ function mapClassToPossibleTokens(className) {
  */
 function loadDefinedTokens() {
   const tokens = new Set()
-  const tokenFiles = glob.sync('src/tokens/**/*.css')
+  const tokenFiles = globSync('src/tokens/**/*.css')
 
   for (const file of tokenFiles) {
     const content = fs.readFileSync(file, 'utf8')
@@ -326,7 +326,7 @@ function validateTokenUsage() {
   const definedTokens = loadDefinedTokens()
   console.log(`📋 Found ${definedTokens.size} defined tokens`)
 
-  const componentFiles = glob.sync('src/**/*.{ts,tsx}', {
+  const componentFiles = globSync('src/**/*.{ts,tsx}', {
     ignore: ['**/*.stories.tsx', '**/*.test.tsx', '**/*.spec.tsx'],
   })
 
diff --git a/libs/ui/src/molecules/dialog.tsx b/libs/ui/src/molecules/dialog.tsx
index 5023b9b400..eece2249eb 100644
--- a/libs/ui/src/molecules/dialog.tsx
+++ b/libs/ui/src/molecules/dialog.tsx
@@ -20,7 +20,7 @@ const dialogVariants = tv({
     description: ['text-dialog-description-size text-dialog-description-fg'],
     trigger: [],
     closeTrigger: [
-      'absolute top-sm right-sm',
+      'absolute top-250 right-250',
       'flex items-center justify-center',
       'p-dialog-close-trigger-padding rounded-dialog-close-trigger',
       'text-dialog-close-trigger-fg',
diff --git a/libs/ui/src/molecules/form-checkbox.tsx b/libs/ui/src/molecules/form-checkbox.tsx
index c1c5385930..824c8857e6 100644
--- a/libs/ui/src/molecules/form-checkbox.tsx
+++ b/libs/ui/src/molecules/form-checkbox.tsx
@@ -29,7 +29,7 @@ export function FormCheckboxRaw({
   const extraTextId = extraText ? `${id}-extra` : undefined
 
   return (
-    <div className="flex gap-2xs">
+    <div className="flex gap-150">
       <div className="mt-2 flex items-start">
         <Checkbox id={id} required={required} disabled={disabled} {...props} />
       </div>
diff --git a/libs/ui/src/molecules/form-numeric-input.tsx b/libs/ui/src/molecules/form-numeric-input.tsx
index ae08116648..9b3c4f7c67 100644
--- a/libs/ui/src/molecules/form-numeric-input.tsx
+++ b/libs/ui/src/molecules/form-numeric-input.tsx
@@ -28,7 +28,7 @@ export function FormNumericInputRaw({
   const extraTextId = extraText ? `${id}-extra` : undefined
 
   return (
-    <div className="flex flex-col gap-2xs">
+    <div className="flex flex-col gap-150">
       <Label htmlFor={id} size={size} required={required} disabled={disabled}>
         {label}
       </Label>
diff --git a/libs/ui/src/molecules/search-form.tsx b/libs/ui/src/molecules/search-form.tsx
index b578e97e7e..6e42a24592 100644
--- a/libs/ui/src/molecules/search-form.tsx
+++ b/libs/ui/src/molecules/search-form.tsx
@@ -43,7 +43,7 @@ const buttonVariants = tv({
   base: [
     'absolute',
     'justify-self-end place-self-center',
-    'h-full rounded-none px-xs py-xs',
+    'h-full rounded-none p-200',
   ],
 })
 
diff --git a/libs/ui/src/tokens/components/molecules/_pagination.css b/libs/ui/src/tokens/components/molecules/_pagination.css
index 8b7ad11c1d..13f0f6be2b 100644
--- a/libs/ui/src/tokens/components/molecules/_pagination.css
+++ b/libs/ui/src/tokens/components/molecules/_pagination.css
@@ -12,6 +12,7 @@
 
   /* Text colors */
   --color-pagination-fg: var(--color-fg-primary);
+  --color-pagination-fg-hover: var(--color-pagination-fg);
   --color-pagination-fg-active: var(--color-pagination-fg);
   --color-pagination-outlined-fg-active: var(--color-pagination-active);
   --color-pagination-fg-disabled: --alpha(

From 60e11a089d241ff99929edc0797c5b9dba4c6136 Mon Sep 17 00:00:00 2001
From: Petr Glaser <syreanis+1@gmail.com>
Date: Fri, 5 Sep 2025 22:32:50 +0200
Subject: [PATCH 28/44] fix: fix coderabbit recommendations

---
 libs/ui/scripts/validate-token-definitions.js |  4 +-
 libs/ui/scripts/validate-token-usage.js       | 40 ++++++++++---------
 libs/ui/src/atoms/numeric-input.tsx           |  2 +-
 libs/ui/src/atoms/tooltip.tsx                 |  8 +++-
 .../tokens/components/molecules/_select.css   |  7 +---
 .../overview/color-palette.stories.tsx        |  4 +-
 6 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/libs/ui/scripts/validate-token-definitions.js b/libs/ui/scripts/validate-token-definitions.js
index 8fa0340edd..46158a02f5 100755
--- a/libs/ui/scripts/validate-token-definitions.js
+++ b/libs/ui/scripts/validate-token-definitions.js
@@ -7,7 +7,7 @@
  * Analyzes dependency graphs and reference chains to determine actual usage.
  */
 
-import fs from 'fs'
+import fs from 'node:fs'
 import { globSync } from 'glob'
 
 // Configuration for validation
@@ -20,7 +20,7 @@ const CONFIG = {
     /^--color-warning$/,
     /^--color-success$/,
     /^--color-info$/,
-    /^--spacing-(xs|sm|md|lg|xl)$/,
+    /^--spacing-\d{2,3}$/,
     /^--text-(xs|sm|md|lg|xl)$/,
     /^--radius-(sm|md|lg)$/,
     // Base system tokens
diff --git a/libs/ui/scripts/validate-token-usage.js b/libs/ui/scripts/validate-token-usage.js
index 2029eea4b1..05b92ecf27 100755
--- a/libs/ui/scripts/validate-token-usage.js
+++ b/libs/ui/scripts/validate-token-usage.js
@@ -7,7 +7,9 @@
  * Follows Tailwind v4 theme variable namespace rules for precise mapping.
  */
 
-import fs from 'fs'
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
 import { globSync } from 'glob'
 
 // Tailwind v4 namespace to utility prefix mappings
@@ -117,9 +119,7 @@ function extractTailwindClasses(content, filePath) {
   const classes = new Set()
 
   // Match className props (string values)
-  const classNameMatches = content.matchAll(
-    /className\s*=\s*["'`]([^"'`]+)["'`]/g
-  )
+  const classNameMatches = content.matchAll(/className\s*=\s*["']([^"']+)["']/g)
   for (const match of classNameMatches) {
     const classString = match[1]
     classString.split(/\s+/).forEach((cls) => cls && classes.add(cls.trim()))
@@ -202,24 +202,25 @@ function extractTailwindClasses(content, filePath) {
  * Map Tailwind utility class to possible CSS custom properties
  */
 function mapClassToPossibleTokens(className) {
-  // Remove state modifiers (hover:, focus:, data-[...]:, etc.)
-  const baseClass = className
-    .replace(/^[^:]*:/, '')
-    .replace(/^data-\[[^\]]+\]:/, '')
+  // Remove chained state/data prefixes (hover:, focus:, sm:, data-[...]:, etc.)
+  let baseClass = className
+  while (/^(?:[a-z-]+:|data-\[[^\]]+\]:)/i.test(baseClass)) {
+    baseClass = baseClass.replace(/^(?:[a-z-]+:|data-\[[^\]]+\]:)/i, '')
+  }
 
   // Parse utility class: prefix-value (non-greedy matching)
   // Match known prefixes first, then everything else as value
   const knownPrefixes = Object.values(NAMESPACE_MAPPINGS).flat()
   let prefix = null
   let value = null
-
+  // Normalize negative utilities (-m-*, -mt-*, etc.)
+  const normalized = baseClass.startsWith('-') ? baseClass.slice(1) : baseClass
   // Try to match against known prefixes (longest first to handle cases like 'ring-offset')
   const sortedPrefixes = knownPrefixes.sort((a, b) => b.length - a.length)
-
   for (const knownPrefix of sortedPrefixes) {
-    if (baseClass.startsWith(`${knownPrefix}-`)) {
+    if (normalized.startsWith(`${knownPrefix}-`)) {
       prefix = knownPrefix
-      value = baseClass.slice(knownPrefix.length + 1) // +1 for the dash
+      value = normalized.slice(knownPrefix.length + 1) // +1 for the dash
       break
     }
   }
@@ -290,10 +291,11 @@ function mapClassToPossibleTokens(className) {
  */
 function loadDefinedTokens() {
   const tokens = new Set()
-  const tokenFiles = globSync('src/tokens/**/*.css')
+  const ROOT = path.resolve(fileURLToPath(new URL('.', import.meta.url)), '..')
+  const tokenFiles = globSync('src/tokens/**/*.css', { cwd: ROOT })
 
   for (const file of tokenFiles) {
-    const content = fs.readFileSync(file, 'utf8')
+    const content = fs.readFileSync(path.join(ROOT, file), 'utf8')
 
     // Match CSS custom properties
     const tokenMatches = content.matchAll(/--([a-z][a-z0-9-]*)\s*:/g)
@@ -309,11 +311,11 @@ function loadDefinedTokens() {
  * Check if a class should be ignored
  */
 function shouldIgnoreClass(className) {
-  // Remove state modifiers for checking
-  const baseClass = className
-    .replace(/^[^:]*:/, '')
-    .replace(/^data-\[[^\]]+\]:/, '')
-
+  // Remove chained state/data prefixes for checking
+  let baseClass = className
+  while (/^(?:[a-z-]+:|data-\[[^\]]+\]:)/i.test(baseClass)) {
+    baseClass = baseClass.replace(/^(?:[a-z-]+:|data-\[[^\]]+\]:)/i, '')
+  }
   return IGNORE_PATTERNS.some((pattern) => pattern.test(baseClass))
 }
 
diff --git a/libs/ui/src/atoms/numeric-input.tsx b/libs/ui/src/atoms/numeric-input.tsx
index 608580d75a..a15714988b 100644
--- a/libs/ui/src/atoms/numeric-input.tsx
+++ b/libs/ui/src/atoms/numeric-input.tsx
@@ -25,7 +25,7 @@ const numericInput = tv({
       'flex flex-col h-fit justify-center bg-ni-trigger-container',
     trigger: [
       'px-ni-trigger-x py-ni-trigger-y',
-      'cursor-pointer  focus:ring-increment-btn-ring',
+      'cursor-pointer focus:ring-increment-btn-ring',
     ],
     scrubber: 'absolute inset-0 cursor-ew-resize',
   },
diff --git a/libs/ui/src/atoms/tooltip.tsx b/libs/ui/src/atoms/tooltip.tsx
index 67cf510ff7..df0f0d2dc9 100644
--- a/libs/ui/src/atoms/tooltip.tsx
+++ b/libs/ui/src/atoms/tooltip.tsx
@@ -106,14 +106,18 @@ export function Tooltip({
   })
 
   const api = tooltip.connect(service as tooltip.Service, normalizeProps)
-  const { positioner, content: contentSlot } = tooltipVariants({
+  const {
+    trigger,
+    positioner,
+    content: contentSlot,
+  } = tooltipVariants({
     size,
     className,
   })
 
   return (
     <>
-      <span {...api.getTriggerProps()} ref={ref}>
+      <span {...api.getTriggerProps()} ref={ref} className={trigger()}>
         {children}
       </span>
       <Portal>
diff --git a/libs/ui/src/tokens/components/molecules/_select.css b/libs/ui/src/tokens/components/molecules/_select.css
index 60e519329b..6494376c65 100644
--- a/libs/ui/src/tokens/components/molecules/_select.css
+++ b/libs/ui/src/tokens/components/molecules/_select.css
@@ -14,7 +14,7 @@
   --color-select-root-bg: var(--color-select-bg);
   --gap-select-root: var(--spacing-150);
 
-  /* === LABEL === 
+  /* === LABEL ===
   --color-label: var(--color-fg-primary);*/
 
   /* === TRIGGER === */
@@ -22,7 +22,7 @@
   --color-select-trigger-border: var(--color-select-border);
   --color-select-trigger-hover: var(--color-fill-hover);
   --color-select-trigger-focus: var(--color-primary);
-  --padding-select-trigger: var(--spacing-100);
+  --padding-select-trigger: var(--spacing-200);
 
   /* === CLEAR TRIGGER === */
   --color-select-clear-trigger-fg: var(--color-select-fg);
@@ -46,9 +46,6 @@
   /* === INDICATOR === */
   --color-select-indicator: var(--color-primary);
 
-  /* === PADDING === */
-  --padding-select-trigger: var(--spacing-200);
-
   /* === TYPOGRAPHY === */
   --text-select-trigger: var(--text-md);
   --text-select-item: var(--text-md);
diff --git a/libs/ui/stories/overview/color-palette.stories.tsx b/libs/ui/stories/overview/color-palette.stories.tsx
index 2c0eefeaa7..257d4e0359 100644
--- a/libs/ui/stories/overview/color-palette.stories.tsx
+++ b/libs/ui/stories/overview/color-palette.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import '../../src/tokens/_colors.css'
 import '../../src/tokens/_semantic.css'
-import { ColorSelect } from '../../src/atoms/color-select'
+import { ColorSelect } from '../../../../apps/frontend-demo/src/components/atoms/color-select'
 
 const meta: Meta = {
   title: 'Overview/Color Palette',
@@ -41,7 +41,7 @@ export const Default: Story = {
       <div className="mx-auto max-w-7xl">
         <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
           {semanticColors.map((color) => (
-            <div className="rounded-xl bg-surface p-6 shadow-lg">
+            <div key={color} className="rounded-xl bg-surface p-6 shadow-lg">
               <h3 className="mb-4 font-semibold text-fg-primary text-lg capitalize">
                 {color}
               </h3>

From b7693964f6ba26835f5c47b707d6dcd015562ec7 Mon Sep 17 00:00:00 2001
From: Petr Glaser <syreanis+1@gmail.com>
Date: Fri, 5 Sep 2025 22:41:03 +0200
Subject: [PATCH 29/44] feat: improve token usage validation to ignore TW
 default classes

---
 libs/ui/scripts/validate-token-usage.js | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/libs/ui/scripts/validate-token-usage.js b/libs/ui/scripts/validate-token-usage.js
index 05b92ecf27..456523c3c8 100755
--- a/libs/ui/scripts/validate-token-usage.js
+++ b/libs/ui/scripts/validate-token-usage.js
@@ -67,6 +67,15 @@ const NAMESPACE_MAPPINGS = {
 
 // Standard Tailwind utilities to ignore (not custom tokens)
 const IGNORE_PATTERNS = [
+  // CSS variables in parentheses - these use CSS variables directly, not design tokens
+  /^[a-z-]+\([^)]*--[^)]+\)$/,
+
+  // Square bracket notation with CSS variables - ignore these as they use CSS vars directly
+  /^[a-z-]+\[var\(--[^)]+\)\]$/,
+
+  // Standard positioning values
+  /^(top|right|bottom|left|inset)-(0|px|0\.5|1|1\.5|2|2\.5|3|3\.5|4|5|6|7|8|9|10|11|12|14|16|20|24|28|32|36|40|44|48|52|56|60|64|72|80|96|auto|full|screen|min|max|fit|end)$/,
+
   // Layout & positioning
   /^(flex|grid|block|inline|hidden|absolute|relative|fixed|sticky)$/,
   /^(items|justify|content|self)-(start|end|center|stretch|between|around|evenly)$/,
@@ -74,21 +83,24 @@ const IGNORE_PATTERNS = [
   /^(order|col|row)-(start|end|\d+)$/,
 
   // Standard spacing (without custom tokens)
-  /^(p|m|gap|w|h|max-w|min-w|max-h|min-h|top|right|bottom|left|inset|space)-(0|px|0\.5|1|1\.5|2|2\.5|3|3\.5|4|5|6|7|8|9|10|11|12|14|16|20|24|28|32|36|40|44|48|52|56|60|64|72|80|96|auto|full|screen|min|max|fit)$/,
+  /^(p|m|gap|w|h|max-w|min-w|max-h|min-h|top|right|bottom|left|inset|space)-(0|px|0\.5|1|1\.5|2|2\.5|3|3\.5|4|5|6|7|8|9|10|11|12|14|16|20|24|28|32|36|40|44|48|52|56|60|64|72|80|96|auto|full|screen|min|max|fit|end)$/,
+
+  // Margin/padding with directional prefixes
+  /^(ml|mr|mt|mb|mx|my|pl|pr|pt|pb|px|py)-(0|px|0\.5|1|1\.5|2|2\.5|3|3\.5|4|5|6|7|8|9|10|11|12|14|16|20|24|28|32|36|40|44|48|52|56|60|64|72|80|96|auto|full|screen|min|max|fit)$/,
 
   // Standard colors including transparent
   /^(bg|text|border)-(transparent|current|black|white|slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-?\d{0,3}$/,
   /^(bg|text|border)-(transparent|current|black|white|inherit)$/,
 
   // Standard typography
-  /^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/,
+  /^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl|left|center|right|justify)$/,
   /^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/,
   /^font-(sans|serif|mono)$/,
   /^(leading|tracking)-(none|tight|snug|normal|relaxed|loose|wide|wider|widest)$/,
 
   // Standard borders & effects
   /^(border|rounded)-(none|sm|md|lg|xl|2xl|3xl|full)$/,
-  /^border-(0|2|4|8)$/,
+  /^border-(0|2|4|8|t|r|b|l|x|y|color)$/,
   /^shadow-(sm|md|lg|xl|2xl|inner|none)$/,
   /^opacity-(0|5|10|20|25|30|40|50|60|70|75|80|90|95|100)$/,
 

From 50252de95e6a36663f71e52cb6569525005e112e Mon Sep 17 00:00:00 2001
From: Petr Glaser <syreanis+1@gmail.com>
Date: Fri, 5 Sep 2025 23:29:36 +0200
Subject: [PATCH 30/44] fix: add unused tokens to components

---
 libs/ui/src/molecules/select.tsx    | 8 +++++++-
 libs/ui/src/molecules/tree-view.tsx | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/libs/ui/src/molecules/select.tsx b/libs/ui/src/molecules/select.tsx
index 00107bd4f6..33c194c769 100644
--- a/libs/ui/src/molecules/select.tsx
+++ b/libs/ui/src/molecules/select.tsx
@@ -20,7 +20,12 @@ export interface SelectOption {
 // === COMPONENT VARIANTS ===
 const selectVariants = tv({
   slots: {
-    root: ['relative', 'flex flex-col gap-select-root', 'w-full'],
+    root: [
+      'relative',
+      'flex flex-col gap-select-root',
+      'w-full',
+      'bg-select-root-bg',
+    ],
     control: ['flex relative items-center justify-between', 'w-full'],
     positioner: ['w-(--reference-width)', 'isolate z-(--z-index)'],
     trigger: [
@@ -30,6 +35,7 @@ const selectVariants = tv({
       'border border-select-trigger-border rounded-select',
       'text-select-trigger text-left',
       'hover:bg-select-trigger-hover',
+      'focus:bg-select-trigger-focus',
       'focus:outline-none',
       'data-[disabled]:cursor-not-allowed',
       'data-[invalid]:border-select-danger data-[invalid]:ring-select-danger',
diff --git a/libs/ui/src/molecules/tree-view.tsx b/libs/ui/src/molecules/tree-view.tsx
index af189a9ec9..3f42b57ffd 100644
--- a/libs/ui/src/molecules/tree-view.tsx
+++ b/libs/ui/src/molecules/tree-view.tsx
@@ -55,7 +55,7 @@ const treeVariants = tv({
       class: [
         'relative',
         // get --depth from zag-js api
-        'ml-[calc(var(--depth)*theme(tree-indent-per-level))]',
+        'ml-[calc(var(--depth)*var(--tree-indent-per-level))]',
         'data-[depth=1]:ml-0',
       ],
     },

From 33204536bd7063b87f7716483dade87303386e61 Mon Sep 17 00:00:00 2001
From: Petr Glaser <syreanis+1@gmail.com>
Date: Sat, 6 Sep 2025 00:18:47 +0200
Subject: [PATCH 31/44] fix: incorrectly undetected variables

---
 libs/ui/scripts/validate-token-definitions.js | 3 ++-
 libs/ui/src/molecules/accordion.tsx           | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/libs/ui/scripts/validate-token-definitions.js b/libs/ui/scripts/validate-token-definitions.js
index 46158a02f5..67cf924053 100755
--- a/libs/ui/scripts/validate-token-definitions.js
+++ b/libs/ui/scripts/validate-token-definitions.js
@@ -223,6 +223,8 @@ function tokenToUtilityClasses(tokenName) {
       '-end',
       // Layout
       'gap',
+      'gap-x',
+      'gap-y',
       'space-x',
       'space-y',
     ],
@@ -313,7 +315,6 @@ function tokenToUtilityClasses(tokenName) {
     'opacity-bg',
     'opacity-borderless',
     'spacing-translate',
-    'spacing-pc',
     'spacing-menu-submenu',
   ]
 
diff --git a/libs/ui/src/molecules/accordion.tsx b/libs/ui/src/molecules/accordion.tsx
index 642fdb35fc..a1382507f0 100644
--- a/libs/ui/src/molecules/accordion.tsx
+++ b/libs/ui/src/molecules/accordion.tsx
@@ -55,7 +55,7 @@ const accordionVariants = tv({
         subtitle: 'text-accordion-subtitle-sm',
       },
       md: {
-        title: 'text-accordion-content-md py-accordion-primary-md',
+        title: 'text-accordion-title-md py-accordion-primary-md',
         content: 'text-accordion-content-md p-accordion-secondary-md',
         subtitle: 'text-accordion-subtitle-md',
       },

From 7b2b1873304043c2f4ba8ac777a123d20b4f77fa Mon Sep 17 00:00:00 2001
From: Petr Glaser <syreanis+1@gmail.com>
Date: Sat, 6 Sep 2025 00:18:58 +0200
Subject: [PATCH 32/44] feat: use bun for faster processing

---
 libs/ui/package.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/libs/ui/package.json b/libs/ui/package.json
index ac23b3487c..e2480542d7 100644
--- a/libs/ui/package.json
+++ b/libs/ui/package.json
@@ -40,10 +40,10 @@
     "lint:tailwind": "eslint \"**/*.{js,jsx,ts,tsx}\" --config eslint.config.js",
     "lint:tailwind:fix": "eslint \"**/*.{js,jsx,ts,tsx}\" --config eslint.config.js --fix",
     "prepare": "pnpm build",
-    "check:unused-tokens": "node scripts/check-unused-tokens.js",
-    "validate:tokens": "node scripts/validate-token-usage.js && node scripts/validate-token-definitions.js",
-    "validate:token-usage": "node scripts/validate-token-usage.js",
-    "validate:token-definitions": "node scripts/validate-token-definitions.js"
+    "check:unused-tokens": "bun scripts/check-unused-tokens.js",
+    "validate:tokens": "bun scripts/validate-token-usage.js && bun scripts/validate-token-definitions.js",
+    "validate:token-usage": "bun scripts/validate-token-usage.js",
+    "validate:token-definitions": "bun scripts/validate-token-definitions.js"
   },
   "dependencies": {
     "@zag-js/accordion": "^1.22.1",

From 0089d7f0bb9f30dcfa98c2c5e61743d182147a70 Mon Sep 17 00:00:00 2001
From: Petr Glaser <syreanis+1@gmail.com>
Date: Sat, 6 Sep 2025 01:19:58 +0200
Subject: [PATCH 33/44] refactor: improve performance of validate token script

---
 libs/ui/scripts/validate-token-definitions.js | 615 +++++++-----------
 1 file changed, 247 insertions(+), 368 deletions(-)

diff --git a/libs/ui/scripts/validate-token-definitions.js b/libs/ui/scripts/validate-token-definitions.js
index 67cf924053..f48f3486e3 100755
--- a/libs/ui/scripts/validate-token-definitions.js
+++ b/libs/ui/scripts/validate-token-definitions.js
@@ -1,13 +1,16 @@
 #!/usr/bin/env node
 
 /**
- * Token Definition Validation Script
+ * Token Definition Validation Script (optimized)
  *
- * Identifies unused tokens with smart exception handling.
- * Analyzes dependency graphs and reference chains to determine actual usage.
+ * - Single-pass indexing of token CSS files
+ * - Single-pass scanning of component files
+ * - Dependency closure via forward BFS
+ * - Optional --profile timings
  */
 
-import fs from 'node:fs'
+import fs from 'node:fs/promises'
+import { existsSync } from 'node:fs'
 import { globSync } from 'glob'
 
 // Configuration for validation
@@ -29,11 +32,7 @@ const CONFIG = {
   ],
 
   // Patterns to ignore completely
-  ignorePatterns: [
-    /^--tw-/, // Tailwind internal variables
-    /_test$/,
-    /_debug$/,
-  ],
+  ignorePatterns: [/^--tw-/, /_test$/, /_debug$/],
 
   // File patterns to exclude from usage scanning
   excludeFiles: [
@@ -42,111 +41,48 @@ const CONFIG = {
     '**/*.spec.tsx',
     '**/node_modules/**',
   ],
-}
-
-/**
- * Parse CSS tokens from a file
- */
-function parseTokensFromFile(filePath) {
-  const content = fs.readFileSync(filePath, 'utf8')
-  const tokens = new Map()
-
-  // Match CSS custom properties with their values
-  const tokenRegex = /--([\w-]+)\s*:\s*([^;]+);/g
-  let match
-
-  while ((match = tokenRegex.exec(content)) !== null) {
-    const [fullMatch, name, value] = match
-    const tokenName = `--${name}`
-
-    tokens.set(tokenName, {
-      value: value.trim(),
-      file: filePath,
-      line: content.substring(0, match.index).split('\n').length,
-    })
-  }
 
-  return tokens
+  // Token CSS glob
+  tokenCssGlob: 'src/tokens/components/**/*.css',
 }
 
-/**
- * Load all defined tokens from CSS files
- */
-function loadAllTokens() {
-  const allTokens = new Map()
-  const tokenFiles = globSync('src/tokens/components/**/*.css')
-
-  for (const file of tokenFiles) {
-    const tokens = parseTokensFromFile(file)
-    for (const [name, data] of tokens) {
-      allTokens.set(name, data)
-    }
+// Simple stopwatch profiling
+function profiled(enabled) {
+  const marks = new Map()
+  return {
+    mark(label) {
+      if (!enabled) return
+      marks.set(label, performance.now())
+    },
+    end(label) {
+      if (!enabled) return 0
+      const start = marks.get(label) ?? performance.now()
+      const delta = performance.now() - start
+      marks.set(label, performance.now())
+      return delta
+    },
   }
-
-  return allTokens
 }
 
-/**
- * Extract token references from CSS value
- */
-function extractTokenReferences(value) {
-  const references = new Set()
-
-  // Match var() functions
-  const varMatches = value.matchAll(/var\(\s*(--[\w-]+)/g)
-  for (const match of varMatches) {
-    references.add(match[1])
-  }
-
-  // Match oklch() from function references
-  const oklchMatches = value.matchAll(/oklch\([^)]*var\(\s*(--[\w-]+)/g)
-  for (const match of oklchMatches) {
-    references.add(match[1])
-  }
-
-  return references
+function isWhitelisted(tokenName) {
+  return CONFIG.whitelistPatterns.some((p) => p.test(tokenName))
 }
 
-/**
- * Build dependency graph of token references
- */
-function buildTokenDependencyGraph(allTokens) {
-  const dependencyGraph = new Map()
-  const reverseDependencyGraph = new Map()
-
-  for (const [tokenName, tokenData] of allTokens) {
-    const references = extractTokenReferences(tokenData.value)
-    dependencyGraph.set(tokenName, references)
-
-    // Build reverse dependencies
-    for (const ref of references) {
-      if (!reverseDependencyGraph.has(ref)) {
-        reverseDependencyGraph.set(ref, new Set())
-      }
-      reverseDependencyGraph.get(ref).add(tokenName)
-    }
-  }
-
-  return { dependencyGraph, reverseDependencyGraph }
+function shouldIgnoreToken(tokenName) {
+  return CONFIG.ignorePatterns.some((p) => p.test(tokenName))
 }
 
-/**
- * Map CSS token to possible Tailwind utility classes
- */
+// Map CSS token to possible Tailwind utility classes
 function tokenToUtilityClasses(tokenName) {
   const classes = new Set()
-
-  // Simplified token parsing
-  const tokenParts = tokenName.slice(2).split('-') // Remove '--' and split
+  const tokenParts = tokenName.slice(2).split('-')
   if (tokenParts.length < 2) return classes
 
   const primaryNamespace = tokenParts[0]
   const subNamespace = tokenParts.length > 2 ? tokenParts[1] : null
   const key = tokenParts.slice(subNamespace ? 2 : 1).join('-')
 
-  // Complete namespace to utility prefix mappings per Tailwind v4 docs
   const mappings = {
-    // Color namespace - most extensive
     color: [
       'bg',
       'text',
@@ -163,10 +99,7 @@ function tokenToUtilityClasses(tokenName) {
       'fill',
       'stroke',
     ],
-
-    // Spacing namespace - very extensive (general spacing)
     spacing: [
-      // Padding
       'p',
       'px',
       'py',
@@ -176,7 +109,6 @@ function tokenToUtilityClasses(tokenName) {
       'pl',
       'ps',
       'pe',
-      // Margin (including negative variants)
       'm',
       'mx',
       'my',
@@ -195,14 +127,12 @@ function tokenToUtilityClasses(tokenName) {
       '-ml',
       '-ms',
       '-me',
-      // Width & Height
       'w',
       'h',
       'min-w',
       'min-h',
       'max-w',
       'max-h',
-      // Position
       'inset',
       'inset-x',
       'inset-y',
@@ -221,15 +151,12 @@ function tokenToUtilityClasses(tokenName) {
       '-left',
       '-start',
       '-end',
-      // Layout
       'gap',
       'gap-x',
       'gap-y',
       'space-x',
       'space-y',
     ],
-
-    // Specific spacing namespaces (more specific than general spacing)
     padding: ['p', 'px', 'py', 'pt', 'pr', 'pb', 'pl', 'ps', 'pe'],
     margin: [
       'm',
@@ -252,51 +179,32 @@ function tokenToUtilityClasses(tokenName) {
       '-me',
     ],
     gap: ['gap'],
-
-    // Width namespace (when not using spacing)
     width: ['w', 'min-w', 'max-w'],
-
-    // Height namespace (when not using spacing)
     height: ['h', 'min-h', 'max-h'],
-
-    // Typography
-    text: ['text'], // Font size
-    font: ['font'], // Font family
-    tracking: ['tracking'], // Letter spacing
-    leading: ['leading'], // Line height
-
-    // Border & Effects
+    text: ['text'],
+    font: ['font'],
+    tracking: ['tracking'],
+    leading: ['leading'],
     radius: ['rounded'],
     shadow: ['shadow'],
     'inset-shadow': ['inset-shadow'],
     'drop-shadow': ['drop-shadow'],
     blur: ['blur'],
     perspective: ['perspective'],
-
-    // Layout
     aspect: ['aspect'],
-
-    // Animation
     ease: ['ease'],
     animate: ['animate'],
-
-    // Other
     opacity: ['opacity'],
     border: ['border'],
-
-    // Special cases that don't map to utilities directly
-    z: [], // z-index values, handled differently
-    arrow: [], // Custom properties for arrows, not utilities
-    tree: [], // Custom component-specific properties
-    textarea: [], // Custom component properties
-    tooltip: [], // Custom component properties
+    z: [],
+    arrow: [],
+    tree: [],
+    textarea: [],
+    tooltip: [],
   }
 
-  // Simplified namespace and key handling
   let namespace = primaryNamespace
   let tokenKey = key
-
-  // Handle special font-weight case
   if (primaryNamespace === 'font' && subNamespace === 'weight') {
     namespace = 'font-weight'
   } else if (subNamespace && mappings[`${primaryNamespace}-${subNamespace}`]) {
@@ -305,7 +213,6 @@ function tokenToUtilityClasses(tokenName) {
     tokenKey = `${subNamespace}-${key}`
   }
 
-  // Skip custom properties that don't map to utilities
   const customPropertyPrefixes = [
     'arrow',
     'tree',
@@ -317,297 +224,269 @@ function tokenToUtilityClasses(tokenName) {
     'spacing-translate',
     'spacing-menu-submenu',
   ]
-
-  if (
-    customPropertyPrefixes.some((prefix) => tokenName.includes(`--${prefix}`))
-  ) {
+  if (customPropertyPrefixes.some((prefix) => tokenName.includes(`--${prefix}`))) {
     return classes
   }
 
   const prefixes = mappings[namespace] || mappings[primaryNamespace] || []
-
   for (const prefix of prefixes) {
     if (namespace === 'font-weight') {
-      // Special case: --font-weight-bold → font-bold (strip "weight")
       classes.add(`font-${tokenKey}`)
     } else {
       classes.add(`${prefix}-${tokenKey}`)
     }
   }
-
   return classes
 }
 
-/**
- * Search for token usage in component files (cached version)
- */
-function findTokenUsageInComponentsCache(tokenName, componentFilesCache) {
-  const usage = new Set()
-  const possibleClasses = tokenToUtilityClasses(tokenName)
+// Build indices from token CSS files in a single pass
+async function buildTokenIndices() {
+  const files = globSync(CONFIG.tokenCssGlob)
+  const defs = new Map() // token -> { value, file, line }
+  const dependencyGraph = new Map() // token -> Set<token>
+  const cssUsage = new Map() // token -> Set<location>
+
+  await Promise.all(
+    files.map(async (file) => {
+      if (!existsSync(file)) return
+      const content = await fs.readFile(file, 'utf8')
+      const lines = content.split('\n')
 
-  if (possibleClasses.size === 0) return usage
+      // 1) Parse token definitions and dependency edges
+      const tokenRegex = /--([\w-]+)\s*:\s*([^;]+);/g
+      let m
+      while ((m = tokenRegex.exec(content)) !== null) {
+        const name = `--${m[1]}`
+        const value = m[2].trim()
+        const line = content.substring(0, m.index).split('\n').length
+        defs.set(name, { value, file, line })
+
+        // Extract dependencies from value
+        const deps = new Set()
+        for (const vm of value.matchAll(/var\(\s*(--[\w-]+)/g)) {
+          deps.add(vm[1])
+        }
+        for (const om of value.matchAll(/oklch\([^)]*var\(\s*(--[\w-]+)/g)) {
+          deps.add(om[1])
+        }
+        dependencyGraph.set(name, deps)
+      }
 
-  for (const [file, content] of componentFilesCache) {
-    // Check for direct var() usage
-    if (content.includes(`var(${tokenName})`)) {
-      usage.add(`${file} (direct var() reference)`)
-    }
+      // 2) Index var() usage on non-definition lines as direct CSS usage
+      const defLine = new Set()
+      for (const [token, data] of defs) {
+        if (data.file === file) defLine.add(data.line)
+      }
 
-    // Check for utility class usage (simplified patterns)
-    for (const className of possibleClasses) {
-      const escapedClass = className.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-
-      // Simplified patterns - covers most cases
-      const patterns = [
-        // Matches: 'class', hover:class, data-[...]:class, sm:class
-        new RegExp(
-          `\\b(?:[a-z-]+:|data-\\[[^\\]]+\\]:|(?:sm|md|lg|xl|2xl):)?${escapedClass}\\b`
-        ),
-        // Matches inside quotes with optional spacing
-        new RegExp(`['"\`][^'"\`]*\\s${escapedClass}\\s[^'"\`]*['"\`]`),
-      ]
-
-      for (const pattern of patterns) {
-        const match = content.search(pattern)
-        if (match !== -1) {
-          // Efficient line number calculation
-          const lineNumber = content.substring(0, match).split('\n').length
-          usage.add(`${file}:${lineNumber} (class: ${className})`)
-          break
+      for (let i = 0; i < lines.length; i++) {
+        const lineNo = i + 1
+        if (defLine.has(lineNo)) continue
+        const line = lines[i]
+        if (!line.includes('var(')) continue
+        for (const vm of line.matchAll(/var\(\s*(--[\w-]+)/g)) {
+          const t = vm[1]
+          if (!cssUsage.has(t)) cssUsage.set(t, new Set())
+          cssUsage.get(t).add(`${file}:${lineNo} (CSS property)`) // direct usage
         }
       }
-    }
+    })
+  )
+
+  // Ensure every token key exists in maps
+  for (const token of defs.keys()) {
+    if (!dependencyGraph.has(token)) dependencyGraph.set(token, new Set())
+    if (!cssUsage.has(token)) cssUsage.set(token, new Set())
   }
 
-  return usage
+  return { defs, dependencyGraph, cssUsage }
 }
 
-/**
- * Search for token usage in CSS files (var() references)
- */
-function findTokenUsageInCSS(tokenName, allTokens) {
-  const usage = new Set()
-
-  // Check usage in other tokens (reuse already loaded token data)
-  for (const [otherTokenName, tokenData] of allTokens) {
-    if (otherTokenName === tokenName) continue
-
-    if (tokenData.value.includes(`var(${tokenName})`)) {
-      usage.add(
-        `${tokenData.file}:${tokenData.line} (referenced by ${otherTokenName})`
-      )
-    }
+// Build component indices in a single pass
+async function buildComponentIndices(classToTokens, knownTokens) {
+  const files = globSync('src/**/*.{ts,tsx}', { ignore: CONFIG.excludeFiles })
+  const componentVarUsage = new Map() // token -> Set<location>
+  const classUsageTokens = new Set() // tokens used via classes
+
+  const normalizeClass = (raw) => {
+    // Strip variant prefixes like sm:, hover:, data-[...]: etc.
+    if (!raw) return ''
+    const parts = String(raw).split(':')
+    const core = parts[parts.length - 1]
+    return core
   }
 
-  // Check usage directly in CSS properties using already loaded files
-  const processedFiles = new Set()
-
-  for (const [, tokenData] of allTokens) {
-    const file = tokenData.file
-    if (processedFiles.has(file)) continue
-
-    processedFiles.add(file)
-
-    try {
-      const content = fs.readFileSync(file, 'utf8')
-      const lines = content.split('\n')
+  await Promise.all(
+    files.map(async (file) => {
+      if (!existsSync(file)) return
+      try {
+        const content = await fs.readFile(file, 'utf8')
+
+        // 1) Direct var(--token) usage in TSX
+        for (const m of content.matchAll(/var\(\s*(--[\w-]+)/g)) {
+          const t = m[1]
+          if (!componentVarUsage.has(t)) componentVarUsage.set(t, new Set())
+          const lineNo = content.substring(0, m.index).split('\n').length
+          componentVarUsage
+            .get(t)
+            .add(`${file}:${lineNo} (component var() reference)`) 
+        }
 
-      lines.forEach((line, index) => {
-        // Skip custom property definitions
-        if (line.trim().startsWith(`${tokenName}:`)) return
+        // 1b) Arbitrary utilities referencing tokens directly, e.g. border-(length:--token)
+        for (const m of content.matchAll(/--[a-z0-9-]+/gi)) {
+          const t = m[0]
+          if (knownTokens.has(t)) {
+            classUsageTokens.add(t)
+          }
+        }
 
-        // Look for var() usage in CSS properties
-        if (
-          line.includes(`var(${tokenName})`) &&
-          !line.includes(`${tokenName}:`)
-        ) {
-          usage.add(`${file}:${index + 1} (CSS property)`)
+        // 2) Class-based usage: scan whole file for class-like tokens
+        // Capture words with at least one hyphen, optionally with variant prefixes like sm:, hover:, data-[...]:
+        const classLike = /(^|[^A-Za-z0-9_-])([A-Za-z0-9_-]+(?::[A-Za-z0-9_\[\]-]+)*-[A-Za-z0-9_\[\]-]+)/g
+        for (const m of content.matchAll(classLike)) {
+          const raw = m[2]
+          const cls = normalizeClass(raw)
+          if (!cls) continue
+          const tokens = classToTokens.get(cls)
+          if (!tokens) continue
+          for (const t of tokens) classUsageTokens.add(t)
         }
-      })
-    } catch (error) {
-      // Skip files that can't be read
-    }
-  }
+      } catch {
+        // ignore unreadable files
+      }
+    })
+  )
 
-  return usage
+  return { componentVarUsage, classUsageTokens }
 }
 
-/**
- * Check if token should be whitelisted
- */
-function isWhitelisted(tokenName) {
-  return CONFIG.whitelistPatterns.some((pattern) => pattern.test(tokenName))
-}
-
-/**
- * Check if token should be ignored
- */
-function shouldIgnoreToken(tokenName) {
-  return CONFIG.ignorePatterns.some((pattern) => pattern.test(tokenName))
+function computeClassMaps(tokens) {
+  const tokenToClasses = new Map()
+  const classToTokens = new Map()
+  for (const token of tokens) {
+    const classes = tokenToUtilityClasses(token)
+    tokenToClasses.set(token, classes)
+    for (const c of classes) {
+      if (!classToTokens.has(c)) classToTokens.set(c, new Set())
+      classToTokens.get(c).add(token)
+    }
+  }
+  return { tokenToClasses, classToTokens }
 }
 
-/**
- * Find all tokens that depend on a given token (recursive)
- */
-function findDependentTokens(
-  tokenName,
-  reverseDependencyGraph,
-  visited = new Set()
-) {
-  if (visited.has(tokenName)) return new Set()
-
-  visited.add(tokenName)
-  const dependents = new Set()
-
-  const directDependents = reverseDependencyGraph.get(tokenName) || new Set()
-  for (const dependent of directDependents) {
-    dependents.add(dependent)
-    const transitiveDependents = findDependentTokens(
-      dependent,
-      reverseDependencyGraph,
-      visited
-    )
-    for (const transitive of transitiveDependents) {
-      dependents.add(transitive)
+function propagateUsage(initialUsed, dependencyGraph) {
+  const used = new Set(initialUsed)
+  const queue = [...initialUsed]
+  while (queue.length) {
+    const cur = queue.shift()
+    const deps = dependencyGraph.get(cur)
+    if (!deps) continue
+    for (const d of deps) {
+      if (!used.has(d)) {
+        used.add(d)
+        queue.push(d)
+      }
     }
   }
-
-  return dependents
+  return used
 }
 
-/**
- * Main validation function
- */
-function validateTokenDefinitions() {
+async function validateTokenDefinitions({ profile = false } = {}) {
+  const p = profiled(profile)
+  p.mark('total')
   console.log('🔍 Analyzing token definitions and usage...')
 
-  const allTokens = loadAllTokens()
-  console.log(`📋 Found ${allTokens.size} total tokens\n`)
-
-  const { dependencyGraph, reverseDependencyGraph } =
-    buildTokenDependencyGraph(allTokens)
-
-  // Cache component files content for reuse
-  const componentFilesCache = new Map()
-  const componentFiles = globSync('src/**/*.{ts,tsx}', {
-    ignore: CONFIG.excludeFiles,
-  })
-
-  for (const file of componentFiles) {
-    try {
-      componentFilesCache.set(file, fs.readFileSync(file, 'utf8'))
-    } catch (error) {
-      console.warn(`⚠️  Could not read ${file}: ${error.message}`)
-    }
+  // 1) Token indices
+  p.mark('tokens')
+  const { defs, dependencyGraph, cssUsage } = await buildTokenIndices()
+  const allTokens = Array.from(defs.keys())
+  if (profile) console.log(`⏱️  tokens: ${p.end('tokens').toFixed(1)}ms`)
+  console.log(`📋 Found ${allTokens.length} total tokens\n`)
+
+  // 2) Class maps from tokens
+  p.mark('classmaps')
+  const { classToTokens } = computeClassMaps(allTokens)
+  if (profile)
+    console.log(`⏱️  class maps: ${p.end('classmaps').toFixed(1)}ms`)
+
+  // 3) Component indices
+  p.mark('components')
+  const { componentVarUsage, classUsageTokens } = await buildComponentIndices(
+    classToTokens,
+    new Set(allTokens)
+  )
+  if (profile)
+    console.log(`⏱️  components: ${p.end('components').toFixed(1)}ms`)
+
+  // 4) Seed used set
+  const usedDirect = new Set()
+  for (const t of allTokens) {
+    if (isWhitelisted(t)) usedDirect.add(t)
   }
+  // Direct CSS var() usage (outside token defs)
+  for (const [t, locs] of cssUsage) {
+    if (locs.size > 0) usedDirect.add(t)
+  }
+  // Component var() usage
+  for (const [t, locs] of componentVarUsage) {
+    if (locs.size > 0) usedDirect.add(t)
+  }
+  // Class usage
+  for (const t of classUsageTokens) usedDirect.add(t)
 
-  const unusedTokens = []
-  const usedTokens = new Set()
-  let checkedCount = 0
-
-  for (const [tokenName, tokenData] of allTokens) {
-    checkedCount++
-
-    if (shouldIgnoreToken(tokenName)) {
-      continue
-    }
-
-    if (isWhitelisted(tokenName)) {
-      usedTokens.add(tokenName)
-      continue
-    }
-
-    // Check component usage with cached content
-    const componentUsage = findTokenUsageInComponentsCache(
-      tokenName,
-      componentFilesCache
-    )
-
-    // Check CSS usage
-    const cssUsage = findTokenUsageInCSS(tokenName, allTokens)
-
-    const totalUsage = new Set([...componentUsage, ...cssUsage])
+  // 5) Propagate through dependencies (forward)
+  p.mark('closure')
+  const usedTokens = propagateUsage(usedDirect, dependencyGraph)
+  if (profile) console.log(`⏱️  closure: ${p.end('closure').toFixed(1)}ms`)
 
-    if (totalUsage.size > 0) {
-      usedTokens.add(tokenName)
-    } else {
-      // Check if any dependent tokens are used
-      const dependents = findDependentTokens(tokenName, reverseDependencyGraph)
-      const usedDependents = Array.from(dependents).filter((dep) =>
-        usedTokens.has(dep)
-      )
-
-      if (usedDependents.length > 0) {
-        usedTokens.add(tokenName)
-      } else {
-        unusedTokens.push({
-          name: tokenName,
-          file: tokenData.file,
-          line: tokenData.line,
-          value: tokenData.value,
-        })
-      }
+  // 6) Classify
+  const unusedTokens = []
+  for (const t of allTokens) {
+    if (shouldIgnoreToken(t)) continue
+    if (!usedTokens.has(t)) {
+      const d = defs.get(t)
+      unusedTokens.push({ name: t, file: d.file, line: d.line, value: d.value })
     }
   }
 
   // Report results
   console.log(`\n📊 Validation Summary:`)
-  console.log(`   Total tokens: ${allTokens.size}`)
-  console.log(`   Used tokens: ${usedTokens.size}`)
+  console.log(`   Total tokens: ${allTokens.length}`)
+  console.log(`   Used tokens: ${allTokens.length - unusedTokens.length}`)
   console.log(`   Unused tokens: ${unusedTokens.length}`)
 
   if (unusedTokens.length === 0) {
     console.log('\n✅ All tokens are being used!')
+    if (profile) console.log(`⏱️  total: ${p.end('total').toFixed(1)}ms`)
     return true
-  } else {
-    console.log(
-      `\n⚠️  Found ${unusedTokens.length} potentially unused tokens:\n`
-    )
-
-    // Group by file
-    const tokensByFile = new Map()
-    for (const token of unusedTokens) {
-      if (!tokensByFile.has(token.file)) {
-        tokensByFile.set(token.file, [])
-      }
-      tokensByFile.get(token.file).push(token)
-    }
-
-    for (const [file, tokens] of tokensByFile) {
-      console.log(`📄 ${file}:`)
-      for (const token of tokens) {
-        console.log(`  Line ${token.line}: ${token.name} = ${token.value}`)
-      }
-      console.log()
-    }
-
-    console.log(
-      '💡 Note: These tokens might be used in ways not detected by this script.'
-    )
-    console.log(
-      '   Consider:\n   - Dynamic class generation\n   - External usage\n   - Future planned usage\n'
-    )
+  }
 
-    return false
+  console.log(`\n⚠️  Found ${unusedTokens.length} potentially unused tokens:\n`)
+  const byFile = new Map()
+  for (const tok of unusedTokens) {
+    if (!byFile.has(tok.file)) byFile.set(tok.file, [])
+    byFile.get(tok.file).push(tok)
+  }
+  for (const [file, list] of byFile) {
+    console.log(`📄 ${file}:`)
+    for (const t of list) console.log(`  Line ${t.line}: ${t.name} = ${t.value}`)
+    console.log()
   }
+  console.log(
+    '💡 Note: Tokens might be used dynamically or externally and not detected.'
+  )
+  if (profile) console.log(`⏱️  total: ${p.end('total').toFixed(1)}ms`)
+  return false
 }
 
-/**
- * Run validation
- */
 if (import.meta.url === `file://${process.argv[1]}`) {
-  try {
-    const success = validateTokenDefinitions()
-    process.exit(success ? 0 : 1)
-  } catch (error) {
-    console.error('💥 Validation failed:', error.message)
-    console.error(error.stack)
-    process.exit(1)
-  }
+  const profile = process.argv.includes('--profile')
+  validateTokenDefinitions({ profile })
+    .then((ok) => process.exit(ok ? 0 : 1))
+    .catch((err) => {
+      console.error('💥 Validation failed:', err?.message || err)
+      if (err?.stack) console.error(err.stack)
+      process.exit(1)
+    })
 }
 
-export {
-  validateTokenDefinitions,
-  buildTokenDependencyGraph,
-  findTokenUsageInComponentsCache,
-}
+export { validateTokenDefinitions }

From cf44dccabd1c558fd38f4d8b4ba04acfeb996202 Mon Sep 17 00:00:00 2001
From: Petr Glaser <syreanis+1@gmail.com>
Date: Sat, 6 Sep 2025 01:44:58 +0200
Subject: [PATCH 34/44] fix: improve tokens detection

---
 libs/ui/scripts/validate-token-usage.js | 135 ++++++++++++++++++++----
 1 file changed, 114 insertions(+), 21 deletions(-)

diff --git a/libs/ui/scripts/validate-token-usage.js b/libs/ui/scripts/validate-token-usage.js
index 456523c3c8..7ef6fd730c 100755
--- a/libs/ui/scripts/validate-token-usage.js
+++ b/libs/ui/scripts/validate-token-usage.js
@@ -22,6 +22,7 @@ const NAMESPACE_MAPPINGS = {
     'stroke',
     'outline',
     'ring',
+    'ring-offset',
     'shadow',
     'accent',
     'caret',
@@ -35,6 +36,8 @@ const NAMESPACE_MAPPINGS = {
     'pr',
     'pb',
     'pl',
+    'ps',
+    'pe',
     'm',
     'mx',
     'my',
@@ -42,7 +45,13 @@ const NAMESPACE_MAPPINGS = {
     'mr',
     'mb',
     'ml',
+    'ms',
+    'me',
     'gap',
+    'gap-x',
+    'gap-y',
+    'space-x',
+    'space-y',
     'w',
     'h',
     'max-w',
@@ -54,12 +63,14 @@ const NAMESPACE_MAPPINGS = {
     'bottom',
     'left',
     'inset',
+    'inset-x',
+    'inset-y',
   ],
   text: ['text'],
   'font-weight': ['font'],
   font: ['font'],
   radius: ['rounded'],
-  shadow: ['shadow', 'drop-shadow'],
+  shadow: ['shadow', 'drop-shadow', 'inset-shadow'],
   blur: ['blur'],
   opacity: ['opacity'],
   border: ['border'],
@@ -67,12 +78,6 @@ const NAMESPACE_MAPPINGS = {
 
 // Standard Tailwind utilities to ignore (not custom tokens)
 const IGNORE_PATTERNS = [
-  // CSS variables in parentheses - these use CSS variables directly, not design tokens
-  /^[a-z-]+\([^)]*--[^)]+\)$/,
-
-  // Square bracket notation with CSS variables - ignore these as they use CSS vars directly
-  /^[a-z-]+\[var\(--[^)]+\)\]$/,
-
   // Standard positioning values
   /^(top|right|bottom|left|inset)-(0|px|0\.5|1|1\.5|2|2\.5|3|3\.5|4|5|6|7|8|9|10|11|12|14|16|20|24|28|32|36|40|44|48|52|56|60|64|72|80|96|auto|full|screen|min|max|fit|end)$/,
 
@@ -124,6 +129,22 @@ const IGNORE_PATTERNS = [
   /^(sr-only|not-sr-only|pointer-events|select|resize|appearance|cursor|outline|ring)-.+$/,
 ]
 
+// Precompute prefix helpers for mapping
+const KNOWN_PREFIXES = Object.values(NAMESPACE_MAPPINGS)
+  .flat()
+  .slice()
+  .sort((a, b) => b.length - a.length)
+const PREFIX_TO_NAMESPACES = (() => {
+  const map = new Map()
+  for (const [ns, prefixes] of Object.entries(NAMESPACE_MAPPINGS)) {
+    for (const p of prefixes) {
+      if (!map.has(p)) map.set(p, [])
+      map.get(p).push(ns)
+    }
+  }
+  return map
+})()
+
 /**
  * Extract Tailwind classes from TypeScript/JSX content
  */
@@ -222,14 +243,12 @@ function mapClassToPossibleTokens(className) {
 
   // Parse utility class: prefix-value (non-greedy matching)
   // Match known prefixes first, then everything else as value
-  const knownPrefixes = Object.values(NAMESPACE_MAPPINGS).flat()
   let prefix = null
   let value = null
   // Normalize negative utilities (-m-*, -mt-*, etc.)
   const normalized = baseClass.startsWith('-') ? baseClass.slice(1) : baseClass
   // Try to match against known prefixes (longest first to handle cases like 'ring-offset')
-  const sortedPrefixes = knownPrefixes.sort((a, b) => b.length - a.length)
-  for (const knownPrefix of sortedPrefixes) {
+  for (const knownPrefix of KNOWN_PREFIXES) {
     if (normalized.startsWith(`${knownPrefix}-`)) {
       prefix = knownPrefix
       value = normalized.slice(knownPrefix.length + 1) // +1 for the dash
@@ -242,20 +261,19 @@ function mapClassToPossibleTokens(className) {
   const possibleTokens = []
 
   // Find which namespaces this prefix could belong to
-  for (const [namespace, prefixes] of Object.entries(NAMESPACE_MAPPINGS)) {
-    if (prefixes.includes(prefix)) {
-      // Special handling for font-weight
-      if (namespace === 'font-weight') {
-        possibleTokens.push(`--font-weight-${value}`)
-      } else {
-        possibleTokens.push(`--${namespace}-${value}`)
-      }
+  const namespaces = PREFIX_TO_NAMESPACES.get(prefix) || []
+  for (const namespace of namespaces) {
+    if (namespace === 'font-weight') {
+      possibleTokens.push(`--font-weight-${value}`)
+    } else {
+      possibleTokens.push(`--${namespace}-${value}`)
     }
   }
 
   // Add specific namespace alternatives for spacing-related utilities
   if (['p', 'px', 'py', 'pt', 'pr', 'pb', 'pl', 'ps', 'pe'].includes(prefix)) {
     possibleTokens.push(`--padding-${value}`)
+    possibleTokens.push(`--spacing-${value}`)
   }
 
   if (
@@ -281,10 +299,12 @@ function mapClassToPossibleTokens(className) {
     ].includes(prefix)
   ) {
     possibleTokens.push(`--margin-${value}`)
+    possibleTokens.push(`--spacing-${value}`)
   }
 
-  if (['gap'].includes(prefix)) {
+  if (['gap', 'gap-x', 'gap-y'].includes(prefix)) {
     possibleTokens.push(`--gap-${value}`)
+    possibleTokens.push(`--spacing-${value}`)
   }
 
   if (['w', 'min-w', 'max-w'].includes(prefix)) {
@@ -295,6 +315,20 @@ function mapClassToPossibleTokens(className) {
     possibleTokens.push(`--height-${value}`)
   }
 
+  if (['space-x', 'space-y'].includes(prefix)) {
+    possibleTokens.push(`--space-${value}`)
+    possibleTokens.push(`--spacing-${value}`)
+  }
+
+  if (
+    ['inset', 'inset-x', 'inset-y', 'top', 'right', 'bottom', 'left'].includes(
+      prefix
+    )
+  ) {
+    possibleTokens.push(`--inset-${value}`)
+    possibleTokens.push(`--spacing-${value}`)
+  }
+
   return possibleTokens
 }
 
@@ -308,14 +342,23 @@ function loadDefinedTokens() {
 
   for (const file of tokenFiles) {
     const content = fs.readFileSync(path.join(ROOT, file), 'utf8')
-
-    // Match CSS custom properties
+    // Match CSS custom properties defined in tokens
     const tokenMatches = content.matchAll(/--([a-z][a-z0-9-]*)\s*:/g)
     for (const match of tokenMatches) {
       tokens.add(`--${match[1]}`)
     }
   }
 
+  // Also treat inline style custom properties in components as defined
+  const componentFiles = globSync('src/**/*.{ts,tsx}', { cwd: ROOT, ignore: ['**/*.stories.tsx','**/*.test.tsx','**/*.spec.tsx'] })
+  for (const file of componentFiles) {
+    const content = fs.readFileSync(path.join(ROOT, file), 'utf8')
+    // style={{ '--var': value }} or object entries '--var': value
+    for (const m of content.matchAll(/["'](--[a-z][a-z0-9-]*)["']\s*:/gi)) {
+      tokens.add(m[1])
+    }
+  }
+
   return tokens
 }
 
@@ -331,6 +374,24 @@ function shouldIgnoreClass(className) {
   return IGNORE_PATTERNS.some((pattern) => pattern.test(baseClass))
 }
 
+// Extract tokens referenced directly inside arbitrary utility syntax
+function extractTokensFromArbitraryUtility(className) {
+  const tokens = new Set()
+  // var(--token)
+  for (const m of className.matchAll(/var\(\s*(--[a-z][a-z0-9-]*)/gi)) {
+    tokens.add(m[1])
+  }
+  // key:(--token) or key=--token forms inside parentheses/brackets
+  for (const m of className.matchAll(/[:=]\s*(--[a-z][a-z0-9-]*)/gi)) {
+    tokens.add(m[1])
+  }
+  // Bare --token immediately after an opening parenthesis. Avoid matching icon names like mdi--play in brackets.
+  for (const m of className.matchAll(/\((--[a-z][a-z0-9-]*)/gi)) {
+    tokens.add(m[1])
+  }
+  return Array.from(tokens)
+}
+
 /**
  * Main validation function
  */
@@ -353,8 +414,40 @@ function validateTokenUsage() {
     const fileErrors = []
 
     for (const className of classes) {
+      // 1) Arbitrary utilities with direct token references
+      const arbitraryTokens = extractTokensFromArbitraryUtility(className)
+      if (arbitraryTokens.length > 0) {
+        // Allow some external CSS vars not governed by design tokens
+        const externalAllow = new Set([
+          // Keep truly external/runtime-provided vars here; we now require
+          // --reference-width and --z-index to exist somewhere, per request.
+          '--available-height',
+          '--height',
+          '--border-width-badge-dynamic',
+        ])
+        const tokensNeedingCheck = arbitraryTokens.filter(
+          (t) => !externalAllow.has(t)
+        )
+
+        const anyDefined = tokensNeedingCheck.some((t) => definedTokens.has(t))
+        if (!anyDefined && tokensNeedingCheck.length > 0) {
+          fileErrors.push({
+            className,
+            expectedTokens: tokensNeedingCheck,
+            line:
+              content
+                .split('\n')
+                .findIndex((line) => line.includes(className)) + 1,
+          })
+        }
+        // If tokens are all external or any defined, consider it valid and continue
+        if (tokensNeedingCheck.length === 0 || anyDefined) continue
+      }
+
+      // 2) Ignore standard classes
       if (shouldIgnoreClass(className)) continue
 
+      // 3) Map to possible tokens via namespace rules
       const possibleTokens = mapClassToPossibleTokens(className)
       if (possibleTokens.length === 0) continue
 

From 728252d9a3a6bc317faff15a96b2f7619684bede Mon Sep 17 00:00:00 2001
From: Petr Glaser <syreanis+1@gmail.com>
Date: Sat, 6 Sep 2025 01:55:05 +0200
Subject: [PATCH 35/44] chore: improve menu readability

---
 libs/ui/src/molecules/menu.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/libs/ui/src/molecules/menu.tsx b/libs/ui/src/molecules/menu.tsx
index 7c6616a432..23f5b6db4b 100644
--- a/libs/ui/src/molecules/menu.tsx
+++ b/libs/ui/src/molecules/menu.tsx
@@ -65,8 +65,7 @@ const menuVariants = tv({
       'bg-menu-content-bg border border-menu-content-border',
       'rounded-menu shadow-menu-content-shadow',
       'p-menu-content',
-      '',
-      ' overflow-auto',
+      'overflow-auto',
       'focus:outline-none',
       'data-[state=open]:animate-in',
       'data-[state=closed]:animate-out',

From 541ebed3eca12ea43e5d9b42f3a667b25960992b Mon Sep 17 00:00:00 2001
From: Petr Glaser <syreanis+1@gmail.com>
Date: Sat, 6 Sep 2025 02:12:03 +0200
Subject: [PATCH 36/44] feat: add eslint tailwind beta + fix menu build

! TODO: Fix any in menu.tsx
---
 libs/ui/eslint.config.js       |    2 +-
 libs/ui/package.json           |    2 +-
 libs/ui/src/molecules/menu.tsx |   14 +-
 pnpm-lock.yaml                 | 1044 ++++++++++++++++++++++----------
 4 files changed, 741 insertions(+), 321 deletions(-)

diff --git a/libs/ui/eslint.config.js b/libs/ui/eslint.config.js
index 655b1a092c..0b0f5c5955 100644
--- a/libs/ui/eslint.config.js
+++ b/libs/ui/eslint.config.js
@@ -17,7 +17,7 @@ export default [
     settings: {
       tailwindcss: {
         // For TailwindCSS v4 - point to CSS config file
-        config: 'D:\\Work\\new-engine\\libs\\ui\\src\\tokens\\index.css',
+        config: '/Users/satan/work/new-engine/libs/ui/src/tokens/index.css',
       },
     },
     plugins: {
diff --git a/libs/ui/package.json b/libs/ui/package.json
index e2480542d7..cb4a3c083f 100644
--- a/libs/ui/package.json
+++ b/libs/ui/package.json
@@ -89,7 +89,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "eslint": "^9.0.0",
-    "eslint-plugin-tailwindcss": "npm:@hyoban/eslint-plugin-tailwindcss@4.0.0-alpha.12",
+    "eslint-plugin-tailwindcss": "beta",
     "glob": "^11.0.2",
     "next": "^15.5.0",
     "react": "^19.1.0",
diff --git a/libs/ui/src/molecules/menu.tsx b/libs/ui/src/molecules/menu.tsx
index 23f5b6db4b..a9ecd5eb1d 100644
--- a/libs/ui/src/molecules/menu.tsx
+++ b/libs/ui/src/molecules/menu.tsx
@@ -126,6 +126,7 @@ interface SubmenuItemProps {
   closeOnSelect?: boolean
 }
 
+// ! TODO: Fix menu.machine typing, it should work without 'as any'
 function SubmenuItem({
   item,
   parentApi,
@@ -141,14 +142,11 @@ function SubmenuItem({
     onSelect,
   })
 
-  const submenuApi = menu.connect(
-    submenuService as menu.Service,
-    normalizeProps
-  )
+  const submenuApi = menu.connect(submenuService as any, normalizeProps)
 
   useEffect(() => {
     // Setup parent-child relationship
-    parentApi.setChild(submenuService as menu.Service)
+    parentApi.setChild(submenuService as any)
     submenuApi.setParent(parentService)
   }, [parentApi, submenuApi, submenuService, parentService])
 
@@ -176,7 +174,7 @@ function SubmenuItem({
           key={menuItem.value}
           item={menuItem}
           parentApi={submenuApi}
-          parentService={submenuService as menu.Service}
+          parentService={submenuService as any}
           size={size}
           onCheckedChange={onCheckedChange}
           onSelect={onSelect}
@@ -346,7 +344,7 @@ export function Menu({
     'aria-label': ariaLabel,
   })
 
-  const api = menu.connect(service as menu.Service, normalizeProps)
+  const api = menu.connect(service as any, normalizeProps)
 
   const {
     trigger,
@@ -372,7 +370,7 @@ export function Menu({
           key={item.value}
           item={item}
           parentApi={api}
-          parentService={service as menu.Service}
+          parentService={service as any}
           size={size}
           onCheckedChange={onCheckedChange}
           onSelect={onSelect}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index df7acbc2d5..fba8896fe1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -579,68 +579,68 @@ importers:
   libs/ui:
     dependencies:
       '@zag-js/accordion':
-        specifier: ^1.15.0
-        version: 1.15.0
+        specifier: ^1.22.1
+        version: 1.22.1
       '@zag-js/carousel':
-        specifier: ^1.15.0
-        version: 1.15.0
+        specifier: ^1.22.1
+        version: 1.22.1
       '@zag-js/checkbox':
-        specifier: ^1.15.0
-        version: 1.15.0
+        specifier: ^1.22.1
+        version: 1.22.1
       '@zag-js/combobox':
-        specifier: ^1.15.0
-        version: 1.15.0
+        specifier: ^1.22.1
+        version: 1.22.1
       '@zag-js/dialog':
-        specifier: ^1.15.0
-        version: 1.15.0
+        specifier: ^1.22.1
+        version: 1.22.1
       '@zag-js/i18n-utils':
-        specifier: ^1.15.0
-        version: 1.15.0
+        specifier: ^1.22.1
+        version: 1.22.1
       '@zag-js/menu':
-        specifier: ^1.15.0
-        version: 1.18.2
+        specifier: ^1.22.1
+        version: 1.22.1
       '@zag-js/number-input':
-        specifier: ^1.15.0
-        version: 1.15.0
+        specifier: ^1.22.1
+        version: 1.22.1
       '@zag-js/pagination':
-        specifier: ^1.15.0
-        version: 1.15.0
+        specifier: ^1.22.1
+        version: 1.22.1
       '@zag-js/popover':
-        specifier: ^1.15.0
-        version: 1.15.0
+        specifier: ^1.22.1
+        version: 1.22.1
       '@zag-js/rating-group':
-        specifier: ^1.15.0
-        version: 1.15.0
+        specifier: ^1.22.1
+        version: 1.22.1
       '@zag-js/react':
-        specifier: ^1.15.0
-        version: 1.15.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+        specifier: ^1.22.1
+        version: 1.22.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@zag-js/select':
-        specifier: ^1.15.0
-        version: 1.15.0
+        specifier: ^1.22.1
+        version: 1.22.1
       '@zag-js/slider':
-        specifier: ^1.15.0
-        version: 1.15.0
+        specifier: ^1.22.1
+        version: 1.22.1
       '@zag-js/steps':
-        specifier: ^1.15.0
-        version: 1.15.0
+        specifier: ^1.22.1
+        version: 1.22.1
       '@zag-js/switch':
-        specifier: ^1.15.0
-        version: 1.15.0
+        specifier: ^1.22.1
+        version: 1.22.1
       '@zag-js/tabs':
-        specifier: ^1.15.0
-        version: 1.15.0
+        specifier: ^1.22.1
+        version: 1.22.1
       '@zag-js/toast':
-        specifier: ^1.15.0
-        version: 1.15.0
+        specifier: ^1.22.1
+        version: 1.22.1
       '@zag-js/tooltip':
-        specifier: ^1.15.0
-        version: 1.15.0
+        specifier: ^1.22.1
+        version: 1.22.1
       '@zag-js/tree-view':
-        specifier: ^1.15.0
-        version: 1.15.0
+        specifier: ^1.22.1
+        version: 1.22.1
       tailwind-variants:
-        specifier: ^1.0.0
-        version: 1.0.0(tailwindcss@4.1.8)
+        specifier: ^3.1.0
+        version: 3.1.0(tailwind-merge@3.3.0)(tailwindcss@4.1.8)
     devDependencies:
       '@eslint/js':
         specifier: ^9.0.0
@@ -703,11 +703,14 @@ importers:
         specifier: ^9.0.0
         version: 9.26.0(jiti@2.4.2)
       eslint-plugin-tailwindcss:
-        specifier: npm:@hyoban/eslint-plugin-tailwindcss@4.0.0-alpha.12
-        version: '@hyoban/eslint-plugin-tailwindcss@4.0.0-alpha.12(tailwindcss@4.1.8)'
+        specifier: beta
+        version: 4.0.0-beta.0(tailwindcss@4.1.8)
       glob:
         specifier: ^11.0.2
         version: 11.0.3
+      next:
+        specifier: ^15.5.0
+        version: 15.5.2(@babel/core@7.27.1)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(babel-plugin-macros@3.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.84.0)
       react:
         specifier: ^19.1.0
         version: 19.1.0
@@ -1829,6 +1832,9 @@ packages:
   '@emnapi/runtime@1.4.3':
     resolution: {integrity: sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==}
 
+  '@emnapi/runtime@1.5.0':
+    resolution: {integrity: sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==}
+
   '@emnapi/wasi-threads@1.0.2':
     resolution: {integrity: sha512-5n3nTJblwRi8LlXkJ9eBzu+kZR8Yxcc7ubakyQTFzPMtIhFpUBRbsnc2Dv88IZDIbCDlBiWrknhB4Lsz7mg6BA==}
 
@@ -2302,12 +2308,18 @@ packages:
   '@floating-ui/core@1.7.2':
     resolution: {integrity: sha512-wNB5ooIKHQc+Kui96jE/n69rHFWAVoxn5CAzL1Xdd8FG03cgY3MLO+GF9U3W737fYDSgPWA6MReKhBQBop6Pcw==}
 
+  '@floating-ui/core@1.7.3':
+    resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
+
   '@floating-ui/dom@1.7.1':
     resolution: {integrity: sha512-cwsmW/zyw5ltYTUeeYJ60CnQuPqmGwuGVhG9w0PRaRKkAyi38BT5CKrpIbb+jtahSwUl04cWzSx9ZOIxeS6RsQ==}
 
   '@floating-ui/dom@1.7.2':
     resolution: {integrity: sha512-7cfaOQuCS27HD7DX+6ib2OrnW+b4ZBwDNnCcT0uTyidcmyWb03FnQqJybDBoCnpdxwBSfA94UAYlRCt7mV+TbA==}
 
+  '@floating-ui/dom@1.7.4':
+    resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
+
   '@floating-ui/react-dom@2.1.2':
     resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==}
     peerDependencies:
@@ -2448,12 +2460,6 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
-  '@hyoban/eslint-plugin-tailwindcss@4.0.0-alpha.12':
-    resolution: {integrity: sha512-IKPK7PgoHoo9TEQLccNXLUXdlLxFHNrcr++NIEGtKMNfae99ygUdtLOPsq23zy6V7Xh3njzr/urADwdWYsql4Q==}
-    engines: {node: '>=18.12.0'}
-    peerDependencies:
-      tailwindcss: ^3.4.0 || ^4.0.0
-
   '@iconify/json@2.2.338':
     resolution: {integrity: sha512-wKUTEGEQwkgbY+P84c2njj/D9iEXoKr/Gv6Abwnw+tuElkT57JsGfMFAUpZpaKDL5fTD/+noRRA4L10mFOtIYw==}
 
@@ -2474,110 +2480,232 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@img/sharp-darwin-arm64@0.34.3':
+    resolution: {integrity: sha512-ryFMfvxxpQRsgZJqBd4wsttYQbCxsJksrv9Lw/v798JcQ8+w84mBWuXwl+TT0WJ/WrYOLaYpwQXi3sA9nTIaIg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [darwin]
+
   '@img/sharp-darwin-x64@0.34.1':
     resolution: {integrity: sha512-VfuYgG2r8BpYiOUN+BfYeFo69nP/MIwAtSJ7/Zpxc5QF3KS22z8Pvg3FkrSFJBPNQ7mmcUcYQFBmEQp7eu1F8Q==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [darwin]
 
+  '@img/sharp-darwin-x64@0.34.3':
+    resolution: {integrity: sha512-yHpJYynROAj12TA6qil58hmPmAwxKKC7reUqtGLzsOHfP7/rniNGTL8tjWX6L3CTV4+5P4ypcS7Pp+7OB+8ihA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [darwin]
+
   '@img/sharp-libvips-darwin-arm64@1.1.0':
     resolution: {integrity: sha512-HZ/JUmPwrJSoM4DIQPv/BfNh9yrOA8tlBbqbLz4JZ5uew2+o22Ik+tHQJcih7QJuSa0zo5coHTfD5J8inqj9DA==}
     cpu: [arm64]
     os: [darwin]
 
+  '@img/sharp-libvips-darwin-arm64@1.2.0':
+    resolution: {integrity: sha512-sBZmpwmxqwlqG9ueWFXtockhsxefaV6O84BMOrhtg/YqbTaRdqDE7hxraVE3y6gVM4eExmfzW4a8el9ArLeEiQ==}
+    cpu: [arm64]
+    os: [darwin]
+
   '@img/sharp-libvips-darwin-x64@1.1.0':
     resolution: {integrity: sha512-Xzc2ToEmHN+hfvsl9wja0RlnXEgpKNmftriQp6XzY/RaSfwD9th+MSh0WQKzUreLKKINb3afirxW7A0fz2YWuQ==}
     cpu: [x64]
     os: [darwin]
 
+  '@img/sharp-libvips-darwin-x64@1.2.0':
+    resolution: {integrity: sha512-M64XVuL94OgiNHa5/m2YvEQI5q2cl9d/wk0qFTDVXcYzi43lxuiFTftMR1tOnFQovVXNZJ5TURSDK2pNe9Yzqg==}
+    cpu: [x64]
+    os: [darwin]
+
   '@img/sharp-libvips-linux-arm64@1.1.0':
     resolution: {integrity: sha512-IVfGJa7gjChDET1dK9SekxFFdflarnUB8PwW8aGwEoF3oAsSDuNUTYS+SKDOyOJxQyDC1aPFMuRYLoDInyV9Ew==}
     cpu: [arm64]
     os: [linux]
 
+  '@img/sharp-libvips-linux-arm64@1.2.0':
+    resolution: {integrity: sha512-RXwd0CgG+uPRX5YYrkzKyalt2OJYRiJQ8ED/fi1tq9WQW2jsQIn0tqrlR5l5dr/rjqq6AHAxURhj2DVjyQWSOA==}
+    cpu: [arm64]
+    os: [linux]
+
   '@img/sharp-libvips-linux-arm@1.1.0':
     resolution: {integrity: sha512-s8BAd0lwUIvYCJyRdFqvsj+BJIpDBSxs6ivrOPm/R7piTs5UIwY5OjXrP2bqXC9/moGsyRa37eYWYCOGVXxVrA==}
     cpu: [arm]
     os: [linux]
 
+  '@img/sharp-libvips-linux-arm@1.2.0':
+    resolution: {integrity: sha512-mWd2uWvDtL/nvIzThLq3fr2nnGfyr/XMXlq8ZJ9WMR6PXijHlC3ksp0IpuhK6bougvQrchUAfzRLnbsen0Cqvw==}
+    cpu: [arm]
+    os: [linux]
+
   '@img/sharp-libvips-linux-ppc64@1.1.0':
     resolution: {integrity: sha512-tiXxFZFbhnkWE2LA8oQj7KYR+bWBkiV2nilRldT7bqoEZ4HiDOcePr9wVDAZPi/Id5fT1oY9iGnDq20cwUz8lQ==}
     cpu: [ppc64]
     os: [linux]
 
+  '@img/sharp-libvips-linux-ppc64@1.2.0':
+    resolution: {integrity: sha512-Xod/7KaDDHkYu2phxxfeEPXfVXFKx70EAFZ0qyUdOjCcxbjqyJOEUpDe6RIyaunGxT34Anf9ue/wuWOqBW2WcQ==}
+    cpu: [ppc64]
+    os: [linux]
+
   '@img/sharp-libvips-linux-s390x@1.1.0':
     resolution: {integrity: sha512-xukSwvhguw7COyzvmjydRb3x/09+21HykyapcZchiCUkTThEQEOMtBj9UhkaBRLuBrgLFzQ2wbxdeCCJW/jgJA==}
     cpu: [s390x]
     os: [linux]
 
+  '@img/sharp-libvips-linux-s390x@1.2.0':
+    resolution: {integrity: sha512-eMKfzDxLGT8mnmPJTNMcjfO33fLiTDsrMlUVcp6b96ETbnJmd4uvZxVJSKPQfS+odwfVaGifhsB07J1LynFehw==}
+    cpu: [s390x]
+    os: [linux]
+
   '@img/sharp-libvips-linux-x64@1.1.0':
     resolution: {integrity: sha512-yRj2+reB8iMg9W5sULM3S74jVS7zqSzHG3Ol/twnAAkAhnGQnpjj6e4ayUz7V+FpKypwgs82xbRdYtchTTUB+Q==}
     cpu: [x64]
     os: [linux]
 
+  '@img/sharp-libvips-linux-x64@1.2.0':
+    resolution: {integrity: sha512-ZW3FPWIc7K1sH9E3nxIGB3y3dZkpJlMnkk7z5tu1nSkBoCgw2nSRTFHI5pB/3CQaJM0pdzMF3paf9ckKMSE9Tg==}
+    cpu: [x64]
+    os: [linux]
+
   '@img/sharp-libvips-linuxmusl-arm64@1.1.0':
     resolution: {integrity: sha512-jYZdG+whg0MDK+q2COKbYidaqW/WTz0cc1E+tMAusiDygrM4ypmSCjOJPmFTvHHJ8j/6cAGyeDWZOsK06tP33w==}
     cpu: [arm64]
     os: [linux]
 
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.0':
+    resolution: {integrity: sha512-UG+LqQJbf5VJ8NWJ5Z3tdIe/HXjuIdo4JeVNADXBFuG7z9zjoegpzzGIyV5zQKi4zaJjnAd2+g2nna8TZvuW9Q==}
+    cpu: [arm64]
+    os: [linux]
+
   '@img/sharp-libvips-linuxmusl-x64@1.1.0':
     resolution: {integrity: sha512-wK7SBdwrAiycjXdkPnGCPLjYb9lD4l6Ze2gSdAGVZrEL05AOUJESWU2lhlC+Ffn5/G+VKuSm6zzbQSzFX/P65A==}
     cpu: [x64]
     os: [linux]
 
+  '@img/sharp-libvips-linuxmusl-x64@1.2.0':
+    resolution: {integrity: sha512-SRYOLR7CXPgNze8akZwjoGBoN1ThNZoqpOgfnOxmWsklTGVfJiGJoC/Lod7aNMGA1jSsKWM1+HRX43OP6p9+6Q==}
+    cpu: [x64]
+    os: [linux]
+
   '@img/sharp-linux-arm64@0.34.1':
     resolution: {integrity: sha512-kX2c+vbvaXC6vly1RDf/IWNXxrlxLNpBVWkdpRq5Ka7OOKj6nr66etKy2IENf6FtOgklkg9ZdGpEu9kwdlcwOQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
 
+  '@img/sharp-linux-arm64@0.34.3':
+    resolution: {integrity: sha512-QdrKe3EvQrqwkDrtuTIjI0bu6YEJHTgEeqdzI3uWJOH6G1O8Nl1iEeVYRGdj1h5I21CqxSvQp1Yv7xeU3ZewbA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
   '@img/sharp-linux-arm@0.34.1':
     resolution: {integrity: sha512-anKiszvACti2sGy9CirTlNyk7BjjZPiML1jt2ZkTdcvpLU1YH6CXwRAZCA2UmRXnhiIftXQ7+Oh62Ji25W72jA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
 
+  '@img/sharp-linux-arm@0.34.3':
+    resolution: {integrity: sha512-oBK9l+h6KBN0i3dC8rYntLiVfW8D8wH+NPNT3O/WBHeW0OQWCjfWksLUaPidsrDKpJgXp3G3/hkmhptAW0I3+A==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-linux-ppc64@0.34.3':
+    resolution: {integrity: sha512-GLtbLQMCNC5nxuImPR2+RgrviwKwVql28FWZIW1zWruy6zLgA5/x2ZXk3mxj58X/tszVF69KK0Is83V8YgWhLA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ppc64]
+    os: [linux]
+
   '@img/sharp-linux-s390x@0.34.1':
     resolution: {integrity: sha512-7s0KX2tI9mZI2buRipKIw2X1ufdTeaRgwmRabt5bi9chYfhur+/C1OXg3TKg/eag1W+6CCWLVmSauV1owmRPxA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
 
+  '@img/sharp-linux-s390x@0.34.3':
+    resolution: {integrity: sha512-3gahT+A6c4cdc2edhsLHmIOXMb17ltffJlxR0aC2VPZfwKoTGZec6u5GrFgdR7ciJSsHT27BD3TIuGcuRT0KmQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [s390x]
+    os: [linux]
+
   '@img/sharp-linux-x64@0.34.1':
     resolution: {integrity: sha512-wExv7SH9nmoBW3Wr2gvQopX1k8q2g5V5Iag8Zk6AVENsjwd+3adjwxtp3Dcu2QhOXr8W9NusBU6XcQUohBZ5MA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
 
+  '@img/sharp-linux-x64@0.34.3':
+    resolution: {integrity: sha512-8kYso8d806ypnSq3/Ly0QEw90V5ZoHh10yH0HnrzOCr6DKAPI6QVHvwleqMkVQ0m+fc7EH8ah0BB0QPuWY6zJQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
   '@img/sharp-linuxmusl-arm64@0.34.1':
     resolution: {integrity: sha512-DfvyxzHxw4WGdPiTF0SOHnm11Xv4aQexvqhRDAoD00MzHekAj9a/jADXeXYCDFH/DzYruwHbXU7uz+H+nWmSOQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
 
+  '@img/sharp-linuxmusl-arm64@0.34.3':
+    resolution: {integrity: sha512-vAjbHDlr4izEiXM1OTggpCcPg9tn4YriK5vAjowJsHwdBIdx0fYRsURkxLG2RLm9gyBq66gwtWI8Gx0/ov+JKQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
   '@img/sharp-linuxmusl-x64@0.34.1':
     resolution: {integrity: sha512-pax/kTR407vNb9qaSIiWVnQplPcGU8LRIJpDT5o8PdAx5aAA7AS3X9PS8Isw1/WfqgQorPotjrZL3Pqh6C5EBg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
 
+  '@img/sharp-linuxmusl-x64@0.34.3':
+    resolution: {integrity: sha512-gCWUn9547K5bwvOn9l5XGAEjVTTRji4aPTqLzGXHvIr6bIDZKNTA34seMPgM0WmSf+RYBH411VavCejp3PkOeQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
   '@img/sharp-wasm32@0.34.1':
     resolution: {integrity: sha512-YDybQnYrLQfEpzGOQe7OKcyLUCML4YOXl428gOOzBgN6Gw0rv8dpsJ7PqTHxBnXnwXr8S1mYFSLSa727tpz0xg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [wasm32]
 
+  '@img/sharp-wasm32@0.34.3':
+    resolution: {integrity: sha512-+CyRcpagHMGteySaWos8IbnXcHgfDn7pO2fiC2slJxvNq9gDipYBN42/RagzctVRKgxATmfqOSulgZv5e1RdMg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [wasm32]
+
+  '@img/sharp-win32-arm64@0.34.3':
+    resolution: {integrity: sha512-MjnHPnbqMXNC2UgeLJtX4XqoVHHlZNd+nPt1kRPmj63wURegwBhZlApELdtxM2OIZDRv/DFtLcNhVbd1z8GYXQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [win32]
+
   '@img/sharp-win32-ia32@0.34.1':
     resolution: {integrity: sha512-WKf/NAZITnonBf3U1LfdjoMgNO5JYRSlhovhRhMxXVdvWYveM4kM3L8m35onYIdh75cOMCo1BexgVQcCDzyoWw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ia32]
     os: [win32]
 
+  '@img/sharp-win32-ia32@0.34.3':
+    resolution: {integrity: sha512-xuCdhH44WxuXgOM714hn4amodJMZl3OEvf0GVTm0BEyMeA2to+8HEdRPShH0SLYptJY1uBw+SCFP9WVQi1Q/cw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ia32]
+    os: [win32]
+
   '@img/sharp-win32-x64@0.34.1':
     resolution: {integrity: sha512-hw1iIAHpNE8q3uMIRCgGOeDoz9KtFNarFLQclLxr/LK1VBkj8nby18RjFvr6aP7USRYAjTZW6yisnBWMX571Tw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [win32]
 
+  '@img/sharp-win32-x64@0.34.3':
+    resolution: {integrity: sha512-OWwz05d++TxzLEv4VnsTz5CmZ6mI6S05sfQGEMrNrQcOEERbX46332IvE7pO/EUiw7jUrrS40z/M7kPyjfl04g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [win32]
+
   '@inquirer/checkbox@2.5.0':
     resolution: {integrity: sha512-sMgdETOfi2dUHT8r7TT1BTKOwNvdDGFDXYWtQ2J69SvlYNntk9I/gJe7r5yvMwwsuKnYbuRs3pNhx4tgNck5aA==}
     engines: {node: '>=18'}
@@ -2611,8 +2739,8 @@ packages:
   '@internationalized/number@3.6.1':
     resolution: {integrity: sha512-UVsb4bCwbL944E0SX50CHFtWEeZ2uB5VozZ5yDXJdq6iPZsZO5p+bjVMZh2GxHf4Bs/7xtDCcPwEa2NU9DaG/g==}
 
-  '@internationalized/number@3.6.2':
-    resolution: {integrity: sha512-E5QTOlMg9wo5OrKdHD6edo1JJlIoOsylh0+mbf0evi1tHJwMZfJSaBpGtnJV9N7w3jeiioox9EG/EWRWPh82vg==}
+  '@internationalized/number@3.6.4':
+    resolution: {integrity: sha512-P+/h+RDaiX8EGt3shB9AYM1+QgkvHmJ5rKi4/59k4sg9g58k9rqsRW0WxRO7jCoHyvVbFRRFKmVTdFYdehrxHg==}
 
   '@internationalized/string@3.2.6':
     resolution: {integrity: sha512-LR2lnM4urJta5/wYJVV7m8qk5DrMZmLRTuFhbQO5b9/sKLHgty6unQy1Li4+Su2DWydmB4aZdS5uxBRXIq2aAw==}
@@ -3525,6 +3653,9 @@ packages:
   '@next/env@15.3.2':
     resolution: {integrity: sha512-xURk++7P7qR9JG1jJtLzPzf0qEvqCN0A/T3DXf8IPMKo9/6FfjxtEffRJIIew/bIL4T3C2jLLqBor8B/zVlx6g==}
 
+  '@next/env@15.5.2':
+    resolution: {integrity: sha512-Qe06ew4zt12LeO6N7j8/nULSOe3fMXE4dM6xgpBQNvdzyK1sv5y4oAP3bq4LamrvGCZtmRYnW8URFCeX5nFgGg==}
+
   '@next/eslint-plugin-next@15.2.1':
     resolution: {integrity: sha512-6ppeToFd02z38SllzWxayLxjjNfzvc7Wm07gQOKSLjyASvKcXjNStZrLXMHuaWkhjqxe+cnhb2uzfWXm1VEj/Q==}
 
@@ -3543,6 +3674,12 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@next/swc-darwin-arm64@15.5.2':
+    resolution: {integrity: sha512-8bGt577BXGSd4iqFygmzIfTYizHb0LGWqH+qgIF/2EDxS5JsSdERJKA8WgwDyNBZgTIIA4D8qUtoQHmxIIquoQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@next/swc-darwin-x64@15.3.0':
     resolution: {integrity: sha512-m+eO21yg80En8HJ5c49AOQpFDq+nP51nu88ZOMCorvw3g//8g1JSUsEiPSiFpJo1KCTQ+jm9H0hwXK49H/RmXg==}
     engines: {node: '>= 10'}
@@ -3555,6 +3692,12 @@ packages:
     cpu: [x64]
     os: [darwin]
 
+  '@next/swc-darwin-x64@15.5.2':
+    resolution: {integrity: sha512-2DjnmR6JHK4X+dgTXt5/sOCu/7yPtqpYt8s8hLkHFK3MGkka2snTv3yRMdHvuRtJVkPwCGsvBSwmoQCHatauFQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
   '@next/swc-linux-arm64-gnu@15.3.0':
     resolution: {integrity: sha512-H0Kk04ZNzb6Aq/G6e0un4B3HekPnyy6D+eUBYPJv9Abx8KDYgNMWzKt4Qhj57HXV3sTTjsfc1Trc1SxuhQB+Tg==}
     engines: {node: '>= 10'}
@@ -3567,6 +3710,12 @@ packages:
     cpu: [arm64]
     os: [linux]
 
+  '@next/swc-linux-arm64-gnu@15.5.2':
+    resolution: {integrity: sha512-3j7SWDBS2Wov/L9q0mFJtEvQ5miIqfO4l7d2m9Mo06ddsgUK8gWfHGgbjdFlCp2Ek7MmMQZSxpGFqcC8zGh2AA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
   '@next/swc-linux-arm64-musl@15.3.0':
     resolution: {integrity: sha512-k8GVkdMrh/+J9uIv/GpnHakzgDQhrprJ/FbGQvwWmstaeFG06nnAoZCJV+wO/bb603iKV1BXt4gHG+s2buJqZA==}
     engines: {node: '>= 10'}
@@ -3579,6 +3728,12 @@ packages:
     cpu: [arm64]
     os: [linux]
 
+  '@next/swc-linux-arm64-musl@15.5.2':
+    resolution: {integrity: sha512-s6N8k8dF9YGc5T01UPQ08yxsK6fUow5gG1/axWc1HVVBYQBgOjca4oUZF7s4p+kwhkB1bDSGR8QznWrFZ/Rt5g==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
   '@next/swc-linux-x64-gnu@15.3.0':
     resolution: {integrity: sha512-ZMQ9yzDEts/vkpFLRAqfYO1wSpIJGlQNK9gZ09PgyjBJUmg8F/bb8fw2EXKgEaHbCc4gmqMpDfh+T07qUphp9A==}
     engines: {node: '>= 10'}
@@ -3591,6 +3746,12 @@ packages:
     cpu: [x64]
     os: [linux]
 
+  '@next/swc-linux-x64-gnu@15.5.2':
+    resolution: {integrity: sha512-o1RV/KOODQh6dM6ZRJGZbc+MOAHww33Vbs5JC9Mp1gDk8cpEO+cYC/l7rweiEalkSm5/1WGa4zY7xrNwObN4+Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
   '@next/swc-linux-x64-musl@15.3.0':
     resolution: {integrity: sha512-RFwq5VKYTw9TMr4T3e5HRP6T4RiAzfDJ6XsxH8j/ZeYq2aLsBqCkFzwMI0FmnSsLaUbOb46Uov0VvN3UciHX5A==}
     engines: {node: '>= 10'}
@@ -3603,6 +3764,12 @@ packages:
     cpu: [x64]
     os: [linux]
 
+  '@next/swc-linux-x64-musl@15.5.2':
+    resolution: {integrity: sha512-/VUnh7w8RElYZ0IV83nUcP/J4KJ6LLYliiBIri3p3aW2giF+PAVgZb6mk8jbQSB3WlTai8gEmCAr7kptFa1H6g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
   '@next/swc-win32-arm64-msvc@15.3.0':
     resolution: {integrity: sha512-a7kUbqa/k09xPjfCl0RSVAvEjAkYBYxUzSVAzk2ptXiNEL+4bDBo9wNC43G/osLA/EOGzG4CuNRFnQyIHfkRgQ==}
     engines: {node: '>= 10'}
@@ -3615,6 +3782,12 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  '@next/swc-win32-arm64-msvc@15.5.2':
+    resolution: {integrity: sha512-sMPyTvRcNKXseNQ/7qRfVRLa0VhR0esmQ29DD6pqvG71+JdVnESJaHPA8t7bc67KD5spP3+DOCNLhqlEI2ZgQg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
   '@next/swc-win32-x64-msvc@15.3.0':
     resolution: {integrity: sha512-vHUQS4YVGJPmpjn7r5lEZuMhK5UQBNBRSB+iGDvJjaNk649pTIcRluDWNb9siunyLLiu/LDPHfvxBtNamyuLTw==}
     engines: {node: '>= 10'}
@@ -3627,6 +3800,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@next/swc-win32-x64-msvc@15.5.2':
+    resolution: {integrity: sha512-W5VvyZHnxG/2ukhZF/9Ikdra5fdNftxI6ybeVKYvBPDtyx7x4jPPSNduUkfH5fo3zG0JQ0bPxgy41af2JX5D4Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -7279,86 +7458,80 @@ packages:
     resolution: {integrity: sha512-/HcYgtUSiJiot/XWGLOlGxPYUG65+/31V8oqk17vZLW1xlCoR4PampyePljOxY2n8/3jz9+tIFzICsyGujJZoA==}
     engines: {node: '>=18.12.0'}
 
-  '@zag-js/accordion@1.15.0':
-    resolution: {integrity: sha512-EKNeuKx+lOQ/deCe/ApCjVPxpxpDwT2NXvMPL+YvqXmSv7hAnTLs9fDKjbDUQUMmsyx32BsBd8t6d17DL3rPXg==}
+  '@zag-js/accordion@1.22.1':
+    resolution: {integrity: sha512-P3jsauxnAGKBhuqs9gdivjEiSu7N7KnKRlgWlIpyti35askz8swHsqxsfkc2ASs9tcPKnPvuZDHIxXmJmZSLuQ==}
 
   '@zag-js/anatomy@1.15.0':
     resolution: {integrity: sha512-r0l5I7mSsF35HdwXm22TppNhfVftFuqvKfHvTUw+wQZhni4eUL93HypJD0Fl7mDhtP5zfVGfBwR048OzD0+tCw==}
 
-  '@zag-js/anatomy@1.18.2':
-    resolution: {integrity: sha512-GxwOUfSDrnwU4oROohKBy0TRKPlYjD0dhuFHo52ZJLSPDkr8H8DlE/y3rFlb6BaGVO/bHjCUeJlaZzZgIpFK0g==}
+  '@zag-js/anatomy@1.22.1':
+    resolution: {integrity: sha512-I5OvOuJBt6hEqbpqVkWCOEoDfGMnKuLx+S0h7Un5SyAwnif3F1dSqDYujU28bCy8FtKs36vsq/izxufXyiXSEg==}
 
-  '@zag-js/aria-hidden@1.15.0':
-    resolution: {integrity: sha512-3ogglAasycekTHI34ph16mqwM+VtHCOMtrFHWzPwB16itV5oDEeeMNdQXenHSSyQ/07nJ2QsRGFFjGhPm1kWNg==}
+  '@zag-js/aria-hidden@1.22.1':
+    resolution: {integrity: sha512-vPfAE35BfYPS1UbYRcNw8/kMl7uayE7LyRncK/gPMnoQMjmEKW0nXmD5WlCHFLdGX9WFGYTIde8k4U8ay+oqcg==}
 
   '@zag-js/carousel@1.15.0':
     resolution: {integrity: sha512-ZI9H34f2utdJ2Ek6GZa+iuRH4eC99GHD/VEOKLdGani8uadpT2v8M5kUwPGrlAJq9SiPbQ2UuXBmCkmurPQqdA==}
 
-  '@zag-js/checkbox@1.15.0':
-    resolution: {integrity: sha512-6lQvPQNJXt7R0xxdpOuh2qtmAkzdBdqSvFIH7fE6GJzJ/AWiRZh0X+9deLQ76CN4EDUdxizEe7MlQfTI3a56aw==}
+  '@zag-js/carousel@1.22.1':
+    resolution: {integrity: sha512-bFbCRe5xarBtD3NnozHmCmrGJ+nLRhqLQFq+RG13fl1hlhUJaJ5AsS7e8L1r2ZLdbVVrsB0lUuW/ocfJ/G4MSw==}
+
+  '@zag-js/checkbox@1.22.1':
+    resolution: {integrity: sha512-A/cZb89Aeb2k/KGl3ITS2fuLBXwq6Rnq9aFirfKs/UHrY16fopRbRjfqOxF6wm8lWoFk3gqmRGgybo8qsIfxog==}
 
-  '@zag-js/collection@1.15.0':
-    resolution: {integrity: sha512-oC3i6c/oP/FuNPsfgoC1reSXbAvDBGXl0HU3CcvXiNLHbjg2ek8J7kbow6MNuXK6chiksiOHbzKxHl2Oo0Ox7A==}
+  '@zag-js/collection@1.22.1':
+    resolution: {integrity: sha512-jjeSKALTH3iK2vTI6uAh2NCtS9n+e2r1cGERKCfNkbt86U6VSp9xiXqalUsEI4ovNIPcgg0+/nzixoVwFO1Vgg==}
 
-  '@zag-js/combobox@1.15.0':
-    resolution: {integrity: sha512-HBck3wcEeIOa7IQMsUkUKbm9cAU7bjoklIyq2zFGn90k7DcDa++oXK9Z2pmcd4TPoBYiyVuuXucaCcjmLX8V/Q==}
+  '@zag-js/combobox@1.22.1':
+    resolution: {integrity: sha512-N4tGTmezfHGaKB0+aDB5yMuVzBv2ShgsAx1uizom6ElcvlYD2rsQTr3xLc4wyOR7fx0z6fFDo1+63/Dt3y0t4A==}
 
   '@zag-js/core@1.15.0':
     resolution: {integrity: sha512-P/8F3IXabMhpFnc6hC7GDg3rvUnvY27cuZU04hxjUqTH6+SfORIA/Uvqd4ekhC+dIprL9jicnFrmGgcyelyxfQ==}
 
-  '@zag-js/core@1.18.2':
-    resolution: {integrity: sha512-feKLPL8OMJIegwiGwQwoKI4iB9vA/Gf4d5IOZ+KH0X/5S4lCJ3dswmki+Jtu2Ce2PiyYc7oClvG3CM5mfywtfQ==}
-
-  '@zag-js/dialog@1.15.0':
-    resolution: {integrity: sha512-Vlt5vySs4u8c8xBEh2JMUvRfPc+aaVEIIUtFVxpc2ORWhBXs9glijyp1yf3rNHJhjj8gqqhF5sEvs3yUTTAk+Q==}
+  '@zag-js/core@1.22.1':
+    resolution: {integrity: sha512-4BNrwO9Tadq2Z0d2xSSQs4O/o3OarEHzXM2FQqx46vrwSE57qUghnZex429ZQ51fuk8AL5Lowt26a9JxE9sVPg==}
 
-  '@zag-js/dismissable@1.15.0':
-    resolution: {integrity: sha512-yv575KWy8gA1p4aajOiY5l/nBQ3Xw+Mrjpungp1+wiGd/98eNAIKJ6/adldfbE1Ygd/Q4Dx2VQ7D1AmiTdwUSw==}
+  '@zag-js/dialog@1.22.1':
+    resolution: {integrity: sha512-b5KwMPYKc9RenZwxrAAHu6aHPz7tqPy4Mxa/YR5zo1pXBV4amA7u2xnqyncRaK65Z7y5QKmpmDuBp+0PnXxNIA==}
 
-  '@zag-js/dismissable@1.18.2':
-    resolution: {integrity: sha512-uv4FE62TuxWR/wSdr3wfQ9GRW2EHJYt4/HvhVH+mFno2JVRwm9/rSHDUc6QILabXrDVfnp/PdkPJ1rtsIzoOGA==}
+  '@zag-js/dismissable@1.22.1':
+    resolution: {integrity: sha512-0DzbykJu9QoXYw4Zcjte69Mtk6ThNRCXWxxCKBf930V8Bw3Ha7vfY5bgdb4RFT5K+BQP3E8vLT+PzIaDINn2Xw==}
 
   '@zag-js/dom-query@1.15.0':
     resolution: {integrity: sha512-z8H/j/Zs0eZEsGpbonScmlKSv0jEXKiAwUCrvQ9Mt6Gz9n0CQRM3MkFclSsM8aeiSv6qKLlhPfkzjl18OLkbgA==}
 
-  '@zag-js/dom-query@1.18.2':
-    resolution: {integrity: sha512-/yUfu4u527vL32mDYwoziEWfLLWfIBenwBo/v8JcDVJwrtBw/1OEPFU7lK9iDa7BAKaIBAGhY0pwsiFLT5UxzA==}
+  '@zag-js/dom-query@1.22.1':
+    resolution: {integrity: sha512-mtvGj2z3rkl40mkjd+QwoOHvxqpiOkY4mtVjzNzgzcbVtUN63Mz7giW8OZB+KLy37hwFX0B8JfiQncU8IOHNpw==}
 
-  '@zag-js/focus-trap@1.15.0':
-    resolution: {integrity: sha512-N8m/JpNe1gHUPJlr0hyGUdHg6pAuyJKkBaX0s38cyVntlo2CJhyAWZGuUdocpT2Q3HNPql666FNnH986rYPDKQ==}
+  '@zag-js/focus-trap@1.22.1':
+    resolution: {integrity: sha512-6W9cG0LEVICt0srVfWSpamKzsnRxXMdl3gV+GQ5HvkCCk1Sw6Io4tc3QvSSvaWcfyhM07feerOsa2ah7qiT/ig==}
 
-  '@zag-js/focus-visible@1.15.0':
-    resolution: {integrity: sha512-TPXBf47tj6L0hhZNl9AWhuLoVzfPaNPM+/Gw8t9l9Whvy6v9rk/rqUCidY5LsrQuPiKTi7s5WI5J+Wod8ib3gw==}
+  '@zag-js/focus-visible@1.22.1':
+    resolution: {integrity: sha512-TuBEux3UTivo9VXPPe79q9JfTwaP/uIshL1KPifg51ofGYesWjMGeE5S5MAuaSzUmH9+3CpnwP7h7f65s3D0kw==}
 
-  '@zag-js/i18n-utils@1.15.0':
-    resolution: {integrity: sha512-anxSbT8kLbJaFJFSb0Ork2j/Lp+XVfMNCIgiBR2BuqUlfX72k23TIJvRxAfwNIkUfs0L8ikaSgLss9OwS4mAnw==}
+  '@zag-js/i18n-utils@1.22.1':
+    resolution: {integrity: sha512-45KUYB9tu1br6NmgtaNW9NviozYCYUxJ8aZTI/Y6vKotXK/Pn3bIlaiOaq4Zel7TalGYT8gVnwgPe2E6H5sqTg==}
 
-  '@zag-js/interact-outside@1.15.0':
-    resolution: {integrity: sha512-OwBf/iesQGU9Oq3xe/tcK7gu7xipiGWsmwl2CcScr0fTp3BIMbQywHS928IgPk1DxA8KTHodY8wBjoY1dskfRA==}
+  '@zag-js/interact-outside@1.22.1':
+    resolution: {integrity: sha512-+iZ3xHC9+jVo2FCC4B9c9ntcXv19shVOqQGDr2cD30Hwmwtm9kCOdVydMqv3Lp3UhR8a105MXEVUAKg53WbCoA==}
 
-  '@zag-js/interact-outside@1.18.2':
-    resolution: {integrity: sha512-X2S3h/+MM5I83EnWihR2eHJYd1xbqfWeCO+Lz05V6+aWmJHpRPrniHGoVKyKocpSqmgQPrUMqY9ONmVuq4EPRA==}
+  '@zag-js/menu@1.22.1':
+    resolution: {integrity: sha512-a5pgQgcpVTVyY6JM8k1WGqelHVKSPwV2CwOv2oGjHWXIr2fpRCAKqZRtytE5PvUP/CZArk8bCjatmgOWe1RdPQ==}
 
-  '@zag-js/menu@1.18.2':
-    resolution: {integrity: sha512-jLxJY0Zg7ogMEJbo6VSDWWbxLGgU0LO1onhP3qqgl/aK1P+Rg5uZC5cq4e2OOjMz1DdMc6WLyjEvcD5pIt8gxQ==}
+  '@zag-js/number-input@1.22.1':
+    resolution: {integrity: sha512-E4DROYvSo5TFJMkSmnq+f75wSTL/N7SK6MR8ssNlA2oQp69iVWXhIlFLe4knekX02QJzK1MF97aVU332kAYTeQ==}
 
-  '@zag-js/number-input@1.15.0':
-    resolution: {integrity: sha512-+kK8kyXJhIAbEUnswoMDR+DSJUmvDNIOW0ffuZ9pbfukN3p6zaA3/dCp2Dtg3bQS7hGrFWgtrdejJ8l+mVvUAA==}
+  '@zag-js/pagination@1.22.1':
+    resolution: {integrity: sha512-Jeix+sXcfMPm5jer2W4PHSUCgu9a11aC/AOBk6dkxbX8XL23fYXJu5YyOVVq0iQIDWzX4Uij1N/vBha64ARmcA==}
 
-  '@zag-js/pagination@1.15.0':
-    resolution: {integrity: sha512-Z62Q41fQPWqk59QyJk+9J0Ad3H9DCqZ0zZutI6iH8DdzT0A0xxmT6zhup6DM/8C8h0OLlaHFTWQnj0RdRNrnXg==}
+  '@zag-js/popover@1.22.1':
+    resolution: {integrity: sha512-27VVkhaEOtiHJYj2j++AzYlAzpMcW0ED05TV9wIT1q0EYzASWxweSBajbnCiQf9TIYzCImDiNVDaCMl5D+TamQ==}
 
-  '@zag-js/popover@1.15.0':
-    resolution: {integrity: sha512-cdzEed3zcGbjSgPQnQnrsuXo2hVVslmSNwQbU5dHcNzG1uxxmtPCIMVeBUmGyJbAFF5XQpKCq/7mIr26dT73vw==}
+  '@zag-js/popper@1.22.1':
+    resolution: {integrity: sha512-vBI5WpvE/3ugsimjZaNisOwcECiYfzc+3LIJwaU8od62kInZ1XF6m096BvV7JGwP0FjkMPJrgjcv7weDtY2iDQ==}
 
-  '@zag-js/popper@1.15.0':
-    resolution: {integrity: sha512-Ra/0Ko423KN+8D4+mIFFkeTn9uaHfpxn6UUNIWwZKoiJQvED8DH4dPbLbmvGEoKp6qmisnRHAzi71NLgEhk0Mw==}
-
-  '@zag-js/popper@1.18.2':
-    resolution: {integrity: sha512-RAhYpUhDyEjW40787d2FGcPHga8Z6t3vUmNLcoAS5FhIPlZcyPNmUo6PEPndo3Or8ZKrTNFzrU4qOQZ3Jvbf0w==}
-
-  '@zag-js/rating-group@1.15.0':
-    resolution: {integrity: sha512-omGKN97FhplFwBX9J/Mj7BCZuwFXSXssSVTKU7Yp2d1Cmxhez4+Ju7KdSRNnIoWB4OxFCxwZyaAPTcg3E0Pjrg==}
+  '@zag-js/rating-group@1.22.1':
+    resolution: {integrity: sha512-QxBK+hpfkQ4yFHUr1YOSwEQ3LuTrdS32J9zV8UyHu8HbgwzfR7L8ZAa1PUUmG65tupzua2pbn1NioOkMvDmBOQ==}
 
   '@zag-js/react@1.15.0':
     resolution: {integrity: sha512-YSp9QBkdeBfZt4nVhJW+CUd5sNEEVAuwkmoZWDFUoDoWSAXwzSKuHCmTm5/8DaXg1IZD2bMrXgMNDqZv2x0hZw==}
@@ -7366,53 +7539,65 @@ packages:
       react: '>=18.0.0'
       react-dom: '>=18.0.0'
 
-  '@zag-js/rect-utils@1.18.2':
-    resolution: {integrity: sha512-g26aaea2vWOG9Ahg1Y8HSRmOwMbgWjStvIo+KtP9ToKwoulQ7+xB3x13O3eDyGed2YBLnFjBj8lZB5Epwq39iQ==}
+  '@zag-js/react@1.22.1':
+    resolution: {integrity: sha512-TcIKkNo9EFel+d92nb7104voKJNDiMkqq9nn7Ozq/TE8A62JPf5zk8y8zqoxTbGDTTk+tDjW7Sm1IKb4r6rX4w==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+
+  '@zag-js/rect-utils@1.22.1':
+    resolution: {integrity: sha512-jtI03SR9kF0AcBffoFI/TKXn5KyhjNCtsGlqbWw0dKbhWTNy1v432FDC5opmmnH8W5LjjWebIzo4QtO5+632QQ==}
 
-  '@zag-js/remove-scroll@1.15.0':
-    resolution: {integrity: sha512-vdWSAdgY8wJ7s4YeaKwTMwmZiRMBxCehmdktSxBWvwtAjU1cM3UWvjmZ9E6INJrQXxH9vDpe/rpFSyv1guIQIw==}
+  '@zag-js/remove-scroll@1.22.1':
+    resolution: {integrity: sha512-2TrS8ljp8SADX5xRB/+KGBCBYbYTeH0k5IEalG2rt8ReNyNAW1JfCrm53KCVoCg9YmxKF3MrxPgPT83MNFsJhQ==}
 
   '@zag-js/scroll-snap@1.15.0':
     resolution: {integrity: sha512-/LfBlsjoR4tVL3Djus3k9jKLhwC2ApdHTACxEc72TAewoPe4M8icnSDLXmKHvwwOhzK0HlFz8wGm6ZncAbQbuA==}
 
-  '@zag-js/select@1.15.0':
-    resolution: {integrity: sha512-4urUBADzhrsGEO/UsqHdjsgmDdF15Zzeid3ejEbIMTrkt2/mMMcQ1CShuxtsWqm2EUBz/N1kOcZlE6Tq69n7Xg==}
+  '@zag-js/scroll-snap@1.22.1':
+    resolution: {integrity: sha512-kctqJiteALaavoHEpYBDSPgUErIdwAoY5jcrU4Mq5L8FjtI4tSNr8BWcXzSBK2UVqaKN+vDo+PDcj7XIXTUQJA==}
+
+  '@zag-js/select@1.22.1':
+    resolution: {integrity: sha512-sWq0RqlJvmj0heJDpfS3OfM1ynSSCW+fYY5v3T/QyH4qneqB8OJjgh8EEBaHlOkbqv/oBsk855U8/o6jegfUxw==}
 
-  '@zag-js/slider@1.15.0':
-    resolution: {integrity: sha512-NYIsn3GKXIoPmvkDXsQmw9wdYg3QHbYHXnZ8Ewl2fVubN7S5mDlHSZs2iDVsBvX+a4RChWFRO6JHX8E1+BncOg==}
+  '@zag-js/slider@1.22.1':
+    resolution: {integrity: sha512-aricrX99r21RAS9TyPNTJL8gE8mNRSQMy7TIXTa9aoeRjN0Cf6+PSksKfmPdP9l249/nplGqvC25Ck7XUVJn6A==}
 
-  '@zag-js/steps@1.15.0':
-    resolution: {integrity: sha512-VoIDcDIEErZawmW2m0yTGlffqjfRuSwR37K9LdSRy8Q4Qzz3wV7jASaTjMhTya1hlreJ7tJg+Qbjqowvw9GndA==}
+  '@zag-js/steps@1.22.1':
+    resolution: {integrity: sha512-eJCHbHG9aGAbzb/IQCqpmk6fmwSmIfocAxNKVTljroD6OHkBtqgaZQVS3q4xyjz61nB/d/0ZlsvpCVjm1EhwBw==}
 
   '@zag-js/store@1.15.0':
     resolution: {integrity: sha512-ecqjcy3b1GsULpsT8RVJV9KDaikajRN0XRg48HMvaGkaPIvxI6esyrE6RKnShuqr2eVXIPghgBnCnrJUev4UlA==}
 
-  '@zag-js/switch@1.15.0':
-    resolution: {integrity: sha512-2CaAUTi7jM4lJjCYoSE1HWlFPCifI5GR+hufWOCYKpanf8VA/LM+t/a2Aq5QoBsWdcQv3B9mHxF/aVTDbnCKPQ==}
+  '@zag-js/store@1.22.1':
+    resolution: {integrity: sha512-KrMWi/Fa4cqOjx2zDSMIu6vztFYik+V3K6VPWRVONM4FkboLpTqAEayzwgTTNqMK9iYYZIYjhiPhAVLW9iLuBg==}
 
-  '@zag-js/tabs@1.15.0':
-    resolution: {integrity: sha512-voHWpibC1TKLmbAJfixOesxrCio7wK+gdLRvh7Xh5u+3VSsT2fP2wEw3ySkJbpw3MpEE7R2OWkInbCV/SwPcsA==}
+  '@zag-js/switch@1.22.1':
+    resolution: {integrity: sha512-ipmBHEqtcrPYr5WS5Juj5dt4GFIqr81NYVNe8RHMW8jIHgHhRCRj3TokGXVlZ7HdseCKTTNNrcvRFBr1sJBbOw==}
 
-  '@zag-js/toast@1.15.0':
-    resolution: {integrity: sha512-0RupMCXyGr7/La4Zlei7VqBF0VPNJelGd7zimLboe+IKZyy4Ypi/N2IX14rl8JZQDsDEgkLUl33xrSk/9RW2nQ==}
+  '@zag-js/tabs@1.22.1':
+    resolution: {integrity: sha512-B0WHW36uuR+pu/24X0yI4eyvSwo7WmqOc5C3ohZHOf03zkmMJdtMtVQSotKr7qhGMt5updCgs68MR7jAmmc1Lw==}
 
-  '@zag-js/tooltip@1.15.0':
-    resolution: {integrity: sha512-sOpVECyfdS4RZBx46mSV+RPc9C5k9JvYQYUfoOVWh0E5RLSEz5bQm5xxctKOHfCOv+vJNTfG5gP596B1r2+Fkw==}
+  '@zag-js/toast@1.22.1':
+    resolution: {integrity: sha512-cxcfbMftA//ggOAlxG3q04WZVL/mMVklvtQ2rSyj3oRmnwocJPYXtJzKIRazWBjji3u3BOA+ZeOI1AcGrfp/TQ==}
 
-  '@zag-js/tree-view@1.15.0':
-    resolution: {integrity: sha512-wqdd+hu1bDOCWtnZ8MarRFHqbZF2t8qKBM3kO42IBq7jTI/93LCkHSlceEPft9dgZ6Ea9km0YJMHhoTqCPZ/fw==}
+  '@zag-js/tooltip@1.22.1':
+    resolution: {integrity: sha512-0ub0p22CzYnaXv0prAnWNjqUBkdw4nO4yGk5qntaodajpLNQ4gSdq7Hj4afHzJqwbKAkwb3KzJFqcqIm9Y/dfw==}
+
+  '@zag-js/tree-view@1.22.1':
+    resolution: {integrity: sha512-AQmOn1mB+nLJEaq0xdSVnTI8Vt3nB3OweqdB12jkbdIOcWI9eY0RfhiNHC0k0mgAw+dMjyn84op/gOd9VVdtmA==}
 
   '@zag-js/types@1.15.0':
     resolution: {integrity: sha512-lV2ov2M07BlmjDUCSwBeHxPApHI3oAiLytG94AqcYvQ0BtsCRo5T60yRQ0syFc6fHf0e9+kwt89uoIgfGFYfmw==}
 
-  '@zag-js/types@1.18.2':
-    resolution: {integrity: sha512-iyKwrhRLbMs+y22j8PdqdW7waIo98jbneNI4MmXOVbQUe2AgSfDnapL/JuO58hJ7vshdYrmkcoMzehwNSkYKXw==}
+  '@zag-js/types@1.22.1':
+    resolution: {integrity: sha512-lvpDSMR96e7H7TdwOiVpMzj6css5Ydix1nBi7BlmjME6v5OPR0KZwVDGD6h5UtTeVjPq8dPaqM8TJWw+QwbQSw==}
 
   '@zag-js/utils@1.15.0':
     resolution: {integrity: sha512-XctFny5H8C00BsougV40Yp0qVEj9M2d/NRme7B33mon9wG+3hscZwP6miJmF6BYI5Pgu6e2P0Sv45FddQU1Tkg==}
 
-  '@zag-js/utils@1.18.2':
-    resolution: {integrity: sha512-tGrG2Qnm5qf95VJEBHunrEDHO0OJZGU81FoZU2VNC+YkRmD4C1phcvyxVLklDFT569rNxIHmFn/6gr9D7HmPrQ==}
+  '@zag-js/utils@1.22.1':
+    resolution: {integrity: sha512-VXY4gjHaTENHW+wjnKKENZ2jcaW0vnG2a5lYEMuZR4dpNCKH217yFr/bCNrI44y2s1W3LWhWmpEjfZluP6udYg==}
 
   '@zkochan/js-yaml@0.0.7':
     resolution: {integrity: sha512-nrUSn7hzt7J6JWgWGz78ZYI8wj+gdIJdk0Ynjpp8l+trkn58Uqsf6RYrYkEK+3X18EX+TNdtJI0WxAtc+L84SQ==}
@@ -8896,6 +9081,12 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
 
+  eslint-plugin-tailwindcss@4.0.0-beta.0:
+    resolution: {integrity: sha512-WWCajZgQu38Sd67ZCl2W6i3MRzqB0d+H8s4qV9iB6lBJbsDOIpIlj6R1Fj2FXkoWErbo05pZnZYbCGIU9o/DsA==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      tailwindcss: ^3.4.0 || ^4.0.0
+
   eslint-scope@5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
@@ -10720,6 +10911,27 @@ packages:
       sass:
         optional: true
 
+  next@15.5.2:
+    resolution: {integrity: sha512-H8Otr7abj1glFhbGnvUt3gz++0AF1+QoCXEBmd/6aKbfdFwrn0LpA836Ed5+00va/7HQSDD+mOoVhn3tNy3e/Q==}
+    engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      '@playwright/test': ^1.51.1
+      babel-plugin-react-compiler: '*'
+      react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@playwright/test':
+        optional: true
+      babel-plugin-react-compiler:
+        optional: true
+      sass:
+        optional: true
+
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
 
@@ -11929,6 +12141,10 @@ packages:
     resolution: {integrity: sha512-1j0w61+eVxu7DawFJtnfYcvSv6qPFvfTaqzTQ2BLknVhHTwGS8sc63ZBF4rzkWMBVKybo4S5OBtDdZahh2A1xg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
 
+  sharp@0.34.3:
+    resolution: {integrity: sha512-eX2IQ6nFohW4DbvHIOLRB3MHFpYqaqvXd3Tp5e/T/dSH83fxaNJQRvDMhASmkNTsNTVF2/OOopzRCt7xokgPfg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -12269,6 +12485,16 @@ packages:
     peerDependencies:
       tailwindcss: '*'
 
+  tailwind-variants@3.1.0:
+    resolution: {integrity: sha512-ieiYaEfUr+sNhw/k++dosmZfVA4VIG5bV+G1eGdJSC4FcflqQv0iSIlOLj/RbzRuTu/VrIiNSlwh1esBM3BXUg==}
+    engines: {node: '>=16.x', pnpm: '>=7.x'}
+    peerDependencies:
+      tailwind-merge: '>=3.0.0'
+      tailwindcss: '*'
+    peerDependenciesMeta:
+      tailwind-merge:
+        optional: true
+
   tailwindcss-animate@1.0.7:
     resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
     peerDependencies:
@@ -14558,6 +14784,11 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@emnapi/runtime@1.5.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@emnapi/wasi-threads@1.0.2':
     dependencies:
       tslib: 2.8.1
@@ -14827,6 +15058,10 @@ snapshots:
     dependencies:
       '@floating-ui/utils': 0.2.10
 
+  '@floating-ui/core@1.7.3':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
   '@floating-ui/dom@1.7.1':
     dependencies:
       '@floating-ui/core': 1.7.1
@@ -14837,6 +15072,11 @@ snapshots:
       '@floating-ui/core': 1.7.2
       '@floating-ui/utils': 0.2.10
 
+  '@floating-ui/dom@1.7.4':
+    dependencies:
+      '@floating-ui/core': 1.7.3
+      '@floating-ui/utils': 0.2.10
+
   '@floating-ui/react-dom@2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@floating-ui/dom': 1.7.1
@@ -15017,14 +15257,6 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
-  '@hyoban/eslint-plugin-tailwindcss@4.0.0-alpha.12(tailwindcss@4.1.8)':
-    dependencies:
-      fast-glob: 3.3.3
-      postcss: 8.5.3
-      synckit: 0.11.8
-      tailwind-api-utils: 1.0.3(tailwindcss@4.1.8)
-      tailwindcss: 4.1.8
-
   '@iconify/json@2.2.338':
     dependencies:
       '@iconify/types': 2.0.0
@@ -15058,79 +15290,165 @@ snapshots:
       '@img/sharp-libvips-darwin-arm64': 1.1.0
     optional: true
 
+  '@img/sharp-darwin-arm64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.2.0
+    optional: true
+
   '@img/sharp-darwin-x64@0.34.1':
     optionalDependencies:
       '@img/sharp-libvips-darwin-x64': 1.1.0
     optional: true
 
+  '@img/sharp-darwin-x64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.2.0
+    optional: true
+
   '@img/sharp-libvips-darwin-arm64@1.1.0':
     optional: true
 
+  '@img/sharp-libvips-darwin-arm64@1.2.0':
+    optional: true
+
   '@img/sharp-libvips-darwin-x64@1.1.0':
     optional: true
 
+  '@img/sharp-libvips-darwin-x64@1.2.0':
+    optional: true
+
   '@img/sharp-libvips-linux-arm64@1.1.0':
     optional: true
 
+  '@img/sharp-libvips-linux-arm64@1.2.0':
+    optional: true
+
   '@img/sharp-libvips-linux-arm@1.1.0':
     optional: true
 
+  '@img/sharp-libvips-linux-arm@1.2.0':
+    optional: true
+
   '@img/sharp-libvips-linux-ppc64@1.1.0':
     optional: true
 
+  '@img/sharp-libvips-linux-ppc64@1.2.0':
+    optional: true
+
   '@img/sharp-libvips-linux-s390x@1.1.0':
     optional: true
 
+  '@img/sharp-libvips-linux-s390x@1.2.0':
+    optional: true
+
   '@img/sharp-libvips-linux-x64@1.1.0':
     optional: true
 
+  '@img/sharp-libvips-linux-x64@1.2.0':
+    optional: true
+
   '@img/sharp-libvips-linuxmusl-arm64@1.1.0':
     optional: true
 
+  '@img/sharp-libvips-linuxmusl-arm64@1.2.0':
+    optional: true
+
   '@img/sharp-libvips-linuxmusl-x64@1.1.0':
     optional: true
 
+  '@img/sharp-libvips-linuxmusl-x64@1.2.0':
+    optional: true
+
   '@img/sharp-linux-arm64@0.34.1':
     optionalDependencies:
       '@img/sharp-libvips-linux-arm64': 1.1.0
     optional: true
 
+  '@img/sharp-linux-arm64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.2.0
+    optional: true
+
   '@img/sharp-linux-arm@0.34.1':
     optionalDependencies:
       '@img/sharp-libvips-linux-arm': 1.1.0
     optional: true
 
+  '@img/sharp-linux-arm@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.2.0
+    optional: true
+
+  '@img/sharp-linux-ppc64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-ppc64': 1.2.0
+    optional: true
+
   '@img/sharp-linux-s390x@0.34.1':
     optionalDependencies:
       '@img/sharp-libvips-linux-s390x': 1.1.0
     optional: true
 
+  '@img/sharp-linux-s390x@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.2.0
+    optional: true
+
   '@img/sharp-linux-x64@0.34.1':
     optionalDependencies:
       '@img/sharp-libvips-linux-x64': 1.1.0
     optional: true
 
+  '@img/sharp-linux-x64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.2.0
+    optional: true
+
   '@img/sharp-linuxmusl-arm64@0.34.1':
     optionalDependencies:
       '@img/sharp-libvips-linuxmusl-arm64': 1.1.0
     optional: true
 
+  '@img/sharp-linuxmusl-arm64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.0
+    optional: true
+
   '@img/sharp-linuxmusl-x64@0.34.1':
     optionalDependencies:
       '@img/sharp-libvips-linuxmusl-x64': 1.1.0
     optional: true
 
+  '@img/sharp-linuxmusl-x64@0.34.3':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.0
+    optional: true
+
   '@img/sharp-wasm32@0.34.1':
     dependencies:
       '@emnapi/runtime': 1.4.3
     optional: true
 
+  '@img/sharp-wasm32@0.34.3':
+    dependencies:
+      '@emnapi/runtime': 1.5.0
+    optional: true
+
+  '@img/sharp-win32-arm64@0.34.3':
+    optional: true
+
   '@img/sharp-win32-ia32@0.34.1':
     optional: true
 
+  '@img/sharp-win32-ia32@0.34.3':
+    optional: true
+
   '@img/sharp-win32-x64@0.34.1':
     optional: true
 
+  '@img/sharp-win32-x64@0.34.3':
+    optional: true
+
   '@inquirer/checkbox@2.5.0':
     dependencies:
       '@inquirer/core': 9.2.1
@@ -15182,7 +15500,7 @@ snapshots:
     dependencies:
       '@swc/helpers': 0.5.17
 
-  '@internationalized/number@3.6.2':
+  '@internationalized/number@3.6.4':
     dependencies:
       '@swc/helpers': 0.5.17
 
@@ -16507,6 +16825,8 @@ snapshots:
 
   '@next/env@15.3.2': {}
 
+  '@next/env@15.5.2': {}
+
   '@next/eslint-plugin-next@15.2.1':
     dependencies:
       fast-glob: 3.3.1
@@ -16521,48 +16841,72 @@ snapshots:
   '@next/swc-darwin-arm64@15.3.2':
     optional: true
 
+  '@next/swc-darwin-arm64@15.5.2':
+    optional: true
+
   '@next/swc-darwin-x64@15.3.0':
     optional: true
 
   '@next/swc-darwin-x64@15.3.2':
     optional: true
 
+  '@next/swc-darwin-x64@15.5.2':
+    optional: true
+
   '@next/swc-linux-arm64-gnu@15.3.0':
     optional: true
 
   '@next/swc-linux-arm64-gnu@15.3.2':
     optional: true
 
+  '@next/swc-linux-arm64-gnu@15.5.2':
+    optional: true
+
   '@next/swc-linux-arm64-musl@15.3.0':
     optional: true
 
   '@next/swc-linux-arm64-musl@15.3.2':
     optional: true
 
+  '@next/swc-linux-arm64-musl@15.5.2':
+    optional: true
+
   '@next/swc-linux-x64-gnu@15.3.0':
     optional: true
 
   '@next/swc-linux-x64-gnu@15.3.2':
     optional: true
 
+  '@next/swc-linux-x64-gnu@15.5.2':
+    optional: true
+
   '@next/swc-linux-x64-musl@15.3.0':
     optional: true
 
   '@next/swc-linux-x64-musl@15.3.2':
     optional: true
 
+  '@next/swc-linux-x64-musl@15.5.2':
+    optional: true
+
   '@next/swc-win32-arm64-msvc@15.3.0':
     optional: true
 
   '@next/swc-win32-arm64-msvc@15.3.2':
     optional: true
 
+  '@next/swc-win32-arm64-msvc@15.5.2':
+    optional: true
+
   '@next/swc-win32-x64-msvc@15.3.0':
     optional: true
 
   '@next/swc-win32-x64-msvc@15.3.2':
     optional: true
 
+  '@next/swc-win32-x64-msvc@15.5.2':
+    optional: true
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -22659,19 +23003,19 @@ snapshots:
       js-yaml: 3.14.1
       tslib: 2.8.1
 
-  '@zag-js/accordion@1.15.0':
+  '@zag-js/accordion@1.22.1':
     dependencies:
-      '@zag-js/anatomy': 1.15.0
-      '@zag-js/core': 1.15.0
-      '@zag-js/dom-query': 1.15.0
-      '@zag-js/types': 1.15.0
-      '@zag-js/utils': 1.15.0
+      '@zag-js/anatomy': 1.22.1
+      '@zag-js/core': 1.22.1
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/types': 1.22.1
+      '@zag-js/utils': 1.22.1
 
   '@zag-js/anatomy@1.15.0': {}
 
-  '@zag-js/anatomy@1.18.2': {}
+  '@zag-js/anatomy@1.22.1': {}
 
-  '@zag-js/aria-hidden@1.15.0': {}
+  '@zag-js/aria-hidden@1.22.1': {}
 
   '@zag-js/carousel@1.15.0':
     dependencies:
@@ -22682,155 +23026,147 @@ snapshots:
       '@zag-js/types': 1.15.0
       '@zag-js/utils': 1.15.0
 
-  '@zag-js/checkbox@1.15.0':
+  '@zag-js/carousel@1.22.1':
     dependencies:
-      '@zag-js/anatomy': 1.15.0
-      '@zag-js/core': 1.15.0
-      '@zag-js/dom-query': 1.15.0
-      '@zag-js/focus-visible': 1.15.0
-      '@zag-js/types': 1.15.0
-      '@zag-js/utils': 1.15.0
+      '@zag-js/anatomy': 1.22.1
+      '@zag-js/core': 1.22.1
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/scroll-snap': 1.22.1
+      '@zag-js/types': 1.22.1
+      '@zag-js/utils': 1.22.1
 
-  '@zag-js/collection@1.15.0':
+  '@zag-js/checkbox@1.22.1':
     dependencies:
-      '@zag-js/utils': 1.15.0
+      '@zag-js/anatomy': 1.22.1
+      '@zag-js/core': 1.22.1
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/focus-visible': 1.22.1
+      '@zag-js/types': 1.22.1
+      '@zag-js/utils': 1.22.1
 
-  '@zag-js/combobox@1.15.0':
+  '@zag-js/collection@1.22.1':
     dependencies:
-      '@zag-js/anatomy': 1.15.0
-      '@zag-js/aria-hidden': 1.15.0
-      '@zag-js/collection': 1.15.0
-      '@zag-js/core': 1.15.0
-      '@zag-js/dismissable': 1.15.0
-      '@zag-js/dom-query': 1.15.0
-      '@zag-js/popper': 1.15.0
-      '@zag-js/types': 1.15.0
-      '@zag-js/utils': 1.15.0
+      '@zag-js/utils': 1.22.1
+
+  '@zag-js/combobox@1.22.1':
+    dependencies:
+      '@zag-js/anatomy': 1.22.1
+      '@zag-js/aria-hidden': 1.22.1
+      '@zag-js/collection': 1.22.1
+      '@zag-js/core': 1.22.1
+      '@zag-js/dismissable': 1.22.1
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/popper': 1.22.1
+      '@zag-js/types': 1.22.1
+      '@zag-js/utils': 1.22.1
 
   '@zag-js/core@1.15.0':
     dependencies:
       '@zag-js/dom-query': 1.15.0
       '@zag-js/utils': 1.15.0
 
-  '@zag-js/core@1.18.2':
+  '@zag-js/core@1.22.1':
     dependencies:
-      '@zag-js/dom-query': 1.18.2
-      '@zag-js/utils': 1.18.2
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/utils': 1.22.1
 
-  '@zag-js/dialog@1.15.0':
+  '@zag-js/dialog@1.22.1':
     dependencies:
-      '@zag-js/anatomy': 1.15.0
-      '@zag-js/aria-hidden': 1.15.0
-      '@zag-js/core': 1.15.0
-      '@zag-js/dismissable': 1.15.0
-      '@zag-js/dom-query': 1.15.0
-      '@zag-js/focus-trap': 1.15.0
-      '@zag-js/remove-scroll': 1.15.0
-      '@zag-js/types': 1.15.0
-      '@zag-js/utils': 1.15.0
-
-  '@zag-js/dismissable@1.15.0':
-    dependencies:
-      '@zag-js/dom-query': 1.15.0
-      '@zag-js/interact-outside': 1.15.0
-      '@zag-js/utils': 1.15.0
+      '@zag-js/anatomy': 1.22.1
+      '@zag-js/aria-hidden': 1.22.1
+      '@zag-js/core': 1.22.1
+      '@zag-js/dismissable': 1.22.1
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/focus-trap': 1.22.1
+      '@zag-js/remove-scroll': 1.22.1
+      '@zag-js/types': 1.22.1
+      '@zag-js/utils': 1.22.1
 
-  '@zag-js/dismissable@1.18.2':
+  '@zag-js/dismissable@1.22.1':
     dependencies:
-      '@zag-js/dom-query': 1.18.2
-      '@zag-js/interact-outside': 1.18.2
-      '@zag-js/utils': 1.18.2
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/interact-outside': 1.22.1
+      '@zag-js/utils': 1.22.1
 
   '@zag-js/dom-query@1.15.0':
     dependencies:
       '@zag-js/types': 1.15.0
 
-  '@zag-js/dom-query@1.18.2':
+  '@zag-js/dom-query@1.22.1':
     dependencies:
-      '@zag-js/types': 1.18.2
+      '@zag-js/types': 1.22.1
 
-  '@zag-js/focus-trap@1.15.0':
+  '@zag-js/focus-trap@1.22.1':
     dependencies:
-      '@zag-js/dom-query': 1.15.0
+      '@zag-js/dom-query': 1.22.1
 
-  '@zag-js/focus-visible@1.15.0':
+  '@zag-js/focus-visible@1.22.1':
     dependencies:
-      '@zag-js/dom-query': 1.15.0
+      '@zag-js/dom-query': 1.22.1
 
-  '@zag-js/i18n-utils@1.15.0':
+  '@zag-js/i18n-utils@1.22.1':
     dependencies:
-      '@zag-js/dom-query': 1.15.0
+      '@zag-js/dom-query': 1.22.1
 
-  '@zag-js/interact-outside@1.15.0':
+  '@zag-js/interact-outside@1.22.1':
     dependencies:
-      '@zag-js/dom-query': 1.15.0
-      '@zag-js/utils': 1.15.0
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/utils': 1.22.1
 
-  '@zag-js/interact-outside@1.18.2':
+  '@zag-js/menu@1.22.1':
     dependencies:
-      '@zag-js/dom-query': 1.18.2
-      '@zag-js/utils': 1.18.2
+      '@zag-js/anatomy': 1.22.1
+      '@zag-js/core': 1.22.1
+      '@zag-js/dismissable': 1.22.1
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/popper': 1.22.1
+      '@zag-js/rect-utils': 1.22.1
+      '@zag-js/types': 1.22.1
+      '@zag-js/utils': 1.22.1
 
-  '@zag-js/menu@1.18.2':
+  '@zag-js/number-input@1.22.1':
     dependencies:
-      '@zag-js/anatomy': 1.18.2
-      '@zag-js/core': 1.18.2
-      '@zag-js/dismissable': 1.18.2
-      '@zag-js/dom-query': 1.18.2
-      '@zag-js/popper': 1.18.2
-      '@zag-js/rect-utils': 1.18.2
-      '@zag-js/types': 1.18.2
-      '@zag-js/utils': 1.18.2
+      '@internationalized/number': 3.6.4
+      '@zag-js/anatomy': 1.22.1
+      '@zag-js/core': 1.22.1
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/types': 1.22.1
+      '@zag-js/utils': 1.22.1
 
-  '@zag-js/number-input@1.15.0':
+  '@zag-js/pagination@1.22.1':
     dependencies:
-      '@internationalized/number': 3.6.2
-      '@zag-js/anatomy': 1.15.0
-      '@zag-js/core': 1.15.0
-      '@zag-js/dom-query': 1.15.0
-      '@zag-js/types': 1.15.0
-      '@zag-js/utils': 1.15.0
+      '@zag-js/anatomy': 1.22.1
+      '@zag-js/core': 1.22.1
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/types': 1.22.1
+      '@zag-js/utils': 1.22.1
 
-  '@zag-js/pagination@1.15.0':
+  '@zag-js/popover@1.22.1':
     dependencies:
-      '@zag-js/anatomy': 1.15.0
-      '@zag-js/core': 1.15.0
-      '@zag-js/dom-query': 1.15.0
-      '@zag-js/types': 1.15.0
-      '@zag-js/utils': 1.15.0
-
-  '@zag-js/popover@1.15.0':
-    dependencies:
-      '@zag-js/anatomy': 1.15.0
-      '@zag-js/aria-hidden': 1.15.0
-      '@zag-js/core': 1.15.0
-      '@zag-js/dismissable': 1.15.0
-      '@zag-js/dom-query': 1.15.0
-      '@zag-js/focus-trap': 1.15.0
-      '@zag-js/popper': 1.15.0
-      '@zag-js/remove-scroll': 1.15.0
-      '@zag-js/types': 1.15.0
-      '@zag-js/utils': 1.15.0
-
-  '@zag-js/popper@1.15.0':
-    dependencies:
-      '@floating-ui/dom': 1.7.1
-      '@zag-js/dom-query': 1.15.0
-      '@zag-js/utils': 1.15.0
+      '@zag-js/anatomy': 1.22.1
+      '@zag-js/aria-hidden': 1.22.1
+      '@zag-js/core': 1.22.1
+      '@zag-js/dismissable': 1.22.1
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/focus-trap': 1.22.1
+      '@zag-js/popper': 1.22.1
+      '@zag-js/remove-scroll': 1.22.1
+      '@zag-js/types': 1.22.1
+      '@zag-js/utils': 1.22.1
 
-  '@zag-js/popper@1.18.2':
+  '@zag-js/popper@1.22.1':
     dependencies:
-      '@floating-ui/dom': 1.7.2
-      '@zag-js/dom-query': 1.18.2
-      '@zag-js/utils': 1.18.2
+      '@floating-ui/dom': 1.7.4
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/utils': 1.22.1
 
-  '@zag-js/rating-group@1.15.0':
+  '@zag-js/rating-group@1.22.1':
     dependencies:
-      '@zag-js/anatomy': 1.15.0
-      '@zag-js/core': 1.15.0
-      '@zag-js/dom-query': 1.15.0
-      '@zag-js/types': 1.15.0
-      '@zag-js/utils': 1.15.0
+      '@zag-js/anatomy': 1.22.1
+      '@zag-js/core': 1.22.1
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/types': 1.22.1
+      '@zag-js/utils': 1.22.1
 
   '@zag-js/react@1.15.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
@@ -22841,104 +23177,120 @@ snapshots:
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
 
-  '@zag-js/rect-utils@1.18.2': {}
+  '@zag-js/react@1.22.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@zag-js/core': 1.22.1
+      '@zag-js/store': 1.22.1
+      '@zag-js/types': 1.22.1
+      '@zag-js/utils': 1.22.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
+  '@zag-js/rect-utils@1.22.1': {}
 
-  '@zag-js/remove-scroll@1.15.0':
+  '@zag-js/remove-scroll@1.22.1':
     dependencies:
-      '@zag-js/dom-query': 1.15.0
+      '@zag-js/dom-query': 1.22.1
 
   '@zag-js/scroll-snap@1.15.0':
     dependencies:
       '@zag-js/dom-query': 1.15.0
 
-  '@zag-js/select@1.15.0':
+  '@zag-js/scroll-snap@1.22.1':
     dependencies:
-      '@zag-js/anatomy': 1.15.0
-      '@zag-js/collection': 1.15.0
-      '@zag-js/core': 1.15.0
-      '@zag-js/dismissable': 1.15.0
-      '@zag-js/dom-query': 1.15.0
-      '@zag-js/popper': 1.15.0
-      '@zag-js/types': 1.15.0
-      '@zag-js/utils': 1.15.0
+      '@zag-js/dom-query': 1.22.1
 
-  '@zag-js/slider@1.15.0':
+  '@zag-js/select@1.22.1':
     dependencies:
-      '@zag-js/anatomy': 1.15.0
-      '@zag-js/core': 1.15.0
-      '@zag-js/dom-query': 1.15.0
-      '@zag-js/types': 1.15.0
-      '@zag-js/utils': 1.15.0
+      '@zag-js/anatomy': 1.22.1
+      '@zag-js/collection': 1.22.1
+      '@zag-js/core': 1.22.1
+      '@zag-js/dismissable': 1.22.1
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/popper': 1.22.1
+      '@zag-js/types': 1.22.1
+      '@zag-js/utils': 1.22.1
 
-  '@zag-js/steps@1.15.0':
+  '@zag-js/slider@1.22.1':
     dependencies:
-      '@zag-js/anatomy': 1.15.0
-      '@zag-js/core': 1.15.0
-      '@zag-js/dom-query': 1.15.0
-      '@zag-js/types': 1.15.0
-      '@zag-js/utils': 1.15.0
+      '@zag-js/anatomy': 1.22.1
+      '@zag-js/core': 1.22.1
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/types': 1.22.1
+      '@zag-js/utils': 1.22.1
+
+  '@zag-js/steps@1.22.1':
+    dependencies:
+      '@zag-js/anatomy': 1.22.1
+      '@zag-js/core': 1.22.1
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/types': 1.22.1
+      '@zag-js/utils': 1.22.1
 
   '@zag-js/store@1.15.0':
     dependencies:
       proxy-compare: 3.0.1
 
-  '@zag-js/switch@1.15.0':
+  '@zag-js/store@1.22.1':
     dependencies:
-      '@zag-js/anatomy': 1.15.0
-      '@zag-js/core': 1.15.0
-      '@zag-js/dom-query': 1.15.0
-      '@zag-js/focus-visible': 1.15.0
-      '@zag-js/types': 1.15.0
-      '@zag-js/utils': 1.15.0
+      proxy-compare: 3.0.1
 
-  '@zag-js/tabs@1.15.0':
+  '@zag-js/switch@1.22.1':
     dependencies:
-      '@zag-js/anatomy': 1.15.0
-      '@zag-js/core': 1.15.0
-      '@zag-js/dom-query': 1.15.0
-      '@zag-js/types': 1.15.0
-      '@zag-js/utils': 1.15.0
+      '@zag-js/anatomy': 1.22.1
+      '@zag-js/core': 1.22.1
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/focus-visible': 1.22.1
+      '@zag-js/types': 1.22.1
+      '@zag-js/utils': 1.22.1
 
-  '@zag-js/toast@1.15.0':
+  '@zag-js/tabs@1.22.1':
     dependencies:
-      '@zag-js/anatomy': 1.15.0
-      '@zag-js/core': 1.15.0
-      '@zag-js/dismissable': 1.15.0
-      '@zag-js/dom-query': 1.15.0
-      '@zag-js/types': 1.15.0
-      '@zag-js/utils': 1.15.0
+      '@zag-js/anatomy': 1.22.1
+      '@zag-js/core': 1.22.1
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/types': 1.22.1
+      '@zag-js/utils': 1.22.1
 
-  '@zag-js/tooltip@1.15.0':
+  '@zag-js/toast@1.22.1':
     dependencies:
-      '@zag-js/anatomy': 1.15.0
-      '@zag-js/core': 1.15.0
-      '@zag-js/dom-query': 1.15.0
-      '@zag-js/focus-visible': 1.15.0
-      '@zag-js/popper': 1.15.0
-      '@zag-js/store': 1.15.0
-      '@zag-js/types': 1.15.0
-      '@zag-js/utils': 1.15.0
+      '@zag-js/anatomy': 1.22.1
+      '@zag-js/core': 1.22.1
+      '@zag-js/dismissable': 1.22.1
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/types': 1.22.1
+      '@zag-js/utils': 1.22.1
 
-  '@zag-js/tree-view@1.15.0':
+  '@zag-js/tooltip@1.22.1':
     dependencies:
-      '@zag-js/anatomy': 1.15.0
-      '@zag-js/collection': 1.15.0
-      '@zag-js/core': 1.15.0
-      '@zag-js/dom-query': 1.15.0
-      '@zag-js/types': 1.15.0
-      '@zag-js/utils': 1.15.0
+      '@zag-js/anatomy': 1.22.1
+      '@zag-js/core': 1.22.1
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/focus-visible': 1.22.1
+      '@zag-js/popper': 1.22.1
+      '@zag-js/types': 1.22.1
+      '@zag-js/utils': 1.22.1
+
+  '@zag-js/tree-view@1.22.1':
+    dependencies:
+      '@zag-js/anatomy': 1.22.1
+      '@zag-js/collection': 1.22.1
+      '@zag-js/core': 1.22.1
+      '@zag-js/dom-query': 1.22.1
+      '@zag-js/types': 1.22.1
+      '@zag-js/utils': 1.22.1
 
   '@zag-js/types@1.15.0':
     dependencies:
       csstype: 3.1.3
 
-  '@zag-js/types@1.18.2':
+  '@zag-js/types@1.22.1':
     dependencies:
       csstype: 3.1.3
 
   '@zag-js/utils@1.15.0': {}
 
-  '@zag-js/utils@1.18.2': {}
+  '@zag-js/utils@1.22.1': {}
 
   '@zkochan/js-yaml@0.0.7':
     dependencies:
@@ -24624,6 +24976,14 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
+  eslint-plugin-tailwindcss@4.0.0-beta.0(tailwindcss@4.1.8):
+    dependencies:
+      fast-glob: 3.3.3
+      postcss: 8.5.3
+      synckit: 0.11.8
+      tailwind-api-utils: 1.0.3(tailwindcss@4.1.8)
+      tailwindcss: 4.1.8
+
   eslint-scope@5.1.1:
     dependencies:
       esrecurse: 4.3.0
@@ -26785,6 +27145,32 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
+  next@15.5.2(@babel/core@7.27.1)(@opentelemetry/api@1.9.0)(@playwright/test@1.52.0)(babel-plugin-macros@3.1.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.84.0):
+    dependencies:
+      '@next/env': 15.5.2
+      '@swc/helpers': 0.5.15
+      caniuse-lite: 1.0.30001718
+      postcss: 8.4.31
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      styled-jsx: 5.1.6(@babel/core@7.27.1)(babel-plugin-macros@3.1.0)(react@19.1.0)
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 15.5.2
+      '@next/swc-darwin-x64': 15.5.2
+      '@next/swc-linux-arm64-gnu': 15.5.2
+      '@next/swc-linux-arm64-musl': 15.5.2
+      '@next/swc-linux-x64-gnu': 15.5.2
+      '@next/swc-linux-x64-musl': 15.5.2
+      '@next/swc-win32-arm64-msvc': 15.5.2
+      '@next/swc-win32-x64-msvc': 15.5.2
+      '@opentelemetry/api': 1.9.0
+      '@playwright/test': 1.52.0
+      sass: 1.84.0
+      sharp: 0.34.3
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+
   no-case@3.0.4:
     dependencies:
       lower-case: 2.0.2
@@ -28506,6 +28892,36 @@ snapshots:
       '@img/sharp-win32-x64': 0.34.1
     optional: true
 
+  sharp@0.34.3:
+    dependencies:
+      color: 4.2.3
+      detect-libc: 2.0.4
+      semver: 7.7.2
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.34.3
+      '@img/sharp-darwin-x64': 0.34.3
+      '@img/sharp-libvips-darwin-arm64': 1.2.0
+      '@img/sharp-libvips-darwin-x64': 1.2.0
+      '@img/sharp-libvips-linux-arm': 1.2.0
+      '@img/sharp-libvips-linux-arm64': 1.2.0
+      '@img/sharp-libvips-linux-ppc64': 1.2.0
+      '@img/sharp-libvips-linux-s390x': 1.2.0
+      '@img/sharp-libvips-linux-x64': 1.2.0
+      '@img/sharp-libvips-linuxmusl-arm64': 1.2.0
+      '@img/sharp-libvips-linuxmusl-x64': 1.2.0
+      '@img/sharp-linux-arm': 0.34.3
+      '@img/sharp-linux-arm64': 0.34.3
+      '@img/sharp-linux-ppc64': 0.34.3
+      '@img/sharp-linux-s390x': 0.34.3
+      '@img/sharp-linux-x64': 0.34.3
+      '@img/sharp-linuxmusl-arm64': 0.34.3
+      '@img/sharp-linuxmusl-x64': 0.34.3
+      '@img/sharp-wasm32': 0.34.3
+      '@img/sharp-win32-arm64': 0.34.3
+      '@img/sharp-win32-ia32': 0.34.3
+      '@img/sharp-win32-x64': 0.34.3
+    optional: true
+
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
@@ -28907,6 +29323,12 @@ snapshots:
       tailwind-merge: 3.0.2
       tailwindcss: 4.1.8
 
+  tailwind-variants@3.1.0(tailwind-merge@3.3.0)(tailwindcss@4.1.8):
+    dependencies:
+      tailwindcss: 4.1.8
+    optionalDependencies:
+      tailwind-merge: 3.3.0
+
   tailwindcss-animate@1.0.7(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.11.24(@swc/helpers@0.5.17))(@types/node@20.17.47)(typescript@5.8.3))):
     dependencies:
       tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.11.24(@swc/helpers@0.5.17))(@types/node@20.17.47)(typescript@5.8.3))

From 7f86e638693830c6d810e0044e98253723f73c54 Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Sat, 6 Sep 2025 09:40:22 +0200
Subject: [PATCH 37/44] git commit -m "fix: replace stale stroke tokens with
 border tokens

  - Replace --color-stroke-primary with --color-border-primary
  - Replace --color-stroke-secondary with --color-border-secondary
  - Add TOKEN_CHANGELOG.md to document breaking changes
  - Update all references in frontend-demo token overrides

  Fixes #122"
---
 apps/frontend-demo/src/tokens/_overrides.css                | 6 +++---
 .../src/tokens/app-components/molecules/_cart-preview.css   | 4 ++--
 .../src/tokens/app-components/molecules/_navigation.css     | 2 +-
 .../src/tokens/app-components/organisms/_header.css         | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/frontend-demo/src/tokens/_overrides.css b/apps/frontend-demo/src/tokens/_overrides.css
index 524dd5f576..317457221e 100644
--- a/apps/frontend-demo/src/tokens/_overrides.css
+++ b/apps/frontend-demo/src/tokens/_overrides.css
@@ -279,8 +279,8 @@
   );
 
   /* Borders */
-  --color-stroke-primary: var(--color-slate-200);
-  --color-stroke-secondary: var(--color-slate-400);
+  --color-border-primary: var(--color-slate-200);
+  --color-border-secondary-alt: var(--color-slate-400);
   --color-border: light-dark(var(--color-slate-200), var(--color-slate-800));
   --color-border-neutral: light-dark(
     var(--color-slate-300),
@@ -331,7 +331,7 @@
     var(--opacity-disabled)
   );
   --color-disabled-border: --alpha(
-    var(--color-stroke-primary) /
+    var(--color-border-primary) /
     var(--opacity-disabled)
   );
   --color-disabled-fill: --alpha(
diff --git a/apps/frontend-demo/src/tokens/app-components/molecules/_cart-preview.css b/apps/frontend-demo/src/tokens/app-components/molecules/_cart-preview.css
index bde2838dd5..e900c27e08 100644
--- a/apps/frontend-demo/src/tokens/app-components/molecules/_cart-preview.css
+++ b/apps/frontend-demo/src/tokens/app-components/molecules/_cart-preview.css
@@ -1,10 +1,10 @@
 @theme static {
   /* === CART PREVIEW COLORS === */
-  --color-cart-preview-item-border: var(--color-stroke-secondary);
+  --color-cart-preview-item-border: var(--color-border-secondary);
   --color-cart-preview-item-image-bg: var(--color-fill);
   --color-cart-preview-fg: var(--color-fg-primary);
   --color-cart-preview-fg-secondary: var(--color-fg-secondary);
-  --color-cart-preview-footer-border: var(--color-stroke-secondary);
+  --color-cart-preview-footer-border: var(--color-border-secondary);
 
   /* === SPACING === */
   --spacing-cart-preview: var(--spacing-xs);
diff --git a/apps/frontend-demo/src/tokens/app-components/molecules/_navigation.css b/apps/frontend-demo/src/tokens/app-components/molecules/_navigation.css
index 9ad7f9f856..294fe67d33 100644
--- a/apps/frontend-demo/src/tokens/app-components/molecules/_navigation.css
+++ b/apps/frontend-demo/src/tokens/app-components/molecules/_navigation.css
@@ -12,7 +12,7 @@
   /* Navigation submenu */
   --color-nav-submenu-bg: var(--color-surface);
   --color-nav-submenu-item-hover: var(--color-surface-hover);
-  --color-nav-submenu-border: var(--color-stroke-primary);
+  --color-nav-submenu-border: var(--color-border-primary);
   --shadow-nav-submenu: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px
     rgba(0, 0, 0, 0.1);
 
diff --git a/apps/frontend-demo/src/tokens/app-components/organisms/_header.css b/apps/frontend-demo/src/tokens/app-components/organisms/_header.css
index e866f73416..6575c5a641 100644
--- a/apps/frontend-demo/src/tokens/app-components/organisms/_header.css
+++ b/apps/frontend-demo/src/tokens/app-components/organisms/_header.css
@@ -14,7 +14,7 @@
   --color-header-mobile-menu-hover: var(--color-fill-hover);
   --color-header-mobile-menu-text: var(--color-fg-secondary);
   --color-header-mobile-menu-text-hover: var(--color-fg-primary);
-  --color-header-divider: var(--color-stroke-secondary);
+  --color-header-divider: var(--color-border-secondary);
 
   /* === HEADER SPACING === */
   --spacing-header-container-x: var(--spacing-xs);

From 4c34b7c8e71563dcc2a53001904ee6a1527f2d35 Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Sat, 6 Sep 2025 10:37:37 +0200
Subject: [PATCH 38/44] feat: migrate to CSS logical properties for RTL support

- Replace all physical properties (ml/mr/pl/pr) with logical (ms/me/ps/pe)
---
 libs/ui/src/atoms/input.tsx         | 4 ++--
 libs/ui/src/atoms/label.tsx         | 2 +-
 libs/ui/src/molecules/menu.tsx      | 6 +++---
 libs/ui/src/molecules/toast.tsx     | 2 +-
 libs/ui/src/molecules/tree-view.tsx | 4 ++--
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/libs/ui/src/atoms/input.tsx b/libs/ui/src/atoms/input.tsx
index 2d4fe6a6f7..296725cf16 100644
--- a/libs/ui/src/atoms/input.tsx
+++ b/libs/ui/src/atoms/input.tsx
@@ -48,8 +48,8 @@ const inputVariants = tv({
     },
     withButtonInside: {
       false: '',
-      right: 'pr-with-button',
-      left: 'pl-with-button',
+      right: 'pe-with-button',
+      left: 'ps-with-button',
     },
     hideSearchClear: {
       true: '[&::-webkit-search-cancel-button]:hidden [&::-ms-clear]:hidden',
diff --git a/libs/ui/src/atoms/label.tsx b/libs/ui/src/atoms/label.tsx
index 5a4e3e957c..e04915ce6b 100644
--- a/libs/ui/src/atoms/label.tsx
+++ b/libs/ui/src/atoms/label.tsx
@@ -48,7 +48,7 @@ export function Label({
       htmlFor={props.htmlFor}
     >
       {children}
-      {required && <span className="ml-1 text-label-required">*</span>}
+      {required && <span className="ms-1 text-label-required">*</span>}
     </label>
   )
 }
diff --git a/libs/ui/src/molecules/menu.tsx b/libs/ui/src/molecules/menu.tsx
index a9ecd5eb1d..805a3551cc 100644
--- a/libs/ui/src/molecules/menu.tsx
+++ b/libs/ui/src/molecules/menu.tsx
@@ -91,7 +91,7 @@ const menuVariants = tv({
     itemText: ['flex-grow'],
     itemIcon: ['text-menu-item-icon-size text-menu-item-icon-fg'],
     submenuIndicator: [
-      'ml-menu-submenu-indicator text-menu-submenu-indicator-fg',
+      'ms-menu-submenu-indicator text-menu-submenu-indicator-fg',
     ],
   },
   variants: {
@@ -433,10 +433,10 @@ export function Menu({
       ) : (
         <Button {...api.getTriggerProps()} className={trigger()}>
           {triggerText}
-          {triggerIcon && <Icon icon={triggerIcon} className="ml-1" />}
+          {triggerIcon && <Icon icon={triggerIcon} className="ms-1" />}
           {!triggerIcon && (
             <span {...api.getIndicatorProps()}>
-              <Icon icon="token-icon-menu-trigger" className="ml-1" />
+              <Icon icon="token-icon-menu-trigger" className="ms-1" />
             </span>
           )}
         </Button>
diff --git a/libs/ui/src/molecules/toast.tsx b/libs/ui/src/molecules/toast.tsx
index b9e323163a..45c32e79bc 100644
--- a/libs/ui/src/molecules/toast.tsx
+++ b/libs/ui/src/molecules/toast.tsx
@@ -44,7 +44,7 @@ const toastVariants = tv({
       'text-toast-description-size text-toast-description-fg mt-toast-description-gap',
     ],
     closeButton: [
-      'grid place-items-center flex-shrink-0 ml-auto py-0 px-0',
+      'grid place-items-center flex-shrink-0 ms-auto py-0 px-0',
       'cursor-pointer',
       'text-toast-close hover:text-toast-close-hover',
     ],
diff --git a/libs/ui/src/molecules/tree-view.tsx b/libs/ui/src/molecules/tree-view.tsx
index 3f42b57ffd..931ecadcd4 100644
--- a/libs/ui/src/molecules/tree-view.tsx
+++ b/libs/ui/src/molecules/tree-view.tsx
@@ -55,8 +55,8 @@ const treeVariants = tv({
       class: [
         'relative',
         // get --depth from zag-js api
-        'ml-[calc(var(--depth)*var(--tree-indent-per-level))]',
-        'data-[depth=1]:ml-0',
+        'ms-[calc(var(--depth)*var(--tree-indent-per-level))]',
+        'data-[depth=1]:ms-0',
       ],
     },
     {

From e789b3517aeff7170968dd138630d7e6903ee77c Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Sat, 6 Sep 2025 10:54:22 +0200
Subject: [PATCH 39/44] fix: define missing shadow-xl token for component usage

Fixes #119
---
 libs/ui/src/tokens/_base.css                           | 1 +
 libs/ui/src/tokens/components/molecules/_accordion.css | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/libs/ui/src/tokens/_base.css b/libs/ui/src/tokens/_base.css
index 0c4e522208..96cd8e2c02 100644
--- a/libs/ui/src/tokens/_base.css
+++ b/libs/ui/src/tokens/_base.css
@@ -21,4 +21,5 @@
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
 }
diff --git a/libs/ui/src/tokens/components/molecules/_accordion.css b/libs/ui/src/tokens/components/molecules/_accordion.css
index 585b40003e..9ceaa380b4 100644
--- a/libs/ui/src/tokens/components/molecules/_accordion.css
+++ b/libs/ui/src/tokens/components/molecules/_accordion.css
@@ -59,7 +59,7 @@
 
   /* === SHADOWS === */
   --shadow-accordion-root-sm: var(--shadow-primary);
-  --shadow-accordion-root-md: var(--shadow-xl);
+  --shadow-accordion-root-md: var(--shadow-md);
   --shadow-accordion-content-sm: var(--shadow-sm);
   --shadow-accordion-content-md: var(--shadow-primary);
 }

From fc5309ec1055d3b905390abce5d1e04abbbf9211 Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Sat, 6 Sep 2025 11:08:06 +0200
Subject: [PATCH 40/44] fix: migrate from btn to button token naming convention
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

  - Rename CSS tokens: --color-btn-* → --color-button-*
  - Update Tailwind classes: bg-btn-*, text-btn-* → bg-button-*, text-button-*
  - Fix token references: var(--color-btn-text) → var(--color-button-fg)
  Fixes #120
---
 .../src/tokens/_overrides-components.css      | 22 ++++++++---------
 .../molecules/_product-card.css               | 24 +++++++++----------
 libs/ui/src/molecules/product-card.tsx        |  6 ++---
 .../components/molecules/_product-card.css    | 24 +++++++++----------
 4 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/apps/frontend-demo/src/tokens/_overrides-components.css b/apps/frontend-demo/src/tokens/_overrides-components.css
index ea4ce35070..4368da43ec 100644
--- a/apps/frontend-demo/src/tokens/_overrides-components.css
+++ b/apps/frontend-demo/src/tokens/_overrides-components.css
@@ -15,27 +15,27 @@
 
   /* === BUTTON === */
   /* Change from --alpha-ring to --opacity-ring for all focus rings */
-  --color-btn-ring-primary: --alpha(
-    var(--color-btn-primary) /
+  --color-button-ring-primary: --alpha(
+    var(--color-button-primary) /
     var(--opacity-ring)
   );
-  --color-btn-ring-secondary: --alpha(
-    var(--color-btn-secondary) /
+  --color-button-ring-secondary: --alpha(
+    var(--color-button-secondary) /
     var(--opacity-ring)
   );
-  --color-btn-ring-tertiary: --alpha(
-    var(--color-btn-tertiary) /
+  --color-button-ring-tertiary: --alpha(
+    var(--color-button-tertiary) /
     var(--opacity-ring)
   );
-  --color-btn-ring-warning: --alpha(
-    var(--color-btn-warning) /
+  --color-button-ring-warning: --alpha(
+    var(--color-button-warning) /
     var(--opacity-ring)
   );
-  --color-btn-ring-danger: --alpha(
-    var(--color-btn-danger) /
+  --color-button-ring-danger: --alpha(
+    var(--color-button-danger) /
     var(--opacity-ring)
   );
-  --color-btn-text-secondary: var(--color-fg-dark);
+  --color-button-text-secondary: var(--color-fg-dark);
 
   /* === INPUT === */
   /* Different padding for small inputs */
diff --git a/apps/frontend-demo/src/tokens/app-components/molecules/_product-card.css b/apps/frontend-demo/src/tokens/app-components/molecules/_product-card.css
index 6c8b955913..d95e302afc 100644
--- a/apps/frontend-demo/src/tokens/app-components/molecules/_product-card.css
+++ b/apps/frontend-demo/src/tokens/app-components/molecules/_product-card.css
@@ -28,28 +28,28 @@
 
   /* === PRODUCT CARD BUTTONS ===*/
   /*Add to cart button*/
-  --color-btn-cart: var(--color-btn-primary);
-  --color-btn-cart-hover: oklch(
-    from var(--color-btn-cart) calc(l + var(--state-hover)) c h
+  --color-button-cart: var(--color-button-primary);
+  --color-button-cart-hover: oklch(
+    from var(--color-button-cart) calc(l + var(--state-hover)) c h
   );
 
-  --color-btn-cart-fg: var(--color-btn-text);
+  --color-button-cart-fg: var(--color-button-fg);
 
   /* Detail button */
-  --color-btn-detail: var(--color-btn-secondary);
-  --color-btn-detail-hover: oklch(
-    from var(--color-btn-detail) calc(l + var(--state-hover)) c h
+  --color-button-detail: var(--color-button-secondary);
+  --color-button-detail-hover: oklch(
+    from var(--color-button-detail) calc(l + var(--state-hover)) c h
   );
 
-  --color-btn-detail-fg: var(--color-btn-text);
+  --color-button-detail-fg: var(--color-button-fg);
 
   /* wishlist button */
-  --color-btn-wishlist: var(--color-btn-tertiary);
-  --color-btn-wishlist-hover: oklch(
-    from var(--color-btn-wishlist) calc(l + var(--state-hover)) c h
+  --color-button-wishlist: var(--color-button-tertiary);
+  --color-button-wishlist-hover: oklch(
+    from var(--color-button-wishlist) calc(l + var(--state-hover)) c h
   );
 
-  --color-btn-wishlist-fg: var(--color-btn-text);
+  --color-button-wishlist-fg: var(--color-button-fg);
 
   /* === PRODUCT CARD IMAGE === */
   --aspect-pc-image: var(--aspect-ratio-square);
diff --git a/libs/ui/src/molecules/product-card.tsx b/libs/ui/src/molecules/product-card.tsx
index eed04b59f5..479da4b211 100644
--- a/libs/ui/src/molecules/product-card.tsx
+++ b/libs/ui/src/molecules/product-card.tsx
@@ -22,11 +22,11 @@ const productCard = tv({
     badgesSlot: 'flex flex-wrap gap-pc-box',
     ratingSlot: 'flex items-center',
     buttonsSlot: 'flex flex-wrap w-fit',
-    cartButton: 'bg-btn-cart hover:bg-btn-cart-hover text-btn-cart-fg w-max',
+    cartButton: 'bg-button-cart hover:bg-button-cart-hover text-button-cart-fg w-max',
     detailButton:
-      'bg-btn-detail hover:bg-btn-detail-hover text-btn-detail-fg w-max',
+      'bg-button-detail hover:bg-button-detail-hover text-button-detail-fg w-max',
     wishlistButton:
-      'bg-btn-wishlist hover:bg-btn-wishlist-hover text-btn-wishlist-fg w-max',
+      'bg-button-wishlist hover:bg-button-wishlist-hover text-button-wishlist-fg w-max',
   },
   variants: {
     // variant for layout of the card
diff --git a/libs/ui/src/tokens/components/molecules/_product-card.css b/libs/ui/src/tokens/components/molecules/_product-card.css
index 389133876c..27a5d67294 100644
--- a/libs/ui/src/tokens/components/molecules/_product-card.css
+++ b/libs/ui/src/tokens/components/molecules/_product-card.css
@@ -25,28 +25,28 @@
 
   /* === PRODUCT CARD BUTTONS ===*/
   /*Add to cart button*/
-  --color-btn-cart: var(--color-btn-primary);
-  --color-btn-cart-hover: oklch(
-    from var(--color-btn-cart) calc(l + var(--state-hover)) c h
+  --color-button-cart: var(--color-button-primary);
+  --color-button-cart-hover: oklch(
+    from var(--color-button-cart) calc(l + var(--state-hover)) c h
   );
 
-  --color-btn-cart-fg: var(--color-btn-text);
+  --color-button-cart-fg: var(--color-button-fg);
 
   /* Detail button */
-  --color-btn-detail: var(--color-btn-secondary);
-  --color-btn-detail-hover: oklch(
-    from var(--color-btn-detail) calc(l + var(--state-hover)) c h
+  --color-button-detail: var(--color-button-secondary);
+  --color-button-detail-hover: oklch(
+    from var(--color-button-detail) calc(l + var(--state-hover)) c h
   );
 
-  --color-btn-detail-fg: var(--color-btn-text);
+  --color-button-detail-fg: var(--color-button-fg);
 
   /* wishlist button */
-  --color-btn-wishlist: var(--color-btn-tertiary);
-  --color-btn-wishlist-hover: oklch(
-    from var(--color-btn-wishlist) calc(l + var(--state-hover)) c h
+  --color-button-wishlist: var(--color-button-tertiary);
+  --color-button-wishlist-hover: oklch(
+    from var(--color-button-wishlist) calc(l + var(--state-hover)) c h
   );
 
-  --color-btn-wishlist-fg: var(--color-btn-text);
+  --color-button-wishlist-fg: var(--color-button-fg);
 
   /* === PRODUCT CARD IMAGE === */
   --aspect-pc-image: var(--aspect-square);

From 6caddaa7d96e0c7228687a01bacbb03f42880197 Mon Sep 17 00:00:00 2001
From: KaiUweCZE <pisezdenekpise@seznam.cz>
Date: Sat, 6 Sep 2025 11:57:16 +0200
Subject: [PATCH 41/44] fix(ui): add missing -light-disabled tokens for
 semantic colors

Closes #121
---
 libs/ui/src/tokens/_semantic.css | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/libs/ui/src/tokens/_semantic.css b/libs/ui/src/tokens/_semantic.css
index 76728fcbb8..d58e32c967 100644
--- a/libs/ui/src/tokens/_semantic.css
+++ b/libs/ui/src/tokens/_semantic.css
@@ -100,6 +100,9 @@
   --color-primary-light-active: oklch(
     from var(--color-primary-light) calc(l + var(--state-active)) c h
   );
+  --color-primary-light-disabled: oklch(
+    from var(--color-primary-light) l var(--state-disabled-chroma) h
+  );
 
   /*Secondary colors. Less important than primary colors, but still serve as accents.*/
   --color-secondary: light-dark(var(--color-orange-500), var(--color-amber-400));
@@ -123,6 +126,9 @@
   --color-secondary-light-active: oklch(
     from var(--color-secondary-light) calc(l + var(--state-active)) c h
   );
+  --color-secondary-light-disabled: oklch(
+    from var(--color-secondary-light) l var(--state-disabled-chroma) h
+  );
 
   /* In the user interface, non emphasis color and interactive color are usually used for general and non emphasis function operation buttons */
   --color-tertiary: light-dark(var(--color-pink-500), var(--color-rose-400));
@@ -146,6 +152,9 @@
   --color-tertiary-light-active: oklch(
     from var(--color-tertiary-light) calc(l + var(--state-active)) c h
   );
+  --color-tertiary-light-disabled: oklch(
+    from var(--color-tertiary-light) l var(--state-disabled-chroma) h
+  );
 
   /* It is usually used to express the success, completion and opening status, and is used in scenarios with the above semantics */
   --color-success: light-dark(
@@ -172,6 +181,9 @@
   --color-success-light-active: oklch(
     from var(--color-success-light) calc(l + var(--state-active)) c h
   );
+  --color-success-light-disabled: oklch(
+    from var(--color-success-light) l var(--state-disabled-chroma) h
+  );
 
   /* It is usually used to express objective and neutral information in the context with the above semantics */
   --color-info: light-dark(var(--color-teal-500), var(--color-cyan-300));
@@ -195,6 +207,9 @@
   --color-info-light-active: oklch(
     from var(--color-info-light) calc(l + var(--state-active)) c h
   );
+  --color-info-light-disabled: oklch(
+    from var(--color-info-light) l var(--state-disabled-chroma) h
+  );
 
   /* It is usually used to express warning and unsafe state, and is used in scenarios with the above semantics */
   --color-warning: light-dark(var(--color-yellow-500), var(--color-yellow-400));
@@ -218,6 +233,9 @@
   --color-warning-light-active: oklch(
     from var(--color-warning-light) calc(l + var(--state-active)) c h
   );
+  --color-warning-light-disabled: oklch(
+    from var(--color-warning-light) l var(--state-disabled-chroma) h
+  );
 
   /* It is usually used to express the dangerous state, and is used in the scene with the above semantics */
   --color-danger: light-dark(var(--color-red-500), var(--color-red-400));
@@ -241,6 +259,9 @@
   --color-danger-light-active: oklch(
     from var(--color-danger-light) calc(l + var(--state-active)) c h
   );
+  --color-danger-light-disabled: oklch(
+    from var(--color-danger-light) l var(--state-disabled-chroma) h
+  );
 
   /* Text colors and Icon colors*/
   /* Four different levels of text / icon colors represent the most important, secondary, minor and minor contents in the product interface */

From 24d00a1a1dfd96297229a53b911ebcaf5065fd97 Mon Sep 17 00:00:00 2001
From: Petr Glaser <syreanis+1@gmail.com>
Date: Sun, 7 Sep 2025 11:26:55 +0200
Subject: [PATCH 42/44] fix: implement code review suggestions

---
 apps/frontend-demo/package.json               |   4 +-
 libs/ui/eslint.config.js                      |   9 +-
 libs/ui/scripts/validate-token-definitions.js | 107 ++++++++++--------
 libs/ui/scripts/validate-token-usage.js       |  47 ++++----
 pnpm-lock.yaml                                |  81 +------------
 5 files changed, 102 insertions(+), 146 deletions(-)

diff --git a/apps/frontend-demo/package.json b/apps/frontend-demo/package.json
index 2739802b28..8d5fa5f439 100644
--- a/apps/frontend-demo/package.json
+++ b/apps/frontend-demo/package.json
@@ -21,8 +21,8 @@
     "@react-email/components": "^0.3.2",
     "@tanstack/react-query": "^5.76.1",
     "@tanstack/react-store": "^0.7.1",
-    "@zag-js/carousel": "^1.14.0",
-    "@zag-js/react": "^1.14.0",
+    "@zag-js/carousel": "^1.22.1",
+    "@zag-js/react": "^1.22.1",
     "clsx": "^2.1.1",
     "dompurify": "^3.2.6",
     "next": "^15.3.2",
diff --git a/libs/ui/eslint.config.js b/libs/ui/eslint.config.js
index 0b0f5c5955..de276d610f 100644
--- a/libs/ui/eslint.config.js
+++ b/libs/ui/eslint.config.js
@@ -1,6 +1,13 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
 import tsParser from '@typescript-eslint/parser'
 import tailwind from 'eslint-plugin-tailwindcss'
 
+const tokensCssAbsolutePath = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  'src/tokens/index.css'
+)
+
 export default [
   {
     files: ['**/*.{js,jsx,ts,tsx}'],
@@ -17,7 +24,7 @@ export default [
     settings: {
       tailwindcss: {
         // For TailwindCSS v4 - point to CSS config file
-        config: '/Users/satan/work/new-engine/libs/ui/src/tokens/index.css',
+        config: tokensCssAbsolutePath,
       },
     },
     plugins: {
diff --git a/libs/ui/scripts/validate-token-definitions.js b/libs/ui/scripts/validate-token-definitions.js
index f48f3486e3..b5f7d57bab 100755
--- a/libs/ui/scripts/validate-token-definitions.js
+++ b/libs/ui/scripts/validate-token-definitions.js
@@ -9,10 +9,15 @@
  * - Optional --profile timings
  */
 
-import fs from 'node:fs/promises'
 import { existsSync } from 'node:fs'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { performance } from 'node:perf_hooks'
+import { fileURLToPath } from 'node:url'
 import { globSync } from 'glob'
 
+const ROOT = path.resolve(fileURLToPath(new URL('.', import.meta.url)), '..')
+
 // Configuration for validation
 const CONFIG = {
   // Tokens to always consider "used" (whitelist)
@@ -224,7 +229,9 @@ function tokenToUtilityClasses(tokenName) {
     'spacing-translate',
     'spacing-menu-submenu',
   ]
-  if (customPropertyPrefixes.some((prefix) => tokenName.includes(`--${prefix}`))) {
+  if (
+    customPropertyPrefixes.some((prefix) => tokenName.includes(`--${prefix}`))
+  ) {
     return classes
   }
 
@@ -248,46 +255,51 @@ async function buildTokenIndices() {
 
   await Promise.all(
     files.map(async (file) => {
-      if (!existsSync(file)) return
-      const content = await fs.readFile(file, 'utf8')
-      const lines = content.split('\n')
-
-      // 1) Parse token definitions and dependency edges
-      const tokenRegex = /--([\w-]+)\s*:\s*([^;]+);/g
-      let m
-      while ((m = tokenRegex.exec(content)) !== null) {
-        const name = `--${m[1]}`
-        const value = m[2].trim()
-        const line = content.substring(0, m.index).split('\n').length
-        defs.set(name, { value, file, line })
-
-        // Extract dependencies from value
-        const deps = new Set()
-        for (const vm of value.matchAll(/var\(\s*(--[\w-]+)/g)) {
-          deps.add(vm[1])
-        }
-        for (const om of value.matchAll(/oklch\([^)]*var\(\s*(--[\w-]+)/g)) {
-          deps.add(om[1])
+      const abs = path.join(ROOT, file)
+      if (!existsSync(abs)) return
+      try {
+        const content = await fs.readFile(abs, 'utf8')
+        const lines = content.split('\n')
+
+        // 1) Parse token definitions and dependency edges
+        const tokenRegex = /--([\w-]+)\s*:\s*([^;]+);/g
+        let m
+        while ((m = tokenRegex.exec(content)) !== null) {
+          const name = `--${m[1]}`
+          const value = m[2].trim()
+          const line = content.substring(0, m.index).split('\n').length
+          defs.set(name, { value, file, line })
+
+          // Extract dependencies from value
+          const deps = new Set()
+          for (const vm of value.matchAll(/var\(\s*(--[\w-]+)/g)) {
+            deps.add(vm[1])
+          }
+          for (const om of value.matchAll(/oklch\([^)]*var\(\s*(--[\w-]+)/g)) {
+            deps.add(om[1])
+          }
+          dependencyGraph.set(name, deps)
         }
-        dependencyGraph.set(name, deps)
-      }
 
-      // 2) Index var() usage on non-definition lines as direct CSS usage
-      const defLine = new Set()
-      for (const [token, data] of defs) {
-        if (data.file === file) defLine.add(data.line)
-      }
+        // 2) Index var() usage on non-definition lines as direct CSS usage
+        const defLine = new Set()
+        for (const [token, data] of defs) {
+          if (data.file === file) defLine.add(data.line)
+        }
 
-      for (let i = 0; i < lines.length; i++) {
-        const lineNo = i + 1
-        if (defLine.has(lineNo)) continue
-        const line = lines[i]
-        if (!line.includes('var(')) continue
-        for (const vm of line.matchAll(/var\(\s*(--[\w-]+)/g)) {
-          const t = vm[1]
-          if (!cssUsage.has(t)) cssUsage.set(t, new Set())
-          cssUsage.get(t).add(`${file}:${lineNo} (CSS property)`) // direct usage
+        for (let i = 0; i < lines.length; i++) {
+          const lineNo = i + 1
+          if (defLine.has(lineNo)) continue
+          const line = lines[i]
+          if (!line.includes('var(')) continue
+          for (const vm of line.matchAll(/var\(\s*(--[\w-]+)/g)) {
+            const t = vm[1]
+            if (!cssUsage.has(t)) cssUsage.set(t, new Set())
+            cssUsage.get(t).add(`${file}:${lineNo} (CSS property)`) // direct usage
+          }
         }
+      } catch (err) {
+        console.error(`💥 Failed to process ${file}:`, err?.message || err)
       }
     })
   )
@@ -303,7 +315,10 @@ async function buildTokenIndices() {
 
 // Build component indices in a single pass
 async function buildComponentIndices(classToTokens, knownTokens) {
-  const files = globSync('src/**/*.{ts,tsx}', { ignore: CONFIG.excludeFiles })
+  const files = globSync('src/**/*.{ts,tsx}', {
+    cwd: ROOT,
+    ignore: CONFIG.excludeFiles,
+  })
   const componentVarUsage = new Map() // token -> Set<location>
   const classUsageTokens = new Set() // tokens used via classes
 
@@ -328,7 +343,7 @@ async function buildComponentIndices(classToTokens, knownTokens) {
           const lineNo = content.substring(0, m.index).split('\n').length
           componentVarUsage
             .get(t)
-            .add(`${file}:${lineNo} (component var() reference)`) 
+            .add(`${file}:${lineNo} (component var() reference)`)
         }
 
         // 1b) Arbitrary utilities referencing tokens directly, e.g. border-(length:--token)
@@ -341,7 +356,8 @@ async function buildComponentIndices(classToTokens, knownTokens) {
 
         // 2) Class-based usage: scan whole file for class-like tokens
         // Capture words with at least one hyphen, optionally with variant prefixes like sm:, hover:, data-[...]:
-        const classLike = /(^|[^A-Za-z0-9_-])([A-Za-z0-9_-]+(?::[A-Za-z0-9_\[\]-]+)*-[A-Za-z0-9_\[\]-]+)/g
+        const classLike =
+          /(^|[^A-Za-z0-9_-])([A-Za-z0-9_-]+(?::[A-Za-z0-9_[\]-]+)*-[A-Za-z0-9_[\]-]+)/g
         for (const m of content.matchAll(classLike)) {
           const raw = m[2]
           const cls = normalizeClass(raw)
@@ -405,8 +421,7 @@ async function validateTokenDefinitions({ profile = false } = {}) {
   // 2) Class maps from tokens
   p.mark('classmaps')
   const { classToTokens } = computeClassMaps(allTokens)
-  if (profile)
-    console.log(`⏱️  class maps: ${p.end('classmaps').toFixed(1)}ms`)
+  if (profile) console.log(`⏱️  class maps: ${p.end('classmaps').toFixed(1)}ms`)
 
   // 3) Component indices
   p.mark('components')
@@ -414,8 +429,7 @@ async function validateTokenDefinitions({ profile = false } = {}) {
     classToTokens,
     new Set(allTokens)
   )
-  if (profile)
-    console.log(`⏱️  components: ${p.end('components').toFixed(1)}ms`)
+  if (profile) console.log(`⏱️  components: ${p.end('components').toFixed(1)}ms`)
 
   // 4) Seed used set
   const usedDirect = new Set()
@@ -468,7 +482,8 @@ async function validateTokenDefinitions({ profile = false } = {}) {
   }
   for (const [file, list] of byFile) {
     console.log(`📄 ${file}:`)
-    for (const t of list) console.log(`  Line ${t.line}: ${t.name} = ${t.value}`)
+    for (const t of list)
+      console.log(`  Line ${t.line}: ${t.name} = ${t.value}`)
     console.log()
   }
   console.log(
diff --git a/libs/ui/scripts/validate-token-usage.js b/libs/ui/scripts/validate-token-usage.js
index 7ef6fd730c..718006ec8a 100755
--- a/libs/ui/scripts/validate-token-usage.js
+++ b/libs/ui/scripts/validate-token-usage.js
@@ -9,9 +9,11 @@
 
 import fs from 'node:fs'
 import path from 'node:path'
-import { fileURLToPath } from 'node:url'
+import { fileURLToPath, pathToFileURL } from 'node:url'
 import { globSync } from 'glob'
 
+const ROOT = path.resolve(fileURLToPath(new URL('.', import.meta.url)), '..')
+
 // Tailwind v4 namespace to utility prefix mappings
 const NAMESPACE_MAPPINGS = {
   color: [
@@ -148,7 +150,7 @@ const PREFIX_TO_NAMESPACES = (() => {
 /**
  * Extract Tailwind classes from TypeScript/JSX content
  */
-function extractTailwindClasses(content, filePath) {
+function extractTailwindClasses(content) {
   const classes = new Set()
 
   // Match className props (string values)
@@ -337,7 +339,6 @@ function mapClassToPossibleTokens(className) {
  */
 function loadDefinedTokens() {
   const tokens = new Set()
-  const ROOT = path.resolve(fileURLToPath(new URL('.', import.meta.url)), '..')
   const tokenFiles = globSync('src/tokens/**/*.css', { cwd: ROOT })
 
   for (const file of tokenFiles) {
@@ -350,7 +351,10 @@ function loadDefinedTokens() {
   }
 
   // Also treat inline style custom properties in components as defined
-  const componentFiles = globSync('src/**/*.{ts,tsx}', { cwd: ROOT, ignore: ['**/*.stories.tsx','**/*.test.tsx','**/*.spec.tsx'] })
+  const componentFiles = globSync('src/**/*.{ts,tsx}', {
+    cwd: ROOT,
+    ignore: ['**/*.stories.tsx', '**/*.test.tsx', '**/*.spec.tsx'],
+  })
   for (const file of componentFiles) {
     const content = fs.readFileSync(path.join(ROOT, file), 'utf8')
     // style={{ '--var': value }} or object entries '--var': value
@@ -402,6 +406,7 @@ function validateTokenUsage() {
   console.log(`📋 Found ${definedTokens.size} defined tokens`)
 
   const componentFiles = globSync('src/**/*.{ts,tsx}', {
+    cwd: ROOT,
     ignore: ['**/*.stories.tsx', '**/*.test.tsx', '**/*.spec.tsx'],
   })
 
@@ -409,7 +414,7 @@ function validateTokenUsage() {
   const errorsByFile = new Map()
 
   for (const file of componentFiles) {
-    const content = fs.readFileSync(file, 'utf8')
+    const content = fs.readFileSync(path.join(ROOT, file), 'utf8')
     const classes = extractTailwindClasses(content, file)
     const fileErrors = []
 
@@ -479,28 +484,30 @@ function validateTokenUsage() {
       '✅ All component classes have corresponding token definitions!'
     )
     return true
-  } else {
-    console.log(`❌ Found ${totalErrors} missing token definitions:\n`)
-
-    for (const [file, errors] of errorsByFile) {
-      console.log(`📄 ${file}:`)
-      for (const error of errors) {
-        const tokenList = error.expectedTokens.join(' OR ')
-        console.log(
-          `  Line ${error.line}: ${error.className} → Missing token: ${tokenList}`
-        )
-      }
-      console.log()
+  }
+  console.log(`❌ Found ${totalErrors} missing token definitions:\n`)
+
+  for (const [file, errors] of errorsByFile) {
+    console.log(`📄 ${file}:`)
+    for (const error of errors) {
+      const tokenList = error.expectedTokens.join(' OR ')
+      console.log(
+        `  Line ${error.line}: ${error.className} → Missing token: ${tokenList}`
+      )
     }
-
-    return false
+    console.log()
   }
+
+  return false
 }
 
 /**
  * Run validation
  */
-if (import.meta.url === `file://${process.argv[1]}`) {
+if (
+  process.argv[1] &&
+  pathToFileURL(path.resolve(process.argv[1])).href === import.meta.url
+) {
   try {
     const success = validateTokenUsage()
     process.exit(success ? 0 : 1)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fba8896fe1..17690c92b3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -79,11 +79,11 @@ importers:
         specifier: ^0.7.1
         version: 0.7.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@zag-js/carousel':
-        specifier: ^1.14.0
-        version: 1.15.0
+        specifier: ^1.22.1
+        version: 1.22.1
       '@zag-js/react':
-        specifier: ^1.14.0
-        version: 1.15.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+        specifier: ^1.22.1
+        version: 1.22.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -7461,18 +7461,12 @@ packages:
   '@zag-js/accordion@1.22.1':
     resolution: {integrity: sha512-P3jsauxnAGKBhuqs9gdivjEiSu7N7KnKRlgWlIpyti35askz8swHsqxsfkc2ASs9tcPKnPvuZDHIxXmJmZSLuQ==}
 
-  '@zag-js/anatomy@1.15.0':
-    resolution: {integrity: sha512-r0l5I7mSsF35HdwXm22TppNhfVftFuqvKfHvTUw+wQZhni4eUL93HypJD0Fl7mDhtP5zfVGfBwR048OzD0+tCw==}
-
   '@zag-js/anatomy@1.22.1':
     resolution: {integrity: sha512-I5OvOuJBt6hEqbpqVkWCOEoDfGMnKuLx+S0h7Un5SyAwnif3F1dSqDYujU28bCy8FtKs36vsq/izxufXyiXSEg==}
 
   '@zag-js/aria-hidden@1.22.1':
     resolution: {integrity: sha512-vPfAE35BfYPS1UbYRcNw8/kMl7uayE7LyRncK/gPMnoQMjmEKW0nXmD5WlCHFLdGX9WFGYTIde8k4U8ay+oqcg==}
 
-  '@zag-js/carousel@1.15.0':
-    resolution: {integrity: sha512-ZI9H34f2utdJ2Ek6GZa+iuRH4eC99GHD/VEOKLdGani8uadpT2v8M5kUwPGrlAJq9SiPbQ2UuXBmCkmurPQqdA==}
-
   '@zag-js/carousel@1.22.1':
     resolution: {integrity: sha512-bFbCRe5xarBtD3NnozHmCmrGJ+nLRhqLQFq+RG13fl1hlhUJaJ5AsS7e8L1r2ZLdbVVrsB0lUuW/ocfJ/G4MSw==}
 
@@ -7485,9 +7479,6 @@ packages:
   '@zag-js/combobox@1.22.1':
     resolution: {integrity: sha512-N4tGTmezfHGaKB0+aDB5yMuVzBv2ShgsAx1uizom6ElcvlYD2rsQTr3xLc4wyOR7fx0z6fFDo1+63/Dt3y0t4A==}
 
-  '@zag-js/core@1.15.0':
-    resolution: {integrity: sha512-P/8F3IXabMhpFnc6hC7GDg3rvUnvY27cuZU04hxjUqTH6+SfORIA/Uvqd4ekhC+dIprL9jicnFrmGgcyelyxfQ==}
-
   '@zag-js/core@1.22.1':
     resolution: {integrity: sha512-4BNrwO9Tadq2Z0d2xSSQs4O/o3OarEHzXM2FQqx46vrwSE57qUghnZex429ZQ51fuk8AL5Lowt26a9JxE9sVPg==}
 
@@ -7497,9 +7488,6 @@ packages:
   '@zag-js/dismissable@1.22.1':
     resolution: {integrity: sha512-0DzbykJu9QoXYw4Zcjte69Mtk6ThNRCXWxxCKBf930V8Bw3Ha7vfY5bgdb4RFT5K+BQP3E8vLT+PzIaDINn2Xw==}
 
-  '@zag-js/dom-query@1.15.0':
-    resolution: {integrity: sha512-z8H/j/Zs0eZEsGpbonScmlKSv0jEXKiAwUCrvQ9Mt6Gz9n0CQRM3MkFclSsM8aeiSv6qKLlhPfkzjl18OLkbgA==}
-
   '@zag-js/dom-query@1.22.1':
     resolution: {integrity: sha512-mtvGj2z3rkl40mkjd+QwoOHvxqpiOkY4mtVjzNzgzcbVtUN63Mz7giW8OZB+KLy37hwFX0B8JfiQncU8IOHNpw==}
 
@@ -7533,12 +7521,6 @@ packages:
   '@zag-js/rating-group@1.22.1':
     resolution: {integrity: sha512-QxBK+hpfkQ4yFHUr1YOSwEQ3LuTrdS32J9zV8UyHu8HbgwzfR7L8ZAa1PUUmG65tupzua2pbn1NioOkMvDmBOQ==}
 
-  '@zag-js/react@1.15.0':
-    resolution: {integrity: sha512-YSp9QBkdeBfZt4nVhJW+CUd5sNEEVAuwkmoZWDFUoDoWSAXwzSKuHCmTm5/8DaXg1IZD2bMrXgMNDqZv2x0hZw==}
-    peerDependencies:
-      react: '>=18.0.0'
-      react-dom: '>=18.0.0'
-
   '@zag-js/react@1.22.1':
     resolution: {integrity: sha512-TcIKkNo9EFel+d92nb7104voKJNDiMkqq9nn7Ozq/TE8A62JPf5zk8y8zqoxTbGDTTk+tDjW7Sm1IKb4r6rX4w==}
     peerDependencies:
@@ -7551,9 +7533,6 @@ packages:
   '@zag-js/remove-scroll@1.22.1':
     resolution: {integrity: sha512-2TrS8ljp8SADX5xRB/+KGBCBYbYTeH0k5IEalG2rt8ReNyNAW1JfCrm53KCVoCg9YmxKF3MrxPgPT83MNFsJhQ==}
 
-  '@zag-js/scroll-snap@1.15.0':
-    resolution: {integrity: sha512-/LfBlsjoR4tVL3Djus3k9jKLhwC2ApdHTACxEc72TAewoPe4M8icnSDLXmKHvwwOhzK0HlFz8wGm6ZncAbQbuA==}
-
   '@zag-js/scroll-snap@1.22.1':
     resolution: {integrity: sha512-kctqJiteALaavoHEpYBDSPgUErIdwAoY5jcrU4Mq5L8FjtI4tSNr8BWcXzSBK2UVqaKN+vDo+PDcj7XIXTUQJA==}
 
@@ -7566,9 +7545,6 @@ packages:
   '@zag-js/steps@1.22.1':
     resolution: {integrity: sha512-eJCHbHG9aGAbzb/IQCqpmk6fmwSmIfocAxNKVTljroD6OHkBtqgaZQVS3q4xyjz61nB/d/0ZlsvpCVjm1EhwBw==}
 
-  '@zag-js/store@1.15.0':
-    resolution: {integrity: sha512-ecqjcy3b1GsULpsT8RVJV9KDaikajRN0XRg48HMvaGkaPIvxI6esyrE6RKnShuqr2eVXIPghgBnCnrJUev4UlA==}
-
   '@zag-js/store@1.22.1':
     resolution: {integrity: sha512-KrMWi/Fa4cqOjx2zDSMIu6vztFYik+V3K6VPWRVONM4FkboLpTqAEayzwgTTNqMK9iYYZIYjhiPhAVLW9iLuBg==}
 
@@ -7587,15 +7563,9 @@ packages:
   '@zag-js/tree-view@1.22.1':
     resolution: {integrity: sha512-AQmOn1mB+nLJEaq0xdSVnTI8Vt3nB3OweqdB12jkbdIOcWI9eY0RfhiNHC0k0mgAw+dMjyn84op/gOd9VVdtmA==}
 
-  '@zag-js/types@1.15.0':
-    resolution: {integrity: sha512-lV2ov2M07BlmjDUCSwBeHxPApHI3oAiLytG94AqcYvQ0BtsCRo5T60yRQ0syFc6fHf0e9+kwt89uoIgfGFYfmw==}
-
   '@zag-js/types@1.22.1':
     resolution: {integrity: sha512-lvpDSMR96e7H7TdwOiVpMzj6css5Ydix1nBi7BlmjME6v5OPR0KZwVDGD6h5UtTeVjPq8dPaqM8TJWw+QwbQSw==}
 
-  '@zag-js/utils@1.15.0':
-    resolution: {integrity: sha512-XctFny5H8C00BsougV40Yp0qVEj9M2d/NRme7B33mon9wG+3hscZwP6miJmF6BYI5Pgu6e2P0Sv45FddQU1Tkg==}
-
   '@zag-js/utils@1.22.1':
     resolution: {integrity: sha512-VXY4gjHaTENHW+wjnKKENZ2jcaW0vnG2a5lYEMuZR4dpNCKH217yFr/bCNrI44y2s1W3LWhWmpEjfZluP6udYg==}
 
@@ -23011,21 +22981,10 @@ snapshots:
       '@zag-js/types': 1.22.1
       '@zag-js/utils': 1.22.1
 
-  '@zag-js/anatomy@1.15.0': {}
-
   '@zag-js/anatomy@1.22.1': {}
 
   '@zag-js/aria-hidden@1.22.1': {}
 
-  '@zag-js/carousel@1.15.0':
-    dependencies:
-      '@zag-js/anatomy': 1.15.0
-      '@zag-js/core': 1.15.0
-      '@zag-js/dom-query': 1.15.0
-      '@zag-js/scroll-snap': 1.15.0
-      '@zag-js/types': 1.15.0
-      '@zag-js/utils': 1.15.0
-
   '@zag-js/carousel@1.22.1':
     dependencies:
       '@zag-js/anatomy': 1.22.1
@@ -23060,11 +23019,6 @@ snapshots:
       '@zag-js/types': 1.22.1
       '@zag-js/utils': 1.22.1
 
-  '@zag-js/core@1.15.0':
-    dependencies:
-      '@zag-js/dom-query': 1.15.0
-      '@zag-js/utils': 1.15.0
-
   '@zag-js/core@1.22.1':
     dependencies:
       '@zag-js/dom-query': 1.22.1
@@ -23088,10 +23042,6 @@ snapshots:
       '@zag-js/interact-outside': 1.22.1
       '@zag-js/utils': 1.22.1
 
-  '@zag-js/dom-query@1.15.0':
-    dependencies:
-      '@zag-js/types': 1.15.0
-
   '@zag-js/dom-query@1.22.1':
     dependencies:
       '@zag-js/types': 1.22.1
@@ -23168,15 +23118,6 @@ snapshots:
       '@zag-js/types': 1.22.1
       '@zag-js/utils': 1.22.1
 
-  '@zag-js/react@1.15.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
-    dependencies:
-      '@zag-js/core': 1.15.0
-      '@zag-js/store': 1.15.0
-      '@zag-js/types': 1.15.0
-      '@zag-js/utils': 1.15.0
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
-
   '@zag-js/react@1.22.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@zag-js/core': 1.22.1
@@ -23192,10 +23133,6 @@ snapshots:
     dependencies:
       '@zag-js/dom-query': 1.22.1
 
-  '@zag-js/scroll-snap@1.15.0':
-    dependencies:
-      '@zag-js/dom-query': 1.15.0
-
   '@zag-js/scroll-snap@1.22.1':
     dependencies:
       '@zag-js/dom-query': 1.22.1
@@ -23227,10 +23164,6 @@ snapshots:
       '@zag-js/types': 1.22.1
       '@zag-js/utils': 1.22.1
 
-  '@zag-js/store@1.15.0':
-    dependencies:
-      proxy-compare: 3.0.1
-
   '@zag-js/store@1.22.1':
     dependencies:
       proxy-compare: 3.0.1
@@ -23280,16 +23213,10 @@ snapshots:
       '@zag-js/types': 1.22.1
       '@zag-js/utils': 1.22.1
 
-  '@zag-js/types@1.15.0':
-    dependencies:
-      csstype: 3.1.3
-
   '@zag-js/types@1.22.1':
     dependencies:
       csstype: 3.1.3
 
-  '@zag-js/utils@1.15.0': {}
-
   '@zag-js/utils@1.22.1': {}
 
   '@zkochan/js-yaml@0.0.7':

From 8f5e45f323f5bb1b678557385e04cf1019b6ebad Mon Sep 17 00:00:00 2001
From: Petr Glaser <syreanis+1@gmail.com>
Date: Sun, 7 Sep 2025 11:43:54 +0200
Subject: [PATCH 43/44] fix: allow transparency and colour variants

---
 libs/ui/scripts/validate-token-usage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/ui/scripts/validate-token-usage.js b/libs/ui/scripts/validate-token-usage.js
index 718006ec8a..dc91f52b35 100755
--- a/libs/ui/scripts/validate-token-usage.js
+++ b/libs/ui/scripts/validate-token-usage.js
@@ -96,7 +96,7 @@ const IGNORE_PATTERNS = [
   /^(ml|mr|mt|mb|mx|my|pl|pr|pt|pb|px|py)-(0|px|0\.5|1|1\.5|2|2\.5|3|3\.5|4|5|6|7|8|9|10|11|12|14|16|20|24|28|32|36|40|44|48|52|56|60|64|72|80|96|auto|full|screen|min|max|fit)$/,
 
   // Standard colors including transparent
-  /^(bg|text|border)-(transparent|current|black|white|slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-?\d{0,3}$/,
+  /^(bg|text|border)-(transparent|current|black|white|slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)(?:-\d{1,3})?(?:\/\d{1,3})?$/,
   /^(bg|text|border)-(transparent|current|black|white|inherit)$/,
 
   // Standard typography

From e4cef8a4270653a471c38dadb722200222835950 Mon Sep 17 00:00:00 2001
From: Petr Glaser <syreanis+1@gmail.com>
Date: Sun, 7 Sep 2025 11:54:33 +0200
Subject: [PATCH 44/44] fix: simplify matching

---
 libs/ui/scripts/validate-token-usage.js | 34 ++++++++++++++++++-------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/libs/ui/scripts/validate-token-usage.js b/libs/ui/scripts/validate-token-usage.js
index dc91f52b35..e9abd1e43d 100755
--- a/libs/ui/scripts/validate-token-usage.js
+++ b/libs/ui/scripts/validate-token-usage.js
@@ -147,6 +147,8 @@ const PREFIX_TO_NAMESPACES = (() => {
   return map
 })()
 
+const CLASS_STRING_REGEX = /\S+/g
+
 /**
  * Extract Tailwind classes from TypeScript/JSX content
  */
@@ -157,7 +159,9 @@ function extractTailwindClasses(content) {
   const classNameMatches = content.matchAll(/className\s*=\s*["']([^"']+)["']/g)
   for (const match of classNameMatches) {
     const classString = match[1]
-    classString.split(/\s+/).forEach((cls) => cls && classes.add(cls.trim()))
+    for (const cls of classString.match(CLASS_STRING_REGEX) || []) {
+      classes.add(cls.trim())
+    }
   }
 
   // Match className arrays: className: ['class1', 'class2'] or className={['class1', 'class2']}
@@ -170,7 +174,9 @@ function extractTailwindClasses(content) {
     const stringMatches = arrayContent.matchAll(/['"`]([^'"`]+)['"`]/g)
     for (const stringMatch of stringMatches) {
       const classString = stringMatch[1]
-      classString.split(/\s+/).forEach((cls) => cls && classes.add(cls.trim()))
+      for (const cls of classString.match(CLASS_STRING_REGEX) || []) {
+        classes.add(cls.trim())
+      }
     }
   }
 
@@ -180,9 +186,11 @@ function extractTailwindClasses(content) {
     const classString = match[1]
     // Extract static classes, ignore interpolations
     const staticParts = classString.split(/\$\{[^}]+\}/)
-    staticParts.forEach((part) => {
-      part.split(/\s+/).forEach((cls) => cls && classes.add(cls.trim()))
-    })
+    for (const part of staticParts) {
+      for (const cls of part.match(CLASS_STRING_REGEX) || []) {
+        classes.add(cls.trim())
+      }
+    }
   }
 
   // Match tailwind-variants tv() configurations
@@ -194,7 +202,9 @@ function extractTailwindClasses(content) {
     const slotMatches = tvConfig.matchAll(/\[\s*['"`]([^'"`]+)['"`]/g)
     for (const slotMatch of slotMatches) {
       const classString = slotMatch[1]
-      classString.split(/\s+/).forEach((cls) => cls && classes.add(cls.trim()))
+      for (const cls of classString.match(CLASS_STRING_REGEX) || []) {
+        classes.add(cls.trim())
+      }
     }
 
     // Extract from variant values
@@ -203,7 +213,9 @@ function extractTailwindClasses(content) {
     )
     for (const variantMatch of variantMatches) {
       const classString = variantMatch[1]
-      classString.split(/\s+/).forEach((cls) => cls && classes.add(cls.trim()))
+      for (const cls of classString.match(CLASS_STRING_REGEX) || []) {
+        classes.add(cls.trim())
+      }
     }
   }
 
@@ -214,7 +226,9 @@ function extractTailwindClasses(content) {
     const stringMatches = args.matchAll(/['"`]([^'"`]+)['"`]/g)
     for (const stringMatch of stringMatches) {
       const classString = stringMatch[1]
-      classString.split(/\s+/).forEach((cls) => cls && classes.add(cls.trim()))
+      for (const cls of classString.match(CLASS_STRING_REGEX) || []) {
+        classes.add(cls.trim())
+      }
     }
   }
 
@@ -226,7 +240,9 @@ function extractTailwindClasses(content) {
     const classString = match[1]
     // Only extract if it looks like CSS classes
     if (/^[a-z-\s:[\]()]+$/i.test(classString)) {
-      classString.split(/\s+/).forEach((cls) => cls && classes.add(cls.trim()))
+      for (const cls of classString.match(CLASS_STRING_REGEX) || []) {
+        classes.add(cls.trim())
+      }
     }
   }