Options d'apparence prises en charge
Passez en revue les options d'apparence disponibles pour les composants intégrés.
Le kit d’outils de composants intégrés Figma UI contient chaque composant, des schémas fréquents et un exemple d’application. Vous pouvez l’utiliser pour visualiser et concevoir des interfaces utilisateur intégrées dans votre site Web.
Vous pouvez utiliser l’une des propriétés appearance suivantes sur la page de personnalisation. En outre, cette page génère automatiquement un extrait de code à utiliser sur votre site en fonction des paramètres appearance spécifiés.
These options are the only way to change styles in Connect embedded components. You can’t override their styles with CSS selectors or other mechanisms.
Necessary popups
Some behavior in embedded components, such as user authentication, is always presented in a popup. You can’t customize the embedded component to eliminate such popups.
Variables
L’objet variables inclut les propriétés facultatives suivantes, qui s’appliquent à tous les composants Connect intégrés de votre application.
Variables fréquemment utilisées
Nom | Type | Exemple de valeur |
fontFamily | chaîne | sans-serif |
Valeur indiquant la famille de polices utilisée dans les composants intégrés. Si un composant intégré hérite d’une valeur font-family d’un élément de votre site dans lequel il figure, ce paramètre prime sur la valeur héritée. | ||
fontSizeBase | chaîne | 16px |
Taille de police de base définie à la racine du composant intégré. Cela met à l’échelle la valeur des autres variables de taille de police. Seules les valeurs en pixels sont prises en charge. | ||
spacingUnit | chaîne | 8px |
Unité d’espacement de base à partir de laquelle toutes les autres valeurs d’espacement sont dérivées. Augmentez ou réduisez cette valeur pour rendre votre mise en page plus ou moins aérée. Seules les valeurs en pixels sont prises en charge. | ||
borderRadius | chaîne | 15px |
Angle des bordures standard utilisées pour les composants intégrés. Cela définit l’angle des bordures par défaut pour tous les composants. Seules les valeurs en pixels sont prises en charge. | ||
colorPrimary | chaîne | #0074D4 |
Couleur principale utilisée dans les composants intégrés. Définissez cette valeur sur la couleur principale de votre marque. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
colorBackground | chaîne | #FFFFFF |
Couleur d’arrière-plan des composants intégrés, dont les overlays, les infobulles et les pop-over. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
colorText | chaîne | #444444 |
Couleur utilisée pour le texte normal. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
colorDanger | chaîne | #DF1B41 |
Couleur utilisée pour indiquer des erreurs ou des actions de suppression. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
Variables moins fréquentes
Nom | Type | Exemple de valeur |
buttonPrimaryColorBackground | chaîne | #0074D4 |
Couleur d’arrière-plan utilisée pour les boutons principaux. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
buttonPrimaryColorBorder | chaîne | #0074D4 |
Couleur utilisée pour les bordures des boutons principaux. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
buttonPrimaryColorText | chaîne | #FFFFFF |
Couleur utilisée pour le texte des boutons principaux. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
buttonSecondaryColorBackground | chaîne | #EBEEF1 |
Couleur utilisée pour l’arrière-plan des boutons secondaires. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
buttonSecondaryColorBorder | chaîne | #EBEEF1 |
Couleur utilisée pour les bordures des boutons secondaires. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
buttonSecondaryColorText | chaîne | #393B3E |
Couleur de texte utilisée pour les boutons secondaires. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
colorSecondaryText | chaîne | #717171 |
Couleur utilisée pour le texte secondaire. Seules les valeurs hexadécimales ou les chaînes RVB/RGBA/HSL sont acceptées. | ||
actionPrimaryColorText | chaîne | #0074D4 |
Couleur utilisée pour les actions principales et les liens. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
actionPrimaryTextDecorationLine | chaîne | underline |
Type de trait des éléments décoratifs du texte des actions et des liens principaux. Cette option accepte une valeur valide text decoration line. | ||
actionPrimaryTextDecorationColor | chaîne | #0074D4 |
Couleur utilisée pour les éléments décoratifs du texte des actions et des liens principaux. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
actionPrimaryTextDecorationStyle | chaîne | solid |
Style des éléments décoratifs du texte des actions et des liens principaux. Cette option accepte une valeur valide text decoration style. | ||
actionPrimaryTextDecorationThickness | chaîne | 1px |
Épaisseur des éléments décoratifs du texte des actions principales et des liens. Cette option accepte une valeur valide pour text decoration thickness. | ||
actionSecondaryColorText | chaîne | #444444 |
Couleur utilisée pour les actions secondaires et les liens. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
actionSecondaryTextDecorationLine | chaîne | underline |
Type de trait des éléments décoratifs du texte des actions et des liens secondaires. Cette option accepte une valeur valide text decoration line. | ||
actionSecondaryTextDecorationColor | chaîne | #0074D4 |
Couleur utilisée pour les éléments décoratifs du texte des actions et des liens secondaires. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
actionSecondaryTextDecorationStyle | chaîne | solid |
Style des éléments décoratifs du texte des actions et des liens secondaires. Cette option accepte une valeur valide text decoration style. | ||
actionSecondaryTextDecorationThickness | chaîne | 1px |
Épaisseur des éléments décoratifs du texte des actions et des liens secondaires. Cette option accepte une valeur valide text decoration thickness. | ||
badgeNeutralColorBackground | chaîne | #E4ECEC |
Couleur d’arrière-plan utilisée pour représenter un état neutre ou l’absence d’état dans les badges d’état. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
badgeNeutralColorText | chaîne | #545969 |
Couleur de texte utilisée pour représenter un état neutre ou l’absence d’état dans les badges d’état. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
badgeNeutralColorBorder | chaîne | #CBD5D6 |
Couleur de bordure utilisée pour représenter un état neutre ou l’absence d’état dans les badges d’état. Seules les valeurs hexadécimales ou les chaînes RVB/RGBA/HSL sont acceptées. | ||
badgeSuccessColorBackground | chaîne | #CEF6BB |
Couleur d’arrière-plan utilisée pour représenter un résultat positif dans les badges d’état. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
badgeSuccessColorText | chaîne | #05690D |
Couleur de texte utilisée pour représenter un résultat positif dans les badges d’état. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
badgeSuccessColorBorder | chaîne | #B4E1A2 |
Couleur de bordure utilisée pour représenter un résultat positif dans les badges d’état. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
badgeWarningColorBackground | chaîne | #FCEEBA |
Couleur d’arrière-plan utilisée dans les badges d’état pour mettre en évidence les éléments qui peuvent nécessiter une action, mais dont la résolution est facultative. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
badgeWarningColorText | chaîne | #A82C00 |
Couleur de texte utilisée dans les badges d’état pour mettre en évidence les éléments qui peuvent nécessiter une action, mais dont la résolution est facultative. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
badgeWarningColorBorder | chaîne | #F5DA80 |
Couleur de bordure utilisée dans les badges d’état pour mettre en évidence les éléments qui peuvent nécessiter une action, mais dont la résolution est facultative. Seules les valeurs hexadécimales ou les chaînes RVB/RGBA/HSL sont acceptées. | ||
badgeDangerColorBackground | chaîne | #F9E4F1 |
Couleur d’arrière-plan utilisée dans les badges d’état pour indiquer les situations critiques hautement prioritaires que l’utilisateur doit traiter immédiatement, ou les échecs. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
badgeDangerColorText | chaîne | #B3063D |
Couleur de texte utilisée dans les badges d’état pour indiquer les situations critiques hautement prioritaires que l’utilisateur doit traiter immédiatement, ou les échecs. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
badgeDangerColorBorder | chaîne | #F2C9E3 |
Couleur de bordure utilisée dans les badges d’état pour indiquer les situations critiques hautement prioritaires que l’utilisateur doit traiter immédiatement, ou les échecs. Seules les valeurs hexadécimales ou les chaînes RVB/RGBA/HSL sont acceptées. | ||
offsetBackgroundColor | chaîne | #FFFFFF |
Couleur d’arrière-plan utilisée pour mettre en évidence des informations, comme la ligne de tableau ou le composant d’interface utilisateur actuellement sélectionné. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
formBackgroundColor | chaîne | #FFFFFF |
Couleur d’arrière-plan utilisée pour les éléments de formulaire. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
colorBorder | chaîne | #D7D7D7 |
Couleur utilisée pour les bordures du composant. Seules les valeurs hexadécimales ou les chaînes RVB/RGBA/HSL sont acceptées. | ||
formHighlightColorBorder | chaîne | #D7D7D7 |
Couleur utilisée pour mettre en évidence des éléments de formulaires importants. Seules les valeurs hexadécimales ou les chaînes RVB/RGBA/HSL sont acceptées. | ||
formAccentColor | chaîne | #0074D4 |
Couleur utilisée pour remplir des éléments de formulaires, comme des cases à cocher, des boutons radio ou des boutons bascule. Seules les valeurs hexadécimales ou les chaînes RVB/HSL sont acceptées. | ||
buttonBorderRadius | chaîne | 4px |
Angle des bordures utilisé pour les boutons. Seules les valeurs en pixels sont prises en charge. | ||
formBorderRadius | chaîne | 6px |
Angle des bordures utilisé pour les éléments de formulaires. Seules les valeurs en pixels sont prises en charge. | ||
badgeBorderRadius | chaîne | 4px |
Angle des bordures utilisé pour les badges. Seules les valeurs en pixels sont prises en charge. | ||
overlayBorderRadius | chaîne | 8px |
Angle des bordures utilisé pour les overlays. Seules les valeurs en pixels sont prises en charge. | ||
overlayZIndex | nombre | 1000 |
Propriété z-index à utiliser pour l’overlay des composants intégrés. La valeur que vous lui attribuez détermine le z-order de l’overlay. | ||
overlayBackdropColor | chaîne | #F9E4F1 |
Couleur d’arrière-plan lorsqu’une superposition est ouverte. Cette option accepte les valeurs hexadécimales ou les chaînes RGB/RGBA/HSL. | ||
bodyMdFontSize | chaîne | 16px |
Taille de police utilisée pour la typographie des corps de texte de taille moyenne. Les variables de typographie du corps de texte acceptent uniquement les valeurs de taille de police valides. | ||
bodyMdFontWeight | chaîne | 400 |
Épaisseur de police utilisée pour la typographie des corps de texte de taille moyenne. Les variables de typographie du corps de texte acceptent uniquement les valeurs d’épaisseur de police valides. | ||
bodySmFontSize | chaîne | 14px |
Taille de police utilisée pour la typographie des corps de texte de petite taille. Les variables de typographie du corps de texte acceptent uniquement les valeurs de taille de police valides. | ||
bodySmFontWeight | chaîne | 400 |
Épaisseur de police utilisée pour la typographie des corps de texte de petite taille. Les variables de typographie du corps de texte acceptent uniquement les valeurs d’épaisseur de police valides. | ||
headingXlFontSize | chaîne | 28px |
Taille de police utilisée pour la typographie des très grands titres. Les variables de typographie des titres acceptent uniquement les valeurs de taille de police valides. | ||
headingXlFontWeight | chaîne | 700 |
Épaisseur de police utilisée pour la typographie des très grands titres. Les variables de typographie des titres acceptent uniquement les valeurs d’épaisseur de police valides. | ||
headingXlTextTransform | chaîne | uppercase |
Capitalisation du texte utilisée pour la typographie des très grands titres. Les variables de typographie des titres acceptent uniquement les valeurs de capitalisation du texte valides. | ||
headingLgFontSize | chaîne | 24px |
Taille de police utilisée pour la typographie des grands titres. Les variables de typographie des titres acceptent uniquement les valeurs de taille de police valides. | ||
headingLgFontWeight | chaîne | 700 |
Épaisseur de police utilisée pour la typographie des grands titres. Les variables de typographie des titres acceptent uniquement les valeurs d’épaisseur de police valides. | ||
headingLgTextTransform | chaîne | uppercase |
Capitalisation du texte utilisée pour la typographie des grands titres. Les variables de typographie des titres acceptent uniquement les valeurs de capitalisation du texte valides. | ||
headingMdFontSize | chaîne | 20px |
Taille de police utilisée pour la typographie des titres moyens. Les variables de typographie des titres acceptent uniquement les valeurs de taille de police valides. | ||
headingMdFontWeight | chaîne | 700 |
Épaisseur de police utilisée pour la typographie des titres moyens. Les variables de typographie des titres acceptent uniquement les valeurs d’épaisseur de police valides. | ||
headingMdTextTransform | chaîne | uppercase |
Capitalisation du texte utilisée pour la typographie des titres moyens. Les variables de typographie des titres acceptent uniquement les valeurs de capitalisation du texte valides. | ||
headingSmFontSize | chaîne | 16px |
Taille de police utilisée pour la typographie des petits titres. Les variables de typographie des titres acceptent uniquement les valeurs de taille de police valides. | ||
headingSmFontWeight | chaîne | 700 |
Épaisseur de police utilisée pour la typographie des petits titres. Les variables de typographie des titres acceptent uniquement les valeurs d’épaisseur de police valides. | ||
headingSmTextTransform | chaîne | uppercase |
Capitalisation du texte utilisée pour la typographie des petits titres. Les variables de typographie des titres acceptent uniquement les valeurs de capitalisation du texte valides. | ||
headingXsFontSize | chaîne | 12px |
Taille de police utilisée pour la typographie des très petits titres. Les variables de typographie des titres acceptent uniquement les valeurs de taille de police valides. | ||
headingXsFontWeight | chaîne | 700 |
Épaisseur de police utilisée pour la typographie des très petits titres. Les variables de typographie des titres acceptent uniquement les valeurs d’épaisseur de police valides. | ||
headingXsTextTransform | chaîne | uppercase |
Capitalisation du texte utilisée pour la typographie des très petits titres. Les variables de typographie des titres acceptent uniquement les valeurs de capitalisation du texte valides. | ||
labelMdFontSize | chaîne | 14px |
Taille de police utilisée pour la typographie des libellés moyens. Les variables de typographie des libellés acceptent uniquement les valeurs de taille de police valides. | ||
labelMdFontWeight | chaîne | 400 |
Épaisseur de police utilisée pour la typographie des libellés moyens. Les variables de typographie des libellés acceptent uniquement les valeurs d’épaisseur de police valides. | ||
labelMdTextTransform | chaîne | uppercase |
Capitalisation du texte utilisée pour la typographie des libellés moyens. Les variables de typographie des libellés acceptent uniquement les valeurs de capitalisation du texte valides. | ||
labelSmFontSize | chaîne | 12px |
Taille de police utilisée pour la typographie des petits libellés. Les variables de typographie des libellés acceptent uniquement les valeurs de taille de police valides. | ||
labelSmFontWeight | chaîne | 400 |
Épaisseur de police utilisée pour la typographie des petits libellés. Les variables de typographie des libellés acceptent uniquement les valeurs d’épaisseur de police valides. | ||
labelSmTextTransform | chaîne | uppercase |
Capitalisation du texte utilisée pour la typographie des petits libellés. Les variables de typographie des libellés acceptent uniquement les valeurs de capitalisation du texte valides. | ||
Superpositions
La propriété overlays contrôle s’il faut utiliser une fenêtre de dialogue (également appelée fenêtre modale) ou un volet pour les superpositions. Choisissez la valeur qui convient le mieux à votre site Web.
Nom | Type | Exemple de valeur |
overlays | chaîne | dialog |
Le type de superposition utilisé par les composants intégrés. Les valeurs valides sont dialog (par défaut) et drawer. | ||