@eagami/ui 2.5.0 → 2.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "2.5.0",
+  "version": "2.5.2",
   "description": "Lightweight, accessible Angular UI component library built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",

package/src/styles/tokens/_colors.scss

@@ -103,21 +103,28 @@
   --color-brand-secondary-subtle: var(--color-secondary-50);
   --color-brand-secondary-muted: var(--color-secondary-100);
 
+  // *-text is the status hue as a foreground on its own *-subtle/-muted wash
+  // (badge, tag, toast). It needs 4.5:1 vs that wash and flips lighter in dark
+  // mode, mirroring --color-brand-text.
   --color-success-default: var(--color-success-600);
   --color-success-subtle: var(--color-success-50);
   --color-success-muted: var(--color-success-100);
+  --color-success-text: var(--color-success-700);
 
   --color-warning-default: var(--color-warning-600);
   --color-warning-subtle: var(--color-warning-50);
   --color-warning-muted: var(--color-warning-100);
+  --color-warning-text: var(--color-warning-700);
 
   --color-error-default: var(--color-error-600);
   --color-error-subtle: var(--color-error-50);
   --color-error-muted: var(--color-error-100);
+  --color-error-text: var(--color-error-700);
 
   --color-info-default: var(--color-info-600);
   --color-info-subtle: var(--color-info-50);
   --color-info-muted: var(--color-info-100);
+  --color-info-text: var(--color-info-700);
 
   // Pure RGB primaries for the picker's hue wheel and saturation/value
   // gradient. Intrinsic to the picker, not themeable; kept here so component
@@ -151,7 +158,9 @@
   --color-bg-subtle: var(--color-neutral-700);
   --color-bg-stripe: var(--color-neutral-900);
   --color-bg-elevated: var(--color-neutral-700);
-  --color-bg-muted: var(--color-neutral-600);
+  // One step above bg-base so hover fills (ghost/secondary button, table row)
+  // and muted surfaces lift subtly; neutral-600 read too strong on dark.
+  --color-bg-muted: var(--color-neutral-700);
 
   // Borders stay clear of every bg-* shade so they stay visible. subtle mixes
   // neutral-700/-800 to sit between card and cell backgrounds; default can't go
@@ -185,6 +194,13 @@
   --color-error-muted: rgba(239, 68, 68, 0.25);
   --color-info-subtle: rgba(6, 182, 212, 0.15);
   --color-info-muted: rgba(6, 182, 212, 0.25);
+
+  // The *-700 shades are unreadable on the dark translucent washes above; flip
+  // to the light *-200 pastels so status text keeps 4.5:1.
+  --color-success-text: var(--color-success-200);
+  --color-warning-text: var(--color-warning-200);
+  --color-error-text: var(--color-error-200);
+  --color-info-text: var(--color-info-200);
 }
 
 @media (prefers-color-scheme: dark) {

package/src/styles/tokens/_elevation.scss

@@ -8,6 +8,10 @@
   --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
   --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
 
+  // Composable top-edge highlight appended to every dark-mode shadow so elevated
+  // surfaces catch light along their top edge; a no-op in light mode.
+  --shadow-edge-highlight: 0 0 #0000;
+
   // Bevel: paired inset highlight (top) + shadow (bottom) for a raised look;
   // compose with --shadow-* for an ambient drop.
   --shadow-bevel:
@@ -36,20 +40,27 @@
   --z-index-tooltip: 700;
 }
 
-// Dark mode: black drop shadows vanish on a near-black page, so flip to white
-// at low alpha (reads as a muted dark cast). xl/2xl also tighten offset/blur so
-// the lighter fade doesn't bloom into a halo.
+// Dark mode: a drop shadow is the absence of light, so it stays black (deeper
+// than light mode); a white "shadow" reads as a glow and looks wrong. Elevation
+// is carried instead by the lifted surface tone plus a hairline top highlight
+// that catches light, appended to every level via --shadow-edge-highlight.
 @mixin dark-elevation-tokens {
-  --shadow-xs: 0 1px 2px 0 rgba(255, 255, 255, 0.04);
+  --shadow-edge-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
+
+  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4), var(--shadow-edge-highlight);
   --shadow-sm:
-    0 1px 3px 0 rgba(255, 255, 255, 0.05), 0 1px 2px -1px rgba(255, 255, 255, 0.04);
+    0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.4),
+    var(--shadow-edge-highlight);
   --shadow-md:
-    0 4px 6px -1px rgba(255, 255, 255, 0.06), 0 2px 4px -2px rgba(255, 255, 255, 0.04);
+    0 4px 8px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.4),
+    var(--shadow-edge-highlight);
   --shadow-lg:
-    0 8px 12px -2px rgba(255, 255, 255, 0.08), 0 3px 5px -3px rgba(255, 255, 255, 0.05);
+    0 12px 20px -4px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.45),
+    var(--shadow-edge-highlight);
   --shadow-xl:
-    0 12px 18px -4px rgba(255, 255, 255, 0.05), 0 5px 8px -4px rgba(255, 255, 255, 0.03);
-  --shadow-2xl: 0 16px 28px -8px rgba(255, 255, 255, 0.06);
+    0 20px 28px -6px rgba(0, 0, 0, 0.65), 0 8px 12px -6px rgba(0, 0, 0, 0.5),
+    var(--shadow-edge-highlight);
+  --shadow-2xl: 0 28px 50px -12px rgba(0, 0, 0, 0.75), var(--shadow-edge-highlight);
 
   // On a dark surface a bright highlight reads as a halo, so drop the highlight
   // alpha and raise the shadow alpha to keep the relief without glowing.