Fix: Proton Color - Page accent color at windows #469

black7375 · Sep 18, 2022 · 76d479f · 76d479f
1 parent 9fd8594
commit 76d479f
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 11 deletions.
diff --git a/__tests__/accent_color.test.scss b/__tests__/accent_color.test.scss
@@ -59,4 +59,28 @@
  }
  }
  }
+ @include test("Highlight") {
+ @include assert {
+ @include output {
+ @include AccentColor("Highlight") {
+ 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: Highlight;
+ color: HighlightText;
+ }
+ }
+ }
+ }
+ }
 }
diff --git a/css/leptonContent.css b/css/leptonContent.css
@@ -827,14 +827,17 @@
  :host,
  :root {
  --in-content-primary-button-text-color: AccentColorText !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;
+ --in-content-primary-button-background: AccentColor !important;
+ --in-content-primary-button-background-hover: color-mix(in srgb, black 10%, AccentColor) !important;
+ --in-content-primary-button-background-active: color-mix(in srgb, black 20%, AccentColor) !important;
  }
  @supports -moz-bool-pref("userChrome.compatibility.accent_color") {
  :host,
  :root {
- --in-content-primary-button-text-color: -moz-accent-color-foreground !important;
+ --in-content-primary-button-text-color: HighlightText !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/contents/_proton_color.scss b/src/contents/_proton_color.scss
@@ -19,12 +19,13 @@
 
  @include Option("userContent.page.proton_color.system_accent") {
  :host, :root {
- @include AccentColor {
+ @include AccentColor("Highlight") {
  --in-content-primary-button-text-color: #{$accentTextColor} !important;
+
+ --in-content-primary-button-background: #{$accentColor} !important;
+ --in-content-primary-button-background-hover: color-mix(in srgb, black 10%, #{$accentColor}) !important;
+ --in-content-primary-button-background-active: color-mix(in srgb, black 20%, #{$accentColor}) !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/utils/_accent_color.scss b/src/utils/_accent_color.scss
@@ -7,12 +7,18 @@
 $accentColor: AccentColor;
 $accentTextColor: AccentColorText;
 
-@mixin AccentColor() {
+@mixin AccentColor($mode: "-moz-accent-color") {
  @content;
 
  @include Option("userChrome.compatibility.accent_color") {
- $accentColor: -moz-accent-color !global;
- $accentTextColor: -moz-accent-color-foreground !global;
+ @if $mode == "Highlight" {
+ $accentColor: Highlight !global;
+ $accentTextColor: HighlightText !global;
+ }
+ @else {
+ $accentColor: -moz-accent-color !global;
+ $accentTextColor: -moz-accent-color-foreground !global;
+ }
 
  @content;
  }