Skip to content

feat(design): add primitive token layer (tokens.css) #11299

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

Open
jd wants to merge 1 commit into
base: main
Choose a base branch
from
+40 −0
Open

feat(design): add primitive token layer (tokens.css) #11299

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions src/styles/tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/*
Primitive tokens — fixed values. Do NOT remap in dark mode.
Components must NEVER reference these directly. Use semantic tokens
in theme.css instead.
*/

:root {
/* Neutrals — clean ramp, no duplicates (intentionally diverges from
Comment on lines +1 to +8
Copy link

Copilot AI Apr 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This new token file doesn’t appear to be imported/loaded anywhere in src (searching for tokens.css only finds this file), so the variables won’t be available at runtime. If the intent is to make these tokens the foundation for theme.css, ensure tokens.css is imported before theme/index styles (or integrated via an import chain) and then update theme variables to reference it.

Copilot uses AI. Check for mistakes.
mergify.com which has gray-50 == gray-200 collisions). */
--color-white: #ffffff;
--color-dark: #000000;
--color-gray-50: #f6f7f8; /* Docs body-bg tone — preserves the historical
"Mergify gray" character that the translucent
navbar relies on for visual presence. */
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-400: #9ca3af;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;

/* Product palette — verbatim from mergify.com/DESIGN.md.
Copy link

Copilot AI Apr 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The comment says the product palette is “verbatim from mergify.com/DESIGN.md”, but there’s no DESIGN.md in this repository (search returns no matches). To keep this maintainable/auditable, link to an actual canonical source (URL) or add the referenced doc to the repo and point at its path.

Suggested change
/* Product palette — verbatim from mergify.com/DESIGN.md.
/* Product palette — brand colors used by product areas.

Copilot uses AI. Check for mistakes.
Brand colors. Do NOT flip in dark mode. */
--color-teal-400: #82ddbe; /* Merge Queue accent */
--color-teal-700: #1cb893; /* Merge Queue label */
--color-purple-400: #858ef4; /* CI Insights accent */
--color-purple-700: #4d59e0; /* CI Insights label */
--color-orange-400: #f9b070; /* Test Insights accent */
--color-orange-700: #f27b2a; /* Test Insights label */
--color-blue-400: #85c9f4; /* Merge Protections accent */
--color-blue-700: #43a7e5; /* Merge Protections label */
--color-blue-800: #237caf; /* Link hover (docs-only) */
--color-coral-400: #ef9a9a; /* Stacks accent */
--color-coral-700: #e53935; /* Stacks label */
--color-rose-400: #f485b3; /* Workflow Automation accent */
--color-rose-700: #e61e71; /* Workflow Automation label */
Comment on lines +10 to +39
Copy link

Copilot AI Apr 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tokens.css defines custom properties like --color-gray-50/--color-gray-700 that already exist in src/styles/theme.css (e.g. theme.css defines them as HSL tuple fragments used via hsla(var(--color-gray-70), 1)). If this file is ever imported/loaded, it will override those variables with hex values and break any hsla(var(--color-gray-*), …) usages. Consider namespacing primitive tokens (e.g. --primitive-color-gray-50) and explicitly mapping semantic/theme vars to them, or refactoring theme.css to consume these hex values without the HSL-tuple pattern.

Suggested change
--color-white: #ffffff;
--color-dark: #000000;
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-400: #9ca3af;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
/* Product palette — verbatim from mergify.com/DESIGN.md.
Brand colors. Do NOT flip in dark mode. */
--color-teal-400: #82ddbe; /* Merge Queue accent */
--color-teal-700: #1cb893; /* Merge Queue label */
--color-purple-400: #858ef4; /* CI Insights accent */
--color-purple-700: #4d59e0; /* CI Insights label */
--color-orange-400: #f9b070; /* Test Insights accent */
--color-orange-700: #f27b2a; /* Test Insights label */
--color-blue-400: #85c9f4; /* Merge Protections accent */
--color-blue-700: #43a7e5; /* Merge Protections label */
--color-blue-800: #237caf; /* Link hover (docs-only) */
--color-coral-400: #ef9a9a; /* Stacks accent */
--color-coral-700: #e53935; /* Stacks label */
--color-rose-400: #f485b3; /* Workflow Automation accent */
--color-rose-700: #e61e71; /* Workflow Automation label */
--primitive-color-white: #ffffff;
--primitive-color-dark: #000000;
--primitive-color-gray-50: #f9fafb;
--primitive-color-gray-100: #f3f4f6;
--primitive-color-gray-200: #e5e7eb;
--primitive-color-gray-300: #d1d5db;
--primitive-color-gray-400: #9ca3af;
--primitive-color-gray-500: #6b7280;
--primitive-color-gray-600: #4b5563;
--primitive-color-gray-700: #374151;
--primitive-color-gray-800: #1f2937;
--primitive-color-gray-900: #111827;
/* Product palette — verbatim from mergify.com/DESIGN.md.
Brand colors. Do NOT flip in dark mode. */
--primitive-color-teal-400: #82ddbe; /* Merge Queue accent */
--primitive-color-teal-700: #1cb893; /* Merge Queue label */
--primitive-color-purple-400: #858ef4; /* CI Insights accent */
--primitive-color-purple-700: #4d59e0; /* CI Insights label */
--primitive-color-orange-400: #f9b070; /* Test Insights accent */
--primitive-color-orange-700: #f27b2a; /* Test Insights label */
--primitive-color-blue-400: #85c9f4; /* Merge Protections accent */
--primitive-color-blue-700: #43a7e5; /* Merge Protections label */
--primitive-color-blue-800: #237caf; /* Link hover (docs-only) */
--primitive-color-coral-400: #ef9a9a; /* Stacks accent */
--primitive-color-coral-700: #e53935; /* Stacks label */
--primitive-color-rose-400: #f485b3; /* Workflow Automation accent */
--primitive-color-rose-700: #e61e71; /* Workflow Automation label */

Copilot uses AI. Check for mistakes.
}
Loading