Update status label component to use new color theme variables

[jmuzina]

Done

Updates the status label component to use new color theme variables.

Not much of a visual change with this PR; this is mostly a cleanup of _patterns_status-label.scss.

I added more semantic color variables for buttons as suggested here and bound them to the status labels component so that its styles are color-theme agnostic.

Fixes WD-11860

QA

• Open demo
• Verify status labels look as expected on all color themes

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• [x] PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• [ ] Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• [ ] Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

[webteam-app]

Demo

Jenkins

demos.haus

[bartaz]

@danielmutis Question for working group: is this component considered deprecated? From discussion with Lyubo it seems it is (because we have interactive and non-interactive chips), but I'm not sure if that's cross-team consensus. Especially that recently badges have been brought up again, so it seems like we are again clarifying the scope and usage of chips/badges/status labels.

[bartaz]

Dani: Apps mafia: we would use badges for this (but they don't work on their own). For us badges are the same as status labels. Lyubo: Badges were explicitly designed for being small and limited.

WG: there is a wider discussion needed. For now ideally we shouldn't touch them until further discussion.

[bartaz]

@jmuzina So, to unblock us on this one.

I see 2 ways of doing this:

• we may just leave them as they are (not using themed colours). not ideal, but "fine" (because they work regardless of the theme)
• we may update them to use theme colours, but kind of fix them to stay in one theme (regardless of the theme of a parent)

Not sure which one would be easier or better. I'm open to suggestions. I guess the tricky part is that we want to get rid of "hardcoded" colours for this one?

[jmuzina]

We have decided to leave this component as-is.

We may revisit this at a later date to define primitive color tokens for the status label component, but for now, the effort to theme this is too much.

[jmuzina]

The fact that this component is using hard-coded colors is a conscious decision for now, as it currently works fine in all themes.

[jmuzina]

Re-opening to add a comment to the code about why this component is "unthemed" and revert its scss changes.