GC Design System Tokens are the smallest building blocks of the design system. They represent design decisions for basic elements like colour, typography, and spacing, creating a curated set of options that we base our designs on.
Tokens replace hard-coded values with variables that can be reused throughout the entire code base which makes it easier to maintain and update any code. Our tokens help us create a consistent visual experience that meets the Government of Canada requirements. They also improve communication between design and development by establishing a shared language.
We are using Style Dictionary to build our tokens.
What are GCDS Design Tokens and what tokens are available to me? Refer to our documentation on styles and design tokens on our website for details.
If you are using any of our GCDS components or the GCDS utility framework, and have imported a CSS stylesheet like this:
import '@cdssnc/gcds-components/gcds.css';You already have our design tokens available to you! Simply use them in your custom stylesheets like so:
font: var(--gcds-font-text);
color: var(--gcds-text-primary);
background-color: var(--gcds-bg-white);If you want to use the design tokens on its own, without our GCDS Components or GCDS Utility Framework
Navigate to the root folder of your project and run:
npm i @cdssnc/gcds-tokens
Choose to include all GCDS tokens if you are planning on using the component, global and base tokens. Add all GCDS tokens to your CSS by importing the tokens.css file:
<!-- GC Design System Tokens -->
@import 'path/to/node_modules/@cdssnc/gcds-tokens/build/web/css/tokens.css'Add all GCDS tokens in your SCSS by importing the tokens.scss file:
<!-- GC Design System Tokens -->
@import 'path/to/node_modules/@cdssnc/gcds-tokens/build/web/scss/tokens.scss'Choose to only include GCDS component tokens if you are planning on only using component-specific tokens. Add GCDS component-specific tokens to your CSS by importing the CSS file for a specific component. For example, add the component tokens for the gcds-button component by importing the button.css file:
<!-- GC Design System Tokens -->
@import 'path/to/node_modules/@cdssnc/gcds-tokens/build/web/css/components/button.css'Add the component tokens in your SCSS for the gcds-button component by importing the button.scss file:
<!-- GC Design System Tokens -->
@import 'path/to/node_modules/@cdssnc/gcds-tokens/build/web/scss/components/button.scss'Repeat the above step for each component-specific CSS or SCSS file you want to include. Or include all component-specific tokens to your CSS by importing the components.css file:
<!-- GC Design System Tokens -->
@import 'path/to/node_modules/@cdssnc/gcds-tokens/build/web/css/components.css'Add all component tokens in your SCSS by importing the components.scss file:
<!-- GC Design System Tokens -->
@import 'path/to/node_modules/@cdssnc/gcds-tokens/build/web/scss/components.scss'Choose to only include the GCDS global and base tokens if you don’t need component-specific tokens. Add GCDS global and base tokens to your CSS by importing the base.css and global.css files:
<!-- GC Design System Tokens -->
@import 'path/to/node_modules/@cdssnc/gcds-tokens/build/web/css/base.css'
@import 'path/to/node_modules/@cdssnc/gcds-tokens/build/web/css/global.css'Add the GCDS global and base tokens to your SCSS by importing the base.scss and global.scss files:
<!-- GC Design System Tokens -->
@import 'path/to/node_modules/@cdssnc/gcds-tokens/build/web/scss/base.scss'
@import 'path/to/node_modules/@cdssnc/gcds-tokens/build/web/scss/global.scss'- Clone the repo
git clone https://github.com/cds-snc/gcds-tokens. - Run
npm installto install all Node.js dependencies. - Run
npm run buildto build the tokens.
If you are interested in contributing to GC Design System Tokens, please read our contributing guidelines.
Code released under the MIT License.
Les unités de style de Système de design GC sont les plus petits blocs de construction du système de design. Ces unités de style correspondent aux décisions de conception des éléments de base, comme la couleur, la typographie, l'espacement, ainsi que la création d'un ensemble d'options présélectionnées que nous utilisons pour nos conceptions.
Les unités de style remplacent les valeurs codées en dur et s'accompagnent de variables pouvant facilement être réutilisées à travers la base de code, ce qui facilite l'entretien et la mise à jour de n'importe quel code.
Nos unités de style contribuent à créer une expérience visuelle uniforme qui satisfait aux exigences du gouvernement du Canada. Ils améliorent également la communication entre le design et le développement en établissant un langage partagé.
Nous utilisons Style Dictionary pour concevoir nos unités de style.
Que sont les unités de style de Système de design GC et quelles sont celles à ma disposition? Pour en savoir plus, référez-vous à notre documentation sur les styles et les unités de style sur notre site Web.
Si vous utilisez l’un des composants de Système de design GC ou son cadre utilitaire, et que vous avez importé une feuille de style CSS de la façon suivante :
import '@cdssnc/gcds-components/gcds.css';Alors vous avez déjà à votre disposition nos unités de style! Utilisez-les simplement dans vos feuilles de style personnalisées comme ceci :
font: var(--gcds-font-text);
color: var(--gcds-text-primary);
background-color: var(--gcds-bg-white);Vous pouvez utiliser les unités de style seules, sans les composants ou le cadre utilitaire de Système de design GC.
Naviguez jusqu’au dossier racine de votre projet et exécutez :
npm i @cdssnc/gcds-tokens
Choisissez d’inclure toutes les unités de style de Système de design GC si vous planifiez utiliser les unités de styles globales et de base, ainsi que celles des composants. Ajoutez toutes les unités de style à votre CSS en important le fichier tokens.css :
<!-- Unités de style de Système de design GC -->
@import 'path/to/node_modules/@cdssnc/gcds-tokens/build/web/css/tokens.css'Ajoutez toutes les unités de style à votre SCSS en important le fichier tokens.scss :
<!-- Unités de style de Système de design GC -->
@import 'path/to/node_modules/@cdssnc/gcds-tokens/build/web/scss/tokens.scss'Choisissez d’inclure uniquement les unités de style des composants de Système de design GC si vous planifiez n’utiliser que les unités de style propres à des composants. Ajoutez les unités de style propres à un composant dans votre CSS en important le fichier CSS du composant en question. Par exemple, ajoutez les unités de style du composant gcds-button en important le fichier button.css :
<!-- Unités de style de Système de design GC -->
@import 'path/to/node_modules/@cdssnc/gcds-tokens/build/web/css/components/button.css'Ajoutez les unités de style du composant gcds-button à votre SCSS en important le fichier button.scss :
<!-- Unités de style de Système de design GC -->
@import 'path/to/node_modules/@cdssnc/gcds-tokens/build/web/scss/components/button.scss'Répétez l’étape ci-dessus pour chaque composant dont vous souhaitez inclure le fichier CSS ou SCSS. Vous pouvez aussi ajouter toutes les unités de style propres aux composants de Système de design GC à votre CSS en important le fichier components.css :
<!-- Unités de style de Système de design GC -->
@import 'path/to/node_modules/@cdssnc/gcds-tokens/build/web/css/components.css'Ou toutes les unités de style propres aux composants de Système de design GC à votre SCSS en important le fichier components.scss :
<!-- Unités de style de Système de design GC -->
@import 'path/to/node_modules/@cdssnc/gcds-tokens/build/web/scss/components.scss'Choisissez d’inclure uniquement les unités de styles globales et de base de Système de design GC si vous n’avez pas besoin d’unités de style propres à des composants. Ajoutez les unités de style globales et de base à votre CSS en important les fichiers base.css et global.css :
<!-- Unités de style de Système de design GC -->
@import 'path/to/node_modules/@cdssnc/gcds-tokens/build/web/css/base.css'
@import 'path/to/node_modules/@cdssnc/gcds-tokens/build/web/css/global.css'Ajoutez les unités de style globales et de base à votre SCSS en important les fichiers base.scss et global.scss :
<!-- Unités de style de Système de design GC -->
@import 'path/to/node_modules/@cdssnc/gcds-tokens/build/web/scss/base.scss'
@import 'path/to/node_modules/@cdssnc/gcds-tokens/build/web/scss/global.scss'- Copiez le référentiel
git clone https://github.com/cds-snc/gcds-tokens. - Exécutez ensuite
npm installpour installer toutes les dépendances Node.js. - Finalement, exécutez
npm run buildpour compiler les unités de style.
Si vous souhaitez contribuer aux unités de style de Système de design GC, veuillez lire nos lignes directrices sur la contribution.
Code publié en vertu de la licence MIT (en anglais).