demo · v138

Delta badge

A pure-CSS dashboard widget. Drag the slider to set a percent change; the same custom property feeds the colour (via sign()), the arrow direction (via sign()), and the bar width (via abs()). One source of truth, zero JS layout math.

checking abs() / sign() support…
+12

signups

2,431
+12%

retention

68%
−7%

churn

1.2%
0%

the trick

.metric {
  --delta: -7;
  --s: sign(var(--delta));
  --a: abs(var(--delta));
  --tone: color-mix(
    in srgb,
    var(--accent-emerald) calc((1 + var(--s)) * 50%),
    var(--accent-rose) calc((1 - var(--s)) * 50%)
  );
  --strength: min(var(--a), 100);

  background-color: color-mix(
    in srgb,
    var(--tone) calc(var(--strength) * 0.18%),
    var(--bg-paper)
  );
}
.arrow { transform: rotate(calc((1 - var(--s)) * 90deg)); }
.bar::before {
  width: calc(min(var(--a) * 1%, 100%));
  background: var(--tone);
}

Before abs() and sign() in CSS, the same widget needed JS to compute the bar width, set an arrow class, and update a colour token — or three separate custom properties supplied by JS. Now the dataset is just --delta and the CSS does the rest.

see also