css-inherit.md

CSS inherit function

It has a ton of potential to revolutionize how we use design tokens in components and UI libraries today. — Lea Verou

• Original Proposal

Use Cases

Nested indentation:

--indent: calc(inherit(--indent, 0) + 1);

Overridable design token defaults:

/*
Before:
:host {
  --default-primary-color: blue;
}
:host {
  background-color: var(--primary-color, var(--default-primary-color));
}
*/

--primary-color: inherit(--primary-color, blue);