Components: Deprecate COLORS.white
#67649
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mirka
added
[Type] Enhancement
mirka
commented
Dec 5, 2024
| @@ -70,7 +70,7 @@ export const buttonView = ( { | |||
| } | |||
|
|
|||
| &:active { | |||
| background: ${ CONFIG.controlBackgroundColor }; | |||
There was a problem hiding this comment.
Removing this CONFIG variable altogether since this is the only place it's used. (Part of #43997)
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: 0 B Total Size: 1.83 MB ℹ️ View Unchanged
|
|
Flaky tests detected in a238566. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12184138076
|
tyxla
approved these changes
Dec 9, 2024
There was a problem hiding this comment.
Code looking good 👍
Tested all affected components with default and dark themes, and this actually fixes a bunch of issues with the dark theme!
One thing I'd love a follow up on is the hover text color on the active navigation item - that seems to be broken on both default and dark themes. Should be done in a separate PR IMHO.
🚀
| @@ -201,7 +201,7 @@ const baseItem = css` | |||
| [aria-disabled='true'] | |||
| ) { | |||
| background-color: ${ COLORS.theme.accent }; | |||
| color: ${ COLORS.white }; | |||
| color: ${ COLORS.theme.accentInverted }; | |||
There was a problem hiding this comment.
I confirm this is unchanged when comparing to trunk. Hopefully we'll be able to make it themable soonish!
|
|
||
| > button, | ||
| > a { | ||
| color: ${ COLORS.white }; | ||
| color: ${ COLORS.theme.accentInverted }; |
There was a problem hiding this comment.
Still works well, but hover color still doesn't work well:
Should be fixable with something like:
diff --git a/packages/components/src/navigation/styles/navigation-styles.tsx b/packages/components/src/navigation/styles/navigation-styles.tsx
index 0cde6314685..8894065f66f 100644
--- a/packages/components/src/navigation/styles/navigation-styles.tsx
+++ b/packages/components/src/navigation/styles/navigation-styles.tsx
@@ -137,6 +137,7 @@ export const ItemBaseUI = styled.li`
color: ${ COLORS.theme.accentInverted };
> button,
+ > .components-button:hover,
> a {
color: ${ COLORS.theme.accentInverted };
opacity: 1;There was a problem hiding this comment.
Seems to be working well, here's a PR: #67732
| @@ -134,11 +134,11 @@ export const ItemBaseUI = styled.li` | |||
|
|
|||
| &.is-active { | |||
| background-color: ${ COLORS.theme.accent }; | |||
| color: ${ COLORS.white }; | |||
| color: ${ COLORS.theme.accentInverted }; | |||
There was a problem hiding this comment.
👍 While this is unchanged on the default theme, this is a nice improvement for the dark one, actually:
| Before | After |
|---|---|
 |
 |
| @@ -38,7 +38,7 @@ export const buttonView = ( { | |||
| background: transparent; | |||
| border: none; | |||
| border-radius: ${ CONFIG.radiusXSmall }; | |||
| color: ${ COLORS.gray[ 700 ] }; | |||
| color: ${ COLORS.theme.gray[ 700 ] }; | |||
There was a problem hiding this comment.
Nice, this actually achieves better contrast with a dark theme:
| Before | After |
|---|---|
 |
 |
| @@ -39,7 +39,7 @@ export const toggleGroupControl = ( { | |||
| content: ''; | |||
| position: absolute; | |||
| pointer-events: none; | |||
| background: ${ COLORS.gray[ 900 ] }; | |||
| background: ${ COLORS.theme.foreground }; | |||
There was a problem hiding this comment.
This actually fixes the active state with dark theme:
| Before | After |
|---|---|
 |
 |
| @@ -12,7 +12,6 @@ const CONTROL_PROPS = { | |||
| controlPaddingXSmall: 8, | |||
| controlPaddingXLarge: 12 * 1.3334, // TODO: Deprecate | |||
|
|
|||
| controlBackgroundColor: COLORS.white, | |||
| @@ -112,7 +112,7 @@ const isIconStyles = ( { | |||
| }; | |||
|
|
|||
| return css` | |||
| color: ${ COLORS.gray[ 900 ] }; | |||
| color: ${ COLORS.theme.foreground }; | |||
There was a problem hiding this comment.
This actually fixes active state for toggles with icon:
| Before | After |
|---|---|
 |
 |
|
@tyxla Thanks for highlighting the small improvements 😄 |
I was surprised how many of them we have in a single PR! Nice work 🚀 |
yogeshbhutkar
pushed a commit
to yogeshbhutkar/gutenberg
that referenced
this pull request
Dec 18, 2024
* Components: Deprecate `COLORS.white` * Add changelogs * Update snapshot Co-authored-by: mirka <[email protected]> Co-authored-by: tyxla <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Part of #44116, #43997
What?
Deprecates the internal
COLORS.whitevariable, replacing most of the usages to theme-ready variables.There are a few more usages in the package, but they are each a bit special so we'll deal with them separately.
Why?
COLORS.whiteis not theme-ready, and we should prevent new usages in component styles.Testing Instructions
Check in Storybook that there are no visual regressions in the following component states. Use the theme tool in the toolbar to toggle to an example dark mode.
isDeselectablemode.