Mercurial

comparison 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
comparison
equal deleted inserted replaced
255:5ec271d612ae 256:30c2196d03d4
1 :root[data-zen-theme="paper"] {
2 color-scheme: light;
3 --zen-color-canvas: var(--zen-color-neutral-100);
4 --zen-color-surface: var(--zen-color-neutral-50);
5 --zen-color-surface-raised: var(--zen-color-neutral-50);
6 --zen-color-surface-muted: var(--zen-color-neutral-100);
7 --zen-color-surface-sunken: var(--zen-color-neutral-200);
8 --zen-color-text: var(--zen-color-neutral-950);
9 --zen-color-text-muted: var(--zen-color-neutral-600);
10 --zen-color-text-subtle: var(--zen-color-neutral-500);
11 --zen-color-border: var(--zen-color-neutral-800);
12 --zen-color-border-muted: var(--zen-color-neutral-300);
13 --zen-color-accent: var(--zen-color-amber-400);
14 --zen-color-accent-hover: var(--zen-color-amber-300);
15 --zen-color-accent-muted: var(--zen-color-amber-100);
16 --zen-color-info: var(--zen-color-blue-600);
17 --zen-color-success: var(--zen-color-green-600);
18 --zen-color-warning: var(--zen-color-orange-600);
19 --zen-color-danger: var(--zen-color-red-600);
20 --zen-color-focus: var(--zen-color-violet-600);
21 --zen-font-sans: var(
22 --zen-font-editorial,
23 ui-rounded,
24 system-ui,
25 sans-serif
26 );
27 }
28
29 :root[data-zen-theme="ink"] {
30 color-scheme: dark;
31 --zen-color-canvas: var(--zen-color-neutral-950);
32 --zen-color-surface: var(--zen-color-neutral-900);
33 --zen-color-surface-raised: var(--zen-color-neutral-800);
34 --zen-color-surface-muted: var(--zen-color-neutral-800);
35 --zen-color-surface-sunken: var(--zen-color-neutral-950);
36 --zen-color-text: var(--zen-color-neutral-50);
37 --zen-color-text-muted: var(--zen-color-neutral-300);
38 --zen-color-text-subtle: var(--zen-color-neutral-400);
39 --zen-color-border: var(--zen-color-neutral-200);
40 --zen-color-border-muted: var(--zen-color-neutral-700);
41 --zen-color-accent: var(--zen-color-amber-300);
42 --zen-color-accent-hover: var(--zen-color-amber-200);
43 --zen-color-accent-muted: var(--zen-color-amber-800);
44 --zen-color-info: var(--zen-color-blue-300);
45 --zen-color-success: var(--zen-color-green-300);
46 --zen-color-warning: var(--zen-color-orange-300);
47 --zen-color-danger: var(--zen-color-red-300);
48 --zen-color-on-info: var(--zen-color-neutral-950);
49 --zen-color-on-success: var(--zen-color-neutral-950);
50 --zen-color-on-warning: var(--zen-color-neutral-950);
51 --zen-color-on-danger: var(--zen-color-neutral-950);
52 --zen-color-focus: var(--zen-color-violet-300);
53 --zen-color-on-accent: var(--zen-color-neutral-950);
54 --zen-color-text-inverse: var(--zen-color-neutral-950);
55 --zen-font-sans: var(
56 --zen-font-editorial,
57 ui-rounded,
58 system-ui,
59 sans-serif
60 );
61 }
62
63 :root[data-zen-theme="playful"] {
64 color-scheme: light;
65 --zen-color-canvas: var(--zen-color-rose-100);
66 --zen-color-surface: var(--zen-color-amber-50);
67 --zen-color-surface-raised: var(--zen-color-neutral-50);
68 --zen-color-surface-muted: var(--zen-color-orange-100);
69 --zen-color-surface-sunken: var(--zen-color-violet-100);
70 --zen-color-text: var(--zen-color-blue-900);
71 --zen-color-text-muted: var(--zen-color-violet-700);
72 --zen-color-text-subtle: var(--zen-color-blue-600);
73 --zen-color-border: var(--zen-color-violet-700);
74 --zen-color-border-muted: var(--zen-color-rose-300);
75 --zen-color-accent: var(--zen-color-orange-300);
76 --zen-color-accent-hover: var(--zen-color-amber-300);
77 --zen-color-accent-muted: var(--zen-color-orange-100);
78 --zen-color-info: var(--zen-color-blue-600);
79 --zen-color-success: var(--zen-color-green-600);
80 --zen-color-warning: var(--zen-color-amber-600);
81 --zen-color-danger: var(--zen-color-rose-600);
82 --zen-color-on-success: var(--zen-color-neutral-50);
83 --zen-color-on-warning: var(--zen-color-neutral-50);
84 --zen-color-focus: var(--zen-color-violet-500);
85 --zen-color-on-accent: var(--zen-color-blue-950);
86 --zen-font-sans: var(
87 --zen-font-playful,
88 ui-rounded,
89 system-ui,
90 sans-serif
91 );
92 --zen-radius-sm: 0.65rem;
93 --zen-radius-md: 1rem;
94 --zen-radius-lg: 1.5rem;
95 }