@enderfall/ui 0.2.12 → 0.2.14

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 (8) hide show
  1. package/dist/components/Button.d.ts +1 -1
  2. package/dist/components/Button.d.ts.map +1 -1
  3. package/dist/components/Tabs.d.ts.map +1 -1
  4. package/dist/components/Tabs.js +9 -8
  5. package/package.json +1 -1
  6. package/src/components/Button.css +15 -13
  7. package/src/components/UserMenu.css +18 -24
  8. package/src/variables.css +93 -47
package/dist/components/Button.d.ts CHANGED
@@ -5,4 +5,4 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
5
5
  };
6
6
  export declare const Button: ({ variant, subvariant, className, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
7
7
  export {};
8
- //# sourceMappingURL=Button.d.ts.map
8
+ //# sourceMappingURL=Button.d.ts.map
package/dist/components/Button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,KAAK,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3D,OAAO,CAAC,EACJ,SAAS,GACT,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,MAAM,GACN,SAAS,GACT,KAAK,CAAC;IACV,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,8CAAsE,WAAW,4CAYvG,CAAC"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,KAAK,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3D,OAAO,CAAC,EACJ,SAAS,GACT,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,MAAM,GACN,SAAS,GACT,KAAK,CAAC;IACV,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,YAAY,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,8CAAsE,WAAW,4CAavG,CAAC"}
package/dist/components/Tabs.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/components/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,SAAS,CAAC;CACjD,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,sHASlB,SAAS,4CA0CX,CAAC"}
1
+ {"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/components/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,SAAS,CAAC;CACjD,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,sHASlB,SAAS,4CAwDX,CAAC"}
package/dist/components/Tabs.js CHANGED
@@ -1,18 +1,19 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Button } from "./Button";
3
+ import { Panel } from "./Panel";
3
4
  export const Tabs = ({ tabs, activeTab, onChange, orientation = "horizontal", showContentBackground = false, className, tabContentClassName, renderTabContent, }) => {
4
5
  const isVertical = orientation === "vertical";
5
6
  const active = tabs.find((tab) => tab.id === activeTab);
6
- return (_jsxs("div", { className: ["ef-tabs", isVertical ? "ef-tabs--vertical" : "", className].filter(Boolean).join(" "), children: [_jsx("div", { className: ["ef-tabs-list", isVertical ? "ef-tabs-list--vertical" : ""].filter(Boolean).join(" "), children: tabs.map((tab) => {
7
+ return (_jsxs("div", { className: ["ef-tabs", isVertical ? "ef-tabs--vertical" : "", className].filter(Boolean).join(" "), children: [_jsx(Panel, { variant: "card", borderWidth: 1, className: ["ef-tabs-list", "ef-tabs-list-panel", isVertical ? "ef-tabs-list--vertical" : ""]
8
+ .filter(Boolean)
9
+ .join(" "), children: tabs.map((tab) => {
7
10
  const isActive = tab.id === activeTab;
8
- return (_jsxs(Button, { variant: "tab", subvariant: "default", className: ["ef-tab", isVertical ? "ef-tab--vertical" : "", isActive ? "is-active" : ""]
11
+ return (_jsxs(Button, { variant: isActive ? "primary" : "tab", subvariant: isActive ? "glow" : "hover-glow", className: ["ef-tab", isVertical ? "ef-tab--vertical" : "", isActive ? "is-active" : ""]
9
12
  .filter(Boolean)
10
13
  .join(" "), onClick: () => onChange(tab.id), children: [tab.icon ? _jsx("span", { className: "ef-tab-icon", children: tab.icon }) : null, _jsx("span", { className: "ef-tab-text", children: tab.label }), isVertical && isActive ? _jsx("span", { className: "ef-tab-active-indicator" }) : null] }, tab.id));
11
- }) }), (active?.content || renderTabContent) && (_jsx("div", { className: [
12
- "ef-tabs-content",
13
- showContentBackground ? "ef-tabs-content--background" : "",
14
- tabContentClassName,
15
- ]
14
+ }) }), (active?.content || renderTabContent) && (showContentBackground ? (_jsx(Panel, { variant: "card", borderWidth: 1, className: ["ef-tabs-content", "ef-tabs-content-panel", tabContentClassName]
15
+ .filter(Boolean)
16
+ .join(" "), children: renderTabContent ? renderTabContent(active) : active?.content })) : (_jsx("div", { className: ["ef-tabs-content", tabContentClassName]
16
17
  .filter(Boolean)
17
- .join(" "), children: renderTabContent ? renderTabContent(active) : active?.content }))] }));
18
+ .join(" "), children: renderTabContent ? renderTabContent(active) : active?.content })))] }));
18
19
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@enderfall/ui",
3
3
  "private": false,
4
- "version": "0.2.12",
4
+ "version": "0.2.14",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",
package/src/components/Button.css CHANGED
@@ -30,13 +30,13 @@
30
30
 
31
31
  .ef-button--glow:not(:disabled):hover,
32
32
  .ef-button--glow:focus-visible {
33
- box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
33
+ box-shadow: var(--ef-button-hover-shadow, 0 0 18px rgba(124, 77, 255, 0.35));
34
34
  animation: none;
35
35
  }
36
36
 
37
37
  .ef-button--hover-glow:not(:disabled):hover,
38
38
  .ef-button--hover-glow:focus-visible {
39
- box-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
39
+ box-shadow: var(--ef-button-hover-shadow, 0 0 18px rgba(124, 77, 255, 0.35));
40
40
  animation: none;
41
41
  }
42
42
 
@@ -99,7 +99,7 @@
99
99
  }
100
100
 
101
101
  .ef-button.tab {
102
- color: var(--ef-nav-text);
102
+ color: var(--ef-tab-button-text, var(--ef-nav-text));
103
103
  text-decoration: none;
104
104
  font-size: 1rem;
105
105
  font-weight: 600;
@@ -109,8 +109,8 @@
109
109
  border: 2px solid transparent;
110
110
  text-transform: uppercase;
111
111
  letter-spacing: var(--ef-nav-letter-spacing, 0.08em);
112
- background: var(--ef-nav-surface);
113
- box-shadow: var(--ef-nav-shadow);
112
+ background: var(--ef-tab-button-surface, var(--ef-nav-surface));
113
+ box-shadow: var(--ef-tab-button-shadow, var(--ef-nav-shadow));
114
114
  cursor: pointer;
115
115
  font-family: inherit;
116
116
  display: inline-flex;
@@ -120,24 +120,26 @@
120
120
  }
121
121
 
122
122
  .ef-button.tab:focus-visible {
123
- color: var(--ef-nav-text-hover);
124
- box-shadow: var(--ef-nav-shadow-focus);
123
+ color: var(--ef-tab-button-text-hover, var(--ef-nav-text-hover));
124
+ box-shadow: var(--ef-tab-button-shadow-focus, var(--ef-nav-shadow-focus));
125
125
  transform: var(--ef-nav-transform-hover, translateY(-1px));
126
+ background: var(--ef-tab-button-surface-hover, var(--ef-tab-button-surface, var(--ef-nav-surface)));
126
127
  }
127
128
 
128
129
  .ef-button.tab.is-active,
129
130
  .ef-button.tab[data-open="true"] {
130
131
  background:
131
- linear-gradient(var(--ef-button-surface), var(--ef-button-surface)) padding-box,
132
- var(--ef-nav-border) border-box;
133
- color: var(--ef-nav-text-active);
134
- box-shadow: var(--ef-nav-shadow-active);
132
+ linear-gradient(var(--ef-tab-button-surface-active, var(--ef-button-surface)), var(--ef-tab-button-surface-active, var(--ef-button-surface))) padding-box,
133
+ var(--ef-tab-button-border-active, var(--ef-nav-border)) border-box;
134
+ color: var(--ef-tab-button-text-active, var(--ef-nav-text-active));
135
+ box-shadow: var(--ef-tab-button-shadow-active, var(--ef-nav-shadow-active));
135
136
  }
136
137
 
137
138
  .ef-button.tab:hover {
138
- color: var(--ef-nav-text-hover);
139
- box-shadow: var(--ef-nav-shadow-hover);
139
+ color: var(--ef-tab-button-text-hover, var(--ef-nav-text-hover));
140
+ box-shadow: var(--ef-tab-button-shadow-hover, var(--ef-nav-shadow-hover));
140
141
  transform: var(--ef-nav-transform-hover, translateY(-1px));
142
+ background: var(--ef-tab-button-surface-hover, var(--ef-tab-button-surface, var(--ef-nav-surface)));
141
143
  }
142
144
 
143
145
  .theme-preview {
package/src/components/UserMenu.css CHANGED
@@ -30,15 +30,15 @@
30
30
  border-bottom-color: transparent;
31
31
  }
32
32
 
33
- .avatar {
34
- width: 32px;
35
- height: 32px;
36
- border-radius: 50%;
37
- background: rgba(255, 255, 255, 0.12);
38
- display: grid;
39
- place-items: center;
40
- overflow: hidden;
41
- flex-shrink: 0;
33
+ .avatar {
34
+ width: 32px;
35
+ height: 32px;
36
+ border-radius: var(--ef-control-radius, 12px);
37
+ background: rgba(255, 255, 255, 0.12);
38
+ display: grid;
39
+ place-items: center;
40
+ overflow: hidden;
41
+ flex-shrink: 0;
42
42
  }
43
43
 
44
44
  .avatar img {
@@ -183,15 +183,15 @@
183
183
  padding: 10px 12px;
184
184
  }
185
185
 
186
- .dropdown-avatar {
187
- width: 34px;
188
- height: 34px;
189
- border-radius: 10px;
190
- background: rgba(255, 255, 255, 0.12);
191
- display: grid;
192
- place-items: center;
193
- overflow: hidden;
194
- font-size: 0.7rem;
186
+ .dropdown-avatar {
187
+ width: 34px;
188
+ height: 34px;
189
+ border-radius: var(--ef-control-radius, 12px);
190
+ background: rgba(255, 255, 255, 0.12);
191
+ display: grid;
192
+ place-items: center;
193
+ overflow: hidden;
194
+ font-size: 0.7rem;
195
195
  font-weight: 700;
196
196
  text-transform: uppercase;
197
197
  }
@@ -260,12 +260,6 @@
260
260
  filter: brightness(1.1);
261
261
  }
262
262
 
263
- :root[data-theme="atelier"] .avatar,
264
- :root[data-theme="atelier"] .dropdown-avatar,
265
- :root[data-theme="atelier"] .dropdown-action {
266
- border-radius: 0;
267
- }
268
-
269
263
  @media (max-width: 760px) {
270
264
  .user-button {
271
265
  gap: 8px;
package/src/variables.css CHANGED
@@ -16,12 +16,12 @@
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 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);
19
+ --ef-button-glow-shadow: 0 0 14px rgba(0, 229, 255, 0.26), 0 0 32px rgba(124, 77, 255, 0.32),
20
+ 0 0 44px rgba(255, 77, 210, 0.28);
21
+ --ef-button-glow-shadow-mid: 0 0 16px rgba(0, 229, 255, 0.32), 0 0 36px rgba(124, 77, 255, 0.38),
22
+ 0 0 50px rgba(255, 77, 210, 0.34);
23
+ --ef-button-glow-shadow-strong: 0 0 18px rgba(0, 229, 255, 0.38), 0 0 42px rgba(124, 77, 255, 0.46),
24
+ 0 0 58px rgba(255, 77, 210, 0.4);
25
25
  --ef-button-glow-pulse-duration: 2200ms;
26
26
  --ef-button-glow-surge-duration: 420ms;
27
27
  --ef-button-hover-shadow: 0 0 18px rgba(124, 77, 255, 0.35);
@@ -52,6 +52,17 @@
52
52
  --ef-nav-padding-x: 18px;
53
53
  --ef-nav-letter-spacing: 0.08em;
54
54
  --ef-nav-transform-hover: translateY(-1px);
55
+ --ef-tab-button-text: var(--ef-nav-text);
56
+ --ef-tab-button-text-hover: var(--ef-nav-text-hover);
57
+ --ef-tab-button-text-active: var(--ef-nav-text-active);
58
+ --ef-tab-button-surface: var(--ef-nav-surface);
59
+ --ef-tab-button-surface-hover: var(--ef-nav-surface);
60
+ --ef-tab-button-surface-active: var(--ef-button-surface);
61
+ --ef-tab-button-border-active: var(--ef-nav-border);
62
+ --ef-tab-button-shadow: var(--ef-nav-shadow);
63
+ --ef-tab-button-shadow-hover: var(--ef-nav-shadow-hover);
64
+ --ef-tab-button-shadow-focus: var(--ef-nav-shadow-focus);
65
+ --ef-tab-button-shadow-active: var(--ef-nav-shadow-active);
55
66
  --ef-menu-item-shadow: 0 0 16px rgba(124, 77, 255, 0.25);
56
67
  --ef-menu-item-shadow-hover: 0 0 18px rgba(124, 77, 255, 0.35);
57
68
  --ef-tabs-surface: #0b0c1a;
@@ -170,16 +181,16 @@
170
181
  rgba(255, 183, 77, 0.6)
171
182
  );
172
183
  --ef-button-text: #1d232a;
173
- --ef-button-glow-shadow: 0 0 8px rgba(0, 160, 188, 0.12), 0 0 20px rgba(124, 77, 255, 0.16),
174
- 0 0 28px rgba(255, 77, 210, 0.12);
175
- --ef-button-glow-shadow-mid: 0 0 10px rgba(0, 160, 188, 0.16), 0 0 24px rgba(124, 77, 255, 0.2),
176
- 0 0 34px rgba(255, 77, 210, 0.16);
177
- --ef-button-glow-shadow-strong: 0 0 12px rgba(0, 160, 188, 0.2), 0 0 30px rgba(124, 77, 255, 0.26),
178
- 0 0 40px rgba(255, 77, 210, 0.22);
184
+ --ef-button-glow-shadow: 0 0 10px rgba(31, 122, 140, 0.2), 0 0 24px rgba(124, 77, 255, 0.24),
185
+ 0 0 34px rgba(242, 159, 69, 0.2);
186
+ --ef-button-glow-shadow-mid: 0 0 12px rgba(31, 122, 140, 0.26), 0 0 28px rgba(124, 77, 255, 0.3),
187
+ 0 0 40px rgba(242, 159, 69, 0.26);
188
+ --ef-button-glow-shadow-strong: 0 0 14px rgba(31, 122, 140, 0.32), 0 0 34px rgba(124, 77, 255, 0.38),
189
+ 0 0 48px rgba(242, 159, 69, 0.32);
179
190
  --ef-button-glow-pulse-duration: 2300ms;
180
191
  --ef-button-glow-surge-duration: 380ms;
181
- --ef-button-hover-shadow: 0 0 14px rgba(31, 122, 140, 0.18);
182
- --ef-button-focus-shadow: 0 0 18px rgba(31, 122, 140, 0.24);
192
+ --ef-button-hover-shadow: 0 0 16px rgba(31, 122, 140, 0.24);
193
+ --ef-button-focus-shadow: 0 0 20px rgba(31, 122, 140, 0.32);
183
194
  --ef-button-hover-transform: translateY(-1px);
184
195
  --ef-button-locked-bg: rgba(255, 255, 255, 0.8);
185
196
  --ef-button-locked-border: rgba(24, 32, 40, 0.18);
@@ -201,6 +212,14 @@
201
212
  --ef-nav-shadow-hover: 0 0 16px rgba(31, 122, 140, 0.2);
202
213
  --ef-nav-shadow-focus: 0 0 20px rgba(31, 122, 140, 0.24);
203
214
  --ef-nav-shadow-active: 0 0 20px rgba(31, 122, 140, 0.26);
215
+ --ef-tab-button-surface: rgba(228, 236, 248, 0.96);
216
+ --ef-tab-button-surface-hover: rgba(216, 226, 241, 0.98);
217
+ --ef-tab-button-surface-active: #ffffff;
218
+ --ef-tab-button-border-active: var(--ef-nav-border);
219
+ --ef-tab-button-shadow: 0 2px 8px rgba(24, 32, 40, 0.08);
220
+ --ef-tab-button-shadow-hover: 0 0 16px rgba(31, 122, 140, 0.24);
221
+ --ef-tab-button-shadow-focus: 0 0 20px rgba(31, 122, 140, 0.32);
222
+ --ef-tab-button-shadow-active: 0 0 20px rgba(31, 122, 140, 0.26);
204
223
  --ef-menu-item-shadow: 0 0 10px rgba(31, 122, 140, 0.12);
205
224
  --ef-menu-item-shadow-hover: 0 0 14px rgba(31, 122, 140, 0.18);
206
225
  --ef-tabs-surface: #ffffff;
@@ -304,11 +323,11 @@
304
323
  );
305
324
  --ef-button-border: var(--ef-border-gradient);
306
325
  --ef-button-border-soft: var(--ef-border-gradient-soft);
307
- --ef-button-hover-shadow: 0 0 0 1px rgba(24, 32, 40, 0.2);
308
- --ef-button-focus-shadow: 0 0 0 2px rgba(24, 32, 40, 0.22);
309
- --ef-button-glow-shadow: 0 0 0 1px rgba(24, 32, 40, 0.2);
310
- --ef-button-glow-shadow-mid: 0 0 0 1px rgba(24, 32, 40, 0.26);
311
- --ef-button-glow-shadow-strong: 0 0 0 2px rgba(24, 32, 40, 0.28);
326
+ --ef-button-hover-shadow: 0 0 12px rgba(24, 32, 40, 0.2);
327
+ --ef-button-focus-shadow: 0 0 16px rgba(24, 32, 40, 0.26);
328
+ --ef-button-glow-shadow: 0 0 10px rgba(24, 32, 40, 0.16), 0 0 22px rgba(24, 32, 40, 0.22);
329
+ --ef-button-glow-shadow-mid: 0 0 12px rgba(24, 32, 40, 0.2), 0 0 28px rgba(24, 32, 40, 0.28);
330
+ --ef-button-glow-shadow-strong: 0 0 14px rgba(24, 32, 40, 0.26), 0 0 34px rgba(24, 32, 40, 0.34);
312
331
  --ef-button-glow-pulse-duration: 1800ms;
313
332
  --ef-button-glow-surge-duration: 220ms;
314
333
  --ef-input-border: var(--ef-border-gradient);
@@ -329,9 +348,20 @@
329
348
  --ef-stacked-image-inset-shadow: inset 0 0 22px rgba(24, 32, 40, 0.08);
330
349
  --ef-stacked-image-gradient: linear-gradient(135deg, rgba(24, 32, 40, 0.06), rgba(24, 32, 40, 0.12));
331
350
  --ef-nav-border: var(--ef-border-gradient);
351
+ --ef-nav-text: rgba(24, 32, 40, 0.88);
352
+ --ef-nav-text-hover: rgba(24, 32, 40, 0.98);
353
+ --ef-nav-text-active: rgba(24, 32, 40, 0.98);
332
354
  --ef-nav-shadow-hover: 0 0 0 1px rgba(24, 32, 40, 0.2);
333
355
  --ef-nav-shadow-focus: 0 0 0 2px rgba(24, 32, 40, 0.22);
334
356
  --ef-nav-shadow-active: 0 0 0 1px rgba(24, 32, 40, 0.3);
357
+ --ef-tab-button-surface: rgba(206, 206, 206, 0.96);
358
+ --ef-tab-button-surface-hover: rgba(194, 194, 194, 1);
359
+ --ef-tab-button-surface-active: #ffffff;
360
+ --ef-tab-button-border-active: linear-gradient(135deg, rgba(24, 32, 40, 0.42), rgba(24, 32, 40, 0.42));
361
+ --ef-tab-button-shadow: 0 3px 12px rgba(24, 32, 40, 0.2);
362
+ --ef-tab-button-shadow-hover: 0 0 14px rgba(24, 32, 40, 0.24);
363
+ --ef-tab-button-shadow-focus: 0 0 18px rgba(24, 32, 40, 0.28);
364
+ --ef-tab-button-shadow-active: 0 0 0 1px rgba(24, 32, 40, 0.3);
335
365
  --ef-menu-item-shadow: none;
336
366
  --ef-menu-item-shadow-hover: 0 0 0 1px rgba(24, 32, 40, 0.2);
337
367
  --ef-tabs-surface: #ffffff;
@@ -355,11 +385,11 @@
355
385
  );
356
386
  --ef-button-border: var(--ef-border-gradient);
357
387
  --ef-button-border-soft: var(--ef-border-gradient-soft);
358
- --ef-button-hover-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
359
- --ef-button-focus-shadow: 0 0 0 2px rgba(255, 255, 255, 0.24);
360
- --ef-button-glow-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
361
- --ef-button-glow-shadow-mid: 0 0 0 1px rgba(255, 255, 255, 0.26);
362
- --ef-button-glow-shadow-strong: 0 0 0 2px rgba(255, 255, 255, 0.28);
388
+ --ef-button-hover-shadow: 0 0 12px rgba(255, 255, 255, 0.22);
389
+ --ef-button-focus-shadow: 0 0 16px rgba(255, 255, 255, 0.3);
390
+ --ef-button-glow-shadow: 0 0 8px rgba(255, 255, 255, 0.14);
391
+ --ef-button-glow-shadow-mid: 0 0 10px rgba(255, 255, 255, 0.2);
392
+ --ef-button-glow-shadow-strong: 0 0 14px rgba(255, 255, 255, 0.28);
363
393
  --ef-button-glow-pulse-duration: 1800ms;
364
394
  --ef-button-glow-surge-duration: 220ms;
365
395
  --ef-input-border: var(--ef-border-gradient);
@@ -428,16 +458,16 @@
428
458
  --ef-button-border: var(--ef-border-gradient);
429
459
  --ef-button-border-soft: var(--ef-border-gradient-soft);
430
460
  --ef-button-text: #f6eaf2;
431
- --ef-button-glow-shadow: 0 0 10px rgba(255, 134, 200, 0.2), 0 0 24px rgba(226, 85, 161, 0.24),
432
- 0 0 34px rgba(125, 214, 246, 0.2);
433
- --ef-button-glow-shadow-mid: 0 0 12px rgba(255, 134, 200, 0.26), 0 0 30px rgba(226, 85, 161, 0.3),
434
- 0 0 40px rgba(125, 214, 246, 0.24);
435
- --ef-button-glow-shadow-strong: 0 0 14px rgba(255, 134, 200, 0.34), 0 0 36px rgba(226, 85, 161, 0.38),
436
- 0 0 48px rgba(125, 214, 246, 0.32);
461
+ --ef-button-glow-shadow: 0 0 10px rgba(255, 134, 200, 0.28), 0 0 26px rgba(226, 85, 161, 0.32),
462
+ 0 0 36px rgba(125, 214, 246, 0.24);
463
+ --ef-button-glow-shadow-mid: 0 0 12px rgba(255, 134, 200, 0.34), 0 0 32px rgba(226, 85, 161, 0.4),
464
+ 0 0 44px rgba(125, 214, 246, 0.32);
465
+ --ef-button-glow-shadow-strong: 0 0 14px rgba(255, 134, 200, 0.42), 0 0 38px rgba(226, 85, 161, 0.48),
466
+ 0 0 52px rgba(125, 214, 246, 0.4);
437
467
  --ef-button-glow-pulse-duration: 2100ms;
438
468
  --ef-button-glow-surge-duration: 420ms;
439
- --ef-button-hover-shadow: 0 0 18px rgba(226, 85, 161, 0.3);
440
- --ef-button-focus-shadow: 0 0 22px rgba(226, 85, 161, 0.38);
469
+ --ef-button-hover-shadow: 0 0 18px rgba(226, 85, 161, 0.34);
470
+ --ef-button-focus-shadow: 0 0 22px rgba(226, 85, 161, 0.42);
441
471
  --ef-button-hover-transform: translateY(-1px);
442
472
  --ef-nav-text: rgba(246, 234, 242, 0.78);
443
473
  --ef-nav-radius: 0px;
@@ -449,6 +479,14 @@
449
479
  --ef-nav-shadow-hover: 0 0 16px rgba(226, 85, 161, 0.28);
450
480
  --ef-nav-shadow-focus: 0 0 20px rgba(226, 85, 161, 0.34);
451
481
  --ef-nav-shadow-active: 0 0 22px rgba(226, 85, 161, 0.42);
482
+ --ef-tab-button-surface: rgba(52, 20, 45, 0.86);
483
+ --ef-tab-button-surface-hover: rgba(62, 24, 54, 0.92);
484
+ --ef-tab-button-surface-active: #1b0b18;
485
+ --ef-tab-button-border-active: var(--ef-nav-border);
486
+ --ef-tab-button-shadow: 0 0 0 1px rgba(255, 134, 200, 0.12);
487
+ --ef-tab-button-shadow-hover: 0 0 16px rgba(226, 85, 161, 0.28);
488
+ --ef-tab-button-shadow-focus: 0 0 20px rgba(226, 85, 161, 0.34);
489
+ --ef-tab-button-shadow-active: 0 0 22px rgba(226, 85, 161, 0.42);
452
490
  --ef-menu-item-shadow: 0 0 14px rgba(226, 85, 161, 0.2);
453
491
  --ef-menu-item-shadow-hover: 0 0 18px rgba(226, 85, 161, 0.3);
454
492
  --ef-tabs-surface: #1b0b18;
@@ -566,14 +604,22 @@ body.ef-galaxy-light {
566
604
  --ef-nav-shadow-hover: 0 0 16px rgba(124, 77, 255, 0.24);
567
605
  --ef-nav-shadow-focus: 0 0 20px rgba(124, 77, 255, 0.28);
568
606
  --ef-nav-shadow-active: 0 0 20px rgba(124, 77, 255, 0.3);
569
- --ef-button-hover-shadow: 0 0 14px rgba(124, 77, 255, 0.22);
570
- --ef-button-focus-shadow: 0 0 18px rgba(124, 77, 255, 0.28);
571
- --ef-button-glow-shadow: 0 0 8px rgba(0, 229, 255, 0.16), 0 0 20px rgba(124, 77, 255, 0.2),
572
- 0 0 28px rgba(255, 77, 210, 0.16);
573
- --ef-button-glow-shadow-mid: 0 0 10px rgba(0, 229, 255, 0.22), 0 0 24px rgba(124, 77, 255, 0.26),
574
- 0 0 34px rgba(255, 77, 210, 0.2);
575
- --ef-button-glow-shadow-strong: 0 0 12px rgba(0, 229, 255, 0.28), 0 0 30px rgba(124, 77, 255, 0.34),
607
+ --ef-tab-button-surface: rgba(222, 222, 222, 0.96);
608
+ --ef-tab-button-surface-hover: rgba(210, 210, 210, 1);
609
+ --ef-tab-button-surface-active: #ffffff;
610
+ --ef-tab-button-border-active: var(--ef-nav-border);
611
+ --ef-tab-button-shadow: 0 2px 8px rgba(24, 32, 40, 0.08);
612
+ --ef-tab-button-shadow-hover: 0 0 16px rgba(124, 77, 255, 0.24);
613
+ --ef-tab-button-shadow-focus: 0 0 20px rgba(124, 77, 255, 0.28);
614
+ --ef-tab-button-shadow-active: 0 0 20px rgba(124, 77, 255, 0.3);
615
+ --ef-button-hover-shadow: 0 0 16px rgba(124, 77, 255, 0.26);
616
+ --ef-button-focus-shadow: 0 0 20px rgba(124, 77, 255, 0.32);
617
+ --ef-button-glow-shadow: 0 0 12px rgba(0, 229, 255, 0.24), 0 0 28px rgba(124, 77, 255, 0.3),
576
618
  0 0 40px rgba(255, 77, 210, 0.26);
619
+ --ef-button-glow-shadow-mid: 0 0 14px rgba(0, 229, 255, 0.3), 0 0 34px rgba(124, 77, 255, 0.36),
620
+ 0 0 48px rgba(255, 77, 210, 0.32);
621
+ --ef-button-glow-shadow-strong: 0 0 16px rgba(0, 229, 255, 0.36), 0 0 40px rgba(124, 77, 255, 0.44),
622
+ 0 0 56px rgba(255, 77, 210, 0.38);
577
623
  --ef-button-glow-pulse-duration: 2200ms;
578
624
  --ef-button-glow-surge-duration: 400ms;
579
625
  --ef-menu-item-shadow: 0 0 10px rgba(124, 77, 255, 0.15);
@@ -599,14 +645,14 @@ body.ef-galaxy-light {
599
645
  --ef-nav-shadow-hover: 0 0 16px rgba(31, 122, 140, 0.2);
600
646
  --ef-nav-shadow-focus: 0 0 20px rgba(31, 122, 140, 0.24);
601
647
  --ef-nav-shadow-active: 0 0 20px rgba(31, 122, 140, 0.26);
602
- --ef-button-hover-shadow: 0 0 14px rgba(31, 122, 140, 0.18);
603
- --ef-button-focus-shadow: 0 0 18px rgba(31, 122, 140, 0.24);
604
- --ef-button-glow-shadow: 0 0 8px rgba(0, 160, 188, 0.12), 0 0 20px rgba(124, 77, 255, 0.16),
605
- 0 0 28px rgba(255, 77, 210, 0.12);
606
- --ef-button-glow-shadow-mid: 0 0 10px rgba(0, 160, 188, 0.16), 0 0 24px rgba(124, 77, 255, 0.2),
607
- 0 0 34px rgba(255, 77, 210, 0.16);
608
- --ef-button-glow-shadow-strong: 0 0 12px rgba(0, 160, 188, 0.2), 0 0 30px rgba(124, 77, 255, 0.26),
609
- 0 0 40px rgba(255, 77, 210, 0.22);
648
+ --ef-button-hover-shadow: 0 0 16px rgba(31, 122, 140, 0.24);
649
+ --ef-button-focus-shadow: 0 0 20px rgba(31, 122, 140, 0.32);
650
+ --ef-button-glow-shadow: 0 0 8px rgba(31, 122, 140, 0.16), 0 0 20px rgba(124, 77, 255, 0.18),
651
+ 0 0 28px rgba(242, 159, 69, 0.14);
652
+ --ef-button-glow-shadow-mid: 0 0 10px rgba(31, 122, 140, 0.22), 0 0 24px rgba(124, 77, 255, 0.24),
653
+ 0 0 34px rgba(242, 159, 69, 0.18);
654
+ --ef-button-glow-shadow-strong: 0 0 12px rgba(31, 122, 140, 0.28), 0 0 30px rgba(124, 77, 255, 0.3),
655
+ 0 0 40px rgba(242, 159, 69, 0.24);
610
656
  --ef-button-glow-pulse-duration: 2300ms;
611
657
  --ef-button-glow-surge-duration: 380ms;
612
658
  --ef-stacked-card-bg: rgba(255, 255, 255, 0.94);