fix(focus): Update focus ring to new design

PiperOrigin-RevId: 487571074
material-components · Nov 10, 2022 · 601c331 · 601c331
1 parent d3fa2c2
commit 601c331
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 49 deletions.
diff --git a/checkbox/lib/_checkbox.scss b/checkbox/lib/_checkbox.scss
@@ -7,9 +7,11 @@
 // Selector '.md3-*' should only be used in this project.
 
 @use 'sass:math';
+@use 'sass:map';
 @use '../../focus/focus-ring';
 @use '../../motion/animation';
 @use './checkbox-theme';
+@use '../../tokens';
 
 $_transition-duration: 90ms;
 $_mark-stroke-size: 4px;
@@ -109,8 +111,9 @@ $_indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1) !default;
 
   @include focus-ring.theme(
     (
-      container-outer-padding-vertical: -2px,
-      container-outer-padding-horizontal: -2px,
+      offset-vertical: -2px,
+      offset-horizontal: -2px,
+      shape: map.get(tokens.md-sys-shape-values(), corner-small),
     )
   );
   @include checkbox-theme.high-contrast-styles();

diff --git a/fab/lib/_shared.scss b/fab/lib/_shared.scss
@@ -49,6 +49,12 @@
     position: relative;
     background-color: var(--_container-color);
 
+    @include focus-ring.theme(
+      (
+        shape: var(--_container-shape),
+      )
+    );
+
     @include elevation-theme.theme-styles(
       (
         shadow: var(--_container-elevation-shadow),
@@ -181,8 +187,8 @@
       // Adjust the focus ring padding to account for the 1px border in HCM.
       @include focus-ring.theme(
         (
-          container-outer-padding-vertical: 3px,
-          container-outer-padding-horizontal: 3px,
+          offset-vertical: 3px,
+          offset-horizontal: 3px,
         )
       );
       border: 1px solid ButtonText;

diff --git a/focus/lib/_focus-ring.scss b/focus/lib/_focus-ring.scss
@@ -8,20 +8,24 @@
 
 @use 'sass:map';
 @use '../../sass/theme';
+@use '../../sass/shape';
+@use '../../sass/resolvers';
 @use '../../tokens';
 @use './md-comp-focus-ring';
 
 $_custom-property-prefix: 'focus-ring';
 
 @mixin theme($tokens) {
   $tokens: theme.validate-theme(md-comp-focus-ring.values(), $tokens);
+  $tokens: _resolve-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
   @include theme.emit-theme-vars($tokens);
 }
 
 @mixin styles() {
   $tokens: md-comp-focus-ring.values();
+  $tokens: _resolve-tokens($tokens);
   $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
 
   * {
@@ -35,37 +39,33 @@ $_custom-property-prefix: 'focus-ring';
   }
 
   .md3-focus-ring {
-    // Outer
     display: none;
     position: absolute;
     box-sizing: border-box;
-    border: var(--_outer-ring-width) solid var(--_outer-ring-color);
-    border-radius: var(--_ring-radius);
+    border: var(--_width) solid var(--_color);
+    border-start-start-radius: var(--_shape-start-start);
+    border-start-end-radius: var(--_shape-start-end);
+    border-end-start-radius: var(--_shape-end-start);
+    border-end-end-radius: 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.
-    $vertical-inset: calc(
-      -1 * (var(--_container-outer-padding-vertical) + var(--_inner-ring-width) +
-            var(--_outer-ring-width))
-    );
-    $horizontal-inset: calc(
-      -1 * (var(--_container-outer-padding-horizontal) +
-            var(--_inner-ring-width) + var(--_outer-ring-width))
-    );
+    $vertical-inset: calc(-1 * (var(--_offset-vertical) + var(--_width)));
+    $horizontal-inset: calc(-1 * (var(--_offset-horizontal) + var(--_width)));
 
     inset: $vertical-inset $horizontal-inset;
-
-    // Inner
-    &::before {
-      inset: 0;
-      position: absolute;
-      content: '';
-      border: var(--_inner-ring-width) solid var(--_inner-ring-color);
-      border-radius: calc(var(--_ring-radius) - var(--_outer-ring-width));
-    }
   }
 
   .md3-focus-ring--visible {
     display: block;
   }
 }
+
+@function _resolve-tokens($tokens) {
+  $tokens: shape.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, shape),
+    shape
+  );
+  @return $tokens;
+}
diff --git a/focus/lib/_md-comp-focus-ring.scss b/focus/lib/_md-comp-focus-ring.scss
@@ -8,16 +8,20 @@
 
 $_default: (
   md-sys-color: tokens.md-sys-color-values-light-dynamic(),
+  md-sys-shape: tokens.md-sys-shape-values(),
 );
 
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   @return (
-    ring-radius: if($exclude-hardcoded-values, null, 8px),
-    container-outer-padding-vertical: if($exclude-hardcoded-values, null, 2px),
-    container-outer-padding-horizontal: if($exclude-hardcoded-values, null, 2px),
-    inner-ring-width: if($exclude-hardcoded-values, null, 2px),
-    inner-ring-color: map.get($deps, md-sys-color, on-tertiary-container),
-    outer-ring-width: if($exclude-hardcoded-values, null, 2px),
-    outer-ring-color: map.get($deps, md-sys-color, tertiary-container)
+    shape:
+      if(
+        $exclude-hardcoded-values,
+        null,
+        map.get($deps, md-sys-shape, corner-full)
+      ),
+    offset-vertical: if($exclude-hardcoded-values, null, 2px),
+    offset-horizontal: if($exclude-hardcoded-values, null, 2px),
+    width: if($exclude-hardcoded-values, null, 3px),
+    color: map.get($deps, md-sys-color, secondary)
   );
 }
diff --git a/iconbutton/lib/_shared.scss b/iconbutton/lib/_shared.scss
@@ -10,7 +10,6 @@
 // Selector '.md3-*' should only be used in this project.
 
 @use 'sass:map';
-@use '../../focus/focus-ring';
 @use '../../sass/color';
 @use '../../sass/touch-target';
 @use '../../tokens';
@@ -19,13 +18,6 @@
   :host {
     display: inline-flex;
     outline: none;
-
-    @include focus-ring.theme(
-      (
-        container-outer-padding-vertical: 0px,
-        container-outer-padding-horizontal: 0px,
-      )
-    );
   }
 
   :host([disabled]) {

diff --git a/list/lib/listitem/_list-item.scss b/list/lib/listitem/_list-item.scss
@@ -6,22 +6,24 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
+@use 'sass:map';
 @use '../../../focus/focus-ring';
 @use '../../../sass/theme';
 @use '../icon/list-item-icon';
 @use '../image/list-item-image';
 @use '../video/list-item-video';
-@use '../tokens';
+@use '../tokens' as list-tokens;
+@use '../../../tokens';
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(tokens.md-comp-list-values(), $tokens);
+  $tokens: theme.validate-theme(list-tokens.md-comp-list-values(), $tokens);
   $tokens: theme.create-theme-vars($tokens, list);
 
   @include theme.emit-theme-vars($tokens);
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-list-values();
+  $tokens: list-tokens.md-comp-list-values();
   $tokens: theme.create-theme-vars($tokens, list);
 
   * {
@@ -50,8 +52,9 @@
 
     @include focus-ring.theme(
       (
-        container-outer-padding-vertical: -2px,
-        container-outer-padding-horizontal: -4px,
+        offset-vertical: -2px,
+        offset-horizontal: -3px,
+        shape: map.get(tokens.md-sys-shape-values(), corner-extra-small),
       )
     );
   }

diff --git a/navigationtab/lib/_navigation-tab.scss b/navigationtab/lib/_navigation-tab.scss
@@ -70,8 +70,9 @@ $_custom-property-prefix: 'navigation-bar';
 
     @include focus-ring.theme(
       (
-        container-outer-padding-vertical: -4px,
-        container-outer-padding-horizontal: -4px,
+        offset-vertical: -2px,
+        offset-horizontal: -2px,
+        shape: map.get(tokens.md-sys-shape-values(), corner-small),
       )
     );
 

diff --git a/radio/lib/_radio.scss b/radio/lib/_radio.scss
@@ -108,8 +108,8 @@
 
   @include focus-ring.theme(
     (
-      container-outer-padding-vertical: -2px,
-      container-outer-padding-horizontal: -2px,
+      offset-vertical: -2px,
+      offset-horizontal: -2px,
     )
   );
 

diff --git a/switch/lib/_switch.scss b/switch/lib/_switch.scss
@@ -92,7 +92,12 @@ $_forced-colors-theme: (
     // TODO(b/231741594): use `track-shape` once this is not deleted.
     @include focus-ring.theme(
       (
-        ring-radius: var(--_track-shape-start-start),
+        shape: (
+          var(--_track-shape-start-start),
+          var(--_track-shape-start-end),
+          var(--_track-shape-end-start),
+          var(--_track-shape-end-end),
+        ),
       )
     );
   }