Modify color namespace and update transformations to Figma and style system outputs #4654
Conversation
🦋 Changeset detectedLatest commit: 8055908 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for unrivaled-bublanina-3a9bae ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| @@ -1,7 +1,7 @@ | |||
| { | |||
| "compilerOptions": { | |||
| "module": "Node16", | |||
| "target": "es2015", | |||
| "target": "ES2021", | |||
There was a problem hiding this comment.
FYI -- this change is to be able to use .replaceAll() string function.
| /** | ||
| * Supported color interaction states | ||
| */ | ||
| const interactions = ['hover', 'focus', 'active']; |
There was a problem hiding this comment.
FYI -- having to define these interactions/prominences/exceptions here is not ideal, but I feel it's sufficient for the time being. Something we can come back to refine in future.
| @@ -298,7 +298,7 @@ | |||
| "xxsmall": { | |||
| "$type": "number", | |||
| "$value": "{static.container.xxsmall}", | |||
| "$description": "Container tokens define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", | |||
| "$description": "Use to define the minimum/maximum width and height of containers or layout elements. For example, box, card and grids.", | |||
There was a problem hiding this comment.
FYI -- No changes in this PR affected this, but rather the descriptions between the "medium" and "small" mode in our Github files had gotten out of sync. When pulling from Figma in this PR, this will align the descriptions.
Deploy Preview
What does this PR do?
This PR makes significant changes to our token translations, specifically prompted by our new direction for color naming.
Goals for these changes:
a. Minimizing chance of near-term breaking changes
b. Maximizing designer and dev experience by keeping color names as brief as possible
c. Maintaining parity across design and dev
Diagram to illustrate translations
The below diagram illustrates how we manage these translations, with the summary being:
tokens/serve as the source of truth and are structure in alignment with the design token community group spec (DTCG)tokens/files to stay in alignment with nested structure DTCGOther modifications
In addition, this PR supersedes #4644, as it was easier to include the work here.
Where should the reviewer start?
The commits in this PR have been separated to make review easier, tackling different aspects of the work in chunks. I would recommend reviewing commit by commit.
What testing has been done on this PR?
In addition to the feature you are implementing, have you checked the following:
General UX Checks
Accessibility Checks
Code Quality Checks
How should this be manually tested?
Any background context you want to provide?
What are the relevant issues?
Closes #4656
Closes #4288
Screenshots (if appropriate)
Should this PR be mentioned in Design System updates?
Is this change backwards compatible or is it a breaking change?