From 0da9fb092ddacb51ab00753aeb7a95f781d0b1b1 Mon Sep 17 00:00:00 2001
From: pastelcyborg <168636120+pastelcyborg@users.noreply.github.com>
Date: Mon, 2 Sep 2024 14:52:50 -0400
Subject: [PATCH] Improve backwards-compatibility

---
 scss/_base_button.scss              | 2 +-
 scss/_base_details.scss             | 2 +-
 scss/_base_forms.scss               | 4 ++--
 scss/_base_links.scss               | 2 +-
 scss/_global_functions.scss         | 8 +++++++-
 scss/_patterns_accordion.scss       | 2 +-
 scss/_patterns_buttons.scss         | 2 +-
 scss/_patterns_chip.scss            | 2 +-
 scss/_patterns_contextual-menu.scss | 2 +-
 scss/_patterns_links.scss           | 2 +-
 scss/_patterns_list-tree.scss       | 4 ++--
 scss/_patterns_navigation.scss      | 6 +++---
 scss/_patterns_side-navigation.scss | 2 +-
 13 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/scss/_base_button.scss b/scss/_base_button.scss
index 8f88068ee..a9aa8c9db 100644
--- 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
index 75b722880..57a2c7384 100644
--- 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
index 6ba4e8ff2..105d3b415 100644
--- 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
index 9a330d00b..800c80fab 100644
--- 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
index d7f858c8f..e179df514 100644
--- 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
index d1aff1305..b00a8253b 100644
--- 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
index f0c6e66d1..860cc80a4 100644
--- 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
index 56533e11b..602f560f1 100644
--- 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
index 9a37dc857..16bafc2fb 100644
--- 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
index 3ba86ef59..f48b3b9d5 100644
--- 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
index 670bbbf4d..3fc52b621 100644
--- 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
index 5cfd1eafd..85da72f74 100644
--- 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
index 107f63255..29561cc23 100644
--- 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 {