feat(redesign): design-system tokens, 23 Vue components, game-aware shell + Fleet/Solo dashboard
All checks were successful
Test Asgard Runner / test (push) Successful in 4s
All checks were successful
Test Asgard Runner / test (push) Successful in 4s
Tokens ported 1:1 from the Claude Design bundle (colors/game-themes/type/spacing/elevation/motion/fonts) with the data-theme/data-game theming contract via useThemeGame (+ cc-skin-swap repaint guard). 23 design-system components reimplemented as Vue SFCs (core/forms/data/navigation/feedback/brand). DashboardLayout rebuilt as the game-aware shell (GameSwitcher, grouped nav with permission gating preserved, agent-health footer, topbar). DashboardView: Fleet + Solo with per-game GAME_FIELDS rows and the themed ECharts PlayersChart; Solo wired to the real server store, Fleet on representative data pending the multi-instance backend. All four game skins (Rust/Dune/Conan/Soulmask). vue-tsc + vite build green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
27
frontend/src/styles/tokens/motion.css
Normal file
27
frontend/src/styles/tokens/motion.css
Normal file
@@ -0,0 +1,27 @@
|
||||
/* ============================================================
|
||||
Corrosion Control — Motion
|
||||
Fast, mechanical, precise. No bounce on chrome. Subtle spring
|
||||
reserved for "live" telemetry (pulses, meters). Respect
|
||||
prefers-reduced-motion in components.
|
||||
============================================================ */
|
||||
|
||||
:root {
|
||||
--dur-instant: 80ms; /* @kind other */
|
||||
--dur-fast: 120ms; /* @kind other */
|
||||
--dur-base: 170ms; /* @kind other */
|
||||
--dur-slow: 240ms; /* @kind other */
|
||||
--dur-slower: 360ms; /* @kind other */
|
||||
|
||||
/* Easings */
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
|
||||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
|
||||
--ease-in: cubic-bezier(0.5, 0, 0.84, 0); /* @kind other */
|
||||
--ease-emphasized: cubic-bezier(0.34, 1.4, 0.5, 1); /* @kind other */
|
||||
|
||||
/* Common transition bundles */
|
||||
--transition-colors: color var(--dur-fast) var(--ease-standard),
|
||||
background-color var(--dur-fast) var(--ease-standard),
|
||||
border-color var(--dur-fast) var(--ease-standard),
|
||||
box-shadow var(--dur-fast) var(--ease-standard);
|
||||
--transition-transform: transform var(--dur-base) var(--ease-out);
|
||||
}
|
||||
Reference in New Issue
Block a user