Mercurial

comparison design_system/src/catalog.css @ 258:60a876c4587a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents
children
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
1 * {
2 box-sizing: border-box;
3 }
4
5 html {
6 min-height: 100%;
7 background: var(--zenbu-sys-color-surface-canvas);
8 color: var(--zenbu-sys-color-text-primary);
9 font-family: var(--zenbu-sys-font-family-ui);
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(--zenbu-sys-space-container);
36 border-right: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
37 background: var(--zenbu-sys-color-surface-default);
38 }
39
40 .catalog-brand {
41 display: inline-flex;
42 align-items: center;
43 gap: var(--zenbu-sys-space-control);
44 color: inherit;
45 font-size: var(--zenbu-sys-font-size-lg);
46 font-weight: 850;
47 text-decoration: none;
48 }
49
50 .catalog-search {
51 width: 100%;
52 margin-top: var(--zenbu-sys-space-container);
53 }
54
55 .catalog-search > zen-icon {
56 align-self: center;
57 margin-inline-start: var(--zenbu-sys-space-control);
58 color: var(--zenbu-sys-color-text-secondary);
59 }
60
61 .catalog-search > kbd {
62 align-self: center;
63 margin-inline-end: var(--zenbu-sys-space-related);
64 padding: 0 var(--zenbu-sys-space-icon-label);
65 border: 1px solid var(--zenbu-sys-color-border-subtle);
66 border-radius: var(--zenbu-sys-radius-control-small);
67 color: var(--zenbu-sys-color-text-secondary);
68 font: var(--zenbu-sys-font-size-xs)/1.5 var(--zenbu-sys-font-family-code);
69 }
70
71 .search-status {
72 min-height: 1.25rem;
73 margin: var(--zenbu-sys-space-icon-label) 0 0;
74 color: var(--zenbu-sys-color-text-secondary);
75 font-size: var(--zenbu-sys-font-size-xs);
76 }
77
78 .catalog-mark {
79 display: grid;
80 width: 2.5rem;
81 height: 2.5rem;
82 place-items: center;
83 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
84 border-radius: 50%;
85 background: var(--zenbu-sys-color-action-primary-background);
86 color: var(--zenbu-sys-color-action-primary-foreground);
87 }
88
89 .catalog-sidebar h2 {
90 margin: var(--zenbu-sys-space-content) 0 var(--zenbu-sys-space-related);
91 color: var(--zenbu-sys-color-text-secondary);
92 font-size: var(--zenbu-sys-font-size-xs);
93 letter-spacing: 0.12em;
94 text-transform: uppercase;
95 }
96
97 .catalog-nav {
98 display: grid;
99 gap: var(--zenbu-sys-space-icon-label);
100 }
101
102 .catalog-nav a {
103 padding: var(--zenbu-sys-space-related) var(--zenbu-sys-space-control);
104 border-radius: var(--zenbu-sys-radius-control-small);
105 color: inherit;
106 text-decoration: none;
107 }
108
109 .catalog-nav a[hidden],
110 .component-grid > a[hidden] {
111 display: none;
112 }
113
114 .catalog-nav a:hover,
115 .catalog-nav a[aria-current] {
116 background: var(--zenbu-sys-color-action-primary-background);
117 color: var(--zenbu-sys-color-action-primary-foreground);
118 }
119
120 .theme-toggle {
121 width: 100%;
122 margin-top: var(--zenbu-sys-space-content);
123 padding: var(--zenbu-sys-space-related);
124 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
125 border-radius: var(--zenbu-sys-radius-control);
126 background: transparent;
127 color: inherit;
128 cursor: pointer;
129 }
130
131 .theme-toggle-wrap {
132 display: flex;
133 width: 100%;
134 }
135
136 .catalog-main {
137 width: min(100%, var(--zenbu-sys-width-page));
138 min-width: 0;
139 padding: var(--zenbu-sys-space-section) clamp(1rem, 5vw, 5rem);
140 outline: none;
141 }
142
143 .catalog-page {
144 min-width: 0;
145 }
146
147 .catalog-page[hidden] {
148 display: none;
149 }
150
151 .page-heading {
152 max-width: 52rem;
153 margin-bottom: var(--zenbu-sys-space-section);
154 }
155
156 .eyebrow {
157 margin: 0 0 var(--zenbu-sys-space-related);
158 color: var(--zenbu-sys-color-info-foreground);
159 font-size: var(--zenbu-sys-font-size-sm);
160 font-weight: 800;
161 letter-spacing: 0.1em;
162 text-transform: uppercase;
163 }
164
165 .page-heading h1 {
166 margin: 0 0 var(--zenbu-sys-space-control);
167 font-size: var(--zenbu-sys-type-page-title-size);
168 line-height: 1.05;
169 }
170
171 .page-heading p {
172 color: var(--zenbu-sys-color-text-secondary);
173 font-size: var(--zenbu-sys-font-size-lg);
174 }
175
176 .principles,
177 .component-grid,
178 .token-grid {
179 display: grid;
180 grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
181 gap: var(--zenbu-sys-space-container);
182 }
183
184 .principle,
185 .token-group {
186 padding: var(--zenbu-sys-space-container);
187 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
188 border-radius: var(--zenbu-sys-radius-container);
189 background: var(--zenbu-sys-color-surface-default);
190 }
191
192 .principle h2,
193 .token-group h2 {
194 margin-top: 0;
195 }
196
197 .component-grid a {
198 color: inherit;
199 text-decoration: none;
200 }
201
202 .component-grid zen-card {
203 height: 100%;
204 }
205
206 .component-grid code {
207 color: var(--zenbu-sys-color-info-foreground);
208 font-size: var(--zenbu-sys-font-size-xs);
209 }
210
211 .component-grid p {
212 color: var(--zenbu-sys-color-text-secondary);
213 }
214
215 .swatch-list {
216 display: grid;
217 gap: var(--zenbu-sys-space-related);
218 margin: 0;
219 }
220
221 .swatch-list div {
222 display: grid;
223 grid-template-columns: 2rem 1fr;
224 align-items: center;
225 gap: var(--zenbu-sys-space-related);
226 }
227
228 .swatch-list dt,
229 .swatch-list dd {
230 margin: 0;
231 font-family: var(--zenbu-sys-font-family-code);
232 font-size: var(--zenbu-sys-font-size-xs);
233 }
234
235 .swatch {
236 --zenbu-color-swatch: transparent;
237 width: 2rem;
238 height: 2rem;
239 border: 1px solid var(--zenbu-sys-color-border-default);
240 border-radius: 50%;
241 background: var(--zenbu-color-swatch);
242 }
243
244 .token-group-wide {
245 grid-column: span 2;
246 }
247
248 .token-group > p {
249 color: var(--zenbu-sys-color-text-secondary);
250 }
251
252 .palette-grid {
253 display: grid;
254 grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
255 gap: var(--zenbu-sys-space-control);
256 }
257
258 .palette-grid > div {
259 display: grid;
260 gap: var(--zenbu-sys-space-icon-label);
261 }
262
263 .palette-grid span {
264 --zenbu-color-swatch: transparent;
265 min-height: 3.5rem;
266 border: 1px solid var(--zenbu-sys-color-border-subtle);
267 border-radius: var(--zenbu-sys-radius-control);
268 background: var(--zenbu-color-swatch);
269 }
270
271 .palette-grid code {
272 font-size: var(--zenbu-sys-font-size-xs);
273 }
274
275 .data-palette {
276 display: grid;
277 grid-template-columns: repeat(10, minmax(1.75rem, 1fr));
278 min-height: 4rem;
279 overflow: hidden;
280 border: 1px solid var(--zenbu-sys-color-border-default);
281 border-radius: var(--zenbu-sys-radius-control);
282 }
283
284 .data-palette span {
285 --zenbu-color-swatch: transparent;
286 background: var(--zenbu-color-swatch);
287 }
288
289 .icon-grid {
290 display: grid;
291 grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
292 gap: var(--zenbu-sys-space-control);
293 }
294
295 .icon-grid figure {
296 display: grid;
297 min-height: 7rem;
298 margin: 0;
299 padding: var(--zenbu-sys-space-control);
300 place-items: center;
301 gap: var(--zenbu-sys-space-related);
302 border: 1px solid var(--zenbu-sys-color-border-subtle);
303 border-radius: var(--zenbu-sys-radius-control);
304 background: var(--zenbu-sys-color-surface-default);
305 }
306
307 .icon-grid figcaption {
308 max-width: 100%;
309 overflow: hidden;
310 color: var(--zenbu-sys-color-text-secondary);
311 font-size: var(--zenbu-sys-font-size-xs);
312 text-overflow: ellipsis;
313 }
314
315 zen-story {
316 display: block;
317 max-width: 100%;
318 margin-bottom: var(--zenbu-sys-space-content);
319 overflow: hidden;
320 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
321 border-radius: var(--zenbu-sys-radius-container);
322 background: var(--zenbu-sys-color-surface-default);
323 }
324
325 zen-story > header {
326 display: flex;
327 align-items: center;
328 justify-content: space-between;
329 gap: var(--zenbu-sys-space-control);
330 padding: var(--zenbu-sys-space-control) var(--zenbu-sys-space-group);
331 border-bottom: 1px solid var(--zenbu-sys-color-border-default);
332 }
333
334 zen-story > header h3 {
335 margin: 0;
336 }
337
338 zen-story > header button {
339 padding: var(--zenbu-sys-space-icon-label) var(--zenbu-sys-space-related);
340 border: 0;
341 border-radius: var(--zenbu-sys-radius-control-small);
342 background: transparent;
343 color: var(--zenbu-sys-color-info-foreground);
344 cursor: pointer;
345 }
346
347 .story-canvas {
348 min-height: 8rem;
349 padding: clamp(1rem, 4vw, 3rem);
350 background:
351 linear-gradient(90deg, var(--zenbu-sys-color-gridline) 1px, transparent 1px),
352 linear-gradient(var(--zenbu-sys-color-gridline) 1px, transparent 1px);
353 background-size: 1rem 1rem;
354 }
355
356 zen-story > pre {
357 max-height: 24rem;
358 overflow: auto;
359 margin: 0;
360 padding: var(--zenbu-sys-space-group);
361 border-top: 1px solid var(--zenbu-sys-color-border-default);
362 background: var(--zenbu-sys-color-code-surface);
363 color: var(--zenbu-sys-color-code-text);
364 font: var(--zenbu-sys-font-size-sm)/1.55 var(--zenbu-sys-font-family-code);
365 }
366
367 .demo-card-grid {
368 display: grid;
369 grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
370 gap: var(--zenbu-sys-space-container);
371 }
372
373 @media (max-width: 760px) {
374 .catalog-shell {
375 grid-template-columns: 1fr;
376 }
377
378 .catalog-sidebar {
379 position: static;
380 width: 100%;
381 height: auto;
382 border-right: 0;
383 border-bottom: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
384 }
385
386 .catalog-nav {
387 grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
388 }
389
390 .catalog-main {
391 padding: var(--zenbu-sys-space-content) var(--zenbu-sys-space-group);
392 }
393
394 .token-group-wide {
395 grid-column: auto;
396 }
397
398 .data-palette {
399 grid-template-columns: repeat(5, 1fr);
400 }
401 }