feat(ui): migrate all view bodies to design tokens (F1b)
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user