feat(mapgen-studio): migrate to Tailwind v4, establish tokenized design system, shadcn scaffolding, and .dark class theming#1604
Closed
mateicanavra wants to merge 3 commits into
Closed
Conversation
OpenSpec change 'mapgen-studio-design-system' (P1, FIRST domino): - proposal/tasks/design + mapgen-studio spec deltas (single tokenized design system; felt substrate-elevation hierarchy; single .dark theming + contour focus). - .interface-design/system.md: confirmed direction (cartographer's instrument, elevated cool-steel slate, substrate elevation = primary craft lever, dark-first + real light). launch.json for live preview. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…+ tokens Implements OpenSpec change 'mapgen-studio-design-system' (P1, non-breaking foundation): - Tailwind v3.4 → v4 (CSS-first): @tailwindcss/vite plugin, delete tailwind.config.js + postcss.config.js + autoprefixer; src/index.css → @import tailwindcss + tw-animate-css. - Single tokenized design system: HSL tokens in :root/.dark mapped via @theme inline. Cartographer's-instrument direction — graphite substrate, one elevated cool-steel slate accent, FELT substrate-elevation tiers (page→panel→floating) + border progression (the primary craft lever), contour-luminance focus ring. - shadcn scaffolding: components.json (new-york, slate, css vars), src/lib/utils.ts (cn), @/* alias in tsconfig + vite. - Theming repair: single .dark class with no-flash pre-paint bootstrap (default dark), replacing prefers-color-scheme + JIT-invisible createTheme. Self-hosted Inter + JetBrains Mono (@fontsource), removing render-blocking Google Fonts. Real overlay motion via tw-animate-css. Additive: existing components keep their hex utilities and render unchanged; they adopt tokens in later slices. Verify: tsc clean; vite build + worker-bundle check pass; live dev renders with no console errors and no regression. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…l ledger Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
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: |
Owner
Author
This was referenced Jun 12, 2026
Merged
refactor(studio): decompose App.tsx non-React corpus into feature modules and shared utilities
#1608
Merged
Merged
This was referenced Jun 12, 2026
Merged
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.
This PR establishes the design system foundation for MapGen Studio (P1 of the redesign workstream), replacing the broken ad-hoc styling infrastructure with a coherent, token-driven system.
Tailwind v4 migration. Removes
tailwind.config.js,postcss.config.js, andautoprefixerin favor of Tailwind v4's CSS-first@import "tailwindcss"+@tailwindcss/viteplugin. The existing arbitrary hex utilities across components remain valid in v4 and render unchanged — this is what makes the foundation non-breaking.Token system. Replaces three disagreeing dark palettes and 242 arbitrary hex utilities with a single set of HSL design tokens in
:root(light) and.dark(dark), mapped through@theme inlineto Tailwind utilities and shadcn aliases. The token set encodes a felt substrate-elevation tier scale (page → panel → nested → floating) and a border progression (subtle / default / strong) — the primary craft lever identified from the live app, which currently reads as one hollow plane with surfaces only ~4% lightness apart. Legacy--color-*vars referenced by scrollbar, select, and focus styles are re-pointed at the new tokens so nothing breaks.Design direction. The accent is a committed elevated cool-steel slate (
--primary 216 18% 42%), not the previously declared-but-unused indigo. Focus renders as a 1px contour ring using the ring token (a luminance step, not a saturated glow), consistent with the cartographer's instrument aesthetic where the deck.gl map is the only thing that should carry color.Theming repair. Adopts shadcn's single
.darkclass strategy with a no-flash inline bootstrap (default dark, localStorage-backed), replacing theprefers-color-schemecoupling and the JIT-invisiblecreateTheme()runtime string interpolation. The legacylightModeprop path is left in place and removed as components migrate in later slices; both systems coexist without conflict.shadcn scaffolding. Adds
components.json(New York style, CSS vars, slate base) andsrc/lib/utils.tsexportingcn. Adds@fontsource/interand@fontsource/jetbrains-monoas self-hosted replacements for the render-blocking Google Fonts@import. Installstw-animate-cssso the previously deadanimate-inoverlay transitions actually run.Path aliases. Adds
@/*→src/*totsconfig.jsonfor shadcn-compatible imports.Verified:
tsc --noEmitclean,vite buildsucceeds, worker bundle passes, app renders in dark with no console errors and no regression to existing components.