Add alpha channel to color tokens when needed about design-tokens HOT 4 CLOSED

@bwinton I tried to lay out how we could include alpha channels to the current color tokens. In the first proposal I open a new object that includes the hex string and the opacity array. This approach would allow future strings like meta, category, type or other to be easily implemented.

"blue": {
  "40": "#45a1ff",
  "50": {
    "hex": "#0a84ff",
    "opacity": [30, 50, 70]
  },
  "60": "#0060df",
  "70": "#003eaa",
  "80": "#002275",
  "90": "#000f40"
},

Alternatively a simpler solution would be to list everything in an array where the first value is the hex and the remaining numbers are opacity values.

"blue": {
  "40": "#45a1ff",
  "50": ["#0a84ff", 30, 50, 70],
  "60": "#0060df",
  "70": "#003eaa",
  "80": "#002275",
  "90": "#000f40"
},

While I wait for a feedback from your side I will collect all the currently used opacity levels ☺️

from design-tokens.

Yeah, I was looking at https://github.com/salesforce-ux/theo#spec and kinda like the way they can add comments and descriptions and other stuff to each token, so I would vote for option A. 😃

Also, should we list 100% opacities? Do all colours always have a 100% opacity in addition to the more transparent versions?

from design-tokens.

Cool, thanks @bwinton for your swift feedback! I also prefer option one, being tokens so granular, it's nice to have some context there. As for now yes, all colors have a 100% opacity and I would assume that this will always be the case. As soon as I have all the different values used in product I will post them here.

from design-tokens.

What if we do something like this?

  "grey": {
    "10": {
      "hex": "#f9f9fa"
    },
    "20": {
      "hex": "#ededf0"
    },
    "30": {
      "hex": "#d7d7db"
    },
    "40": {
      "hex": "#b1b1b3"
    },
    "50":  {
      "hex": "#737373"
    },
    "60":  {
      "hex": "#4a4a4f"
    },
    "70":  {
      "hex": "#38383d"
    },
    "80":  {
      "hex": "#2a2a2e"
    },
    "90": {
      "hex": "#0c0c0d",
      "opacity": [10, 20, 30, 40, 50, 60, 70, 80, 90]
    }
  },

By having the hex property always using the hexadecimal, we avoid too many exceptions - which should make the life of who is writing a script a bit easier. Plus, the .json file is more readable.

from design-tokens.