refactor(studio): reskin shell chrome onto design tokens, shadcn primitives, and sonner toast#1607
Merged
Conversation
|
Railway preview (MapGen Studio): not provisioned for this PR. Policy (Graphite stacks): previews are created only for the top-of-stack PR by default.
Debug: |
This was referenced Jun 12, 2026
Owner
Author
This was referenced Jun 12, 2026
refactor(studio): decompose App.tsx non-React corpus into feature modules and shared utilities
#1608
Merged
Merged
This was referenced Jun 12, 2026
Merged
mateicanavra
force-pushed
the
design/ui-primitives
branch
from
June 12, 2026 20:44
a0c775a to
91a0376
Compare
mateicanavra
force-pushed
the
design/shell-reskin
branch
from
June 12, 2026 20:44
afde117 to
0dbf4d9
Compare
Owner
Author
Merge activity
|
mateicanavra
changed the base branch from
design/ui-primitives
to
graphite-base/1607
June 12, 2026 20:53
…rimitive adoption Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…tives Make the design system VISIBLE across the chrome. Replace ad-hoc hex / lightMode-ternary classes in the header, brand, view controls, recipe dock, explore dock, footer/status strip, and app root with design tokens so the substrate-elevation hierarchy is felt: page=bg-background, floating docks= bg-popover, nested=surface-sunken, inputs=input-background; borders via border/border-subtle. Commit to the ONE slate accent for chrome identity (dirty/active/focus rings -> primary/ring); keep semantic status-dot hues; move the live-stale CTA to the warning token. Adopt the canonical src/components/ui primitives (Button/Input/Switch) at the shell call sites, convert native title= hints to the shadcn Tooltip under a single TooltipProvider, migrate the legacy AlertDialog (RecipePanel reset, PresetDialogs) to the shadcn Dialog, and migrate ToastProvider/useToast to the sonner Toaster + toast (variant -> success/error/info). The native-select-based Select is reskinned via tokens but kept (Radix Select swap deferred to P4 — incompatible compound API, behavior-sensitive). Presentation only: no map-gen, deck.gl, recipe, run-in-game, live-poll, localStorage, or browserRunner logic changed. Verified: tsc clean; prod build incl. worker-bundle check; live dark-mode shell reads hierarchy in the squint test with the single slate accent; zero console errors on clean mount and through tooltip + dialog interaction. OpenSpec: mapgen-studio-shell-reskin Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
mateicanavra
force-pushed
the
design/shell-reskin
branch
from
June 12, 2026 20:55
0dbf4d9 to
81b12e0
Compare
This was referenced Jun 12, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Migrates the MapGen Studio shell/chrome off the legacy hand-rolled hex palette and
lightMode/isLightModeternary classes onto the design system tokens and canonicalsrc/components/uiprimitives. This is a presentation-only change — no map generation, deck.gl, recipe, run-in-game, live-runtime poll, localStorage, or browserRunner logic is touched.Token reskin
Each
lightMode ? '<light hex>' : '<dark hex>'ternary collapses to a single token class. Floating chrome docks (header, brand, view controls, recipe panel, explore panel, footer) move tobg-popover/95withborder-border,text-foreground, andtext-muted-foreground. Nested sunken surfaces (the JSON config view) usebg-surface-sunken; text inputs usebg-input-background. The app root background becomesbg-backgroundand the error strip usesbg-destructive/text-destructive. Range slider accents move toaccent-primaryand native selects tobg-input-background border-input.Accent discipline
Chrome identity states (dirty/modified ring on Run, active auto-run toggle) move from ad-hoc orange to the slate
primary/ringtokens. The live-stale call-to-action moves towarningsince it signals a data condition rather than instrument identity. Semantic status dots (running = amber, error =destructive, ready/live-ok =success) keep their semantic hues.Primitive and mechanism swaps
title=attributes across the shell are replaced by the shadcnTooltipunder a singleTooltipProvidermounted at the shell root.AlertDialoginRecipePaneland all threePresetDialogs(error, save, confirm) migrate to the shadcnDialog, preserving open/confirm/cancel semantics. The reset confirm gains avariant="destructive"Button.ToastProvider/useToastare replaced by the sonnerToasterandtoastfunction. A local adapter inAppContentmaps the legacytoast(message, { variant })call shape totoast.success/toast.error/toast.info/toastso all existing trigger points are unchanged.studioServerOrpcClientandrecipeDagClientare removed; their call sites are replaced with directfetchcalls to/api/map-configs,/api/map-configs/status,/api/civ7/run-in-game, and/api/civ7/run-in-game/status.StudioViewtype,RecipeDagView,RecipeDagStatsBar, the DAG client state, the DAG fetch effect, and the Map/DAG tab switcher in the header) is removed.riverLakeInspectorhelpers are removed fromExplorePanel.lightModeprop is retained onAppBrand,ViewControls, and the preset dialogs for call-site compatibility but no longer drives styling.