@enderfall/ui 0.2.9 → 0.2.10

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 (3) hide show
  1. package/package.json +2 -1
  2. package/src/components/Button.css +6 -4
  3. package/src/variables.css +50 -3
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.10",
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/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);
@@ -150,7 +157,14 @@
150
157
  rgba(255, 183, 77, 0.6)
151
158
  );
152
159
  --ef-button-text: #1d232a;
153
- --ef-button-glow-shadow: 0 0 20px rgba(124, 77, 255, 0.32);
160
+ --ef-button-glow-shadow: 0 0 8px rgba(0, 160, 188, 0.12), 0 0 20px rgba(124, 77, 255, 0.16),
161
+ 0 0 28px rgba(255, 77, 210, 0.12);
162
+ --ef-button-glow-shadow-mid: 0 0 10px rgba(0, 160, 188, 0.16), 0 0 24px rgba(124, 77, 255, 0.2),
163
+ 0 0 34px rgba(255, 77, 210, 0.16);
164
+ --ef-button-glow-shadow-strong: 0 0 12px rgba(0, 160, 188, 0.2), 0 0 30px rgba(124, 77, 255, 0.26),
165
+ 0 0 40px rgba(255, 77, 210, 0.22);
166
+ --ef-button-glow-pulse-duration: 2300ms;
167
+ --ef-button-glow-surge-duration: 380ms;
154
168
  --ef-button-hover-shadow: 0 0 14px rgba(31, 122, 140, 0.18);
155
169
  --ef-button-focus-shadow: 0 0 18px rgba(31, 122, 140, 0.24);
156
170
  --ef-button-hover-transform: translateY(-1px);
@@ -272,6 +286,11 @@
272
286
  --ef-button-border-soft: var(--ef-border-gradient-soft);
273
287
  --ef-button-hover-shadow: 0 0 0 1px rgba(24, 32, 40, 0.2);
274
288
  --ef-button-focus-shadow: 0 0 0 2px rgba(24, 32, 40, 0.22);
289
+ --ef-button-glow-shadow: 0 0 0 1px rgba(24, 32, 40, 0.2);
290
+ --ef-button-glow-shadow-mid: 0 0 0 1px rgba(24, 32, 40, 0.26);
291
+ --ef-button-glow-shadow-strong: 0 0 0 2px rgba(24, 32, 40, 0.28);
292
+ --ef-button-glow-pulse-duration: 1800ms;
293
+ --ef-button-glow-surge-duration: 220ms;
275
294
  --ef-input-border: var(--ef-border-gradient);
276
295
  --ef-stacked-image-gradient: linear-gradient(135deg, rgba(24, 32, 40, 0.08), rgba(24, 32, 40, 0.15));
277
296
  --ef-nav-border: var(--ef-border-gradient);
@@ -303,6 +322,11 @@
303
322
  --ef-button-border-soft: var(--ef-border-gradient-soft);
304
323
  --ef-button-hover-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
305
324
  --ef-button-focus-shadow: 0 0 0 2px rgba(255, 255, 255, 0.24);
325
+ --ef-button-glow-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
326
+ --ef-button-glow-shadow-mid: 0 0 0 1px rgba(255, 255, 255, 0.26);
327
+ --ef-button-glow-shadow-strong: 0 0 0 2px rgba(255, 255, 255, 0.28);
328
+ --ef-button-glow-pulse-duration: 1800ms;
329
+ --ef-button-glow-surge-duration: 220ms;
306
330
  --ef-input-border: var(--ef-border-gradient);
307
331
  --menu-line: var(--line);
308
332
  --menu-bg-soft: rgba(255, 255, 255, 0.06);
@@ -354,7 +378,14 @@
354
378
  --ef-button-border: var(--ef-border-gradient);
355
379
  --ef-button-border-soft: var(--ef-border-gradient-soft);
356
380
  --ef-button-text: #f6eaf2;
357
- --ef-button-glow-shadow: 0 0 24px rgba(226, 85, 161, 0.42);
381
+ --ef-button-glow-shadow: 0 0 10px rgba(255, 134, 200, 0.2), 0 0 24px rgba(226, 85, 161, 0.24),
382
+ 0 0 34px rgba(125, 214, 246, 0.2);
383
+ --ef-button-glow-shadow-mid: 0 0 12px rgba(255, 134, 200, 0.26), 0 0 30px rgba(226, 85, 161, 0.3),
384
+ 0 0 40px rgba(125, 214, 246, 0.24);
385
+ --ef-button-glow-shadow-strong: 0 0 14px rgba(255, 134, 200, 0.34), 0 0 36px rgba(226, 85, 161, 0.38),
386
+ 0 0 48px rgba(125, 214, 246, 0.32);
387
+ --ef-button-glow-pulse-duration: 2100ms;
388
+ --ef-button-glow-surge-duration: 420ms;
358
389
  --ef-button-hover-shadow: 0 0 18px rgba(226, 85, 161, 0.3);
359
390
  --ef-button-focus-shadow: 0 0 22px rgba(226, 85, 161, 0.38);
360
391
  --ef-button-hover-transform: translateY(-1px);
@@ -459,6 +490,14 @@ body.ef-galaxy-light {
459
490
  --ef-nav-shadow-active: 0 0 20px rgba(124, 77, 255, 0.3);
460
491
  --ef-button-hover-shadow: 0 0 14px rgba(124, 77, 255, 0.22);
461
492
  --ef-button-focus-shadow: 0 0 18px rgba(124, 77, 255, 0.28);
493
+ --ef-button-glow-shadow: 0 0 8px rgba(0, 229, 255, 0.16), 0 0 20px rgba(124, 77, 255, 0.2),
494
+ 0 0 28px rgba(255, 77, 210, 0.16);
495
+ --ef-button-glow-shadow-mid: 0 0 10px rgba(0, 229, 255, 0.22), 0 0 24px rgba(124, 77, 255, 0.26),
496
+ 0 0 34px rgba(255, 77, 210, 0.2);
497
+ --ef-button-glow-shadow-strong: 0 0 12px rgba(0, 229, 255, 0.28), 0 0 30px rgba(124, 77, 255, 0.34),
498
+ 0 0 40px rgba(255, 77, 210, 0.26);
499
+ --ef-button-glow-pulse-duration: 2200ms;
500
+ --ef-button-glow-surge-duration: 400ms;
462
501
  --ef-menu-item-shadow: 0 0 10px rgba(124, 77, 255, 0.15);
463
502
  --ef-menu-item-shadow-hover: 0 0 14px rgba(124, 77, 255, 0.2);
464
503
  --ef-tabs-surface: rgba(255, 255, 255, 0.92);
@@ -484,6 +523,14 @@ body.ef-galaxy-light {
484
523
  --ef-nav-shadow-active: 0 0 20px rgba(31, 122, 140, 0.26);
485
524
  --ef-button-hover-shadow: 0 0 14px rgba(31, 122, 140, 0.18);
486
525
  --ef-button-focus-shadow: 0 0 18px rgba(31, 122, 140, 0.24);
526
+ --ef-button-glow-shadow: 0 0 8px rgba(0, 160, 188, 0.12), 0 0 20px rgba(124, 77, 255, 0.16),
527
+ 0 0 28px rgba(255, 77, 210, 0.12);
528
+ --ef-button-glow-shadow-mid: 0 0 10px rgba(0, 160, 188, 0.16), 0 0 24px rgba(124, 77, 255, 0.2),
529
+ 0 0 34px rgba(255, 77, 210, 0.16);
530
+ --ef-button-glow-shadow-strong: 0 0 12px rgba(0, 160, 188, 0.2), 0 0 30px rgba(124, 77, 255, 0.26),
531
+ 0 0 40px rgba(255, 77, 210, 0.22);
532
+ --ef-button-glow-pulse-duration: 2300ms;
533
+ --ef-button-glow-surge-duration: 380ms;
487
534
  --ef-menu-item-shadow: 0 0 10px rgba(31, 122, 140, 0.12);
488
535
  --ef-menu-item-shadow-hover: 0 0 14px rgba(31, 122, 140, 0.18);
489
536
  --ef-tabs-surface: #ffffff;