[Proposal][css-2025] CSS if() and CSS custom properties nested inside CSS function

[Luko248]

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.

[andruud]

I think the only thing missing is a way to extract e.g. the l from a color as a percentage? Everything else you're asking for is either already possible, or coming soon.