- Introduced RExpandTransition.vue to animate height changes of wrapped elements using v-if or v-show.
- Added index.ts to export the new RExpandTransition component.
- Updated RList, RListItem, RToolbar, RTooltip, RVirtualScroller components to remove Vuetify references in comments.
- Replaced v-expand-transition with RExpandTransition in Login.vue and Patcher.vue for consistent animation behavior.
- Refactored Scan.vue to manage open panels using a Set for better performance and clarity.
- Updated styles in global.css and tokens.css to improve focus ring visibility and component styling.
- Removed vuetify.ts theme definitions as they are no longer needed.
- Introduced a new "status" action in GameActionBtn, allowing users to set and display game status.
- Replaced the StatusBadge component with the GameActionBtn in GameCard for a unified interface.
- Updated various components to accommodate the new status feature, including GameDetails and AppNav.
- Added CSS variables for page max width to ensure consistent layout on ultrawide displays.
- Removed redundant max-width styles from several components to streamline layout management.
Co-authored-by: Copilot <copilot@github.com>
- Replaced hardcoded RGBA colors with color-mix for various UI elements in AuthCard, MissingFSBadge, PageHeader, AppLayout, RTable, RMenuPanel, RDialog, global styles, and tokens.
- Enhanced consistency in color application by introducing new color tokens for brand, status, and overlay colors.
- Updated background and border styles in multiple views including ControllerDebug, Pair, Patcher, Player, Scan, and Settings to align with new theming approach.
- Improved accessibility and visual coherence by ensuring color contrasts are maintained across light and dark themes.
Adds three new token groups so the 21 sites previously documented as
"intentional hardcoded rgba" can use proper tokens instead:
- colorOverlay (fixed dark glass, never theme-flips) — drives the
surfaces sitting on cover artwork: StatusBadge, GameCard
platform-icon / badge, GameActionBtn. Tokens: --r-color-overlay-fg
(.95) / -fg-secondary (.85) / -fg-muted (.45) / -border (.12) /
-border-strong (.25) / -scrim-soft (.55) / -scrim-strong (.78).
- panel + panelBorder pair (theme-flipped, in colorDark/colorLight) —
the deep-glass / off-white surfaces that RDialog and RMenuPanel
share. The inline `:global(.r-v2-light) X` overrides collapse into
single rules.
- tooltipBg + tooltipBorder pair (theme-flipped) — moves the
v-overlay__content.r-tooltip skin in global.css off literals.
- shimmerSweep (theme-flipped) — moves the linear-gradient sweep
inside RSkeletonBlock::after off the hand-paired rgba values.
Also: RMenuItem danger hover background now uses
`color-mix(in srgb, var(--r-color-danger) 12%, transparent)`
instead of the raw rgba(255, 80, 80, 0.12) — derived from the
canonical danger token.
Outside tokens.css (which holds the source values), v2 now has
zero `rgba(255, 255, 255, X)` literals.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
build-tokens.ts: import the source as .js (compatible with vue-tsc
without enabling allowImportingTsExtensions), wrap top-level await
in main(), drop a leftover unused helper. Doc strings now point to
"npm run build:tokens" — the script name avoids npm's reserved
"token" subcommand. Header in the regenerated tokens.css matches.
AppLayout, AuthLayout and PairShell: drop the redundant
"r-v2 r-v2-{dark|light}" classes from their root divs. RomM.vue
already toggles those on <html>, which covers both the in-tree
shell and any teleported overlays — anchoring them again on the
layout root was harmless duplication that complicated the v1 →
v2-only cleanup. Each layout keeps its own BEM root class
(.r-v2-shell, .r-v2-auth, .r-v2-pair-shell) for its scoped styles.
useThemeClass becomes unused and is removed; when v1 is deleted,
the only thing left to clean is the toggle in RomM.vue.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
scripts/build-tokens.ts emits src/v2/styles/tokens.css with explicit
naming overrides for the special cases (--r-row-pad, --r-elev-*,
--r-nav-h, abbreviated layout vars). tsx wired into devDeps;
build:tokens script + predev/prebuild hooks keep the CSS in sync.
Backfill missing tokens that lived only in CSS: --r-color-fav
joins colorBrand, and the focus colors in colorDark / colorLight
match the translucent values components actually consume (not the
unused #ffffff / #111117 they used to declare). Drop the orphan
--r-focus-ring-color (zero references in the codebase).
Adopt --r-radius-card (14px) for RMenuPanel and RDialog instead of
hard-coded 14px; switch a NotesTab badge from 10px to --r-radius-lg.
Closes the "panels use 14px not --r-radius-lg" pitfall — the
constitution no longer needs that footnote.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
