Update Figma toolkit color tokens to use variables

[daviddossett]

Currently the Figma toolkit uses a raw set of color values via shared styles. This makes it difficult for consumers of the toolkit to use colors given that there's no semantic meaning associated with them.

For example, a designer building a VS Code extension would have no way of knowing which color was used for input backgrounds unless they manually cross-referenced the hex value with the colors in colorRegistry.ts

Ideally we could use variables to expose a list of semantic tokens that match the list used in VS Code itself. These variables would referenced the raw "Base " or "Accent " colors as they exist today, updated to use the latest themes.

[spartanatreyu]

If vscode is switching to color variables, it's worth looking into defining colors in oklch() instead of the older hex rgb values.

Oklch pros:

• has wide support
  • See: https://caniuse.com/mdn-css_types_color_oklch
• easier to define and vary colors in a programmatic design system
  • Change single hue variable to have all colors update
• is perceptually uniform
  • Changing hue should not change lightness or chroma (as opposed to rgb/hsl/lch/lab). See: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl#oklch-vs-hsl
  • Having minimum guarantees about color also makes color contrast accessibility easier to manage.

[daviddossett]

This is related to our Figma toolkit, not the vscode repo, just in case that wasn't clear. I don't believe Figma supports formats other than those pictured below but cool to read about oklch()!