[deamybro]

Summary

Fixes #303. Resolves the shared UI primitive rendering and theme resolution bugs identified in @goodwidget/ui during the Storybook-to-Penpot pass, ensuring full parity and readability across both Light and Dark themes.

Changes by Item

1. Non-primary Button labels render white in Light:

   • In packages/ui/src/components/Button.tsx, stopped ButtonFrame from imposing the light_Button sub-theme onto non-primary variants.
   • Bound theme="Button" exclusively to primary buttons (variant === 'primary'). Non-primary variants (secondary, outline, ghost, pill, text, list) now inherit ambient theme text color directly.
   • Made ButtonText variant-aware (primary: $textColor, non-primary: $color), ensuring high-contrast readable text in both Light (#333333) and Dark (#E0E0E0) themes.
   • Added textColor to base light and dark themes in packages/ui/src/theme.ts for consistent token resolution.

2. CircularActionButton hardcoded $grey600:

   • In packages/ui/src/components/CircularActionButton.tsx, replaced hardcoded $grey600 for both the disabled/pending label and the spinner with semantic theme token $colorDim. Adapts dynamically to Light (#555555) and Dark (#888888).

3. Horizontal Separator 0px height clamp:

   • In packages/ui/src/components/Separator.ts, overridden Tamagui's native horizontal maxHeight: 0 clamp with maxHeight: 'none' and explicit height/minHeight/maxHeight per size variant (sm: 1px, md: 2px, lg: 4px), allowing horizontal dividers to render visibly. Checked and preserved vertical mode (vertical: true).

4. TokenAmount empty (0x0) spans in Light:

   • In packages/ui/src/components/TokenAmount.tsx, replaced non-existent $text token with $color on TokenAmountText.
   • Replaced $secondaryColor with $placeholderColor for the secondary variant.

5. Streaming widget inputs falling back to browser defaults:

   • In packages/ui/src/components-test/Input.tsx, added placeholderTextColor: '$placeholderColor' to InputFrame so input placeholders resolve cleanly against the theme instead of browser-default grey (#757575).
   • In packages/ui/src/components-test/Select.tsx, added borderWidth: 0, borderColor: 'transparent', and outlineWidth: 0 to OptionItem to remove the default 2px outset button border.

Relation to #255 / #291

• PR fix(streaming-widget): register light/dark surface sub-themes, use WidgetTabs header, and gate off-Base SUP reserve (#255, #263) #291 registered surface sub-themes and tab headers within packages/streaming-widget.
• This PR addresses the core primitive source definitions in @goodwidget/ui, resolving all remaining styling and theme fallback bugs at the source as requested.

Storybook Coverage

• Added examples/storybook/src/stories/design-system/Button.stories.tsx covering all 7 button variants across Light and Dark themes side-by-side.
• Added examples/storybook/src/stories/design-system/Separator.stories.tsx covering all horizontal sizes, colors, and vertical orientation.
• Extended examples/storybook/src/stories/design-system/TokenAmount.stories.tsx with dedicated LightTheme and DarkTheme stories.

Verification

• pnpm --filter @goodwidget/ui lint: PASS (0 errors)
• pnpm --filter @goodwidget/ui build: PASS (100% clean tsup build, ESM + CJS + DTS)
• Git line endings: Strictly preserved LF (core.autocrlf false) with zero noise diffs.

---

Payout Coordinates: 0x759797593fed8f313d8fdba7a3a0d491f0e4b9f7 (USDC on Base L2)

[Copilot]

🔵 Needs a closer look

Review could not proceed because the required external GoodDollar contribution guidelines could not be retrieved with the available tools.

No open issues 🎉

What changed in this PR

Updates shared @goodwidget/ui primitives to address the light/dark rendering issues in #303, complementing the streaming-widget theme changes in #291.

Changes:

• Adjusts button theme selection and semantic text colors for buttons and token amounts.
• Updates separator sizing, input placeholder colors, and select option styling.
• Adds light/dark Storybook coverage for buttons, separators, and token amounts.

File	Description
packages/​ui/​src/​theme.ts	Adds textColor fields to base and component themes.
packages/​ui/​src/​components/​TokenAmount.tsx	Changes primary and secondary text color tokens.
packages/​ui/​src/​components/​Separator.ts	Overrides horizontal height clamps and adjusts vertical constraints.
packages/​ui/​src/​components/​CircularActionButton.tsx	Uses semantic colors for disabled/pending labels and spinners.
packages/​ui/​src/​components/​Button.tsx	Changes frame theme selection and adds variant-aware label styles.
packages/​ui/​src/​components-test/​Select.tsx	Removes default option borders and outlines.
packages/​ui/​src/​components-test/​Input.tsx	Adds a themed placeholder color.
examples/​storybook/​src/​stories/​design-system/​TokenAmount.stories.tsx	Adds dedicated light and dark amount stories.
examples/​storybook/​src/​stories/​design-system/​Separator.stories.tsx	Adds stories for sizes, colors, and orientations in both themes.
examples/​storybook/​src/​stories/​design-system/​Button.stories.tsx	Adds all-variant stories and a side-by-side theme comparison.

_{Review effort: Balanced}