Darker rule component

[bartaz]

Done

• darkens rule colours
• adds dark example for rules
• updates dark theme background colours

Fixes WD-4564
Fixes WD-4683
Fixes WD-4684

QA

• Open demo
• Check updated rule colours
• Review updated documentation:
  • https://vanilla-framework-4801.demos.haus/docs/patterns/rule
  • Light theme rules: https://vanilla-framework-4801.demos.haus/docs/examples/patterns/rule/highlight
  • Muted: https://vanilla-framework-4801.demos.haus/docs/examples/patterns/rule/muted
  • Dark theme rules: https://vanilla-framework-4801.demos.haus/docs/examples/patterns/rule/dark

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.

[webteam-app]

Demo starting at https://vanilla-framework-4801.demos.haus

[lyubomir-popov]

Looks good. Can we please add the following example - to indicate it is ok to use the black p-rule as a full-width element:

You can take it from my pr here (you'll need to uipdate the classes to what you've specified in the css):
https://canonical-com-898.demos.haus/

[ClementChaumel]

The non-highlighted p-rule still uses opacity, I don't know if it's correct.

For the highlighted one, the contrast is insufficient for graphical elements components on a page https://webaim.org/resources/contrastchecker/?fcolor=000000&bcolor=222222#:~:text=Graphical%20Objects%20and%20User%20Interface%20Components

If the black text turns white on a dark background why not turn the p-rule white too?

[lyubomir-popov]

For the highlighted one, the contrast is insufficient for graphical elements components on a page

That's for cases where they carry information, for example a chevron which is the only indication that something is interactive.
Rules are decorative elements so not subject to these requirements.

What we discussed with @bartaz yesterday was to add a theme-agnostic black hr.p-rule, for use in select cases.

We may still have a valid case for a white bar and a transparency one, this is why we're not modifying the hr.is-dark styling - that results in a white hr with opacity.

Just checked the example, I would expect the classes is-dark and p-rule--highlighted to be possible on the same element in the dark theme. Maybe we can add that @bartaz?

[bartaz]

Dark theme colours:

background defaultr: #262626
background alt: 2d2d2d

default dark border is white 0.1 opacity
hi contast 0.5 opacity

highlight bars are text colour on both themes

[lyubomir-popov]

@bartaz can we have a is-thick modifier so we can obtain the semi-transparent version in the thick style? It's the only way I can think of achieving this given the current setup:

[ClementChaumel]

Well done 🚀

[ClementChaumel]

Why do we have both is and on modifiers?

[bartaz]

I want to deprecate is-dark as it's often confusing ("is-dark" rule or icons being white), so "on-dark" makes more sense - they are supposed to be used on dark backgrounds.

I forgot to add deprecation comments and docs.

Ideally later (hopefuly for 4.0 release) I want to revisit other is-theme class names and do similar change where relevant.

[bartaz]

So on-dark is new and should be used is-dark is needed for backwards compatibility.

[lyubomir-popov]

Thanks @bartaz I've given +1. Ideally the dark example should use a default 1px line for the left aligned headings, and a muted one for the ones inside, to match the latest design, but fine to go as is if you're pressed for time.

[bartaz]

@lyubomir-popov You may have been looking at the older example, maybe demo was not updated yet, or cached.

It should look like this:

I deliberately used all versions (thick, default, muted) so we can see them all on dark theme:
https://vanilla-framework-4801.demos.haus/docs/examples/patterns/rule/dark

[lyubomir-popov]

I deliberately used all versions (thick, default, muted) so we can see them all on dark theme:

Ah got it, good idea. Thanks for explaining.