Design Tokens Package

This package publishes primitive and semantic design tokens from Figma so product code and Figma Make flows use the same source.

Exposed token collections

• birlapivot/primitives -> Mode 1.tokens.json
• birlapivot/birla -> Birla Pivot.tokens.json
• birlapivot/ubs -> UBS.tokens.json
• birlapivot/mobile -> Mobile (360px - 767px).tokens.json
• birlapivot/desktop -> Desktop (768px - 1024px+).tokens.json
• birlapivot/value -> Value.tokens.json
• birlapivot/manifest -> tokens.manifest.json

Phase-wise plan

Phase 1: Package foundation (done)

• Added package.json with subpath exports for every collection.
• Added tokens.manifest.json for discovery and tooling.
• Added validation script at scripts/validate-tokens.mjs.

Phase 2: Quality gate (done)

• npm run validate verifies token files parse and contain tokens.
• Semantic brand isolation check:
  • UBS.tokens.json must not target _BPglobalColors.
  • Birla Pivot.tokens.json must not target _UBSglobalColors.
• Semantic alias integrity check:
  • Brand semantic files should be fully aliased.
  • Responsive files can keep two direct breakpoint booleans.

Phase 3: Local pre-publish check (ready)

Run:

npm run release:check

This runs validation and npm pack --dry-run so you can inspect exactly what will be published.

Phase 4: First publish (manual)

1. Confirm package name in package.json is birlapivot.
2. Set license to your required license.
3. Authenticate:

npm login

4. Publish:

npm publish --access public

Use --access restricted for private scoped packages.

Phase 5: Ongoing releases

For each token update:

1. Replace token JSON files with latest Figma export.
2. Run npm run validate.
3. Bump version (patch/minor/major).
4. Publish new version.

Usage examples

JavaScript/TypeScript consumers

import ubsSemantic from "birlapivot/ubs";
import primitives from "birlapivot/primitives";

Figma Make / shared token workflows

• Install this npm package inside the project used by your Figma Make flow.
• Read semantic tokens (/ubs, /birla, /mobile, /desktop) in generation/runtime logic.
• Keep primitives internal; do not consume primitive values directly in component styling logic.

Access Token: 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