feat(checkbox): Added theme-extension() mixin to Checkbox

PiperOrigin-RevId: 440171798

components/checkbox/_checkbox.scss

@@ -0,0 +1 @@
+@forward './lib/checkbox-theme' show theme, theme-extension;

components/checkbox/lib/_checkbox-theme.scss

@@ -24,7 +24,6 @@
 @use 'sass:map';
 @use 'sass:math';
 @use 'sass:selector';
-@use '@material/touch-target/touch-target';
 @use '@material/theme/shadow-dom';
 @use '../../sass/theme';
 @use '../../tokens/latest' as tokens;
@@ -147,6 +146,18 @@ $custom-property-prefix: 'checkbox';
   }
 }
 
+$_theme-extension-keys: (
+  touch-target-size: null,
+);
+
+@mixin theme-extension($theme) {
+  $theme: theme.validate-theme($_theme-extension-keys, $theme);
+
+  .md3-checkbox {
+    @include _touch-target(map.get($theme, touch-target-size));
+  }
+}
+
 @function _flatten-disable-colors($theme) {
   @return color.join-color-and-opacity-pairs(
     $theme,
@@ -318,11 +329,16 @@ $custom-property-prefix: 'checkbox';
 }
 
 @mixin _state-layer-size($size) {
-  height: $size;
-  width: $size;
+  .md3-checkbox__ripple {
+    height: $size;
+    width: $size;
+  }
 }
 
 @mixin _touch-target($size) {
+  height: $size;
+  width: $size;
+
   .md3-checkbox__native-control {
     width: $size;
     height: $size;

components/checkbox/lib/_checkbox.scss

@@ -23,8 +23,7 @@
 // TODO(b/228217731): Remove MDC/MWC dependencies
 @use 'sass:math';
 @use '@material/dom/dom';
-@use '@material/focusring/focus-ring';
-@use '@material/touch-target/touch-target';
+@use '../../focus/lib/focus-ring-theme';
 @use '../../motion/animation';
 @use '../../sass/var';
 @use './checkbox-theme';
@@ -39,14 +38,6 @@ $_selected-checkmark-padding: $_unselected-outline-width;
 
   .md3-checkbox {
     @include base_;
-
-    // Turn off focus ring for IE when HCM is turn off. For some reason this
-    // adds space to the bottom on the focused checkbox inside a dialog.
-    @media all and (-ms-high-contrast: none) {
-      .md3-checkbox__focus-ring {
-        display: none;
-      }
-    }
   }
 
   @include dom.forced-colors-mode {
@@ -129,6 +120,19 @@ $_selected-checkmark-padding: $_unselected-outline-width;
       @include child--upgraded_;
     }
   }
+
+  .md3-checkbox__ripple {
+    position: absolute;
+    display: inline-flex;
+    z-index: -1;
+  }
+
+  @include focus-ring-theme.theme(
+    (
+      container-outer-padding-vertical: -2px,
+      container-outer-padding-horizontal: -2px,
+    )
+  );
 }
 
 @mixin base_ {

components/checkbox/lib/checkbox.ts

@@ -182,7 +182,9 @@ export class Checkbox extends ActionElement {
           </svg>
           <div class="md3-checkbox__mixedmark"></div>
         </div>
-        ${this.renderRipple()}
+        <div class="md3-checkbox__ripple">
+          ${this.renderRipple()}
+        </div>
       </div>`;
   }