init elas atelier

frontend/src/components/react/ThemeSwitcher.tsx

@@ -1,11 +1,10 @@
 import { useState, useEffect, useRef } from 'react';
 
 const THEMES = [
-  { value: 'mocha', label: 'Mocha' },
-  { value: 'macchiato', label: 'Macchiato' },
-  { value: 'frappe', label: 'Frappe' },
+  { value: 'salon', label: 'Salon' },
+  { value: 'salon-noir', label: 'Salon Noir' },
   { value: 'latte', label: 'Latte' },
-  { value: 'scaled-and-icy', label: 'Scaled and Icy' },
+  { value: 'mocha', label: 'Mocha' },
 ];
 
 interface Props {
@@ -44,13 +43,14 @@ export default function ThemeSwitcher({ defaultTheme = 'mocha' }: Props) {
         value={theme}
         onChange={(e) => setTheme(e.target.value)}
         aria-label="Theme"
-        className="appearance-none bg-surface0/50 text-text border border-surface1 rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:border-mauve transition-colors cursor-pointer hover:bg-surface0 pr-8 shadow-sm"
+        className="appearance-none bg-[var(--surface0)]/60 text-[var(--text)] border border-[var(--surface2)] px-3 py-1.5 text-xs uppercase tracking-[0.18em] focus:outline-none focus:border-[var(--mauve)] transition-colors cursor-pointer hover:bg-[var(--surface0)] pr-8 font-display italic"
+        style={{ borderRadius: 1 }}
       >
         {THEMES.map(t => (
           <option key={t.value} value={t.value}>{t.label}</option>
         ))}
       </select>
-      <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-subtext0">
+      <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-[var(--subtext0)]">
         <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>
       </div>
       {toast && <div className="toast" role="status">{toast}</div>}