From 8872c08615d5781f4a9721b22ca3275f55a62ae1 Mon Sep 17 00:00:00 2001
From: Andrey Soloviev <andrey.soloviev.s@gmail.com>
Date: Tue, 7 Mar 2023 10:55:22 +0100
Subject: [PATCH] [Icon] Add "Magic" colour to the Icon component (#8546)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Fixes [#629](https://github.com/Shopify/storefront-setup/issues/629)

The Icon component doesn't have the "Magic" colour yet, whereas the
tokens are already available for use. We should add "magic" to the
colour prop and the CSS.

### WHAT is this pull request doing?

<img src="https://shopify.click/03-54-46fx7-wqvbe.png" width="300" />

- Added `magic` entry to the Icon color prop type.
- Added corresponding CSS rule.
- Added Storybook variant.

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
N/A
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
N/A
- [ ] Updated the component's `README.md` with documentation changes N/A
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide N/A
---
 .changeset/little-doors-search.md                  | 5 +++++
 polaris-react/src/components/Icon/Icon.scss        | 5 +++++
 polaris-react/src/components/Icon/Icon.stories.tsx | 1 +
 polaris-react/src/components/Icon/Icon.tsx         | 3 ++-
 4 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/little-doors-search.md

diff --git a/.changeset/little-doors-search.md b/.changeset/little-doors-search.md
new file mode 100644
index 00000000000..731527efdf6
--- /dev/null
+++ b/.changeset/little-doors-search.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Added "magic" color to the Icon component's color prop type.
diff --git a/polaris-react/src/components/Icon/Icon.scss b/polaris-react/src/components/Icon/Icon.scss
index 69380ccb375..5478920a7bb 100644
--- a/polaris-react/src/components/Icon/Icon.scss
+++ b/polaris-react/src/components/Icon/Icon.scss
@@ -101,6 +101,11 @@
   @include recolor-icon(var(--p-action-primary));
 }
 
+.colorMagic {
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  @include recolor-icon(var(--p-color-icon-magic));
+}
+
 .Svg,
 .Img {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
diff --git a/polaris-react/src/components/Icon/Icon.stories.tsx b/polaris-react/src/components/Icon/Icon.stories.tsx
index 80f6a418b67..f72c5e1f4eb 100644
--- a/polaris-react/src/components/Icon/Icon.stories.tsx
+++ b/polaris-react/src/components/Icon/Icon.stories.tsx
@@ -21,6 +21,7 @@ export function Colored() {
       <Icon source={CirclePlusMinor} color="success" />
       <Icon source={CirclePlusMinor} color="warning" />
       <Icon source={CirclePlusMinor} color="critical" />
+      <Icon source={CirclePlusMinor} color="magic" />
     </div>
   );
 }
diff --git a/polaris-react/src/components/Icon/Icon.tsx b/polaris-react/src/components/Icon/Icon.tsx
index cc71bb42b03..aca21b34e35 100644
--- a/polaris-react/src/components/Icon/Icon.tsx
+++ b/polaris-react/src/components/Icon/Icon.tsx
@@ -14,7 +14,8 @@ type Color =
   | 'warning'
   | 'highlight'
   | 'success'
-  | 'primary';
+  | 'primary'
+  | 'magic';
 
 const COLORS_WITH_BACKDROPS = [
   'base',