@enderfall/ui 0.2.9 → 0.2.11

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/package.json +2 -1
  2. package/src/components/Button.css +6 -4
  3. package/src/components/StackedCard.css +14 -16
  4. package/src/variables.css +161 -28
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@enderfall/ui",
3
3
  "private": false,
4
- "version": "0.2.9",
4
+ "version": "0.2.11",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",
@@ -31,3 +31,4 @@
31
31
  "typescript": "^5.3.3"
32
32
  }
33
33
  }
34
+
package/src/components/Button.css CHANGED
@@ -15,12 +15,12 @@
15
15
  }
16
16
 
17
17
  .ef-button:not(:disabled):hover {
18
- box-shadow: var(--shadow);
18
+ box-shadow: var(--ef-button-hover-shadow, var(--shadow));
19
19
  transform: var(--ef-button-hover-transform, translateY(-1px));
20
20
  }
21
21
 
22
22
  .ef-button:focus-visible {
23
- box-shadow: var(--shadow);
23
+ box-shadow: var(--ef-button-focus-shadow, var(--shadow));
24
24
  transform: var(--ef-button-hover-transform, translateY(-1px));
25
25
  }
26
26
 
@@ -30,12 +30,14 @@
30
30
 
31
31
  .ef-button--glow:not(:disabled):hover,
32
32
  .ef-button--glow:focus-visible {
33
- box-shadow: var(--ef-button-glow-shadow, 0 0 24px rgba(124, 77, 255, 0.45));
33
+ box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
34
+ animation: none;
34
35
  }
35
36
 
36
37
  .ef-button--hover-glow:not(:disabled):hover,
37
38
  .ef-button--hover-glow:focus-visible {
38
- box-shadow: var(--ef-button-glow-shadow, 0 0 24px rgba(124, 77, 255, 0.45));
39
+ box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
40
+ animation: none;
39
41
  }
40
42
 
41
43
  .ef-button:disabled {
package/src/components/StackedCard.css CHANGED
@@ -36,16 +36,16 @@
36
36
  box-shadow: var(--ef-stacked-card-shadow-hover);
37
37
  }
38
38
 
39
- .ef-stacked-image {
39
+ .ef-stacked-image {
40
40
  position: absolute;
41
41
  inset: 0;
42
42
  border-radius: 18px;
43
43
  background:
44
44
  radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.16), transparent 55%),
45
45
  var(--ef-stacked-image-gradient);
46
- box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
47
- z-index: 0;
48
- }
46
+ box-shadow: var(--ef-stacked-image-inset-shadow, inset 0 0 40px rgba(0, 0, 0, 0.35));
47
+ z-index: 0;
48
+ }
49
49
 
50
50
  .ef-stacked-image-photo {
51
51
  background-repeat: no-repeat;
@@ -73,18 +73,16 @@
73
73
  color: var(--text-strong);
74
74
  }
75
75
 
76
- .ef-stacked-body::before {
77
- content: "";
78
- position: absolute;
79
- inset: -40px -20px -20px;
80
- background: linear-gradient(
81
- 180deg,
82
- rgba(9, 12, 18, 0) 0%,
83
- rgba(9, 12, 18, 0.78) 55%,
84
- rgba(9, 12, 18, 0.9) 100%
85
- );
86
- z-index: -1;
87
- }
76
+ .ef-stacked-body::before {
77
+ content: "";
78
+ position: absolute;
79
+ inset: -40px -20px -20px;
80
+ background: var(
81
+ --ef-stacked-body-overlay,
82
+ linear-gradient(180deg, rgba(9, 12, 18, 0) 0%, rgba(9, 12, 18, 0.78) 55%, rgba(9, 12, 18, 0.9) 100%)
83
+ );
84
+ z-index: -1;
85
+ }
88
86
 
89
87
  .ef-stacked-body-plain {
90
88
  position: relative;
package/src/variables.css CHANGED
@@ -16,7 +16,14 @@
16
16
  --ef-button-border: var(--ef-border-gradient);
17
17
  --ef-button-border-soft: var(--ef-border-gradient-soft);
18
18
  --ef-button-text: var(--text-strong);
19
- --ef-button-glow-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
19
+ --ef-button-glow-shadow: 0 0 10px rgba(0, 229, 255, 0.18), 0 0 24px rgba(124, 77, 255, 0.2),
20
+ 0 0 34px rgba(255, 77, 210, 0.18);
21
+ --ef-button-glow-shadow-mid: 0 0 12px rgba(0, 229, 255, 0.24), 0 0 28px rgba(124, 77, 255, 0.28),
22
+ 0 0 40px rgba(255, 77, 210, 0.24);
23
+ --ef-button-glow-shadow-strong: 0 0 14px rgba(0, 229, 255, 0.32), 0 0 34px rgba(124, 77, 255, 0.38),
24
+ 0 0 48px rgba(255, 77, 210, 0.3);
25
+ --ef-button-glow-pulse-duration: 2200ms;
26
+ --ef-button-glow-surge-duration: 420ms;
20
27
  --ef-button-hover-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
21
28
  --ef-button-focus-shadow: 0 0 20px rgba(124, 77, 255, 0.45);
22
29
  --ef-button-hover-transform: translateY(-1px);
@@ -78,12 +85,19 @@
78
85
  --ef-stacked-card-shadow-hover: 0 20px 45px rgba(10, 12, 24, 0.7);
79
86
  --ef-stacked-frame-shadow: 0 18px 40px rgba(10, 12, 24, 0.55);
80
87
  --ef-stacked-tag-bg: rgba(15, 18, 28, 0.7);
81
- --ef-stacked-tag-text: rgba(238, 241, 246, 0.75);
82
- --ef-stacked-body-muted: rgba(255, 255, 255, 0.7);
83
- --ef-stacked-action-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
84
- --ef-stacked-image-gradient: linear-gradient(
85
- 135deg,
86
- rgba(0, 229, 255, 0.35),
88
+ --ef-stacked-tag-text: rgba(238, 241, 246, 0.75);
89
+ --ef-stacked-body-muted: rgba(255, 255, 255, 0.7);
90
+ --ef-stacked-action-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
91
+ --ef-stacked-body-overlay: linear-gradient(
92
+ 180deg,
93
+ rgba(9, 12, 18, 0) 0%,
94
+ rgba(9, 12, 18, 0.78) 55%,
95
+ rgba(9, 12, 18, 0.9) 100%
96
+ );
97
+ --ef-stacked-image-inset-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
98
+ --ef-stacked-image-gradient: linear-gradient(
99
+ 135deg,
100
+ rgba(0, 229, 255, 0.35),
87
101
  rgba(124, 77, 255, 0.35),
88
102
  rgba(255, 77, 210, 0.25)
89
103
  );
@@ -150,7 +164,14 @@
150
164
  rgba(255, 183, 77, 0.6)
151
165
  );
152
166
  --ef-button-text: #1d232a;
153
- --ef-button-glow-shadow: 0 0 20px rgba(124, 77, 255, 0.32);
167
+ --ef-button-glow-shadow: 0 0 8px rgba(0, 160, 188, 0.12), 0 0 20px rgba(124, 77, 255, 0.16),
168
+ 0 0 28px rgba(255, 77, 210, 0.12);
169
+ --ef-button-glow-shadow-mid: 0 0 10px rgba(0, 160, 188, 0.16), 0 0 24px rgba(124, 77, 255, 0.2),
170
+ 0 0 34px rgba(255, 77, 210, 0.16);
171
+ --ef-button-glow-shadow-strong: 0 0 12px rgba(0, 160, 188, 0.2), 0 0 30px rgba(124, 77, 255, 0.26),
172
+ 0 0 40px rgba(255, 77, 210, 0.22);
173
+ --ef-button-glow-pulse-duration: 2300ms;
174
+ --ef-button-glow-surge-duration: 380ms;
154
175
  --ef-button-hover-shadow: 0 0 14px rgba(31, 122, 140, 0.18);
155
176
  --ef-button-focus-shadow: 0 0 18px rgba(31, 122, 140, 0.24);
156
177
  --ef-button-hover-transform: translateY(-1px);
@@ -205,20 +226,27 @@
205
226
  --ef-field-label: rgba(29, 35, 42, 0.7);
206
227
  --ef-field-helper: rgba(29, 35, 42, 0.55);
207
228
  --ef-field-error: #b34a4a;
208
- --ef-stacked-card-bg: rgba(10, 12, 22, 0.92);
209
- --ef-stacked-card-shadow: 0 14px 35px rgba(10, 12, 24, 0.6);
210
- --ef-stacked-card-shadow-hover: 0 20px 45px rgba(10, 12, 24, 0.7);
211
- --ef-stacked-frame-shadow: 0 18px 40px rgba(10, 12, 24, 0.55);
212
- --ef-stacked-tag-bg: rgba(15, 18, 28, 0.7);
213
- --ef-stacked-tag-text: rgba(238, 241, 246, 0.75);
214
- --ef-stacked-body-muted: rgba(255, 255, 255, 0.7);
215
- --ef-stacked-action-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
216
- --ef-stacked-image-gradient: linear-gradient(
217
- 135deg,
218
- rgba(0, 229, 255, 0.35),
219
- rgba(124, 77, 255, 0.35),
220
- rgba(255, 77, 210, 0.25)
221
- );
229
+ --ef-stacked-card-bg: rgba(255, 255, 255, 0.94);
230
+ --ef-stacked-card-shadow: 0 14px 35px rgba(24, 32, 40, 0.12);
231
+ --ef-stacked-card-shadow-hover: 0 20px 45px rgba(24, 32, 40, 0.16);
232
+ --ef-stacked-frame-shadow: 0 16px 36px rgba(24, 32, 40, 0.11);
233
+ --ef-stacked-tag-bg: rgba(255, 255, 255, 0.82);
234
+ --ef-stacked-tag-text: rgba(29, 35, 42, 0.78);
235
+ --ef-stacked-body-muted: rgba(29, 35, 42, 0.68);
236
+ --ef-stacked-action-shadow: 0 0 20px rgba(124, 77, 255, 0.22);
237
+ --ef-stacked-body-overlay: linear-gradient(
238
+ 180deg,
239
+ rgba(255, 255, 255, 0) 0%,
240
+ rgba(255, 255, 255, 0.72) 52%,
241
+ rgba(255, 255, 255, 0.88) 100%
242
+ );
243
+ --ef-stacked-image-inset-shadow: inset 0 0 28px rgba(24, 32, 40, 0.12);
244
+ --ef-stacked-image-gradient: linear-gradient(
245
+ 135deg,
246
+ rgba(0, 229, 255, 0.22),
247
+ rgba(124, 77, 255, 0.2),
248
+ rgba(255, 77, 210, 0.16)
249
+ );
222
250
  --text-strong: #1d232a;
223
251
  --text-soft: rgba(29, 35, 42, 0.75);
224
252
  --text-muted: rgba(29, 35, 42, 0.6);
@@ -272,8 +300,28 @@
272
300
  --ef-button-border-soft: var(--ef-border-gradient-soft);
273
301
  --ef-button-hover-shadow: 0 0 0 1px rgba(24, 32, 40, 0.2);
274
302
  --ef-button-focus-shadow: 0 0 0 2px rgba(24, 32, 40, 0.22);
303
+ --ef-button-glow-shadow: 0 0 0 1px rgba(24, 32, 40, 0.2);
304
+ --ef-button-glow-shadow-mid: 0 0 0 1px rgba(24, 32, 40, 0.26);
305
+ --ef-button-glow-shadow-strong: 0 0 0 2px rgba(24, 32, 40, 0.28);
306
+ --ef-button-glow-pulse-duration: 1800ms;
307
+ --ef-button-glow-surge-duration: 220ms;
275
308
  --ef-input-border: var(--ef-border-gradient);
276
- --ef-stacked-image-gradient: linear-gradient(135deg, rgba(24, 32, 40, 0.08), rgba(24, 32, 40, 0.15));
309
+ --ef-stacked-card-bg: rgba(255, 255, 255, 0.96);
310
+ --ef-stacked-card-shadow: 0 10px 24px rgba(24, 32, 40, 0.08);
311
+ --ef-stacked-card-shadow-hover: 0 14px 30px rgba(24, 32, 40, 0.12);
312
+ --ef-stacked-frame-shadow: 0 10px 24px rgba(24, 32, 40, 0.08);
313
+ --ef-stacked-tag-bg: rgba(255, 255, 255, 0.86);
314
+ --ef-stacked-tag-text: rgba(24, 32, 40, 0.74);
315
+ --ef-stacked-body-muted: rgba(24, 32, 40, 0.64);
316
+ --ef-stacked-action-shadow: 0 0 0 1px rgba(24, 32, 40, 0.22);
317
+ --ef-stacked-body-overlay: linear-gradient(
318
+ 180deg,
319
+ rgba(255, 255, 255, 0) 0%,
320
+ rgba(255, 255, 255, 0.75) 52%,
321
+ rgba(255, 255, 255, 0.9) 100%
322
+ );
323
+ --ef-stacked-image-inset-shadow: inset 0 0 22px rgba(24, 32, 40, 0.08);
324
+ --ef-stacked-image-gradient: linear-gradient(135deg, rgba(24, 32, 40, 0.06), rgba(24, 32, 40, 0.12));
277
325
  --ef-nav-border: var(--ef-border-gradient);
278
326
  --ef-nav-shadow-hover: 0 0 0 1px rgba(24, 32, 40, 0.2);
279
327
  --ef-nav-shadow-focus: 0 0 0 2px rgba(24, 32, 40, 0.22);
@@ -303,7 +351,27 @@
303
351
  --ef-button-border-soft: var(--ef-border-gradient-soft);
304
352
  --ef-button-hover-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
305
353
  --ef-button-focus-shadow: 0 0 0 2px rgba(255, 255, 255, 0.24);
354
+ --ef-button-glow-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
355
+ --ef-button-glow-shadow-mid: 0 0 0 1px rgba(255, 255, 255, 0.26);
356
+ --ef-button-glow-shadow-strong: 0 0 0 2px rgba(255, 255, 255, 0.28);
357
+ --ef-button-glow-pulse-duration: 1800ms;
358
+ --ef-button-glow-surge-duration: 220ms;
306
359
  --ef-input-border: var(--ef-border-gradient);
360
+ --ef-stacked-card-bg: rgba(11, 12, 26, 0.94);
361
+ --ef-stacked-card-shadow: 0 14px 35px rgba(0, 0, 0, 0.45);
362
+ --ef-stacked-card-shadow-hover: 0 20px 45px rgba(0, 0, 0, 0.58);
363
+ --ef-stacked-frame-shadow: 0 16px 36px rgba(0, 0, 0, 0.42);
364
+ --ef-stacked-tag-bg: rgba(255, 255, 255, 0.08);
365
+ --ef-stacked-tag-text: rgba(246, 245, 255, 0.78);
366
+ --ef-stacked-body-muted: rgba(246, 245, 255, 0.68);
367
+ --ef-stacked-action-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24);
368
+ --ef-stacked-body-overlay: linear-gradient(
369
+ 180deg,
370
+ rgba(11, 12, 26, 0) 0%,
371
+ rgba(11, 12, 26, 0.72) 55%,
372
+ rgba(11, 12, 26, 0.88) 100%
373
+ );
374
+ --ef-stacked-image-inset-shadow: inset 0 0 34px rgba(0, 0, 0, 0.34);
307
375
  --menu-line: var(--line);
308
376
  --menu-bg-soft: rgba(255, 255, 255, 0.06);
309
377
  --ef-stacked-image-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.12));
@@ -354,7 +422,14 @@
354
422
  --ef-button-border: var(--ef-border-gradient);
355
423
  --ef-button-border-soft: var(--ef-border-gradient-soft);
356
424
  --ef-button-text: #f6eaf2;
357
- --ef-button-glow-shadow: 0 0 24px rgba(226, 85, 161, 0.42);
425
+ --ef-button-glow-shadow: 0 0 10px rgba(255, 134, 200, 0.2), 0 0 24px rgba(226, 85, 161, 0.24),
426
+ 0 0 34px rgba(125, 214, 246, 0.2);
427
+ --ef-button-glow-shadow-mid: 0 0 12px rgba(255, 134, 200, 0.26), 0 0 30px rgba(226, 85, 161, 0.3),
428
+ 0 0 40px rgba(125, 214, 246, 0.24);
429
+ --ef-button-glow-shadow-strong: 0 0 14px rgba(255, 134, 200, 0.34), 0 0 36px rgba(226, 85, 161, 0.38),
430
+ 0 0 48px rgba(125, 214, 246, 0.32);
431
+ --ef-button-glow-pulse-duration: 2100ms;
432
+ --ef-button-glow-surge-duration: 420ms;
358
433
  --ef-button-hover-shadow: 0 0 18px rgba(226, 85, 161, 0.3);
359
434
  --ef-button-focus-shadow: 0 0 22px rgba(226, 85, 161, 0.38);
360
435
  --ef-button-hover-transform: translateY(-1px);
@@ -377,10 +452,31 @@
377
452
  --ef-input-surface: #1b0b18;
378
453
  --ef-input-border: var(--ef-border-gradient);
379
454
  --ef-input-text: #f6eaf2;
380
- --ef-input-placeholder: rgba(246, 234, 242, 0.6);
381
- --ef-input-focus: rgba(226, 85, 161, 0.45);
382
- --ef-input-shadow: 0 0 0 2px rgba(226, 85, 161, 0.2);
383
- --text-strong: #f6eaf2;
455
+ --ef-input-placeholder: rgba(246, 234, 242, 0.6);
456
+ --ef-input-focus: rgba(226, 85, 161, 0.45);
457
+ --ef-input-shadow: 0 0 0 2px rgba(226, 85, 161, 0.2);
458
+ --ef-stacked-card-bg: rgba(30, 12, 28, 0.94);
459
+ --ef-stacked-card-shadow: 0 14px 35px rgba(0, 0, 0, 0.56);
460
+ --ef-stacked-card-shadow-hover: 0 20px 45px rgba(0, 0, 0, 0.66);
461
+ --ef-stacked-frame-shadow: 0 18px 40px rgba(0, 0, 0, 0.52);
462
+ --ef-stacked-tag-bg: rgba(255, 134, 200, 0.14);
463
+ --ef-stacked-tag-text: rgba(246, 234, 242, 0.82);
464
+ --ef-stacked-body-muted: rgba(246, 234, 242, 0.74);
465
+ --ef-stacked-action-shadow: 0 0 22px rgba(226, 85, 161, 0.36);
466
+ --ef-stacked-body-overlay: linear-gradient(
467
+ 180deg,
468
+ rgba(24, 9, 22, 0) 0%,
469
+ rgba(24, 9, 22, 0.74) 55%,
470
+ rgba(24, 9, 22, 0.9) 100%
471
+ );
472
+ --ef-stacked-image-inset-shadow: inset 0 0 38px rgba(6, 2, 8, 0.42);
473
+ --ef-stacked-image-gradient: linear-gradient(
474
+ 135deg,
475
+ rgba(255, 134, 200, 0.28),
476
+ rgba(226, 85, 161, 0.26),
477
+ rgba(125, 214, 246, 0.22)
478
+ );
479
+ --text-strong: #f6eaf2;
384
480
  --text-soft: rgba(246, 234, 242, 0.8);
385
481
  --text-muted: #dbc7d7;
386
482
  --card: #1b0b18;
@@ -459,6 +555,14 @@ body.ef-galaxy-light {
459
555
  --ef-nav-shadow-active: 0 0 20px rgba(124, 77, 255, 0.3);
460
556
  --ef-button-hover-shadow: 0 0 14px rgba(124, 77, 255, 0.22);
461
557
  --ef-button-focus-shadow: 0 0 18px rgba(124, 77, 255, 0.28);
558
+ --ef-button-glow-shadow: 0 0 8px rgba(0, 229, 255, 0.16), 0 0 20px rgba(124, 77, 255, 0.2),
559
+ 0 0 28px rgba(255, 77, 210, 0.16);
560
+ --ef-button-glow-shadow-mid: 0 0 10px rgba(0, 229, 255, 0.22), 0 0 24px rgba(124, 77, 255, 0.26),
561
+ 0 0 34px rgba(255, 77, 210, 0.2);
562
+ --ef-button-glow-shadow-strong: 0 0 12px rgba(0, 229, 255, 0.28), 0 0 30px rgba(124, 77, 255, 0.34),
563
+ 0 0 40px rgba(255, 77, 210, 0.26);
564
+ --ef-button-glow-pulse-duration: 2200ms;
565
+ --ef-button-glow-surge-duration: 400ms;
462
566
  --ef-menu-item-shadow: 0 0 10px rgba(124, 77, 255, 0.15);
463
567
  --ef-menu-item-shadow-hover: 0 0 14px rgba(124, 77, 255, 0.2);
464
568
  --ef-tabs-surface: rgba(255, 255, 255, 0.92);
@@ -484,6 +588,35 @@ body.ef-galaxy-light {
484
588
  --ef-nav-shadow-active: 0 0 20px rgba(31, 122, 140, 0.26);
485
589
  --ef-button-hover-shadow: 0 0 14px rgba(31, 122, 140, 0.18);
486
590
  --ef-button-focus-shadow: 0 0 18px rgba(31, 122, 140, 0.24);
591
+ --ef-button-glow-shadow: 0 0 8px rgba(0, 160, 188, 0.12), 0 0 20px rgba(124, 77, 255, 0.16),
592
+ 0 0 28px rgba(255, 77, 210, 0.12);
593
+ --ef-button-glow-shadow-mid: 0 0 10px rgba(0, 160, 188, 0.16), 0 0 24px rgba(124, 77, 255, 0.2),
594
+ 0 0 34px rgba(255, 77, 210, 0.16);
595
+ --ef-button-glow-shadow-strong: 0 0 12px rgba(0, 160, 188, 0.2), 0 0 30px rgba(124, 77, 255, 0.26),
596
+ 0 0 40px rgba(255, 77, 210, 0.22);
597
+ --ef-button-glow-pulse-duration: 2300ms;
598
+ --ef-button-glow-surge-duration: 380ms;
599
+ --ef-stacked-card-bg: rgba(255, 255, 255, 0.94);
600
+ --ef-stacked-card-shadow: 0 14px 35px rgba(24, 32, 40, 0.12);
601
+ --ef-stacked-card-shadow-hover: 0 20px 45px rgba(24, 32, 40, 0.16);
602
+ --ef-stacked-frame-shadow: 0 16px 36px rgba(24, 32, 40, 0.11);
603
+ --ef-stacked-tag-bg: rgba(255, 255, 255, 0.82);
604
+ --ef-stacked-tag-text: rgba(29, 35, 42, 0.78);
605
+ --ef-stacked-body-muted: rgba(29, 35, 42, 0.68);
606
+ --ef-stacked-action-shadow: 0 0 20px rgba(124, 77, 255, 0.22);
607
+ --ef-stacked-body-overlay: linear-gradient(
608
+ 180deg,
609
+ rgba(255, 255, 255, 0) 0%,
610
+ rgba(255, 255, 255, 0.72) 52%,
611
+ rgba(255, 255, 255, 0.88) 100%
612
+ );
613
+ --ef-stacked-image-inset-shadow: inset 0 0 28px rgba(24, 32, 40, 0.12);
614
+ --ef-stacked-image-gradient: linear-gradient(
615
+ 135deg,
616
+ rgba(0, 229, 255, 0.22),
617
+ rgba(124, 77, 255, 0.2),
618
+ rgba(255, 77, 210, 0.16)
619
+ );
487
620
  --ef-menu-item-shadow: 0 0 10px rgba(31, 122, 140, 0.12);
488
621
  --ef-menu-item-shadow-hover: 0 0 14px rgba(31, 122, 140, 0.18);
489
622
  --ef-tabs-surface: #ffffff;