@crewlethq/tokens 0.4.3 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/README.md +359 -31
  2. package/dist/css/base.css +9 -3
  3. package/dist/css/breakpoint.css +2 -1
  4. package/dist/css/fonts.css +11 -11
  5. package/dist/css/legacy.css +11 -9
  6. package/dist/css/themes.css +267 -300
  7. package/dist/css/tokens.css +55 -65
  8. package/dist/index.d.ts +47 -59
  9. package/dist/index.js +50 -62
  10. package/dist/themes.d.ts +98 -126
  11. package/dist/themes.js +98 -126
  12. package/fonts/OFL.txt +15 -14
  13. package/fonts/README.md +22 -13
  14. package/fonts/SHA256SUMS +4 -4
  15. package/fonts/geist-latin-ext.woff2 +0 -0
  16. package/fonts/geist-latin.woff2 +0 -0
  17. package/fonts/geist-mono-latin-ext.woff2 +0 -0
  18. package/fonts/geist-mono-latin.woff2 +0 -0
  19. package/package.json +1 -1
  20. package/test/color.mjs +26 -12
  21. package/test/palette.d.mts +88 -3
  22. package/test/palette.mjs +464 -179
  23. package/test/palette.test.mjs +448 -9
  24. package/fonts/inter-latin-ext.woff2 +0 -0
  25. package/fonts/inter-latin.woff2 +0 -0
  26. package/fonts/jetbrains-mono-latin-ext.woff2 +0 -0
  27. package/fonts/jetbrains-mono-latin.woff2 +0 -0
package/dist/css/fonts.css CHANGED
@@ -6,41 +6,41 @@
6
6
  import '@crewlethq/tokens/css/fonts';
7
7
  Apps that already load these fonts at the shell can skip this file.
8
8
 
9
- Inter and JetBrains Mono are licensed under the SIL Open Font License 1.1.
9
+ Geist and Geist Mono are licensed under the SIL Open Font License 1.1.
10
10
  See fonts/OFL.txt in this package. */
11
11
 
12
12
  @font-face {
13
- font-family: 'Inter';
13
+ font-family: 'Geist';
14
14
  font-style: normal;
15
15
  font-weight: 100 900;
16
16
  font-display: swap;
17
- src: url('../../fonts/inter-latin-ext.woff2') format('woff2');
17
+ src: url('../../fonts/geist-latin-ext.woff2') format('woff2');
18
18
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
19
19
  }
20
20
 
21
21
  @font-face {
22
- font-family: 'Inter';
22
+ font-family: 'Geist';
23
23
  font-style: normal;
24
24
  font-weight: 100 900;
25
25
  font-display: swap;
26
- src: url('../../fonts/inter-latin.woff2') format('woff2');
26
+ src: url('../../fonts/geist-latin.woff2') format('woff2');
27
27
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
28
28
  }
29
29
 
30
30
  @font-face {
31
- font-family: 'JetBrains Mono';
31
+ font-family: 'Geist Mono';
32
32
  font-style: normal;
33
- font-weight: 100 800;
33
+ font-weight: 100 900;
34
34
  font-display: swap;
35
- src: url('../../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
35
+ src: url('../../fonts/geist-mono-latin-ext.woff2') format('woff2');
36
36
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
37
37
  }
38
38
 
39
39
  @font-face {
40
- font-family: 'JetBrains Mono';
40
+ font-family: 'Geist Mono';
41
41
  font-style: normal;
42
- font-weight: 100 800;
42
+ font-weight: 100 900;
43
43
  font-display: swap;
44
- src: url('../../fonts/jetbrains-mono-latin.woff2') format('woff2');
44
+ src: url('../../fonts/geist-mono-latin.woff2') format('woff2');
45
45
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
46
46
  }
package/dist/css/legacy.css CHANGED
@@ -8,20 +8,22 @@
8
8
  so an alias resolved there follows a theme switch. Override an alias on
9
9
  :root or on a descendant of it. */
10
10
  :root {
11
- /* Brand */
12
- --accent: var(--color-brand-primary);
13
- --primary-blue: var(--color-brand-primary);
14
- --accent-purple: var(--color-brand-primary);
11
+ /* Brand. The three names a pre-token stylesheet spelled its one brand
12
+ colour with all read the accent, which is the primary action's fill. */
13
+ --accent: var(--color-brand-accent);
14
+ --primary-blue: var(--color-brand-accent);
15
+ --accent-purple: var(--color-brand-accent);
15
16
  --accent-purple-deep: var(--color-brand-accent-deep);
16
17
  --accent-pink: var(--color-brand-highlight);
17
18
  --accent-slate: var(--color-brand-slate);
18
19
  --accent-gradient: var(--color-brand-gradient);
19
20
 
20
- /* Surface ramp */
21
- --bg-primary: var(--color-surface-topbar);
22
- --bg-secondary: var(--color-surface-topbar-lift);
23
- --bg-tertiary: var(--color-surface-topbar-active);
24
- --bg-elevated: var(--color-surface-topbar-active);
21
+ /* Surface ramp: the sheet, the card and raised. A stylesheet written
22
+ before the frame existed has no name for it; its page is the sheet. */
23
+ --bg-primary: var(--color-surface-background);
24
+ --bg-secondary: var(--color-surface-subtle);
25
+ --bg-tertiary: var(--color-surface-elevated);
26
+ --bg-elevated: var(--color-surface-elevated);
25
27
 
26
28
  /* Text */
27
29
  --text-primary: var(--color-text-primary);
package/dist/css/themes.css CHANGED
@@ -1,314 +1,71 @@
1
- /* Generated by style-dictionary. The light and dark palettes, as a
1
+ /* Generated by style-dictionary. The dark and light palettes, as a
2
2
  three-state contract on the root element. Import it after tokens.css:
3
3
  import '@crewlethq/tokens/css';
4
4
  import '@crewlethq/tokens/css/themes';
5
5
 
6
- A document with no data-theme attribute is light, or dark if its system
7
- asks for dark. Setting data-theme="light" or data-theme="dark" on
8
- <html> pins one, and wins in both directions. Remove the attribute to
9
- follow the system again. Both dark blocks are generated from one source. */
6
+ Dark first: a document with no data-theme attribute is dark, or light if
7
+ its system asks for light. Setting data-theme="dark" or data-theme="light"
8
+ on <html> pins one, and wins in both directions. Remove the attribute to
9
+ follow the system again. Both light blocks are generated from one
10
+ source. */
10
11
 
11
- /* Light. The default, on the bare root, so a document that sets nothing gets
12
- a complete palette. */
12
+ /* Dark. The default, on the bare root, so a document that sets nothing, and a
13
+ browser that reports no preference, get a complete palette. */
13
14
  :root {
14
- color-scheme: light;
15
-
16
- --color-surface-background: #ffffff;
17
- --color-surface-subtle: #f4f4f5;
18
- --color-surface-muted: #f4f4f5;
19
- --color-surface-elevated: #ebebee;
20
- --color-surface-topbar: #ffffff;
21
- --color-surface-topbar-lift: #f4f4f5;
22
- --color-surface-topbar-active: #ebebee;
23
- --color-surface-hover: rgba(9, 9, 11, 0.04);
24
- --color-surface-pressed: rgba(9, 9, 11, 0.07);
25
- --color-surface-inset: rgba(9, 9, 11, 0.05);
26
- --color-surface-glass: rgba(244, 244, 245, 0.90);
27
- --color-surface-scrim: rgba(0, 0, 0, 0.6);
28
- --color-surface-veil: rgba(255, 255, 255, 0.72);
29
- --color-surface-inverse: #09090b;
30
- --color-text-primary: #09090b;
31
- --color-text-secondary: #52525b;
32
- --color-text-tertiary: #5b5b64;
33
- --color-text-muted: #8f8f95;
34
- --color-text-on-brand: #ffffff;
35
- --color-text-on-accent: #ffffff;
36
- --color-text-inverse: #fafafa;
37
- --color-brand-primary: #000000;
38
- --color-brand-primary-hover: rgba(0, 0, 0, 0.85);
39
- --color-brand-primary-active: rgba(0, 0, 0, 0.7);
40
- --color-brand-accent-ink: #3e50b8;
41
- --color-brand-accent-soft: rgba(84, 105, 212, 0.14);
42
- --color-border-default: #e4e4e7;
43
- --color-border-hover: #d4d4d8;
44
- --color-border-strong: #d4d4d8;
45
- --color-border-strong-hover: #a1a1aa;
46
- --color-border-control: #71717a;
47
- --color-focus: #5469d4;
48
- --color-feedback-success: #0f766e;
49
- --color-feedback-success-ink: #115e59;
50
- --color-feedback-warning: #b45309;
51
- --color-feedback-warning-ink: #92400e;
52
- --color-feedback-danger: #991b1b;
53
- --color-feedback-danger-hover: #7f1d1d;
54
- --color-feedback-danger-ink: #991b1b;
55
- --color-feedback-info: #075985;
56
- --color-feedback-info-ink: #075985;
57
- --color-feedback-success-soft: rgba(15, 118, 110, 0.12);
58
- --color-feedback-success-line: rgba(15, 118, 110, 0.3);
59
- --color-feedback-warning-soft: rgba(180, 83, 9, 0.12);
60
- --color-feedback-warning-line: rgba(180, 83, 9, 0.3);
61
- --color-feedback-danger-soft: rgba(153, 27, 27, 0.12);
62
- --color-feedback-danger-line: rgba(153, 27, 27, 0.3);
63
- --color-feedback-info-soft: rgba(7, 89, 133, 0.12);
64
- --color-feedback-info-line: rgba(7, 89, 133, 0.3);
65
- --color-phase-onboarding: #980099;
66
- --color-phase-onboarding-ink: #8e0090;
67
- --color-phase-execute: #5b37da;
68
- --color-phase-execute-ink: #552dd1;
69
- --color-phase-review: #078543;
70
- --color-phase-review-ink: #006121;
71
- --color-phase-onboarding-soft: rgba(152, 0, 153, 0.12);
72
- --color-phase-execute-soft: rgba(91, 55, 218, 0.12);
73
- --color-phase-review-soft: rgba(7, 133, 67, 0.12);
74
- --color-data-1: #3730a3;
75
- --color-data-2: #a16207;
76
- --color-data-3: #075985;
77
- --color-data-4: #1c9002;
78
- --color-data-5: #db2777;
79
- --color-data-other: #71717a;
80
- --color-node-purple: #7150b3;
81
- --color-node-purple-ink: #573394;
82
- --color-node-cyan: #166b80;
83
- --color-node-cyan-ink: #004f62;
84
- --color-node-green: #2c7046;
85
- --color-node-green-ink: #05532b;
86
- --color-node-amber: #865a28;
87
- --color-node-amber-ink: #683e03;
88
- --color-node-rose: #984a55;
89
- --color-node-rose-ink: #7a2f3c;
90
- --color-node-blue: #4062a7;
91
- --color-node-blue-ink: #264588;
92
- --color-node-purple-fill: rgba(113, 80, 179, 0.12);
93
- --color-node-purple-line: rgba(113, 80, 179, 0.38);
94
- --color-node-purple-halo: rgba(113, 80, 179, 0.16);
95
- --color-node-cyan-fill: rgba(22, 107, 128, 0.12);
96
- --color-node-cyan-line: rgba(22, 107, 128, 0.38);
97
- --color-node-cyan-halo: rgba(22, 107, 128, 0.16);
98
- --color-node-green-fill: rgba(44, 112, 70, 0.12);
99
- --color-node-green-line: rgba(44, 112, 70, 0.38);
100
- --color-node-green-halo: rgba(44, 112, 70, 0.16);
101
- --color-node-amber-fill: rgba(134, 90, 40, 0.12);
102
- --color-node-amber-line: rgba(134, 90, 40, 0.38);
103
- --color-node-amber-halo: rgba(134, 90, 40, 0.16);
104
- --color-node-rose-fill: rgba(152, 74, 85, 0.12);
105
- --color-node-rose-line: rgba(152, 74, 85, 0.38);
106
- --color-node-rose-halo: rgba(152, 74, 85, 0.16);
107
- --color-node-blue-fill: rgba(64, 98, 167, 0.12);
108
- --color-node-blue-line: rgba(64, 98, 167, 0.38);
109
- --color-node-blue-halo: rgba(64, 98, 167, 0.16);
110
- --color-scrollbar: rgba(9, 9, 11, 0.2);
111
- --color-scrollbar-hover: rgba(9, 9, 11, 0.32);
112
- --shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.06);
113
- --shadow-sm: 0 2px 8px rgba(9, 9, 11, 0.07);
114
- --shadow-md: 0 4px 12px rgba(9, 9, 11, 0.08), 0 1px 3px rgba(9, 9, 11, 0.06);
115
- --shadow-lg: 0 8px 24px rgba(9, 9, 11, 0.12);
116
- --shadow-xl: 0 16px 40px rgba(9, 9, 11, 0.16), 0 2px 8px rgba(9, 9, 11, 0.08);
117
- --shadow-sheet: -16px 0 40px rgba(9, 9, 11, 0.16), -2px 0 8px rgba(9, 9, 11, 0.08);
118
- --shadow-2xl: 0 16px 64px rgba(9, 9, 11, 0.20);
119
- --shadow-card: 0 8px 24px rgba(9, 9, 11, 0.07);
120
- --shadow-rim-lit: 0 4px 24px rgba(9, 9, 11, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
121
- --shadow-hairline: none;
122
- --shadow-focus: 0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus);
123
- --shadow-selection: inset 0 0 0 2px var(--color-brand-accent);
124
- --shadow-glow: 0 4px 24px rgba(84, 105, 212, 0.22);
125
- }
126
-
127
- /* Dark, for a reader whose system asks for it and who has not pinned light. */
128
- @media (prefers-color-scheme: dark) {
129
- :root:not([data-theme="light"]) {
130
- color-scheme: dark;
131
-
132
- --color-surface-background: #15171c;
133
- --color-surface-subtle: #1c1e24;
134
- --color-surface-muted: #1c1e24;
135
- --color-surface-elevated: #22252b;
136
- --color-surface-topbar: #15171c;
137
- --color-surface-topbar-lift: #1c1e24;
138
- --color-surface-topbar-active: #22252b;
139
- --color-surface-hover: rgba(255, 255, 255, 0.05);
140
- --color-surface-pressed: rgba(255, 255, 255, 0.08);
141
- --color-surface-inset: rgba(255, 255, 255, 0.05);
142
- --color-surface-glass: rgba(28, 30, 36, 0.90);
143
- --color-surface-scrim: rgba(0, 0, 0, 0.6);
144
- --color-surface-veil: rgba(21, 23, 28, 0.72);
145
- --color-surface-inverse: #ffffff;
146
- --color-text-primary: #fafafa;
147
- --color-text-secondary: #c9ced8;
148
- --color-text-tertiary: #95a2b6;
149
- --color-text-muted: #686b70;
150
- --color-text-on-brand: #000000;
151
- --color-text-on-accent: #ffffff;
152
- --color-text-inverse: #09090b;
153
- --color-brand-primary: #ffffff;
154
- --color-brand-primary-hover: rgba(255, 255, 255, 0.9);
155
- --color-brand-primary-active: rgba(255, 255, 255, 0.82);
156
- --color-brand-accent-ink: #8b9ff5;
157
- --color-brand-accent-soft: rgba(84, 105, 212, 0.18);
158
- --color-border-default: #3f4145;
159
- --color-border-hover: #4a4d52;
160
- --color-border-strong: #4a4d52;
161
- --color-border-strong-hover: #5a5e65;
162
- --color-border-control: #7f848e;
163
- --color-focus: #8b9ff5;
164
- --color-feedback-success: #14b8a6;
165
- --color-feedback-success-ink: #5eead4;
166
- --color-feedback-warning: #f59e0b;
167
- --color-feedback-warning-ink: #fde68a;
168
- --color-feedback-danger: #dc2626;
169
- --color-feedback-danger-hover: #b91c1c;
170
- --color-feedback-danger-ink: #fca5a5;
171
- --color-feedback-info: #38bdf8;
172
- --color-feedback-info-ink: #7dd3fc;
173
- --color-feedback-success-soft: rgba(20, 184, 166, 0.12);
174
- --color-feedback-success-line: rgba(20, 184, 166, 0.3);
175
- --color-feedback-warning-soft: rgba(245, 158, 11, 0.12);
176
- --color-feedback-warning-line: rgba(245, 158, 11, 0.3);
177
- --color-feedback-danger-soft: rgba(220, 38, 38, 0.12);
178
- --color-feedback-danger-line: rgba(220, 38, 38, 0.3);
179
- --color-feedback-info-soft: rgba(56, 189, 248, 0.12);
180
- --color-feedback-info-line: rgba(56, 189, 248, 0.3);
181
- --color-phase-onboarding: #f77ae9;
182
- --color-phase-onboarding-ink: #ff82f1;
183
- --color-phase-execute: #ac6bff;
184
- --color-phase-execute-ink: #d697ff;
185
- --color-phase-review: #00a24f;
186
- --color-phase-review-ink: #46c872;
187
- --color-phase-onboarding-soft: rgba(247, 122, 233, 0.12);
188
- --color-phase-execute-soft: rgba(172, 107, 255, 0.12);
189
- --color-phase-review-soft: rgba(0, 162, 79, 0.12);
190
- --color-data-1: #a5b4fc;
191
- --color-data-2: #facc15;
192
- --color-data-3: #38bdf8;
193
- --color-data-4: #86efac;
194
- --color-data-5: #ec4899;
195
- --color-data-other: #71717a;
196
- --color-node-purple: #8e6ed4;
197
- --color-node-purple-ink: #cabae0;
198
- --color-node-cyan: #5ca8be;
199
- --color-node-cyan-ink: #b3d7e0;
200
- --color-node-green: #62a578;
201
- --color-node-green-ink: #b8d8c0;
202
- --color-node-amber: #c89866;
203
- --color-node-amber-ink: #e0c89e;
204
- --color-node-rose: #c8757f;
205
- --color-node-rose-ink: #e0bfc4;
206
- --color-node-blue: #5b7fc7;
207
- --color-node-blue-ink: #b9c5e0;
208
- --color-node-purple-fill: rgba(142, 110, 212, 0.12);
209
- --color-node-purple-line: rgba(142, 110, 212, 0.38);
210
- --color-node-purple-halo: rgba(142, 110, 212, 0.16);
211
- --color-node-cyan-fill: rgba(92, 168, 190, 0.12);
212
- --color-node-cyan-line: rgba(92, 168, 190, 0.38);
213
- --color-node-cyan-halo: rgba(92, 168, 190, 0.16);
214
- --color-node-green-fill: rgba(98, 165, 120, 0.12);
215
- --color-node-green-line: rgba(98, 165, 120, 0.38);
216
- --color-node-green-halo: rgba(98, 165, 120, 0.16);
217
- --color-node-amber-fill: rgba(200, 152, 102, 0.12);
218
- --color-node-amber-line: rgba(200, 152, 102, 0.38);
219
- --color-node-amber-halo: rgba(200, 152, 102, 0.16);
220
- --color-node-rose-fill: rgba(200, 117, 127, 0.12);
221
- --color-node-rose-line: rgba(200, 117, 127, 0.38);
222
- --color-node-rose-halo: rgba(200, 117, 127, 0.16);
223
- --color-node-blue-fill: rgba(91, 127, 199, 0.12);
224
- --color-node-blue-line: rgba(91, 127, 199, 0.38);
225
- --color-node-blue-halo: rgba(91, 127, 199, 0.16);
226
- --color-scrollbar: rgba(255, 255, 255, 0.16);
227
- --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
228
- --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
229
- --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
230
- --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
231
- --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
232
- --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.4);
233
- --shadow-sheet: -8px 0 32px rgba(0, 0, 0, 0.4);
234
- --shadow-2xl: 0 16px 64px rgba(0, 0, 0, 0.6);
235
- --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.1);
236
- --shadow-rim-lit: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
237
- --shadow-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.04);
238
- --shadow-focus: 0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus);
239
- --shadow-selection: inset 0 0 0 2px var(--color-brand-accent);
240
- --shadow-glow: 0 4px 24px rgba(84, 105, 212, 0.3);
241
- }
242
- }
243
-
244
- /* An explicit choice, which wins whichever way the system is set. */
245
- :root[data-theme="dark"] {
246
15
  color-scheme: dark;
247
16
 
248
- --color-surface-background: #15171c;
249
- --color-surface-subtle: #1c1e24;
250
- --color-surface-muted: #1c1e24;
251
- --color-surface-elevated: #22252b;
252
- --color-surface-topbar: #15171c;
253
- --color-surface-topbar-lift: #1c1e24;
254
- --color-surface-topbar-active: #22252b;
255
- --color-surface-hover: rgba(255, 255, 255, 0.05);
256
- --color-surface-pressed: rgba(255, 255, 255, 0.08);
257
- --color-surface-inset: rgba(255, 255, 255, 0.05);
258
- --color-surface-glass: rgba(28, 30, 36, 0.90);
17
+ --color-surface-frame: #09090b;
18
+ --color-surface-background: #101013;
19
+ --color-surface-subtle: #141418;
20
+ --color-surface-elevated: #1b1b20;
21
+ --color-surface-hover: rgba(255, 255, 255, 0.061);
22
+ --color-surface-pressed: rgba(255, 255, 255, 0.094);
23
+ --color-surface-inset: rgba(255, 255, 255, 0.028);
24
+ --color-surface-glass: rgba(20, 20, 24, 0.90);
259
25
  --color-surface-scrim: rgba(0, 0, 0, 0.6);
260
- --color-surface-veil: rgba(21, 23, 28, 0.72);
26
+ --color-surface-veil: rgba(9, 9, 11, 0.65);
261
27
  --color-surface-inverse: #ffffff;
262
- --color-text-primary: #fafafa;
263
- --color-text-secondary: #c9ced8;
264
- --color-text-tertiary: #95a2b6;
265
- --color-text-muted: #686b70;
266
- --color-text-on-brand: #000000;
28
+ --color-text-primary: #ededf0;
29
+ --color-text-secondary: #b4b4bc;
30
+ --color-text-tertiary: #9797a1;
31
+ --color-text-muted: #5f5f68;
267
32
  --color-text-on-accent: #ffffff;
268
33
  --color-text-inverse: #09090b;
269
- --color-brand-primary: #ffffff;
270
- --color-brand-primary-hover: rgba(255, 255, 255, 0.9);
271
- --color-brand-primary-active: rgba(255, 255, 255, 0.82);
272
- --color-brand-accent-ink: #8b9ff5;
273
- --color-brand-accent-soft: rgba(84, 105, 212, 0.18);
274
- --color-border-default: #3f4145;
275
- --color-border-hover: #4a4d52;
276
- --color-border-strong: #4a4d52;
277
- --color-border-strong-hover: #5a5e65;
278
- --color-border-control: #7f848e;
279
- --color-focus: #8b9ff5;
280
- --color-feedback-success: #14b8a6;
281
- --color-feedback-success-ink: #5eead4;
282
- --color-feedback-warning: #f59e0b;
283
- --color-feedback-warning-ink: #fde68a;
284
- --color-feedback-danger: #dc2626;
285
- --color-feedback-danger-hover: #b91c1c;
286
- --color-feedback-danger-ink: #fca5a5;
287
- --color-feedback-info: #38bdf8;
288
- --color-feedback-info-ink: #7dd3fc;
289
- --color-feedback-success-soft: rgba(20, 184, 166, 0.12);
290
- --color-feedback-success-line: rgba(20, 184, 166, 0.3);
291
- --color-feedback-warning-soft: rgba(245, 158, 11, 0.12);
292
- --color-feedback-warning-line: rgba(245, 158, 11, 0.3);
293
- --color-feedback-danger-soft: rgba(220, 38, 38, 0.12);
294
- --color-feedback-danger-line: rgba(220, 38, 38, 0.3);
295
- --color-feedback-info-soft: rgba(56, 189, 248, 0.12);
296
- --color-feedback-info-line: rgba(56, 189, 248, 0.3);
297
- --color-phase-onboarding: #f77ae9;
298
- --color-phase-onboarding-ink: #ff82f1;
299
- --color-phase-execute: #ac6bff;
300
- --color-phase-execute-ink: #d697ff;
301
- --color-phase-review: #00a24f;
302
- --color-phase-review-ink: #46c872;
303
- --color-phase-onboarding-soft: rgba(247, 122, 233, 0.12);
304
- --color-phase-execute-soft: rgba(172, 107, 255, 0.12);
305
- --color-phase-review-soft: rgba(0, 162, 79, 0.12);
306
- --color-data-1: #a5b4fc;
307
- --color-data-2: #facc15;
308
- --color-data-3: #38bdf8;
309
- --color-data-4: #86efac;
310
- --color-data-5: #ec4899;
311
- --color-data-other: #71717a;
34
+ --color-brand-accent: #7c56ff;
35
+ --color-brand-accent-hover: #744bf4;
36
+ --color-brand-accent-active: #6c40e9;
37
+ --color-brand-accent-ink: #b3a1ff;
38
+ --color-brand-accent-soft: rgba(124, 86, 255, 0.16);
39
+ --color-brand-accent-rgb: 124, 86, 255;
40
+ --color-brand-accent-soft-strong: rgba(124, 86, 255, 0.32);
41
+ --color-border-default: #232329;
42
+ --color-border-hover: #303038;
43
+ --color-border-strong: #303038;
44
+ --color-border-strong-hover: #3e3e48;
45
+ --color-border-control: #787983;
46
+ --color-focus: #7e5bff;
47
+ --color-feedback-success: #3ecf8f;
48
+ --color-feedback-success-ink: #72dead;
49
+ --color-feedback-warning: #f4b221;
50
+ --color-feedback-warning-ink: #f6c86f;
51
+ --color-feedback-danger: #e50055;
52
+ --color-feedback-danger-hover: #d6004f;
53
+ --color-feedback-danger-ink: #ff9a9a;
54
+ --color-feedback-info: #4c9dff;
55
+ --color-feedback-info-ink: #86beff;
56
+ --color-feedback-success-soft: rgba(62, 207, 143, 0.12);
57
+ --color-feedback-success-line: rgba(62, 207, 143, 0.3);
58
+ --color-feedback-warning-soft: rgba(244, 178, 33, 0.12);
59
+ --color-feedback-warning-line: rgba(244, 178, 33, 0.3);
60
+ --color-feedback-danger-soft: rgba(229, 0, 85, 0.12);
61
+ --color-feedback-danger-line: rgba(229, 0, 85, 0.3);
62
+ --color-feedback-info-soft: rgba(76, 157, 255, 0.12);
63
+ --color-feedback-info-line: rgba(76, 157, 255, 0.3);
64
+ --color-data-1: #458adc;
65
+ --color-data-2: #e4631f;
66
+ --color-data-3: #009c79;
67
+ --color-data-4: #c98500;
68
+ --color-data-other: #6e6e78;
312
69
  --color-node-purple: #8e6ed4;
313
70
  --color-node-purple-ink: #cabae0;
314
71
  --color-node-cyan: #5ca8be;
@@ -353,5 +110,215 @@
353
110
  --shadow-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.04);
354
111
  --shadow-focus: 0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus);
355
112
  --shadow-selection: inset 0 0 0 2px var(--color-brand-accent);
356
- --shadow-glow: 0 4px 24px rgba(84, 105, 212, 0.3);
113
+ --shadow-glow: 0 4px 24px rgba(var(--color-brand-accent-rgb), 0.3);
114
+ }
115
+
116
+ /* Light, for a reader whose system asks for it and who has not pinned dark.
117
+ The :not() is what lets an explicit dark win on a light system: there is no
118
+ dark attribute block, because the bare root above already is one. */
119
+ @media (prefers-color-scheme: light) {
120
+ :root:not([data-theme="dark"]) {
121
+ color-scheme: light;
122
+
123
+ --color-surface-frame: #ededea;
124
+ --color-surface-background: #f9f9f8;
125
+ --color-surface-subtle: #ffffff;
126
+ --color-surface-elevated: #f3f3f1;
127
+ --color-surface-hover: rgba(9, 9, 11, 0.044);
128
+ --color-surface-pressed: rgba(9, 9, 11, 0.088);
129
+ --color-surface-inset: rgba(9, 9, 11, 0.026);
130
+ --color-surface-glass: rgba(255, 255, 255, 0.90);
131
+ --color-surface-scrim: rgba(0, 0, 0, 0.6);
132
+ --color-surface-veil: rgba(237, 237, 234, 0.65);
133
+ --color-surface-inverse: #09090b;
134
+ --color-text-primary: #17171a;
135
+ --color-text-secondary: #46464e;
136
+ --color-text-tertiary: #5f5e67;
137
+ --color-text-muted: #8d8d94;
138
+ --color-text-on-accent: #ffffff;
139
+ --color-text-inverse: #fafafa;
140
+ --color-brand-accent: #6b45f0;
141
+ --color-brand-accent-hover: #633ae5;
142
+ --color-brand-accent-active: #5b2eda;
143
+ --color-brand-accent-ink: #5a33de;
144
+ --color-brand-accent-soft: rgba(107, 69, 240, 0.108);
145
+ --color-brand-accent-rgb: 107, 69, 240;
146
+ --color-brand-accent-soft-strong: rgba(107, 69, 240, 0.32);
147
+ --color-border-default: #e4e4e0;
148
+ --color-border-hover: #d3d3ce;
149
+ --color-border-strong: #d3d3ce;
150
+ --color-border-strong-hover: #c2c2bc;
151
+ --color-border-control: #7a7a82;
152
+ --color-focus: #6b45f0;
153
+ --color-feedback-success: #009b74;
154
+ --color-feedback-success-ink: #106d46;
155
+ --color-feedback-warning: #c57600;
156
+ --color-feedback-warning-ink: #8e5000;
157
+ --color-feedback-danger: #c01d32;
158
+ --color-feedback-danger-hover: #b5092a;
159
+ --color-feedback-danger-ink: #b61426;
160
+ --color-feedback-info: #3081de;
161
+ --color-feedback-info-ink: #1a5eb3;
162
+ --color-feedback-success-soft: rgba(0, 155, 116, 0.12);
163
+ --color-feedback-success-line: rgba(0, 155, 116, 0.3);
164
+ --color-feedback-warning-soft: rgba(197, 118, 0, 0.12);
165
+ --color-feedback-warning-line: rgba(197, 118, 0, 0.3);
166
+ --color-feedback-danger-soft: rgba(192, 29, 50, 0.12);
167
+ --color-feedback-danger-line: rgba(192, 29, 50, 0.3);
168
+ --color-feedback-info-soft: rgba(48, 129, 222, 0.12);
169
+ --color-feedback-info-line: rgba(48, 129, 222, 0.3);
170
+ --color-data-1: #3879ce;
171
+ --color-data-2: #e45f28;
172
+ --color-data-3: #009b74;
173
+ --color-data-4: #c57600;
174
+ --color-data-other: #88888f;
175
+ --color-node-purple: #7150b3;
176
+ --color-node-purple-ink: #573394;
177
+ --color-node-cyan: #166b80;
178
+ --color-node-cyan-ink: #004f62;
179
+ --color-node-green: #2c7046;
180
+ --color-node-green-ink: #05532b;
181
+ --color-node-amber: #865a28;
182
+ --color-node-amber-ink: #683e03;
183
+ --color-node-rose: #984a55;
184
+ --color-node-rose-ink: #7a2f3c;
185
+ --color-node-blue: #4062a7;
186
+ --color-node-blue-ink: #264588;
187
+ --color-node-purple-fill: rgba(113, 80, 179, 0.12);
188
+ --color-node-purple-line: rgba(113, 80, 179, 0.38);
189
+ --color-node-purple-halo: rgba(113, 80, 179, 0.16);
190
+ --color-node-cyan-fill: rgba(22, 107, 128, 0.12);
191
+ --color-node-cyan-line: rgba(22, 107, 128, 0.38);
192
+ --color-node-cyan-halo: rgba(22, 107, 128, 0.16);
193
+ --color-node-green-fill: rgba(44, 112, 70, 0.12);
194
+ --color-node-green-line: rgba(44, 112, 70, 0.38);
195
+ --color-node-green-halo: rgba(44, 112, 70, 0.16);
196
+ --color-node-amber-fill: rgba(134, 90, 40, 0.12);
197
+ --color-node-amber-line: rgba(134, 90, 40, 0.38);
198
+ --color-node-amber-halo: rgba(134, 90, 40, 0.16);
199
+ --color-node-rose-fill: rgba(152, 74, 85, 0.12);
200
+ --color-node-rose-line: rgba(152, 74, 85, 0.38);
201
+ --color-node-rose-halo: rgba(152, 74, 85, 0.16);
202
+ --color-node-blue-fill: rgba(64, 98, 167, 0.12);
203
+ --color-node-blue-line: rgba(64, 98, 167, 0.38);
204
+ --color-node-blue-halo: rgba(64, 98, 167, 0.16);
205
+ --color-scrollbar: rgba(9, 9, 11, 0.2);
206
+ --color-scrollbar-hover: rgba(9, 9, 11, 0.32);
207
+ --shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.06);
208
+ --shadow-sm: 0 2px 8px rgba(9, 9, 11, 0.07);
209
+ --shadow-md: 0 4px 12px rgba(9, 9, 11, 0.08), 0 1px 3px rgba(9, 9, 11, 0.06);
210
+ --shadow-lg: 0 8px 24px rgba(9, 9, 11, 0.12);
211
+ --shadow-xl: 0 16px 40px rgba(9, 9, 11, 0.16), 0 2px 8px rgba(9, 9, 11, 0.08);
212
+ --shadow-sheet: -16px 0 40px rgba(9, 9, 11, 0.16), -2px 0 8px rgba(9, 9, 11, 0.08);
213
+ --shadow-2xl: 0 16px 64px rgba(9, 9, 11, 0.20);
214
+ --shadow-card: 0 8px 24px rgba(9, 9, 11, 0.07);
215
+ --shadow-rim-lit: 0 4px 24px rgba(9, 9, 11, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
216
+ --shadow-hairline: none;
217
+ --shadow-focus: 0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus);
218
+ --shadow-selection: inset 0 0 0 2px var(--color-brand-accent);
219
+ --shadow-glow: 0 4px 24px rgba(var(--color-brand-accent-rgb), 0.22);
220
+ }
221
+ }
222
+
223
+ /* An explicit light, which wins whichever way the system is set. */
224
+ :root[data-theme="light"] {
225
+ color-scheme: light;
226
+
227
+ --color-surface-frame: #ededea;
228
+ --color-surface-background: #f9f9f8;
229
+ --color-surface-subtle: #ffffff;
230
+ --color-surface-elevated: #f3f3f1;
231
+ --color-surface-hover: rgba(9, 9, 11, 0.044);
232
+ --color-surface-pressed: rgba(9, 9, 11, 0.088);
233
+ --color-surface-inset: rgba(9, 9, 11, 0.026);
234
+ --color-surface-glass: rgba(255, 255, 255, 0.90);
235
+ --color-surface-scrim: rgba(0, 0, 0, 0.6);
236
+ --color-surface-veil: rgba(237, 237, 234, 0.65);
237
+ --color-surface-inverse: #09090b;
238
+ --color-text-primary: #17171a;
239
+ --color-text-secondary: #46464e;
240
+ --color-text-tertiary: #5f5e67;
241
+ --color-text-muted: #8d8d94;
242
+ --color-text-on-accent: #ffffff;
243
+ --color-text-inverse: #fafafa;
244
+ --color-brand-accent: #6b45f0;
245
+ --color-brand-accent-hover: #633ae5;
246
+ --color-brand-accent-active: #5b2eda;
247
+ --color-brand-accent-ink: #5a33de;
248
+ --color-brand-accent-soft: rgba(107, 69, 240, 0.108);
249
+ --color-brand-accent-rgb: 107, 69, 240;
250
+ --color-brand-accent-soft-strong: rgba(107, 69, 240, 0.32);
251
+ --color-border-default: #e4e4e0;
252
+ --color-border-hover: #d3d3ce;
253
+ --color-border-strong: #d3d3ce;
254
+ --color-border-strong-hover: #c2c2bc;
255
+ --color-border-control: #7a7a82;
256
+ --color-focus: #6b45f0;
257
+ --color-feedback-success: #009b74;
258
+ --color-feedback-success-ink: #106d46;
259
+ --color-feedback-warning: #c57600;
260
+ --color-feedback-warning-ink: #8e5000;
261
+ --color-feedback-danger: #c01d32;
262
+ --color-feedback-danger-hover: #b5092a;
263
+ --color-feedback-danger-ink: #b61426;
264
+ --color-feedback-info: #3081de;
265
+ --color-feedback-info-ink: #1a5eb3;
266
+ --color-feedback-success-soft: rgba(0, 155, 116, 0.12);
267
+ --color-feedback-success-line: rgba(0, 155, 116, 0.3);
268
+ --color-feedback-warning-soft: rgba(197, 118, 0, 0.12);
269
+ --color-feedback-warning-line: rgba(197, 118, 0, 0.3);
270
+ --color-feedback-danger-soft: rgba(192, 29, 50, 0.12);
271
+ --color-feedback-danger-line: rgba(192, 29, 50, 0.3);
272
+ --color-feedback-info-soft: rgba(48, 129, 222, 0.12);
273
+ --color-feedback-info-line: rgba(48, 129, 222, 0.3);
274
+ --color-data-1: #3879ce;
275
+ --color-data-2: #e45f28;
276
+ --color-data-3: #009b74;
277
+ --color-data-4: #c57600;
278
+ --color-data-other: #88888f;
279
+ --color-node-purple: #7150b3;
280
+ --color-node-purple-ink: #573394;
281
+ --color-node-cyan: #166b80;
282
+ --color-node-cyan-ink: #004f62;
283
+ --color-node-green: #2c7046;
284
+ --color-node-green-ink: #05532b;
285
+ --color-node-amber: #865a28;
286
+ --color-node-amber-ink: #683e03;
287
+ --color-node-rose: #984a55;
288
+ --color-node-rose-ink: #7a2f3c;
289
+ --color-node-blue: #4062a7;
290
+ --color-node-blue-ink: #264588;
291
+ --color-node-purple-fill: rgba(113, 80, 179, 0.12);
292
+ --color-node-purple-line: rgba(113, 80, 179, 0.38);
293
+ --color-node-purple-halo: rgba(113, 80, 179, 0.16);
294
+ --color-node-cyan-fill: rgba(22, 107, 128, 0.12);
295
+ --color-node-cyan-line: rgba(22, 107, 128, 0.38);
296
+ --color-node-cyan-halo: rgba(22, 107, 128, 0.16);
297
+ --color-node-green-fill: rgba(44, 112, 70, 0.12);
298
+ --color-node-green-line: rgba(44, 112, 70, 0.38);
299
+ --color-node-green-halo: rgba(44, 112, 70, 0.16);
300
+ --color-node-amber-fill: rgba(134, 90, 40, 0.12);
301
+ --color-node-amber-line: rgba(134, 90, 40, 0.38);
302
+ --color-node-amber-halo: rgba(134, 90, 40, 0.16);
303
+ --color-node-rose-fill: rgba(152, 74, 85, 0.12);
304
+ --color-node-rose-line: rgba(152, 74, 85, 0.38);
305
+ --color-node-rose-halo: rgba(152, 74, 85, 0.16);
306
+ --color-node-blue-fill: rgba(64, 98, 167, 0.12);
307
+ --color-node-blue-line: rgba(64, 98, 167, 0.38);
308
+ --color-node-blue-halo: rgba(64, 98, 167, 0.16);
309
+ --color-scrollbar: rgba(9, 9, 11, 0.2);
310
+ --color-scrollbar-hover: rgba(9, 9, 11, 0.32);
311
+ --shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.06);
312
+ --shadow-sm: 0 2px 8px rgba(9, 9, 11, 0.07);
313
+ --shadow-md: 0 4px 12px rgba(9, 9, 11, 0.08), 0 1px 3px rgba(9, 9, 11, 0.06);
314
+ --shadow-lg: 0 8px 24px rgba(9, 9, 11, 0.12);
315
+ --shadow-xl: 0 16px 40px rgba(9, 9, 11, 0.16), 0 2px 8px rgba(9, 9, 11, 0.08);
316
+ --shadow-sheet: -16px 0 40px rgba(9, 9, 11, 0.16), -2px 0 8px rgba(9, 9, 11, 0.08);
317
+ --shadow-2xl: 0 16px 64px rgba(9, 9, 11, 0.20);
318
+ --shadow-card: 0 8px 24px rgba(9, 9, 11, 0.07);
319
+ --shadow-rim-lit: 0 4px 24px rgba(9, 9, 11, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
320
+ --shadow-hairline: none;
321
+ --shadow-focus: 0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus);
322
+ --shadow-selection: inset 0 0 0 2px var(--color-brand-accent);
323
+ --shadow-glow: 0 4px 24px rgba(var(--color-brand-accent-rgb), 0.22);
357
324
  }