@matteoaliano/forest-ui 0.2.0 → 0.2.2

package/dist/theme.js

@@ -196,1096 +196,1600 @@ var widths = {
   "5xl": 1600,
   "6xl": 1920
 };
-
-// src/theme/palette.ts
-var palette = {
+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: {
-    main: colors.brand[600],
-    light: colors.brand[400],
-    dark: colors.brand[700],
-    contrastText: colors.base.white
+    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: {
-    main: colors.gray[600],
-    light: colors.gray[400],
-    dark: colors.gray[700],
-    contrastText: colors.base.white
-  },
-  error: {
-    main: colors.error[600],
-    light: colors.error[300],
-    dark: colors.error[700],
-    contrastText: colors.base.white
-  },
-  warning: {
-    main: colors.warning[600],
-    light: colors.warning[300],
-    dark: colors.warning[700],
-    contrastText: colors.base.white
-  },
-  success: {
-    main: colors.success[600],
-    light: colors.success[300],
-    dark: colors.success[700],
-    contrastText: colors.base.white
-  },
-  info: {
-    main: colors.blue[600],
-    light: colors.blue[300],
-    dark: colors.blue[700],
-    contrastText: colors.base.white
-  },
-  background: {
-    default: colors.base.white,
-    paper: colors.base.white
-  },
-  text: {
-    primary: colors.gray[900],
-    secondary: colors.gray[700],
-    disabled: colors.gray[500]
-  },
-  divider: colors.gray[200],
-  action: {
-    active: colors.gray[600],
-    hover: colors.gray[50],
-    selected: colors.brand[50],
-    disabled: colors.gray[400],
-    disabledBackground: colors.gray[100]
+    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, text: text2, bg: bg2, fg: fg2, border: border2 } = tokens;
+  return {
+    primary: {
+      main: colors2.brand[600],
+      light: colors2.brand[400],
+      dark: colors2.brand[700],
+      contrastText: colors2.base.white
+    },
+    secondary: {
+      main: colors2.gray[600],
+      light: colors2.gray[400],
+      dark: colors2.gray[700],
+      contrastText: colors2.base.white
+    },
+    error: {
+      main: colors2.error[600],
+      light: colors2.error[300],
+      dark: colors2.error[700],
+      contrastText: colors2.base.white
+    },
+    warning: {
+      main: colors2.warning[600],
+      light: colors2.warning[300],
+      dark: colors2.warning[700],
+      contrastText: colors2.base.white
+    },
+    success: {
+      main: colors2.success[600],
+      light: colors2.success[300],
+      dark: colors2.success[700],
+      contrastText: colors2.base.white
+    },
+    info: {
+      main: colors2.blue[600],
+      light: colors2.blue[300],
+      dark: colors2.blue[700],
+      contrastText: colors2.base.white
+    },
+    background: {
+      default: bg2.primary,
+      paper: bg2.primary
+    },
+    text: {
+      primary: text2.primary,
+      secondary: text2.secondary,
+      disabled: text2.disabled
+    },
+    divider: border2.secondary,
+    action: {
+      active: fg2.tertiary,
+      hover: bg2.primaryHover,
+      selected: bg2.brandPrimary,
+      disabled: fg2.disabled,
+      disabledBackground: bg2.disabled
+    }
+  };
+}
+var palette = buildPalette({
+  colors,
+  text,
+  bg,
+  fg,
+  border
+});
 
 // src/theme/typography.ts
-var typography = {
+function buildTypography(tokens) {
+  const { fontFamily: fontFamily2, display: display2, fontSize: fontSize2, lineHeight: lineHeight2, fontWeight: fontWeight2 } = tokens;
+  return {
+    fontFamily: fontFamily2,
+    fontWeightRegular: fontWeight2.regular,
+    fontWeightMedium: fontWeight2.medium,
+    fontWeightBold: fontWeight2.bold,
+    // Display styles → MUI headings
+    h1: {
+      fontSize: display2.xl.fontSize,
+      lineHeight: display2.xl.lineHeight,
+      letterSpacing: display2.xl.letterSpacing,
+      fontWeight: fontWeight2.semibold
+    },
+    h2: {
+      fontSize: display2.lg.fontSize,
+      lineHeight: display2.lg.lineHeight,
+      letterSpacing: display2.lg.letterSpacing,
+      fontWeight: fontWeight2.semibold
+    },
+    h3: {
+      fontSize: display2.md.fontSize,
+      lineHeight: display2.md.lineHeight,
+      letterSpacing: display2.md.letterSpacing,
+      fontWeight: fontWeight2.semibold
+    },
+    h4: {
+      fontSize: display2.sm.fontSize,
+      lineHeight: display2.sm.lineHeight,
+      fontWeight: fontWeight2.semibold
+    },
+    h5: {
+      fontSize: display2.xs.fontSize,
+      lineHeight: display2.xs.lineHeight,
+      fontWeight: fontWeight2.semibold
+    },
+    h6: {
+      fontSize: fontSize2.xl,
+      lineHeight: lineHeight2.xl,
+      fontWeight: fontWeight2.semibold
+    },
+    subtitle1: {
+      fontSize: fontSize2.lg,
+      lineHeight: lineHeight2.lg,
+      fontWeight: fontWeight2.medium
+    },
+    subtitle2: {
+      fontSize: fontSize2.md,
+      lineHeight: lineHeight2.md,
+      fontWeight: fontWeight2.medium
+    },
+    body1: {
+      fontSize: fontSize2.md,
+      lineHeight: lineHeight2.md,
+      fontWeight: fontWeight2.regular
+    },
+    body2: {
+      fontSize: fontSize2.sm,
+      lineHeight: lineHeight2.sm,
+      fontWeight: fontWeight2.regular
+    },
+    caption: {
+      fontSize: fontSize2.xs,
+      lineHeight: lineHeight2.xs,
+      fontWeight: fontWeight2.regular
+    },
+    overline: {
+      fontSize: fontSize2.xxs,
+      lineHeight: lineHeight2.xxs,
+      fontWeight: fontWeight2.medium,
+      textTransform: "uppercase",
+      letterSpacing: "0.08em"
+    },
+    button: {
+      fontSize: fontSize2.sm,
+      lineHeight: lineHeight2.sm,
+      fontWeight: fontWeight2.semibold,
+      textTransform: "none"
+    }
+  };
+}
+var typography = buildTypography({
   fontFamily,
-  fontWeightRegular: fontWeight.regular,
-  fontWeightMedium: fontWeight.medium,
-  fontWeightBold: fontWeight.bold,
-  // Display styles → MUI headings
-  h1: {
-    fontSize: display.xl.fontSize,
-    lineHeight: display.xl.lineHeight,
-    letterSpacing: display.xl.letterSpacing,
-    fontWeight: fontWeight.semibold
-  },
-  h2: {
-    fontSize: display.lg.fontSize,
-    lineHeight: display.lg.lineHeight,
-    letterSpacing: display.lg.letterSpacing,
-    fontWeight: fontWeight.semibold
-  },
-  h3: {
-    fontSize: display.md.fontSize,
-    lineHeight: display.md.lineHeight,
-    letterSpacing: display.md.letterSpacing,
-    fontWeight: fontWeight.semibold
-  },
-  h4: {
-    fontSize: display.sm.fontSize,
-    lineHeight: display.sm.lineHeight,
-    fontWeight: fontWeight.semibold
-  },
-  h5: {
-    fontSize: display.xs.fontSize,
-    lineHeight: display.xs.lineHeight,
-    fontWeight: fontWeight.semibold
-  },
-  h6: {
-    fontSize: fontSize.xl,
-    lineHeight: lineHeight.xl,
-    fontWeight: fontWeight.semibold
-  },
-  subtitle1: {
-    fontSize: fontSize.lg,
-    lineHeight: lineHeight.lg,
-    fontWeight: fontWeight.medium
-  },
-  subtitle2: {
-    fontSize: fontSize.md,
-    lineHeight: lineHeight.md,
-    fontWeight: fontWeight.medium
-  },
-  body1: {
-    fontSize: fontSize.md,
-    lineHeight: lineHeight.md,
-    fontWeight: fontWeight.regular
-  },
-  body2: {
-    fontSize: fontSize.sm,
-    lineHeight: lineHeight.sm,
-    fontWeight: fontWeight.regular
-  },
-  caption: {
-    fontSize: fontSize.xs,
-    lineHeight: lineHeight.xs,
-    fontWeight: fontWeight.regular
-  },
-  overline: {
-    fontSize: fontSize.xxs,
-    lineHeight: lineHeight.xxs,
-    fontWeight: fontWeight.medium,
-    textTransform: "uppercase",
-    letterSpacing: "0.08em"
-  },
-  button: {
-    fontSize: fontSize.sm,
-    lineHeight: lineHeight.sm,
-    fontWeight: fontWeight.semibold,
-    textTransform: "none"
-  }
-};
+  display,
+  fontSize,
+  lineHeight,
+  fontWeight
+});
 
 // src/theme/components.ts
-var components = {
-  // ─── Button ─────────────────────────────────────────────────────
-  MuiButton: {
-    defaultProps: {
-      disableElevation: true
-    },
-    styleOverrides: {
-      root: {
-        borderRadius: radius.md,
-        fontWeight: 600,
-        "&:focus-visible": {
-          boxShadow: focusRings.brandShadowXs
-        }
-      },
-      sizeLarge: {
-        padding: "12px 20px",
-        fontSize: 16,
-        lineHeight: "24px"
+function buildComponents(tokens) {
+  const {
+    colors: colors2,
+    radius: radius2,
+    focusRings: focusRings2,
+    shadows: tokenShadows,
+    text: text2,
+    bg: bg2,
+    fg: fg2,
+    border: border2,
+    buttonColors: buttonColors2
+  } = tokens;
+  return {
+    // ─── Button ─────────────────────────────────────────────────────
+    MuiButton: {
+      defaultProps: {
+        disableElevation: true
       },
-      sizeMedium: {
-        padding: "10px 16px",
-        fontSize: 14,
-        lineHeight: "20px"
-      },
-      sizeSmall: {
-        padding: "8px 14px",
-        fontSize: 14,
-        lineHeight: "20px"
-      },
-      containedPrimary: {
-        backgroundColor: colors.brand[600],
-        "&:hover": {
-          backgroundColor: colors.brand[700]
-        }
-      },
-      outlinedPrimary: {
-        borderColor: colors.brand[300],
-        color: colors.brand[700],
-        "&:hover": {
-          backgroundColor: colors.brand[50],
-          borderColor: colors.brand[300]
-        }
-      },
-      textPrimary: {
-        color: colors.brand[700],
-        "&:hover": {
-          backgroundColor: colors.brand[50]
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.md,
+          fontWeight: 600,
+          boxShadow: tokenShadows.xs,
+          height: 32,
+          padding: "6px 12px",
+          fontSize: 14,
+          lineHeight: "20px",
+          "&:focus-visible": {
+            boxShadow: focusRings2.brandShadowXs
+          }
+        },
+        containedPrimary: {
+          backgroundColor: buttonColors2.primary.bg,
+          "&:hover": {
+            backgroundColor: buttonColors2.primary.bgHover
+          }
+        },
+        outlinedPrimary: {
+          borderColor: buttonColors2.secondaryColor.border,
+          color: buttonColors2.secondaryColor.fg,
+          "&:hover": {
+            backgroundColor: buttonColors2.secondaryColor.bgHover,
+            borderColor: buttonColors2.secondaryColor.borderHover
+          }
+        },
+        outlinedSecondary: {
+          borderColor: buttonColors2.secondary.border,
+          "&:hover": {
+            borderColor: buttonColors2.secondary.borderHover
+          }
+        },
+        text: {
+          boxShadow: "none"
+        },
+        textPrimary: {
+          color: buttonColors2.tertiaryColor.fg,
+          "&:hover": {
+            backgroundColor: buttonColors2.tertiaryColor.bgHover
+          }
         }
       }
-    }
-  },
-  // ─── Button Group ───────────────────────────────────────────────
-  MuiButtonGroup: {
-    defaultProps: {
-      disableElevation: true
-    },
-    styleOverrides: {
-      root: {
-        borderRadius: radius.md
+    },
+    // ─── Button Group ───────────────────────────────────────────────
+    MuiButtonGroup: {
+      defaultProps: {
+        disableElevation: true
       },
-      grouped: {
-        "&:not(:last-of-type)": {
-          borderRight: `1px solid ${colors.brand[700]}`
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.md
+        },
+        grouped: {
+          "&:not(:last-of-type)": {
+            borderRight: `1px solid ${buttonColors2.primary.borderHover}`
+          }
         }
       }
-    }
-  },
-  // ─── FAB ────────────────────────────────────────────────────────
-  MuiFab: {
-    styleOverrides: {
-      root: {
-        boxShadow: shadows.md,
-        "&:hover": {
-          boxShadow: shadows.lg
+    },
+    // ─── FAB ────────────────────────────────────────────────────────
+    MuiFab: {
+      styleOverrides: {
+        root: {
+          boxShadow: tokenShadows.md,
+          "&:hover": {
+            boxShadow: tokenShadows.lg
+          },
+          "&:focus-visible": {
+            boxShadow: focusRings2.brandShadowSm
+          }
         },
-        "&:focus-visible": {
-          boxShadow: focusRings.brandShadowSm
+        primary: {
+          backgroundColor: buttonColors2.primary.bg,
+          "&:hover": {
+            backgroundColor: buttonColors2.primary.bgHover
+          }
         }
-      },
-      primary: {
-        backgroundColor: colors.brand[600],
-        "&:hover": {
-          backgroundColor: colors.brand[700]
+      }
+    },
+    // ─── TextField / Input ──────────────────────────────────────────
+    MuiTextField: {
+      defaultProps: {
+        variant: "outlined",
+        size: "small"
+      }
+    },
+    MuiInputBase: {
+      styleOverrides: {
+        input: {
+          "&::placeholder": {
+            color: text2.placeholder,
+            WebkitTextFillColor: text2.placeholder,
+            fontWeight: 400,
+            opacity: 1
+          }
         }
       }
-    }
-  },
-  // ─── TextField / Input ──────────────────────────────────────────
-  MuiTextField: {
-    defaultProps: {
-      variant: "outlined",
-      size: "small"
-    }
-  },
-  MuiOutlinedInput: {
-    styleOverrides: {
-      root: {
-        borderRadius: radius.md,
-        "&:hover .MuiOutlinedInput-notchedOutline": {
-          borderColor: colors.brand[300]
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.md,
+          boxShadow: tokenShadows.xs,
+          "&:hover .MuiOutlinedInput-notchedOutline": {
+            borderColor: border2.brand
+          },
+          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            borderColor: border2.brandSolid,
+            borderWidth: 1,
+            boxShadow: "none"
+          },
+          "&.Mui-error .MuiOutlinedInput-notchedOutline": {
+            borderColor: border2.error
+          },
+          "&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            borderColor: border2.errorSolid,
+            boxShadow: "none"
+          }
         },
-        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-          borderColor: colors.brand[600],
-          borderWidth: 1,
-          boxShadow: focusRings.brand
+        notchedOutline: {
+          borderColor: border2.primary
         },
-        "&.Mui-error .MuiOutlinedInput-notchedOutline": {
-          borderColor: colors.error[300]
+        input: {
+          padding: "10px 14px",
+          fontSize: 16,
+          lineHeight: "24px"
         },
-        "&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline": {
-          borderColor: colors.error[600],
-          boxShadow: focusRings.error
+        inputSizeSmall: {
+          padding: "8px 12px",
+          fontSize: 14,
+          lineHeight: "20px"
         }
-      },
-      notchedOutline: {
-        borderColor: colors.gray[300]
-      },
-      input: {
-        padding: "10px 14px",
-        fontSize: 16,
-        lineHeight: "24px",
-        "&::placeholder": {
-          color: colors.gray[500],
-          opacity: 1
-        }
-      },
-      inputSizeSmall: {
-        padding: "8px 12px",
-        fontSize: 14,
-        lineHeight: "20px"
       }
-    }
-  },
-  MuiInputLabel: {
-    styleOverrides: {
-      root: {
-        fontSize: 14,
-        fontWeight: 500,
-        color: colors.gray[700],
-        "&.Mui-focused": {
-          color: colors.gray[700]
-        },
-        "&.Mui-error": {
-          color: colors.error[600]
+    },
+    MuiFormLabel: {
+      styleOverrides: {
+        root: {
+          color: text2.placeholder,
+          "&.Mui-focused": {
+            color: text2.placeholder
+          },
+          "&.Mui-error": {
+            color: text2.errorPrimary
+          }
         }
       }
-    }
-  },
-  MuiFormHelperText: {
-    styleOverrides: {
-      root: {
-        fontSize: 14,
-        lineHeight: "20px",
-        marginTop: 6,
-        marginLeft: 0,
-        "&.Mui-error": {
-          color: colors.error[600]
+    },
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          fontSize: 14,
+          fontWeight: 500,
+          color: text2.placeholder,
+          "&.Mui-focused": {
+            color: text2.placeholder
+          },
+          "&.Mui-error": {
+            color: text2.errorPrimary
+          }
         }
       }
-    }
-  },
-  // ─── Select ─────────────────────────────────────────────────────
-  MuiSelect: {
-    defaultProps: {
-      size: "small"
-    },
-    styleOverrides: {
-      icon: {
-        color: colors.gray[500]
+    },
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: {
+          fontSize: 14,
+          lineHeight: "20px",
+          marginTop: 6,
+          marginLeft: 0,
+          "&.Mui-error": {
+            color: text2.errorPrimary
+          }
+        }
       }
-    }
-  },
-  // ─── Autocomplete ───────────────────────────────────────────────
-  MuiAutocomplete: {
-    styleOverrides: {
-      paper: {
-        borderRadius: radius.md,
-        boxShadow: shadows.lg,
-        border: `1px solid ${colors.gray[200]}`,
-        marginTop: 4
+    },
+    // ─── Select ─────────────────────────────────────────────────────
+    MuiSelect: {
+      defaultProps: {
+        size: "small"
       },
-      option: {
-        fontSize: 16,
-        lineHeight: "24px",
-        padding: "10px 14px",
-        "&.Mui-focused": {
-          backgroundColor: colors.gray[50]
+      styleOverrides: {
+        select: {
+          "&.MuiSelect-select": {
+            "&[aria-placeholder], &:empty + .MuiSelect-nativeInput[value='']~&": {
+              color: text2.placeholder
+            }
+          }
         },
-        '&[aria-selected="true"]': {
-          backgroundColor: colors.brand[50]
+        icon: {
+          color: text2.placeholder
         }
-      },
-      listbox: {
-        padding: 4
       }
-    }
-  },
-  // ─── Checkbox ───────────────────────────────────────────────────
-  MuiCheckbox: {
-    defaultProps: {
-      disableRipple: true
-    },
-    styleOverrides: {
-      root: {
-        color: colors.gray[300],
-        borderRadius: radius.xs,
-        padding: 0,
-        width: 20,
-        height: 20,
-        "&:hover": {
-          backgroundColor: "transparent",
-          color: colors.brand[600]
-        },
-        "&.Mui-checked": {
-          color: colors.brand[600]
-        },
-        "&.Mui-checked:hover": {
-          color: colors.brand[700]
+    },
+    // ─── Autocomplete ───────────────────────────────────────────────
+    MuiAutocomplete: {
+      styleOverrides: {
+        paper: {
+          borderRadius: radius2.md,
+          boxShadow: tokenShadows.lg,
+          border: `1px solid ${border2.secondary}`,
+          marginTop: 4
         },
-        "&.Mui-focusVisible": {
-          outline: "none",
-          boxShadow: focusRings.brand,
-          borderRadius: radius.xs
+        option: {
+          fontSize: 16,
+          lineHeight: "24px",
+          padding: "10px 14px",
+          "&.Mui-focused": {
+            backgroundColor: bg2.primaryHover
+          },
+          '&[aria-selected="true"]': {
+            backgroundColor: bg2.brandPrimary
+          }
         },
-        "&.Mui-disabled": {
-          color: colors.gray[300]
+        listbox: {
+          padding: 4
         }
       }
-    }
-  },
-  // ─── Radio ──────────────────────────────────────────────────────
-  MuiRadio: {
-    defaultProps: {
-      disableRipple: true
-    },
-    styleOverrides: {
-      root: {
-        color: colors.gray[300],
-        padding: 0,
-        "&:hover": {
-          backgroundColor: "transparent",
-          color: colors.brand[600]
-        },
-        "&.Mui-checked": {
-          color: colors.brand[600]
-        },
-        "&.Mui-checked:hover": {
-          color: colors.brand[700]
-        },
-        "&.Mui-focusVisible": {
-          outline: "none",
-          boxShadow: focusRings.brand,
-          borderRadius: radius.full
-        },
-        "&.Mui-disabled": {
-          color: colors.gray[300]
+    },
+    // ─── Checkbox ───────────────────────────────────────────────────
+    MuiCheckbox: {
+      defaultProps: {
+        disableRipple: true
+      },
+      styleOverrides: {
+        root: {
+          color: border2.primary,
+          borderRadius: radius2.xs,
+          padding: 0,
+          width: 20,
+          height: 20,
+          "&:hover": {
+            backgroundColor: "transparent",
+            color: fg2.brandPrimary
+          },
+          "&.Mui-checked": {
+            color: fg2.brandPrimary
+          },
+          "&.Mui-checked:hover": {
+            color: colors2.brand[700]
+          },
+          "&.Mui-focusVisible": {
+            outline: "none",
+            boxShadow: focusRings2.brand,
+            borderRadius: radius2.xs
+          },
+          "&.Mui-disabled": {
+            color: border2.primary
+          }
         }
       }
-    }
-  },
-  // ─── Switch ─────────────────────────────────────────────────────
-  MuiSwitch: {
-    defaultProps: {
-      disableRipple: true
-    },
-    styleOverrides: {
-      root: {
-        width: 44,
-        height: 24,
-        padding: 0
+    },
+    // ─── Radio ──────────────────────────────────────────────────────
+    MuiRadio: {
+      defaultProps: {
+        disableRipple: true
       },
-      switchBase: {
-        padding: 2,
-        "&.Mui-checked": {
-          transform: "translateX(20px)",
-          color: colors.base.white,
-          "& + .MuiSwitch-track": {
-            backgroundColor: colors.brand[600],
-            opacity: 1
+      styleOverrides: {
+        root: {
+          color: border2.primary,
+          padding: 0,
+          "&:hover": {
+            backgroundColor: "transparent",
+            color: fg2.brandPrimary
+          },
+          "&.Mui-checked": {
+            color: fg2.brandPrimary
+          },
+          "&.Mui-checked:hover": {
+            color: colors2.brand[700]
+          },
+          "&.Mui-focusVisible": {
+            outline: "none",
+            boxShadow: focusRings2.brand,
+            borderRadius: radius2.full
+          },
+          "&.Mui-disabled": {
+            color: border2.primary
           }
+        }
+      }
+    },
+    // ─── Switch ─────────────────────────────────────────────────────
+    MuiSwitch: {
+      defaultProps: {
+        disableRipple: true
+      },
+      styleOverrides: {
+        root: {
+          width: 44,
+          height: 24,
+          padding: 0
         },
-        "&.Mui-checked:hover + .MuiSwitch-track": {
-          backgroundColor: colors.brand[700]
-        },
-        "&.Mui-focusVisible .MuiSwitch-thumb": {
-          boxShadow: focusRings.brand
+        switchBase: {
+          padding: 2,
+          "&.Mui-checked": {
+            transform: "translateX(20px)",
+            color: fg2.white,
+            "& + .MuiSwitch-track": {
+              backgroundColor: fg2.brandPrimary,
+              opacity: 1
+            }
+          },
+          "&.Mui-checked:hover + .MuiSwitch-track": {
+            backgroundColor: colors2.brand[700]
+          },
+          "&.Mui-focusVisible .MuiSwitch-thumb": {
+            boxShadow: focusRings2.brand
+          },
+          "&.Mui-disabled .MuiSwitch-thumb": {
+            color: bg2.disabled
+          },
+          "&.Mui-disabled + .MuiSwitch-track": {
+            opacity: 0.5
+          }
         },
-        "&.Mui-disabled .MuiSwitch-thumb": {
-          color: colors.gray[100]
+        thumb: {
+          width: 20,
+          height: 20,
+          boxShadow: "0px 1px 2px 0px #1018280d"
         },
-        "&.Mui-disabled + .MuiSwitch-track": {
-          opacity: 0.5
+        track: {
+          borderRadius: radius2.full,
+          backgroundColor: border2.secondary,
+          opacity: 1
         }
-      },
-      thumb: {
-        width: 20,
-        height: 20,
-        boxShadow: "0px 1px 2px 0px #1018280d"
-      },
-      track: {
-        borderRadius: radius.full,
-        backgroundColor: colors.gray[200],
-        opacity: 1
       }
-    }
-  },
-  // ─── Toggle Button ─────────────────────────────────────────────
-  MuiToggleButton: {
-    styleOverrides: {
-      root: {
-        borderRadius: radius.md,
-        borderColor: colors.gray[300],
-        color: colors.gray[700],
-        fontSize: 14,
-        fontWeight: 600,
-        lineHeight: "20px",
-        padding: "8px 14px",
-        textTransform: "none",
-        "&:hover": {
-          backgroundColor: colors.gray[50]
-        },
-        "&.Mui-selected": {
-          backgroundColor: colors.brand[50],
-          color: colors.brand[700],
-          borderColor: colors.brand[300],
+    },
+    // ─── Toggle Button ─────────────────────────────────────────────
+    MuiToggleButton: {
+      styleOverrides: {
+        root: {
+          borderColor: border2.primary,
+          color: text2.secondary,
+          fontSize: 14,
+          fontWeight: 600,
+          lineHeight: "20px",
+          height: 32,
+          padding: "6px 12px",
+          textTransform: "none",
           "&:hover": {
-            backgroundColor: colors.brand[100]
+            backgroundColor: bg2.primaryHover,
+            borderColor: border2.primary
+          },
+          "&.Mui-selected": {
+            backgroundColor: bg2.brandPrimary,
+            color: buttonColors2.secondaryColor.fg,
+            borderColor: border2.brand,
+            "&:hover": {
+              backgroundColor: bg2.brandSecondary
+            }
+          },
+          "&:focus-visible": {
+            boxShadow: focusRings2.brandShadowXs
           }
-        },
-        "&:focus-visible": {
-          boxShadow: focusRings.brandShadowXs
         }
       }
-    }
-  },
-  MuiToggleButtonGroup: {
-    styleOverrides: {
-      root: {
-        borderRadius: radius.md
-      },
-      grouped: {
-        "&:not(:first-of-type)": {
-          borderRadius: radius.md,
-          marginLeft: -1
+    },
+    MuiToggleButtonGroup: {
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.md,
+          overflow: "hidden"
         },
-        "&:first-of-type": {
-          borderRadius: radius.md
+        grouped: {
+          borderRadius: 0,
+          "&:not(:first-of-type)": {
+            marginLeft: -1
+          },
+          "&:first-of-type": {
+            borderTopLeftRadius: radius2.md,
+            borderBottomLeftRadius: radius2.md
+          },
+          "&:last-of-type": {
+            borderTopRightRadius: radius2.md,
+            borderBottomRightRadius: radius2.md
+          }
         }
       }
-    }
-  },
-  // ─── Card ───────────────────────────────────────────────────────
-  MuiCard: {
-    defaultProps: {
-      elevation: 0
-    },
-    styleOverrides: {
-      root: {
-        borderRadius: radius.xl,
-        border: `1px solid ${colors.gray[200]}`,
-        backgroundColor: colors.base.white,
-        overflow: "hidden"
+    },
+    // ─── Card ───────────────────────────────────────────────────────
+    MuiCard: {
+      defaultProps: {
+        elevation: 0
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.xl,
+          border: `1px solid ${border2.secondary}`,
+          backgroundColor: bg2.primary,
+          overflow: "hidden"
+        }
       }
-    }
-  },
-  MuiCardContent: {
-    styleOverrides: {
-      root: {
-        padding: "24px",
-        "&:last-child": {
-          paddingBottom: "24px"
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: "24px",
+          "&:last-child": {
+            paddingBottom: "24px"
+          }
         }
       }
-    }
-  },
-  MuiCardHeader: {
-    styleOverrides: {
-      root: {
-        padding: "24px 24px 0 24px"
-      },
-      title: {
-        fontSize: 18,
-        fontWeight: 600,
-        lineHeight: "28px"
-      },
-      subheader: {
-        fontSize: 14,
-        lineHeight: "20px",
-        marginTop: 4
-      },
-      action: {
-        marginTop: -4,
-        marginRight: -4
+    },
+    MuiCardHeader: {
+      styleOverrides: {
+        root: {
+          padding: "24px 24px 0 24px"
+        },
+        title: {
+          fontSize: 18,
+          fontWeight: 600,
+          lineHeight: "28px"
+        },
+        subheader: {
+          fontSize: 14,
+          lineHeight: "20px",
+          marginTop: 4
+        },
+        action: {
+          marginTop: -4,
+          marginRight: -4
+        }
       }
-    }
-  },
-  // ─── Paper ──────────────────────────────────────────────────────
-  MuiPaper: {
-    defaultProps: {
-      elevation: 0
-    },
-    styleOverrides: {
-      root: {
-        backgroundImage: "none"
-      },
-      rounded: {
-        borderRadius: radius.lg
-      },
-      elevation1: {
-        boxShadow: shadows.xs,
-        border: `1px solid ${colors.gray[200]}`
-      },
-      elevation2: {
-        boxShadow: shadows.sm,
-        border: `1px solid ${colors.gray[200]}`
-      },
-      elevation3: {
-        boxShadow: shadows.md,
-        border: `1px solid ${colors.gray[200]}`
-      },
-      elevation4: {
-        boxShadow: shadows.lg,
-        border: `1px solid ${colors.gray[200]}`
-      },
-      elevation8: {
-        boxShadow: shadows.xl,
-        border: `1px solid ${colors.gray[200]}`
-      },
-      elevation16: {
-        boxShadow: shadows["2xl"],
-        border: `1px solid ${colors.gray[200]}`
+    },
+    // ─── Paper ──────────────────────────────────────────────────────
+    MuiPaper: {
+      defaultProps: {
+        elevation: 0
       },
-      elevation24: {
-        boxShadow: shadows["3xl"],
-        border: `1px solid ${colors.gray[200]}`
-      }
-    }
-  },
-  // ─── Accordion ──────────────────────────────────────────────────
-  MuiAccordion: {
-    defaultProps: {
-      disableGutters: true,
-      elevation: 0
-    },
-    styleOverrides: {
-      root: {
-        border: `1px solid ${colors.gray[200]}`,
-        borderRadius: radius.lg,
-        "&:not(:last-child)": {
-          marginBottom: 8
+      styleOverrides: {
+        root: {
+          backgroundImage: "none"
+        },
+        rounded: {
+          borderRadius: radius2.lg
+        },
+        elevation1: {
+          boxShadow: tokenShadows.xs,
+          border: `1px solid ${border2.secondary}`
+        },
+        elevation2: {
+          boxShadow: tokenShadows.sm,
+          border: `1px solid ${border2.secondary}`
+        },
+        elevation3: {
+          boxShadow: tokenShadows.md,
+          border: `1px solid ${border2.secondary}`
+        },
+        elevation4: {
+          boxShadow: tokenShadows.lg,
+          border: `1px solid ${border2.secondary}`
+        },
+        elevation8: {
+          boxShadow: tokenShadows.xl,
+          border: `1px solid ${border2.secondary}`
         },
-        "&:before": {
-          display: "none"
+        elevation16: {
+          boxShadow: tokenShadows["2xl"],
+          border: `1px solid ${border2.secondary}`
         },
-        "&.Mui-expanded": {
-          margin: 0,
-          marginBottom: 8,
-          borderRadius: radius.lg
+        elevation24: {
+          boxShadow: tokenShadows["3xl"],
+          border: `1px solid ${border2.secondary}`
         }
       }
-    }
-  },
-  MuiAccordionSummary: {
-    styleOverrides: {
-      root: {
-        padding: "0 24px",
-        minHeight: 56,
-        "&.Mui-expanded": {
-          minHeight: 56,
-          borderBottom: `1px solid ${colors.gray[200]}`
-        }
+    },
+    // ─── Accordion ──────────────────────────────────────────────────
+    MuiAccordion: {
+      defaultProps: {
+        disableGutters: true,
+        elevation: 0
       },
-      content: {
-        margin: "12px 0",
-        "&.Mui-expanded": {
-          margin: "12px 0"
+      styleOverrides: {
+        root: {
+          border: `1px solid ${border2.secondary}`,
+          borderRadius: radius2.lg,
+          "&:not(:last-child)": {
+            marginBottom: 8
+          },
+          "&:before": {
+            display: "none"
+          },
+          "&.Mui-expanded": {
+            margin: 0,
+            marginBottom: 8,
+            borderRadius: radius2.lg
+          }
         }
       }
-    }
-  },
-  MuiAccordionDetails: {
-    styleOverrides: {
-      root: {
-        padding: "24px"
-      }
-    }
-  },
-  // ─── AppBar ─────────────────────────────────────────────────────
-  MuiAppBar: {
-    defaultProps: {
-      elevation: 0,
-      color: "transparent"
-    },
-    styleOverrides: {
-      root: {
-        borderBottom: `1px solid ${colors.gray[200]}`,
-        backgroundColor: colors.base.white
+    },
+    MuiAccordionSummary: {
+      styleOverrides: {
+        root: {
+          padding: "0 24px",
+          minHeight: 56,
+          "&.Mui-expanded": {
+            minHeight: 56,
+            borderBottom: `1px solid ${border2.secondary}`
+          }
+        },
+        content: {
+          margin: "12px 0",
+          "&.Mui-expanded": {
+            margin: "12px 0"
+          }
+        }
       }
-    }
-  },
-  MuiToolbar: {
-    styleOverrides: {
-      root: {
-        minHeight: 64,
-        "@media (min-width: 600px)": {
-          minHeight: 64
+    },
+    MuiAccordionDetails: {
+      styleOverrides: {
+        root: {
+          padding: "24px"
         }
+      }
+    },
+    // ─── AppBar ─────────────────────────────────────────────────────
+    MuiAppBar: {
+      defaultProps: {
+        elevation: 0,
+        color: "transparent"
       },
-      dense: {
-        minHeight: 48,
-        "@media (min-width: 600px)": {
-          minHeight: 48
+      styleOverrides: {
+        root: {
+          borderBottom: `1px solid ${border2.secondary}`,
+          backgroundColor: bg2.primary
         }
       }
-    }
-  },
-  // ─── Chip ───────────────────────────────────────────────────────
-  MuiChip: {
-    styleOverrides: {
-      root: {
-        borderRadius: radius.md,
-        fontWeight: 500,
-        fontSize: 14
-      }
-    }
-  },
-  // ─── Form Control / Label ───────────────────────────────────────
-  MuiFormControlLabel: {
-    styleOverrides: {
-      root: {
-        marginLeft: 0,
-        gap: 8
-      },
-      label: {
-        fontSize: 14,
-        lineHeight: "20px",
-        fontWeight: 500,
-        color: colors.gray[700]
+    },
+    MuiToolbar: {
+      styleOverrides: {
+        root: {
+          minHeight: 64,
+          "@media (min-width: 600px)": {
+            minHeight: 64
+          }
+        },
+        dense: {
+          minHeight: 48,
+          "@media (min-width: 600px)": {
+            minHeight: 48
+          }
+        }
       }
-    }
-  },
-  // ─── Table ───────────────────────────────────────────────────────
-  MuiTable: {
-    styleOverrides: {
-      root: {
-        borderCollapse: "separate",
-        borderSpacing: 0
+    },
+    // ─── Chip ───────────────────────────────────────────────────────
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          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] }
+          }
+        }
       }
-    }
-  },
-  MuiTableCell: {
-    styleOverrides: {
-      root: {
-        borderBottom: `1px solid ${colors.gray[200]}`,
-        padding: "16px 24px",
-        fontSize: 14,
-        lineHeight: "20px",
-        color: colors.gray[600]
-      },
-      head: {
-        backgroundColor: colors.gray[50],
-        color: colors.gray[600],
-        fontWeight: 500,
-        fontSize: 12,
-        lineHeight: "18px"
-      },
-      body: {
-        color: colors.gray[600]
+    },
+    // ─── Form Control / Label ───────────────────────────────────────
+    MuiFormControlLabel: {
+      styleOverrides: {
+        root: {
+          marginLeft: 0,
+          gap: 8
+        },
+        label: {
+          fontSize: 14,
+          lineHeight: "20px",
+          fontWeight: 500,
+          color: text2.secondary
+        }
       }
-    }
-  },
-  MuiTableHead: {
-    styleOverrides: {
-      root: {
-        backgroundColor: colors.gray[50],
-        borderBottom: `1px solid ${colors.gray[200]}`
+    },
+    // ─── Table ───────────────────────────────────────────────────────
+    MuiTable: {
+      styleOverrides: {
+        root: {
+          borderCollapse: "separate",
+          borderSpacing: 0
+        }
       }
-    }
-  },
-  MuiTableRow: {
-    styleOverrides: {
-      root: {
-        "&:last-child td, &:last-child th": {
-          border: 0
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderBottom: `1px solid ${border2.secondary}`,
+          padding: "16px 24px",
+          fontSize: 14,
+          lineHeight: "20px",
+          color: fg2.tertiary
         },
-        "&:hover": {
-          backgroundColor: colors.gray[50]
+        head: {
+          backgroundColor: bg2.secondary,
+          color: fg2.tertiary,
+          fontWeight: 500,
+          fontSize: 12,
+          lineHeight: "18px"
         },
-        "&.Mui-selected": {
-          backgroundColor: colors.brand[50],
+        body: {
+          color: fg2.tertiary
+        }
+      }
+    },
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          backgroundColor: bg2.secondary,
+          borderBottom: `1px solid ${border2.secondary}`
+        }
+      }
+    },
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          "&:last-child td, &:last-child th": {
+            border: 0
+          },
           "&:hover": {
-            backgroundColor: colors.brand[50]
+            backgroundColor: bg2.primaryHover
+          },
+          "&.Mui-selected": {
+            backgroundColor: bg2.brandPrimary,
+            "&:hover": {
+              backgroundColor: bg2.brandPrimary
+            }
           }
         }
       }
-    }
-  },
-  MuiTableContainer: {
-    styleOverrides: {
-      root: {
-        borderRadius: radius.xl,
-        border: `1px solid ${colors.gray[200]}`,
-        boxShadow: "none"
+    },
+    MuiTableContainer: {
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.xl,
+          border: `1px solid ${border2.secondary}`,
+          boxShadow: "none"
+        }
       }
-    }
-  },
-  // ─── Badge ──────────────────────────────────────────────────────
-  MuiBadge: {
-    styleOverrides: {
-      standard: {
-        fontWeight: 500,
-        fontSize: 12,
-        lineHeight: "18px",
-        minWidth: 20,
-        height: 20,
-        borderRadius: radius.full
-      },
-      colorPrimary: {
-        backgroundColor: colors.brand[600]
-      },
-      colorError: {
-        backgroundColor: colors.error[600]
-      },
-      colorSuccess: {
-        backgroundColor: colors.success[600]
-      },
-      colorWarning: {
-        backgroundColor: colors.warning[600]
-      },
-      dot: {
-        minWidth: 8,
-        height: 8,
-        borderRadius: radius.full
+    },
+    // ─── Badge ──────────────────────────────────────────────────────
+    MuiBadge: {
+      styleOverrides: {
+        standard: {
+          fontWeight: 500,
+          fontSize: 12,
+          lineHeight: "18px",
+          minWidth: 20,
+          height: 20,
+          borderRadius: radius2.full
+        },
+        colorPrimary: {
+          backgroundColor: bg2.brandSolid
+        },
+        colorError: {
+          backgroundColor: bg2.errorSolid
+        },
+        colorSuccess: {
+          backgroundColor: bg2.successSolid
+        },
+        colorWarning: {
+          backgroundColor: bg2.warningSolid
+        },
+        dot: {
+          minWidth: 8,
+          height: 8,
+          borderRadius: radius2.full
+        }
       }
-    }
-  },
-  // ─── Divider ────────────────────────────────────────────────────
-  MuiDivider: {
-    styleOverrides: {
-      root: {
-        borderColor: colors.gray[200]
+    },
+    // ─── Divider ────────────────────────────────────────────────────
+    MuiDivider: {
+      styleOverrides: {
+        root: {
+          borderColor: border2.secondary
+        }
       }
-    }
-  },
-  // ─── List ───────────────────────────────────────────────────────
-  MuiList: {
-    styleOverrides: {
-      root: {
-        padding: 4
+    },
+    // ─── List ───────────────────────────────────────────────────────
+    MuiList: {
+      styleOverrides: {
+        root: {
+          padding: 4
+        }
       }
-    }
-  },
-  MuiListItemButton: {
-    styleOverrides: {
-      root: {
-        borderRadius: radius.sm,
-        padding: "8px 12px",
-        "&:hover": {
-          backgroundColor: colors.gray[50]
-        },
-        "&.Mui-selected": {
-          backgroundColor: colors.brand[50],
-          color: colors.brand[700],
+    },
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.sm,
+          padding: "8px 12px",
           "&:hover": {
-            backgroundColor: colors.brand[100]
+            backgroundColor: bg2.primaryHover
+          },
+          "&.Mui-selected": {
+            backgroundColor: bg2.brandPrimary,
+            color: buttonColors2.secondaryColor.fg,
+            "&:hover": {
+              backgroundColor: bg2.brandSecondary
+            }
           }
         }
       }
-    }
-  },
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        minWidth: 36,
-        color: colors.gray[500]
-      }
-    }
-  },
-  MuiListItemText: {
-    styleOverrides: {
-      primary: {
-        fontSize: 14,
-        lineHeight: "20px",
-        fontWeight: 500,
-        color: colors.gray[700]
-      },
-      secondary: {
-        fontSize: 14,
-        lineHeight: "20px",
-        color: colors.gray[500]
+    },
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          minWidth: 36,
+          color: fg2.quaternary
+        }
       }
-    }
-  },
-  // ─── Tooltip ────────────────────────────────────────────────────
-  MuiTooltip: {
-    styleOverrides: {
-      tooltip: {
-        backgroundColor: colors.gray[900],
-        color: colors.base.white,
-        fontSize: 12,
-        lineHeight: "18px",
-        fontWeight: 600,
-        padding: "8px 12px",
-        borderRadius: radius.md,
-        boxShadow: shadows.lg
-      },
-      arrow: {
-        color: colors.gray[900]
+    },
+    MuiListItemText: {
+      styleOverrides: {
+        primary: {
+          fontSize: 14,
+          lineHeight: "20px",
+          fontWeight: 500,
+          color: text2.secondary
+        },
+        secondary: {
+          fontSize: 14,
+          lineHeight: "20px",
+          color: text2.quaternary
+        }
       }
-    }
-  },
-  // ─── Alert ──────────────────────────────────────────────────────
-  MuiAlert: {
-    defaultProps: {
-      variant: "standard"
-    },
-    styleOverrides: {
-      root: {
-        borderRadius: radius.xl,
-        fontSize: 14,
-        lineHeight: "20px",
-        padding: "12px 16px"
-      },
-      standardError: {
-        backgroundColor: colors.error[50],
-        color: colors.error[700],
-        border: `1px solid ${colors.error[300]}`,
-        "& .MuiAlert-icon": {
-          color: colors.error[600]
+    },
+    // ─── Tooltip ────────────────────────────────────────────────────
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          backgroundColor: bg2.primarySolid,
+          color: text2.white,
+          fontSize: 12,
+          lineHeight: "18px",
+          fontWeight: 600,
+          padding: "8px 12px",
+          borderRadius: radius2.md,
+          boxShadow: tokenShadows.lg
+        },
+        arrow: {
+          color: bg2.primarySolid
         }
+      }
+    },
+    // ─── Alert ──────────────────────────────────────────────────────
+    MuiAlert: {
+      defaultProps: {
+        variant: "standard"
       },
-      standardWarning: {
-        backgroundColor: colors.warning[50],
-        color: colors.warning[700],
-        border: `1px solid ${colors.warning[300]}`,
-        "& .MuiAlert-icon": {
-          color: colors.warning[600]
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.xl,
+          fontSize: 14,
+          lineHeight: "20px",
+          padding: "12px 16px",
+          alignItems: "center"
+        },
+        standardError: {
+          backgroundColor: bg2.errorPrimary,
+          color: colors2.error[700],
+          border: `1px solid ${border2.error}`,
+          "& .MuiAlert-icon": {
+            color: fg2.errorPrimary
+          }
+        },
+        standardWarning: {
+          backgroundColor: bg2.warningPrimary,
+          color: colors2.warning[700],
+          border: `1px solid ${colors2.warning[300]}`,
+          "& .MuiAlert-icon": {
+            color: fg2.warningPrimary
+          }
+        },
+        standardSuccess: {
+          backgroundColor: bg2.successPrimary,
+          color: colors2.success[700],
+          border: `1px solid ${colors2.success[300]}`,
+          "& .MuiAlert-icon": {
+            color: fg2.successPrimary
+          }
+        },
+        standardInfo: {
+          backgroundColor: colors2.blue[50],
+          color: colors2.blue[700],
+          border: `1px solid ${colors2.blue[300]}`,
+          "& .MuiAlert-icon": {
+            color: colors2.blue[600]
+          }
+        },
+        icon: {
+          padding: 0,
+          marginRight: 12
         }
-      },
-      standardSuccess: {
-        backgroundColor: colors.success[50],
-        color: colors.success[700],
-        border: `1px solid ${colors.success[300]}`,
-        "& .MuiAlert-icon": {
-          color: colors.success[600]
+      }
+    },
+    MuiAlertTitle: {
+      styleOverrides: {
+        root: {
+          fontWeight: 600,
+          fontSize: 14,
+          lineHeight: "20px",
+          marginBottom: 4
         }
-      },
-      standardInfo: {
-        backgroundColor: colors.blue[50],
-        color: colors.blue[700],
-        border: `1px solid ${colors.blue[300]}`,
-        "& .MuiAlert-icon": {
-          color: colors.blue[600]
+      }
+    },
+    // ─── Backdrop ───────────────────────────────────────────────────
+    MuiBackdrop: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "rgba(16, 24, 40, 0.7)"
         }
-      },
-      icon: {
-        padding: "2px 0"
       }
-    }
-  },
-  MuiAlertTitle: {
-    styleOverrides: {
-      root: {
-        fontWeight: 600,
-        fontSize: 14,
-        lineHeight: "20px",
-        marginBottom: 4
+    },
+    // ─── Dialog ─────────────────────────────────────────────────────
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          borderRadius: radius2.xl,
+          boxShadow: tokenShadows.xl,
+          padding: 0
+        }
       }
-    }
-  },
-  // ─── Backdrop ───────────────────────────────────────────────────
-  MuiBackdrop: {
-    styleOverrides: {
-      root: {
-        backgroundColor: "rgba(16, 24, 40, 0.7)"
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          fontSize: 18,
+          lineHeight: "28px",
+          fontWeight: 600,
+          color: text2.primary,
+          padding: "24px 24px 0"
+        }
       }
-    }
-  },
-  // ─── Dialog ─────────────────────────────────────────────────────
-  MuiDialog: {
-    styleOverrides: {
-      paper: {
-        borderRadius: radius.xl,
-        boxShadow: shadows.xl,
-        padding: 0
+    },
+    MuiDialogContent: {
+      styleOverrides: {
+        root: {
+          padding: "20px 24px",
+          fontSize: 14,
+          lineHeight: "20px",
+          color: text2.tertiary
+        }
       }
-    }
-  },
-  MuiDialogTitle: {
-    styleOverrides: {
-      root: {
-        fontSize: 18,
-        lineHeight: "28px",
-        fontWeight: 600,
-        color: colors.gray[900],
-        padding: "24px 24px 0"
+    },
+    MuiDialogActions: {
+      styleOverrides: {
+        root: {
+          padding: "0 24px 24px",
+          gap: 12
+        }
       }
-    }
-  },
-  MuiDialogContent: {
-    styleOverrides: {
-      root: {
-        padding: "20px 24px",
-        fontSize: 14,
-        lineHeight: "20px",
-        color: colors.gray[600]
+    },
+    // ─── Progress ───────────────────────────────────────────────────
+    MuiLinearProgress: {
+      styleOverrides: {
+        root: {
+          borderRadius: radius2.full,
+          height: 8,
+          backgroundColor: border2.secondary
+        },
+        barColorPrimary: {
+          backgroundColor: fg2.brandPrimary,
+          borderRadius: radius2.full
+        },
+        barColorSecondary: {
+          backgroundColor: bg2.secondarySolid,
+          borderRadius: radius2.full
+        }
       }
-    }
-  },
-  MuiDialogActions: {
-    styleOverrides: {
-      root: {
-        padding: "0 24px 24px",
-        gap: 12
+    },
+    MuiCircularProgress: {
+      styleOverrides: {
+        colorPrimary: {
+          color: fg2.brandPrimary
+        },
+        colorSecondary: {
+          color: bg2.secondarySolid
+        }
       }
-    }
-  },
-  // ─── Progress ───────────────────────────────────────────────────
-  MuiLinearProgress: {
-    styleOverrides: {
-      root: {
-        borderRadius: radius.full,
-        height: 8,
-        backgroundColor: colors.gray[200]
-      },
-      barColorPrimary: {
-        backgroundColor: colors.brand[600],
-        borderRadius: radius.full
+    },
+    // ─── Skeleton ───────────────────────────────────────────────────
+    MuiSkeleton: {
+      defaultProps: {
+        animation: "wave"
       },
-      barColorSecondary: {
-        backgroundColor: colors.gray[600],
-        borderRadius: radius.full
+      styleOverrides: {
+        root: {
+          backgroundColor: bg2.tertiary
+        },
+        rounded: {
+          borderRadius: radius2.md
+        },
+        circular: {
+          borderRadius: radius2.full
+        }
       }
-    }
-  },
-  MuiCircularProgress: {
-    styleOverrides: {
-      colorPrimary: {
-        color: colors.brand[600]
-      },
-      colorSecondary: {
-        color: colors.gray[600]
+    },
+    // ─── Snackbar ───────────────────────────────────────────────────
+    MuiSnackbarContent: {
+      styleOverrides: {
+        root: {
+          backgroundColor: bg2.primarySolid,
+          color: text2.white,
+          borderRadius: radius2.xl,
+          boxShadow: tokenShadows.lg,
+          fontSize: 14,
+          lineHeight: "20px",
+          fontWeight: 500,
+          padding: "6px 16px"
+        }
       }
-    }
-  },
-  // ─── Skeleton ───────────────────────────────────────────────────
-  MuiSkeleton: {
-    defaultProps: {
-      animation: "wave"
-    },
-    styleOverrides: {
-      root: {
-        backgroundColor: colors.gray[100]
-      },
-      rounded: {
-        borderRadius: radius.md
-      },
-      circular: {
-        borderRadius: radius.full
+    },
+    // ─── Typography ─────────────────────────────────────────────────
+    MuiTypography: {
+      defaultProps: {
+        variantMapping: {
+          h1: "h1",
+          h2: "h2",
+          h3: "h3",
+          h4: "h4",
+          h5: "h5",
+          h6: "h6",
+          subtitle1: "p",
+          subtitle2: "p",
+          body1: "p",
+          body2: "p",
+          caption: "span",
+          overline: "span"
+        }
       }
-    }
-  },
-  // ─── Snackbar ───────────────────────────────────────────────────
-  MuiSnackbarContent: {
-    styleOverrides: {
-      root: {
-        backgroundColor: colors.gray[900],
-        color: colors.base.white,
-        borderRadius: radius.xl,
-        boxShadow: shadows.lg,
-        fontSize: 14,
-        lineHeight: "20px",
-        fontWeight: 500,
-        padding: "6px 16px"
+    },
+    // ─── 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
+          }
+        }
       }
     }
-  },
-  // ─── Typography ─────────────────────────────────────────────────
-  MuiTypography: {
-    defaultProps: {
-      variantMapping: {
-        h1: "h1",
-        h2: "h2",
-        h3: "h3",
-        h4: "h4",
-        h5: "h5",
-        h6: "h6",
-        subtitle1: "p",
-        subtitle2: "p",
-        body1: "p",
-        body2: "p",
-        caption: "span",
-        overline: "span"
+  };
+}
+var components = buildComponents({
+  colors,
+  radius,
+  focusRings,
+  shadows,
+  text,
+  bg,
+  fg,
+  border,
+  buttonColors});
+
+// src/theme/shadows.ts
+function buildShadows(tokens) {
+  const tokenShadows = tokens.shadows;
+  return [
+    "none",
+    // 0
+    tokenShadows.xs,
+    // 1
+    tokenShadows.sm,
+    // 2
+    tokenShadows.sm,
+    // 3
+    tokenShadows.md,
+    // 4
+    tokenShadows.md,
+    // 5
+    tokenShadows.md,
+    // 6
+    tokenShadows.lg,
+    // 7
+    tokenShadows.lg,
+    // 8
+    tokenShadows.lg,
+    // 9
+    tokenShadows.xl,
+    // 10
+    tokenShadows.xl,
+    // 11
+    tokenShadows.xl,
+    // 12
+    tokenShadows["2xl"],
+    // 13
+    tokenShadows["2xl"],
+    // 14
+    tokenShadows["2xl"],
+    // 15
+    tokenShadows["3xl"],
+    // 16
+    tokenShadows["3xl"],
+    // 17
+    tokenShadows["3xl"],
+    // 18
+    tokenShadows["3xl"],
+    // 19
+    tokenShadows["3xl"],
+    // 20
+    tokenShadows["3xl"],
+    // 21
+    tokenShadows["3xl"],
+    // 22
+    tokenShadows["3xl"],
+    // 23
+    tokenShadows["3xl"]
+    // 24
+  ];
+}
+var shadows2 = buildShadows({
+  shadows
+});
+function buildThemeOptions(tokens) {
+  return {
+    palette: buildPalette(tokens),
+    typography: buildTypography(tokens),
+    components: buildComponents(tokens),
+    shadows: buildShadows(tokens),
+    shape: {
+      borderRadius: tokens.radius.md
+    }
+  };
+}
+function buildTheme(tokens) {
+  return styles.createTheme(buildThemeOptions(tokens));
+}
+
+// src/theme/presets/forest.ts
+var forestPreset = {
+  name: "forest",
+  defaultVariant: "light",
+  variants: {
+    light: {
+      tokens: {
+        colors,
+        spacing,
+        radius,
+        shadows,
+        focusRings,
+        fontFamily,
+        fontSize,
+        lineHeight,
+        fontWeight,
+        display,
+        container,
+        widths,
+        text,
+        bg,
+        fg,
+        border,
+        buttonColors,
+        avatarColors,
+        breadcrumbColors,
+        iconColors,
+        navColors,
+        sliderColors,
+        toggleColors,
+        chartColors,
+        alpha
       }
     }
   }
 };
 
-// src/theme/shadows.ts
-var shadows2 = [
-  "none",
-  // 0
-  shadows.xs,
-  // 1
-  shadows.sm,
-  // 2
-  shadows.sm,
-  // 3
-  shadows.md,
-  // 4
-  shadows.md,
-  // 5
-  shadows.md,
-  // 6
-  shadows.lg,
-  // 7
-  shadows.lg,
-  // 8
-  shadows.lg,
-  // 9
-  shadows.xl,
-  // 10
-  shadows.xl,
-  // 11
-  shadows.xl,
-  // 12
-  shadows["2xl"],
-  // 13
-  shadows["2xl"],
-  // 14
-  shadows["2xl"],
-  // 15
-  shadows["3xl"],
-  // 16
-  shadows["3xl"],
-  // 17
-  shadows["3xl"],
-  // 18
-  shadows["3xl"],
-  // 19
-  shadows["3xl"],
-  // 20
-  shadows["3xl"],
-  // 21
-  shadows["3xl"],
-  // 22
-  shadows["3xl"],
-  // 23
-  shadows["3xl"]
-  // 24
-];
+// src/theme/presets/index.ts
+var presetRegistry = /* @__PURE__ */ new Map();
+presetRegistry.set(forestPreset.name, forestPreset);
+function getPreset(name) {
+  return presetRegistry.get(name);
+}
+function registerPreset(preset) {
+  presetRegistry.set(preset.name, preset);
+}
+function getAvailablePresets() {
+  return Array.from(presetRegistry.keys());
+}
 
 // src/theme/index.ts
 var forestThemeOptions = {
@@ -1299,21 +1803,40 @@ 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;
 exports.fontWeight = fontWeight;
+exports.forestPreset = forestPreset;
 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