Mercurial

diff design_system/src/styles/themes.css @ 256:30c2196d03d4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[site] Integrate Zenbu themes and components Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 16:49:01 -0700
parents
children 60a876c4587a
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/design_system/src/styles/themes.css	Tue Aug 04 16:49:01 2026 -0700
@@ -0,0 +1,95 @@
+:root[data-zen-theme="paper"] {
+  color-scheme: light;
+  --zen-color-canvas: var(--zen-color-neutral-100);
+  --zen-color-surface: var(--zen-color-neutral-50);
+  --zen-color-surface-raised: var(--zen-color-neutral-50);
+  --zen-color-surface-muted: var(--zen-color-neutral-100);
+  --zen-color-surface-sunken: var(--zen-color-neutral-200);
+  --zen-color-text: var(--zen-color-neutral-950);
+  --zen-color-text-muted: var(--zen-color-neutral-600);
+  --zen-color-text-subtle: var(--zen-color-neutral-500);
+  --zen-color-border: var(--zen-color-neutral-800);
+  --zen-color-border-muted: var(--zen-color-neutral-300);
+  --zen-color-accent: var(--zen-color-amber-400);
+  --zen-color-accent-hover: var(--zen-color-amber-300);
+  --zen-color-accent-muted: var(--zen-color-amber-100);
+  --zen-color-info: var(--zen-color-blue-600);
+  --zen-color-success: var(--zen-color-green-600);
+  --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"] {
+  color-scheme: dark;
+  --zen-color-canvas: var(--zen-color-neutral-950);
+  --zen-color-surface: var(--zen-color-neutral-900);
+  --zen-color-surface-raised: var(--zen-color-neutral-800);
+  --zen-color-surface-muted: var(--zen-color-neutral-800);
+  --zen-color-surface-sunken: var(--zen-color-neutral-950);
+  --zen-color-text: var(--zen-color-neutral-50);
+  --zen-color-text-muted: var(--zen-color-neutral-300);
+  --zen-color-text-subtle: var(--zen-color-neutral-400);
+  --zen-color-border: var(--zen-color-neutral-200);
+  --zen-color-border-muted: var(--zen-color-neutral-700);
+  --zen-color-accent: var(--zen-color-amber-300);
+  --zen-color-accent-hover: var(--zen-color-amber-200);
+  --zen-color-accent-muted: var(--zen-color-amber-800);
+  --zen-color-info: var(--zen-color-blue-300);
+  --zen-color-success: var(--zen-color-green-300);
+  --zen-color-warning: var(--zen-color-orange-300);
+  --zen-color-danger: var(--zen-color-red-300);
+  --zen-color-on-info: var(--zen-color-neutral-950);
+  --zen-color-on-success: var(--zen-color-neutral-950);
+  --zen-color-on-warning: var(--zen-color-neutral-950);
+  --zen-color-on-danger: var(--zen-color-neutral-950);
+  --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"] {
+  color-scheme: light;
+  --zen-color-canvas: var(--zen-color-rose-100);
+  --zen-color-surface: var(--zen-color-amber-50);
+  --zen-color-surface-raised: var(--zen-color-neutral-50);
+  --zen-color-surface-muted: var(--zen-color-orange-100);
+  --zen-color-surface-sunken: var(--zen-color-violet-100);
+  --zen-color-text: var(--zen-color-blue-900);
+  --zen-color-text-muted: var(--zen-color-violet-700);
+  --zen-color-text-subtle: var(--zen-color-blue-600);
+  --zen-color-border: var(--zen-color-violet-700);
+  --zen-color-border-muted: var(--zen-color-rose-300);
+  --zen-color-accent: var(--zen-color-orange-300);
+  --zen-color-accent-hover: var(--zen-color-amber-300);
+  --zen-color-accent-muted: var(--zen-color-orange-100);
+  --zen-color-info: var(--zen-color-blue-600);
+  --zen-color-success: var(--zen-color-green-600);
+  --zen-color-warning: var(--zen-color-amber-600);
+  --zen-color-danger: var(--zen-color-rose-600);
+  --zen-color-on-success: var(--zen-color-neutral-50);
+  --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;
+}