5.2.0 Colors: "Get color ID" icon?

Beta
#1

Hi @alexander

When we click a Color, under Colors there are Duplicate and Delete icons.

Would it be possible to add an icon that can be clicked, with the color ID copied into the clipboard?

global-color:4bab657e-3c22-4ab2-86dc-3af3820e5755

That would be great! :slight_smile:

Thanks!

#2

Hi @Misho,

For the majority of users, we don’t want to draw much attention to those internals. Using those IDs directly would be considered a very advanced technique. I don’t think we’ll add a way to surface it. However, if you haven’t already seen it, there is a way for manage them yourself now.

Under Tools > Data Store in the Dev Toolkit, there’s a way to directly manipulate color data. How it’s accessed isn’t finalized, so it won’t be documented until that is solidified. The actual data though is the same JSON that it’s been Pro launched. Here’s some helpful info:

  • When you’re editing “State” it doesn’t update live. Clicking the “Apply” button will make your changes appear, You’ll still want to use the normal “Save” button to make them permanent
  • Colors created in older versions will used a UUID like 4bab657e-3c22-4ab2-86dc-3af3820e5755 while colors created with this version or later will use a smaller string. It doesn’t matter - as long as they are unique
  • You can freely change those IDs to anything you like. For example: primary-text. This will make it easier to hand code colors.
  • Dynamic Content has been updated to allow retrieving those colors. You can do that like this:
    • {{dc:global:color id="4bab657e-3c22-4ab2-86dc-3af3820e5755"}}
    • Or if you renamed the ID, like this: {{dc:global:color id="primary-text"}}
  • Finally, those Dynamic Content statements work in the CSS code editors (including Element CSS)

One of our goals with adding components is increasing the capacity to create custom elements, which we will be leaning into internally. Much of the above are under the hood features that most users won’t benefit from, and they are very technical (and sometimes risky depending on the use case) to use. So we haven’t really found a way to organize them into documentation or official notes.

Once we get to our “Improved Dynamic Content” development (not this cycle) more of these improvements will come into focus and feel more useful and accessible.

1 Like