Tokenize VS Code UI

[mrleemurray]

In an effort to standardize, make the current (& future) product UI more consistent, as well as improving & aligning the design system with the product codebase, the design team proposes to implement a token based approach to UI elements, replacing hard-coded CSS styles with semantic variables based on an agreed upon superset of tokens.

The values in question include:

• spacing: padding, margin, & other dimensional values
• border-radius
• stroke-weight
• shadows
• font-size
• font-weight
• line-height

The broad outline of the effort:

• audit all UI elements to identify existing values & uncover any usage patterns
• research existing token systems in other products & design systems (i.e. Fluent)
• rationalize values, develop top-level values, assignment logic, naming convention
• develop guidelines & documentation for developers
• replace hard-coded values with variables across UI
• test & bug fixes

The result should allow for the creation & implementation of consistent net new product UI, that adheres to design guidelines, while building a system that allows for the global update of values & increased customizability in the future (e.g. dynamic density).

[zhouxinghong]

See:
#248046