Agregar un tema mediante tokens de diseño

En esta misión de aprendizaje, aprenderá a agregar un tema a una aplicación de Jutro usando tokens de diseño.

¿Qué son los tokens de diseño?

Los tokens de diseño se utilizan para organizar las decisiones de diseño. Las instrucciones de formato CSS, como colores, fuentes y similares, se asignan a variables que puede utilizar para modificar todos los componentes de página afectados.

Obtendrá más información sobre los tokens de diseño en la página de información general sobre tokens de diseño y encontrará una lista de tokens de diseño importantes en la página de la lista de tokens de diseño.

Actividad: usar tokens de diseño para crear un nuevo tema

En este ejercicio, creará un tema de token de diseño que hará que el encabezado principal quede subrayado con una fuente monoespaciada.

1. En su carpeta src/assets/styles/tokens, cree una nueva carpeta llamada Learning-Font.

2. En la nueva carpeta Learning-Font, cree un archivo JSON llamado learning-font-tokens.json con los tokens que se aplicarán cuando este tema esté activo. Este archivo establece el token jds.font.heading.1.font-family en monospace y el token jds.font.heading.1.text-decoration en underline.

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

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

3. Agregue el nuevo conjunto de tokens al archivo .themesConfig.json y asígnele el nombre 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. Abra un terminal en la carpeta jutro-sandbox-app y ejecute el comando jutro generate:themes para generar archivos CSS basados en el archivo de token definido en el paso 2. Si lo realiza correctamente, verá el siguiente resultado y habrá un nuevo archivo creado en la ruta indicada.

> 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: Para obtener más detalles sobre el uso de la CLI de Jutro, consulte la misión de aprendizaje sobre la CLI de Jutro.

Para obtener más detalles sobre el comando generate:themes, consulte la documentación de la CLI.

5. En el archivo startApp.ts del proyecto raíz, actualice el argumento themeConfig para usar LearningFont.

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

6. Inicie el sitio de manera local usando el comando npm start en su terminal, y verá que los encabezados ahora están subrayados y usan una fuente monoespaciada.