Is there a way to reference global colors from within parameters? I don’t see this in the docs.
For example, setting up a component with a default color set to one of the specific colors in the color palette?
Ah, found an old response from Alex from the 5.2 version of the beta… never had the opportunity to actually implement that over the past 7 months 
Works great.
{
"my-accent-color": "color|global-color:4bab657e-3c22-4ab2-86dc-3af3820e5755"
}
Are you guys planning to do a power user doc with all the fancy stuff that can be done with the Dev toolkit? Including little tricks like this, and the new keybinding options? I imagine there’s tons of stuff you’ve built in that power users would love to tap into, but otherwise won’t know about.
4 Likes
Ideally there would be a UI for this so you could simply pick the color you want to reference when working with the parameters JSON.
2 Likes
@devinelston, great questions! Yes, the code you referenced there is how you would do it. You need to access the ID generated by the builder and use the global-color:{{id_value_here}} syntax if you wanted to set that as an initial value for a Parameter.
There are definitely a lot of fun little tricks like this that can be leveraged to do cool stuff. I have debated adding something to the general Parameters Docs about this, but the general concern is that people might work themselves into a funky corner using some of these techniques.
An approach you or @JvP might want to explore instead is creating Component Prefabs using the Element Manager:
When you make a Component export a “prefab,” it basically means that the exact way you have it styled in the Component Builder is how it will be output when you drag it in. It also means that any children you have nested within your Component will come out looking exactly like that as well. This is a very powerful way to nest Components within Components and have them come out in a pre-styled fashion. It’s almost like a gray area between presets and Components because you get all the performance, usability, and markup gains of Components, but it’s basically like taking a snapshot of that Component at a moment in time.
The main thing to remember is that a prefab Component will not update globally like a standard Component if you change a core value on it (e.g. if your Primary Button had a padding of 1em and you change it on a Component to 2em, every instance of that Component will now use 2em). If your Component is a prefab, the moment you drag it into the builder it is using those default values and is locked into that moment in time.
Another technique is if you know that you’re always going to pull a color from a palette, you could just set your button’s background-color Parameter to #000000 for instance, and then when you drag it in, you can just open the color picker and assign the value using the color picker. It’s one extra click, but you’re probably going to use different colors for a “Button” Component anyway, and this version of your Component is still live and will update if you change things globally.
Otherwise, if you really have to have a global palette item set as an initial value, the method you mentioned above will work.
Hopefully that helps to provide some context on things!
4 Likes
This is great. But is there a way to create CSS variables using that global color?
Not that intuitively. You can reference any global color via {{dc:global:color id="..."}}. You can find the list of Ids to reference in the dev tools “Color” button in the “Tools” tab. A Dynamic content UI for colors and fonts is coming though hopefully in Pro 6.3. See screenshots and hope this helps!
2 Likes