open-index/open-npm huggingface dataset:
npm package: @pepabo-inhouse/components-web
Description: Inhouse UI components for the web
Latest version: 4.0.0

# Inhouse Components Web

## Installation

```bash
$ npm install @pepabo-inhouse/components-web

# or

$ yarn add @pepabo-inhouse/components-web
```

## Usage

### Mixin base (highly recommended)

```scss
@use '@pepabo-inhouse/components-web' as inhouse;

.some-component {
  @include inhouse.button-style;
}
```

### Class base

```scss
@use '@pepabo-inhouse/components-web/inhouse-components-web';

// apply .in-button etc.
```
npm package: @pepabo-inhouse/tokens
Description: Inhouse tokens
Latest version: 2.8.0

# 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