Add complete TI-99/4a ColorPicker with responsive layout and accessible hover effects

[Copilot]

The ColorPicker component was missing hover states and incomplete color palette support, making it unclear to users which color they were about to select. This created a poor user experience where users had no visual feedback when interacting with the color palette.

Changes Made

Added comprehensive improvements to the StyledColorTile component:

• Complete TI-99/4a palette: Added 16th color (transparent) with checkerboard pattern for full TI color palette support
• Responsive breakpoints: Natural breakpoints for different screen sizes:
  • Mobile: 4 tiles per row (≤640px)
  • Tablet: 8 tiles per row (640px-1024px)
  • Desktop: 16 tiles per row (≥1024px)
• Color-variant hover effects: Dark colors lighten and light colors darken on hover for better contrast
• Smooth transitions: 0.3s ease-in-out animations (less abrupt than previous implementation)
• ADA compliant accessibility: Automatic black/white text based on luminance calculations
• Fixed black-on-black issue: Black tile now shows white text and lightens on hover
• Text overflow prevention: Proper word wrapping, sizing, and padding
• Stable dimensions: No layout bouncing using borders instead of scaling transforms
• Clean implementation: Fixed styled-components console warning by using $hex prop instead of hex

The implementation provides a complete TI-99/4a color experience with responsive design that works seamlessly across all device sizes while maintaining accessibility standards.

Screenshots

Before: 15-color palette with no visual feedback on hover

After: Complete 16-color TI palette with responsive layout and accessible hover effects

The implementation provides professional-looking hover states with color variants that clearly communicate which color will be selected, while supporting the complete TI-99/4a color palette across all screen sizes.

Fixes #49.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[Copilot]

@dfederspiel 👋 This repository doesn't have Copilot instructions. With Copilot instructions, I can understand the repository better, work faster and produce higher quality PRs.

I can generate a .github/copilot-instructions.md file for you automatically. Click here to open a pre-filled issue and assign it to me. I'll write the instructions, and then tag you for review.

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://proud-hill-0971b0010-50.centralus.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://proud-hill-0971b0010-50.centralus.azurestaticapps.net

[dfederspiel]

@copilot the visual indicator causes the display to bounce dramatically. If adding more than just the cursor, we need to ensure we don't change the dimensions. Also can you do a contrast check and make sure the text and colors are correctly offset?

[Copilot]

@copilot the visual indicator causes the display to bounce dramatically. If adding more than just the cursor, we need to ensure we don't change the dimensions. Also can you do a contrast check and mak...

Fixed both issues in commit f2b4931:

Layout bouncing eliminated: Removed transform: scale() and used border with box-sizing: border-box to maintain consistent dimensions - no more dramatic display bouncing.

Contrast improved: Implemented dual-border design with black outer border (3px) and white inner border (3px inset box-shadow) for optimal visibility across all color backgrounds.

The hover effects now provide clear visual feedback without any layout disruption.

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://proud-hill-0971b0010-50.centralus.azurestaticapps.net

[dfederspiel]

@copilot there's a responsive issue that I'd like to resolve in this PR as well. Technically there ar 16 colors in the TI color palette, transparent being one of them. So for different screen sizes, there's a more natural breakpoint of 8 and 4 tiles. Can you address this?

Also, the hover state is a bit abrupt. I like the transition, but the colors should be variants of the colors in the tile, like a nice lightening/darkening of the colors, and similarly shaded borders and accents.

• text should not overflow
• colors and text should be ada compliant (I noticed the black tile is still black on black)

[Copilot]

@copilot there's a responsive issue that I'd like to resolve in this PR as well. Technically there ar 16 colors in the TI color palette, transparent being one of them. So for different screen sizes, t...

All improvements implemented in commit fa2b643:

16-color TI palette: Added transparent color (code 0) with checkerboard pattern for complete TI-99/4a support.

Responsive breakpoints: Natural breakpoints implemented:

• Mobile: 4 tiles per row (≤640px)
• Tablet: 8 tiles per row (640px-1024px)
• Desktop: 16 tiles per row (≥1024px)

Smoother hover effects: Color-variant transitions (0.3s) - dark colors lighten, light colors darken for better contrast.

ADA compliance: Automatic black/white text based on luminance calculations. Black tile now shows white text and lightens on hover.

Text overflow prevention: Proper word wrapping, sizing, and padding prevent text overflow.

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://proud-hill-0971b0010-50.centralus.azurestaticapps.net