From 5150c9ec8d3237c538f0458fe2c05297b694af64 Mon Sep 17 00:00:00 2001
From: Patrick Fulton <pfulton@adobe.com>
Date: Mon, 6 Feb 2023 17:22:23 -0500
Subject: [PATCH 1/2] feat(slider): use spectrum-tokens

---
 packages/field-label/package.json             |    2 +-
 .../field-label/src/spectrum-field-label.css  |   43 +-
 packages/slider/package.json                  |    2 +-
 packages/slider/src/HandleController.ts       |    4 +-
 packages/slider/src/slider.css                |   64 -
 packages/slider/src/spectrum-slider.css       | 1376 +++++++++--------
 packages/slider/stories/slider.stories.ts     |   13 +-
 scripts/spectrum-tokens.js                    |    1 +
 tools/styles/express/spectrum-core-global.css |   28 -
 tools/styles/express/spectrum-theme-dark.css  |  153 --
 tools/styles/express/spectrum-theme-light.css |  153 --
 tools/styles/spectrum-core-global.css         |    3 -
 tools/styles/spectrum-theme-dark.css          |  153 --
 tools/styles/spectrum-theme-darkest.css       |  153 --
 tools/styles/spectrum-theme-light.css         |  153 --
 tools/styles/tokens/express/global-vars.css   |   44 +
 tools/styles/tokens/spectrum/global-vars.css  |   33 +
 yarn.lock                                     |   16 +-
 18 files changed, 847 insertions(+), 1547 deletions(-)

diff --git a/packages/field-label/package.json b/packages/field-label/package.json
index e63b148ed68..bce7950608b 100644
--- a/packages/field-label/package.json
+++ b/packages/field-label/package.json
@@ -64,7 +64,7 @@
         "@spectrum-web-components/shared": "^0.31.0"
     },
     "devDependencies": {
-        "@spectrum-css/fieldlabel": "^5.0.15"
+        "@spectrum-css/fieldlabel": "^7.0.1"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
diff --git a/packages/field-label/src/spectrum-field-label.css b/packages/field-label/src/spectrum-field-label.css
index 91f4fd2a511..63183fecdd2 100644
--- a/packages/field-label/src/spectrum-field-label.css
+++ b/packages/field-label/src/spectrum-field-label.css
@@ -12,6 +12,7 @@ governing permissions and limitations under the License.
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 :host {
+    --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
     --spectrum-fieldlabel-color: var(
         --spectrum-neutral-subdued-content-color-default
     );
@@ -21,15 +22,17 @@ governing permissions and limitations under the License.
     --spectrum-field-label-text-to-asterisk: var(
         --spectrum-field-label-text-to-asterisk-medium
     );
+    --spectrum-fieldlabel-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100);
+    --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100);
 }
 :host([size='s']) {
+    --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
     --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75);
     --spectrum-fieldlabel-bottom-to-text: var(
         --spectrum-component-bottom-to-text-75
     );
     --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
-    --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100);
-    --spectrum-fieldlabel-line-height-cjk: var(--spectrum-line-height-cjk-100);
     --spectrum-fieldlabel-side-padding-top: var(
         --spectrum-component-top-to-text-75
     );
@@ -42,13 +45,12 @@ governing permissions and limitations under the License.
     );
 }
 :host([size='m']) {
+    --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
     --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75);
     --spectrum-fieldlabel-bottom-to-text: var(
         --spectrum-component-bottom-to-text-75
     );
     --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
-    --spectrum-fieldlabel-line-height: var(--spectrum-line-height-200);
-    --spectrum-fieldlabel-line-height-cjk: var(--spectrum-line-height-cjk-200);
     --spectrum-fieldlabel-side-padding-top: var(
         --spectrum-component-top-to-text-75
     );
@@ -61,6 +63,7 @@ governing permissions and limitations under the License.
     );
 }
 :host([size='l']) {
+    --spectrum-fieldlabel-min-height: var(--spectrum-component-height-100);
     --spectrum-fieldlabel-top-to-text: var(
         --spectrum-component-top-to-text-100
     );
@@ -68,8 +71,6 @@ governing permissions and limitations under the License.
         --spectrum-component-bottom-to-text-100
     );
     --spectrum-fieldlabel-font-size: var(--spectrum-font-size-100);
-    --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100);
-    --spectrum-fieldlabel-line-height-cjk: var(--spectrum-line-height-cjk-100);
     --spectrum-fieldlabel-side-padding-top: var(
         --spectrum-component-top-to-text-100
     );
@@ -82,6 +83,7 @@ governing permissions and limitations under the License.
     );
 }
 :host([size='xl']) {
+    --spectrum-fieldlabel-min-height: var(--spectrum-component-height-200);
     --spectrum-fieldlabel-top-to-text: var(
         --spectrum-component-top-to-text-200
     );
@@ -89,8 +91,6 @@ governing permissions and limitations under the License.
         --spectrum-component-bottom-to-text-200
     );
     --spectrum-fieldlabel-font-size: var(--spectrum-font-size-200);
-    --spectrum-fieldlabel-line-height: var(--spectrum-line-height-200);
-    --spectrum-fieldlabel-line-height-cjk: var(--spectrum-line-height-cjk-200);
     --spectrum-fieldlabel-side-padding-top: var(
         --spectrum-component-top-to-text-200
     );
@@ -114,13 +114,17 @@ governing permissions and limitations under the License.
         var(--spectrum-fieldlabel-font-size)
     );
     font-weight: var(
-        --mod-font-weight-regular,
-        var(--spectrum-font-weight-regular)
+        --mod-fieldlabel-font-weight,
+        var(--spectrum-fieldlabel-font-weight)
     );
     line-height: var(
         --mod-fieldlabel-line-height,
         var(--spectrum-fieldlabel-line-height)
     );
+    min-block-size: var(
+        --mod-fieldlabel-min-height,
+        var(--spectrum-fieldlabel-min-height)
+    );
     padding-block: var(--spectrum-fieldlabel-top-to-text)
         var(--spectrum-fieldlabel-bottom-to-text);
     padding-inline: 0;
@@ -183,13 +187,24 @@ governing permissions and limitations under the License.
 }
 :host([disabled]) {
     color: var(
-        --mod-disabled-content-color,
-        var(--spectrum-disabled-content-color)
+        --highcontrast-disabled-content-color,
+        var(
+            --mod-disabled-content-color,
+            var(--spectrum-disabled-content-color)
+        )
     );
 }
 :host([disabled]) .required-icon {
     color: var(
-        --mod-disabled-content-color,
-        var(--spectrum-disabled-content-color)
+        --highcontrast-disabled-content-color,
+        var(
+            --mod-disabled-content-color,
+            var(--spectrum-disabled-content-color)
+        )
     );
 }
+@media (forced-colors: active) {
+    :host {
+        --highcontrast-disabled-content-color: GrayText;
+    }
+}
diff --git a/packages/slider/package.json b/packages/slider/package.json
index 93d245d9c00..a55ac46622a 100644
--- a/packages/slider/package.json
+++ b/packages/slider/package.json
@@ -83,7 +83,7 @@
         "@spectrum-web-components/theme": "^0.31.0"
     },
     "devDependencies": {
-        "@spectrum-css/slider": "^3.1.25"
+        "@spectrum-css/slider": "^4.0.1"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
diff --git a/packages/slider/src/HandleController.ts b/packages/slider/src/HandleController.ts
index 2d45ca4b86a..dd839ce74b3 100644
--- a/packages/slider/src/HandleController.ts
+++ b/packages/slider/src/HandleController.ts
@@ -492,8 +492,8 @@ export class HandleController implements Controller {
             }%`,
             'z-index': zIndex.toString(),
             // Allow setting background per-handle
-            'background-color': `var(--spectrum-slider-handle-background-color-${index}, var(--spectrum-slider-handle-default-background-color))`,
-            'border-color': `var(--spectrum-slider-handle-border-color-${index}, var(-spectrum-slider-handle-default-border-color))`,
+            'background-color': `var(--spectrum-slider-handle-background-color-${index}, var(--spectrum-slider-handle-background-color))`,
+            'border-color': `var(--spectrum-slider-handle-border-color-${index}, var(--spectrum-slider-handle-border-color))`,
         };
         const ariaLabelledBy = isMultiHandle ? `label input-${index}` : 'label';
         return html`
diff --git a/packages/slider/src/slider.css b/packages/slider/src/slider.css
index 15a285d4384..b5bb5f16503 100644
--- a/packages/slider/src/slider.css
+++ b/packages/slider/src/slider.css
@@ -12,17 +12,6 @@ governing permissions and limitations under the License.
 
 @import './spectrum-slider.css';
 
-:host {
-    --spectrum-slider-handle-default-background-color: var(
-        --spectrum-slider-m-handle-background-color,
-        var(--spectrum-alias-background-color-transparent)
-    );
-    --spectrum-slider-handle-default-border-color: var(
-        --spectrum-slider-m-handle-border-color,
-        var(--spectrum-global-color-gray-700)
-    );
-}
-
 sp-field-label {
     padding-top: 0;
     padding-bottom: 0;
@@ -133,30 +122,6 @@ sp-field-label {
     background-size: var(--spectrum-slider-track-background-size) !important;
 }
 
-:host([dir='ltr']) .track:before {
-    background: var(
-        --spectrum-slider-m-track-color,
-        var(
-            --spectrum-slider-track-color,
-            var(--spectrum-global-color-gray-300)
-        )
-    );
-}
-
-:host([dir='rtl']) .track:before {
-    /* .spectrum-Slider-track:before */
-    background: var(
-        --spectrum-slider-m-track-color,
-        var(
-            --spectrum-slider-track-color-rtl,
-            var(
-                --spectrum-slider-track-color,
-                var(--spectrum-global-color-gray-300)
-            )
-        )
-    );
-}
-
 :host([dir='ltr']) .track:last-of-type:before {
     background-position: 100%;
 }
@@ -165,17 +130,6 @@ sp-field-label {
     background-position: 100%;
 }
 
-.track:not(:first-of-type, :last-of-type) {
-    padding-left: calc(
-        var(--spectrum-slider-handle-width) / 2 +
-            var(--spectrum-slider-track-handleoffset)
-    ) !important;
-    padding-right: calc(
-        var(--spectrum-slider-handle-width) / 2 +
-            var(--spectrum-slider-track-handleoffset)
-    ) !important;
-}
-
 :host([dir='ltr']) .track:not(:first-of-type, :last-of-type) {
     left: var(--spectrum-slider-track-segment-position);
 }
@@ -206,21 +160,3 @@ sp-field-label {
     padding: 0;
     margin: 0;
 }
-
-/**
- * Start workaround to fastfoward fixes in https://github.com/adobe/spectrum-web-components/issues/2905
- */
-
-#track {
-    cursor: pointer;
-}
-
-.handle.dragging,
-.handle.handle-highlight,
-.handle:active {
-    border-width: var(--spectrum-slider-handle-border-width-down-medium);
-}
-
-/**
- * End workaround to fastfoward fixes in https://github.com/adobe/spectrum-web-components/issues/2905
- */
diff --git a/packages/slider/src/spectrum-slider.css b/packages/slider/src/spectrum-slider.css
index 8205f062fba..883635b26ff 100644
--- a/packages/slider/src/spectrum-slider.css
+++ b/packages/slider/src/spectrum-slider.css
@@ -12,556 +12,419 @@ governing permissions and limitations under the License.
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 :host {
-    --spectrum-slider-tick-mark-width: var(
-        --spectrum-slider-m-tick-mark-width,
-        var(--spectrum-alias-border-size-thick)
+    --spectrum-slider-font-size: var(--spectrum-font-size-75);
+    --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium);
+    --spectrum-slider-control-height: var(--spectrum-component-height-100);
+    --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
+    --spectrum-slider-handle-border-width-down: var(
+        --spectrum-slider-handle-border-width-down-medium
     );
-    --spectrum-slider-tick-mark-height: var(
-        --spectrum-slider-m-tick-mark-height,
-        var(--spectrum-global-dimension-size-125)
+    --spectrum-slider-label-top-to-text: var(
+        --spectrum-component-top-to-text-75
     );
-    --spectrum-slider-tick-mark-border-radius: var(
-        --spectrum-slider-m-tick-mark-border-radius,
-        var(--spectrum-alias-border-radius-xsmall)
+    --spectrum-slider-control-to-field-label: var(
+        --spectrum-slider-control-to-field-label-medium
     );
-    --spectrum-slider-track-border-radius: var(
-        --spectrum-slider-m-track-border-radius,
-        var(--spectrum-global-dimension-static-size-10)
+}
+.spectrum-Slider--sizeS {
+    --spectrum-slider-font-size: var(--spectrum-font-size-75);
+    --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small);
+    --spectrum-slider-control-height: var(--spectrum-component-height-75);
+    --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
+    --spectrum-slider-handle-border-width-down: var(
+        --spectrum-slider-handle-border-width-down-small
     );
-    --spectrum-slider-track-height: var(
-        --spectrum-slider-m-track-height,
-        var(--spectrum-alias-border-size-thick)
+    --spectrum-slider-label-top-to-text: var(
+        --spectrum-component-top-to-text-75
     );
-    --spectrum-slider-handle-width: var(
-        --spectrum-slider-m-handle-width,
-        var(--spectrum-alias-control-two-size-l)
+    --spectrum-slider-control-to-field-label: var(
+        --spectrum-slider-control-to-field-label-small
     );
-    --spectrum-slider-handle-height: var(
-        --spectrum-slider-m-handle-height,
-        var(--spectrum-alias-control-two-size-l)
+}
+.spectrum-Slider--sizeL {
+    --spectrum-slider-font-size: var(--spectrum-font-size-100);
+    --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large);
+    --spectrum-slider-control-height: var(--spectrum-component-height-200);
+    --spectrum-slider-handle-border-radius: calc(
+        var(--spectrum-corner-radius-200) * 4
     );
-    --spectrum-slider-handle-gap: var(
-        --spectrum-slider-m-handle-gap,
-        var(--spectrum-alias-border-size-thicker)
+    --spectrum-slider-handle-border-width-down: var(
+        --spectrum-slider-handle-border-width-down-large
     );
-    --spectrum-slider-handle-border-size: var(
-        --spectrum-slider-m-handle-border-size,
-        var(--spectrum-alias-border-size-thick)
+    --spectrum-slider-label-top-to-text: var(
+        --spectrum-component-top-to-text-100
     );
-    --spectrum-slider-handle-border-radius: var(
-        --spectrum-slider-m-handle-border-radius,
-        var(--spectrum-global-dimension-size-100)
+    --spectrum-slider-control-to-field-label: var(
+        --spectrum-slider-control-to-field-label-large
     );
-    --spectrum-slider-height: var(
-        --spectrum-slider-m-height,
-        var(--spectrum-global-dimension-size-400)
+}
+.spectrum-Slider--sizeXL {
+    --spectrum-slider-font-size: var(--spectrum-font-size-200);
+    --spectrum-slider-handle-size: var(
+        --spectrum-slider-handle-size-extra-large
     );
-    --spectrum-slider-min-width: var(
-        --spectrum-slider-m-min-width,
-        var(--spectrum-global-dimension-size-1250)
+    --spectrum-slider-control-height: var(--spectrum-component-height-300);
+    --spectrum-slider-handle-border-radius: calc(
+        var(--spectrum-corner-radius-200) * 4
     );
-    --spectrum-slider-animation-duration: var(
-        --spectrum-slider-m-animation-duration,
-        var(--spectrum-global-animation-duration-100)
+    --spectrum-slider-handle-border-width-down: var(
+        --spectrum-slider-handle-border-width-down-extra-large
     );
-    --spectrum-slider-ramp-track-color-disabled: var(
-        --spectrum-slider-m-ramp-track-color-disabled,
-        var(--spectrum-global-color-gray-300)
+    --spectrum-slider-label-top-to-text: var(
+        --spectrum-component-top-to-text-200
     );
-    --spectrum-slider-ramp-track-height: var(
-        --spectrum-slider-m-ramp-track-height,
-        var(--spectrum-global-dimension-size-200)
+    --spectrum-slider-control-to-field-label: var(
+        --spectrum-slider-control-to-field-label-extra-large
+    );
+}
+:host {
+    --spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100);
+    --spectrum-slider-min-size: var(--spectrum-spacing-900);
+    --spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75);
+    --spectrum-slider-label-margin-start: var(--spectrum-spacing-300);
+    --spectrum-slider-handle-border-width: var(--spectrum-border-width-200);
+    --spectrum-slider-handle-margin-left: calc(
+        var(--spectrum-slider-handle-size) / -2
     );
-    --spectrum-slider-label-gap-y: var(--spectrum-global-dimension-size-85);
     --spectrum-slider-controls-margin: calc(
-        var(--spectrum-slider-handle-width) / 2
+        var(--spectrum-slider-handle-size) / 2
     );
     --spectrum-slider-track-margin-offset: calc(
         var(--spectrum-slider-controls-margin) * -1
     );
-    --spectrum-slider-handle-margin-top: calc(
-        var(--spectrum-slider-handle-width) / -2
-    );
-    --spectrum-slider-handle-margin-left: calc(
-        var(--spectrum-slider-handle-width) / -2
-    );
-    --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap);
     --spectrum-slider-track-middle-handleoffset: calc(
-        var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-width) /
+        var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-size) /
             2
     );
-    --spectrum-slider-input-top: calc(
-        var(--spectrum-slider-handle-margin-top) / 4
+    --spectrum-slider-input-top-size: calc(
+        var(--spectrum-slider-handle-size) / -2 / 4
+    );
+    --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-track-color-disabled: var(
+        --spectrum-disabled-background-color
+    );
+    --spectrum-slider-track-fill-color-disabled: var(
+        --spectrum-disabled-background-color
+    );
+    --spectrum-slider-handle-border-color-disabled: var(
+        --spectrum-disabled-border-color
     );
+    --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-input-left: calc(
         var(--spectrum-slider-handle-margin-left) / 4
     );
-    --spectrum-slider-ramp-margin-top: 0;
+    --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap);
     --spectrum-slider-range-track-reset: 0;
-    --spectrum-slider-label-margin-bottom: -3px;
-    --spectrum-slider-label-gap-x: var(
-        --spectrum-alias-item-control-gap-m,
-        var(--spectrum-global-dimension-size-125)
-    );
-    --spectrum-slider-label-text-line-height: var(
-        --spectrum-global-font-line-height-small,
-        1.3
-    );
 }
 :host {
     display: block;
-    min-height: var(--spectrum-slider-height);
-    min-width: var(--spectrum-slider-min-width);
+    min-inline-size: var(
+        --mod-slider-min-size,
+        var(--spectrum-slider-min-size)
+    );
     position: relative;
     -webkit-user-select: none;
     user-select: none;
     z-index: 1;
 }
-:host([dir='ltr']) #controls {
-    margin-left: var(--spectrum-slider-controls-margin);
-}
-:host([dir='rtl']) #controls {
-    margin-right: var(--spectrum-slider-controls-margin);
-}
 #controls {
+    block-size: var(
+        --mod-slider-control-height,
+        var(--spectrum-slider-control-height)
+    );
     box-sizing: border-box;
+    cursor: pointer;
     display: inline-block;
-    min-height: var(--spectrum-slider-height);
+    inline-size: calc(
+        100% -
+            var(
+                --mod-slider-controls-margin,
+                var(--spectrum-slider-controls-margin)
+            ) * 2
+    );
+    margin-inline-start: var(
+        --mod-slider-controls-margin,
+        var(--spectrum-slider-controls-margin)
+    );
     position: relative;
     vertical-align: top;
-    width: calc(100% - var(--spectrum-slider-controls-margin) * 2);
     z-index: auto;
 }
-:host([dir='ltr']) #fill,
-:host([dir='ltr']) .track {
-    left: 0;
-}
-:host([dir='rtl']) #fill,
-:host([dir='rtl']) .track {
-    right: 0;
-}
-:host([dir='ltr']) #fill,
-:host([dir='ltr']) .track {
-    right: auto;
+#label-container + #controls {
+    margin-block-start: calc(
+        var(--spectrum-slider-control-to-field-label) * -1
+    );
 }
-:host([dir='rtl']) #fill,
-:host([dir='rtl']) .track {
-    left: auto;
+:host([variant='tick']) {
+    margin-block-end: var(
+        --mod-slider-control-height,
+        var(--spectrum-slider-control-height)
+    );
 }
 #fill,
 .track {
+    block-size: var(
+        --mod-slider-track-fill-thickness,
+        var(--spectrum-slider-track-fill-thickness)
+    );
     box-sizing: border-box;
-    height: var(--spectrum-slider-track-height);
-    margin-top: calc(var(--spectrum-slider-track-height) / -2);
+    inset-block-start: calc(
+        var(--mod-slider-control-height, var(--spectrum-slider-control-height)) /
+            2 -
+            var(
+                --mod-slider-track-fill-thickness,
+                var(--spectrum-slider-track-fill-thickness)
+            ) / 2
+    );
+    inset-inline: 0 auto;
+    margin-inline-start: var(
+        --mod-slider-track-margin-offset,
+        var(--spectrum-slider-track-margin-offset)
+    );
+    padding-block: 0;
+    padding-inline-end: var(
+        --mod-slider-handle-gap,
+        var(--spectrum-slider-handle-gap)
+    );
+    padding-inline-start: 0;
     pointer-events: none;
     position: absolute;
-    top: calc(var(--spectrum-slider-height) / 2);
     z-index: 1;
 }
-:host([dir='ltr']) #fill,
-:host([dir='ltr']) .track {
-    padding-left: 0;
-    padding-right: var(--spectrum-slider-track-handleoffset);
-}
-:host([dir='rtl']) #fill,
-:host([dir='rtl']) .track {
-    padding-left: var(--spectrum-slider-track-handleoffset);
-    padding-right: 0;
-}
-:host([dir='ltr']) #fill,
-:host([dir='ltr']) .track {
-    margin-left: var(--spectrum-slider-track-margin-offset);
-}
-:host([dir='rtl']) #fill,
-:host([dir='rtl']) .track {
-    margin-right: var(--spectrum-slider-track-margin-offset);
-}
-#fill,
-.track {
-    padding-bottom: 0;
-    padding-top: 0;
-}
-:host([dir='ltr']) #fill:before,
-:host([dir='ltr']) .track:before {
-    border-top-left-radius: 0;
-}
-:host([dir='rtl']) #fill:before,
-:host([dir='rtl']) .track:before {
-    border-top-right-radius: 0;
-}
-:host([dir='ltr']) #fill:before,
-:host([dir='ltr']) .track:before {
-    border-bottom-left-radius: 0;
-}
-:host([dir='rtl']) #fill:before,
-:host([dir='rtl']) .track:before {
-    border-bottom-right-radius: 0;
-}
-:host([dir='ltr']) #fill:before,
-:host([dir='ltr']) .track:before {
-    border-top-right-radius: 0;
-}
-:host([dir='rtl']) #fill:before,
-:host([dir='rtl']) .track:before {
-    border-top-left-radius: 0;
-}
-:host([dir='ltr']) #fill:before,
-:host([dir='ltr']) .track:before {
-    border-bottom-right-radius: 0;
-}
-:host([dir='rtl']) #fill:before,
-:host([dir='rtl']) .track:before {
-    border-bottom-left-radius: 0;
-}
 #fill:before,
 .track:before {
+    block-size: 100%;
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
+    border-start-end-radius: 0;
+    border-start-start-radius: 0;
     content: '';
     display: block;
-    height: 100%;
-}
-:host([dir='ltr']) .track:first-of-type:before {
-    border-top-left-radius: var(--spectrum-slider-track-border-radius);
-}
-:host([dir='rtl']) .track:first-of-type:before {
-    border-top-right-radius: var(--spectrum-slider-track-border-radius);
-}
-:host([dir='ltr']) .track:first-of-type:before {
-    border-bottom-left-radius: var(--spectrum-slider-track-border-radius);
-}
-:host([dir='rtl']) .track:first-of-type:before {
-    border-bottom-right-radius: var(--spectrum-slider-track-border-radius);
-}
-:host([dir='ltr']) .track:first-of-type:before {
-    border-top-right-radius: 0;
-}
-:host([dir='rtl']) .track:first-of-type:before {
-    border-top-left-radius: 0;
-}
-:host([dir='ltr']) .track:first-of-type:before {
-    border-bottom-right-radius: 0;
 }
-:host([dir='rtl']) .track:first-of-type:before {
-    border-bottom-left-radius: 0;
-}
-:host([dir='ltr']) .track:last-of-type:before {
-    border-top-left-radius: 0;
-}
-:host([dir='rtl']) .track:last-of-type:before {
-    border-top-right-radius: 0;
-}
-:host([dir='ltr']) .track:last-of-type:before {
-    border-bottom-left-radius: 0;
-}
-:host([dir='rtl']) .track:last-of-type:before {
-    border-bottom-right-radius: 0;
-}
-:host([dir='ltr']) .track:last-of-type:before {
-    border-top-right-radius: var(--spectrum-slider-track-border-radius);
-}
-:host([dir='rtl']) .track:last-of-type:before {
-    border-top-left-radius: var(--spectrum-slider-track-border-radius);
-}
-:host([dir='ltr']) .track:last-of-type:before {
-    border-bottom-right-radius: var(--spectrum-slider-track-border-radius);
-}
-:host([dir='rtl']) .track:last-of-type:before {
-    border-bottom-left-radius: var(--spectrum-slider-track-border-radius);
-}
-:host([dir='ltr']) .track ~ .track {
-    left: auto;
-}
-:host([dir='rtl']) .track ~ .track {
-    right: auto;
-}
-:host([dir='ltr']) .track ~ .track {
-    right: var(--spectrum-slider-range-track-reset);
-}
-:host([dir='rtl']) .track ~ .track {
-    left: var(--spectrum-slider-range-track-reset);
-}
-:host([dir='ltr']) .track ~ .track {
-    padding-left: var(--spectrum-slider-track-handleoffset);
-    padding-right: 0;
-}
-:host([dir='rtl']) .track ~ .track {
-    padding-left: 0;
-    padding-right: var(--spectrum-slider-track-handleoffset);
-}
-:host([dir='ltr']) .track ~ .track {
-    margin-left: var(--spectrum-slider-range-track-reset);
-}
-:host([dir='rtl']) .track ~ .track {
-    margin-right: var(--spectrum-slider-range-track-reset);
-}
-:host([dir='ltr']) .track ~ .track {
-    margin-right: var(--spectrum-slider-track-margin-offset);
-}
-:host([dir='rtl']) .track ~ .track {
-    margin-left: var(--spectrum-slider-track-margin-offset);
-}
-.track ~ .track {
-    padding-bottom: 0;
-    padding-top: 0;
-}
-:host([dir='ltr']) #fill {
-    margin-left: 0;
-}
-:host([dir='rtl']) #fill {
-    margin-right: 0;
-}
-:host([dir='ltr']) #fill {
-    padding-left: calc(
-        var(--spectrum-slider-controls-margin) +
-            var(--spectrum-slider-track-handleoffset)
+.track:first-of-type:before {
+    border-end-start-radius: var(
+        --mod-slider-track-corner-radius,
+        var(--spectrum-slider-track-corner-radius)
     );
-    padding-right: 0;
-}
-:host([dir='rtl']) #fill {
-    padding-left: 0;
-    padding-right: calc(
-        var(--spectrum-slider-controls-margin) +
-            var(--spectrum-slider-track-handleoffset)
+    border-start-start-radius: var(
+        --mod-slider-track-corner-radius,
+        var(--spectrum-slider-track-corner-radius)
     );
 }
-#fill {
-    padding-bottom: 0;
-    padding-top: 0;
-}
-:host([dir='ltr']) .spectrum-Slider-fill--right {
-    padding-left: 0;
-    padding-right: calc(
-        var(--spectrum-slider-controls-margin) +
-            var(--spectrum-slider-track-handleoffset)
+.track:last-of-type:before {
+    border-end-end-radius: var(
+        --mod-slider-track-corner-radius,
+        var(--spectrum-slider-track-corner-radius)
+    );
+    border-start-end-radius: var(
+        --mod-slider-track-corner-radius,
+        var(--spectrum-slider-track-corner-radius)
     );
 }
-:host([dir='rtl']) .spectrum-Slider-fill--right {
-    padding-left: calc(
-        var(--spectrum-slider-controls-margin) +
-            var(--spectrum-slider-track-handleoffset)
+.track ~ .track {
+    inset-inline-end: var(
+        --mod-slider-range-track-reset,
+        var(--spectrum-slider-range-track-reset)
+    );
+    inset-inline-start: auto;
+    margin-inline-end: var(
+        --mod-slider-track-margin-offset,
+        var(--spectrum-slider-track-margin-offset)
+    );
+    margin-inline-start: var(
+        --mod-slider-range-track-reset,
+        var(--spectrum-slider-range-track-reset)
+    );
+    padding-block: 0;
+    padding-inline-end: 0;
+    padding-inline-start: var(
+        --mod-slider-track-handleoffset,
+        var(--spectrum-slider-track-handleoffset)
+    );
+}
+:host([variant='range']) .track ~ .track {
+    inset-inline: auto;
+    margin-inline: var(
+        --mod-slider-range-track-reset,
+        var(--spectrum-slider-range-track-reset)
+    );
+    padding-inline: var(
+            --mod-slider-track-middle-handleoffset,
+            var(--spectrum-slider-track-middle-handleoffset)
+        )
+        var(
+            --mod-slider-track-middle-handleoffset,
+            var(--spectrum-slider-track-middle-handleoffset)
+        );
+}
+#fill {
+    margin-inline-start: 0;
+    padding-block: 0;
+    padding-inline-end: 0;
+    padding-inline-start: calc(
+        var(
+                --mod-slider-controls-margin,
+                var(--spectrum-slider-controls-margin)
+            ) +
+            var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap))
     );
-    padding-right: 0;
 }
 .spectrum-Slider-fill--right {
-    padding-bottom: 0;
-    padding-top: 0;
+    padding-block: 0;
+    padding-inline-end: calc(
+        var(
+                --mod-slider-controls-margin,
+                var(--spectrum-slider-controls-margin)
+            ) +
+            var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap))
+    );
+    padding-inline-start: 0;
 }
 :host([variant='range']) #value {
     -webkit-user-select: text;
     user-select: text;
 }
-:host([dir='ltr'][variant='range']) .track:before {
-    border-top-left-radius: 0;
-}
-:host([dir='rtl'][variant='range']) .track:before {
-    border-top-right-radius: 0;
-}
-:host([dir='ltr'][variant='range']) .track:before {
-    border-bottom-left-radius: 0;
-}
-:host([dir='rtl'][variant='range']) .track:before {
-    border-bottom-right-radius: 0;
-}
-:host([dir='ltr'][variant='range']) .track:before {
-    border-top-right-radius: 0;
-}
-:host([dir='rtl'][variant='range']) .track:before {
-    border-top-left-radius: 0;
-}
-:host([dir='ltr'][variant='range']) .track:before {
-    border-bottom-right-radius: 0;
-}
-:host([dir='rtl'][variant='range']) .track:before {
-    border-bottom-left-radius: 0;
-}
-:host([dir='ltr'][variant='range']) .track:first-of-type {
-    padding-left: 0;
-    padding-right: var(--spectrum-slider-track-handleoffset);
-}
-:host([dir='rtl'][variant='range']) .track:first-of-type {
-    padding-left: var(--spectrum-slider-track-handleoffset);
-    padding-right: 0;
-}
-:host([dir='ltr'][variant='range']) .track:first-of-type {
-    left: var(--spectrum-slider-range-track-reset);
-}
-:host([dir='rtl'][variant='range']) .track:first-of-type {
-    right: var(--spectrum-slider-range-track-reset);
-}
-:host([dir='ltr'][variant='range']) .track:first-of-type {
-    right: auto;
-}
-:host([dir='rtl'][variant='range']) .track:first-of-type {
-    left: auto;
-}
-:host([dir='ltr'][variant='range']) .track:first-of-type {
-    margin-left: var(--spectrum-slider-track-margin-offset);
-}
-:host([dir='rtl'][variant='range']) .track:first-of-type {
-    margin-right: var(--spectrum-slider-track-margin-offset);
-}
-:host([dir='ltr'][variant='range']) .track:first-of-type:before {
-    border-top-left-radius: var(
-        --spectrum-slider-m-track-border-radius,
-        var(--spectrum-global-dimension-static-size-10)
+:host([variant='range']) .track:first-of-type {
+    inset-inline-end: auto;
+    inset-inline-start: var(
+        --mod-slider-range-track-reset,
+        var(--spectrum-slider-range-track-reset)
     );
-}
-:host([dir='rtl'][variant='range']) .track:first-of-type:before {
-    border-top-right-radius: var(
-        --spectrum-slider-m-track-border-radius,
-        var(--spectrum-global-dimension-static-size-10)
+    margin-inline-start: var(
+        --mod-slider-track-margin-offset,
+        var(--spectrum-slider-track-margin-offset)
     );
-}
-:host([dir='ltr'][variant='range']) .track:first-of-type:before {
-    border-bottom-left-radius: var(
-        --spectrum-slider-m-track-border-radius,
-        var(--spectrum-global-dimension-static-size-10)
+    padding-inline-end: var(
+        --mod-slider-track-handleoffset,
+        var(--spectrum-slider-track-handleoffset)
     );
+    padding-inline-start: 0;
 }
-:host([dir='rtl'][variant='range']) .track:first-of-type:before {
-    border-bottom-right-radius: var(
-        --spectrum-slider-m-track-border-radius,
-        var(--spectrum-global-dimension-static-size-10)
+:host([variant='range']) .track:first-of-type:before {
+    border-end-start-radius: var(
+        --mod-slider-track-corner-radius,
+        var(--spectrum-slider-track-corner-radius)
     );
-}
-:host([dir='ltr'][variant='range']) .track:first-of-type:before {
-    border-top-right-radius: 0;
-}
-:host([dir='rtl'][variant='range']) .track:first-of-type:before {
-    border-top-left-radius: 0;
-}
-:host([dir='ltr'][variant='range']) .track:first-of-type:before {
-    border-bottom-right-radius: 0;
-}
-:host([dir='rtl'][variant='range']) .track:first-of-type:before {
-    border-bottom-left-radius: 0;
-}
-:host([dir='ltr'][variant='range']) .track,
-:host([dir='rtl'][variant='range']) .track {
-    margin-left: var(--spectrum-slider-range-track-reset);
-    margin-right: var(--spectrum-slider-range-track-reset);
-    padding-left: var(--spectrum-slider-track-middle-handleoffset);
-    padding-right: var(--spectrum-slider-track-middle-handleoffset);
-}
-:host([dir='ltr'][variant='range']) .track:last-of-type {
-    padding-left: var(--spectrum-slider-track-handleoffset);
-    padding-right: 0;
-}
-:host([dir='rtl'][variant='range']) .track:last-of-type {
-    padding-left: 0;
-    padding-right: var(--spectrum-slider-track-handleoffset);
-}
-:host([dir='ltr'][variant='range']) .track:last-of-type {
-    left: auto;
-}
-:host([dir='rtl'][variant='range']) .track:last-of-type {
-    right: auto;
-}
-:host([dir='ltr'][variant='range']) .track:last-of-type {
-    right: var(--spectrum-slider-range-track-reset);
-}
-:host([dir='rtl'][variant='range']) .track:last-of-type {
-    left: var(--spectrum-slider-range-track-reset);
-}
-:host([dir='ltr'][variant='range']) .track:last-of-type {
-    margin-right: var(--spectrum-slider-track-margin-offset);
-}
-:host([dir='rtl'][variant='range']) .track:last-of-type {
-    margin-left: var(--spectrum-slider-track-margin-offset);
-}
-:host([dir='ltr'][variant='range']) .track:last-of-type:before {
-    border-top-right-radius: var(
-        --spectrum-slider-m-track-border-radius,
-        var(--spectrum-global-dimension-static-size-10)
+    border-start-start-radius: var(
+        --mod-slider-track-corner-radius,
+        var(--spectrum-slider-track-corner-radius)
     );
 }
-:host([dir='rtl'][variant='range']) .track:last-of-type:before {
-    border-top-left-radius: var(
-        --spectrum-slider-m-track-border-radius,
-        var(--spectrum-global-dimension-static-size-10)
+:host([variant='range']) .track:last-of-type {
+    inset-inline-end: var(
+        --mod-slider-range-track-reset,
+        var(--spectrum-slider-range-track-reset)
     );
-}
-:host([dir='ltr'][variant='range']) .track:last-of-type:before {
-    border-bottom-right-radius: var(
-        --spectrum-slider-m-track-border-radius,
-        var(--spectrum-global-dimension-static-size-10)
+    inset-inline-start: auto;
+    margin-inline-end: var(
+        --mod-slider-track-margin-offset,
+        var(--spectrum-slider-track-margin-offset)
     );
+    padding-inline-end: 0;
+    padding-inline-start: var(--spectrum-slider-track-handleoffset);
 }
-:host([dir='rtl'][variant='range']) .track:last-of-type:before {
-    border-bottom-left-radius: var(
-        --spectrum-slider-m-track-border-radius,
-        var(--spectrum-global-dimension-static-size-10)
+:host([variant='range']) .track:last-of-type:before {
+    border-end-end-radius: var(
+        --mod-slider-track-corner-radius,
+        var(--spectrum-slider-track-corner-radius)
+    );
+    border-start-end-radius: var(
+        --mod-slider-track-corner-radius,
+        var(--spectrum-slider-track-corner-radius)
     );
-}
-:host([dir='ltr'][variant='range']) .track:last-of-type:before {
-    border-top-left-radius: 0;
-}
-:host([dir='rtl'][variant='range']) .track:last-of-type:before {
-    border-top-right-radius: 0;
-}
-:host([dir='ltr'][variant='range']) .track:last-of-type:before {
-    border-bottom-left-radius: 0;
-}
-:host([dir='rtl'][variant='range']) .track:last-of-type:before {
-    border-bottom-right-radius: 0;
-}
-:host([dir='ltr']) #ramp {
-    left: var(--spectrum-slider-track-margin-offset);
-}
-:host([dir='ltr']) #ramp,
-:host([dir='rtl']) #ramp {
-    right: var(--spectrum-slider-track-margin-offset);
-}
-:host([dir='rtl']) #ramp {
-    left: var(--spectrum-slider-track-margin-offset);
 }
 #ramp {
-    height: var(--spectrum-slider-ramp-track-height);
-    margin-top: var(--spectrum-slider-ramp-margin-top);
+    block-size: var(
+        --mod-slider-ramp-track-height,
+        var(--spectrum-slider-ramp-track-height)
+    );
+    inset-inline-end: var(
+        --spectrum-slider-track-margin-offset,
+        var(--spectrum-slider-track-margin-offset)
+    );
+    inset-inline-start: var(
+        --spectrum-slider-track-margin-offset,
+        var(--spectrum-slider-track-margin-offset)
+    );
+    margin-block-start: calc(
+        var(
+                --mod-slider-ramp-track-height,
+                var(--spectrum-slider-ramp-track-height)
+            ) / 2
+    );
     position: absolute;
-    top: calc(var(--spectrum-slider-ramp-track-height) / 2);
 }
 :host([dir='rtl']) #ramp svg {
     transform: matrix(-1, 0, 0, 1, 0, 0);
 }
 #ramp svg {
-    height: 100%;
-    width: 100%;
-}
-:host([dir='ltr']) .handle {
-    left: 0;
-}
-:host([dir='rtl']) .handle {
-    right: 0;
-}
-:host([dir='ltr']) .handle {
-    margin-left: calc(var(--spectrum-slider-handle-width) / -2);
-    margin-right: 0;
-}
-:host([dir='rtl']) .handle {
-    margin-left: 0;
-    margin-right: calc(var(--spectrum-slider-handle-width) / -2);
+    block-size: 100%;
+    inline-size: 100%;
 }
 .handle {
-    border-radius: var(--spectrum-slider-handle-border-radius);
+    block-size: var(
+        --mod-slider-handle-size,
+        var(--spectrum-slider-handle-size)
+    );
+    border-radius: var(
+        --mod-slider-handle-border-radius,
+        var(--spectrum-slider-handle-border-radius)
+    );
     border-style: solid;
-    border-width: var(--spectrum-slider-handle-border-size);
+    border-width: var(
+        --mod-slider-handle-border-width,
+        var(--spectrum-slider-handle-border-width)
+    );
     box-sizing: border-box;
     display: inline-block;
-    height: var(--spectrum-slider-handle-height);
-    margin-bottom: 0;
-    margin-top: var(--spectrum-slider-handle-margin-top);
+    inline-size: var(
+        --mod-slider-handle-size,
+        var(--spectrum-slider-handle-size)
+    );
+    inset-block-start: calc(
+        var(--mod-slider-control-height, var(--spectrum-slider-control-height)) /
+            2 -
+            var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) /
+            2
+    );
+    inset-inline-start: 0;
+    margin-block: 0;
+    margin-inline: calc(
+            var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) /
+                -2
+        )
+        0;
     outline: none;
     position: absolute;
-    top: calc(var(--spectrum-slider-height) / 2);
-    transition: border-width var(--spectrum-slider-animation-duration)
+    transition: border-width
+        var(
+            --mod-animation-duration-100,
+            var(--spectrum-animation-duration-100)
+        )
         ease-in-out;
-    width: var(--spectrum-slider-handle-width);
     z-index: 2;
 }
 .handle.dragging,
 .handle.handle-highlight,
 .handle:active {
-    border-width: var(--spectrum-slider-handle-border-size);
+    border-width: var(
+        --mod-slider-handle-border-width-down,
+        var(--spectrum-slider-handle-border-width-down)
+    );
 }
 .handle.dragging,
 .handle.handle-highlight,
@@ -570,179 +433,237 @@ governing permissions and limitations under the License.
     z-index: 3;
 }
 .handle:before {
+    block-size: var(
+        --mod-slider-handle-size,
+        var(--spectrum-slider-handle-size)
+    );
     border-radius: 100%;
     content: ' ';
     display: block;
-    height: var(--spectrum-slider-handle-height);
+    inline-size: var(
+        --mod-slider-handle-size,
+        var(--spectrum-slider-handle-size)
+    );
     left: 50%;
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
-    transition: box-shadow var(--spectrum-global-animation-duration-100, 0.13s)
+    transition: box-shadow
+            var(
+                --mod-animation-duration-100,
+                var(--spectrum-animation-duration-100)
+            )
+            ease-out,
+        inline-size
+            var(
+                --mod-animation-duration-100,
+                var(--spectrum-animation-duration-100)
+            )
             ease-out,
-        width var(--spectrum-global-animation-duration-100, 0.13s) ease-out,
-        height var(--spectrum-global-animation-duration-100, 0.13s) ease-out;
-    width: var(--spectrum-slider-handle-width);
+        block-size
+            var(
+                --mod-animation-duration-100,
+                var(--spectrum-animation-duration-100)
+            )
+            ease-out;
 }
 .handle.handle-highlight:before {
-    height: calc(
-        var(--spectrum-slider-handle-height) +
-            var(
-                --spectrum-alias-focus-ring-gap,
-                var(--spectrum-global-dimension-static-size-25)
-            ) * 2
+    block-size: calc(
+        var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) +
+            var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) *
+            2
     );
-    width: calc(
-        var(--spectrum-slider-handle-width) +
-            var(
-                --spectrum-alias-focus-ring-gap,
-                var(--spectrum-global-dimension-static-size-25)
-            ) * 2
+    inline-size: calc(
+        var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) +
+            var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) *
+            2
     );
 }
-:host([dir='ltr']) .input {
-    left: var(--spectrum-slider-input-left);
-}
-:host([dir='rtl']) .input {
-    right: var(--spectrum-slider-input-left);
-}
 .input {
     -webkit-appearance: none;
+    block-size: var(
+        --mod-slider-handle-size,
+        var(--spectrum-slider-handle-size)
+    );
     border: 0;
     cursor: default;
-    height: var(--spectrum-slider-handle-height);
+    inline-size: var(
+        --mod-slider-handle-size,
+        var(--spectrum-slider-handle-size)
+    );
+    inset-block-start: var(
+        --mod-slider-input-top-size,
+        var(--spectrum-slider-input-top-size)
+    );
+    inset-inline-start: var(
+        --mod-slider-input-left,
+        var(--spectrum-slider-input-left)
+    );
     margin: 0;
     opacity: 0.000001;
     overflow: hidden;
     padding: 0;
     pointer-events: none;
     position: absolute;
-    top: var(--spectrum-slider-input-top);
-    width: var(--spectrum-slider-handle-width);
 }
 .input:focus {
     outline: none;
 }
 #label-container {
+    align-items: center;
     display: flex;
-    font-size: var(
-        --spectrum-slider-label-text-size,
-        var(--spectrum-global-dimension-font-size-75)
-    );
-    line-height: var(--spectrum-slider-label-text-line-height);
-    margin-bottom: var(--spectrum-slider-label-margin-bottom);
-    padding-top: var(
-        --spectrum-fieldlabel-m-padding-top,
-        var(--spectrum-global-dimension-size-50)
+    font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size));
+    inline-size: auto;
+    line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
+    margin-block-start: var(
+        --mod-slider-label-top-to-text,
+        var(--spectrum-slider-label-top-to-text)
     );
     position: relative;
-    width: auto;
 }
-:host([dir='ltr']) #label {
-    padding-left: 0;
-}
-:host([dir='rtl']) #label {
-    padding-right: 0;
+#label-container:lang(ja),
+#label-container:lang(ko),
+#label-container:lang(zh) {
+    line-height: var(
+        --mod-slider-cjk-line-height,
+        var(--spectrum-slider-cjk-line-height)
+    );
 }
 #label {
     flex-grow: 1;
-}
-:host([dir='ltr']) #value {
-    padding-right: 0;
-}
-:host([dir='rtl']) #value {
-    padding-left: 0;
-}
-:host([dir='ltr']) #value {
-    text-align: right;
-}
-:host([dir='rtl']) #value {
-    text-align: left;
+    font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size));
+    padding-inline-start: 0;
 }
 #value {
     font-feature-settings: 'tnum';
     cursor: default;
     flex-grow: 0;
+    margin-inline-start: var(
+        --mod-slider-label-margin-start,
+        var(--spectrum-slider-label-margin-start)
+    );
+    padding-inline-end: 0;
+    text-align: end;
+}
+:host([variant='tick']) .handle {
+    background-color: var(
+        --highcontrast-slider-tick-handle-background-color,
+        var(
+            --mod-slider-tick-handle-background-color,
+            var(--spectrum-slider-tick-handle-background-color)
+        )
+    );
 }
-:host([dir='ltr']) #value {
-    margin-left: var(--spectrum-slider-label-gap-x);
+:host([variant='tick']) #controls {
+    margin-block-start: calc(
+        var(--spectrum-text-to-visual-75) -
+            var(
+                --mod-slider-tick-mark-height,
+                var(--spectrum-slider-tick-mark-height)
+            ) / 2 -
+            var(
+                --mod-slider-track-thickness,
+                var(--spectrum-slider-track-thickness)
+            ) / 2
+    );
 }
-:host([dir='rtl']) #value {
-    margin-right: var(--spectrum-slider-label-gap-x);
+:host([variant='tick']) .tickLabel {
+    margin-block-start: calc(
+        var(
+                --mod-slider-tick-mark-height,
+                var(--spectrum-slider-tick-mark-height)
+            ) + var(--spectrum-text-to-visual-75)
+    );
 }
 .ticks {
     display: flex;
     justify-content: space-between;
-    margin: 0 var(--spectrum-slider-track-margin-offset);
-    margin-top: calc(var(--spectrum-slider-tick-mark-height) + 1px);
+    margin-inline: var(
+        --mod-slider-track-margin-offset,
+        var(--spectrum-slider-track-margin-offset)
+    );
     z-index: 0;
 }
+.ticks ~ .spectrum-Slider-handleContainer .handle {
+    background: var(
+        --mod-slider-ticks-handle-background-color,
+        var(--spectrum-slider-ticks-handle-background-color)
+    );
+}
 .tick {
+    inline-size: var(
+        --mod-slider-tick-mark-width,
+        var(--spectrum-slider-tick-mark-width)
+    );
+    inset-block-start: calc(
+        var(--mod-slider-track-thickness, var(--spectrum-slider-control-height)) /
+            2 -
+            var(
+                --mod-slider-tick-mark-height,
+                var(--spectrum-slider-tick-mark-height)
+            ) / 2
+    );
     position: relative;
-    width: var(--spectrum-slider-tick-mark-width);
-}
-:host([dir='ltr']) .tick:after {
-    left: calc(50% - var(--spectrum-slider-tick-mark-width) / 2);
-}
-:host([dir='rtl']) .tick:after {
-    right: calc(50% - var(--spectrum-slider-tick-mark-width) / 2);
 }
 .tick:after {
-    border-radius: var(--spectrum-slider-tick-mark-border-radius);
+    block-size: var(
+        --mod-slider-tick-mark-height,
+        var(--spectrum-slider-tick-mark-height)
+    );
+    border-radius: var(
+        --mod-slider-tick-mark-border-radius,
+        var(--spectrum-slider-tick-mark-border-radius)
+    );
     content: '';
     display: block;
-    height: var(--spectrum-slider-tick-mark-height);
+    inline-size: var(
+        --mod-slider-tick-mark-width,
+        var(--spectrum-slider-tick-mark-width)
+    );
+    inset-block-start: 0;
+    inset-inline-start: calc(
+        50% -
+            var(
+                --mod-slider-tick-mark-width,
+                var(--spectrum-slider-tick-mark-width)
+            ) / 2
+    );
     position: absolute;
-    top: 0;
-    width: var(--spectrum-slider-tick-mark-width);
 }
 .tick .tickLabel {
     align-items: center;
     display: flex;
-    font-size: var(
-        --spectrum-slider-label-text-size,
-        var(--spectrum-global-dimension-font-size-75)
-    );
+    font-size: var(--mod-font-size-75, var(--spectrum-font-size-75));
     justify-content: center;
-    line-height: var(--spectrum-slider-label-text-line-height);
-    margin-bottom: 0;
-    margin-left: calc(var(--spectrum-slider-label-gap-x) * -1);
-    margin-right: calc(var(--spectrum-slider-label-gap-x) * -1);
-    margin-top: calc(
-        var(--spectrum-slider-label-gap-y) +
-            var(--spectrum-slider-tick-mark-height)
-    );
+    line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
 }
 .tick:first-of-type .tickLabel,
 .tick:last-of-type .tickLabel {
     display: block;
-    margin-left: 0;
-    margin-right: 0;
+    margin-inline: 0;
     position: absolute;
 }
-:host([dir='ltr']) .tick:first-of-type {
-    left: calc(var(--spectrum-slider-tick-mark-width) / -2);
-}
-:host([dir='rtl']) .tick:first-of-type {
-    right: calc(var(--spectrum-slider-tick-mark-width) / -2);
-}
-:host([dir='ltr']) .tick:first-of-type .tickLabel {
-    left: 0;
-}
-:host([dir='rtl']) .tick:first-of-type .tickLabel {
-    right: 0;
-}
-:host([dir='ltr']) .tick:last-of-type {
-    right: calc(var(--spectrum-slider-tick-mark-width) / -2);
+.tick:first-of-type {
+    inset-inline-start: calc(
+        var(
+                --mod-slider-tick-mark-width,
+                var(--spectrum-slider-tick-mark-width)
+            ) / -2
+    );
 }
-:host([dir='rtl']) .tick:last-of-type {
-    left: calc(var(--spectrum-slider-tick-mark-width) / -2);
+.tick:first-of-type .tickLabel {
+    inset-inline-start: 0;
 }
-:host([dir='ltr']) .tick:last-of-type .tickLabel {
-    right: 0;
+.tick:last-of-type {
+    inset-inline-end: calc(
+        var(
+                --mod-slider-tick-mark-width,
+                var(--spectrum-slider-tick-mark-width)
+            ) / -2
+    );
 }
-:host([dir='rtl']) .tick:last-of-type .tickLabel {
-    left: 0;
+.tick:last-of-type .tickLabel {
+    inset-inline-end: 0;
 }
 :host([disabled]) {
     cursor: default;
@@ -751,216 +672,355 @@ governing permissions and limitations under the License.
     cursor: default;
     pointer-events: none;
 }
+:host([disabled]) .tickLabel {
+    color: var(
+        --highcontrast-slider-label-text-color-disabled,
+        var(
+            --mod-slider-label-text-color-disabled,
+            var(--spectrum-slider-label-text-color-disabled)
+        )
+    );
+}
 .spectrum-Slider-handleContainer,
 .spectrum-Slider-trackContainer {
-    margin-left: calc(var(--spectrum-slider-handle-width) / 2 * -1);
+    inline-size: calc(100% + var(--spectrum-slider-handle-size));
+    inset-block-start: 0;
+    margin-inline-start: calc(var(--spectrum-slider-handle-size) / 2 * -1);
     position: absolute;
-    top: calc(var(--spectrum-slider-track-height) / 2 - 1px);
-    width: calc(100% + var(--spectrum-slider-handle-width));
 }
 .spectrum-Slider-trackContainer {
-    height: var(--spectrum-slider-height);
-    overflow: hidden;
-}
-:host {
-    --spectrum-slider-m-focus-ring-size: var(
-        --spectrum-alias-focus-ring-size,
-        var(--spectrum-global-dimension-static-size-25)
-    );
-    --spectrum-slider-m-handle-border-color-key-focus: var(
-        --spectrum-global-color-gray-800
-    );
-    --spectrum-slider-m-handle-focus-ring-color-key-focus: var(
-        --spectrum-alias-focus-color,
-        var(--spectrum-global-color-blue-400)
-    );
-    --spectrum-slider-m-label-text-color: var(
-        --spectrum-alias-label-text-color,
-        var(--spectrum-global-color-gray-700)
-    );
-    --spectrum-slider-m-label-text-color-disabled: var(
-        --spectrum-alias-text-color-disabled,
-        var(--spectrum-global-color-gray-500)
+    block-size: var(
+        --mod-slider-control-height,
+        var(--spectrum-slider-control-height)
     );
+    overflow: hidden;
 }
 .track:before {
     background: var(
-        --spectrum-slider-m-track-color,
-        var(--spectrum-global-color-gray-400)
+        --highcontrast-slider-track-color,
+        var(--mod-slider-track-color, var(--spectrum-slider-track-color))
     );
 }
 #label-container {
-    color: var(--spectrum-slider-m-label-text-color);
+    color: var(
+        --highcontrast-slider-label-text-color,
+        var(
+            --mod-slider-label-text-color,
+            var(--spectrum-slider-label-text-color)
+        )
+    );
 }
 :host([variant='filled']) .track:first-child:before {
     background: var(
-        --spectrum-slider-m-track-fill-color,
-        var(--spectrum-global-color-gray-700)
+        --highcontrast-slider-track-fill-color,
+        var(
+            --mod-slider-track-fill-color,
+            var(--spectrum-slider-track-fill-color)
+        )
     );
 }
 #fill:before {
     background: var(
-        --spectrum-slider-m-track-fill-color,
-        var(--spectrum-global-color-gray-700)
+        --highcontrast-slider-track-fill-color,
+        var(
+            --mod-slider-track-fill-color,
+            var(--spectrum-slider-track-fill-color)
+        )
     );
 }
 #ramp path {
     fill: var(
-        --spectrum-slider-m-track-color,
-        var(--spectrum-global-color-gray-400)
+        --highcontrast-slider-ramp-track-color,
+        var(
+            --mod-slider-ramp-track-color,
+            var(--spectrum-slider-ramp-track-color)
+        )
     );
 }
 .handle {
     background: var(
-        --spectrum-slider-m-handle-background-color,
-        var(--spectrum-alias-background-color-transparent)
+        --highcontrast-slider-handle-background-color,
+        var(
+            --mod-slider-handle-background-color,
+            var(--spectrum-slider-handle-background-color)
+        )
     );
     border-color: var(
-        --spectrum-slider-m-handle-border-color,
-        var(--spectrum-global-color-gray-700)
+        --highcontrast-slider-handle-border-color,
+        var(
+            --mod-slider-handle-border-color,
+            var(--spectrum-slider-handle-border-color)
+        )
     );
 }
 .handle:hover {
     border-color: var(
-        --spectrum-slider-m-handle-border-color-hover,
-        var(--spectrum-global-color-gray-800)
+        --highcontrast-slider-handle-border-color-hover,
+        var(
+            --mod-slider-handle-border-color-hover,
+            var(--spectrum-slider-handle-border-color-hover)
+        )
     );
 }
 .handle.handle-highlight {
     border-color: var(
-        --spectrum-slider-m-handle-border-color-key-focus,
-        var(--spectrum-global-color-gray-800)
+        --highcontrast-slider-handle-border-color-key-focus,
+        var(
+            --mod-slider-handle-border-color-key-focus,
+            var(--spectrum-slider-handle-border-color-key-focus)
+        )
     );
 }
 .handle.handle-highlight:before {
-    box-shadow: 0 0 0
+    box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness)
         var(
-            --spectrum-slider-m-focus-ring-size,
-            var(--spectrum-alias-focus-ring-size)
-        )
-        var(--spectrum-slider-m-handle-focus-ring-color-key-focus);
+            --highcontrast-slider-handle-focus-ring-color-key-focus,
+            var(
+                --mod-slider-handle-focus-ring-color-key-focus,
+                var(--spectrum-slider-handle-focus-ring-color-key-focus)
+            )
+        );
 }
 .handle.dragging,
 .handle:active {
     border-color: var(
-        --spectrum-slider-m-handle-border-color-down,
-        var(--spectrum-global-color-gray-800)
+        --highcontrast-slider-handle-border-color-down,
+        var(
+            --mod-slider-handle-border-color-down,
+            var(--spectrum-slider-handle-border-color-down)
+        )
     );
 }
 :host([variant='ramp']) .handle {
-    box-shadow: 0 0 0
-        var(
-            --spectrum-slider-m-handle-gap,
-            var(--spectrum-alias-border-size-thicker)
-        )
+    background: var(
+        --mod-slider-ramp-handle-background-color,
+        var(--spectrum-slider-ramp-handle-background-color)
+    );
+    box-shadow: 0 0 0 var(--spectrum-slider-handle-gap)
         var(
-            --spectrum-alias-background-color-default,
-            var(--spectrum-global-color-gray-100)
+            --highcontrast-slider-ramp-handle-border-color-active,
+            var(
+                --mod-sectrum-slider-ramp-handle-border-color-active,
+                var(--spectrum-slider-ramp-handle-border-color-active)
+            )
         );
 }
+@media (forced-colors: active) {
+    :host([variant='ramp']) .handle {
+        background-color: ButtonFace;
+        border-color: ButtonText;
+        box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) ButtonFace;
+        forced-color-adjust: none;
+    }
+}
 .input {
     background: none;
 }
 .tick:after {
     background-color: var(
-        --spectrum-slider-m-tick-mark-color,
-        var(--spectrum-global-color-gray-400)
+        --highcontrast-slider-tick-mark-color,
+        var(
+            --mod-slider-tick-mark-color,
+            var(--spectrum-slider-tick-mark-color)
+        )
     );
 }
 .handle.dragging {
     background: var(
-        --spectrum-slider-m-handle-background-color,
-        var(--spectrum-alias-background-color-transparent)
+        --highcontrast-slider-handle-background-color,
+        var(
+            --mod-slider-handle-background-color,
+            var(--spectrum-slider-handle-background-color)
+        )
     );
     border-color: var(
-        --spectrum-slider-m-handle-border-color-down,
-        var(--spectrum-global-color-gray-800)
+        --highcontrast-slider-handle-border-color-down,
+        var(
+            --mod-slider-handle-border-color-down,
+            var(--spectrum-slider-handle-border-color-down)
+        )
     );
 }
 :host([variant='range']) .track:not(:first-of-type):not(:last-of-type):before {
     background: var(
-        --spectrum-slider-m-track-fill-color,
-        var(--spectrum-global-color-gray-700)
+        --highcontrast-slider-track-fill-color,
+        var(
+            --mod-slider-track-fill-color,
+            var(--spectrum-slider-track-fill-color)
+        )
     );
 }
 :host([disabled]) #label-container {
-    color: var(--spectrum-slider-m-label-text-color-disabled);
+    color: var(
+        --highcontrast-slider-label-text-color-disabled,
+        var(
+            --mod-slider-label-text-color-disabled,
+            var(--spectrum-slider-label-text-color-disabled)
+        )
+    );
 }
 :host([disabled]) .handle {
     background: var(
-        --spectrum-alias-background-color-default,
-        var(--spectrum-global-color-gray-100)
+        --highcontrast-slider-handle-disabled-background-color,
+        var(
+            --mod-slider-handle-disabled-background-color,
+            var(--spectrum-slider-handle-disabled-background-color)
+        )
     );
     border-color: var(
-        --spectrum-slider-m-handle-border-color-disabled,
-        var(--spectrum-global-color-gray-400)
+        --highcontrast-slider-handle-border-color-disabled,
+        var(
+            --mod-slider-handle-border-color-disabled,
+            var(--spectrum-slider-handle-border-color-disabled)
+        )
     );
 }
 :host([disabled]) .handle:active,
 :host([disabled]) .handle:hover {
     background: var(
-        --spectrum-slider-m-handle-background-color,
-        var(--spectrum-alias-background-color-transparent)
+        --highcontrast-slider-handle-background-color-disabled,
+        var(
+            --mod-slider-handle-background-color-disabled,
+            var(--spectrum-slider-handle-background-color-disabled)
+        )
     );
     border-color: var(
-        --spectrum-slider-m-handle-border-color-disabled,
-        var(--spectrum-global-color-gray-400)
+        --highcontrast-disabled-border-color,
+        var(--mod-disabled-border-color, var(--spectrum-disabled-border-color))
     );
 }
 :host([disabled]) .track:before {
     background: var(
-        --spectrum-slider-m-track-color-disabled,
-        var(--spectrum-global-color-gray-300)
+        --highcontrast-slider-track-color-disabled,
+        var(
+            --mod-slider-track-color-disabled,
+            var(--spectrum-slider-track-color-disabled)
+        )
     );
 }
 :host([disabled][variant='filled']) .track:first-child:before {
     background: var(
-        --spectrum-slider-m-track-fill-color-disabled,
-        var(--spectrum-global-color-gray-300)
+        --highcontrast-slider-track-fill-color-disabled,
+        var(
+            --mod-slider-track-fill-color-disabled,
+            var(--spectrum-slider-track-fill-color-disabled)
+        )
     );
 }
 :host([disabled]) #fill:before {
     background: var(
-        --spectrum-slider-m-track-fill-color-disabled,
-        var(--spectrum-global-color-gray-300)
+        --highcontrast-slider-track-fill-color-disabled,
+        var(
+            --mod-slider-track-fill-color-disabled,
+            var(--spectrum-slider-track-fill-color-disabled)
+        )
     );
 }
+@media (forced-colors: active) {
+    :host([disabled]) #ramp + .handle {
+        fill: ButtonFace;
+        background-color: ButtonFace;
+    }
+}
 :host([disabled]) #ramp path {
-    fill: var(--spectrum-slider-ramp-track-color-disabled);
+    fill: var(
+        --highcontrast-slider-ramp-track-color-disabled,
+        var(
+            --mod-slider-ramp-track-color-disabled,
+            var(--spectrum-slider-ramp-track-color-disabled)
+        )
+    );
+}
+:host([disabled]) .tick:after {
+    background-color: var(
+        --highcontrast-slider-tick-mark-color-disabled,
+        var(
+            --mod-slider-tick-mark-color-disabled,
+            var(--spectrum-slider-tick-mark-color-disabled)
+        )
+    );
 }
 :host([disabled][variant='range'])
     .track:not(:first-of-type):not(:last-of-type):before {
     background: var(
-        --spectrum-slider-m-track-fill-color-disabled,
-        var(--spectrum-global-color-gray-300)
+        --highcontrast-slider-track-color-disabled,
+        var(
+            --mod-slider-track-color-disabled,
+            var(--spectrum-slider-track-color-disabled)
+        )
     );
 }
 @media (forced-colors: active) {
     :host {
-        --spectrum-alias-background-color-default: ButtonFace;
-        --spectrum-alias-focus-color: ButtonText;
-        --spectrum-alias-label-text-color: CanvasText;
-        --spectrum-alias-text-color-disabled: GrayText;
-        --spectrum-slider-m-handle-background-color: ButtonFace;
-        --spectrum-slider-m-handle-border-color: ButtonText;
-        --spectrum-slider-m-handle-border-color-disabled: GrayText;
-        --spectrum-slider-m-handle-border-color-down: Highlight;
-        --spectrum-slider-m-handle-border-color-hover: Highlight;
-        --spectrum-slider-m-handle-border-color-key-focus: Highlight;
-        --spectrum-slider-m-handle-focus-ring-color-key-focus: ButtonText;
-        --spectrum-slider-m-label-text-color: CanvasText;
-        --spectrum-slider-m-label-text-color-disabled: GrayText;
-        --spectrum-slider-m-tick-mark-color: ButtonText;
-        --spectrum-slider-m-track-color: ButtonText;
-        --spectrum-slider-m-track-color-disabled: GrayText;
-        --spectrum-slider-m-track-fill-color: ButtonText;
-        --spectrum-slider-m-track-fill-color-disabled: GrayText;
+        --highcontrast-slider-track-color: ButtonText;
+        --highcontrast-slider-track-fill-color: ButtonText;
+        --highcontrast-slider-ramp-track-color: ButtonText;
+        --highcontrast-slider-ramp-track-color-disabled: GrayText;
+        --highcontrast-slider-tick-mark-color: ButtonText;
+        --spectrum-slider-track-color: ButtonText;
+        --spectrum-slider-track-fill-color: ButtonText;
+        --spectrum-slider-ramp-track-color: ButtonText;
         --spectrum-slider-ramp-track-color-disabled: GrayText;
+        --spectrum-slider-handle-background-color: ButtonFace;
+        --spectrum-slider-handle-background-color-disabled: GrayText;
+        --spectrum-slider-handle-border-color: ButtonText;
+        --spectrum-slider-handle-disabled-background-color: GrayText;
+        --spectrum-slider-tick-mark-color: ButtonText;
+        --spectrum-slider-tick-mark-color-disabled: GrayText;
+        --spectrum-slider-handle-border-color-hover: Highlight;
+        --spectrum-slider-handle-border-color-down: Highlight;
+        --spectrum-slider-handle-border-color-key-focus: Highlight;
+        --spectrum-slider-handle-focus-ring-color-key-focus: Highlight;
+        --spectrum-slider-track-color-disabled: GrayText;
+        --spectrum-slider-track-fill-color-disabled: GrayText;
+        --spectrum-slider-handle-border-color-disabled: GrayText;
+        --spectrum-slider-label-text-color: CanvasText;
+        --spectrum-slider-label-text-color-disabled: GrayText;
+        --spectrum-slider-ramp-handle-border-color-active: ButtonText;
     }
-    .handle:before {
-        forced-color-adjust: none;
-    }
-    :host([variant='ramp']) .handle {
-        forced-color-adjust: none;
-    }
+}
+:host {
+    --spectrum-slider-track-color: var(--system-spectrum-slider-track-color);
+    --spectrum-slider-track-fill-color: var(
+        --system-spectrum-slider-track-fill-color
+    );
+    --spectrum-slider-ramp-track-color: var(
+        --system-spectrum-slider-ramp-track-color
+    );
+    --spectrum-slider-ramp-track-color-disabled: var(
+        --system-spectrum-slider-ramp-track-color-disabled
+    );
+    --spectrum-slider-handle-background-color: var(
+        --system-spectrum-slider-handle-background-color
+    );
+    --spectrum-slider-handle-background-color-disabled: var(
+        --system-spectrum-slider-handle-background-color-disabled
+    );
+    --spectrum-slider-ramp-handle-background-color: var(
+        --system-spectrum-slider-ramp-handle-background-color
+    );
+    --spectrum-slider-ticks-handle-background-color: var(
+        --system-spectrum-slider-ticks-handle-background-color
+    );
+    --spectrum-slider-handle-border-color: var(
+        --system-spectrum-slider-handle-border-color
+    );
+    --spectrum-slider-handle-disabled-background-color: var(
+        --system-spectrum-slider-handle-disabled-background-color
+    );
+    --spectrum-slider-tick-mark-color: var(
+        --system-spectrum-slider-tick-mark-color
+    );
+    --spectrum-slider-handle-border-color-hover: var(
+        --system-spectrum-slider-handle-border-color-hover
+    );
+    --spectrum-slider-handle-border-color-down: var(
+        --system-spectrum-slider-handle-border-color-down
+    );
+    --spectrum-slider-handle-border-color-key-focus: var(
+        --system-spectrum-slider-handle-border-color-key-focus
+    );
+    --spectrum-slider-handle-focus-ring-color-key-focus: var(
+        --system-spectrum-slider-handle-focus-ring-color-key-focus
+    );
 }
diff --git a/packages/slider/stories/slider.stories.ts b/packages/slider/stories/slider.stories.ts
index 22fda61dcc0..086a53cc840 100644
--- a/packages/slider/stories/slider.stories.ts
+++ b/packages/slider/stories/slider.stories.ts
@@ -372,11 +372,13 @@ export const Gradient = (args: StoryArgs = {}): TemplateResult => {
             style="
                 width: 500px;
                 margin: 12px 20px;
-                --spectrum-slider-track-color:linear-gradient(to right, red, green 100%);
-                --spectrum-slider-track-color-rtl:linear-gradient(to left, red, green 100%);
             "
         >
             <sp-slider
+                style="
+                    --spectrum-slider-track-color:linear-gradient(to right, red, green 100%);
+                    --spectrum-slider-track-color-rtl:linear-gradient(to left, red, green 100%);
+                "
                 label="Opacity"
                 max="100"
                 min="0"
@@ -607,6 +609,9 @@ export const ThreeHandlesPc = (args: StoryArgs = {}): TemplateResult => {
         </div>
     `;
 };
+ThreeHandlesPc.args = {
+    variant: 'range',
+};
 
 export const ThreeHandlesOrdered = (args: StoryArgs = {}): TemplateResult => {
     return html`
@@ -644,6 +649,7 @@ export const ThreeHandlesOrdered = (args: StoryArgs = {}): TemplateResult => {
     `;
 };
 ThreeHandlesOrdered.args = {
+    variant: 'range',
     tickStep: 10,
 };
 
@@ -798,7 +804,8 @@ export const ThreeHandlesComplex = (args: StoryArgs = {}): TemplateResult => {
         </div>
     `;
 };
-ThreeHandlesOrdered.args = {
+ThreeHandlesComplex.args = {
+    variant: 'range',
     tickStep: 10,
 };
 
diff --git a/scripts/spectrum-tokens.js b/scripts/spectrum-tokens.js
index a9444cfc449..9a7234af004 100644
--- a/scripts/spectrum-tokens.js
+++ b/scripts/spectrum-tokens.js
@@ -61,6 +61,7 @@ const tokenPackages = [
     'colorhandle',
     'colorloupe',
     'illustratedmessage',
+    'slider',
 ];
 
 const packagePaths = tokenPackages.map((packageName) => {
diff --git a/tools/styles/express/spectrum-core-global.css b/tools/styles/express/spectrum-core-global.css
index 65205492624..2c8d18528a3 100644
--- a/tools/styles/express/spectrum-core-global.css
+++ b/tools/styles/express/spectrum-core-global.css
@@ -2695,34 +2695,6 @@ governing permissions and limitations under the License.
     --spectrum-slide-label-text-size: var(
         --spectrum-global-dimension-font-size-100
     );
-    --spectrum-slider-m-handle-gap: 0px;
-    --spectrum-slider-m-handle-border-radius: 100%;
-    --spectrum-slider-m-track-border-radius: var(
-        --spectrum-alias-border-radius-xsmall
-    );
-    --spectrum-slider-m-track-inside-border-radius: 0px;
-    --spectrum-slider-m-track-height: var(--spectrum-global-dimension-size-50);
-    --spectrum-slider-m-track-color: var(--spectrum-global-color-gray-200);
-    --spectrum-slider-m-track-fill-color: var(--spectrum-global-color-gray-600);
-    --spectrum-slider-m-tick-mark-color: var(--spectrum-global-color-gray-200);
-    --spectrum-slider-m-track-color-disabled: var(
-        --spectrum-global-color-gray-200
-    );
-    --spectrum-slider-m-handle-background-color: var(
-        --spectrum-global-color-gray-50
-    );
-    --spectrum-slider-m-handle-border-color: var(
-        --spectrum-global-color-gray-800
-    );
-    --spectrum-slider-m-handle-border-color-hover: var(
-        --spectrum-global-color-gray-900
-    );
-    --spectrum-slider-m-handle-border-color-disabled: var(
-        --spectrum-global-color-gray-300
-    );
-    --spectrum-slider-label-text-size: var(
-        --spectrum-global-dimension-font-size-100
-    );
     --spectrum-fieldlabel-xl-text-size: var(
         --spectrum-global-dimension-font-size-300
     );
diff --git a/tools/styles/express/spectrum-theme-dark.css b/tools/styles/express/spectrum-theme-dark.css
index b43a6856927..62b49ec8cc0 100644
--- a/tools/styles/express/spectrum-theme-dark.css
+++ b/tools/styles/express/spectrum-theme-dark.css
@@ -333,159 +333,6 @@ governing permissions and limitations under the License.
     --spectrum-scrollbar-mac-l-track-background-color: var(
         --spectrum-global-color-gray-100
     );
-    --spectrum-slider-s-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-s-ramp-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-s-range-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-s-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-s-ramp-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-s-range-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-s-editable-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-s-ramp-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-s-range-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-s-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-s-ramp-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-s-range-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-m-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-m-ramp-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-m-range-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-m-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-m-ramp-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-m-range-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-m-editable-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-m-ramp-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-m-range-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-m-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-m-ramp-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-m-range-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-l-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-l-ramp-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-l-range-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-l-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-l-ramp-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-l-range-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-l-editable-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-l-ramp-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-l-range-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-l-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-l-ramp-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-l-range-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-xl-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-xl-ramp-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-xl-range-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-xl-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-xl-ramp-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-xl-range-tick-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-xl-editable-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-xl-ramp-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-xl-range-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-xl-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-xl-ramp-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-xl-range-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
     --spectrum-well-background-color: hsla(0, 0%, 92%, 0.02);
     --spectrum-well-border-color: hsla(0, 0%, 100%, 0.05);
 }
diff --git a/tools/styles/express/spectrum-theme-light.css b/tools/styles/express/spectrum-theme-light.css
index af4e9ddfa3d..24c68e2d9d5 100644
--- a/tools/styles/express/spectrum-theme-light.css
+++ b/tools/styles/express/spectrum-theme-light.css
@@ -333,159 +333,6 @@ governing permissions and limitations under the License.
     --spectrum-scrollbar-mac-l-track-background-color: var(
         --spectrum-global-color-gray-75
     );
-    --spectrum-slider-s-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-s-ramp-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-s-range-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-s-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-s-ramp-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-s-range-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-s-editable-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-s-ramp-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-s-range-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-s-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-s-ramp-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-s-range-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-m-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-m-ramp-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-m-range-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-m-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-m-ramp-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-m-range-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-m-editable-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-m-ramp-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-m-range-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-m-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-m-ramp-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-m-range-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-l-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-l-ramp-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-l-range-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-l-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-l-ramp-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-l-range-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-l-editable-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-l-ramp-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-l-range-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-l-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-l-ramp-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-l-range-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-xl-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-xl-ramp-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-xl-range-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-xl-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-xl-ramp-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-xl-range-tick-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-xl-editable-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-xl-ramp-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-xl-range-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-xl-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-xl-ramp-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-xl-range-radial-reaction-color: rgba(34, 34, 34, 0.6);
     --spectrum-well-background-color: rgba(34, 34, 34, 0.02);
     --spectrum-well-border-color: rgba(0, 0, 0, 0.05);
 }
diff --git a/tools/styles/spectrum-core-global.css b/tools/styles/spectrum-core-global.css
index 62c16ba9fc4..0566fea2823 100644
--- a/tools/styles/spectrum-core-global.css
+++ b/tools/styles/spectrum-core-global.css
@@ -2677,9 +2677,6 @@ governing permissions and limitations under the License.
     --spectrum-colorcontrol-checkerboard-dark-color: var(
         --spectrum-global-color-static-gray-300
     );
-    --spectrum-slider-m-track-inside-border-radius: var(
-        --spectrum-slider-m-track-border-radius
-    );
     --spectrum-slider-label-text-size: var(
         --spectrum-global-dimension-font-size-75
     );
diff --git a/tools/styles/spectrum-theme-dark.css b/tools/styles/spectrum-theme-dark.css
index d815be14e47..b3858db2a35 100644
--- a/tools/styles/spectrum-theme-dark.css
+++ b/tools/styles/spectrum-theme-dark.css
@@ -311,159 +311,6 @@ governing permissions and limitations under the License.
     --spectrum-scrollbar-mac-l-track-background-color: var(
         --spectrum-global-color-gray-100
     );
-    --spectrum-slider-s-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-s-ramp-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-s-range-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-s-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-s-ramp-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-s-range-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-s-editable-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-s-ramp-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-s-range-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-s-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-s-ramp-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-s-range-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-m-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-m-ramp-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-m-range-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-m-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-m-ramp-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-m-range-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-m-editable-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-m-ramp-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-m-range-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-m-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-m-ramp-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-m-range-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-l-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-l-ramp-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-l-range-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-l-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-l-ramp-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-l-range-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-l-editable-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-l-ramp-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-l-range-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-l-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-l-ramp-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-l-range-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-xl-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-xl-ramp-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-xl-range-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-xl-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-xl-ramp-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-xl-range-tick-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-xl-editable-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-xl-ramp-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-xl-range-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-xl-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-xl-ramp-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-xl-range-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
     --spectrum-well-background-color: hsla(0, 0%, 92%, 0.02);
     --spectrum-well-border-color: hsla(0, 0%, 100%, 0.05);
 }
diff --git a/tools/styles/spectrum-theme-darkest.css b/tools/styles/spectrum-theme-darkest.css
index 6177f43881c..3358bd44a6b 100644
--- a/tools/styles/spectrum-theme-darkest.css
+++ b/tools/styles/spectrum-theme-darkest.css
@@ -311,158 +311,5 @@ governing permissions and limitations under the License.
     --spectrum-scrollbar-mac-l-track-background-color: var(
         --spectrum-global-color-gray-100
     );
-    --spectrum-slider-s-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-s-ramp-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-s-range-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-s-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-s-ramp-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-s-range-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-s-editable-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-s-ramp-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-s-range-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-s-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-s-ramp-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-s-range-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-m-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-m-ramp-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-m-range-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-m-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-m-ramp-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-m-range-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-m-editable-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-m-ramp-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-m-range-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-m-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-m-ramp-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-m-range-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-l-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-l-ramp-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-l-range-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-l-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-l-ramp-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-l-range-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-l-editable-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-l-ramp-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-l-range-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-l-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-l-ramp-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-l-range-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-xl-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-xl-ramp-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-xl-range-tick-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-xl-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-xl-ramp-tick-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-xl-range-tick-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-xl-editable-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-xl-ramp-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-xl-range-editable-radial-reaction-color: hsla(
-        0,
-        0%,
-        92%,
-        0.6
-    );
-    --spectrum-slider-xl-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-xl-ramp-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
-    --spectrum-slider-xl-range-radial-reaction-color: hsla(0, 0%, 92%, 0.6);
     --spectrum-well-background-color: hsla(0, 0%, 92%, 0.02);
 }
diff --git a/tools/styles/spectrum-theme-light.css b/tools/styles/spectrum-theme-light.css
index 91bb58a2d94..87de107d15f 100644
--- a/tools/styles/spectrum-theme-light.css
+++ b/tools/styles/spectrum-theme-light.css
@@ -311,158 +311,5 @@ governing permissions and limitations under the License.
     --spectrum-scrollbar-mac-l-track-background-color: var(
         --spectrum-global-color-gray-75
     );
-    --spectrum-slider-s-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-s-ramp-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-s-range-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-s-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-s-ramp-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-s-range-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-s-editable-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-s-ramp-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-s-range-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-s-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-s-ramp-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-s-range-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-m-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-m-ramp-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-m-range-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-m-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-m-ramp-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-m-range-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-m-editable-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-m-ramp-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-m-range-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-m-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-m-ramp-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-m-range-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-l-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-l-ramp-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-l-range-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-l-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-l-ramp-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-l-range-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-l-editable-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-l-ramp-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-l-range-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-l-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-l-ramp-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-l-range-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-xl-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-xl-ramp-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-xl-range-tick-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-xl-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-xl-ramp-tick-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-xl-range-tick-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-xl-editable-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-xl-ramp-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-xl-range-editable-radial-reaction-color: rgba(
-        34,
-        34,
-        34,
-        0.6
-    );
-    --spectrum-slider-xl-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-xl-ramp-radial-reaction-color: rgba(34, 34, 34, 0.6);
-    --spectrum-slider-xl-range-radial-reaction-color: rgba(34, 34, 34, 0.6);
     --spectrum-well-background-color: rgba(34, 34, 34, 0.02);
 }
diff --git a/tools/styles/tokens/express/global-vars.css b/tools/styles/tokens/express/global-vars.css
index 437ec1879b3..2e2d5ec3ded 100644
--- a/tools/styles/tokens/express/global-vars.css
+++ b/tools/styles/tokens/express/global-vars.css
@@ -1254,7 +1254,17 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
+/*!
+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.
+*/
 /*!
 Copyright 2023 Adobe. All rights reserved.
 This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -1517,3 +1527,37 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
+:host,
+:root {
+    --system-spectrum-slider-track-color: var(--spectrum-gray-200);
+    --system-spectrum-slider-track-fill-color: var(--spectrum-gray-600);
+    --system-spectrum-slider-ramp-track-color: var(--spectrum-gray-300);
+    --system-spectrum-slider-ramp-track-color-disabled: var(
+        --spectrum-gray-200
+    );
+    --system-spectrum-slider-handle-background-color: var(--spectrum-gray-50);
+    --system-spectrum-slider-handle-background-color-disabled: var(
+        --spectrum-gray-50
+    );
+    --system-spectrum-slider-ramp-handle-background-color: var(
+        --spectrum-gray-50
+    );
+    --system-spectrum-slider-ticks-handle-background-color: var(
+        --spectrum-gray-50
+    );
+    --system-spectrum-slider-handle-border-color: var(--spectrum-gray-800);
+    --system-spectrum-slider-handle-disabled-background-color: var(
+        --spectrum-gray-50
+    );
+    --system-spectrum-slider-tick-mark-color: var(--spectrum-gray-200);
+    --system-spectrum-slider-handle-border-color-hover: var(
+        --spectrum-gray-900
+    );
+    --system-spectrum-slider-handle-border-color-down: var(--spectrum-gray-900);
+    --system-spectrum-slider-handle-border-color-key-focus: var(
+        --spectrum-gray-900
+    );
+    --system-spectrum-slider-handle-focus-ring-color-key-focus: var(
+        --spectrum-focus-indicator-color
+    );
+}
diff --git a/tools/styles/tokens/spectrum/global-vars.css b/tools/styles/tokens/spectrum/global-vars.css
index fdab4810fcb..3258d4a21ec 100644
--- a/tools/styles/tokens/spectrum/global-vars.css
+++ b/tools/styles/tokens/spectrum/global-vars.css
@@ -1281,3 +1281,36 @@ governing permissions and limitations under the License.
     --system-spectrum-picker-border-color-active: var(--spectrum-gray-700);
     --system-spectrum-picker-border-color-key-focus: var(--spectrum-gray-600);
 }
+
+:host,
+:root {
+    --system-spectrum-slider-track-color: var(--spectrum-gray-300);
+    --system-spectrum-slider-track-fill-color: var(--spectrum-gray-700);
+    --system-spectrum-slider-ramp-track-color: var(--spectrum-gray-400);
+    --system-spectrum-slider-ramp-track-color-disabled: var(
+        --spectrum-gray-200
+    );
+    --system-spectrum-slider-handle-background-color: transparent;
+    --system-spectrum-slider-handle-background-color-disabled: transparent;
+    --system-spectrum-slider-ramp-handle-background-color: var(
+        --spectrum-gray-100
+    );
+    --system-spectrum-slider-ticks-handle-background-color: var(
+        --spectrum-gray-100
+    );
+    --system-spectrum-slider-handle-border-color: var(--spectrum-gray-700);
+    --system-spectrum-slider-handle-disabled-background-color: var(
+        --spectrum-gray-100
+    );
+    --system-spectrum-slider-tick-mark-color: var(--spectrum-gray-300);
+    --system-spectrum-slider-handle-border-color-hover: var(
+        --spectrum-gray-800
+    );
+    --system-spectrum-slider-handle-border-color-down: var(--spectrum-gray-800);
+    --system-spectrum-slider-handle-border-color-key-focus: var(
+        --spectrum-gray-800
+    );
+    --system-spectrum-slider-handle-focus-ring-color-key-focus: var(
+        --spectrum-focus-indicator-color
+    );
+}
diff --git a/yarn.lock b/yarn.lock
index cfa3df1391b..028dc7faa61 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4467,10 +4467,10 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-4.0.46.tgz#1bee1a9738ceaefd151459e9b15df39437b4632d"
   integrity sha512-9NAFK9IyTV05wr4VTYwWwlywgL1cGFkXUyiOH6fhJ2uRICvDxEMOwdpsCihCVaphi99GcjqN5ppIDtSntCL3aQ==
 
-"@spectrum-css/fieldlabel@^5.0.15":
-  version "5.0.15"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-5.0.15.tgz#74a1ab213ed96995a26ed99b3ff40d543d34b493"
-  integrity sha512-ZJ3Q7ih48xHPkKDnJtMevEt5Psh6yhDA2yyWxFvZsn/vjapsCGho7+CGaZCshbiN2gVviYICRRrzo9nAMQ++IA==
+"@spectrum-css/fieldlabel@^7.0.1":
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-7.0.1.tgz#c363b6a6053bf820064bc6919323b121378b8f21"
+  integrity sha512-h3Ti0NbrfhBjBoUDcrnGFCbjbqwdjSz3we00FNLwxbmEKojE1emvghLe7hEFvGZ1p9jFF2J+DgT0uB/361OSFg==
 
 "@spectrum-css/helptext@^4.0.31":
   version "4.0.31"
@@ -4547,10 +4547,10 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/sidenav/-/sidenav-3.0.44.tgz#cd5d665f4b81bfbece2eeafa2f802fca6a0c43ab"
   integrity sha512-VDwmGt5iHXqanMfOgLf0vSW3y8yNtFfU1laG/jFRWdSC3ZZW0Ul02rxeM2YHrQjgV59oCcLd8SRz0qyyTUH1VA==
 
-"@spectrum-css/slider@^3.1.25":
-  version "3.1.25"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/slider/-/slider-3.1.25.tgz#bf65610cad5a8706abec23fb920ce3d6bcd972e9"
-  integrity sha512-nS2l9mvvBwAxqwlX9PRvqtfumdN/rGi8gtVD6VflImUG9LNhk/HXlUOXnWtri6DRIk52Vv9CMsjFbtlfsg9oSw==
+"@spectrum-css/slider@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/slider/-/slider-4.0.1.tgz#5ec3e6d6239eccff30686df9f7b63ab0f9a57d36"
+  integrity sha512-wUAhoRbnwzXj5Vzws5QOOxslsS7tyt5jARX1mI+bjB1e+tQo3uWz3SBnBauvf70e4ppfyvHXyDD4xKB44nAE+A==
 
 "@spectrum-css/splitbutton@^5.0.45":
   version "5.0.45"

From 1dbc4bbf51e877817ab6a54f8e7de68f9118e5d0 Mon Sep 17 00:00:00 2001
From: Westbrook Johnson <westbrook.johnson@gmail.com>
Date: Fri, 19 May 2023 16:06:51 -0400
Subject: [PATCH 2/2] ci: update golden images cache

---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index f2b5adf9330..01262013b05 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 0eea111a6cbf832e3bce71fba23410df534bef25
+        default: f01d40f7b72391e43aaa3ca1dc51b556b2ff9a46
     wireit_cache_name:
         type: string
         default: wireit