Variables pour personnaliser un thème pour Desktop Assistant

Vous pouvez modifier des variables CSS spécifiques pour personnaliser les thèmes de Desktop Assistant.

Tableau 1. Couleur de la bannière

Variable	Description	Ordre
marque-primaire-foncée	La nuance la plus foncée de la couleur primaire de la marque.	1
marque-primaire-foncé	Teinte légèrement plus claire que la teinte la plus foncée de la couleur primaire de la marque.	2
Marque primaire	Couleur de marque principale utilisée dans l’interface utilisateur.	3
marque-primaire-briquet	Teinte plus claire que la couleur principale de la marque.	4

Vous pouvez appliquer un dégradé à la bannière en utilisant les couleurs spécifiées dans l’ordre spécifié.

Tableau 2. Variables de mise en page et de typographie

Variable	Description	Valeur par défaut
arrière-plan secondaire	Couleur d’arrière-plan secondaire utilisée pour les éléments d’interface utilisateur qui ne sont pas au centre de l’attention principale.	#ffffff
arrière-plan primaire	Couleur d’arrière-plan primaire utilisée pour les domaines d’intérêt principaux de l’interface utilisateur.	#f6f6f8
font-size-base	Taille de police de base utilisée pour le texte de l’interface utilisateur.	16px
font-poids-base	font-weight de base utilisée pour le texte du corps de l’interface utilisateur.	400
font-family-sans-serif	Famille de polices sans empattement par défaut utilisée pour le texte de l’interface utilisateur.	Lato
ligne-hauteur-base	Hauteur de ligne de texte par défaut pour l’espacement et la lisibilité.	1.4
taille-police-h5	Taille de police pour le niveau d’en-tête 5.	16px ou valeur de la variable $font-size-base .
taille-police-h4	Taille de police pour le niveau d’en-tête 4.	18px Cette valeur est calculée à l’aide de la fonction ceil () : ceil(($font-size-base * 1.125)). Par exemple, si la valeur font-size-base est de 16 px, la valeur font-size-h4 est de 18 px : ceil((16px * 1.125))//18px.
font-size-h3	Taille de police pour l’en-tête de niveau 3.	20px Cette valeur est calculée à l’aide de la fonction ceil () : ceil(($font-size-base * 1.25)).
taille-police xl	Taille de police extra large généralement utilisée pour les titres ou les grandes étiquettes.	24px Cette valeur est calculée à l’aide de la fonction ceil () : ceil(($font-size-base * 1.5)).
font-size-xs	Taille de police extra petite généralement utilisée pour les étiquettes ou légendes mineures.	12px Cette valeur est calculée à l’aide de la fonction ceil () : ceil(($font-size-base * 0.75)).
font-size-small	Police plus petite que la police de base, utilisée pour le texte secondaire.	14px Cette valeur est calculée à l’aide de la fonction ceil () : ceil(($font-size-base * 0.875)).
en-têtes : famille de police	Famille de polices utilisée pour les en-têtes.	Lato
headings-font-weight	Valeur font-weight utilisée pour les en-têtes.	600

Tableau 3. Variables de couleurs

Variable	Description	Valeur par défaut
texte primaire	Couleur principale utilisée pour le corps de texte.	#181A1F
couleur de texte	Couleur de texte générale pour l’interface utilisateur, qui est identique à text-primary. Définissez une valeur pour cette variable uniquement si vous n’avez pas déjà défini la valeur de text-primary.	$text-primary !default Par exemple, $text-primary : #000000 !default ;
texte secondaire	Couleur utilisée pour le texte de l’interface utilisateur moins visible.	#474D5A
texte tertiaire	Couleur du texte tertiaire tel que le texte d’aide et les annotations.	#656E81
texte désactivé	Couleur de texte atténuée qui est généralement la même que celle du texte tertiaire. Définissez une valeur pour cette variable uniquement si vous n’avez pas déjà défini la valeur pour texte-tertiaire.	$text-tertiaire !par défaut Par exemple, $text-tertiaire : #999999 !default ;
couleur-gris	Couleur gris neutre utilisée pour des éléments tels que les bordures et les arrière-plans.	#C6CBCB
couleur de lien	Couleur des liens hypertexte.	#3c59e7

Tableau 4. Variables de bouton et d’éléments interactifs

Variable	Description	Valeur par défaut
btn-default-color	Couleur par défaut du texte du bouton.	$brand-primaire
btn-primaire-couleur	Couleur du texte des boutons primaires.	$text-blanc
btn-primary-bg	Couleur d’arrière-plan pour les boutons primaires.	$brand-primaire
Marque primaire	Couleur de marque primaire utilisée dans l’interface utilisateur.	#4f52bd !par défaut ;
marque-primaire-foncé	Teinte plus foncée de la couleur principale de la marque.	#333579
marque-primaire-foncée	Teinte la plus foncée de la couleur principale de la marque.	#1D1E46
marque-primaire-briquet	Une teinte plus claire de la couleur principale de la marque.	#8789D2
marque-primaire-leplus léger	Teinte la plus claire de la couleur principale de la marque.	#D1D2EE

Tableau 5. Couleurs d’état et d’alerte

Variable	Description	Valeur par défaut
marque-avertissement-plus foncé	Teinte plus foncée de la couleur de l’état d’avertissement de l’interface utilisateur.	#AFA400
marque-succès-plus foncé	Nuance de couleur plus foncée utilisée pour les états de réussite sur l’interface utilisateur.	#3B7F00
marque-danger-plus foncé	Nuance de couleur plus foncée utilisée pour les états de danger sur l’interface utilisateur.	#CC293C
alerte-avertissement-bg	Couleur d’arrière-plan utilisée pour les alertes et les avertissements.	$state-avertissement-bg
couleur de badge	Couleur du texte des badges sur l’interface utilisateur.	$text-blanc

Tableau 6. Variables de bordure et de mise en page

Variable	Description	Valeur par défaut
bordure primaire	Couleur de bordure primaire utilisée pour les éléments principaux de l’interface utilisateur.	#8790A1
bordure secondaire	Couleur de bordure secondaire utilisée pour les éléments d’interface utilisateur moins visibles.	#ACB2BE
bordure-tertiaire	Couleur de bordure tertiaire utilisée pour les bordures d’arrière-plan.	#DADDE2
largeur-bordure x	Largeur de bordure extra-petite utilisée pour les éléments d’interface utilisateur tels que les lignes fines ou les séparateurs légers.	1px
bordure-style-solide	Définit le style de bordure sur solide.	solide
border-radius-base	Rayon de la bordure de base pour arrondir les angles des éléments d’interface utilisateur.	4px
bordure d’entrée	Style de bordure pour les champs d’entrée.	$border-primaire

Tableau 7. Variables d’espacement

Variable	Description	Valeur par défaut
espace-sp--XXL	Espacement extra-extra-large pour de grands espaces ou des mises en page plus grandes.	32px
espace-sp--xl	Espacement extra-large pour les sections principales.	24px
espace-sp--lg	Grand espacement pour le remplissage ou les marges.	16px
espace-sp--md	Espacement moyen ou standard pour la plupart des éléments d’interface utilisateur.	12px
espace-sp--sm	Petit espacement pour des mises en page compactes.	8px
espace-sp--xs	Espacement extra-petit pour un minimum d’espaces.	4px
espace-sp--xxs	Espacement extra-très petit pour des écarts d’interface utilisateur minimes.	2px
remplissage de l’en-tête du panneau	Remplissage appliqué à la section d’en-tête d’un panneau ou d’une carte.	$sp-espace--xl

Tableau 8. Variables de fontweight, d’ombre et d’effets

Variable	Description	Valeur par défaut
Variable de poids de police
font-weight-lg	Valeur font-weight utilisée pour le texte en gros ou en gras.	600 Cette valeur est calculée à l’aide de la fonction ceil () : ceil(($font-weight-base * 1,5)).
Variables d’ombre et d’effets
sp-panneau-boîte-shadow	Style shadow pour les composants de panneau.	0 4px 8px 0 rgba(23, 40, 52, 0.08)
sp-box-shadow--md	Effets d’ombre de zone moyens pour les composants d’interface utilisateur.