[ciampo]

Closes #51705.

What?

Improve Tip's light-bulb contrast with WPDS colors and prevent its icon styles from affecting SVGs inside the content. The current icon is already a light bulb, so its shape is unchanged.

Why?

The existing yellow has only 1.80:1 contrast on white. Its descendant selector also gives nested SVGs the same color and an unwanted margin. ExternalLink now uses a text arrow, so the specific external-link example in the original report no longer reproduces.

How?

Use --wpds-color-foreground-content-warning-weak for the bulb and the neutral secondary-text token for the copy. This retains Tip's amber tone. Scope icon styling to the direct child SVG and use CanvasText in forced-colors mode. Add an external-link story using the inserter's composition.

Testing Instructions

1. Open Tip → With External Link in Storybook. Switch between light and dark themes. Check that the bulb, text, and link remain readable and that the arrow matches the link.
2. Enable forced-colors emulation. Check that the bulb uses the system text color.
3. In the post editor, open the inserter and scroll to its tips. Search for an unavailable block to check the tip containing an external link.

Testing Instructions for Keyboard

Tab to the story's link and check that its focus outline remains visible in both themes.

Screenshots

Storybook captures of the inserter's tip composition.

Before, light theme	After, light theme

After, dark theme:

Verification

Chromium Storybook checks measured bulb contrast of 5.22:1 on white and 8.62:1 on the dark surface. Text and links exceed 4.5:1 in both themes. Nested SVGs inherit their link's color without Tip's margin. Keyboard focus and forced colors were checked. The built stylesheet includes color fallbacks for consumers without a ThemeProvider.

A calculation across 263 background seeds and the three neutral surface tokens found a minimum bulb contrast of 3.66:1, above the 3:1 non-text contrast requirement. This does not guarantee contrast against arbitrary backgrounds outside the theme's neutral surfaces.

Build, typecheck, targeted lint, and the existing ExternalLink and semantic-color-contrast tests pass. The post-editor steps above are provided for manual review; local browser verification used Storybook.

Use of AI Tools

Codex implemented the change, ran verification, and drafted this description.

[github-actions]

🤖 PR meta 🤖

🏷️ Labels

This pull request needs exactly one label indicating its type, and has 0.

• Required: any label starting with [Type].
• Found: none.

Read more about Type labels in Gutenberg. If you cannot add labels yourself, a reviewer can do it for you.

📦 Bundle size

Size Change: +125 B (0%)

Total Size: 8.29 MB

📦 View Changed

Filename	Size	Change
build/styles/components/style-rtl.css	16.6 kB	+30 B (+0.18%)
build/styles/components/style-rtl.min.css	14 kB	+33 B (+0.24%)
build/styles/components/style.css	16.6 kB	+30 B (+0.18%)
build/styles/components/style.min.css	14 kB	+32 B (+0.23%)

_{85482df Run}

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	3e937f0	trunk	% Change
timeToFirstByte	50.7 ms +3.16% -4.24%	50.4 ms +3.17% -3.87%	0.6%
largestContentfulPaint	86 ms +6.98% -4.65%	82 ms +4.88% -2.44%	4.88%
lcpMinusTtfb	33.35 ms +21.74% -4.65%	32.05 ms +13.57% -3.74%	4.06%
wpBeforeTemplate	23.72 ms +6.96% -1.85%	24.07 ms +2.37% -3.37%	-1.45%
wpTemplate	22.66 ms +4.77% -4.77%	22.24 ms +5.08% -2.16%	1.89%
wpTotal	47.09 ms +3.46% -4.67%	46.64 ms +3.39% -3.67%	0.96%
wpMemoryUsage	7.66 MB +0% -0%	7.62 MB +0% -0%	0.51%
wpDbQueries	17 +0% -0%	17 +0% -0%	0%

front-end-classic-theme

Metric	3e937f0	trunk	% Change
timeToFirstByte	41.6 ms +3.85% -2.76%	41.4 ms +1.57% -2.29%	0.48%
largestContentfulPaint	92 ms +4.35% -0%	92 ms +2.17% -0%	0%
lcpMinusTtfb	51.55 ms +1.84% -1.94%	50.65 ms +4.64% -1.28%	1.78%
wpBeforeTemplate	21.41 ms +6.63% -1.35%	20.88 ms +1.72% -0.62%	2.54%
wpTemplate	16.47 ms +7.23% -1.94%	17.3 ms +1.1% -5.72%	-4.8%
wpTotal	38.52 ms +3.69% -3.22%	38.3 ms +1.67% -2.38%	0.57%
wpMemoryUsage	6.29 MB +0% -0%	6.24 MB +0% -0%	0.77%
wpDbQueries	14 +0% -0%	14 +0% -0%	0%

media-processing

Metric	3e937f0	trunk	% Change
mediaProcessingJpeg	397.7 ms +0.24% -1.08%	392.53 ms +0.42% -1.65%	1.32%
mediaProcessingAvif	5813.57 ms +0.15% -0.38%	5727.56 ms +0.26% -0.16%	1.5%
mediaProcessingJpegToAvif	3933.13 ms +0.1% -0.38%	3923.77 ms +0.32% -0.23%	0.24%

media-upload

Metric	3e937f0	trunk	% Change
jpegUploadProcessing	1431.81 ms +35.79% -1.62%	1422.04 ms +0.35% -1.32%	0.69%
pngUploadProcessing	213.2 ms +5.68% -4.06%	201.4 ms +2.36% -2.57%	5.86%
largeJpegUploadProcessing	1405.57 ms +0.9% -0.35%	1403.99 ms +0.86% -0.53%	0.11%
multipleImageUploadProcessing	1564.35 ms +0.34% -1%	1564.96 ms +0.72% -1.88%	-0.04%

post-editor

Metric	3e937f0	trunk	% Change
serverResponse	531.9 ms +1.66% -9.41%	503.53 ms +7.48% -2.99%	5.63%
firstPaint	279.79 ms +17.65% -12.88%	242.67 ms +36.23% -23.33%	15.3%
domContentLoaded	1102.76 ms +2.27% -3.11%	1083.77 ms +2.67% -0.62%	1.75%
loaded	1104.08 ms +2.27% -3.11%	1084.96 ms +2.69% -0.62%	1.76%
firstContentfulPaint	461.42 ms +1.81% -3.84%	451.68 ms +3.26% -5.78%	2.16%
firstBlock	3319.36 ms +1.04% -0.43%	3327.45 ms +0.44% -0.97%	-0.24%
type	18.81 ms +2.5% -7.6%	18.7 ms +7.7% -3.05%	0.59%
typeWithoutInspector	19.58 ms +2.71% -8.38%	16.96 ms +10.32% -1.12%	15.45%
typeWithTopToolbar	24.19 ms +10.5% -9.3%	22.95 ms +4.71% -7.89%	5.4%
typeContainer	8.46 ms +2.13% -6.62%	8.45 ms +8.17% -5.92%	0.12%
focus	111.88 ms +5.65% -1.14%	115.31 ms +3.26% -6.01%	-2.97%
firstFocus	227.4 ms +0% -0%	234.14 ms +0% -0%	-2.88%
selectAll	562.76 ms +0.83% -2.05%	560.6 ms +2.83% -2.02%	0.39%
listViewOpen	78.54 ms +3.35% -0.98%	81.39 ms +3.08% -11.37%	-3.5%
inserterOpen	39.83 ms +7.43% -6.75%	39.84 ms +3.26% -6.35%	-0.03%
inserterHover	12.68 ms +4.97% -12.46%	12.08 ms +6.87% -4.47%	4.97%
inserterSearch	8.91 ms +2.36% -10.33%	8.42 ms +8.91% -13.18%	5.82%
loadPatterns	611.11 ms +4.31% -0.49%	630.18 ms +4.54% -2.51%	-3.03%
wpTotal	521.79 ms +1.71% -9.45%	493.6 ms +7.64% -3.15%	5.71%
wpMemoryUsage	13.22 MB +0% -0%	13.18 MB +0% -0%	0.31%
wpDbQueries	54 +0% -1.85%	54 +0% -1.85%	0%

site-editor

Metric	3e937f0	trunk	% Change
serverResponse	507.87 ms +3.5% -3.41%	501.49 ms +3.08% -6.87%	1.27%
firstPaint	315.46 ms +8.23% -8.56%	287.6 ms +9.42% -10.89%	9.69%
domContentLoaded	1193.33 ms +1.48% -1.14%	1177.75 ms +2.1% -0.66%	1.32%
loaded	1194.55 ms +1.51% -1.14%	1179.01 ms +2.11% -0.64%	1.32%
firstContentfulPaint	472.52 ms +2.06% -1.54%	467.32 ms +1.79% -2.08%	1.11%
firstBlock	4452.19 ms +0.92% -0.51%	4397.64 ms +0.26% -0.77%	1.24%
type	21.49 ms +6.75% -2.09%	19.63 ms +3.92% -7.49%	9.48%
navigate	122.96 ms +12.77% -1.44%	122.09 ms +8.37% -0.62%	0.71%
loadPatterns	1350.54 ms +6.04% -5.49%	1286.33 ms +10.78% -5.98%	4.99%
loadPages	1015.53 ms +1.82% -1.03%	1012.84 ms +2.03% -0.71%	0.27%
wpTotal	497.95 ms +3.68% -3.35%	491.75 ms +3.13% -6.99%	1.26%
wpMemoryUsage	12.26 MB +0% -0%	12.22 MB +0% -0%	0.33%
wpDbQueries	43 +2.33% -0%	43 +2.33% -0%	0%

_{85482df Run}

🏁 Flaky tests

Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

We show no results message if there are no comments in /test/e2e/specs/editor/blocks/comments.spec.js, passed after 1 failed attempt.

Error: apiRequestContext.fetch: socket hang up
Call log:
  - → GET http://localhost:8889/wp-json/wp/v2/comments?per_page=100&status=all&type=comment
    - user-agent: Playwright/1.63.0 (x64; ubuntu 24.04) node/24.20 CI/1
    - accept: */*
    - accept-encoding: gzip,deflate,br
    - X-WP-Nonce: a710174bf9
    - cookie: wordpress_test_cookie=WP%20Cookie%20check; wordpress_logged_in_23778236db82f19306f247e20a353a99=admin%7C1791524567%7CQLRt8365eIXxLVWNHB65wPVxECtcL7TKHWbIxheYJsc%7Ce93edc4afd733e7150164e85ca22aacde3187b47f391c04dd269fb78495f0243; wp-settings-time-1=1791351800

    at RequestUtils.rest (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/rest.ts:112:39)
    at RequestUtils.deleteAllComments (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/comments.ts:54:30)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/comments.spec.js:35:22

_{85482df Run}

[ciampo]

@jameskoster What's the best choice here, in your opinion?

• stroke vs foregroung?
• warning vs caution?

TBH, both of these color scales are not looking particularly great (we already know yellow hues are particularly tricky to make visually pleasant and with enough contrast, that's something to improve at the algo level).

Potentially, would we be open to using the info tone?

[jameskoster]

Since the icon is decorative does it need to pass contrast?

In any case, while we're here... should we just go ahead and use a dismissible Notice? A tip variant is something we could potentially add, but default or info would probably be fine tbh.

[ciampo]

@jameskoster you have a point on the icon being decorative, but I figured it would be good to use WPDS tokens anyway?

I proposed the following plan:

• keep this PR, improve Tip to use WPDS tokens (which may inherently fix constrast, even if it's not a requirement)
• separately, assess usages of tip and refactor to either notice (preferred), or to whatever is suitable otherwise
• deprecate tip

What do you think?

[ciampo]

Closing in favour of #84197.