@tanishqkancharla/maui 0.0.26 → 0.0.28

package/README.md

@@ -55,7 +55,7 @@ Vite serves the gallery at [http://localhost:5173/](http://localhost:5173/).
 | `npm run build` | Static gallery → `website/` |
 | `npm run build:lib` | Compile package ESM + types → `dist/` (generated, not committed) |
 | `npm run typecheck` | One-shot TypeScript check |
-| `npm run verify-package` | Pack and inspect the real tarball |
+| `npm run verify-package` | Pack-and-inspect publish smoke test of the real tarball (not a public-API check) |
 | `npm run serve` | Preview the gallery build |
 
 ## Package

package/dist/components/Button.js

@@ -141,9 +141,11 @@ const coloredButtonClass = memoize((variant, color) => {
                 "&:disabled": disabledRaised,
             });
         }
+        // Quiet: color tints the label only. Rest is transparent; hover/press
+        // keep the existing wash (same idea as uncolored quiet).
         return style(buttonBaseClass, focusRing("&:focus-visible"), {
             color: fill,
-            backgroundColor: surfaceWash(fill, surfaceMixPercent.hover, "transparent"),
+            backgroundColor: "transparent",
             boxShadow: "none",
             "&:hover:not(:disabled)": {
                 color: darkerFill(fill),
@@ -172,9 +174,11 @@ const coloredButtonClass = memoize((variant, color) => {
             "&:disabled": disabledRaised,
         });
     }
+    // Quiet: color tints the label only. Rest is transparent; hover/press
+    // keep the existing wash (same idea as uncolored quiet).
     return style(buttonBaseClass, focusRing("&:focus-visible"), {
         color: scale[11],
-        backgroundColor: surfaceWash(scale[9], surfaceMixPercent.hover, "transparent"),
+        backgroundColor: "transparent",
         boxShadow: "none",
         "&:hover:not(:disabled)": {
             color: scale[12],

package/dist/tokens/background.d.ts

@@ -1,4 +1,4 @@
-/** Foreground wash percents used by element hover/active and tinted quiet buttons. */
+/** Foreground wash percents used by element hover/active and quiet-button hover. */
 export declare const surfaceMixPercent: {
     readonly hover: 3.5;
     readonly active: 7;

package/dist/tokens/background.js

@@ -13,7 +13,7 @@ const elementSurface = defineVars({
         [DARK_THEME]: colors.gray[2],
     },
 });
-/** Foreground wash percents used by element hover/active and tinted quiet buttons. */
+/** Foreground wash percents used by element hover/active and quiet-button hover. */
 export const surfaceMixPercent = {
     hover: 3.5,
     active: 7,

package/package.json

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

package/skills/maui/references/components/buttons.md

@@ -9,6 +9,7 @@ Styled React Aria `Button` (default `type="button"`). Consumes `ButtonContext`,
 ```tsx
 <Button>Save</Button>
 <Button variant="quiet">Cancel</Button>
+<Button variant="quiet" variantColor="accent">Quiet accent</Button>
 <Button variant="primary" variantColor="blue">Create</Button>
 <Button variant="primary" variantColor="#6366f1">Indigo</Button>
 <Button isDisabled>Wait</Button>
@@ -22,12 +23,12 @@ Styled React Aria `Button` (default `type="button"`). Consumes `ButtonContext`,
 | Prop | Notes |
 | --- | --- |
 | `variant` | `"default"` (raised element) \| `"quiet"` (no shadow, transparent) \| `"primary"` (solid fill) |
-| `variantColor` | Palette name or opaque `#hex` / `rgb(...)`. Primary default is `"accent"`. Quiet ignores color unless set |
+| `variantColor` | Palette name or opaque `#hex` / `rgb(...)`. Primary default is `"accent"`. Quiet ignores color unless set; when set, tints the label with no fill |
 | `isDisabled` | React Aria name. Maps to native `disabled`. **No `disabled` React prop** |
 | `onClick` | Still supported. React Aria also exposes `onPress` |
 | `children` | Text is wrapped for cap-height trim; SVG icons sit beside text. Icon-only needs `aria-label` |
 
-Primary: fill step 9, hover 10, light text (`onAccent`, or step 12 on amber/lime/mint/sky/yellow). Custom CSS fill drops alpha; hover is `l - 0.04`; text is white or near-black from lightness. Edge is `tintedSubtle`. Quiet + color: 3.5% wash (hover 7%).
+Primary: fill step 9, hover 10, light text (`onAccent`, or step 12 on amber/lime/mint/sky/yellow). Custom CSS fill drops alpha; hover is `l - 0.04`; text is white or near-black from lightness. Edge is `tintedSubtle`. Quiet + color: no fill; color tints the label/icon (hover 7% wash, same idea as uncolored quiet).
 
 While a menu or overlay is open, the trigger keeps the active fill via RAC `data-pressed` / `aria-expanded` (same tokens as `:active`: `elementActive`, or primary step 10).
 

package/src/apps/JsxEditor/catalog.ts

@@ -237,7 +237,7 @@ export const catalog: CatalogComponent[] = [
 			{ name: "variant", values: ["default", "quiet", "primary"] },
 			{
 				name: "variantColor",
-				info: "Palette name (colors[name], primary step 9) or an opaque hex / rgb() fill. Quiet uses a 3.5% wash.",
+				info: "Palette name (colors[name], primary step 9) or an opaque hex / rgb() fill. Quiet stays transparent; color tints the label.",
 				values: [...colorNames],
 				cssColor: true,
 			},

package/src/components/Button.tsx

@@ -181,13 +181,11 @@ const coloredButtonClass = memoize(
 				})
 			}
 
+			// Quiet: color tints the label only. Rest is transparent; hover/press
+			// keep the existing wash (same idea as uncolored quiet).
 			return style(buttonBaseClass, focusRing("&:focus-visible"), {
 				color: fill,
-				backgroundColor: surfaceWash(
-					fill,
-					surfaceMixPercent.hover,
-					"transparent",
-				),
+				backgroundColor: "transparent",
 				boxShadow: "none",
 				"&:hover:not(:disabled)": {
 					color: darkerFill(fill),
@@ -226,13 +224,11 @@ const coloredButtonClass = memoize(
 			})
 		}
 
+		// Quiet: color tints the label only. Rest is transparent; hover/press
+		// keep the existing wash (same idea as uncolored quiet).
 		return style(buttonBaseClass, focusRing("&:focus-visible"), {
 			color: scale[11],
-			backgroundColor: surfaceWash(
-				scale[9],
-				surfaceMixPercent.hover,
-				"transparent",
-			),
+			backgroundColor: "transparent",
 			boxShadow: "none",
 			"&:hover:not(:disabled)": {
 				color: scale[12],

package/src/pages/ButtonsPage.tsx

@@ -59,8 +59,7 @@ export function ButtonsPage() {
 				<code>variantColor</code> (a palette name, default{" "}
 				<code>"accent"</code>). Pass a hex or <code>rgb()</code> string
 				to use that color as the fill (alpha is dropped). The edge is{" "}
-				<code>shadow.subtle</code> tinted with that fill. Quiet uses the
-				same color at the 3.5% surface-wash mix.
+				<code>shadow.subtle</code> tinted with that fill.
 			</P>
 			<Flex row alignItems="center" gap={4} style={{ flexWrap: "wrap" }}>
 				<Button variant="primary">Save</Button>
@@ -77,12 +76,6 @@ export function ButtonsPage() {
 				<Button variant="primary" variantColor="orange">
 					Orange
 				</Button>
-				<Button variant="quiet" variantColor="accent">
-					Quiet accent
-				</Button>
-				<Button variant="quiet" variantColor="blue">
-					Quiet blue
-				</Button>
 			</Flex>
 			<Flex
 				row
@@ -99,9 +92,6 @@ export function ButtonsPage() {
 				<Button variant="primary" variantColor="rgb(219, 68, 55)">
 					rgb(219, 68, 55)
 				</Button>
-				<Button variant="quiet" variantColor="#6366f1">
-					Quiet #6366f1
-				</Button>
 			</Flex>
 			<Flex
 				row
@@ -117,7 +107,12 @@ export function ButtonsPage() {
 			</Flex>
 
 			<H3>Quiet</H3>
-			<Flex row alignItems="center" gap={4}>
+			<P>
+				<code>variant="quiet"</code> has no fill, with or without{" "}
+				<code>variantColor</code>. Color tints the label and icon; hover
+				and press use a wash, same as uncolored quiet.
+			</P>
+			<Flex row alignItems="center" gap={4} style={{ flexWrap: "wrap" }}>
 				<Button variant="quiet">Button</Button>
 				<Button variant="quiet">
 					<Icons.Plus />
@@ -126,6 +121,15 @@ export function ButtonsPage() {
 				<Button variant="quiet" aria-label="More actions">
 					<Icons.DotsHorizontal />
 				</Button>
+				<Button variant="quiet" variantColor="accent">
+					Quiet accent
+				</Button>
+				<Button variant="quiet" variantColor="blue">
+					Quiet blue
+				</Button>
+				<Button variant="quiet" variantColor="#6366f1">
+					Quiet #6366f1
+				</Button>
 			</Flex>
 
 			<H3>Icons with text</H3>

package/src/tokens/background.ts

@@ -16,7 +16,7 @@ const elementSurface = defineVars({
 	},
 })
 
-/** Foreground wash percents used by element hover/active and tinted quiet buttons. */
+/** Foreground wash percents used by element hover/active and quiet-button hover. */
 export const surfaceMixPercent = {
 	hover: 3.5,
 	active: 7,