CSS dans Theming
Aperçu général
Cet article fournit la cartographie de la conception de l'application Theming, et explique comment utiliser le CSS si vous souhaitez modifier les couleurs et la typographie pour être différentes de ce qu'un thème fournit.
Cartographie
| CSS Var | Application du thème : Couleurs | Application du thème : Typographie | Application du thème : Boutons |
| --colors_text_main: | Texte principal | ||
| --colors_text_tint: | Couleur du texte | ||
| --colors_text_shade: | Ombre du texte | ||
| --colors_primary_main: | Principal primaire | ||
| --colors_primary_tint: | Teinte principale | ||
| --colors_primary_shade: | Ombre principale | ||
| --colors_secondary_main | Principal secondaire | ||
| --colors_secondary_tint: | Teinte secondaire | ||
| --colors_secondary_shade: | Ombre secondaire | ||
| --colors_background_main: | Arrière-plan principal | ||
| --colors_background_tint: | Teinte d'arrière-plan | ||
| --colors_background_shade: | Ombre d'arrière-plan | ||
| --colors_success_main: | Succès principal | ||
| --colors_success_tint: | Teinte du succès | ||
| --colors_success_shade: | Ombre du succès | ||
| --colors_warning_main: | Avertissement principal | ||
| --colors_warning_tint: | Teinte d'avertissement | ||
| --colors_warning_shade: | Ombre d'avertissement | ||
| --colors_error_main: | Erreur principale | ||
| --colors_error_tint: | Teinte d'erreur | ||
| --colors_error_shade: | Ombre d'erreur | ||
| --colors_info_main: | Info principale | ||
| --colors_info_tint: | Teinte de l'information | ||
| --colors_info_shade: | Ombre de l'information | ||
| --colors_link_main: | Lien principal | ||
| --colors_link_tint: | Teinte du lien | ||
| --colors_link_shade: | Ombre du lien | ||
| --colors_base_black: | Base noire | ||
| --colors_base_white: | Base blanche | ||
| --typography_title1_font_family: | Famille de polices du titre 1 | ||
| --typography_title1_font_size: | Taille de la police du titre 1 | ||
| --typography_title1_font_weight: | Épaisseur de la police du titre 1 | ||
| --typography_title1_font_style: | Style de police du titre 1 | ||
| --typography_title1_text_decoration: | Décoration de la police du titre 1 | ||
| --typography_title2_font_family: | Famille de polices du titre 2 | ||
| --typography_title2_font_size: | Taille de la police du titre 2 | ||
| --typography_title2_font_weight: | Épaisseur de la police du titre 2 | ||
| --typography_title2_font_style: | Style de la police du titre 2 | ||
| --typography_title2_text_decoration: | Décoration de la police du titre 2 | ||
| --typography_body1_font_family: | Famille de polices du corps 1 | ||
| --typography_body1_font_size: | Taille de la police du corps 1 | ||
| --typography_body1_font_weight: | Épaisseur de la police du titre 1 | ||
| --typography_body1_font_style: | Style de police du corps 1 | ||
| --typography_body1_text_decoration: | Décoration de la police du corps 1 | ||
| --typography_body2_font_family: | Famille de polices du corps 2 | ||
| --typography_body2_font_size: | Taille de la police du corps 2 | ||
| --typography_body2_font_weight: | Épaisseur de la police du corps 2 | ||
| --typography_body2_font_style: | Style de police du corps 2 | ||
| --typography_body2_text_decoration: | Décoration de la police du corps 2 | ||
| --typography_tooltip1_font_family: | Famille de polices de l'outil 1 | ||
| --typography_tooltip1_font_size: | Taille de la police de l'outil 1 | ||
| --typography_tooltip1_font_weight: | Épaisseur de la police de l'outil 1 | ||
| --typography_tooltip1_font_style: | Style de police de l'outil 1 | ||
| --typography_tooltip1_text_decoration: | Décoration de la police de l'outil 1 | ||
| --typography_tooltip2_font_family: | Famille de polices de l'outil 2 | ||
| --typography_tooltip2_font_size: | Taille de la police de l'outil 2 | ||
| --typography_tooltip2_font_weight: | Épaisseur de la police de l'outil 2 | ||
| --typography_tooltip2_font_style: | Style de police de l'outil 2 | ||
| --typography_tooltip2_text_decoration: | Décoration de la police de l'outil 2 | ||
| --typography_info_font_family: | Famille de polices de l'information | ||
| --typography_info_font_size: | Taille de la police de l'information | ||
| --typography_info_font_weight: | Épaisseur de la police de l'information | ||
| --typography_info_font_style: | Style de police de l'information | ||
| --typography_info_text_decoration: | Décoration de la police de l'information/ | ||
| --typography_link_font_family: | Famille de polices du lien | ||
| --typography_link_font_size: | Taille de la police du lien | ||
| --typography_link_font_weight: | Épaisseur de la police du lien | ||
| --typography_link_font_style: | Style de police du lien | ||
| --typography_link_text_decoration: | Décoration de la police du lien | ||
| --typography_stepnumber_font_family: | Famille de polices du numéro d'étape | ||
| --typography_stepnumber_font_size: | Taille de la police du numéro d'étape | ||
| --typography_stepnumber_font_weight: | Épaisseur de la police du numéro d'étape | ||
| --typography_stepnumber_font_style: | Style de polices du numéro d'étape | ||
| --typography_stepnumber_text_decoration: | Décoration de police du numéro d'étape | ||
| --buttons_primary_default_border_width: | Largeur de la bordure principale par défaut des boutons | ||
| --buttons_primary_hover_border_width: | Largeur de la bordure principale du survol des boutons | ||
| --buttons_primary_default_text_color: | Couleur du texte principal par défaut des boutons | ||
| --buttons_primary_default_fill_color: | Couleur de remplissage principale par défaut des boutons | ||
| --buttons_primary_default_border_color1: | Couleur 1 de la bordure principale par défaut des boutons | ||
| --buttons_primary_default_corner_radius: | Rayon du coin principal par défaut des boutons | ||
| --buttons_primary_hover_text_color: | Couleur du texte principal du survol des boutons | ||
| --buttons_primary_hover_fill_color: | Couleur de remplissage principale du survol des boutons | ||
| --buttons_primary_hover_corner_radius: | Rayon du coin principal du survol des boutons | ||
| --buttons_primary_clicked_text_color: | Couleur du texte principale cliquée des boutons | ||
| --buttons_primary_clicked_fill_color: | Couleur de remplissage principale cliquée des boutons | ||
| --buttons_primary_clicked_border_width: | Largeur de la bordure principale cliquée des boutons | ||
| --buttons_primary_clicked_corner_radius: | Rayon du coin principal cliqué des boutons | ||
| --buttons_secondary_default_text_color: | Couleur du texte secondaire par défaut des boutons | ||
| --buttons_secondary_default_border_color: | Couleur de la bordure secondaire par défaut des boutons | ||
| --buttons_secondary_default_border_width: | Largeur de la bordure secondaire par défaut des boutons | ||
| --buttons_secondary_default_corner_radius: | Rayon du coin secondaire par défaut boutons | ||
| --buttons_secondary_hover_text_color: | Couleur du texte secondaire du survol des boutons | ||
| --buttons_secondary_hover_border_color: | Couleur de la bordure secondaire du survol des boutons | ||
| --buttons_secondary_hover_border_width: | Largeur de la bordure secondaire du survol des boutons | ||
| --buttons_secondary_hover_corner_radius: | Rayon du coin secondaire du survol des boutons | ||
| --buttons_secondary_clicked_text_color: | Couleur du texte secondaire cliqué des boutons | ||
| --buttons_secondary_clicked_border_color: | Couleur de la bordure secondaire cliquée des boutons | ||
| --buttons_secondary_clicked_border_width: | Largeur de la bordure secondaire cliquée des boutons | ||
| --buttons_secondary_clicked_corner_radius: | Rayon du coin secondaire cliqué des boutons | ||
| --buttons_textprimary_default_border_width: | Largeur de la bordure du texte principal par défaut des boutons | ||
| --buttons_textprimary_default_text_color: | Couleur du texte principal par défaut des boutons | ||
| --buttons_textprimary_default_corner_radius: | Rayon du coin du texte principal par défaut des boutons | ||
| --buttons_textprimary_hover_text_color: | Couleur du texte principal du survol des boutons | ||
| --buttons_textprimary_hover_border_color: | Couleur de la bordure du texte principal du survol des boutons | ||
| --buttons_textprimary_hover_border_width: | Largeur de la bordure du texte principal du survol des boutons | ||
| --buttons_textprimary_hover_corner_radius: | Rayon du coin du texte principal du survol des boutons | ||
| --buttons_textprimary_clicked_text_color: | Couleur du texte principale cliquée des boutons | ||
| --buttons_textprimary_clicked_border_color: | Couleur de la bordure du texte principal cliqué des boutons | ||
| --buttons_textprimary_clicked_border_width: | Largeur de la bordure du texte principal cliqué des boutons | ||
| --buttons_textprimary_clicked_corner_radius: | Rayon du coin du texte principal cliqué des boutons | ||
| --buttons_textsecondary_default_text_color: | Couleur du texte secondaire par défaut des boutons | ||
| --buttons_textsecondary_default_border_width: | Largeur de la bordure du texte secondaire par défaut des boutons | ||
| --buttons_textsecondary_default_corner_radius: | Rayon du coin du texte secondaire par défaut des boutons | ||
| --buttons_textsecondary_hover_text_color: | Couleur du texte secondaire du survol des boutons | ||
| --buttons_textsecondary_hover_border_color: | Couleur de la bordure du texte secondaire du survol des boutons | ||
| --buttons_textsecondary_hover_border_width: | Largeur de la bordure du texte secondaire du survol des boutons | ||
| --buttons_textsecondary_hover_corner_radius: | Rayon du coin du texte secondaire du survol des boutons | ||
| --buttons_textsecondary_clicked_text_color: | Couleur du texte secondaire cliqué des boutons | ||
| --buttons_textsecondary_clicked_fill_color: | Couleur de remplissage du texte secondaire cliqué des boutons | ||
| --buttons_textsecondary_clicked_border_color: | Couleur de la bordure du texte secondaire cliqué des boutons | ||
| --buttons_textsecondary_clicked_border_width: | Largeur de la bordure du texte secondaire cliqué des boutons | ||
| --buttons_textsecondary_clicked_corner_radius: | Rayon du coin du texte secondaire cliqué des boutons | ||
| --buttons_closebutton_default_text_color: | Couleur du texte du bouton fermer par défaut des boutons | ||
| --buttons_closebutton_default_border_color: | Couleur de la bordure du bouton fermer par défaut des boutons | ||
| --buttons_closebutton_default_border_width: | Largeur de la bordure du bouton fermer par défaut des boutons | ||
| --buttons_closebutton_default_corner_radius: | Rayon du coin du bouton fermer par défaut des boutons | ||
| --buttons_closebutton_hover_text_color: | Couleur du texte du bouton fermer du survol des boutons | ||
| --buttons_closebutton_hover_border_color: | Couleur de la bordure du bouton fermer du survol des boutons | ||
| --buttons_closebutton_hover_border_width: | Largeur de la bordure du bouton fermer du survol des boutons | ||
| --buttons_closebutton_hover_corner_radius: | Rayon du coin du bouton fermer du survol des boutons | ||
| --buttons_closebutton_clicked_text_color: | Couleur du texte du bouton fermer cliqué des boutons | ||
| --buttons_closebutton_clicked_border_color: | Couleur de la bordure du bouton fermer cliqué des boutons | ||
| --buttons_closebutton_clicked_border_width: | Largeur de la bordure du bouton fermer cliqué des boutons | ||
| --buttons_closebutton_clicked_corner_radius: | Rayon du coin du bouton fermer cliqué des boutons | ||
| --buttons_success_default_text_color: | Couleur du texte du succès par défaut des boutons | ||
| --buttons_success_default_fill_color: | Couleur de remplissage du succès par défaut des boutons | ||
| --buttons_success_default_border_width: | Largeur de la bordure du succès par défaut des boutons | ||
| --buttons_success_default_corner_radius: | Rayon du coin du succès par défaut des boutons | ||
| --buttons_success_hover_text_color: | Couleur du texte du succès du survol des boutons | ||
| --buttons_success_hover_fill_color: | Couleur de remplissage du succès du survol des boutons | ||
| --buttons_success_hover_border_width: | Largeur de la bordure du succès du survol des boutons | ||
| --buttons_success_hover_corner_radius: | Rayon du coin du succès du survol des boutons | ||
| --buttons_success_clicked_text_color: | Couleur du texte du succès cliqué des boutons | ||
| --buttons_success_clicked_fill_color: | Couleur de remplissage du succès cliqué des boutons | ||
| --buttons_success_clicked_border_width: | Largeur de la bordure du succès cliqué des boutons | ||
| --buttons_success_clicked_corner_radius: | Rayon du coin du succès cliqué des boutons | ||
| --buttons_warning_default_text_color: | Couleur du texte de l'avertissement par défaut des boutons | ||
| --buttons_warning_default_fill_color: | Couleur de remplissage de l'avertissement par défaut des boutons | ||
| --buttons_warning_default_border_width: | Largeur de la bordure de l'avertissement par défaut des boutons | ||
| --buttons_warning_default_corner_radius: | Rayon du coin de l'avertissement par défaut des boutons | ||
| --buttons_warning_hover_text_color: | Couleur du texte de l'avertissement du survol des boutons | ||
| --buttons_warning_hover_fill_color: | Couleur de remplissage de l'avertissement du survol des boutons | ||
| --buttons_warning_hover_border_width: | Largeur de la bordure de l'avertissement du survol des boutons | ||
| --buttons_warning_hover_corner_radius: | Rayon du coin de l'avertissement du survol des boutons | ||
| --buttons_warning_clicked_text_color: | Couleur du texte de l'avertissement cliqué des boutons | ||
| --buttons_warning_clicked_fill_color: | Couleur de remplissage de l'avertissement cliqué des boutons | ||
| --buttons_warning_clicked_border_width: | Largeur de la bordure de l'avertissement cliqué des boutons | ||
| --buttons_warning_clicked_corner_radius: | Rayon du coin de l'avertissement cliqué des boutons | ||
| --buttons_error_default_text_color: | Couleur du texte d'erreur par défaut des boutons | ||
| --buttons_error_default_fill_color: | Couleur de remplissage d'erreur par défaut des boutons | ||
| --buttons_error_default_border_width: | Largeur de la bordure d'erreur par défaut des boutons | ||
| --buttons_error_default_corner_radius: | Rayon du coin d'erreur par défaut des boutons | ||
| --buttons_error_hover_text_color: | Couleur du texte d'erreur du survol des boutons | ||
| --buttons_error_hover_fill_color: | Couleur de remplissage d'erreur du survol des boutons | ||
| --buttons_error_hover_border_width: | Largeur de la bordure d'erreur du survol des boutons | ||
| --buttons_error_hover_corner_radius: | Rayon du coin d'erreur du survol des boutons | ||
| --buttons_error_clicked_text_color: | Couleur du texte d'erreur cliqué des boutons | ||
| --buttons_error_clicked_fill_color: | Couleur de remplissage d'erreur cliqué des boutons | ||
| --buttons_error_clicked_border_width: | Largeur de la bordure d'erreur cliqué des boutons | ||
| --buttons_error_clicked_corner_radius: | Rayon du coin d'erreur cliqué des boutons | ||
| --buttons_info_default_text_color: | Couleur du texte de l'information par défaut des boutons | ||
| --buttons_info_default_fill_color: | Couleur de remplissage de l'information par défaut des boutons | ||
| --buttons_info_default_border_width: | Largeur de la bordure de l'information par défaut des boutons | ||
| --buttons_info_default_corner_radius: | Rayon du coin de l'information par défaut des boutons | ||
| --buttons_info_hover_text_color: | Couleur du texte de l'information du survol des boutons | ||
| --buttons_info_hover_fill_color: | Couleur de remplissage de l'information du survol des boutons | ||
| --buttons_info_hover_border_width: | Largeur de la bordure de l'information du survol des boutons | ||
| --buttons_info_hover_corner_radius: | Rayon du coin de l'information du survol des boutons | ||
| --buttons_info_clicked_text_color: | Couleur du texte de l'information cliqué des boutons | ||
| --buttons_info_clicked_fill_color: | Couleur de remplissage de l'information cliqué des boutons | ||
| --buttons_info_clicked_border_width: | Largeur de la bordure de l'information cliqué des boutons | ||
| --buttons_info_clicked_corner_radius: | Rayon du coin de l'information cliqué des boutons |
Cet article a-t-il été utile?
Oui
Non
Merci pour votre avis!