-
Enhancement
-
Resolution: Unresolved
-
P4
-
None
The CSS implementation in JavaFX has a very useful feature called 'Looked-up Colors'.
These allow "a generic palette of colors to be specified on the scene then used throughout the application".
This concept of having a consistent palette can be taken even further by the use of
the 'derive' function, which allows for brightening or darkening a color, so one can do:
derive(base-color, 3%)
which is both human-readable and aligns with the generic palette concept.
This is used in modena.css frequently, as an example:
-fx-background: derive(-fx-base,26.4%);
I propose the addition of two (2) color functions (or one that takes both positive and negative values)
that will allow for taking this concept even further. Without further ado, the functions:
fadein
fadein( <color> , <number>% )
The fadein function takes a color and computes a more opaque version of that color.
The second parameter is the opacity, ranging from 0% to 100%. Has no effect on
fully opaque colors.
Examples:
fadein(rgba(35, 70, 112, 0.8), 10%) => rgba(35, 70, 112, 0.88)
fadein(rgba(35, 70, 112, 0), 100%) => rgba(35, 70, 112) = rgb(35, 70, 112)
fadeout
fadeout( <color>, <number>% )
The fadeout functions takes a color and computes a more transparent version of that
color. The second parameter is the transparency, ranging from 0% to 100%. Has no effect
on fully transparent colors.
Examples:
fadeout(rgba(35, 70, 112, 0.8), 10%) => rgba(35, 70, 112, 0.72)
fadeout(rgba(35, 70, 122), 30%) => rgba(35, 70, 122, 0.7)
fadeout(rgb(35, 70, 112), 100%) => rgba(35, 70, 112, 0)
Alternatively one could use just one function, called fade, which takes positive
and negative percentage values, and one could define transparent values to be negative
and opaque values to be positive, for example.
The use of semi-transparent colors is reccommended here, for example:
https://dlemmermann.wordpress.com/2014/07/11/javafx-tip-6-use-transparent-colors/
and I (for one) agree with this sentiment, so I believe need for these functions is,
in my opinion, quite great.
I did a (very brief) survey of the current landscape of CSS pre-processors
(namely less and sass) to see if they have these color functions and if so
what their form is. Here are my results:
Less:
In less, these functions exist as color operation functions, namely fadein and fadeout:
fadein
Decrease the transparency (or increase the opacity) of a color, making it more opaque.
Has no effect on opaque colors. To fade in the other direction use fadeout.
Parameters:
color: A color object.
amount: A percentage 0-100%.
method: Optional, set to relative for the adjustment to be relative to the current value.
Returns: color
Example: fadein(hsla(90, 90%, 50%, 0.5), 10%)
Output: rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)
fadeout
Increase the transparency (or decrease the opacity) of a color, making it less opaque. To fade in the other direction use fadein.
Parameters:
color: A color object.
amount: A percentage 0-100%.
method: Optional, set to relative for the adjustment to be relative to the current value.
Returns: color
Example: fadeout(hsla(90, 90%, 50%, 0.5), 10%)
Output: rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.4)
Sass:
In sass, these functions exist as opacity functions, namely opacify/fade-in, transparentize/fade-out (the names have aliases):
opacify($color, $amount)
Also known as: fade_in
Makes a color more opaque. Takes a color and a number between 0 and 1, and returns a color with the opacity increased by that amount.
Examples:
opacify(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.6)
opacify(rgba(0, 0, 17, 0.8), 0.2) => #001
Parameters:
$color [Color]
$amount [Number] The amount to increase the opacity by, between 0 and 1
Returns:
[Color]
transparentize($color, $amount)
Also known as: fade_out
Makes a color more transparent. Takes a color and a number between 0 and 1, and returns a color with the opacity decreased by that amount.
Examples:
transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6)
Parameters:
$color [Color]
$amount [Number] — The amount to decrease the opacity by, between 0 and 1
Returns:
[Color]
These allow "a generic palette of colors to be specified on the scene then used throughout the application".
This concept of having a consistent palette can be taken even further by the use of
the 'derive' function, which allows for brightening or darkening a color, so one can do:
derive(base-color, 3%)
which is both human-readable and aligns with the generic palette concept.
This is used in modena.css frequently, as an example:
-fx-background: derive(-fx-base,26.4%);
I propose the addition of two (2) color functions (or one that takes both positive and negative values)
that will allow for taking this concept even further. Without further ado, the functions:
fadein
fadein( <color> , <number>% )
The fadein function takes a color and computes a more opaque version of that color.
The second parameter is the opacity, ranging from 0% to 100%. Has no effect on
fully opaque colors.
Examples:
fadein(rgba(35, 70, 112, 0.8), 10%) => rgba(35, 70, 112, 0.88)
fadein(rgba(35, 70, 112, 0), 100%) => rgba(35, 70, 112) = rgb(35, 70, 112)
fadeout
fadeout( <color>, <number>% )
The fadeout functions takes a color and computes a more transparent version of that
color. The second parameter is the transparency, ranging from 0% to 100%. Has no effect
on fully transparent colors.
Examples:
fadeout(rgba(35, 70, 112, 0.8), 10%) => rgba(35, 70, 112, 0.72)
fadeout(rgba(35, 70, 122), 30%) => rgba(35, 70, 122, 0.7)
fadeout(rgb(35, 70, 112), 100%) => rgba(35, 70, 112, 0)
Alternatively one could use just one function, called fade, which takes positive
and negative percentage values, and one could define transparent values to be negative
and opaque values to be positive, for example.
The use of semi-transparent colors is reccommended here, for example:
https://dlemmermann.wordpress.com/2014/07/11/javafx-tip-6-use-transparent-colors/
and I (for one) agree with this sentiment, so I believe need for these functions is,
in my opinion, quite great.
I did a (very brief) survey of the current landscape of CSS pre-processors
(namely less and sass) to see if they have these color functions and if so
what their form is. Here are my results:
Less:
In less, these functions exist as color operation functions, namely fadein and fadeout:
fadein
Decrease the transparency (or increase the opacity) of a color, making it more opaque.
Has no effect on opaque colors. To fade in the other direction use fadeout.
Parameters:
color: A color object.
amount: A percentage 0-100%.
method: Optional, set to relative for the adjustment to be relative to the current value.
Returns: color
Example: fadein(hsla(90, 90%, 50%, 0.5), 10%)
Output: rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)
fadeout
Increase the transparency (or decrease the opacity) of a color, making it less opaque. To fade in the other direction use fadein.
Parameters:
color: A color object.
amount: A percentage 0-100%.
method: Optional, set to relative for the adjustment to be relative to the current value.
Returns: color
Example: fadeout(hsla(90, 90%, 50%, 0.5), 10%)
Output: rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.4)
Sass:
In sass, these functions exist as opacity functions, namely opacify/fade-in, transparentize/fade-out (the names have aliases):
opacify($color, $amount)
Also known as: fade_in
Makes a color more opaque. Takes a color and a number between 0 and 1, and returns a color with the opacity increased by that amount.
Examples:
opacify(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.6)
opacify(rgba(0, 0, 17, 0.8), 0.2) => #001
Parameters:
$color [Color]
$amount [Number] The amount to increase the opacity by, between 0 and 1
Returns:
[Color]
transparentize($color, $amount)
Also known as: fade_out
Makes a color more transparent. Takes a color and a number between 0 and 1, and returns a color with the opacity decreased by that amount.
Examples:
transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6)
Parameters:
$color [Color]
$amount [Number] — The amount to decrease the opacity by, between 0 and 1
Returns:
[Color]