From 6467f077e890fff2c141602c82957ae8ca49eec8 Mon Sep 17 00:00:00 2001
From: Andrey Soloviev <andrey.soloviev@shopify.com>
Date: Fri, 3 Mar 2023 10:41:40 +0100
Subject: [PATCH 1/3] feat: add Magic color to the Icon component

---
 polaris-react/src/components/Icon/Icon.scss | 5 +++++
 polaris-react/src/components/Icon/Icon.tsx  | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)

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

From 138d7ced2773e8d789e55aaa897ddb3d57592e7c Mon Sep 17 00:00:00 2001
From: Andrey Soloviev <andrey.soloviev@shopify.com>
Date: Fri, 3 Mar 2023 10:59:45 +0100
Subject: [PATCH 2/3] feat: add Magic color variant to storybook

---
 polaris-react/src/components/Icon/Icon.stories.tsx | 1 +
 1 file changed, 1 insertion(+)

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>
   );
 }

From 87751789cbc1afe754deba56d07aec6253cb6b01 Mon Sep 17 00:00:00 2001
From: Andrey Soloviev <andrey.soloviev@shopify.com>
Date: Fri, 3 Mar 2023 11:18:36 +0100
Subject: [PATCH 3/3] feat: add changelog entry

---
 .changeset/little-doors-search.md | 5 +++++
 1 file changed, 5 insertions(+)
 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.