UI: Island panel component with light/dark mode system colors

[Copilot]

📝 Popis

Implementace "Island" panel komponenty s moderní estetikou – zaoblené rohy, jemný stín, automatická podpora light/dark režimu přes CSS proměnné.

Komponenta:

• IslandPanel.tsx – hlavní komponenta s header (title, subtitle, actions) a content oblastí
• Využívá CSS variables (--island-bg, --island-text, atd.) bez hard-coded brand barev
• Automatický přepínání light/dark přes @media (prefers-color-scheme)

Demo:

• IslandPanelDemo.tsx – ukázka 5 variant panelu (basic, with title, with actions, nested content)
• Nový "demo" tab v aplikaci pro vizuálníověření

Styling:

/* Light mode */
--island-bg: rgb(255 255 255);
--island-text: rgb(23 23 23);
--island-shadow: rgba(0 0 0 / 0.08);

/* Dark mode (prefers-color-scheme: dark) */
--island-bg: rgb(30 30 30);
--island-text: rgb(250 250 250);
--island-shadow: rgba(0 0 0 / 0.3);

Použití:

<IslandPanel 
  title="Settings" 
  subtitle="Configure preferences"
  actions={<button>Save</button>}
>
  <p>Content here</p>
</IslandPanel>

Screenshots:

Light mode:

Dark mode:

🔗 Související Issue

Fixes #52 (partial)

✅ Checklist

• Kód odpovídá standardům projektu
• Změny jsou zdokumentovány (README.md v ui/)
• Manuální testování proběhlo úspěšně
• Build v CI prošel (TypeScript compile OK)

🧪 Jak otestovat

cd blendmate-app
npm install
npm run dev

Otevři app, klikni na "DEMO" tab. Změň system light/dark mode preference a ověř automatické přepnutí barev panelů.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• https://storage.googleapis.com/chrome-for-testing-public/143.0.7499.4/linux64/chrome-headless-shell-linux64.zip
  • Triggering command: /usr/local/bin/node /usr/local/bin/node /home/REDACTED/.npm/_npx/e41f203b7505f1fb/node_modules/playwright-core/lib/server/registry/oopDownloadBrowserMain.js (http block)
• https://storage.googleapis.com/chrome-for-testing-public/143.0.7499.4/linux64/chrome-linux64.zip
  • Triggering command: /usr/local/bin/node /usr/local/bin/node /home/REDACTED/.npm/_npx/e41f203b7505f1fb/node_modules/playwright-core/lib/server/registry/oopDownloadBrowserMain.js (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>UI: Island panel style (light/dark) using default tokens</issue_title>
<issue_description>Fixes part of #52.

Implement the “Island” panel aesthetic (soft rounded panels, subtle shadow, modern feel) in both light/dark.

Acceptance:

• Panel component with:
  • rounded corners
  • subtle shadow
  • header with title + actions
  • content area
• Uses CSS variables / system colors where possible
• Works in light + dark (prefers-color-scheme)

Notes:

• No hard-coded brand palette. Default vibes like modern OS UI.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes UI: Island panel style (light/dark) using default tokens #58

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.