Fiori 3.0 Visual Update: Color changes

[LeoT7508]

Update color palette as follows:

• Shell: Addition of Shell Hover, Shell Active, Shell Interactive.
• Background 1: Changed to f7f7f7.
• Background 3-7: Addition of Background 3-7 colors.
• Neutral 2: Updated to #EDEDED
• Addition of Neutral 5 & 6.
• Removal of State colors: Positive, Alert, Negative. (Moved to Background section)
• Updated Accent colors: 1,2,6,7,10.

Design sheet can be found here: https://zpl.io/2yl9EeJ

[eboyer]

@LeoT7508 ~ There are some inconsistencies in the design file with some (most) colors having HSL values, and some not.

Additionally, the last time I updated colors some of the HSL values were incorrect. Could you do another look over the file and just 100% confirm every HSL value is present and accurate?

For Removal of State colors: Positive, Alert, Negative. (Moved to Background section) ~ How should we handle this one? It could potentially be a breaking change for anyone thats using our SCSS and color references directly.

[LeoT7508]

The Master Sketch file from GD does have some inconsistencies, what I posted to Zeplin should be correct. I would go off that for now. If theres anything specific please let me know what that is and I can investigate it.

[eboyer]

@LeoT7508 ~ The inconsistencies I mentioned are the presence of HSL values. https://cl.ly/1b7896

Could you go through each color and click on it and confirm if it has an HSL value that it is correct, and if it doesn't have an HSL value you add one?

[LeoT7508]

All colors have been double checked against HSL values.

[MattL75]

Removing a color is a breaking change - so this could only be done for v2.0.0. How these color changes are handled should definitely be discussed more widely than on this issue though. Maybe this should be brought up on the Thursday meeting?

[LeoT7508]

@MattL75

Yes bring it up in the meeting. I have aligned these colors as closely as possible with GD while mapping them to our design system, it seems there might only be 1-2 small issues.

[eboyer]

@MattL75 @LeoT7508 ~ There will likely be a time where everything in this ticket is completed, but the state colors remain to avoid the breaking change but keeping others up to date.

[eboyer]

@LeoT7508 ~ Should this design file have accent colors 11-15 (accessible colors) in it as well?

[LeoT7508]

I included everything GD documented in their Master. Sketch file. Anything else I don't know about.

[eboyer]

@LeoT7508 ~ The colors i'm referring to are in our code base and on our website: https://sap.github.io/fundamental/foundation/colors.html

You've never seen these?

[xak]

My 2¢

Shell: Addition of Shell Hover, Shell Active, Shell Interactive.

The 3, 4, and 5 colors should be removed since these a derived colors. Variables should be added to compute these colors.

--fd-shell-background-color: fd-color("shell", 1);
--fd-shell-interactive-color: fd-color("shell", 2);
--fd-shell-interactive-color--hover: darken(fd-color("shell", 2), 7); // #283848
--fd-shell-interactive-color--active: darken(fd-color("shell", 2), 10); // #23303E
--fd-shell-interactive-border-color: lighten(fd-color("shell", 2), 30); // #7996B4

See https://wiki.wdf.sap.corp/wiki/pages/viewpage.action?pageId=2017196009#CrossTechnologyThemeParameters(QuartzLight)-ExtendedHomepageColors

Background 1: Changed to f7f7f7.

Yes. Change recommended from SAPPHIRE Fiori 3 review.

Background 3-7: Addition of Background 3-7 colors.

While these are derived colors the background values are already in place and being used. Validate the colors against the design spec ... background 3 (new color) and 6 HEX values and actual colors are not the same.

Neutral 2: Updated to #EDEDED

This should be #e5e5e5 to darken borders and increase the contrast against the background.

There is no #EDEDED in the theming params.

Addition of Neutral 5 & 6.

• Neutral 5 #f7f7f7 is used only for the app background color. It does not need to be here.
• Neutral 6 #f2f2f2 is used only for the table headers which were darkened to stand out on the now darker background. I'm inclined to derive this color as part of the list/table variables instead of adding it here. It would be darken($fd-table-background-color,5) in line with the theming params.

Removal of State colors: Positive, Alert, Negative. (Moved to Background section)

These are not part of state colors now. https://sap.github.io/fundamental/foundation/colors.html

Updated Accent colors: 1,2,6,7,10.

Only 7 displays the incorrect HEX value but several of the colors are displaying the wrong color.

The accent colors were updated to make them all 4.6:1 compliant meaning 5 of them were dropped. If the 11-15 colors are removed from the docs site they should be maintained in the color maps for backward compatibility since they may be used by some apps.

Addition

Action 3 is incorrect

The action-3 color is not used in the library nor is it part of the theming params. Not sure where this color came from but it should be removed.

[droshev]

@LeoT7508 are those colors reflecting the latest changes for the Fiori 3 light theme colors(from the wiki)? Maybe you can run another run of tests with the latest colors?

[LeoT7508]

The colors on Zeplin match what GD has on their wiki.

[saad-mo]

we need to discuss and see if the changes from this ticket are fully resolved and published. adding to the next sprint...

[droshev]

let's groom them