Skip to content

Commit

Permalink
Components: Deprecate COLORS.white (#67649)
Browse files Browse the repository at this point in the history 
* Components: Deprecate `COLORS.white`

* Add changelogs

* Update snapshot

Co-authored-by: mirka <[email protected]>
Co-authored-by: tyxla <[email protected]>
  • Loading branch information
@mirka @tyxla
3 people authored Dec 9, 2024
1 parent e772438 commit 896b316
Show file tree
Hide file tree
Showing 8 changed files with 38 additions and 33 deletions.
3 changes: 3 additions & 0 deletions packages/components/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@

- `GradientPicker`: Add `enableAlpha` prop ([#66974](https://github.com/WordPress/gutenberg/pull/66974))
- `CustomGradientPicker`: Add `enableAlpha` prop ([#66974](https://github.com/WordPress/gutenberg/pull/66974))
- `Menu`: Replace hardcoded white color with theme-ready variable ([#67649](https://github.com/WordPress/gutenberg/pull/67649)).
- `Navigation` (deprecated): Replace hardcoded white color with theme-ready variable ([#67649](https://github.com/WordPress/gutenberg/pull/67649)).
- `ToggleGroupControl`: Replace hardcoded white color with theme-ready variable ([#67649](https://github.com/WordPress/gutenberg/pull/67649)).
- `RangeControl`: Update the design of the range control marks ([#67611](https://github.com/WordPress/gutenberg/pull/67611))
- `BorderBoxControl`: Reduce gap value when unlinked ([#67049](https://github.com/WordPress/gutenberg/pull/67049)).
- `DropdownMenu`: Increase option height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)).
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/menu/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ const baseItem = css`
[aria-disabled='true']
) {
background-color: ${ COLORS.theme.accent };
color: ${ COLORS.white };
color: ${ COLORS.theme.accentInverted };
}
/* Keyboard focus (focus-visible) */
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/navigation/styles/navigation-styles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,12 +134,12 @@ export const ItemBaseUI = styled.li`
&.is-active {
background-color: ${ COLORS.theme.accent };
color: ${ COLORS.white };
color: ${ COLORS.theme.accentInverted };
> button,
.components-button:hover,
> a {
color: ${ COLORS.white };
color: ${ COLORS.theme.accentInverted };
opacity: 1;
}
}
Expand Down
44 changes: 22 additions & 22 deletions packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
content: '';
position: absolute;
pointer-events: none;
background: #1e1e1e;
background: var(--wp-components-color-foreground, #1e1e1e);
outline: 2px solid transparent;
outline-offset: -3px;
--antialiasing-factor: 100;
Expand Down Expand Up @@ -134,7 +134,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
background: transparent;
border: none;
border-radius: 1px;
color: #757575;
color: var(--wp-components-color-gray-700, #757575);
fill: currentColor;
cursor: pointer;
display: -webkit-box;
Expand All @@ -158,12 +158,12 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
user-select: none;
width: 100%;
z-index: 2;
color: #1e1e1e;
color: var(--wp-components-color-foreground, #1e1e1e);
height: 32px;
aspect-ratio: 1;
padding-left: 0;
padding-right: 0;
color: #fff;
color: var(--wp-components-color-foreground-inverted, #fff);
}
@media not ( prefers-reduced-motion ) {
Expand All @@ -183,7 +183,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
}
.emotion-12:active {
background: #fff;
background: var(--wp-components-color-background, #fff);
}
.emotion-12:active {
Expand Down Expand Up @@ -211,7 +211,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
background: transparent;
border: none;
border-radius: 1px;
color: #757575;
color: var(--wp-components-color-gray-700, #757575);
fill: currentColor;
cursor: pointer;
display: -webkit-box;
Expand All @@ -235,7 +235,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
user-select: none;
width: 100%;
z-index: 2;
color: #1e1e1e;
color: var(--wp-components-color-foreground, #1e1e1e);
height: 32px;
aspect-ratio: 1;
padding-left: 0;
Expand All @@ -259,7 +259,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
}
.emotion-17:active {
background: #fff;
background: var(--wp-components-color-background, #fff);
}
<div>
Expand Down Expand Up @@ -437,7 +437,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
content: '';
position: absolute;
pointer-events: none;
background: #1e1e1e;
background: var(--wp-components-color-foreground, #1e1e1e);
outline: 2px solid transparent;
outline-offset: -3px;
--antialiasing-factor: 100;
Expand Down Expand Up @@ -499,7 +499,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
background: transparent;
border: none;
border-radius: 1px;
color: #757575;
color: var(--wp-components-color-gray-700, #757575);
fill: currentColor;
cursor: pointer;
display: -webkit-box;
Expand Down Expand Up @@ -542,7 +542,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
}
.emotion-12:active {
background: #fff;
background: var(--wp-components-color-background, #fff);
}
.emotion-13 {
Expand Down Expand Up @@ -706,7 +706,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
content: '';
position: absolute;
pointer-events: none;
background: #1e1e1e;
background: var(--wp-components-color-foreground, #1e1e1e);
outline: 2px solid transparent;
outline-offset: -3px;
--antialiasing-factor: 100;
Expand Down Expand Up @@ -768,7 +768,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
background: transparent;
border: none;
border-radius: 1px;
color: #757575;
color: var(--wp-components-color-gray-700, #757575);
fill: currentColor;
cursor: pointer;
display: -webkit-box;
Expand All @@ -792,12 +792,12 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
user-select: none;
width: 100%;
z-index: 2;
color: #1e1e1e;
color: var(--wp-components-color-foreground, #1e1e1e);
height: 32px;
aspect-ratio: 1;
padding-left: 0;
padding-right: 0;
color: #fff;
color: var(--wp-components-color-foreground-inverted, #fff);
}
@media not ( prefers-reduced-motion ) {
Expand All @@ -817,7 +817,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
}
.emotion-12:active {
background: #fff;
background: var(--wp-components-color-background, #fff);
}
.emotion-12:active {
Expand Down Expand Up @@ -845,7 +845,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
background: transparent;
border: none;
border-radius: 1px;
color: #757575;
color: var(--wp-components-color-gray-700, #757575);
fill: currentColor;
cursor: pointer;
display: -webkit-box;
Expand All @@ -869,7 +869,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
user-select: none;
width: 100%;
z-index: 2;
color: #1e1e1e;
color: var(--wp-components-color-foreground, #1e1e1e);
height: 32px;
aspect-ratio: 1;
padding-left: 0;
Expand All @@ -893,7 +893,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
}
.emotion-17:active {
background: #fff;
background: var(--wp-components-color-background, #fff);
}
<div>
Expand Down Expand Up @@ -1065,7 +1065,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
content: '';
position: absolute;
pointer-events: none;
background: #1e1e1e;
background: var(--wp-components-color-foreground, #1e1e1e);
outline: 2px solid transparent;
outline-offset: -3px;
--antialiasing-factor: 100;
Expand Down Expand Up @@ -1127,7 +1127,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
background: transparent;
border: none;
border-radius: 1px;
color: #757575;
color: var(--wp-components-color-gray-700, #757575);
fill: currentColor;
cursor: pointer;
display: -webkit-box;
Expand Down Expand Up @@ -1170,7 +1170,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
}
.emotion-12:active {
background: #fff;
background: var(--wp-components-color-background, #fff);
}
.emotion-13 {
Expand Down
12 changes: 6 additions & 6 deletions packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const buttonView = ( {
background: transparent;
border: none;
border-radius: ${ CONFIG.radiusXSmall };
color: ${ COLORS.gray[ 700 ] };
color: ${ COLORS.theme.gray[ 700 ] };
fill: currentColor;
cursor: pointer;
display: flex;
Expand Down Expand Up @@ -70,7 +70,7 @@ export const buttonView = ( {
}
&:active {
background: ${ CONFIG.controlBackgroundColor };
background: ${ COLORS.ui.background };
}
${ isDeselectable && deselectable }
Expand All @@ -79,19 +79,19 @@ export const buttonView = ( {
`;

const pressed = css`
color: ${ COLORS.white };
color: ${ COLORS.theme.foregroundInverted };
&:active {
background: transparent;
}
`;

const deselectable = css`
color: ${ COLORS.gray[ 900 ] };
color: ${ COLORS.theme.foreground };
&:focus {
box-shadow:
inset 0 0 0 1px ${ COLORS.white },
inset 0 0 0 1px ${ COLORS.ui.background },
0 0 0 ${ CONFIG.borderWidthFocus } ${ COLORS.theme.accent };
outline: 2px solid transparent;
}
Expand All @@ -112,7 +112,7 @@ const isIconStyles = ( {
};

return css`
color: ${ COLORS.gray[ 900 ] };
color: ${ COLORS.theme.foreground };
height: ${ iconButtonSizes[ size ] };
aspect-ratio: 1;
padding-left: 0;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/toggle-group-control/toggle-group-control/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const toggleGroupControl = ( {
content: '';
position: absolute;
pointer-events: none;
background: ${ COLORS.gray[ 900 ] };
background: ${ COLORS.theme.foreground };
// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
Expand Down
3 changes: 3 additions & 0 deletions packages/components/src/utils/colors-values.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,9 @@ export const COLORS = Object.freeze( {
* @deprecated Use semantic aliases in `COLORS.ui` or theme-ready variables in `COLORS.theme.gray`.
*/
gray: GRAY, // TODO: Stop exporting this when everything is migrated to `theme` or `ui`
/**
* @deprecated Prefer theme-ready variables in `COLORS.theme`.
*/
white,
alert: ALERT,
/**
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/utils/config-values.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ const CONTROL_PROPS = {
controlPaddingXSmall: 8,
controlPaddingXLarge: 12 * 1.3334, // TODO: Deprecate

controlBackgroundColor: COLORS.white,
controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.theme.accent }`,
controlHeight: CONTROL_HEIGHT,
controlHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,
Expand Down

1 comment on commit 896b316

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in 896b316.
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.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12237371864
📝 Reported issues:

Please sign in to comment.