The Unity themes package provides a comprehensive design system using TailwindCSS 4, converting all the design tokens of the Unity design system into TailwindCSS utility classes. This is the foundational part of the unity design system and is heavily used
npm install @payfit/unity-themesThe Unity themes package provides a comprehensive design system using TailwindCSS 4, converting all the design tokens of the Unity design system into TailwindCSS utility classes. This is the foundational part of the unity design system and is heavily used by the components package and other unity packages.
> Note: This is version 1.x of Unity Themes, built for TailwindCSS 4. If you're migrating from v0.x, see MIGRATIONS.md. For legacy documentation, see README-v0.md.
Install and configure this package by following these steps:
1. Install the package and dependencies
``bash`
yarn add tailwindcss @fontsource/{inter,source-serif-4}
yarn add @payfit/unity-themes
2. Set up TailwindCSS in your project
You need to configure TailwindCSS 4 in your project. This can be done using either the Vite plugin or PostCSS plugin:
- Install TailwindCSS v4 in a Vite Project
- Install TailwindCSS v4 using PostCSS
3. Import Unity Themes in your main CSS file
`css`
/ /path/to/your/main/styles.css /
@import '@payfit/unity-themes/css/unity.css';
That's it! The Unity CSS file includes all font imports and TailwindCSS configuration.
4. Use the utility classes in your elements
`html`
If you need to use JavaScript utilities (like uyMerge for class merging), import them normally:
`javascript
import { uyMerge } from '@payfit/unity-themes'
const className = uyMerge('uy:bg-red-l1', 'uy:bg-blue-l2') // 'uy:bg-blue-500'
`
Use Unity utility classes with the uy: prefix:
`html`
class="uy:bg-surface-primary uy:text-surface-inverted uy:hover:bg-surface-secondary"
>
Hello Unity!
Unity classes use the uy: prefix and the prefix goes before any modifiers:
`html`
Access design tokens directly via CSS custom properties:
`jsx`
const MyComponent = ({ isHighlighted }) => {
const bgColor = isHighlighted ? 'var(--color-grayscale-l9)' : 'transparent'
return (
Custom styling with design tokens
)
}
- Architecture: Technical details, build process, and internal structure
- Migrations: Complete guide for migrating from v0.x to v1.x
- Legacy v0.x: Documentation for the previous version
Design tokens are sourced from Unity's Figma design system and organized in the tokens/ directory:
`shell`
tokens/
├── colors.json # Color palette and semantic colors
├── typography.json # Font families, sizes, and text styles
├── spacings.json # Spacing scale and layout values
├── shadows.json # Box shadow definitions
├── radii.json # Border radius values
├── layout.json # Grid and container sizes
├── sizes.json # Component and element sizes
└── text.json # Text-specific tokens
`bashBuild the package
yarn nx run unity-themes:build