Improve backwards-compatibility

canonical · Sep 2, 2024 · 0da9fb0 · 0da9fb0
1 parent 10d329d
commit 0da9fb0
Show file tree

Hide file tree

Showing 13 changed files with 23 additions and 17 deletions.
diff --git a/scss/_base_button.scss b/scss/_base_button.scss
@@ -15,7 +15,7 @@
 
   %vf-button-base {
     @include vf-transition(#{background-color, border-color}, snap, in);
-    @include vf-focus;
+    @include vf-focus-themed;
 
     border-style: solid;
     border-width: $input-border-thickness;

diff --git a/scss/_base_details.scss b/scss/_base_details.scss
@@ -7,7 +7,7 @@
 
   summary {
     @extend %common-default-text-properties;
-    @include vf-focus;
+    @include vf-focus-themed;
 
     margin-bottom: $spv-nudge; //push subsequent text onto baseline
     max-width: $text-max-width;

diff --git a/scss/_base_forms.scss b/scss/_base_forms.scss
@@ -13,7 +13,7 @@
   // Default form input element styles
   %vf-input-elements {
     @extend %bordered-text-vertical-padding;
-    @include vf-focus($has-validation: true);
+    @include vf-focus-themed($has-validation: true);
     @include vf-animation(#{background-color}, fast);
 
     // stylelint-disable property-no-vendor-prefix
@@ -145,7 +145,7 @@
 
   [type='file'] {
     @extend %bordered-text-vertical-padding;
-    @include vf-focus;
+    @include vf-focus-themed;
 
     margin-bottom: $input-margin-bottom;
     width: 100%;

diff --git a/scss/_base_links.scss b/scss/_base_links.scss
@@ -8,7 +8,7 @@
   }
 
   %vf-link-base {
-    @include vf-focus;
+    @include vf-focus-themed;
 
     color: $colors--theme--link-default;
     text-decoration: none;

diff --git a/scss/_global_functions.scss b/scss/_global_functions.scss
@@ -62,7 +62,7 @@
 
 // Adds visual focus to elements on :focus-visible or :focus if the browser
 // doesn't support the former
-@mixin vf-focus($light-color: $colors--light-theme--focus, $dark-color: $colors--dark-theme--focus, $width: $bar-thickness, $has-validation: false) {
+@mixin vf-focus-themed($light-color: $colors--light-theme--focus, $dark-color: $colors--dark-theme--focus, $width: $bar-thickness, $has-validation: false) {
   --vf-focus-outline-color: #{$light-color};
 
   .is-dark & {
@@ -99,6 +99,12 @@
   }
 }
 
+// This mixin is deprecated and will be removed in a future version of Vanilla.
+// Please use vf-focus-themed instead.
+@mixin vf-focus($color: $colors--theme--focus, $width: $bar-thickness, $has-validation: false) {
+  @include vf-focus-themed($light-color: $color, $width: $width, $has-validation: $has-validation);
+}
+
 // Raises a number to a power (https://css-tricks.com/snippets/sass/power-function/)
 @function pow($number, $exponent) {
   $value: 1;

diff --git a/scss/_patterns_accordion.scss b/scss/_patterns_accordion.scss
@@ -17,7 +17,7 @@
 
   .p-accordion__tab {
     @extend %single-border-text-vpadding--scaling;
-    @include vf-focus;
+    @include vf-focus-themed;
 
     background-color: inherit;
     border: 0;

diff --git a/scss/_patterns_buttons.scss b/scss/_patterns_buttons.scss
@@ -80,7 +80,7 @@
       $button-disabled-border-color: $colors--theme--button-positive-default,
       $button-text-color: $colors--theme--button-positive-text
     );
-    @include vf-focus($light-color: $color-focus-positive);
+    @include vf-focus-themed($light-color: $color-focus-positive);
   }
 }
 

diff --git a/scss/_patterns_chip.scss b/scss/_patterns_chip.scss
@@ -6,7 +6,7 @@ $chip-border-thickness: 1px;
   %vf-chip {
     @extend %small-text;
     @include vf-transition(#{background-color, border-color}, snap, out);
-    @include vf-focus;
+    @include vf-focus-themed;
 
     align-items: baseline;
     border-radius: 1rem;

diff --git a/scss/_patterns_contextual-menu.scss b/scss/_patterns_contextual-menu.scss
@@ -66,7 +66,7 @@
   }
 
   .p-contextual-menu__link {
-    @include vf-focus;
+    @include vf-focus-themed;
 
     border: 0;
     clear: both;

diff --git a/scss/_patterns_links.scss b/scss/_patterns_links.scss
@@ -41,7 +41,7 @@
     top: -999px;
 
     &:focus {
-      @include vf-focus;
+      @include vf-focus-themed;
 
       left: 0;
       padding: $spv--x-small;

diff --git a/scss/_patterns_list-tree.scss b/scss/_patterns_list-tree.scss
@@ -43,7 +43,7 @@
   }
 
   .p-list-tree__item {
-    @include vf-focus;
+    @include vf-focus-themed;
 
     margin-top: $sp-xx-small;
     padding-left: 0.8rem;
@@ -69,7 +69,7 @@
   }
 
   .p-list-tree__toggle {
-    @include vf-focus;
+    @include vf-focus-themed;
 
     background: transparent;
     border: 0;

diff --git a/scss/_patterns_navigation.scss b/scss/_patterns_navigation.scss
@@ -85,7 +85,7 @@ $navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large)
     @extend %navigation-link-text;
     @extend %vf-navigation-separator;
     @include vf-transition($properties, snap);
-    @include vf-focus;
+    @include vf-focus-themed;
 
     // override button styles
     background-color: transparent;
@@ -327,7 +327,7 @@ $navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large)
     margin: 0 $sph--large 0 0;
 
     .p-navigation__item {
-      @include vf-focus;
+      @include vf-focus-themed;
 
       display: flex;
     }
@@ -478,7 +478,7 @@ $navigation-height: calc(map-get($line-heights, default-text) + 2 * $spv--large)
     @extend %navigation-link-responsive-padding-horizontal;
     @extend %navigation-link-responsive-padding-vertical;
     @extend %navigation-link-text;
-    @include vf-focus;
+    @include vf-focus-themed;
 
     margin: 0 0 auto 0;
   }

diff --git a/scss/_patterns_side-navigation.scss b/scss/_patterns_side-navigation.scss
@@ -354,7 +354,7 @@
   }
 
   %side-navigation__link {
-    @include vf-focus;
+    @include vf-focus-themed;
 
     &,
     &:visited {