iOS Universal Components のスタイルとテーマをカスタマイズする

iOS の Universal Components のスタイルとテーマをカスタマイズする方法を説明します。

Auth0 iOS 向け Universal Components では、デザイントークンモデルを採用しています。色、タイポグラフィ、間隔、角丸の半径、コンポーネントのサイズなどの視覚的なプロパティは、それぞれトークンとして定義されており、レイアウトを変更せずにオーバーライドできます。

Universal Components にはデフォルトの Auth0 テーマが用意されています。ブランドに合わせて独自のテーマを設定できます。

​

テーマ設定の仕組み

iOS 向け Universal Components では、SwiftUI の @Environment プロパティラッパーを使用してテーマを設定します。任意の SwiftUI ビューに .auth0Theme(_:) ビューモディファイアを適用してください。すべての子コンポーネントに、注入された Auth0Theme が自動的にレンダリングされます。

​

設定不要

テーマを設定しない場合、iOS 向け Universal Components は Auth0 のデフォルトテーマをレンダリングします。次の例では、MyAccountAuthMethodsView コンポーネントをカスタマイズせずに表示しています。

import SwiftUI
import Auth0UniversalComponents

struct ContentView: View {
    var body: some View {
        MyAccountAuthMethodsView()
    }
}

Auth0 のデフォルトテーマを読み込むために、追加の設定は必要ありません。カスタムテーマが指定されていない場合は、Universal Components が自動的に適用します。

​

一部のトークンをオーバーライドする

iOS 向け Universal Components では、他のすべてのトークンを Auth0 のデフォルトテーマでレンダリングしたまま、特定のトークンをオーバーライドできます。

次の例では、主要な背景色とテキストの色のみをオーバーライドします。

import SwiftUI
import Auth0UniversalComponents

struct ContentView: View {
    var body: some View {
        MyAccountAuthMethodsView()
            .auth0Theme(
                Auth0Theme(
                    colors: DefaultAuth0ColorTokens(
                        background: DefaultAuth0BackgroundColorTokens(primary: Color("BrandBlue")),
                        text: DefaultAuth0TextColorTokens(onPrimary: .white)
                    )
                )
            )
    }
}

タイポグラフィ、間隔、角丸、サイズのトークンについても同様です。

次の例では、タイポグラフィとボタンの角丸をオーバーライドします。

Auth0Theme(
    typography: DefaultAuth0TypographyTokens(
        body: Auth0TextStyle(
            font: .custom("Lato-Regular", size: 17),
            tracking: 0,
            lineSpacing: 7
        ),
        label: Auth0TextStyle(
            font: .custom("Lato-Medium", size: 16),
            tracking: 0.1,
            lineSpacing: 5
        )
    ),
    radius: DefaultAuth0RadiusTokens(button: 24)
)

​

完全なブランドテーマを設定する

3つのカラーカテゴリプロパティを実装した独自のブランディングテーマを作成し、Auth0ColorTokens コンテナに組み込みます。

struct BrandBackground: Auth0BackgroundColorTokens {
    var primary: Color { Color("Background/Primary", bundle: .main) }
    var primarySubtle: Color { Color("Background/Primary", bundle: .main).opacity(0.35) }
    var inverse: Color { Color("Background/Inverse", bundle: .main) }
    var accent: Color { Color("Background/Accent", bundle: .main) }
    var layerTop: Color { Color("Background/LayerTop", bundle: .main) }
    var layerMedium: Color { Color("Background/LayerMedium", bundle: .main) }
    var layerBase: Color { Color("Background/LayerBase", bundle: .main) }
    var error: Color { Color("Background/Error", bundle: .main) }
    var errorSubtle: Color { Color("Background/ErrorSubtle", bundle: .main).opacity(0.35) }
    var success: Color { Color("Background/Success", bundle: .main) }
    var successSubtle: Color { Color("Background/SuccessSubtle", bundle: .main) }
}

struct BrandColors: Auth0ColorTokens {
    var background: any Auth0BackgroundColorTokens { BrandBackground() }
    var text: any Auth0TextColorTokens { DefaultAuth0TextColorTokens() }
    var border: any Auth0BorderColorTokens { DefaultAuth0BorderColorTokens() }
}

MyAccountAuthMethodsView()
    .auth0Theme(Auth0Theme(colors: BrandColors()))

​

独自のビューでテーマを参照する

任意のSwiftビューで同じトークンを適用するには、@Environment(\.auth0Theme)プロパティラッパーを使用します。

struct MyCustomStep: View {
    @Environment(\.auth0Theme) private var theme

    var body: some View {
        VStack(spacing: theme.spacing.md) {
            Text("Almost there!")
                .auth0TextStyle(theme.typography.titleLarge)
                .foregroundStyle(theme.colors.text.bold)

            Button("Continue") { /* ... */ }
                .frame(height: theme.sizes.buttonHeight)
                .background(theme.colors.background.primary)
                .cornerRadius(theme.radius.button)
        }
        .padding(theme.spacing.md)
    }
}

​

トークンリファレンス

カラー — Auth0ColorTokens

カラーは、Auth0BackgroundColorTokens、Auth0TextColorTokens、Auth0BorderColorTokens の3つの用途別プロトコルに分かれています。これらは Auth0ColorTokens プロトコルに集約されます。

すべてのカラーアセットは環境に応じて変化します。アセットカタログがライトモードとダークモードを自動的に処理します。

主要な背景色

トークン	用途
background.primary	CTAボタンの背景、主要なボーダー
background.primarySubtle	控えめな主要背景色
background.inverse	コントラストを反転した背景
background.accent	ブランドを表す、または注目を集めるUIのハイライト

背景レイヤー

トークン	用途
background.layerTop	オーバーレイとモーダル
background.layerMedium	カードと浮き上がったコンテナ
background.layerBase	アプリのメイン背景

フィードバック用背景色

トークン	用途
background.error	エラー状態のコンテナ
background.errorSubtle	控えめなエラーバナー
background.success	成功状態のコンテナ
background.successSubtle	控えめな成功バナー

テキスト

トークン	用途
text.bold	見出しと主要な本文テキスト
text.regular	補足テキスト、説明、キャプション
text.disabled	無効時のテキストとプレースホルダーテキスト

色付きサーフェス上のテキスト

トークン	用途
text.onPrimary	background.primary 上のテキストとアイコン
text.onSuccess	background.success 上のテキストとアイコン
text.onError	background.error 上のテキストとアイコン、バリデーションメッセージ

ボーダー

トークン	用途
border.bold	コントラストが高いボーダー、または選択時のボーダー
border.regular	入力フィールドとカードのボーダー
border.subtle	控えめな区切り線
border.shadow	エレベーション用シャドウのボーダー

タイポグラフィ — Auth0TypographyTokens

各トークンは、font、tracking、lineSpacing をまとめた Auth0TextStyle です。.auth0TextStyle(_:) ビューモディファイアを使用して適用します。

トークン	書体	サイズ	太さ	行の高さ	トラッキング	用途
displayLarge	Inter	34 pt	SemiBold	41 pt	−0.20 pt	ヒーロー見出し、パスキー登録
displayMedium	Inter	28 pt	SemiBold	34 pt	−0.10 pt	主要な画面タイトル、エラー見出し
display	Inter	22 pt	SemiBold	28 pt	−0.05 pt	セクション見出し
titleLarge	Inter	20 pt	SemiBold	25 pt	0 pt	画面タイトル、サブ見出し用カード
title	Inter	17 pt	SemiBold	24 pt	0 pt	コンテンツ内のタイトル
body	Inter	17 pt	Regular	24 pt	0 pt	説明、本文
bodySmall	Inter	15 pt	Regular	20 pt	+0.10 pt	補足本文、脚注
label	Inter	16 pt	Medium	21 pt	+0.10 pt	ボタンラベル、フォームフィールドのラベル
helper	Inter	13 pt	Regular	18 pt	+0.20 pt	キャプション、ヘルパーテキスト
overline	Inter	11 pt	Regular	16 pt	+0.77 pt	オーバーライン、カテゴリラベル

ホストアプリケーションに書体 Inter がバンドルされていない場合、SwiftUIは自動的に SF Pro 書体を使用します。

間隔 — Auth0SpacingTokens

間隔はデフォルトで4 ptグリッドに基づいています。間隔をカスタマイズする際は、生のピクセル値ではなく、デザインハンドオフでトークン名を使用してください。

トークン	デフォルト	説明
xxs	4 pt	密接に関連する要素間の最小限の間隔
xs	8 pt	グループ化された要素間の小さな間隔
sm	12 pt	中程度の内側余白
md	16 pt	標準的なコンポーネントおよびコンテナの余白
lg	24 pt	主要なセクション用の大きめの余白
xl	32 pt	特大の余白
xxl	48 pt	2倍の特大余白
xxxl	56 pt	3倍の特大余白

角丸 — Auth0RadiusTokens

トークン	デフォルト	使用状況
small	8 pt	1文字入力セル (OTP、PINの各桁)
medium	12 pt	バナーおよびフィードバックカード
inputField	14 pt	テキスト入力、コード表示コンテナ
button	16 pt	CTAボタン、認証方式カード
pill	24 pt	ピル型のアウトラインボタン

サイズ — Auth0SizeTokens

トークン	デフォルト	使用状況
buttonHeight	48 pt	すべての主要・副次アクションボタン
inputHeight	60 pt	テキストおよび電話番号の入力フィールド
size4xlDimen	48 pt	1文字入力セルの幅
size5xlDimen	56 pt	1文字入力セルの高さ
containerSizeLargeDimen	52 pt	読み取り専用のコード表示コンテナの高さ
iconSmall	16 pt	小型アイコン (シェブロン、情報インジケーター、チェックマーク)
iconMedium	24 pt	標準アイコン (認証方式の画像)
iconLarge	28 pt	大型アイコン (三点メニュー)

​

詳しく見る

iOS SDK をインストールする

iOS のプラットフォーム要件とインストール方法。

セルフサービスのアカウントセキュリティインターフェースを構築する

SDK を初期化し、トークンプロバイダーを Auth0 テナントに接続します。