Tema-slidere påvirker hele workspace + ny arbeidsflate med default traits

- Erstattet hardkodede hex-farger med var(--color-*) i alle style-blokker
  slik at tema-sliderne faktisk endrer bakgrunn, overflater, border og aksent
- Ny arbeidsflate opprettes med chat/editor/kanban/kalender som default
  traits i stedet for tom samling uten traits

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
vegard 2026-03-19 05:19:46 +00:00
parent d82fab25df
commit b8bb8703ca

View file

@ -294,6 +294,14 @@
node_kind: 'collection', node_kind: 'collection',
title: 'Ny arbeidsflate', title: 'Ny arbeidsflate',
visibility: 'hidden', visibility: 'hidden',
metadata: {
traits: {
chat: {},
editor: {},
kanban: {},
calendar: {},
}
},
}); });
await createEdge(accessToken, { await createEdge(accessToken, {
source_id: nodeId, source_id: nodeId,
@ -828,15 +836,15 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
background: #0a0a0b; background: var(--color-bg, #0a0a0b);
} }
/* ================================================================= */ /* ================================================================= */
/* Context header (inline — personal workspace variant) */ /* Context header (inline — personal workspace variant) */
/* ================================================================= */ /* ================================================================= */
.context-header { .context-header {
border-bottom: 1px solid #2a2a2e; border-bottom: 1px solid var(--color-border, #2a2a2e);
background: #1c1c20; background: var(--color-surface, #1c1c20);
flex-shrink: 0; flex-shrink: 0;
z-index: 30; z-index: 30;
position: relative; position: relative;
@ -904,7 +912,7 @@
} }
.context-selector-trigger:hover { .context-selector-trigger:hover {
background: #242428; background: var(--color-surface-hover, #242428);
border-color: #e5e7eb; border-color: #e5e7eb;
} }
@ -931,8 +939,8 @@
left: 0; left: 0;
min-width: 260px; min-width: 260px;
max-width: 360px; max-width: 360px;
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 8px 24px rgba(0, 0, 0, 0.12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
z-index: 50; z-index: 50;
@ -947,16 +955,16 @@
.context-selector-search-input { .context-selector-search-input {
width: 100%; width: 100%;
padding: 6px 10px; padding: 6px 10px;
border: 1px solid #2a2a2e; border: 1px solid var(--color-border, #2a2a2e);
border-radius: 6px; border-radius: 6px;
font-size: 13px; font-size: 13px;
outline: none; outline: none;
background: #141416; background: var(--color-bg, #141416);
} }
.context-selector-search-input:focus { .context-selector-search-input:focus {
border-color: #4f46e5; border-color: var(--color-accent, #4f46e5);
background: #1c1c20; background: var(--color-surface, #1c1c20);
} }
.context-selector-list { .context-selector-list {
@ -982,7 +990,7 @@
} }
.context-selector-item:hover { .context-selector-item:hover {
background: #242428; background: var(--color-surface-hover, #242428);
} }
.context-selector-item-title { .context-selector-item-title {
@ -1014,8 +1022,8 @@
top: calc(100% + 4px); top: calc(100% + 4px);
right: 0; right: 0;
min-width: 200px; min-width: 200px;
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 8px 24px rgba(0, 0, 0, 0.12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
z-index: 50; z-index: 50;
@ -1049,7 +1057,7 @@
} }
.tool-menu-item:hover:not(:disabled) { .tool-menu-item:hover:not(:disabled) {
background: #242428; background: var(--color-surface-hover, #242428);
} }
.tool-menu-item:disabled { .tool-menu-item:disabled {
@ -1073,7 +1081,7 @@
.tool-menu-item-badge { .tool-menu-item-badge {
font-size: 10px; font-size: 10px;
color: #5a5a66; color: #5a5a66;
background: #242428; background: var(--color-surface-hover, #242428);
padding: 1px 6px; padding: 1px 6px;
border-radius: 4px; border-radius: 4px;
} }
@ -1097,7 +1105,7 @@
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
background: #242428; background: var(--color-surface-hover, #242428);
color: #4b5563; color: #4b5563;
transition: background 0.12s; transition: background 0.12s;
} }
@ -1172,9 +1180,9 @@
align-items: center; align-items: center;
gap: 6px; gap: 6px;
padding: 8px 14px; padding: 8px 14px;
border: 1px solid #2a2a2e; border: 1px solid var(--color-border, #2a2a2e);
border-radius: 8px; border-radius: 8px;
background: #1c1c20; background: var(--color-surface, #1c1c20);
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
color: #8a8a96; color: #8a8a96;
@ -1182,7 +1190,7 @@
} }
.workspace-empty-tool:hover { .workspace-empty-tool:hover {
border-color: #4f46e5; border-color: var(--color-accent, #4f46e5);
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.1); box-shadow: 0 2px 8px rgba(79, 70, 229, 0.1);
} }
@ -1209,8 +1217,8 @@
display: flex; display: flex;
overflow-x: auto; overflow-x: auto;
gap: 0; gap: 0;
background: #1c1c20; background: var(--color-surface, #1c1c20);
border-bottom: 1px solid #2a2a2e; border-bottom: 1px solid var(--color-border, #2a2a2e);
flex-shrink: 0; flex-shrink: 0;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
@ -1235,8 +1243,8 @@
} }
.mobile-tab-active { .mobile-tab-active {
color: #4f46e5; color: var(--color-accent, #4f46e5);
border-bottom-color: #4f46e5; border-bottom-color: var(--color-accent, #4f46e5);
font-weight: 500; font-weight: 500;
} }
@ -1295,7 +1303,7 @@
.context-selector-rename-btn:hover { .context-selector-rename-btn:hover {
opacity: 1 !important; opacity: 1 !important;
background: #242428; background: var(--color-surface-hover, #242428);
} }
.context-selector-rename-input { .context-selector-rename-input {
@ -1311,14 +1319,14 @@
} }
.context-selector-footer { .context-selector-footer {
border-top: 1px solid #2a2a2e; border-top: 1px solid var(--color-border, #2a2a2e);
padding: 6px; padding: 6px;
} }
.context-selector-new-btn { .context-selector-new-btn {
width: 100%; width: 100%;
padding: 8px 10px; padding: 8px 10px;
border: 1px dashed #2a2a2e; border: 1px dashed var(--color-border, #2a2a2e);
border-radius: 6px; border-radius: 6px;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
@ -1328,7 +1336,7 @@
} }
.context-selector-new-btn:hover:not(:disabled) { .context-selector-new-btn:hover:not(:disabled) {
border-color: #6366f1; border-color: var(--color-accent, #6366f1);
color: #8a8a96; color: #8a8a96;
} }
@ -1353,9 +1361,9 @@
top: calc(100% + 4px); top: calc(100% + 4px);
right: 0; right: 0;
min-width: 220px; min-width: 220px;
background: #1c1c20;
background: var(--color-surface, #1c1c20); background: var(--color-surface, #1c1c20);
border: 1px solid #2a2a2e; background: var(--color-surface, #1c1c20);
border: 1px solid var(--color-border, #2a2a2e);
border: 1px solid var(--color-border, #2a2a2e); border: 1px solid var(--color-border, #2a2a2e);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
@ -1433,7 +1441,7 @@
} }
.settings-signout:hover { .settings-signout:hover {
background: #242428; background: var(--color-surface-hover, #242428);
color: #e8e8ec; color: #e8e8ec;
} }