Update application layout to new theming

[pastelcyborg]

Done

• Updated _layout-application and _layout-application-panels to use new theme Sass variables
• Rewrote the structure example to better reflect panel and panel child element options
• Removed unnecessary styles from demo CSS
• Added a few missing HTML tags

Fixes WD-11869

QA

• Open the JAAS, default. split, and structure demos
• Test each theme at each breakpoint size, ensuring each panel/nav element is shown/hidden

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 🔨.
• [X] 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 release (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
• [X] Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

In lieu of screenshots, would recommend pulling the branch and testing manually; would be numerous screenshots to upload here.

[webteam-app]

Demo

Jenkins

demos.haus

[pastelcyborg]

@jmuzina @bartaz Marked this as ready for review, but did want to call out a few open questions I have:

• Please see TODOs in code - mostly related to box-shadow colorization and possible removal of is-dark descendent selectors
• Will other HTML files need to be updated, given I made some dramatic changes to structure especially?
• We should consider attempting to theme panel scrollbars, if possible
• Have a good look at the structure changes - I updated it to better reflect what a fully fleshed-out application layout would probably look like, as it was quite stripped down and missing what I'd consider to be fairly important elements

[bartaz]

Looks like this has blown in scope from "update the colours to be themed" to "refactor application layout structure", which makes is a bit harder to review.

Would it be possible to make minimal colour changes separately (just to make sure that any colours used by application layout are themed), and leave the rest of it to be done separately? Any structure changes need to be backwards compatible, so we have to do them with care.

[jmuzina]

Borders on the structure example seem to have a bit too much contrast, unless this is intended:

[pastelcyborg]

Borders on the structure example seem to have a bit too much contrast, unless this is intended:

So these borders are part of the demo CSS file, rather than using any particular part of Vanilla, so theming doesn't apply. I'm open to ideas (or otherwise we could just remove them entirely).

[bartaz]

Overall, the structure example is just a structure, it's not about styling at all. So theming doesn't matter to it. We could (and probably should) disable the theming on it completely.

The important bit is if we got rid of any direct colour variables from application/panels code.

[pastelcyborg]

After discussing, we've decided to keep some of the important elements on the structure example (for instance, panel), but get rid of any unnecessary ones. We concluded it's important to represent a holistic version of application layout, since the structure without any panels isn't particularly useful to end users. Will make these changes.

[pastelcyborg]

This is ready for another review since I've stripped down the structure example even further.

[bartaz]

The color of the scrollbar for the sidebar (I've been testing Split) seems to change depending on light/dark theme, despite the sidebar itself always being dark-theme. This makes it particularly hard to see the scrollbar on light-theme.

We haven't been theming (or otherwise altering) native browser scrollbars, so I wouldn't consider it a part of this PR.

If there are any particular issues I'd raise them separately, we would need to have a separate proper look on how theming affects scrollbars across variety of browsers and OSes (and if we can control it in any way).