@snowztech/ui-css 0.2.0 → 0.4.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.
Files changed (19) hide show
  1. package/README.md +8 -0
  2. package/dist/components/field.css +28 -0
  3. package/dist/components/file.css +42 -0
  4. package/dist/components/input.css +32 -4
  5. package/dist/components/prose.css +61 -0
  6. package/dist/components/theme-toggle.css +3 -0
  7. package/dist/components/toc.css +39 -0
  8. package/dist/snowztech-ui.css +348 -4
  9. package/dist/snowztech-ui.min.css +1 -1
  10. package/dist/tokens.css +28 -0
  11. package/package.json +1 -1
  12. package/src/components/field.css +28 -0
  13. package/src/components/file.css +42 -0
  14. package/src/components/input.css +32 -4
  15. package/src/components/prose.css +61 -0
  16. package/src/components/theme-toggle.css +3 -0
  17. package/src/components/toc.css +39 -0
  18. package/src/index.css +4 -0
  19. package/src/tokens.css +28 -0
package/README.md CHANGED
@@ -55,6 +55,8 @@ Tokens prefix `--sn-`. Classes prefix `sn-`. Modifier classes use `--`.
55
55
  | `sn-avatar-stack` | · |
56
56
  | `sn-pulse` | `--success --warning --danger --accent` |
57
57
  | `sn-copy-btn` | uses `data-copied="true"` |
58
+ | `sn-prose` | styles the plain HTML of an article inside it |
59
+ | `sn-toc`, `sn-toc-layout` | contents box, sticky beside the text on wide screens |
58
60
  | `sn-theme-toggle` | reads `[data-theme="light"]` from `<html>` |
59
61
 
60
62
  ## Theming
@@ -65,6 +67,12 @@ Default is dark. Switch by setting `data-theme="light"` on `<html>`:
65
67
  document.documentElement.setAttribute("data-theme", "light");
66
68
  ```
67
69
 
70
+ Or follow the OS with `data-theme="system"`. The theme toggle still overrides it:
71
+
72
+ ```html
73
+ <html data-theme="system">
74
+ ```
75
+
68
76
  Override any token by re-declaring on `:root` or a scope:
69
77
 
70
78
  ```css
package/dist/components/field.css ADDED
@@ -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
+ }
package/dist/components/file.css ADDED
@@ -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/dist/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 { color: var(--sn-fg-faint); }
14
- .sn-input:hover { border-color: var(--sn-fg-muted); }
15
- .sn-input:focus { outline: none; border-color: var(--sn-accent); }
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/components/prose.css ADDED
@@ -0,0 +1,61 @@
1
+ .sn-prose {
2
+ max-width: 680px;
3
+ font-size: var(--sn-text-base);
4
+ line-height: var(--sn-leading-normal);
5
+ color: var(--sn-fg-muted);
6
+ }
7
+
8
+ .sn-prose h1,
9
+ .sn-prose h2,
10
+ .sn-prose h3 { color: var(--sn-fg); font-weight: 600; }
11
+ .sn-prose h1 { margin: 0 0 var(--sn-s-6); font-size: var(--sn-text-3xl); line-height: 1.25; letter-spacing: -0.02em; }
12
+ .sn-prose h2 { margin: var(--sn-s-9) 0 var(--sn-s-4); font-size: var(--sn-text-xl); line-height: var(--sn-leading-tight); letter-spacing: -0.01em; }
13
+ .sn-prose h3 { margin: var(--sn-s-7) 0 var(--sn-s-2); font-size: inherit; }
14
+ /* Keeps a heading off the top edge when a contents link jumps to it. */
15
+ .sn-prose :is(h2, h3)[id] { scroll-margin-top: var(--sn-s-6); }
16
+
17
+ .sn-prose :is(p, ul, ol, blockquote, pre, table, figure) { margin: 0 0 var(--sn-s-4); }
18
+ .sn-prose :is(ul, ol) { padding-left: var(--sn-s-5); }
19
+ .sn-prose li + li { margin-top: var(--sn-s-2); }
20
+
21
+ .sn-prose a { color: var(--sn-fg); text-decoration: underline; text-underline-offset: 3px; }
22
+ .sn-prose a:hover { color: var(--sn-accent); }
23
+ .sn-prose strong { color: var(--sn-fg); font-weight: 600; }
24
+
25
+ .sn-prose code {
26
+ padding: 1px 5px;
27
+ border: 1px solid var(--sn-border-subtle);
28
+ border-radius: var(--sn-r-sm);
29
+ background: var(--sn-bg-elev-1);
30
+ color: var(--sn-fg);
31
+ font: inherit;
32
+ overflow-wrap: anywhere;
33
+ }
34
+ .sn-prose pre {
35
+ padding: var(--sn-s-4) 18px;
36
+ overflow-x: auto;
37
+ border: 1px solid var(--sn-border-subtle);
38
+ border-radius: var(--sn-r-lg);
39
+ background: var(--sn-bg-elev-1);
40
+ color: var(--sn-fg);
41
+ font-size: var(--sn-text-sm);
42
+ line-height: 1.6;
43
+ tab-size: 4;
44
+ }
45
+ .sn-prose pre code { padding: 0; border: 0; background: none; overflow-wrap: normal; }
46
+
47
+ .sn-prose blockquote { padding-left: var(--sn-s-4); border-left: 2px solid var(--sn-border-strong); color: var(--sn-fg); }
48
+ .sn-prose img { max-width: 100%; height: auto; }
49
+ .sn-prose hr { height: 1px; margin: var(--sn-s-9) 0; border: 0; background: var(--sn-border); }
50
+
51
+ .sn-prose table { width: 100%; border-collapse: collapse; font-size: var(--sn-text-sm); }
52
+ .sn-prose :is(th, td) { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sn-border-subtle); }
53
+ .sn-prose thead th { color: var(--sn-fg); font-weight: 600; background: var(--sn-bg-elev-1); }
54
+ .sn-prose tbody th { color: var(--sn-fg); font-weight: 500; }
55
+ .sn-prose tr:last-child :is(th, td) { border-bottom: 0; }
56
+
57
+ @media (max-width: 600px) {
58
+ .sn-prose h1 { font-size: 23px; }
59
+ .sn-prose h2 { margin-top: var(--sn-s-8); font-size: 18px; }
60
+ .sn-prose pre { padding: 14px; font-size: var(--sn-text-xs); }
61
+ }
package/dist/components/theme-toggle.css CHANGED
@@ -21,3 +21,6 @@
21
21
  transition: background var(--sn-base) var(--sn-ease);
22
22
  }
23
23
  [data-theme="light"] .sn-theme-toggle__indicator { background: transparent; }
24
+ @media (prefers-color-scheme: light) {
25
+ [data-theme="system"] .sn-theme-toggle__indicator { background: transparent; }
26
+ }
package/dist/components/toc.css ADDED
@@ -0,0 +1,39 @@
1
+ .sn-toc { margin-bottom: var(--sn-s-7); font-size: var(--sn-text-sm); }
2
+ .sn-toc details { padding: var(--sn-s-3) var(--sn-s-4); border: 1px solid var(--sn-border-subtle); border-radius: var(--sn-r-lg); }
3
+ .sn-toc summary { cursor: pointer; color: var(--sn-fg); font-weight: 500; }
4
+ .sn-toc ul { list-style: none; margin: var(--sn-s-3) 0 0; padding: 0; }
5
+ .sn-toc li + li { margin-top: var(--sn-s-2); }
6
+ .sn-toc a { color: var(--sn-fg-muted); text-decoration: none; }
7
+ .sn-toc a:hover,
8
+ .sn-toc a[aria-current] { color: var(--sn-fg); }
9
+
10
+ /* Wide screens: the contents leave the flow and sit sticky beside the text.
11
+ The layout holds an optional header, the .sn-toc and the text, in that order. */
12
+ .sn-toc-layout { display: grid; }
13
+ @media (min-width: 1000px) {
14
+ .sn-toc-layout {
15
+ grid-template-columns: minmax(0, 680px) 220px;
16
+ column-gap: var(--sn-s-10);
17
+ justify-content: center;
18
+ }
19
+ .sn-toc-layout > * { grid-column: 1; }
20
+ .sn-toc-layout > .sn-toc {
21
+ grid-column: 2;
22
+ grid-row: 1 / span 2;
23
+ align-self: start;
24
+ position: sticky;
25
+ top: var(--sn-s-6);
26
+ margin: 0;
27
+ padding-top: var(--sn-s-2);
28
+ }
29
+ .sn-toc-layout > .sn-toc details { padding: 0; border: 0; }
30
+ .sn-toc-layout > .sn-toc summary {
31
+ list-style: none;
32
+ pointer-events: none;
33
+ color: var(--sn-fg-subtle);
34
+ font-size: var(--sn-text-xs);
35
+ letter-spacing: 0.12em;
36
+ text-transform: uppercase;
37
+ }
38
+ .sn-toc-layout > .sn-toc summary::-webkit-details-marker { display: none; }
39
+ }
package/dist/snowztech-ui.css CHANGED
@@ -95,6 +95,28 @@
95
95
  --sn-accent-soft: rgba(42, 100, 214, 0.08);
96
96
  --sn-accent-border: rgba(42, 100, 214, 0.24);
97
97
  }
98
+ @media (prefers-color-scheme: light) {
99
+ [data-theme=system] {
100
+ --sn-bg: #f7f7f5;
101
+ --sn-bg-elev-1: #ffffff;
102
+ --sn-bg-elev-2: #ffffff;
103
+ --sn-bg-inset: #efefec;
104
+ --sn-border: #e2e2dd;
105
+ --sn-border-strong: #c8c8c2;
106
+ --sn-border-subtle: #ececea;
107
+ --sn-fg: #161616;
108
+ --sn-fg-muted: #6a6a6a;
109
+ --sn-fg-subtle: #888888;
110
+ --sn-fg-faint: #b0b0ad;
111
+ --sn-fg-inverse: #ffffff;
112
+ --sn-accent: #2a64d6;
113
+ --sn-accent-hover: #1f56c2;
114
+ --sn-accent-active: #194ba8;
115
+ --sn-accent-fg: #ffffff;
116
+ --sn-accent-soft: rgba(42, 100, 214, 0.08);
117
+ --sn-accent-border: rgba(42, 100, 214, 0.24);
118
+ }
119
+ }
98
120
 
99
121
  /* src/base.css */
100
122
  *,
@@ -234,7 +256,8 @@ a:hover {
234
256
  }
235
257
 
236
258
  /* src/components/input.css */
237
- .sn-input {
259
+ .sn-input,
260
+ .sn-textarea {
238
261
  font-family: var(--sn-font-mono);
239
262
  font-size: var(--sn-text-sm);
240
263
  color: var(--sn-fg);
@@ -246,16 +269,132 @@ a:hover {
246
269
  width: 100%;
247
270
  transition: border-color var(--sn-fast) var(--sn-ease);
248
271
  }
249
- .sn-input::placeholder {
272
+ .sn-input::placeholder,
273
+ .sn-textarea::placeholder {
250
274
  color: var(--sn-fg-faint);
251
275
  }
252
- .sn-input:hover {
276
+ .sn-input:hover,
277
+ .sn-textarea:hover {
253
278
  border-color: var(--sn-fg-muted);
254
279
  }
255
- .sn-input:focus {
280
+ .sn-input:focus,
281
+ .sn-textarea:focus {
256
282
  outline: none;
257
283
  border-color: var(--sn-accent);
258
284
  }
285
+ .sn-input:disabled,
286
+ .sn-textarea:disabled {
287
+ color: var(--sn-fg-faint);
288
+ cursor: not-allowed;
289
+ background: var(--sn-bg-inset);
290
+ }
291
+ .sn-input--sm {
292
+ height: 26px;
293
+ font-size: var(--sn-text-xs);
294
+ padding: 0 8px;
295
+ }
296
+ .sn-input--lg {
297
+ height: 36px;
298
+ font-size: var(--sn-text-base);
299
+ padding: 0 12px;
300
+ }
301
+ .sn-textarea {
302
+ height: auto;
303
+ min-height: 80px;
304
+ padding: 8px 10px;
305
+ line-height: var(--sn-leading-normal);
306
+ resize: vertical;
307
+ }
308
+ .sn-input--invalid,
309
+ .sn-input--invalid:hover,
310
+ .sn-input--invalid:focus,
311
+ .sn-textarea--invalid,
312
+ .sn-textarea--invalid:hover,
313
+ .sn-textarea--invalid:focus {
314
+ border-color: var(--sn-danger);
315
+ }
316
+
317
+ /* src/components/field.css */
318
+ .sn-field {
319
+ display: flex;
320
+ flex-direction: column;
321
+ gap: 6px;
322
+ width: 100%;
323
+ }
324
+ .sn-label {
325
+ font-family: var(--sn-font-mono);
326
+ font-size: var(--sn-text-xs);
327
+ color: var(--sn-fg-muted);
328
+ letter-spacing: 0.02em;
329
+ }
330
+ .sn-label__required {
331
+ color: var(--sn-danger);
332
+ margin-left: 2px;
333
+ }
334
+ .sn-hint {
335
+ font-family: var(--sn-font-mono);
336
+ font-size: var(--sn-text-2xs);
337
+ color: var(--sn-fg-subtle);
338
+ line-height: var(--sn-leading-normal);
339
+ }
340
+ .sn-error {
341
+ font-family: var(--sn-font-mono);
342
+ font-size: var(--sn-text-2xs);
343
+ color: var(--sn-danger);
344
+ line-height: var(--sn-leading-normal);
345
+ }
346
+
347
+ /* src/components/file.css */
348
+ .sn-file {
349
+ font-family: var(--sn-font-mono);
350
+ font-size: var(--sn-text-sm);
351
+ color: var(--sn-fg-muted);
352
+ background: transparent;
353
+ border: 1px solid var(--sn-border-strong);
354
+ border-radius: var(--sn-r-xs);
355
+ width: 100%;
356
+ height: 30px;
357
+ padding: 0;
358
+ display: inline-flex;
359
+ align-items: center;
360
+ cursor: pointer;
361
+ transition: border-color var(--sn-fast) var(--sn-ease);
362
+ }
363
+ .sn-file:hover {
364
+ border-color: var(--sn-fg-muted);
365
+ }
366
+ .sn-file:focus-within {
367
+ outline: none;
368
+ border-color: var(--sn-accent);
369
+ }
370
+ .sn-file::file-selector-button,
371
+ .sn-file::-webkit-file-upload-button {
372
+ font-family: var(--sn-font-mono);
373
+ font-size: var(--sn-text-xs);
374
+ color: var(--sn-fg);
375
+ background: var(--sn-bg-elev-1);
376
+ border: none;
377
+ border-right: 1px solid var(--sn-border-strong);
378
+ height: 100%;
379
+ padding: 0 12px;
380
+ margin-right: 10px;
381
+ cursor: pointer;
382
+ transition: background var(--sn-fast) var(--sn-ease);
383
+ }
384
+ .sn-file:hover::file-selector-button,
385
+ .sn-file:hover::-webkit-file-upload-button {
386
+ background: var(--sn-bg-elev-2);
387
+ }
388
+ .sn-file:disabled {
389
+ cursor: not-allowed;
390
+ color: var(--sn-fg-faint);
391
+ background: var(--sn-bg-inset);
392
+ }
393
+ .sn-file:disabled::file-selector-button,
394
+ .sn-file:disabled::-webkit-file-upload-button {
395
+ cursor: not-allowed;
396
+ color: var(--sn-fg-faint);
397
+ }
259
398
 
260
399
  /* src/components/card.css */
261
400
  .sn-card {
@@ -550,6 +689,206 @@ a:hover {
550
689
  display: none;
551
690
  }
552
691
 
692
+ /* src/components/prose.css */
693
+ .sn-prose {
694
+ max-width: 680px;
695
+ font-size: var(--sn-text-base);
696
+ line-height: var(--sn-leading-normal);
697
+ color: var(--sn-fg-muted);
698
+ }
699
+ .sn-prose h1,
700
+ .sn-prose h2,
701
+ .sn-prose h3 {
702
+ color: var(--sn-fg);
703
+ font-weight: 600;
704
+ }
705
+ .sn-prose h1 {
706
+ margin: 0 0 var(--sn-s-6);
707
+ font-size: var(--sn-text-3xl);
708
+ line-height: 1.25;
709
+ letter-spacing: -0.02em;
710
+ }
711
+ .sn-prose h2 {
712
+ margin: var(--sn-s-9) 0 var(--sn-s-4);
713
+ font-size: var(--sn-text-xl);
714
+ line-height: var(--sn-leading-tight);
715
+ letter-spacing: -0.01em;
716
+ }
717
+ .sn-prose h3 {
718
+ margin: var(--sn-s-7) 0 var(--sn-s-2);
719
+ font-size: inherit;
720
+ }
721
+ .sn-prose :is(h2, h3)[id] {
722
+ scroll-margin-top: var(--sn-s-6);
723
+ }
724
+ .sn-prose :is(p, ul, ol, blockquote, pre, table, figure) {
725
+ margin: 0 0 var(--sn-s-4);
726
+ }
727
+ .sn-prose :is(ul, ol) {
728
+ padding-left: var(--sn-s-5);
729
+ }
730
+ .sn-prose li + li {
731
+ margin-top: var(--sn-s-2);
732
+ }
733
+ .sn-prose a {
734
+ color: var(--sn-fg);
735
+ text-decoration: underline;
736
+ text-underline-offset: 3px;
737
+ }
738
+ .sn-prose a:hover {
739
+ color: var(--sn-accent);
740
+ }
741
+ .sn-prose strong {
742
+ color: var(--sn-fg);
743
+ font-weight: 600;
744
+ }
745
+ .sn-prose code {
746
+ padding: 1px 5px;
747
+ border: 1px solid var(--sn-border-subtle);
748
+ border-radius: var(--sn-r-sm);
749
+ background: var(--sn-bg-elev-1);
750
+ color: var(--sn-fg);
751
+ font: inherit;
752
+ overflow-wrap: anywhere;
753
+ }
754
+ .sn-prose pre {
755
+ padding: var(--sn-s-4) 18px;
756
+ overflow-x: auto;
757
+ border: 1px solid var(--sn-border-subtle);
758
+ border-radius: var(--sn-r-lg);
759
+ background: var(--sn-bg-elev-1);
760
+ color: var(--sn-fg);
761
+ font-size: var(--sn-text-sm);
762
+ line-height: 1.6;
763
+ tab-size: 4;
764
+ }
765
+ .sn-prose pre code {
766
+ padding: 0;
767
+ border: 0;
768
+ background: none;
769
+ overflow-wrap: normal;
770
+ }
771
+ .sn-prose blockquote {
772
+ padding-left: var(--sn-s-4);
773
+ border-left: 2px solid var(--sn-border-strong);
774
+ color: var(--sn-fg);
775
+ }
776
+ .sn-prose img {
777
+ max-width: 100%;
778
+ height: auto;
779
+ }
780
+ .sn-prose hr {
781
+ height: 1px;
782
+ margin: var(--sn-s-9) 0;
783
+ border: 0;
784
+ background: var(--sn-border);
785
+ }
786
+ .sn-prose table {
787
+ width: 100%;
788
+ border-collapse: collapse;
789
+ font-size: var(--sn-text-sm);
790
+ }
791
+ .sn-prose :is(th, td) {
792
+ padding: 10px 12px;
793
+ text-align: left;
794
+ vertical-align: top;
795
+ border-bottom: 1px solid var(--sn-border-subtle);
796
+ }
797
+ .sn-prose thead th {
798
+ color: var(--sn-fg);
799
+ font-weight: 600;
800
+ background: var(--sn-bg-elev-1);
801
+ }
802
+ .sn-prose tbody th {
803
+ color: var(--sn-fg);
804
+ font-weight: 500;
805
+ }
806
+ .sn-prose tr:last-child :is(th, td) {
807
+ border-bottom: 0;
808
+ }
809
+ @media (max-width: 600px) {
810
+ .sn-prose h1 {
811
+ font-size: 23px;
812
+ }
813
+ .sn-prose h2 {
814
+ margin-top: var(--sn-s-8);
815
+ font-size: 18px;
816
+ }
817
+ .sn-prose pre {
818
+ padding: 14px;
819
+ font-size: var(--sn-text-xs);
820
+ }
821
+ }
822
+
823
+ /* src/components/toc.css */
824
+ .sn-toc {
825
+ margin-bottom: var(--sn-s-7);
826
+ font-size: var(--sn-text-sm);
827
+ }
828
+ .sn-toc details {
829
+ padding: var(--sn-s-3) var(--sn-s-4);
830
+ border: 1px solid var(--sn-border-subtle);
831
+ border-radius: var(--sn-r-lg);
832
+ }
833
+ .sn-toc summary {
834
+ cursor: pointer;
835
+ color: var(--sn-fg);
836
+ font-weight: 500;
837
+ }
838
+ .sn-toc ul {
839
+ list-style: none;
840
+ margin: var(--sn-s-3) 0 0;
841
+ padding: 0;
842
+ }
843
+ .sn-toc li + li {
844
+ margin-top: var(--sn-s-2);
845
+ }
846
+ .sn-toc a {
847
+ color: var(--sn-fg-muted);
848
+ text-decoration: none;
849
+ }
850
+ .sn-toc a:hover,
851
+ .sn-toc a[aria-current] {
852
+ color: var(--sn-fg);
853
+ }
854
+ .sn-toc-layout {
855
+ display: grid;
856
+ }
857
+ @media (min-width: 1000px) {
858
+ .sn-toc-layout {
859
+ grid-template-columns: minmax(0, 680px) 220px;
860
+ column-gap: var(--sn-s-10);
861
+ justify-content: center;
862
+ }
863
+ .sn-toc-layout > * {
864
+ grid-column: 1;
865
+ }
866
+ .sn-toc-layout > .sn-toc {
867
+ grid-column: 2;
868
+ grid-row: 1 / span 2;
869
+ align-self: start;
870
+ position: sticky;
871
+ top: var(--sn-s-6);
872
+ margin: 0;
873
+ padding-top: var(--sn-s-2);
874
+ }
875
+ .sn-toc-layout > .sn-toc details {
876
+ padding: 0;
877
+ border: 0;
878
+ }
879
+ .sn-toc-layout > .sn-toc summary {
880
+ list-style: none;
881
+ pointer-events: none;
882
+ color: var(--sn-fg-subtle);
883
+ font-size: var(--sn-text-xs);
884
+ letter-spacing: 0.12em;
885
+ text-transform: uppercase;
886
+ }
887
+ .sn-toc-layout > .sn-toc summary::-webkit-details-marker {
888
+ display: none;
889
+ }
890
+ }
891
+
553
892
  /* src/components/theme-toggle.css */
554
893
  .sn-theme-toggle {
555
894
  appearance: none;
@@ -578,5 +917,10 @@ a:hover {
578
917
  [data-theme=light] .sn-theme-toggle__indicator {
579
918
  background: transparent;
580
919
  }
920
+ @media (prefers-color-scheme: light) {
921
+ [data-theme=system] .sn-theme-toggle__indicator {
922
+ background: transparent;
923
+ }
924
+ }
581
925
 
582
926
  /* src/index.css */
package/dist/snowztech-ui.min.css CHANGED
@@ -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)}@media(prefers-color-scheme:light){[data-theme=system]{--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-prose{max-width:680px;font-size:var(--sn-text-base);line-height:var(--sn-leading-normal);color:var(--sn-fg-muted)}.sn-prose h1,.sn-prose h2,.sn-prose h3{color:var(--sn-fg);font-weight:600}.sn-prose h1{margin:0 0 var(--sn-s-6);font-size:var(--sn-text-3xl);line-height:1.25;letter-spacing:-.02em}.sn-prose h2{margin:var(--sn-s-9) 0 var(--sn-s-4);font-size:var(--sn-text-xl);line-height:var(--sn-leading-tight);letter-spacing:-.01em}.sn-prose h3{margin:var(--sn-s-7) 0 var(--sn-s-2);font-size:inherit}.sn-prose :is(h2,h3)[id]{scroll-margin-top:var(--sn-s-6)}.sn-prose :is(p,ul,ol,blockquote,pre,table,figure){margin:0 0 var(--sn-s-4)}.sn-prose :is(ul,ol){padding-left:var(--sn-s-5)}.sn-prose li+li{margin-top:var(--sn-s-2)}.sn-prose a{color:var(--sn-fg);text-decoration:underline;text-underline-offset:3px}.sn-prose a:hover{color:var(--sn-accent)}.sn-prose strong{color:var(--sn-fg);font-weight:600}.sn-prose code{padding:1px 5px;border:1px solid var(--sn-border-subtle);border-radius:var(--sn-r-sm);background:var(--sn-bg-elev-1);color:var(--sn-fg);font:inherit;overflow-wrap:anywhere}.sn-prose pre{padding:var(--sn-s-4) 18px;overflow-x:auto;border:1px solid var(--sn-border-subtle);border-radius:var(--sn-r-lg);background:var(--sn-bg-elev-1);color:var(--sn-fg);font-size:var(--sn-text-sm);line-height:1.6;tab-size:4}.sn-prose pre code{padding:0;border:0;background:none;overflow-wrap:normal}.sn-prose blockquote{padding-left:var(--sn-s-4);border-left:2px solid var(--sn-border-strong);color:var(--sn-fg)}.sn-prose img{max-width:100%;height:auto}.sn-prose hr{height:1px;margin:var(--sn-s-9) 0;border:0;background:var(--sn-border)}.sn-prose table{width:100%;border-collapse:collapse;font-size:var(--sn-text-sm)}.sn-prose :is(th,td){padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--sn-border-subtle)}.sn-prose thead th{color:var(--sn-fg);font-weight:600;background:var(--sn-bg-elev-1)}.sn-prose tbody th{color:var(--sn-fg);font-weight:500}.sn-prose tr:last-child :is(th,td){border-bottom:0}@media(max-width:600px){.sn-prose h1{font-size:23px}.sn-prose h2{margin-top:var(--sn-s-8);font-size:18px}.sn-prose pre{padding:14px;font-size:var(--sn-text-xs)}}.sn-toc{margin-bottom:var(--sn-s-7);font-size:var(--sn-text-sm)}.sn-toc details{padding:var(--sn-s-3) var(--sn-s-4);border:1px solid var(--sn-border-subtle);border-radius:var(--sn-r-lg)}.sn-toc summary{cursor:pointer;color:var(--sn-fg);font-weight:500}.sn-toc ul{list-style:none;margin:var(--sn-s-3) 0 0;padding:0}.sn-toc li+li{margin-top:var(--sn-s-2)}.sn-toc a{color:var(--sn-fg-muted);text-decoration:none}.sn-toc a:hover,.sn-toc a[aria-current]{color:var(--sn-fg)}.sn-toc-layout{display:grid}@media(min-width:1000px){.sn-toc-layout{grid-template-columns:minmax(0,680px) 220px;column-gap:var(--sn-s-10);justify-content:center}.sn-toc-layout>*{grid-column:1}.sn-toc-layout>.sn-toc{grid-column:2;grid-row:1 / span 2;align-self:start;position:sticky;top:var(--sn-s-6);margin:0;padding-top:var(--sn-s-2)}.sn-toc-layout>.sn-toc details{padding:0;border:0}.sn-toc-layout>.sn-toc summary{list-style:none;pointer-events:none;color:var(--sn-fg-subtle);font-size:var(--sn-text-xs);letter-spacing:.12em;text-transform:uppercase}.sn-toc-layout>.sn-toc summary::-webkit-details-marker{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}@media(prefers-color-scheme:light){[data-theme=system] .sn-theme-toggle__indicator{background:transparent}}
package/dist/tokens.css CHANGED
@@ -94,3 +94,31 @@
94
94
  --sn-accent-soft: rgba(42, 100, 214, 0.08);
95
95
  --sn-accent-border: rgba(42, 100, 214, 0.24);
96
96
  }
97
+
98
+ /* Opt in with <html data-theme="system"> to follow the OS. A toggle that sets
99
+ light or dark replaces the attribute, so the user's pick still wins. */
100
+ @media (prefers-color-scheme: light) {
101
+ [data-theme="system"] {
102
+ --sn-bg: #f7f7f5;
103
+ --sn-bg-elev-1: #ffffff;
104
+ --sn-bg-elev-2: #ffffff;
105
+ --sn-bg-inset: #efefec;
106
+
107
+ --sn-border: #e2e2dd;
108
+ --sn-border-strong: #c8c8c2;
109
+ --sn-border-subtle: #ececea;
110
+
111
+ --sn-fg: #161616;
112
+ --sn-fg-muted: #6a6a6a;
113
+ --sn-fg-subtle: #888888;
114
+ --sn-fg-faint: #b0b0ad;
115
+ --sn-fg-inverse: #ffffff;
116
+
117
+ --sn-accent: #2a64d6;
118
+ --sn-accent-hover: #1f56c2;
119
+ --sn-accent-active: #194ba8;
120
+ --sn-accent-fg: #ffffff;
121
+ --sn-accent-soft: rgba(42, 100, 214, 0.08);
122
+ --sn-accent-border: rgba(42, 100, 214, 0.24);
123
+ }
124
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@snowztech/ui-css",
3
- "version": "0.2.0",
3
+ "version": "0.4.0",
4
4
  "description": "Terminal-minimal CSS design system. Tokens, resets, and component classes. Framework-agnostic.",
5
5
  "license": "MIT",
6
6
  "author": {
package/src/components/field.css ADDED
@@ -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
+ }
package/src/components/file.css ADDED
@@ -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 { color: var(--sn-fg-faint); }
14
- .sn-input:hover { border-color: var(--sn-fg-muted); }
15
- .sn-input:focus { outline: none; border-color: var(--sn-accent); }
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/components/prose.css ADDED
@@ -0,0 +1,61 @@
1
+ .sn-prose {
2
+ max-width: 680px;
3
+ font-size: var(--sn-text-base);
4
+ line-height: var(--sn-leading-normal);
5
+ color: var(--sn-fg-muted);
6
+ }
7
+
8
+ .sn-prose h1,
9
+ .sn-prose h2,
10
+ .sn-prose h3 { color: var(--sn-fg); font-weight: 600; }
11
+ .sn-prose h1 { margin: 0 0 var(--sn-s-6); font-size: var(--sn-text-3xl); line-height: 1.25; letter-spacing: -0.02em; }
12
+ .sn-prose h2 { margin: var(--sn-s-9) 0 var(--sn-s-4); font-size: var(--sn-text-xl); line-height: var(--sn-leading-tight); letter-spacing: -0.01em; }
13
+ .sn-prose h3 { margin: var(--sn-s-7) 0 var(--sn-s-2); font-size: inherit; }
14
+ /* Keeps a heading off the top edge when a contents link jumps to it. */
15
+ .sn-prose :is(h2, h3)[id] { scroll-margin-top: var(--sn-s-6); }
16
+
17
+ .sn-prose :is(p, ul, ol, blockquote, pre, table, figure) { margin: 0 0 var(--sn-s-4); }
18
+ .sn-prose :is(ul, ol) { padding-left: var(--sn-s-5); }
19
+ .sn-prose li + li { margin-top: var(--sn-s-2); }
20
+
21
+ .sn-prose a { color: var(--sn-fg); text-decoration: underline; text-underline-offset: 3px; }
22
+ .sn-prose a:hover { color: var(--sn-accent); }
23
+ .sn-prose strong { color: var(--sn-fg); font-weight: 600; }
24
+
25
+ .sn-prose code {
26
+ padding: 1px 5px;
27
+ border: 1px solid var(--sn-border-subtle);
28
+ border-radius: var(--sn-r-sm);
29
+ background: var(--sn-bg-elev-1);
30
+ color: var(--sn-fg);
31
+ font: inherit;
32
+ overflow-wrap: anywhere;
33
+ }
34
+ .sn-prose pre {
35
+ padding: var(--sn-s-4) 18px;
36
+ overflow-x: auto;
37
+ border: 1px solid var(--sn-border-subtle);
38
+ border-radius: var(--sn-r-lg);
39
+ background: var(--sn-bg-elev-1);
40
+ color: var(--sn-fg);
41
+ font-size: var(--sn-text-sm);
42
+ line-height: 1.6;
43
+ tab-size: 4;
44
+ }
45
+ .sn-prose pre code { padding: 0; border: 0; background: none; overflow-wrap: normal; }
46
+
47
+ .sn-prose blockquote { padding-left: var(--sn-s-4); border-left: 2px solid var(--sn-border-strong); color: var(--sn-fg); }
48
+ .sn-prose img { max-width: 100%; height: auto; }
49
+ .sn-prose hr { height: 1px; margin: var(--sn-s-9) 0; border: 0; background: var(--sn-border); }
50
+
51
+ .sn-prose table { width: 100%; border-collapse: collapse; font-size: var(--sn-text-sm); }
52
+ .sn-prose :is(th, td) { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sn-border-subtle); }
53
+ .sn-prose thead th { color: var(--sn-fg); font-weight: 600; background: var(--sn-bg-elev-1); }
54
+ .sn-prose tbody th { color: var(--sn-fg); font-weight: 500; }
55
+ .sn-prose tr:last-child :is(th, td) { border-bottom: 0; }
56
+
57
+ @media (max-width: 600px) {
58
+ .sn-prose h1 { font-size: 23px; }
59
+ .sn-prose h2 { margin-top: var(--sn-s-8); font-size: 18px; }
60
+ .sn-prose pre { padding: 14px; font-size: var(--sn-text-xs); }
61
+ }
package/src/components/theme-toggle.css CHANGED
@@ -21,3 +21,6 @@
21
21
  transition: background var(--sn-base) var(--sn-ease);
22
22
  }
23
23
  [data-theme="light"] .sn-theme-toggle__indicator { background: transparent; }
24
+ @media (prefers-color-scheme: light) {
25
+ [data-theme="system"] .sn-theme-toggle__indicator { background: transparent; }
26
+ }
package/src/components/toc.css ADDED
@@ -0,0 +1,39 @@
1
+ .sn-toc { margin-bottom: var(--sn-s-7); font-size: var(--sn-text-sm); }
2
+ .sn-toc details { padding: var(--sn-s-3) var(--sn-s-4); border: 1px solid var(--sn-border-subtle); border-radius: var(--sn-r-lg); }
3
+ .sn-toc summary { cursor: pointer; color: var(--sn-fg); font-weight: 500; }
4
+ .sn-toc ul { list-style: none; margin: var(--sn-s-3) 0 0; padding: 0; }
5
+ .sn-toc li + li { margin-top: var(--sn-s-2); }
6
+ .sn-toc a { color: var(--sn-fg-muted); text-decoration: none; }
7
+ .sn-toc a:hover,
8
+ .sn-toc a[aria-current] { color: var(--sn-fg); }
9
+
10
+ /* Wide screens: the contents leave the flow and sit sticky beside the text.
11
+ The layout holds an optional header, the .sn-toc and the text, in that order. */
12
+ .sn-toc-layout { display: grid; }
13
+ @media (min-width: 1000px) {
14
+ .sn-toc-layout {
15
+ grid-template-columns: minmax(0, 680px) 220px;
16
+ column-gap: var(--sn-s-10);
17
+ justify-content: center;
18
+ }
19
+ .sn-toc-layout > * { grid-column: 1; }
20
+ .sn-toc-layout > .sn-toc {
21
+ grid-column: 2;
22
+ grid-row: 1 / span 2;
23
+ align-self: start;
24
+ position: sticky;
25
+ top: var(--sn-s-6);
26
+ margin: 0;
27
+ padding-top: var(--sn-s-2);
28
+ }
29
+ .sn-toc-layout > .sn-toc details { padding: 0; border: 0; }
30
+ .sn-toc-layout > .sn-toc summary {
31
+ list-style: none;
32
+ pointer-events: none;
33
+ color: var(--sn-fg-subtle);
34
+ font-size: var(--sn-text-xs);
35
+ letter-spacing: 0.12em;
36
+ text-transform: uppercase;
37
+ }
38
+ .sn-toc-layout > .sn-toc summary::-webkit-details-marker { display: none; }
39
+ }
package/src/index.css CHANGED
@@ -3,6 +3,8 @@
3
3
 
4
4
  @import "./components/btn.css";
5
5
  @import "./components/input.css";
6
+ @import "./components/field.css";
7
+ @import "./components/file.css";
6
8
  @import "./components/card.css";
7
9
  @import "./components/badge.css";
8
10
  @import "./components/kbd.css";
@@ -14,4 +16,6 @@
14
16
  @import "./components/avatar.css";
15
17
  @import "./components/pulse.css";
16
18
  @import "./components/copy-button.css";
19
+ @import "./components/prose.css";
20
+ @import "./components/toc.css";
17
21
  @import "./components/theme-toggle.css";
package/src/tokens.css CHANGED
@@ -94,3 +94,31 @@
94
94
  --sn-accent-soft: rgba(42, 100, 214, 0.08);
95
95
  --sn-accent-border: rgba(42, 100, 214, 0.24);
96
96
  }
97
+
98
+ /* Opt in with <html data-theme="system"> to follow the OS. A toggle that sets
99
+ light or dark replaces the attribute, so the user's pick still wins. */
100
+ @media (prefers-color-scheme: light) {
101
+ [data-theme="system"] {
102
+ --sn-bg: #f7f7f5;
103
+ --sn-bg-elev-1: #ffffff;
104
+ --sn-bg-elev-2: #ffffff;
105
+ --sn-bg-inset: #efefec;
106
+
107
+ --sn-border: #e2e2dd;
108
+ --sn-border-strong: #c8c8c2;
109
+ --sn-border-subtle: #ececea;
110
+
111
+ --sn-fg: #161616;
112
+ --sn-fg-muted: #6a6a6a;
113
+ --sn-fg-subtle: #888888;
114
+ --sn-fg-faint: #b0b0ad;
115
+ --sn-fg-inverse: #ffffff;
116
+
117
+ --sn-accent: #2a64d6;
118
+ --sn-accent-hover: #1f56c2;
119
+ --sn-accent-active: #194ba8;
120
+ --sn-accent-fg: #ffffff;
121
+ --sn-accent-soft: rgba(42, 100, 214, 0.08);
122
+ --sn-accent-border: rgba(42, 100, 214, 0.24);
123
+ }
124
+ }