Merge branch 'main' into KZN-2594/build-link-button

cultureamp · Dec 18, 2024 · a68daff · a68daff
2 parents 5d93f16 + 52c1bdd
commit a68daff
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 19 deletions.
diff --git a/.changeset/tough-pigs-deliver.md b/.changeset/tough-pigs-deliver.md
@@ -0,0 +1,5 @@
+---
+'@kaizen/components': patch
+---
+
+Update Button v3 styles
diff --git a/.changeset/twenty-goats-tell.md b/.changeset/twenty-goats-tell.md
@@ -0,0 +1,5 @@
+---
+'@kaizen/components': patch
+---
+
+Updated button v3 disabled styles
diff --git a/packages/components/src/__rc__/Button/Button.module.css b/packages/components/src/__rc__/Button/Button.module.css
@@ -114,26 +114,44 @@
     --button-bg-color: var(--color-gray-300);
     --button-border-color: var(--color-black);
   }
+
+  &.isDisabled {
+    --button-bg-color: var(--color-white);
+    --button-border-color: var(--color-gray-400);
+    --button-text-color: var(--color-gray-400);
+  }
 }
 
 .tertiary {
   --button-bg-color: transparent;
   --button-border-color: transparent;
   --button-text-color: var(--color-purple-800);
 
+  &[data-hovered],
+  &[data-pressed],
+  &[data-pending] {
+    --button-text-color: var(--color-blue-500);
+  }
+
   &[data-hovered] {
-    --button-bg-color: var(--color-gray-200);
-    --button-border-color: var(--color-gray-200);
+    --button-bg-color: var(--color-blue-200);
+    --button-border-color: var(--color-blue-200);
   }
 
   &[data-pressed] {
-    --button-bg-color: var(--color-gray-300);
-    --button-border-color: var(--color-gray-300);
+    --button-bg-color: var(--color-blue-100);
+    --button-border-color: var(--color-blue-100);
   }
 
   &[data-pending] {
-    --button-bg-color: var(--color-gray-300);
-    --button-border-color: var(--color-gray-300);
+    --button-bg-color: var(--color-blue-100);
+    --button-border-color: var(--color-blue-100);
+  }
+
+  &.isDisabled {
+    --button-bg-color: transparent;
+    --button-border-color: transparent;
+    --button-text-color: var(--color-gray-400);
   }
 }
 
@@ -151,19 +169,25 @@
   --button-text-color: var(--color-purple-800);
 
   &[data-hovered] {
-    --button-bg-color: var(--color-white);
-    --button-border-color: var(--color-white);
+    --button-bg-color: var(--color-gray-200);
+    --button-border-color: var(--color-gray-200);
   }
 
   &[data-pressed] {
-    --button-bg-color: var(--color-white);
-    --button-border-color: var(--color-white);
+    --button-bg-color: var(--color-gray-300);
+    --button-border-color: var(--color-gray-300);
   }
 
   &[data-pending] {
     --button-bg-color: var(--color-white);
     --button-border-color: var(--color-white);
   }
+
+  &.isDisabled {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.2);
+    --button-border-color: transparent;
+    --button-text-color: rgba(var(--color-purple-800-rgb), 0.7);
+  }
 }
 
 .secondaryReversed {
@@ -185,6 +209,12 @@
     --button-bg-color: rgba(var(--color-white-rgb), 0.1);
     --button-border-color: var(--color-white);
   }
+
+  &.isDisabled {
+    --button-bg-color: transparent;
+    --button-border-color: rgba(var(--color-white), 0.2);
+    --button-text-color: rgba(var(--color-white-rgb), 0.2);
+  }
 }
 
 .tertiaryReversed {
@@ -206,16 +236,11 @@
     --button-bg-color: rgba(var(--color-white-rgb), 0.1);
     --button-border-color: transparent;
   }
-}
 
-.isDisabled {
-  --button-bg-color: var(--color-gray-400);
-  --button-border-color: var(--color-gray-400);
-  --button-text-color: var(--color-white);
-
-  &[data-hovered] {
-    --button-bg-color: var(--color-gray-400);
-    --button-border-color: var(--color-gray-400);
+  &.isDisabled {
+    --button-bg-color: transparent;
+    --button-border-color: transparent;
+    --button-text-color: rgba(var(--color-white-rgb), 0.2);
   }
 }