Skip to content

Move payment icons from luminance-based selection to ThemeMode behind a feature flag - #15029

Merged
toluo-stripe merged 6 commits into
masterfrom
tolu/appearance/disable_luminance
Oct 16, 2026
Merged

toluo-stripe merged 6 commits into
masterfrom
tolu/appearance/disable_luminance

Conversation

@toluo-stripe

@toluo-stripe toluo-stripe commented Oct 15, 2026 •

Copy link
Copy Markdown
Contributor

Summary

Move payment icon selection away from component luminance and toward the resolved PaymentSheet.Appearance.themeMode. With FeatureFlags.disableLuminanceBasedThemes enabled, the effective theme determines light/dark artwork, icon URLs, tint, and the inline Affirm logo, even when custom component colors have different brightness.

The flag defaults off.

Icon behavior

With Disable Luminance Check enabled, component brightness does not affect icon selection:

ThemeMode Current system theme Effective theme / color palette Artwork / URL variant Resource tint, when required
Automatic Light Light / colorsLight Light / day Black
Automatic Dark Dark / colorsDark Dark / night White
AlwaysLight Light Light / colorsLight Light / day Black
AlwaysLight Dark Light / colorsLight Light / day Black
AlwaysDark Light Dark / colorsDark Dark / night White
AlwaysDark Dark Dark / colorsDark Dark / night White

Motivation

A dark theme with a bright component background currently selects light-theme artwork and black icon tint. Enabling the flag selects dark-theme artwork and white tint for the same background, allowing icon behavior to be tested independently of custom component colors. Forced AlwaysLight and AlwaysDark modes take precedence over the system theme.

The PaymentOption.icon() fallback also previously consulted the system theme and mutable global colors rather than the supplied appearance. It now honors that appearance consistently.

Testing

  • Added Affirm screenshots: 16 snapshots covering both flag states, light/dark themes, default/large fonts, and default/opposing component colors. Affirm and CardPill verification passed (7 cases), and :payments-ui-core:detekt passed.
  • Added tests: 21 flag-on snapshots across tab, row, and embedded content, covering both font sizes for tabs and rows. Existing flag-off baselines are preserved.
  • Modified tests: cover both flag states with forced themes and opposing component brightness, both icon() and iconPainter, resource/URL selection, and the appearance-based fallback.
  • Manually verified: inspected representative generated snapshots for the expected icon tint changes.

Screenshots

Dark system theme with the bright yellow CrazyAppearance component:

Before / flag off After / flag on
Flag off: black card icon on a bright yellow component Flag on: white card icon on the same bright yellow component

Committed and created by Codex.

toluo-stripe and others added 3 commits October 15, 2026 15:52
Committed-By-Agent: codex
Co-authored-by: codex <noreply@openai.com>
Committed-By-Agent: codex
Co-authored-by: codex <noreply@openai.com>
@toluo-stripe toluo-stripe changed the title Add a debug flag for theme-based payment icons Move payment icons from luminance-based selection to ThemeMode behind a feature flag Oct 15, 2026
@toluo-stripe
toluo-stripe marked this pull request as ready for review October 16, 2026 16:46
@toluo-stripe
toluo-stripe requested review from a team as code owners October 16, 2026 16:46
@toluo-stripe
toluo-stripe merged commit 979c036 into master Oct 16, 2026
49 checks passed
@toluo-stripe
toluo-stripe deleted the tolu/appearance/disable_luminance branch October 16, 2026 17:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants