Update secondary color

[homing1]

Link: preview

This PR updates the grey and secondary semantic color in light theme. Also updating theme-control-border, theme-hover-base so things won't break. theme-border is updated to match existing color only for now. theme-hover-invert uses the lightest grey and is not currently used in Atlas, updating to the new lightest grey.

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.

• Note: Body background, table colors are not changed at this time.

Badge | Atlas Design | Microsoft

• Background color

Border | Atlas Design | Microsoft

• no color change

Button | Atlas Design | Microsoft

• Outline button hover

Input | Atlas Design | Microsoft

• Border hover
• Fluent input icon color doesn't change when pressed

Notification | Atlas Design | Microsoft

• Background color, border color

Pagination | Atlas Design | Microsoft

• Ellipsis color – no visible change
• Button border – no visible change
• Disabled color

Progress Bar | Atlas Design | Microsoft

• Background color

Steps | Atlas Design | Microsoft

• Background color, is it now too light?

Tag | Atlas Design | Microsoft

• Outlined border color, background hover color
• Filled background color, background hover color
• Outlined and filled divider color

By affected tokens

$secondary

• Pagination disabled background color
• Steps background color
• Tag border color, filled background color
• Input hover border color, icon active color
• Select hover border color
• Textarea hover border color

$secondary-background

• Notification background color
• Pagination disabled background/border, ellipsis color
• Badge background color

$secondary-dark

• Tag color
• Pagination disabled text color

$secondary-background-high-contrast

• Progress bar background color
• Tag background hover
• Tag filled background/border color

$secondary-invert

• Tag interactive filled hover color

$secondary-box-shadow

• Tag interactive filled divider color

$secondary-hover

• secondary button border, background color

$secondary-background-hover: not currently used in Atlas
$secondary-dark-hover: not currently used in Atlas
$secondary-active: not currently used in Atlas

$control-border

• notification border, outline tag border, controls border

$default-hover

• Outline button and controls border hover color

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?

[changeset-bot]

🦋 Changeset detected

Latest commit: 087bc50

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