@enderfall/ui 0.2.10 → 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 (3) hide show
  1. package/package.json +2 -2
  2. package/src/components/StackedCard.css +14 -16
  3. package/src/variables.css +111 -25
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@enderfall/ui",
3
3
  "private": false,
4
- "version": "0.2.10",
4
+ "version": "0.2.11",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",
@@ -31,4 +31,4 @@
31
31
  "typescript": "^5.3.3"
32
32
  }
33
33
  }
34
-
34
+
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
@@ -85,12 +85,19 @@
85
85
  --ef-stacked-card-shadow-hover: 0 20px 45px rgba(10, 12, 24, 0.7);
86
86
  --ef-stacked-frame-shadow: 0 18px 40px rgba(10, 12, 24, 0.55);
87
87
  --ef-stacked-tag-bg: rgba(15, 18, 28, 0.7);
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-image-gradient: linear-gradient(
92
- 135deg,
93
- 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),
94
101
  rgba(124, 77, 255, 0.35),
95
102
  rgba(255, 77, 210, 0.25)
96
103
  );
@@ -219,20 +226,27 @@
219
226
  --ef-field-label: rgba(29, 35, 42, 0.7);
220
227
  --ef-field-helper: rgba(29, 35, 42, 0.55);
221
228
  --ef-field-error: #b34a4a;
222
- --ef-stacked-card-bg: rgba(10, 12, 22, 0.92);
223
- --ef-stacked-card-shadow: 0 14px 35px rgba(10, 12, 24, 0.6);
224
- --ef-stacked-card-shadow-hover: 0 20px 45px rgba(10, 12, 24, 0.7);
225
- --ef-stacked-frame-shadow: 0 18px 40px rgba(10, 12, 24, 0.55);
226
- --ef-stacked-tag-bg: rgba(15, 18, 28, 0.7);
227
- --ef-stacked-tag-text: rgba(238, 241, 246, 0.75);
228
- --ef-stacked-body-muted: rgba(255, 255, 255, 0.7);
229
- --ef-stacked-action-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
230
- --ef-stacked-image-gradient: linear-gradient(
231
- 135deg,
232
- rgba(0, 229, 255, 0.35),
233
- rgba(124, 77, 255, 0.35),
234
- rgba(255, 77, 210, 0.25)
235
- );
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
+ );
236
250
  --text-strong: #1d232a;
237
251
  --text-soft: rgba(29, 35, 42, 0.75);
238
252
  --text-muted: rgba(29, 35, 42, 0.6);
@@ -292,7 +306,22 @@
292
306
  --ef-button-glow-pulse-duration: 1800ms;
293
307
  --ef-button-glow-surge-duration: 220ms;
294
308
  --ef-input-border: var(--ef-border-gradient);
295
- --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));
296
325
  --ef-nav-border: var(--ef-border-gradient);
297
326
  --ef-nav-shadow-hover: 0 0 0 1px rgba(24, 32, 40, 0.2);
298
327
  --ef-nav-shadow-focus: 0 0 0 2px rgba(24, 32, 40, 0.22);
@@ -328,6 +357,21 @@
328
357
  --ef-button-glow-pulse-duration: 1800ms;
329
358
  --ef-button-glow-surge-duration: 220ms;
330
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);
331
375
  --menu-line: var(--line);
332
376
  --menu-bg-soft: rgba(255, 255, 255, 0.06);
333
377
  --ef-stacked-image-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.12));
@@ -408,10 +452,31 @@
408
452
  --ef-input-surface: #1b0b18;
409
453
  --ef-input-border: var(--ef-border-gradient);
410
454
  --ef-input-text: #f6eaf2;
411
- --ef-input-placeholder: rgba(246, 234, 242, 0.6);
412
- --ef-input-focus: rgba(226, 85, 161, 0.45);
413
- --ef-input-shadow: 0 0 0 2px rgba(226, 85, 161, 0.2);
414
- --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;
415
480
  --text-soft: rgba(246, 234, 242, 0.8);
416
481
  --text-muted: #dbc7d7;
417
482
  --card: #1b0b18;
@@ -531,6 +596,27 @@ body.ef-galaxy-light {
531
596
  0 0 40px rgba(255, 77, 210, 0.22);
532
597
  --ef-button-glow-pulse-duration: 2300ms;
533
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
+ );
534
620
  --ef-menu-item-shadow: 0 0 10px rgba(31, 122, 140, 0.12);
535
621
  --ef-menu-item-shadow-hover: 0 0 14px rgba(31, 122, 140, 0.18);
536
622
  --ef-tabs-surface: #ffffff;