Add accent button color and other updates to buttons

[rezrah]

Summary

Resolved https://github.com/github/primer/issues/4933

Adds a new green button variant named accent.

Also updates CTABanner spacing, as newer designs in latest Refactor project use the banners without a description. In those situations the spacing isn't enough, so increased to 32px per the designs on widest breakpoint.

🔗 Button Interface guidelines
🔗 Button React docs
🔗 Button Storybook
🔗 Accent button in Hero
🔗 Accent button in CTABanner

WIP TODO

• Agree on final colors
• Agree on final usage constraints:
  • Should have arrow by default?
  • Should only be used in two components?
  • Should not be used in specific components?
• Add Figma component

List of notable changes:

• added accent variant to button
• removed arrow from all buttons except subtle
• updates subtle hover state to be bg color instead of border
• updated CTA banner spacing

What should reviewers focus on?

• Design review
• Reviewing guidelines (see links above)

Steps to test:

1. Use links at the top of this PR description
2. Review visual snapshots

Supporting resources (related issues, external links, etc):

• Design file

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

Light	Dark

[changeset-bot]

🦋 Changeset detected

Latest commit: eb17ac6

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	Minor
@primer/brand-primitives	Minor
@primer/brand-docs	Minor
@primer/brand-e2e	Minor
@primer/brand-fonts	Minor
@primer/brand-config	Minor
@primer/brand-storybook	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

[github-actions]

🔍 Design token changes found

View CSS variable changes

+ --brand-button-accent-bgColor-rest: var(--base-color-scale-green-5);

+ --brand-button-accent-bgColor-hover: var(--base-color-scale-green-4);

+ --brand-button-accent-bgColor-active: var(--base-color-scale-green-5);

+ --brand-button-accent-bgColor-disabled: var(--base-color-scale-gray-4);

+ --brand-button-accent-fgColor-rest: var(--base-color-scale-white-0);

+ --brand-button-accent-fgColor-disabled: var(--base-color-scale-gray-2);

- --brand-button-subtle-borderColor-rest: transparent;
+ --brand-button-subtle-bgColor-rest: transparent;

- --brand-button-subtle-borderColor-hover: var(--base-color-scale-gray-9);
+ --brand-button-subtle-bgColor-hover: #b7bfc833;

- --brand-button-subtle-borderColor-active: var(--base-color-scale-gray-9);
+ --brand-button-subtle-bgColor-active: #b7bfc866;

+ --brand-button-accent-bgColor-rest: var(--base-color-scale-green-1);

+ --brand-button-accent-bgColor-hover: var(--base-color-scale-green-3);

+ --brand-button-accent-bgColor-active: var(--base-color-scale-green-1);

+ --brand-button-accent-bgColor-disabled: var(--base-color-scale-gray-4);

+ --brand-button-accent-fgColor-rest: var(--base-color-scale-black-0);

+ --brand-button-accent-fgColor-disabled: var(--base-color-scale-gray-2);

- --brand-button-subtle-borderColor-rest: transparent;
+ --brand-button-subtle-bgColor-rest: transparent;

- --brand-button-subtle-borderColor-hover: var(--base-color-scale-white-0);
+ --brand-button-subtle-bgColor-hover: #8a939e33;

- --brand-button-subtle-borderColor-active: var(--base-color-scale-white-0);
+ --brand-button-subtle-bgColor-active: #8a939e66;

[github-actions]

🟢 No visual differences found

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

[danielguillan]

Looks great! 🚀