@enderfall/ui 0.1.11 → 0.1.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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/Button.css +42 -0
  3. package/src/components/Dropdown.tsx +5 -3
  4. package/src/components/Tabs.tsx +2 -2
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@enderfall/ui",
3
3
  "private": false,
4
- "version": "0.1.11",
4
+ "version": "0.1.14",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",
package/src/components/Button.css CHANGED
@@ -96,6 +96,21 @@
96
96
  gap: 8px;
97
97
  }
98
98
 
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);
103
+ }
104
+
105
+ .ef-button.tab.is-active,
106
+ .ef-button.tab[data-open="true"] {
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
+
99
114
  :root[data-theme="light"] .ef-button.tab,
100
115
  :root[data-theme="plain-light"] .ef-button.tab,
101
116
  :root[data-theme="galaxy"] .ef-button.tab,
@@ -130,6 +145,33 @@
130
145
  transform: translateY(-1px);
131
146
  }
132
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);
173
+ }
174
+
133
175
  .theme-preview {
134
176
  position: relative;
135
177
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
package/src/components/Dropdown.tsx CHANGED
@@ -218,10 +218,12 @@ export const Dropdown = (props: DropdownProps) => {
218
218
  onMouseLeave={scheduleClose}
219
219
  >
220
220
  <Button
221
- className="ef-menu-button"
221
+ className={["ef-menu-button", props.menuOpen === menu.id ? "is-active" : ""]
222
+ .filter(Boolean)
223
+ .join(" ")}
222
224
  type="button"
223
- variant={props.menuOpen === menu.id ? "primary" : "tab"}
224
- subvariant={props.menuOpen === menu.id ? "glow" : "default"}
225
+ variant="tab"
226
+ subvariant="default"
225
227
  data-open={props.menuOpen === menu.id ? "true" : "false"}
226
228
  >
227
229
  {menu.label}
package/src/components/Tabs.tsx CHANGED
@@ -40,8 +40,8 @@ export const Tabs = ({
40
40
  return (
41
41
  <Button
42
42
  key={tab.id}
43
- variant={isActive ? "primary" : "tab"}
44
- subvariant={isActive ? "glow" : "default"}
43
+ variant="tab"
44
+ subvariant="default"
45
45
  className={["ef-tab", isVertical ? "ef-tab--vertical" : "", isActive ? "is-active" : ""]
46
46
  .filter(Boolean)
47
47
  .join(" ")}