Installation

色・スペーシング・タイポグラフィなどのデザイン値を、どの環境でも同じように使えるトークンパッケージ。

Install

@7onic-ui/tokens

Terminal

# npm
npm install @7onic-ui/tokens

# yarn
yarn add @7onic-ui/tokens

# pnpm
pnpm add @7onic-ui/tokens

Import

CSS

CSS変数のみ

your-styles.css

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

個別インポート

@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"> を追加すると、セマンティックカラーが自動的にダークテーマに切り替わります。

Tailwind v4

設定ファイル不要

your-styles.css

@import "tailwindcss";

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

個別インポート

@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 がないとbg-primary や duration-fast 等のクラスが使えません。

Tailwind v3

CSS + プリセット

your-styles.css

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

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

個別インポート

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

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

tailwind.config.js

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

プリセットはtheme.extend を使用するため、既存のTailwindクラスはそのまま維持されます。 ※ v3でもセマンティックカラーの opacity modifier（bg-primary/50 等）に対応しています。RGB チャンネル変数を使用してアルファ値を適用します。

JavaScript / TypeScript

静的値

your-file.ts

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

ESM（.mjs）と CJS（.js）の両方に対応。TypeScript型定義も同梱されています。

Usage Reference

使用可能なトークンと形式を確認してください。

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 ※

セマンティック vs プリミティブ: プリミティブ（--spacing-4等）は固定値。セマンティック（--color-primary等）はlight/darkテーマで切り替わります。

JS export: プリミティブ値（静的）のみ。CSS only ※ はテーマで値が変わるため JS では使用不可。CSS変数を使用してください。TypeScript型定義（18種）同梱。

Package Contents

用途に応じて必要なファイルをインポートします。すべてnpx sync-tokensで自動生成されます。

@7onic-ui/tokens

9配布ファイル + CLI + ソース

{}

CSS Variables

css/all.css推奨

css/variables.css全プリミティブ変数

css/themes/light.cssライトテーマ

css/themes/dark.cssダークテーマ

Tailwind Presets

tailwind/v4.css推奨

tailwind/v3-preset.jsv3 プリセット

tailwind/v4-theme.cssv4 テーマ定義

JavaScript / Types

js/index.jsCJS

js/index.mjsESM

types/index.d.tsTypeScript 型

json/tokens.jsonフラット JSON

CLI / Source

cli/sync.jsnpx sync-tokens

llms.txtAI Integration

figma-tokens.jsonSSOT

唯一の編集対象ファイル

figma-tokens.json を編集 → npx sync-tokens で9ファイルすべてが自動再生成されます。

Token Sync

Figmaでデザインを更新 → CLIひとつで全ファイルに反映

Figma

デザイン編集

JSON

エクスポート

CLI

sync-tokens

Output

9ファイル

Figma

デザインを編集

JSON

トークンをエクスポート

CLI

npx sync-tokens を実行

Output

9ファイルを自動生成

Terminal

$ npx sync-tokens

CLI Options

Option	Description
--dry-run	実際のファイル書き込みなしで変更内容をプレビュー
--force	破壊的変更の確認プロンプトをスキップ
--input <path>	figma-tokens.json のパス（デフォルト: ./figma-tokens.json）
--output <dir>	出力ディレクトリ（デフォルト: ./）

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

既存のvariables.css がある場合、sync-tokens は自動的に変更を検出し、差分を表示します。

Diff表示 — 追加・変更・削除・リネームを色分けで視覚化

確認プロンプト — 破壊的変更（削除・リネーム）がある場合、実行前に確認を要求

後方互換エイリアス — リネーム検出時に css/deprecated.css を自動生成。既存の参照が壊れません。

--dry-run で事前に差分だけ確認、--force で確認プロンプトをスキップできます。

Tokens Studio セットアップ

FigmaコミュニティからTokens Studioプラグインをインストール

リポジトリの figma-tokens.json をプラグインにインポート

GitHub同期を設定するとデザインとコードのトークンを自動同期（オプション）