@matteoaliano/forest-ui 0.2.11 → 0.3.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.
package/dist/theme.js CHANGED
@@ -2,184 +2,296 @@
2
2
 
3
3
  var styles = require('@mui/material/styles');
4
4
 
5
- // src/theme/index.ts
5
+ // src/theme/buildTheme.ts
6
6
 
7
7
  // src/theme/tokens.ts
8
- var colors = {
9
- base: {
10
- white: "#ffffff",
11
- black: "#000000",
12
- transparent: "#ffffff00"
13
- },
14
- brand: {
15
- 25: "#fcfaff",
16
- 50: "#f9f5ff",
17
- 100: "#f4ebff",
18
- 200: "#e9d7fe",
19
- 300: "#d6bbfb",
20
- 400: "#b692f6",
21
- 500: "#9e77ed",
22
- 600: "#7f56d9",
23
- 700: "#6941c6",
24
- 800: "#53389e",
25
- 900: "#42307d",
26
- 950: "#2c1c5f"
27
- },
28
- gray: {
29
- 25: "#fcfcfd",
30
- 50: "#f9fafb",
31
- 100: "#f2f4f7",
32
- 200: "#eaecf0",
33
- 300: "#d0d5dd",
34
- 400: "#98a2b3",
35
- 500: "#667085",
36
- 600: "#475467",
37
- 700: "#344054",
38
- 800: "#182230",
39
- 900: "#101828",
40
- 950: "#0c111d"
41
- },
42
- error: {
43
- 25: "#fffbfa",
44
- 50: "#fef3f2",
45
- 100: "#fee4e2",
46
- 200: "#fecdca",
47
- 300: "#fda29b",
48
- 400: "#f97066",
49
- 500: "#f04438",
50
- 600: "#d92d20",
51
- 700: "#b42318",
52
- 800: "#912018",
53
- 900: "#7a271a",
54
- 950: "#55160c"
55
- },
56
- warning: {
57
- 25: "#fffcf5",
58
- 50: "#fffaeb",
59
- 100: "#fef0c7",
60
- 200: "#fedf89",
61
- 300: "#fec84b",
62
- 400: "#fdb022",
63
- 500: "#f79009",
64
- 600: "#dc6803",
65
- 700: "#b54708",
66
- 800: "#93370d",
67
- 900: "#7a2e0e",
68
- 950: "#4e1d09"
69
- },
70
- success: {
71
- 25: "#f6fef9",
72
- 50: "#ecfdf3",
73
- 100: "#dcfae6",
74
- 200: "#abefc6",
75
- 300: "#75e0a7",
76
- 400: "#47cd89",
77
- 500: "#17b26a",
78
- 600: "#079455",
79
- 700: "#067647",
80
- 800: "#085d3a",
81
- 900: "#074d31",
82
- 950: "#053321"
83
- },
84
- blue: {
85
- 25: "#f5faff",
86
- 50: "#eff8ff",
87
- 100: "#d1e9ff",
88
- 200: "#b2ddff",
89
- 300: "#84caff",
90
- 400: "#53b1fd",
91
- 500: "#2e90fa",
92
- 600: "#1570ef",
93
- 700: "#175cd3",
94
- 800: "#1849a9",
95
- 900: "#194185",
96
- 950: "#102a56"
97
- },
8
+ var violet = {
9
+ 25: "#faf8ff",
10
+ 50: "#f5f0ff",
11
+ 100: "#ebe0ff",
12
+ 200: "#d6c0ff",
13
+ 300: "#b090ff",
14
+ 400: "#9D5FFF",
15
+ 500: "#7c4de6",
16
+ 600: "#5b3acc",
17
+ 700: "#3a1aad",
18
+ 800: "#190a8a",
19
+ 900: "#000066",
20
+ 950: "#000033"
21
+ };
22
+ var magenta = {
23
+ 25: "#fff8fd",
24
+ 50: "#fff0fa",
25
+ 100: "#ffe0f5",
26
+ 200: "#ffc0eb",
27
+ 300: "#ff90d8",
28
+ 400: "#FF78F3",
29
+ 500: "#e650d4",
30
+ 600: "#cc28b5",
31
+ 700: "#a3008c",
32
+ 800: "#7a0066",
33
+ 900: "#520044",
34
+ 950: "#290022"
35
+ };
36
+ var gray = {
37
+ 25: "#fdfcfc",
38
+ 50: "#faf9f8",
39
+ 100: "#f5f3f1",
40
+ 200: "#e8e5e3",
41
+ 300: "#d8d8dc",
42
+ 400: "#a0a0a6",
43
+ 500: "#71717a",
44
+ 600: "#52525b",
45
+ 700: "#3f3f46",
46
+ 800: "#27272a",
47
+ 900: "#18181b",
48
+ 950: "#09090b"
49
+ };
50
+ var red = {
51
+ 25: "#fff8f7",
52
+ 50: "#fff0ee",
53
+ 100: "#ffe0dd",
54
+ 200: "#ffc0bb",
55
+ 300: "#ff9090",
56
+ 400: "#FF2821",
57
+ 500: "#e61a1a",
58
+ 600: "#cc1010",
59
+ 700: "#a30808",
60
+ 800: "#7a0000",
61
+ 900: "#520000",
62
+ 950: "#290000"
63
+ };
64
+ var info = {
65
+ 25: "#f5faff",
66
+ 50: "#eff8ff",
67
+ 100: "#d1e9ff",
68
+ 200: "#b2ddff",
69
+ 300: "#84caff",
70
+ 400: "#53b1fd",
71
+ 500: "#2e90fa",
72
+ 600: "#1570ef",
73
+ 700: "#175cd3",
74
+ 800: "#1849a9",
75
+ 900: "#194185",
76
+ 950: "#102a56"
77
+ };
78
+ var misc = {
98
79
  teal: {
80
+ 25: "#f6fefc",
99
81
  50: "#f0fdf9",
100
82
  100: "#ccfbef",
101
83
  200: "#99f6e0",
102
84
  300: "#5fe9d0",
103
85
  400: "#2ed3b7",
86
+ 500: "#15b79e",
104
87
  600: "#0e9384",
105
- 700: "#107569"
88
+ 700: "#107569",
89
+ 800: "#125d56",
90
+ 900: "#134e48",
91
+ 950: "#0a2926"
106
92
  },
107
93
  orange: {
94
+ 25: "#fefaf5",
95
+ 50: "#fef6ee",
108
96
  100: "#fdead7",
109
97
  200: "#f9dbaf",
110
98
  300: "#f7b27a",
111
99
  400: "#f38744",
100
+ 500: "#ef6820",
112
101
  600: "#e04f16",
113
- 700: "#b93815"
102
+ 700: "#b93815",
103
+ 800: "#932f19",
104
+ 900: "#772917",
105
+ 950: "#511c10"
114
106
  },
115
107
  purple: {
108
+ 25: "#fafaff",
109
+ 50: "#f4f3ff",
116
110
  100: "#ebe9fe",
117
111
  200: "#d9d6fe",
112
+ 300: "#bdb4fe",
113
+ 400: "#9b8afb",
114
+ 500: "#7a5af8",
118
115
  600: "#6938ef",
119
- 700: "#5925dc"
116
+ 700: "#5925dc",
117
+ 800: "#4a1fb8",
118
+ 900: "#3e1c96",
119
+ 950: "#27115f"
120
120
  },
121
121
  pink: {
122
+ 25: "#fef6fb",
123
+ 50: "#fdf2fa",
122
124
  100: "#fce7f6",
123
125
  200: "#fcceee",
126
+ 300: "#faa7e0",
124
127
  400: "#f670c7",
125
128
  500: "#ee46bc",
126
129
  600: "#dd2590",
127
- 700: "#c11574"
130
+ 700: "#c11574",
131
+ 800: "#9e165f",
132
+ 900: "#851651",
133
+ 950: "#4e0d30"
128
134
  },
129
135
  fuchsia: {
136
+ 25: "#fefaff",
137
+ 50: "#fdf4ff",
130
138
  100: "#fbe8ff",
131
139
  200: "#f6d0fe",
140
+ 300: "#eeaafd",
132
141
  400: "#e478fa",
133
142
  500: "#d444f1",
134
143
  600: "#ba24d5",
135
- 700: "#9f1ab1"
144
+ 700: "#9f1ab1",
145
+ 800: "#821890",
146
+ 900: "#6f1877",
147
+ 950: "#47104c"
136
148
  },
137
149
  orangeDark: {
150
+ 25: "#fff9f5",
151
+ 50: "#fff4ed",
138
152
  100: "#ffe6d5",
139
153
  200: "#ffd6ae",
154
+ 300: "#ff9c66",
140
155
  400: "#ff692e",
141
156
  500: "#ff4405",
142
157
  600: "#e62e05",
143
- 700: "#bc1b06"
158
+ 700: "#bc1b06",
159
+ 800: "#97180c",
160
+ 900: "#771a0d",
161
+ 950: "#57130a"
144
162
  },
145
163
  green: {
164
+ 25: "#f6fef9",
165
+ 50: "#edfcf2",
146
166
  100: "#d3f8df",
147
167
  200: "#aaf0c4",
168
+ 300: "#73e2a3",
169
+ 400: "#3ccb7f",
148
170
  500: "#16b364",
149
171
  600: "#099250",
150
- 700: "#087443"
172
+ 700: "#087443",
173
+ 800: "#095c37",
174
+ 900: "#084c2e",
175
+ 950: "#052e1c"
151
176
  },
152
177
  indigo: {
178
+ 25: "#f5f8ff",
179
+ 50: "#eef4ff",
153
180
  100: "#e0eaff",
154
181
  200: "#c7d7fe",
182
+ 300: "#a4bcfd",
183
+ 400: "#8098f9",
184
+ 500: "#6172f3",
155
185
  600: "#444ce7",
156
- 700: "#3538cd"
157
- },
158
- violet: {
159
- 100: "#ece9fe",
160
- 200: "#ddd6fe",
161
- 500: "#875bf7",
162
- 600: "#7839ee"
186
+ 700: "#3538cd",
187
+ 800: "#2d31a6",
188
+ 900: "#2d3282",
189
+ 950: "#1f235b"
163
190
  },
164
191
  rose: {
192
+ 25: "#fff5f6",
193
+ 50: "#fff1f3",
165
194
  100: "#ffe4e8",
166
195
  200: "#fecdd6",
196
+ 300: "#fea3b4",
167
197
  400: "#fd6f8e",
168
- 500: "#f63d68"
198
+ 500: "#f63d68",
199
+ 600: "#e31b54",
200
+ 700: "#c01048",
201
+ 800: "#a11043",
202
+ 900: "#89123e",
203
+ 950: "#510b24"
169
204
  },
170
205
  blueLight: {
206
+ 25: "#f5fbff",
207
+ 50: "#f0f9ff",
171
208
  100: "#e0f2fe",
172
209
  200: "#b9e6fe",
210
+ 300: "#7cd4fd",
173
211
  400: "#36bffa",
174
- 500: "#0ba5ec"
212
+ 500: "#0ba5ec",
213
+ 600: "#0086c9",
214
+ 700: "#026aa2",
215
+ 800: "#065986",
216
+ 900: "#0b4a6f",
217
+ 950: "#062c41"
175
218
  },
176
219
  cyan: {
220
+ 25: "#f5feff",
221
+ 50: "#ecfdff",
177
222
  100: "#cff9fe",
178
223
  200: "#a5f0fc",
224
+ 300: "#67e3f9",
225
+ 400: "#22ccee",
226
+ 500: "#06aed4",
179
227
  600: "#088ab2",
180
- 700: "#0e7090"
228
+ 700: "#0e7090",
229
+ 800: "#155b75",
230
+ 900: "#164c63",
231
+ 950: "#0d2d3a"
181
232
  }
182
233
  };
234
+ var radiusSharp = {
235
+ xxs: 1,
236
+ xs: 2,
237
+ sm: 3,
238
+ md: 4,
239
+ lg: 5,
240
+ xl: 6,
241
+ "2xl": 8,
242
+ "3xl": 10,
243
+ "4xl": 12
244
+ };
245
+ var colors = {
246
+ base: {
247
+ white: "#ffffff",
248
+ black: "#000000",
249
+ transparent: "#ffffff00"
250
+ },
251
+ error: {
252
+ 25: "#fffbfa",
253
+ 50: "#fef3f2",
254
+ 100: "#fee4e2",
255
+ 200: "#fecdca",
256
+ 300: "#fda29b",
257
+ 400: "#f97066",
258
+ 500: "#f04438",
259
+ 600: "#d92d20",
260
+ 700: "#b42318",
261
+ 800: "#912018",
262
+ 900: "#7a271a",
263
+ 950: "#55160c"
264
+ },
265
+ warning: {
266
+ 25: "#fffcf5",
267
+ 50: "#fffaeb",
268
+ 100: "#fef0c7",
269
+ 200: "#fedf89",
270
+ 300: "#fec84b",
271
+ 400: "#fdb022",
272
+ 500: "#f79009",
273
+ 600: "#dc6803",
274
+ 700: "#b54708",
275
+ 800: "#93370d",
276
+ 900: "#7a2e0e",
277
+ 950: "#4e1d09"
278
+ },
279
+ success: {
280
+ 25: "#f6fef9",
281
+ 50: "#ecfdf3",
282
+ 100: "#dcfae6",
283
+ 200: "#abefc6",
284
+ 300: "#75e0a7",
285
+ 400: "#47cd89",
286
+ 500: "#17b26a",
287
+ 600: "#079455",
288
+ 700: "#067647",
289
+ 800: "#085d3a",
290
+ 900: "#074d31",
291
+ 950: "#053321"
292
+ },
293
+ info
294
+ };
183
295
  var spacing = {
184
296
  none: 0,
185
297
  xxs: 2,
@@ -222,12 +334,12 @@ var shadows = {
222
334
  "3xl": "0px 32px 64px -12px #10182824"
223
335
  };
224
336
  var focusRings = {
225
- brand: "0px 0px 0px 4px #9e77ed3d",
226
- brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #9e77ed3d",
227
- brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #9e77ed3d",
228
- gray: "0px 0px 0px 4px #98a2b324",
229
- grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #98a2b324",
230
- grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #98a2b324",
337
+ brand: "0px 0px 0px 4px #7c4de63d",
338
+ brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #7c4de63d",
339
+ brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #7c4de63d",
340
+ gray: "0px 0px 0px 4px #a0a0a624",
341
+ grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #a0a0a624",
342
+ grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #a0a0a624",
231
343
  error: "0px 0px 0px 4px #f044383d",
232
344
  errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
233
345
  };
@@ -281,51 +393,51 @@ var widths = {
281
393
  "6xl": 1920
282
394
  };
283
395
  var text = {
284
- primary: colors.gray[900],
285
- secondary: colors.gray[700],
286
- secondaryHover: colors.gray[800],
287
- tertiary: colors.gray[600],
288
- tertiaryHover: colors.gray[700],
289
- quaternary: colors.gray[500],
290
- disabled: colors.gray[500],
291
- placeholder: colors.gray[500],
292
- placeholderSubtle: colors.gray[300],
396
+ primary: gray[900],
397
+ secondary: gray[700],
398
+ secondaryHover: gray[800],
399
+ tertiary: gray[600],
400
+ tertiaryHover: gray[700],
401
+ quaternary: gray[500],
402
+ disabled: gray[500],
403
+ placeholder: gray[500],
404
+ placeholderSubtle: gray[300],
293
405
  white: colors.base.white,
294
- brandPrimary: colors.brand[900],
295
- brandSecondary: colors.brand[700],
296
- brandTertiary: colors.brand[600],
297
- brandTertiaryAlt: colors.brand[600],
406
+ brandPrimary: violet[900],
407
+ brandSecondary: violet[700],
408
+ brandTertiary: violet[600],
409
+ brandTertiaryAlt: violet[600],
298
410
  primaryOnBrand: colors.base.white,
299
- secondaryOnBrand: colors.brand[200],
300
- tertiaryOnBrand: colors.brand[200],
301
- quaternaryOnBrand: colors.brand[300],
411
+ secondaryOnBrand: violet[200],
412
+ tertiaryOnBrand: violet[200],
413
+ quaternaryOnBrand: violet[300],
302
414
  errorPrimary: colors.error[600],
303
415
  warningPrimary: colors.warning[600],
304
416
  successPrimary: colors.success[600]
305
417
  };
306
418
  var bg = {
307
- primary: colors.gray[50],
308
- primaryAlt: colors.gray[50],
309
- primaryHover: colors.gray[100],
310
- primarySolid: colors.gray[950],
419
+ primary: gray[50],
420
+ primaryAlt: gray[50],
421
+ primaryHover: gray[100],
422
+ primarySolid: gray[950],
311
423
  secondary: colors.base.white,
312
424
  secondaryAlt: colors.base.white,
313
- secondarySubtle: colors.gray[25],
314
- secondaryHover: colors.gray[50],
315
- secondarySolid: colors.gray[600],
316
- tertiary: colors.gray[100],
317
- quaternary: colors.gray[200],
318
- active: colors.gray[200],
319
- disabled: colors.gray[100],
320
- disabledSubtle: colors.gray[50],
321
- overlay: colors.gray[950],
322
- brandPrimary: colors.brand[50],
323
- brandPrimaryAlt: colors.brand[50],
324
- brandSecondary: colors.brand[100],
325
- brandSolid: colors.brand[600],
326
- brandSolidHover: colors.brand[700],
327
- brandSection: colors.brand[800],
328
- brandSectionSubtle: colors.brand[700],
425
+ secondarySubtle: gray[25],
426
+ secondaryHover: gray[50],
427
+ secondarySolid: gray[600],
428
+ tertiary: gray[100],
429
+ quaternary: gray[200],
430
+ active: gray[200],
431
+ disabled: gray[100],
432
+ disabledSubtle: gray[50],
433
+ overlay: gray[950],
434
+ brandPrimary: violet[50],
435
+ brandPrimaryAlt: violet[50],
436
+ brandSecondary: violet[100],
437
+ brandSolid: violet[600],
438
+ brandSolidHover: violet[700],
439
+ brandSection: violet[800],
440
+ brandSectionSubtle: violet[700],
329
441
  errorPrimary: colors.error[50],
330
442
  errorSecondary: colors.error[100],
331
443
  errorSolid: colors.error[600],
@@ -337,22 +449,22 @@ var bg = {
337
449
  successSolid: colors.success[600]
338
450
  };
339
451
  var fg = {
340
- primary: colors.gray[900],
341
- secondary: colors.gray[700],
342
- secondaryHover: colors.gray[800],
343
- tertiary: colors.gray[600],
344
- tertiaryHover: colors.gray[700],
345
- quaternary: colors.gray[500],
346
- quaternaryHover: colors.gray[600],
347
- quinary: colors.gray[400],
348
- quinaryHover: colors.gray[500],
349
- senary: colors.gray[300],
452
+ primary: gray[900],
453
+ secondary: gray[700],
454
+ secondaryHover: gray[800],
455
+ tertiary: gray[600],
456
+ tertiaryHover: gray[700],
457
+ quaternary: gray[500],
458
+ quaternaryHover: gray[600],
459
+ quinary: gray[400],
460
+ quinaryHover: gray[500],
461
+ senary: gray[300],
350
462
  white: colors.base.white,
351
- disabled: colors.gray[400],
352
- disabledSubtle: colors.gray[300],
353
- brandPrimary: colors.brand[600],
354
- brandPrimaryAlt: colors.brand[600],
355
- brandSecondary: colors.brand[500],
463
+ disabled: gray[400],
464
+ disabledSubtle: gray[300],
465
+ brandPrimary: violet[600],
466
+ brandPrimaryAlt: violet[600],
467
+ brandSecondary: violet[500],
356
468
  errorPrimary: colors.error[600],
357
469
  errorSecondary: colors.error[500],
358
470
  warningPrimary: colors.warning[600],
@@ -361,51 +473,51 @@ var fg = {
361
473
  successSecondary: colors.success[500]
362
474
  };
363
475
  var border = {
364
- primary: colors.gray[300],
365
- secondary: colors.gray[200],
366
- tertiary: colors.gray[100],
367
- disabled: colors.gray[300],
368
- disabledSubtle: colors.gray[200],
369
- brand: colors.brand[300],
370
- brandSolid: colors.brand[600],
371
- brandSolidAlt: colors.brand[600],
476
+ primary: gray[300],
477
+ secondary: gray[200],
478
+ tertiary: gray[100],
479
+ disabled: gray[300],
480
+ disabledSubtle: gray[200],
481
+ brand: violet[300],
482
+ brandSolid: violet[600],
483
+ brandSolidAlt: violet[600],
372
484
  error: colors.error[300],
373
485
  errorSolid: colors.error[600]
374
486
  };
375
487
  var buttonColors = {
376
488
  primary: {
377
- bg: colors.brand[600],
378
- bgHover: colors.brand[700],
489
+ bg: violet[600],
490
+ bgHover: violet[700],
379
491
  fg: colors.base.white,
380
492
  fgHover: colors.base.white,
381
- border: colors.brand[600],
382
- borderHover: colors.brand[700]
493
+ border: violet[600],
494
+ borderHover: violet[700]
383
495
  },
384
496
  secondary: {
385
497
  bg: colors.base.white,
386
- bgHover: colors.gray[50],
387
- fg: colors.gray[700],
388
- fgHover: colors.gray[800],
389
- border: colors.gray[300],
390
- borderHover: colors.gray[300]
498
+ bgHover: gray[50],
499
+ fg: gray[700],
500
+ fgHover: gray[800],
501
+ border: gray[300],
502
+ borderHover: gray[300]
391
503
  },
392
504
  secondaryColor: {
393
505
  bg: colors.base.white,
394
- bgHover: colors.brand[50],
395
- fg: colors.brand[700],
396
- fgHover: colors.brand[800],
397
- border: colors.brand[300],
398
- borderHover: colors.brand[300]
506
+ bgHover: violet[50],
507
+ fg: violet[700],
508
+ fgHover: violet[800],
509
+ border: violet[300],
510
+ borderHover: violet[300]
399
511
  },
400
512
  tertiary: {
401
- fg: colors.gray[600],
402
- fgHover: colors.gray[700],
403
- bgHover: colors.gray[50]
513
+ fg: gray[600],
514
+ fgHover: gray[700],
515
+ bgHover: gray[50]
404
516
  },
405
517
  tertiaryColor: {
406
- fg: colors.brand[700],
407
- fgHover: colors.brand[800],
408
- bgHover: colors.brand[50]
518
+ fg: violet[700],
519
+ fgHover: violet[800],
520
+ bgHover: violet[50]
409
521
  },
410
522
  primaryError: {
411
523
  bg: colors.error[600],
@@ -430,27 +542,27 @@ var buttonColors = {
430
542
  }
431
543
  };
432
544
  var avatarColors = {
433
- bg: colors.gray[100],
545
+ bg: gray[100],
434
546
  contrastBorder: "#00000014",
435
547
  profilePhotoBorder: colors.base.white,
436
- focusBorder: "#98a2b324"
548
+ focusBorder: "#a0a0a624"
437
549
  };
438
550
  var breadcrumbColors = {
439
- fg: colors.gray[600],
440
- fgHover: colors.gray[700],
441
- bgHover: colors.gray[50],
442
- brandBgHover: colors.brand[50],
443
- brandFgHover: colors.brand[700],
444
- iconFg: colors.gray[500],
445
- iconFgHover: colors.gray[700],
446
- brandIconFgHover: colors.brand[700]
551
+ fg: gray[600],
552
+ fgHover: gray[700],
553
+ bgHover: gray[50],
554
+ brandBgHover: violet[50],
555
+ brandFgHover: violet[700],
556
+ iconFg: gray[500],
557
+ iconFgHover: gray[700],
558
+ brandIconFgHover: violet[700]
447
559
  };
448
560
  var iconColors = {
449
- fgBrand: colors.brand[600],
450
- fgBrandOnBrand: colors.brand[200],
451
- featuredModernBorder: colors.gray[200],
452
- featuredLightFgBrand: colors.brand[600],
453
- featuredLightFgGray: colors.gray[500],
561
+ fgBrand: violet[600],
562
+ fgBrandOnBrand: violet[200],
563
+ featuredModernBorder: gray[200],
564
+ featuredLightFgBrand: violet[600],
565
+ featuredLightFgGray: gray[500],
454
566
  featuredLightFgError: colors.error[600],
455
567
  featuredLightFgWarning: colors.warning[600],
456
568
  featuredLightFgSuccess: colors.success[600],
@@ -461,42 +573,42 @@ var iconColors = {
461
573
  featuredDarkFgSuccess: colors.base.white
462
574
  };
463
575
  var navColors = {
464
- itemIconFg: colors.gray[500],
465
- itemIconFgActive: colors.gray[700],
466
- itemButtonIconFg: colors.gray[500],
467
- itemButtonIconFgActive: colors.gray[700]
576
+ itemIconFg: gray[500],
577
+ itemIconFgActive: gray[700],
578
+ itemButtonIconFg: gray[500],
579
+ itemButtonIconFgActive: gray[700]
468
580
  };
469
581
  var sliderColors = {
470
- handleBorder: colors.brand[600],
582
+ handleBorder: violet[600],
471
583
  handleBg: colors.base.white
472
584
  };
473
585
  var toggleColors = {
474
- buttonFgDisabled: colors.gray[50]
586
+ buttonFgDisabled: gray[50]
475
587
  };
476
588
  var chartColors = {
477
- axisFg: colors.gray[100],
478
- gridlineFg: colors.gray[100],
479
- labelFg: colors.gray[600],
480
- labelFgEmphasis: colors.gray[700],
589
+ axisFg: gray[100],
590
+ gridlineFg: gray[100],
591
+ labelFg: gray[600],
592
+ labelFgEmphasis: gray[700],
481
593
  bg: colors.base.white,
482
- bgAlt: colors.gray[50],
483
- tooltipBg: colors.gray[950],
594
+ bgAlt: gray[50],
595
+ tooltipBg: gray[950],
484
596
  tooltipFg: colors.base.white,
485
- crosshairFg: colors.gray[500],
597
+ crosshairFg: gray[500],
486
598
  legendFg: text.tertiary,
487
599
  series: [
488
- { fg: colors.violet[500], fgHover: colors.violet[600], bg: colors.violet[100], bgHover: colors.violet[200] },
489
- { fg: colors.orangeDark[400], fgHover: colors.orangeDark[500], bg: colors.orangeDark[100], bgHover: colors.orangeDark[200] },
490
- { fg: colors.teal[300], fgHover: colors.teal[400], bg: colors.teal[50], bgHover: colors.teal[100] },
600
+ { fg: misc.purple[500], fgHover: misc.purple[600], bg: misc.purple[100], bgHover: misc.purple[200] },
601
+ { fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
602
+ { fg: misc.teal[300], fgHover: misc.teal[400], bg: misc.teal[50], bgHover: misc.teal[100] },
491
603
  { fg: colors.warning[400], fgHover: colors.warning[500], bg: colors.warning[100], bgHover: colors.warning[200] },
492
- { fg: colors.rose[400], fgHover: colors.rose[500], bg: colors.rose[100], bgHover: colors.rose[200] },
493
- { fg: colors.blueLight[400], fgHover: colors.blueLight[500], bg: colors.blueLight[100], bgHover: colors.blueLight[200] },
494
- { fg: colors.orange[300], fgHover: colors.orange[400], bg: colors.orange[100], bgHover: colors.orange[200] },
495
- { fg: colors.cyan[600], fgHover: colors.cyan[700], bg: colors.cyan[100], bgHover: colors.cyan[200] },
496
- { fg: colors.green[500], fgHover: colors.green[600], bg: colors.green[100], bgHover: colors.green[200] },
497
- { fg: colors.pink[400], fgHover: colors.pink[500], bg: colors.pink[100], bgHover: colors.pink[200] },
498
- { fg: colors.fuchsia[400], fgHover: colors.fuchsia[500], bg: colors.fuchsia[100], bgHover: colors.fuchsia[200] },
499
- { fg: colors.teal[600], fgHover: colors.teal[700], bg: colors.teal[100], bgHover: colors.teal[200] }
604
+ { fg: misc.rose[400], fgHover: misc.rose[500], bg: misc.rose[100], bgHover: misc.rose[200] },
605
+ { fg: misc.blueLight[400], fgHover: misc.blueLight[500], bg: misc.blueLight[100], bgHover: misc.blueLight[200] },
606
+ { fg: misc.orange[300], fgHover: misc.orange[400], bg: misc.orange[100], bgHover: misc.orange[200] },
607
+ { fg: misc.cyan[600], fgHover: misc.cyan[700], bg: misc.cyan[100], bgHover: misc.cyan[200] },
608
+ { fg: misc.green[500], fgHover: misc.green[600], bg: misc.green[100], bgHover: misc.green[200] },
609
+ { fg: misc.pink[400], fgHover: misc.pink[500], bg: misc.pink[100], bgHover: misc.pink[200] },
610
+ { fg: misc.fuchsia[400], fgHover: misc.fuchsia[500], bg: misc.fuchsia[100], bgHover: misc.fuchsia[200] },
611
+ { fg: misc.teal[600], fgHover: misc.teal[700], bg: misc.teal[100], bgHover: misc.teal[200] }
500
612
  ]
501
613
  };
502
614
  var alpha = {
@@ -529,60 +641,60 @@ var alpha = {
529
641
  // src/theme/palette.ts
530
642
  function buildPalette(tokens) {
531
643
  var _a;
532
- const { colors: colors3, text: text3, bg: bg3, fg: fg3, border: border3 } = tokens;
644
+ const { colors: colors5, text: text5, bg: bg5, fg: fg5, border: border5 } = tokens;
533
645
  return {
534
646
  primary: {
535
- main: colors3.brand[600],
536
- light: colors3.brand[400],
537
- dark: colors3.brand[700],
538
- contrastText: colors3.base.white
647
+ main: violet[600],
648
+ light: violet[400],
649
+ dark: violet[700],
650
+ contrastText: tokens.colors.base.white
539
651
  },
540
652
  secondary: {
541
- main: colors3.gray[600],
542
- light: colors3.gray[400],
543
- dark: colors3.gray[700],
544
- contrastText: colors3.base.white
653
+ main: gray[600],
654
+ light: gray[400],
655
+ dark: gray[700],
656
+ contrastText: tokens.colors.base.white
545
657
  },
546
658
  error: {
547
- main: colors3.error[600],
548
- light: colors3.error[300],
549
- dark: colors3.error[700],
550
- contrastText: colors3.base.white
659
+ main: colors5.error[600],
660
+ light: colors5.error[300],
661
+ dark: colors5.error[700],
662
+ contrastText: colors5.base.white
551
663
  },
552
664
  warning: {
553
- main: colors3.warning[600],
554
- light: colors3.warning[300],
555
- dark: colors3.warning[700],
556
- contrastText: colors3.base.white
665
+ main: colors5.warning[600],
666
+ light: colors5.warning[300],
667
+ dark: colors5.warning[700],
668
+ contrastText: colors5.base.white
557
669
  },
558
670
  success: {
559
- main: colors3.success[600],
560
- light: colors3.success[300],
561
- dark: colors3.success[700],
562
- contrastText: colors3.base.white
671
+ main: colors5.success[600],
672
+ light: colors5.success[300],
673
+ dark: colors5.success[700],
674
+ contrastText: colors5.base.white
563
675
  },
564
676
  info: {
565
- main: colors3.blue[600],
566
- light: colors3.blue[300],
567
- dark: colors3.blue[700],
568
- contrastText: colors3.base.white
677
+ main: tokens.colors.info[600],
678
+ light: tokens.colors.info[300],
679
+ dark: tokens.colors.info[700],
680
+ contrastText: tokens.colors.base.white
569
681
  },
570
682
  background: {
571
- default: bg3.primary,
572
- paper: bg3.secondary
683
+ default: bg5.primary,
684
+ paper: bg5.secondary
573
685
  },
574
686
  text: {
575
- primary: text3.primary,
576
- secondary: text3.secondary,
577
- disabled: text3.disabled
687
+ primary: text5.primary,
688
+ secondary: text5.secondary,
689
+ disabled: text5.disabled
578
690
  },
579
- divider: border3.secondary,
691
+ divider: border5.secondary,
580
692
  action: {
581
- active: fg3.tertiary,
582
- hover: bg3.primaryHover,
583
- selected: bg3.brandPrimary,
584
- disabled: fg3.disabled,
585
- disabledBackground: bg3.disabled
693
+ active: fg5.tertiary,
694
+ hover: bg5.primaryHover,
695
+ selected: bg5.brandPrimary,
696
+ disabled: fg5.disabled,
697
+ disabledBackground: bg5.disabled
586
698
  },
587
699
  chart: (_a = tokens.chartColors) != null ? _a : chartColors
588
700
  };
@@ -686,18 +798,78 @@ var typography = buildTypography({
686
798
  fontWeight
687
799
  });
688
800
 
801
+ // src/theme/shadows.ts
802
+ function buildShadows(tokens) {
803
+ const tokenShadows = tokens.shadows;
804
+ return [
805
+ "none",
806
+ // 0
807
+ tokenShadows.xs,
808
+ // 1
809
+ tokenShadows.sm,
810
+ // 2
811
+ tokenShadows.sm,
812
+ // 3
813
+ tokenShadows.md,
814
+ // 4
815
+ tokenShadows.md,
816
+ // 5
817
+ tokenShadows.md,
818
+ // 6
819
+ tokenShadows.lg,
820
+ // 7
821
+ tokenShadows.lg,
822
+ // 8
823
+ tokenShadows.lg,
824
+ // 9
825
+ tokenShadows.xl,
826
+ // 10
827
+ tokenShadows.xl,
828
+ // 11
829
+ tokenShadows.xl,
830
+ // 12
831
+ tokenShadows["2xl"],
832
+ // 13
833
+ tokenShadows["2xl"],
834
+ // 14
835
+ tokenShadows["2xl"],
836
+ // 15
837
+ tokenShadows["3xl"],
838
+ // 16
839
+ tokenShadows["3xl"],
840
+ // 17
841
+ tokenShadows["3xl"],
842
+ // 18
843
+ tokenShadows["3xl"],
844
+ // 19
845
+ tokenShadows["3xl"],
846
+ // 20
847
+ tokenShadows["3xl"],
848
+ // 21
849
+ tokenShadows["3xl"],
850
+ // 22
851
+ tokenShadows["3xl"],
852
+ // 23
853
+ tokenShadows["3xl"]
854
+ // 24
855
+ ];
856
+ }
857
+ var shadows2 = buildShadows({
858
+ shadows
859
+ });
860
+
689
861
  // src/theme/components.ts
690
862
  function buildComponents(tokens) {
691
863
  const {
692
- colors: colors3,
693
- radius: radius3,
694
- focusRings: focusRings3,
864
+ colors: colors5,
865
+ radius: radius5,
866
+ focusRings: focusRings5,
695
867
  shadows: tokenShadows,
696
- text: text3,
697
- bg: bg3,
698
- fg: fg3,
699
- border: border3,
700
- buttonColors: buttonColors3
868
+ text: text5,
869
+ bg: bg5,
870
+ fg: fg5,
871
+ border: border5,
872
+ buttonColors: buttonColors5
701
873
  } = tokens;
702
874
  return {
703
875
  // ─── Button ─────────────────────────────────────────────────────
@@ -707,7 +879,7 @@ function buildComponents(tokens) {
707
879
  },
708
880
  styleOverrides: {
709
881
  root: {
710
- borderRadius: radius3.md,
882
+ borderRadius: radius5.md,
711
883
  fontWeight: 600,
712
884
  boxShadow: tokenShadows.xs,
713
885
  height: 32,
@@ -715,36 +887,36 @@ function buildComponents(tokens) {
715
887
  fontSize: 14,
716
888
  lineHeight: "20px",
717
889
  "&:focus-visible": {
718
- boxShadow: focusRings3.brandShadowXs
890
+ boxShadow: focusRings5.brandShadowXs
719
891
  }
720
892
  },
721
893
  containedPrimary: {
722
- backgroundColor: buttonColors3.primary.bg,
894
+ backgroundColor: buttonColors5.primary.bg,
723
895
  "&:hover": {
724
- backgroundColor: buttonColors3.primary.bgHover
896
+ backgroundColor: buttonColors5.primary.bgHover
725
897
  }
726
898
  },
727
899
  outlinedPrimary: {
728
- borderColor: buttonColors3.secondaryColor.border,
729
- color: buttonColors3.secondaryColor.fg,
900
+ borderColor: buttonColors5.secondaryColor.border,
901
+ color: buttonColors5.secondaryColor.fg,
730
902
  "&:hover": {
731
- backgroundColor: buttonColors3.secondaryColor.bgHover,
732
- borderColor: buttonColors3.secondaryColor.borderHover
903
+ backgroundColor: buttonColors5.secondaryColor.bgHover,
904
+ borderColor: buttonColors5.secondaryColor.borderHover
733
905
  }
734
906
  },
735
907
  outlinedSecondary: {
736
- borderColor: buttonColors3.secondary.border,
908
+ borderColor: buttonColors5.secondary.border,
737
909
  "&:hover": {
738
- borderColor: buttonColors3.secondary.borderHover
910
+ borderColor: buttonColors5.secondary.borderHover
739
911
  }
740
912
  },
741
913
  text: {
742
914
  boxShadow: "none"
743
915
  },
744
916
  textPrimary: {
745
- color: buttonColors3.tertiaryColor.fg,
917
+ color: buttonColors5.tertiaryColor.fg,
746
918
  "&:hover": {
747
- backgroundColor: buttonColors3.tertiaryColor.bgHover
919
+ backgroundColor: buttonColors5.tertiaryColor.bgHover
748
920
  }
749
921
  }
750
922
  }
@@ -756,11 +928,11 @@ function buildComponents(tokens) {
756
928
  },
757
929
  styleOverrides: {
758
930
  root: {
759
- borderRadius: radius3.md
931
+ borderRadius: radius5.md
760
932
  },
761
933
  grouped: {
762
934
  "&:not(:last-of-type)": {
763
- borderRight: `1px solid ${buttonColors3.primary.borderHover}`
935
+ borderRight: `1px solid ${buttonColors5.primary.borderHover}`
764
936
  }
765
937
  }
766
938
  }
@@ -774,13 +946,13 @@ function buildComponents(tokens) {
774
946
  boxShadow: tokenShadows.lg
775
947
  },
776
948
  "&:focus-visible": {
777
- boxShadow: focusRings3.brandShadowSm
949
+ boxShadow: focusRings5.brandShadowSm
778
950
  }
779
951
  },
780
952
  primary: {
781
- backgroundColor: buttonColors3.primary.bg,
953
+ backgroundColor: buttonColors5.primary.bg,
782
954
  "&:hover": {
783
- backgroundColor: buttonColors3.primary.bgHover
955
+ backgroundColor: buttonColors5.primary.bgHover
784
956
  }
785
957
  }
786
958
  }
@@ -795,8 +967,8 @@ function buildComponents(tokens) {
795
967
  styleOverrides: {
796
968
  input: {
797
969
  "&::placeholder": {
798
- color: text3.placeholder,
799
- WebkitTextFillColor: text3.placeholder,
970
+ color: text5.placeholder,
971
+ WebkitTextFillColor: text5.placeholder,
800
972
  fontWeight: 400,
801
973
  opacity: 1
802
974
  }
@@ -806,26 +978,26 @@ function buildComponents(tokens) {
806
978
  MuiOutlinedInput: {
807
979
  styleOverrides: {
808
980
  root: {
809
- borderRadius: radius3.md,
981
+ borderRadius: radius5.md,
810
982
  boxShadow: tokenShadows.xs,
811
983
  "&:hover .MuiOutlinedInput-notchedOutline": {
812
- borderColor: border3.brand
984
+ borderColor: border5.brand
813
985
  },
814
986
  "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
815
- borderColor: border3.brandSolid,
987
+ borderColor: border5.brandSolid,
816
988
  borderWidth: 1,
817
989
  boxShadow: "none"
818
990
  },
819
991
  "&.Mui-error .MuiOutlinedInput-notchedOutline": {
820
- borderColor: border3.error
992
+ borderColor: border5.error
821
993
  },
822
994
  "&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline": {
823
- borderColor: border3.errorSolid,
995
+ borderColor: border5.errorSolid,
824
996
  boxShadow: "none"
825
997
  }
826
998
  },
827
999
  notchedOutline: {
828
- borderColor: border3.primary
1000
+ borderColor: border5.primary
829
1001
  },
830
1002
  input: {
831
1003
  padding: "6px 12px",
@@ -837,12 +1009,12 @@ function buildComponents(tokens) {
837
1009
  MuiFormLabel: {
838
1010
  styleOverrides: {
839
1011
  root: {
840
- color: text3.placeholder,
1012
+ color: text5.placeholder,
841
1013
  "&.Mui-focused": {
842
- color: text3.placeholder
1014
+ color: text5.placeholder
843
1015
  },
844
1016
  "&.Mui-error": {
845
- color: text3.errorPrimary
1017
+ color: text5.errorPrimary
846
1018
  }
847
1019
  }
848
1020
  }
@@ -852,12 +1024,12 @@ function buildComponents(tokens) {
852
1024
  root: {
853
1025
  fontSize: 14,
854
1026
  fontWeight: 500,
855
- color: text3.placeholder,
1027
+ color: text5.placeholder,
856
1028
  "&.Mui-focused": {
857
- color: text3.placeholder
1029
+ color: text5.placeholder
858
1030
  },
859
1031
  "&.Mui-error": {
860
- color: text3.errorPrimary
1032
+ color: text5.errorPrimary
861
1033
  }
862
1034
  },
863
1035
  outlined: {
@@ -876,7 +1048,7 @@ function buildComponents(tokens) {
876
1048
  marginTop: 6,
877
1049
  marginLeft: 0,
878
1050
  "&.Mui-error": {
879
- color: text3.errorPrimary
1051
+ color: text5.errorPrimary
880
1052
  }
881
1053
  }
882
1054
  }
@@ -906,18 +1078,18 @@ function buildComponents(tokens) {
906
1078
  }
907
1079
  },
908
1080
  icon: {
909
- color: text3.placeholder
1081
+ color: text5.placeholder
910
1082
  }
911
1083
  }
912
1084
  },
913
1085
  MuiMenuItem: {
914
1086
  styleOverrides: {
915
1087
  root: {
916
- borderRadius: radius3.md,
1088
+ borderRadius: radius5.md,
917
1089
  padding: "6px 8px",
918
1090
  gap: 4,
919
1091
  "&:hover": {
920
- backgroundColor: bg3.primaryHover
1092
+ backgroundColor: bg5.primaryHover
921
1093
  }
922
1094
  }
923
1095
  }
@@ -926,9 +1098,9 @@ function buildComponents(tokens) {
926
1098
  MuiAutocomplete: {
927
1099
  styleOverrides: {
928
1100
  paper: {
929
- borderRadius: radius3.md,
1101
+ borderRadius: radius5.md,
930
1102
  boxShadow: tokenShadows.lg,
931
- border: `1px solid ${border3.secondary}`,
1103
+ border: `1px solid ${border5.secondary}`,
932
1104
  marginTop: 4
933
1105
  },
934
1106
  inputRoot: {
@@ -945,10 +1117,10 @@ function buildComponents(tokens) {
945
1117
  lineHeight: "20px",
946
1118
  padding: "6px 12px",
947
1119
  "&.Mui-focused": {
948
- backgroundColor: bg3.primaryHover
1120
+ backgroundColor: bg5.primaryHover
949
1121
  },
950
1122
  '&[aria-selected="true"]': {
951
- backgroundColor: bg3.brandPrimary
1123
+ backgroundColor: bg5.brandPrimary
952
1124
  }
953
1125
  },
954
1126
  listbox: {
@@ -963,28 +1135,28 @@ function buildComponents(tokens) {
963
1135
  },
964
1136
  styleOverrides: {
965
1137
  root: {
966
- color: border3.primary,
967
- borderRadius: radius3.xs,
1138
+ color: border5.primary,
1139
+ borderRadius: radius5.xs,
968
1140
  padding: 0,
969
1141
  width: 20,
970
1142
  height: 20,
971
1143
  "&:hover": {
972
1144
  backgroundColor: "transparent",
973
- color: fg3.brandPrimary
1145
+ color: fg5.brandPrimary
974
1146
  },
975
1147
  "&.Mui-checked": {
976
- color: fg3.brandPrimary
1148
+ color: fg5.brandPrimary
977
1149
  },
978
1150
  "&.Mui-checked:hover": {
979
- color: colors3.brand[700]
1151
+ color: violet[700]
980
1152
  },
981
1153
  "&.Mui-focusVisible": {
982
1154
  outline: "none",
983
- boxShadow: focusRings3.brand,
984
- borderRadius: radius3.xs
1155
+ boxShadow: focusRings5.brand,
1156
+ borderRadius: radius5.xs
985
1157
  },
986
1158
  "&.Mui-disabled": {
987
- color: border3.primary
1159
+ color: border5.primary
988
1160
  }
989
1161
  }
990
1162
  }
@@ -996,25 +1168,25 @@ function buildComponents(tokens) {
996
1168
  },
997
1169
  styleOverrides: {
998
1170
  root: {
999
- color: border3.primary,
1171
+ color: border5.primary,
1000
1172
  padding: 0,
1001
1173
  "&:hover": {
1002
1174
  backgroundColor: "transparent",
1003
- color: fg3.brandPrimary
1175
+ color: fg5.brandPrimary
1004
1176
  },
1005
1177
  "&.Mui-checked": {
1006
- color: fg3.brandPrimary
1178
+ color: fg5.brandPrimary
1007
1179
  },
1008
1180
  "&.Mui-checked:hover": {
1009
- color: colors3.brand[700]
1181
+ color: violet[700]
1010
1182
  },
1011
1183
  "&.Mui-focusVisible": {
1012
1184
  outline: "none",
1013
- boxShadow: focusRings3.brand,
1014
- borderRadius: radius3.full
1185
+ boxShadow: focusRings5.brand,
1186
+ borderRadius: radius5.full
1015
1187
  },
1016
1188
  "&.Mui-disabled": {
1017
- color: border3.primary
1189
+ color: border5.primary
1018
1190
  }
1019
1191
  }
1020
1192
  }
@@ -1034,20 +1206,20 @@ function buildComponents(tokens) {
1034
1206
  padding: 2,
1035
1207
  "&.Mui-checked": {
1036
1208
  transform: "translateX(20px)",
1037
- color: fg3.white,
1209
+ color: fg5.white,
1038
1210
  "& + .MuiSwitch-track": {
1039
- backgroundColor: fg3.brandPrimary,
1211
+ backgroundColor: fg5.brandPrimary,
1040
1212
  opacity: 1
1041
1213
  }
1042
1214
  },
1043
1215
  "&.Mui-checked:hover + .MuiSwitch-track": {
1044
- backgroundColor: colors3.brand[700]
1216
+ backgroundColor: violet[700]
1045
1217
  },
1046
1218
  "&.Mui-focusVisible .MuiSwitch-thumb": {
1047
- boxShadow: focusRings3.brand
1219
+ boxShadow: focusRings5.brand
1048
1220
  },
1049
1221
  "&.Mui-disabled .MuiSwitch-thumb": {
1050
- color: bg3.disabled
1222
+ color: bg5.disabled
1051
1223
  },
1052
1224
  "&.Mui-disabled + .MuiSwitch-track": {
1053
1225
  opacity: 0.5
@@ -1059,8 +1231,8 @@ function buildComponents(tokens) {
1059
1231
  boxShadow: "0px 1px 2px 0px #1018280d"
1060
1232
  },
1061
1233
  track: {
1062
- borderRadius: radius3.full,
1063
- backgroundColor: border3.secondary,
1234
+ borderRadius: radius5.full,
1235
+ backgroundColor: border5.secondary,
1064
1236
  opacity: 1
1065
1237
  }
1066
1238
  }
@@ -1069,8 +1241,8 @@ function buildComponents(tokens) {
1069
1241
  MuiToggleButton: {
1070
1242
  styleOverrides: {
1071
1243
  root: {
1072
- borderColor: border3.primary,
1073
- color: text3.secondary,
1244
+ borderColor: border5.primary,
1245
+ color: text5.secondary,
1074
1246
  fontSize: 14,
1075
1247
  fontWeight: 600,
1076
1248
  lineHeight: "20px",
@@ -1078,19 +1250,19 @@ function buildComponents(tokens) {
1078
1250
  padding: "6px 12px",
1079
1251
  textTransform: "none",
1080
1252
  "&:hover": {
1081
- backgroundColor: bg3.primaryHover,
1082
- borderColor: border3.primary
1253
+ backgroundColor: bg5.primaryHover,
1254
+ borderColor: border5.primary
1083
1255
  },
1084
1256
  "&.Mui-selected": {
1085
- backgroundColor: bg3.brandPrimary,
1086
- color: buttonColors3.secondaryColor.fg,
1087
- borderColor: border3.brandSolid,
1257
+ backgroundColor: bg5.brandPrimary,
1258
+ color: buttonColors5.secondaryColor.fg,
1259
+ borderColor: border5.brandSolid,
1088
1260
  "&:hover": {
1089
- backgroundColor: bg3.brandSecondary
1261
+ backgroundColor: bg5.brandSecondary
1090
1262
  }
1091
1263
  },
1092
1264
  "&:focus-visible": {
1093
- boxShadow: focusRings3.brandShadowXs
1265
+ boxShadow: focusRings5.brandShadowXs
1094
1266
  }
1095
1267
  }
1096
1268
  }
@@ -1098,7 +1270,7 @@ function buildComponents(tokens) {
1098
1270
  MuiToggleButtonGroup: {
1099
1271
  styleOverrides: {
1100
1272
  root: {
1101
- borderRadius: radius3.md,
1273
+ borderRadius: radius5.md,
1102
1274
  overflow: "hidden"
1103
1275
  },
1104
1276
  grouped: {
@@ -1107,12 +1279,12 @@ function buildComponents(tokens) {
1107
1279
  marginLeft: -1
1108
1280
  },
1109
1281
  "&:first-of-type": {
1110
- borderTopLeftRadius: radius3.md,
1111
- borderBottomLeftRadius: radius3.md
1282
+ borderTopLeftRadius: radius5.md,
1283
+ borderBottomLeftRadius: radius5.md
1112
1284
  },
1113
1285
  "&:last-of-type": {
1114
- borderTopRightRadius: radius3.md,
1115
- borderBottomRightRadius: radius3.md
1286
+ borderTopRightRadius: radius5.md,
1287
+ borderBottomRightRadius: radius5.md
1116
1288
  }
1117
1289
  }
1118
1290
  }
@@ -1121,8 +1293,8 @@ function buildComponents(tokens) {
1121
1293
  MuiDrawer: {
1122
1294
  styleOverrides: {
1123
1295
  paper: {
1124
- backgroundColor: bg3.primary,
1125
- borderRight: `1px solid ${border3.secondary}`
1296
+ backgroundColor: bg5.primary,
1297
+ borderRight: `1px solid ${border5.secondary}`
1126
1298
  }
1127
1299
  }
1128
1300
  },
@@ -1133,9 +1305,9 @@ function buildComponents(tokens) {
1133
1305
  },
1134
1306
  styleOverrides: {
1135
1307
  root: {
1136
- borderRadius: radius3.xl,
1137
- border: `1px solid ${border3.secondary}`,
1138
- backgroundColor: bg3.primary,
1308
+ borderRadius: radius5.xl,
1309
+ border: `1px solid ${border5.secondary}`,
1310
+ backgroundColor: bg5.primary,
1139
1311
  boxShadow: tokenShadows.xs,
1140
1312
  overflow: "hidden"
1141
1313
  }
@@ -1182,35 +1354,35 @@ function buildComponents(tokens) {
1182
1354
  backgroundImage: "none"
1183
1355
  },
1184
1356
  rounded: {
1185
- borderRadius: radius3.lg
1357
+ borderRadius: radius5.lg
1186
1358
  },
1187
1359
  elevation1: {
1188
1360
  boxShadow: tokenShadows.xs,
1189
- border: `1px solid ${border3.secondary}`
1361
+ border: `1px solid ${border5.secondary}`
1190
1362
  },
1191
1363
  elevation2: {
1192
1364
  boxShadow: tokenShadows.sm,
1193
- border: `1px solid ${border3.secondary}`
1365
+ border: `1px solid ${border5.secondary}`
1194
1366
  },
1195
1367
  elevation3: {
1196
1368
  boxShadow: tokenShadows.md,
1197
- border: `1px solid ${border3.secondary}`
1369
+ border: `1px solid ${border5.secondary}`
1198
1370
  },
1199
1371
  elevation4: {
1200
1372
  boxShadow: tokenShadows.lg,
1201
- border: `1px solid ${border3.secondary}`
1373
+ border: `1px solid ${border5.secondary}`
1202
1374
  },
1203
1375
  elevation8: {
1204
1376
  boxShadow: tokenShadows.xl,
1205
- border: `1px solid ${border3.secondary}`
1377
+ border: `1px solid ${border5.secondary}`
1206
1378
  },
1207
1379
  elevation16: {
1208
1380
  boxShadow: tokenShadows["2xl"],
1209
- border: `1px solid ${border3.secondary}`
1381
+ border: `1px solid ${border5.secondary}`
1210
1382
  },
1211
1383
  elevation24: {
1212
1384
  boxShadow: tokenShadows["3xl"],
1213
- border: `1px solid ${border3.secondary}`
1385
+ border: `1px solid ${border5.secondary}`
1214
1386
  }
1215
1387
  }
1216
1388
  },
@@ -1222,8 +1394,8 @@ function buildComponents(tokens) {
1222
1394
  },
1223
1395
  styleOverrides: {
1224
1396
  root: {
1225
- border: `1px solid ${border3.secondary}`,
1226
- borderRadius: radius3.lg,
1397
+ border: `1px solid ${border5.secondary}`,
1398
+ borderRadius: radius5.lg,
1227
1399
  "&:not(:last-child)": {
1228
1400
  marginBottom: 8
1229
1401
  },
@@ -1233,7 +1405,7 @@ function buildComponents(tokens) {
1233
1405
  "&.Mui-expanded": {
1234
1406
  margin: 0,
1235
1407
  marginBottom: 8,
1236
- borderRadius: radius3.lg
1408
+ borderRadius: radius5.lg
1237
1409
  }
1238
1410
  }
1239
1411
  }
@@ -1245,7 +1417,7 @@ function buildComponents(tokens) {
1245
1417
  minHeight: 56,
1246
1418
  "&.Mui-expanded": {
1247
1419
  minHeight: 56,
1248
- borderBottom: `1px solid ${border3.secondary}`
1420
+ borderBottom: `1px solid ${border5.secondary}`
1249
1421
  }
1250
1422
  },
1251
1423
  content: {
@@ -1271,8 +1443,8 @@ function buildComponents(tokens) {
1271
1443
  },
1272
1444
  styleOverrides: {
1273
1445
  root: {
1274
- borderBottom: `1px solid ${border3.secondary}`,
1275
- backgroundColor: bg3.primary
1446
+ borderBottom: `1px solid ${border5.secondary}`,
1447
+ backgroundColor: bg5.primary
1276
1448
  }
1277
1449
  }
1278
1450
  },
@@ -1296,7 +1468,7 @@ function buildComponents(tokens) {
1296
1468
  MuiChip: {
1297
1469
  styleOverrides: {
1298
1470
  root: {
1299
- borderRadius: radius3.md
1471
+ borderRadius: radius5.md
1300
1472
  },
1301
1473
  label: {
1302
1474
  fontWeight: 500
@@ -1312,51 +1484,51 @@ function buildComponents(tokens) {
1312
1484
  },
1313
1485
  colorDefault: {
1314
1486
  "&.MuiChip-filled": {
1315
- backgroundColor: colors3.gray[50],
1316
- color: colors3.gray[700],
1317
- "& .MuiChip-deleteIcon": { color: colors3.gray[400] }
1487
+ backgroundColor: gray[50],
1488
+ color: gray[700],
1489
+ "& .MuiChip-deleteIcon": { color: gray[400] }
1318
1490
  }
1319
1491
  },
1320
1492
  colorPrimary: {
1321
1493
  "&.MuiChip-filled": {
1322
- backgroundColor: colors3.brand[50],
1323
- color: colors3.brand[700],
1324
- "& .MuiChip-deleteIcon": { color: colors3.brand[400] }
1494
+ backgroundColor: violet[50],
1495
+ color: violet[700],
1496
+ "& .MuiChip-deleteIcon": { color: violet[400] }
1325
1497
  }
1326
1498
  },
1327
1499
  colorSecondary: {
1328
1500
  "&.MuiChip-filled": {
1329
- backgroundColor: colors3.gray[50],
1330
- color: colors3.gray[700],
1331
- "& .MuiChip-deleteIcon": { color: colors3.gray[400] }
1501
+ backgroundColor: gray[50],
1502
+ color: gray[700],
1503
+ "& .MuiChip-deleteIcon": { color: gray[400] }
1332
1504
  }
1333
1505
  },
1334
1506
  colorError: {
1335
1507
  "&.MuiChip-filled": {
1336
- backgroundColor: colors3.error[50],
1337
- color: colors3.error[700],
1338
- "& .MuiChip-deleteIcon": { color: colors3.error[400] }
1508
+ backgroundColor: colors5.error[50],
1509
+ color: colors5.error[700],
1510
+ "& .MuiChip-deleteIcon": { color: colors5.error[400] }
1339
1511
  }
1340
1512
  },
1341
1513
  colorWarning: {
1342
1514
  "&.MuiChip-filled": {
1343
- backgroundColor: colors3.warning[50],
1344
- color: colors3.warning[700],
1345
- "& .MuiChip-deleteIcon": { color: colors3.warning[400] }
1515
+ backgroundColor: colors5.warning[50],
1516
+ color: colors5.warning[700],
1517
+ "& .MuiChip-deleteIcon": { color: colors5.warning[400] }
1346
1518
  }
1347
1519
  },
1348
1520
  colorSuccess: {
1349
1521
  "&.MuiChip-filled": {
1350
- backgroundColor: colors3.success[50],
1351
- color: colors3.success[700],
1352
- "& .MuiChip-deleteIcon": { color: colors3.success[400] }
1522
+ backgroundColor: colors5.success[50],
1523
+ color: colors5.success[700],
1524
+ "& .MuiChip-deleteIcon": { color: colors5.success[400] }
1353
1525
  }
1354
1526
  },
1355
1527
  colorInfo: {
1356
1528
  "&.MuiChip-filled": {
1357
- backgroundColor: colors3.blue[50],
1358
- color: colors3.blue[700],
1359
- "& .MuiChip-deleteIcon": { color: colors3.blue[400] }
1529
+ backgroundColor: info[50],
1530
+ color: info[700],
1531
+ "& .MuiChip-deleteIcon": { color: info[400] }
1360
1532
  }
1361
1533
  }
1362
1534
  }
@@ -1372,7 +1544,7 @@ function buildComponents(tokens) {
1372
1544
  fontSize: 14,
1373
1545
  lineHeight: "20px",
1374
1546
  fontWeight: 500,
1375
- color: text3.secondary
1547
+ color: text5.secondary
1376
1548
  }
1377
1549
  }
1378
1550
  },
@@ -1388,29 +1560,29 @@ function buildComponents(tokens) {
1388
1560
  MuiTableCell: {
1389
1561
  styleOverrides: {
1390
1562
  root: {
1391
- borderBottom: `1px solid ${border3.secondary}`,
1563
+ borderBottom: `1px solid ${border5.secondary}`,
1392
1564
  padding: "16px 24px",
1393
1565
  fontSize: 14,
1394
1566
  lineHeight: "20px",
1395
- color: fg3.tertiary
1567
+ color: fg5.tertiary
1396
1568
  },
1397
1569
  head: {
1398
- backgroundColor: bg3.secondary,
1399
- color: fg3.tertiary,
1570
+ backgroundColor: bg5.secondary,
1571
+ color: fg5.tertiary,
1400
1572
  fontWeight: 500,
1401
1573
  fontSize: 12,
1402
1574
  lineHeight: "18px"
1403
1575
  },
1404
1576
  body: {
1405
- color: fg3.tertiary
1577
+ color: fg5.tertiary
1406
1578
  }
1407
1579
  }
1408
1580
  },
1409
1581
  MuiTableHead: {
1410
1582
  styleOverrides: {
1411
1583
  root: {
1412
- backgroundColor: bg3.secondary,
1413
- borderBottom: `1px solid ${border3.secondary}`
1584
+ backgroundColor: bg5.secondary,
1585
+ borderBottom: `1px solid ${border5.secondary}`
1414
1586
  }
1415
1587
  }
1416
1588
  },
@@ -1421,12 +1593,12 @@ function buildComponents(tokens) {
1421
1593
  border: 0
1422
1594
  },
1423
1595
  "&:hover": {
1424
- backgroundColor: bg3.primaryHover
1596
+ backgroundColor: bg5.primaryHover
1425
1597
  },
1426
1598
  "&.Mui-selected": {
1427
- backgroundColor: bg3.brandPrimary,
1599
+ backgroundColor: bg5.brandPrimary,
1428
1600
  "&:hover": {
1429
- backgroundColor: bg3.brandPrimary
1601
+ backgroundColor: bg5.brandPrimary
1430
1602
  }
1431
1603
  }
1432
1604
  }
@@ -1435,8 +1607,8 @@ function buildComponents(tokens) {
1435
1607
  MuiTableContainer: {
1436
1608
  styleOverrides: {
1437
1609
  root: {
1438
- borderRadius: radius3.xl,
1439
- border: `1px solid ${border3.secondary}`,
1610
+ borderRadius: radius5.xl,
1611
+ border: `1px solid ${border5.secondary}`,
1440
1612
  boxShadow: "none"
1441
1613
  }
1442
1614
  }
@@ -1450,24 +1622,24 @@ function buildComponents(tokens) {
1450
1622
  lineHeight: "18px",
1451
1623
  minWidth: 20,
1452
1624
  height: 20,
1453
- borderRadius: radius3.full
1625
+ borderRadius: radius5.full
1454
1626
  },
1455
1627
  colorPrimary: {
1456
- backgroundColor: bg3.brandSolid
1628
+ backgroundColor: bg5.brandSolid
1457
1629
  },
1458
1630
  colorError: {
1459
- backgroundColor: bg3.errorSolid
1631
+ backgroundColor: bg5.errorSolid
1460
1632
  },
1461
1633
  colorSuccess: {
1462
- backgroundColor: bg3.successSolid
1634
+ backgroundColor: bg5.successSolid
1463
1635
  },
1464
1636
  colorWarning: {
1465
- backgroundColor: bg3.warningSolid
1637
+ backgroundColor: bg5.warningSolid
1466
1638
  },
1467
1639
  dot: {
1468
1640
  minWidth: 8,
1469
1641
  height: 8,
1470
- borderRadius: radius3.full
1642
+ borderRadius: radius5.full
1471
1643
  }
1472
1644
  }
1473
1645
  },
@@ -1475,7 +1647,7 @@ function buildComponents(tokens) {
1475
1647
  MuiDivider: {
1476
1648
  styleOverrides: {
1477
1649
  root: {
1478
- borderColor: border3.secondary
1650
+ borderColor: border5.secondary
1479
1651
  }
1480
1652
  }
1481
1653
  },
@@ -1490,16 +1662,16 @@ function buildComponents(tokens) {
1490
1662
  MuiListItemButton: {
1491
1663
  styleOverrides: {
1492
1664
  root: {
1493
- borderRadius: radius3.sm,
1665
+ borderRadius: radius5.sm,
1494
1666
  padding: "8px 12px",
1495
1667
  "&:hover": {
1496
- backgroundColor: bg3.primaryHover
1668
+ backgroundColor: bg5.primaryHover
1497
1669
  },
1498
1670
  "&.Mui-selected": {
1499
- backgroundColor: bg3.brandPrimary,
1500
- color: buttonColors3.secondaryColor.fg,
1671
+ backgroundColor: bg5.brandPrimary,
1672
+ color: buttonColors5.secondaryColor.fg,
1501
1673
  "&:hover": {
1502
- backgroundColor: bg3.brandSecondary
1674
+ backgroundColor: bg5.brandSecondary
1503
1675
  }
1504
1676
  }
1505
1677
  }
@@ -1509,7 +1681,7 @@ function buildComponents(tokens) {
1509
1681
  styleOverrides: {
1510
1682
  root: {
1511
1683
  minWidth: 36,
1512
- color: fg3.quaternary
1684
+ color: fg5.quaternary
1513
1685
  }
1514
1686
  }
1515
1687
  },
@@ -1519,12 +1691,12 @@ function buildComponents(tokens) {
1519
1691
  fontSize: 14,
1520
1692
  lineHeight: "20px",
1521
1693
  fontWeight: 500,
1522
- color: text3.secondary
1694
+ color: text5.secondary
1523
1695
  },
1524
1696
  secondary: {
1525
1697
  fontSize: 14,
1526
1698
  lineHeight: "20px",
1527
- color: text3.quaternary
1699
+ color: text5.quaternary
1528
1700
  }
1529
1701
  }
1530
1702
  },
@@ -1532,17 +1704,17 @@ function buildComponents(tokens) {
1532
1704
  MuiTooltip: {
1533
1705
  styleOverrides: {
1534
1706
  tooltip: {
1535
- backgroundColor: bg3.primarySolid,
1536
- color: text3.white,
1707
+ backgroundColor: bg5.primarySolid,
1708
+ color: text5.white,
1537
1709
  fontSize: 12,
1538
1710
  lineHeight: "18px",
1539
1711
  fontWeight: 600,
1540
1712
  padding: "8px 12px",
1541
- borderRadius: radius3.md,
1713
+ borderRadius: radius5.md,
1542
1714
  boxShadow: tokenShadows.lg
1543
1715
  },
1544
1716
  arrow: {
1545
- color: bg3.primarySolid
1717
+ color: bg5.primarySolid
1546
1718
  }
1547
1719
  }
1548
1720
  },
@@ -1553,42 +1725,42 @@ function buildComponents(tokens) {
1553
1725
  },
1554
1726
  styleOverrides: {
1555
1727
  root: {
1556
- borderRadius: radius3.xl,
1728
+ borderRadius: radius5.xl,
1557
1729
  fontSize: 14,
1558
1730
  lineHeight: "20px",
1559
1731
  padding: "12px 16px",
1560
1732
  alignItems: "center"
1561
1733
  },
1562
1734
  standardError: {
1563
- backgroundColor: bg3.errorPrimary,
1564
- color: colors3.error[700],
1565
- border: `1px solid ${border3.error}`,
1735
+ backgroundColor: bg5.errorPrimary,
1736
+ color: colors5.error[700],
1737
+ border: `1px solid ${border5.error}`,
1566
1738
  "& .MuiAlert-icon": {
1567
- color: fg3.errorPrimary
1739
+ color: fg5.errorPrimary
1568
1740
  }
1569
1741
  },
1570
1742
  standardWarning: {
1571
- backgroundColor: bg3.warningPrimary,
1572
- color: colors3.warning[700],
1573
- border: `1px solid ${colors3.warning[300]}`,
1743
+ backgroundColor: bg5.warningPrimary,
1744
+ color: colors5.warning[700],
1745
+ border: `1px solid ${colors5.warning[300]}`,
1574
1746
  "& .MuiAlert-icon": {
1575
- color: fg3.warningPrimary
1747
+ color: fg5.warningPrimary
1576
1748
  }
1577
1749
  },
1578
1750
  standardSuccess: {
1579
- backgroundColor: bg3.successPrimary,
1580
- color: colors3.success[700],
1581
- border: `1px solid ${colors3.success[300]}`,
1751
+ backgroundColor: bg5.successPrimary,
1752
+ color: colors5.success[700],
1753
+ border: `1px solid ${colors5.success[300]}`,
1582
1754
  "& .MuiAlert-icon": {
1583
- color: fg3.successPrimary
1755
+ color: fg5.successPrimary
1584
1756
  }
1585
1757
  },
1586
1758
  standardInfo: {
1587
- backgroundColor: colors3.blue[50],
1588
- color: colors3.blue[700],
1589
- border: `1px solid ${colors3.blue[300]}`,
1759
+ backgroundColor: info[50],
1760
+ color: info[700],
1761
+ border: `1px solid ${info[300]}`,
1590
1762
  "& .MuiAlert-icon": {
1591
- color: colors3.blue[600]
1763
+ color: info[600]
1592
1764
  }
1593
1765
  },
1594
1766
  icon: {
@@ -1619,7 +1791,7 @@ function buildComponents(tokens) {
1619
1791
  MuiDialog: {
1620
1792
  styleOverrides: {
1621
1793
  paper: {
1622
- borderRadius: radius3.xl,
1794
+ borderRadius: radius5.xl,
1623
1795
  boxShadow: tokenShadows.xl,
1624
1796
  padding: 0
1625
1797
  }
@@ -1631,7 +1803,7 @@ function buildComponents(tokens) {
1631
1803
  fontSize: 18,
1632
1804
  lineHeight: "28px",
1633
1805
  fontWeight: 600,
1634
- color: text3.primary,
1806
+ color: text5.primary,
1635
1807
  padding: "24px 24px 0"
1636
1808
  }
1637
1809
  }
@@ -1642,7 +1814,7 @@ function buildComponents(tokens) {
1642
1814
  padding: "20px 24px",
1643
1815
  fontSize: 14,
1644
1816
  lineHeight: "20px",
1645
- color: text3.tertiary
1817
+ color: text5.tertiary
1646
1818
  }
1647
1819
  }
1648
1820
  },
@@ -1658,27 +1830,27 @@ function buildComponents(tokens) {
1658
1830
  MuiLinearProgress: {
1659
1831
  styleOverrides: {
1660
1832
  root: {
1661
- borderRadius: radius3.full,
1833
+ borderRadius: radius5.full,
1662
1834
  height: 8,
1663
- backgroundColor: border3.secondary
1835
+ backgroundColor: border5.secondary
1664
1836
  },
1665
1837
  barColorPrimary: {
1666
- backgroundColor: fg3.brandPrimary,
1667
- borderRadius: radius3.full
1838
+ backgroundColor: fg5.brandPrimary,
1839
+ borderRadius: radius5.full
1668
1840
  },
1669
1841
  barColorSecondary: {
1670
- backgroundColor: bg3.secondarySolid,
1671
- borderRadius: radius3.full
1842
+ backgroundColor: bg5.secondarySolid,
1843
+ borderRadius: radius5.full
1672
1844
  }
1673
1845
  }
1674
1846
  },
1675
1847
  MuiCircularProgress: {
1676
1848
  styleOverrides: {
1677
1849
  colorPrimary: {
1678
- color: fg3.brandPrimary
1850
+ color: fg5.brandPrimary
1679
1851
  },
1680
1852
  colorSecondary: {
1681
- color: bg3.secondarySolid
1853
+ color: bg5.secondarySolid
1682
1854
  }
1683
1855
  }
1684
1856
  },
@@ -1689,13 +1861,13 @@ function buildComponents(tokens) {
1689
1861
  },
1690
1862
  styleOverrides: {
1691
1863
  root: {
1692
- backgroundColor: bg3.tertiary
1864
+ backgroundColor: bg5.tertiary
1693
1865
  },
1694
1866
  rounded: {
1695
- borderRadius: radius3.md
1867
+ borderRadius: radius5.md
1696
1868
  },
1697
1869
  circular: {
1698
- borderRadius: radius3.full
1870
+ borderRadius: radius5.full
1699
1871
  }
1700
1872
  }
1701
1873
  },
@@ -1703,9 +1875,9 @@ function buildComponents(tokens) {
1703
1875
  MuiSnackbarContent: {
1704
1876
  styleOverrides: {
1705
1877
  root: {
1706
- backgroundColor: bg3.primarySolid,
1707
- color: text3.white,
1708
- borderRadius: radius3.xl,
1878
+ backgroundColor: bg5.primarySolid,
1879
+ color: text5.white,
1880
+ borderRadius: radius5.xl,
1709
1881
  boxShadow: tokenShadows.lg,
1710
1882
  fontSize: 14,
1711
1883
  lineHeight: "20px",
@@ -1739,21 +1911,21 @@ function buildComponents(tokens) {
1739
1911
  MuiDataGrid: {
1740
1912
  styleOverrides: {
1741
1913
  root: {
1742
- border: `1px solid ${border3.secondary}`,
1743
- borderRadius: radius3.xl,
1914
+ border: `1px solid ${border5.secondary}`,
1915
+ borderRadius: radius5.xl,
1744
1916
  fontFamily: "inherit",
1745
1917
  "& .MuiDataGrid-withBorderColor": {
1746
- borderColor: border3.secondary
1918
+ borderColor: border5.secondary
1747
1919
  }
1748
1920
  },
1749
1921
  columnHeaders: {
1750
- backgroundColor: bg3.secondary
1922
+ backgroundColor: bg5.secondary
1751
1923
  },
1752
1924
  columnHeader: {
1753
1925
  fontSize: 12,
1754
1926
  lineHeight: "18px",
1755
1927
  fontWeight: 500,
1756
- color: fg3.tertiary,
1928
+ color: fg5.tertiary,
1757
1929
  "&:focus, &:focus-within": {
1758
1930
  outline: "none"
1759
1931
  }
@@ -1764,27 +1936,27 @@ function buildComponents(tokens) {
1764
1936
  cell: {
1765
1937
  fontSize: 14,
1766
1938
  lineHeight: "20px",
1767
- color: fg3.tertiary,
1939
+ color: fg5.tertiary,
1768
1940
  "&:focus, &:focus-within": {
1769
1941
  outline: "none"
1770
1942
  }
1771
1943
  },
1772
1944
  row: {
1773
1945
  "&:hover": {
1774
- backgroundColor: bg3.primaryHover
1946
+ backgroundColor: bg5.primaryHover
1775
1947
  },
1776
1948
  "&.Mui-selected": {
1777
- backgroundColor: bg3.brandPrimary,
1949
+ backgroundColor: bg5.brandPrimary,
1778
1950
  "&:hover": {
1779
- backgroundColor: bg3.brandPrimary
1951
+ backgroundColor: bg5.brandPrimary
1780
1952
  }
1781
1953
  }
1782
1954
  },
1783
1955
  footerContainer: {
1784
- borderTop: `1px solid ${border3.secondary}`
1956
+ borderTop: `1px solid ${border5.secondary}`
1785
1957
  },
1786
1958
  columnSeparator: {
1787
- color: border3.secondary
1959
+ color: border5.secondary
1788
1960
  }
1789
1961
  }
1790
1962
  }
@@ -1802,65 +1974,7 @@ var components = buildComponents({
1802
1974
  border,
1803
1975
  buttonColors});
1804
1976
 
1805
- // src/theme/shadows.ts
1806
- function buildShadows(tokens) {
1807
- const tokenShadows = tokens.shadows;
1808
- return [
1809
- "none",
1810
- // 0
1811
- tokenShadows.xs,
1812
- // 1
1813
- tokenShadows.sm,
1814
- // 2
1815
- tokenShadows.sm,
1816
- // 3
1817
- tokenShadows.md,
1818
- // 4
1819
- tokenShadows.md,
1820
- // 5
1821
- tokenShadows.md,
1822
- // 6
1823
- tokenShadows.lg,
1824
- // 7
1825
- tokenShadows.lg,
1826
- // 8
1827
- tokenShadows.lg,
1828
- // 9
1829
- tokenShadows.xl,
1830
- // 10
1831
- tokenShadows.xl,
1832
- // 11
1833
- tokenShadows.xl,
1834
- // 12
1835
- tokenShadows["2xl"],
1836
- // 13
1837
- tokenShadows["2xl"],
1838
- // 14
1839
- tokenShadows["2xl"],
1840
- // 15
1841
- tokenShadows["3xl"],
1842
- // 16
1843
- tokenShadows["3xl"],
1844
- // 17
1845
- tokenShadows["3xl"],
1846
- // 18
1847
- tokenShadows["3xl"],
1848
- // 19
1849
- tokenShadows["3xl"],
1850
- // 20
1851
- tokenShadows["3xl"],
1852
- // 21
1853
- tokenShadows["3xl"],
1854
- // 22
1855
- tokenShadows["3xl"],
1856
- // 23
1857
- tokenShadows["3xl"]
1858
- // 24
1859
- ];
1860
- }
1861
- var shadows2 = buildShadows({
1862
- shadows
1863
- });
1977
+ // src/theme/buildTheme.ts
1864
1978
  function buildThemeOptions(tokens) {
1865
1979
  return {
1866
1980
  palette: buildPalette(tokens),
@@ -1876,60 +1990,23 @@ function buildTheme(tokens) {
1876
1990
  return styles.createTheme(buildThemeOptions(tokens));
1877
1991
  }
1878
1992
 
1879
- // src/theme/presets/forest.ts
1880
- var forestPreset = {
1881
- name: "forest",
1882
- defaultVariant: "light",
1883
- variants: {
1884
- light: {
1885
- tokens: {
1886
- colors,
1887
- spacing,
1888
- radius,
1889
- shadows,
1890
- focusRings,
1891
- fontFamily,
1892
- fontSize,
1893
- lineHeight,
1894
- fontWeight,
1895
- display,
1896
- container,
1897
- widths,
1898
- text,
1899
- bg,
1900
- fg,
1901
- border,
1902
- buttonColors,
1903
- avatarColors,
1904
- breadcrumbColors,
1905
- iconColors,
1906
- navColors,
1907
- sliderColors,
1908
- toggleColors,
1909
- chartColors,
1910
- alpha
1911
- }
1912
- }
1913
- }
1914
- };
1915
-
1916
- // src/theme/presets/alkemy-plus.ts
1993
+ // src/theme/presets/forest-external.ts
1917
1994
  var colors2 = {
1918
1995
  ...colors,
1919
- /** Brand scale — black-based for primary actions */
1996
+ /** Brand scale — purple for client-facing products (#9D5FFF) */
1920
1997
  brand: {
1921
- 25: "#fafafa",
1922
- 50: "#f5f5f5",
1923
- 100: "#ebebeb",
1924
- 200: "#d6d6d6",
1925
- 300: "#b0b0b0",
1926
- 400: "#737373",
1927
- 500: "#404040",
1928
- 600: "#1a1a1a",
1929
- 700: "#0d0d0d",
1930
- 800: "#050505",
1931
- 900: "#000000",
1932
- 950: "#000000"
1998
+ 25: "#faf8ff",
1999
+ 50: "#f5f0ff",
2000
+ 100: "#ebe0ff",
2001
+ 200: "#d6c0ff",
2002
+ 300: "#b090ff",
2003
+ 400: "#9D5FFF",
2004
+ 500: "#7c4de6",
2005
+ 600: "#5b3acc",
2006
+ 700: "#3a1aad",
2007
+ 800: "#190a8a",
2008
+ 900: "#000066",
2009
+ 950: "#000033"
1933
2010
  },
1934
2011
  /** Warm-neutral gray scale */
1935
2012
  gray: {
@@ -2165,18 +2242,18 @@ var chartColors2 = {
2165
2242
  crosshairFg: colors2.gray[500],
2166
2243
  legendFg: text2.tertiary,
2167
2244
  series: [
2168
- { fg: colors2.violet[500], fgHover: colors2.violet[600], bg: colors2.violet[100], bgHover: colors2.violet[200] },
2169
- { fg: colors2.orangeDark[400], fgHover: colors2.orangeDark[500], bg: colors2.orangeDark[100], bgHover: colors2.orangeDark[200] },
2170
- { fg: colors2.teal[300], fgHover: colors2.teal[400], bg: colors2.teal[50], bgHover: colors2.teal[100] },
2245
+ { fg: misc.purple[500], fgHover: misc.purple[600], bg: misc.purple[100], bgHover: misc.purple[200] },
2246
+ { fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
2247
+ { fg: misc.teal[300], fgHover: misc.teal[400], bg: misc.teal[50], bgHover: misc.teal[100] },
2171
2248
  { fg: colors2.warning[400], fgHover: colors2.warning[500], bg: colors2.warning[100], bgHover: colors2.warning[200] },
2172
- { fg: colors2.rose[400], fgHover: colors2.rose[500], bg: colors2.rose[100], bgHover: colors2.rose[200] },
2173
- { fg: colors2.blueLight[400], fgHover: colors2.blueLight[500], bg: colors2.blueLight[100], bgHover: colors2.blueLight[200] },
2174
- { fg: colors2.orange[300], fgHover: colors2.orange[400], bg: colors2.orange[100], bgHover: colors2.orange[200] },
2175
- { fg: colors2.cyan[600], fgHover: colors2.cyan[700], bg: colors2.cyan[100], bgHover: colors2.cyan[200] },
2176
- { fg: colors2.green[500], fgHover: colors2.green[600], bg: colors2.green[100], bgHover: colors2.green[200] },
2177
- { fg: colors2.pink[400], fgHover: colors2.pink[500], bg: colors2.pink[100], bgHover: colors2.pink[200] },
2178
- { fg: colors2.fuchsia[400], fgHover: colors2.fuchsia[500], bg: colors2.fuchsia[100], bgHover: colors2.fuchsia[200] },
2179
- { fg: colors2.teal[600], fgHover: colors2.teal[700], bg: colors2.teal[100], bgHover: colors2.teal[200] }
2249
+ { fg: misc.rose[400], fgHover: misc.rose[500], bg: misc.rose[100], bgHover: misc.rose[200] },
2250
+ { fg: misc.blueLight[400], fgHover: misc.blueLight[500], bg: misc.blueLight[100], bgHover: misc.blueLight[200] },
2251
+ { fg: misc.orange[300], fgHover: misc.orange[400], bg: misc.orange[100], bgHover: misc.orange[200] },
2252
+ { fg: misc.cyan[600], fgHover: misc.cyan[700], bg: misc.cyan[100], bgHover: misc.cyan[200] },
2253
+ { fg: misc.green[500], fgHover: misc.green[600], bg: misc.green[100], bgHover: misc.green[200] },
2254
+ { fg: misc.pink[400], fgHover: misc.pink[500], bg: misc.pink[100], bgHover: misc.pink[200] },
2255
+ { fg: misc.fuchsia[400], fgHover: misc.fuchsia[500], bg: misc.fuchsia[100], bgHover: misc.fuchsia[200] },
2256
+ { fg: misc.teal[600], fgHover: misc.teal[700], bg: misc.teal[100], bgHover: misc.teal[200] }
2180
2257
  ]
2181
2258
  };
2182
2259
  var focusRings2 = {
@@ -2189,8 +2266,8 @@ var focusRings2 = {
2189
2266
  error: "0px 0px 0px 4px #f044383d",
2190
2267
  errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
2191
2268
  };
2192
- var alkemyPlusPreset = {
2193
- name: "alkemy-plus",
2269
+ var forestExternalPreset = {
2270
+ name: "forest-external",
2194
2271
  defaultVariant: "light",
2195
2272
  variants: {
2196
2273
  light: {
@@ -2225,10 +2302,650 @@ var alkemyPlusPreset = {
2225
2302
  }
2226
2303
  };
2227
2304
 
2305
+ // src/theme/presets/forest-agency.ts
2306
+ var colors3 = {
2307
+ ...colors,
2308
+ /** Brand scale — black-based for primary actions */
2309
+ brand: {
2310
+ 25: "#fafafa",
2311
+ 50: "#f5f5f5",
2312
+ 100: "#ebebeb",
2313
+ 200: "#d6d6d6",
2314
+ 300: "#b0b0b0",
2315
+ 400: "#737373",
2316
+ 500: "#404040",
2317
+ 600: "#1a1a1a",
2318
+ 700: "#0d0d0d",
2319
+ 800: "#050505",
2320
+ 900: "#000000",
2321
+ 950: "#000000"
2322
+ },
2323
+ /** Accent color — red/orange sparingly used (#FF2821) */
2324
+ accent: {
2325
+ 25: "#fff8f7",
2326
+ 50: "#fff0ee",
2327
+ 100: "#ffe0dd",
2328
+ 200: "#ffc0bb",
2329
+ 300: "#ff9090",
2330
+ 400: "#FF2821",
2331
+ 500: "#e61a1a",
2332
+ 600: "#cc1010",
2333
+ 700: "#a30808",
2334
+ 800: "#7a0000",
2335
+ 900: "#520000",
2336
+ 950: "#290000"
2337
+ },
2338
+ /** Warm-neutral gray scale */
2339
+ gray: {
2340
+ 25: "#fdfcfc",
2341
+ 50: "#faf9f8",
2342
+ 100: "#f5f3f1",
2343
+ 200: "#e8e5e3",
2344
+ 300: "#d8d8dc",
2345
+ 400: "#a0a0a6",
2346
+ 500: "#71717a",
2347
+ 600: "#52525b",
2348
+ 700: "#3f3f46",
2349
+ 800: "#27272a",
2350
+ 900: "#18181b",
2351
+ 950: "#09090b"
2352
+ }
2353
+ };
2354
+ var radius3 = {
2355
+ ...radius,
2356
+ xxs: 1,
2357
+ xs: 2,
2358
+ sm: 3,
2359
+ md: 4,
2360
+ lg: 5,
2361
+ xl: 6,
2362
+ "2xl": 8,
2363
+ "3xl": 10,
2364
+ "4xl": 12
2365
+ };
2366
+ var text3 = {
2367
+ primary: colors3.gray[900],
2368
+ secondary: colors3.gray[700],
2369
+ secondaryHover: colors3.gray[800],
2370
+ tertiary: colors3.gray[600],
2371
+ tertiaryHover: colors3.gray[700],
2372
+ quaternary: colors3.gray[500],
2373
+ disabled: colors3.gray[500],
2374
+ placeholder: colors3.gray[500],
2375
+ placeholderSubtle: colors3.gray[300],
2376
+ white: colors3.base.white,
2377
+ brandPrimary: colors3.brand[900],
2378
+ brandSecondary: colors3.brand[700],
2379
+ brandTertiary: colors3.brand[600],
2380
+ brandTertiaryAlt: colors3.brand[600],
2381
+ primaryOnBrand: colors3.base.white,
2382
+ secondaryOnBrand: colors3.brand[200],
2383
+ tertiaryOnBrand: colors3.brand[200],
2384
+ quaternaryOnBrand: colors3.brand[300],
2385
+ errorPrimary: colors3.error[600],
2386
+ warningPrimary: colors3.warning[600],
2387
+ successPrimary: colors3.success[600]
2388
+ };
2389
+ var bg3 = {
2390
+ primary: colors3.gray[50],
2391
+ primaryAlt: colors3.gray[50],
2392
+ primaryHover: colors3.gray[100],
2393
+ primarySolid: colors3.gray[950],
2394
+ secondary: colors3.base.white,
2395
+ secondaryAlt: colors3.base.white,
2396
+ secondarySubtle: colors3.gray[25],
2397
+ secondaryHover: colors3.gray[50],
2398
+ secondarySolid: colors3.gray[600],
2399
+ tertiary: colors3.gray[100],
2400
+ quaternary: colors3.gray[200],
2401
+ active: colors3.gray[200],
2402
+ disabled: colors3.gray[100],
2403
+ disabledSubtle: colors3.gray[50],
2404
+ overlay: colors3.gray[950],
2405
+ brandPrimary: colors3.brand[50],
2406
+ brandPrimaryAlt: colors3.brand[50],
2407
+ brandSecondary: colors3.brand[100],
2408
+ brandSolid: colors3.brand[600],
2409
+ brandSolidHover: colors3.brand[700],
2410
+ brandSection: colors3.brand[800],
2411
+ brandSectionSubtle: colors3.brand[700],
2412
+ errorPrimary: colors3.error[50],
2413
+ errorSecondary: colors3.error[100],
2414
+ errorSolid: colors3.error[600],
2415
+ warningPrimary: colors3.warning[50],
2416
+ warningSecondary: colors3.warning[100],
2417
+ warningSolid: colors3.warning[600],
2418
+ successPrimary: colors3.success[50],
2419
+ successSecondary: colors3.success[100],
2420
+ successSolid: colors3.success[600]
2421
+ };
2422
+ var fg3 = {
2423
+ primary: colors3.gray[900],
2424
+ secondary: colors3.gray[700],
2425
+ secondaryHover: colors3.gray[800],
2426
+ tertiary: colors3.gray[600],
2427
+ tertiaryHover: colors3.gray[700],
2428
+ quaternary: colors3.gray[500],
2429
+ quaternaryHover: colors3.gray[600],
2430
+ quinary: colors3.gray[400],
2431
+ quinaryHover: colors3.gray[500],
2432
+ senary: colors3.gray[300],
2433
+ white: colors3.base.white,
2434
+ disabled: colors3.gray[400],
2435
+ disabledSubtle: colors3.gray[300],
2436
+ brandPrimary: colors3.brand[600],
2437
+ brandPrimaryAlt: colors3.brand[600],
2438
+ brandSecondary: colors3.brand[500],
2439
+ errorPrimary: colors3.error[600],
2440
+ errorSecondary: colors3.error[500],
2441
+ warningPrimary: colors3.warning[600],
2442
+ warningSecondary: colors3.warning[500],
2443
+ successPrimary: colors3.success[600],
2444
+ successSecondary: colors3.success[500]
2445
+ };
2446
+ var border3 = {
2447
+ primary: colors3.gray[300],
2448
+ secondary: colors3.gray[200],
2449
+ tertiary: colors3.gray[100],
2450
+ disabled: colors3.gray[300],
2451
+ disabledSubtle: colors3.gray[200],
2452
+ brand: colors3.brand[300],
2453
+ brandSolid: colors3.brand[600],
2454
+ brandSolidAlt: colors3.brand[600],
2455
+ error: colors3.error[300],
2456
+ errorSolid: colors3.error[600]
2457
+ };
2458
+ var buttonColors3 = {
2459
+ primary: {
2460
+ bg: colors3.brand[600],
2461
+ bgHover: colors3.brand[700],
2462
+ fg: colors3.base.white,
2463
+ fgHover: colors3.base.white,
2464
+ border: colors3.brand[600],
2465
+ borderHover: colors3.brand[700]
2466
+ },
2467
+ secondary: {
2468
+ bg: colors3.base.white,
2469
+ bgHover: colors3.gray[50],
2470
+ fg: colors3.gray[700],
2471
+ fgHover: colors3.gray[800],
2472
+ border: colors3.gray[300],
2473
+ borderHover: colors3.gray[300]
2474
+ },
2475
+ secondaryColor: {
2476
+ bg: colors3.base.white,
2477
+ bgHover: colors3.brand[50],
2478
+ fg: colors3.brand[700],
2479
+ fgHover: colors3.brand[800],
2480
+ border: colors3.brand[300],
2481
+ borderHover: colors3.brand[300]
2482
+ },
2483
+ tertiary: {
2484
+ fg: colors3.gray[600],
2485
+ fgHover: colors3.gray[700],
2486
+ bgHover: colors3.gray[50]
2487
+ },
2488
+ tertiaryColor: {
2489
+ fg: colors3.brand[700],
2490
+ fgHover: colors3.brand[800],
2491
+ bgHover: colors3.brand[50]
2492
+ },
2493
+ primaryError: {
2494
+ bg: colors3.error[600],
2495
+ bgHover: colors3.error[700],
2496
+ fg: colors3.base.white,
2497
+ fgHover: colors3.base.white,
2498
+ border: colors3.error[600],
2499
+ borderHover: colors3.error[700]
2500
+ },
2501
+ secondaryError: {
2502
+ bg: colors3.base.white,
2503
+ bgHover: colors3.error[50],
2504
+ fg: colors3.error[700],
2505
+ fgHover: colors3.error[800],
2506
+ border: colors3.error[300],
2507
+ borderHover: colors3.error[300]
2508
+ },
2509
+ tertiaryError: {
2510
+ fg: colors3.error[700],
2511
+ fgHover: colors3.error[800],
2512
+ bgHover: colors3.error[50]
2513
+ }
2514
+ };
2515
+ var avatarColors3 = {
2516
+ bg: colors3.gray[100],
2517
+ contrastBorder: "#00000014",
2518
+ profilePhotoBorder: colors3.base.white,
2519
+ focusBorder: "#a0a0a624"
2520
+ // gray[400] + 14% alpha
2521
+ };
2522
+ var breadcrumbColors3 = {
2523
+ fg: colors3.gray[600],
2524
+ fgHover: colors3.gray[700],
2525
+ bgHover: colors3.gray[50],
2526
+ brandBgHover: colors3.brand[50],
2527
+ brandFgHover: colors3.brand[700],
2528
+ iconFg: colors3.gray[500],
2529
+ iconFgHover: colors3.gray[700],
2530
+ brandIconFgHover: colors3.brand[700]
2531
+ };
2532
+ var iconColors3 = {
2533
+ fgBrand: colors3.brand[600],
2534
+ fgBrandOnBrand: colors3.brand[200],
2535
+ featuredModernBorder: colors3.gray[200],
2536
+ featuredLightFgBrand: colors3.brand[600],
2537
+ featuredLightFgGray: colors3.gray[500],
2538
+ featuredLightFgError: colors3.error[600],
2539
+ featuredLightFgWarning: colors3.warning[600],
2540
+ featuredLightFgSuccess: colors3.success[600],
2541
+ featuredDarkFgBrand: colors3.base.white,
2542
+ featuredDarkFgGray: colors3.base.white,
2543
+ featuredDarkFgError: colors3.base.white,
2544
+ featuredDarkFgWarning: colors3.base.white,
2545
+ featuredDarkFgSuccess: colors3.base.white
2546
+ };
2547
+ var navColors3 = {
2548
+ itemIconFg: colors3.gray[500],
2549
+ itemIconFgActive: colors3.gray[700],
2550
+ itemButtonIconFg: colors3.gray[500],
2551
+ itemButtonIconFgActive: colors3.gray[700]
2552
+ };
2553
+ var sliderColors3 = {
2554
+ handleBorder: colors3.brand[600],
2555
+ handleBg: colors3.base.white
2556
+ };
2557
+ var toggleColors3 = {
2558
+ buttonFgDisabled: colors3.gray[50]
2559
+ };
2560
+ var chartColors3 = {
2561
+ axisFg: colors3.gray[100],
2562
+ gridlineFg: colors3.gray[100],
2563
+ labelFg: colors3.gray[600],
2564
+ labelFgEmphasis: colors3.gray[700],
2565
+ bg: colors3.base.white,
2566
+ bgAlt: colors3.gray[50],
2567
+ tooltipBg: colors3.gray[950],
2568
+ tooltipFg: colors3.base.white,
2569
+ crosshairFg: colors3.gray[500],
2570
+ legendFg: text3.tertiary,
2571
+ series: [
2572
+ { fg: misc.purple[500], fgHover: misc.purple[600], bg: misc.purple[100], bgHover: misc.purple[200] },
2573
+ { fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
2574
+ { fg: misc.teal[300], fgHover: misc.teal[400], bg: misc.teal[50], bgHover: misc.teal[100] },
2575
+ { fg: colors3.warning[400], fgHover: colors3.warning[500], bg: colors3.warning[100], bgHover: colors3.warning[200] },
2576
+ { fg: misc.rose[400], fgHover: misc.rose[500], bg: misc.rose[100], bgHover: misc.rose[200] },
2577
+ { fg: misc.blueLight[400], fgHover: misc.blueLight[500], bg: misc.blueLight[100], bgHover: misc.blueLight[200] },
2578
+ { fg: misc.orange[300], fgHover: misc.orange[400], bg: misc.orange[100], bgHover: misc.orange[200] },
2579
+ { fg: misc.cyan[600], fgHover: misc.cyan[700], bg: misc.cyan[100], bgHover: misc.cyan[200] },
2580
+ { fg: misc.green[500], fgHover: misc.green[600], bg: misc.green[100], bgHover: misc.green[200] },
2581
+ { fg: misc.pink[400], fgHover: misc.pink[500], bg: misc.pink[100], bgHover: misc.pink[200] },
2582
+ { fg: misc.fuchsia[400], fgHover: misc.fuchsia[500], bg: misc.fuchsia[100], bgHover: misc.fuchsia[200] },
2583
+ { fg: misc.teal[600], fgHover: misc.teal[700], bg: misc.teal[100], bgHover: misc.teal[200] }
2584
+ ]
2585
+ };
2586
+ var focusRings3 = {
2587
+ brand: "0px 0px 0px 4px #4040403d",
2588
+ brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #4040403d",
2589
+ brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #4040403d",
2590
+ gray: "0px 0px 0px 4px #a0a0a624",
2591
+ grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #a0a0a624",
2592
+ grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #a0a0a624",
2593
+ error: "0px 0px 0px 4px #f044383d",
2594
+ errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
2595
+ };
2596
+ var forestAgencyPreset = {
2597
+ name: "forest-agency",
2598
+ defaultVariant: "light",
2599
+ variants: {
2600
+ light: {
2601
+ tokens: {
2602
+ colors: colors3,
2603
+ spacing,
2604
+ radius: radius3,
2605
+ shadows,
2606
+ focusRings: focusRings3,
2607
+ fontFamily: '"Aeonik", sans-serif',
2608
+ fontSize,
2609
+ lineHeight,
2610
+ fontWeight,
2611
+ display,
2612
+ container,
2613
+ widths,
2614
+ text: text3,
2615
+ bg: bg3,
2616
+ fg: fg3,
2617
+ border: border3,
2618
+ buttonColors: buttonColors3,
2619
+ avatarColors: avatarColors3,
2620
+ breadcrumbColors: breadcrumbColors3,
2621
+ iconColors: iconColors3,
2622
+ navColors: navColors3,
2623
+ sliderColors: sliderColors3,
2624
+ toggleColors: toggleColors3,
2625
+ chartColors: chartColors3,
2626
+ alpha
2627
+ }
2628
+ }
2629
+ }
2630
+ };
2631
+
2632
+ // src/theme/presets/forest-internal.ts
2633
+ var colors4 = {
2634
+ ...colors,
2635
+ /** Brand scale — pink/magenta for internal tools (#FF78F3) */
2636
+ brand: {
2637
+ 25: "#fff8fd",
2638
+ 50: "#fff0fa",
2639
+ 100: "#ffe0f5",
2640
+ 200: "#ffc0eb",
2641
+ 300: "#ff90d8",
2642
+ 400: "#FF78F3",
2643
+ 500: "#e650d4",
2644
+ 600: "#cc28b5",
2645
+ 700: "#a3008c",
2646
+ 800: "#7a0066",
2647
+ 900: "#520044",
2648
+ 950: "#290022"
2649
+ },
2650
+ /** Warm-neutral gray scale */
2651
+ gray: {
2652
+ 25: "#fdfcfc",
2653
+ 50: "#faf9f8",
2654
+ 100: "#f5f3f1",
2655
+ 200: "#e8e5e3",
2656
+ 300: "#d8d8dc",
2657
+ 400: "#a0a0a6",
2658
+ 500: "#71717a",
2659
+ 600: "#52525b",
2660
+ 700: "#3f3f46",
2661
+ 800: "#27272a",
2662
+ 900: "#18181b",
2663
+ 950: "#09090b"
2664
+ }
2665
+ };
2666
+ var radius4 = {
2667
+ ...radius,
2668
+ xxs: 1,
2669
+ xs: 2,
2670
+ sm: 3,
2671
+ md: 4,
2672
+ lg: 5,
2673
+ xl: 6,
2674
+ "2xl": 8,
2675
+ "3xl": 10,
2676
+ "4xl": 12
2677
+ };
2678
+ var text4 = {
2679
+ primary: colors4.gray[900],
2680
+ secondary: colors4.gray[700],
2681
+ secondaryHover: colors4.gray[800],
2682
+ tertiary: colors4.gray[600],
2683
+ tertiaryHover: colors4.gray[700],
2684
+ quaternary: colors4.gray[500],
2685
+ disabled: colors4.gray[500],
2686
+ placeholder: colors4.gray[500],
2687
+ placeholderSubtle: colors4.gray[300],
2688
+ white: colors4.base.white,
2689
+ brandPrimary: colors4.brand[900],
2690
+ brandSecondary: colors4.brand[700],
2691
+ brandTertiary: colors4.brand[600],
2692
+ brandTertiaryAlt: colors4.brand[600],
2693
+ primaryOnBrand: colors4.base.white,
2694
+ secondaryOnBrand: colors4.brand[200],
2695
+ tertiaryOnBrand: colors4.brand[200],
2696
+ quaternaryOnBrand: colors4.brand[300],
2697
+ errorPrimary: colors4.error[600],
2698
+ warningPrimary: colors4.warning[600],
2699
+ successPrimary: colors4.success[600]
2700
+ };
2701
+ var bg4 = {
2702
+ primary: colors4.gray[50],
2703
+ primaryAlt: colors4.gray[50],
2704
+ primaryHover: colors4.gray[100],
2705
+ primarySolid: colors4.gray[950],
2706
+ secondary: colors4.base.white,
2707
+ secondaryAlt: colors4.base.white,
2708
+ secondarySubtle: colors4.gray[25],
2709
+ secondaryHover: colors4.gray[50],
2710
+ secondarySolid: colors4.gray[600],
2711
+ tertiary: colors4.gray[100],
2712
+ quaternary: colors4.gray[200],
2713
+ active: colors4.gray[200],
2714
+ disabled: colors4.gray[100],
2715
+ disabledSubtle: colors4.gray[50],
2716
+ overlay: colors4.gray[950],
2717
+ brandPrimary: colors4.brand[50],
2718
+ brandPrimaryAlt: colors4.brand[50],
2719
+ brandSecondary: colors4.brand[100],
2720
+ brandSolid: colors4.brand[600],
2721
+ brandSolidHover: colors4.brand[700],
2722
+ brandSection: colors4.brand[800],
2723
+ brandSectionSubtle: colors4.brand[700],
2724
+ errorPrimary: colors4.error[50],
2725
+ errorSecondary: colors4.error[100],
2726
+ errorSolid: colors4.error[600],
2727
+ warningPrimary: colors4.warning[50],
2728
+ warningSecondary: colors4.warning[100],
2729
+ warningSolid: colors4.warning[600],
2730
+ successPrimary: colors4.success[50],
2731
+ successSecondary: colors4.success[100],
2732
+ successSolid: colors4.success[600]
2733
+ };
2734
+ var fg4 = {
2735
+ primary: colors4.gray[900],
2736
+ secondary: colors4.gray[700],
2737
+ secondaryHover: colors4.gray[800],
2738
+ tertiary: colors4.gray[600],
2739
+ tertiaryHover: colors4.gray[700],
2740
+ quaternary: colors4.gray[500],
2741
+ quaternaryHover: colors4.gray[600],
2742
+ quinary: colors4.gray[400],
2743
+ quinaryHover: colors4.gray[500],
2744
+ senary: colors4.gray[300],
2745
+ white: colors4.base.white,
2746
+ disabled: colors4.gray[400],
2747
+ disabledSubtle: colors4.gray[300],
2748
+ brandPrimary: colors4.brand[600],
2749
+ brandPrimaryAlt: colors4.brand[600],
2750
+ brandSecondary: colors4.brand[500],
2751
+ errorPrimary: colors4.error[600],
2752
+ errorSecondary: colors4.error[500],
2753
+ warningPrimary: colors4.warning[600],
2754
+ warningSecondary: colors4.warning[500],
2755
+ successPrimary: colors4.success[600],
2756
+ successSecondary: colors4.success[500]
2757
+ };
2758
+ var border4 = {
2759
+ primary: colors4.gray[300],
2760
+ secondary: colors4.gray[200],
2761
+ tertiary: colors4.gray[100],
2762
+ disabled: colors4.gray[300],
2763
+ disabledSubtle: colors4.gray[200],
2764
+ brand: colors4.brand[300],
2765
+ brandSolid: colors4.brand[600],
2766
+ brandSolidAlt: colors4.brand[600],
2767
+ error: colors4.error[300],
2768
+ errorSolid: colors4.error[600]
2769
+ };
2770
+ var buttonColors4 = {
2771
+ primary: {
2772
+ bg: colors4.brand[600],
2773
+ bgHover: colors4.brand[700],
2774
+ fg: colors4.base.white,
2775
+ fgHover: colors4.base.white,
2776
+ border: colors4.brand[600],
2777
+ borderHover: colors4.brand[700]
2778
+ },
2779
+ secondary: {
2780
+ bg: colors4.base.white,
2781
+ bgHover: colors4.gray[50],
2782
+ fg: colors4.gray[700],
2783
+ fgHover: colors4.gray[800],
2784
+ border: colors4.gray[300],
2785
+ borderHover: colors4.gray[300]
2786
+ },
2787
+ secondaryColor: {
2788
+ bg: colors4.base.white,
2789
+ bgHover: colors4.brand[50],
2790
+ fg: colors4.brand[700],
2791
+ fgHover: colors4.brand[800],
2792
+ border: colors4.brand[300],
2793
+ borderHover: colors4.brand[300]
2794
+ },
2795
+ tertiary: {
2796
+ fg: colors4.gray[600],
2797
+ fgHover: colors4.gray[700],
2798
+ bgHover: colors4.gray[50]
2799
+ },
2800
+ tertiaryColor: {
2801
+ fg: colors4.brand[700],
2802
+ fgHover: colors4.brand[800],
2803
+ bgHover: colors4.brand[50]
2804
+ },
2805
+ primaryError: {
2806
+ bg: colors4.error[600],
2807
+ bgHover: colors4.error[700],
2808
+ fg: colors4.base.white,
2809
+ fgHover: colors4.base.white,
2810
+ border: colors4.error[600],
2811
+ borderHover: colors4.error[700]
2812
+ },
2813
+ secondaryError: {
2814
+ bg: colors4.base.white,
2815
+ bgHover: colors4.error[50],
2816
+ fg: colors4.error[700],
2817
+ fgHover: colors4.error[800],
2818
+ border: colors4.error[300],
2819
+ borderHover: colors4.error[300]
2820
+ },
2821
+ tertiaryError: {
2822
+ fg: colors4.error[700],
2823
+ fgHover: colors4.error[800],
2824
+ bgHover: colors4.error[50]
2825
+ }
2826
+ };
2827
+ var avatarColors4 = {
2828
+ bg: colors4.gray[100],
2829
+ contrastBorder: "#00000014",
2830
+ profilePhotoBorder: colors4.base.white,
2831
+ focusBorder: "#a0a0a624"
2832
+ // gray[400] + 14% alpha
2833
+ };
2834
+ var breadcrumbColors4 = {
2835
+ fg: colors4.gray[600],
2836
+ fgHover: colors4.gray[700],
2837
+ bgHover: colors4.gray[50],
2838
+ brandBgHover: colors4.brand[50],
2839
+ brandFgHover: colors4.brand[700],
2840
+ iconFg: colors4.gray[500],
2841
+ iconFgHover: colors4.gray[700],
2842
+ brandIconFgHover: colors4.brand[700]
2843
+ };
2844
+ var iconColors4 = {
2845
+ fgBrand: colors4.brand[600],
2846
+ fgBrandOnBrand: colors4.brand[200],
2847
+ featuredModernBorder: colors4.gray[200],
2848
+ featuredLightFgBrand: colors4.brand[600],
2849
+ featuredLightFgGray: colors4.gray[500],
2850
+ featuredLightFgError: colors4.error[600],
2851
+ featuredLightFgWarning: colors4.warning[600],
2852
+ featuredLightFgSuccess: colors4.success[600],
2853
+ featuredDarkFgBrand: colors4.base.white,
2854
+ featuredDarkFgGray: colors4.base.white,
2855
+ featuredDarkFgError: colors4.base.white,
2856
+ featuredDarkFgWarning: colors4.base.white,
2857
+ featuredDarkFgSuccess: colors4.base.white
2858
+ };
2859
+ var navColors4 = {
2860
+ itemIconFg: colors4.gray[500],
2861
+ itemIconFgActive: colors4.gray[700],
2862
+ itemButtonIconFg: colors4.gray[500],
2863
+ itemButtonIconFgActive: colors4.gray[700]
2864
+ };
2865
+ var sliderColors4 = {
2866
+ handleBorder: colors4.brand[600],
2867
+ handleBg: colors4.base.white
2868
+ };
2869
+ var toggleColors4 = {
2870
+ buttonFgDisabled: colors4.gray[50]
2871
+ };
2872
+ var chartColors4 = {
2873
+ axisFg: colors4.gray[100],
2874
+ gridlineFg: colors4.gray[100],
2875
+ labelFg: colors4.gray[600],
2876
+ labelFgEmphasis: colors4.gray[700],
2877
+ bg: colors4.base.white,
2878
+ bgAlt: colors4.gray[50],
2879
+ tooltipBg: colors4.gray[950],
2880
+ tooltipFg: colors4.base.white,
2881
+ crosshairFg: colors4.gray[500],
2882
+ legendFg: text4.tertiary,
2883
+ series: [
2884
+ { fg: misc.purple[500], fgHover: misc.purple[600], bg: misc.purple[100], bgHover: misc.purple[200] },
2885
+ { fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
2886
+ { fg: misc.teal[300], fgHover: misc.teal[400], bg: misc.teal[50], bgHover: misc.teal[100] },
2887
+ { fg: colors4.warning[400], fgHover: colors4.warning[500], bg: colors4.warning[100], bgHover: colors4.warning[200] },
2888
+ { fg: misc.rose[400], fgHover: misc.rose[500], bg: misc.rose[100], bgHover: misc.rose[200] },
2889
+ { fg: misc.blueLight[400], fgHover: misc.blueLight[500], bg: misc.blueLight[100], bgHover: misc.blueLight[200] },
2890
+ { fg: misc.orange[300], fgHover: misc.orange[400], bg: misc.orange[100], bgHover: misc.orange[200] },
2891
+ { fg: misc.cyan[600], fgHover: misc.cyan[700], bg: misc.cyan[100], bgHover: misc.cyan[200] },
2892
+ { fg: misc.green[500], fgHover: misc.green[600], bg: misc.green[100], bgHover: misc.green[200] },
2893
+ { fg: misc.pink[400], fgHover: misc.pink[500], bg: misc.pink[100], bgHover: misc.pink[200] },
2894
+ { fg: misc.fuchsia[400], fgHover: misc.fuchsia[500], bg: misc.fuchsia[100], bgHover: misc.fuchsia[200] },
2895
+ { fg: misc.teal[600], fgHover: misc.teal[700], bg: misc.teal[100], bgHover: misc.teal[200] }
2896
+ ]
2897
+ };
2898
+ var focusRings4 = {
2899
+ brand: "0px 0px 0px 4px #4040403d",
2900
+ brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #4040403d",
2901
+ brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #4040403d",
2902
+ gray: "0px 0px 0px 4px #a0a0a624",
2903
+ grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #a0a0a624",
2904
+ grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #a0a0a624",
2905
+ error: "0px 0px 0px 4px #f044383d",
2906
+ errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
2907
+ };
2908
+ var forestInternalPreset = {
2909
+ name: "forest-internal",
2910
+ defaultVariant: "light",
2911
+ variants: {
2912
+ light: {
2913
+ tokens: {
2914
+ colors: colors4,
2915
+ spacing,
2916
+ radius: radius4,
2917
+ shadows,
2918
+ focusRings: focusRings4,
2919
+ fontFamily: '"Aeonik", sans-serif',
2920
+ fontSize,
2921
+ lineHeight,
2922
+ fontWeight,
2923
+ display,
2924
+ container,
2925
+ widths,
2926
+ text: text4,
2927
+ bg: bg4,
2928
+ fg: fg4,
2929
+ border: border4,
2930
+ buttonColors: buttonColors4,
2931
+ avatarColors: avatarColors4,
2932
+ breadcrumbColors: breadcrumbColors4,
2933
+ iconColors: iconColors4,
2934
+ navColors: navColors4,
2935
+ sliderColors: sliderColors4,
2936
+ toggleColors: toggleColors4,
2937
+ chartColors: chartColors4,
2938
+ alpha
2939
+ }
2940
+ }
2941
+ }
2942
+ };
2943
+
2228
2944
  // src/theme/presets/index.ts
2229
2945
  var presetRegistry = /* @__PURE__ */ new Map();
2230
- presetRegistry.set(forestPreset.name, forestPreset);
2231
- presetRegistry.set(alkemyPlusPreset.name, alkemyPlusPreset);
2946
+ presetRegistry.set(forestExternalPreset.name, forestExternalPreset);
2947
+ presetRegistry.set(forestAgencyPreset.name, forestAgencyPreset);
2948
+ presetRegistry.set(forestInternalPreset.name, forestInternalPreset);
2232
2949
  function getPreset(name) {
2233
2950
  return presetRegistry.get(name);
2234
2951
  }
@@ -2240,18 +2957,10 @@ function getAvailablePresets() {
2240
2957
  }
2241
2958
 
2242
2959
  // src/theme/index.ts
2243
- var forestThemeOptions = {
2244
- palette,
2245
- typography,
2246
- components,
2247
- shadows: shadows2,
2248
- shape: {
2249
- borderRadius: 8
2250
- }
2251
- };
2252
- var forestTheme = styles.createTheme(forestThemeOptions);
2960
+ var agencyTokens = forestAgencyPreset.variants.light.tokens;
2961
+ var forestTheme = buildTheme(agencyTokens);
2962
+ var forestThemeOptions = buildThemeOptions(agencyTokens);
2253
2963
 
2254
- exports.alkemyPlusPreset = alkemyPlusPreset;
2255
2964
  exports.alpha = alpha;
2256
2965
  exports.avatarColors = avatarColors;
2257
2966
  exports.bg = bg;
@@ -2270,16 +2979,24 @@ exports.focusRings = focusRings;
2270
2979
  exports.fontFamily = fontFamily;
2271
2980
  exports.fontSize = fontSize;
2272
2981
  exports.fontWeight = fontWeight;
2273
- exports.forestPreset = forestPreset;
2982
+ exports.forestAgencyPreset = forestAgencyPreset;
2983
+ exports.forestExternalPreset = forestExternalPreset;
2984
+ exports.forestInternalPreset = forestInternalPreset;
2274
2985
  exports.forestTheme = forestTheme;
2275
2986
  exports.forestThemeOptions = forestThemeOptions;
2276
2987
  exports.getAvailablePresets = getAvailablePresets;
2277
2988
  exports.getPreset = getPreset;
2989
+ exports.gray = gray;
2278
2990
  exports.iconColors = iconColors;
2991
+ exports.info = info;
2279
2992
  exports.lineHeight = lineHeight;
2993
+ exports.magenta = magenta;
2994
+ exports.misc = misc;
2280
2995
  exports.navColors = navColors;
2281
2996
  exports.palette = palette;
2282
2997
  exports.radius = radius;
2998
+ exports.radiusSharp = radiusSharp;
2999
+ exports.red = red;
2283
3000
  exports.registerPreset = registerPreset;
2284
3001
  exports.shadows = shadows2;
2285
3002
  exports.sliderColors = sliderColors;
@@ -2287,6 +3004,7 @@ exports.spacing = spacing;
2287
3004
  exports.text = text;
2288
3005
  exports.toggleColors = toggleColors;
2289
3006
  exports.typography = typography;
3007
+ exports.violet = violet;
2290
3008
  exports.widths = widths;
2291
3009
  //# sourceMappingURL=theme.js.map
2292
3010
  //# sourceMappingURL=theme.js.map