Use `daff-color-shift` in design component themes

[xelaint]

Feature description

daff-color-shift picks a color a set number of steps away from a palette's default hue. Component themes were written before it existed and still use fixed hues, so the colors they pick only line up when the default hue is the one Daffodil ships with.

&.daff-primary {
	@include daff-button-theme-variant(
		daff-color($primary),
		daff-color($primary, 70),
		daff-color($primary, 80)
	);
}

If primary hue is set to 40, the default becomes 40 while hover and active stay at 70 and 80 — three and four steps away instead of one and two.

Writing those colors as shifts keeps the relationship no matter which hue the palette is set to:

&.daff-primary {
	@include daff-button-theme-variant(
		daff-color($primary),
		daff-color-shift($primary, 1),
		daff-color-shift($primary, 2)
	);
}

Not every hue should become a shift. Some colors are meant to be a specific value rather than a distance from the default — a pale background at hue 10, or text pinned to the darkest end of a palette. Those stay as they are. The change applies where a color is meant to track the default, such as hover and active states.

• button-theme.scss
• flat-theme.scss
• icon-theme.scss
• stroked-theme.scss
• article-theme.scss
• badge-theme.scss
• breadcrumb-theme.scss
• callout-theme.scss
• card-base-theme.scss
• card/stroked-theme.scss
• form-field-theme.scss
• hint-theme.scss
• hero-theme.scss
• list-theme.scss
• media-gallery-theme.scss
• menu-theme.scss
• notification-theme.scss
• paginator-theme.scss
• progress-bar-theme.scss
• select-theme.scss
• switch-theme.scss
• tabs-theme.scss
• tag-theme.scss
• toast-theme.scss
• tree-theme.scss

Use case

I want to set primary to hue 40 in my theme and still have buttons darken by one step on hover and two steps on click, the same way they do with the default hue.

Prior work

daff-color-shift was added in #4661.

Daffodil version

0.94.0

Additional context

No response