From d1e892d76b3c3478f9b2d711ac52e7e4f811fedb Mon Sep 17 00:00:00 2001 From: Charles Lee Date: Wed, 16 Aug 2023 15:56:52 +1000 Subject: [PATCH 1/2] Change control-height to be 32px --- polaris-react/src/styles/shared/_controls.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris-react/src/styles/shared/_controls.scss b/polaris-react/src/styles/shared/_controls.scss index c939a14cfa8..06727cd8edf 100644 --- a/polaris-react/src/styles/shared/_controls.scss +++ b/polaris-react/src/styles/shared/_controls.scss @@ -1,5 +1,5 @@ @function control-height() { - @return 36px; + @return 32px; } @function control-vertical-padding() { From 0f16330307060ea4a149856632553429a4da3a44 Mon Sep 17 00:00:00 2001 From: Charles Lee Date: Wed, 16 Aug 2023 15:57:13 +1000 Subject: [PATCH 2/2] `Select` consolidate se23 styles --- .../src/components/Select/Select.scss | 93 +++++-------------- 1 file changed, 24 insertions(+), 69 deletions(-) diff --git a/polaris-react/src/components/Select/Select.scss b/polaris-react/src/components/Select/Select.scss index e56f03b3977..7924af6a7ff 100644 --- a/polaris-react/src/components/Select/Select.scss +++ b/polaris-react/src/components/Select/Select.scss @@ -13,7 +13,7 @@ display: none; } - #{$se23} &:not(.disabled):not(.error) { + &:not(.disabled):not(.error) { // stylelint-disable-next-line -- se23 overrides &:hover .Backdrop { border-color: var(--p-color-border-input-hover); @@ -52,17 +52,10 @@ .Backdrop { border-color: var(--p-color-border-disabled); - - #{$se23} & { - background-color: var(--p-color-bg-transparent-disabled-experimental); - } + background-color: var(--p-color-bg-transparent-disabled-experimental); &::before { - background-color: var(--p-color-bg-disabled); - - #{$se23} & { - background-color: var(--p-color-bg-input); - } + background-color: var(--p-color-bg-input); } &:hover { @@ -82,22 +75,15 @@ width: 100%; // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY min-height: control-height(); - // stylelint-disable -- generated by polaris-migrator DO NOT COPY - padding: control-vertical-padding() var(--p-space-2) - control-vertical-padding() var(--p-space-3); - // stylelint-enable + padding: var(--p-space-1_5-experimental) var(--p-space-2) + var(--p-space-1_5-experimental) var(--p-space-3); - #{$se23} & { - min-height: 32px; - font-size: var(--p-font-size-200); - line-height: var(--p-font-line-height-3); - padding: var(--p-space-1_5-experimental) var(--p-space-2) - var(--p-space-1_5-experimental) var(--p-space-3); + font-size: var(--p-font-size-200); + line-height: var(--p-font-line-height-3); - @media #{$p-breakpoints-md-up} { - line-height: var(--p-font-line-height-2); - font-size: var(--p-font-size-80-experimental); - } + @media #{$p-breakpoints-md-up} { + line-height: var(--p-font-line-height-2); + font-size: var(--p-font-size-80-experimental); } @media #{$p-breakpoints-md-down} { @@ -121,11 +107,7 @@ } .Icon svg { - fill: var(--p-color-icon); - - #{$se23} & { - fill: var(--p-color-icon-subdued); - } + fill: var(--p-color-icon-subdued); } .Input { @@ -161,33 +143,18 @@ right: 0; bottom: 0; left: 0; - border: var(--p-border-width-1) solid var(--p-color-border-input); - border-radius: var(--p-border-radius-1); - background-color: var(--p-color-bg); - box-shadow: var(--p-shadow-sm); - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include focus-ring($border-width: 1px); + border: var(--p-border-width-1-experimental) solid var(--p-color-border-input); + border-radius: var(--p-border-radius-2); + background-color: var(--p-color-bg-input); // stylelint-disable-next-line order/properties-order -- 'position' needs to sit below focus-ring since it will be overwritten with relative when the focus ring style is 'base' position: absolute; - - #{$se23} & { - background-color: var(--p-color-bg-input); - border-radius: var(--p-border-radius-2); - border-width: var(--p-border-width-1-experimental); - box-shadow: none; - } } .error { .Backdrop { - border-color: var(--p-color-border-critical); + border-color: var(--p-color-border-critical-strong-experimental); background-color: var(--p-color-bg-critical-subdued); - #{$se23} & { - border-color: var(--p-color-border-critical-strong-experimental); - background-color: var(--p-color-bg-critical-subdued); - } - // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY &.hover, &:hover { @@ -199,32 +166,20 @@ // so that errors still have red borders. // stylelint-disable-next-line selector-max-combinators, selector-max-specificity, selector-max-class -- generated by polaris-migrator DO NOT COPY .Input:focus-visible ~ .Backdrop { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include focus-ring($style: 'focused'); - - #{$se23} & { - border-color: var(--p-color-border-critical-strong-experimental); - border-width: var(--p-border-width-2-experimental); - background-color: var(--p-color-bg-critical-subdued); - } + border-color: var(--p-color-border-critical-strong-experimental); + border-width: var(--p-border-width-2-experimental); + background-color: var(--p-color-bg-critical-subdued); } } .Input:focus-visible { ~ .Backdrop { - // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY - @include focus-ring($style: 'focused'); - - #{$se23} & { - border-color: var(--p-color-border-input-active-experimental); - border-width: var(--p-border-width-2-experimental); - background-color: var(--p-color-bg-input-active-experimental); - // stylelint-disable-next-line -- se23 - @include no-focus-ring; - outline: var(--p-border-width-2) solid - var(--p-color-border-interactive-focus); - outline-offset: var(--p-space-025); - } + border-color: var(--p-color-border-input-active-experimental); + border-width: var(--p-border-width-2-experimental); + background-color: var(--p-color-bg-input-active-experimental); + outline: var(--p-border-width-2) solid + var(--p-color-border-interactive-focus); + outline-offset: var(--p-space-025); } }