> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Auth0 Universal Componentsでスタイルとテーマをカスタマイズする

> Tailwind CSS、CSS 変数、組み込みのテーマプリセットを使用して、Auth0 Universal Components のデザインシステムをカスタマイズします。

<Warning>
  Auth0 Universal Components は現在 EA です。これを使用すると、[Okta の Master Subscription
  Agreement](https://www.okta.com/agreements/) に定められた該当する Free Trial 条項に
  同意したものとみなされます。詳しくは、[Product
  Release Stages](/ja/docs/troubleshoot/product-lifecycle/product-release-stages) を参照してください。
</Warning>

Auth0 Universal Components は、[Tailwind CSS](https://tailwindcss.com/docs/installation/using-vite) と [Radix UI primitives](https://www.radix-ui.com/primitives/docs/overview/introduction) を活用した柔軟なデザインシステムを基盤としています。スタイル設定は [`Auth0ComponentProvider`](/ja/docs/get-started/universal-components/auth0-component-provider) を通じて行われ、上位レベルのプリセットを使用することも、CSS 変数を細かく上書きすることもできます。

このアーキテクチャにより、ID フローのルック＆フィールをアプリケーションに自然に溶け込ませることができます。

<Tabs>
  <Tab title="React">
    ## はじめに

    1. スタイルシートをインポートします。

    ```tsx theme={null}
    import "@auth0/universal-components-react/styles";
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Tailwind v4 ユーザー:** CSS ファイルに `@import "@auth0/universal-components-react/tailwind"` を追加します。
    </Callout>

    2. ブランドカラーを追加する。

    ```css theme={null}
    :root {
      --primary: #4f46e5; /* ブランドカラー */
      --primary-foreground: #ffffff; /* ボタンのテキスト */
    }
    ```

    完了しました。すべてのボタン、リンク、アクティブ状態にブランドが適用されました。

    ***

    ## テーマプリセット

    `themeSettings` を `Auth0ComponentProvider` に渡して、組み込みテーマを切り替えます。

    ```tsx App.tsx theme={null}
    <Auth0ComponentProvider
      themeSettings={{
        mode: "light", // 'light' | 'dark'
        theme: "default", // 'default' | 'minimal' | 'rounded'
      }}
    >
      <App />
    </Auth0ComponentProvider>
    ```

    <table class="table">
      <thead>
        <tr>
          <th>プリセット</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>default</code>
          </td>

          <td>シャドウとボーダーのバランスが取れた、標準的な Auth0 の外観</td>
        </tr>

        <tr>
          <td>
            <code>minimal</code>
          </td>

          <td>シャドウを抑え、ボーダーを控えめにした軽量なスタイル</td>
        </tr>

        <tr>
          <td>
            <code>rounded</code>
          </td>

          <td>角丸を大きくして、より柔らかな印象にしたスタイル</td>
        </tr>
      </tbody>
    </table>

    ***

    ## CSS変数の確認

    すべての視覚的プロパティはCSSカスタムプロパティで制御されます。スタイルシートまたは `themeSettings.variables` プロパティでオーバーライドできます。

    <Tabs>
      <Tab title="色（ライト）">
        ```css theme={null}
        :root {
          /* ブランド - 最も影響力のある変数 */
          --primary: oklch(37% 0 0);              /* ボタン、リンク、アクティブ状態 */
          --primary-foreground: oklch(100% 0 0);  /* プライマリサーフェス上のテキスト */

        /_ サーフェス _/
        --background: oklch(100% 0 0); /_ ページ背景 _/
        --foreground: oklch(9% 0 0); /_ デフォルトテキスト _/
        --card: oklch(100% 0 0); /_ カード背景 _/
        --card-foreground: oklch(0% 0 0); /_ カード内テキスト _/
        --popover: oklch(100% 0 0); /_ ドロップダウン/ダイアログ背景 _/
        --popover-foreground: oklch(9% 0 0); /_ ポップオーバー内テキスト _/
        --input: oklch(100% 0 0); /_ 入力フィールド背景 _/

        /_ セカンダリ & ミュート _/
        --secondary: oklch(96% 0 0);
        --secondary-foreground: oklch(100% 0 0);
        --muted: oklch(96% 0 0); /_ 無効状態の背景 _/
        --muted-foreground: oklch(45% 0 0); /_ プレースホルダーテキスト _/

        /_ アクセント & 破壊的アクション _/
        --accent: oklch(97% 0 0); /_ ホバーハイライト _/
        --accent-foreground: oklch(9% 0 0);
        --destructive: oklch(93% 0.03 17); /_ エラー状態 _/
        --destructive-foreground: oklch(36% 0.14 17);

        /_ ボーダー _/
        --border: oklch(89% 0 0);
        --ring: oklch(89% 0 0); /_ フォーカスリング _/
        }

        ```
      </Tab>

      <Tab title="色（ダーク）">
        ```css theme={null}
        .dark {
          /* ブランド */
          --primary: oklch(70% 0.15 250);         /* ダーク背景では明るく */
          --primary-foreground: oklch(10% 0 0);

          /* サーフェス */
          --background: oklch(12% 0 0);
          --foreground: oklch(95% 0 0);
          --card: oklch(15% 0 0);
          --card-foreground: oklch(95% 0 0);
          --popover: oklch(15% 0 0);
          --popover-foreground: oklch(95% 0 0);
          --input: oklch(18% 0 0);

          /* セカンダリ＆ミュート */
          --secondary: oklch(20% 0 0);
          --secondary-foreground: oklch(95% 0 0);
          --muted: oklch(20% 0 0);
          --muted-foreground: oklch(60% 0 0);

          /* アクセント＆デストラクティブ */
          --accent: oklch(25% 0 0);
          --accent-foreground: oklch(95% 0 0);
          --destructive: oklch(30% 0.15 17);
          --destructive-foreground: oklch(95% 0.05 17);

          /* ボーダー */
          --border: oklch(25% 0 0);
          --ring: oklch(35% 0 0);
        }
        ```
      </Tab>

      <Tab title="角丸の半径">
        ```css theme={null}
        :root {
          /* 共通 - 全体的な印象に合わせて調整してください */
          --radius-sm:  4px;    /* タグ、チップ */
          --radius-md:  6px;    /* 小さな要素 */
          --radius-lg:  10px;   /* ボタン、入力欄 */
          --radius-xl:  12px;   /* カード */
          --radius-2xl: 16px;   /* モーダル、大きなパネル */

        /_ 細かい設定（ほとんど使用しない） _/
        --radius-xs: 2px;
        --radius-3xl: 20px;
        --radius-4xl: 24px;
        --radius-5xl: 32px;
        }

        ```
      </Tab>

      <Tab title="タイポグラフィ">
        ```css theme={null}
        :root {
          --font-size-page-header:      2.25rem;   /* 36px - メインタイトル */
          --font-size-heading:          1.5rem;    /* 24px - セクション見出し */
          --font-size-title:            1.25rem;   /* 20px - カードタイトル */
          --font-size-subtitle:         1.125rem;  /* 18px - 副見出し */
          --font-size-body:             1rem;      /* 16px - 本文テキスト */
          --font-size-paragraph:        0.875rem;  /* 14px - 説明文 */
          --font-size-label:            0.875rem;  /* 14px - フォームラベル */
          --font-size-page-description: 0.875rem;  /* 14px - サブタイトル */
        }
        ```
      </Tab>
    </Tabs>

    ***

    ## スタイルコンポーネント

    すべてのコンポーネントは、グローバルスタイルに影響を与えずに特定のスタイルを上書きするための `styling` プロパティを受け付けます。

    ```tsx theme={null}
    <SsoProviderTable
      styling={{
        variables: {
          common: {
            "--primary": "#059669", // このコンポーネントのみオーバーライド
          },
          light: { "--card": "#f8fafc" },
          dark: { "--card": "#1e293b" },
        },
        classes: {
          "SsoProviderTable-header": "shadow-lg",
          "SsoProviderTable-table": "rounded-xl",
        },
      }}
    />
    ```

    **使用するタイミング：**

    * `variables` - コンポーネントに適用される CSS カスタムプロパティのオーバーライド
    * `classes` - 特定のコンポーネント部分に適用する Tailwind またはカスタムクラス

    <Accordion title="コンポーネント別の利用可能なクラスの対象">
      各コンポーネントは、主要なセクションごとにクラスターゲットを公開します。

      **SsoProviderCreate**

      * `SsoProviderCreate-header`, `SsoProviderCreate-wizard`
      * `ProviderSelect-root`, `ProviderDetails-root`, `ProviderConfigure-root`

      **SsoProviderTable**

      * `SsoProviderTable-header`, `SsoProviderTable-table`, `SsoProviderTable-row`

      **SsoProviderEdit**

      * `SsoProviderEdit-header`, `SsoProviderEdit-tabs`
      * `SsoProviderEdit-ssoTab`, `SsoProviderEdit-provisioningTab`, `SsoProviderEdit-domainsTab`

      **DomainTable**

      * `DomainTable-header`, `DomainTable-table`
      * `DomainTable-createModal`, `DomainTable-configureModal`, `DomainTable-deleteModal`

      **OrganizationDetailsEdit**

      * `OrganizationDetailsEdit-header`, `OrganizationDetailsEdit-form`, `OrganizationDetailsEdit-actions`
    </Accordion>

    ***

    ## よく使われるカスタマイズ

    ### ブランドカラー (16進数)

    ブランドの16進数カラーコードをCSSで使用される形式に変換します。

    ```css theme={null}
    :root {
      /* 16進数を直接使用する */
      --primary: #4f46e5;
      --primary-foreground: #ffffff;

      /* または、より柔軟な色操作のためにoklchを使用する */
      --primary: oklch(50% 0.2 265); /* 紫 */
    }
    ```

    ### ソフトコーナー

    すべてのコンポーネントに丸みのあるデザインを適用するには：

    ```css theme={null}
    :root {
      --radius-lg: 16px; /* ボタン、入力欄 */
      --radius-xl: 20px; /* カード */
      --radius-2xl: 24px; /* モーダル */
    }
    ```

    ### コンパクトなタイポグラフィ

    よりコンパクトなUIの場合：

    ```css theme={null}
    :root {
      --font-size-page-header: 1.75rem;
      --font-size-heading: 1.25rem;
      --font-size-title: 1rem;
      --font-size-body: 0.875rem;
    }
    ```

    ***

    ## ダークモード

    コンポーネントは `themeSettings` の `mode` 設定に自動的に対応します。アプリのダークモードと同期するには：

    ```tsx theme={null}
    function App() {
      const [isDark, setIsDark] = useState(false);

      return (
        <Auth0ComponentProvider
          themeSettings={{
            mode: isDark ? "dark" : "light",
          }}
        >
          <YourApp />
        </Auth0ComponentProvider>
      );
    }
    ```

    またはシステム設定を使用:

    ```tsx theme={null}
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    <Auth0ComponentProvider
      themeSettings={{ mode: prefersDark ? 'dark' : 'light' }}
    >
    ```
  </Tab>

  <Tab title="Next.js">
    ## はじめに

    1. スタイルシートをインポートします。

    ルートレイアウトファイルに以下を追加します：

    ```tsx layout.tsx theme={null}
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/rwa";
    import "@auth0/universal-components-react/styles";

    export default function RootLayout({ children }) {
      return (
        <html lang="en">
          <body>
            <Auth0ComponentProvider
              mode="proxy"
              domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN}
              proxyConfig={{ baseUrl: "/api/auth" }}
            >
              {children}
            </Auth0ComponentProvider>
          </body>
        </html>
      );
    }
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Tailwind v4 を使用している場合:** CSS ファイルに `@import "@auth0/universal-components-react/tailwind"` を追加します。

      **Shadcn を使用している場合:** インポートは不要です。スタイルはすでに Tailwind のビルドに含まれています。
    </Callout>

    2. ブランドカラーを設定します。

    ```css theme={null}
    :root {
      --primary: #4f46e5; /* ブランドカラー */
      --primary-foreground: #ffffff; /* ボタンのテキスト */
    }
    ```

    完了しました。すべてのボタン、リンク、アクティブ状態にブランドが適用されました。

    ***

    ## テーマプリセット

    `themeSettings` を `Auth0ComponentProvider` に渡して、組み込みテーマを切り替えます。

    ```tsx layout.tsx theme={null}
    <Auth0ComponentProvider
      mode="proxy"
      domain="your-tenant.auth0.com"
      proxyConfig={{ baseUrl: "/api/auth" }}
      themeSettings={{
        mode: "light", // 'light' | 'dark'
        theme: "default", // 'default' | 'minimal' | 'rounded'
      }}
    >
      {/* アプリのコンポーネント */}
    </Auth0ComponentProvider>
    ```

    <table class="table">
      <thead>
        <tr>
          <th>プリセット</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>default</code>
          </td>

          <td>シャドウと枠線のバランスが取れた、標準的な Auth0 の外観</td>
        </tr>

        <tr>
          <td>
            <code>minimal</code>
          </td>

          <td>シャドウを抑え、枠線を細くした、より軽量な外観</td>
        </tr>

        <tr>
          <td>
            <code>rounded</code>
          </td>

          <td>角丸を大きくし、より柔らかな印象にした外観</td>
        </tr>
      </tbody>
    </table>

    ***

    ## CSS変数の確認

    すべての視覚的プロパティはCSSカスタムプロパティで制御されます。スタイルシートまたは `themeSettings.variables` プロパティでオーバーライドできます。

    <Tabs>
      <Tab title="色（ライト）">
        ```css theme={null}
        :root {
          /* ブランド - 最も影響力のある変数 */
          --primary: oklch(37% 0 0);              /* ボタン、links、アクティブ状態 */
          --primary-foreground: oklch(100% 0 0);  /* プライマリサーフェス上のテキスト */

        /_ サーフェス _/
        --background: oklch(100% 0 0); /_ ページ背景 _/
        --foreground: oklch(9% 0 0); /_ デフォルトテキスト _/
        --card: oklch(100% 0 0); /_ カード背景 _/
        --card-foreground: oklch(0% 0 0); /_ カード内テキスト _/
        --popover: oklch(100% 0 0); /_ ドロップダウン/ダイアログ背景 _/
        --popover-foreground: oklch(9% 0 0); /_ ポップオーバー内テキスト _/
        --input: oklch(100% 0 0); /_ 入力フィールド背景 _/

        /_ セカンダリ & ミュート _/
        --secondary: oklch(96% 0 0);
        --secondary-foreground: oklch(100% 0 0);
        --muted: oklch(96% 0 0); /_ 無効化された背景 _/
        --muted-foreground: oklch(45% 0 0); /_ プレースホルダーテキスト _/

        /_ アクセント & 破壊的操作 _/
        --accent: oklch(97% 0 0); /_ ホバーハイライト _/
        --accent-foreground: oklch(9% 0 0);
        --destructive: oklch(93% 0.03 17); /_ エラー状態 _/
        --destructive-foreground: oklch(36% 0.14 17);

        /_ ボーダー _/
        --border: oklch(89% 0 0);
        --ring: oklch(89% 0 0); /_ フォーカスリング _/
        }

        ```
      </Tab>

      <Tab title="色（ダーク）">
        ```css theme={null}
        .dark {
          /* ブランド */
          --primary: oklch(70% 0.15 250);         /* ダーク背景では明るく */
          --primary-foreground: oklch(10% 0 0);

          /* サーフェス */
          --background: oklch(12% 0 0);
          --foreground: oklch(95% 0 0);
          --card: oklch(15% 0 0);
          --card-foreground: oklch(95% 0 0);
          --popover: oklch(15% 0 0);
          --popover-foreground: oklch(95% 0 0);
          --input: oklch(18% 0 0);

          /* セカンダリ＆ミュート */
          --secondary: oklch(20% 0 0);
          --secondary-foreground: oklch(95% 0 0);
          --muted: oklch(20% 0 0);
          --muted-foreground: oklch(60% 0 0);

          /* アクセント＆デストラクティブ */
          --accent: oklch(25% 0 0);
          --accent-foreground: oklch(95% 0 0);
          --destructive: oklch(30% 0.15 17);
          --destructive-foreground: oklch(95% 0.05 17);

          /* ボーダー */
          --border: oklch(25% 0 0);
          --ring: oklch(35% 0 0);
        }
        ```
      </Tab>

      <Tab title="角丸の半径">
        ```css theme={null}
        :root {
          /* 共通 - 全体的な印象を調整する */
          --radius-sm:  4px;    /* タグ、チップ */
          --radius-md:  6px;    /* 小さな要素 */
          --radius-lg:  10px;   /* ボタン、入力欄 */
          --radius-xl:  12px;   /* カード */
          --radius-2xl: 16px;   /* モーダル、大きなパネル */

        /_ 細かい設定（ほとんど使用しない） _/
        --radius-xs: 2px;
        --radius-3xl: 20px;
        --radius-4xl: 24px;
        --radius-5xl: 32px;
        }

        ```
      </Tab>

      <Tab title="タイポグラフィ">
        ```css theme={null}
        :root {
          --font-size-page-header:      2.25rem;   /* 36px - メインタイトル */
          --font-size-heading:          1.5rem;    /* 24px - セクション見出し */
          --font-size-title:            1.25rem;   /* 20px - カードタイトル */
          --font-size-subtitle:         1.125rem;  /* 18px - サブ見出し */
          --font-size-body:             1rem;      /* 16px - 本文テキスト */
          --font-size-paragraph:        0.875rem;  /* 14px - 説明文 */
          --font-size-label:            0.875rem;  /* 14px - フォームラベル */
          --font-size-page-description: 0.875rem;  /* 14px - サブタイトル */
        }
        ```
      </Tab>
    </Tabs>

    ***

    ## スタイルコンポーネント

    すべてのコンポーネントは、グローバルスタイルに影響を与えずに特定のスタイルを上書きするための `styling` プロパティを受け付けます。

    ```tsx layout.tsx theme={null}
    <SsoProviderTable
      styling={{
        variables: {
          common: {
            "--primary": "#059669", // このコンポーネントのみオーバーライド
          },
          light: { "--card": "#f8fafc" },
          dark: { "--card": "#1e293b" },
        },
        classes: {
          "SsoProviderTable-header": "shadow-lg",
          "SsoProviderTable-table": "rounded-xl",
        },
      }}
    />
    ```

    **使用するタイミング：**

    * `variables` - コンポーネント単位で適用される CSS カスタムプロパティのオーバーライド
    * `classes` - 特定のコンポーネント部分に適用する Tailwind またはカスタムのクラス

    <Accordion title="コンポーネント別の使用可能なクラス対象">
      各コンポーネントは、主要なセクションに対応するクラスターゲットを公開しています。

      **SsoProviderCreate**

      * `SsoProviderCreate-header`, `SsoProviderCreate-wizard`
      * `ProviderSelect-root`, `ProviderDetails-root`, `ProviderConfigure-root`

      **SsoProviderTable**

      * `SsoProviderTable-header`, `SsoProviderTable-table`, `SsoProviderTable-row`

      **SsoProviderEdit**

      * `SsoProviderEdit-header`, `SsoProviderEdit-tabs`
      * `SsoProviderEdit-ssoTab`, `SsoProviderEdit-provisioningTab`, `SsoProviderEdit-domainsTab`

      **DomainTable**

      * `DomainTable-header`, `DomainTable-table`
      * `DomainTable-createModal`, `DomainTable-configureModal`, `DomainTable-deleteModal`

      **OrganizationDetailsEdit**

      * `OrganizationDetailsEdit-header`, `OrganizationDetailsEdit-form`, `OrganizationDetailsEdit-actions`
    </Accordion>

    ***

    ## よく使われるカスタマイズ

    ### ブランドカラー (16進数)

    ブランドの16進数カラーコードをCSSで使用される形式に変換します。

    ```css theme={null}
    :root {
      /* 16進数を直接使用する */
      --primary: #4f46e5;
      --primary-foreground: #ffffff;

      /* または、色操作をより柔軟に行うためにoklchを使用する */
      --primary: oklch(50% 0.2 265); /* 紫 */
    }
    ```

    ### ソフトコーナー

    すべてのコンポーネントに丸みのあるデザインを適用するには：

    ```css theme={null}
    :root {
      --radius-lg: 16px; /* ボタン、入力欄 */
      --radius-xl: 20px; /* カード */
      --radius-2xl: 24px; /* モーダル */
    }
    ```

    ### コンパクトなタイポグラフィ

    よりコンパクトなUIの場合：

    ```css theme={null}
    :root {
      --font-size-page-header: 1.75rem;
      --font-size-heading: 1.25rem;
      --font-size-title: 1rem;
      --font-size-body: 0.875rem;
    }
    ```

    ***

    ## ダークモード

    コンポーネントは `themeSettings` の `mode` 設定に自動的に対応します。アプリのダークモードと同期させるには:

    ```tsx theme={null}
    function App() {
      const [isDark, setIsDark] = useState(false);

      return (
        <Auth0ComponentProvider
          mode="proxy"
          domain="your-tenant.auth0.com"
          proxyConfig={{ baseUrl: "/api/auth" }}
          themeSettings={{
            mode: isDark ? "dark" : "light",
          }}
        >
          <YourApp />
        </Auth0ComponentProvider>
      );
    }
    ```

    またはシステム設定を使用:

    ```tsx theme={null}
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    <Auth0ComponentProvider
      mode="proxy"
      domain="your-tenant.auth0.com"
      proxyConfig={{ baseUrl: "/api/auth" }}
      themeSettings={{ mode: prefersDark ? 'dark' : 'light' }}
    >
    ```
  </Tab>

  <Tab title="shadcn">
    ## はじめに

    1. スタイルのインポートは不要です。

    Shadcnを使用する場合、スタイルはすでにTailwindのビルドに含まれています。追加のインポートは不要です。

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Tailwind v4 を使用している場合は、CSS ファイルに `@import
                                "@auth0/universal-components-react/tailwind"` を追加します。
    </Callout>

    2. ブランドカラーを追加します。

    ```css theme={null}
    :root {
      --primary: #4f46e5; /* ブランドカラー */
      --primary-foreground: #ffffff; /* ボタンのテキスト */
    }
    ```

    完了しました。すべてのボタン、リンク、アクティブ状態にブランドが適用されました。

    ***

    ## テーマプリセット

    `themeSettings` を `Auth0ComponentProvider` に渡して、組み込みテーマを切り替えます。

    ```tsx App.tsx theme={null}
    <Auth0ComponentProvider
      themeSettings={{
        mode: "light", // 'light' | 'dark'
        theme: "default", // 'default' | 'minimal' | 'rounded'
      }}
    >
      <App />
    </Auth0ComponentProvider>
    ```

    <table class="table">
      <thead>
        <tr>
          <th>プリセット</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>default</code>
          </td>

          <td>影と枠線のバランスを取った、標準的なAuth0の外観</td>
        </tr>

        <tr>
          <td>
            <code>minimal</code>
          </td>

          <td>影を減らし、枠線を薄くして、視覚的な重さを抑えたスタイル</td>
        </tr>

        <tr>
          <td>
            <code>rounded</code>
          </td>

          <td>角丸を大きくして、より柔らかな印象にしたスタイル</td>
        </tr>
      </tbody>
    </table>

    ***

    ## CSS変数の確認

    すべての視覚的プロパティはCSSカスタムプロパティで制御されます。スタイルシートまたは `themeSettings.variables` プロパティでオーバーライドできます。

    <Tabs>
      <Tab title="色（ライト）">
        ```css theme={null}
        :root {
          /* ブランド - 最も影響力のある変数 */
          --primary: oklch(37% 0 0);              /* ボタン、リンク、アクティブ状態 */
          --primary-foreground: oklch(100% 0 0);  /* プライマリサーフェス上のテキスト */

        /_ サーフェス _/
        --background: oklch(100% 0 0); /_ ページ背景 _/
        --foreground: oklch(9% 0 0); /_ デフォルトテキスト _/
        --card: oklch(100% 0 0); /_ カード背景 _/
        --card-foreground: oklch(0% 0 0); /_ カード内テキスト _/
        --popover: oklch(100% 0 0); /_ ドロップダウン/ダイアログ背景 _/
        --popover-foreground: oklch(9% 0 0); /_ ポップオーバー内テキスト _/
        --input: oklch(100% 0 0); /_ 入力フィールド背景 _/

        /_ セカンダリ & ミュート _/
        --secondary: oklch(96% 0 0);
        --secondary-foreground: oklch(100% 0 0);
        --muted: oklch(96% 0 0); /_ 無効状態の背景 _/
        --muted-foreground: oklch(45% 0 0); /_ プレースホルダーテキスト _/

        /_ アクセント & デストラクティブ _/
        --accent: oklch(97% 0 0); /_ ホバーハイライト _/
        --accent-foreground: oklch(9% 0 0);
        --destructive: oklch(93% 0.03 17); /_ エラー状態 _/
        --destructive-foreground: oklch(36% 0.14 17);

        /_ ボーダー _/
        --border: oklch(89% 0 0);
        --ring: oklch(89% 0 0); /_ フォーカスリング _/
        }

        ```
      </Tab>

      <Tab title="色（ダーク）">
        ```css theme={null}
        .dark {
          /* ブランド */
          --primary: oklch(70% 0.15 250);         /* ダーク背景では明るく */
          --primary-foreground: oklch(10% 0 0);

          /* サーフェス */
          --background: oklch(12% 0 0);
          --foreground: oklch(95% 0 0);
          --card: oklch(15% 0 0);
          --card-foreground: oklch(95% 0 0);
          --popover: oklch(15% 0 0);
          --popover-foreground: oklch(95% 0 0);
          --input: oklch(18% 0 0);

          /* セカンダリ＆ミュート */
          --secondary: oklch(20% 0 0);
          --secondary-foreground: oklch(95% 0 0);
          --muted: oklch(20% 0 0);
          --muted-foreground: oklch(60% 0 0);

          /* アクセント＆デストラクティブ */
          --accent: oklch(25% 0 0);
          --accent-foreground: oklch(95% 0 0);
          --destructive: oklch(30% 0.15 17);
          --destructive-foreground: oklch(95% 0.05 17);

          /* ボーダー */
          --border: oklch(25% 0 0);
          --ring: oklch(35% 0 0);
        }
        ```
      </Tab>

      <Tab title="角の丸み">
        ```css theme={null}
        :root {
          /* 共通 - 全体的な印象に合わせて調整してください */
          --radius-sm:  4px;    /* タグ、チップ */
          --radius-md:  6px;    /* 小さな要素 */
          --radius-lg:  10px;   /* ボタン、入力欄 */
          --radius-xl:  12px;   /* カード */
          --radius-2xl: 16px;   /* モーダル、大きなパネル */

        /_ 細かい設定（ほとんど使用しない） _/
        --radius-xs: 2px;
        --radius-3xl: 20px;
        --radius-4xl: 24px;
        --radius-5xl: 32px;
        }

        ```
      </Tab>

      <Tab title="タイポグラフィ">
        ```css theme={null}
        :root {
          --font-size-page-header:      2.25rem;   /* 36px - メインタイトル */
          --font-size-heading:          1.5rem;    /* 24px - セクション見出し */
          --font-size-title:            1.25rem;   /* 20px - カードタイトル */
          --font-size-subtitle:         1.125rem;  /* 18px - サブ見出し */
          --font-size-body:             1rem;      /* 16px - 本文テキスト */
          --font-size-paragraph:        0.875rem;  /* 14px - 説明文 */
          --font-size-label:            0.875rem;  /* 14px - フォームラベル */
          --font-size-page-description: 0.875rem;  /* 14px - サブタイトル */
        }
        ```
      </Tab>
    </Tabs>

    ***

    ## スタイルコンポーネント

    すべてのコンポーネントは、グローバルスタイルに影響を与えずに特定のスタイルを上書きするための `styling` プロパティを受け付けます。

    ```tsx theme={null}
    <SsoProviderTable
      styling={{
        variables: {
          common: {
            "--primary": "#059669", // このコンポーネントのみオーバーライド
          },
          light: { "--card": "#f8fafc" },
          dark: { "--card": "#1e293b" },
        },
        classes: {
          "SsoProviderTable-header": "shadow-lg",
          "SsoProviderTable-table": "rounded-xl",
        },
      }}
    />
    ```

    **使用するタイミング：**

    * `variables` - コンポーネントにスコープされた CSS カスタムプロパティの上書き
    * `classes` - コンポーネントの特定の部分に適用される Tailwind またはカスタムのクラス

    <Accordion title="コンポーネント別の利用可能なクラス対象">
      各コンポーネントでは、主要セクションに対応するクラスターゲットを公開しています。

      **SsoProviderCreate**

      * `SsoProviderCreate-header`, `SsoProviderCreate-wizard`
      * `ProviderSelect-root`, `ProviderDetails-root`, `ProviderConfigure-root`

      **SsoProviderTable**

      * `SsoProviderTable-header`, `SsoProviderTable-table`, `SsoProviderTable-row`

      **SsoProviderEdit**

      * `SsoProviderEdit-header`, `SsoProviderEdit-tabs`
      * `SsoProviderEdit-ssoTab`, `SsoProviderEdit-provisioningTab`, `SsoProviderEdit-domainsTab`

      **DomainTable**

      * `DomainTable-header`, `DomainTable-table`
      * `DomainTable-createModal`, `DomainTable-configureModal`, `DomainTable-deleteModal`

      **OrganizationDetailsEdit**

      * `OrganizationDetailsEdit-header`, `OrganizationDetailsEdit-form`, `OrganizationDetailsEdit-actions`
    </Accordion>

    ***

    ## よく使われるカスタマイズ

    ### ブランドカラー (Hex)

    ブランドの16進数カラーコードをCSSで使用される形式に変換します。

    ```css theme={null}
    :root {
      /* 16進数を直接使用する */
      --primary: #4f46e5;
      --primary-foreground: #ffffff;

      /* または、色操作をより柔軟に行うためにoklchを使用する */
      --primary: oklch(50% 0.2 265); /* 紫 */
    }
    ```

    ### ソフトコーナー

    すべてのコンポーネントに丸みのあるデザインを適用するには：

    ```css theme={null}
    :root {
      --radius-lg: 16px; /* ボタン、入力欄 */
      --radius-xl: 20px; /* カード */
      --radius-2xl: 24px; /* モーダル */
    }
    ```

    ### コンパクトなタイポグラフィ

    よりコンパクトなUIの場合：

    ```css theme={null}
    :root {
      --font-size-page-header: 1.75rem;
      --font-size-heading: 1.25rem;
      --font-size-title: 1rem;
      --font-size-body: 0.875rem;
    }
    ```

    ***

    ## ダークモード

    コンポーネントは `themeSettings` の `mode` 設定に自動的に対応します。アプリのダークモードと同期するには：

    ```tsx theme={null}
    function App() {
      const [isDark, setIsDark] = useState(false);

      return (
        <Auth0ComponentProvider
          themeSettings={{
            mode: isDark ? "dark" : "light",
          }}
        >
          <YourApp />
        </Auth0ComponentProvider>
      );
    }
    ```

    またはシステム設定を使用:

    ```tsx theme={null}
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    <Auth0ComponentProvider
      themeSettings={{ mode: prefersDark ? 'dark' : 'light' }}
    >
    ```
  </Tab>
</Tabs>