tokens

Style Dictionary v4 を利用したデザイントークンパッケージです。src/tokens の JSON から CSS 変数と JS/TS モジュールを生成します。

セットアップとビルド

# ワークスペースルートで
pnpm install

# ビルド
pnpm --filter tokens build

# クリーン
pnpm --filter tokens clean

# 変更監視
pnpm --filter tokens watch

トークンの配置

• src/tokens/**/*.json 配下にトークンを追加します。
• core.json は色・スペーシング・角丸などの基本トークンの例です。

出力物

• dist/css/variables.css : :root で宣言された CSS カスタムプロパティ
• dist/js/tokens.js : ESM 形式のトークン定数
• dist/js/tokens.d.ts : TypeScript 型定義
• dist/antd/theme.js : Ant Design v6 の ConfigProvider に渡せるテーマオブジェクト
• dist/antd/theme.d.ts : Ant Design テーマ用の型定義

利用例

@import "tokens/dist/css/variables.css";

.button {
  background: var(--ubie-color-primary);
  padding: var(--ubie-spacing-md);
  border-radius: var(--ubie-radius-md);
}

import tokens from "tokens";

const primary = tokens.color.primary; // "#4F46E5"

import { ConfigProvider } from "antd";
import theme from "tokens/antd";

export function App() {
  return (
    <ConfigProvider theme={theme}>
      {/* ... */}
    </ConfigProvider>
  );
}