CSS custom functions 🍹 HTMLcat

@function brings small reusable calculations to CSS. Custom functions return a value and can receive typed parameters. Experimental, but interesting for design tokens.

@function --alpha(--color <color>, --amount <number>: .7) returns <color> {
  result: oklch(from var(--color) l c h / var(--amount));
}

.button {
  background: --alpha(var(--brand), .85);
}

More info on MDN.