[Icon] Add "Magic" colour to the Icon component (#8546)

### WHY are these changes introduced?

Fixes [#629](Shopify/storefront-setup#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

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Added "magic" color to the Icon component's color prop type.

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

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

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

@@ -14,7 +14,8 @@ type Color =
   | 'warning'
   | 'highlight'
   | 'success'
-  | 'primary';
+  | 'primary'
+  | 'magic';
 
 const COLORS_WITH_BACKDROPS = [
   'base',