Skip to content
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 warning color #733

Merged
merged 12 commits into from
Dec 30, 2024
Merged

Update warning color #733

merged 12 commits into from
Dec 30, 2024

Conversation

homing1
Copy link
Contributor

@homing1 homing1 commented Dec 4, 2024

Link: preview

This PR updates the warning color to match Fluent on light theme. Fluent uses orange colors for warning, but they also have yellow colors. Therefore, this PR adds both a yellow and orange palette. Also updating warning colors for dark and high contrast theme to make everything orange for consistency.

Testing

  1. Visit the following pages to review the affected colors, should still work on dark and high contrast theme. Compare with https://react.fluentui.dev/ . Also compare with https://design.learn.microsoft.com/ for the current Atlas colors.

Additional information

[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.
  • Does your pull request change any transforms? Did you test they work on right to left?

@homing1 homing1 requested a review from a team as a code owner December 4, 2024 23:07
Copy link

changeset-bot bot commented Dec 4, 2024

🦋 Changeset detected

Latest commit: fbaebc7

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

@homing1 homing1 force-pushed the ming/update-warning branch from 0a7b40f to 507d508 Compare December 4, 2024 23:18
@BenDMyers
Copy link
Contributor

BenDMyers commented Dec 10, 2024

Worth updating /components/button.html documentation to clarify orange in light mode, yellow in dark/HC?

Warning. Warning buttons are yellow on most themes. This color indicates a critical situation or warning. Use this semantic color if...

BenDMyers
BenDMyers previously approved these changes Dec 10, 2024
BenDMyers
BenDMyers previously approved these changes Dec 10, 2024
css/src/tokens/themes.scss Outdated Show resolved Hide resolved
css/src/tokens/themes.scss Outdated Show resolved Hide resolved
css/src/tokens/themes.scss Outdated Show resolved Hide resolved
BenDMyers
BenDMyers previously approved these changes Dec 16, 2024
css/src/tokens/themes.scss Outdated Show resolved Hide resolved
Copy link
Contributor

@ollips ollips left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As a follow up I'd like to chat how we can improve buttons style. Approving for now

Copy link
Contributor

@ollips ollips left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resetting my vote, I think I missed something. Will follow up

@homing1 homing1 merged commit beea19d into main Dec 30, 2024
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants