Notice: Fix low-contrast action controls on dark theme backgrounds

[alshakero]

Resolves #80211

What?

Fixes the low-contrast link/secondary action controls in the Notice component (@wordpress/components) when rendered on a dark theme background.

Why?

The legacy --wp-admin-theme-color accent is a fixed value (#3858e9) that does not adapt to the theme background. When a Notice is rendered under the design-system dark theme (ThemeProvider with a dark background seed), the surface, border, and text tokens all regenerate correctly and remain accessible — but the action controls do not.

The link and secondary/tertiary action buttons color themselves with that fixed accent, so on the tinted, dark notice surfaces they drop to roughly 2.2:1 contrast, below the WCAG minimum, and read as broken:

Before (dark)	After (dark)
"Or click me instead!" (outline) and the link render in a dark #3858e9 blue that barely separates from the dark surface.	Both render in the theme-aware light blue (#8eb0ff), clearly legible.

The newer @wordpress/ui Button already solves this by using the theme-aware --wpds-color-foreground-interactive-brand token for its outline/minimal variants. This change brings the legacy components Notice in line.

How?

Redirect the accent to the theme-aware brand foreground token for the notice's non-primary action controls, using the same CSS-variable override pattern the Button already uses for its destructive variant:

.components-notice__action:not(.is-primary) {
	--wp-components-color-accent: var(--wpds-color-foreground-interactive-brand);
	--wp-components-color-accent-darker-10: var(--wpds-color-foreground-interactive-brand-active);
	--wp-components-color-accent-darker-20: var(--wpds-color-foreground-interactive-brand-active);
}

Primary actions are intentionally excluded — they use the accent as their fill, so they must keep the solid brand background.

In light mode --wpds-color-foreground-interactive-brand resolves to #3858e9 — identical to the previous value — so there is no visual change in light mode.

Testing Instructions

1. Open Storybook and navigate to Components → Feedback → Notice.
2. Use the story with actions (primary button, secondary button, and a link).
3. Switch the Design System theme toolbar to Dark.
4. Confirm the secondary button border/text and the link are now legible (light blue) instead of dark blue, and that the primary button is unchanged.
5. Switch back to Light and confirm nothing changed.

🤖 Generated with Claude Code

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: alshakero <alshakero@git.wordpress.org>
Co-authored-by: aduth <aduth@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[aduth]

This feels like it's fundamentally an issue with the @wordpress/components Button component, and not with its specific usage in Notice. And that the fix here addresses this by customizing Button only in the context of Notice. Am I understanding that right?

#79993 partially addresses the underlying need for @wordpress/components to use design token theming, with color in a follow-up pull request at #79994. Would #79994 effectively fix this as well?

[alshakero]

@aduth you're right tbqh. I trusted Claude too much on this one. I'll check the other fixes.