Adds purple badge (#3046)

Author: bruugey

.changeset/ninety-kings-build.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/badge': minor
+---
+
+Adds `purple` to Variant set

packages/badge/README.md

@@ -36,10 +36,10 @@ import Badge from '@leafygreen-ui/badge';
 
 ## Properties
 
-| Prop        | Type                                                                  | Description                                                       | Default       |
-| ----------- | --------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------- |
-| `variant`   | `'lightgray'`, `'darkgray'`, `'red'`, `'blue'`, `'green'`, `'yellow'` | Sets the style variant of the badge.                              | `'lightgray'` |
-| `className` | `string`                                                              | Adds a className to the class attribute                           |               |
-| `children`  | `node`                                                                | The content that will appear inside of the `<Badge />` component. |               |
-| ...         | native `div` attributes                                               | Any other props will be spread on the root `div` element          |               |
-| `darkMode`  | `boolean`                                                             | Determines if the component renders in dark theme                 | `false`       |
+| Prop        | Type                                                                              | Description                                                       | Default       |
+| ----------- | --------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------- |
+| `variant`   | `'lightgray'`, `'darkgray'`, `'red'`, `'blue'`, `'green'`, `'yellow'`, `'purple'` | Sets the style variant of the badge.                              | `'lightgray'` |
+| `className` | `string`                                                                          | Adds a className to the class attribute                           |               |
+| `children`  | `node`                                                                            | The content that will appear inside of the `<Badge />` component. |               |
+| ...         | native `div` attributes                                                           | Any other props will be spread on the root `div` element          |               |
+| `darkMode`  | `boolean`                                                                         | Determines if the component renders in dark theme                 | `false`       |

packages/badge/src/Badge/Badge.styles.ts

@@ -58,6 +58,12 @@ export const badgeVariants: Record<Theme, Record<Variant, string>> = {
       border-color: ${palette.green.dark2};
       color: ${palette.green.light1};
     `,
+
+    [Variant.Purple]: css`
+      background-color: ${palette.purple.dark2};
+      border-color: ${palette.purple.base};
+      color: ${palette.purple.light2};
+    `,
   },
   [Theme.Light]: {
     [Variant.LightGray]: css`
@@ -95,5 +101,11 @@ export const badgeVariants: Record<Theme, Record<Variant, string>> = {
       border-color: ${palette.green.light2};
       color: ${palette.green.dark2};
     `,
+
+    [Variant.Purple]: css`
+      background-color: ${palette.purple.light3};
+      border-color: ${palette.purple.light2};
+      color: ${palette.purple.dark2};
+    `,
   },
 } as const;

packages/badge/src/Badge/Badge.types.ts

@@ -26,6 +26,7 @@ export const Variant = {
   Yellow: 'yellow',
   Blue: 'blue',
   Green: 'green',
+  Purple: 'purple',
 } as const;
 
 export type Variant = (typeof Variant)[keyof typeof Variant];