[ProgressBar] Rename color to tone (#10051)

### WHY are these changes introduced?

Fixes #10049 

### WHAT is this pull request doing?

- Renames the `color` prop to `tone`
- Remove existing `color` prop

Author: aveline

.changeset/healthy-boxes-wave.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Renamed `color` prop to `tone` for `ProgressBar` component

polaris-react/src/components/ProgressBar/ProgressBar.scss

@@ -35,7 +35,7 @@
   height: progress-bar-height(large);
 }
 
-.colorHighlight {
+.toneHighlight {
   // stylelint-disable -- Polaris component custom properties
   --pc-progress-bar-background: var(--p-color-bg-strong);
   --pc-progress-bar-indicator: var(--p-color-border-info);
@@ -47,14 +47,14 @@
   }
 }
 
-.colorPrimary {
+.tonePrimary {
   // stylelint-disable -- Polaris component custom properties
   --pc-progress-bar-background: var(--p-color-bg-strong);
   --pc-progress-bar-indicator: var(--p-color-bg-primary);
   // stylelint-enable
 }
 
-.colorSuccess {
+.toneSuccess {
   // stylelint-disable -- Polaris component custom properties
   --pc-progress-bar-background: var(--p-color-bg-strong);
   --pc-progress-bar-indicator: var(--p-color-border-success);
@@ -66,7 +66,7 @@
   }
 }
 
-.colorCritical {
+.toneCritical {
   // stylelint-disable -- Polaris component custom properties
   --pc-progress-bar-background: var(--p-color-bg-strong);
   --pc-progress-bar-indicator: var(--p-color-bg-critical);

polaris-react/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -17,13 +17,13 @@ export function Small() {
 export function WithColors() {
   return (
     <div>
-      <ProgressBar progress={70} color="primary" />
+      <ProgressBar progress={70} tone="primary" />
       <br />
-      <ProgressBar progress={30} color="success" />
+      <ProgressBar progress={30} tone="success" />
       <br />
-      <ProgressBar progress={30} color="critical" />
+      <ProgressBar progress={30} tone="critical" />
       <br />
-      <ProgressBar progress={30} color="highlight" />
+      <ProgressBar progress={30} tone="highlight" />
     </div>
   );
 }

polaris-react/src/components/ProgressBar/ProgressBar.tsx

@@ -8,7 +8,7 @@ import {useI18n} from '../../utilities/i18n';
 import styles from './ProgressBar.scss';
 
 type Size = 'small' | 'medium' | 'large';
-type Color = 'highlight' | 'primary' | 'success' | 'critical';
+type Tone = 'highlight' | 'primary' | 'success' | 'critical';
 
 export interface ProgressBarProps {
   /**
@@ -21,11 +21,6 @@ export interface ProgressBarProps {
    * @default 'medium'
    */
   size?: Size;
-  /**
-   * Color of progressbar
-   * @default 'highlight'
-   */
-  color?: Color;
   /**
    * Whether the fill animation is triggered
    * @default 'true'
@@ -35,12 +30,17 @@ export interface ProgressBarProps {
    * Id (ids) of element (elements) that describes progressbar
    */
   ariaLabelledBy?: string;
+  /**
+   * Color of progressbar
+   * @default 'highlight'
+   */
+  tone?: Tone;
 }
 
 export function ProgressBar({
   progress = 0,
   size = 'medium',
-  color = 'highlight',
+  tone = 'highlight',
   animated: hasAppearAnimation = true,
   ariaLabelledBy,
 }: ProgressBarProps) {
@@ -50,7 +50,7 @@ export function ProgressBar({
   const className = classNames(
     styles.ProgressBar,
     size && styles[variationName('size', size)],
-    color && styles[variationName('color', color)],
+    tone && styles[variationName('tone', tone)],
   );
 
   const warningMessage = i18n.translate(

polaris.shopify.com/pages/examples/progress-bar-colored.tsx

@@ -5,9 +5,9 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 function ProgressBarExample() {
   return (
     <div style={{width: 225}}>
-      <ProgressBar progress={70} color="primary" />
+      <ProgressBar progress={70} tone="primary" />
       <br />
-      <ProgressBar progress={30} color="success" />
+      <ProgressBar progress={30} tone="success" />
     </div>
   );
 }