-
Notifications
You must be signed in to change notification settings - Fork 19
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update success color #731
base: main
Are you sure you want to change the base?
Update success color #731
Conversation
🦋 Changeset detectedLatest commit: f30ce9e The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
|
||
&.notification-#{$name} { | ||
border-color: $dark; | ||
background-color: $background; | ||
color: $dark; | ||
|
||
@if $name == 'success' { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is a temporary rule to prevent the success changes from breaking other colored notifications. Fluent's message bar border color is a shade of green that isn't used for any other component and doesn't fit any of the existing success theme variables. Danger and warning have the same issue.
The naming here is confusing, but success-active
is one of the unused variables so it's available for a color without affecting existing components. It would make the most sense to add a new variable success-border
to the theme map, but it would mean expanding the theme map even more.
https://react.fluentui.dev/?path=/docs/components-messagebar--docs
Link: preview
This PR updates the success semantic color to match Fluent 2.
Testing
Color | Atlas Design | Microsoft
Badge | Atlas Design | Microsoft
Button | Atlas Design | Microsoft
Help | Atlas Design | Microsoft
Input | Atlas Design | Microsoft
Notification | Atlas Design | Microsoft
Progress Bar | Atlas Design | Microsoft
Additional information
[Optional]
Contributor checklist