Skip to content

feat(settings): add band and character theme color swatches - #101

Merged
Exmeaning merged 1 commit into
mainfrom
arena/4a1dff8b-moenotes
Nov 7, 2026
Merged

Exmeaning merged 1 commit into
mainfrom
arena/4a1dff8b-moenotes

Conversation

@Exmeaning

Copy link
Copy Markdown
Member

Summary

  • Extend getBuildThemeBands (src/lib/masterdata/build-settings.ts) to include every playable character's mainColorCode grouped under their band in stage displayOrder (while filtering out non-playable NPC entries such as id: 1001 with placeholder #FFFFFF colors).
  • Add a shared Material Design 3 AccentColorPicker (src/components/shared/AccentColorPicker.tsx) used by both SettingsDrawer and DesignSystemPage:
    • Compact top MD3 selection pill for the default MoeNotes seed (#4C9DF0).
    • One compact, high-density row per band ([Band emblem swatch | 5 Character face swatches]) with roving-tabindex radio navigation and shape-morphing MD3 swatches.
  • Expand tests/settings-theme.test.ts to verify MD3 token generation and WCAG 4.5:1 contrast ratios across all 5 band colors and all 25 playable character colors, plus add tests/accent-color-picker.test.tsx.

Verification

  • bun test (1,006 passed across 118 test files)
  • bun run check
  • bun run check:search-seo
  • bun run lint

@Exmeaning
Exmeaning merged commit b1d25d7 into main Nov 7, 2026
3 checks passed
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.

1 participant