Saltar al contenido principal

Mecanismo de tematización heredado

Note: Los tokens de diseño son el mecanismo admitido para la definición de temas. Para obtener más detalles, consulte los siguientes documentos:

El antiguo mecanismo de tematización obsoleto utiliza variables CSS --GW- para pasar la información del tema a los componentes. Utiliza las invalidaciones de variables de los archivos CSS agregadas en las entradas styleOverrides y variableOverrides en .themesConfig.json como la definición de tema personalizado. Estos dos archivos son el mecanismo para definir manualmente la tematización. Consulte una versión de la documentación anterior a la 10.0 para obtener más información sobre la tematización antiguo.

Migración a tokens de diseño​

A la hora de decidir si es el momento de migrar a los tokens de diseño, debe recordar lo siguiente:

  1. Los componentes heredados no se pueden diseñar solo con tokens de diseño, deberá agregar una variable personalizada --GW- para diseñar la asignación de tokens. Encontrar más información aquí.
  2. Los nuevos componentes introducidos en la versión 10.0.0 o posterior no deben diseñarse utilizando un mecanismo de tematización antiguo; solo se pueden usar tokens de diseño para definir invalidaciones de estilo si desea evitar cambios importantes durante las actualizaciones, ya que las variables CSS --JDS- no forman parte de nuestra superficie de la API.

Para comenzar a usar tokens de diseño en una aplicación ya existente que tiene un estilo con un mecanismo de tematización antiguo, deberá hacer esto:

  1. Asegurarse de que los archivos de definición de tokens se hayan agregado al repositorio.
  2. Actualizar su archivo .themesConfig.json.
  3. Ejecutar el proceso de transformación de tokens de diseño a variables CSS.

Encontrará instrucciones detalladas aquí. Después de estos pasos, su .themesConfig.json será similar al de este ejemplo:

{
  "sampleTheme": {
    "name": "sampleTheme",
    "variableOverrides": "styles/sampleTheme/variableOverrides.css",
    "styleOverrides": "styles/sampleTheme/styleOverrides.css",
    "tokens": {
      "input-path": "src/tokens/sampleTheme/**/*.json",
      "output-file-name": "tokenOverrides.css"
    }
  }
}

Como se mencionó antes, las invalidaciones del estilo definidas mediante las variables CSS --GW- tendrán prioridad sobre las invalidaciones del estilo definidas en los tokens. Esto es importante cuando no desea migrar el tema completamente para diseñar tokens, sino que prefiere seguir usando ambos mecanismos de tematización al mismo tiempo. En esta situación, para definir el estilo de algo con un token de diseño, deberá eliminar la variable --GW- correspondiente. Por ejemplo, es posible que tenga una familia de fuentes personalizada aplicada en su archivo variableOverrides.css:

--GW-FONT-FAMILY: 'Some Custom Font', 'Helvetica', 'Arial', sans-serif;

En este caso, deberá configurar el token correspondiente para usar su fuente personalizada y, luego, eliminar la entrada con --GW-FONT-FAMILY desde variableOverrides.css.

{
  "jds": {
    "font-family": {
      "body": {
        "type": "fontFamilies",
        "value": "'Some Custom Font', 'Helvetica', 'Arial', sans-serif",
        "description": "Global font-family for body text"
      }
    }
  }
}

Cuando desee migrar por completo a los tokens de diseño y eliminar todos los vestigios después del mecanismo de tematización anterior, debe hacer lo siguiente:

  1. Reemplace todos los usos de componentes heredados, ya que no se les puede diseñar el aspecto visual únicamente con tokens de diseño.
  2. Elimine las entradas variableOverrides y styleOverrides desde .themesConfig.json.
  3. Elimine todos los usos de variables CSS --GW- en su código y reemplácelos con variables CSS personalizadas generadas a partir de tokens de diseño. Encontrará más información al respecto en esta página.

Nuevos componentes: agregados en la versión 10.0 o posteriores​

Si aún no desea comenzar a usar tokens de diseño, pero quiere utilizar componentes introducidos en la versión 10.0 o posteriores, no podrá definirles el estilo mediante variables CSS --GW-. Existe una solución temporal para estos casos: puede verificar qué variables CSS --JDS- se utilizan en estos componentes y agregar invalidaciones de valor para estas variables a variableOverrides.css. Sin embargo, debe recordar que las variables --JDS NO forman parte de nuestra API y sus nombres pueden cambiar en cualquier momento, lo que lleva a cambios importantes entre versiones, incluso si son de menor importancia. Por eso, es importante analizar las ventajas y desventajas de las opciones disponibles antes de decidirse a utilizar esta solución.

Qué temas se exponen en la configuración base de Jutro​

Jutro proporciona algunos temas listos para usar en @jutro/theme y @jutro/theme-styles packages. Estos temas se pueden utilizar cuando los temas definidos por Guidewire coincidan con todos los requisitos de tematización de la aplicación. Sin embargo, en caso de que se requiera alguna modificación, puede definir manualmente un nuevo tema personalizado utilizando cualquiera de las opciones proporcionadas por Guidewire, según sea necesario.

Jutro proporciona los siguientes temas:

Empresarial​

El tema predeterminado. El paquete @jutro/theme lo aplica automáticamente.

Consumidor​

Note: Este tema no funciona con componentes agregados en ninguna versión desde 10.0.x. Debe utilizar tokens de diseño.

Tema personalizado básico del paquete @jutro/theme-styles. Es similar al tema Empresarial, excepto que este es mucho menos integral.

Para usarlo en su aplicación:

import { consumerThemeConfig } from '@jutro/theme-styles';

...

start(Jutro, {
        themeConfig: consumerThemeConfig,
    });

General​

Note: Este tema no funciona con componentes agregados en ninguna versión desde 10.0.x. Debe utilizar tokens de diseño.

Este es el tema de todas las versiones de esquí que han seguido a la versión de Flaine. Aplica colores exclusivos de las versiones de esquí en la parte superior del tema “Empresarial” y proporciona una insignia de esquí genérica, que se puede cambiar por una exclusiva para versiones de esquí específicas. Se encuentra en @jutro/theme-styles.

Para usarlo en su aplicación:

import { generalThemeConfig } from '@jutro/theme-styles';

...

start(Jutro, {
        themeConfig: generalThemeConfig,
    });

Tokens de diseño y microfrontends​

Dado que el mecanismo de tematización desde la perspectiva de la aplicación no ha cambiado, solo la forma en que se administra la tematización (ahora a través de tokens de diseño), no es necesario hacer nada diferente para que la tematización funcione con microfrontends.

Sin embargo, debe tener en cuenta lo siguiente. El uso de una aplicación shell con el mecanismo de tematización antiguo y un microfrontend con tokens de diseño puede hacer que los componentes no reciban nuevos valores o que no funcionen como se prevé. También podría problemas al definir el estilo. Plantee cualquier problema a su representante de Guidewire y le proporcionaremos una guía más detallada sobre cómo utilizar el mecanismo antiguo en combinación con tokens de diseño en microfrontends en futuras versiones.