Add new theme variable for positive button focus state (#5217)

Author: pastelcyborg

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($color-focus-positive);
+    @include vf-focus($colors--theme--positive-focus);
   }
 }
 

scss/_settings_colors.scss

@@ -39,9 +39,9 @@ $color-link-visited-dark: #a679d2 !default;
 $color-focus-dark: #9cf !default;
 
 // Focus modifications to meet AA 3:1 contrast ratio against
-// button background for positive/negative buttons
+// button background for positive buttons
 $color-focus-positive: #003008 !default;
-$color-focus-negative: #3b0006 !default;
+$color-focus-positive-dark: #9cf !default;
 
 // Button background color changes
 $input-background-opacity-amount: 0.04;
@@ -93,6 +93,7 @@ $states: (
 // --link-default    - default link color
 // --link-visited    - visited link color
 // --focus           - focus highlight/outline color
+// --positive-focus  - focus highlight/outline color for positive buttons
 //
 // Background colors:
 // --background           - default background color
@@ -114,6 +115,7 @@ $colors--light-theme--text-inactive: rgba($color-x-dark, $inactive-text-opacity-
 $colors--light-theme--link-default: $color-link !default;
 $colors--light-theme--link-visited: $color-link-visited !default;
 $colors--light-theme--focus: $color-focus !default;
+$colors--light-theme--positive-focus: $color-focus-positive !default;
 
 $colors--light-theme--background-default: #fff !default;
 $colors--light-theme--background-alt: #f7f7f7 !default;
@@ -174,6 +176,7 @@ $colors--dark-theme--text-inactive: rgba($colors--dark-theme--text-default, $ina
 $colors--dark-theme--link-default: $color-link-dark !default;
 $colors--dark-theme--link-visited: $color-link-visited-dark !default;
 $colors--dark-theme--focus: $color-focus-dark !default;
+$colors--dark-theme--positive-focus: $color-focus-positive-dark !default;
 
 $colors--dark-theme--background-default: #262626 !default;
 $colors--dark-theme--background-alt: #202020 !default;
@@ -241,6 +244,7 @@ $colors--theme--text-inactive: var(--vf-color-text-inactive);
 $colors--theme--link-default: var(--vf-color-link-default);
 $colors--theme--link-visited: var(--vf-color-link-visited);
 $colors--theme--focus: var(--vf-color-focus);
+$colors--theme--positive-focus: var(--vf-color-positive-focus);
 
 $colors--theme--background-default: var(--vf-color-background-default);
 $colors--theme--background-alt: var(--vf-color-background-alt);
@@ -296,6 +300,7 @@ $colors--theme--button-negative-text: var(--vf-color-button-negative-text);
   --vf-color-link-default: #{$colors--light-theme--link-default};
   --vf-color-link-visited: #{$colors--light-theme--link-visited};
   --vf-color-focus: #{$colors--light-theme--focus};
+  --vf-color-positive-focus: #{$colors--light-theme--positive-focus};
 
   --vf-color-background-default: #{$colors--light-theme--background-default};
   --vf-color-background-alt: #{$colors--light-theme--background-alt};
@@ -351,6 +356,7 @@ $colors--theme--button-negative-text: var(--vf-color-button-negative-text);
   --vf-color-link-default: #{$colors--dark-theme--link-default};
   --vf-color-link-visited: #{$colors--dark-theme--link-visited};
   --vf-color-focus: #{$colors--dark-theme--focus};
+  --vf-color-positive-focus: #{$colors--dark-theme--positive-focus};
 
   --vf-color-background-default: #{$colors--dark-theme--background-default};
   --vf-color-background-alt: #{$colors--dark-theme--background-alt};