Documentation

This package is published to GitHub Packages under the @sale-sync scope. Add an .npmrc to your project to point the scope at the GitHub Packages registry.

@sale-sync:registry=https://npm.pkg.github.com

Then install the @sale-sync/rocket-sync package into your project.

npm install @sale-sync/rocket-sync

Import the base stylesheet once, typically in your global.css, to pull in the composite (typography, spacing, prose, utility tokens) and component (button, card, modal, etc.) layers.

@import "@sale-sync/rocket-sync/css";

1. Create a tokens/ folder at the root of your project. This is where your token definitions and the generator script will live.

mkdir tokens

2. Inside tokens/, create one file per layer — primitive-tokens.ts, semantic-tokens.ts, composite-tokens.ts, and component-tokens.ts — then combine them in an index.ts. Each layer builds on the one before it: primitives are raw values, semantics map primitives to purpose, composites describe typography/spacing/prose scales, and components hold per-component tokens (button, card, modal, etc).

// tokens/primitive-tokens.ts
export const primitiveTokens = {
  color: {
    primary: { 500: '#3C53FF' /* ... */ },
    gray: { 500: '#6B7280' /* ... */ },
  },
  spacing: { '1': '4px', '2': '8px' /* ... */ },
}

// tokens/semantic-tokens.ts
import { primitiveTokens } from './primitive-tokens'

export const semanticTokens = {
  fg: {
    primary: '#111827',
    secondary: primitiveTokens.color.gray[500],
  },
  brand: primitiveTokens.color.primary[500],
  // ...
}

// tokens/composite-tokens.ts
export const compositeTokens = {
  typography: { /* font sizes, line heights, ... */ },
  spacing: { /* layout spacing scale */ },
}

// tokens/component-tokens.ts
export const componentTokens = {
  button: { /* per-component tokens */ },
  card: { /* per-component tokens */ },
}

// tokens/index.ts
import { componentTokens } from './component-tokens'
import { compositeTokens } from './composite-tokens'
import { primitiveTokens } from './primitive-tokens'
import { semanticTokens } from './semantic-tokens'

const tokens = {
  primitive: primitiveTokens,
  semantic: semanticTokens,
  composite: compositeTokens,
  component: componentTokens,
}

export default tokens

3. Create tokens/generate.ts and pass the four token layers to generateTokens along with an output directory. This writes primitive.css, semantic.css, composite.css, component.css, and an index.css that imports them all.

// tokens/generate.ts
import { generateTokens } from '@sale-sync/rocket-sync'

import tokens from './index'

generateTokens(
  {
    primitive: tokens.primitive,
    semantic: tokens.semantic,
    composite: tokens.composite,
    component: tokens.component,
  },
  './src/styles/designsystem',
)

4. Run the script with tsx any time your tokens change. It generates the CSS variable files into the output directory you specified above.

npx tsx tokens/generate.ts

5. Map the generated index.css into your global.css, importing it before the rocket-sync stylesheet so your generated CSS variables are defined first and the component styles can consume them.

@import "./styles/designsystem/index.css";
@import "@sale-sync/rocket-sync/css";