Add rememberBreakpoint to Silk

[bitspittle]

This could be used to toggle code with logic, as an additional path besides component styling.

val breakpoint = rememberBreakpoint()
if (breakpoint >= Breakpoint.MD) {
   ... show this only on desktop ...
}

[bitspittle]

So this could be tricky - it doesn't seem like there's a good way to compare sizes of different units.

In other words, I can easily get the "px" value of the current window, but I have no idea if users defined their breakpoints as "px", "em", "rem", or some other relevant user size.

It could be easier to force breakpoints to always be "px" values but looking at this for example: https://chakra-ui.com/docs/features/responsive-styles it seems like using font-size related sizes may not be uncommon?

[bitspittle]

Here's an interesting article on the topic: https://medium.com/zoosk-engineering/to-em-or-not-to-em-that-is-the-media-query-question-22f4a65e9747

Feels like breakpoints should either be px OR em. Maybe I can force breakpoints to be one or the other behind the scenes, or a sealed class to limit to only those two types, which may allow this feature to work (assuming I can at least convert between em and px in javascript)

[bitspittle]

Looking ugly...

https://stackoverflow.com/questions/10463518/converting-em-to-px-in-javascript-and-getting-default-font-size

[bitspittle]

Maybe this, which lets you convert from px to em in code:

https://stackoverflow.com/a/12241338/17966710

[bitspittle]

OK, got this to work...

• Restricted breakpoint values to "px", "em", and "rem" units (for now)
• Ensured we can convert all breakpoint units to "px"
• Used "window.getComputedStyle(document.body).getValueProperty("font-size") for "em" and "rem" values
  • Hopefully this is not fragile, I guess we'll see
• Added a windows resize event listener which takes advantage of these new constraints to produce breakpoint state