add badge colors

src/Badge/Badge.css

@@ -1,6 +1,8 @@
 span[bt-badge] {
+  --badge--color: var(--bt-strong-text-color);
+
   position: relative;
-  color: rgb(30, 66, 159);
+  color: hsl(221, 39%, 11%);
   display: inline-block;
   font-weight: 700;
   white-space: nowrap;
@@ -14,8 +16,20 @@ span[bt-badge] {
     content: '';
     inset: 0 -0.4em;
     border-radius: 0.6em;
-    background-color: var(--bt-strong-text-color);
+    background-color: var(--badge--color);
     position: absolute;
     z-index: -1;
   }
+
+  &[bt-green] {
+    --badge--color: hsl(136, 62%, 45.5%);
+  }
+
+  &[bt-red] {
+    --badge--color: hsl(0, 83%, 62.5%);
+  }
+
+  &[bt-yellow] {
+    --badge--color: hsl(49, 77.5%, 58%);
+  }
 }

src/Badge/Badge.stories.ts

@@ -9,9 +9,21 @@ type Story = StoryObj;
 export default meta;
 
 export const Normal: Story = {
-  render: () => html`text<span bt-badge>Badge text</span>`,
+  render: () => html`text<span bt-badge>Normal badge</span>`,
+};
+
+export const Red: Story = {
+  render: () => html`text<span bt-badge bt-red>Red badge</span>`,
+};
+
+export const Yellow: Story = {
+  render: () => html`text<span bt-badge bt-yellow>Yellow badge</span>`,
+};
+
+export const Green: Story = {
+  render: () => html`text<span bt-badge bt-green>Green badge</span>`,
 };
 
 export const Large: Story = {
-  render: () => html`<h1>text<span bt-badge>Badge text</span></h1>`,
+  render: () => html`<h1>text<span bt-badge>Large badge</span></h1>`,
 };

src/Docs.mdx

@@ -49,6 +49,9 @@ Selector: `span[bt-badge]`
 
 <Canvas of={BadgeStories.Normal} />
 <Canvas of={BadgeStories.Large} />
+<Canvas of={BadgeStories.Green} />
+<Canvas of={BadgeStories.Red} />
+<Canvas of={BadgeStories.Yellow} />
 
 # Button
 
@@ -142,4 +145,5 @@ Selector: `[bt-text]`
 <Canvas of={TextStories.Green} />
 <Canvas of={TextStories.Red} />
 <Canvas of={TextStories.White} />
-<Canvas of={TextStories.Blue} />
+<Canvas of={TextStories.Blue} />
+<Canvas of={TextStories.Yellow} />

src/Text/Text.css

@@ -20,4 +20,8 @@
   &[bt-blue] {
     color: hsl(217, 93%, 72%);
   }
+
+  &[bt-yellow] {
+    color: hsl(56, 62%, 70%)
+  }
 }

src/Text/Text.stories.ts

@@ -27,3 +27,7 @@ export const White: Story = {
 export const Blue: Story = {
   render: () => html`<h3 bt-text bt-blue>Example text </h3>`,
 };
+
+export const Yellow: Story = {
+  render: () => html`<h3 bt-text bt-yellow>Example text </h3>`,
+};