@tanishqkancharla/maui 0.0.59 → 0.0.60

package/dist/components/Button.js

@@ -30,7 +30,7 @@ const disabledQuiet = {
     backgroundColor: "transparent",
     boxShadow: "none",
 };
-const buttonBaseClass = style(text({ size: "xs", fontWeight: 400, color: "highContrast" }), focusRing("&:focus-visible", buttonShadow), spacing.padding({ x: 6, y: 4 }), radius.sm, {
+const buttonBaseClass = style(text({ size: "xs", fontWeight: 500, color: "highContrast" }), focusRing("&:focus-visible", buttonShadow), spacing.padding({ x: 6, y: 4 }), radius.sm, {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
@@ -65,7 +65,7 @@ const buttonTextClass = style({
     minWidth: 0,
     textBox: "trim-both cap alphabetic",
 });
-const smallButtonClass = style(text({ size: "2xs", fontWeight: 400, color: "highContrast" }), {
+const smallButtonClass = style(text({ size: "2xs", fontWeight: 500, color: "highContrast" }), {
     height: controlSize.smHeight,
     gap: spacing.value(1),
     paddingInline: spacing.value(4),
@@ -146,9 +146,9 @@ function onSolidText(color) {
 function fillShade(color, lightnessOffset, alpha = 1) {
     return `oklch(from ${color} calc(l - ${lightnessOffset}) c h / ${alpha})`;
 }
-/** Fill-tinted edge and lift; no neutral gray, so the shadow matches any fill. */
-function primaryButtonShadow(color) {
-    return `inset 0 1px #ffffff18, inset 0 0 1px .5px #fff2, 0 0 0 .5px ${fillShade(color, 0.1)}, 0 1px 2px ${fillShade(color, 0, 0.35)}, 0 3px 8px -3px ${fillShade(color, 0, 0.6)}`;
+/** Dark-only top highlight, a fill-tinted lift (half strength in dark mode), and an edge painted beneath the lift: the fill's alpha step 6 in light mode, a near-black tint of the fill in dark mode. */
+function primaryButtonShadow(color, lightEdge) {
+    return `inset 0 .5px light-dark(transparent, rgb(255 255 255 / 0.15)), 0 1px 2px light-dark(${fillShade(color, 0, 0.35)}, ${fillShade(color, 0, 0.18)}), 0 3px 8px -3px light-dark(${fillShade(color, 0, 0.6)}, ${fillShade(color, 0, 0.3)}), 0 0 0 .5px light-dark(${lightEdge}, oklch(from ${color} 0.18 calc(c * 0.5) h))`;
 }
 /**
  * Diagonal from a slightly darker, more saturated, warmer-rotated fill to the
@@ -159,8 +159,8 @@ function primaryButtonGradient(color) {
 }
 /** Hover lightens the top of the gradient instead of replacing the fill. */
 const primaryHoverSheen = `linear-gradient(to bottom, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0))`;
-const primaryClass = memoize((fill, textColor) => {
-    const primaryShadow = primaryButtonShadow(fill);
+const primaryClass = memoize((fill, textColor, lightEdge) => {
+    const primaryShadow = primaryButtonShadow(fill, lightEdge);
     const gradient = primaryButtonGradient(fill);
     return style(buttonBaseClass, focusRing("&:focus-visible", primaryShadow), {
         color: textColor,
@@ -177,13 +177,14 @@ const coloredButtonClass = memoize((variant, color) => {
     if (isCssColor(color)) {
         const fill = opaqueColor(color);
         if (variant === "primary") {
-            return primaryClass(fill, onSolidText(fill));
+            // No alpha scale for a custom fill; approximate step A6 with the fill at 35%.
+            return primaryClass(fill, onSolidText(fill), fillShade(fill, 0, 0.35));
         }
         return quietClass(fill, darkerFill(fill), fill);
     }
     const scale = paletteFill(color);
     if (variant === "primary") {
-        return primaryClass(scale[9], darkTextOnSolid.has(color) ? scale[12] : "white");
+        return primaryClass(scale[9], darkTextOnSolid.has(color) ? scale[12] : "white", paletteAlpha(color)[6]);
     }
     return quietClass(scale[11], scale[12], paletteAlpha(color)[9]);
 });

package/dist/components/Dialog.js

@@ -3,7 +3,7 @@ import { useCallback, useState, } from "react";
 import { AnimatePresence, motion, useReducedMotion, } from "motion/react";
 import { Dialog as AriaDialog, Heading, Modal, ModalOverlay, } from "react-aria-components";
 import { style, useStyles } from "purse-styles";
-import { background } from "../tokens/background";
+import { colors } from "../tokens/colors";
 import { border } from "../tokens/borders";
 import { overlayMotion } from "../tokens/motion";
 import { radius } from "../tokens/radius";
@@ -43,7 +43,8 @@ const overlay = style({
     overflow: "auto",
     overscrollBehavior: "contain",
 });
-const modalBase = style(background.element, border([], "outline"), radius.lg, {
+const modalBase = style(border([], "outline"), radius.lg, {
+    backgroundColor: colors.gray[2],
     width: "min(440px, calc(100vw - 32px))",
     maxWidth: "100%",
     maxHeight: "calc(100dvh - 32px)",

package/dist/tokens/background.js

@@ -11,7 +11,7 @@ const appSurface = defineVars({
 const elementSurface = defineVars({
     element: {
         default: "#ffffff",
-        [DARK_THEME]: colors.gray[2],
+        [DARK_THEME]: colors.gray[3],
     },
 });
 /** Shared interactive surface washes. */

package/dist/tokens/shadow.d.ts

@@ -1,7 +1,7 @@
 export declare const shadowVars: import("purse-styles").VariableGroup<{
     readonly control: {
-        readonly default: "inset 0 1px #fff8, inset 0 0 1px 1px #fff8, 0 .5px 1px #00000018, 0 0 0 .5px rgb(0 0 0 / 8%), 0 0 4px -1px #0001";
-        readonly ":root[data-theme=\"dark\"]": "inset 0 1px #ffffff08, 0 0 0 .5px rgb(255 255 255 / 8%), 0 1px .5px #00000018, 0 0 3px -1px #000a";
+        readonly default: `0 .5px 1px #00000018, 0 0 4px -1px #0001, 0 0 0 .5px ${string}`;
+        readonly ":root[data-theme=\"dark\"]": "inset 0 .5px rgb(255 255 255 / 0.09), 0 1px .5px #00000018, 0 0 3px -1px #0005, 0 0 0 .5px rgb(0 0 0 / 0.8)";
     };
     readonly subtle: `rgba(var(--${string}), 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, var(--${string})) 0px 1px 1px -0.5px, rgba(0, 0, 0, var(--${string})) 0px 3px 3px -1.5px`;
     readonly medium: `rgba(var(--${string}), 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, var(--${string})) 0px 1px 1px -0.5px, rgba(0, 0, 0, var(--${string})) 0px 3px 3px -1.5px, rgba(0, 0, 0, var(--${string})) 0px 6px 6px -3px`;

package/dist/tokens/shadow.js

@@ -1,5 +1,6 @@
 import { defineVars, style } from "purse-styles";
 import { DARK_THEME } from "../theme/dataTheme";
+import { colors } from "./colors";
 const shadowParams = defineVars({
     foregroundRgb: {
         default: "0, 0, 0",
@@ -14,8 +15,10 @@ const rgb = shadowParams.foregroundRgb;
 const blur = shadowParams.blurOpacity;
 export const shadowVars = defineVars({
     control: {
-        default: `inset 0 1px #fff8, inset 0 0 1px 1px #fff8, 0 .5px 1px #00000018, 0 0 0 .5px rgb(0 0 0 / 8%), 0 0 4px -1px #0001`,
-        [DARK_THEME]: `inset 0 1px #ffffff08, 0 0 0 .5px rgb(255 255 255 / 8%), 0 1px .5px #00000018, 0 0 3px -1px #000a`,
+        // 0.5px edge listed last, so it paints beneath the drop: light reads as a
+        // gray A6 border; dark is near-black so the control looks cut into the surface.
+        default: `0 .5px 1px #00000018, 0 0 4px -1px #0001, 0 0 0 .5px ${colors.grayAlpha[6]}`,
+        [DARK_THEME]: `inset 0 .5px rgb(255 255 255 / 0.09), 0 1px .5px #00000018, 0 0 3px -1px #0005, 0 0 0 .5px rgb(0 0 0 / 0.8)`,
     },
     subtle: `rgba(${rgb}, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, ${blur}) 0px 1px 1px -0.5px, rgba(0, 0, 0, ${blur}) 0px 3px 3px -1.5px`,
     medium: `rgba(${rgb}, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, ${blur}) 0px 1px 1px -0.5px, rgba(0, 0, 0, ${blur}) 0px 3px 3px -1.5px, rgba(0, 0, 0, ${blur}) 0px 6px 6px -3px`,

package/package.json

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

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

@@ -30,7 +30,7 @@ Styled React Aria `Button` (default `type="button"`). Consumes `ButtonContext`,
 | `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, light text (`onAccent`, or step 12 on amber/lime/mint/sky/yellow). Custom CSS fill drops alpha; text is white or near-black from lightness. The fill is a diagonal gradient (`to top left`) from the fill shifted by OKLCH `l − 0.027`, `c × 1.05`, `h − 6.8` to the fill itself. The shadow keeps the white inset highlight and tints a 0.5px edge (`l − 0.1`) and a soft lift from the fill — no neutral gray. Hover layers a white-to-transparent sheen over the gradient; disabled drops the gradient. Quiet: no fill; `variantColor` tints the label/icon. Hover/press mix `grayAlpha[9]` (or that color’s alpha 9, or the hex) into transparent at 6% light / 9% dark; press is 2×. Hover fills snap.
+Primary: fill step 9, light text (`onAccent`, or step 12 on amber/lime/mint/sky/yellow). Custom CSS fill drops alpha; text is white or near-black from lightness. The fill is a diagonal gradient (`to top left`) from the fill shifted by OKLCH `l − 0.027`, `c × 1.05`, `h − 6.8` to the fill itself. In dark mode the shadow has a 0.5px white top highlight at 15% (`shadow.control` uses 9%); light mode has none. The shadow tints a soft lift from the fill, at half strength in dark mode, and adds a 0.5px edge painted beneath the lift: the fill color’s alpha step 6 in light mode (a custom CSS fill uses the fill at 35%); in dark mode a near-black tint of the fill (OKLCH lightness 0.18, half chroma) — no neutral gray. Hover layers a white-to-transparent sheen over the gradient; disabled drops the gradient. Quiet: no fill; `variantColor` tints the label/icon. Hover/press mix `grayAlpha[9]` (or that color’s alpha 9, or the hex) into transparent at 6% light / 9% dark; press is 2×. Hover fills snap.
 
 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/skills/maui/references/tokens.md

@@ -178,7 +178,7 @@ shadowVars.control | .subtle | .medium | .strong // raw box-shadow strings
 tintedSubtle(color)                             // subtle ring+blur tinted from a fill
 ```
 
-`shadow.control` uses inset highlights and a compact outer edge. Every elevation
+`shadow.control` is a small drop over a 0.5px edge: gray A6 (`grayAlpha[6]`) in light mode, 80% black in dark mode so the control looks cut into the surface. Dark mode also adds a 0.5px top highlight. Every elevation
 already includes a 1px ring. **Do not also `border()` the same element.**
 
 `border(sides, color)`:

package/src/components/Button.tsx

@@ -44,7 +44,7 @@ const disabledQuiet = {
 } as const
 
 const buttonBaseClass = style(
-	text({ size: "xs", fontWeight: 400, color: "highContrast" }),
+	text({ size: "xs", fontWeight: 500, color: "highContrast" }),
 	focusRing("&:focus-visible", buttonShadow),
 	spacing.padding({ x: 6, y: 4 }),
 	radius.sm,
@@ -87,7 +87,7 @@ const buttonTextClass = style({
 })
 
 const smallButtonClass = style(
-	text({ size: "2xs", fontWeight: 400, color: "highContrast" }),
+	text({ size: "2xs", fontWeight: 500, color: "highContrast" }),
 	{
 		height: controlSize.smHeight,
 		gap: spacing.value(1),
@@ -193,9 +193,9 @@ function fillShade(color: string, lightnessOffset: number, alpha = 1) {
 	return `oklch(from ${color} calc(l - ${lightnessOffset}) c h / ${alpha})`
 }
 
-/** Fill-tinted edge and lift; no neutral gray, so the shadow matches any fill. */
-function primaryButtonShadow(color: string) {
-	return `inset 0 1px #ffffff18, inset 0 0 1px .5px #fff2, 0 0 0 .5px ${fillShade(color, 0.1)}, 0 1px 2px ${fillShade(color, 0, 0.35)}, 0 3px 8px -3px ${fillShade(color, 0, 0.6)}`
+/** Dark-only top highlight, a fill-tinted lift (half strength in dark mode), and an edge painted beneath the lift: the fill's alpha step 6 in light mode, a near-black tint of the fill in dark mode. */
+function primaryButtonShadow(color: string, lightEdge: string) {
+	return `inset 0 .5px light-dark(transparent, rgb(255 255 255 / 0.15)), 0 1px 2px light-dark(${fillShade(color, 0, 0.35)}, ${fillShade(color, 0, 0.18)}), 0 3px 8px -3px light-dark(${fillShade(color, 0, 0.6)}, ${fillShade(color, 0, 0.3)}), 0 0 0 .5px light-dark(${lightEdge}, oklch(from ${color} 0.18 calc(c * 0.5) h))`
 }
 
 /**
@@ -209,27 +209,30 @@ function primaryButtonGradient(color: string) {
 /** Hover lightens the top of the gradient instead of replacing the fill. */
 const primaryHoverSheen = `linear-gradient(to bottom, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0))`
 
-const primaryClass = memoize((fill: string, textColor: string) => {
-	const primaryShadow = primaryButtonShadow(fill)
-	const gradient = primaryButtonGradient(fill)
-	return style(buttonBaseClass, focusRing("&:focus-visible", primaryShadow), {
-		color: textColor,
-		backgroundColor: fill,
-		backgroundImage: gradient,
-		boxShadow: primaryShadow,
-		"&:hover:not(:disabled)": {
-			backgroundImage: `${primaryHoverSheen}, ${gradient}`,
-		},
-		"&:disabled": disabledRaised,
-	})
-})
+const primaryClass = memoize(
+	(fill: string, textColor: string, lightEdge: string) => {
+		const primaryShadow = primaryButtonShadow(fill, lightEdge)
+		const gradient = primaryButtonGradient(fill)
+		return style(buttonBaseClass, focusRing("&:focus-visible", primaryShadow), {
+			color: textColor,
+			backgroundColor: fill,
+			backgroundImage: gradient,
+			boxShadow: primaryShadow,
+			"&:hover:not(:disabled)": {
+				backgroundImage: `${primaryHoverSheen}, ${gradient}`,
+			},
+			"&:disabled": disabledRaised,
+		})
+	},
+)
 
 const coloredButtonClass = memoize(
 	(variant: "primary" | "quiet", color: ButtonVariantColor) => {
 		if (isCssColor(color)) {
 			const fill = opaqueColor(color)
 			if (variant === "primary") {
-				return primaryClass(fill, onSolidText(fill))
+				// No alpha scale for a custom fill; approximate step A6 with the fill at 35%.
+				return primaryClass(fill, onSolidText(fill), fillShade(fill, 0, 0.35))
 			}
 
 			return quietClass(fill, darkerFill(fill), fill)
@@ -240,6 +243,7 @@ const coloredButtonClass = memoize(
 			return primaryClass(
 				scale[9],
 				darkTextOnSolid.has(color) ? scale[12] : "white",
+				paletteAlpha(color)[6],
 			)
 		}
 

package/src/components/Dialog.tsx

@@ -17,7 +17,7 @@ import {
 	ModalOverlay,
 } from "react-aria-components"
 import { style, useStyles } from "purse-styles"
-import { background } from "../tokens/background"
+import { colors } from "../tokens/colors"
 import { border } from "../tokens/borders"
 import { overlayMotion } from "../tokens/motion"
 import { radius } from "../tokens/radius"
@@ -81,7 +81,8 @@ const overlay = style({
 	overscrollBehavior: "contain",
 })
 
-const modalBase = style(background.element, border([], "outline"), radius.lg, {
+const modalBase = style(border([], "outline"), radius.lg, {
+	backgroundColor: colors.gray[2],
 	width: "min(440px, calc(100vw - 32px))",
 	maxWidth: "100%",
 	maxHeight: "calc(100dvh - 32px)",

package/src/pages/BackgroundColorTokenPage.tsx

@@ -62,11 +62,11 @@ export function BackgroundColorTokenPage() {
 							<Code>background.element</Code>
 						</TableCell>
 						<TableCell>
-							<Code>#ffffff</Code> / <Code>colors.gray[2]</Code>
+							<Code>#ffffff</Code> / <Code>colors.gray[3]</Code>
 						</TableCell>
 						<TableCell>
 							Inputs and slightly raised controls. Matches app white in
-							light; one step lighter than the canvas in dark.
+							light; two steps lighter than the canvas in dark.
 						</TableCell>
 					</TableRow>
 					<TableRow>

package/src/pages/ButtonsPage.tsx

@@ -86,8 +86,11 @@ 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 fill is a subtle diagonal gradient from a
-				slightly darker, warmer shade of that color, and the edge and lift
-				shadows are tinted from it. Hover adds a white sheen at the top.
+				slightly darker, warmer shade of that color, and the lift shadow is
+				tinted from it; the lift is half as strong in dark mode. The 0.5px edge
+				is alpha step 6 of that color in light mode and a near-black tint of the
+				fill in dark mode. Dark mode adds a 0.5px white top highlight (15% on
+				primary, 9% on default buttons). Hover adds a white sheen at the top.
 			</P>
 			<Flex row alignItems="center" gap={4} style={{ flexWrap: "wrap" }}>
 				<Button variant="primary">Save</Button>

package/src/pages/ReadmePage.tsx

@@ -6,7 +6,7 @@ import { H2, H3, Li, Link, P, Ul } from "../components/Typography"
 export function ReadmePage() {
 	return (
 		<Prose style={{ marginBottom: "32px" }}>
-			<H2>Maui</H2>
+			<H2>README</H2>
 			<P>
 				Maui is an open-source, TypeScript-first design system styled with{" "}
 				<Link href="https://www.npmjs.com/package/purse-styles">

package/src/pages/ShadowTokenPage.tsx

@@ -27,7 +27,8 @@ export function ShadowTokenPage() {
 		<Prose style={{ marginBottom: "32px" }}>
 			<H2>Shadows</H2>
 			<P>
-				Controls use inset highlights with a compact outer edge. Other surfaces
+				Controls use a small drop over a 0.5px edge: gray A6 in light mode,
+				near-black in dark mode, plus a top highlight in dark mode. Other surfaces
 				use Craft&apos;s three-level elevation stack: a
 				foreground-colored 1px ring plus progressively deeper black blur layers.
 				Blur opacity is 0.06 in light mode and 0.12 in dark mode.

package/src/tokens/background.ts

@@ -13,7 +13,7 @@ const appSurface = defineVars({
 const elementSurface = defineVars({
 	element: {
 		default: "#ffffff",
-		[DARK_THEME]: colors.gray[2],
+		[DARK_THEME]: colors.gray[3],
 	},
 })
 

package/src/tokens/shadow.ts

@@ -1,5 +1,6 @@
 import { defineVars, style } from "purse-styles"
 import { DARK_THEME } from "../theme/dataTheme"
+import { colors } from "./colors"
 
 const shadowParams = defineVars({
 	foregroundRgb: {
@@ -17,8 +18,10 @@ const blur = shadowParams.blurOpacity
 
 export const shadowVars = defineVars({
 	control: {
-		default: `inset 0 1px #fff8, inset 0 0 1px 1px #fff8, 0 .5px 1px #00000018, 0 0 0 .5px rgb(0 0 0 / 8%), 0 0 4px -1px #0001`,
-		[DARK_THEME]: `inset 0 1px #ffffff08, 0 0 0 .5px rgb(255 255 255 / 8%), 0 1px .5px #00000018, 0 0 3px -1px #000a`,
+		// 0.5px edge listed last, so it paints beneath the drop: light reads as a
+		// gray A6 border; dark is near-black so the control looks cut into the surface.
+		default: `0 .5px 1px #00000018, 0 0 4px -1px #0001, 0 0 0 .5px ${colors.grayAlpha[6]}`,
+		[DARK_THEME]: `inset 0 .5px rgb(255 255 255 / 0.09), 0 1px .5px #00000018, 0 0 3px -1px #0005, 0 0 0 .5px rgb(0 0 0 / 0.8)`,
 	},
 	subtle: `rgba(${rgb}, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, ${blur}) 0px 1px 1px -0.5px, rgba(0, 0, 0, ${blur}) 0px 3px 3px -1.5px`,
 	medium: `rgba(${rgb}, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, ${blur}) 0px 1px 1px -0.5px, rgba(0, 0, 0, ${blur}) 0px 3px 3px -1.5px, rgba(0, 0, 0, ${blur}) 0px 6px 6px -3px`,