Skip to content

pepabo/inhouse-tokens

Repository files navigation

Inhouse Tokens

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

Getting Started

  1. 新しいデザイントークンを作成します。tokens/pepperディレクトリを複製・編集すると楽です。
  2. Color、Size、Typographyなどのトークンの値をブランド独自の値に編集します。
  3. config/pepper.jsをコピーして新しいデザイントークンの設定ファイルを作成します。
  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";
  1. 各サービスのアプリケーションなどの使う側で、@pepabo-inhouse/flavorとしてinstallします。
"dependencies": {
    "@pepabo-inhouse/flavor": "npm:{custom-flavor}@x.y.z",
}

Figma (Variables)

WIP

iOS

WIP

Android

WIP