docs: CREDITS update

.github/workflows/release.yml

@@ -42,14 +42,14 @@ jobs:
           - mode: "STANDARD"
             name: "Lepton-Proton-Style"
             branch: "proton-style"
-          - mode: "ESR"
-            name: "ESR-Lepton"
+          - mode: "LegacyV117"
+            name: "LegacyV117-Lepton"
             branch: "master"
-          - mode: "ESR"
-            name: "ESR-Lepton-Photon-Style"
+          - mode: "LegacyV117"
+            name: "LegacyV117-Lepton-Photon-Style"
             branch: "photon-style"
-          - mode: "ESR"
-            name: "ESR-Lepton-Proton-Style"
+          - mode: "LegacyV117"
+            name: "LegacyV117-Lepton-Proton-Style"
             branch: "proton-style"
     steps:
       - uses: actions/checkout@v4
@@ -75,8 +75,8 @@ jobs:
           rm css/leptonChromeESR.css
           rm css/leptonContentESR.css
 
-      - name: Processing for ESR
-        if: matrix.mode == 'ESR'
+      - name: Processing for LegacyV117
+        if: matrix.mode == 'LegacyV117'
         run: |
           sed -i "s/\.css/ESR\.css/g" userChrome.css
           sed -i "s/\.css/ESR\.css/g" userContent.css

CREDITS

@@ -38,6 +38,9 @@ N: Alex Besogonov
 E: Alex.Besogonov@gmail.com
 W: https://github.com/Cyberax
 
+N: aslam karachiwala 
+W: https://github.com/akwala
+
 N: AuRiMaS666
 W: https://github.com/AuRiMaS666
 
@@ -68,6 +71,9 @@ W: https://github.com/engelju
 N: kanlukasz
 W: https://github.com/kanlukasz
 
+N: Kevin Ernst
+W: https://github.com/ernstki
+
 N: Mike-Kennelly
 W: https://github.com/Mike-Kennelly
 
@@ -146,6 +152,9 @@ N: Filip Š
 E: filip.stamcar@hotmail.com
 W: https://www.filips.si/
 
+N: hdk5
+W: https://github.com/hdk5
+
 N: hellojaccc
 E: kim@taekyeong.me
 W: https://github.com/hellojaccc
@@ -171,6 +180,9 @@ N: menndouyukkuri
 E: menndoukusagari@gmail.com
 W: https://github.com/menndouyukkuri
 
+N: mid-kid 
+W: https://github.com/mid-kid
+
 N: Mizuki
 W: https://github.com/MagicalDrizzle
 
@@ -219,6 +231,9 @@ N: sean z
 E: ean@vsxd.com
 W: https://vsxd.com/
 
+N: Seth Kinast
+W: https://github.com/sethkinast
+
 N: Sylvain
 E: B00ze64@hotmail.com
 W: https://github.com/B00ze64

README.org

@@ -214,11 +214,13 @@ Thanks to all sponsors & contributors to this project for providing help and dev
 [[https://github.com/Ygg01][@@html:<img width="60" height="60" src="https://avatars.githubusercontent.com/u/1146204?s=60&v=4"/>@@]]
 [[https://github.com/engelju][@@html:<img width="60" height="60" src="https://avatars.githubusercontent.com/u/2188152?s=60&v=4"/>@@]]
 [[https://github.com/xrstf][@@html:<img width="60" height="60" src="https://avatars.githubusercontent.com/u/127499?s=60&v=4"/>@@]]
+[[https://github.com/akwala][@@html:<img width="60" height="60" src="https://avatars.githubusercontent.com/u/1786?s=60&v=4"/>@@]]
 
 - A donation was received on [[https://ko-fi.com/black7375][Ko-Fi]]
   - [[https://ko-fi.com/home/coffeeshop?txid=97e5fa0d-c73e-4308-a2fd-6b44b08cd828][Safira]]
   - [[https://ko-fi.com/duncanyoyo1][duncanyoyo1]]
   - [[https://ko-fi.com/home/coffeeshop?txid=a84c4838-f0e8-45b4-8b61-46684697e9b2][Minithra]]
+  - [[https://github.com/black7375/Firefox-UI-Fix/issues/1095#issuecomment-3682151859][Kevin Ernst]]
 - Private sponsors: 5
 
 *Contributors*

__tests__/theme.test.scss

@@ -59,7 +59,7 @@
         }
       }
       @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);"]) {
+        :root[lwtheme-mozlightdark], :root:is(:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme=light]), :is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme=dark])) {
           @include example_property;
         }
       }
@@ -74,7 +74,7 @@
         }
       }
       @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] {
+        :root[lwtheme-mozlightdark][inFullscreen=true], :root:is(:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme=light]), :is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme=dark]))[inFullscreen=true] {
           @include example_property;
         }
       }
@@ -89,7 +89,7 @@
         }
       }
       @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 {
+        :root[lwtheme-mozlightdark] #navigator-toolbox, :root:is(:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme=light]), :is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme=dark])) #navigator-toolbox {
           @include example_property;
         }
       }
@@ -106,7 +106,7 @@
         }
       }
       @include expect {
-        :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright]), :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] {
+        :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright]), :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme=light]) {
           @include example_property;
         }
       }
@@ -121,7 +121,7 @@
         }
       }
       @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] {
+        :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright])[inFullscreen=true], :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme=light])[inFullscreen=true] {
           @include example_property;
         }
       }
@@ -136,7 +136,7 @@
         }
       }
       @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 {
+        :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright]) #navigator-toolbox, :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme=light]) #navigator-toolbox {
           @include example_property;
         }
       }
@@ -153,7 +153,7 @@
         }
       }
       @include expect {
-        :root[lwtheme-mozlightdark][lwthemetextcolor=bright], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] {
+        :root[lwtheme-mozlightdark][lwthemetextcolor=bright], :root:is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme=dark]) {
           @include example_property;
         }
       }
@@ -168,7 +168,7 @@
         }
       }
       @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] {
+        :root[lwtheme-mozlightdark][lwthemetextcolor=bright][inFullscreen=true], :root:is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme=dark])[inFullscreen=true] {
           @include example_property;
         }
       }
@@ -183,7 +183,7 @@
         }
       }
       @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 {
+        :root[lwtheme-mozlightdark][lwthemetextcolor=bright] #navigator-toolbox, :root:is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme=dark]) #navigator-toolbox {
           @include example_property;
         }
       }

css/leptonContent.css

@@ -3439,6 +3439,9 @@
         .menu-icon {
           display: unset !important;
         }
+        #main-menubar > menu > .menu-icon {
+          display: none !important;
+        }
         /* Contextmenu Checkbox Unset */
         menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menuitem[type="checkbox"] {
           margin-inline: 0 !important;
@@ -7293,6 +7296,9 @@
       .menu-icon {
         display: unset !important;
       }
+      #main-menubar > menu > .menu-icon {
+        display: none !important;
+      }
       /* Contextmenu Checkbox Unset */
       menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menuitem[type="checkbox"] {
         margin-inline: 0 !important;

css/leptonContentESR.css

@@ -3578,6 +3578,9 @@
         .menu-icon {
           display: unset !important;
         }
+        #main-menubar > menu > .menu-icon {
+          display: none !important;
+        }
         /* Contextmenu Checkbox Unset */
         menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menuitem[type="checkbox"] {
           margin-inline: 0 !important;

install.sh

@@ -345,6 +345,7 @@ firefoxProfileDirPaths=(
   "${HOME}/.local/opt/tor-browser/app/Browser/TorBrowser/Data/Browser"
   "${HOME}/.var/app/org.mozilla.firefox/.mozilla/firefox"
   "${HOME}/.var/app/io.gitlab.librewolf-community/.librewolf"
+  "${HOME}/.var/app/net.waterfox.waterfox/.waterfox"
   "${HOME}/snap/firefox/common/.mozilla/firefox"
   "${HOME}/Library/Application Support/Firefox"
   "${HOME}/Library/Application Support/Waterfox"

src/compatibility/_os.scss

@@ -248,6 +248,7 @@ $_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5);
       -moz-default-appearance:-moz-window-titlebar !important;;
     }
 
+    :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-lwtheme) #pinned-tabs-container,
     :root:is([tabsintitlebar], [customtitlebar]):not(:-moz-lwtheme) #tabbrowser-arrowscrollbox {
       color: -moz-dialogtext !important;
     }

src/icons/_panel.scss

@@ -609,6 +609,30 @@ panelMenuBookmarkThisPage[starred] {
   );
 }
 
+/*= sidebar-context-menu =====================================================*/
+#sidebar-context-menu-manage-extension {  
+  --menuitem-image: url("chrome://global/skin/icons/settings.svg");
+}
+#sidebar-context-menu-remove-extension {
+  --menuitem-image: url("chrome://global/skin/icons/delete.svg");
+}
+#sidebar-context-menu-report-extension {
+  --menuitem-image: url("../icons/send.svg");
+}
+
+#sidebar-context-menu-unpin-extension {
+  --menuitem-image: url("../icons/unpin-tab.svg");
+}
+#sidebar-context-menu-hide-sidebar {
+  --menuitem-image: url("../icons/eye-hide.svg");
+}
+#sidebar-context-menu-customize-sidebar {
+  --menuitem-image: url("chrome://browser/skin/customize.svg");
+}
+#sidebar-context-menu-enable-vertical-tabs {
+  --menuitem-image: url("chrome://browser/skin/sidebar-collapsed.svg");
+}
+
 /*= chrome://browser/content/syncedtabs/sidebar.xhtml ========================*/
 .item.client[clientType=phone] > .item-title-container > .item-icon-container {
   background-image: url("../icons/device-phone.svg") !important;

src/icons/context_menu/_tab_toolbar.scss

@@ -218,6 +218,13 @@
   --menuitem-image: url("../icons/undo.svg");
 }
 
+#toolbar-context-customize-sidebar {
+  --menuitem-image: url("chrome://browser/skin/customize.svg");
+}
+#toolbar-context-toggle-vertical-tabs {
+  --menuitem-image: url("chrome://browser/skin/sidebar-collapsed.svg");
+}
+
 #toggle_toolbar-menubar {
   /* checkbox */
   --menuitem-image: url("../icons/calendar-agenda.svg");

src/icons/layout/_bookmark_menu.scss

@@ -17,8 +17,8 @@ menupopup menupopup[emptyplacesresult] .menu-text,
 
 //-- Mixin ---------------------------------------------------------------------
 // Items
-$_bookmarkMenuitem: "menuitem:not(.menuitem-iconic, [disabled=\"true\"])";
-$_bookmarkMenu: "menu:not(.menu-iconic)";
+$_bookmarkMenuitem: "menuitem:not(.menuitem-iconic, [disabled=\"true\"]):not(:has(.menu-icon[aria-hidden=\"true\"]))";
+$_bookmarkMenu: "menu:not(.menu-iconic):not(:has(.menu-icon[aria-hidden=\"true\"]))";
 
 // Components
 $_bookmarkPopup: "menupopup:is(#BMB_bookmarksPopup)[placespopup=\"true\"]";

src/icons/layout/_menu.scss

@@ -102,6 +102,11 @@ $_layoutCommonMenus: (
     @include _layout_root_non_native;
     @include _layoutIconMenus {
       @include _layout_init_non_native();
+
+      // FF v141 #1128
+      > .menu-icon {
+        display: none !important;
+      }
     }
 
     // FF v121

src/icons/layout/_menu_common.scss

@@ -12,7 +12,7 @@ $_checkMenu: ":not([type=\"checkbox\"][checked=\"true\"], [type=\"radio\"])";
 $_nestedPopup: "> menupopup:not(.in-menulist) >";
 $_nestedPopupIcon: ":not(menu, #ContentSelectDropdown) #{$_nestedPopup}";
 $_nestedPopupPadding: ":not(menu, #ContentSelectDropdown, #context-navigation) #{$_nestedPopup}";
-$_iconMenuPopup: "menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, #usercssloader-menupopup)";
+$_iconMenuPopup: "menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ProfilesPopup, #menu_ToolsPopup, #windowPopup, #menu_HelpPopup, #usercssloader-menupopup, #sidebar-context-menu)";
 
 $_nestedPopupIconMenus: selector.nest(
   $_nestedPopupIcon,
@@ -195,6 +195,9 @@ $_initialMenus: $_initialMenus + "," +
   .menu-icon {
     display: unset !important;
   }
+  #main-menubar > menu > .menu-icon {
+    display: none !important;
+  }
 }
 @mixin _layout_init_linux() {
   padding-inline-start: 3px;

src/padding/_index.scss

@@ -50,13 +50,16 @@
   }
 }
 @include Option("userChrome.padding.urlView_expanding", "userChrome.urlView.as_commandbar") {
-  #urlbar[breakout][breakout-extend] {
-    top: calc((var(--urlbar-toolbar-height, var(--urlbar-container-height)) - var(--urlbar-height)) / 2) !important;
-    left: 0 !important;
-    width: 100% !important;
+  /* .browser-titlebar is Vertical Tabbar */
+  #nav-bar:not(.browser-titlebar) #urlbar[breakout][breakout-extend] {
+    top: calc(var(--urlbar-container-height) * 2 - var(--urlbar-height)) !important;
+    width: var(--urlbar-width) !important;
+    position: relative !important;
+    margin: 0 !important;
   }
 
-  #urlbar[breakout][breakout-extend] > #urlbar-input-container {
+  #urlbar[breakout][breakout-extend] > #urlbar-input-container,
+  #urlbar[breakout][breakout-extend] > .urlbar-input-container  {
     height: var(--urlbar-height) !important;
     padding-block: 0 !important;
     padding-inline: var(--urlbar-container-padding, 0px) !important;

src/padding/_tabbar_height.scss

@@ -62,12 +62,17 @@
   }
 
   @include NotOption("userChrome.tabbar.multi_row") {
+    :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #pinned-tabs-container,
+    #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"],
+    #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack,
+    #TabsToolbar:not([multibar]) #pinned-tabs-container[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content,
     :root:not([uidensity="compact"]) #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox,
     #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"],
     #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack,
     #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content {
       max-height: var(--tab-min-height) !important; /* Force apply height */
     }
+    :root[uidensity="compact"] #TabsToolbar:not([multibar]) #pinned-tabs-container,
     :root[uidensity="compact"] #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox {
       height: var(--tab-min-height) !important;
     }
@@ -75,6 +80,7 @@
 }
 
 /* Scroll Button - Size Fix */
+:root #pinned-tabs-container,
 :root #tabbrowser-arrowscrollbox {
   --scrollbtn-vertical-padding: 3px;
   --scrollbtn-vertical-border: 2px;

src/padding/_tabbar_width.scss

@@ -60,6 +60,7 @@
   }
 }
 
+:root:not([uidensity="touch"]) #pinned-tabs-container,
 :root:not([uidensity="touch"]) #tabbrowser-arrowscrollbox {
   --scrollbtn-inner-padding: 1px;
   --scrollbtn-outer-padding: 3px;
@@ -93,6 +94,9 @@
 .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
   max-width: var(--tab-max-width) !important; /* Original: 225px */
 
+  #tabbrowser-tabs[orient="vertical"][expanded] & {
+    max-width: none !important;
+  }
   #tabbrowser-tabs[orient="horizontal"] tab-group[collapsed] > & {
     min-width: 0 !important;
     max-width: 0 !important;
@@ -104,6 +108,8 @@
 
 /* neighbouring tabs should "pinch" together */
 :root[customizing="true"] #tabbrowser-arrowscrollbox-periphery,
+#tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"])
+  > #pinned-tabs-container > #tabbrowser-arrowscrollbox-periphery,
 #tabbrowser-tabs:not([hasadjacentnewtabbutton]):not([overflow="true"])
   > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery {
   min-width: 3px; // With Panorama Tab Groups #643 #846

src/rounding/_square.scss

@@ -1,11 +1,16 @@
 @include Option("userChrome.rounding.square_tab") {
   :root {
-    --tab-border-radius: 0 !important; /* Original: 4px */
+    --tab-border-radius: 0px !important; /* Original: 4px */
+  }
+}
+@include NotOption("userChrome.rounding.square_tab") {
+  :root {
+    --tab-border-radius: 4px !important; /* Original: 4px */
   }
 }
 @include Option("userChrome.rounding.square_button") {
   :root {
-    --urlbar-icon-border-radius: 0 !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */
+    --urlbar-icon-border-radius: 0px !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */
   }
 
   .toolbarbutton-1,
@@ -17,7 +22,7 @@
   .urlbarView-action,
   toolbarbutton.bookmark-item:not(.subviewbutton),
   #sidebar-switcher-target {
-    --toolbarbutton-border-radius: 0;  /* Original: 4px */
+    --toolbarbutton-border-radius: 0px;  /* Original: 4px */
   }
 
   button,
@@ -27,7 +32,7 @@
   findbar toolbarbutton,
   .notification-button,
   #main-menubar > menu {
-    border-radius: 0 !important;
+    border-radius: 0px !important;
   }
 }
 @include Option("userChrome.rounding.square_tab", "userChrome.rounding.square_button") {
@@ -40,13 +45,13 @@
 
 @include Option("userChrome.rounding.square_panel") {
   :root {
-    --arrowpanel-border-radius: 0 !important;
+    --arrowpanel-border-radius: 0px !important;
   }
 }
 @include Option("userChrome.rounding.square_panelitem") {
   :root {
-    --arrowpanel-menuitem-border-radius: 0 !important;
-    --subviewbutton-border-radius: 0 !important;
+    --arrowpanel-menuitem-border-radius: 0px !important;
+    --subviewbutton-border-radius: 0px !important;
   }
 }
 
@@ -61,19 +66,19 @@
   xul|menulist > xul|menupopup xul|menu,
   xul|menulist > xul|menupopup xul|menuitem,
   .customization-uidensity-menuitem {
-    border-radius: 0 !important;
+    border-radius: 0px !important;
   }
 }
 
 @include Option("userChrome.rounding.square_infobox") {
   #sanitizeEverythingWarningBox {
-    border-radius: 0 !important;
+    border-radius: 0px !important;
   }
 }
 
 @include Option("userChrome.rounding.square_toolbar") {
   :root {
-    --uc-rounding-toolbar: 0;
+    --uc-rounding-toolbar: 0px;
   }
 
   .container.infobar,
@@ -100,20 +105,20 @@
   #urlbar-input-container,
   #urlbar-background,
   #searchbar {
-    --toolbarbutton-border-radius: 0;
+    --toolbarbutton-border-radius: 0px;
   }
 }
 
 @include Option("userChrome.rounding.square_urlView_item") {
   .urlbarView-row, // At FF v111 #668
   .urlbarView-row-inner {
-    --toolbarbutton-border-radius: 0;
+    --toolbarbutton-border-radius: 0px;
   }
 }
 
 @include Option("userChrome.rounding.square_checklabel") {
   input[type="checkbox"],
   .checkbox-check {
-    border-radius: 0 !important;
+    border-radius: 0px !important;
   }
 }

src/tab/_connect_to_window.scss

@@ -1,3 +1,17 @@
+#TabsToolbar {
+  #tabbrowser-tabs:not([orient="vertical"]) {
+    max-height: var(--tab-min-height);
+  }
+  #tabbrowser-tabs:not([orient="vertical"])[movingtab] {
+    padding-bottom: unset !important;
+    margin-bottom: unset !important;
+  }
+
+  &[multibar] #tabbrowser-tabs:not([orient="vertical"]) {
+    max-height: var(--tab-min-height_mlt);
+  }
+}
+
 #tabbrowser-tabs:not([orient="vertical"]) {
   min-height: unset !important; /* Original: var(--tabstrip-min-height) */
 
@@ -34,6 +48,7 @@
 }
 
 /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */
+#tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned],
 #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
   z-index: 0 !important;
 

src/tab/_container_tab.scss

@@ -35,11 +35,12 @@
   display: block;
   position: absolute;
   top: 50%;
+  left: var(--tab-inline-padding);
   transform: translate(var(--uc-container-position-x), var(--uc-container-position-y));
 
   /* Shape */
   border-bottom: 2px solid var(--identity-icon-color);
-  width: calc(100% - 30px);
+  width: calc(100% - (var(--tab-inline-padding) + var(--tab-inner-inline-margin)) * 2);
   opacity: 0.75;
 }
 .tabbrowser-tab[visuallyselected] .tab-content::before {
@@ -51,7 +52,7 @@
     width: 25%;
   }
   .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
-    width: calc(100% - 30px);
+    width: calc(100% - (var(--tab-inline-padding) + var(--tab-inner-inline-margin)) * 2);
   }
   #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before {
     width: calc(100% - 33px);
@@ -67,12 +68,15 @@
 }
 
 /* Pinned Tab */
-.tabbrowser-tab[pinned] .tab-content::before {
+.tabbrowser-tab[pinned] .tab-content::before,
+#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-content::before {
+  left: unset;
   transform: translateY(var(--uc-container-position-y));
-  width: 16px;
+  width: 16px !important;
 }
 @include Option("userChrome.tab.close_button_at_pinned") {
-  .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before {
+  .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before,
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[visuallyselected]:not([busy]):hover .tab-content::before {
     opacity: 0;
   }
   // Don't hide at userChrome.tab.close_button_at_pinned.background
@@ -80,13 +84,17 @@
 
 @include NotOption("userChrome.tab.container.on_top") {
   .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected])::before,
-  .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before {
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image][usercontextid] > .tab-stack > .tab-content[attention]:not([selected])::before,
+  .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before,
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[titlechanged]:not([selected])::before {
     opacity: 0;
   }
 
   /* Pinned Tab - Titlechanged Indicator override */
   .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]),
-  .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image][usercontextid] > .tab-stack > .tab-content[attention]:not([selected]), 
+  .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[titlechanged]:not([selected]) {
     /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
     --dotted-identity-image: radial-gradient(
       circle,
@@ -99,7 +107,9 @@
   }
 
   .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
-  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([selected]), 
+  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab > .tab-stack > .tab-content[titlechanged]:not([selected]) {
     /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
     background-position-y: top var(--uc-container-position-y) !important;
   }
@@ -108,26 +118,42 @@
   .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
     > .tab-stack
     > .tab-content[attention]:not([selected]),
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+    > .tab-stack
+    > .tab-content[attention]:not([selected]), 
   .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
     > .tab-stack
-    > .tab-content[pinned][titlechanged]:not([selected]) {
+    > .tab-content[pinned][titlechanged]:not([selected]),
+    #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+    > .tab-stack
+    > .tab-content[titlechanged]:not([selected]) {
     --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px);
   }
   :root[uidensity="compact"]
     .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
     > .tab-stack
     > .tab-content[attention]:not([selected]),
+  :root[uidensity="compact"]
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+    > .tab-stack
+    > .tab-content[attention]:not([selected]), 
   :root[uidensity="compact"]
     .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
     > .tab-stack
-    > .tab-content[pinned][titlechanged]:not([selected]) {
+    > .tab-content[pinned][titlechanged]:not([selected]),
+  :root[uidensity="compact"]
+    #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
+    > .tab-stack
+    > .tab-content[titlechanged]:not([selected]) {
     --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
   }
 }
 
 @include Option("userChrome.tab.container.on_top") {
   .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
-  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([selected]),
+  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
+  #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab > .tab-stack > .tab-content[titlechanged]:not([selected]) {
     /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
     background-position-y: top var(--uc-container-position-y-bottom) !important;
   }

src/tab/clipped_tab/_letters_cleary.scss

@@ -30,6 +30,7 @@
 }
 
 .tabbrowser-tab[visuallyselected]:not([labelendaligned]):hover .tab-label-container,
+#tabbrowser-tabs:not([closebuttons=activetab]) > #pinned-tabs-container > .tabbrowser-tab:not([visuallyselected],[labelendaligned]):hover .tab-label-container,
 #tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected],[labelendaligned]):hover .tab-label-container {
   --tab-label-mask-size: 0.9em; /* Original: 1em */
 }

src/tab/clipped_tab/_show_close_button_at_hover.scss

@@ -19,6 +19,11 @@
 }
 
 #tabbrowser-tabs[closebuttons="activetab"] {
+  > #pinned-tabs-container
+  > .tabbrowser-tab:not([pinned])
+  > .tab-stack
+  > .tab-content
+  > .tab-close-button:not([selected]),
   > #tabbrowser-arrowscrollbox
   > .tabbrowser-tab:not([pinned])
   > .tab-stack
@@ -74,3 +79,14 @@
   padding-inline-start: 3px !important; /* Original: 0px */
   width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding)  */
 }
+
+#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button {
+  padding: 2px !important;
+  width: 16px !important;
+  height: 16px !important;
+  background-image: linear-gradient(var(--close-button-extra-background)), linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), linear-gradient(var(--toolbox-bgcolor)) !important;
+
+  &:-moz-window-inactive {
+    background-image: linear-gradient(var(--close-button-extra-background)), linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), linear-gradient(var(--toolbox-bgcolor-inactive)) !important;
+  }
+}

src/tab/selected_tab/_bottom_rounded_corner.scss

@@ -94,8 +94,7 @@
     }
   }
 
-  &::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])#{$lwtheme}
-    #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background {
+  &#{$builtInDarkStyle} #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background {
       &::before,
       &::after {
         /* As Selected Tab - Box Shadow */

src/tab/selected_tab/_box_shadow.scss

@@ -12,12 +12,30 @@ $ucTabBackgroundShadowHard: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color,
   --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9)));
 }
 
+#tabbrowser-tabs:not([noshadowfortests]) {
+  .tab-background:is([selected], [multiselected]) {
+    box-shadow: unset !important;
+    filter: $ucTabBasicShadow;
+  }
+
+  /* filter create new stacking context */
+  &[orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line {
+    height: calc(100% + 6px + var(--tab-block-margin)); // 6px: .tab-group-line's inset-block size
+    transform: translateY(-2px); // .tab-group-line 's inset-inline-start size
+  }
+  &[expanded][orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line {
+    inset-inline-start: calc(-1 * var(--tab-inner-inline-margin)) !important;
+  }
+  &:not([expanded])[orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line {
+    inset-inline-start: calc(-1 * var(--tab-inner-inline-margin) + 2px) !important;
+  }
+}
 #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
   box-shadow: unset !important;
   filter: $ucTabBasicShadow;
 }
 
-:root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])#{$lwtheme}
+:root#{$builtInDarkStyle}
   #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab {
   &:is([selected], [multiselected]) {
     > .tab-stack
@@ -37,7 +55,7 @@ $ucTabBackgroundShadowHard: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color,
 
 /* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border
    around the tab to help themes that are dependent on tab_line to show the selected tab. */
-:root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"])#{$lwtheme}
+:root:not(#{$builtInLightStyle})
   #TabsToolbar:not([brighttext])
   #tabbrowser-tabs:not([noshadowfortests])
   .tabbrowser-tab:is([visuallyselected], [multiselected])
@@ -48,7 +66,7 @@ $ucTabBackgroundShadowHard: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color,
           $ucTabAdditionalShadow;
 }
 
-:root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])#{$lwtheme}
+:root:not(#{$builtInDarkStyle})
   #TabsToolbar[brighttext]
   #tabbrowser-tabs:not([noshadowfortests])
   .tabbrowser-tab:is([visuallyselected], [multiselected])

src/tab/selected_tab/_color_like_toolbar.scss

@@ -7,6 +7,26 @@
   background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) !important;
 }
 
+#pinned-tabs-container
+  > .tabbrowser-tab
+  > .tab-stack
+  > .tab-background[selected],
+#tabbrowser-tabs:not([movingtab])
+  > #pinned-tabs-container
+  > .tabbrowser-tab
+  > .tab-stack
+  > .tab-background[selected],
+#pinned-tabs-container
+  > tab-group
+  > .tabbrowser-tab
+  > .tab-stack
+  > .tab-background[selected],
+#tabbrowser-tabs[orient="horizontal"]:not([movingtab])
+  > #pinned-tabs-container
+  > tab-group
+  > .tabbrowser-tab
+  > .tab-stack
+  > .tab-background[selected],
 #tabbrowser-arrowscrollbox
   > .tabbrowser-tab
   > .tab-stack

src/tab/selected_tab/_multi_selected.scss

@@ -7,6 +7,17 @@
   }
 }
 
+#tabbrowser-tabs:not([movingtab])
+  > #pinned-tabs-container
+  > .tabbrowser-tab
+  > .tab-stack
+  > .tab-background[multiselected]:not([selected]),
+#tabbrowser-tabs:not([movingtab])
+  > #pinned-tabs-container
+  > tab-group
+  > .tabbrowser-tab
+  > .tab-stack
+  > .tab-background[multiselected]:not([selected]),
 #tabbrowser-tabs:not([movingtab])
   > #tabbrowser-arrowscrollbox
   > .tabbrowser-tab

src/tab/unselected_tab/_dynamic_separator.scss

@@ -23,6 +23,7 @@
 
 //------------------------------------------------------------------------------
 
+#pinned-tabs-container,
 #tabbrowser-arrowscrollbox {
   --start-tab-separator-position-x: -1.5px;
   --end-tab-separator-position-x: 1.5px;
@@ -69,6 +70,7 @@
   }
 }
 
+#pinned-tabs-container:not([orient="vertical"]):not(:empty):not(:has(.tabbrowser-tab[pinned]:is([visuallyselected], [multiselected], :hover):last-of-type)) ~ #tabbrowser-arrowscrollbox:not([orient="vertical"]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-of-type .tab-stack::before,
 #tabbrowser-tabs:not([orient="vertical"]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-of-type) .tab-stack::before {
   opacity: var(--tab-separator-opacity);
 }

src/tabbar/_as_titlebar.scss

@@ -48,6 +48,7 @@ spacer:is([part="overflow-start-indicator"], [part="overflow-end-indicator"]),
 }
 
 /* Pinned */
+#tabbrowser-tabs[positionpinnedtabs] > #pinned-tabs-container > .tabbrowser-tab[pinned][selected="true"],
 #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned][selected="true"] {
   position: relative !important;
 }
@@ -70,11 +71,12 @@ spacer:is([part="overflow-start-indicator"], [part="overflow-end-indicator"]),
 
 /* Padding */
 @include _asTitlebar_preSpacer {
+  #pinned-tabs-container,
   #tabbrowser-arrowscrollbox {
     margin-inline: 2px !important;
-  }
-  :root[sizemode="normal"] #tabbrowser-arrowscrollbox {
-    margin-inline: 6px !important;
+    :root[sizemode="normal"] & {
+      margin-inline: 6px !important;
+    }
   }
 }
 

src/tabbar/_multi_row.scss

@@ -40,6 +40,7 @@ See the above repository for updates as well as full license text. */
 }
 
 .scrollbox-clip[orient="horizontal"],
+#pinned-tabs-container,
 #tabbrowser-arrowscrollbox {
   overflow: -moz-hidden-unscrollable;
   display: block;

src/tabbar/_unscroll.scss

@@ -46,6 +46,7 @@ spacer[part="overflow-start-indicator"] + .scrollbox-clip > scrollbox {
       }
     }
 
+    #pinned-tabs-container,
     #tabbrowser-arrowscrollbox {
       padding-inline-end: calc(16px + (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) * 2) !important;
     }

src/theme/_fully_color.scss

@@ -100,10 +100,8 @@ html#main-window menupopup:not(.in-menulist) {
 }
 
 /* Default theme color preservation */
-:root[lwtheme-mozlightdark] menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), /* Legacy */
-:root[lwtheme-mozlightdark] menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup), /* Legacy */
-: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);"]) menupopup:not(#BMB_bookmarksPopup, [placespopup="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);"]) menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) {
+#{built-in-default-theme()} menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]),
+#{built-in-default-theme()} menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) {
   --menu-color: var(--toolbar-color, var(--in-content-page-color)) !important;
   --arrowpanel-background: var(
     --toolbar-bgcolor,

src/theme/system_default_theme/_mac.scss

@@ -241,13 +241,25 @@
 
   /* Hard Coded */
   @include Option("userChrome.tab.color_like_toolbar") {
+    :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */
+      #tabbrowser-tabs:not([movingtab])
+      > #pinned-tabs-container
+      > .tabbrowser-tab
+      > .tab-stack
+      > .tab-background[selected],
+    :root#{$builtInDarkStyle}
+      #tabbrowser-tabs:not([movingtab])
+      > #pinned-tabs-container
+      > .tabbrowser-tab
+      > .tab-stack
+      > .tab-background[selected],
     :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */
       #tabbrowser-tabs:not([movingtab])
       > #tabbrowser-arrowscrollbox
       > .tabbrowser-tab
       > .tab-stack
       > .tab-background[selected],
-    :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode]
+    :root#{$builtInDarkStyle}
       #tabbrowser-tabs:not([movingtab])
       > #tabbrowser-arrowscrollbox
       > .tabbrowser-tab

src/theme/system_default_theme/_win10.scss

@@ -342,6 +342,24 @@
     }
   }
 
+  :root#{$not_lwtheme}
+  #tabbrowser-tabs:not([movingtab])
+    > #pinned-tabs-container
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[multiselected]:not([selected]),
+  :root[lwtheme-mozlightdark] /* Legacy */
+    #tabbrowser-tabs:not([movingtab])
+    > #pinned-tabs-container
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[multiselected]:not([selected]),
+  #{built-in-default-theme()}
+     #tabbrowser-tabs:not([movingtab])
+       > #pinned-tabs-container
+       > .tabbrowser-tab
+       > .tab-stack
+       > .tab-background[multiselected]:not([selected]),
   :root#{$not_lwtheme}
   #tabbrowser-tabs:not([movingtab])
     > #tabbrowser-arrowscrollbox
@@ -354,7 +372,7 @@
     > .tabbrowser-tab
     > .tab-stack
     > .tab-background[multiselected]:not([selected]),
-  :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);"])
+  #{built-in-default-theme()}
      #tabbrowser-tabs:not([movingtab])
        > #tabbrowser-arrowscrollbox
        > .tabbrowser-tab

src/utils/_theme.scss

@@ -9,13 +9,13 @@ $_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);"]';
+$builtInLightStyle: ':is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme="light"])';
+$builtInDarkStyle: ':is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme="dark"])';
 
 //== Mixin =====================================================================
 @function built-in-default-theme() {
   $oldDefault: selector.append(":root", $_lightdark);
-  $newDefault: selector.append(":root", ":is(#{$_lightStyle}, #{$_darkStyle})");
+  $newDefault: selector.append(":root", ":is(#{$builtInLightStyle}, #{$builtInDarkStyle})");
 
   @return "#{$oldDefault}, #{$newDefault}";
 }
@@ -29,14 +29,14 @@ $_darkStyle: '[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rg
 
 @function built-in-light-theme() {
   $oldLight: selector.append(":root", $_lightdark, $_darkText);
-  $newLight: selector.append(":root", $_lightStyle);
+  $newLight: selector.append(":root", $builtInLightStyle);
 
   @return "#{$oldLight}, #{$newLight}";
 }
 
 @function built-in-dark-theme() {
   $oldDark: selector.append(":root", $_lightdark, $_lightText);
-  $newDark: selector.append(":root", $_darkStyle);
+  $newDark: selector.append(":root", $builtInDarkStyle);
 
   @return "#{$oldDark}, #{$newDark}";
 }