From 2cb29c4d26c573efab954e681539d16dcda5510e Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Mon, 21 Mar 2022 06:17:54 +0900
Subject: [PATCH] Add: SASS - Built in white, built in dark seletor

---
 __tests__/theme.test.scss | 98 +++++++++++++++++++++++++++++++++++++++
 src/utils/_theme.scss     | 22 +++++++++
 2 files changed, 120 insertions(+)
 create mode 100644 __tests__/theme.test.scss
 create mode 100644 src/utils/_theme.scss

diff --git a/__tests__/theme.test.scss b/__tests__/theme.test.scss
new file mode 100644
index 0000000..b430a8a
--- /dev/null
+++ b/__tests__/theme.test.scss
@@ -0,0 +1,98 @@
+@use 'true' as *;
+@use "example" as *;
+@use "sass:selector";
+@use "../src/utils/theme";
+
+@include test-module("Built-In Light Theme Selector [fn]") {
+  @include test("simple") {
+    @include assert {
+      @include output {
+        #{theme.built-in-light-theme()} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright]), :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] {
+          @include example_property;
+        }
+      }
+    }
+  }
+
+  @include test("append selector") {
+    @include assert {
+      @include output {
+        #{selector.append(theme.built-in-light-theme(), "[inFullscreen=true]")} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright])[inFullscreen=true], :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][inFullscreen=true] {
+          @include example_property;
+        }
+      }
+    }
+  }
+
+  @include test("nested selector") {
+    @include assert {
+      @include output {
+        #{selector.nest(theme.built-in-light-theme(), "#navigator-toolbox")} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright]) #navigator-toolbox, :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox {
+          @include example_property;
+        }
+      }
+    }
+  }
+}
+
+@include test-module("Built-In Dark Theme Selector [fn]") {
+  @include test("simple") {
+    @include assert {
+      @include output {
+        #{theme.built-in-dark-theme()} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root[lwtheme-mozlightdark][lwthemetextcolor=bright], :root[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-dark-theme(), "[inFullscreen=true]")} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root[lwtheme-mozlightdark][lwthemetextcolor=bright][inFullscreen=true], :root[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-dark-theme(), "#navigator-toolbox")} {
+          @include example_property;
+        }
+      }
+      @include expect {
+        :root[lwtheme-mozlightdark][lwthemetextcolor=bright] #navigator-toolbox, :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] #navigator-toolbox {
+          @include example_property;
+        }
+      }
+    }
+  }
+}
diff --git a/src/utils/_theme.scss b/src/utils/_theme.scss
new file mode 100644
index 0000000..3feb25d
--- /dev/null
+++ b/src/utils/_theme.scss
@@ -0,0 +1,22 @@
+@use "sass:selector";
+
+$_lightdark: "[lwtheme-mozlightdark]"; /* Legacy - FF v96 */
+$_lightText: '[lwthemetextcolor="bright"]';
+$_darkText:  ":not(#{$_lightText})";
+
+$_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-light-theme() {
+  $oldLight: selector.append(":root", $_lightdark, $_darkText);
+  $newLight: selector.append(":root", $_lightStyle);
+
+  @return "#{$oldLight}, #{$newLight}";
+}
+
+@function built-in-dark-theme() {
+  $oldDark: selector.append(":root", $_lightdark, $_lightText);
+  $newDark: selector.append(":root", $_darkStyle);
+
+  @return "#{$oldDark}, #{$newDark}";
+}