アプリのスタイル設定

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

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

Box および Inline コンポーネントは、カスタムスタイルをサポートします。
その他のコンポーネントには、場合によっては調整できる事前設定されたスタイルがあります。

カスタムスタイル

ボックスとインラインコンポーネントは、カスタムスタイルをサポートします。Box と Inline は、HTML の div と span と同様に、スタイルを設定できるコンテナです。スタイルを設定するには、css プロパティを使用します。CSS の構文を使用しますが、Vanilla CSS とは若干異なります。

サンプルを読み込み中...

<Box
  css={{
    padding: 'xxlarge',
    color: 'secondary',
    backgroundColor: 'container',
    borderRadius: 'small',
  }}
>
  This is a box.
</Box>

Vanilla CSS とは異なり、任意のフォントフェイスとスタイルを選択することはできません。font と fontWeight プロパティを使用してください。詳細については、タイポグラフィーをご覧ください。

サンプルを読み込み中...

<Inline css={{font: 'body', color: 'primary', fontWeight: 'semibold'}}>
  This text is emphasized
</Inline>

レイアウトも Vanilla CSS の場合とは異なる動作をします。Stripe Apps では、Stripe が内部で使用するものと同じレイアウトシステムが使用されます。詳細については、レイアウトをご覧ください。

<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 を通じて公開されています。そのため、エディターにドロップダウンが表示され、使用可能な値からオートコンプリートすることができます。

カラー

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

背景

ボックスまたはインラインコンポーネントの背景の色を設定するには、CSS の backgroundColor プロパティを使用します。

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

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

Example	Token	Usage
	`surface`	Used for the background of apps
	`container`	Used for cards and sections within an app

境界線

ボックスまたはインラインコンポーネントに境界線を追加するには、CSS の keyline プロパティを使用します。

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

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

Example	Token	Usage
	`neutral`	The default color for all borders and dividers
	`critical`	Used for content which is critically urgent to the user

テキストとアイコン

ボックスまたはインラインコンポーネントのすべてのテキストまたはアイコンの色を設定するには、CSS の color プロパティを使用します。

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

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

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

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

Example	Token	Usage
	`primary`	The default color for text and icons
	`secondary`	Used to for text and icons which are less prominent
	`disabled`	Used for elements which are disabled
	`info`	Used for content that is neutral and informational
	`success`	Used for content which indicates the success of some action
	`attention`	Used for content which is should grab the user’s attention
	`critical`	Used for content which is critically urgent to the user. Should be used sparingly.

タイポグラフィー

ボックスまたはインラインコンポーネントのテキストのスタイルを変更するには、カスタムの font プロパティを使用します。

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

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

Token	Usage	Example
heading	Used for labeling a section of your app	The quick brown fox jumps over the lazy dog.
subheading	Used for labeling content within a section of your app	The quick brown fox jumps over the lazy dog.
body	Primary body text of the app	The quick brown fox jumps over the lazy dog.
caption	Used for text that should be less prominent than body text	The quick brown fox jumps over the lazy dog.

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

ボックスコンポーネントでオーバーフローテキストの処理方法を変更するには、textOverflow、overflow、whiteSpace、overflowWrap の各プロパティを使用します。

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

CSS	Usage	Example
{textOverflow: 'ellipsis', overflow: 'hidden', overflowWrap: 'normal'}	Used for adding an ellipsis (...) to text that overflows the available space	SupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious
{overflowWrap: 'break-word'}	Used for breaking up long words	SupercalifragilisticexpialidociousSupercalifragilisticexpialidocious
{whiteSpace: 'nowrap'}	Used to prevent lines from wrapping	This text is too long for the container.

オーバーフローやテキストの折り返しのシナリオの詳細については、Wrapping and Breaking Text (英語) をご覧ください。

テキストの変換

textTransform プロパティを使用して、ボックスまたはインラインコンポーネントのテキストを変換できます。

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

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

Token	Usage	Before	After
capitalize	Used to convert the first letter of each word to uppercase	Lorem ipsum dolor sit amet	Lorem ipsum dolor sit amet
uppercase	Used to convert all letters to uppercase	Lorem ipsum dolor sit amet	Lorem ipsum dolor sit amet
lowercase	Used to convert all letters to lowercase	Lorem ipsum dolor sit amet	Lorem ipsum dolor sit amet
none	Used to prevent the case of letters from being changed	loREM iPSUm DOLor SIt AMet	loREM iPSUm DOLor SIt AMet

詳細なリストについては、text-transform (英語)をご覧ください。

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

textAlign プロパティを使用して、ボックスコンポーネントのテキストのアラインメントを変更できます。

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

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

Token	Usage	Example
left	Used to algin text to the left	This text is left aligned
right	Used to align text to the right	This text is right aligned
start	Used align text to the start direction	This text is start aligned
end	Used to align text to the end direction	This text is end aligned
center	Used to center text	This text is centered
justify	Used to justify text	This is some text that is justified

レイアウト

Stripe Apps のレイアウトスタイリング API では、デザイントークンを利用し、Vanilla CSS から多くの点が改善されたスタイルを作成できます。これらのトークンをボックスコンポーネントで使用して、子のレイアウトを管理します。リストなどの他のコンテナでは、レイアウトは自動的に処理されます。

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

水平スタック

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

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

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

<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 つの要素の幅を分数とし、その他の要素を引き延ばして要素を横方向に並べるには、以下のようにします。

<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>

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

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

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

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

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

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

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

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

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

<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>

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

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

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

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

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

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

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

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

垂直スタック

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

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

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

<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>

階層化スタック

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

<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`	スペーシングを参照
`overflowX \| overflowY`	`'visible' \| 'hidden' \| 'scroll' \| 'auto'`
`stack`	`'x' \| 'y' \| 'z'`
`wrap`	`'wrap'`

スペーシング

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

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

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

サイズ指定

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

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

自動スタイリング

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

サンプルを読み込み中...

<Box
  css={{
    backgroundColor: 'surface',
    padding: 'medium',
    borderRadius: 'medium',
  }}
>
  <ChipList>
    <Chip
      label="Currency"
      value="USD"
      onDropdown={() => {
        console.log('Dropdown function triggered');
      }}
      onClose={() => {
        console.log('Close function triggered');
      }}
    />
    <Chip
      label="Status"
      value="Succeeded"
      onDropdown={() => {
        console.log('Dropdown function triggered');
      }}
      onClose={() => {
        console.log('Close function triggered');
      }}
    />
    <Chip
      label="Amount"
      onAddSuggestion={() => {
        console.log('Add Amount suggestion');
      }}
    />
    <Chip
      label="Date"
      onAddSuggestion={() => {
        console.log('Add Date suggestion');
      }}
    />
  </ChipList>
</Box>

いくつかのプリセット

ボタンなどの一部のコンポーネントには、プロパティを使用して選択できるスタイルがいくつかあります。詳細については、各コンポーネントのドキュメントをご覧ください。

サンプルを読み込み中...

<Button type="primary">Primary</Button>
<Button>Secondary</Button>
<Button type="destructive">Destructive</Button>

制限付きの CSS

一部のコンポーネントは、特定の CSS プロパティをサポートしています。たとえば、アイコンは、fill プロパティを使用して色をサポートします。詳細については、各コンポーネントのドキュメントをご覧ください。

サンプルを読み込み中...

<Icon name="cancelCircle" css={{fill: 'critical'}} />

アプリのスタイル設定

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

カスタムスタイル

カラー

背景

境界線

テキストとアイコン

タイポグラフィー

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

テキストの変換

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

レイアウト

水平スタック

垂直スタック

階層化スタック

レイアウトのプロパティ

スペーシング

サイズ指定

分数によるサイズ指定

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

事前設定されたスタイル

自動スタイリング

いくつかのプリセット

制限付きの CSS

参照情報