docs: Add a Color Token Search component to the docs #2607
Conversation
Deploying atlantis with
|
| Latest commit: |
bdc0572
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://7fc3c848.atlantis.pages.dev |
| Branch Preview URL: | https://taylor-color-search.atlantis.pages.dev |
taylorvnoj
changed the title
taylorvnoj
changed the title
There was a problem hiding this comment.
Is there, perhaps, a well-maintained and small size library that has all of those utils included? I'm not necessarily pushing for using an external dependency, but my concern is that none of those newly added utils are covered by tests. Moreover, it feels like to properly test everything, we'd need to write very extensive and robust test suites.
There was a problem hiding this comment.
There are a few lightweight packages but I would also like to avoid using an external dependency, especially when it's just 1 utils file that gets us what we want, also easy to configure later on if we need to change anything.
I am happy to write a test file for the utils. Many other files in our new docs site do not have test files because we were just pushing to release but I can start that pattern here
There was a problem hiding this comment.
If this file is moved to colorTokenMatch folder, we can just name it index.ts, unless you want to separate each util into a separate folder/file.
There was a problem hiding this comment.
oops! Good call!
| const cases = [ | ||
| { | ||
| input: "#032B3A", | ||
| expectedTokens: ["color-base-blue--900", "color-heading"], | ||
| }, | ||
| { | ||
| input: "hsl(86, 100%, 46%)", | ||
| expectedTokens: ["color-brand--highlight"], | ||
| }, | ||
| { | ||
| input: "rgba(255, 255, 255, 1)", | ||
| expectedTokens: ["color-white", "color-text--reverse"], | ||
| }, | ||
| { | ||
| input: "rgb(85, 106, 203)", | ||
| expectedTokens: ["color-indigo"], | ||
| }, | ||
| ]; | ||
|
|
||
| cases.forEach(({ input, expectedTokens }) => { | ||
| test(`returns the correct token(s) for input "${input}" (expects: ${expectedTokens.join( | ||
| ", ", | ||
| )})`, () => { | ||
| const normalizedInput = normalizeColor(input); | ||
|
|
||
| const matches = Object.entries(allColors).filter( | ||
| ([, colorValue]) => | ||
| typeof colorValue === "string" && | ||
| colorsAreEqual(normalizedInput, normalizeColor(colorValue), 2), | ||
| ); | ||
|
|
||
| const matchTokens = matches.map(([token]) => token); | ||
|
|
||
| expectedTokens.forEach(expected => { | ||
| expect(matchTokens).toContain(expected); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
Would it be possible to leverage test.each here? Similar to this JFE example.
There was a problem hiding this comment.
Nice addition to the docs site! I'm approving the PR.
One thing I think would be nice to do (perhaps, in the next iteration) is to make search more flexible (by supporting partial matches), which could make it even faster/more useful to find tokens.
Otherwise, you need to be very precise (which is fine for the most part if colors are just being copied from Figma).
|
@nad182 good call out! Thanks for approving - this way we can get it out and get some feedback. That change should be very minimal so happy to iterate on that soon! |
Motivations
I've been hearing from Atlantis users that they've been wanting a color token search (I've also always wanted one) - so here it is. This is helpful in multiple scenarios: finding the correct semantic token to use instead of grabbing the base color, maybe a figma doesn't have the token name listed but has the hex value, etc.
I think this will encourage token usage & will save time finding the correct token to use.
Changes
Added
Screen.Recording.2025-06-27.at.9.27.32.PM.mov
Testing
Enter a bunch of different color values and make sure you're getting a variety of tokens.
When there is no matching token, subdued text under the input will inform you of that.
For example you can find color token values in:
packages/design/src/assets/tokens.all.colors.tspackages/design/src/tokens/Changes can be
tested via Pre-release
In Atlantis we use Github's built in pull request reviews.