Mercurial

comparison design_system/src/storybook.css @ 251:117c4d53c9a4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add HTML-first Web Component system Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 09:14:57 -0700
parents
children 2b6e732087ff
comparison
equal deleted inserted replaced
250:745fd127b2a1 251:117c4d53c9a4
1 * {
2 box-sizing: border-box;
3 }
4
5 html {
6 min-height: 100%;
7 background: var(--zen-color-canvas);
8 color: var(--zen-color-text);
9 font-family: var(--zen-font-sans);
10 }
11
12 body {
13 min-height: 100vh;
14 margin: 0;
15 }
16
17 button,
18 input,
19 select,
20 textarea {
21 font: inherit;
22 }
23
24 .catalog-shell {
25 display: grid;
26 grid-template-columns: 17rem minmax(0, 1fr);
27 min-height: 100vh;
28 }
29
30 .catalog-sidebar {
31 position: sticky;
32 top: 0;
33 height: 100vh;
34 overflow: auto;
35 padding: var(--zen-space-5);
36 border-right: var(--zen-border-width) solid var(--zen-color-border);
37 background: var(--zen-color-surface);
38 }
39
40 .catalog-brand {
41 display: inline-flex;
42 align-items: center;
43 gap: var(--zen-space-3);
44 color: inherit;
45 font-size: var(--zen-font-size-lg);
46 font-weight: 850;
47 text-decoration: none;
48 }
49
50 .catalog-mark {
51 display: grid;
52 width: 2.5rem;
53 height: 2.5rem;
54 place-items: center;
55 border: var(--zen-border-width) solid var(--zen-color-border);
56 border-radius: 50%;
57 background: var(--zen-color-accent);
58 color: #171a21;
59 }
60
61 .catalog-sidebar h2 {
62 margin: var(--zen-space-6) 0 var(--zen-space-2);
63 color: var(--zen-color-text-muted);
64 font-size: var(--zen-font-size-xs);
65 letter-spacing: 0.12em;
66 text-transform: uppercase;
67 }
68
69 .catalog-nav {
70 display: grid;
71 gap: var(--zen-space-1);
72 }
73
74 .catalog-nav a {
75 padding: var(--zen-space-2) var(--zen-space-3);
76 border-radius: var(--zen-radius-sm);
77 color: inherit;
78 text-decoration: none;
79 }
80
81 .catalog-nav a:hover,
82 .catalog-nav a[aria-current] {
83 background: var(--zen-color-accent);
84 color: #171a21;
85 }
86
87 .theme-toggle {
88 width: 100%;
89 margin-top: var(--zen-space-6);
90 padding: var(--zen-space-2);
91 border: var(--zen-border-width) solid var(--zen-color-border);
92 border-radius: var(--zen-radius-md);
93 background: transparent;
94 color: inherit;
95 cursor: pointer;
96 }
97
98 .catalog-main {
99 width: min(100%, var(--zen-content-width));
100 padding: var(--zen-space-7) clamp(1rem, 5vw, 5rem);
101 outline: none;
102 }
103
104 .catalog-page[hidden] {
105 display: none;
106 }
107
108 .page-heading {
109 max-width: 52rem;
110 margin-bottom: var(--zen-space-7);
111 }
112
113 .eyebrow {
114 margin: 0 0 var(--zen-space-2);
115 color: var(--zen-color-info);
116 font-size: var(--zen-font-size-sm);
117 font-weight: 800;
118 letter-spacing: 0.1em;
119 text-transform: uppercase;
120 }
121
122 .page-heading h1 {
123 margin: 0 0 var(--zen-space-3);
124 font-size: var(--zen-font-size-xl);
125 line-height: 1.05;
126 }
127
128 .page-heading p {
129 color: var(--zen-color-text-muted);
130 font-size: var(--zen-font-size-lg);
131 }
132
133 .principles,
134 .component-grid,
135 .token-grid {
136 display: grid;
137 grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
138 gap: var(--zen-space-5);
139 }
140
141 .principle,
142 .token-group {
143 padding: var(--zen-space-5);
144 border: var(--zen-border-width) solid var(--zen-color-border);
145 border-radius: var(--zen-radius-lg);
146 background: var(--zen-color-surface);
147 }
148
149 .principle h2,
150 .token-group h2 {
151 margin-top: 0;
152 }
153
154 .component-grid a {
155 color: inherit;
156 text-decoration: none;
157 }
158
159 .component-grid zen-card {
160 height: 100%;
161 }
162
163 .swatch-list {
164 display: grid;
165 gap: var(--zen-space-2);
166 margin: 0;
167 }
168
169 .swatch-list div {
170 display: grid;
171 grid-template-columns: 2rem 1fr;
172 align-items: center;
173 gap: var(--zen-space-2);
174 }
175
176 .swatch-list dt,
177 .swatch-list dd {
178 margin: 0;
179 font-family: var(--zen-font-mono);
180 font-size: var(--zen-font-size-xs);
181 }
182
183 .swatch {
184 width: 2rem;
185 height: 2rem;
186 border: 1px solid var(--zen-color-border);
187 border-radius: 50%;
188 background: var(--swatch);
189 }
190
191 zen-story {
192 display: block;
193 margin-bottom: var(--zen-space-6);
194 overflow: hidden;
195 border: var(--zen-border-width) solid var(--zen-color-border);
196 border-radius: var(--zen-radius-lg);
197 background: var(--zen-color-surface);
198 }
199
200 zen-story > header {
201 display: flex;
202 align-items: center;
203 justify-content: space-between;
204 gap: var(--zen-space-3);
205 padding: var(--zen-space-3) var(--zen-space-4);
206 border-bottom: 1px solid var(--zen-color-border);
207 }
208
209 zen-story > header h3 {
210 margin: 0;
211 }
212
213 zen-story > header button {
214 padding: var(--zen-space-1) var(--zen-space-2);
215 border: 0;
216 border-radius: var(--zen-radius-sm);
217 background: transparent;
218 color: var(--zen-color-info);
219 cursor: pointer;
220 }
221
222 .story-canvas {
223 min-height: 8rem;
224 padding: clamp(1rem, 4vw, 3rem);
225 background:
226 linear-gradient(90deg, rgba(127, 127, 127, 0.08) 1px, transparent 1px),
227 linear-gradient(rgba(127, 127, 127, 0.08) 1px, transparent 1px);
228 background-size: 1rem 1rem;
229 }
230
231 zen-story > pre {
232 max-height: 24rem;
233 overflow: auto;
234 margin: 0;
235 padding: var(--zen-space-4);
236 border-top: 1px solid var(--zen-color-border);
237 background: #111318;
238 color: #f4f4f5;
239 font: var(--zen-font-size-sm)/1.55 var(--zen-font-mono);
240 }
241
242 .demo-card-grid {
243 display: grid;
244 grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
245 gap: var(--zen-space-5);
246 }
247
248 @media (max-width: 760px) {
249 .catalog-shell {
250 grid-template-columns: 1fr;
251 }
252
253 .catalog-sidebar {
254 position: static;
255 width: 100%;
256 height: auto;
257 border-right: 0;
258 border-bottom: var(--zen-border-width) solid var(--zen-color-border);
259 }
260
261 .catalog-nav {
262 grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
263 }
264
265 .catalog-main {
266 padding: var(--zen-space-6) var(--zen-space-4);
267 }
268 }