1987677 - [meta] Tokenize the chrome

Status: NEW

(Toolkit :: Themes, task, P3)

Description

[Jules Simplicio [:jules]]

With more coverage of design tokens in the chrome, we can continue investing on this infrastructure for handling modes (light/dark/high contrast) and theming (addon/lightweight, OS, light/dark).

Goal

1. Tokenize (use design tokens on) stylesheets that belong to the chrome
2. Make sure design tokens play well with theme variables

Plan

1. Identify variables (panels, menus, toolbar, toolbar buttons, tabs) from chrome css files that should be pulled into design tokens
   a. Identify all locations that variable is used
   b. Identify its purpose
   c. Integrate it into the design tokens system
   d. Add documentation on how it is intended to be used (where do we put docs?)
   e. Replace all uses with the token
2. Lint under toolkit/themes/shared, browser/themes/shared, browser/components, browser/themes/shared/<operating system> for design token opportunities
3. Integrate theme variables with design tokens
4. Tokenize the theme_experiment object
5. Add documentation