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

[yyyanghj]

Request #245030 Again

[zhouxinghong]

The style elements of the extension page that cannot be customized include: background color, foreground color, border color, rounded corner style, etc.

Hey! Friends.
Is there a way to allow users to customize the background color, foreground color, border color, corner rounding style, etc. of the following UI elements marked with number symbols.

Due to this problem, we have no way to fully customize our own theme style.

• VS Code Version: 1.102
• OS Version: Windows 10/11