Mercurial

diff design_system/src/styles/themes.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 667156fcd3e3
line wrap: on
line diff
--- a/design_system/src/styles/themes.css	Tue Aug 04 16:49:11 2026 -0700
+++ b/design_system/src/styles/themes.css	Wed Aug 05 05:25:40 2026 -0700
@@ -18,12 +18,6 @@
   --zen-color-warning: var(--zen-color-orange-600);
   --zen-color-danger: var(--zen-color-red-600);
   --zen-color-focus: var(--zen-color-violet-600);
-  --zen-font-sans: var(
-    --zen-font-editorial,
-    ui-rounded,
-    system-ui,
-    sans-serif
-  );
 }
 
 :root[data-zen-theme="ink"] {
@@ -52,12 +46,6 @@
   --zen-color-focus: var(--zen-color-violet-300);
   --zen-color-on-accent: var(--zen-color-neutral-950);
   --zen-color-text-inverse: var(--zen-color-neutral-950);
-  --zen-font-sans: var(
-    --zen-font-editorial,
-    ui-rounded,
-    system-ui,
-    sans-serif
-  );
 }
 
 :root[data-zen-theme="playful"] {
@@ -83,13 +71,156 @@
   --zen-color-on-warning: var(--zen-color-neutral-50);
   --zen-color-focus: var(--zen-color-violet-500);
   --zen-color-on-accent: var(--zen-color-blue-950);
-  --zen-font-sans: var(
-    --zen-font-playful,
-    ui-rounded,
-    system-ui,
-    sans-serif
-  );
   --zen-radius-sm: 0.65rem;
   --zen-radius-md: 1rem;
   --zen-radius-lg: 1.5rem;
 }
+
+:root[data-zen-theme="paper"] {
+  --zenbu-sys-font-family-ui: var(
+    --zenbu-font-editorial,
+    var(--zenbu-ref-font-family-sans)
+  );
+  --zenbu-sys-font-family-content: var(--zenbu-sys-font-family-ui);
+  --zenbu-sys-color-surface-page: var(--zenbu-ref-color-neutral-100);
+  --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-neutral-100);
+  --zenbu-sys-color-surface-default: var(--zenbu-ref-color-neutral-50);
+  --zenbu-sys-color-surface-subtle: var(--zenbu-ref-color-neutral-200);
+  --zenbu-sys-color-surface-raised: var(--zenbu-ref-color-neutral-50);
+  --zenbu-sys-color-surface-sunken: var(--zenbu-ref-color-neutral-200);
+  --zenbu-sys-color-text-primary: var(--zenbu-ref-color-neutral-950);
+  --zenbu-sys-color-text-secondary: var(--zenbu-ref-color-neutral-700);
+  --zenbu-sys-color-text-tertiary: var(--zenbu-ref-color-neutral-500);
+  --zenbu-sys-color-border-subtle: var(--zenbu-ref-color-neutral-300);
+  --zenbu-sys-color-border-default: var(--zenbu-ref-color-neutral-500);
+  --zenbu-sys-color-border-strong: var(--zenbu-ref-color-neutral-800);
+  --zenbu-sys-color-action-primary-background: var(--zenbu-ref-color-amber-300);
+  --zenbu-sys-color-action-primary-background-hover: var(--zenbu-ref-color-amber-100);
+  --zenbu-sys-color-action-primary-background-pressed: var(--zenbu-ref-color-warning-600);
+  --zenbu-sys-color-action-primary-foreground: var(--zenbu-ref-color-neutral-950);
+  --zenbu-sys-color-text-link: var(--zenbu-ref-color-brand-600);
+  --zenbu-sys-color-focus-outer: var(--zenbu-ref-color-focus);
+}
+
+:root[data-zen-theme="ink"],
+:root[data-zen-theme="dark"] {
+  --zenbu-sys-font-family-ui: var(
+    --zenbu-font-editorial,
+    var(--zenbu-ref-font-family-sans)
+  );
+  --zenbu-sys-font-family-content: var(--zenbu-sys-font-family-ui);
+  --zenbu-sys-color-surface-page: var(--zenbu-ref-color-neutral-950);
+  --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-neutral-950);
+  --zenbu-sys-color-surface-default: var(--zenbu-ref-color-neutral-900);
+  --zenbu-sys-color-surface-subtle: var(--zenbu-ref-color-neutral-800);
+  --zenbu-sys-color-surface-raised: var(--zenbu-ref-color-neutral-800);
+  --zenbu-sys-color-surface-sunken: var(--zenbu-ref-color-neutral-950);
+  --zenbu-sys-color-text-primary: var(--zenbu-ref-color-neutral-50);
+  --zenbu-sys-color-text-secondary: var(--zenbu-ref-color-neutral-300);
+  --zenbu-sys-color-text-tertiary: var(--zenbu-ref-color-neutral-400);
+  --zenbu-sys-color-text-inverse: var(--zenbu-ref-color-neutral-950);
+  --zenbu-sys-color-text-link: var(--zenbu-ref-color-brand-300);
+  --zenbu-sys-color-border-subtle: var(--zenbu-ref-color-neutral-700);
+  --zenbu-sys-color-border-default: var(--zenbu-ref-color-neutral-600);
+  --zenbu-sys-color-border-strong: var(--zenbu-ref-color-neutral-200);
+  --zenbu-sys-color-action-primary-background: var(--zenbu-ref-color-amber-300);
+  --zenbu-sys-color-action-primary-background-hover: var(--zenbu-ref-color-amber-100);
+  --zenbu-sys-color-action-primary-background-pressed: var(--zenbu-ref-color-warning-600);
+  --zenbu-sys-color-action-primary-foreground: var(--zenbu-ref-color-neutral-950);
+  --zenbu-sys-color-action-danger-background: var(--zenbu-ref-color-danger-300);
+  --zenbu-sys-color-action-danger-background-hover: var(--zenbu-ref-color-danger-500);
+  --zenbu-sys-color-action-danger-background-pressed: var(--zenbu-ref-color-danger-600);
+  --zenbu-sys-color-action-danger-foreground: var(--zenbu-ref-color-neutral-950);
+  --zenbu-sys-color-focus-inner: var(--zenbu-ref-color-neutral-950);
+  --zenbu-sys-color-focus-outer: var(--zenbu-ref-color-neutral-50);
+  --zenbu-sys-color-info-background: var(--zenbu-ref-color-neutral-800);
+  --zenbu-sys-color-info-foreground: var(--zenbu-ref-color-brand-300);
+  --zenbu-sys-color-success-background: var(--zenbu-ref-color-neutral-800);
+  --zenbu-sys-color-success-foreground: var(--zenbu-ref-color-success-300);
+  --zenbu-sys-color-warning-background: var(--zenbu-ref-color-neutral-800);
+  --zenbu-sys-color-warning-foreground: var(--zenbu-ref-color-warning-300);
+  --zenbu-sys-color-danger-background: var(--zenbu-ref-color-neutral-800);
+  --zenbu-sys-color-danger-foreground: var(--zenbu-ref-color-danger-300);
+}
+
+:root[data-zen-theme="playful"] {
+  --zenbu-sys-font-family-ui: var(
+    --zenbu-font-playful,
+    var(--zenbu-ref-font-family-sans)
+  );
+  --zenbu-sys-font-family-content: var(--zenbu-sys-font-family-ui);
+  --zenbu-sys-color-surface-page: var(--zenbu-ref-color-rose-100);
+  --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-rose-100);
+  --zenbu-sys-color-surface-default: var(--zenbu-ref-color-amber-50);
+  --zenbu-sys-color-surface-subtle: var(--zenbu-ref-color-orange-100);
+  --zenbu-sys-color-surface-raised: var(--zenbu-ref-color-neutral-50);
+  --zenbu-sys-color-surface-sunken: var(--zenbu-ref-color-violet-100);
+  --zenbu-sys-color-text-primary: var(--zenbu-ref-color-blue-900);
+  --zenbu-sys-color-text-secondary: var(--zenbu-ref-color-violet-700);
+  --zenbu-sys-color-text-tertiary: var(--zenbu-ref-color-blue-600);
+  --zenbu-sys-color-border-subtle: var(--zenbu-ref-color-rose-300);
+  --zenbu-sys-color-border-default: var(--zenbu-ref-color-violet-500);
+  --zenbu-sys-color-border-strong: var(--zenbu-ref-color-violet-700);
+  --zenbu-sys-color-action-primary-background: var(--zenbu-ref-color-orange-300);
+  --zenbu-sys-color-action-primary-background-hover: var(--zenbu-ref-color-amber-300);
+  --zenbu-sys-color-action-primary-background-pressed: var(--zenbu-ref-color-warning-600);
+  --zenbu-sys-color-action-primary-foreground: var(--zenbu-ref-color-blue-950);
+  --zenbu-sys-color-text-link: var(--zenbu-ref-color-blue-600);
+  --zenbu-sys-color-focus-outer: var(--zenbu-ref-color-violet-500);
+  --zenbu-sys-radius-control-small: var(--zenbu-ref-radius-2);
+  --zenbu-sys-radius-control: var(--zenbu-ref-radius-4);
+  --zenbu-sys-radius-container: var(--zenbu-ref-radius-5);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-zen-theme]) {
+    --zenbu-sys-color-surface-page: var(--zenbu-ref-color-neutral-950);
+    --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-neutral-950);
+    --zenbu-sys-color-surface-default: var(--zenbu-ref-color-neutral-900);
+    --zenbu-sys-color-surface-subtle: var(--zenbu-ref-color-neutral-800);
+    --zenbu-sys-color-surface-raised: var(--zenbu-ref-color-neutral-800);
+    --zenbu-sys-color-surface-sunken: var(--zenbu-ref-color-neutral-950);
+    --zenbu-sys-color-text-primary: var(--zenbu-ref-color-neutral-50);
+    --zenbu-sys-color-text-secondary: var(--zenbu-ref-color-neutral-300);
+    --zenbu-sys-color-text-tertiary: var(--zenbu-ref-color-neutral-400);
+    --zenbu-sys-color-border-subtle: var(--zenbu-ref-color-neutral-700);
+    --zenbu-sys-color-border-default: var(--zenbu-ref-color-neutral-600);
+    --zenbu-sys-color-border-strong: var(--zenbu-ref-color-neutral-200);
+    --zenbu-sys-color-text-link: var(--zenbu-ref-color-brand-300);
+    --zenbu-sys-color-focus-inner: var(--zenbu-ref-color-neutral-950);
+    --zenbu-sys-color-focus-outer: var(--zenbu-ref-color-neutral-50);
+  }
+}
+
+@media (forced-colors: active) {
+  :root,
+  :root[data-zen-theme],
+  :root:not([data-zen-theme]) {
+    --zenbu-sys-color-surface-page: Canvas;
+    --zenbu-sys-color-surface-canvas: Canvas;
+    --zenbu-sys-color-surface-default: Canvas;
+    --zenbu-sys-color-surface-subtle: Canvas;
+    --zenbu-sys-color-surface-raised: Canvas;
+    --zenbu-sys-color-surface-overlay: Canvas;
+    --zenbu-sys-color-surface-sunken: Canvas;
+    --zenbu-sys-color-text-primary: CanvasText;
+    --zenbu-sys-color-text-secondary: CanvasText;
+    --zenbu-sys-color-text-tertiary: GrayText;
+    --zenbu-sys-color-text-disabled: GrayText;
+    --zenbu-sys-color-text-link: LinkText;
+    --zenbu-sys-color-border-subtle: CanvasText;
+    --zenbu-sys-color-border-default: CanvasText;
+    --zenbu-sys-color-border-strong: CanvasText;
+    --zenbu-sys-color-action-primary-background: Highlight;
+    --zenbu-sys-color-action-primary-background-hover: Highlight;
+    --zenbu-sys-color-action-primary-background-pressed: Highlight;
+    --zenbu-sys-color-action-primary-foreground: HighlightText;
+    --zenbu-sys-color-action-primary-border: Highlight;
+    --zenbu-sys-color-focus-inner: Canvas;
+    --zenbu-sys-color-focus-outer: CanvasText;
+    --zenbu-sys-shadow-subtle: none;
+    --zenbu-sys-shadow-raised: none;
+    --zenbu-sys-shadow-overlay: none;
+    --zenbu-sys-shadow-dialog: none;
+  }
+}