diff --git a/ui/docs/README.md b/ui/docs/README.md index 55947cc..44c00c4 100644 --- a/ui/docs/README.md +++ b/ui/docs/README.md @@ -9,6 +9,9 @@ lives in [`../PLAN.md`](../PLAN.md), the active web finalization in ## Foundation & platform +- [design-system.md](design-system.md) — the design tokens (colour / + spacing / typography), the light/dark theming mechanism, and the + component migration conventions. - [navigation.md](navigation.md) — routes, the sidebar tabs, and the state-preservation rules across view/tab switches. - [storage.md](storage.md) — the `KeyStore` and `Cache` abstractions and diff --git a/ui/docs/design-system.md b/ui/docs/design-system.md new file mode 100644 index 0000000..81b090a --- /dev/null +++ b/ui/docs/design-system.md @@ -0,0 +1,120 @@ +# Design system — tokens & theming + +The client's visual language lives in a single set of CSS custom +properties (design tokens). Components reference the tokens +(`var(--color-…)`, `var(--space-…)`) instead of literal hex/px, so a +palette change is a one-file edit and the light and dark themes stay in +lockstep. + +## Where the tokens live + +- [`src/lib/theme/tokens.css`](../frontend/src/lib/theme/tokens.css) — + every token. Theme-independent scales (spacing, radii, typography) sit + in `:root`; the colour/shadow palette is defined twice, once for dark + (`:root, :root[data-theme="dark"]`) and once for light + (`:root[data-theme="light"]`). +- [`src/lib/theme/base.css`](../frontend/src/lib/theme/base.css) — a + small global baseline (document background, default text/typography, a + token-driven focus ring, selection colour). Everything else stays in + component-scoped ` + %sveltekit.head% diff --git a/ui/frontend/src/lib/active-view/battle.svelte b/ui/frontend/src/lib/active-view/battle.svelte index 96ce2f6..29d9c02 100644 --- a/ui/frontend/src/lib/active-view/battle.svelte +++ b/ui/frontend/src/lib/active-view/battle.svelte @@ -180,16 +180,16 @@ viewer keeps its prop-driven contract. overflow: hidden; box-sizing: border-box; font-family: system-ui, sans-serif; - color: #d6dcf2; + color: var(--color-text); } .status { margin: 2rem auto; max-width: 880px; - color: #93a0d0; + color: var(--color-text-muted); font-size: 0.95rem; text-align: center; } .status.error { - color: #e08585; + color: var(--color-danger); } 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/account-menu.svelte b/ui/frontend/src/lib/header/account-menu.svelte index 80bc601..b5173d4 100644 --- a/ui/frontend/src/lib/header/account-menu.svelte +++ b/ui/frontend/src/lib/header/account-menu.svelte @@ -7,8 +7,20 @@ Sessions and Theme) take over. -->