Files
kithara-studio/frontend
rin.kagamine 2dcb297087 feat: Camelot wheel key colors + BPM gradient for all badges
New musicColors.ts utility:
- getKeyColor(): Maps musical key to Camelot wheel position → hue.
  12 positions × 30° = full color wheel. Major = brighter/more saturated.
  Minor = slightly darker/less saturated. Returns {bg, text, border}.
- getBPMColor(): Gradient from slow (blue, 240°) to fast (red, 0°).
  Default range: 60 BPM → 180 BPM. Configurable via BPMRange.
  Clamps outside range. Returns {bg, text, border}.

Gallery.tsx:
- Ribbons: BPM and key badges now use dynamic HSL colors
- Tiles: Same colored badges in tile footer
- Both use inline styles for bg/text/border

DetailPanel.tsx:
- BPM and key metadata items now show as colored badges
- Same color system as gallery badges

All badges: subtle translucent background, colored text, thin colored border.
Consistent visual language across ribbon, tile, and detail views.
2026-05-29 21:16:47 -04:00
..