@matteoaliano/forest-ui 1.1.1 → 1.2.1

package/dist/theme.js

@@ -515,6 +515,20 @@ function buildComponents(tokens2) {
                 borderTopRightRadius: radius4.md,
                 opacity: 0.75
               },
+              // Unified disabled treatment across the button family (Button,
+              // IconButton, Fab, ButtonGroup, ToggleButton): transparent face,
+              // disabled border, disabled text — matching the outlined
+              // IconButton reference. Contained's fill is dropped and the bevel
+              // geometry re-asserted (MUI's outlined disabled `border: 1px`
+              // shorthand would otherwise flatten it).
+              "&.Mui-disabled": {
+                backgroundColor: "transparent",
+                borderColor: border4.disabled,
+                borderTopWidth: 1,
+                borderRightWidth: 1,
+                borderLeftWidth: 1,
+                borderBottomWidth: 4
+              },
               "@media (prefers-reduced-motion: reduce)": {
                 transition: "none",
                 "&::before": { display: "none" }
@@ -556,6 +570,13 @@ function buildComponents(tokens2) {
           "&.MuiButtonGroup-contained .MuiButtonGroup-grouped:not(.Mui-disabled)": {
             borderColor: fg4.tertiary
           },
+          // Disabled grouped children: MUI's per-position grouped-contained
+          // border wins over the child Button's own .Mui-disabled rule on the
+          // first/middle buttons — pin the unified disabled border here so the
+          // whole group matches the standalone disabled Button.
+          "&.MuiButtonGroup-contained .MuiButtonGroup-grouped.Mui-disabled": {
+            borderColor: border4.disabled
+          },
           // outlined group → the outlined-Button look (outlinedFill), including
           // its lightened hover sweep (the forced-contained children would
           // otherwise sweep at full currentColor strength).
@@ -620,6 +641,13 @@ function buildComponents(tokens2) {
           },
           "&.ForestIconButton": {
             ...bevel3D,
+            // Square 32×32 with border-box so the faux-3D bevel (1px top + 4px
+            // 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.
+            height: 32,
+            width: 32,
+            boxSizing: "border-box",
             boxShadow: tokenShadows.xs,
             "&:focus-visible": {
               boxShadow: focusRings4.brandShadowXs
@@ -657,15 +685,13 @@ function buildComponents(tokens2) {
               filter: "brightness(0.97)"
             }
           },
-          // Disabled parity with the Button variants: MUI IconButton's own
-          // .Mui-disabled (transparent bg + action.disabled icon) ties with the
-          // variant faces at (0,2,0) and loses on insertion order — pin the
-          // disabled treatment one class higher.
-          "&.ForestIconButton-contained.Mui-disabled": {
-            backgroundColor: (theme.vars || theme).palette.action.disabledBackground,
-            color: (theme.vars || theme).palette.action.disabled
-          },
-          "&.ForestIconButton-outlined.Mui-disabled": {
+          // Unified disabled treatment for both variants: transparent face,
+          // disabled border, disabled icon — bevel geometry retained. This is
+          // the reference the rest of the button family matches. The two-class
+          // selector out-specifies the single-class variant faces so contained's
+          // fill is dropped.
+          "&.ForestIconButton.Mui-disabled": {
+            backgroundColor: "transparent",
             color: (theme.vars || theme).palette.action.disabled,
             borderColor: border4.disabled
           }
@@ -732,6 +758,13 @@ function buildComponents(tokens2) {
           "&:focus-visible": {
             boxShadow: focusRings4.brandShadowSm
           },
+          // Same unified disabled treatment as Button/IconButton: drop the
+          // contained fill for a transparent, disabled-bordered face.
+          "&.Mui-disabled": {
+            backgroundColor: "transparent",
+            borderColor: border4.disabled,
+            color: (theme.vars || theme).palette.action.disabled
+          },
           "@media (prefers-reduced-motion: reduce)": {
             transition: "none",
             "&::before": { display: "none" }
@@ -1021,7 +1054,19 @@ function buildComponents(tokens2) {
         root: {
           width: 44,
           height: 24,
-          padding: 0
+          padding: 0,
+          // MUI's `size="small"` variant only half-applies here: the theme pins
+          // the track at the wide 44px medium geometry, but MUI still shrinks the
+          // thumb (16px), bumps switchBase padding (4px), and cuts the checked
+          // travel to 16px — leaving the thumb parked mid-track. Forest ships a
+          // single calibrated 24px switch, so neutralize `small` back to it.
+          "&.MuiSwitch-sizeSmall": {
+            "& .MuiSwitch-switchBase": {
+              padding: 2,
+              "&.Mui-checked": { transform: "translateX(20px)" }
+            },
+            "& .MuiSwitch-thumb": { width: 20, height: 20 }
+          }
         },
         switchBase: {
           padding: 2,
@@ -1115,16 +1160,16 @@ function buildComponents(tokens2) {
               borderTopRightRadius: radius4.md
             }
           },
-          // Disabled parity with the disabled contained Button: greyed face +
-          // disabled fg, bevel geometry retained. MUI's own .Mui-disabled rule
-          // only swaps color and border-shorthands the bevel away — and ties
-          // with .Mui-selected at (0,2,0) — so this block sits AFTER selected
-          // to win both.
+          // Disabled parity with the rest of the button family: transparent
+          // face, disabled border + fg, bevel geometry retained. MUI's own
+          // .Mui-disabled rule only swaps color and border-shorthands the bevel
+          // away — and ties with .Mui-selected at (0,2,0) — so this block sits
+          // AFTER selected to win both.
           "&.Mui-disabled": {
-            backgroundColor: (theme.vars || theme).palette.action.disabledBackground,
+            backgroundColor: "transparent",
             color: (theme.vars || theme).palette.action.disabled,
             borderStyle: "solid",
-            borderColor: fg4.tertiary,
+            borderColor: border4.disabled,
             borderTopWidth: 1,
             borderRightWidth: 1,
             borderLeftWidth: 1,