Fix: System Theme - Prepare windows active border #445

black7375 · Jul 14, 2023 · d01bb7a · d01bb7a
1 parent f9ea650
commit d01bb7a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/__tests__/accent_color.test.scss b/__tests__/accent_color.test.scss
@@ -7,18 +7,21 @@
       @include output {
         @include AccentColor {
           body {
+            border-color: $accentBorder;
             background-color: $accentColor;
             color: $accentTextColor;
           }
         }
       }
       @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,26 +35,32 @@
         :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};
           }
         }
       }
       @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,18 +73,21 @@
       @include output {
         @include AccentColor("Highlight") {
           body {
+            border-color: $accentBorder;
             background-color: $accentColor;
             color: $accentTextColor;
           }
         }
       }
       @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;
           }

diff --git a/src/theme/system_default_theme/_win10.scss b/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
       }
     }
 

diff --git a/src/utils/_accent_color.scss b/src/utils/_accent_color.scss
@@ -4,13 +4,16 @@
 // https://github.com/mozilla/gecko-dev/commit/4c5f20179e8d3b963dc588efb9dc2c7b49e7bb31
 //
 // Need to hard coded #437
+$accentBorder: ActiveBorder;
 $accentColor: AccentColor;
 $accentTextColor: AccentColorText;
 
 @mixin AccentColor($mode: "-moz-accent-color") {
   @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;
 }