The fonts manager article seems to be a little behind the latest updates. I see that fonts have an ID field like global colors, but there does not seem to be a dynamic reference created for them yet. (I’ve tried to guess at a few on my own with no results, so I’m guessing it isn’t available yet.) Having color as a dynamic content item, e.g. {{dc:global:color id=“exampleID”}}, has been GREAT. I was able to create a stack of CSS variables and rapidly swap out options from the main color palette by ID. Is that coming up on the roadmap sometime soon?
And I’ve got a couple questions about colors:
Are there any plans to support OKLCH color references in the near term? I’m late to the party, but I’ve already gotten so much utility out of that color mode. I’d love to have it available to help with advanced calculations based on my color library, and to keep color modes uniform.
Would it be possible to enhance VAR support in the color library?
Here’s my scenario:
In CSS I was able to create a calculated set of light-dark and complementary colors. like this:
--base-logo: {{dc:global:color id="LogoGreen"}};
--color-0a: oklch(from var(--base-logo) calc(l + .20) c h); /* lightest */
--color-1a: oklch(from var(--base-logo) calc(l + .10) c h);
--color-2a: var(--base-logo);
--color-3a: oklch(from var(--base-logo) calc(l - .10) c h);
--color-4a: oklch(from var(--base-logo) calc(l - .20) c h); /* darkest */
--triad-1a: oklch(from var(--base-logo) l c calc(h - 120));
--triad-2a: oklch(from var(--base-logo) l c calc(h + 120));
--tetra-1a: oklch(from var(--base-logo) l c calc(h + 90));
--tetra-2a: oklch(from var(--base-logo) l c calc(h + 180));
--tetra-3a: oklch(from var(--base-logo) l c calc(h + 270));
The color fields all support including var(–tetra-3a) and similar. It outputs just fine in the body of the document! The one place it doesn’t output is in the builder.
I can create fixed reference (hex, rgb) global colors by creating color chips using my VAR colors, then sampling them.
But I’d like to keep the dynamic abilities of that variable. If the brand were to change their primary color, I’d need to update all of my chips, for example.
Of course, I can save and name these VAR colors as the variable, which preserves the functionality but loses the color chip. That makes it available to people who are comfortable with cornerstone but not CSS, and saves me having to open my CSS to remember var names. The visual of the color chip is a really helpful fast indicator of what’s where, especially since in several manager views, that color name or value is truncated like the example below.
It would potentially save clicks to have that color chip available.
Definitely open to suggestions on how to use existing features better to support some of these goals, too.
Thank you for all your hard work and patience!