WRR-287: Replace CSS variables having R,G,B formats with standard #RGB formats

Checklist

[x] I have read and understand the contribution guide
[x] A CHANGELOG entry is included
[ ] At least one test case is included for this feature or bug fix
[x] Documentation was added or is not needed
[x] This is an API breaking change

Issue Resolved / Feature Added

CSS variables for customization of apps on run-time is introduced in 2.1.0 and we used some R,G,B format values for colors that need to be translucent on some UI components. At that time, we had no proper way to combine #RGB format with alpha value in CSS semantics. As of now, we can use relative RGB semantics and it is a good time to turn non-standard R,G,B formats into standard #RGB formats.

Resolution

In this pull request, the followings are done.

R,G,B format values becomes #RGB values.
CSS/LESS variables having suffix -rgb are renamed the same without suffix -rgb.
Some CSS/LESS variables are renamed to distinguish opacity for CSS opacity property and alpha for colors.
For compatibility for a while, it supports the old CSS variables with -rgb suffix also but new names have priority.

Additional Considerations

--sand-spinner-color is now #hex format instead of {R,G,B} format without a change of the name. Actually, it was a bug that we did not name it --sand-spinner-color-rgb before.

Replaced CSS variables (corresponding LESS variables are also replaced) --sand-text-color-rgb > --sand-text-color --sand-shadow-color-rgb > --sand-shadow-color --sand-component-text-color-rgb > --sand-component-text-color --sand-component-text-sub-color-rgb > --sand-component-text-sub-color --sand-focus-bg-color-rgb > --sand-focus-bg-color --sand-component-focus-text-color-rgb > --sand-component-focus-text-color --sand-selected-color-rgb > --sand-selected-color --sand-overlay-bg-color-rgb > --sand-overlay-bg-color --sand-progress-color-rgb > --sand-progress-color --sand-progress-bg-color-rgb > --sand-progress-bg-color --sand-keyguide-bg-color-rgb > --sand-keyguide-bg-color --sand-alert-overlay-bg-color-rgb > --sand-alert-overlay-bg-color --sand-alert-overlay-text-color-rgb > --sand-alert-overlay-text-color --sand-alert-overlay-progress-color-rgb > --sand-alert-overlay-progress-color --sand-alert-overlay-progress-bg-color-rgb > --sand-alert-overlay-progress-bg-color

Modified CSS variables --sand-progress-bg-color-alpha is now a number between 0 and 1 instead of a percentage. --sand-spinner-color is now #hex format instead of {R,G,B} format. (It was a bug that we did not name it --sand-spinner-color-rgb before). --sand-alert-overlay-progress-bg-color-alpha is now a number between 0 and 1 instead of a percentage.

New CSS variables --sand-keyguide-bg-color-alpha

Modified LESS variables @sand-shadow-color is renamed to @sand-shadow-common-color since @sand-shadow-color is now used as a color without alpha. @sand-alert-overlay-bg-color-opacity is renamed to @sand-alert-overlay-bg-color-alpha as this value is used as a alpha for rgb() call. @sand-keyguide-bg-color is now used as a color without alpha.

New LESS variables @sand-disabled-focus-content-color-alpha is added to separate from @sand-disabled-focus-content-opacity that is used as an opacity for whole control not only text.

Links

WRR-287

Comments

Enact-DCO-1.0-Signed-off-by: Seungcheon Baek (sc.baek@lge.com)

enactjs / sandstone