@openameba/spindle-tokens

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ライセンスで公開されています。