When using Petal modules in a web component stylesheet (importing in directly), existing .dark overrides that are supposed to apply when a parent element has the class doesn't work properly because of scoping. By using :host-context(.dark) pseudo class Petal is able to target shadow hosts with the .dark class outside of the shadow DOM.
This PR adds a new @use-webcomponents global variable which defaults to false, but can be turned on in cases needed. Also converts existing .dark & style overrides to use .dark-override() mixin to make code more cleaner.
When using Petal modules in a web component stylesheet (importing in directly), existing
.darkoverrides that are supposed to apply when a parent element has the class doesn't work properly because of scoping. By using:host-context(.dark)pseudo class Petal is able to target shadow hosts with the.darkclass outside of the shadow DOM.This PR adds a new
@use-webcomponentsglobal variable which defaults to false, but can be turned on in cases needed. Also converts existing.dark &style overrides to use.dark-override()mixin to make code more cleaner.