Re: [csswg-drafts] [css-values-5] What is the MVP for inline conditionals on custom properties? (#10064)

The ternary syntax makes the most sense to me, I'd imagine in most places a class would be used rather than an `if`, though one place where `if` does excite me is with functions and mixins.

```css
/* Syntax not finalised */
@function --lighten-darken(--base, --percent, --ld: 'lighten') {
  @return color-mix(in srgb, var(--base), if(style(--ld: 'lighten') ? #fff : #000) var(--percent));
}

.some-class {
  color: --lighten-darken(var(--palette-primary), 30%, 'darken');
}

.some-other-class {
  background-color: --lighten-darken(var(--palette-secondary), 60%, 'lighten');
}
```

___

I love the idea of having multiple statements and the first true being applied though it really feels more like a `switch` than an `if`.

```css
background-color: switch(
  style(--variant: success): var(--color-success-60), 
  style(--variant: warning): var(--color-warning-60),
  style(--variant: danger): var(--color-danger-60), 
  style(--variant: primary): var(--color-primary),
  var(--color-fallback)
);
```

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


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

Received on Wednesday, 10 July 2024 20:58:15 UTC