demo · v131

Whole-component theming from one color

The card below uses rgb(from currentcolor ...) for its border, shadow, background, badge, body, and footer divider — all derived from the single inherited color. Set one variable, the whole component re-themes itself. Then duplicate the component and a sibling can pick a different palette without re-defining tokens.

palette:
Blue

Primary CTA card

Same markup as its siblings — only the inherited color differs. Border, shadow, badge bg, badge fg, body text, divider all derive from it.

tokens · 0
Rose

Alert card

If the spec hadn't shipped, each of these would need a per-theme set of CSS variables: --bg, --border, --text-soft, etc.

tokens · 0
Emerald

Success card

Now: one inherited color and a few RCS-derived expressions handle everything.

tokens · 0

the css

.stage {
  /* color: comes from inheritance (or the element style) */
  border: 2px solid currentcolor;
  background: rgb(from currentcolor r g b / 0.04);
}

.stage .badge {
  background: rgb(from currentcolor r g b);
  color: rgb(from currentcolor calc(255 - r) calc(255 - g) calc(255 - b));
}

.stage p {
  color: rgb(from currentcolor r g b / 0.85);
}

.stage .meta {
  color: rgb(from currentcolor r g b / 0.6);
  border-top: 1px solid rgb(from currentcolor r g b / 0.3);
}

see also