feat: Add warning tone for Badge (#826)

## Short description

Adds a new `warning` variant for the Badge component's `tone` option.


<img width="281" alt="Screenshot 2024-05-28 at 11 30 36" src="https://github.com/Doist/reactist/assets/15801768/b829b743-6356-4932-8b00-ab4a34d44769">


## PR Checklist

<!--
Feel free to leave unchecked or remove the lines that are not applicable.
-->

-   [x] Added tests for bugs / new features
-   [x] Updated docs (storybooks, readme)
-   [x] Executed `npm run validate` and made sure no errors / warnings were shown
-   [x] Described changes in `CHANGELOG.md`
-   [x] Bumped version in `package.json` and `package-lock.json` (`npm --no-git-tag-version version <major|minor|patch>`) [ref](https://docs.npmjs.com/cli/v6/commands/npm-version)
-   [x] Reviewed and approved Chromatic visual regression tests in CI

## Versioning

Minor

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# v23.3.0
+
+-   [Feat] Add `warning` as a `tone` option for `Badge`.
+
 # v23.2.2
 
 -   [Fix] Revert "Adjust modal alignment to the middle of the viewport at `800px` breakpoint for improved UX". Turns out that this is not something that we want to do.

src/badge/badge.module.css

@@ -12,6 +12,9 @@
 
     --reactist-badge-attention-tint: #cf473a;
     --reactist-badge-attention-fill: #f9e3e2;
+
+    --reactist-badge-warning-tint: #ffffff;
+    --reactist-badge-warning-fill: #eb8909;
 }
 
 .badge {
@@ -47,3 +50,8 @@
     --reactist-badge-tint: var(--reactist-badge-attention-tint);
     --reactist-badge-fill: var(--reactist-badge-attention-fill);
 }
+
+.badge-warning {
+    --reactist-badge-tint: var(--reactist-badge-warning-tint);
+    --reactist-badge-fill: var(--reactist-badge-warning-fill);
+}

src/badge/badge.stories.mdx

@@ -52,6 +52,9 @@ export function BadgeExamples() {
                     <div>
                         <Badge tone="attention" label="Attention" />
                     </div>
+                    <div>
+                        <Badge tone="warning" label="Warning" />
+                    </div>
                 </Stack>
             </Column>
             <Column width="content">
@@ -69,6 +72,9 @@ export function BadgeExamples() {
                     <div>
                         <Badge tone="attention" label="Save 25%" />
                     </div>
+                    <div>
+                        <Badge tone="warning" label="Deprecated" />
+                    </div>
                 </Stack>
             </Column>
         </Columns>
@@ -81,7 +87,7 @@ export function BadgeExamples() {
         parameters={{ docs: { source: { type: 'code' } } }}
         argTypes={{
             tone: {
-                options: ['info', 'positive', 'promote', 'attention'],
+                options: ['info', 'positive', 'promote', 'attention', 'warning'],
                 control: { type: 'inline-radio' },
                 defaultValue: 'info',
             },
@@ -159,6 +165,9 @@ The following CSS custom properties are available to customize the badge compone
 
     --reactist-badge-attention-tint: #cf473a;
     --reactist-badge-attention-fill: #f9e3e2;
+
+    --reactist-badge-warning-tint: #faead1;
+    --reactist-badge-warning-fill: #eb8909;
 }
 ```
 
@@ -183,6 +192,9 @@ export function DarkModeTemplate() {
                 // tone="attention"
                 '--reactist-badge-attention-tint': '#CF473A',
                 '--reactist-badge-attention-fill': '#351E1C',
+                // tone="warning
+                '--reactist-badge-warning-tint': '#cf473a',
+                '--reactist-badge-warning-fill': '#faead1',
             }}
         >
             <BadgeExamples />

src/badge/badge.test.tsx

@@ -20,12 +20,14 @@ describe('Badge', () => {
                 <Badge tone="positive" label="Positive" />
                 <Badge tone="promote" label="Promote" />
                 <Badge tone="attention" label="Attention" />
+                <Badge tone="warning" label="Warning" />
             </>,
         )
         expect(screen.getByText('Info')).toHaveClass('badge-info')
         expect(screen.getByText('Positive')).toHaveClass('badge-positive')
         expect(screen.getByText('Promote')).toHaveClass('badge-promote')
         expect(screen.getByText('Attention')).toHaveClass('badge-attention')
+        expect(screen.getByText('Warning')).toHaveClass('badge-warning')
     })
 
     it('passes through aria-related attributes', () => {

src/badge/badge.tsx

@@ -4,7 +4,7 @@ import { Box } from '../box'
 
 import styles from './badge.module.css'
 
-type BadgeTone = 'info' | 'positive' | 'promote' | 'attention'
+type BadgeTone = 'info' | 'positive' | 'promote' | 'attention' | 'warning'
 
 type BadgeProps = {
     /**