KARAKURIDESIGN SYSTEM

Installation

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

Install

@karakuri-ui/tokensv0.3.3
Terminal
# npm
npm install @karakuri-ui/tokens

# yarn
yarn add @karakuri-ui/tokens

# pnpm
pnpm add @karakuri-ui/tokens

Import

CSS

CSS変数のみ
your-styles.css
@import '@karakuri-ui/tokens/css/all.css';
個別インポート
@import '@karakuri-ui/tokens/css/variables.css';
@import '@karakuri-ui/tokens/css/themes/light.css';
@import '@karakuri-ui/tokens/css/themes/dark.css';

<html class="dark"> を追加すると、セマンティックカラーが自動的にダークテーマに切り替わります。

Tailwind v4

設定ファイル不要
your-styles.css
@import "tailwindcss";

@import '@karakuri-ui/tokens/tailwind/v4.css';
個別インポート
@import "tailwindcss";

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

v4-theme.css がないとbg-primary や duration-fast 等のクラスが使えません。

Tailwind v3

CSS + プリセット
your-styles.css
@import '@karakuri-ui/tokens/css/all.css';

@tailwind base;
@tailwind components;
@tailwind utilities;
個別インポート
@import '@karakuri-ui/tokens/css/variables.css';
@import '@karakuri-ui/tokens/css/themes/light.css';
@import '@karakuri-ui/tokens/css/themes/dark.css';

@tailwind base;
@tailwind components;
@tailwind utilities;
tailwind.config.js
module.exports = {
  presets: [
    require('@karakuri-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 '@karakuri-ui/tokens'

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

Package Contents

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

@karakuri-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.js
tailwind/v4-theme.css
JS
JavaScript / Types
js/index.jsCJS
js/index.mjsESM
types/index.d.tsTypeScript 型
json/tokens.jsonフラット JSON
CLI
cli/sync.jsnpx sync-tokens
figma-tokens.jsonSSOT

唯一の編集対象ファイル

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