Remapping bg-fill-magic-secondary colors and adding a new tone to Bad…

…ge (#11303)

We're adding a new Magic tone to the Badge component which includes the
following changes:

- Remap `bg-color-magic-fill-secondary` from `purple-6` to `purple-5`
- Remap `bg-color-magic-fill-secondary-hover` from `purple-7` to
`purple-6`
- Remap `bg-color-magic-fill-secondary-active` from `purple-8` to
`purple-7`
- Adding a new `magic` tone to the Badge component

<img width="774" alt="Screenshot 2023-12-08 at 18 47 43"
src="https://github.com/Shopify/polaris/assets/8492201/ed78cad6-73bb-4679-a626-ba7d027f5b89">
<img width="650" alt="Screenshot 2023-12-08 at 18 48 05"
src="https://github.com/Shopify/polaris/assets/8492201/c3e1780a-b902-4888-b786-f95de6927698">

<!--
  ☝️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
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

Fixes #0000 <!-- link to issue if one exists -->

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

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

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

  Include a video if your changes include interactive content.

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>
-->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [ ] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] 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)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: Jon Rundle <jon.rundle@gmail.com>
Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>

.changeset/purple-mice-build.md

@@ -0,0 +1,7 @@
+---
+'@shopify/polaris': minor
+'@shopify/polaris-tokens': minor
+---
+
+- Remapped the `bg-fill-magic-secondary` token colors
+- Added a Magic `tone` to `Badge`

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

@@ -125,6 +125,15 @@
   }
 }
 
+.toneMagic {
+  background-color: var(--p-color-bg-fill-magic-secondary);
+  color: var(--p-color-text-magic);
+
+  svg {
+    fill: var(--p-color-icon-magic);
+  }
+}
+
 .toneRead-only {
   color: var(--p-color-text-secondary);
   background-color: transparent;

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

@@ -44,6 +44,10 @@ export function New() {
   return <Badge tone="new">Fulfilled</Badge>;
 }
 
+export function Magic() {
+  return <Badge tone="magic">Magic</Badge>;
+}
+
 export function Incomplete() {
   return (
     <Badge progress="incomplete" tone="attention">
@@ -97,6 +101,7 @@ const tones: {
   attention: 'Attention',
   critical: 'Critical',
   new: 'New',
+  magic: 'Magic',
   'read-only': 'Read-only',
   enabled: 'Enabled',
   'info-strong': 'Info',

polaris-react/src/components/Badge/types.ts

@@ -5,6 +5,7 @@ export type Tone =
   | 'critical'
   | 'attention'
   | 'new'
+  | 'magic'
   | 'info-strong'
   | 'success-strong'
   | 'warning-strong'
@@ -20,6 +21,7 @@ export enum ToneValue {
   Critical = 'critical',
   Attention = 'attention',
   New = 'new',
+  Magic = 'magic',
   InfoStrong = 'info-strong',
   SuccessStrong = 'success-strong',
   WarningStrong = 'warning-strong',

polaris-tokens/src/themes/base/color.ts

@@ -628,17 +628,17 @@ export const color: {
       'The background color of elements suggested by magic AI, like a badge or a banner.',
   },
   'color-bg-fill-magic-secondary': {
-    value: colors.purple[6],
+    value: colors.purple[5],
     description:
       'The background color of elements suggested by magic AI, with a secondary level of prominence.',
   },
   'color-bg-fill-magic-secondary-hover': {
-    value: colors.purple[7],
+    value: colors.purple[6],
     description:
       'The hover state color of elements suggested by magic AI, with a secondary level of prominence.',
   },
   'color-bg-fill-magic-secondary-active': {
-    value: colors.purple[8],
+    value: colors.purple[7],
     description:
       'The active state (on press) color of elements suggested by magic AI, with a secondary level of prominence.',
   },