fix: improve contrast of icons

Change the baseline colour of the icons match the deemphasised text.
Use a simpler background hover/active state.
This means the icons meet at least 3:1 contrast ratio against the background.

src/routes/_components/IconButton.html

@@ -52,27 +52,18 @@
    * regular styles
    */
 
-  :global(.icon-button:hover .icon-button-svg) {
-    fill: var(--action-button-fill-color-hover);
+  .icon-button:hover {
+    background: var(--action-button-bg-color-hover);
   }
 
-  :global(.icon-button.not-pressable:active .icon-button-svg,
-  .icon-button.same-pressed:active .icon-button-svg) {
-    fill: var(--action-button-fill-color-active);
+  .icon-button:active {
+    background: var(--action-button-bg-color-active);
   }
 
   :global(.icon-button.pressed.not-same-pressed .icon-button-svg) {
     fill: var(--action-button-fill-color-pressed);
   }
 
-  :global(.icon-button.pressed.not-same-pressed:hover .icon-button-svg) {
-    fill: var(--action-button-fill-color-pressed-hover);
-  }
-
-  :global(.icon-button.pressed.not-same-pressed:active .icon-button-svg) {
-    fill: var(--action-button-fill-color-pressed-active);
-  }
-
   /*
    * muted
    */
@@ -81,27 +72,10 @@
     fill: var(--action-button-deemphasized-fill-color);
   }
 
-  :global(.icon-button.muted-style:hover .icon-button-svg) {
-    fill: var(--action-button-deemphasized-fill-color-hover);
-  }
-
-  :global(.icon-button.muted-style.not-pressable:active .icon-button-svg,
-  .icon-button.muted-style.same-pressed:active .icon-button-svg) {
-    fill: var(--action-button-deemphasized-fill-color-active);
-  }
-
   :global(.icon-button.muted-style.pressed.not-same-pressed .icon-button-svg) {
     fill: var(--action-button-deemphasized-fill-color-pressed);
   }
 
-  :global(.icon-button.muted-style.pressed.not-same-pressed:hover .icon-button-svg) {
-    fill: var(--action-button-deemphasized-fill-color-pressed-hover);
-  }
-
-  :global(.icon-button.muted-style.pressed.not-same-pressed:active .icon-button-svg) {
-    fill: var(--action-button-deemphasized-fill-color-pressed-active);
-  }
-
 </style>
 <script>
   import { classname } from '../_utils/classname.js'

src/routes/_components/community/PageListItem.html

@@ -70,26 +70,10 @@
     height: 24px;
   }
 
-  :global(.pinnable-button:hover .pinnable-svg) {
-    fill: var(--action-button-fill-color-hover);
-  }
-
-  :global(.pinnable-button:active .pinnable-svg) {
-    fill: var(--action-button-fill-color-active);
-  }
-
   :global(.pinnable-button.checked .pinnable-svg) {
     fill: var(--action-button-fill-color-pressed);
   }
 
-  :global(.pinnable-button.checked:hover .pinnable-svg) {
-    fill: var(--action-button-fill-color-pressed-hover);
-  }
-
-  :global(.pinnable-button.checked:active .pinnable-svg) {
-    fill: var(--action-button-fill-color-pressed-active);
-  }
-
   /* TODO: end copypasta */
 
   @media (max-width: 767px) {

src/scss/themes/_base.scss

@@ -44,19 +44,13 @@
   --nav-svg-fill-hover: #{$secondary-text-color};
   --nav-text-color-hover: #{$secondary-text-color};
 
-  --action-button-fill-color: #{lighten($main-theme-color, 18%)};
-  --action-button-fill-color-hover: #{lighten($main-theme-color, 22%)};
-  --action-button-fill-color-active: #{lighten($main-theme-color, 5%)};
-  --action-button-fill-color-pressed: #{darken($main-theme-color, 7%)};
-  --action-button-fill-color-pressed-hover: #{darken($main-theme-color, 2%)};
-  --action-button-fill-color-pressed-active: #{darken($main-theme-color, 15%)};
+  --action-button-fill-color: #{lighten($deemphasized-color, 16%)};
+  --action-button-bg-color-hover: #{fade-out($main-text-color, 0.94)};
+  --action-button-bg-color-active: #{fade-out($main-text-color, 0.9)};
+  --action-button-fill-color-pressed: #{saturate($main-theme-color, 10%)};
 
   --action-button-deemphasized-fill-color: #{$deemphasized-color};
-  --action-button-deemphasized-fill-color-hover: #{lighten($deemphasized-color, 22%)};
-  --action-button-deemphasized-fill-color-active: #{lighten($deemphasized-color, 5%)};
   --action-button-deemphasized-fill-color-pressed: #{darken($deemphasized-color, 7%)};
-  --action-button-deemphasized-fill-color-pressed-hover: #{darken($deemphasized-color, 2%)};
-  --action-button-deemphasized-fill-color-pressed-active: #{darken($deemphasized-color, 15%)};
 
   --settings-list-item-bg: #{$main-bg-color};
   --settings-list-item-text: #{$main-theme-color};

src/scss/themes/_dark.scss

@@ -1,12 +1,10 @@
 :root {
   $deemphasized-color: lighten($main-bg-color, 54%);
 
+  --action-button-fill-color: #{darken($deemphasized-color, 2%)};
+  --action-button-fill-color-pressed: #{lighten($main-theme-color, 5%)};
   --action-button-deemphasized-fill-color: #{$deemphasized-color};
-  --action-button-deemphasized-fill-color-hover: #{lighten($deemphasized-color, 22%)};
-  --action-button-deemphasized-fill-color-active: #{lighten($deemphasized-color, 5%)};
   --action-button-deemphasized-fill-color-pressed: #{darken($deemphasized-color, 7%)};
-  --action-button-deemphasized-fill-color-pressed-hover: #{darken($deemphasized-color, 2%)};
-  --action-button-deemphasized-fill-color-pressed-active: #{darken($deemphasized-color, 15%)};
 
   --loading-bg: #{#222};
 

src/scss/themes/ozark.scss

@@ -1,4 +1,4 @@
-$main-theme-color: #5263af;
+$main-theme-color: saturate(#5263af, 10%);
 $body-bg-color: #0f1427;
 $main-bg-color: #212433;
 $anchor-color: lighten($main-theme-color, 20%);

src/scss/themes/pitchblack.scss

@@ -33,9 +33,6 @@ $compose-background: darken($main-theme-color, 12%);
   --form-bg: #{$body-bg-color};
   --form-border: #{darken($border-color, 10%)};
 
-  --action-button-fill-color: #{lighten($main-theme-color, 20%)};
-  --action-button-fill-color-hover: #{lighten($main-theme-color, 30%)};
-  --action-button-fill-color-active: #{darken($main-theme-color, 40%)};
   --action-button-fill-color-pressed: #{lighten($main-theme-color, 85%)};
   --action-button-fill-color-pressed-hover: #{lighten($main-theme-color, 100%)};
   --action-button-fill-color-pressed-active: #{lighten($main-theme-color, 80%)};