fix(slider): high contrast improvements for filled track (#3952)

* fix(slider): high contrast improvements for filled track * chore(slider): update version * ci: update golden images cache --------- Co-authored-by: Westbrook Johnson <westbrook.johnson@gmail.com>
adobe · Feb 12, 2024 · 782560d · 782560d
1 parent 485a67c
commit 782560d
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 16 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 05afdc523f9693f606a7aa613f6e6c5988c90161
+        default: 544d1b8027472155a6a451074fdbf96a5b4bf304
     wireit_cache_name:
         type: string
         default: wireit

diff --git a/packages/slider/package.json b/packages/slider/package.json
@@ -83,7 +83,7 @@
         "@spectrum-web-components/theme": "^0.40.5"
     },
     "devDependencies": {
-        "@spectrum-css/slider": "^4.3.0"
+        "@spectrum-css/slider": "^4.3.2"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/slider/src/spectrum-slider.css b/packages/slider/src/spectrum-slider.css
@@ -716,6 +716,12 @@ governing permissions and limitations under the License.
     overflow: hidden;
 }
 .track:before {
+    background: var(
+        --highcontrast-slider-track-color-static,
+        var(--mod-slider-track-color, var(--spectrum-slider-track-color))
+    );
+}
+.track:not(:has(~ .spectrum-Slider-fill)):before {
     background: var(
         --highcontrast-slider-track-color,
         var(--mod-slider-track-color, var(--spectrum-slider-track-color))
@@ -732,7 +738,7 @@ governing permissions and limitations under the License.
 }
 :host([variant='filled']) .track:first-child:before {
     background: var(
-        --highcontrast-slider-track-fill-color,
+        --highcontrast-slider-filled-track-fill-color,
         var(
             --mod-slider-track-fill-color,
             var(--spectrum-slider-track-fill-color)
@@ -741,7 +747,7 @@ governing permissions and limitations under the License.
 }
 .fill:before {
     background: var(
-        --highcontrast-slider-track-fill-color,
+        --highcontrast-slider-filled-track-fill-color,
         var(
             --mod-slider-track-fill-color,
             var(--spectrum-slider-track-fill-color)
@@ -847,9 +853,9 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host([variant='range']) .track:not(:first-of-type):not(:last-of-type):before {
+:host([variant='range']) .track:not(:first-of-type, :last-of-type):before {
     background: var(
-        --highcontrast-slider-track-fill-icolor,
+        --highcontrast-slider-filled-track-fill-color,
         var(
             --mod-slider-track-fill-color,
             var(--spectrum-slider-track-fill-color)
@@ -976,7 +982,7 @@ governing permissions and limitations under the License.
     );
 }
 :host([disabled][variant='range'])
-    .track:not(:first-of-type):not(:last-of-type):before {
+    .track:not(:first-of-type, :last-of-type):before {
     background: var(
         --highcontrast-slider-track-color-disabled,
         var(
@@ -988,7 +994,9 @@ governing permissions and limitations under the License.
 @media (forced-colors: active) {
     :host {
         --highcontrast-slider-track-color: ButtonText;
+        --highcontrast-slider-track-color-static: ButtonText;
         --highcontrast-slider-track-fill-color: ButtonText;
+        --highcontrast-slider-filled-track-fill-color: Highlight;
         --highcontrast-slider-ramp-track-color: ButtonText;
         --highcontrast-slider-ramp-track-color-disabled: GrayText;
         --highcontrast-slider-tick-mark-color: ButtonText;
@@ -1027,17 +1035,21 @@ governing permissions and limitations under the License.
     :host([variant='ramp']) .handle {
         forced-color-adjust: none;
     }
-    :host:not(.is-disabled) #controls.handle-highlight,
-    :host:not(.is-disabled) #controls:active,
-    :host:not(.is-disabled) #controls:focus-within {
+    :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range)
+        #controls.handle-highlight,
+    :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range)
+        #controls:active,
+    :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range)
+        #controls:focus-within {
         --highcontrast-slider-track-fill-color: Highlight;
         --highcontrast-slider-track-color: Highlight;
         --highcontrast-slider-handle-border-color: Highlight;
         --highcontrast-slider-ramp-track-color: Highlight;
         --highcontrast-slider-tick-mark-color: Highlight;
     }
     @media (hover: hover) {
-        :host:not(.is-disabled) #controls:hover {
+        :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range)
+            #controls:hover {
             --highcontrast-slider-track-fill-color: Highlight;
             --highcontrast-slider-track-color: Highlight;
             --highcontrast-slider-handle-border-color: Highlight;

diff --git a/yarn.lock b/yarn.lock
@@ -5887,7 +5887,7 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
-"@playwright/test@1.41.2", "@playwright/test@^1.41.2":
+"@playwright/test@^1.41.2":
   version "1.41.2"
   resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.41.2.tgz#bd9db40177f8fd442e16e14e0389d23751cdfc54"
   integrity sha512-qQB9h7KbibJzrDpkXkYvsmiDJK14FULCCZgEcoe2AvFAS64oCirWTwzTlAYEbKaRxWs5TFesE1Na6izMv3HfGg==
@@ -6861,10 +6861,10 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-4.2.0.tgz#078cafc2788f5f43ac070f28ccc70e58fd07fec7"
   integrity sha512-OTykAnooYpSVJRyeQi/pprcS/A2q8jqp+dlQOfHqkw5Zmyij3Qsv5qIjwzPwscfxwChuhla/hEI5aqyIuH3MYQ==
 
-"@spectrum-css/slider@^4.3.0":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/slider/-/slider-4.3.1.tgz#f1f97755d7d443eb89f596f46009d246ba787ea9"
-  integrity sha512-r5tYFuAGi5qom9rYD7hgG/CBA/PmNe4KGtf3GNyXv3+jVDQaFIgv2by7eNBsvBAhoKR7xB1u7rqHh/dTmfSobg==
+"@spectrum-css/slider@^4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/slider/-/slider-4.3.2.tgz#75d83230b81f3e54bc97f2c88298848bade538d8"
+  integrity sha512-mrq8d/9v8wn+UDOINkWQkYeJJi3BmH7w6Taj8l6fswBFFNQ89MtZ2jBJuwWs74hGaaletpYj0Y+kchNQ5LFgnA==
 
 "@spectrum-css/splitbutton@^8.1.0":
   version "8.1.0"