Globale farger via CSS vars: toolbar, traits og Tailwind-overrides
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) <noreply@anthropic.com>
This commit is contained in:
parent
798a11f93f
commit
ebcacf4847
2 changed files with 51 additions and 49 deletions
|
|
@ -1,10 +1,11 @@
|
||||||
@import 'tailwindcss';
|
@import 'tailwindcss';
|
||||||
|
|
||||||
/* Synops mørkt tema — matcher landingssiden */
|
/* Synops tema — CSS custom properties settes dynamisk av theme.ts */
|
||||||
@theme {
|
@theme {
|
||||||
--color-bg: #0a0a0b;
|
--color-bg: #0a0a0b;
|
||||||
--color-surface: #1c1c20;
|
--color-surface: #1c1c20;
|
||||||
--color-surface-hover: #242428;
|
--color-surface-hover: #242428;
|
||||||
|
--color-panel: #1c1c20;
|
||||||
--color-border: #2a2a2e;
|
--color-border: #2a2a2e;
|
||||||
--color-border-hover: #3a3a3e;
|
--color-border-hover: #3a3a3e;
|
||||||
--color-text: #e8e8ec;
|
--color-text: #e8e8ec;
|
||||||
|
|
@ -24,73 +25,74 @@ html, body {
|
||||||
font-family: 'Inter', -apple-system, system-ui, sans-serif;
|
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; }
|
.min-h-screen { background-color: var(--color-bg) !important; }
|
||||||
div[style*="display: contents"] { 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 */
|
/* === Tailwind overrides: use CSS custom properties === */
|
||||||
.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; }
|
|
||||||
|
|
||||||
/* Tekst */
|
/* Backgrounds */
|
||||||
.text-gray-900 { color: #e8e8ec !important; }
|
.bg-white { background-color: var(--color-panel) !important; }
|
||||||
.text-gray-800 { color: #e8e8ec !important; }
|
.bg-gray-50 { background-color: var(--color-bg) !important; }
|
||||||
.text-gray-700 { color: #8a8a96 !important; }
|
.bg-gray-100 { background-color: var(--color-surface) !important; }
|
||||||
.text-gray-600 { color: #8a8a96 !important; }
|
.bg-gray-200 { background-color: var(--color-border) !important; }
|
||||||
.text-gray-500 { color: #8a8a96 !important; }
|
|
||||||
.text-gray-400 { color: #5a5a66 !important; }
|
/* Text */
|
||||||
.text-gray-300 { color: #5a5a66 !important; }
|
.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 */
|
/* Borders */
|
||||||
.border-gray-200 { border-color: #2a2a2e !important; }
|
.border-gray-200 { border-color: var(--color-border) !important; }
|
||||||
.border-gray-300 { border-color: #2a2a2e !important; }
|
.border-gray-300 { border-color: var(--color-border) !important; }
|
||||||
.border-gray-100 { border-color: #2a2a2e !important; }
|
.border-gray-100 { border-color: var(--color-border) !important; }
|
||||||
|
|
||||||
/* Hover states */
|
/* Hover states */
|
||||||
.hover\:bg-gray-200:hover { background-color: #242428 !important; }
|
.hover\:bg-gray-200:hover { background-color: var(--color-surface-hover) !important; }
|
||||||
.hover\:bg-gray-100:hover { background-color: #242428 !important; }
|
.hover\:bg-gray-100:hover { background-color: var(--color-surface-hover) !important; }
|
||||||
.hover\:text-gray-700:hover { color: #e8e8ec !important; }
|
.hover\:text-gray-700:hover { color: var(--color-text) !important; }
|
||||||
|
|
||||||
/* Accent-farger for knapper */
|
/* Accent colors */
|
||||||
.bg-indigo-500, .bg-indigo-600 { background-color: #6366f1 !important; }
|
.bg-indigo-500, .bg-indigo-600 { background-color: var(--color-accent) !important; }
|
||||||
.hover\:bg-indigo-600:hover, .hover\:bg-indigo-700:hover { background-color: #7577f5 !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: #6366f1 !important; }
|
.text-indigo-600, .text-indigo-500, .text-indigo-700 { color: var(--color-accent) !important; }
|
||||||
.bg-indigo-50, .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.15) !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-purple-50 { background-color: rgba(139, 92, 246, 0.1) !important; }
|
||||||
.bg-green-50 { background-color: rgba(34, 197, 94, 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-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; }
|
||||||
.bg-blue-50 { background-color: rgba(59, 130, 246, 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; }
|
.bg-yellow-50 { background-color: rgba(234, 179, 8, 0.1) !important; }
|
||||||
.border-indigo-300 { border-color: #6366f1 !important; }
|
.border-indigo-300 { border-color: var(--color-accent) !important; }
|
||||||
.hover\:border-indigo-300:hover { border-color: #6366f1 !important; }
|
.hover\:border-indigo-300:hover { border-color: var(--color-accent) !important; }
|
||||||
|
|
||||||
/* Inputs og textareas */
|
/* Inputs and textareas */
|
||||||
input, textarea, select {
|
input, textarea, select {
|
||||||
background-color: #1c1c20 !important;
|
background-color: var(--color-bg) !important;
|
||||||
color: #e8e8ec !important;
|
color: var(--color-text) !important;
|
||||||
border-color: #2a2a2e !important;
|
border-color: var(--color-border) !important;
|
||||||
}
|
}
|
||||||
input:focus, textarea:focus, select:focus {
|
input:focus, textarea:focus, select:focus {
|
||||||
border-color: #6366f1 !important;
|
border-color: var(--color-accent) !important;
|
||||||
outline-color: #6366f1 !important;
|
outline-color: var(--color-accent) !important;
|
||||||
}
|
}
|
||||||
input::placeholder, textarea::placeholder {
|
input::placeholder, textarea::placeholder {
|
||||||
color: #5a5a66 !important;
|
color: var(--color-text-dim) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Shadows */
|
/* Shadows */
|
||||||
.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; }
|
.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; }
|
.shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; }
|
||||||
|
|
||||||
/* Status-farger */
|
/* Status */
|
||||||
.text-green-600 { color: #22c55e !important; }
|
.text-green-600 { color: var(--color-success) !important; }
|
||||||
.text-yellow-600 { color: #f59e0b !important; }
|
.text-yellow-600 { color: var(--color-warning) !important; }
|
||||||
.text-red-600 { color: #ef4444 !important; }
|
.text-red-600 { color: var(--color-error) !important; }
|
||||||
|
|
||||||
/* Scrollbar */
|
/* Scrollbar */
|
||||||
::-webkit-scrollbar { width: 8px; }
|
::-webkit-scrollbar { width: 8px; }
|
||||||
::-webkit-scrollbar-track { background: #0a0a0b; }
|
::-webkit-scrollbar-track { background: var(--color-bg); }
|
||||||
::-webkit-scrollbar-thumb { background: #2a2a2e; border-radius: 4px; }
|
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
|
||||||
::-webkit-scrollbar-thumb:hover { background: #3a3a3e; }
|
::-webkit-scrollbar-thumb:hover { background: var(--color-border-hover); }
|
||||||
|
|
|
||||||
|
|
@ -604,8 +604,8 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
background: #1c1c20;
|
background: var(--color-surface, #1c1c20);
|
||||||
border: 1px solid #2a2a2e;
|
border: 1px solid var(--color-border, #2a2a2e);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||||
}
|
}
|
||||||
|
|
@ -621,22 +621,22 @@
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #8a8a96;
|
color: var(--color-text-muted, #8a8a96);
|
||||||
transition: background 0.15s;
|
transition: background 0.15s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.canvas-toolbar-btn:hover {
|
.canvas-toolbar-btn:hover {
|
||||||
background: #242428;
|
background: var(--color-surface-hover, #242428);
|
||||||
}
|
}
|
||||||
|
|
||||||
.canvas-toolbar-active {
|
.canvas-toolbar-active {
|
||||||
background: #eff6ff;
|
background: var(--color-accent-glow, rgba(99, 102, 241, 0.15));
|
||||||
color: #3b82f6;
|
color: var(--color-accent, #3b82f6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.canvas-toolbar-zoom {
|
.canvas-toolbar-zoom {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #8a8a96;
|
color: var(--color-text-muted, #8a8a96);
|
||||||
min-width: 40px;
|
min-width: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue