Skip to content

Add design-system foundation (tokens, theming, accent, color scheme)#86

Open
b006n97 wants to merge 1 commit into
pr-a-backend-page-sizefrom
pr-1-design-foundation
Open

Add design-system foundation (tokens, theming, accent, color scheme)#86
b006n97 wants to merge 1 commit into
pr-a-backend-page-sizefrom
pr-1-design-foundation

Conversation

@b006n97

@b006n97 b006n97 commented Jul 2, 2026

Copy link
Copy Markdown
Collaborator

Introduces the platform layer the rest of the UI overhaul sits on, with no feature redesigns yet:

  • theme/tokens.ts: single source of truth for accent ramps (red/blue/green), per-scheme neutrals, medal/placement colors, and timing.
  • theme/index.ts: createAppTheme(accent) builds a colorSchemes (light/dark) theme, exposing accent + neutrals as CSS vars (--mui-palette-*).
  • theme/AccentContext.tsx: runtime accent switch (localStorage-persisted), orthogonal to MUI's color-scheme mode.
  • theme/utils.ts: additive sx presets (gradientTitle, eyebrowLabel) plus restyled existing helpers; export names/types unchanged so current components keep compiling.
  • index.tsx: InitColorSchemeScript to avoid a flash of the wrong theme.
  • index.html: load the Manrope font used by the theme typography.
  • App.tsx: swap ThemeProvider(createAppTheme()) for only; routing is left untouched here and migrated in later PRs.
  • DESIGN.md: design-system reference. Fixed the tokens.ts docstring drift (was "two accent variants"; there are three: red/blue/green).

Typechecks independently (tsc --noEmit clean) with the still-un-migrated components consuming the new theme.

Introduces the platform layer the rest of the UI overhaul sits on, with no
feature redesigns yet:

- theme/tokens.ts: single source of truth for accent ramps (red/blue/green),
  per-scheme neutrals, medal/placement colors, and timing.
- theme/index.ts: createAppTheme(accent) builds a colorSchemes (light/dark)
  theme, exposing accent + neutrals as CSS vars (--mui-palette-*).
- theme/AccentContext.tsx: runtime accent switch (localStorage-persisted),
  orthogonal to MUI's color-scheme mode.
- theme/utils.ts: additive sx presets (gradientTitle, eyebrowLabel) plus
  restyled existing helpers; export names/types unchanged so current
  components keep compiling.
- index.tsx: InitColorSchemeScript to avoid a flash of the wrong theme.
- index.html: load the Manrope font used by the theme typography.
- App.tsx: swap ThemeProvider(createAppTheme()) for <AccentProvider> only;
  routing is left untouched here and migrated in later PRs.
- DESIGN.md: design-system reference. Fixed the tokens.ts docstring drift
  (was "two accent variants"; there are three: red/blue/green).

Typechecks independently (tsc --noEmit clean) with the still-un-migrated
components consuming the new theme.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant