DataViews: inherit background color from parent

[oandregal]

What problem does this address?

We want DataViews to inherit the background color from the parent component. There are two aspects that don't:

• sticky elements: footer (bulk actions, pagination)
• fly outs: view config, actions menu, filters, etc.

We tried making it transparent at #73240, but sticky elements were an issue, so we switched to make it white and offer customizability via CSS Custom Props at #73390

The direction for the Design System favors this approach instead: there's a ThemeProvider that configures high-level design aspects (density, color palette) by setting certain CSS Custom Properties. Components use these properties for styling. If components want to offer customization, they do so by exposing props for consumers to use.

See the case of the Box component:

<Box
  backgroundColor={...}
  padding={ ...}
/>

What is your proposed solution?

Even if it's just early days, we need to align DataViews with the DS best practices. This means we need to deprecate the usage of the CSS Custom Properties.

The way forward would be either offer customizability via component prop (backgroundColor), or find ways for the background color to cascade where it doesn't normally do (e.g., sticky elements).

[oandregal]

The way forward would be either offer customizability via component prop (backgroundColor), or find ways for the background color to cascade where it doesn't normally do (e.g., sticky elements).

In a conversation with @youknowriad he argued that we should not expose a prop for this, but rather find ways to do it automatically (e.g, via JavaScript).

That's fine by me, as long as we see the sticky elements and the fly outs as being different surface areas for colors. The sticky elements would use the parent color, but the fly outs would use the color coming from the ThemeProvider.

cc @jameskoster how does this sound to you?

[jameskoster]

I already left a comment in #73334 (comment) about the js approach which makes sense to me :)

I think it should only apply to the sticky elements though. Other UI elements like popovers and menus should use the standard styling.