[CL-44] [EC-525] Update button disabled state (#3282)

* [CL-44] Update button disabled state

* [CL-44] [EC-525] Fixed opacity issue with background/border

libs/components/src/button/button.directive.ts

@@ -11,6 +11,10 @@ const buttonStyles: Record<ButtonTypes, string[]> = {
     "hover:tw-border-primary-700",
     "focus:tw-bg-primary-700",
     "focus:tw-border-primary-700",
+    "disabled:tw-bg-primary-500/60",
+    "disabled:tw-border-primary-500/60",
+    "disabled:!tw-text-contrast/60",
+    "disabled:tw-bg-clip-padding",
   ],
   secondary: [
     "tw-bg-transparent",
@@ -22,6 +26,9 @@ const buttonStyles: Record<ButtonTypes, string[]> = {
     "focus:tw-bg-secondary-500",
     "focus:tw-border-secondary-500",
     "focus:!tw-text-contrast",
+    "disabled:tw-bg-transparent",
+    "disabled:tw-border-text-muted/60",
+    "disabled:!tw-text-muted/60",
   ],
   danger: [
     "tw-bg-transparent",
@@ -33,6 +40,9 @@ const buttonStyles: Record<ButtonTypes, string[]> = {
     "focus:tw-bg-danger-500",
     "focus:tw-border-danger-500",
     "focus:!tw-text-contrast",
+    "disabled:tw-bg-transparent",
+    "disabled:tw-border-danger-500/60",
+    "disabled:!tw-text-danger/60",
   ],
 };
 
@@ -51,9 +61,6 @@ export class ButtonDirective {
       "tw-border-solid",
       "tw-text-center",
       "hover:tw-no-underline",
-      "disabled:tw-bg-secondary-100",
-      "disabled:tw-border-secondary-100",
-      "disabled:!tw-text-main",
       "focus:tw-outline-none",
       "focus:tw-ring",
       "focus:tw-ring-offset-2",