@tanishqkancharla/maui 0.0.66 → 0.0.70

package/dist/components/Button.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { type ButtonProps as RACButtonProps } from "react-aria-components";
 import { type ColorName } from "../tokens/colors";
-export type ButtonVariant = "default" | "quiet" | "primary";
+export type ButtonVariant = "default" | "quiet" | "primary" | "text";
 export type ButtonSize = "default" | "sm";
 /**
  * @internal Shared shell under every Button variant (no fill, no hover).

package/dist/components/Button.js

@@ -132,6 +132,11 @@ const buttonClass = style(buttonBaseClass, {
         backgroundColor: backgroundColor.elementHover,
     },
 });
+const textButtonSpacingClass = style({
+    "&, &:has(> svg), &:has([data-button-content] > svg), &:has(> svg:first-child:not(:only-child)), &:has([data-button-content] > svg:first-child:not(:only-child)), &:has(> svg:last-child:not(:only-child)), &:has([data-button-content] > svg:last-child:not(:only-child)), &:has(> svg:only-child), &:has([data-button-content] > svg:only-child), &[data-pending]": {
+        padding: 0,
+    },
+});
 function paletteAlpha(name) {
     return colors[`${name}Alpha`];
 }
@@ -141,7 +146,9 @@ const quietClass = memoize((color, hoverColor, wash) => style(buttonBaseClass, f
     boxShadow: "none",
     "&:hover:not(:disabled):not([data-pending])": {
         color: hoverColor,
-        backgroundColor: surfaceWash(wash, surfaceMixPercent.hover),
+        backgroundColor: wash
+            ? surfaceWash(wash, surfaceMixPercent.hover)
+            : "transparent",
     },
     "&:disabled": disabledQuiet,
 }));
@@ -214,13 +221,13 @@ const coloredButtonClass = memoize((variant, color) => {
             // 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);
+        return quietClass(fill, darkerFill(fill), variant === "quiet" ? fill : undefined);
     }
     const scale = paletteFill(color);
     if (variant === "primary") {
         return primaryClass(scale[9], darkTextOnSolid.has(color) ? scale[12] : "white", paletteAlpha(color)[6]);
     }
-    return quietClass(scale[11], scale[12], paletteAlpha(color)[9]);
+    return quietClass(scale[11], scale[12], variant === "quiet" ? paletteAlpha(color)[9] : undefined);
 });
 export function useButton(props, forwardedRef) {
     const ref = useObjectRef(forwardedRef);
@@ -243,7 +250,7 @@ export function useButton(props, forwardedRef) {
 }
 /** `root` goes on the RAC `Button` (native `:hover` / `:focus-visible` / `:disabled`; icons are direct `> svg` children); `label` goes on a `<span>` wrapping each text run. */
 export const buttonStyles = {
-    root: memoize(({ variant = "default", size = "default", variantColor, } = {}) => style(buttonVariantClass(variant, variantColor), size === "sm" && smallButtonClass)),
+    root: memoize(({ variant = "default", size = "default", variantColor, } = {}) => style(buttonVariantClass(variant, variantColor), size === "sm" && smallButtonClass, variant === "text" && textButtonSpacingClass)),
     label: buttonTextClass,
 };
 export const Button = React.forwardRef(function Button(props, forwardedRef) {
@@ -282,6 +289,9 @@ function buttonVariantClass(variant, variantColor) {
     if (variant === "primary") {
         return coloredButtonClass("primary", variantColor ?? "accent");
     }
+    if (variant === "text") {
+        return coloredButtonClass("text", variantColor ?? "gray");
+    }
     if (variant === "quiet" && variantColor) {
         return coloredButtonClass("quiet", variantColor);
     }

package/dist/components/Dialog.js

@@ -73,10 +73,14 @@ const dialog = style({
 const title = style(text({ size: "lg", fontWeight: 600 }), {
     margin: 0,
 });
+// A scrolling box clips on both axes. The inset, offset by a negative margin,
+// keeps the rings and focus glow of full-width fields visible without moving them.
 const body = style({
     minWidth: 0,
     minHeight: 0,
     overflowY: "auto",
+    margin: `calc(-1 * ${spacing.value(3)})`,
+    padding: spacing.value(3),
 });
 const actions = style({
     display: "flex",

package/dist/components/Editor.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { EditorContent } from "@tiptap/react";
 import { style, useStyles } from "purse-styles";
 import { colors } from "../tokens/colors";
-import { proseHtml } from "../tokens/prose";
+import { proseHtml, proseRhythm } from "../tokens/prose";
 import { cls } from "../utils/cls";
 /**
  * Maui-styled TipTap surface. Create the editor with TipTap's useEditor;
@@ -11,7 +11,7 @@ import { cls } from "../utils/cls";
  * through TipTap's editorProps.attributes.
  */
 export function Editor({ size = "md", className, ...props }) {
-    const surfaceClassName = useStyles(editorClass, proseHtml(size));
+    const surfaceClassName = useStyles(editorClass, proseHtml(size), proseRhythm(size, "& > .ProseMirror"));
     return (_jsx(EditorContent, { ...props, className: cls("maui-editor-prose", surfaceClassName, className) }));
 }
 const editorClass = style({
@@ -23,7 +23,7 @@ const editorClass = style({
         // proseHtml styles descendants; its block rhythm belongs on the document.
         display: "flex",
         flexDirection: "column",
-        gap: "inherit",
+        gap: 0,
     },
     "& .ProseMirror p.is-editor-empty:first-child::before": {
         color: colors.gray[9],

package/dist/components/Input.js

@@ -24,9 +24,6 @@ const inputClass = style(inputText, focusRing("&:focus-visible", shadowVars.cont
     color: colors.gray[12],
     border: "none",
     background: backgroundColor.element,
-    "&:hover:not(:disabled)": {
-        background: backgroundColor.elementHover,
-    },
     "&:disabled": {
         color: colors.gray[8],
         background: colors.gray[2],
@@ -228,9 +225,6 @@ const numberInputClass = style(text({ size: "sm", fontWeight: 400, color: "highC
     border: "none",
     outline: "none",
     background: "transparent",
-    "&:hover:not(:disabled)": {
-        background: backgroundColor.elementHover,
-    },
     "&::placeholder": {
         fontStyle: "italic",
         color: colors.gray[8],

package/dist/components/Select.js

@@ -28,7 +28,7 @@ const trigger = style(text({ size: "sm", fontWeight: 400, color: "highContrast"
     border: "none",
     textAlign: "left",
     background: backgroundColor.element,
-    "&:hover, &[data-pressed]": {
+    "&[data-pressed]": {
         background: backgroundColor.elementHover,
     },
     "&[aria-expanded='true']": {

package/dist/components/Slider.js

@@ -44,7 +44,7 @@ const thumb = style(focusRing("&[data-focus-visible]", shadowVars.control), {
     width: sliderSize.thumb,
     height: sliderSize.thumb,
     borderRadius: "100%",
-    background: colors.gray[12],
+    background: "#ffffff",
     boxShadow: shadowVars.control,
     "&[data-dragging]": {
         background: colors.accent[11],

package/dist/tokens/prose.d.ts

@@ -4,15 +4,15 @@
  * rhythm tuned for sustained reading. The `Prose` container picks a size and
  * typography components inside it opt into the matching prose treatment.
  *
- * Sizes and spacing are ported from the Tailwind Typography plugin
+ * Type sizes and heading spacing are ported from the Tailwind Typography plugin
  * (https://github.com/tailwindlabs/tailwindcss-typography): `sm` -> 14px base,
  * `md` -> Tailwind's `base` (16px), `lg` -> 18px. Tailwind's em-relative values
  * are resolved to px here so they compose with Maui's px-based tokens.
  *
  * On the Large platform scale (coarse pointers) block font sizes and line
  * heights step up ~1.2x — the same idea as the `text` tokens — so reading
- * content grows with the rest of the UI on touch devices. Block gaps tighten
- * separately (see `blockGaps`).
+ * content grows with the rest of the UI on touch devices. Paragraph gaps stay
+ * at 10px on both scales.
  */
 export type ProseSize = "sm" | "md" | "lg";
 export declare const prose: (size: ProseSize) => {
@@ -32,7 +32,7 @@ export declare const prose: (size: ProseSize) => {
  * `marginBottom` becomes the "hug" gap after a heading; heading `marginTop`
  * becomes the larger break before it.
  */
-export declare const proseRhythm: (size: ProseSize) => import("purse-styles").StyleElement;
+export declare const proseRhythm: (size: ProseSize, selector?: unknown) => import("purse-styles").StyleElement;
 /**
  * Element styles + vertical rhythm for HTML rendered outside React typography
  * components (TipTap's ProseMirror tree, Streamdown markdown output).

package/dist/tokens/prose.js

@@ -10,7 +10,6 @@ const scaledPx = (normal, large) => defineVars({
 }).px;
 const metrics = {
     sm: {
-        blockGap: 16,
         paragraph: { fontSize: scaledPx(14, 17), lineHeight: scaledPx(24, 29) },
         h1: {
             fontSize: scaledPx(30, 36),
@@ -36,11 +35,10 @@ const metrics = {
             marginTop: 20,
             marginBottom: 8,
         },
-        listPadding: 22,
+        listPadding: 20,
         listItemGap: 4,
     },
     md: {
-        blockGap: 20,
         paragraph: { fontSize: scaledPx(16, 19), lineHeight: scaledPx(28, 34) },
         h1: {
             fontSize: scaledPx(36, 43),
@@ -66,11 +64,10 @@ const metrics = {
             marginTop: 24,
             marginBottom: 8,
         },
-        listPadding: 26,
+        listPadding: 24,
         listItemGap: 8,
     },
     lg: {
-        blockGap: 24,
         paragraph: { fontSize: scaledPx(18, 22), lineHeight: scaledPx(32, 38) },
         h1: {
             fontSize: scaledPx(48, 58),
@@ -96,16 +93,11 @@ const metrics = {
             marginTop: 32,
             marginBottom: 8,
         },
-        listPadding: 28,
+        listPadding: 26,
         listItemGap: 12,
     },
 };
-// Slightly tighter reading rhythm on the Large platform scale.
-const blockGaps = defineVars({
-    sm: { default: `${metrics.sm.blockGap}px`, [LARGE_SCALE]: "12px" },
-    md: { default: `${metrics.md.blockGap}px`, [LARGE_SCALE]: "16px" },
-    lg: { default: `${metrics.lg.blockGap}px`, [LARGE_SCALE]: "20px" },
-});
+const blockGap = "10px";
 // Heading weights follow Tailwind's descending scale, capped at Maui's
 // heaviest weight (700).
 const headingColor = colors.gray[12];
@@ -163,23 +155,23 @@ const notHeading = ":not(h1):not(h2):not(h3):not(h4)";
  * `marginBottom` becomes the "hug" gap after a heading; heading `marginTop`
  * becomes the larger break before it.
  */
-export const proseRhythm = memoize((size) => {
+export const proseRhythm = memoize((size, selector = "&") => {
     const m = metrics[size];
     return style({
-        "& > * + *": {
-            marginTop: blockGaps[size],
+        [`${selector} > * + *`]: {
+            marginTop: blockGap,
         },
         // Gap after a heading: hug it to the content that follows.
-        "& > h1 + *": { marginTop: px(m.h1.marginBottom) },
-        "& > h2 + *": { marginTop: px(m.h2.marginBottom) },
-        "& > h3 + *": { marginTop: px(m.h3.marginBottom) },
-        "& > h4 + *": { marginTop: px(m.h4.marginBottom) },
+        [`${selector} > h1 + *`]: { marginTop: px(m.h1.marginBottom) },
+        [`${selector} > h2 + *`]: { marginTop: px(m.h2.marginBottom) },
+        [`${selector} > h3 + *`]: { marginTop: px(m.h3.marginBottom) },
+        [`${selector} > h4 + *`]: { marginTop: px(m.h4.marginBottom) },
         // Break before a heading (only when it opens a new section, i.e. it
         // isn't already hugging a preceding heading).
-        [`& > ${notHeading} + h1`]: { marginTop: px(m.h1.marginTop) },
-        [`& > ${notHeading} + h2`]: { marginTop: px(m.h2.marginTop) },
-        [`& > ${notHeading} + h3`]: { marginTop: px(m.h3.marginTop) },
-        [`& > ${notHeading} + h4`]: { marginTop: px(m.h4.marginTop) },
+        [`${selector} > ${notHeading} + h1`]: { marginTop: px(m.h1.marginTop) },
+        [`${selector} > ${notHeading} + h2`]: { marginTop: px(m.h2.marginTop) },
+        [`${selector} > ${notHeading} + h3`]: { marginTop: px(m.h3.marginTop) },
+        [`${selector} > ${notHeading} + h4`]: { marginTop: px(m.h4.marginTop) },
     });
 });
 /**
@@ -194,7 +186,7 @@ export const proseHtml = memoize((size) => {
     return style({
         display: "flex",
         flexDirection: "column",
-        gap: blockGaps[size],
+        gap: blockGap,
         "& p": {
             ...block(m.paragraph),
             fontWeight: 400,

package/package.json

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

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

@@ -10,6 +10,7 @@ Styled React Aria `Button` (default `type="button"`). Consumes `ButtonContext`,
 <Button>Save</Button>
 <Button variant="quiet">Cancel</Button>
 <Button variant="quiet" variantColor="accent">Quiet accent</Button>
+<Button variant="text">Text action</Button>
 <Button variant="primary" variantColor="blue">Create</Button>
 <Button variant="primary" variantColor="#6366f1">Indigo</Button>
 <Button size="sm">Compact</Button>
@@ -25,8 +26,8 @@ Styled React Aria `Button` (default `type="button"`). Consumes `ButtonContext`,
 | Prop | Notes |
 | --- | --- |
 | `size` | `"default"` (28px) \| `"sm"` (24px with 10px text and 14px icons). Large/touch scale keeps both at a 40px target |
-| `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; when set, tints the label with no fill |
+| `variant` | `"default"` (raised element) \| `"quiet"` (transparent, hover wash) \| `"text"` (transparent, color-only hover) \| `"primary"` (solid fill) |
+| `variantColor` | Palette name or opaque `#hex` / `rgb(...)`. Primary defaults to `"accent"`; quiet and text default to gray and tint the label/icon when set |
 | `isDisabled` | React Aria name. Maps to native `disabled`. **No `disabled` React prop** |
 | `isPending` | Shows a current-color indicator beside visible content: `xs` (14px) by default, `2xs` (12px) for small buttons, with equal leading/top/bottom insets. Crossfades content and resizes over 150ms in both directions; reduced motion switches instantly. Blocks activation immediately and suppresses hover fill, retaining focusability and variant color. Controlled by the caller, not by returned promises |
 | `pendingLabel` | Optional visible string replacing children while pending (e.g. `"Saving…"`). Omit to keep children; provide it to replace an icon with progress text |
@@ -37,6 +38,8 @@ Primary: fill step 9, light text (`onAccent`, or step 12 on amber/lime/mint/sky/
 
 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).
 
+Text: zero padding in both sizes, including icons and pending content; retains the control height and focus ring. No background or resting shadow. Only the label/icon color changes on hover (palette step 11 → 12, or a darker custom color). Disabled and pending suppress hover changes.
+
 `useButton(props)` is exported for custom focus-tracked buttons; prefer `Button`.
 
 ## `Overlay`
@@ -93,5 +96,5 @@ Edge-anchored mobile nav is [`Drawer`](drawer.md), not this Dialog and not Overl
 - `modal({ size })` — RAC `Modal`; `size` is `"sm"` (default) | `"md"` | `"lg"`.
 - `dialog` — RAC `Dialog`.
 - `title` — RAC `Heading slot="title"`.
-- `body` — scrollable `div` inside the dialog.
+- `body` — scrollable `div` inside the dialog. A 6px inset, offset by a negative margin, keeps full-width field rings and focus glows unclipped.
 - `actions` — button row `div` inside the dialog.

package/skills/maui/references/components/form-controls.md

@@ -64,7 +64,7 @@ Controlled: `selected` + `onChange`. **`label` is required.**
 
 **TextField** — `textFieldStyles`
 - `root` — field wrapper around the input and error.
-- `input({ size, keyboardHint })` — RAC `Input`; `:hover`, `:disabled`, `aria-invalid`, `:focus-visible`, `::placeholder`.
+- `input({ size, keyboardHint })` — RAC `Input`; `:disabled`, `aria-invalid`, `:focus-visible`, `::placeholder`.
 - `frame` — relative wrapper around the input when a keyboard hint is shown.
 - `keyboardHint` — Maui `Kbd variant="quiet"` inside `frame`.
 - `error` — RAC `FieldError`.
@@ -76,7 +76,7 @@ Controlled: `selected` + `onChange`. **`label` is required.**
 
 **NumberField** — `numberFieldStyles`
 - `root` — RAC `Group`; `:has(:focus-visible)`, `:has(input:disabled)`, `:has(input[aria-invalid='true'])`; styles the stepper `button`s inside a `.number-stepper` wrapper, so it needs that markup.
-- `input` — RAC `Input`; `:hover`, `:disabled`, `::placeholder`.
+- `input` — RAC `Input`; `:disabled`, `::placeholder`.
 
 **QuietTextField** — `quietTextFieldStyles`
 - `input({ keyboardHint })` — RAC `Input`; `:hover`, `:disabled`, `aria-invalid`, `:focus-visible`, `::placeholder`.

package/skills/maui/references/design_conventions.md

@@ -47,6 +47,18 @@ Buttons and form-control surfaces use `shadow.control` by default. For compound
 
 `focusRing()` applies a theme-aware Radix blue shadow with a `blueAlpha[8]` hard edge and `blueAlpha[5]` glow. Do not add a competing outline or box shadow for keyboard focus.
 
+**Control safe area.** Input and form-control shadows paint outside the component's layout box; reserve room for the resting, hovered, and keyboard-focused states, even when hover does not change the background. The focus treatment includes a 1px ring and a 6px blur. Use `spacing.padding(4)` (9px) as a practical safe inset between controls and clipping edges, and leave gaps between neighboring controls. Keep overflow visible on immediate wrappers; when a panel, rounded container, or scroll viewport must clip, put the safe inset inside that clipping boundary, not outside it as margin. Check the first and last controls at scroll edges, including checkbox, radio, switch, and slider focus states. Do not remove shadows or focus rings to fit a tight layout.
+
+```tsx
+// Keep the control's visual overflow inside the scrolling boundary.
+<div style={{ overflow: "auto" }}>
+  <Flex column padding={4} gap={4}>
+    <TextField aria-label="Name" />
+    <Select aria-label="Plan">{/* options */}</Select>
+  </Flex>
+</div>
+```
+
 ## Layout utilities
 
 `Flex` and `Gap` take spacing scale steps (`1 | 2 | 3 | 4 | 6 | 8 | 12 | 16`), not raw pixels. For example, `<Flex row gap={4} padding={4}>` has a 9px gap and 9px inset.

package/src/apps/JsxEditor/catalog.ts

@@ -264,11 +264,11 @@ export const catalog: CatalogComponent[] = [
 	},
 	{
 		name: "Button",
-		info: "Button. default is raised, quiet is borderless, primary fills with accent 9. Works as a MenuTrigger child.",
+		info: "Button. default is raised, quiet adds a hover wash, text changes only color on hover, primary fills with accent 9. Works as a MenuTrigger child.",
 		html: true,
 		attributes: [
 			{ name: "size", values: ["default", "sm"] },
-			{ name: "variant", values: ["default", "quiet", "primary"] },
+			{ name: "variant", values: ["default", "quiet", "primary", "text"] },
 			{
 				name: "variantColor",
 				info: "Palette name (colors[name], primary step 9) or an opaque hex / rgb() fill. Quiet stays transparent; color tints the label. Hover mixes Alpha[9] at 6%/9%.",

package/src/apps/JsxEditor/lint.test.ts

@@ -23,6 +23,13 @@ describe("collectJsxDiagnosticsFromSource", () => {
 		expect(diagnostics).toEqual([])
 	})
 
+	test("accepts a text Button", () => {
+		const diagnostics = collectJsxDiagnosticsFromSource(
+			`<Button variant="text" variantColor="blue">Connect</Button>`,
+		)
+		expect(diagnostics).toEqual([])
+	})
+
 	test("accepts a small Button", () => {
 		const diagnostics = collectJsxDiagnosticsFromSource(
 			`<Button size="sm">Compact</Button>`,
@@ -54,7 +61,7 @@ describe("collectJsxDiagnosticsFromSource", () => {
 		)
 		expect(diagnostics).toHaveLength(1)
 		expect(diagnostics[0]?.message).toBe(
-			`Type '"solid"' is not assignable to type '"default" | "quiet" | "primary"'.`,
+			`Type '"solid"' is not assignable to type '"default" | "quiet" | "primary" | "text"'.`,
 		)
 	})
 
@@ -66,9 +73,9 @@ describe("collectJsxDiagnosticsFromSource", () => {
 			</Flex>`,
 		)
 		expect(formatTypeErrorBanners(diagnostics)).toEqual([
-			`Line 2: Type '"solid"' is not assignable to type '"default" | "quiet" | "primary"'.`,
+			`Line 2: Type '"solid"' is not assignable to type '"default" | "quiet" | "primary" | "text"'.`,
 			`Line 2: Property 'disabled' does not exist on Button.`,
-			`Line 3: Type '"ghost"' is not assignable to type '"default" | "quiet" | "primary"'.`,
+			`Line 3: Type '"ghost"' is not assignable to type '"default" | "quiet" | "primary" | "text"'.`,
 		])
 	})
 

package/src/components/Button.tsx

@@ -30,7 +30,7 @@ import { spacing } from "../tokens/spacing"
 import { text } from "../tokens/text"
 import { memoize } from "../utils/memoize"
 
-export type ButtonVariant = "default" | "quiet" | "primary"
+export type ButtonVariant = "default" | "quiet" | "primary" | "text"
 export type ButtonSize = "default" | "sm"
 
 const buttonShadow = shadowVars.control
@@ -173,18 +173,27 @@ const buttonClass = style(buttonBaseClass, {
 	},
 })
 
+const textButtonSpacingClass = style({
+	"&, &:has(> svg), &:has([data-button-content] > svg), &:has(> svg:first-child:not(:only-child)), &:has([data-button-content] > svg:first-child:not(:only-child)), &:has(> svg:last-child:not(:only-child)), &:has([data-button-content] > svg:last-child:not(:only-child)), &:has(> svg:only-child), &:has([data-button-content] > svg:only-child), &[data-pending]":
+		{
+			padding: 0,
+		},
+})
+
 function paletteAlpha(name: ColorName): ColorScale {
 	return colors[`${name}Alpha`]
 }
 
-const quietClass = memoize((color: string, hoverColor: string, wash: string) =>
+const quietClass = memoize((color: string, hoverColor: string, wash?: string) =>
 	style(buttonBaseClass, focusRing("&:focus-visible"), {
 		color,
 		backgroundColor: "transparent",
 		boxShadow: "none",
 		"&:hover:not(:disabled):not([data-pending])": {
 			color: hoverColor,
-			backgroundColor: surfaceWash(wash, surfaceMixPercent.hover),
+			backgroundColor: wash
+				? surfaceWash(wash, surfaceMixPercent.hover)
+				: "transparent",
 		},
 		"&:disabled": disabledQuiet,
 	}),
@@ -275,7 +284,7 @@ const primaryClass = memoize(
 )
 
 const coloredButtonClass = memoize(
-	(variant: "primary" | "quiet", color: ButtonVariantColor) => {
+	(variant: "primary" | "quiet" | "text", color: ButtonVariantColor) => {
 		if (isCssColor(color)) {
 			const fill = opaqueColor(color)
 			if (variant === "primary") {
@@ -283,7 +292,11 @@ const coloredButtonClass = memoize(
 				return primaryClass(fill, onSolidText(fill), fillShade(fill, 0, 0.35))
 			}
 
-			return quietClass(fill, darkerFill(fill), fill)
+			return quietClass(
+				fill,
+				darkerFill(fill),
+				variant === "quiet" ? fill : undefined,
+			)
 		}
 
 		const scale = paletteFill(color)
@@ -295,7 +308,11 @@ const coloredButtonClass = memoize(
 			)
 		}
 
-		return quietClass(scale[11], scale[12], paletteAlpha(color)[9])
+		return quietClass(
+			scale[11],
+			scale[12],
+			variant === "quiet" ? paletteAlpha(color)[9] : undefined,
+		)
 	},
 )
 
@@ -365,6 +382,7 @@ export const buttonStyles = {
 			style(
 				buttonVariantClass(variant, variantColor),
 				size === "sm" && smallButtonClass,
+				variant === "text" && textButtonSpacingClass,
 			),
 	),
 	label: buttonTextClass,
@@ -510,6 +528,9 @@ function buttonVariantClass(
 	if (variant === "primary") {
 		return coloredButtonClass("primary", variantColor ?? "accent")
 	}
+	if (variant === "text") {
+		return coloredButtonClass("text", variantColor ?? "gray")
+	}
 	if (variant === "quiet" && variantColor) {
 		return coloredButtonClass("quiet", variantColor)
 	}

package/src/components/Dialog.tsx

@@ -115,10 +115,14 @@ const title = style(text({ size: "lg", fontWeight: 600 }), {
 	margin: 0,
 })
 
+// A scrolling box clips on both axes. The inset, offset by a negative margin,
+// keeps the rings and focus glow of full-width fields visible without moving them.
 const body = style({
 	minWidth: 0,
 	minHeight: 0,
 	overflowY: "auto",
+	margin: `calc(-1 * ${spacing.value(3)})`,
+	padding: spacing.value(3),
 })
 
 const actions = style({

package/src/components/Editor.tsx

@@ -1,7 +1,7 @@
 import { EditorContent, type EditorContentProps } from "@tiptap/react"
 import { style, useStyles } from "purse-styles"
 import { colors } from "../tokens/colors"
-import { proseHtml, type ProseSize } from "../tokens/prose"
+import { proseHtml, proseRhythm, type ProseSize } from "../tokens/prose"
 import { cls } from "../utils/cls"
 
 export type EditorProps = Omit<EditorContentProps, "size"> & {
@@ -15,7 +15,11 @@ export type EditorProps = Omit<EditorContentProps, "size"> & {
  * through TipTap's editorProps.attributes.
  */
 export function Editor({ size = "md", className, ...props }: EditorProps) {
-	const surfaceClassName = useStyles(editorClass, proseHtml(size))
+	const surfaceClassName = useStyles(
+		editorClass,
+		proseHtml(size),
+		proseRhythm(size, "& > .ProseMirror"),
+	)
 	return (
 		<EditorContent
 			{...props}
@@ -33,7 +37,7 @@ const editorClass = style({
 		// proseHtml styles descendants; its block rhythm belongs on the document.
 		display: "flex",
 		flexDirection: "column",
-		gap: "inherit",
+		gap: 0,
 	},
 	"& .ProseMirror p.is-editor-empty:first-child::before": {
 		color: colors.gray[9],

package/src/components/Input.tsx

@@ -46,9 +46,6 @@ const inputClass = style(
 		color: colors.gray[12],
 		border: "none",
 		background: backgroundColor.element,
-		"&:hover:not(:disabled)": {
-			background: backgroundColor.elementHover,
-		},
 		"&:disabled": {
 			color: colors.gray[8],
 			background: colors.gray[2],
@@ -376,9 +373,6 @@ const numberInputClass = style(
 		border: "none",
 		outline: "none",
 		background: "transparent",
-		"&:hover:not(:disabled)": {
-			background: backgroundColor.elementHover,
-		},
 		"&::placeholder": {
 			fontStyle: "italic",
 			color: colors.gray[8],

package/src/components/Select.tsx

@@ -46,7 +46,7 @@ const trigger = style(
 		border: "none",
 		textAlign: "left",
 		background: backgroundColor.element,
-		"&:hover, &[data-pressed]": {
+		"&[data-pressed]": {
 			background: backgroundColor.elementHover,
 		},
 		"&[aria-expanded='true']": {

package/src/components/Slider.tsx

@@ -63,7 +63,7 @@ const thumb = style(focusRing("&[data-focus-visible]", shadowVars.control), {
 	width: sliderSize.thumb,
 	height: sliderSize.thumb,
 	borderRadius: "100%",
-	background: colors.gray[12],
+	background: "#ffffff",
 	boxShadow: shadowVars.control,
 	"&[data-dragging]": {
 		background: colors.accent[11],

package/src/pages/ButtonsPage.tsx

@@ -35,7 +35,7 @@ export function ButtonsPage() {
 	return (
 		<Prose style={{ marginBottom: "32px" }}>
 			<H2>Buttons</H2>
-			<H3>Text</H3>
+			<H3>Default</H3>
 			<Flex row alignItems="center" gap={4}>
 				<Button>Button</Button>
 				<Button onClick={() => setDialogOpen(true)}>Open Dialog</Button>
@@ -221,6 +221,35 @@ export function ButtonsPage() {
 				</Button>
 			</Flex>
 
+			<H3>Text</H3>
+			<P>
+				<Code>variant="text"</Code> shows only the label and icon, with no
+				padding, background, or shadow. Hover changes only their color. Use{" "}
+				<Code>variantColor</Code> to tint them.
+			</P>
+			<Flex row alignItems="center" gap={4} style={{ flexWrap: "wrap" }}>
+				<Button variant="text">Text button</Button>
+				<Button variant="text" variantColor="blue">
+					<Plus />
+					Create
+				</Button>
+				<Button variant="text" aria-label="More text actions">
+					<DotsHorizontal />
+				</Button>
+				<Button variant="text" variantColor="#6366f1">
+					Custom color
+				</Button>
+				<Button variant="text" size="sm">
+					Small text
+				</Button>
+				<Button variant="text" isDisabled>
+					Disabled text
+				</Button>
+				<Button variant="text" isPending>
+					Pending text
+				</Button>
+			</Flex>
+
 			<H3>Icons with text</H3>
 			<Flex row alignItems="center" gap={4}>
 				<Button>

package/src/tokens/prose.ts

@@ -11,15 +11,15 @@ import { fontFamily, monoFontStyle } from "./text"
  * rhythm tuned for sustained reading. The `Prose` container picks a size and
  * typography components inside it opt into the matching prose treatment.
  *
- * Sizes and spacing are ported from the Tailwind Typography plugin
+ * Type sizes and heading spacing are ported from the Tailwind Typography plugin
  * (https://github.com/tailwindlabs/tailwindcss-typography): `sm` -> 14px base,
  * `md` -> Tailwind's `base` (16px), `lg` -> 18px. Tailwind's em-relative values
  * are resolved to px here so they compose with Maui's px-based tokens.
  *
  * On the Large platform scale (coarse pointers) block font sizes and line
  * heights step up ~1.2x — the same idea as the `text` tokens — so reading
- * content grows with the rest of the UI on touch devices. Block gaps tighten
- * separately (see `blockGaps`).
+ * content grows with the rest of the UI on touch devices. Paragraph gaps stay
+ * at 10px on both scales.
  */
 export type ProseSize = "sm" | "md" | "lg"
 
@@ -37,7 +37,6 @@ type HeadingMetric = BlockMetric & {
 }
 
 type ProseMetric = {
-	blockGap: number
 	paragraph: BlockMetric
 	h1: HeadingMetric
 	h2: HeadingMetric
@@ -55,7 +54,6 @@ const scaledPx = (normal: number, large: number) =>
 
 const metrics: Record<ProseSize, ProseMetric> = {
 	sm: {
-		blockGap: 16,
 		paragraph: { fontSize: scaledPx(14, 17), lineHeight: scaledPx(24, 29) },
 		h1: {
 			fontSize: scaledPx(30, 36),
@@ -81,11 +79,10 @@ const metrics: Record<ProseSize, ProseMetric> = {
 			marginTop: 20,
 			marginBottom: 8,
 		},
-		listPadding: 22,
+		listPadding: 20,
 		listItemGap: 4,
 	},
 	md: {
-		blockGap: 20,
 		paragraph: { fontSize: scaledPx(16, 19), lineHeight: scaledPx(28, 34) },
 		h1: {
 			fontSize: scaledPx(36, 43),
@@ -111,11 +108,10 @@ const metrics: Record<ProseSize, ProseMetric> = {
 			marginTop: 24,
 			marginBottom: 8,
 		},
-		listPadding: 26,
+		listPadding: 24,
 		listItemGap: 8,
 	},
 	lg: {
-		blockGap: 24,
 		paragraph: { fontSize: scaledPx(18, 22), lineHeight: scaledPx(32, 38) },
 		h1: {
 			fontSize: scaledPx(48, 58),
@@ -141,17 +137,12 @@ const metrics: Record<ProseSize, ProseMetric> = {
 			marginTop: 32,
 			marginBottom: 8,
 		},
-		listPadding: 28,
+		listPadding: 26,
 		listItemGap: 12,
 	},
 }
 
-// Slightly tighter reading rhythm on the Large platform scale.
-const blockGaps = defineVars({
-	sm: { default: `${metrics.sm.blockGap}px`, [LARGE_SCALE]: "12px" },
-	md: { default: `${metrics.md.blockGap}px`, [LARGE_SCALE]: "16px" },
-	lg: { default: `${metrics.lg.blockGap}px`, [LARGE_SCALE]: "20px" },
-})
+const blockGap = "10px"
 
 // Heading weights follow Tailwind's descending scale, capped at Maui's
 // heaviest weight (700).
@@ -216,24 +207,24 @@ const notHeading = ":not(h1):not(h2):not(h3):not(h4)"
  * `marginBottom` becomes the "hug" gap after a heading; heading `marginTop`
  * becomes the larger break before it.
  */
-export const proseRhythm = memoize((size: ProseSize) => {
+export const proseRhythm = memoize((size: ProseSize, selector = "&") => {
 	const m = metrics[size]
 
 	return style({
-		"& > * + *": {
-			marginTop: blockGaps[size],
+		[`${selector} > * + *`]: {
+			marginTop: blockGap,
 		},
 		// Gap after a heading: hug it to the content that follows.
-		"& > h1 + *": { marginTop: px(m.h1.marginBottom) },
-		"& > h2 + *": { marginTop: px(m.h2.marginBottom) },
-		"& > h3 + *": { marginTop: px(m.h3.marginBottom) },
-		"& > h4 + *": { marginTop: px(m.h4.marginBottom) },
+		[`${selector} > h1 + *`]: { marginTop: px(m.h1.marginBottom) },
+		[`${selector} > h2 + *`]: { marginTop: px(m.h2.marginBottom) },
+		[`${selector} > h3 + *`]: { marginTop: px(m.h3.marginBottom) },
+		[`${selector} > h4 + *`]: { marginTop: px(m.h4.marginBottom) },
 		// Break before a heading (only when it opens a new section, i.e. it
 		// isn't already hugging a preceding heading).
-		[`& > ${notHeading} + h1`]: { marginTop: px(m.h1.marginTop) },
-		[`& > ${notHeading} + h2`]: { marginTop: px(m.h2.marginTop) },
-		[`& > ${notHeading} + h3`]: { marginTop: px(m.h3.marginTop) },
-		[`& > ${notHeading} + h4`]: { marginTop: px(m.h4.marginTop) },
+		[`${selector} > ${notHeading} + h1`]: { marginTop: px(m.h1.marginTop) },
+		[`${selector} > ${notHeading} + h2`]: { marginTop: px(m.h2.marginTop) },
+		[`${selector} > ${notHeading} + h3`]: { marginTop: px(m.h3.marginTop) },
+		[`${selector} > ${notHeading} + h4`]: { marginTop: px(m.h4.marginTop) },
 	})
 })
 
@@ -250,7 +241,7 @@ export const proseHtml = memoize((size: ProseSize) => {
 	return style({
 		display: "flex",
 		flexDirection: "column",
-		gap: blockGaps[size],
+		gap: blockGap,
 		"& p": {
 			...block(m.paragraph),
 			fontWeight: 400,