How to properly apply Constellation Design Tokens to Components?

User Experience
1

I’m not sure how to properly apply Constellation design tokens. I want to apply custom color to badges as governed by our own design system:

image
image1920×1256 317 KB

So far so good, I can easily modify my Constellation theme JSON by adding this to the components section:

"badges": {
      "keyboard": {
        "background-color": "base.colors.gray.dark",
        "border-color": "base.colors.gray.light"
      },
      "status": {
        "success": {
          "background": "#0cb43f",
          "foreground": "#fff"
        },
        "urgent": {
          "background": "#eb4c79",
          "foreground": "#fff"
        },
        "warn": {
          "background": "#ff6130",
          "foreground": "#fff"
        },
        "pending": {
          "background": "#aa4bb3",
          "foreground": "#fff"
        },
        "info": {
          "background": "#135ee2",
          "foreground": "#fff"
        }
      }
    },

However, the official docs state that editing properties in this section isn’t considered best practice. So I was thinking, what if we just defined the colors in the base section like this:

"base": {
    "colors": {
      "white": "#ffffff",
      "black": "#000000",
      "gray": {
        "light": "#eef0f4",
        "dark": "#9696aa"
      },
      "slate": {
        "light": "#a3b5c9",
        "dark": "#537090"
      },
      "red": {
        "light": "#eb4c79",
        "dark": "#721d43"
      },
      "orange": {
        "light": "#ff6130",
        "dark": "#7a3300"
      },
      "green": {
        "light": "#0cb43f",
        "dark": "#305f3e"
      },
      "blue": {
        "light": "#135ee2",
        "dark": "#194666"
      },
      "purple": {
        "light": "#aa4bb3",
        "dark": "#5f3663"
      },
      "yellow": {
        "light": "#ffd32a",
        "dark": "#b27700"
      }
    }, 
...

Then, I would modify the badges section like this:

"badges": {
      "keyboard": {
        "background-color": "base.colors.gray.dark",
        "border-color": "base.colors.gray.light"
      },
      "status": {
        "success": {
          "background": "base.colors.green.light",
          "foreground": "base.colors.white"
        },
        "urgent": {
          "background": "base.colors.red.light",
          "foreground": "base.colors.white"
        },
        "warn": {
          "background": "base.colors.yellow.light",
          "foreground": "base.colors.white"
        },
        "pending": {
          "background": "base.colors.purple.light",
          "foreground": "base.colors.white"
        },
        "info": {
          "background": "base.colors.blue.light",
          "foreground": "base.colors.white"
        }
      }
    },
...

My thought here was that these tokens would simple serve as a reference to the colors defined in the base section. That does not seem to be the case however as this is how my app looked after making the changes:

image
image1920×1256 293 KB

So here are my questions:

  • Why isn’t this working? Have I misunderstood how design tokens work?
  • If modifying properties in the components section isn’t good practice, what’s the alternative in my case?
2

Afternoon Wolfgang. Component colors for badges only accept hex values today when overriding.

However, they do inherit from the ‘base.colors’ by default (e.g. “base.colors.purple.extra-light” would affect your ‘Pending’ status badges). Changing those to what you need should allow a more consistent palette in your app.

Yet, I can see why you expected this & will pass this feedback along.