From b088e877ac02bdcc274cc0fa0fd219affaabe93a Mon Sep 17 00:00:00 2001 From: vegard Date: Thu, 19 Mar 2026 19:33:48 +0000 Subject: [PATCH] Erstatt hardkodede hex-farger med CSS-variabler i trait-komponenter MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fjernet ~170 hardkodede hex-verdier i style-blokker across 7 filer og erstattet med var(--color-*) for full temastøtte. Filer: ChatTrait, EditorTrait, OrchestrationTrait, CalendarTrait, KanbanTrait, MindMapTrait, StudioTrait. D3-visualiseringsfarger (MindMapTrait) og fargevelger-palett (SoundPadGrid) beholdt som funksjonelle farger. --- .../components/traits/CalendarTrait.svelte | 104 +++++------ .../lib/components/traits/ChatTrait.svelte | 54 +++--- .../lib/components/traits/EditorTrait.svelte | 154 ++++++++-------- .../lib/components/traits/KanbanTrait.svelte | 42 ++--- .../lib/components/traits/MindMapTrait.svelte | 40 ++--- .../traits/OrchestrationTrait.svelte | 170 +++++++++--------- .../lib/components/traits/StudioTrait.svelte | 38 ++-- 7 files changed, 301 insertions(+), 301 deletions(-) diff --git a/frontend/src/lib/components/traits/CalendarTrait.svelte b/frontend/src/lib/components/traits/CalendarTrait.svelte index 34311e1..82f16ce 100644 --- a/frontend/src/lib/components/traits/CalendarTrait.svelte +++ b/frontend/src/lib/components/traits/CalendarTrait.svelte @@ -481,7 +481,7 @@ align-items: center; justify-content: center; flex: 1; - color: #5a5a66; + color: var(--color-text-dim); font-size: 13px; } @@ -494,7 +494,7 @@ justify-content: space-between; padding: 6px 8px; flex-shrink: 0; - border-bottom: 1px solid #f3f4f6; + border-bottom: 1px solid var(--color-border); } .cal-nav-btn { @@ -503,18 +503,18 @@ justify-content: center; width: 28px; height: 28px; - border: 1px solid #2a2a2e; - background: #1c1c20; + border: 1px solid var(--color-border); + background: var(--color-surface); border-radius: 6px; cursor: pointer; font-size: 12px; - color: #8a8a96; + color: var(--color-text-muted); flex-shrink: 0; } .cal-nav-btn:hover { - background: #141416; - color: #8a8a96; + background: var(--color-bg); + color: var(--color-text-muted); } .cal-nav-center { @@ -527,22 +527,22 @@ .cal-nav-title { font-size: 13px; font-weight: 600; - color: #e8e8ec; + color: var(--color-text); white-space: nowrap; } .cal-today-btn { padding: 2px 6px; border: none; - background: #242428; + background: var(--color-surface-hover); border-radius: 4px; font-size: 10px; - color: #8a8a96; + color: var(--color-text-muted); cursor: pointer; } .cal-today-btn:hover { - background: #e5e7eb; + background: var(--color-border); } /* ================================================================= */ @@ -558,8 +558,8 @@ .cal-day-headers { display: grid; grid-template-columns: repeat(7, 1fr); - border-bottom: 1px solid #2a2a2e; - background: #141416; + border-bottom: 1px solid var(--color-border); + background: var(--color-bg); position: sticky; top: 0; z-index: 1; @@ -569,7 +569,7 @@ text-align: center; font-size: 10px; font-weight: 600; - color: #5a5a66; + color: var(--color-text-dim); padding: 4px 0; text-transform: uppercase; letter-spacing: 0.03em; @@ -585,23 +585,23 @@ /* ================================================================= */ .cal-day { min-height: 56px; - border-bottom: 1px solid #f3f4f6; - border-right: 1px solid #f3f4f6; + border-bottom: 1px solid var(--color-border); + border-right: 1px solid var(--color-border); padding: 2px; overflow: hidden; } .cal-day-other { - background: #141416; + background: var(--color-bg); } .cal-day-today { - background: #eff6ff; + background: var(--color-surface); } .cal-day-drop { - box-shadow: inset 0 0 0 2px #60a5fa; - background: #eff6ff; + box-shadow: inset 0 0 0 2px var(--color-accent); + background: var(--color-surface); } .cal-day-num-row { @@ -614,16 +614,16 @@ .cal-day-num { font-size: 11px; font-weight: 500; - color: #8a8a96; + color: var(--color-text-muted); line-height: 1; } .cal-day-other .cal-day-num { - color: #d1d5db; + color: var(--color-text-muted); } .cal-day-num-today { - background: #2563eb; + background: var(--color-accent); color: white; border-radius: 9999px; padding: 1px 4px; @@ -632,7 +632,7 @@ .cal-add-btn { border: none; background: transparent; - color: #d1d5db; + color: var(--color-text-muted); font-size: 11px; cursor: pointer; line-height: 1; @@ -640,7 +640,7 @@ } .cal-add-btn:hover { - color: #2563eb; + color: var(--color-accent); } /* ================================================================= */ @@ -670,27 +670,27 @@ } .cal-event-default { - background: #fef3c7; - border-color: #fcd34d; - color: #92400e; + background: var(--color-surface); + border-color: var(--color-warning); + color: var(--color-warning); } .cal-event-comm { - background: #dbeafe; - border-color: #93c5fd; - color: #1e40af; + background: var(--color-surface); + border-color: var(--color-accent); + color: var(--color-accent); } .cal-event-media { - background: #ede9fe; - border-color: #c4b5fd; - color: #5b21b6; + background: var(--color-surface); + border-color: var(--color-accent); + color: var(--color-accent); } .cal-event-coll { - background: #d1fae5; - border-color: #6ee7b7; - color: #065f46; + background: var(--color-surface); + border-color: var(--color-success); + color: var(--color-success); } .cal-event-time { @@ -710,15 +710,15 @@ .cal-add-form { margin-top: 2px; padding: 3px; - background: #1c1c20; - border: 1px solid #bfdbfe; + background: var(--color-surface); + border: 1px solid var(--color-accent); border-radius: 4px; } .cal-add-input { width: 100%; padding: 2px 4px; - border: 1px solid #2a2a2e; + border: 1px solid var(--color-border); border-radius: 3px; font-size: 10px; outline: none; @@ -726,7 +726,7 @@ } .cal-add-input:focus { - border-color: #60a5fa; + border-color: var(--color-accent); } .cal-add-time { @@ -745,13 +745,13 @@ border-radius: 3px; font-size: 10px; font-weight: 500; - background: #2563eb; + background: var(--color-accent); color: white; cursor: pointer; } .cal-add-submit:hover { - background: #1d4ed8; + background: var(--color-accent-hover); } .cal-add-submit:disabled { @@ -765,12 +765,12 @@ border-radius: 3px; font-size: 10px; background: transparent; - color: #8a8a96; + color: var(--color-text-muted); cursor: pointer; } .cal-add-cancel:hover { - background: #242428; + background: var(--color-surface-hover); } /* ================================================================= */ @@ -778,7 +778,7 @@ /* ================================================================= */ .cal-list { flex-shrink: 0; - border-top: 1px solid #e5e7eb; + border-top: 1px solid var(--color-border); max-height: 140px; overflow-y: auto; } @@ -789,10 +789,10 @@ font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; - color: #5a5a66; + color: var(--color-text-dim); position: sticky; top: 0; - background: #1c1c20; + background: var(--color-surface); } .cal-list-item { @@ -806,7 +806,7 @@ } .cal-list-item:hover { - background: #141416; + background: var(--color-bg); } .cal-list-item:active { @@ -815,14 +815,14 @@ .cal-list-date { font-size: 10px; - color: #5a5a66; + color: var(--color-text-dim); flex-shrink: 0; } .cal-list-time { font-size: 10px; font-weight: 600; - color: #8a8a96; + color: var(--color-text-muted); flex-shrink: 0; } @@ -830,7 +830,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - color: #e8e8ec; + color: var(--color-text); } /* ================================================================= */ diff --git a/frontend/src/lib/components/traits/ChatTrait.svelte b/frontend/src/lib/components/traits/ChatTrait.svelte index 2c588da..f19d62f 100644 --- a/frontend/src/lib/components/traits/ChatTrait.svelte +++ b/frontend/src/lib/components/traits/ChatTrait.svelte @@ -386,7 +386,7 @@ justify-content: center; flex: 1; padding: 24px; - color: #5a5a66; + color: var(--color-text-dim); font-size: 13px; text-align: center; gap: 8px; @@ -412,7 +412,7 @@ font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; - color: #5a5a66; + color: var(--color-text-dim); } .chat-channel-item { @@ -424,13 +424,13 @@ background: transparent; cursor: pointer; font-size: 13px; - color: #8a8a96; + color: var(--color-text-muted); text-align: left; transition: background 0.1s; } .chat-channel-item:hover { - background: #242428; + background: var(--color-surface-hover); } .chat-channel-icon { @@ -462,7 +462,7 @@ align-items: center; gap: 6px; padding: 6px 8px; - border-bottom: 1px solid #f3f4f6; + border-bottom: 1px solid var(--color-border); flex-shrink: 0; min-height: 32px; } @@ -477,13 +477,13 @@ background: transparent; border-radius: 4px; cursor: pointer; - color: #8a8a96; + color: var(--color-text-muted); flex-shrink: 0; } .chat-back-btn:hover { - background: #242428; - color: #8a8a96; + background: var(--color-surface-hover); + color: var(--color-text-muted); } .chat-back-icon { @@ -494,7 +494,7 @@ .chat-subheader-title { font-size: 13px; font-weight: 600; - color: #8a8a96; + color: var(--color-text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; @@ -503,7 +503,7 @@ .chat-subheader-participants { font-size: 11px; - color: #5a5a66; + color: var(--color-text-dim); margin-left: auto; white-space: nowrap; overflow: hidden; @@ -526,7 +526,7 @@ .chat-messages-empty { text-align: center; font-size: 12px; - color: #5a5a66; + color: var(--color-text-dim); padding: 24px 8px; margin: auto 0; } @@ -557,37 +557,37 @@ } .chat-bubble-own { - background: #2563eb; + background: var(--color-accent); color: white; } .chat-bubble-own-audio { - background: #eff6ff; - border: 1px solid #bfdbfe; - color: #1e293b; + background: var(--color-accent-glow); + border: 1px solid var(--color-accent); + color: var(--color-text); } .chat-bubble-other { - background: #1c1c20; - border: 1px solid #2a2a2e; - color: #1e293b; + background: var(--color-surface); + border: 1px solid var(--color-border); + color: var(--color-text); } .chat-bubble-bot { - background: #fffbeb; - border: 1px solid #fde68a; - color: #1e293b; + background: var(--color-surface); + border: 1px solid var(--color-border); + color: var(--color-text); } .chat-sender { font-size: 11px; font-weight: 600; - color: #2563eb; + color: var(--color-accent); margin-bottom: 1px; } .chat-sender-bot { - color: #b45309; + color: var(--color-warning); } .chat-text { @@ -600,7 +600,7 @@ .chat-time { font-size: 10px; - color: #5a5a66; + color: var(--color-text-dim); text-align: right; margin-top: 2px; } @@ -617,7 +617,7 @@ margin-bottom: 4px; font-size: 11px; font-weight: 500; - color: #2563eb; + color: var(--color-accent); } .chat-audio-icon { @@ -630,8 +630,8 @@ .chat-input-area { flex-shrink: 0; padding: 6px 8px; - border-top: 1px solid #f3f4f6; - background: #141416; + border-top: 1px solid var(--color-border); + background: var(--color-bg); } /* ================================================================= */ diff --git a/frontend/src/lib/components/traits/EditorTrait.svelte b/frontend/src/lib/components/traits/EditorTrait.svelte index 850e9ba..ebb41b3 100644 --- a/frontend/src/lib/components/traits/EditorTrait.svelte +++ b/frontend/src/lib/components/traits/EditorTrait.svelte @@ -739,20 +739,20 @@ justify-content: space-between; padding: 8px 12px; flex-shrink: 0; - border-bottom: 1px solid #f3f4f6; + border-bottom: 1px solid var(--color-border); } .editor-list-meta { font-size: 11px; - color: #5a5a66; + color: var(--color-text-dim); text-transform: uppercase; letter-spacing: 0.03em; } .editor-list-count { font-size: 11px; - color: #5a5a66; - background: #242428; + color: var(--color-text-dim); + background: var(--color-surface-hover); border-radius: 9999px; padding: 0 6px; line-height: 18px; @@ -762,10 +762,10 @@ margin: 8px 12px 0; padding: 8px 10px; border-radius: 6px; - border: 1px solid #fecaca; - background: #fef2f2; + border: 1px solid var(--color-error); + background: var(--color-surface); font-size: 12px; - color: #b91c1c; + color: var(--color-error); } .editor-error-dismiss { @@ -788,7 +788,7 @@ justify-content: center; flex: 1; padding: 24px; - color: #5a5a66; + color: var(--color-text-dim); font-size: 13px; text-align: center; gap: 4px; @@ -800,7 +800,7 @@ .editor-empty-hint { font-size: 11px; - color: #d1d5db; + color: var(--color-text-muted); margin-top: 4px; } @@ -818,8 +818,8 @@ } .editor-item { - background: #1c1c20; - border: 1px solid #2a2a2e; + background: var(--color-surface); + border: 1px solid var(--color-border); border-radius: 6px; padding: 8px 10px; cursor: pointer; @@ -828,22 +828,22 @@ .editor-item:hover { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); - border-color: #d1d5db; + border-color: var(--color-text-muted); } .editor-item-drop { - border-color: #a78bfa; - background: #f5f3ff; + border-color: var(--color-accent); + background: var(--color-surface); } .editor-item-incompat { - border-color: #f87171; - background: #fef2f2; + border-color: var(--color-error); + background: var(--color-surface); } .editor-item-processing { - border-color: #fbbf24; - background: #fffbeb; + border-color: var(--color-warning); + background: var(--color-surface); } .editor-item-feedback { @@ -853,19 +853,19 @@ .editor-item-feedback-reason { font-size: 12px; - color: #dc2626; + color: var(--color-error); font-weight: 500; } .editor-item-feedback-suggestion { font-size: 11px; - color: #f87171; + color: var(--color-error); margin-top: 2px; } .editor-item-feedback-ok { font-size: 12px; - color: #7c3aed; + color: var(--color-accent); font-weight: 500; } @@ -880,7 +880,7 @@ width: 3px; min-height: 24px; border-radius: 2px; - background: #a78bfa; + background: var(--color-accent); align-self: stretch; } @@ -895,7 +895,7 @@ .editor-item-title { font-size: 13px; font-weight: 500; - color: #e8e8ec; + color: var(--color-text); line-height: 1.3; word-break: break-word; } @@ -903,7 +903,7 @@ .editor-item-processing-label { margin-left: 4px; font-size: 11px; - color: #d97706; + color: var(--color-warning); font-weight: 400; } @@ -913,7 +913,7 @@ -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; - color: #8a8a96; + color: var(--color-text-muted); line-height: 1.3; } @@ -922,11 +922,11 @@ } .editor-item-result-ok { - color: #059669; + color: var(--color-success); } .editor-item-result-err { - color: #dc2626; + color: var(--color-error); } .editor-item-meta { @@ -939,12 +939,12 @@ .editor-item-source-count { font-size: 10px; - color: #7c3aed; + color: var(--color-accent); } .editor-item-time { font-size: 10px; - color: #5a5a66; + color: var(--color-text-dim); } .editor-item-actions { @@ -966,23 +966,23 @@ border-radius: 4px; border: none; background: transparent; - color: #8a8a96; + color: var(--color-text-muted); cursor: pointer; text-decoration: none; } .editor-item-action:hover { - background: #242428; - color: #8a8a96; + background: var(--color-surface-hover); + color: var(--color-text-muted); } .editor-item-action-danger { - color: #ef4444; + color: var(--color-error); } .editor-item-action-danger:hover { - background: #fef2f2; - color: #dc2626; + background: var(--color-surface); + color: var(--color-error); } /* ================================================================= */ @@ -993,7 +993,7 @@ gap: 6px; padding: 8px; flex-shrink: 0; - border-top: 1px solid #f3f4f6; + border-top: 1px solid var(--color-border); flex-wrap: wrap; } @@ -1002,15 +1002,15 @@ border: none; background: transparent; font-size: 12px; - color: #8a8a96; + color: var(--color-text-muted); cursor: pointer; border-radius: 6px; transition: background 0.1s, color 0.1s; } .editor-new-btn:hover { - background: #242428; - color: #8a8a96; + background: var(--color-surface-hover); + color: var(--color-text-muted); } .editor-publish-btn { @@ -1019,14 +1019,14 @@ border-radius: 6px; font-size: 12px; font-weight: 500; - background: #059669; + background: var(--color-success); color: white; cursor: pointer; transition: background 0.1s; } .editor-publish-btn:hover { - background: #047857; + background: var(--color-success); } .editor-create-form { @@ -1039,7 +1039,7 @@ .editor-create-input { width: 100%; padding: 6px 8px; - border: 1px solid #2a2a2e; + border: 1px solid var(--color-border); border-radius: 4px; font-size: 12px; outline: none; @@ -1047,7 +1047,7 @@ } .editor-create-input:focus { - border-color: #60a5fa; + border-color: var(--color-accent); } .editor-create-buttons { @@ -1061,13 +1061,13 @@ border-radius: 4px; font-size: 11px; font-weight: 500; - background: #2563eb; + background: var(--color-accent); color: white; cursor: pointer; } .editor-create-btn:hover { - background: #1d4ed8; + background: var(--color-accent-hover); } .editor-create-btn:disabled { @@ -1081,12 +1081,12 @@ border-radius: 4px; font-size: 11px; background: transparent; - color: #8a8a96; + color: var(--color-text-muted); cursor: pointer; } .editor-cancel-btn:hover { - background: #242428; + background: var(--color-surface-hover); } /* ================================================================= */ @@ -1096,20 +1096,20 @@ margin: 0 8px 8px; padding: 10px; border-radius: 6px; - border: 1px solid #a7f3d0; - background: #ecfdf5; + border: 1px solid var(--color-success); + background: var(--color-surface); } .editor-publish-picker-title { font-size: 12px; font-weight: 600; - color: #065f46; + color: var(--color-success); margin-bottom: 6px; } .editor-publish-picker-empty { font-size: 12px; - color: #059669; + color: var(--color-success); } .editor-publish-picker-list { @@ -1138,17 +1138,17 @@ } .editor-publish-picker-item:hover { - background: #d1fae5; + background: var(--color-surface-hover); } .editor-publish-picker-name { font-weight: 500; - color: #e8e8ec; + color: var(--color-text); } .editor-publish-picker-preview { font-size: 11px; - color: #8a8a96; + color: var(--color-text-muted); } /* ================================================================= */ @@ -1168,7 +1168,7 @@ justify-content: space-between; padding: 6px 10px; flex-shrink: 0; - border-bottom: 1px solid #f3f4f6; + border-bottom: 1px solid var(--color-border); gap: 8px; } @@ -1176,7 +1176,7 @@ border: none; background: transparent; font-size: 12px; - color: #8a8a96; + color: var(--color-text-muted); cursor: pointer; padding: 4px 6px; border-radius: 4px; @@ -1184,8 +1184,8 @@ } .editor-back-btn:hover { - background: #242428; - color: #8a8a96; + background: var(--color-surface-hover); + color: var(--color-text-muted); } .editor-toolbar-right { @@ -1195,10 +1195,10 @@ } .editor-sources-btn { - border: 1px solid #2a2a2e; + border: 1px solid var(--color-border); background: transparent; font-size: 11px; - color: #7c3aed; + color: var(--color-accent); cursor: pointer; padding: 3px 8px; border-radius: 4px; @@ -1206,17 +1206,17 @@ } .editor-sources-btn:hover { - background: #f5f3ff; + background: var(--color-surface); } .editor-sources-btn-active { - background: #ede9fe; - border-color: #c4b5fd; + background: var(--color-surface-hover); + border-color: var(--color-accent); } .editor-save-btn { border: none; - background: #2563eb; + background: var(--color-accent); color: white; font-size: 11px; font-weight: 500; @@ -1227,7 +1227,7 @@ } .editor-save-btn:hover { - background: #1d4ed8; + background: var(--color-accent-hover); } .editor-save-btn:disabled { @@ -1240,11 +1240,11 @@ } .editor-save-ok { - color: #059669; + color: var(--color-success); } .editor-save-error { - color: #dc2626; + color: var(--color-error); } .editor-body { @@ -1267,10 +1267,10 @@ width: 100%; padding: 6px 4px; border: none; - border-bottom: 1px solid #2a2a2e; + border-bottom: 1px solid var(--color-border); font-size: 16px; font-weight: 600; - color: #e8e8ec; + color: var(--color-text); outline: none; box-sizing: border-box; flex-shrink: 0; @@ -1278,7 +1278,7 @@ } .editor-title-input:focus { - border-bottom-color: #60a5fa; + border-bottom-color: var(--color-accent); } .editor-textarea { @@ -1288,7 +1288,7 @@ border: none; font-size: 14px; font-family: inherit; - color: #8a8a96; + color: var(--color-text-muted); line-height: 1.6; outline: none; resize: none; @@ -1303,16 +1303,16 @@ .editor-sources-panel { width: 180px; flex-shrink: 0; - border-left: 1px solid #f3f4f6; + border-left: 1px solid var(--color-border); padding: 10px; overflow-y: auto; - background: #fafafa; + background: var(--color-surface); } .editor-sources-title { font-size: 11px; font-weight: 600; - color: #8a8a96; + color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; @@ -1337,7 +1337,7 @@ } .editor-source-item:hover { - background: #242428; + background: var(--color-surface-hover); } .editor-source-icon { @@ -1357,14 +1357,14 @@ .editor-source-name { font-size: 12px; font-weight: 500; - color: #8a8a96; + color: var(--color-text-muted); word-break: break-word; line-height: 1.3; } .editor-source-context { font-size: 10px; - color: #5a5a66; + color: var(--color-text-dim); } /* ================================================================= */ diff --git a/frontend/src/lib/components/traits/KanbanTrait.svelte b/frontend/src/lib/components/traits/KanbanTrait.svelte index 62edd6e..9f4030e 100644 --- a/frontend/src/lib/components/traits/KanbanTrait.svelte +++ b/frontend/src/lib/components/traits/KanbanTrait.svelte @@ -388,7 +388,7 @@ justify-content: center; flex: 1; padding: 24px; - color: #5a5a66; + color: var(--color-text-dim); font-size: 13px; text-align: center; gap: 8px; @@ -420,14 +420,14 @@ flex: 1 1 0; min-width: 140px; max-width: 320px; - background: #242428; + background: var(--color-surface-hover); border-radius: 8px; overflow: hidden; transition: box-shadow 0.15s; } .kanban-column-dragover { - box-shadow: inset 0 0 0 2px #60a5fa; + box-shadow: inset 0 0 0 2px var(--color-accent); } .kanban-column-header { @@ -441,15 +441,15 @@ .kanban-column-title { font-size: 12px; font-weight: 600; - color: #8a8a96; + color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .kanban-column-count { font-size: 11px; - color: #5a5a66; - background: #1c1c20; + color: var(--color-text-dim); + background: var(--color-surface); border-radius: 9999px; padding: 0 6px; line-height: 18px; @@ -469,8 +469,8 @@ /* Card */ /* ================================================================= */ .kanban-card { - background: #1c1c20; - border: 1px solid #2a2a2e; + background: var(--color-surface); + border: 1px solid var(--color-border); border-radius: 6px; padding: 8px 10px; cursor: grab; @@ -493,7 +493,7 @@ display: block; font-size: 13px; font-weight: 500; - color: #e8e8ec; + color: var(--color-text); line-height: 1.3; word-break: break-word; } @@ -504,7 +504,7 @@ -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; - color: #8a8a96; + color: var(--color-text-muted); margin-top: 3px; line-height: 1.3; } @@ -512,7 +512,7 @@ .kanban-card-time { display: block; font-size: 10px; - color: #5a5a66; + color: var(--color-text-dim); margin-top: 4px; } @@ -526,7 +526,7 @@ border: none; background: transparent; font-size: 12px; - color: #5a5a66; + color: var(--color-text-dim); text-align: left; cursor: pointer; border-radius: 4px; @@ -535,12 +535,12 @@ .kanban-add-trigger:hover { background: rgba(255, 255, 255, 0.6); - color: #8a8a96; + color: var(--color-text-muted); } .kanban-add-form { - background: #1c1c20; - border: 1px solid #bfdbfe; + background: var(--color-surface); + border: 1px solid var(--color-accent); border-radius: 6px; padding: 6px; } @@ -548,7 +548,7 @@ .kanban-add-input { width: 100%; padding: 4px 6px; - border: 1px solid #2a2a2e; + border: 1px solid var(--color-border); border-radius: 4px; font-size: 12px; outline: none; @@ -556,7 +556,7 @@ } .kanban-add-input:focus { - border-color: #60a5fa; + border-color: var(--color-accent); } .kanban-add-actions { @@ -571,13 +571,13 @@ border-radius: 4px; font-size: 11px; font-weight: 500; - background: #2563eb; + background: var(--color-accent); color: white; cursor: pointer; } .kanban-add-btn:hover { - background: #1d4ed8; + background: var(--color-accent-hover); } .kanban-add-btn:disabled { @@ -591,12 +591,12 @@ border-radius: 4px; font-size: 11px; background: transparent; - color: #8a8a96; + color: var(--color-text-muted); cursor: pointer; } .kanban-cancel-btn:hover { - background: #242428; + background: var(--color-surface-hover); } /* ================================================================= */ diff --git a/frontend/src/lib/components/traits/MindMapTrait.svelte b/frontend/src/lib/components/traits/MindMapTrait.svelte index 665a5ad..bc150c2 100644 --- a/frontend/src/lib/components/traits/MindMapTrait.svelte +++ b/frontend/src/lib/components/traits/MindMapTrait.svelte @@ -505,7 +505,7 @@ width: 100%; height: 100%; min-height: 200px; - background: #141416; + background: var(--color-bg); overflow: hidden; } @@ -515,8 +515,8 @@ justify-content: space-between; gap: 8px; padding: 6px 10px; - border-bottom: 1px solid #2a2a2e; - background: #1c1c20; + border-bottom: 1px solid var(--color-border); + background: var(--color-surface); flex-shrink: 0; flex-wrap: wrap; } @@ -531,7 +531,7 @@ .mindmap-title { font-size: 13px; font-weight: 600; - color: #8a8a96; + color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -540,32 +540,32 @@ .mindmap-count { font-size: 11px; - color: #5a5a66; + color: var(--color-text-dim); } .mindmap-btn { padding: 3px 8px; - border: 1px solid #2a2a2e; + border: 1px solid var(--color-border); border-radius: 4px; - background: #1c1c20; + background: var(--color-surface); font-size: 11px; - color: #8a8a96; + color: var(--color-text-muted); cursor: pointer; } .mindmap-btn:hover { - background: #242428; + background: var(--color-surface-hover); } .mindmap-btn-active { - background: #eef2ff; - border-color: #818cf8; - color: #4f46e5; + background: var(--color-surface); + border-color: var(--color-accent); + color: var(--color-accent); } .mindmap-depth-label { font-size: 11px; - color: #8a8a96; + color: var(--color-text-muted); display: flex; align-items: center; gap: 3px; @@ -573,9 +573,9 @@ .mindmap-depth-select { padding: 1px 4px; - border: 1px solid #2a2a2e; + border: 1px solid var(--color-border); border-radius: 3px; - background: #1c1c20; + background: var(--color-surface); font-size: 11px; } @@ -599,25 +599,25 @@ align-items: center; justify-content: center; font-size: 13px; - color: #5a5a66; + color: var(--color-text-dim); } .mindmap-empty-sub { font-size: 11px; - color: #d1d5db; + color: var(--color-text-muted); margin-top: 4px; } .mindmap-legend { padding: 4px 10px; - border-top: 1px solid #e5e7eb; - background: #1c1c20; + border-top: 1px solid var(--color-border); + background: var(--color-surface); flex-shrink: 0; } .mindmap-legend-hint { font-size: 10px; - color: #5a5a66; + color: var(--color-text-dim); } /* Mobile: simplify */ diff --git a/frontend/src/lib/components/traits/OrchestrationTrait.svelte b/frontend/src/lib/components/traits/OrchestrationTrait.svelte index ebce131..357de3a 100644 --- a/frontend/src/lib/components/traits/OrchestrationTrait.svelte +++ b/frontend/src/lib/components/traits/OrchestrationTrait.svelte @@ -554,7 +554,7 @@ justify-content: center; flex: 1; padding: 24px; - color: #5a5a66; + color: var(--color-text-dim); text-align: center; gap: 4px; } @@ -565,7 +565,7 @@ .orch-empty-hint { font-size: 11px; - color: #d1d5db; + color: var(--color-text-muted); margin-top: 4px; } @@ -574,24 +574,24 @@ /* ================================================================= */ .orch-selector { padding: 8px 12px; - border-bottom: 1px solid #2a2a2e; + border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .orch-title { font-weight: 600; font-size: 14px; - color: #e8e8ec; + color: var(--color-text); } .orch-select { width: 100%; padding: 4px 8px; - border: 1px solid #2a2a2e; + border: 1px solid var(--color-border); border-radius: 4px; font-size: 13px; - background: #1c1c20; - color: #e8e8ec; + background: var(--color-surface); + color: var(--color-text); } .orch-select-sm { @@ -604,7 +604,7 @@ /* ================================================================= */ .orch-trigger { padding: 6px 12px; - border-bottom: 1px solid #2a2a2e; + border-bottom: 1px solid var(--color-border); flex-shrink: 0; } @@ -617,7 +617,7 @@ .orch-label { font-size: 11px; - color: #8a8a96; + color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; @@ -629,7 +629,7 @@ .orch-tabs { display: flex; align-items: center; - border-bottom: 1px solid #2a2a2e; + border-bottom: 1px solid var(--color-border); flex-shrink: 0; padding: 0 8px; gap: 0; @@ -643,19 +643,19 @@ border: none; background: transparent; font-size: 12px; - color: #8a8a96; + color: var(--color-text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.12s, border-color 0.12s; } .orch-tab:hover { - color: #8a8a96; + color: var(--color-text-muted); } .orch-tab-active { - color: #4f46e5; - border-bottom-color: #4f46e5; + color: var(--color-accent); + border-bottom-color: var(--color-accent); font-weight: 500; } @@ -667,8 +667,8 @@ } .orch-tab-badge-error { - background: #fef2f2; - color: #dc2626; + background: var(--color-surface); + color: var(--color-error); } .orch-tab-spacer { @@ -683,18 +683,18 @@ } .orch-status-compiling { - color: #8a8a96; - background: #242428; + color: var(--color-text-muted); + background: var(--color-surface-hover); } .orch-status-ok { - color: #059669; - background: #ecfdf5; + color: var(--color-success); + background: var(--color-surface); } .orch-status-error { - color: #dc2626; - background: #fef2f2; + color: var(--color-error); + background: var(--color-surface); } /* ================================================================= */ @@ -724,13 +724,13 @@ font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 13px; line-height: 1.5; - color: #e8e8ec; - background: #141416; + color: var(--color-text); + background: var(--color-bg); outline: none; } .orch-editor::placeholder { - color: #c4c9d0; + color: var(--color-text-muted); } .orch-readonly { @@ -740,8 +740,8 @@ font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 12px; line-height: 1.5; - color: #8a8a96; - background: #141416; + color: var(--color-text-muted); + background: var(--color-bg); border: none; overflow: auto; white-space: pre-wrap; @@ -750,21 +750,21 @@ .orch-readonly-json { font-size: 11px; - color: #4b5563; + color: var(--color-text-dim); } /* ================================================================= */ /* Diagnostics */ /* ================================================================= */ .orch-diagnostics { - border-top: 1px solid #e5e7eb; + border-top: 1px solid var(--color-border); padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; max-height: 160px; overflow-y: auto; - background: #1c1c20; + background: var(--color-surface); flex-shrink: 0; } @@ -783,30 +783,30 @@ } .orch-diag-ok .orch-diag-icon { - color: #059669; + color: var(--color-success); } .orch-diag-error .orch-diag-icon { - color: #dc2626; + color: var(--color-error); } .orch-diag-line { font-size: 10px; - color: #5a5a66; + color: var(--color-text-dim); font-variant-numeric: tabular-nums; flex-shrink: 0; } .orch-diag-text { - color: #8a8a96; + color: var(--color-text-muted); } .orch-diag-error .orch-diag-text { - color: #dc2626; + color: var(--color-error); } .orch-diag-suggestion { - color: #7c3aed; + color: var(--color-accent); font-style: italic; } @@ -818,14 +818,14 @@ align-items: center; gap: 8px; padding: 8px 12px; - border-top: 1px solid #e5e7eb; + border-top: 1px solid var(--color-border); flex-shrink: 0; flex-wrap: wrap; } .orch-btn { padding: 5px 12px; - border: 1px solid #2a2a2e; + border: 1px solid var(--color-border); border-radius: 5px; font-size: 12px; font-weight: 500; @@ -839,37 +839,37 @@ } .orch-btn-primary { - background: #4f46e5; + background: var(--color-accent); color: white; - border-color: #4f46e5; + border-color: var(--color-accent); } .orch-btn-primary:hover:not(:disabled) { - background: #4338ca; + background: var(--color-accent-hover); } .orch-btn-test { - background: #059669; + background: var(--color-success); color: white; - border-color: #059669; + border-color: var(--color-success); } .orch-btn-test:hover:not(:disabled) { - background: #047857; + background: var(--color-success); } .orch-btn-secondary { - background: #1c1c20; - color: #8a8a96; + background: var(--color-surface); + color: var(--color-text-muted); } .orch-btn-secondary:hover:not(:disabled) { - background: #242428; + background: var(--color-surface-hover); } .orch-test-info { font-size: 11px; - color: #8a8a96; + color: var(--color-text-muted); font-family: monospace; } @@ -877,10 +877,10 @@ /* History panel */ /* ================================================================= */ .orch-history { - border-top: 1px solid #e5e7eb; + border-top: 1px solid var(--color-border); max-height: 240px; overflow-y: auto; - background: #141416; + background: var(--color-bg); flex-shrink: 0; } @@ -891,31 +891,31 @@ padding: 6px 12px; font-size: 11px; font-weight: 600; - color: #8a8a96; - border-bottom: 1px solid #2a2a2e; + color: var(--color-text-muted); + border-bottom: 1px solid var(--color-border); position: sticky; top: 0; - background: #141416; + background: var(--color-bg); } .orch-btn-refresh { padding: 2px 8px; - border: 1px solid #2a2a2e; + border: 1px solid var(--color-border); border-radius: 3px; font-size: 10px; - background: #1c1c20; + background: var(--color-surface); cursor: pointer; - color: #4b5563; + color: var(--color-text-dim); } .orch-btn-refresh:hover { - background: #242428; + background: var(--color-surface-hover); } .orch-history-empty { padding: 12px; text-align: center; - color: #5a5a66; + color: var(--color-text-dim); font-size: 12px; } @@ -930,7 +930,7 @@ gap: 8px; padding: 5px 12px; font-size: 11px; - border-bottom: 1px solid #f3f4f6; + border-bottom: 1px solid var(--color-border); flex-wrap: wrap; } @@ -942,16 +942,16 @@ } .orch-history-ok .orch-history-status { - color: #059669; + color: var(--color-success); } .orch-history-error .orch-history-status { - color: #dc2626; + color: var(--color-error); } .orch-history-step { font-size: 10px; - color: #8a8a96; + color: var(--color-text-muted); font-variant-numeric: tabular-nums; min-width: 20px; } @@ -959,18 +959,18 @@ .orch-history-binary { font-family: monospace; font-size: 11px; - color: #e8e8ec; + color: var(--color-text); } .orch-history-duration { font-size: 10px; - color: #5a5a66; + color: var(--color-text-dim); font-variant-numeric: tabular-nums; } .orch-history-time { font-size: 10px; - color: #5a5a66; + color: var(--color-text-dim); margin-left: auto; } @@ -978,7 +978,7 @@ width: 100%; padding: 3px 0 3px 22px; font-size: 10px; - color: #dc2626; + color: var(--color-error); word-break: break-word; } @@ -986,9 +986,9 @@ /* AI-assist panel */ /* ================================================================= */ .orch-ai-panel { - border-top: 1px solid #e5e7eb; + border-top: 1px solid var(--color-border); padding: 8px 12px; - background: #f0f4ff; + background: var(--color-surface); display: flex; flex-direction: column; gap: 6px; @@ -1004,7 +1004,7 @@ .orch-ai-label { font-size: 11px; font-weight: 600; - color: #4f46e5; + color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.03em; } @@ -1013,43 +1013,43 @@ border: none; background: transparent; font-size: 16px; - color: #8a8a96; + color: var(--color-text-muted); cursor: pointer; padding: 0 4px; line-height: 1; } .orch-btn-close:hover { - color: #e8e8ec; + color: var(--color-text); } .orch-ai-input { width: 100%; padding: 6px 8px; - border: 1px solid #c7d2fe; + border: 1px solid var(--color-accent); border-radius: 4px; font-size: 13px; font-family: inherit; resize: vertical; min-height: 48px; - background: #1c1c20; - color: #e8e8ec; + background: var(--color-surface); + color: var(--color-text); } .orch-ai-input::placeholder { - color: #a5b4fc; + color: var(--color-accent); } .orch-ai-input:focus { outline: none; - border-color: #4f46e5; + border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1); } .orch-ai-error { font-size: 11px; - color: #dc2626; - background: #fef2f2; + color: var(--color-error); + background: var(--color-surface); padding: 4px 8px; border-radius: 3px; } @@ -1060,23 +1060,23 @@ } .orch-btn-ai { - background: #4f46e5; + background: var(--color-accent); color: white; - border-color: #4f46e5; + border-color: var(--color-accent); } .orch-btn-ai:hover:not(:disabled) { - background: #4338ca; + background: var(--color-accent-hover); } .orch-btn-ai-toggle { - background: #eef2ff; - color: #4f46e5; - border-color: #c7d2fe; + background: var(--color-surface); + color: var(--color-accent); + border-color: var(--color-accent); } .orch-btn-ai-toggle:hover:not(:disabled) { - background: #e0e7ff; + background: var(--color-surface-hover); } /* ================================================================= */ diff --git a/frontend/src/lib/components/traits/StudioTrait.svelte b/frontend/src/lib/components/traits/StudioTrait.svelte index 321e702..81c0e75 100644 --- a/frontend/src/lib/components/traits/StudioTrait.svelte +++ b/frontend/src/lib/components/traits/StudioTrait.svelte @@ -238,7 +238,7 @@ justify-content: center; flex: 1; padding: 24px; - color: #5a5a66; + color: var(--color-text-dim); font-size: 13px; text-align: center; gap: 4px; @@ -250,7 +250,7 @@ .studio-empty-hint { font-size: 11px; - color: #d1d5db; + color: var(--color-text-muted); margin-top: 4px; } @@ -263,20 +263,20 @@ justify-content: space-between; padding: 8px 12px; flex-shrink: 0; - border-bottom: 1px solid #f3f4f6; + border-bottom: 1px solid var(--color-border); } .studio-header-label { font-size: 11px; - color: #5a5a66; + color: var(--color-text-dim); text-transform: uppercase; letter-spacing: 0.03em; } .studio-header-count { font-size: 11px; - color: #5a5a66; - background: #242428; + color: var(--color-text-dim); + background: var(--color-surface-hover); border-radius: 9999px; padding: 0 6px; line-height: 18px; @@ -296,8 +296,8 @@ } .studio-item { - background: #1c1c20; - border: 1px solid #2a2a2e; + background: var(--color-surface); + border: 1px solid var(--color-border); border-radius: 6px; padding: 8px 10px; cursor: grab; @@ -306,7 +306,7 @@ .studio-item:hover { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); - border-color: #d1d5db; + border-color: var(--color-text-muted); } .studio-item:active { @@ -336,7 +336,7 @@ .studio-item-title { font-size: 13px; font-weight: 500; - color: #e8e8ec; + color: var(--color-text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; @@ -353,8 +353,8 @@ .studio-item-tag { font-size: 9px; font-weight: 600; - color: #7c3aed; - background: #ede9fe; + color: var(--color-accent); + background: var(--color-surface-hover); border-radius: 3px; padding: 0 4px; line-height: 16px; @@ -362,18 +362,18 @@ .studio-item-duration { font-size: 11px; - color: #8a8a96; + color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .studio-item-size { font-size: 10px; - color: #5a5a66; + color: var(--color-text-dim); } .studio-item-date { font-size: 10px; - color: #5a5a66; + color: var(--color-text-dim); } .studio-item-actions { @@ -385,7 +385,7 @@ .studio-item-versions { font-size: 10px; - color: #059669; + color: var(--color-success); white-space: nowrap; } @@ -394,15 +394,15 @@ border-radius: 4px; font-size: 11px; font-weight: 500; - background: #ede9fe; - color: #7c3aed; + background: var(--color-surface-hover); + color: var(--color-accent); text-decoration: none; transition: background 0.1s; white-space: nowrap; } .studio-edit-btn:hover { - background: #ddd6fe; + background: var(--color-surface-hover); } /* ================================================================= */