[Patch] UI primitives: Light-theme label/colour bugs found during Storybook-to-Penpot pass #303

Patch request from Laurence Weening (#gd-patch). While rebuilding the widget components in Penpot against the Storybook render (Light and Dark), the items below were found in @goodwidget/ui. They are bugs in the shared primitives, not design differences: fix them at the source, no per-widget workarounds. Penpot mirrors the Storybook render, so nothing on the design side changes.

Items are independent bare flags (no open options). Related but not duplicated: #255 / #291 (Streaming light-theme parity), #254 (design-system gaps), #263 (Streaming QA sweep).

Items

1. Non-primary Button labels render white in Light
   • Where: packages/ui/src/components/Button.tsx (Button wraps non-primary children in <Theme reset>; ButtonFrame is named Button, so the reset children re-enter the light_Button sub-theme and ButtonText resolves to the primary-button white).
   • Symptom: secondary / outline / ghost / text / list labels are white on a transparent background in Light (e.g. the ghost chips in the AI Credits widget are invisible).
   • Fix: make the label colour variant-aware at the source (or stop the reset from re-resolving the Button sub-theme); verify every variant in Light and Dark.

==

2. CircularActionButton hardcodes $grey600 for the pending/disabled label and spinner
   • Where: packages/ui/src/components/CircularActionButton.tsx lines 80 and 105.
   • Symptom: label/spinner are #4b5563 in both themes instead of following the theme.
   • Fix: use a theme token (e.g. the existing dim/secondary text token) so Light and Dark each get a readable colour.

==

3. Horizontal Separator computes to 0px height
   • Where: packages/ui/src/components/Separator.ts. The wrapped Tamagui Separator applies maxHeight: 0 for the horizontal orientation, which clamps the size variants (height: 1/2/4) to 0.
   • Symptom: horizontal dividers are not visible (measured 0px height in Storybook).
   • Fix: make the size variants win over the primitive's clamp, and check muted / primary / vertical too.

==

4. TokenAmount renders empty (0x0) spans in Light
   • Where: packages/ui/src/components/TokenAmount.tsx (TokenAmountText uses color: '$text').
   • Symptom: observed in Storybook Light as 0x0 spans; root cause not yet confirmed (possible unresolved $text token vs $color).
   • Fix: confirm the cause, then fix so amount and token symbol render in both themes.

==

5. Streaming widget inputs fall back to browser defaults
   • Symptom: Input placeholder uses the browser default #757575; Select options show a default 2px outset border.
   • Note: may be partly covered by [GoodBounty-Patch] Streaming widget: light-theme parity and UI structure alignment #255 / fix(streaming-widget): register light/dark surface sub-themes, use WidgetTabs header, and gate off-Base SUP reserve (#255, #263) #291 (Select/Input primitive audit). Check those first and only fix what remains.

Out of scope

• Penpot design files and the design-spec PR ([DRAFT] docs(design-files): ecosystem-wrapper build spec from Penpot #300).
• ChainBadge living in components-test/ instead of packages/ui (separate decision).
• New components or redesigns.

Definition of Done

• Each item fixed in packages/ui and verified in Light and Dark
• Storybook stories cover the affected variants/states in both themes
• pnpm --filter @goodwidget/ui lint and build pass
• PR notes which items were already covered by [GoodBounty-Patch] Streaming widget: light-theme parity and UI structure alignment #255 / fix(streaming-widget): register light/dark surface sub-themes, use WidgetTabs header, and gate off-Base SUP reserve (#255, #263) #291

🤖 Generated with Claude Code