1826844 - Move design tokens source of truth to a non-platform-specific location

Status: RESOLVED DUPLICATE of bug 1850611

(Toolkit :: Themes, task)

Description

[Mark Striemer [:mstriemer]]

Since the design tokens are (at least partially) not platform-specific, the values should be stored outside of our .css files in mozilla-central.

There are some tools available to help export design tokens into different formats. Using one of these tools would enable the design systems team to manage the tokens and provide a .css export for use within mozilla-central.

Comment 1

[Dão Gottwald [:dao]]

(In reply to Mark Striemer [:mstriemer] from comment #0)

Since the design tokens are (at least partially) not platform-specific, the values should be stored outside of our .css files in mozilla-central.

I'm not sure I understand. toolkit/themes/shared/ seems like a fine, platform-agnostic place; it doesn't cover mobile, which from what I understand isn't currently a goal anyway? If and when that changes we would indeed want to move the original source out of toolkit.

There are some tools available to help export design tokens into different formats. Using one of these tools would enable the design systems team to manage the tokens and provide a .css export for use within mozilla-central.

That's a fine goal if UX want to export design tokens that way, although I'd probably still put them somewhere in toolkit/themes/ as it ultimately serves building themes. (With the caveat about mobile.)

Comment 2

[Mark Striemer [:mstriemer]]

Our tokens would remain in tookit/themes/shared/, the idea is that the file in there would be generated through some other workflow that is owned by the design systems team. So perhaps there is a repo on FirefoxUX GitHub that has some JSON like:

"color": {
  "background": {
    "default": "--grey-50",
    "hover": "--grey-60",
    "active": "--grey-70"
  }
}

And they run a script which generates our design-tokens-brand.css file and we commit that to its current home.

The benefit here is that they could also run that script and have it generate XML files for Android and Swift files for iOS using the same tokens.

There will almost certainly still be Firefox Desktop related tokens, and I don't think we want to make it more difficult on ourselves to make a quick change to these tokens, but this is more of an exploration ticket to see how it would work for the Design Systems team to coordinate tokens across our Firefox products.

Comment 3

[Mark Striemer [:mstriemer]]

I think the work done in bug 1850611 is enough to mark this as done