From cba6da96852a56dcb3fed2656ed675914a9db185 Mon Sep 17 00:00:00 2001
From: Misha Topchilo <20854498+miksrv@users.noreply.github.com>
Date: Fri, 8 Nov 2024 11:24:11 -0800
Subject: [PATCH] Fixed button hover text color, added Added CSS var
 '--dropdown-badge-background-color'

---
 CHANGELOG.md                                  | 8 ++++++++
 README.md                                     | 5 +++--
 package.json                                  | 2 +-
 src/components/button/styles.module.sass      | 4 ++--
 src/components/multiselect/styles.module.sass | 2 +-
 src/styles/global.css                         | 5 +++--
 6 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f435500..87782dd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # simple-react-ui-kit
 
+## 1.3.2
+
+### Patch Changes
+
+-   Added CSS var '--dropdown-badge-background-color' for badges in the MultiSelect
+-   Fixed Button positive and negative hover text color
+-   Updated Readme
+
 ## 1.3.1
 
 ### Patch Changes
diff --git a/README.md b/README.md
index a8fc690..98bb70e 100644
--- a/README.md
+++ b/README.md
@@ -990,7 +990,7 @@ To customize the theme, simply override the default values in your stylesheet:
 ```css
 :root {
     /* Primary Colors */
-    --color-contrast: #FFF;
+    --color-contrast: #ffffff;
 
     --color-green: #4bb34b;
     --color-green-hover: #48AC4A;
@@ -1024,7 +1024,7 @@ To customize the theme, simply override the default values in your stylesheet:
     --body-background: #ebedf0;
     --border-radius: 4px;
     --container-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
-    --container-background-color: #fff;
+    --container-background-color: #ffffff;
     --container-error-background-color: #FFE9E9;
     --container-error-color: var(--color-red);
     --container-success-background-color: #E8F9E8;
@@ -1033,6 +1033,7 @@ To customize the theme, simply override the default values in your stylesheet:
     /* Input Fields and Dropdowns */
     --dropdown-background-color: #ffffff;
     --dropdown-background-color-hover: #f2f3f5;
+    --dropdown-badge-background-color: #ffffff;
     --input-background-color: #f2f3f5;
     --input-label-color: #6d7885;
     --input-border: 0.5px solid var(--input-border-color);
diff --git a/package.json b/package.json
index 1a58888..2bd71ef 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "simple-react-ui-kit",
-    "version": "1.3.1",
+    "version": "1.3.2",
     "description": "A lightweight and flexible UI framework for building responsive React applications with customizable components.",
     "repository": "https://github.com/miksrv/simple-react-ui-kit.git",
     "scripts": {
diff --git a/src/components/button/styles.module.sass b/src/components/button/styles.module.sass
index ad2cd39..4e4e253 100644
--- a/src/components/button/styles.module.sass
+++ b/src/components/button/styles.module.sass
@@ -81,7 +81,7 @@
 
         &.negative
             background-color: var(--color-red)
-            color: var(--color-contrast)
+            color: var(--color-contrast) !important
 
             svg
                 fill: var(--color-red)
@@ -94,7 +94,7 @@
 
         &.positive
             background-color: var(--color-green)
-            color: var(--color-contrast)
+            color: var(--color-contrast) !important
 
             svg
                 fill: var(--color-green)
diff --git a/src/components/multiselect/styles.module.sass b/src/components/multiselect/styles.module.sass
index 2e9babe..a6cb703 100644
--- a/src/components/multiselect/styles.module.sass
+++ b/src/components/multiselect/styles.module.sass
@@ -68,7 +68,7 @@ $iconSize: 18px
                     font-size: var(--font-size)
 
             .badge
-                background-color: var(--color-contrast)
+                background-color: var(--dropdown-badge-background-color)
 
         .buttonContainer
             margin-left: 5px
diff --git a/src/styles/global.css b/src/styles/global.css
index 95322d2..dc8f35f 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,7 +1,7 @@
 /* global.css */
 :root {
     /* Primary Colors */
-    --color-contrast: #FFF;
+    --color-contrast: #ffffff;
 
     --color-green: #4bb34b;
     --color-green-hover: #48AC4A;
@@ -35,7 +35,7 @@
     --body-background: #ebedf0;
     --border-radius: 4px;
     --container-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
-    --container-background-color: #fff;
+    --container-background-color: #ffffff;
     --container-error-background-color: #FFE9E9;
     --container-error-color: var(--color-red);
     --container-success-background-color: #E8F9E8;
@@ -44,6 +44,7 @@
     /* Input Fields and Dropdowns */
     --dropdown-background-color: #ffffff;
     --dropdown-background-color-hover: #f2f3f5;
+    --dropdown-badge-background-color: #ffffff;
     --input-background-color: #f2f3f5;
     --input-label-color: #6d7885;
     --input-border: 0.5px solid var(--input-border-color);