Hi all, I'd like to propose adding support for the CSS alpha() function to JavaFX's CSS engine, and gauge interest before opening a JBS issue and a PR. Motivation
JavaFX CSS currently has no way to derive a color with a modified alpha channel from an existing color value. In practice this means any design relying on semi-transparent variants of a base color has to hard-code each variant as a separate literal (rgba(...) / #RRGGBBAA), even though they are all conceptually "base color at N% opacity." An example of where this is kind of a pain point is Material Design 3 state layers <https://m3.material.io/foundations/interaction/states/state-layers>. To represent states such as hover/focus/pressed they use an additional block that sits on top of the actual component at a certain opacity. This is the same approach I'm currently using, but it has two major flaws: - An additional node just to show a semi-transparent color seems like a waste of performance when JavaFX can stack background colors - The surface node needs to be kept in sync with the owner. For example, if the owner has a certain background/border radius, the surface must be styled to have the same rounding. A CSS-level alpha() function would let these be expressed directly from the source token: .button:hover { -fx-background-color: alpha(-color-primary, 8%); } What I'm proposing Support for the alpha() function as specified in CSS Color Module Level 5: https://www.w3.org/TR/css-color-5/#funcdef-alpha Scope is intentionally narrow: just this one function, integrated into the existing CSS color-value parsing so it can be used anywhere a <color> is expected, including as an input to the existing color functions. Notes To this day, the alpha() function is not supported <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/alpha#browser_compatibility> by any browser, which is a bit of a bummer considering that even on the Web many rely on dirty tricks to change the alpha component of a color An alternative to this which would fill the gap and do much more could be the color-mix() <https://www.w3.org/TR/css-color-5/#funcdef-color-mix> function. The trade-off is implementation cost. color-mix() brings in interpolation color spaces and the percentage-normalization/alpha-clamping rules, so a realistic first cut would likely restrict the interpolation space to in srgb and defer the polar/perceptual spaces to follow-ups. It's also worth noting that color-mix() is already shipping in all major browsers. I'm happy to implement either. alpha() is the smaller, self-contained change; color-mix() is more work but a more general primitive. I'd welcome the list's preference on which is the better use of effort.
