feat(focus): implement focus ring animation

PiperOrigin-RevId: 518709745

focus/lib/_focus-ring.scss

@@ -9,21 +9,21 @@
 // go/keep-sorted start
 @use '../../sass/shape';
 @use '../../sass/theme';
-@use './md-comp-focus-ring';
+@use '../../tokens';
 // go/keep-sorted end
 
 $_custom-property-prefix: 'focus-ring';
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(md-comp-focus-ring.values(), $tokens);
+  $tokens: theme.validate-theme(tokens.md-comp-focus-ring-values(), $tokens);
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
   $tokens: shape.resolve-tokens($tokens, 'shape');
 
   @include theme.emit-theme-vars($tokens);
 }
 
 @mixin styles() {
-  $tokens: md-comp-focus-ring.values();
+  $tokens: tokens.md-comp-focus-ring-values();
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
   $tokens: shape.resolve-tokens($tokens, 'shape');
 
@@ -36,26 +36,36 @@ $_custom-property-prefix: 'focus-ring';
     position: absolute;
     box-sizing: border-box;
     pointer-events: none;
-    border: var(--_width) solid var(--_color);
-    border-start-start-radius: calc(
-      var(--_offset) + var(--_width) + var(--_shape-start-start)
-    );
-    border-start-end-radius: calc(
-      var(--_offset) + var(--_width) + var(--_shape-start-end)
-    );
-    border-end-start-radius: calc(
-      var(--_offset) + var(--_width) + var(--_shape-end-start)
-    );
-    border-end-end-radius: calc(
-      var(--_offset) + var(--_width) + var(--_shape-end-end)
-    );
-    // Note that the ring will not respect its parent's border. This will not be
-    // an issue as long as border is set via a sibling node, similar to ripple
-    // and touch target.
-    inset: calc(-1 * (var(--_offset) + var(--_width)));
+    border-start-start-radius: calc(var(--_offset) + var(--_shape-start-start));
+    border-start-end-radius: calc(var(--_offset) + var(--_shape-start-end));
+    border-end-start-radius: calc(var(--_offset) + var(--_shape-end-start));
+    border-end-end-radius: calc(var(--_offset) + var(--_shape-end-end));
+    box-shadow: inset 0 0 0 0 var(--_color);
+    outline: var(--_width) solid var(--_color);
+    // NOTE: this 1px offset hides a transparent ring between the outline and offset when border-radius is large
+    outline-offset: -1px;
+    inset: calc(-1 * (var(--_offset) + 1px));
   }
 
   :host([visible]) {
     display: flex;
+
+    @keyframes focus-ring {
+      from {
+        outline-width: 0px;
+      }
+      25% {
+        box-shadow: inset 0 0 0 calc(var(--_animation-width) / 2) var(--_color);
+        outline-width: calc(var(--_animation-width) / 2);
+      }
+    }
+
+    animation-name: focus-ring;
+    animation-duration: var(--_animation-duration);
+    animation-timing-function: var(--_easing);
+
+    @media (prefers-reduced-motion) {
+      animation: none;
+    }
   }
 }

tokens/_index.scss

@@ -50,6 +50,7 @@
 @forward './md-comp-filled-tonal-icon-button' as
   md-comp-filled-tonal-icon-button-*;
 @forward './md-comp-filter-chip' as md-comp-filter-chip-*;
+@forward './md-comp-focus-ring' as md-comp-focus-ring-*;
 @forward './md-comp-full-screen-dialog' as md-comp-full-screen-dialog-*;
 @forward './md-comp-icon-button' as md-comp-icon-button-*;
 @forward './md-comp-input-chip' as md-comp-input-chip-*;

tokens/_md-comp-focus-ring.scss

@@ -0,0 +1,46 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use './md-sys-color';
+@use './md-sys-motion';
+@use './md-sys-shape';
+// go/keep-sorted end
+
+$_default: (
+  'md-sys-color': md-sys-color.values-light(),
+  'md-sys-shape': md-sys-shape.values(),
+  'md-sys-motion': md-sys-motion.values(),
+);
+
+@function values($deps: $_default, $exclude-hardcoded-values: false) {
+  @return (
+    shape:
+      if(
+        $exclude-hardcoded-values,
+        null,
+        map.get($deps, 'md-sys-shape', 'corner-full')
+      ),
+    offset: if($exclude-hardcoded-values, null, 2px),
+    width: if($exclude-hardcoded-values, null, 3px),
+    animation-width: if($exclude-hardcoded-values, null, 8px),
+    animation-duration:
+      if(
+        $exclude-hardcoded-values,
+        null,
+        map.get($deps, 'md-sys-motion', 'duration-long4')
+      ),
+    easing:
+      if(
+        $exclude-hardcoded-values,
+        null,
+        map.get($deps, 'md-sys-motion', 'easing-emphasized')
+      ),
+    color: map.get($deps, 'md-sys-color', 'secondary')
+  );
+}