Corrects class name used for disabled buttons

src/assets/scss/elements/ys-button.scss

@@ -33,7 +33,7 @@
 
   // Disabled button — use with caution
   &:disabled,
-  &.ys-disabled {
+  &.ys-button--disabled {
     background-color: $ys-color-grey-94;
     color: $ys-color-grey-64;
     box-shadow: none;
@@ -44,7 +44,7 @@
     outline: 0; // disable the focus ring when the button is clicked with a mouse
   }
 
-  &:not(:disabled):not(.ys-disabled):hover {
+  &:not(:disabled):not(.ys-button--disabled):hover {
     box-shadow: inset 0 0 0 0 $ys-color-grey-28, 0 0 0 2px $ys-color-digital-grass;
     color: $ys-color-grey-28;
   }
@@ -65,7 +65,7 @@
   &--light {
     color: $ys-color-white;
 
-    &:not(:disabled):not(.ys-disabled):hover {
+    &:not(:disabled):not(.ys-button--disabled):hover {
       color: $ys-color-white;
     }
   }
@@ -76,7 +76,7 @@
     color: $ys-color-white;
     box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent;
 
-    &:not(:disabled):not(.ys-disabled):hover {
+    &:not(:disabled):not(.ys-button--disabled):hover {
       color: $ys-color-white;
     }
   }
@@ -87,7 +87,7 @@
     color: $ys-color-white;
     box-shadow: inset 0 0 0 transparent;
 
-    &:not(:disabled):not(.ys-disabled):hover {
+    &:not(:disabled):not(.ys-button--disabled):hover {
       box-shadow: inset 0 0 0 0 transparent, 0 0 0 2px $ys-color-grey-28;
       color: $ys-color-white;
     }
@@ -99,7 +99,7 @@
     color: $ys-color-grey-28;
     box-shadow: inset 0 0 0 0 transparent;
 
-    &:not(:disabled):not(.ys-disabled):hover {
+    &:not(:disabled):not(.ys-button--disabled):hover {
       box-shadow: inset 0 0 0 0 transparent, 0 0 0 2px $ys-color-white;
       color: $ys-color-grey-28;
     }
@@ -120,7 +120,7 @@
     background-color: transparent;
     box-shadow: 0 0 0 0 transparent;
 
-    &:not(:disabled):not(.ys-disabled):hover {
+    &:not(:disabled):not(.ys-button--disabled):hover {
       color: $ys-color-digital-grass;
       box-shadow: none;
     }

src/elements/02-elements/button/README.md

@@ -1,41 +1,41 @@
-# Button
-## Variants
-Buttons come in seven different colorways:
-- **Default** (transparent with dark border and text)
-- **Light** (transparent with light border and text)
-- **CTA** (green)
-- **Solid Dark** (solid with dark background and light text)
-- **Solid Light** (solid with light background and dark text)
-- **Stripped Dark** (transparent with dark text)
-- **Stripped Light** (transparent with light text)
-
-Which can be combined with three different shapes
- - **pill shaped** (default shape)
- - **pill shaped with icon**
- - **circle with icon only**
-
-Furthermore there is also the option of making the button 100% wide relative to it's container element:
- - **block**
-
- The colorsways can be combined with the shapes in all thinkable ways, so a button can be both **Solid Dark** _AND_ **circle with icon only**.  
-
- Lastly there is the **Neutral Button**, which has no visual appearance at all — this is meant for those cases where you want to display a clickable icon without any other design. Please be careful when using this, as it should be obvious for any user what's clickable. This button has no size by nature but will size itself according to the content.
-
-### Disabled buttons
-The button will change it's visual appearance if you add the `ys-disabled` class or if you use the HTML attribute `disabled`.
-
-## UX and Design Guidelines
-### CTA Usage
-The **CTA** button should only be used for the MAIN or IMPORTANT calls to action on a page.
-
-### Disabled buttons
-Please be careful when using disabled buttons. Usability research shows that disabled buttons can confuse users: [Disabled Buttons suck](https://axesslab.com/disabled-buttons-suck/)
-
-### How to combine buttons
-- Buttons should be side-by-side and have a horizontal margin between them of at least 16px
-- Never use more than one **CTA** button in a group
-- When two buttons are side by side and perform opposing actions, ie. "Cancel" and "OK", the affirmative/positive action should always be displayed on the right
-
- ## HTML Guidelines
- - Only `<a>` and `<button>` elements are allowed to use the `.button` class
- - Remember to specify the `type` attribute when using a `button` element. The default is `submit` but in most cases you probably want to use `type="button"`
+# Button
+## Variants
+Buttons come in seven different colorways:
+- **Default** (transparent with dark border and text)
+- **Light** (transparent with light border and text)
+- **CTA** (green)
+- **Solid Dark** (solid with dark background and light text)
+- **Solid Light** (solid with light background and dark text)
+- **Stripped Dark** (transparent with dark text)
+- **Stripped Light** (transparent with light text)
+
+Which can be combined with three different shapes
+ - **pill shaped** (default shape)
+ - **pill shaped with icon**
+ - **circle with icon only**
+
+Furthermore there is also the option of making the button 100% wide relative to it's container element:
+ - **block**
+
+ The colorsways can be combined with the shapes in all thinkable ways, so a button can be both **Solid Dark** _AND_ **circle with icon only**.
+
+ Lastly there is the **Neutral Button**, which has no visual appearance at all — this is meant for those cases where you want to display a clickable icon without any other design. Please be careful when using this, as it should be obvious for any user what's clickable. This button has no size by nature but will size itself according to the content.
+
+### Disabled buttons
+The button will change it's visual appearance if you add the `ys-button--disabled` class or if you use the HTML attribute `disabled`.
+
+## UX and Design Guidelines
+### CTA Usage
+The **CTA** button should only be used for the MAIN or IMPORTANT calls to action on a page.
+
+### Disabled buttons
+Please be careful when using disabled buttons. Usability research shows that disabled buttons can confuse users: [Disabled Buttons suck](https://axesslab.com/disabled-buttons-suck/)
+
+### How to combine buttons
+- Buttons should be side-by-side and have a horizontal margin between them of at least 16px
+- Never use more than one **CTA** button in a group
+- When two buttons are side by side and perform opposing actions, ie. "Cancel" and "OK", the affirmative/positive action should always be displayed on the right
+
+ ## HTML Guidelines
+ - Only `<a>` and `<button>` elements are allowed to use the `.button` class
+ - Remember to specify the `type` attribute when using a `button` element. The default is `submit` but in most cases you probably want to use `type="button"`