@matteoaliano/forest-ui 0.3.2 → 0.3.4

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
@@ -61,20 +61,6 @@ var red = {
61
61
  900: "#520000",
62
62
  950: "#290000"
63
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
64
  var misc = {
79
65
  teal: {
80
66
  25: "#f6fefc",
@@ -242,55 +228,66 @@ var radiusSharp = {
242
228
  "3xl": 10,
243
229
  "4xl": 12
244
230
  };
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
231
+ var base = {
232
+ white: "#ffffff",
233
+ black: "#000000",
234
+ transparent: "#ffffff00"
235
+ };
236
+ var error = {
237
+ 25: "#fffbfa",
238
+ 50: "#fef3f2",
239
+ 100: "#fee4e2",
240
+ 200: "#fecdca",
241
+ 300: "#fda29b",
242
+ 400: "#f97066",
243
+ 500: "#f04438",
244
+ 600: "#d92d20",
245
+ 700: "#b42318",
246
+ 800: "#912018",
247
+ 900: "#7a271a",
248
+ 950: "#55160c"
249
+ };
250
+ var warning = {
251
+ 25: "#fffcf5",
252
+ 50: "#fffaeb",
253
+ 100: "#fef0c7",
254
+ 200: "#fedf89",
255
+ 300: "#fec84b",
256
+ 400: "#fdb022",
257
+ 500: "#f79009",
258
+ 600: "#dc6803",
259
+ 700: "#b54708",
260
+ 800: "#93370d",
261
+ 900: "#7a2e0e",
262
+ 950: "#4e1d09"
263
+ };
264
+ var success = {
265
+ 25: "#f6fef9",
266
+ 50: "#ecfdf3",
267
+ 100: "#dcfae6",
268
+ 200: "#abefc6",
269
+ 300: "#75e0a7",
270
+ 400: "#47cd89",
271
+ 500: "#17b26a",
272
+ 600: "#079455",
273
+ 700: "#067647",
274
+ 800: "#085d3a",
275
+ 900: "#074d31",
276
+ 950: "#053321"
277
+ };
278
+ var info = {
279
+ 25: "#f5faff",
280
+ 50: "#eff8ff",
281
+ 100: "#d1e9ff",
282
+ 200: "#b2ddff",
283
+ 300: "#84caff",
284
+ 400: "#53b1fd",
285
+ 500: "#2e90fa",
286
+ 600: "#1570ef",
287
+ 700: "#175cd3",
288
+ 800: "#1849a9",
289
+ 900: "#194185",
290
+ 950: "#102a56"
294
291
  };
295
292
  var spacing = {
296
293
  none: 0,
@@ -402,26 +399,26 @@ var text = {
402
399
  disabled: gray[500],
403
400
  placeholder: gray[500],
404
401
  placeholderSubtle: gray[300],
405
- white: colors.base.white,
402
+ white: base.white,
406
403
  brandPrimary: violet[900],
407
404
  brandSecondary: violet[700],
408
405
  brandTertiary: violet[600],
409
406
  brandTertiaryAlt: violet[600],
410
- primaryOnBrand: colors.base.white,
407
+ primaryOnBrand: base.white,
411
408
  secondaryOnBrand: violet[200],
412
409
  tertiaryOnBrand: violet[200],
413
410
  quaternaryOnBrand: violet[300],
414
- errorPrimary: colors.error[600],
415
- warningPrimary: colors.warning[600],
416
- successPrimary: colors.success[600]
411
+ errorPrimary: error[600],
412
+ warningPrimary: warning[600],
413
+ successPrimary: success[600]
417
414
  };
418
415
  var bg = {
419
416
  primary: gray[50],
420
417
  primaryAlt: gray[50],
421
418
  primaryHover: gray[100],
422
419
  primarySolid: gray[950],
423
- secondary: colors.base.white,
424
- secondaryAlt: colors.base.white,
420
+ secondary: base.white,
421
+ secondaryAlt: base.white,
425
422
  secondarySubtle: gray[25],
426
423
  secondaryHover: gray[50],
427
424
  secondarySolid: gray[600],
@@ -438,15 +435,15 @@ var bg = {
438
435
  brandSolidHover: violet[700],
439
436
  brandSection: violet[800],
440
437
  brandSectionSubtle: violet[700],
441
- errorPrimary: colors.error[50],
442
- errorSecondary: colors.error[100],
443
- errorSolid: colors.error[600],
444
- warningPrimary: colors.warning[50],
445
- warningSecondary: colors.warning[100],
446
- warningSolid: colors.warning[600],
447
- successPrimary: colors.success[50],
448
- successSecondary: colors.success[100],
449
- successSolid: colors.success[600]
438
+ errorPrimary: error[50],
439
+ errorSecondary: error[100],
440
+ errorSolid: error[600],
441
+ warningPrimary: warning[50],
442
+ warningSecondary: warning[100],
443
+ warningSolid: warning[600],
444
+ successPrimary: success[50],
445
+ successSecondary: success[100],
446
+ successSolid: success[600]
450
447
  };
451
448
  var fg = {
452
449
  primary: gray[900],
@@ -459,18 +456,18 @@ var fg = {
459
456
  quinary: gray[400],
460
457
  quinaryHover: gray[500],
461
458
  senary: gray[300],
462
- white: colors.base.white,
459
+ white: base.white,
463
460
  disabled: gray[400],
464
461
  disabledSubtle: gray[300],
465
462
  brandPrimary: violet[600],
466
463
  brandPrimaryAlt: violet[600],
467
464
  brandSecondary: violet[500],
468
- errorPrimary: colors.error[600],
469
- errorSecondary: colors.error[500],
470
- warningPrimary: colors.warning[600],
471
- warningSecondary: colors.warning[500],
472
- successPrimary: colors.success[600],
473
- successSecondary: colors.success[500]
465
+ errorPrimary: error[600],
466
+ errorSecondary: error[500],
467
+ warningPrimary: warning[600],
468
+ warningSecondary: warning[500],
469
+ successPrimary: success[600],
470
+ successSecondary: success[500]
474
471
  };
475
472
  var border = {
476
473
  primary: gray[300],
@@ -481,28 +478,28 @@ var border = {
481
478
  brand: violet[300],
482
479
  brandSolid: violet[600],
483
480
  brandSolidAlt: violet[600],
484
- error: colors.error[300],
485
- errorSolid: colors.error[600]
481
+ error: error[300],
482
+ errorSolid: error[600]
486
483
  };
487
484
  var buttonColors = {
488
485
  primary: {
489
486
  bg: violet[600],
490
487
  bgHover: violet[700],
491
- fg: colors.base.white,
492
- fgHover: colors.base.white,
488
+ fg: base.white,
489
+ fgHover: base.white,
493
490
  border: violet[600],
494
491
  borderHover: violet[700]
495
492
  },
496
493
  secondary: {
497
- bg: colors.base.white,
498
- bgHover: gray[50],
499
- fg: gray[700],
500
- fgHover: gray[800],
501
- border: gray[300],
502
- borderHover: gray[300]
494
+ bg: gray[900],
495
+ bgHover: gray[950],
496
+ fg: base.white,
497
+ fgHover: base.white,
498
+ border: gray[900],
499
+ borderHover: gray[950]
503
500
  },
504
501
  secondaryColor: {
505
- bg: colors.base.white,
502
+ bg: base.white,
506
503
  bgHover: violet[50],
507
504
  fg: violet[700],
508
505
  fgHover: violet[800],
@@ -520,31 +517,31 @@ var buttonColors = {
520
517
  bgHover: violet[50]
521
518
  },
522
519
  primaryError: {
523
- bg: colors.error[600],
524
- bgHover: colors.error[700],
525
- fg: colors.base.white,
526
- fgHover: colors.base.white,
527
- border: colors.error[600],
528
- borderHover: colors.error[700]
520
+ bg: error[600],
521
+ bgHover: error[700],
522
+ fg: base.white,
523
+ fgHover: base.white,
524
+ border: error[600],
525
+ borderHover: error[700]
529
526
  },
530
527
  secondaryError: {
531
- bg: colors.base.white,
532
- bgHover: colors.error[50],
533
- fg: colors.error[700],
534
- fgHover: colors.error[800],
535
- border: colors.error[300],
536
- borderHover: colors.error[300]
528
+ bg: base.white,
529
+ bgHover: error[50],
530
+ fg: error[700],
531
+ fgHover: error[800],
532
+ border: error[300],
533
+ borderHover: error[300]
537
534
  },
538
535
  tertiaryError: {
539
- fg: colors.error[700],
540
- fgHover: colors.error[800],
541
- bgHover: colors.error[50]
536
+ fg: error[700],
537
+ fgHover: error[800],
538
+ bgHover: error[50]
542
539
  }
543
540
  };
544
541
  var avatarColors = {
545
542
  bg: gray[100],
546
543
  contrastBorder: "#00000014",
547
- profilePhotoBorder: colors.base.white,
544
+ profilePhotoBorder: base.white,
548
545
  focusBorder: "#a0a0a624"
549
546
  };
550
547
  var breadcrumbColors = {
@@ -563,14 +560,14 @@ var iconColors = {
563
560
  featuredModernBorder: gray[200],
564
561
  featuredLightFgBrand: violet[600],
565
562
  featuredLightFgGray: gray[500],
566
- featuredLightFgError: colors.error[600],
567
- featuredLightFgWarning: colors.warning[600],
568
- featuredLightFgSuccess: colors.success[600],
569
- featuredDarkFgBrand: colors.base.white,
570
- featuredDarkFgGray: colors.base.white,
571
- featuredDarkFgError: colors.base.white,
572
- featuredDarkFgWarning: colors.base.white,
573
- featuredDarkFgSuccess: colors.base.white
563
+ featuredLightFgError: error[600],
564
+ featuredLightFgWarning: warning[600],
565
+ featuredLightFgSuccess: success[600],
566
+ featuredDarkFgBrand: base.white,
567
+ featuredDarkFgGray: base.white,
568
+ featuredDarkFgError: base.white,
569
+ featuredDarkFgWarning: base.white,
570
+ featuredDarkFgSuccess: base.white
574
571
  };
575
572
  var navColors = {
576
573
  itemIconFg: gray[500],
@@ -580,7 +577,7 @@ var navColors = {
580
577
  };
581
578
  var sliderColors = {
582
579
  handleBorder: violet[600],
583
- handleBg: colors.base.white
580
+ handleBg: base.white
584
581
  };
585
582
  var toggleColors = {
586
583
  buttonFgDisabled: gray[50]
@@ -590,17 +587,17 @@ var chartColors = {
590
587
  gridlineFg: gray[100],
591
588
  labelFg: gray[600],
592
589
  labelFgEmphasis: gray[700],
593
- bg: colors.base.white,
590
+ bg: base.white,
594
591
  bgAlt: gray[50],
595
592
  tooltipBg: gray[950],
596
- tooltipFg: colors.base.white,
593
+ tooltipFg: base.white,
597
594
  crosshairFg: gray[500],
598
595
  legendFg: text.tertiary,
599
596
  series: [
600
597
  { fg: misc.purple[500], fgHover: misc.purple[600], bg: misc.purple[100], bgHover: misc.purple[200] },
601
598
  { fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
602
599
  { fg: misc.teal[300], fgHover: misc.teal[400], bg: misc.teal[50], bgHover: misc.teal[100] },
603
- { fg: colors.warning[400], fgHover: colors.warning[500], bg: colors.warning[100], bgHover: colors.warning[200] },
600
+ { fg: warning[400], fgHover: warning[500], bg: warning[100], bgHover: warning[200] },
604
601
  { fg: misc.rose[400], fgHover: misc.rose[500], bg: misc.rose[100], bgHover: misc.rose[200] },
605
602
  { fg: misc.blueLight[400], fgHover: misc.blueLight[500], bg: misc.blueLight[100], bgHover: misc.blueLight[200] },
606
603
  { fg: misc.orange[300], fgHover: misc.orange[400], bg: misc.orange[100], bgHover: misc.orange[200] },
@@ -641,43 +638,43 @@ var alpha = {
641
638
  // src/theme/palette.ts
642
639
  function buildPalette(tokens) {
643
640
  var _a;
644
- const { colors: colors5, text: text5, bg: bg5, fg: fg5, border: border5 } = tokens;
641
+ const { base: base2, error: error2, warning: warning2, success: success2, info: info2, text: text5, bg: bg5, fg: fg5, border: border5 } = tokens;
645
642
  return {
646
643
  primary: {
647
- main: violet[600],
648
- light: violet[400],
649
- dark: violet[700],
650
- contrastText: tokens.colors.base.white
644
+ main: tokens.bg.brandSolid,
645
+ light: tokens.fg.brandPrimary,
646
+ dark: tokens.bg.brandSolidHover,
647
+ contrastText: tokens.base.white
651
648
  },
652
649
  secondary: {
653
- main: gray[600],
654
- light: gray[400],
655
- dark: gray[700],
656
- contrastText: tokens.colors.base.white
650
+ main: tokens.bg.secondarySolid,
651
+ light: tokens.fg.secondary,
652
+ dark: tokens.text.secondaryHover,
653
+ contrastText: tokens.base.white
657
654
  },
658
655
  error: {
659
- main: colors5.error[600],
660
- light: colors5.error[300],
661
- dark: colors5.error[700],
662
- contrastText: colors5.base.white
656
+ main: tokens.error[600],
657
+ light: tokens.error[300],
658
+ dark: tokens.error[700],
659
+ contrastText: tokens.base.white
663
660
  },
664
661
  warning: {
665
- main: colors5.warning[600],
666
- light: colors5.warning[300],
667
- dark: colors5.warning[700],
668
- contrastText: colors5.base.white
662
+ main: tokens.warning[600],
663
+ light: tokens.warning[300],
664
+ dark: tokens.warning[700],
665
+ contrastText: tokens.base.white
669
666
  },
670
667
  success: {
671
- main: colors5.success[600],
672
- light: colors5.success[300],
673
- dark: colors5.success[700],
674
- contrastText: colors5.base.white
668
+ main: tokens.success[600],
669
+ light: tokens.success[300],
670
+ dark: tokens.success[700],
671
+ contrastText: tokens.base.white
675
672
  },
676
673
  info: {
677
- main: tokens.colors.info[600],
678
- light: tokens.colors.info[300],
679
- dark: tokens.colors.info[700],
680
- contrastText: tokens.colors.base.white
674
+ main: tokens.info[600],
675
+ light: tokens.info[300],
676
+ dark: tokens.info[700],
677
+ contrastText: tokens.base.white
681
678
  },
682
679
  background: {
683
680
  default: bg5.primary,
@@ -700,7 +697,11 @@ function buildPalette(tokens) {
700
697
  };
701
698
  }
702
699
  var palette = buildPalette({
703
- colors,
700
+ base,
701
+ error,
702
+ warning,
703
+ success,
704
+ info,
704
705
  text,
705
706
  bg,
706
707
  fg,
@@ -861,7 +862,11 @@ var shadows2 = buildShadows({
861
862
  // src/theme/components.ts
862
863
  function buildComponents(tokens) {
863
864
  const {
864
- colors: colors5,
865
+ base: base2,
866
+ error: error2,
867
+ warning: warning2,
868
+ success: success2,
869
+ info: info2,
865
870
  radius: radius5,
866
871
  focusRings: focusRings5,
867
872
  shadows: tokenShadows,
@@ -869,7 +874,8 @@ function buildComponents(tokens) {
869
874
  bg: bg5,
870
875
  fg: fg5,
871
876
  border: border5,
872
- buttonColors: buttonColors5
877
+ buttonColors: buttonColors5,
878
+ sliderColors: sliderColors5
873
879
  } = tokens;
874
880
  return {
875
881
  // ─── Button ─────────────────────────────────────────────────────
@@ -904,9 +910,12 @@ function buildComponents(tokens) {
904
910
  borderColor: buttonColors5.secondaryColor.borderHover
905
911
  }
906
912
  },
907
- outlinedSecondary: {
908
- borderColor: buttonColors5.secondary.border,
913
+ containedSecondary: {
914
+ backgroundColor: buttonColors5.secondary.bg,
915
+ color: buttonColors5.secondary.fg,
916
+ border: `1px solid ${buttonColors5.secondary.border}`,
909
917
  "&:hover": {
918
+ backgroundColor: buttonColors5.secondary.bgHover,
910
919
  borderColor: buttonColors5.secondary.borderHover
911
920
  }
912
921
  },
@@ -937,6 +946,14 @@ function buildComponents(tokens) {
937
946
  }
938
947
  }
939
948
  },
949
+ // ─── IconButton ─────────────────────────────────────────────────
950
+ MuiIconButton: {
951
+ styleOverrides: {
952
+ root: {
953
+ borderRadius: radius5.md
954
+ }
955
+ }
956
+ },
940
957
  // ─── FAB ────────────────────────────────────────────────────────
941
958
  MuiFab: {
942
959
  styleOverrides: {
@@ -1072,13 +1089,14 @@ function buildComponents(tokens) {
1072
1089
  select: {
1073
1090
  "&.MuiSelect-select": {
1074
1091
  minHeight: "auto",
1075
- padding: "6px 12px",
1092
+ padding: "6px 32px 6px 12px",
1076
1093
  fontSize: 14,
1077
1094
  lineHeight: "20px"
1078
1095
  }
1079
1096
  },
1080
1097
  icon: {
1081
- color: text5.placeholder
1098
+ color: text5.placeholder,
1099
+ right: 8
1082
1100
  }
1083
1101
  }
1084
1102
  },
@@ -1148,7 +1166,7 @@ function buildComponents(tokens) {
1148
1166
  color: fg5.brandPrimary
1149
1167
  },
1150
1168
  "&.Mui-checked:hover": {
1151
- color: violet[700]
1169
+ color: buttonColors5.primary.bgHover
1152
1170
  },
1153
1171
  "&.Mui-focusVisible": {
1154
1172
  outline: "none",
@@ -1178,7 +1196,7 @@ function buildComponents(tokens) {
1178
1196
  color: fg5.brandPrimary
1179
1197
  },
1180
1198
  "&.Mui-checked:hover": {
1181
- color: violet[700]
1199
+ color: buttonColors5.primary.bgHover
1182
1200
  },
1183
1201
  "&.Mui-focusVisible": {
1184
1202
  outline: "none",
@@ -1213,7 +1231,7 @@ function buildComponents(tokens) {
1213
1231
  }
1214
1232
  },
1215
1233
  "&.Mui-checked:hover + .MuiSwitch-track": {
1216
- backgroundColor: violet[700]
1234
+ backgroundColor: buttonColors5.primary.bgHover
1217
1235
  },
1218
1236
  "&.Mui-focusVisible .MuiSwitch-thumb": {
1219
1237
  boxShadow: focusRings5.brand
@@ -1491,44 +1509,44 @@ function buildComponents(tokens) {
1491
1509
  },
1492
1510
  colorPrimary: {
1493
1511
  "&.MuiChip-filled": {
1494
- backgroundColor: violet[50],
1495
- color: violet[700],
1496
- "& .MuiChip-deleteIcon": { color: violet[400] }
1512
+ backgroundColor: tokens.bg.brandPrimary,
1513
+ color: tokens.text.brandPrimary,
1514
+ "& .MuiChip-deleteIcon": { color: tokens.fg.brandPrimary }
1497
1515
  }
1498
1516
  },
1499
1517
  colorSecondary: {
1500
1518
  "&.MuiChip-filled": {
1501
- backgroundColor: gray[50],
1502
- color: gray[700],
1503
- "& .MuiChip-deleteIcon": { color: gray[400] }
1519
+ backgroundColor: tokens.bg.secondarySubtle,
1520
+ color: tokens.text.secondary,
1521
+ "& .MuiChip-deleteIcon": { color: tokens.fg.secondary }
1504
1522
  }
1505
1523
  },
1506
1524
  colorError: {
1507
1525
  "&.MuiChip-filled": {
1508
- backgroundColor: colors5.error[50],
1509
- color: colors5.error[700],
1510
- "& .MuiChip-deleteIcon": { color: colors5.error[400] }
1526
+ backgroundColor: error2[50],
1527
+ color: error2[700],
1528
+ "& .MuiChip-deleteIcon": { color: error2[400] }
1511
1529
  }
1512
1530
  },
1513
1531
  colorWarning: {
1514
1532
  "&.MuiChip-filled": {
1515
- backgroundColor: colors5.warning[50],
1516
- color: colors5.warning[700],
1517
- "& .MuiChip-deleteIcon": { color: colors5.warning[400] }
1533
+ backgroundColor: warning2[50],
1534
+ color: warning2[700],
1535
+ "& .MuiChip-deleteIcon": { color: warning2[400] }
1518
1536
  }
1519
1537
  },
1520
1538
  colorSuccess: {
1521
1539
  "&.MuiChip-filled": {
1522
- backgroundColor: colors5.success[50],
1523
- color: colors5.success[700],
1524
- "& .MuiChip-deleteIcon": { color: colors5.success[400] }
1540
+ backgroundColor: success2[50],
1541
+ color: success2[700],
1542
+ "& .MuiChip-deleteIcon": { color: success2[400] }
1525
1543
  }
1526
1544
  },
1527
1545
  colorInfo: {
1528
1546
  "&.MuiChip-filled": {
1529
- backgroundColor: info[50],
1530
- color: info[700],
1531
- "& .MuiChip-deleteIcon": { color: info[400] }
1547
+ backgroundColor: info2[50],
1548
+ color: info2[700],
1549
+ "& .MuiChip-deleteIcon": { color: info2[400] }
1532
1550
  }
1533
1551
  }
1534
1552
  }
@@ -1733,7 +1751,7 @@ function buildComponents(tokens) {
1733
1751
  },
1734
1752
  standardError: {
1735
1753
  backgroundColor: bg5.errorPrimary,
1736
- color: colors5.error[700],
1754
+ color: error2[700],
1737
1755
  border: `1px solid ${border5.error}`,
1738
1756
  "& .MuiAlert-icon": {
1739
1757
  color: fg5.errorPrimary
@@ -1741,26 +1759,26 @@ function buildComponents(tokens) {
1741
1759
  },
1742
1760
  standardWarning: {
1743
1761
  backgroundColor: bg5.warningPrimary,
1744
- color: colors5.warning[700],
1745
- border: `1px solid ${colors5.warning[300]}`,
1762
+ color: warning2[700],
1763
+ border: `1px solid ${warning2[300]}`,
1746
1764
  "& .MuiAlert-icon": {
1747
1765
  color: fg5.warningPrimary
1748
1766
  }
1749
1767
  },
1750
1768
  standardSuccess: {
1751
1769
  backgroundColor: bg5.successPrimary,
1752
- color: colors5.success[700],
1753
- border: `1px solid ${colors5.success[300]}`,
1770
+ color: success2[700],
1771
+ border: `1px solid ${success2[300]}`,
1754
1772
  "& .MuiAlert-icon": {
1755
1773
  color: fg5.successPrimary
1756
1774
  }
1757
1775
  },
1758
1776
  standardInfo: {
1759
- backgroundColor: info[50],
1760
- color: info[700],
1761
- border: `1px solid ${info[300]}`,
1777
+ backgroundColor: info2[50],
1778
+ color: info2[700],
1779
+ border: `1px solid ${info2[300]}`,
1762
1780
  "& .MuiAlert-icon": {
1763
- color: info[600]
1781
+ color: info2[600]
1764
1782
  }
1765
1783
  },
1766
1784
  icon: {
@@ -1934,6 +1952,8 @@ function buildComponents(tokens) {
1934
1952
  fontWeight: 500
1935
1953
  },
1936
1954
  cell: {
1955
+ display: "flex",
1956
+ alignItems: "center",
1937
1957
  fontSize: 14,
1938
1958
  lineHeight: "20px",
1939
1959
  color: fg5.tertiary,
@@ -1960,11 +1980,198 @@ function buildComponents(tokens) {
1960
1980
  }
1961
1981
  }
1962
1982
  }
1983
+ },
1984
+ // ─── DatePicker (@mui/x-date-pickers) ────────────────────────────
1985
+ // MUI X uses its own sub-components that are separate from MuiOutlinedInput,
1986
+ // so height/padding and brand colours must be set here independently.
1987
+ ...{
1988
+ // Input field — mirrors MuiOutlinedInput sizing
1989
+ MuiPickersTextField: {
1990
+ styleOverrides: {
1991
+ root: {
1992
+ "& .MuiInputBase-root": {
1993
+ height: 32,
1994
+ borderRadius: radius5.md,
1995
+ boxShadow: tokenShadows.xs,
1996
+ fontSize: 14,
1997
+ lineHeight: "20px"
1998
+ },
1999
+ "& .MuiInputBase-input": {
2000
+ padding: "6px 12px",
2001
+ fontSize: 14,
2002
+ lineHeight: "20px"
2003
+ },
2004
+ "& .MuiOutlinedInput-notchedOutline": {
2005
+ borderColor: border5.primary
2006
+ },
2007
+ "&:hover .MuiOutlinedInput-notchedOutline": {
2008
+ borderColor: border5.brand
2009
+ },
2010
+ "& .Mui-focused .MuiOutlinedInput-notchedOutline": {
2011
+ borderColor: border5.brandSolid,
2012
+ borderWidth: 1,
2013
+ boxShadow: "none"
2014
+ },
2015
+ "& .MuiInputAdornment-root .MuiIconButton-root": {
2016
+ color: fg5.quaternary,
2017
+ padding: 4,
2018
+ "&:hover": {
2019
+ backgroundColor: bg5.primaryHover,
2020
+ color: fg5.brandPrimary
2021
+ }
2022
+ }
2023
+ }
2024
+ }
2025
+ },
2026
+ // Calendar popup container
2027
+ MuiPickersPopper: {
2028
+ styleOverrides: {
2029
+ paper: {
2030
+ borderRadius: radius5.xl,
2031
+ boxShadow: tokenShadows.lg,
2032
+ border: `1px solid ${border5.secondary}`,
2033
+ marginTop: 4
2034
+ }
2035
+ }
2036
+ },
2037
+ // Calendar layout
2038
+ MuiDateCalendar: {
2039
+ styleOverrides: {
2040
+ root: {
2041
+ width: 280,
2042
+ height: "auto"
2043
+ }
2044
+ }
2045
+ },
2046
+ // Month/year header navigation
2047
+ MuiPickersCalendarHeader: {
2048
+ styleOverrides: {
2049
+ root: {
2050
+ paddingLeft: 16,
2051
+ paddingRight: 8,
2052
+ marginTop: 8
2053
+ },
2054
+ label: {
2055
+ fontSize: 14,
2056
+ fontWeight: 600,
2057
+ color: text5.primary
2058
+ },
2059
+ switchViewButton: {
2060
+ color: fg5.quaternary,
2061
+ "&:hover": { backgroundColor: bg5.primaryHover, color: fg5.brandPrimary }
2062
+ }
2063
+ }
2064
+ },
2065
+ MuiPickersArrowSwitcher: {
2066
+ styleOverrides: {
2067
+ button: {
2068
+ color: fg5.quaternary,
2069
+ "&:hover": { backgroundColor: bg5.primaryHover, color: fg5.brandPrimary }
2070
+ }
2071
+ }
2072
+ },
2073
+ // Day/week header labels
2074
+ MuiDayCalendar: {
2075
+ styleOverrides: {
2076
+ weekDayLabel: {
2077
+ fontSize: 12,
2078
+ fontWeight: 500,
2079
+ color: text5.tertiary,
2080
+ width: 32,
2081
+ height: 32
2082
+ },
2083
+ weekContainer: {
2084
+ margin: "2px 0"
2085
+ }
2086
+ }
2087
+ },
2088
+ // Individual day cells
2089
+ MuiPickersDay: {
2090
+ defaultProps: {
2091
+ disableRipple: true
2092
+ },
2093
+ styleOverrides: {
2094
+ root: {
2095
+ fontSize: 13,
2096
+ fontWeight: 400,
2097
+ width: 32,
2098
+ height: 32,
2099
+ borderRadius: radius5.md,
2100
+ color: text5.primary,
2101
+ backgroundColor: "transparent",
2102
+ "&:hover": {
2103
+ backgroundColor: bg5.primaryHover
2104
+ },
2105
+ "&.Mui-selected": {
2106
+ backgroundColor: fg5.brandPrimary,
2107
+ color: base2.white,
2108
+ fontWeight: 600,
2109
+ "&:hover": {
2110
+ backgroundColor: buttonColors5.primary.bgHover
2111
+ },
2112
+ "&:focus": {
2113
+ backgroundColor: fg5.brandPrimary
2114
+ }
2115
+ },
2116
+ "&.MuiPickersDay-today": {
2117
+ border: `1px solid ${border5.brandSolid}`,
2118
+ color: fg5.brandPrimary,
2119
+ backgroundColor: "transparent",
2120
+ fontWeight: 600,
2121
+ "&.Mui-selected": {
2122
+ backgroundColor: fg5.brandPrimary,
2123
+ color: base2.white,
2124
+ border: "none"
2125
+ }
2126
+ },
2127
+ "&.Mui-focusVisible": {
2128
+ boxShadow: focusRings5.brand
2129
+ },
2130
+ "&.Mui-disabled": {
2131
+ color: text5.disabled
2132
+ }
2133
+ }
2134
+ }
2135
+ },
2136
+ // Year picker cells
2137
+ MuiPickersYear: {
2138
+ styleOverrides: {
2139
+ yearButton: {
2140
+ fontSize: 13,
2141
+ borderRadius: radius5.md,
2142
+ "&:hover": { backgroundColor: bg5.primaryHover },
2143
+ "&.Mui-selected": {
2144
+ backgroundColor: fg5.brandPrimary,
2145
+ color: base2.white,
2146
+ "&:hover": { backgroundColor: buttonColors5.primary.bgHover }
2147
+ }
2148
+ }
2149
+ }
2150
+ },
2151
+ // Month picker cells
2152
+ MuiPickersMonth: {
2153
+ styleOverrides: {
2154
+ monthButton: {
2155
+ fontSize: 13,
2156
+ borderRadius: radius5.md,
2157
+ "&:hover": { backgroundColor: bg5.primaryHover },
2158
+ "&.Mui-selected": {
2159
+ backgroundColor: fg5.brandPrimary,
2160
+ color: base2.white,
2161
+ "&:hover": { backgroundColor: buttonColors5.primary.bgHover }
2162
+ }
2163
+ }
2164
+ }
2165
+ }
1963
2166
  }
1964
2167
  };
1965
2168
  }
1966
2169
  var components = buildComponents({
1967
- colors,
2170
+ base,
2171
+ error,
2172
+ warning,
2173
+ success,
2174
+ info,
1968
2175
  radius,
1969
2176
  focusRings,
1970
2177
  shadows,
@@ -1972,7 +2179,8 @@ var components = buildComponents({
1972
2179
  bg,
1973
2180
  fg,
1974
2181
  border,
1975
- buttonColors});
2182
+ buttonColors,
2183
+ sliderColors});
1976
2184
 
1977
2185
  // src/theme/buildTheme.ts
1978
2186
  function buildThemeOptions(tokens) {
@@ -1991,39 +2199,6 @@ function buildTheme(tokens) {
1991
2199
  }
1992
2200
 
1993
2201
  // src/theme/presets/forest-external.ts
1994
- var colors2 = {
1995
- ...colors,
1996
- /** Brand scale — purple for client-facing products (#9D5FFF) */
1997
- brand: {
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"
2010
- },
2011
- /** Warm-neutral gray scale */
2012
- gray: {
2013
- 25: "#fdfcfc",
2014
- 50: "#faf9f8",
2015
- 100: "#f5f3f1",
2016
- 200: "#e8e5e3",
2017
- 300: "#d8d8dc",
2018
- 400: "#a0a0a6",
2019
- 500: "#71717a",
2020
- 600: "#52525b",
2021
- 700: "#3f3f46",
2022
- 800: "#27272a",
2023
- 900: "#18181b",
2024
- 950: "#09090b"
2025
- }
2026
- };
2027
2202
  var radius2 = {
2028
2203
  ...radius,
2029
2204
  xxs: 1,
@@ -2037,215 +2212,215 @@ var radius2 = {
2037
2212
  "4xl": 12
2038
2213
  };
2039
2214
  var text2 = {
2040
- primary: colors2.gray[900],
2041
- secondary: colors2.gray[700],
2042
- secondaryHover: colors2.gray[800],
2043
- tertiary: colors2.gray[600],
2044
- tertiaryHover: colors2.gray[700],
2045
- quaternary: colors2.gray[500],
2046
- disabled: colors2.gray[500],
2047
- placeholder: colors2.gray[500],
2048
- placeholderSubtle: colors2.gray[300],
2049
- white: colors2.base.white,
2050
- brandPrimary: colors2.brand[900],
2051
- brandSecondary: colors2.brand[700],
2052
- brandTertiary: colors2.brand[600],
2053
- brandTertiaryAlt: colors2.brand[600],
2054
- primaryOnBrand: colors2.base.white,
2055
- secondaryOnBrand: colors2.brand[200],
2056
- tertiaryOnBrand: colors2.brand[200],
2057
- quaternaryOnBrand: colors2.brand[300],
2058
- errorPrimary: colors2.error[600],
2059
- warningPrimary: colors2.warning[600],
2060
- successPrimary: colors2.success[600]
2215
+ primary: gray[900],
2216
+ secondary: gray[700],
2217
+ secondaryHover: gray[800],
2218
+ tertiary: gray[600],
2219
+ tertiaryHover: gray[700],
2220
+ quaternary: gray[500],
2221
+ disabled: gray[500],
2222
+ placeholder: gray[500],
2223
+ placeholderSubtle: gray[300],
2224
+ white: base.white,
2225
+ brandPrimary: violet[900],
2226
+ brandSecondary: violet[700],
2227
+ brandTertiary: violet[600],
2228
+ brandTertiaryAlt: violet[600],
2229
+ primaryOnBrand: base.white,
2230
+ secondaryOnBrand: violet[200],
2231
+ tertiaryOnBrand: violet[200],
2232
+ quaternaryOnBrand: violet[300],
2233
+ errorPrimary: error[600],
2234
+ warningPrimary: warning[600],
2235
+ successPrimary: success[600]
2061
2236
  };
2062
2237
  var bg2 = {
2063
- primary: colors2.gray[50],
2064
- primaryAlt: colors2.gray[50],
2065
- primaryHover: colors2.gray[100],
2066
- primarySolid: colors2.gray[950],
2067
- secondary: colors2.base.white,
2068
- secondaryAlt: colors2.base.white,
2069
- secondarySubtle: colors2.gray[25],
2070
- secondaryHover: colors2.gray[50],
2071
- secondarySolid: colors2.gray[600],
2072
- tertiary: colors2.gray[100],
2073
- quaternary: colors2.gray[200],
2074
- active: colors2.gray[200],
2075
- disabled: colors2.gray[100],
2076
- disabledSubtle: colors2.gray[50],
2077
- overlay: colors2.gray[950],
2078
- brandPrimary: colors2.brand[50],
2079
- brandPrimaryAlt: colors2.brand[50],
2080
- brandSecondary: colors2.brand[100],
2081
- brandSolid: colors2.brand[600],
2082
- brandSolidHover: colors2.brand[700],
2083
- brandSection: colors2.brand[800],
2084
- brandSectionSubtle: colors2.brand[700],
2085
- errorPrimary: colors2.error[50],
2086
- errorSecondary: colors2.error[100],
2087
- errorSolid: colors2.error[600],
2088
- warningPrimary: colors2.warning[50],
2089
- warningSecondary: colors2.warning[100],
2090
- warningSolid: colors2.warning[600],
2091
- successPrimary: colors2.success[50],
2092
- successSecondary: colors2.success[100],
2093
- successSolid: colors2.success[600]
2238
+ primary: gray[50],
2239
+ primaryAlt: gray[50],
2240
+ primaryHover: gray[100],
2241
+ primarySolid: gray[950],
2242
+ secondary: base.white,
2243
+ secondaryAlt: base.white,
2244
+ secondarySubtle: gray[25],
2245
+ secondaryHover: gray[50],
2246
+ secondarySolid: gray[600],
2247
+ tertiary: gray[100],
2248
+ quaternary: gray[200],
2249
+ active: gray[200],
2250
+ disabled: gray[100],
2251
+ disabledSubtle: gray[50],
2252
+ overlay: gray[950],
2253
+ brandPrimary: violet[50],
2254
+ brandPrimaryAlt: violet[50],
2255
+ brandSecondary: violet[100],
2256
+ brandSolid: violet[400],
2257
+ brandSolidHover: violet[500],
2258
+ brandSection: violet[800],
2259
+ brandSectionSubtle: violet[700],
2260
+ errorPrimary: error[50],
2261
+ errorSecondary: error[100],
2262
+ errorSolid: error[600],
2263
+ warningPrimary: warning[50],
2264
+ warningSecondary: warning[100],
2265
+ warningSolid: warning[600],
2266
+ successPrimary: success[50],
2267
+ successSecondary: success[100],
2268
+ successSolid: success[600]
2094
2269
  };
2095
2270
  var fg2 = {
2096
- primary: colors2.gray[900],
2097
- secondary: colors2.gray[700],
2098
- secondaryHover: colors2.gray[800],
2099
- tertiary: colors2.gray[600],
2100
- tertiaryHover: colors2.gray[700],
2101
- quaternary: colors2.gray[500],
2102
- quaternaryHover: colors2.gray[600],
2103
- quinary: colors2.gray[400],
2104
- quinaryHover: colors2.gray[500],
2105
- senary: colors2.gray[300],
2106
- white: colors2.base.white,
2107
- disabled: colors2.gray[400],
2108
- disabledSubtle: colors2.gray[300],
2109
- brandPrimary: colors2.brand[600],
2110
- brandPrimaryAlt: colors2.brand[600],
2111
- brandSecondary: colors2.brand[500],
2112
- errorPrimary: colors2.error[600],
2113
- errorSecondary: colors2.error[500],
2114
- warningPrimary: colors2.warning[600],
2115
- warningSecondary: colors2.warning[500],
2116
- successPrimary: colors2.success[600],
2117
- successSecondary: colors2.success[500]
2271
+ primary: gray[900],
2272
+ secondary: gray[700],
2273
+ secondaryHover: gray[800],
2274
+ tertiary: gray[600],
2275
+ tertiaryHover: gray[700],
2276
+ quaternary: gray[500],
2277
+ quaternaryHover: gray[600],
2278
+ quinary: gray[400],
2279
+ quinaryHover: gray[500],
2280
+ senary: gray[300],
2281
+ white: base.white,
2282
+ disabled: gray[400],
2283
+ disabledSubtle: gray[300],
2284
+ brandPrimary: violet[400],
2285
+ brandPrimaryAlt: violet[400],
2286
+ brandSecondary: violet[400],
2287
+ errorPrimary: error[600],
2288
+ errorSecondary: error[500],
2289
+ warningPrimary: warning[600],
2290
+ warningSecondary: warning[500],
2291
+ successPrimary: success[600],
2292
+ successSecondary: success[500]
2118
2293
  };
2119
2294
  var border2 = {
2120
- primary: colors2.gray[300],
2121
- secondary: colors2.gray[200],
2122
- tertiary: colors2.gray[100],
2123
- disabled: colors2.gray[300],
2124
- disabledSubtle: colors2.gray[200],
2125
- brand: colors2.brand[300],
2126
- brandSolid: colors2.brand[600],
2127
- brandSolidAlt: colors2.brand[600],
2128
- error: colors2.error[300],
2129
- errorSolid: colors2.error[600]
2295
+ primary: gray[300],
2296
+ secondary: gray[200],
2297
+ tertiary: gray[100],
2298
+ disabled: gray[300],
2299
+ disabledSubtle: gray[200],
2300
+ brand: violet[300],
2301
+ brandSolid: violet[400],
2302
+ brandSolidAlt: violet[400],
2303
+ error: error[300],
2304
+ errorSolid: error[600]
2130
2305
  };
2131
2306
  var buttonColors2 = {
2132
2307
  primary: {
2133
- bg: colors2.brand[600],
2134
- bgHover: colors2.brand[700],
2135
- fg: colors2.base.white,
2136
- fgHover: colors2.base.white,
2137
- border: colors2.brand[600],
2138
- borderHover: colors2.brand[700]
2308
+ bg: violet[400],
2309
+ bgHover: violet[500],
2310
+ fg: base.white,
2311
+ fgHover: base.white,
2312
+ border: violet[400],
2313
+ borderHover: violet[500]
2139
2314
  },
2140
2315
  secondary: {
2141
- bg: colors2.base.white,
2142
- bgHover: colors2.gray[50],
2143
- fg: colors2.gray[700],
2144
- fgHover: colors2.gray[800],
2145
- border: colors2.gray[300],
2146
- borderHover: colors2.gray[300]
2316
+ bg: gray[900],
2317
+ bgHover: gray[950],
2318
+ fg: base.white,
2319
+ fgHover: base.white,
2320
+ border: gray[900],
2321
+ borderHover: gray[950]
2147
2322
  },
2148
2323
  secondaryColor: {
2149
- bg: colors2.base.white,
2150
- bgHover: colors2.brand[50],
2151
- fg: colors2.brand[700],
2152
- fgHover: colors2.brand[800],
2153
- border: colors2.brand[300],
2154
- borderHover: colors2.brand[300]
2324
+ bg: base.white,
2325
+ bgHover: violet[50],
2326
+ fg: violet[400],
2327
+ fgHover: violet[500],
2328
+ border: violet[300],
2329
+ borderHover: violet[300]
2155
2330
  },
2156
2331
  tertiary: {
2157
- fg: colors2.gray[600],
2158
- fgHover: colors2.gray[700],
2159
- bgHover: colors2.gray[50]
2332
+ fg: gray[600],
2333
+ fgHover: gray[700],
2334
+ bgHover: gray[50]
2160
2335
  },
2161
2336
  tertiaryColor: {
2162
- fg: colors2.brand[700],
2163
- fgHover: colors2.brand[800],
2164
- bgHover: colors2.brand[50]
2337
+ fg: violet[400],
2338
+ fgHover: violet[500],
2339
+ bgHover: violet[50]
2165
2340
  },
2166
2341
  primaryError: {
2167
- bg: colors2.error[600],
2168
- bgHover: colors2.error[700],
2169
- fg: colors2.base.white,
2170
- fgHover: colors2.base.white,
2171
- border: colors2.error[600],
2172
- borderHover: colors2.error[700]
2342
+ bg: error[600],
2343
+ bgHover: error[700],
2344
+ fg: base.white,
2345
+ fgHover: base.white,
2346
+ border: error[600],
2347
+ borderHover: error[700]
2173
2348
  },
2174
2349
  secondaryError: {
2175
- bg: colors2.base.white,
2176
- bgHover: colors2.error[50],
2177
- fg: colors2.error[700],
2178
- fgHover: colors2.error[800],
2179
- border: colors2.error[300],
2180
- borderHover: colors2.error[300]
2350
+ bg: base.white,
2351
+ bgHover: error[50],
2352
+ fg: error[700],
2353
+ fgHover: error[800],
2354
+ border: error[300],
2355
+ borderHover: error[300]
2181
2356
  },
2182
2357
  tertiaryError: {
2183
- fg: colors2.error[700],
2184
- fgHover: colors2.error[800],
2185
- bgHover: colors2.error[50]
2358
+ fg: error[700],
2359
+ fgHover: error[800],
2360
+ bgHover: error[50]
2186
2361
  }
2187
2362
  };
2188
2363
  var avatarColors2 = {
2189
- bg: colors2.gray[100],
2364
+ bg: gray[100],
2190
2365
  contrastBorder: "#00000014",
2191
- profilePhotoBorder: colors2.base.white,
2366
+ profilePhotoBorder: base.white,
2192
2367
  focusBorder: "#a0a0a624"
2193
2368
  // gray[400] + 14% alpha
2194
2369
  };
2195
2370
  var breadcrumbColors2 = {
2196
- fg: colors2.gray[600],
2197
- fgHover: colors2.gray[700],
2198
- bgHover: colors2.gray[50],
2199
- brandBgHover: colors2.brand[50],
2200
- brandFgHover: colors2.brand[700],
2201
- iconFg: colors2.gray[500],
2202
- iconFgHover: colors2.gray[700],
2203
- brandIconFgHover: colors2.brand[700]
2371
+ fg: gray[600],
2372
+ fgHover: gray[700],
2373
+ bgHover: gray[50],
2374
+ brandBgHover: violet[50],
2375
+ brandFgHover: violet[700],
2376
+ iconFg: gray[500],
2377
+ iconFgHover: gray[700],
2378
+ brandIconFgHover: violet[700]
2204
2379
  };
2205
2380
  var iconColors2 = {
2206
- fgBrand: colors2.brand[600],
2207
- fgBrandOnBrand: colors2.brand[200],
2208
- featuredModernBorder: colors2.gray[200],
2209
- featuredLightFgBrand: colors2.brand[600],
2210
- featuredLightFgGray: colors2.gray[500],
2211
- featuredLightFgError: colors2.error[600],
2212
- featuredLightFgWarning: colors2.warning[600],
2213
- featuredLightFgSuccess: colors2.success[600],
2214
- featuredDarkFgBrand: colors2.base.white,
2215
- featuredDarkFgGray: colors2.base.white,
2216
- featuredDarkFgError: colors2.base.white,
2217
- featuredDarkFgWarning: colors2.base.white,
2218
- featuredDarkFgSuccess: colors2.base.white
2381
+ fgBrand: violet[400],
2382
+ fgBrandOnBrand: violet[200],
2383
+ featuredModernBorder: gray[200],
2384
+ featuredLightFgBrand: violet[400],
2385
+ featuredLightFgGray: gray[500],
2386
+ featuredLightFgError: error[600],
2387
+ featuredLightFgWarning: warning[600],
2388
+ featuredLightFgSuccess: success[600],
2389
+ featuredDarkFgBrand: base.white,
2390
+ featuredDarkFgGray: base.white,
2391
+ featuredDarkFgError: base.white,
2392
+ featuredDarkFgWarning: base.white,
2393
+ featuredDarkFgSuccess: base.white
2219
2394
  };
2220
2395
  var navColors2 = {
2221
- itemIconFg: colors2.gray[500],
2222
- itemIconFgActive: colors2.gray[700],
2223
- itemButtonIconFg: colors2.gray[500],
2224
- itemButtonIconFgActive: colors2.gray[700]
2396
+ itemIconFg: gray[500],
2397
+ itemIconFgActive: gray[700],
2398
+ itemButtonIconFg: gray[500],
2399
+ itemButtonIconFgActive: gray[700]
2225
2400
  };
2226
2401
  var sliderColors2 = {
2227
- handleBorder: colors2.brand[600],
2228
- handleBg: colors2.base.white
2402
+ handleBorder: violet[400],
2403
+ handleBg: base.white
2229
2404
  };
2230
2405
  var toggleColors2 = {
2231
- buttonFgDisabled: colors2.gray[50]
2406
+ buttonFgDisabled: gray[50]
2232
2407
  };
2233
2408
  var chartColors2 = {
2234
- axisFg: colors2.gray[100],
2235
- gridlineFg: colors2.gray[100],
2236
- labelFg: colors2.gray[600],
2237
- labelFgEmphasis: colors2.gray[700],
2238
- bg: colors2.base.white,
2239
- bgAlt: colors2.gray[50],
2240
- tooltipBg: colors2.gray[950],
2241
- tooltipFg: colors2.base.white,
2242
- crosshairFg: colors2.gray[500],
2409
+ axisFg: gray[100],
2410
+ gridlineFg: gray[100],
2411
+ labelFg: gray[600],
2412
+ labelFgEmphasis: gray[700],
2413
+ bg: base.white,
2414
+ bgAlt: gray[50],
2415
+ tooltipBg: gray[950],
2416
+ tooltipFg: base.white,
2417
+ crosshairFg: gray[500],
2243
2418
  legendFg: text2.tertiary,
2244
2419
  series: [
2245
2420
  { fg: misc.purple[500], fgHover: misc.purple[600], bg: misc.purple[100], bgHover: misc.purple[200] },
2246
2421
  { fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
2247
2422
  { fg: misc.teal[300], fgHover: misc.teal[400], bg: misc.teal[50], bgHover: misc.teal[100] },
2248
- { fg: colors2.warning[400], fgHover: colors2.warning[500], bg: colors2.warning[100], bgHover: colors2.warning[200] },
2423
+ { fg: warning[400], fgHover: warning[500], bg: warning[100], bgHover: warning[200] },
2249
2424
  { fg: misc.rose[400], fgHover: misc.rose[500], bg: misc.rose[100], bgHover: misc.rose[200] },
2250
2425
  { fg: misc.blueLight[400], fgHover: misc.blueLight[500], bg: misc.blueLight[100], bgHover: misc.blueLight[200] },
2251
2426
  { fg: misc.orange[300], fgHover: misc.orange[400], bg: misc.orange[100], bgHover: misc.orange[200] },
@@ -2257,9 +2432,9 @@ var chartColors2 = {
2257
2432
  ]
2258
2433
  };
2259
2434
  var focusRings2 = {
2260
- brand: "0px 0px 0px 4px #4040403d",
2261
- brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #4040403d",
2262
- brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #4040403d",
2435
+ brand: "0px 0px 0px 4px #9D5FFF3d",
2436
+ brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #9D5FFF3d",
2437
+ brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #9D5FFF3d",
2263
2438
  gray: "0px 0px 0px 4px #a0a0a624",
2264
2439
  grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #a0a0a624",
2265
2440
  grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #a0a0a624",
@@ -2272,7 +2447,11 @@ var forestExternalPreset = {
2272
2447
  variants: {
2273
2448
  light: {
2274
2449
  tokens: {
2275
- colors: colors2,
2450
+ base,
2451
+ error,
2452
+ warning,
2453
+ success,
2454
+ info,
2276
2455
  spacing,
2277
2456
  radius: radius2,
2278
2457
  shadows,
@@ -2303,54 +2482,23 @@ var forestExternalPreset = {
2303
2482
  };
2304
2483
 
2305
2484
  // src/theme/presets/forest-agency.ts
2306
- var colors3 = {
2307
- ...colors,
2308
- /** Brand scale — black-based for primary actions */
2485
+ var colors = {
2309
2486
  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
- };
2487
+ 25: gray[25],
2488
+ 50: gray[50],
2489
+ 100: gray[100],
2490
+ 200: gray[200],
2491
+ 300: gray[300],
2492
+ 400: gray[400],
2493
+ 500: gray[500],
2494
+ 600: gray[900],
2495
+ // #18181b - dark brand
2496
+ 700: gray[950],
2497
+ // #09090b - primary brand
2498
+ 800: gray[950],
2499
+ 900: gray[950],
2500
+ 950: gray[950]
2501
+ }};
2354
2502
  var radius3 = {
2355
2503
  ...radius,
2356
2504
  xxs: 1,
@@ -2364,215 +2512,215 @@ var radius3 = {
2364
2512
  "4xl": 12
2365
2513
  };
2366
2514
  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]
2515
+ primary: gray[900],
2516
+ secondary: gray[700],
2517
+ secondaryHover: gray[800],
2518
+ tertiary: gray[600],
2519
+ tertiaryHover: gray[700],
2520
+ quaternary: gray[500],
2521
+ disabled: gray[500],
2522
+ placeholder: gray[500],
2523
+ placeholderSubtle: gray[300],
2524
+ white: base.white,
2525
+ brandPrimary: colors.brand[900],
2526
+ brandSecondary: colors.brand[700],
2527
+ brandTertiary: colors.brand[600],
2528
+ brandTertiaryAlt: colors.brand[600],
2529
+ primaryOnBrand: base.white,
2530
+ secondaryOnBrand: colors.brand[200],
2531
+ tertiaryOnBrand: colors.brand[200],
2532
+ quaternaryOnBrand: colors.brand[300],
2533
+ errorPrimary: error[600],
2534
+ warningPrimary: warning[600],
2535
+ successPrimary: success[600]
2388
2536
  };
2389
2537
  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]
2538
+ primary: gray[50],
2539
+ primaryAlt: gray[50],
2540
+ primaryHover: gray[100],
2541
+ primarySolid: gray[950],
2542
+ secondary: base.white,
2543
+ secondaryAlt: base.white,
2544
+ secondarySubtle: gray[25],
2545
+ secondaryHover: gray[50],
2546
+ secondarySolid: gray[600],
2547
+ tertiary: gray[100],
2548
+ quaternary: gray[200],
2549
+ active: gray[200],
2550
+ disabled: gray[100],
2551
+ disabledSubtle: gray[50],
2552
+ overlay: gray[950],
2553
+ brandPrimary: colors.brand[50],
2554
+ brandPrimaryAlt: colors.brand[50],
2555
+ brandSecondary: colors.brand[100],
2556
+ brandSolid: colors.brand[600],
2557
+ brandSolidHover: colors.brand[700],
2558
+ brandSection: colors.brand[800],
2559
+ brandSectionSubtle: colors.brand[700],
2560
+ errorPrimary: error[50],
2561
+ errorSecondary: error[100],
2562
+ errorSolid: error[600],
2563
+ warningPrimary: warning[50],
2564
+ warningSecondary: warning[100],
2565
+ warningSolid: warning[600],
2566
+ successPrimary: success[50],
2567
+ successSecondary: success[100],
2568
+ successSolid: success[600]
2421
2569
  };
2422
2570
  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]
2571
+ primary: gray[900],
2572
+ secondary: gray[700],
2573
+ secondaryHover: gray[800],
2574
+ tertiary: gray[600],
2575
+ tertiaryHover: gray[700],
2576
+ quaternary: gray[500],
2577
+ quaternaryHover: gray[600],
2578
+ quinary: gray[400],
2579
+ quinaryHover: gray[500],
2580
+ senary: gray[300],
2581
+ white: base.white,
2582
+ disabled: gray[400],
2583
+ disabledSubtle: gray[300],
2584
+ brandPrimary: colors.brand[600],
2585
+ brandPrimaryAlt: colors.brand[600],
2586
+ brandSecondary: colors.brand[500],
2587
+ errorPrimary: error[600],
2588
+ errorSecondary: error[500],
2589
+ warningPrimary: warning[600],
2590
+ warningSecondary: warning[500],
2591
+ successPrimary: success[600],
2592
+ successSecondary: success[500]
2445
2593
  };
2446
2594
  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]
2595
+ primary: gray[300],
2596
+ secondary: gray[200],
2597
+ tertiary: gray[100],
2598
+ disabled: gray[300],
2599
+ disabledSubtle: gray[200],
2600
+ brand: colors.brand[300],
2601
+ brandSolid: colors.brand[600],
2602
+ brandSolidAlt: colors.brand[600],
2603
+ error: error[300],
2604
+ errorSolid: error[600]
2457
2605
  };
2458
2606
  var buttonColors3 = {
2459
2607
  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]
2608
+ bg: colors.brand[700],
2609
+ bgHover: colors.brand[800],
2610
+ fg: base.white,
2611
+ fgHover: base.white,
2612
+ border: colors.brand[700],
2613
+ borderHover: colors.brand[800]
2466
2614
  },
2467
2615
  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]
2616
+ bg: gray[900],
2617
+ bgHover: gray[950],
2618
+ fg: base.white,
2619
+ fgHover: base.white,
2620
+ border: gray[900],
2621
+ borderHover: gray[950]
2474
2622
  },
2475
2623
  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]
2624
+ bg: base.white,
2625
+ bgHover: colors.brand[50],
2626
+ fg: colors.brand[700],
2627
+ fgHover: colors.brand[800],
2628
+ border: colors.brand[300],
2629
+ borderHover: colors.brand[300]
2482
2630
  },
2483
2631
  tertiary: {
2484
- fg: colors3.gray[600],
2485
- fgHover: colors3.gray[700],
2486
- bgHover: colors3.gray[50]
2632
+ fg: gray[600],
2633
+ fgHover: gray[700],
2634
+ bgHover: gray[50]
2487
2635
  },
2488
2636
  tertiaryColor: {
2489
- fg: colors3.brand[700],
2490
- fgHover: colors3.brand[800],
2491
- bgHover: colors3.brand[50]
2637
+ fg: colors.brand[700],
2638
+ fgHover: colors.brand[800],
2639
+ bgHover: colors.brand[50]
2492
2640
  },
2493
2641
  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]
2642
+ bg: error[600],
2643
+ bgHover: error[700],
2644
+ fg: base.white,
2645
+ fgHover: base.white,
2646
+ border: error[600],
2647
+ borderHover: error[700]
2500
2648
  },
2501
2649
  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]
2650
+ bg: base.white,
2651
+ bgHover: error[50],
2652
+ fg: error[700],
2653
+ fgHover: error[800],
2654
+ border: error[300],
2655
+ borderHover: error[300]
2508
2656
  },
2509
2657
  tertiaryError: {
2510
- fg: colors3.error[700],
2511
- fgHover: colors3.error[800],
2512
- bgHover: colors3.error[50]
2658
+ fg: error[700],
2659
+ fgHover: error[800],
2660
+ bgHover: error[50]
2513
2661
  }
2514
2662
  };
2515
2663
  var avatarColors3 = {
2516
- bg: colors3.gray[100],
2664
+ bg: gray[100],
2517
2665
  contrastBorder: "#00000014",
2518
- profilePhotoBorder: colors3.base.white,
2666
+ profilePhotoBorder: base.white,
2519
2667
  focusBorder: "#a0a0a624"
2520
2668
  // gray[400] + 14% alpha
2521
2669
  };
2522
2670
  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]
2671
+ fg: gray[600],
2672
+ fgHover: gray[700],
2673
+ bgHover: gray[50],
2674
+ brandBgHover: colors.brand[50],
2675
+ brandFgHover: colors.brand[700],
2676
+ iconFg: gray[500],
2677
+ iconFgHover: gray[700],
2678
+ brandIconFgHover: colors.brand[700]
2531
2679
  };
2532
2680
  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
2681
+ fgBrand: colors.brand[600],
2682
+ fgBrandOnBrand: colors.brand[200],
2683
+ featuredModernBorder: gray[200],
2684
+ featuredLightFgBrand: colors.brand[600],
2685
+ featuredLightFgGray: gray[500],
2686
+ featuredLightFgError: error[600],
2687
+ featuredLightFgWarning: warning[600],
2688
+ featuredLightFgSuccess: success[600],
2689
+ featuredDarkFgBrand: base.white,
2690
+ featuredDarkFgGray: base.white,
2691
+ featuredDarkFgError: base.white,
2692
+ featuredDarkFgWarning: base.white,
2693
+ featuredDarkFgSuccess: base.white
2546
2694
  };
2547
2695
  var navColors3 = {
2548
- itemIconFg: colors3.gray[500],
2549
- itemIconFgActive: colors3.gray[700],
2550
- itemButtonIconFg: colors3.gray[500],
2551
- itemButtonIconFgActive: colors3.gray[700]
2696
+ itemIconFg: gray[500],
2697
+ itemIconFgActive: gray[700],
2698
+ itemButtonIconFg: gray[500],
2699
+ itemButtonIconFgActive: gray[700]
2552
2700
  };
2553
2701
  var sliderColors3 = {
2554
- handleBorder: colors3.brand[600],
2555
- handleBg: colors3.base.white
2702
+ handleBorder: colors.brand[600],
2703
+ handleBg: base.white
2556
2704
  };
2557
2705
  var toggleColors3 = {
2558
- buttonFgDisabled: colors3.gray[50]
2706
+ buttonFgDisabled: gray[50]
2559
2707
  };
2560
2708
  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],
2709
+ axisFg: gray[100],
2710
+ gridlineFg: gray[100],
2711
+ labelFg: gray[600],
2712
+ labelFgEmphasis: gray[700],
2713
+ bg: base.white,
2714
+ bgAlt: gray[50],
2715
+ tooltipBg: gray[950],
2716
+ tooltipFg: base.white,
2717
+ crosshairFg: gray[500],
2570
2718
  legendFg: text3.tertiary,
2571
2719
  series: [
2572
2720
  { fg: misc.purple[500], fgHover: misc.purple[600], bg: misc.purple[100], bgHover: misc.purple[200] },
2573
2721
  { fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
2574
2722
  { 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] },
2723
+ { fg: warning[400], fgHover: warning[500], bg: warning[100], bgHover: warning[200] },
2576
2724
  { fg: misc.rose[400], fgHover: misc.rose[500], bg: misc.rose[100], bgHover: misc.rose[200] },
2577
2725
  { fg: misc.blueLight[400], fgHover: misc.blueLight[500], bg: misc.blueLight[100], bgHover: misc.blueLight[200] },
2578
2726
  { fg: misc.orange[300], fgHover: misc.orange[400], bg: misc.orange[100], bgHover: misc.orange[200] },
@@ -2599,7 +2747,11 @@ var forestAgencyPreset = {
2599
2747
  variants: {
2600
2748
  light: {
2601
2749
  tokens: {
2602
- colors: colors3,
2750
+ base,
2751
+ error,
2752
+ warning,
2753
+ success,
2754
+ info,
2603
2755
  spacing,
2604
2756
  radius: radius3,
2605
2757
  shadows,
@@ -2630,39 +2782,6 @@ var forestAgencyPreset = {
2630
2782
  };
2631
2783
 
2632
2784
  // 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
2785
  var radius4 = {
2667
2786
  ...radius,
2668
2787
  xxs: 1,
@@ -2676,215 +2795,215 @@ var radius4 = {
2676
2795
  "4xl": 12
2677
2796
  };
2678
2797
  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]
2798
+ primary: gray[900],
2799
+ secondary: gray[700],
2800
+ secondaryHover: gray[800],
2801
+ tertiary: gray[600],
2802
+ tertiaryHover: gray[700],
2803
+ quaternary: gray[500],
2804
+ disabled: gray[500],
2805
+ placeholder: gray[500],
2806
+ placeholderSubtle: gray[300],
2807
+ white: base.white,
2808
+ brandPrimary: magenta[900],
2809
+ brandSecondary: magenta[700],
2810
+ brandTertiary: magenta[600],
2811
+ brandTertiaryAlt: magenta[600],
2812
+ primaryOnBrand: base.white,
2813
+ secondaryOnBrand: magenta[200],
2814
+ tertiaryOnBrand: magenta[200],
2815
+ quaternaryOnBrand: magenta[300],
2816
+ errorPrimary: error[600],
2817
+ warningPrimary: warning[600],
2818
+ successPrimary: success[600]
2700
2819
  };
2701
2820
  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]
2821
+ primary: gray[50],
2822
+ primaryAlt: gray[50],
2823
+ primaryHover: gray[100],
2824
+ primarySolid: gray[950],
2825
+ secondary: base.white,
2826
+ secondaryAlt: base.white,
2827
+ secondarySubtle: gray[25],
2828
+ secondaryHover: gray[50],
2829
+ secondarySolid: gray[600],
2830
+ tertiary: gray[100],
2831
+ quaternary: gray[200],
2832
+ active: gray[200],
2833
+ disabled: gray[100],
2834
+ disabledSubtle: gray[50],
2835
+ overlay: gray[950],
2836
+ brandPrimary: magenta[50],
2837
+ brandPrimaryAlt: magenta[50],
2838
+ brandSecondary: magenta[100],
2839
+ brandSolid: magenta[400],
2840
+ brandSolidHover: magenta[500],
2841
+ brandSection: magenta[800],
2842
+ brandSectionSubtle: magenta[700],
2843
+ errorPrimary: error[50],
2844
+ errorSecondary: error[100],
2845
+ errorSolid: error[600],
2846
+ warningPrimary: warning[50],
2847
+ warningSecondary: warning[100],
2848
+ warningSolid: warning[600],
2849
+ successPrimary: success[50],
2850
+ successSecondary: success[100],
2851
+ successSolid: success[600]
2733
2852
  };
2734
2853
  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]
2854
+ primary: gray[900],
2855
+ secondary: gray[700],
2856
+ secondaryHover: gray[800],
2857
+ tertiary: gray[600],
2858
+ tertiaryHover: gray[700],
2859
+ quaternary: gray[500],
2860
+ quaternaryHover: gray[600],
2861
+ quinary: gray[400],
2862
+ quinaryHover: gray[500],
2863
+ senary: gray[300],
2864
+ white: base.white,
2865
+ disabled: gray[400],
2866
+ disabledSubtle: gray[300],
2867
+ brandPrimary: magenta[400],
2868
+ brandPrimaryAlt: magenta[400],
2869
+ brandSecondary: magenta[400],
2870
+ errorPrimary: error[600],
2871
+ errorSecondary: error[500],
2872
+ warningPrimary: warning[600],
2873
+ warningSecondary: warning[500],
2874
+ successPrimary: success[600],
2875
+ successSecondary: success[500]
2757
2876
  };
2758
2877
  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]
2878
+ primary: gray[300],
2879
+ secondary: gray[200],
2880
+ tertiary: gray[100],
2881
+ disabled: gray[300],
2882
+ disabledSubtle: gray[200],
2883
+ brand: magenta[300],
2884
+ brandSolid: magenta[400],
2885
+ brandSolidAlt: magenta[400],
2886
+ error: error[300],
2887
+ errorSolid: error[600]
2769
2888
  };
2770
2889
  var buttonColors4 = {
2771
2890
  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]
2891
+ bg: magenta[400],
2892
+ bgHover: magenta[500],
2893
+ fg: base.white,
2894
+ fgHover: base.white,
2895
+ border: magenta[400],
2896
+ borderHover: magenta[500]
2778
2897
  },
2779
2898
  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]
2899
+ bg: gray[900],
2900
+ bgHover: gray[950],
2901
+ fg: base.white,
2902
+ fgHover: base.white,
2903
+ border: gray[900],
2904
+ borderHover: gray[950]
2786
2905
  },
2787
2906
  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]
2907
+ bg: base.white,
2908
+ bgHover: magenta[50],
2909
+ fg: magenta[400],
2910
+ fgHover: magenta[500],
2911
+ border: magenta[300],
2912
+ borderHover: magenta[300]
2794
2913
  },
2795
2914
  tertiary: {
2796
- fg: colors4.gray[600],
2797
- fgHover: colors4.gray[700],
2798
- bgHover: colors4.gray[50]
2915
+ fg: gray[600],
2916
+ fgHover: gray[700],
2917
+ bgHover: gray[50]
2799
2918
  },
2800
2919
  tertiaryColor: {
2801
- fg: colors4.brand[700],
2802
- fgHover: colors4.brand[800],
2803
- bgHover: colors4.brand[50]
2920
+ fg: magenta[400],
2921
+ fgHover: magenta[500],
2922
+ bgHover: magenta[50]
2804
2923
  },
2805
2924
  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]
2925
+ bg: error[600],
2926
+ bgHover: error[700],
2927
+ fg: base.white,
2928
+ fgHover: base.white,
2929
+ border: error[600],
2930
+ borderHover: error[700]
2812
2931
  },
2813
2932
  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]
2933
+ bg: base.white,
2934
+ bgHover: error[50],
2935
+ fg: error[700],
2936
+ fgHover: error[800],
2937
+ border: error[300],
2938
+ borderHover: error[300]
2820
2939
  },
2821
2940
  tertiaryError: {
2822
- fg: colors4.error[700],
2823
- fgHover: colors4.error[800],
2824
- bgHover: colors4.error[50]
2941
+ fg: error[700],
2942
+ fgHover: error[800],
2943
+ bgHover: error[50]
2825
2944
  }
2826
2945
  };
2827
2946
  var avatarColors4 = {
2828
- bg: colors4.gray[100],
2947
+ bg: gray[100],
2829
2948
  contrastBorder: "#00000014",
2830
- profilePhotoBorder: colors4.base.white,
2949
+ profilePhotoBorder: base.white,
2831
2950
  focusBorder: "#a0a0a624"
2832
2951
  // gray[400] + 14% alpha
2833
2952
  };
2834
2953
  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]
2954
+ fg: gray[600],
2955
+ fgHover: gray[700],
2956
+ bgHover: gray[50],
2957
+ brandBgHover: magenta[50],
2958
+ brandFgHover: magenta[700],
2959
+ iconFg: gray[500],
2960
+ iconFgHover: gray[700],
2961
+ brandIconFgHover: magenta[700]
2843
2962
  };
2844
2963
  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
2964
+ fgBrand: magenta[400],
2965
+ fgBrandOnBrand: magenta[200],
2966
+ featuredModernBorder: gray[200],
2967
+ featuredLightFgBrand: magenta[400],
2968
+ featuredLightFgGray: gray[500],
2969
+ featuredLightFgError: error[600],
2970
+ featuredLightFgWarning: warning[600],
2971
+ featuredLightFgSuccess: success[600],
2972
+ featuredDarkFgBrand: base.white,
2973
+ featuredDarkFgGray: base.white,
2974
+ featuredDarkFgError: base.white,
2975
+ featuredDarkFgWarning: base.white,
2976
+ featuredDarkFgSuccess: base.white
2858
2977
  };
2859
2978
  var navColors4 = {
2860
- itemIconFg: colors4.gray[500],
2861
- itemIconFgActive: colors4.gray[700],
2862
- itemButtonIconFg: colors4.gray[500],
2863
- itemButtonIconFgActive: colors4.gray[700]
2979
+ itemIconFg: gray[500],
2980
+ itemIconFgActive: gray[700],
2981
+ itemButtonIconFg: gray[500],
2982
+ itemButtonIconFgActive: gray[700]
2864
2983
  };
2865
2984
  var sliderColors4 = {
2866
- handleBorder: colors4.brand[600],
2867
- handleBg: colors4.base.white
2985
+ handleBorder: magenta[400],
2986
+ handleBg: base.white
2868
2987
  };
2869
2988
  var toggleColors4 = {
2870
- buttonFgDisabled: colors4.gray[50]
2989
+ buttonFgDisabled: gray[50]
2871
2990
  };
2872
2991
  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],
2992
+ axisFg: gray[100],
2993
+ gridlineFg: gray[100],
2994
+ labelFg: gray[600],
2995
+ labelFgEmphasis: gray[700],
2996
+ bg: base.white,
2997
+ bgAlt: gray[50],
2998
+ tooltipBg: gray[950],
2999
+ tooltipFg: base.white,
3000
+ crosshairFg: gray[500],
2882
3001
  legendFg: text4.tertiary,
2883
3002
  series: [
2884
3003
  { fg: misc.purple[500], fgHover: misc.purple[600], bg: misc.purple[100], bgHover: misc.purple[200] },
2885
3004
  { fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
2886
3005
  { 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] },
3006
+ { fg: warning[400], fgHover: warning[500], bg: warning[100], bgHover: warning[200] },
2888
3007
  { fg: misc.rose[400], fgHover: misc.rose[500], bg: misc.rose[100], bgHover: misc.rose[200] },
2889
3008
  { fg: misc.blueLight[400], fgHover: misc.blueLight[500], bg: misc.blueLight[100], bgHover: misc.blueLight[200] },
2890
3009
  { fg: misc.orange[300], fgHover: misc.orange[400], bg: misc.orange[100], bgHover: misc.orange[200] },
@@ -2896,9 +3015,9 @@ var chartColors4 = {
2896
3015
  ]
2897
3016
  };
2898
3017
  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",
3018
+ brand: "0px 0px 0px 4px #FF78F33d",
3019
+ brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #FF78F33d",
3020
+ brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #FF78F33d",
2902
3021
  gray: "0px 0px 0px 4px #a0a0a624",
2903
3022
  grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #a0a0a624",
2904
3023
  grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #a0a0a624",
@@ -2911,7 +3030,11 @@ var forestInternalPreset = {
2911
3030
  variants: {
2912
3031
  light: {
2913
3032
  tokens: {
2914
- colors: colors4,
3033
+ base,
3034
+ error,
3035
+ warning,
3036
+ success,
3037
+ info,
2915
3038
  spacing,
2916
3039
  radius: radius4,
2917
3040
  shadows,
@@ -2963,6 +3086,7 @@ var forestThemeOptions = buildThemeOptions(agencyTokens);
2963
3086
 
2964
3087
  exports.alpha = alpha;
2965
3088
  exports.avatarColors = avatarColors;
3089
+ exports.base = base;
2966
3090
  exports.bg = bg;
2967
3091
  exports.border = border;
2968
3092
  exports.breadcrumbColors = breadcrumbColors;
@@ -2970,10 +3094,10 @@ exports.buildTheme = buildTheme;
2970
3094
  exports.buildThemeOptions = buildThemeOptions;
2971
3095
  exports.buttonColors = buttonColors;
2972
3096
  exports.chartColors = chartColors;
2973
- exports.colors = colors;
2974
3097
  exports.components = components;
2975
3098
  exports.container = container;
2976
3099
  exports.display = display;
3100
+ exports.error = error;
2977
3101
  exports.fg = fg;
2978
3102
  exports.focusRings = focusRings;
2979
3103
  exports.fontFamily = fontFamily;
@@ -3001,10 +3125,12 @@ exports.registerPreset = registerPreset;
3001
3125
  exports.shadows = shadows2;
3002
3126
  exports.sliderColors = sliderColors;
3003
3127
  exports.spacing = spacing;
3128
+ exports.success = success;
3004
3129
  exports.text = text;
3005
3130
  exports.toggleColors = toggleColors;
3006
3131
  exports.typography = typography;
3007
3132
  exports.violet = violet;
3133
+ exports.warning = warning;
3008
3134
  exports.widths = widths;
3009
3135
  //# sourceMappingURL=theme.js.map
3010
3136
  //# sourceMappingURL=theme.js.map