feature: tier themed buttons

[maxbbb]

Fixes APP-3580

What changed

The staking card's action buttons are now themed to match the user's current tier. Getting there cleanly required rewriting the tier visual tokens and reshaping a few adjacent pieces so tier buttons could share primitives with RnbwButton.

Main changes

• MembershipTierButton/: new MembershipTierButtonSurface, MembershipTierButtonText, MembershipTierButton. Mirrors the surface/text/button split used by RnbwButton. Consumed by RnbwStakingCard.
• tierVisuals.ts: replaces the old TIER_VISUALS record in constants.ts. Each tier now exposes typed badge, primaryButton, secondaryButton, progress, labelGradient, and background themes, with accessors (getTierBadgeTheme, getTierPrimaryButtonTheme, etc.). A tier's primary/secondary button themes are derived from its badge tokens.

Other changes (refactors that aren't strictly required for tier buttons)

• RnbwButton/: moves RnbwButtonSurface, RnbwButton (previously RnbwThemedButton), and RnbwHoldToActivateButton into a folder and splits RnbwButtonSurface into a surface + text pair so MembershipTierButton can mirror the same shape.
• rnbwButtonTheme.ts: extracts the gold rnbw button palette out of RnbwButtonSurface so tierVisuals.ts can reuse it.
• ShadowLayers: new component that renders a stack shadows to accommodate tier themed designs for TierBadge and MembershipTierButtonSurface.
• membershipCardTheme.ts + MembershipCard + NotchedMembershipCard: pre-computes the card background as a solid color via getSolidColorEquivalent so shadow views behind tier buttons blend against the real card surface instead of a translucent fill.
• TierProgressBar, TierThemedLabel: updated to the new getTierProgressBarTheme / getTierLabelTheme accessors.

Notes

• The "Other changes" section above isn't strictly needed to ship tier themed buttons, but these changes emerged as I attempted to implement the tier themed buttons, and it would have been particularly messy to try and separate them.
• The black tier's design is still not the real design. It will require an escape hatch out of this theme system with custom components and will be addressed in a followup PR.

Screen recordings / screenshots

What to test

• Staking card renders correctly for all tiers in both light and dark mode.

[maxbbb]

• feature: black tier theming #7361
• feature: staking card design tweaks #7356
• feature: tier themed buttons #7351 👈 (View in Graphite)
• feature: stake card top cutout + tier badge design #7347
• develop

This stack of pull requests is managed by Graphite. Learn more about stacking.

[linear]

APP-3580 Tier adapted buttons

[github-actions]

Launch in simulator or device for f5fbfb5

[github-actions]

Launch in simulator or device for 476df6f

[i1skn]

Overall this looks good, but I think right now we effectively have two parallel button stacks:

• MembershipTierButton / MembershipTierButtonSurface / MembershipTierButtonText
• RnbwButton / RnbwButtonSurface / RnbwButtonText

They look mechanically very similar, and the main difference seems to be where the surface/text theme comes from. I think this could probably collapse into a single reusable ThemedButton primitive that takes a surface theme plus a text theme, with MembershipTierButton and RnbwButton becoming thin wrappers around it. That would reduce duplication and make future themed buttons cheaper to add.

[github-actions]

🧪 Flashlight Performance Report (AWS Device Farm)

🔀 Commit: 1ccad0c

📎 View Artifacts

Metric	Current	Δ vs Baseline
Time to Interactive (TTI)	5593 ms	🔴 +103.4 ms (+1.9%)
Average FPS	56.67	⚪ +0.4 (+0.7%)
Average RAM	394.3 MB	⚪ -0.4 MB (-0.1%)

[github-actions]

Launch in simulator or device for 4c8d120

[github-actions]

Launch in simulator or device for 1ccad0c

[maxbbb]

Overall this looks good, but I think right now we effectively have two parallel button stacks:

• MembershipTierButton / MembershipTierButtonSurface / MembershipTierButtonText
• RnbwButton / RnbwButtonSurface / RnbwButtonText

They look mechanically very similar, and the main difference seems to be where the surface/text theme comes from. I think this could probably collapse into a single reusable ThemedButton primitive that takes a surface theme plus a text theme, with MembershipTierButton and RnbwButton becoming thin wrappers around it. That would reduce duplication and make future themed buttons cheaper to add.

I agree, and I did create them in such a way that a proper abstraction should be easy enough. I think if we're going to have a single API for generally themed buttons, some more thought should be put into and it would be better as a separate PR. For example, the later PR for supporting the black tier had to escape hatch out of some of the elements of the membership button.

A generic properly thought out themed button component / component API is a good idea though and I've made a ticket for creating this here: https://linear.app/rainbow/issue/APP-3668/single-themed-button-component-api

[maxbbb]

Merge activity

• Apr 21, 4:28 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Apr 21, 4:29 PM UTC: @maxbbb merged this pull request with Graphite.