a little css trick i like ↓ adapt the radius gradually based on available space shrink from --r to 0 within --g 🧑‍🍳 .card__surface { --r: 42px; --g: 24px; border-radius: clamp( 0px, (100vi - 100cqi) / 2 * var(--r) / var(--g), var(--r) ); }

fun, polaris does it

Doesn't this break your design system ? Or you apply it to all components (cards / btns / etc.. ) ?

definitely a "case by case" type thing for example, makes for a pretty nice touch on a hero section container 🤙

one day, an ai will be build in your image

Nice touch. Conveniently, `progress()` will be Baseline Widely Available by next week, making this even easier.

yeah, progress() is a nice one 💯 perhaps not "easier", but def more "verbose" as will likely still need the clamp 🤙

AFAIK progress() clamps the value by default unless you use no-clamp

ahh yes, it's the opposite way around, i forget that the clamp param came in later 🤙

this is indeed sexy :) the software eng in me worries this is a code smell though trying to be clever in one line that which would be better achieved via explicit breakpoints over more lines -- a heuristic which is even more important these days w AI code gen

wouldn't say it was a code smell, it' just a detail ai is more than capable of understanding/producing this snippet as well

oh my...I didn't even know vi and cqi exist

some other good ones too out there! cqmin/max are great!