https://github.com/pepabo/inhouse-tokens
https://github.com/pepabo/inhouse-tokens
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/pepabo/inhouse-tokens
- Owner: pepabo
- Created: 2023-08-18T11:00:22.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-01-17T00:41:32.000Z (over 1 year ago)
- Last Synced: 2025-01-26T18:17:30.936Z (over 1 year ago)
- Language: JavaScript
- Size: 89.8 KB
- Stars: 0
- Watchers: 23
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Inhouse Tokens
Inhouseを使用しているすべてのサービスのデザイントークンをプラットフォームごとに最適な形でビルドします。
## Getting Started
1. 新しいデザイントークンを作成します。`tokens/pepper`ディレクトリを複製・編集すると楽です。
2. Color、Size、Typographyなどのトークンの値をブランド独自の値に編集します。
- 書き方は[Style DictionaryのTokensのドキュメント](https://amzn.github.io/style-dictionary/#/tokens)を参照してください。
3. `config/pepper.js`をコピーして新しいデザイントークンの設定ファイルを作成します。
- プラットフォームごとにビルドの設定を記述します。
- 書き方は[Style Dictionaryのドキュメント](https://amzn.github.io/style-dictionary/)を参照してください。
4. `$ npm run build`を実行します。プラットフォームごとに最適化されたデザイントークンが`/build/{custom-flavor}`に正しくビルドされたか確認してください。
## Documentation
### Sass
作成・ビルドしたデザイントークンは[Inhouse Components Web](https://github.com/pepabo/inhouse-components-web)から使用できます。
1. [inhouse/flavor](https://github.com/pepabo/inhouse-components-web/tree/main/packages/flavor)に`@pepabo-inhouse/tokens`をinstallします。
2. installした`@pepabo-inhouse/tokens`のSassのvariablesを、`_tokens.scss`にて再エクスポートします。
```scss
@forward "@pepabo-inhouse/tokens/build/{custom-flavor}/scss/variables";
```
3. 各サービスのアプリケーションなどの使う側で、`@pepabo-inhouse/flavor`としてinstallします。
```json
"dependencies": {
"@pepabo-inhouse/flavor": "npm:{custom-flavor}@x.y.z",
}
```
### Figma (Variables)
WIP
### iOS
WIP
### Android
WIP