@eagami/ui 2.5.0 → 2.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/eagami-ui.mjs +16 -16
  2. package/fesm2022/eagami-ui.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/src/styles/tokens/_elevation.scss +20 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eagami/ui",
3
- "version": "2.5.0",
3
+ "version": "2.5.1",
4
4
  "description": "Lightweight, accessible Angular UI component library built on CSS custom properties",
5
5
  "author": "Michal Wiraszka <michal@eagami.com>",
6
6
  "license": "MIT",
package/src/styles/tokens/_elevation.scss CHANGED
@@ -8,6 +8,10 @@
8
8
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
9
9
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
10
10
 
11
+ // Composable top-edge highlight appended to every dark-mode shadow so elevated
12
+ // surfaces catch light along their top edge; a no-op in light mode.
13
+ --shadow-edge-highlight: 0 0 #0000;
14
+
11
15
  // Bevel: paired inset highlight (top) + shadow (bottom) for a raised look;
12
16
  // compose with --shadow-* for an ambient drop.
13
17
  --shadow-bevel:
@@ -36,20 +40,27 @@
36
40
  --z-index-tooltip: 700;
37
41
  }
38
42
 
39
- // Dark mode: black drop shadows vanish on a near-black page, so flip to white
40
- // at low alpha (reads as a muted dark cast). xl/2xl also tighten offset/blur so
41
- // the lighter fade doesn't bloom into a halo.
43
+ // Dark mode: a drop shadow is the absence of light, so it stays black (deeper
44
+ // than light mode); a white "shadow" reads as a glow and looks wrong. Elevation
45
+ // is carried instead by the lifted surface tone plus a hairline top highlight
46
+ // that catches light, appended to every level via --shadow-edge-highlight.
42
47
  @mixin dark-elevation-tokens {
43
- --shadow-xs: 0 1px 2px 0 rgba(255, 255, 255, 0.04);
48
+ --shadow-edge-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
49
+
50
+ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4), var(--shadow-edge-highlight);
44
51
  --shadow-sm:
45
- 0 1px 3px 0 rgba(255, 255, 255, 0.05), 0 1px 2px -1px rgba(255, 255, 255, 0.04);
52
+ 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.4),
53
+ var(--shadow-edge-highlight);
46
54
  --shadow-md:
47
- 0 4px 6px -1px rgba(255, 255, 255, 0.06), 0 2px 4px -2px rgba(255, 255, 255, 0.04);
55
+ 0 4px 8px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.4),
56
+ var(--shadow-edge-highlight);
48
57
  --shadow-lg:
49
- 0 8px 12px -2px rgba(255, 255, 255, 0.08), 0 3px 5px -3px rgba(255, 255, 255, 0.05);
58
+ 0 12px 20px -4px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.45),
59
+ var(--shadow-edge-highlight);
50
60
  --shadow-xl:
51
- 0 12px 18px -4px rgba(255, 255, 255, 0.05), 0 5px 8px -4px rgba(255, 255, 255, 0.03);
52
- --shadow-2xl: 0 16px 28px -8px rgba(255, 255, 255, 0.06);
61
+ 0 20px 28px -6px rgba(0, 0, 0, 0.65), 0 8px 12px -6px rgba(0, 0, 0, 0.5),
62
+ var(--shadow-edge-highlight);
63
+ --shadow-2xl: 0 28px 50px -12px rgba(0, 0, 0, 0.75), var(--shadow-edge-highlight);
53
64
 
54
65
  // On a dark surface a bright highlight reads as a halo, so drop the highlight
55
66
  // alpha and raise the shadow alpha to keep the relief without glowing.