enhancement(Cards) buttons mixin implementation + auto init

sass/components/_buttons.scss

@@ -1,28 +1,21 @@
-.btn, .btn-floating, .btn-large, .btn-small, .btn-flat {
+:root {
   --btn-height: 40px;
   --btn-font-size-icon: 16px;
   --btn-padding: 24px;
   --btn-padding-icon: 16px;
   --btn-gap-icon: 8px;
   --btn-border-radius: 4px;
   --btn-font-size: 14px;
+}
 
-  height: var(--btn-height);
-  border: none;
-  border-radius: var(--btn-border-radius);
-  padding-left: var(--btn-padding);
-  padding-right: var(--btn-padding);
-  font-size: var(--btn-font-size);
-  font-weight: 500;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
-  white-space: nowrap;
-  outline: 0;
-  user-select: none;
-  transition: background-color .2s ease-out;
+.btn, .btn-floating, .btn-large, .btn-small, .btn-flat {
+  @include btn(
+      var(--btn-height),
+      var(--btn-border-radius),
+      var(--btn-padding),
+      var(--btn-padding),
+      var(--btn-font-size)
+  );
 }
 
 // Icon
@@ -54,49 +47,36 @@
 //------------------ Enabled
 
 .btn.filled {
-  color: var(--md-sys-color-on-primary);
-  background-color: var(--md-sys-color-primary);
+  @include btn-filled;
 }
 
 .btn.tonal {
-  color: var(--md-sys-color-on-secondary-container);
-  background-color: var(--md-sys-color-secondary-container);
+  @include btn-tonal;
 }
 
 .btn.elevated {
-  color: var(--md-sys-color-on-secondary-container);
-  background-color: var(--md-sys-color-secondary-container);
-  @extend .z-depth-1;
+  @include btn-elevated;
 }
 
 .btn.outlined {
-  background-color: transparent;
-  color: var(--md-sys-color-primary);
-  border: 1px solid var(--md-sys-color-outline);
+  @include btn-outlined;
 }
 
 .btn.text, .btn-flat {
-  @extend .z-depth-0;
-  color: var(--md-sys-color-primary);
-  background-color: transparent;
+  @include btn-flat;
 }
 
 //------------------ Disabled
 
 .btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled,
 .btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled,
 .btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled] {
-  @extend .z-depth-0;
-  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);
-  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);
-  pointer-events: none;
-  box-shadow: none;
-  cursor: default;
+  @include btn-disabled();
 }
 
 //------------------ Hover
 
-.btn.elevated:hover {
+/*.btn.elevated:hover {
   @extend .z-depth-2;
   color: var(--md-sys-color-primary);
   background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
@@ -122,11 +102,11 @@
 .btn.text:hover {
   color: var(--md-sys-color-primary);
   background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
-}
+}*/
 
 //------------------ Focus
 
-.btn:focus {
+/*.btn:focus {
   background-color: var(--md-sys-color-primary-container);
 }
 
@@ -157,10 +137,10 @@
 .btn:focus.text {
   color: var(--md-sys-color-primary);
   background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
-}
+}*/
 
 // Focus with Keyboard
-.btn:focus-visible {
+/*.btn:focus-visible {
   &.filled,
   &.elevated,
   &.tonal,
@@ -169,7 +149,7 @@
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-}
+}*/
 
 //----------
 

sass/components/_cards.scss

@@ -171,11 +171,13 @@
       border-radius: 0 0 2px 2px;
     }
 
-    border-top: 1px solid var(--md-sys-color-outline-variant);
-    position: relative;
-    background-color: inherit;
+    // position: relative;
+    padding: 0 1.6rem;
+    // border-top: 1px solid var(--md-sys-color-outline-variant);
+    // background-color: inherit;
 
-    a {
+    // Replaced card links with buttons (Accessibility, @see https://github.com/materializecss/materialize/issues/565)
+    /*a {
       padding: 16px 24px;
       display: inline-block;
     }
@@ -187,6 +189,33 @@
       &:hover {
         background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
       }
+    }*/
+
+    a {
+      @include btn(
+          var(--btn-height),
+          var(--btn-border-radius),
+          var(--btn-padding),
+          var(--btn-padding),
+          var(--btn-font-size)
+      );
+
+      &:first-child {
+        margin-left: -1.6rem;
+      }
+
+      &:last-child {
+        margin-right: -1.6rem;
+      }
+    }
+
+    .btn {
+      &.filled,
+      &.tonal,
+      &.elevated,
+      &.outlined {
+        margin: 0 .26rem 1.6rem 0;
+      }
     }
   }
 

sass/components/mixins.module.scss

@@ -0,0 +1,155 @@
+@mixin btn(
+  $height: var(--btn-height),
+  $border-radius: var(--btn-border-radius),
+  $padding-left: var(--btn-padding),
+  $padding-right: var(--btn-padding),
+  $font-size: var(--btn-font-size),
+) {
+  height: $height;
+  border-radius: $border-radius;
+  padding-left: $padding-left;
+  padding-right: $padding-right;
+  font-size: $font-size;
+  font-weight: 500;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
+  white-space: nowrap;
+  outline: 0;
+  user-select: none;
+  transition: background-color .2s ease-out;
+
+  &:focus {
+    background-color: var(--md-sys-color-primary-container);
+  }
+}
+
+@mixin btn-filled {
+  color: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-primary);
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-on-primary);
+  }
+
+  &:hover {
+    @extend .z-depth-1;
+    background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 16%);
+  }
+
+  &:focus {
+    @extend .z-depth-0;
+    background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 20%);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-tonal {
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-secondary-container);
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  &:hover {
+    @extend .z-depth-1;
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
+  }
+
+  &:focus {
+    @extend .z-depth-0;
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 20%);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-elevated {
+  color: var(--md-sys-color-on-secondary-container);
+  background-color: var(--md-sys-color-secondary-container);
+  @extend .z-depth-1;
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-primary);
+  }
+
+  &:hover {
+    @extend .z-depth-2;
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
+  }
+
+  &:focus {
+    @extend .z-depth-1;
+    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-outlined {
+  background-color: transparent;
+  color: var(--md-sys-color-primary);
+  border: 1px solid var(--md-sys-color-outline);
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-primary);
+  }
+
+  &:hover {
+    background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 16%);
+  }
+
+  &:focus {
+    background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
+    border: 1px solid var(--md-sys-color-primary);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-flat {
+  @extend .z-depth-0;
+  color: var(--md-sys-color-primary);
+  background-color: transparent;
+
+  &:hover,
+  &:focus {
+    color: var(--md-sys-color-primary);
+  }
+
+  &:hover {
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
+  }
+
+  &:focus {
+    background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
+  }
+
+  @include focus-visible();
+}
+
+@mixin btn-disabled {
+  @extend .z-depth-0;
+  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);
+  pointer-events: none;
+  box-shadow: none;
+  cursor: default;
+}
+
+// Focus with Keyboard
+@mixin focus-visible {
+  &:focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
+  }
+}
+

sass/materialize.scss

@@ -5,6 +5,7 @@
 //@import "components/_theme_variables";
 @import "components/colors.module";
 @import "components/typography.module";
+@import "components/mixins.module";
 
 // Color
 @import "components/color-variables";
@@ -17,6 +18,7 @@
 
 // components
 @import "components/global";
+@import "components/buttons";
 @import "components/collection";
 @import "components/badges";
 @import "components/icons-material-design";
@@ -28,7 +30,6 @@
 @import "components/toast";
 @import "components/tabs";
 @import "components/tooltip";
-@import "components/buttons";
 @import "components/dropdown";
 
 @import "components/modal";

src/cards.ts

@@ -173,4 +173,15 @@ export class Cards extends Component<CardsOptions> implements Openable {
     }
     this._removeRevealCloseEventHandlers();
   };
+
+  static Init() {
+    if (typeof document !== 'undefined')
+      // Handle initialization of static cards.
+      document.addEventListener('DOMContentLoaded', () => {
+        const cards = document.querySelectorAll('.card');
+        cards.forEach((el) => {
+          if (el && (el['M_Card'] == undefined)) this.init((el as HTMLElement));
+        });
+      });
+  }
 }

src/index.ts

@@ -138,3 +138,4 @@ Forms.Init();
 Chips.Init();
 Waves.Init();
 Range.Init();
+Cards.Init();