feat(focusring): Extra bottom offset for inward focus ring

PiperOrigin-RevId: 509181976

Author: material-web-copybara

packages/mdc-focus/_focus-ring-inward-theme.scss

@@ -9,23 +9,33 @@
 @use './focus-ring-shared-theme';
 
 $_custom-property-prefix: 'focus-ring-inward';
+$_ring-extra-offset-bottom-key: 'extra-offset-bottom';
+
+$default-inward-theme: map.merge(
+  focus-ring-shared-theme.$default-shared-theme,
+  (
+    // Extra offset to bottom of focus ring in addition to default ring offset
+    $_ring-extra-offset-bottom-key: 0px
+  )
+);
 
 /// Generates CSS custom properties that are consumed by the focus ring styles.
 /// Intended to be used directly by Material Design customers, as the only
 /// formally supported means of customizing the focus ring.
 ///
-/// @param {Map} $theme - A map with one or more of the keys of $default-theme.
+/// @param {Map} $theme - A map with one or more of the keys of $default-inward-theme.
 @mixin theme($theme) {
-  $theme: validate.theme(focus-ring-shared-theme.$default-theme, $theme);
+  $theme: validate.theme($default-inward-theme, $theme);
   @include keys.declare-custom-properties($theme, $_custom-property-prefix);
 }
 
-@mixin theme-styles($theme: focus-ring-shared-theme.$default-theme) {
-  $theme: validate.theme-styles(focus-ring-shared-theme.$default-theme, $theme);
+@mixin theme-styles($theme: $default-inward-theme) {
+  $theme: validate.theme-styles($default-inward-theme, $theme);
   $theme: keys.create-theme-vars($theme, $_custom-property-prefix);
 
   $ring-color: map.get($theme, focus-ring-shared-theme.$ring-color-key);
   $ring-offset: map.get($theme, focus-ring-shared-theme.$ring-offset-key);
+  $ring-extra-offset-bottom: map.get($theme, $_ring-extra-offset-bottom-key);
   $track-width: map.get($theme, focus-ring-shared-theme.$track-width-key);
   $target-shape: map.get($theme, focus-ring-shared-theme.$target-shape-key);
 
@@ -34,7 +44,8 @@ $_custom-property-prefix: 'focus-ring-inward';
   /// https://screenshot.googleplex.com/3cYw8Pi8WQNa3h8.png
   border: $track-width solid $ring-color;
   border-radius: calc($target-shape + $track-width + $ring-offset);
-  inset-block: calc(-1 * ($ring-offset + $track-width));
+  inset-block: calc(-1 * ($ring-offset + $track-width))
+    calc(-1 * ($ring-offset + $track-width + $ring-extra-offset-bottom));
   inset-inline: calc(-1 * ($ring-offset + $track-width));
 
   @include _focus-ring-animation-keyframes();

packages/mdc-focus/_focus-ring-outward-theme.scss

@@ -10,18 +10,20 @@
 
 $_custom-property-prefix: 'focus-ring-outward';
 
+$default-outward-theme: focus-ring-shared-theme.$default-shared-theme;
+
 /// Generates CSS custom properties that are consumed by the focus ring styles.
 /// Intended to be used directly by Material Design customers, as the only
 /// formally supported means of customizing the focus ring.
 ///
-/// @param {Map} $theme - A map with one or more of the keys of $default-theme.
+/// @param {Map} $theme - A map with one or more of the keys of $default-outward-theme.
 @mixin theme($theme) {
-  $theme: validate.theme(focus-ring-shared-theme.$default-theme, $theme);
+  $theme: validate.theme($default-outward-theme, $theme);
   @include keys.declare-custom-properties($theme, $_custom-property-prefix);
 }
 
-@mixin theme-styles($theme: focus-ring-shared-theme.$default-theme) {
-  $theme: validate.theme-styles(focus-ring-shared-theme.$default-theme, $theme);
+@mixin theme-styles($theme: $default-outward-theme) {
+  $theme: validate.theme-styles($default-outward-theme, $theme);
   $theme: keys.create-theme-vars($theme, $_custom-property-prefix);
 
   $ring-color: map.get($theme, focus-ring-shared-theme.$ring-color-key);

packages/mdc-focus/_focus-ring-shared-theme.scss

@@ -12,7 +12,7 @@ $_animation-timing: cubic-bezier(0.2, 0, 0, 1);
 
 $_color-sys: tokens.md-sys-color-values-light();
 
-$default-theme: (
+$default-shared-theme: (
   $ring-offset-key: 2px,
   $track-width-key: 3px,
   $ring-color-key: map.get($_color-sys, secondary),

packages/mdc-focus/test/focus-ring-inward-theme.test.scss

@@ -24,6 +24,7 @@
               'offset': 2px,
               'track-width': 3px,
               'target-shape': 5px,
+              'extra-offset-bottom': 4px,
             )
           );
         }
@@ -33,6 +34,7 @@
           --mdc-focus-ring-inward-offset: 2px;
           --mdc-focus-ring-inward-track-width: 3px;
           --mdc-focus-ring-inward-target-shape: 5px;
+          --mdc-focus-ring-inward-extra-offset-bottom: 4px;
         }
       }
     }
@@ -50,6 +52,7 @@
               'offset': 2px,
               'track-width': 3px,
               'target-shape': 5px,
+              'extra-offset-bottom': 0px,
             )
           );
         }
@@ -63,9 +66,14 @@
               var(--mdc-focus-ring-inward-offset, 2px)
           );
           inset-block: calc(
-            -1 * (var(--mdc-focus-ring-inward-offset, 2px) +
-                  var(--mdc-focus-ring-inward-track-width, 3px))
-          );
+              -1 * (var(--mdc-focus-ring-inward-offset, 2px) +
+                    var(--mdc-focus-ring-inward-track-width, 3px))
+            )
+            calc(
+              -1 * (var(--mdc-focus-ring-inward-offset, 2px) +
+                    var(--mdc-focus-ring-inward-track-width, 3px) +
+                    var(--mdc-focus-ring-inward-extra-offset-bottom, 0px))
+            );
           inset-inline: calc(
             -1 * (var(--mdc-focus-ring-inward-offset, 2px) +
                   var(--mdc-focus-ring-inward-track-width, 3px))