Tokenize VS Code UI #248725
Description
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).