Skip to content
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

Notice: Fix text contrast for dark mode #69226

Merged
merged 2 commits into from
Feb 19, 2025
+5 −0
Merged

Notice: Fix text contrast for dark mode #69226

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cc8f523
Notice: Fix text contrast for dark mode
t-hamano Feb 18, 2025
4bc1c56
Merge branch 'trunk' into fix/notice-color-dark-mode
t-hamano Feb 19, 2025
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
4 changes: 4 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@

- `NumberControl`: Fix invalid HTML attributes for infinite bounds ([#69033](https://github.com/WordPress/gutenberg/pull/69033)).

### Bug Fixes

- `Notice`: Fix text contrast for dark mode ([#69226](https://github.com/WordPress/gutenberg/pull/69226)).

## 29.4.0 (2025-02-12)

- `FontSizePicker`: Remove Custom option from dropdown to prevent unexpected context changes during keyboard navigation ([#69038](https://github.com/WordPress/gutenberg/pull/69038)).
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/notice/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
border-left: 4px solid $components-color-accent;
padding: 8px 12px;
align-items: center;
color: $gray-900;
Copy link
Contributor

@ciampo ciampo Feb 18, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

We have two choices:

  • keep Notice with hardcoded colors, regardless of light / dark mode. This is what we're doing now, and the changes proposed in this PR are definitely an improvement over what's on trunk;
  • make Notice follow the theme (including dark/light modes) and swap hardcoded background-color and color values for the dynamic ones — although that may require design feedback and potential updates to the Design System, as also @carolinan suggested.


&.is-dismissible {
position: relative;
Expand Down
Loading