Extensions can override Toplevel Nav styles

[rak-phillip]

Setup

• Rancher version: Rancher Head
• Rancher UI Extensions: NA
• Browser type & version: Firefox & Chrome

Describe the bug

Installed extensions have the ability to override Toplevel Nav styles in Rancher Shell.

To Reproduce

1. Install Code Zero - the newly added icon is correct
2. Install Supportability Review

Result

Extension icon styles in the Toplevel Nav are mutated

Expected Result

Styles remain as they are defined in the host instance

Screenshots

Additional context

[nwmac]

@rak-phillip I think this may have been fixed - but there is an issue with the color change that we do for extensions when they provide SVGs - the hover color is wrong - looks like we're still using --link whereas the icon based icons use --on-tertiary

[rak-phillip]

@nwmac I just tested with a newly deployed head image - this issue is not fixed. Reproduced by first installing CodeZero and then installing CloudCasa - the inclusion of CloudCasa mutates the colors of the svg icons:

looks like we're still using --link whereas the icon based icons use --on-tertiary

--on-tertiary is defined as --on-tertiary: var(--link); and will evaluate to the same value as --link. We can fix this so that all svgs use --on-tertiary, but I still believe there to be a leaky abstraction with how extensions handle css.

dashboard/shell/assets/styles/themes/_modern.scss

Line 102 in 085a115

--on-tertiary : var(--link);