From 6e652bea49e240d7f67ffd5bf23dfc55092fc48f Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Tue, 22 Mar 2022 05:03:44 +0900
Subject: [PATCH] Add: SASS - default theme mixins

---
 __tests__/theme.test.scss | 94 +++++++++++++++++++++++++++++++++++++++
 src/utils/_theme.scss     | 19 +++++++-
 2 files changed, 112 insertions(+), 1 deletion(-)

diff --git a/__tests__/theme.test.scss b/__tests__/theme.test.scss
index b430a8a..579e536 100644
--- a/__tests__/theme.test.scss
+++ b/__tests__/theme.test.scss
@@ -3,6 +3,100 @@
 @use "sass:selector";
 @use "../src/utils/theme";
 
+@include test-module("System Default Theme Selector [fn]") {
+  @include test("simple") {
+    @include assert {
+      @include output {
+        #{theme.system-default-theme()} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root:not(:-moz-lwtheme), :root[lwt-default-theme-in-dark-mode] {
+          @include example_property;
+        }
+      }
+    }
+  }
+
+  @include test("append selector") {
+    @include assert {
+      @include output {
+        #{selector.append(theme.system-default-theme(), "[inFullscreen=true]")} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root:not(:-moz-lwtheme)[inFullscreen=true], :root[lwt-default-theme-in-dark-mode][inFullscreen=true] {
+          @include example_property;
+        }
+      }
+    }
+  }
+
+  @include test("nested selector") {
+    @include assert {
+      @include output {
+        #{selector.nest(theme.system-default-theme(), "#navigator-toolbox")} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root:not(:-moz-lwtheme) #navigator-toolbox, :root[lwt-default-theme-in-dark-mode] #navigator-toolbox {
+          @include example_property;
+        }
+      }
+    }
+  }
+}
+
+@include test-module("Built-In Default Theme Selector [fn]") {
+  @include test("simple") {
+    @include assert {
+      @include output {
+        #{theme.built-in-default-theme()} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root[lwtheme-mozlightdark], :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) {
+          @include example_property;
+        }
+      }
+    }
+  }
+
+  @include test("append selector") {
+    @include assert {
+      @include output {
+        #{selector.append(theme.built-in-default-theme(), "[inFullscreen=true]")} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root[lwtheme-mozlightdark][inFullscreen=true], :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])[inFullscreen=true] {
+          @include example_property;
+        }
+      }
+    }
+  }
+
+  @include test("nested selector") {
+    @include assert {
+      @include output {
+        #{selector.nest(theme.built-in-default-theme(), "#navigator-toolbox")} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root[lwtheme-mozlightdark] #navigator-toolbox, :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #navigator-toolbox {
+          @include example_property;
+        }
+      }
+    }
+  }
+}
+
 @include test-module("Built-In Light Theme Selector [fn]") {
   @include test("simple") {
     @include assert {
diff --git a/src/utils/_theme.scss b/src/utils/_theme.scss
index 3feb25d..908c5d2 100644
--- a/src/utils/_theme.scss
+++ b/src/utils/_theme.scss
@@ -1,12 +1,29 @@
 @use "sass:selector";
 
-$_lightdark: "[lwtheme-mozlightdark]"; /* Legacy - FF v96 */
+$_lwTheme: ":-moz-lwtheme";
+
+$_lightdark: "[lwtheme-mozlightdark]"; // Legacy - FF v96
 $_lightText: '[lwthemetextcolor="bright"]';
 $_darkText:  ":not(#{$_lightText})";
 
+$_sysDark: "[lwt-default-theme-in-dark-mode]";
 $_lightStyle: '[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"]';
 $_darkStyle: '[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]';
 
+@function built-in-default-theme() {
+  $oldDefault: selector.append(":root", $_lightdark);
+  $newDefault: selector.append(":root", ":is(#{$_lightStyle}, #{$_darkStyle})");
+
+  @return "#{$oldDefault}, #{$newDefault}";
+}
+
+@function system-default-theme() {
+  $sysLight: selector.append(":root", ":not(#{$_lwTheme})");
+  $sysDark: selector.append(":root", $_sysDark);
+
+  @return "#{$sysLight}, #{$sysDark}";
+}
+
 @function built-in-light-theme() {
   $oldLight: selector.append(":root", $_lightdark, $_darkText);
   $newLight: selector.append(":root", $_lightStyle);