Personnaliser le style et les thèmes d’Universal Components sur iOS

Les Universal Components pour iOS d’Auth0 utilisent un modèle de jetons de conception. Les propriétés visuelles, comme les couleurs, la typographie, l’espacement, le rayon des coins et la taille des composants, sont chacune définies par un jeton que vous pouvez remplacer sans modifier vos layouts. Universal Components comprennent un thème Auth0 par défaut. Vous pouvez fournir votre propre thème afin qu’il corresponde à votre image de marque.

Fonctionnement de la personnalisation visuelle

Universal Components pour iOS utilise un thème encapsulé dans une enveloppe de propriété @Environment de SwiftUI. Appliquez le modificateur .auth0Theme(_:) à n’importe quelle vue SwiftUI. Chaque composant enfant affiche automatiquement l’élément Auth0Theme injecté.

Aucune configuration

Si vous ne configurez pas de thème, Universal Components pour iOS affiche le thème par défaut d’Auth0. L’exemple suivant affiche le composant MyAccountAuthMethodsView sans aucune personnalisation :

import SwiftUI
import Auth0UniversalComponents

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

Aucune configuration supplémentaire n’est nécessaire pour charger le thème par défaut d’Auth0. Universal Components l’applique automatiquement lorsqu’aucun thème personnalisé n’est fourni.

Remplacer un sous-ensemble de jetons

Vous pouvez remplacer certains jetons, tandis qu’Universal Components pour iOS affiche tous les autres à l’aide du thème Auth0 par défaut. L’exemple suivant remplace uniquement les couleurs principales d’arrière-plan et de texte :

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

Il en va de même pour les jetons de typographie, d’espacement, de rayon et de taille. L’exemple suivant remplace les valeurs de typographie et de rayon des boutons :

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

Configurer un thème d’image de marque complet

Créez votre propre thème d’image de marque qui définit les propriétés des trois catégories de couleurs, puis intégrez-les dans un conteneur 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()))

Utiliser le thème dans vos propres vues

Accédez à l’enveloppe de propriété @Environment(\.auth0Theme) pour appliquer les mêmes jetons dans n’importe quelle vue Swift :

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

Référence des jetons

Couleurs — Auth0ColorTokens

Les couleurs sont réparties dans trois protocoles spécialisés : Auth0BackgroundColorTokens, Auth0TextColorTokens et Auth0BorderColorTokens. Ils sont regroupés dans le protocole Auth0ColorTokens.Toutes les ressources de couleur sont adaptatives. Le catalogue de ressources gère automatiquement les modes clair et sombre.Arrière-plan principal

Jeton	Utilisation
`background.primary`	Arrière-plan des boutons d’appel à l’action, bordures principales
`background.primarySubtle`	Arrière-plan principal discret
`background.inverse`	Arrière-plan à contraste inversé
`background.accent`	Mise en évidence d’éléments d’UI de marque ou en vedette

Couches d’arrière-plan

Jeton	Utilisation
`background.layerTop`	Superpositions et fenêtres modales
`background.layerMedium`	Cartes et conteneurs surélevés
`background.layerBase`	Arrière-plan principal de l’application

États de rétroaction de l’arrière-plan

Jeton	Utilisation
`background.error`	Conteneur d’état d’erreur
`background.errorSubtle`	Bannière d’erreur discrète
`background.success`	Conteneur d’état de réussite
`background.successSubtle`	Bannière de réussite discrète

Contenu textuel

Jeton	Utilisation
`text.bold`	Titres et texte principal
`text.regular`	Texte secondaire, descriptions, légendes
`text.disabled`	Texte désactivé et texte indicatif

Texte sur des surfaces colorées

Jeton	Utilisation
`text.onPrimary`	Texte et icônes sur `background.primary`
`text.onSuccess`	Texte et icônes sur `background.success`
`text.onError`	Texte et icônes sur `background.error`, messages de validation

Bordures

Jeton	Utilisation
`border.bold`	Bordures à contraste élevé ou sélectionnées
`border.regular`	Bordures de champs de saisie et de cartes
`border.subtle`	Séparateurs discrets
`border.shadow`	Bordure d’ombre pour l’élévation

Typographie — Auth0TypographyTokens

Chaque jeton est un Auth0TextStyle qui regroupe font, tracking et lineSpacing. Appliquez-les à l’aide du modificateur de vue .auth0TextStyle(_:).

Jeton	Police de caractères	Taille	Graisse	Hauteur de ligne	Approche	Utilisation
`displayLarge`	Inter	34 pt	SemiBold	41 pt	−0.20 pt	Titres principaux, inscription de passkey
`displayMedium`	Inter	28 pt	SemiBold	34 pt	−0.10 pt	Titres d’écran principaux, titres d’erreur
`display`	Inter	22 pt	SemiBold	28 pt	−0.05 pt	Titres de section
`titleLarge`	Inter	20 pt	SemiBold	25 pt	0 pt	Titres d’écran, cartes de sous-titres
`title`	Inter	17 pt	SemiBold	24 pt	0 pt	Titres dans le contenu
`body`	Inter	17 pt	Regular	24 pt	0 pt	Descriptions, texte courant
`bodySmall`	Inter	15 pt	Regular	20 pt	+0.10 pt	Texte secondaire, notes de bas de page
`label`	Inter	16 pt	Medium	21 pt	+0.10 pt	Étiquettes de boutons et de champs de formulaire
`helper`	Inter	13 pt	Regular	18 pt	+0.20 pt	Légendes, texte d’aide
`overline`	Inter	11 pt	Regular	16 pt	+0.77 pt	Surtitres et étiquettes de catégorie

Si la police Inter n’est pas incluse dans l’application hôte, SwiftUI utilise automatiquement la police SF Pro.

Espacement — Auth0SpacingTokens

Par défaut, l’espacement repose sur une grille de 4 pt. Utilisez le nom du jeton dans les livrables de conception pour personnaliser l’espacement plutôt que la valeur brute en pixels.

Jeton	Valeur par défaut	Description
`xxs`	4 pt	Espacement minimal entre des éléments étroitement liés
`xs`	8 pt	Petit espacement entre des éléments regroupés
`sm`	12 pt	Marge intérieure moyenne
`md`	16 pt	Marge intérieure standard des composants et des conteneurs
`lg`	24 pt	Marge intérieure plus grande pour les sections principales
`xl`	32 pt	Marge intérieure très grande
`xxl`	48 pt	Marge intérieure deux fois plus grande
`xxxl`	56 pt	Marge intérieure trois fois plus grande

Rayon — Auth0RadiusTokens

Jeton	Valeur par défaut	Utilisation
`small`	8 pt	Cellules de saisie d’un seul caractère (OTP, chiffres du NIP)
`medium`	12 pt	Cartes de bannière et de rétroaction
`inputField`	14 pt	Champs de texte, conteneurs d’affichage de code
`button`	16 pt	Boutons d’appel à l’action, cartes de méthodes d’authentification
`pill`	24 pt	Boutons à contour en forme de pilule

Tailles — Auth0SizeTokens

Jeton	Valeur par défaut	Utilisation
`buttonHeight`	48 pt	Tous les boutons d’action principaux et secondaires
`inputHeight`	60 pt	Champs de texte et de numéro de téléphone
`size4xlDimen`	48 pt	Largeur d’une cellule de saisie d’un seul caractère
`size5xlDimen`	56 pt	Hauteur d’une cellule de saisie d’un seul caractère
`containerSizeLargeDimen`	52 pt	Hauteur d’un conteneur d’affichage de code en lecture seule
`iconSmall`	16 pt	Petites icônes — chevrons, indicateurs d’information, coches
`iconMedium`	24 pt	Icônes standard — images de méthodes d’authentification
`iconLarge`	28 pt	Grandes icônes — menu à trois points

Web Components

iOS Components

Android Components

Personnaliser le style et les thèmes d’Universal Components sur iOS

Fonctionnement de la personnalisation visuelle

Aucune configuration

Remplacer un sous-ensemble de jetons

Configurer un thème d’image de marque complet

Utiliser le thème dans vos propres vues

Référence des jetons

En savoir plus

Installer le SDK iOS

Créer une interface libre-service de sécurité des comptes

​Fonctionnement de la personnalisation visuelle

​Aucune configuration

​Remplacer un sous-ensemble de jetons

​Configurer un thème d’image de marque complet

​Utiliser le thème dans vos propres vues

​Référence des jetons

​En savoir plus

Installer le SDK iOS

Créer une interface libre-service de sécurité des comptes

Fonctionnement de la personnalisation visuelle

Aucune configuration

Remplacer un sous-ensemble de jetons

Configurer un thème d’image de marque complet

Utiliser le thème dans vos propres vues

Référence des jetons

En savoir plus