PDS proposals
← All proposals

Spinner: agentic color variant

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

Extends a PDS componentOpen in Storybook

proposals/Spinner/custom.md27 lines · View on GitHub

Custom and net-new: Spinner

Everything in this proposal that is not plain PDS v2. npm run check:tokens reads this file: each net-new class, custom CSS variable and raw value found in the code must appear here in backticks.

Net-new components

None.

Additions to existing PDS components

  • On .pds-spinner: .pds-spinner--agentic, .pds-spinner__avatar, .pds-spinner__bolt, .pds-spinner__gradient-arc, .pds-spinner__gradient-rotator, .pds-spinner__gradient-track, .pds-spinner__with-avatar

Net-new props

hasAvatar (boolean) on Spinner, which shows the Zappy bolt inside the ring. New value for the existing color prop: agentic.

Custom CSS variables

  • --spinner-arc-mask — set on .pds-spinner--agentic
  • --spinner-bolt-mask — set on .pds-spinner__bolt
  • --spinner-color — set on .pds-spinner
  • --spinner-ring-mask — set on .pds-spinner--agentic

Raw values kept on purpose

  • black in the mask data URIs (fill='black' and stroke='black'): alpha-only, never painted, so it is not a color use. The port can keep it.