[csswg-drafts] [Proposal][css-2025] (#12198)

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

== [Proposal][css-2025] ==
I would like to share an idea and ask a question regarding the future of CSS functions, especially in the context of relative colors, CSS types, and conditional logic (such as if()).
 
**Idea: Contrast Text CSS Function**
I'm interested in a native CSS function that would calculate a contrasting text color based on a given background color. Here is a conceptual example of how such a function might look if CSS functions supported variables, relative colors, and conditional logic:

```css
@function --contrast-text(--color <color>, CanvasText) {
  --l: lch(from var(--color) l);
  --c: lch(from var(--color) c);
  --h: lch(from var(--color) h);
 
  --result-color: if(style(--l < 50%):
    lch(from var(--color) calc(var(--l) + 40%) var(--c) var(--h));
  else:
    lch(from var(--color) calc(var(--l) - 40%) var(--c) var(--h)));
 
  result var(--result-color);
}
 
button {
  --bg-color: #336699;
  background-color: var(--bg-color);
  color: --contrast-text(var(--bg-color));
}
```
 
**Question**
Will it be possible in the future CSS specification to define and use custom CSS properties (variables or constants) directly inside CSS functions, similar to the example above? Specifically, can we expect support for:

- Declaring local variables within a function's scope
- Using relative color syntax and CSS types within functions
- Conditional logic (like if()) in CSS functions

 
I believe this would greatly enhance the expressiveness and power of CSS, especially for design systems and accessibility.

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


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

Received on Thursday, 15 May 2025 08:05:57 UTC