@texturehq/edges 1.30.6 → 1.31.1

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 (19) hide show
  1. package/dist/{colors-67HNJviq.d.ts → colors-CIlEq8T6.d.ts} +13 -0
  2. package/dist/{colors-DIRyY7OV.d.cts → colors-oRbPetNs.d.cts} +13 -0
  3. package/dist/generated/tailwind-tokens-light.css +140 -0
  4. package/dist/index.cjs +9 -9
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.css +1 -1
  7. package/dist/index.css.map +1 -1
  8. package/dist/index.d.cts +8 -3
  9. package/dist/index.d.ts +8 -3
  10. package/dist/index.js +9 -9
  11. package/dist/index.js.map +1 -1
  12. package/dist/server.d.cts +1 -1
  13. package/dist/server.d.ts +1 -1
  14. package/dist/styles/legacy-bridge.css +22 -0
  15. package/dist/styles/theme-light-override.css +38 -36
  16. package/dist/styles.css +934 -617
  17. package/dist/theme.css +21 -15
  18. package/package.json +2 -1
  19. package/scripts/copy-assets.js +1 -20
package/dist/styles.css CHANGED
@@ -3,66 +3,43 @@
3
3
  :root, :host {
4
4
  --color-white: #ffffff;
5
5
  --color-black: #000000;
6
- --color-gray-50: #f9fafb;
7
- --color-gray-100: #f3f4f6;
8
- --color-gray-200: #e5e7eb;
9
- --color-gray-300: #d1d5db;
10
- --color-gray-400: #9ca3af;
11
- --color-gray-500: #6b7280;
12
- --color-gray-600: #4b5563;
13
- --color-gray-700: #374151;
14
- --color-gray-800: #1f2937;
15
- --color-gray-900: #111827;
16
- --color-gray-950: #030712;
17
- --color-red-50: oklch(0.971 0.013 17.38);
18
- --color-red-100: oklch(0.936 0.032 17.717);
19
- --color-red-200: oklch(0.885 0.062 18.334);
20
- --color-red-300: oklch(0.808 0.114 19.571);
21
- --color-red-400: oklch(0.704 0.191 22.216);
22
- --color-red-500: oklch(0.637 0.237 25.331);
23
- --color-red-600: oklch(0.577 0.245 27.325);
24
- --color-red-700: oklch(0.505 0.213 27.518);
25
- --color-red-800: oklch(0.444 0.177 26.899);
26
- --color-red-900: oklch(0.396 0.141 25.723);
27
- --color-red-950: oklch(0.258 0.092 26.042);
28
- --color-green-50: oklch(0.982 0.018 131.68);
29
- --color-green-100: oklch(0.947 0.052 132.272);
30
- --color-green-200: oklch(0.895 0.111 131.438);
31
- --color-green-300: oklch(0.82 0.178 132.63);
32
- --color-green-400: oklch(0.718 0.209 130.901);
33
- --color-green-500: oklch(0.627 0.194 130.331);
34
- --color-green-600: oklch(0.527 0.19 131.688);
35
- --color-green-700: oklch(0.437 0.154 132.474);
36
- --color-green-800: oklch(0.366 0.121 132.109);
37
- --color-green-900: oklch(0.314 0.095 133.748);
38
- --color-green-950: oklch(0.197 0.06 130.709);
39
- --color-blue-50: oklch(0.97 0.014 237.69);
40
- --color-blue-100: oklch(0.932 0.032 241.935);
41
- --color-blue-200: oklch(0.882 0.059 243.157);
42
- --color-blue-300: oklch(0.809 0.105 244.039);
43
- --color-blue-400: oklch(0.707 0.165 246.422);
44
- --color-blue-500: oklch(0.623 0.214 250.546);
45
- --color-blue-600: oklch(0.546 0.245 253.739);
46
- --color-blue-700: oklch(0.488 0.243 255.638);
47
- --color-blue-800: oklch(0.424 0.199 255.585);
48
- --color-blue-900: oklch(0.368 0.146 254.128);
49
- --color-blue-950: oklch(0.262 0.09 254.128);
50
- --color-yellow-50: oklch(0.987 0.024 102.851);
51
- --color-yellow-100: oklch(0.973 0.071 103.193);
52
- --color-yellow-200: oklch(0.945 0.129 101.54);
53
- --color-yellow-300: oklch(0.905 0.182 98.111);
54
- --color-yellow-400: oklch(0.852 0.199 91.936);
55
- --color-yellow-500: oklch(0.795 0.184 86.047);
56
- --color-yellow-600: oklch(0.681 0.162 75.834);
57
- --color-yellow-700: oklch(0.554 0.135 66.191);
58
- --color-yellow-800: oklch(0.456 0.111 61.896);
59
- --color-yellow-900: oklch(0.398 0.092 60.236);
60
- --color-yellow-950: oklch(0.265 0.06 56.259);
61
- --color-brand-primary: #444ae1;
62
- --color-brand-light: #f7f7ff;
63
- --color-brand-dark: #363ccb;
64
- --color-brand-background: #f6f7ff;
65
- --color-neutral-black: #000000;
6
+ --color-linen: #faf7f0;
7
+ --color-graphite: #2c2a26;
8
+ --color-ink: #111111;
9
+ --color-gray-50: #fafafa;
10
+ --color-gray-100: #f5f5f4;
11
+ --color-gray-200: #e7e6e5;
12
+ --color-gray-300: #d4d3d0;
13
+ --color-gray-400: #a09d98;
14
+ --color-gray-500: #7c7974;
15
+ --color-gray-600: #5d5b56;
16
+ --color-gray-700: #454340;
17
+ --color-gray-800: #302f2d;
18
+ --color-gray-900: #222120;
19
+ --color-gray-950: #161615;
20
+ --color-error-light: #fdecec;
21
+ --color-error-base: #c42d2d;
22
+ --color-error-dark: #7a1212;
23
+ --color-warning-light: #fcefd9;
24
+ --color-warning-base: #c88420;
25
+ --color-warning-dark: #7a4708;
26
+ --color-success-light: #e4f3e9;
27
+ --color-success-base: #278a4a;
28
+ --color-success-dark: #15452a;
29
+ --color-info-light: #e0eaf5;
30
+ --color-info-base: #2d6cb8;
31
+ --color-info-dark: #123862;
32
+ --color-scrim-light: rgba(0, 0, 0, 0.15);
33
+ --color-scrim-dark: rgba(255, 255, 255, 0.12);
34
+ --color-input-background-dark: rgba(255, 255, 255, 0.05);
35
+ --color-skeleton-wave-light: rgba(255, 255, 255, 0.6);
36
+ --color-skeleton-wave-dark: rgba(255, 255, 255, 0.08);
37
+ --color-viz-categorical-1: #5424db;
38
+ --color-viz-categorical-2: #d92361;
39
+ --color-viz-categorical-3: #e86a00;
40
+ --color-viz-categorical-4: #5d89ff;
41
+ --color-viz-categorical-5: #9a47e2;
42
+ --color-viz-categorical-6: #f24cb8;
66
43
  --motion-duration-instant: 0ms;
67
44
  --motion-duration-fast: 150ms;
68
45
  --motion-duration-normal: 250ms;
@@ -111,56 +88,125 @@
111
88
  --radius-lg: 0.5rem;
112
89
  --radius-xl: 0.75rem;
113
90
  --radius-full: 9999px;
91
+ --font-family-sans: Inter, system-ui, sans-serif;
92
+ --font-family-brand: 'TT Firs Neue', 'Helvetica Neue', Arial, system-ui, sans-serif;
93
+ --font-family-mono: 'Fira Code', monospace;
94
+ --font-size-xs: 0.75rem;
95
+ --font-size-sm: 0.875rem;
96
+ --font-size-base: 1rem;
97
+ --font-size-lg: 1.125rem;
98
+ --font-size-xl: 1.25rem;
99
+ --font-size-2xl: 1.5rem;
100
+ --font-size-3xl: 1.875rem;
101
+ --font-size-4xl: 2.25rem;
102
+ --font-size-5xl: 3rem;
103
+ --font-size-7xl: 4.5rem;
104
+ --font-size-8xl: 6rem;
105
+ --font-size-9xl: 8rem;
114
106
  --font-weight-light: 300;
115
107
  --font-weight-normal: 400;
116
108
  --font-weight-medium: 500;
117
109
  --font-weight-semibold: 600;
118
110
  --font-weight-bold: 700;
119
- --action-brand-background: #444ae1;
120
- --action-brand-hover: #363ccb;
121
- --feedback-success-text: oklch(0.314 0.095 133.748);
122
- --color-map-marker-default: #444ae1;
111
+ --font-lineheight-tight: 1.25;
112
+ --font-lineheight-normal: 1.5;
113
+ --font-letterspacing-normal: 0;
114
+ --font-letterspacing-widest: 0.1em;
115
+ --text-display-xl-size: 6rem;
116
+ --text-display-xl-line-height: 1;
117
+ --text-display-xl-weight: 500;
118
+ --text-display-lg-size: 4.5rem;
119
+ --text-display-lg-line-height: 1;
120
+ --text-display-lg-weight: 500;
121
+ --text-display-md-size: 3rem;
122
+ --text-display-md-line-height: 1.05;
123
+ --text-display-md-weight: 500;
124
+ --text-heading-xl-size: 2.25rem;
125
+ --text-heading-xl-line-height: 1.1;
126
+ --text-heading-xl-weight: 500;
127
+ --text-heading-lg-size: 1.875rem;
128
+ --text-heading-lg-line-height: 1.15;
129
+ --text-heading-lg-weight: 500;
130
+ --text-heading-md-size: 1.5rem;
131
+ --text-heading-md-line-height: 1.2;
132
+ --text-heading-md-weight: 600;
133
+ --text-heading-sm-size: 1.25rem;
134
+ --text-heading-sm-line-height: 1.25;
135
+ --text-heading-sm-weight: 600;
136
+ --text-body-lg-size: 1.125rem;
137
+ --text-body-lg-line-height: 1.55;
138
+ --text-body-lg-weight: 400;
139
+ --text-body-md-size: 1rem;
140
+ --text-body-md-line-height: 1.5;
141
+ --text-body-md-letter-spacing: 0;
142
+ --text-body-md-weight: 400;
143
+ --text-body-sm-size: 0.875rem;
144
+ --text-body-sm-line-height: 1.55;
145
+ --text-body-sm-weight: 400;
146
+ --text-label-lg-size: 1rem;
147
+ --text-label-lg-line-height: 1.4;
148
+ --text-label-lg-weight: 500;
149
+ --text-label-md-size: 0.875rem;
150
+ --text-label-md-line-height: 1.4;
151
+ --text-label-md-weight: 500;
152
+ --text-label-sm-size: 0.8125rem;
153
+ --text-label-sm-line-height: 1.4;
154
+ --text-label-sm-weight: 500;
155
+ --text-caption-size: 0.8125rem;
156
+ --text-caption-line-height: 1.4;
157
+ --text-caption-weight: 400;
158
+ --text-code-size: 0.875rem;
159
+ --text-code-line-height: 1.5;
160
+ --text-code-weight: 400;
161
+ --text-eyebrow-size: 0.6875rem;
162
+ --text-eyebrow-line-height: 1.4;
163
+ --text-eyebrow-weight: 600;
123
164
  --color-background-body: #ffffff;
124
165
  --color-background-surface: #ffffff;
125
- --color-background-muted: #f3f4f6;
126
- --color-background-hover: #f3f4f6;
127
- --color-background-selected: #e5e7eb;
128
- --color-background-modal: rgba(0, 0, 0, 0.15);
166
+ --color-background-muted: #f5f5f4;
167
+ --color-background-hover: #fafafa;
168
+ --color-background-selected: #e7e6e5;
129
169
  --color-background-input: #ffffff;
130
- --theme-background-canvas: linear-gradient(to bottom right, rgb(239 246 255), rgb(250 245 255), rgb(253 242 248));
131
- --theme-background-ai: linear-gradient(to bottom right, rgb(245 243 255 / 0.5), rgb(255 255 255), rgb(240 249 255 / 0.5));
132
- --color-text-body: #333333;
133
- --color-text-heading: #111827;
134
- --color-text-muted: #4b5563;
135
- --color-text-caption: #6b7280;
136
- --color-text-subtle: #5f6873;
137
- --color-text-placeholder: #9ca3af;
138
- --color-text-disabled: #9ca3af;
139
- --color-text-link-default: #444ae1;
140
- --color-text-link-hover: #363ccb;
170
+ --color-background-modal: rgba(0, 0, 0, 0.15);
171
+ --color-background-canvas: linear-gradient(to bottom right, rgb(239 246 255), rgb(250 245 255), rgb(253 242 248));
172
+ --color-background-ai: linear-gradient(to bottom right, rgb(245 243 255 / 0.5), rgb(255 255 255), rgb(240 249 255 / 0.5));
173
+ --color-text-body: #2c2a26;
174
+ --color-text-heading: #111111;
175
+ --color-text-muted: #5d5b56;
176
+ --color-text-caption: #7c7974;
177
+ --color-text-subtle: #7c7974;
178
+ --color-text-placeholder: #a09d98;
179
+ --color-text-disabled: #d4d3d0;
180
+ --color-text-link-default: #111111;
181
+ --color-text-link-hover: #2c2a26;
141
182
  --color-text-onPrimary: #ffffff;
142
- --color-border-default: #e5e7eb;
143
- --color-border-focus: #111827;
144
- --color-border-muted: #e5e7eb;
145
- --color-border-input: #d1d5db;
146
- --color-feedback-success-text: #065f46;
147
- --color-feedback-success-background: #d1fae5;
148
- --color-feedback-success-border: #10b981;
149
- --color-feedback-error-text: #b91c1c;
150
- --color-feedback-error-background: #fee2e2;
151
- --color-feedback-error-border: #ef4444;
152
- --color-feedback-warning-text: #92400e;
153
- --color-feedback-warning-background: #fef3c7;
154
- --color-feedback-warning-border: #f59e0b;
155
- --color-feedback-info-text: #2563eb;
156
- --color-feedback-info-background: #dbeafe;
157
- --color-feedback-info-border: #93c5fd;
158
- --color-action-brand: #444ae1;
159
- --color-action-brand-hover: #363ccb;
183
+ --color-border-default: #e7e6e5;
184
+ --color-border-focus: #111111;
185
+ --color-border-muted: #f5f5f4;
186
+ --color-border-input: #d4d3d0;
187
+ --color-action-brand: #111111;
188
+ --color-action-brand-hover: #2c2a26;
160
189
  --color-action-brand-text: #ffffff;
161
- --color-action-default: #333333;
162
- --color-action-default-hover: #4b5563;
190
+ --color-action-default: #111111;
191
+ --color-action-default-hover: #2c2a26;
163
192
  --color-action-default-text: #ffffff;
193
+ --color-feedback-success-text: #15452a;
194
+ --color-feedback-success-background: #e4f3e9;
195
+ --color-feedback-success-border: #278a4a;
196
+ --color-feedback-error-text: #7a1212;
197
+ --color-feedback-error-background: #fdecec;
198
+ --color-feedback-error-border: #c42d2d;
199
+ --color-feedback-warning-text: #7a4708;
200
+ --color-feedback-warning-background: #fcefd9;
201
+ --color-feedback-warning-border: #c88420;
202
+ --color-feedback-info-text: #123862;
203
+ --color-feedback-info-background: #e0eaf5;
204
+ --color-feedback-info-border: #2d6cb8;
205
+ --color-viz-default: #5424db;
206
+ --color-skeleton-base: #e7e6e5;
207
+ --color-skeleton-highlight: #f5f5f4;
208
+ --color-skeleton-wave: rgba(255, 255, 255, 0.6);
209
+ --color-map-marker-default: #111111;
164
210
  --color-state-charging: #f3e8ff;
165
211
  --color-state-charging-data: #d9b6fd;
166
212
  --color-state-charging-border: #c084fc;
@@ -209,16 +255,14 @@
209
255
  --color-state-exporting-data: #f9c869;
210
256
  --color-state-exporting-border: #f59e0b;
211
257
  --color-state-exporting-text: #92400e;
212
- --color-viz-default: #0082ff;
213
- --color-viz-categorical-1: #a3eae4;
214
- --color-viz-categorical-2: #91a0ff;
215
- --color-viz-categorical-3: #ffd1a3;
216
- --color-viz-categorical-4: #ffabc8;
217
- --color-viz-categorical-5: #c1b8ff;
218
- --color-viz-categorical-6: #e0ffb8;
219
- --color-skeleton-base: #e5e7eb;
220
- --color-skeleton-highlight: #f3f4f6;
221
- --color-skeleton-wave: rgba(255, 255, 255, 0.5);
258
+ --color-brand-primary: var(--color-ink);
259
+ --color-brand-dark: var(--color-ink);
260
+ --color-brand-light: var(--color-linen);
261
+ --color-brand-background: var(--color-linen);
262
+ --color-neutral-black: var(--color-black);
263
+ --action-brand-background: var(--color-ink);
264
+ --action-brand-hover: var(--color-graphite);
265
+ --feedback-success-text: var(--color-success-dark);
222
266
  --control-sm: 0.75rem;
223
267
  --control-md: 0.875rem;
224
268
  --control-lg: 1rem;
@@ -249,6 +293,17 @@
249
293
  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
250
294
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
251
295
  "Courier New", monospace;
296
+ --color-red-50: oklch(97.1% 0.013 17.38);
297
+ --color-red-100: oklch(93.6% 0.032 17.717);
298
+ --color-red-200: oklch(88.5% 0.062 18.334);
299
+ --color-red-300: oklch(80.8% 0.114 19.571);
300
+ --color-red-400: oklch(70.4% 0.191 22.216);
301
+ --color-red-500: oklch(63.7% 0.237 25.331);
302
+ --color-red-600: oklch(57.7% 0.245 27.325);
303
+ --color-red-700: oklch(50.5% 0.213 27.518);
304
+ --color-red-800: oklch(44.4% 0.177 26.899);
305
+ --color-red-900: oklch(39.6% 0.141 25.723);
306
+ --color-red-950: oklch(25.8% 0.092 26.042);
252
307
  --color-orange-50: oklch(98% 0.016 73.684);
253
308
  --color-orange-100: oklch(95.4% 0.038 75.164);
254
309
  --color-orange-200: oklch(90.1% 0.076 70.697);
@@ -261,7 +316,40 @@
261
316
  --color-amber-800: oklch(47.3% 0.137 46.201);
262
317
  --color-amber-900: oklch(41.4% 0.112 45.904);
263
318
  --color-amber-950: oklch(27.9% 0.077 45.635);
319
+ --color-yellow-50: oklch(98.7% 0.026 102.212);
320
+ --color-yellow-100: oklch(97.3% 0.071 103.193);
321
+ --color-yellow-200: oklch(94.5% 0.129 101.54);
322
+ --color-yellow-300: oklch(90.5% 0.182 98.111);
323
+ --color-yellow-400: oklch(85.2% 0.199 91.936);
324
+ --color-yellow-500: oklch(79.5% 0.184 86.047);
325
+ --color-yellow-600: oklch(68.1% 0.162 75.834);
326
+ --color-yellow-700: oklch(55.4% 0.135 66.442);
327
+ --color-yellow-800: oklch(47.6% 0.114 61.907);
328
+ --color-yellow-900: oklch(42.1% 0.095 57.708);
329
+ --color-yellow-950: oklch(28.6% 0.066 53.813);
330
+ --color-green-50: oklch(98.2% 0.018 155.826);
331
+ --color-green-100: oklch(96.2% 0.044 156.743);
332
+ --color-green-200: oklch(92.5% 0.084 155.995);
333
+ --color-green-300: oklch(87.1% 0.15 154.449);
334
+ --color-green-400: oklch(79.2% 0.209 151.711);
335
+ --color-green-500: oklch(72.3% 0.219 149.579);
336
+ --color-green-600: oklch(62.7% 0.194 149.214);
337
+ --color-green-700: oklch(52.7% 0.154 150.069);
338
+ --color-green-800: oklch(44.8% 0.119 151.328);
339
+ --color-green-900: oklch(39.3% 0.095 152.535);
340
+ --color-green-950: oklch(26.6% 0.065 152.934);
264
341
  --color-teal-500: oklch(70.4% 0.14 182.503);
342
+ --color-blue-50: oklch(97% 0.014 254.604);
343
+ --color-blue-100: oklch(93.2% 0.032 255.585);
344
+ --color-blue-200: oklch(88.2% 0.059 254.128);
345
+ --color-blue-300: oklch(80.9% 0.105 251.813);
346
+ --color-blue-400: oklch(70.7% 0.165 254.624);
347
+ --color-blue-500: oklch(62.3% 0.214 259.815);
348
+ --color-blue-600: oklch(54.6% 0.245 262.881);
349
+ --color-blue-700: oklch(48.8% 0.243 264.376);
350
+ --color-blue-800: oklch(42.4% 0.199 265.638);
351
+ --color-blue-900: oklch(37.9% 0.146 265.522);
352
+ --color-blue-950: oklch(28.2% 0.091 267.935);
265
353
  --color-purple-50: oklch(97.7% 0.014 308.299);
266
354
  --color-purple-100: oklch(94.6% 0.033 307.174);
267
355
  --color-purple-500: oklch(62.7% 0.265 303.9);
@@ -340,127 +428,53 @@
340
428
  --default-mono-font-family: var(--font-mono);
341
429
  }
342
430
  :root {
343
- --color-neutral-white: var(--color-white);
344
- --color-neutral-black: var(--color-black);
345
- --action-brand-background: var(--color-brand-primary);
346
- --action-brand-hover: var(--color-brand-dark);
347
- --action-brand-text: var(--color-white);
348
- --action-default-background: var(--color-gray-900);
349
- --action-default-hover: var(--color-gray-700);
350
- --action-default-text: var(--color-white);
351
- --action-destructive-background: var(--color-red-700);
352
- --action-destructive-hover: var(--color-red-800);
353
- --action-destructive-text: var(--color-white);
354
- --action-disabled-background: var(--color-gray-300);
355
- --action-disabled-text: var(--color-gray-500);
356
- --feedback-success-text: var(--color-green-900);
357
- --feedback-success-icon: var(--color-green-700);
358
- --feedback-success-border: var(--color-green-600);
359
- --feedback-error-text: var(--color-red-700);
360
- --feedback-error-icon: var(--color-red-600);
361
- --feedback-error-border: var(--color-red-500);
362
- --feedback-warning-text: var(--color-yellow-900);
363
- --feedback-warning-icon: var(--color-yellow-700);
364
- --feedback-warning-border: var(--color-yellow-600);
365
- --feedback-info-text: var(--color-blue-700);
366
- --feedback-info-icon: var(--color-blue-600);
367
- --feedback-info-border: var(--color-blue-500);
368
- --color-map-marker-default: var(--color-action-brand);
369
- --color-map-streets-border: var(--color-black);
370
- --color-map-satellite-border: var(--color-white);
371
- --color-map-neutral-border: var(--color-black);
372
- --skeleton-base: var(--color-gray-200);
373
- --skeleton-highlight: var(--color-gray-100);
374
- --color-background-body: var(--color-white);
375
- --color-background-surface: var(--color-white);
376
- --color-background-muted: var(--color-gray-100);
377
- --color-background-hover: var(--color-gray-100);
378
- --color-background-selected: var(--color-gray-200);
379
- --color-background-input: var(--color-white);
380
- --color-text-heading: var(--color-gray-900);
381
- --theme-text-label: var(--color-gray-900);
382
- --color-text-muted: var(--color-gray-600);
383
- --color-text-caption: var(--color-gray-500);
384
- --color-text-placeholder: var(--color-gray-400);
385
- --color-text-disabled: var(--color-gray-400);
386
- --color-text-link-default: var(--color-brand-primary);
387
- --color-text-link-hover: var(--color-brand-dark);
388
- --color-text-onPrimary: var(--color-white);
389
- --color-border-default: var(--color-gray-200);
390
- --color-border-focus: var(--color-gray-900);
391
- --color-border-muted: var(--color-gray-200);
392
- --color-border-input: var(--color-gray-300);
393
- --color-action-brand: var(--color-brand-primary);
394
- --color-action-brand-hover: var(--color-brand-dark);
395
- --color-action-brand-text: var(--color-white);
396
- --color-action-default-text: var(--color-white);
397
- --color-skeleton-base: var(--color-gray-200);
398
- --color-skeleton-highlight: var(--color-gray-100);
399
- }
400
- .theme-dark {
401
431
  --color-white: #ffffff;
402
432
  --color-black: #000000;
403
- --color-gray-50: #f9fafb;
404
- --color-gray-100: #f3f4f6;
405
- --color-gray-200: #e5e7eb;
406
- --color-gray-300: #d1d5db;
407
- --color-gray-400: #9ca3af;
408
- --color-gray-500: #6b7280;
409
- --color-gray-600: #4b5563;
410
- --color-gray-700: #374151;
411
- --color-gray-800: #1f2937;
412
- --color-gray-900: #111827;
413
- --color-gray-950: #030712;
414
- --color-red-50: oklch(0.971 0.013 17.38);
415
- --color-red-100: oklch(0.936 0.032 17.717);
416
- --color-red-200: oklch(0.885 0.062 18.334);
417
- --color-red-300: oklch(0.808 0.114 19.571);
418
- --color-red-400: oklch(0.704 0.191 22.216);
419
- --color-red-500: oklch(0.637 0.237 25.331);
420
- --color-red-600: oklch(0.577 0.245 27.325);
421
- --color-red-700: oklch(0.505 0.213 27.518);
422
- --color-red-800: oklch(0.444 0.177 26.899);
423
- --color-red-900: oklch(0.396 0.141 25.723);
424
- --color-red-950: oklch(0.258 0.092 26.042);
425
- --color-green-50: oklch(0.982 0.018 131.68);
426
- --color-green-100: oklch(0.947 0.052 132.272);
427
- --color-green-200: oklch(0.895 0.111 131.438);
428
- --color-green-300: oklch(0.82 0.178 132.63);
429
- --color-green-400: oklch(0.718 0.209 130.901);
430
- --color-green-500: oklch(0.627 0.194 130.331);
431
- --color-green-600: oklch(0.527 0.19 131.688);
432
- --color-green-700: oklch(0.437 0.154 132.474);
433
- --color-green-800: oklch(0.366 0.121 132.109);
434
- --color-green-900: oklch(0.314 0.095 133.748);
435
- --color-green-950: oklch(0.197 0.06 130.709);
436
- --color-blue-50: oklch(0.97 0.014 237.69);
437
- --color-blue-100: oklch(0.932 0.032 241.935);
438
- --color-blue-200: oklch(0.882 0.059 243.157);
439
- --color-blue-300: oklch(0.809 0.105 244.039);
440
- --color-blue-400: oklch(0.707 0.165 246.422);
441
- --color-blue-500: oklch(0.623 0.214 250.546);
442
- --color-blue-600: oklch(0.546 0.245 253.739);
443
- --color-blue-700: oklch(0.488 0.243 255.638);
444
- --color-blue-800: oklch(0.424 0.199 255.585);
445
- --color-blue-900: oklch(0.368 0.146 254.128);
446
- --color-blue-950: oklch(0.262 0.09 254.128);
447
- --color-yellow-50: oklch(0.987 0.024 102.851);
448
- --color-yellow-100: oklch(0.973 0.071 103.193);
449
- --color-yellow-200: oklch(0.945 0.129 101.54);
450
- --color-yellow-300: oklch(0.905 0.182 98.111);
451
- --color-yellow-400: oklch(0.852 0.199 91.936);
452
- --color-yellow-500: oklch(0.795 0.184 86.047);
453
- --color-yellow-600: oklch(0.681 0.162 75.834);
454
- --color-yellow-700: oklch(0.554 0.135 66.191);
455
- --color-yellow-800: oklch(0.456 0.111 61.896);
456
- --color-yellow-900: oklch(0.398 0.092 60.236);
457
- --color-yellow-950: oklch(0.265 0.06 56.259);
458
- --color-brand-primary: #7a8ee1;
459
- --color-brand-light: #2a2d52;
460
- --color-brand-dark: #6a6fcc;
461
- --color-brand-background: #2e3258;
462
- --color-neutral-white: #ffffff;
463
- --color-neutral-black: #000000;
433
+ --color-linen: #faf7f0;
434
+ --color-graphite: #2c2a26;
435
+ --color-ink: #111111;
436
+ --color-gray-50: #fafafa;
437
+ --color-gray-100: #f5f5f4;
438
+ --color-gray-200: #e7e6e5;
439
+ --color-gray-300: #d4d3d0;
440
+ --color-gray-400: #a09d98;
441
+ --color-gray-500: #7c7974;
442
+ --color-gray-600: #5d5b56;
443
+ --color-gray-700: #454340;
444
+ --color-gray-800: #302f2d;
445
+ --color-gray-900: #222120;
446
+ --color-gray-950: #161615;
447
+ --color-honey-pastel: #fcebd4;
448
+ --color-honey-base: #f0972a;
449
+ --color-canary-pastel: #fffccc;
450
+ --color-canary-base: #ffff0c;
451
+ --color-moss-pastel: #eef6d8;
452
+ --color-moss-base: #8fbf2c;
453
+ --color-ocean-pastel: #dcf1f4;
454
+ --color-ocean-base: #2fa3b0;
455
+ --color-iris-pastel: #e3e6f5;
456
+ --color-iris-base: #3945a8;
457
+ --color-plum-pastel: #f0e3f7;
458
+ --color-plum-base: #8b39b8;
459
+ --color-rose-pastel: #fbe3ec;
460
+ --color-rose-base: #d93d72;
461
+ --color-error-light: #fdecec;
462
+ --color-error-base: #c42d2d;
463
+ --color-error-dark: #7a1212;
464
+ --color-warning-light: #fcefd9;
465
+ --color-warning-base: #c88420;
466
+ --color-warning-dark: #7a4708;
467
+ --color-success-light: #e4f3e9;
468
+ --color-success-base: #278a4a;
469
+ --color-success-dark: #15452a;
470
+ --color-info-light: #e0eaf5;
471
+ --color-info-base: #2d6cb8;
472
+ --color-info-dark: #123862;
473
+ --color-scrim-light: rgba(0, 0, 0, 0.15);
474
+ --color-scrim-dark: rgba(255, 255, 255, 0.12);
475
+ --color-input-background-dark: rgba(255, 255, 255, 0.05);
476
+ --color-skeleton-wave-light: rgba(255, 255, 255, 0.6);
477
+ --color-skeleton-wave-dark: rgba(255, 255, 255, 0.08);
464
478
  --motion-duration-instant: 0ms;
465
479
  --motion-duration-fast: 150ms;
466
480
  --motion-duration-normal: 250ms;
@@ -521,6 +535,19 @@
521
535
  --font-family-brand: 'TT Firs Neue', 'Helvetica Neue', Arial, system-ui, sans-serif;
522
536
  --font-family-serif: Merriweather, serif;
523
537
  --font-family-mono: 'Fira Code', monospace;
538
+ --font-size-xs: 0.75rem;
539
+ --font-size-sm: 0.875rem;
540
+ --font-size-base: 1rem;
541
+ --font-size-lg: 1.125rem;
542
+ --font-size-xl: 1.25rem;
543
+ --font-size-2xl: 1.5rem;
544
+ --font-size-3xl: 1.875rem;
545
+ --font-size-4xl: 2.25rem;
546
+ --font-size-5xl: 3rem;
547
+ --font-size-6xl: 3.75rem;
548
+ --font-size-7xl: 4.5rem;
549
+ --font-size-8xl: 6rem;
550
+ --font-size-9xl: 8rem;
524
551
  --font-weight-thin: 100;
525
552
  --font-weight-extralight: 200;
526
553
  --font-weight-light: 300;
@@ -541,305 +568,126 @@
541
568
  --font-letterspacing-wide: 0.025em;
542
569
  --font-letterspacing-wider: 0.05em;
543
570
  --font-letterspacing-widest: 0.1em;
544
- --action-brand-background: #7a8ee1;
545
- --action-brand-hover: #6a6fcc;
546
- --action-brand-text: #ffffff;
547
- --action-default-background: #111827;
548
- --action-default-hover: #374151;
549
- --action-default-text: #ffffff;
550
- --action-destructive-background: oklch(0.505 0.213 27.518);
551
- --action-destructive-hover: oklch(0.444 0.177 26.899);
552
- --action-destructive-text: #ffffff;
553
- --action-disabled-background: #d1d5db;
554
- --action-disabled-text: #6b7280;
555
- --feedback-success-text: oklch(0.314 0.095 133.748);
556
- --feedback-success-icon: oklch(0.437 0.154 132.474);
557
- --feedback-success-background: oklch(0.99 0.01 131.68);
558
- --feedback-success-border: oklch(0.527 0.19 131.688);
559
- --feedback-error-text: oklch(0.505 0.213 27.518);
560
- --feedback-error-icon: oklch(0.577 0.245 27.325);
561
- --feedback-error-background: oklch(0.985 0.008 17.38);
562
- --feedback-error-border: oklch(0.637 0.237 25.331);
563
- --feedback-warning-text: oklch(0.398 0.092 60.236);
564
- --feedback-warning-icon: oklch(0.554 0.135 66.191);
565
- --feedback-warning-background: oklch(0.993 0.015 102.851);
566
- --feedback-warning-border: oklch(0.681 0.162 75.834);
567
- --feedback-info-text: oklch(0.488 0.243 255.638);
568
- --feedback-info-icon: oklch(0.546 0.245 253.739);
569
- --feedback-info-background: oklch(0.985 0.008 237.69);
570
- --feedback-info-border: oklch(0.623 0.214 250.546);
571
- --color-map-marker-default: #7a8ee1;
572
- --color-map-streets-border: #000000;
573
- --color-map-neutral-border: #000000;
574
- --skeleton-base: #e5e7eb;
575
- --skeleton-highlight: #f3f4f6;
576
- --skeleton-wave: rgba(255, 255, 255, 0.5);
577
- --color-background-body: #151a30;
578
- --color-background-surface: #1a2038;
579
- --color-background-muted: #374151;
580
- --color-background-hover: #242d47;
581
- --color-background-selected: #4b5563;
582
- --color-background-modal: rgba(255, 255, 255, 0.12);
583
- --color-background-input: rgba(255, 255, 255, 0.05);
584
- --theme-background-canvas: linear-gradient(to bottom right, rgb(24 28 48), rgb(30 26 45), rgb(35 26 38));
585
- --theme-background-ai: linear-gradient(to bottom right, rgb(46 16 101 / 0.2), rgb(31 41 55), rgb(8 47 73 / 0.2));
586
- --color-text-body: #ededef;
587
- --color-text-heading: #ffffff;
588
- --theme-text-label: #ffffff;
589
- --color-text-muted: #9ca3af;
590
- --color-text-caption: #d1d5db;
591
- --color-text-subtle: #8e8e93;
592
- --color-text-placeholder: #9ca3af;
593
- --color-text-disabled: #9ca3af;
594
- --color-text-link-default: #b4b9ff;
595
- --color-text-link-hover: #c0c5ff;
596
- --color-text-onPrimary: #1f2937;
597
- --color-border-default: #2e3a59;
598
- --color-border-focus: #e5e7eb;
599
- --color-border-muted: #4b5563;
600
- --color-border-input: #6b7280;
601
- --color-feedback-success-text: #d1fae5;
602
- --color-feedback-success-background: #064e3b;
603
- --color-feedback-success-border: #059669;
604
- --color-feedback-error-text: #f87171;
605
- --color-feedback-error-background: #7f1d1d;
606
- --color-feedback-error-border: #dc2626;
607
- --color-feedback-warning-text: #fbbf24;
608
- --color-feedback-warning-background: #78350f;
609
- --color-feedback-warning-border: #d97706;
610
- --color-feedback-info-text: #60a5fa;
611
- --color-feedback-info-background: #1e3a8a;
612
- --color-feedback-info-border: #2563eb;
613
- --color-action-brand: #7a8ee1;
614
- --color-action-brand-hover: #6a6fcc;
571
+ --text-display-xl-size: 6rem;
572
+ --text-display-xl-line-height: 1;
573
+ --text-display-xl-letter-spacing: 0;
574
+ --text-display-xl-weight: 500;
575
+ --text-display-lg-size: 4.5rem;
576
+ --text-display-lg-line-height: 1;
577
+ --text-display-lg-letter-spacing: 0;
578
+ --text-display-lg-weight: 500;
579
+ --text-display-md-size: 3rem;
580
+ --text-display-md-line-height: 1.05;
581
+ --text-display-md-letter-spacing: 0;
582
+ --text-display-md-weight: 500;
583
+ --text-heading-xl-size: 2.25rem;
584
+ --text-heading-xl-line-height: 1.1;
585
+ --text-heading-xl-letter-spacing: 0;
586
+ --text-heading-xl-weight: 500;
587
+ --text-heading-lg-size: 1.875rem;
588
+ --text-heading-lg-line-height: 1.15;
589
+ --text-heading-lg-letter-spacing: 0;
590
+ --text-heading-lg-weight: 500;
591
+ --text-heading-md-size: 1.5rem;
592
+ --text-heading-md-line-height: 1.2;
593
+ --text-heading-md-letter-spacing: 0;
594
+ --text-heading-md-weight: 600;
595
+ --text-heading-sm-size: 1.25rem;
596
+ --text-heading-sm-line-height: 1.25;
597
+ --text-heading-sm-letter-spacing: 0;
598
+ --text-heading-sm-weight: 600;
599
+ --text-body-lg-size: 1.125rem;
600
+ --text-body-lg-line-height: 1.55;
601
+ --text-body-lg-letter-spacing: 0;
602
+ --text-body-lg-weight: 400;
603
+ --text-body-md-size: 1rem;
604
+ --text-body-md-line-height: 1.5;
605
+ --text-body-md-letter-spacing: 0;
606
+ --text-body-md-weight: 400;
607
+ --text-body-sm-size: 0.875rem;
608
+ --text-body-sm-line-height: 1.55;
609
+ --text-body-sm-letter-spacing: 0;
610
+ --text-body-sm-weight: 400;
611
+ --text-label-lg-size: 1rem;
612
+ --text-label-lg-line-height: 1.4;
613
+ --text-label-lg-letter-spacing: 0;
614
+ --text-label-lg-weight: 500;
615
+ --text-label-md-size: 0.875rem;
616
+ --text-label-md-line-height: 1.4;
617
+ --text-label-md-letter-spacing: 0;
618
+ --text-label-md-weight: 500;
619
+ --text-label-sm-size: 0.8125rem;
620
+ --text-label-sm-line-height: 1.4;
621
+ --text-label-sm-letter-spacing: 0;
622
+ --text-label-sm-weight: 500;
623
+ --text-caption-size: 0.8125rem;
624
+ --text-caption-line-height: 1.4;
625
+ --text-caption-letter-spacing: 0;
626
+ --text-caption-weight: 400;
627
+ --text-code-size: 0.875rem;
628
+ --text-code-line-height: 1.5;
629
+ --text-code-letter-spacing: 0;
630
+ --text-code-weight: 400;
631
+ --text-eyebrow-size: 0.6875rem;
632
+ --text-eyebrow-line-height: 1.4;
633
+ --text-eyebrow-letter-spacing: 0.1em;
634
+ --text-eyebrow-weight: 600;
635
+ --color-background-body: #ffffff;
636
+ --color-background-surface: #ffffff;
637
+ --color-background-muted: #f5f5f4;
638
+ --color-background-hover: #fafafa;
639
+ --color-background-selected: #e7e6e5;
640
+ --color-background-input: #ffffff;
641
+ --color-background-modal: rgba(0, 0, 0, 0.15);
642
+ --color-background-canvas: linear-gradient(to bottom right, rgb(239 246 255), rgb(250 245 255), rgb(253 242 248));
643
+ --color-background-ai: linear-gradient(to bottom right, rgb(245 243 255 / 0.5), rgb(255 255 255), rgb(240 249 255 / 0.5));
644
+ --color-text-body: #2c2a26;
645
+ --color-text-heading: #111111;
646
+ --theme-text-label: #111111;
647
+ --color-text-muted: #5d5b56;
648
+ --color-text-caption: #7c7974;
649
+ --color-text-subtle: #7c7974;
650
+ --color-text-placeholder: #a09d98;
651
+ --color-text-disabled: #d4d3d0;
652
+ --color-text-link-default: #111111;
653
+ --color-text-link-hover: #2c2a26;
654
+ --color-text-onPrimary: #ffffff;
655
+ --color-text-onBrand: #ffffff;
656
+ --color-border-default: #e7e6e5;
657
+ --color-border-focus: #111111;
658
+ --color-border-muted: #f5f5f4;
659
+ --color-border-input: #d4d3d0;
660
+ --color-action-brand: #111111;
661
+ --color-action-brand-hover: #2c2a26;
615
662
  --color-action-brand-text: #ffffff;
616
- --color-action-default: #ededef;
617
- --color-action-default-hover: #ffffff;
618
- --color-action-default-text: #111827;
619
- --color-state-charging: #581c87;
620
- --color-state-charging-data: #8038bf;
621
- --color-state-charging-border: #a855f7;
622
- --color-state-charging-text: #e9d5ff;
623
- --color-state-discharging: #78350f;
624
- --color-state-discharging-data: #b1740b;
625
- --color-state-discharging-border: #eab308;
626
- --color-state-discharging-text: #fef3c7;
627
- --color-state-heat: #7f1d1d;
628
- --color-state-heat-data: #b73030;
629
- --color-state-heat-border: #ef4444;
630
- --color-state-heat-text: #fee2e2;
631
- --color-state-cool: #1e3a8a;
632
- --color-state-cool-data: #2c5ec0;
633
- --color-state-cool-border: #3b82f6;
634
- --color-state-cool-text: #dbeafe;
635
- --color-state-eco: #064e3b;
636
- --color-state-eco-data: #0b835e;
637
- --color-state-eco-border: #10b981;
638
- --color-state-eco-text: #d1fae5;
639
- --color-state-auto: #7c2d12;
640
- --color-state-auto-data: #bb5f27;
641
- --color-state-auto-border: #fb923c;
642
- --color-state-auto-text: #ffedd5;
643
- --color-state-circulate: #312e81;
644
- --color-state-circulate-data: #4f46e5;
645
- --color-state-circulate-border: #818cf8;
646
- --color-state-circulate-text: #e0e7ff;
647
- --color-state-on: #134e4a;
648
- --color-state-on-data: #138378;
649
- --color-state-on-border: #14b8a6;
650
- --color-state-on-text: #ccfbf1;
651
- --color-state-idle: #374151;
652
- --color-state-idle-data: #515968;
653
- --color-state-idle-border: #6b7280;
654
- --color-state-idle-text: #e5e7eb;
655
- --color-state-off: #374151;
656
- --color-state-off-data: #515968;
657
- --color-state-off-border: #6b7280;
658
- --color-state-off-text: #e5e7eb;
659
- --color-state-unknown: #1f2937;
660
- --color-state-unknown-data: #454d5b;
661
- --color-state-unknown-border: #6b7280;
662
- --color-state-unknown-text: #ffffff;
663
- --color-state-importing: #1e3a8a;
664
- --color-state-importing-data: #3f6fc2;
665
- --color-state-importing-border: #60a5fa;
666
- --color-state-importing-text: #dbeafe;
667
- --color-state-exporting: #78350f;
668
- --color-state-exporting-data: #b97a19;
669
- --color-state-exporting-border: #fbbf24;
670
- --color-state-exporting-text: #fef3c7;
671
- --color-map-streets-border: #ffffff;
672
- --color-map-satellite-border: #ffffff;
673
- --color-map-neutral-border: #ffffff;
674
- --color-viz-default: #4da6ff;
675
- --color-viz-categorical-1: #7dd3c0;
676
- --color-viz-categorical-2: #a8b4ff;
677
- --color-viz-categorical-3: #ffd67a;
678
- --color-viz-categorical-4: #ffb3d9;
679
- --color-viz-categorical-5: #d4c4ff;
680
- --color-viz-categorical-6: #c8ff8e;
681
- --color-viz-sequential-viridis-1: #fde724;
682
- --color-viz-sequential-viridis-2: #b5de2b;
683
- --color-viz-sequential-viridis-3: #6ece58;
684
- --color-viz-sequential-viridis-4: #35b779;
685
- --color-viz-sequential-viridis-5: #1f9e89;
686
- --color-viz-sequential-viridis-6: #26828e;
687
- --color-viz-sequential-viridis-7: #31688e;
688
- --color-viz-sequential-viridis-8: #3e4a89;
689
- --color-viz-sequential-viridis-9: #482878;
690
- --color-viz-sequential-viridis-10: #440154;
691
- --color-viz-sequential-magma-1: #fcfdbf;
692
- --color-viz-sequential-magma-2: #feca8d;
693
- --color-viz-sequential-magma-3: #fd9668;
694
- --color-viz-sequential-magma-4: #f1605d;
695
- --color-viz-sequential-magma-5: #cd4071;
696
- --color-viz-sequential-magma-6: #9e2f7f;
697
- --color-viz-sequential-magma-7: #721f81;
698
- --color-viz-sequential-magma-8: #51127c;
699
- --color-viz-sequential-magma-9: #2c115f;
700
- --color-viz-sequential-magma-10: #0c0927;
701
- --color-viz-sequential-rose-1: #fff5ee;
702
- --color-viz-sequential-rose-2: #ffc9e8;
703
- --color-viz-sequential-rose-3: #ff95d5;
704
- --color-viz-sequential-rose-4: #eb5fb7;
705
- --color-viz-sequential-rose-5: #d13896;
706
- --color-viz-sequential-rose-6: #ac2681;
707
- --color-viz-sequential-rose-7: #841f78;
708
- --color-viz-sequential-rose-8: #631d67;
709
- --color-viz-sequential-rose-9: #3f1a4e;
710
- --color-viz-sequential-rose-10: #1e0f2e;
711
- --color-viz-sequential-cerulean-1: #e8fafd;
712
- --color-viz-sequential-cerulean-2: #b3e5f0;
713
- --color-viz-sequential-cerulean-3: #7fd4e8;
714
- --color-viz-sequential-cerulean-4: #4db8d8;
715
- --color-viz-sequential-cerulean-5: #2e9dc6;
716
- --color-viz-sequential-cerulean-6: #1a7ba3;
717
- --color-viz-sequential-cerulean-7: #0d5b7e;
718
- --color-viz-sequential-cerulean-8: #0a4263;
719
- --color-viz-sequential-cerulean-9: #072d47;
720
- --color-viz-sequential-cerulean-10: #041a2b;
721
- --color-viz-sequential-forest-1: #f7fcd4;
722
- --color-viz-sequential-forest-2: #d5ed99;
723
- --color-viz-sequential-forest-3: #afd66f;
724
- --color-viz-sequential-forest-4: #84ba4d;
725
- --color-viz-sequential-forest-5: #5a9b30;
726
- --color-viz-sequential-forest-6: #3a7a1e;
727
- --color-viz-sequential-forest-7: #285714;
728
- --color-viz-sequential-forest-8: #1a3c0d;
729
- --color-viz-sequential-forest-9: #0f2808;
730
- --color-viz-sequential-forest-10: #071403;
731
- --color-viz-sequential-red-yellow-green-1: #991b1b;
732
- --color-viz-sequential-red-yellow-green-2: #dc2626;
733
- --color-viz-sequential-red-yellow-green-3: #f87171;
734
- --color-viz-sequential-red-yellow-green-4: #fb923c;
735
- --color-viz-sequential-red-yellow-green-5: #fbbf24;
736
- --color-viz-sequential-red-yellow-green-6: #fde047;
737
- --color-viz-sequential-red-yellow-green-7: #bef264;
738
- --color-viz-sequential-red-yellow-green-8: #6ee7b7;
739
- --color-viz-sequential-red-yellow-green-9: #34d399;
740
- --color-viz-sequential-red-yellow-green-10: #10b981;
741
- --color-viz-diverging-orange-yellow-seafoam-1: #883a1f;
742
- --color-viz-diverging-orange-yellow-seafoam-2: #c25f27;
743
- --color-viz-diverging-orange-yellow-seafoam-3: #e8843d;
744
- --color-viz-diverging-orange-yellow-seafoam-4: #f5b774;
745
- --color-viz-diverging-orange-yellow-seafoam-5: #fef4c7;
746
- --color-viz-diverging-orange-yellow-seafoam-6: #b8e8d5;
747
- --color-viz-diverging-orange-yellow-seafoam-7: #73d4c5;
748
- --color-viz-diverging-orange-yellow-seafoam-8: #3db3a8;
749
- --color-viz-diverging-orange-yellow-seafoam-9: #1f8d82;
750
- --color-viz-diverging-orange-yellow-seafoam-10: #0d5d56;
751
- --color-viz-diverging-red-yellow-blue-1: #6b1e3c;
752
- --color-viz-diverging-red-yellow-blue-2: #a83b5e;
753
- --color-viz-diverging-red-yellow-blue-3: #d96e68;
754
- --color-viz-diverging-red-yellow-blue-4: #f0a487;
755
- --color-viz-diverging-red-yellow-blue-5: #fef4c7;
756
- --color-viz-diverging-red-yellow-blue-6: #b8ddd3;
757
- --color-viz-diverging-red-yellow-blue-7: #7bb8cf;
758
- --color-viz-diverging-red-yellow-blue-8: #4a8ec4;
759
- --color-viz-diverging-red-yellow-blue-9: #2d6bb0;
760
- --color-viz-diverging-red-yellow-blue-10: #1a4680;
761
- --color-viz-diverging-red-blue-1: #6b1e3c;
762
- --color-viz-diverging-red-blue-2: #a83b5e;
763
- --color-viz-diverging-red-blue-3: #d9668f;
764
- --color-viz-diverging-red-blue-4: #f09db8;
765
- --color-viz-diverging-red-blue-5: #f8e5f9;
766
- --color-viz-diverging-red-blue-6: #d4c9ed;
767
- --color-viz-diverging-red-blue-7: #b0b8df;
768
- --color-viz-diverging-red-blue-8: #8494ca;
769
- --color-viz-diverging-red-blue-9: #5d6fb0;
770
- --color-viz-diverging-red-blue-10: #374f88;
771
- --color-skeleton-base: #374151;
772
- --color-skeleton-highlight: #4b5563;
773
- --color-skeleton-wave: rgba(255, 255, 255, 0.15);
774
- }
775
- @layer base {
776
- :root {
777
- --text-xs: 0.75rem;
778
- --text-sm: 0.875rem;
779
- --text-base: 1rem;
780
- --text-lg: 1rem;
781
- --text-xl: 1.125rem;
782
- --text-2xl: 1.25rem;
783
- --text-3xl: 1.5rem;
784
- --text-4xl: 1.875rem;
785
- --text-5xl: 2.25rem;
786
- --text-6xl: 3rem;
787
- --text-7xl: 3.5rem;
788
- --text-8xl: 4rem;
789
- --text-9xl: 4.5rem;
790
- --font-size-xs: 0.75rem;
791
- --font-size-sm: 0.875rem;
792
- --font-size-base: 1rem;
793
- --font-size-lg: 1rem;
794
- --font-size-xl: 1.125rem;
795
- --font-size-2xl: 1.25rem;
796
- --font-size-3xl: 1.5rem;
797
- --font-size-4xl: 1.875rem;
798
- --font-size-5xl: 2.25rem;
799
- --font-size-6xl: 3rem;
800
- --font-size-7xl: 3.5rem;
801
- --font-size-8xl: 4rem;
802
- --font-size-9xl: 4.5rem;
803
- }
804
- @media (min-width: 768px) {
805
- :root {
806
- --text-xs: 0.75rem;
807
- --text-sm: 0.875rem;
808
- --text-base: 1rem;
809
- --text-lg: 1.125rem;
810
- --text-xl: 1.25rem;
811
- --text-2xl: 1.5rem;
812
- --text-3xl: 1.875rem;
813
- --text-4xl: 2.25rem;
814
- --text-5xl: 3rem;
815
- --text-6xl: 3.75rem;
816
- --text-7xl: 4.5rem;
817
- --text-8xl: 6rem;
818
- --text-9xl: 8rem;
819
- --font-size-xs: 0.75rem;
820
- --font-size-sm: 0.875rem;
821
- --font-size-base: 1rem;
822
- --font-size-lg: 1.125rem;
823
- --font-size-xl: 1.25rem;
824
- --font-size-2xl: 1.5rem;
825
- --font-size-3xl: 1.875rem;
826
- --font-size-4xl: 2.25rem;
827
- --font-size-5xl: 3rem;
828
- --font-size-6xl: 3.75rem;
829
- --font-size-7xl: 4.5rem;
830
- --font-size-8xl: 6rem;
831
- --font-size-9xl: 8rem;
832
- }
833
- }
834
- }
835
- :root {
836
- --color-viz-default: #0082ff;
837
- --color-viz-categorical-1: #a3eae4;
838
- --color-viz-categorical-2: #91a0ff;
839
- --color-viz-categorical-3: #ffd1a3;
840
- --color-viz-categorical-4: #ffabc8;
841
- --color-viz-categorical-5: #c1b8ff;
842
- --color-viz-categorical-6: #e0ffb8;
663
+ --color-action-default: #111111;
664
+ --color-action-default-hover: #2c2a26;
665
+ --color-action-default-text: #ffffff;
666
+ --color-feedback-success-text: #15452a;
667
+ --color-feedback-success-background: #e4f3e9;
668
+ --color-feedback-success-border: #278a4a;
669
+ --color-feedback-error-text: #7a1212;
670
+ --color-feedback-error-background: #fdecec;
671
+ --color-feedback-error-border: #c42d2d;
672
+ --color-feedback-warning-text: #7a4708;
673
+ --color-feedback-warning-background: #fcefd9;
674
+ --color-feedback-warning-border: #c88420;
675
+ --color-feedback-info-text: #123862;
676
+ --color-feedback-info-background: #e0eaf5;
677
+ --color-feedback-info-border: #2d6cb8;
678
+ --color-viz-default: #5424db;
679
+ --color-viz-categorical-1: #5424db;
680
+ --color-viz-categorical-2: #d92361;
681
+ --color-viz-categorical-3: #e86a00;
682
+ --color-viz-categorical-4: #5d89ff;
683
+ --color-viz-categorical-5: #9a47e2;
684
+ --color-viz-categorical-6: #f24cb8;
685
+ --color-viz-categorical-7: #0ba286;
686
+ --color-viz-categorical-8: #9c28af;
687
+ --color-viz-categorical-9: #036e45;
688
+ --color-viz-categorical-10: #52a119;
689
+ --color-viz-categorical-11: #ff513d;
690
+ --color-viz-categorical-12: #046691;
843
691
  --color-viz-sequential-viridis-1: #fafa37;
844
692
  --color-viz-sequential-viridis-2: #d6e654;
845
693
  --color-viz-sequential-viridis-3: #b2d373;
@@ -930,28 +778,373 @@
930
778
  --color-viz-diverging-red-blue-8: #7080b5;
931
779
  --color-viz-diverging-red-blue-9: #4d5e99;
932
780
  --color-viz-diverging-red-blue-10: #2b3d70;
781
+ --color-skeleton-base: #e7e6e5;
782
+ --color-skeleton-highlight: #f5f5f4;
783
+ --color-skeleton-wave: rgba(255, 255, 255, 0.6);
784
+ --color-map-marker-default: #111111;
785
+ --color-map-streets-border: #000000;
786
+ --color-map-satellite-border: #ffffff;
787
+ --color-map-neutral-border: #000000;
788
+ --color-state-charging: #f3e8ff;
933
789
  --color-state-charging-data: #d9b6fd;
790
+ --color-state-charging-border: #c084fc;
791
+ --color-state-charging-text: #6b21a8;
792
+ --color-state-discharging: #fffbeb;
934
793
  --color-state-discharging-data: #fce380;
794
+ --color-state-discharging-border: #facc15;
795
+ --color-state-discharging-text: #78350f;
796
+ --color-state-heat: #fee2e2;
935
797
  --color-state-heat-data: #fba9a9;
798
+ --color-state-heat-border: #f87171;
799
+ --color-state-heat-text: #920000;
800
+ --color-state-cool: #dbeafe;
936
801
  --color-state-cool-data: #9dc7fc;
802
+ --color-state-cool-border: #60a5fa;
803
+ --color-state-cool-text: #0334be;
804
+ --color-state-eco: #ddfff1;
937
805
  --color-state-eco-data: #88e9c5;
806
+ --color-state-eco-border: #34d399;
807
+ --color-state-eco-text: #065f46;
808
+ --color-state-auto: #ffedd5;
938
809
  --color-state-auto-data: #fed3a4;
810
+ --color-state-auto-border: #fdba74;
811
+ --color-state-auto-text: #7c2d12;
812
+ --color-state-circulate: #ede9fe;
939
813
  --color-state-circulate-data: #c4b5fd;
814
+ --color-state-circulate-border: #a78bfa;
815
+ --color-state-circulate-text: #4338ca;
816
+ --color-state-on: #ccfbf1;
940
817
  --color-state-on-data: #7ce7d8;
818
+ --color-state-on-border: #2dd4bf;
819
+ --color-state-on-text: #0f766e;
820
+ --color-state-idle: #e5e7eb;
941
821
  --color-state-idle-data: #c0c5cd;
822
+ --color-state-idle-border: #9ca3af;
823
+ --color-state-idle-text: #374151;
824
+ --color-state-off: #e5e7eb;
942
825
  --color-state-off-data: #c0c5cd;
826
+ --color-state-off-border: #9ca3af;
827
+ --color-state-off-text: #374151;
828
+ --color-state-unknown: #f8f8f8;
943
829
  --color-state-unknown-data: #e4e6e9;
830
+ --color-state-unknown-border: #d1d5db;
831
+ --color-state-unknown-text: #000000;
832
+ --color-state-importing: #dbeafe;
944
833
  --color-state-importing-data: #8bb6fa;
834
+ --color-state-importing-border: #3b82f6;
835
+ --color-state-importing-text: #1e40af;
836
+ --color-state-exporting: #fef3c7;
945
837
  --color-state-exporting-data: #f9c869;
838
+ --color-state-exporting-border: #f59e0b;
839
+ --color-state-exporting-text: #92400e;
840
+ }
841
+ :root {
842
+ --text-display-xl-size: var(--font-size-8xl);
843
+ --text-display-xl-letter-spacing: var(--font-letterspacing-normal);
844
+ --text-display-xl-weight: var(--font-weight-medium);
845
+ --text-display-lg-size: var(--font-size-7xl);
846
+ --text-display-lg-letter-spacing: var(--font-letterspacing-normal);
847
+ --text-display-lg-weight: var(--font-weight-medium);
848
+ --text-display-md-size: var(--font-size-5xl);
849
+ --text-display-md-letter-spacing: var(--font-letterspacing-normal);
850
+ --text-display-md-weight: var(--font-weight-medium);
851
+ --text-heading-xl-size: var(--font-size-4xl);
852
+ --text-heading-xl-letter-spacing: var(--font-letterspacing-normal);
853
+ --text-heading-xl-weight: var(--font-weight-medium);
854
+ --text-heading-lg-size: var(--font-size-3xl);
855
+ --text-heading-lg-letter-spacing: var(--font-letterspacing-normal);
856
+ --text-heading-lg-weight: var(--font-weight-medium);
857
+ --text-heading-md-size: var(--font-size-2xl);
858
+ --text-heading-md-letter-spacing: var(--font-letterspacing-normal);
859
+ --text-heading-md-weight: var(--font-weight-semibold);
860
+ --text-heading-sm-size: var(--font-size-xl);
861
+ --text-heading-sm-line-height: var(--font-lineheight-tight);
862
+ --text-heading-sm-letter-spacing: var(--font-letterspacing-normal);
863
+ --text-heading-sm-weight: var(--font-weight-semibold);
864
+ --text-body-lg-size: var(--font-size-lg);
865
+ --text-body-lg-letter-spacing: var(--font-letterspacing-normal);
866
+ --text-body-lg-weight: var(--font-weight-normal);
867
+ --text-body-md-size: var(--font-size-base);
868
+ --text-body-md-line-height: var(--font-lineheight-normal);
869
+ --text-body-md-letter-spacing: var(--font-letterspacing-normal);
870
+ --text-body-md-weight: var(--font-weight-normal);
871
+ --text-body-sm-size: var(--font-size-sm);
872
+ --text-body-sm-letter-spacing: var(--font-letterspacing-normal);
873
+ --text-body-sm-weight: var(--font-weight-normal);
874
+ --text-label-lg-size: var(--font-size-base);
875
+ --text-label-lg-letter-spacing: var(--font-letterspacing-normal);
876
+ --text-label-lg-weight: var(--font-weight-medium);
877
+ --text-label-md-size: var(--font-size-sm);
878
+ --text-label-md-letter-spacing: var(--font-letterspacing-normal);
879
+ --text-label-md-weight: var(--font-weight-medium);
880
+ --text-label-sm-letter-spacing: var(--font-letterspacing-normal);
881
+ --text-label-sm-weight: var(--font-weight-medium);
882
+ --text-caption-letter-spacing: var(--font-letterspacing-normal);
883
+ --text-caption-weight: var(--font-weight-normal);
884
+ --text-code-size: var(--font-size-sm);
885
+ --text-code-line-height: var(--font-lineheight-normal);
886
+ --text-code-letter-spacing: var(--font-letterspacing-normal);
887
+ --text-code-weight: var(--font-weight-normal);
888
+ --text-eyebrow-letter-spacing: var(--font-letterspacing-widest);
889
+ --text-eyebrow-weight: var(--font-weight-semibold);
890
+ --color-background-body: var(--color-white);
891
+ --color-background-surface: var(--color-white);
892
+ --color-background-muted: var(--color-gray-100);
893
+ --color-background-hover: var(--color-gray-50);
894
+ --color-background-selected: var(--color-gray-200);
895
+ --color-background-input: var(--color-white);
896
+ --color-background-modal: var(--color-scrim-light);
897
+ --color-text-body: var(--color-graphite);
898
+ --color-text-heading: var(--color-ink);
899
+ --theme-text-label: var(--color-ink);
900
+ --color-text-muted: var(--color-gray-600);
901
+ --color-text-caption: var(--color-gray-500);
902
+ --color-text-subtle: var(--color-gray-500);
903
+ --color-text-placeholder: var(--color-gray-400);
904
+ --color-text-disabled: var(--color-gray-300);
905
+ --color-text-link-default: var(--color-ink);
906
+ --color-text-link-hover: var(--color-graphite);
907
+ --color-text-onPrimary: var(--color-white);
908
+ --color-text-onBrand: var(--color-white);
909
+ --color-border-default: var(--color-gray-200);
910
+ --color-border-focus: var(--color-ink);
911
+ --color-border-muted: var(--color-gray-100);
912
+ --color-border-input: var(--color-gray-300);
913
+ --color-action-brand: var(--color-ink);
914
+ --color-action-brand-hover: var(--color-graphite);
915
+ --color-action-brand-text: var(--color-white);
916
+ --color-action-default: var(--color-ink);
917
+ --color-action-default-hover: var(--color-graphite);
918
+ --color-action-default-text: var(--color-white);
919
+ --color-feedback-success-text: var(--color-success-dark);
920
+ --color-feedback-success-background: var(--color-success-light);
921
+ --color-feedback-success-border: var(--color-success-base);
922
+ --color-feedback-error-text: var(--color-error-dark);
923
+ --color-feedback-error-background: var(--color-error-light);
924
+ --color-feedback-error-border: var(--color-error-base);
925
+ --color-feedback-warning-text: var(--color-warning-dark);
926
+ --color-feedback-warning-background: var(--color-warning-light);
927
+ --color-feedback-warning-border: var(--color-warning-base);
928
+ --color-feedback-info-text: var(--color-info-dark);
929
+ --color-feedback-info-background: var(--color-info-light);
930
+ --color-feedback-info-border: var(--color-info-base);
931
+ --color-viz-default: var(--color-viz-categorical-1);
932
+ --color-skeleton-base: var(--color-gray-200);
933
+ --color-skeleton-highlight: var(--color-gray-100);
934
+ --color-skeleton-wave: var(--color-skeleton-wave-light);
935
+ --color-map-marker-default: var(--color-action-brand);
936
+ --color-map-streets-border: var(--color-black);
937
+ --color-map-satellite-border: var(--color-white);
938
+ --color-map-neutral-border: var(--color-black);
939
+ }
940
+ :root {
941
+ --text-display-xl: var(--text-display-xl-weight) var(--text-display-xl-size)/var(--text-display-xl-line-height) var(--font-family-brand);
942
+ --text-display-lg: var(--text-display-lg-weight) var(--text-display-lg-size)/var(--text-display-lg-line-height) var(--font-family-brand);
943
+ --text-display-md: var(--text-display-md-weight) var(--text-display-md-size)/var(--text-display-md-line-height) var(--font-family-brand);
944
+ --text-heading-xl: var(--text-heading-xl-weight) var(--text-heading-xl-size)/var(--text-heading-xl-line-height) var(--font-family-brand);
945
+ --text-heading-lg: var(--text-heading-lg-weight) var(--text-heading-lg-size)/var(--text-heading-lg-line-height) var(--font-family-brand);
946
+ --text-heading-md: var(--text-heading-md-weight) var(--text-heading-md-size)/var(--text-heading-md-line-height) var(--font-family-brand);
947
+ --text-heading-sm: var(--text-heading-sm-weight) var(--text-heading-sm-size)/var(--text-heading-sm-line-height) var(--font-family-brand);
948
+ --text-body-lg: var(--text-body-lg-weight) var(--text-body-lg-size)/var(--text-body-lg-line-height) var(--font-family-sans);
949
+ --text-body-md: var(--text-body-md-weight) var(--text-body-md-size)/var(--text-body-md-line-height) var(--font-family-sans);
950
+ --text-body-sm: var(--text-body-sm-weight) var(--text-body-sm-size)/var(--text-body-sm-line-height) var(--font-family-sans);
951
+ --text-label-lg: var(--text-label-lg-weight) var(--text-label-lg-size)/var(--text-label-lg-line-height) var(--font-family-sans);
952
+ --text-label-md: var(--text-label-md-weight) var(--text-label-md-size)/var(--text-label-md-line-height) var(--font-family-sans);
953
+ --text-label-sm: var(--text-label-sm-weight) var(--text-label-sm-size)/var(--text-label-sm-line-height) var(--font-family-sans);
954
+ --text-caption: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line-height) var(--font-family-sans);
955
+ --text-code: var(--text-code-weight) var(--text-code-size)/var(--text-code-line-height) var(--font-family-mono);
956
+ --text-eyebrow: var(--text-eyebrow-weight) var(--text-eyebrow-size)/var(--text-eyebrow-line-height) var(--font-family-mono);
957
+ }
958
+ @media (max-width: 768px) {
959
+ :root {
960
+ --text-body-md-size: 1.0625rem;
961
+ --text-body-lg-size: 1.1875rem;
962
+ }
946
963
  }
947
964
  .theme-dark {
948
- --color-viz-default: #4da6ff;
949
- --color-viz-categorical-1: #7dd3c0;
950
- --color-viz-categorical-2: #a8b4ff;
951
- --color-viz-categorical-3: #ffd67a;
952
- --color-viz-categorical-4: #ffb3d9;
953
- --color-viz-categorical-5: #d4c4ff;
954
- --color-viz-categorical-6: #c8ff8e;
965
+ --color-white: #ffffff;
966
+ --color-black: #000000;
967
+ --color-linen: #faf7f0;
968
+ --color-graphite: #d5d2cb;
969
+ --color-ink: #ededef;
970
+ --color-gray-50: #fafafa;
971
+ --color-gray-100: #f5f5f4;
972
+ --color-gray-200: #e7e6e5;
973
+ --color-gray-300: #d4d3d0;
974
+ --color-gray-400: #a09d98;
975
+ --color-gray-500: #7c7974;
976
+ --color-gray-600: #5d5b56;
977
+ --color-gray-700: #454340;
978
+ --color-gray-800: #302f2d;
979
+ --color-gray-900: #222120;
980
+ --color-gray-950: #161615;
981
+ --color-honey-pastel: #3d2a10;
982
+ --color-honey-base: #f4ad52;
983
+ --color-canary-pastel: #3d3a10;
984
+ --color-canary-base: #ffff5c;
985
+ --color-moss-pastel: #283318;
986
+ --color-moss-base: #a8d44a;
987
+ --color-ocean-pastel: #15343a;
988
+ --color-ocean-base: #48bcc8;
989
+ --color-iris-pastel: #1e2248;
990
+ --color-iris-base: #6270d0;
991
+ --color-plum-pastel: #2e1640;
992
+ --color-plum-base: #ab62d6;
993
+ --color-rose-pastel: #3d1628;
994
+ --color-rose-base: #e8658f;
995
+ --color-error-light: #3d1414;
996
+ --color-error-base: #e85454;
997
+ --color-error-dark: #fca5a5;
998
+ --color-warning-light: #3d2b0e;
999
+ --color-warning-base: #e0a03a;
1000
+ --color-warning-dark: #fbd38d;
1001
+ --color-success-light: #0e2e1a;
1002
+ --color-success-base: #3daf68;
1003
+ --color-success-dark: #86efac;
1004
+ --color-info-light: #0e1e38;
1005
+ --color-info-base: #5a94d4;
1006
+ --color-info-dark: #93c5fd;
1007
+ --color-scrim-light: rgba(0, 0, 0, 0.15);
1008
+ --color-scrim-dark: rgba(255, 255, 255, 0.12);
1009
+ --color-input-background-dark: rgba(255, 255, 255, 0.05);
1010
+ --color-skeleton-wave-light: rgba(255, 255, 255, 0.6);
1011
+ --color-skeleton-wave-dark: rgba(255, 255, 255, 0.08);
1012
+ --motion-duration-instant: 0ms;
1013
+ --motion-duration-fast: 150ms;
1014
+ --motion-duration-normal: 250ms;
1015
+ --motion-duration-slow: 350ms;
1016
+ --motion-duration-slower: 500ms;
1017
+ --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
1018
+ --motion-easing-emphasized: cubic-bezier(0, 0, 0.2, 1);
1019
+ --motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
1020
+ --motion-easing-deaccelerate: cubic-bezier(0, 0, 0.2, 1);
1021
+ --motion-distance-xs: 4px;
1022
+ --motion-distance-sm: 8px;
1023
+ --motion-distance-md: 16px;
1024
+ --motion-opacity-hover: 0.9;
1025
+ --motion-opacity-disabled: 0.5;
1026
+ --motion-scale-hover: 1.02;
1027
+ --motion-scale-press: 0.97;
1028
+ --spacing-0: 0;
1029
+ --spacing-1: 0.25rem;
1030
+ --spacing-2: 0.5rem;
1031
+ --spacing-3: 0.75rem;
1032
+ --spacing-4: 1rem;
1033
+ --spacing-5: 1.25rem;
1034
+ --spacing-6: 1.5rem;
1035
+ --spacing-7: 1.75rem;
1036
+ --spacing-8: 2rem;
1037
+ --spacing-9: 2.25rem;
1038
+ --spacing-10: 2.5rem;
1039
+ --spacing-11: 2.75rem;
1040
+ --spacing-12: 3rem;
1041
+ --spacing-14: 3.5rem;
1042
+ --spacing-16: 4rem;
1043
+ --spacing-20: 5rem;
1044
+ --spacing-24: 6rem;
1045
+ --spacing-28: 7rem;
1046
+ --spacing-32: 8rem;
1047
+ --spacing-36: 9rem;
1048
+ --spacing-40: 10rem;
1049
+ --spacing-44: 11rem;
1050
+ --spacing-48: 12rem;
1051
+ --spacing-52: 13rem;
1052
+ --spacing-56: 14rem;
1053
+ --spacing-60: 15rem;
1054
+ --spacing-64: 16rem;
1055
+ --spacing-72: 18rem;
1056
+ --spacing-80: 20rem;
1057
+ --spacing-96: 24rem;
1058
+ --radius-none: 0;
1059
+ --radius-xs: 0.125rem;
1060
+ --radius-sm: 0.25rem;
1061
+ --radius-md: 0.375rem;
1062
+ --radius-lg: 0.5rem;
1063
+ --radius-xl: 0.75rem;
1064
+ --radius-2xl: 1rem;
1065
+ --radius-3xl: 1.5rem;
1066
+ --radius-4xl: 2rem;
1067
+ --radius-full: 9999px;
1068
+ --font-family-sans: Inter, system-ui, sans-serif;
1069
+ --font-family-brand: 'TT Firs Neue', 'Helvetica Neue', Arial, system-ui, sans-serif;
1070
+ --font-family-serif: Merriweather, serif;
1071
+ --font-family-mono: 'Fira Code', monospace;
1072
+ --font-weight-thin: 100;
1073
+ --font-weight-extralight: 200;
1074
+ --font-weight-light: 300;
1075
+ --font-weight-normal: 400;
1076
+ --font-weight-medium: 500;
1077
+ --font-weight-semibold: 600;
1078
+ --font-weight-bold: 700;
1079
+ --font-weight-extrabold: 800;
1080
+ --font-weight-black: 900;
1081
+ --font-lineheight-tight: 1.25;
1082
+ --font-lineheight-snug: 1.375;
1083
+ --font-lineheight-normal: 1.5;
1084
+ --font-lineheight-relaxed: 1.625;
1085
+ --font-lineheight-loose: 2;
1086
+ --font-letterspacing-tighter: -0.05em;
1087
+ --font-letterspacing-tight: -0.025em;
1088
+ --font-letterspacing-normal: 0;
1089
+ --font-letterspacing-wide: 0.025em;
1090
+ --font-letterspacing-wider: 0.05em;
1091
+ --font-letterspacing-widest: 0.1em;
1092
+ --color-background-body: var(--color-gray-950);
1093
+ --color-background-surface: var(--color-gray-900);
1094
+ --color-background-muted: var(--color-gray-800);
1095
+ --color-background-hover: var(--color-gray-900);
1096
+ --color-background-selected: var(--color-gray-700);
1097
+ --color-background-input: var(--color-input-background-dark);
1098
+ --color-background-modal: var(--color-scrim-dark);
1099
+ --color-background-canvas: linear-gradient(to bottom right, rgb(24 28 48), rgb(30 26 45), rgb(35 26 38));
1100
+ --color-background-ai: linear-gradient(to bottom right, rgb(46 16 101 / 0.2), rgb(31 41 55), rgb(8 47 73 / 0.2));
1101
+ --color-text-body: var(--color-gray-200);
1102
+ --color-text-heading: var(--color-white);
1103
+ --theme-text-label: var(--color-white);
1104
+ --color-text-muted: var(--color-gray-400);
1105
+ --color-text-caption: var(--color-gray-400);
1106
+ --color-text-subtle: var(--color-gray-400);
1107
+ --color-text-placeholder: var(--color-gray-400);
1108
+ --color-text-disabled: var(--color-gray-700);
1109
+ --color-text-link-default: var(--color-ink);
1110
+ --color-text-link-hover: var(--color-graphite);
1111
+ --color-text-onPrimary: var(--color-gray-900);
1112
+ --color-text-onBrand: #111111;
1113
+ --color-border-default: var(--color-gray-700);
1114
+ --color-border-focus: var(--color-gray-200);
1115
+ --color-border-muted: var(--color-gray-800);
1116
+ --color-border-input: var(--color-gray-700);
1117
+ --color-action-brand: var(--color-ink);
1118
+ --color-action-brand-hover: var(--color-graphite);
1119
+ --color-action-brand-text: #111111;
1120
+ --color-action-default: var(--color-ink);
1121
+ --color-action-default-hover: var(--color-graphite);
1122
+ --color-action-default-text: #111111;
1123
+ --color-feedback-success-text: var(--color-success-dark);
1124
+ --color-feedback-success-background: var(--color-success-light);
1125
+ --color-feedback-success-border: var(--color-success-base);
1126
+ --color-feedback-error-text: var(--color-error-dark);
1127
+ --color-feedback-error-background: var(--color-error-light);
1128
+ --color-feedback-error-border: var(--color-error-base);
1129
+ --color-feedback-warning-text: var(--color-warning-dark);
1130
+ --color-feedback-warning-background: var(--color-warning-light);
1131
+ --color-feedback-warning-border: var(--color-warning-base);
1132
+ --color-feedback-info-text: var(--color-info-dark);
1133
+ --color-feedback-info-background: var(--color-info-light);
1134
+ --color-feedback-info-border: var(--color-info-base);
1135
+ --color-viz-default: #7e5bec;
1136
+ --color-viz-categorical-1: #7e5bec;
1137
+ --color-viz-categorical-2: #d92361;
1138
+ --color-viz-categorical-3: #e86a00;
1139
+ --color-viz-categorical-4: #5d89ff;
1140
+ --color-viz-categorical-5: #9a47e2;
1141
+ --color-viz-categorical-6: #f24cb8;
1142
+ --color-viz-categorical-7: #0ba286;
1143
+ --color-viz-categorical-8: #9c28af;
1144
+ --color-viz-categorical-9: #036e45;
1145
+ --color-viz-categorical-10: #52a119;
1146
+ --color-viz-categorical-11: #ff513d;
1147
+ --color-viz-categorical-12: #046691;
955
1148
  --color-viz-sequential-viridis-1: #fde724;
956
1149
  --color-viz-sequential-viridis-2: #b5de2b;
957
1150
  --color-viz-sequential-viridis-3: #6ece58;
@@ -1042,64 +1235,182 @@
1042
1235
  --color-viz-diverging-red-blue-8: #8494ca;
1043
1236
  --color-viz-diverging-red-blue-9: #5d6fb0;
1044
1237
  --color-viz-diverging-red-blue-10: #374f88;
1238
+ --color-skeleton-base: var(--color-gray-800);
1239
+ --color-skeleton-highlight: var(--color-gray-700);
1240
+ --color-skeleton-wave: var(--color-skeleton-wave-dark);
1241
+ --color-map-marker-default: var(--color-action-brand);
1242
+ --color-map-streets-border: var(--color-white);
1243
+ --color-map-satellite-border: var(--color-white);
1244
+ --color-map-neutral-border: var(--color-white);
1245
+ --color-state-charging: #581c87;
1045
1246
  --color-state-charging-data: #8038bf;
1247
+ --color-state-charging-border: #a855f7;
1248
+ --color-state-charging-text: #e9d5ff;
1249
+ --color-state-discharging: #78350f;
1046
1250
  --color-state-discharging-data: #b1740b;
1251
+ --color-state-discharging-border: #eab308;
1252
+ --color-state-discharging-text: #fef3c7;
1253
+ --color-state-heat: #7f1d1d;
1047
1254
  --color-state-heat-data: #b73030;
1255
+ --color-state-heat-border: #ef4444;
1256
+ --color-state-heat-text: #fee2e2;
1257
+ --color-state-cool: #1e3a8a;
1048
1258
  --color-state-cool-data: #2c5ec0;
1259
+ --color-state-cool-border: #3b82f6;
1260
+ --color-state-cool-text: #dbeafe;
1261
+ --color-state-eco: #064e3b;
1049
1262
  --color-state-eco-data: #0b835e;
1263
+ --color-state-eco-border: #10b981;
1264
+ --color-state-eco-text: #d1fae5;
1265
+ --color-state-auto: #7c2d12;
1050
1266
  --color-state-auto-data: #bb5f27;
1267
+ --color-state-auto-border: #fb923c;
1268
+ --color-state-auto-text: #ffedd5;
1269
+ --color-state-circulate: #312e81;
1051
1270
  --color-state-circulate-data: #4f46e5;
1271
+ --color-state-circulate-border: #818cf8;
1272
+ --color-state-circulate-text: #e0e7ff;
1273
+ --color-state-on: #134e4a;
1052
1274
  --color-state-on-data: #138378;
1275
+ --color-state-on-border: #14b8a6;
1276
+ --color-state-on-text: #ccfbf1;
1277
+ --color-state-idle: #374151;
1053
1278
  --color-state-idle-data: #515968;
1279
+ --color-state-idle-border: #6b7280;
1280
+ --color-state-idle-text: #e5e7eb;
1281
+ --color-state-off: #374151;
1054
1282
  --color-state-off-data: #515968;
1283
+ --color-state-off-border: #6b7280;
1284
+ --color-state-off-text: #e5e7eb;
1285
+ --color-state-unknown: #1f2937;
1055
1286
  --color-state-unknown-data: #454d5b;
1287
+ --color-state-unknown-border: #6b7280;
1288
+ --color-state-unknown-text: #ffffff;
1289
+ --color-state-importing: #1e3a8a;
1056
1290
  --color-state-importing-data: #3f6fc2;
1291
+ --color-state-importing-border: #60a5fa;
1292
+ --color-state-importing-text: #dbeafe;
1293
+ --color-state-exporting: #78350f;
1057
1294
  --color-state-exporting-data: #b97a19;
1295
+ --color-state-exporting-border: #fbbf24;
1296
+ --color-state-exporting-text: #fef3c7;
1297
+ }
1298
+ :root {
1299
+ --theme-background-canvas: var(--color-background-canvas);
1300
+ --theme-background-ai: var(--color-background-ai);
1301
+ --theme-border-default: var(--color-border-default);
1302
+ --theme-border-muted: var(--color-border-muted);
1303
+ }
1304
+ .theme-dark {
1305
+ --theme-background-canvas: var(--color-background-canvas);
1306
+ --theme-background-ai: var(--color-background-ai);
1307
+ --theme-border-default: var(--color-border-default);
1308
+ --theme-border-muted: var(--color-border-muted);
1309
+ }
1310
+ @layer base {
1311
+ :root {
1312
+ --text-xs: 0.75rem;
1313
+ --text-sm: 0.875rem;
1314
+ --text-base: 1rem;
1315
+ --text-lg: 1rem;
1316
+ --text-xl: 1.125rem;
1317
+ --text-2xl: 1.25rem;
1318
+ --text-3xl: 1.5rem;
1319
+ --text-4xl: 1.875rem;
1320
+ --text-5xl: 2.25rem;
1321
+ --text-6xl: 3rem;
1322
+ --text-7xl: 3.5rem;
1323
+ --text-8xl: 4rem;
1324
+ --text-9xl: 4.5rem;
1325
+ --font-size-xs: 0.75rem;
1326
+ --font-size-sm: 0.875rem;
1327
+ --font-size-base: 1rem;
1328
+ --font-size-lg: 1rem;
1329
+ --font-size-xl: 1.125rem;
1330
+ --font-size-2xl: 1.25rem;
1331
+ --font-size-3xl: 1.5rem;
1332
+ --font-size-4xl: 1.875rem;
1333
+ --font-size-5xl: 2.25rem;
1334
+ --font-size-6xl: 3rem;
1335
+ --font-size-7xl: 3.5rem;
1336
+ --font-size-8xl: 4rem;
1337
+ --font-size-9xl: 4.5rem;
1338
+ }
1339
+ @media (min-width: 768px) {
1340
+ :root {
1341
+ --text-xs: 0.75rem;
1342
+ --text-sm: 0.875rem;
1343
+ --text-base: 1rem;
1344
+ --text-lg: 1.125rem;
1345
+ --text-xl: 1.25rem;
1346
+ --text-2xl: 1.5rem;
1347
+ --text-3xl: 1.875rem;
1348
+ --text-4xl: 2.25rem;
1349
+ --text-5xl: 3rem;
1350
+ --text-6xl: 3.75rem;
1351
+ --text-7xl: 4.5rem;
1352
+ --text-8xl: 6rem;
1353
+ --text-9xl: 8rem;
1354
+ --font-size-xs: 0.75rem;
1355
+ --font-size-sm: 0.875rem;
1356
+ --font-size-base: 1rem;
1357
+ --font-size-lg: 1.125rem;
1358
+ --font-size-xl: 1.25rem;
1359
+ --font-size-2xl: 1.5rem;
1360
+ --font-size-3xl: 1.875rem;
1361
+ --font-size-4xl: 2.25rem;
1362
+ --font-size-5xl: 3rem;
1363
+ --font-size-6xl: 3.75rem;
1364
+ --font-size-7xl: 4.5rem;
1365
+ --font-size-8xl: 6rem;
1366
+ --font-size-9xl: 8rem;
1367
+ }
1368
+ }
1058
1369
  }
1059
1370
  .theme-light {
1060
1371
  --color-background-body: #ffffff;
1061
1372
  --color-background-surface: #ffffff;
1062
- --color-background-muted: #f3f4f6;
1063
- --color-background-hover: #f3f4f6;
1064
- --color-background-selected: #e5e7eb;
1373
+ --color-background-muted: #f5f5f4;
1374
+ --color-background-hover: #fafafa;
1375
+ --color-background-selected: #e7e6e5;
1065
1376
  --color-background-modal: rgba(0, 0, 0, 0.15);
1066
1377
  --color-background-input: #ffffff;
1067
- --color-text-body: #333333;
1068
- --color-text-heading: #111827;
1069
- --color-text-muted: #4b5563;
1070
- --color-text-caption: #6b7280;
1071
- --color-text-subtle: #5f6873;
1072
- --color-text-placeholder: #9ca3af;
1073
- --color-text-disabled: #9ca3af;
1074
- --color-text-link-default: #444ae1;
1075
- --color-text-link-hover: #363ccb;
1378
+ --color-text-body: #2c2a26;
1379
+ --color-text-heading: #111111;
1380
+ --color-text-muted: #5d5b56;
1381
+ --color-text-caption: #7c7974;
1382
+ --color-text-subtle: #7c7974;
1383
+ --color-text-placeholder: #a09d98;
1384
+ --color-text-disabled: #d4d3d0;
1385
+ --color-text-link-default: #111111;
1386
+ --color-text-link-hover: #2c2a26;
1076
1387
  --color-text-onPrimary: #ffffff;
1077
- --color-border-default: #e5e7eb;
1078
- --color-border-focus: #111827;
1079
- --color-border-muted: #e5e7eb;
1080
- --color-border-input: #d1d5db;
1081
- --color-feedback-success-text: #065f46;
1082
- --color-feedback-success-background: #d1fae5;
1083
- --color-feedback-success-border: #10b981;
1084
- --color-feedback-error-text: #b91c1c;
1085
- --color-feedback-error-background: #fee2e2;
1086
- --color-feedback-error-border: #ef4444;
1087
- --color-feedback-warning-text: #92400e;
1088
- --color-feedback-warning-background: #fef3c7;
1089
- --color-feedback-warning-border: #f59e0b;
1090
- --color-feedback-info-text: #2563eb;
1091
- --color-feedback-info-background: #dbeafe;
1092
- --color-feedback-info-border: #93c5fd;
1093
- --color-action-brand: #444ae1;
1094
- --color-action-brand-hover: #363ccb;
1388
+ --color-border-default: #e7e6e5;
1389
+ --color-border-focus: #111111;
1390
+ --color-border-muted: #f5f5f4;
1391
+ --color-border-input: #d4d3d0;
1392
+ --color-feedback-success-text: #15452a;
1393
+ --color-feedback-success-background: #e4f3e9;
1394
+ --color-feedback-success-border: #278a4a;
1395
+ --color-feedback-error-text: #7a1212;
1396
+ --color-feedback-error-background: #fdecec;
1397
+ --color-feedback-error-border: #c42d2d;
1398
+ --color-feedback-warning-text: #7a4708;
1399
+ --color-feedback-warning-background: #fcefd9;
1400
+ --color-feedback-warning-border: #c88420;
1401
+ --color-feedback-info-text: #123862;
1402
+ --color-feedback-info-background: #e0eaf5;
1403
+ --color-feedback-info-border: #2d6cb8;
1404
+ --color-action-brand: #111111;
1405
+ --color-action-brand-hover: #2c2a26;
1095
1406
  --color-action-brand-text: #ffffff;
1096
- --color-action-default: #333333;
1097
- --color-action-default-hover: #4b5563;
1407
+ --color-action-default: #111111;
1408
+ --color-action-default-hover: #2c2a26;
1098
1409
  --color-action-default-text: #ffffff;
1099
- --color-skeleton-base: #e5e7eb;
1100
- --color-skeleton-highlight: #f3f4f6;
1101
- --color-skeleton-wave: rgba(255, 255, 255, 0.5);
1102
- color: #333333;
1410
+ --color-skeleton-base: #e7e6e5;
1411
+ --color-skeleton-highlight: #f5f5f4;
1412
+ --color-skeleton-wave: rgba(255, 255, 255, 0.6);
1413
+ color: #2c2a26;
1103
1414
  }
1104
1415
  @keyframes wave {
1105
1416
  0% {
@@ -3227,13 +3538,13 @@
3227
3538
  border-color: var(--color-action-brand);
3228
3539
  }
3229
3540
  .border-action-brand\/20 {
3230
- border-color: color-mix(in srgb, #444ae1 20%, transparent);
3541
+ border-color: color-mix(in srgb, #111111 20%, transparent);
3231
3542
  @supports (color: color-mix(in lab, red, red)) {
3232
3543
  border-color: color-mix(in oklab, var(--color-action-brand) 20%, transparent);
3233
3544
  }
3234
3545
  }
3235
3546
  .border-action-brand\/30 {
3236
- border-color: color-mix(in srgb, #444ae1 30%, transparent);
3547
+ border-color: color-mix(in srgb, #111111 30%, transparent);
3237
3548
  @supports (color: color-mix(in lab, red, red)) {
3238
3549
  border-color: color-mix(in oklab, var(--color-action-brand) 30%, transparent);
3239
3550
  }
@@ -3254,19 +3565,19 @@
3254
3565
  border-color: var(--color-border-default);
3255
3566
  }
3256
3567
  .border-border-default\/40 {
3257
- border-color: color-mix(in srgb, #e5e7eb 40%, transparent);
3568
+ border-color: color-mix(in srgb, #e7e6e5 40%, transparent);
3258
3569
  @supports (color: color-mix(in lab, red, red)) {
3259
3570
  border-color: color-mix(in oklab, var(--color-border-default) 40%, transparent);
3260
3571
  }
3261
3572
  }
3262
3573
  .border-border-default\/50 {
3263
- border-color: color-mix(in srgb, #e5e7eb 50%, transparent);
3574
+ border-color: color-mix(in srgb, #e7e6e5 50%, transparent);
3264
3575
  @supports (color: color-mix(in lab, red, red)) {
3265
3576
  border-color: color-mix(in oklab, var(--color-border-default) 50%, transparent);
3266
3577
  }
3267
3578
  }
3268
3579
  .border-border-default\/60 {
3269
- border-color: color-mix(in srgb, #e5e7eb 60%, transparent);
3580
+ border-color: color-mix(in srgb, #e7e6e5 60%, transparent);
3270
3581
  @supports (color: color-mix(in lab, red, red)) {
3271
3582
  border-color: color-mix(in oklab, var(--color-border-default) 60%, transparent);
3272
3583
  }
@@ -3278,7 +3589,7 @@
3278
3589
  border-color: var(--color-border-input);
3279
3590
  }
3280
3591
  .border-border-input\/20 {
3281
- border-color: color-mix(in srgb, #d1d5db 20%, transparent);
3592
+ border-color: color-mix(in srgb, #d4d3d0 20%, transparent);
3282
3593
  @supports (color: color-mix(in lab, red, red)) {
3283
3594
  border-color: color-mix(in oklab, var(--color-border-input) 20%, transparent);
3284
3595
  }
@@ -3287,13 +3598,13 @@
3287
3598
  border-color: var(--color-border-muted);
3288
3599
  }
3289
3600
  .border-border-muted\/30 {
3290
- border-color: color-mix(in srgb, #e5e7eb 30%, transparent);
3601
+ border-color: color-mix(in srgb, #f5f5f4 30%, transparent);
3291
3602
  @supports (color: color-mix(in lab, red, red)) {
3292
3603
  border-color: color-mix(in oklab, var(--color-border-muted) 30%, transparent);
3293
3604
  }
3294
3605
  }
3295
3606
  .border-border-muted\/50 {
3296
- border-color: color-mix(in srgb, #e5e7eb 50%, transparent);
3607
+ border-color: color-mix(in srgb, #f5f5f4 50%, transparent);
3297
3608
  @supports (color: color-mix(in lab, red, red)) {
3298
3609
  border-color: color-mix(in oklab, var(--color-border-muted) 50%, transparent);
3299
3610
  }
@@ -3302,7 +3613,7 @@
3302
3613
  border-color: var(--color-brand-primary);
3303
3614
  }
3304
3615
  .border-brand-primary\/20 {
3305
- border-color: color-mix(in srgb, #444ae1 20%, transparent);
3616
+ border-color: color-mix(in srgb, #111111 20%, transparent);
3306
3617
  @supports (color: color-mix(in lab, red, red)) {
3307
3618
  border-color: color-mix(in oklab, var(--color-brand-primary) 20%, transparent);
3308
3619
  }
@@ -3314,7 +3625,7 @@
3314
3625
  border-color: var(--color-feedback-error-border);
3315
3626
  }
3316
3627
  .border-feedback-error-border\/40 {
3317
- border-color: color-mix(in srgb, #ef4444 40%, transparent);
3628
+ border-color: color-mix(in srgb, #c42d2d 40%, transparent);
3318
3629
  @supports (color: color-mix(in lab, red, red)) {
3319
3630
  border-color: color-mix(in oklab, var(--color-feedback-error-border) 40%, transparent);
3320
3631
  }
@@ -3326,7 +3637,7 @@
3326
3637
  border-color: var(--color-feedback-info-border);
3327
3638
  }
3328
3639
  .border-feedback-info-border\/40 {
3329
- border-color: color-mix(in srgb, #93c5fd 40%, transparent);
3640
+ border-color: color-mix(in srgb, #2d6cb8 40%, transparent);
3330
3641
  @supports (color: color-mix(in lab, red, red)) {
3331
3642
  border-color: color-mix(in oklab, var(--color-feedback-info-border) 40%, transparent);
3332
3643
  }
@@ -3335,7 +3646,7 @@
3335
3646
  border-color: var(--color-feedback-success-border);
3336
3647
  }
3337
3648
  .border-feedback-success-border\/40 {
3338
- border-color: color-mix(in srgb, #10b981 40%, transparent);
3649
+ border-color: color-mix(in srgb, #278a4a 40%, transparent);
3339
3650
  @supports (color: color-mix(in lab, red, red)) {
3340
3651
  border-color: color-mix(in oklab, var(--color-feedback-success-border) 40%, transparent);
3341
3652
  }
@@ -3344,7 +3655,7 @@
3344
3655
  border-color: var(--color-feedback-warning-border);
3345
3656
  }
3346
3657
  .border-feedback-warning-border\/40 {
3347
- border-color: color-mix(in srgb, #f59e0b 40%, transparent);
3658
+ border-color: color-mix(in srgb, #c88420 40%, transparent);
3348
3659
  @supports (color: color-mix(in lab, red, red)) {
3349
3660
  border-color: color-mix(in oklab, var(--color-feedback-warning-border) 40%, transparent);
3350
3661
  }
@@ -3428,13 +3739,13 @@
3428
3739
  background-color: var(--color-action-brand);
3429
3740
  }
3430
3741
  .bg-action-brand\/5 {
3431
- background-color: color-mix(in srgb, #444ae1 5%, transparent);
3742
+ background-color: color-mix(in srgb, #111111 5%, transparent);
3432
3743
  @supports (color: color-mix(in lab, red, red)) {
3433
3744
  background-color: color-mix(in oklab, var(--color-action-brand) 5%, transparent);
3434
3745
  }
3435
3746
  }
3436
3747
  .bg-action-brand\/10 {
3437
- background-color: color-mix(in srgb, #444ae1 10%, transparent);
3748
+ background-color: color-mix(in srgb, #111111 10%, transparent);
3438
3749
  @supports (color: color-mix(in lab, red, red)) {
3439
3750
  background-color: color-mix(in oklab, var(--color-action-brand) 10%, transparent);
3440
3751
  }
@@ -3443,13 +3754,13 @@
3443
3754
  background-color: var(--color-action-default);
3444
3755
  }
3445
3756
  .bg-action-default\/5 {
3446
- background-color: color-mix(in srgb, #333333 5%, transparent);
3757
+ background-color: color-mix(in srgb, #111111 5%, transparent);
3447
3758
  @supports (color: color-mix(in lab, red, red)) {
3448
3759
  background-color: color-mix(in oklab, var(--color-action-default) 5%, transparent);
3449
3760
  }
3450
3761
  }
3451
3762
  .bg-action-default\/10 {
3452
- background-color: color-mix(in srgb, #333333 10%, transparent);
3763
+ background-color: color-mix(in srgb, #111111 10%, transparent);
3453
3764
  @supports (color: color-mix(in lab, red, red)) {
3454
3765
  background-color: color-mix(in oklab, var(--color-action-default) 10%, transparent);
3455
3766
  }
@@ -3460,6 +3771,12 @@
3460
3771
  .bg-background-body {
3461
3772
  background-color: var(--color-background-body);
3462
3773
  }
3774
+ .bg-background-canvas {
3775
+ background-color: var(--color-background-canvas);
3776
+ }
3777
+ .bg-background-canvas\! {
3778
+ background-color: var(--color-background-canvas) !important;
3779
+ }
3463
3780
  .bg-background-hover {
3464
3781
  background-color: var(--color-background-hover);
3465
3782
  }
@@ -3470,13 +3787,13 @@
3470
3787
  background-color: var(--color-background-muted);
3471
3788
  }
3472
3789
  .bg-background-muted\/30 {
3473
- background-color: color-mix(in srgb, #f3f4f6 30%, transparent);
3790
+ background-color: color-mix(in srgb, #f5f5f4 30%, transparent);
3474
3791
  @supports (color: color-mix(in lab, red, red)) {
3475
3792
  background-color: color-mix(in oklab, var(--color-background-muted) 30%, transparent);
3476
3793
  }
3477
3794
  }
3478
3795
  .bg-background-muted\/50 {
3479
- background-color: color-mix(in srgb, #f3f4f6 50%, transparent);
3796
+ background-color: color-mix(in srgb, #f5f5f4 50%, transparent);
3480
3797
  @supports (color: color-mix(in lab, red, red)) {
3481
3798
  background-color: color-mix(in oklab, var(--color-background-muted) 50%, transparent);
3482
3799
  }
@@ -3536,13 +3853,13 @@
3536
3853
  background-color: var(--color-brand-primary);
3537
3854
  }
3538
3855
  .bg-brand-primary\/10 {
3539
- background-color: color-mix(in srgb, #444ae1 10%, transparent);
3856
+ background-color: color-mix(in srgb, #111111 10%, transparent);
3540
3857
  @supports (color: color-mix(in lab, red, red)) {
3541
3858
  background-color: color-mix(in oklab, var(--color-brand-primary) 10%, transparent);
3542
3859
  }
3543
3860
  }
3544
3861
  .bg-brand-primary\/20 {
3545
- background-color: color-mix(in srgb, #444ae1 20%, transparent);
3862
+ background-color: color-mix(in srgb, #111111 20%, transparent);
3546
3863
  @supports (color: color-mix(in lab, red, red)) {
3547
3864
  background-color: color-mix(in oklab, var(--color-brand-primary) 20%, transparent);
3548
3865
  }
@@ -3554,7 +3871,7 @@
3554
3871
  background-color: var(--color-feedback-error-background);
3555
3872
  }
3556
3873
  .bg-feedback-error-background\/50 {
3557
- background-color: color-mix(in srgb, #fee2e2 50%, transparent);
3874
+ background-color: color-mix(in srgb, #fdecec 50%, transparent);
3558
3875
  @supports (color: color-mix(in lab, red, red)) {
3559
3876
  background-color: color-mix(in oklab, var(--color-feedback-error-background) 50%, transparent);
3560
3877
  }
@@ -3569,7 +3886,7 @@
3569
3886
  background-color: var(--color-feedback-info-background);
3570
3887
  }
3571
3888
  .bg-feedback-info-background\/20 {
3572
- background-color: color-mix(in srgb, #dbeafe 20%, transparent);
3889
+ background-color: color-mix(in srgb, #e0eaf5 20%, transparent);
3573
3890
  @supports (color: color-mix(in lab, red, red)) {
3574
3891
  background-color: color-mix(in oklab, var(--color-feedback-info-background) 20%, transparent);
3575
3892
  }
@@ -3605,7 +3922,7 @@
3605
3922
  background-color: var(--color-gray-100);
3606
3923
  }
3607
3924
  .bg-gray-100\/60 {
3608
- background-color: color-mix(in srgb, #f3f4f6 60%, transparent);
3925
+ background-color: color-mix(in srgb, #f5f5f4 60%, transparent);
3609
3926
  @supports (color: color-mix(in lab, red, red)) {
3610
3927
  background-color: color-mix(in oklab, var(--color-gray-100) 60%, transparent);
3611
3928
  }
@@ -3626,7 +3943,7 @@
3626
3943
  background-color: var(--color-green-500);
3627
3944
  }
3628
3945
  .bg-green-500\/20 {
3629
- background-color: color-mix(in srgb, oklch(0.627 0.194 130.331) 20%, transparent);
3946
+ background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 20%, transparent);
3630
3947
  @supports (color: color-mix(in lab, red, red)) {
3631
3948
  background-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
3632
3949
  }
@@ -3680,7 +3997,7 @@
3680
3997
  background-color: var(--color-red-500);
3681
3998
  }
3682
3999
  .bg-red-500\/20 {
3683
- background-color: color-mix(in srgb, oklch(0.637 0.237 25.331) 20%, transparent);
4000
+ background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
3684
4001
  @supports (color: color-mix(in lab, red, red)) {
3685
4002
  background-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
3686
4003
  }
@@ -3761,7 +4078,7 @@
3761
4078
  background-color: var(--color-yellow-500);
3762
4079
  }
3763
4080
  .bg-yellow-500\/20 {
3764
- background-color: color-mix(in srgb, oklch(0.795 0.184 86.047) 20%, transparent);
4081
+ background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 20%, transparent);
3765
4082
  @supports (color: color-mix(in lab, red, red)) {
3766
4083
  background-color: color-mix(in oklab, var(--color-yellow-500) 20%, transparent);
3767
4084
  }
@@ -4600,7 +4917,7 @@
4600
4917
  text-decoration-color: currentcolor;
4601
4918
  }
4602
4919
  .decoration-text-link-default\/30 {
4603
- text-decoration-color: color-mix(in srgb, #444ae1 30%, transparent);
4920
+ text-decoration-color: color-mix(in srgb, #111111 30%, transparent);
4604
4921
  @supports (color: color-mix(in lab, red, red)) {
4605
4922
  text-decoration-color: color-mix(in oklab, var(--color-text-link-default) 30%, transparent);
4606
4923
  }
@@ -4687,7 +5004,7 @@
4687
5004
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4688
5005
  }
4689
5006
  .shadow-\[inset_0_1px_0_0_theme\(colors\.gray\.600\)\] {
4690
- --tw-shadow: inset 0 1px 0 0 var(--tw-shadow-color, #4b5563);
5007
+ --tw-shadow: inset 0 1px 0 0 var(--tw-shadow-color, #5d5b56);
4691
5008
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4692
5009
  }
4693
5010
  .shadow-inner {
@@ -4981,7 +5298,7 @@
4981
5298
  .group-hover\:bg-action-brand\/50 {
4982
5299
  &:is(:where(.group):hover *) {
4983
5300
  @media (hover: hover) {
4984
- background-color: color-mix(in srgb, #444ae1 50%, transparent);
5301
+ background-color: color-mix(in srgb, #111111 50%, transparent);
4985
5302
  @supports (color: color-mix(in lab, red, red)) {
4986
5303
  background-color: color-mix(in oklab, var(--color-action-brand) 50%, transparent);
4987
5304
  }
@@ -5005,7 +5322,7 @@
5005
5322
  .group-hover\:bg-brand-primary\/15 {
5006
5323
  &:is(:where(.group):hover *) {
5007
5324
  @media (hover: hover) {
5008
- background-color: color-mix(in srgb, #444ae1 15%, transparent);
5325
+ background-color: color-mix(in srgb, #111111 15%, transparent);
5009
5326
  @supports (color: color-mix(in lab, red, red)) {
5010
5327
  background-color: color-mix(in oklab, var(--color-brand-primary) 15%, transparent);
5011
5328
  }
@@ -5015,7 +5332,7 @@
5015
5332
  .group-hover\:bg-brand-primary\/90 {
5016
5333
  &:is(:where(.group):hover *) {
5017
5334
  @media (hover: hover) {
5018
- background-color: color-mix(in srgb, #444ae1 90%, transparent);
5335
+ background-color: color-mix(in srgb, #111111 90%, transparent);
5019
5336
  @supports (color: color-mix(in lab, red, red)) {
5020
5337
  background-color: color-mix(in oklab, var(--color-brand-primary) 90%, transparent);
5021
5338
  }
@@ -5410,7 +5727,7 @@
5410
5727
  .hover\:bg-action-brand\/15 {
5411
5728
  &:hover {
5412
5729
  @media (hover: hover) {
5413
- background-color: color-mix(in srgb, #444ae1 15%, transparent);
5730
+ background-color: color-mix(in srgb, #111111 15%, transparent);
5414
5731
  @supports (color: color-mix(in lab, red, red)) {
5415
5732
  background-color: color-mix(in oklab, var(--color-action-brand) 15%, transparent);
5416
5733
  }
@@ -5420,7 +5737,7 @@
5420
5737
  .hover\:bg-action-brand\/90 {
5421
5738
  &:hover {
5422
5739
  @media (hover: hover) {
5423
- background-color: color-mix(in srgb, #444ae1 90%, transparent);
5740
+ background-color: color-mix(in srgb, #111111 90%, transparent);
5424
5741
  @supports (color: color-mix(in lab, red, red)) {
5425
5742
  background-color: color-mix(in oklab, var(--color-action-brand) 90%, transparent);
5426
5743
  }
@@ -5437,7 +5754,7 @@
5437
5754
  .hover\:bg-action-default\/90 {
5438
5755
  &:hover {
5439
5756
  @media (hover: hover) {
5440
- background-color: color-mix(in srgb, #333333 90%, transparent);
5757
+ background-color: color-mix(in srgb, #111111 90%, transparent);
5441
5758
  @supports (color: color-mix(in lab, red, red)) {
5442
5759
  background-color: color-mix(in oklab, var(--color-action-default) 90%, transparent);
5443
5760
  }
@@ -5513,7 +5830,7 @@
5513
5830
  .hover\:bg-brand-primary\/90 {
5514
5831
  &:hover {
5515
5832
  @media (hover: hover) {
5516
- background-color: color-mix(in srgb, #444ae1 90%, transparent);
5833
+ background-color: color-mix(in srgb, #111111 90%, transparent);
5517
5834
  @supports (color: color-mix(in lab, red, red)) {
5518
5835
  background-color: color-mix(in oklab, var(--color-brand-primary) 90%, transparent);
5519
5836
  }
@@ -5530,7 +5847,7 @@
5530
5847
  .hover\:bg-feedback-error-background\/50 {
5531
5848
  &:hover {
5532
5849
  @media (hover: hover) {
5533
- background-color: color-mix(in srgb, #fee2e2 50%, transparent);
5850
+ background-color: color-mix(in srgb, #fdecec 50%, transparent);
5534
5851
  @supports (color: color-mix(in lab, red, red)) {
5535
5852
  background-color: color-mix(in oklab, var(--color-feedback-error-background) 50%, transparent);
5536
5853
  }
@@ -5540,7 +5857,7 @@
5540
5857
  .hover\:bg-feedback-error-background\/80 {
5541
5858
  &:hover {
5542
5859
  @media (hover: hover) {
5543
- background-color: color-mix(in srgb, #fee2e2 80%, transparent);
5860
+ background-color: color-mix(in srgb, #fdecec 80%, transparent);
5544
5861
  @supports (color: color-mix(in lab, red, red)) {
5545
5862
  background-color: color-mix(in oklab, var(--color-feedback-error-background) 80%, transparent);
5546
5863
  }
@@ -5550,7 +5867,7 @@
5550
5867
  .hover\:bg-feedback-info-background\/80 {
5551
5868
  &:hover {
5552
5869
  @media (hover: hover) {
5553
- background-color: color-mix(in srgb, #dbeafe 80%, transparent);
5870
+ background-color: color-mix(in srgb, #e0eaf5 80%, transparent);
5554
5871
  @supports (color: color-mix(in lab, red, red)) {
5555
5872
  background-color: color-mix(in oklab, var(--color-feedback-info-background) 80%, transparent);
5556
5873
  }
@@ -5588,7 +5905,7 @@
5588
5905
  .hover\:bg-text-body\/5 {
5589
5906
  &:hover {
5590
5907
  @media (hover: hover) {
5591
- background-color: color-mix(in srgb, #333333 5%, transparent);
5908
+ background-color: color-mix(in srgb, #2c2a26 5%, transparent);
5592
5909
  @supports (color: color-mix(in lab, red, red)) {
5593
5910
  background-color: color-mix(in oklab, var(--color-text-body) 5%, transparent);
5594
5911
  }
@@ -5598,7 +5915,7 @@
5598
5915
  .hover\:bg-text-body\/\[0\.05\] {
5599
5916
  &:hover {
5600
5917
  @media (hover: hover) {
5601
- background-color: color-mix(in srgb, #333333 5%, transparent);
5918
+ background-color: color-mix(in srgb, #2c2a26 5%, transparent);
5602
5919
  @supports (color: color-mix(in lab, red, red)) {
5603
5920
  background-color: color-mix(in oklab, var(--color-text-body) 5%, transparent);
5604
5921
  }
@@ -5650,7 +5967,7 @@
5650
5967
  .hover\:text-action-brand\/90 {
5651
5968
  &:hover {
5652
5969
  @media (hover: hover) {
5653
- color: color-mix(in srgb, #444ae1 90%, transparent);
5970
+ color: color-mix(in srgb, #111111 90%, transparent);
5654
5971
  @supports (color: color-mix(in lab, red, red)) {
5655
5972
  color: color-mix(in oklab, var(--color-action-brand) 90%, transparent);
5656
5973
  }
@@ -5917,7 +6234,7 @@
5917
6234
  }
5918
6235
  .active\:bg-background-hover\/80 {
5919
6236
  &:active {
5920
- background-color: color-mix(in srgb, #f3f4f6 80%, transparent);
6237
+ background-color: color-mix(in srgb, #fafafa 80%, transparent);
5921
6238
  @supports (color: color-mix(in lab, red, red)) {
5922
6239
  background-color: color-mix(in oklab, var(--color-background-hover) 80%, transparent);
5923
6240
  }
@@ -5930,7 +6247,7 @@
5930
6247
  }
5931
6248
  .active\:bg-feedback-error-background\/80 {
5932
6249
  &:active {
5933
- background-color: color-mix(in srgb, #fee2e2 80%, transparent);
6250
+ background-color: color-mix(in srgb, #fdecec 80%, transparent);
5934
6251
  @supports (color: color-mix(in lab, red, red)) {
5935
6252
  background-color: color-mix(in oklab, var(--color-feedback-error-background) 80%, transparent);
5936
6253
  }
@@ -7328,7 +7645,7 @@
7328
7645
  }
7329
7646
  .dark\:bg-blue-900\/20 {
7330
7647
  @media (prefers-color-scheme: dark) {
7331
- background-color: color-mix(in srgb, oklch(0.368 0.146 254.128) 20%, transparent);
7648
+ background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 20%, transparent);
7332
7649
  @supports (color: color-mix(in lab, red, red)) {
7333
7650
  background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
7334
7651
  }
@@ -7351,7 +7668,7 @@
7351
7668
  }
7352
7669
  .dark\:bg-green-900\/20 {
7353
7670
  @media (prefers-color-scheme: dark) {
7354
- background-color: color-mix(in srgb, oklch(0.314 0.095 133.748) 20%, transparent);
7671
+ background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 20%, transparent);
7355
7672
  @supports (color: color-mix(in lab, red, red)) {
7356
7673
  background-color: color-mix(in oklab, var(--color-green-900) 20%, transparent);
7357
7674
  }
@@ -8105,13 +8422,13 @@
8105
8422
  }
8106
8423
  .\[\&_\[data-chip-id\]\:\:selection\]\:bg-action-brand\/20 {
8107
8424
  & [data-chip-id]::-moz-selection {
8108
- background-color: color-mix(in srgb, #444ae1 20%, transparent);
8425
+ background-color: color-mix(in srgb, #111111 20%, transparent);
8109
8426
  @supports (color: color-mix(in lab, red, red)) {
8110
8427
  background-color: color-mix(in oklab, var(--color-action-brand) 20%, transparent);
8111
8428
  }
8112
8429
  }
8113
8430
  & [data-chip-id]::selection {
8114
- background-color: color-mix(in srgb, #444ae1 20%, transparent);
8431
+ background-color: color-mix(in srgb, #111111 20%, transparent);
8115
8432
  @supports (color: color-mix(in lab, red, red)) {
8116
8433
  background-color: color-mix(in oklab, var(--color-action-brand) 20%, transparent);
8117
8434
  }