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/mail/compose.svelte
+12 -11
View File
@@ -160,8 +160,8 @@ surfaces the resulting 403 inline.
flex-direction: column;
gap: 0.5rem;
padding: 1rem 1.25rem;
background: #161616;
border: 1px solid #2a2a2a;
background: var(--color-surface-overlay);
border: 1px solid var(--color-border-subtle);
border-radius: 8px;
min-width: min(420px, 90vw);
max-width: min(560px, 95vw);
@@ -188,15 +188,15 @@ surfaces the resulting 403 inline.
flex-direction: column;
gap: 0.2rem;
font-size: 0.85rem;
color: #ccc;
color: var(--color-text-muted);
}
input,
textarea,
select {
font: inherit;
padding: 0.4rem 0.5rem;
border: 1px solid #444;
background: #111;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: inherit;
border-radius: 4px;
}
@@ -209,22 +209,23 @@ surfaces the resulting 403 inline.
footer button {
font: inherit;
padding: 0.35rem 0.75rem;
border: 1px solid #444;
background: #1a1a1a;
color: #fff;
border: 1px solid var(--color-border);
background: var(--color-surface-raised);
color: var(--color-text);
border-radius: 4px;
cursor: pointer;
}
footer button[type="submit"] {
background: #2a4d7d;
border-color: #2a4d7d;
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-accent-contrast);
}
footer button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.error {
color: #c62828;
color: var(--color-danger);
font-size: 0.85rem;
margin: 0;
}
ui/frontend/src/lib/active-view/mail/system-item-pane.svelte
+2 -2
View File
@@ -82,7 +82,7 @@ available for incoming rows that the caller has read.
.title {
margin: 0;
font-size: 1rem;
color: #b3a14c;
color: var(--color-warning);
}
.subject {
font-weight: 700;
@@ -96,7 +96,7 @@ available for incoming rows that the caller has read.
align-self: flex-start;
font: inherit;
padding: 0.2rem 0.5rem;
border: 1px solid #444;
border: 1px solid var(--color-border);
background: transparent;
color: inherit;
border-radius: 4px;
ui/frontend/src/lib/active-view/mail/thread-list.svelte
+6 -6
View File
@@ -95,14 +95,14 @@ here.
cursor: pointer;
}
.row.active .row-btn {
border-color: #555;
background: #1c1c1c;
border-color: var(--color-border-strong);
background: var(--color-surface-raised);
}
.row.has-unread .title {
font-weight: 700;
}
.row.standalone .title {
color: #b3a14c;
color: var(--color-warning);
}
.title {
grid-column: 1 / span 1;
@@ -116,12 +116,12 @@ here.
text-align: center;
font-size: 0.75rem;
border-radius: 999px;
background: #2a4d7d;
color: #fff;
background: var(--color-accent);
color: var(--color-accent-contrast);
}
.snippet {
grid-column: 1 / span 2;
color: #999;
color: var(--color-text-muted);
font-size: 0.85rem;
overflow: hidden;
text-overflow: ellipsis;
ui/frontend/src/lib/active-view/mail/thread-pane.svelte
+11 -11
View File
@@ -186,17 +186,17 @@ sits at the bottom of the pane.
.message {
padding: 0.5rem 0.75rem;
border-radius: 6px;
background: #1c1c1c;
border: 1px solid #2a2a2a;
background: var(--color-surface-raised);
border: 1px solid var(--color-border-subtle);
}
.message.outgoing {
background: #15252e;
background: var(--color-accent-subtle);
}
.meta {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: #999;
color: var(--color-text-muted);
margin-bottom: 0.25rem;
}
.subject {
@@ -212,7 +212,7 @@ sits at the bottom of the pane.
margin-right: 0.5rem;
font: inherit;
padding: 0.2rem 0.5rem;
border: 1px solid #444;
border: 1px solid var(--color-border);
background: transparent;
color: inherit;
border-radius: 4px;
@@ -227,8 +227,8 @@ sits at the bottom of the pane.
.reply textarea {
font: inherit;
padding: 0.5rem;
border: 1px solid #444;
background: #111;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: inherit;
border-radius: 4px;
resize: vertical;
@@ -237,9 +237,9 @@ sits at the bottom of the pane.
align-self: flex-end;
font: inherit;
padding: 0.35rem 0.75rem;
border: 1px solid #444;
background: #1a1a1a;
color: #fff;
border: 1px solid var(--color-border);
background: var(--color-surface-raised);
color: var(--color-text);
border-radius: 4px;
cursor: pointer;
}
@@ -248,7 +248,7 @@ sits at the bottom of the pane.
cursor: not-allowed;
}
.error {
color: #c62828;
color: var(--color-danger);
font-size: 0.85rem;
margin: 0;
}