recipes

1// Shared class recipes composed via cn() from ../utils.
2 
3/** Focus outline via --focus-ring-color / --focus-ring-width / --focus-ring-offset. */
4export const focusRing =
5  "outline-none focus-visible:[outline-style:solid] " +
6  "focus-visible:outline-[length:var(--focus-ring-width)] " +
7  "focus-visible:outline-[var(--focus-ring-color)] " +
8  "focus-visible:outline-offset-[var(--focus-ring-offset)]";
9 
10/** Compact keyboard-focus indicator for non-editable controls. */
11export const selectionFocus =
12  "outline-none focus-visible:outline-none focus-visible:shadow-[inset_0_-2px_0_var(--focus-ring-color)] " +
13  "has-focus-visible:outline-none has-focus-visible:shadow-[inset_0_-2px_0_var(--focus-ring-color)]";
14 
15/** Filled editable-control surface, hover step, and keyboard focus outline. */
16export const fieldControl =
17  "bg-fill-1 [&:not([data-readonly]):hover:not(:focus-within)]:bg-fill-2 " +
18  "[&:not([data-readonly]):focus-within]:bg-layer-1 " +
19  "outline-none [&:not([data-readonly])]:has-focus-visible:[outline-style:solid] " +
20  "[&:not([data-readonly])]:has-focus-visible:outline-[length:var(--focus-ring-width)] " +
21  "[&:not([data-readonly])]:has-focus-visible:outline-[var(--focus-ring-color)] " +
22  "[&:not([data-readonly])]:has-focus-visible:outline-offset-0 " +
23  "transition-[color,background-color,outline-color] duration-[var(--duration-state)] ease-[var(--ease-standard)]";
24 
25/** Static surface for selectable, non-editable field values. */
26export const readOnlyFieldControl =
27  "data-readonly:bg-fill-1 data-readonly:text-ink-muted " +
28  "data-readonly:has-focus-visible:bg-fill-2 " +
29  "data-readonly:has-focus-visible:[outline-style:solid] " +
30  "data-readonly:has-focus-visible:outline-[length:var(--focus-ring-width)] " +
31  "data-readonly:has-focus-visible:outline-[var(--focus-ring-color)] " +
32  "data-readonly:has-focus-visible:outline-offset-0";
33 
34/** Control heights + padding + icon gap + text for sm/md/lg. */
35export const controlSize: Record<"sm" | "md" | "lg", string> = {
36  sm: "h-6 px-2.5 gap-1.5 text-mini font-medium",
37  md: "h-8 px-3.5 gap-2 text-small font-medium",
38  lg: "h-10 px-4 gap-2 text-regular font-medium",
39};
40 
41/** Invisible 24px pointer floor, expanding to a preferred 44px touch area. */
42export const coarseTarget =
43  "relative after:absolute after:left-1/2 after:top-1/2 after:size-full " +
44  "after:min-h-6 after:min-w-6 after:-translate-x-1/2 after:-translate-y-1/2 " +
45  "pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11";
46 
47// … truncated