Fix: System Theme - Prepare windows active border #445

__tests__/accent_color.test.scss

@@ -7,6 +7,7 @@
       @include output {
         @include AccentColor {
           body {
+            border-color: $accentBorder;
             background-color: $accentColor;
             color: $accentTextColor;
           }
@@ -14,11 +15,13 @@
       }
       @include expect {
         body {
+          border-color: ActiveBorder;
           background-color: AccentColor;
           color: AccentColorText;
         }
         @supports -moz-bool-pref("userChrome.compatibility.accent_color") {
           body {
+            border-color: -moz-accent-color;
             background-color: -moz-accent-color;
             color: -moz-accent-color-foreground;
           }
@@ -32,10 +35,12 @@
         :root {
           @include AccentColor {
             // Don't use like this!!
+            --uc-accent-border: $accentBorder;
             --uc-accent-color: $accentColor;
             --uc-accent-text-color: $accentTextColor;
 
             // Use like this
+            --uc-accent-border: #{$accentBorder};
             --uc-accent-color: #{$accentColor};
             --uc-accent-text-color: #{$accentTextColor};
           }
@@ -43,15 +48,19 @@
       }
       @include expect {
         :root {
+          --uc-accent-border: $accentBorder;
           --uc-accent-color: $accentColor;
           --uc-accent-text-color: $accentTextColor;
+          --uc-accent-border: ActiveBorder;
           --uc-accent-color: AccentColor;
           --uc-accent-text-color: AccentColorText;
         }
         @supports -moz-bool-pref("userChrome.compatibility.accent_color") {
           :root {
+            --uc-accent-border: $accentBorder;
             --uc-accent-color: $accentColor;
             --uc-accent-text-color: $accentTextColor;
+            --uc-accent-border: -moz-accent-color;
             --uc-accent-color: -moz-accent-color;
             --uc-accent-text-color: -moz-accent-color-foreground;
           }
@@ -64,6 +73,7 @@
       @include output {
         @include AccentColor("Highlight") {
           body {
+            border-color: $accentBorder;
             background-color: $accentColor;
             color: $accentTextColor;
           }
@@ -71,11 +81,13 @@
       }
       @include expect {
         body {
+          border-color: ActiveBorder;
           background-color: AccentColor;
           color: AccentColorText;
         }
         @supports -moz-bool-pref("userChrome.compatibility.accent_color") {
           body {
+            border-color: -moz-accent-color;
             background-color: Highlight;
             color: HighlightText;
           }

src/theme/system_default_theme/_win10.scss

@@ -320,7 +320,7 @@
     .titlebar-color {
       @include AccentColor {
         color: $accentTextColor;
-        background-color: $accentColor;
+        background-color: $accentColor; // TODO: Use $accentBorder
       }
     }
 

src/utils/_accent_color.scss

@@ -4,6 +4,7 @@
 // https://github.com/mozilla/gecko-dev/commit/4c5f20179e8d3b963dc588efb9dc2c7b49e7bb31
 //
 // Need to hard coded #437
+$accentBorder: ActiveBorder;
 $accentColor: AccentColor;
 $accentTextColor: AccentColorText;
 
@@ -11,6 +12,8 @@ $accentTextColor: AccentColorText;
   @content;
 
   @include Option("userChrome.compatibility.accent_color") {
+    $accentBorder: -moz-accent-color !global;
+
     @if $mode == "Highlight" {
       $accentColor: Highlight !global;
       $accentTextColor: HighlightText !global;
@@ -22,6 +25,7 @@ $accentTextColor: AccentColorText;
 
     @content;
   }
+  $accentBorder: ActiveBorder !global;
   $accentColor: AccentColor !global;
   $accentTextColor: AccentColorText !global;
 }