mirror of https://github.com/luxfi/safe-wallet.git synced 2026-10-30 15:19:21 +00:00

Files

T

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

2.2 KiB

Raw Permalink Blame History

@safe-global/theme

Unified theme package for Safe Wallet web and mobile applications.

Overview

This package provides a single source of truth for all design tokens (colors, spacing, typography, etc.) used across the Safe Wallet monorepo. It exports platform-specific theme generators for:

Web: MUI themes and CSS custom properties
Mobile: Tamagui tokens and themes

Installation

This is a workspace package used internally by the monorepo:

{
  "dependencies": {
    "@safe-global/theme": "workspace:^"
  }
}

Usage

Web (MUI + CSS vars)

import { generateMuiTheme } from '@safe-global/theme'

const theme = generateMuiTheme('light')
// or
const darkTheme = generateMuiTheme('dark')

Mobile (Tamagui)

import { generateTamaguiColorTokens, generateTamaguiFontSizes } from '@safe-global/theme'

const colorTokens = generateTamaguiColorTokens()
const fontSizes = generateTamaguiFontSizes()

Direct Token Access

import { spacingMobile, spacingWeb, radius, typography } from '@safe-global/theme/tokens'

Design Tokens

Colors

Unified color palette with light and dark modes:

Semantic colors: text, primary, secondary, border, error, success, info, warning
Background colors with variants
Static colors (theme-independent)

Spacing

Two spacing systems for platform compatibility:

Mobile: 4px base ($1=4px, $2=8px, $3=12px, ...)
Web: 8px base (space-1=8px, space-2=16px, space-3=24px, ...)
Where values overlap, same variable name is used

Typography

Font family: DM Sans
Font sizes: 1-16 (11px to 134px)
Typography variants: h1-h5, body1/body2, caption, overline

Border Radius

Radius scale from 0-12 (0px to 50px)

Development

# Run tests
yarn test

# Type check
yarn type-check

# Lint
yarn lint
yarn lint:fix

# Format
yarn prettier
yarn prettier:fix

Architecture

src/palettes/ - Color palette definitions
src/tokens/ - Design token definitions (spacing, typography, etc.)
src/generators/ - Platform-specific theme generators
src/utils/ - Utility functions

For more details, see the implementation plan and source code.

2.2 KiB Raw Permalink Blame History