demo · v152 · css

Translucent Tokens

A real design-system job: one brand token drives a whole family of translucent surfaces — a modal scrim, a hover tint, a focus ring, a disabled fill — each derived with alpha(from var(--brand) / calc(alpha * k)). Change the brand color and every derived surface re-tints from the single source of truth.

checking support…

the tokens, doing their job

Dialog on a scrim derived from the brand. The input shows the focus ring; the button shows the disabled fill.

—

the pattern

:root { --brand: #0022ff; }

.surface {
  --scrim:    alpha(from var(--brand) / calc(alpha * 0.55));
  --tint:     alpha(from var(--brand) / calc(alpha * 0.12));
  --ring:     alpha(from var(--brand) / calc(alpha * 0.45));
  --disabled: alpha(from var(--brand) / calc(alpha * 0.30));
}
.modal-scrim  { background: var(--scrim); }
.list-row:hover { background: var(--tint); }
:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
button[disabled] { background: var(--disabled); }

Because alpha() scales the origin's own alpha with the alpha keyword, the same declarations keep working if --brand is itself already translucent — no channel is re-stated, so nothing is accidentally reset to full opacity.

see also