Notifications and Darkmode

[Vandapanda]

Notification components (Banner, Toast etc) can have multiple elements in them. How do we handle that the components know what scheme to use? Can we set the components to light only? What happens if a theme needs the component in a darker tone?

[gfellerph]

Resolution from Pattern discussion: Use a workaround for the header and footer (setting data-color-scheme="light" on the host). For the banner, create a web component so we're able to read out the color scheme on the client (the resolved token value) and set the color scheme accordingly.

An improvement to data-color-scheme would also be to set the correct text color that should apply in this mode and not only the semantic variables.

Alternative to create web components for banners just to read out the resolved token: add banner classes to the light scheme selector for semantic layer tokens because we know they're all light (might break if one of them ever has a dark background but is faster to implement).