From 95897b3e25ef3915c6047239b1794172822b1b35 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Mon, 9 Jan 2023 11:12:43 -0800
Subject: [PATCH] fix(radio): update motion to current spec

PiperOrigin-RevId: 500761190
---
 radio/lib/_radio.scss | 42 +++++++++++++++++++++---------------------
 radio/lib/radio.ts    |  4 ++--
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/radio/lib/_radio.scss b/radio/lib/_radio.scss
index 562c3c4703..fe7b2ac2dc 100644
--- a/radio/lib/_radio.scss
+++ b/radio/lib/_radio.scss
@@ -95,39 +95,39 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     width: var(--_icon-size);
   }
 
-  .inner-circle {
+  .outer.circle {
+    // Outline color enter/exit transition
+    transition: fill 50ms linear;
+  }
+
+  .inner.circle {
     opacity: 0;
-    transition-duration: 150ms, 50ms; // Exit duration for scale and opacity.
-    transition-property: transform, opacity;
-    // Exit easing function for scale, linear for opacity.
-    transition-timing-function: map.get(
-        $_md-sys-motion,
-        easing-emphasized-accelerate
-      ),
-      linear;
-    transform: scale(0.6);
     transform-origin: center;
+    transition: opacity 50ms linear;
   }
 
   :host([checked]) .icon {
     fill: var(--_selected-icon-color);
   }
 
-  :host([checked]) .inner-circle {
+  :host([checked]) .inner.circle {
+    animation: inner-circle-grow 300ms
+      map.get($_md-sys-motion, easing-emphasized-decelerate);
     opacity: 1;
-    // Enter duration for scale and opacity.
-    transition-duration: 350ms, 50ms;
-    // Enter easing function for scale, linear for opacity.
-    transition-timing-function: map.get(
-        $_md-sys-motion,
-        easing-emphasized-decelerate
-      ),
-      linear;
-    transform: scale(1);
+  }
+
+  @keyframes inner-circle-grow {
+    from {
+      transform: scale(0);
+    }
+    to {
+      transform: scale(1);
+    }
   }
 
   // Don't animate when disabled
-  :host([disabled]) .inner-circle {
+  :host([disabled]) .circle {
+    animation-duration: 0s;
     transition-duration: 0s;
   }
 
diff --git a/radio/lib/radio.ts b/radio/lib/radio.ts
index d727626ef0..28f78dadab 100644
--- a/radio/lib/radio.ts
+++ b/radio/lib/radio.ts
@@ -107,8 +107,8 @@ export class Radio extends LitElement {
           <rect width="100%" height="100%" fill="white" />
           <circle cx="10" cy="10" r="8" fill="black" />
         </mask>
-        <circle cx="10" cy="10" r="10" mask="url(#cutout)" />
-        <circle cx="10" cy="10" r="5" class="inner-circle" />
+        <circle class="outer circle" cx="10" cy="10" r="10" mask="url(#cutout)" />
+        <circle class="inner circle" cx="10" cy="10" r="5" />
       </svg>
       <input
         type="radio"