Color update #698

homing1 · 2024-10-14T22:58:39Z

This PR updates colors for badges, buttons, controls, forms, notifications, and progress bars to match Fluent. For some instances, the colors they show on their docs website doesn't match their Figma so it's unclear which one is correct. I updated those colors on a best effort basis.

I've mostly updated the colors for light theme only. In some cases (buttons), I also updated for dark and high contrast theme.
Fluent does not show any semantic colors on high contrast (all of the colors become white), so there are cases where I reuse the existing Atlas dark and high contrast colors.

Fluent has color tokens for danger/success/warning, but not all of the components that has semantic colors use the same token, so beware of some inconsistency.

http://localhost:1111/components/badge.html
https://react.fluentui.dev/?path=/docs/components-badge-badge--docs
Note: Badge colors (info, subtle, etc) on their website does not match their Figma. I ended up going with their Figma and tried to map it to Atlas.
Fluent default -> Atlas brand, Atlas default -> Fluent informative(?) https://www.figma.com/design/FO4ImdAytGCc5DQXpNFObI/Microsoft-Fluent-2-Web-(Community)?node-id=8911-3186&node-type=canvas&t=h55d3uCymIbDm7dU-0

http://localhost:1111/components/button.html
https://react.fluentui.dev/?path=/docs/components-button-button--docs
Note: Fluent buttons don't have semantic color variants, so I updated the Atlas ones to use their common semantic color tokens.

http://localhost:1111/components/checkbox.html
https://react.fluentui.dev/?path=/docs/components-checkbox--docs

http://localhost:1111/components/form.html
https://react.fluentui.dev/?path=/docs/components-field--docs

http://localhost:1111/components/notification.html
https://react.fluentui.dev/?path=/docs/components-messagebar--docs

http://localhost:1111/components/progress-bar.html
https://react.fluentui.dev/?path=/docs/components-progressbar--docs
Note: Fluent progress bar warning color does not match the other warning color for some reason.

http://localhost:1111/components/tag.html
https://react.fluentui.dev/?path=/docs/components-tag-tag--docs

Fluent:
tokens - https://react.fluentui.dev/?path=/docs/theme-colors--docs
Figma - https://www.figma.com/design/FO4ImdAytGCc5DQXpNFObI/Microsoft-Fluent-2-Web-(Community)?node-id=8949-77053&node-type=canvas&t=h55d3uCymIbDm7dU-0

Testing

Visit the links above. You can use https://design.learn.microsoft.com/ to compare with what it looks before the change.
Compare with Fluent.

[Optional]

Contributor checklist

Did you update the description of this pull request with a review link and test steps?
Did you submit a changeset? Changesets are required for all code changes.
Does your pull request implement complex UI logic (js/ts)? Consider adding an integration test to test your user flow.
Does your pull request add a new page to the documentation site? Add your new page for automated accessibility testing in /integration/tests/accessibility.

changeset-bot · 2024-10-14T22:58:42Z

🦋 Changeset detected

Latest commit: 003c39c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@microsoft/atlas-css	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

ellynliu · 2024-10-14T23:55:48Z

I know we're following the fluent 2 figmas but my least favorite color is probably their orange because it looks so similar to the red but uses a dark font which sticks out compared to all of the other buttons

https://www.figma.com/design/FO4ImdAytGCc5DQXpNFObI/Microsoft-Fluent-2-Web-(Community)?node-id=8911-3186&node-type=canvas&t=2FIZu2Yk5HleTR7T-0

if I put them side by side, I can see the difference better but I think a shade of yellow makes for easier contrast rather than a red-orange color?

wibjorn · 2024-10-31T16:45:11Z

css/src/tokens/colors.scss

@@ -238,3 +259,34 @@ $gradients: (

 $gradient-color-start-index: 1;
 $gradient-color-end-index: 2;
+
+//Fluent color tokens
+$colorNeutralBackground1: var(--theme-body-background-fluent);


Should we have -fluent suffixes? Should we just be making this change that we aren't differentiating fluent colors from other colors?

wibjorn · 2024-10-31T16:46:16Z

css/src/tokens/colors.scss

@@ -5,6 +5,7 @@ $white-static: #fff;
 $black-static: #000;

 $text: var(--theme-text);
+$text-fluent: var(--theme-text-fluent);


I think we should have minimal, if any, changes in this file. For example, there should be no $text-fluent only $text.

wibjorn · 2024-10-31T16:47:43Z

css/src/components/badge.scss

@@ -18,8 +18,10 @@ $badge-border-radius: $border-radius-rounded !default;
 	align-items: center;
 	justify-content: center;
 	padding: $badge-padding-block $badge-padding-inline;
-	border: $badge-border-width solid $border-white-high-contrast;


Revert and maybe update border-white-high-contrast

wibjorn · 2024-10-31T16:49:41Z

css/src/tokens/palette.scss

@@ -25,6 +25,22 @@ $palette-grey-110: #2f2f2f !default;
 $palette-grey-120: #171717 !default;
 $palette-grey-130: #161616 !default;

+$palette-grey-10-fluent: #f5f5f5 !default;


I think it's probably best if we add these, but remove or deprecate the old palette colors. I would suggest this order:

first F2 rename all the existing palette colors to suffix -deprecated. Then, add these colors minus the fluent suffix.

wibjorn · 2024-10-31T16:50:04Z

css/src/tokens/palette.scss

@@ -137,6 +161,11 @@ $palette-green-100: #061a00 !default;
 $palette-green-opacity-30: hsl(120deg 37% 45% / 30%) !default;
 $palette-green-opacity-70: hsl(120deg 37% 45% / 70%) !default;

+$palette-green-10-fluent: #f1faf1 !default;


Are there really only 4 greens in the fluent palette?

There are more, but these are the only ones that I see actively being used. I can add the rest.

wibjorn · 2024-10-31T16:51:15Z

css/src/components/progress-bar.scss

@@ -1,6 +1,6 @@
 $progress-bar-background-color: $secondary-background-glow-high-contrast !default;
 $progress-bar-value-background-color: $primary !default;
-$progress-bar-value-background-color-warning: $warning !default;
+$progress-bar-value-background-color-warning: $colorPaletteDarkOrangeBackground3 !default;


avoid using palette colors directly. it should be a theme color with a semantic name if possible

$colorPaletteDarkOrangeBackground3 actually refers to the theme map, it just doesn't have a semantic name. Fluent has a semantic warning color, but they also use non-semantically named colors. For this instance, they chose to use a non-semantic color instead of their standard warning colors. The challenge here is that there is a lack of consistency at times. Perhaps I can set this color as warning-alternate.

wibjorn · 2024-10-31T16:51:58Z

css/src/components/progress-bar.scss

@@ -70,6 +70,16 @@ $progress-bar-indeterminate-animation-duration: 2s !default;
 		}
 	}

+	.theme-dark &.progress-bar-warning {


.theme-dark &.* selectors are final resorts, do we definitely need this? can we instead add something to the theme maps?

wibjorn · 2024-10-31T16:53:09Z

css/src/components/notification.scss

-			border-color: $dark;
-			background-color: $background;
-			color: $dark;
+			@if $name == 'tertiary' {


To me, this indicates we may not be on the right track with how we're updating. Lots more @if statements in the Sass now. Mind outlining why that might be? Perhaps writing more about the problem might help us come to a different solution?

homing1 added 2 commits October 14, 2024 14:35

Update colors

a56309f

Add changeset

4f6e35c

homing1 requested a review from a team as a code owner October 14, 2024 22:58

wibjorn self-requested a review October 14, 2024 23:25

wibjorn self-assigned this Oct 14, 2024

Update blue palette

003c39c

wibjorn reviewed Oct 31, 2024

View reviewed changes

homing1 closed this Nov 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Color update #698

Color update #698

homing1 commented Oct 14, 2024 •

edited

Loading

changeset-bot bot commented Oct 14, 2024 •

edited

Loading

ellynliu commented Oct 14, 2024

wibjorn Oct 31, 2024

wibjorn Oct 31, 2024

wibjorn Oct 31, 2024

wibjorn Oct 31, 2024

wibjorn Oct 31, 2024

homing1 Oct 31, 2024

wibjorn Oct 31, 2024

homing1 Oct 31, 2024

wibjorn Oct 31, 2024

wibjorn Oct 31, 2024 •

edited

Loading

Color update #698

Color update #698

Conversation

homing1 commented Oct 14, 2024 • edited Loading

Testing

Contributor checklist

changeset-bot bot commented Oct 14, 2024 • edited Loading

🦋 Changeset detected

ellynliu commented Oct 14, 2024

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

wibjorn Oct 31, 2024 • edited Loading

Choose a reason for hiding this comment

homing1 commented Oct 14, 2024 •

edited

Loading

changeset-bot bot commented Oct 14, 2024 •

edited

Loading

wibjorn Oct 31, 2024 •

edited

Loading