chore(button): remove compat deps

PiperOrigin-RevId: 477772962

button/lib/_button-theme.scss

@@ -6,21 +6,9 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-// TODO(b/228217731): Remove MDC/MWC dependencies
 @use 'sass:map';
 @use '@material/web/sass/color';
 @use '@material/web/ripple/ripple-theme';
-@use '@material/web/compat/theme/state';
-
-$selectors: (
-  // :not(:disabled) is used to support link styled as button
-  // as link does not support :enabled style
-  enabled: ':not(:disabled)',
-  disabled: ':disabled',
-  focus: ':focus',
-  hover: ':hover',
-  pressed: ':active'
-);
 
 @mixin theme-styles($theme) {
   @include _set-label-text-typography(
@@ -127,46 +115,44 @@ $selectors: (
 }
 
 @mixin _container-fill-color($color-or-map) {
-  @include state.default($selectors) {
-    @include _set-container-fill-color(state.get-default-state($color-or-map));
+  &:not(:disabled) {
+    @include _set-container-fill-color(map.get($color-or-map, default));
   }
 
-  @include state.hover($selectors) {
-    @include _set-container-fill-color(state.get-hover-state($color-or-map));
+  &:hover {
+    @include _set-container-fill-color(map.get($color-or-map, hover));
   }
 
-  @include state.focus($selectors) {
-    @include _set-container-fill-color(state.get-focus-state($color-or-map));
+  &:focus {
+    @include _set-container-fill-color(map.get($color-or-map, focus));
   }
 
-  @include state.pressed($selectors) {
-    @include _set-container-fill-color(state.get-pressed-state($color-or-map));
+  &:active {
+    @include _set-container-fill-color(map.get($color-or-map, pressed));
   }
 
-  @include state.disabled($selectors) {
-    @include _set-container-fill-color(state.get-disabled-state($color-or-map));
+  &:disabled {
+    @include _set-container-fill-color(map.get($color-or-map, disabled));
   }
 }
 
 @mixin _ink-color($color-or-map) {
-  @include state.default($selectors) {
-    @include _set-ink-color(state.get-default-state($color-or-map));
+  @include _set-ink-color(map.get($color-or-map, default));
+
+  &:hover {
+    @include _set-ink-color(map.get($color-or-map, hover));
   }
 
-  @include state.hover($selectors) {
-    @include _set-ink-color(state.get-hover-state($color-or-map));
+  &:focus {
+    @include _set-ink-color(map.get($color-or-map, focus));
   }
 
-  @include state.focus($selectors) {
-    @include _set-ink-color(state.get-focus-state($color-or-map));
+  &:active {
+    @include _set-ink-color(map.get($color-or-map, pressed));
   }
 
-  @include state.pressed($selectors) {
-    @include _set-ink-color(state.get-pressed-state($color-or-map));
-  }
-
-  @include state.disabled($selectors) {
-    @include _set-ink-color(state.get-disabled-state($color-or-map));
+  &:disabled {
+    @include _set-ink-color(map.get($color-or-map, disabled));
   }
 }
 

button/lib/_button.scss

@@ -6,10 +6,7 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-// TODO(b/228217731): Remove compat dependencies
-@use '@material/web/compat/touchtarget/touch-target';
 @use '@material/web/elevation/lib/surface' as elevation-surface;
-@use '@material/web/compat/theme/selector-ext';
 @use '@material/web/sass/dom';
 
 @use './button-theme';
@@ -17,9 +14,10 @@
 @mixin static-styles() {
   :host {
     @include host-root;
-    @include selector-ext.append-strict(&, '[disabled]') {
-      @include disabled;
-    }
+  }
+
+  :host([disabled]) {
+    @include disabled;
   }
 
   .md3-button {

button/lib/_elevation-theme.scss

@@ -3,20 +3,13 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// TODO(b/228217731): Remove MDC/MWC dependencies
 @use 'sass:map';
 @use 'sass:meta';
 
 @use '@material/web/elevation/lib/elevation-theme';
 @use '@material/web/ripple/ripple-theme';
-@use '@material/web/compat/theme/state';
-
-@use './button-theme';
-
-$_selectors: button-theme.$selectors;
 
 @mixin theme-styles($theme) {
-  @debug map.get($theme, container-elevation-shadow);
   @include _elevation(
     (
       default: (
@@ -70,25 +63,23 @@ $_selectors: button-theme.$selectors;
 }
 
 @mixin _elevation($elevations) {
-  @include state.default($_selectors) {
-    @include elevation-theme.theme-styles(state.get-default-state($elevations));
+  @include elevation-theme.theme-styles(map.get($elevations, default));
+
+  &:hover {
+    @include elevation-theme.theme-styles(map.get($elevations, hover));
   }
 
-  @include state.hover($_selectors) {
-    @include elevation-theme.theme-styles(state.get-hover-state($elevations));
+  &:focus {
+    @include elevation-theme.theme-styles(map.get($elevations, focus));
   }
 
-  @include state.focus($_selectors) {
-    @include elevation-theme.theme-styles(state.get-focus-state($elevations));
+  &:active {
+    @include elevation-theme.theme-styles(map.get($elevations, pressed));
   }
 
-  @include state.pressed($_selectors) {
-    @include elevation-theme.theme-styles(state.get-pressed-state($elevations));
-  }
-
-  @include state.disabled($_selectors) {
+  &:disabled {
     @include elevation-theme.theme-styles(
-      state.get-disabled-state($elevations)
+      map.get($elevations, disabled)
     );
   }
 }

button/lib/_icon-theme.scss

@@ -6,13 +6,8 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-// TODO(b/228217731): Remove MDC/MWC dependencies
 @use 'sass:map';
 @use '@material/web/ripple/ripple-theme';
-@use '@material/web/compat/theme/state';
-@use './button-theme';
-
-$_selectors: button-theme.$selectors;
 
 @mixin theme-styles($theme) {
   @include _set-icon-color(
@@ -29,24 +24,22 @@ $_selectors: button-theme.$selectors;
 }
 
 @mixin _set-icon-color($colors) {
-  @include state.default($_selectors) {
-    @include _icon-color(state.get-default-state($colors));
+  @include _icon-color(map.get($colors, default));
+
+  &:hover {
+    @include _icon-color(map.get($colors, hover));
   }
 
-  @include state.hover($_selectors) {
-    @include _icon-color(state.get-hover-state($colors));
+  &:focus {
+    @include _icon-color(map.get($colors, focus));
   }
 
-  @include state.focus($_selectors) {
-    @include _icon-color(state.get-focus-state($colors));
+  &:active {
+    @include _icon-color(map.get($colors, pressed));
   }
 
-  @include state.pressed($_selectors) {
-    @include _icon-color(state.get-pressed-state($colors));
-  }
-
-  @include state.disabled($_selectors) {
-    @include _icon-color(state.get-disabled-state($colors));
+  &:disabled {
+    @include _icon-color(map.get($colors, disabled));
   }
 }
 

button/lib/_outlined-button-theme.scss

@@ -6,9 +6,7 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-// TODO(b/228217731): Remove compat dependencies
 @use 'sass:map';
-@use '@material/web/compat/theme/state';
 @use '@material/web/sass/resolvers';
 @use '@material/web/sass/theme';
 @use '@material/web/sass/typography';
@@ -16,7 +14,6 @@
 @use './button-theme';
 @use './icon-theme';
 
-$_selectors: button-theme.$selectors;
 $_custom-property-prefix: 'outlined-button';
 
 $light-theme: tokens.md-comp-outlined-button-values();
@@ -72,24 +69,22 @@ $light-theme: tokens.md-comp-outlined-button-values();
 }
 
 @mixin _outline-color($colors) {
-  @include state.default($_selectors) {
-    @include _set-outline-color(state.get-default-state($colors));
+  @include _set-outline-color(map.get($colors, default));
+
+  &:hover {
+    @include _set-outline-color(map.get($colors, hover));
   }
 
-  @include state.hover($_selectors) {
-    @include _set-outline-color(state.get-hover-state($colors));
+  &:focus {
+    @include _set-outline-color(map.get($colors, focus));
   }
 
-  @include state.focus($_selectors) {
-    @include _set-outline-color(state.get-focus-state($colors));
+  &:active {
+    @include _set-outline-color(map.get($colors, pressed));
   }
 
-  @include state.pressed($_selectors) {
-    @include _set-outline-color(state.get-pressed-state($colors));
-  }
-
-  @include state.disabled($_selectors) {
-    @include _set-outline-color(state.get-disabled-state($colors));
+  &:disabled {
+    @include _set-outline-color(map.get($colors, disabled));
   }
 }
 

button/lib/_touch-target.scss

@@ -6,11 +6,13 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-// TODO(b/228217731): Remove compat dependencies
-@use '@material/web/compat/touchtarget/touch-target';
-
 @mixin static-styles() {
   .md3-button__touch {
-    @include touch-target.touch-target;
+    position: absolute;
+    top: 50%;
+    height: 48px;
+    left: 0;
+    right: 0;
+    transform: translateY(-50%);
   }
 }