@enderfall/ui 0.1.14 → 0.1.16

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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/base.css +25 -21
  3. package/src/components/Button.css +16 -71
  4. package/src/components/HeaderMenu.css +7 -25
  5. package/src/components/Tabs.css +7 -7
  6. package/src/theme.css +117 -27
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@enderfall/ui",
3
3
  "private": false,
4
- "version": "0.1.14",
4
+ "version": "0.1.16",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",
package/src/base.css CHANGED
@@ -29,31 +29,35 @@ body {
29
29
  animation: none !important;
30
30
  }
31
31
 
32
- :root[data-theme="light"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):not(.ef-tab),
33
- :root[data-theme="plain-light"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):not(.ef-tab),
34
- :root[data-theme="galaxy"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):not(.ef-tab),
35
- :root[data-theme="plain-dark"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):not(.ef-tab),
36
- :root[data-theme="system"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):not(.ef-tab) {
37
- border: 2px solid transparent;
38
- border-radius: 8px;
39
- padding: 10px 18px;
40
- font-weight: 600;
32
+ /*
33
+ Opt-in fallback button styling:
34
+ Avoid global element overrides that conflict with component variants.
35
+ */
36
+ :root[data-theme="light"] button.ef-theme-button,
37
+ :root[data-theme="plain-light"] button.ef-theme-button,
38
+ :root[data-theme="galaxy"] button.ef-theme-button,
39
+ :root[data-theme="plain-dark"] button.ef-theme-button,
40
+ :root[data-theme="system"] button.ef-theme-button {
41
+ border: 2px solid transparent;
42
+ border-radius: 8px;
43
+ padding: 10px 18px;
44
+ font-weight: 600;
41
45
  cursor: pointer;
42
46
  background:
43
47
  linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
44
48
  var(--ef-border-gradient) border-box;
45
- color: var(--text-strong);
46
- box-shadow: var(--shadow);
47
- }
48
-
49
- :root[data-theme="light"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):not(.ef-tab):disabled,
50
- :root[data-theme="plain-light"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):not(.ef-tab):disabled,
51
- :root[data-theme="galaxy"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):not(.ef-tab):disabled,
52
- :root[data-theme="plain-dark"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):not(.ef-tab):disabled,
53
- :root[data-theme="system"] button:not(.ef-button):not(.ef-menu-button):not(.ef-menu-item):not(.user-button):not(.icon-action):not(.ef-tab):disabled {
54
- opacity: 0.6;
55
- cursor: not-allowed;
56
- box-shadow: none;
49
+ color: var(--text-strong);
50
+ box-shadow: var(--shadow);
51
+ }
52
+
53
+ :root[data-theme="light"] button.ef-theme-button:disabled,
54
+ :root[data-theme="plain-light"] button.ef-theme-button:disabled,
55
+ :root[data-theme="galaxy"] button.ef-theme-button:disabled,
56
+ :root[data-theme="plain-dark"] button.ef-theme-button:disabled,
57
+ :root[data-theme="system"] button.ef-theme-button:disabled {
58
+ opacity: 0.6;
59
+ cursor: not-allowed;
60
+ box-shadow: none;
57
61
  background:
58
62
  linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
59
63
  var(--ef-border-gradient-soft) border-box;
package/src/components/Button.css CHANGED
@@ -76,18 +76,18 @@
76
76
  }
77
77
 
78
78
  .ef-button.tab {
79
- color: rgba(238, 241, 246, 0.75);
79
+ color: var(--ef-nav-text);
80
80
  text-decoration: none;
81
81
  font-size: 1rem;
82
82
  font-weight: 600;
83
83
  transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
84
- padding: 8px 18px;
85
- border-radius: 8px;
84
+ padding: var(--ef-nav-padding-y, 8px) var(--ef-nav-padding-x, 18px);
85
+ border-radius: var(--ef-nav-radius, 8px);
86
86
  border: 2px solid transparent;
87
87
  text-transform: uppercase;
88
- letter-spacing: 0.08em;
89
- background: rgba(15, 18, 28, 0.7);
90
- box-shadow: none;
88
+ letter-spacing: var(--ef-nav-letter-spacing, 0.08em);
89
+ background: var(--ef-nav-surface);
90
+ box-shadow: var(--ef-nav-shadow);
91
91
  cursor: pointer;
92
92
  font-family: inherit;
93
93
  display: inline-flex;
@@ -97,79 +97,24 @@
97
97
  }
98
98
 
99
99
  .ef-button.tab:focus-visible {
100
- color: #eef1f6;
101
- box-shadow: 0 0 20px rgba(124, 77, 255, 0.45);
102
- transform: translateY(-1px);
100
+ color: var(--ef-nav-text-hover);
101
+ box-shadow: var(--ef-nav-shadow-focus);
102
+ transform: var(--ef-nav-transform-hover, translateY(-1px));
103
103
  }
104
104
 
105
105
  .ef-button.tab.is-active,
106
106
  .ef-button.tab[data-open="true"] {
107
107
  background:
108
- linear-gradient(#0b0c1a, #0b0c1a) padding-box,
109
- linear-gradient(135deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d) border-box;
110
- color: #f6f5ff;
111
- box-shadow: 0 0 24px rgba(124, 77, 255, 0.6);
112
- }
113
-
114
- :root[data-theme="light"] .ef-button.tab,
115
- :root[data-theme="plain-light"] .ef-button.tab,
116
- :root[data-theme="galaxy"] .ef-button.tab,
117
- :root[data-theme="plain-dark"] .ef-button.tab,
118
- :root[data-theme="system"] .ef-button.tab {
119
- color: rgba(238, 241, 246, 0.75);
120
- text-decoration: none;
121
- font-size: 1rem;
122
- font-weight: 600;
123
- padding: 8px 18px;
124
- border-radius: 8px;
125
- border: 2px solid transparent;
126
- text-transform: uppercase;
127
- letter-spacing: 0.08em;
128
- background: rgba(15, 18, 28, 0.7);
129
- box-shadow: none;
108
+ linear-gradient(var(--ef-button-surface), var(--ef-button-surface)) padding-box,
109
+ var(--ef-nav-border) border-box;
110
+ color: var(--ef-nav-text-active);
111
+ box-shadow: var(--ef-nav-shadow-active);
130
112
  }
131
113
 
132
114
  .ef-button.tab:hover {
133
- color: #eef1f6;
134
- box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
135
- transform: translateY(-1px);
136
- }
137
-
138
- :root[data-theme="light"] .ef-button.tab:hover,
139
- :root[data-theme="plain-light"] .ef-button.tab:hover,
140
- :root[data-theme="galaxy"] .ef-button.tab:hover,
141
- :root[data-theme="plain-dark"] .ef-button.tab:hover,
142
- :root[data-theme="system"] .ef-button.tab:hover {
143
- color: #eef1f6;
144
- box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
145
- transform: translateY(-1px);
146
- }
147
-
148
- :root[data-theme="light"] .ef-button.tab:focus-visible,
149
- :root[data-theme="plain-light"] .ef-button.tab:focus-visible,
150
- :root[data-theme="galaxy"] .ef-button.tab:focus-visible,
151
- :root[data-theme="plain-dark"] .ef-button.tab:focus-visible,
152
- :root[data-theme="system"] .ef-button.tab:focus-visible {
153
- color: #eef1f6;
154
- box-shadow: 0 0 20px rgba(124, 77, 255, 0.45);
155
- transform: translateY(-1px);
156
- }
157
-
158
- :root[data-theme="light"] .ef-button.tab.is-active,
159
- :root[data-theme="plain-light"] .ef-button.tab.is-active,
160
- :root[data-theme="galaxy"] .ef-button.tab.is-active,
161
- :root[data-theme="plain-dark"] .ef-button.tab.is-active,
162
- :root[data-theme="system"] .ef-button.tab.is-active,
163
- :root[data-theme="light"] .ef-button.tab[data-open="true"],
164
- :root[data-theme="plain-light"] .ef-button.tab[data-open="true"],
165
- :root[data-theme="galaxy"] .ef-button.tab[data-open="true"],
166
- :root[data-theme="plain-dark"] .ef-button.tab[data-open="true"],
167
- :root[data-theme="system"] .ef-button.tab[data-open="true"] {
168
- background:
169
- linear-gradient(#0b0c1a, #0b0c1a) padding-box,
170
- linear-gradient(135deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d) border-box;
171
- color: #f6f5ff;
172
- box-shadow: 0 0 24px rgba(124, 77, 255, 0.6);
115
+ color: var(--ef-nav-text-hover);
116
+ box-shadow: var(--ef-nav-shadow-hover);
117
+ transform: var(--ef-nav-transform-hover, translateY(-1px));
173
118
  }
174
119
 
175
120
  .theme-preview {
package/src/components/HeaderMenu.css CHANGED
@@ -61,18 +61,18 @@
61
61
  gap: 10px;
62
62
  text-align: left;
63
63
  padding: 10px 14px;
64
- border-radius: 8px;
64
+ border-radius: var(--ef-nav-radius, 8px);
65
65
  background:
66
- linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
67
- var(--ef-border-gradient) border-box;
66
+ linear-gradient(var(--ef-button-surface), var(--ef-button-surface)) padding-box,
67
+ var(--ef-nav-border) border-box;
68
68
  font-weight: 600;
69
69
  font-size: 0.85rem;
70
70
  text-transform: uppercase;
71
71
  letter-spacing: 0.06em;
72
72
  margin-bottom: 6px;
73
73
  border: 2px solid transparent;
74
- color: var(--text-strong);
75
- box-shadow: 0 0 16px rgba(124, 77, 255, 0.25);
74
+ color: var(--ef-nav-text-active);
75
+ box-shadow: var(--ef-menu-item-shadow);
76
76
  cursor: pointer;
77
77
  }
78
78
 
@@ -90,24 +90,6 @@
90
90
  height: 16px;
91
91
  }
92
92
 
93
- :root[data-theme="light"] .ef-menu-item,
94
- :root[data-theme="plain-light"] .ef-menu-item,
95
- :root[data-theme="galaxy"] .ef-menu-item,
96
- :root[data-theme="plain-dark"] .ef-menu-item,
97
- :root[data-theme="system"] .ef-menu-item {
98
- background:
99
- linear-gradient(var(--ef-surface), var(--ef-surface)) padding-box,
100
- var(--ef-border-gradient) border-box;
101
- border-radius: 8px;
102
- border: 2px solid transparent;
103
- padding: 10px 14px;
104
- font-weight: 600;
105
- text-transform: uppercase;
106
- letter-spacing: 0.06em;
107
- box-shadow: 0 0 16px rgba(124, 77, 255, 0.25);
108
- color: var(--text-strong);
109
- }
110
-
111
93
  .ef-menu-item:last-child {
112
94
  margin-bottom: 0;
113
95
  }
@@ -117,8 +99,8 @@
117
99
  }
118
100
 
119
101
  .ef-menu-item:hover {
120
- box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
121
- transform: translateY(-1px);
102
+ box-shadow: var(--ef-menu-item-shadow-hover);
103
+ transform: var(--ef-nav-transform-hover, translateY(-1px));
122
104
  }
123
105
 
124
106
  .ef-menu-group-title {
package/src/components/Tabs.css CHANGED
@@ -15,10 +15,10 @@
15
15
  flex-wrap: wrap;
16
16
  gap: 10px;
17
17
  padding: 10px;
18
- border-radius: 16px;
18
+ border-radius: var(--menu-radius, 16px);
19
19
  background:
20
- linear-gradient(#0b0c1a, #0b0c1a) padding-box,
21
- linear-gradient(135deg, rgba(0, 229, 255, 0.5), rgba(124, 77, 255, 0.5), rgba(255, 77, 210, 0.5)) border-box;
20
+ linear-gradient(var(--ef-tabs-surface), var(--ef-tabs-surface)) padding-box,
21
+ var(--ef-tabs-border) border-box;
22
22
  border: 1px solid transparent;
23
23
  }
24
24
 
@@ -49,7 +49,7 @@
49
49
  width: 2px;
50
50
  height: 22px;
51
51
  border-radius: 999px;
52
- background: linear-gradient(180deg, #00e5ff, #7c4dff, #ff4dd2);
52
+ background: var(--ef-tabs-indicator);
53
53
  }
54
54
 
55
55
  .ef-tabs-content {
@@ -58,11 +58,11 @@
58
58
  }
59
59
 
60
60
  .ef-tabs-content--background {
61
- border-radius: 16px;
61
+ border-radius: var(--menu-radius, 16px);
62
62
  padding: 12px;
63
63
  background:
64
- linear-gradient(#0b0c1a, #0b0c1a) padding-box,
65
- linear-gradient(135deg, rgba(0, 229, 255, 0.35), rgba(124, 77, 255, 0.35), rgba(255, 77, 210, 0.35)) border-box;
64
+ linear-gradient(var(--ef-tabs-content-surface), var(--ef-tabs-content-surface)) padding-box,
65
+ var(--ef-tabs-content-border) border-box;
66
66
  border: 1px solid transparent;
67
67
  }
68
68
 
package/src/theme.css CHANGED
@@ -20,14 +20,35 @@
20
20
  --ef-button-locked-bg: rgba(15, 18, 28, 0.7);
21
21
  --ef-button-locked-border: rgba(255, 255, 255, 0.15);
22
22
  --ef-button-locked-text: rgba(255, 255, 255, 0.7);
23
- --ef-button-danger-border: linear-gradient(135deg, rgba(255, 92, 92, 0.8), rgba(255, 170, 170, 0.7));
24
- --ef-button-danger-text: #ffd6d6;
25
- --ef-button-warning-border: linear-gradient(135deg, rgba(255, 183, 77, 0.85), rgba(255, 221, 128, 0.7));
26
- --ef-button-warning-text: #2b1a00;
27
- --ef-button-info-border: linear-gradient(135deg, rgba(0, 229, 255, 0.7), rgba(124, 220, 255, 0.7));
28
- --ef-button-info-text: #021823;
29
- --ef-button-success-border: linear-gradient(135deg, rgba(76, 255, 200, 0.7), rgba(140, 255, 220, 0.7));
30
- --ef-button-success-text: #041a10;
23
+ --ef-button-danger-border: linear-gradient(135deg, rgba(255, 92, 92, 0.8), rgba(255, 170, 170, 0.7));
24
+ --ef-button-danger-text: #ffd6d6;
25
+ --ef-button-warning-border: linear-gradient(135deg, rgba(255, 183, 77, 0.85), rgba(255, 221, 128, 0.7));
26
+ --ef-button-warning-text: #2b1a00;
27
+ --ef-button-info-border: linear-gradient(135deg, rgba(0, 229, 255, 0.7), rgba(124, 220, 255, 0.7));
28
+ --ef-button-info-text: #021823;
29
+ --ef-button-success-border: linear-gradient(135deg, rgba(76, 255, 200, 0.7), rgba(140, 255, 220, 0.7));
30
+ --ef-button-success-text: #041a10;
31
+ --ef-nav-text: rgba(238, 241, 246, 0.75);
32
+ --ef-nav-text-hover: #eef1f6;
33
+ --ef-nav-text-active: #f6f5ff;
34
+ --ef-nav-surface: rgba(15, 18, 28, 0.7);
35
+ --ef-nav-border: linear-gradient(135deg, #00e5ff, #7c4dff, #ff4dd2, #ffb74d);
36
+ --ef-nav-shadow: none;
37
+ --ef-nav-shadow-hover: 0 0 18px rgba(124, 77, 255, 0.35);
38
+ --ef-nav-shadow-focus: 0 0 20px rgba(124, 77, 255, 0.45);
39
+ --ef-nav-shadow-active: 0 0 24px rgba(124, 77, 255, 0.6);
40
+ --ef-nav-radius: 8px;
41
+ --ef-nav-padding-y: 8px;
42
+ --ef-nav-padding-x: 18px;
43
+ --ef-nav-letter-spacing: 0.08em;
44
+ --ef-nav-transform-hover: translateY(-1px);
45
+ --ef-menu-item-shadow: 0 0 16px rgba(124, 77, 255, 0.25);
46
+ --ef-menu-item-shadow-hover: 0 0 18px rgba(124, 77, 255, 0.35);
47
+ --ef-tabs-surface: #0b0c1a;
48
+ --ef-tabs-border: linear-gradient(135deg, rgba(0, 229, 255, 0.5), rgba(124, 77, 255, 0.5), rgba(255, 77, 210, 0.5));
49
+ --ef-tabs-content-surface: #0b0c1a;
50
+ --ef-tabs-content-border: linear-gradient(135deg, rgba(0, 229, 255, 0.35), rgba(124, 77, 255, 0.35), rgba(255, 77, 210, 0.35));
51
+ --ef-tabs-indicator: linear-gradient(180deg, #00e5ff, #7c4dff, #ff4dd2);
31
52
  --ef-slider-surface: var(--ef-surface);
32
53
  --ef-slider-border-color: var(--line-strong);
33
54
  --ef-slider-track-radius: 6px;
@@ -132,12 +153,28 @@
132
153
  --ef-button-locked-text: rgba(24, 32, 40, 0.6);
133
154
  --ef-button-danger-border: linear-gradient(135deg, rgba(200, 76, 76, 0.7), rgba(255, 138, 138, 0.65));
134
155
  --ef-button-danger-text: #5a0f0f;
135
- --ef-button-warning-border: linear-gradient(135deg, rgba(242, 159, 69, 0.75), rgba(255, 210, 128, 0.7));
136
- --ef-button-warning-text: #4a2c00;
137
- --ef-button-info-border: linear-gradient(135deg, rgba(0, 180, 210, 0.6), rgba(124, 180, 255, 0.6));
138
- --ef-button-info-text: #0b2a3a;
139
- --ef-button-success-border: linear-gradient(135deg, rgba(46, 170, 130, 0.65), rgba(130, 220, 180, 0.65));
140
- --ef-button-success-text: #0b2b1d;
156
+ --ef-button-warning-border: linear-gradient(135deg, rgba(242, 159, 69, 0.75), rgba(255, 210, 128, 0.7));
157
+ --ef-button-warning-text: #4a2c00;
158
+ --ef-button-info-border: linear-gradient(135deg, rgba(0, 180, 210, 0.6), rgba(124, 180, 255, 0.6));
159
+ --ef-button-info-text: #0b2a3a;
160
+ --ef-button-success-border: linear-gradient(135deg, rgba(46, 170, 130, 0.65), rgba(130, 220, 180, 0.65));
161
+ --ef-button-success-text: #0b2b1d;
162
+ --ef-nav-text: rgba(29, 35, 42, 0.8);
163
+ --ef-nav-text-hover: #1d232a;
164
+ --ef-nav-text-active: #1d232a;
165
+ --ef-nav-surface: rgba(255, 255, 255, 0.72);
166
+ --ef-nav-border: var(--ef-border-gradient);
167
+ --ef-nav-shadow: none;
168
+ --ef-nav-shadow-hover: 0 0 16px rgba(31, 122, 140, 0.2);
169
+ --ef-nav-shadow-focus: 0 0 20px rgba(31, 122, 140, 0.24);
170
+ --ef-nav-shadow-active: 0 0 20px rgba(31, 122, 140, 0.26);
171
+ --ef-menu-item-shadow: 0 0 10px rgba(31, 122, 140, 0.12);
172
+ --ef-menu-item-shadow-hover: 0 0 14px rgba(31, 122, 140, 0.18);
173
+ --ef-tabs-surface: #ffffff;
174
+ --ef-tabs-border: linear-gradient(135deg, rgba(0, 229, 255, 0.35), rgba(124, 77, 255, 0.35), rgba(255, 77, 210, 0.35));
175
+ --ef-tabs-content-surface: #ffffff;
176
+ --ef-tabs-content-border: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(124, 77, 255, 0.2), rgba(255, 77, 210, 0.2));
177
+ --ef-tabs-indicator: linear-gradient(180deg, #1f7a8c, #7c4dff, #f29f45);
141
178
  --ef-slider-surface: var(--ef-surface);
142
179
  --ef-slider-border-color: var(--line-strong);
143
180
  --ef-slider-track-radius: 6px;
@@ -229,6 +266,12 @@
229
266
  --ef-button-border-soft: var(--ef-border-gradient-soft);
230
267
  --ef-input-border: var(--ef-border-gradient);
231
268
  --ef-stacked-image-gradient: linear-gradient(135deg, rgba(24, 32, 40, 0.08), rgba(24, 32, 40, 0.15));
269
+ --ef-nav-border: var(--ef-border-gradient);
270
+ --ef-nav-shadow-hover: 0 0 0 1px rgba(24, 32, 40, 0.2);
271
+ --ef-nav-shadow-focus: 0 0 0 2px rgba(24, 32, 40, 0.22);
272
+ --ef-nav-shadow-active: 0 0 0 1px rgba(24, 32, 40, 0.3);
273
+ --ef-menu-item-shadow: none;
274
+ --ef-menu-item-shadow-hover: 0 0 0 1px rgba(24, 32, 40, 0.2);
232
275
  }
233
276
 
234
277
  :root[data-theme="plain-dark"] {
@@ -249,6 +292,16 @@
249
292
  --menu-line: var(--line);
250
293
  --menu-bg-soft: rgba(255, 255, 255, 0.06);
251
294
  --ef-stacked-image-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.12));
295
+ --ef-nav-text: rgba(246, 245, 255, 0.8);
296
+ --ef-nav-text-hover: #f6f5ff;
297
+ --ef-nav-text-active: #f6f5ff;
298
+ --ef-nav-surface: rgba(15, 18, 28, 0.7);
299
+ --ef-nav-border: var(--ef-border-gradient);
300
+ --ef-nav-shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.2);
301
+ --ef-nav-shadow-focus: 0 0 0 2px rgba(255, 255, 255, 0.24);
302
+ --ef-nav-shadow-active: 0 0 0 1px rgba(255, 255, 255, 0.3);
303
+ --ef-menu-item-shadow: none;
304
+ --ef-menu-item-shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.2);
252
305
  }
253
306
 
254
307
 
@@ -277,11 +330,27 @@
277
330
  --ef-toggle-box-radius: 0px;
278
331
  --ef-toggle-check-radius: 0px;
279
332
  --ef-toggle-check-bg: var(--ef-slider-border-color);
280
- --ef-button-surface: var(--ef-surface);
281
- --ef-button-border: var(--ef-border-gradient);
282
- --ef-button-border-soft: var(--ef-border-gradient-soft);
333
+ --ef-button-surface: var(--ef-surface);
334
+ --ef-button-border: var(--ef-border-gradient);
335
+ --ef-button-border-soft: var(--ef-border-gradient-soft);
283
336
  --ef-button-text: #f6eaf2;
284
337
  --ef-button-glow-shadow: 0 0 24px rgba(226, 85, 161, 0.42);
338
+ --ef-nav-text: rgba(246, 234, 242, 0.78);
339
+ --ef-nav-text-hover: #f6eaf2;
340
+ --ef-nav-text-active: #f6eaf2;
341
+ --ef-nav-surface: rgba(27, 11, 24, 0.74);
342
+ --ef-nav-border: var(--ef-border-gradient);
343
+ --ef-nav-shadow: none;
344
+ --ef-nav-shadow-hover: 0 0 16px rgba(226, 85, 161, 0.28);
345
+ --ef-nav-shadow-focus: 0 0 20px rgba(226, 85, 161, 0.34);
346
+ --ef-nav-shadow-active: 0 0 22px rgba(226, 85, 161, 0.42);
347
+ --ef-menu-item-shadow: 0 0 14px rgba(226, 85, 161, 0.2);
348
+ --ef-menu-item-shadow-hover: 0 0 18px rgba(226, 85, 161, 0.3);
349
+ --ef-tabs-surface: #1b0b18;
350
+ --ef-tabs-border: linear-gradient(135deg, rgba(255, 134, 200, 0.45), rgba(226, 85, 161, 0.45), rgba(125, 214, 246, 0.45));
351
+ --ef-tabs-content-surface: #1b0b18;
352
+ --ef-tabs-content-border: linear-gradient(135deg, rgba(255, 134, 200, 0.3), rgba(226, 85, 161, 0.3), rgba(125, 214, 246, 0.3));
353
+ --ef-tabs-indicator: linear-gradient(180deg, #ff86c8, #e255a1, #7dd6f6);
285
354
  --ef-input-surface: #1b0b18;
286
355
  --ef-input-border: var(--ef-border-gradient);
287
356
  --ef-input-text: #f6eaf2;
@@ -340,14 +409,35 @@
340
409
  --menu-muted: #dbc7d7;
341
410
  }
342
411
 
343
- :root[data-theme="galaxy"] {
344
- --ef-slider-track-radius: 6px;
345
- --ef-slider-thumb-radius: 6px;
346
- --ef-slider-thumb-clip: inset(0);
347
- --ef-slider-thumb-mask: none;
348
- --ef-toggle-track-radius: 6px;
349
- --ef-toggle-thumb-radius: 6px;
350
- --ef-toggle-box-radius: 6px;
351
- --ef-toggle-check-radius: 2px;
352
- }
412
+ :root[data-theme="galaxy"] {
413
+ --ef-slider-track-radius: 6px;
414
+ --ef-slider-thumb-radius: 6px;
415
+ --ef-slider-thumb-clip: inset(0);
416
+ --ef-slider-thumb-mask: none;
417
+ --ef-toggle-track-radius: 6px;
418
+ --ef-toggle-thumb-radius: 6px;
419
+ --ef-toggle-box-radius: 6px;
420
+ --ef-toggle-check-radius: 2px;
421
+ }
422
+
423
+ :root[data-theme="system"] {
424
+ color-scheme: light dark;
425
+ }
426
+
427
+ @media (prefers-color-scheme: light) {
428
+ :root[data-theme="system"] {
429
+ --ef-nav-text: rgba(29, 35, 42, 0.8);
430
+ --ef-nav-text-hover: #1d232a;
431
+ --ef-nav-text-active: #1d232a;
432
+ --ef-nav-surface: rgba(255, 255, 255, 0.72);
433
+ --ef-nav-shadow: none;
434
+ --ef-nav-shadow-hover: 0 0 16px rgba(31, 122, 140, 0.2);
435
+ --ef-nav-shadow-focus: 0 0 20px rgba(31, 122, 140, 0.24);
436
+ --ef-nav-shadow-active: 0 0 20px rgba(31, 122, 140, 0.26);
437
+ --ef-menu-item-shadow: 0 0 10px rgba(31, 122, 140, 0.12);
438
+ --ef-menu-item-shadow-hover: 0 0 14px rgba(31, 122, 140, 0.18);
439
+ --ef-tabs-surface: #ffffff;
440
+ --ef-tabs-content-surface: #ffffff;
441
+ }
442
+ }
353
443