@etus/tokens 0.4.0-beta.3 → 0.4.0-beta.5

package/dist/tokens.css

@@ -619,8 +619,8 @@
   --color-mobile: oklch(65.95% 0.2608 320.32);
   --color-other: oklch(63.68% 0.2078 25.33);
   --color-picker-content-gap: 12px;
-  --color-picker-content-padding: 12px;
-  --color-picker-content-width: 260px;
+  --color-picker-content-padding: 16px;
+  --color-picker-content-width: 320px;
   --color-picker-filled-preview-radius: 9999px;
   --color-picker-focus-ring-destructive: oklch(63.68% 0.2078 25.33);
   --color-picker-focus-ring-primary: oklch(81.75% 0.1821 159.79);
@@ -655,8 +655,8 @@
   --combobox-trigger-padding-x-lg: 14px;
   --combobox-trigger-padding-x-md: 12px;
   --combobox-trigger-padding-x-sm: 10px;
-  --combobox-trigger-padding-y-lg: 8px;
-  --combobox-trigger-padding-y-md: 8px;
+  --combobox-trigger-padding-y-lg: 6px;
+  --combobox-trigger-padding-y-md: 4px;
   --combobox-trigger-padding-y-sm: 4px;
   --combobox-trigger-radius: 8px;
   --combobox-trigger-ring-primary: oklch(81.75% 0.1821 159.79);
@@ -1194,10 +1194,12 @@
   --green-800: oklch(44.79% 0.1083 151.33);
   --green-900: oklch(39.25% 0.0896 152.54);
   --green-950: oklch(26.64% 0.0628 152.93);
+  --header-content-height: 36px;
+  --header-height: 64px;
   --header-root-bg: oklch(100.00% 0.0000 0);
   --header-root-border-color: oklch(92.19% 0.0000 0);
-  --header-root-padding-x: 16px;
-  --header-root-padding-y: 12px;
+  --header-root-padding-x: 32px;
+  --header-root-padding-y: 20px;
   --header-size-lg-height: 80px;
   --header-size-md-height: 64px;
   --header-size-sm-height: 48px;
@@ -1504,6 +1506,10 @@
   --markdown-editor-toolbar-border-bottom: oklch(92.19% 0.0000 0);
   --markdown-editor-toolbar-gap: 4px;
   --markdown-editor-toolbar-padding: 8px;
+  --menu-content-bg: oklch(100.00% 0.0000 0);
+  --menu-content-border: oklch(92.19% 0.0000 0);
+  --menu-content-radius: 8px;
+  --menu-content-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --menu-item-bg-default: transparent;
   --menu-item-bg-hover: oklch(95.21% 0.0467 171.12);
   --menu-item-fg-default: oklch(14.48% 0.0000 0);
@@ -1668,9 +1674,8 @@
   --notification-dot-color-info: oklch(54.61% 0.2152 262.88);
   --notification-dot-color-success: oklch(62.71% 0.1699 149.21);
   --notification-dot-color-warning: oklch(86.06% 0.1731 91.94);
-  --notification-dot-left: 6px;
+  --notification-dot-gap: 6px;
   --notification-dot-size: 8px;
-  --notification-dot-top: 16px;
   --notification-root-gap: 12px;
   --notification-root-padding: 12px;
   --overlay: oklch(0.00% 0.0000 0 / 60.0%);
@@ -1948,14 +1953,14 @@
   --select-trigger-disabled-border: oklch(97.02% 0.0000 0);
   --select-trigger-disabled-fg: oklch(55.55% 0.0000 0);
   --select-trigger-gap: 8px;
-  --select-trigger-height-lg: 40px;
-  --select-trigger-height-md: 36px;
-  --select-trigger-height-sm: 32px;
+  --select-trigger-height-lg: 44px;
+  --select-trigger-height-md: 40px;
+  --select-trigger-height-sm: 36px;
   --select-trigger-padding-x-lg: 0.875rem;
   --select-trigger-padding-x-md: 12px;
   --select-trigger-padding-x-sm: 0.625rem;
-  --select-trigger-padding-y-lg: 8px;
-  --select-trigger-padding-y-md: 8px;
+  --select-trigger-padding-y-lg: 0.375rem;
+  --select-trigger-padding-y-md: 4px;
   --select-trigger-padding-y-sm: 4px;
   --select-trigger-radius: 8px;
   --select-trigger-ring-destructive: oklch(63.68% 0.2078 25.33);
@@ -3303,6 +3308,8 @@
   --markdown-editor-root-border: oklch(43.86% 0.0000 0);
   --markdown-editor-toolbar-background: oklch(26.86% 0.0000 0);
   --markdown-editor-toolbar-border-bottom: oklch(37.15% 0.0000 0);
+  --menu-content-bg: oklch(20.46% 0.0000 0);
+  --menu-content-border: oklch(37.15% 0.0000 0);
   --menu-item-bg-hover: oklch(26.88% 0.0527 163.85);
   --menu-item-fg-default: oklch(98.51% 0.0000 0);
   --menu-item-fg-destructive: oklch(63.68% 0.2078 25.33);
@@ -3407,7 +3414,7 @@
   --rail-accent-foreground: oklch(95.21% 0.0467 171.12);
   --rail-accent: oklch(26.88% 0.0527 163.85);
   --rail-background: oklch(20.46% 0.0000 0);
-  --rail-border: oklch(26.86% 0.0000 0);
+  --rail-border: oklch(37.15% 0.0000 0);
   --rating-icon-color-filled: oklch(79.52% 0.1617 86.05);
   --report-builder-accent-bg-subtle: oklch(33.49% 0.0383 251.89);
   --report-builder-accent-bg: oklch(34.67% 0.0731 256.69);
@@ -3468,7 +3475,7 @@
   --sidebar-accent-foreground: oklch(95.21% 0.0467 171.12);
   --sidebar-accent: oklch(26.88% 0.0527 163.85);
   --sidebar-background: oklch(20.46% 0.0000 0);
-  --sidebar-border: oklch(26.86% 0.0000 0);
+  --sidebar-border: oklch(37.15% 0.0000 0);
   --sidebar-container-background: oklch(20.46% 0.0000 0);
   --sidebar-foreground: oklch(97.02% 0.0000 0);
   --sidebar-input-background: oklch(14.48% 0.0000 0);
@@ -4046,6 +4053,8 @@
   --markdown-editor-root-border: oklch(92.19% 0.0000 0);
   --markdown-editor-toolbar-background: oklch(97.02% 0.0000 0);
   --markdown-editor-toolbar-border-bottom: oklch(92.19% 0.0000 0);
+  --menu-content-bg: oklch(100.00% 0.0000 0);
+  --menu-content-border: oklch(92.19% 0.0000 0);
   --menu-item-bg-hover: oklch(95.21% 0.0467 171.12);
   --menu-item-fg-default: oklch(14.48% 0.0000 0);
   --menu-item-fg-destructive: oklch(63.68% 0.2078 25.33);
@@ -4913,6 +4922,8 @@
   --color-markdown-editor-root-border: var(--markdown-editor-root-border);
   --color-markdown-editor-toolbar-background: var(--markdown-editor-toolbar-background);
   --color-markdown-editor-toolbar-border-bottom: var(--markdown-editor-toolbar-border-bottom);
+  --color-menu-content-bg: var(--menu-content-bg);
+  --color-menu-content-border: var(--menu-content-border);
   --color-menu-item-bg-default: var(--menu-item-bg-default);
   --color-menu-item-bg-hover: var(--menu-item-bg-hover);
   --color-menu-item-fg-default: var(--menu-item-fg-default);

package/dist/tokens.js

@@ -149,7 +149,7 @@ export const tokens = {
     "sidebar-accent": "oklch(26.88% 0.0527 163.85)",
     "sidebar-accent-foreground": "oklch(95.21% 0.0467 171.12)",
     "sidebar-background": "oklch(20.46% 0.0000 0)",
-    "sidebar-border": "oklch(26.86% 0.0000 0)",
+    "sidebar-border": "oklch(37.15% 0.0000 0)",
     "sidebar-foreground": "oklch(97.02% 0.0000 0)",
     "sidebar-ring": "oklch(84.11% 0.1609 163.31)",
     "status-destructive-background": "oklch(63.68% 0.2078 25.33)",
@@ -759,8 +759,8 @@ export const tokens = {
     "color-mobile": "oklch(65.95% 0.2608 320.32)",
     "color-other": "oklch(63.68% 0.2078 25.33)",
     "color-picker-content-gap": "12px",
-    "color-picker-content-padding": "12px",
-    "color-picker-content-width": "260px",
+    "color-picker-content-padding": "16px",
+    "color-picker-content-width": "320px",
     "color-picker-filled-preview-radius": "9999px",
     "color-picker-focus-ring-destructive": "oklch(63.68% 0.2078 25.33)",
     "color-picker-focus-ring-primary": "oklch(81.75% 0.1821 159.79)",
@@ -795,8 +795,8 @@ export const tokens = {
     "combobox-trigger-padding-x-lg": "14px",
     "combobox-trigger-padding-x-md": "12px",
     "combobox-trigger-padding-x-sm": "10px",
-    "combobox-trigger-padding-y-lg": "8px",
-    "combobox-trigger-padding-y-md": "8px",
+    "combobox-trigger-padding-y-lg": "6px",
+    "combobox-trigger-padding-y-md": "4px",
     "combobox-trigger-padding-y-sm": "4px",
     "combobox-trigger-radius": "8px",
     "combobox-trigger-ring-primary": "oklch(81.75% 0.1821 159.79)",
@@ -1312,10 +1312,12 @@ export const tokens = {
     "form-label-fg": "oklch(14.48% 0.0000 0)",
     "form-label-size": "14px",
     "form-label-weight": "500",
+    "header-content-height": "36px",
+    "header-height": "64px",
     "header-root-bg": "oklch(100.00% 0.0000 0)",
     "header-root-border-color": "oklch(92.19% 0.0000 0)",
-    "header-root-padding-x": "16px",
-    "header-root-padding-y": "12px",
+    "header-root-padding-x": "32px",
+    "header-root-padding-y": "20px",
     "header-size-lg-height": "80px",
     "header-size-md-height": "64px",
     "header-size-sm-height": "48px",
@@ -1622,6 +1624,10 @@ export const tokens = {
     "markdown-editor-toolbar-border-bottom": "oklch(92.19% 0.0000 0)",
     "markdown-editor-toolbar-gap": "4px",
     "markdown-editor-toolbar-padding": "8px",
+    "menu-content-bg": "oklch(100.00% 0.0000 0)",
+    "menu-content-border": "oklch(92.19% 0.0000 0)",
+    "menu-content-radius": "8px",
+    "menu-content-shadow": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
     "menu-item-bg-default": "transparent",
     "menu-item-bg-hover": "oklch(95.21% 0.0467 171.12)",
     "menu-item-fg-default": "oklch(14.48% 0.0000 0)",
@@ -1775,9 +1781,8 @@ export const tokens = {
     "notification-dot-color-info": "oklch(54.61% 0.2152 262.88)",
     "notification-dot-color-success": "oklch(62.71% 0.1699 149.21)",
     "notification-dot-color-warning": "oklch(86.06% 0.1731 91.94)",
-    "notification-dot-left": "6px",
+    "notification-dot-gap": "6px",
     "notification-dot-size": "8px",
-    "notification-dot-top": "16px",
     "notification-root-gap": "12px",
     "notification-root-padding": "12px",
     "overlay": "oklch(0.00% 0.0000 0 / 60.0%)",
@@ -2216,14 +2221,14 @@ export const tokens = {
     "select-trigger-disabled-border": "oklch(97.02% 0.0000 0)",
     "select-trigger-disabled-fg": "oklch(55.55% 0.0000 0)",
     "select-trigger-gap": "8px",
-    "select-trigger-height-lg": "40px",
-    "select-trigger-height-md": "36px",
-    "select-trigger-height-sm": "32px",
+    "select-trigger-height-lg": "44px",
+    "select-trigger-height-md": "40px",
+    "select-trigger-height-sm": "36px",
     "select-trigger-padding-x-lg": "0.875rem",
     "select-trigger-padding-x-md": "12px",
     "select-trigger-padding-x-sm": "0.625rem",
-    "select-trigger-padding-y-lg": "8px",
-    "select-trigger-padding-y-md": "8px",
+    "select-trigger-padding-y-lg": "0.375rem",
+    "select-trigger-padding-y-md": "4px",
     "select-trigger-padding-y-sm": "4px",
     "select-trigger-radius": "8px",
     "select-trigger-ring-destructive": "oklch(63.68% 0.2078 25.33)",

package/dist/tokens.meta.json

@@ -1760,7 +1760,7 @@
         "type": "color",
         "description": "Sidebar divider (neutral-200)",
         "light": "oklch(92.19% 0.0000 0)",
-        "dark": "oklch(26.86% 0.0000 0)"
+        "dark": "oklch(37.15% 0.0000 0)"
       },
       {
         "name": "sidebar-foreground",
@@ -7122,13 +7122,15 @@
         "name": "color-picker-content-padding",
         "cssVar": "--color-picker-content-padding",
         "type": "dimension",
-        "value": "12px"
+        "description": "ColorPicker popover padding 16px aligned with Figma spacing/s-16 (frame 1384:7946) per DES-1255 — pre-fix was spacing.3 (12px).",
+        "value": "16px"
       },
       {
         "name": "color-picker-content-width",
         "cssVar": "--color-picker-content-width",
         "type": "dimension",
-        "value": "260px"
+        "description": "ColorPicker popover width 320px aligned with Figma (node 1384-7726, all states 320w) per DES-1255 — pre-fix was 260px.",
+        "value": "320px"
       },
       {
         "name": "color-picker-filled-preview-radius",
@@ -7341,12 +7343,14 @@
       {
         "name": "combobox-trigger-padding-y-lg",
         "cssVar": "--combobox-trigger-padding-y-lg",
-        "value": "8px"
+        "description": "Aligned with --input-size-lg-py 6px (DES-1257). Pre-fix was spacing.2 (8px).",
+        "value": "6px"
       },
       {
         "name": "combobox-trigger-padding-y-md",
         "cssVar": "--combobox-trigger-padding-y-md",
-        "value": "8px"
+        "description": "Aligned with --input-size-md-py 4px (DES-1257, sizes ← Input). Pre-fix was spacing.2 (8px).",
+        "value": "4px"
       },
       {
         "name": "combobox-trigger-padding-y-sm",
@@ -9936,6 +9940,20 @@
         "type": "dimension",
         "value": "14px"
       },
+      {
+        "name": "header-content-height",
+        "cssVar": "--header-content-height",
+        "type": "dimension",
+        "description": "HeaderNav/HeaderActions content row height (Figma h-9 = 36px). Drives a composed header to 76px. DES-1271.",
+        "value": "36px"
+      },
+      {
+        "name": "header-height",
+        "cssVar": "--header-height",
+        "type": "dimension",
+        "description": "Min height for a logo-only header (Figma 'Logo Left'/'Logo Centered' = 64px). Grows to 76px when HeaderNav/HeaderActions are present (content row 36px + padding-y 2×20px). DES-1271.",
+        "value": "64px"
+      },
       {
         "name": "header-root-bg",
         "cssVar": "--header-root-bg",
@@ -9952,13 +9970,15 @@
         "name": "header-root-padding-x",
         "cssVar": "--header-root-padding-x",
         "type": "dimension",
-        "value": "16px"
+        "description": "Horizontal padding — Figma spacing/s-32 (32px). DES-1271.",
+        "value": "32px"
       },
       {
         "name": "header-root-padding-y",
         "cssVar": "--header-root-padding-y",
         "type": "dimension",
-        "value": "12px"
+        "description": "Vertical padding — Figma spacing/s-20 (20px). DES-1271.",
+        "value": "20px"
       },
       {
         "name": "header-size-lg-height",
@@ -11270,6 +11290,31 @@
         "type": "dimension",
         "value": "8px"
       },
+      {
+        "name": "menu-content-bg",
+        "cssVar": "--menu-content-bg",
+        "type": "color",
+        "description": "Menu floating chrome background — popover surface. Chrome encapsulated in Menu.tsx per DES-1281 (was applied by the consumer).",
+        "value": "oklch(100.00% 0.0000 0)"
+      },
+      {
+        "name": "menu-content-border",
+        "cssVar": "--menu-content-border",
+        "type": "color",
+        "value": "oklch(92.19% 0.0000 0)"
+      },
+      {
+        "name": "menu-content-radius",
+        "cssVar": "--menu-content-radius",
+        "type": "dimension",
+        "description": "Menu floating chrome radius 8px (Figma radius/md, node 1447-6819).",
+        "value": "8px"
+      },
+      {
+        "name": "menu-content-shadow",
+        "cssVar": "--menu-content-shadow",
+        "value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
+      },
       {
         "name": "menu-item-bg-default",
         "cssVar": "--menu-item-bg-default",
@@ -12176,9 +12221,10 @@
         "value": "oklch(86.06% 0.1731 91.94)"
       },
       {
-        "name": "notification-dot-left",
-        "cssVar": "--notification-dot-left",
+        "name": "notification-dot-gap",
+        "cssVar": "--notification-dot-gap",
         "type": "dimension",
+        "description": "Inline gap between the unread dot and the title per DES-1289 — Figma renders the dot inline in the title (spacing/1-5 = 6px), replacing the former absolute top/left offsets.",
         "value": "6px"
       },
       {
@@ -12187,12 +12233,6 @@
         "type": "dimension",
         "value": "8px"
       },
-      {
-        "name": "notification-dot-top",
-        "cssVar": "--notification-dot-top",
-        "type": "dimension",
-        "value": "16px"
-      },
       {
         "name": "notification-root-gap",
         "cssVar": "--notification-root-gap",
@@ -13416,19 +13456,22 @@
         "name": "select-trigger-height-lg",
         "cssVar": "--select-trigger-height-lg",
         "type": "dimension",
-        "value": "40px"
+        "description": "Select trigger lg height 44px — aligned with --input-size-lg-h (DES-1295). Pre-fix was spacing.10 (40px).",
+        "value": "44px"
       },
       {
         "name": "select-trigger-height-md",
         "cssVar": "--select-trigger-height-md",
         "type": "dimension",
-        "value": "36px"
+        "description": "Select trigger md height 40px — aligned with --input-size-md-h (DES-1295). Pre-fix was spacing.9 (36px).",
+        "value": "40px"
       },
       {
         "name": "select-trigger-height-sm",
         "cssVar": "--select-trigger-height-sm",
         "type": "dimension",
-        "value": "32px"
+        "description": "Select trigger sm height 36px — Select is an Input type in Figma (DES-1295), aligned with --input-size-sm-h. Pre-fix was spacing.8 (32px).",
+        "value": "36px"
       },
       {
         "name": "select-trigger-padding-x-lg",
@@ -13452,13 +13495,15 @@
         "name": "select-trigger-padding-y-lg",
         "cssVar": "--select-trigger-padding-y-lg",
         "type": "dimension",
-        "value": "8px"
+        "description": "Aligned with --input-size-lg-py 6px (DES-1295). Pre-fix was spacing.2 (8px).",
+        "value": "0.375rem"
       },
       {
         "name": "select-trigger-padding-y-md",
         "cssVar": "--select-trigger-padding-y-md",
         "type": "dimension",
-        "value": "8px"
+        "description": "Aligned with --input-size-md-py 4px (DES-1295). Pre-fix was spacing.2 (8px).",
+        "value": "4px"
       },
       {
         "name": "select-trigger-padding-y-sm",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etus/tokens",
-  "version": "0.4.0-beta.3",
+  "version": "0.4.0-beta.5",
   "description": "Seven Design System - Design tokens (CSS variables) for ETUS applications",
   "license": "MIT",
   "repository": {