Merge pull request #24 from prismapro/feature/change-disabled-color-i…

…n-buttons Feature/change disabled color in buttons
prismapro · Jul 6, 2023 · d2927ca · d2927ca
2 parents 4291d17 + 17b455a
commit d2927ca
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 15 deletions.
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @skedle.me-ui/react
 
+## 2.1.7
+
+### Patch Changes
+
+- Change color when disabled in buttons and icon buttons
+
 ## 2.1.6
 
 ### Patch Changes

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@skedle.me-ui/react",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

diff --git a/packages/react/src/components/Button.tsx b/packages/react/src/components/Button.tsx
@@ -36,7 +36,7 @@ export const Button = styled('button', {
         },
 
         '&:disabled': {
-          backgroundColor: '$gray200',
+          backgroundColor: '$gray500',
         },
       },
 
@@ -45,13 +45,13 @@ export const Button = styled('button', {
         border: '2px solid $yellow500',
 
         '&:not(:disabled):hover': {
-          background: '$yellow500',
           color: '$gray600',
+          background: '$yellow500',
         },
 
         '&:disabled': {
-          color: '$gray200',
-          borderColor: '$gray200',
+          color: '$gray500',
+          borderColor: '$gray500',
         },
       },
 
@@ -77,8 +77,8 @@ export const Button = styled('button', {
         },
 
         '&:disabled': {
-          color: '$gray200',
-          borderColor: '$gray200',
+          color: '$gray500',
+          borderColor: '$gray500',
         },
       },
     },

diff --git a/packages/react/src/components/IconButton.tsx b/packages/react/src/components/IconButton.tsx
@@ -35,7 +35,7 @@ export const IconButton = styled('button', {
         },
 
         '&:disabled': {
-          backgroundColor: '$gray200',
+          backgroundColor: '$gray500',
         },
       },
 
@@ -44,13 +44,13 @@ export const IconButton = styled('button', {
         border: '2px solid $yellow500',
 
         '&:not(:disabled):hover': {
-          background: '$yellow500',
           color: '$gray600',
+          background: '$yellow500',
         },
 
         '&:disabled': {
-          color: '$gray200',
-          borderColor: '$gray200',
+          color: '$gray500',
+          borderColor: '$gray500',
         },
       },
 
@@ -62,7 +62,7 @@ export const IconButton = styled('button', {
         },
 
         '&:disabled': {
-          color: '$gray200',
+          color: '$gray500',
         },
       },
 
@@ -74,7 +74,7 @@ export const IconButton = styled('button', {
         },
 
         '&:disabled': {
-          color: '$gray200',
+          color: '$gray500',
         },
       },
 
@@ -86,7 +86,7 @@ export const IconButton = styled('button', {
         },
 
         '&:disabled': {
-          color: '$gray200',
+          color: '$gray500',
         },
       },
 
@@ -98,7 +98,7 @@ export const IconButton = styled('button', {
         },
 
         '&:disabled': {
-          color: '$gray200',
+          color: '$gray500',
         },
       },
     },