Use CSS variables for some common colors (#689)

Aside from being able to tell what color it is or what purpose it
solves just by looking at the variable name, it helps provide a
foundation for more easily changing the theme in the future.

Hopefully, we'll have a light and dark theme one day.

Author: morrisonlevi

styles/home.css

@@ -54,12 +54,12 @@
 }
 
 .hero-btn-primary {
-  background-color: #4f5b93;
+  background-color: var(--dark-blue-color);
   color: #fff !important;
 }
 
 .hero-btn-primary:hover, .hero-btn-primary:focus {
-  background-color: #793862;
+  background-color: var(--dark-magenta-color);
 }
 
 .hero-btn-secondary {
@@ -69,8 +69,8 @@
 }
 
 .hero-btn-secondary:hover, .hero-btn-secondary:focus {
-  background-color: #793862;
-  border-color: #793862;
+  background-color: var(--dark-magenta-color);
+  border-color: var(--dark-magenta-color);
   color: #fff !important;
 }
 
@@ -94,7 +94,7 @@
 }
 
 .hero-versions a {
-    color:#ccc;
+    color: var(--background-text-color);
     border:0;
 }
 

styles/php8.css

@@ -15,7 +15,7 @@
 }
 
 .php8-section_dark {
-  background-color: #4F5B93;
+  background-color: var(--dark-blue-color);
   color: #fff;
 }
 
@@ -102,7 +102,6 @@
   font-style: normal;
   line-height: 1.29;
   letter-spacing: -0.5px;
-  color: #27282c;
   overflow: visible;
 }
 
@@ -129,7 +128,7 @@
   padding: 16px 46px;
   border-radius: 30px;
   border: none;
-  background-color: #4F5B93;
+  background-color: var(--dark-blue-color);
   color: #fff !important;
   text-decoration: none !important;
   font-size: 20px;
@@ -210,7 +209,7 @@
   font-weight: normal;
   line-height: 1.6;
   vertical-align: middle;
-  color: #505c90;
+  color: var(--dark-blue-color);
   border-bottom-color: currentColor;
 }
 
@@ -256,12 +255,12 @@
   line-height: 1.33;
   letter-spacing: normal;
   text-align: center;
-  color: rgba(39, 40, 44, 0.7);
-  background-color: rgba(39, 40, 44, 0.05);
+  color: var(--background-color);
+  background-color: var(--foreground-color);
 }
 
 .php8-compare__label_new {
-  background-color: #505c90;
+  background-color: var(--dark-blue-color);
   color: #fff;
 }
 
@@ -435,4 +434,4 @@
   padding: 4px 5px;
   color: rgba(39, 40, 44, 0.7);
   line-height: 1.33;
-}
+}

styles/theme-base.css

@@ -9,6 +9,15 @@
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
  */
 
+:root {
+  --dark-grey-color: #333;
+  --dark-blue-color: #4F5B93;
+  --medium-blue-color: #7A86B8;
+  --light-blue-color: #E2E4EF;
+  --dark-magenta-color: #793862;
+  --medium-magenta-color: #AE508D;
+}
+
 .clearfix {
   *zoom: 1;
 }
@@ -60,7 +69,7 @@ a {
   border-bottom:1px solid;
 }
 a:focus {
-  outline: thin dotted #333;
+  outline: thin dotted var(--dark-grey-color);
   outline-offset: -2px;
 }
 a:hover,
@@ -865,7 +874,7 @@ table.standard th.subr {
 
 #layout .cse .gsc-result-info,
 #layout .gsc-result-info {
-    color: #333;
+    color: var(--dark-grey-color);
     font-size: 0.75rem;
     padding: 0;
     margin: 0;
@@ -1006,20 +1015,20 @@ fieldset {
 }
 
 .tt-dropdown-menu {
-    background: none repeat scroll 0 0 #E2E4EF;
+    background: none repeat scroll 0 0 var(--light-blue-color);
     border-bottom: 1px solid #C4C9DF;
     border-radius: 0 0 2px 2px;
-    box-shadow: 1px 0 1px -1px #C4C9DF inset, -1px 0 1px -1px #C4C9DF inset, 0 0 1px #4F5B93;
-    color: #333333;
+    box-shadow: 1px 0 1px -1px #C4C9DF inset, -1px 0 1px -1px #C4C9DF inset, 0 0 1px var(--dark-blue-color);
+    color: var(--dark-grey-color);
     padding-top: 3px;
     margin-top: -3px;
     min-width: 100%;
 }
 
 .tt-dropdown-menu .result-heading {
     font-size:1.1rem;
-    border-bottom: 2px solid #4F5B93;
-    color: #E2E4EF;
+    border-bottom: 2px solid var(--dark-blue-color);
+    color: var(--light-blue-color);
     text-shadow:0 -1px 0 rgba(0,0,0,.25);
     word-spacing:6px;
     margin: 0;
@@ -1078,7 +1087,7 @@ fieldset {
 }
 
 .tt-suggestion h4 {
-    color: #333;
+    color: var(--dark-grey-color);
     margin: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1099,7 +1108,7 @@ fieldset {
 
 /* Selected items. */
 .tt-suggestion.tt-is-under-cursor {
-    background-color: #4F5B93;
+    background-color: var(--dark-blue-color);
 }
 
 .tt-suggestion.tt-is-under-cursor h4 {
@@ -1619,7 +1628,7 @@ div.soft-deprecation-notice blockquote.sidebar {
   }
 
   #mainmenu-toggle-overlay {
-    background: #4F5B93 url(/images/mobile-menu.png) no-repeat center center;
+    background: var(--dark-blue-color) url(/images/mobile-menu.png) no-repeat center center;
     float: right;
     display: block;
     height: 32px;
@@ -1722,7 +1731,7 @@ div.soft-deprecation-notice blockquote.sidebar {
 
 #goto {
   display: none;
-  background-color: #333;
+  background-color: var(--dark-grey-color);
   height: 100%;
   width: 100%;
   opacity: 0.9;