Update primary color

[homing1]

Task: task-1012252

Link: preview

• Hyperlink color contrast fails when I update it to Fluent color 115ea3, so not updating for now.
  • https://github.com/microsoft/atlas-design/actions/runs/11845506600
• Using Fluent's primary button as basis for primary-base, primary-dark, primary-hover
  • http://localhost:1111/components/button.html
  • https://react.fluentui.dev/?path=/docs/components-button-button--docs
    • Note that Fluent does not have primary + outline, primary + subtle/clear buttons, just one or the other.
• Using Fluent's tag background as basis for primary-background,
  • http://localhost:1111/components/tag.html
  • https://react.fluentui.dev/?path=/docs/components-tag-interactiontag--docs
    • Note 1: For all Fluent interactive tags, hover color is blue 115ea3 on the dismiss button.
• Introducing two new items to the theme map for semantic colors
  • -background-hover and -dark-hover.
    - The values for non-primary colors are not finalized. They will be re-evaluated as their colors in the existing palette are converted to Fluent colors in future PRs.
• Took colors from Fluent's color token page to create the palette https://react.fluentui.dev/?path=/docs/theme-colors--docs
  • Fluent's true color palette https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/colors.ts and https://github.com/microsoft/fluentui/blob/master/packages/tokens/src/global/brandColors.ts
    • Comparing with the colors on the color token page, it seems like many blue colors in the palette file are not being used for a color token.
• Fluent Figma https://www.figma.com/design/FO4ImdAytGCc5DQXpNFObI/Microsoft-Fluent-2-Web-(Community)?node-id=8911-3188&node-type=canvas&t=t2BY46Qo57xosf94-0

Affected components

$primary

• card title color
• pagination background
• progress bar background
• segmented controls font
• steps background
• toggle background
• checkbox color
• input, select, textarea focus border
• button

$primary-background

• message background
• segmented controls hover background
• primary tag background, border

$primary-dark

• primary interactive tag color, hover

$primary-hover

• accordion hover
• pagination hover
• segmented controls hover
• primary tag hover

NEW
$primary-background-hover

• primary interactive tag background hover

$primary-dark-hover

• primary interactive tag hover

Testing

1. Visit http://localhost:1111/components/button.html and http://localhost:1111/components/tag.html to review the main changes. Compare with Fluent's page https://react.fluentui.dev/?path=/docs/components-button-button--docs and existing Atlas design.atlas.microsoft.com
2. Check all 3 themes.
3. Review other affected components

• http://localhost:1111/components/accordion.html
• http://localhost:1111/components/badge.html
• http://localhost:1111/components/card.html
• http://localhost:1111/components/checkbox.html
• http://localhost:1111/components/input.html
• http://localhost:1111/components/message.html
• http://localhost:1111/components/notification.html
• http://localhost:1111/components/pagination.html
• http://localhost:1111/components/progress-bar.html
• http://localhost:1111/components/radio.html
• http://localhost:1111/components/segmented-controls.html
• http://localhost:1111/components/steps.html
• http://localhost:1111/components/toggle.html

4. Accessibility scan passes, meaning that components meet contrast ratio on light and dark theme. Button and tag documentation page includes base and hover states. For other components, check hover states.

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.

[changeset-bot]

🦋 Changeset detected

Latest commit: 47e0b2d

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