From 98fc1ebbd5df9940168288740bfa67cf98e8e7fe Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Mon, 4 Mar 2024 15:12:25 -0500 Subject: [PATCH 1/6] chore: migrate gray-50 to gray-25 Migrates any instance of `--spectrum-gray-50` to use `--spectrum-gray-25` as per the S2 migration guide --- components/actionbar/index.css | 2 +- components/actionbutton/index.css | 8 ++++---- components/asset/index.css | 2 +- components/dial/index.css | 4 ++-- components/search/index.css | 2 +- components/site/index.css | 2 +- components/slider/themes/express.css | 10 +++++----- components/stepper/themes/express.css | 2 +- components/stepper/themes/spectrum.css | 2 +- components/swatch/index.css | 2 +- components/table/index.css | 2 +- components/tag/index.css | 2 +- components/textfield/index.css | 2 +- 13 files changed, 21 insertions(+), 21 deletions(-) diff --git a/components/actionbar/index.css b/components/actionbar/index.css index 9cc410be366..27c89827128 100644 --- a/components/actionbar/index.css +++ b/components/actionbar/index.css @@ -26,7 +26,7 @@ governing permissions and limitations under the License. } /* colors - applied to popover */ - --spectrum-actionbar-popover-background-color: var(--spectrum-gray-50); + --spectrum-actionbar-popover-background-color: var(--spectrum-gray-25); --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400); /* emphasized variation colors */ diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index 13cfee9db8e..4d838840c04 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -38,10 +38,10 @@ governing permissions and limitations under the License. --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down)); --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus)); - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-50)); - --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-50)); - --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-50)); - --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-50)); + --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-25)); + --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-25)); + --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-25)); + --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-25)); &.spectrum-ActionButton--emphasized { --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default)); diff --git a/components/asset/index.css b/components/asset/index.css index 29fdf09c0fd..8f7bf48ed8b 100644 --- a/components/asset/index.css +++ b/components/asset/index.css @@ -52,7 +52,7 @@ governing permissions and limitations under the License. --highcontrast-asset-file-background-color, var( --mod-asset-file-background-color, - var(--spectrum-gray-50) + var(--spectrum-gray-25) ) ); } diff --git a/components/dial/index.css b/components/dial/index.css index 04c0cec5eb6..550e59186ed 100644 --- a/components/dial/index.css +++ b/components/dial/index.css @@ -24,8 +24,8 @@ governing permissions and limitations under the License. --spectrum-dial-handle-marker-color-hover: var(--spectrum-gray-800); --spectrum-dial-border-color-hover: var(--spectrum-gray-800); - --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50); - --spectrum-dial-border-color-key-focus: var(--spectrum-gray-50); + --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25); + --spectrum-dial-border-color-key-focus: var(--spectrum-gray-25); --spectrum-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700); --spectrum-dial-border-color-mouse-focus: var(--spectrum-gray-700); diff --git a/components/search/index.css b/components/search/index.css index df541c9c757..5a6f2d0d4d0 100644 --- a/components/search/index.css +++ b/components/search/index.css @@ -57,7 +57,7 @@ governing permissions and limitations under the License. /* Background and Border */ --spectrum-search-border-width: var(--spectrum-border-width-100); - --spectrum-search-background-color: var(--spectrum-gray-50); + --spectrum-search-background-color: var(--spectrum-gray-25); /* Disabled */ --spectrum-search-color-disabled: var(--spectrum-disabled-content-color); diff --git a/components/site/index.css b/components/site/index.css index d0fd18d2e24..5d72ae9b1fc 100644 --- a/components/site/index.css +++ b/components/site/index.css @@ -651,7 +651,7 @@ governing permissions and limitations under the License. .spectrum-Site { /* .spectrum-Site */ --spectrum-site-background-color: var(--spectrum-global-color-gray-75); - --spectrum-site-content-background-color: var(--spectrum-global-color-gray-50); + --spectrum-site-content-background-color: var(--spectrum-global-color-gray-25); --spectrum-site-header-border-color: var(--spectrum-global-color-gray-300); --spectrum-site-header-background-color: var(--spectrum-site-content-background-color); --spectrum-site-sidebar-background-color: var(--spectrum-site-background-color); diff --git a/components/slider/themes/express.css b/components/slider/themes/express.css index 1d88288dfcf..9c7d952be7b 100644 --- a/components/slider/themes/express.css +++ b/components/slider/themes/express.css @@ -16,12 +16,12 @@ governing permissions and limitations under the License. --spectrum-slider-ramp-track-color: var(--spectrum-gray-300); --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200); - --spectrum-slider-handle-background-color: var(--spectrum-gray-50); - --spectrum-slider-handle-background-color-disabled: var(--spectrum-gray-50); - --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-50); - --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-50); + --spectrum-slider-handle-background-color: var(--spectrum-gray-25); + --spectrum-slider-handle-background-color-disabled: var(--spectrum-gray-25); + --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-25); + --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-25); --spectrum-slider-handle-border-color: var(--spectrum-gray-800); - --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-50); + --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-25); --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); diff --git a/components/stepper/themes/express.css b/components/stepper/themes/express.css index f5b575d2439..2345c366bea 100644 --- a/components/stepper/themes/express.css +++ b/components/stepper/themes/express.css @@ -17,7 +17,7 @@ governing permissions and limitations under the License. --spectrum-stepper-buttons-border-style: solid; --spectrum-stepper-buttons-border-width: var(--spectrum-border-width-200); --spectrum-stepper-buttons-border-color: transparent; - --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); + --spectrum-stepper-buttons-background-color: var(--spectrum-gray-25); --spectrum-stepper-buttons-border-color-hover: transparent; --spectrum-stepper-buttons-border-color-focus: transparent; --spectrum-stepper-buttons-border-color-keyboard-focus: transparent; diff --git a/components/stepper/themes/spectrum.css b/components/stepper/themes/spectrum.css index a59b448068d..740f4cbf5cd 100644 --- a/components/stepper/themes/spectrum.css +++ b/components/stepper/themes/spectrum.css @@ -17,7 +17,7 @@ governing permissions and limitations under the License. --spectrum-stepper-buttons-border-style: none; --spectrum-stepper-buttons-border-width: 0; --spectrum-stepper-buttons-border-color: var(--spectrum-gray-500); - --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); + --spectrum-stepper-buttons-background-color: var(--spectrum-gray-25); --spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600); --spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800); --spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900); diff --git a/components/swatch/index.css b/components/swatch/index.css index 2d47bab6d36..373071b304c 100644 --- a/components/swatch/index.css +++ b/components/swatch/index.css @@ -28,7 +28,7 @@ governing permissions and limitations under the License. /* Color */ --spectrum-swatch-border-color-selected: var(--spectrum-gray-900); - --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50); + --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25); --spectrum-swatch-disabled-icon-border-color: var(--spectrum-swatch-disabled-icon-border-color); --spectrum-swatch-disabled-icon-color: var(--spectrum-white); --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800); diff --git a/components/table/index.css b/components/table/index.css index 05bdc7ec337..77cbbd70d3e 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -47,7 +47,7 @@ governing permissions and limitations under the License. --spectrum-table-header-background-color: var(--spectrum-transparent-white-100); --spectrum-table-header-text-color: var(--spectrum-body-color); - --spectrum-table-row-background-color: var(--spectrum-gray-50); + --spectrum-table-row-background-color: var(--spectrum-gray-25); --spectrum-table-row-text-color: var(--spectrum-neutral-content-color-default); /* ----- * diff --git a/components/tag/index.css b/components/tag/index.css index ec3eca02f85..c692be02b7a 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -27,7 +27,7 @@ governing permissions and limitations under the License. --spectrum-tag-label-font-weight: var(--spectrum-regular-font-weight); /* selected */ - --spectrum-tag-content-color-selected: var(--spectrum-gray-50); + --spectrum-tag-content-color-selected: var(--spectrum-gray-25); --spectrum-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default); --spectrum-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); --spectrum-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down); diff --git a/components/textfield/index.css b/components/textfield/index.css index b8e1d608ae5..492bd7bf40e 100644 --- a/components/textfield/index.css +++ b/components/textfield/index.css @@ -129,7 +129,7 @@ governing permissions and limitations under the License. --spectrum-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); /*** Colors ***/ - --spectrum-textfield-background-color: var(--spectrum-gray-50); + --spectrum-textfield-background-color: var(--spectrum-gray-25); /* Text Colors */ --spectrum-textfield-text-color-default: var( From 23daf3ddf624fe31f33f886bba3656c9d479bd48 Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Mon, 4 Mar 2024 15:15:23 -0500 Subject: [PATCH 2/6] chore: migrate gray-75 to gray-50 Migrates usages of `--spectrum-gray-75` to use `--spectrum-gray-50` as per the s2 migration guide. --- components/actionbutton/themes/spectrum.css | 2 +- components/button/themes/spectrum.css | 2 +- components/checkbox/index.css | 2 +- components/infieldbutton/themes/spectrum.css | 2 +- components/picker/themes/spectrum.css | 2 +- components/pickerbutton/themes/spectrum.css | 2 +- components/radio/index.css | 2 +- components/site/index.css | 6 +++--- components/switch/index.css | 2 +- components/tag/themes/spectrum.css | 6 +++--- 10 files changed, 14 insertions(+), 14 deletions(-) diff --git a/components/actionbutton/themes/spectrum.css b/components/actionbutton/themes/spectrum.css index 30de8aaf3a6..58b6856e31f 100644 --- a/components/actionbutton/themes/spectrum.css +++ b/components/actionbutton/themes/spectrum.css @@ -12,7 +12,7 @@ governing permissions and limitations under the License. @container (--system: spectrum) { .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-75); + --spectrum-actionbutton-background-color-default: var(--spectrum-gray-50); --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); diff --git a/components/button/themes/spectrum.css b/components/button/themes/spectrum.css index 2b1ded8454d..3369825e3f5 100644 --- a/components/button/themes/spectrum.css +++ b/components/button/themes/spectrum.css @@ -12,7 +12,7 @@ governing permissions and limitations under the License. @container (--system: spectrum) { .spectrum-Button { - --spectrum-button-background-color-default: var(--spectrum-gray-75); + --spectrum-button-background-color-default: var(--spectrum-gray-50); --spectrum-button-background-color-hover: var(--spectrum-gray-200); --spectrum-button-background-color-down: var(--spectrum-gray-300); --spectrum-button-background-color-focus: var(--spectrum-gray-200); diff --git a/components/checkbox/index.css b/components/checkbox/index.css index e3aa4bc80f2..31f68c63804 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -28,7 +28,7 @@ governing permissions and limitations under the License. --spectrum-checkbox-content-color-disabled: var(--spectrum-disabled-content-color); --spectrum-checkbox-control-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-checkbox-checkmark-color: var(--spectrum-gray-75); + --spectrum-checkbox-checkmark-color: var(--spectrum-gray-50); --spectrum-checkbox-invalid-color-default: var(--spectrum-negative-color-900); --spectrum-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); diff --git a/components/infieldbutton/themes/spectrum.css b/components/infieldbutton/themes/spectrum.css index ae22ee72443..68531f39a91 100644 --- a/components/infieldbutton/themes/spectrum.css +++ b/components/infieldbutton/themes/spectrum.css @@ -22,7 +22,7 @@ governing permissions and limitations under the License. --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset); --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset); - --spectrum-infield-button-background-color: var(--spectrum-gray-75); + --spectrum-infield-button-background-color: var(--spectrum-gray-50); --spectrum-infield-button-background-color-hover: var(--spectrum-gray-200); --spectrum-infield-button-background-color-down: var(--spectrum-gray-300); --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200); diff --git a/components/picker/themes/spectrum.css b/components/picker/themes/spectrum.css index c9452754589..7107fad7023 100644 --- a/components/picker/themes/spectrum.css +++ b/components/picker/themes/spectrum.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. @container (--system: spectrum) { .spectrum-Picker { - --spectrum-picker-background-color-default: var(--spectrum-gray-75); + --spectrum-picker-background-color-default: var(--spectrum-gray-50); --spectrum-picker-background-color-default-open: var(--spectrum-gray-200); --spectrum-picker-background-color-active: var(--spectrum-gray-300); --spectrum-picker-background-color-hover: var(--spectrum-gray-200); diff --git a/components/pickerbutton/themes/spectrum.css b/components/pickerbutton/themes/spectrum.css index 5250be4186e..944faf38e9d 100644 --- a/components/pickerbutton/themes/spectrum.css +++ b/components/pickerbutton/themes/spectrum.css @@ -12,7 +12,7 @@ governing permissions and limitations under the License. @container (--system: spectrum) { .spectrum-PickerButton { - --spectrum-picker-button-background-color: var(--spectrum-gray-75); + --spectrum-picker-button-background-color: var(--spectrum-gray-50); --spectrum-picker-button-background-color-hover: var(--spectrum-gray-200); --spectrum-picker-button-background-color-down: var(--spectrum-gray-300); --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-200); diff --git a/components/radio/index.css b/components/radio/index.css index 4eb8a11695b..cc11cc29b99 100644 --- a/components/radio/index.css +++ b/components/radio/index.css @@ -41,7 +41,7 @@ governing permissions and limitations under the License. /* selection indicator all themes */ --spectrum-radio-border-width: var(--spectrum-border-width-200); - --spectrum-radio-button-background-color: var(--spectrum-gray-75); + --spectrum-radio-button-background-color: var(--spectrum-gray-50); /* checked selection indicator */ --spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); diff --git a/components/site/index.css b/components/site/index.css index 5d72ae9b1fc..9bc61319b3c 100644 --- a/components/site/index.css +++ b/components/site/index.css @@ -650,7 +650,7 @@ governing permissions and limitations under the License. .spectrum-Site { /* .spectrum-Site */ - --spectrum-site-background-color: var(--spectrum-global-color-gray-75); + --spectrum-site-background-color: var(--spectrum-global-color-gray-50); --spectrum-site-content-background-color: var(--spectrum-global-color-gray-25); --spectrum-site-header-border-color: var(--spectrum-global-color-gray-300); --spectrum-site-header-background-color: var(--spectrum-site-content-background-color); @@ -662,7 +662,7 @@ governing permissions and limitations under the License. --spectrum-site-overlay-underlay-background-color: rgba(0, 0, 0, 0.2); /* .spectrum-CSSExample */ - --spectrum-cssexample-markup-background-color: var(--spectrum-global-color-gray-75); + --spectrum-cssexample-markup-background-color: var(--spectrum-global-color-gray-50); --spectrum-cssexample-border-color: var(--spectrum-global-color-gray-100); } @@ -744,5 +744,5 @@ governing permissions and limitations under the License. .spectrum-CodeBlock { border-color: var(--spectrum-global-color-gray-400); - background-color: var(--spectrum-global-color-gray-75); + background-color: var(--spectrum-global-color-gray-50); } diff --git a/components/switch/index.css b/components/switch/index.css index 1c5329ea6d9..a0fd14e12e6 100644 --- a/components/switch/index.css +++ b/components/switch/index.css @@ -29,7 +29,7 @@ governing permissions and limitations under the License. --spectrum-switch-focus-indicator-thickness: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); --spectrum-switch-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-switch-handle-background-color: var(--spectrum-gray-75); + --spectrum-switch-handle-background-color: var(--spectrum-gray-50); --spectrum-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color); } diff --git a/components/tag/themes/spectrum.css b/components/tag/themes/spectrum.css index 8c02defb2f8..3e2d43a996d 100644 --- a/components/tag/themes/spectrum.css +++ b/components/tag/themes/spectrum.css @@ -24,10 +24,10 @@ governing permissions and limitations under the License. --spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); /* background */ - --spectrum-tag-background-color: var(--spectrum-gray-75); - --spectrum-tag-background-color-hover: var(--spectrum-gray-75); + --spectrum-tag-background-color: var(--spectrum-gray-50); + --spectrum-tag-background-color-hover: var(--spectrum-gray-50); --spectrum-tag-background-color-active: var(--spectrum-gray-200); - --spectrum-tag-background-color-focus: var(--spectrum-gray-75); + --spectrum-tag-background-color-focus: var(--spectrum-gray-50); /* content color */ --spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); From baa1fa954dc216bc27044c0c13bae4d3cbde5658 Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Mon, 4 Mar 2024 15:16:40 -0500 Subject: [PATCH 3/6] chore: migrate gray-100 to gray-75 Migrates usages of `--spectrum-gray-100` to use `--spectrum-gray-75` as per the s2 migration guide --- components/dial/index.css | 2 +- components/modal/index.css | 2 +- components/page/index.css | 2 +- components/site/index.css | 6 +++--- components/slider/index.css | 4 ++-- components/slider/themes/spectrum.css | 6 +++--- components/splitview/index.css | 2 +- components/table/index.css | 4 ++-- 8 files changed, 14 insertions(+), 14 deletions(-) diff --git a/components/dial/index.css b/components/dial/index.css index 550e59186ed..de1088e4a65 100644 --- a/components/dial/index.css +++ b/components/dial/index.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ .spectrum-Dial { - --spectrum-dial-background-color-default: var(--spectrum-gray-100); + --spectrum-dial-background-color-default: var(--spectrum-gray-75); --spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-300); --spectrum-dial-border-color-disabled: var(--spectrum-gray-300); diff --git a/components/modal/index.css b/components/modal/index.css index 4aa96484e2b..60589ebd37a 100644 --- a/components/modal/index.css +++ b/components/modal/index.css @@ -21,7 +21,7 @@ governing permissions and limitations under the License. --spectrum-modal-max-height: 90vh; --spectrum-modal-max-width: 90%; - --spectrum-modal-background-color: var(--spectrum-gray-100); + --spectrum-modal-background-color: var(--spectrum-gray-75); --spectrum-modal-confirm-border-radius: var(--spectrum-corner-radius-100); --spectrum-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100); --spectrum-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500); diff --git a/components/page/index.css b/components/page/index.css index 513b114a586..f8a78b775cd 100644 --- a/components/page/index.css +++ b/components/page/index.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ :root { - background-color: var(--spectrum-gray-100); + background-color: var(--spectrum-gray-75); /* Prevent tap highlights */ -webkit-tap-highlight-color: var(--spectrum-transparent-black-100); diff --git a/components/site/index.css b/components/site/index.css index 9bc61319b3c..66823dbeb69 100644 --- a/components/site/index.css +++ b/components/site/index.css @@ -663,7 +663,7 @@ governing permissions and limitations under the License. /* .spectrum-CSSExample */ --spectrum-cssexample-markup-background-color: var(--spectrum-global-color-gray-50); - --spectrum-cssexample-border-color: var(--spectrum-global-color-gray-100); + --spectrum-cssexample-border-color: var(--spectrum-global-color-gray-75); } /* Site */ @@ -695,7 +695,7 @@ governing permissions and limitations under the License. .spectrum-CSSComponent-resource--adobe { color: #FA0F00 !important; - background-color: var(--spectrum-global-color-gray-100) !important; + background-color: var(--spectrum-global-color-gray-75) !important; } /* Scrollable */ @@ -714,7 +714,7 @@ governing permissions and limitations under the License. /* CSS Example */ .spectrum-CSSExample-example { - background-color: var(--spectrum-alias-background-color-default, var(--spectrum-global-color-gray-100)); + background-color: var(--spectrum-alias-background-color-default, var(--spectrum-global-color-gray-75)); } .spectrum-CSSExample-markup { diff --git a/components/slider/index.css b/components/slider/index.css index 479cc67b92d..050275bf098 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -87,7 +87,7 @@ governing permissions and limitations under the License. --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-thickness); --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200); --spectrum-slider-tick-mark-border-radius: 2px; - --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-100); + --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-75); /* colors */ --spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color); @@ -96,7 +96,7 @@ governing permissions and limitations under the License. --spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default); --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color); --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-100); + --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); /* values */ --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4); diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css index 90f77d3b6db..6bdbb9681a9 100644 --- a/components/slider/themes/spectrum.css +++ b/components/slider/themes/spectrum.css @@ -18,10 +18,10 @@ governing permissions and limitations under the License. --spectrum-slider-handle-background-color: transparent; --spectrum-slider-handle-background-color-disabled: transparent; - --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-100); - --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-100); + --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-75); + --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-75); --spectrum-slider-handle-border-color: var(--spectrum-gray-700); - --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100); + --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-75); --spectrum-slider-tick-mark-color: var(--spectrum-gray-300); diff --git a/components/splitview/index.css b/components/splitview/index.css index f38626acede..fee02e6ea3e 100644 --- a/components/splitview/index.css +++ b/components/splitview/index.css @@ -16,7 +16,7 @@ governing permissions and limitations under the License. --spectrum-splitview-vertical-gripper-outer-width: 100%; --spectrum-splitview-vertical-gripper-reset: 0; - --spectrum-splitview-background-color: var(--spectrum-gray-100); + --spectrum-splitview-background-color: var(--spectrum-gray-75); --spectrum-splitview-handle-background-color: var(--spectrum-gray-300); --spectrum-splitview-handle-background-color-hover: var(--spectrum-gray-400); --spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800); diff --git a/components/table/index.css b/components/table/index.css index 77cbbd70d3e..96877b50e4a 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -807,7 +807,7 @@ governing permissions and limitations under the License. /********* SCROLLABLE *********/ /* Wrapper that allows a scrollable body and sticky column header. */ .spectrum-Table-scroller { - --spectrum-table-header-background-color: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-100))); + --spectrum-table-header-background-color: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-75))); box-sizing: border-box; display: inline-block; @@ -823,7 +823,7 @@ governing permissions and limitations under the License. var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); &.spectrum-Table--quiet { - --mod-table-header-background-color--quiet: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-100))); + --mod-table-header-background-color--quiet: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-75))); border-block-start: none; } From 73a4dc269983dbdc46e72065f3d1c175f82f81a6 Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Mon, 4 Mar 2024 15:18:11 -0500 Subject: [PATCH 4/6] chore: migrate gray-200 to gray-100 Migrates usages of `--spectrum-gray-200` to use `--spectrum-gray-100` as per the s2 migration guide --- components/actionbutton/themes/express.css | 2 +- components/actionbutton/themes/spectrum.css | 8 ++++---- components/assetcard/index.css | 2 +- components/assetlist/index.css | 2 +- components/button/themes/express.css | 2 +- components/button/themes/spectrum.css | 10 +++++----- components/card/index.css | 2 +- components/clearbutton/themes/express.css | 2 +- components/closebutton/themes/spectrum.css | 19 +++++++++++++++++++ components/infieldbutton/themes/express.css | 2 +- components/infieldbutton/themes/spectrum.css | 4 ++-- components/logicbutton/index.css | 16 ++++++++-------- components/picker/themes/express.css | 2 +- components/picker/themes/spectrum.css | 8 ++++---- components/pickerbutton/themes/express.css | 2 +- components/pickerbutton/themes/spectrum.css | 4 ++-- components/sidenav/index.css | 8 ++++---- components/slider/themes/express.css | 6 +++--- components/slider/themes/spectrum.css | 2 +- components/stepper/themes/spectrum.css | 2 +- components/table/index.css | 4 ++-- components/tag/themes/spectrum.css | 2 +- components/treeview/index.css | 4 ++-- 23 files changed, 67 insertions(+), 48 deletions(-) create mode 100644 components/closebutton/themes/spectrum.css diff --git a/components/actionbutton/themes/express.css b/components/actionbutton/themes/express.css index 9950fa47ec4..5ff2ad77fca 100644 --- a/components/actionbutton/themes/express.css +++ b/components/actionbutton/themes/express.css @@ -12,7 +12,7 @@ governing permissions and limitations under the License. @container (--system: express) { .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-default: var(--spectrum-gray-100); --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); diff --git a/components/actionbutton/themes/spectrum.css b/components/actionbutton/themes/spectrum.css index 58b6856e31f..0b726511bd4 100644 --- a/components/actionbutton/themes/spectrum.css +++ b/components/actionbutton/themes/spectrum.css @@ -13,9 +13,9 @@ governing permissions and limitations under the License. @container (--system: spectrum) { .spectrum-ActionButton { --spectrum-actionbutton-background-color-default: var(--spectrum-gray-50); - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100); --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100); --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400); --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); @@ -28,9 +28,9 @@ governing permissions and limitations under the License. &.spectrum-ActionButton--quiet { --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100); --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100); --spectrum-actionbutton-border-color-default: transparent; --spectrum-actionbutton-border-color-hover: transparent; diff --git a/components/assetcard/index.css b/components/assetcard/index.css index b828db08d2e..0dd8f764923 100644 --- a/components/assetcard/index.css +++ b/components/assetcard/index.css @@ -14,7 +14,7 @@ governing permissions and limitations under the License. .spectrum-AssetCard { /* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */ --spectrum-assetcard-asset-size: 224px; - --spectrum-assetcard-background-color: var(--spectrum-gray-200); + --spectrum-assetcard-background-color: var(--spectrum-gray-100); --spectrum-assetcard-asset-animation-duration: var(--spectrum-animation-duration-100); --spectrum-assetcard-asset-container-border-size: 1px; --spectrum-assetcard-header-margin-block-start: var(--spectrum-spacing-300); diff --git a/components/assetlist/index.css b/components/assetlist/index.css index c68b44ddc09..f87e211eb2e 100644 --- a/components/assetlist/index.css +++ b/components/assetlist/index.css @@ -24,7 +24,7 @@ governing permissions and limitations under the License. --spectrum-assetlist-item-font-size: var(--spectrum-font-size-100); --spectrum-assetlist-item-font-weight: var(--spectrum-regular-font-weight); --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-300); - --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-200); + --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-100); /* thumbnail */ --spectrum-assetlist-thumbnail-width: var(--spectrum-spacing-400); diff --git a/components/button/themes/express.css b/components/button/themes/express.css index 14d9212723d..278d68e72f8 100644 --- a/components/button/themes/express.css +++ b/components/button/themes/express.css @@ -12,7 +12,7 @@ governing permissions and limitations under the License. @container (--system: express) { .spectrum-Button { - --spectrum-button-background-color-default: var(--spectrum-gray-200); + --spectrum-button-background-color-default: var(--spectrum-gray-100); --spectrum-button-background-color-hover: var(--spectrum-gray-300); --spectrum-button-background-color-down: var(--spectrum-gray-400); --spectrum-button-background-color-focus: var(--spectrum-gray-300); diff --git a/components/button/themes/spectrum.css b/components/button/themes/spectrum.css index 3369825e3f5..f1d04714d8f 100644 --- a/components/button/themes/spectrum.css +++ b/components/button/themes/spectrum.css @@ -13,9 +13,9 @@ governing permissions and limitations under the License. @container (--system: spectrum) { .spectrum-Button { --spectrum-button-background-color-default: var(--spectrum-gray-50); - --spectrum-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-button-background-color-hover: var(--spectrum-gray-100); --spectrum-button-background-color-down: var(--spectrum-gray-300); - --spectrum-button-background-color-focus: var(--spectrum-gray-200); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); --spectrum-button-border-color-default: var(--spectrum-gray-400); --spectrum-button-border-color-hover: var(--spectrum-gray-500); @@ -160,7 +160,7 @@ governing permissions and limitations under the License. } &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-gray-200); + --spectrum-button-background-color-default: var(--spectrum-gray-100); --spectrum-button-background-color-hover: var(--spectrum-gray-300); --spectrum-button-background-color-down: var(--spectrum-gray-400); --spectrum-button-background-color-focus: var(--spectrum-gray-300); @@ -203,9 +203,9 @@ governing permissions and limitations under the License. &.spectrum-Button--quiet { --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-button-background-color-hover: var(--spectrum-gray-100); --spectrum-button-background-color-down: var(--spectrum-gray-300); - --spectrum-button-background-color-focus: var(--spectrum-gray-200); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); --spectrum-button-border-color-default: transparent; --spectrum-button-border-color-hover: transparent; diff --git a/components/card/index.css b/components/card/index.css index d7390440605..162af25ecce 100644 --- a/components/card/index.css +++ b/components/card/index.css @@ -23,7 +23,7 @@ governing permissions and limitations under the License. --spectrum-card-border-width: var(--spectrum-border-width-100); --spectrum-card-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-card-border-color: var(--spectrum-gray-200); + --spectrum-card-border-color: var(--spectrum-gray-100); --spectrum-card-border-color-hover: var(--spectrum-gray-300); --spectrum-card-border-color-selected: var(--spectrum-blue-700); diff --git a/components/clearbutton/themes/express.css b/components/clearbutton/themes/express.css index 0ef428de427..e1af69b11a4 100644 --- a/components/clearbutton/themes/express.css +++ b/components/clearbutton/themes/express.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. @container (--system: express) { .spectrum-ClearButton { - --spectrum-clear-button-background-color: var(--spectrum-gray-200); + --spectrum-clear-button-background-color: var(--spectrum-gray-100); --spectrum-clear-button-background-color-hover: var(--spectrum-gray-300); --spectrum-clear-button-background-color-down: var(--spectrum-gray-400); --spectrum-clear-button-background-color-key-focus: var(--spectrum-gray-300); diff --git a/components/closebutton/themes/spectrum.css b/components/closebutton/themes/spectrum.css new file mode 100644 index 00000000000..25e56ac1b6c --- /dev/null +++ b/components/closebutton/themes/spectrum.css @@ -0,0 +1,19 @@ +/*! +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +@container (--system: spectrum) { + .spectrum-CloseButton { + --spectrum-closebutton-background-color-default: transparent; + --spectrum-closebutton-background-color-hover: var(--spectrum-gray-100); + --spectrum-closebutton-background-color-down: var(--spectrum-gray-300); + --spectrum-closebutton-background-color-focus: var(--spectrum-gray-100); + } +} diff --git a/components/infieldbutton/themes/express.css b/components/infieldbutton/themes/express.css index ed17ec812b7..2f502f7c038 100644 --- a/components/infieldbutton/themes/express.css +++ b/components/infieldbutton/themes/express.css @@ -21,7 +21,7 @@ governing permissions and limitations under the License. --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-corner-radius-75); --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-corner-radius-75); - --spectrum-infield-button-background-color: var(--spectrum-gray-200); + --spectrum-infield-button-background-color: var(--spectrum-gray-100); --spectrum-infield-button-background-color-hover: var(--spectrum-gray-300); --spectrum-infield-button-background-color-down: var(--spectrum-gray-400); --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-300); diff --git a/components/infieldbutton/themes/spectrum.css b/components/infieldbutton/themes/spectrum.css index 68531f39a91..f264510427f 100644 --- a/components/infieldbutton/themes/spectrum.css +++ b/components/infieldbutton/themes/spectrum.css @@ -23,8 +23,8 @@ governing permissions and limitations under the License. --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset); --spectrum-infield-button-background-color: var(--spectrum-gray-50); - --spectrum-infield-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-infield-button-background-color-hover: var(--spectrum-gray-100); --spectrum-infield-button-background-color-down: var(--spectrum-gray-300); - --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200); + --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-100); } } diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css index 70c4bf93938..e612c1177b1 100644 --- a/components/logicbutton/index.css +++ b/components/logicbutton/index.css @@ -33,17 +33,17 @@ governing permissions and limitations under the License. &:disabled, &.is-disabled { - --mod-logic-button-and-background-color: var(--mod-logic-button-and-background-color-disabled, var(--spectrum-gray-200)); - --mod-logic-button-and-border-color: var(--mod-logic-button-and-border-color-disabled, var(--spectrum-gray-200)); + --mod-logic-button-and-background-color: var(--mod-logic-button-and-background-color-disabled, var(--spectrum-gray-100)); + --mod-logic-button-and-border-color: var(--mod-logic-button-and-border-color-disabled, var(--spectrum-gray-100)); --mod-logic-button-and-text-color: var(--mod-logic-button-and-text-color-disabled, var(--spectrum-gray-500)); - --mod-logic-button-and-background-color-hover: var(--mod-logic-button-and-background-color-hover-disabled, var(--spectrum-gray-200)); - --mod-logic-button-and-border-color-hover: var(--mod-logic-button-and-border-color-hover-disabled, var(--spectrum-gray-200)); + --mod-logic-button-and-background-color-hover: var(--mod-logic-button-and-background-color-hover-disabled, var(--spectrum-gray-100)); + --mod-logic-button-and-border-color-hover: var(--mod-logic-button-and-border-color-hover-disabled, var(--spectrum-gray-100)); - --mod-logic-button-or-background-color: var(--mod-logic-button-or-background-color-disabled, var(--spectrum-gray-200)); - --mod-logic-button-or-border-color: var(--mod-logic-button-or-border-color-disabled, var(--spectrum-gray-200)); + --mod-logic-button-or-background-color: var(--mod-logic-button-or-background-color-disabled, var(--spectrum-gray-100)); + --mod-logic-button-or-border-color: var(--mod-logic-button-or-border-color-disabled, var(--spectrum-gray-100)); --mod-logic-button-or-text-color: var(--mod-logic-button-or-text-color-disabled, var(--spectrum-gray-500)); - --mod-logic-button-or-background-color-hover: var(--mod-logic-button-or-background-color-hover-disabled, var(--spectrum-gray-200)); - --mod-logic-button-or-border-color-hover: var(--mod-logic-button-or-border-color-hover-disabled, var(--spectrum-gray-200)); + --mod-logic-button-or-background-color-hover: var(--mod-logic-button-or-background-color-hover-disabled, var(--spectrum-gray-100)); + --mod-logic-button-or-border-color-hover: var(--mod-logic-button-or-border-color-hover-disabled, var(--spectrum-gray-100)); } } diff --git a/components/picker/themes/express.css b/components/picker/themes/express.css index a92203cc2d2..5404b4b2e27 100644 --- a/components/picker/themes/express.css +++ b/components/picker/themes/express.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. @container (--system: express) { .spectrum-Picker { - --spectrum-picker-background-color-default: var(--spectrum-gray-200); + --spectrum-picker-background-color-default: var(--spectrum-gray-100); --spectrum-picker-background-color-default-open: var(--spectrum-gray-300); --spectrum-picker-background-color-hover: var(--spectrum-gray-300); --spectrum-picker-background-color-hover-open: var(--spectrum-gray-300); diff --git a/components/picker/themes/spectrum.css b/components/picker/themes/spectrum.css index 7107fad7023..bbbcbd52b68 100644 --- a/components/picker/themes/spectrum.css +++ b/components/picker/themes/spectrum.css @@ -12,11 +12,11 @@ governing permissions and limitations under the License. @container (--system: spectrum) { .spectrum-Picker { --spectrum-picker-background-color-default: var(--spectrum-gray-50); - --spectrum-picker-background-color-default-open: var(--spectrum-gray-200); + --spectrum-picker-background-color-default-open: var(--spectrum-gray-100); --spectrum-picker-background-color-active: var(--spectrum-gray-300); - --spectrum-picker-background-color-hover: var(--spectrum-gray-200); - --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200); - --spectrum-picker-background-color-key-focus: var(--spectrum-gray-200); + --spectrum-picker-background-color-hover: var(--spectrum-gray-100); + --spectrum-picker-background-color-hover-open: var(--spectrum-gray-100); + --spectrum-picker-background-color-key-focus: var(--spectrum-gray-100); --spectrum-picker-border-color-default: var(--spectrum-gray-500); --spectrum-picker-border-color-default-open: var(--spectrum-gray-500); diff --git a/components/pickerbutton/themes/express.css b/components/pickerbutton/themes/express.css index 42db9ddedef..595a3edd02c 100644 --- a/components/pickerbutton/themes/express.css +++ b/components/pickerbutton/themes/express.css @@ -12,7 +12,7 @@ governing permissions and limitations under the License. @container (--system: express) { .spectrum-PickerButton { - --spectrum-picker-button-background-color: var(--spectrum-gray-200); + --spectrum-picker-button-background-color: var(--spectrum-gray-100); --spectrum-picker-button-background-color-hover: var(--spectrum-gray-300); --spectrum-picker-button-background-color-down: var(--spectrum-gray-400); --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-300); diff --git a/components/pickerbutton/themes/spectrum.css b/components/pickerbutton/themes/spectrum.css index 944faf38e9d..04e1c20632e 100644 --- a/components/pickerbutton/themes/spectrum.css +++ b/components/pickerbutton/themes/spectrum.css @@ -13,9 +13,9 @@ governing permissions and limitations under the License. @container (--system: spectrum) { .spectrum-PickerButton { --spectrum-picker-button-background-color: var(--spectrum-gray-50); - --spectrum-picker-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-picker-button-background-color-hover: var(--spectrum-gray-100); --spectrum-picker-button-background-color-down: var(--spectrum-gray-300); - --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-200); + --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-100); --spectrum-picker-button-border-color: inherit; --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100); diff --git a/components/sidenav/index.css b/components/sidenav/index.css index 728b5b4e48b..c251f9c558b 100644 --- a/components/sidenav/index.css +++ b/components/sidenav/index.css @@ -42,14 +42,14 @@ governing permissions and limitations under the License. /* color - background */ --spectrum-sidenav-background-disabled: transparent; --spectrum-sidenav-background-default: transparent; - --spectrum-sidenav-background-hover: var(--spectrum-gray-200); + --spectrum-sidenav-background-hover: var(--spectrum-gray-100); --spectrum-sidenav-item-background-down: var(--spectrum-gray-300); - --spectrum-sidenav-background-key-focus: var(--spectrum-gray-200); + --spectrum-sidenav-background-key-focus: var(--spectrum-gray-100); - --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-200); + --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-100); --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-300); --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-300); - --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-200); + --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-100); /* color font */ --spectrum-sidenav-header-color: var(--spectrum-gray-600); diff --git a/components/slider/themes/express.css b/components/slider/themes/express.css index 9c7d952be7b..b6dce7508ac 100644 --- a/components/slider/themes/express.css +++ b/components/slider/themes/express.css @@ -11,10 +11,10 @@ governing permissions and limitations under the License. @container (--system: express) { .spectrum-Slider { - --spectrum-slider-track-color: var(--spectrum-gray-200); + --spectrum-slider-track-color: var(--spectrum-gray-100); --spectrum-slider-track-fill-color: var(--spectrum-gray-600); --spectrum-slider-ramp-track-color: var(--spectrum-gray-300); - --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200); + --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-100); --spectrum-slider-handle-background-color: var(--spectrum-gray-25); --spectrum-slider-handle-background-color-disabled: var(--spectrum-gray-25); @@ -23,7 +23,7 @@ governing permissions and limitations under the License. --spectrum-slider-handle-border-color: var(--spectrum-gray-800); --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-25); - --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); + --spectrum-slider-tick-mark-color: var(--spectrum-gray-100); --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-900); --spectrum-slider-handle-border-color-down: var(--spectrum-gray-900); diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css index 6bdbb9681a9..15c6937f917 100644 --- a/components/slider/themes/spectrum.css +++ b/components/slider/themes/spectrum.css @@ -14,7 +14,7 @@ governing permissions and limitations under the License. --spectrum-slider-track-color: var(--spectrum-gray-300); --spectrum-slider-track-fill-color: var(--spectrum-gray-700); --spectrum-slider-ramp-track-color: var(--spectrum-gray-400); - --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200); + --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-100); --spectrum-slider-handle-background-color: transparent; --spectrum-slider-handle-background-color-disabled: transparent; diff --git a/components/stepper/themes/spectrum.css b/components/stepper/themes/spectrum.css index 740f4cbf5cd..44115eb3ac7 100644 --- a/components/stepper/themes/spectrum.css +++ b/components/stepper/themes/spectrum.css @@ -37,6 +37,6 @@ governing permissions and limitations under the License. --spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-300); - --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200); + --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-100); } } diff --git a/components/table/index.css b/components/table/index.css index 96877b50e4a..fcb2e4c1f90 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -82,14 +82,14 @@ governing permissions and limitations under the License. /* Summary Row and Section Header Row */ --spectrum-table-summary-row-font-weight: var(--spectrum-bold-font-weight); - --spectrum-table-summary-row-background-color: var(--spectrum-gray-200); + --spectrum-table-summary-row-background-color: var(--spectrum-gray-100); --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-medium); --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-100); --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-100); --spectrum-table-section-header-font-weight: var(--spectrum-bold-font-weight); - --spectrum-table-section-header-background-color: var(--spectrum-gray-200); + --spectrum-table-section-header-background-color: var(--spectrum-gray-100); /* Collapsible and Thumbnails */ --spectrum-table-collapsible-tier-indent: var(--spectrum-spacing-300); diff --git a/components/tag/themes/spectrum.css b/components/tag/themes/spectrum.css index 3e2d43a996d..01bff14b1b2 100644 --- a/components/tag/themes/spectrum.css +++ b/components/tag/themes/spectrum.css @@ -26,7 +26,7 @@ governing permissions and limitations under the License. /* background */ --spectrum-tag-background-color: var(--spectrum-gray-50); --spectrum-tag-background-color-hover: var(--spectrum-gray-50); - --spectrum-tag-background-color-active: var(--spectrum-gray-200); + --spectrum-tag-background-color-active: var(--spectrum-gray-100); --spectrum-tag-background-color-focus: var(--spectrum-gray-50); /* content color */ diff --git a/components/treeview/index.css b/components/treeview/index.css index 38b72be9614..a94442555b5 100644 --- a/components/treeview/index.css +++ b/components/treeview/index.css @@ -32,8 +32,8 @@ governing permissions and limitations under the License. --spectrum-treeview-item-border-color-selected: var(--spectrum-blue-800); --spectrum-treeview-item-border-color-focus: var(--spectrum-blue-700); - --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-200); - --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-200); + --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100); + --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100); --spectrum-treeview-item-border-color-quiet-selected: transparent; From 6dd1c21fad82e1f1add909acf469a87bbeed11f3 Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Mon, 4 Mar 2024 15:30:43 -0500 Subject: [PATCH 5/6] chore: migrate gray-300 to gray-200 Migrates usages of `--spectrum-gray-300` to use `spectrum-gray-200` as per the s2 migration guide --- components/accordion/index.css | 2 +- components/actionbutton/themes/express.css | 8 ++++---- components/actionbutton/themes/spectrum.css | 4 ++-- components/asset/index.css | 2 +- components/assetlist/index.css | 2 +- components/button/themes/express.css | 4 ++-- components/button/themes/spectrum.css | 18 +++++++++--------- components/card/index.css | 6 +++--- components/clearbutton/themes/express.css | 4 ++-- components/closebutton/themes/express.css | 19 +++++++++++++++++++ components/closebutton/themes/spectrum.css | 2 +- components/dial/index.css | 4 ++-- components/divider/index.css | 4 ++-- components/dropzone/index.css | 2 +- components/picker/themes/express.css | 8 ++++---- components/picker/themes/spectrum.css | 2 +- components/pickerbutton/themes/express.css | 4 ++-- components/pickerbutton/themes/spectrum.css | 2 +- components/progressbar/index.css | 2 +- components/progresscircle/index.css | 2 +- components/sidenav/index.css | 6 +++--- components/slider/themes/express.css | 2 +- components/slider/themes/spectrum.css | 4 ++-- components/splitview/index.css | 2 +- components/steplist/index.css | 4 ++-- components/stepper/themes/express.css | 2 +- components/stepper/themes/spectrum.css | 2 +- components/switch/index.css | 4 ++-- components/table/index.css | 4 ++-- components/tabs/index.css | 2 +- components/tag/themes/express.css | 6 +++--- 31 files changed, 79 insertions(+), 60 deletions(-) create mode 100644 components/closebutton/themes/express.css diff --git a/components/accordion/index.css b/components/accordion/index.css index ab176d0d501..429ab9a137a 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -120,7 +120,7 @@ governing permissions and limitations under the License. ); /* Divider */ - --spectrum-accordion-divider-color: var(--spectrum-gray-300); + --spectrum-accordion-divider-color: var(--spectrum-gray-200); --spectrum-accordion-min-block-size: max( var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)), calc( diff --git a/components/actionbutton/themes/express.css b/components/actionbutton/themes/express.css index 5ff2ad77fca..c28b5ddb137 100644 --- a/components/actionbutton/themes/express.css +++ b/components/actionbutton/themes/express.css @@ -13,9 +13,9 @@ governing permissions and limitations under the License. @container (--system: express) { .spectrum-ActionButton { --spectrum-actionbutton-background-color-default: var(--spectrum-gray-100); - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); --spectrum-actionbutton-border-color-default: transparent; --spectrum-actionbutton-border-color-hover: transparent; @@ -27,9 +27,9 @@ governing permissions and limitations under the License. &.spectrum-ActionButton--quiet { --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); } &.spectrum-ActionButton--staticBlack, diff --git a/components/actionbutton/themes/spectrum.css b/components/actionbutton/themes/spectrum.css index 0b726511bd4..23a64b906b8 100644 --- a/components/actionbutton/themes/spectrum.css +++ b/components/actionbutton/themes/spectrum.css @@ -14,7 +14,7 @@ governing permissions and limitations under the License. .spectrum-ActionButton { --spectrum-actionbutton-background-color-default: var(--spectrum-gray-50); --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100); --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400); @@ -29,7 +29,7 @@ governing permissions and limitations under the License. &.spectrum-ActionButton--quiet { --spectrum-actionbutton-background-color-default: transparent; --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100); --spectrum-actionbutton-border-color-default: transparent; diff --git a/components/asset/index.css b/components/asset/index.css index 8f7bf48ed8b..8c83901a8de 100644 --- a/components/asset/index.css +++ b/components/asset/index.css @@ -42,7 +42,7 @@ governing permissions and limitations under the License. --highcontrast-asset-folder-background-color, var( --mod-asset-folder-background-color, - var(--spectrum-gray-300) + var(--spectrum-gray-200) ) ); } diff --git a/components/assetlist/index.css b/components/assetlist/index.css index f87e211eb2e..c25c662d68f 100644 --- a/components/assetlist/index.css +++ b/components/assetlist/index.css @@ -23,7 +23,7 @@ governing permissions and limitations under the License. --spectrum-assetlist-item-animation: var(--spectrum-animation-duration-100); --spectrum-assetlist-item-font-size: var(--spectrum-font-size-100); --spectrum-assetlist-item-font-weight: var(--spectrum-regular-font-weight); - --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-300); + --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-200); --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-100); /* thumbnail */ diff --git a/components/button/themes/express.css b/components/button/themes/express.css index 278d68e72f8..1dc68c1769f 100644 --- a/components/button/themes/express.css +++ b/components/button/themes/express.css @@ -13,9 +13,9 @@ governing permissions and limitations under the License. @container (--system: express) { .spectrum-Button { --spectrum-button-background-color-default: var(--spectrum-gray-100); - --spectrum-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-button-background-color-hover: var(--spectrum-gray-200); --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); --spectrum-button-border-color-default: transparent; --spectrum-button-border-color-hover: transparent; diff --git a/components/button/themes/spectrum.css b/components/button/themes/spectrum.css index f1d04714d8f..b90399e6cdc 100644 --- a/components/button/themes/spectrum.css +++ b/components/button/themes/spectrum.css @@ -14,7 +14,7 @@ governing permissions and limitations under the License. .spectrum-Button { --spectrum-button-background-color-default: var(--spectrum-gray-50); --spectrum-button-background-color-hover: var(--spectrum-gray-100); - --spectrum-button-background-color-down: var(--spectrum-gray-300); + --spectrum-button-background-color-down: var(--spectrum-gray-200); --spectrum-button-background-color-focus: var(--spectrum-gray-100); --spectrum-button-border-color-default: var(--spectrum-gray-400); @@ -139,9 +139,9 @@ governing permissions and limitations under the License. &.spectrum-Button--outline { --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-button-background-color-hover: var(--spectrum-gray-200); --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); --spectrum-button-border-color-default: var(--spectrum-gray-800); --spectrum-button-border-color-hover: var(--spectrum-gray-900); @@ -161,9 +161,9 @@ governing permissions and limitations under the License. &.spectrum-Button--secondary { --spectrum-button-background-color-default: var(--spectrum-gray-100); - --spectrum-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-button-background-color-hover: var(--spectrum-gray-200); --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); --spectrum-button-border-color-default: transparent; --spectrum-button-border-color-hover: transparent; @@ -181,11 +181,11 @@ governing permissions and limitations under the License. &.spectrum-Button--outline { --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-button-background-color-hover: var(--spectrum-gray-200); --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); - --spectrum-button-border-color-default: var(--spectrum-gray-300); + --spectrum-button-border-color-default: var(--spectrum-gray-200); --spectrum-button-border-color-hover: var(--spectrum-gray-400); --spectrum-button-border-color-down: var(--spectrum-gray-500); --spectrum-button-border-color-focus: var(--spectrum-gray-400); @@ -204,7 +204,7 @@ governing permissions and limitations under the License. &.spectrum-Button--quiet { --spectrum-button-background-color-default: transparent; --spectrum-button-background-color-hover: var(--spectrum-gray-100); - --spectrum-button-background-color-down: var(--spectrum-gray-300); + --spectrum-button-background-color-down: var(--spectrum-gray-200); --spectrum-button-background-color-focus: var(--spectrum-gray-100); --spectrum-button-border-color-default: transparent; diff --git a/components/card/index.css b/components/card/index.css index 162af25ecce..07540291f5a 100644 --- a/components/card/index.css +++ b/components/card/index.css @@ -24,10 +24,10 @@ governing permissions and limitations under the License. --spectrum-card-border-width: var(--spectrum-border-width-100); --spectrum-card-corner-radius: var(--spectrum-corner-radius-100); --spectrum-card-border-color: var(--spectrum-gray-100); - --spectrum-card-border-color-hover: var(--spectrum-gray-300); + --spectrum-card-border-color-hover: var(--spectrum-gray-200); --spectrum-card-border-color-selected: var(--spectrum-blue-700); - --spectrum-card-divider-color: var(--spectrum-gray-300); + --spectrum-card-divider-color: var(--spectrum-gray-200); /* Typography */ --spectrum-card-title-font-family: var(--spectrum-sans-font-family-stack); @@ -106,7 +106,7 @@ governing permissions and limitations under the License. ); --spectrum-card-background-color-hover: var( --spectrum-card-background-color-hover-quiet, - var(--spectrum-gray-300) + var(--spectrum-gray-200) ); } diff --git a/components/clearbutton/themes/express.css b/components/clearbutton/themes/express.css index e1af69b11a4..0e4d61cf419 100644 --- a/components/clearbutton/themes/express.css +++ b/components/clearbutton/themes/express.css @@ -12,8 +12,8 @@ governing permissions and limitations under the License. @container (--system: express) { .spectrum-ClearButton { --spectrum-clear-button-background-color: var(--spectrum-gray-100); - --spectrum-clear-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-clear-button-background-color-hover: var(--spectrum-gray-200); --spectrum-clear-button-background-color-down: var(--spectrum-gray-400); - --spectrum-clear-button-background-color-key-focus: var(--spectrum-gray-300); + --spectrum-clear-button-background-color-key-focus: var(--spectrum-gray-200); } } diff --git a/components/closebutton/themes/express.css b/components/closebutton/themes/express.css new file mode 100644 index 00000000000..aba9a602e0a --- /dev/null +++ b/components/closebutton/themes/express.css @@ -0,0 +1,19 @@ +/*! +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +@container (--system: express) { + .spectrum-CloseButton { + --spectrum-closebutton-background-color-default: transparent; + --spectrum-closebutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-closebutton-background-color-down: var(--spectrum-gray-400); + --spectrum-closebutton-background-color-focus: var(--spectrum-gray-200); + } +} diff --git a/components/closebutton/themes/spectrum.css b/components/closebutton/themes/spectrum.css index 25e56ac1b6c..7315c90a7ab 100644 --- a/components/closebutton/themes/spectrum.css +++ b/components/closebutton/themes/spectrum.css @@ -13,7 +13,7 @@ governing permissions and limitations under the License. .spectrum-CloseButton { --spectrum-closebutton-background-color-default: transparent; --spectrum-closebutton-background-color-hover: var(--spectrum-gray-100); - --spectrum-closebutton-background-color-down: var(--spectrum-gray-300); + --spectrum-closebutton-background-color-down: var(--spectrum-gray-200); --spectrum-closebutton-background-color-focus: var(--spectrum-gray-100); } } diff --git a/components/dial/index.css b/components/dial/index.css index de1088e4a65..7ea06d0bc76 100644 --- a/components/dial/index.css +++ b/components/dial/index.css @@ -13,8 +13,8 @@ governing permissions and limitations under the License. .spectrum-Dial { --spectrum-dial-background-color-default: var(--spectrum-gray-75); - --spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-300); - --spectrum-dial-border-color-disabled: var(--spectrum-gray-300); + --spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-200); + --spectrum-dial-border-color-disabled: var(--spectrum-gray-200); --spectrum-dial-handle-marker-color: var(--spectrum-gray-700); --spectrum-dial-border-color: var(--spectrum-gray-700); diff --git a/components/divider/index.css b/components/divider/index.css index 9f190d487f9..fe86dd2e275 100644 --- a/components/divider/index.css +++ b/components/divider/index.css @@ -18,8 +18,8 @@ governing permissions and limitations under the License. --spectrum-divider-background-color: var(--spectrum-divider-background-color-medium); /* background colors */ - --spectrum-divider-background-color-small: var(--spectrum-gray-300); - --spectrum-divider-background-color-medium: var(--spectrum-gray-300); + --spectrum-divider-background-color-small: var(--spectrum-gray-200); + --spectrum-divider-background-color-medium: var(--spectrum-gray-200); --spectrum-divider-background-color-large: var(--spectrum-gray-800); /* static white background colors */ diff --git a/components/dropzone/index.css b/components/dropzone/index.css index ebd15d793ac..625b41d4850 100644 --- a/components/dropzone/index.css +++ b/components/dropzone/index.css @@ -17,7 +17,7 @@ governing permissions and limitations under the License. --spectrum-drop-zone-border-width: var(--spectrum-border-width-200); --spectrum-drop-zone-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-drop-zone-border-color: var(--spectrum-gray-300); + --spectrum-drop-zone-border-color: var(--spectrum-gray-200); --spectrum-drop-zone-heading-font-family: var(--spectrum-sans-font-family-stack); --spectrum-drop-zone-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); diff --git a/components/picker/themes/express.css b/components/picker/themes/express.css index 5404b4b2e27..e0220f8ef1e 100644 --- a/components/picker/themes/express.css +++ b/components/picker/themes/express.css @@ -12,11 +12,11 @@ governing permissions and limitations under the License. @container (--system: express) { .spectrum-Picker { --spectrum-picker-background-color-default: var(--spectrum-gray-100); - --spectrum-picker-background-color-default-open: var(--spectrum-gray-300); - --spectrum-picker-background-color-hover: var(--spectrum-gray-300); - --spectrum-picker-background-color-hover-open: var(--spectrum-gray-300); + --spectrum-picker-background-color-default-open: var(--spectrum-gray-200); + --spectrum-picker-background-color-hover: var(--spectrum-gray-200); + --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200); --spectrum-picker-background-color-active: var(--spectrum-gray-400); - --spectrum-picker-background-color-key-focus: var(--spectrum-gray-300); + --spectrum-picker-background-color-key-focus: var(--spectrum-gray-200); --spectrum-picker-border-color-default: transparent; --spectrum-picker-border-color-default-open: transparent; diff --git a/components/picker/themes/spectrum.css b/components/picker/themes/spectrum.css index bbbcbd52b68..d6ed20d735a 100644 --- a/components/picker/themes/spectrum.css +++ b/components/picker/themes/spectrum.css @@ -13,7 +13,7 @@ governing permissions and limitations under the License. .spectrum-Picker { --spectrum-picker-background-color-default: var(--spectrum-gray-50); --spectrum-picker-background-color-default-open: var(--spectrum-gray-100); - --spectrum-picker-background-color-active: var(--spectrum-gray-300); + --spectrum-picker-background-color-active: var(--spectrum-gray-200); --spectrum-picker-background-color-hover: var(--spectrum-gray-100); --spectrum-picker-background-color-hover-open: var(--spectrum-gray-100); --spectrum-picker-background-color-key-focus: var(--spectrum-gray-100); diff --git a/components/pickerbutton/themes/express.css b/components/pickerbutton/themes/express.css index 595a3edd02c..e691b5e11f5 100644 --- a/components/pickerbutton/themes/express.css +++ b/components/pickerbutton/themes/express.css @@ -13,9 +13,9 @@ governing permissions and limitations under the License. @container (--system: express) { .spectrum-PickerButton { --spectrum-picker-button-background-color: var(--spectrum-gray-100); - --spectrum-picker-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-picker-button-background-color-hover: var(--spectrum-gray-200); --spectrum-picker-button-background-color-down: var(--spectrum-gray-400); - --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-300); + --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-200); --spectrum-picker-button-border-color: none; --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75); diff --git a/components/pickerbutton/themes/spectrum.css b/components/pickerbutton/themes/spectrum.css index 04e1c20632e..c1ade89850c 100644 --- a/components/pickerbutton/themes/spectrum.css +++ b/components/pickerbutton/themes/spectrum.css @@ -14,7 +14,7 @@ governing permissions and limitations under the License. .spectrum-PickerButton { --spectrum-picker-button-background-color: var(--spectrum-gray-50); --spectrum-picker-button-background-color-hover: var(--spectrum-gray-100); - --spectrum-picker-button-background-color-down: var(--spectrum-gray-300); + --spectrum-picker-button-background-color-down: var(--spectrum-gray-200); --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-100); --spectrum-picker-button-border-color: inherit; diff --git a/components/progressbar/index.css b/components/progressbar/index.css index 107df987f7f..694f4de6871 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -41,7 +41,7 @@ governing permissions and limitations under the License. /* Color */ --spectrum-progressbar-text-color: var(--spectrum-neutral-content-color-default); - --spectrum-progressbar-track-color: var(--spectrum-gray-300); + --spectrum-progressbar-track-color: var(--spectrum-gray-200); --spectrum-progressbar-fill-color: var(--spectrum-accent-color-900); --spectrum-progressbar-fill-color-positive: var(--spectrum-positive-visual-color); --spectrum-progressbar-fill-color-notice: var(--spectrum-notice-visual-color); diff --git a/components/progresscircle/index.css b/components/progresscircle/index.css index 3e063d6d017..a8489b842a4 100644 --- a/components/progresscircle/index.css +++ b/components/progresscircle/index.css @@ -14,7 +14,7 @@ governing permissions and limitations under the License. .spectrum-ProgressCircle { /* circle unfilled border color */ - --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300); + --spectrum-progress-circle-track-border-color: var(--spectrum-gray-200); /* circle progress fill border color */ --spectrum-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default); diff --git a/components/sidenav/index.css b/components/sidenav/index.css index c251f9c558b..2923ae4bda6 100644 --- a/components/sidenav/index.css +++ b/components/sidenav/index.css @@ -43,12 +43,12 @@ governing permissions and limitations under the License. --spectrum-sidenav-background-disabled: transparent; --spectrum-sidenav-background-default: transparent; --spectrum-sidenav-background-hover: var(--spectrum-gray-100); - --spectrum-sidenav-item-background-down: var(--spectrum-gray-300); + --spectrum-sidenav-item-background-down: var(--spectrum-gray-200); --spectrum-sidenav-background-key-focus: var(--spectrum-gray-100); --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-100); - --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-300); - --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-300); + --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-200); + --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-200); --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-100); /* color font */ diff --git a/components/slider/themes/express.css b/components/slider/themes/express.css index b6dce7508ac..3fcad937c44 100644 --- a/components/slider/themes/express.css +++ b/components/slider/themes/express.css @@ -13,7 +13,7 @@ governing permissions and limitations under the License. .spectrum-Slider { --spectrum-slider-track-color: var(--spectrum-gray-100); --spectrum-slider-track-fill-color: var(--spectrum-gray-600); - --spectrum-slider-ramp-track-color: var(--spectrum-gray-300); + --spectrum-slider-ramp-track-color: var(--spectrum-gray-200); --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-100); --spectrum-slider-handle-background-color: var(--spectrum-gray-25); diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css index 15c6937f917..5711d043d3f 100644 --- a/components/slider/themes/spectrum.css +++ b/components/slider/themes/spectrum.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. @container (--system: spectrum) { .spectrum-Slider { - --spectrum-slider-track-color: var(--spectrum-gray-300); + --spectrum-slider-track-color: var(--spectrum-gray-200); --spectrum-slider-track-fill-color: var(--spectrum-gray-700); --spectrum-slider-ramp-track-color: var(--spectrum-gray-400); --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-100); @@ -23,7 +23,7 @@ governing permissions and limitations under the License. --spectrum-slider-handle-border-color: var(--spectrum-gray-700); --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-75); - --spectrum-slider-tick-mark-color: var(--spectrum-gray-300); + --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800); --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); diff --git a/components/splitview/index.css b/components/splitview/index.css index fee02e6ea3e..08c895ed59d 100644 --- a/components/splitview/index.css +++ b/components/splitview/index.css @@ -17,7 +17,7 @@ governing permissions and limitations under the License. --spectrum-splitview-vertical-gripper-reset: 0; --spectrum-splitview-background-color: var(--spectrum-gray-75); - --spectrum-splitview-handle-background-color: var(--spectrum-gray-300); + --spectrum-splitview-handle-background-color: var(--spectrum-gray-200); --spectrum-splitview-handle-background-color-hover: var(--spectrum-gray-400); --spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800); --spectrum-splitview-handle-background-color-focus: var(--spectrum-focus-indicator-color); diff --git a/components/steplist/index.css b/components/steplist/index.css index 34d99296530..3fb83644cbb 100644 --- a/components/steplist/index.css +++ b/components/steplist/index.css @@ -46,9 +46,9 @@ governing permissions and limitations under the License. --spectrum-steplist-complete-marker-background-color: var(--spectrum-gray-600); - --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-300); + --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-200); - --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-300); + --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-200); --spectrum-steplist-complete-segment-border-block-end-color: var(--spectrum-gray-600); } diff --git a/components/stepper/themes/express.css b/components/stepper/themes/express.css index 2345c366bea..8ceecd77909 100644 --- a/components/stepper/themes/express.css +++ b/components/stepper/themes/express.css @@ -37,7 +37,7 @@ governing permissions and limitations under the License. --spectrum-stepper-border-color-keyboard-focus-invalid: transparent; --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-400); - --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-300); + --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200); &.is-disabled { --spectrum-stepper-buttons-background-color: var(--spectrum-disabled-background-color); diff --git a/components/stepper/themes/spectrum.css b/components/stepper/themes/spectrum.css index 44115eb3ac7..da0ed2a7976 100644 --- a/components/stepper/themes/spectrum.css +++ b/components/stepper/themes/spectrum.css @@ -36,7 +36,7 @@ governing permissions and limitations under the License. --spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); --spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); - --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-300); + --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-200); --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-100); } } diff --git a/components/switch/index.css b/components/switch/index.css index a0fd14e12e6..3fbfde97fd6 100644 --- a/components/switch/index.css +++ b/components/switch/index.css @@ -17,8 +17,8 @@ governing permissions and limitations under the License. --spectrum-switch-label-color-focus: var(--spectrum-neutral-content-color-key-focus); --spectrum-switch-label-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-switch-background-color: var(--spectrum-gray-300); - --spectrum-switch-background-color-disabled: var(--spectrum-gray-300); + --spectrum-switch-background-color: var(--spectrum-gray-200); + --spectrum-switch-background-color-disabled: var(--spectrum-gray-200); --spectrum-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color); --spectrum-switch-background-color-selected-default: var(--spectrum-neutral-background-color-selected-default); diff --git a/components/table/index.css b/components/table/index.css index fcb2e4c1f90..805e994a9bd 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -41,8 +41,8 @@ governing permissions and limitations under the License. --spectrum-table-row-line-height: var(--spectrum-line-height-100); /* General Colors */ - --spectrum-table-border-color: var(--spectrum-gray-300); - --spectrum-table-divider-color: var(--spectrum-gray-300); + --spectrum-table-border-color: var(--spectrum-gray-200); + --spectrum-table-divider-color: var(--spectrum-gray-200); --spectrum-table-header-background-color: var(--spectrum-transparent-white-100); --spectrum-table-header-text-color: var(--spectrum-body-color); diff --git a/components/tabs/index.css b/components/tabs/index.css index e0c1b791e93..042d668c728 100644 --- a/components/tabs/index.css +++ b/components/tabs/index.css @@ -62,7 +62,7 @@ governing permissions and limitations under the License. ); --spectrum-tabs-list-background-direction: top; - --spectrum-tabs-divider-background-color: var(--spectrum-gray-300); + --spectrum-tabs-divider-background-color: var(--spectrum-gray-200); --spectrum-tabs-divider-size: var(--spectrum-border-width-200); --spectrum-tabs-divider-border-radius: 1px; diff --git a/components/tag/themes/express.css b/components/tag/themes/express.css index c6e8d7f8d6b..37ea73d9fce 100644 --- a/components/tag/themes/express.css +++ b/components/tag/themes/express.css @@ -14,9 +14,9 @@ governing permissions and limitations under the License. .spectrum-Tag { /* border */ --spectrum-tag-background-color: transparent; - --spectrum-tag-background-color-hover: var(--spectrum-gray-300); + --spectrum-tag-background-color-hover: var(--spectrum-gray-200); --spectrum-tag-background-color-active: var(--spectrum-gray-400); - --spectrum-tag-background-color-focus: var(--spectrum-gray-300); + --spectrum-tag-background-color-focus: var(--spectrum-gray-200); /* express has pill style full corner radius */ --spectrum-tag-size-small-corner-radius: var(--spectrum-component-height-75); @@ -24,7 +24,7 @@ governing permissions and limitations under the License. --spectrum-tag-size-large-corner-radius: var(--spectrum-component-height-200); /* background */ - --spectrum-tag-border-color: var(--spectrum-gray-300); + --spectrum-tag-border-color: var(--spectrum-gray-200); --spectrum-tag-border-color-hover: var(--spectrum-gray-400); --spectrum-tag-border-color-active: var(--spectrum-gray-500); --spectrum-tag-border-color-focus: var(--spectrum-gray-400); From 14fa24708519905534e1391c5d60ae0d7325c326 Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Mon, 4 Mar 2024 15:40:53 -0500 Subject: [PATCH 6/6] chore(infieldbutton): gray-300 to gray-200 --- components/infieldbutton/themes/express.css | 4 ++-- components/infieldbutton/themes/spectrum.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/infieldbutton/themes/express.css b/components/infieldbutton/themes/express.css index 2f502f7c038..d338b38b2fa 100644 --- a/components/infieldbutton/themes/express.css +++ b/components/infieldbutton/themes/express.css @@ -22,8 +22,8 @@ governing permissions and limitations under the License. --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-corner-radius-75); --spectrum-infield-button-background-color: var(--spectrum-gray-100); - --spectrum-infield-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-infield-button-background-color-hover: var(--spectrum-gray-200); --spectrum-infield-button-background-color-down: var(--spectrum-gray-400); - --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-300); + --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200); } } diff --git a/components/infieldbutton/themes/spectrum.css b/components/infieldbutton/themes/spectrum.css index f264510427f..426cdd4c6bc 100644 --- a/components/infieldbutton/themes/spectrum.css +++ b/components/infieldbutton/themes/spectrum.css @@ -24,7 +24,7 @@ governing permissions and limitations under the License. --spectrum-infield-button-background-color: var(--spectrum-gray-50); --spectrum-infield-button-background-color-hover: var(--spectrum-gray-100); - --spectrum-infield-button-background-color-down: var(--spectrum-gray-300); + --spectrum-infield-button-background-color-down: var(--spectrum-gray-200); --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-100); } }