refactor(focus): Set focus ring inward defaults to avoid duplication …

…in caller components. PiperOrigin-RevId: 509893762
material-components · Feb 15, 2023 · 066d943 · 066d943
1 parent 6fcd8d4
commit 066d943
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/packages/mdc-focus/_focus-ring-inward-theme.scss b/packages/mdc-focus/_focus-ring-inward-theme.scss
@@ -14,8 +14,10 @@ $_ring-extra-offset-bottom-key: 'extra-offset-bottom';
 $default-inward-theme: map.merge(
   focus-ring-shared-theme.$default-shared-theme,
   (
+    focus-ring-shared-theme.$ring-offset-key: -1 * focus-ring-shared-theme.$track-width-value,
+    focus-ring-shared-theme.$target-shape-key: 8px,
     // Extra offset to bottom of focus ring in addition to default ring offset
-    $_ring-extra-offset-bottom-key: 0px
+    $_ring-extra-offset-bottom-key: 0px,
   )
 );
 

diff --git a/packages/mdc-focus/_focus-ring-outward-theme.scss b/packages/mdc-focus/_focus-ring-outward-theme.scss
@@ -11,6 +11,13 @@
 $_custom-property-prefix: 'focus-ring-outward';
 
 $default-outward-theme: focus-ring-shared-theme.$default-shared-theme;
+$default-outward-theme: map.merge(
+  focus-ring-shared-theme.$default-shared-theme,
+  (
+    focus-ring-shared-theme.$ring-offset-key: 2px,
+    focus-ring-shared-theme.$target-shape-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

diff --git a/packages/mdc-focus/_focus-ring-shared-theme.scss b/packages/mdc-focus/_focus-ring-shared-theme.scss
@@ -6,17 +6,16 @@ $ring-offset-key: 'offset';
 $ring-color-key: 'color';
 $track-width-key: 'track-width';
 $target-shape-key: 'target-shape';
+$track-width-value: 3px;
 $_grow-animation-duration: 150ms;
 $_shrink-animation-duration: 450ms;
 $_animation-timing: cubic-bezier(0.2, 0, 0, 1);
 
 $_color-sys: tokens.md-sys-color-values-light();
 
 $default-shared-theme: (
-  $ring-offset-key: 2px,
-  $track-width-key: 3px,
-  $ring-color-key: map.get($_color-sys, secondary),
-  $target-shape-key: 0px,
+  $track-width-key: $track-width-value,
+  $ring-color-key: map.get($_color-sys, 'secondary'),
 );
 
 @mixin focus-ring-animation($grow-animation-name, $shrink-animation-name) {