Increased contrast of LogoSuite.Logobar play/pause button background

[rezrah]

Summary

Resolves https://github.com/github/primer/issues/5240

Increases contrast of the play/pause button against animated logos in marquee mode. Logobar controls now have dedicated tokens, decoupling them from the Button styles they previously used.

Note: Color choices now are parity (or closest match) with custom styles applied in Dotcom. E.g. from the custom video controls:

🔗 Preview link

List of notable changes:

• Adds custom tokens for logobar controls, replacing the previous buttons ones
  • Mostly affects dark mode, light mode relatively unchanged but still uses a dedicated a token if further user customization is needed

What should reviewers focus on?

• Check we're happy with the color choice, as dark mode value falls outside of our base color scales

Steps to test:

1. Use this preview link

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Please try to provide before and after screenshots or videos

Before
After

Before
After

[changeset-bot]

🦋 Changeset detected

Latest commit: fde9162

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

This PR includes changesets to release 7 packages

Name	Type
@primer/react-brand	Patch
@primer/brand-primitives	Patch
@primer/brand-docs	Patch
@primer/brand-e2e	Patch
@primer/brand-fonts	Patch
@primer/brand-config	Patch
@primer/brand-storybook	Patch

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

[github-actions]

🔍 Design token changes found

View CSS variable changes

+ --brand-LogoSuite-color-control-rest: var(--base-color-scale-gray-1);

+ --brand-LogoSuite-color-control-hover: var(--base-color-scale-gray-2);

+ --brand-LogoSuite-color-control-rest: #4d4e6a;

+ --brand-LogoSuite-color-control-hover: #5a5b7c;

+ --brand-LogoSuite-color-control-hover: var(--base-color-scale-gray-2);

+ --brand-LogoSuite-color-control-rest: var(--base-color-scale-gray-1);

[github-actions]

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

[Copilot]

Pull Request Overview

This PR introduces dedicated design tokens to improve the contrast of the LogoSuite marquee play/pause button and updates the CSS to use them.

• Added new control.rest and control.hover tokens for LogoSuite in design-tokens.
• Updated LogoSuite.module.css to use --brand-LogoSuite-color-control-... instead of button-subtle tokens.
• Created changesets to publish the patches in both @primer/brand-primitives and @primer/react-brand.

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
packages/react/src/LogoSuite/LogoSuite.module.css	Replaced background-color vars with new control tokens
packages/design-tokens/src/tokens/functional/components/logosuite/colors.json	Added control.rest and control.hover entries
.changeset/witty-dolls-sleep.md	Described new tokens for LogoSuite play/pause controls
.changeset/mean-pants-hear.md	Described contrast update for LogoSuite in react-brand

Comments suppressed due to low confidence (1)

packages/react/src/LogoSuite/LogoSuite.module.css:189

• The focus-visible state doesn’t use the new control token. Consider adding a dedicated --brand-LogoSuite-color-control-focus token (or fallback) and applying it here to ensure keyboard focus has sufficient contrast.

.LogoSuite__logobar-playPauseButton:focus-visible {