Journal des modifications des jetons de conception
Journal des modifications
Les jetons de conception ont été introduits dans le système de conception Jutro avec la version 10.0. Ce journal des modifications documente tous les ajouts, mises à jour et suppressions apportés aux jetons de conception Jutro dans chaque version. Il s’agit d’un enregistrement complet des modifications à tous les niveaux de jetons pour vous tenir informé des dernières mises à jour.
10.12 Olos
Cette version comprend une extension des jetons de niveau composant pour les composants de tableau, de pagination et de panneau de fiche, ainsi que des mises à jour relatives aux états de survol des boutons et aux contraintes de largeur des étiquettes pour les commandes de sélection.
| Version publiée | Nom du jeton | Détails | Action |
|---|---|---|---|
| 10.12 Olos | jds.button.tertiary.color-background-hover | Couleur modifiée de jds.color.background.neutral-subtle en jds.color.background.neutral-subtle-hover. | Mis à jour |
| 10.12 Olos | jds.icon-button.neutral.color-background-hover | Couleur modifiée de jds.color.background.neutral-subtle en jds.color.background.neutral-subtle-hover. | Mis à jour |
| 10.12 Olos | jds.icon-button.tertiary.color-background-hover | Couleur modifiée de jds.color.background.neutral-subtle en jds.color.background.neutral-subtle-hover. | Mis à jour |
| 10.12 Olos | jds.color.background.zebra | Couleur d’arrière-plan de la couche de base alternative. | Ajouté |
| 10.12 Olos | jds.card-panel.padding.bottom | Contrôle le remplissage inférieur du composant Panneau de fiche. | Ajouté |
| 10.12 Olos | jds.card-panel.padding.top | Contrôle le remplissage supérieur du composant Panneau de fiche. | Ajouté |
| 10.12 Olos | jds.pagination.controls.gap | Contrôle l’espacement entre les éléments de contrôle de la pagination. | Ajouté |
| 10.12 Olos | jds.pagination.gap | Définit l’espacement général dans le composant de pagination. | Ajouté |
| 10.12 Olos | jds.checkbox.input-label.max-width | Contrôle la largeur maximale des étiquettes dans les groupes horizontaux de cases à cocher. | Ajouté |
| 10.12 Olos | jds.radio.input-label.max-width | Contrôle la largeur maximale des étiquettes dans les groupes horizontaux de boutons radio. | Ajouté |
| 10.12 Olos | jds.table.color.background | Couleur générale d’arrière-plan du composant de tableau. | Ajouté |
| 10.12 Olos | jds.table.background.color.header-item | Définit la couleur d’arrière-plan des cellules d’en-tête du tableau. | Ajouté |
| 10.12 Olos | jds.table.background.color.row.even | Couleur d’arrière-plan des lignes paires (rayures zébrées). | Ajouté |
| 10.12 Olos | jds.table.background.color.row.odd | Couleur d’arrière-plan des lignes impaires (rayures zébrées). | Ajouté |
| 10.12 Olos | jds.table.background.color.row.selected | Couleur d’arrière-plan d’une ligne de tableau sélectionnée. | Ajouté |
| 10.12 Olos | jds.table.cell-item.height | Contrôle la hauteur de chaque cellule du tableau. | Ajouté |
| 10.12 Olos | jds.table.cell-item.padding | Remplissage interne des cellules de tableau. | Ajouté |
| 10.12 Olos | jds.table.header-item.height | Hauteur de la ligne d’en-tête du tableau. | Ajouté |
| 10.12 Olos | jds.table.header-item.padding | Remplissage interne des cellules d'en-tête du tableau. | Ajouté |
| 10.12 Olos | jds.table.header-item.gap | Espacement entre les éléments dans la cellule d’en-tête du tableau. | Ajouté |
| 10.12 Olos | jds.table.content.loading | Styles du conteneur de tableau pendant l’état de chargement. | Ajouté |
| 10.12 Olos | jds.table.content.empty | Styles pour le conteneur lorsque le tableau ne contient aucune donnée. | Ajouté |
| 10.12 Olos | jds.table.content.empty-state.icon-size | Taille de l’icône affichée lorsque le tableau est vide. | Ajouté |
| 10.12 Olos | jds.table.content.empty-state.button-row.max-width | Largeur maximale des boutons lorsque le tableau est vide. | Ajouté |
10.11 Niseko
Cette version comprend une extension et une réorganisation de nos jetons typographiques, des nouveaux jetons pour les éléments de citation et de code, ainsi que des jetons de composant pour le bouton Effacer dans les champs de saisie.
| Version publiée | Nom du jeton | Détails | Action |
|---|---|---|---|
| 10.11 Niseko | jds.font.heading.eyebrow | Recommandé : utiliser le texte d'accroche 1. Propriétés de police pour le texte d'accroche, généralement utilisé conjointement avec un titre. | Mis à jour |
| 10.11 Niseko | jds.font.heading.slug | Recommandé : utiliser le texte d'accoche 2. Propriétés de police du texte court, généralement utilisé comme titre de section dans une navigation verticale. | Mis à jour |
| 10.11 Niseko | jds.font.body.medium | Propriétés de police pour le texte de corps de taille moyenne. | Mis à jour |
| 10.11 Niseko | jds.font.body.small | Propriétés de police pour le texte de corps de petite taille. | Mis à jour |
| 10.11 Niseko | jds.font.body.x-small | Propriétés de police pour le texte de corps de très petite taille. | Mis à jour |
| 10.11 Niseko | jds.font.heading.7 | Supprimé dans le cadre d’un correctif d’accessibilité. Le jeton n’a pas été utilisé et n’est pas une modification majeure. | Supprimé |
| 10.11 Niseko | jds.font-family.blockquote | Famille de polices pour les citations. | Ajouté |
| 10.11 Niseko | jds.font-family.figure-caption | Famille de police pour la légende des figures. | Ajouté |
| 10.11 Niseko | jds.line-height.blockquote | Hauteur de ligne du texte des citations. | Ajouté |
| 10.11 Niseko | jds.line-height.figure-caption | Hauteur de ligne pour le texte des légendes des figures. | Ajouté |
| 10.11 Niseko | jds.font.hero.1 | Propriétés de police pour le texte hero 1. | Ajouté |
| 10.11 Niseko | jds.font.hero.2 | Propriétés de police pour le texte hero 2. | Ajouté |
| 10.11 Niseko | jds.font.hero.3 | Propriétés de police pour le texte hero 3. | Ajouté |
| 10.11 Niseko | jds.font.eyebrow.1 | Propriétés de police pour le texte d'accroche 1, généralement utilisé conjointement avec un titre. | Ajouté |
| 10.11 Niseko | jds.font.eyebrow.2 | Propriétés de police pour le texte d'accroche 2, généralement utilisé conjointement avec un titre. | Ajouté |
| 10.11 Niseko | jds.font.eyebrow.3 | Propriétés de police pour le texte d'accroche 3, généralement utilisé conjointement avec un titre. | Ajouté |
| 10.11 Niseko | jds.font.label.x-small-strong | Propriétés de police pour le texte des étiquettes en gras de très petite taille. | Ajouté |
| 10.11 Niseko | jds.font.blockquote.large | Propriétés de police pour le texte des citations de grande taille. | Ajouté |
| 10.11 Niseko | jds.font.blockquote.medium | Propriétés de police pour le texte des citations de taille moyenne. | Ajouté |
| 10.11 Niseko | jds.font.blockquote.small | Propriétés de police pour le texte des citations de petite taille. | Ajouté |
| 10.11 Niseko | jds.font.blockquote.x-small | Propriétés de police pour le texte des citations de très petite taille. | Ajouté |
| 10.11 Niseko | jds.font.figure-caption.large | Propriétés de police pour le texte des légendes des figures de grande taille. | Ajouté |
| 10.11 Niseko | jds.font.figure-caption.medium | Propriétés de police pour le texte des légendes des figures de taille moyenne. | Ajouté |
| 10.11 Niseko | jds.font.figure-caption.small | Propriétés de police pour le texte des légendes des figures de petite taille. | Ajouté |
| 10.11 Niseko | jds.font.figure-caption.x-small | Propriétés de police pour le texte des légendes des figures de très petite taille. | Ajouté |
| 10.11 Niseko | jds.font.code.large | Propriétés de police pour le texte du code de grande taille. | Ajouté |
| 10.11 Niseko | jds.font.code.small | Propriétés de police pour le texte du code de petite taille. | Ajouté |
| 10.11 Niseko | jds.font.code.x-small | Propriétés de police pour le texte du code de très petite taille. | Ajouté |
| 10.11 Niseko | jds.color.background.blockquote | Couleur d’arrière-plan des citations. | Ajouté |
| 10.11 Niseko | jds.color.border.blockquote | Couleur de la bordure des citations. | Ajouté |
| 10.11 Niseko | jds.padding.blockquote | Remplissage des citations. | Ajouté |
| 10.11 Niseko | jds.border-radius.blockquote | Rayon de bordure des citations. | Ajouté |
| 10.11 Niseko | jds.border.blockquote.top | Bordure supérieure des citations. | Ajouté |
| 10.11 Niseko | jds.border.blockquote.right | Bordure droite des citations. | Ajouté |
| 10.11 Niseko | jds.border.blockquote.bottom | Bordure inférieure des citations. | Ajouté |
| 10.11 Niseko | jds.border.blockquote.left | Bordure gauche des citations. | Ajouté |
| 10.11 Niseko | jds.input-field.clear-icon-button.border-radius | Rayon de bordure du bouton d'icône Effacer du champ de saisie. | Ajouté |
| 10.11 Niseko | jds.input-field.clear-icon-button.shadow | Ombre pour le bouton d’icône Effacer du champ de saisie. | Ajouté |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.background | Couleur d’arrière-plan du bouton d’icône Effacer du champ de saisie. | Ajouté |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.background-hover | Couleur d’arrière-plan de l'état de survol du bouton d’icône Effacer du champ de saisie. | Ajouté |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.background-active | Couleur du texte de l'état actif du bouton d’icône Effacer du champ de saisie. | Ajouté |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.background-focus | Couleur d’arrière-plan de l'état de focus du bouton d’icône Effacer du champ de saisie. | Ajouté |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.border | Couleur de bordure du bouton d'icône Effacer du champ de saisie. | Ajouté |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.border-hover | Couleur de bordure de l’état de survol du bouton d’icône du champ de saisie. | Ajouté |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.border-active | Couleur de bordure de l'état actif du bouton d’icône Effacer du champ de saisie. | Ajouté |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.border-focus | Couleur de bordure de l'état focus du bouton d’icône Effacer du champ de saisie. | Ajouté |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.icon | Couleur d’icône pour le bouton d'icône Effacer du champ de saisie. | Ajouté |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.icon-hover | Couleur d’icône de l'état de survol du bouton d'icône Effacer du champ de saisie. | Ajouté |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.icon-active | Couleur d’icône de l'état actif du bouton d'icône Effacer du champ de saisie. | Ajouté |
| 10.11 Niseko | jds.input-field.clear-icon-button.color.icon-focus | Couleur d’icône de l'état focus du bouton d'icône Effacer du champ de saisie. | Ajouté |
| 10.11 Niseko | jds.input-field.clear-icon-button.shadow-focus | Ombre de l'état focus pour le bouton d’icône Effacer du champ de saisie. | Ajouté |
| 10.11 Niseko | jds.input-field.clear-icon-button.border-width | Jeton de composition avec des valeurs individuelles de largeur de bordure pour le bouton d’icône Effacer du champ de saisie. | Ajouté |
| 10.11 Niseko | jds.input-field.clear-icon-button.border-width-hover | Jeton de composition avec des valeurs individuelles de largeur de bordure pour l'état de survol du bouton d’icône Effacer du champ de saisie. | Ajouté |
| 10.11 Niseko | jds.input-field.clear-icon-button.border-width-active | Jeton de composition avec des valeurs individuelles de largeur de bordure pour l'état actif du bouton d’icône Effacer du champ de saisie. | Ajouté |
| 10.11 Niseko | jds.input-field.clear-icon-button.border-width-focus | Jeton de composition avec des valeurs individuelles de largeur de bordure pour l'état focus du bouton d’icône Effacer du champ de saisie. | Ajouté |
| 10.11 Niseko | jds.input-field.clear-icon-button.size | Taille pour un petit bouton d’icône Effacer au niveau du champ de saisie. | Ajouté |
| 10.11 Niseko | jds.input-field.clear-icon-button.icon-size | Taille de l’icône du bouton d'icône Effacer du champ de saisie. | Ajouté |
10.10 Mammoth
Cette version inclut des modifications de couleurs pour respecter les normes d’accessibilité WCAG 2.1.
La liste de modifications suivante comprend des améliorations du focus, de la visibilité et du contraste :
| Version publiée | Nom du jeton | Détails | Action |
|---|---|---|---|
| 10.10 Mammoth | jds.focus.shadow.regular | Opacité définie sur 1 pour le jeton de conception de l’ombre de l'état focus | Mis à jour |
| 10.10 Mammoth | jds.focus.shadow.inverse | Opacité définie sur 1 pour le jeton de conception de l’ombre de l'état focus | Mis à jour |
| 10.10 Mammoth | jds.focus.shadow.error | Opacité définie sur 1 pour le jeton de conception de l’ombre de l'état focus | Mis à jour |
| 10.10 Mammoth | jds.focus.shadow.error-inverse | Opacité définie sur 1 pour le jeton de conception de l’ombre de l'état focus | Mis à jour |
| 10.10 Mammoth | jds.utility.color.shadow.focus.regular | Opacité définie sur 1 pour le jeton de conception de l’ombre de l'état focus | Mis à jour |
| 10.10 Mammoth | jds.utility.color.shadow.focus.inverse | Opacité définie sur 1 pour le jeton de conception de l’ombre de l'état focus | Mis à jour |
| 10.10 Mammoth | jds.utility.color.shadow.focus.error | Opacité définie sur 1 pour le jeton de conception de l’ombre de l'état focus | Mis à jour |
| 10.10 Mammoth | jds.utility.color.shadow.focus.error-inverse | Opacité définie sur 1 pour le jeton de conception de l’ombre de l'état focus | Mis à jour |
| 10.10 Mammoth | --GW-FOCUS-COLOR-LIGHT | Opacité définie sur 1 pour la variable de couleur de l'état focus | Mis à jour |
| 10.10 Mammoth | --GW-FOCUS-COLOR-DARK | Opacité définie sur 1 pour la variable de couleur de l'état focus | Mis à jour |
| 10.10 Mammoth | --GW-FOCUS-ERROR-COLOR-DARK | Opacité définie sur 1 pour la variable de couleur de l'erreur à l'état focus | Mis à jour |
| 10.10 Mammoth | --GW-FOCUS-ERROR-COLOR-LIGHT | Opacité définie sur 1 pour la variable de couleur de l'erreur à l'état focus | Mis à jour |
| 10.10 Mammoth | --GW-SLIDER-FIELD-HANDLE-BOX-SHADOW-FOCUS | Valeur modifiée de 0 0 0 1px #fff, 0 0 0 3px rgba(30, 154, 207, 0.4) en 0 0 0 1px #fff, 0 0 0 3px var(--GW-FOCUS-COLOR-LIGHT) | Mis à jour |
| 10.10 Mammoth | jds.icon-button.primary.shadow-focus | Définition sur jds.focus.shadow.regular | Ajouté |
| 10.10 Mammoth | jds.icon-button.secondary.shadow-focus | Définition sur jds.focus.shadow.regular | Ajouté |
| 10.10 Mammoth | jds.icon-button.tertiary.shadow-focus | Définition sur jds.focus.shadow.regular | Ajouté |
| 10.10 Mammoth | jds.icon-button.neutral.shadow-focus | Définition sur jds.focus.shadow.regular | Ajouté |
| 10.10 Mammoth | jds.icon-button.inverse.shadow-focus | Définition sur jds.utility.color.shadow.focus.inverse | Ajouté |
| 10.10 Mammoth | --GW-FIELD-COMPONENT-SHADOW-COLOR-FOCUS-ERROR | Nouvelle variable, non définie par défaut, qui peut être utilisée pour définir la couleur d’ombre du focus appropriée pour les entrées obsolètes en état d’erreur | Ajouté |
Les modifications suivantes ont été appliquées aux styles des composants de la configuration de base. Pour revenir aux styles précédents, vous devez remplacer ces jetons. Les composants concernés sont notamment les suivants : Badge, InfoLabel, InlineNotificationet ToastNotification.
| Version publiée | Nom du jeton | Détails | Action |
|---|---|---|---|
| 10.10 Mammoth | jds.color.yellow.100 | Valeur modifiée de #c76a00 en #7a3e00 | Mis à jour |
| 10.10 Mammoth | jds.color.yellow.10 | Valeur modifiée de #fff5eb en #fff0e0 | Mis à jour |
| 10.10 Mammoth | jds.color.yellow.20 | Valeur modifiée de #ffead1 en #ffe1c2 | Mis à jour |
| 10.10 Mammoth | jds.color.yellow.30 | Valeur modifiée de #ffe2c2 en #ffcd99 | Mis à jour |
| 10.10 Mammoth | jds.color.yellow.40 | Valeur modifiée de #ffc17a en #ffa952 | Mis à jour |
| 10.10 Mammoth | jds.color.yellow.50 | Valeur modifiée de #ffb561 en #f57c00 | Mis à jour |
| 10.10 Mammoth | jds.color.yellow.60 | Valeur modifiée de #ff9d2e en #d66d00 | Mis à jour |
| 10.10 Mammoth | jds.color.yellow.70 | Valeur modifiée de #ff8f0f en #c26200 | Mis à jour |
| 10.10 Mammoth | jds.color.yellow.80 | Valeur modifiée de #e57a00 en #ad5800 | Mis à jour |
| 10.10 Mammoth | jds.color.yellow.90 | Valeur modifiée de #db740 en #8f4800 | Mis à jour |
| 10.10 Mammoth | jds.badge.warning.color.background | Valeur modifiée de #ff9d2e en #d66d00 | Mis à jour |
| 10.10 Mammoth | jds.color.background.warning-subtle | Valeur modifiée de #fff5eb en #fff0e0 | Mis à jour |
| 10.10 Mammoth | jds.color.background.warning | Valeur modifiée de #ff9d2e en #d66d00 | Mis à jour |
| 10.10 Mammoth | jds.color.border.warning | Valeur modifiée de #ff9d2e en #d66d00 | Mis à jour |
| 10.10 Mammoth | jds.color.icon.warning | Valeur modifiée de #ff9d2e en #d66d00 | Mis à jour |
| 10.10 Mammoth | jds.color.text.warning | Valeur modifiée de #ff9d2e en #d66d00 | Mis à jour |
| 10.10 Mammoth | jds.info-label.warning.color.background | Valeur modifiée de #ff9d2e en #d66d00 | Mis à jour |
| 10.10 Mammoth | jds.info-label.warning.color.border | Valeur modifiée de #ff9d2e en #d66d00 | Mis à jour |
| 10.10 Mammoth | jds.inline-notification.warning.color.background | Valeur modifiée de #fff5eb en #fff0e0 | Mis à jour |
| 10.10 Mammoth | jds.inline-notification.warning.color.border | Valeur modifiée de #ff9d2e en #d66d00 | Mis à jour |
| 10.10 Mammoth | jds.inline-notification.warning.color.icon | Valeur modifiée de #ff9d2e en #d66d00 | Mis à jour |
| 10.10 Mammoth | jds.toast-notification.warning.color.border | Valeur modifiée de #ff9d2e en #d66d00 | Mis à jour |
| 10.10 Mammoth | jds.toast-notification.warning.icon.container.color.background | Valeur modifiée de #ff9d2e en #d66d00 | Mis à jour |
Pour s’assurer que les entrées et les commandes utilisables correspondent au rapport de contraste requis d’au moins 3:1, les modifications suivantes ont été apportées. Ces modifications sont appliquées aux styles des composants dans la configuration de base. Pour revenir aux styles précédents, vous devez remplacer ces jetons :
| Version publiée | Nom du jeton | Détails | Action |
|---|---|---|---|
| 10.10 Mammoth | jds.color.gray.70 | Valeur modifiée de #7d94ac en #7990a8 | Mis à jour |
| 10.10 Mammoth | --GW-BORDER-COLOR | Valeur par défaut modifiée de #7d91ac en #7990a8 | Mis à jour |
Jasper 10.3
Cette version présente les jetons de couleur pour la progression et les liens visités.
| Version publiée | Nom du jeton | Détails | Action |
|---|---|---|---|
| Jasper 10.3 | jds.color.background.progress | Couleur d'arrière-plan pour le statut de progression | Ajouter au niveau sémantique |
| Jasper 10.3 | jds.color.text.link.visited | Couleur de l'état visité du texte du lien | Ajouter au niveau sémantique |
| Jasper 10.3 | jds.color.text.link.visited-hover | Couleur de l'état de survol visité du texte du lien | Ajouter au niveau sémantique |
| Jasper 10.3 | jds.color.text.link.visited-active | Couleur de l'état actif visité du texte du lien | Ajouter au niveau sémantique |