[csswg-drafts] [css-color-5] Findings on SCSS function usage to inform direction of Color 5 (#5782)

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

== [css-color-5] Findings on SCSS function usage to inform direction of Color 5 ==
As part of our [recent analysis of the state of CSS](https://almanac.httparchive.org/en/2020/css) by querying the HTTPArchive corpus, we looked at preprocessor usage (SCSS only, where available via sourcemaps). 

One thing of personal interest to me as co-editor of Color 5 was how frequently are the various color manipulation and extraction functions used? [Here are the results for all SCSS function calls](https://docs.google.com/spreadsheets/d/1sMWXWjMujqfAREYxNbG_t1fOJKYCA6ASLwtz4pBQVTw/edit#gid=170555219). We looked at 14 million function calls from nearly 300K SCSS stylesheets.

Here is the lowdown:
* 35% of **all function calls** are for color manipulation. This confirms that this is highly used functionality, though that's no surprise. 28.5% are for adjusting colors in some way and 6.5% for reading out color components.
* 7% of all function calls are for extracting individual color components, such as hue, lightness, alpha etc.
* `darken()` is **by far** the most frequently used function **of all**, even higher than the generic `if()`. **Half of all color manipulation usage is calls to `darken()`**, i.e. 17% of all function calls.
* `lighten()` is the second most used color manipulation function (6th overall). 5.5% of all function calls are calls to `lighten()`
* Overall, **65% of color manipulation calls (23% of all calls) are making colors lighter or darker**.
* 4% of all function calls are for alpha adjustment (11% of all color manipulation)
* `mix()` was pretty high: 3.5% of all function calls, 10% of color manipulation calls
* It's difficult to tell how many operations do math on individual color components. 6.5% of all function calls are functions for reading out individual components, such as `alpha()`, `red()`, `hue()` etc. These can then be passed on to regular color functions like `hsl()` or `rgb()`. Adjusting components via [`adjust-color()`](https://sass-lang.com/documentation/modules/color#adjust) was relatively rare however (0.2% of all function calls), indicating that for complex color manipulations authors may find it more natural to do math on color components and plug them in to an existing color function than to use a color adjustment function.

What does this tell us about future directions for Color 5?
* In the spirit of making common things easy and complex things possible, we should probably provide some sort of shortcut for lightening and darkening, that takes care of doing it well without the authors having to care how it happens. Another advantage of such a shortcut would be that it's something that UAs can implement much sooner than the more complicated functionality.
* We *may* want to offer shortcuts for alpha adjustment, as that was fairly common as well.
* The findings seem to support that some kind of [relative function syntax](https://drafts.csswg.org/css-color-5/#relative-colors) would feel more natural than [`color-adjust()`](https://drafts.csswg.org/css-color-5/#coloradjust). However, I'm not sure anymore about the idea of having keywords for each component that only work as a relative syntax within each function. This is much harder to implement incrementally, and addresses fewer use cases. We may want to go a similar route and introduce functions for extracting individual components, that authors can then use as they wish, in any function they want, even to combine components from multiple colors without the weirdness of `color-mix()` (which is very nice and natural for simple interpolation, but gets weird fast when per-component adjusters come into play). The challenge is: how to define such functions for more spaces than sRGB, without getting overly verbose? Would things like `lch-hue()` be too verbose? Should we have a generic `hue()` for LCH and a `hsl-hue()` for HSL?

CC @svgeesus @una @argyleink 

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


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

Received on Friday, 11 December 2020 15:30:14 UTC