From 4fb3fcff00c7615f89269808d68dfdcfc7652d86 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 1 Dec 2021 12:01:55 +0100 Subject: [PATCH 1/4] Polish color indicator and itemgroup. --- .../components/src/color-indicator/style.scss | 13 +++++-------- packages/components/src/item-group/styles.ts | 2 +- .../src/components/global-styles/style.scss | 17 ----------------- 3 files changed, 6 insertions(+), 26 deletions(-) diff --git a/packages/components/src/color-indicator/style.scss b/packages/components/src/color-indicator/style.scss index 3729291268a8e..4dbce337b7fa9 100644 --- a/packages/components/src/color-indicator/style.scss +++ b/packages/components/src/color-indicator/style.scss @@ -1,11 +1,8 @@ .component-color-indicator { - width: 25px; - height: 16px; - margin-left: 0.8rem; - border: 1px solid #dadada; + width: $grid-unit-50 * 0.5; + height: $grid-unit-50 * 0.5; + border-radius: 50%; + border: $border-width solid $gray-300; display: inline-block; - - & + & { - margin-left: 0.5rem; - } + padding: 0; } diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts index 131754cfa54b5..f0c4abec05b09 100644 --- a/packages/components/src/item-group/styles.ts +++ b/packages/components/src/item-group/styles.ts @@ -10,7 +10,7 @@ import { CONFIG, COLORS } from '../utils'; export const unstyledButton = css` appearance: none; - border: 1px solid transparent; + border: 0; cursor: pointer; background: none; text-align: left; diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 88ba102544ab1..ba9284f18d102 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -4,15 +4,6 @@ justify-content: center; min-height: 152px; line-height: 1; - - .component-color-indicator { - border-radius: 50%; - border: 0; - height: 36px; - width: 36px; - margin-left: 0; - padding: 0; - } } .edit-site-typography-panel__preview { @@ -43,14 +34,6 @@ margin: $grid-unit-20; .component-color-indicator { - margin-left: 0; - display: block; - border-radius: 50%; - height: 24px; - width: 24px; - padding: 0; - border: $border-width solid $gray-300; - // Show a diagonal line (crossed out) for empty swatches. background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%); } From 4f73402a150d776e44a9fce8e9b67205fca03118 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 1 Dec 2021 14:42:44 +0100 Subject: [PATCH 2/4] Revert itemgroup changes, add changelog entry. --- packages/components/CHANGELOG.md | 1 + packages/components/src/item-group/styles.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 9b02dfe344aa9..f80aa280cf1a0 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -27,6 +27,7 @@ ### Enhancements - Wrapped `Modal` in a `forwardRef` call ([#36831](https://github.com/WordPress/gutenberg/pull/36831)). +- Unify styles for `ColorIndicator` with how they appear in Global Styles ([#37028](https://github.com/WordPress/gutenberg/pull/37028)) ## 19.1.0 diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts index f0c4abec05b09..131754cfa54b5 100644 --- a/packages/components/src/item-group/styles.ts +++ b/packages/components/src/item-group/styles.ts @@ -10,7 +10,7 @@ import { CONFIG, COLORS } from '../utils'; export const unstyledButton = css` appearance: none; - border: 0; + border: 1px solid transparent; cursor: pointer; background: none; text-align: left; From 60090c364c58ee84880e95f08198159bbafb4ae6 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 2 Dec 2021 12:07:10 +0100 Subject: [PATCH 3/4] Update collapsed panel indicator. --- .../src/components/colors-gradients/style.scss | 10 +++++----- packages/components/src/color-indicator/style.scss | 1 + .../edit-site/src/components/global-styles/style.scss | 2 ++ 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss index cf72b32b43f86..0c40078d7c690 100644 --- a/packages/block-editor/src/components/colors-gradients/style.scss +++ b/packages/block-editor/src/components/colors-gradients/style.scss @@ -5,13 +5,13 @@ } .block-editor-panel-color-gradient-settings { - .component-color-indicator { - vertical-align: text-bottom; - } + .block-editor-panel-color-gradient-settings__panel-title { + display: flex; - &__panel-title { .component-color-indicator { - display: inline-block; + width: $grid-unit-15; + height: $grid-unit-15; + align-self: center; } } diff --git a/packages/components/src/color-indicator/style.scss b/packages/components/src/color-indicator/style.scss index 4dbce337b7fa9..f43d90747d7c6 100644 --- a/packages/components/src/color-indicator/style.scss +++ b/packages/components/src/color-indicator/style.scss @@ -5,4 +5,5 @@ border: $border-width solid $gray-300; display: inline-block; padding: 0; + margin-left: $grid-unit-15; } diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index ba9284f18d102..35c27fe92cfbe 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -34,6 +34,8 @@ margin: $grid-unit-20; .component-color-indicator { + margin-left: 0; + // Show a diagonal line (crossed out) for empty swatches. background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%); } From 40dc529d2b4e8f7135e0bbf37eb614652c4c1e2d Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 2 Dec 2021 13:52:49 +0100 Subject: [PATCH 4/4] Use gap instead of margin. --- .../block-editor/src/components/colors-gradients/style.scss | 1 + packages/components/src/color-indicator/style.scss | 1 - packages/edit-site/src/components/global-styles/style.scss | 2 -- 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss index 0c40078d7c690..cae89427f50fa 100644 --- a/packages/block-editor/src/components/colors-gradients/style.scss +++ b/packages/block-editor/src/components/colors-gradients/style.scss @@ -7,6 +7,7 @@ .block-editor-panel-color-gradient-settings { .block-editor-panel-color-gradient-settings__panel-title { display: flex; + gap: $grid-unit-15; .component-color-indicator { width: $grid-unit-15; diff --git a/packages/components/src/color-indicator/style.scss b/packages/components/src/color-indicator/style.scss index f43d90747d7c6..4dbce337b7fa9 100644 --- a/packages/components/src/color-indicator/style.scss +++ b/packages/components/src/color-indicator/style.scss @@ -5,5 +5,4 @@ border: $border-width solid $gray-300; display: inline-block; padding: 0; - margin-left: $grid-unit-15; } diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 35c27fe92cfbe..ba9284f18d102 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -34,8 +34,6 @@ margin: $grid-unit-20; .component-color-indicator { - margin-left: 0; - // Show a diagonal line (crossed out) for empty swatches. background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%); }