Scaling shadow-root component attributes

[SDBonhof]

Hi!

I have a question regarding the use of px in some of the subcomponents. For example, md-text-button has a button component with a gap set to 8px. The result is that this gap looks a lot larger on 1080p screens than on 4k screens, even though we want both to look exactly the same (we scale our root font size with the monitor's resolution).

I found here that <md-*> components within other <md-*> components can be easily styled using the ::part() CSS pseudo-element. However, the button component in md-text-button does no have a part attribute.

Is there any easy way to ensure the px defined attributes scale with rem? I haven't found anyone else with this issue on this repo yet, so I feel like I am missing something.

Thanks!

[asyncLiz]

This may be easier once all system tokens are in for shape and spacing.

Until then, you should be able to update everything except spacing to rem with custom properties, but it'll be a lot :(

I think it's worth opening a discussion on px vs rem though. There may be reasons buried deep in the closet for why we prefer them.

[SDBonhof]

Thank you for you response! :)

Until then, you should be able to update everything except spacing to rem with custom properties, but it'll be a lot :(

It's not ideal, but it's very manegable. Material web has inceased our development speed tremendously so we don't mind adding some custom properties here and there.

I think it's worth opening a discussion on px vs rem though. There may be reasons buried deep in the closet for why we prefer them.

I'd certainly be interested in the arguments to prefer px over rem. For us, we use rem since we are developing a UI that will always be shown full-screen on 16:9 screens, and we want to ensure that the UI looks the same on both 1080p and 4k. I don't know how you would do that with px so that's why we chose rem/em for our components.