Remove *-partials tokens

[fredvisser]

🧹 Tech Debt

We currently have several tokens in the form - [color token]RgbPartial – which are used with rgba() to set color transparency in component or application stylesheets.

@rajsite rajsite 7 days ago I feel like we need to not be exposing these partial colors anymore. Other teams can't consume these reliably. Seems like we need tokens to represent the states, ie fillColorSelectedDisabled, instead of using hidden opacities?

Need to add appropriate theme aware tokens for each use of the partial tokens, and replace partial tokens in each component.

[rajsite]

As part of removing the partials and capturing them as valid states, we should also consider changing emphasized to be a state. See discussion in: https://github.com/ni/nimble/pull/351#discussion_r813159161

With the core argument that, for example, Google docs does not create Title Bold, H1 Bold, H2 Bold elements, instead you apply the bold state to those elements:

[jattasNI]

Marked "currently deprioritized" to wait for more runtime with our existing patterns to see what tokens we should expose in place of the partial tokens. e.g. specific alpha values instead of allowing clients to pick arbitrary values

[mollykreis]

There are some places in code that we are using these partial tokens. We need to make sure those usages are removed before removing the tokens:

• https://ni.visualstudio.com/DevCentral/_git/Skyline/pullrequest/282766

[m-akinc]

We now also have a few constants (not tokens) in theme-provider\design-tokens-static.js that are not theme-aware and should eventually be represented in nimble-tokens instead of nimble-components. These constants are colors with alpha, which is not something we have a pattern for in nimble-tokens yet.

[rajsite]

ooo maybe we can use color-mix soonish to avoid the need for the partials tokens for configuring alpha: https://youtu.be/buChHSdsF9A?t=506

well maybe not, still should probably have well-defined tokens for the different states so might not be a huge win anyway

Edit: color-mix landed in the last browser FFX in May, so by early next year we can use color-mix generally: https://caniuse.com/?search=color-mix

[rajsite]

I believe the current state is that color-mix was not a great fit as our current colors because they include an alpha.

We would need to either:

• introduce tokens without alpha to build on with color-mix
• wait for CSS relative color syntax to enable a form of CSS destructuring so the existing alpha can be ignored (as of writing not available in Firefox yet)