@openameba/spindle-tokens
v0.13.0
Published
Spindle design tokens.
Downloads
3,900
Keywords
Readme
Spindle Tokens (In development)
Spindle (Ameba Design System) Design Tokens
Spindle TokensはAmebaのデザインシステム「Spindle」で定義されたデザイントークンを管理します。デザイントークンはStyle Dictionary準拠のJSON形式で管理され、各アプリケーション向けの形式に変換されます。
配布されるファイル
JSON
デザイントークンのデータをJSON(オブジェクト)形式で表現した形式です。
dist/json/spindle-tokens.json
{
"Color": {
"Primitive": {
"Black": {
"100": {
"value": "rgba(0, 0, 0, 1)",
"filePath": "tokens/color/primitive.json",
"isSource": true,
"original": {
"value": "rgba(0, 0, 0, 1)"
},
"name": "100",
"attributes": {},
"path": [
"Color",
"Primitive",
"Black",
"100"
]
}
}
}
}
}
JSON Flat
デザイントークンのデータをJSON(配列)形式で表現した形式です。データのソートやフィルタリングする際に役立つかもしれません。以下の点がJSON形式と異なっていますので、注意して利用してください。
- プロパティ
value
はstring
に統一されます - プロパティ
original.value
は元データ型を保持します path
を.
で連結したpathString
プロパティが付与されます
dist/json/spindle-tokens-flat.json
[
{
"value": "rgba(0, 0, 0, 1)",
"filePath": "tokens/color/primitive.json",
"isSource": true,
"original": {
"value": "rgba(0, 0, 0, 1)"
},
"name": "100",
"attributes": {},
"path": [
"Color",
"Primitive",
"Black",
"100"
],
"pathString": "Color.Primitive.Black.100"
}
]
開発方法
# Figmaで定義されたデザイントークンをJSON形式のファイルに変換し、保存します
FIGMA_TOKEN=*** FIGMA_COLOR_PRIMITIVE_FILE_ID=*** FIGMA_COLOR_THEME_FILE_ID=*** FIGMA_COLOR_THEME_DARK_FILE_ID=*** FIGMA_DROP_SHADOW_FILE_ID=*** yarn export
# JSONファイルを元に各プラットフォームで利用する形式に変換します
yarn build
ライセンス
Spindle TokensはMITライセンスで公開されています。