Harmonize color code discrepancies in XD

[soniakaukonen]

Findings to explore based on # 53

Inconsistencies XD:

• [x] Buttons, auxiliary icon only button sets:

• Light mode, set 1, active is #2B2A37 non-palette and set 2 is identical, also off-palette = should be Trimble Gray?

• Light mode, set 2, hover background is #E7E960 (small and large), should be Gray 0

• Light mode, set 2, disabled (only small) is non-palette #2B2A37 instead of Gray 6 like the other sizes

• Dark Mode, set 2, hover state- discrepancies between Gray 5 (default size) and Gray 6 (small and large size), active states, discrepancies between Gray 8 (default size) and Gray 9 (small and large size)

• [x] Breadcrumbs: inconsistencies between Trimble Blue and Light blue across XD. Which one is correct (Figma legacy is Trimble blue)

• [x] Calendar picker in light got Trimble blue and in dark dark blue. Should not it be harmonized and follow the logic of Navbar, both dark blue? Otherwise it could be Dark Mode blue but the surface appears slightly too dominating.

• [x] Checkboxes: Focused glow color code appears strange. Indeterminate light mode with label is inactive, without active. Intentional?

• [x] Chips: deviations in dark mode hover and disabled among versions

• [x] Messages: both colors of messages are called Primary in XD (Primary and Secondary in Figma)

• [ ] Navbar icon backgrounds and profile initials have non-palette code(?)) - white button initials text and default/disabled of icons. Some dark gray nav bar examples have a non-palette gray #1A2022

• [x] Pagination light blue numbers (Trimble blue in legacy Figma) which is correct?

• [x] Radio buttons: light mode clash XD and Figma for disabled. Dark Mode default faulty in XD (without label is deactivated instead)

[soniakaukonen]

Button findings:

[egunther39]

@soniakaukonen

Buttons, auxiliary icon only button sets:

• Light mode, set 1, active is #2B2A37 non-palette and set 2 is identical, also off-palette = should be Trimble Gray? FIXED
• Light mode, set 2, hover background is #E7E960 (small and large), should be Gray 0 FIXED
• Light mode, set 2, disabled (only small) is non-palette #2B2A37 instead of Gray 6 like the other sizes FIXED
• Dark Mode, set 2, hover state- discrepancies between Gray 5 (default size) and Gray 6 (small and large size), active states, discrepancies between Gray 8 (default size) and Gray 9 (small and large size) FIXED changed to Gray 9

Breadcrumbs: inconsistencies between Trimble Blue and Light blue across XD. Which one is correct (Figma legacy is Trimble blue) - Blue Light is Correct

Calendar picker in light got Trimble blue and in dark dark blue. Should not it be harmonized and follow the logic of Navbar, both dark blue? Otherwise it could be Dark Mode blue but the surface appears slightly too dominating. I don't think it's necessary to mimic the NavBar color as this is a completely different component. That said, we can change Dark mode to the below as it reads better against various backgrounds Light = Trimble Blue Dark = Let's use Trimble Blue Dark - #004F83

Checkboxes: Focused glow color code appears strange. Indeterminate light mode with label is inactive, without active. Intentional? Dark Mode default faulty in XD (iw/o label is deactivated instead) FIXED

Chips: deviations in dark mode hover and disabled among versions - XD IS CORRECT. Deviations are because one set is an OUTLINED chip, thus the border has to be the electric blue w/ a different BG fill. The other set is solid, and the only accessible background option is electric blue. The background color used in the outlined options doesn't work without the border

Messages: both colors of messages are called Primary in XD (Primary and Secondary in Figma) FIXED IN XD

Pagination light blue numbers (Trimble blue in legacy Figma) which is correct? XD IS CORRECT. THIS IS ANOTHER EXAMPLE OF A TOGGLE STATE SIMILAR TO CHECKBOXES

[egunther39]

These are fixed in XD