@tanishqkancharla/maui 0.0.67 → 0.0.72

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 primaryClass(scale[9], darkTextOnSolid.has(color) ? onSolidText(scale[9]) : "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/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/ListBox.js

@@ -32,9 +32,12 @@ const item = style(spacing.padding({ x: 4, y: 2 }), text({ size: "sm", fontWeigh
         background: backgroundColor.elementHover,
     },
     "&[data-selected]": {
-        color: colors.accent[9],
+        color: colors.accent[11],
         fontWeight: 500,
     },
+    "&[data-selected]:not([data-disabled]):is(:hover, [data-hovered], [data-focused])": {
+        color: colors.accent[12],
+    },
     "&[data-selected]::after": {
         content: '"✓"',
         position: "absolute",

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/components/Table.js

@@ -69,7 +69,7 @@ const row = style({
     "&[data-selection-mode][data-selected] td": {
         backgroundColor: colors.accent[3],
     },
-    "&[data-disabled]": {
+    "&[data-disabled] td": {
         color: colors.gray[8],
     },
 });
@@ -105,11 +105,11 @@ const selectionCheck = style({
     height: "10px",
     paddingTop: "0.5px",
     paddingLeft: "0.5px",
-    fill: colors.gray[3],
+    fill: "white",
     opacity: 0,
     transform: "scale(0)",
 });
-const selectionCheckbox = style(flex({ alignItems: "center", justifyContent: "center" }), focusRing(`&[data-focus-visible] ${selectionBox}`, shadowVars.control), {
+const selectionCheckbox = style(flex({ alignItems: "center", justifyContent: "center" }), focusRing(`&[data-focus-visible] ${selectionBox}`, shadowVars.control), focusRing(`&[data-selected][data-focus-visible] ${selectionBox}, &[data-indeterminate][data-focus-visible] ${selectionBox}`, shadowVars.selectedControl), {
     position: "relative",
     width: "fit-content",
     cursor: "default",
@@ -129,6 +129,7 @@ const selectionCheckbox = style(flex({ alignItems: "center", justifyContent: "ce
     },
     [`&[data-selected] ${selectionBox}, &[data-indeterminate] ${selectionBox}`]: {
         backgroundColor: colors.accent[9],
+        boxShadow: shadowVars.selectedControl,
     },
     [`&[data-hovered][data-selected] ${selectionBox}, &[data-hovered][data-indeterminate] ${selectionBox}`]: {
         backgroundColor: surfaceWash(colors.gray[12], surfaceMixPercent.hover, colors.accent[9]),

package/dist/components/navigationItem.js

@@ -13,7 +13,10 @@ export const navigationItem = style(spacing.padding({ x: 4, y: 2 }), text({ size
         background: backgroundColor.elementHover,
     },
     "&[aria-current='page']": {
-        color: colors.accent[9],
+        color: colors.accent[11],
         fontWeight: 500,
     },
+    "&[aria-current='page']:hover": {
+        color: colors.accent[12],
+    },
 });

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.67",
+	"version": "0.0.72",
 	"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,17 +26,19 @@ 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 |
+| `isPending` | Shows a current-color indicator beside visible content. Blocks activation and suppresses hover fill while 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 |
 | `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. 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.
+Use primary for an emphasized action, default for a raised neutral control, quiet for a low-emphasis action, and text for an inline-style action without a hover fill. Let Button manage its palette and state colors rather than rebuilding the fill or shadow. For exact treatment, inspect `src/components/Button.tsx` in the installed package as described in [design conventions](../design_conventions.md).
 
-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).
+Prefer plain labels (optionally alongside icons) so Button controls their foreground; see the [composition rule](../design_conventions.md#composition).
+
+The text variant removes horizontal spacing and surface chrome while keeping the control height and focus ring. Use it when an action should align directly with surrounding text; hover changes the foreground, not the fill.
 
 `useButton(props)` is exported for custom focus-tracked buttons; prefer `Button`.
 

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/components/menu.md

@@ -23,7 +23,7 @@ Exactly two children on `MenuTrigger`: **trigger**, then **menu**. Use Maui `But
 </MenuTrigger>
 ```
 
-`isDisabled` on the trigger button blocks open. Escape closes and focus returns to the trigger (`aria-expanded` tracks open state). While open, the Maui `Button` keeps its active fill from RAC `data-pressed` / `aria-expanded`.
+`isDisabled` on the trigger button blocks open. Escape closes and focus returns to the trigger (`aria-expanded` tracks open state).
 
 `placement` defaults to `"bottom start"`. Popover uses `shadow.strong` via `CollectionPopover`.
 

package/skills/maui/references/design_conventions.md

@@ -1,6 +1,6 @@
 # Maui design conventions
 
-Prefer the Maui skill for composition knowledge: how to assemble tokens, components, patterns, and apps. Read every matching reference linked from `SKILL.md` before designing or implementing UI, and reuse its structure, tokens, and interactions. Reach for package source under `"maui/src/patterns"`, `"maui/src/apps"`, or an installed `node_modules` package only when the references do not cover a needed detail.
+Use the matching skill references for Maui's design choices, composition rules, and reusable token patterns. Inspect the installed package's source for tactical questions about props, defaults, state styling, or exact values. Source ships under `node_modules/maui/src/` with the documented npm alias, or `node_modules/@tanishqkancharla/maui/src/` without it. Follow components into their token definitions as needed; current implementation is not a guarantee of contrast or design intent.
 
 Patterns, demo apps, and the gallery `Panel` preview frame are not package components. `Panel` is not on the `"maui"` barrel, in `src/components`, or in the JSX editor catalog. Rebuild reference recipes with barrel exports such as `Button`, `Flex`, and `text(...)`.
 
@@ -24,32 +24,73 @@ State styles key off React Aria attributes (`data-hovered`, `data-selected`, `da
 
 ## Composition
 
-- Use Maui's `Text` component instead of raw `<span>` elements for inline text. Set typography through its `size`, `fontWeight`, `color`, `monospace`, and `tabular` props; see [Text](components/text.md). Keep semantic elements such as headings, paragraphs, labels, and links for their respective roles.
+- Use Maui's `Text` component for standalone inline typography; see [Text](components/text.md). `Text` and `text(...)` set an explicit color by default, overriding inherited variant, selected, or disabled colors. Prefer plain Button labels so the Button controls its foreground. Keep semantic elements such as headings, paragraphs, labels, and links for their respective roles.
 - Hover backgrounds have no transitions. Hover fills such as `backgroundColor.elementHover`, quiet-button washes, and list or row highlights snap instantly. Do not animate `background` or `background-color` on hover with `motion.standard(...)` or a CSS `transition`. Other motion, including tooltips and transforms, is allowed.
 - Simple apps default to a prose column: `style(proseContainerStyle, { width: "100%", marginInline: "auto" })`. `sizing.contentWidth` is that same style. Use it for single-column tools, settings, forms, and reading layouts. Multi-pane or full-bleed apps such as inboxes, calendars, and IDEs are exceptions.
 - Design an intentional empty composition for every list, inbox, search result, or collection. Include copy and, when useful, an action. Do not leave a blank panel.
 
+## Decorative edge strips
+
+When a rounded surface uses a colored edge for emphasis, use a full-height rectangular strip inside a `position: relative; overflow: hidden` container. Keep the radius on the container, not the strip: a CSS left border follows the corners and curls inward. This is a composition recipe for custom UI, not a new component or a change to existing component borders. Keep using `border()` for outlines and dividers.
+
+```tsx
+const surface = style(radius.md, spacing.padding({ all: 6 }), {
+	position: "relative",
+	overflow: "hidden",
+	backgroundColor: colors.orange[3],
+})
+const strip = style({
+	position: "absolute",
+	insetBlock: 0,
+	left: 0,
+	width: "3px",
+	backgroundColor: colors.orange[9],
+	pointerEvents: "none",
+})
+
+function DecoratedSurface() {
+	const surfaceClass = useStyles(surface)
+	const stripClass = useStyles(strip)
+	return (
+		<div className={surfaceClass}>
+			<div aria-hidden="true" className={stripClass} />
+			<Text>Surface content</Text>
+		</div>
+	)
+}
+```
+
 ## Shadows
 
-Use `shadow.control` for interactive control surfaces. It combines two inset
-highlights with a compact outer edge. Use the three-level elevation scale for
-other raised surfaces:
+Use `shadow.control` for interactive control surfaces. Use the three-level elevation scale for other raised surfaces:
 
 - `shadow.subtle` — cards and ordinary raised surfaces
-- `shadow.medium` — tooltips and larger floating panels
+- `shadow.medium` — larger floating panels
 - `shadow.strong` — dropdowns, popovers, and dominant overlays
 
-All three include a 1px ring. Do not also apply `border()`, `borderColor.outline`, or another ring to the same element.
+These shadows include their own edge or ring. Do not also apply `border()`, `borderColor.outline`, or another ring to the same element. Not every floating component uses elevation: reuse its exported styles rather than inferring a shadow from its placement.
 
 Buttons and form-control surfaces use `shadow.control` by default. For compound controls, apply it once to the outer control boundary instead of to every internal button or segment.
 
 ## Focus
 
-`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.
+Use `focusRing()` for Maui's theme-aware keyboard-focus treatment rather than adding a competing outline or box shadow.
+
+**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. Use `spacing.padding(4)` as a starting 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.
+`Flex` and `Gap` take spacing scale steps, not raw pixels. For example, `<Flex row gap={4} padding={4}>` uses the same token for its gap and inset.
 
 Put padding on `Flex` with `padding` or `p`, `px`, `py`, `pt`, `pr`, `pb`, and `pl`; there is no `Padding` component. `alignItems` and `justifyContent` use the same tokens as `flex()` (`start`, `center`, `end`, and others; `justifyContent` also supports `between`, `around`, and `evenly`). `background` is a surface token such as `app`, `element`, or `accent`. `Spacer` grows to fill leftover flex space. `Divider` is a horizontal rule.
 

package/skills/maui/references/tokens.md

@@ -56,12 +56,14 @@ function Row({ children }: { children: React.ReactNode }) {
 
 `colors` is Radix Scales with a brand `accent` (teal in light, violet in dark). Each scale has steps **1–12**. Alpha scales are `colors.grayAlpha`, `colors.accentAlpha`, `colors.blueAlpha`, …
 
+The scale roles below are a starting point, not a contrast guarantee or a state recipe for every component. Use text roles for labels rather than copying a solid fill's step. Check the actual foreground/background pair in light and dark themes, including selected and disabled states; preserve non-color cues for state and status.
+
 | Steps | Use |
 | --- | --- |
 | 1–2 | App / subtle surfaces |
 | 3–5 | Interactive washes |
 | 6–8 | Borders / strong lines |
-| 9–10 | Solid fills (9 rest, 10 hover) |
+| 9–10 | Solid fills |
 | 11–12 | Text (11 secondary, 12 primary) |
 
 ```ts
@@ -74,6 +76,8 @@ colors.blueAlpha[8]
 
 `colorNames` is `"accent"` plus every Radix palette name. `paletteNames` omits `"accent"`. `"blue"` as a `variantColor` is the Radix blue scale, not CSS `blue`.
 
+Brand accent, semantic status, and decorative identity serve different roles. Prefer a component's variant or tone before assembling custom colors; follow the matching component's source when composing similar UI. For example, [Banner](components/banner.md) owns status tones, while [Avatar](components/avatar.md) uses paired decorative colors, not status meanings.
+
 Prefer semantic surfaces over raw scale steps for chrome:
 
 ```ts
@@ -81,14 +85,14 @@ import { background, backgroundColor } from "maui"
 
 backgroundColor.app            // page
 backgroundColor.element        // raised control / card
-backgroundColor.elementHover   // 3.5% gray-12 wash over element
-backgroundColor.elementActive  // 7% wash
+backgroundColor.elementHover   // hovered element surface
+backgroundColor.elementActive  // active element surface
 background.app                 // style objects of the same values
 background.element
 background.accent              // accent[9]
 ```
 
-Hover/active washes use `color-mix` in oklch (`surfaceWash`, transparent by default). **Do not transition `background` / `background-color` on hover.** Quiet `Button` uses `surfaceMixPercent` (6% light / 9% dark, press 2×) with Alpha[9]. Raised `elementHover` is still 3.5% gray-12 over the element surface.
+Alpha washes depend on their backdrop. A quiet control's transparent overlay is not interchangeable with `elementHover`, which is precomposed over the element surface. Reuse the matching component styles rather than recreating its wash. Hover fills snap instantly; see [design conventions](design_conventions.md#composition).
 
 ## Text
 
@@ -115,7 +119,7 @@ text({
 
 Sizes step up on the **Large platform scale** (`:root[data-scale="large"]`, driven by `(pointer: coarse)` under the system preference): `md` is 14px/22px on desktop and 17px/26px on coarse pointers. See `useScale` / `ScaleProvider`.
 
-- `lowContrast` → `gray[11]`, `highContrast` → `gray[12]`, `accent` → `accent[11]`, `onAccent` → white.
+- `lowContrast` → `gray[11]`, `highContrast` → `gray[12]`, `accent` → `accent[11]`, `onAccent` → white. `onAccent` is literal white, not an adaptive foreground for every solid fill.
 - UI sans: `fontFamily` (system ui-sans-serif stack). Mono: Commit Mono with `ss05` smart kerning (`monoFontStyle` / `monospace`).
 - `tabular: true` → `font-variant-numeric: tabular-nums`. NumberField, TableHead, and TableCell turn this on by default. Body copy and Prose stay off.
 - `baseTextStyle` is md / 400 / highContrast — already on `html, body`.
@@ -178,13 +182,12 @@ shadowVars.control | .subtle | .medium | .strong // raw box-shadow strings
 tintedSubtle(color)                             // subtle ring+blur tinted from a fill
 ```
 
-`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.**
+For elevation choice, compound control boundaries, and avoiding doubled rings, follow the [shadow conventions](design_conventions.md#shadows).
 
 `border(sides, color)`:
 
 - `sides`: `[]` for all sides, or `"top" | "right" | "bottom" | "left"`
-- `color`: `"border"` (gray-12 @ 5%) | `"outline"` (10%) | `"accent"` (`accent[8]`)
+- `color`: `"border"` (subtle separator) | `"outline"` (stronger edge) | `"accent"` (accent edge)
 
 `borderColor.border` / `borderColor.outline` are the raw color strings (hairlines, `borderBottom`).
 
@@ -195,20 +198,14 @@ already includes a 1px ring. **Do not also `border()` the same element.**
 ## Motion
 
 ```ts
-motionDurationMs          // 80
-motionStreamDurationMs    // 80 — Streamdown word fade
-motionEasing              // "ease-in-out"
-motion.standard("opacity", "transform")  // 80ms ease-in-out on those properties
-overlayMotion             // shared tooltip, dialog, backdrop, and reduced timings
+motion.standard("opacity", "transform")  // shared transition style
+motionDurationMs          // standard duration
+motionStreamDurationMs    // streaming text duration
+motionEasing              // standard easing
+overlayMotion             // overlay and reduced-motion presets
 ```
 
-Use `motion.standard` for opacity, transform, box-shadow, color. **Never** for hover `background` / `background-color`.
-
-`overlayMotion` defines tooltip enter (120ms entrance curve), tooltip exit
-(80ms ease-in), dialog enter (200ms entrance curve), dialog exit (120ms
-ease-in), backdrop (100ms), and opacity-only reduced motion (80ms). Crossfade
-enter is a 0.3s spring (`bounce` 0.2); exit uses `motionDurationMs` /
-ease-in-out. Streaming markdown uses `motionStreamDurationMs`.
+Use `motion.standard` for opacity, transform, box-shadow, and color, not hover fills; see [design conventions](design_conventions.md#composition). Reuse `overlayMotion` for custom overlay enter/exit and reduced-motion handling; inspect the matching component for how it applies those presets.
 
 ## Sizing and icons
 
@@ -229,7 +226,7 @@ Stroke/fill is `currentColor`. Pass `size` on the icon component; optional `widt
 
 ## Avatar tokens
 
-`avatar.green` / `avatar.orange` / `avatar.pink` each have `background` and `foreground`. The `Avatar` component also uses `accent[4]`/`[11]`. You rarely need these tokens directly.
+`avatar.green` / `avatar.orange` / `avatar.pink` each provide a paired `background` and `foreground`; keep the pair together when using these decorative tokens. Prefer `Avatar` for identity UI rather than choosing its colors manually.
 
 ## Prose tokens
 

package/src/apps/Calendar/Calendar.tsx

@@ -1463,7 +1463,7 @@ const miniDayClass = style(
 	text({ size: "xs", fontWeight: 400, color: "highContrast" }),
 	radius.circle,
 	focusRing(),
-	motion.standard("background-color", "color"),
+	motion.standard("color"),
 	{
 		display: "grid",
 		placeItems: "center",

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,19 +292,27 @@ 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)
 		if (variant === "primary") {
 			return primaryClass(
 				scale[9],
-				darkTextOnSolid.has(color) ? scale[12] : "white",
+				darkTextOnSolid.has(color) ? onSolidText(scale[9]) : "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,
+		)
 	},
 )
 
@@ -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/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/ListBox.tsx

@@ -41,9 +41,12 @@ const item = style(
 			background: backgroundColor.elementHover,
 		},
 		"&[data-selected]": {
-			color: colors.accent[9],
+			color: colors.accent[11],
 			fontWeight: 500,
 		},
+		"&[data-selected]:not([data-disabled]):is(:hover, [data-hovered], [data-focused])": {
+			color: colors.accent[12],
+		},
 		"&[data-selected]::after": {
 			content: '"✓"',
 			position: "absolute",

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/components/Table.tsx

@@ -111,7 +111,7 @@ const row = style({
 	"&[data-selection-mode][data-selected] td": {
 		backgroundColor: colors.accent[3],
 	},
-	"&[data-disabled]": {
+	"&[data-disabled] td": {
 		color: colors.gray[8],
 	},
 })
@@ -172,7 +172,7 @@ const selectionCheck = style({
 	height: "10px",
 	paddingTop: "0.5px",
 	paddingLeft: "0.5px",
-	fill: colors.gray[3],
+	fill: "white",
 	opacity: 0,
 	transform: "scale(0)",
 })
@@ -180,6 +180,10 @@ const selectionCheck = style({
 const selectionCheckbox = style(
 	flex({ alignItems: "center", justifyContent: "center" }),
 	focusRing(`&[data-focus-visible] ${selectionBox}`, shadowVars.control),
+	focusRing(
+		`&[data-selected][data-focus-visible] ${selectionBox}, &[data-indeterminate][data-focus-visible] ${selectionBox}`,
+		shadowVars.selectedControl,
+	),
 	{
 		position: "relative",
 		width: "fit-content",
@@ -201,6 +205,7 @@ const selectionCheckbox = style(
 		[`&[data-selected] ${selectionBox}, &[data-indeterminate] ${selectionBox}`]:
 			{
 				backgroundColor: colors.accent[9],
+				boxShadow: shadowVars.selectedControl,
 			},
 		[`&[data-hovered][data-selected] ${selectionBox}, &[data-hovered][data-indeterminate] ${selectionBox}`]:
 			{

package/src/components/navigationItem.ts

@@ -18,8 +18,11 @@ export const navigationItem = style(
 			background: backgroundColor.elementHover,
 		},
 		"&[aria-current='page']": {
-			color: colors.accent[9],
+			color: colors.accent[11],
 			fontWeight: 500,
 		},
+		"&[aria-current='page']:hover": {
+			color: colors.accent[12],
+		},
 	},
 )

package/src/pages/BordersTokenPage.tsx

@@ -36,11 +36,11 @@ const borderExamples = [
 		use: "Pane headers and horizontal section breaks.",
 	},
 	{
-		label: 'border(["left"], "accent") + borderLeftWidth',
+		label: "Clipped left accent",
 		sides: ["left"] as BorderSide[],
 		color: "accent" as const,
 		edgeWidth: "2px",
-		use: "Blockquotes and left-edge emphasis bars.",
+		use: "Decorative emphasis on rounded surfaces.",
 	},
 ] as const
 
@@ -119,17 +119,46 @@ export function BordersTokenPage() {
 				</TableBody>
 			</Table>
 
-			<CodeBlock lang="typescript">{`const panel = style(
+			<CodeBlock lang="tsx">{`const panel = style(
 	background.element,
 	border([], "outline"),
 	radius.md,
 )
 
-const blockquote = style(
-	border(["left"], "accent"),
-	{ borderLeftWidth: "2px" },
-	spacing.padding({ left: 12 }),
-)`}</CodeBlock>
+const accentedSurface = style(
+	radius.md,
+	{
+		position: "relative",
+		overflow: "hidden",
+		padding: "16px",
+		backgroundColor: colors.gray[2],
+	},
+)
+const strip = style({
+	position: "absolute",
+	insetBlock: 0,
+	left: 0,
+	width: "2px",
+	backgroundColor: colors.accent[8],
+	pointerEvents: "none",
+})
+
+function DecoratedSurface() {
+	const surfaceClass = useStyles(accentedSurface)
+	const stripClass = useStyles(strip)
+	return (
+		<div className={surfaceClass}>
+			<div aria-hidden="true" className={stripClass} />
+			<Text>Surface content</Text>
+		</div>
+	)
+}`}</CodeBlock>
+			<P>
+				For left-edge emphasis, clip a full-height rectangular accent inside
+				the rounded container instead of using a left border. The container
+				keeps its rounding without curling the accent inward. This is a
+				composition recipe, not a change to existing component borders.
+			</P>
 
 			<Panel style={{ marginTop: "16px" }}>
 				<div
@@ -166,20 +195,13 @@ function BorderExample(props: {
 	color: BorderColor
 	edgeWidth?: string
 }) {
+	const leftAccent = props.sides.length === 1 && props.sides[0] === "left"
 	const className = useStyles(
-		border(props.sides, props.color),
-		props.edgeWidth
-			? style(
-					Object.fromEntries(
-						props.sides.map((side) => [
-							`border${capitalize(side)}Width`,
-							props.edgeWidth,
-						]),
-					),
-				)
-			: undefined,
+		!leftAccent && border(props.sides, props.color),
 		radius.md,
 		style({
+			position: "relative",
+			overflow: "hidden",
 			background: colors.gray[2],
 			padding: "16px",
 			textAlign: "center",
@@ -190,15 +212,26 @@ function BorderExample(props: {
 
 	return (
 		<div>
-			<div className={className}>{props.label}</div>
+			<div className={className}>
+				{leftAccent && (
+					<div
+						aria-hidden="true"
+						style={{
+							position: "absolute",
+							insetBlock: 0,
+							left: 0,
+							width: props.edgeWidth ?? "1px",
+							backgroundColor: colors.accent[8],
+							pointerEvents: "none",
+						}}
+					/>
+				)}
+				{props.label}
+			</div>
 		</div>
 	)
 }
 
-function capitalize(value: string) {
-	return `${value.slice(0, 1).toUpperCase()}${value.slice(1)}`
-}
-
 function SingleEdgeExample() {
 	const className = useStyles(
 		border(["bottom"], "border"),

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/patterns/Sidebar.tsx

@@ -142,7 +142,7 @@ const itemClass = style(navigationItem, focusRing("&:focus-visible"), {
 	backgroundColor: "transparent",
 	color: colors.gray[12],
 	"&[aria-current='page']": {
-		color: colors.accent[9],
+		color: colors.accent[11],
 		fontWeight: 500,
 		backgroundColor: "transparent",
 	},

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,