JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 6
  • Score
    100M100P100Q66105F
  • License LGPL-3.0

Design tokens for Canonical's Launchpad

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@canonical/launchpad-design-tokens) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    @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 webteam@canonical.com.