fix: automatic On Color recalculation in dark mode and add Copilot instructions

[Copilot]

This PR addresses the issue where the "On Color" (text color) was not automatically recalculated when changing origin colors in the Theme Builder, requiring users to manually delete and recalculate the On Color value.

Problem

When users changed origin colors in either light or dark mode, the corresponding on-origin colors (text colors) were not automatically updated to maintain proper contrast ratios. This created accessibility issues and poor user experience.

Solution

Modified the onColorChange handlers in color-picker.tsx to automatically extract and apply the calculated onOriginDarkDefault and onOriginLightDefault values from the generateColorsByOrigin function whenever origin colors change.

Visual Comparison

Before Fix (poor contrast with manual intervention required):

After Fix (excellent contrast with automatic recalculation):

Testing Results

• Dark Mode: Origin color changes to light (#f0f0f0) → on-origin automatically updates to dark (#070707) with excellent contrast ratios (17.68:1, 10.15:1, 13.59:1)
• Light Mode: Origin color changes to dark (#2A2A2A) → on-origin automatically updates to light (#f9f9f9) with excellent contrast ratios (13.63:1, 5.71:1, 9.85:1)
• Edge Cases: Intermediate colors (#808080) work correctly with good contrast ratios (5.10:1, 9.82:1, 7.16:1)

Additional Improvements

Added comprehensive Copilot instructions (.github/copilot-instructions.md) covering:

• Project overview and technology stack
• Architecture and development guidelines
• Color processing and accessibility best practices
• Testing procedures and common development patterns

The fix ensures WCAG compliance and eliminates the need for manual on-color recalculation, providing a seamless user experience when customizing themes.

Fixes #1236.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Copilot]

@mfranzke 👋 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.

[mfranzke]

@copilot please retry

[Copilot]

@copilot please retry

I've created comprehensive Copilot instructions for the theme builder repository in .github/copilot-instructions.md. The instructions cover the project overview, technology stack, architecture, development guidelines, color processing best practices, testing procedures, and common patterns specific to theme builder development.

The instructions include details about:

• React + TypeScript + Vite architecture with Zustand state management
• Color system and accessibility (WCAG compliance with APCA-W3)
• DB UX Design System integration
• Development workflows and testing practices
• Common tasks like adding color features and fixing color issues

Commit: 547f900