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

0x64 · 2024-11-19T23:24:20Z

Checklist

I have read and understand the contribution guide
A CHANGELOG entry is included
At least one test case is included for this feature or bug fix
Documentation was added or is not needed
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 opacity 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 refined/renamed to distinguish opacity (with suffix -opacity) for CSS opacity property and opacity (with suffix -color-opacity) for colors.
For compatibility for a while, it supports the old CSS variables with -rgb suffix also but new names have priority.

Additional Considerations

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-opacity 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-opacity is now a number between 0 and 1 instead of a percentage.

Renamed CSS variables (corresponding LESS variables are also renamed)
--sand-progress-bg-color-alpha > --sand-progress-bg-color-opacity
--sand-alert-overlay-progress-bg-color-alpha > --sand-alert-overlay-progress-bg-color-opacity

New CSS variables
--sand-keyguide-bg-color-opacity is added to support overriding.

New LESS variables
@sand-shadow-base-color is added as a base color without opacity.
@sand-keyguide-bg-base-color and @sand-keyguide-bg-color-opacity are added to override easily for skins.
@sand-disabled-focus-content-color-opacity is added to separate from @sand-disabled-focus-content-opacity that is used as an opacity for whole control not only text.

Legacy CSS variable support
Since this PR renames all -rgb named CSS variables, legacy code to add -rgb named CSS variables will not work without fallback. So, I added fallback like below.

@sand-alert-overlay-bg-color: var(--sand-alert-overlay-bg-color, rgb(var(--sand-alert-overlay-bg-color-rgb, 0, 0, 0)));

This is the same as the follow if we don't need fallbacks.

@sand-alert-overlay-bg-color: var(--sand-alert-overlay-bg-color, #000000);

Links

WRR-287

Comments

Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

…t-text-color Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

…onent-text-sub-color Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

…mponent-focus-text-color Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

…olor Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

…-color Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

…-color Note that a new CSS variable --sand-keyguide-bg-color-alpha is also added to support the alpha channel of the background color. Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

…overlay-bg-color Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

…d opacity Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

…iables Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

codecov · 2024-11-19T23:24:38Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 81.41%. Comparing base (0279269) to head (0ddfd10).
Report is 9 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #1754      +/-   ##
===========================================
+ Coverage    80.81%   81.41%   +0.60%     
===========================================
  Files          148      148              
  Lines         6681     6892     +211     
  Branches      1986     2081      +95     
===========================================
+ Hits          5399     5611     +212     
+ Misses         973      972       -1     
  Partials       309      309

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

MikyungKim · 2024-11-25T07:31:23Z

Alert/Alert.module.less

 			--sand-progress-bg-color-alpha: @sand-alert-overlay-progress-bg-color-alpha;
 			--sand-checkbox-color: @sand-alert-overlay-checkbox-color;
 			--sand-checkbox-disabled-selected-text-color: @sand-alert-overlay-checkbox-disabled-selected-text-color;
 			--sand-formcheckboxitem-focus-text-color: @sand-alert-overlay-formcheckboxitem-focus-text-color;
 			--sand-item-disabled-focus-bg-color: @sand-alert-overlay-item-disabled-focus-bg-color;

-			background-color: rgb(@sand-alert-overlay-bg-color-rgb, @sand-alert-overlay-bg-color-opacity);
+			background-color: ~"color(from" @sand-alert-overlay-bg-color ~"srgb r g b /" @sand-alert-overlay-bg-color-alpha ~")";


Is there a reason for renaming -opacity to -alpha?

Discussing with @MikyungKim, we'd like to change color-alpha to color-opacity.

Note: from now, -color-opacity for opacity of a color like text color or background color and -opacity (without color in front of it) for opacity of a component

MikyungKim · 2024-11-25T07:39:42Z

styles/colors-game.less

-@sand-alert-overlay-text-color-rgb: var(--sand-alert-overlay-text-color-rgb, 255, 255, 255); // #ffffff
-@sand-alert-overlay-bg-color-rgb: var(--sand-alert-overlay-bg-color-rgb, 0, 0, 0); // #000000
-@sand-alert-overlay-bg-color-opacity: 75%;
+@sand-alert-overlay-bg-color: var(--sand-alert-overlay-bg-color, rgb(var(--sand-alert-overlay-bg-color-rgb, 0, 0, 0))); // #000000


What is --sand-alert-overlay-bg-color-rgb?

It is a kind of fallback for old legacy uses. I will update the PR description.

MikyungKim · 2024-11-25T23:27:10Z

styles/colors.less

-@sand-component-text-sub-color-rgb: var(--sand-component-text-sub-color-rgb, 171, 174, 179); // #abaeb3
-@sand-component-text-sub-color: rgb(@sand-component-text-sub-color-rgb);
+@sand-shadow-color: var(--sand-shadow-color, rgb(var(--sand-shadow-color-rgb, 0, 0, 0))); // #000000
+@sand-shadow-common-color: ~"color(from" @sand-shadow-color ~"srgb r g b / 0.3)";


Let's discuss the naming again.

Conclusion: @sand-shadow-base-color for @sand-shadow-color, and @sand-shadow-color for @sand-shadow-common-color as the current @sand-shadow-common-color is the basic shadow color.

MikyungKim · 2024-11-25T23:45:22Z

styles/colors.less

@@ -132,14 +123,15 @@
 @sand-disabled-opacity: 0.28;  // This value brings the standard text-color to the disabled text color specs
 @sand-disabled-bg-opacity: @sand-disabled-opacity;
 @sand-disabled-focus-content-opacity: 0.4;
+@sand-disabled-focus-content-color-alpha: 0.4;


Is this necessary?

I will rename this also.

MikyungKim · 2024-11-26T01:07:18Z

styles/colors.less

+@sand-keyguide-bg-color: var(--sand-keyguide-bg-color, rgb(var(--sand-keyguide-bg-color-rgb, 55, 58, 65))); // #373a41
+@sand-keyguide-bg-color-alpha: var(--sand-keyguide-bg-color-alpha, 0.9);


As we discussed let's rename @sand-keyguide-bg-color-alpha to @sand-keyguide-bg-color with color css function and @sand-keyguide-bg-color to @sand-keyguide-bg-base-color.

I updated the code and it looks good to leave @sand-keyguide-bg-color-opacity since it makes easy to change opacity in high-contrast skin variants just like other components. Just like before this PR, @sand-keyguide-bg-color is the color with opacity value and Keyguide module directly uses this.

Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

- @sand-shadow-color is renamed to @sand-shadow-base-color - @sand-shadow-common-color is renamed to @sand-shadow-color Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

- @sand-keyguide-bg-color is renamed to @sand-keyguide-base-bg-color - @sand-keyguide-bg-color is now the background color with opacity just like before this PR Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

0x64 added 18 commits November 7, 2024 16:12

WRR-287: Replace --sand-text-color-rgb with --sand-text-color

3f02c2f

Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

WRR-287: Replace --sand-shadow-color-rgb with --sand-shadow-color

9f72c41

Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

WRR-287: Replace --sand-component-text-color-rgb with --sand-componen…

d995a3f

…t-text-color Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

WRR-287: Replace --sand-component-text-sub-color-rgb with --sand-comp…

3b3b855

…onent-text-sub-color Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

WRR-287: Replace --sand-focus-bg-color-rgb with --sand-focus-bg-color

292a516

Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

WRR-287: Refine code related to --sand-text-color

4a45b6f

Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

WRR-287: Replace --sand-component-focus-text-color-rgb with --sand-co…

bfc3765

…mponent-focus-text-color Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

WRR-287: Replace --sand-selected-color-rgb with --sand-selected-color

f5ec04e

Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

WRR-287: Replace --sand-overlay-bg-color-rgb with --sand-overlay-bg-c…

84c7a1c

…olor Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

WRR-287: Replace --sand-progress-color-rgb with --sand-progress-color

f44c96a

Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

WRR-287: Replace --sand-progress-bg-color-rgb with --sand-progress-bg…

8aaec19

…-color Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

WRR-287: Replace --sand-spinner-color-rgb with --sand-spinner-color

594ef40

Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

WRR-287: Replace --sand-keyguide-bg-color-rgb with --sand-keyguide-bg…

6ffb15a

…-color Note that a new CSS variable --sand-keyguide-bg-color-alpha is also added to support the alpha channel of the background color. Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

WRR-287: Replace --sand-alert-overlay-bg-color-rgb with --sand-alert-…

16da3e1

…overlay-bg-color Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

WRR-287: Refine LESS variable names to distinguish alpha for color an…

8c70abb

…d opacity Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

WRR-287: Replace rest --sand-alert-overlay variables with non-rgb var…

ef7b2da

…iables Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

WRR-287: Added fallback of -rgb variables for legacy apps

49bace3

Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

WRR-287: Added missing fallback of --sand-component-focus-text-color-rgb

c64a833

Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

0x64 added 2 commits November 20, 2024 13:55

WRR-287: added changelogs

4c76c53

Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

WRR-287: update .travis.yml to resolve the issue of npm install

81cdb97

Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

MikyungKim reviewed Nov 25, 2024

View reviewed changes

MikyungKim reviewed Nov 26, 2024

View reviewed changes

0x64 added 3 commits November 26, 2024 16:44

WRR-287: rename suffix -color-alpha to -color-opacity

91ab460

Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

WRR-287: rename: @sand-shadow-color and @sand-shadow-base-color

67beb08

- @sand-shadow-color is renamed to @sand-shadow-base-color - @sand-shadow-common-color is renamed to @sand-shadow-color Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected])

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

0x64 commented Nov 19, 2024 •

edited

Loading

codecov bot commented Nov 19, 2024 •

edited

Loading

MikyungKim Nov 25, 2024 •

edited

Loading

0x64 Nov 26, 2024

0x64 Nov 26, 2024

MikyungKim Nov 25, 2024

0x64 Nov 26, 2024

0x64 Nov 26, 2024

MikyungKim Nov 25, 2024

0x64 Nov 26, 2024

0x64 Nov 26, 2024

MikyungKim Nov 25, 2024

0x64 Nov 26, 2024

0x64 Nov 26, 2024

MikyungKim Nov 26, 2024

0x64 Nov 26, 2024 •

edited

Loading

		@sand-keyguide-bg-color: var(--sand-keyguide-bg-color, rgb(var(--sand-keyguide-bg-color-rgb, 55, 58, 65))); // #373a41
		@sand-keyguide-bg-color-alpha: var(--sand-keyguide-bg-color-alpha, 0.9);

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

Are you sure you want to change the base?

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

Conversation

0x64 commented Nov 19, 2024 • edited Loading

Checklist

Issue Resolved / Feature Added

Resolution

Additional Considerations

Links

Comments

codecov bot commented Nov 19, 2024 • edited Loading

Codecov Report

MikyungKim Nov 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

0x64 Nov 26, 2024 • edited Loading

Choose a reason for hiding this comment

0x64 commented Nov 19, 2024 •

edited

Loading

codecov bot commented Nov 19, 2024 •

edited

Loading

MikyungKim Nov 25, 2024 •

edited

Loading

0x64 Nov 26, 2024 •

edited

Loading