Example color theme improvements

[jmuzina]

Done

More limited version of #5086 that achieves #5086 goals without modifying the back-end or modifying example templates.

Fixes #5069, WD-11110

QA

• Open demo
• Open a themed component e.g., table
  • Verify that the color theme switcher is present and uses Segmented Control component.
  • Verify that the baseline grid toggler works.
  • Inspect the element containing the theme switcher & baseline grid control. Verify that the element (div.u-example-controls) is positioned to the bottom right of the page, not its contents.
  • Switch color themes. Verify that the theme has been changed for the example, segmented control state has been updated to reflect the active theme, and the URL query parameter theme has been set to your selected theme.
  • Refresh the browser. Verify that the theme you previously had selected is still active.
  • Small/Medium breakpoints:
    • Verify that the theme switcher & baseline grid control are neatly positioned in the same element & both visible on screen.
    • Verify that the segmented control segments (color themes) are all on the same horizontal line (do not wrap).
• Open a non-themed component, e.g., Article Pagination.
  • Verify that the color theme switcher is not present & no theme query parameter is present in your URL.
  • Verify that the baseline grid switcher is still present & functional.

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:

• 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

[jmuzina]

There are some unexpected Percy changes, it looks like something I changed in the SCSS has had some unintended consequences. Investigating now

[jmuzina]

Removed example sass from vanilla bundle and now there are no percy diffs.

[bartaz]

I think there are some leftovers from previous implementation that may be not needed anymore.

[jmuzina]

@lyubomir-popov Your feedback is now in the demo; see button for example

[pastelcyborg]

Not directly related to the color theming toggle functionality, but I notice some components still don't fully support all the themes - for example:

https://vanilla-framework-5087.demos.haus/docs/examples/patterns/tables/table-colored-rows?theme=dark

Does this affect our desire to add this theme toggle right now? Seems like maybe it should be held off until all the components fully support each theme?

[jmuzina]

Does this affect our desire to add this theme toggle right now? Seems like maybe it should be held off until all the components fully support each theme?

@pastelcyborg We're not adding the theme toggle - it's currently in production. The problem with it is that it doesn't reflect the active state (the selected color theme is not shown on the theme selector).

See comment by Bartek for context

[bartaz]

Does this affect our desire to add this theme toggle right now? Seems like maybe it should be held off until all the components fully support each theme?

The theme switcher is already there, this PR only makes it better.
It is our goal in longer term to figure out how this is supposed to work across all the examples which may have some hardcoded colours now.

[bartaz]

There are some z-index issues (with notifications for example).
I guess we should increase the z-index of this toolbar to be above anything else.

https://vanilla-framework-5087.demos.haus/docs/examples/layouts/docs

Even more visible here:
https://vanilla-framework-5087.demos.haus/docs/examples/templates/z-index?theme=light

[bartaz]

LGTM, thanks!