♿ - style: adjust styling of disabled primary button

maykinmedia · Jul 29, 2024 · 86eb0c5 · 86eb0c5
1 parent f27cde6
commit 86eb0c5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
@@ -43,13 +43,18 @@
   white-space: nowrap;
   width: var(--mykn-button-width);
 
-  &[disabled],
-  &--disabled {
+  &:disabled,
+  &--disabled,
+  &--muted {
     --mykn-button-offset: 0 !important;
-    pointer-events: none;
     opacity: 0.4;
   }
 
+  &:disabled,
+  &--disabled {
+    pointer-events: none;
+  }
+
   &--align-start {
     justify-content: start;
     text-align: start;
@@ -78,10 +83,6 @@
     --mykn-button-width: 100%;
   }
 
-  &--muted {
-    --mykn-button-color-text: var(--typography-color-muted) !important;
-  }
-
   &--pad-h {
     --mykn-button-padding-h: var(--mykn-button-padding-xs, var(--spacing-h));
   }
@@ -128,6 +129,15 @@
     --mykn-button-color-shadow: var(--button-color-shadow-primary);
     --mykn-button-color-text: var(--button-color-text-primary);
 
+    &#{$self}:disabled,
+    &#{$self}--disabled,
+    &#{$self}--muted {
+      --mykn-button-color-background: var(--button-color-background-secondary);
+      --mykn-button-color-border: var(--button-color-border-secondary);
+      --mykn-button-color-shadow: var(--button-color-shadow-secondary);
+      --mykn-button-color-text: var(--button-color-text-secondary);
+    }
+
     &:focus,
     &:hover {
       --mykn-button-color-background: var(

diff --git a/src/components/button/button.stories.tsx b/src/components/button/button.stories.tsx
@@ -50,6 +50,12 @@ export const JustifiedButtons: Story = {
   },
 };
 
+export const DisabledButtons: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
 export const MutedButtons: Story = {
   args: {
     muted: true,