@enderfall/ui 0.2.4 → 0.2.5

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 +1 -1
  2. package/src/components/Button.css +13 -2
  3. package/src/variables.css +17 -0
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@enderfall/ui",
3
3
  "private": false,
4
- "version": "0.2.4",
4
+ "version": "0.2.5",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",
package/src/components/Button.css CHANGED
@@ -2,15 +2,26 @@
2
2
  padding: 10px 18px;
3
3
  border-radius: var(--ef-control-radius, 12px);
4
4
  font-weight: 600;
5
- text-decoration: none;
5
+ text-decoration: none;
6
6
  text-align: center;
7
7
  border: 2px solid transparent;
8
8
  background:
9
9
  linear-gradient(var(--ef-button-surface), var(--ef-button-surface)) padding-box,
10
10
  var(--ef-button-border) border-box;
11
- color: var(--ef-button-text);
11
+ color: var(--ef-button-text);
12
12
  cursor: pointer;
13
13
  box-shadow: var(--shadow);
14
+ transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
15
+ }
16
+
17
+ .ef-button:not(:disabled):hover {
18
+ box-shadow: var(--ef-button-hover-shadow, var(--ef-button-glow-shadow, 0 0 24px rgba(124, 77, 255, 0.45)));
19
+ transform: var(--ef-button-hover-transform, translateY(-1px));
20
+ }
21
+
22
+ .ef-button:focus-visible {
23
+ box-shadow: var(--ef-button-focus-shadow, var(--ef-button-glow-shadow, 0 0 24px rgba(124, 77, 255, 0.45)));
24
+ transform: var(--ef-button-hover-transform, translateY(-1px));
14
25
  }
15
26
 
16
27
  .ef-button--glow {
package/src/variables.css CHANGED
@@ -17,6 +17,9 @@
17
17
  --ef-button-border-soft: var(--ef-border-gradient-soft);
18
18
  --ef-button-text: var(--text-strong);
19
19
  --ef-button-glow-shadow: 0 0 24px rgba(124, 77, 255, 0.45);
20
+ --ef-button-hover-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
21
+ --ef-button-focus-shadow: 0 0 20px rgba(124, 77, 255, 0.45);
22
+ --ef-button-hover-transform: translateY(-1px);
20
23
  --ef-button-locked-bg: rgba(15, 18, 28, 0.7);
21
24
  --ef-button-locked-border: rgba(255, 255, 255, 0.15);
22
25
  --ef-button-locked-text: rgba(255, 255, 255, 0.7);
@@ -148,6 +151,9 @@
148
151
  );
149
152
  --ef-button-text: #1d232a;
150
153
  --ef-button-glow-shadow: 0 0 20px rgba(124, 77, 255, 0.32);
154
+ --ef-button-hover-shadow: 0 0 14px rgba(31, 122, 140, 0.18);
155
+ --ef-button-focus-shadow: 0 0 18px rgba(31, 122, 140, 0.24);
156
+ --ef-button-hover-transform: translateY(-1px);
151
157
  --ef-button-locked-bg: rgba(255, 255, 255, 0.8);
152
158
  --ef-button-locked-border: rgba(24, 32, 40, 0.18);
153
159
  --ef-button-locked-text: rgba(24, 32, 40, 0.6);
@@ -264,6 +270,8 @@
264
270
  );
265
271
  --ef-button-border: var(--ef-border-gradient);
266
272
  --ef-button-border-soft: var(--ef-border-gradient-soft);
273
+ --ef-button-hover-shadow: 0 0 0 1px rgba(24, 32, 40, 0.2);
274
+ --ef-button-focus-shadow: 0 0 0 2px rgba(24, 32, 40, 0.22);
267
275
  --ef-input-border: var(--ef-border-gradient);
268
276
  --ef-stacked-image-gradient: linear-gradient(135deg, rgba(24, 32, 40, 0.08), rgba(24, 32, 40, 0.15));
269
277
  --ef-nav-border: var(--ef-border-gradient);
@@ -293,6 +301,8 @@
293
301
  );
294
302
  --ef-button-border: var(--ef-border-gradient);
295
303
  --ef-button-border-soft: var(--ef-border-gradient-soft);
304
+ --ef-button-hover-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
305
+ --ef-button-focus-shadow: 0 0 0 2px rgba(255, 255, 255, 0.24);
296
306
  --ef-input-border: var(--ef-border-gradient);
297
307
  --menu-line: var(--line);
298
308
  --menu-bg-soft: rgba(255, 255, 255, 0.06);
@@ -345,6 +355,9 @@
345
355
  --ef-button-border-soft: var(--ef-border-gradient-soft);
346
356
  --ef-button-text: #f6eaf2;
347
357
  --ef-button-glow-shadow: 0 0 24px rgba(226, 85, 161, 0.42);
358
+ --ef-button-hover-shadow: 0 0 18px rgba(226, 85, 161, 0.3);
359
+ --ef-button-focus-shadow: 0 0 22px rgba(226, 85, 161, 0.38);
360
+ --ef-button-hover-transform: translateY(-1px);
348
361
  --ef-nav-text: rgba(246, 234, 242, 0.78);
349
362
  --ef-nav-text-hover: #f6eaf2;
350
363
  --ef-nav-text-active: #f6eaf2;
@@ -444,6 +457,8 @@ body.ef-galaxy-light {
444
457
  --ef-nav-shadow-hover: 0 0 16px rgba(124, 77, 255, 0.24);
445
458
  --ef-nav-shadow-focus: 0 0 20px rgba(124, 77, 255, 0.28);
446
459
  --ef-nav-shadow-active: 0 0 20px rgba(124, 77, 255, 0.3);
460
+ --ef-button-hover-shadow: 0 0 14px rgba(124, 77, 255, 0.22);
461
+ --ef-button-focus-shadow: 0 0 18px rgba(124, 77, 255, 0.28);
447
462
  --ef-menu-item-shadow: 0 0 10px rgba(124, 77, 255, 0.15);
448
463
  --ef-menu-item-shadow-hover: 0 0 14px rgba(124, 77, 255, 0.2);
449
464
  --ef-tabs-surface: rgba(255, 255, 255, 0.92);
@@ -467,6 +482,8 @@ body.ef-galaxy-light {
467
482
  --ef-nav-shadow-hover: 0 0 16px rgba(31, 122, 140, 0.2);
468
483
  --ef-nav-shadow-focus: 0 0 20px rgba(31, 122, 140, 0.24);
469
484
  --ef-nav-shadow-active: 0 0 20px rgba(31, 122, 140, 0.26);
485
+ --ef-button-hover-shadow: 0 0 14px rgba(31, 122, 140, 0.18);
486
+ --ef-button-focus-shadow: 0 0 18px rgba(31, 122, 140, 0.24);
470
487
  --ef-menu-item-shadow: 0 0 10px rgba(31, 122, 140, 0.12);
471
488
  --ef-menu-item-shadow-hover: 0 0 14px rgba(31, 122, 140, 0.18);
472
489
  --ef-tabs-surface: #ffffff;