developer/galaxy-game
1
1
Fork 0
Code Issues Pull Requests Actions Packages Releases Wiki Activity

feat(ui): migrate all view bodies to design tokens (F1b)
Tests · UI / test (push) Successful in 2m11s
Details
Tests · UI / test (pull_request) Successful in 2m7s
Details

Browse Source 
Tokenize every remaining component <style> — calculator, order tab,
inspectors, tables, report sections, lobby, auth, mail, battle viewer,
toasts, map overlays. A scripted pass handled the unambiguous core
palette (text/bg/surface/border/accent/danger/muted), the rest were
mapped to the semantic/grey tokens by role.

Remaining colour literals are the documented exceptions only: the
battle-scene SVG data-visualisation palette (fixed dark, like the WebGL
map canvas), overlay scrims (modal / map-canvas), and directional or
deliberate drop shadows. The default theme stays dark until light
coherence is signed off across the views.

Updates ui/docs/design-system.md (migration status + exceptions).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ilia Denisov
2026-05-22 07:24:02 +02:00
parent 973480d812
commit 4ad96b0ef7
58 changed files with 515 additions and 497 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/frontend/src/lib/header/history-banner.svelte
+5 -5
View File
@@ -51,9 +51,9 @@ budget.
align-items: center;
gap: 0.75rem;
padding: 0.4rem 0.9rem;
background: #2a2438;
color: #efe9c8;
border-bottom: 1px solid #45375a;
background: var(--color-surface);
color: var(--color-warning);
border-bottom: 1px solid var(--color-border);
font-family: system-ui, sans-serif;
font-size: 0.9rem;
}
@@ -69,12 +69,12 @@ budget.
padding: 0.25rem 0.65rem;
background: transparent;
color: inherit;
border: 1px solid #6c5a8a;
border: 1px solid var(--color-border-strong);
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
}
.return:hover {
background: #3a3050;
background: var(--color-surface-hover);
}
</style>
ui/frontend/src/lib/header/turn-navigator.svelte
+9 -9
View File
@@ -177,14 +177,14 @@ Selecting a row calls `gameState.viewTurn(N)`; the row that matches
padding: 0.25rem 0.55rem;
background: transparent;
color: inherit;
border: 1px solid #2a3150;
border: 1px solid var(--color-border);
border-radius: 4px;
cursor: pointer;
line-height: 1;
}
.step:hover:not(:disabled),
.trigger:hover:not(:disabled) {
background: #1c2238;
background: var(--color-surface-hover);
}
.step:disabled,
.trigger:disabled {
@@ -204,10 +204,10 @@ Selecting a row calls `gameState.viewTurn(N)`; the row that matches
overflow-y: auto;
display: flex;
flex-direction: column;
background: #14182a;
border: 1px solid #2a3150;
background: var(--color-surface-overlay);
border: 1px solid var(--color-border);
border-radius: 6px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
box-shadow: var(--shadow-lg);
z-index: 50;
}
.row {
@@ -224,11 +224,11 @@ Selecting a row calls `gameState.viewTurn(N)`; the row that matches
cursor: pointer;
}
.row:hover {
background: #1c2238;
background: var(--color-surface-hover);
}
.row.viewed {
font-weight: 600;
background: #1a2040;
background: var(--color-surface-raised);
}
.label {
flex: 1;
@@ -243,8 +243,8 @@ Selecting a row calls `gameState.viewTurn(N)`; the row that matches
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 0.05rem 0.4rem;
background: #2a3150;
color: #d8def0;
background: var(--color-border);
color: var(--color-text);
border-radius: 999px;
}
@media (max-width: 767.98px) {
ui/frontend/src/lib/header/view-menu.svelte
+10 -10
View File
@@ -157,12 +157,12 @@ polishes microcopy.
padding: 0.25rem 0.6rem;
background: transparent;
color: inherit;
border: 1px solid #2a3150;
border: 1px solid var(--color-border);
border-radius: 4px;
cursor: pointer;
}
.trigger:hover {
background: #1c2238;
background: var(--color-surface-hover);
}
.icon-dropdown {
display: inline;
@@ -185,10 +185,10 @@ polishes microcopy.
min-width: 14rem;
display: flex;
flex-direction: column;
background: #14182a;
border: 1px solid #2a3150;
background: var(--color-surface-overlay);
border: 1px solid var(--color-border);
border-radius: 6px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
box-shadow: var(--shadow-lg);
z-index: 50;
}
.surface > button,
@@ -213,12 +213,12 @@ polishes microcopy.
text-align: center;
font-size: 0.75rem;
border-radius: 999px;
background: #2a4d7d;
color: #fff;
background: var(--color-accent);
color: var(--color-accent-contrast);
}
.surface > button:hover,
.surface > details > summary:hover {
background: #1c2238;
background: var(--color-surface-hover);
}
.surface > details > summary {
list-style: none;
@@ -238,7 +238,7 @@ polishes microcopy.
display: flex;
flex-direction: column;
padding-left: 0.5rem;
border-left: 1px solid #2a3150;
border-left: 1px solid var(--color-border);
margin: 0 0.5rem 0.25rem;
}
.sub > button {
@@ -251,7 +251,7 @@ polishes microcopy.
cursor: pointer;
}
.sub > button:hover {
background: #1c2238;
background: var(--color-surface-hover);
}
@media (max-width: 767.98px) {
.surface {