demo · v131

currentcolor in Relative Color Syntax

Relative Color Syntax (rgb(from ...)) now accepts currentcolor as the base. A component can derive its background, border, and meta variants from the inherited color alone - no per-theme CSS variables required. Pick a colour and watch everything shift together.

card heading

This card sets color once. Border, soft fill, paragraph, and badge all pull from currentcolor via relative syntax.

derived meta 
.demo-card {
  color: #0a8f5c;
  border: 2px solid currentColor;
  background: rgb(from currentColor r g b / 0.08);
}
.demo-card p   { color: rgb(from currentColor r g b / 0.85); }
.demo-card .meta {
  color: rgb(from currentColor calc(r - 60) calc(g - 60) calc(b - 60));
  background: rgb(from currentColor r g b / 0.15);
}

see also