Fix: Utils - Color Scheme, Native menu with mode #744

__tests__/color_scheme.test.scss

@@ -1,8 +1,11 @@
 @use "true" as *;
 @use "example" as *;
 @use "../src/utils/color_scheme";
+@use "../src/utils/mode";
+
+@include test-module("Color scheme is dark - ESR [mix]") {
+  @include mode.ESR;
 
-@include test-module("Color scheme is dark [mix]") {
   @include test("simple") {
     @include assert {
       @include output {
@@ -38,7 +41,9 @@
   }
 }
 
-@include test-module("Color scheme is light [mix]") {
+@include test-module("Color scheme is light - ESR [mix]") {
+  @include mode.ESR;
+
   @include test("simple") {
     @include assert {
       @include output {
@@ -74,6 +79,82 @@
   }
 }
 
+@include test-module("Color scheme is dark - Standard [mix]") {
+  @include mode.STANDARD;
+
+  @include test("simple") {
+    @include assert {
+      @include output {
+        @include color_scheme.Dark {
+          @include example;
+        }
+      }
+      @include expect {
+        @media (prefers-color-scheme: dark) {
+          @include example;
+        }
+      }
+    }
+  }
+
+  @include test("simple reversed") {
+    @include assert {
+      @include output {
+        @include example_tag {
+          @include color_scheme.Dark {
+            @include example_property;
+          }
+        }
+      }
+      @include expect {
+        @media (prefers-color-scheme: dark) {
+          @include example_tag {
+            @include example_property;
+          }
+        }
+      }
+    }
+  }
+}
+
+@include test-module("Color scheme is light - Standard [mix]") {
+  @include mode.STANDARD;
+
+  @include test("simple") {
+    @include assert {
+      @include output {
+        @include color_scheme.Light {
+          @include example;
+        }
+      }
+      @include expect {
+        @media (prefers-color-scheme: light) {
+          @include example;
+        }
+      }
+    }
+  }
+
+  @include test("simple reversed") {
+    @include assert {
+      @include output {
+        @include example_tag {
+          @media (prefers-color-scheme: light) {
+            @include example_property;
+          }
+        }
+      }
+      @include expect {
+        @media (prefers-color-scheme: light) {
+          @include example_tag {
+            @include example_property;
+          }
+        }
+      }
+    }
+  }
+}
+
 @include test-module("Color contrast [mix]") {
   @include test("simple") {
     @include assert {

__tests__/mode.test.scss

@@ -0,0 +1,57 @@
+@use "true" as *;
+@use "example" as *;
+@use "../src/utils/mode";
+
+@include test-module("ESR Mode [mix]") {
+  @include mode.ESR;
+
+  @include test("simple") {
+    @include assert {
+      @include output {
+        @if mode.isESR() {
+          @include example;
+        }
+      }
+      @include expect {
+        @include example;
+      }
+    }
+    @include assert {
+      @include output {
+        @if mode.isSTANDARD() {
+          @include example;
+        }
+      }
+      @include expect {
+        // IGNORE
+      }
+    }
+  }
+}
+
+@include test-module("STANDARD Mode [mix]") {
+  @include mode.STANDARD;
+
+  @include test("simple") {
+    @include assert {
+      @include output {
+        @if mode.isESR() {
+          @include example;
+        }
+      }
+      @include expect {
+        // IGNORE
+      }
+    }
+    @include assert {
+      @include output {
+        @if mode.isSTANDARD() {
+          @include example;
+        }
+      }
+      @include expect {
+        @include example;
+      }
+    }
+  }
+}

__tests__/native_menu.test.scss

@@ -1,10 +1,10 @@
 @use "true" as *;
 @use "example" as *;
 @use "../src/utils/native_menu";
-@use "../src/utils/os" as OS;
+@use "../src/utils/mode";
 
 @include test-module("Native Menu Option - ESR [mix]") {
-  @include OS.ESR-MODE;
+  @include mode.ESR;
 
   @include test("simple") {
     @include assert {
@@ -136,7 +136,7 @@
 }
 
 @include test-module("Native Menu Option - Standard [mix]") {
-  @include OS.STANDARD-MODE;
+  @include mode.STANDARD;
 
   @include test("simple") {
     @include assert {

__tests__/os.test.scss

@@ -1,9 +1,10 @@
 @use "true" as *;
 @use "example" as *;
 @use "../src/utils/os" as *;
+@use "../src/utils/mode";
 
 @include test-module("Create OS related media - ESR [mix]") {
-  @include ESR-MODE;
+  @include mode.ESR;
 
   @include test("win7") {
     @include assert {
@@ -145,10 +146,25 @@
       }
     }
   }
+
+  @include test("windows classic theme") {
+    @include assert {
+      @include output {
+        @include WinClassic {
+          @include example;
+        }
+      }
+      @include expect {
+        @media (-moz-windows-classic) {
+          @include example;
+        }
+      }
+    }
+  }
 }
 
 @include test-module("Create OS related media - Standard [mix]") {
-  @include STANDARD-MODE;
+  @include mode.STANDARD;
 
   @include test("win7") {
     @include assert {
@@ -287,4 +303,17 @@
       }
     }
   }
+
+  @include test("windows classic theme") {
+    @include assert {
+      @include output {
+        @include WinClassic {
+          @include example;
+        }
+      }
+      @include expect {
+        // IGNORE
+      }
+    }
+  }
 }

src/compatibility/_os.scss

@@ -253,7 +253,7 @@ $_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5);
 // https://github.com/mozilla/gecko-dev/blob/4334cb91a3762ac497c50a1c7b86b8004690229e/browser/themes/windows/browser.css#L164-L174
 // https://github.com/mozilla/gecko-dev/blob/4334cb91a3762ac497c50a1c7b86b8004690229e/browser/themes/windows/browser-aero.css#L71-L81
 @include OS($win) {
-  @media (-moz-windows-classic) {
+  @include WinClassic {
     :root[tabsintitlebar][sizemode="normal"]:not(:-moz-lwtheme) #navigator-toolbox {
       appearance: auto !important;
       -moz-default-appearance: -moz-window-titlebar !important;;

src/utils/_color_scheme.scss

@@ -1,13 +1,26 @@
+@use "mode";
 // -moz-toolbar-prefers-color-scheme is removed at v95, #250
 
 @mixin Dark() {
-  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+  @if mode.isESR() {
-    @content;
+    @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+      @content;
+    }
+  } @else {
+    @media (prefers-color-scheme: dark) {
+      @content;
+    }
   }
 }
 @mixin Light() {
-  @media (-moz-toolbar-prefers-color-scheme: light), (prefers-color-scheme: light) {
+  @if mode.isESR() {
-    @content;
+    @media (-moz-toolbar-prefers-color-scheme: light), (prefers-color-scheme: light) {
+      @content;
+    }
+  } @else {
+    @media (prefers-color-scheme: light) {
+      @content;
+    }
   }
 }
 

src/utils/_mode.scss

@@ -0,0 +1,17 @@
+$_osESR: false !default;
+
+@mixin ESR() {
+  $_osESR: true !global;
+}
+
+@mixin STANDARD() {
+  $_osESR: false !global;
+}
+
+@function isESR() {
+  @return $_osESR;
+}
+
+@function isSTANDARD() {
+  @return not $_osESR;
+}

src/utils/_native_menu.scss

@@ -1,3 +1,4 @@
+@use "mode";
 @use "option" as *;
 @use "os" as *;
 
@@ -48,7 +49,7 @@
 }
 
 @mixin WinNativeMenu($win-media: false) {
-  @if $osESR {
+  @if mode.isESR() {
     @media not (-moz-windows-non-native-menus) {
       @include _WinMedia($win-media) {
         @content;
@@ -58,7 +59,7 @@
 }
 
 @mixin WinNonNativeMenu($win-media: false) {
-  @if $osESR {
+  @if mode.isESR() {
     @media (-moz-windows-non-native-menus) {
       @include _WinMedia($win-media) {
         @content;

src/utils/_os.scss

@@ -2,6 +2,7 @@
 @use "sass:map";
 @use "list" as list-utils;
 @use "media";
+@use "mode";
 
 //== Args ======================================================================
 $win:    "win";
@@ -55,19 +56,9 @@ $_os-media: map.merge(
 );
 
 //== Mixin =====================================================================
-$osESR: false !default;
-
-@mixin ESR-MODE() {
-  $osESR: true !global;
-}
-
-@mixin STANDARD-MODE() {
-  $osESR: false !global;
-}
-
 @mixin OS($osNames...) {
   $_os-media: $_os-media; // as local
-  @if not $osESR {
+  @if mode.isSTANDARD() {
     $osNames: list-utils.remove-list($osNames, ($win7 $win8));
     $_os-media: map.set($_os-media, $win10, $_moz-platform-windows);
     $_os-media: map.set($_os-media, $win, $_moz-platform-windows);
@@ -91,3 +82,11 @@ $osESR: false !default;
     }
   }
 }
+
+@mixin WinClassic() {
+  @if mode.isESR() {
+    @media (-moz-windows-classic) {
+      @content;
+    }
+  }
+}