Pill updates - updated colors, small pills are bigger for a11y (#2154)

## Summary:
Some updates need to be made to pill so they're more usable
within webapp.

- small size needs 14px font and 24px height
- Banner colors included
- Needs fixed height
- Needs a story for vertically stacked pills

More context for some of these changes can be found in
the following slack thread:
https://khanacademy.slack.com/archives/C8Z9DSKC7/p1693923761646739

Issue: https://khanacademy.atlassian.net/browse/WB-1602

## Test plan:
`yarn jest packages/wonder-blocks-pill/src/components/__tests__/pill.test.tsx`

Storybook
- All variants
  /?path=/story/pill--variants
- Vertically stacked pills
  /?path=/story/pill--vertically-stacked

Author: nishasy

Reviewers: nishasy, jandrade

Required Reviewers:

Approved By: jandrade

Checks: ❌ codecov/project, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot

Pull Request URL: #2154

.changeset/witty-crabs-clean.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/wonder-blocks-theming": minor
+"@khanacademy/wonder-blocks-pill": minor
+---
+
+Added more colors to Pill, small pills are now 24px tall with 14px font size. Tokens (theming) now include pill colors.

__docs__/wonder-blocks-pill/pill.argtypes.tsx

@@ -20,12 +20,22 @@ export default {
         description: "Kind of pill.",
         defaultValue: "neutral",
         table: {
-            type: {summary: `"neutral" | "accent"`},
+            type: {
+                summary: `"neutral" | "accent | "info" | "success" |
+                    "warning" | "critical"`,
+            },
             defaultValue: {summary: "neutral"},
         },
         type: {
             name: "enum",
-            value: ["neutral", "accent"],
+            value: [
+                "neutral",
+                "accent",
+                "info",
+                "success",
+                "warning",
+                "critical",
+            ],
             required: false,
         },
     },