From 6f8c216242717c399af5b70d3ce025f0c8a62d46 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Wed, 30 Mar 2022 01:04:38 +0900
Subject: [PATCH 01/25] Add: Option - `userChrome.icon.panel_photon` #308

---
 src/icons/_panel.scss        | 17 +++++++++++++++--
 src/panel/_icon_padding.scss |  2 +-
 user.js                      |  3 ++-
 userChrome.css               | 21 +++++++++++++++++----
 4 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/icons/_panel.scss b/src/icons/_panel.scss
index 33314c7..7b243e7 100644
--- a/src/icons/_panel.scss
+++ b/src/icons/_panel.scss
@@ -24,11 +24,22 @@
   background-image: var(--avatar-image-url) !important;
 }
 
-@include Option("userChrome.icon.panel_full") {
+@include Option("userChrome.icon.panel_full", "userChrome.icon.panel_photon") {
   #appMenu-new-tab-button2 {
     list-style-image: url("chrome://browser/skin/new-tab.svg");
   }
 }
+@include Option("userChrome.icon.panel_photon") {
+  #appMenu-save-file-button2,
+  #appMenu-find-button2,
+  #appMenu-more-button2 {
+    padding-top: var(--arrowpanel-menuitemblank-padding) !important;
+    padding-bottom: var(--arrowpanel-menuitemblank-padding) !important;
+  }
+  #appMenu-zoom-controls2 {
+    padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
+  }
+}
 @include Option("userChrome.icon.panel_sparse") {
   #appMenu-new-tab-button2,           /* Seperate */
   #appMenu-passwords-button,          /* Seperate */
@@ -61,7 +72,7 @@
 #appMenu-downloads-button {
   list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
 }
-@include Option("userChrome.icon.panel_full") {
+@include Option("userChrome.icon.panel_full", "userChrome.icon.panel_photon") {
   #appMenu-passwords-button {
     list-style-image: url("chrome://browser/skin/login.svg");
   }
@@ -92,6 +103,8 @@
   #appMenu-more-button2 {
     list-style-image: url("chrome://browser/skin/ion.svg");
   }
+}
+@include Option("userChrome.icon.panel_full", "userChrome.icon.panel_photon") {
   #appMenu-help-button2 {
     list-style-image: url("chrome://global/skin/icons/help.svg");
   }
diff --git a/src/panel/_icon_padding.scss b/src/panel/_icon_padding.scss
index 004e0de..b53ebe4 100644
--- a/src/panel/_icon_padding.scss
+++ b/src/panel/_icon_padding.scss
@@ -7,7 +7,7 @@
   width: 16px;
 }
 
-@include Option("userChrome.icon.panel_sparse") {
+@include Option("userChrome.icon.panel_photon", "userChrome.icon.panel_sparse") {
   :root {
     /* Blank Menu Left Padding */
     --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px);
diff --git a/user.js b/user.js
index 06cd23d..a53d8a7 100644
--- a/user.js
+++ b/user.js
@@ -42,7 +42,8 @@ user_pref("userChrome.tab.newtab_button_like_tab",     true); // Original
 // user_pref("userChrome.tab.newtab_button_proton",    true); // Proton
 
 user_pref("userChrome.icon.panel_full",                true); // Original, Proton
-// user_pref("userChrome.icon.panel_sparse",           true); // Photon
+// user_pref("userChrome.icon.panel_photon",           true); // Photon
+// user_pref("userChrome.icon.panel_sparse",           true); // Just option
 
 // Original Only
 user_pref("userChrome.tab.box_shadow",                 true);
diff --git a/userChrome.css b/userChrome.css
index 5e0295a..61b49f4 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -5078,7 +5078,7 @@
     width: 16px;
   }
 
-  @supports -moz-bool-pref("userChrome.icon.panel_sparse") {
+  @supports -moz-bool-pref("userChrome.icon.panel_photon") or -moz-bool-pref("userChrome.icon.panel_sparse") {
     :root {
       /* Blank Menu Left Padding */
       --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px);
@@ -5210,11 +5210,23 @@
     background-image: var(--avatar-image-url) !important;
   }
 
-  @supports -moz-bool-pref("userChrome.icon.panel_full") {
+  @supports -moz-bool-pref("userChrome.icon.panel_full") or -moz-bool-pref("userChrome.icon.panel_photon") {
     #appMenu-new-tab-button2 {
       list-style-image: url("chrome://browser/skin/new-tab.svg");
     }
   }
+  @supports -moz-bool-pref("userChrome.icon.panel_photon") {
+    #appMenu-save-file-button2,
+    #appMenu-find-button2,
+    #appMenu-more-button2 {
+      padding-top: var(--arrowpanel-menuitemblank-padding) !important;
+      padding-bottom: var(--arrowpanel-menuitemblank-padding) !important;
+    }
+
+    #appMenu-zoom-controls2 {
+      padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
+    }
+  }
   @supports -moz-bool-pref("userChrome.icon.panel_sparse") {
     #appMenu-new-tab-button2,
     #appMenu-passwords-button,
@@ -5252,7 +5264,7 @@
     list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
   }
 
-  @supports -moz-bool-pref("userChrome.icon.panel_full") {
+  @supports -moz-bool-pref("userChrome.icon.panel_full") or -moz-bool-pref("userChrome.icon.panel_photon") {
     #appMenu-passwords-button {
       list-style-image: url("chrome://browser/skin/login.svg");
     }
@@ -5286,7 +5298,8 @@
     #appMenu-more-button2 {
       list-style-image: url("chrome://browser/skin/ion.svg");
     }
-
+  }
+  @supports -moz-bool-pref("userChrome.icon.panel_full") or -moz-bool-pref("userChrome.icon.panel_photon") {
     #appMenu-help-button2 {
       list-style-image: url("chrome://global/skin/icons/help.svg");
     }

From 21932e878adae9fc709534ef23b41daeaf3bcb88 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Thu, 31 Mar 2022 10:08:53 +0900
Subject: [PATCH 02/25] Add: Option -
 `userChrome.theme.proton_color.dark_blue_accent` #202

---
 src/theme/_dark_blue_accent.scss | 51 +++++++++++++++++++++++++
 src/userChrome.scss              |  5 +++
 user.js                          |  2 +
 userChrome.css                   | 64 ++++++++++++++++++++++++++++++++
 4 files changed, 122 insertions(+)
 create mode 100644 src/theme/_dark_blue_accent.scss

diff --git a/src/theme/_dark_blue_accent.scss b/src/theme/_dark_blue_accent.scss
new file mode 100644
index 0000000..c4e5387
--- /dev/null
+++ b/src/theme/_dark_blue_accent.scss
@@ -0,0 +1,51 @@
+:host, :root {
+  /* Color Memo
+  Just refer - Photon's dark color
+  --button-primary-bgcolor: #0060DF;
+  --button-primary-hover-bgcolor: #003EAA;
+  --button-primary-active-bgcolor: #002275;
+  --lwt-brighttext-url-color: #74c0ff;
+  --lwt-toolbarbutton-icon-fill-attention: #45a1ff;
+
+  Just refer - Proton's light color
+  --in-content-accent-color: #0a84ff;
+  --in-content-accent-color-active: #0060df;
+  --in-content-primary-button-background: #0061e0;
+  --in-content-primary-button-background-hover: #0250bb;
+  --in-content-primary-button-background-active: #053e94;
+
+  --blue-40: #45a1ff; rgb(69, 161, 255)
+  --blue-50: #0a84ff; rgb(10, 132, 255)
+  --blue-60: #0060df; rgb(0, 96, 223)
+  --blue-70: #003eaa; rgb(0, 62, 170)
+  --blue-80: #002275; rgb(0, 34, 117)
+
+  Relation
+  lighten(#0060df,   29%): #74b0ff;
+  lighten(#0060df, 19.8%): #4595ff
+  lighten(#0060df,  8.3%): #0a74ff
+  #0060df
+  darken(#0060df, 15.5%):  #003e90;
+  darken(#0060df, 28.1%):  #002250;
+ */
+  --blue-30: #74c0ff; /* rgb(116, 192, 255), Add for active color */
+
+  --organizer-outline-color: var(--blue-50) !important;
+}
+
+:host, :root, button, select, input, menulist, radio {
+  --in-content-primary-button-background: var(--blue-50) !important;
+  --in-content-primary-button-background-hover: var(--blue-40) !important;
+  --in-content-primary-button-background-active: var(--blue-30) !important;
+}
+
+#{built-in-dark-theme()} {
+  --button-primary-bgcolor: var(--blue-50) !important;
+  --button-primary-hover-bgcolor: var(--blue-40) !important;
+  --button-primary-active-bgcolor: var(--blue-30) !important;
+  --focus-outline-color: var(--blue-50) !important;
+  --lwt-toolbarbutton-icon-fill-attention: var(--blue-50) !important;
+  --download-progress-fill-color: var(--blue-50) !important;
+  --panel-banner-item-info-icon-bgcolor: var(--blue-40) !important;
+  --lwt-brighttext-url-color: var(--blue-30) !important; /* Original: as primary bgcolor */
+}
diff --git a/src/userChrome.scss b/src/userChrome.scss
index d281909..3e88bf4 100644
--- a/src/userChrome.scss
+++ b/src/userChrome.scss
@@ -29,6 +29,11 @@
 
 @include Option("userChrome.theme.proton_color") {
   @import "theme/proton_color";
+  @include Option("userChrome.theme.proton_color.dark_blue_accent") {
+    @include Dark {
+      @import "theme/dark_blue_accent";
+    }
+  }
 }
 @include Option("userChrome.theme.fully_color") {
   @import "theme/fully_color";
diff --git a/user.js b/user.js
index a53d8a7..af767a7 100644
--- a/user.js
+++ b/user.js
@@ -63,6 +63,8 @@ user_pref("userChrome.tab.bottom_rounded_corner",      true);
 // user_pref("userChrome.decoration.disable_panel_animate",   true);
 // user_pref("userChrome.decoration.disable_sidebar_animate", true);
 
+// user_pref("userChrome.theme.proton_color.dark_blue_accent", true);
+
 // user_pref("userChrome.padding.first_tab",                  true);
 // user_pref("userChrome.padding.drag_space",                 true);
 
diff --git a/userChrome.css b/userChrome.css
index 61b49f4..9bd1b6e 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -1074,6 +1074,70 @@
       --dialog-warning-text-color: var(--red-40);
     }
   }
+  @supports -moz-bool-pref("userChrome.theme.proton_color.dark_blue_accent") {
+    @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+      :host,
+      :root {
+        /* Color Memo
+         Just refer - Photon's dark color
+         --button-primary-bgcolor: #0060DF;
+         --button-primary-hover-bgcolor: #003EAA;
+         --button-primary-active-bgcolor: #002275;
+         --lwt-brighttext-url-color: #74c0ff;
+         --lwt-toolbarbutton-icon-fill-attention: #45a1ff;
+
+         Just refer - Proton's light color
+         --in-content-accent-color: #0a84ff;
+         --in-content-accent-color-active: #0060df;
+         --in-content-primary-button-background: #0061e0;
+         --in-content-primary-button-background-hover: #0250bb;
+         --in-content-primary-button-background-active: #053e94;
+
+         --blue-40: #45a1ff; rgb(69, 161, 255)
+         --blue-50: #0a84ff; rgb(10, 132, 255)
+         --blue-60: #0060df; rgb(0, 96, 223)
+         --blue-70: #003eaa; rgb(0, 62, 170)
+         --blue-80: #002275; rgb(0, 34, 117)
+
+         Relation
+         lighten(#0060df,   29%): #74b0ff;
+         lighten(#0060df, 19.8%): #4595ff
+         lighten(#0060df,  8.3%): #0a74ff
+         #0060df
+         darken(#0060df, 15.5%):  #003e90;
+         darken(#0060df, 28.1%):  #002250;
+        */
+        --blue-30: #74c0ff;
+        /* rgb(116, 192, 255), Add for active color */
+        --organizer-outline-color: var(--blue-50) !important;
+      }
+
+      :host,
+      :root,
+      button,
+      select,
+      input,
+      menulist,
+      radio {
+        --in-content-primary-button-background: var(--blue-50) !important;
+        --in-content-primary-button-background-hover: var(--blue-40) !important;
+        --in-content-primary-button-background-active: var(--blue-30) !important;
+      }
+
+      :root[lwtheme-mozlightdark][lwthemetextcolor="bright"],
+      :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] {
+        --button-primary-bgcolor: var(--blue-50) !important;
+        --button-primary-hover-bgcolor: var(--blue-40) !important;
+        --button-primary-active-bgcolor: var(--blue-30) !important;
+        --focus-outline-color: var(--blue-50) !important;
+        --lwt-toolbarbutton-icon-fill-attention: var(--blue-50) !important;
+        --download-progress-fill-color: var(--blue-50) !important;
+        --panel-banner-item-info-icon-bgcolor: var(--blue-40) !important;
+        --lwt-brighttext-url-color: var(--blue-30) !important;
+        /* Original: as primary bgcolor */
+      }
+    }
+  }
 }
 @supports -moz-bool-pref("userChrome.theme.fully_color") {
   /*== Menu Color ==============================================================*/

From 0b0c7dfcae23f56838c0ee19300000b05c6cc2aa Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Thu, 31 Mar 2022 10:23:07 +0900
Subject: [PATCH 03/25] Fix: Dark blue accent - focus line, primary, link color
 #202

---
 src/theme/_dark_blue_accent.scss | 25 ++++++++++++++++++++-----
 userChrome.css                   | 21 ++++++++++++++++-----
 2 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/theme/_dark_blue_accent.scss b/src/theme/_dark_blue_accent.scss
index c4e5387..2e2657c 100644
--- a/src/theme/_dark_blue_accent.scss
+++ b/src/theme/_dark_blue_accent.scss
@@ -28,24 +28,39 @@
   darken(#0060df, 15.5%):  #003e90;
   darken(#0060df, 28.1%):  #002250;
  */
+  --blue-20: #b6d6ff; /* lighten(#0060df, 42%) - rgb(182, 214, 255), Add for link active color*/
   --blue-30: #74c0ff; /* rgb(116, 192, 255), Add for active color */
 
-  --organizer-outline-color: var(--blue-50) !important;
+  --organizer-outline-color: var(--blue-40) !important;
 }
 
 :host, :root, button, select, input, menulist, radio {
+  --in-content-primary-button-text-color: var(--in-content-page-color) !important;
   --in-content-primary-button-background: var(--blue-50) !important;
   --in-content-primary-button-background-hover: var(--blue-40) !important;
   --in-content-primary-button-background-active: var(--blue-30) !important;
+
+  --in-content-focus-outline-color: var(--blue-40) !important;
+  --in-content-accent-color: var(--blue-40) !important;
+  --in-content-accent-color-active: var(--blue-30) !important;
+
+  --in-content-link-color: var(--blue-40) !important;
+  --in-content-link-color-hover: var(--blue-30) !important;
+  --in-content-link-color-active: var(--blue-20) !important;
+  --in-content-link-color-visited: var(--blue-40) !important;
 }
 
 #{built-in-dark-theme()} {
+  --button-primary-color: var(--in-content-page-color) !important;
   --button-primary-bgcolor: var(--blue-50) !important;
   --button-primary-hover-bgcolor: var(--blue-40) !important;
   --button-primary-active-bgcolor: var(--blue-30) !important;
-  --focus-outline-color: var(--blue-50) !important;
-  --lwt-toolbarbutton-icon-fill-attention: var(--blue-50) !important;
-  --download-progress-fill-color: var(--blue-50) !important;
-  --panel-banner-item-info-icon-bgcolor: var(--blue-40) !important;
+
+  --focus-outline-color: var(--blue-40) !important;
+
+  --lwt-toolbarbutton-icon-fill-attention: var(--blue-40) !important;
+  --download-progress-fill-color: var(--blue-40) !important;
+  --panel-banner-item-info-icon-bgcolor: var(--blue-30) !important;
+
   --lwt-brighttext-url-color: var(--blue-30) !important; /* Original: as primary bgcolor */
 }
diff --git a/userChrome.css b/userChrome.css
index 9bd1b6e..987456a 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -1107,9 +1107,11 @@
          darken(#0060df, 15.5%):  #003e90;
          darken(#0060df, 28.1%):  #002250;
         */
+        --blue-20: #b6d6ff;
+        /* lighten(#0060df, 42%) - rgb(182, 214, 255), Add for link active color*/
         --blue-30: #74c0ff;
         /* rgb(116, 192, 255), Add for active color */
-        --organizer-outline-color: var(--blue-50) !important;
+        --organizer-outline-color: var(--blue-40) !important;
       }
 
       :host,
@@ -1119,20 +1121,29 @@
       input,
       menulist,
       radio {
+        --in-content-primary-button-text-color: var(--in-content-page-color) !important;
         --in-content-primary-button-background: var(--blue-50) !important;
         --in-content-primary-button-background-hover: var(--blue-40) !important;
         --in-content-primary-button-background-active: var(--blue-30) !important;
+        --in-content-focus-outline-color: var(--blue-40) !important;
+        --in-content-accent-color: var(--blue-40) !important;
+        --in-content-accent-color-active: var(--blue-30) !important;
+        --in-content-link-color: var(--blue-40) !important;
+        --in-content-link-color-hover: var(--blue-30) !important;
+        --in-content-link-color-active: var(--blue-20) !important;
+        --in-content-link-color-visited: var(--blue-40) !important;
       }
 
       :root[lwtheme-mozlightdark][lwthemetextcolor="bright"],
       :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] {
+        --button-primary-color: var(--in-content-page-color) !important;
         --button-primary-bgcolor: var(--blue-50) !important;
         --button-primary-hover-bgcolor: var(--blue-40) !important;
         --button-primary-active-bgcolor: var(--blue-30) !important;
-        --focus-outline-color: var(--blue-50) !important;
-        --lwt-toolbarbutton-icon-fill-attention: var(--blue-50) !important;
-        --download-progress-fill-color: var(--blue-50) !important;
-        --panel-banner-item-info-icon-bgcolor: var(--blue-40) !important;
+        --focus-outline-color: var(--blue-40) !important;
+        --lwt-toolbarbutton-icon-fill-attention: var(--blue-40) !important;
+        --download-progress-fill-color: var(--blue-40) !important;
+        --panel-banner-item-info-icon-bgcolor: var(--blue-30) !important;
         --lwt-brighttext-url-color: var(--blue-30) !important;
         /* Original: as primary bgcolor */
       }

From f07e7d5a884838833d208b07f2dc8f14baca80b0 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Thu, 31 Mar 2022 10:46:53 +0900
Subject: [PATCH 04/25] Fix: Dark blue accent - Table header #202

---
 src/theme/_dark_blue_accent.scss | 5 +++++
 src/theme/_proton_color.scss     | 1 +
 userChrome.css                   | 5 +++++
 userContent.css                  | 1 +
 4 files changed, 12 insertions(+)

diff --git a/src/theme/_dark_blue_accent.scss b/src/theme/_dark_blue_accent.scss
index 2e2657c..4f19975 100644
--- a/src/theme/_dark_blue_accent.scss
+++ b/src/theme/_dark_blue_accent.scss
@@ -44,6 +44,11 @@
   --in-content-accent-color: var(--blue-40) !important;
   --in-content-accent-color-active: var(--blue-30) !important;
 
+  --in-content-table-background: rgb(35, 34, 43) !important;
+  --in-content-table-border-color: rgba(249,249,250,0.2) !important;
+  --in-content-table-header-background: rgb(5, 64, 150) !important;
+  --in-content-table-header-color: var(--in-content-page-color) !important;
+
   --in-content-link-color: var(--blue-40) !important;
   --in-content-link-color-hover: var(--blue-30) !important;
   --in-content-link-color-active: var(--blue-20) !important;
diff --git a/src/theme/_proton_color.scss b/src/theme/_proton_color.scss
index 28b40bb..cd69e70 100644
--- a/src/theme/_proton_color.scss
+++ b/src/theme/_proton_color.scss
@@ -49,6 +49,7 @@
 
   --in-content-table-background: #f8f8fa;
   --in-content-table-border-color: var(--in-content-box-border-color); /* Legacy: #d1d1d1; rgba(249, 249, 250, 0.2) */
+  --in-content-table-border-dark-color: var(--in-content-table-border-color);
   --in-content-table-header-background: var(
     --in-content-primary-button-background
   ); /* Legacy: #0a84ff; rgb(5, 64, 150); */
diff --git a/userChrome.css b/userChrome.css
index 987456a..9bff886 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -984,6 +984,7 @@
     --in-content-table-background: #f8f8fa;
     --in-content-table-border-color: var(--in-content-box-border-color);
     /* Legacy: #d1d1d1; rgba(249, 249, 250, 0.2) */
+    --in-content-table-border-dark-color: var(--in-content-table-border-color);
     --in-content-table-header-background: var(--in-content-primary-button-background);
     /* Legacy: #0a84ff; rgb(5, 64, 150); */
     --in-content-table-header-color: var(--in-content-primary-button-text-color);
@@ -1128,6 +1129,10 @@
         --in-content-focus-outline-color: var(--blue-40) !important;
         --in-content-accent-color: var(--blue-40) !important;
         --in-content-accent-color-active: var(--blue-30) !important;
+        --in-content-table-background: rgb(35, 34, 43) !important;
+        --in-content-table-border-color: rgba(249, 249, 250, 0.2) !important;
+        --in-content-table-header-background: rgb(5, 64, 150) !important;
+        --in-content-table-header-color: var(--in-content-page-color) !important;
         --in-content-link-color: var(--blue-40) !important;
         --in-content-link-color-hover: var(--blue-30) !important;
         --in-content-link-color-active: var(--blue-20) !important;
diff --git a/userContent.css b/userContent.css
index e4b98ab..3f8358d 100644
--- a/userContent.css
+++ b/userContent.css
@@ -578,6 +578,7 @@
     --in-content-table-background: #f8f8fa;
     --in-content-table-border-color: var(--in-content-box-border-color);
     /* Legacy: #d1d1d1; rgba(249, 249, 250, 0.2) */
+    --in-content-table-border-dark-color: var(--in-content-table-border-color);
     --in-content-table-header-background: var(--in-content-primary-button-background);
     /* Legacy: #0a84ff; rgb(5, 64, 150); */
     --in-content-table-header-color: var(--in-content-primary-button-text-color);

From 76796897916c1367d6cc02103526dedf95c3fd20 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Thu, 31 Mar 2022 11:24:42 +0900
Subject: [PATCH 05/25] Fix: Dark blue accent - primary bg color as `--blue-60`
 #202

---
 src/theme/_dark_blue_accent.scss | 12 ++++++------
 userChrome.css                   | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/theme/_dark_blue_accent.scss b/src/theme/_dark_blue_accent.scss
index 4f19975..82ba141 100644
--- a/src/theme/_dark_blue_accent.scss
+++ b/src/theme/_dark_blue_accent.scss
@@ -36,9 +36,9 @@
 
 :host, :root, button, select, input, menulist, radio {
   --in-content-primary-button-text-color: var(--in-content-page-color) !important;
-  --in-content-primary-button-background: var(--blue-50) !important;
-  --in-content-primary-button-background-hover: var(--blue-40) !important;
-  --in-content-primary-button-background-active: var(--blue-30) !important;
+  --in-content-primary-button-background: var(--blue-60) !important;
+  --in-content-primary-button-background-hover: var(--blue-50) !important;
+  --in-content-primary-button-background-active: var(--blue-40) !important;
 
   --in-content-focus-outline-color: var(--blue-40) !important;
   --in-content-accent-color: var(--blue-40) !important;
@@ -57,9 +57,9 @@
 
 #{built-in-dark-theme()} {
   --button-primary-color: var(--in-content-page-color) !important;
-  --button-primary-bgcolor: var(--blue-50) !important;
-  --button-primary-hover-bgcolor: var(--blue-40) !important;
-  --button-primary-active-bgcolor: var(--blue-30) !important;
+  --button-primary-bgcolor: var(--blue-60) !important;
+  --button-primary-hover-bgcolor: var(--blue-50) !important;
+  --button-primary-active-bgcolor: var(--blue-40) !important;
 
   --focus-outline-color: var(--blue-40) !important;
 
diff --git a/userChrome.css b/userChrome.css
index 9bff886..71b74bf 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -1123,9 +1123,9 @@
       menulist,
       radio {
         --in-content-primary-button-text-color: var(--in-content-page-color) !important;
-        --in-content-primary-button-background: var(--blue-50) !important;
-        --in-content-primary-button-background-hover: var(--blue-40) !important;
-        --in-content-primary-button-background-active: var(--blue-30) !important;
+        --in-content-primary-button-background: var(--blue-60) !important;
+        --in-content-primary-button-background-hover: var(--blue-50) !important;
+        --in-content-primary-button-background-active: var(--blue-40) !important;
         --in-content-focus-outline-color: var(--blue-40) !important;
         --in-content-accent-color: var(--blue-40) !important;
         --in-content-accent-color-active: var(--blue-30) !important;
@@ -1142,9 +1142,9 @@
       :root[lwtheme-mozlightdark][lwthemetextcolor="bright"],
       :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] {
         --button-primary-color: var(--in-content-page-color) !important;
-        --button-primary-bgcolor: var(--blue-50) !important;
-        --button-primary-hover-bgcolor: var(--blue-40) !important;
-        --button-primary-active-bgcolor: var(--blue-30) !important;
+        --button-primary-bgcolor: var(--blue-60) !important;
+        --button-primary-hover-bgcolor: var(--blue-50) !important;
+        --button-primary-active-bgcolor: var(--blue-40) !important;
         --focus-outline-color: var(--blue-40) !important;
         --lwt-toolbarbutton-icon-fill-attention: var(--blue-40) !important;
         --download-progress-fill-color: var(--blue-40) !important;

From 5e64b64c28079a55a50352ea5cd7a9a9965b7ad2 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Thu, 31 Mar 2022 12:51:25 +0900
Subject: [PATCH 06/25] Add: Option -
 `userContent.page.proton_color.dark_blue_accent` #202

---
 src/contents/_dark_blue_accent.scss | 13 +++++
 src/theme/_dark_blue_accent.scss    | 83 ++++++-----------------------
 src/theme/_dark_blue_color.scss     | 56 +++++++++++++++++++
 src/userChrome.scss                 |  4 +-
 src/userContent.scss                |  3 ++
 user.js                             |  1 +
 userContent.css                     | 67 +++++++++++++++++++++++
 7 files changed, 158 insertions(+), 69 deletions(-)
 create mode 100644 src/contents/_dark_blue_accent.scss
 create mode 100644 src/theme/_dark_blue_color.scss

diff --git a/src/contents/_dark_blue_accent.scss b/src/contents/_dark_blue_accent.scss
new file mode 100644
index 0000000..41ba6ca
--- /dev/null
+++ b/src/contents/_dark_blue_accent.scss
@@ -0,0 +1,13 @@
+@-moz-document url-prefix("about:"),
+               url-prefix("https://addons.mozilla.org"),
+               url-prefix("https://support.mozilla.org"),
+               url-prefix("https://accounts.firefox.com"),
+               regexp("^((file:\/\/\/)|(chrome:\/\/)).*\/$") {
+  @include Dark {
+    @import "../theme/dark_blue_color";
+
+    :host, :root {
+      @include DarkBlueContent;
+    }
+  }
+}
diff --git a/src/theme/_dark_blue_accent.scss b/src/theme/_dark_blue_accent.scss
index 82ba141..2d740e7 100644
--- a/src/theme/_dark_blue_accent.scss
+++ b/src/theme/_dark_blue_accent.scss
@@ -1,71 +1,22 @@
-:host, :root {
-  /* Color Memo
-  Just refer - Photon's dark color
-  --button-primary-bgcolor: #0060DF;
-  --button-primary-hover-bgcolor: #003EAA;
-  --button-primary-active-bgcolor: #002275;
-  --lwt-brighttext-url-color: #74c0ff;
-  --lwt-toolbarbutton-icon-fill-attention: #45a1ff;
+@include Dark {
+  @import "dark_blue_color";
 
-  Just refer - Proton's light color
-  --in-content-accent-color: #0a84ff;
-  --in-content-accent-color-active: #0060df;
-  --in-content-primary-button-background: #0061e0;
-  --in-content-primary-button-background-hover: #0250bb;
-  --in-content-primary-button-background-active: #053e94;
+  :host, :root, button, select, input, menulist, radio {
+    @include DarkBlueContent;
+  }
 
-  --blue-40: #45a1ff; rgb(69, 161, 255)
-  --blue-50: #0a84ff; rgb(10, 132, 255)
-  --blue-60: #0060df; rgb(0, 96, 223)
-  --blue-70: #003eaa; rgb(0, 62, 170)
-  --blue-80: #002275; rgb(0, 34, 117)
+  #{built-in-dark-theme()} {
+    --button-primary-color: var(--in-content-page-color) !important;
+    --button-primary-bgcolor: var(--blue-60) !important;
+    --button-primary-hover-bgcolor: var(--blue-50) !important;
+    --button-primary-active-bgcolor: var(--blue-40) !important;
 
-  Relation
-  lighten(#0060df,   29%): #74b0ff;
-  lighten(#0060df, 19.8%): #4595ff
-  lighten(#0060df,  8.3%): #0a74ff
-  #0060df
-  darken(#0060df, 15.5%):  #003e90;
-  darken(#0060df, 28.1%):  #002250;
- */
-  --blue-20: #b6d6ff; /* lighten(#0060df, 42%) - rgb(182, 214, 255), Add for link active color*/
-  --blue-30: #74c0ff; /* rgb(116, 192, 255), Add for active color */
+    --focus-outline-color: var(--blue-40) !important;
 
-  --organizer-outline-color: var(--blue-40) !important;
-}
-
-:host, :root, button, select, input, menulist, radio {
-  --in-content-primary-button-text-color: var(--in-content-page-color) !important;
-  --in-content-primary-button-background: var(--blue-60) !important;
-  --in-content-primary-button-background-hover: var(--blue-50) !important;
-  --in-content-primary-button-background-active: var(--blue-40) !important;
-
-  --in-content-focus-outline-color: var(--blue-40) !important;
-  --in-content-accent-color: var(--blue-40) !important;
-  --in-content-accent-color-active: var(--blue-30) !important;
-
-  --in-content-table-background: rgb(35, 34, 43) !important;
-  --in-content-table-border-color: rgba(249,249,250,0.2) !important;
-  --in-content-table-header-background: rgb(5, 64, 150) !important;
-  --in-content-table-header-color: var(--in-content-page-color) !important;
-
-  --in-content-link-color: var(--blue-40) !important;
-  --in-content-link-color-hover: var(--blue-30) !important;
-  --in-content-link-color-active: var(--blue-20) !important;
-  --in-content-link-color-visited: var(--blue-40) !important;
-}
-
-#{built-in-dark-theme()} {
-  --button-primary-color: var(--in-content-page-color) !important;
-  --button-primary-bgcolor: var(--blue-60) !important;
-  --button-primary-hover-bgcolor: var(--blue-50) !important;
-  --button-primary-active-bgcolor: var(--blue-40) !important;
-
-  --focus-outline-color: var(--blue-40) !important;
-
-  --lwt-toolbarbutton-icon-fill-attention: var(--blue-40) !important;
-  --download-progress-fill-color: var(--blue-40) !important;
-  --panel-banner-item-info-icon-bgcolor: var(--blue-30) !important;
-
-  --lwt-brighttext-url-color: var(--blue-30) !important; /* Original: as primary bgcolor */
+    --lwt-toolbarbutton-icon-fill-attention: var(--blue-40) !important;
+    --download-progress-fill-color: var(--blue-40) !important;
+    --panel-banner-item-info-icon-bgcolor: var(--blue-30) !important;
+
+    --lwt-brighttext-url-color: var(--blue-30) !important; /* Original: as primary bgcolor */
+  }
 }
diff --git a/src/theme/_dark_blue_color.scss b/src/theme/_dark_blue_color.scss
new file mode 100644
index 0000000..9205f3e
--- /dev/null
+++ b/src/theme/_dark_blue_color.scss
@@ -0,0 +1,56 @@
+:host, :root {
+  /* Color Memo
+  Just refer - Photon's dark color
+  --button-primary-bgcolor: #0060DF;
+  --button-primary-hover-bgcolor: #003EAA;
+  --button-primary-active-bgcolor: #002275;
+  --lwt-brighttext-url-color: #74c0ff;
+  --lwt-toolbarbutton-icon-fill-attention: #45a1ff;
+
+  Just refer - Proton's light color
+  --in-content-accent-color: #0a84ff;
+  --in-content-accent-color-active: #0060df;
+  --in-content-primary-button-background: #0061e0;
+  --in-content-primary-button-background-hover: #0250bb;
+  --in-content-primary-button-background-active: #053e94;
+
+  --blue-40: #45a1ff; rgb(69, 161, 255)
+  --blue-50: #0a84ff; rgb(10, 132, 255)
+  --blue-60: #0060df; rgb(0, 96, 223)
+  --blue-70: #003eaa; rgb(0, 62, 170)
+  --blue-80: #002275; rgb(0, 34, 117)
+
+  Relation
+  lighten(#0060df,   29%): #74b0ff;
+  lighten(#0060df, 19.8%): #4595ff
+  lighten(#0060df,  8.3%): #0a74ff
+  #0060df
+  darken(#0060df, 15.5%):  #003e90;
+  darken(#0060df, 28.1%):  #002250;
+ */
+  --blue-20: #b6d6ff; /* lighten(#0060df, 42%) - rgb(182, 214, 255), Add for link active color*/
+  --blue-30: #74c0ff; /* rgb(116, 192, 255), Add for active color */
+
+  --organizer-outline-color: var(--blue-40) !important;
+}
+
+@mixin DarkBlueContent() {
+  --in-content-primary-button-text-color: var(--in-content-page-color) !important;
+  --in-content-primary-button-background: var(--blue-60) !important;
+  --in-content-primary-button-background-hover: var(--blue-50) !important;
+  --in-content-primary-button-background-active: var(--blue-40) !important;
+
+  --in-content-focus-outline-color: var(--blue-40) !important;
+  --in-content-accent-color: var(--blue-40) !important;
+  --in-content-accent-color-active: var(--blue-30) !important;
+
+  --in-content-table-background: rgb(35, 34, 43) !important;
+  --in-content-table-border-color: rgba(249,249,250,0.2) !important;
+  --in-content-table-header-background: rgb(5, 64, 150) !important;
+  --in-content-table-header-color: var(--in-content-page-color) !important;
+
+  --in-content-link-color: var(--blue-40) !important;
+  --in-content-link-color-hover: var(--blue-30) !important;
+  --in-content-link-color-active: var(--blue-20) !important;
+  --in-content-link-color-visited: var(--blue-40) !important;
+}
diff --git a/src/userChrome.scss b/src/userChrome.scss
index 3e88bf4..d018164 100644
--- a/src/userChrome.scss
+++ b/src/userChrome.scss
@@ -30,9 +30,7 @@
 @include Option("userChrome.theme.proton_color") {
   @import "theme/proton_color";
   @include Option("userChrome.theme.proton_color.dark_blue_accent") {
-    @include Dark {
-      @import "theme/dark_blue_accent";
-    }
+    @import "theme/dark_blue_accent";
   }
 }
 @include Option("userChrome.theme.fully_color") {
diff --git a/src/userContent.scss b/src/userContent.scss
index b281d25..0a82e3d 100644
--- a/src/userContent.scss
+++ b/src/userContent.scss
@@ -20,6 +20,9 @@
 /*= Fully Dark Mode - Dark Mode Colors =======================================*/
 @include Option("userContent.page.proton_color") {
   @import "theme/proton_color";
+  @include Option("userContent.page.proton_color.dark_blue_accent") {
+    @import "contents/dark_blue_accent";
+  }
 }
 @include Option("userContent.page.dark_mode") {
   @import "contents/dark_mode";
diff --git a/user.js b/user.js
index af767a7..b5092f4 100644
--- a/user.js
+++ b/user.js
@@ -91,6 +91,7 @@ user_pref("userChrome.tab.bottom_rounded_corner",      true);
 // user_pref("userChrome.icon.account_label_to_right",        true);
 
 // user_pref("userContent.player.ui.twoline",                 true);
+// user_pref("userContent.page.proton_color.dark_blue_accent", true);
 
 // == Theme Default Settings ===================================================
 // -- User Chrome --------------------------------------------------------------
diff --git a/userContent.css b/userContent.css
index 3f8358d..850494e 100644
--- a/userContent.css
+++ b/userContent.css
@@ -669,6 +669,73 @@
       --dialog-warning-text-color: var(--red-40);
     }
   }
+  @supports -moz-bool-pref("userContent.page.proton_color.dark_blue_accent") {
+    @-moz-document url-prefix("about:"),
+               url-prefix("https://addons.mozilla.org"),
+               url-prefix("https://support.mozilla.org"),
+               url-prefix("https://accounts.firefox.com"),
+               regexp("^((file:///)|(chrome://)).*/$")
+    {
+      @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+        :host,
+        :root {
+          /* Color Memo
+           Just refer - Photon's dark color
+           --button-primary-bgcolor: #0060DF;
+           --button-primary-hover-bgcolor: #003EAA;
+           --button-primary-active-bgcolor: #002275;
+           --lwt-brighttext-url-color: #74c0ff;
+           --lwt-toolbarbutton-icon-fill-attention: #45a1ff;
+
+           Just refer - Proton's light color
+           --in-content-accent-color: #0a84ff;
+           --in-content-accent-color-active: #0060df;
+           --in-content-primary-button-background: #0061e0;
+           --in-content-primary-button-background-hover: #0250bb;
+           --in-content-primary-button-background-active: #053e94;
+
+           --blue-40: #45a1ff; rgb(69, 161, 255)
+           --blue-50: #0a84ff; rgb(10, 132, 255)
+           --blue-60: #0060df; rgb(0, 96, 223)
+           --blue-70: #003eaa; rgb(0, 62, 170)
+           --blue-80: #002275; rgb(0, 34, 117)
+
+           Relation
+           lighten(#0060df,   29%): #74b0ff;
+           lighten(#0060df, 19.8%): #4595ff
+           lighten(#0060df,  8.3%): #0a74ff
+           #0060df
+           darken(#0060df, 15.5%):  #003e90;
+           darken(#0060df, 28.1%):  #002250;
+          */
+          --blue-20: #b6d6ff;
+          /* lighten(#0060df, 42%) - rgb(182, 214, 255), Add for link active color*/
+          --blue-30: #74c0ff;
+          /* rgb(116, 192, 255), Add for active color */
+          --organizer-outline-color: var(--blue-40) !important;
+        }
+
+        :host,
+        :root {
+          --in-content-primary-button-text-color: var(--in-content-page-color) !important;
+          --in-content-primary-button-background: var(--blue-60) !important;
+          --in-content-primary-button-background-hover: var(--blue-50) !important;
+          --in-content-primary-button-background-active: var(--blue-40) !important;
+          --in-content-focus-outline-color: var(--blue-40) !important;
+          --in-content-accent-color: var(--blue-40) !important;
+          --in-content-accent-color-active: var(--blue-30) !important;
+          --in-content-table-background: rgb(35, 34, 43) !important;
+          --in-content-table-border-color: rgba(249, 249, 250, 0.2) !important;
+          --in-content-table-header-background: rgb(5, 64, 150) !important;
+          --in-content-table-header-color: var(--in-content-page-color) !important;
+          --in-content-link-color: var(--blue-40) !important;
+          --in-content-link-color-hover: var(--blue-30) !important;
+          --in-content-link-color-active: var(--blue-20) !important;
+          --in-content-link-color-visited: var(--blue-40) !important;
+        }
+      }
+    }
+  }
 }
 @supports -moz-bool-pref("userContent.page.dark_mode") {
   @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {

From fc1eec8d2273b76828a23d8c4066bd7c8eb187ed Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Thu, 31 Mar 2022 13:20:46 +0900
Subject: [PATCH 07/25] Fix: Proton Color - apply scope

---
 ...rk_blue_accent.scss => _proton_color.scss} |  12 +-
 src/userContent.scss                          |   5 +-
 userContent.css                               | 290 +++++++++---------
 3 files changed, 154 insertions(+), 153 deletions(-)
 rename src/contents/{_dark_blue_accent.scss => _proton_color.scss} (55%)

diff --git a/src/contents/_dark_blue_accent.scss b/src/contents/_proton_color.scss
similarity index 55%
rename from src/contents/_dark_blue_accent.scss
rename to src/contents/_proton_color.scss
index 41ba6ca..a99aa33 100644
--- a/src/contents/_dark_blue_accent.scss
+++ b/src/contents/_proton_color.scss
@@ -3,11 +3,15 @@
                url-prefix("https://support.mozilla.org"),
                url-prefix("https://accounts.firefox.com"),
                regexp("^((file:\/\/\/)|(chrome:\/\/)).*\/$") {
-  @include Dark {
-    @import "../theme/dark_blue_color";
+  @import "../theme/proton_color";
 
-    :host, :root {
-      @include DarkBlueContent;
+  @include Option("userContent.page.proton_color.dark_blue_accent") {
+    @include Dark {
+      @import "../theme/dark_blue_color";
+
+      :host, :root {
+        @include DarkBlueContent;
+      }
     }
   }
 }
diff --git a/src/userContent.scss b/src/userContent.scss
index 0a82e3d..7be8742 100644
--- a/src/userContent.scss
+++ b/src/userContent.scss
@@ -19,10 +19,7 @@
 /** Fully Dark Mode ***********************************************************/
 /*= Fully Dark Mode - Dark Mode Colors =======================================*/
 @include Option("userContent.page.proton_color") {
-  @import "theme/proton_color";
-  @include Option("userContent.page.proton_color.dark_blue_accent") {
-    @import "contents/dark_blue_accent";
-  }
+  @import "contents/proton_color";
 }
 @include Option("userContent.page.dark_mode") {
   @import "contents/dark_mode";
diff --git a/userContent.css b/userContent.css
index 850494e..98d03bb 100644
--- a/userContent.css
+++ b/userContent.css
@@ -527,155 +527,155 @@
 /** Fully Dark Mode ***********************************************************/
 /*= Fully Dark Mode - Dark Mode Colors =======================================*/
 @supports -moz-bool-pref("userContent.page.proton_color") {
-  /*= Default Colors - Hard Coded ==============================================*/
-  /* Based on chrome://global/skin/in-content/common.css */
-  :host,
-  :root {
-    --in-content-page-color: rgb(21, 20, 26);
-    --in-content-page-background: #fff;
-    --in-content-text-color: var(--in-content-page-color);
-    --in-content-deemphasized-text: rgb(91, 91, 102);
-    --in-content-box-background: #fff;
-    --in-content-box-background-odd: rgba(12, 12, 13, 0.05);
-    /* grey 90 a05 */
-    --in-content-box-border-color: color-mix(in srgb, currentColor 41%, transparent);
-    --in-content-box-info-background: #f0f0f4;
-    --in-content-item-hover: color-mix(in srgb, var(--in-content-primary-button-background) 20%, transparent);
-    --in-content-item-hover-text: var(--in-content-page-color);
-    --in-content-item-selected: var(--in-content-primary-button-background);
-    --in-content-item-selected-text: var(--in-content-primary-button-text-color);
-    --in-content-icon-color: rgb(91, 91, 102);
-    --in-content-accent-color: #0a84ff;
-    --in-content-accent-color-active: #0060df;
-    --in-content-border-hover: var(--grey-90-a50);
-    --in-content-border-invalid: var(--red-50);
-    --in-content-border-color: #d7d7db;
-    --in-content-error-text-color: #c50042;
-    --in-content-link-color: var(--blue-60);
-    --in-content-link-color-hover: var(--blue-70);
-    --in-content-link-color-active: var(--blue-80);
-    --in-content-link-color-visited: var(--blue-60);
-    /* button background states are also used for checkboxes and radiobuttons */
-    --in-content-button-text-color: var(--in-content-text-color);
-    --in-content-button-text-color-hover: var(--in-content-text-color);
-    --in-content-button-background: rgba(207, 207, 216, 0.33);
-    --in-content-button-background-hover: rgba(207, 207, 216, 0.66);
-    --in-content-button-background-active: rgb(207, 207, 216);
-    --in-content-primary-button-text-color: rgb(251, 251, 254);
-    --in-content-primary-button-text-color-hover: var(--in-content-primary-button-text-color);
-    --in-content-primary-button-background: #0061e0;
-    --in-content-primary-button-background-hover: #0250bb;
-    --in-content-primary-button-background-active: #053e94;
-    --in-content-danger-button-background: #e22850;
-    --in-content-danger-button-background-hover: #c50042;
-    --in-content-danger-button-background-active: #810220;
-    --in-content-focus-outline-color: var(--in-content-primary-button-background);
-    /* Note: 1px smaller than we want because we have a 1px transparent border. */
-    /* Once proton ships, these can probably stop being variables. */
-    --in-content-button-border-radius: 4px;
-    --in-content-button-horizontal-padding: 15px;
-    --in-content-button-vertical-padding: 7px;
-    --in-content-table-background: #f8f8fa;
-    --in-content-table-border-color: var(--in-content-box-border-color);
-    /* Legacy: #d1d1d1; rgba(249, 249, 250, 0.2) */
-    --in-content-table-border-dark-color: var(--in-content-table-border-color);
-    --in-content-table-header-background: var(--in-content-primary-button-background);
-    /* Legacy: #0a84ff; rgb(5, 64, 150); */
-    --in-content-table-header-color: var(--in-content-primary-button-text-color);
-    /* Legacy: #ffffff; var(--in-content-page-color); */
-    --in-content-sidebar-width: 240px;
-    --dialog-warning-text-color: var(--red-60);
-    --checkbox-border-color: var(--in-content-box-border-color);
-    --checkbox-unchecked-bgcolor: var(--in-content-button-background);
-    --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover);
-    --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active);
-    --checkbox-checked-bgcolor: var(--in-content-primary-button-background);
-    --checkbox-checked-color: var(--in-content-primary-button-text-color);
-    --checkbox-checked-border-color: transparent;
-    --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover);
-    --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active);
-    --blue-40: #45a1ff;
-    --blue-50: #0a84ff;
-    --blue-60: #0060df;
-    --blue-70: #003eaa;
-    --blue-80: #002275;
-    --grey-30: #d7d7db;
-    --grey-60: #4a4a4f;
-    --grey-90-a10: rgba(12, 12, 13, 0.1);
-    --grey-90-a20: rgba(12, 12, 13, 0.2);
-    --grey-90-a30: rgba(12, 12, 13, 0.3);
-    --grey-90-a50: rgba(12, 12, 13, 0.5);
-    --grey-90-a60: rgba(12, 12, 13, 0.6);
-    --green-50: #30e60b;
-    --green-60: #12bc00;
-    --green-70: #058b00;
-    --green-80: #006504;
-    --green-90: #003706;
-    --orange-50: #ff9400;
-    --red-40: #ff4f5e;
-    --red-50: #ff0039;
-    --red-60: #d70022;
-    --red-70: #a4000f;
-    --red-80: #5a0002;
-    --red-90: #3e0200;
-    --yellow-50: #ffe900;
-    --yellow-60: #d7b600;
-    --yellow-60-a30: rgba(215, 182, 0, 0.3);
-    --yellow-70: #a47f00;
-    --yellow-80: #715100;
-    --yellow-90: #3e2800;
-    --shadow-10: 0 1px 4px var(--grey-90-a10);
-    --shadow-30: 0 4px 16px var(--grey-90-a10);
-    --card-padding: 16px;
-    --card-shadow: var(--shadow-10);
-    --card-outline-color: var(--grey-30);
-    --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color);
-  }
-
-  @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
-    :host,
-    :root {
-      /* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */
-      --in-content-page-background: rgb(28, 27, 34);
-      --in-content-page-color: rgb(251, 251, 254);
-      --in-content-deemphasized-text: rgb(191, 191, 201);
-      --in-content-box-background: rgb(35, 34, 43);
-      --in-content-box-background-odd: rgba(249, 249, 250, 0.05);
-      --in-content-box-info-background: rgba(249, 249, 250, 0.15);
-      --in-content-border-color: rgba(249, 249, 250, 0.2);
-      --in-content-border-hover: rgba(249, 249, 250, 0.3);
-      --in-content-border-invalid: rgb(255, 132, 139);
-      --in-content-error-text-color: #ff9aa2;
-      --in-content-button-background: rgb(43, 42, 51);
-      --in-content-button-background-hover: rgb(82, 82, 94);
-      --in-content-button-background-active: rgb(91, 91, 102);
-      --in-content-icon-color: rgb(251, 251, 254);
-      --in-content-primary-button-text-color: rgb(43, 42, 51);
-      --in-content-primary-button-background: rgb(0, 221, 255);
-      --in-content-primary-button-background-hover: rgb(128, 235, 255);
-      --in-content-primary-button-background-active: rgb(170, 242, 255);
-      --in-content-danger-button-background: #ff848b;
-      --in-content-danger-button-background-hover: #ffbdc5;
-      --in-content-danger-button-background-active: #ffdfe7;
-      --in-content-table-background: rgb(35, 34, 43);
-      --in-content-table-border-dark-color: var(--in-content-box-border-color);
-      --in-content-accent-color: var(--in-content-primary-button-background);
-      --in-content-accent-color-active: var(--in-content-primary-button-background-hover);
-      --in-content-link-color: var(--in-content-primary-button-background);
-      --in-content-link-color-hover: var(--in-content-primary-button-background-hover);
-      --in-content-link-color-active: var(--in-content-primary-button-background-active);
-      --in-content-link-color-visited: var(--in-content-link-color);
-      --card-outline-color: var(--grey-60);
-      --dialog-warning-text-color: var(--red-40);
-    }
-  }
-  @supports -moz-bool-pref("userContent.page.proton_color.dark_blue_accent") {
-    @-moz-document url-prefix("about:"),
+  @-moz-document url-prefix("about:"),
                url-prefix("https://addons.mozilla.org"),
                url-prefix("https://support.mozilla.org"),
                url-prefix("https://accounts.firefox.com"),
                regexp("^((file:///)|(chrome://)).*/$")
-    {
+  {
+    /*= Default Colors - Hard Coded ==============================================*/
+    /* Based on chrome://global/skin/in-content/common.css */
+    :host,
+    :root {
+      --in-content-page-color: rgb(21, 20, 26);
+      --in-content-page-background: #fff;
+      --in-content-text-color: var(--in-content-page-color);
+      --in-content-deemphasized-text: rgb(91, 91, 102);
+      --in-content-box-background: #fff;
+      --in-content-box-background-odd: rgba(12, 12, 13, 0.05);
+      /* grey 90 a05 */
+      --in-content-box-border-color: color-mix(in srgb, currentColor 41%, transparent);
+      --in-content-box-info-background: #f0f0f4;
+      --in-content-item-hover: color-mix(in srgb, var(--in-content-primary-button-background) 20%, transparent);
+      --in-content-item-hover-text: var(--in-content-page-color);
+      --in-content-item-selected: var(--in-content-primary-button-background);
+      --in-content-item-selected-text: var(--in-content-primary-button-text-color);
+      --in-content-icon-color: rgb(91, 91, 102);
+      --in-content-accent-color: #0a84ff;
+      --in-content-accent-color-active: #0060df;
+      --in-content-border-hover: var(--grey-90-a50);
+      --in-content-border-invalid: var(--red-50);
+      --in-content-border-color: #d7d7db;
+      --in-content-error-text-color: #c50042;
+      --in-content-link-color: var(--blue-60);
+      --in-content-link-color-hover: var(--blue-70);
+      --in-content-link-color-active: var(--blue-80);
+      --in-content-link-color-visited: var(--blue-60);
+      /* button background states are also used for checkboxes and radiobuttons */
+      --in-content-button-text-color: var(--in-content-text-color);
+      --in-content-button-text-color-hover: var(--in-content-text-color);
+      --in-content-button-background: rgba(207, 207, 216, 0.33);
+      --in-content-button-background-hover: rgba(207, 207, 216, 0.66);
+      --in-content-button-background-active: rgb(207, 207, 216);
+      --in-content-primary-button-text-color: rgb(251, 251, 254);
+      --in-content-primary-button-text-color-hover: var(--in-content-primary-button-text-color);
+      --in-content-primary-button-background: #0061e0;
+      --in-content-primary-button-background-hover: #0250bb;
+      --in-content-primary-button-background-active: #053e94;
+      --in-content-danger-button-background: #e22850;
+      --in-content-danger-button-background-hover: #c50042;
+      --in-content-danger-button-background-active: #810220;
+      --in-content-focus-outline-color: var(--in-content-primary-button-background);
+      /* Note: 1px smaller than we want because we have a 1px transparent border. */
+      /* Once proton ships, these can probably stop being variables. */
+      --in-content-button-border-radius: 4px;
+      --in-content-button-horizontal-padding: 15px;
+      --in-content-button-vertical-padding: 7px;
+      --in-content-table-background: #f8f8fa;
+      --in-content-table-border-color: var(--in-content-box-border-color);
+      /* Legacy: #d1d1d1; rgba(249, 249, 250, 0.2) */
+      --in-content-table-border-dark-color: var(--in-content-table-border-color);
+      --in-content-table-header-background: var(--in-content-primary-button-background);
+      /* Legacy: #0a84ff; rgb(5, 64, 150); */
+      --in-content-table-header-color: var(--in-content-primary-button-text-color);
+      /* Legacy: #ffffff; var(--in-content-page-color); */
+      --in-content-sidebar-width: 240px;
+      --dialog-warning-text-color: var(--red-60);
+      --checkbox-border-color: var(--in-content-box-border-color);
+      --checkbox-unchecked-bgcolor: var(--in-content-button-background);
+      --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover);
+      --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active);
+      --checkbox-checked-bgcolor: var(--in-content-primary-button-background);
+      --checkbox-checked-color: var(--in-content-primary-button-text-color);
+      --checkbox-checked-border-color: transparent;
+      --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover);
+      --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active);
+      --blue-40: #45a1ff;
+      --blue-50: #0a84ff;
+      --blue-60: #0060df;
+      --blue-70: #003eaa;
+      --blue-80: #002275;
+      --grey-30: #d7d7db;
+      --grey-60: #4a4a4f;
+      --grey-90-a10: rgba(12, 12, 13, 0.1);
+      --grey-90-a20: rgba(12, 12, 13, 0.2);
+      --grey-90-a30: rgba(12, 12, 13, 0.3);
+      --grey-90-a50: rgba(12, 12, 13, 0.5);
+      --grey-90-a60: rgba(12, 12, 13, 0.6);
+      --green-50: #30e60b;
+      --green-60: #12bc00;
+      --green-70: #058b00;
+      --green-80: #006504;
+      --green-90: #003706;
+      --orange-50: #ff9400;
+      --red-40: #ff4f5e;
+      --red-50: #ff0039;
+      --red-60: #d70022;
+      --red-70: #a4000f;
+      --red-80: #5a0002;
+      --red-90: #3e0200;
+      --yellow-50: #ffe900;
+      --yellow-60: #d7b600;
+      --yellow-60-a30: rgba(215, 182, 0, 0.3);
+      --yellow-70: #a47f00;
+      --yellow-80: #715100;
+      --yellow-90: #3e2800;
+      --shadow-10: 0 1px 4px var(--grey-90-a10);
+      --shadow-30: 0 4px 16px var(--grey-90-a10);
+      --card-padding: 16px;
+      --card-shadow: var(--shadow-10);
+      --card-outline-color: var(--grey-30);
+      --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color);
+    }
+
+    @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+      :host,
+      :root {
+        /* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */
+        --in-content-page-background: rgb(28, 27, 34);
+        --in-content-page-color: rgb(251, 251, 254);
+        --in-content-deemphasized-text: rgb(191, 191, 201);
+        --in-content-box-background: rgb(35, 34, 43);
+        --in-content-box-background-odd: rgba(249, 249, 250, 0.05);
+        --in-content-box-info-background: rgba(249, 249, 250, 0.15);
+        --in-content-border-color: rgba(249, 249, 250, 0.2);
+        --in-content-border-hover: rgba(249, 249, 250, 0.3);
+        --in-content-border-invalid: rgb(255, 132, 139);
+        --in-content-error-text-color: #ff9aa2;
+        --in-content-button-background: rgb(43, 42, 51);
+        --in-content-button-background-hover: rgb(82, 82, 94);
+        --in-content-button-background-active: rgb(91, 91, 102);
+        --in-content-icon-color: rgb(251, 251, 254);
+        --in-content-primary-button-text-color: rgb(43, 42, 51);
+        --in-content-primary-button-background: rgb(0, 221, 255);
+        --in-content-primary-button-background-hover: rgb(128, 235, 255);
+        --in-content-primary-button-background-active: rgb(170, 242, 255);
+        --in-content-danger-button-background: #ff848b;
+        --in-content-danger-button-background-hover: #ffbdc5;
+        --in-content-danger-button-background-active: #ffdfe7;
+        --in-content-table-background: rgb(35, 34, 43);
+        --in-content-table-border-dark-color: var(--in-content-box-border-color);
+        --in-content-accent-color: var(--in-content-primary-button-background);
+        --in-content-accent-color-active: var(--in-content-primary-button-background-hover);
+        --in-content-link-color: var(--in-content-primary-button-background);
+        --in-content-link-color-hover: var(--in-content-primary-button-background-hover);
+        --in-content-link-color-active: var(--in-content-primary-button-background-active);
+        --in-content-link-color-visited: var(--in-content-link-color);
+        --card-outline-color: var(--grey-60);
+        --dialog-warning-text-color: var(--red-40);
+      }
+    }
+    @supports -moz-bool-pref("userContent.page.proton_color.dark_blue_accent") {
       @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
         :host,
         :root {

From f986e74a94994ac9da8402b53f1bead63f7613d1 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Thu, 31 Mar 2022 14:08:41 +0900
Subject: [PATCH 08/25] Fix: Proton - Content's color scope

---
 src/contents/_proton_color.scss                   | 3 ++-
 src/contents/proton_contents/_directory_view.scss | 2 +-
 src/contents/proton_contents/_proton_commons.scss | 2 +-
 userContent.css                                   | 7 ++++---
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/contents/_proton_color.scss b/src/contents/_proton_color.scss
index a99aa33..9d4a158 100644
--- a/src/contents/_proton_color.scss
+++ b/src/contents/_proton_color.scss
@@ -2,7 +2,8 @@
                url-prefix("https://addons.mozilla.org"),
                url-prefix("https://support.mozilla.org"),
                url-prefix("https://accounts.firefox.com"),
-               regexp("^((file:\/\/\/)|(chrome:\/\/)).*\/$") {
+               url-prefix("view-source"),
+               regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
   @import "../theme/proton_color";
 
   @include Option("userContent.page.proton_color.dark_blue_accent") {
diff --git a/src/contents/proton_contents/_directory_view.scss b/src/contents/proton_contents/_directory_view.scss
index 9dc7276..bbe5ba3 100644
--- a/src/contents/proton_contents/_directory_view.scss
+++ b/src/contents/proton_contents/_directory_view.scss
@@ -1,5 +1,5 @@
 @-moz-document url-prefix("about:sync-log"),
-               regexp("^((file:\/\/\/)|(chrome:\/\/)).*\/$") {
+               regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
   body {
     background-color: var(--in-content-box-background) !important;
     margin: 4em auto !important; /* Override to default */
diff --git a/src/contents/proton_contents/_proton_commons.scss b/src/contents/proton_contents/_proton_commons.scss
index 94d566b..6ce5de0 100644
--- a/src/contents/proton_contents/_proton_commons.scss
+++ b/src/contents/proton_contents/_proton_commons.scss
@@ -4,7 +4,7 @@
                url-prefix("about:checkerboard"),
                url-prefix("about:sync-log"),
                url-prefix("about:memory"),
-               regexp("^((file:\/\/\/)|(chrome:\/\/)).*\/$") {
+               regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") {
   /* Base */
   html,
   body {
diff --git a/userContent.css b/userContent.css
index 98d03bb..b54b7e6 100644
--- a/userContent.css
+++ b/userContent.css
@@ -531,7 +531,8 @@
                url-prefix("https://addons.mozilla.org"),
                url-prefix("https://support.mozilla.org"),
                url-prefix("https://accounts.firefox.com"),
-               regexp("^((file:///)|(chrome://)).*/$")
+               url-prefix("view-source"),
+               regexp("^(((jar:)?file:///)|(chrome://)).*/$")
   {
     /*= Default Colors - Hard Coded ==============================================*/
     /* Based on chrome://global/skin/in-content/common.css */
@@ -1358,7 +1359,7 @@
                url-prefix("about:checkerboard"),
                url-prefix("about:sync-log"),
                url-prefix("about:memory"),
-               regexp("^((file:///)|(chrome://)).*/$")
+               regexp("^(((jar:)?file:///)|(chrome://)).*/$")
   {
     /* Base */
     html,
@@ -1698,7 +1699,7 @@
   }
   /*= Directory View ===========================================================*/
   @-moz-document url-prefix("about:sync-log"),
-               regexp("^((file:///)|(chrome://)).*/$")
+               regexp("^(((jar:)?file:///)|(chrome://)).*/$")
   {
     body {
       background-color: var(--in-content-box-background) !important;

From 395e281edd445282f1f4971d63853bcaf2a4fcc1 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Thu, 31 Mar 2022 14:24:54 +0900
Subject: [PATCH 09/25] Fix: Dark blue accent - Activity stream #202

---
 src/contents/_activity_stream.scss | 11 +++++++++--
 userContent.css                    | 16 ++++++++++++++--
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/contents/_activity_stream.scss b/src/contents/_activity_stream.scss
index ea00328..8734a34 100644
--- a/src/contents/_activity_stream.scss
+++ b/src/contents/_activity_stream.scss
@@ -5,7 +5,8 @@
     body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"],
     body[style*="--newtab-background-color:rgba(42, 42, 46, 1);"],
     body[style*="--newtab-background-color: rgba(42, 42, 46, 1);"],
-    body[style*="--newtab-background-color: rgba(43, 42, 51, 1);"] {
+    body[style*="--newtab-background-color: rgba(43, 42, 51, 1);"],
+    body[style*="--newtab-background-color: rgb(43, 42, 51);"] {
       /* inner */
       --newtab-focus-border: rgba(
         0,
@@ -13,10 +14,16 @@
         255,
         0.5
       ) !important; /* Original: #B5D3FF, Better color-mix(in srgb, #B5D3FF 70%, transparent) */
-      --newtab-focus-border-selected: rgba(0, 221, 255, 0.5) !important; /* Original: #B5D3FF */
+      --newtab-focus-border-selected: var(--newtab-focus-border) !important; /* Original: #B5D3FF */
 
       /* For Nightly */
       --newtab-primary-action-background: var(--newtab-focus-border) !important;
+
+      @include Option("userContent.page.proton_color") {
+        @include Option("userContent.page.proton_color.dark_blue_accent") {
+          --newtab-focus-border: var(--in-content-focus-outline-color) !important;
+        }
+      }
     }
   }
 
diff --git a/userContent.css b/userContent.css
index b54b7e6..5039125 100644
--- a/userContent.css
+++ b/userContent.css
@@ -264,15 +264,27 @@
     body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"],
     body[style*="--newtab-background-color:rgba(42, 42, 46, 1);"],
     body[style*="--newtab-background-color: rgba(42, 42, 46, 1);"],
-    body[style*="--newtab-background-color: rgba(43, 42, 51, 1);"] {
+    body[style*="--newtab-background-color: rgba(43, 42, 51, 1);"],
+    body[style*="--newtab-background-color: rgb(43, 42, 51);"] {
       /* inner */
       --newtab-focus-border: rgba(0, 221, 255, 0.5) !important;
       /* Original: #B5D3FF, Better color-mix(in srgb, #B5D3FF 70%, transparent) */
-      --newtab-focus-border-selected: rgba(0, 221, 255, 0.5) !important;
+      --newtab-focus-border-selected: var(--newtab-focus-border) !important;
       /* Original: #B5D3FF */
       /* For Nightly */
       --newtab-primary-action-background: var(--newtab-focus-border) !important;
     }
+    @supports -moz-bool-pref("userContent.page.proton_color") {
+      @supports -moz-bool-pref("userContent.page.proton_color.dark_blue_accent") {
+        body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"],
+        body[style*="--newtab-background-color:rgba(42, 42, 46, 1);"],
+        body[style*="--newtab-background-color: rgba(42, 42, 46, 1);"],
+        body[style*="--newtab-background-color: rgba(43, 42, 51, 1);"],
+        body[style*="--newtab-background-color: rgb(43, 42, 51);"] {
+          --newtab-focus-border: var(--in-content-focus-outline-color) !important;
+        }
+      }
+    }
   }
   /** Activity Stream - Web Site Icon: full size ******************************/
   @supports -moz-bool-pref("userContent.newTab.full_icon") {

From 8788c8f2e7c3f89499498430c570e8e043c67d1c Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Fri, 1 Apr 2022 10:57:30 +0900
Subject: [PATCH 10/25] Fix: Test - Remove NotOption's multiple

---
 __tests__/option.test.scss | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/__tests__/option.test.scss b/__tests__/option.test.scss
index 00a0a44..d9ff029 100644
--- a/__tests__/option.test.scss
+++ b/__tests__/option.test.scss
@@ -50,18 +50,5 @@
     }
   }
 
-  @include test("multiple") {
-    @include assert {
-      @include output {
-        @include option.Option("userChrome.tab.photon", "userChrome.padding.photon") {
-          @include example;
-        }
-      }
-      @include expect {
-        @supports -moz-bool-pref("userChrome.tab.photon") or -moz-bool-pref("userChrome.padding.photon") {
-          @include example;
-        }
-      }
-    }
-  }
+  // Need multiple test
 }

From 941feceb8b4906fab93f4b0139b0b6ba76326133 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Fri, 1 Apr 2022 11:24:51 +0900
Subject: [PATCH 11/25] Fix: Page Field Border - Apply `about:`

---
 src/contents/_activity_stream.scss            | 10 ++++---
 src/contents/_proton_contents.scss            |  7 +++++
 .../proton_contents/_field_border.scss        | 12 +++++++++
 userContent.css                               | 27 ++++++++++++++++---
 4 files changed, 48 insertions(+), 8 deletions(-)
 create mode 100644 src/contents/proton_contents/_field_border.scss

diff --git a/src/contents/_activity_stream.scss b/src/contents/_activity_stream.scss
index 8734a34..d4ac910 100644
--- a/src/contents/_activity_stream.scss
+++ b/src/contents/_activity_stream.scss
@@ -1,6 +1,6 @@
 @-moz-document url("about:home"), url("about:newtab") {
   /** Activity Stream - Search Focus Border: like URL *************************/
-  @include Option("userContent.newTab.field_border") {
+  @include Option("userContent.page.field_border") {
     /* At DarkMode, Color */
     body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"],
     body[style*="--newtab-background-color:rgba(42, 42, 46, 1);"],
@@ -69,9 +69,11 @@
       .search-wrapper input:focus {
         transition: border-color 0.5s var(--animation-easing-function), box-shadow 1s var(--animation-easing-function);
       }
-      .search-wrapper .search-inner-wrapper:hover input {
-        border-color: var(--newtab-primary-action-background) !important;
-        transition: border-color 0.5s var(--animation-easing-function);
+      @include Option("userContent.page.field_border") {
+        .search-wrapper .search-inner-wrapper:hover input {
+          border-color: var(--newtab-primary-action-background) !important;
+          transition: border-color 0.5s var(--animation-easing-function);
+        }
       }
     }
   }
diff --git a/src/contents/_proton_contents.scss b/src/contents/_proton_contents.scss
index 3da52b3..95df40b 100644
--- a/src/contents/_proton_contents.scss
+++ b/src/contents/_proton_contents.scss
@@ -1,6 +1,13 @@
 /*= Common contents ==========================================================*/
 @import "proton_contents/proton_commons";
 
+/*= Field Border =============================================================*/
+@include Option("userContent.page.field_border") {
+  @include Animate {
+    @import "proton_contents/field_border";
+  }
+}
+
 /*= View Source ==============================================================*/
 @import "proton_contents/view_source";
 
diff --git a/src/contents/proton_contents/_field_border.scss b/src/contents/proton_contents/_field_border.scss
new file mode 100644
index 0000000..65877e0
--- /dev/null
+++ b/src/contents/proton_contents/_field_border.scss
@@ -0,0 +1,12 @@
+@-moz-document url-prefix("about:") {
+  xul|search-textbox:hover {
+    border-color: var(--in-content-focus-outline-color) !important;
+    transition: border-color 0.5s var(--animation-easing-function);
+  }
+}
+@-moz-document url-prefix("about:config") {
+  #about-config-search:hover {
+    border-color: var(--in-content-focus-outline-color) !important;
+    transition: border-color 0.5s var(--animation-easing-function);
+  }
+}
diff --git a/userContent.css b/userContent.css
index 5039125..3e1b740 100644
--- a/userContent.css
+++ b/userContent.css
@@ -259,7 +259,7 @@
 /** Activity Stream ***********************************************************/
 @-moz-document url("about:home"), url("about:newtab") {
   /** Activity Stream - Search Focus Border: like URL *************************/
-  @supports -moz-bool-pref("userContent.newTab.field_border") {
+  @supports -moz-bool-pref("userContent.page.field_border") {
     /* At DarkMode, Color */
     body[style*="--newtab-background-color:rgba(28, 27, 34, 1);"],
     body[style*="--newtab-background-color:rgba(42, 42, 46, 1);"],
@@ -332,9 +332,11 @@
         transition: border-color 0.5s var(--animation-easing-function), box-shadow 1s var(--animation-easing-function);
       }
 
-      .search-wrapper .search-inner-wrapper:hover input {
-        border-color: var(--newtab-primary-action-background) !important;
-        transition: border-color 0.5s var(--animation-easing-function);
+      @supports -moz-bool-pref("userContent.page.field_border") {
+        .search-wrapper .search-inner-wrapper:hover input {
+          border-color: var(--newtab-primary-action-background) !important;
+          transition: border-color 0.5s var(--animation-easing-function);
+        }
       }
     }
   }
@@ -1630,6 +1632,23 @@
       color: var(--in-content-table-header-color) !important;
     }
   }
+  /*= Field Border =============================================================*/
+  @supports -moz-bool-pref("userContent.page.field_border") {
+    @media (prefers-reduced-motion: no-preference) {
+      @-moz-document url-prefix("about:") {
+        xul|search-textbox:hover {
+          border-color: var(--in-content-focus-outline-color) !important;
+          transition: border-color 0.5s var(--animation-easing-function);
+        }
+      }
+      @-moz-document url-prefix("about:config") {
+        #about-config-search:hover {
+          border-color: var(--in-content-focus-outline-color) !important;
+          transition: border-color 0.5s var(--animation-easing-function);
+        }
+      }
+    }
+  }
   /*= View Source ==============================================================*/
   @-moz-document url-prefix("view-source") {
     :root {

From cf28853077ed40a6dea14ed0b4d0a212d44f8670 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Fri, 1 Apr 2022 11:43:51 +0900
Subject: [PATCH 12/25] Fix: Proton - Library's downloads panel

https://github.com/mozilla/gecko-dev/commit/866fb885cffdf3432e53b9c5438b1ea1244be310
---
 src/library/_proton.scss | 3 ++-
 userChrome.css           | 3 ++-
 userContent.css          | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/library/_proton.scss b/src/library/_proton.scss
index af1c4e3..8cdbd8c 100644
--- a/src/library/_proton.scss
+++ b/src/library/_proton.scss
@@ -176,7 +176,8 @@
 }
 
 /*- Downloads Pane -------------------------------------------------------*/
-#downloadsRichListBox {
+#downloadsRichListBox, /* Legacy - FF v98 */
+#downloadsListBox {
   color: var(--organizer-color) !important;
   background-color: var(--organizer-content-background) !important;
 }
diff --git a/userChrome.css b/userChrome.css
index 71b74bf..f0179a8 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -2417,7 +2417,8 @@
       }
 
       /*- Downloads Pane -------------------------------------------------------*/
-      #downloadsRichListBox {
+      #downloadsRichListBox,
+      #downloadsListBox {
         color: var(--organizer-color) !important;
         background-color: var(--organizer-content-background) !important;
       }
diff --git a/userContent.css b/userContent.css
index 3e1b740..90f4aca 100644
--- a/userContent.css
+++ b/userContent.css
@@ -2470,7 +2470,8 @@
         }
 
         /*- Downloads Pane -------------------------------------------------------*/
-        #downloadsRichListBox {
+        #downloadsRichListBox,
+        #downloadsListBox {
           color: var(--organizer-color) !important;
           background-color: var(--organizer-content-background) !important;
         }

From 8153b40f68999ac017a5037554bb411fce4bccda Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Sat, 2 Apr 2022 18:33:48 +0900
Subject: [PATCH 13/25] Fix: Panel - Remove strip show separator #222

---
 src/panel/_remove_strip.scss | 2 +-
 userChrome.css               | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/panel/_remove_strip.scss b/src/panel/_remove_strip.scss
index c4543cd..9a958c0 100644
--- a/src/panel/_remove_strip.scss
+++ b/src/panel/_remove_strip.scss
@@ -1,3 +1,3 @@
 #appMenu-fxa-separator {
-  display: none;
+  --panel-separator-zap-gradient: none; /* Original: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%) */
 }
diff --git a/userChrome.css b/userChrome.css
index f0179a8..b7a9492 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -4932,7 +4932,8 @@
 /** Panel UI ******************************************************************/
 @supports -moz-bool-pref("userChrome.panel.remove_strip") {
   #appMenu-fxa-separator {
-    display: none;
+    --panel-separator-zap-gradient: none;
+    /* Original: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%) */
   }
 }
 /** Fullscreen - Overlap toolbar **********************************************/

From 43d045e81fcd22547feadc5a4160315bb2d7822e Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Sat, 2 Apr 2022 20:15:08 +0900
Subject: [PATCH 14/25] Add: Option - `userChrome.panel.full_width_separator`
 #222

---
 src/panel/_index.scss |  4 ++++
 user.js               |  1 +
 userChrome.css        | 11 +++++++++++
 3 files changed, 16 insertions(+)

diff --git a/src/panel/_index.scss b/src/panel/_index.scss
index 46e8592..70d1208 100644
--- a/src/panel/_index.scss
+++ b/src/panel/_index.scss
@@ -1,3 +1,7 @@
 @include Option("userChrome.panel.remove_strip") {
   @import "remove_strip";
 }
+
+@include Option("userChrome.panel.full_width_separator") {
+  @import "full_width_separator";
+}
diff --git a/user.js b/user.js
index b5092f4..b17ea9a 100644
--- a/user.js
+++ b/user.js
@@ -86,6 +86,7 @@ user_pref("userChrome.tab.bottom_rounded_corner",      true);
 // user_pref("userChrome.tab.centered_label",                 true);
 
 // user_pref("userChrome.panel.remove_strip",                 true);
+// user_pref("userChrome.panel.full_width_separator",         true);
 
 // user_pref("userChrome.icon.account_image_to_right",        true);
 // user_pref("userChrome.icon.account_label_to_right",        true);
diff --git a/userChrome.css b/userChrome.css
index b7a9492..a15daf3 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -4936,6 +4936,17 @@
     /* Original: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%) */
   }
 }
+@supports -moz-bool-pref("userChrome.panel.full_width_separator") {
+  /* Full width separators */
+  :root {
+    /* Original
+    --panel-separator-margin-vertical: 4px;
+    --panel-separator-margin-horizontal: 8px;
+    --panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal);
+     */
+    --panel-separator-margin-horizontal: 0 !important;
+  }
+}
 /** Fullscreen - Overlap toolbar **********************************************/
 @supports -moz-bool-pref("userChrome.fullscreen.overlap") {
   @supports -moz-bool-pref("browser.fullscreen.autohide") {

From 1d82acc95b229923b62a28b95f097157fd84b48b Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Sat, 2 Apr 2022 21:44:30 +0900
Subject: [PATCH 15/25] Clean: user js indent

---
 user.js | 48 +++++++++++++++++++++++++-----------------------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/user.js b/user.js
index b17ea9a..c910da4 100644
--- a/user.js
+++ b/user.js
@@ -60,38 +60,40 @@ user_pref("userChrome.tab.bottom_rounded_corner",      true);
 // user_pref("userChrome.compatibility.dynamic_separator",    true); // Need dynamic_seperator
 
 // == Theme Custom Settings ====================================================
-// user_pref("userChrome.decoration.disable_panel_animate",   true);
-// user_pref("userChrome.decoration.disable_sidebar_animate", true);
+// -- User Chrome --------------------------------------------------------------
+// user_pref("userChrome.decoration.disable_panel_animate",    true);
+// user_pref("userChrome.decoration.disable_sidebar_animate",  true);
 
 // user_pref("userChrome.theme.proton_color.dark_blue_accent", true);
 
-// user_pref("userChrome.padding.first_tab",                  true);
-// user_pref("userChrome.padding.drag_space",                 true);
+// user_pref("userChrome.padding.first_tab",                   true);
+// user_pref("userChrome.padding.drag_space",                  true);
 
-// user_pref("userChrome.padding.menu_compact",               true);
-// user_pref("userChrome.padding.urlView_expanding",          true);
-// user_pref("userChrome.padding.urlView_result",             true);
+// user_pref("userChrome.padding.menu_compact",                true);
+// user_pref("userChrome.padding.urlView_expanding",           true);
+// user_pref("userChrome.padding.urlView_result",              true);
 
-// user_pref("userChrome.urlView.move_icon_to_left",          true);
-// user_pref("userChrome.urlView.go_button_when_typing",      true);
-// user_pref("userChrome.urlView.always_show_page_actions",   true);
+// user_pref("userChrome.urlView.move_icon_to_left",           true);
+// user_pref("userChrome.urlView.go_button_when_typing",       true);
+// user_pref("userChrome.urlView.always_show_page_actions",    true);
 
-// user_pref("userChrome.tab.on_bottom",                      true);
-// user_pref("userChrome.tab.on_bottom.above_bookmark",       true); // Need on_bottom
-// user_pref("userChrome.tab.on_bottom.menubar_on_top",       true); // Need on_bottom
-// user_pref("userChrome.tab.always_show_tab_icon",           true);
-// user_pref("userChrome.tab.close_button_at_pinned",         true);
-// user_pref("userChrome.tab.close_button_at_hover.always",   true); // Need close_button_at_hover
-// user_pref("userChrome.tab.sound_show_label",               true); // Need remove sound_hide_label
-// user_pref("userChrome.tab.centered_label",                 true);
+// user_pref("userChrome.tab.on_bottom",                       true);
+// user_pref("userChrome.tab.on_bottom.above_bookmark",        true); // Need on_bottom
+// user_pref("userChrome.tab.on_bottom.menubar_on_top",        true); // Need on_bottom
+// user_pref("userChrome.tab.always_show_tab_icon",            true);
+// user_pref("userChrome.tab.close_button_at_pinned",          true);
+// user_pref("userChrome.tab.close_button_at_hover.always",    true); // Need close_button_at_hover
+// user_pref("userChrome.tab.sound_show_label",                true); // Need remove sound_hide_label
+// user_pref("userChrome.tab.centered_label",                  true);
 
-// user_pref("userChrome.panel.remove_strip",                 true);
-// user_pref("userChrome.panel.full_width_separator",         true);
+// user_pref("userChrome.panel.remove_strip",                  true);
+// user_pref("userChrome.panel.full_width_separator",          true);
 
-// user_pref("userChrome.icon.account_image_to_right",        true);
-// user_pref("userChrome.icon.account_label_to_right",        true);
+// user_pref("userChrome.icon.account_image_to_right",         true);
+// user_pref("userChrome.icon.account_label_to_right",         true);
 
-// user_pref("userContent.player.ui.twoline",                 true);
+// -- User Content -------------------------------------------------------------
+// user_pref("userContent.player.ui.twoline",                  true);
 // user_pref("userContent.page.proton_color.dark_blue_accent", true);
 
 // == Theme Default Settings ===================================================

From 963dd2c84fa177bebd3c73e0148b1f8fc5fd2cfa Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Sun, 3 Apr 2022 18:41:19 +0900
Subject: [PATCH 16/25] Add: Option - `userChrome.padding.panel_header` #222

---
 src/padding/_index.scss              | 3 +++
 src/padding/_panel_header.scss       | 4 ++++
 src/panel/_full_width_separator.scss | 9 +++++++++
 user.js                              | 1 +
 userChrome.css                       | 6 ++++++
 5 files changed, 23 insertions(+)
 create mode 100644 src/padding/_panel_header.scss
 create mode 100644 src/panel/_full_width_separator.scss

diff --git a/src/padding/_index.scss b/src/padding/_index.scss
index 2221c46..d38373c 100644
--- a/src/padding/_index.scss
+++ b/src/padding/_index.scss
@@ -81,6 +81,9 @@
 @include Option("userChrome.padding.panel") {
   @import "panel";
 }
+@include Option("userChrome.padding.panel_header") {
+  @import "panel_header";
+}
 
 /*= Popup Panel - Reduce padding =============================================*/
 @include Option("userChrome.padding.popup_panel") {
diff --git a/src/padding/_panel_header.scss b/src/padding/_panel_header.scss
new file mode 100644
index 0000000..12510c0
--- /dev/null
+++ b/src/padding/_panel_header.scss
@@ -0,0 +1,4 @@
+.panel-header{
+  padding: unset !important;
+  padding-top: 4px !important;
+}
diff --git a/src/panel/_full_width_separator.scss b/src/panel/_full_width_separator.scss
new file mode 100644
index 0000000..0af8ac0
--- /dev/null
+++ b/src/panel/_full_width_separator.scss
@@ -0,0 +1,9 @@
+/* Full width separators */
+:root {
+  /* Original
+--panel-separator-margin-vertical: 4px;
+--panel-separator-margin-horizontal: 8px;
+--panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal);
+ */
+  --panel-separator-margin-horizontal: 0 !important;
+}
diff --git a/user.js b/user.js
index c910da4..2ecbf65 100644
--- a/user.js
+++ b/user.js
@@ -72,6 +72,7 @@ user_pref("userChrome.tab.bottom_rounded_corner",      true);
 // user_pref("userChrome.padding.menu_compact",                true);
 // user_pref("userChrome.padding.urlView_expanding",           true);
 // user_pref("userChrome.padding.urlView_result",              true);
+// user_pref("userChrome.padding.panel_header",                true);
 
 // user_pref("userChrome.urlView.move_icon_to_left",           true);
 // user_pref("userChrome.urlView.go_button_when_typing",       true);
diff --git a/userChrome.css b/userChrome.css
index a15daf3..07298f7 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -3482,6 +3482,12 @@
     /* Original: 8px */
   }
 }
+@supports -moz-bool-pref("userChrome.padding.panel_header") {
+  .panel-header {
+    padding: unset !important;
+    padding-top: 4px !important;
+  }
+}
 /*= Popup Panel - Reduce padding =============================================*/
 @supports -moz-bool-pref("userChrome.padding.popup_panel") {
   #protections-popup-main-header-label {

From 0489e22ce219ec76345c63d4626fbd30a03a8f82 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Mon, 4 Apr 2022 02:09:22 +0900
Subject: [PATCH 17/25] Fix: Padding - Zoom button block padding

---
 src/panel/_icon_padding.scss | 6 ++++++
 userChrome.css               | 7 +++++++
 2 files changed, 13 insertions(+)

diff --git a/src/panel/_icon_padding.scss b/src/panel/_icon_padding.scss
index b53ebe4..1c7a4d9 100644
--- a/src/panel/_icon_padding.scss
+++ b/src/panel/_icon_padding.scss
@@ -72,6 +72,12 @@
 #appMenu-zoom-controls2::before {
   margin-inline-end: 0 !important;
 }
+#appMenu-zoomReduce-button2,
+#appMenu-zoomReset-button2,
+#appMenu-zoomEnlarge-button2,
+#appMenu-fullscreen-button2 {
+  --arrowpanel-menuitem-padding-block: 0px;
+}
 
 .subviewbutton[type="checkbox"]:not([checked="true"]) > .toolbarbutton-text {
   margin-left: 16px !important;
diff --git a/userChrome.css b/userChrome.css
index 07298f7..5a4bcf9 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -5250,6 +5250,13 @@
     margin-inline-end: 0 !important;
   }
 
+  #appMenu-zoomReduce-button2,
+  #appMenu-zoomReset-button2,
+  #appMenu-zoomEnlarge-button2,
+  #appMenu-fullscreen-button2 {
+    --arrowpanel-menuitem-padding-block: 0px;
+  }
+
   .subviewbutton[type="checkbox"]:not([checked="true"]) > .toolbarbutton-text {
     margin-left: 16px !important;
   }

From 822f84bae53822eac2cffcf04f04b0727e4ac7e2 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Mon, 4 Apr 2022 02:29:05 +0900
Subject: [PATCH 18/25] Clean: Icon Panel - Separate
 `--arrowpanel-menuitem-padding` to inline, bottom

---
 src/icons/_panel.scss          |  6 +--
 src/menu/_bookmark_layout.scss | 12 +++---
 src/padding/_panel.scss        | 11 ++++--
 src/panel/_icon_padding.scss   | 29 +++++---------
 userChrome.css                 | 69 ++++++++++++++++------------------
 5 files changed, 59 insertions(+), 68 deletions(-)

diff --git a/src/icons/_panel.scss b/src/icons/_panel.scss
index 7b243e7..7131501 100644
--- a/src/icons/_panel.scss
+++ b/src/icons/_panel.scss
@@ -49,8 +49,8 @@
   #appMenu-more-button2,              /* Seperate */
   #appMenu-help-button2,
   #appMenu-quit-button2               /* Seperate */ {
-    padding-top: var(--arrowpanel-menuitemblank-padding) !important;
-    padding-bottom: var(--arrowpanel-menuitemblank-padding) !important;
+    padding-top: var(--arrowpanel-menuitemblank-padding-block) !important;
+    padding-bottom: var(--arrowpanel-menuitemblank-padding-block) !important;
   }
   #appMenu-zoom-controls2 {
     padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
@@ -182,7 +182,7 @@
 }
 
 .PanelUI-remotetabs-notabsforclient-label {
-  margin-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding)) !important;
+  margin-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding-inline)) !important;
   padding-inline-start: var(--arrowpanel-menublank-padding) !important;
 }
 
diff --git a/src/menu/_bookmark_layout.scss b/src/menu/_bookmark_layout.scss
index 6ce1a84..4faa199 100644
--- a/src/menu/_bookmark_layout.scss
+++ b/src/menu/_bookmark_layout.scss
@@ -12,7 +12,7 @@ menupopup menupopup[emptyplacesresult] .menu-text,
 /* Bookmark Popup - As Arrow Panel */
 #BMB_bookmarksPopup,
 #PersonalToolbar {
-  --context-menu-background-padding: var(--arrowpanel-menuitem-padding);
+  --context-menu-background-padding: var(--arrowpanel-menuitem-padding-inline);
 }
 
 /* Windows 7, 8 */
@@ -31,7 +31,7 @@ menupopup menupopup[emptyplacesresult] .menu-text,
   menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic),
   #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
   #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
-    margin-inline: var(--arrowpanel-menuitem-padding) !important;
+    margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
     background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
   }
   menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
@@ -51,7 +51,7 @@ menupopup menupopup[emptyplacesresult] .menu-text,
   menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic),
   #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
   #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
-    margin-inline: var(--arrowpanel-menuitem-padding) !important;
+    margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
     padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding)) !important;
     background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
   }
@@ -74,7 +74,7 @@ menupopup menupopup[emptyplacesresult] .menu-text,
   menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic),
   #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
   #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
-    padding-inline-start: calc(var(--arrowpanel-menuitem-padding) + 1px) !important;
+    padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 1px) !important;
   }
 }
 
@@ -82,12 +82,12 @@ menupopup menupopup[emptyplacesresult] .menu-text,
   /* Bookmark Popup - As Arrow Panel */
   #PersonalToolbar menupopup menuitem,
   #PersonalToolbar menupopup menu {
-    padding-inline: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding)) !important;
+    padding-inline: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding-inline)) !important;
   }
 
   /* Bookmark Popup - None icon menu */
   menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
   menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) {
-    padding-inline-start: calc(var(--arrowpanel-menuitem-padding) + 3px) !important;
+    padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 3px) !important;
   }
 }
diff --git a/src/padding/_panel.scss b/src/padding/_panel.scss
index 7569e9f..f8c4e76 100644
--- a/src/padding/_panel.scss
+++ b/src/padding/_panel.scss
@@ -1,13 +1,16 @@
 :root {
-  --arrowpanel-menuicon-padding: 8px;
   --arrowpanel-menuitem-margin: 0 var(--arrowpanel-menuicon-padding) !important; /* Original: 0 8px */
-  --arrowpanel-menuitem-padding: 5px !important; /* Original: 8px */
+  --arrowpanel-menuitem-padding-block: 5px !important; /* Original: 8px */
+  --arrowpanel-menuitem-padding-inline: 5px !important; /* Original: 8px */
+  --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline) !important; /* Compatibility */
   --arrowpanel-padding: 0.8em !important; /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */
 }
 
 :root[uidensity="compact"] {
-  --arrowpanel-menuitem-padding: 3px !important; /* Original: 8px */
+  --arrowpanel-menuitem-padding-block: 3px !important;
+  --arrowpanel-menuitem-padding-inline: 3px !important;
 }
 :root[uidensity="touch"] {
-  --arrowpanel-menuitem-padding: 8px !important; /* Original: 8px */
+  --arrowpanel-menuitem-padding-block: 8px !important; /* Original: 8px */
+  --arrowpanel-menuitem-padding-inline: 8px !important; /* Original: 8px */
 }
diff --git a/src/panel/_icon_padding.scss b/src/panel/_icon_padding.scss
index 1c7a4d9..83e9873 100644
--- a/src/panel/_icon_padding.scss
+++ b/src/panel/_icon_padding.scss
@@ -1,37 +1,28 @@
 /*= Padding ==================================================================*/
 :root {
-  --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + 8px) !important;
-  --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important;
+  --arrowpanel-menuicon-padding: 8px;
+  --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + var(var(--arrowpanel-menuitem-padding-inline))) !important;
+  --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding-inline) - 2px) !important;
+  --arrowpanel-menuimageblank-padding-block: calc(var(--arrowpanel-menuitem-padding-block) - 2px) !important;
 }
 .subviewbutton > .toolbarbutton-icon {
   width: 16px;
 }
 
 @include Option("userChrome.icon.panel_photon", "userChrome.icon.panel_sparse") {
-  :root {
-    /* Blank Menu Left Padding */
-    --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px);
-    --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px);
-  }
-  :root[uidensity="compact"] {
-    --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 5px);
-  }
-  :root[uidensity="touch"] {
-    --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding));
-  }
   :root {
     /* Global */
     --arrowpanel-menuicon-paddingx2: calc(var(--arrowpanel-menuicon-padding) * 2);
 
     /* General Panel */
     --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-paddingx2) + 8px) !important;
-    --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important;
+    --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding-inline) - 2px) !important;
 
     /* Blank Menu Left Padding */
     --arrowpanel-menuimageblank-padding-horizontal: calc(
-      var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding)
+      var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding-inline)
     );
-    --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px);
+    --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding-block) + 1px);
   }
 }
 
@@ -61,13 +52,13 @@
   margin-bottom: 2px !important;
 }
 #appMenu-proton-update-banner::before {
-  margin-inline-start: var(--arrowpanel-menuitem-padding) !important;
+  margin-inline-start: var(--arrowpanel-menuitem-padding-inline) !important;
 }
 #appMenu-fxa-status2,
 #appMenu-zoom-controls2 {
   align-items: center;
-  padding-top: var(--arrowpanel-menuimageblank-padding) !important;
-  padding-bottom: var(--arrowpanel-menuimageblank-padding) !important;
+  padding-top: var(--arrowpanel-menuimageblank-padding-block) !important;
+  padding-bottom: var(--arrowpanel-menuimageblank-padding-block) !important;
 }
 #appMenu-zoom-controls2::before {
   margin-inline-end: 0 !important;
diff --git a/userChrome.css b/userChrome.css
index 5a4bcf9..0224c11 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -3463,22 +3463,27 @@
 /*= Panel - Reduce padding ===================================================*/
 @supports -moz-bool-pref("userChrome.padding.panel") {
   :root {
-    --arrowpanel-menuicon-padding: 8px;
     --arrowpanel-menuitem-margin: 0 var(--arrowpanel-menuicon-padding) !important;
     /* Original: 0 8px */
-    --arrowpanel-menuitem-padding: 5px !important;
+    --arrowpanel-menuitem-padding-block: 5px !important;
     /* Original: 8px */
+    --arrowpanel-menuitem-padding-inline: 5px !important;
+    /* Original: 8px */
+    --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline) !important;
+    /* Compatibility */
     --arrowpanel-padding: 0.8em !important;
     /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */
   }
 
   :root[uidensity="compact"] {
-    --arrowpanel-menuitem-padding: 3px !important;
-    /* Original: 8px */
+    --arrowpanel-menuitem-padding-block: 3px !important;
+    --arrowpanel-menuitem-padding-inline: 3px !important;
   }
 
   :root[uidensity="touch"] {
-    --arrowpanel-menuitem-padding: 8px !important;
+    --arrowpanel-menuitem-padding-block: 8px !important;
+    /* Original: 8px */
+    --arrowpanel-menuitem-padding-inline: 8px !important;
     /* Original: 8px */
   }
 }
@@ -5169,8 +5174,12 @@
 @supports -moz-bool-pref("userChrome.icon.panel") {
   /*= Padding ==================================================================*/
   :root {
-    --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + 8px) !important;
-    --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important;
+    --arrowpanel-menuicon-padding: 8px;
+    --arrowpanel-menublank-padding: calc(
+      var(--arrowpanel-menuicon-padding) * 2 + var(var(--arrowpanel-menuitem-padding-inline))
+    ) !important;
+    --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding-inline) - 2px) !important;
+    --arrowpanel-menuimageblank-padding-block: calc(var(--arrowpanel-menuitem-padding-block) - 2px) !important;
   }
 
   .subviewbutton > .toolbarbutton-icon {
@@ -5178,31 +5187,17 @@
   }
 
   @supports -moz-bool-pref("userChrome.icon.panel_photon") or -moz-bool-pref("userChrome.icon.panel_sparse") {
-    :root {
-      /* Blank Menu Left Padding */
-      --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px);
-      --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px);
-    }
-
-    :root[uidensity="compact"] {
-      --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 5px);
-    }
-
-    :root[uidensity="touch"] {
-      --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding));
-    }
-
     :root {
       /* Global */
       --arrowpanel-menuicon-paddingx2: calc(var(--arrowpanel-menuicon-padding) * 2);
       /* General Panel */
       --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-paddingx2) + 8px) !important;
-      --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important;
+      --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding-inline) - 2px) !important;
       /* Blank Menu Left Padding */
       --arrowpanel-menuimageblank-padding-horizontal: calc(
-        var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding)
+        var(--arrowpanel-menuicon-paddingx2) + var(--arrowpanel-menuitem-padding-inline)
       );
-      --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px);
+      --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding-block) + 1px);
     }
   }
   #downloadsHistory .button-text,
@@ -5236,14 +5231,14 @@
   }
 
   #appMenu-proton-update-banner::before {
-    margin-inline-start: var(--arrowpanel-menuitem-padding) !important;
+    margin-inline-start: var(--arrowpanel-menuitem-padding-inline) !important;
   }
 
   #appMenu-fxa-status2,
   #appMenu-zoom-controls2 {
     align-items: center;
-    padding-top: var(--arrowpanel-menuimageblank-padding) !important;
-    padding-bottom: var(--arrowpanel-menuimageblank-padding) !important;
+    padding-top: var(--arrowpanel-menuimageblank-padding-block) !important;
+    padding-bottom: var(--arrowpanel-menuimageblank-padding-block) !important;
   }
 
   #appMenu-zoom-controls2::before {
@@ -5342,8 +5337,8 @@
     #appMenu-more-button2,
     #appMenu-help-button2,
     #appMenu-quit-button2 {
-      padding-top: var(--arrowpanel-menuitemblank-padding) !important;
-      padding-bottom: var(--arrowpanel-menuitemblank-padding) !important;
+      padding-top: var(--arrowpanel-menuitemblank-padding-block) !important;
+      padding-bottom: var(--arrowpanel-menuitemblank-padding-block) !important;
     }
 
     #appMenu-zoom-controls2 {
@@ -5487,7 +5482,9 @@
   }
 
   .PanelUI-remotetabs-notabsforclient-label {
-    margin-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding)) !important;
+    margin-inline-start: calc(
+      var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding-inline)
+    ) !important;
     padding-inline-start: var(--arrowpanel-menublank-padding) !important;
   }
 
@@ -6011,7 +6008,7 @@
   /* Bookmark Popup - As Arrow Panel */
   #BMB_bookmarksPopup,
   #PersonalToolbar {
-    --context-menu-background-padding: var(--arrowpanel-menuitem-padding);
+    --context-menu-background-padding: var(--arrowpanel-menuitem-padding-inline);
   }
 
   /* Windows 7, 8 */
@@ -6034,7 +6031,7 @@
     menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic),
     #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
     #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
-      margin-inline: var(--arrowpanel-menuitem-padding) !important;
+      margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
       background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
     }
 
@@ -6057,7 +6054,7 @@
     menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic),
     #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
     #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
-      margin-inline: var(--arrowpanel-menuitem-padding) !important;
+      margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
       padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding)) !important;
       background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
     }
@@ -6080,20 +6077,20 @@
     menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic),
     #PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
     #PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
-      padding-inline-start: calc(var(--arrowpanel-menuitem-padding) + 1px) !important;
+      padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 1px) !important;
     }
   }
   @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
     /* Bookmark Popup - As Arrow Panel */
     #PersonalToolbar menupopup menuitem,
     #PersonalToolbar menupopup menu {
-      padding-inline: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding)) !important;
+      padding-inline: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding-inline)) !important;
     }
 
     /* Bookmark Popup - None icon menu */
     menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
     menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) {
-      padding-inline-start: calc(var(--arrowpanel-menuitem-padding) + 3px) !important;
+      padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 3px) !important;
     }
   }
   @supports -moz-bool-pref("userChrome.icon.context_menu") {

From 668d5acb10efcc3ed4b036801cb940d6b4afb503 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Mon, 4 Apr 2022 02:36:16 +0900
Subject: [PATCH 19/25] Add: Option - `userChrome.panel.full_width_padding`
 #222

---
 src/panel/_full_width_padding.scss | 12 ++++++++++++
 src/panel/_index.scss              |  4 ++++
 user.js                            |  1 +
 userChrome.css                     | 13 +++++++++++++
 4 files changed, 30 insertions(+)
 create mode 100644 src/panel/_full_width_padding.scss

diff --git a/src/panel/_full_width_padding.scss b/src/panel/_full_width_padding.scss
new file mode 100644
index 0000000..70a6019
--- /dev/null
+++ b/src/panel/_full_width_padding.scss
@@ -0,0 +1,12 @@
+/* Original
+--arrowpanel-menuitem-margin: 0 8px;
+--arrowpanel-menuitem-padding-block: 8px;
+--arrowpanel-menuitem-padding-inline: 8px;
+--arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline);
+*/
+
+:root,
+:root:is([uidensity="compact"], [uidensity="touch"]) {
+  --arrowpanel-menuitem-margin: 0 !important;
+  --arrowpanel-menuitem-padding-inline: calc(var(--arrowpanel-menuitem-padding-block) + 8px) !important;
+}
diff --git a/src/panel/_index.scss b/src/panel/_index.scss
index 70d1208..59f3a3e 100644
--- a/src/panel/_index.scss
+++ b/src/panel/_index.scss
@@ -5,3 +5,7 @@
 @include Option("userChrome.panel.full_width_separator") {
   @import "full_width_separator";
 }
+
+@include Option("userChrome.panel.full_width_padding") {
+  @import "full_width_padding";
+}
diff --git a/user.js b/user.js
index 2ecbf65..7e1f382 100644
--- a/user.js
+++ b/user.js
@@ -89,6 +89,7 @@ user_pref("userChrome.tab.bottom_rounded_corner",      true);
 
 // user_pref("userChrome.panel.remove_strip",                  true);
 // user_pref("userChrome.panel.full_width_separator",          true);
+// user_pref("userChrome.panel.full_width_padding",            true);
 
 // user_pref("userChrome.icon.account_image_to_right",         true);
 // user_pref("userChrome.icon.account_label_to_right",         true);
diff --git a/userChrome.css b/userChrome.css
index 0224c11..fc8a774 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -4958,6 +4958,19 @@
     --panel-separator-margin-horizontal: 0 !important;
   }
 }
+@supports -moz-bool-pref("userChrome.panel.full_width_padding") {
+  /* Original
+  --arrowpanel-menuitem-margin: 0 8px;
+  --arrowpanel-menuitem-padding-block: 8px;
+  --arrowpanel-menuitem-padding-inline: 8px;
+  --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline);
+  */
+  :root,
+  :root:is([uidensity="compact"], [uidensity="touch"]) {
+    --arrowpanel-menuitem-margin: 0 !important;
+    --arrowpanel-menuitem-padding-inline: calc(var(--arrowpanel-menuitem-padding-block) + 8px) !important;
+  }
+}
 /** Fullscreen - Overlap toolbar **********************************************/
 @supports -moz-bool-pref("userChrome.fullscreen.overlap") {
   @supports -moz-bool-pref("browser.fullscreen.autohide") {

From 1320af24e5309f2b8def02ba676fb1e034018723 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Mon, 4 Apr 2022 09:48:33 +0900
Subject: [PATCH 20/25] Add: Option - `userContent.newTab.pocket_to_bottom`

---
 src/contents/_activity_stream.scss | 19 +++++++++++++++++++
 user.js                            | 29 +++++++++++++++--------------
 userContent.css                    | 18 ++++++++++++++++++
 3 files changed, 52 insertions(+), 14 deletions(-)

diff --git a/src/contents/_activity_stream.scss b/src/contents/_activity_stream.scss
index d4ac910..48aac54 100644
--- a/src/contents/_activity_stream.scss
+++ b/src/contents/_activity_stream.scss
@@ -78,6 +78,25 @@
     }
   }
 
+  /** Activity Stream - Pocket order to last **********************************/
+  @include Option("userContent.newTab.pocket_to_bottom") {
+    .body-wrapper.on {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .body-wrapper.on > .discovery-stream.ds-layout {
+      flex-basis: 100%;
+    }
+
+    .body-wrapper.on > .collapsible-section[data-section-id="topstories"],
+    .home-section > #pocket-section,
+    .home-section > .divider,
+    .home-section > div:not(.section) {
+      order: 2;
+    }
+  }
+
   /** Activity Stream - Home Search Bar looks like proton *********************/
   @include Option("userContent.newTab.animate") {
     /* Dropdown Colors */
diff --git a/user.js b/user.js
index 7e1f382..1e904de 100644
--- a/user.js
+++ b/user.js
@@ -148,22 +148,23 @@ user_pref("userChrome.icon.global_menu",          true);
 user_pref("userChrome.icon.global_menubar",       true);
 
 // -- User Content -------------------------------------------------------------
-user_pref("userContent.player.ui",            true);
-user_pref("userContent.player.icon",          true);
-user_pref("userContent.player.noaudio",       true);
-user_pref("userContent.player.size",          true);
-user_pref("userContent.player.click_to_play", true);
-user_pref("userContent.player.animate",       true);
+user_pref("userContent.player.ui",               true);
+user_pref("userContent.player.icon",             true);
+user_pref("userContent.player.noaudio",          true);
+user_pref("userContent.player.size",             true);
+user_pref("userContent.player.click_to_play",    true);
+user_pref("userContent.player.animate",          true);
 
-user_pref("userContent.newTab.field_border",  true);
-user_pref("userContent.newTab.full_icon",     true);
-user_pref("userContent.newTab.animate",       true);
-user_pref("userContent.newTab.searchbar",     true);
+user_pref("userContent.newTab.field_border",     true);
+user_pref("userContent.newTab.full_icon",        true);
+user_pref("userContent.newTab.animate",          true);
+user_pref("userContent.newTab.pocket_to_bottom", true);
+user_pref("userContent.newTab.searchbar",        true);
 
-user_pref("userContent.page.illustration",    true);
-user_pref("userContent.page.proton_color",    true);
-user_pref("userContent.page.dark_mode",       true); // Need proton_color
-user_pref("userContent.page.proton",          true); // Need proton_color
+user_pref("userContent.page.illustration",       true);
+user_pref("userContent.page.proton_color",       true);
+user_pref("userContent.page.dark_mode",          true); // Need proton_color
+user_pref("userContent.page.proton",             true); // Need proton_color
 
 // ** Useful Options ***********************************************************
 // Integrated calculator at urlbar
diff --git a/userContent.css b/userContent.css
index 90f4aca..fcb6d2e 100644
--- a/userContent.css
+++ b/userContent.css
@@ -340,6 +340,24 @@
       }
     }
   }
+  /** Activity Stream - Pocket order to last **********************************/
+  @supports -moz-bool-pref("userContent.newTab.pocket_to_bottom") {
+    .body-wrapper.on {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .body-wrapper.on > .discovery-stream.ds-layout {
+      flex-basis: 100%;
+    }
+
+    .body-wrapper.on > .collapsible-section[data-section-id="topstories"],
+    .home-section > #pocket-section,
+    .home-section > .divider,
+    .home-section > div:not(.section) {
+      order: 2;
+    }
+  }
   /** Activity Stream - Home Search Bar looks like proton *********************/
   @supports -moz-bool-pref("userContent.newTab.animate") {
     /* Dropdown Colors */

From 5185e16e24d5327517490ac49882c692665a12e3 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Tue, 5 Apr 2022 09:04:06 +0900
Subject: [PATCH 21/25] Add: Option - square #222 #266

`userChrome.tab.photon_like_radius` to `userChrome.rounding.square_tab`
---
 src/padding/_index.scss | 12 -------
 src/userChrome.scss     |  3 ++
 user.js                 | 10 +++++-
 userChrome.css          | 78 +++++++++++++++++++++++++++++++++--------
 4 files changed, 76 insertions(+), 27 deletions(-)

diff --git a/src/padding/_index.scss b/src/padding/_index.scss
index d38373c..009ae24 100644
--- a/src/padding/_index.scss
+++ b/src/padding/_index.scss
@@ -1,17 +1,5 @@
 /*= Tab Bar - Distribution padding, radius ===================================*/
 @import "tab_padding";
-@include Option("userChrome.tab.photon_like_radius") {
-  :root {
-    --tab-border-radius: 0px !important; /* Original: 4px */
-  }
-  /* Fix Tab bar button radious */
-  #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
-  #TabsToolbar .toolbarbutton-1 > .toolbarbutton-text,
-  #TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack,
-  .tab-close-button {
-    --tab-border-radius: 4px !important;
-  }
-}
 
 /*= Tab Bar - Reduce Width, Show more tabs ===================================*/
 @include Option("userChrome.padding.first_tab") {
diff --git a/src/userChrome.scss b/src/userChrome.scss
index d018164..275844d 100644
--- a/src/userChrome.scss
+++ b/src/userChrome.scss
@@ -50,6 +50,9 @@
 /** Decoration ****************************************************************/
 @import "decoration/index";
 
+/** Rounding ******************************************************************/
+@import "rounding/index";
+
 /** Reduce Padding ************************************************************/
 @import "padding/index";
 
diff --git a/user.js b/user.js
index 1e904de..c383a7c 100644
--- a/user.js
+++ b/user.js
@@ -51,7 +51,7 @@ user_pref("userChrome.tab.bottom_rounded_corner",      true);
 
 // Photon Only
 // user_pref("userChrome.tab.photon_like_contextline", true);
-// user_pref("userChrome.tab.photon_like_radius",      true);
+// user_pref("userChrome.rounding.square_tab",         true);
 
 // == Theme Compatibility Settings =============================================
 // user_pref("userChrome.compatibility.covered_header_image", true);
@@ -66,6 +66,14 @@ user_pref("userChrome.tab.bottom_rounded_corner",      true);
 
 // user_pref("userChrome.theme.proton_color.dark_blue_accent", true);
 
+// user_pref("userChrome.rounding.square_button",             true);
+// user_pref("userChrome.rounding.square_panel",              true);
+// user_pref("userChrome.rounding.square_panelitem",          true);
+// user_pref("userChrome.rounding.square_menupopup",          true);
+// user_pref("userChrome.rounding.square_menuitem",           true);
+// user_pref("userChrome.rounding.square_field",              true);
+// user_pref("userChrome.rounding.square_checklabel",         true);
+
 // user_pref("userChrome.padding.first_tab",                   true);
 // user_pref("userChrome.padding.drag_space",                  true);
 
diff --git a/userChrome.css b/userChrome.css
index fc8a774..4095eec 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -2930,6 +2930,70 @@
     }
   }
 }
+/** Rounding ******************************************************************/
+/** Rounding ******************************************************************/
+@supports -moz-bool-pref("userChrome.rounding.square_tab") {
+  :root {
+    --tab-border-radius: 0 !important;
+    /* Original: 4px */
+  }
+}
+@supports -moz-bool-pref("userChrome.rounding.square_button") {
+  :root {
+    --toolbarbutton-border-radius: 0 !important;
+    /* Original: 4px */
+  }
+
+  button {
+    border-radius: 0 !important;
+  }
+}
+@supports -moz-bool-pref("userChrome.rounding.square_tab") or -moz-bool-pref("userChrome.round.square_button") {
+  /* Fix Tab bar button radious */
+  #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-icon,
+  #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-text,
+  #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-badge-stack,
+  .tab-close-button {
+    --tab-border-radius: var(--toolbarbutton-border-radius) !important;
+  }
+}
+@supports -moz-bool-pref("userChrome.rounding.square_panel") {
+  :root {
+    --arrowpanel-border-radius: 0 !important;
+  }
+}
+@supports -moz-bool-pref("userChrome.rounding.square_panelitem") {
+  :root {
+    --arrowpanel-menuitem-border-radius: 0 !important;
+    --subviewbutton-border-radius: 0 !important;
+  }
+}
+@supports -moz-bool-pref("userChrome.rounding.square_menupopup") {
+  xul|menupopup {
+    border-radius: 0 !important;
+  }
+}
+@supports -moz-bool-pref("userChrome.rounding.square_menuitem") {
+  xul|menulist:not([native]),
+  xul|menulist > xul|menupopup xul|menu,
+  xul|menulist > xul|menupopup xul|menuitem {
+    border-radius: 0 !important;
+  }
+}
+@supports -moz-bool-pref("userChrome.rounding.square_field") {
+  html|select[size][multiple],
+  xul|listheader,
+  xul|richlistbox,
+  html|input {
+    border-radius: 0 !important;
+  }
+}
+@supports -moz-bool-pref("userChrome.rounding.square_checklabel") {
+  .checkbox-check,
+  xul|*.radio-check {
+    border-radius: 0 !important;
+  }
+}
 /** Reduce Padding ************************************************************/
 /*= Tab Bar - Distribution padding, radius ===================================*/
 @supports -moz-bool-pref("userChrome.tab.lepton_like_padding") or -moz-bool-pref("userChrome.tab.photon_like_padding") {
@@ -2954,20 +3018,6 @@
     --tab-block-margin: 0px !important;
   }
 }
-@supports -moz-bool-pref("userChrome.tab.photon_like_radius") {
-  :root {
-    --tab-border-radius: 0px !important;
-    /* Original: 4px */
-  }
-
-  /* Fix Tab bar button radious */
-  #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
-  #TabsToolbar .toolbarbutton-1 > .toolbarbutton-text,
-  #TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack,
-  .tab-close-button {
-    --tab-border-radius: 4px !important;
-  }
-}
 /*= Tab Bar - Reduce Width, Show more tabs ===================================*/
 @supports -moz-bool-pref("userChrome.padding.first_tab") {
   /* for First Tab Space */

From f9b486d5e60be816990676d90645e8da48aac1a1 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Tue, 5 Apr 2022 09:10:00 +0900
Subject: [PATCH 22/25] Fix: Option - Change name
 `userContent.newTab.pocket_to_bottom` -> `userContent.newTab.pocket_to_last`

---
 src/contents/_activity_stream.scss |  2 +-
 user.js                            | 30 +++++++++++++++---------------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/contents/_activity_stream.scss b/src/contents/_activity_stream.scss
index 48aac54..6593ce1 100644
--- a/src/contents/_activity_stream.scss
+++ b/src/contents/_activity_stream.scss
@@ -79,7 +79,7 @@
   }
 
   /** Activity Stream - Pocket order to last **********************************/
-  @include Option("userContent.newTab.pocket_to_bottom") {
+  @include Option("userContent.newTab.pocket_to_last") {
     .body-wrapper.on {
       display: flex;
       flex-wrap: wrap;
diff --git a/user.js b/user.js
index c383a7c..42211ca 100644
--- a/user.js
+++ b/user.js
@@ -156,23 +156,23 @@ user_pref("userChrome.icon.global_menu",          true);
 user_pref("userChrome.icon.global_menubar",       true);
 
 // -- User Content -------------------------------------------------------------
-user_pref("userContent.player.ui",               true);
-user_pref("userContent.player.icon",             true);
-user_pref("userContent.player.noaudio",          true);
-user_pref("userContent.player.size",             true);
-user_pref("userContent.player.click_to_play",    true);
-user_pref("userContent.player.animate",          true);
+user_pref("userContent.player.ui",             true);
+user_pref("userContent.player.icon",           true);
+user_pref("userContent.player.noaudio",        true);
+user_pref("userContent.player.size",           true);
+user_pref("userContent.player.click_to_play",  true);
+user_pref("userContent.player.animate",        true);
 
-user_pref("userContent.newTab.field_border",     true);
-user_pref("userContent.newTab.full_icon",        true);
-user_pref("userContent.newTab.animate",          true);
-user_pref("userContent.newTab.pocket_to_bottom", true);
-user_pref("userContent.newTab.searchbar",        true);
+user_pref("userContent.newTab.field_border",   true);
+user_pref("userContent.newTab.full_icon",      true);
+user_pref("userContent.newTab.animate",        true);
+user_pref("userContent.newTab.pocket_to_last", true);
+user_pref("userContent.newTab.searchbar",      true);
 
-user_pref("userContent.page.illustration",       true);
-user_pref("userContent.page.proton_color",       true);
-user_pref("userContent.page.dark_mode",          true); // Need proton_color
-user_pref("userContent.page.proton",             true); // Need proton_color
+user_pref("userContent.page.illustration",     true);
+user_pref("userContent.page.proton_color",     true);
+user_pref("userContent.page.dark_mode",        true); // Need proton_color
+user_pref("userContent.page.proton",           true); // Need proton_color
 
 // ** Useful Options ***********************************************************
 // Integrated calculator at urlbar

From c8f6ad806cfddbdfc2802f0da43b4a00c24f9c07 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Wed, 6 Apr 2022 09:34:23 +0900
Subject: [PATCH 23/25] Add: Option -
 `userContent.page.proton_color.system_accent` #76

---
 src/contents/_proton_color.scss |  9 +++++++++
 user.js                         |  2 ++
 userChrome.css                  |  3 +++
 userContent.css                 | 11 ++++++++++-
 4 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/contents/_proton_color.scss b/src/contents/_proton_color.scss
index 9d4a158..b54a7ce 100644
--- a/src/contents/_proton_color.scss
+++ b/src/contents/_proton_color.scss
@@ -15,4 +15,13 @@
       }
     }
   }
+
+  @include Option("userContent.page.proton_color.system_accent") {
+    :host, :root {
+      --in-content-primary-button-text-color: -moz-accent-color-foreground !important;
+      --in-content-primary-button-background: -moz-accent-color !important;
+      --in-content-primary-button-background-hover: color-mix(in srgb, black 10%, -moz-accent-color) !important;;
+      --in-content-primary-button-background-active: color-mix(in srgb, black 20%, -moz-accent-color) !important;
+    }
+  }
 }
diff --git a/user.js b/user.js
index 42211ca..0fa5dff 100644
--- a/user.js
+++ b/user.js
@@ -104,7 +104,9 @@ user_pref("userChrome.tab.bottom_rounded_corner",      true);
 
 // -- User Content -------------------------------------------------------------
 // user_pref("userContent.player.ui.twoline",                  true);
+
 // user_pref("userContent.page.proton_color.dark_blue_accent", true);
+// user_pref("userContent.page.proton_color.system_accent",    true);
 
 // == Theme Default Settings ===================================================
 // -- User Chrome --------------------------------------------------------------
diff --git a/userChrome.css b/userChrome.css
index 4095eec..4581757 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -2994,6 +2994,9 @@
     border-radius: 0 !important;
   }
 }
+/*
+--toolbarbutton-border-radius: 4px;
+*/
 /** Reduce Padding ************************************************************/
 /*= Tab Bar - Distribution padding, radius ===================================*/
 @supports -moz-bool-pref("userChrome.tab.lepton_like_padding") or -moz-bool-pref("userChrome.tab.photon_like_padding") {
diff --git a/userContent.css b/userContent.css
index fcb6d2e..32696bf 100644
--- a/userContent.css
+++ b/userContent.css
@@ -341,7 +341,7 @@
     }
   }
   /** Activity Stream - Pocket order to last **********************************/
-  @supports -moz-bool-pref("userContent.newTab.pocket_to_bottom") {
+  @supports -moz-bool-pref("userContent.newTab.pocket_to_last") {
     .body-wrapper.on {
       display: flex;
       flex-wrap: wrap;
@@ -768,6 +768,15 @@
         }
       }
     }
+    @supports -moz-bool-pref("userContent.page.proton_color.system_accent") {
+      :host,
+      :root {
+        --in-content-primary-button-text-color: -moz-accent-color-foreground !important;
+        --in-content-primary-button-background: -moz-accent-color !important;
+        --in-content-primary-button-background-hover: color-mix(in srgb, black 10%, -moz-accent-color) !important;
+        --in-content-primary-button-background-active: color-mix(in srgb, black 20%, -moz-accent-color) !important;
+      }
+    }
   }
 }
 @supports -moz-bool-pref("userContent.page.dark_mode") {

From da33a2b96371ade59e512c03558b3c2a64db99ff Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Wed, 6 Apr 2022 09:38:32 +0900
Subject: [PATCH 24/25] Fix: System accent content - using `highlight` for
 field border #76

---
 src/contents/_proton_color.scss | 6 +++---
 userContent.css                 | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/contents/_proton_color.scss b/src/contents/_proton_color.scss
index b54a7ce..c7dfaa8 100644
--- a/src/contents/_proton_color.scss
+++ b/src/contents/_proton_color.scss
@@ -19,9 +19,9 @@
   @include Option("userContent.page.proton_color.system_accent") {
     :host, :root {
       --in-content-primary-button-text-color: -moz-accent-color-foreground !important;
-      --in-content-primary-button-background: -moz-accent-color !important;
-      --in-content-primary-button-background-hover: color-mix(in srgb, black 10%, -moz-accent-color) !important;;
-      --in-content-primary-button-background-active: color-mix(in srgb, black 20%, -moz-accent-color) !important;
+      --in-content-primary-button-background: Highlight !important;
+      --in-content-primary-button-background-hover: color-mix(in srgb, black 10%, Highlight) !important;
+      --in-content-primary-button-background-active: color-mix(in srgb, black 20%, Highlight) !important;
     }
   }
 }
diff --git a/userContent.css b/userContent.css
index 32696bf..d99d626 100644
--- a/userContent.css
+++ b/userContent.css
@@ -772,9 +772,9 @@
       :host,
       :root {
         --in-content-primary-button-text-color: -moz-accent-color-foreground !important;
-        --in-content-primary-button-background: -moz-accent-color !important;
-        --in-content-primary-button-background-hover: color-mix(in srgb, black 10%, -moz-accent-color) !important;
-        --in-content-primary-button-background-active: color-mix(in srgb, black 20%, -moz-accent-color) !important;
+        --in-content-primary-button-background: Highlight !important;
+        --in-content-primary-button-background-hover: color-mix(in srgb, black 10%, Highlight) !important;
+        --in-content-primary-button-background-active: color-mix(in srgb, black 20%, Highlight) !important;
       }
     }
   }

From 9ae9cc29e8e7549b85570977982544c1cc0bad5d Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Wed, 6 Apr 2022 10:24:55 +0900
Subject: [PATCH 25/25] Fix: Library proton color - outline using
 `--in-content-focus-outline-color`

---
 src/library/_proton.scss        | 3 +--
 src/theme/_dark_blue_color.scss | 2 --
 userChrome.css                  | 3 +--
 userContent.css                 | 3 +--
 4 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/library/_proton.scss b/src/library/_proton.scss
index 8cdbd8c..4d4b05c 100644
--- a/src/library/_proton.scss
+++ b/src/library/_proton.scss
@@ -36,7 +36,7 @@
     --organizer-hover-color: var(--organizer-color);
     --organizer-selected-background: var(--in-content-button-background-active);
     --organizer-selected-color: var(--organizer-color);
-    --organizer-outline-color: var(--in-content-primary-button-background);
+    --organizer-outline-color: var(--in-content-focus-outline-color);
 
     --organizer-separator-color: var(--organizer-pane-field-border-color);
     --organizer-border-color: var(--in-content-border-color);
@@ -64,7 +64,6 @@
 
       --organizer-hover-background: rgb(82, 82, 94);
       --organizer-selected-background: rgb(91, 91, 102);
-      --organizer-outline-color: rgb(0, 221, 255);
 
       --organizer-toolbar-field-background: var(--in-content-page-background);
       --organizer-toolbar-field-background-focused: rgb(66, 65, 77);
diff --git a/src/theme/_dark_blue_color.scss b/src/theme/_dark_blue_color.scss
index 9205f3e..a38d547 100644
--- a/src/theme/_dark_blue_color.scss
+++ b/src/theme/_dark_blue_color.scss
@@ -30,8 +30,6 @@
  */
   --blue-20: #b6d6ff; /* lighten(#0060df, 42%) - rgb(182, 214, 255), Add for link active color*/
   --blue-30: #74c0ff; /* rgb(116, 192, 255), Add for active color */
-
-  --organizer-outline-color: var(--blue-40) !important;
 }
 
 @mixin DarkBlueContent() {
diff --git a/userChrome.css b/userChrome.css
index 4581757..12658a3 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -2281,7 +2281,7 @@
           --organizer-hover-color: var(--organizer-color);
           --organizer-selected-background: var(--in-content-button-background-active);
           --organizer-selected-color: var(--organizer-color);
-          --organizer-outline-color: var(--in-content-primary-button-background);
+          --organizer-outline-color: var(--in-content-focus-outline-color);
           --organizer-separator-color: var(--organizer-pane-field-border-color);
           --organizer-border-color: var(--in-content-border-color);
           --organizer-toolbar-field-background: rgb(240, 240, 244);
@@ -2306,7 +2306,6 @@
             --organizer-content-background: rgb(28, 27, 34);
             --organizer-hover-background: rgb(82, 82, 94);
             --organizer-selected-background: rgb(91, 91, 102);
-            --organizer-outline-color: rgb(0, 221, 255);
             --organizer-toolbar-field-background: var(--in-content-page-background);
             --organizer-toolbar-field-background-focused: rgb(66, 65, 77);
             scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3);
diff --git a/userContent.css b/userContent.css
index d99d626..baace60 100644
--- a/userContent.css
+++ b/userContent.css
@@ -2361,7 +2361,7 @@
             --organizer-hover-color: var(--organizer-color);
             --organizer-selected-background: var(--in-content-button-background-active);
             --organizer-selected-color: var(--organizer-color);
-            --organizer-outline-color: var(--in-content-primary-button-background);
+            --organizer-outline-color: var(--in-content-focus-outline-color);
             --organizer-separator-color: var(--organizer-pane-field-border-color);
             --organizer-border-color: var(--in-content-border-color);
             --organizer-toolbar-field-background: rgb(240, 240, 244);
@@ -2386,7 +2386,6 @@
               --organizer-content-background: rgb(28, 27, 34);
               --organizer-hover-background: rgb(82, 82, 94);
               --organizer-selected-background: rgb(91, 91, 102);
-              --organizer-outline-color: rgb(0, 221, 255);
               --organizer-toolbar-field-background: var(--in-content-page-background);
               --organizer-toolbar-field-background-focused: rgb(66, 65, 77);
               scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3);