Skip to content

Tip: Improve icon contrast with design system colors #84123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ciampo wants to merge 3 commits into from
Closed

Tip: Improve icon contrast with design system colors #84123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
39f34d1
Tip: Improve icon contrast with design system colors
ciampo Oct 6, 2026
64435a9
Tip: Add changelog pull request reference
ciampo Oct 6, 2026
85482df
Tip: Use the warning foreground token
ciampo Oct 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ([#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)).
Expand Down
14 changes: 14 additions & 0 deletions packages/components/src/tip/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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?
<br />
<ExternalLink href="https://developer.wordpress.org/block-editor/">
Get started here.
</ExternalLink>
</>
),
};
11 changes: 7 additions & 4 deletions packages/components/src/tip/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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-warning-weak);

@ciampo ciampo Oct 7, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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?

flex-shrink: 0;
margin-right: $grid-unit-20;

@media (forced-colors: active) {
color: CanvasText;
}
}

p {
Expand Down
Loading