Skip to content

android: derive full Material3 color scheme from theme tokens - #312

Open
DatScreamer wants to merge 1 commit into
0xSero:mainfrom
DatScreamer:fix/android-material3-color-schemes
Open

android: derive full Material3 color scheme from theme tokens#312
DatScreamer wants to merge 1 commit into
0xSero:mainfrom
DatScreamer:fix/android-material3-color-schemes

Conversation

@DatScreamer

Copy link
Copy Markdown
Contributor

Purpose

Fixes #311. Android's Material3 components were rendering with the default Material Design 3 surface palette because LitterAppTheme only mapped 11 of 36 M3 color roles. This PR derives the full 36-role ColorScheme from the existing Litter theme tokens using Google's official material-color-utilities (the engine behind the Material Theme Builder) as a build-time generator.

Key changes

  • tools/scripts/generate-material-schemes.mjs — reads the same theme JSONs iOS bundles, resolves each to the existing Litter tokens (mirrors LitterResolvedTheme.resolve / iOS ResolvedTheme.init, including the 8-digit #RRGGBBAA → solid fix), seeds a DynamicScheme from those tokens, derives all 36 M3 roles via MaterialDynamicColors, and emits LitterMaterialSchemes.generated.kt.
  • tools/scripts/register-esm.mjs / esm-resolver.mjs — loader hook so Node 24 can consume @material/material-color-utilities@0.4.0's extensionless ESM imports (stays on the latest version).
  • LitterTheme.ktLitterAppTheme builds a complete 36-role ColorScheme from the generated roles, with fallback to the old 11-role mapping if a slug isn't found.
  • Makefile — new material-schemes stamp target wired into android-debug and android-release.
  • CImobile-ci.yml, android-apk-release.yml, android-play-release.yml: Node 24 + generator run in shared-prep, generated file shipped in the generated-mobile-sources artifact.
  • .gitignore*.generated.kt so the build output stays local.

Verification

  • Generator runs against all 85 bundled themes → LitterMaterialSchemes.generated.kt (85 × 36 roles).
  • Verified against material3 1.3.0 source that all 36 role names used are valid params of darkColorScheme/lightColorScheme.
  • Runtime spot-checks: gruvbox-dark primary = #458588 (its 8-digit #45858880 resolves to the intended solid color, matching iOS); studio-light background = #FFFFFF.
  • ./gradlew :app:compileDebugKotlin — BUILD SUCCESSFUL.
  • ./gradlew :app:testDebugUnitTest — BUILD SUCCESSFUL (all existing tests pass).
  • Full assembleDebug produces a launchable APK (native libs, Alpine fs, theme assets); installed and launched on an emulator.

No iOS code or build path is changed (verified: no changes under apps/ios/ or any ios-* Makefile target).

LitterAppTheme only mapped 11 of 36 Material3 color roles, so Material3
components (sheets, dialogs, text fields, chips, cards) fell back to the
baseline M3 surface palette. Add a build-time generator using the official
material-color-utilities (Material Theme Builder engine) to derive every
M3 role from the resolved Litter theme tokens, emit
LitterMaterialSchemes.generated.kt, and consume it in LitterAppTheme.

Adds a Makefile material-schemes stamp wired into android-debug and
android-release, CI generation in shared-prep, and Node 24 setup.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Android: Material3 components render with default M3 surface colors instead of theme tokens

1 participant