mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2026-01-30 04:10:32 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add: SASS - Built in white, built in dark seletor

Browse source
This commit is contained in:
alstjr7375 2022-03-21 06:17:54 +09:00
parent 89cb286d33
commit 2cb29c4d26
2 changed files with 120 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

98
__tests__/theme.test.scss Normal file
View file

@ -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;
}
}
}
}
}

22
src/utils/_theme.scss Normal file
View file

@ -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}";
}