Auto merge of #3237 - Turbo87:color-vars, r=locks

styles: Use numeric darkness naming and HSL for color values

This PR refactors our CSS color variables to use numeric darkness values in their names (e.g. `grey900` and `yellow500`), instead of "dark, darker, darkest, ...". It also switches those color values over to use HSL instead of RGB to make it easier to find good light/dark variants of the colors in the future. The actual colors did not change though, they were only converted to the other representation :)

r? `@locks`

Author: bors

app/components/header.module.css

@@ -62,7 +62,7 @@ input.search {
 
     &:focus {
         outline: none;
-        box-shadow: 0 0 0 4px var(--yellow);
+        box-shadow: 0 0 0 4px var(--yellow500);
     }
 }
 

app/components/progress-bar.module.css

@@ -4,5 +4,5 @@
     top: 0;
     height: 3px;
     box-shadow: 0 0 10px rgba(0, 13, 41, 0.6);
-    background: var(--yellow) !important;
+    background: var(--yellow500) !important;
 }

app/styles/application.module.css

@@ -1,11 +1,11 @@
 :root {
-    --violet: #2e2359;
-    --dark-grey: #2a3439;
-    --dark-green: #3b6837;
-    --yellow: #ffc833;
+    --violet800: hsl(252, 44%, 24%);
+    --grey900: hsl(200, 15%, 19%);
+    --green800: hsl(115, 31%, 31%);
+    --yellow500: hsl(44, 100%, 60%);
 
-    --header-bg-color: var(--dark-green);
-    --footer-bg-color: var(--dark-green);
+    --header-bg-color: var(--green800);
+    --footer-bg-color: var(--green800);
 
     --font-family: "Fira Sans", sans-serif;
 
@@ -20,9 +20,9 @@
 }
 
 :global(.new-design) {
-    --header-bg-color: var(--violet);
+    --header-bg-color: var(--violet800);
     --main-bg: white;
-    --footer-bg-color: var(--dark-grey);
+    --footer-bg-color: var(--grey900);
 }
 
 * {