demo · v142

Density Stepper

Two custom properties (--density, --temp), eight range rules between them. The data tile picks padding, font size, and background from whichever style(--prop >= …) band the values land in — zero JavaScript class-toggling, zero discrete `style(--prop: x)` enumeration.

CPU load 42%
memory 6.8 GB
incoming 142 r/s
density 1-2 → roomy
density 3-5 → comfortable
density 6+ → compact
temp < 0 → cold
temp 0-17 → cool
temp 18-25 → room
temp 26-31 → warm
temp ≥ 32 → hot

relevant CSS

.preview {
  container-type: inline-size;
  container-name: density-stage;
}
@container style(--density >= 1) and style(--density <= 2) {
  .data-tile { padding: 3rem; font-size: 1.4rem; }
}
@container style(--temp >= 32) {
  .data-tile { background: var(--accent-rose); color: white; }
}

see also