fix(material/radio): color tokens excluded when passing in variant

Fixes that when passing in a variant into the radio button's `get-tokens` function, we were removing the color tokens altogether, because passing in multiple arguments into `map.remove` removes all those keys, rather than removing a nested value.

Fixes #31319.

Author: crisbeto

src/dev-app/theme-m3.scss

@@ -1,122 +1,29 @@
 @use '@angular/material' as mat;
+// @include mat.elevation-classes();
+// @include mat.app-background();
 
-// Plus imports for other components in your app.
-
-// Disable legacy API compatibility, since dev-app is fully migrated to theme inspection API.
-mat.$theme-legacy-inspection-api-compatibility: false;
-
-$primary: mat.$azure-palette;
-$tertiary: mat.$blue-palette;
-
-// Create a theme with the specified color type and density.
-@function create-theme($type: light, $density: 0) {
-  @return mat.define-theme((
+$theme: mat.define-theme(
+  (
     color: (
-      theme-type: $type,
-      primary: $primary,
-      tertiary: $tertiary,
-      use-system-variables: true,
-    ),
-    typography: (use-system-variables: true),
-    density: (
-      scale: $density
+      theme-type: dark,
+      primary: mat.$cyan-palette,
+      tertiary: mat.$orange-palette,
     ),
-  ));
-}
-
-// Define the default (light) theme.
-$light-theme: create-theme($type: light);
-
-// Create our dark theme.
-$dark-theme: create-theme($type: dark);
+  )
+);
 
-// Include the default theme styles.
 html {
-  color-scheme: light;
-  body:not(.demo-experimental-theme) {
-    @include mat.all-component-themes($light-theme);
-    @include mat.system-level-colors($light-theme);
-    @include mat.system-level-typography($light-theme);
-    // TODO(mmalerba): Support M3 for experimental components.
-    // @include matx.column-resize-theme($light-theme);
-    // @include matx.popover-edit-theme($light-theme);
-  }
-
-  body.demo-experimental-theme {
-    @include mat.theme((
-      color: (
-        primary: $primary,
-        tertiary: $tertiary,
-      ),
-      typography: Roboto,
-      density: 0,
-    ));
-  }
-}
-
-@include mat.typography-hierarchy($light-theme);
-
-.demo-strong-focus {
-  // Note: we can theme the indicators directly through `strong-focus-indicators` as well.
-  // Use the theme so we have some coverage over the entire API surface.
-  @include mat.strong-focus-indicators();
-  @include mat.strong-focus-indicators-theme($light-theme);
-}
-
-// Include the alternative theme styles inside of a block with a CSS class. You can make this
-// CSS class whatever you want. In this example, any component inside of an element with
-// `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
-// default theme.
-body.demo-unicorn-dark-theme {
-  color-scheme: dark;
-  &:not(.demo-experimental-theme) {
-    // Include the dark theme color styles.
-    @include mat.all-component-colors($dark-theme);
-    @include mat.system-level-colors($dark-theme);
-    // TODO(mmalerba): Support M3 for experimental components.
-    // @include matx.column-resize-color($dark-theme);
-    // @include matx.popover-edit-color($dark-theme);
-  }
-
-  // Include the dark theme colors for focus indicators.
-  &.demo-strong-focus {
-    @include mat.strong-focus-indicators-color($dark-theme);
-  }
-}
-
-// Create classes for all density scales which are supported by all MDC-based components.
-// The classes are applied conditionally based on the selected density in the dev-app layout
-// component.
-$density-scales: (-1, -2, -3, -4, minimum, maximum);
-@each $scale in $density-scales {
-  .demo-density-#{$scale} {
-    body:not(.demo-experimental-theme) & {
-      $density-theme: create-theme($density: $scale);
-      @include mat.all-component-densities($density-theme);
+  // @include mat.all-component-themes($theme);
+  // @include mat.typography-hierarchy($theme);
+  @each $variant in (primary, secondary, tertiary, error) {
+    .#{$variant}-button {
+      @include mat.button-color($theme, $color-variant: $variant);
     }
-
-    body.demo-experimental-theme & {
-      @include mat.theme((density: $scale));
+    .#{$variant}-radio {
+      @include mat.radio-color($theme, $color-variant: $variant);
     }
   }
-}
-
-// Enable back-compat CSS for color="..." API & typography hierarchy.
-.demo-color-api-back-compat {
-  @include mat.color-variants-backwards-compatibility($light-theme);
-  @include mat.typography-hierarchy($light-theme, $back-compat: true);
-
-  &.demo-unicorn-dark-theme {
-    @include mat.color-variants-backwards-compatibility($dark-theme);
+  body {
+    margin: 0;
   }
 }
-
-// In M3 buttons are smaller than their touch target at zero-density.
-.demo-config-buttons button {
-  margin: 4px;
-}
-
-// In M3 we need some spacing around the list in the sidenav.
-mat-nav-list.demo-nav-list {
-  margin: 8px;
-}

src/material/radio/_m3-radio.scss

@@ -47,7 +47,7 @@
   // Temporary removal where color variants previously did not include the
   // unselected icon color. Remove this and approve internal screenshot changes.
   @if $color-variant {
-    $tokens: map.remove($tokens, color, radio-unselected-icon-color);
+    $tokens: map.deep-remove($tokens, color, radio-unselected-icon-color);
   }
 
   @return $tokens;