Update CTABanner and deprecate Bento

[rezrah]

Summary

Towards https://github.com/github/brand-marketing-design/issues/2606

Updates CTABanner to further match Brand Refactor designs and extend feature set. Also deprecates Bento as it's a retired style that is being replaced by CTABanner and River in newer LP designs.

List of notable changes:

• Adds a Logo slot
• Fixes sizing of images in the balanced variant
• Adds support for a Link
• Adds duotone support to CTABanner headings
• Adds relevant test coverage and stories
• Adds deprecation notice to Bento
• Replaced custom Bento in AI recipe with a CTABanner per the actual design
• Switched Testimonial duotone to use correct tokens

What should reviewers focus on?

• Are all proposed changes reasonable?
• Does anything look visually off
• Was anything implement counter to design intent

Steps to test:

1. Go to this story and scroll down to the CTABanner which appears under RIver. Notice it more closely matches the design.
2. Review CTABanner logos stories for correct implementation and positioning
3. Review Link implementation
4. Review duotone implementation
5. Report any issues in this issue as a comment

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

New logo support

### New duotone heading

New optional link

[changeset-bot]

🦋 Changeset detected

Latest commit: f9a5645

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

This PR includes changesets to release 8 packages

Name	Type
@primer/react-brand	Minor
@primer/brand-docs	Minor
@primer/brand-css	Minor
@primer/brand-primitives	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-CTABanner-color-heading-emphasis: var(--base-color-scale-green-7);

+ --brand-CTABanner-color-logo-muted: var(--brand-color-text-muted);

+ --brand-CTABanner-color-logo-emphasis: var(--brand-color-text-default);

+ --brand-CTABanner-color-logo-filter-muted: brightness(0) saturate(100%) invert(37%) sepia(7%) saturate(778%) hue-rotate(171deg) brightness(96%) co

+ --brand-CTABanner-color-logo-filter-emphasis: brightness(0) saturate(100%) invert(12%) sepia(20%) saturate(450%) hue-rotate(172deg) brightness(100

+ --brand-CTABanner-color-heading-emphasis: var(--brand-color-text-emphasized);

+ --brand-CTABanner-color-logo-muted: var(--brand-color-text-muted);

+ --brand-CTABanner-color-logo-emphasis: var(--brand-color-text-default);

+ --brand-CTABanner-color-logo-filter-muted: brightness(0) saturate(100%) invert(61%) sepia(8%) saturate(430%) hue-rotate(171deg) brightness(94%) co

+ --brand-CTABanner-color-logo-filter-emphasis: brightness(0) saturate(100%) invert(91%) sepia(2%) saturate(2455%) hue-rotate(193deg) brightness(107

- --brand-Testimonial-quote-color-emphasis: #1a7f37;
+ --brand-Testimonial-quote-color-emphasis: var(--base-color-scale-green-7);

- --brand-Testimonial-quote-color-emphasis: #5fed83;
+ --brand-Testimonial-quote-color-emphasis: var(--brand-color-text-emphasized);

- --brand-Testimonial-quote-color-emphasis: #1a7f37;
+ --brand-Testimonial-quote-color-emphasis: var(--base-color-scale-green-7);

[github-actions]

🟢 Unit test coverage changes found

Unit test coverage has been updated through this PR.

Changes: 0 new tests, 0 removed tests, 0 improved, 2 decreased

Component/Hook	Statements	Functions	Branches	Change
IDE	91.6% 91.2%	97.4%	83.4% 82.8%	-0.7%
CTABanner	100.0%	100.0%	92.1% 91.7%	-0.5%

[Copilot]

Pull request overview

Updates the CTABanner component to align with the Brand Refactor designs (new logo/link support, updated sizing/defaults, duotone heading emphasis) and begins deprecating Bento, including migrating a Flexsuite recipe from Bento to CTABanner.

Changes:

• Extended CTABanner API with CTABanner.Logo and CTABanner.Link, plus improved heading/image defaults and updated styling.
• Added/updated CTABanner unit + visual coverage, Storybook feature stories, and Next Docs usage docs.
• Deprecated Bento (code + docs) and migrated the Flexsuite AI overview recipe + localized content keys accordingly.

Show a summary per file

File	Description
packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx	Replaces in-recipe Bento usage with a CTABanner instance (logo/link/image).
packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.module.css	Removes Bento-specific styling now that the recipe uses CTABanner.
packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.module.css.d.ts	Removes deleted Bento-related class typings.
packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.content.ts	Splits the old Bento heading string into prefix/emphasis segments for the new heading markup.
packages/react/src/CTABanner/CTABanner.tsx	Adds Logo + Link subcomponents; adjusts heading sizing behavior and image prop typing.
packages/react/src/CTABanner/CTABanner.module.css	Updates layout/spacing, adds logo/link/duotone heading styles, and adjusts balanced image sizing.
packages/react/src/CTABanner/CTABanner.module.css.d.ts	Adds typings for new CSS module classnames.
packages/react/src/CTABanner/CTABanner.test.tsx	Adds unit coverage for logo/link rendering, ref/class forwarding, heading default sizing, and duotone markup.
packages/react/src/CTABanner/CTABanner.features.stories.tsx	Adds Storybook feature stories for logo/link/duotone heading variations.
packages/react/src/CTABanner/CTABanner.visual.spec.ts	Adds visual regression cases for the new feature stories.
packages/react/src/CTABanner/CTABanner.visual.spec.ts-snapshots/Visual-Comparison-CTABanner-CTABanner-With-Link-1-darwin.png	Updates/adds visual baseline for the new “With Link” case.
packages/react/src/Bento/Bento.tsx	Adds JSDoc deprecation notice directing consumers to CTABanner / River.
apps/next-docs/content/components/CTABanner/react.mdx	Documents logo/link/duotone usage and updates heading sizing notes.
apps/next-docs/content/components/Bento/index.mdx	Adds a deprecation warning note in the docs.
apps/storybook/static/locales/*/FlexSuiteOverview.json	Updates i18n keys for the new heading prefix/emphasis split.
packages/e2e/scripts/playwright/run-visual-tests	Fails fast locally if port 6006 is already in use (prevents confusing visual test runs).
packages/e2e/scripts/playwright/update-visual-snapshots	Same port 6006 preflight check for snapshot updates.
packages/design-tokens/src/tokens/functional/components/cta-banner/colors.js	Adds CTA banner logo color/filter tokens.
packages/design-tokens/src/tokens/functional/components/testimonial/colors.json	Aligns testimonial emphasis color to the shared emphasized text token.
.changeset/loud-banners-shine.md	Changeset describing new CTABanner capabilities and updated defaults.
package-lock.json	Updates workspace versions/lockfile to the new release version.

Copilot's findings

• Files reviewed: 22/34 changed files
• Comments generated: 1

[github-actions]

🟢 No visual differences found

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

[rezrah]

FYI... this visual diff change to heading is intentional. The code is applying display as a test in the source code, which wasn't previously being forwarded. Now that's been fixed.

[kellyquesnel]

From a design POV, all viewports and color modes behave properly

[danielguillan]

👌