Open yceballost opened 1 month ago
There are three categories here:
The solution proposed:
Change the following tokens in dark to a white with alpha:
backgroundContainer
, backgroundContainerBrand
, backgroundContainerBrandOverInverse
, backgroundContainerAlternative
backgroundContainerError
Create new tokens with -solid
suffix that apply to elements that match 1 and 3 scenarios
Elements that have to use backgroundContainerSolid
always:
background
which is incorrect according to spec)Elements that should have transparent background in dark:
There were two initial approaches for this task:
I propose a third approach: using borders, similar to light mode, on elements that can potentially be placed inside a boxed element.
The reason for this proposal is that, for example, with interactive elements like text fields, even using an alpha for the background, we cannot ensure a 3:1 contrast ratio with the card background. Adding a border would make this simpler.
Description
OverMedia context (#1764) can resolve elevation problems in dark mode.
BackgroundContainer should set a color with opacity to make possible different elevation when you include a boxed component inside other boxed component.
This opacity in backgroundContainer will be a problem when you use a boxed over image or floating elements (sidebar, fixed elements in the screen, etc). To fix this problem we need to create new tokens that will be used with OverMedia context
Tasks