feat(design): add primitive token layer (tokens.css)#11299
Open
Conversation
Member
Author
|
This pull request is part of a Mergify stack:
|
This was referenced Apr 29, 2026
Contributor
Merge ProtectionsYour pull request matches the following merge protections and will not be merged until they are valid. 🔴 🤖 Continuous IntegrationWaiting for any of:
This rule is failing.
🔴 👀 Review RequirementsWaiting for:
This rule is failing.
🔴 🔎 ReviewsWaiting for:
This rule is failing.
🔴 📕 PR descriptionWaiting for:
This rule is failing.
🟢 Enforce conventional commitWonderful, this rule succeeded.Make sure that we follow https://www.conventionalcommits.org/en/v1.0.0/
|
There was a problem hiding this comment.
Pull request overview
Adds a new CSS file intended to introduce a “primitive” (non-theme-remapped) design token layer for color values.
Changes:
- Added
src/styles/tokens.cssdefining primitive neutral and product/brand color CSS custom properties. - Documented intended usage: components should consume semantic tokens from
theme.css, not primitives directly.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| --color-gray-800: #1f2937; | ||
| --color-gray-900: #111827; | ||
|
|
||
| /* Product palette — verbatim from mergify.com/DESIGN.md. |
There was a problem hiding this comment.
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. |
Comment on lines
+10
to
+37
| --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 */ |
There was a problem hiding this comment.
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 */ |
Comment on lines
+1
to
+8
| /* | ||
| 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 |
There was a problem hiding this comment.
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.
Change-Id: I6e0fbd73f4d59f2779d48cdedb8979da36c63271
jd
force-pushed
the
devs/jd/worktree-design/add-primitive-token-layer-tokens-css--6e0fbd73
branch
from
45bf009 to
a182ff8
Compare
Member
Author
Revision history
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.