← All proposals

Spinner: agentic color variant

Extend the existing PDS v2 Spinner (not a new component).

Extends a PDS componentOpen in Storybook

proposals/Spinner/decisions.md12 lines · View on GitHub

Decisions

  • Extend Spinner, not a new component. color already accepts any CSS color; color='agentic' is one more value. Matches how Erika described it ("a color variant"). Typed 'agentic' | (string & {}) so autocomplete shows the keyword without losing free-form colors.
  • Gradient token: --pds-gradient-ai-active, the same one pds-ai-active-border uses. One value for light and dark (only defined in variables.light.css, no dark override), so both themes use the same gradient.
  • Not an SVG gradient. The token is a CSS linear-gradient() string; SVG strokes can't use it and hardcoding its hex stops in <stop> would break the tokens-only rule. The agentic variant uses CSS boxes with the gradient as background and an alpha mask for ring/arc shapes.
  • Fixed gradient, spinning arc. The arc box rotates and its gradient layer counter-rotates, so colors stay put while the arc moves (as the ring does in the default spinner). Not animating the gradient shift (--pds-animation-duration-ai-active): the arc is already moving.
  • Track: same gradient at 0.3 opacity, matching the default track.
  • Mask data URIs contain stroke='black'. It is alpha-only (never painted), so it is not a color use, but a hex/color grep in handoff may flag it.
  • Open: round arc ends come from the mask's stroke-linecap; confirm at 2x in the smallest sizes.
  • Local mergeClasses and visually-hidden span stand in for v2's mergeClasses and HiddenLabel (not exported by the published package).
  • Two color options under Appearance > color: agentic (gradient) and discovery (--pds-color-status-discovery-fill, light/dark aware). They are options of one control, not separate variants. The Storybook control is a select that maps discovery to the token; the component still takes the token through color. Open: should discovery be a real keyword like agentic?