diff --git a/src/en/components/breadcrumbs/use-case.md b/src/en/components/breadcrumbs/use-case.md index ec167fc81..531f6b37e 100644 --- a/src/en/components/breadcrumbs/use-case.md +++ b/src/en/components/breadcrumbs/use-case.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: breadcrumb trail. description: A path to the current page from each preceding level of the site's hierarchy. thumbnail: /images/common/components/preview-breadcrumbs.svg - alt: Two gray boxes with navy blue underlines with an arrow between them. These boxes represent breadcrumb links. + alt: Two thick grey lines with a chevron between them represent breadcrumb links. tag: Core state: published translationKey: 'breadcrumbs' diff --git a/src/en/components/button/use-case.md b/src/en/components/button/use-case.md index 2f29203f1..83399772a 100644 --- a/src/en/components/button/use-case.md +++ b/src/en/components/button/use-case.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: call to action, CTA. description: An interactive object that highlights an action. thumbnail: /images/common/components/preview-button.svg - alt: Button shows a dark blue box with a button and an arrow inside. + alt: A dark blue box with a white box inside of it represents a button with a label. state: published translationKey: 'button' tags: ['buttonEN', 'usage'] diff --git a/src/en/components/checkbox/use-case.md b/src/en/components/checkbox/use-case.md index fba372412..3a49204b7 100644 --- a/src/en/components/checkbox/use-case.md +++ b/src/en/components/checkbox/use-case.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: checklist. description: An option or set of options where any of the available boxes can be selected. thumbnail: /images/common/components/preview-checkbox.svg - alt: Checkbox shows 3 checkboxes, the first one has a white box with a checkmark beside two dark grey long rectangular boxes indicating text followed by two empty checkboxes. They are white boxes with a black border and two grey long rectangular boxes indicating text. + alt: A column of three checkboxes, each with thin grey border and white fill beside a thick grey line to represent the label. Two of the three boxes have a checkmark. state: published translationKey: 'checkbox' tags: ['checkboxEN', 'usage'] diff --git a/src/en/components/date-modified/use-case.md b/src/en/components/date-modified/use-case.md index d895506a0..6347a2223 100644 --- a/src/en/components/date-modified/use-case.md +++ b/src/en/components/date-modified/use-case.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: last updated, version date. description: A timestamp of the last page update. thumbnail: /images/common/components/preview-date-modified.svg - alt: Date Modified showing timestamp of the last page update. + alt: A thick grey line, above a representation the page footer, represents the last page update text. tag: Core state: published translationKey: 'datemodified' diff --git a/src/en/components/details/use-case.md b/src/en/components/details/use-case.md index e5e2db8a2..43f391646 100644 --- a/src/en/components/details/use-case.md +++ b/src/en/components/details/use-case.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: accordion, collapse. description: An interactive switch to expand or collapse content. thumbnail: /images/common/components/preview-details.svg - alt: Details shows dark grey box with a triangle arrow pointing down to show the content is expanded, followed by dark grey boxes indicating text. + alt: A thick dark blue line with a triangle arrow pointing down to a dark grey vertical line represents the open details component. Two thick light grey lines stacked underneath the blue line represent lines of text. state: published translationKey: 'details' tags: ['detailsEN', 'usage'] diff --git a/src/en/components/error-message/use-case.md b/src/en/components/error-message/use-case.md index 7faea9b67..dd3431cac 100644 --- a/src/en/components/error-message/use-case.md +++ b/src/en/components/error-message/use-case.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: inline error. description: A description of a problem blocking a user goal. thumbnail: /images/common/components/preview-error-message.svg - alt: Error message component shows a light red box with a red box representing text. + alt: A light red box holding a grey box represents the error message text. state: published translationKey: 'errormessage' tags: ['errormessageEN', 'usage'] diff --git a/src/en/components/error-summary/use-case.md b/src/en/components/error-summary/use-case.md index 30a8dde75..de902e407 100644 --- a/src/en/components/error-summary/use-case.md +++ b/src/en/components/error-summary/use-case.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: error overview. description: A list of user errors on a page or in a flow. thumbnail: /images/common/components/preview-error-summary.svg - alt: Error Summary component shows a red outlined box with two big cascading grey boxes and three bulleted grey small boxes indicating text. + alt: A red outlined box holds one thick grey line above a stack of three smaller thick red lines representing a heading and text. state: published translationKey: 'errorsummary' tags: ['errorsummaryEN', 'usage'] diff --git a/src/en/components/fieldset/use-case.md b/src/en/components/fieldset/use-case.md index f105a9642..975ba460d 100644 --- a/src/en/components/fieldset/use-case.md +++ b/src/en/components/fieldset/use-case.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: form field. description: A group of multiple form elements. thumbnail: /images/common/components/preview-fieldset.svg - alt: Fieldset component shows a grouping of multiple form elements. One is a text input field and the other is a select box. The grouping has a larger box above them which represents a fieldset legend. + alt: A stack of thick lines represents multiple form elements, with grey lines for labels and white boxes for form fields. state: published translationKey: 'fieldset' tags: ['fieldsetEN', 'usage'] diff --git a/src/en/components/file-uploader/use-case.md b/src/en/components/file-uploader/use-case.md index cb4b5416a..747b64c95 100644 --- a/src/en/components/file-uploader/use-case.md +++ b/src/en/components/file-uploader/use-case.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: file input, dropzone. description: A file selector for document transfer. thumbnail: /images/en/components/preview/preview-file-uploader.svg - alt: File uploader component shows grey boxes indicating text with a choose file button, below is an uploaded file and a red remove button to remove the uploaded file. + alt: Two thick grey lines represent text above a choose file button. state: published translationKey: 'fileuploader' tags: ['fileuploaderEN', 'usage'] diff --git a/src/en/components/grid/use-case.md b/src/en/components/grid/use-case.md index 46c1583c3..9892b2ea7 100644 --- a/src/en/components/grid/use-case.md +++ b/src/en/components/grid/use-case.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: layout, columns, columns layout, grid container. description: A grid is a responsive, flexible column layout to position elements on a page. thumbnail: /images/common/components/preview-grid.svg - alt: Grid component shows four light yellow brown lined vertical boxes to show the layout. + alt: Three columns, separated by two dotted lines, hold thick grey lines representing text. tag: Experimental state: published translationKey: 'grid' diff --git a/src/en/components/header/use-case.md b/src/en/components/header/use-case.md index d1aaaf5f1..1564ee64f 100644 --- a/src/en/components/header/use-case.md +++ b/src/en/components/header/use-case.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: global header. description: The Government of Canada branded header landmark. thumbnail: /images/common/components/preview-header.svg - alt: Header component shows three banners layered on top of each other where the first one, the phase banner a dark blue box with white outlined box representing the phase of the site followed by a light blue box representing text explaining the phase. The second banner shows the federal identity composed of the Canada flag with boxes representing the text, followed by a grey box underlined in blue representing the language toggle. The last banner shows the site menu displayed by a large grey box, that has a dark blue box and 2 grey boxes representing the menu links. + alt: Three horizontal banners stacked on top of each other. The first is a grey banner with three dots on the left, representing a browser banner. The second is a dark blue banner with a white outline representing a phase banner. The third is white banner holding a Canada flag and two stacked, thick grey lines that represent lines of text. tag: Core state: published translationKey: 'header' diff --git a/src/en/components/pagination/use-case.md b/src/en/components/pagination/use-case.md index 2224a5893..b01f9589e 100644 --- a/src/en/components/pagination/use-case.md +++ b/src/en/components/pagination/use-case.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: page index, page navigation description: A page selector for a range of pages. thumbnail: /images/common/components/preview-pagination.svg - alt: Pagination component shows pagination with grey boxes and one dark navy blue box to indicate the page selected sandwhiched by a left arrow and right arrow to allow for previous and next navigation. The boxes are separated by an ellipsis. + alt: A row of four squares between two arrows, each pointing outward. The first square is blue and holds the number 1, representing selection of the first page. Between the two middle boxes is an ellipsis to indicate additional pages besides those represented by the squares. state: published translationKey: 'pagination' tags: ['paginationEN', 'usage'] diff --git a/src/en/components/stepper/use-case.md b/src/en/components/stepper/use-case.md index 5b218af07..6db0692af 100644 --- a/src/en/components/stepper/use-case.md +++ b/src/en/components/stepper/use-case.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: progress indicator, steps. description: A progress tracker for a multi-step process. thumbnail: /images/en/components/preview/preview-stepper.svg - alt: Stepper component shows steps, Step 1 of 4 below there is grey box representing the title of the page. + alt: Stepper component shows steps, Step 1 of 4. state: published translationKey: 'stepper' tags: ['stepperEN', 'usage'] diff --git a/src/en/components/top-navigation/use-case.md b/src/en/components/top-navigation/use-case.md index d361a009b..6deb9551f 100644 --- a/src/en/components/top-navigation/use-case.md +++ b/src/en/components/top-navigation/use-case.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: site menu, navigation, navbar description: A top navigation is a horizontal list of page links. thumbnail: /images/common/components/preview-top-nav.svg - alt: Top navigation shows site navigation with a dark blue box followed by two greyed boxes, the last having a dark blue line underneath to show selection. + alt: Top navigation shows site navigation with a light grey background and three dark grey boxes to represent menu items. state: published translationKey: 'topnavigation' tags: ['topnavigationEN', 'usage'] diff --git a/src/en/styles/colour/colour.md b/src/en/styles/colour/colour.md index 6384b1c7d..5ee8fef1e 100644 --- a/src/en/styles/colour/colour.md +++ b/src/en/styles/colour/colour.md @@ -9,7 +9,7 @@ eleventyNavigation: order: 1 description: Colour tokens store the colour values for styling components. thumbnail: /images/en/foundations/preview/preview-colour.svg - alt: + alt: Coloured squares in a four by three grid arrangement, with each column progressively shifting to a deeper hue of the initial square's colour. The first row has blue squares, the second row has grey squares, and the third row has red squares. state: published permalink: /en/styles/colour/ translationKey: 'colour' diff --git a/src/en/styles/design-tokens/design-tokens.md b/src/en/styles/design-tokens/design-tokens.md index d2c772f8d..b6905113c 100644 --- a/src/en/styles/design-tokens/design-tokens.md +++ b/src/en/styles/design-tokens/design-tokens.md @@ -35,7 +35,7 @@ GC Design System components have their own tokens. These component tokens are co When misused component tokens can change unexpectedly. They receive updates any time the component they're attached to gets updated. - +Three blue squares represent three steps to create the component design token for the default button background colour. To the right of the topmost square, the text reads colour #26374a. The first arrow points down to the next square whose text reads --gcds-color-blue-900. Another arrow points down from the second to the third square, whose text reads --gcds-button-primary-default-background. A third arrow points from the last square to a button with a dark blue background, showing the result of the new component design token. ### Global design tokens @@ -45,7 +45,7 @@ Global tokens are semantic. That means they have meanings or contexts associated Global tokens help you minimize future maintenance and establish a visual language for stronger communications. - +Three lines of text list examples of global design tokens for font size, spacing measurements, and font colour. On the first line, an arrow points from the font size 1.25rem to the token --gcds-font-sizes-text. On the second line, an arow points from the spacing length 3rem to the token --gcds-spacing-500. On the third line, an arrow points from the font colour #333333 to the token --gcds-text-primary. ### Base design tokens @@ -53,7 +53,7 @@ Base tokens are for you to use when you've run out of global token options. GC D Base tokens are not semantic so it's harder for everyone to understand what they represent. It's important to use them thoughtfully and consistently to support a familiar and predictable user experience for your service. - +Three lines of text list examples of base design tokens for greyscale colours. On the first line, an arrow points from the colour Grayscale 50 to the token --gcds-color-grayscale-50. On the second line, an arow points from the colour Grayscale 100 to the token --gcds-color-grayscale-100. On the third line, an arrow points from the colour Grayscale 300 to the token --gcds-color-grayscale-300. ## Token anatomy and naming progression @@ -68,18 +68,18 @@ Tokens are characterized by a naming progression. ### Component design token - +A line of five words, each highlighted in a different colour and underlined. Before the first word are two dashes with one dash between each word. A label tag beneath each connects each word to their name type. The first is the prefix: gcds. The second is the category (component): button. The third is the role: primary. The fourth is the state: default. The fifth is the property: background. The token name as a whole reads: --gcds-button-primary-default-background. ### Global design token - +A line of three words, each highlighted in a different colour and underlined. Before the first word are two dashes with one dash between each word. A label tag beneath each connects each word to their name type. The first is the prefix: gcds. The second is the category (property): text. The third is the role or state: primary. The token name as a whole reads: --gcds-text-primary. ### Global design token – global state - +A line of three words, each highlighted in a different colour and underlined. Before the first word are two dashes with one dash between each word. A label tag beneath each connects each word to their name type. The first is the prefix: gcds. The second is the category (state): focus. The third is the property: text. The token name as a whole reads: --gcds-focus-text. ### Base design tokens - +A line of three words, each highlighted in a different colour and underlined. Before the first word are two dashes with one dash between each word. A label tag beneath each connects each word to their name type. The first is the prefix: gcds. The second is the category (colour): grayscale. The third is the scale: 100. The token name as a whole reads: --gcds-grayscale-100. {% include "partials/helpus.njk" %} diff --git a/src/en/styles/spacing/spacing.md b/src/en/styles/spacing/spacing.md index 896337e7a..00c545dee 100644 --- a/src/en/styles/spacing/spacing.md +++ b/src/en/styles/spacing/spacing.md @@ -9,7 +9,7 @@ eleventyNavigation: order: 2 description: Spacing tokens help position elements onscreen and in components. thumbnail: /images/en/foundations/preview/preview-spacing.svg - alt: + alt: A red vertical line with two darker horizontal lines at either end shows the size of the token, labelled to its right --gcds-spacing-500. state: published permalink: /en/styles/spacing/ translationKey: 'spacing' diff --git a/src/en/styles/typography/typography.md b/src/en/styles/typography/typography.md index 62f49d59f..c3ff9f8b9 100644 --- a/src/en/styles/typography/typography.md +++ b/src/en/styles/typography/typography.md @@ -9,7 +9,7 @@ eleventyNavigation: order: 3 description: Typography tokens include the style, arrangement, and appearance of letters, numbers, and symbols. thumbnail: /images/en/foundations/preview/preview-typography.svg - alt: + alt: An upper and lowercase A appear above the word Typography on a baseline grid with four lines. state: published permalink: /en/styles/typography/ translationKey: 'typography' diff --git a/src/fr/composants/Case-a-cocher/case-dusage.md b/src/fr/composants/Case-a-cocher/case-dusage.md index 1ac896d1a..e8cef472b 100644 --- a/src/fr/composants/Case-a-cocher/case-dusage.md +++ b/src/fr/composants/Case-a-cocher/case-dusage.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: liste de contrôle, liste de vérification. description: Cases qui permettent la sélection d’une ou plusieurs options. thumbnail: /images/common/components/preview-checkbox.svg - alt: Un aperçu du composant case à cocher avec trois options. La première option a une boîte blanche au contour noir avec une coche à l'intérieur suivi de deux longues boîtes grises rectangulaires qui représentent du texte. Les deux autres options sont représentées d'une boîte blanche au contour noir, vide, suivie de deux longues boites grises représentant du texte. + alt: Une suite verticale de trois cases à cocher, chacune ayant une bordure gris pâle et un remplissage blanc, et étant accompagnée d’une épaisse ligne grise représentant un libellé. Deux des trois cases sont cochées par un crochet. state: published translationKey: 'checkbox' tags: ['checkboxFR', 'usage'] diff --git a/src/fr/composants/Chemin-de-navigation/case-dusage.md b/src/fr/composants/Chemin-de-navigation/case-dusage.md index e08dd389d..b00458e16 100644 --- a/src/fr/composants/Chemin-de-navigation/case-dusage.md +++ b/src/fr/composants/Chemin-de-navigation/case-dusage.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: fil d'ariane. description: Un chemin d'accès à la page actuelle à partir de chaque niveau précédent de la hiérarchie du site. thumbnail: /images/common/components/preview-breadcrumbs.svg - alt: Deux boîtes grises soulignées de bleu foncé avec une flèche bleu à leurs droite. Ces boîtes représentent les liens du chemin de navigation. + alt: Deux épaisses lignes grises côte à côte, séparées par un chevron, représentent les liens d’un chemin de navigation. tag: De base state: published translationKey: 'breadcrumbs' diff --git a/src/fr/composants/barre-de-navigation-superieure/case-dusage.md b/src/fr/composants/barre-de-navigation-superieure/case-dusage.md index 23b7f4afa..d9acefa7d 100644 --- a/src/fr/composants/barre-de-navigation-superieure/case-dusage.md +++ b/src/fr/composants/barre-de-navigation-superieure/case-dusage.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: menu du site, navigation, barre de navigation description: Une barre de navigation supérieure est une liste horizontale de liens de page. thumbnail: /images/common/components/preview-top-nav.svg - alt: Un aperçu du composant barre de navigation supérieure qui montre la navigation du site représentée par des boîtes grises alignés horizontalement. Une boîte bleue suivi de deux boîtes grises représentent les liens où la dernière boîte est surlignée afin de représenter le lien actif. + alt: La barre de navigation supérieure d’un site Web a un arrière-plan gris pâle et renferme trois petites lignes gris foncé, côte à côte, représentant des éléments du menu. state: published translationKey: 'topnavigation' tags: ['topnavigationFR', 'usage'] diff --git a/src/fr/composants/bouton/case-dusage.md b/src/fr/composants/bouton/case-dusage.md index 53404a5b8..34c73ae5a 100644 --- a/src/fr/composants/bouton/case-dusage.md +++ b/src/fr/composants/bouton/case-dusage.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: appel à l'action. description: Un objet interactif mettant en évidence une action. thumbnail: /images/common/components/preview-button.svg - alt: Un aperçu du composant bouton qui montre une boîte bleue foncée avec le texte en blanc et une flèche blanche à l'intérieur. + alt: Une boîte bleu foncé renfermant une épaisse ligne blanche représente un bouton et son libellé. state: published translationKey: 'button' tags: ['buttonFR', 'usage'] diff --git a/src/fr/composants/date-de-modification/case-dusage.md b/src/fr/composants/date-de-modification/case-dusage.md index 215b7b479..1405d3070 100644 --- a/src/fr/composants/date-de-modification/case-dusage.md +++ b/src/fr/composants/date-de-modification/case-dusage.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: dernière mise à jour, version. description: Horodatage de la dernière mise à jour d'une page. thumbnail: /images/common/components/preview-date-modified.svg - alt: Un aperçu du composant date modifiée qui montre une date de la dernière modification de la page. + alt: Une épaisse ligne grise surmontant une représentation du pied-de-page représente le libellé pour la date de dernière mise à jour de la page. tag: De base state: published translationKey: 'datemodified' diff --git a/src/fr/composants/details/case-dusage.md b/src/fr/composants/details/case-dusage.md index 1327bc9e2..537a73ad5 100644 --- a/src/fr/composants/details/case-dusage.md +++ b/src/fr/composants/details/case-dusage.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: accordéon, développer/réduire. description: Une bascule interactive permettant de dissimuler ou d'afficher du contenu. thumbnail: /images/common/components/preview-details.svg - alt: Un aperçu du composant détails qui montre une flèche bleue foncée pointant vers le bas suivie d'une boîte grise foncée soulignée de bleu foncé qui montre que le texte est développé et visible sur la page. Le texte est représenté par trois boîtes grises foncées. + alt: Une épaisse ligne bleu foncé précédée d’un triangle pointant vers le bas et donnant sur une ligne verticale gris foncé représente le composant Détails en mode ouvert. Deux épaisses lignes gris pâle alignées sous la ligne bleue représentent des lignes de texte. state: published translationKey: 'details' tags: ['detailsFR', 'usage'] diff --git a/src/fr/composants/en-tete/case-dusage.md b/src/fr/composants/en-tete/case-dusage.md index 61cffe352..c89e21118 100644 --- a/src/fr/composants/en-tete/case-dusage.md +++ b/src/fr/composants/en-tete/case-dusage.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: en-tête global. description: L'en-tête portant l'image de marque du gouvernement du Canada. thumbnail: /images/common/components/preview-header.svg - alt: TUn aperçu du compsant en-tête qui montre trois bandes une par dessus l'autre. La bande du haut est représentée par une boîte bleue foncée avec à l'intérieur un rectangle au contour blanc représentant la phase du produit suivi d'un rectangle bleu pâle. La seconde bande a l'image de marque du gouvernement du Canada et une petite boîte grise soulignée en bleue représentant un lien pour changer la langue du site. La troisième bande grise pâle a une boîte bleue foncée, et deux bôites grises alignées horizontalement représentant le menu du site. + alt: Trois bandes horizontales superposées l’une au-dessus de l’autre. La première est une bande grise avec trois petits cercles à gauche et représente la barre du navigateur. La deuxième est une bande bleu foncé avec une épaisse ligne pâle représentant la bannière de phase. La troisième est une bande blanche affichant le drapeau du Canada ainsi que deux épaisses lignes grises superposées représentant du texte. tag: De base state: published translationKey: 'header' diff --git a/src/fr/composants/grille/case-dusage.md b/src/fr/composants/grille/case-dusage.md index 0f70987fe..4d90880b6 100644 --- a/src/fr/composants/grille/case-dusage.md +++ b/src/fr/composants/grille/case-dusage.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: mise en page, colonnes, disposition en colonnes, boîte de style grille. description: Une grille est une mise en page réactive et flexible. thumbnail: /images/common/components/preview-grid.svg - alt: Un aperçu du composant grille qui montre quatre boîtes jaunes verticales alignées horizontalement représentant des colonnes sur une page. + alt: Trois colonnes séparées par des lignes verticales pointillées renferment d’épaisses lignes grises représentant du texte. tag: À l'essai state: published translationKey: 'grid' diff --git a/src/fr/composants/indicateur-detape/case-dusage.md b/src/fr/composants/indicateur-detape/case-dusage.md index 41c38991a..b7eef9668 100644 --- a/src/fr/composants/indicateur-detape/case-dusage.md +++ b/src/fr/composants/indicateur-detape/case-dusage.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: indicateur de progrès, étapes. description: Un suivi de l'avancement pour un processus en plusieurs étapes. thumbnail: /images/fr/components/preview/preview-stepper.svg - alt: Un aperçu du composant indicateur d'étape qui montre le texte Étape 1 de 4 avec une boîte grise en dessous représentant le titre de la page. + alt: Le composant Indicateur d’étape affiche « Étape 1 de 4 ». state: published translationKey: 'stepper' tags: ['stepperFR', 'usage'] diff --git a/src/fr/composants/jeu-de-champs/case-dusage.md b/src/fr/composants/jeu-de-champs/case-dusage.md index 70c4b3e46..0e12515b1 100644 --- a/src/fr/composants/jeu-de-champs/case-dusage.md +++ b/src/fr/composants/jeu-de-champs/case-dusage.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: champ de formulaire. description: Un groupe de plusieurs éléments de formulaire. thumbnail: /images/common/components/preview-fieldset.svg - alt: Un aperçu du composant jeu de champ qui montre une suite de plusieurs éléments. Une boîte grise foncée représentant le titre du groupe suivi d'une boîte grise représentant du texte. On voit ensuite une boîte de texte vide avec le curseur à l'intérieur suivi d'une boîte grise représentatn du texte et une boîte de sélection avec une boîte grise à l'intérieur représentant du texte. + alt: Une superposition de lignes horizontales représentent plusieurs éléments de formulaire, avec des lignes grises pour les libellés et des boîtes blanches pour les champs de formulaire. state: published translationKey: 'fieldset' tags: ['fieldsetFR', 'usage'] diff --git a/src/fr/composants/message-derreur/case-dusage.md b/src/fr/composants/message-derreur/case-dusage.md index 0df36a8f5..b8048c738 100644 --- a/src/fr/composants/message-derreur/case-dusage.md +++ b/src/fr/composants/message-derreur/case-dusage.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: indication d'erreur. description: Une description d'un problème représentant un obstacle à un objectif utilisateur. thumbnail: /images/common/components/preview-error-message.svg - alt: Un aperçu du composant message d'erreur qui montre une boîte rouge pâle avec à l'intérieur une boîte rouge foncée représentant du texte. + alt: Une boîte rouge pâle renferme une épaisse ligne grise qui représente le texte d’un message d’erreur. state: published translationKey: 'errormessage' tags: ['errormessageFR', 'usage'] diff --git a/src/fr/composants/pagination/case-dusage.md b/src/fr/composants/pagination/case-dusage.md index a6a8954a7..a3333044a 100644 --- a/src/fr/composants/pagination/case-dusage.md +++ b/src/fr/composants/pagination/case-dusage.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: navigation entre les pages. description: Un sélecteur de page pour naviguer dans une série de page. thumbnail: /images/common/components/preview-pagination.svg - alt: Un aperçu du composant pagination qui montre des boîtes carrées alignées horizontalement qui représentant les liens vers les pages. Les boîtes sont précédées d'une flèche vers la gauche représentant un lien vers la page précédante et suivies d'une flèche pointant vers la droite représentant le lien vers la prochaine page. Au milieu des boîtes on y voit trois petits points pour démontrer qu'il y a des liens disponibles non visibles. + alt: Une rangée de quatre carrés précédée et suivie d’une flèche pointant vers l’extérieur. Le premier carré est bleu et affiche le chiffre 1, et représente la sélection de la page 1. Des points de suspension séparent les carrés du milieu pour indiquer la présence de pages supplémentaires non visibles. state: published translationKey: 'pagination' tags: ['paginationFR', 'usage'] diff --git a/src/fr/composants/resume-de-erreurs/case-dusage.md b/src/fr/composants/resume-de-erreurs/case-dusage.md index 7d8669014..0d2fda0ed 100644 --- a/src/fr/composants/resume-de-erreurs/case-dusage.md +++ b/src/fr/composants/resume-de-erreurs/case-dusage.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: liste d'erreurs. description: Un résumé des erreurs consiste en une liste des erreurs de saisie dans un formulaire. thumbnail: /images/common/components/preview-error-summary.svg - alt: Un aperçu du composant sommaire d'erreurs qui montre une boîte blanche encadrée d'une ligne rouge avec à l'intérieur 2 grandes boîtes grises représentant du texte et une liste à puce de trois options représentées par des petites boîtes grises. + alt: Un encadré à la bordure rouge renferme une épaisse ligne grise qui représente un titre et qui surmonte trois épaisses lignes rouges plus courtes représentant du texte. state: published translationKey: 'errorsummary' tags: ['errorsummaryFR', 'usage'] diff --git a/src/fr/composants/televerseur-de-fichiers/case-dusage.md b/src/fr/composants/televerseur-de-fichiers/case-dusage.md index d93e3e2d1..d16ee2c5e 100644 --- a/src/fr/composants/televerseur-de-fichiers/case-dusage.md +++ b/src/fr/composants/televerseur-de-fichiers/case-dusage.md @@ -9,7 +9,7 @@ eleventyNavigation: otherNames: saisie de fichier, zone de dépôt. description: Un sélecteur de fichier pour le transfert de fichiers. thumbnail: /images/fr/components/preview/preview-file-uploader.svg - alt: Un aperçu du composant télécharger un fichier qui montre deux petites boîtes grises représentant du texte au dessus d'un bouton blanc de choisir un fichier avec contour bleu foncé et un icône formé d'une flèche bleue pointant vers le haut. Sous le bouton apparait une boîte grise au coin rond avec à l'intérieur une boîte rectangulaire grise foncée représentant le nom du fichier ainsi qu'un bouton rond rouge foncé avec un x à l'intérieur pour enlever le fichier. + alt: Deux épaisses lignes grises représentent le texte surmontant un bouton de sélection de fichier. state: published translationKey: 'fileuploader' tags: ['fileuploaderFR', 'usage'] diff --git a/src/fr/pages/index.md b/src/fr/pages/index.md index c4ebb919c..53dbad3ea 100644 --- a/src/fr/pages/index.md +++ b/src/fr/pages/index.md @@ -1,5 +1,5 @@ --- -title: Home +title: Accueil layout: 'layouts/home.njk' permalink: /fr/ translationKey: 'index' diff --git a/src/fr/styles/couleur/couleur.md b/src/fr/styles/couleur/couleur.md index 003ab8c7e..f0fb18d06 100644 --- a/src/fr/styles/couleur/couleur.md +++ b/src/fr/styles/couleur/couleur.md @@ -10,7 +10,7 @@ eleventyNavigation: order: 1 description: Les unités de style de couleur comprennent les valeurs nécessaires pour les composants de style. thumbnail: /images/en/foundations/preview/preview-colour.svg - alt: + alt: Des carrés colorés répartis en quatre colonnes de trois carrés, la première colonne étant de teinte pâle, et les suivantes devenant progressivement plus foncées. La première rangée montre des carrés bleus, la deuxième montre des carrés gris et la troisième montre des carrés rouges. state: published permalink: /fr/styles/couleur/ tokenTable: diff --git a/src/fr/styles/espacement/espacement.md b/src/fr/styles/espacement/espacement.md index 7ded05f9a..1658fb85f 100644 --- a/src/fr/styles/espacement/espacement.md +++ b/src/fr/styles/espacement/espacement.md @@ -10,7 +10,7 @@ eleventyNavigation: order: 2 description: Les unités de style d'espacement aident à disposer les éléments à l'écran et dans les composants. thumbnail: /images/en/foundations/preview/preview-spacing.svg - alt: + alt: Une ligne rouge verticale terminée à chaque extrémité par une courte ligne horizontale plus sombre montre la taille de l’espacement correspondant à l’unité de style écrite à sa droite, --gcds-spacing-500. state: published tokenTable: headers: diff --git a/src/fr/styles/typographie/typographie.md b/src/fr/styles/typographie/typographie.md index 43e463bdb..a330590d9 100644 --- a/src/fr/styles/typographie/typographie.md +++ b/src/fr/styles/typographie/typographie.md @@ -10,7 +10,7 @@ eleventyNavigation: order: 3 description: Les unités de style typographiques comprennent le style, la disposition et l'apparence des lettres, chiffres et symboles. thumbnail: /images/fr/foundations/preview/preview-typography.svg - alt: + alt: Un A majuscule et un A minuscule sont écrits au-dessus du mot Typographie, le tout dans une grille composée de quatre lignes de base. state: published github: https://github.com/cds-snc/gcds-tokens tokenTable: diff --git a/src/fr/styles/unites-de-style/unites-de-style.md b/src/fr/styles/unites-de-style/unites-de-style.md index d03290a05..227eff7cf 100644 --- a/src/fr/styles/unites-de-style/unites-de-style.md +++ b/src/fr/styles/unites-de-style/unites-de-style.md @@ -37,7 +37,7 @@ Les composants de Système de design GC possèdent leurs propres unités de styl Si elles sont utilisées incorrectement, les unités de style de composant peuvent avoir des comportements imprévisibles. Elles sont mises à jour chaque fois que le composant associé est mis à jour. - +Trois carrés bleus représentent les trois étapes pour créer l’unité de style de la couleur d’arrière-plan du composant Bouton standard. À droite du carré le plus haut, un texte indique la couleur #26374a. Juste en-dessous du carré, une flèche pointe vers le carré suivant, à droite duquel un texte indique --gcds-color-blue-900. Une autre flèche pointe vers le troisième et dernier carré, à droite duquel un texte indique --gcds-button-primary-default-background. Une dernière flèche pointe du troisième carré à un bouton dont l’arrière-plan est bleu foncé, soit le résultat de l’unité de style nouvellement créée pour le composant. ### Unités de style globales @@ -47,7 +47,15 @@ Les unités de style globales suivent des règles sémantiques. C'est-à-dire qu Les unités de style globales aident à réduire les besoins futurs en maintenance et à établir un langage visuel pour une meilleure communication. - +Trois lignes de texte montrent respectivement un exemple d’unité de style globale pour la taille de police, l’espacement et la couleur de police. La première ligne affiche une taille de police de 1.25rem suivie d’une flèche pointant vers l’unité de style --gcds-font-sizes-text. La deuxième ligne affiche un espacement de 3rem suivi d’une flèche pointant vers l’unité de style --gcds-spacing-500. La troisième ligne affiche une couleur de police #333333 suivie d’une flèche pointant vers l’unité de style --gcds-text-primary. + +## Unités de style de base + +Utilisez les unités de style de base lorsque vous avez épuisé toutes les options d’unités de style globales. Les unités de style de base de Système de design GC offrent une gamme de styles qui permet d’agencer votre contenu à la palette des unités de style de couleur globales. + +Les unités de style de base n’emploient aucune structure sémantique et sont donc plus difficiles à interpréter. Il est important de les utiliser judicieusement et de façon uniforme afin d’assurer une expérience utilisateur familière et prévisible pour votre service. + +Trois lignes de texte montrent des exemples d’unités de style de base pour des niveaux de gris. La première ligne affiche un niveau de gris 50 suivi d’une flèche pointant vers l’unité de style --gcds-color-grayscale-50. La deuxième ligne affiche un niveau de gris 100 suivi d’une flèche pointant vers l’unité de style --gcds-color-grayscale-100. La troisième ligne affiche un niveau de gris 300 suivi d’une flèche pointant vers l’unité de style --gcds-color-grayscale-300. ## Structure et nomenclature progressive des unités de style @@ -62,18 +70,18 @@ Les unités de style sont caractérisées par une nomenclature progressive. ### Unité de style de composant - +Une ligne de cinq mots où chaque mot est surligné et souligné d’une couleur différente. Deux traits d’union précèdent le premier mot, et un trait d’union sépare chaque mot. Chaque mot est rattaché à une étiquette affichant son type de nom. Le type de nom du premier mot est un préfixe : gcds. Le type de nom du deuxième mot est une catégorie (composant) : button. Le type de nom du troisième mot est un rôle : primary. Le type de nom du quatrième mot est un état : default. Le type de nom du cinquième mot est une propriété : background L’unité de style entière se lit comme suit : --gcds-button-primary-default-background. ### Unité de style globale - +Une ligne de trois mots où chaque mot est surligné et souligné d’une couleur différente. Deux traits d’union précèdent le premier mot, et un trait d’union sépare chaque mot. Chaque mot est rattaché à une étiquette affichant son type de nom. Le type de nom du premier mot est un préfixe : gcds. Le type de nom du deuxième mot est une catégorie (composant) : text. Le type de nom du troisième mot est un rôle ou un état : primary. L’unité de style entière se lit comme suit : --gcds-text-primary. ### Unité de style globale – état global - +Une ligne de trois mots où chaque mot est surligné et souligné d’une couleur différente. Deux traits d’union précèdent le premier mot, et un trait d’union sépare chaque mot. Chaque mot est rattaché à une étiquette affichant son type de nom. Le type de nom du premier mot est un préfixe : gcds. Le type de nom du deuxième mot est une catégorie (état) : focus. Le type de nom du troisième mot est une propriété : text. L’unité de style entière se lit comme suit : --gcds-focus-text. ### Unité de style de base - +Une ligne de trois mots où chaque mot est surligné et souligné d’une couleur différente. Deux traits d’union précèdent le premier mot, et un trait d’union sépare chaque mot. Chaque mot est rattaché à une étiquette affichant son type de nom. Le type de nom du premier mot est un préfixe : gcds. Le type de nom du deuxième mot est une catégorie (couleur) : grayscale. Le type de nom du troisième mot est une échelle : 100. L’unité de style entière se lit comme suit : --gcds-grayscale-100. {% include "partials/helpus.njk" %} diff --git a/src/images/en/foundations/tokens/design-tokens-global.svg b/src/images/en/foundations/tokens/design-tokens-global.svg index 2f39adb53..4e9a56a6c 100644 --- a/src/images/en/foundations/tokens/design-tokens-global.svg +++ b/src/images/en/foundations/tokens/design-tokens-global.svg @@ -1,11 +1,18 @@ - + - - + + + - - + + + + + + + + diff --git a/src/images/fr/foundations/tokens/design-tokens-base.svg b/src/images/fr/foundations/tokens/design-tokens-base.svg new file mode 100644 index 000000000..5519e161c --- /dev/null +++ b/src/images/fr/foundations/tokens/design-tokens-base.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + +