diff --git a/src-docs/src/views/color_picker/color_stops.js b/src-docs/src/views/color_picker/color_stops.tsx
similarity index 72%
rename from src-docs/src/views/color_picker/color_stops.js
rename to src-docs/src/views/color_picker/color_stops.tsx
index 779a5f09bd2..a035b8e6847 100644
--- a/src-docs/src/views/color_picker/color_stops.js
+++ b/src-docs/src/views/color_picker/color_stops.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 
 import {
   EuiColorStops,
+  EuiColorStopsProps,
   EuiFormRow,
   EuiRange,
   EuiFlexGroup,
@@ -24,7 +25,9 @@ export default () => {
   const [value, setValue] = useState(10);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
-  const [extendedColorStops, setExtendedColorStops] = useState([
+  const [extendedColorStops, setExtendedColorStops] = useState<
+    EuiColorStopsProps['colorStops']
+  >([
     {
       stop: 100,
       color: '#54B399',
@@ -39,14 +42,18 @@ export default () => {
     },
   ]);
 
-  const handleExtendedChange = (colorStops) => {
+  const handleExtendedChange = (
+    colorStops: EuiColorStopsProps['colorStops']
+  ) => {
     setExtendedColorStops(colorStops);
   };
 
-  const [emptyColorStops, setEmptyColorStops] = useState([]);
+  const [emptyColorStops, setEmptyColorStops] = useState<
+    EuiColorStopsProps['colorStops']
+  >([]);
 
-  const handleEmptyChange = (colorStops) => {
-    setEmptyColorStops(colorStops);
+  const handleEmptyChange: EuiColorStopsProps['onChange'] = (colorStops) => {
+    setEmptyColorStops(colorStops as EuiColorStopsProps['colorStops']);
   };
 
   const onButtonClick = () =>
@@ -79,8 +86,8 @@ export default () => {
       <EuiFormRow label="Standard">
         <EuiColorStops
           label="Standard"
-          onChange={setStandardColorStops}
-          colorStops={standardColorStops}
+          onChange={setStandardColorStops as EuiColorStopsProps['onChange']}
+          colorStops={standardColorStops as EuiColorStopsProps['colorStops']}
           min={0}
           max={100}
         />
@@ -88,17 +95,17 @@ export default () => {
       <EuiFormRow label="Random new color">
         <EuiColorStops
           label="Random new color"
-          onChange={setRandomColorStops}
-          colorStops={randomColorStops}
+          onChange={setRandomColorStops as EuiColorStopsProps['onChange']}
+          colorStops={randomColorStops as EuiColorStopsProps['colorStops']}
           min={0}
           max={100}
-          addColor={addRandomColor}
+          addColor={addRandomColor as EuiColorStopsProps['addColor']}
         />
       </EuiFormRow>
       <EuiFormRow label="Extended range">
         <EuiColorStops
           label="Extended range"
-          onChange={handleExtendedChange}
+          onChange={() => handleExtendedChange}
           colorStops={extendedColorStops}
           min={100}
           max={400}
@@ -107,8 +114,8 @@ export default () => {
       <EuiFormRow label="Fixed color segments">
         <EuiColorStops
           label="Fixed color segments"
-          onChange={setFixedColorStops}
-          colorStops={fixedColorStops}
+          onChange={setFixedColorStops as EuiColorStopsProps['onChange']}
+          colorStops={fixedColorStops as EuiColorStopsProps['colorStops']}
           min={0}
           max={100}
           stopType="fixed"
@@ -120,8 +127,8 @@ export default () => {
           <EuiFlexItem>
             <EuiColorStops
               label="Stepped color segments"
-              onChange={setSteppedColorStops}
-              colorStops={steppedColorStops}
+              onChange={setSteppedColorStops as EuiColorStopsProps['onChange']}
+              colorStops={steppedColorStops as EuiColorStopsProps['colorStops']}
               stepNumber={value}
               min={0}
               max={100}
@@ -139,7 +146,7 @@ export default () => {
               <EuiFormRow label="Number of steps" display="columnCompressed">
                 <EuiRange
                   value={value}
-                  onChange={(e) => setValue(parseInt(e.target.value))}
+                  onChange={(e) => setValue(Number(e.currentTarget.value))}
                   showInput
                   aria-label="Change the number of steps"
                   min={2}
diff --git a/src/components/color_picker/_index.scss b/src/components/color_picker/_index.scss
index 895912e9bc9..41255ed1181 100644
--- a/src/components/color_picker/_index.scss
+++ b/src/components/color_picker/_index.scss
@@ -3,6 +3,5 @@
 @import 'color_picker_swatch';
 @import 'hue';
 @import 'saturation';
-@import 'color_stops/index';
 @import 'color_palette_picker/index';
 @import 'color_palette_display/index';
\ No newline at end of file
diff --git a/src/components/color_picker/color_picker.styles.ts b/src/components/color_picker/color_picker.styles.ts
new file mode 100644
index 00000000000..7a21fa44803
--- /dev/null
+++ b/src/components/color_picker/color_picker.styles.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { UseEuiTheme } from '../../services';
+import { mathWithUnits } from '../../global_styling';
+
+export const euiColorPickerVariables = (euiThemeContext: UseEuiTheme) => {
+  const euiTheme = euiThemeContext.euiTheme;
+
+  return {
+    width: mathWithUnits(
+      [euiTheme.size.l, euiTheme.size.s],
+      (x, y) => x * 5 + y * 4
+    ),
+  };
+};
diff --git a/src/components/color_picker/color_stops/__snapshots__/color_stop_thumb.test.tsx.snap b/src/components/color_picker/color_stops/__snapshots__/color_stop_thumb.test.tsx.snap
index 2ae715765ae..cea181cc1c7 100644
--- a/src/components/color_picker/color_stops/__snapshots__/color_stop_thumb.test.tsx.snap
+++ b/src/components/color_picker/color_stops/__snapshots__/color_stop_thumb.test.tsx.snap
@@ -2,12 +2,12 @@
 
 exports[`renders EuiColorStopThumb 1`] = `
 <div
-  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover"
+  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover-euiColorStopThumbPopover"
   data-test-subj="test subject string"
   style="left:0%"
 >
   <div
-    class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+    class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
   >
     <button
       aria-disabled="false"
@@ -15,7 +15,7 @@ exports[`renders EuiColorStopThumb 1`] = `
       aria-valuemax="24"
       aria-valuemin="0"
       aria-valuenow="0"
-      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
       data-test-subj="euiColorStopThumb"
       role="slider"
       style="background:rgb(255,0,0)"
@@ -29,12 +29,12 @@ exports[`renders EuiColorStopThumb 1`] = `
 
 exports[`renders disabled EuiColorStopThumb 1`] = `
 <div
-  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover"
+  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover-euiColorStopThumbPopover"
   data-test-subj="test subject string"
   style="left:0%"
 >
   <div
-    class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+    class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
   >
     <button
       aria-disabled="true"
@@ -42,7 +42,7 @@ exports[`renders disabled EuiColorStopThumb 1`] = `
       aria-valuemax="24"
       aria-valuemin="0"
       aria-valuenow="0"
-      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
       data-test-subj="euiColorStopThumb"
       disabled=""
       role="slider"
@@ -57,12 +57,12 @@ exports[`renders disabled EuiColorStopThumb 1`] = `
 
 exports[`renders picker-only EuiColorStopThumb 1`] = `
 <div
-  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover"
+  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover-euiColorStopThumbPopover"
   data-test-subj="test subject string"
   style="left:0%"
 >
   <div
-    class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+    class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
   >
     <button
       aria-disabled="false"
@@ -70,7 +70,7 @@ exports[`renders picker-only EuiColorStopThumb 1`] = `
       aria-valuemax="24"
       aria-valuemin="0"
       aria-valuenow="0"
-      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
       data-test-subj="euiColorStopThumb"
       role="slider"
       style="background:rgb(255,0,0)"
@@ -84,12 +84,12 @@ exports[`renders picker-only EuiColorStopThumb 1`] = `
 
 exports[`renders readOnly EuiColorStopThumb 1`] = `
 <div
-  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover"
+  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover-euiColorStopThumbPopover"
   data-test-subj="test subject string"
   style="left:0%"
 >
   <div
-    class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+    class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
   >
     <button
       aria-disabled="false"
@@ -97,7 +97,7 @@ exports[`renders readOnly EuiColorStopThumb 1`] = `
       aria-valuemax="24"
       aria-valuemin="0"
       aria-valuenow="0"
-      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
       data-test-subj="euiColorStopThumb"
       role="slider"
       style="background:rgb(255,0,0)"
@@ -111,12 +111,12 @@ exports[`renders readOnly EuiColorStopThumb 1`] = `
 
 exports[`renders swatch-only EuiColorStopThumb 1`] = `
 <div
-  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover"
+  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover-euiColorStopThumbPopover"
   data-test-subj="test subject string"
   style="left:0%"
 >
   <div
-    class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+    class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
   >
     <button
       aria-disabled="false"
@@ -124,7 +124,7 @@ exports[`renders swatch-only EuiColorStopThumb 1`] = `
       aria-valuemax="24"
       aria-valuemin="0"
       aria-valuenow="0"
-      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
       data-test-subj="euiColorStopThumb"
       role="slider"
       style="background:rgb(255,0,0)"
diff --git a/src/components/color_picker/color_stops/__snapshots__/color_stops.test.tsx.snap b/src/components/color_picker/color_stops/__snapshots__/color_stops.test.tsx.snap
index 8299d2b5f78..a4eb02dba39 100644
--- a/src/components/color_picker/color_stops/__snapshots__/color_stops.test.tsx.snap
+++ b/src/components/color_picker/color_stops/__snapshots__/color_stops.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`renders EuiColorStops 1`] = `
 <div
   aria-label="aria-label"
-  class="euiRangeWrapper euiColorStops testClass1 testClass2 emotion-euiRangeWrapper-regular"
+  class="euiRangeWrapper euiColorStops testClass1 testClass2 css-zjn0-euiRangeWrapper-regular-euiColorStops-isEnabled"
   data-test-subj="euiColorStops test subject string"
   tabindex="0"
 >
@@ -14,31 +14,31 @@ exports[`renders EuiColorStops 1`] = `
     Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
   </p>
   <div
-    class="euiRangeTrack emotion-euiRangeTrack"
+    class="euiRangeTrack euiColorStops__track emotion-euiRangeTrack-euiColorStops__track"
   >
     <div
       class="euiRangeHighlight euiColorStops__highlight emotion-euiRangeHighlight"
     >
       <div
         class="euiRangeHighlight__progress emotion-euiRangeHighlight__progress"
-        style="background:linear-gradient(to right,currentColor, currentColor undefined%, rgb(255,0,0) undefined%,rgb(0,255,0) undefined%,rgb(0,0,255) undefined%);margin-inline-start:0%;inline-size:100%"
+        style="background:linear-gradient(to right,transparent, transparent undefined%, rgb(255,0,0) undefined%,rgb(0,255,0) undefined%,rgb(0,0,255) undefined%);margin-inline-start:0%;inline-size:100%"
       />
     </div>
     <div
-      class="euiColorStops__addContainer"
+      class="euiColorStops__addContainer emotion-euiColorStopsAddContainer-isEnabled"
       data-test-subj="euiColorStopsAdd"
     >
       <div
-        class="euiColorStops__addTarget"
+        class="euiColorStops__addTarget emotion-euiColorStops__addTarget"
         style="left:0%"
       />
     </div>
     <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover"
+      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
       style="left:0%"
     >
       <div
-        class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
       >
         <button
           aria-disabled="false"
@@ -47,7 +47,7 @@ exports[`renders EuiColorStops 1`] = `
           aria-valuemin="0"
           aria-valuenow="0"
           aria-valuetext="Stop: 0, Color: #FF0000 (1 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
           data-index="euiColorStop_0"
           data-test-subj="euiColorStopThumb"
           role="slider"
@@ -59,11 +59,11 @@ exports[`renders EuiColorStops 1`] = `
       </div>
     </div>
     <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover"
+      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
       style="left:21%"
     >
       <div
-        class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
       >
         <button
           aria-disabled="false"
@@ -72,7 +72,7 @@ exports[`renders EuiColorStops 1`] = `
           aria-valuemin="1"
           aria-valuenow="25"
           aria-valuetext="Stop: 25, Color: #00FF00 (2 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
           data-index="euiColorStop_1"
           data-test-subj="euiColorStopThumb"
           role="slider"
@@ -84,11 +84,11 @@ exports[`renders EuiColorStops 1`] = `
       </div>
     </div>
     <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover"
+      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
       style="left:29.4%"
     >
       <div
-        class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
       >
         <button
           aria-disabled="false"
@@ -97,7 +97,7 @@ exports[`renders EuiColorStops 1`] = `
           aria-valuemin="26"
           aria-valuenow="35"
           aria-valuetext="Stop: 35, Color: #0000FF (3 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
           data-index="euiColorStop_2"
           data-test-subj="euiColorStopThumb"
           role="slider"
@@ -115,7 +115,7 @@ exports[`renders EuiColorStops 1`] = `
 exports[`renders compressed EuiColorStops 1`] = `
 <div
   aria-label="aria-label"
-  class="euiRangeWrapper euiColorStops testClass1 testClass2 emotion-euiRangeWrapper-regular"
+  class="euiRangeWrapper euiColorStops testClass1 testClass2 css-zjn0-euiRangeWrapper-regular-euiColorStops-isEnabled"
   data-test-subj="euiColorStops test subject string"
   tabindex="0"
 >
@@ -126,31 +126,31 @@ exports[`renders compressed EuiColorStops 1`] = `
     Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
   </p>
   <div
-    class="euiRangeTrack emotion-euiRangeTrack"
+    class="euiRangeTrack euiColorStops__track emotion-euiRangeTrack-euiColorStops__track"
   >
     <div
       class="euiRangeHighlight euiColorStops__highlight emotion-euiRangeHighlight"
     >
       <div
         class="euiRangeHighlight__progress emotion-euiRangeHighlight__progress"
-        style="background:linear-gradient(to right,currentColor, currentColor undefined%, rgb(255,0,0) undefined%,rgb(0,255,0) undefined%,rgb(0,0,255) undefined%);margin-inline-start:0%;inline-size:100%"
+        style="background:linear-gradient(to right,transparent, transparent undefined%, rgb(255,0,0) undefined%,rgb(0,255,0) undefined%,rgb(0,0,255) undefined%);margin-inline-start:0%;inline-size:100%"
       />
     </div>
     <div
-      class="euiColorStops__addContainer"
+      class="euiColorStops__addContainer emotion-euiColorStopsAddContainer-isEnabled"
       data-test-subj="euiColorStopsAdd"
     >
       <div
-        class="euiColorStops__addTarget"
+        class="euiColorStops__addTarget emotion-euiColorStops__addTarget"
         style="left:0%"
       />
     </div>
     <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover"
+      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
       style="left:0%"
     >
       <div
-        class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
       >
         <button
           aria-disabled="false"
@@ -159,7 +159,7 @@ exports[`renders compressed EuiColorStops 1`] = `
           aria-valuemin="0"
           aria-valuenow="0"
           aria-valuetext="Stop: 0, Color: #FF0000 (1 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
           data-index="euiColorStop_0"
           data-test-subj="euiColorStopThumb"
           role="slider"
@@ -171,11 +171,11 @@ exports[`renders compressed EuiColorStops 1`] = `
       </div>
     </div>
     <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover"
+      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
       style="left:21%"
     >
       <div
-        class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
       >
         <button
           aria-disabled="false"
@@ -184,7 +184,7 @@ exports[`renders compressed EuiColorStops 1`] = `
           aria-valuemin="1"
           aria-valuenow="25"
           aria-valuetext="Stop: 25, Color: #00FF00 (2 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
           data-index="euiColorStop_1"
           data-test-subj="euiColorStopThumb"
           role="slider"
@@ -196,11 +196,11 @@ exports[`renders compressed EuiColorStops 1`] = `
       </div>
     </div>
     <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover"
+      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
       style="left:29.4%"
     >
       <div
-        class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
       >
         <button
           aria-disabled="false"
@@ -209,7 +209,7 @@ exports[`renders compressed EuiColorStops 1`] = `
           aria-valuemin="26"
           aria-valuenow="35"
           aria-valuetext="Stop: 35, Color: #0000FF (3 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
           data-index="euiColorStop_2"
           data-test-subj="euiColorStopThumb"
           role="slider"
@@ -227,7 +227,7 @@ exports[`renders compressed EuiColorStops 1`] = `
 exports[`renders disabled EuiColorStops 1`] = `
 <div
   aria-label="aria-label"
-  class="euiRangeWrapper euiColorStops euiColorStops-isDisabled testClass1 testClass2 emotion-euiRangeWrapper-regular"
+  class="euiRangeWrapper euiColorStops testClass1 testClass2 emotion-euiRangeWrapper-regular-euiColorStops-isDisabled"
   data-test-subj="euiColorStops test subject string"
   tabindex="-1"
 >
@@ -238,31 +238,31 @@ exports[`renders disabled EuiColorStops 1`] = `
     Test:  Disabled. Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
   </p>
   <div
-    class="euiRangeTrack emotion-euiRangeTrack-disabled"
+    class="euiRangeTrack euiColorStops__track emotion-euiRangeTrack-disabled-euiColorStops__track"
   >
     <div
       class="euiRangeHighlight euiColorStops__highlight emotion-euiRangeHighlight"
     >
       <div
         class="euiRangeHighlight__progress emotion-euiRangeHighlight__progress"
-        style="background:linear-gradient(to right,currentColor, currentColor undefined%, rgb(255,0,0) undefined%,rgb(0,255,0) undefined%,rgb(0,0,255) undefined%);margin-inline-start:0%;inline-size:100%"
+        style="background:linear-gradient(to right,transparent, transparent undefined%, rgb(255,0,0) undefined%,rgb(0,255,0) undefined%,rgb(0,0,255) undefined%);margin-inline-start:0%;inline-size:100%"
       />
     </div>
     <div
-      class="euiColorStops__addContainer euiColorStops__addContainer-isDisabled"
+      class="euiColorStops__addContainer emotion-euiColorStopsAddContainer-isDisabled"
       data-test-subj="euiColorStopsAdd"
     >
       <div
-        class="euiColorStops__addTarget"
+        class="euiColorStops__addTarget emotion-euiColorStops__addTarget"
         style="left:0%"
       />
     </div>
     <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover"
+      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
       style="left:0%"
     >
       <div
-        class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
       >
         <button
           aria-disabled="true"
@@ -271,7 +271,7 @@ exports[`renders disabled EuiColorStops 1`] = `
           aria-valuemin="0"
           aria-valuenow="0"
           aria-valuetext="Stop: 0, Color: #FF0000 (1 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
           data-index="euiColorStop_0"
           data-test-subj="euiColorStopThumb"
           disabled=""
@@ -284,11 +284,11 @@ exports[`renders disabled EuiColorStops 1`] = `
       </div>
     </div>
     <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover"
+      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
       style="left:21%"
     >
       <div
-        class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
       >
         <button
           aria-disabled="true"
@@ -297,7 +297,7 @@ exports[`renders disabled EuiColorStops 1`] = `
           aria-valuemin="1"
           aria-valuenow="25"
           aria-valuetext="Stop: 25, Color: #00FF00 (2 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
           data-index="euiColorStop_1"
           data-test-subj="euiColorStopThumb"
           disabled=""
@@ -310,11 +310,11 @@ exports[`renders disabled EuiColorStops 1`] = `
       </div>
     </div>
     <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover"
+      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
       style="left:29.4%"
     >
       <div
-        class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
       >
         <button
           aria-disabled="true"
@@ -323,7 +323,7 @@ exports[`renders disabled EuiColorStops 1`] = `
           aria-valuemin="26"
           aria-valuenow="35"
           aria-valuetext="Stop: 35, Color: #0000FF (3 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
           data-index="euiColorStop_2"
           data-test-subj="euiColorStopThumb"
           disabled=""
@@ -342,7 +342,7 @@ exports[`renders disabled EuiColorStops 1`] = `
 exports[`renders empty EuiColorStops 1`] = `
 <div
   aria-label="aria-label"
-  class="euiRangeWrapper euiColorStops testClass1 testClass2 emotion-euiRangeWrapper-regular"
+  class="euiRangeWrapper euiColorStops testClass1 testClass2 css-zjn0-euiRangeWrapper-regular-euiColorStops-isEnabled"
   data-test-subj="euiColorStops test subject string"
   tabindex="0"
 >
@@ -353,7 +353,7 @@ exports[`renders empty EuiColorStops 1`] = `
     Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
   </p>
   <div
-    class="euiRangeTrack emotion-euiRangeTrack"
+    class="euiRangeTrack euiColorStops__track emotion-euiRangeTrack-euiColorStops__track"
   >
     <div
       class="euiRangeHighlight euiColorStops__highlight emotion-euiRangeHighlight"
@@ -364,11 +364,11 @@ exports[`renders empty EuiColorStops 1`] = `
       />
     </div>
     <div
-      class="euiColorStops__addContainer"
+      class="euiColorStops__addContainer emotion-euiColorStopsAddContainer-isEnabled"
       data-test-subj="euiColorStopsAdd"
     >
       <div
-        class="euiColorStops__addTarget"
+        class="euiColorStops__addTarget emotion-euiColorStops__addTarget"
         style="left:0%"
       />
     </div>
@@ -379,7 +379,7 @@ exports[`renders empty EuiColorStops 1`] = `
 exports[`renders fixed stop EuiColorStops 1`] = `
 <div
   aria-label="aria-label"
-  class="euiRangeWrapper euiColorStops testClass1 testClass2 emotion-euiRangeWrapper-regular"
+  class="euiRangeWrapper euiColorStops testClass1 testClass2 css-zjn0-euiRangeWrapper-regular-euiColorStops-isEnabled"
   data-test-subj="euiColorStops test subject string"
   tabindex="0"
 >
@@ -390,31 +390,31 @@ exports[`renders fixed stop EuiColorStops 1`] = `
     Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
   </p>
   <div
-    class="euiRangeTrack emotion-euiRangeTrack"
+    class="euiRangeTrack euiColorStops__track emotion-euiRangeTrack-euiColorStops__track"
   >
     <div
       class="euiRangeHighlight euiColorStops__highlight emotion-euiRangeHighlight"
     >
       <div
         class="euiRangeHighlight__progress emotion-euiRangeHighlight__progress"
-        style="background:linear-gradient(to right,currentColor, currentColor undefined%, rgb(255,0,0) undefined%, rgb(255,0,0) undefined%,rgb(0,255,0) undefined%, rgb(0,255,0) undefined%,rgb(0,0,255) undefined%);margin-inline-start:0%;inline-size:100%"
+        style="background:linear-gradient(to right,transparent, transparent undefined%, rgb(255,0,0) undefined%, rgb(255,0,0) undefined%,rgb(0,255,0) undefined%, rgb(0,255,0) undefined%,rgb(0,0,255) undefined%);margin-inline-start:0%;inline-size:100%"
       />
     </div>
     <div
-      class="euiColorStops__addContainer"
+      class="euiColorStops__addContainer emotion-euiColorStopsAddContainer-isEnabled"
       data-test-subj="euiColorStopsAdd"
     >
       <div
-        class="euiColorStops__addTarget"
+        class="euiColorStops__addTarget emotion-euiColorStops__addTarget"
         style="left:0%"
       />
     </div>
     <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover"
+      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
       style="left:0%"
     >
       <div
-        class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
       >
         <button
           aria-disabled="false"
@@ -423,7 +423,7 @@ exports[`renders fixed stop EuiColorStops 1`] = `
           aria-valuemin="0"
           aria-valuenow="0"
           aria-valuetext="Stop: 0, Color: #FF0000 (1 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
           data-index="euiColorStop_0"
           data-test-subj="euiColorStopThumb"
           role="slider"
@@ -435,11 +435,11 @@ exports[`renders fixed stop EuiColorStops 1`] = `
       </div>
     </div>
     <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover"
+      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
       style="left:21%"
     >
       <div
-        class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
       >
         <button
           aria-disabled="false"
@@ -448,7 +448,7 @@ exports[`renders fixed stop EuiColorStops 1`] = `
           aria-valuemin="1"
           aria-valuenow="25"
           aria-valuetext="Stop: 25, Color: #00FF00 (2 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
           data-index="euiColorStop_1"
           data-test-subj="euiColorStopThumb"
           role="slider"
@@ -460,11 +460,11 @@ exports[`renders fixed stop EuiColorStops 1`] = `
       </div>
     </div>
     <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover"
+      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
       style="left:29.4%"
     >
       <div
-        class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
       >
         <button
           aria-disabled="false"
@@ -473,7 +473,7 @@ exports[`renders fixed stop EuiColorStops 1`] = `
           aria-valuemin="26"
           aria-valuenow="35"
           aria-valuetext="Stop: 35, Color: #0000FF (3 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
           data-index="euiColorStop_2"
           data-test-subj="euiColorStopThumb"
           role="slider"
@@ -491,7 +491,7 @@ exports[`renders fixed stop EuiColorStops 1`] = `
 exports[`renders free-range EuiColorStops 1`] = `
 <div
   aria-label="aria-label"
-  class="euiRangeWrapper euiColorStops testClass1 testClass2 emotion-euiRangeWrapper-regular"
+  class="euiRangeWrapper euiColorStops testClass1 testClass2 css-zjn0-euiRangeWrapper-regular-euiColorStops-isEnabled"
   data-test-subj="euiColorStops test subject string"
   tabindex="0"
 >
@@ -502,7 +502,7 @@ exports[`renders free-range EuiColorStops 1`] = `
     Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
   </p>
   <div
-    class="euiRangeTrack emotion-euiRangeTrack"
+    class="euiRangeTrack euiColorStops__track emotion-euiRangeTrack-euiColorStops__track"
   >
     <div
       class="euiRangeHighlight euiColorStops__highlight emotion-euiRangeHighlight"
@@ -513,11 +513,11 @@ exports[`renders free-range EuiColorStops 1`] = `
       />
     </div>
     <div
-      class="euiColorStops__addContainer"
+      class="euiColorStops__addContainer emotion-euiColorStopsAddContainer-isEnabled"
       data-test-subj="euiColorStopsAdd"
     >
       <div
-        class="euiColorStops__addTarget"
+        class="euiColorStops__addTarget emotion-euiColorStops__addTarget"
         style="left:0%"
       />
     </div>
@@ -528,7 +528,7 @@ exports[`renders free-range EuiColorStops 1`] = `
 exports[`renders fullWidth EuiColorStops 1`] = `
 <div
   aria-label="aria-label"
-  class="euiRangeWrapper euiColorStops testClass1 testClass2 emotion-euiRangeWrapper-regular-fullWidth"
+  class="euiRangeWrapper euiColorStops testClass1 testClass2 emotion-euiRangeWrapper-regular-fullWidth-euiColorStops-isEnabled"
   data-test-subj="euiColorStops test subject string"
   tabindex="0"
 >
@@ -539,31 +539,31 @@ exports[`renders fullWidth EuiColorStops 1`] = `
     Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
   </p>
   <div
-    class="euiRangeTrack emotion-euiRangeTrack"
+    class="euiRangeTrack euiColorStops__track emotion-euiRangeTrack-euiColorStops__track"
   >
     <div
       class="euiRangeHighlight euiColorStops__highlight emotion-euiRangeHighlight"
     >
       <div
         class="euiRangeHighlight__progress emotion-euiRangeHighlight__progress"
-        style="background:linear-gradient(to right,currentColor, currentColor undefined%, rgb(255,0,0) undefined%,rgb(0,255,0) undefined%,rgb(0,0,255) undefined%);margin-inline-start:0%;inline-size:100%"
+        style="background:linear-gradient(to right,transparent, transparent undefined%, rgb(255,0,0) undefined%,rgb(0,255,0) undefined%,rgb(0,0,255) undefined%);margin-inline-start:0%;inline-size:100%"
       />
     </div>
     <div
-      class="euiColorStops__addContainer"
+      class="euiColorStops__addContainer emotion-euiColorStopsAddContainer-isEnabled"
       data-test-subj="euiColorStopsAdd"
     >
       <div
-        class="euiColorStops__addTarget"
+        class="euiColorStops__addTarget emotion-euiColorStops__addTarget"
         style="left:0%"
       />
     </div>
     <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover"
+      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
       style="left:0%"
     >
       <div
-        class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
       >
         <button
           aria-disabled="false"
@@ -572,7 +572,7 @@ exports[`renders fullWidth EuiColorStops 1`] = `
           aria-valuemin="0"
           aria-valuenow="0"
           aria-valuetext="Stop: 0, Color: #FF0000 (1 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
           data-index="euiColorStop_0"
           data-test-subj="euiColorStopThumb"
           role="slider"
@@ -584,11 +584,11 @@ exports[`renders fullWidth EuiColorStops 1`] = `
       </div>
     </div>
     <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover"
+      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
       style="left:21%"
     >
       <div
-        class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
       >
         <button
           aria-disabled="false"
@@ -597,7 +597,7 @@ exports[`renders fullWidth EuiColorStops 1`] = `
           aria-valuemin="1"
           aria-valuenow="25"
           aria-valuetext="Stop: 25, Color: #00FF00 (2 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
           data-index="euiColorStop_1"
           data-test-subj="euiColorStopThumb"
           role="slider"
@@ -609,11 +609,11 @@ exports[`renders fullWidth EuiColorStops 1`] = `
       </div>
     </div>
     <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover"
+      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
       style="left:29.4%"
     >
       <div
-        class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
       >
         <button
           aria-disabled="false"
@@ -622,7 +622,7 @@ exports[`renders fullWidth EuiColorStops 1`] = `
           aria-valuemin="26"
           aria-valuenow="35"
           aria-valuetext="Stop: 35, Color: #0000FF (3 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
           data-index="euiColorStop_2"
           data-test-subj="euiColorStopThumb"
           role="slider"
@@ -640,7 +640,7 @@ exports[`renders fullWidth EuiColorStops 1`] = `
 exports[`renders max-only EuiColorStops 1`] = `
 <div
   aria-label="aria-label"
-  class="euiRangeWrapper euiColorStops testClass1 testClass2 emotion-euiRangeWrapper-regular"
+  class="euiRangeWrapper euiColorStops testClass1 testClass2 css-zjn0-euiRangeWrapper-regular-euiColorStops-isEnabled"
   data-test-subj="euiColorStops test subject string"
   tabindex="0"
 >
@@ -651,7 +651,7 @@ exports[`renders max-only EuiColorStops 1`] = `
     Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
   </p>
   <div
-    class="euiRangeTrack emotion-euiRangeTrack"
+    class="euiRangeTrack euiColorStops__track emotion-euiRangeTrack-euiColorStops__track"
   >
     <div
       class="euiRangeHighlight euiColorStops__highlight emotion-euiRangeHighlight"
@@ -662,11 +662,11 @@ exports[`renders max-only EuiColorStops 1`] = `
       />
     </div>
     <div
-      class="euiColorStops__addContainer"
+      class="euiColorStops__addContainer emotion-euiColorStopsAddContainer-isEnabled"
       data-test-subj="euiColorStopsAdd"
     >
       <div
-        class="euiColorStops__addTarget"
+        class="euiColorStops__addTarget emotion-euiColorStops__addTarget"
         style="left:0%"
       />
     </div>
@@ -677,7 +677,7 @@ exports[`renders max-only EuiColorStops 1`] = `
 exports[`renders min-only EuiColorStops 1`] = `
 <div
   aria-label="aria-label"
-  class="euiRangeWrapper euiColorStops testClass1 testClass2 emotion-euiRangeWrapper-regular"
+  class="euiRangeWrapper euiColorStops testClass1 testClass2 css-zjn0-euiRangeWrapper-regular-euiColorStops-isEnabled"
   data-test-subj="euiColorStops test subject string"
   tabindex="0"
 >
@@ -688,7 +688,7 @@ exports[`renders min-only EuiColorStops 1`] = `
     Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
   </p>
   <div
-    class="euiRangeTrack emotion-euiRangeTrack"
+    class="euiRangeTrack euiColorStops__track emotion-euiRangeTrack-euiColorStops__track"
   >
     <div
       class="euiRangeHighlight euiColorStops__highlight emotion-euiRangeHighlight"
@@ -699,11 +699,11 @@ exports[`renders min-only EuiColorStops 1`] = `
       />
     </div>
     <div
-      class="euiColorStops__addContainer"
+      class="euiColorStops__addContainer emotion-euiColorStopsAddContainer-isEnabled"
       data-test-subj="euiColorStopsAdd"
     >
       <div
-        class="euiColorStops__addTarget"
+        class="euiColorStops__addTarget emotion-euiColorStops__addTarget"
         style="left:0%"
       />
     </div>
@@ -714,7 +714,7 @@ exports[`renders min-only EuiColorStops 1`] = `
 exports[`renders readOnly EuiColorStops 1`] = `
 <div
   aria-label="aria-label"
-  class="euiRangeWrapper euiColorStops euiColorStops-isReadOnly testClass1 testClass2 emotion-euiRangeWrapper-regular"
+  class="euiRangeWrapper euiColorStops testClass1 testClass2 emotion-euiRangeWrapper-regular-euiColorStops-isEnabled-isReadOnly"
   data-test-subj="euiColorStops test subject string"
   tabindex="0"
 >
@@ -725,31 +725,31 @@ exports[`renders readOnly EuiColorStops 1`] = `
     Test: Read-only.  Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
   </p>
   <div
-    class="euiRangeTrack emotion-euiRangeTrack"
+    class="euiRangeTrack euiColorStops__track emotion-euiRangeTrack-euiColorStops__track"
   >
     <div
       class="euiRangeHighlight euiColorStops__highlight emotion-euiRangeHighlight"
     >
       <div
         class="euiRangeHighlight__progress emotion-euiRangeHighlight__progress"
-        style="background:linear-gradient(to right,currentColor, currentColor undefined%, rgb(255,0,0) undefined%,rgb(0,255,0) undefined%,rgb(0,0,255) undefined%);margin-inline-start:0%;inline-size:100%"
+        style="background:linear-gradient(to right,transparent, transparent undefined%, rgb(255,0,0) undefined%,rgb(0,255,0) undefined%,rgb(0,0,255) undefined%);margin-inline-start:0%;inline-size:100%"
       />
     </div>
     <div
-      class="euiColorStops__addContainer euiColorStops__addContainer-isDisabled"
+      class="euiColorStops__addContainer emotion-euiColorStopsAddContainer-isDisabled"
       data-test-subj="euiColorStopsAdd"
     >
       <div
-        class="euiColorStops__addTarget"
+        class="euiColorStops__addTarget emotion-euiColorStops__addTarget"
         style="left:0%"
       />
     </div>
     <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover"
+      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
       style="left:0%"
     >
       <div
-        class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
       >
         <button
           aria-disabled="false"
@@ -758,7 +758,7 @@ exports[`renders readOnly EuiColorStops 1`] = `
           aria-valuemin="0"
           aria-valuenow="0"
           aria-valuetext="Stop: 0, Color: #FF0000 (1 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
           data-index="euiColorStop_0"
           data-test-subj="euiColorStopThumb"
           role="slider"
@@ -770,11 +770,11 @@ exports[`renders readOnly EuiColorStops 1`] = `
       </div>
     </div>
     <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover"
+      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
       style="left:21%"
     >
       <div
-        class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
       >
         <button
           aria-disabled="false"
@@ -783,7 +783,7 @@ exports[`renders readOnly EuiColorStops 1`] = `
           aria-valuemin="1"
           aria-valuenow="25"
           aria-valuetext="Stop: 25, Color: #00FF00 (2 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
           data-index="euiColorStop_1"
           data-test-subj="euiColorStopThumb"
           role="slider"
@@ -795,11 +795,11 @@ exports[`renders readOnly EuiColorStops 1`] = `
       </div>
     </div>
     <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover"
+      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
       style="left:29.4%"
     >
       <div
-        class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
       >
         <button
           aria-disabled="false"
@@ -808,7 +808,7 @@ exports[`renders readOnly EuiColorStops 1`] = `
           aria-valuemin="26"
           aria-valuenow="35"
           aria-valuetext="Stop: 35, Color: #0000FF (3 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
           data-index="euiColorStop_2"
           data-test-subj="euiColorStopThumb"
           role="slider"
@@ -828,7 +828,7 @@ Object {
   "0": "background",
   "1": "margin-inline-start",
   "2": "inline-size",
-  "background": "linear-gradient(to right,currentColor, currentColor undefined%, rgb(255,0,0) undefined%, rgb(255,0,0) undefined%,rgb(0,255,0) undefined%, rgb(0,255,0) undefined%,rgb(0,0,255) undefined%)",
+  "background": "linear-gradient(to right,transparent, transparent undefined%, rgb(255,0,0) undefined%, rgb(255,0,0) undefined%,rgb(0,255,0) undefined%, rgb(0,255,0) undefined%,rgb(0,0,255) undefined%)",
   "inline-size": "100%",
   "length": 3,
   "margin-inline-start": "0%",
diff --git a/src/components/color_picker/color_stops/_color_stops.scss b/src/components/color_picker/color_stops/_color_stops.scss
deleted file mode 100644
index 868d9e65d7e..00000000000
--- a/src/components/color_picker/color_stops/_color_stops.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-.euiColorStops:not(.euiColorStops-isDisabled) {
-  &:focus {
-    outline: 2px solid $euiFocusRingColor;
-  }
-}
-
-.euiColorStops__addContainer {
-  display: block;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  height: $euiRangeThumbHeight;
-  margin-top: $euiRangeThumbHeight * -.5;
-
-  &:hover:not(.euiColorStops__addContainer-isDisabled) {
-    cursor: pointer;
-
-    .euiColorStops__addTarget {
-      opacity: .7;
-    }
-  }
-}
-
-.euiColorStops__addTarget {
-  @include euiCustomControl($type: 'round');
-  @include euiRangeThumbStyle;
-  position: absolute;
-  top: 0;
-  height: $euiRangeThumbHeight;
-  width: $euiRangeThumbHeight;
-  background-color: $euiColorLightestShade;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity $euiAnimSpeedFast;
-}
-
-.euiColorStop {
-  width: $euiColorPickerWidth;
-}
-
-.euiColorStopPopover.euiPopover {
-  position: absolute;
-  top: 50%;
-  width: $euiRangeThumbWidth;
-  height: $euiRangeThumbHeight;
-  margin-top: $euiRangeThumbHeight * -.5;
-}
-
-.euiColorStopPopover-hasFocus {
-  z-index: 3; // same z-index as .euiRangeThumb
-}
-
-.euiColorStopPopover__anchor {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-
-  // Background color can potentially have opacity
-  // Pseudo element placed below the thumb to prevent the track from showing through
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: $euiRangeThumbHeight;
-    width: $euiRangeThumbHeight;
-    border-radius: $euiRangeThumbHeight;
-    background: $euiColorEmptyShade;
-  }
-}
-
-.euiColorStopThumb.euiRangeThumb:not(:disabled) {
-  top: 0;
-  margin-top: 0;
-  pointer-events: auto;
-  cursor: grab;
-  border: solid ($euiSizeXS - 1px) $euiColorEmptyShade;
-  box-shadow:
-    0 0 0 1px $euiColorMediumShade,
-    0 2px 2px -1px rgba($euiShadowColor, .2),
-    0 1px 5px -2px rgba($euiShadowColor, .2);
-
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-.euiColorStopPopover-isLoadingPanel {
-  // stylelint-disable-next-line declaration-no-important
-  visibility: hidden !important; // Overrides a stateful class on EuiPopover -> EuiPanel
-}
-
-.euiColorStops.euiColorStops-isDragging:not(.euiColorStops-isDisabled):not(.euiColorStops-isReadOnly) {
-  cursor: grabbing;
-}
-
-.euiColorStops__highlight {
-  color: $euiRangeTrackColor;
-}
diff --git a/src/components/color_picker/color_stops/_index.scss b/src/components/color_picker/color_stops/_index.scss
deleted file mode 100644
index 9338d35b24a..00000000000
--- a/src/components/color_picker/color_stops/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'color_stops';
diff --git a/src/components/color_picker/color_stops/color_stop_thumb.styles.ts b/src/components/color_picker/color_stops/color_stop_thumb.styles.ts
new file mode 100644
index 00000000000..802563d64a8
--- /dev/null
+++ b/src/components/color_picker/color_stops/color_stop_thumb.styles.ts
@@ -0,0 +1,93 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../../services';
+import { mathWithUnits } from '../../../global_styling';
+import {
+  euiRangeVariables,
+  euiRangeThumbFocus,
+} from '../../form/range/range.styles';
+import { euiColorPickerVariables } from '../color_picker.styles';
+
+export const euiColorStopThumbStyles = (euiThemeContext: UseEuiTheme) => {
+  return {
+    // Base
+    euiColorStopThumb: css`
+      &:not(:disabled) {
+        inset-block-start: 0;
+        margin-block-start: 0;
+        pointer-events: auto;
+        cursor: grab;
+
+        &:active {
+          cursor: grabbing;
+        }
+      }
+    `,
+    isPopoverOpen: css`
+      ${euiRangeThumbFocus(euiThemeContext)};
+    `,
+  };
+};
+
+export const euiColorStopThumbPopoverStyles = (
+  euiThemeContext: UseEuiTheme
+) => {
+  const range = euiRangeVariables(euiThemeContext);
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    // Base
+    euiColorStopThumbPopover: css`
+      position: absolute;
+      inset-block-start: 50%;
+      inline-size: ${range.thumbWidth};
+      block-size: ${range.thumbHeight};
+      margin-block-start: ${mathWithUnits(range.thumbHeight, (x) => x * -0.5)};
+
+      .euiColorStopThumbPopover__anchor {
+        position: absolute;
+        inline-size: 100%;
+        block-size: 100%;
+
+        // Background color can potentially have opacity
+        // Pseudo element placed below the thumb to prevent the track from showing through
+        &::before {
+          content: '';
+          display: block;
+          position: absolute;
+          inset-inline-start: 0;
+          inset-block-start: 0;
+          block-size: ${range.thumbHeight};
+          inline-size: ${range.thumbWidth};
+          border-radius: ${range.thumbHeight};
+          background: ${euiTheme.colors.emptyShade};
+        }
+      }
+    `,
+    isLoadingPanel: css`
+      visibility: hidden !important; // Overrides a stateful class on EuiPopover -> EuiPanel
+    `,
+    hasFocus: css`
+      z-index: ${range.thumbZIndex};
+    `,
+  };
+};
+
+export const euiColorStopStyles = (euiThemeContext: UseEuiTheme) => {
+  const colorPicker = euiColorPickerVariables(euiThemeContext);
+
+  return {
+    // Base
+    euiColorStop: css`
+      inline-size: ${colorPicker.width};
+    `,
+  };
+};
diff --git a/src/components/color_picker/color_stops/color_stop_thumb.tsx b/src/components/color_picker/color_stops/color_stop_thumb.tsx
index 1271bc63736..dcc95795e92 100644
--- a/src/components/color_picker/color_stops/color_stop_thumb.tsx
+++ b/src/components/color_picker/color_stops/color_stop_thumb.tsx
@@ -25,7 +25,7 @@ import {
   isStopInvalid,
 } from './utils';
 import { getChromaColor } from '../utils';
-import { keys, useMouseMove } from '../../../services';
+import { keys, useMouseMove, useEuiTheme } from '../../../services';
 
 import { EuiButtonIcon } from '../../button';
 import { EuiColorPicker, EuiColorPickerProps } from '../color_picker';
@@ -37,6 +37,12 @@ import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiSpacer } from '../../spacer';
 import { EuiRangeThumb } from '../../form/range/range_thumb';
 
+import {
+  euiColorStopThumbStyles,
+  euiColorStopThumbPopoverStyles,
+  euiColorStopStyles,
+} from './color_stop_thumb.styles';
+
 export interface ColorStop {
   stop: number;
   color: string;
@@ -242,28 +248,40 @@ export const EuiColorStopThumb: FunctionComponent<EuiColorStopThumbProps> = ({
     }
   };
 
-  const classes = classNames(
-    'euiColorStopPopover',
-    {
-      'euiColorStopPopover-hasFocus': hasFocus || isPopoverOpen,
-    },
-    className
-  );
+  const euiTheme = useEuiTheme();
+
+  const popoverStyles = euiColorStopThumbPopoverStyles(euiTheme);
+  const cssPopoverStyles = [
+    popoverStyles.euiColorStopThumbPopover,
+    (hasFocus || isPopoverOpen) && popoverStyles.hasFocus,
+  ];
+
+  const thumbStyles = euiColorStopThumbStyles(euiTheme);
+  const cssThumbStyles = [
+    thumbStyles.euiColorStopThumb,
+    isPopoverOpen && thumbStyles.isPopoverOpen,
+  ];
+
+  const colorStopStyles = euiColorStopStyles(euiTheme);
+  const cssColorStopStyles = colorStopStyles.euiColorStop;
+
+  const classes = classNames('euiColorStopPopover', className);
 
   return (
     <EuiPopover
+      css={cssPopoverStyles}
       {...rest}
       ref={popoverRef}
       className={classes}
-      anchorClassName="euiColorStopPopover__anchor"
+      anchorClassName="euiColorStopThumbPopover__anchor"
       panelPaddingSize="s"
       isOpen={isPopoverOpen}
       closePopover={closePopover}
       initialFocus={numberInputRef || undefined}
       focusTrapProps={{ clickOutsideDisables: false }}
-      panelClassName={
-        numberInputRef ? undefined : 'euiColorStopPopover-isLoadingPanel'
-      }
+      panelProps={{
+        css: numberInputRef ? undefined : popoverStyles.isLoadingPanel,
+      }}
       style={{
         ...style,
         left: `${getPositionFromStopFn(stop)}%`,
@@ -301,6 +319,7 @@ export const EuiColorStopThumb: FunctionComponent<EuiColorStopThumbProps> = ({
                 aria-label={ariaLabel}
                 title={title}
                 className="euiColorStopThumb"
+                css={cssThumbStyles}
                 tabIndex={-1}
                 style={{
                   background,
@@ -312,7 +331,11 @@ export const EuiColorStopThumb: FunctionComponent<EuiColorStopThumbProps> = ({
         </EuiI18n>
       }
     >
-      <div className="euiColorStop" data-test-subj="euiColorStopPopover">
+      <div
+        className="euiColorStop"
+        css={cssColorStopStyles}
+        data-test-subj="euiColorStopPopover"
+      >
         <EuiScreenReaderOnly>
           <p aria-live="polite">
             <EuiI18n
diff --git a/src/components/color_picker/color_stops/color_stops.styles.ts b/src/components/color_picker/color_stops/color_stops.styles.ts
new file mode 100644
index 00000000000..f32f3073400
--- /dev/null
+++ b/src/components/color_picker/color_stops/color_stops.styles.ts
@@ -0,0 +1,113 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme, darken, brighten, hexToRgb } from '../../../services';
+import { mathWithUnits, euiCanAnimate } from '../../../global_styling';
+import { euiCustomControl } from '../../form/form.styles';
+
+import {
+  euiRangeThumbStyle,
+  euiRangeVariables,
+} from '../../form/range/range.styles';
+
+export const euiColorStopsStyles = (euiThemeContext: UseEuiTheme) => {
+  const range = euiRangeVariables(euiThemeContext);
+  const { euiTheme, colorMode } = euiThemeContext;
+
+  const isDarkMode = colorMode === 'DARK';
+  const stripeColor = isDarkMode
+    ? brighten(range.trackColor, 0.5)
+    : darken(range.trackColor, 0.5);
+  const stripesBackground = `repeating-linear-gradient(
+    -45deg,
+    ${range.trackColor},
+    ${range.trackColor} 25%,
+    ${stripeColor} 25%,
+    ${stripeColor} 50%,
+    ${range.trackColor} 50%
+  )`;
+
+  return {
+    // Base
+    euiColorStops: css``,
+    isEnabled: css`
+      // Show focus ring on keyboard focus only and not mouse click/drag
+      &:focus {
+        outline: none;
+      }
+      &:focus-visible {
+        .euiColorStops__track::after {
+          box-shadow: 0 0 0 1px
+              rgba(${hexToRgb(euiTheme.colors.emptyShade).join(', ')}, 0.8),
+            0 0 0 3px ${range.focusColor};
+        }
+      }
+    `,
+    isDisabled: css``,
+    isHoverDisabled: css``,
+    isReadOnly: css``,
+    isDragging: css`
+      cursor: grabbing;
+    `,
+    euiColorStops__track: css`
+      &::after {
+        background: ${stripesBackground};
+        background-size: ${euiTheme.size.xs} ${euiTheme.size.xs}; // Percentage stops and background-size are both needed for Safari to render the gradient at fullWidth correctly
+      }
+    `,
+    euiColorStops__addTarget: css`
+      ${euiCustomControl(euiThemeContext, { type: 'round' })};
+      ${euiRangeThumbStyle(euiThemeContext)};
+      position: absolute;
+      inset-block-start: 0;
+      block-size: ${range.thumbHeight};
+      inline-size: ${range.thumbHeight};
+      background-color: ${euiTheme.colors.lightestShade};
+      pointer-events: none;
+      opacity: 0;
+      border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.darkShade};
+      box-shadow: none;
+      z-index: ${range.thumbZIndex};
+
+      ${euiCanAnimate} {
+        transition: opacity ${euiTheme.animation.fast} ease-in;
+      }
+    `,
+  };
+};
+
+export const euiColorStopsAddContainerStyles = (
+  euiThemeContext: UseEuiTheme
+) => {
+  const range = euiRangeVariables(euiThemeContext);
+
+  return {
+    euiColorStopsAddContainer: css`
+      display: block;
+      position: absolute;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
+      inset-block-start: 50%;
+      block-size: ${range.thumbHeight};
+      margin-block-start: ${mathWithUnits(range.thumbHeight, (x) => x * -0.5)};
+      z-index: ${range.thumbZIndex};
+    `,
+    isEnabled: css`
+      &:hover {
+        cursor: pointer;
+
+        .euiColorStops__addTarget {
+          opacity: 0.7;
+        }
+      }
+    `,
+    isDisabled: css``,
+  };
+};
diff --git a/src/components/color_picker/color_stops/color_stops.test.tsx b/src/components/color_picker/color_stops/color_stops.test.tsx
index e937613c5cb..ad646d1423f 100644
--- a/src/components/color_picker/color_stops/color_stops.test.tsx
+++ b/src/components/color_picker/color_stops/color_stops.test.tsx
@@ -220,7 +220,8 @@ test('popover color selector is shown when the thumb is clicked', () => {
 
   findTestSubject(colorStops, 'euiColorStopThumb')
     .first()
-    .simulate('mousedown', { pageX: 0, pageY: 0 });
+    .simulate('mousedown', { pageX: 0, pageY: 0 })
+    .simulate('mouseup', { pageX: 0, pageY: 0 });
   const colorSelector = findTestSubject(colorStops, 'euiColorStopPopover');
   expect(colorSelector.length).toBe(1);
 });
@@ -242,7 +243,8 @@ test('passes value input props to number input', () => {
 
   findTestSubject(colorStops, 'euiColorStopThumb')
     .first()
-    .simulate('mousedown', { pageX: 0, pageY: 0 });
+    .simulate('mousedown', { pageX: 0, pageY: 0 })
+    .simulate('mouseup', { pageX: 0, pageY: 0 });
   const colorSelector = findTestSubject(colorStops, 'euiColorStopPopover');
   expect(colorSelector.find(EuiFieldNumber).prop('append')).toEqual('%');
 });
@@ -261,7 +263,8 @@ test('stop input updates stops', () => {
 
   findTestSubject(colorStops, 'euiColorStopThumb')
     .first()
-    .simulate('mousedown', { pageX: 0, pageY: 0 });
+    .simulate('mousedown', { pageX: 0, pageY: 0 })
+    .simulate('mouseup', { pageX: 0, pageY: 0 });
   const event = { target: { value: '10' } };
   const inputs = colorStops.find('input[type="number"]');
   expect(inputs.length).toBe(1);
@@ -291,7 +294,8 @@ test('stop input updates stops with error prevention (reset to bounds)', () => {
 
   findTestSubject(colorStops, 'euiColorStopThumb')
     .first()
-    .simulate('mousedown', { pageX: 0, pageY: 0 });
+    .simulate('mousedown', { pageX: 0, pageY: 0 })
+    .simulate('mouseup', { pageX: 0, pageY: 0 });
   const event = { target: { value: '1000' } };
   const inputs = colorStops.find('input[type="number"]');
   inputs.simulate('change', event);
@@ -320,7 +324,8 @@ test('hex input updates stops', () => {
 
   findTestSubject(colorStops, 'euiColorStopThumb')
     .first()
-    .simulate('mousedown', { pageX: 0, pageY: 0 });
+    .simulate('mousedown', { pageX: 0, pageY: 0 })
+    .simulate('mouseup', { pageX: 0, pageY: 0 });
   const event = { target: { value: '#FFFFFF' } };
   const inputs = colorStops.find('input[type="text"]');
   expect(inputs.length).toBe(1);
@@ -350,7 +355,8 @@ test('hex input updates stops with error', () => {
 
   findTestSubject(colorStops, 'euiColorStopThumb')
     .first()
-    .simulate('mousedown', { pageX: 0, pageY: 0 });
+    .simulate('mousedown', { pageX: 0, pageY: 0 })
+    .simulate('mouseup', { pageX: 0, pageY: 0 });
   const event = { target: { value: '#FFFFF' } };
   const inputs = colorStops.find('input[type="text"]');
   inputs.simulate('change', event);
@@ -379,7 +385,8 @@ test('picker updates stops', () => {
 
   findTestSubject(colorStops, 'euiColorStopThumb')
     .first()
-    .simulate('mousedown', { pageX: 0, pageY: 0 });
+    .simulate('mousedown', { pageX: 0, pageY: 0 })
+    .simulate('mouseup', { pageX: 0, pageY: 0 });
   const swatches = colorStops.find('button.euiColorPicker__swatchSelect');
   expect(swatches.length).toBe(VISUALIZATION_COLORS.length);
   swatches.first().simulate('click');
diff --git a/src/components/color_picker/color_stops/color_stops.tsx b/src/components/color_picker/color_stops/color_stops.tsx
index d377cfedea6..f3dfb1faa19 100644
--- a/src/components/color_picker/color_stops/color_stops.tsx
+++ b/src/components/color_picker/color_stops/color_stops.tsx
@@ -20,6 +20,7 @@ import {
   keys,
   DEFAULT_VISUALIZATION_COLOR,
   getSteppedGradient,
+  useEuiTheme,
 } from '../../../services';
 import { EuiColorStopThumb, ColorStop } from './color_stop_thumb';
 import {
@@ -40,6 +41,11 @@ import { EuiRangeTrack } from '../../form/range/range_track';
 import { EuiRangeWrapper } from '../../form/range/range_wrapper';
 import { EuiFieldNumberProps } from '../../form/field_number';
 
+import {
+  euiColorStopsStyles,
+  euiColorStopsAddContainerStyles,
+} from './color_stops.styles';
+
 export interface EuiColorStopsProps extends CommonProps {
   addColor?: ColorStop['color'];
   /**
@@ -188,16 +194,29 @@ export const EuiColorStops: FunctionComponent<EuiColorStopsProps> = ({
   );
 
   const isNotInteractive = disabled || readOnly;
-
-  const classes = classNames(
-    'euiColorStops',
-    {
-      'euiColorStops-isDragging': isHoverDisabled,
-      'euiColorStops-isDisabled': disabled,
-      'euiColorStops-isReadOnly': readOnly,
-    },
-    className
-  );
+  const isDragging = isHoverDisabled && !isNotInteractive;
+  const addContainerIsDisabled = isHoverDisabled || isNotInteractive;
+
+  const classes = classNames('euiColorStops', className);
+
+  const euiTheme = useEuiTheme();
+  const styles = euiColorStopsStyles(euiTheme);
+  const cssPopoverStyles = [
+    styles.euiColorStops,
+    !disabled ? styles.isEnabled : styles.isDisabled,
+    readOnly && styles.isReadOnly,
+    isDragging && styles.isDragging,
+  ];
+  const cssTrackStyles = [styles.euiColorStops__track];
+  const cssAddTargetStyles = [styles.euiColorStops__addTarget];
+
+  const addContainerStyles = euiColorStopsAddContainerStyles(euiTheme);
+  const cssAddContainerStyles = [
+    addContainerStyles.euiColorStopsAddContainer,
+    !addContainerIsDisabled
+      ? addContainerStyles.isEnabled
+      : addContainerStyles.isDisabled,
+  ];
 
   const getStopFromMouseLocationFn = (location: { x: number; y: number }) => {
     // Guard against `null` ref in usage
@@ -415,7 +434,7 @@ export const EuiColorStops: FunctionComponent<EuiColorStopsProps> = ({
         aria-valuetext={`Stop: ${colorStop.stop}, Color: ${colorStop.color} (${
           index + 1
         } of ${colorStops.length})`}
-        isPopoverOpen={colorStop.id === openedStopId}
+        isPopoverOpen={!isDragging && colorStop.id === openedStopId}
         openPopover={() => {
           setOpenedStopId(colorStop.id);
         }}
@@ -429,6 +448,7 @@ export const EuiColorStops: FunctionComponent<EuiColorStopsProps> = ({
     colorStops,
     disabled,
     handleOnChange,
+    isDragging,
     max,
     min,
     mode,
@@ -449,9 +469,9 @@ export const EuiColorStops: FunctionComponent<EuiColorStopsProps> = ({
     : [];
   const gradientStop = (colorStop: ColorStop, index: number) => {
     const color = getChromaColor(colorStop.color, showAlpha);
-    const rgba = color ? color.css() : 'currentColor';
+    const rgba = color ? color.css() : 'transparent';
     if (index === 0) {
-      return `currentColor, currentColor ${positions[index]}%, ${rgba} ${positions[index]}%`;
+      return `transparent, transparent ${positions[index]}%, ${rgba} ${positions[index]}%`;
     }
     return `${rgba} ${positions[index]}%`;
   };
@@ -485,7 +505,7 @@ export const EuiColorStops: FunctionComponent<EuiColorStopsProps> = ({
       percentageSteps = percentageSteps + percentage;
     });
     steppedGradient = steppedGradient.substring(0, steppedGradient.length - 2);
-    gradient = `linear-gradient(to right, currentColor ${trailingPercentage}%, ${steppedGradient})`;
+    gradient = `linear-gradient(to right, transparent ${trailingPercentage}%, ${steppedGradient})`;
   } else {
     const linearGradient = sortedStops.map(
       stopType === 'gradient' ? gradientStop : fixedStop
@@ -495,6 +515,7 @@ export const EuiColorStops: FunctionComponent<EuiColorStopsProps> = ({
 
   return (
     <EuiRangeWrapper
+      css={cssPopoverStyles}
       {...rest}
       data-test-subj={classNames('euiColorStops', rest['data-test-subj'])}
       ref={setWrapperRef}
@@ -522,6 +543,8 @@ export const EuiColorStops: FunctionComponent<EuiColorStopsProps> = ({
         </p>
       </EuiScreenReaderOnly>
       <EuiRangeTrack
+        className="euiColorStops__track"
+        css={cssTrackStyles}
         min={min || rangeMin}
         max={max || rangeMax}
         compressed={compressed}
@@ -541,15 +564,14 @@ export const EuiColorStops: FunctionComponent<EuiColorStopsProps> = ({
             />
             <div
               data-test-subj="euiColorStopsAdd"
-              className={classNames('euiColorStops__addContainer', {
-                'euiColorStops__addContainer-isDisabled':
-                  isHoverDisabled || disabled || readOnly,
-              })}
+              className="euiColorStops__addContainer"
+              css={cssAddContainerStyles}
               onClick={handleAddClick}
               onMouseMove={handleAddHover}
             >
               <div
                 className="euiColorStops__addTarget"
+                css={cssAddTargetStyles}
                 style={{
                   left: `${addTargetPosition}%`,
                 }}
diff --git a/src/components/form/range/__snapshots__/range_track.test.tsx.snap b/src/components/form/range/__snapshots__/range_track.test.tsx.snap
index 4ba2cf67fe3..ea71513c079 100644
--- a/src/components/form/range/__snapshots__/range_track.test.tsx.snap
+++ b/src/components/form/range/__snapshots__/range_track.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiRangeTrack is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="testClass1 testClass2 emotion-euiRangeTrack-hasTicks"
+  class="euiRangeTrack testClass1 testClass2 emotion-euiRangeTrack-hasTicks"
   data-test-subj="test subject string"
 >
   <div
diff --git a/src/components/form/range/range_highlight.styles.ts b/src/components/form/range/range_highlight.styles.ts
index 13e8cb49235..3eed5e653ea 100644
--- a/src/components/form/range/range_highlight.styles.ts
+++ b/src/components/form/range/range_highlight.styles.ts
@@ -40,7 +40,6 @@ export const euiRangeHighlightProgressStyles = (
       block-size: ${range.highlightHeight};
       border-radius: ${range.trackBorderRadius};
       background-color: ${range.highlightColor};
-      border-color: ${range.highlightColor};
 
       // Change highlight color to focus on keyboard focus and on mouse drag
       .euiRangeSlider:focus-visible ~ .euiRangeHighlight &,
diff --git a/src/components/form/range/range_levels.styles.ts b/src/components/form/range/range_levels.styles.ts
index 516b0d1ef52..c764ff37cc7 100644
--- a/src/components/form/range/range_levels.styles.ts
+++ b/src/components/form/range/range_levels.styles.ts
@@ -43,7 +43,7 @@ export const euiRangeLevelsStyles = (euiThemeContext: UseEuiTheme) => {
         block-size: ${range.trackHeight};
         inline-size: 100%;
         background-image: ${stripesBackground};
-        background-size: ${euiTheme.size.s} ${euiTheme.size.s}; // Percentage stops and background-size are both needed for Safari to render the gradient at fullWidth correctly
+        background-size: ${euiTheme.size.xs} ${euiTheme.size.xs}; // Percentage stops and background-size are both needed for Safari to render the gradient at fullWidth correctly
         border-radius: ${range.trackBorderRadius};
       }
     `,
diff --git a/src/components/form/range/range_track.tsx b/src/components/form/range/range_track.tsx
index af54f78c7b2..a695642ce10 100644
--- a/src/components/form/range/range_track.tsx
+++ b/src/components/form/range/range_track.tsx
@@ -15,6 +15,7 @@ import React, {
   HTMLAttributes,
   ReactNode,
 } from 'react';
+import classNames from 'classnames';
 
 import range from 'lodash/range';
 
@@ -55,6 +56,7 @@ export const EuiRangeTrack: FunctionComponent<EuiRangeTrackProps> = ({
   value,
   compressed,
   showRange,
+  className,
   ...rest
 }) => {
   useEffect(() => {
@@ -110,9 +112,11 @@ export const EuiRangeTrack: FunctionComponent<EuiRangeTrackProps> = ({
 
   const [trackWidth, setTrackWidth] = useState(0);
 
+  const classes = classNames('euiRangeTrack', className);
+
   return (
     <div
-      className="euiRangeTrack"
+      className={classes}
       css={cssStyles}
       {...rest}
       ref={(node: HTMLDivElement | null) => {
diff --git a/src/services/color/manipulation.ts b/src/services/color/manipulation.ts
index 2daf01c9590..c40849ca58b 100644
--- a/src/services/color/manipulation.ts
+++ b/src/services/color/manipulation.ts
@@ -103,3 +103,11 @@ export const lightness = (color: string) => chroma(color).get('hsl.l') * 100;
  */
 export const darken = (color: string, amount: number) =>
   chroma(color).darken(amount).hex();
+
+/**
+ * Returns the brighten value of a color. 0-100
+ * @param color - Color to manipulate
+ * @param amount - Amount to change in absolute terms. 0-1.
+ */
+export const brighten = (color: string, amount: number) =>
+  chroma(color).brighten(amount).hex();
diff --git a/src/services/index.ts b/src/services/index.ts
index 920a521aa78..eb18a0e8adc 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -8,8 +8,6 @@
 
 // Export all keys under a `keys` named variable
 import * as keys from './keys';
-export { keys };
-
 export {
   accessibleClickKeys,
   cascadingMenuKeys,
@@ -17,112 +15,94 @@ export {
   htmlIdGenerator,
   useGeneratedHtmlId,
 } from './accessibility';
-
+export { CENTER_ALIGNMENT, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from './alignment';
 export type { HorizontalAlignment } from './alignment';
-export { LEFT_ALIGNMENT, RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from './alignment';
-
-export type { EuiBreakpointSize } from './breakpoint';
 export {
-  useIsWithinBreakpoints,
-  useIsWithinMaxBreakpoint,
-  useIsWithinMinBreakpoint,
   CurrentEuiBreakpointContext,
   CurrentEuiBreakpointProvider,
   useCurrentEuiBreakpoint,
+  useIsWithinBreakpoints,
+  useIsWithinMaxBreakpoint,
+  useIsWithinMinBreakpoint,
 } from './breakpoint';
-
-export type { HSV } from './color';
+export type { EuiBreakpointSize } from './breakpoint';
 export {
-  isColorDark,
-  isValidHex,
+  brighten,
   calculateContrast,
   calculateLuminance,
-  hexToHsv,
-  hexToRgb,
-  hsvToHex,
-  hsvToRgb,
-  rgbToHex,
-  rgbToHsv,
-  VISUALIZATION_COLORS,
-  DEFAULT_VISUALIZATION_COLOR,
   colorPalette,
-  euiPaletteForLightBackground,
-  euiPaletteForDarkBackground,
+  darken,
+  DEFAULT_VISUALIZATION_COLOR,
+  desaturate,
   euiPaletteColorBlind,
   euiPaletteColorBlindBehindText,
+  euiPaletteComplimentary,
+  euiPaletteCool,
+  euiPaletteForDarkBackground,
+  euiPaletteForLightBackground,
   euiPaletteForStatus,
   euiPaletteForTemperature,
-  euiPaletteComplimentary,
+  euiPaletteGray,
   euiPaletteNegative,
   euiPalettePositive,
-  euiPaletteCool,
   euiPaletteWarm,
-  euiPaletteGray,
   getSteppedGradient,
-  transparentize,
-  tint,
-  shade,
-  tintOrShade,
-  shadeOrTint,
-  saturate,
-  desaturate,
+  hexToHsv,
+  hexToRgb,
+  hsvToHex,
+  hsvToRgb,
+  isColorDark,
+  isValidHex,
   lightness,
-  darken,
-  makeHighContrastColor,
   makeDisabledContrastColor,
+  makeHighContrastColor,
+  rgbToHex,
+  rgbToHsv,
+  saturate,
+  shade,
+  shadeOrTint,
+  tint,
+  tintOrShade,
+  transparentize,
+  VISUALIZATION_COLORS,
   wcagContrastMin,
 } from './color';
-
-export type { EuiSetColorMethod } from './color_picker';
+export type { HSV } from './color';
 export { useColorPickerState, useColorStopsState } from './color_picker';
-
+export type { EuiSetColorMethod } from './color_picker';
 export * from './console';
-
 export { copyToClipboard } from './copy_to_clipboard';
-
 export * from './findElement';
-
 export {
+  dateFormatAliases,
   formatAuto,
   formatBoolean,
   formatDate,
   formatNumber,
   formatText,
-  dateFormatAliases,
 } from './format';
-
+export * from './hooks';
 export { isEvenlyDivisibleBy, isWithinRange } from './number';
-
 export { Pager } from './paging';
-
+export { calculatePopoverPosition, findPopoverPosition } from './popover';
 export { Random } from './random';
-
 export { getSecureRelForTarget } from './security';
-
-export { toSentenceCase, toInitials, slugify } from './string';
-
-export type { PropertySort, Direction } from './sort';
 export {
+  Comparators,
   PropertySortType,
-  SortDirectionType,
-  SortDirection,
   SortableProperties,
-  Comparators,
+  SortDirection,
+  SortDirectionType,
 } from './sort';
-
-export { calculatePopoverPosition, findPopoverPosition } from './popover';
-
+export type { Direction, PropertySort } from './sort';
+export { slugify, toInitials, toSentenceCase } from './string';
+export * from './theme';
+export { throttle } from './throttle';
 export {
   getDurationAndPerformOnFrame,
   getTransitionTimings,
   getWaitDuration,
   performOnFrame,
 } from './transition';
-
 export { EuiWindowEvent } from './window_event';
-
-export * from './hooks';
-
-export { throttle } from './throttle';
-
-export * from './theme';
+export { keys };
diff --git a/src/themes/amsterdam/overrides/_color_stops.scss b/src/themes/amsterdam/overrides/_color_stops.scss
deleted file mode 100644
index 8c715e6e0e8..00000000000
--- a/src/themes/amsterdam/overrides/_color_stops.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.euiColorStops__addTarget,
-.euiColorStops__addContainer {
-  z-index: 3; // same z-index as .euiRangeThumb
-}
-
-.euiColorStops__addTarget {
-  border: 1px solid $euiColorDarkShade;
-  box-shadow: none;
-}
-
-.euiColorStopThumb.euiRangeThumb:not(:disabled) {
-  @include euiRangeThumbBorder;
-  @include euiRangeThumbBoxShadow;;
-
-  &:focus {
-    @include euiRangeThumbFocusBoxShadow;
-    outline: none;
-  }
-
-  // in Chrome/FF/Edge we don't want to focus on click
-  &:focus:not(:focus-visible) {
-    @include euiRangeThumbBoxShadow;
-    outline: none;
-  }
-}
-
-.euiColorStops:not(.euiColorStops-isDisabled) {
-  .euiRangeTrack::after {
-    transition-property: box-shadow;
-    // this `transition-delay` prevents Safari of adding the focus ring (box-shadow) every time we click the `EuiColorStops`
-    // the focus still appear when we drag a color stop in Safari
-    transition-delay: $euiAnimSpeedExtraFast;
-  }
-
-  &:focus {
-    outline: none;
-
-    .euiRangeTrack::after {
-      box-shadow:
-        0 0 0 1px rgba($euiColorEmptyShade, .8),
-        0 0 0 3px $euiFocusRingColor;
-    }
-  }
-
-  &:focus:not(:focus-visible) {
-    .euiRangeTrack::after {
-      box-shadow: none;
-    }
-  }
-}
-
-.euiColorStops__highlight {
-  color: $euiRangeTrackColor;
-
-  .euiRangeHighlight__progress {
-    background-color: $euiRangeTrackColor;
-  }
-}
diff --git a/src/themes/amsterdam/overrides/_index.scss b/src/themes/amsterdam/overrides/_index.scss
index a2c70685705..c1c351891fe 100644
--- a/src/themes/amsterdam/overrides/_index.scss
+++ b/src/themes/amsterdam/overrides/_index.scss
@@ -1,4 +1,3 @@
-@import 'color_stops';
 @import 'combo_box';
 @import 'data_grid';
 @import 'date_picker';
diff --git a/upcoming_changelogs/6489.md b/upcoming_changelogs/6489.md
new file mode 100644
index 00000000000..4c3b2e5daae
--- /dev/null
+++ b/upcoming_changelogs/6489.md
@@ -0,0 +1,7 @@
+- Changed design of empty ranges in `EuiColorStops` to have diagonal gray stripes instead of a solid light gray color
+- Changed popover in `EuiColorStops` to not appear when dragging/moving a color stop
+
+**CSS-in-JS conversions**
+
+- Converted `EuiColorStops` to Emotion
+- Added `brighten` service to manipulate CSS-in-JS colors