diff --git a/ui/docs/design-system.md b/ui/docs/design-system.md index 30ebe04..81b090a 100644 --- a/ui/docs/design-system.md +++ b/ui/docs/design-system.md @@ -88,16 +88,33 @@ them in sync. - Directional one-off drop shadows that are not part of the elevation scale may stay as literal `rgba(0, 0, 0, …)` (they read acceptably in both themes); reach for `--shadow-*` for standard elevation. +- Overlay scrims — a translucent layer dimming the app behind a modal, + or darkening a map/WebGL canvas so floating chrome stays readable — + stay literal `rgba(…)`. They sit over arbitrary content, not a themed + surface, so a surface token would be wrong; there is no `--color-scrim` + until a third caller justifies one. +- Data-visualisation surfaces keep a fixed palette. The battle scene + (`battle-player/battle-scene.svelte`) is a self-contained SVG + visualisation — like the WebGL map canvas — and stays dark in both + themes; its only themed neighbours are the surrounding chrome + (`battle-viewer.svelte`). Re-theming a viz surface for light is a + dedicated design task, not a token swap. - Spacing-scale adoption is gradual — colour tokens are the priority; existing one-off paddings are migrated opportunistically, not churned en masse. ## Migration status -The token system and the always-visible in-game chrome (header, account -menu, sidebar frame, tab bar, bottom tabs, shell background) reference -tokens and switch cleanly between light and dark. The view bodies -(calculator, inspectors, tables, lobby, auth, map overlays, battle, -mail) are migrated incrementally; until a view is migrated its -hard-coded colours stay dark in both themes. F1 is complete when no -literal theme colours remain in component ` diff --git a/ui/frontend/src/lib/active-view/designer-science.svelte b/ui/frontend/src/lib/active-view/designer-science.svelte index c2af3cb..10e4a8d 100644 --- a/ui/frontend/src/lib/active-view/designer-science.svelte +++ b/ui/frontend/src/lib/active-view/designer-science.svelte @@ -353,7 +353,7 @@ fractions is a Phase 21 decision documented in .hint, .not-found { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.85rem; } .form { @@ -369,32 +369,32 @@ fractions is a Phase 21 decision documented in gap: 0.6rem; } .row span { - color: #aab; + color: var(--color-text-muted); font-size: 0.85rem; } .row input { 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; } .row input[aria-invalid="true"] { - border-color: #d97a7a; + border-color: var(--color-danger); } .sum { margin: 0; font-size: 0.85rem; - color: #aab; + color: var(--color-text-muted); } .sum[data-sum-ok="false"] { - color: #d97a7a; + color: var(--color-danger); } .error { margin: 0; font-size: 0.8rem; - color: #d97a7a; + color: var(--color-danger); } .fields { margin: 0; @@ -408,7 +408,7 @@ fractions is a Phase 21 decision documented in display: contents; } .field dt { - color: #aab; + color: var(--color-text-muted); font-size: 0.85rem; } .field dd { @@ -425,24 +425,24 @@ fractions is a Phase 21 decision documented in font-size: 0.9rem; padding: 0.3rem 0.7rem; background: transparent; - color: #aab; - border: 1px solid #2a3150; + color: var(--color-text-muted); + border: 1px solid var(--color-border); border-radius: 3px; cursor: pointer; } .actions button:not(:disabled):hover { - color: #e8eaf6; - border-color: #6d8cff; + color: var(--color-text); + border-color: var(--color-accent); } .actions button:disabled { cursor: not-allowed; opacity: 0.5; } .actions .delete { - color: #d97a7a; + color: var(--color-danger); } .actions .delete:not(:disabled):hover { - border-color: #d97a7a; - color: #f0a0a0; + border-color: var(--color-danger); + color: var(--color-danger); } diff --git a/ui/frontend/src/lib/active-view/mail.svelte b/ui/frontend/src/lib/active-view/mail.svelte index edb6e15..1fb0cf6 100644 --- a/ui/frontend/src/lib/active-view/mail.svelte +++ b/ui/frontend/src/lib/active-view/mail.svelte @@ -135,9 +135,9 @@ pane, system-item pane, compose form) live under .compose-btn { 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; } @@ -146,10 +146,10 @@ pane, system-item pane, compose form) live under cursor: not-allowed; } .status { - color: #888; + color: var(--color-text-muted); } .status.error { - color: #c62828; + color: var(--color-danger); } .panes { display: grid; @@ -159,10 +159,10 @@ pane, system-item pane, compose form) live under } .list-pane, .detail-pane { - border: 1px solid #2a2a2a; + border: 1px solid var(--color-border-subtle); border-radius: 6px; padding: 0.75rem; - background: #111; + background: var(--color-surface); overflow: hidden; } .list-pane { @@ -174,9 +174,9 @@ pane, system-item pane, compose form) live under font: inherit; margin-bottom: 0.5rem; padding: 0.25rem 0.5rem; - border: 1px solid #444; + border: 1px solid var(--color-border); background: transparent; - color: #fff; + color: var(--color-text); border-radius: 4px; cursor: pointer; } diff --git a/ui/frontend/src/lib/active-view/mail/compose.svelte b/ui/frontend/src/lib/active-view/mail/compose.svelte index a3bd876..4fa7ba2 100644 --- a/ui/frontend/src/lib/active-view/mail/compose.svelte +++ b/ui/frontend/src/lib/active-view/mail/compose.svelte @@ -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; } diff --git a/ui/frontend/src/lib/active-view/mail/system-item-pane.svelte b/ui/frontend/src/lib/active-view/mail/system-item-pane.svelte index d573bbb..64a91d8 100644 --- a/ui/frontend/src/lib/active-view/mail/system-item-pane.svelte +++ b/ui/frontend/src/lib/active-view/mail/system-item-pane.svelte @@ -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; diff --git a/ui/frontend/src/lib/active-view/mail/thread-list.svelte b/ui/frontend/src/lib/active-view/mail/thread-list.svelte index bc933e9..d6df295 100644 --- a/ui/frontend/src/lib/active-view/mail/thread-list.svelte +++ b/ui/frontend/src/lib/active-view/mail/thread-list.svelte @@ -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; diff --git a/ui/frontend/src/lib/active-view/mail/thread-pane.svelte b/ui/frontend/src/lib/active-view/mail/thread-pane.svelte index 8e3977e..c0f2c27 100644 --- a/ui/frontend/src/lib/active-view/mail/thread-pane.svelte +++ b/ui/frontend/src/lib/active-view/mail/thread-pane.svelte @@ -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; } diff --git a/ui/frontend/src/lib/active-view/map-toggles.svelte b/ui/frontend/src/lib/active-view/map-toggles.svelte index f56d098..9e01036 100644 --- a/ui/frontend/src/lib/active-view/map-toggles.svelte +++ b/ui/frontend/src/lib/active-view/map-toggles.svelte @@ -238,13 +238,13 @@ bottom-tabs bar. font-size: 1.4rem; padding: 0.25rem 0.5rem; background: rgba(20, 24, 42, 0.85); - color: #e8eaf6; - border: 1px solid #2a3150; + color: var(--color-text); + border: 1px solid var(--color-border); border-radius: 6px; cursor: pointer; } .trigger:hover { - background: #1c2238; + background: var(--color-surface-hover); } .surface { position: absolute; @@ -254,11 +254,11 @@ bottom-tabs bar. display: flex; flex-direction: column; gap: 0.5rem; - background: #14182a; - color: #e8eaf6; - border: 1px solid #2a3150; + background: var(--color-surface-overlay); + color: var(--color-text); + border: 1px solid var(--color-border); border-radius: 6px; - box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); + box-shadow: var(--shadow-lg); padding: 0.5rem; z-index: 50; } @@ -274,7 +274,7 @@ bottom-tabs bar. font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; - color: #aab; + color: var(--color-text-muted); padding: 0 0 0.15rem 0; } label { @@ -287,11 +287,11 @@ bottom-tabs bar. cursor: pointer; } label:hover { - background: #1c2238; + background: var(--color-surface-hover); } input[type="checkbox"], input[type="radio"] { - accent-color: #6dd2ff; + accent-color: var(--color-accent); } .wrap-row { display: flex; @@ -301,7 +301,7 @@ bottom-tabs bar. font-size: 0.9rem; } .wrap-label { - color: #aab; + color: var(--color-text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; diff --git a/ui/frontend/src/lib/active-view/map.svelte b/ui/frontend/src/lib/active-view/map.svelte index 721175f..c015db4 100644 --- a/ui/frontend/src/lib/active-view/map.svelte +++ b/ui/frontend/src/lib/active-view/map.svelte @@ -726,7 +726,7 @@ preference the store already manages. min-height: 0; position: relative; overflow: hidden; - background: #0a0e1a; + background: var(--color-bg); } canvas { display: block; @@ -740,8 +740,8 @@ preference the store already manages. transform: translateX(-50%); padding: 0.4rem 0.9rem; background: rgba(20, 24, 42, 0.85); - color: #e8eaf6; - border: 1px solid #2a3150; + color: var(--color-text); + border: 1px solid var(--color-border); border-radius: 6px; z-index: 10; font-family: system-ui, sans-serif; @@ -749,8 +749,8 @@ preference the store already manages. margin: 0; } .overlay.error { - background: #4a1820; - border-color: #6d2530; - color: #ffb4b4; + background: var(--color-danger-subtle); + border-color: var(--color-danger); + color: var(--color-danger); } diff --git a/ui/frontend/src/lib/active-view/report.svelte b/ui/frontend/src/lib/active-view/report.svelte index 8a24d41..a3bfa57 100644 --- a/ui/frontend/src/lib/active-view/report.svelte +++ b/ui/frontend/src/lib/active-view/report.svelte @@ -173,7 +173,7 @@ TOC and the body iterate the same data. .report-view > :global(.report-toc) { position: sticky; top: 0; - background: #0a0e1a; + background: var(--color-bg); padding: 0.5rem 0; z-index: 5; } diff --git a/ui/frontend/src/lib/active-view/report/report-toc.svelte b/ui/frontend/src/lib/active-view/report/report-toc.svelte index 24afce6..9d0f5a0 100644 --- a/ui/frontend/src/lib/active-view/report/report-toc.svelte +++ b/ui/frontend/src/lib/active-view/report/report-toc.svelte @@ -128,15 +128,15 @@ The active section is computed by the orchestrator font-size: 0.85rem; text-align: left; padding: 0.4rem 0.6rem; - background: #11172a; - color: #cfd7ff; - border: 1px solid #2a3150; + background: var(--color-surface); + color: var(--color-accent); + border: 1px solid var(--color-border); border-radius: 3px; cursor: pointer; } .back-to-map:hover { - background: #1a2240; - color: #e8eaf6; + background: var(--color-surface-hover); + color: var(--color-text); } .desktop { display: block; @@ -152,7 +152,7 @@ The active section is computed by the orchestrator .desktop a { display: block; padding: 0.3rem 0.6rem; - color: #aab; + color: var(--color-text-muted); text-decoration: none; font-size: 0.85rem; line-height: 1.3; @@ -160,13 +160,13 @@ The active section is computed by the orchestrator border-radius: 0 3px 3px 0; } .desktop a:hover { - color: #e8eaf6; - background: #11172a; + color: var(--color-text); + background: var(--color-surface); } .desktop a.active { - color: #e8eaf6; - background: #11172a; - border-left-color: #4a6cf7; + color: var(--color-text); + background: var(--color-surface); + border-left-color: var(--color-accent); } .mobile { display: none; @@ -175,9 +175,9 @@ The active section is computed by the orchestrator width: 100%; font: inherit; padding: 0.4rem 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; } .visually-hidden { diff --git a/ui/frontend/src/lib/active-view/report/section-approaching-groups.svelte b/ui/frontend/src/lib/active-view/report/section-approaching-groups.svelte index 44cd37d..6d46daf 100644 --- a/ui/frontend/src/lib/active-view/report/section-approaching-groups.svelte +++ b/ui/frontend/src/lib/active-view/report/section-approaching-groups.svelte @@ -68,11 +68,11 @@ class when the group lands and a battle roster forms. .grid-section h2 { margin: 0 0 0.5rem; font-size: 1.05rem; - color: #e8eaf6; + color: var(--color-text); } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .grid { @@ -85,15 +85,15 @@ class when the group lands and a battle roster forms. .grid td { padding: 0.4rem 0.6rem; text-align: left; - border-bottom: 1px solid #1c2240; + border-bottom: 1px solid var(--color-border-subtle); } .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); } diff --git a/ui/frontend/src/lib/active-view/report/section-battles.svelte b/ui/frontend/src/lib/active-view/report/section-battles.svelte index f41c6ff..0e15b5e 100644 --- a/ui/frontend/src/lib/active-view/report/section-battles.svelte +++ b/ui/frontend/src/lib/active-view/report/section-battles.svelte @@ -61,11 +61,11 @@ decision log called out. .grid-section h2 { margin: 0 0 0.5rem; font-size: 1.05rem; - color: #e8eaf6; + color: var(--color-text); } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .ids { @@ -83,18 +83,18 @@ decision log called out. gap: 0.6rem; } .label { - color: #aab; + color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem; } .uuid { - color: #cfd7ff; + color: var(--color-accent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-decoration: underline; text-underline-offset: 2px; } .uuid:hover { - color: #ffffff; + color: var(--color-text); } diff --git a/ui/frontend/src/lib/active-view/report/section-bombings.svelte b/ui/frontend/src/lib/active-view/report/section-bombings.svelte index 60ae565..2f8789f 100644 --- a/ui/frontend/src/lib/active-view/report/section-bombings.svelte +++ b/ui/frontend/src/lib/active-view/report/section-bombings.svelte @@ -94,11 +94,11 @@ Decoder sorts by `planetNumber` already. .grid-section h2 { margin: 0 0 0.5rem; font-size: 1.05rem; - color: #e8eaf6; + color: var(--color-text); } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .grid { @@ -111,19 +111,19 @@ Decoder sorts by `planetNumber` already. .grid td { padding: 0.4rem 0.6rem; text-align: left; - border-bottom: 1px solid #1c2240; + border-bottom: 1px solid var(--color-border-subtle); } .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); } .wiped td { - color: #c97a7a; + color: var(--color-danger); } .wiped-badge { display: inline-block; @@ -131,9 +131,9 @@ Decoder sorts by `planetNumber` already. font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; - background: #4a1010; - color: #ffcaca; - border: 1px solid #8a3030; + background: var(--color-danger-subtle); + color: var(--color-danger); + border: 1px solid var(--color-danger); border-radius: 3px; } diff --git a/ui/frontend/src/lib/active-view/report/section-cargo-routes.svelte b/ui/frontend/src/lib/active-view/report/section-cargo-routes.svelte index cb1a439..ad1e4b2 100644 --- a/ui/frontend/src/lib/active-view/report/section-cargo-routes.svelte +++ b/ui/frontend/src/lib/active-view/report/section-cargo-routes.svelte @@ -83,11 +83,11 @@ has many routes. .grid-section h2 { margin: 0 0 0.5rem; font-size: 1.05rem; - color: #e8eaf6; + color: var(--color-text); } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .grid { @@ -100,15 +100,15 @@ has many routes. .grid td { padding: 0.4rem 0.6rem; text-align: left; - border-bottom: 1px solid #1c2240; + border-bottom: 1px solid var(--color-border-subtle); } .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); } diff --git a/ui/frontend/src/lib/active-view/report/section-foreign-planets.svelte b/ui/frontend/src/lib/active-view/report/section-foreign-planets.svelte index 85d5bad..9f9cc42 100644 --- a/ui/frontend/src/lib/active-view/report/section-foreign-planets.svelte +++ b/ui/frontend/src/lib/active-view/report/section-foreign-planets.svelte @@ -85,11 +85,11 @@ as the local planets table plus an `owner` column. .grid-section h2 { margin: 0 0 0.5rem; font-size: 1.05rem; - color: #e8eaf6; + color: var(--color-text); } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .grid { @@ -102,15 +102,15 @@ as the local planets table plus an `owner` column. .grid td { padding: 0.4rem 0.6rem; text-align: left; - border-bottom: 1px solid #1c2240; + border-bottom: 1px solid var(--color-border-subtle); } .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); } diff --git a/ui/frontend/src/lib/active-view/report/section-foreign-sciences.svelte b/ui/frontend/src/lib/active-view/report/section-foreign-sciences.svelte index dc3924f..856ad4c 100644 --- a/ui/frontend/src/lib/active-view/report/section-foreign-sciences.svelte +++ b/ui/frontend/src/lib/active-view/report/section-foreign-sciences.svelte @@ -97,18 +97,18 @@ unit even when the section spans many races. .grid-section h2 { margin: 0 0 0.5rem; font-size: 1.05rem; - color: #e8eaf6; + color: var(--color-text); } .race-header { margin: 0.75rem 0 0.3rem; font-size: 0.85rem; - color: #aab; + color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .grid { @@ -121,15 +121,15 @@ unit even when the section spans many races. .grid td { padding: 0.4rem 0.6rem; text-align: left; - border-bottom: 1px solid #1c2240; + border-bottom: 1px solid var(--color-border-subtle); } .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); } diff --git a/ui/frontend/src/lib/active-view/report/section-foreign-ship-classes.svelte b/ui/frontend/src/lib/active-view/report/section-foreign-ship-classes.svelte index 96ae769..1e2a323 100644 --- a/ui/frontend/src/lib/active-view/report/section-foreign-ship-classes.svelte +++ b/ui/frontend/src/lib/active-view/report/section-foreign-ship-classes.svelte @@ -99,18 +99,18 @@ incoming groups. .grid-section h2 { margin: 0 0 0.5rem; font-size: 1.05rem; - color: #e8eaf6; + color: var(--color-text); } .race-header { margin: 0.75rem 0 0.3rem; font-size: 0.85rem; - color: #aab; + color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .grid { @@ -123,15 +123,15 @@ incoming groups. .grid td { padding: 0.4rem 0.6rem; text-align: left; - border-bottom: 1px solid #1c2240; + border-bottom: 1px solid var(--color-border-subtle); } .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); } diff --git a/ui/frontend/src/lib/active-view/report/section-foreign-ship-groups.svelte b/ui/frontend/src/lib/active-view/report/section-foreign-ship-groups.svelte index 3260556..01b8076 100644 --- a/ui/frontend/src/lib/active-view/report/section-foreign-ship-groups.svelte +++ b/ui/frontend/src/lib/active-view/report/section-foreign-ship-groups.svelte @@ -77,11 +77,11 @@ to groups the player doesn't own. .grid-section h2 { margin: 0 0 0.5rem; font-size: 1.05rem; - color: #e8eaf6; + color: var(--color-text); } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .grid { @@ -94,15 +94,15 @@ to groups the player doesn't own. .grid td { padding: 0.4rem 0.6rem; text-align: left; - border-bottom: 1px solid #1c2240; + border-bottom: 1px solid var(--color-border-subtle); } .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); } diff --git a/ui/frontend/src/lib/active-view/report/section-galaxy-summary.svelte b/ui/frontend/src/lib/active-view/report/section-galaxy-summary.svelte index 26001c7..e3f231b 100644 --- a/ui/frontend/src/lib/active-view/report/section-galaxy-summary.svelte +++ b/ui/frontend/src/lib/active-view/report/section-galaxy-summary.svelte @@ -48,11 +48,11 @@ section is never empty as long as the report has loaded. .grid-section h2 { margin: 0 0 0.5rem; font-size: 1.05rem; - color: #e8eaf6; + color: var(--color-text); } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .kv { @@ -63,14 +63,14 @@ section is never empty as long as the report has loaded. font-size: 0.9rem; } .kv dt { - color: #aab; + color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem; } .kv dd { margin: 0; - color: #e8eaf6; + color: var(--color-text); font-variant-numeric: tabular-nums; } diff --git a/ui/frontend/src/lib/active-view/report/section-my-fleets.svelte b/ui/frontend/src/lib/active-view/report/section-my-fleets.svelte index ead8245..6b250ac 100644 --- a/ui/frontend/src/lib/active-view/report/section-my-fleets.svelte +++ b/ui/frontend/src/lib/active-view/report/section-my-fleets.svelte @@ -70,11 +70,11 @@ in orbit has neither); empty cells in those columns are normal. .grid-section h2 { margin: 0 0 0.5rem; font-size: 1.05rem; - color: #e8eaf6; + color: var(--color-text); } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .grid { @@ -87,15 +87,15 @@ in orbit has neither); empty cells in those columns are normal. .grid td { padding: 0.4rem 0.6rem; text-align: left; - border-bottom: 1px solid #1c2240; + border-bottom: 1px solid var(--color-border-subtle); } .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); } diff --git a/ui/frontend/src/lib/active-view/report/section-my-planets.svelte b/ui/frontend/src/lib/active-view/report/section-my-planets.svelte index 478b8d8..cff1181 100644 --- a/ui/frontend/src/lib/active-view/report/section-my-planets.svelte +++ b/ui/frontend/src/lib/active-view/report/section-my-planets.svelte @@ -83,11 +83,11 @@ column set (matches `ReportPlanet` shape). .grid-section h2 { margin: 0 0 0.5rem; font-size: 1.05rem; - color: #e8eaf6; + color: var(--color-text); } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .grid { @@ -100,15 +100,15 @@ column set (matches `ReportPlanet` shape). .grid td { padding: 0.4rem 0.6rem; text-align: left; - border-bottom: 1px solid #1c2240; + border-bottom: 1px solid var(--color-border-subtle); } .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); } diff --git a/ui/frontend/src/lib/active-view/report/section-my-sciences.svelte b/ui/frontend/src/lib/active-view/report/section-my-sciences.svelte index c89fa77..23b15ce 100644 --- a/ui/frontend/src/lib/active-view/report/section-my-sciences.svelte +++ b/ui/frontend/src/lib/active-view/report/section-my-sciences.svelte @@ -64,11 +64,11 @@ table). .grid-section h2 { margin: 0 0 0.5rem; font-size: 1.05rem; - color: #e8eaf6; + color: var(--color-text); } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .grid { @@ -81,15 +81,15 @@ table). .grid td { padding: 0.4rem 0.6rem; text-align: left; - border-bottom: 1px solid #1c2240; + border-bottom: 1px solid var(--color-border-subtle); } .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); } diff --git a/ui/frontend/src/lib/active-view/report/section-my-ship-classes.svelte b/ui/frontend/src/lib/active-view/report/section-my-ship-classes.svelte index fd492be..9e23a3b 100644 --- a/ui/frontend/src/lib/active-view/report/section-my-ship-classes.svelte +++ b/ui/frontend/src/lib/active-view/report/section-my-ship-classes.svelte @@ -67,11 +67,11 @@ drafts immediately, matching the ship-class designer's behaviour. .grid-section h2 { margin: 0 0 0.5rem; font-size: 1.05rem; - color: #e8eaf6; + color: var(--color-text); } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .grid { @@ -84,15 +84,15 @@ drafts immediately, matching the ship-class designer's behaviour. .grid td { padding: 0.4rem 0.6rem; text-align: left; - border-bottom: 1px solid #1c2240; + border-bottom: 1px solid var(--color-border-subtle); } .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); } diff --git a/ui/frontend/src/lib/active-view/report/section-my-ship-groups.svelte b/ui/frontend/src/lib/active-view/report/section-my-ship-groups.svelte index d00d81f..a501a92 100644 --- a/ui/frontend/src/lib/active-view/report/section-my-ship-groups.svelte +++ b/ui/frontend/src/lib/active-view/report/section-my-ship-groups.svelte @@ -91,11 +91,11 @@ shown together with `load` when carrying. .grid-section h2 { margin: 0 0 0.5rem; font-size: 1.05rem; - color: #e8eaf6; + color: var(--color-text); } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .grid { @@ -108,19 +108,19 @@ shown together with `load` when carrying. .grid td { padding: 0.4rem 0.6rem; text-align: left; - border-bottom: 1px solid #1c2240; + border-bottom: 1px solid var(--color-border-subtle); } .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); } .uuid { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; - color: #cfd7ff; + color: var(--color-accent); } diff --git a/ui/frontend/src/lib/active-view/report/section-player-status.svelte b/ui/frontend/src/lib/active-view/report/section-player-status.svelte index 0fa3ae9..6377865 100644 --- a/ui/frontend/src/lib/active-view/report/section-player-status.svelte +++ b/ui/frontend/src/lib/active-view/report/section-player-status.svelte @@ -92,11 +92,11 @@ highlight so the user can locate themselves quickly. .grid-section h2 { margin: 0 0 0.5rem; font-size: 1.05rem; - color: #e8eaf6; + color: var(--color-text); } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .grid { @@ -109,30 +109,30 @@ highlight so the user can locate themselves quickly. .grid td { padding: 0.4rem 0.6rem; text-align: left; - border-bottom: 1px solid #1c2240; + border-bottom: 1px solid var(--color-border-subtle); } .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); } .local td { - background: #11203d; + background: var(--color-accent-subtle); } .extinct td { - color: #889; + color: var(--color-text-faint); } .marker { margin-left: 0.4rem; font-size: 0.75rem; - color: #aab; + color: var(--color-text-muted); } .extinct-marker { - color: #c97a7a; + color: var(--color-danger); letter-spacing: 0.08em; } diff --git a/ui/frontend/src/lib/active-view/report/section-ships-in-production.svelte b/ui/frontend/src/lib/active-view/report/section-ships-in-production.svelte index 5d624e5..e39ceee 100644 --- a/ui/frontend/src/lib/active-view/report/section-ships-in-production.svelte +++ b/ui/frontend/src/lib/active-view/report/section-ships-in-production.svelte @@ -73,11 +73,11 @@ reads `#17 (Castle)` rather than just `#17`. .grid-section h2 { margin: 0 0 0.5rem; font-size: 1.05rem; - color: #e8eaf6; + color: var(--color-text); } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .grid { @@ -90,15 +90,15 @@ reads `#17 (Castle)` rather than just `#17`. .grid td { padding: 0.4rem 0.6rem; text-align: left; - border-bottom: 1px solid #1c2240; + border-bottom: 1px solid var(--color-border-subtle); } .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); } diff --git a/ui/frontend/src/lib/active-view/report/section-unidentified-groups.svelte b/ui/frontend/src/lib/active-view/report/section-unidentified-groups.svelte index 03f7d49..2407efe 100644 --- a/ui/frontend/src/lib/active-view/report/section-unidentified-groups.svelte +++ b/ui/frontend/src/lib/active-view/report/section-unidentified-groups.svelte @@ -57,11 +57,11 @@ radar that doesn't even resolve to a planet. .grid-section h2 { margin: 0 0 0.5rem; font-size: 1.05rem; - color: #e8eaf6; + color: var(--color-text); } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .grid { @@ -74,15 +74,15 @@ radar that doesn't even resolve to a planet. .grid td { padding: 0.4rem 0.6rem; text-align: left; - border-bottom: 1px solid #1c2240; + border-bottom: 1px solid var(--color-border-subtle); } .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); } diff --git a/ui/frontend/src/lib/active-view/report/section-uninhabited-planets.svelte b/ui/frontend/src/lib/active-view/report/section-uninhabited-planets.svelte index 05f498a..ea13203 100644 --- a/ui/frontend/src/lib/active-view/report/section-uninhabited-planets.svelte +++ b/ui/frontend/src/lib/active-view/report/section-uninhabited-planets.svelte @@ -74,11 +74,11 @@ are intentionally omitted. .grid-section h2 { margin: 0 0 0.5rem; font-size: 1.05rem; - color: #e8eaf6; + color: var(--color-text); } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .grid { @@ -91,15 +91,15 @@ are intentionally omitted. .grid td { padding: 0.4rem 0.6rem; text-align: left; - border-bottom: 1px solid #1c2240; + border-bottom: 1px solid var(--color-border-subtle); } .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); } diff --git a/ui/frontend/src/lib/active-view/report/section-unknown-planets.svelte b/ui/frontend/src/lib/active-view/report/section-unknown-planets.svelte index 332494d..e5805b9 100644 --- a/ui/frontend/src/lib/active-view/report/section-unknown-planets.svelte +++ b/ui/frontend/src/lib/active-view/report/section-unknown-planets.svelte @@ -59,11 +59,11 @@ else is known. .grid-section h2 { margin: 0 0 0.5rem; font-size: 1.05rem; - color: #e8eaf6; + color: var(--color-text); } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .grid { @@ -76,15 +76,15 @@ else is known. .grid td { padding: 0.4rem 0.6rem; text-align: left; - border-bottom: 1px solid #1c2240; + border-bottom: 1px solid var(--color-border-subtle); } .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); } diff --git a/ui/frontend/src/lib/active-view/report/section-votes.svelte b/ui/frontend/src/lib/active-view/report/section-votes.svelte index 95d4627..a36f054 100644 --- a/ui/frontend/src/lib/active-view/report/section-votes.svelte +++ b/ui/frontend/src/lib/active-view/report/section-votes.svelte @@ -78,12 +78,12 @@ explanatory text on the races table. .grid-section h2 { margin: 0 0 0.5rem; font-size: 1.05rem; - color: #e8eaf6; + color: var(--color-text); } .grid-section h3 { margin: 1rem 0 0.4rem; font-size: 0.85rem; - color: #aab; + color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } @@ -95,19 +95,19 @@ explanatory text on the races table. font-size: 0.9rem; } .kv dt { - color: #aab; + color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem; } .kv dd { margin: 0; - color: #e8eaf6; + color: var(--color-text); font-variant-numeric: tabular-nums; } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .grid { @@ -119,10 +119,10 @@ explanatory text on the races table. .grid td { padding: 0.4rem 0.6rem; text-align: left; - border-bottom: 1px solid #1c2240; + border-bottom: 1px solid var(--color-border-subtle); } .grid th { - color: #aab; + color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem; diff --git a/ui/frontend/src/lib/active-view/table-races.svelte b/ui/frontend/src/lib/active-view/table-races.svelte index 73d3f43..936d012 100644 --- a/ui/frontend/src/lib/active-view/table-races.svelte +++ b/ui/frontend/src/lib/active-view/table-races.svelte @@ -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); } diff --git a/ui/frontend/src/lib/active-view/table-sciences.svelte b/ui/frontend/src/lib/active-view/table-sciences.svelte index a3caa84..6eb6898 100644 --- a/ui/frontend/src/lib/active-view/table-sciences.svelte +++ b/ui/frontend/src/lib/active-view/table-sciences.svelte @@ -250,9 +250,9 @@ 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; @@ -262,18 +262,18 @@ data fetching is performed here — the layout is responsible. font-size: 0.9rem; padding: 0.3rem 0.7rem; background: transparent; - color: #aab; - border: 1px solid #2a3150; + color: var(--color-text-muted); + border: 1px solid var(--color-border); border-radius: 3px; cursor: pointer; } .new:hover { - color: #e8eaf6; - border-color: #6d8cff; + color: var(--color-text); + border-color: var(--color-accent); } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .grid { @@ -285,11 +285,11 @@ 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; @@ -298,7 +298,7 @@ data fetching is performed here — the layout is responsible. cursor: pointer; } .grid tbody tr:hover { - background: #11172a; + background: var(--color-surface); } .sort { font: inherit; @@ -322,12 +322,12 @@ data fetching is performed here — the layout is responsible. font-size: 0.85rem; padding: 0.15rem 0.5rem; background: transparent; - color: #d97a7a; - border: 1px solid #2a3150; + color: var(--color-danger); + border: 1px solid var(--color-border); border-radius: 3px; cursor: pointer; } .delete:hover { - border-color: #d97a7a; + border-color: var(--color-danger); } diff --git a/ui/frontend/src/lib/active-view/table-ship-classes.svelte b/ui/frontend/src/lib/active-view/table-ship-classes.svelte index 7473976..93c4bd5 100644 --- a/ui/frontend/src/lib/active-view/table-ship-classes.svelte +++ b/ui/frontend/src/lib/active-view/table-ship-classes.svelte @@ -241,9 +241,9 @@ 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; @@ -253,18 +253,18 @@ data fetching is performed here — the layout is responsible. font-size: 0.9rem; padding: 0.3rem 0.7rem; background: transparent; - color: #aab; - border: 1px solid #2a3150; + color: var(--color-text-muted); + border: 1px solid var(--color-border); border-radius: 3px; cursor: pointer; } .new:hover { - color: #e8eaf6; - border-color: #6d8cff; + color: var(--color-text); + border-color: var(--color-accent); } .status { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.9rem; } .grid { @@ -276,11 +276,11 @@ 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; @@ -289,7 +289,7 @@ data fetching is performed here — the layout is responsible. cursor: pointer; } .grid tbody tr:hover { - background: #11172a; + background: var(--color-surface); } .sort { font: inherit; @@ -313,12 +313,12 @@ data fetching is performed here — the layout is responsible. font-size: 0.85rem; padding: 0.15rem 0.5rem; background: transparent; - color: #d97a7a; - border: 1px solid #2a3150; + color: var(--color-danger); + border: 1px solid var(--color-border); border-radius: 3px; cursor: pointer; } .delete:hover { - border-color: #d97a7a; + border-color: var(--color-danger); } diff --git a/ui/frontend/src/lib/active-view/table.svelte b/ui/frontend/src/lib/active-view/table.svelte index 827c622..3cc9975 100644 --- a/ui/frontend/src/lib/active-view/table.svelte +++ b/ui/frontend/src/lib/active-view/table.svelte @@ -53,6 +53,6 @@ e2e specs (`game-shell.spec.ts`, `view-menu`) keep matching. } .active-view p { margin: 0; - color: #555; + color: var(--color-text-muted); } diff --git a/ui/frontend/src/lib/battle-player/battle-viewer.svelte b/ui/frontend/src/lib/battle-player/battle-viewer.svelte index faae3ff..93f6ad2 100644 --- a/ui/frontend/src/lib/battle-player/battle-viewer.svelte +++ b/ui/frontend/src/lib/battle-player/battle-viewer.svelte @@ -238,7 +238,7 @@ matching `pkg/model/report/battle.go` and it plays back. min-height: 0; margin: 0 auto; padding: 0.75rem 1rem; - color: #d6dcf2; + color: var(--color-text); font-family: inherit; box-sizing: border-box; } @@ -263,19 +263,19 @@ matching `pkg/model/report/battle.go` and it plays back. } .back-btn { appearance: none; - background: #1f2748; - color: #d6dcf2; - border: 1px solid #2c3568; + background: var(--color-surface-raised); + color: var(--color-text); + border: 1px solid var(--color-border); padding: 0.3rem 0.6rem; border-radius: 3px; cursor: pointer; font-size: 0.8rem; } .back-btn:hover { - background: #2a3463; + background: var(--color-surface-hover); } .progress { - color: #93a0d0; + color: var(--color-text-muted); font-variant-numeric: tabular-nums; font-size: 0.85rem; flex: 0 0 auto; @@ -283,8 +283,8 @@ matching `pkg/model/report/battle.go` and it plays back. text-align: right; } .scene { - background: #0a0d1a; - border: 1px solid #1e264a; + background: var(--color-bg); + border: 1px solid var(--color-border-subtle); border-radius: 4px; overflow: hidden; flex: 1 1 auto; @@ -294,7 +294,7 @@ matching `pkg/model/report/battle.go` and it plays back. width: 100%; margin: 0; flex: 0 0 auto; - accent-color: #6d7bb5; + accent-color: var(--color-accent); } .log { flex: 0 1 auto; @@ -306,7 +306,7 @@ matching `pkg/model/report/battle.go` and it plays back. } .log h3 { margin: 0 0 0.3rem; - color: #93a0d0; + color: var(--color-text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; @@ -318,12 +318,12 @@ matching `pkg/model/report/battle.go` and it plays back. padding: 0; font-size: 0.85rem; overflow-y: auto; - color: #c6cdf0; + color: var(--color-text-muted); flex: 1 1 auto; min-height: 0; } .log li { - border-bottom: 1px solid #1c2240; + border-bottom: 1px solid var(--color-border-subtle); } .log-row-btn { display: block; @@ -338,11 +338,11 @@ matching `pkg/model/report/battle.go` and it plays back. } .log-row-btn:hover, .log-row-btn:focus-visible { - background: #131a36; + background: var(--color-surface-hover); } .log li[data-current="true"] .log-row-btn { - color: #ffe27a; + color: var(--color-accent); font-weight: 600; - background: #1a2240; + background: var(--color-accent-subtle); } diff --git a/ui/frontend/src/lib/battle-player/playback-controls.svelte b/ui/frontend/src/lib/battle-player/playback-controls.svelte index bc353d0..04cb9b7 100644 --- a/ui/frontend/src/lib/battle-player/playback-controls.svelte +++ b/ui/frontend/src/lib/battle-player/playback-controls.svelte @@ -119,8 +119,8 @@ nowhere to go and step-forward when the timeline is at its end. align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; - background: #131934; - border: 1px solid #1e264a; + background: var(--color-surface); + border: 1px solid var(--color-border-subtle); border-radius: 4px; } .spacer { @@ -128,9 +128,9 @@ nowhere to go and step-forward when the timeline is at its end. } button { appearance: none; - background: #1f2748; - color: #d6dcf2; - border: 1px solid #2c3568; + background: var(--color-surface-raised); + color: var(--color-text); + border: 1px solid var(--color-border); padding: 0.35rem 0.7rem; border-radius: 3px; cursor: pointer; @@ -139,7 +139,7 @@ nowhere to go and step-forward when the timeline is at its end. min-width: 2.5rem; } button:hover:not(:disabled) { - background: #2a3463; + background: var(--color-surface-hover); } button:disabled { opacity: 0.4; @@ -150,6 +150,6 @@ nowhere to go and step-forward when the timeline is at its end. font-variant-numeric: tabular-nums; } .log-toggle.active { - background: #2a3463; + background: var(--color-surface-hover); } diff --git a/ui/frontend/src/lib/calculator/ship-design-area.svelte b/ui/frontend/src/lib/calculator/ship-design-area.svelte index 6eb0473..fa2a7b4 100644 --- a/ui/frontend/src/lib/calculator/ship-design-area.svelte +++ b/ui/frontend/src/lib/calculator/ship-design-area.svelte @@ -172,13 +172,13 @@ calculator math — so the ship-group upgrade flow can reuse it later. gap: 0.35rem; } .col-head { - color: #8890b0; + color: var(--color-text-muted); font-size: 0.7rem; text-align: center; text-transform: lowercase; } .label { - color: #aab; + color: var(--color-text-muted); font-size: 0.8rem; } input { @@ -187,19 +187,19 @@ calculator math — so the ship-group upgrade flow can reuse it later. width: 100%; min-width: 0; padding: 0.2rem 0.35rem; - 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; } input[data-computed="true"], input[readonly] { - color: #9fb0ff; - background: #11162a; + color: var(--color-accent); + background: var(--color-surface-raised); } input[aria-invalid="true"] { - border-color: #d97a7a; + border-color: var(--color-danger); } .tech-cell { display: flex; diff --git a/ui/frontend/src/lib/header/history-banner.svelte b/ui/frontend/src/lib/header/history-banner.svelte index 3b53555..c2a353b 100644 --- a/ui/frontend/src/lib/header/history-banner.svelte +++ b/ui/frontend/src/lib/header/history-banner.svelte @@ -51,9 +51,9 @@ budget. align-items: center; gap: 0.75rem; padding: 0.4rem 0.9rem; - background: #2a2438; - color: #efe9c8; - border-bottom: 1px solid #45375a; + background: var(--color-surface); + color: var(--color-warning); + border-bottom: 1px solid var(--color-border); font-family: system-ui, sans-serif; font-size: 0.9rem; } @@ -69,12 +69,12 @@ budget. padding: 0.25rem 0.65rem; background: transparent; color: inherit; - border: 1px solid #6c5a8a; + border: 1px solid var(--color-border-strong); border-radius: 4px; cursor: pointer; white-space: nowrap; } .return:hover { - background: #3a3050; + background: var(--color-surface-hover); } diff --git a/ui/frontend/src/lib/header/turn-navigator.svelte b/ui/frontend/src/lib/header/turn-navigator.svelte index ad7e346..6381eaa 100644 --- a/ui/frontend/src/lib/header/turn-navigator.svelte +++ b/ui/frontend/src/lib/header/turn-navigator.svelte @@ -177,14 +177,14 @@ Selecting a row calls `gameState.viewTurn(N)`; the row that matches padding: 0.25rem 0.55rem; background: transparent; color: inherit; - border: 1px solid #2a3150; + border: 1px solid var(--color-border); border-radius: 4px; cursor: pointer; line-height: 1; } .step:hover:not(:disabled), .trigger:hover:not(:disabled) { - background: #1c2238; + background: var(--color-surface-hover); } .step:disabled, .trigger:disabled { @@ -204,10 +204,10 @@ Selecting a row calls `gameState.viewTurn(N)`; the row that matches overflow-y: auto; display: flex; flex-direction: column; - background: #14182a; - border: 1px solid #2a3150; + background: var(--color-surface-overlay); + border: 1px solid var(--color-border); border-radius: 6px; - box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); + box-shadow: var(--shadow-lg); z-index: 50; } .row { @@ -224,11 +224,11 @@ Selecting a row calls `gameState.viewTurn(N)`; the row that matches cursor: pointer; } .row:hover { - background: #1c2238; + background: var(--color-surface-hover); } .row.viewed { font-weight: 600; - background: #1a2040; + background: var(--color-surface-raised); } .label { flex: 1; @@ -243,8 +243,8 @@ Selecting a row calls `gameState.viewTurn(N)`; the row that matches text-transform: uppercase; letter-spacing: 0.04em; padding: 0.05rem 0.4rem; - background: #2a3150; - color: #d8def0; + background: var(--color-border); + color: var(--color-text); border-radius: 999px; } @media (max-width: 767.98px) { diff --git a/ui/frontend/src/lib/header/view-menu.svelte b/ui/frontend/src/lib/header/view-menu.svelte index 6069f9e..3eaaf76 100644 --- a/ui/frontend/src/lib/header/view-menu.svelte +++ b/ui/frontend/src/lib/header/view-menu.svelte @@ -157,12 +157,12 @@ polishes microcopy. padding: 0.25rem 0.6rem; background: transparent; color: inherit; - border: 1px solid #2a3150; + border: 1px solid var(--color-border); border-radius: 4px; cursor: pointer; } .trigger:hover { - background: #1c2238; + background: var(--color-surface-hover); } .icon-dropdown { display: inline; @@ -185,10 +185,10 @@ polishes microcopy. min-width: 14rem; display: flex; flex-direction: column; - background: #14182a; - border: 1px solid #2a3150; + background: var(--color-surface-overlay); + border: 1px solid var(--color-border); border-radius: 6px; - box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); + box-shadow: var(--shadow-lg); z-index: 50; } .surface > button, @@ -213,12 +213,12 @@ polishes microcopy. text-align: center; font-size: 0.75rem; border-radius: 999px; - background: #2a4d7d; - color: #fff; + background: var(--color-accent); + color: var(--color-accent-contrast); } .surface > button:hover, .surface > details > summary:hover { - background: #1c2238; + background: var(--color-surface-hover); } .surface > details > summary { list-style: none; @@ -238,7 +238,7 @@ polishes microcopy. display: flex; flex-direction: column; padding-left: 0.5rem; - border-left: 1px solid #2a3150; + border-left: 1px solid var(--color-border); margin: 0 0.5rem 0.25rem; } .sub > button { @@ -251,7 +251,7 @@ polishes microcopy. cursor: pointer; } .sub > button:hover { - background: #1c2238; + background: var(--color-surface-hover); } @media (max-width: 767.98px) { .surface { diff --git a/ui/frontend/src/lib/inspectors/planet-sheet.svelte b/ui/frontend/src/lib/inspectors/planet-sheet.svelte index 5bd721a..695cb18 100644 --- a/ui/frontend/src/lib/inspectors/planet-sheet.svelte +++ b/ui/frontend/src/lib/inspectors/planet-sheet.svelte @@ -98,9 +98,9 @@ dismiss from the IA section §6 land in Phase 35 polish. bottom: 3.25rem; max-height: calc(100vh - 6rem); overflow-y: auto; - background: #14182a; - color: #e8eaf6; - border-top: 1px solid #2a3150; + background: var(--color-surface-overlay); + color: var(--color-text); + border-top: 1px solid var(--color-border); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4); z-index: 40; } @@ -113,13 +113,13 @@ dismiss from the IA section §6 land in Phase 35 polish. font-size: 1rem; 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; } .close:hover { - color: #e8eaf6; - border-color: #6d8cff; + color: var(--color-text); + border-color: var(--color-accent); } diff --git a/ui/frontend/src/lib/inspectors/planet.svelte b/ui/frontend/src/lib/inspectors/planet.svelte index b26598c..89692ec 100644 --- a/ui/frontend/src/lib/inspectors/planet.svelte +++ b/ui/frontend/src/lib/inspectors/planet.svelte @@ -344,7 +344,7 @@ field with five buttons. font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; - color: #aab; + color: var(--color-text-muted); } .name { margin: 0; @@ -361,7 +361,7 @@ field with five buttons. display: contents; } .field dt { - color: #aab; + color: var(--color-text-muted); font-size: 0.85rem; } .field dd { @@ -371,7 +371,7 @@ field with five buttons. } .hint { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.85rem; } .action { @@ -381,14 +381,14 @@ field with five buttons. 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:hover { - color: #e8eaf6; - border-color: #6d8cff; + color: var(--color-text); + border-color: var(--color-accent); } .rename { display: flex; @@ -397,23 +397,23 @@ field with five buttons. } .rename-label { font-size: 0.85rem; - color: #aab; + color: var(--color-text-muted); } .rename-input { 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; } .rename-input[aria-invalid="true"] { - border-color: #d97a7a; + border-color: var(--color-danger); } .rename-error { margin: 0; font-size: 0.8rem; - color: #d97a7a; + color: var(--color-danger); } .rename-actions { display: flex; @@ -425,15 +425,15 @@ field with five buttons. 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; } .rename-confirm:not(:disabled):hover, .rename-cancel:hover { - color: #e8eaf6; - border-color: #6d8cff; + color: var(--color-text); + border-color: var(--color-accent); } .rename-confirm:disabled { cursor: not-allowed; diff --git a/ui/frontend/src/lib/inspectors/planet/cargo-routes.svelte b/ui/frontend/src/lib/inspectors/planet/cargo-routes.svelte index 06f01fb..5f9544e 100644 --- a/ui/frontend/src/lib/inspectors/planet/cargo-routes.svelte +++ b/ui/frontend/src/lib/inspectors/planet/cargo-routes.svelte @@ -262,7 +262,7 @@ The component is purposely deferential to the existing infrastructure: .title { margin: 0; font-size: 0.85rem; - color: #aab; + color: var(--color-text-muted); font-weight: 500; } .slots { @@ -276,7 +276,7 @@ The component is purposely deferential to the existing infrastructure: display: contents; } .slot-label { - color: #aab; + color: var(--color-text-muted); font-size: 0.85rem; align-self: center; } @@ -290,25 +290,25 @@ The component is purposely deferential to the existing infrastructure: font-variant-numeric: tabular-nums; } .empty { - color: #888; + color: var(--color-text-muted); font-style: italic; } .destination { - color: #e8eaf6; + color: var(--color-text); } .action { 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; } .action:not(:disabled):hover { - color: #e8eaf6; - border-color: #6d8cff; + color: var(--color-text); + border-color: var(--color-accent); } .action:disabled { cursor: not-allowed; @@ -320,19 +320,19 @@ The component is purposely deferential to the existing infrastructure: align-items: center; flex-wrap: wrap; padding: 0.3rem 0.5rem; - background: rgba(255, 224, 130, 0.1); - border: 1px solid #ffe082; + background: var(--color-warning-subtle); + border: 1px solid var(--color-warning); border-radius: 4px; } .pick-message { - color: #ffe082; + color: var(--color-warning); font-size: 0.85rem; flex: 1; } .no-destinations { margin: 0; font-size: 0.8rem; - color: #888; + color: var(--color-text-muted); font-style: italic; } diff --git a/ui/frontend/src/lib/inspectors/planet/production.svelte b/ui/frontend/src/lib/inspectors/planet/production.svelte index 46a3023..f40718e 100644 --- a/ui/frontend/src/lib/inspectors/planet/production.svelte +++ b/ui/frontend/src/lib/inspectors/planet/production.svelte @@ -322,7 +322,7 @@ they carry more user intent). .title { margin: 0; font-size: 0.85rem; - color: #aab; + color: var(--color-text-muted); font-weight: 500; } .row { @@ -339,21 +339,21 @@ they carry more user intent). font-size: 0.85rem; 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; } .seg:not(:disabled):hover, .sub-seg:not(:disabled):hover { - color: #e8eaf6; - border-color: #6d8cff; + color: var(--color-text); + border-color: var(--color-accent); } .seg.active, .sub-seg.active { - color: #e8eaf6; - border-color: #6d8cff; - background: rgba(109, 140, 255, 0.15); + color: var(--color-text); + border-color: var(--color-accent); + background: var(--color-accent-subtle); } .seg:disabled, .sub-seg:disabled { @@ -363,7 +363,7 @@ they carry more user intent). .empty { margin: 0; font-size: 0.8rem; - color: #888; + color: var(--color-text-muted); font-style: italic; } diff --git a/ui/frontend/src/lib/inspectors/planet/ship-groups.svelte b/ui/frontend/src/lib/inspectors/planet/ship-groups.svelte index fe5270b..19498f7 100644 --- a/ui/frontend/src/lib/inspectors/planet/ship-groups.svelte +++ b/ui/frontend/src/lib/inspectors/planet/ship-groups.svelte @@ -162,7 +162,7 @@ ship-groups table view with an additional `(planet, race)` filter. font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; - color: #aab; + color: var(--color-text-muted); } .rows { list-style: none; @@ -195,17 +195,17 @@ ship-groups table view with an additional `(planet, race)` filter. cursor: pointer; } .select:hover { - border-color: #2a3150; - background: #0d1224; + border-color: var(--color-border); + background: var(--color-surface-hover); } .race { font-weight: 600; } .class { - color: #cdd; + color: var(--color-text-muted); } .count, .mass { - color: #aab; + color: var(--color-text-muted); } diff --git a/ui/frontend/src/lib/inspectors/ship-group-sheet.svelte b/ui/frontend/src/lib/inspectors/ship-group-sheet.svelte index 26e1509..1e2dbfd 100644 --- a/ui/frontend/src/lib/inspectors/ship-group-sheet.svelte +++ b/ui/frontend/src/lib/inspectors/ship-group-sheet.svelte @@ -90,9 +90,9 @@ mounted by the in-game shell layout only while the active tool is bottom: 3.25rem; max-height: calc(100vh - 6rem); overflow-y: auto; - background: #14182a; - color: #e8eaf6; - border-top: 1px solid #2a3150; + background: var(--color-surface-overlay); + color: var(--color-text); + border-top: 1px solid var(--color-border); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4); z-index: 40; } @@ -105,13 +105,13 @@ mounted by the in-game shell layout only while the active tool is font-size: 1rem; 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; } .close:hover { - color: #e8eaf6; - border-color: #6d8cff; + color: var(--color-text); + border-color: var(--color-accent); } diff --git a/ui/frontend/src/lib/inspectors/ship-group.svelte b/ui/frontend/src/lib/inspectors/ship-group.svelte index 8c5a440..bc5e588 100644 --- a/ui/frontend/src/lib/inspectors/ship-group.svelte +++ b/ui/frontend/src/lib/inspectors/ship-group.svelte @@ -267,7 +267,7 @@ variant — for Phase 19 the inspector is intentionally read-only. font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; - color: #aab; + color: var(--color-text-muted); } .name { margin: 0; @@ -284,7 +284,7 @@ variant — for Phase 19 the inspector is intentionally read-only. display: contents; } .field dt { - color: #aab; + color: var(--color-text-muted); font-size: 0.85rem; } .field dd { @@ -294,7 +294,7 @@ variant — for Phase 19 the inspector is intentionally read-only. } .hint { margin: 0; - color: #888; + color: var(--color-text-muted); font-size: 0.85rem; } diff --git a/ui/frontend/src/lib/inspectors/ship-group/actions.svelte b/ui/frontend/src/lib/inspectors/ship-group/actions.svelte index 23808eb..a9e7a6a 100644 --- a/ui/frontend/src/lib/inspectors/ship-group/actions.svelte +++ b/ui/frontend/src/lib/inspectors/ship-group/actions.svelte @@ -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); } diff --git a/ui/frontend/src/lib/sidebar/calculator-tab.svelte b/ui/frontend/src/lib/sidebar/calculator-tab.svelte index 6b432e0..7ecc5e1 100644 --- a/ui/frontend/src/lib/sidebar/calculator-tab.svelte +++ b/ui/frontend/src/lib/sidebar/calculator-tab.svelte @@ -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); } diff --git a/ui/frontend/src/lib/sidebar/inspector-tab.svelte b/ui/frontend/src/lib/sidebar/inspector-tab.svelte index 9e2f7ef..108ab36 100644 --- a/ui/frontend/src/lib/sidebar/inspector-tab.svelte +++ b/ui/frontend/src/lib/sidebar/inspector-tab.svelte @@ -157,6 +157,6 @@ from the Phase 10 stub. .tool > p { margin: 0; padding: 0 1rem 1rem; - color: #888; + color: var(--color-text-muted); } diff --git a/ui/frontend/src/lib/sidebar/order-tab.svelte b/ui/frontend/src/lib/sidebar/order-tab.svelte index 7daf940..cceb9ae 100644 --- a/ui/frontend/src/lib/sidebar/order-tab.svelte +++ b/ui/frontend/src/lib/sidebar/order-tab.svelte @@ -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); } diff --git a/ui/frontend/src/lib/toast-host.svelte b/ui/frontend/src/lib/toast-host.svelte index 0eb930b..1af43ae 100644 --- a/ui/frontend/src/lib/toast-host.svelte +++ b/ui/frontend/src/lib/toast-host.svelte @@ -69,9 +69,9 @@ active so the surrounding shell layout is not perturbed. align-items: center; gap: 0.75rem; padding: 0.6rem 0.85rem; - background: #1a2034; - color: #e8eaf6; - border: 1px solid #2c3354; + background: var(--color-surface-overlay); + color: var(--color-text); + border: 1px solid var(--color-border); border-radius: 0.5rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); font-size: 0.9rem; @@ -82,7 +82,7 @@ active so the surrounding shell layout is not perturbed. } .toast-action { background: transparent; - color: #8ab4f8; + color: var(--color-accent); border: none; font-weight: 600; cursor: pointer; @@ -96,7 +96,7 @@ active so the surrounding shell layout is not perturbed. } .toast-close { background: transparent; - color: #94a3b8; + color: var(--color-text-muted); border: none; font-size: 1.1rem; line-height: 1; @@ -104,6 +104,6 @@ active so the surrounding shell layout is not perturbed. padding: 0 0.25rem; } .toast-close:hover { - color: #e8eaf6; + color: var(--color-text); } diff --git a/ui/frontend/src/routes/__debug/map/+page.svelte b/ui/frontend/src/routes/__debug/map/+page.svelte index 3e34dc9..3ffad4c 100644 --- a/ui/frontend/src/routes/__debug/map/+page.svelte +++ b/ui/frontend/src/routes/__debug/map/+page.svelte @@ -168,15 +168,15 @@ height: 100vh; margin: 0; font-family: system-ui, sans-serif; - color: #e8eaf6; - background: #0a0e1a; + color: var(--color-text); + background: var(--color-bg); } header { padding: 0.5rem 1rem; display: flex; gap: 1rem; align-items: center; - border-bottom: 1px solid #20253a; + border-bottom: 1px solid var(--color-border-subtle); } h1 { margin: 0; @@ -190,15 +190,15 @@ } button { padding: 0.25rem 0.75rem; - background: #1c2238; - color: #e8eaf6; - border: 1px solid #2a3150; + background: var(--color-surface-hover); + color: var(--color-text); + border: 1px solid var(--color-border); border-radius: 4px; cursor: pointer; font: inherit; } button:hover { - background: #232b48; + background: var(--color-surface-hover); } .canvas-wrap { flex: 1; @@ -212,7 +212,7 @@ } .error { padding: 0.5rem 1rem; - background: #4a1820; - color: #ffb4b4; + background: var(--color-danger-subtle); + color: var(--color-danger); } diff --git a/ui/frontend/src/routes/lobby/+page.svelte b/ui/frontend/src/routes/lobby/+page.svelte index aaa96bf..35f198f 100644 --- a/ui/frontend/src/routes/lobby/+page.svelte +++ b/ui/frontend/src/routes/lobby/+page.svelte @@ -526,9 +526,9 @@ flex-direction: column; gap: 0.25rem; padding: 0.75rem; - border: 1px solid #ccc; + border: 1px solid var(--color-border); border-radius: 0.4rem; - background: #fafafa; + background: var(--color-surface-raised); text-align: left; font: inherit; cursor: pointer; @@ -537,8 +537,8 @@ button.card:disabled { cursor: not-allowed; - color: #777; - background: #f0f0f0; + color: var(--color-text-faint); + background: var(--color-surface); } li.card { @@ -546,7 +546,7 @@ } .meta { - color: #555; + color: var(--color-text-muted); font-size: 0.9rem; } @@ -554,7 +554,7 @@ align-self: flex-start; padding: 0.1rem 0.5rem; border-radius: 999px; - background: #e7e7e7; + background: var(--color-surface-raised); font-size: 0.8rem; } @@ -587,9 +587,9 @@ align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; - border: 1px dashed #888; + border: 1px dashed var(--color-text-muted); border-radius: 0.4rem; - background: #f7f7f7; + background: var(--color-surface-raised); cursor: pointer; font: inherit; } diff --git a/ui/frontend/src/routes/lobby/create/+page.svelte b/ui/frontend/src/routes/lobby/create/+page.svelte index 9c131a0..9b169d1 100644 --- a/ui/frontend/src/routes/lobby/create/+page.svelte +++ b/ui/frontend/src/routes/lobby/create/+page.svelte @@ -263,7 +263,7 @@ } details { - border: 1px solid #ddd; + border: 1px solid var(--color-border); border-radius: 0.4rem; padding: 0.5rem 0.75rem; display: flex; @@ -287,6 +287,6 @@ } small { - color: #666; + color: var(--color-text-muted); } diff --git a/ui/frontend/src/routes/login/+page.svelte b/ui/frontend/src/routes/login/+page.svelte index 9dce69b..482c5b5 100644 --- a/ui/frontend/src/routes/login/+page.svelte +++ b/ui/frontend/src/routes/login/+page.svelte @@ -351,6 +351,6 @@ [role="alert"] { margin-top: 1rem; - color: #b00020; + color: var(--color-danger); }