feat: button icons disabled state

Author: arturbien

docs/index.html.ejs

@@ -167,6 +167,19 @@
         </p>
 
         <%- example(`<button[[ class="focused"]]>I am focused</button>`) %>
+
+        <p>
+          Images and elements with <code>[role=img]</code> inside the button will get disabled state when the button is disabled.
+        </p>
+
+        <%- example(`
+          <button style="height: auto; padding: 16px;">
+            <img style="width: 32px;height: 32px;" src="mail-icon.png" alt="icon"/>
+          </button>
+          <button style="height: auto; padding: 16px;" disabled>
+            <img style="width: 32px;height: 32px;" src="mail-icon.png" alt="icon"/>
+          </button>
+        `) %>
       </div>
     </section>
 
@@ -987,5 +1000,28 @@
       subscribing to more fun things on <a href="https://twitter.com/jdan">my twitter</a>. 👋
     </p>
   </main>
+
+  <svg id="filters-98css">
+    <defs>
+      <filter id="disabled-filter-98css">
+        <feColorMatrix
+        type="matrix"
+        values="1 0 0 0 0
+                0 1 0 0 0
+                0 0 1 0 0
+                -21.25 -71.54 -7.21 40 0"
+        result="color-matrix"
+    ></feColorMatrix>
+    <feFlood flood-color="grey" result="color" ></feFlood>
+    <feComposite in="color" in2="color-matrix" operator="in" ></feComposite>
+    <feDropShadow
+        dx="1"
+        dy="1"
+        stdDeviation="0"
+        flood-color="white"
+    ></feDropShadow>
+      </filter>
+    </defs>
+  </svg>
 </body>
 </html>

docs/mail-icon.png

@@ -200,6 +200,11 @@ input[type="reset"]:disabled,
   text-shadow: 1px 1px 0 var(--button-highlight);
 }
 
+button:disabled img,
+button:disabled [role="img"] {
+  filter: url("#disabled-filter-98css");
+}
+
 .window {
   box-shadow: var(--border-window-outer), var(--border-window-inner);
   background: var(--surface);
@@ -885,3 +890,10 @@ table > tbody > tr > * {
   padding: 0 var(--grouped-element-spacing);
   height: 14px;
 }
+
+#filters-98css {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+}