@urbicon-ui/blocks 6.21.2 → 6.22.0

package/dist/style/semantic.css

@@ -183,7 +183,12 @@
 
   /* === SHADOWS ===
      Dark mode uses higher alpha to compensate for low contrast against
-     dark surfaces. light-dark() handles the whole multi-layer shadow.
+     dark surfaces. light-dark() may wrap ONLY the per-layer <color> —
+     it is a color function, and layers must stay top-level
+     comma-separated. Wrapping the whole multi-layer list made every
+     `box-shadow: var(--blocks-shadow-*)` invalid at computed-value time
+     (shadows silently rendered as none, library-wide) — verified in
+     chromium before the 2026-07-13 fix.
 
      The shadow tint (`--blocks-shadow-tint`) is an oklch L C H triplet
      WITHOUT the alpha channel — declared on `:root` (not inside @theme)
@@ -192,34 +197,55 @@
      their shadow palette — e.g. editorial sets it to a dark brown so
      shadows blend with cream surfaces instead of reading as cool
      smudges. */
-  --color-shadow-xs: light-dark(
-    0 1px 2px 0 oklch(var(--blocks-shadow-tint) / 0.05),
-    0 1px 2px 0 oklch(var(--blocks-shadow-tint) / 0.2)
-  );
-  --color-shadow-sm: light-dark(
-    0 1px 3px 0 oklch(var(--blocks-shadow-tint) / 0.1) 0 1px 2px -1px
-      oklch(var(--blocks-shadow-tint) / 0.1),
-    0 1px 3px 0 oklch(var(--blocks-shadow-tint) / 0.3) 0 1px 2px -1px
-      oklch(var(--blocks-shadow-tint) / 0.3)
-  );
-  --color-shadow-base: light-dark(
-    0 4px 6px -1px oklch(var(--blocks-shadow-tint) / 0.1) 0 2px 4px -2px
-      oklch(var(--blocks-shadow-tint) / 0.1),
-    0 4px 6px -1px oklch(var(--blocks-shadow-tint) / 0.4) 0 2px 4px -2px
-      oklch(var(--blocks-shadow-tint) / 0.4)
-  );
-  --color-shadow-md: light-dark(
-    0 10px 15px -3px oklch(var(--blocks-shadow-tint) / 0.1) 0 4px 6px -4px
-      oklch(var(--blocks-shadow-tint) / 0.1),
-    0 10px 15px -3px oklch(var(--blocks-shadow-tint) / 0.4) 0 4px 6px -4px
-      oklch(var(--blocks-shadow-tint) / 0.4)
-  );
-  --color-shadow-lg: light-dark(
-    0 20px 25px -5px oklch(var(--blocks-shadow-tint) / 0.1) 0 8px 10px -6px
-      oklch(var(--blocks-shadow-tint) / 0.1),
-    0 20px 25px -5px oklch(var(--blocks-shadow-tint) / 0.5) 0 8px 10px -6px
-      oklch(var(--blocks-shadow-tint) / 0.5)
-  );
+  --color-shadow-xs: 0 1px 2px 0
+    light-dark(
+      oklch(var(--blocks-shadow-tint) / 0.05),
+      oklch(var(--blocks-shadow-tint) / 0.2)
+    );
+  --color-shadow-sm:
+    0 1px 3px 0
+      light-dark(
+        oklch(var(--blocks-shadow-tint) / 0.1),
+        oklch(var(--blocks-shadow-tint) / 0.3)
+      ),
+    0 1px 2px -1px
+      light-dark(
+        oklch(var(--blocks-shadow-tint) / 0.1),
+        oklch(var(--blocks-shadow-tint) / 0.3)
+      );
+  --color-shadow-base:
+    0 4px 6px -1px
+      light-dark(
+        oklch(var(--blocks-shadow-tint) / 0.1),
+        oklch(var(--blocks-shadow-tint) / 0.4)
+      ),
+    0 2px 4px -2px
+      light-dark(
+        oklch(var(--blocks-shadow-tint) / 0.1),
+        oklch(var(--blocks-shadow-tint) / 0.4)
+      );
+  --color-shadow-md:
+    0 10px 15px -3px
+      light-dark(
+        oklch(var(--blocks-shadow-tint) / 0.1),
+        oklch(var(--blocks-shadow-tint) / 0.4)
+      ),
+    0 4px 6px -4px
+      light-dark(
+        oklch(var(--blocks-shadow-tint) / 0.1),
+        oklch(var(--blocks-shadow-tint) / 0.4)
+      );
+  --color-shadow-lg:
+    0 20px 25px -5px
+      light-dark(
+        oklch(var(--blocks-shadow-tint) / 0.1),
+        oklch(var(--blocks-shadow-tint) / 0.5)
+      ),
+    0 8px 10px -6px
+      light-dark(
+        oklch(var(--blocks-shadow-tint) / 0.1),
+        oklch(var(--blocks-shadow-tint) / 0.5)
+      );
 }
 
 /* Shadow tint — declared on :root rather than inside @theme because

package/dist/utils/figma-token-export.d.ts

@@ -4,6 +4,19 @@
  * Generates a Tokens Studio-compatible JSON export from the Urbicon UI
  * OKLCH design token system. Suitable for Figma plugins like "Tokens Studio
  * for Figma" (formerly Figma Tokens).
+ *
+ * The values below mirror the token truth in `../style/foundation.css`
+ * (palettes, radii) and `../style/semantic.css` (surface/text/border roles,
+ * shadows). They are hardcoded — this module runs in the browser and cannot
+ * read the CSS files at runtime — but guarded against drift by the
+ * co-located `figma-token-export.test.ts`, which parses both CSS files and
+ * compares every value. If you change a token in the CSS, that test fails
+ * until the export here is updated to match.
+ *
+ * Semantic tokens resolve light/dark via CSS `light-dark()`; this export
+ * carries the **light-mode** resolution (Figma has no mode-aware token
+ * values in plain Tokens Studio JSON). Dark mode swaps at the foundation
+ * layer, so the palette ramps below contain every shade both modes use.
  */
 export interface FigmaToken {
     value: string;

package/dist/utils/figma-token-export.js

@@ -4,10 +4,24 @@
  * Generates a Tokens Studio-compatible JSON export from the Urbicon UI
  * OKLCH design token system. Suitable for Figma plugins like "Tokens Studio
  * for Figma" (formerly Figma Tokens).
+ *
+ * The values below mirror the token truth in `../style/foundation.css`
+ * (palettes, radii) and `../style/semantic.css` (surface/text/border roles,
+ * shadows). They are hardcoded — this module runs in the browser and cannot
+ * read the CSS files at runtime — but guarded against drift by the
+ * co-located `figma-token-export.test.ts`, which parses both CSS files and
+ * compares every value. If you change a token in the CSS, that test fails
+ * until the export here is updated to match.
+ *
+ * Semantic tokens resolve light/dark via CSS `light-dark()`; this export
+ * carries the **light-mode** resolution (Figma has no mode-aware token
+ * values in plain Tokens Studio JSON). Dark mode swaps at the foundation
+ * layer, so the palette ramps below contain every shade both modes use.
  */
 const foundationColors = {
     neutral: {
         '0': 'oklch(1 0 0)',
+        '25': 'oklch(0.99 0.002 240)',
         '50': 'oklch(0.98 0.005 240)',
         '100': 'oklch(0.95 0.008 240)',
         '200': 'oklch(0.89 0.012 240)',
@@ -15,8 +29,11 @@ const foundationColors = {
         '400': 'oklch(0.7 0.015 240)',
         '500': 'oklch(0.55 0.016 240)',
         '600': 'oklch(0.42 0.017 240)',
+        '650': 'oklch(0.38 0.016 240)',
         '700': 'oklch(0.32 0.016 240)',
+        '750': 'oklch(0.28 0.014 240)',
         '800': 'oklch(0.23 0.015 240)',
+        '850': 'oklch(0.18 0.014 240)',
         '900': 'oklch(0.15 0.012 240)',
         '950': 'oklch(0.08 0.008 240)'
     },
@@ -46,18 +63,33 @@ const foundationColors = {
         '900': 'oklch(0.25 0.08 280)',
         '950': 'oklch(0.18 0.05 280)'
     },
+    'warm-neutral': {
+        '50': 'oklch(0.96 0.004 45)',
+        '100': 'oklch(0.92 0.006 45)',
+        '200': 'oklch(0.86 0.008 45)',
+        '300': 'oklch(0.78 0.01 45)',
+        '400': 'oklch(0.65 0.012 45)',
+        '500': 'oklch(0.5 0.008 45)',
+        '600': 'oklch(0.42 0.01 45)',
+        '700': 'oklch(0.35 0.012 45)',
+        '800': 'oklch(0.28 0.01 45)',
+        '900': 'oklch(0.2 0.008 45)',
+        '950': 'oklch(0.12 0.006 45)'
+    },
+    /* success/danger 400–700 are the WCAG-darkened ramps: white text on the
+       solid intent backgrounds passes AA (4.5:1). */
     success: {
         '50': 'oklch(0.95 0.03 140)',
         '100': 'oklch(0.9 0.05 140)',
         '200': 'oklch(0.82 0.08 140)',
         '300': 'oklch(0.74 0.11 140)',
-        '400': 'oklch(0.66 0.13 140)',
-        '500': 'oklch(0.65 0.15 140)',
-        '600': 'oklch(0.55 0.15 140)',
-        '700': 'oklch(0.45 0.13 140)',
-        '800': 'oklch(0.35 0.11 140)',
-        '900': 'oklch(0.25 0.08 140)',
-        '950': 'oklch(0.15 0.05 140)'
+        '400': 'oklch(0.62 0.14 140)',
+        '500': 'oklch(0.5 0.15 140)',
+        '600': 'oklch(0.44 0.14 140)',
+        '700': 'oklch(0.38 0.12 140)',
+        '800': 'oklch(0.3 0.1 140)',
+        '900': 'oklch(0.22 0.08 140)',
+        '950': 'oklch(0.14 0.05 140)'
     },
     warning: {
         '50': 'oklch(0.95 0.05 80)',
@@ -77,39 +109,67 @@ const foundationColors = {
         '100': 'oklch(0.9 0.08 25)',
         '200': 'oklch(0.82 0.1 25)',
         '300': 'oklch(0.74 0.12 25)',
-        '400': 'oklch(0.66 0.14 25)',
-        '500': 'oklch(0.65 0.18 25)',
-        '600': 'oklch(0.55 0.15 25)',
-        '700': 'oklch(0.45 0.13 25)',
-        '800': 'oklch(0.35 0.11 25)',
-        '900': 'oklch(0.25 0.08 25)',
-        '950': 'oklch(0.15 0.05 25)'
+        '400': 'oklch(0.62 0.16 25)',
+        '500': 'oklch(0.5 0.17 25)',
+        '600': 'oklch(0.44 0.16 25)',
+        '700': 'oklch(0.38 0.14 25)',
+        '800': 'oklch(0.3 0.12 25)',
+        '900': 'oklch(0.22 0.1 25)',
+        '950': 'oklch(0.14 0.07 25)'
+    },
+    info: {
+        '50': 'oklch(0.96 0.025 220)',
+        '100': 'oklch(0.92 0.045 220)',
+        '200': 'oklch(0.84 0.075 220)',
+        '300': 'oklch(0.76 0.105 220)',
+        '400': 'oklch(0.66 0.13 220)',
+        '500': 'oklch(0.55 0.14 220)',
+        '600': 'oklch(0.48 0.13 220)',
+        '700': 'oklch(0.4 0.11 220)',
+        '800': 'oklch(0.32 0.09 220)',
+        '900': 'oklch(0.24 0.07 220)',
+        '950': 'oklch(0.16 0.05 220)'
     }
 };
+/** Light-mode resolution of the semantic color roles in semantic.css. */
 const semanticTokens = {
     surface: {
-        base: { value: '{color.neutral.0}', description: 'Page background' },
-        raised: { value: '{color.neutral.50}', description: 'Slightly elevated surface' },
-        elevated: { value: '{color.neutral.50}', description: 'Elevated surface (cards)' },
-        overlay: { value: '{color.neutral.0}', description: 'Dialog/popover background' },
+        base: { value: '{color.neutral.0}', description: 'L1 — the page itself' },
+        quiet: { value: '{color.neutral.25}', description: 'L0 — ground beneath the page' },
+        elevated: { value: '{color.neutral.50}', description: 'L2 — lifted surfaces (popover, menu)' },
+        overlay: { value: '{color.neutral.0}', description: 'L3 — dialog/drawer/toast background' },
+        interactive: { value: '{color.neutral.100}', description: 'Interactive control background' },
+        hover: { value: '{color.neutral.100}', description: 'Hover state background' },
+        active: { value: '{color.neutral.200}', description: 'Active/pressed state background' },
+        disabled: { value: '{color.neutral.100}', description: 'Disabled surface' },
+        selected: { value: '{color.primary.50}', description: 'Selected item background' },
         subtle: { value: '{color.neutral.50}', description: 'Subtle background' },
         inverted: { value: '{color.neutral.900}', description: 'Inverted surface' }
     },
     text: {
         primary: { value: '{color.neutral.900}', description: 'Primary text' },
+        inverted: { value: '{color.neutral.0}', description: 'Inverted text (on dark bg)' },
         secondary: { value: '{color.neutral.700}', description: 'Secondary text' },
-        tertiary: { value: '{color.neutral.500}', description: 'Tertiary text' },
+        tertiary: { value: '{color.neutral.600}', description: 'Tertiary text (WCAG AA on base)' },
+        quaternary: { value: '{color.neutral.500}', description: 'Quaternary text (lowest emphasis)' },
         disabled: { value: '{color.neutral.300}', description: 'Disabled text' },
-        inverted: { value: '{color.neutral.0}', description: 'Inverted text (on dark bg)' },
-        'on-primary': { value: '{color.neutral.0}', description: 'Text on primary color bg' }
+        'on-dark': { value: '{color.neutral.0}', description: 'Text on dark surfaces' },
+        'on-primary': { value: '{color.neutral.0}', description: 'Text on primary color bg' },
+        'on-surface': { value: '{color.neutral.900}', description: 'Text on tinted surfaces' }
     },
     border: {
+        hairline: {
+            value: 'rgb(0 0 0 / 0.08)',
+            description: 'Quietest structural divider (rows, separators)'
+        },
         subtle: { value: '{color.neutral.200}', description: 'Subtle border' },
         default: { value: '{color.neutral.300}', description: 'Default border' },
         emphasis: { value: '{color.neutral.400}', description: 'Emphasized border' },
         strong: { value: '{color.neutral.500}', description: 'Strong border' }
     }
 };
+/* Tailwind 4 default spacing scale (4px per unit) — blocks defines no
+   custom spacing tokens. */
 const spacingTokens = {
     '0': '0',
     '1': '4px',
@@ -123,14 +183,24 @@ const spacingTokens = {
     '12': '48px',
     '16': '64px'
 };
+/* Physical radius scale + the semantic 3-tier vocabulary (commit/modify/
+   contain, plus the bridge adjacency radius) from foundation.css.
+   rem values are exported as px (1rem = 16px) for Figma. */
 const borderRadiusTokens = {
-    none: '0',
-    sm: '2px',
+    xs: '2px',
+    sm: '4px',
     md: '6px',
     lg: '8px',
     xl: '12px',
-    full: '9999px'
+    '2xl': '16px',
+    '3xl': '24px',
+    '4xl': '32px',
+    commit: { value: '9999px', description: 'Tier: actions, identity, status (pill)' },
+    modify: { value: '{borderRadius.sm}', description: 'Tier: editable surfaces, navigation' },
+    contain: { value: '{borderRadius.xs}', description: 'Tier: containers, panels, layout' },
+    bridge: { value: '{borderRadius.md}', description: 'Adjacency radius: panel anchored to a pill' }
 };
+/** Light-mode resolution of the shadow tokens (shadow tint = pure black). */
 const shadowTokens = {
     xs: '0 1px 2px 0 rgba(0,0,0,0.05)',
     sm: '0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)',
@@ -174,8 +244,11 @@ function buildSpacingTokens() {
 }
 function buildBorderRadiusTokens() {
     const result = {};
-    for (const [name, value] of Object.entries(borderRadiusTokens)) {
-        result[name] = { value, type: 'borderRadius' };
+    for (const [name, def] of Object.entries(borderRadiusTokens)) {
+        result[name] =
+            typeof def === 'string'
+                ? { value: def, type: 'borderRadius' }
+                : { value: def.value, type: 'borderRadius', description: def.description };
     }
     return result;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbicon-ui/blocks",
-  "version": "6.21.2",
+  "version": "6.22.0",
   "description": "Svelte 5 UI component library with Tailwind CSS 4, OKLCH design tokens and zero runtime dependencies",
   "license": "MIT",
   "repository": {
@@ -91,8 +91,8 @@
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/vite": "^4.3.1",
-    "@urbicon-ui/i18n": "6.21.2",
-    "@urbicon-ui/shared-types": "6.21.2",
+    "@urbicon-ui/i18n": "6.22.0",
+    "@urbicon-ui/shared-types": "6.22.0",
     "prettier": "^3.8.4",
     "prettier-plugin-svelte": "^4.1.1",
     "prettier-plugin-tailwindcss": "^0.8.0",