hub / github.com/digital-go-jp/design-tokens
github.com/digital-go-jp/design-tokens @v2.0.1
Chat with this repo
1 symbols
4 edges
1 files
0 documented · 0%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README
Design Tokens
デジタル庁 デザインシステム（Figma）のデザイントークン。
インストール
$ npm install @digital-go-jp/design-tokens
使用例
CSS
CSS 向けには tokens.css および tokens-simple.css を提供しています。tokens.css は全てのデザイントークンを含みます。tokens-simple.css はデザイントークンのサブセットで、色、フォントおよびエレベーションのみを含みます。
tokens.css の使用例として examples ディレクトリを参照してください。
JavaScript
tailwind-theme-plugin を参照してください。
バージョン対応表
| Figma のバージョン | パッケージのバージョン |
|---|---|
| 2.0.4〜2.14.0 | 2.0.0 |
| 2.0.3 | 1.0.1 |
| 2.0.2 | 0.1.7 |
| 2.0.1 | 0.1.6 |
| 1.4.3 | 0.1.6 |
仕組み
- Tokens Studio for Figma でデザイントークンを管理し、GitHub リポジトリと連携をします。
- Figma 上でデザイントークンに更新があったら、連携先リポジトリの特定のブランチにプッシュをします。
- GitHub の Release をトリガーに GitHub Actions（
.github/workflows/publish.yml）が実行されます。この Actions では Style Dictionary を実行し、デザイントークン（json）を CSS および JavaScript で扱えるようにビルドし npm パッケージとしてリリースをします。
参考
Core symbols most depended-on inside this repo
runcalled by 1
style-dictionary/transform.ts
Shape
Languages
TypeScript100%
Modules by API surface
style-dictionary/transform.ts1 symbols
For agents
$ claude mcp add design-tokens \
-- python -m otcore.mcp_server <graph>