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 abstraction 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.

[maicol07]

It has been almost 1 year since the last update. Is it coming soon?

[Daymannovaes]

Me too. I constantly rely on the use-case of an mwc-button with a different height.

[lsatheeshkumar]

An update on this would be of great help.

[aress31]

+1

[JamesODonoghue]

We are also looking forward to this support.

Any updates would be greate

[milesje]

Any update on this???

[asyncLiz]

Density support is slowly being added as components' theming capabilities are being updated. <mwc-switch> is a good first example:

@use '@material/mwc-switch';

mwc-switch.dense {
  @include mwc-switch.theme(mwc-switch.density(-1));
}

Generates:

mwc-switch.dense {
  --mdc-switch-state-layer-size: 44px;
}