hanzo.ai/components/shell/pill.ts

/**
 * The focus ring, on the control a person can see. A field with its chrome off
 * (@hanzo/composer's `Field`) has no edge to ring, so the row around it wears
 * the ring instead.
 *
 * A shadow rather than an outline: it eases in over `quickest`, and it lands
 * flush on the row's edge where an offset outline would draw a second ring
 * beside the composer's band. `--ring` is @hanzo/design's focus indicator:
 * 40% white on dark, 50% black on light, 3:1 against either ground (WCAG
 * 1.4.11). The rest value is the same ring at zero alpha, because `none` does
 * not interpolate.
 */
export const RING = {
  boxShadow: '0 0 0 2px transparent',
  focusWithinStyle: { boxShadow: '0 0 0 2px var(--ring)' },
  transition: 'quickest',
} as const

/**
 * The composer's panel: one row on the chrome's glass, ringed on focus. It is
 * what every @hanzo/composer host on this site puts inside `Composer`.
 */
export const PILL = {
  items: 'center',
  gap: '$1.5',
  p: '$1',
  rounded: 9999,
  bg: 'var(--chrome)',
  backdropFilter: 'var(--chrome-blur)',
  touchAction: 'manipulation',
  ...RING,
} as const