Ajouter un thème à l’aide de jetons de conception

Dans cette mission d’apprentissage, vous allez apprendre à ajouter un thème à une application Jutro à l’aide de jetons de conception.

Que sont les jetons de conception ?

Les jetons de conception sont utilisés pour organiser les décisions de conception. Les instructions de mise en forme CSS telles que les couleurs, les polices, etc., sont attribuées à des variables que vous pouvez utiliser pour modifier tous les composants de page concernés.

Vous pouvez en savoir plus sur les jetons de conception sur la page de présentation des jetons de conception et trouver une liste des jetons de conception importants sur la page de liste des jetons de conception.

Activité pratique : utiliser des jetons de conception pour créer un nouveau thème

Dans cet exercice, vous allez créer un thème de jeton de conception qui modifie le titre principal à souligner avec une police à espacement fixe.

1. Créez un nouveau dossier dans votre dossier src/assets/styles/tokens nommé Learning-Font.

2. Dans le nouveau dossier Learning-Font, créez un fichier JSON nommé learning-font-tokens.json avec les jetons à appliquer lorsque ce thème est actif. Ce fichier définit le jeton jds.font.heading.1.font-family sur monospace et le jeton jds.font.heading.1.text-decoration sur underline.

src/assets/styles/tokens/Learning-Font/learning-font-tokens.json

{
  "jds": {
    "font": {
      "heading": {
        "1": {
          "font-family":{
            "value": "monospace"
          },
          "text-decoration": {
            "value": "underline"
          }
        }
      }
    }
  }
}

3. Ajoutez le nouvel ensemble de jetons au fichier .themesConfig.json et nommez-le LearningFont :

.themesConfig.json

{
"LearningFont": {
  "name": "LearningFont",
  "tokens": {
    "input-path": "src/assets/styles/tokens/Learning-Font/*.json",
    "output-file-name": "styles/Learning-Font/learning-font-tokens.css"
  }
},
"endlessSky": {
  "name": "endlessSky",
  "variableOverrides": "styles/endlessSky/variableOverrides.css",
  "styleOverrides": "styles/endlessSky/styleOverrides.css",
  "baseTheme": "Consumer"
},
"DSB": {
  "name": "DSB",
  "variableOverrides": "styles/dsbTheme/variableOverrides.css",
  "styleOverrides": "styles/dsbTheme/styleOverrides.css",
  "baseTheme": "Consumer"
},
"RedFarm": {
  "name": "RedFarm",
  "baseTheme": "Consumer",
  "variableOverrides": "styles/redFarmTheme/variableOverrides.css",
  "styleOverrides": "styles/redFarmTheme/styleOverrides.css"
},
"sampleTheme": {
  "name": "sampleTheme",
  "baseTheme": "Enterprise",
  "variableOverrides": "styles/sampleTheme/variableOverrides.css",
  "styleOverrides": "styles/sampleTheme/styleOverrides.css"
}
}

4. Ouvrez un terminal dans le dossier jutro-sandbox-app et exécutez la commande jutro generate:themes pour générer des fichiers CSS en fonction du fichier de jeton défini à l’étape 2. En cas de réussite, la sortie suivante s’affiche et un nouveau fichier est créé au niveau du chemin indiqué.

> npm run jutro generate:themes
  _____           __                   
/\___ \         /\ \__                
\/__/\ \  __  __\ \ ,_\  _ __   ___   
  _\ \ \/\ \/\ \\ \ \/ /\`'__\/ __`\ 
  /\ \_\ \ \ \_\ \\ \ \_\ \ \//\ \L\ \
  \ \____/\ \____/ \ \__\\ \_\\ \____/
  \/___/  \/___/   \/__/ \/_/ \/___/ 
                                      
                                      
[dotenv@17.2.3] injecting env (8) from .env -- tip: ⚙️  write to custom object with { processEnv: myObject }

css
✔︎ src/assets/styles/Learning-Font/learning-font-tokens.css

Note: Pour en savoir plus sur l’utilisation de la CLI Jutro, reportez-vous à la mission d’apprentissage CLI Jutro.

Pour en savoir plus sur la commande generate:themes, reportez-vous à la documentation CLI

5. Dans le fichier startApp.ts de votre projet racine, mettez à jour l’argument themeConfig pour utiliser LearningFont.

start(Jutro, {
      ...
      themeConfig: themesConfig.LearningFont,
  });

6. Démarrez le site localement à l’aide de la commande npm start dans votre terminal, et vous verrez que les titres sont maintenant soulignés et utilisent une police à espacement fixe.