🌓 Adds Dark Mode (#210)

* feat(dark mode): set up first set of colors

* feat(dark mode): define state colours

* 🧹

* feat(dark mode): variablify all teh wordz

* feat(dark mode): set colors on body

* feat(dark mode): replace hard coded color value

* feat(dark mode): 🌑

* feat(a11y): update link focus styles

- restores visible focus in windows high contrast mode
- increases visibility in boxes with bg colour

* feat(dark mode): enable postcss

* 💅

* feat(dark mode): add user control

* chore: use generic headline name

* feat(dark mode): hide switch until script loads

* feat(dark mode): increase link contrast

* add content warning to footer nav partial

* feat(dark mode): replace hard coded colour value in alertbox

* feat(dark mode): tone down text colour

* feat(dark mode): properly invert code elements

* 🧹 move box styles into own partial

* feat(dark mode): use darker colour as background for links

assets/css/components/_alertbox.scss

@@ -1,5 +1,5 @@
 .alertbox {
-  border: 2px solid black;
+  border: 2px solid var(--clr-foreground);
   padding: 2.25rem;
 
   &__title {

assets/css/components/_box.scss

@@ -0,0 +1,31 @@
+.box {
+  background: var(--clr-foreground);
+  color: var(--clr-background);
+  grid-column: span 2;
+  height: auto;
+  margin: 1rem 0;
+  padding: 1rem;
+
+  @media (min-width: #{pxToRem(768)}) {
+    margin: 1rem 0.5rem;
+  }
+
+  &--divider {
+    margin: 2rem 0;
+  }
+
+  a {
+    color: var(--clr-background);
+
+    @media (prefers-color-scheme: dark) {
+      :root:not([data-user-theme='light']) &:focus {
+        background-color: var(--clr-pink);
+      }
+    }
+  }
+
+  *::selection {
+    background: var(--clr-background);
+    color: var(--clr-foreground);
+  }
+}

assets/css/components/_definitions.scss

@@ -1,32 +1,23 @@
 .word__type {
-    font-family: $con-sans;
-    font-size: 0.85rem;
-    padding-right: 1rem;
-    text-align: right;
-    text-transform: uppercase;
-  }
-
-.word__link {
-    border-bottom: darkgrey solid 0.1em;
-    color: black;
-    font-family: $ext-sans;
-    text-decoration: none;
-  }
-
-.word__breakdown {
-    border-left: 0.1rem solid lightgrey;
-    font-family: $sans-serif;
-    padding-left: 1rem;
+  font-family: $con-sans;
+  font-size: 0.85rem;
+  padding-right: 1rem;
+  text-align: right;
+  text-transform: uppercase;
 }
 
 .content-flag {
-  background-color: $lt-background-color-warning;
+  background-color: var(--clr-warning-background);
   overflow: hidden;
   padding: 0 1rem 0 3rem;
   position: relative;
 
+  & a:focus {
+    background-color: var(--clr-background);
+  }
+
   &:before {
-    content: "⚠️";
+    content: '⚠️';
     left: 1rem;
     position: absolute;
     top: 50%;
@@ -34,10 +25,10 @@
   }
 
   &--avoid {
-    background-color: $pink;
+    background-color: var(--clr-avoid-background);
 
     &:before {
-      content: "🚨";
+      content: '🚨';
     }
   }
 }

assets/css/components/_flag.scss

@@ -6,19 +6,22 @@
   margin: 0.5rem 0.75rem 0.25rem 0;
   padding: 0.45rem 0.65rem;
   text-transform: lowercase;
+
   &--red {
-    background-color:$lt-background-color;
+    background-color: var(--clr-avoid-background);
+
     &:before {
       @include icon__avoid();
       @include icon__embed();
     }
   }
+
   &--yellow {
-    background-color: $lt-background-color-warning;
-  
+    background-color: var(--clr-warning-background);
+
     &:before {
       @include icon__warning();
       @include icon__embed();
     }
   }
-}
+}

assets/css/components/_word.scss

@@ -74,7 +74,7 @@
     text-transform: uppercase;
 
     &--avoid {
-      --word-signal-color: $dark-red;
+      --word-signal-color: var(--clr-dark-red);
 
       &:before {
         @include icon__avoid();
@@ -83,7 +83,7 @@
     }
 
     &--better {
-      --word-signal-color: $dark-green;
+      --word-signal-color: var(--clr-positive-text);
 
       &:before {
         @include icon__alt();
@@ -97,8 +97,10 @@
         @include icon__hanging();
       }
     }
+
     &--warning {
-      --word-signal-color: $dark-yellow;
+      --word-signal-color: var(--clr-warning-text);
+
       &:before {
         @include icon__warning();
         @include icon__hanging();