Mécanisme de création de thème hérité
L'ancien mécanisme de création de thème obsolète utilise des variables CSS --GW- pour transmettre les informations de thème aux composants. Il utilise les remplacements de variables des fichiers CSS ajoutés sous les entrées styleOverrides et variableOverrides dans le .themesConfig.json comme définition de thème personnalisé. Ces deux fichiers constituent le mécanisme de définition manuelle des thèmes. Passez à une version de la documentation antérieure à 10.0 pour en savoir plus sur l'ancien processus de création de thème.
Migration vers des jetons de conception
Lorsque vous décidez s'il est temps de migrer vers des jetons de conception, vous devez vous rappeler que :
- Les composants hérités ne peuvent pas être stylisés à l'aide de jetons de conception uniquement, vous devez ajouter une variable personnalisée
--GW-au mappage des jetons de conception. Pour en savoir plus, cliquez ici. - Les nouveaux composants introduits dans la version 10.0.0 ou ultérieure ne doivent pas être stylisés à l'aide de l'ancien mécanisme de création de thème ; seuls les jetons de conception peuvent être utilisés pour définir des remplacements de style si vous voulez éviter les modifications de rupture pendant les mises à niveau, car les variables CSS
--JDS-ne font pas partie de la surface de notre API
Pour commencer à utiliser des jetons de conception dans une application existante dont le style est appliqué à l'ancien mécanisme de création de thème, vous devez :
- Vous assurer que les fichiers de définition des jetons sont ajoutés à votre référentiel
- Mettre à jour votre fichier
.themesConfig.json - Exécuter le processus de transformation des jetons de conception en variables CSS
Pour obtenir des instructions détaillées, cliquez ici. Après ces étapes, votre fichier .themesConfig.json ressemblera à cet exemple :
{
"sampleTheme": {
"name": "sampleTheme",
"variableOverrides": "styles/sampleTheme/variableOverrides.css",
"styleOverrides": "styles/sampleTheme/styleOverrides.css",
"tokens": {
"input-path": "src/tokens/sampleTheme/**/*.json",
"output-file-name": "tokenOverrides.css"
}
}
}
Comme mentionné précédemment, les remplacements de style définis via des variables CSS --GW- seront prioritaires sur les remplacements de styles définis dans des jetons. Ceci est important lorsque vous ne souhaitez pas migrer entièrement votre thème vers des jetons de conception, mais que vous préférez continuer à utiliser les deux mécanismes de création de thème en même temps. Dans ce cas, pour procéder à une stylisation avec un jeton de conception, vous devrez supprimer la variable --GW- correspondante. Par exemple, vous pouvez faire appliquer une famille de polices personnalisée à votre fichier variableOverrides.css :
--GW-FONT-FAMILY: 'Some Custom Font', 'Helvetica', 'Arial', sans-serif;
Dans ce cas, vous devrez configurer le jeton correspondant pour qu'il utilise votre police personnalisée, puis supprimer l'entrée avec --GW-FONT-FAMILY de variableOverrides.css.
{
"jds": {
"font-family": {
"body": {
"type": "fontFamilies",
"value": "'Some Custom Font', 'Helvetica', 'Arial', sans-serif",
"description": "Global font-family for body text"
}
}
}
}
Lorsque vous êtes prêt à effectuer une migration complète vers des jetons de conception et à supprimer tous les restes après l'ancien mécanisme de création de thème, vous devez :
- Remplacer toutes les utilisations des composants hérités, car ils ne peuvent pas être stylisés uniquement avec des jetons de conception
- Supprimer les entrées
variableOverridesetstyleOverridesde.themesConfig.json - Supprimer toutes les utilisations des variables CSS
--GW-dans votre code et les remplacer par des variables CSS personnalisées générées à partir de jetons de conception. Pour en savoir plus, consultez cette page
Nouveaux composants - ajoutés dans les versions 10.0 ou ultérieures
Si vous n'êtes pas prêt à commencer à utiliser des jetons de conception, mais que vous souhaitez utiliser des composants introduits dans la version 10.0 ou ultérieure, vous ne pourrez pas leur appliquer de style à l'aide de variables CSS --GW-. Il existe une solution pour de tels cas : vous pouvez vérifier quelles variables CSS --JDS- sont utilisées dans ces composants et ajouter des remplacements de valeur pour ces variables à variableOverrides.css. Cependant, vous devez vous rappeler que les variables --JDS ne font PAS partie de notre API et que leurs noms peuvent changer à tout moment, ce qui entraîne des modifications importantes entre les versions, même mineures. Il est donc important d'analyser les compromis entre les options disponibles avant de décider d'utiliser cette solution.
Thèmes exposés dans la configuration de base de Jutro
Jutro propose des thèmes prêts à l'emploi dans @jutro/theme et @jutro/theme-styles packages. Ces thèmes peuvent être utilisés lorsque les thèmes définis par Guidewire correspondent à l'ensemble des exigences de définition des thèmes de l'application. Toutefois, au cas où une modification serait nécessaire, vous pouvez définir manuellement un nouveau thème personnalisé à l’aide de l’une des options fournies par Guidewire.
Jutro propose les thèmes suivants :
Enterprise
Il s'agit du thème par défaut. Il est automatiquement appliquée par le package @jutro/theme.
Consumer
10.0.x. Vous devez utiliser des jetons de conception.Thème personnalisé de base du package @jutro/theme-styles. Similaire au thème « Enterprise », mais en moins complet.
Pour l'utiliser dans votre application :
import { consumerThemeConfig } from '@jutro/theme-styles';
...
start(Jutro, {
themeConfig: consumerThemeConfig,
});
Général
10.0.x. Vous devez utiliser des jetons de conception.C'est le thème de chaque version qui a suivi la version Flaine. Il applique des couleurs dédiées aux versions en plus du thème « Enterprise » et fournit un badge de version générique, qui peut être remplacé par un badge dédié pour une version spécifique. Disponible dans @jutro/theme-styles.
Pour l'utiliser dans votre application :
import { generalThemeConfig } from '@jutro/theme-styles';
...
start(Jutro, {
themeConfig: generalThemeConfig,
});
Jetons de conception et micro front-ends
Comme le mécanisme de définition des thèmes du point de vue de l'application n'a pas changé, mais seule la façon dont la définition des thèmes est gérée (désormais par le biais de jetons de conception), vous n'avez rien à faire de différent pour que la définition des thèmes fonctionne avec les micro front-ends.
Vous devez toutefois être conscient de ce qui suit. L'utilisation d'une application shell avec l'ancien mécanisme de création de thème et d'un module micro front-end avec des jetons de conception peut empêcher les composants de recevoir de nouvelles valeurs ou de fonctionner comme prévu. Vous pouvez également rencontrer des problèmes avec le style. Soulevez les problèmes que vous pourriez rencontrer auprès de votre représentant Guidewire et nous vous fournirons des conseils plus détaillés sur la façon d'utiliser l'ancien mécanisme en combinaison avec des jetons de conception dans les modules micro front-end dans les versions ultérieures.