chore: Add GCDS Tokens (#4349)

add package & initial tailwind config
cds-snc · Oct 3, 2024 · abd965d · abd965d
1 parent 5894b7f
commit abd965d
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "@aws-sdk/client-sqs": "3.515.0",
     "@aws-sdk/lib-dynamodb": "3.515.0",
     "@casl/ability": "6.5.0",
+    "@cdssnc/gcds-tokens": "^1.20.0",
     "@headlessui/react": "^1.7.18",
     "@lexical/react": "^0.12.6",
     "@neshca/cache-handler": "^1.2.1",

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,6 +1,10 @@
+import tokens from "@cdssnc/gcds-tokens/build/figma/figma.tokens.json";
+
 /** @type {import('tailwindcss').Config} */
 const colors = require("tailwindcss/colors");
 
+const { red, green, blue, grayscale } = tokens.Tokens.color;
+
 module.exports = {
   theme: {
     extend: {
@@ -131,6 +135,37 @@ module.exports = {
           form: "#0b0c0c",
         },
         transparent: "transparent",
+        // see: https://design-system.alpha.canada.ca/en/styles/colour/
+        gcds: {
+          gray: {
+            50: grayscale[50].value,
+            100: grayscale[100].value,
+            300: grayscale[300].value,
+            500: grayscale[500].value,
+            700: grayscale[700].value,
+            800: grayscale[800].value,
+            1000: grayscale[1000].value,
+          },
+          blue: {
+            100: blue[100].value,
+            500: blue[500].value,
+            700: blue[700].value,
+            800: blue[800].value,
+            850: blue[850].value,
+            900: blue[900].value,
+          },
+          green: {
+            100: green[100].value,
+            500: green[500].value,
+            700: green[700].value,
+          },
+          red: {
+            100: red[100].value,
+            500: red[500].value,
+            700: red[700].value,
+            900: red[900].value,
+          },
+        },
       },
       fontSize: {
         sm: ["16px", "22px"],

diff --git a/yarn.lock b/yarn.lock
@@ -2322,6 +2322,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cdssnc/gcds-tokens@npm:^1.20.0":
+  version: 1.20.0
+  resolution: "@cdssnc/gcds-tokens@npm:1.20.0"
+  checksum: 10c0/1d9d89238f945556a0984b738ba3c608b6ad72920e83b35d3f1868bc8b7ebc942fe212766d13bd167e82d9b6f9212e3613a5dd38d062011898405694af68757a
+  languageName: node
+  linkType: hard
+
 "@colors/colors@npm:1.5.0":
   version: 1.5.0
   resolution: "@colors/colors@npm:1.5.0"
@@ -12730,6 +12737,7 @@ __metadata:
     "@babel/core": "npm:^7.23.6"
     "@babel/preset-typescript": "npm:^7.24.7"
     "@casl/ability": "npm:6.5.0"
+    "@cdssnc/gcds-tokens": "npm:^1.20.0"
     "@headlessui/react": "npm:^1.7.18"
     "@jest/globals": "npm:^29.7.0"
     "@lexical/react": "npm:^0.12.6"