Update navigation theme styles to use design tokens
What does this MR do and why?
The update to GlButton to use design tokens introduced the same foreground color for icon/text. Previously button icons had a lighter shade.
This MR brings the same visual treatment to the navigation by removing gray.500 for icons in the super sidebar.
This MR also uses CSS custom properties for theme colors using the new color.theme-blue.500 (static constant colors between modes) etc. design token definitions to remove deprecated theme.blue.500 (inverting colors between modes) design token usage.
This MR also updates organisation switcher to use same styles as user bar button and to use Tailwind utility classes.
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
| Before | After |
|---|---|
| CleanShot_2024-08-09_at_13.30.01 | CleanShot_2024-08-09_at_13.26.21 |
| CleanShot_2024-08-09_at_13.30.25 | CleanShot_2024-08-09_at_13.26.56 |
How to set up and validate locally
- Update navigation theme in user preferences https://gdk.test:3443/-/profile/preferences
- Toggle between themes
- Validate button styles in navigation
- Validate active link item accent color