- From: Christoph Päper via GitHub <noreply@w3.org>
- Date: Mon, 21 Jul 2025 11:35:44 +0000
- To: public-css-archive@w3.org
In [#4484](https://github.com/w3c/csswg-drafts/issues/4484#issuecomment-2707876141), Tab suggested to use `if()` for labeled maps. Likewise, this kind of mixed-index array could be done with a custom function.
~~~~ css
@function --color-accent(--key) returns <color> {
--values: #edf2ff, #dbe4ff, #bac8ff, #91a7ff, #748ffc, #5c7cfa, #4c6ef5, #4263eb, #3b5bdb, #364fc7;
return: if(
style(--key: "lightest"): item(var(--values), 1);
style(--key: "light"): item(var(--values), 2);
style(--key: "medium"): item(var(--values), 5);
style(--key: 60): item(var(--values), 6);
style(--key: 70): item(var(--values), 7);
style(--key: "dark"): item(var(--values), 9);
style(--key: "darkest"): item(var(--values), 10);
else: item(var(--values), var(--key));
);
}
background: --color-accent(1); /* #edf2ff */
background: --color-accent(50%); /* #748ffc */
background: --color-accent(100%); /* #364fc7 */
background: --color-accent("lightest"); /* #edf2ff */
background: --color-accent("medium"); /* #748ffc */
background: --color-accent("darkest"); /* #364fc7 */
~~~~
Yeah, that might need sugar.
--
GitHub Notification of comment by Crissov
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11103#issuecomment-3096324587 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 21 July 2025 11:35:45 UTC