Skip to content

Testing GCDS tokens#2113

Closed
amazingphilippe wants to merge 2 commits intomainfrom
gcds-tokens
Closed

Testing GCDS tokens#2113
amazingphilippe wants to merge 2 commits intomainfrom
gcds-tokens

Conversation

@amazingphilippe
Copy link
Copy Markdown
Contributor

@amazingphilippe amazingphilippe commented Mar 14, 2025 •
edited
Loading

Summary | Résumé

Testing GCDS Tokens

This is a draft to share the impact of using GCDS Tokens on Notify. Overall it works well, and we can easily customize the bits where GCDS and Notify don't really align well yet, such as with the heading font scale or colour scales.

This will need to be broken up in smaller PRs, just to get the codebase ready to receive the GCDS Tokens with their naming conventions.

@amazingphilippe amazingphilippe marked this pull request as ready for review March 14, 2025 15:48
github-advanced-security[bot]
github-advanced-security AI found potential problems Mar 14, 2025
View reviewed changes
Comment thread tailwind.config.js
import plugin from "tailwindcss/plugin";
import tokens from "@cdssnc/gcds-tokens/build/tailwind/tailwind.tokens.json";

const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;

Check notice

Code scanning / CodeQL

Unused variable, import, function or class

Unused variable blue.

Copilot Autofix

AI about 1 year ago

To fix the problem, we need to remove the unused variable blue from the code. This involves editing the line where blue is destructured from tokens.Tokens.color and removing it. This change will not affect the existing functionality of the code.

Suggested changeset 1
tailwind.config.js

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/tailwind.config.js b/tailwind.config.js
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,3 +3,3 @@
 
-const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
+const { grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
 const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
EOF
@@ -3,3 +3,3 @@

const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
const { grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
Copilot is powered by AI and may make mistakes. Always verify output.
Unable to commit as this autofix suggestion is now outdated
Comment thread tailwind.config.js
import plugin from "tailwindcss/plugin";
import tokens from "@cdssnc/gcds-tokens/build/tailwind/tailwind.tokens.json";

const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;

Check notice

Code scanning / CodeQL

Unused variable, import, function or class

Unused variable grayscale.

Copilot Autofix

AI about 1 year ago

To fix the problem, we need to remove the unused variable grayscale from the import statement on line 4. This will make the code cleaner and eliminate any confusion about the purpose of the variable.

  • Remove the grayscale variable from the destructuring assignment on line 4.
  • Ensure that no other parts of the code are affected by this change.
Suggested changeset 1
tailwind.config.js

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/tailwind.config.js b/tailwind.config.js
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,3 +3,3 @@
 
-const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
+const { blue, green, orange, purple, red, yellow } = tokens.Tokens.color;
 const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
EOF
@@ -3,3 +3,3 @@

const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
const { blue, green, orange, purple, red, yellow } = tokens.Tokens.color;
const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
Copilot is powered by AI and may make mistakes. Always verify output.
Unable to commit as this autofix suggestion is now outdated
Comment thread tailwind.config.js
import plugin from "tailwindcss/plugin";
import tokens from "@cdssnc/gcds-tokens/build/tailwind/tailwind.tokens.json";

const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;

Check notice

Code scanning / CodeQL

Unused variable, import, function or class

Unused variable green.

Copilot Autofix

AI about 1 year ago

To fix the problem, we need to remove the unused variable green from the import statement on line 4. This will make the code cleaner and potentially improve performance by avoiding unnecessary variable declarations.

  • Remove the green variable from the destructuring assignment on line 4.
  • Ensure that no other parts of the code are affected by this change.
Suggested changeset 1
tailwind.config.js

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/tailwind.config.js b/tailwind.config.js
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,3 +3,3 @@
 
-const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
+const { blue, grayscale, orange, purple, red, yellow } = tokens.Tokens.color;
 const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
EOF
@@ -3,3 +3,3 @@

const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
const { blue, grayscale, orange, purple, red, yellow } = tokens.Tokens.color;
const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
Copilot is powered by AI and may make mistakes. Always verify output.
Unable to commit as this autofix suggestion is now outdated
Comment thread tailwind.config.js
import plugin from "tailwindcss/plugin";
import tokens from "@cdssnc/gcds-tokens/build/tailwind/tailwind.tokens.json";

const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;

Check notice

Code scanning / CodeQL

Unused variable, import, function or class

Unused variable orange.

Copilot Autofix

AI about 1 year ago

To fix the problem, we need to remove the unused variable orange from the destructuring assignment on line 4. This will improve code readability and eliminate any unnecessary computation associated with initializing orange.

  • Remove orange from the destructuring assignment on line 4.
  • Ensure that no other parts of the code are affected by this change.
Suggested changeset 1
tailwind.config.js

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/tailwind.config.js b/tailwind.config.js
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,3 +3,3 @@
 
-const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
+const { blue, grayscale, green, purple, red, yellow } = tokens.Tokens.color;
 const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
EOF
@@ -3,3 +3,3 @@

const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
const { blue, grayscale, green, purple, red, yellow } = tokens.Tokens.color;
const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
Copilot is powered by AI and may make mistakes. Always verify output.
Unable to commit as this autofix suggestion is now outdated
Comment thread tailwind.config.js
import plugin from "tailwindcss/plugin";
import tokens from "@cdssnc/gcds-tokens/build/tailwind/tailwind.tokens.json";

const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;

Check notice

Code scanning / CodeQL

Unused variable, import, function or class

Unused variable purple.

Copilot Autofix

AI about 1 year ago

To fix the problem, we need to remove the unused variable purple from the code. This involves deleting the purple variable from the destructuring assignment on line 4. This change will not affect the existing functionality of the code, as purple is not used anywhere.

Suggested changeset 1
tailwind.config.js

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/tailwind.config.js b/tailwind.config.js
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,3 +3,3 @@
 
-const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
+const { blue, grayscale, green, orange, red, yellow } = tokens.Tokens.color;
 const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
EOF
@@ -3,3 +3,3 @@

const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
const { blue, grayscale, green, orange, red, yellow } = tokens.Tokens.color;
const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
Copilot is powered by AI and may make mistakes. Always verify output.
Unable to commit as this autofix suggestion is now outdated
Comment thread tailwind.config.js
import tokens from "@cdssnc/gcds-tokens/build/tailwind/tailwind.tokens.json";

const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;

Check notice

Code scanning / CodeQL

Unused variable, import, function or class

Unused variable focus.

Copilot Autofix

AI about 1 year ago

To fix the problem, we need to remove the unused variable focus from the code. This involves editing the line where focus is destructured from tokens.Tokens and removing it from the list of destructured variables. This change will not affect the existing functionality of the code.

Suggested changeset 1
tailwind.config.js

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/tailwind.config.js b/tailwind.config.js
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,3 +4,3 @@
 const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
-const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
+const { bg, border, container, danger, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
 
EOF
@@ -4,3 +4,3 @@
const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
const { bg, border, container, danger, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;

Copilot is powered by AI and may make mistakes. Always verify output.
Unable to commit as this autofix suggestion is now outdated
Comment thread tailwind.config.js
import tokens from "@cdssnc/gcds-tokens/build/tailwind/tailwind.tokens.json";

const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;

Check notice

Code scanning / CodeQL

Unused variable, import, function or class

Unused variable font.

Copilot Autofix

AI about 1 year ago

To fix the problem, we need to remove the unused variable font from the code. This involves editing the line where font is destructured from tokens.Tokens and removing font from the list of destructured variables. This change will not affect the existing functionality of the code.

Suggested changeset 1
tailwind.config.js

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/tailwind.config.js b/tailwind.config.js
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,3 +4,3 @@
 const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
-const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
+const { bg, border, container, danger, focus, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
 
EOF
@@ -4,3 +4,3 @@
const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
const { bg, border, container, danger, focus, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;

Copilot is powered by AI and may make mistakes. Always verify output.
Unable to commit as this autofix suggestion is now outdated
Comment thread tailwind.config.js
import tokens from "@cdssnc/gcds-tokens/build/tailwind/tailwind.tokens.json";

const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;

Check notice

Code scanning / CodeQL

Unused variable, import, function or class

Unused variable fontWeights.

Copilot Autofix

AI about 1 year ago

To fix the problem, we need to remove the unused variable fontWeights from the code. This involves editing the line where fontWeights is destructured from the tokens.Tokens object. By removing fontWeights, we ensure that the code is cleaner and potentially more efficient.

Suggested changeset 1
tailwind.config.js

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/tailwind.config.js b/tailwind.config.js
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,3 +4,3 @@
 const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
-const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
+const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, lineHeights, link, outline, spacing, text } = tokens.Tokens;
 
EOF
@@ -4,3 +4,3 @@
const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, lineHeights, link, outline, spacing, text } = tokens.Tokens;

Copilot is powered by AI and may make mistakes. Always verify output.
Unable to commit as this autofix suggestion is now outdated
Comment thread tailwind.config.js
import tokens from "@cdssnc/gcds-tokens/build/tailwind/tailwind.tokens.json";

const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;

Check notice

Code scanning / CodeQL

Unused variable, import, function or class

Unused variable outline.

Copilot Autofix

AI about 1 year ago

To fix the problem, we need to remove the unused variable outline from the code. This involves editing the line where outline is destructured from tokens.Tokens and removing it from the list of destructured variables. This change will not affect the existing functionality of the code.

Suggested changeset 1
tailwind.config.js

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/tailwind.config.js b/tailwind.config.js
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,3 +4,3 @@
 const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
-const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
+const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, spacing, text } = tokens.Tokens;
 
EOF
@@ -4,3 +4,3 @@
const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, spacing, text } = tokens.Tokens;

Copilot is powered by AI and may make mistakes. Always verify output.
Unable to commit as this autofix suggestion is now outdated
Comment thread tailwind.config.js
import tokens from "@cdssnc/gcds-tokens/build/tailwind/tailwind.tokens.json";

const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;

Check notice

Code scanning / CodeQL

Unused variable, import, function or class

Unused variable spacing.

Copilot Autofix

AI about 1 year ago

To fix the problem, we need to remove the unused variable spacing from the code. This involves deleting the spacing variable from the destructuring assignment on line 5. This change will not affect the existing functionality of the code since spacing is not used anywhere.

Suggested changeset 1
tailwind.config.js

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/tailwind.config.js b/tailwind.config.js
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,3 +4,3 @@
 const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
-const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
+const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, text } = tokens.Tokens;
 
EOF
@@ -4,3 +4,3 @@
const { blue, grayscale, green, orange, purple, red, yellow } = tokens.Tokens.color;
const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, spacing, text } = tokens.Tokens;
const { bg, border, container, danger, focus, font, fontFamilies, fontSizes, fontWeights, lineHeights, link, outline, text } = tokens.Tokens;

Copilot is powered by AI and may make mistakes. Always verify output.
Unable to commit as this autofix suggestion is now outdated
@amazingphilippe amazingphilippe marked this pull request as draft March 14, 2025 15:50
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Mar 14, 2025

🧪 Review environment

https://g5l6tt2q6llt3ea7jexjwbo7e40lcfpj.lambda-url.ca-central-1.on.aws/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@amazingphilippe @github-advanced-security