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