MaterialZ v2.y
The next version of MaterialZ is now rolling out: Version—um...OK, so version numbers in the last few MaterialZ updates have been a little bit...undefined. Solution: I dub the now-previous version “2.x”, and that makes this new release MaterialZ v2.y! And it has been packed with exciting things (well, exciting if you like plug-and-play Material Design CSS libraries), ranging from support for some newer browser features (like prefers-reduced-motion), to long-wanted features (like toggle switches and checkbox ripples), to the occasional overdue fix for an older browser (shout-out to anyone else still keeping an Android 2.x device alive).
Even with all that, though, it maintains the original goal of MaterialZ: Drop it into an unstyled page for instant Material-ization—it “just works”. And to be sure the new features work as expected in real use cases (and to flex a little on the number of Google apps that still do not use Google's official Material Web Components library), I pretty much updated all my MaterialZ apps to the new version—old ones; personal ones; even the random tiny silly ones. Oh, and some got the new plug-and-play dark theme too. (Granted, most of those are almost infinitely less complex than your average Google app, but the point is I think it works 😜)
You can check out all the new stuff at MaterialZ.dev. If you want to support my dev work, consider backing my Patreon (egh, does that ever feel less weird to say?) or buying me a Ko-fi. And here are the release notes for v2.y:
- Added dark theme
- Added toggle switches
- Added support for date, date/time, month, telephone, time, and week inputs
- Added ripple around checkboxes and radio buttons
- Added full-width card class
- Added ability to set accent color via custom property
- Made more elements derive their theme colors from their
colors - Made unchecked checkboxes and radio buttons match their surrounding text color
- Disabled animations when
prefers-reduced-motionis set toreduce - Increased default card corner radius to 3px
- Slightly reduced padding on
<select>drop-down arrows - Fixed radio buttons, slider thumbs, and circular progress spinners appearing square on old Android browsers
- Removed Internet Explorer fallback lines from
material-depth.css - Removed suggestion to set circular progress spinners'
border-top-colors - Improved demo page (in addition to updating it to include the new features)