Mercurial

comparison design_system/src/storybook.css @ 254:2b6e732087ff

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add complete native component catalog Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 15:12:09 -0700
parents 117c4d53c9a4
children
comparison
equal deleted inserted replaced
253:fdf3816959cb 254:2b6e732087ff
45 font-size: var(--zen-font-size-lg); 45 font-size: var(--zen-font-size-lg);
46 font-weight: 850; 46 font-weight: 850;
47 text-decoration: none; 47 text-decoration: none;
48 } 48 }
49 49
50 .catalog-search {
51 width: 100%;
52 margin-top: var(--zen-space-5);
53 }
54
55 .catalog-search > zen-icon {
56 align-self: center;
57 margin-inline-start: var(--zen-space-3);
58 color: var(--zen-color-text-muted);
59 }
60
61 .catalog-search > kbd {
62 align-self: center;
63 margin-inline-end: var(--zen-space-2);
64 padding: 0 var(--zen-space-1);
65 border: 1px solid var(--zen-color-border-muted);
66 border-radius: var(--zen-radius-sm);
67 color: var(--zen-color-text-muted);
68 font: var(--zen-font-size-xs)/1.5 var(--zen-font-mono);
69 }
70
71 .search-status {
72 min-height: 1.25rem;
73 margin: var(--zen-space-1) 0 0;
74 color: var(--zen-color-text-muted);
75 font-size: var(--zen-font-size-xs);
76 }
77
50 .catalog-mark { 78 .catalog-mark {
51 display: grid; 79 display: grid;
52 width: 2.5rem; 80 width: 2.5rem;
53 height: 2.5rem; 81 height: 2.5rem;
54 place-items: center; 82 place-items: center;
55 border: var(--zen-border-width) solid var(--zen-color-border); 83 border: var(--zen-border-width) solid var(--zen-color-border);
56 border-radius: 50%; 84 border-radius: 50%;
57 background: var(--zen-color-accent); 85 background: var(--zen-color-accent);
58 color: #171a21; 86 color: var(--zen-color-on-accent);
59 } 87 }
60 88
61 .catalog-sidebar h2 { 89 .catalog-sidebar h2 {
62 margin: var(--zen-space-6) 0 var(--zen-space-2); 90 margin: var(--zen-space-6) 0 var(--zen-space-2);
63 color: var(--zen-color-text-muted); 91 color: var(--zen-color-text-muted);
76 border-radius: var(--zen-radius-sm); 104 border-radius: var(--zen-radius-sm);
77 color: inherit; 105 color: inherit;
78 text-decoration: none; 106 text-decoration: none;
79 } 107 }
80 108
109 .catalog-nav a[hidden],
110 .component-grid > a[hidden] {
111 display: none;
112 }
113
81 .catalog-nav a:hover, 114 .catalog-nav a:hover,
82 .catalog-nav a[aria-current] { 115 .catalog-nav a[aria-current] {
83 background: var(--zen-color-accent); 116 background: var(--zen-color-accent);
84 color: #171a21; 117 color: var(--zen-color-on-accent);
85 } 118 }
86 119
87 .theme-toggle { 120 .theme-toggle {
88 width: 100%; 121 width: 100%;
89 margin-top: var(--zen-space-6); 122 margin-top: var(--zen-space-6);
95 cursor: pointer; 128 cursor: pointer;
96 } 129 }
97 130
98 .catalog-main { 131 .catalog-main {
99 width: min(100%, var(--zen-content-width)); 132 width: min(100%, var(--zen-content-width));
133 min-width: 0;
100 padding: var(--zen-space-7) clamp(1rem, 5vw, 5rem); 134 padding: var(--zen-space-7) clamp(1rem, 5vw, 5rem);
101 outline: none; 135 outline: none;
136 }
137
138 .catalog-page {
139 min-width: 0;
102 } 140 }
103 141
104 .catalog-page[hidden] { 142 .catalog-page[hidden] {
105 display: none; 143 display: none;
106 } 144 }
158 196
159 .component-grid zen-card { 197 .component-grid zen-card {
160 height: 100%; 198 height: 100%;
161 } 199 }
162 200
201 .component-grid code {
202 color: var(--zen-color-info);
203 font-size: var(--zen-font-size-xs);
204 }
205
206 .component-grid p {
207 color: var(--zen-color-text-muted);
208 }
209
163 .swatch-list { 210 .swatch-list {
164 display: grid; 211 display: grid;
165 gap: var(--zen-space-2); 212 gap: var(--zen-space-2);
166 margin: 0; 213 margin: 0;
167 } 214 }
183 .swatch { 230 .swatch {
184 width: 2rem; 231 width: 2rem;
185 height: 2rem; 232 height: 2rem;
186 border: 1px solid var(--zen-color-border); 233 border: 1px solid var(--zen-color-border);
187 border-radius: 50%; 234 border-radius: 50%;
188 background: var(--swatch); 235 background: var(--zen-color-swatch);
236 }
237
238 .token-group-wide {
239 grid-column: span 2;
240 }
241
242 .token-group > p {
243 color: var(--zen-color-text-muted);
244 }
245
246 .palette-grid {
247 display: grid;
248 grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
249 gap: var(--zen-space-3);
250 }
251
252 .palette-grid > div {
253 display: grid;
254 gap: var(--zen-space-1);
255 }
256
257 .palette-grid span {
258 min-height: 3.5rem;
259 border: 1px solid var(--zen-color-border-muted);
260 border-radius: var(--zen-radius-md);
261 background: var(--zen-color-swatch);
262 }
263
264 .palette-grid code {
265 font-size: var(--zen-font-size-xs);
266 }
267
268 .data-palette {
269 display: grid;
270 grid-template-columns: repeat(10, minmax(1.75rem, 1fr));
271 min-height: 4rem;
272 overflow: hidden;
273 border: 1px solid var(--zen-color-border);
274 border-radius: var(--zen-radius-md);
275 }
276
277 .data-palette span {
278 background: var(--zen-color-swatch);
279 }
280
281 .icon-grid {
282 display: grid;
283 grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
284 gap: var(--zen-space-3);
285 }
286
287 .icon-grid figure {
288 display: grid;
289 min-height: 7rem;
290 margin: 0;
291 padding: var(--zen-space-3);
292 place-items: center;
293 gap: var(--zen-space-2);
294 border: 1px solid var(--zen-color-border-muted);
295 border-radius: var(--zen-radius-md);
296 background: var(--zen-color-surface);
297 }
298
299 .icon-grid figcaption {
300 max-width: 100%;
301 overflow: hidden;
302 color: var(--zen-color-text-muted);
303 font-size: var(--zen-font-size-xs);
304 text-overflow: ellipsis;
189 } 305 }
190 306
191 zen-story { 307 zen-story {
192 display: block; 308 display: block;
309 max-width: 100%;
193 margin-bottom: var(--zen-space-6); 310 margin-bottom: var(--zen-space-6);
194 overflow: hidden; 311 overflow: hidden;
195 border: var(--zen-border-width) solid var(--zen-color-border); 312 border: var(--zen-border-width) solid var(--zen-color-border);
196 border-radius: var(--zen-radius-lg); 313 border-radius: var(--zen-radius-lg);
197 background: var(--zen-color-surface); 314 background: var(--zen-color-surface);
221 338
222 .story-canvas { 339 .story-canvas {
223 min-height: 8rem; 340 min-height: 8rem;
224 padding: clamp(1rem, 4vw, 3rem); 341 padding: clamp(1rem, 4vw, 3rem);
225 background: 342 background:
226 linear-gradient(90deg, rgba(127, 127, 127, 0.08) 1px, transparent 1px), 343 linear-gradient(90deg, var(--zen-color-gridline) 1px, transparent 1px),
227 linear-gradient(rgba(127, 127, 127, 0.08) 1px, transparent 1px); 344 linear-gradient(var(--zen-color-gridline) 1px, transparent 1px);
228 background-size: 1rem 1rem; 345 background-size: 1rem 1rem;
229 } 346 }
230 347
231 zen-story > pre { 348 zen-story > pre {
232 max-height: 24rem; 349 max-height: 24rem;
233 overflow: auto; 350 overflow: auto;
234 margin: 0; 351 margin: 0;
235 padding: var(--zen-space-4); 352 padding: var(--zen-space-4);
236 border-top: 1px solid var(--zen-color-border); 353 border-top: 1px solid var(--zen-color-border);
237 background: #111318; 354 background: var(--zen-color-code-surface);
238 color: #f4f4f5; 355 color: var(--zen-color-code-text);
239 font: var(--zen-font-size-sm)/1.55 var(--zen-font-mono); 356 font: var(--zen-font-size-sm)/1.55 var(--zen-font-mono);
240 } 357 }
241 358
242 .demo-card-grid { 359 .demo-card-grid {
243 display: grid; 360 display: grid;
263 } 380 }
264 381
265 .catalog-main { 382 .catalog-main {
266 padding: var(--zen-space-6) var(--zen-space-4); 383 padding: var(--zen-space-6) var(--zen-space-4);
267 } 384 }
268 } 385
386 .token-group-wide {
387 grid-column: auto;
388 }
389
390 .data-palette {
391 grid-template-columns: repeat(5, 1fr);
392 }
393 }