feat(button): Add in HCM support to the mdc button as an opt-in mixin.

PiperOrigin-RevId: 350647182

Author: material-web-copybara

packages/mdc-button/_mixins.scss

@@ -24,6 +24,7 @@
 // stylelint-disable selector-class-pattern
 
 @use 'sass:math';
+@use '@material/dom/mixins' as dom-mixins;
 @use '@material/elevation/mixins' as elevation-mixins;
 @use '@material/feature-targeting/feature-targeting';
 @use '@material/ripple/ripple';
@@ -425,6 +426,25 @@ $ripple-target: '.mdc-button__ripple';
   }
 }
 
+///
+/// Includes ad-hoc high contrast mode support.
+///
+@mixin high-contrast-mode-shim($query: feature-targeting.all()) {
+  &::before {
+    @include dom-mixins.transparent-border($query: $query);
+  }
+
+  &:focus {
+    &::before {
+      @include dom-mixins.transparent-border(
+        $border-width: 5px,
+        $border-style: double,
+        $query: $query
+      );
+    }
+  }
+}
+
 @mixin base_($query) {
   $feat-color: feature-targeting.create-target($query, color);
   $feat-structure: feature-targeting.create-target($query, structure);

packages/mdc-button/package.json

@@ -16,6 +16,7 @@
   "sideEffects": false,
   "dependencies": {
     "@material/density": "^9.0.0",
+    "@material/dom": "^9.0.0",
     "@material/elevation": "^9.0.0",
     "@material/feature-targeting": "^9.0.0",
     "@material/ripple": "^9.0.0",