Note: This is the underlying cause of T363778.

The color-link-red component token references the application token color-destructive as its value. However, in our current style dictionary configuration, this reference is not preserved on output.

When the tokens are built, we get this output:

---color-link-red: #d73333;

The problem is, this does not change when our color mode switches, so the red links are stuck in their light mode color. What we really want is output that looks like this:

--color-link-red: var(--color-destructive, #d73333 );

Style Dictionary includes an option called outputReferences which lets you do this, but it's not compatible with the way we want to handle option tokens (we specifically want to withhold those from the client).

We need to figure out a way to preserve references from component tokens -> application tokens, while continuing to exclude the option tokens. This will probably involve the creation of a custom formatter (or maybe a transformer, like in this abandoned patch) that mimics the behavior of the outputReferences option, but only for references to non-option tokens (i.e. tokens that are going to be in the output).

Acceptance criteria

• Change the CSS output files such that:
  • If token A refers to token B, and token B is going to be in the output (is not excluded), then the value of A should no longer include the value of B (--a: #123;), but should instead include a reference to B (--a: var( --b );). For example, the output should contain --border-color-input--hover: var( --border-color-progressive );, not --border-color-input--hover: #36c;.
    • It's OK for the reference to B to include a the value of B as a fallback, but that's not required. We could output --a: var( --b ); or --a: var( --b, #123 );, both are acceptable.
  • If token A refers to token B, and token B is not going to be in the output (is excluded, because it's an option token), then the value of A should still include the value of B (--a: #123;), not a reference to B (we can't refer to B because it won't be in the output). For example, the output should contain --border-color-divider: #a2a9b1;, not --border-color-divider: var( --color-gray400 ); (because there is no --color-gray400 variable in the output)
  • This process should be followed for each token reference separately, so we should get --border-base: 1px solid var( --border-color-base );

(The other items were moved to T366541)