# アプリのスタイル設定

アプリの UI コンポーネントをスタイル設定する方法をご紹介します。

Stripe が提供するデザイントークンを使用して Stripe App のスタイルを設定できます。これにより、デザインをダッシュボードと視覚的に一致させ、一貫性を提供し、高品質な水準を維持することができます。

- `Box` および `Inline` コンポーネントは、[カスタムスタイル](https://docs.stripe.com/stripe-apps/style.md#custom-styles)をサポートします。
- その他のコンポーネントには、場合によっては調整できる[事前設定されたスタイル](https://docs.stripe.com/stripe-apps/style.md#preset-styles)があります。

## カスタムスタイル

[ボックス](https://docs.stripe.com/stripe-apps/components/box.md)と[インライン](https://docs.stripe.com/stripe-apps/components/inline.md)コンポーネントは、カスタムスタイルをサポートします。`Box` と `Inline` は、HTML の `div` と `span` と同様に、スタイルを設定できるコンテナです。スタイルを設定するには、`css` プロパティを使用します。CSS の構文を使用しますが、Vanilla CSS とは若干異なります。

通常の CSS とは異なり、任意のフォントフェイスやスタイルは選択できません。`font` プロパティと `fontWeight` プロパティを使用します。詳細については、[Typography](https://docs.stripe.com/stripe-apps/style.md#typography) をご覧ください。

レイアウトも Vanilla CSS の場合とは異なる動作をします。Stripe Apps では、Stripe が内部で使用するものと同じレイアウトシステムが使用されます。詳細については、[レイアウト](https://docs.stripe.com/stripe-apps/style.md#layout)をご覧ください。

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'medium',
  }}
>
  <Box css={{width: '1/4', padding: 'medium', keyline: 'neutral'}} />
  <Box css={{width: '3/4', padding: 'medium', keyline: 'neutral'}} />
</Box>
```

スタイリングトークンはすべて TypeScript を通じて公開されています。そのため、エディターにドロップダウンが表示され、使用可能な値からオートコンプリートすることができます。

## カラー

下記のいずれかの値を使用して、カスタムスタイルで色を設定します。

### 背景

[ボックス](https://docs.stripe.com/stripe-apps/components/box.md)または[インライン](https://docs.stripe.com/stripe-apps/components/inline.md)コンポーネントの背景の色を設定するには、CSS の `backgroundColor` プロパティを使用します。

```jsx
<Box css={{ backgroundColor: 'container' }}>
  Box with a darker background.
</Box>
```

`backgroundColor` の値として以下のトークンを使用します。

### 境界線

[ボックス](https://docs.stripe.com/stripe-apps/components/box.md)または[インライン](https://docs.stripe.com/stripe-apps/components/inline.md)コンポーネントに境界線を追加するには、CSS の `keyline` プロパティを使用します。

```jsx
<Box css={{ keyline: 'neutral' }}>
  Box with a neutral border.
</Box>
```

`keyline` の値として以下のトークンを使用します。

### テキストとアイコン

[ボックス](https://docs.stripe.com/stripe-apps/components/box.md)または[インライン](https://docs.stripe.com/stripe-apps/components/inline.md)コンポーネントのすべてのテキストまたはアイコンの色を設定するには、CSS の `color` プロパティを使用します。

```jsx
<Box css={{ color: 'success' }}>
  Box with green text.
</Box>
```

コンテナのその他の子と対照的なアイコンの場合は、`fill` を使用します。`fill` を使用しない場合、アイコンは周囲のテキストと同じになります。

```jsx
<Box css={{ color: 'primary' }}>
  <Icon css={{ fill: 'success' }}/>
  Box with normal text and a green icon.
</Box>
```

`color` と `fill` の値として以下のトークンを使用します。

## タイポグラフィー

[ボックス](https://docs.stripe.com/stripe-apps/components/box.md)または[インライン](https://docs.stripe.com/stripe-apps/components/inline.md)コンポーネントのテキストのスタイルを変更するには、カスタムの `font` プロパティを使用します。

```jsx
<Inline css={{font: 'heading'}}>Heading</Inline>
```

以下のスタイルを使用できます。

### テキストのオーバーフローと折り返し

[ボックス](https://docs.stripe.com/stripe-apps/components/box.md)コンポーネントでオーバーフローテキストの処理方法を変更するには、`textOverflow`、`overflow`、`whiteSpace`、`overflowWrap` の各プロパティを使用します。

```jsx
<Box css={{textOverflow: 'ellipsis', overflow: 'hidden', overflowWrap: 'normal'}}>
  Box where long text is cut off with an ellipsis
</Box>
```

オーバーフローやテキストの折り返しのシナリオの詳細については、[Wrapping and Breaking Text (英語)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text) をご覧ください。

### テキストの変換

`textTransform` プロパティを使用して、[ボックス](https://docs.stripe.com/stripe-apps/components/box.md)または[インライン](https://docs.stripe.com/stripe-apps/components/inline.md)コンポーネントのテキストを変換できます。

```jsx
<Box css={{textTransform: 'uppercase'}}>
  Box where all text appears uppercase
</Box>
```

`textTransform` プロパティーに使用できる一般的な値の一部をご紹介します。

詳細なリストについては、[text-transform (英語)](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)をご覧ください。

### テキストのアラインメント

`textAlign` プロパティを使用して、[ボックス](https://docs.stripe.com/stripe-apps/components/box.md)コンポーネントのテキストのアラインメントを変更できます。

```jsx
<Box css={{textAlign: 'center'}}>
  Box where text is centered
</Box>
```

`textAlign` には以下のトークン値を使用します。

## レイアウト

Stripe Apps のレイアウトスタイリング API では、デザイントークンを利用し、Vanilla CSS から多くの点が改善されたスタイルを作成できます。これらのトークンを[ボックス](https://docs.stripe.com/stripe-apps/components/box.md)コンポーネントで使用して、子のレイアウトを管理します。[リスト](https://docs.stripe.com/stripe-apps/components/list.md)などの他のコンテナでは、レイアウトは自動的に処理されます。

レイアウトは「スタック」として概念化されています。

### 水平スタック

要素を横方向に並べて幅を一致させるには、以下のようにします。

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'medium',
    alignX: 'stretch', // This is the default and can be omitted
  }}
>
```

分数の幅で要素を横方向に並べるには、以下のようにします。

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'medium',
  }}
>
  <Box css={{width: '1/4', padding: 'medium', keyline: 'neutral'}} />
  <Box css={{width: '3/4', padding: 'medium', keyline: 'neutral'}} />
</Box>
```

1 つの要素の幅を分数とし、その他の要素を引き延ばして要素を横方向に並べるには、以下のようにします。

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'medium',
  }}
>
  <Box css={{padding: 'medium', keyline: 'neutral'}} />
  <Box css={{width: '1/4', padding: 'medium', keyline: 'neutral'}} />
  <Box css={{padding: 'medium', keyline: 'neutral'}} />
</Box>
```

要素を先頭まで位置合わせして、ギャップを設定するには、以下のようにします。

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'medium',
    alignX: 'start',
  }}
>
```

要素を分散させるには、以下のようにします。

```jsx
<Box
  css={{
    stack: 'x',
    distribute: 'space-between',
  }}
>
```

要素を最後まで位置合わせして、ギャップを設定するには、以下のようにします。

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'medium',
    alignX: 'end',
  }}
>
```

要素を下部まで縦方向に位置合わせするには、以下のようにします。

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'medium',
    alignX: 'start',
    alignY: 'bottom',
  }}
>
```

要素の間に分割バーを含めるには、以下のようにします。

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'small',
    alignX: 'start',
  }}
>
  <Box css={{padding: 'medium', keyline: 'neutral'}} />
  <Divider />
  <Box css={{padding: 'medium', keyline: 'neutral'}} />
  <Divider />
  <Box css={{padding: 'medium', keyline: 'neutral'}} />
</Box>
```

アイテムを複数の行に折り返すには、以下のようにします。

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'medium',
    wrap: 'wrap',
    alignX: 'start',
  }}
>
```

横方向と縦方向で異なるギャップを設定するには、以下のようにします。

```jsx
<Box
  css={{
    stack: 'x',
    gapX: 'small',
    gapY: 'large',
    wrap: 'wrap',
    alignX: 'start',
  }}
>
```

要素を折り返しながら横方向で中央揃えにするには、以下のようにします。

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'medium',
    wrap: 'wrap',
    alignX: 'center',
  }}
>
```

要素を折り返しながら縦方向で中央揃えにするには、以下のようにします。

```jsx
<Box
  css={{
    stack: 'x',
    gap: 'medium',
    wrap: 'wrap',
    alignX: 'start',
    alignY: 'center',
  }}
>
```

### 垂直スタック

要素を縦方向に並べて幅を一致させるには、以下のようにします。

```jsx
<Box
  css={{
    stack: 'y',
    gap: 'medium',
  }}
>
```

要素を縦方向に並べて横方向で中央揃えにするには、以下のようにします。

```jsx
<Box
  css={{
    stack: 'y',
    gap: 'medium',
    alignX: 'center',
  }}
>
  <Box css={{width: '1/4', padding: 'medium', keyline: 'neutral'}} />
  <Box css={{width: '2/3', padding: 'medium', keyline: 'neutral'}} />
  <Box css={{width: '1/3', padding: 'medium', keyline: 'neutral'}} />
</Box>
```

### 階層化スタック

要素を互いの上に表示するには、以下のようにします。

```jsx
<Box
  css={{
    stack: 'z',
    alignX: 'center',
    alignY: 'center',
  }}
>
  <Box css={{padding: 'xxlarge', keyline: 'neutral'}} />
  <Box css={{padding: 'large', keyline: 'neutral'}} />
  <Box css={{padding: 'small', keyline: 'neutral'}} />
</Box>
```

### レイアウトのプロパティ

| プロパティ | 値 |
| --- | --- |
| `alignX` | `'start' | 'center' | 'end' | 'stretch'` |
| `alignY` | `'top' | 'center' | 'baseline' | 'bottom' | 'stretch'` |
| `distribute` | `'space-between' | 'packed'` |
| `gap` | [スペーシング](https://docs.stripe.com/stripe-apps/style.md#spacing)を参照 |
| `overflowX | overflowY` | `'visible' | 'hidden' | 'scroll' | 'auto'` |
| `stack` | `'x' | 'y' | 'z'` |
| `wrap` | `'wrap'` |

## スペーシング

下記の値を使用して、マージン、パディング、レイアウトの間隔を指定できます。

```jsx
<Box css={{margin: 'small'}} />
```

| トークン | 値 |
| --- | --- |
| `0` | 0px |
| `xxsmall` | 2px |
| `xsmall` | 4px |
| `small` | 8px |
| `medium` | 16px |
| `large` | 24px |
| `xlarge` | 32px |
| `xxlarge` | 48px |

## サイズ指定

分数またはコンテンツベースのサイズ指定トークンを使用して、幅と高さを指定できます。

```jsx
<Box css={{width: '1/2'}} />
```

### 分数によるサイズ指定

使用できる分数には、1/2、1/3、1/4、1/5、1/6、1/12 があります。`fill` トークンを使用すると、コンポーネントをコンテナーのサイズに合わせて調整できます。

| トークン | 値 |
| --- | --- |
| `0` | 0px |
| `1/2` | 50% |
| `1/3`、`2/3` | 33.333333%、66.666667% |
| `1/4`、`2/4`、`3/4` | 25%、50%、75% |
| `1/5`、`2/5`、`3/5`、`4/5` | 20%、40%、60%、80% |
| `1/6`、`2/6`、`3/6`、`4/6`、`5/6` | 16.666667%、33.333333%、50%、66.666667%、83.333333% |
| `1/12`、`2/12`、`3/12`、`4/12`、`5/12`、`6/12`、`7/12`、`8/12`、`9/12`、`10/12`、`11/12` | 8.333333%、16.666667%、25%、33.333333%、41.666667%、50%、58.333333%、66.666667%、75%、83.333333%、91.666667% |
| `fill` | 100% |

### コンテンツベースのサイズ指定

中のコンテンツに合わせて `Box` のサイズを指定できます。

| トークン | 使用量 |
| --- | --- |
| `min` | コンポーネント内のコンテンツは、最も長いコンテンツと同程度になるように、可能な限り折り返されます。 |
| `max` | コンテンツの可能な最大幅を表します。テキストに適用すると、テキストはコンテナーの境界の外側にはみ出しても折り返されません。 |
| `fit` | コンテンツの最大サイズまで、利用可能なスペースが埋められます。 |

## 事前設定されたスタイル

`Box`と `Inline` 以外のコンポーネントには、事前設定されたスタイルがあり、一貫性を維持するために利用できます。特定の方法で事前設定を管理または上書きすることができる場合があります。

### 自動スタイリング

一部のコンポーネントのスタイルは自動的に設定されます。たとえば、 [チップ](https://docs.stripe.com/stripe-apps/components/chip.md)では、実装するコールバックに応じてデザインが自動的に変更されます。これにより、ユーザーは動作を理解できます。混乱を避けるために、これらの詳細を上書きすることはできません。

### いくつかのプリセット

[ボタン](https://docs.stripe.com/stripe-apps/components/button.md)などの一部のコンポーネントには、プロパティを使用して選択できるスタイルがいくつかあります。詳細については、各コンポーネントのドキュメントをご覧ください。

### 制限付きの CSS

一部のコンポーネントは、特定の CSS プロパティをサポートしています。たとえば、[アイコン](https://docs.stripe.com/stripe-apps/components/icon.md)は、`fill` プロパティを使用して色をサポートします。詳細については、各コンポーネントのドキュメントをご覧ください。

## See also

- [拡張 SDK API リファレンス](https://docs.stripe.com/stripe-apps/reference/extensions-sdk-api.md)
- [Stripe Apps UI コンポーネント](https://docs.stripe.com/stripe-apps/components.md)
- [UI を構築する](https://docs.stripe.com/stripe-apps/build-ui.md)