Nesting your own way colors in a json file

[Luis J. Montoro]

Hi @dabbott! Lona Studio is really impressive, thank you for all of this work!

I have a doubt, I was trying to render my own color tokens that I had previously defined in a json file with a different nesting than the one on the material design example. Is this possible? Because I can't render them but I don't know if it is even possible today :)

Thank you!!

[Devin Abbott]

Hi @luisjmontoro, can you paste a snippet of your tokens json file?

It's probably not possible, but I'm interested in seeing how you've nested them. I want to support other formats at some point.

[Luis J. Montoro]

Thanks for the quick answer @dabbott!

We are a team of designers, rendering right now our definition of a color palette with different categories in it. This is a part of it:

{
  "color": {
    "brand": {
      "primary": {
        "base" : { "value": "#DA291B" },
        "darken": { "value": "#B8271E" },
        "lighten"  : { "value": "#F9423A" }
      },
      "secondary": {
        "base" : { "value": "#747D8C" },
        "darken": { "value": "#2F3542" },
        "lighten"  : { "value": "#A4B0BE" }
      },
      "tertiary": {
        "base" : { "value": "#F39C11" },
        "darken": { "value": "#E67E22" },
        "lighten"  : { "value": "#F1C30F" }
      },
      "quaternary": {
        "base" : { "value": "#53565A" },
        "darken": { "value": "#3D3F42" },
        "lighten"  : { "value": "#D0D0CE" }
      }
    },
    "ui":{
      "support": {
        "info":{
          "base": { "value": "#17A2B9" },
          "lighten-30": { "value": "#5DBECE" },
          "lighten-60": { "value": "#A2D9E3" }
        },
        "success": {
          "base": { "value": "#39CB4F" },
          "lighten-30": { "value": "#74DA84" },
          "lighten-60": { "value": "#AFEAB8" }
        }
     }
  }
}

I was trying to render them inside Lona direclty from the json file, but I noticed that when you are adding a color from the Lona's interface, the input fields don't allow any classification by now. Maybe this is the reason why our tokens are not rendering.

[Mathieu Dutour]

That's indeed a common way to have your tokens. I'd also say that a lot of people have "raw colors" (like red50, gray200, etc.) and "semantic colors" which references the raw colors. So you can have different semantic colors referencing the same raw color without duplicating its value

[Luis J. Montoro]

Hi @mathieudutour!

Yes, I think that we are actually doing that. This would be a part of the json defining a button with tokens:

"info" : {
          "fill" : {
            "value" : "{color.ui.support.info.base.value}"
          }

And this would be the code from our main.css file to reference, for example, a class used in a button:

.info {
  background-color: var(--component-button-color-info-fill);
  color: var(--component-button-color-info-font);
}

[Devin Abbott]

Thanks for sharing @luisjmontoro. Lona won't be able to render or edit this format. In the future I think we will support multiple color formats.

Are you using styled-dictionary? I think it'd be pretty cool to support editing the styled-dictionary format. We would support editing the format and generating Lona-compatible code from it (but you could also use styled-dictionary directly to generate code your own way). Although it's a fairly different approach than Lona, so I'm not sure yet... still thinking it over.

At some point we'll most likely have our own colors format that's capable of representing nearly any format you like, including more complex kinds of types (e.g. Swift enums) and running arbitrary code to modify/generate colors.

[Luis J. Montoro]

Understood @dabbott! I'm using style-dictionary and I already have all my tokens defined in that format, but I was curious about trying Lona (which I'm still are and still be doing!).

Thank you so much!! :)

[Mathieu Dutour]

Let’s keep it open as we will want to do something about it :)