Fixed button hover text color, added Added CSS var '--dropdown-badge-background-color'

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

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);

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": {

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)

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

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);