feat(material/checkbox): refactor pseudo-checkbox size styles (#25419)

* feat(material/checkbox): refactor pseudo-checkbox size styles

* feat(material/checkbox): keep  16px

src/material/_index.scss

@@ -72,6 +72,8 @@
   legacy-optgroup-typography, legacy-optgroup-theme;
 @forward './core/selection/pseudo-checkbox/pseudo-checkbox-theme' as pseudo-checkbox-* show
   pseudo-checkbox-color, pseudo-checkbox-typography, pseudo-checkbox-theme;
+@forward './core/selection/pseudo-checkbox/pseudo-checkbox-common' as pseudo-checkbox-* show
+  pseudo-checkbox-legacy-size;
 @forward './core/focus-indicators/focus-indicators-theme' as strong-focus-indicators-* show
   strong-focus-indicators-color, strong-focus-indicators-theme;
 @forward './autocomplete/autocomplete-theme' as autocomplete-* show autocomplete-theme,

src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-common.scss

@@ -0,0 +1,33 @@
+@use 'sass:math';
+@use '../../style/checkbox-common';
+
+// Padding inside of a pseudo checkbox.
+$padding: checkbox-common.$border-width * 2;
+
+/// Applies the styles that set the size of the pseudo checkbox
+@mixin size($box-size) {
+  $mark-size: $box-size - (2 * $padding);
+
+  .mat-pseudo-checkbox {
+    width: $box-size;
+    height: $box-size;
+  }
+
+  .mat-pseudo-checkbox-indeterminate::after {
+    top: math.div($box-size - checkbox-common.$border-width, 2) -
+      checkbox-common.$border-width;
+    width: $box-size - 6px;
+  }
+
+  .mat-pseudo-checkbox-checked::after {
+    top: math.div($box-size, 2) - math.div($mark-size, 4) -
+       math.div($box-size, 10) - checkbox-common.$border-width;
+    width: $mark-size;
+    height: math.div($mark-size - checkbox-common.$border-width, 2);
+  }
+}
+
+/// Applies the legacy size styles to the pseudo-checkbox
+@mixin legacy-size() {
+  @include size(checkbox-common.$legacy-size);
+}

src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss

@@ -2,17 +2,9 @@
 @use '../../style/checkbox-common';
 @use '../../style/private';
 @use '../../style/variables';
-
-// Padding inside of a pseudo checkbox.
-$_padding: checkbox-common.$border-width * 2;
-
-// Size of the checkmark in a pseudo checkbox.
-$_checkmark-size: checkbox-common.$size - (2 * $_padding);
-
+@use './pseudo-checkbox-common';
 
 .mat-pseudo-checkbox {
-  width: checkbox-common.$size;
-  height: checkbox-common.$size;
   border: checkbox-common.$border-width solid;
   border-radius: 2px;
   cursor: pointer;
@@ -51,22 +43,19 @@ $_checkmark-size: checkbox-common.$size - (2 * $_padding);
 }
 
 .mat-pseudo-checkbox-indeterminate::after {
-  top: math.div(checkbox-common.$size - checkbox-common.$border-width, 2) -
-      checkbox-common.$border-width;
   left: math.div(checkbox-common.$border-width, 2);
-  width: checkbox-common.$size - 6px;
   opacity: 1;
   border-radius: 2px;
 }
 
 .mat-pseudo-checkbox-checked::after {
-  top: math.div(checkbox-common.$size, 2) - math.div($_checkmark-size, 4) -
-       math.div(checkbox-common.$size, 10) - checkbox-common.$border-width;
-  left: $_padding - checkbox-common.$border-width * 1.5;
-  width: $_checkmark-size;
-  height: math.div($_checkmark-size - checkbox-common.$border-width, 2);
+  left: pseudo-checkbox-common.$padding - checkbox-common.$border-width * 1.5;
   border-left: checkbox-common.$border-width solid currentColor;
   transform: rotate(-45deg);
   opacity: 1;
   box-sizing: content-box;
 }
+
+// TODO(andrewseguin): Change this to the non-legacy size once
+// the above mixins have landed internally.
+@include pseudo-checkbox-common.size(checkbox-common.$legacy-size);

src/material/core/style/_checkbox-common.scss

@@ -1,6 +1,9 @@
 // The width/height of the checkbox element.
 $size: 16px !default;
 
+// The width/height of the legacy-checkbox element.
+$legacy-size: 16px !default;
+
 // The width of the checkbox border shown when the checkbox is unchecked.
 $border-width: 2px;