c031b77c83
buttons The calendar shipped its own "quiet control" grammar as a page-local set of class strings: 28px tall, 13px text, muted ink that darkens under a light hover wash, ring-free outline focus, and the accent fill reserved for a pressed or current state. The same look was hand-rolled elsewhere with drifting values (/65 ink, /50 washes, ring focus) as className overrides on the kit's Button, against the kit policy. The grammar now lives in the kit as `variant="quiet"`, with the accent fill keyed off `aria-pressed`, `aria-current` and `data-popup-open`, so a control that is on, current, or holding a popup open fills itself. A `size="icon-compact"` names the 28px square the sidebar already used for its compose control; `sm` already had the height for labelled chips. Kit buttons had no focus treatment of their own, so sites that needed one bolted `focus-visible:ring-*` overrides onto the Button. The base now carries a 2px inset outline from a new `ui/focus.ts` constant that raw controls (calendar grid cells, the reaction chip) import too, and the calendar's controls.ts goes away. With both in place the hand-rolled sites collapse onto the variant: the calendar's header, month picker and day panel; the statistics month navigator; the sidebar's section actions and compose and mobile menu controls; the memo card's trailing actions and its action menu, which no longer takes a className; the share-image dialog's footer; the memo outline; and the inactive underline tab. The month title fills while its picker is open and the outline's current heading fills like every other current thing. Tests follow the classes they assert.
57 lines
2.7 KiB
TypeScript
57 lines
2.7 KiB
TypeScript
import { Button as ButtonPrimitive } from "@base-ui/react/button";
|
|
import { cva, type VariantProps } from "class-variance-authority";
|
|
import * as React from "react";
|
|
import { cn } from "@/lib/utils";
|
|
import { FOCUS_VISIBLE_OUTLINE_CLASSES } from "./focus";
|
|
|
|
const buttonVariants = cva(
|
|
cn(
|
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
|
|
FOCUS_VISIBLE_OUTLINE_CLASSES,
|
|
),
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
|
destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
|
|
outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
|
|
secondary: "bg-secondary text-secondary-foreground hover:shadow-xs hover:bg-secondary/80",
|
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
link: "text-primary underline-offset-4 hover:underline",
|
|
// A quiet control in the spirit of Notion and Linear: 13px muted ink that darkens under
|
|
// a light hover wash, and the accent fill reserved for the one state that is "on" —
|
|
// pressed, current, or holding a popup open.
|
|
quiet:
|
|
"text-ui font-normal text-muted-foreground/70 hover:bg-muted/60 hover:text-foreground aria-pressed:bg-accent aria-pressed:text-accent-foreground aria-[current]:bg-accent aria-[current]:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground",
|
|
},
|
|
size: {
|
|
default: "h-8 px-3",
|
|
sm: "h-7 rounded-md gap-1 px-2 has-[>svg]:px-2",
|
|
lg: "h-9 rounded-md px-4",
|
|
icon: "size-8",
|
|
// The 28px square: the height of `sm`, and the sidebar's compose-control square.
|
|
"icon-compact": "size-7",
|
|
"icon-sm": "size-6",
|
|
},
|
|
},
|
|
compoundVariants: [
|
|
// A quiet chip gives its glyph and label a little more air than the kit's tight `sm`.
|
|
{ variant: "quiet", size: "sm", className: "gap-1.5" },
|
|
],
|
|
defaultVariants: {
|
|
variant: "default",
|
|
size: "default",
|
|
},
|
|
},
|
|
);
|
|
|
|
const Button = React.forwardRef<HTMLElement, ButtonPrimitive.Props & VariantProps<typeof buttonVariants>>(
|
|
({ className, variant, size, ...props }, ref) => (
|
|
<ButtonPrimitive ref={ref} data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />
|
|
),
|
|
);
|
|
Button.displayName = "Button";
|
|
|
|
export { Button, buttonVariants };
|
|
export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
|
|
export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
|