demo · v137

Responsive Tokens with if(media())

A common design-system pattern: pick a colour, font-size, and padding off a single breakpoint ladder. Pre-v137 needed three separate @media blocks (or three calc/clamp hacks). With if(media()) the entire ladder lives in one line per token. Drag the bottom-right corner of the stage to resize.

probing…
Hello, world

stage width = 800px · drag the bottom-right corner to resize, or click a preset above.

—

the code

.card {
  background: if(
    media(width >= 800px): emerald;
    media(width >= 500px): blue;
    else: rose
  );
  font-size: if(
    media(width >= 800px): 2.4rem;
    media(width >= 500px): 1.8rem;
    else: 1.3rem
  );
  padding-block: if(
    media(width >= 800px): 2.4rem;
    media(width >= 500px): 1.6rem;
    else: 0.8rem
  );
}

/* Pre-v137 equivalent: 3 @media blocks per token,
   9 separate rule declarations to keep in sync. */

see also