fix(material/slide-toggle): move state-layer-size token (#28397)

* Fix a bug where the state-layer-size token was being defined twice: once via get-unthemable-tokens
  and another time by our density mixin because we were calling mdc's density mixin instead of the
  theme mixin.

(cherry picked from commit 2744a4c)

Author: wagnermaciel

src/material/core/tokens/m2/mdc/_switch.scss

@@ -2,6 +2,7 @@
 @use '../../../style/elevation';
 @use '../../../style/sass-utils';
 @use '../../../theming/inspection';
+@use '../../../theming/theming';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -40,8 +41,6 @@ $prefix: (mdc, switch);
     track-width: 36px,
     // Width and height of icon when unselected.
     unselected-icon-size: 18px,
-    // The diameter of the handle ripple.
-    state-layer-size: 40px,
     // Opacity of ripple when selected and focused.
     selected-focus-state-layer-opacity: 0.12,
     // Opacity of ripple when selected and on hover.
@@ -164,7 +163,17 @@ $prefix: (mdc, switch);
 
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
-  @return ();
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+
+  @return (
+    // The diameter of the handle ripple.
+    state-layer-size: map.get((
+      0: 40px,
+      -1: 36px,
+      -2: 32px,
+      -3: 28px,
+    ), $scale)
+  );
 }
 
 // Combines the tokens generated by the above functions into a single map with placeholder values.

src/material/slide-toggle/_slide-toggle-theme.scss

@@ -72,10 +72,8 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {
-    $density-scale: inspection.get-theme-density($theme);
-
     .mat-mdc-slide-toggle {
-      @include mdc-switch-theme.theme(mdc-switch-theme.density($density-scale));
+      @include mdc-switch-theme.theme(tokens-mdc-switch.get-density-tokens($theme));
     }
   }
 }