@canonical/launchpad-design-tokens

@canonical/launchpad-design-tokens

Design tokens for Canonical's Launchpad, providing consistent styling across the platform. This package generates CSS custom properties and Figma tokens from a centralized token system.

Installation

npm install @canonical/launchpad-design-tokens

Usage

CSS Tokens

The package provides CSS files with custom properties for different categories:

Colors

• dist/css/color/light.css - Light mode colors
• dist/css/color/dark.css - Dark mode colors
• dist/css/color/system.css - System preference based colors

Typography

• dist/css/typography/narrow.css - Typography for narrow screens
• dist/css/typography/medium.css - Typography for medium screens
• dist/css/typography/wide.css - Typography for wide screens
• dist/css/typography/extraWide.css - Typography for extra wide screens
• dist/css/typography/responsive.css - Responsive typography system

Dimensions

• dist/css/dimension/narrow.css - Dimensions for narrow screens
• dist/css/dimension/medium.css - Dimensions for medium screens
• dist/css/dimension/wide.css - Dimensions for wide screens
• dist/css/dimension/extraWide.css - Dimensions for extra wide screens
• dist/css/dimension/responsive.css - Responsive dimension system

Figma Tokens

Figma-compatible token files are available in dist/figma/ with the same structure as CSS tokens, plus manifest files for easy import.

Development

Prerequisites

• Bun - JavaScript runtime and package manager

Setup

bun install

Available Scripts

# Build all tokens
bun run build

# Build specific categories
bun run build:color
bun run build:typography
bun run build:dimension

# Run linting and type checking
bun run check

# Fix linting issues
bun run check:fix

Project Structure

src/
├── tokens/
│   ├── primitives/     # Base token values
│   └── semantic/       # Semantic token definitions
│       ├── color/
│       ├── typography/
│       └── dimension/
└── build/              # Build scripts
    ├── color.ts
    ├── typography.ts
    └── dimension.ts

Token Categories

Colors

• Light and dark mode support
• System preference detection
• Semantic color names for consistent theming

Typography

• Responsive font sizes and line heights
• Breakpoint-specific typography scales
• Consistent font family definitions

Dimensions

• Spacing and layout dimensions
• Responsive sizing systems
• Breakpoint-specific dimension scales

License

LGPL-3.0

Contributing

This project is maintained by the Canonical Webteam. For questions or contributions, please contact [e-mail].