From 7615bcfbbbaf5d18250e62985fcef00b1c671bed Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 3 Aug 2026 09:06:46 +0000 Subject: [PATCH] =?UTF-8?q?Th=C3=A8me=20Nocturne=20clair=20(Claude=20Desig?= =?UTF-8?q?n)=20=C3=A0=20la=20place=20du=20n=C3=A9o-brutaliste?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Claude-Session: https://claude.ai/code/session_01SVay7z3y7q2gEe54ByAE6N --- frontend/index.html | 2 +- frontend/src/components/ActivityBar.tsx | 8 +- frontend/src/components/Icon.tsx | 15 +-- frontend/src/components/MessageContent.tsx | 8 +- frontend/src/components/ModelSelector.tsx | 10 +- frontend/src/components/ProjectChip.tsx | 10 +- frontend/src/components/SessionMenu.tsx | 16 +-- frontend/src/components/ToolCard.tsx | 10 +- frontend/src/components/TopBar.tsx | 10 +- frontend/src/index.css | 46 ++++++--- frontend/src/panels/ActivityViews.tsx | 24 ++--- frontend/src/panels/ChatPanel.tsx | 50 +++++----- frontend/src/panels/LeftPanel.tsx | 14 +-- frontend/src/panels/PreviewPanel.tsx | 40 ++++---- frontend/src/panels/SettingsView.tsx | 96 +++++++++--------- frontend/tailwind.config.ts | 110 ++++++++++++--------- 16 files changed, 254 insertions(+), 215 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 2e41ef8..17653d7 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -7,7 +7,7 @@ Loki - Agent local diff --git a/frontend/src/components/ActivityBar.tsx b/frontend/src/components/ActivityBar.tsx index 870cf2a..f4626a0 100644 --- a/frontend/src/components/ActivityBar.tsx +++ b/frontend/src/components/ActivityBar.tsx @@ -16,10 +16,10 @@ const items: { id: View; label: string; icon: React.ReactNode }[] = [ ]; const btn = (on: boolean) => - `flex h-10 w-10 items-center justify-center border-[3px] ${ + `flex h-10 w-10 items-center justify-center border ${ on ? "border-white bg-accent text-white shadow-accent-soft" - : "border-chrome-3 text-on-dark-2 hover:text-white" + : "border-chrome-3 text-on-dark-2 hover:text-ink" }`; /** Barre d'activité verticale (60px) sombre à gauche. */ @@ -31,7 +31,7 @@ export function ActivityBar({ onChange: (v: View) => void; }) { return ( -
+
{items.map((it) => ( -
+
M
diff --git a/frontend/src/components/Icon.tsx b/frontend/src/components/Icon.tsx index 1477cb2..4495912 100644 --- a/frontend/src/components/Icon.tsx +++ b/frontend/src/components/Icon.tsx @@ -104,20 +104,23 @@ export const CheckIcon = ({ size = 14, className }: Props) => ( ); -/** Logo Loki : carré orange à bordure blanche + carré interne (néo-brutaliste). */ +/** Logo Loki : carré teinté à filet accent + petit carré accent (maquette). */ export const LokiMark = ({ size = 30 }: { size?: number }) => (
); diff --git a/frontend/src/components/MessageContent.tsx b/frontend/src/components/MessageContent.tsx index b3180a4..4c8e57d 100644 --- a/frontend/src/components/MessageContent.tsx +++ b/frontend/src/components/MessageContent.tsx @@ -45,15 +45,15 @@ function CodeBlock({ lang, code }: { lang: string; code: string }) { }; return ( -
-
+
+
{lang || "code"} ))} -
+
{creating ? ( ) : ( @@ -53,7 +53,7 @@ export function FilesView() { return ( -
+
{fileTree.length ? : }
@@ -74,9 +74,9 @@ function WorkspaceTree({ nodes, depth }: { nodes: FileNode[]; depth: number }) { {nodes.map((node) => (
downloadFile(node.path, currentProject())} - className="flex items-center gap-1 border-2 border-line bg-base px-2 py-1 text-[11px] text-accent" + className="flex items-center gap-1 border border-line bg-base px-2 py-1 text-[11px] text-accent" title={`Télécharger ${node.name}`} > Télécharger @@ -102,7 +102,7 @@ function WorkspaceTree({ nodes, depth }: { nodes: FileNode[]; depth: number }) { )} @@ -162,7 +162,7 @@ function Page({ title, subtitle, children }: { title: string; subtitle: string; } function Empty({ text }: { text: string }) { - return
{text}
; + return
{text}
; } function formatSize(bytes: number): string { diff --git a/frontend/src/panels/ChatPanel.tsx b/frontend/src/panels/ChatPanel.tsx index 56eb73b..2ed87af 100644 --- a/frontend/src/panels/ChatPanel.tsx +++ b/frontend/src/panels/ChatPanel.tsx @@ -63,10 +63,10 @@ export function ChatPanel() { return (
{/* Barre de contexte */} -
+
⚑ Invite système - + {activeTools} outil{activeTools > 1 ? "s" : ""} @@ -130,9 +130,9 @@ export function ChatPanel() {
{/* Composer */} -
+
-
+