From f1f020508133c9925c192869210fbd46255a4339 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Fri, 17 Dec 2021 19:11:26 +0900
Subject: [PATCH] Clean: SASS - Separated to `system_default_theme.scss`

---
 src/theme/_system_default_theme.scss | 599 ++++++++++++++++++++++++++
 src/userChrome.scss                  | 600 +--------------------------
 2 files changed, 600 insertions(+), 599 deletions(-)
 create mode 100644 src/theme/_system_default_theme.scss

diff --git a/src/theme/_system_default_theme.scss b/src/theme/_system_default_theme.scss
new file mode 100644
index 0000000..b99483c
--- /dev/null
+++ b/src/theme/_system_default_theme.scss
@@ -0,0 +1,599 @@
+/*= Common - URL Bar focus color =============================================*/
+// TODO: `OS` Not covered case
+@media (-moz-windows-accent-color-in-titlebar), (-moz-gtk-csd-available) {
+  /* URL Bar */
+  :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme),
+  :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
+    --focus-outline-color: -moz-accent-color !important;
+  }
+
+  :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background,
+  :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #urlbar[open] > #urlbar-background {
+    border-color: color-mix(
+      in srgb,
+      -moz-accent-color 50%,
+      transparent
+    ) !important; /* Like: --toolbar-field-focus-border-color */
+  }
+}
+
+/*= Windows7 - Aero Based Theme ==============================================*/
+@include OS($win7) {
+  #TabsToolbar:not(:-moz-lwtheme) {
+    --background-color: rgb(229, 229, 235);
+  }
+  #TabsToolbar:not(:-moz-lwtheme)
+    .tabbrowser-tab
+    > .tab-stack
+    > .tab-background:not([selected="true"], [multiselected]) {
+    color: var(--background-color);
+    background-color: color-mix(in srgb, currentColor 60%, transparent);
+  }
+  #TabsToolbar:not(:-moz-lwtheme)
+    .tabbrowser-tab:hover
+    > .tab-stack
+    > .tab-background:not([selected="true"], [multiselected]) {
+    background-color: color-mix(
+      in srgb,
+      currentColor 85%,
+      transparent
+    ) !important; /* Original: color-mix(in srgb, currentColor 11%, transparent) */
+  }
+  #scrollbutton-up:not(:-moz-lwtheme),
+  #scrollbutton-down:not(:-moz-lwtheme),
+  #alltabs-button:not(:-moz-lwtheme) > .toolbarbutton-badge-stack,
+  #TabsToolbar:not(:-moz-lwtheme) .toolbarbutton-1 > .toolbarbutton-icon {
+    color: var(--background-color) !important;
+    background-color: color-mix(in srgb, currentColor 50%, transparent);
+  }
+}
+
+/*= Windows10 - UWP like color ===============================================*/
+@include OS($win10) {
+  :root:not(:-moz-lwtheme) {
+    --win-text-color: rgba(0, 0, 0);
+    --win-bgcolor: rgb(204, 204, 204);
+    --win-disabled-color: rgb(145, 145, 145); /* also button-active-color */
+    --win-disabled-bgcolor: transparent;
+    --win-hover-bgcolor: rgb(218, 218, 218);
+    --win-hover-active-bgcolor: #c2c2c2; /* also button-bgcolor */
+    --win-field-bgcolor: #ffffff;
+    --win-component-bgcolor: #f2f2f2;
+    --win-border-color: #8a8a8a;
+    --win-tab-seperator-color: #a3a3a3;
+    --win-sidebar-bgcolor: #e6e6e6;
+    --win-sidebar-hover-bgcolor: #cfcfcf;
+    --win-sidebar-button-hover-bgcolor: #b8b8b8;
+    --win-sidebar-button-hover-active-bgcolor: #a3a3a3;
+    --win-button-border: #747474;
+    --win-button-hover-bgcolor: rgba(145, 145, 145, 0.66);
+    --win-shorcut-text-color: #757575;
+    --win-error-color: #b31616;
+    --win-red-border-color: #ff4343;
+    --win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, -moz-accent-color);
+    --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, -moz-accent-color);
+    --win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, -moz-accent-color);
+    --win-accent-active-color: -moz-accent-color;
+  }
+  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+    :root:not(:-moz-lwtheme),
+    :root[lwt-default-theme-in-dark-mode] {
+      --win-text-color: #ffffff;
+      --win-bgcolor: #2b2b2b;
+      --win-disabled-color: #747474; /* also button-active-color */
+      --win-disabled-bgcolor: transparent;
+      --win-hover-bgcolor: #2e2e2e;
+      --win-hover-active-bgcolor: #454545; /* also button-bgcolor */
+      --win-field-bgcolor: #373737;
+      --win-component-bgcolor: #171717;
+      --win-border-color: #5b5b5b;
+      --win-tab-seperator-color: #555555;
+      --win-sidebar-bgcolor: #1f1f1f;
+      --win-sidebar-hover-bgcolor: #353535;
+      --win-sidebar-button-hover-bgcolor: #353535;
+      --win-sidebar-button-hover-active-bgcolor: #4c4c4c;
+      --win-button-border: #8f8f8f;
+      --win-button-hover-bgcolor: rgba(116, 116, 116, 0.66);
+      --win-shorcut-text-color: #adadad;
+      --win-error-color: #ffb900;
+      --win-red-border-color: #ff4343;
+      --win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, -moz-accent-color);
+      --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, -moz-accent-color);
+      --win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, -moz-accent-color);
+      --win-accent-active-color: -moz-accent-color;
+    }
+  }
+
+  :root:not(:-moz-lwtheme),
+  :root[lwt-default-theme-in-dark-mode] {
+    /* Text, Icon Color */
+    --menu-color: var(--win-text-color) !important;
+    --lwt-text-color: var(--win-text-color) !important;
+    --button-color: var(--win-text-color) !important;
+    --input-color: var(--win-text-color) !important;
+    --toolbar-color: var(--win-text-color) !important;
+    --toolbar-non-lwt-textcolor: var(--win-text-color) !important;
+    --toolbarbutton-icon-fill: var(--win-text-color) !important;
+    --toolbar-field-focus-color: var(--win-text-color) !important;
+    --urlbar-popup-action-color: var(--win-text-color) !important;
+    --toolbar-field-color: var(--win-text-color) !important;
+    --autocomplete-popup-highlight-color: var(--win-text-color) !important;
+    --tab-icon-overlay-fill: var(--win-text-color) !important;
+    --panel-banner-item-color: var(--win-text-color) !important;
+    --arrowpanel-color: var(--win-text-color) !important;
+    --autocomplete-popup-color: var(--win-text-color) !important;
+
+    /* Text Disabled Color */
+    --menu-disabled-color: var(--win-disabled-color) !important;
+    --button-active-bgcolor: var(--win-disabled-color) !important;
+    --checkbox-unchecked-active-bgcolor: var(--win-disabled-color) !important;
+    --panel-disabled-color: var(--win-disabled-color) !important;
+    --download-progress-paused-color: var(--win-disabled-color) !important;
+
+    /* Text Shortcut Color */
+    --panel-shortcut-color: var(--win-shorcut-text-color) !important;
+    --panel-description-color: var(--win-shorcut-text-color) !important;
+
+    /* Title Background, Border Color */
+    --menu-border-color: var(--win-bgcolor) !important;
+    --lwt-accent-color: var(--win-bgcolor) !important;
+    --toolbar-field-border-color: var(--win-bgcolor) !important;
+    --chrome-content-separator-color: var(--win-bgcolor) !important;
+
+    /* Component Background Color */
+    --menu-background-color: var(--win-component-bgcolor) !important;
+    --toolbar-bgcolor: var(--win-component-bgcolor) !important;
+    --toolbar-non-lwt-bgcolor: var(--win-component-bgcolor) !important;
+    --arrowpanel-background: var(--win-component-bgcolor) !important;
+    --autocomplete-popup-background: var(--win-component-bgcolor) !important;
+
+    /* Seperator */
+    --toolbarseparator-color: var(--win-tab-seperator-color) !important;
+
+    /* Field Backround Color */
+    --input-bgcolor: var(--win-field-bgcolor) !important;
+    --toolbar-field-background-color: var(--win-field-bgcolor) !important;
+    --toolbar-field-focus-background-color: var(--win-field-bgcolor) !important;
+    --tab-icon-overlay-stroke: var(--win-field-bgcolor) !important;
+    --button-primary-color: var(--win-field-bgcolor) !important;
+    --checkbox-checked-color: var(--win-field-bgcolor) !important;
+
+    /* Hover Background Color  */
+    --menuitem-hover-background-color: var(--win-hover-bgcolor) !important;
+    --toolbarbutton-hover-background: var(--win-hover-bgcolor) !important;
+    --panel-banner-item-hover-bgcolor: var(--win-hover-bgcolor) !important;
+
+    /* Hover Active, Button Color */
+    --button-bgcolor: var(--win-hover-active-bgcolor) !important;
+    --checkbox-unchecked-bgcolor: var(--win-hover-active-bgcolor) !important;
+    --panel-banner-item-background-color: var(--win-hover-active-bgcolor) !important;
+    --urlbar-box-bgcolor: var(--win-hover-active-bgcolor) !important;
+    --urlbar-box-focus-bgcolor: var(--win-hover-active-bgcolor) !important;
+    --panel-banner-item-active-bgcolor: var(--win-hover-active-bgcolor) !important;
+    --toolbarbutton-active-background: var(--win-hover-active-bgcolor) !important;
+    --urlbar-box-active-bgcolor: var(--win-hover-active-bgcolor) !important;
+    --autocomplete-popup-highlight-background: var(--win-hover-active-bgcolor) !important;
+
+    /* Disabled Background Color */
+    --menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important;
+
+    /* Button Hover Color */
+    --button-hover-bgcolor: var(--win-button-hover-bgcolor) !important;
+    --checkbox-unchecked-hover-bgcolor: var(--win-button-hover-bgcolor) !important;
+    --urlbar-box-hover-bgcolor: var(--win-button-hover-bgcolor) !important;
+    --autocomplete-popup-hover-background: var(--win-button-hover-bgcolor) !important;
+
+    /* Button Border Color */
+    --checkbox-border-color: var(--win-button-border) !important;
+    --input-border-color: var(--win-button-border) !important;
+    --autocomplete-popup-separator-color: var(--win-button-border) !important;
+
+    /* Accent Color */
+    --button-primary-bgcolor: var(--win-accent-color) !important;
+    --focus-outline-color: var(--win-accent-color) !important;
+    --checkbox-checked-bgcolor: var(--win-accent-color) !important;
+
+    /* Accent Content Color */
+    --toolbarbutton-icon-fill-attention: var(--win-accent-content-color) !important;
+    --urlbar-popup-url-color: var(--win-accent-content-color) !important;
+    --download-progress-fill-color: var(--win-accent-content-color) !important;
+
+    /* Accent Hover Color */
+    --button-primary-hover-bgcolor: var(--win-accent-hover-color) !important;
+    --checkbox-checked-hover-bgcolor: var(--win-accent-hover-color) !important;
+
+    /* Accent Hover Active Color */
+    --button-primary-active-bgcolor: var(--win-accent-active-color) !important;
+    --checkbox-checked-active-bgcolor: var(--win-accent-active-color) !important;
+
+    /* Error Color */
+    --error-text-color: var(--win-error-color) !important;
+    --input-error-border-color: var(--win-error-color) !important;
+
+    /* Others */
+    --tab-line-color: Highlight !important;
+    --tab-selected-bgcolor: unset !important;
+    --tabs-border-color: transparent !important;
+    --checkbox-checked-border-color: transparent !important;
+
+    /* Other Defaults */
+    --arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent) !important;
+    --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent) !important;
+    --arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent) !important;
+
+    --download-progress-flare-color: rgba(255, 255, 255, 0.75) !important;
+
+    --panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important;
+  }
+  #navigator-toolbox:not(:-moz-lwtheme) {
+    background: var(--lwt-accent-color) !important;
+  }
+
+  /*- Separator --------------------------------------------------------------*/
+  :root:not(:-moz-lwtheme) {
+    --arrowpanel-border-color: var(--win-bgcolor) !important;
+    --panel-separator-color: var(--win-bgcolor) !important;
+  }
+  :root[lwt-default-theme-in-dark-mode] {
+    --arrowpanel-border-color: var(--win-border-color) !important;
+    --panel-separator-color: var(--win-border-color) !important;
+  }
+
+  /*- Menu -------------------------------------------------------------------*/
+  html#main-window menupopup:not(:-moz-lwtheme) {
+    --menu-color: var(--win-text-color) !important;
+    --menu-background-color: var(--win-component-bgcolor) !important;
+    --menu-border-color: var(--win-bgcolor) !important;
+    --menuitem-hover-background-color: var(--win-hover-bgcolor) !important;
+    --menu-disabled-color: var(--win-disabled-color) !important;
+    --menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important;
+  }
+
+  /*- Toolbar ----------------------------------------------------------------*/
+  :root:not(:-moz-lwtheme) #titlebar,
+  :root[lwt-default-theme-in-dark-mode] #titlebar {
+    --button-hover-bgcolor: var(--win-sidebar-button-hover-bgcolor);
+    --button-active-bgcolor: var(--win-sidebar-button-hover-active-bgcolor);
+    --toolbarbutton-hover-background: var(--win-sidebar-button-hover-bgcolor);
+    --toolbarbutton-active-background: var(--win-sidebar-button-hover-active-bgcolor);
+  }
+
+  /*- Sidebar ----------------------------------------------------------------*/
+  #sidebar-box:not([lwt-sidebar]) {
+    appearance: none !important;
+  }
+  :root:not(:-moz-lwtheme) #sidebar-box,
+  :root[lwt-default-theme-in-dark-mode] #sidebar-box {
+    --sidebar-background-color: var(--win-sidebar-bgcolor) !important;
+    --sidebar-text-color: var(--win-text-color) !important;
+    --sidebar-border-color: var(--win-border-color) !important;
+  }
+  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+    .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
+      body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
+      .sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], /* Nightly */
+      body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] {
+      /* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */
+      --lwt-sidebar-background-color: transparent !important;
+      --lwt-sidebar-text-color: var(--win-text-color) !important;
+    }
+  }
+
+  :root:not(:-moz-lwtheme)
+    .subviewbutton:not(#appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2),
+  :root[lwt-default-theme-in-dark-mode]
+    .subviewbutton:not(#appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2) {
+    --button-hover-bgcolor: var(--win-hover-bgcolor) !important;
+    --button-active-bgcolor: var(--win-hover-active-bgcolor) !important;
+  }
+
+  /*- Others -----------------------------------------------------------------*/
+  /* For overwrite */
+  :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]):not(:-moz-lwtheme), /* Legacy */
+  :root:not(:-moz-lwtheme) {
+    /* Light Theme */
+    --lwt-accent-color: var(--win-bgcolor) !important;
+  }
+  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+    :root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] {
+      --toolbar-bgcolor: var(--win-component-bgcolor) !important; /* Original: rgba(43, 42, 51, 1) */
+    }
+  }
+
+  #tabbrowser-tabs:not([movingtab])
+    > #tabbrowser-arrowscrollbox
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[multiselected]:not([selected]):not(:-moz-lwtheme),
+  :root[lwtheme-mozlightdark] /* Legacy */
+    #tabbrowser-tabs:not([movingtab])
+    > #tabbrowser-arrowscrollbox
+    > .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);"])
+       #tabbrowser-tabs:not([movingtab])
+                           > #tabbrowser-arrowscrollbox
+                           > .tabbrowser-tab
+                           > .tab-stack
+                           > .tab-background[multiselected]:not([selected]) {
+    background-image: linear-gradient(
+        color-mix(in srgb, currentColor 11%, transparent),
+        color-mix(in srgb, currentColor 11%, transparent)
+      ),
+      linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
+  }
+}
+
+/*= Windows10 - Titlebar accent color ========================================*/
+@media (-moz-windows-accent-color-in-titlebar) {
+  /* Tab Bar */
+  :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color,
+  :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .titlebar-color {
+    color: -moz-accent-color-foreground;
+    background-color: -moz-accent-color;
+  }
+
+  :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .toolbar-items,
+  :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .toolbar-items {
+    --toolbarbutton-icon-fill: currentColor;
+    --toolbarbutton-hover-background: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent);
+    --toolbarbutton-active-background: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent);
+  }
+}
+
+/*= GTK - URL View url accent color ==========================================*/
+@include OS($linux) {
+  :root:not(:-moz-lwtheme) .urlbarView-url {
+    --urlbar-popup-url-color: -moz-accent-color;
+  }
+
+  /* Nightly Compatibility */
+  :root:not(:-moz-lwtheme) #urlbar {
+    --toolbar-field-focus-color: var(--toolbar-field-color); /* Nightly: rgba(0, 0, 0, 1)  */
+    --toolbar-field-focus-background-color: var(--toolbar-field-background-color); /* Nightly: white */
+  }
+}
+
+/*= Mac - Default like color =================================================*/
+@include OS($mac) {
+  :root:not(:-moz-lwtheme),
+  :root[lwt-default-theme-in-dark-mode] {
+    /* Colors */
+    --mac-text-color: -moz-dialogtext;
+    --mac-disabled-color: GrayText;
+    --mac-bgcolor: Window;
+    --mac-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog);
+    --mac-field-bgcolor: Window;
+    --mac-panel-bgcolor: Menu;
+    --mac-sidebar-bgcolor: -moz-mac-source-list;
+    --mac-sidebar-hover-bgcolor: color-mix(in srgb, ButtonFace 60%, var(--mac-sidebar-bgcolor));
+    --mac-hover-bgcolor: Window;
+    --mac-disabled-bgcolor: transparent;
+    --mac-primary-button-color: -moz-accent-color-foreground; /* or -moz-mac-menutextselect */
+    --mac-accent-color: -moz-accent-color; /* or LinkText */
+    --mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-accent-color);
+    --mac-accent-hover-color: color-mix(
+      in srgb,
+      rgb(0, 0, 0) 10%,
+      -moz-accent-color
+    ); /* or -moz-mac-menuselect, Highlight */
+    --mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, -moz-accent-color); /* or ActiveBorder */
+
+    /* Text, Icon Color */
+    --menu-color: var(--mac-text-color) !important;
+    --lwt-text-color: var(--mac-text-color) !important;
+    --button-color: var(--mac-text-color) !important;
+    --input-color: var(--mac-text-color) !important;
+    --toolbar-color: var(--mac-text-color) !important;
+    --toolbar-non-lwt-textcolor: var(--mac-text-color) !important;
+    --toolbarbutton-icon-fill: var(--mac-text-color) !important;
+    --toolbar-field-focus-color: var(--mac-text-color) !important;
+    --urlbar-popup-action-color: var(--mac-text-color) !important;
+    --toolbar-field-color: var(--mac-text-color) !important;
+    --autocomplete-popup-highlight-color: var(--mac-text-color) !important;
+    --tab-icon-overlay-fill: var(--mac-text-color) !important;
+    --panel-banner-item-color: var(--mac-text-color) !important;
+    --arrowpanel-color: var(--mac-text-color) !important;
+    --autocomplete-popup-color: var(--mac-text-color) !important;
+    --panel-shortcut-color: var(--mac-text-color) !important;
+    --panel-description-color: var(--mac-text-color) !important;
+
+    /* Text Disabled Color */
+    --menu-disabled-color: var(--mac-disabled-color) !important;
+    --button-active-bgcolor: var(--mac-disabled-color) !important;
+    --checkbox-unchecked-active-bgcolor: var(--mac-disabled-color) !important;
+    --panel-disabled-color: var(--mac-disabled-color) !important;
+    --download-progress-paused-color: var(--mac-disabled-color) !important;
+
+    /* Background Color */
+    --lwt-accent-color: var(--mac-bgcolor) !important;
+    --menu-background-color: var(--mac-bgcolor) !important;
+    --autocomplete-popup-background: var(--mac-bgcolor) !important;
+
+    /* Selected Background Color */
+    --toolbar-bgcolor: var(--mac-selected-bgcolor) !important;
+    --toolbar-non-lwt-bgcolor: var(--mac-selected-bgcolor) !important;
+
+    /* Field Backround Color */
+    --input-bgcolor: var(--mac-field-bgcolor) !important;
+    --toolbar-field-background-color: var(--mac-field-bgcolor) !important;
+    --tab-icon-overlay-stroke: var(--mac-field-bgcolor) !important;
+
+    /* Panel Backround Color */
+    --arrowpanel-background: var(--mac-panel-bgcolor) !important;
+
+    /* Hover Background Color  */
+    --menuitem-hover-background-color: var(--mac-hover-bgcolor) !important;
+    --toolbarbutton-hover-background: var(--mac-hover-bgcolor) !important;
+    --panel-banner-item-hover-bgcolor: var(--mac-hover-bgcolor) !important;
+
+    --button-bgcolor: var(--mac-hover-bgcolor) !important;
+    --checkbox-unchecked-bgcolor: var(--mac-hover-bgcolor) !important;
+    --panel-banner-item-background-color: var(--mac-hover-bgcolor) !important;
+    --urlbar-box-bgcolor: var(--mac-hover-bgcolor) !important;
+    --urlbar-box-focus-bgcolor: var(--mac-hover-bgcolor) !important;
+    --panel-banner-item-active-bgcolor: var(--mac-hover-bgcolor) !important;
+    --toolbarbutton-active-background: var(--mac-hover-bgcolor) !important;
+    --urlbar-box-active-bgcolor: var(--mac-hover-bgcolor) !important;
+    --autocomplete-popup-highlight-background: var(--mac-hover-bgcolor) !important;
+
+    --button-hover-bgcolor: var(--mac-hover-bgcolor) !important;
+    --checkbox-unchecked-hover-bgcolor: var(--mac-hover-bgcolor) !important;
+    --urlbar-box-hover-bgcolor: var(--mac-hover-bgcolor) !important;
+    --autocomplete-popup-hover-background: var(--mac-hover-bgcolor) !important;
+
+    /* Disabled Background Color */
+    --menuitem-disabled-hover-background-color: var(--mac-disabled-bgcolor) !important;
+
+    /* Border Color */
+    /*
+      --menu-border-color: var(--mac-bgcolor) !important;
+      --toolbar-field-border-color: var(--mac-bgcolor) !important;
+      --arrowpanel-border-color: var(--mac-bgcolor) !important;
+      --chrome-content-separator-color: var(--mac-bgcolor) !important;
+      --toolbarseparator-color: var(--mac-bgcolor) !important;
+      --panel-separator-color: var(--mac-bgcolor) !important;
+     */
+
+    /* Button Border Color */
+    /*
+      --tab-line-color: var(---mac-bgcolor) !important;
+      --checkbox-border-color: var(--mac-bgcolor) !important;
+      --input-border-color: var(--mac-bgcolor) !important;
+      --autocomplete-popup-separator-color: var(--mac-bgcolor) !important;
+     */
+
+    /* Accent Color Forground */
+    --button-primary-color: var(--mac-primary-button-color) !important;
+    --checkbox-checked-color: var(--mac-primary-button-color) !important;
+
+    /* Accent Color */
+    --button-primary-bgcolor: var(--mac-accent-color) !important;
+    --focus-outline-color: var(--mac-accent-color) !important;
+    --checkbox-checked-bgcolor: var(--mac-accent-color) !important;
+
+    /* Accent Content Color */
+    --toolbarbutton-icon-fill-attention: var(--mac-accent-content-color) !important;
+    --urlbar-popup-url-color: var(--mac-accent-content-color) !important;
+    --download-progress-fill-color: var(--mac-accent-content-color) !important;
+
+    /* Accent Hover Color */
+    --button-primary-hover-bgcolor: var(--mac-accent-hover-color) !important;
+    --checkbox-checked-hover-bgcolor: var(--mac-accent-hover-color) !important;
+
+    /* Accent Hover Active Color */
+    --button-primary-active-bgcolor: var(--mac-accent-active-color) !important;
+    --checkbox-checked-active-bgcolor: var(--mac-accent-active-color) !important;
+
+    /* Error Color */
+    /*
+      --error-text-color: var(--win-error-color) !important;
+      --input-error-border-color: var(--win-error-color) !important;
+     */
+
+    /* Others */
+    --tab-selected-bgcolor: unset !important;
+    --tabs-border-color: transparent !important;
+    --checkbox-checked-border-color: transparent !important;
+
+    /* Other Defaults */
+    --arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent) !important;
+    --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent) !important;
+    --arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent) !important;
+
+    --download-progress-flare-color: rgba(255, 255, 255, 0.75) !important;
+
+    --panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important;
+  }
+  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+    :root:not(:-moz-lwtheme),
+    :root[lwt-default-theme-in-dark-mode] {
+      --mac-field-bgcolor: Field;
+      --mac-panel-bgcolor: -moz-CellHighlight;
+      --mac-hover-bgcolor: ButtonFace;
+
+      --toolbar-field-focus-background-color: var(--mac-bgcolor) !important;
+      --toolbar-field-background-color: var(--mac-sidebar-bgcolor) !important;
+    }
+  }
+
+  /*- Toolbar ----------------------------------------------------------------*/
+  :root:not(:-moz-lwtheme) #navigator-toolbox,
+  :root[lwt-default-theme-in-dark-mode] #navigator-toolbox {
+    appearance: auto !important;
+  }
+
+  :root:not(:-moz-lwtheme) #titlebar {
+    --mac-hover-bgcolor: ButtonFace;
+  }
+  :root:not(:-moz-lwtheme) #titlebar,
+  :root[lwt-default-theme-in-dark-mode] #titlebar {
+    --button-hover-bgcolor: var(--mac-hover-bgcolor);
+    --button-active-bgcolor: var(--mac-hover-bgcolor);
+    --toolbarbutton-hover-background: var(--mac-hover-bgcolor);
+    --toolbarbutton-active-background: var(--mac-hover-bgcolor);
+  }
+
+  :root[lwt-default-theme-in-dark-mode] #urlbar {
+    --autocomplete-popup-highlight-background: var(--mac-hover-bgcolor) !important;
+    --autocomplete-popup-hover-background: var(--mac-hover-bgcolor) !important;
+  }
+
+  /*- Sidebar ----------------------------------------------------------------*/
+  #sidebar-box:not([lwt-sidebar]) {
+    appearance: none !important;
+  }
+  :root:not(:-moz-lwtheme) #sidebar-box,
+  :root[lwt-default-theme-in-dark-mode] #sidebar-box {
+    --sidebar-background-color: var(--mac-sidebar-bgcolor) !important;
+    --sidebar-text-color: var(--mac-text-color) !important;
+    /* --sidebar-border-color: var(--win-sidebar-border-color) !important; */
+  }
+  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+    .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
+      body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
+      .sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], /* Nightly */
+      body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] {
+      /* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */
+      --lwt-sidebar-background-color: transparent !important;
+      --lwt-sidebar-text-color: var(--mac-text-color) !important;
+    }
+  }
+
+  :root[lwt-default-theme-in-dark-mode] #sidebarMenu-popup {
+    --button-hover-bgcolor: var(--mac-sidebar-hover-bgcolor);
+    --button-active-bgcolor: var(--mac-sidebar-hover-bgcolor);
+  }
+
+  /*- Others -----------------------------------------------------------------*/
+  /* For Overwrite */
+  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+    :root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] {
+      --toolbar-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
+    }
+  }
+
+  /* Hard Coded */
+  :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */
+    #tabbrowser-tabs:not([movingtab])
+    > #tabbrowser-arrowscrollbox
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected="true"],
+  :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode]
+    #tabbrowser-tabs:not([movingtab])
+    > #tabbrowser-arrowscrollbox
+    > .tabbrowser-tab
+    > .tab-stack
+    > .tab-background[selected="true"] {
+    background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
+  }
+
+  :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::before,
+  :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::after,
+  :root:not([customizing="true"])[lwt-default-theme-in-dark-mode] tab[visuallyselected] > stack::before,
+  :root:not([customizing="true"])[lwt-default-theme-in-dark-mode] tab[visuallyselected] > stack::after {
+    fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
+  }
+}
diff --git a/src/userChrome.scss b/src/userChrome.scss
index fd60a80..6d0a40f 100644
--- a/src/userChrome.scss
+++ b/src/userChrome.scss
@@ -13,605 +13,7 @@
 @import "theme/os_compatibility";
 
 /** System Default Theme ******************************************************/
-/*= Common - URL Bar focus color =============================================*/
-// TODO: `OS` Not covered case
-@media (-moz-windows-accent-color-in-titlebar), (-moz-gtk-csd-available) {
-  /* URL Bar */
-  :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme),
-  :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
-    --focus-outline-color: -moz-accent-color !important;
-  }
-
-  :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background,
-  :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #urlbar[open] > #urlbar-background {
-    border-color: color-mix(
-      in srgb,
-      -moz-accent-color 50%,
-      transparent
-    ) !important; /* Like: --toolbar-field-focus-border-color */
-  }
-}
-
-/*= Windows7 - Aero Based Theme ==============================================*/
-@include OS($win7) {
-  #TabsToolbar:not(:-moz-lwtheme) {
-    --background-color: rgb(229, 229, 235);
-  }
-  #TabsToolbar:not(:-moz-lwtheme)
-    .tabbrowser-tab
-    > .tab-stack
-    > .tab-background:not([selected="true"], [multiselected]) {
-    color: var(--background-color);
-    background-color: color-mix(in srgb, currentColor 60%, transparent);
-  }
-  #TabsToolbar:not(:-moz-lwtheme)
-    .tabbrowser-tab:hover
-    > .tab-stack
-    > .tab-background:not([selected="true"], [multiselected]) {
-    background-color: color-mix(
-      in srgb,
-      currentColor 85%,
-      transparent
-    ) !important; /* Original: color-mix(in srgb, currentColor 11%, transparent) */
-  }
-  #scrollbutton-up:not(:-moz-lwtheme),
-  #scrollbutton-down:not(:-moz-lwtheme),
-  #alltabs-button:not(:-moz-lwtheme) > .toolbarbutton-badge-stack,
-  #TabsToolbar:not(:-moz-lwtheme) .toolbarbutton-1 > .toolbarbutton-icon {
-    color: var(--background-color) !important;
-    background-color: color-mix(in srgb, currentColor 50%, transparent);
-  }
-}
-
-/*= Windows10 - UWP like color ===============================================*/
-@include OS($win10) {
-  :root:not(:-moz-lwtheme) {
-    --win-text-color: rgba(0, 0, 0);
-    --win-bgcolor: rgb(204, 204, 204);
-    --win-disabled-color: rgb(145, 145, 145); /* also button-active-color */
-    --win-disabled-bgcolor: transparent;
-    --win-hover-bgcolor: rgb(218, 218, 218);
-    --win-hover-active-bgcolor: #c2c2c2; /* also button-bgcolor */
-    --win-field-bgcolor: #ffffff;
-    --win-component-bgcolor: #f2f2f2;
-    --win-border-color: #8a8a8a;
-    --win-tab-seperator-color: #a3a3a3;
-    --win-sidebar-bgcolor: #e6e6e6;
-    --win-sidebar-hover-bgcolor: #cfcfcf;
-    --win-sidebar-button-hover-bgcolor: #b8b8b8;
-    --win-sidebar-button-hover-active-bgcolor: #a3a3a3;
-    --win-button-border: #747474;
-    --win-button-hover-bgcolor: rgba(145, 145, 145, 0.66);
-    --win-shorcut-text-color: #757575;
-    --win-error-color: #b31616;
-    --win-red-border-color: #ff4343;
-    --win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, -moz-accent-color);
-    --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, -moz-accent-color);
-    --win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, -moz-accent-color);
-    --win-accent-active-color: -moz-accent-color;
-  }
-  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
-    :root:not(:-moz-lwtheme),
-    :root[lwt-default-theme-in-dark-mode] {
-      --win-text-color: #ffffff;
-      --win-bgcolor: #2b2b2b;
-      --win-disabled-color: #747474; /* also button-active-color */
-      --win-disabled-bgcolor: transparent;
-      --win-hover-bgcolor: #2e2e2e;
-      --win-hover-active-bgcolor: #454545; /* also button-bgcolor */
-      --win-field-bgcolor: #373737;
-      --win-component-bgcolor: #171717;
-      --win-border-color: #5b5b5b;
-      --win-tab-seperator-color: #555555;
-      --win-sidebar-bgcolor: #1f1f1f;
-      --win-sidebar-hover-bgcolor: #353535;
-      --win-sidebar-button-hover-bgcolor: #353535;
-      --win-sidebar-button-hover-active-bgcolor: #4c4c4c;
-      --win-button-border: #8f8f8f;
-      --win-button-hover-bgcolor: rgba(116, 116, 116, 0.66);
-      --win-shorcut-text-color: #adadad;
-      --win-error-color: #ffb900;
-      --win-red-border-color: #ff4343;
-      --win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, -moz-accent-color);
-      --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, -moz-accent-color);
-      --win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, -moz-accent-color);
-      --win-accent-active-color: -moz-accent-color;
-    }
-  }
-
-  :root:not(:-moz-lwtheme),
-  :root[lwt-default-theme-in-dark-mode] {
-    /* Text, Icon Color */
-    --menu-color: var(--win-text-color) !important;
-    --lwt-text-color: var(--win-text-color) !important;
-    --button-color: var(--win-text-color) !important;
-    --input-color: var(--win-text-color) !important;
-    --toolbar-color: var(--win-text-color) !important;
-    --toolbar-non-lwt-textcolor: var(--win-text-color) !important;
-    --toolbarbutton-icon-fill: var(--win-text-color) !important;
-    --toolbar-field-focus-color: var(--win-text-color) !important;
-    --urlbar-popup-action-color: var(--win-text-color) !important;
-    --toolbar-field-color: var(--win-text-color) !important;
-    --autocomplete-popup-highlight-color: var(--win-text-color) !important;
-    --tab-icon-overlay-fill: var(--win-text-color) !important;
-    --panel-banner-item-color: var(--win-text-color) !important;
-    --arrowpanel-color: var(--win-text-color) !important;
-    --autocomplete-popup-color: var(--win-text-color) !important;
-
-    /* Text Disabled Color */
-    --menu-disabled-color: var(--win-disabled-color) !important;
-    --button-active-bgcolor: var(--win-disabled-color) !important;
-    --checkbox-unchecked-active-bgcolor: var(--win-disabled-color) !important;
-    --panel-disabled-color: var(--win-disabled-color) !important;
-    --download-progress-paused-color: var(--win-disabled-color) !important;
-
-    /* Text Shortcut Color */
-    --panel-shortcut-color: var(--win-shorcut-text-color) !important;
-    --panel-description-color: var(--win-shorcut-text-color) !important;
-
-    /* Title Background, Border Color */
-    --menu-border-color: var(--win-bgcolor) !important;
-    --lwt-accent-color: var(--win-bgcolor) !important;
-    --toolbar-field-border-color: var(--win-bgcolor) !important;
-    --chrome-content-separator-color: var(--win-bgcolor) !important;
-
-    /* Component Background Color */
-    --menu-background-color: var(--win-component-bgcolor) !important;
-    --toolbar-bgcolor: var(--win-component-bgcolor) !important;
-    --toolbar-non-lwt-bgcolor: var(--win-component-bgcolor) !important;
-    --arrowpanel-background: var(--win-component-bgcolor) !important;
-    --autocomplete-popup-background: var(--win-component-bgcolor) !important;
-
-    /* Seperator */
-    --toolbarseparator-color: var(--win-tab-seperator-color) !important;
-
-    /* Field Backround Color */
-    --input-bgcolor: var(--win-field-bgcolor) !important;
-    --toolbar-field-background-color: var(--win-field-bgcolor) !important;
-    --toolbar-field-focus-background-color: var(--win-field-bgcolor) !important;
-    --tab-icon-overlay-stroke: var(--win-field-bgcolor) !important;
-    --button-primary-color: var(--win-field-bgcolor) !important;
-    --checkbox-checked-color: var(--win-field-bgcolor) !important;
-
-    /* Hover Background Color  */
-    --menuitem-hover-background-color: var(--win-hover-bgcolor) !important;
-    --toolbarbutton-hover-background: var(--win-hover-bgcolor) !important;
-    --panel-banner-item-hover-bgcolor: var(--win-hover-bgcolor) !important;
-
-    /* Hover Active, Button Color */
-    --button-bgcolor: var(--win-hover-active-bgcolor) !important;
-    --checkbox-unchecked-bgcolor: var(--win-hover-active-bgcolor) !important;
-    --panel-banner-item-background-color: var(--win-hover-active-bgcolor) !important;
-    --urlbar-box-bgcolor: var(--win-hover-active-bgcolor) !important;
-    --urlbar-box-focus-bgcolor: var(--win-hover-active-bgcolor) !important;
-    --panel-banner-item-active-bgcolor: var(--win-hover-active-bgcolor) !important;
-    --toolbarbutton-active-background: var(--win-hover-active-bgcolor) !important;
-    --urlbar-box-active-bgcolor: var(--win-hover-active-bgcolor) !important;
-    --autocomplete-popup-highlight-background: var(--win-hover-active-bgcolor) !important;
-
-    /* Disabled Background Color */
-    --menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important;
-
-    /* Button Hover Color */
-    --button-hover-bgcolor: var(--win-button-hover-bgcolor) !important;
-    --checkbox-unchecked-hover-bgcolor: var(--win-button-hover-bgcolor) !important;
-    --urlbar-box-hover-bgcolor: var(--win-button-hover-bgcolor) !important;
-    --autocomplete-popup-hover-background: var(--win-button-hover-bgcolor) !important;
-
-    /* Button Border Color */
-    --checkbox-border-color: var(--win-button-border) !important;
-    --input-border-color: var(--win-button-border) !important;
-    --autocomplete-popup-separator-color: var(--win-button-border) !important;
-
-    /* Accent Color */
-    --button-primary-bgcolor: var(--win-accent-color) !important;
-    --focus-outline-color: var(--win-accent-color) !important;
-    --checkbox-checked-bgcolor: var(--win-accent-color) !important;
-
-    /* Accent Content Color */
-    --toolbarbutton-icon-fill-attention: var(--win-accent-content-color) !important;
-    --urlbar-popup-url-color: var(--win-accent-content-color) !important;
-    --download-progress-fill-color: var(--win-accent-content-color) !important;
-
-    /* Accent Hover Color */
-    --button-primary-hover-bgcolor: var(--win-accent-hover-color) !important;
-    --checkbox-checked-hover-bgcolor: var(--win-accent-hover-color) !important;
-
-    /* Accent Hover Active Color */
-    --button-primary-active-bgcolor: var(--win-accent-active-color) !important;
-    --checkbox-checked-active-bgcolor: var(--win-accent-active-color) !important;
-
-    /* Error Color */
-    --error-text-color: var(--win-error-color) !important;
-    --input-error-border-color: var(--win-error-color) !important;
-
-    /* Others */
-    --tab-line-color: Highlight !important;
-    --tab-selected-bgcolor: unset !important;
-    --tabs-border-color: transparent !important;
-    --checkbox-checked-border-color: transparent !important;
-
-    /* Other Defaults */
-    --arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent) !important;
-    --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent) !important;
-    --arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent) !important;
-
-    --download-progress-flare-color: rgba(255, 255, 255, 0.75) !important;
-
-    --panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important;
-  }
-  #navigator-toolbox:not(:-moz-lwtheme) {
-    background: var(--lwt-accent-color) !important;
-  }
-
-  /*- Separator --------------------------------------------------------------*/
-  :root:not(:-moz-lwtheme) {
-    --arrowpanel-border-color: var(--win-bgcolor) !important;
-    --panel-separator-color: var(--win-bgcolor) !important;
-  }
-  :root[lwt-default-theme-in-dark-mode] {
-    --arrowpanel-border-color: var(--win-border-color) !important;
-    --panel-separator-color: var(--win-border-color) !important;
-  }
-
-  /*- Menu -------------------------------------------------------------------*/
-  html#main-window menupopup:not(:-moz-lwtheme) {
-    --menu-color: var(--win-text-color) !important;
-    --menu-background-color: var(--win-component-bgcolor) !important;
-    --menu-border-color: var(--win-bgcolor) !important;
-    --menuitem-hover-background-color: var(--win-hover-bgcolor) !important;
-    --menu-disabled-color: var(--win-disabled-color) !important;
-    --menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important;
-  }
-
-  /*- Toolbar ----------------------------------------------------------------*/
-  :root:not(:-moz-lwtheme) #titlebar,
-  :root[lwt-default-theme-in-dark-mode] #titlebar {
-    --button-hover-bgcolor: var(--win-sidebar-button-hover-bgcolor);
-    --button-active-bgcolor: var(--win-sidebar-button-hover-active-bgcolor);
-    --toolbarbutton-hover-background: var(--win-sidebar-button-hover-bgcolor);
-    --toolbarbutton-active-background: var(--win-sidebar-button-hover-active-bgcolor);
-  }
-
-  /*- Sidebar ----------------------------------------------------------------*/
-  #sidebar-box:not([lwt-sidebar]) {
-    appearance: none !important;
-  }
-  :root:not(:-moz-lwtheme) #sidebar-box,
-  :root[lwt-default-theme-in-dark-mode] #sidebar-box {
-    --sidebar-background-color: var(--win-sidebar-bgcolor) !important;
-    --sidebar-text-color: var(--win-text-color) !important;
-    --sidebar-border-color: var(--win-border-color) !important;
-  }
-  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
-    .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
-      body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
-      .sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], /* Nightly */
-      body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] {
-      /* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */
-      --lwt-sidebar-background-color: transparent !important;
-      --lwt-sidebar-text-color: var(--win-text-color) !important;
-    }
-  }
-
-  :root:not(:-moz-lwtheme)
-    .subviewbutton:not(#appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2),
-  :root[lwt-default-theme-in-dark-mode]
-    .subviewbutton:not(#appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2) {
-    --button-hover-bgcolor: var(--win-hover-bgcolor) !important;
-    --button-active-bgcolor: var(--win-hover-active-bgcolor) !important;
-  }
-
-  /*- Others -----------------------------------------------------------------*/
-  /* For overwrite */
-  :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]):not(:-moz-lwtheme), /* Legacy */
-  :root:not(:-moz-lwtheme) {
-    /* Light Theme */
-    --lwt-accent-color: var(--win-bgcolor) !important;
-  }
-  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
-    :root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] {
-      --toolbar-bgcolor: var(--win-component-bgcolor) !important; /* Original: rgba(43, 42, 51, 1) */
-    }
-  }
-
-  #tabbrowser-tabs:not([movingtab])
-    > #tabbrowser-arrowscrollbox
-    > .tabbrowser-tab
-    > .tab-stack
-    > .tab-background[multiselected]:not([selected]):not(:-moz-lwtheme),
-  :root[lwtheme-mozlightdark] /* Legacy */
-    #tabbrowser-tabs:not([movingtab])
-    > #tabbrowser-arrowscrollbox
-    > .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);"])
-       #tabbrowser-tabs:not([movingtab])
-                           > #tabbrowser-arrowscrollbox
-                           > .tabbrowser-tab
-                           > .tab-stack
-                           > .tab-background[multiselected]:not([selected]) {
-    background-image: linear-gradient(
-        color-mix(in srgb, currentColor 11%, transparent),
-        color-mix(in srgb, currentColor 11%, transparent)
-      ),
-      linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
-  }
-}
-
-/*= Windows10 - Titlebar accent color ========================================*/
-@media (-moz-windows-accent-color-in-titlebar) {
-  /* Tab Bar */
-  :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color,
-  :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .titlebar-color {
-    color: -moz-accent-color-foreground;
-    background-color: -moz-accent-color;
-  }
-
-  :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .toolbar-items,
-  :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .toolbar-items {
-    --toolbarbutton-icon-fill: currentColor;
-    --toolbarbutton-hover-background: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent);
-    --toolbarbutton-active-background: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent);
-  }
-}
-
-/*= GTK - URL View url accent color ==========================================*/
-@include OS($linux) {
-  :root:not(:-moz-lwtheme) .urlbarView-url {
-    --urlbar-popup-url-color: -moz-accent-color;
-  }
-
-  /* Nightly Compatibility */
-  :root:not(:-moz-lwtheme) #urlbar {
-    --toolbar-field-focus-color: var(--toolbar-field-color); /* Nightly: rgba(0, 0, 0, 1)  */
-    --toolbar-field-focus-background-color: var(--toolbar-field-background-color); /* Nightly: white */
-  }
-}
-
-/*= Mac - Default like color =================================================*/
-@include OS($mac) {
-  :root:not(:-moz-lwtheme),
-  :root[lwt-default-theme-in-dark-mode] {
-    /* Colors */
-    --mac-text-color: -moz-dialogtext;
-    --mac-disabled-color: GrayText;
-    --mac-bgcolor: Window;
-    --mac-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog);
-    --mac-field-bgcolor: Window;
-    --mac-panel-bgcolor: Menu;
-    --mac-sidebar-bgcolor: -moz-mac-source-list;
-    --mac-sidebar-hover-bgcolor: color-mix(in srgb, ButtonFace 60%, var(--mac-sidebar-bgcolor));
-    --mac-hover-bgcolor: Window;
-    --mac-disabled-bgcolor: transparent;
-    --mac-primary-button-color: -moz-accent-color-foreground; /* or -moz-mac-menutextselect */
-    --mac-accent-color: -moz-accent-color; /* or LinkText */
-    --mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-accent-color);
-    --mac-accent-hover-color: color-mix(
-      in srgb,
-      rgb(0, 0, 0) 10%,
-      -moz-accent-color
-    ); /* or -moz-mac-menuselect, Highlight */
-    --mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, -moz-accent-color); /* or ActiveBorder */
-
-    /* Text, Icon Color */
-    --menu-color: var(--mac-text-color) !important;
-    --lwt-text-color: var(--mac-text-color) !important;
-    --button-color: var(--mac-text-color) !important;
-    --input-color: var(--mac-text-color) !important;
-    --toolbar-color: var(--mac-text-color) !important;
-    --toolbar-non-lwt-textcolor: var(--mac-text-color) !important;
-    --toolbarbutton-icon-fill: var(--mac-text-color) !important;
-    --toolbar-field-focus-color: var(--mac-text-color) !important;
-    --urlbar-popup-action-color: var(--mac-text-color) !important;
-    --toolbar-field-color: var(--mac-text-color) !important;
-    --autocomplete-popup-highlight-color: var(--mac-text-color) !important;
-    --tab-icon-overlay-fill: var(--mac-text-color) !important;
-    --panel-banner-item-color: var(--mac-text-color) !important;
-    --arrowpanel-color: var(--mac-text-color) !important;
-    --autocomplete-popup-color: var(--mac-text-color) !important;
-    --panel-shortcut-color: var(--mac-text-color) !important;
-    --panel-description-color: var(--mac-text-color) !important;
-
-    /* Text Disabled Color */
-    --menu-disabled-color: var(--mac-disabled-color) !important;
-    --button-active-bgcolor: var(--mac-disabled-color) !important;
-    --checkbox-unchecked-active-bgcolor: var(--mac-disabled-color) !important;
-    --panel-disabled-color: var(--mac-disabled-color) !important;
-    --download-progress-paused-color: var(--mac-disabled-color) !important;
-
-    /* Background Color */
-    --lwt-accent-color: var(--mac-bgcolor) !important;
-    --menu-background-color: var(--mac-bgcolor) !important;
-    --autocomplete-popup-background: var(--mac-bgcolor) !important;
-
-    /* Selected Background Color */
-    --toolbar-bgcolor: var(--mac-selected-bgcolor) !important;
-    --toolbar-non-lwt-bgcolor: var(--mac-selected-bgcolor) !important;
-
-    /* Field Backround Color */
-    --input-bgcolor: var(--mac-field-bgcolor) !important;
-    --toolbar-field-background-color: var(--mac-field-bgcolor) !important;
-    --tab-icon-overlay-stroke: var(--mac-field-bgcolor) !important;
-
-    /* Panel Backround Color */
-    --arrowpanel-background: var(--mac-panel-bgcolor) !important;
-
-    /* Hover Background Color  */
-    --menuitem-hover-background-color: var(--mac-hover-bgcolor) !important;
-    --toolbarbutton-hover-background: var(--mac-hover-bgcolor) !important;
-    --panel-banner-item-hover-bgcolor: var(--mac-hover-bgcolor) !important;
-
-    --button-bgcolor: var(--mac-hover-bgcolor) !important;
-    --checkbox-unchecked-bgcolor: var(--mac-hover-bgcolor) !important;
-    --panel-banner-item-background-color: var(--mac-hover-bgcolor) !important;
-    --urlbar-box-bgcolor: var(--mac-hover-bgcolor) !important;
-    --urlbar-box-focus-bgcolor: var(--mac-hover-bgcolor) !important;
-    --panel-banner-item-active-bgcolor: var(--mac-hover-bgcolor) !important;
-    --toolbarbutton-active-background: var(--mac-hover-bgcolor) !important;
-    --urlbar-box-active-bgcolor: var(--mac-hover-bgcolor) !important;
-    --autocomplete-popup-highlight-background: var(--mac-hover-bgcolor) !important;
-
-    --button-hover-bgcolor: var(--mac-hover-bgcolor) !important;
-    --checkbox-unchecked-hover-bgcolor: var(--mac-hover-bgcolor) !important;
-    --urlbar-box-hover-bgcolor: var(--mac-hover-bgcolor) !important;
-    --autocomplete-popup-hover-background: var(--mac-hover-bgcolor) !important;
-
-    /* Disabled Background Color */
-    --menuitem-disabled-hover-background-color: var(--mac-disabled-bgcolor) !important;
-
-    /* Border Color */
-    /*
-      --menu-border-color: var(--mac-bgcolor) !important;
-      --toolbar-field-border-color: var(--mac-bgcolor) !important;
-      --arrowpanel-border-color: var(--mac-bgcolor) !important;
-      --chrome-content-separator-color: var(--mac-bgcolor) !important;
-      --toolbarseparator-color: var(--mac-bgcolor) !important;
-      --panel-separator-color: var(--mac-bgcolor) !important;
-     */
-
-    /* Button Border Color */
-    /*
-      --tab-line-color: var(---mac-bgcolor) !important;
-      --checkbox-border-color: var(--mac-bgcolor) !important;
-      --input-border-color: var(--mac-bgcolor) !important;
-      --autocomplete-popup-separator-color: var(--mac-bgcolor) !important;
-     */
-
-    /* Accent Color Forground */
-    --button-primary-color: var(--mac-primary-button-color) !important;
-    --checkbox-checked-color: var(--mac-primary-button-color) !important;
-
-    /* Accent Color */
-    --button-primary-bgcolor: var(--mac-accent-color) !important;
-    --focus-outline-color: var(--mac-accent-color) !important;
-    --checkbox-checked-bgcolor: var(--mac-accent-color) !important;
-
-    /* Accent Content Color */
-    --toolbarbutton-icon-fill-attention: var(--mac-accent-content-color) !important;
-    --urlbar-popup-url-color: var(--mac-accent-content-color) !important;
-    --download-progress-fill-color: var(--mac-accent-content-color) !important;
-
-    /* Accent Hover Color */
-    --button-primary-hover-bgcolor: var(--mac-accent-hover-color) !important;
-    --checkbox-checked-hover-bgcolor: var(--mac-accent-hover-color) !important;
-
-    /* Accent Hover Active Color */
-    --button-primary-active-bgcolor: var(--mac-accent-active-color) !important;
-    --checkbox-checked-active-bgcolor: var(--mac-accent-active-color) !important;
-
-    /* Error Color */
-    /*
-      --error-text-color: var(--win-error-color) !important;
-      --input-error-border-color: var(--win-error-color) !important;
-     */
-
-    /* Others */
-    --tab-selected-bgcolor: unset !important;
-    --tabs-border-color: transparent !important;
-    --checkbox-checked-border-color: transparent !important;
-
-    /* Other Defaults */
-    --arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent) !important;
-    --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent) !important;
-    --arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent) !important;
-
-    --download-progress-flare-color: rgba(255, 255, 255, 0.75) !important;
-
-    --panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important;
-  }
-  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
-    :root:not(:-moz-lwtheme),
-    :root[lwt-default-theme-in-dark-mode] {
-      --mac-field-bgcolor: Field;
-      --mac-panel-bgcolor: -moz-CellHighlight;
-      --mac-hover-bgcolor: ButtonFace;
-
-      --toolbar-field-focus-background-color: var(--mac-bgcolor) !important;
-      --toolbar-field-background-color: var(--mac-sidebar-bgcolor) !important;
-    }
-  }
-
-  /*- Toolbar ----------------------------------------------------------------*/
-  :root:not(:-moz-lwtheme) #navigator-toolbox,
-  :root[lwt-default-theme-in-dark-mode] #navigator-toolbox {
-    appearance: auto !important;
-  }
-
-  :root:not(:-moz-lwtheme) #titlebar {
-    --mac-hover-bgcolor: ButtonFace;
-  }
-  :root:not(:-moz-lwtheme) #titlebar,
-  :root[lwt-default-theme-in-dark-mode] #titlebar {
-    --button-hover-bgcolor: var(--mac-hover-bgcolor);
-    --button-active-bgcolor: var(--mac-hover-bgcolor);
-    --toolbarbutton-hover-background: var(--mac-hover-bgcolor);
-    --toolbarbutton-active-background: var(--mac-hover-bgcolor);
-  }
-
-  :root[lwt-default-theme-in-dark-mode] #urlbar {
-    --autocomplete-popup-highlight-background: var(--mac-hover-bgcolor) !important;
-    --autocomplete-popup-hover-background: var(--mac-hover-bgcolor) !important;
-  }
-
-  /*- Sidebar ----------------------------------------------------------------*/
-  #sidebar-box:not([lwt-sidebar]) {
-    appearance: none !important;
-  }
-  :root:not(:-moz-lwtheme) #sidebar-box,
-  :root[lwt-default-theme-in-dark-mode] #sidebar-box {
-    --sidebar-background-color: var(--mac-sidebar-bgcolor) !important;
-    --sidebar-text-color: var(--mac-text-color) !important;
-    /* --sidebar-border-color: var(--win-sidebar-border-color) !important; */
-  }
-  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
-    .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
-      body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
-      .sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], /* Nightly */
-      body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] {
-      /* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */
-      --lwt-sidebar-background-color: transparent !important;
-      --lwt-sidebar-text-color: var(--mac-text-color) !important;
-    }
-  }
-
-  :root[lwt-default-theme-in-dark-mode] #sidebarMenu-popup {
-    --button-hover-bgcolor: var(--mac-sidebar-hover-bgcolor);
-    --button-active-bgcolor: var(--mac-sidebar-hover-bgcolor);
-  }
-
-  /*- Others -----------------------------------------------------------------*/
-  /* For Overwrite */
-  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
-    :root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] {
-      --toolbar-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
-    }
-  }
-
-  /* Hard Coded */
-  :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */
-    #tabbrowser-tabs:not([movingtab])
-    > #tabbrowser-arrowscrollbox
-    > .tabbrowser-tab
-    > .tab-stack
-    > .tab-background[selected="true"],
-  :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode]
-    #tabbrowser-tabs:not([movingtab])
-    > #tabbrowser-arrowscrollbox
-    > .tabbrowser-tab
-    > .tab-stack
-    > .tab-background[selected="true"] {
-    background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
-  }
-
-  :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::before,
-  :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::after,
-  :root:not([customizing="true"])[lwt-default-theme-in-dark-mode] tab[visuallyselected] > stack::before,
-  :root:not([customizing="true"])[lwt-default-theme-in-dark-mode] tab[visuallyselected] > stack::after {
-    fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
-  }
-}
+@import "theme/system_default_theme";
 
 /** Fully Theme Mode **********************************************************/
 /* Default Themes