From ebcacf4847b37b211cc2ad5afcf8897071da57d7 Mon Sep 17 00:00:00 2001 From: vegard Date: Thu, 19 Mar 2026 07:04:23 +0000 Subject: [PATCH] Globale farger via CSS vars: toolbar, traits og Tailwind-overrides MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Alle Tailwind-overrides i app.css bruker nå var(--color-*) i stedet for hardkodede hex. Dette betyr at temaendringer påvirker alt innhold — inkludert trait-komponenter, inputs, scrollbar, toolbar og statusfarger. Canvas-toolbar bruker også CSS vars nå. Co-Authored-By: Claude Opus 4.6 (1M context) --- frontend/src/app.css | 86 ++++++++++--------- .../src/lib/components/canvas/Canvas.svelte | 14 +-- 2 files changed, 51 insertions(+), 49 deletions(-) diff --git a/frontend/src/app.css b/frontend/src/app.css index 478f3ff..4b2b82e 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -1,10 +1,11 @@ @import 'tailwindcss'; -/* Synops mørkt tema — matcher landingssiden */ +/* Synops tema — CSS custom properties settes dynamisk av theme.ts */ @theme { --color-bg: #0a0a0b; --color-surface: #1c1c20; --color-surface-hover: #242428; + --color-panel: #1c1c20; --color-border: #2a2a2e; --color-border-hover: #3a3a3e; --color-text: #e8e8ec; @@ -24,73 +25,74 @@ html, body { font-family: 'Inter', -apple-system, system-ui, sans-serif; } -/* Alle div-er med min-h-screen bakgrunn */ .min-h-screen { background-color: var(--color-bg) !important; } div[style*="display: contents"] { background-color: var(--color-bg) !important; } -/* Override Tailwind defaults for dark theme — utenfor @layer for høy spesifisitet */ - .bg-white { background-color: #1c1c20 !important; } - .bg-gray-50 { background-color: #0a0a0b !important; } - .bg-gray-100 { background-color: #1c1c20 !important; } - .bg-gray-200 { background-color: #2a2a2e !important; } +/* === Tailwind overrides: use CSS custom properties === */ - /* Tekst */ - .text-gray-900 { color: #e8e8ec !important; } - .text-gray-800 { color: #e8e8ec !important; } - .text-gray-700 { color: #8a8a96 !important; } - .text-gray-600 { color: #8a8a96 !important; } - .text-gray-500 { color: #8a8a96 !important; } - .text-gray-400 { color: #5a5a66 !important; } - .text-gray-300 { color: #5a5a66 !important; } + /* Backgrounds */ + .bg-white { background-color: var(--color-panel) !important; } + .bg-gray-50 { background-color: var(--color-bg) !important; } + .bg-gray-100 { background-color: var(--color-surface) !important; } + .bg-gray-200 { background-color: var(--color-border) !important; } + + /* Text */ + .text-gray-900 { color: var(--color-text) !important; } + .text-gray-800 { color: var(--color-text) !important; } + .text-gray-700 { color: var(--color-text-muted) !important; } + .text-gray-600 { color: var(--color-text-muted) !important; } + .text-gray-500 { color: var(--color-text-muted) !important; } + .text-gray-400 { color: var(--color-text-dim) !important; } + .text-gray-300 { color: var(--color-text-dim) !important; } /* Borders */ - .border-gray-200 { border-color: #2a2a2e !important; } - .border-gray-300 { border-color: #2a2a2e !important; } - .border-gray-100 { border-color: #2a2a2e !important; } + .border-gray-200 { border-color: var(--color-border) !important; } + .border-gray-300 { border-color: var(--color-border) !important; } + .border-gray-100 { border-color: var(--color-border) !important; } /* Hover states */ - .hover\:bg-gray-200:hover { background-color: #242428 !important; } - .hover\:bg-gray-100:hover { background-color: #242428 !important; } - .hover\:text-gray-700:hover { color: #e8e8ec !important; } + .hover\:bg-gray-200:hover { background-color: var(--color-surface-hover) !important; } + .hover\:bg-gray-100:hover { background-color: var(--color-surface-hover) !important; } + .hover\:text-gray-700:hover { color: var(--color-text) !important; } - /* Accent-farger for knapper */ - .bg-indigo-500, .bg-indigo-600 { background-color: #6366f1 !important; } - .hover\:bg-indigo-600:hover, .hover\:bg-indigo-700:hover { background-color: #7577f5 !important; } - .text-indigo-600, .text-indigo-500, .text-indigo-700 { color: #6366f1 !important; } - .bg-indigo-50, .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.15) !important; } + /* Accent colors */ + .bg-indigo-500, .bg-indigo-600 { background-color: var(--color-accent) !important; } + .hover\:bg-indigo-600:hover, .hover\:bg-indigo-700:hover { background-color: var(--color-accent-hover) !important; } + .text-indigo-600, .text-indigo-500, .text-indigo-700 { color: var(--color-accent) !important; } + .bg-indigo-50, .bg-indigo-100 { background-color: var(--color-accent-glow) !important; } .bg-purple-50 { background-color: rgba(139, 92, 246, 0.1) !important; } .bg-green-50 { background-color: rgba(34, 197, 94, 0.1) !important; } .bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; } .bg-blue-50 { background-color: rgba(59, 130, 246, 0.1) !important; } .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.1) !important; } - .border-indigo-300 { border-color: #6366f1 !important; } - .hover\:border-indigo-300:hover { border-color: #6366f1 !important; } + .border-indigo-300 { border-color: var(--color-accent) !important; } + .hover\:border-indigo-300:hover { border-color: var(--color-accent) !important; } - /* Inputs og textareas */ + /* Inputs and textareas */ input, textarea, select { - background-color: #1c1c20 !important; - color: #e8e8ec !important; - border-color: #2a2a2e !important; + background-color: var(--color-bg) !important; + color: var(--color-text) !important; + border-color: var(--color-border) !important; } input:focus, textarea:focus, select:focus { - border-color: #6366f1 !important; - outline-color: #6366f1 !important; + border-color: var(--color-accent) !important; + outline-color: var(--color-accent) !important; } input::placeholder, textarea::placeholder { - color: #5a5a66 !important; + color: var(--color-text-dim) !important; } /* Shadows */ .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; } .shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; } - /* Status-farger */ - .text-green-600 { color: #22c55e !important; } - .text-yellow-600 { color: #f59e0b !important; } - .text-red-600 { color: #ef4444 !important; } + /* Status */ + .text-green-600 { color: var(--color-success) !important; } + .text-yellow-600 { color: var(--color-warning) !important; } + .text-red-600 { color: var(--color-error) !important; } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; } - ::-webkit-scrollbar-track { background: #0a0a0b; } - ::-webkit-scrollbar-thumb { background: #2a2a2e; border-radius: 4px; } - ::-webkit-scrollbar-thumb:hover { background: #3a3a3e; } + ::-webkit-scrollbar-track { background: var(--color-bg); } + ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; } + ::-webkit-scrollbar-thumb:hover { background: var(--color-border-hover); } diff --git a/frontend/src/lib/components/canvas/Canvas.svelte b/frontend/src/lib/components/canvas/Canvas.svelte index fdf8eb6..7c38977 100644 --- a/frontend/src/lib/components/canvas/Canvas.svelte +++ b/frontend/src/lib/components/canvas/Canvas.svelte @@ -604,8 +604,8 @@ align-items: center; gap: 4px; padding: 4px 8px; - background: #1c1c20; - border: 1px solid #2a2a2e; + background: var(--color-surface, #1c1c20); + border: 1px solid var(--color-border, #2a2a2e); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } @@ -621,22 +621,22 @@ border-radius: 6px; cursor: pointer; font-size: 16px; - color: #8a8a96; + color: var(--color-text-muted, #8a8a96); transition: background 0.15s; } .canvas-toolbar-btn:hover { - background: #242428; + background: var(--color-surface-hover, #242428); } .canvas-toolbar-active { - background: #eff6ff; - color: #3b82f6; + background: var(--color-accent-glow, rgba(99, 102, 241, 0.15)); + color: var(--color-accent, #3b82f6); } .canvas-toolbar-zoom { font-size: 12px; - color: #8a8a96; + color: var(--color-text-muted, #8a8a96); min-width: 40px; text-align: center; font-variant-numeric: tabular-nums;