@matteoaliano/forest-ui 1.2.3 → 1.2.5

package/dist/theme.d.mts

@@ -387,6 +387,7 @@ declare const container: {
     readonly maxWidthDesktop: 1280;
     readonly paddingDesktop: 32;
     readonly paddingMobile: 16;
+    readonly shellRadius: 24;
 };
 declare const widths: {
     readonly xxs: 320;

package/dist/theme.d.ts

@@ -387,6 +387,7 @@ declare const container: {
     readonly maxWidthDesktop: 1280;
     readonly paddingDesktop: 32;
     readonly paddingMobile: 16;
+    readonly shellRadius: 24;
 };
 declare const widths: {
     readonly xxs: 320;

package/dist/theme.js

@@ -350,19 +350,13 @@ function buildComponents(tokens2) {
     }
   };
   const bevelHover = {
-    borderTopWidth: 4,
-    borderBottomWidth: 1,
-    borderTopLeftRadius: radius4.lg,
-    borderTopRightRadius: radius4.lg,
-    borderBottomLeftRadius: radius4.md,
-    borderBottomRightRadius: radius4.md
+    borderTopWidth: 3,
+    borderBottomWidth: 1
   };
   const bevelPress = {
     // Snap the press faster than the 300ms hover flip so it feels tactile.
     transition: "border-width 120ms ease, border-radius 120ms ease, opacity 120ms ease",
     borderTopWidth: 1,
-    borderTopLeftRadius: radius4.md,
-    borderTopRightRadius: radius4.md,
     opacity: 0.75
   };
   const bevel3D = {
@@ -373,9 +367,7 @@ function buildComponents(tokens2) {
     borderTopWidth: 1,
     borderRightWidth: 1,
     borderLeftWidth: 1,
-    borderBottomWidth: 4,
-    borderBottomLeftRadius: radius4.lg,
-    borderBottomRightRadius: radius4.lg,
+    borderBottomWidth: 3,
     "&::before": {
       content: '""',
       position: "absolute",
@@ -412,6 +404,21 @@ function buildComponents(tokens2) {
         }
       }
     },
+    // ─── ButtonBase (global) ────────────────────────────────────────
+    // Kills MUI's TouchRipple everywhere in one place. Every clickable in the
+    // library renders through ButtonBase, so this reaches Button, IconButton,
+    // Fab, ToggleButton, CardActionArea, ListItemButton, MenuItem, Tab, Chip,
+    // PaginationItem, StepButton, BottomNavigationAction, SpeedDialAction and
+    // the Pickers' day/month/year cells without a per-component opt-out.
+    //
+    // The press feedback is the faux-3D bevel instead: the raised bottom edge
+    // collapses and the face dims on :active (see `bevelPress`). An expanding
+    // circle on top of that reads as a second, competing press affordance.
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true
+      }
+    },
     // ─── Button ─────────────────────────────────────────────────────
     MuiButton: {
       defaultProps: {
@@ -431,7 +438,7 @@ function buildComponents(tokens2) {
           const colorScales = { error: error2, warning: warning2, success: success2, info: info2 };
           const faceScale = ownerState.color ? colorScales[ownerState.color] : void 0;
           return {
-            borderRadius: radius4.md,
+            borderRadius: radius4.lg,
             fontWeight: 600,
             boxShadow: tokenShadows.xs,
             height: 32,
@@ -449,12 +456,7 @@ function buildComponents(tokens2) {
               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: radius4.lg,
-              borderBottomRightRadius: radius4.lg,
+              borderBottomWidth: 3,
               // Contained buttons have no border of their own — give them a
               // translucent bevel. Outlined keeps its own border color.
               ...isContained && {
@@ -479,12 +481,8 @@ function buildComponents(tokens2) {
                 transition: "top 500ms ease-in-out"
               },
               "&:hover": {
-                borderTopWidth: 4,
+                borderTopWidth: 3,
                 borderBottomWidth: 1,
-                borderTopLeftRadius: radius4.lg,
-                borderTopRightRadius: radius4.lg,
-                borderBottomLeftRadius: radius4.md,
-                borderBottomRightRadius: radius4.md,
                 // One step lighter than the default bevel (60% → 70%) so it
                 // stays visible against the brightened face on hover.
                 ...isContained && {
@@ -511,8 +509,6 @@ function buildComponents(tokens2) {
                 // like a tactile click rather than a slow settle.
                 transition: "border-width 120ms ease, border-radius 120ms ease, opacity 120ms ease",
                 borderTopWidth: 1,
-                borderTopLeftRadius: radius4.md,
-                borderTopRightRadius: radius4.md,
                 opacity: 0.75
               },
               // Unified disabled treatment across the button family (Button,
@@ -527,7 +523,7 @@ function buildComponents(tokens2) {
                 borderTopWidth: 1,
                 borderRightWidth: 1,
                 borderLeftWidth: 1,
-                borderBottomWidth: 4
+                borderBottomWidth: 3
               },
               "@media (prefers-reduced-motion: reduce)": {
                 transition: "none",
@@ -562,7 +558,7 @@ function buildComponents(tokens2) {
       },
       styleOverrides: {
         root: {
-          borderRadius: radius4.md,
+          borderRadius: radius4.lg,
           // contained group → children already render as contained Buttons; only
           // re-pin the bevel border color, which MUI's own grouped-contained
           // default (palette grey) otherwise overrides away from the standalone
@@ -602,7 +598,7 @@ function buildComponents(tokens2) {
             backgroundColor: "transparent",
             color: buttonColors4.tertiaryColor.fg,
             borderWidth: 0,
-            borderRadius: radius4.md,
+            borderRadius: radius4.lg,
             boxShadow: "none",
             "&::before": { display: "none" },
             "&:active": { opacity: 1 },
@@ -634,17 +630,17 @@ function buildComponents(tokens2) {
     MuiIconButton: {
       styleOverrides: {
         root: ({ theme }) => ({
-          borderRadius: radius4.md,
+          borderRadius: radius4.lg,
           padding: 6,
           "& .MuiSvgIcon-root": {
             fontSize: 20
           },
           "&.ForestIconButton": {
             ...bevel3D,
-            // Square 32×32 with border-box so the faux-3D bevel (1px top + 4px
+            // Square 32×32 with border-box so the faux-3D bevel (1px top + 3px
             // bottom, 1px left/right) is absorbed rather than added on top —
-            // otherwise it rendered a 37×34 control instead of matching the
-            // standalone Button's 32px height.
+            // otherwise it rendered an oversized control instead of matching
+            // the standalone Button's 32px height.
             height: 32,
             width: 32,
             boxSizing: "border-box",
@@ -701,8 +697,7 @@ function buildComponents(tokens2) {
     // ─── FAB ────────────────────────────────────────────────────────
     // A Fab is a round contained Button: same faux-3D bevel, light sweep,
     // brightness lift, and press. The border radii are left untouched so the
-    // circular / extended silhouettes survive the bevel flip (no radius swap
-    // like Button/IconButton do on their rounded corners).
+    // circular / extended silhouettes survive the bevel flip.
     MuiFab: {
       styleOverrides: {
         root: ({ theme, ownerState }) => ({
@@ -718,7 +713,7 @@ function buildComponents(tokens2) {
           borderTopWidth: 1,
           borderRightWidth: 1,
           borderLeftWidth: 1,
-          borderBottomWidth: 4,
+          borderBottomWidth: 3,
           "&::before": {
             content: '""',
             position: "absolute",
@@ -736,7 +731,7 @@ function buildComponents(tokens2) {
           },
           "&:hover": {
             boxShadow: tokenShadows.xs,
-            borderTopWidth: 4,
+            borderTopWidth: 3,
             borderBottomWidth: 1,
             // Light mode: dark face, brightness lift reads as hover. Dark
             // mode: the face is already light — a lift blows out the top
@@ -951,7 +946,10 @@ function buildComponents(tokens2) {
     MuiAutocomplete: {
       styleOverrides: {
         paper: {
-          borderRadius: radius4.md,
+          // No borderRadius here on purpose — it inherits MuiPaper's `rounded`
+          // (radius.lg), so the popup matches Menu, Popover and every other
+          // Paper surface. It used to set radius.md and was the one popup in
+          // the system with a sharper corner.
           boxShadow: tokenShadows.lg,
           border: `1px solid ${border4.secondary}`,
           marginTop: 4
@@ -965,10 +963,42 @@ function buildComponents(tokens2) {
             lineHeight: "20px"
           }
         },
+        // MUI hardcodes this slot's own padding/marginRight in its source
+        // (padding: 2, marginRight: -2), which wins over the global
+        // MuiIconButton root override at equal specificity — left alone, the
+        // popup toggle renders as a small 24px button that doesn't fill the
+        // 32px input row and stops short of the edge. Restated here at the
+        // same size/inset as the DatePicker's open-picker button (32px,
+        // padding 6, flush against the input's 12px right padding) so both
+        // end-of-input icon buttons match.
+        popupIndicator: {
+          padding: 6,
+          // Not a straight copy of the DatePicker's -12px: that value cancels
+          // the input row's 12px padding directly, but this button's
+          // grandparent (`.MuiAutocomplete-endAdornment`) is itself inset 9px
+          // from the input's true right edge by MUI's own variant styles.
+          // -9px reaches through that inset to land flush, matching the
+          // DatePicker's open-picker button exactly.
+          marginRight: -9
+        },
+        // Same MUI-hardcoded-slot problem as popupIndicator, one size down
+        // (padding: 4, marginRight: -2) — sized to match it here. The
+        // popupIndicator's own marginRight anchors it to the input edge
+        // independent of clearIndicator's box, so this needs no matching
+        // offset: with both buttons the same size, 0 sits them edge-to-edge,
+        // and their equal padding already reads as the gap between the icons.
+        clearIndicator: {
+          padding: 6,
+          marginRight: 0
+        },
         option: {
           fontSize: 14,
           lineHeight: "20px",
-          padding: "6px 12px",
+          // An Autocomplete option is a plain <li class="MuiAutocomplete-option">,
+          // not a MenuItem, so MuiMenuItem's radius never reaches it. Match it
+          // here so the hover/selected highlight reads as the same pill a Select
+          // draws, inset by the listbox's 4px padding.
+          borderRadius: radius4.md,
           // Hover + selected backgrounds come from MUI's theme-aware action
           // overlays (a light overlay on dark, so they stay visible — a solid
           // dark-grey tier here reads as "no hover"). Selected keeps the text
@@ -978,7 +1008,14 @@ function buildComponents(tokens2) {
           }
         },
         listbox: {
-          padding: 4
+          padding: 4,
+          // Padding has to live here, not in the `option` slot: MUI nests its
+          // own option styles under the listbox, so a rule from `option` ties
+          // on specificity and loses on source order. This selector outranks
+          // it. 6px 8px matches MuiMenuItem.
+          "& .MuiAutocomplete-option": {
+            padding: "6px 8px"
+          }
         }
       }
     },
@@ -990,7 +1027,7 @@ function buildComponents(tokens2) {
       styleOverrides: {
         root: {
           color: border4.primary,
-          borderRadius: radius4.xs,
+          borderRadius: radius4.sm,
           padding: 0,
           width: 20,
           height: 20,
@@ -1007,7 +1044,7 @@ function buildComponents(tokens2) {
           "&.Mui-focusVisible": {
             outline: "none",
             boxShadow: focusRings4.brand,
-            borderRadius: radius4.xs
+            borderRadius: radius4.sm
           },
           "&.Mui-disabled": {
             color: border4.primary
@@ -1143,12 +1180,18 @@ function buildComponents(tokens2) {
             color: buttonColors4.primary.fg,
             borderTopWidth: 1,
             borderBottomWidth: 1,
-            borderTopLeftRadius: radius4.md,
-            borderTopRightRadius: radius4.md,
-            borderBottomLeftRadius: radius4.md,
-            borderBottomRightRadius: radius4.md,
+            borderTopLeftRadius: radius4.lg,
+            borderTopRightRadius: radius4.lg,
+            borderBottomLeftRadius: radius4.lg,
+            borderBottomRightRadius: radius4.lg,
             opacity: 0.75,
-            boxShadow: "inset 0 2px 4px 0 rgba(0,0,0,0.3)",
+            // The pressed-in cue is carried by the flattened bevel (bottom
+            // border 3px -> 1px) alone in light mode. On the dark-mode face
+            // that geometry reads too faintly, so it keeps the inner shadow.
+            boxShadow: "none",
+            ...theme.applyStyles("dark", {
+              boxShadow: "inset 0 2px 4px 0 rgba(0,0,0,0.3)"
+            }),
             "&::before": { display: "none" },
             // Stays pressed on hover — no bevel re-raise, no brightness lift.
             "&:hover": {
@@ -1156,8 +1199,8 @@ function buildComponents(tokens2) {
               filter: "none",
               borderTopWidth: 1,
               borderBottomWidth: 1,
-              borderTopLeftRadius: radius4.md,
-              borderTopRightRadius: radius4.md
+              borderTopLeftRadius: radius4.lg,
+              borderTopRightRadius: radius4.lg
             }
           },
           // variant="outlined" (Forest wrapper class): the outlined <Button> /
@@ -1201,7 +1244,7 @@ function buildComponents(tokens2) {
             borderTopWidth: 1,
             borderRightWidth: 1,
             borderLeftWidth: 1,
-            borderBottomWidth: 4,
+            borderBottomWidth: 3,
             "&::before": { display: "none" },
             // selected+disabled keeps the pressed-in cue, greyed.
             "&.Mui-selected": {
@@ -1218,7 +1261,7 @@ function buildComponents(tokens2) {
     MuiToggleButtonGroup: {
       styleOverrides: {
         root: {
-          borderRadius: radius4.md,
+          borderRadius: radius4.lg,
           overflow: "hidden"
         },
         // The child ToggleButton's selected/hover/active rules set per-corner
@@ -1235,14 +1278,14 @@ function buildComponents(tokens2) {
           },
           "&:first-of-type": {
             "&, &:hover, &:active, &.Mui-selected": {
-              borderTopLeftRadius: radius4.md,
-              borderBottomLeftRadius: radius4.md
+              borderTopLeftRadius: radius4.lg,
+              borderBottomLeftRadius: radius4.lg
             }
           },
           "&:last-of-type": {
             "&, &:hover, &:active, &.Mui-selected": {
-              borderTopRightRadius: radius4.md,
-              borderBottomRightRadius: radius4.md
+              borderTopRightRadius: radius4.lg,
+              borderBottomRightRadius: radius4.lg
             }
           }
         }
@@ -1268,7 +1311,27 @@ function buildComponents(tokens2) {
           border: `1px solid ${border4.secondary}`,
           backgroundColor: bg4.primary,
           boxShadow: tokenShadows.xs,
-          overflow: "hidden"
+          overflow: "hidden",
+          // Which surface a wrapped CardActionArea should paint. The action
+          // area can't read the Card's own `background-color` (the Card goes
+          // transparent when it wraps one, see below), so the colour is handed
+          // down as a custom property instead. `<Card color="secondary">`
+          // overrides it alongside its own background.
+          "--forest-card-surface": bg4.primary,
+          // A Card wrapping a CardActionArea hands its whole frame over: the
+          // action area already draws the border, surface, radius and shadow,
+          // and flips the radius on hover. Keeping the Card's own stacks a
+          // second, static border just outside the moving one.
+          "&:has(> .MuiCardActionArea-root)": {
+            border: "none",
+            borderRadius: 0,
+            backgroundColor: "transparent",
+            boxShadow: "none",
+            // The action area clips its own content (it has overflow: hidden
+            // for the glaze), so the Card must not also clip — its square
+            // corners would cut the action area's rounded ones.
+            overflow: "visible"
+          }
         }
       }
     },
@@ -2366,52 +2429,67 @@ function buildComponents(tokens2) {
       }
     },
     // ─── CardActionArea ─────────────────────────────────────────────
-    // Clickable-card affordance: mirrors the Button's faux-3D bevel (thick edge
-    // that flips bottom->top on hover), light glaze sweep, border-color shift,
-    // and press-to-sink. This is what visually marks a card as clickable — use
-    // <Card><CardActionArea>…</CardActionArea></Card> for any interactive card.
+    // Clickable-card affordance: the outlined Button's interaction at card
+    // scale. Same faux-3D bevel (thick edge that flips bottom->top on hover),
+    // same glaze sweep, same brightness darken on hover, same press-to-sink —
+    // the only difference is the radius, which stays on the card steps
+    // (xl / 2xl) rather than the button's (md / lg). Use
+    // <Card><CardActionArea>…</CardActionArea></Card> for any interactive card;
+    // the Card hands over its border and surface when it sees one.
     MuiCardActionArea: {
       styleOverrides: {
         root: {
           position: "relative",
           overflow: "hidden",
-          borderRadius: radius4.xl,
+          borderRadius: radius4["2xl"],
           borderStyle: "solid",
-          borderColor: border4.primary,
+          // The token the outlined Button reads, not `border.primary`, so the
+          // two stay identical under any preset.
+          borderColor: buttonColors4.secondaryColor.border,
+          // Painted here rather than on the Card, which goes transparent so its
+          // square box can't clip these corners. Falls back to the default card
+          // surface when a CardActionArea is used outside a Card.
+          backgroundColor: `var(--forest-card-surface, ${bg4.primary})`,
           borderTopWidth: 1,
           borderRightWidth: 1,
           borderLeftWidth: 1,
-          borderBottomWidth: 4,
-          borderBottomLeftRadius: radius4["2xl"],
-          borderBottomRightRadius: radius4["2xl"],
+          borderBottomWidth: 3,
           boxShadow: tokenShadows.xs,
-          transition: "box-shadow 300ms ease, border-width 300ms ease, border-radius 300ms ease, border-color 300ms ease, opacity 300ms ease",
-          // Moving glaze — a soft light streak that sweeps top->bottom on hover.
+          transition: "filter 300ms ease, border-width 300ms ease, border-radius 300ms ease, opacity 300ms ease, background-color 300ms ease",
+          "&:focus-visible": {
+            boxShadow: focusRings4.brandShadowXs
+          },
+          // Moving glaze — a soft light streak that sweeps top->bottom on
+          // hover. Same parameters as the outlined Button's sweep.
           "&::before": {
             content: '""',
             position: "absolute",
             left: 0,
             top: "-150%",
             width: "100%",
-            height: 6,
+            height: 5,
             borderRadius: 4,
-            backgroundColor: "color-mix(in srgb, currentColor 40%, #fff)",
-            boxShadow: "0 0 28px 6px color-mix(in srgb, currentColor 40%, #fff)",
-            opacity: 0.35,
+            backgroundColor: "color-mix(in srgb, currentColor 45%, #fff)",
+            boxShadow: "0 0 24px 4px color-mix(in srgb, currentColor 45%, #fff)",
+            opacity: 0.2,
             filter: "blur(3px)",
             pointerEvents: "none",
-            transition: "top 600ms ease-in-out",
+            transition: "top 500ms ease-in-out",
             zIndex: 1
           },
           "&:hover": {
-            borderColor: border4.brand,
-            borderTopWidth: 4,
-            borderBottomWidth: 1,
-            borderTopLeftRadius: radius4["2xl"],
-            borderTopRightRadius: radius4["2xl"],
-            borderBottomLeftRadius: radius4.xl,
-            borderBottomRightRadius: radius4.xl,
-            boxShadow: tokenShadows.lg
+            // Darken the whole surface via brightness, the same mechanism the
+            // outlined Button uses — no border-color shift; the border stays
+            // put and only the bevel geometry moves. Lighter than the Button's
+            // 0.97 on purpose: the filter dims a card's media and copy along
+            // with its surface, so the same amount reads much heavier here.
+            filter: "brightness(0.995)",
+            // The Button drops its resting shadow on hover (MUI's
+            // disableElevation), so the raised edge is the only depth cue
+            // mid-interaction. Matched here for parity.
+            boxShadow: "none",
+            borderTopWidth: 3,
+            borderBottomWidth: 1
           },
           "&:hover::before": {
             top: "150%"
@@ -2421,15 +2499,13 @@ function buildComponents(tokens2) {
           "&:active": {
             transition: "border-width 120ms ease, border-radius 120ms ease, opacity 120ms ease",
             borderTopWidth: 1,
-            borderTopLeftRadius: radius4.xl,
-            borderTopRightRadius: radius4.xl,
-            opacity: 0.85
-          },
-          "&:hover .MuiCardActionArea-focusHighlight": {
-            opacity: 0.04
+            opacity: 0.75
           },
-          "&.Mui-focusVisible .MuiCardActionArea-focusHighlight": {
-            opacity: 0.08
+          // MUI's own hover/focus tint overlay. The outlined Button has no
+          // equivalent (it suppresses the variant hover background), so the
+          // brightness darken above is the only hover feedback.
+          "& .MuiCardActionArea-focusHighlight": {
+            opacity: 0
           },
           "@media (prefers-reduced-motion: reduce)": {
             transition: "none",
@@ -3184,7 +3260,12 @@ var display = {
 var container = {
   maxWidthDesktop: 1280,
   paddingDesktop: 32,
-  paddingMobile: 16
+  paddingMobile: 16,
+  // Corner radius of the App Shell's content surface where it meets the
+  // chrome. Deliberately a layout value rather than a step on the `radius`
+  // scale: that scale governs components (and the alkemy+ preset caps it at
+  // 22), so a 24 sitting in it would misread as a component radius.
+  shellRadius: 24
 };
 var widths = {
   xxs: 320,
@@ -3450,15 +3531,15 @@ var alpha = {
 var highlight = magenta;
 var radius2 = {
   ...radius,
-  xxs: 1,
-  xs: 2,
-  sm: 3,
-  md: 4,
-  lg: 5,
-  xl: 6,
-  "2xl": 8,
-  "3xl": 10,
-  "4xl": 12
+  xxs: 2,
+  xs: 4,
+  sm: 6,
+  md: 8,
+  lg: 11,
+  xl: 14,
+  "2xl": 16,
+  "3xl": 20,
+  "4xl": 22
 };
 var text2 = {
   primary: gray[50],
@@ -3773,15 +3854,15 @@ var colors = {
 };
 var radius3 = {
   ...radius,
-  xxs: 1,
-  xs: 2,
-  sm: 3,
-  md: 4,
-  lg: 5,
-  xl: 6,
-  "2xl": 8,
-  "3xl": 10,
-  "4xl": 12
+  xxs: 2,
+  xs: 4,
+  sm: 6,
+  md: 8,
+  lg: 11,
+  xl: 14,
+  "2xl": 16,
+  "3xl": 20,
+  "4xl": 22
 };
 var text3 = {
   primary: gray[900],