Fine tuning colors

Author: alinnert

src/components/Links/Link.scss

@@ -40,7 +40,7 @@
     padding: 6px;
     margin: 4px;
     border-radius: 4px;
-    background: var(--icon-background);
+    background: var(--link-item-icon-background);
   }
 
   &__icon {

src/components/Search/SearchTargetItem.scss

@@ -9,7 +9,7 @@
   &__icon-container {
     padding: 4px;
     margin: 0 8px;
-    background-color: var(--icon-background);
+    background-color: var(--link-item-icon-background);
     border-radius: 2px;
   }
 

src/sass/themes.scss

@@ -8,10 +8,9 @@
   --primary-color-hue: 190;
   --page-background: hsl(0, 0%, 100%);
   --header-background: hsla(0, 0%, 100%, 1);
-  --header-background-transparent: hsla(0, 0%, 100%, 0.7);
+  --header-background-transparent: hsla(var(--primary-color-hue), 10%, 95%, 0.7);
   --icon-color: hsl(0, 0%, 0%);
   --icon-color-active: hsl(0, 0%, 100%);
-  --icon-background: hsl(0, 0%, 100%);
   --icon-focus-border: hsla(var(--primary-color-hue), 50%, 40%, 0.7);
   --primary-color: hsl(var(--primary-color-hue), 50%, 40%);
   --primary-color-pale: hsl(var(--primary-color-hue), 50%, 80%);
@@ -21,6 +20,7 @@
   --action-color: hsl(var(--primary-color-hue), 50%, 40%);
   --action-color-inactive: hsl(var(--primary-color-hue), 50%, 70%);
   --link-item-background-hover: hsl(0, 0%, 90%);
+  --link-item-icon-background: hsl(0, 0%, 100%);
   --link-item-color: hsl(var(--primary-color-hue), 0%, 30%);
   --link-item-color-hover: hsl(var(--primary-color-hue), 0%, 0%);
   --link-item-color-disabled: hsl(var(--primary-color-hue), 0%, 60%);
@@ -37,19 +37,18 @@
   --footer-link-color: var(--primary-color);
   --footer-link-color-hover: var(--primary-color-dark);
   --footer-link-background-hover: hsl(0, 0%, 88%);
-  --footer-background: hsl(0, 0%, 95%);
-  --footer-border: hsl(0, 0%, 70%);
+  --footer-background: hsl(var(--primary-color-hue), 10%, 95%);
+  --footer-border: hsl(var(--primary-color-hue), 10%, 70%);
 }
 
 @mixin darkTheme() {
   --primary-color-hue: 190;
-  --page-background: hsl(0, 0%, 20%);
+  --page-background: hsl(var(--primary-color-hue), 10%, 20%);
   --header-background: hsla(0, 0%, 20%, 1);
-  --header-background-transparent: hsla(0, 0%, 20%, 0.7);
+  --header-background-transparent: hsla(var(--primary-color-hue), 10%, 10%, 0.7);
   --icon-color: hsl(0, 0%, 100%);
   --icon-color-active: hsl(0, 0%, 0%);
   --icon-focus-border: hsl(var(--primary-color-hue), 50%, 60%);
-  --icon-background: hsl(0, 0%, 100%);
   --primary-color: hsl(var(--primary-color-hue), 50%, 80%);
   --primary-color-pale: hsl(var(--primary-color-hue), 50%, 30%);
   --primary-color-dark: hsl(var(--primary-color-hue), 50%, 80%);
@@ -58,6 +57,7 @@
   --action-color: hsl(var(--primary-color-hue), 50%, 60%);
   --action-color-inactive: hsl(var(--primary-color-hue), 50%, 40%);
   --link-item-background-hover: hsl(0, 0%, 35%);
+  --link-item-icon-background: hsl(var(--primary-color-hue), 10%, 95%);
   --link-item-color: hsl(var(--primary-color-hue), 0%, 90%);
   --link-item-color-hover: hsl(var(--primary-color-hue), 0%, 100%);
   --link-item-focus-border: hsl(0, 0%, 50%);
@@ -68,12 +68,12 @@
   --logo-char-1-color: hsl(var(--primary-color-hue), 60%, 55%);
   --logo-char-2-color: hsl(var(--primary-color-hue), 60%, 80%);
   --logo-shape-color: hsl(var(--primary-color-hue), 60%, 55%);
-  --footer-text-color: hsl(0, 0%, 80%);
+  --footer-text-color: hsl(0, 0%, 90%);
   --footer-link-color: var(--primary-color-dark);
   --footer-link-color-hover: hsl(var(--primary-color-hue), 50%, 80%);
   --footer-link-background-hover: hsl(0, 0%, 35%);
-  --footer-background: hsl(0, 0%, 25%);
-  --footer-border: hsl(0, 0%, 40%);
+  --footer-background: hsl(var(--primary-color-hue), 10%, 25%);
+  --footer-border: hsl(var(--primary-color-hue), 10%, 40%);
 }
 
 body {