Open dfreedm opened 4 years ago
@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?
It's not possible to use MDC's sass density mixins with MWC. We're actively working on a solution though!
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!
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
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.
It has been almost 1 year since the last update. Is it coming soon?
Me too. I constantly rely on the use-case of an mwc-button with a different height.
An update on this would be of great help.
+1
We are also looking forward to this support.
Any updates would be greate
Any update on this???
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;
}
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.