@matteoaliano/forest-ui 0.2.6 → 0.2.8

package/dist/theme.js

@@ -222,12 +222,12 @@ var text = {
 var bg = {
   primary: colors.gray[50],
   primaryAlt: colors.gray[50],
-  primaryHover: colors.gray[50],
+  primaryHover: colors.gray[100],
   primarySolid: colors.gray[950],
   secondary: colors.base.white,
   secondaryAlt: colors.base.white,
   secondarySubtle: colors.gray[25],
-  secondaryHover: colors.gray[100],
+  secondaryHover: colors.gray[50],
   secondarySolid: colors.gray[600],
   tertiary: colors.gray[100],
   quaternary: colors.gray[200],
@@ -438,60 +438,60 @@ var alpha = {
 
 // src/theme/palette.ts
 function buildPalette(tokens) {
-  const { colors: colors2, text: text2, bg: bg2, fg: fg2, border: border2 } = tokens;
+  const { colors: colors3, text: text3, bg: bg3, fg: fg3, border: border3 } = tokens;
   return {
     primary: {
-      main: colors2.brand[600],
-      light: colors2.brand[400],
-      dark: colors2.brand[700],
-      contrastText: colors2.base.white
+      main: colors3.brand[600],
+      light: colors3.brand[400],
+      dark: colors3.brand[700],
+      contrastText: colors3.base.white
     },
     secondary: {
-      main: colors2.gray[600],
-      light: colors2.gray[400],
-      dark: colors2.gray[700],
-      contrastText: colors2.base.white
+      main: colors3.gray[600],
+      light: colors3.gray[400],
+      dark: colors3.gray[700],
+      contrastText: colors3.base.white
     },
     error: {
-      main: colors2.error[600],
-      light: colors2.error[300],
-      dark: colors2.error[700],
-      contrastText: colors2.base.white
+      main: colors3.error[600],
+      light: colors3.error[300],
+      dark: colors3.error[700],
+      contrastText: colors3.base.white
     },
     warning: {
-      main: colors2.warning[600],
-      light: colors2.warning[300],
-      dark: colors2.warning[700],
-      contrastText: colors2.base.white
+      main: colors3.warning[600],
+      light: colors3.warning[300],
+      dark: colors3.warning[700],
+      contrastText: colors3.base.white
     },
     success: {
-      main: colors2.success[600],
-      light: colors2.success[300],
-      dark: colors2.success[700],
-      contrastText: colors2.base.white
+      main: colors3.success[600],
+      light: colors3.success[300],
+      dark: colors3.success[700],
+      contrastText: colors3.base.white
     },
     info: {
-      main: colors2.blue[600],
-      light: colors2.blue[300],
-      dark: colors2.blue[700],
-      contrastText: colors2.base.white
+      main: colors3.blue[600],
+      light: colors3.blue[300],
+      dark: colors3.blue[700],
+      contrastText: colors3.base.white
     },
     background: {
-      default: bg2.primary,
-      paper: bg2.primary
+      default: bg3.primary,
+      paper: bg3.secondary
     },
     text: {
-      primary: text2.primary,
-      secondary: text2.secondary,
-      disabled: text2.disabled
+      primary: text3.primary,
+      secondary: text3.secondary,
+      disabled: text3.disabled
     },
-    divider: border2.secondary,
+    divider: border3.secondary,
     action: {
-      active: fg2.tertiary,
-      hover: bg2.primaryHover,
-      selected: bg2.brandPrimary,
-      disabled: fg2.disabled,
-      disabledBackground: bg2.disabled
+      active: fg3.tertiary,
+      hover: bg3.primaryHover,
+      selected: bg3.brandPrimary,
+      disabled: fg3.disabled,
+      disabledBackground: bg3.disabled
     }
   };
 }
@@ -596,15 +596,15 @@ var typography = buildTypography({
 // src/theme/components.ts
 function buildComponents(tokens) {
   const {
-    colors: colors2,
-    radius: radius2,
-    focusRings: focusRings2,
+    colors: colors3,
+    radius: radius3,
+    focusRings: focusRings3,
     shadows: tokenShadows,
-    text: text2,
-    bg: bg2,
-    fg: fg2,
-    border: border2,
-    buttonColors: buttonColors2
+    text: text3,
+    bg: bg3,
+    fg: fg3,
+    border: border3,
+    buttonColors: buttonColors3
   } = tokens;
   return {
     // ─── Button ─────────────────────────────────────────────────────
@@ -614,7 +614,7 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          borderRadius: radius2.md,
+          borderRadius: radius3.md,
           fontWeight: 600,
           boxShadow: tokenShadows.xs,
           height: 32,
@@ -622,36 +622,36 @@ function buildComponents(tokens) {
           fontSize: 14,
           lineHeight: "20px",
           "&:focus-visible": {
-            boxShadow: focusRings2.brandShadowXs
+            boxShadow: focusRings3.brandShadowXs
           }
         },
         containedPrimary: {
-          backgroundColor: buttonColors2.primary.bg,
+          backgroundColor: buttonColors3.primary.bg,
           "&:hover": {
-            backgroundColor: buttonColors2.primary.bgHover
+            backgroundColor: buttonColors3.primary.bgHover
           }
         },
         outlinedPrimary: {
-          borderColor: buttonColors2.secondaryColor.border,
-          color: buttonColors2.secondaryColor.fg,
+          borderColor: buttonColors3.secondaryColor.border,
+          color: buttonColors3.secondaryColor.fg,
           "&:hover": {
-            backgroundColor: buttonColors2.secondaryColor.bgHover,
-            borderColor: buttonColors2.secondaryColor.borderHover
+            backgroundColor: buttonColors3.secondaryColor.bgHover,
+            borderColor: buttonColors3.secondaryColor.borderHover
           }
         },
         outlinedSecondary: {
-          borderColor: buttonColors2.secondary.border,
+          borderColor: buttonColors3.secondary.border,
           "&:hover": {
-            borderColor: buttonColors2.secondary.borderHover
+            borderColor: buttonColors3.secondary.borderHover
           }
         },
         text: {
           boxShadow: "none"
         },
         textPrimary: {
-          color: buttonColors2.tertiaryColor.fg,
+          color: buttonColors3.tertiaryColor.fg,
           "&:hover": {
-            backgroundColor: buttonColors2.tertiaryColor.bgHover
+            backgroundColor: buttonColors3.tertiaryColor.bgHover
           }
         }
       }
@@ -663,11 +663,11 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          borderRadius: radius2.md
+          borderRadius: radius3.md
         },
         grouped: {
           "&:not(:last-of-type)": {
-            borderRight: `1px solid ${buttonColors2.primary.borderHover}`
+            borderRight: `1px solid ${buttonColors3.primary.borderHover}`
           }
         }
       }
@@ -681,13 +681,13 @@ function buildComponents(tokens) {
             boxShadow: tokenShadows.lg
           },
           "&:focus-visible": {
-            boxShadow: focusRings2.brandShadowSm
+            boxShadow: focusRings3.brandShadowSm
           }
         },
         primary: {
-          backgroundColor: buttonColors2.primary.bg,
+          backgroundColor: buttonColors3.primary.bg,
           "&:hover": {
-            backgroundColor: buttonColors2.primary.bgHover
+            backgroundColor: buttonColors3.primary.bgHover
           }
         }
       }
@@ -695,16 +695,15 @@ function buildComponents(tokens) {
     // ─── TextField / Input ──────────────────────────────────────────
     MuiTextField: {
       defaultProps: {
-        variant: "outlined",
-        size: "small"
+        variant: "outlined"
       }
     },
     MuiInputBase: {
       styleOverrides: {
         input: {
           "&::placeholder": {
-            color: text2.placeholder,
-            WebkitTextFillColor: text2.placeholder,
+            color: text3.placeholder,
+            WebkitTextFillColor: text3.placeholder,
             fontWeight: 400,
             opacity: 1
           }
@@ -714,34 +713,29 @@ function buildComponents(tokens) {
     MuiOutlinedInput: {
       styleOverrides: {
         root: {
-          borderRadius: radius2.md,
+          borderRadius: radius3.md,
           boxShadow: tokenShadows.xs,
           "&:hover .MuiOutlinedInput-notchedOutline": {
-            borderColor: border2.brand
+            borderColor: border3.brand
           },
           "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            borderColor: border2.brandSolid,
+            borderColor: border3.brandSolid,
             borderWidth: 1,
             boxShadow: "none"
           },
           "&.Mui-error .MuiOutlinedInput-notchedOutline": {
-            borderColor: border2.error
+            borderColor: border3.error
           },
           "&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline": {
-            borderColor: border2.errorSolid,
+            borderColor: border3.errorSolid,
             boxShadow: "none"
           }
         },
         notchedOutline: {
-          borderColor: border2.primary
+          borderColor: border3.primary
         },
         input: {
-          padding: "10px 14px",
-          fontSize: 16,
-          lineHeight: "24px"
-        },
-        inputSizeSmall: {
-          padding: "8px 12px",
+          padding: "6px 12px",
           fontSize: 14,
           lineHeight: "20px"
         }
@@ -750,12 +744,12 @@ function buildComponents(tokens) {
     MuiFormLabel: {
       styleOverrides: {
         root: {
-          color: text2.placeholder,
+          color: text3.placeholder,
           "&.Mui-focused": {
-            color: text2.placeholder
+            color: text3.placeholder
           },
           "&.Mui-error": {
-            color: text2.errorPrimary
+            color: text3.errorPrimary
           }
         }
       }
@@ -765,12 +759,18 @@ function buildComponents(tokens) {
         root: {
           fontSize: 14,
           fontWeight: 500,
-          color: text2.placeholder,
+          color: text3.placeholder,
           "&.Mui-focused": {
-            color: text2.placeholder
+            color: text3.placeholder
           },
           "&.Mui-error": {
-            color: text2.errorPrimary
+            color: text3.errorPrimary
+          }
+        },
+        outlined: {
+          transform: "translate(12px, 6px) scale(1)",
+          "&.MuiInputLabel-shrink": {
+            transform: "translate(14px, -9px) scale(0.75)"
           }
         }
       }
@@ -783,7 +783,7 @@ function buildComponents(tokens) {
           marginTop: 6,
           marginLeft: 0,
           "&.Mui-error": {
-            color: text2.errorPrimary
+            color: text3.errorPrimary
           }
         }
       }
@@ -791,18 +791,38 @@ function buildComponents(tokens) {
     // ─── Select ─────────────────────────────────────────────────────
     MuiSelect: {
       defaultProps: {
-        size: "small"
+        MenuProps: {
+          autoFocus: false,
+          slotProps: {
+            backdrop: {
+              sx: { backgroundColor: "transparent" }
+            }
+          }
+        }
       },
       styleOverrides: {
         select: {
           "&.MuiSelect-select": {
-            "&[aria-placeholder], &:empty + .MuiSelect-nativeInput[value='']~&": {
-              color: text2.placeholder
-            }
+            minHeight: "auto",
+            padding: "6px 12px",
+            fontSize: 14,
+            lineHeight: "20px"
           }
         },
         icon: {
-          color: text2.placeholder
+          color: text3.placeholder
+        }
+      }
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          borderRadius: radius3.md,
+          padding: "6px 8px",
+          gap: 4,
+          "&:hover": {
+            backgroundColor: bg3.primaryHover
+          }
         }
       }
     },
@@ -810,20 +830,29 @@ function buildComponents(tokens) {
     MuiAutocomplete: {
       styleOverrides: {
         paper: {
-          borderRadius: radius2.md,
+          borderRadius: radius3.md,
           boxShadow: tokenShadows.lg,
-          border: `1px solid ${border2.secondary}`,
+          border: `1px solid ${border3.secondary}`,
           marginTop: 4
         },
+        inputRoot: {
+          // Override Autocomplete's default padding so the input height stays 32px
+          padding: "0 12px",
+          "&.MuiOutlinedInput-root .MuiAutocomplete-input": {
+            padding: "6px 0",
+            fontSize: 14,
+            lineHeight: "20px"
+          }
+        },
         option: {
-          fontSize: 16,
-          lineHeight: "24px",
-          padding: "10px 14px",
+          fontSize: 14,
+          lineHeight: "20px",
+          padding: "6px 12px",
           "&.Mui-focused": {
-            backgroundColor: bg2.primaryHover
+            backgroundColor: bg3.primaryHover
           },
           '&[aria-selected="true"]': {
-            backgroundColor: bg2.brandPrimary
+            backgroundColor: bg3.brandPrimary
           }
         },
         listbox: {
@@ -838,28 +867,28 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          color: border2.primary,
-          borderRadius: radius2.xs,
+          color: border3.primary,
+          borderRadius: radius3.xs,
           padding: 0,
           width: 20,
           height: 20,
           "&:hover": {
             backgroundColor: "transparent",
-            color: fg2.brandPrimary
+            color: fg3.brandPrimary
           },
           "&.Mui-checked": {
-            color: fg2.brandPrimary
+            color: fg3.brandPrimary
           },
           "&.Mui-checked:hover": {
-            color: colors2.brand[700]
+            color: colors3.brand[700]
           },
           "&.Mui-focusVisible": {
             outline: "none",
-            boxShadow: focusRings2.brand,
-            borderRadius: radius2.xs
+            boxShadow: focusRings3.brand,
+            borderRadius: radius3.xs
           },
           "&.Mui-disabled": {
-            color: border2.primary
+            color: border3.primary
           }
         }
       }
@@ -871,25 +900,25 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          color: border2.primary,
+          color: border3.primary,
           padding: 0,
           "&:hover": {
             backgroundColor: "transparent",
-            color: fg2.brandPrimary
+            color: fg3.brandPrimary
           },
           "&.Mui-checked": {
-            color: fg2.brandPrimary
+            color: fg3.brandPrimary
           },
           "&.Mui-checked:hover": {
-            color: colors2.brand[700]
+            color: colors3.brand[700]
           },
           "&.Mui-focusVisible": {
             outline: "none",
-            boxShadow: focusRings2.brand,
-            borderRadius: radius2.full
+            boxShadow: focusRings3.brand,
+            borderRadius: radius3.full
           },
           "&.Mui-disabled": {
-            color: border2.primary
+            color: border3.primary
           }
         }
       }
@@ -909,20 +938,20 @@ function buildComponents(tokens) {
           padding: 2,
           "&.Mui-checked": {
             transform: "translateX(20px)",
-            color: fg2.white,
+            color: fg3.white,
             "& + .MuiSwitch-track": {
-              backgroundColor: fg2.brandPrimary,
+              backgroundColor: fg3.brandPrimary,
               opacity: 1
             }
           },
           "&.Mui-checked:hover + .MuiSwitch-track": {
-            backgroundColor: colors2.brand[700]
+            backgroundColor: colors3.brand[700]
           },
           "&.Mui-focusVisible .MuiSwitch-thumb": {
-            boxShadow: focusRings2.brand
+            boxShadow: focusRings3.brand
           },
           "&.Mui-disabled .MuiSwitch-thumb": {
-            color: bg2.disabled
+            color: bg3.disabled
           },
           "&.Mui-disabled + .MuiSwitch-track": {
             opacity: 0.5
@@ -934,8 +963,8 @@ function buildComponents(tokens) {
           boxShadow: "0px 1px 2px 0px #1018280d"
         },
         track: {
-          borderRadius: radius2.full,
-          backgroundColor: border2.secondary,
+          borderRadius: radius3.full,
+          backgroundColor: border3.secondary,
           opacity: 1
         }
       }
@@ -944,8 +973,8 @@ function buildComponents(tokens) {
     MuiToggleButton: {
       styleOverrides: {
         root: {
-          borderColor: border2.primary,
-          color: text2.secondary,
+          borderColor: border3.primary,
+          color: text3.secondary,
           fontSize: 14,
           fontWeight: 600,
           lineHeight: "20px",
@@ -953,19 +982,19 @@ function buildComponents(tokens) {
           padding: "6px 12px",
           textTransform: "none",
           "&:hover": {
-            backgroundColor: bg2.primaryHover,
-            borderColor: border2.primary
+            backgroundColor: bg3.primaryHover,
+            borderColor: border3.primary
           },
           "&.Mui-selected": {
-            backgroundColor: bg2.brandPrimary,
-            color: buttonColors2.secondaryColor.fg,
-            borderColor: border2.brand,
+            backgroundColor: bg3.brandPrimary,
+            color: buttonColors3.secondaryColor.fg,
+            borderColor: border3.brandSolid,
             "&:hover": {
-              backgroundColor: bg2.brandSecondary
+              backgroundColor: bg3.brandSecondary
             }
           },
           "&:focus-visible": {
-            boxShadow: focusRings2.brandShadowXs
+            boxShadow: focusRings3.brandShadowXs
           }
         }
       }
@@ -973,7 +1002,7 @@ function buildComponents(tokens) {
     MuiToggleButtonGroup: {
       styleOverrides: {
         root: {
-          borderRadius: radius2.md,
+          borderRadius: radius3.md,
           overflow: "hidden"
         },
         grouped: {
@@ -982,12 +1011,12 @@ function buildComponents(tokens) {
             marginLeft: -1
           },
           "&:first-of-type": {
-            borderTopLeftRadius: radius2.md,
-            borderBottomLeftRadius: radius2.md
+            borderTopLeftRadius: radius3.md,
+            borderBottomLeftRadius: radius3.md
           },
           "&:last-of-type": {
-            borderTopRightRadius: radius2.md,
-            borderBottomRightRadius: radius2.md
+            borderTopRightRadius: radius3.md,
+            borderBottomRightRadius: radius3.md
           }
         }
       }
@@ -999,9 +1028,9 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          borderRadius: radius2.xl,
-          border: `1px solid ${border2.secondary}`,
-          backgroundColor: bg2.primary,
+          borderRadius: radius3.xl,
+          border: `1px solid ${border3.secondary}`,
+          backgroundColor: bg3.primary,
           boxShadow: tokenShadows.xs,
           overflow: "hidden"
         }
@@ -1048,35 +1077,35 @@ function buildComponents(tokens) {
           backgroundImage: "none"
         },
         rounded: {
-          borderRadius: radius2.lg
+          borderRadius: radius3.lg
         },
         elevation1: {
           boxShadow: tokenShadows.xs,
-          border: `1px solid ${border2.secondary}`
+          border: `1px solid ${border3.secondary}`
         },
         elevation2: {
           boxShadow: tokenShadows.sm,
-          border: `1px solid ${border2.secondary}`
+          border: `1px solid ${border3.secondary}`
         },
         elevation3: {
           boxShadow: tokenShadows.md,
-          border: `1px solid ${border2.secondary}`
+          border: `1px solid ${border3.secondary}`
         },
         elevation4: {
           boxShadow: tokenShadows.lg,
-          border: `1px solid ${border2.secondary}`
+          border: `1px solid ${border3.secondary}`
         },
         elevation8: {
           boxShadow: tokenShadows.xl,
-          border: `1px solid ${border2.secondary}`
+          border: `1px solid ${border3.secondary}`
         },
         elevation16: {
           boxShadow: tokenShadows["2xl"],
-          border: `1px solid ${border2.secondary}`
+          border: `1px solid ${border3.secondary}`
         },
         elevation24: {
           boxShadow: tokenShadows["3xl"],
-          border: `1px solid ${border2.secondary}`
+          border: `1px solid ${border3.secondary}`
         }
       }
     },
@@ -1088,8 +1117,8 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          border: `1px solid ${border2.secondary}`,
-          borderRadius: radius2.lg,
+          border: `1px solid ${border3.secondary}`,
+          borderRadius: radius3.lg,
           "&:not(:last-child)": {
             marginBottom: 8
           },
@@ -1099,7 +1128,7 @@ function buildComponents(tokens) {
           "&.Mui-expanded": {
             margin: 0,
             marginBottom: 8,
-            borderRadius: radius2.lg
+            borderRadius: radius3.lg
           }
         }
       }
@@ -1111,7 +1140,7 @@ function buildComponents(tokens) {
           minHeight: 56,
           "&.Mui-expanded": {
             minHeight: 56,
-            borderBottom: `1px solid ${border2.secondary}`
+            borderBottom: `1px solid ${border3.secondary}`
           }
         },
         content: {
@@ -1137,8 +1166,8 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          borderBottom: `1px solid ${border2.secondary}`,
-          backgroundColor: bg2.primary
+          borderBottom: `1px solid ${border3.secondary}`,
+          backgroundColor: bg3.primary
         }
       }
     },
@@ -1162,7 +1191,7 @@ function buildComponents(tokens) {
     MuiChip: {
       styleOverrides: {
         root: {
-          borderRadius: radius2.md
+          borderRadius: radius3.md
         },
         label: {
           fontWeight: 500
@@ -1178,51 +1207,51 @@ function buildComponents(tokens) {
         },
         colorDefault: {
           "&.MuiChip-filled": {
-            backgroundColor: colors2.gray[50],
-            color: colors2.gray[700],
-            "& .MuiChip-deleteIcon": { color: colors2.gray[400] }
+            backgroundColor: colors3.gray[50],
+            color: colors3.gray[700],
+            "& .MuiChip-deleteIcon": { color: colors3.gray[400] }
           }
         },
         colorPrimary: {
           "&.MuiChip-filled": {
-            backgroundColor: colors2.brand[50],
-            color: colors2.brand[700],
-            "& .MuiChip-deleteIcon": { color: colors2.brand[400] }
+            backgroundColor: colors3.brand[50],
+            color: colors3.brand[700],
+            "& .MuiChip-deleteIcon": { color: colors3.brand[400] }
           }
         },
         colorSecondary: {
           "&.MuiChip-filled": {
-            backgroundColor: colors2.gray[50],
-            color: colors2.gray[700],
-            "& .MuiChip-deleteIcon": { color: colors2.gray[400] }
+            backgroundColor: colors3.gray[50],
+            color: colors3.gray[700],
+            "& .MuiChip-deleteIcon": { color: colors3.gray[400] }
           }
         },
         colorError: {
           "&.MuiChip-filled": {
-            backgroundColor: colors2.error[50],
-            color: colors2.error[700],
-            "& .MuiChip-deleteIcon": { color: colors2.error[400] }
+            backgroundColor: colors3.error[50],
+            color: colors3.error[700],
+            "& .MuiChip-deleteIcon": { color: colors3.error[400] }
           }
         },
         colorWarning: {
           "&.MuiChip-filled": {
-            backgroundColor: colors2.warning[50],
-            color: colors2.warning[700],
-            "& .MuiChip-deleteIcon": { color: colors2.warning[400] }
+            backgroundColor: colors3.warning[50],
+            color: colors3.warning[700],
+            "& .MuiChip-deleteIcon": { color: colors3.warning[400] }
           }
         },
         colorSuccess: {
           "&.MuiChip-filled": {
-            backgroundColor: colors2.success[50],
-            color: colors2.success[700],
-            "& .MuiChip-deleteIcon": { color: colors2.success[400] }
+            backgroundColor: colors3.success[50],
+            color: colors3.success[700],
+            "& .MuiChip-deleteIcon": { color: colors3.success[400] }
           }
         },
         colorInfo: {
           "&.MuiChip-filled": {
-            backgroundColor: colors2.blue[50],
-            color: colors2.blue[700],
-            "& .MuiChip-deleteIcon": { color: colors2.blue[400] }
+            backgroundColor: colors3.blue[50],
+            color: colors3.blue[700],
+            "& .MuiChip-deleteIcon": { color: colors3.blue[400] }
           }
         }
       }
@@ -1238,7 +1267,7 @@ function buildComponents(tokens) {
           fontSize: 14,
           lineHeight: "20px",
           fontWeight: 500,
-          color: text2.secondary
+          color: text3.secondary
         }
       }
     },
@@ -1254,29 +1283,29 @@ function buildComponents(tokens) {
     MuiTableCell: {
       styleOverrides: {
         root: {
-          borderBottom: `1px solid ${border2.secondary}`,
+          borderBottom: `1px solid ${border3.secondary}`,
           padding: "16px 24px",
           fontSize: 14,
           lineHeight: "20px",
-          color: fg2.tertiary
+          color: fg3.tertiary
         },
         head: {
-          backgroundColor: bg2.secondary,
-          color: fg2.tertiary,
+          backgroundColor: bg3.secondary,
+          color: fg3.tertiary,
           fontWeight: 500,
           fontSize: 12,
           lineHeight: "18px"
         },
         body: {
-          color: fg2.tertiary
+          color: fg3.tertiary
         }
       }
     },
     MuiTableHead: {
       styleOverrides: {
         root: {
-          backgroundColor: bg2.secondary,
-          borderBottom: `1px solid ${border2.secondary}`
+          backgroundColor: bg3.secondary,
+          borderBottom: `1px solid ${border3.secondary}`
         }
       }
     },
@@ -1287,12 +1316,12 @@ function buildComponents(tokens) {
             border: 0
           },
           "&:hover": {
-            backgroundColor: bg2.primaryHover
+            backgroundColor: bg3.primaryHover
           },
           "&.Mui-selected": {
-            backgroundColor: bg2.brandPrimary,
+            backgroundColor: bg3.brandPrimary,
             "&:hover": {
-              backgroundColor: bg2.brandPrimary
+              backgroundColor: bg3.brandPrimary
             }
           }
         }
@@ -1301,8 +1330,8 @@ function buildComponents(tokens) {
     MuiTableContainer: {
       styleOverrides: {
         root: {
-          borderRadius: radius2.xl,
-          border: `1px solid ${border2.secondary}`,
+          borderRadius: radius3.xl,
+          border: `1px solid ${border3.secondary}`,
           boxShadow: "none"
         }
       }
@@ -1316,24 +1345,24 @@ function buildComponents(tokens) {
           lineHeight: "18px",
           minWidth: 20,
           height: 20,
-          borderRadius: radius2.full
+          borderRadius: radius3.full
         },
         colorPrimary: {
-          backgroundColor: bg2.brandSolid
+          backgroundColor: bg3.brandSolid
         },
         colorError: {
-          backgroundColor: bg2.errorSolid
+          backgroundColor: bg3.errorSolid
         },
         colorSuccess: {
-          backgroundColor: bg2.successSolid
+          backgroundColor: bg3.successSolid
         },
         colorWarning: {
-          backgroundColor: bg2.warningSolid
+          backgroundColor: bg3.warningSolid
         },
         dot: {
           minWidth: 8,
           height: 8,
-          borderRadius: radius2.full
+          borderRadius: radius3.full
         }
       }
     },
@@ -1341,7 +1370,7 @@ function buildComponents(tokens) {
     MuiDivider: {
       styleOverrides: {
         root: {
-          borderColor: border2.secondary
+          borderColor: border3.secondary
         }
       }
     },
@@ -1356,16 +1385,16 @@ function buildComponents(tokens) {
     MuiListItemButton: {
       styleOverrides: {
         root: {
-          borderRadius: radius2.sm,
+          borderRadius: radius3.sm,
           padding: "8px 12px",
           "&:hover": {
-            backgroundColor: bg2.primaryHover
+            backgroundColor: bg3.primaryHover
           },
           "&.Mui-selected": {
-            backgroundColor: bg2.brandPrimary,
-            color: buttonColors2.secondaryColor.fg,
+            backgroundColor: bg3.brandPrimary,
+            color: buttonColors3.secondaryColor.fg,
             "&:hover": {
-              backgroundColor: bg2.brandSecondary
+              backgroundColor: bg3.brandSecondary
             }
           }
         }
@@ -1375,7 +1404,7 @@ function buildComponents(tokens) {
       styleOverrides: {
         root: {
           minWidth: 36,
-          color: fg2.quaternary
+          color: fg3.quaternary
         }
       }
     },
@@ -1385,12 +1414,12 @@ function buildComponents(tokens) {
           fontSize: 14,
           lineHeight: "20px",
           fontWeight: 500,
-          color: text2.secondary
+          color: text3.secondary
         },
         secondary: {
           fontSize: 14,
           lineHeight: "20px",
-          color: text2.quaternary
+          color: text3.quaternary
         }
       }
     },
@@ -1398,17 +1427,17 @@ function buildComponents(tokens) {
     MuiTooltip: {
       styleOverrides: {
         tooltip: {
-          backgroundColor: bg2.primarySolid,
-          color: text2.white,
+          backgroundColor: bg3.primarySolid,
+          color: text3.white,
           fontSize: 12,
           lineHeight: "18px",
           fontWeight: 600,
           padding: "8px 12px",
-          borderRadius: radius2.md,
+          borderRadius: radius3.md,
           boxShadow: tokenShadows.lg
         },
         arrow: {
-          color: bg2.primarySolid
+          color: bg3.primarySolid
         }
       }
     },
@@ -1419,42 +1448,42 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          borderRadius: radius2.xl,
+          borderRadius: radius3.xl,
           fontSize: 14,
           lineHeight: "20px",
           padding: "12px 16px",
           alignItems: "center"
         },
         standardError: {
-          backgroundColor: bg2.errorPrimary,
-          color: colors2.error[700],
-          border: `1px solid ${border2.error}`,
+          backgroundColor: bg3.errorPrimary,
+          color: colors3.error[700],
+          border: `1px solid ${border3.error}`,
           "& .MuiAlert-icon": {
-            color: fg2.errorPrimary
+            color: fg3.errorPrimary
           }
         },
         standardWarning: {
-          backgroundColor: bg2.warningPrimary,
-          color: colors2.warning[700],
-          border: `1px solid ${colors2.warning[300]}`,
+          backgroundColor: bg3.warningPrimary,
+          color: colors3.warning[700],
+          border: `1px solid ${colors3.warning[300]}`,
           "& .MuiAlert-icon": {
-            color: fg2.warningPrimary
+            color: fg3.warningPrimary
           }
         },
         standardSuccess: {
-          backgroundColor: bg2.successPrimary,
-          color: colors2.success[700],
-          border: `1px solid ${colors2.success[300]}`,
+          backgroundColor: bg3.successPrimary,
+          color: colors3.success[700],
+          border: `1px solid ${colors3.success[300]}`,
           "& .MuiAlert-icon": {
-            color: fg2.successPrimary
+            color: fg3.successPrimary
           }
         },
         standardInfo: {
-          backgroundColor: colors2.blue[50],
-          color: colors2.blue[700],
-          border: `1px solid ${colors2.blue[300]}`,
+          backgroundColor: colors3.blue[50],
+          color: colors3.blue[700],
+          border: `1px solid ${colors3.blue[300]}`,
           "& .MuiAlert-icon": {
-            color: colors2.blue[600]
+            color: colors3.blue[600]
           }
         },
         icon: {
@@ -1485,7 +1514,7 @@ function buildComponents(tokens) {
     MuiDialog: {
       styleOverrides: {
         paper: {
-          borderRadius: radius2.xl,
+          borderRadius: radius3.xl,
           boxShadow: tokenShadows.xl,
           padding: 0
         }
@@ -1497,7 +1526,7 @@ function buildComponents(tokens) {
           fontSize: 18,
           lineHeight: "28px",
           fontWeight: 600,
-          color: text2.primary,
+          color: text3.primary,
           padding: "24px 24px 0"
         }
       }
@@ -1508,7 +1537,7 @@ function buildComponents(tokens) {
           padding: "20px 24px",
           fontSize: 14,
           lineHeight: "20px",
-          color: text2.tertiary
+          color: text3.tertiary
         }
       }
     },
@@ -1524,27 +1553,27 @@ function buildComponents(tokens) {
     MuiLinearProgress: {
       styleOverrides: {
         root: {
-          borderRadius: radius2.full,
+          borderRadius: radius3.full,
           height: 8,
-          backgroundColor: border2.secondary
+          backgroundColor: border3.secondary
         },
         barColorPrimary: {
-          backgroundColor: fg2.brandPrimary,
-          borderRadius: radius2.full
+          backgroundColor: fg3.brandPrimary,
+          borderRadius: radius3.full
         },
         barColorSecondary: {
-          backgroundColor: bg2.secondarySolid,
-          borderRadius: radius2.full
+          backgroundColor: bg3.secondarySolid,
+          borderRadius: radius3.full
         }
       }
     },
     MuiCircularProgress: {
       styleOverrides: {
         colorPrimary: {
-          color: fg2.brandPrimary
+          color: fg3.brandPrimary
         },
         colorSecondary: {
-          color: bg2.secondarySolid
+          color: bg3.secondarySolid
         }
       }
     },
@@ -1555,13 +1584,13 @@ function buildComponents(tokens) {
       },
       styleOverrides: {
         root: {
-          backgroundColor: bg2.tertiary
+          backgroundColor: bg3.tertiary
         },
         rounded: {
-          borderRadius: radius2.md
+          borderRadius: radius3.md
         },
         circular: {
-          borderRadius: radius2.full
+          borderRadius: radius3.full
         }
       }
     },
@@ -1569,9 +1598,9 @@ function buildComponents(tokens) {
     MuiSnackbarContent: {
       styleOverrides: {
         root: {
-          backgroundColor: bg2.primarySolid,
-          color: text2.white,
-          borderRadius: radius2.xl,
+          backgroundColor: bg3.primarySolid,
+          color: text3.white,
+          borderRadius: radius3.xl,
           boxShadow: tokenShadows.lg,
           fontSize: 14,
           lineHeight: "20px",
@@ -1605,21 +1634,21 @@ function buildComponents(tokens) {
       MuiDataGrid: {
         styleOverrides: {
           root: {
-            border: `1px solid ${border2.secondary}`,
-            borderRadius: radius2.xl,
+            border: `1px solid ${border3.secondary}`,
+            borderRadius: radius3.xl,
             fontFamily: "inherit",
             "& .MuiDataGrid-withBorderColor": {
-              borderColor: border2.secondary
+              borderColor: border3.secondary
             }
           },
           columnHeaders: {
-            backgroundColor: bg2.secondary
+            backgroundColor: bg3.secondary
           },
           columnHeader: {
             fontSize: 12,
             lineHeight: "18px",
             fontWeight: 500,
-            color: fg2.tertiary,
+            color: fg3.tertiary,
             "&:focus, &:focus-within": {
               outline: "none"
             }
@@ -1630,27 +1659,27 @@ function buildComponents(tokens) {
           cell: {
             fontSize: 14,
             lineHeight: "20px",
-            color: fg2.tertiary,
+            color: fg3.tertiary,
             "&:focus, &:focus-within": {
               outline: "none"
             }
           },
           row: {
             "&:hover": {
-              backgroundColor: bg2.primaryHover
+              backgroundColor: bg3.primaryHover
             },
             "&.Mui-selected": {
-              backgroundColor: bg2.brandPrimary,
+              backgroundColor: bg3.brandPrimary,
               "&:hover": {
-                backgroundColor: bg2.brandPrimary
+                backgroundColor: bg3.brandPrimary
               }
             }
           },
           footerContainer: {
-            borderTop: `1px solid ${border2.secondary}`
+            borderTop: `1px solid ${border3.secondary}`
           },
           columnSeparator: {
-            color: border2.secondary
+            color: border3.secondary
           }
         }
       }
@@ -1779,9 +1808,351 @@ var forestPreset = {
   }
 };
 
+// src/theme/presets/alkemy-plus.ts
+var red = {
+  50: "#fef2f2",
+  100: "#fee2e2",
+  200: "#fecaca",
+  600: "#dc2626",
+  700: "#b91c1c",
+  800: "#991b1b",
+  900: "#7f1d1d"};
+var colors2 = {
+  base: {
+    white: "#ffffff",
+    black: "#000000",
+    transparent: "#ffffff00"
+  },
+  /** Brand scale — black-based for primary actions */
+  brand: {
+    25: "#fafafa",
+    50: "#f5f5f5",
+    100: "#ebebeb",
+    200: "#d6d6d6",
+    300: "#b0b0b0",
+    400: "#737373",
+    500: "#404040",
+    600: "#1a1a1a",
+    700: "#0d0d0d",
+    800: "#050505",
+    900: "#000000",
+    950: "#000000"
+  },
+  /** Warm-neutral gray scale */
+  gray: {
+    25: "#fdfcfc",
+    50: "#faf9f8",
+    100: "#f5f3f1",
+    200: "#e8e5e3",
+    300: "#d8d8dc",
+    400: "#a0a0a6",
+    500: "#71717a",
+    600: "#52525b",
+    700: "#3f3f46",
+    800: "#27272a",
+    900: "#18181b",
+    950: "#09090b"
+  },
+  /** Error — forest defaults (standard UX red) */
+  error: colors.error,
+  /** Warning — orange/yellow tones from Alkemy+ palette */
+  warning: {
+    25: "#fffcf5",
+    50: "#fff7ed",
+    100: "#ffedd5",
+    200: "#fed7aa",
+    300: "#fdba74",
+    400: "#fb923c",
+    500: "#f08828",
+    600: "#ea580c",
+    700: "#c2410c",
+    800: "#9a3412",
+    900: "#7c2d12",
+    950: "#431407"
+  },
+  /** Success — forest defaults (standard UX green) */
+  success: colors.success,
+  /** Blue (info) — forest defaults (standard UX) */
+  blue: colors.blue
+};
+var radius2 = {
+  ...radius,
+  xxs: 1,
+  xs: 2,
+  sm: 3,
+  md: 4,
+  lg: 5,
+  xl: 6,
+  "2xl": 8,
+  "3xl": 10,
+  "4xl": 12
+};
+var text2 = {
+  primary: colors2.gray[900],
+  secondary: colors2.gray[700],
+  secondaryHover: colors2.gray[800],
+  tertiary: colors2.gray[600],
+  tertiaryHover: colors2.gray[700],
+  quaternary: colors2.gray[500],
+  disabled: colors2.gray[500],
+  placeholder: colors2.gray[500],
+  placeholderSubtle: colors2.gray[300],
+  white: colors2.base.white,
+  brandPrimary: red[900],
+  brandSecondary: red[700],
+  brandTertiary: red[600],
+  brandTertiaryAlt: red[600],
+  primaryOnBrand: colors2.base.white,
+  secondaryOnBrand: colors2.brand[200],
+  tertiaryOnBrand: colors2.brand[200],
+  quaternaryOnBrand: colors2.brand[300],
+  errorPrimary: colors2.error[600],
+  warningPrimary: colors2.warning[600],
+  successPrimary: colors2.success[600]
+};
+var bg2 = {
+  primary: colors2.gray[50],
+  primaryAlt: colors2.gray[50],
+  primaryHover: colors2.gray[50],
+  primarySolid: colors2.gray[950],
+  secondary: colors2.base.white,
+  secondaryAlt: colors2.base.white,
+  secondarySubtle: colors2.gray[25],
+  secondaryHover: colors2.gray[100],
+  secondarySolid: colors2.gray[600],
+  tertiary: colors2.gray[100],
+  quaternary: colors2.gray[200],
+  active: colors2.gray[50],
+  disabled: colors2.gray[100],
+  disabledSubtle: colors2.gray[50],
+  overlay: colors2.gray[950],
+  brandPrimary: colors2.brand[100],
+  brandPrimaryAlt: colors2.brand[100],
+  brandSecondary: colors2.brand[200],
+  brandSolid: colors2.brand[600],
+  brandSolidHover: colors2.brand[700],
+  brandSection: colors2.brand[800],
+  brandSectionSubtle: colors2.brand[700],
+  errorPrimary: colors2.error[50],
+  errorSecondary: colors2.error[100],
+  errorSolid: colors2.error[600],
+  warningPrimary: colors2.warning[50],
+  warningSecondary: colors2.warning[100],
+  warningSolid: colors2.warning[600],
+  successPrimary: colors2.success[50],
+  successSecondary: colors2.success[100],
+  successSolid: colors2.success[600]
+};
+var fg2 = {
+  primary: colors2.gray[900],
+  secondary: colors2.gray[700],
+  secondaryHover: colors2.gray[800],
+  tertiary: colors2.gray[600],
+  tertiaryHover: colors2.gray[700],
+  quaternary: colors2.gray[500],
+  quaternaryHover: colors2.gray[600],
+  quinary: colors2.gray[400],
+  quinaryHover: colors2.gray[500],
+  senary: colors2.gray[300],
+  white: colors2.base.white,
+  disabled: colors2.gray[400],
+  disabledSubtle: colors2.gray[300],
+  brandPrimary: colors2.brand[600],
+  brandPrimaryAlt: colors2.brand[600],
+  brandSecondary: colors2.brand[500],
+  errorPrimary: colors2.error[600],
+  errorSecondary: colors2.error[500],
+  warningPrimary: colors2.warning[600],
+  warningSecondary: colors2.warning[500],
+  successPrimary: colors2.success[600],
+  successSecondary: colors2.success[500]
+};
+var border2 = {
+  primary: colors2.gray[300],
+  secondary: colors2.gray[200],
+  tertiary: colors2.gray[100],
+  disabled: colors2.gray[300],
+  disabledSubtle: colors2.gray[200],
+  brand: colors2.brand[300],
+  brandSolid: colors2.brand[600],
+  brandSolidAlt: colors2.brand[600],
+  error: colors2.error[300],
+  errorSolid: colors2.error[600]
+};
+var buttonColors2 = {
+  /** Primary buttons — black */
+  primary: {
+    bg: colors2.brand[600],
+    bgHover: colors2.brand[700],
+    fg: colors2.base.white,
+    fgHover: colors2.base.white,
+    border: colors2.brand[600],
+    borderHover: colors2.brand[700]
+  },
+  secondary: {
+    bg: colors2.base.white,
+    bgHover: colors2.gray[50],
+    fg: colors2.gray[700],
+    fgHover: colors2.gray[800],
+    border: colors2.gray[300],
+    borderHover: colors2.gray[300]
+  },
+  /** Outlined accent buttons — dark */
+  secondaryColor: {
+    bg: colors2.base.white,
+    bgHover: colors2.brand[50],
+    fg: colors2.brand[700],
+    fgHover: colors2.brand[800],
+    border: colors2.brand[300],
+    borderHover: colors2.brand[300]
+  },
+  tertiary: {
+    fg: colors2.gray[600],
+    fgHover: colors2.gray[700],
+    bgHover: colors2.gray[50]
+  },
+  /** Text accent buttons — red */
+  tertiaryColor: {
+    fg: red[700],
+    fgHover: red[800],
+    bgHover: red[50]
+  },
+  primaryError: {
+    bg: colors2.error[600],
+    bgHover: colors2.error[700],
+    fg: colors2.base.white,
+    fgHover: colors2.base.white,
+    border: colors2.error[600],
+    borderHover: colors2.error[700]
+  },
+  secondaryError: {
+    bg: colors2.base.white,
+    bgHover: colors2.error[50],
+    fg: colors2.error[700],
+    fgHover: colors2.error[800],
+    border: colors2.error[300],
+    borderHover: colors2.error[300]
+  },
+  tertiaryError: {
+    fg: colors2.error[700],
+    fgHover: colors2.error[800],
+    bgHover: colors2.error[50]
+  }
+};
+var avatarColors2 = {
+  bg: colors2.gray[100],
+  contrastBorder: "#00000014",
+  profilePhotoBorder: colors2.base.white,
+  focusBorder: "#a0a0a624"
+};
+var breadcrumbColors2 = {
+  fg: colors2.gray[600],
+  fgHover: colors2.gray[700],
+  bgHover: colors2.gray[50],
+  brandBgHover: red[50],
+  brandFgHover: red[700],
+  iconFg: colors2.gray[500],
+  iconFgHover: colors2.gray[700],
+  brandIconFgHover: red[700]
+};
+var iconColors2 = {
+  fgBrand: red[600],
+  fgBrandOnBrand: red[200],
+  featuredModernBorder: colors2.gray[200],
+  featuredLightFgBrand: red[600],
+  featuredLightFgGray: colors2.gray[500],
+  featuredLightFgError: colors2.error[600],
+  featuredLightFgWarning: colors2.warning[600],
+  featuredLightFgSuccess: colors2.success[600],
+  featuredDarkFgBrand: colors2.base.white,
+  featuredDarkFgGray: colors2.base.white,
+  featuredDarkFgError: colors2.base.white,
+  featuredDarkFgWarning: colors2.base.white,
+  featuredDarkFgSuccess: colors2.base.white
+};
+var navColors2 = {
+  itemIconFg: colors2.gray[500],
+  itemIconFgActive: colors2.gray[500],
+  itemButtonIconFg: colors2.gray[500],
+  itemButtonIconFgActive: colors2.gray[700]
+};
+var sliderColors2 = {
+  handleBorder: red[600],
+  handleBg: colors2.base.white
+};
+var toggleColors2 = {
+  buttonFgDisabled: colors2.gray[50]
+};
+var chartColors2 = {
+  axisFg: colors2.gray[200],
+  gridlineFg: colors2.gray[100],
+  labelFg: colors2.gray[600],
+  labelFgEmphasis: colors2.gray[700],
+  bg: colors2.base.white,
+  bgAlt: colors2.gray[50],
+  tooltipBg: colors2.gray[950],
+  tooltipFg: colors2.base.white,
+  crosshairFg: colors2.gray[500],
+  legendFg: colors2.gray[700],
+  series1Fg: colors2.brand[600],
+  series1FgHover: colors2.brand[700],
+  series1Bg: colors2.brand[100],
+  series1BgHover: colors2.brand[200],
+  series2Fg: red[600],
+  series2FgHover: red[700],
+  series2Bg: red[100],
+  series2BgHover: red[200]
+};
+var focusRings2 = {
+  brand: "0px 0px 0px 4px #f040403d",
+  brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f040403d",
+  brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #f040403d",
+  gray: "0px 0px 0px 4px #a0a0a624",
+  grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #a0a0a624",
+  grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #a0a0a624",
+  error: "0px 0px 0px 4px #f044383d",
+  errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
+};
+var alkemyPlusPreset = {
+  name: "alkemy-plus",
+  defaultVariant: "light",
+  variants: {
+    light: {
+      tokens: {
+        colors: colors2,
+        spacing,
+        radius: radius2,
+        shadows,
+        focusRings: focusRings2,
+        fontFamily: '"Aeonik", sans-serif',
+        fontSize,
+        lineHeight,
+        fontWeight,
+        display,
+        container,
+        widths,
+        text: text2,
+        bg: bg2,
+        fg: fg2,
+        border: border2,
+        buttonColors: buttonColors2,
+        avatarColors: avatarColors2,
+        breadcrumbColors: breadcrumbColors2,
+        iconColors: iconColors2,
+        navColors: navColors2,
+        sliderColors: sliderColors2,
+        toggleColors: toggleColors2,
+        chartColors: chartColors2,
+        alpha
+      }
+    }
+  }
+};
+
 // src/theme/presets/index.ts
 var presetRegistry = /* @__PURE__ */ new Map();
 presetRegistry.set(forestPreset.name, forestPreset);
+presetRegistry.set(alkemyPlusPreset.name, alkemyPlusPreset);
 function getPreset(name) {
   return presetRegistry.get(name);
 }
@@ -1804,6 +2175,7 @@ var forestThemeOptions = {
 };
 var forestTheme = styles.createTheme(forestThemeOptions);
 
+exports.alkemyPlusPreset = alkemyPlusPreset;
 exports.alpha = alpha;
 exports.avatarColors = avatarColors;
 exports.bg = bg;