diff --git a/packages/ui/src/components/pill-button.tsx b/packages/ui/src/components/pill-button.tsx index 5071bce3..b5764855 100644 --- a/packages/ui/src/components/pill-button.tsx +++ b/packages/ui/src/components/pill-button.tsx @@ -6,12 +6,13 @@ import {type PillVariant, pillVariants} from '@proxy/ui/lib/pill-variants'; /** * The app's button: round, solid and dark for the main action, ghost for any other (Cancel), red * (`destructive`) where it deletes or removes something. A ghost one is also a toggle's option or - * a tab, filled in where it is chosen (`aria-pressed`, or `aria-current` on a link). With a label - * it has no icon of its own; `icon` makes it an icon alone, in a circle, its label for whoever - * can't see it in `aria-label` (`IconButton` adds the tooltip). Where Enter presses it, `enter` - * puts Enter's mark after its label, as on the command bar's cards (`EnterButton`); Chat's send - * button is the mark alone, in a circle. A link drawn as one takes `pillVariants` - * (lib/pill-variants.ts, which says which corners the rest of the app has). + * a tab, filled in where it is chosen (`aria-pressed`, or `aria-current` on a link), and, unlike a + * button, not sinking as it is pressed. With a label it has no icon of its own; `icon` makes it an + * icon alone, in a circle, its label for whoever can't see it in `aria-label` (`IconButton` adds + * the tooltip). Where Enter presses it, `enter` puts Enter's mark after its label, as on the + * command bar's cards (`EnterButton`); Chat's send button is the mark alone, in a circle. A link + * drawn as one takes `pillVariants` (lib/pill-variants.ts, which says which corners the rest of + * the app has). */ export function PillButton({ variant = 'default', @@ -28,7 +29,10 @@ export function PillButton({ // Enter's mark with no label: a circle around it. const alone = enter && (children === undefined || children === null); return ( - + {children} {enter && } diff --git a/packages/ui/src/lib/pill-variants.ts b/packages/ui/src/lib/pill-variants.ts index 64deedcb..cb7f9e23 100644 --- a/packages/ui/src/lib/pill-variants.ts +++ b/packages/ui/src/lib/pill-variants.ts @@ -15,9 +15,10 @@ import {cn} from '@proxy/ui/lib/utils'; export type PillVariant = 'default' | 'ghost' | 'destructive'; // Every pill: its shape, its type, its focus ring, its icons' size, and how it looks pressed, -// turned off or invalid. +// turned off or invalid. Pressed, a button sinks a pixel; a tab or a toggle's option stays put, +// only filling in. const BASE = - "inline-flex shrink-0 items-center justify-center rounded-full border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"; + "inline-flex shrink-0 items-center justify-center rounded-full border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:not-[[role=tab]]:not-[[aria-pressed]]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"; // Each variant's colors. A ghost one that is chosen, a toggle's option pressed (`aria-pressed`) or a // tab open (`aria-current` on a link, `aria-selected` in a tablist), is filled in as it is under