From ddd8b4401d389ab208f3ab9f9636f99df30261d8 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 23 Jul 2022 23:36:45 +0900 Subject: [PATCH] Fix: Compatibility - Hard coded `-moz-accent-color` #437 --- __tests__/accent_color.test.scss | 62 ++++ css/leptonChrome.css | 274 ++++++++++++++---- css/leptonContent.css | 116 ++++++-- src/compatibility/_accent_color.scss | 12 - src/compatibility/_index.scss | 3 - src/compatibility/_os.scss | 4 +- src/contents/_proton_color.scss | 4 +- src/decoration/_field_border.scss | 8 +- src/leptonChrome.scss | 1 + src/leptonContent.scss | 2 +- src/tabbar/newtab_button/_looks_like_tab.scss | 32 +- src/theme/_fully_color.scss | 6 +- src/theme/proton_chrome/_proton_commons.scss | 4 +- src/theme/system_default_theme/_gtk.scss | 4 +- src/theme/system_default_theme/_mac.scss | 20 +- .../_urlbar_focus_color.scss | 24 +- src/theme/system_default_theme/_win10.scss | 34 ++- src/utils/_accent_color.scss | 21 ++ src/utils/_proton_elements.scss | 69 +++-- 19 files changed, 514 insertions(+), 186 deletions(-) create mode 100644 __tests__/accent_color.test.scss delete mode 100644 src/compatibility/_accent_color.scss create mode 100644 src/utils/_accent_color.scss diff --git a/__tests__/accent_color.test.scss b/__tests__/accent_color.test.scss new file mode 100644 index 0000000..fe22ef8 --- /dev/null +++ b/__tests__/accent_color.test.scss @@ -0,0 +1,62 @@ +@use "true" as *; +@use "../src/utils/accent_color" as *; + +@include test-module("Accent Color Option [mix]") { + @include test("simple") { + @include assert { + @include output { + @include AccentColor { + body { + background-color: $accentColor; + color: $accentTextColor; + } + } + } + @include expect { + body { + background-color: AccentColor; + color: AccentColorText; + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + body { + background-color: -moz-accent-color; + color: -moz-accent-color-foreground; + } + } + } + } + } + @include test("css var") { + @include assert { + @include output { + :root { + @include AccentColor { + // Don't use like this!! + --uc-accent-color: $accentColor; + --uc-accent-text-color: $accentTextColor; + + // Use like this + --uc-accent-color: #{$accentColor}; + --uc-accent-text-color: #{$accentTextColor}; + } + } + } + @include expect { + :root { + --uc-accent-color: $accentColor; + --uc-accent-text-color: $accentTextColor; + --uc-accent-color: AccentColor; + --uc-accent-text-color: AccentColorText; + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + :root { + --uc-accent-color: $accentColor; + --uc-accent-text-color: $accentTextColor; + --uc-accent-color: -moz-accent-color; + --uc-accent-text-color: -moz-accent-color-foreground; + } + } + } + } + } +} diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 3ae1abf..50c8b96 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -29,21 +29,6 @@ } } /** Compatibility Fixes *******************************************************/ -/*= Color - Compatibility ====================================================*/ -:root { - /* Compatibility for accent color - https://github.com/mozilla/gecko-dev/commit/4c5f20179e8d3b963dc588efb9dc2c7b49e7bb31 - */ - --uc-accent-color: AccentColor; - --uc-accent-text-color: AccentColorText; -} -@supports -moz-bool-pref("userChrome.compatibility.accent_color") { - :root { - --uc-accent-color: -moz-accent-color; - --uc-accent-text-color: -moz-accent-color-foreground; - } -} - /*= Theme - Compatibility ====================================================*/ @supports -moz-bool-pref("userChrome.compatibility.theme") { /*= Hotfix #98 ===============================================================*/ @@ -161,7 +146,12 @@ } @media (-moz-windows-accent-color-in-titlebar) { :root[sizemode="normal"][tabsintitlebar] #navigator-toolbox { - border-top-color: var(--uc-accent-color) !important; + border-top-color: AccentColor !important; + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + :root[sizemode="normal"][tabsintitlebar] #navigator-toolbox { + border-top-color: -moz-accent-color !important; + } } } } @@ -366,16 +356,31 @@ /* URL Bar */ :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme), :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) { - --focus-outline-color: var(--uc-accent-color) !important; + --focus-outline-color: AccentColor !important; } :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #urlbar[open] > #urlbar-background { - border-color: color-mix(in srgb, var(--uc-accent-color) 50%, transparent) !important; + border-color: color-mix(in srgb, AccentColor 50%, transparent) !important; /* Like: --toolbar-field-focus-border-color */ } + + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme), + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) { + --focus-outline-color: -moz-accent-color !important; + } + + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #urlbar[open] + > #urlbar-background { + border-color: color-mix(in srgb, -moz-accent-color 50%, transparent) !important; + /* Like: --toolbar-field-focus-border-color */ + } + } } /*= Windows7 - Aero Based Theme ==============================================*/ @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) { @@ -433,11 +438,20 @@ --win-shorcut-text-color: #757575; --win-error-color: #b31616; --win-red-border-color: #ff4343; - --win-accent-forground-color: var(--uc-accent-text-color); - --win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, var(--uc-accent-color)); - --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, var(--uc-accent-color)); - --win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, var(--uc-accent-color)); - --win-accent-active-color: var(--uc-accent-color); + --win-accent-forground-color: AccentColorText; + --win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, AccentColor); + --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, AccentColor); + --win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, AccentColor); + --win-accent-active-color: AccentColor; + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + :root:not(:-moz-lwtheme) { + --win-accent-forground-color: -moz-accent-color-foreground; + --win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, -moz-accent-color); + --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, -moz-accent-color); + --win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, -moz-accent-color); + --win-accent-active-color: -moz-accent-color; + } } @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { @@ -465,10 +479,19 @@ --win-shorcut-text-color: #adadad; --win-error-color: #ffb900; --win-red-border-color: #ff4343; - --win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, var(--uc-accent-color)); - --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, var(--uc-accent-color)); - --win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, var(--uc-accent-color)); - --win-accent-active-color: var(--uc-accent-color); + --win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, AccentColor); + --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, AccentColor); + --win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, AccentColor); + --win-accent-active-color: AccentColor; + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + --win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, -moz-accent-color); + --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, -moz-accent-color); + --win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, -moz-accent-color); + --win-accent-active-color: -moz-accent-color; + } } } :root:not(:-moz-lwtheme), @@ -719,20 +742,39 @@ /* Tab Bar */ :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .titlebar-color { - color: var(--uc-accent-text-color); - background-color: var(--uc-accent-color); + color: AccentColorText; + background-color: AccentColor; + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .titlebar-color { + color: -moz-accent-color-foreground; + background-color: -moz-accent-color; + } } :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .toolbar-items, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .toolbar-items { --toolbarbutton-icon-fill: currentColor; - --toolbarbutton-hover-background: color-mix(in srgb, var(--uc-accent-text-color) 10%, transparent); - --toolbarbutton-active-background: color-mix(in srgb, var(var(--uc-accent-text-color)) 15%, transparent); + --toolbarbutton-hover-background: color-mix(in srgb, AccentColorText 10%, transparent); + --toolbarbutton-active-background: color-mix(in srgb, AccentColorText 15%, transparent); + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .toolbar-items, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .toolbar-items { + --toolbarbutton-hover-background: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent); + --toolbarbutton-active-background: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent); + } } } /*= GTK - URL View url accent color ==========================================*/ @media (-moz-gtk-csd-available) { :root:not(:-moz-lwtheme) .urlbarView-url { - --urlbar-popup-url-color: var(--uc-accent-color); + --urlbar-popup-url-color: AccentColor; + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + :root:not(:-moz-lwtheme) .urlbarView-url { + --urlbar-popup-url-color: -moz-accent-color; + } } /* Nightly Compatibility */ @@ -758,14 +800,14 @@ --mac-sidebar-hover-bgcolor: color-mix(in srgb, ButtonFace 60%, var(--mac-sidebar-bgcolor)); --mac-hover-bgcolor: Window; --mac-disabled-bgcolor: transparent; - --mac-primary-button-color: var(--uc-accent-text-color); + --mac-primary-button-color: AccentColorText; /* or -moz-mac-menutextselect */ - --mac-accent-color: var(--uc-accent-color); + --mac-accent-color: AccentColor; /* or LinkText */ - --mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, var(--uc-accent-color)); - --mac-accent-hover-color: color-mix(in srgb, rgb(0, 0, 0) 10%, var(--uc-accent-color)); + --mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, AccentColor); + --mac-accent-hover-color: color-mix(in srgb, rgb(0, 0, 0) 10%, AccentColor); /* or -moz-mac-menuselect, Highlight */ - --mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, var(--uc-accent-color)); + --mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, AccentColor); /* or ActiveBorder */ /* Text, Icon Color */ --menu-color: var(--mac-text-color) !important; @@ -872,6 +914,20 @@ --download-progress-flare-color: rgba(255, 255, 255, 0.75) !important; --panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important; } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + :root:not(:-moz-lwtheme), + :root[lwt-default-theme-in-dark-mode] { + --mac-primary-button-color: -moz-accent-color-foreground; + /* or -moz-mac-menutextselect */ + --mac-accent-color: -moz-accent-color; + /* or LinkText */ + --mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-accent-color); + --mac-accent-hover-color: color-mix(in srgb, rgb(0, 0, 0) 10%, -moz-accent-color); + /* or -moz-mac-menuselect, Highlight */ + --mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, -moz-accent-color); + /* or ActiveBorder */ + } + } @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { :root:not(:-moz-lwtheme), @@ -1371,9 +1427,17 @@ .sidebar-panel:not([lwt-sidebar]) #search-box[focused="true"], body:not([lwt-sidebar]) xul|search-textbox.tabsFilter[focused="true"] { - border-color: var(--uc-accent-color) !important; + border-color: AccentColor !important; /* Hard Coded */ - outline-color: var(--uc-accent-color) !important; + outline-color: AccentColor !important; + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + .sidebar-panel:not([lwt-sidebar]) #search-box[focused="true"], + body:not([lwt-sidebar]) xul|search-textbox.tabsFilter[focused="true"] { + border-color: -moz-accent-color !important; + /* Hard Coded */ + outline-color: -moz-accent-color !important; + } } /*= PopupAutoComplete ========================================================*/ @@ -1730,61 +1794,116 @@ .checkbox-check[checked] { -moz-context-properties: fill !important; fill: currentColor !important; - color: var(--checkbox-checked-color, var(--uc-accent-text-color)) !important; border-color: var(--checkbox-checked-border-color, transparent) !important; - background-color: var(--checkbox-checked-bgcolor, var(--uc-accent-color)) !important; background-image: url("chrome://global/skin/icons/check.svg") !important; background-position: center !important; background-repeat: no-repeat !important; /* Style the button also when printing with "Print Backgrounds" unchecked */ color-adjust: exact !important; + color: var(--checkbox-checked-color, AccentColorText) !important; + background-color: var(--checkbox-checked-bgcolor, AccentColor) !important; + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + .checkbox-check[checked] { + color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; + background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important; + } } checkbox:not([disabled="true"]):hover > .checkbox-check { - background-color: var( - --checkbox-unchecked-hover-bgcolor, - color-mix(in srgb, var(--uc-accent-color) 4%, Field) - ) !important; + background-color: var(--checkbox-unchecked-hover-bgcolor, color-mix(in srgb, AccentColor 4%, Field)) !important; + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + checkbox:not([disabled="true"]):hover > .checkbox-check { + background-color: var( + --checkbox-unchecked-hover-bgcolor, + color-mix(in srgb, -moz-accent-color 4%, Field) + ) !important; + } } checkbox:not([disabled="true"]):hover:active > .checkbox-check { - background-color: var( - --checkbox-unchecked-active-bgcolor, - color-mix(in srgb, var(--uc-accent-color) 8%, Field) - ) !important; + background-color: var(--checkbox-unchecked-active-bgcolor, color-mix(in srgb, AccentColor 8%, Field)) !important; + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + checkbox:not([disabled="true"]):hover:active > .checkbox-check { + background-color: var( + --checkbox-unchecked-active-bgcolor, + color-mix(in srgb, -moz-accent-color 8%, Field) + ) !important; + } } checkbox:not([disabled="true"]):hover > .checkbox-check[checked] { background-color: var( --checkbox-checked-hover-bgcolor, - color-mix(in srgb, currentColor 12.5%, var(--uc-accent-color)) + color-mix(in srgb, currentColor 12.5%, AccentColor) ) !important; } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + checkbox:not([disabled="true"]):hover > .checkbox-check[checked] { + background-color: var( + --checkbox-checked-hover-bgcolor, + color-mix(in srgb, currentColor 12.5%, -moz-accent-color) + ) !important; + } + } checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] { background-color: var( --checkbox-checked-active-bgcolor, - color-mix(in srgb, currentColor 25%, var(--uc-accent-color)) + color-mix(in srgb, currentColor 25%, AccentColor) ) !important; } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] { + background-color: var( + --checkbox-checked-active-bgcolor, + color-mix(in srgb, currentColor 25%, -moz-accent-color) + ) !important; + } + } checkbox:-moz-focusring > .checkbox-check { - outline: 2px solid var(--focus-outline-color, var(--uc-accent-color)) !important; + outline: 2px solid var(--focus-outline-color, AccentColor) !important; outline-offset: var(--focus-outline-offset, 2px) !important; } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + checkbox:-moz-focusring > .checkbox-check { + outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important; + } + } @media (prefers-contrast) { checkbox:not([disabled="true"]):hover > .checkbox-check { /* color will set the border-color on the check due to how HCM works for in-content pages. */ - color: var(--checkbox-checked-border-color, color-mix(in srgb, var(--uc-accent-color) 4%, Field)) !important; + color: var(--checkbox-checked-border-color, color-mix(in srgb, AccentColor 4%, Field)) !important; + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + checkbox:not([disabled="true"]):hover > .checkbox-check { + /* color will set the border-color on the check due to how HCM works for in-content pages. */ + color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important; + } } .checkbox-check[checked] { color: var(--checkbox-checked-border-color, currentColor) !important; - fill: var(--checkbox-checked-color, var(--uc-accent-text-color)) !important; + fill: var(--checkbox-checked-color, AccentColorText) !important; + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + .checkbox-check[checked] { + fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; + } } checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] > .checkbox-check[checked], checkbox:not([disabled="true"]):hover > .checkbox-check[checked] > .checkbox-check[checked] { - color: var(--checkbox-checked-border-color-hover, var(--uc-accent-text-color)) !important; - fill: var(--checkbox-checked-border-color-hover, var(--uc-accent-text-color)) !important; + color: var(--checkbox-checked-border-color-hover, AccentColorText) !important; + fill: var(--checkbox-checked-border-color-hover, AccentColorText) !important; + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] > .checkbox-check[checked], + checkbox:not([disabled="true"]):hover > .checkbox-check[checked] > .checkbox-check[checked] { + color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; + fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; + } } } .checkbox-icon[src] { @@ -1830,9 +1949,14 @@ background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)) !important; } xul|menulist:-moz-focusring { - outline: 2px solid var(--focus-outline-color, var(--uc-accent-color)) !important; + outline: 2px solid var(--focus-outline-color, AccentColor) !important; outline-offset: var(--focus-outline-offset, 2px) !important; } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + xul|menulist:-moz-focusring { + outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important; + } + } #label-box { -moz-box-align: center !important; @@ -2696,14 +2820,27 @@ .sidebar-panel:not([lwt-sidebar]) #search-box:hover, body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover { - border-color: var(--uc-accent-color) !important; + border-color: AccentColor !important; + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + .sidebar-panel:not([lwt-sidebar]) #search-box:hover, + body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover { + border-color: -moz-accent-color !important; + } } /* Others */ #editBMPanel_namePicker:hover, #editBMPanel_tagsField:hover, .findbar-container .findbar-textbox:hover { - --input-border-color: color-mix(in srgb, var(--focus-outline-color, var(--uc-accent-color)) 50%, transparent); + --input-border-color: color-mix(in srgb, var(--focus-outline-color, AccentColor) 50%, transparent); + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + #editBMPanel_namePicker:hover, + #editBMPanel_tagsField:hover, + .findbar-container .findbar-textbox:hover { + --input-border-color: color-mix(in srgb, var(--focus-outline-color, -moz-accent-color) 50%, transparent); + } } } /*= Downloads Panel ========================================================*/ @@ -4554,15 +4691,30 @@ @media (-moz-windows-accent-color-in-titlebar) { :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { - fill: color-mix(in srgb, var(--uc-accent-text-color) 10%, transparent) !important; + fill: color-mix(in srgb, AccentColorText 10%, transparent) !important; /* Hardcorded for compatibility */ } :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active { - fill: color-mix(in srgb, var(--uc-accent-text-color) 15%, transparent) !important; + fill: color-mix(in srgb, AccentColorText 15%, transparent) !important; /* Hardcorded for compatibility */ } + + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { + fill: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent) !important; + /* Hardcorded for compatibility */ + } + + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabs-newtab-button:hover:active { + fill: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent) !important; + /* Hardcorded for compatibility */ + } + } } /* '+'Icon */ #tabs-newtab-button .toolbarbutton-icon { diff --git a/css/leptonContent.css b/css/leptonContent.css index 0073f4c..2c9323e 100644 --- a/css/leptonContent.css +++ b/css/leptonContent.css @@ -610,20 +610,6 @@ /** Fully Dark Mode ***********************************************************/ /*= Fully Dark Mode - Dark Mode Colors =======================================*/ @supports -moz-bool-pref("userContent.page.proton_color") { - :root { - /* Compatibility for accent color - https://github.com/mozilla/gecko-dev/commit/4c5f20179e8d3b963dc588efb9dc2c7b49e7bb31 - */ - --uc-accent-color: AccentColor; - --uc-accent-text-color: AccentColorText; - } - @supports -moz-bool-pref("userChrome.compatibility.accent_color") { - :root { - --uc-accent-color: -moz-accent-color; - --uc-accent-text-color: -moz-accent-color-foreground; - } - } - @-moz-document url-prefix("about:"), url-prefix("chrome://browser/content/places/places.xhtml"), url-prefix("https://addons.mozilla.org"), @@ -836,11 +822,17 @@ @supports -moz-bool-pref("userContent.page.proton_color.system_accent") { :host, :root { - --in-content-primary-button-text-color: var(--uc-accent-text-color) !important; + --in-content-primary-button-text-color: $accentTextColor !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; } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + :host, + :root { + --in-content-primary-button-text-color: $accentTextColor !important; + } + } } } } @@ -2848,56 +2840,111 @@ menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon { -moz-context-properties: fill !important; fill: currentColor !important; - color: var(--checkbox-checked-color, var(--uc-accent-text-color)) !important; border-color: var(--checkbox-checked-border-color, transparent) !important; - background-color: var(--checkbox-checked-bgcolor, var(--uc-accent-color)) !important; background-image: url("chrome://global/skin/icons/check.svg") !important; background-position: center !important; background-repeat: no-repeat !important; /* Style the button also when printing with "Print Backgrounds" unchecked */ color-adjust: exact !important; + color: var(--checkbox-checked-color, AccentColorText) !important; + background-color: var(--checkbox-checked-bgcolor, AccentColor) !important; + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon { + color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; + background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important; + } } menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon { background-color: var( --checkbox-unchecked-hover-bgcolor, - color-mix(in srgb, var(--uc-accent-color) 4%, Field) + color-mix(in srgb, AccentColor 4%, Field) ) !important; } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon { + background-color: var( + --checkbox-unchecked-hover-bgcolor, + color-mix(in srgb, -moz-accent-color 4%, Field) + ) !important; + } + } menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon { background-color: var( --checkbox-unchecked-active-bgcolor, - color-mix(in srgb, var(--uc-accent-color) 8%, Field) + color-mix(in srgb, AccentColor 8%, Field) ) !important; } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon { + background-color: var( + --checkbox-unchecked-active-bgcolor, + color-mix(in srgb, -moz-accent-color 8%, Field) + ) !important; + } + } menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left[checked="true"] > .menu-iconic-icon { background-color: var( --checkbox-checked-hover-bgcolor, - color-mix(in srgb, currentColor 12.5%, var(--uc-accent-color)) + color-mix(in srgb, currentColor 12.5%, AccentColor) ) !important; } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + menuitem[type="checkbox"]:not([disabled="true"]):hover + > .menu-iconic-left[checked="true"] + > .menu-iconic-icon { + background-color: var( + --checkbox-checked-hover-bgcolor, + color-mix(in srgb, currentColor 12.5%, -moz-accent-color) + ) !important; + } + } menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left[checked="true"] > .menu-iconic-icon { background-color: var( --checkbox-checked-active-bgcolor, - color-mix(in srgb, currentColor 25%, var(--uc-accent-color)) + color-mix(in srgb, currentColor 25%, AccentColor) ) !important; } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + menuitem[type="checkbox"]:not([disabled="true"]):hover:active + > .menu-iconic-left[checked="true"] + > .menu-iconic-icon { + background-color: var( + --checkbox-checked-active-bgcolor, + color-mix(in srgb, currentColor 25%, -moz-accent-color) + ) !important; + } + } menuitem[type="checkbox"]:focus > .menu-iconic-left > .menu-iconic-icon { - outline: 2px solid var(--focus-outline-color, var(--uc-accent-color)) !important; + outline: 2px solid var(--focus-outline-color, AccentColor) !important; outline-offset: var(--focus-outline-offset, 2px) !important; } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + menuitem[type="checkbox"]:focus > .menu-iconic-left > .menu-iconic-icon { + outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important; + } + } @media (prefers-contrast) { menuitem[type="checkbox"]:not([disabled="true"]) > .menu-iconic-left > .menu-iconic-icon { /* color will set the border-color on the check due to how HCM works for in-content pages. */ - color: var( - --checkbox-checked-border-color, - color-mix(in srgb, var(--uc-accent-color) 4%, Field) - ) !important; + color: var(--checkbox-checked-border-color, color-mix(in srgb, AccentColor 4%, Field)) !important; + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + menuitem[type="checkbox"]:not([disabled="true"]) > .menu-iconic-left > .menu-iconic-icon { + /* color will set the border-color on the check due to how HCM works for in-content pages. */ + color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important; + } } menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] { color: var(--checkbox-checked-border-color, currentColor) !important; - fill: var(--checkbox-checked-color, var(--uc-accent-text-color)) !important; + fill: var(--checkbox-checked-color, AccentColorText) !important; + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] { + fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; + } } menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left[checked="true"] @@ -2905,8 +2952,19 @@ menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left[checked="true"] > .menu-iconic-icon { - color: var(--checkbox-checked-border-color-hover, var(--uc-accent-text-color)) !important; - fill: var(--checkbox-checked-border-color-hover, var(--uc-accent-text-color)) !important; + color: var(--checkbox-checked-border-color-hover, AccentColorText) !important; + fill: var(--checkbox-checked-border-color-hover, AccentColorText) !important; + } + @supports -moz-bool-pref("userChrome.compatibility.accent_color") { + menuitem[type="checkbox"]:not([disabled="true"]):hover:active + > .menu-iconic-left[checked="true"] + > .menu-iconic-icon, + menuitem[type="checkbox"]:not([disabled="true"]):hover + > .menu-iconic-left[checked="true"] + > .menu-iconic-icon { + color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; + fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; + } } } menuitem[type="checkbox"] > .menu-iconic-text { diff --git a/src/compatibility/_accent_color.scss b/src/compatibility/_accent_color.scss deleted file mode 100644 index c3f6062..0000000 --- a/src/compatibility/_accent_color.scss +++ /dev/null @@ -1,12 +0,0 @@ -:root { - /* Compatibility for accent color - https://github.com/mozilla/gecko-dev/commit/4c5f20179e8d3b963dc588efb9dc2c7b49e7bb31 - */ - --uc-accent-color: AccentColor; - --uc-accent-text-color: AccentColorText; - - @include Option("userChrome.compatibility.accent_color") { - --uc-accent-color: -moz-accent-color; - --uc-accent-text-color: -moz-accent-color-foreground; - } -} diff --git a/src/compatibility/_index.scss b/src/compatibility/_index.scss index e089775..bd8ee6c 100644 --- a/src/compatibility/_index.scss +++ b/src/compatibility/_index.scss @@ -1,6 +1,3 @@ -/*= Color - Compatibility ====================================================*/ -@import "accent_color"; - /*= Theme - Compatibility ====================================================*/ @include Option("userChrome.compatibility.theme") { @import "theme"; diff --git a/src/compatibility/_os.scss b/src/compatibility/_os.scss index 1d6f863..905289e 100644 --- a/src/compatibility/_os.scss +++ b/src/compatibility/_os.scss @@ -10,7 +10,9 @@ @media (-moz-windows-accent-color-in-titlebar) { #navigator-toolbox { - border-top-color: var(--uc-accent-color) !important; + @include AccentColor { + border-top-color: $accentColor !important; + } } } } diff --git a/src/contents/_proton_color.scss b/src/contents/_proton_color.scss index d605c70..ab5db3c 100644 --- a/src/contents/_proton_color.scss +++ b/src/contents/_proton_color.scss @@ -19,7 +19,9 @@ @include Option("userContent.page.proton_color.system_accent") { :host, :root { - --in-content-primary-button-text-color: var(--uc-accent-text-color) !important; + @include AccentColor { + --in-content-primary-button-text-color: $accentTextColor !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/src/decoration/_field_border.scss b/src/decoration/_field_border.scss index 0b749f1..2198c57 100644 --- a/src/decoration/_field_border.scss +++ b/src/decoration/_field_border.scss @@ -12,12 +12,16 @@ body[lwt-sidebar] xul|search-textbox.tabsFilter:hover { } .sidebar-panel:not([lwt-sidebar]) #search-box:hover, body:not([lwt-sidebar]) xul|search-textbox.tabsFilter:hover { - border-color: var(--uc-accent-color) !important; + @include AccentColor { + border-color: $accentColor !important; + } } /* Others */ #editBMPanel_namePicker:hover, #editBMPanel_tagsField:hover, .findbar-container .findbar-textbox:hover { - --input-border-color: color-mix(in srgb, var(--focus-outline-color, var(--uc-accent-color)) 50%, transparent); + @include AccentColor { + --input-border-color: color-mix(in srgb, var(--focus-outline-color, #{$accentColor}) 50%, transparent); + } } diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index 353bd45..4744153 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -2,6 +2,7 @@ @use "utils/option" as *; @use "utils/color_scheme" as *; @use "utils/theme" as *; +@use "utils/accent_color" as *; @use "utils/native_menu" as *; @use "utils/proton_elements" as Proton; @use "sass:selector"; diff --git a/src/leptonContent.scss b/src/leptonContent.scss index 6609e27..1fcf8e2 100644 --- a/src/leptonContent.scss +++ b/src/leptonContent.scss @@ -1,6 +1,7 @@ @use "utils/os" as *; @use "utils/option" as *; @use "utils/color_scheme" as *; +@use "utils/accent_color" as *; @use "utils/native_menu" as *; @use "utils/proton_elements" as Proton; @use "sass:selector"; @@ -22,7 +23,6 @@ /** Fully Dark Mode ***********************************************************/ /*= Fully Dark Mode - Dark Mode Colors =======================================*/ @include Option("userContent.page.proton_color") { - @import "compatibility/accent_color"; @import "contents/proton_color"; } @include Option("userContent.page.dark_mode") { diff --git a/src/tabbar/newtab_button/_looks_like_tab.scss b/src/tabbar/newtab_button/_looks_like_tab.scss index 150e12e..bdda2a6 100644 --- a/src/tabbar/newtab_button/_looks_like_tab.scss +++ b/src/tabbar/newtab_button/_looks_like_tab.scss @@ -32,21 +32,23 @@ fill: var(--toolbarbutton-active-background) !important; } @media (-moz-windows-accent-color-in-titlebar) { - :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover, - :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { - fill: color-mix( - in srgb, - var(--uc-accent-text-color) 10%, - transparent - ) !important; /* Hardcorded for compatibility */ - } - :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active, - :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active { - fill: color-mix( - in srgb, - var(--uc-accent-text-color) 15%, - transparent - ) !important; /* Hardcorded for compatibility */ + @include AccentColor { + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { + fill: color-mix( + in srgb, + $accentTextColor 10%, + transparent + ) !important; /* Hardcorded for compatibility */ + } + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active { + fill: color-mix( + in srgb, + $accentTextColor 15%, + transparent + ) !important; /* Hardcorded for compatibility */ + } } } diff --git a/src/theme/_fully_color.scss b/src/theme/_fully_color.scss index 7b2e6bf..b13d4ad 100644 --- a/src/theme/_fully_color.scss +++ b/src/theme/_fully_color.scss @@ -155,8 +155,10 @@ body[lwt-sidebar] xul|search-textbox.tabsFilter[focused="true"] { } .sidebar-panel:not([lwt-sidebar]) #search-box[focused="true"], body:not([lwt-sidebar]) xul|search-textbox.tabsFilter[focused="true"] { - border-color: var(--uc-accent-color) !important; /* Hard Coded */ - outline-color: var(--uc-accent-color) !important; + @include AccentColor { + border-color: $accentColor !important; /* Hard Coded */ + outline-color: $accentColor !important; + } } /*= PopupAutoComplete ========================================================*/ diff --git a/src/theme/proton_chrome/_proton_commons.scss b/src/theme/proton_chrome/_proton_commons.scss index 0f6bbfc..d5688bd 100644 --- a/src/theme/proton_chrome/_proton_commons.scss +++ b/src/theme/proton_chrome/_proton_commons.scss @@ -269,7 +269,9 @@ background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)) !important; } &:-moz-focusring { - outline: 2px solid var(--focus-outline-color, var(--uc-accent-color)) !important; + @include AccentColor { + outline: 2px solid var(--focus-outline-color, $accentColor) !important; + } outline-offset: var(--focus-outline-offset, 2px) !important; } } diff --git a/src/theme/system_default_theme/_gtk.scss b/src/theme/system_default_theme/_gtk.scss index 7d2fbb8..4a2e454 100644 --- a/src/theme/system_default_theme/_gtk.scss +++ b/src/theme/system_default_theme/_gtk.scss @@ -1,7 +1,9 @@ /*= GTK - URL View url accent color ==========================================*/ @include OS($linux) { :root:not(:-moz-lwtheme) .urlbarView-url { - --urlbar-popup-url-color: var(--uc-accent-color); + @include AccentColor { + --urlbar-popup-url-color: #{$accentColor}; + } } /* Nightly Compatibility */ diff --git a/src/theme/system_default_theme/_mac.scss b/src/theme/system_default_theme/_mac.scss index d2228ee..a63537a 100644 --- a/src/theme/system_default_theme/_mac.scss +++ b/src/theme/system_default_theme/_mac.scss @@ -12,15 +12,17 @@ --mac-sidebar-hover-bgcolor: color-mix(in srgb, ButtonFace 60%, var(--mac-sidebar-bgcolor)); --mac-hover-bgcolor: Window; --mac-disabled-bgcolor: transparent; - --mac-primary-button-color: var(--uc-accent-text-color); /* or -moz-mac-menutextselect */ - --mac-accent-color: var(--uc-accent-color); /* or LinkText */ - --mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, var(--uc-accent-color)); - --mac-accent-hover-color: color-mix( - in srgb, - rgb(0, 0, 0) 10%, - var(--uc-accent-color) - ); /* or -moz-mac-menuselect, Highlight */ - --mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, var(--uc-accent-color)); /* or ActiveBorder */ + @include AccentColor { + --mac-primary-button-color: #{$accentTextColor}; /* or -moz-mac-menutextselect */ + --mac-accent-color: #{$accentColor}; /* or LinkText */ + --mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, #{$accentColor}); + --mac-accent-hover-color: color-mix( + in srgb, + rgb(0, 0, 0) 10%, + #{$accentColor} + ); /* or -moz-mac-menuselect, Highlight */ + --mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, #{$accentColor}); /* or ActiveBorder */ + } /* Text, Icon Color */ --menu-color: var(--mac-text-color) !important; diff --git a/src/theme/system_default_theme/_urlbar_focus_color.scss b/src/theme/system_default_theme/_urlbar_focus_color.scss index f3c053b..b6ac62c 100644 --- a/src/theme/system_default_theme/_urlbar_focus_color.scss +++ b/src/theme/system_default_theme/_urlbar_focus_color.scss @@ -5,17 +5,19 @@ $_urlBarFocusDarkSelector: ":root[tabsintitlebar][lwt-default-theme-in-dark-mode @media (-moz-windows-accent-color-in-titlebar), (-moz-gtk-csd-available) { /* URL Bar */ - #{$_urlBarFocusSelector}, - #{$_urlBarFocusDarkSelector} { - --focus-outline-color: var(--uc-accent-color) !important; - } + @include AccentColor { + #{$_urlBarFocusSelector}, + #{$_urlBarFocusDarkSelector} { + --focus-outline-color: #{$accentColor} !important; + } - #{$_urlBarFocusSelector} #urlbar[open] > #urlbar-background, - #{$_urlBarFocusDarkSelector} #urlbar[open] > #urlbar-background { - border-color: color-mix( - in srgb, - var(--uc-accent-color) 50%, - transparent - ) !important; /* Like: --toolbar-field-focus-border-color */ + #{$_urlBarFocusSelector} #urlbar[open] > #urlbar-background, + #{$_urlBarFocusDarkSelector} #urlbar[open] > #urlbar-background { + border-color: color-mix( + in srgb, + $accentColor 50%, + transparent + ) !important; /* Like: --toolbar-field-focus-border-color */ + } } } diff --git a/src/theme/system_default_theme/_win10.scss b/src/theme/system_default_theme/_win10.scss index 2b00afb..0024cc7 100644 --- a/src/theme/system_default_theme/_win10.scss +++ b/src/theme/system_default_theme/_win10.scss @@ -21,11 +21,13 @@ --win-shorcut-text-color: #757575; --win-error-color: #b31616; --win-red-border-color: #ff4343; - --win-accent-forground-color: var(--uc-accent-text-color); - --win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, var(--uc-accent-color)); - --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, var(--uc-accent-color)); - --win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, var(--uc-accent-color)); - --win-accent-active-color: var(--uc-accent-color); + @include AccentColor { + --win-accent-forground-color: #{$accentTextColor}; + --win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, #{$accentColor}); + --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, #{$accentColor}); + --win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, #{$accentColor}); + --win-accent-active-color: #{$accentColor}; + } } @include Dark { #{system-default-theme()} { @@ -49,10 +51,12 @@ --win-shorcut-text-color: #adadad; --win-error-color: #ffb900; --win-red-border-color: #ff4343; - --win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, var(--uc-accent-color)); - --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, var(--uc-accent-color)); - --win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, var(--uc-accent-color)); - --win-accent-active-color: var(--uc-accent-color); + @include AccentColor { + --win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, #{$accentColor}); + --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, #{$accentColor}); + --win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, #{$accentColor}); + --win-accent-active-color: #{$accentColor}; + } } } @@ -314,14 +318,18 @@ :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme), :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) { .titlebar-color { - color: var(--uc-accent-text-color); - background-color: var(--uc-accent-color); + @include AccentColor { + color: $accentTextColor; + background-color: $accentColor; + } } .toolbar-items { --toolbarbutton-icon-fill: currentColor; - --toolbarbutton-hover-background: color-mix(in srgb, var(--uc-accent-text-color) 10%, transparent); - --toolbarbutton-active-background: color-mix(in srgb, var(var(--uc-accent-text-color)) 15%, transparent); + @include AccentColor { + --toolbarbutton-hover-background: color-mix(in srgb, #{$accentTextColor} 10%, transparent); + --toolbarbutton-active-background: color-mix(in srgb, #{$accentTextColor} 15%, transparent); + } } } } diff --git a/src/utils/_accent_color.scss b/src/utils/_accent_color.scss new file mode 100644 index 0000000..03742e5 --- /dev/null +++ b/src/utils/_accent_color.scss @@ -0,0 +1,21 @@ +@use "option" as *; + +// Compatibility for accent color +// https://github.com/mozilla/gecko-dev/commit/4c5f20179e8d3b963dc588efb9dc2c7b49e7bb31 +// +// Need to hard coded #437 +$accentColor: AccentColor; +$accentTextColor: AccentColorText; + +@mixin AccentColor() { + @content; + + @include Option("userChrome.compatibility.accent_color") { + $accentColor: -moz-accent-color !global; + $accentTextColor: -moz-accent-color-foreground !global; + + @content; + } + $accentColor: AccentColor !global; + $accentTextColor: AccentColorText !global; +} diff --git a/src/utils/_proton_elements.scss b/src/utils/_proton_elements.scss index 6ecb629..72892e3 100644 --- a/src/utils/_proton_elements.scss +++ b/src/utils/_proton_elements.scss @@ -1,3 +1,5 @@ +@use "accent_color" as *; + //== Radio Button ============================================================== @mixin RadioGlobal { /* margin-inline-start: 0 !important; */ @@ -88,63 +90,82 @@ @mixin CheckboxCheckedIcon { -moz-context-properties: fill !important; fill: currentColor !important; - color: var(--checkbox-checked-color, var(--uc-accent-text-color)) !important; border-color: var(--checkbox-checked-border-color, transparent) !important; - background-color: var(--checkbox-checked-bgcolor, var(--uc-accent-color)) !important; background-image: url("chrome://global/skin/icons/check.svg") !important; background-position: center !important; background-repeat: no-repeat !important; /* Style the button also when printing with "Print Backgrounds" unchecked */ color-adjust: exact !important; + + @include AccentColor { + color: var(--checkbox-checked-color, $accentTextColor) !important; + background-color: var(--checkbox-checked-bgcolor, $accentColor) !important; + } } @mixin CheckboxIconHover { - background-color: var( - --checkbox-unchecked-hover-bgcolor, - color-mix(in srgb, var(--uc-accent-color) 4%, Field) - ) !important; + @include AccentColor { + background-color: var( + --checkbox-unchecked-hover-bgcolor, + color-mix(in srgb, $accentColor 4%, Field) + ) !important; + } } @mixin CheckboxIconActive { - background-color: var( - --checkbox-unchecked-active-bgcolor, - color-mix(in srgb, var(--uc-accent-color) 8%, Field) - ) !important; + @include AccentColor { + background-color: var( + --checkbox-unchecked-active-bgcolor, + color-mix(in srgb, $accentColor 8%, Field) + ) !important; + } } @mixin CheckboxCheckedIconHover { - background-color: var( - --checkbox-checked-hover-bgcolor, - color-mix(in srgb, currentColor 12.5%, var(--uc-accent-color)) - ) !important; + @include AccentColor { + background-color: var( + --checkbox-checked-hover-bgcolor, + color-mix(in srgb, currentColor 12.5%, $accentColor) + ) !important; + } } @mixin CheckboxCheckedIconActive { - background-color: var( - --checkbox-checked-active-bgcolor, - color-mix(in srgb, currentColor 25%, var(--uc-accent-color)) - ) !important; + @include AccentColor { + background-color: var( + --checkbox-checked-active-bgcolor, + color-mix(in srgb, currentColor 25%, $accentColor) + ) !important; + } } @mixin CheckboxIconHoverContrast { - /* color will set the border-color on the check due to how HCM works for in-content pages. */ - color: var(--checkbox-checked-border-color, color-mix(in srgb, var(--uc-accent-color) 4%, Field)) !important; + @include AccentColor { + /* color will set the border-color on the check due to how HCM works for in-content pages. */ + color: var(--checkbox-checked-border-color, color-mix(in srgb, $accentColor 4%, Field)) !important; + } } @mixin CheckboxCheckedIconContrast { color: var(--checkbox-checked-border-color, currentColor) !important; - fill: var(--checkbox-checked-color, var(--uc-accent-text-color)) !important; + @include AccentColor { + fill: var(--checkbox-checked-color, $accentTextColor) !important; + } } @mixin CheckboxCheckedIconHoverContrast { - color: var(--checkbox-checked-border-color-hover, var(--uc-accent-text-color)) !important; - fill: var(--checkbox-checked-border-color-hover, var(--uc-accent-text-color)) !important; + @include AccentColor { + color: var(--checkbox-checked-border-color-hover, $accentTextColor) !important; + fill: var(--checkbox-checked-border-color-hover, $accentTextColor) !important; + } } @mixin CheckboxFocusRing { - outline: 2px solid var(--focus-outline-color, var(--uc-accent-color)) !important; + @include AccentColor { + outline: 2px solid var(--focus-outline-color, $accentColor) !important; + } outline-offset: var(--focus-outline-offset, 2px) !important; }