@slyxup/ui 0.2.2 → 0.2.3
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.
- package/.turbo/turbo-build.log +1 -1
- package/CHANGELOG.md +9 -0
- package/README.md +67 -3
- package/dist/components/SignIn/SignIn.d.ts +3 -1
- package/dist/components/SignIn/SignIn.d.ts.map +1 -1
- package/dist/components/SignIn/SignIn.js +2 -10
- package/dist/components/SignIn/SignIn.js.map +1 -1
- package/dist/components/SignUp/SignUp.d.ts.map +1 -1
- package/dist/components/SignUp/SignUp.js +1 -9
- package/dist/components/SignUp/SignUp.js.map +1 -1
- package/dist/components/UserProfile/UserProfile.d.ts +8 -2
- package/dist/components/UserProfile/UserProfile.d.ts.map +1 -1
- package/dist/components/UserProfile/UserProfile.js +200 -6
- package/dist/components/UserProfile/UserProfile.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/styles.d.ts +6 -3
- package/dist/styles.d.ts.map +1 -1
- package/dist/styles.js +194 -73
- package/dist/styles.js.map +1 -1
- package/package.json +2 -2
- package/src/components/SignIn/SignIn.tsx +18 -15
- package/src/components/SignUp/SignUp.tsx +1 -11
- package/src/components/UserProfile/UserProfile.tsx +536 -56
- package/src/index.ts +4 -1
- package/src/styles.ts +194 -73
package/src/styles.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* SlyxUp UI — design tokens + stylesheet.
|
|
3
|
-
* Injected
|
|
3
|
+
* Injected automatically by every SlyxUp component. Theme by overriding
|
|
4
|
+
* CSS variables on :root or .slyxup-scope.
|
|
4
5
|
*/
|
|
5
6
|
|
|
6
7
|
export const FONT_LINK = `<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">`;
|
|
@@ -9,35 +10,62 @@ export const CSS = `
|
|
|
9
10
|
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
|
|
10
11
|
|
|
11
12
|
.slyxup-root {
|
|
13
|
+
/* ── Tokens ── */
|
|
12
14
|
--slx-accent: #5b5bd6;
|
|
13
15
|
--slx-accent-hover: #4c4cc4;
|
|
14
|
-
--slx-accent-soft: rgba(91, 91, 214, 0.
|
|
16
|
+
--slx-accent-soft: rgba(91, 91, 214, 0.12);
|
|
15
17
|
--slx-bg: #ffffff;
|
|
18
|
+
--slx-bg-subtle: #f7f7fb;
|
|
16
19
|
--slx-bg-page: #e9eaf6;
|
|
17
20
|
--slx-ink: #16161d;
|
|
21
|
+
--slx-ink-strong: #0c0c12;
|
|
18
22
|
--slx-muted: #6f6f7b;
|
|
19
|
-
--slx-border: #
|
|
23
|
+
--slx-border: #e3e3ee;
|
|
24
|
+
--slx-border-strong: #d3d3e2;
|
|
20
25
|
--slx-danger: #d64550;
|
|
21
|
-
--slx-
|
|
26
|
+
--slx-success: #1f9d55;
|
|
27
|
+
--slx-radius-sm: 8px;
|
|
28
|
+
--slx-radius: 10px;
|
|
29
|
+
--slx-radius-lg: 14px;
|
|
22
30
|
--slx-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
23
31
|
--slx-display: "Space Grotesk", "DM Sans", sans-serif;
|
|
24
32
|
--slx-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
33
|
+
--slx-shadow-card:
|
|
34
|
+
0 1px 2px rgba(18,18,28,.05),
|
|
35
|
+
0 8px 24px -6px rgba(18,18,28,.09),
|
|
36
|
+
0 24px 64px -16px rgba(18,18,28,.13);
|
|
37
|
+
--slx-shadow-pop:
|
|
38
|
+
0 2px 6px rgba(18,18,28,.08),
|
|
39
|
+
0 16px 48px -12px rgba(18,18,28,.18);
|
|
25
40
|
|
|
26
41
|
font-family: var(--slx-font);
|
|
27
42
|
color: var(--slx-ink);
|
|
28
43
|
-webkit-font-smoothing: antialiased;
|
|
44
|
+
text-rendering: optimizeLegibility;
|
|
45
|
+
font-feature-settings: "cv11", "ss01";
|
|
29
46
|
}
|
|
30
47
|
@media (prefers-color-scheme: dark) {
|
|
31
48
|
.slyxup-root:not(.slyxup-light) {
|
|
32
49
|
--slx-accent: #8484f2;
|
|
33
50
|
--slx-accent-hover: #9696f5;
|
|
34
|
-
--slx-accent-soft: rgba(132, 132, 242, 0.
|
|
35
|
-
--slx-bg: #
|
|
36
|
-
--slx-bg-
|
|
37
|
-
--slx-
|
|
51
|
+
--slx-accent-soft: rgba(132, 132, 242, 0.16);
|
|
52
|
+
--slx-bg: #17171f;
|
|
53
|
+
--slx-bg-subtle: #1e1e28;
|
|
54
|
+
--slx-bg-page: #101016;
|
|
55
|
+
--slx-ink: #f0f0f4;
|
|
56
|
+
--slx-ink-strong: #ffffff;
|
|
38
57
|
--slx-muted: #9a9aa6;
|
|
39
|
-
--slx-border: #
|
|
58
|
+
--slx-border: #292935;
|
|
59
|
+
--slx-border-strong: #343442;
|
|
40
60
|
--slx-danger: #f0737d;
|
|
61
|
+
--slx-success: #4ade80;
|
|
62
|
+
--slx-shadow-card:
|
|
63
|
+
0 1px 2px rgba(0,0,0,.25),
|
|
64
|
+
0 12px 32px -8px rgba(0,0,0,.5),
|
|
65
|
+
0 32px 72px -20px rgba(0,0,0,.55);
|
|
66
|
+
--slx-shadow-pop:
|
|
67
|
+
0 4px 12px rgba(0,0,0,.4),
|
|
68
|
+
0 24px 56px -12px rgba(0,0,0,.6);
|
|
41
69
|
}
|
|
42
70
|
}
|
|
43
71
|
|
|
@@ -48,6 +76,15 @@ export const CSS = `
|
|
|
48
76
|
40%, 60% { transform: translateX(4px); }
|
|
49
77
|
}
|
|
50
78
|
@keyframes slx-spin { to { transform: rotate(360deg); } }
|
|
79
|
+
@keyframes slx-rise {
|
|
80
|
+
from { opacity: 0; transform: translateY(8px) scale(.985); }
|
|
81
|
+
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
82
|
+
}
|
|
83
|
+
@keyframes slx-pop {
|
|
84
|
+
0% { transform: scale(.5); opacity: 0; }
|
|
85
|
+
60% { transform: scale(1.08); opacity: 1; }
|
|
86
|
+
100% { transform: scale(1); }
|
|
87
|
+
}
|
|
51
88
|
@media (prefers-reduced-motion: reduce) {
|
|
52
89
|
.slyxup-root * { animation: none !important; transition: none !important; }
|
|
53
90
|
}
|
|
@@ -55,101 +92,155 @@ export const CSS = `
|
|
|
55
92
|
/* ── Card ── */
|
|
56
93
|
.slx-card {
|
|
57
94
|
width: 100%;
|
|
58
|
-
max-width:
|
|
95
|
+
max-width: 400px;
|
|
59
96
|
background: var(--slx-bg);
|
|
60
97
|
border: 1px solid var(--slx-border);
|
|
61
|
-
border-radius:
|
|
62
|
-
padding:
|
|
63
|
-
box-shadow:
|
|
98
|
+
border-radius: var(--slx-radius-lg);
|
|
99
|
+
padding: 34px 34px 30px;
|
|
100
|
+
box-shadow: var(--slx-shadow-card);
|
|
64
101
|
box-sizing: border-box;
|
|
102
|
+
animation: slx-rise .38s cubic-bezier(.22,.9,.32,1) both;
|
|
65
103
|
}
|
|
66
|
-
.slyxup-root .slx-card
|
|
104
|
+
.slyxup-root:not(.slyxup-light) .slx-card,
|
|
105
|
+
.slx-card { color: var(--slx-ink); }
|
|
67
106
|
.slx-card-error { animation: slx-shake .45s cubic-bezier(.36,.07,.19,.97) both; }
|
|
68
107
|
|
|
69
108
|
/* ── Header / keyhole mark ── */
|
|
70
109
|
.slx-mark {
|
|
71
|
-
width:
|
|
110
|
+
width: 46px; height: 46px; border-radius: 13px;
|
|
72
111
|
display: flex; align-items: center; justify-content: center;
|
|
73
|
-
background: linear-gradient(
|
|
74
|
-
|
|
112
|
+
background: linear-gradient(140deg, var(--slx-accent) 0%, #8b5cf6 100%);
|
|
113
|
+
box-shadow:
|
|
114
|
+
inset 0 1px 0 rgba(255,255,255,.28),
|
|
115
|
+
0 6px 16px -6px rgba(91,91,214,.55);
|
|
116
|
+
margin-bottom: 20px;
|
|
117
|
+
}
|
|
118
|
+
.slx-mark svg { display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
|
|
119
|
+
.slx-title {
|
|
120
|
+
font-family: var(--slx-display);
|
|
121
|
+
font-size: 21px; font-weight: 650; letter-spacing: -0.022em;
|
|
122
|
+
color: var(--slx-ink-strong);
|
|
123
|
+
margin: 0 0 6px;
|
|
75
124
|
}
|
|
76
|
-
.slx-
|
|
77
|
-
.slx-title { font-family: var(--slx-display); font-size: 20px; font-weight: 650; letter-spacing: -0.02em; margin: 0 0 6px; }
|
|
78
|
-
.slx-subtitle { font-size: 13.5px; color: var(--slx-muted); margin: 0 0 22px; line-height: 1.5; }
|
|
125
|
+
.slx-subtitle { font-size: 13.5px; color: var(--slx-muted); margin: 0 0 24px; line-height: 1.55; }
|
|
79
126
|
|
|
80
127
|
/* ── Fields ── */
|
|
81
|
-
.slx-field { margin-bottom:
|
|
82
|
-
.slx-
|
|
128
|
+
.slx-field { margin-bottom: 15px; }
|
|
129
|
+
.slx-row {
|
|
130
|
+
display: flex; align-items: baseline; justify-content: space-between;
|
|
131
|
+
margin-bottom: 6px;
|
|
132
|
+
}
|
|
133
|
+
.slx-label {
|
|
134
|
+
display: inline-block;
|
|
135
|
+
font-size: 12.5px; font-weight: 550; letter-spacing: 0.01em;
|
|
136
|
+
color: var(--slx-ink);
|
|
137
|
+
}
|
|
83
138
|
.slx-input {
|
|
84
139
|
width: 100%; box-sizing: border-box;
|
|
85
|
-
font: inherit; font-size: 14px; color: var(--slx-ink);
|
|
86
|
-
background:
|
|
140
|
+
font: inherit; font-size: 14px; line-height: 1.4; color: var(--slx-ink);
|
|
141
|
+
background: var(--slx-bg-subtle);
|
|
87
142
|
border: 1px solid var(--slx-border);
|
|
88
143
|
border-radius: var(--slx-radius);
|
|
89
|
-
padding: 10px
|
|
144
|
+
padding: 10px 13px;
|
|
90
145
|
outline: none;
|
|
91
|
-
transition: border-color .15s, box-shadow .15s;
|
|
146
|
+
transition: border-color .15s, box-shadow .15s, background .15s;
|
|
92
147
|
}
|
|
93
|
-
.slx-input::placeholder { color: var(--slx-muted); opacity: .
|
|
148
|
+
.slx-input::placeholder { color: var(--slx-muted); opacity: .7; }
|
|
149
|
+
.slx-input:hover { border-color: var(--slx-border-strong); }
|
|
94
150
|
.slx-input:focus-visible {
|
|
151
|
+
background: var(--slx-bg);
|
|
95
152
|
border-color: var(--slx-accent);
|
|
96
|
-
box-shadow: 0 0 0
|
|
153
|
+
box-shadow: 0 0 0 3.5px var(--slx-accent-soft);
|
|
97
154
|
}
|
|
98
155
|
.slx-hint { font-size: 12px; color: var(--slx-muted); margin-top: 5px; }
|
|
99
156
|
.slx-error-text {
|
|
100
157
|
font-size: 13px; color: var(--slx-danger);
|
|
101
|
-
background: color-mix(in srgb, var(--slx-danger)
|
|
102
|
-
border
|
|
158
|
+
background: color-mix(in srgb, var(--slx-danger) 8%, transparent);
|
|
159
|
+
border: 1px solid color-mix(in srgb, var(--slx-danger) 26%, transparent);
|
|
160
|
+
border-left: 3px solid var(--slx-danger);
|
|
161
|
+
border-radius: var(--slx-radius-sm);
|
|
162
|
+
padding: 10px 12px; margin: 0 0 16px; line-height: 1.45;
|
|
163
|
+
}
|
|
164
|
+
.slx-setup-note {
|
|
165
|
+
font-size: 12px; line-height: 1.45;
|
|
166
|
+
color: #7a5c00;
|
|
167
|
+
background: #fff7dc;
|
|
168
|
+
border: 1px solid #f3e3a0;
|
|
169
|
+
border-radius: var(--slx-radius-sm);
|
|
170
|
+
padding: 9px 11px; margin: 0 0 16px;
|
|
171
|
+
}
|
|
172
|
+
.slyxup-root:not(.slyxup-light) .slx-setup-note {
|
|
173
|
+
color: #f5d878; background: rgba(250,204,21,.07); border-color: rgba(250,204,21,.25);
|
|
103
174
|
}
|
|
175
|
+
.slx-setup-note code {
|
|
176
|
+
font-family: var(--slx-mono); font-size: 11px;
|
|
177
|
+
background: rgba(0,0,0,.05); border-radius: 4px; padding: 1px 4px;
|
|
178
|
+
}
|
|
179
|
+
.slyxup-root:not(.slyxup-light) .slx-setup-note code { background: rgba(255,255,255,.08); }
|
|
104
180
|
|
|
105
|
-
/* ──
|
|
181
|
+
/* ── Primary button ── */
|
|
106
182
|
.slx-btn {
|
|
107
183
|
width: 100%; box-sizing: border-box;
|
|
108
184
|
font-family: var(--slx-font); font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
|
|
109
|
-
color: #fff; background: #0a0a0f;
|
|
185
|
+
color: #fff; background: linear-gradient(180deg, #23232e 0%, #0a0a0f 100%);
|
|
110
186
|
border: 1px solid #0a0a0f; border-radius: var(--slx-radius);
|
|
111
187
|
padding: 11px 14px; cursor: pointer;
|
|
188
|
+
box-shadow: 0 1px 2px rgba(10,10,15,.35), inset 0 1px 0 rgba(255,255,255,.08);
|
|
112
189
|
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
|
113
|
-
transition:
|
|
190
|
+
transition: filter .15s, transform .06s, box-shadow .15s;
|
|
114
191
|
}
|
|
115
|
-
.slx-btn:hover {
|
|
116
|
-
.slx-btn:active { transform: scale(.985);
|
|
117
|
-
.slx-btn:focus-visible { outline: none; box-shadow: 0 0 0
|
|
118
|
-
.slx-btn[disabled] { opacity: .
|
|
192
|
+
.slx-btn:hover { filter: brightness(1.22); }
|
|
193
|
+
.slx-btn:active { transform: scale(.985); filter: brightness(.92); }
|
|
194
|
+
.slx-btn:focus-visible { outline: none; box-shadow: 0 0 0 3.5px rgba(10,10,15,.16), 0 0 0 1.5px #0a0a0f; }
|
|
195
|
+
.slx-btn[disabled] { opacity: .55; cursor: not-allowed; }
|
|
119
196
|
@media (prefers-color-scheme: dark) {
|
|
120
|
-
.slyxup-root:not(.slyxup-light) .slx-btn {
|
|
121
|
-
|
|
197
|
+
.slyxup-root:not(.slyxup-light) .slx-btn {
|
|
198
|
+
background: linear-gradient(180deg, #ffffff 0%, #ececf1 100%);
|
|
199
|
+
color: #0a0a0f; border-color: #ececf1;
|
|
200
|
+
box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.9);
|
|
201
|
+
}
|
|
202
|
+
.slyxup-root:not(.slyxup-light) .slx-btn:hover { filter: brightness(.94); }
|
|
122
203
|
}
|
|
123
204
|
.slx-spinner {
|
|
124
205
|
width: 15px; height: 15px; flex: none;
|
|
125
206
|
border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
|
|
126
207
|
border-radius: 50%; animation: slx-spin .7s linear infinite;
|
|
127
208
|
}
|
|
209
|
+
.slyxup-root:not(.slyxup-light) .slx-spinner { border-color: rgba(10,10,15,.25); border-top-color: #0a0a0f; }
|
|
128
210
|
|
|
129
211
|
/* ── Social ── */
|
|
130
|
-
.slx-social { display: grid; gap:
|
|
212
|
+
.slx-social { display: grid; gap: 9px; margin-bottom: 4px; }
|
|
131
213
|
.slx-social-btn {
|
|
132
214
|
width: 100%; box-sizing: border-box;
|
|
133
215
|
font: inherit; font-size: 13.5px; font-weight: 550;
|
|
134
216
|
color: var(--slx-ink); background: var(--slx-bg);
|
|
135
|
-
border: 1px solid var(--slx-border); border-radius: var(--slx-radius);
|
|
217
|
+
border: 1px solid var(--slx-border-strong); border-radius: var(--slx-radius);
|
|
136
218
|
padding: 10px 14px; cursor: pointer;
|
|
137
219
|
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
|
|
138
|
-
transition: background .15s, border-color .15s;
|
|
220
|
+
transition: background .15s, border-color .15s, transform .06s, box-shadow .15s;
|
|
139
221
|
}
|
|
140
|
-
.slx-social-btn:hover {
|
|
141
|
-
|
|
222
|
+
.slx-social-btn:hover {
|
|
223
|
+
background: var(--slx-bg-subtle);
|
|
224
|
+
border-color: var(--slx-border-strong);
|
|
225
|
+
box-shadow: 0 2px 8px -2px rgba(18,18,28,.12);
|
|
226
|
+
}
|
|
227
|
+
.slx-social-btn:active { transform: scale(.985); }
|
|
228
|
+
.slx-social-btn:focus-visible { outline: none; box-shadow: 0 0 0 3.5px var(--slx-accent-soft); }
|
|
229
|
+
.slx-social-btn svg { flex: none; }
|
|
142
230
|
|
|
143
231
|
/* ── Divider & footer ── */
|
|
144
232
|
.slx-divider {
|
|
145
|
-
display: flex; align-items: center; gap:
|
|
146
|
-
color: var(--slx-muted); font-size:
|
|
233
|
+
display: flex; align-items: center; gap: 14px;
|
|
234
|
+
color: var(--slx-muted); font-size: 11.5px;
|
|
235
|
+
letter-spacing: .04em; text-transform: uppercase;
|
|
147
236
|
margin: 18px 0;
|
|
148
237
|
}
|
|
149
238
|
.slx-divider::before, .slx-divider::after {
|
|
150
|
-
content: ""; height: 1px; flex: 1;
|
|
239
|
+
content: ""; height: 1px; flex: 1;
|
|
240
|
+
background: linear-gradient(90deg, transparent, var(--slx-border-strong));
|
|
151
241
|
}
|
|
152
|
-
.slx-
|
|
242
|
+
.slx-divider::after { background: linear-gradient(90deg, var(--slx-border-strong), transparent); }
|
|
243
|
+
.slx-footer { font-size: 13px; color: var(--slx-muted); margin-top: 22px; text-align: center; }
|
|
153
244
|
.slx-link {
|
|
154
245
|
color: var(--slx-accent); font-weight: 600; text-decoration: none; cursor: pointer;
|
|
155
246
|
background: none; border: none; font: inherit; font-size: inherit;
|
|
@@ -157,13 +248,16 @@ export const CSS = `
|
|
|
157
248
|
}
|
|
158
249
|
.slx-link:hover { text-decoration: underline; color: var(--slx-accent-hover); }
|
|
159
250
|
.slx-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--slx-accent-soft); border-radius: 4px; }
|
|
251
|
+
.slx-forgot { font-size: 12px; }
|
|
160
252
|
|
|
161
253
|
/* ── Success state ── */
|
|
162
254
|
.slx-success-icon {
|
|
163
|
-
width:
|
|
255
|
+
width: 48px; height: 48px; border-radius: 50%;
|
|
164
256
|
display: flex; align-items: center; justify-content: center;
|
|
165
|
-
background: color-mix(in srgb,
|
|
166
|
-
color:
|
|
257
|
+
background: color-mix(in srgb, var(--slx-success) 12%, transparent);
|
|
258
|
+
color: var(--slx-success); margin: 4px auto 18px;
|
|
259
|
+
animation: slx-pop .45s cubic-bezier(.22,.9,.32,1) both;
|
|
260
|
+
box-shadow: 0 0 0 6px color-mix(in srgb, var(--slx-success) 6%, transparent);
|
|
167
261
|
}
|
|
168
262
|
|
|
169
263
|
/* ── User button ── */
|
|
@@ -173,49 +267,76 @@ export const CSS = `
|
|
|
173
267
|
border: 1px solid var(--slx-border); cursor: pointer;
|
|
174
268
|
display: flex; align-items: center; justify-content: center;
|
|
175
269
|
font-size: 14px; font-weight: 650; color: #fff;
|
|
176
|
-
background: linear-gradient(135deg, var(--slx-accent), #
|
|
270
|
+
background: linear-gradient(135deg, var(--slx-accent), #8b5cf6);
|
|
177
271
|
padding: 0; overflow: hidden;
|
|
272
|
+
transition: box-shadow .15s, transform .06s;
|
|
178
273
|
}
|
|
274
|
+
.slx-userbtn-avatar:hover { box-shadow: 0 0 0 3px var(--slx-accent-soft); }
|
|
275
|
+
.slx-userbtn-avatar:active { transform: scale(.96); }
|
|
179
276
|
.slx-userbtn-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
|
180
|
-
.slx-userbtn-avatar:focus-visible { outline: none; box-shadow: 0 0 0
|
|
277
|
+
.slx-userbtn-avatar:focus-visible { outline: none; box-shadow: 0 0 0 3.5px var(--slx-accent-soft); }
|
|
181
278
|
.slx-menu {
|
|
182
279
|
position: absolute; right: 0; top: calc(100% + 8px);
|
|
183
|
-
min-width:
|
|
280
|
+
min-width: 240px;
|
|
184
281
|
background: var(--slx-bg);
|
|
185
282
|
border: 1px solid var(--slx-border);
|
|
186
|
-
border-radius: var(--slx-radius);
|
|
187
|
-
box-shadow:
|
|
283
|
+
border-radius: var(--slx-radius-lg);
|
|
284
|
+
box-shadow: var(--slx-shadow-pop);
|
|
188
285
|
overflow: hidden; z-index: 1000;
|
|
286
|
+
animation: slx-rise .22s cubic-bezier(.22,.9,.32,1) both;
|
|
189
287
|
}
|
|
190
|
-
.slx-menu-header { padding: 14px 16px; border-bottom: 1px solid var(--slx-border); }
|
|
191
|
-
.slx-menu-name { font-size: 14px; font-weight: 600; margin: 0 0 2px; }
|
|
288
|
+
.slx-menu-header { padding: 14px 16px; border-bottom: 1px solid var(--slx-border); background: var(--slx-bg-subtle); }
|
|
289
|
+
.slx-menu-name { font-size: 14px; font-weight: 600; margin: 0 0 2px; color: var(--slx-ink-strong); }
|
|
192
290
|
.slx-menu-email { font-size: 12.5px; color: var(--slx-muted); margin: 0; word-break: break-all; }
|
|
193
291
|
.slx-menu-item {
|
|
194
292
|
display: block; width: 100%; text-align: left; box-sizing: border-box;
|
|
195
293
|
font: inherit; font-size: 13.5px; color: var(--slx-ink);
|
|
196
294
|
background: none; border: none; padding: 10px 16px; cursor: pointer;
|
|
295
|
+
transition: background .12s;
|
|
197
296
|
}
|
|
198
|
-
.slx-menu-item:hover { background: color-mix(in srgb, var(--slx-ink)
|
|
297
|
+
.slx-menu-item:hover { background: color-mix(in srgb, var(--slx-ink) 4%, transparent); }
|
|
199
298
|
.slx-menu-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--slx-accent-soft); }
|
|
200
299
|
.slx-menu-item-danger { color: var(--slx-danger); }
|
|
300
|
+
.slx-menu-item-danger:hover { background: color-mix(in srgb, var(--slx-danger) 7%, transparent); }
|
|
301
|
+
|
|
302
|
+
/* ── Badge (verified etc.) ── */
|
|
303
|
+
.slx-badge {
|
|
304
|
+
display: inline-flex; align-items: center; gap: 5px;
|
|
305
|
+
font-size: 11px; font-weight: 600; letter-spacing: .02em;
|
|
306
|
+
padding: 2.5px 9px; border-radius: 999px;
|
|
307
|
+
color: var(--slx-success);
|
|
308
|
+
background: color-mix(in srgb, var(--slx-success) 9%, transparent);
|
|
309
|
+
border: 1px solid color-mix(in srgb, var(--slx-success) 30%, transparent);
|
|
310
|
+
}
|
|
201
311
|
`;
|
|
202
312
|
|
|
203
313
|
let injected = false;
|
|
204
314
|
|
|
205
|
-
/** Inject the SlyxUp stylesheet +
|
|
315
|
+
/** Inject the SlyxUp stylesheet + fonts once per document. Idempotent + SSR-safe. */
|
|
206
316
|
export function injectStyles(): void {
|
|
207
|
-
if (
|
|
208
|
-
//
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
317
|
+
if (typeof document === 'undefined') return;
|
|
318
|
+
// Design tokens are scoped to .slyxup-root — apply to <html> so the
|
|
319
|
+
// components work in ANY host app without a wrapper element.
|
|
320
|
+
document.documentElement.classList.add('slyxup-root');
|
|
321
|
+
if (!document.querySelector('style[data-slyxup="styles"]')) {
|
|
322
|
+
if (!document.querySelector('link[href*="DM+Sans"]')) {
|
|
323
|
+
const fontLink = document.createElement('link');
|
|
324
|
+
fontLink.rel = 'stylesheet';
|
|
325
|
+
fontLink.href =
|
|
326
|
+
'https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=Space+Grotesk:wght@400;500;600;700&display=swap';
|
|
327
|
+
document.head.appendChild(fontLink);
|
|
328
|
+
}
|
|
329
|
+
const style = document.createElement('style');
|
|
330
|
+
style.setAttribute('data-slyxup', 'styles');
|
|
331
|
+
style.textContent = CSS;
|
|
332
|
+
document.head.appendChild(style);
|
|
333
|
+
injected = true;
|
|
334
|
+
} else {
|
|
335
|
+
injected = true;
|
|
215
336
|
}
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
injected
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
/** Test hook — whether styles are present. */
|
|
340
|
+
export function stylesInjected(): boolean {
|
|
341
|
+
return injected;
|
|
221
342
|
}
|