@urbicon-ui/blocks 6.43.0 → 6.44.0

package/dist/style/semantic.css

@@ -18,7 +18,25 @@
      above the one below — themes can differentiate them by color (e.g.
      cream → lighter cream → near-white → white) or rely on shadows
      alone when the palette ceiling is reached (as in the neutral default
-     where base and overlay are both white). */
+     where base and overlay are both white).
+
+     LIGHT-MODE SPREAD (2026-07). In light mode `base` sits at the white
+     ceiling, so every other rung has to differentiate DOWNWARD — and the
+     ramp gave it almost nothing to work with: quiet/elevated were ΔL 0.01
+     and 0.02 from base, against 0.03 and 0.08 in dark mode. A tinted
+     in-flow surface with no border and no shadow was therefore effectively
+     invisible in light mode, which is why components kept reaching for a
+     border just to make a surface visible at all (the chat bubble, the
+     table-cell progress track). Fixed at the ramp rather than per token —
+     `neutral-25` 0.99 → 0.985 and `neutral-50` 0.98 → 0.965 — so quiet,
+     elevated and subtle all gain spread without any semantic moving and
+     without a new token landing on an occupied value. All five themes share
+     those L values (only the hue differs), so the change reaches every
+     theme at once. Measured: text-tertiary on the new elevated is 11.32:1,
+     far above AA; style/contrast.test.ts is the gate. Guarded below by
+     style/semantic.test.ts, which asserts the reading surfaces stay
+     mutually distinct in BOTH modes — the failure mode here is silent, a
+     collapsed rung looks exactly like a working one in a screenshot. */
   /* L·1 — base: the page itself. Content, cards, and reading surfaces
      sit at this level. */
   --color-surface-base: light-dark(var(--color-neutral-0), var(--color-neutral-900));
@@ -31,11 +49,36 @@
   /* L·3 — overlay: highest surfaces (Dialog, Drawer, Sheet, Toast).
      Full shadow + backdrop dimming. */
   --color-surface-overlay: light-dark(var(--color-neutral-0), var(--color-neutral-850));
+  /* `surface-hover` / `-active` are the hover/press steps for elements resting
+     on a READING surface (base/quiet/elevated) — a menu item, a table row.
+     `surface-interactive` is a resting FILL one step in from the page (a filled
+     Input, a Slider track, the Tab list). Those two ladders start at different
+     rungs, so they need their own hover step: `surface-interactive` already sits
+     at neutral-100, which is exactly where `surface-hover` lands in light mode —
+     `bg-surface-interactive hover:bg-surface-hover` was a silent no-op, and in
+     dark mode `surface-active` collapses onto `surface-interactive` the same
+     way. `-interactive-hover` continues the fill's own ladder: one step further
+     from the page in light, one step toward the light in dark. Guarded by
+     style/semantic.test.ts so the pair can never collapse again. */
   --color-surface-interactive: light-dark(var(--color-neutral-100), var(--color-neutral-700));
+  --color-surface-interactive-hover: light-dark(
+    var(--color-neutral-200),
+    var(--color-neutral-650)
+  );
   --color-surface-hover: light-dark(var(--color-neutral-100), var(--color-neutral-750));
   --color-surface-active: light-dark(var(--color-neutral-200), var(--color-neutral-700));
   --color-surface-disabled: light-dark(var(--color-neutral-100), var(--color-neutral-800));
   --color-surface-selected: light-dark(var(--color-primary-50), var(--color-primary-900));
+  /* A RESTING tint only — never a hover step. It resolves to exactly
+     `surface-elevated`, so `hover:bg-surface-subtle` is invisible on every
+     elevated surface (Popover, Menu, Select dropdown, elevated Card). That
+     shipped across 8 components until 2026-07-26; the hover idiom moved to
+     `surface-hover`, and variants-lint now errors on any hover fill naming a
+     reading surface. Its in-page-zone role was superseded by `surface-quiet`
+     in v5 (MIGRATION-v5 "New tokens"), which is why it has no rung of its own
+     left — prefer `surface-quiet` for a tinted zone and `surface-elevated`
+     for a raised one. Kept for the resting uses that read correctly against
+     a border (readonly/disabled fields, list rows, code chips). */
   --color-surface-subtle: light-dark(var(--color-neutral-50), var(--color-neutral-800));
   --color-surface-inverted: light-dark(var(--color-neutral-900), var(--color-neutral-100));
   /* Skeleton wave-shimmer highlight (Skeleton animation="wave"). A translucent
@@ -61,7 +104,21 @@
   --color-text-secondary: light-dark(var(--color-neutral-700), var(--color-neutral-300));
   --color-text-tertiary: light-dark(var(--color-neutral-600), var(--color-neutral-300));
   --color-text-quaternary: light-dark(var(--color-neutral-500), var(--color-neutral-400));
-  --color-text-disabled: light-dark(var(--color-neutral-300), var(--color-neutral-600));
+  /* Disabled text — the same stop in both modes. WCAG 1.4.3 exempts inactive
+     controls, so the old value was not a violation, but at neutral-300 / -600 it
+     measured roughly 1.5:1 in light and 2:1 in dark: a disabled field's label is
+     the one part that still has to say what the field IS, and it was effectively
+     invisible. Now held to the 3:1 UI floor by style/contrast.test.ts across
+     every theme × mode × reading surface plus the disabled fill — that test is
+     the number, not this comment.
+
+     Deliberately still the weakest rung of the text ramp, so "disabled" stays
+     legible without stopping being a signal. Two consequences, both accepted:
+     it shares its light-mode value with text-quaternary (two roles, not two
+     steps of one ladder — but see the Calendar entry in technical-debt, where
+     they meet), and the floor covers the token alone, not what a component
+     composes on top of it (an `opacity-*` wrapper can undo it). */
+  --color-text-disabled: light-dark(var(--color-neutral-500), var(--color-neutral-500));
   /* The on-colors below pair text with a *fill* rather than a surface.
      text-on-dark and text-on-primary answer fills that are dark in light
      mode and light in dark mode, so the label has to travel the opposite

package/dist/style/themes/forest.css

@@ -41,8 +41,8 @@
    * contrast stays unchanged. surface-*, text-* and border-* pick this up
    * automatically through semantic.css.
    */
-  --color-neutral-25: oklch(0.99 0.002 150);
-  --color-neutral-50: oklch(0.98 0.005 150);
+  --color-neutral-25: oklch(0.985 0.003 150);
+  --color-neutral-50: oklch(0.965 0.006 150);
   --color-neutral-100: oklch(0.95 0.008 150);
   --color-neutral-200: oklch(0.89 0.012 150);
   --color-neutral-300: oklch(0.83 0.014 150);

package/dist/style/themes/neutral.css

@@ -54,8 +54,8 @@
    * contrast stays unchanged. surface-*, text-* and border-* pick this up
    * automatically through semantic.css.
    */
-  --color-neutral-25: oklch(0.99 0 0);
-  --color-neutral-50: oklch(0.98 0 0);
+  --color-neutral-25: oklch(0.985 0 0);
+  --color-neutral-50: oklch(0.965 0 0);
   --color-neutral-100: oklch(0.95 0 0);
   --color-neutral-200: oklch(0.89 0 0);
   --color-neutral-300: oklch(0.83 0 0);

package/dist/style/themes/ocean.css

@@ -45,8 +45,8 @@
    * hue shifts — so WCAG contrast stays unchanged. surface-*, text-* and
    * border-* pick this up automatically through semantic.css.
    */
-  --color-neutral-25: oklch(0.99 0.002 220);
-  --color-neutral-50: oklch(0.98 0.005 220);
+  --color-neutral-25: oklch(0.985 0.003 220);
+  --color-neutral-50: oklch(0.965 0.006 220);
   --color-neutral-100: oklch(0.95 0.008 220);
   --color-neutral-200: oklch(0.89 0.012 220);
   --color-neutral-300: oklch(0.83 0.014 220);

package/dist/style/themes/rose.css

@@ -41,8 +41,8 @@
    * stays unchanged. surface-*, text-* and border-* pick this up
    * automatically through semantic.css.
    */
-  --color-neutral-25: oklch(0.99 0.002 350);
-  --color-neutral-50: oklch(0.98 0.005 350);
+  --color-neutral-25: oklch(0.985 0.003 350);
+  --color-neutral-50: oklch(0.965 0.006 350);
   --color-neutral-100: oklch(0.95 0.008 350);
   --color-neutral-200: oklch(0.89 0.012 350);
   --color-neutral-300: oklch(0.83 0.014 350);

package/dist/style/themes/sunset.css

@@ -41,8 +41,8 @@
    * contrast stays unchanged. surface-*, text-* and border-* pick this up
    * automatically through semantic.css; no per-token overrides needed.
    */
-  --color-neutral-25: oklch(0.99 0.002 50);
-  --color-neutral-50: oklch(0.98 0.005 50);
+  --color-neutral-25: oklch(0.985 0.003 50);
+  --color-neutral-50: oklch(0.965 0.006 50);
   --color-neutral-100: oklch(0.95 0.008 50);
   --color-neutral-200: oklch(0.89 0.012 50);
   --color-neutral-300: oklch(0.83 0.014 50);

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

@@ -21,8 +21,8 @@
 const foundationColors = {
     neutral: {
         '0': 'oklch(1 0 0)',
-        '25': 'oklch(0.99 0.002 240)',
-        '50': 'oklch(0.98 0.005 240)',
+        '25': 'oklch(0.985 0.003 240)',
+        '50': 'oklch(0.965 0.006 240)',
         '100': 'oklch(0.95 0.008 240)',
         '200': 'oklch(0.89 0.012 240)',
         '300': 'oklch(0.83 0.014 240)',
@@ -139,6 +139,10 @@ const semanticTokens = {
         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' },
+        'interactive-hover': {
+            value: '{color.neutral.200}',
+            description: 'Hover step for an interactive control fill'
+        },
         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' },
@@ -152,7 +156,7 @@ const semanticTokens = {
         secondary: { value: '{color.neutral.700}', description: 'Secondary 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' },
+        disabled: { value: '{color.neutral.500}', description: 'Disabled text' },
         'on-dark': { value: '{color.neutral.0}', description: 'Text on dark surfaces' },
         'on-primary': { value: '{color.neutral.0}', description: 'Text on primary color bg' },
         'on-warning': {

package/package.json

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