style: unify all views on Mission Control V2 design tokens
CI - Build & Test / Backend (.NET) (push) Successful in 31s
CI - Build & Test / Frontend (Vue/TS) (push) Successful in 16s
CI - Build & Test / Security Check (push) Successful in 3s
CI - Build & Test / Deploy Nexus (push) Has been skipped

- Map legacy v1 CSS variables (--nx-*, --panel, --text-*, --surface*) to V2 tokens in nexus-tokens.css
- Restyle global shell (main.css), AppSidebar, AppHeader to match V2 Sidebar/Topbar (glass, gradients, Space Grotesk)
- Add GalaxyBackground to the v1 shell in App.vue
- Replace hardcoded v1 hex colors with V2 tokens in all deviating views (Agents, Calendar, Docs, Incidents, Memory, Notifications, ProjectDetail, Security, Team, TaskDetail, Settings)
- Keep JS status colors as hex where alpha suffixes are concatenated (AgentsIndex, Team, Notifications)
- Add Settings nav item (System group) + gear icon to V2 sidebar so it shows on the dashboard
- No component or layout structure changes; LoginView and TaskBoardView untouched

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-10 08:05:52 +02:00
parent 706ff82ccd
commit 86ceb2bcce
18 changed files with 523 additions and 431 deletions
+32 -32
View File
@@ -203,14 +203,14 @@ onMounted(loadDocs)
border: 1px solid var(--line);
border-radius: 8px;
background: var(--panel);
color: #6f7889;
color: var(--tx-3);
}
.docs-search-bar input {
flex: 1;
border: none;
outline: none;
background: transparent;
color: #e8eaf0;
color: var(--tx);
font: inherit;
font-size: 13px;
}
@@ -222,13 +222,13 @@ onMounted(loadDocs)
border: 1px solid var(--line);
border-radius: 8px;
background: var(--panel);
color: #8991a1;
color: var(--tx-2);
}
.docs-filter-group select {
border: none;
outline: none;
background: transparent;
color: #e8eaf0;
color: var(--tx);
font: inherit;
font-size: 12px;
cursor: pointer;
@@ -241,7 +241,7 @@ onMounted(loadDocs)
}
.memory-sidebar {
border: 1px solid var(--line);
border-radius: 9px;
border-radius: var(--r);
background: var(--panel);
padding: 8px;
max-height: 640px;
@@ -250,7 +250,7 @@ onMounted(loadDocs)
.memory-list-header {
font-size: 9px;
font-weight: 700;
color: #7065c8;
color: var(--a-mid);
text-transform: uppercase;
letter-spacing: 0.14em;
padding: 10px 8px 6px;
@@ -264,7 +264,7 @@ onMounted(loadDocs)
border: none;
border-radius: 7px;
background: transparent;
color: #e8eaf0;
color: var(--tx);
text-align: left;
cursor: pointer;
font: inherit;
@@ -280,7 +280,7 @@ onMounted(loadDocs)
display: grid;
place-items: center;
border-radius: 6px;
color: #a99cf5;
color: var(--a-mid);
background: rgba(139,124,246,.1);
}
.memory-file-info strong {
@@ -305,41 +305,41 @@ onMounted(loadDocs)
}
.doc-category-badge.cat-phases {
background: rgba(139,124,246,.12);
color: #a99cf5;
color: var(--a-mid);
}
.doc-category-badge.cat-skills {
background: rgba(81,212,154,.1);
color: #51d49a;
color: var(--st-work);
}
.doc-category-badge.cat-workspace {
background: rgba(229,176,94,.1);
color: #e5b05e;
color: var(--st-queue);
}
.doc-category-badge.cat-nexus {
background: rgba(109,159,230,.1);
color: #6d9fe6;
color: var(--a-blue);
}
.doc-category-badge.cat-nexus-phases {
background: rgba(225,110,117,.1);
color: #e16e75;
color: var(--st-block);
}
.doc-type-tag {
font-size: 8px;
padding: 1px 5px;
border: 1px solid #343947;
border: 1px solid var(--line-2);
border-radius: 4px;
color: #8991a1;
color: var(--tx-2);
}
.memory-file-meta {
display: flex;
align-items: center;
gap: 4px;
font-size: 9px;
color: #7e8799;
color: var(--tx-3);
}
.memory-content {
border: 1px solid var(--line);
border-radius: 9px;
border-radius: var(--r);
background: var(--panel);
padding: 24px;
min-height: 480px;
@@ -363,7 +363,7 @@ onMounted(loadDocs)
align-items: center;
gap: 4px;
font-size: 9px;
color: #7e8799;
color: var(--tx-3);
margin-top: 4px;
}
.memory-back-btn {
@@ -374,13 +374,13 @@ onMounted(loadDocs)
border: 1px solid var(--line);
border-radius: 6px;
background: transparent;
color: #8991a1;
color: var(--tx-2);
font-size: 10px;
cursor: pointer;
flex-shrink: 0;
}
.memory-back-btn:hover {
color: #e8eaf0;
color: var(--tx);
background: var(--accent-soft);
}
.memory-status {
@@ -389,11 +389,11 @@ onMounted(loadDocs)
justify-content: center;
gap: 8px;
padding: 32px;
color: #7e8799;
color: var(--tx-3);
font-size: 11px;
}
.memory-status.error {
color: #e16e75;
color: var(--st-block);
}
.memory-empty-state {
display: flex;
@@ -402,27 +402,27 @@ onMounted(loadDocs)
justify-content: center;
text-align: center;
min-height: 360px;
color: #6b7385;
color: var(--tx-3);
}
.memory-empty-state h3 {
margin: 12px 0 6px;
font-size: 14px;
color: #a5adba;
color: var(--tx-2);
}
.memory-empty-state p {
margin: 0;
font-size: 10px;
color: #7e8799;
color: var(--tx-3);
}
.memory-rendered {
font-size: 12px;
line-height: 1.7;
color: #d0d4dd;
color: var(--tx-2);
}
.memory-rendered :deep(h1),
.memory-rendered :deep(h2),
.memory-rendered :deep(h3) {
color: #e8eaf0;
color: var(--tx);
margin: 1.2em 0 0.5em;
}
.memory-rendered :deep(h1) { font-size: 1.3rem; }
@@ -438,8 +438,8 @@ onMounted(loadDocs)
.memory-rendered :deep(pre) {
padding: 12px;
border-radius: 8px;
background: #0d1016;
border: 1px solid var(--nx-line);
background: var(--space-2);
border: 1px solid var(--line);
overflow-x: auto;
}
.memory-rendered :deep(pre code) {
@@ -447,7 +447,7 @@ onMounted(loadDocs)
padding: 0;
}
.memory-rendered :deep(a) {
color: #a99cf5;
color: var(--a-mid);
text-decoration: none;
}
.memory-rendered :deep(a:hover) {
@@ -461,11 +461,11 @@ onMounted(loadDocs)
}
.memory-rendered :deep(hr) {
border: none;
border-top: 1px solid var(--nx-line);
border-top: 1px solid var(--line);
margin: 1.2em 0;
}
.memory-rendered :deep(strong) {
color: #e8eaf0;
color: var(--tx);
}
.spin {
animation: spin 1s linear infinite;