@matteoaliano/forest-ui 0.5.2 → 0.7.0

package/dist/theme.d.mts

@@ -734,6 +734,31 @@ interface DesignTokens {
     toggleColors: Widen<typeof toggleColors>;
     chartColors: Widen<typeof chartColors>;
     alpha: Widen<typeof alpha>;
+    /**
+     * Optional highlight scale for preset-specific accent signals
+     * (e.g. "NEW", "Premium", featured alerts, notification dots).
+     * When present, components can reference it via theme augmentations.
+     */
+    highlight?: Widen<typeof magenta>;
+    /**
+     * Optional per-variant letter spacing overrides. Keys match MUI typography
+     * variants. When a variant is omitted, the built-in default is used.
+     */
+    letterSpacing?: Partial<{
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        subtitle1: string;
+        subtitle2: string;
+        body1: string;
+        body2: string;
+        caption: string;
+        overline: string;
+        button: string;
+    }>;
 }
 /** Configuration for a single variant within a preset. */
 interface PresetVariantConfig {

package/dist/theme.d.ts

@@ -734,6 +734,31 @@ interface DesignTokens {
     toggleColors: Widen<typeof toggleColors>;
     chartColors: Widen<typeof chartColors>;
     alpha: Widen<typeof alpha>;
+    /**
+     * Optional highlight scale for preset-specific accent signals
+     * (e.g. "NEW", "Premium", featured alerts, notification dots).
+     * When present, components can reference it via theme augmentations.
+     */
+    highlight?: Widen<typeof magenta>;
+    /**
+     * Optional per-variant letter spacing overrides. Keys match MUI typography
+     * variants. When a variant is omitted, the built-in default is used.
+     */
+    letterSpacing?: Partial<{
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        subtitle1: string;
+        subtitle2: string;
+        body1: string;
+        body2: string;
+        caption: string;
+        overline: string;
+        button: string;
+    }>;
 }
 /** Configuration for a single variant within a preset. */
 interface PresetVariantConfig {

package/dist/theme.js

@@ -696,7 +696,7 @@ var alpha = {
 // src/theme/palette.ts
 function buildPalette(tokens) {
   var _a;
-  const { base: base2, error: error2, warning: warning2, success: success2, info: info2, text: text6, bg: bg6, fg: fg6, border: border6 } = tokens;
+  const { base: base2, error: error2, warning: warning2, success: success2, info: info3, text: text6, bg: bg6, fg: fg6, border: border6 } = tokens;
   return {
     primary: {
       main: tokens.bg.brandSolid,
@@ -741,7 +741,8 @@ function buildPalette(tokens) {
     text: {
       primary: text6.primary,
       secondary: text6.secondary,
-      disabled: text6.disabled
+      disabled: text6.disabled,
+      placeholder: text6.placeholder
     },
     divider: border6.secondary,
     action: {
@@ -751,13 +752,23 @@ function buildPalette(tokens) {
       disabled: fg6.disabled,
       disabledBackground: bg6.disabled
     },
-    chart: (_a = tokens.chartColors) != null ? _a : chartColors
+    chart: (_a = tokens.chartColors) != null ? _a : chartColors,
+    ...tokens.highlight && {
+      highlight: {
+        main: tokens.highlight[600],
+        light: tokens.highlight[300],
+        dark: tokens.highlight[700],
+        contrastText: tokens.base.white
+      }
+    }
   };
 }
 
 // src/theme/typography.ts
 function buildTypography(tokens) {
-  const { fontFamily: fontFamily2, display: display2, fontSize: fontSize2, lineHeight: lineHeight2, fontWeight: fontWeight2 } = tokens;
+  var _a, _b, _c, _d;
+  const { fontFamily: fontFamily2, display: display2, fontSize: fontSize2, lineHeight: lineHeight2, fontWeight: fontWeight2, letterSpacing: letterSpacing2 } = tokens;
+  const ls = letterSpacing2 != null ? letterSpacing2 : {};
   return {
     fontFamily: fontFamily2,
     fontWeightRegular: fontWeight2.regular,
@@ -767,59 +778,67 @@ function buildTypography(tokens) {
     h1: {
       fontSize: display2.xl.fontSize,
       lineHeight: display2.xl.lineHeight,
-      letterSpacing: display2.xl.letterSpacing,
+      letterSpacing: (_a = ls.h1) != null ? _a : display2.xl.letterSpacing,
       fontWeight: fontWeight2.semibold
     },
     h2: {
       fontSize: display2.lg.fontSize,
       lineHeight: display2.lg.lineHeight,
-      letterSpacing: display2.lg.letterSpacing,
+      letterSpacing: (_b = ls.h2) != null ? _b : display2.lg.letterSpacing,
       fontWeight: fontWeight2.semibold
     },
     h3: {
       fontSize: display2.md.fontSize,
       lineHeight: display2.md.lineHeight,
-      letterSpacing: display2.md.letterSpacing,
+      letterSpacing: (_c = ls.h3) != null ? _c : display2.md.letterSpacing,
       fontWeight: fontWeight2.semibold
     },
     h4: {
       fontSize: display2.sm.fontSize,
       lineHeight: display2.sm.lineHeight,
+      ...ls.h4 !== void 0 && { letterSpacing: ls.h4 },
       fontWeight: fontWeight2.semibold
     },
     h5: {
       fontSize: display2.xs.fontSize,
       lineHeight: display2.xs.lineHeight,
+      ...ls.h5 !== void 0 && { letterSpacing: ls.h5 },
       fontWeight: fontWeight2.semibold
     },
     h6: {
       fontSize: fontSize2.xl,
       lineHeight: lineHeight2.xl,
+      ...ls.h6 !== void 0 && { letterSpacing: ls.h6 },
       fontWeight: fontWeight2.semibold
     },
     subtitle1: {
       fontSize: fontSize2.lg,
       lineHeight: lineHeight2.lg,
+      ...ls.subtitle1 !== void 0 && { letterSpacing: ls.subtitle1 },
       fontWeight: fontWeight2.medium
     },
     subtitle2: {
       fontSize: fontSize2.md,
       lineHeight: lineHeight2.md,
+      ...ls.subtitle2 !== void 0 && { letterSpacing: ls.subtitle2 },
       fontWeight: fontWeight2.medium
     },
     body1: {
       fontSize: fontSize2.md,
       lineHeight: lineHeight2.md,
+      ...ls.body1 !== void 0 && { letterSpacing: ls.body1 },
       fontWeight: fontWeight2.regular
     },
     body2: {
       fontSize: fontSize2.sm,
       lineHeight: lineHeight2.sm,
+      ...ls.body2 !== void 0 && { letterSpacing: ls.body2 },
       fontWeight: fontWeight2.regular
     },
     caption: {
       fontSize: fontSize2.xs,
       lineHeight: lineHeight2.xs,
+      ...ls.caption !== void 0 && { letterSpacing: ls.caption },
       fontWeight: fontWeight2.regular
     },
     overline: {
@@ -827,13 +846,14 @@ function buildTypography(tokens) {
       lineHeight: lineHeight2.xxs,
       fontWeight: fontWeight2.medium,
       textTransform: "uppercase",
-      letterSpacing: "0.08em"
+      letterSpacing: (_d = ls.overline) != null ? _d : "0.08em"
     },
     button: {
       fontSize: fontSize2.sm,
       lineHeight: lineHeight2.sm,
       fontWeight: fontWeight2.semibold,
-      textTransform: "none"
+      textTransform: "none",
+      ...ls.button !== void 0 && { letterSpacing: ls.button }
     }
   };
 }
@@ -902,7 +922,8 @@ function buildComponents(tokens) {
     error: error2,
     warning: warning2,
     success: success2,
-    info: info2,
+    info: info3,
+    highlight: highlight2,
     radius: radius6,
     focusRings: focusRings6,
     shadows: tokenShadows,
@@ -1166,6 +1187,13 @@ function buildComponents(tokens) {
           gap: 4,
           "&:hover": {
             backgroundColor: bg6.primaryHover
+          },
+          "&.Mui-selected": {
+            backgroundColor: info3[50],
+            color: info3[700],
+            "&:hover": {
+              backgroundColor: info3[100]
+            }
           }
         }
       }
@@ -1196,7 +1224,11 @@ function buildComponents(tokens) {
             backgroundColor: bg6.primaryHover
           },
           '&[aria-selected="true"]': {
-            backgroundColor: bg6.brandPrimary
+            backgroundColor: info3[50],
+            color: info3[700]
+          },
+          '&[aria-selected="true"].Mui-focused': {
+            backgroundColor: info3[100]
           }
         },
         listbox: {
@@ -1547,7 +1579,7 @@ function buildComponents(tokens) {
           minHeight: 48
         },
         indicator: {
-          backgroundColor: fg6.brandPrimary,
+          backgroundColor: info3[600],
           height: 2
         }
       }
@@ -1568,14 +1600,33 @@ function buildComponents(tokens) {
             backgroundColor: bg6.primaryHover
           },
           "&.Mui-selected": {
-            color: fg6.brandPrimary,
-            backgroundColor: bg6.brandPrimary
+            color: info3[700],
+            backgroundColor: info3[50]
           }
         }
       }
     },
     // ─── Chip ───────────────────────────────────────────────────────
     MuiChip: {
+      variants: [
+        ...highlight2 ? [
+          {
+            props: { color: "highlight" },
+            style: {
+              "&.MuiChip-filled": {
+                backgroundColor: highlight2[600],
+                color: base2.white,
+                "& .MuiChip-deleteIcon": { color: highlight2[200] }
+              },
+              "&.MuiChip-outlined": {
+                borderColor: highlight2[300],
+                color: highlight2[700],
+                "& .MuiChip-deleteIcon": { color: highlight2[400] }
+              }
+            }
+          }
+        ] : []
+      ],
       styleOverrides: {
         root: {
           borderRadius: radius6.md
@@ -1608,9 +1659,11 @@ function buildComponents(tokens) {
         },
         colorSecondary: {
           "&.MuiChip-filled": {
-            backgroundColor: tokens.bg.secondarySubtle,
-            color: tokens.text.secondary,
-            "& .MuiChip-deleteIcon": { color: tokens.fg.secondary }
+            backgroundColor: highlight2 ? highlight2[50] : tokens.bg.secondarySubtle,
+            color: highlight2 ? highlight2[700] : tokens.text.secondary,
+            "& .MuiChip-deleteIcon": {
+              color: highlight2 ? highlight2[500] : tokens.fg.secondary
+            }
           }
         },
         colorError: {
@@ -1636,9 +1689,9 @@ function buildComponents(tokens) {
         },
         colorInfo: {
           "&.MuiChip-filled": {
-            backgroundColor: info2[50],
-            color: info2[700],
-            "& .MuiChip-deleteIcon": { color: info2[400] }
+            backgroundColor: info3[50],
+            color: info3[700],
+            "& .MuiChip-deleteIcon": { color: info3[400] }
           }
         }
       }
@@ -1709,9 +1762,9 @@ function buildComponents(tokens) {
             backgroundColor: bg6.primaryHover
           },
           "&.Mui-selected": {
-            backgroundColor: bg6.brandPrimary,
+            backgroundColor: info3[50],
             "&:hover": {
-              backgroundColor: bg6.brandPrimary
+              backgroundColor: info3[100]
             }
           }
         }
@@ -1752,7 +1805,12 @@ function buildComponents(tokens) {
         dot: {
           minWidth: 8,
           height: 8,
-          borderRadius: radius6.full
+          borderRadius: radius6.full,
+          ...highlight2 && {
+            "&.MuiBadge-colorDefault, &.MuiBadge-colorPrimary": {
+              backgroundColor: highlight2[500]
+            }
+          }
         }
       }
     },
@@ -1781,10 +1839,10 @@ function buildComponents(tokens) {
             backgroundColor: bg6.primaryHover
           },
           "&.Mui-selected": {
-            backgroundColor: bg6.brandPrimary,
-            color: buttonColors6.secondaryColor.fg,
+            backgroundColor: info3[50],
+            color: info3[700],
             "&:hover": {
-              backgroundColor: bg6.brandSecondary
+              backgroundColor: info3[100]
             }
           }
         }
@@ -1836,6 +1894,31 @@ function buildComponents(tokens) {
       defaultProps: {
         variant: "standard"
       },
+      variants: [
+        ...highlight2 ? [
+          {
+            props: { variant: "featured" },
+            style: {
+              borderRadius: radius6.xl,
+              fontSize: 14,
+              lineHeight: "20px",
+              padding: "12px 16px",
+              alignItems: "center",
+              backgroundColor: highlight2[50],
+              color: highlight2[700],
+              border: `1px solid ${highlight2[200]}`,
+              "& .MuiAlert-icon": {
+                color: highlight2[600],
+                padding: 0,
+                marginRight: 12
+              },
+              "& .MuiAlertTitle-root": {
+                color: highlight2[800]
+              }
+            }
+          }
+        ] : []
+      ],
       styleOverrides: {
         root: {
           borderRadius: radius6.xl,
@@ -1869,11 +1952,11 @@ function buildComponents(tokens) {
           }
         },
         standardInfo: {
-          backgroundColor: info2[50],
-          color: info2[700],
-          border: `1px solid ${info2[300]}`,
+          backgroundColor: info3[50],
+          color: info3[700],
+          border: `1px solid ${info3[300]}`,
           "& .MuiAlert-icon": {
-            color: info2[600]
+            color: info3[600]
           }
         },
         icon: {
@@ -2322,10 +2405,12 @@ function buildComponents(tokens) {
     MuiLink: {
       styleOverrides: {
         root: {
-          color: fg6.brandPrimary,
+          color: info3[600],
           fontWeight: 500,
+          textDecorationColor: info3[600],
           "&:hover": {
-            color: buttonColors6.primary.bgHover
+            color: info3[700],
+            textDecorationColor: info3[700]
           }
         }
       }
@@ -2618,23 +2703,23 @@ function buildComponents(tokens) {
               backgroundColor: bg6.primaryHover
             },
             "&.Mui-selected": {
-              backgroundColor: fg6.brandPrimary,
+              backgroundColor: info3[600],
               color: base2.white,
               fontWeight: 600,
               "&:hover": {
-                backgroundColor: buttonColors6.primary.bgHover
+                backgroundColor: info3[700]
               },
               "&:focus": {
-                backgroundColor: fg6.brandPrimary
+                backgroundColor: info3[600]
               }
             },
             "&.MuiPickersDay-today": {
-              border: `1px solid ${border6.brandSolid}`,
-              color: fg6.brandPrimary,
+              border: `1px solid ${info3[600]}`,
+              color: info3[700],
               backgroundColor: "transparent",
               fontWeight: 600,
               "&.Mui-selected": {
-                backgroundColor: fg6.brandPrimary,
+                backgroundColor: info3[600],
                 color: base2.white,
                 border: "none"
               }
@@ -3576,12 +3661,14 @@ var forestInternalPreset = {
 };
 
 // src/theme/presets/forest-alkemy-plus.ts
+var info2 = violet;
+var highlight = magenta;
 var colors2 = {
   base,
   error,
   warning,
   success,
-  info,
+  info: info2,
   brand: {
     25: gray[25],
     50: gray[50],
@@ -3637,8 +3724,8 @@ var text5 = {
   successPrimary: success[600]
 };
 var bg5 = {
-  primary: gray[50],
-  primaryAlt: gray[50],
+  primary: gray[25],
+  primaryAlt: gray[25],
   primaryHover: gray[100],
   primarySolid: gray[950],
   secondary: base.white,
@@ -3646,8 +3733,8 @@ var bg5 = {
   secondarySubtle: gray[25],
   secondaryHover: gray[50],
   secondarySolid: gray[600],
-  tertiary: gray[100],
-  quaternary: gray[200],
+  tertiary: gray[50],
+  quaternary: gray[100],
   active: gray[200],
   disabled: gray[100],
   disabledSubtle: gray[50],
@@ -3819,20 +3906,38 @@ var chartColors5 = {
   crosshairFg: gray[500],
   legendFg: text5.tertiary,
   series: [
-    { fg: misc.purple[500], fgHover: misc.purple[600], bg: misc.purple[100], bgHover: misc.purple[200] },
-    { fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
+    // Brand accents lead — violet + magenta anchor the palette
+    { fg: violet[500], fgHover: violet[600], bg: violet[100], bgHover: violet[200] },
+    { fg: magenta[500], fgHover: magenta[600], bg: magenta[100], bgHover: magenta[200] },
+    // Complementary rotation — cool → warm → earth
     { fg: misc.teal[300], fgHover: misc.teal[400], bg: misc.teal[50], bgHover: misc.teal[100] },
     { fg: warning[400], fgHover: warning[500], bg: warning[100], bgHover: warning[200] },
-    { fg: misc.rose[400], fgHover: misc.rose[500], bg: misc.rose[100], bgHover: misc.rose[200] },
     { fg: misc.blueLight[400], fgHover: misc.blueLight[500], bg: misc.blueLight[100], bgHover: misc.blueLight[200] },
-    { fg: misc.orange[300], fgHover: misc.orange[400], bg: misc.orange[100], bgHover: misc.orange[200] },
-    { fg: misc.cyan[600], fgHover: misc.cyan[700], bg: misc.cyan[100], bgHover: misc.cyan[200] },
+    { fg: misc.rose[400], fgHover: misc.rose[500], bg: misc.rose[100], bgHover: misc.rose[200] },
     { fg: misc.green[500], fgHover: misc.green[600], bg: misc.green[100], bgHover: misc.green[200] },
-    { fg: misc.pink[400], fgHover: misc.pink[500], bg: misc.pink[100], bgHover: misc.pink[200] },
-    { fg: misc.fuchsia[400], fgHover: misc.fuchsia[500], bg: misc.fuchsia[100], bgHover: misc.fuchsia[200] },
-    { fg: misc.teal[600], fgHover: misc.teal[700], bg: misc.teal[100], bgHover: misc.teal[200] }
+    { fg: misc.orangeDark[400], fgHover: misc.orangeDark[500], bg: misc.orangeDark[100], bgHover: misc.orangeDark[200] },
+    { fg: misc.cyan[600], fgHover: misc.cyan[700], bg: misc.cyan[100], bgHover: misc.cyan[200] },
+    { fg: misc.orange[300], fgHover: misc.orange[400], bg: misc.orange[100], bgHover: misc.orange[200] },
+    { fg: misc.teal[600], fgHover: misc.teal[700], bg: misc.teal[100], bgHover: misc.teal[200] },
+    // Pink/fuchsia kept as tail fallbacks only — too close to magenta to sit near position 1
+    { fg: misc.pink[400], fgHover: misc.pink[500], bg: misc.pink[100], bgHover: misc.pink[200] }
   ]
 };
+var letterSpacing = {
+  h1: "-0.02em",
+  h2: "-0.02em",
+  h3: "-0.02em",
+  h4: "-0.02em",
+  h5: "-0.02em",
+  h6: "-0.02em",
+  subtitle1: "0.02em",
+  subtitle2: "0.02em",
+  body1: "0.02em",
+  body2: "0.02em",
+  caption: "0.02em",
+  overline: "0.02em",
+  button: "0.02em"
+};
 var focusRings5 = {
   brand: "0px 0px 0px 4px #4040403d",
   brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #4040403d",
@@ -3853,7 +3958,7 @@ var forestAlkemyPlusPreset = {
         error,
         warning,
         success,
-        info,
+        info: info2,
         spacing,
         radius: radius5,
         shadows,
@@ -3878,7 +3983,9 @@ var forestAlkemyPlusPreset = {
         sliderColors: sliderColors5,
         toggleColors: toggleColors5,
         chartColors: chartColors5,
-        alpha
+        alpha,
+        letterSpacing,
+        highlight
       }
     }
   }