[EuiProgress] Add support for more colors

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `plus` and `minus` glyphs to `EuiIcon` ([#4111](https://github.com/elastic/eui/pull/4111))
+- Added colors `tint1` through `tint9`, `warning` and `success` to `EuiProgress` ([#4130](https://github.com/elastic/eui/pull/4130))
 
 ## [`29.4.0`](https://github.com/elastic/eui/tree/v29.4.0)
 

src-docs/src/views/progress/progress_size_color.js

@@ -1,21 +1,69 @@
 import React from 'react';
 
-import { EuiProgress, EuiSpacer } from '../../../../src/components';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiProgress,
+  EuiSpacer,
+} from '../../../../src/components';
 
-export default () => (
-  <div>
-    <EuiProgress value={20} max={100} color="subdued" size="xs" />
-    <EuiSpacer size="l" />
-
-    <EuiProgress value={40} max={100} color="accent" size="xs" />
-    <EuiSpacer size="l" />
+const mainColors = [
+  'primary',
+  'success',
+  'warning',
+  'danger',
+  'subdued',
+  'accent',
+];
 
-    <EuiProgress value={60} max={100} color="primary" size="s" />
-    <EuiSpacer size="l" />
+const vizBars = [];
 
-    <EuiProgress value={80} max={100} color="secondary" size="m" />
-    <EuiSpacer size="l" />
+for (let i = 1; i < 10; i++) {
+  vizBars.push(
+    <>
+      <EuiProgress
+        label={`tint${i}`}
+        value={80}
+        max={100}
+        color={`tint${i}`}
+        size="m"
+      />
+      <EuiSpacer size="s" />
+    </>
+  );
+}
 
-    <EuiProgress value={90} max={100} color="danger" size="l" />
-  </div>
+export default () => (
+  <EuiFlexGroup>
+    <EuiFlexItem>
+      <EuiProgress value={20} max={100} color="secondary" size="xs" />
+      <EuiSpacer size="l" />
+      <EuiProgress value={40} max={100} color="secondary" size="xs" />
+      <EuiSpacer size="l" />
+      <EuiProgress value={60} max={100} color="secondary" size="s" />
+      <EuiSpacer size="l" />
+      <EuiProgress value={80} max={100} color="secondary" size="m" />
+      <EuiSpacer size="l" />
+      <EuiProgress value={90} max={100} color="secondary" size="l" />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          {mainColors.map((value) => (
+            <>
+              <EuiProgress
+                label={value}
+                value={80}
+                max={100}
+                color={value}
+                size="m"
+              />
+              <EuiSpacer size="s" />
+            </>
+          ))}
+        </EuiFlexItem>
+        <EuiFlexItem>{vizBars}</EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexItem>
+  </EuiFlexGroup>
 );

src/components/progress/_index.scss

@@ -1 +1,2 @@
+@import 'variables';
 @import 'progress';

src/components/progress/_progress.scss

@@ -89,16 +89,6 @@ $euiProgressSizes: (
   }
 }
 
-// Progress bars come in different colors.
-$euiProgressColors: (
-  primary: $euiColorPrimary,
-  secondary: $euiColorSecondary,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
-  accent: $euiColorAccent,
-  subdued: $euiTextSubduedColor,
-);
-
 @each $name, $color in $euiProgressColors {
   .euiProgress--#{$name} {
     &.euiProgress--native {

src/components/progress/_variables.scss

@@ -0,0 +1,21 @@
+// Progress bars come in different colors.
+$euiProgressColors: (
+  primary: $euiColorPrimary,
+  secondary: $euiColorSecondary,
+  success: $euiColorSecondary,
+  warning: $euiColorWarning,
+  danger: $euiColorDanger,
+  accent: $euiColorAccent,
+  subdued: $euiTextSubduedColor,
+  tint0: $euiColorVis0,
+  tint1: $euiColorVis1,
+  tint2: $euiColorVis2,
+  tint3: $euiColorVis3,
+  tint4: $euiColorVis4,
+  tint5: $euiColorVis5,
+  tint6: $euiColorVis6,
+  tint7: $euiColorVis7,
+  tint8: $euiColorVis8,
+  tint9: $euiColorVis9,
+);
+

src/components/progress/progress.tsx

@@ -44,9 +44,20 @@ export type EuiProgressSize = keyof typeof sizeToClassNameMap;
 const colorToClassNameMap = {
   primary: 'euiProgress--primary',
   secondary: 'euiProgress--secondary',
+  success: 'euiProgress--success',
+  warning: 'euiProgress--warning',
   danger: 'euiProgress--danger',
   subdued: 'euiProgress--subdued',
   accent: 'euiProgress--accent',
+  tint1: 'euiProgress--tint1',
+  tint2: 'euiProgress--tint2',
+  tint3: 'euiProgress--tint3',
+  tint4: 'euiProgress--tint4',
+  tint5: 'euiProgress--tint5',
+  tint6: 'euiProgress--tint6',
+  tint7: 'euiProgress--tint7',
+  tint8: 'euiProgress--tint8',
+  tint9: 'euiProgress--tint9',
 };
 
 export const COLORS = Object.keys(colorToClassNameMap);
@@ -56,9 +67,20 @@ export type EuiProgressColor = keyof typeof colorToClassNameMap;
 const dataColorToClassNameMap = {
   primary: 'euiProgress__data--primary',
   secondary: 'euiProgress__data--secondary',
+  success: 'euiProgress__data--success',
+  warning: 'euiProgress__data--warning',
   danger: 'euiProgress__data--danger',
   subdued: 'euiProgress__data--subdued',
   accent: 'euiProgress__data--accent',
+  tint1: 'euiProgress__data--tint1',
+  tint2: 'euiProgress__data--tint2',
+  tint3: 'euiProgress__data--tint3',
+  tint4: 'euiProgress__data--tint4',
+  tint5: 'euiProgress__data--tint5',
+  tint6: 'euiProgress__data--tint6',
+  tint7: 'euiProgress__data--tint7',
+  tint8: 'euiProgress__data--tint8',
+  tint9: 'euiProgress__data--tint9',
 };
 
 const positionsToClassNameMap = {