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

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
@@ -1151,14 +1151,14 @@ modernize cost preview backed by `core.blockUpgradeCost`.
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;
}
.action:not(:disabled):hover {
color: #e8eaf6;
border-color: #6d8cff;
color: var(--color-text);
border-color: var(--color-accent);
}
.action:disabled {
cursor: not-allowed;
@@ -1169,25 +1169,25 @@ modernize cost preview backed by `core.blockUpgradeCost`.
flex-direction: column;
gap: 0.4rem;
padding: 0.5rem;
border: 1px solid #2a3150;
border: 1px solid var(--color-border);
border-radius: 3px;
background: #0d1224;
background: var(--color-surface-raised);
}
.form label {
display: flex;
flex-direction: column;
gap: 0.2rem;
font-size: 0.85rem;
color: #aab;
color: var(--color-text-muted);
}
.form input[type="number"],
.form input[type="text"],
.form select {
font: inherit;
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;
}
.form .destination-readonly {
@@ -1199,7 +1199,7 @@ modernize cost preview backed by `core.blockUpgradeCost`.
font-size: 0.85rem;
}
.form .destination-readonly .label {
color: #aab;
color: var(--color-text-muted);
}
.form-actions {
display: flex;
@@ -1211,14 +1211,14 @@ modernize cost preview backed by `core.blockUpgradeCost`.
font-size: 0.85rem;
padding: 0.25rem 0.65rem;
background: transparent;
color: #aab;
border: 1px solid #2a3150;
color: var(--color-text-muted);
border: 1px solid var(--color-border);
border-radius: 3px;
cursor: pointer;
}
.form-actions button.primary {
color: #e8eaf6;
border-color: #4f6dd9;
color: var(--color-text);
border-color: var(--color-accent);
}
.form-actions button:disabled {
cursor: not-allowed;
@@ -1227,25 +1227,25 @@ modernize cost preview backed by `core.blockUpgradeCost`.
.preview {
margin: 0;
font-size: 0.85rem;
color: #aab;
color: var(--color-text-muted);
}
.warning {
margin: 0;
font-size: 0.85rem;
color: #d9a07a;
color: var(--color-warning);
}
.locked {
margin: 0;
padding: 0.4rem 0.55rem;
font-size: 0.85rem;
color: #aab;
background: #14182a;
border: 1px solid #2a3150;
color: var(--color-text-muted);
background: var(--color-surface-overlay);
border: 1px solid var(--color-border);
border-radius: 3px;
}
.hint {
margin: 0;
font-size: 0.8rem;
color: #888;
color: var(--color-text-muted);
}
</style>