Ilia Denisov
973480d812
Tests · UI / test (push) Successful in 2m4s
Introduce the shared design-token system under ui/frontend/src/lib/theme/: tokens.css (dark default + light palette, plus spacing/radii/typography scales), base.css global baseline (document background, text, token focus ring, selection), and theme.svelte.ts (system/light/dark choice, persisted to localStorage, applied via data-theme on <html>). A pre-paint guard in app.html resolves the theme before the app boots to avoid a flash, and the theme picker is wired into the previously-disabled account-menu stub. Migrate the always-visible in-game chrome to the tokens (header, account menu, sidebar, tab-bar, bottom-tabs, shell background): dark renders as before, light comes for free. The default stays dark during the incremental migration; the remaining view bodies migrate in F1b. Docs: ui/docs/design-system.md (+ index entry). Test: tests/theme.test.ts. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
75 lines
2.0 KiB
Svelte
75 lines
2.0 KiB
Svelte
<!--
|
|
Three-button tab switcher for the sidebar. Each button is labelled
|
|
and tagged so component tests can target it; the parent sidebar
|
|
component owns the selected-tab state and re-renders the matching
|
|
tool panel.
|
|
|
|
Phase 12 introduces the `hideOrder` prop: when true the Order entry
|
|
is filtered out of the tab list. The current consumer is the
|
|
`historyMode` flag forwarded from the in-game shell layout — the
|
|
flag is constant `false` in Phase 12 and Phase 26's history mode
|
|
flips it on.
|
|
-->
|
|
<script lang="ts">
|
|
import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
|
|
import type { SidebarTab } from "./types";
|
|
|
|
type Props = {
|
|
activeTab: SidebarTab;
|
|
onSelect: (tab: SidebarTab) => void;
|
|
hideOrder?: boolean;
|
|
};
|
|
let { activeTab, onSelect, hideOrder = false }: Props = $props();
|
|
|
|
const allTabs: ReadonlyArray<{ id: SidebarTab; key: TranslationKey }> = [
|
|
{ id: "calculator", key: "game.sidebar.tab.calculator" },
|
|
{ id: "inspector", key: "game.sidebar.tab.inspector" },
|
|
{ id: "order", key: "game.sidebar.tab.order" },
|
|
];
|
|
const tabs = $derived(
|
|
hideOrder ? allTabs.filter((t) => t.id !== "order") : allTabs,
|
|
);
|
|
</script>
|
|
|
|
<div class="tab-bar" role="tablist" data-testid="sidebar-tab-bar">
|
|
{#each tabs as tab (tab.id)}
|
|
<button
|
|
type="button"
|
|
role="tab"
|
|
data-testid="sidebar-tab-{tab.id}"
|
|
aria-selected={tab.id === activeTab}
|
|
class:active={tab.id === activeTab}
|
|
onclick={() => onSelect(tab.id)}
|
|
>
|
|
{i18n.t(tab.key)}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
.tab-bar {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
padding: 0.5rem 0.5rem 0;
|
|
border-bottom: 1px solid var(--color-border-subtle);
|
|
font-family: var(--font-sans);
|
|
}
|
|
.tab-bar button {
|
|
font: inherit;
|
|
font-size: 0.9rem;
|
|
padding: 0.4rem 0.75rem;
|
|
background: transparent;
|
|
color: var(--color-text-muted);
|
|
border: 0;
|
|
border-bottom: 2px solid transparent;
|
|
cursor: pointer;
|
|
}
|
|
.tab-bar button.active {
|
|
color: var(--color-text);
|
|
border-bottom-color: var(--color-accent);
|
|
}
|
|
.tab-bar button:hover:not(.active) {
|
|
color: var(--color-text);
|
|
}
|
|
</style>
|