Theme mit Design-Token hinzufügen

In dieser Lernmission erfahren Sie, wie Sie einer Jutro-Anwendung mithilfe von Design-Token ein Theme hinzufügen.

Was sind Design-Token?

Design-Token werden verwendet, um Designentscheidungen zu organisieren. CSS-Formatierungsanweisungen wie Farben, Schriftarten usw. werden Variablen zugewiesen, die Sie zum Ändern aller betroffenen Seitenkomponenten verwenden können.

Weitere Informationen zu Design-Token finden Sie auf der Seite Überblick über Design-Token. Eine Liste wichtiger Design-Token finden Sie auf der Listenseite Design-Tokens.

Los geht's: Verwenden Sie Design-Token, um ein neues Theme zu erstellen

In dieser Übung erstellen Sie ein Design-Token-Theme, das die zu unterstreichende Hauptüberschrift durch eine Monospace-Schrift ändert.

1. Erstellen Sie im Ordner einen neuen Ordner src/assets/styles/tokens mit dem Namen Learning-Font.

2. Erstellen Sie im neuen Learning-Font Ordner eine JSON-Datei mit dem Namen learning-font-tokens.json mit den Token, die angewendet werden sollen, wenn dieses Theme aktiv ist. Mit dieser Datei wird das Token jds.font.heading.1.font-family auf monospace und das Token jds.font.heading.1.text-decoration auf underline festgelegt.

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

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

3. Fügen Sie der Datei .themesConfig.json den neuen Token-Satz hinzu und nennen Sie ihn 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. Öffnen Sie ein Terminal in dem Ordner jutro-sandbox-app und führen Sie den Befehl jutro generate:themes zum Generieren von CSS-Dateien basierend auf der in Schritt 2 definierten Token-Datei aus. Bei erfolgreichem Abruf wird die folgende Ausgabe angezeigt und unter dem angegebenen Pfad wird eine neue Datei erstellt.

> 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: Weitere Informationen zur Verwendung des Jutro CLI finden Sie in der Lernmission zum Jutro CLI.

Weitere Einzelheiten zum Befehl generate:themes finden Sie in der CLI-Dokumentation

5. Aktualisieren Sie in der Datei startApp.ts in Ihrem Projektstamm das Argument themeConfig, um LearningFont zu verwenden.

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

6. Starten Sie die Website lokal mit dem Befehl npm start in Ihrem Terminal, und Sie werden sehen, dass die Überschriften jetzt unterstrichen sind und eine Monospace-Schrift verwenden.