Skip to content

Testing GCDS tokens #2113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
amazingphilippe wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Testing GCDS tokens #2113

amazingphilippe wants to merge 2 commits into from

Conversation

@amazingphilippe
Copy link
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 bot found potential problems Mar 14, 2025
View reviewed changes
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 Note

Unused variable blue.

Copilot Autofix

AI 10 months 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.
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 Note

Unused variable grayscale.

Copilot Autofix

AI 10 months 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.
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 Note

Unused variable green.

Copilot Autofix

AI 10 months 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.
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 Note

Unused variable orange.

Copilot Autofix

AI 10 months 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.
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 Note

Unused variable purple.

Copilot Autofix

AI 10 months 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.
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 Note

Unused variable focus.

Copilot Autofix

AI 10 months 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.
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 Note

Unused variable font.

Copilot Autofix

AI 10 months 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.
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 Note

Unused variable fontWeights.

Copilot Autofix

AI 10 months 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.
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 Note

Unused variable outline.

Copilot Autofix

AI 10 months 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.
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 Note

Unused variable spacing.

Copilot Autofix

AI 10 months 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.
@amazingphilippe amazingphilippe marked this pull request as draft March 14, 2025 15:50
@github-actions
Copy link

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