@snowztech/ui-css 0.2.0 → 0.3.0
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/dist/components/input.css +32 -4
- package/dist/snowztech-ui.css +121 -4
- package/dist/snowztech-ui.min.css +1 -1
- package/package.json +1 -1
- package/src/components/field.css +28 -0
- package/src/components/file.css +42 -0
- package/src/components/input.css +32 -4
- package/src/index.css +2 -0
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
.sn-input
|
|
1
|
+
.sn-input,
|
|
2
|
+
.sn-textarea {
|
|
2
3
|
font-family: var(--sn-font-mono);
|
|
3
4
|
font-size: var(--sn-text-sm);
|
|
4
5
|
color: var(--sn-fg);
|
|
@@ -10,6 +11,33 @@
|
|
|
10
11
|
width: 100%;
|
|
11
12
|
transition: border-color var(--sn-fast) var(--sn-ease);
|
|
12
13
|
}
|
|
13
|
-
.sn-input::placeholder
|
|
14
|
-
.sn-
|
|
15
|
-
.sn-input:
|
|
14
|
+
.sn-input::placeholder,
|
|
15
|
+
.sn-textarea::placeholder { color: var(--sn-fg-faint); }
|
|
16
|
+
.sn-input:hover,
|
|
17
|
+
.sn-textarea:hover { border-color: var(--sn-fg-muted); }
|
|
18
|
+
.sn-input:focus,
|
|
19
|
+
.sn-textarea:focus { outline: none; border-color: var(--sn-accent); }
|
|
20
|
+
.sn-input:disabled,
|
|
21
|
+
.sn-textarea:disabled {
|
|
22
|
+
color: var(--sn-fg-faint);
|
|
23
|
+
cursor: not-allowed;
|
|
24
|
+
background: var(--sn-bg-inset);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.sn-input--sm { height: 26px; font-size: var(--sn-text-xs); padding: 0 8px; }
|
|
28
|
+
.sn-input--lg { height: 36px; font-size: var(--sn-text-base); padding: 0 12px; }
|
|
29
|
+
|
|
30
|
+
.sn-textarea {
|
|
31
|
+
height: auto;
|
|
32
|
+
min-height: 80px;
|
|
33
|
+
padding: 8px 10px;
|
|
34
|
+
line-height: var(--sn-leading-normal);
|
|
35
|
+
resize: vertical;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.sn-input--invalid,
|
|
39
|
+
.sn-input--invalid:hover,
|
|
40
|
+
.sn-input--invalid:focus,
|
|
41
|
+
.sn-textarea--invalid,
|
|
42
|
+
.sn-textarea--invalid:hover,
|
|
43
|
+
.sn-textarea--invalid:focus { border-color: var(--sn-danger); }
|
package/dist/snowztech-ui.css
CHANGED
|
@@ -234,7 +234,8 @@ a:hover {
|
|
|
234
234
|
}
|
|
235
235
|
|
|
236
236
|
/* src/components/input.css */
|
|
237
|
-
.sn-input
|
|
237
|
+
.sn-input,
|
|
238
|
+
.sn-textarea {
|
|
238
239
|
font-family: var(--sn-font-mono);
|
|
239
240
|
font-size: var(--sn-text-sm);
|
|
240
241
|
color: var(--sn-fg);
|
|
@@ -246,16 +247,132 @@ a:hover {
|
|
|
246
247
|
width: 100%;
|
|
247
248
|
transition: border-color var(--sn-fast) var(--sn-ease);
|
|
248
249
|
}
|
|
249
|
-
.sn-input::placeholder
|
|
250
|
+
.sn-input::placeholder,
|
|
251
|
+
.sn-textarea::placeholder {
|
|
250
252
|
color: var(--sn-fg-faint);
|
|
251
253
|
}
|
|
252
|
-
.sn-input:hover
|
|
254
|
+
.sn-input:hover,
|
|
255
|
+
.sn-textarea:hover {
|
|
253
256
|
border-color: var(--sn-fg-muted);
|
|
254
257
|
}
|
|
255
|
-
.sn-input:focus
|
|
258
|
+
.sn-input:focus,
|
|
259
|
+
.sn-textarea:focus {
|
|
256
260
|
outline: none;
|
|
257
261
|
border-color: var(--sn-accent);
|
|
258
262
|
}
|
|
263
|
+
.sn-input:disabled,
|
|
264
|
+
.sn-textarea:disabled {
|
|
265
|
+
color: var(--sn-fg-faint);
|
|
266
|
+
cursor: not-allowed;
|
|
267
|
+
background: var(--sn-bg-inset);
|
|
268
|
+
}
|
|
269
|
+
.sn-input--sm {
|
|
270
|
+
height: 26px;
|
|
271
|
+
font-size: var(--sn-text-xs);
|
|
272
|
+
padding: 0 8px;
|
|
273
|
+
}
|
|
274
|
+
.sn-input--lg {
|
|
275
|
+
height: 36px;
|
|
276
|
+
font-size: var(--sn-text-base);
|
|
277
|
+
padding: 0 12px;
|
|
278
|
+
}
|
|
279
|
+
.sn-textarea {
|
|
280
|
+
height: auto;
|
|
281
|
+
min-height: 80px;
|
|
282
|
+
padding: 8px 10px;
|
|
283
|
+
line-height: var(--sn-leading-normal);
|
|
284
|
+
resize: vertical;
|
|
285
|
+
}
|
|
286
|
+
.sn-input--invalid,
|
|
287
|
+
.sn-input--invalid:hover,
|
|
288
|
+
.sn-input--invalid:focus,
|
|
289
|
+
.sn-textarea--invalid,
|
|
290
|
+
.sn-textarea--invalid:hover,
|
|
291
|
+
.sn-textarea--invalid:focus {
|
|
292
|
+
border-color: var(--sn-danger);
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
/* src/components/field.css */
|
|
296
|
+
.sn-field {
|
|
297
|
+
display: flex;
|
|
298
|
+
flex-direction: column;
|
|
299
|
+
gap: 6px;
|
|
300
|
+
width: 100%;
|
|
301
|
+
}
|
|
302
|
+
.sn-label {
|
|
303
|
+
font-family: var(--sn-font-mono);
|
|
304
|
+
font-size: var(--sn-text-xs);
|
|
305
|
+
color: var(--sn-fg-muted);
|
|
306
|
+
letter-spacing: 0.02em;
|
|
307
|
+
}
|
|
308
|
+
.sn-label__required {
|
|
309
|
+
color: var(--sn-danger);
|
|
310
|
+
margin-left: 2px;
|
|
311
|
+
}
|
|
312
|
+
.sn-hint {
|
|
313
|
+
font-family: var(--sn-font-mono);
|
|
314
|
+
font-size: var(--sn-text-2xs);
|
|
315
|
+
color: var(--sn-fg-subtle);
|
|
316
|
+
line-height: var(--sn-leading-normal);
|
|
317
|
+
}
|
|
318
|
+
.sn-error {
|
|
319
|
+
font-family: var(--sn-font-mono);
|
|
320
|
+
font-size: var(--sn-text-2xs);
|
|
321
|
+
color: var(--sn-danger);
|
|
322
|
+
line-height: var(--sn-leading-normal);
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
/* src/components/file.css */
|
|
326
|
+
.sn-file {
|
|
327
|
+
font-family: var(--sn-font-mono);
|
|
328
|
+
font-size: var(--sn-text-sm);
|
|
329
|
+
color: var(--sn-fg-muted);
|
|
330
|
+
background: transparent;
|
|
331
|
+
border: 1px solid var(--sn-border-strong);
|
|
332
|
+
border-radius: var(--sn-r-xs);
|
|
333
|
+
width: 100%;
|
|
334
|
+
height: 30px;
|
|
335
|
+
padding: 0;
|
|
336
|
+
display: inline-flex;
|
|
337
|
+
align-items: center;
|
|
338
|
+
cursor: pointer;
|
|
339
|
+
transition: border-color var(--sn-fast) var(--sn-ease);
|
|
340
|
+
}
|
|
341
|
+
.sn-file:hover {
|
|
342
|
+
border-color: var(--sn-fg-muted);
|
|
343
|
+
}
|
|
344
|
+
.sn-file:focus-within {
|
|
345
|
+
outline: none;
|
|
346
|
+
border-color: var(--sn-accent);
|
|
347
|
+
}
|
|
348
|
+
.sn-file::file-selector-button,
|
|
349
|
+
.sn-file::-webkit-file-upload-button {
|
|
350
|
+
font-family: var(--sn-font-mono);
|
|
351
|
+
font-size: var(--sn-text-xs);
|
|
352
|
+
color: var(--sn-fg);
|
|
353
|
+
background: var(--sn-bg-elev-1);
|
|
354
|
+
border: none;
|
|
355
|
+
border-right: 1px solid var(--sn-border-strong);
|
|
356
|
+
height: 100%;
|
|
357
|
+
padding: 0 12px;
|
|
358
|
+
margin-right: 10px;
|
|
359
|
+
cursor: pointer;
|
|
360
|
+
transition: background var(--sn-fast) var(--sn-ease);
|
|
361
|
+
}
|
|
362
|
+
.sn-file:hover::file-selector-button,
|
|
363
|
+
.sn-file:hover::-webkit-file-upload-button {
|
|
364
|
+
background: var(--sn-bg-elev-2);
|
|
365
|
+
}
|
|
366
|
+
.sn-file:disabled {
|
|
367
|
+
cursor: not-allowed;
|
|
368
|
+
color: var(--sn-fg-faint);
|
|
369
|
+
background: var(--sn-bg-inset);
|
|
370
|
+
}
|
|
371
|
+
.sn-file:disabled::file-selector-button,
|
|
372
|
+
.sn-file:disabled::-webkit-file-upload-button {
|
|
373
|
+
cursor: not-allowed;
|
|
374
|
+
color: var(--sn-fg-faint);
|
|
375
|
+
}
|
|
259
376
|
|
|
260
377
|
/* src/components/card.css */
|
|
261
378
|
.sn-card {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--sn-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--sn-font-sans: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--sn-text-2xs: 11px;--sn-text-xs: 12px;--sn-text-sm: 13px;--sn-text-base: 14px;--sn-text-md: 15px;--sn-text-lg: 17px;--sn-text-xl: 20px;--sn-text-2xl: 24px;--sn-text-3xl: 28px;--sn-text-4xl: 36px;--sn-leading-tight: 1.2;--sn-leading-normal: 1.55;--sn-leading-relaxed: 1.75;--sn-s-1: 4px;--sn-s-2: 8px;--sn-s-3: 12px;--sn-s-4: 16px;--sn-s-5: 20px;--sn-s-6: 24px;--sn-s-7: 32px;--sn-s-8: 40px;--sn-s-9: 48px;--sn-s-10: 64px;--sn-s-11: 80px;--sn-s-12: 96px;--sn-r-none: 0;--sn-r-xs: 2px;--sn-r-sm: 4px;--sn-r-md: 6px;--sn-r-lg: 8px;--sn-fast: .1s;--sn-base: .16s;--sn-ease: cubic-bezier(.2, 0, 0, 1);--sn-bg: #0a0a0a;--sn-bg-elev-1: #111111;--sn-bg-elev-2: #181818;--sn-bg-inset: #050505;--sn-border: #1f1f1f;--sn-border-strong: #2a2a2a;--sn-border-subtle: #161616;--sn-fg: #e8e8e8;--sn-fg-muted: #888888;--sn-fg-subtle: #666666;--sn-fg-faint: #444444;--sn-fg-inverse: #0a0a0a;--sn-accent: #8ab4f8;--sn-accent-hover: #a8c7fa;--sn-accent-active: #6c9eed;--sn-accent-fg: #0a0a0a;--sn-accent-soft: rgba(138, 180, 248, .1);--sn-accent-border: rgba(138, 180, 248, .24);--sn-success: #7fc77f;--sn-warning: #d4a857;--sn-danger: #d77070;--sn-success-soft: rgba(127, 199, 127, .1);--sn-warning-soft: rgba(212, 168, 87, .1);--sn-danger-soft: rgba(215, 112, 112, .1);--sn-shadow-sm: none;--sn-shadow-md: 0 0 0 1px var(--sn-border);--sn-shadow-lg: 0 0 0 1px var(--sn-border-strong)}[data-theme=light]{--sn-bg: #f7f7f5;--sn-bg-elev-1: #ffffff;--sn-bg-elev-2: #ffffff;--sn-bg-inset: #efefec;--sn-border: #e2e2dd;--sn-border-strong: #c8c8c2;--sn-border-subtle: #ececea;--sn-fg: #161616;--sn-fg-muted: #6a6a6a;--sn-fg-subtle: #888888;--sn-fg-faint: #b0b0ad;--sn-fg-inverse: #ffffff;--sn-accent: #2a64d6;--sn-accent-hover: #1f56c2;--sn-accent-active: #194ba8;--sn-accent-fg: #ffffff;--sn-accent-soft: rgba(42, 100, 214, .08);--sn-accent-border: rgba(42, 100, 214, .24)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}html,body{height:100%}body{font-family:var(--sn-font-mono);font-size:var(--sn-text-sm);line-height:var(--sn-leading-normal);color:var(--sn-fg);background:var(--sn-bg);-webkit-font-smoothing:antialiased}::selection{background:var(--sn-accent-soft);color:var(--sn-fg)}a{color:var(--sn-accent);text-decoration:none}a:hover{color:var(--sn-accent-hover)}@keyframes sn-spin{to{transform:rotate(360deg)}}@keyframes sn-pulse{0%,to{opacity:.3}50%{opacity:1}}@keyframes sn-blink{50%{opacity:0}}.sn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sn-font-mono);font-size:var(--sn-text-sm);font-weight:500;line-height:1;border-radius:var(--sn-r-xs);padding:0 14px;height:30px;border:1px solid transparent;cursor:pointer;transition:background var(--sn-fast) var(--sn-ease),border-color var(--sn-fast) var(--sn-ease),color var(--sn-fast) var(--sn-ease);white-space:nowrap;user-select:none;background:transparent;color:var(--sn-fg)}.sn-btn:focus-visible{outline:1px solid var(--sn-accent);outline-offset:1px}.sn-btn[disabled]{opacity:.4;cursor:not-allowed}.sn-btn--sm{height:24px;font-size:var(--sn-text-xs);padding:0 10px}.sn-btn--lg{height:36px;font-size:var(--sn-text-sm);padding:0 18px}.sn-btn--primary{background:var(--sn-fg);color:var(--sn-fg-inverse);border-color:var(--sn-fg)}.sn-btn--primary:hover{background:var(--sn-fg-muted);border-color:var(--sn-fg-muted)}.sn-btn--secondary{background:transparent;color:var(--sn-fg);border-color:var(--sn-border-strong)}.sn-btn--secondary:hover{border-color:var(--sn-fg-muted)}.sn-btn--ghost{background:transparent;color:var(--sn-fg-muted)}.sn-btn--ghost:hover{color:var(--sn-fg)}.sn-btn--accent{background:var(--sn-accent);color:var(--sn-accent-fg);border-color:var(--sn-accent)}.sn-btn--accent:hover{background:var(--sn-accent-hover);border-color:var(--sn-accent-hover)}.sn-btn--danger{background:transparent;color:var(--sn-danger);border-color:var(--sn-border-strong)}.sn-btn--danger:hover{border-color:var(--sn-danger)}.sn-input{font-family:var(--sn-font-mono);font-size:var(--sn-text-sm);color:var(--sn-fg);background:transparent;border:1px solid var(--sn-border-strong);border-radius:var(--sn-r-xs);padding:0 10px;height:30px;width:100%;transition:border-color var(--sn-fast) var(--sn-ease)}.sn-input::placeholder{color:var(--sn-fg-faint)}.sn-input:hover{border-color:var(--sn-fg-muted)}.sn-input:focus{outline:none;border-color:var(--sn-accent)}.sn-card{background:transparent;border:1px solid var(--sn-border);border-radius:var(--sn-r-xs);padding:var(--sn-s-5)}.sn-card--rounded{border-radius:var(--sn-r-lg)}.sn-card--accent{border-color:var(--sn-accent-border);background:var(--sn-accent-soft)}.sn-card--inset{background:var(--sn-bg-inset)}.sn-badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--sn-font-mono);font-size:var(--sn-text-2xs);font-weight:400;padding:2px 6px;border-radius:var(--sn-r-xs);border:1px solid var(--sn-border);color:var(--sn-fg-muted);height:18px;text-transform:lowercase}.sn-badge--accent{color:var(--sn-accent);border-color:var(--sn-accent-border)}.sn-badge--success{color:var(--sn-success);border-color:#7fc77f4d}.sn-badge--warning{color:var(--sn-warning);border-color:#d4a8574d}.sn-badge--danger{color:var(--sn-danger);border-color:#d770704d}.sn-kbd{font-family:var(--sn-font-mono);font-size:var(--sn-text-2xs);border:1px solid var(--sn-border-strong);border-radius:var(--sn-r-xs);padding:1px 5px;color:var(--sn-fg-muted)}.sn-divider{height:1px;background:var(--sn-border);border:0;margin:0}.sn-meta{font-family:var(--sn-font-mono);font-size:var(--sn-text-2xs);letter-spacing:.04em;text-transform:uppercase;color:var(--sn-fg-faint)}.sn-prompt{color:var(--sn-fg-faint);user-select:none}.sn-prompt:before{content:"\203a "}.sn-icon{display:inline-block;vertical-align:middle;flex-shrink:0;color:currentColor}.sn-mark{display:inline-block;vertical-align:middle;flex-shrink:0;color:currentColor;width:var(--sn-mark-size, 32px);height:var(--sn-mark-size, 32px)}.sn-mark--xs{--sn-mark-size: 16px}.sn-mark--sm{--sn-mark-size: 24px}.sn-mark--md{--sn-mark-size: 32px}.sn-mark--lg{--sn-mark-size: 48px}.sn-mark--xl{--sn-mark-size: 64px}.sn-mark--accent{color:var(--sn-accent)}.sn-mark--muted{color:var(--sn-fg-muted)}.sn-wordmark{font-family:var(--sn-font-mono);font-size:var(--sn-wordmark-size, 18px);font-weight:700;letter-spacing:-.01em;color:currentColor;line-height:1}.sn-wordmark__dot{color:var(--sn-accent)}.sn-monogram{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--sn-monogram-bg, var(--sn-bg));color:var(--sn-monogram-fg, var(--sn-fg));width:var(--sn-monogram-size, 64px);height:var(--sn-monogram-size, 64px);border-radius:var(--sn-monogram-radius, var(--sn-r-md))}.sn-monogram--xs{--sn-monogram-size: 32px;--sn-monogram-radius: var(--sn-r-xs)}.sn-monogram--sm{--sn-monogram-size: 48px;--sn-monogram-radius: var(--sn-r-sm)}.sn-monogram--md{--sn-monogram-size: 64px;--sn-monogram-radius: var(--sn-r-md)}.sn-monogram--lg{--sn-monogram-size: 96px;--sn-monogram-radius: var(--sn-r-lg)}.sn-monogram--inverse{--sn-monogram-bg: var(--sn-fg);--sn-monogram-fg: var(--sn-bg)}.sn-avatar{display:inline-flex;align-items:center;justify-content:center;width:var(--sn-avatar-size, 32px);height:var(--sn-avatar-size, 32px);border-radius:50%;background:var(--sn-bg-elev-1);color:var(--sn-fg-muted);font-family:var(--sn-font-mono);font-size:max(10px,calc(var(--sn-avatar-size, 32px) * .38));font-weight:500;overflow:hidden;flex-shrink:0;vertical-align:middle}.sn-avatar--square{border-radius:var(--sn-r-xs)}.sn-avatar--ring{box-shadow:0 0 0 1px var(--sn-border-strong)}.sn-avatar--xs{--sn-avatar-size: 20px}.sn-avatar--sm{--sn-avatar-size: 28px}.sn-avatar--md{--sn-avatar-size: 32px}.sn-avatar--lg{--sn-avatar-size: 48px}.sn-avatar--xl{--sn-avatar-size: 64px}.sn-avatar>img{width:100%;height:100%;object-fit:cover;display:block}.sn-avatar-stack{display:inline-flex}.sn-avatar-stack>*+*{margin-left:var(--sn-avatar-overlap, -8px)}.sn-pulse{display:inline-flex;align-items:center;gap:var(--sn-s-2);color:var(--sn-fg-muted);font-size:var(--sn-text-sm)}.sn-pulse__dot{position:relative;display:inline-flex;width:var(--sn-pulse-size, 8px);height:var(--sn-pulse-size, 8px);flex-shrink:0}.sn-pulse__dot:before,.sn-pulse__dot:after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--sn-pulse-color, var(--sn-success))}.sn-pulse__dot:before{opacity:.6;animation:sn-pulse 2s ease-in-out infinite}.sn-pulse--success{--sn-pulse-color: var(--sn-success)}.sn-pulse--warning{--sn-pulse-color: var(--sn-warning)}.sn-pulse--danger{--sn-pulse-color: var(--sn-danger)}.sn-pulse--accent{--sn-pulse-color: var(--sn-accent)}.sn-copy-btn{appearance:none;border:1px solid transparent;background:transparent;color:var(--sn-fg-muted);padding:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--sn-r-xs);transition:color var(--sn-fast) var(--sn-ease),border-color var(--sn-fast) var(--sn-ease)}.sn-copy-btn:hover{color:var(--sn-fg)}.sn-copy-btn:focus-visible{outline:1px solid var(--sn-accent);outline-offset:1px}.sn-copy-btn[data-copied=true],.sn-copy-btn[data-copied=true]:hover{color:var(--sn-success)}.sn-copy-btn .sn-copy-btn__copied{display:none}.sn-copy-btn[data-copied=true] .sn-copy-btn__copied{display:inline-flex}.sn-copy-btn[data-copied=true] .sn-copy-btn__idle{display:none}.sn-theme-toggle{appearance:none;border:none;background:transparent;padding:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:opacity var(--sn-base)}.sn-theme-toggle:focus-visible{outline:1px solid var(--sn-accent);outline-offset:1px}.sn-theme-toggle__indicator{display:inline-block;width:var(--sn-theme-toggle-size, 12px);height:var(--sn-theme-toggle-size, 12px);border-radius:50%;border:1px solid var(--sn-fg-muted);background:var(--sn-fg);transition:background var(--sn-base) var(--sn-ease)}[data-theme=light] .sn-theme-toggle__indicator{background:transparent}
|
|
1
|
+
:root{--sn-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--sn-font-sans: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--sn-text-2xs: 11px;--sn-text-xs: 12px;--sn-text-sm: 13px;--sn-text-base: 14px;--sn-text-md: 15px;--sn-text-lg: 17px;--sn-text-xl: 20px;--sn-text-2xl: 24px;--sn-text-3xl: 28px;--sn-text-4xl: 36px;--sn-leading-tight: 1.2;--sn-leading-normal: 1.55;--sn-leading-relaxed: 1.75;--sn-s-1: 4px;--sn-s-2: 8px;--sn-s-3: 12px;--sn-s-4: 16px;--sn-s-5: 20px;--sn-s-6: 24px;--sn-s-7: 32px;--sn-s-8: 40px;--sn-s-9: 48px;--sn-s-10: 64px;--sn-s-11: 80px;--sn-s-12: 96px;--sn-r-none: 0;--sn-r-xs: 2px;--sn-r-sm: 4px;--sn-r-md: 6px;--sn-r-lg: 8px;--sn-fast: .1s;--sn-base: .16s;--sn-ease: cubic-bezier(.2, 0, 0, 1);--sn-bg: #0a0a0a;--sn-bg-elev-1: #111111;--sn-bg-elev-2: #181818;--sn-bg-inset: #050505;--sn-border: #1f1f1f;--sn-border-strong: #2a2a2a;--sn-border-subtle: #161616;--sn-fg: #e8e8e8;--sn-fg-muted: #888888;--sn-fg-subtle: #666666;--sn-fg-faint: #444444;--sn-fg-inverse: #0a0a0a;--sn-accent: #8ab4f8;--sn-accent-hover: #a8c7fa;--sn-accent-active: #6c9eed;--sn-accent-fg: #0a0a0a;--sn-accent-soft: rgba(138, 180, 248, .1);--sn-accent-border: rgba(138, 180, 248, .24);--sn-success: #7fc77f;--sn-warning: #d4a857;--sn-danger: #d77070;--sn-success-soft: rgba(127, 199, 127, .1);--sn-warning-soft: rgba(212, 168, 87, .1);--sn-danger-soft: rgba(215, 112, 112, .1);--sn-shadow-sm: none;--sn-shadow-md: 0 0 0 1px var(--sn-border);--sn-shadow-lg: 0 0 0 1px var(--sn-border-strong)}[data-theme=light]{--sn-bg: #f7f7f5;--sn-bg-elev-1: #ffffff;--sn-bg-elev-2: #ffffff;--sn-bg-inset: #efefec;--sn-border: #e2e2dd;--sn-border-strong: #c8c8c2;--sn-border-subtle: #ececea;--sn-fg: #161616;--sn-fg-muted: #6a6a6a;--sn-fg-subtle: #888888;--sn-fg-faint: #b0b0ad;--sn-fg-inverse: #ffffff;--sn-accent: #2a64d6;--sn-accent-hover: #1f56c2;--sn-accent-active: #194ba8;--sn-accent-fg: #ffffff;--sn-accent-soft: rgba(42, 100, 214, .08);--sn-accent-border: rgba(42, 100, 214, .24)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}html,body{height:100%}body{font-family:var(--sn-font-mono);font-size:var(--sn-text-sm);line-height:var(--sn-leading-normal);color:var(--sn-fg);background:var(--sn-bg);-webkit-font-smoothing:antialiased}::selection{background:var(--sn-accent-soft);color:var(--sn-fg)}a{color:var(--sn-accent);text-decoration:none}a:hover{color:var(--sn-accent-hover)}@keyframes sn-spin{to{transform:rotate(360deg)}}@keyframes sn-pulse{0%,to{opacity:.3}50%{opacity:1}}@keyframes sn-blink{50%{opacity:0}}.sn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sn-font-mono);font-size:var(--sn-text-sm);font-weight:500;line-height:1;border-radius:var(--sn-r-xs);padding:0 14px;height:30px;border:1px solid transparent;cursor:pointer;transition:background var(--sn-fast) var(--sn-ease),border-color var(--sn-fast) var(--sn-ease),color var(--sn-fast) var(--sn-ease);white-space:nowrap;user-select:none;background:transparent;color:var(--sn-fg)}.sn-btn:focus-visible{outline:1px solid var(--sn-accent);outline-offset:1px}.sn-btn[disabled]{opacity:.4;cursor:not-allowed}.sn-btn--sm{height:24px;font-size:var(--sn-text-xs);padding:0 10px}.sn-btn--lg{height:36px;font-size:var(--sn-text-sm);padding:0 18px}.sn-btn--primary{background:var(--sn-fg);color:var(--sn-fg-inverse);border-color:var(--sn-fg)}.sn-btn--primary:hover{background:var(--sn-fg-muted);border-color:var(--sn-fg-muted)}.sn-btn--secondary{background:transparent;color:var(--sn-fg);border-color:var(--sn-border-strong)}.sn-btn--secondary:hover{border-color:var(--sn-fg-muted)}.sn-btn--ghost{background:transparent;color:var(--sn-fg-muted)}.sn-btn--ghost:hover{color:var(--sn-fg)}.sn-btn--accent{background:var(--sn-accent);color:var(--sn-accent-fg);border-color:var(--sn-accent)}.sn-btn--accent:hover{background:var(--sn-accent-hover);border-color:var(--sn-accent-hover)}.sn-btn--danger{background:transparent;color:var(--sn-danger);border-color:var(--sn-border-strong)}.sn-btn--danger:hover{border-color:var(--sn-danger)}.sn-input,.sn-textarea{font-family:var(--sn-font-mono);font-size:var(--sn-text-sm);color:var(--sn-fg);background:transparent;border:1px solid var(--sn-border-strong);border-radius:var(--sn-r-xs);padding:0 10px;height:30px;width:100%;transition:border-color var(--sn-fast) var(--sn-ease)}.sn-input::placeholder,.sn-textarea::placeholder{color:var(--sn-fg-faint)}.sn-input:hover,.sn-textarea:hover{border-color:var(--sn-fg-muted)}.sn-input:focus,.sn-textarea:focus{outline:none;border-color:var(--sn-accent)}.sn-input:disabled,.sn-textarea:disabled{color:var(--sn-fg-faint);cursor:not-allowed;background:var(--sn-bg-inset)}.sn-input--sm{height:26px;font-size:var(--sn-text-xs);padding:0 8px}.sn-input--lg{height:36px;font-size:var(--sn-text-base);padding:0 12px}.sn-textarea{height:auto;min-height:80px;padding:8px 10px;line-height:var(--sn-leading-normal);resize:vertical}.sn-input--invalid,.sn-input--invalid:hover,.sn-input--invalid:focus,.sn-textarea--invalid,.sn-textarea--invalid:hover,.sn-textarea--invalid:focus{border-color:var(--sn-danger)}.sn-field{display:flex;flex-direction:column;gap:6px;width:100%}.sn-label{font-family:var(--sn-font-mono);font-size:var(--sn-text-xs);color:var(--sn-fg-muted);letter-spacing:.02em}.sn-label__required{color:var(--sn-danger);margin-left:2px}.sn-hint{font-family:var(--sn-font-mono);font-size:var(--sn-text-2xs);color:var(--sn-fg-subtle);line-height:var(--sn-leading-normal)}.sn-error{font-family:var(--sn-font-mono);font-size:var(--sn-text-2xs);color:var(--sn-danger);line-height:var(--sn-leading-normal)}.sn-file{font-family:var(--sn-font-mono);font-size:var(--sn-text-sm);color:var(--sn-fg-muted);background:transparent;border:1px solid var(--sn-border-strong);border-radius:var(--sn-r-xs);width:100%;height:30px;padding:0;display:inline-flex;align-items:center;cursor:pointer;transition:border-color var(--sn-fast) var(--sn-ease)}.sn-file:hover{border-color:var(--sn-fg-muted)}.sn-file:focus-within{outline:none;border-color:var(--sn-accent)}.sn-file::file-selector-button,.sn-file::-webkit-file-upload-button{font-family:var(--sn-font-mono);font-size:var(--sn-text-xs);color:var(--sn-fg);background:var(--sn-bg-elev-1);border:none;border-right:1px solid var(--sn-border-strong);height:100%;padding:0 12px;margin-right:10px;cursor:pointer;transition:background var(--sn-fast) var(--sn-ease)}.sn-file:hover::file-selector-button,.sn-file:hover::-webkit-file-upload-button{background:var(--sn-bg-elev-2)}.sn-file:disabled{cursor:not-allowed;color:var(--sn-fg-faint);background:var(--sn-bg-inset)}.sn-file:disabled::file-selector-button,.sn-file:disabled::-webkit-file-upload-button{cursor:not-allowed;color:var(--sn-fg-faint)}.sn-card{background:transparent;border:1px solid var(--sn-border);border-radius:var(--sn-r-xs);padding:var(--sn-s-5)}.sn-card--rounded{border-radius:var(--sn-r-lg)}.sn-card--accent{border-color:var(--sn-accent-border);background:var(--sn-accent-soft)}.sn-card--inset{background:var(--sn-bg-inset)}.sn-badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--sn-font-mono);font-size:var(--sn-text-2xs);font-weight:400;padding:2px 6px;border-radius:var(--sn-r-xs);border:1px solid var(--sn-border);color:var(--sn-fg-muted);height:18px;text-transform:lowercase}.sn-badge--accent{color:var(--sn-accent);border-color:var(--sn-accent-border)}.sn-badge--success{color:var(--sn-success);border-color:#7fc77f4d}.sn-badge--warning{color:var(--sn-warning);border-color:#d4a8574d}.sn-badge--danger{color:var(--sn-danger);border-color:#d770704d}.sn-kbd{font-family:var(--sn-font-mono);font-size:var(--sn-text-2xs);border:1px solid var(--sn-border-strong);border-radius:var(--sn-r-xs);padding:1px 5px;color:var(--sn-fg-muted)}.sn-divider{height:1px;background:var(--sn-border);border:0;margin:0}.sn-meta{font-family:var(--sn-font-mono);font-size:var(--sn-text-2xs);letter-spacing:.04em;text-transform:uppercase;color:var(--sn-fg-faint)}.sn-prompt{color:var(--sn-fg-faint);user-select:none}.sn-prompt:before{content:"\203a "}.sn-icon{display:inline-block;vertical-align:middle;flex-shrink:0;color:currentColor}.sn-mark{display:inline-block;vertical-align:middle;flex-shrink:0;color:currentColor;width:var(--sn-mark-size, 32px);height:var(--sn-mark-size, 32px)}.sn-mark--xs{--sn-mark-size: 16px}.sn-mark--sm{--sn-mark-size: 24px}.sn-mark--md{--sn-mark-size: 32px}.sn-mark--lg{--sn-mark-size: 48px}.sn-mark--xl{--sn-mark-size: 64px}.sn-mark--accent{color:var(--sn-accent)}.sn-mark--muted{color:var(--sn-fg-muted)}.sn-wordmark{font-family:var(--sn-font-mono);font-size:var(--sn-wordmark-size, 18px);font-weight:700;letter-spacing:-.01em;color:currentColor;line-height:1}.sn-wordmark__dot{color:var(--sn-accent)}.sn-monogram{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--sn-monogram-bg, var(--sn-bg));color:var(--sn-monogram-fg, var(--sn-fg));width:var(--sn-monogram-size, 64px);height:var(--sn-monogram-size, 64px);border-radius:var(--sn-monogram-radius, var(--sn-r-md))}.sn-monogram--xs{--sn-monogram-size: 32px;--sn-monogram-radius: var(--sn-r-xs)}.sn-monogram--sm{--sn-monogram-size: 48px;--sn-monogram-radius: var(--sn-r-sm)}.sn-monogram--md{--sn-monogram-size: 64px;--sn-monogram-radius: var(--sn-r-md)}.sn-monogram--lg{--sn-monogram-size: 96px;--sn-monogram-radius: var(--sn-r-lg)}.sn-monogram--inverse{--sn-monogram-bg: var(--sn-fg);--sn-monogram-fg: var(--sn-bg)}.sn-avatar{display:inline-flex;align-items:center;justify-content:center;width:var(--sn-avatar-size, 32px);height:var(--sn-avatar-size, 32px);border-radius:50%;background:var(--sn-bg-elev-1);color:var(--sn-fg-muted);font-family:var(--sn-font-mono);font-size:max(10px,calc(var(--sn-avatar-size, 32px) * .38));font-weight:500;overflow:hidden;flex-shrink:0;vertical-align:middle}.sn-avatar--square{border-radius:var(--sn-r-xs)}.sn-avatar--ring{box-shadow:0 0 0 1px var(--sn-border-strong)}.sn-avatar--xs{--sn-avatar-size: 20px}.sn-avatar--sm{--sn-avatar-size: 28px}.sn-avatar--md{--sn-avatar-size: 32px}.sn-avatar--lg{--sn-avatar-size: 48px}.sn-avatar--xl{--sn-avatar-size: 64px}.sn-avatar>img{width:100%;height:100%;object-fit:cover;display:block}.sn-avatar-stack{display:inline-flex}.sn-avatar-stack>*+*{margin-left:var(--sn-avatar-overlap, -8px)}.sn-pulse{display:inline-flex;align-items:center;gap:var(--sn-s-2);color:var(--sn-fg-muted);font-size:var(--sn-text-sm)}.sn-pulse__dot{position:relative;display:inline-flex;width:var(--sn-pulse-size, 8px);height:var(--sn-pulse-size, 8px);flex-shrink:0}.sn-pulse__dot:before,.sn-pulse__dot:after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--sn-pulse-color, var(--sn-success))}.sn-pulse__dot:before{opacity:.6;animation:sn-pulse 2s ease-in-out infinite}.sn-pulse--success{--sn-pulse-color: var(--sn-success)}.sn-pulse--warning{--sn-pulse-color: var(--sn-warning)}.sn-pulse--danger{--sn-pulse-color: var(--sn-danger)}.sn-pulse--accent{--sn-pulse-color: var(--sn-accent)}.sn-copy-btn{appearance:none;border:1px solid transparent;background:transparent;color:var(--sn-fg-muted);padding:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--sn-r-xs);transition:color var(--sn-fast) var(--sn-ease),border-color var(--sn-fast) var(--sn-ease)}.sn-copy-btn:hover{color:var(--sn-fg)}.sn-copy-btn:focus-visible{outline:1px solid var(--sn-accent);outline-offset:1px}.sn-copy-btn[data-copied=true],.sn-copy-btn[data-copied=true]:hover{color:var(--sn-success)}.sn-copy-btn .sn-copy-btn__copied{display:none}.sn-copy-btn[data-copied=true] .sn-copy-btn__copied{display:inline-flex}.sn-copy-btn[data-copied=true] .sn-copy-btn__idle{display:none}.sn-theme-toggle{appearance:none;border:none;background:transparent;padding:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:opacity var(--sn-base)}.sn-theme-toggle:focus-visible{outline:1px solid var(--sn-accent);outline-offset:1px}.sn-theme-toggle__indicator{display:inline-block;width:var(--sn-theme-toggle-size, 12px);height:var(--sn-theme-toggle-size, 12px);border-radius:50%;border:1px solid var(--sn-fg-muted);background:var(--sn-fg);transition:background var(--sn-base) var(--sn-ease)}[data-theme=light] .sn-theme-toggle__indicator{background:transparent}
|
package/package.json
CHANGED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
.sn-field {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: 6px;
|
|
5
|
+
width: 100%;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.sn-label {
|
|
9
|
+
font-family: var(--sn-font-mono);
|
|
10
|
+
font-size: var(--sn-text-xs);
|
|
11
|
+
color: var(--sn-fg-muted);
|
|
12
|
+
letter-spacing: 0.02em;
|
|
13
|
+
}
|
|
14
|
+
.sn-label__required { color: var(--sn-danger); margin-left: 2px; }
|
|
15
|
+
|
|
16
|
+
.sn-hint {
|
|
17
|
+
font-family: var(--sn-font-mono);
|
|
18
|
+
font-size: var(--sn-text-2xs);
|
|
19
|
+
color: var(--sn-fg-subtle);
|
|
20
|
+
line-height: var(--sn-leading-normal);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.sn-error {
|
|
24
|
+
font-family: var(--sn-font-mono);
|
|
25
|
+
font-size: var(--sn-text-2xs);
|
|
26
|
+
color: var(--sn-danger);
|
|
27
|
+
line-height: var(--sn-leading-normal);
|
|
28
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
.sn-file {
|
|
2
|
+
font-family: var(--sn-font-mono);
|
|
3
|
+
font-size: var(--sn-text-sm);
|
|
4
|
+
color: var(--sn-fg-muted);
|
|
5
|
+
background: transparent;
|
|
6
|
+
border: 1px solid var(--sn-border-strong);
|
|
7
|
+
border-radius: var(--sn-r-xs);
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 30px;
|
|
10
|
+
padding: 0;
|
|
11
|
+
display: inline-flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
cursor: pointer;
|
|
14
|
+
transition: border-color var(--sn-fast) var(--sn-ease);
|
|
15
|
+
}
|
|
16
|
+
.sn-file:hover { border-color: var(--sn-fg-muted); }
|
|
17
|
+
.sn-file:focus-within { outline: none; border-color: var(--sn-accent); }
|
|
18
|
+
|
|
19
|
+
.sn-file::file-selector-button,
|
|
20
|
+
.sn-file::-webkit-file-upload-button {
|
|
21
|
+
font-family: var(--sn-font-mono);
|
|
22
|
+
font-size: var(--sn-text-xs);
|
|
23
|
+
color: var(--sn-fg);
|
|
24
|
+
background: var(--sn-bg-elev-1);
|
|
25
|
+
border: none;
|
|
26
|
+
border-right: 1px solid var(--sn-border-strong);
|
|
27
|
+
height: 100%;
|
|
28
|
+
padding: 0 12px;
|
|
29
|
+
margin-right: 10px;
|
|
30
|
+
cursor: pointer;
|
|
31
|
+
transition: background var(--sn-fast) var(--sn-ease);
|
|
32
|
+
}
|
|
33
|
+
.sn-file:hover::file-selector-button,
|
|
34
|
+
.sn-file:hover::-webkit-file-upload-button { background: var(--sn-bg-elev-2); }
|
|
35
|
+
|
|
36
|
+
.sn-file:disabled {
|
|
37
|
+
cursor: not-allowed;
|
|
38
|
+
color: var(--sn-fg-faint);
|
|
39
|
+
background: var(--sn-bg-inset);
|
|
40
|
+
}
|
|
41
|
+
.sn-file:disabled::file-selector-button,
|
|
42
|
+
.sn-file:disabled::-webkit-file-upload-button { cursor: not-allowed; color: var(--sn-fg-faint); }
|
package/src/components/input.css
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
.sn-input
|
|
1
|
+
.sn-input,
|
|
2
|
+
.sn-textarea {
|
|
2
3
|
font-family: var(--sn-font-mono);
|
|
3
4
|
font-size: var(--sn-text-sm);
|
|
4
5
|
color: var(--sn-fg);
|
|
@@ -10,6 +11,33 @@
|
|
|
10
11
|
width: 100%;
|
|
11
12
|
transition: border-color var(--sn-fast) var(--sn-ease);
|
|
12
13
|
}
|
|
13
|
-
.sn-input::placeholder
|
|
14
|
-
.sn-
|
|
15
|
-
.sn-input:
|
|
14
|
+
.sn-input::placeholder,
|
|
15
|
+
.sn-textarea::placeholder { color: var(--sn-fg-faint); }
|
|
16
|
+
.sn-input:hover,
|
|
17
|
+
.sn-textarea:hover { border-color: var(--sn-fg-muted); }
|
|
18
|
+
.sn-input:focus,
|
|
19
|
+
.sn-textarea:focus { outline: none; border-color: var(--sn-accent); }
|
|
20
|
+
.sn-input:disabled,
|
|
21
|
+
.sn-textarea:disabled {
|
|
22
|
+
color: var(--sn-fg-faint);
|
|
23
|
+
cursor: not-allowed;
|
|
24
|
+
background: var(--sn-bg-inset);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.sn-input--sm { height: 26px; font-size: var(--sn-text-xs); padding: 0 8px; }
|
|
28
|
+
.sn-input--lg { height: 36px; font-size: var(--sn-text-base); padding: 0 12px; }
|
|
29
|
+
|
|
30
|
+
.sn-textarea {
|
|
31
|
+
height: auto;
|
|
32
|
+
min-height: 80px;
|
|
33
|
+
padding: 8px 10px;
|
|
34
|
+
line-height: var(--sn-leading-normal);
|
|
35
|
+
resize: vertical;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.sn-input--invalid,
|
|
39
|
+
.sn-input--invalid:hover,
|
|
40
|
+
.sn-input--invalid:focus,
|
|
41
|
+
.sn-textarea--invalid,
|
|
42
|
+
.sn-textarea--invalid:hover,
|
|
43
|
+
.sn-textarea--invalid:focus { border-color: var(--sn-danger); }
|
package/src/index.css
CHANGED