Installation

A token package that makes design values like colors, spacing, and typography consistent across every environment.

Install

@7onic-ui/tokensv0.3.6

Terminal

# npm
npm install @7onic-ui/tokens

# yarn
yarn add @7onic-ui/tokens

# pnpm
pnpm add @7onic-ui/tokens

Import

CSSCSS variables only

your-styles.css

@import '@7onic-ui/tokens/css/all.css';

Individual imports

@import '@7onic-ui/tokens/css/variables.css';
@import '@7onic-ui/tokens/css/themes/light.css';
@import '@7onic-ui/tokens/css/themes/dark.css';

<html class="dark"> enables semantic colors to automatically switch to the dark theme.

Tailwind v4

your-styles.css

@import "tailwindcss";

@import '@7onic-ui/tokens/tailwind/v4.css';

Individual imports

@import "tailwindcss";

@import '@7onic-ui/tokens/css/variables.css';
@import '@7onic-ui/tokens/css/themes/light.css';
@import '@7onic-ui/tokens/css/themes/dark.css';
@import '@7onic-ui/tokens/tailwind/v4-theme.css';

v4-theme.css is required for bg-primary and duration-fast classes to work.

Tailwind v3CSS + preset

your-styles.css

@import '@7onic-ui/tokens/css/all.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

Individual imports

@import '@7onic-ui/tokens/css/variables.css';
@import '@7onic-ui/tokens/css/themes/light.css';
@import '@7onic-ui/tokens/css/themes/dark.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js

module.exports = {
  presets: [
    require('@7onic-ui/tokens/tailwind/v3-preset')
  ],
}

The preset uses theme.extend, so your existing Tailwind classes remain intact. ※ Semantic color opacity modifiers (bg-primary/50, etc.) also work in v3 via RGB channel variables.

JavaScript / TypeScriptStatic values

your-file.ts

import { colors, spacing, typography } from '@7onic-ui/tokens'

Both ESM (.mjs) and CJS (.js) are supported. TypeScript type definitions are included.

Usage Reference

Reference the available tokens and their formats.

Colors

CSS--color-primary

TWbg-primary

JScolors.primary[600]

CSS--color-secondary

TWbg-secondary

JScolors.secondary[600]

CSS--color-success

TWbg-success

JScolors.green[600]

CSS--color-warning

TWbg-warning

JScolors.yellow[500]

CSS--color-error

TWbg-error

JScolors.red[600]

CSS--color-background-muted

TWbg-background-muted

JSCSS only ※

CSS--color-text

TWtext-foreground

JSCSS only ※

CSS--color-text-muted

TWtext-text-muted

JSCSS only ※

CSS--color-primary-text

TWtext-primary-foreground

JSCSS only ※

CSS--color-border

TWborder-border

JSCSS only ※

CSS Variable	Tailwind	JS / TS
--color-primary	bg-primary	colors.primary[600]
--color-secondary	bg-secondary	colors.secondary[600]
--color-success	bg-success	colors.green[600]
--color-warning	bg-warning	colors.yellow[500]
--color-error	bg-error	colors.red[600]
--color-background-muted	bg-background-muted	CSS only ※
--color-text	text-foreground	CSS only ※
--color-text-muted	text-text-muted	CSS only ※
--color-primary-text	text-primary-foreground	CSS only ※
--color-border	border-border	CSS only ※

Typography

CSS--font-size-2xs (11px)

TWtext-2xs

JSfontSize["2xs"]

CSS--font-size-xs (12px)

TWtext-xs

JSfontSize.xs

CSS--font-size-sm (13px)

TWtext-sm

JSfontSize.sm

CSS--font-size-md (14px)

TWtext-md

JSfontSize.md

CSS--font-size-base (16px)

TWtext-base

JSfontSize.base

CSS--font-size-lg (18px)

TWtext-lg

JSfontSize.lg

CSS--font-size-xl (20px)

TWtext-xl

JSfontSize.xl

CSS--font-size-2xl (24px)

TWtext-2xl

JSfontSize["2xl"]

CSS Variable	Tailwind	JS / TS
--font-size-2xs (11px)	text-2xs	fontSize["2xs"]
--font-size-xs (12px)	text-xs	fontSize.xs
--font-size-sm (13px)	text-sm	fontSize.sm
--font-size-md (14px)	text-md	fontSize.md
--font-size-base (16px)	text-base	fontSize.base
--font-size-lg (18px)	text-lg	fontSize.lg
--font-size-xl (20px)	text-xl	fontSize.xl
--font-size-2xl (24px)	text-2xl	fontSize["2xl"]

Spacing

CSS--spacing-1 (4px)

TWp-1 m-1 gap-1

JSspacing[1]

CSS--spacing-2 (8px)

TWp-2 m-2 gap-2

JSspacing[2]

CSS--spacing-4 (16px)

TWp-4 m-4 gap-4

JSspacing[4]

CSS--spacing-6 (24px)

TWp-6 m-6 gap-6

JSspacing[6]

CSS--spacing-8 (32px)

TWp-8 m-8 gap-8

JSspacing[8]

CSS Variable	Tailwind	JS / TS
--spacing-1 (4px)	p-1 m-1 gap-1	spacing[1]
--spacing-2 (8px)	p-2 m-2 gap-2	spacing[2]
--spacing-4 (16px)	p-4 m-4 gap-4	spacing[4]
--spacing-6 (24px)	p-6 m-6 gap-6	spacing[6]
--spacing-8 (32px)	p-8 m-8 gap-8	spacing[8]

Duration

CSS--duration-fast (100ms)

TWduration-fast

JSduration.fast

CSS--duration-micro (150ms)

TWduration-micro

JSduration.micro

CSS--duration-normal (200ms)

TWduration-normal

JSduration.normal

CSS--duration-slow (300ms)

TWduration-slow

JSduration.slow

CSS--duration-slower (400ms)

TWduration-slower

JSduration.slower

CSS Variable	Tailwind	JS / TS
--duration-fast (100ms)	duration-fast	duration.fast
--duration-micro (150ms)	duration-micro	duration.micro
--duration-normal (200ms)	duration-normal	duration.normal
--duration-slow (300ms)	duration-slow	duration.slow
--duration-slower (400ms)	duration-slower	duration.slower

Radius / Shadow / Z-Index

CSS--radius-{sm|md|lg|...}

TWrounded-{sm|md|lg|...}

JSborderRadius.*

CSS--shadow-{xs|sm|md|lg|xl}

TWshadow-{xs|sm|md|lg|xl}

JSshadow.*

CSS--z-index-{modal|tooltip|...}

TWz-{modal|tooltip|...}

JSzIndex.*

CSS Variable	Tailwind	JS / TS
--radius-{sm\|md\|lg\|...}	rounded-{sm\|md\|lg\|...}	borderRadius.*
--shadow-{xs\|sm\|md\|lg\|xl}	shadow-{xs\|sm\|md\|lg\|xl}	shadow.*
--z-index-{modal\|tooltip\|...}	z-{modal\|tooltip\|...}	zIndex.*

Custom Utilities

CSS--icon-size-{xs|sm|md|lg|xl}

TWicon-{xs|sm|md|lg|xl}

JSiconSize.*

CSS--scale-{50|75|pressed}

TWscale-{50|75|pressed}

JSscale.*

CSS--opacity-{0~100}

TWopacity-{0~100}

JSopacity.*

CSS--easing-{ease|ease-in|...}

TWease-{in|out|in-out}

JSeasing.*

CSS--color-focus-ring

TWfocus-ring

JSCSS only ※

CSS@keyframes {name}

TWanimate-{name}

JSCSS only ※

CSS Variable	Tailwind	JS / TS
--icon-size-{xs\|sm\|md\|lg\|xl}	icon-{xs\|sm\|md\|lg\|xl}	iconSize.*
--scale-{50\|75\|pressed}	scale-{50\|75\|pressed}	scale.*
--opacity-{0~100}	opacity-{0~100}	opacity.*
--easing-{ease\|ease-in\|...}	ease-{in\|out\|in-out}	easing.*
--color-focus-ring	focus-ring	CSS only ※
@keyframes {name}	animate-{name}	CSS only ※

Semantic vs Primitive: Primitives (--spacing-4, etc.) are fixed values. Semantics (--color-primary, etc.) switch between light/dark themes.

JS export: Primitive values (static) only. CSS only ※ values change with the theme and cannot be used in JS — use CSS variables instead. TypeScript types (18 kinds) included.

Package Contents

Import the files you need. All are generated by npx sync-tokens automatically.

@7onic-ui/tokens

Distribution files + CLI + AI + source

{}

CSS Variables

css/all.cssRecommended

css/variables.cssAll primitive variables

css/themes/light.cssLight theme

css/themes/dark.cssDark theme

Tailwind Presets

tailwind/v4.cssRecommended

tailwind/v3-preset.jsv3 preset

tailwind/v4-theme.cssv4 theme definition

JavaScript / Types

js/index.jsCJS

js/index.mjsESM

types/index.d.tsTypeScript types

json/tokens.jsonFlat JSON

CLI / AI

cli/sync.jsnpx sync-tokens

llms.txtAI Integration

figma-tokens.jsonSSOT

The only file you need to edit

figma-tokens.json — edit, then run npx sync-tokens to regenerate all files automatically.

Token Sync

Update your design in Figma → propagate to all files with one CLI command

Figma

Edit design

JSON

Export

CLI

sync-tokens

Output

All files

Figma

Edit your design

JSON

Export tokens

CLI

Run npx sync-tokens

Output

All files auto-generated

Terminal

$ npx sync-tokens

CLI Options

Option	Description
--dry-run	Preview changes without writing files
--force	Skip confirmation prompts for breaking changes
--input <path>	Path to figma-tokens.json (default: ./figma-tokens.json)
--output <dir>	Output directory (default: ./)

Generated Files

CSS

variables.css

light.css

dark.css

Tailwind

v3-preset.js

v4-theme.css

JavaScript

index.js

index.mjs

Types + JSON

index.d.ts

tokens.json

Breaking Change Detection

When an existing variables.css is found, sync-tokens automatically detects changes and shows a diff.

Diff view — Visualizes additions, changes, deletions, and renames with color coding

Confirmation prompt — Requires confirmation before applying breaking changes (deletions or renames)

Backward-compatible aliases — Auto-generates css/deprecated.css on rename detection — existing references won't break

--dry-run to preview the diff first, or --force to skip the confirmation prompt.

Tokens Studio Setup

Install the Tokens Studio plugin from the Figma Community

Import figma-tokens.json from your repository into the plugin

Set up GitHub sync to automatically keep design and code tokens in sync (optional)