Material-components-web-components: Support Material Density

[dfreedm]

The MDC Density system currently relies completely on Sass mixins, which is not compatible with how we are using the Sass with Web Components.

We need to provide a way to do this via CSS Custom Properties, or a theming system.

[TomzBench]

@use "@material/button";

.my-custom-button {
  // Sets button density scale to `-3`, i.e. button height to `24px`.
  @include button.density(-3);
}

Is it possible to pass through this API? I tried that before reaching here and am blocked by the shadowroot. However, if I can passthrough my styles to the shadow root styles as a work around?

If the base class had a method to merge the component static styles property then wouldnt the mwc density API work?

[asyncLiz]

It's not possible to use MDC's sass density mixins with MWC. We're actively working on a solution though!

[TomzBench]

Will the solution allow using MDC sass mixins with MWC?

Or is the solution going to be wrapping all of MDC functionality with a unique wrapper API? I vote for the former!

[yinonov]

Where does this stand? Density is a fundamental abstractions in our branding identity. Would love to be able to control it with a high level variable

[asyncLiz]

It's planned out, but a few things have slipped behind due to the COVID situation. This should be coming soon though after some theming work.