[Icon] Update props (#10220)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes #10208

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

* Removes `backdrop`
* Replaces `color` with `tone`
* Matches warning tone to warning icon color

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

---------

Co-authored-by: Sara Hill <sara.hill@shopify.com>

.changeset/proud-parrots-yawn.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Changed `color` prop on `Icon` to `tone`

documentation/guides/migrating-from-v11-to-v12.md

@@ -22,7 +22,7 @@ Polaris v12.0.0 ([full release notes](https://github.com/Shopify/polaris/release
 
 `npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Layout.Section" --from="fullWidth" --to="variant" --newValue="fullWidth"`
 
-Secondary, becomes oneThird:
+- Secondary, becomes oneThird:
 
 `npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Layout.Section" --from="secondary" --to="variant" --newValue="oneThird"`
 
@@ -55,3 +55,19 @@ Secondary, becomes oneThird:
 **Button**
 
 - connectedDisclosure: [See the updated split example](https://polaris.shopify.com/components/actions/button)
+
+// TODO - Boolean prop to tone, variant migration
+
+**Icon**
+
+- Backdrop is not a pattern in the new Polaris design language. If you must use a backdrop on your icon, use Box.
+
+```tsx
+<Box background={boxBackground} padding="1" width="28px" borderRadius="full">
+  <Icon source={CirclePlusMinor} color={iconColor} />
+</Box>
+```
+
+- Color
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Icon" --from="color" --to="tone"`

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

@@ -70,7 +70,7 @@ export function Default() {
       onChange={updateText}
       label="Tags"
       value={inputValue}
-      prefix={<Icon source={SearchMinor} color="base" />}
+      prefix={<Icon source={SearchMinor} tone="base" />}
       placeholder="Search"
     />
   );
@@ -271,7 +271,7 @@ export function WithMultipleSections() {
       onChange={updateText}
       label="Tags"
       value={inputValue}
-      prefix={<Icon source={SearchMinor} color="base" />}
+      prefix={<Icon source={SearchMinor} tone="base" />}
       placeholder="Search"
     />
   );
@@ -348,7 +348,7 @@ export function WithLoading() {
       onChange={updateText}
       label="Tags"
       value={inputValue}
-      prefix={<Icon source={SearchMinor} color="base" />}
+      prefix={<Icon source={SearchMinor} tone="base" />}
       placeholder="Search"
     />
   );
@@ -551,7 +551,7 @@ export function WithEmptyState() {
       onChange={updateText}
       label="Tags"
       value={inputValue}
-      prefix={<Icon source={SearchMinor} color="base" />}
+      prefix={<Icon source={SearchMinor} tone="base" />}
       placeholder="Search"
     />
   );

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

@@ -10,7 +10,7 @@ export default {
 export function Default() {
   return (
     <Box>
-      <Icon source={PaintBrushMajor} color="base" />
+      <Icon source={PaintBrushMajor} tone="base" />
     </Box>
   );
 }
@@ -108,7 +108,7 @@ export function WithOutline() {
   return (
     <BlockStack gap="4">
       <Box background="bg" padding="4" outlineWidth="1" outlineColor="border">
-        <Icon source={PaintBrushMajor} color="base" />
+        <Icon source={PaintBrushMajor} tone="base" />
       </Box>
       <Box
         background="bg"
@@ -117,39 +117,39 @@ export function WithOutline() {
         outlineStyle="dashed"
         outlineColor="border-subdued"
       >
-        <Icon source={PaintBrushMajor} color="base" />
+        <Icon source={PaintBrushMajor} tone="base" />
       </Box>
       <Box
         background="bg"
         padding="4"
         outlineWidth="2"
         outlineColor="border-info"
       >
-        <Icon source={PaintBrushMajor} color="base" />
+        <Icon source={PaintBrushMajor} tone="base" />
       </Box>
       <Box
         background="bg"
         padding="4"
         outlineWidth="3"
         outlineColor="border-success"
       >
-        <Icon source={PaintBrushMajor} color="base" />
+        <Icon source={PaintBrushMajor} tone="base" />
       </Box>
       <Box
         background="bg"
         padding="4"
         outlineWidth="4"
         outlineColor="border-caution"
       >
-        <Icon source={PaintBrushMajor} color="base" />
+        <Icon source={PaintBrushMajor} tone="base" />
       </Box>
       <Box
         background="bg"
         padding="4"
         outlineWidth="5"
         outlineColor="border-critical"
       >
-        <Icon source={PaintBrushMajor} color="base" />
+        <Icon source={PaintBrushMajor} tone="base" />
       </Box>
     </BlockStack>
   );
@@ -158,7 +158,7 @@ export function WithOutline() {
 export function WithBorderRadius() {
   return (
     <Box background="bg" padding="4" borderRadius="2">
-      <Icon source={PaintBrushMajor} color="highlight" />
+      <Icon source={PaintBrushMajor} tone="highlight" />
     </Box>
   );
 }
@@ -172,7 +172,7 @@ export function WithResponsivePadding() {
         borderWidth="1"
         borderColor="border"
       >
-        <Icon source={PaintBrushMajor} color="base" />
+        <Icon source={PaintBrushMajor} tone="base" />
       </Box>
       <Box
         background="bg"
@@ -181,7 +181,7 @@ export function WithResponsivePadding() {
         borderWidth="1"
         borderColor="border"
       >
-        <Icon source={PaintBrushMajor} color="base" />
+        <Icon source={PaintBrushMajor} tone="base" />
       </Box>
       <Box
         background="bg"
@@ -190,7 +190,7 @@ export function WithResponsivePadding() {
         borderWidth="1"
         borderColor="border"
       >
-        <Icon source={PaintBrushMajor} color="base" />
+        <Icon source={PaintBrushMajor} tone="base" />
       </Box>
       <Box
         background="bg"
@@ -199,15 +199,15 @@ export function WithResponsivePadding() {
         borderWidth="1"
         borderColor="border"
       >
-        <Icon source={PaintBrushMajor} color="base" />
+        <Icon source={PaintBrushMajor} tone="base" />
       </Box>
       <Box
         background="bg"
         paddingInlineEnd={{xs: '4', sm: '10'}}
         borderWidth="1"
         borderColor="border"
       >
-        <Icon source={PaintBrushMajor} color="base" />
+        <Icon source={PaintBrushMajor} tone="base" />
       </Box>
     </BlockStack>
   );

polaris-react/src/components/BulkActions/components/BulkActionButton/BulkActionButton.tsx

@@ -54,7 +54,7 @@ export function BulkActionButton({
       size="slim"
       icon={
         isActivatorForMoreActionsPopover ? (
-          <Icon source={HorizontalDotsMinor} color="base" />
+          <Icon source={HorizontalDotsMinor} tone="base" />
         ) : undefined
       }
     >

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

@@ -376,7 +376,7 @@ export const DropZone: React.FunctionComponent<DropZoneProps> & {
     return (
       <div className={styles.Overlay}>
         <BlockStack gap="2" inlineAlign="center">
-          {size === 'small' && <Icon source={icon} color={color} />}
+          {size === 'small' && <Icon source={icon} tone={color} />}
           {(size === 'medium' || size === 'large') && (
             <Text variant="bodySm" as="p" fontWeight="bold">
               {text}

polaris-react/src/components/Filters/components/FilterPill/FilterPill.tsx

@@ -152,7 +152,7 @@ export function FilterPill({
                         ? ChevronDownMinor
                         : CaretDownMinor
                     }
-                    color="base"
+                    tone="base"
                   />
                 </div>
               </>
@@ -169,7 +169,7 @@ export function FilterPill({
             disabled={disabled}
           >
             <div className={styles.IconWrapper}>
-              <Icon source={CancelSmallMinor} color="base" />
+              <Icon source={CancelSmallMinor} tone="base" />
             </div>
           </UnstyledButton>
         ) : null}

polaris-react/src/components/Filters/components/SearchField/SearchField.tsx

@@ -87,7 +87,7 @@ export function SearchField({
           <Text as="span" visuallyHidden>
             {i18n.translate('Polaris.Common.clear')}
           </Text>
-          <Icon source={CircleCancelMinor} color="subdued" />
+          <Icon source={CircleCancelMinor} tone="subdued" />
         </UnstyledButton>
       )}
     </div>

polaris-react/src/components/Frame/components/Toast/Toast.tsx

@@ -78,7 +78,7 @@ export function Toast({
     <div className={styles.LeadingIcon}>
       <Icon
         source={polarisSummerEditions2023 ? AlertMinor : DiamondAlertMinor}
-        color="base"
+        tone="base"
       />
     </div>
   ) : null;

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

@@ -13,86 +13,43 @@
   color: var(--p-color-bg);
 }
 
-.hasBackdrop {
-  position: relative;
-  display: flex;
-  align-items: center;
-  margin: var(--p-space-1);
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: calc(-1 * var(--p-space-1));
-    bottom: calc(-1 * var(--p-space-1));
-    left: calc(-1 * var(--p-space-1));
-    right: calc(-1 * var(--p-space-1));
-    border-radius: var(--p-border-radius-full);
-  }
-}
-
-.colorBase {
-  svg {
-    fill: var(--p-color-icon);
-  }
-
-  &::before {
-    background-color: var(--p-color-bg-strong);
-  }
+.toneBase svg {
+  fill: var(--p-color-icon);
 }
 
-.colorSubdued svg {
+.toneSubdued svg {
   fill: var(--p-color-icon-subdued);
 }
 
-.colorCritical {
-  svg {
-    fill: var(--p-color-icon-critical);
-  }
-
-  &::before {
-    background-color: var(--p-color-bg-critical);
-  }
+.toneCaution svg {
+  fill: var(--p-color-icon-caution);
 }
 
-.colorInteractive svg {
-  fill: var(--p-color-icon-interactive);
+.toneWarning svg {
+  fill: var(--p-color-icon-warning);
 }
 
-.colorWarning {
-  svg {
-    fill: var(--p-color-icon-caution);
-  }
-
-  &::before {
-    background-color: var(--p-color-bg-warning);
-  }
+.toneCritical svg {
+  fill: var(--p-color-icon-critical);
 }
 
-.colorHighlight {
-  svg {
-    fill: var(--p-color-icon-info);
-  }
-
-  &::before {
-    background-color: var(--p-color-bg-info);
-  }
+.toneInteractive svg {
+  fill: var(--p-color-icon-interactive);
 }
 
-.colorSuccess {
-  svg {
-    fill: var(--p-color-icon-success);
-  }
+.toneInfo svg {
+  fill: var(--p-color-icon-info);
+}
 
-  &::before {
-    background-color: var(--p-color-bg-success);
-  }
+.toneSuccess svg {
+  fill: var(--p-color-icon-success);
 }
 
-.colorPrimary svg {
+.tonePrimary svg {
   fill: var(--p-color-icon-primary);
 }
 
-.colorMagic svg {
+.toneMagic svg {
   fill: var(--p-color-icon-magic);
 }