Saltar al contenido principal

Cómo agregar tematización de punto de interrupción

En esta misión de aprendizaje, aprenderá a manejar diferencias de tema basadas en puntos de interrupción en una aplicación de Jutro usando tokens de diseño.

¿Qué es la tematización de puntos de interrupción?​

En las aplicaciones de React, la tematización de puntos de interrupción es la práctica de aplicar diferentes estilos, disposiciones y composiciones o incluso configuraciones de temas completos en función de los puntos de interrupción del tamaño de la pantalla.

El uso de puntos de interrupción para ajustar de manera reactiva el tema de CSS de su aplicación tiene las siguientes ventajas:

  • Experiencia del usuario optimizada. Los diferentes tamaños de pantalla pueden tener patrones de experiencia de usuario completamente diferentes.
  • Coherencia de la marca. Mantenga la identidad de la marca mientras se adapta a las limitaciones del dispositivo del usuario.
  • Accesibilidad. Objetivos táctiles más grandes en dispositivos móviles o patrones de navegación completamente diferentes.

Jutro no tiene un mecanismo incorporado para la tematización de puntos de interrupción. Para agregar esta funcionalidad a una aplicación, debe usar mecanismos CSS integrados, como consultas de medios.

Actividad: agregar tematización de puntos de interrupción a la aplicación de espacio aislado de aprendizaje​

En este ejercicio, utilizará consultas de medios CSS para determinar qué conjunto de tokens de diseño está activo en función del ancho de la ventana gráfica y de si se está viendo en un dispositivo con pantalla. Este ejemplo abarca dos casos:

  • screen and (min-width: 769px). Activo cuando se visualiza en un dispositivo con pantalla y si el ancho es de al menos 769 píxeles.
  • screen and (max-width: 768px). Activo cuando se visualiza en un dispositivo con pantalla y si el ancho es de 768 píxeles o menos.

Esto se divide en dos partes. Primero, debe definir los temas que desea como lo haría normalmente y usar la CLI de Jutro para generar sus archivos de CLI asociados. Cuando los archivos de CSS estén generados, debe definir manualmente un tema combinado que se importa desde los archivos CSS generados y configurarlo como su tema activo.

1. Definición de los tokens de diseño para cada tema​

La primera parte del proceso es seguir los mismos pasos para definir nuevos temas de la misión de aprendizaje anterior.

  1. Cree dos carpetas de token en su carpeta src/assets/styles/tokens. Asigne el nombre Learning-Desktop a una para los tokens de escritorio y a la otra Learning-Tablet para los tokens de tablets.

  2. En cada una de estas carpetas, cree un archivo JSON con los tokens que se aplicarán cuando su tema asociado esté activo. Asigne un nombre a cada una usando la nomenclatura específica del directorio, como learning-desktop-tokens.json y 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."
      }
    }
  }
}
}
  1. Add the new token sets to the .themesConfig.json file. Name them LearningDesktop and 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"
}
}
  1. Abra un terminal en la carpeta jutro-sandbox-app. Ejecute el comando jutro generate:themes para generar archivos CSS basados en el archivo de token definido en el paso 1. Si lo realiza correctamente, verá el siguiente resultado y archivos nuevos creados en las rutas indicadas.
> 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: 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.

2. Crear un tema combinado​

El siguiente paso es crear manualmente un archivo CSS que importe los dos temas y establezca cuál se aplicará en función de las consultas de medios CSS.

  1. Cree una nueva carpeta en el directorio styles denominado Combined-Themes.
  jutro-sandbox-app
    ├── src
    │   └── assets
    │       └── styles
    |           ├── Combined-Themes
    |           ├── Learning-Desktop
    |           |   └── learning-desktop-design-tokens.css
    |           └── Learning-Tablet
    |               └── learning-tablet-tokens.css
  1. Genere manualmente un archivo en el directorio Combined-Themes denominado combined-theme-design-tokens.css con el siguiente contenido:
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);
  1. Agregue el conjunto de tokens combinados al archivo .themesConfig.json agregando un tema en el que variableOverrides sea la ruta a su archivo CSS creado manualmente:
.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: No es necesario volver a ejecutar jutro generate:themes después, como en la sección anterior, porque en el paso 2 creó manualmente el CSS que este tema utiliza.
  1. En el archivo startApp.ts del proyecto raíz, actualice el argumento themeConfig para usar CombinedTheme:
startApp.ts
start(Jutro, {
      ...
      themeConfig: themesConfig.CombinedTheme,
  });
  1. Inicie el sitio usando el comando npm start en su terminal y disminuya el tamaño de la ventana. El fondo se vuelve negro cuando la pantalla es más estrecha que 769 píxeles.

Ejemplo de cambio de tema