fix: add styles to disabled primary button (#119)

test/visual/colors.html

@@ -36,6 +36,20 @@ <h2>Colors</h2>
     <span>Button</span>
   </vaadin-button>
 
+  <br>Contrast[disabled]:
+
+  <vaadin-button theme="primary contrast" disabled>
+    <span>Button</span>
+  </vaadin-button>
+
+  <vaadin-button theme="contrast" disabled>
+    <span>Button</span>
+  </vaadin-button>
+
+  <vaadin-button theme="tertiary contrast" disabled>
+    <span>Button</span>
+  </vaadin-button>
+
 
   <br>Success:
 
@@ -51,6 +65,21 @@ <h2>Colors</h2>
     <span>Button</span>
   </vaadin-button>
 
+  <br>Success[disabled]:
+
+  <vaadin-button theme="primary success" disabled>
+    <span>Button</span>
+  </vaadin-button>
+
+  <vaadin-button theme="success" disabled>
+    <span>Button</span>
+  </vaadin-button>
+
+  <vaadin-button theme="tertiary success" disabled>
+    <span>Button</span>
+  </vaadin-button>
+
+
   <br>Error:
 
   <vaadin-button theme="primary error">
@@ -65,6 +94,20 @@ <h2>Colors</h2>
     <span>Button</span>
   </vaadin-button>
 
+  <br>Error[disabled]:
+
+  <vaadin-button theme="primary error" disabled>
+    <span>Button</span>
+  </vaadin-button>
+
+  <vaadin-button theme="error" disabled>
+    <span>Button</span>
+  </vaadin-button>
+
+  <vaadin-button theme="tertiary error" disabled>
+    <span>Button</span>
+  </vaadin-button>
+
   <br>Material variations:
 
   <vaadin-button theme="outlined">
@@ -75,4 +118,14 @@ <h2>Colors</h2>
     <span>Button</span>
   </vaadin-button>
 
+  <br>Material variations[disabled]:
+
+  <vaadin-button theme="outlined" disabled>
+    <span>Button</span>
+  </vaadin-button>
+
+  <vaadin-button theme="contained" disabled>
+    <span>Button</span>
+  </vaadin-button>
+
 </body>

test/visual/types.html

@@ -40,6 +40,10 @@ <h2>Types</h2>
     <iron-icon slot="suffix" icon="lumo:arrow-right"></iron-icon>
   </vaadin-button>
 
+  <vaadin-button theme="primary" disabled>
+    <span>Disabled</span>
+  </vaadin-button>
+
   <br>Tertiary:
 
   <vaadin-button theme="tertiary">
@@ -56,6 +60,10 @@ <h2>Types</h2>
     <iron-icon slot="suffix" icon="lumo:arrow-right"></iron-icon>
   </vaadin-button>
 
+  <vaadin-button theme="tertiary" disabled>
+    <span>Disabled</span>
+  </vaadin-button>
+
   <br>Tertiary inline:
 
   <vaadin-button theme="tertiary-inline">
@@ -71,4 +79,8 @@ <h2>Types</h2>
     <span>Icon suffix</span>
     <iron-icon slot="suffix" icon="lumo:arrow-right"></iron-icon>
   </vaadin-button>
+  and
+  <vaadin-button theme="tertiary-inline" disabled>
+    <span>Disabled</span>
+  </vaadin-button>
 </body>

theme/lumo/vaadin-button-styles.html

@@ -162,6 +162,11 @@
         min-width: calc(var(--lumo-button-size) * 2.5);
       }
 
+      :host([theme~="primary"][disabled]) {
+        background-color: var(--lumo-primary-color-50pct);
+        color: var(--lumo-primary-contrast-color);
+      }
+
       :host([theme~="primary"]:hover)::before {
         opacity: 0.1;
       }
@@ -195,6 +200,10 @@
         color: var(--lumo-success-contrast-color);
       }
 
+      :host([theme~="success"][theme~="primary"][disabled]) {
+        background-color: var(--lumo-success-color-50pct);
+      }
+
       :host([theme~="error"]) {
         color: var(--lumo-error-text-color);
       }
@@ -204,6 +213,10 @@
         color: var(--lumo-error-contrast-color);
       }
 
+      :host([theme~="error"][theme~="primary"][disabled]) {
+        background-color: var(--lumo-error-color-50pct);
+      }
+
       :host([theme~="contrast"]) {
         color: var(--lumo-contrast);
       }
@@ -213,6 +226,10 @@
         color: var(--lumo-base-color);
       }
 
+      :host([theme~="contrast"][theme~="primary"][disabled]) {
+        background-color: var(--lumo-contrast-50pct);
+      }
+
       /* Icons */
 
       [part] ::slotted(iron-icon) {