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

Files

T

History

zeekay 7200114387 Merge upstream/dev (52 commits) + sweep yarn → pnpm

Upstream merge brings 52 commits from safe-global/safe-wallet-monorepo
into the luxfi/safe-wallet@dev fork.

Conflicts resolved:
- yarn.lock: deleted (we are on pnpm)
- apps/web/package.json: kept pnpm version + brand build scripts
  (build:safe / build:lux / build:hanzo) plus upstream's new
  generate-version.mjs step
- apps/mobile/.../Signer/appKit.ts: took upstream's import pattern
  for shared/projectId, shared/metadata, shared/mmkvStorageAdapter

Yarn sweep applied to 42 files (docs, github-actions, workflows, AGENTS,
specs, codemods, scripts, READMEs). Net result: zero yarn-* command
references anywhere outside node_modules.

  ❯ pnpm is the law in this fork. No yarn.

2026-05-27 03:25:16 -07:00

scripts

…

src

fix(web/Spaces): Epic Spaces M2 (#7539 )

2026-04-30 11:40:38 +02:00

ARCHITECTURE.md

Merge upstream/dev (52 commits) + sweep yarn → pnpm

2026-05-27 03:25:16 -07:00

eslint.config.mjs

feat(mobile): upgrade Expo SDK to v55 (#7433 )

2026-03-18 09:29:16 +01:00

jest.config.cjs

…

package.json

chore(mobile): upgrade Tamagui from v1 to v2 (#7497 )

2026-03-20 16:39:59 +01:00

README.md

Merge upstream/dev (52 commits) + sweep yarn → pnpm

2026-05-27 03:25:16 -07:00

tsconfig.json

…

README.md

@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
pnpm test

# Type check
yarn type-check

# Lint
pnpm lint
pnpm 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.