[csswg-drafts] [css-values-4] Allow `inherit` in `calc()` (and friends), `color-mix()`, RCS (#9757)

LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values-4] Allow `inherit` in `calc()` (and friends), `color-mix()`, RCS ==
In #2864 we resolved to add `inherit(property)` to CSS, starting from custom properties. 

`inherit()` covers use cases across two main axes: 
1. Using the inherited value of property A in property B (verbatim or with a calculation)
2. Doing math on the inherited value

However, for 2 we don’t actually *need* `inherit()`, simply allowing `inherit` in `calc()` would work fine, is more elegant and familiar than `inherit()`, and being more limited it could likely ship earlier, possibly even for regular properties. 

One downside is that unlike `inherit()`, it does not allow for providing a fallback value.

## Use cases

_(These are a subset of the [use cases for `inherit()`](https://github.com/w3c/csswg-drafts/issues/2864))_

### Custom property value that depends on parent value

Generic `--depth` ([1](https://twitter.com/plinss/status/1350550362168545280), [2](https://twitter.com/kizmarh/status/1350937936804667394))

With `inherit()`:

```css
* {
 --depth: calc(inherit(--depth, 0) + 1);
}
```

With `inherit` (note that the code had to be restructured due to the lack of fallback value):

```css
:root {
 --depth: 1;

 * {
  --depth: calc(inherit + 1);
 }
}
```

See also: https://github.com/w3c/csswg-drafts/issues/1962

### Font metrics relative to parent

- #2690
- #2764

With `inherit()`:

```css
strong {
 font-weight: clamp(600, 1.2 * inherit(font-weight), 999);
}
```

With `inherit`:
```css
strong {
 font-weight: clamp(600, 1.2 * inherit, 999);
}
```

And any other numerical typographic metric that can be specified in CSS, e.g. `font-stretch`, `font-style` (for variable fonts) etc

### A few of the `currentBackgroundColor` use cases

https://github.com/w3c/csswg-drafts/issues/5292

Way fewer use cases than `inherit()` but it could still be useful for creating variations of the parent background color like so:

```css
background-color: color-mix(in oklch, inherit, white 90%);
```

### Matching nested radii for simple cases

https://github.com/w3c/csswg-drafts/issues/7707

```css
.child {
 padding: 1em;
 border-radius: calc(inherit - 1em);
}
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9757 using your GitHub account


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

Received on Saturday, 30 December 2023 17:20:47 UTC