From 902b526c1fe0da01ad1f292647a8243ba91f4a0f Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 13 Aug 2023 19:54:34 +0900 Subject: [PATCH] Fix: Utils - Color Scheme, Native menu with mode #744 --- __tests__/color_scheme.test.scss | 85 +++++++++++++++++++++++++++++++- __tests__/mode.test.scss | 57 +++++++++++++++++++++ __tests__/native_menu.test.scss | 6 +-- __tests__/os.test.scss | 33 ++++++++++++- src/compatibility/_os.scss | 2 +- src/utils/_color_scheme.scss | 21 ++++++-- src/utils/_mode.scss | 17 +++++++ src/utils/_native_menu.scss | 5 +- src/utils/_os.scss | 21 ++++---- 9 files changed, 222 insertions(+), 25 deletions(-) create mode 100644 __tests__/mode.test.scss create mode 100644 src/utils/_mode.scss diff --git a/__tests__/color_scheme.test.scss b/__tests__/color_scheme.test.scss index 1555ab1..138082f 100644 --- a/__tests__/color_scheme.test.scss +++ b/__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 { diff --git a/__tests__/mode.test.scss b/__tests__/mode.test.scss new file mode 100644 index 0000000..2c0d1ca --- /dev/null +++ b/__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; + } + } + } +} diff --git a/__tests__/native_menu.test.scss b/__tests__/native_menu.test.scss index 71dd77b..92da459 100644 --- a/__tests__/native_menu.test.scss +++ b/__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 { diff --git a/__tests__/os.test.scss b/__tests__/os.test.scss index e42d95b..835ca58 100644 --- a/__tests__/os.test.scss +++ b/__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 + } + } + } } diff --git a/src/compatibility/_os.scss b/src/compatibility/_os.scss index 611359c..1acca2b 100644 --- a/src/compatibility/_os.scss +++ b/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;; diff --git a/src/utils/_color_scheme.scss b/src/utils/_color_scheme.scss index b271b53..0f792f4 100644 --- a/src/utils/_color_scheme.scss +++ b/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) { - @content; + @if mode.isESR() { + @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) { - @content; + @if mode.isESR() { + @media (-moz-toolbar-prefers-color-scheme: light), (prefers-color-scheme: light) { + @content; + } + } @else { + @media (prefers-color-scheme: light) { + @content; + } } } diff --git a/src/utils/_mode.scss b/src/utils/_mode.scss new file mode 100644 index 0000000..19e6d44 --- /dev/null +++ b/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; +} diff --git a/src/utils/_native_menu.scss b/src/utils/_native_menu.scss index e7dab8e..e0f5b5b 100644 --- a/src/utils/_native_menu.scss +++ b/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; diff --git a/src/utils/_os.scss b/src/utils/_os.scss index 45edcb5..e4a1dd5 100644 --- a/src/utils/_os.scss +++ b/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; + } + } +}