@matteoaliano/forest-ui 0.3.2 → 0.3.3

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