Multilayers in dark mode (elevations)

[yceballost]

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

• Update specs
• Design documentation
• Add to mobile library
• Add to desktop library
• Add to UI Kit
• Android ticket
• iOS ticket
• Web ticket

[aweell]

There are three categories here:

1. Elements that are directly positioned over a media element: They should have a solid color
2. Elements that are positioned over another container or background: The should have a transparent color
3. Elements that are fixed, relative or absolute positioned: They should have a solid color

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:

• FixedFooter when is over content
• Tooltip / Popover
• Select options container
• Menu options container
• Carousel Arrows
• Sheet (Now is using background which is incorrect according to spec)

Elements that should have transparent background in dark:

• Cards
• Boxed
• BoxedRow
• EmptyStateCard
• Callout
• Accordion
• Chip
• Counter
• IconButton
• Texfields
• PinField
• Select

[aweell]

There were two initial approaches for this task:

1. Generate layers with alpha
2. Determine when specific elements are contained within others to change their background

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.