Shared Theme Package

A shared theme package based on MUI (Material-UI) for the NodeBlocks project.

Setup

npm install

Development

Build

npm run build

Preview

npm run preview

Opens http://localhost:3000 in your browser with a preview of all theme components.

Syncing Design Tokens from Figma

This package includes a script to automatically sync design tokens from Figma.

Prerequisites

1. Get Figma API Token

   • Go to Figma → Settings → Personal access tokens
   • Create a new token and copy it

2. Set up environment variable

   • Create a .env file in the package root
   • Add: FIGMA_API_TOKEN=your_token_here
   • The .env file is already in .gitignore

Usage

npm run sync:figma

This script will:

• Fetch design tokens from the configured Figma file
• Extract colors, typography, spacing, shadows, and border radius
• Update the corresponding theme files (palette.ts, typography.ts, spacing.ts, shadows.ts, borderRadius.ts)

Note: The script extracts tokens from specific Figma nodes. If some tokens are not automatically detected, you may need to adjust the extraction logic based on your Figma file structure.

File Structure

src/
├── theme.tsx          # Main theme configuration
├── palette.ts         # Color palette definitions
├── typography.ts      # Typography settings
├── spacing.ts         # Spacing configuration
├── components.ts      # MUI component overrides
├── shadows.ts         # Box shadow tokens (from Figma)
├── borderRadius.ts    # Border radius tokens (from Figma)
└── theme.d.ts         # TypeScript type definitions

Notes

• Use npm run preview to verify theme changes
• Check Git diffs before committing changes
• After running sync:figma, review the changes and test with npm run preview

Resources

• MUI Theming Documentation