Re: [csswg-drafts] [css-variables?] Higher level custom properties that control multiple declarations (#5624)

This can be implemented in CSS today using cyclic space toggles.

```css
.foo {
  --size: var(--small);
  --theme: var(--dark);
  --placement: var(--top);
  --orientation: var(--vertical);
  --significance: var(--warning);
}
```

Although it isn't the most convenient, here's how something like `--size` can be implemented as a library author:

```css
/**
 * ## CSS library author code: ################################
 */
button {
 /* define the name of the configurable option for the end user */
 --size: var(--size-medium);

 /* define all the possible enum values for the option */
 --size-small: var(--size,);
 --size-medium: var(--size,);
 --size-large: var(--size,);
 
 /* finally apply output values using a switch case inside of each output property */

 border:
  solid blue
  var(--size-small, 1px)
  var(--size-medium, 2px)
  var(--size-large, 3px);

 border-radius:
  var(--size-small, 2px)
  var(--size-medium, 4px)
  var(--size-large, 6px);

 padding:
  var(--size-small, 2px)
  var(--size-medium, 4px)
  var(--size-large, 6px);
}
```

Here how an end user would use it:

```html
<button id="one">button</button>
<button id="two">button</button>
<button id="three">button</button>
```
```css
/**
 * ## End user code: ##########################################
 */
#one {
 /* end user picks the enum value they want */
 --size: var(--size-small);
}

#two {
 --size: var(--size-medium);
}

#three {
 --size: var(--size-large);
}
```

where, depending on the picked `--size`, the component library will set a bunch of properties such as `border-width`, `padding`, `margin`, `height`, to various different values depending on the single value of `--size`, where `--size` is not just a length value.

[codepen example](https://codepen.io/trusktr/pen/NWZqEyy)

Roman Komarov has some articles on it here: https://kizu.dev/layered-toggles/

TLDR: yeah, maybe not entirely intuitive. But! Once the pattern is learned, it is easy to implement in libraries, and most importantly super easy for the end user to use.



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


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

Received on Sunday, 14 July 2024 03:15:01 UTC