@archzos/tokens

Universal design token system for the Archzos design system. Single source of truth for colors, typography, spacing, and more across all platforms.

Installation

npm install @archzos/tokens
# or
yarn add @archzos/tokens
# or
pnpm add @archzos/tokens

Usage

JavaScript/TypeScript

import { colors, typography, spacing, radius } from '@archzos/tokens';

// Use tokens in your styles
const styles = {
  color: colors.blue500,
  fontSize: typography.lg,
  padding: spacing.md,
  borderRadius: radius.lg
};

CLI Tool

Export tokens to any platform format:

# Export to specific format
npx @archzos/tokens export --format css
npx @archzos/tokens export --format dart
npx @archzos/tokens export --format swift
npx @archzos/tokens export --format kotlin

# Export all formats at once
npx @archzos/tokens export --all

# Validate token parity across platforms
npx @archzos/tokens validate

Supported Platforms

| Platform | Format | Usage | |----------|--------|-------| | Web (CSS) | CSS Variables | var(--az-color-blue500) | | Flutter | Dart Constants | AzTokens.Colors.blue500 | | iOS/WatchOS/tvOS | Swift | AzTokens.Colors.blue500 | | Android/WearOS | Kotlin | AzTokens.Colors.blue500 | | React Native | JSON/JS | tokens.colors.blue500 | | Web (SCSS) | SCSS Variables | $az-color-blue500 | | Android (XML) | Resources | @color/az_blue500 |

Token Categories

Colors (29 tokens)

• Backgrounds: bg, bgSecondary, bgTertiary, bgDark
• Text: text, textSecondary, textTertiary, textInverse
• Borders: border, borderLight, borderDark
• Semantic: blue500, green500, red500, yellow500
• Grays: gray50 through gray900

Typography (18 tokens)

• Font families: fontFamily, fontFamilyMono
• Font sizes: xs (12px) through 9xl (128px)
• Font weights: thin (100) through black (900)
• Line heights: tight (1.2), normal (1.5), relaxed (1.6)

Spacing (13 tokens)

• Scale: 0 (0px) through 96 (384px)
• Common: xs, sm, md, lg, xl, 2xl, 3xl

Border Radius (7 tokens)

• Scale: none (0) through full (9999px)
• Common: sm, md, lg, xl, 2xl, 3xl

Shadows (5 tokens)

• Elevations: none, sm, md, lg, xl

Z-Index (6 tokens)

• Layers: base (0) through tooltip (1000)

API

TokenCompiler

import { TokenCompiler } from '@archzos/tokens';

const compiler = new TokenCompiler();

// Export tokens
await compiler.export('css');
await compiler.exportAll();

// Validate token parity
const isValid = await compiler.validate();

Export Functions

import {
  toCSSVariables,
  toDart,
  toSwift,
  toKotlin,
  toJSON,
  toSCSS,
  toAndroidXML
} from '@archzos/tokens';

// Convert tokens to specific format
const cssVars = toCSSVariables(tokens);
const dartCode = toDart(tokens);
const swiftCode = toSwift(tokens);

Examples

React Component

import { colors, spacing, radius, typography } from '@archzos/tokens';

function Button({ children }) {
  return (
    <button
      style={{
        backgroundColor: colors.blue500,
        color: colors.textInverse,
        padding: `${spacing.sm}px ${spacing.md}px`,
        borderRadius: radius.md,
        fontSize: typography.md,
        fontWeight: typography.semibold,
      }}
    >
      {children}
    </button>
  );
}

CSS-in-JS

import { colors, spacing } from '@archzos/tokens';

const styles = {
  container: {
    backgroundColor: colors.bg,
    padding: spacing.lg,
    border: `1px solid ${colors.border}`,
  },
};

Styled Components

import styled from 'styled-components';
import { colors, spacing, radius } from '@archzos/tokens';

const Card = styled.div`
  background: ${colors.bg};
  padding: ${spacing.lg}px;
  border-radius: ${radius.lg}px;
  box-shadow: ${shadows.md};
`;

Platform Integration

Flutter Setup

# Export tokens to Dart
npx @archzos/tokens export --format dart --output lib/tokens.dart

import 'package:your_app/tokens.dart';

Container(
  color: AzTokens.Colors.blue500,
  padding: EdgeInsets.all(AzTokens.Spacing.md),
)

Swift/iOS Setup

# Export tokens to Swift
npx @archzos/tokens export --format swift --output Sources/Tokens.swift

import SwiftUI

Text("Hello")
  .foregroundColor(AzTokens.Colors.blue500)
  .padding(AzTokens.Spacing.md)

Android/Kotlin Setup

# Export tokens to Kotlin
npx @archzos/tokens export --format kotlin --output src/main/java/Tokens.kt

Text(
  text = "Hello",
  color = AzTokens.Colors.blue500,
  modifier = Modifier.padding(AzTokens.Spacing.md.dp)
)

Configuration

Create .archzosrc.json in your project root:

{
  "tokens": {
    "output": "./src/design-tokens",
    "formats": ["css", "json"],
    "customPrefix": "my-app"
  }
}

Contributing

Tokens are the foundation of the Archzos design system. Changes to token values affect all platforms and should be made carefully.

1. Edit tokens in src/tokens.ts
2. Run pnpm build to compile
3. Run pnpm export:all to generate all formats
4. Run pnpm validate to ensure parity
5. Submit PR with rationale for changes

License

MIT © archzos