Mercurial

diff 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
line wrap: on
line diff
--- a/design_system/src/styles/tokens.css	Tue Aug 04 16:49:11 2026 -0700
+++ b/design_system/src/styles/tokens.css	Wed Aug 05 05:25:40 2026 -0700
@@ -1,3 +1,7 @@
+@import url("./reference.css");
+@import url("./semantic.css");
+@import url("./density.css");
+
 :root {
   color-scheme: light;
 
@@ -170,6 +174,7 @@
   --zen-color-danger-muted: var(--zen-color-red-100);
   --zen-color-disabled: var(--zen-color-neutral-300);
   --zen-color-selection: var(--zen-color-amber-200);
+  --zen-color-link-decoration: var(--zen-color-clay);
   --zen-color-code-surface: #111318;
   --zen-color-code-text: #f4f4f5;
   --zen-color-gridline: rgba(127, 127, 127, 0.08);
@@ -185,22 +190,71 @@
   --zen-color-data-9: var(--zen-color-clay);
   --zen-color-data-10: var(--zen-color-blue-400);
 
-  --zen-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --zen-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
-  --zen-font-size-xs: 0.75rem;
-  --zen-font-size-sm: 0.875rem;
-  --zen-font-size-md: 1rem;
-  --zen-font-size-lg: 1.25rem;
-  --zen-font-size-xl: clamp(1.75rem, 4vw, 3rem);
-  --zen-line-height: 1.55;
+  /* Compatibility aliases. New code consumes --zenbu-sys-* tokens. */
+  --zen-font-sans: var(--zenbu-sys-font-family-ui);
+  --zen-font-mono: var(--zenbu-sys-font-family-code);
+  --zen-font-size-xs: var(--zenbu-sys-font-size-xs);
+  --zen-font-size-sm: var(--zenbu-sys-font-size-sm);
+  --zen-font-size-md: var(--zenbu-sys-font-size-md);
+  --zen-font-size-lg: var(--zenbu-sys-font-size-lg);
+  --zen-font-size-xl: var(--zenbu-sys-font-size-xl);
+  --zen-font-size-2xl: var(--zenbu-sys-font-size-2xl);
+  --zen-font-size-3xl: var(--zenbu-sys-type-page-title-size);
+  --zen-line-height-xs: var(--zenbu-sys-line-height-xs);
+  --zen-line-height-sm: var(--zenbu-sys-line-height-sm);
+  --zen-line-height-md: var(--zenbu-sys-line-height-md);
+  --zen-line-height-lg: var(--zenbu-sys-line-height-lg);
+  --zen-line-height-xl: var(--zenbu-sys-line-height-xl);
+  --zen-line-height: var(--zenbu-sys-type-body-line-height);
+  --zen-font-weight-regular: var(--zenbu-sys-font-weight-regular);
+  --zen-font-weight-medium: var(--zenbu-sys-font-weight-medium);
+  --zen-font-weight-strong: var(--zenbu-sys-font-weight-strong);
+  --zen-font-weight-display: var(--zenbu-sys-font-weight-display);
+
+  --zen-space-1: var(--zenbu-ref-space-1);
+  --zen-space-2: var(--zenbu-ref-space-2);
+  --zen-space-3: var(--zenbu-ref-space-3);
+  --zen-space-4: var(--zenbu-ref-space-4);
+  --zen-space-5: var(--zenbu-ref-space-6);
+  --zen-space-6: var(--zenbu-ref-space-8);
+  --zen-space-7: var(--zenbu-ref-space-12);
 
-  --zen-space-1: 0.25rem;
-  --zen-space-2: 0.5rem;
-  --zen-space-3: 0.75rem;
-  --zen-space-4: 1rem;
-  --zen-space-5: 1.5rem;
-  --zen-space-6: 2rem;
-  --zen-space-7: 3rem;
+  --zen-padding-xs: var(--zenbu-sys-padding-xs);
+  --zen-padding-sm: var(--zenbu-sys-padding-sm);
+  --zen-padding-md: var(--zenbu-sys-padding-md);
+  --zen-padding-lg: var(--zenbu-sys-padding-lg);
+  --zen-padding-xl: var(--zenbu-sys-padding-xl);
+
+  --zen-control-height-xs: var(--zenbu-sys-control-height-xs);
+  --zen-control-height-sm: var(--zenbu-sys-control-height-sm);
+  --zen-control-height-md: var(--zenbu-sys-control-height-md);
+  --zen-control-height-lg: var(--zenbu-sys-control-height-lg);
+  --zen-control-height-xl: var(--zenbu-sys-control-height-xl);
+  --zen-control-padding-block-xs: var(--zenbu-sys-control-padding-block-xs);
+  --zen-control-padding-block-sm: var(--zenbu-sys-control-padding-block-sm);
+  --zen-control-padding-block-md: var(--zenbu-sys-control-padding-block-md);
+  --zen-control-padding-block-lg: var(--zenbu-sys-control-padding-block-lg);
+  --zen-control-padding-block-xl: var(--zenbu-sys-control-padding-block-xl);
+  --zen-control-padding-inline-xs: var(--zenbu-sys-control-padding-inline-xs);
+  --zen-control-padding-inline-sm: var(--zenbu-sys-control-padding-inline-sm);
+  --zen-control-padding-inline-md: var(--zenbu-sys-control-padding-inline-md);
+  --zen-control-padding-inline-lg: var(--zenbu-sys-control-padding-inline-lg);
+  --zen-control-padding-inline-xl: var(--zenbu-sys-control-padding-inline-xl);
+  --zen-control-gap-xs: var(--zenbu-sys-control-gap-xs);
+  --zen-control-gap-sm: var(--zenbu-sys-control-gap-sm);
+  --zen-control-gap-md: var(--zenbu-sys-control-gap-md);
+  --zen-control-gap-lg: var(--zenbu-sys-control-gap-lg);
+  --zen-control-gap-xl: var(--zenbu-sys-control-gap-xl);
+  --zen-control-line-height-xs: var(--zenbu-sys-control-line-height-xs);
+  --zen-control-line-height-sm: var(--zenbu-sys-control-line-height-sm);
+  --zen-control-line-height-md: var(--zenbu-sys-control-line-height-md);
+  --zen-control-line-height-lg: var(--zenbu-sys-control-line-height-lg);
+  --zen-control-line-height-xl: var(--zenbu-sys-control-line-height-xl);
+  --zen-icon-size-xs: var(--zenbu-sys-icon-size-xs);
+  --zen-icon-size-sm: var(--zenbu-sys-icon-size-sm);
+  --zen-icon-size-md: var(--zenbu-sys-icon-size-md);
+  --zen-icon-size-lg: var(--zenbu-sys-icon-size-lg);
+  --zen-icon-size-xl: var(--zenbu-sys-icon-size-xl);
 
   --zen-radius-sm: 0.35rem;
   --zen-radius-md: 0.7rem;