[Emotion] Convert EuiProgress (#5986)

* Add basic euiProgress styles

* Convert euiProgress--native and euiProgress--indeterminate to Emotion

+ move Amsterdam override CSS into Emotion

+ add prefers-reduced-motion accommodation

* Convert size modifiers to Emotion

* Convert position modifiers to Emotion

+ pass native/determinate JS var to Emotion styles to conditionally render native vs non native CSS

+ remove unnecessary `::moz-progress-bar` selector - that affects the value color, not the background color, and should not have been added

* Convert color modifiers to Emotion

- create DRY helpers for repeating native vs indeterminate selectors

- start valueText styles while here

- remove unnecessary isNamedColor fn/typing in favor of single var

- fix playground control

* Add tests for JS styles logic

* Convert euiProgress__data and other children to Emotion

+ simplify CSS: apply text styling to parent __data wrapper as opposed to both children (truncation still needs to individually be on both children)

- simplify CSS: remove need for nested `+` selector by:
  - converting `padding-left` to `gap`
  - always setting text alignment to right (removes need for margin-left: auto)
  - always setting flex grow/flex shrink CSS (same visual effect as before)

* Update unit tests/snapshots

* Remove all EuiProgress Sass files and variables

* Changelog

* [PR feedback] Apply text contrast function to custom colors

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',

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"
   }
-}
+}

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"
   }
-}
+}

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';