@tanishqkancharla/maui 0.0.57 → 0.0.59

package/dist/components/Button.js

@@ -20,6 +20,7 @@ const disabledRaised = {
     opacity: 1,
     color: colors.gray[8],
     backgroundColor: backgroundColor.element,
+    backgroundImage: "none",
     boxShadow: buttonShadow,
 };
 const disabledQuiet = {
@@ -141,40 +142,48 @@ function darkerFill(color) {
 function onSolidText(color) {
     return `oklch(from ${color} clamp(0.2, (0.75 - l) * 100, 0.99) 0 0)`;
 }
+/** Darker shade of a fill (OKLCH lightness offset) at an alpha. */
+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 1px .5px #0003, 0 0 3px -1px color-mix(in oklch, ${color}, black 35%)`;
+    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)}`;
 }
+/**
+ * Diagonal from a slightly darker, more saturated, warmer-rotated fill to the
+ * fill. The offsets are the OKLCH delta between Campsite's #FB432C → #FF591E.
+ */
+function primaryButtonGradient(color) {
+    return `linear-gradient(to top left, oklch(from ${color} calc(l - 0.027) calc(c * 1.05) calc(h - 6.8)), ${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 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, color) => {
     if (isCssColor(color)) {
         const fill = opaqueColor(color);
         if (variant === "primary") {
-            const hover = surfaceWash(colors.gray[12], surfaceMixPercent.hover, fill);
-            const primaryShadow = primaryButtonShadow(fill);
-            return style(buttonBaseClass, focusRing("&:focus-visible", primaryShadow), {
-                color: onSolidText(fill),
-                backgroundColor: fill,
-                boxShadow: primaryShadow,
-                "&:hover:not(:disabled)": {
-                    backgroundColor: hover,
-                },
-                "&:disabled": disabledRaised,
-            });
+            return primaryClass(fill, onSolidText(fill));
         }
         return quietClass(fill, darkerFill(fill), fill);
     }
     const scale = paletteFill(color);
     if (variant === "primary") {
-        const primaryShadow = primaryButtonShadow(scale[9]);
-        const hover = surfaceWash(colors.gray[12], surfaceMixPercent.hover, scale[9]);
-        return style(buttonBaseClass, focusRing("&:focus-visible", primaryShadow), {
-            color: darkTextOnSolid.has(color) ? scale[12] : "white",
-            backgroundColor: scale[9],
-            boxShadow: primaryShadow,
-            "&:hover:not(:disabled)": {
-                backgroundColor: hover,
-            },
-            "&:disabled": disabledRaised,
-        });
+        return primaryClass(scale[9], darkTextOnSolid.has(color) ? scale[12] : "white");
     }
     return quietClass(scale[11], scale[12], paletteAlpha(color)[9]);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tanishqkancharla/maui",
-	"version": "0.0.57",
+	"version": "0.0.59",
 	"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, 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. Its raised shadow strengthens the white inset highlight and tints the tight outer edge from the fill. 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. 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.
 
 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/components/Button.tsx

@@ -31,6 +31,7 @@ const disabledRaised = {
 	opacity: 1,
 	color: colors.gray[8],
 	backgroundColor: backgroundColor.element,
+	backgroundImage: "none",
 	boxShadow: buttonShadow,
 } as const
 
@@ -187,34 +188,48 @@ function onSolidText(color: string) {
 	return `oklch(from ${color} clamp(0.2, (0.75 - l) * 100, 0.99) 0 0)`
 }
 
+/** Darker shade of a fill (OKLCH lightness offset) at an alpha. */
+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 1px .5px #0003, 0 0 3px -1px color-mix(in oklch, ${color}, black 35%)`
+	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)}`
+}
+
+/**
+ * Diagonal from a slightly darker, more saturated, warmer-rotated fill to the
+ * fill. The offsets are the OKLCH delta between Campsite's #FB432C → #FF591E.
+ */
+function primaryButtonGradient(color: string) {
+	return `linear-gradient(to top left, oklch(from ${color} calc(l - 0.027) calc(c * 1.05) calc(h - 6.8)), ${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: 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 coloredButtonClass = memoize(
 	(variant: "primary" | "quiet", color: ButtonVariantColor) => {
 		if (isCssColor(color)) {
 			const fill = opaqueColor(color)
 			if (variant === "primary") {
-				const hover = surfaceWash(
-					colors.gray[12],
-					surfaceMixPercent.hover,
-					fill,
-				)
-				const primaryShadow = primaryButtonShadow(fill)
-				return style(
-					buttonBaseClass,
-					focusRing("&:focus-visible", primaryShadow),
-					{
-						color: onSolidText(fill),
-						backgroundColor: fill,
-						boxShadow: primaryShadow,
-						"&:hover:not(:disabled)": {
-							backgroundColor: hover,
-						},
-						"&:disabled": disabledRaised,
-					},
-				)
+				return primaryClass(fill, onSolidText(fill))
 			}
 
 			return quietClass(fill, darkerFill(fill), fill)
@@ -222,24 +237,9 @@ const coloredButtonClass = memoize(
 
 		const scale = paletteFill(color)
 		if (variant === "primary") {
-			const primaryShadow = primaryButtonShadow(scale[9])
-			const hover = surfaceWash(
-				colors.gray[12],
-				surfaceMixPercent.hover,
+			return primaryClass(
 				scale[9],
-			)
-			return style(
-				buttonBaseClass,
-				focusRing("&:focus-visible", primaryShadow),
-				{
-					color: darkTextOnSolid.has(color) ? scale[12] : "white",
-					backgroundColor: scale[9],
-					boxShadow: primaryShadow,
-					"&:hover:not(:disabled)": {
-						backgroundColor: hover,
-					},
-					"&:disabled": disabledRaised,
-				},
+				darkTextOnSolid.has(color) ? scale[12] : "white",
 			)
 		}
 

package/src/pages/ButtonsPage.tsx

@@ -85,8 +85,9 @@ export function ButtonsPage() {
 				<Code>variant="primary"</Code> fills with step 9 of{" "}
 				<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). Primary buttons use a stronger inset highlight and a
-				tight edge tinted from 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.
 			</P>
 			<Flex row alignItems="center" gap={4} style={{ flexWrap: "wrap" }}>
 				<Button variant="primary">Save</Button>

package/src/pages/Maui.tsx

@@ -27,7 +27,7 @@ import { type ThemePreference, useTheme } from "../theme/ThemeContext"
 import { isScalePreference, useScale } from "../theme/ScaleContext"
 import { LARGE_SCALE } from "../theme/dataScale"
 import { galleryCompactMedia } from "./galleryCompact"
-import { AboutPage } from "./AboutPage"
+import { ReadmePage } from "./ReadmePage"
 import { AvatarPage } from "./AvatarPage"
 import { BadgePage } from "./BadgePage"
 import { BackgroundColorTokenPage } from "./BackgroundColorTokenPage"
@@ -106,7 +106,7 @@ function navItems(entries: NavEntry[]): NavItem[] {
 }
 
 const navigation: NavEntry[] = [
-	{ label: "About", path: "/about", page: AboutPage },
+	{ label: "README", path: "/readme", page: ReadmePage },
 	{ label: "Editor", path: "/editor", page: JsxEditorPage },
 	{
 		label: "Tokens",
@@ -241,7 +241,7 @@ const navigation: NavEntry[] = [
 	},
 ]
 
-const defaultPath = "/about"
+const defaultPath = "/readme"
 
 function useGalleryCompact() {
 	const [compact, setCompact] = useState(() =>
@@ -317,6 +317,9 @@ function MauiContent() {
 							</Route>
 						))}
 
+						<Route path="/about">
+							<Redirect to="/readme" />
+						</Route>
 						<Route path="/patterns/calendar">
 							<Redirect to="/apps/calendar" />
 						</Route>

package/src/pages/ReadmePage.tsx

@@ -0,0 +1,83 @@
+import { Code } from "../components/Code"
+import { CodeBlock } from "../components/CodeBlock"
+import { Prose } from "../components/Prose"
+import { H2, H3, Li, Link, P, Ul } from "../components/Typography"
+
+export function ReadmePage() {
+	return (
+		<Prose style={{ marginBottom: "32px" }}>
+			<H2>Maui</H2>
+			<P>
+				Maui is an open-source, TypeScript-first design system styled with{" "}
+				<Link href="https://www.npmjs.com/package/purse-styles">
+					purse-styles
+				</Link>
+				. It is developed as part of{" "}
+				<Link href="https://gethalo.dev">Halo</Link>. This site is a gallery of
+				its tokens, components, patterns, and demo apps.
+			</P>
+			<Ul>
+				<Li>
+					Source:{" "}
+					<Link href="https://github.com/tanishqkancharla/maui">
+						github.com/tanishqkancharla/maui
+					</Link>
+				</Li>
+				<Li>
+					Package:{" "}
+					<Link href="https://www.npmjs.com/package/@tanishqkancharla/maui">
+						@tanishqkancharla/maui
+					</Link>
+				</Li>
+			</Ul>
+
+			<H3>Install</H3>
+			<CodeBlock lang="sh">{`npm install @tanishqkancharla/maui motion`}</CodeBlock>
+			<P>
+				<Code>motion</Code> is a required peer dependency, used by components
+				with animated presence and transitions. The package ships compiled
+				JavaScript and type declarations.
+			</P>
+
+			<H3>Usage</H3>
+			<P>
+				Wrap your app in <Code>MauiProvider</Code>, then import tokens and
+				components:
+			</P>
+			<CodeBlock lang="tsx">{`import { MauiProvider, Button } from "@tanishqkancharla/maui"
+
+function App() {
+	return (
+		<MauiProvider>
+			<Button>Hello</Button>
+		</MauiProvider>
+	)
+}`}</CodeBlock>
+			<P>
+				Put the exported <Code>themeFoucScript</Code> in an inline{" "}
+				<Code>{"<script>"}</Code> in <Code>{"<head>"}</Code> so the theme is
+				correct on first paint.
+			</P>
+
+			<H3>Develop</H3>
+			<CodeBlock lang="sh">{`npm install
+npm run dev`}</CodeBlock>
+			<P>
+				Vite serves this gallery locally. Patterns and demo apps are reference
+				implementations, not package components.
+			</P>
+
+			<H3>License</H3>
+			<P>
+				Maui is available under the{" "}
+				<Link href="https://github.com/tanishqkancharla/maui/blob/main/LICENSE">
+					MIT License
+				</Link>
+				.
+			</P>
+
+			<H3>Contact</H3>
+			<P>For any questions, email tanishqkancharla3@gmail.com.</P>
+		</Prose>
+	)
+}

package/src/pages/AboutPage.tsx

@@ -1,19 +0,0 @@
-import { Prose } from "../components/Prose"
-import { H2, Link, P } from "../components/Typography"
-
-export function AboutPage() {
-	return (
-		<Prose>
-			<H2>About</H2>
-			<P>
-				Maui is an open-source design system. It is developed as part of{" "}
-				<Link href="https://gethalo.dev">Halo</Link>. It is available under the{" "}
-				<Link href="https://github.com/tanishqkancharla/maui/blob/main/LICENSE">
-					MIT License
-				</Link>
-				.
-			</P>
-			<P>For any questions, email tanishqkancharla3@gmail.com.</P>
-		</Prose>
-	)
-}