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/active-view/table-races.svelte
+22 -22
View File
@@ -345,21 +345,21 @@ data fetching is performed here — the layout is responsible.
align-items: baseline;
}
.summary-label {
color: #aab;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.75rem;
}
.summary-value {
color: #e8eaf6;
color: var(--color-text);
font-variant-numeric: tabular-nums;
}
.vote-picker select {
font: inherit;
padding: 0.2rem 0.4rem;
background: #0a0e1a;
color: #e8eaf6;
border: 1px solid #2a3150;
background: var(--color-bg);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: 3px;
}
.vote-picker select:disabled {
@@ -368,7 +368,7 @@ data fetching is performed here — the layout is responsible.
}
.note {
margin: 0;
color: #889;
color: var(--color-text-muted);
font-size: 0.8rem;
line-height: 1.35;
}
@@ -381,16 +381,16 @@ data fetching is performed here — the layout is responsible.
.filter {
font: inherit;
padding: 0.3rem 0.5rem;
background: #0a0e1a;
color: #e8eaf6;
border: 1px solid #2a3150;
background: var(--color-bg);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: 3px;
flex: 1 1 12rem;
min-width: 8rem;
}
.status {
margin: 0;
color: #888;
color: var(--color-text-muted);
font-size: 0.9rem;
}
.grid {
@@ -402,17 +402,17 @@ data fetching is performed here — the layout is responsible.
.grid td {
padding: 0.4rem 0.6rem;
text-align: left;
border-bottom: 1px solid #1c2240;
border-bottom: 1px solid var(--color-border-subtle);
font-size: 0.9rem;
}
.grid th {
color: #aab;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.75rem;
}
.grid tbody tr:hover {
background: #11172a;
background: var(--color-surface);
}
.sort {
font: inherit;
@@ -441,22 +441,22 @@ data fetching is performed here — the layout is responsible.
letter-spacing: 0.05em;
padding: 0.2rem 0.55rem;
background: transparent;
color: #aab;
border: 1px solid #2a3150;
color: var(--color-text-muted);
border: 1px solid var(--color-border);
border-radius: 3px;
cursor: pointer;
}
.stance-button:hover {
color: #e8eaf6;
color: var(--color-text);
}
.stance-button.war.active {
background: #4a1010;
color: #ffcaca;
border-color: #8a3030;
background: var(--color-danger-subtle);
color: var(--color-danger);
border-color: var(--color-danger);
}
.stance-button.peace.active {
background: #103a1a;
color: #c8f2cf;
border-color: #2f7a45;
background: var(--color-success-subtle);
color: var(--color-success);
border-color: var(--color-success);
}
</style>