Re: CSS function idea

Lukáš,

We no longer use this mailing list for proposals or technical discussion. Please open an issue here instead (as I see you’ve already done with your truncation detection idea):

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


Thanks,

Alan

From: Lukáš Chylík <chylik.lukas@gmail.com>
Date: Thursday, May 22, 2025 at 1:19 AM
To: www-style@w3.org <www-style@w3.org>
Subject: CSS function idea


Hello CSS Working Group,

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:
@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.

Thank you for your work and for considering this suggestion!

Best regards,
Lukáš Chylík