@luxfi/ui 7.4.2 → 7.4.4

package/tokens.css

@@ -306,9 +306,77 @@
   --color-gray-700: var(--lux-n-700);
   --color-gray-800: var(--lux-n-800);
   --color-gray-900: var(--lux-n-900);
-  /* Legacy hue names some call sites still spell. Achromatic now. */
-  --color-orange-400: var(--lux-n-500);
-  --color-orange-500: var(--lux-n-600);
+  --color-white: var(--lux-n-0);
+  --color-black: var(--lux-n-1000);
+  /* The two state ramps — the only rungs in this file that carry a hue.
+     Monotone, like the warm ramps, and likewise not flipped in `.dark`. */
+  --color-green-50:  #F0FFF4;
+  --color-green-100: #C6F6D5;
+  --color-green-200: #9AE6B4;
+  --color-green-500: var(--lux-state-success);
+  --color-green-800: #22543D;
+  --color-red-50:  #FFF5F5;
+  --color-red-100: #FED7D7;
+  --color-red-200: #FEB2B2;
+  --color-red-500: var(--lux-state-error);
+  --color-red-600: #C53030;
+  --color-red-800: #822727;
+  /* ------------------------------------------------------------
+     THE WARM RAMPS, DEFANGED.
+     Tailwind v4 compiles `bg-orange-100` to `background-color:
+     var(--color-orange-100)`, so redefining the rung here retints every
+     warm utility on every surface that imports this file — no component
+     edit, no rebuild. The ramps stay MONOTONE (low rung = light, high rung
+     = dark) in both modes, exactly like Tailwind's, so an author's
+     `bg-orange-50 dark:bg-yellow-900` still reads pale-on-light and
+     dark-on-dark. They are therefore NOT overridden in `.dark` below.
+     A rung is a rung; a warning is `--color-status-warn`.
+     ------------------------------------------------------------ */
+  --color-orange-50:  var(--lux-n-50);
+  --color-orange-100: var(--lux-n-100);
+  --color-orange-200: var(--lux-n-200);
+  --color-orange-300: var(--lux-n-300);
+  --color-orange-400: var(--lux-n-400);
+  --color-orange-500: var(--lux-n-500);
+  --color-orange-600: var(--lux-n-600);
+  --color-orange-700: var(--lux-n-700);
+  --color-orange-800: var(--lux-n-800);
+  --color-orange-900: var(--lux-n-900);
+  --color-orange-950: var(--lux-n-950);
+  --color-amber-50:  var(--color-orange-50);
+  --color-amber-100: var(--color-orange-100);
+  --color-amber-200: var(--color-orange-200);
+  --color-amber-300: var(--color-orange-300);
+  --color-amber-400: var(--color-orange-400);
+  --color-amber-500: var(--color-orange-500);
+  --color-amber-600: var(--color-orange-600);
+  --color-amber-700: var(--color-orange-700);
+  --color-amber-800: var(--color-orange-800);
+  --color-amber-900: var(--color-orange-900);
+  --color-amber-950: var(--color-orange-950);
+  --color-yellow-50:  var(--color-orange-50);
+  --color-yellow-100: var(--color-orange-100);
+  --color-yellow-200: var(--color-orange-200);
+  --color-yellow-300: var(--color-orange-300);
+  --color-yellow-400: var(--color-orange-400);
+  --color-yellow-500: var(--color-orange-500);
+  --color-yellow-600: var(--color-orange-600);
+  --color-yellow-700: var(--color-orange-700);
+  --color-yellow-800: var(--color-orange-800);
+  --color-yellow-900: var(--color-orange-900);
+  --color-yellow-950: var(--color-orange-950);
+  /* Tailwind's warm neutral. Lux has exactly one neutral, and it is not warm. */
+  --color-stone-50:  var(--lux-n-50);
+  --color-stone-100: var(--lux-n-100);
+  --color-stone-200: var(--lux-n-200);
+  --color-stone-300: var(--lux-n-300);
+  --color-stone-400: var(--lux-n-400);
+  --color-stone-500: var(--lux-n-500);
+  --color-stone-600: var(--lux-n-600);
+  --color-stone-700: var(--lux-n-700);
+  --color-stone-800: var(--lux-n-800);
+  --color-stone-900: var(--lux-n-900);
+  --color-stone-950: var(--lux-n-950);
   --color-blackAlpha-50: var(--lux-ink-04);
   --color-blackAlpha-100: var(--lux-ink-06);
   --color-blackAlpha-200: var(--lux-ink-08);
@@ -615,9 +683,10 @@
   /* --- Selection --- */
   --color-selection-bg: var(--lux-n-700);
 
-  /* --- Raw palette --- */
-  --color-orange-400: var(--lux-n-400);
-  --color-orange-500: var(--lux-n-300);
+  /* The warm ramps are NOT redefined here on purpose — see the light block.
+     They are monotone in both modes so `dark:bg-yellow-900` still means
+     "dark". A call site that needs ink that FLIPS with the mode wants
+     --color-status-warn, which is a semantic token, not a palette rung. */
 
   /* ------------------------------------------------------------
      SHADCN / TAILWIND ALIASES (dark)