Registro de cambios de tokens de diseño
Registro de cambios
Los tokens de diseño se introdujeron en Jutro Design System con la versión 10.0. Este registro de cambios documenta todas las adiciones, actualizaciones y eliminaciones realizadas a los tokens de diseño de Jutro en cada versión. Sirve como un registro completo de los cambios en todos los niveles de token para mantenerlo informado sobre las últimas actualizaciones.
Olos 10.12
Esta versión incluye una expansión de tokens al nivel de los componentes para los componentes tabla, paginación y panel de tarjeta, junto con actualizaciones de los estados de botón con cursor encima y restricciones de ancho de rótulo para los controles de selección.
| Versión publicada | Nombre del token | Detalles | Acción |
|---|---|---|---|
| Olos 10.12 | jds.button.tertiary.color-background-hover | El color cambió de jds.color.background.neutral-subtle a jds.color.background.neutral-subtle-hover. | Actualizado |
| Olos 10.12 | jds.icon-button.neutral.color-background-hover | El color cambió de jds.color.background.neutral-subtle a jds.color.background.neutral-subtle-hover. | Actualizado |
| Olos 10.12 | jds.icon-button.tertiary.color-background-hover | El color cambió de jds.color.background.neutral-subtle a jds.color.background.neutral-subtle-hover. | Actualizado |
| Olos 10.12 | jds.color.background.zebra | Color de fondo para la capa base alternativa. | Agregado |
| Olos 10.12 | jds.card-panel.padding.bottom | Controla el espaciado inferior entre borde y texto del componente panel de tarjeta. | Agregado |
| Olos 10.12 | jds.card-panel.padding.top | Controla el espaciado superior entre borde y texto del componente panel de tarjeta. | Agregado |
| Olos 10.12 | jds.pagination.controls.gap | Controla el espaciado entre los elementos de control de paginación. | Agregado |
| Olos 10.12 | jds.pagination.gap | Establece el espaciado general dentro del componente de paginación. | Agregado |
| Olos 10.12 | jds.checkbox.input-label.max-width | Controla el ancho máximo de los rótulos en grupos de casillas de verificación horizontales. | Agregado |
| Olos 10.12 | jds.radio.input-label.max-width | Controla el ancho máximo de los rótulos en grupos de selección horizontales. | Agregado |
| Olos 10.12 | jds.table.color.background | Color de fondo general para el componente tabla. | Agregado |
| Olos 10.12 | jds.table.background.color.header-item | Establece el color de fondo de las celdas del encabezado de la tabla. | Agregado |
| Olos 10.12 | jds.table.background.color.row.even | Color de fondo para filas pares (rayas de cebra). | Agregado |
| Olos 10.12 | jds.table.background.color.row.odd | Color de fondo para filas impares (rayas de cebra). | Agregado |
| Olos 10.12 | jds.table.background.color.row.selected | Color de fondo para la fila de la tabla seleccionada. | Agregado |
| Olos 10.12 | jds.table.cell-item.height | Controla la altura de las celdas individuales de la tabla. | Agregado |
| Olos 10.12 | jds.table.cell-item.padding | Espaciado interno entre borde y texto para celdas de tabla. | Agregado |
| Olos 10.12 | jds.table.header-item.height | Altura de la fila del encabezado de la tabla. | Agregado |
| Olos 10.12 | jds.table.header-item.padding | Espaciado interno entre borde y texto para celdas de encabezado de tabla. | Agregado |
| Olos 10.12 | jds.table.header-item.gap | Espaciado entre elementos dentro de la celda del encabezado de la tabla. | Agregado |
| Olos 10.12 | jds.table.content.loading | Estilos para el contenedor de la tabla durante el estado de carga. | Agregado |
| Olos 10.12 | jds.table.content.empty | Estilos para el contenedor cuando la tabla no tiene datos. | Agregado |
| Olos 10.12 | jds.table.content.empty-state.icon-size | Tamaño del ícono que se muestra en el estado vacío de la tabla. | Agregado |
| Olos 10.12 | jds.table.content.empty-state.button-row.max-width | Ancho máximo para botones dentro del estado vacío de la tabla. | Agregado |
Niseko 10.11
Esta versión incluye una expansión y reorganización de nuestros tokens de tipografía, nuevos tokens para bloque de cita y elementos de código, y tokens de componentes para el botón Borrar en los campos de entrada.
| Versión publicada | Nombre del token | Detalles | Acción |
|---|---|---|---|
| Niseko 10.11 | jds.font.heading.eyebrow | Se recomienda usar antetítulo 1. Propiedades de fuente para el texto del antetítulo que normalmente se utiliza junto con un encabezado. | Actualizado |
| Niseko 10.11 | jds.font.heading.slug | Se recomienda usar antetítulo 2. Propiedades de fuente para texto de campo de datos dinámico que normalmente se utiliza como título de sección dentro de una navegación vertical. | Actualizado |
| Niseko 10.11 | jds.font.body.medium | Propiedades de fuente para texto intermedio de cuerpo. | Actualizado |
| Niseko 10.11 | jds.font.body.small | Propiedades de fuente para texto pequeño de cuerpo. | Actualizado |
| Niseko 10.11 | jds.font.body.x-small | Propiedades de fuente para texto diminuto de cuerpo. | Actualizado |
| Niseko 10.11 | jds.font.heading.7 | Se eliminó como parte de una corrección de accesibilidad. El token no se utilizaba y no es un cambio importante. | Eliminado |
| Niseko 10.11 | jds.font-family.blockquote | Familia de fuentes para bloques de citas. | Agregado |
| Niseko 10.11 | jds.font-family.figure-caption | Familia de fuentes para la leyenda de figuras. | Agregado |
| Niseko 10.11 | jds.line-height.blockquote | Altura de línea para el texto del bloque de citas. | Agregado |
| Niseko 10.11 | jds.line-height.figure-caption | Altura de línea para el texto de la leyenda de figuras. | Agregado |
| Niseko 10.11 | jds.font.hero.1 | Propiedades de fuente para el texto de sección destacada 1. | Agregado |
| Niseko 10.11 | jds.font.hero.2 | Propiedades de fuente para el texto de sección destacada 2. | Agregado |
| Niseko 10.11 | jds.font.hero.3 | Propiedades de fuente para el texto de sección destacada 3. | Agregado |
| Niseko 10.11 | jds.font.eyebrow.1 | Propiedades de fuente para el texto del antetítulo 1 que normalmente se utiliza junto con un encabezado. | Agregado |
| Niseko 10.11 | jds.font.eyebrow.2 | Propiedades de fuente para el texto del antetítulo 2 que normalmente se utiliza junto con un encabezado. | Agregado |
| Niseko 10.11 | jds.font.eyebrow.3 | Propiedades de fuente para el texto del antetítulo 3 que normalmente se utiliza junto con un encabezado. | Agregado |
| Niseko 10.11 | jds.font.label.x-small-strong | Propiedades de fuente para texto de rótulo diminuto en negrita. | Agregado |
| Niseko 10.11 | jds.font.blockquote.large | Propiedades de fuente para texto grande de bloque de citas. | Agregado |
| Niseko 10.11 | jds.font.blockquote.medium | Propiedades de fuente para texto intermedio de bloque de citas. | Agregado |
| Niseko 10.11 | jds.font.blockquote.small | Propiedades de fuente para texto pequeño de bloque de citas. | Agregado |
| Niseko 10.11 | jds.font.blockquote.x-small | Propiedades de fuente para texto diminuto de bloque de citas. | Agregado |
| Niseko 10.11 | jds.font.figure-caption.large | Propiedades de fuente para texto grande de leyenda de figura. | Agregado |
| Niseko 10.11 | jds.font.figure-caption.medium | Propiedades de fuente para texto intermedio de leyenda de figura. | Agregado |
| Niseko 10.11 | jds.font.figure-caption.small | Propiedades de fuente para texto pequeño de leyenda de figura. | Agregado |
| Niseko 10.11 | jds.font.figure-caption.x-small | Propiedades de fuente para texto diminuto de leyenda de figura. | Agregado |
| Niseko 10.11 | jds.font.code.large | Propiedades de fuente para texto grande de código. | Agregado |
| Niseko 10.11 | jds.font.code.small | Propiedades de fuente para texto pequeño de código. | Agregado |
| Niseko 10.11 | jds.font.code.x-small | Propiedades de fuente para texto diminuto de código. | Agregado |
| Niseko 10.11 | jds.color.background.blockquote | Color de fondo para bloque de citas. | Agregado |
| Niseko 10.11 | jds.color.border.blockquote | Color del borde para bloque de citas. | Agregado |
| Niseko 10.11 | jds.padding.blockquote | Espaciado entre borde y texto para bloque de citas. | Agregado |
| Niseko 10.11 | jds.border-radius.blockquote | Borde redondeado para bloque de citas. | Agregado |
| Niseko 10.11 | jds.border.blockquote.top | Borde superior para bloque de citas. | Agregado |
| Niseko 10.11 | jds.border.blockquote.right | Borde derecho para bloque de citas. | Agregado |
| Niseko 10.11 | jds.border.blockquote.bottom | Borde inferior para bloque de citas. | Agregado |
| Niseko 10.11 | jds.border.blockquote.left | Borde izquierdo para bloque de citas. | Agregado |
| Niseko 10.11 | jds.input-field.clear-icon-button.border-radius | Borde redondeado para botón de ícono Borrar de campo de entrada. | Agregado |
| Niseko 10.11 | jds.input-field.clear-icon-button.shadow | Sombra para botón de ícono Borrar de campo de entrada. | Agregado |
| Niseko 10.11 | jds.input-field.clear-icon-button.color.background | Color de fondo para botón de ícono Borrar de campo de entrada. | Agregado |
| Niseko 10.11 | jds.input-field.clear-icon-button.color.background-hover | Color de fondo para el estado con cursor encima de bot ón de ícono Borrar de campo de entrada. | Agregado |
| Niseko 10.11 | jds.input-field.clear-icon-button.color.background-active | Color de texto para el estado activo de botón de ícono Borrar de campo de entrada. | Agregado |
| Niseko 10.11 | jds.input-field.clear-icon-button.color.background-focus | Color de fondo para el estado en foco de botón de ícono Borrar de campo de entrada. | Agregado |
| Niseko 10.11 | jds.input-field.clear-icon-button.color.border | Color de borde para botón de ícono Borrar de campo de entrada. | Agregado |
| Niseko 10.11 | jds.input-field.clear-icon-button.color.border-hover | Color de borde para el estado con cursor encima de botón de ícono de campo de entrada. | Agregado |
| Niseko 10.11 | jds.input-field.clear-icon-button.color.border-active | Color de borde para el estado activo de botón de ícono Borrar de campo de entrada. | Agregado |
| Niseko 10.11 | jds.input-field.clear-icon-button.color.border-focus | Color de borde para el estado en foco de botón de ícono Borrar de campo de entrada. | Agregado |
| Niseko 10.11 | jds.input-field.clear-icon-button.color.icon | Color de ícono para botón de ícono Borrar de campo de entrada. | Agregado |
| Niseko 10.11 | jds.input-field.clear-icon-button.color.icon-hover | Color de ícono para el estado con cursor encima del botón de ícono Borrar de campo de entrada. | Agregado |
| Niseko 10.11 | jds.input-field.clear-icon-button.color.icon-active | Color de ícono para el estado activo del botón de ícono Borrar de campo de entrada. | Agregado |
| Niseko 10.11 | jds.input-field.clear-icon-button.color.icon-focus | Color de ícono para el estado en foco del botón de ícono Borrar de campo de entrada. | Agregado |
| Niseko 10.11 | jds.input-field.clear-icon-button.shadow-focus | Sombra para en foco del botón de ícono Borrar de campo de entrada. | Agregado |
| Niseko 10.11 | jds.input-field.clear-icon-button.border-width | Token de composición con valores individuales de ancho de borde para botón de ícono Borrar de campo de entrada. | Agregado |
| Niseko 10.11 | jds.input-field.clear-icon-button.border-width-hove | Token de composición con valores individuales de ancho de borde para estado con cursor encima de botón de ícono Borrar de campo de entrada. | Agregado |
| Niseko 10.11 | jds.input-field.clear-icon-button.border-width-active | Token de composición con valores individuales de ancho de borde para estado activo de botón de ícono Borrar de campo de entrada. | Agregado |
| Niseko 10.11 | jds.input-field.clear-icon-button.border-width-focus | Token de composición con valores individuales de ancho de borde para estado en foco de botón de ícono Borrar de campo de entrada. | Agregado |
| Niseko 10.11 | jds.input-field.clear-icon-button.size | Tamaño de botón pequeño de ícono Borrar de campo de entrada. | Agregado |
| Niseko 10.11 | jds.input-field.clear-icon-button.icon-size | Tamaño de ícono del botón de ícono Borrar de campo de entrada. | Agregado |
Mammoth 10.10
Esta versión incluye cambios en los colores para cumplir con los estándares de accesibilidad de WCAG 2.1.
En la siguiente lista de cambios, se incluyen mejoras al foco, visibilidad y contraste:
| Versión publicada | Nombre del token | Detalles | Acción |
|---|---|---|---|
| Mammoth 10.10 | jds.focus.shadow.regular | Opacidad establecida en 1 para el token de diseño de sombra de foco | Actualizado |
| Mammoth 10.10 | jds.focus.shadow.inverse | Opacidad establecida en 1 para el token de diseño de sombra de foco | Actualizado |
| Mammoth 10.10 | jds.focus.shadow.error | Opacidad establecida en 1 para el token de diseño de sombra de foco | Actualizado |
| Mammoth 10.10 | jds.focus.shadow.error-inverse | Opacidad establecida en 1 para el token de diseño de sombra de foco | Actualizado |
| Mammoth 10.10 | jds.utility.color.shadow.focus.regular | Opacidad establecida en 1 para el token de diseño de sombra de foco | Actualizado |
| Mammoth 10.10 | jds.utility.color.shadow.focus.inverse | Opacidad establecida en 1 para el token de diseño de sombra de foco | Actualizado |
| Mammoth 10.10 | jds.utility.color.shadow.focus.error | Opacidad establecida en 1 para el token de diseño de sombra de foco | Actualizado |
| Mammoth 10.10 | jds.utility.color.shadow.focus.error-inverse | Opacidad establecida en 1 para el token de diseño de sombra de foco | Actualizado |
| Mammoth 10.10 | --GW-FOCUS-COLOR-LIGHT | Opacidad establecida en 1 para la variable de color de foco | Actualizado |
| Mammoth 10.10 | --GW-FOCUS-COLOR-DARK | Opacidad establecida en 1 para la variable de color de foco | Actualizado |
| Mammoth 10.10 | --GW-FOCUS-ERROR-COLOR-DARK | Opacidad establecida en 1 para la variable de color de error de foco | Actualizado |
| Mammoth 10.10 | --GW-FOCUS-ERROR-COLOR-LIGHT | Opacidad establecida en 1 para la variable de color de error de foco | Actualizado |
| Mammoth 10.10 | --GW-SLIDER-FIELD-HANDLE-BOX-SHADOW-FOCUS | Se cambió el valor de 0 0 0 1px #fff, 0 0 0 3px rgba(30, 154, 207, 0.4) a 0 0 0 1px #fff, 0 0 0 3px var(--GW-FOCUS-COLOR-LIGHT) | Actualizado |
| Mammoth 10.10 | jds.icon-button.primary.shadow-focus | Establecido en jds.focus.shadow.regular | Agregado |
| Mammoth 10.10 | jds.icon-button.secondary.shadow-focus | Establecido en jds.focus.shadow.regular | Agregado |
| Mammoth 10.10 | jds.icon-button.tertiary.shadow-focus | Establecido en jds.focus.shadow.regular | Agregado |
| Mammoth 10.10 | jds.icon-button.neutral.shadow-focus | Establecido en jds.focus.shadow.regular | Agregado |
| Mammoth 10.10 | jds.icon-button.inverse.shadow-focus | Establecido en jds.utility.color.shadow.focus.inverse | Agregado |
| Mammoth 10.10 | --GW-FIELD-COMPONENT-SHADOW-COLOR-FOCUS-ERROR | Nueva variable, no definida de forma predeterminada, y se puede utilizar para establecer el color de sombra de foco correcto para entradas obsoletas en estado de error | Agregado |
Los siguientes cambios se han aplicado a los estilos de los componentes en la configuración base. Para volver a los estilos anteriores, tendrá que invalidar estos tokens. Los componentes afectados incluyen Badge, InfoLabel, InlineNotificationy ToastNotification.
| Versión publicada | Nombre del token | Detalles | Acción |
|---|---|---|---|
| Mammoth 10.10 | jds.color.yellow.100 | Se cambió el valor de #c76a00 a #7a3e00 | Actualizado |
| Mammoth 10.10 | jds.color.yellow.10 | Se cambió el valor de #fff5eb a #fff0e0 | Actualizado |
| Mammoth 10.10 | jds.color.yellow.20 | Se cambió el valor de #ffead1 a #ffe1c2 | Actualizado |
| Mammoth 10.10 | jds.color.yellow.30 | Se cambió el valor de #ffe2c2 a #ffcd99 | Actualizado |
| Mammoth 10.10 | jds.color.yellow.40 | Se cambió el valor de #ffc17a a #ffa952 | Actualizado |
| Mammoth 10.10 | jds.color.yellow.50 | Se cambió el valor de #ffb561 a #f57c00 | Actualizado |
| Mammoth 10.10 | jds.color.yellow.60 | Se cambió el valor de #ff9d2e a #d66d00 | Actualizado |
| Mammoth 10.10 | jds.color.yellow.70 | Se cambió el valor de #ff8f0f a #c26200 | Actualizado |
| Mammoth 10.10 | jds.color.yellow.80 | Se cambió el valor de #e57a00 a #ad5800 | Actualizado |
| Mammoth 10.10 | jds.color.yellow.90 | Se cambió el valor de #db740 a #8f4800 | Actualizado |
| Mammoth 10.10 | jds.badge.warning.color.background | Se cambió el valor de #ff9d2e a #d66d00 | Actualizado |
| Mammoth 10.10 | jds.color.background.warning-subtle | Se cambió el valor de #fff5eb a #fff0e0 | Actualizado |
| Mammoth 10.10 | jds.color.background.warning | Se cambió el valor de #ff9d2e a #d66d00 | Actualizado |
| Mammoth 10.10 | jds.color.border.warning | Se cambió el valor de #ff9d2e a #d66d00 | Actualizado |
| Mammoth 10.10 | jds.color.icon.warning | Se cambió el valor de #ff9d2e a #d66d00 | Actualizado |
| Mammoth 10.10 | jds.color.text.warning | Se cambió el valor de #ff9d2e a #d66d00 | Actualizado |
| Mammoth 10.10 | jds.info-label.warning.color.background | Se cambió el valor de #ff9d2e a #d66d00 | Actualizado |
| Mammoth 10.10 | jds.info-label.warning.color.border | Se cambió el valor de #ff9d2e a #d66d00 | Actualizado |
| Mammoth 10.10 | jds.inline-notification.warning.color.background | Se cambió el valor de #fff5eb a #fff0e0 | Actualizado |
| Mammoth 10.10 | jds.inline-notification.warning.color.border | Se cambió el valor de #ff9d2e a #d66d00 | Actualizado |
| Mammoth 10.10 | jds.inline-notification.warning.color.icon | Se cambió el valor de #ff9d2e a #d66d00 | Actualizado |
| Mammoth 10.10 | jds.toast-notification.warning.color.border | Se cambió el valor de #ff9d2e a #d66d00 | Actualizado |
| Mammoth 10.10 | jds.toast-notification.warning.icon.container.color.background | Se cambió el valor de #ff9d2e a #d66d00 | Actualizado |
Para garantizar que las entradas y los controles operables cumplan con la relación de contraste requerida de al menos 3:1, se han realizado los siguientes cambios. Estos cambios se aplican a los estilos de los componentes en la configuración base. Para volver a los estilos anteriores, tendrá que invalidar estos tokens:
| Versión publicada | Nombre del token | Detalles | Acción |
|---|---|---|---|
| Mammoth 10.10 | jds.color.gray.70 | Se cambió el valor de #7d94ac a #7990a8 | Actualizado |
| Mammoth 10.10 | --GW-BORDER-COLOR | Se cambió el valor predeterminado de #7d91ac a #7990a8 | Actualizado |
Jasper 10.3
Esta versión introduce tokens de color para los enlaces de progreso y visitados.
| Versión publicada | Nombre del token | Detalles | Acción |
|---|---|---|---|
| Jasper 10.3 | jds.color.background.progress | Color de fondo para el estado en progreso | Agregar al nivel semántico |
| Jasper 10.3 | jds.color.text.link.visited | Color para el estado visitado del texto del enlace | Agregar al nivel semántico |
| Jasper 10.3 | jds.color.text.link.visited-hover | Color para el estado visitado con cursor encima del texto del enlace | Agregar al nivel semántico |
| Jasper 10.3 | jds.color.text.link.visited-active | Color para el estado visitado activo del texto del enlace | Agregar al nivel semántico |