From 8c7f5e1c083eda6dbc7cbd7f24439b7ec8fda625 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 8 Sep 2022 04:17:34 +0900 Subject: [PATCH 1/5] =?UTF-8?q?Retire=20`LIGHT=5FGRAY[=20300=20]`=20?= =?UTF-8?q?=E2=86=92=20`GRAY[=20100=20]`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/focal-point-picker/styles/focal-point-picker-style.ts | 2 +- .../components/src/unit-control/styles/unit-control-styles.ts | 2 +- packages/components/src/utils/colors-values.js | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts index 54304213a82d8e..5a618e515a9daf 100644 --- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts +++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts @@ -42,7 +42,7 @@ export const MediaContainer = styled.div` `; export const MediaPlaceholder = styled.div` - background: ${ COLORS.lightGray[ 300 ] }; + background: ${ COLORS.gray[ 100 ] }; box-sizing: border-box; height: ${ INITIAL_BOUNDS.height }px; max-width: 280px; diff --git a/packages/components/src/unit-control/styles/unit-control-styles.ts b/packages/components/src/unit-control/styles/unit-control-styles.ts index bfc299807fd315..832e1bac0d9362 100644 --- a/packages/components/src/unit-control/styles/unit-control-styles.ts +++ b/packages/components/src/unit-control/styles/unit-control-styles.ts @@ -113,7 +113,7 @@ const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => { ${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() } &:not(:disabled):hover { - background-color: ${ COLORS.lightGray[ 300 ] }; + background-color: ${ COLORS.gray[ 100 ] }; } &:focus { diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js index 79d38477569534..0e406806d5b5fc 100644 --- a/packages/components/src/utils/colors-values.js +++ b/packages/components/src/utils/colors-values.js @@ -27,7 +27,6 @@ const LIGHT_GRAY = { 800: '#b5bcc2', 600: '#d7dade', 400: '#e8eaeb', // Good for "readonly" input fields and special text selection. - 300: '#edeff0', }; // Matches @wordpress/base-styles From da076ca481e93a28d4f256693ddf120fa47db693 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 8 Sep 2022 04:20:13 +0900 Subject: [PATCH 2/5] =?UTF-8?q?Retire=20`LIGHT=5FGRAY[=20400=20]`=20?= =?UTF-8?q?=E2=86=92=20`GRAY[=20100=20]`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Using the more meaningful `COLORS.ui.backgroundDisabled` in this case --- .../components/src/range-control/styles/range-control-styles.ts | 2 +- packages/components/src/utils/colors-values.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts index 442d3059465d6b..f24b70754aea9f 100644 --- a/packages/components/src/range-control/styles/range-control-styles.ts +++ b/packages/components/src/range-control/styles/range-control-styles.ts @@ -76,7 +76,7 @@ const railBackgroundColor = ( { disabled, railColor }: RailProps ) => { let background = railColor || ''; if ( disabled ) { - background = COLORS.lightGray[ 400 ]; + background = COLORS.ui.backgroundDisabled; } return css( { background } ); diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js index 0e406806d5b5fc..5435edc274f559 100644 --- a/packages/components/src/utils/colors-values.js +++ b/packages/components/src/utils/colors-values.js @@ -26,7 +26,6 @@ const GRAY = { const LIGHT_GRAY = { 800: '#b5bcc2', 600: '#d7dade', - 400: '#e8eaeb', // Good for "readonly" input fields and special text selection. }; // Matches @wordpress/base-styles From 90b637d0949bc0dc7063ae65cf7a9594698a342f Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 8 Sep 2022 04:23:15 +0900 Subject: [PATCH 3/5] =?UTF-8?q?Retire=20`LIGHT=5FGRAY[=20600=20]`=20?= =?UTF-8?q?=E2=86=92=20`GRAY[=20300=20]`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/range-control/styles/range-control-styles.ts | 8 ++++---- packages/components/src/utils/colors-values.js | 1 - 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts index f24b70754aea9f..da34d387b8c421 100644 --- a/packages/components/src/range-control/styles/range-control-styles.ts +++ b/packages/components/src/range-control/styles/range-control-styles.ts @@ -83,7 +83,7 @@ const railBackgroundColor = ( { disabled, railColor }: RailProps ) => { }; export const Rail = styled.span` - background-color: ${ COLORS.lightGray[ 600 ] }; + background-color: ${ COLORS.gray[ 300 ] }; left: 0; pointer-events: none; right: 0; @@ -129,7 +129,7 @@ export const MarksWrapper = styled.span` `; const markFill = ( { disabled, isFilled }: RangeMarkProps ) => { - let backgroundColor = isFilled ? 'currentColor' : COLORS.lightGray[ 600 ]; + let backgroundColor = isFilled ? 'currentColor' : COLORS.gray[ 300 ]; if ( disabled ) { backgroundColor = COLORS.lightGray[ 800 ]; @@ -152,12 +152,12 @@ export const Mark = styled.span` const markLabelFill = ( { isFilled }: RangeMarkProps ) => { return css( { - color: isFilled ? COLORS.gray[ 700 ] : COLORS.lightGray[ 600 ], + color: isFilled ? COLORS.gray[ 700 ] : COLORS.gray[ 300 ], } ); }; export const MarkLabel = styled.span` - color: ${ COLORS.lightGray[ 600 ] }; + color: ${ COLORS.gray[ 300 ] }; left: 0; font-size: 11px; position: absolute; diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js index 5435edc274f559..9e494f80290f75 100644 --- a/packages/components/src/utils/colors-values.js +++ b/packages/components/src/utils/colors-values.js @@ -25,7 +25,6 @@ const GRAY = { // TODO: Replace usages of these with the equivalents in `GRAY` const LIGHT_GRAY = { 800: '#b5bcc2', - 600: '#d7dade', }; // Matches @wordpress/base-styles From 1cd4268b215ef9aae23ad7f1bf517756f1cf1234 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 8 Sep 2022 04:31:33 +0900 Subject: [PATCH 4/5] =?UTF-8?q?Retire=20`LIGHT=5FGRAY[=20800=20]`=20?= =?UTF-8?q?=E2=86=92=20`GRAY[=20400=20]`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../styles/alignment-matrix-control-styles.js | 2 +- .../src/range-control/styles/range-control-styles.ts | 6 +++--- packages/components/src/utils/colors-values.js | 9 --------- 3 files changed, 4 insertions(+), 13 deletions(-) diff --git a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js index 9cf55416023087..f16ec53827403f 100644 --- a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js +++ b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js @@ -45,7 +45,7 @@ export const Row = styled.div` const pointActive = ( { isActive } ) => { const boxShadow = isActive ? `0 0 0 2px ${ COLORS.gray[ 900 ] }` : null; - const pointColor = isActive ? COLORS.gray[ 900 ] : COLORS.lightGray[ 800 ]; + const pointColor = isActive ? COLORS.gray[ 900 ] : COLORS.gray[ 400 ]; const pointColorHover = isActive ? COLORS.gray[ 900 ] : COLORS.ui.theme; return css` diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts index da34d387b8c421..b0d8810a8f3c31 100644 --- a/packages/components/src/range-control/styles/range-control-styles.ts +++ b/packages/components/src/range-control/styles/range-control-styles.ts @@ -101,7 +101,7 @@ const trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => { let background = trackColor || 'currentColor'; if ( disabled ) { - background = COLORS.lightGray[ 800 ]; + background = COLORS.gray[ 400 ]; } return css( { background } ); @@ -132,7 +132,7 @@ const markFill = ( { disabled, isFilled }: RangeMarkProps ) => { let backgroundColor = isFilled ? 'currentColor' : COLORS.gray[ 300 ]; if ( disabled ) { - backgroundColor = COLORS.lightGray[ 800 ]; + backgroundColor = COLORS.gray[ 400 ]; } return css( { @@ -171,7 +171,7 @@ export const MarkLabel = styled.span` const thumbColor = ( { disabled }: ThumbProps ) => disabled ? css` - background-color: ${ COLORS.lightGray[ 800 ] }; + background-color: ${ COLORS.gray[ 400 ] }; ` : css` background-color: var( --wp-admin-theme-color ); diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js index 9e494f80290f75..f3cf21ccb54969 100644 --- a/packages/components/src/utils/colors-values.js +++ b/packages/components/src/utils/colors-values.js @@ -22,11 +22,6 @@ const GRAY = { 100: '#f0f0f0', }; -// TODO: Replace usages of these with the equivalents in `GRAY` -const LIGHT_GRAY = { - 800: '#b5bcc2', -}; - // Matches @wordpress/base-styles const ALERT = { yellow: '#f0b849', @@ -61,10 +56,6 @@ export const COLORS = Object.freeze( { * The main gray color object. */ gray: GRAY, - /** - * @deprecated Try to use `gray` instead. - */ - lightGray: LIGHT_GRAY, white, alert: ALERT, ui: UI, From 6ca4da98b13513bb7c2afa06824be275d870bfce Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 9 Sep 2022 02:30:57 +0900 Subject: [PATCH 5/5] Add changelog --- packages/components/CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 4aa5eb6c3c7108..e372a83b352825 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -25,6 +25,9 @@ - `SearchControl`: Add `__nextHasNoMargin` prop for opting into the new margin-free styles ([#43871](https://github.com/WordPress/gutenberg/pull/43871)). - `CardHeader`, `CardBody`, `CardFooter`: Tweak `isShady` background colors to be consistent with the grays in `@wordpress/base-styles` ([#43719](https://github.com/WordPress/gutenberg/pull/43719)). - `InputControl`, `SelectControl`: Tweak `disabled` colors to be consistent with the grays in `@wordpress/base-styles` ([#43719](https://github.com/WordPress/gutenberg/pull/43719)). +- `FocalPointPicker`: Tweak media placeholder background color to be consistent with the grays in `@wordpress/base-styles` ([#43994](https://github.com/WordPress/gutenberg/pull/43994)). +- `RangeControl`: Tweak rail, track, and mark colors to be consistent with the grays in `@wordpress/base-styles` ([#43994](https://github.com/WordPress/gutenberg/pull/43994)). +- `UnitControl`: Tweak unit dropdown hover color to be consistent with the grays in `@wordpress/base-styles` ([#43994](https://github.com/WordPress/gutenberg/pull/43994)). - `Popover`: stabilize `__unstableShift` to `shift` ([#43845](https://github.com/WordPress/gutenberg/pull/43845)). ### Internal