# サポートされてるデザインオプション

埋め込みコンポーネントに使用できるデザインのオプションをご確認ください。

[埋め込みコンポーネントの Figma UI ツールキット](https://www.figma.com/community/file/1438614134095442934)には、それぞれのコンポーネント、共通パターン、サンプルアプリケーションが含まれています。これを使用してウェブサイトで埋め込み UI を視覚化し、設計できます。

[カスタマイズページ](https://docs.stripe.com/connect/customize-connect-embedded-components.md)では、以下の `appearance` プロパティを使用できます。またこのページでは、指定された `appearance` パラメーターに基づいて、サイトで使用するスニペットが自動生成されます。

これらのオプションは、Connect の埋め込みコンポーネントのスタイルを変更できる唯一の方法です。CSS セレクターやその他のメカニズムを使用してスタイルを上書きすることはできません。

> #### 必要なポップアップ
> 
> [ユーザー認証](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components)など、埋め込みコンポーネントの一部の動作は、常にポップアップに表示されます。埋め込みコンポーネントをカスタマイズして、このようなポップアップを表示することはできません。

モバイル SDK の `variables` オブジェクトについては、次のリンクを参照してください。

- [iOS](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/appearance)
- [Android](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance/index.html)

## 変数

`variables` オブジェクトには、アプリケーション内のすべての Connect 埋め込みコンポーネントに適用される以下のオプションプロパティが含まれます。

### よく使用される変数

| 名前 | タイプ | 値のサンプル | **Description** |
| --- | --- | --- | --- |
| `fontFamily` | 文字列 | `sans-serif` | 埋め込みコンポーネント全体で使用される[フォントファミリー](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)の値。埋め込みコンポーネントが、要素が配置されているサイトの `font-family` 値を継承する場合、この設定はその継承を上書きします。 |
| `fontSizeBase` | 文字列 | `16px` | 埋め込みコンポーネントのルートに設定されるベースラインのフォントサイズ。これにより、その他のフォントサイズ変数の値が拡大/縮小されます。ピクセル値のみを使用できます。 |
| `spacingUnit` | 文字列 | `8px` | 他のすべてのスペースの元となるスペースの基本単位。この値を増減することで、レイアウトの間隔を調整します。ピクセル値のみを使用できます。 |
| `borderRadius` | 文字列 | `15px` | 埋め込みコンポーネントで使用される一般的な境界角丸半径。これにより、すべてのコンポーネントのデフォルトの境界の角丸半径が設定されます。ピクセル値のみを使用できます。 |
| `colorPrimary` | 文字列 | `#0074D4` | 埋め込みコンポーネント全体で使用される主要な色。これを、ブランドの主要カラーに設定してください。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `colorBackground` | 文字列 | `#FFFFFF` | オーバーレイ、ツールチップ、ポップオーバーなど、埋め込みコンポーネントの背景の色。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `colorText` | 文字列 | `#444444` | 通常のテキストに使用される色。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `colorDanger` | 文字列 | `#DF1B41` | エラーまたは破壊的なアクションを示すために使用される色。16 進値または RGB/HSL の文字列が受け入れられます。 |

### 使用頻度の少ない変数

| 名前 | タイプ | 値のサンプル | **Description** |
| --- | --- | --- | --- |
| `buttonPrimaryColorBackground` | 文字列 | `#0074D4` | プライマリーボタンの背景として使用される色。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `buttonPrimaryColorBorder` | 文字列 | `#0074D4` | プライマリーボタンに使用される境界の色。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `buttonPrimaryColorText` | 文字列 | `#FFFFFF` | プライマリーボタンに使用されるテキストの色。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `buttonSecondaryColorBackground` | 文字列 | `#EBEEF1` | セカンダリ―ボタンの背景として使用される色。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `buttonSecondaryColorBorder` | 文字列 | `#EBEEF1` | セカンダリ―ボタンの境界として使用される色。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `buttonSecondaryColorText` | 文字列 | `#393B3E` | セカンダリ―ボタンに使用されるテキストの色。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `buttonDangerColorBackground` | 文字列 | `#E61947` | 破壊的なアクションを示す危険ボタンの背景として使用する色。この値は 16 進値または RGB/HSL 文字列を受け付けます。 |
| `buttonDangerColorBorder` | 文字列 | `#E61947` | 破壊的なアクションを示す危険ボタンの境界色。16 進値または RGB/HSL 文字列を受け付けます。 |
| `buttonDangerColorText` | 文字列 | `#FFFFFF` | 破壊的なアクションを示す危険ボタンテキストの色。16 進値または RGB/HSL 文字列を受け付けます。 |
| `buttonPaddingX` | 文字列 | `4px` | ボタンの水平方向のパディング。ピクセル値のみをサポートします。 |
| `buttonPaddingY` | 文字列 | `4px` | ボタンの垂直方向のパディング。ピクセル値のみをサポートします。 |
| `buttonLabelFontSize` | 文字列 | `16px` | ボタンラベルのタイポグラフィーのフォントサイズ。ボタンラベルのタイポグラフィーの変数は、有効な [font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) 値を受け入れます。 |
| `buttonLabelFontWeight` | 文字列 | `400` | ボタンラベルのタイポグラフィーのフォントの太さ。ボタンラベルのタイポグラフィーの変数は、有効な [font weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) の値を受け入れます。 |
| `buttonLabelTextTransform` | 文字列 | `uppercase` | ボタンラベルのタイポグラフィーのテキスト変換。ボタンラベルのタイポグラフィーの変数は、有効な [text transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)値を受け入れます。 |
| `colorSecondaryText` | 文字列 | `#717171` | セカンダリ―テキストに使用される色。16 進値または RGB/RGBA/HSL の文字列が受け入れられます。 |
| `actionPrimaryColorText` | 文字列 | `#0074D4` | プライマリーアクションとリンクに使用される色。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `actionPrimaryTextDecorationLine` | 文字列 | `underline` | プライマリーアクションとリンクのテキストの装飾に使用される線の種類。有効な [text-decoration-line](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line) 値が受け入れられます。 |
| `actionPrimaryTextDecorationColor` | 文字列 | `#0074D4` | プライマリーアクションとリンクのテキスト装飾に使用される色。16 進値または RGB / HSL 文字列が受け入れられます。 |
| `actionPrimaryTextDecorationStyle` | 文字列 | `solid` | プライマリーアクションとリンクのテキスト装飾の種類。有効な [text-decoration-style](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style) 値が受け入れられます。 |
| `actionPrimaryTextDecorationThickness` | 文字列 | `1px` | プライマリーアクションとリンクのテキスト装飾の太さ。有効な [text-decoration-thickness](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness) 値が受け入れられます。 |
| `actionPrimaryTextTransform` | 文字列 | `uppercase` | 主要なアクションとリンクのテキスト変換。有効な [text transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) 値を受け入れます。 |
| `actionSecondaryColorText` | 文字列 | `#444444` | セカンダリ―アクションとリンクに使用される色。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `actionSecondaryTextDecorationLine` | 文字列 | `underline` | セカンダリーアクションとリンクのテキストの装飾に使用される線の種類。有効な [text-decoration-line](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line) 値が受け入れられます。 |
| `actionSecondaryTextDecorationColor` | 文字列 | `#0074D4` | セカンダリーアクションとリンクのテキスト装飾に使用される色。16 進値または RGB / HSL 文字列が受け入れられます。 |
| `actionSecondaryTextDecorationStyle` | 文字列 | `solid` | セカンダリーアクションとリンクのテキスト装飾の種類。有効な [text-decoration-style](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style) 値が受け入れられます。 |
| `actionSecondaryTextDecorationThickness` | 文字列 | `1px` | セカンダリーアクションとリンクのテキスト装飾の太さ。有効な [text-decoration-thickness](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness) 値が受け入れられます。 |
| `actionSecondaryTextTransform` | 文字列 | `uppercase` | 二次的なアクションとリンクのテキスト変換。有効な [text transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) 値を受け入れます。 |
| `badgeNeutralColorBackground` | 文字列 | `#E4ECEC` | ステータスバッジで中立的なステータスまたはステータスの欠如を表すために使用される背景の色。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `badgeNeutralColorText` | 文字列 | `#545969` | ステータスバッジで中立的なステータスまたはステータスの欠如を表すために使用されるテキストの色。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `badgeNeutralColorBorder` | 文字列 | `#CBD5D6` | ステータスバッジで中立的なステータスまたはステータスの欠如を表すために使用される境界の色。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `badgeSuccessColorBackground` | 文字列 | `#CEF6BB` | ステータスバッジで結果が成功であったことを強調するために使用される背景の色。16 進値または RGB/RGBA/HSL の文字列が受け入れられます。 |
| `badgeSuccessColorText` | 文字列 | `#05690D` | ステータスバッジで結果が成功であったことを強調するために使用されるテキストの色。16 進値または RGB/RGBA/HSL の文字列が受け入れられます。 |
| `badgeSuccessColorBorder` | 文字列 | `#B4E1A2` | ステータスバッジで結果が成功であったことを強調するために使用される境界の色。16 進値または RGB/RGBA/HSL の文字列が受け入れられます。 |
| `badgeWarningColorBackground` | 文字列 | `#FCEEBA` | ステータスバッジで、アクションが必要であるが、解決は任意である状況を強調表示するために使用される背景の色。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `badgeWarningColorText` | 文字列 | `#A82C00` | ステータスバッジで、アクションが必要であるが、解決は任意である状況を強調表示するために使用されるテキストの色。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `badgeWarningColorBorder` | 文字列 | `#F5DA80` | ステータスバッジで、アクションが必要であるが、解決は任意である状況を強調表示するために使用される境界の色。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `badgeDangerColorBackground` | 文字列 | `#F9E4F1` | ステータスバッジで、ユーザーがすぐに対応する必要がある優先度の高い重大な状況で結果が失敗であったことを示すために使用される背景の色。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `badgeDangerColorText` | 文字列 | `#B3063D` | ステータスバッジで、ユーザーがすぐに対応する必要がある優先度の高い重大な状況で結果が失敗であったことを示すために使用されるテキストの色。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `badgeDangerColorBorder` | 文字列 | `#F2C9E3` | ステータスバッジで、ユーザーがすぐに対応する必要がある優先度の高い重大な状況で結果が失敗であったことを示すために使用される境界の色。16 進値または RGB/RGBA/HSL の文字列が受け入れられます。 |
| `badgePaddingX` | 文字列 | `6px` | バッジの水平方向のパディング。ピクセル値のみをサポートします。 |
| `badgePaddingY` | 文字列 | `2px` | バッジの垂直方向のパディング。ピクセル値のみをサポートします。 |
| `badgeLabelFontSize` | 文字列 | `14px` | バッジラベルのタイポグラフィーのフォントサイズ。バッジラベルのタイポグラフィーの変数は、有効な [font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) 値を受け入れます。 |
| `badgeLabelFontWeight` | 文字列 | `400` | バッジラベルのタイポグラフィーのフォントの太さ。バッジラベルのタイポグラフィーの変数は、有効な [font weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) の値を受け入れます。 |
| `badgeLabelTextTransform` | 文字列 | `uppercase` | バッジラベルのタイポグラフィーのテキスト変換。バッジラベルのタイポグラフィーの変数は、有効な [text transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) 値を受け入れます。 |
| `offsetBackgroundColor` | 文字列 | `#FFFFFF` | 表で選択された行や特定の UI など、情報を強調表示するときに使用される背景の色。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `formBackgroundColor` | 文字列 | `#FFFFFF` | フォーム項目に使用される背景の色。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `colorBorder` | 文字列 | `#D7D7D7` | コンポーネント全体の境界に使用される色。16 進値または RGB/RGBA/HSL の文字列が受け入れられます。 |
| `formHighlightColorBorder` | 文字列 | `#D7D7D7` | フォーム項目にフォーカスを当てたときの強調表示に使用される色。16 進値または RGB/RGBA/HSL の文字列が受け入れられます。 |
| `formAccentColor` | 文字列 | `#0074D4` | チェックボックス、ラジオボタン、スイッチなど、フォーム項目の塗りつぶしに使用される色。16 進値または RGB/HSL の文字列が受け入れられます。 |
| `formPlaceholderTextColor` | 文字列 | `#757575` | フォームアイテムのプレースホルダーテキストの色。16 進値または RGB/HSL 文字列を受け付けます。 |
| `inputFieldPaddingX` | 文字列 | `8px` | フォームの入力フィールドの水平パディング。ピクセル値のみをサポートします。 |
| `inputFieldPaddingY` | 文字列 | `4px` | フォームの入力フィールドの垂直方向のパディング。ピクセル値のみをサポートします。 |
| `tableRowPaddingY` | 文字列 | `8px` | 表の行の垂直方向のパディング。ピクセル値のみをサポートします。 |
| `buttonBorderRadius` | 文字列 | `4px` | ボタンに使用される境界の角丸半径。ピクセル値のみを使用できます。 |
| `formBorderRadius` | 文字列 | `6px` | フォームエレメントに使用される境界の角丸半径。ピクセル値のみを使用できます。 |
| `badgeBorderRadius` | 文字列 | `4px` | バッジに使用される境界の角丸半径。ピクセル値のみを使用できます。 |
| `overlayBorderRadius` | 文字列 | `8px` | オーバーレイに使用される境界の角丸半径。ピクセル値のみを使用できます。 |
| `overlayZIndex` | 数字 | `1000` | 埋め込みコンポーネント全体でオーバーレイに使用する [Z インデックス](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)。オーバーレイの Z オーダーを制御するには、この数値を設定してください。 |
| `overlayBackdropColor` | 文字列 | `#F9E4F1` | オーバーレイが開かれたときの背景の色。16 進値または RGB / RGBA / HSL の文字列が受け入れられます。 |
| `bodyMdFontSize` | 文字列 | `16px` | 中程度の本文のタイポグラフィーのフォントのサイズ。本文のタイポグラフィーの変数では、有効な[フォントサイズ](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)の値が受け入れられます。 |
| `bodyMdFontWeight` | 文字列 | `400` | 中程度の本文のタイポグラフィーのフォントの太さ。本文のタイポグラフィーの変数では、有効な[フォントの太さ](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)の値が受け入れられます。 |
| `bodySmFontSize` | 文字列 | `14px` | 小さい本文のタイポグラフィーのフォントのサイズ。本文のタイポグラフィーの変数では、有効な[フォントサイズ](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)の値が受け入れられます。 |
| `bodySmFontWeight` | 文字列 | `400` | 小さな本文のタイポグラフィーのフォントの太さ。本文のタイポグラフィーの変数では、有効な[フォントの太さ](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)の値が受け入れられます。 |
| `headingXlFontSize` | 文字列 | `28px` | 特大の見出しのタイポグラフィーのフォントのサイズ。見出しのタイポグラフィーの変数では、有効な[フォントサイズ](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)の値が受け入れられます。 |
| `headingXlFontWeight` | 文字列 | `700` | 特大の見出しのタイポグラフィーのフォントの太さ。見出しのタイポグラフィーの変数では、有効な[フォントの太さ](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)の値が受け入れられます。 |
| `headingXlTextTransform` | 文字列 | `uppercase` | 特大の見出しのタイポグラフィーのテキスト変換。見出しのタイポグラフィーの変数では、有効な[テキスト変換](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)値が受け入れられます。 |
| `headingLgFontSize` | 文字列 | `24px` | 大きい見出しのタイポグラフィーのフォントのサイズ。見出しのタイポグラフィーの変数では、有効な[フォントサイズ](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)の値が受け入れられます。 |
| `headingLgFontWeight` | 文字列 | `700` | 大きな見出しのタイポグラフィーのフォントの太さ。見出しのタイポグラフィーの変数では、有効な[フォントの太さ](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)の値が受け入れられます。 |
| `headingLgTextTransform` | 文字列 | `uppercase` | 大きな見出しのタイポグラフィーのテキスト変換。見出しのタイポグラフィーの変数では、有効な[テキスト変換](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)値が受け入れられます。 |
| `headingMdFontSize` | 文字列 | `20px` | 中程度の見出しのタイポグラフィーのフォントのサイズ。見出しのタイポグラフィーの変数では、有効な[フォントサイズ](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)の値が受け入れられます。 |
| `headingMdFontWeight` | 文字列 | `700` | 中程度の見出しのタイポグラフィーのフォントの太さ。見出しのタイポグラフィーの変数では、有効な[フォントの太さ](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)の値が受け入れられます。 |
| `headingMdTextTransform` | 文字列 | `uppercase` | 中程度の見出しのタイポグラフィーのテキスト変換。見出しのタイポグラフィーの変数では、有効な[テキスト変換](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)値が受け入れられます。 |
| `headingSmFontSize` | 文字列 | `16px` | 小さな見出しのタイポグラフィーのフォントのサイズ。見出しのタイポグラフィーの変数では、有効な[フォントサイズ](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)の値が受け入れられます。 |
| `headingSmFontWeight` | 文字列 | `700` | 小さい見出しのタイポグラフィーのフォントの太さ。見出しのタイポグラフィーの変数では、有効な[フォントの太さ](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)の値が受け入れられます。 |
| `headingSmTextTransform` | 文字列 | `uppercase` | 小さな見出しのタイポグラフィーのテキスト変換。見出しのタイポグラフィーの変数では、有効な[テキスト変換](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)値が受け入れられます。 |
| `headingXsFontSize` | 文字列 | `12px` | 極小の見出しのタイポグラフィーのフォントのサイズ。見出しのタイポグラフィーの変数では、有効な[フォントサイズ](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)の値が受け入れられます。 |
| `headingXsFontWeight` | 文字列 | `700` | 極小の見出しのタイポグラフィーのフォントの太さ。見出しのタイポグラフィーの変数では、有効な[フォントの太さ](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)の値が受け入れられます。 |
| `headingXsTextTransform` | 文字列 | `uppercase` | 極小の見出しのタイポグラフィーのテキスト変換。見出しのタイポグラフィーの変数では、有効な[テキスト変換](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)値が受け入れられます。 |
| `labelMdFontSize` | 文字列 | `14px` | 中程度のラベルのタイポグラフィーのフォントのサイズ。ラベルのタイポグラフィーの変数では、有効な[フォントサイズ](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)の値が受け入れられます。 |
| `labelMdFontWeight` | 文字列 | `400` | 中程度のラベルのタイポグラフィーのフォントの太さ。ラベルのタイポグラフィーの変数では、有効な[フォントの太さ](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)の値が受け入れられます。 |
| `labelMdTextTransform` | 文字列 | `uppercase` | 中程度のラベルのタイポグラフィーのテキスト変換。ラベルのタイポグラフィーの変数では、有効な[テキスト変換](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)値が受け入れられます。 |
| `labelSmFontSize` | 文字列 | `12px` | 小さなラベルのタイポグラフィーのフォントのサイズ。ラベルのタイポグラフィーの変数では、有効な[フォントサイズ](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)の値が受け入れられます。 |
| `labelSmFontWeight` | 文字列 | `400` | 小さいラベルのタイポグラフィーのフォントの太さ。ラベルのタイポグラフィーの変数では、有効な[フォントの太さ](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)の値が受け入れられます。 |
| `labelSmTextTransform` | 文字列 | `uppercase` | 小さなラベルのタイポグラフィーのテキスト変換。ラベルのタイポグラフィーの変数では、有効な[テキスト変換](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)値が受け入れられます。 |

## オーバーレイ

`overlays` プロパティは、オーバーレイにダイアログ (モーダルとも呼ばれる) UI とドロワー UI のどちらを使用するかを制御します。自社のウェブサイトに最も適した値を選択してください。

| 名前 | タイプ | 値の例 | **Description** |
| --- | --- | --- | --- |
| `overlays` | 文字列 | `dialog` | 埋め込みコンポーネントが使用するオーバーレイの種類。有効な値は `dialog` (デフォルト) と `drawer` です。 |