Implement new color classes across the whole design

[stackingsaunter]

trafficstars

Background

Recently Figma introduced variables, which allow for creating design tokens or classes that work similarly to the ones in CSS (previously you could just define a color on one level).

I took this opportunity to prepare those variables for the design in Figma for future use and at the same time fix many inconsistencies and color issues across the design, both light and dark theme. I ended up reducing colors we use significantly, simplifying how we use it and making it more consistent and accessible.

Goal

The goal now is to update current extension design with new color classes. I propose following process to achieve that:

Tasks

• [ ] 1. #2540
• [ ] 2. #2542
• [ ] 3. #2543

Resources

• You can find and preview variables (classes) in Design Foundations file then clicking the icon next to Local variables on the right side

• Updated design with new colors you can find here: Light mode, Dark mode

[wareeshaali2003]

@stackingsaunter can you assign me this issue