Files
c19a0e01f2 refactor(theme): Create unified theme system for web and mobile (#6861)
* feat(theme): create unified theme system for web and mobile

Create @safe-global/theme package as single source of truth for design
tokens across web (MUI) and mobile (Tamagui) applications.

Major changes:
- New @safe-global/theme package with unified palettes (light/dark/static)
- Platform-specific generators (MUI, Tamagui, CSS vars)
- Dual spacing system (4px mobile, 8px web) with overlapping names
- Mobile's extended palette as base (includes skeleton, disabled, contrast)
- All MUI component overrides preserved
- Static colors available to both platforms

* fix(theme): use theme package instead of hardcoded colors in CSS vars generation

- Add "type": "module" and proper exports to @safe-global/theme package.json
- Fix css-vars.ts imports to work with tsx (remove .js extensions)
- Delete generate-vars.mjs workaround with hardcoded palette
- Regenerate vars.css from actual theme package

This ensures CSS variables are generated from the single source of truth
in @safe-global/theme, not from duplicated hardcoded values.

* style: fix prettier formatting in css-vars.ts

* fix(theme): rename mui-extensions.d.ts to .ts for Jest compatibility

Jest cannot import .d.ts files as modules. Renaming to .ts allows the type
augmentations to work with both TypeScript compilation and Jest tests.

Fixes 129 test suite failures in mobile app.

* fix(theme): address all PR review comments

P1 Critical Fixes:
- Use web spacing base (8px) instead of mobile (4px) in MUI theme
- Include all static color properties in CSS variable generation
- Fix background.default/paper color swap (restore original values)

Other Fixes:
- Add missing lineHeight to h5 typography variant
- Expand ColorPalette.static to match StaticColors interface (5 properties)
- Replace 'any' types with proper ColorPalette types in css-vars.ts
- Update AGENTS.md with correct css-vars command
- Fix README.md function signature examples
- Remove unused path mappings from theme tsconfig.json
- Regenerate vars.css with all fixes applied

Addresses all 11 review comments from Copilot and Codex.

* fix(theme): address code review issues and add tests

- Add backward-compatible base constant re-export with deprecation notice
- Consolidate MUI type declarations in theme package
- Simplify css-vars.ts to use theme package generator
- Remove problematic index signature from ColorPalette type
- Update CSS usages of lightGrey to secondary variable name
- Add 36 unit tests for theme utilities and generators
- Fix mobile tokens.ts CreateTokens type import error
- Fix jest.config.js ESM compatibility

* chore(theme): add eslint config for theme package

* test(mobile): update snapshots for unified theme colors

Update 14 snapshots to reflect the unified theme palette colors.
Background colors changed from mobile-specific values to unified values.

* test(web): fix tests for unified theme color changes

- Update NameChip.test.tsx to use new error background color (#FFE0E6)
- Update SettingsChange snapshot for theme CSS class changes

* fix(theme): convert camelCase palette keys to kebab-case in CSS vars

CSS variable names should use kebab-case to match CSS conventions.
The flatten function now converts camelCase keys like `textSecondary`
to `text-secondary` when generating CSS custom properties.

This fixes the issue where components referencing variables like
`var(--color-static-text-secondary)` were broken because the new
generator was outputting `--color-static-textSecondary` instead.

* fix(theme): correct background.default to #FFFFFF per Figma design

- Fixed light palette background.default from #F4F4F4 to #FFFFFF to match
  Figma design and original mobile palette
- Fixed background.paper to #F4F4F4 accordingly
- Added @mui/material as devDependency and removed from optional peer deps
- Regenerated CSS vars and updated mobile snapshot

* fix(theme): add type safety to generateTamaguiTokens

Added TamaguiTokensInput interface to provide type safety for the
generateTamaguiTokens() function, compatible with Tamagui's createTokens API.

* chore: update yarn.lock for theme package dependencies

* fix(theme): resolve MUI type extensions for web app

- Added MUI type declarations in web app theme folder (mui.d.ts)
- Removed MUI from theme package devDependencies to avoid duplicate types
- Import MUI extensions via side-effect in theme package index
- Simplified safeTheme.ts imports

* test(mobile): update snapshots for unified theme background color

Updated 13 mobile snapshots to reflect the new background.default color
(#FFFFFF) which matches the Figma design specification.

* test(web): update snapshots for unified theme color changes

Updated 6 web snapshots to reflect the unified theme color changes.

---------

Co-authored-by: Hanzo Dev <[email protected]>
2025-12-17 16:32:41 +01:00

10 lines
188 B
JSON

{
"extends": "../../config/tsconfig/confs/base.json",
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@safe-global/theme/*": ["../../packages/theme/src/*"]
}
}
}