Ajouter un thème de point d’arrêt

Dans cette mission d’apprentissage, vous allez apprendre à gérer les différences de thème en fonction des points d’arrêt dans une application Jutro à l’aide de jetons de conception.

Qu’est-ce que la création de thèmes de point d’arrêt ?

La création de thèmes de point d’arrêt dans les applications React font référence à la pratique consistant à appliquer différents styles, mises en page ou même configurations de thèmes entiers en fonction des points d’arrêt de la taille de l’écran.

L’utilisation de points d’arrêt pour ajuster de manière réactive le thème CSS de votre application présente les avantages suivants :

• Expérience utilisateur optimisée : différentes tailles d’écran peuvent avoir des modèles d’expérience utilisateur complètement différents.
• Cohérence de la marque : conservez l’identité de la marque tout en vous adaptant aux contraintes de l’appareil d’un utilisateur.
• Accessibilité : des cibles tactiles plus grandes sur mobile ou des schémas de navigation entièrement différents.

Jutro ne dispose pas d’un mécanisme intégré pour la création de thèmes de point d’arrêt. Pour ajouter cette fonctionnalité à une application, vous devez utiliser des mécanismes CSS intégrés, tels que les requêtes multimédias.

Activité pratique : Ajouter des thèmes de point d’arrêt à l’application Sandbox d’apprentissage

Dans cet exercice, vous utiliserez des requêtes de média CSS pour déterminer quel ensemble de jetons de conception est actif en fonction de la largeur de la fenêtre d’affichage et s’il est affiché sur un périphérique à l’écran. Cet exemple couvre deux cas de figure :

• screen and (min-width: 769px) : actif lors de l’affichage sur un périphérique à écran et si la largeur est d’au moins 769 pixels.
• screen and (max-width: 768px) : actif lors de l’affichage sur un périphérique à écran et si la largeur est inférieure ou égale à 768 pixels.

Celui-ci est divisé en deux parties. Tout d’abord, vous définissez les thèmes que vous souhaitez comme vous le feriez normalement et utilisez les CLI Jutro pour générer les fichiers CLI associés. Lorsque les fichiers CSS sont générés, vous définissez manuellement un thème combiné qui effectue l'importation à partir des fichiers CSS générés et le définissez comme thème actif.

1. Définissez les jetons de conception pour chaque thème

La première partie du processus consiste à suivre les mêmes étapes pour définir de nouveaux thèmes à partir de la mission d’apprentissage précédente.

1. Créez deux dossiers de jetons dans votre dossier src/assets/styles/tokens. Nommez l’un Learning-Desktop pour les jetons de bureau et nommez l’autre Learning-Tablet pour les jetons de tablette.

2. Dans chacun de ces dossiers, créez un fichier JSON avec les jetons à appliquer lorsque leur thème associé est actif. Nommez chacun d’entre eux à l’aide d’une dénomination spécifique au répertoire, par exemple learning-desktop-tokens.json et learning-tablet-tokens.json.

src/assets/styles/tokens/Learning-Desktop/learning-desktop-tokens.json

{
  "jds": {
    "color": {
      "background": {
        "page": {
          "type": "color",
          "value": "#ffffff",
          "description": "Palette color White."
        }
      }
    }
  }
}

src/assets/styles/tokens/Learning-Tablet/learning-tablet-tokens.json

{
"jds": {
  "color": {
    "background": {
      "page": {
        "type": "color",
        "value": "#000000",
        "description": "Palette color Black."
      }
    }
  }
}
}

3. Ajoutez les nouveaux ensembles de jetons au fichier .themesConfig.json et nommez-les LearningDesktop et LearningTablet :

.themesConfig.json

  {
  "LearningTablet": {
    "name": "LearningTablet",
    "tokens": {
      "input-path": "src/assets/styles/tokens/Learning-Tablet/*.json",
      "output-file-name": "styles/Learning-Tablet/learning-tablet-design-tokens.css"
    }
  },
  "LearningDesktop": {
    "name": "LearningDesktop",
    "tokens": {
      "input-path": "src/assets/styles/tokens/Learning-Desktop/*.json",
      "output-file-name": "styles/Learning/learning-desktop-design-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. Exécutez la commande jutro generate:themes pour générer des fichiers CSS basés sur le fichier de jeton défini à l’étape 1. En cas de réussite, la sortie suivante s’affiche et les nouveaux fichiers sont créés au niveau des chemins indiqués.

> 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-Tablet/learning-tablet-design-tokens.css

css
✔︎ src/assets/styles/Learning-Desktop/learning-desktop-design-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

2. Créez un thème combiné

L’étape suivante consiste à créer manuellement un fichier CSS qui importe à la fois les thèmes et définit celui à appliquer en fonction des requêtes média CSS.

1. Créez un nouveau dossier dans le répertoire styles nommé Combined-Themes.

  jutro-sandbox-app
    ├── src
    │   └── assets
    │       └── styles
    |           ├── Combined-Themes
    |           ├── Learning-Desktop
    |           |   └── learning-desktop-design-tokens.css
    |           └── Learning-Tablet
    |               └── learning-tablet-tokens.css

2. Créez manuellement un fichier dans le répertoire Combined-Themes nommé combined-theme-design-tokens.css avec le contenu suivant :

src/assets/styles/Combined-Themes/combined-theme-design-tokens.css

@import url('../Learning-Desktop/learning-desktop-design-tokens.css') screen and
  (min-width: 769px);
@import url('../Learning-Tablet/learning-tablet-design-tokens.css') screen and
    (max-width: 768px);

3. Ajoutez l’ensemble de jetons combinés au fichier .themesConfig.json en ajoutant un thème où variableOverrides est le chemin d’accès au fichier CSS que vous avez créé manuellement :

.themesConfig.json

  {
    "CombinedTheme": {
    "name": "CombinedTheme",
    "variableOverrides": "styles/Combined-Theme/combined-theme-design-tokens.css"
    },
    "LearningTablet": {
      "name": "LearningTablet",
      "tokens": {
        "input-path": "src/assets/styles/tokens/Learning-Tablet/*.json",
        "output-file-name": "styles/Learning-Tablet/learning-tablet-design-tokens.css"
      }
    },
    "Learning": {
      "name": "LearningDesktop",
      "tokens": {
        "input-path": "src/assets/styles/tokens/Learning-Desktop/*.json",
        "output-file-name": "styles/Learning/learning-desktop-design-tokens.css"
      }
    },
    ...

Note: Vous n’avez pas besoin de réexécuter jutro generate:themes par la suite comme dans la section précédente, car vous avez créé manuellement le fichier CSS que ce thème utilise à l’étape 2.

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

startApp.ts

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

5. Démarrez le site à l’aide de la commande npm start dans votre terminal, et diminuez la taille de votre fenêtre. L’arrière-plan devient noir lorsque la largeur de l’écran est inférieure à 769 pixels.