@tanishqkancharla/maui 0.0.41 → 0.0.42

package/dist/components/Button.js

@@ -64,25 +64,11 @@ const buttonTextClass = style({
     minWidth: 0,
     textBox: "trim-both cap alphabetic",
 });
-/**
- * RAC `data-pressed` is true while the pointer is down. MenuTrigger’s
- * PressResponder also keeps it while the menu is open. `aria-expanded`
- * covers Select / ComboBox / DatePicker / DialogTrigger overlays.
- */
-function pressedOrExpanded(styles) {
-    return {
-        "&:active:not(:disabled), &[data-pressed]:not(:disabled)": styles,
-        "&[aria-expanded='true']:not(:disabled)": styles,
-    };
-}
 const buttonClass = style(buttonBaseClass, {
     backgroundColor: backgroundColor.element,
     "&:hover:not(:disabled)": {
         backgroundColor: backgroundColor.elementHover,
     },
-    ...pressedOrExpanded({
-        backgroundColor: backgroundColor.elementActive,
-    }),
 });
 function paletteAlpha(name) {
     return colors[`${name}Alpha`];
@@ -95,10 +81,6 @@ const quietClass = memoize((color, hoverColor, wash) => style(buttonBaseClass, f
         color: hoverColor,
         backgroundColor: surfaceWash(wash, surfaceMixPercent.hover),
     },
-    ...pressedOrExpanded({
-        color: hoverColor,
-        backgroundColor: surfaceWash(wash, surfaceMixPercent.active),
-    }),
     "&:disabled": disabledQuiet,
 }));
 const quietButtonClass = quietClass(colors.gray[11], colors.gray[12], colors.grayAlpha[9]);
@@ -119,7 +101,7 @@ function paletteFill(name) {
 function opaqueColor(color) {
     return `oklch(from ${color} l c h / 1)`;
 }
-/** Pressed state of a one-off fill: same hue, a step darker. */
+/** Darken a one-off fill while preserving its hue. */
 function darkerFill(color) {
     return `oklch(from ${color} calc(l - 0.04) c h)`;
 }
@@ -138,7 +120,6 @@ const coloredButtonClass = memoize((variant, color) => {
         const fill = opaqueColor(color);
         if (variant === "primary") {
             const hover = surfaceWash(colors.gray[12], surfaceMixPercent.hover, fill);
-            const pressed = darkerFill(fill);
             const primaryShadow = primaryButtonShadow(fill);
             return style(buttonBaseClass, focusRing("&:focus-visible", primaryShadow), {
                 color: onSolidText(fill),
@@ -147,9 +128,6 @@ const coloredButtonClass = memoize((variant, color) => {
                 "&:hover:not(:disabled)": {
                     backgroundColor: hover,
                 },
-                ...pressedOrExpanded({
-                    backgroundColor: pressed,
-                }),
                 "&:disabled": disabledRaised,
             });
         }
@@ -166,9 +144,6 @@ const coloredButtonClass = memoize((variant, color) => {
             "&:hover:not(:disabled)": {
                 backgroundColor: hover,
             },
-            ...pressedOrExpanded({
-                backgroundColor: scale[10],
-            }),
             "&:disabled": disabledRaised,
         });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tanishqkancharla/maui",
-	"version": "0.0.41",
+	"version": "0.0.42",
 	"description": "Maui design system",
 	"type": "module",
 	"main": "./dist/maui.js",

package/src/components/Button.tsx

@@ -84,26 +84,11 @@ const buttonTextClass = style({
 	textBox: "trim-both cap alphabetic",
 })
 
-/**
- * RAC `data-pressed` is true while the pointer is down. MenuTrigger’s
- * PressResponder also keeps it while the menu is open. `aria-expanded`
- * covers Select / ComboBox / DatePicker / DialogTrigger overlays.
- */
-function pressedOrExpanded(styles: Record<string, string>) {
-	return {
-		"&:active:not(:disabled), &[data-pressed]:not(:disabled)": styles,
-		"&[aria-expanded='true']:not(:disabled)": styles,
-	}
-}
-
 const buttonClass = style(buttonBaseClass, {
 	backgroundColor: backgroundColor.element,
 	"&:hover:not(:disabled)": {
 		backgroundColor: backgroundColor.elementHover,
 	},
-	...pressedOrExpanded({
-		backgroundColor: backgroundColor.elementActive,
-	}),
 })
 
 function paletteAlpha(name: ColorName): ColorScale {
@@ -119,10 +104,6 @@ const quietClass = memoize((color: string, hoverColor: string, wash: string) =>
 			color: hoverColor,
 			backgroundColor: surfaceWash(wash, surfaceMixPercent.hover),
 		},
-		...pressedOrExpanded({
-			color: hoverColor,
-			backgroundColor: surfaceWash(wash, surfaceMixPercent.active),
-		}),
 		"&:disabled": disabledQuiet,
 	}),
 )
@@ -158,7 +139,7 @@ function opaqueColor(color: string) {
 	return `oklch(from ${color} l c h / 1)`
 }
 
-/** Pressed state of a one-off fill: same hue, a step darker. */
+/** Darken a one-off fill while preserving its hue. */
 function darkerFill(color: string) {
 	return `oklch(from ${color} calc(l - 0.04) c h)`
 }
@@ -185,7 +166,6 @@ const coloredButtonClass = memoize(
 					surfaceMixPercent.hover,
 					fill,
 				)
-				const pressed = darkerFill(fill)
 				const primaryShadow = primaryButtonShadow(fill)
 				return style(
 					buttonBaseClass,
@@ -197,9 +177,6 @@ const coloredButtonClass = memoize(
 						"&:hover:not(:disabled)": {
 							backgroundColor: hover,
 						},
-						...pressedOrExpanded({
-							backgroundColor: pressed,
-						}),
 						"&:disabled": disabledRaised,
 					},
 				)
@@ -226,9 +203,6 @@ const coloredButtonClass = memoize(
 					"&:hover:not(:disabled)": {
 						backgroundColor: hover,
 					},
-					...pressedOrExpanded({
-						backgroundColor: scale[10],
-					}),
 					"&:disabled": disabledRaised,
 				},
 			)

package/src/pages/ButtonsPage.tsx

@@ -29,7 +29,7 @@ export function ButtonsPage() {
 			<P>
 				<Code>isDisabled</Code> is React Aria’s disabled prop. It sets the
 				native <Code>disabled</Code> attribute — there is no parallel{" "}
-				<Code>disabled</Code> React prop. Hover and press fills do not apply.
+				<Code>disabled</Code> React prop. The hover fill does not apply.
 			</P>
 			<Flex row alignItems="center" gap={4} style={{ flexWrap: "wrap" }}>
 				<Button isDisabled>Button</Button>
@@ -110,9 +110,9 @@ export function ButtonsPage() {
 			<H3>Quiet</H3>
 			<P>
 				<Code>variant="quiet"</Code> has no fill. <Code>variantColor</Code>{" "}
-				tints the label and icon. Hover and press mix <Code>grayAlpha[9]</Code>{" "}
-				(or that color’s alpha 9) into transparent. Hover uses the shared 3.5%
-				control wash; press remains stronger.
+				tints the label and icon. Hover mixes <Code>grayAlpha[9]</Code> (or
+				that color’s alpha 9) into transparent using the shared 3.5% control
+				wash.
 			</P>
 			<Flex row alignItems="center" gap={4} style={{ flexWrap: "wrap" }}>
 				<Button variant="quiet">Button</Button>