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/sidebar/calculator-tab.svelte
+37 -37
View File
@@ -690,15 +690,15 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
font-size: 0.8rem;
padding: 0.25rem;
background: transparent;
color: #aab;
border: 1px solid #2a3150;
color: var(--color-text-muted);
border: 1px solid var(--color-border);
border-radius: 3px;
cursor: pointer;
}
.modes button.active {
color: #e8eaf6;
border-color: #6d8cff;
background: #11162a;
color: var(--color-text);
border-color: var(--color-accent);
background: var(--color-surface-raised);
}
.namebar {
display: flex;
@@ -710,13 +710,13 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
font: inherit;
font-size: 0.85rem;
padding: 0.25rem 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;
}
.name[aria-invalid="true"] {
border-color: #d97a7a;
border-color: var(--color-danger);
}
.create,
.delete {
@@ -724,21 +724,21 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
font-size: 0.8rem;
padding: 0.25rem 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;
}
.create:not(:disabled):hover {
color: #e8eaf6;
border-color: #6d8cff;
color: var(--color-text);
border-color: var(--color-accent);
}
.create:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.delete {
color: #d97a7a;
color: var(--color-danger);
align-self: flex-start;
}
.load {
@@ -755,23 +755,23 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
font-size: 0.75rem;
padding: 0.15rem 0.4rem;
background: transparent;
color: #aab;
border: 1px solid #2a3150;
color: var(--color-text-muted);
border: 1px solid var(--color-border);
border-radius: 3px;
cursor: pointer;
}
.seg button.active {
color: #e8eaf6;
border-color: #6d8cff;
color: var(--color-text);
border-color: var(--color-accent);
}
.custom-load {
width: 4rem;
font: inherit;
font-size: 0.8rem;
padding: 0.15rem 0.3rem;
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;
}
.results,
@@ -787,12 +787,12 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
gap: 0.35rem;
}
.col-head {
color: #8890b0;
color: var(--color-text-muted);
font-size: 0.7rem;
text-align: center;
}
.label {
color: #aab;
color: var(--color-text-muted);
font-size: 0.8rem;
}
.cell {
@@ -812,20 +812,20 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
font: inherit;
font-size: 0.8rem;
padding: 0.15rem 0.3rem;
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;
font-variant-numeric: tabular-nums;
text-align: right;
}
.cell.locked input {
color: #9fb0ff;
border-color: #6d8cff;
color: var(--color-accent);
border-color: var(--color-accent);
}
.cell.infeasible input {
border-color: #d97a7a;
color: #f0a0a0;
border-color: var(--color-danger);
color: var(--color-danger);
}
.lock {
flex: none;
@@ -846,7 +846,7 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
opacity: 0.2;
}
.planet {
border-top: 1px solid #20253a;
border-top: 1px solid var(--color-border-subtle);
padding-top: 0.5rem;
display: flex;
flex-direction: column;
@@ -854,13 +854,13 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
}
.hint {
margin: 0;
color: #888;
color: var(--color-text-muted);
font-size: 0.8rem;
}
.planet-name {
margin: 0;
font-size: 0.8rem;
color: #cdd3f0;
color: var(--color-text);
}
.planet-stats {
margin: 0;
@@ -873,7 +873,7 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
display: contents;
}
.planet-stats dt {
color: #aab;
color: var(--color-text-muted);
font-size: 0.8rem;
}
.planet-stats dd {
@@ -884,11 +884,11 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
}
.rrow.total .label {
grid-column: 1 / 3;
color: #cdd3f0;
color: var(--color-text);
white-space: nowrap;
}
input[aria-invalid="true"] {
border-color: #d97a7a;
border-color: var(--color-danger);
}
.seg button:disabled {
opacity: 0.4;
@@ -897,6 +897,6 @@ long-lived planning tool. `ensureGame` resets it when the game changes.
.full-capacity {
font-variant-numeric: tabular-nums;
font-size: 0.8rem;
color: #9fb0ff;
color: var(--color-accent);
}
</style>
ui/frontend/src/lib/sidebar/inspector-tab.svelte
+1 -1
View File
@@ -157,6 +157,6 @@ from the Phase 10 stub.
.tool > p {
margin: 0;
padding: 0 1rem 1rem;
color: #888;
color: var(--color-text-muted);
}
</style>
ui/frontend/src/lib/sidebar/order-tab.svelte
+37 -37
View File
@@ -264,7 +264,7 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
}
.empty {
margin: 0;
color: #888;
color: var(--color-text-muted);
}
.commands {
list-style: none;
@@ -280,12 +280,12 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.5rem;
background: #14182a;
border: 1px solid #20253a;
background: var(--color-surface-overlay);
border: 1px solid var(--color-border-subtle);
border-radius: 4px;
}
.index {
color: #aab;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.label {
@@ -300,28 +300,28 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
letter-spacing: 0.04em;
padding: 0.1rem 0.4rem;
border-radius: 999px;
border: 1px solid #2a3150;
color: #aab;
border: 1px solid var(--color-border);
color: var(--color-text-muted);
}
.status-applied {
color: #8be9a3;
border-color: #2f6d3f;
color: var(--color-success);
border-color: var(--color-success);
}
.status-rejected {
color: #d97a7a;
border-color: #6d2f2f;
color: var(--color-danger);
border-color: var(--color-danger);
}
.status-invalid {
color: #d6b86c;
border-color: #6d562f;
color: var(--color-warning);
border-color: var(--color-warning);
}
.status-submitting {
color: #6d8cff;
border-color: #2f3f6d;
color: var(--color-accent);
border-color: var(--color-border);
}
.status-conflict {
color: #d99a4b;
border-color: #6d4a2f;
color: var(--color-warning);
border-color: var(--color-warning);
}
.banner {
margin: 0 0 0.5rem;
@@ -331,28 +331,28 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
line-height: 1.3;
}
.banner-conflict {
color: #f1bf78;
background: #2a1f10;
border: 1px solid #6d4a2f;
color: var(--color-warning);
background: var(--color-warning-subtle);
border: 1px solid var(--color-warning);
}
.banner-paused {
color: #d4d4d4;
background: #1a1f2a;
border: 1px solid #2f3f55;
color: var(--color-text-muted);
background: var(--color-surface);
border: 1px solid var(--color-border);
}
.delete {
font: inherit;
font-size: 0.85rem;
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;
}
.delete:hover {
color: #e8eaf6;
border-color: #6d8cff;
color: var(--color-text);
border-color: var(--color-accent);
}
.sync {
display: flex;
@@ -360,38 +360,38 @@ Tests exercise the tab through `__galaxyDebug.seedOrderDraft`
justify-content: space-between;
gap: 0.5rem;
font-size: 0.8rem;
color: #aab;
color: var(--color-text-muted);
}
.sync-error {
color: #d97a7a;
color: var(--color-danger);
}
.sync-synced {
color: #8be9a3;
color: var(--color-success);
}
.sync-syncing {
color: #6d8cff;
color: var(--color-accent);
}
.sync-offline {
color: #b9a566;
color: var(--color-warning);
}
.sync-conflict {
color: #d99a4b;
color: var(--color-warning);
}
.sync-paused {
color: #d4d4d4;
color: var(--color-text-muted);
}
.sync-retry {
font: inherit;
font-size: 0.8rem;
padding: 0.15rem 0.5rem;
background: transparent;
color: #aab;
border: 1px solid #2a3150;
color: var(--color-text-muted);
border: 1px solid var(--color-border);
border-radius: 3px;
cursor: pointer;
}
.sync-retry:hover {
color: #e8eaf6;
border-color: #6d8cff;
color: var(--color-text);
border-color: var(--color-accent);
}
</style>