diff --git a/src-docs/src/views/progress/playground.js b/src-docs/src/views/progress/playground.js
index 203101a7741..96e194c21b3 100644
--- a/src-docs/src/views/progress/playground.js
+++ b/src-docs/src/views/progress/playground.js
@@ -25,6 +25,12 @@ export default () => {
     type: PropTypes.String,
   };
 
+  propsToUse.color = {
+    ...propsToUse.color,
+    value: 'success',
+    type: PropTypes.String,
+  };
+
   return {
     config: {
       componentName: 'EuiProgress',
diff --git a/src-docs/src/views/theme/_json/eui_theme_dark.json b/src-docs/src/views/theme/_json/eui_theme_dark.json
index 369f0a39833..b0b7529f1d2 100644
--- a/src-docs/src/views/theme/_json/eui_theme_dark.json
+++ b/src-docs/src/views/theme/_json/eui_theme_dark.json
@@ -202,31 +202,6 @@
   "euiMarkdownEditorMinHeight": "150px",
   "euiPopoverArrowSize": "12px",
   "euiPopoverTranslateDistance": "8px",
-  "euiProgressSizes": {
-    "xs": "2px",
-    "s": "4px",
-    "m": "8px",
-    "l": "16px"
-  },
-  "euiProgressColors": {
-    "primary": "#36a2ef",
-    "success": "#7dded8",
-    "warning": "#f3d371",
-    "danger": "#f86b63",
-    "accent": "#f68fbe",
-    "subdued": "#7a7f89",
-    "vis0": "#54b399",
-    "vis1": "#6092c0",
-    "vis2": "#d36086",
-    "vis3": "#9170b8",
-    "vis4": "#ca8eae",
-    "vis5": "#d6bf57",
-    "vis6": "#b9a888",
-    "vis7": "#da8b45",
-    "vis8": "#aa6556",
-    "vis9": "#e7664c",
-    "customColor": "currentColor"
-  },
   "euiResizableButtonTransitionSpeed": "150ms",
   "euiResizableButtonSize": "16px",
   "euiSelectableListItemBorder": "1px solid #202128",
@@ -698,4 +673,4 @@
     "warning": "#f3d371",
     "danger": "#f86b63"
   }
-}
\ No newline at end of file
+}
diff --git a/src-docs/src/views/theme/_json/eui_theme_light.json b/src-docs/src/views/theme/_json/eui_theme_light.json
index b29febd3397..3700c6232ea 100644
--- a/src-docs/src/views/theme/_json/eui_theme_light.json
+++ b/src-docs/src/views/theme/_json/eui_theme_light.json
@@ -202,31 +202,6 @@
   "euiMarkdownEditorMinHeight": "150px",
   "euiPopoverArrowSize": "12px",
   "euiPopoverTranslateDistance": "8px",
-  "euiProgressSizes": {
-    "xs": "2px",
-    "s": "4px",
-    "m": "8px",
-    "l": "16px"
-  },
-  "euiProgressColors": {
-    "primary": "#0077cc",
-    "success": "#00bfb3",
-    "warning": "#fec514",
-    "danger": "#bd271e",
-    "accent": "#f04e98",
-    "subdued": "#69707d",
-    "vis0": "#54b399",
-    "vis1": "#6092c0",
-    "vis2": "#d36086",
-    "vis3": "#9170b8",
-    "vis4": "#ca8eae",
-    "vis5": "#d6bf57",
-    "vis6": "#b9a888",
-    "vis7": "#da8b45",
-    "vis8": "#aa6556",
-    "vis9": "#e7664c",
-    "customColor": "currentColor"
-  },
   "euiResizableButtonTransitionSpeed": "150ms",
   "euiResizableButtonSize": "16px",
   "euiSelectableListItemBorder": "1px solid #eef2f7",
@@ -698,4 +673,4 @@
     "warning": "#fec514",
     "danger": "#bd271e"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/index.scss b/src/components/index.scss
index e427ac5416b..25e3f18f19c 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -39,7 +39,6 @@
 @import 'page/index'; // Page needs to come after Panel for cascade specificity
 @import 'popover/index';
 @import 'portal/index';
-@import 'progress/index';
 @import 'tree_view/index';
 @import 'resizable_container/index';
 @import 'side_nav/index';
diff --git a/src/components/progress/__snapshots__/progress.styles.test.ts.snap b/src/components/progress/__snapshots__/progress.styles.test.ts.snap
new file mode 100644
index 00000000000..469deaa14e0
--- /dev/null
+++ b/src/components/progress/__snapshots__/progress.styles.test.ts.snap
@@ -0,0 +1,355 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`euiProgressStyles indeterminate div CSS colors accent 1`] = `
+"
+  &:before {
+    background-color: #F04E98;
+  }
+;;label:accent;"
+`;
+
+exports[`euiProgressStyles indeterminate div CSS colors danger 1`] = `
+"
+  &:before {
+    background-color: #BD271E;
+  }
+;;label:danger;"
+`;
+
+exports[`euiProgressStyles indeterminate div CSS colors primary 1`] = `
+"
+  &:before {
+    background-color: #07C;
+  }
+;;label:primary;"
+`;
+
+exports[`euiProgressStyles indeterminate div CSS colors subdued 1`] = `
+"
+  &:before {
+    background-color: #646a77;
+  }
+;;label:subdued;"
+`;
+
+exports[`euiProgressStyles indeterminate div CSS colors success 1`] = `
+"
+  &:before {
+    background-color: #00BFB3;
+  }
+;;label:success;"
+`;
+
+exports[`euiProgressStyles indeterminate div CSS colors vis0 1`] = `
+"
+  &:before {
+    background-color: #54B399;
+  }
+;;label:vis0;"
+`;
+
+exports[`euiProgressStyles indeterminate div CSS colors vis1 1`] = `
+"
+  &:before {
+    background-color: #6092C0;
+  }
+;;label:vis1;"
+`;
+
+exports[`euiProgressStyles indeterminate div CSS colors vis2 1`] = `
+"
+  &:before {
+    background-color: #D36086;
+  }
+;;label:vis2;"
+`;
+
+exports[`euiProgressStyles indeterminate div CSS colors vis3 1`] = `
+"
+  &:before {
+    background-color: #9170B8;
+  }
+;;label:vis3;"
+`;
+
+exports[`euiProgressStyles indeterminate div CSS colors vis4 1`] = `
+"
+  &:before {
+    background-color: #CA8EAE;
+  }
+;;label:vis4;"
+`;
+
+exports[`euiProgressStyles indeterminate div CSS colors vis5 1`] = `
+"
+  &:before {
+    background-color: #D6BF57;
+  }
+;;label:vis5;"
+`;
+
+exports[`euiProgressStyles indeterminate div CSS colors vis6 1`] = `
+"
+  &:before {
+    background-color: #B9A888;
+  }
+;;label:vis6;"
+`;
+
+exports[`euiProgressStyles indeterminate div CSS colors vis7 1`] = `
+"
+  &:before {
+    background-color: #DA8B45;
+  }
+;;label:vis7;"
+`;
+
+exports[`euiProgressStyles indeterminate div CSS colors vis8 1`] = `
+"
+  &:before {
+    background-color: #AA6556;
+  }
+;;label:vis8;"
+`;
+
+exports[`euiProgressStyles indeterminate div CSS colors vis9 1`] = `
+"
+  &:before {
+    background-color: #E7664C;
+  }
+;;label:vis9;"
+`;
+
+exports[`euiProgressStyles indeterminate div CSS colors warning 1`] = `
+"
+  &:before {
+    background-color: #FEC514;
+  }
+;;label:warning;"
+`;
+
+exports[`euiProgressStyles indeterminate div CSS positions absolute 1`] = `
+"position:absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: transparent;
+  
+;;label:absolute;"
+`;
+
+exports[`euiProgressStyles indeterminate div CSS positions fixed 1`] = `
+"position:fixed;z-index:1001;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: transparent;
+  
+;;label:fixed;"
+`;
+
+exports[`euiProgressStyles indeterminate div CSS positions static 1`] = `"position:relative;label:static;"`;
+
+exports[`euiProgressStyles native progress CSS colors accent 1`] = `
+"
+  &::-webkit-progress-value {
+    background-color: #F04E98;
+  }
+  &::-moz-progress-bar {
+    background-color: #F04E98;
+  }
+;;label:accent;"
+`;
+
+exports[`euiProgressStyles native progress CSS colors danger 1`] = `
+"
+  &::-webkit-progress-value {
+    background-color: #BD271E;
+  }
+  &::-moz-progress-bar {
+    background-color: #BD271E;
+  }
+;;label:danger;"
+`;
+
+exports[`euiProgressStyles native progress CSS colors primary 1`] = `
+"
+  &::-webkit-progress-value {
+    background-color: #07C;
+  }
+  &::-moz-progress-bar {
+    background-color: #07C;
+  }
+;;label:primary;"
+`;
+
+exports[`euiProgressStyles native progress CSS colors subdued 1`] = `
+"
+  &::-webkit-progress-value {
+    background-color: #646a77;
+  }
+  &::-moz-progress-bar {
+    background-color: #646a77;
+  }
+;;label:subdued;"
+`;
+
+exports[`euiProgressStyles native progress CSS colors success 1`] = `
+"
+  &::-webkit-progress-value {
+    background-color: #00BFB3;
+  }
+  &::-moz-progress-bar {
+    background-color: #00BFB3;
+  }
+;;label:success;"
+`;
+
+exports[`euiProgressStyles native progress CSS colors vis0 1`] = `
+"
+  &::-webkit-progress-value {
+    background-color: #54B399;
+  }
+  &::-moz-progress-bar {
+    background-color: #54B399;
+  }
+;;label:vis0;"
+`;
+
+exports[`euiProgressStyles native progress CSS colors vis1 1`] = `
+"
+  &::-webkit-progress-value {
+    background-color: #6092C0;
+  }
+  &::-moz-progress-bar {
+    background-color: #6092C0;
+  }
+;;label:vis1;"
+`;
+
+exports[`euiProgressStyles native progress CSS colors vis2 1`] = `
+"
+  &::-webkit-progress-value {
+    background-color: #D36086;
+  }
+  &::-moz-progress-bar {
+    background-color: #D36086;
+  }
+;;label:vis2;"
+`;
+
+exports[`euiProgressStyles native progress CSS colors vis3 1`] = `
+"
+  &::-webkit-progress-value {
+    background-color: #9170B8;
+  }
+  &::-moz-progress-bar {
+    background-color: #9170B8;
+  }
+;;label:vis3;"
+`;
+
+exports[`euiProgressStyles native progress CSS colors vis4 1`] = `
+"
+  &::-webkit-progress-value {
+    background-color: #CA8EAE;
+  }
+  &::-moz-progress-bar {
+    background-color: #CA8EAE;
+  }
+;;label:vis4;"
+`;
+
+exports[`euiProgressStyles native progress CSS colors vis5 1`] = `
+"
+  &::-webkit-progress-value {
+    background-color: #D6BF57;
+  }
+  &::-moz-progress-bar {
+    background-color: #D6BF57;
+  }
+;;label:vis5;"
+`;
+
+exports[`euiProgressStyles native progress CSS colors vis6 1`] = `
+"
+  &::-webkit-progress-value {
+    background-color: #B9A888;
+  }
+  &::-moz-progress-bar {
+    background-color: #B9A888;
+  }
+;;label:vis6;"
+`;
+
+exports[`euiProgressStyles native progress CSS colors vis7 1`] = `
+"
+  &::-webkit-progress-value {
+    background-color: #DA8B45;
+  }
+  &::-moz-progress-bar {
+    background-color: #DA8B45;
+  }
+;;label:vis7;"
+`;
+
+exports[`euiProgressStyles native progress CSS colors vis8 1`] = `
+"
+  &::-webkit-progress-value {
+    background-color: #AA6556;
+  }
+  &::-moz-progress-bar {
+    background-color: #AA6556;
+  }
+;;label:vis8;"
+`;
+
+exports[`euiProgressStyles native progress CSS colors vis9 1`] = `
+"
+  &::-webkit-progress-value {
+    background-color: #E7664C;
+  }
+  &::-moz-progress-bar {
+    background-color: #E7664C;
+  }
+;;label:vis9;"
+`;
+
+exports[`euiProgressStyles native progress CSS colors warning 1`] = `
+"
+  &::-webkit-progress-value {
+    background-color: #FEC514;
+  }
+  &::-moz-progress-bar {
+    background-color: #FEC514;
+  }
+;;label:warning;"
+`;
+
+exports[`euiProgressStyles native progress CSS positions absolute 1`] = `
+"position:absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: transparent;
+  
+      &::-webkit-progress-bar {
+        background-color: transparent;
+      }
+;;label:absolute;"
+`;
+
+exports[`euiProgressStyles native progress CSS positions fixed 1`] = `
+"position:fixed;z-index:1001;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: transparent;
+  
+      &::-webkit-progress-bar {
+        background-color: transparent;
+      }
+;;label:fixed;"
+`;
+
+exports[`euiProgressStyles native progress CSS positions static 1`] = `"position:relative;label:static;"`;
diff --git a/src/components/progress/__snapshots__/progress.test.tsx.snap b/src/components/progress/__snapshots__/progress.test.tsx.snap
index 37e3ce16f1c..7570d44c4a2 100644
--- a/src/components/progress/__snapshots__/progress.test.tsx.snap
+++ b/src/components/progress/__snapshots__/progress.test.tsx.snap
@@ -2,114 +2,114 @@
 
 exports[`EuiProgress color #885522 is rendered 1`] = `
 <div
-  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--customColor"
+  class="euiProgress emotion-euiProgress-indeterminate-m-static-customColor"
   style="color:#885522"
 />
 `;
 
 exports[`EuiProgress color accent is rendered 1`] = `
 <div
-  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--accent"
+  class="euiProgress emotion-euiProgress-indeterminate-m-static-accent"
 />
 `;
 
 exports[`EuiProgress color danger is rendered 1`] = `
 <div
-  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--danger"
+  class="euiProgress emotion-euiProgress-indeterminate-m-static-danger"
 />
 `;
 
 exports[`EuiProgress color primary is rendered 1`] = `
 <div
-  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--primary"
+  class="euiProgress emotion-euiProgress-indeterminate-m-static-primary"
 />
 `;
 
 exports[`EuiProgress color subdued is rendered 1`] = `
 <div
-  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--subdued"
+  class="euiProgress emotion-euiProgress-indeterminate-m-static-subdued"
 />
 `;
 
 exports[`EuiProgress color success is rendered 1`] = `
 <div
-  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--success"
+  class="euiProgress emotion-euiProgress-indeterminate-m-static-success"
 />
 `;
 
 exports[`EuiProgress color vis0 is rendered 1`] = `
 <div
-  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--vis0"
+  class="euiProgress emotion-euiProgress-indeterminate-m-static-vis0"
 />
 `;
 
 exports[`EuiProgress color vis1 is rendered 1`] = `
 <div
-  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--vis1"
+  class="euiProgress emotion-euiProgress-indeterminate-m-static-vis1"
 />
 `;
 
 exports[`EuiProgress color vis2 is rendered 1`] = `
 <div
-  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--vis2"
+  class="euiProgress emotion-euiProgress-indeterminate-m-static-vis2"
 />
 `;
 
 exports[`EuiProgress color vis3 is rendered 1`] = `
 <div
-  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--vis3"
+  class="euiProgress emotion-euiProgress-indeterminate-m-static-vis3"
 />
 `;
 
 exports[`EuiProgress color vis4 is rendered 1`] = `
 <div
-  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--vis4"
+  class="euiProgress emotion-euiProgress-indeterminate-m-static-vis4"
 />
 `;
 
 exports[`EuiProgress color vis5 is rendered 1`] = `
 <div
-  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--vis5"
+  class="euiProgress emotion-euiProgress-indeterminate-m-static-vis5"
 />
 `;
 
 exports[`EuiProgress color vis6 is rendered 1`] = `
 <div
-  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--vis6"
+  class="euiProgress emotion-euiProgress-indeterminate-m-static-vis6"
 />
 `;
 
 exports[`EuiProgress color vis7 is rendered 1`] = `
 <div
-  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--vis7"
+  class="euiProgress emotion-euiProgress-indeterminate-m-static-vis7"
 />
 `;
 
 exports[`EuiProgress color vis8 is rendered 1`] = `
 <div
-  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--vis8"
+  class="euiProgress emotion-euiProgress-indeterminate-m-static-vis8"
 />
 `;
 
 exports[`EuiProgress color vis9 is rendered 1`] = `
 <div
-  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--vis9"
+  class="euiProgress emotion-euiProgress-indeterminate-m-static-vis9"
 />
 `;
 
 exports[`EuiProgress color warning is rendered 1`] = `
 <div
-  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--warning"
+  class="euiProgress emotion-euiProgress-indeterminate-m-static-warning"
 />
 `;
 
 exports[`EuiProgress has labelProps 1`] = `
 Array [
   <div
-    class="euiProgress__data euiProgress__data--success"
+    class="euiProgress__data emotion-euiProgress__data"
   >
     <span
-      class="euiProgress__valueText"
+      class="euiProgress__valueText emotion-euiProgress__valueText-success"
     >
       150
     </span>
@@ -117,7 +117,7 @@ Array [
   <progress
     aria-hidden="false"
     aria-label="aria-label"
-    class="euiProgress euiProgress--native euiProgress--m euiProgress--success testClass1 testClass2"
+    class="euiProgress testClass1 testClass2 emotion-euiProgress-native-m-static-success"
     data-test-subj="test subject string"
     max="100"
     value="50"
@@ -129,7 +129,7 @@ exports[`EuiProgress has max 1`] = `
 <progress
   aria-hidden="false"
   aria-label="aria-label"
-  class="euiProgress euiProgress--native euiProgress--m euiProgress--success testClass1 testClass2"
+  class="euiProgress testClass1 testClass2 emotion-euiProgress-native-m-static-success"
   data-test-subj="test subject string"
   max="100"
 />
@@ -138,7 +138,7 @@ exports[`EuiProgress has max 1`] = `
 exports[`EuiProgress has value 1`] = `
 <div
   aria-label="aria-label"
-  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--success testClass1 testClass2"
+  class="euiProgress testClass1 testClass2 emotion-euiProgress-indeterminate-m-static-success"
   data-test-subj="test subject string"
 />
 `;
@@ -146,15 +146,15 @@ exports[`EuiProgress has value 1`] = `
 exports[`EuiProgress has valueText and label 1`] = `
 Array [
   <div
-    class="euiProgress__data euiProgress__data--success"
+    class="euiProgress__data emotion-euiProgress__data"
   >
     <span
-      class="euiProgress__label"
+      class="euiProgress__label emotion-euiProgress__label"
     >
       Label
     </span>
     <span
-      class="euiProgress__valueText"
+      class="euiProgress__valueText emotion-euiProgress__valueText-success"
     >
       150
     </span>
@@ -162,7 +162,7 @@ Array [
   <progress
     aria-hidden="true"
     aria-label="aria-label"
-    class="euiProgress euiProgress--native euiProgress--m euiProgress--success testClass1 testClass2"
+    class="euiProgress testClass1 testClass2 emotion-euiProgress-native-m-static-success"
     data-test-subj="test subject string"
     max="100"
     value="50"
@@ -174,7 +174,7 @@ exports[`EuiProgress is determinate 1`] = `
 <progress
   aria-hidden="false"
   aria-label="aria-label"
-  class="euiProgress euiProgress--native euiProgress--m euiProgress--success testClass1 testClass2"
+  class="euiProgress testClass1 testClass2 emotion-euiProgress-native-m-static-success"
   data-test-subj="test subject string"
   max="100"
   value="50"
@@ -184,7 +184,7 @@ exports[`EuiProgress is determinate 1`] = `
 exports[`EuiProgress is indeterminate 1`] = `
 <div
   aria-label="aria-label"
-  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--success testClass1 testClass2"
+  class="euiProgress testClass1 testClass2 emotion-euiProgress-indeterminate-m-static-success"
   data-test-subj="test subject string"
 />
 `;
@@ -192,42 +192,42 @@ exports[`EuiProgress is indeterminate 1`] = `
 exports[`EuiProgress is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--success testClass1 testClass2"
+  class="euiProgress testClass1 testClass2 emotion-euiProgress-indeterminate-m-static-success"
   data-test-subj="test subject string"
 />
 `;
 
 exports[`EuiProgress size l is rendered 1`] = `
 <div
-  class="euiProgress euiProgress--indeterminate euiProgress--l euiProgress--success"
+  class="euiProgress emotion-euiProgress-indeterminate-l-static-success"
 />
 `;
 
 exports[`EuiProgress size m is rendered 1`] = `
 <div
-  class="euiProgress euiProgress--indeterminate euiProgress--m euiProgress--success"
+  class="euiProgress emotion-euiProgress-indeterminate-m-static-success"
 />
 `;
 
 exports[`EuiProgress size s is rendered 1`] = `
 <div
-  class="euiProgress euiProgress--indeterminate euiProgress--s euiProgress--success"
+  class="euiProgress emotion-euiProgress-indeterminate-s-static-success"
 />
 `;
 
 exports[`EuiProgress size xs is rendered 1`] = `
 <div
-  class="euiProgress euiProgress--indeterminate euiProgress--xs euiProgress--success"
+  class="euiProgress emotion-euiProgress-indeterminate-xs-static-success"
 />
 `;
 
 exports[`EuiProgress valueText is true 1`] = `
 Array [
   <div
-    class="euiProgress__data euiProgress__data--success"
+    class="euiProgress__data emotion-euiProgress__data"
   >
     <span
-      class="euiProgress__valueText"
+      class="euiProgress__valueText emotion-euiProgress__valueText-success"
     >
       50%
     </span>
@@ -235,7 +235,7 @@ Array [
   <progress
     aria-hidden="false"
     aria-label="aria-label"
-    class="euiProgress euiProgress--native euiProgress--m euiProgress--success testClass1 testClass2"
+    class="euiProgress testClass1 testClass2 emotion-euiProgress-native-m-static-success"
     data-test-subj="test subject string"
     max="100"
     value="50"
diff --git a/src/components/progress/_index.scss b/src/components/progress/_index.scss
deleted file mode 100644
index 51b78dccd4c..00000000000
--- a/src/components/progress/_index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import 'variables';
-@import 'progress';
diff --git a/src/components/progress/_progress.scss b/src/components/progress/_progress.scss
deleted file mode 100644
index 79a60340b34..00000000000
--- a/src/components/progress/_progress.scss
+++ /dev/null
@@ -1,166 +0,0 @@
-// This file uses uncommon vendor prefixes not covered by our compilers
-// sass-lint:disable no-vendor-prefixes
-
-.euiProgress {
-  position: relative;
-  overflow: hidden;
-  background-color: $euiColorLightShade;
-}
-
-// Progress bars come in different sizes.
-$euiProgressSizes: (
-  xs: $euiSizeXS / 2,
-  s: $euiSizeXS,
-  m: $euiSizeS,
-  l: $euiSize,
-);
-
-@each $name, $size in $euiProgressSizes {
-  .euiProgress--#{$name} {
-    height: $size;
-  }
-}
-
-// https://css-tricks.com/html5-progress-element/
-// Good resource if you need to work in here. There's some gotchas with
-// dealing with cross-browser progress bars.
-.euiProgress--native {
-  display: block;
-  width: 100%;
-  appearance: none;
-  border: none;
-
-  &::-webkit-progress-bar {
-    background-color: $euiColorLightShade;
-  }
-
-  &::-webkit-progress-value {
-    transition: width $euiAnimSpeedNormal linear;
-  }
-
-  &::-moz-progress-bar {
-    transition: width $euiAnimSpeedNormal linear;
-  }
-}
-
-/**
- * An indeterminate bar has an unreliable end time. Because of a Firefox animation issue,
- * we apply this style to a <div> instead of a <progress> element.
- * See https://css-tricks.com/html5-progress-element/ for more info.
- */
-.euiProgress--indeterminate {
-  &:before {
-    position: absolute;
-    content: '';
-    width: 100%;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    transform: scaleX(0) translateX(0%);
-    animation: euiProgress 1s $euiAnimSlightResistance infinite;
-  }
-}
-
-// Progress bars can be set to fixed or absolute.
-.euiProgress--fixed {
-  position: fixed;
-  z-index: $euiZHeader + 1;
-}
-
-.euiProgress--absolute {
-  position: absolute;
-}
-
-.euiProgress--fixed,
-.euiProgress--absolute {
-  top: 0;
-  left: 0;
-  right: 0;
-  background-color: transparent;
-
-  &.euiProgress--native {
-    &::-webkit-progress-bar {
-      background-color: transparent;
-    }
-
-    &::-moz-progress-bar {
-      background-color: transparent;
-    }
-  }
-}
-
-@each $name, $color in $euiProgressColors {
-  .euiProgress--#{$name} {
-    &.euiProgress--native {
-      &::-webkit-progress-value {
-        background-color: $color;
-      }
-
-      &::-moz-progress-bar {
-        background-color: $color;
-      }
-    }
-
-    &.euiProgress--indeterminate {
-      &:before {
-        background-color: $color;
-      }
-    }
-  }
-
-  @if ($name != 'customColor') {
-    .euiProgress__data--#{$name} {
-      .euiProgress__valueText {
-        color: makeHighContrastColor($color);
-      }
-    }
-  }
-}
-
-@keyframes euiProgress {
-  0% {
-    transform: scaleX(1) translateX(-100%);
-  }
-
-  100% {
-    transform: scaleX(1) translateX(100%);
-  }
-}
-
-.euiProgress__data {
-  display: flex;
-  justify-content: space-between;
-}
-
-.euiProgress__label,
-.euiProgress__valueText {
-  @include euiText;
-  @include euiFontSizeXS;
-  @include euiTextTruncate;
-}
-
-.euiProgress__label {
-  flex-grow: 1;
-
-  // Only restrict the valueText if it's the sibling of the label
-  // Gives width precedence to the value text forcing consumers to round their values
-  + .euiProgress__valueText {
-    padding-left: $euiSizeXS;
-    flex-grow: 1;
-    text-align: right;
-    flex-shrink: 0;
-  }
-}
-
-.euiProgress__valueText {
-  // Tabular numbers ensure the line up nicely when right-aligned
-  font-feature-settings: 'tnum' 1;
-  margin-left: auto;
-}
-
-.euiProgress__data--l {
-  .euiProgress__label,
-  .euiProgress__valueText {
-    @include euiFontSizeS;
-  }
-}
diff --git a/src/components/progress/_variables.scss b/src/components/progress/_variables.scss
deleted file mode 100644
index f11fe07da7b..00000000000
--- a/src/components/progress/_variables.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-// Progress bars come in different colors.
-$euiProgressColors: (
-  primary: $euiColorPrimary,
-  success: $euiColorSuccess,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
-  accent: $euiColorAccent,
-  subdued: $euiTextSubduedColor,
-  vis0: $euiColorVis0,
-  vis1: $euiColorVis1,
-  vis2: $euiColorVis2,
-  vis3: $euiColorVis3,
-  vis4: $euiColorVis4,
-  vis5: $euiColorVis5,
-  vis6: $euiColorVis6,
-  vis7: $euiColorVis7,
-  vis8: $euiColorVis8,
-  vis9: $euiColorVis9,
-  customColor: currentColor,
-);
-
diff --git a/src/components/progress/progress.styles.test.ts b/src/components/progress/progress.styles.test.ts
new file mode 100644
index 00000000000..c1002f48427
--- /dev/null
+++ b/src/components/progress/progress.styles.test.ts
@@ -0,0 +1,61 @@
+/*
+ * 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 { testCustomHook } from '../../test/internal';
+import { useEuiTheme } from '../../services';
+
+import { POSITIONS, COLORS } from './progress';
+import { euiProgressStyles } from './progress.styles';
+
+describe('euiProgressStyles', () => {
+  describe('native progress CSS', () => {
+    const isNative = true;
+    const emotionReturn = testCustomHook(() =>
+      euiProgressStyles(useEuiTheme(), isNative)
+    ).return as any;
+
+    describe('positions', () => {
+      POSITIONS.forEach((position) => {
+        test(position, () => {
+          expect(emotionReturn[position].styles).toMatchSnapshot();
+        });
+      });
+    });
+
+    describe('colors', () => {
+      COLORS.forEach((color) => {
+        test(color, () => {
+          expect(emotionReturn[color].styles).toMatchSnapshot();
+        });
+      });
+    });
+  });
+
+  describe('indeterminate div CSS', () => {
+    const isNative = false;
+    const emotionReturn = testCustomHook(() =>
+      euiProgressStyles(useEuiTheme(), isNative)
+    ).return as any;
+
+    describe('positions', () => {
+      POSITIONS.forEach((position) => {
+        test(position, () => {
+          expect(emotionReturn[position].styles).toMatchSnapshot();
+        });
+      });
+    });
+
+    describe('colors', () => {
+      COLORS.forEach((color) => {
+        test(color, () => {
+          expect(emotionReturn[color].styles).toMatchSnapshot();
+        });
+      });
+    });
+  });
+});
diff --git a/src/components/progress/progress.styles.ts b/src/components/progress/progress.styles.ts
new file mode 100644
index 00000000000..fac13611ea7
--- /dev/null
+++ b/src/components/progress/progress.styles.ts
@@ -0,0 +1,297 @@
+/*
+ * 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, keyframes } from '@emotion/react';
+import {
+  logicalCSS,
+  logicalTextAlignCSS,
+  euiCantAnimate,
+  euiFontSize,
+  euiTextTruncate,
+} from '../../global_styling';
+import {
+  UseEuiTheme,
+  euiPaletteColorBlind,
+  makeHighContrastColor,
+} from '../../services';
+import { euiText } from '../text/text.styles';
+
+/**
+ * DRY utilities for native/determinate progress components vs non-native indeterminate
+ */
+const crossBrowserProgressValue = (cssProperties: string) => `
+  &::-webkit-progress-value {
+    ${cssProperties}
+  }
+  &::-moz-progress-bar {
+    ${cssProperties}
+  }
+`;
+const indeterminateProgressValue = (cssProperties: string) => `
+  &:before {
+    ${cssProperties}
+  }
+`;
+
+/**
+ * Color utilities
+ */
+const visColors = euiPaletteColorBlind();
+
+const nativeVsIndeterminateColor = (color: string, isNative: boolean) => {
+  const selectors = isNative
+    ? crossBrowserProgressValue
+    : indeterminateProgressValue;
+  return selectors(`background-color: ${color};`);
+};
+
+/**
+ * DRY utils for non-static positions
+ */
+const nonStaticPositioning = (isNative: boolean) => `
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: transparent;
+  ${
+    isNative
+      ? `
+      &::-webkit-progress-bar {
+        background-color: transparent;
+      }`
+      : ''
+  }
+`;
+
+/**
+ * Animations
+ */
+const euiIndeterminateAnimation = keyframes`
+  0% {
+    transform: scaleX(1) translateX(-100%);
+  }
+  100% {
+    transform: scaleX(1) translateX(100%);
+  }
+`;
+
+/**
+ * Emotion styles
+ */
+export const euiProgressStyles = (
+  { euiTheme }: UseEuiTheme,
+  isNative: boolean
+) => ({
+  euiProgress: css`
+    overflow: hidden;
+    background-color: ${euiTheme.colors.lightShade};
+  `,
+  // https://css-tricks.com/html5-progress-element/
+  // Good resource if you need to work in here. There's some gotchas with
+  // dealing with cross-browser progress bars.
+  native: css`
+    display: block;
+    ${logicalCSS('width', '100%')}
+    appearance: none;
+    border: none;
+    border-radius: ${euiTheme.size.s};
+
+    &::-webkit-progress-bar {
+      background-color: ${euiTheme.colors.lightShade};
+    }
+
+    ${crossBrowserProgressValue(
+      `transition: width ${euiTheme.animation.normal} linear;`
+    )}
+  `,
+  // An indeterminate bar has an unreliable end time. Because of a Firefox animation issue,
+  // we apply this style to a <div> instead of a <progress> element.
+  // See https://css-tricks.com/html5-progress-element/ for more info.
+  indeterminate: css`
+    &:before {
+      position: absolute;
+      content: '';
+      ${logicalCSS('width', '100%')}
+      top: 0;
+      bottom: 0;
+      left: 0;
+      transform: scaleX(0) translateX(0%);
+      animation: ${euiIndeterminateAnimation} 1s
+        ${euiTheme.animation.resistance} infinite;
+
+      ${euiCantAnimate} {
+        animation-duration: 2s;
+        animation-timing-function: linear;
+      }
+    }
+  `,
+  // Sizes
+  xs: css`
+    ${logicalCSS('height', euiTheme.size.xxs)}
+  `,
+  s: css`
+    ${logicalCSS('height', euiTheme.size.xs)}
+  `,
+  m: css`
+    ${logicalCSS('height', euiTheme.size.s)}
+  `,
+  l: css`
+    ${logicalCSS('height', euiTheme.size.m)}
+  `,
+  // Positioning
+  fixed: css`
+    position: fixed;
+    z-index: ${Number(euiTheme.levels.header) + 1};
+    ${nonStaticPositioning(isNative)}}
+  `,
+  absolute: css`
+    position: absolute;
+    ${nonStaticPositioning(isNative)}
+  `,
+  static: css`
+    position: relative;
+  `,
+  // Colors
+  primary: css`
+    ${nativeVsIndeterminateColor(euiTheme.colors.primary, isNative)}
+  `,
+  success: css`
+    ${nativeVsIndeterminateColor(euiTheme.colors.success, isNative)}
+  `,
+  warning: css`
+    ${nativeVsIndeterminateColor(euiTheme.colors.warning, isNative)}
+  `,
+  danger: css`
+    ${nativeVsIndeterminateColor(euiTheme.colors.danger, isNative)}
+  `,
+  subdued: css`
+    ${nativeVsIndeterminateColor(euiTheme.colors.subduedText, isNative)}
+  `,
+  accent: css`
+    ${nativeVsIndeterminateColor(euiTheme.colors.accent, isNative)}
+  `,
+  vis0: css`
+    ${nativeVsIndeterminateColor(visColors[0], isNative)}
+  `,
+  vis1: css`
+    ${nativeVsIndeterminateColor(visColors[1], isNative)}
+  `,
+  vis2: css`
+    ${nativeVsIndeterminateColor(visColors[2], isNative)}
+  `,
+  vis3: css`
+    ${nativeVsIndeterminateColor(visColors[3], isNative)}
+  `,
+  vis4: css`
+    ${nativeVsIndeterminateColor(visColors[4], isNative)}
+  `,
+  vis5: css`
+    ${nativeVsIndeterminateColor(visColors[5], isNative)}
+  `,
+  vis6: css`
+    ${nativeVsIndeterminateColor(visColors[6], isNative)}
+  `,
+  vis7: css`
+    ${nativeVsIndeterminateColor(visColors[7], isNative)}
+  `,
+  vis8: css`
+    ${nativeVsIndeterminateColor(visColors[8], isNative)}
+  `,
+  vis9: css`
+    ${nativeVsIndeterminateColor(visColors[9], isNative)}
+  `,
+  customColor: css`
+    ${nativeVsIndeterminateColor('currentColor', isNative)}
+  `,
+});
+
+/**
+ * Data styles
+ */
+export const euiProgressDataStyles = (euiThemeContext: UseEuiTheme) => ({
+  euiProgress__data: css`
+    display: flex;
+    justify-content: space-between;
+    gap: ${euiThemeContext.euiTheme.size.xs};
+    ${euiText(euiThemeContext.euiTheme)}
+    ${euiFontSize(euiThemeContext, 'xs')}
+  `,
+  // Sizes
+  l: css`
+    ${euiFontSize(euiThemeContext, 's')}
+  `,
+});
+
+export const euiProgressLabelStyles = {
+  euiProgress__label: css`
+    flex-grow: 1;
+    ${euiTextTruncate()}
+  `,
+};
+
+export const euiProgressValueTextStyles = ({ euiTheme }: UseEuiTheme) => ({
+  euiProgress__valueText: css`
+    flex-grow: 1;
+    flex-shrink: 0;
+    font-feature-settings: 'tnum' 1; // Tabular numbers ensure the line up nicely when right-aligned
+    ${logicalTextAlignCSS('right')}
+    ${euiTextTruncate()}
+  `,
+  // Colors
+  primary: css`
+    color: ${euiTheme.colors.primaryText};
+  `,
+  success: css`
+    color: ${euiTheme.colors.successText};
+  `,
+  warning: css`
+    color: ${euiTheme.colors.warningText};
+  `,
+  danger: css`
+    color: ${euiTheme.colors.dangerText};
+  `,
+  subdued: css`
+    color: ${euiTheme.colors.subduedText};
+  `,
+  accent: css`
+    color: ${euiTheme.colors.accentText};
+  `,
+  vis0: css`
+    color: ${makeHighContrastColor(visColors[0])(euiTheme)};
+  `,
+  vis1: css`
+    color: ${makeHighContrastColor(visColors[1])(euiTheme)};
+  `,
+  vis2: css`
+    color: ${makeHighContrastColor(visColors[2])(euiTheme)};
+  `,
+  vis3: css`
+    color: ${makeHighContrastColor(visColors[3])(euiTheme)};
+  `,
+  vis4: css`
+    color: ${makeHighContrastColor(visColors[4])(euiTheme)};
+  `,
+  vis5: css`
+    color: ${makeHighContrastColor(visColors[5])(euiTheme)};
+  `,
+  vis6: css`
+    color: ${makeHighContrastColor(visColors[6])(euiTheme)};
+  `,
+  vis7: css`
+    color: ${makeHighContrastColor(visColors[7])(euiTheme)};
+  `,
+  vis8: css`
+    color: ${makeHighContrastColor(visColors[8])(euiTheme)};
+  `,
+  vis9: css`
+    color: ${makeHighContrastColor(visColors[9])(euiTheme)};
+  `,
+  customColor: css`
+    color: currentColor;
+  `,
+});
diff --git a/src/components/progress/progress.test.tsx b/src/components/progress/progress.test.tsx
index 8c147ac3d7b..e2aa36ac7c2 100644
--- a/src/components/progress/progress.test.tsx
+++ b/src/components/progress/progress.test.tsx
@@ -9,6 +9,7 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiProgress, COLORS, SIZES } from './progress';
 
@@ -19,6 +20,9 @@ describe('EuiProgress', () => {
     expect(component).toMatchSnapshot();
   });
 
+  shouldRenderCustomStyles(<EuiProgress />);
+  shouldRenderCustomStyles(<EuiProgress max={100} />);
+
   test('has max', () => {
     const component = render(<EuiProgress max={100} {...requiredProps} />);
 
diff --git a/src/components/progress/progress.tsx b/src/components/progress/progress.tsx
index e3d70e16145..209adb2967e 100644
--- a/src/components/progress/progress.tsx
+++ b/src/components/progress/progress.tsx
@@ -17,95 +17,42 @@ import React, {
 import classNames from 'classnames';
 import { EuiI18n } from '../i18n';
 import { EuiInnerText } from '../inner_text';
-import { CommonProps, ExclusiveUnion, keysOf } from '../common';
+import { CommonProps, ExclusiveUnion } from '../common';
 import { isNil } from '../../services/predicate';
 
-const sizeToClassNameMap = {
-  xs: 'euiProgress--xs',
-  s: 'euiProgress--s',
-  m: 'euiProgress--m',
-  l: 'euiProgress--l',
-};
-
-export const SIZES = keysOf(sizeToClassNameMap);
-
-export type EuiProgressSize = keyof typeof sizeToClassNameMap;
-
-export type ProgressColor =
-  | 'primary'
-  | 'success'
-  | 'warning'
-  | 'danger'
-  | 'subdued'
-  | 'accent'
-  | 'vis0'
-  | 'vis1'
-  | 'vis2'
-  | 'vis3'
-  | 'vis4'
-  | 'vis5'
-  | 'vis6'
-  | 'vis7'
-  | 'vis8'
-  | 'vis9';
-
-const colorToClassNameMap = {
-  primary: 'euiProgress--primary',
-  success: 'euiProgress--success',
-  warning: 'euiProgress--warning',
-  danger: 'euiProgress--danger',
-  subdued: 'euiProgress--subdued',
-  accent: 'euiProgress--accent',
-  vis0: 'euiProgress--vis0',
-  vis1: 'euiProgress--vis1',
-  vis2: 'euiProgress--vis2',
-  vis3: 'euiProgress--vis3',
-  vis4: 'euiProgress--vis4',
-  vis5: 'euiProgress--vis5',
-  vis6: 'euiProgress--vis6',
-  vis7: 'euiProgress--vis7',
-  vis8: 'euiProgress--vis8',
-  vis9: 'euiProgress--vis9',
-};
-
-export const COLORS = keysOf(colorToClassNameMap);
-
-type NamedColor = keyof typeof colorToClassNameMap;
-
-function isNamedColor(name: string): name is NamedColor {
-  return colorToClassNameMap.hasOwnProperty(name);
-}
-
-export type EuiProgressColor = keyof typeof colorToClassNameMap;
-
-const dataColorToClassNameMap: { [color in ProgressColor]: string } = {
-  primary: 'euiProgress__data--primary',
-  success: 'euiProgress__data--success',
-  warning: 'euiProgress__data--warning',
-  danger: 'euiProgress__data--danger',
-  subdued: 'euiProgress__data--subdued',
-  accent: 'euiProgress__data--accent',
-  vis0: 'euiProgress__data--vis0',
-  vis1: 'euiProgress__data--vis1',
-  vis2: 'euiProgress__data--vis2',
-  vis3: 'euiProgress__data--vis3',
-  vis4: 'euiProgress__data--vis4',
-  vis5: 'euiProgress__data--vis5',
-  vis6: 'euiProgress__data--vis6',
-  vis7: 'euiProgress__data--vis7',
-  vis8: 'euiProgress__data--vis8',
-  vis9: 'euiProgress__data--vis9',
-};
-
-const positionsToClassNameMap = {
-  fixed: 'euiProgress--fixed',
-  absolute: 'euiProgress--absolute',
-  static: '',
-};
-
-export const POSITIONS = keysOf(positionsToClassNameMap);
-
-export type EuiProgressPosition = keyof typeof positionsToClassNameMap;
+import { useEuiTheme, makeHighContrastColor } from '../../services';
+import {
+  euiProgressStyles,
+  euiProgressDataStyles,
+  euiProgressLabelStyles,
+  euiProgressValueTextStyles,
+} from './progress.styles';
+
+export const SIZES = ['xs', 's', 'm', 'l'] as const;
+export type EuiProgressSize = typeof SIZES[number];
+
+export const COLORS = [
+  'primary',
+  'success',
+  'warning',
+  'danger',
+  'subdued',
+  'accent',
+  'vis0',
+  'vis1',
+  'vis2',
+  'vis3',
+  'vis4',
+  'vis5',
+  'vis6',
+  'vis7',
+  'vis8',
+  'vis9',
+] as const;
+export type EuiProgressColor = typeof COLORS[number];
+
+export const POSITIONS = ['fixed', 'absolute', 'static'] as const;
+export type EuiProgressPosition = typeof POSITIONS[number];
 
 export type EuiProgressProps = CommonProps & {
   size?: EuiProgressSize;
@@ -148,40 +95,40 @@ export const EuiProgress: FunctionComponent<ExclusiveUnion<
   ...rest
 }) => {
   const determinate = !isNil(max);
-  let colorClass = null;
-  let dataColorClass = null;
-  let optionalCustomStyles: any = null;
-  if (color) {
-    if (isNamedColor(color)) {
-      colorClass = colorToClassNameMap[color];
-      dataColorClass = dataColorToClassNameMap[color];
-    } else {
-      optionalCustomStyles = { color: color };
-      colorClass = 'euiProgress--customColor';
-    }
-  }
-  const classes = classNames(
-    'euiProgress',
-    {
-      'euiProgress--indeterminate': !determinate,
-      'euiProgress--native': determinate,
-    },
-    sizeToClassNameMap[size],
-    colorClass,
-    positionsToClassNameMap[position],
-    className
-  );
-  const dataClasses = classNames(
-    'euiProgress__data',
-    {
-      'euiProgress__data--l': size === 'l',
-    },
-    dataColorClass
-  );
-  const labelClasses = classNames(
-    'euiProgress__label',
-    labelProps && labelProps.className
-  );
+  const isNamedColor = COLORS.includes(color as EuiProgressColor);
+
+  const euiTheme = useEuiTheme();
+  const customColorStyles = !isNamedColor ? { color } : {};
+  const customTextColorStyles = !isNamedColor
+    ? { color: makeHighContrastColor(color)(euiTheme.euiTheme) }
+    : {};
+
+  const styles = euiProgressStyles(euiTheme, determinate);
+  const cssStyles = [
+    styles.euiProgress,
+    determinate && styles.native,
+    !determinate && styles.indeterminate,
+    styles[size],
+    styles[position],
+    isNamedColor ? styles[color as EuiProgressColor] : styles.customColor,
+  ];
+
+  const dataStyles = euiProgressDataStyles(euiTheme);
+  const dataCssStyles = [
+    dataStyles.euiProgress__data,
+    size === 'l' && dataStyles[size],
+  ];
+  const labelCssStyles = [euiProgressLabelStyles.euiProgress__label];
+  const valueTextStyles = euiProgressValueTextStyles(euiTheme);
+  const valueTextCssStyles = [
+    valueTextStyles.euiProgress__valueText,
+    isNamedColor
+      ? valueTextStyles[color as EuiProgressColor]
+      : styles.customColor,
+  ];
+
+  const classes = classNames('euiProgress', className);
+  const labelClasses = classNames('euiProgress__label', labelProps?.className);
 
   let valueRender: ReactNode;
   if (valueText === true) {
@@ -207,7 +154,7 @@ export const EuiProgress: FunctionComponent<ExclusiveUnion<
     return (
       <Fragment>
         {label || valueText ? (
-          <div className={dataClasses}>
+          <div css={dataCssStyles} className="euiProgress__data">
             {label && (
               <EuiInnerText>
                 {(ref, innerText) => (
@@ -215,6 +162,7 @@ export const EuiProgress: FunctionComponent<ExclusiveUnion<
                     title={innerText}
                     ref={ref}
                     {...labelProps}
+                    css={labelCssStyles}
                     className={labelClasses}
                   >
                     {label}
@@ -228,7 +176,8 @@ export const EuiProgress: FunctionComponent<ExclusiveUnion<
                   <span
                     title={innerText}
                     ref={ref}
-                    style={optionalCustomStyles}
+                    style={customTextColorStyles}
+                    css={valueTextCssStyles}
                     className="euiProgress__valueText"
                   >
                     {valueRender}
@@ -239,8 +188,9 @@ export const EuiProgress: FunctionComponent<ExclusiveUnion<
           </div>
         ) : undefined}
         <progress
+          css={cssStyles}
           className={classes}
-          style={optionalCustomStyles}
+          style={customColorStyles}
           max={max}
           value={value}
           aria-hidden={label && valueText ? true : false}
@@ -251,7 +201,8 @@ export const EuiProgress: FunctionComponent<ExclusiveUnion<
   } else {
     return (
       <div
-        style={optionalCustomStyles}
+        css={cssStyles}
+        style={customColorStyles}
         className={classes}
         {...(rest as HTMLAttributes<HTMLDivElement>)}
       />
diff --git a/src/themes/amsterdam/overrides/_index.scss b/src/themes/amsterdam/overrides/_index.scss
index 830da42b470..f4cceb3bab6 100644
--- a/src/themes/amsterdam/overrides/_index.scss
+++ b/src/themes/amsterdam/overrides/_index.scss
@@ -26,7 +26,6 @@
 @import 'notification_badge';
 @import 'overlay_mask';
 @import 'popover';
-@import 'progress';
 @import 'range';
 @import 'range_draggable';
 @import 'range_highlight';
diff --git a/src/themes/amsterdam/overrides/_progress.scss b/src/themes/amsterdam/overrides/_progress.scss
deleted file mode 100644
index 01f6550be46..00000000000
--- a/src/themes/amsterdam/overrides/_progress.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.euiProgress--native {
-  border-radius: $euiSizeS;
-}
diff --git a/upcoming_changelogs/5986.md b/upcoming_changelogs/5986.md
new file mode 100644
index 00000000000..206e0dbe4d5
--- /dev/null
+++ b/upcoming_changelogs/5986.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiProgress` to Emotion and removed `$euiProgressColors` and `$euiProgressSizes`