Thème Nocturne clair (Claude Design) à la place du néo-brutaliste

Reprend les jetons de « Loki App.dc.html » : fond gris froid #f7f8fa,
surfaces blanches, accent bleu ardoise #2f4a7a (au lieu de l'orange),
filets 1 px #e3e6eb (au lieu des bordures noires 3 px) et ombres douces
diffuses (au lieu des ombres dures décalées).

- tailwind.config.ts : les NOMS de jetons sont conservés, seules leurs
  valeurs basculent — toute l'interface suit sans réécrire les
  composants. Les jetons historiquement sombres (card-deep, on-dark…)
  deviennent la surface sélectionnée claire et son encre.
- Police unique Inter ; l'ex-« font-pixel » devient le kicker de la
  maquette (petites capitales espacées de 0.14em), donc les libellés
  existants suivent sans modification.
- Conversion mécanique des filets 3 px / 2 px vers 1 px, séparateurs
  épais affinés, logo et avatar refaits selon la maquette (carré teinté
  à filet accent), couleurs « papier » de l'aperçu passées en jetons.
- Texte blanc corrigé partout où il reposait sur une surface devenue
  claire ; conservé sur les fonds accent/warn où il reste lisible.

Vérifié au rendu : body #f7f8fa, encre #1c2536, surface #ffffff, Inter ;
plus aucune trace d'orange, de noir #18181b ni d'ombre dure.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SVay7z3y7q2gEe54ByAE6N
This commit is contained in:
Claude committed 2026-08-03 09:06:46 +00:00
1 parent 174a3d4a35
commit 7615bcfbbb
16 files changed
+254 -215

No files matched your search

+5 -5
View File
@@ -16,10 +16,10 @@ export function TopBar() {
}, []);
return (
<div className="flex h-[54px] flex-none items-center gap-3.5 border-b-[3px] border-line bg-bar px-4">
<div className="flex h-[54px] flex-none items-center gap-3.5 border-b border-line bg-bar px-4">
<div className="flex items-center gap-2.5">
<LokiMark />
<div className="font-pixel text-[14px] text-white">LOKI</div>
<div className="font-pixel text-[14px] text-ink">LOKI</div>
<div
className="text-[13px] leading-none text-on-dark-2"
title={version ? `build ${version}` : undefined}
@@ -39,7 +39,7 @@ export function TopBar() {
{/* Stats système temps réel : CPU, RAM, GPU/VRAM */}
{stats && (
<div className="flex h-8 items-center gap-2.5 border-[3px] border-chrome-3 bg-chrome-2 px-[11px] text-[13px] text-on-dark">
<div className="flex h-8 items-center gap-2.5 border border-chrome-3 bg-chrome-2 px-[11px] text-[13px] text-on-dark">
<span>CPU {stats.cpu_pct.toFixed(0)}%</span>
<span className="text-on-dark-3">·</span>
<span>RAM {stats.ram_pct.toFixed(0)}%</span>
@@ -58,11 +58,11 @@ export function TopBar() {
{/* Statut Ollama */}
<div
className="flex h-8 items-center gap-2 border-[3px] border-chrome-3 bg-chrome-2 px-[11px]"
className="flex h-8 items-center gap-2 border border-chrome-3 bg-chrome-2 px-[11px]"
title={connected ? status?.host : status?.error}
>
<span
className={`h-[11px] w-[11px] border-2 border-line ${
className={`h-[11px] w-[11px] border border-line ${
connected ? "bg-ok" : "bg-warn"
}`}
/>