Tintless variables + OKLCH coords as comments

[LeaVerou]

This PR adds:

• Node.js script that processes palette CSS files, detects accent colors for each scale and adds tintless variables (e.g. --wa-color-blue). Closes Add "tintless" color variables to hold the key/accent color for each palette (--color-foo, not just --color-foo-XX) #220
• Uses 60 as the default tint that others gravitate towards, and needs a chroma that is more than 0.000001 higher to move away from that (configurable).
• Clamps detected accent color to tints [40, 90] (configurable) and prints out a warning if the real peak chroma color is outside that range. So far we only have 7 such issues (across 9 x 8 = 72 scales!) and they are all concentrated to specific hues

Current output:

• Adds OKLCH equivalents as comments to facilitate adjustments, while still maintaining the copy/paste-ability of hex values.
• Automatically reads and writes the actual CSS files, maintaining proper formatting.

Sample code:

Currently out of scope (but that can change):

• The entire file is overwritten, and thus any ad-hoc modifications will be dropped. It seems that works fine for our current palettes, but can revisit if we ever want to make ad hoc modifications.
• Currently there are no config options e.g. to only update one file. I can add that if we need it.
• Per Color.js default behavior, hex codes that can be condensed to 3 digits, are condensed to 3 digits. I can look into forcing 6 digits if that's an issue.
• Currently not added to the build process, so needs to be invoked manually.
• It may be useful to later add the actual tint number to a variable, e.g. --wa-color-blue-key: 50)

I also haven't updated the docs yet, we can do that separately.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
webawesome	✅ Ready (Inspect)	Visit Preview	Jan 24, 2025 7:05pm

[lindsaym-fa]

This is awesome, @LeaVerou — thank you. 🙇 It will be a huge help for refining our palettes!

I believe the answer to this is 'no', but I want to ask to be absolutely certain: Is there any tintless.js maintenance necessary if we either add more palettes or add/change hues (e.g., add orange, change teal > cyan)?

[LeaVerou]

This is awesome, @LeaVerou — thank you. 🙇 It will be a huge help for refining our palettes!

I believe the answer to this is 'no', but I want to ask to be absolutely certain: Is there any tintless.js maintenance necessary if we either add more palettes or add/change hues (e.g., add orange, change teal > cyan)?

Yup! The only thing we may need to adjust for certain hues is the terminal output colors if we want to get nice output colors that chalk doesn't already support, but that's not essential.

[LeaVerou]

@claviska any ideas why the tests are failing? I tried re-running them, no avail. It seems it's related to Prettier, but I can't figure out what is bothering it.

[claviska]

Yep, seems like a Prettier issue in these files.

[LeaVerou]

Yup, I saw that, but I can't figure out what the issue is 🤔

[claviska]

I ran npm prettier:fix and it's correcting them locally. Here's the start of classic.css.

[LeaVerou]

Oh I see, there's an extra space! 😵‍💫 Okay, that's an easy fix.