Builder.io Ideas
Add a new idea Subscribe
Categories Builder for Developers
Created by John Paul Wilkens
Created on Oct 16, 2024

RELATED IDEAS

Design tokens, with semantic variables, between spaces.

We've noticed an issue with how design tokens work between spaces.

We have semantic design tokens, like "Brand Primary 1" and "Brand Primary 2" which connect to a css variable, such as --primary-1 and --primary-2.

We have multiple sites, which share 1 codebase, but have different color themes, that define what "Brand Primary 1" is. For 1 site, it's blue, for another site it's purple.

Currently, if I want to build some content in one space, and then copy and paste it into another space, the value copied is:

{

"color": "hsl(var(--brand-primary-01, 867 53% 09%))"

}

When I paste this into the next space, the display does work, however, the value includes the fallback, and so the actual value in the new space's dropdown, is not properly selected.

I think a better way of passing this data, would be the actual design token name. That's really the only way to ensure that the moving between spaces works properly.

What if people just use direct hex value? That's actually more broken.

{

"color": "#123456"

}

That simply would ignore the Design Token name itself, and just make it the same color the content was on the other space.

  • Attach files
  • Admin
    Steve Sewell
    Reply
    |     Nov 16, 2024

    I posted in a thread but just so everyone sees, this is achievable today:

    Today, the way to accomplish that would be to make sure you create variables for what you need to be the same.

    The core of Builders styling is “it’s just CSS”, we strictly try to store no more than that.

    In order to work within that, if you can just add to each of your site a few css vars with consistent names across all sites, copying and pasting content across sites will work as expected.

    Eg in global.css:

    :root {
    --builder-brand-primary: /* anything you want, e.g. hsl(var(--brand-primary-01, 867 53% 09%))*/
    --builder-braind-secondary: /* ... */
    }

    then in your code that registers the tokens with Builder:

    Builder.register("editor.settings", {
    designTokens: {
    colors: [
    { name: "Brand Primary", value: "var(--builder-brand-primary)" },
    { name: "Brand Secondary", value: "var(--builder-brand-secondary)" },
    ],
    }
    });

    This should achieve what you are looking for.
  • John Paul Wilkens
    Reply
    |     Oct 16, 2024

    Additionally, I could summarize this as, it appears color design tokens are being thought of as COLOR first, when actually the point of the token, is the TOKEN is first.

    Think of this in regards to fonts as well. "Primary Font" is almost never the same between 2 sites, but copying a banner from one site to another, would require the user to reselect all font faces.

    2 replies