From 39f34d165ad79062f4d5080098f3a64acfc05a92 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 6 Oct 2026 17:50:49 +0200 Subject: [PATCH 1/3] Tip: Improve icon contrast with design system colors --- packages/components/CHANGELOG.md | 1 + .../components/src/tip/stories/index.story.tsx | 14 ++++++++++++++ packages/components/src/tip/style.scss | 11 +++++++---- 3 files changed, 22 insertions(+), 4 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index dad5d1412dedc6..9926749b9ecef9 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -30,6 +30,7 @@ ### Bug Fixes +- `Tip`: Improve icon contrast with design system colors and keep tip icon styles from affecting icons in its content. - `Popover`: Keep the `will-change: transform` hint only while the popover is moving, so its content is no longer left on a compositing layer that Chrome can render blurry ([#77359](https://github.com/WordPress/gutenberg/pull/77359)). - `RadioControl`: Keep radio circles visually 16px at all viewport widths while retaining a 24px pointer target ([#83840](https://github.com/WordPress/gutenberg/pull/83840)). - `Text`: Make single-line truncation and `isBlock` overrides consistent across the main document and iframes ([#82573](https://github.com/WordPress/gutenberg/pull/82573)). diff --git a/packages/components/src/tip/stories/index.story.tsx b/packages/components/src/tip/stories/index.story.tsx index d5a43f69a5de25..d7dd9bc6593c65 100644 --- a/packages/components/src/tip/stories/index.story.tsx +++ b/packages/components/src/tip/stories/index.story.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryFn } from '@storybook/react-vite'; import Tip from '..'; +import ExternalLink from '../../external-link'; const meta: Meta< typeof Tip > = { component: Tip, @@ -29,3 +30,16 @@ export const Default: StoryFn< typeof Tip > = Template.bind( {} ); Default.args = { children: 'An example tip', }; + +export const WithExternalLink: StoryFn< typeof Tip > = Template.bind( {} ); +WithExternalLink.args = { + children: ( + <> + Interested in creating your own block? +
+ + Get started here. + + + ), +}; diff --git a/packages/components/src/tip/style.scss b/packages/components/src/tip/style.scss index 12bb8263a65e32..c238bade5eebc8 100644 --- a/packages/components/src/tip/style.scss +++ b/packages/components/src/tip/style.scss @@ -1,15 +1,18 @@ -@use "@wordpress/base-styles/colors" as *; @use "@wordpress/base-styles/variables" as *; .components-tip { display: flex; - color: $gray-700; + color: var(--wpds-color-foreground-content-neutral-weak); - svg { + > svg { align-self: center; - color: $alert-yellow; + color: var(--wpds-color-foreground-content-caution-weak); flex-shrink: 0; margin-right: $grid-unit-20; + + @media (forced-colors: active) { + color: CanvasText; + } } p { From 64435a941f79180aa25075121fd6d94e14db26c8 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 6 Oct 2026 17:51:54 +0200 Subject: [PATCH 2/3] Tip: Add changelog pull request reference --- packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 9926749b9ecef9..4718d2c992a85e 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -30,7 +30,7 @@ ### Bug Fixes -- `Tip`: Improve icon contrast with design system colors and keep tip icon styles from affecting icons in its content. +- `Tip`: Improve icon contrast with design system colors and keep tip icon styles from affecting icons in its content ([#84123](https://github.com/WordPress/gutenberg/pull/84123)). - `Popover`: Keep the `will-change: transform` hint only while the popover is moving, so its content is no longer left on a compositing layer that Chrome can render blurry ([#77359](https://github.com/WordPress/gutenberg/pull/77359)). - `RadioControl`: Keep radio circles visually 16px at all viewport widths while retaining a 24px pointer target ([#83840](https://github.com/WordPress/gutenberg/pull/83840)). - `Text`: Make single-line truncation and `isBlock` overrides consistent across the main document and iframes ([#82573](https://github.com/WordPress/gutenberg/pull/82573)). From 85482dffc6174bd5b7042e37b2d04432527c806c Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 7 Oct 2026 07:35:40 +0200 Subject: [PATCH 3/3] Tip: Use the warning foreground token --- packages/components/src/tip/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/tip/style.scss b/packages/components/src/tip/style.scss index c238bade5eebc8..2e6e86e1d9a799 100644 --- a/packages/components/src/tip/style.scss +++ b/packages/components/src/tip/style.scss @@ -6,7 +6,7 @@ > svg { align-self: center; - color: var(--wpds-color-foreground-content-caution-weak); + color: var(--wpds-color-foreground-content-warning-weak); flex-shrink: 0; margin-right: $grid-unit-20;