@matteoaliano/forest-ui 0.2.1 → 0.2.3

package/dist/theme.js

@@ -196,10 +196,249 @@ var widths = {
   "5xl": 1600,
   "6xl": 1920
 };
+var text = {
+  primary: colors.gray[900],
+  secondary: colors.gray[700],
+  secondaryHover: colors.gray[800],
+  tertiary: colors.gray[600],
+  tertiaryHover: colors.gray[700],
+  quaternary: colors.gray[500],
+  disabled: colors.gray[500],
+  placeholder: colors.gray[500],
+  placeholderSubtle: colors.gray[300],
+  white: colors.base.white,
+  brandPrimary: colors.brand[900],
+  brandSecondary: colors.brand[700],
+  brandTertiary: colors.brand[600],
+  brandTertiaryAlt: colors.brand[600],
+  primaryOnBrand: colors.base.white,
+  secondaryOnBrand: colors.brand[200],
+  tertiaryOnBrand: colors.brand[200],
+  quaternaryOnBrand: colors.brand[300],
+  errorPrimary: colors.error[600],
+  warningPrimary: colors.warning[600],
+  successPrimary: colors.success[600]
+};
+var bg = {
+  primary: colors.base.white,
+  primaryAlt: colors.base.white,
+  primaryHover: colors.gray[50],
+  primarySolid: colors.gray[950],
+  secondary: colors.gray[50],
+  secondaryAlt: colors.gray[50],
+  secondarySubtle: colors.gray[25],
+  secondaryHover: colors.gray[100],
+  secondarySolid: colors.gray[600],
+  tertiary: colors.gray[100],
+  quaternary: colors.gray[200],
+  active: colors.gray[50],
+  disabled: colors.gray[100],
+  disabledSubtle: colors.gray[50],
+  overlay: colors.gray[950],
+  brandPrimary: colors.brand[50],
+  brandPrimaryAlt: colors.brand[50],
+  brandSecondary: colors.brand[100],
+  brandSolid: colors.brand[600],
+  brandSolidHover: colors.brand[700],
+  brandSection: colors.brand[800],
+  brandSectionSubtle: colors.brand[700],
+  errorPrimary: colors.error[50],
+  errorSecondary: colors.error[100],
+  errorSolid: colors.error[600],
+  warningPrimary: colors.warning[50],
+  warningSecondary: colors.warning[100],
+  warningSolid: colors.warning[600],
+  successPrimary: colors.success[50],
+  successSecondary: colors.success[100],
+  successSolid: colors.success[600]
+};
+var fg = {
+  primary: colors.gray[900],
+  secondary: colors.gray[700],
+  secondaryHover: colors.gray[800],
+  tertiary: colors.gray[600],
+  tertiaryHover: colors.gray[700],
+  quaternary: colors.gray[500],
+  quaternaryHover: colors.gray[600],
+  quinary: colors.gray[400],
+  quinaryHover: colors.gray[500],
+  senary: colors.gray[300],
+  white: colors.base.white,
+  disabled: colors.gray[400],
+  disabledSubtle: colors.gray[300],
+  brandPrimary: colors.brand[600],
+  brandPrimaryAlt: colors.brand[600],
+  brandSecondary: colors.brand[500],
+  errorPrimary: colors.error[600],
+  errorSecondary: colors.error[500],
+  warningPrimary: colors.warning[600],
+  warningSecondary: colors.warning[500],
+  successPrimary: colors.success[600],
+  successSecondary: colors.success[500]
+};
+var border = {
+  primary: colors.gray[300],
+  secondary: colors.gray[200],
+  tertiary: colors.gray[100],
+  disabled: colors.gray[300],
+  disabledSubtle: colors.gray[200],
+  brand: colors.brand[300],
+  brandSolid: colors.brand[600],
+  brandSolidAlt: colors.brand[600],
+  error: colors.error[300],
+  errorSolid: colors.error[600]
+};
+var buttonColors = {
+  primary: {
+    bg: colors.brand[600],
+    bgHover: colors.brand[700],
+    fg: colors.base.white,
+    fgHover: colors.base.white,
+    border: colors.brand[600],
+    borderHover: colors.brand[700]
+  },
+  secondary: {
+    bg: colors.base.white,
+    bgHover: colors.gray[50],
+    fg: colors.gray[700],
+    fgHover: colors.gray[800],
+    border: colors.gray[300],
+    borderHover: colors.gray[300]
+  },
+  secondaryColor: {
+    bg: colors.base.white,
+    bgHover: colors.brand[50],
+    fg: colors.brand[700],
+    fgHover: colors.brand[800],
+    border: colors.brand[300],
+    borderHover: colors.brand[300]
+  },
+  tertiary: {
+    fg: colors.gray[600],
+    fgHover: colors.gray[700],
+    bgHover: colors.gray[50]
+  },
+  tertiaryColor: {
+    fg: colors.brand[700],
+    fgHover: colors.brand[800],
+    bgHover: colors.brand[50]
+  },
+  primaryError: {
+    bg: colors.error[600],
+    bgHover: colors.error[700],
+    fg: colors.base.white,
+    fgHover: colors.base.white,
+    border: colors.error[600],
+    borderHover: colors.error[700]
+  },
+  secondaryError: {
+    bg: colors.base.white,
+    bgHover: colors.error[50],
+    fg: colors.error[700],
+    fgHover: colors.error[800],
+    border: colors.error[300],
+    borderHover: colors.error[300]
+  },
+  tertiaryError: {
+    fg: colors.error[700],
+    fgHover: colors.error[800],
+    bgHover: colors.error[50]
+  }
+};
+var avatarColors = {
+  bg: colors.gray[100],
+  contrastBorder: "#00000014",
+  profilePhotoBorder: colors.base.white,
+  focusBorder: "#98a2b324"
+};
+var breadcrumbColors = {
+  fg: colors.gray[600],
+  fgHover: colors.gray[700],
+  bgHover: colors.gray[50],
+  brandBgHover: colors.brand[50],
+  brandFgHover: colors.brand[700],
+  iconFg: colors.gray[500],
+  iconFgHover: colors.gray[700],
+  brandIconFgHover: colors.brand[700]
+};
+var iconColors = {
+  fgBrand: colors.brand[600],
+  fgBrandOnBrand: colors.brand[200],
+  featuredModernBorder: colors.gray[200],
+  featuredLightFgBrand: colors.brand[600],
+  featuredLightFgGray: colors.gray[500],
+  featuredLightFgError: colors.error[600],
+  featuredLightFgWarning: colors.warning[600],
+  featuredLightFgSuccess: colors.success[600],
+  featuredDarkFgBrand: colors.base.white,
+  featuredDarkFgGray: colors.base.white,
+  featuredDarkFgError: colors.base.white,
+  featuredDarkFgWarning: colors.base.white,
+  featuredDarkFgSuccess: colors.base.white
+};
+var navColors = {
+  itemIconFg: colors.gray[500],
+  itemIconFgActive: colors.gray[500],
+  itemButtonIconFg: colors.gray[500],
+  itemButtonIconFgActive: colors.gray[700]
+};
+var sliderColors = {
+  handleBorder: colors.brand[600],
+  handleBg: colors.base.white
+};
+var toggleColors = {
+  buttonFgDisabled: colors.gray[50]
+};
+var chartColors = {
+  axisFg: colors.gray[200],
+  gridlineFg: colors.gray[100],
+  labelFg: colors.gray[600],
+  labelFgEmphasis: colors.gray[700],
+  bg: colors.base.white,
+  bgAlt: colors.gray[50],
+  tooltipBg: colors.gray[950],
+  tooltipFg: colors.base.white,
+  crosshairFg: colors.gray[500],
+  legendFg: colors.gray[700],
+  series1Fg: colors.blue[600],
+  series1FgHover: colors.blue[700],
+  series1Bg: colors.blue[100],
+  series1BgHover: colors.blue[200],
+  series2Fg: colors.brand[600],
+  series2FgHover: colors.brand[700],
+  series2Bg: colors.brand[100],
+  series2BgHover: colors.brand[200]
+};
+var alpha = {
+  white: {
+    10: "#ffffff1a",
+    20: "#ffffff33",
+    30: "#ffffff4d",
+    40: "#ffffff66",
+    50: "#ffffff80",
+    60: "#ffffff99",
+    70: "#ffffffb3",
+    80: "#ffffffcc",
+    90: "#ffffffe6",
+    100: "#ffffff"
+  },
+  black: {
+    10: "#0000001a",
+    20: "#00000033",
+    30: "#0000004d",
+    40: "#00000066",
+    50: "#00000080",
+    60: "#00000099",
+    70: "#000000b3",
+    80: "#000000cc",
+    90: "#000000e6",
+    100: "#000000"
+  }
+};
 
 // src/theme/palette.ts
 function buildPalette(tokens) {
-  const { colors: colors2 } = tokens;
+  const { colors: colors2, text: text2, bg: bg2, fg: fg2, border: border2 } = tokens;
   return {
     primary: {
       main: colors2.brand[600],
@@ -238,26 +477,30 @@ function buildPalette(tokens) {
       contrastText: colors2.base.white
     },
     background: {
-      default: colors2.base.white,
-      paper: colors2.base.white
+      default: bg2.primary,
+      paper: bg2.primary
     },
     text: {
-      primary: colors2.gray[900],
-      secondary: colors2.gray[700],
-      disabled: colors2.gray[500]
+      primary: text2.primary,
+      secondary: text2.secondary,
+      disabled: text2.disabled
     },
-    divider: colors2.gray[200],
+    divider: border2.secondary,
     action: {
-      active: colors2.gray[600],
-      hover: colors2.gray[50],
-      selected: colors2.brand[50],
-      disabled: colors2.gray[400],
-      disabledBackground: colors2.gray[100]
+      active: fg2.tertiary,
+      hover: bg2.primaryHover,
+      selected: bg2.brandPrimary,
+      disabled: fg2.disabled,
+      disabledBackground: bg2.disabled
     }
   };
 }
 var palette = buildPalette({
-  colors
+  colors,
+  text,
+  bg,
+  fg,
+  border
 });
 
 // src/theme/typography.ts
@@ -352,7 +595,17 @@ var typography = buildTypography({
 
 // src/theme/components.ts
 function buildComponents(tokens) {
-  const { colors: colors2, radius: radius2, focusRings: focusRings2, shadows: tokenShadows } = tokens;
+  const {
+    colors: colors2,
+    radius: radius2,
+    focusRings: focusRings2,
+    shadows: tokenShadows,
+    text: text2,
+    bg: bg2,
+    fg: fg2,
+    border: border2,
+    buttonColors: buttonColors2
+  } = tokens;
   return {
     // ─── Button ─────────────────────────────────────────────────────
     MuiButton: {
@@ -363,43 +616,42 @@ function buildComponents(tokens) {
         root: {
           borderRadius: radius2.md,
           fontWeight: 600,
+          boxShadow: tokenShadows.xs,
+          height: 32,
+          padding: "6px 12px",
+          fontSize: 14,
+          lineHeight: "20px",
           "&:focus-visible": {
             boxShadow: focusRings2.brandShadowXs
           }
         },
-        sizeLarge: {
-          padding: "12px 20px",
-          fontSize: 16,
-          lineHeight: "24px"
-        },
-        sizeMedium: {
-          padding: "10px 16px",
-          fontSize: 14,
-          lineHeight: "20px"
-        },
-        sizeSmall: {
-          padding: "8px 14px",
-          fontSize: 14,
-          lineHeight: "20px"
-        },
         containedPrimary: {
-          backgroundColor: colors2.brand[600],
+          backgroundColor: buttonColors2.primary.bg,
           "&:hover": {
-            backgroundColor: colors2.brand[700]
+            backgroundColor: buttonColors2.primary.bgHover
           }
         },
         outlinedPrimary: {
-          borderColor: colors2.brand[300],
-          color: colors2.brand[700],
+          borderColor: buttonColors2.secondaryColor.border,
+          color: buttonColors2.secondaryColor.fg,
           "&:hover": {
-            backgroundColor: colors2.brand[50],
-            borderColor: colors2.brand[300]
+            backgroundColor: buttonColors2.secondaryColor.bgHover,
+            borderColor: buttonColors2.secondaryColor.borderHover
+          }
+        },
+        outlinedSecondary: {
+          borderColor: buttonColors2.secondary.border,
+          "&:hover": {
+            borderColor: buttonColors2.secondary.borderHover
           }
         },
+        text: {
+          boxShadow: "none"
+        },
         textPrimary: {
-          color: colors2.brand[700],
+          color: buttonColors2.tertiaryColor.fg,
           "&:hover": {
-            backgroundColor: colors2.brand[50]
+            backgroundColor: buttonColors2.tertiaryColor.bgHover
           }
         }
       }
@@ -415,7 +667,7 @@ function buildComponents(tokens) {
         },
         grouped: {
           "&:not(:last-of-type)": {
-            borderRight: `1px solid ${colors2.brand[700]}`
+            borderRight: `1px solid ${buttonColors2.primary.borderHover}`
           }
         }
       }
@@ -433,9 +685,9 @@ function buildComponents(tokens) {
           }
         },
         primary: {
-          backgroundColor: colors2.brand[600],
+          backgroundColor: buttonColors2.primary.bg,
           "&:hover": {
-            backgroundColor: colors2.brand[700]
+            backgroundColor: buttonColors2.primary.bgHover
           }
         }
       }
@@ -447,37 +699,46 @@ function buildComponents(tokens) {
         size: "small"
       }
     },
+    MuiInputBase: {
+      styleOverrides: {
+        input: {
+          "&::placeholder": {
+            color: text2.placeholder,
+            WebkitTextFillColor: text2.placeholder,
+            fontWeight: 400,
+            opacity: 1
+          }
+        }
+      }
+    },
     MuiOutlinedInput: {
       styleOverrides: {
         root: {
           borderRadius: radius2.md,
+          boxShadow: tokenShadows.xs,
           "&:hover .MuiOutlinedInput-notchedOutline": {
-            borderColor: colors2.brand[300]
+            borderColor: border2.brand
           },
           "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            borderColor: colors2.brand[600],
+            borderColor: border2.brandSolid,
             borderWidth: 1,
             boxShadow: "none"
           },
           "&.Mui-error .MuiOutlinedInput-notchedOutline": {
-            borderColor: colors2.error[300]
+            borderColor: border2.error
           },
           "&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            borderColor: colors2.error[600],
+            borderColor: border2.errorSolid,
             boxShadow: "none"
           }
         },
         notchedOutline: {
-          borderColor: colors2.gray[300]
+          borderColor: border2.primary
         },
         input: {
           padding: "10px 14px",
           fontSize: 16,
-          lineHeight: "24px",
-          "&::placeholder": {
-            color: colors2.gray[500],
-            opacity: 1
-          }
+          lineHeight: "24px"
         },
         inputSizeSmall: {
           padding: "8px 12px",
@@ -486,17 +747,30 @@ function buildComponents(tokens) {
         }
       }
     },
+    MuiFormLabel: {
+      styleOverrides: {
+        root: {
+          color: text2.placeholder,
+          "&.Mui-focused": {
+            color: text2.placeholder
+          },
+          "&.Mui-error": {
+            color: text2.errorPrimary
+          }
+        }
+      }
+    },
     MuiInputLabel: {
       styleOverrides: {
         root: {
           fontSize: 14,
           fontWeight: 500,
-          color: colors2.gray[700],
+          color: text2.placeholder,
           "&.Mui-focused": {
-            color: colors2.gray[700]
+            color: text2.placeholder
           },
           "&.Mui-error": {
-            color: colors2.error[600]
+            color: text2.errorPrimary
           }
         }
       }
@@ -509,7 +783,7 @@ function buildComponents(tokens) {
           marginTop: 6,
           marginLeft: 0,
           "&.Mui-error": {
-            color: colors2.error[600]
+            color: text2.errorPrimary
           }
         }
       }
@@ -520,8 +794,15 @@ function buildComponents(tokens) {
         size: "small"
       },
       styleOverrides: {
+        select: {
+          "&.MuiSelect-select": {
+            "&[aria-placeholder], &:empty + .MuiSelect-nativeInput[value='']~&": {
+              color: text2.placeholder
+            }
+          }
+        },
         icon: {
-          color: colors2.gray[500]
+          color: text2.placeholder
         }
       }
     },
@@ -531,7 +812,7 @@ function buildComponents(tokens) {
         paper: {
           borderRadius: radius2.md,
           boxShadow: tokenShadows.lg,
-          border: `1px solid ${colors2.gray[200]}`,
+          border: `1px solid ${border2.secondary}`,
           marginTop: 4
         },
         option: {
@@ -539,10 +820,10 @@ function buildComponents(tokens) {
           lineHeight: "24px",
           padding: "10px 14px",
           "&.Mui-focused": {
-            backgroundColor: colors2.gray[50]
+            backgroundColor: bg2.primaryHover
           },
           '&[aria-selected="true"]': {
-            backgroundColor: colors2.brand[50]
+            backgroundColor: bg2.brandPrimary
           }
         },
         listbox: {
@@ -557,17 +838,17 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          color: colors2.gray[300],
+          color: border2.primary,
           borderRadius: radius2.xs,
           padding: 0,
           width: 20,
           height: 20,
           "&:hover": {
             backgroundColor: "transparent",
-            color: colors2.brand[600]
+            color: fg2.brandPrimary
           },
           "&.Mui-checked": {
-            color: colors2.brand[600]
+            color: fg2.brandPrimary
           },
           "&.Mui-checked:hover": {
             color: colors2.brand[700]
@@ -578,7 +859,7 @@ function buildComponents(tokens) {
             borderRadius: radius2.xs
           },
           "&.Mui-disabled": {
-            color: colors2.gray[300]
+            color: border2.primary
           }
         }
       }
@@ -590,14 +871,14 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          color: colors2.gray[300],
+          color: border2.primary,
           padding: 0,
           "&:hover": {
             backgroundColor: "transparent",
-            color: colors2.brand[600]
+            color: fg2.brandPrimary
           },
           "&.Mui-checked": {
-            color: colors2.brand[600]
+            color: fg2.brandPrimary
           },
           "&.Mui-checked:hover": {
             color: colors2.brand[700]
@@ -608,7 +889,7 @@ function buildComponents(tokens) {
             borderRadius: radius2.full
           },
           "&.Mui-disabled": {
-            color: colors2.gray[300]
+            color: border2.primary
           }
         }
       }
@@ -628,9 +909,9 @@ function buildComponents(tokens) {
           padding: 2,
           "&.Mui-checked": {
             transform: "translateX(20px)",
-            color: colors2.base.white,
+            color: fg2.white,
             "& + .MuiSwitch-track": {
-              backgroundColor: colors2.brand[600],
+              backgroundColor: fg2.brandPrimary,
               opacity: 1
             }
           },
@@ -641,7 +922,7 @@ function buildComponents(tokens) {
             boxShadow: focusRings2.brand
           },
           "&.Mui-disabled .MuiSwitch-thumb": {
-            color: colors2.gray[100]
+            color: bg2.disabled
           },
           "&.Mui-disabled + .MuiSwitch-track": {
             opacity: 0.5
@@ -654,7 +935,7 @@ function buildComponents(tokens) {
         },
         track: {
           borderRadius: radius2.full,
-          backgroundColor: colors2.gray[200],
+          backgroundColor: border2.secondary,
           opacity: 1
         }
       }
@@ -663,23 +944,24 @@ function buildComponents(tokens) {
     MuiToggleButton: {
       styleOverrides: {
         root: {
-          borderRadius: radius2.md,
-          borderColor: colors2.gray[300],
-          color: colors2.gray[700],
+          borderColor: border2.primary,
+          color: text2.secondary,
           fontSize: 14,
           fontWeight: 600,
           lineHeight: "20px",
-          padding: "8px 14px",
+          height: 32,
+          padding: "6px 12px",
           textTransform: "none",
           "&:hover": {
-            backgroundColor: colors2.gray[50]
+            backgroundColor: bg2.primaryHover,
+            borderColor: border2.primary
           },
           "&.Mui-selected": {
-            backgroundColor: colors2.brand[50],
-            color: colors2.brand[700],
-            borderColor: colors2.brand[300],
+            backgroundColor: bg2.brandPrimary,
+            color: buttonColors2.secondaryColor.fg,
+            borderColor: border2.brand,
             "&:hover": {
-              backgroundColor: colors2.brand[100]
+              backgroundColor: bg2.brandSecondary
             }
           },
           "&:focus-visible": {
@@ -691,15 +973,21 @@ function buildComponents(tokens) {
     MuiToggleButtonGroup: {
       styleOverrides: {
         root: {
-          borderRadius: radius2.md
+          borderRadius: radius2.md,
+          overflow: "hidden"
         },
         grouped: {
+          borderRadius: 0,
           "&:not(:first-of-type)": {
-            borderRadius: radius2.md,
             marginLeft: -1
           },
           "&:first-of-type": {
-            borderRadius: radius2.md
+            borderTopLeftRadius: radius2.md,
+            borderBottomLeftRadius: radius2.md
+          },
+          "&:last-of-type": {
+            borderTopRightRadius: radius2.md,
+            borderBottomRightRadius: radius2.md
           }
         }
       }
@@ -712,8 +1000,9 @@ function buildComponents(tokens) {
       styleOverrides: {
         root: {
           borderRadius: radius2.xl,
-          border: `1px solid ${colors2.gray[200]}`,
-          backgroundColor: colors2.base.white,
+          border: `1px solid ${border2.secondary}`,
+          backgroundColor: bg2.primary,
+          boxShadow: tokenShadows.xs,
           overflow: "hidden"
         }
       }
@@ -763,31 +1052,31 @@ function buildComponents(tokens) {
         },
         elevation1: {
           boxShadow: tokenShadows.xs,
-          border: `1px solid ${colors2.gray[200]}`
+          border: `1px solid ${border2.secondary}`
         },
         elevation2: {
           boxShadow: tokenShadows.sm,
-          border: `1px solid ${colors2.gray[200]}`
+          border: `1px solid ${border2.secondary}`
         },
         elevation3: {
           boxShadow: tokenShadows.md,
-          border: `1px solid ${colors2.gray[200]}`
+          border: `1px solid ${border2.secondary}`
         },
         elevation4: {
           boxShadow: tokenShadows.lg,
-          border: `1px solid ${colors2.gray[200]}`
+          border: `1px solid ${border2.secondary}`
         },
         elevation8: {
           boxShadow: tokenShadows.xl,
-          border: `1px solid ${colors2.gray[200]}`
+          border: `1px solid ${border2.secondary}`
         },
         elevation16: {
           boxShadow: tokenShadows["2xl"],
-          border: `1px solid ${colors2.gray[200]}`
+          border: `1px solid ${border2.secondary}`
         },
         elevation24: {
           boxShadow: tokenShadows["3xl"],
-          border: `1px solid ${colors2.gray[200]}`
+          border: `1px solid ${border2.secondary}`
         }
       }
     },
@@ -799,7 +1088,7 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          border: `1px solid ${colors2.gray[200]}`,
+          border: `1px solid ${border2.secondary}`,
           borderRadius: radius2.lg,
           "&:not(:last-child)": {
             marginBottom: 8
@@ -822,7 +1111,7 @@ function buildComponents(tokens) {
           minHeight: 56,
           "&.Mui-expanded": {
             minHeight: 56,
-            borderBottom: `1px solid ${colors2.gray[200]}`
+            borderBottom: `1px solid ${border2.secondary}`
           }
         },
         content: {
@@ -848,8 +1137,8 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          borderBottom: `1px solid ${colors2.gray[200]}`,
-          backgroundColor: colors2.base.white
+          borderBottom: `1px solid ${border2.secondary}`,
+          backgroundColor: bg2.primary
         }
       }
     },
@@ -873,9 +1162,68 @@ function buildComponents(tokens) {
     MuiChip: {
       styleOverrides: {
         root: {
-          borderRadius: radius2.md,
-          fontWeight: 500,
-          fontSize: 14
+          borderRadius: radius2.md
+        },
+        label: {
+          fontWeight: 500
+        },
+        sizeSmall: {
+          fontSize: 12,
+          height: 20
+        },
+        sizeMedium: {
+          fontSize: 14,
+          height: 24,
+          "& .MuiChip-deleteIcon": { fontSize: 16 }
+        },
+        colorDefault: {
+          "&.MuiChip-filled": {
+            backgroundColor: colors2.gray[50],
+            color: colors2.gray[700],
+            "& .MuiChip-deleteIcon": { color: colors2.gray[400] }
+          }
+        },
+        colorPrimary: {
+          "&.MuiChip-filled": {
+            backgroundColor: colors2.brand[50],
+            color: colors2.brand[700],
+            "& .MuiChip-deleteIcon": { color: colors2.brand[400] }
+          }
+        },
+        colorSecondary: {
+          "&.MuiChip-filled": {
+            backgroundColor: colors2.gray[50],
+            color: colors2.gray[700],
+            "& .MuiChip-deleteIcon": { color: colors2.gray[400] }
+          }
+        },
+        colorError: {
+          "&.MuiChip-filled": {
+            backgroundColor: colors2.error[50],
+            color: colors2.error[700],
+            "& .MuiChip-deleteIcon": { color: colors2.error[400] }
+          }
+        },
+        colorWarning: {
+          "&.MuiChip-filled": {
+            backgroundColor: colors2.warning[50],
+            color: colors2.warning[700],
+            "& .MuiChip-deleteIcon": { color: colors2.warning[400] }
+          }
+        },
+        colorSuccess: {
+          "&.MuiChip-filled": {
+            backgroundColor: colors2.success[50],
+            color: colors2.success[700],
+            "& .MuiChip-deleteIcon": { color: colors2.success[400] }
+          }
+        },
+        colorInfo: {
+          "&.MuiChip-filled": {
+            backgroundColor: colors2.blue[50],
+            color: colors2.blue[700],
+            "& .MuiChip-deleteIcon": { color: colors2.blue[400] }
+          }
         }
       }
     },
@@ -890,7 +1238,7 @@ function buildComponents(tokens) {
           fontSize: 14,
           lineHeight: "20px",
           fontWeight: 500,
-          color: colors2.gray[700]
+          color: text2.secondary
         }
       }
     },
@@ -906,29 +1254,29 @@ function buildComponents(tokens) {
     MuiTableCell: {
       styleOverrides: {
         root: {
-          borderBottom: `1px solid ${colors2.gray[200]}`,
+          borderBottom: `1px solid ${border2.secondary}`,
           padding: "16px 24px",
           fontSize: 14,
           lineHeight: "20px",
-          color: colors2.gray[600]
+          color: fg2.tertiary
         },
         head: {
-          backgroundColor: colors2.gray[50],
-          color: colors2.gray[600],
+          backgroundColor: bg2.secondary,
+          color: fg2.tertiary,
           fontWeight: 500,
           fontSize: 12,
           lineHeight: "18px"
         },
         body: {
-          color: colors2.gray[600]
+          color: fg2.tertiary
         }
       }
     },
     MuiTableHead: {
       styleOverrides: {
         root: {
-          backgroundColor: colors2.gray[50],
-          borderBottom: `1px solid ${colors2.gray[200]}`
+          backgroundColor: bg2.secondary,
+          borderBottom: `1px solid ${border2.secondary}`
         }
       }
     },
@@ -939,12 +1287,12 @@ function buildComponents(tokens) {
             border: 0
           },
           "&:hover": {
-            backgroundColor: colors2.gray[50]
+            backgroundColor: bg2.primaryHover
           },
           "&.Mui-selected": {
-            backgroundColor: colors2.brand[50],
+            backgroundColor: bg2.brandPrimary,
             "&:hover": {
-              backgroundColor: colors2.brand[50]
+              backgroundColor: bg2.brandPrimary
             }
           }
         }
@@ -954,7 +1302,7 @@ function buildComponents(tokens) {
       styleOverrides: {
         root: {
           borderRadius: radius2.xl,
-          border: `1px solid ${colors2.gray[200]}`,
+          border: `1px solid ${border2.secondary}`,
           boxShadow: "none"
         }
       }
@@ -971,16 +1319,16 @@ function buildComponents(tokens) {
           borderRadius: radius2.full
         },
         colorPrimary: {
-          backgroundColor: colors2.brand[600]
+          backgroundColor: bg2.brandSolid
         },
         colorError: {
-          backgroundColor: colors2.error[600]
+          backgroundColor: bg2.errorSolid
         },
         colorSuccess: {
-          backgroundColor: colors2.success[600]
+          backgroundColor: bg2.successSolid
         },
         colorWarning: {
-          backgroundColor: colors2.warning[600]
+          backgroundColor: bg2.warningSolid
         },
         dot: {
           minWidth: 8,
@@ -993,7 +1341,7 @@ function buildComponents(tokens) {
     MuiDivider: {
       styleOverrides: {
         root: {
-          borderColor: colors2.gray[200]
+          borderColor: border2.secondary
         }
       }
     },
@@ -1011,13 +1359,13 @@ function buildComponents(tokens) {
           borderRadius: radius2.sm,
           padding: "8px 12px",
           "&:hover": {
-            backgroundColor: colors2.gray[50]
+            backgroundColor: bg2.primaryHover
           },
           "&.Mui-selected": {
-            backgroundColor: colors2.brand[50],
-            color: colors2.brand[700],
+            backgroundColor: bg2.brandPrimary,
+            color: buttonColors2.secondaryColor.fg,
             "&:hover": {
-              backgroundColor: colors2.brand[100]
+              backgroundColor: bg2.brandSecondary
             }
           }
         }
@@ -1027,7 +1375,7 @@ function buildComponents(tokens) {
       styleOverrides: {
         root: {
           minWidth: 36,
-          color: colors2.gray[500]
+          color: fg2.quaternary
         }
       }
     },
@@ -1037,12 +1385,12 @@ function buildComponents(tokens) {
           fontSize: 14,
           lineHeight: "20px",
           fontWeight: 500,
-          color: colors2.gray[700]
+          color: text2.secondary
         },
         secondary: {
           fontSize: 14,
           lineHeight: "20px",
-          color: colors2.gray[500]
+          color: text2.quaternary
         }
       }
     },
@@ -1050,8 +1398,8 @@ function buildComponents(tokens) {
     MuiTooltip: {
       styleOverrides: {
         tooltip: {
-          backgroundColor: colors2.gray[900],
-          color: colors2.base.white,
+          backgroundColor: bg2.primarySolid,
+          color: text2.white,
           fontSize: 12,
           lineHeight: "18px",
           fontWeight: 600,
@@ -1060,7 +1408,7 @@ function buildComponents(tokens) {
           boxShadow: tokenShadows.lg
         },
         arrow: {
-          color: colors2.gray[900]
+          color: bg2.primarySolid
         }
       }
     },
@@ -1074,30 +1422,31 @@ function buildComponents(tokens) {
           borderRadius: radius2.xl,
           fontSize: 14,
           lineHeight: "20px",
-          padding: "12px 16px"
+          padding: "12px 16px",
+          alignItems: "center"
         },
         standardError: {
-          backgroundColor: colors2.error[50],
+          backgroundColor: bg2.errorPrimary,
           color: colors2.error[700],
-          border: `1px solid ${colors2.error[300]}`,
+          border: `1px solid ${border2.error}`,
           "& .MuiAlert-icon": {
-            color: colors2.error[600]
+            color: fg2.errorPrimary
           }
         },
         standardWarning: {
-          backgroundColor: colors2.warning[50],
+          backgroundColor: bg2.warningPrimary,
           color: colors2.warning[700],
           border: `1px solid ${colors2.warning[300]}`,
           "& .MuiAlert-icon": {
-            color: colors2.warning[600]
+            color: fg2.warningPrimary
           }
         },
         standardSuccess: {
-          backgroundColor: colors2.success[50],
+          backgroundColor: bg2.successPrimary,
           color: colors2.success[700],
           border: `1px solid ${colors2.success[300]}`,
           "& .MuiAlert-icon": {
-            color: colors2.success[600]
+            color: fg2.successPrimary
           }
         },
         standardInfo: {
@@ -1109,7 +1458,8 @@ function buildComponents(tokens) {
           }
         },
         icon: {
-          padding: "2px 0"
+          padding: 0,
+          marginRight: 12
         }
       }
     },
@@ -1147,7 +1497,7 @@ function buildComponents(tokens) {
           fontSize: 18,
           lineHeight: "28px",
           fontWeight: 600,
-          color: colors2.gray[900],
+          color: text2.primary,
           padding: "24px 24px 0"
         }
       }
@@ -1158,7 +1508,7 @@ function buildComponents(tokens) {
           padding: "20px 24px",
           fontSize: 14,
           lineHeight: "20px",
-          color: colors2.gray[600]
+          color: text2.tertiary
         }
       }
     },
@@ -1176,14 +1526,14 @@ function buildComponents(tokens) {
         root: {
           borderRadius: radius2.full,
           height: 8,
-          backgroundColor: colors2.gray[200]
+          backgroundColor: border2.secondary
         },
         barColorPrimary: {
-          backgroundColor: colors2.brand[600],
+          backgroundColor: fg2.brandPrimary,
           borderRadius: radius2.full
         },
         barColorSecondary: {
-          backgroundColor: colors2.gray[600],
+          backgroundColor: bg2.secondarySolid,
           borderRadius: radius2.full
         }
       }
@@ -1191,10 +1541,10 @@ function buildComponents(tokens) {
     MuiCircularProgress: {
       styleOverrides: {
         colorPrimary: {
-          color: colors2.brand[600]
+          color: fg2.brandPrimary
         },
         colorSecondary: {
-          color: colors2.gray[600]
+          color: bg2.secondarySolid
         }
       }
     },
@@ -1205,7 +1555,7 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          backgroundColor: colors2.gray[100]
+          backgroundColor: bg2.tertiary
         },
         rounded: {
           borderRadius: radius2.md
@@ -1219,8 +1569,8 @@ function buildComponents(tokens) {
     MuiSnackbarContent: {
       styleOverrides: {
         root: {
-          backgroundColor: colors2.gray[900],
-          color: colors2.base.white,
+          backgroundColor: bg2.primarySolid,
+          color: text2.white,
           borderRadius: radius2.xl,
           boxShadow: tokenShadows.lg,
           fontSize: 14,
@@ -1248,6 +1598,62 @@ function buildComponents(tokens) {
           overline: "span"
         }
       }
+    },
+    // ─── DataGrid (@mui/x-data-grid) ──────────────────────────────
+    // Not part of MUI core's Components<Theme> type, so we merge via assertion.
+    ...{
+      MuiDataGrid: {
+        styleOverrides: {
+          root: {
+            border: `1px solid ${border2.secondary}`,
+            borderRadius: radius2.xl,
+            fontFamily: "inherit",
+            "& .MuiDataGrid-withBorderColor": {
+              borderColor: border2.secondary
+            }
+          },
+          columnHeaders: {
+            backgroundColor: bg2.secondary
+          },
+          columnHeader: {
+            fontSize: 12,
+            lineHeight: "18px",
+            fontWeight: 500,
+            color: fg2.tertiary,
+            "&:focus, &:focus-within": {
+              outline: "none"
+            }
+          },
+          columnHeaderTitle: {
+            fontWeight: 500
+          },
+          cell: {
+            fontSize: 14,
+            lineHeight: "20px",
+            color: fg2.tertiary,
+            "&:focus, &:focus-within": {
+              outline: "none"
+            }
+          },
+          row: {
+            "&:hover": {
+              backgroundColor: bg2.primaryHover
+            },
+            "&.Mui-selected": {
+              backgroundColor: bg2.brandPrimary,
+              "&:hover": {
+                backgroundColor: bg2.brandPrimary
+              }
+            }
+          },
+          footerContainer: {
+            borderTop: `1px solid ${border2.secondary}`
+          },
+          columnSeparator: {
+            color: border2.secondary
+          }
+        }
+      }
     }
   };
 }
@@ -1255,8 +1661,12 @@ var components = buildComponents({
   colors,
   radius,
   focusRings,
-  shadows
-});
+  shadows,
+  text,
+  bg,
+  fg,
+  border,
+  buttonColors});
 
 // src/theme/shadows.ts
 function buildShadows(tokens) {
@@ -1350,7 +1760,20 @@ var forestPreset = {
         fontWeight,
         display,
         container,
-        widths
+        widths,
+        text,
+        bg,
+        fg,
+        border,
+        buttonColors,
+        avatarColors,
+        breadcrumbColors,
+        iconColors,
+        navColors,
+        sliderColors,
+        toggleColors,
+        chartColors,
+        alpha
       }
     }
   }
@@ -1381,12 +1804,20 @@ var forestThemeOptions = {
 };
 var forestTheme = styles.createTheme(forestThemeOptions);
 
+exports.alpha = alpha;
+exports.avatarColors = avatarColors;
+exports.bg = bg;
+exports.border = border;
+exports.breadcrumbColors = breadcrumbColors;
 exports.buildTheme = buildTheme;
 exports.buildThemeOptions = buildThemeOptions;
+exports.buttonColors = buttonColors;
+exports.chartColors = chartColors;
 exports.colors = colors;
 exports.components = components;
 exports.container = container;
 exports.display = display;
+exports.fg = fg;
 exports.focusRings = focusRings;
 exports.fontFamily = fontFamily;
 exports.fontSize = fontSize;
@@ -1396,12 +1827,17 @@ exports.forestTheme = forestTheme;
 exports.forestThemeOptions = forestThemeOptions;
 exports.getAvailablePresets = getAvailablePresets;
 exports.getPreset = getPreset;
+exports.iconColors = iconColors;
 exports.lineHeight = lineHeight;
+exports.navColors = navColors;
 exports.palette = palette;
 exports.radius = radius;
 exports.registerPreset = registerPreset;
 exports.shadows = shadows2;
+exports.sliderColors = sliderColors;
 exports.spacing = spacing;
+exports.text = text;
+exports.toggleColors = toggleColors;
 exports.typography = typography;
 exports.widths = widths;
 //# sourceMappingURL=theme.js.map