@northslopetech/altitude-tokens

Design tokens for the Altitude design system, providing a consistent foundation for colors, typography, and spacing across all applications.

Structure

packages/altitude-tokens/
├── src/
│   ├── tokens/
│   │   ├── baseColors.ts          # Base color definitions
│   │   ├── semanticColors.ts      # Semantic color definitions
│   │   ├── typography.ts          # Typography definitions
│   │   └── tokens.ts              # Combined token definitions
│   └── index.ts                   # Package entry point
├── scripts/
│   └── build-tokens.js            # Build script
├── dist/                          # Generated token files
│   └── tokens.css                 # Base CSS custom properties
└── package.json                   # Package configuration

Installation

npm install @northslopetech/altitude-tokens
# or
pnpm add @northslopetech/altitude-tokens

Usage

CSS Custom Properties

Import the CSS file in your application:

@import "@northslopetech/altitude-tokens/css";

Or use the tokens stylesheet directly:

@import "@northslopetech/altitude-tokens/tokens.css";

JavaScript Constants

import {
  ColorPrimary500,
  TypographyBodyMd,
} from "@northslopetech/altitude-tokens";

Design Tokens

The TypeScript modules contain all design tokens organized by category:

Colors

• Base: white, black - fundamental colors
• Primary: 100-900 - brand green color scale
• Neutral: 100-900 - gray color scale
• Semantic: info, error - contextual colors

Typography

• Display: xs, sm, md, lg, xl - large heading styles
• Heading: sm, md, lg, xl - standard heading styles
• Body: xs, sm, md, lg, xl - body text styles
• Label: xs, sm, md, lg with regular/bold variants - UI label styles

Adding New Fonts

When adding new fonts to the design tokens:

1. Install the font in your application - The design system does not bundle fonts. Applications must install and make fonts available themselves
2. Add font definitions to typography tokens - Update the typography tokens to reference the new font family
3. Ensure font availability - Make sure the font is loaded and accessible in your application before using the tokens

Example font installation approaches:

• Package manager: Install font packages (e.g., pnpm install @fontsource/inter)
• Self-hosted: Include font files in your application's assets

The generated CSS will reference the font family, but the actual font files must be provided by the consuming application.

Generated Outputs

CSS Custom Properties

The build process generates CSS custom properties for each token set:

:root {
  --color-primary-500: #3fc677;
  --typography-body-md: 400 16px/24px Inter;
  /* ... */
}

JavaScript Constants

TypeScript/JavaScript constants are also generated:

export const ColorPrimary500 = "#3fc677";
export const TypographyBodyMd = {
  fontFamily: "Inter",
  fontWeight: 400,
  fontSize: "16px",
  lineHeight: "24px",
  letterSpacing: "0px",
  paragraphSpacing: "16px",
};

Development

Build Commands

# Build tokens once
pnpm run build

# Watch for changes and rebuild
pnpm run dev

# Clean generated files
pnpm run clean

# Run tests
pnpm test

# Type checking
pnpm run check-types

Integration

The generated tokens are consumed by:

• @northslopetech/altitude-ui - Uses tokens for component styling
• Storybook - Displays token documentation
• Applications - Can import CSS files or JavaScript constants directly