From 171dbcf31f528d26231aa5238f69f115b75d4fad Mon Sep 17 00:00:00 2001
From: Igor Bari <mucsi96@gmail.com>
Date: Sun, 25 Aug 2024 21:31:33 +0200
Subject: [PATCH] add badge colors

---
 src/Badge/Badge.css        | 18 ++++++++++++++++--
 src/Badge/Badge.stories.ts | 16 ++++++++++++++--
 src/Docs.mdx               |  6 +++++-
 src/Text/Text.css          |  4 ++++
 src/Text/Text.stories.ts   |  4 ++++
 5 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/src/Badge/Badge.css b/src/Badge/Badge.css
index eddf1be..639524f 100644
--- a/src/Badge/Badge.css
+++ b/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%);
+  }
 }
diff --git a/src/Badge/Badge.stories.ts b/src/Badge/Badge.stories.ts
index 26ee31d..eb4a6c8 100644
--- a/src/Badge/Badge.stories.ts
+++ b/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>`,
 };
diff --git a/src/Docs.mdx b/src/Docs.mdx
index 1b44da4..a176072 100644
--- a/src/Docs.mdx
+++ b/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} />
\ No newline at end of file
+<Canvas of={TextStories.Blue} />
+<Canvas of={TextStories.Yellow} />
\ No newline at end of file
diff --git a/src/Text/Text.css b/src/Text/Text.css
index 341785b..47abca3 100644
--- a/src/Text/Text.css
+++ b/src/Text/Text.css
@@ -20,4 +20,8 @@
   &[bt-blue] {
     color: hsl(217, 93%, 72%);
   }
+
+  &[bt-yellow] {
+    color: hsl(56, 62%, 70%)
+  }
 }
diff --git a/src/Text/Text.stories.ts b/src/Text/Text.stories.ts
index 5a9ac49..cf59f7b 100644
--- a/src/Text/Text.stories.ts
+++ b/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>`,
+};