Re: [csswg-drafts] [css-values-4] inherit() function: like var() for parent value, for any property (#2864)

To pile on to the use cases here, I have two that this would uniquely solve:

## Recursive calculations

I've come across recursive DOM structures like trees where you want some measurement to be defined in terms of the parent value. A tree item might need to be 100% of the tree width to paint leading and trailing decorations, but you want the label indentation to increase with each nesting. A style like this would be a great way to do it:

```css
:host {
  --level: calc(inherit(--level, 0) + 1);
}
.label {
  padding-left: calc(var(--level) * 16px);
}
```
## Defaults for custom properties

Right now it's very difficult for a component to define properties that are overridable by users but have default values. `var()` allows this of course, but the property definition itself doesn't. This means component authors have a few tough options:

  - Put defaults in the `var()` fallbacks. This makes the defaults cumbersome to specify. They have to be copied into ever `var()` expression - you can't just adopt a common stylesheet that defines the defaults.
  - Define separate default properties, and always use them as `var(--foo, --default-foo)`. This lets you import a set of defaults into every component, and lets the properties be overridden by users, but has a high overhead cost.
  - Don't default defaults at all. This forces users of the component to apply default styling to have properly rendered components at all, and it doesn't compose, since those values won't be overridable from further up the tree.

What devs I work with often ask for is a way to define a custom property with a very low importance, sort of the opposite of `!important`:

```css
:host {
  --secondary-color: coral !default;
}
```
Which would let `--secondary-color` still be set from the outside.

It seems like `inherit()` could fill this role nicely with a fallback:

```css
:host {
  --secondary-color: inherit(--secondary-color, coral);
}
```

This style of default could be adopted into every component, before component user styles in the cascade, and the default will only take effect if the user doesn't otherwise define the property.



-- 
GitHub Notification of comment by justinfagnani
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2864#issuecomment-1427064314 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 12 February 2023 15:44:44 UTC