Scale up/down buttons wrong color in SUSE theme

[nwmac]

The scaler component for resource cards renders with a bright green color that doesn't match the rest of the Prime theme.

Steps to reproduce

1. Deploy a Prime image of Rancher or enable the Prime theme
2. Create a deployment
3. Navigate to Cluster Explorer => Deployments and click on the deployment created in step 2

Actual behavior

The scaler controls for pods renders a bright green color that doesn't match the Prime theme

Expected behavior

The scaler controls use colors that align with the Prime theme

Additional context

For both the background color and hover styles, we calculate the color based on the --primary variable:

dashboard/shell/components/Resource/Detail/Card/Scaler.vue

Line 57 in c4bd488

background-color: hsl(from var(--primary) h s calc(l + 30));

dashboard/shell/components/Resource/Detail/Card/Scaler.vue

Lines 79 to 81 in c4bd488

	&:hover {
	background-color: hsl(from var(--primary) h s calc(l + 20));
	}

I think that we can benefit from being more explicit about our colors so that they render properly across all our supported themes.

Related issues

• Refactor hardcoded colors to color swatch variables #15562
• Modern Theme: Refactor hardcoded color variables #15596

Original context

Image is worth a thousand words:

[rak-phillip]

We're calculating the colors for the scaler based on the primary color:

dashboard/shell/components/Resource/Detail/Card/Scaler.vue

Line 57 in c4bd488

background-color: hsl(from var(--primary) h s calc(l + 30));

@oboc-sts I think that this feeds into work that you're addressing for:

• Refactor hardcoded colors to color swatch variables #15562
• Modern Theme: Refactor hardcoded color variables #15596

[rak-phillip]

I update the issue with more details, preserving the original context

[oboc-sts]

background-color: hsl(from var(--primary) h s calc(l + 30));
@oboc-sts I think that this feeds into work that you're addressing for

It might be indeed, but that work has lower priority and it's going to take a bit to complete.

The visual bug @nwmac addressed above however, has (should have) a different priority imho, meaning it's a punctual, highly visible bug we should fix asap.

@rak-phillip @codyrancher It that dynamic calculation being used anywhere else, besides the scaling button?

If not, I'll come up with static values to solve this, I believe we can reuse some of the colours (default / hover) from the sidebar navigation.

[rak-phillip]

@oboc-sts We have quite a few calculations used throughout Dashboar, but nothing that looks immediately pertinent like this; there's one similar calculation for the keyboard focus outline:

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

Line 865 in 8105379

--primary-keyboard-focus : hsl(from var(--primary) h s calc(l + 10));

But that doesn't appear to be problematic, as we take both themes into account.

[oboc-sts]

Thanks @rak-phillip 🙌

Would it be worth it for me to come up with static values for that special button (I don't believe we have it anywhere else) or do you want to improve / change the calculation?

Below I've started playing with an idea I had = apply the styles we use on the "actions" button, see how it looks below and please let me know what you think 🙏

[rak-phillip]

Would it be worth it for me to come up with static values for that special button (I don't believe we have it anywhere else) or do you want to improve / change the calculation?

@oboc-sts I think that we should come up with static values that fit this use case and add them to our color swatches/understand where they belong in our color scheme. We might be able to fix the calculation for the current themes, but we risk breaking again when we add/update themes in the future.