@snowztech/ui-css 0.3.0 → 0.5.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 (21) hide show
  1. package/README.md +11 -0
  2. package/dist/components/callout.css +28 -0
  3. package/dist/components/code.css +41 -0
  4. package/dist/components/field.css +28 -0
  5. package/dist/components/file.css +42 -0
  6. package/dist/components/prose.css +61 -0
  7. package/dist/components/terminal.css +51 -0
  8. package/dist/components/theme-toggle.css +3 -0
  9. package/dist/components/toc.css +39 -0
  10. package/dist/snowztech-ui.css +386 -0
  11. package/dist/snowztech-ui.min.css +1 -1
  12. package/dist/tokens.css +28 -0
  13. package/package.json +1 -1
  14. package/src/components/callout.css +28 -0
  15. package/src/components/code.css +41 -0
  16. package/src/components/prose.css +61 -0
  17. package/src/components/terminal.css +51 -0
  18. package/src/components/theme-toggle.css +3 -0
  19. package/src/components/toc.css +39 -0
  20. package/src/index.css +5 -0
  21. package/src/tokens.css +28 -0
package/README.md CHANGED
@@ -55,6 +55,11 @@ 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 |
60
+ | `sn-callout` | `--note --tip --warning --danger`, `__title` |
61
+ | `sn-code` | `__bar __name`, code block with a filename and copy button |
62
+ | `sn-terminal` | `__bar __title __body __out`, window frame for a session or screenshot |
58
63
  | `sn-theme-toggle` | reads `[data-theme="light"]` from `<html>` |
59
64
 
60
65
  ## Theming
@@ -65,6 +70,12 @@ Default is dark. Switch by setting `data-theme="light"` on `<html>`:
65
70
  document.documentElement.setAttribute("data-theme", "light");
66
71
  ```
67
72
 
73
+ Or follow the OS with `data-theme="system"`. The theme toggle still overrides it:
74
+
75
+ ```html
76
+ <html data-theme="system">
77
+ ```
78
+
68
79
  Override any token by re-declaring on `:root` or a scope:
69
80
 
70
81
  ```css
package/dist/components/callout.css ADDED
@@ -0,0 +1,28 @@
1
+ .sn-callout {
2
+ --sn-callout-color: var(--sn-fg-muted);
3
+ --sn-callout-bg: var(--sn-bg-elev-1);
4
+ margin: 0 0 var(--sn-s-4);
5
+ padding: var(--sn-s-3) var(--sn-s-4);
6
+ border: 1px solid var(--sn-border);
7
+ border-left: 2px solid var(--sn-callout-color);
8
+ border-radius: var(--sn-r-xs);
9
+ background: var(--sn-callout-bg);
10
+ color: var(--sn-fg-muted);
11
+ font-size: var(--sn-text-sm);
12
+ line-height: var(--sn-leading-normal);
13
+ }
14
+ .sn-callout--note { --sn-callout-color: var(--sn-accent); --sn-callout-bg: var(--sn-accent-soft); }
15
+ .sn-callout--tip { --sn-callout-color: var(--sn-success); --sn-callout-bg: var(--sn-success-soft); }
16
+ .sn-callout--warning { --sn-callout-color: var(--sn-warning); --sn-callout-bg: var(--sn-warning-soft); }
17
+ .sn-callout--danger { --sn-callout-color: var(--sn-danger); --sn-callout-bg: var(--sn-danger-soft); }
18
+
19
+ .sn-callout__title {
20
+ display: block;
21
+ margin-bottom: var(--sn-s-1);
22
+ color: var(--sn-callout-color);
23
+ font-size: var(--sn-text-2xs);
24
+ font-weight: 600;
25
+ letter-spacing: 0.04em;
26
+ text-transform: uppercase;
27
+ }
28
+ .sn-callout > :last-child { margin-bottom: 0; }
package/dist/components/code.css ADDED
@@ -0,0 +1,41 @@
1
+ .sn-code {
2
+ margin: 0 0 var(--sn-s-4);
3
+ overflow: hidden;
4
+ border: 1px solid var(--sn-border-subtle);
5
+ border-radius: var(--sn-r-lg);
6
+ background: var(--sn-bg-elev-1);
7
+ }
8
+
9
+ .sn-code__bar {
10
+ display: flex;
11
+ align-items: center;
12
+ justify-content: space-between;
13
+ gap: var(--sn-s-2);
14
+ min-height: 34px;
15
+ padding: 0 var(--sn-s-1) 0 var(--sn-s-4);
16
+ border-bottom: 1px solid var(--sn-border-subtle);
17
+ color: var(--sn-fg-subtle);
18
+ font-family: var(--sn-font-mono);
19
+ font-size: var(--sn-text-xs);
20
+ }
21
+ .sn-code__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
22
+
23
+ /* Loaded after prose.css, so this wins over .sn-prose pre. */
24
+ .sn-code pre {
25
+ margin: 0;
26
+ padding: var(--sn-s-4) 18px;
27
+ overflow-x: auto;
28
+ border: 0;
29
+ border-radius: 0;
30
+ background: none;
31
+ color: var(--sn-fg);
32
+ font-family: var(--sn-font-mono);
33
+ font-size: var(--sn-text-sm);
34
+ line-height: 1.6;
35
+ tab-size: 4;
36
+ }
37
+ .sn-code pre code { padding: 0; border: 0; background: none; font: inherit; }
38
+
39
+ @media (max-width: 600px) {
40
+ .sn-code pre { padding: 14px; font-size: var(--sn-text-xs); }
41
+ }
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/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/terminal.css ADDED
@@ -0,0 +1,51 @@
1
+ .sn-terminal {
2
+ overflow: hidden;
3
+ border: 1px solid var(--sn-border-strong);
4
+ border-radius: var(--sn-r-lg);
5
+ background: var(--sn-bg-inset);
6
+ font-family: var(--sn-font-mono);
7
+ }
8
+
9
+ .sn-terminal__bar {
10
+ position: relative;
11
+ display: flex;
12
+ align-items: center;
13
+ justify-content: center;
14
+ height: 32px;
15
+ padding: 0 60px;
16
+ border-bottom: 1px solid var(--sn-border);
17
+ background: var(--sn-bg-elev-1);
18
+ color: var(--sn-fg-subtle);
19
+ font-size: var(--sn-text-xs);
20
+ }
21
+ /* Three window dots, drawn in one pseudo-element. */
22
+ .sn-terminal__bar::before {
23
+ content: "";
24
+ position: absolute;
25
+ left: 14px;
26
+ width: 8px;
27
+ height: 8px;
28
+ border-radius: 50%;
29
+ background: var(--sn-fg-faint);
30
+ box-shadow: 14px 0 var(--sn-fg-faint), 28px 0 var(--sn-fg-faint);
31
+ }
32
+ .sn-terminal__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
33
+
34
+ .sn-terminal__body {
35
+ margin: 0;
36
+ padding: var(--sn-s-4) 18px;
37
+ overflow-x: auto;
38
+ color: var(--sn-fg);
39
+ font-size: var(--sn-text-sm);
40
+ line-height: 1.6;
41
+ }
42
+ /* Each child is one line, so spacing inside a line is kept as typed. */
43
+ .sn-terminal__body > * { margin: 0; white-space: pre-wrap; }
44
+ .sn-terminal__body:has(> img, > video) { padding: 0; }
45
+ .sn-terminal__body > :is(img, video) { display: block; width: 100%; height: auto; }
46
+
47
+ .sn-terminal__out { color: var(--sn-fg-muted); }
48
+
49
+ @media (max-width: 600px) {
50
+ .sn-terminal__body { padding: 14px; font-size: var(--sn-text-xs); }
51
+ }
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
  *,
@@ -667,6 +689,365 @@ a:hover {
667
689
  display: none;
668
690
  }
669
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/callout.css */
824
+ .sn-callout {
825
+ --sn-callout-color: var(--sn-fg-muted);
826
+ --sn-callout-bg: var(--sn-bg-elev-1);
827
+ margin: 0 0 var(--sn-s-4);
828
+ padding: var(--sn-s-3) var(--sn-s-4);
829
+ border: 1px solid var(--sn-border);
830
+ border-left: 2px solid var(--sn-callout-color);
831
+ border-radius: var(--sn-r-xs);
832
+ background: var(--sn-callout-bg);
833
+ color: var(--sn-fg-muted);
834
+ font-size: var(--sn-text-sm);
835
+ line-height: var(--sn-leading-normal);
836
+ }
837
+ .sn-callout--note {
838
+ --sn-callout-color: var(--sn-accent);
839
+ --sn-callout-bg: var(--sn-accent-soft);
840
+ }
841
+ .sn-callout--tip {
842
+ --sn-callout-color: var(--sn-success);
843
+ --sn-callout-bg: var(--sn-success-soft);
844
+ }
845
+ .sn-callout--warning {
846
+ --sn-callout-color: var(--sn-warning);
847
+ --sn-callout-bg: var(--sn-warning-soft);
848
+ }
849
+ .sn-callout--danger {
850
+ --sn-callout-color: var(--sn-danger);
851
+ --sn-callout-bg: var(--sn-danger-soft);
852
+ }
853
+ .sn-callout__title {
854
+ display: block;
855
+ margin-bottom: var(--sn-s-1);
856
+ color: var(--sn-callout-color);
857
+ font-size: var(--sn-text-2xs);
858
+ font-weight: 600;
859
+ letter-spacing: 0.04em;
860
+ text-transform: uppercase;
861
+ }
862
+ .sn-callout > :last-child {
863
+ margin-bottom: 0;
864
+ }
865
+
866
+ /* src/components/code.css */
867
+ .sn-code {
868
+ margin: 0 0 var(--sn-s-4);
869
+ overflow: hidden;
870
+ border: 1px solid var(--sn-border-subtle);
871
+ border-radius: var(--sn-r-lg);
872
+ background: var(--sn-bg-elev-1);
873
+ }
874
+ .sn-code__bar {
875
+ display: flex;
876
+ align-items: center;
877
+ justify-content: space-between;
878
+ gap: var(--sn-s-2);
879
+ min-height: 34px;
880
+ padding: 0 var(--sn-s-1) 0 var(--sn-s-4);
881
+ border-bottom: 1px solid var(--sn-border-subtle);
882
+ color: var(--sn-fg-subtle);
883
+ font-family: var(--sn-font-mono);
884
+ font-size: var(--sn-text-xs);
885
+ }
886
+ .sn-code__name {
887
+ overflow: hidden;
888
+ text-overflow: ellipsis;
889
+ white-space: nowrap;
890
+ }
891
+ .sn-code pre {
892
+ margin: 0;
893
+ padding: var(--sn-s-4) 18px;
894
+ overflow-x: auto;
895
+ border: 0;
896
+ border-radius: 0;
897
+ background: none;
898
+ color: var(--sn-fg);
899
+ font-family: var(--sn-font-mono);
900
+ font-size: var(--sn-text-sm);
901
+ line-height: 1.6;
902
+ tab-size: 4;
903
+ }
904
+ .sn-code pre code {
905
+ padding: 0;
906
+ border: 0;
907
+ background: none;
908
+ font: inherit;
909
+ }
910
+ @media (max-width: 600px) {
911
+ .sn-code pre {
912
+ padding: 14px;
913
+ font-size: var(--sn-text-xs);
914
+ }
915
+ }
916
+
917
+ /* src/components/terminal.css */
918
+ .sn-terminal {
919
+ overflow: hidden;
920
+ border: 1px solid var(--sn-border-strong);
921
+ border-radius: var(--sn-r-lg);
922
+ background: var(--sn-bg-inset);
923
+ font-family: var(--sn-font-mono);
924
+ }
925
+ .sn-terminal__bar {
926
+ position: relative;
927
+ display: flex;
928
+ align-items: center;
929
+ justify-content: center;
930
+ height: 32px;
931
+ padding: 0 60px;
932
+ border-bottom: 1px solid var(--sn-border);
933
+ background: var(--sn-bg-elev-1);
934
+ color: var(--sn-fg-subtle);
935
+ font-size: var(--sn-text-xs);
936
+ }
937
+ .sn-terminal__bar::before {
938
+ content: "";
939
+ position: absolute;
940
+ left: 14px;
941
+ width: 8px;
942
+ height: 8px;
943
+ border-radius: 50%;
944
+ background: var(--sn-fg-faint);
945
+ box-shadow: 14px 0 var(--sn-fg-faint), 28px 0 var(--sn-fg-faint);
946
+ }
947
+ .sn-terminal__title {
948
+ overflow: hidden;
949
+ text-overflow: ellipsis;
950
+ white-space: nowrap;
951
+ }
952
+ .sn-terminal__body {
953
+ margin: 0;
954
+ padding: var(--sn-s-4) 18px;
955
+ overflow-x: auto;
956
+ color: var(--sn-fg);
957
+ font-size: var(--sn-text-sm);
958
+ line-height: 1.6;
959
+ }
960
+ .sn-terminal__body > * {
961
+ margin: 0;
962
+ white-space: pre-wrap;
963
+ }
964
+ .sn-terminal__body:has(> img, > video) {
965
+ padding: 0;
966
+ }
967
+ .sn-terminal__body > :is(img, video) {
968
+ display: block;
969
+ width: 100%;
970
+ height: auto;
971
+ }
972
+ .sn-terminal__out {
973
+ color: var(--sn-fg-muted);
974
+ }
975
+ @media (max-width: 600px) {
976
+ .sn-terminal__body {
977
+ padding: 14px;
978
+ font-size: var(--sn-text-xs);
979
+ }
980
+ }
981
+
982
+ /* src/components/toc.css */
983
+ .sn-toc {
984
+ margin-bottom: var(--sn-s-7);
985
+ font-size: var(--sn-text-sm);
986
+ }
987
+ .sn-toc details {
988
+ padding: var(--sn-s-3) var(--sn-s-4);
989
+ border: 1px solid var(--sn-border-subtle);
990
+ border-radius: var(--sn-r-lg);
991
+ }
992
+ .sn-toc summary {
993
+ cursor: pointer;
994
+ color: var(--sn-fg);
995
+ font-weight: 500;
996
+ }
997
+ .sn-toc ul {
998
+ list-style: none;
999
+ margin: var(--sn-s-3) 0 0;
1000
+ padding: 0;
1001
+ }
1002
+ .sn-toc li + li {
1003
+ margin-top: var(--sn-s-2);
1004
+ }
1005
+ .sn-toc a {
1006
+ color: var(--sn-fg-muted);
1007
+ text-decoration: none;
1008
+ }
1009
+ .sn-toc a:hover,
1010
+ .sn-toc a[aria-current] {
1011
+ color: var(--sn-fg);
1012
+ }
1013
+ .sn-toc-layout {
1014
+ display: grid;
1015
+ }
1016
+ @media (min-width: 1000px) {
1017
+ .sn-toc-layout {
1018
+ grid-template-columns: minmax(0, 680px) 220px;
1019
+ column-gap: var(--sn-s-10);
1020
+ justify-content: center;
1021
+ }
1022
+ .sn-toc-layout > * {
1023
+ grid-column: 1;
1024
+ }
1025
+ .sn-toc-layout > .sn-toc {
1026
+ grid-column: 2;
1027
+ grid-row: 1 / span 2;
1028
+ align-self: start;
1029
+ position: sticky;
1030
+ top: var(--sn-s-6);
1031
+ margin: 0;
1032
+ padding-top: var(--sn-s-2);
1033
+ }
1034
+ .sn-toc-layout > .sn-toc details {
1035
+ padding: 0;
1036
+ border: 0;
1037
+ }
1038
+ .sn-toc-layout > .sn-toc summary {
1039
+ list-style: none;
1040
+ pointer-events: none;
1041
+ color: var(--sn-fg-subtle);
1042
+ font-size: var(--sn-text-xs);
1043
+ letter-spacing: 0.12em;
1044
+ text-transform: uppercase;
1045
+ }
1046
+ .sn-toc-layout > .sn-toc summary::-webkit-details-marker {
1047
+ display: none;
1048
+ }
1049
+ }
1050
+
670
1051
  /* src/components/theme-toggle.css */
671
1052
  .sn-theme-toggle {
672
1053
  appearance: none;
@@ -695,5 +1076,10 @@ a:hover {
695
1076
  [data-theme=light] .sn-theme-toggle__indicator {
696
1077
  background: transparent;
697
1078
  }
1079
+ @media (prefers-color-scheme: light) {
1080
+ [data-theme=system] .sn-theme-toggle__indicator {
1081
+ background: transparent;
1082
+ }
1083
+ }
698
1084
 
699
1085
  /* 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,.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}
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-callout{--sn-callout-color: var(--sn-fg-muted);--sn-callout-bg: var(--sn-bg-elev-1);margin:0 0 var(--sn-s-4);padding:var(--sn-s-3) var(--sn-s-4);border:1px solid var(--sn-border);border-left:2px solid var(--sn-callout-color);border-radius:var(--sn-r-xs);background:var(--sn-callout-bg);color:var(--sn-fg-muted);font-size:var(--sn-text-sm);line-height:var(--sn-leading-normal)}.sn-callout--note{--sn-callout-color: var(--sn-accent);--sn-callout-bg: var(--sn-accent-soft)}.sn-callout--tip{--sn-callout-color: var(--sn-success);--sn-callout-bg: var(--sn-success-soft)}.sn-callout--warning{--sn-callout-color: var(--sn-warning);--sn-callout-bg: var(--sn-warning-soft)}.sn-callout--danger{--sn-callout-color: var(--sn-danger);--sn-callout-bg: var(--sn-danger-soft)}.sn-callout__title{display:block;margin-bottom:var(--sn-s-1);color:var(--sn-callout-color);font-size:var(--sn-text-2xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase}.sn-callout>:last-child{margin-bottom:0}.sn-code{margin:0 0 var(--sn-s-4);overflow:hidden;border:1px solid var(--sn-border-subtle);border-radius:var(--sn-r-lg);background:var(--sn-bg-elev-1)}.sn-code__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sn-s-2);min-height:34px;padding:0 var(--sn-s-1) 0 var(--sn-s-4);border-bottom:1px solid var(--sn-border-subtle);color:var(--sn-fg-subtle);font-family:var(--sn-font-mono);font-size:var(--sn-text-xs)}.sn-code__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sn-code pre{margin:0;padding:var(--sn-s-4) 18px;overflow-x:auto;border:0;border-radius:0;background:none;color:var(--sn-fg);font-family:var(--sn-font-mono);font-size:var(--sn-text-sm);line-height:1.6;tab-size:4}.sn-code pre code{padding:0;border:0;background:none;font:inherit}@media(max-width:600px){.sn-code pre{padding:14px;font-size:var(--sn-text-xs)}}.sn-terminal{overflow:hidden;border:1px solid var(--sn-border-strong);border-radius:var(--sn-r-lg);background:var(--sn-bg-inset);font-family:var(--sn-font-mono)}.sn-terminal__bar{position:relative;display:flex;align-items:center;justify-content:center;height:32px;padding:0 60px;border-bottom:1px solid var(--sn-border);background:var(--sn-bg-elev-1);color:var(--sn-fg-subtle);font-size:var(--sn-text-xs)}.sn-terminal__bar:before{content:"";position:absolute;left:14px;width:8px;height:8px;border-radius:50%;background:var(--sn-fg-faint);box-shadow:14px 0 var(--sn-fg-faint),28px 0 var(--sn-fg-faint)}.sn-terminal__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sn-terminal__body{margin:0;padding:var(--sn-s-4) 18px;overflow-x:auto;color:var(--sn-fg);font-size:var(--sn-text-sm);line-height:1.6}.sn-terminal__body>*{margin:0;white-space:pre-wrap}.sn-terminal__body:has(>img,>video){padding:0}.sn-terminal__body>:is(img,video){display:block;width:100%;height:auto}.sn-terminal__out{color:var(--sn-fg-muted)}@media(max-width:600px){.sn-terminal__body{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.3.0",
3
+ "version": "0.5.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/callout.css ADDED
@@ -0,0 +1,28 @@
1
+ .sn-callout {
2
+ --sn-callout-color: var(--sn-fg-muted);
3
+ --sn-callout-bg: var(--sn-bg-elev-1);
4
+ margin: 0 0 var(--sn-s-4);
5
+ padding: var(--sn-s-3) var(--sn-s-4);
6
+ border: 1px solid var(--sn-border);
7
+ border-left: 2px solid var(--sn-callout-color);
8
+ border-radius: var(--sn-r-xs);
9
+ background: var(--sn-callout-bg);
10
+ color: var(--sn-fg-muted);
11
+ font-size: var(--sn-text-sm);
12
+ line-height: var(--sn-leading-normal);
13
+ }
14
+ .sn-callout--note { --sn-callout-color: var(--sn-accent); --sn-callout-bg: var(--sn-accent-soft); }
15
+ .sn-callout--tip { --sn-callout-color: var(--sn-success); --sn-callout-bg: var(--sn-success-soft); }
16
+ .sn-callout--warning { --sn-callout-color: var(--sn-warning); --sn-callout-bg: var(--sn-warning-soft); }
17
+ .sn-callout--danger { --sn-callout-color: var(--sn-danger); --sn-callout-bg: var(--sn-danger-soft); }
18
+
19
+ .sn-callout__title {
20
+ display: block;
21
+ margin-bottom: var(--sn-s-1);
22
+ color: var(--sn-callout-color);
23
+ font-size: var(--sn-text-2xs);
24
+ font-weight: 600;
25
+ letter-spacing: 0.04em;
26
+ text-transform: uppercase;
27
+ }
28
+ .sn-callout > :last-child { margin-bottom: 0; }
package/src/components/code.css ADDED
@@ -0,0 +1,41 @@
1
+ .sn-code {
2
+ margin: 0 0 var(--sn-s-4);
3
+ overflow: hidden;
4
+ border: 1px solid var(--sn-border-subtle);
5
+ border-radius: var(--sn-r-lg);
6
+ background: var(--sn-bg-elev-1);
7
+ }
8
+
9
+ .sn-code__bar {
10
+ display: flex;
11
+ align-items: center;
12
+ justify-content: space-between;
13
+ gap: var(--sn-s-2);
14
+ min-height: 34px;
15
+ padding: 0 var(--sn-s-1) 0 var(--sn-s-4);
16
+ border-bottom: 1px solid var(--sn-border-subtle);
17
+ color: var(--sn-fg-subtle);
18
+ font-family: var(--sn-font-mono);
19
+ font-size: var(--sn-text-xs);
20
+ }
21
+ .sn-code__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
22
+
23
+ /* Loaded after prose.css, so this wins over .sn-prose pre. */
24
+ .sn-code pre {
25
+ margin: 0;
26
+ padding: var(--sn-s-4) 18px;
27
+ overflow-x: auto;
28
+ border: 0;
29
+ border-radius: 0;
30
+ background: none;
31
+ color: var(--sn-fg);
32
+ font-family: var(--sn-font-mono);
33
+ font-size: var(--sn-text-sm);
34
+ line-height: 1.6;
35
+ tab-size: 4;
36
+ }
37
+ .sn-code pre code { padding: 0; border: 0; background: none; font: inherit; }
38
+
39
+ @media (max-width: 600px) {
40
+ .sn-code pre { padding: 14px; font-size: var(--sn-text-xs); }
41
+ }
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/terminal.css ADDED
@@ -0,0 +1,51 @@
1
+ .sn-terminal {
2
+ overflow: hidden;
3
+ border: 1px solid var(--sn-border-strong);
4
+ border-radius: var(--sn-r-lg);
5
+ background: var(--sn-bg-inset);
6
+ font-family: var(--sn-font-mono);
7
+ }
8
+
9
+ .sn-terminal__bar {
10
+ position: relative;
11
+ display: flex;
12
+ align-items: center;
13
+ justify-content: center;
14
+ height: 32px;
15
+ padding: 0 60px;
16
+ border-bottom: 1px solid var(--sn-border);
17
+ background: var(--sn-bg-elev-1);
18
+ color: var(--sn-fg-subtle);
19
+ font-size: var(--sn-text-xs);
20
+ }
21
+ /* Three window dots, drawn in one pseudo-element. */
22
+ .sn-terminal__bar::before {
23
+ content: "";
24
+ position: absolute;
25
+ left: 14px;
26
+ width: 8px;
27
+ height: 8px;
28
+ border-radius: 50%;
29
+ background: var(--sn-fg-faint);
30
+ box-shadow: 14px 0 var(--sn-fg-faint), 28px 0 var(--sn-fg-faint);
31
+ }
32
+ .sn-terminal__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
33
+
34
+ .sn-terminal__body {
35
+ margin: 0;
36
+ padding: var(--sn-s-4) 18px;
37
+ overflow-x: auto;
38
+ color: var(--sn-fg);
39
+ font-size: var(--sn-text-sm);
40
+ line-height: 1.6;
41
+ }
42
+ /* Each child is one line, so spacing inside a line is kept as typed. */
43
+ .sn-terminal__body > * { margin: 0; white-space: pre-wrap; }
44
+ .sn-terminal__body:has(> img, > video) { padding: 0; }
45
+ .sn-terminal__body > :is(img, video) { display: block; width: 100%; height: auto; }
46
+
47
+ .sn-terminal__out { color: var(--sn-fg-muted); }
48
+
49
+ @media (max-width: 600px) {
50
+ .sn-terminal__body { padding: 14px; font-size: var(--sn-text-xs); }
51
+ }
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
@@ -16,4 +16,9 @@
16
16
  @import "./components/avatar.css";
17
17
  @import "./components/pulse.css";
18
18
  @import "./components/copy-button.css";
19
+ @import "./components/prose.css";
20
+ @import "./components/callout.css";
21
+ @import "./components/code.css";
22
+ @import "./components/terminal.css";
23
+ @import "./components/toc.css";
19
24
  @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
+ }