@pepabo-inhouse/tokens

Inhouse Tokens

Inhouseを使用しているすべてのサービスのデザイントークンをプラットフォームごとに最適な形でビルドします。

Getting Started

1. 新しいデザイントークンを作成します。tokens/pepperディレクトリを複製・編集すると楽です。
2. Color、Size、Typographyなどのトークンの値をブランド独自の値に編集します。
   • 書き方はStyle DictionaryのTokensのドキュメントを参照してください。
3. config/pepper.jsをコピーして新しいデザイントークンの設定ファイルを作成します。
   • プラットフォームごとにビルドの設定を記述します。
   • 書き方はStyle Dictionaryのドキュメントを参照してください。
4. $ npm run buildを実行します。プラットフォームごとに最適化されたデザイントークンが/build/{custom-flavor}に正しくビルドされたか確認してください。

Documentation

Sass

作成・ビルドしたデザイントークンはInhouse Components Webから使用できます。

1. inhouse/flavorに@pepabo-inhouse/tokensをinstallします。

2. installした@pepabo-inhouse/tokensのSassのvariablesを、_tokens.scssにて再エクスポートします。

@forward "@pepabo-inhouse/tokens/build/{custom-flavor}/scss/variables";

3. 各サービスのアプリケーションなどの使う側で、@pepabo-inhouse/flavorとしてinstallします。

"dependencies": {
    "@pepabo-inhouse/flavor": "npm:{custom-flavor}@x.y.z",
}

Figma (Variables)

WIP

iOS

WIP

Android

WIP