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