@matteoaliano/forest-ui 0.8.7 → 0.8.9

package/dist/index.js

@@ -1173,6 +1173,28 @@ function buildComponents(tokens) {
     avatarColors: avatarColors6,
     breadcrumbColors: breadcrumbColors6
   } = tokens;
+  const containedFill = {
+    backgroundColor: buttonColors6.primary.bg,
+    color: buttonColors6.primary.fg,
+    "&:hover": {
+      backgroundColor: buttonColors6.primary.bgHover
+    }
+  };
+  const outlinedFill = {
+    borderColor: buttonColors6.secondaryColor.border,
+    color: buttonColors6.secondaryColor.fg,
+    "&:hover": {
+      // Darken the whole outlined button on hover via brightness (< 1) — single
+      // mechanism, no separate border-color change. 0.97 is a barely-there darken.
+      filter: "brightness(0.97)"
+    }
+  };
+  const textFill = {
+    color: buttonColors6.tertiaryColor.fg,
+    "&:hover": {
+      backgroundColor: buttonColors6.tertiaryColor.bgHover
+    }
+  };
   return {
     // ─── CssBaseline (global) ───────────────────────────────────────
     MuiCssBaseline: {
@@ -1188,50 +1210,115 @@ function buildComponents(tokens) {
         disableElevation: true
       },
       styleOverrides: {
-        root: {
-          borderRadius: radius6.md,
-          fontWeight: 600,
-          boxShadow: tokenShadows.xs,
-          height: 32,
-          padding: "6px 12px",
-          fontSize: 14,
-          lineHeight: "20px",
-          "&:focus-visible": {
-            boxShadow: focusRings6.brandShadowXs
-          }
-        },
-        containedPrimary: {
-          backgroundColor: buttonColors6.primary.bg,
-          "&:hover": {
-            backgroundColor: buttonColors6.primary.bgHover
-          }
-        },
-        outlinedPrimary: {
-          borderColor: buttonColors6.secondaryColor.border,
-          color: buttonColors6.secondaryColor.fg,
-          "&:hover": {
-            backgroundColor: buttonColors6.secondaryColor.bgHover,
-            borderColor: buttonColors6.secondaryColor.borderHover
-          }
-        },
-        containedSecondary: {
-          backgroundColor: buttonColors6.secondary.bg,
-          color: buttonColors6.secondary.fg,
-          border: `1px solid ${buttonColors6.secondary.border}`,
-          "&:hover": {
-            backgroundColor: buttonColors6.secondary.bgHover,
-            borderColor: buttonColors6.secondary.borderHover
-          }
+        // The interactive behaviour (faux-3D bevel that flips on hover, a
+        // light sweep via ::before, brightness lift on filled, active press)
+        // mirrors the forest-web Button. Colors are untouched — the bevel and
+        // sweep use translucent `currentColor` so they adapt per variant.
+        // Applied to `contained` + `outlined`; `text` keeps its flat styling.
+        root: ({ ownerState }) => {
+          const interactive = ownerState.variant !== "text";
+          const isContained = ownerState.variant === "contained";
+          const isOutlined = ownerState.variant === "outlined";
+          const sweepColor = isOutlined ? "color-mix(in srgb, currentColor 45%, #fff)" : "currentColor";
+          const colorScales = { error: error2, warning: warning2, success: success2, info: info3 };
+          const faceScale = ownerState.color ? colorScales[ownerState.color] : void 0;
+          return {
+            borderRadius: radius6.md,
+            fontWeight: 600,
+            boxShadow: tokenShadows.xs,
+            height: 32,
+            padding: "6px 12px",
+            fontSize: 14,
+            lineHeight: "20px",
+            "&:focus-visible": {
+              boxShadow: focusRings6.brandShadowXs
+            },
+            ...interactive && {
+              position: "relative",
+              overflow: "hidden",
+              transition: "filter 300ms ease, border-width 300ms ease, border-radius 300ms ease, opacity 300ms ease, background-color 300ms ease",
+              borderStyle: "solid",
+              borderTopWidth: 1,
+              borderRightWidth: 1,
+              borderLeftWidth: 1,
+              borderBottomWidth: 4,
+              // Round the thick-bevel side more than the rest so the inner
+              // surface isn't squared off. Follows the bevel: bottom at rest,
+              // top on hover.
+              borderBottomLeftRadius: radius6.lg,
+              borderBottomRightRadius: radius6.lg,
+              // Contained buttons have no border of their own — give them a
+              // translucent bevel. Outlined keeps its own border color.
+              ...isContained && {
+                // Greyscale bevel — visible on both the charcoal face and a
+                // light page (white washed out on hover). Semantic colors keep
+                // their in-hue bevel.
+                borderColor: faceScale ? faceScale[700] : gray[600]
+              },
+              "&::before": {
+                content: '""',
+                position: "absolute",
+                left: 0,
+                top: "-150%",
+                width: "100%",
+                height: 5,
+                borderRadius: 4,
+                backgroundColor: sweepColor,
+                boxShadow: `0 0 24px 4px ${sweepColor}`,
+                opacity: isOutlined ? 0.2 : 0.3,
+                filter: isOutlined ? "blur(3px)" : "blur(2px)",
+                pointerEvents: "none",
+                transition: "top 500ms ease-in-out"
+              },
+              "&:hover": {
+                borderTopWidth: 4,
+                borderBottomWidth: 1,
+                borderTopLeftRadius: radius6.lg,
+                borderTopRightRadius: radius6.lg,
+                borderBottomLeftRadius: radius6.md,
+                borderBottomRightRadius: radius6.md,
+                // One step lighter than the default bevel (60% → 70%) so it
+                // stays visible against the brightened face on hover.
+                ...isContained && {
+                  filter: "brightness(1.5)",
+                  // Charcoal (non-semantic) keeps its default gray[600] border —
+                  // the brightness lift lightens it on hover. Semantic colors
+                  // darken to [900] so their bevel survives the brightness.
+                  ...faceScale && { borderColor: faceScale[900] }
+                }
+              },
+              "&:hover::before": {
+                top: "150%"
+              },
+              // Press: collapse the raised top bevel back to a thin edge so the
+              // surface visibly sinks — the button reads as pushed deeper into
+              // the page. Animated by the shared border-width transition above.
+              "&:active": {
+                // Snap the press faster than the 300ms hover flip so it feels
+                // like a tactile click rather than a slow settle.
+                transition: "border-width 120ms ease, border-radius 120ms ease, opacity 120ms ease",
+                borderTopWidth: 1,
+                borderTopLeftRadius: radius6.md,
+                borderTopRightRadius: radius6.md,
+                opacity: 0.75
+              },
+              "@media (prefers-reduced-motion: reduce)": {
+                transition: "none",
+                "&::before": { display: "none" }
+              }
+            }
+          };
         },
+        // Primary and Secondary are intentionally identical (greyscale system).
+        containedPrimary: containedFill,
+        containedSecondary: containedFill,
+        outlinedPrimary: outlinedFill,
+        outlinedSecondary: outlinedFill,
         text: {
           boxShadow: "none"
         },
-        textPrimary: {
-          color: buttonColors6.tertiaryColor.fg,
-          "&:hover": {
-            backgroundColor: buttonColors6.tertiaryColor.bgHover
-          }
-        }
+        textPrimary: textFill,
+        textSecondary: textFill
       }
     },
     // ─── Button Group ───────────────────────────────────────────────
@@ -1436,6 +1523,12 @@ function buildComponents(tokens) {
           "&.Mui-selected": {
             backgroundColor: info3[50],
             color: info3[700],
+            // ListItemText primary hardcodes its own color (text.secondary),
+            // which beats the inherited MenuItem color — re-point it here so
+            // selected labels actually take the info color (e.g. MultiSelect).
+            "& .MuiListItemText-primary": {
+              color: info3[700]
+            },
             "&:hover": {
               backgroundColor: info3[100]
             }