Mercurial

comparison design_system/src/styles/tokens.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 30c2196d03d4
children
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
1 @import url("./reference.css");
2 @import url("./semantic.css");
3 @import url("./density.css");
4
1 :root { 5 :root {
2 color-scheme: light; 6 color-scheme: light;
3 7
4 /* Warm primitive ramps: restrained enough for large surfaces, distinct 8 /* Warm primitive ramps: restrained enough for large surfaces, distinct
5 enough for data and status work. */ 9 enough for data and status work. */
168 --zen-color-success-muted: var(--zen-color-green-100); 172 --zen-color-success-muted: var(--zen-color-green-100);
169 --zen-color-warning-muted: var(--zen-color-orange-100); 173 --zen-color-warning-muted: var(--zen-color-orange-100);
170 --zen-color-danger-muted: var(--zen-color-red-100); 174 --zen-color-danger-muted: var(--zen-color-red-100);
171 --zen-color-disabled: var(--zen-color-neutral-300); 175 --zen-color-disabled: var(--zen-color-neutral-300);
172 --zen-color-selection: var(--zen-color-amber-200); 176 --zen-color-selection: var(--zen-color-amber-200);
177 --zen-color-link-decoration: var(--zen-color-clay);
173 --zen-color-code-surface: #111318; 178 --zen-color-code-surface: #111318;
174 --zen-color-code-text: #f4f4f5; 179 --zen-color-code-text: #f4f4f5;
175 --zen-color-gridline: rgba(127, 127, 127, 0.08); 180 --zen-color-gridline: rgba(127, 127, 127, 0.08);
176 181
177 --zen-color-data-1: var(--zen-color-indigo); 182 --zen-color-data-1: var(--zen-color-indigo);
183 --zen-color-data-7: var(--zen-color-brick); 188 --zen-color-data-7: var(--zen-color-brick);
184 --zen-color-data-8: var(--zen-color-wood); 189 --zen-color-data-8: var(--zen-color-wood);
185 --zen-color-data-9: var(--zen-color-clay); 190 --zen-color-data-9: var(--zen-color-clay);
186 --zen-color-data-10: var(--zen-color-blue-400); 191 --zen-color-data-10: var(--zen-color-blue-400);
187 192
188 --zen-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 193 /* Compatibility aliases. New code consumes --zenbu-sys-* tokens. */
189 --zen-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; 194 --zen-font-sans: var(--zenbu-sys-font-family-ui);
190 --zen-font-size-xs: 0.75rem; 195 --zen-font-mono: var(--zenbu-sys-font-family-code);
191 --zen-font-size-sm: 0.875rem; 196 --zen-font-size-xs: var(--zenbu-sys-font-size-xs);
192 --zen-font-size-md: 1rem; 197 --zen-font-size-sm: var(--zenbu-sys-font-size-sm);
193 --zen-font-size-lg: 1.25rem; 198 --zen-font-size-md: var(--zenbu-sys-font-size-md);
194 --zen-font-size-xl: clamp(1.75rem, 4vw, 3rem); 199 --zen-font-size-lg: var(--zenbu-sys-font-size-lg);
195 --zen-line-height: 1.55; 200 --zen-font-size-xl: var(--zenbu-sys-font-size-xl);
196 201 --zen-font-size-2xl: var(--zenbu-sys-font-size-2xl);
197 --zen-space-1: 0.25rem; 202 --zen-font-size-3xl: var(--zenbu-sys-type-page-title-size);
198 --zen-space-2: 0.5rem; 203 --zen-line-height-xs: var(--zenbu-sys-line-height-xs);
199 --zen-space-3: 0.75rem; 204 --zen-line-height-sm: var(--zenbu-sys-line-height-sm);
200 --zen-space-4: 1rem; 205 --zen-line-height-md: var(--zenbu-sys-line-height-md);
201 --zen-space-5: 1.5rem; 206 --zen-line-height-lg: var(--zenbu-sys-line-height-lg);
202 --zen-space-6: 2rem; 207 --zen-line-height-xl: var(--zenbu-sys-line-height-xl);
203 --zen-space-7: 3rem; 208 --zen-line-height: var(--zenbu-sys-type-body-line-height);
209 --zen-font-weight-regular: var(--zenbu-sys-font-weight-regular);
210 --zen-font-weight-medium: var(--zenbu-sys-font-weight-medium);
211 --zen-font-weight-strong: var(--zenbu-sys-font-weight-strong);
212 --zen-font-weight-display: var(--zenbu-sys-font-weight-display);
213
214 --zen-space-1: var(--zenbu-ref-space-1);
215 --zen-space-2: var(--zenbu-ref-space-2);
216 --zen-space-3: var(--zenbu-ref-space-3);
217 --zen-space-4: var(--zenbu-ref-space-4);
218 --zen-space-5: var(--zenbu-ref-space-6);
219 --zen-space-6: var(--zenbu-ref-space-8);
220 --zen-space-7: var(--zenbu-ref-space-12);
221
222 --zen-padding-xs: var(--zenbu-sys-padding-xs);
223 --zen-padding-sm: var(--zenbu-sys-padding-sm);
224 --zen-padding-md: var(--zenbu-sys-padding-md);
225 --zen-padding-lg: var(--zenbu-sys-padding-lg);
226 --zen-padding-xl: var(--zenbu-sys-padding-xl);
227
228 --zen-control-height-xs: var(--zenbu-sys-control-height-xs);
229 --zen-control-height-sm: var(--zenbu-sys-control-height-sm);
230 --zen-control-height-md: var(--zenbu-sys-control-height-md);
231 --zen-control-height-lg: var(--zenbu-sys-control-height-lg);
232 --zen-control-height-xl: var(--zenbu-sys-control-height-xl);
233 --zen-control-padding-block-xs: var(--zenbu-sys-control-padding-block-xs);
234 --zen-control-padding-block-sm: var(--zenbu-sys-control-padding-block-sm);
235 --zen-control-padding-block-md: var(--zenbu-sys-control-padding-block-md);
236 --zen-control-padding-block-lg: var(--zenbu-sys-control-padding-block-lg);
237 --zen-control-padding-block-xl: var(--zenbu-sys-control-padding-block-xl);
238 --zen-control-padding-inline-xs: var(--zenbu-sys-control-padding-inline-xs);
239 --zen-control-padding-inline-sm: var(--zenbu-sys-control-padding-inline-sm);
240 --zen-control-padding-inline-md: var(--zenbu-sys-control-padding-inline-md);
241 --zen-control-padding-inline-lg: var(--zenbu-sys-control-padding-inline-lg);
242 --zen-control-padding-inline-xl: var(--zenbu-sys-control-padding-inline-xl);
243 --zen-control-gap-xs: var(--zenbu-sys-control-gap-xs);
244 --zen-control-gap-sm: var(--zenbu-sys-control-gap-sm);
245 --zen-control-gap-md: var(--zenbu-sys-control-gap-md);
246 --zen-control-gap-lg: var(--zenbu-sys-control-gap-lg);
247 --zen-control-gap-xl: var(--zenbu-sys-control-gap-xl);
248 --zen-control-line-height-xs: var(--zenbu-sys-control-line-height-xs);
249 --zen-control-line-height-sm: var(--zenbu-sys-control-line-height-sm);
250 --zen-control-line-height-md: var(--zenbu-sys-control-line-height-md);
251 --zen-control-line-height-lg: var(--zenbu-sys-control-line-height-lg);
252 --zen-control-line-height-xl: var(--zenbu-sys-control-line-height-xl);
253 --zen-icon-size-xs: var(--zenbu-sys-icon-size-xs);
254 --zen-icon-size-sm: var(--zenbu-sys-icon-size-sm);
255 --zen-icon-size-md: var(--zenbu-sys-icon-size-md);
256 --zen-icon-size-lg: var(--zenbu-sys-icon-size-lg);
257 --zen-icon-size-xl: var(--zenbu-sys-icon-size-xl);
204 258
205 --zen-radius-sm: 0.35rem; 259 --zen-radius-sm: 0.35rem;
206 --zen-radius-md: 0.7rem; 260 --zen-radius-md: 0.7rem;
207 --zen-radius-lg: 1rem; 261 --zen-radius-lg: 1rem;
208 --zen-border-width: 2px; 262 --zen-border-width: 2px;