Move color overrides to variables.less where possible

static/css/base.css

@@ -4,7 +4,6 @@ html {
 }
 
 body {
-    background: var(--body-bg);
     color:  var(--text-color);
     /* Margin bottom by footer height */
     margin-bottom: 84px;
@@ -52,37 +51,18 @@ body {
         border-bottom: 5px solid var(--border-muted);
         padding-bottom: 25px;
     }
-
-    .navbar-default .navbar-nav > .open > a,
-    .navbar-default .navbar-nav > .open > a:hover {
-        color: var(--text-color);
-    }
 }
 
 @media (max-width: 767px) {
-    .navbar-default .navbar-nav > li > a,
-    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
-        color: var(--text-color);
-    }
-
     .navbar-default .navbar-nav > li > a:hover {
-        color: var(--btn-active-color);
         border-left: 5px solid var(--border-color);
         padding-left: 10px;
     }
 
     .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
-        color: var(--btn-active-color);
         border-left: 5px solid var(--border-color);
         padding-left: 20px;
     }
-
-
-    .navbar-default .navbar-nav > .open > a,
-    .navbar-default .navbar-nav > .open > a:hover,
-    .navbar-default .navbar-nav > .open > a:focus {
-        color: var(--text-muted);
-    }
 }
 
 .navbar-default {
@@ -91,7 +71,6 @@ body {
 }
 
 .navbar-default .navbar-brand, .navbar-default .navbar-brand:hover {
-    color: var(--text-color);
     font-weight: bold;
 }
 
@@ -99,14 +78,6 @@ body {
     box-shadow: none;
 }
 
-.navbar-default .navbar-toggle {
-    border-color: var(--border-color);
-}
-
-.navbar-default .navbar-toggle .icon-bar {
-    background-color: var(--text-muted);
-}
-
 #nav-sign-up {
     padding: 21px 0 21px 15px;
 }
@@ -136,9 +107,14 @@ body {
 }
 
 #broken-channels > a {
-    color: #a94442;
+    color: hsl(1.2, 43.8%, 46.1%);
 }
 
+#broken-channels > a:hover {
+    color: hsl(1.2, 53.8%, 56.1%);
+}
+
+
 .page-checks .container-fluid, .page-details .container-fluid {
     /* Fluid below 1320px, but max width capped to 1320px ... */
     max-width: 1320px;

static/css/bootstrap-colors.css

@@ -1,23 +1,7 @@
-a {
-    color:  var(--link-color);
-}
-
-.panel {
-    background-color: var(--panel-bg);
-}
-
-.panel-default, .list-group-item {
-    border-color: var(--border-color);
-}
-
 .jumbotron {
     background-color:  var(--jumbotron-bg);
 }
 
-.table > tbody > tr > th, .table > tbody > tr > td {
-    border-top-color: var(--border-color);
-}
-
 .btn-default {
     color: var(--btn-default-color);
     background-color: var(--btn-default-bg);
@@ -35,105 +19,10 @@ a {
     border-color: var(--btn-active-border);
 }
 
-.nav > li > a:hover {
-    background-color:  var(--nav-pills-active-link-hover-bg);
-}
-
-.nav-tabs > li > a:hover {
-    color: var(--text-color);
-    border-color: transparent;
-}
-
-.nav-tabs > li.active > a,
-.nav-tabs > li.active > a:hover,
-.nav-tabs > li.active > a:focus {
-    color: var(--text-color);
-    background-color: transparent;
-    border-color: var(--border-color);
-    border-bottom-color: var(--body-bg);
-}
-
-.nav-pills > li.active > a,
-.nav-pills > li.active > a:hover,
-.nav-pills > li.active > a:focus {
-    color: var(--text-color);
-    background-color:  var(--nav-pills-active-link-hover-bg);
-}
-
-pre {
-    color: var(--text-color);
-    background-color:  var(--pre-bg);
-}
-
-.modal-content {
-    background-color: var(--modal-content-bg);
-}
-
-.modal-footer {
-    border-top-color: var(--border-color);
-}
-
-hr {
-    border-top-color: var(--border-color);
-}
-
-.close, .close:hover, .close:focus {
-    color: var(--close-color);
-}
-
-.nav-tabs {
-    border-bottom-color: var(--border-color);
-}
-
-.form-control {
-    border-color:  var(--input-border);
-    color:  var(--input-color);
-}
-
-.form-control[disabled] {
-    background-color:  var(--input-bg-disabled);
-}
-
-.navbar-default .navbar-nav > li > a {
-    color:  var(--text-muted);
-}
-
-.navbar-default .navbar-nav > .active > a,
-.navbar-default .navbar-nav > .active > a:hover,
-.navbar-default .navbar-nav > li > a:hover,
-.navbar-default .navbar-nav > li > a:focus {
-    color:  var(--text-color);
-}
-
-.navbar-default .navbar-collapse {
-    border-color: var(--border-color);
-}
-
-.navbar-default .navbar-toggle:hover,
-.navbar-default .navbar-toggle:focus {
-    background-color: var(--border-color);
-}
-
-.breadcrumb {
-    background-color:  var(--breadcrumb-bg);
-}
-
-.breadcrumb > .active {
-    color: var(--breadcrumb-active-color);
-}
-
-.modal-header {
-    border-bottom-color:  var(--border-muted);
-}
-
-code {
-    color:  var(--text-color);
-}
-
 .alert-info {
-    background-color: var(--alert-info-bg);
-    border-color: var(--alert-info-border);
-    color: var(--alert-info-color);
+    background-color: var(--state-info-bg);
+    border-color: var(--state-info-border);
+    color: var(--state-info-color);
 }
 
 .panel-info {
@@ -150,43 +39,6 @@ code {
     border-color: var(--alert-success-border);
 }
 
-.input-group-addon {
-    background-color: var(--input-group-addon-bg);
-    border-color: var(--input-border);
-    color:  var(--input-color);
-}
-
-.text-muted {
-    color: var(--text-muted);
-}
-
-
-h1 small,
-h2 small {
-    color: var(--text-muted);
-}
-
 .help-block {
     color: var(--text-muted);
 }
-
-.dropdown-menu {
-    background-color: var(--panel-bg);
-}
-
-.dropdown-menu .divider {
-    background-color: var(--border-muted);
-}
-
-.dropdown-header {
-    color: var(--text-muted);
-}
-
-.dropdown-menu li a {
-    color: var(--text-color);
-}
-
-.dropdown-menu li a:hover {
-    color: var(--text-color);
-    background-color: var(--dropdown-link-hover-bg);
-}

static/css/bootstrap.css

@@ -272,7 +272,7 @@ body {
   font-size: 14px;
   line-height: 1.42857143;
   color: #333333;
-  background-color: #fff;
+  background-color: var(--body-bg);
 }
 input,
 button,
@@ -283,12 +283,12 @@ textarea {
   line-height: inherit;
 }
 a {
-  color: #0091EA;
+  color: var(--link-color);
   text-decoration: none;
 }
 a:hover,
 a:focus {
-  color: #00629e;
+  color: var(--link-hover-color);
   text-decoration: underline;
 }
 a:focus {
@@ -313,7 +313,7 @@ img {
 .img-thumbnail {
   padding: 4px;
   line-height: 1.42857143;
-  background-color: #fff;
+  background-color: var(--body-bg);
   border: 1px solid #ddd;
   border-radius: 2px;
   -webkit-transition: all 0.2s ease-in-out;
@@ -330,7 +330,7 @@ hr {
   margin-top: 20px;
   margin-bottom: 20px;
   border: 0;
-  border-top: 1px solid #eeeeee;
+  border-top: 1px solid var(--border-color);
 }
 .sr-only {
   position: absolute;
@@ -397,7 +397,7 @@ h6 .small,
 .h6 .small {
   font-weight: normal;
   line-height: 1;
-  color: #777777;
+  color: var(--text-muted);
 }
 h1,
 .h1,
@@ -517,7 +517,7 @@ mark,
   text-transform: capitalize;
 }
 .text-muted {
-  color: #777777;
+  color: var(--text-muted);
 }
 .text-primary {
   color: #22bc66;
@@ -719,7 +719,7 @@ samp {
 code {
   padding: 2px 4px;
   font-size: 90%;
-  color: #222;
+  color: var(--text-color);
   background-color: transparent;
   border-radius: 2px;
 }
@@ -745,8 +745,8 @@ pre {
   line-height: 1.42857143;
   word-break: break-all;
   word-wrap: break-word;
-  color: #333333;
-  background-color: #f5f5f5;
+  color: var(--text-color);
+  background-color: var(--pre-bg);
   border: 1px solid #ccc;
   border-radius: 2px;
 }
@@ -1526,7 +1526,7 @@ table {
 caption {
   padding-top: 8px;
   padding-bottom: 8px;
-  color: #777777;
+  color: var(--text-muted);
   text-align: left;
 }
 th {
@@ -1546,11 +1546,11 @@ th {
   padding: 8px;
   line-height: 1.42857143;
   vertical-align: top;
-  border-top: 1px solid #ddd;
+  border-top: 1px solid var(--border-color);
 }
 .table > thead > tr > th {
   vertical-align: bottom;
-  border-bottom: 2px solid #ddd;
+  border-bottom: 2px solid var(--border-color);
 }
 .table > caption + thead > tr:first-child > th,
 .table > colgroup + thead > tr:first-child > th,
@@ -1561,10 +1561,10 @@ th {
   border-top: 0;
 }
 .table > tbody + tbody {
-  border-top: 2px solid #ddd;
+  border-top: 2px solid var(--border-color);
 }
 .table .table {
-  background-color: #fff;
+  background-color: var(--body-bg);
 }
 .table-condensed > thead > tr > th,
 .table-condensed > tbody > tr > th,
@@ -1575,7 +1575,7 @@ th {
   padding: 5px;
 }
 .table-bordered {
-  border: 1px solid #ddd;
+  border: 1px solid var(--border-color);
 }
 .table-bordered > thead > tr > th,
 .table-bordered > tbody > tr > th,
@@ -1583,7 +1583,7 @@ th {
 .table-bordered > thead > tr > td,
 .table-bordered > tbody > tr > td,
 .table-bordered > tfoot > tr > td {
-  border: 1px solid #ddd;
+  border: 1px solid var(--border-color);
 }
 .table-bordered > thead > tr > th,
 .table-bordered > thead > tr > td {
@@ -1721,7 +1721,7 @@ table th[class*="col-"] {
     margin-bottom: 15px;
     overflow-y: hidden;
     -ms-overflow-style: -ms-autohiding-scrollbar;
-    border: 1px solid #ddd;
+    border: 1px solid var(--border-color);
   }
   .table-responsive > .table {
     margin-bottom: 0;
@@ -1817,7 +1817,7 @@ output {
   padding-top: 7px;
   font-size: 14px;
   line-height: 1.42857143;
-  color: #555555;
+  color: var(--input-color);
 }
 .form-control {
   display: block;
@@ -1826,10 +1826,10 @@ output {
   padding: 6px 12px;
   font-size: 14px;
   line-height: 1.42857143;
-  color: #555555;
+  color: var(--input-color);
   background-color: transparent;
   background-image: none;
-  border: 1px solid #ccc;
+  border: 1px solid var(--input-border);
   border-radius: 2px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@@ -1841,14 +1841,14 @@ output {
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0 4px rgba(102, 175, 233, 0.2);
 }
 .form-control::-moz-placeholder {
-  color: #999;
+  color: var(--text-muted);
   opacity: 1;
 }
 .form-control:-ms-input-placeholder {
-  color: #999;
+  color: var(--text-muted);
 }
 .form-control::-webkit-input-placeholder {
-  color: #999;
+  color: var(--text-muted);
 }
 .form-control::-ms-expand {
   border: 0;
@@ -1857,7 +1857,7 @@ output {
 .form-control[disabled],
 .form-control[readonly],
 fieldset[disabled] .form-control {
-  background-color: #eeeeee;
+  background-color: var(--input-bg-disabled);
   opacity: 1;
 }
 .form-control[disabled],
@@ -2669,7 +2669,7 @@ fieldset[disabled] .btn-danger.focus {
   background-color: #fff;
 }
 .btn-link {
-  color: #0091EA;
+  color: var(--link-color);
   font-weight: normal;
   border-radius: 0;
 }
@@ -2690,7 +2690,7 @@ fieldset[disabled] .btn-link {
 }
 .btn-link:hover,
 .btn-link:focus {
-  color: #00629e;
+  color: var(--link-hover-color);
   text-decoration: underline;
   background-color: transparent;
 }
@@ -2797,7 +2797,7 @@ tbody.collapse.in {
   list-style: none;
   font-size: 14px;
   text-align: left;
-  background-color: #fff;
+  background-color: var(--dropdown-bg);
   border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 2px;
@@ -2813,7 +2813,7 @@ tbody.collapse.in {
   height: 1px;
   margin: 9px 0;
   overflow: hidden;
-  background-color: #e5e5e5;
+  background-color: var(--border-muted);
 }
 .dropdown-menu > li > a {
   display: block;
@@ -2821,14 +2821,14 @@ tbody.collapse.in {
   clear: both;
   font-weight: normal;
   line-height: 1.42857143;
-  color: #333333;
+  color: var(--text-color);
   white-space: nowrap;
 }
 .dropdown-menu > li > a:hover,
 .dropdown-menu > li > a:focus {
   text-decoration: none;
-  color: #262626;
-  background-color: #f5f5f5;
+  color: var(--text-color);
+  background-color: var(--dropdown-link-hover-bg);
 }
 .dropdown-menu > .active > a,
 .dropdown-menu > .active > a:hover,
@@ -2870,7 +2870,7 @@ tbody.collapse.in {
   padding: 3px 20px;
   font-size: 12px;
   line-height: 1.42857143;
-  color: #777777;
+  color: var(--text-muted);
   white-space: nowrap;
 }
 .dropdown-backdrop {
@@ -3166,10 +3166,10 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   font-size: 14px;
   font-weight: normal;
   line-height: 1;
-  color: #555555;
+  color: var(--input-color);
   text-align: center;
-  background-color: #eeeeee;
-  border: 1px solid #ccc;
+  background-color: var(--input-group-addon-bg);
+  border: 1px solid var(--input-border);
   border-radius: 2px;
 }
 .input-group-addon.input-sm {
@@ -3254,7 +3254,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav > li > a:hover,
 .nav > li > a:focus {
   text-decoration: none;
-  background-color: #eeeeee;
+  background-color: var(--nav-link-hover-bg);
 }
 .nav > li.disabled > a {
   color: #777777;
@@ -3269,8 +3269,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav .open > a,
 .nav .open > a:hover,
 .nav .open > a:focus {
-  background-color: #eeeeee;
-  border-color: #0091EA;
+  background-color: var(--nav-link-hover-bg);
+  border-color: var(--link-color);
 }
 .nav .nav-divider {
   height: 1px;
@@ -3301,7 +3301,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
   color: #555555;
-  background-color: #fff;
+  background-color: var(--body-bg);
   border: 1px solid #ddd;
   border-bottom-color: transparent;
   cursor: default;
@@ -3347,7 +3347,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   .nav-tabs.nav-justified > .active > a,
   .nav-tabs.nav-justified > .active > a:hover,
   .nav-tabs.nav-justified > .active > a:focus {
-    border-bottom-color: #fff;
+    border-bottom-color: var(--body-bg);
   }
 }
 .nav-pills > li {
@@ -3362,8 +3362,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav-pills > li.active > a,
 .nav-pills > li.active > a:hover,
 .nav-pills > li.active > a:focus {
-  color: #555;
-  background-color: #EEE;
+  color: var(--text-color);
+  background-color: var(--nav-link-hover-bg);
 }
 .nav-stacked > li {
   float: none;
@@ -3415,7 +3415,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   .nav-tabs-justified > .active > a,
   .nav-tabs-justified > .active > a:hover,
   .nav-tabs-justified > .active > a:focus {
-    border-bottom-color: #fff;
+    border-bottom-color: var(--body-bg);
   }
 }
 .tab-content > .tab-pane {
@@ -3757,31 +3757,31 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .navbar-default {
   background-color: transparent;
-  border-color: #eeeeee;
+  border-color: var(--border-color);
 }
 .navbar-default .navbar-brand {
-  color: #777;
+  color: var(--text-color);
 }
 .navbar-default .navbar-brand:hover,
 .navbar-default .navbar-brand:focus {
-  color: #5e5e5e;
+  color: var(--text-color);
   background-color: transparent;
 }
 .navbar-default .navbar-text {
   color: #777;
 }
 .navbar-default .navbar-nav > li > a {
-  color: #777;
+  color: var(--text-muted);
 }
 .navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus {
-  color: #333;
+  color: var(--text-color);
   background-color: transparent;
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
 .navbar-default .navbar-nav > .active > a:focus {
-  color: #555;
+  color: var(--text-color);
   background-color: transparent;
 }
 .navbar-default .navbar-nav > .disabled > a,
@@ -3791,38 +3791,38 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   background-color: transparent;
 }
 .navbar-default .navbar-toggle {
-  border-color: #ddd;
+  border-color: var(--border-color);
 }
 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
-  background-color: #ddd;
+  background-color: var(--border-color);
 }
 .navbar-default .navbar-toggle .icon-bar {
-  background-color: #888;
+  background-color: var(--text-muted);
 }
 .navbar-default .navbar-collapse,
 .navbar-default .navbar-form {
-  border-color: #eeeeee;
+  border-color: var(--border-color);
 }
 .navbar-default .navbar-nav > .open > a,
 .navbar-default .navbar-nav > .open > a:hover,
 .navbar-default .navbar-nav > .open > a:focus {
   background-color: transparent;
-  color: #555;
+  color: var(--text-color);
 }
 @media (max-width: 767px) {
   .navbar-default .navbar-nav .open .dropdown-menu > li > a {
-    color: #777;
+    color: var(--text-muted);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: #333;
+    color: var(--text-color);
     background-color: transparent;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
-    color: #555;
+    color: var(--text-color);
     background-color: transparent;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
@@ -3833,17 +3833,17 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   }
 }
 .navbar-default .navbar-link {
-  color: #777;
+  color: var(--text-muted);
 }
 .navbar-default .navbar-link:hover {
-  color: #333;
+  color: var(--text-color);
 }
 .navbar-default .btn-link {
-  color: #777;
+  color: var(--text-muted);
 }
 .navbar-default .btn-link:hover,
 .navbar-default .btn-link:focus {
-  color: #333;
+  color: var(--text-color);
 }
 .navbar-default .btn-link[disabled]:hover,
 fieldset[disabled] .navbar-default .btn-link:hover,
@@ -3957,7 +3957,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
   padding: 8px 15px;
   margin-bottom: 20px;
   list-style: none;
-  background-color: #f5f5f5;
+  background-color: var(--breadcrumb-bg);
   border-radius: 2px;
 }
 .breadcrumb > li {
@@ -3969,7 +3969,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
   color: #ccc;
 }
 .breadcrumb > .active {
-  color: #777777;
+  color: var(--breadcrumb-active-color);
 }
 .label {
   display: inline;
@@ -4072,7 +4072,7 @@ a.badge:focus {
 }
 .list-group-item.active > .badge,
 .nav-pills > .active > a > .badge {
-  color: #0091EA;
+  color: var(--link-color);
   background-color: #fff;
 }
 .list-group-item > .badge {
@@ -4212,7 +4212,7 @@ a.badge:focus {
   padding: 10px 15px;
   margin-bottom: -1px;
   background-color: transparent;
-  border: 1px solid #ddd;
+  border: 1px solid var(--border-color);
 }
 .list-group-item:first-child {
   border-top-right-radius: 2px;
@@ -4410,7 +4410,7 @@ button.list-group-item-danger.active:focus {
 }
 .panel {
   margin-bottom: 20px;
-  background-color: transparent;
+  background-color: var(--panel-bg);
   border: 1px solid transparent;
   border-radius: 2px;
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
@@ -4558,7 +4558,7 @@ button.list-group-item-danger.active:focus {
 .panel > .panel-body + .table-responsive,
 .panel > .table + .panel-body,
 .panel > .table-responsive + .panel-body {
-  border-top: 1px solid #ddd;
+  border-top: 1px solid var(--border-color);
 }
 .panel > .table > tbody:first-child > tr:first-child th,
 .panel > .table > tbody:first-child > tr:first-child td {
@@ -4644,22 +4644,22 @@ button.list-group-item-danger.active:focus {
   border-bottom: 1px solid #ddd;
 }
 .panel-default {
-  border-color: #ddd;
+  border-color: var(--border-color);
 }
 .panel-default > .panel-heading {
   color: #333333;
   background-color: #f5f5f5;
-  border-color: #ddd;
+  border-color: var(--border-color);
 }
 .panel-default > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #ddd;
+  border-top-color: var(--border-color);
 }
 .panel-default > .panel-heading .badge {
   color: #f5f5f5;
   background-color: #333333;
 }
 .panel-default > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #ddd;
+  border-bottom-color: var(--border-color);
 }
 .panel-primary {
   border-color: #22bc66;
@@ -4756,14 +4756,14 @@ button.list-group-item-danger.active:focus {
   font-size: 21px;
   font-weight: bold;
   line-height: 1;
-  color: #000;
+  color: var(--close-color);
   text-shadow: 0 1px 0 #fff;
   opacity: 0.2;
   filter: alpha(opacity=20);
 }
 .close:hover,
 .close:focus {
-  color: #000;
+  color: var(--close-color);
   text-decoration: none;
   cursor: pointer;
   opacity: 0.5;
@@ -4818,7 +4818,7 @@ button.close {
 }
 .modal-content {
   position: relative;
-  background-color: #fff;
+  background-color: var(--modal-content-bg);
   border: 1px solid #999;
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 3px;
@@ -4846,7 +4846,7 @@ button.close {
 }
 .modal-header {
   padding: 15px;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid var(--border-muted);
 }
 .modal-header .close {
   margin-top: -2px;
@@ -4862,7 +4862,7 @@ button.close {
 .modal-footer {
   padding: 15px;
   text-align: right;
-  border-top: 1px solid #e5e5e5;
+  border-top: 1px solid var(--border-muted);
 }
 .modal-footer .btn + .btn {
   margin-left: 5px;

static/css/details.css

@@ -27,7 +27,6 @@
     display: block;
     padding: 8px;
     margin-bottom: 8px;
-    color:  var(--text-color);
     background: var(--pre-bg);
 }
 

static/css/docs.css

@@ -29,9 +29,6 @@ h2.rule {
 }
 
 .page-docs code {
-    padding: 2px 4px;
-    font-size: 90%;
-    color: var(--text-color);
     background: var(--pre-bg);
     border-radius: 4px;
 }

static/css/selectize.hc.css

@@ -122,7 +122,7 @@
   content: ' ';
   display: block;
   position: absolute;
-  background: rgba(204, 204, 204, 0.008);
+  background: var(--input-border);
   height: 1px;
   bottom: 0;
   left: 0;
@@ -132,7 +132,7 @@
   position: absolute;
   z-index: 10;
   border: 1px solid #d0d0d0;
-  background: #fff;
+  background: var(--dropdown-bg);
   margin: -1px 0 0 0;
   border-top: 0 none;
   -webkit-box-sizing: border-box;
@@ -171,16 +171,16 @@
   border-top: 0 none;
 }
 .selectize-dropdown .optgroup-header {
-  color: #777777;
-  background: #fff;
+  color: var(--text-muted);
+  background: var(--dropdown-bg);
   cursor: default;
 }
 .selectize-dropdown .active {
-  background-color: #f5f5f5;
-  color: #262626;
+  background-color: var(--dropdown-link-hover-bg);
+  color: var(--text-color);
 }
 .selectize-dropdown .active.create {
-  color: #262626;
+  color: var(--text-color);
 }
 .selectize-dropdown .create {
   color: rgba(51, 51, 51, 0.5);
@@ -234,7 +234,7 @@
   padding: 0;
   margin: 2px 0 0 0;
   z-index: 1000;
-  background: #fff;
+  background: var(--dropdown-bg);
   border: 1px solid #ccc;
   border: 1px solid rgba(0, 0, 0, 0.15);
   -webkit-border-radius: 2px;

static/css/variables.css

@@ -1,8 +1,5 @@
 :root {
     color-scheme: light;
-    --alert-info-bg: #d9edf7;
-    --alert-info-border: #bce8f1;
-    --alert-info-color: #31708f;
     --alert-no-data-bg: #f5f5f5;
     --alert-no-data-border: #ddd;
     --alert-no-data-color: #444;
@@ -26,6 +23,7 @@
     --channel-off-color: #ddd;
     --close-color: #000;
     --debug-warning-bg:  #eee;
+    --dropdown-bg: #fff;
     --dropdown-link-hover-bg: #f5f5f5;
     --get-started-bg: #f2f5f2;
     --input-bg-disabled: #eeeeee;
@@ -37,9 +35,10 @@
     --label-ign-color: #333;
     --label-start-color: #117a3f;
     --link-color: #0091EA;
+    --link-hover-color: #00629e;
     --log-missing-bg: #fff3f2;
     --modal-content-bg: #fff;
-    --nav-pills-active-link-hover-bg: #eee;
+    --nav-link-hover-bg: #eee;
     --panel-bg: #fff;
     --panel-success-bg: #dff0d8;
     --plan-business-border:  #90CAF9;
@@ -52,6 +51,9 @@
     --plan-supporter-color: #1d190f;
     --pre-bg: #f5f5f5;
     --small-text-color: #111;
+    --state-info-bg: #d9edf7;
+    --state-info-border: #bce8f1;
+    --state-info-color: #31708f;
     --status-new-color: #ccc;
     --table-bg-hover: #f5f5f5;
     --tag-bg: #eee;
@@ -70,9 +72,6 @@
 
 body.dark {
     color-scheme: dark;
-    --alert-info-bg: #123051;
-    --alert-info-border: #163c64;
-    --alert-info-color: #e0e2f5;
     --alert-no-data-bg: #29292c;
     --alert-no-data-border: #303033;
     --alert-no-data-color: #878790;
@@ -96,20 +95,22 @@ body.dark {
     --channel-off-color: hsl(240, 2%, 40%);
     --close-color: #fff;
     --debug-warning-bg: #60002d;
+    --dropdown-bg: hsl(240, 6%, 16%);
     --dropdown-link-hover-bg: #6f6f7f;
     --get-started-bg: #2c2e2c;
     --input-bg-disabled: #29292c;
     --input-border:  #464649;
-    --input-color:  #b0b0b2;
+    --input-color:  hsl(240, 3.3%, 88.2%);
     --input-group-addon-bg: #29292c;
     --jumbotron-bg: #1f1f22;
     --label-ign-bg: #383840;
     --label-ign-color: #e0e0e2;
     --label-start-color: #e0e0e2;
     --link-color: hsl(202.8, 100%, 55%);
+    --link-hover-color: hsl(202.8, 100%, 65%);
     --log-missing-bg: #2d1e21;
     --modal-content-bg: #1f1f22;
-    --nav-pills-active-link-hover-bg: #383840;
+    --nav-link-hover-bg: #383840;
     --panel-bg: hsl(240, 6%, 16%);
     --panel-success-bg: #165b35;
     --plan-business-border:  #90CAF9;
@@ -122,6 +123,9 @@ body.dark {
     --plan-supporter-color: #fff0c4;
     --pre-bg: #29292c;
     --small-text-color: #f0f0f2;
+    --state-info-bg: #123051;
+    --state-info-border: #163c64;
+    --state-info-color: #e0e2f5;
     --status-new-color: hsl(240, 2%, 40%);
     --table-bg-hover: #25252a;
     --tag-bg: #303033;

stuff/bootstrap/variables.less

@@ -26,14 +26,14 @@
 //## Settings for some of the most global styles.
 
 //** Background color for `<body>`.
-@body-bg:               #fff;
+@body-bg:               var(--body-bg);
 //** Global text color on `<body>`.
 @text-color:            @gray-dark;
 
 //** Global textual link color.
-@link-color:            #0091EA;
+@link-color:            var(--link-color);
 //** Link hover color set via `darken()` function.
-@link-hover-color:      darken(@link-color, 15%);
+@link-hover-color:      var(--link-hover-color);
 //** Link hover decoration.
 @link-hover-decoration: underline;
 
@@ -136,7 +136,7 @@
 @table-bg-active:               @table-bg-hover;
 
 //** Border color for table and cell borders.
-@table-border-color:            #ddd;
+@table-border-color:            var(--border-color);
 
 
 //== Buttons
@@ -184,12 +184,12 @@
 //** `<input>` background color
 @input-bg:                       transparent;
 //** `<input disabled>` background color
-@input-bg-disabled:              @gray-lighter;
+@input-bg-disabled:              var(--input-bg-disabled);
 
 //** Text color for `<input>`s
-@input-color:                    @gray;
+@input-color:                    var(--input-color);
 //** `<input>` border color
-@input-border:                   #ccc;
+@input-border:                   var(--input-border);
 
 // TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
 //** Default `.form-control` border radius
@@ -204,7 +204,7 @@
 @input-border-focus:             #66afe9;
 
 //** Placeholder text color
-@input-color-placeholder:        #999;
+@input-color-placeholder:        var(--text-muted);
 
 //** Default `.form-control` height
 @input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
@@ -220,7 +220,7 @@
 @legend-border-color:            #e5e5e5;
 
 //** Background color for textual input addons
-@input-group-addon-bg:           @gray-lighter;
+@input-group-addon-bg:           var(--input-group-addon-bg);
 //** Border color for textual input addons
 @input-group-addon-border-color: @input-border;
 
@@ -233,20 +233,20 @@
 //## Dropdown menu container and contents.
 
 //** Background for the dropdown menu.
-@dropdown-bg:                    #fff;
+@dropdown-bg:                    var(--dropdown-bg);
 //** Dropdown menu `border-color`.
 @dropdown-border:                rgba(0,0,0,.15);
 //** Dropdown menu `border-color` **for IE8**.
 @dropdown-fallback-border:       #ccc;
 //** Divider color for between dropdown items.
-@dropdown-divider-bg:            #e5e5e5;
+@dropdown-divider-bg:            var(--border-muted);
 
 //** Dropdown link text color.
-@dropdown-link-color:            @gray-dark;
+@dropdown-link-color:            var(--text-color);
 //** Hover color for dropdown links.
-@dropdown-link-hover-color:      darken(@gray-dark, 5%);
+@dropdown-link-hover-color:      var(--text-color);
 //** Hover background for dropdown links.
-@dropdown-link-hover-bg:         #f5f5f5;
+@dropdown-link-hover-bg:         var(--dropdown-link-hover-bg);
 
 //** Active dropdown menu item text color.
 @dropdown-link-active-color:     @component-active-color;
@@ -257,7 +257,7 @@
 @dropdown-link-disabled-color:   @gray-light;
 
 //** Text color for headers within dropdown menus.
-@dropdown-header-color:          @gray-light;
+@dropdown-header-color:          var(--text-muted);
 
 //** Deprecated `@dropdown-caret-color` as of v3.1.0
 @dropdown-caret-color:           #000;
@@ -367,26 +367,26 @@
 
 @navbar-default-color:             #777;
 @navbar-default-bg:                transparent;
-@navbar-default-border:            #eeeeee;
+@navbar-default-border:            var(--border-color);
 
 // Navbar links
-@navbar-default-link-color:                #777;
-@navbar-default-link-hover-color:          #333;
+@navbar-default-link-color:                var(--text-muted);
+@navbar-default-link-hover-color:          var(--text-color);
 @navbar-default-link-hover-bg:             transparent;
-@navbar-default-link-active-color:         #555;
+@navbar-default-link-active-color:         var(--text-color);
 @navbar-default-link-active-bg:            transparent;
 @navbar-default-link-disabled-color:       #ccc;
 @navbar-default-link-disabled-bg:          transparent;
 
 // Navbar brand label
-@navbar-default-brand-color:               @navbar-default-link-color;
-@navbar-default-brand-hover-color:         darken(@navbar-default-brand-color, 10%);
+@navbar-default-brand-color:               var(--text-color);
+@navbar-default-brand-hover-color:         var(--text-color);
 @navbar-default-brand-hover-bg:            transparent;
 
 // Navbar toggle
-@navbar-default-toggle-hover-bg:           #ddd;
-@navbar-default-toggle-icon-bar-bg:        #888;
-@navbar-default-toggle-border-color:       #ddd;
+@navbar-default-toggle-hover-bg:           var(--border-color);
+@navbar-default-toggle-icon-bar-bg:        var(--text-muted);
+@navbar-default-toggle-border-color:       var(--border-color);
 
 
 //=== Inverted navbar
@@ -421,7 +421,7 @@
 
 //=== Shared nav styles
 @nav-link-padding:                          10px 15px;
-@nav-link-hover-bg:                         @gray-lighter;
+@nav-link-hover-bg:                         var(--nav-link-hover-bg);
 
 @nav-disabled-link-color:                   @gray-light;
 @nav-disabled-link-hover-color:             @gray-light;
@@ -440,8 +440,8 @@
 
 //== Pills
 @nav-pills-border-radius:                   @border-radius-base;
-@nav-pills-active-link-hover-bg:            #EEE;
-@nav-pills-active-link-hover-color:         #555;
+@nav-pills-active-link-hover-bg:            var(--nav-link-hover-bg);
+@nav-pills-active-link-hover-color:         var(--text-color);
 
 
 //== Pagination
@@ -597,7 +597,7 @@
 @modal-title-line-height:     @line-height-base;
 
 //** Background color of modal content area
-@modal-content-bg:                             #fff;
+@modal-content-bg:                             var(--modal-content-bg);
 //** Modal content border color
 @modal-content-border-color:                   rgba(0,0,0,.2);
 //** Modal content border color **for IE8**
@@ -608,9 +608,9 @@
 //** Modal backdrop opacity
 @modal-backdrop-opacity:      .5;
 //** Modal header border color
-@modal-header-border-color:   #e5e5e5;
+@modal-header-border-color:   var(--border-muted);
 //** Modal footer border color
-@modal-footer-border-color:   @modal-header-border-color;
+@modal-footer-border-color:   var(--border-muted);
 
 @modal-lg:                    900px;
 @modal-md:                    600px;
@@ -672,7 +672,7 @@
 //** Background color on `.list-group-item`
 @list-group-bg:                 transparent;
 //** `.list-group-item` border color
-@list-group-border:             #ddd;
+@list-group-border:             var(--border-color);
 //** List group border radius
 @list-group-border-radius:      @border-radius-base;
 
@@ -703,7 +703,7 @@
 //
 //##
 
-@panel-bg:                    transparent;
+@panel-bg:                    var(--panel-bg);
 @panel-body-padding:          15px;
 @panel-heading-padding:       10px 15px;
 @panel-footer-padding:        @panel-heading-padding;
@@ -714,7 +714,7 @@
 @panel-footer-bg:             #f5f5f5;
 
 @panel-default-text:          @gray-dark;
-@panel-default-border:        #ddd;
+@panel-default-border:        var(--border-color);
 @panel-default-heading-bg:    #f5f5f5;
 
 @panel-primary-text:          #fff;
@@ -791,11 +791,11 @@
 @breadcrumb-padding-vertical:   8px;
 @breadcrumb-padding-horizontal: 15px;
 //** Breadcrumb background color
-@breadcrumb-bg:                 #f5f5f5;
+@breadcrumb-bg:                 var(--breadcrumb-bg);
 //** Breadcrumb text color
 @breadcrumb-color:              #ccc;
 //** Text color of current page in the breadcrumb
-@breadcrumb-active-color:       @gray-light;
+@breadcrumb-active-color:       var(--breadcrumb-active-color);
 //** Textual separator for between breadcrumb elements
 @breadcrumb-separator:          "/";
 
@@ -822,7 +822,7 @@
 //##
 
 @close-font-weight:           bold;
-@close-color:                 #000;
+@close-color:                 var(--close-color);
 @close-text-shadow:           0 1px 0 #fff;
 
 
@@ -830,14 +830,14 @@
 //
 //##
 
-@code-color:                  #222;
+@code-color:                  var(--text-color);
 @code-bg:                     transparent;
 
 @kbd-color:                   #fff;
 @kbd-bg:                      #333;
 
-@pre-bg:                      #f5f5f5;
-@pre-color:                   @gray-dark;
+@pre-bg:                      var(--pre-bg);
+@pre-color:                   var(--text-color);
 @pre-border-color:            #ccc;
 @pre-scrollable-max-height:   340px;
 
@@ -849,11 +849,11 @@
 //** Horizontal offset for forms and lists.
 @component-offset-horizontal: 180px;
 //** Text muted color
-@text-muted:                  @gray-light;
+@text-muted:                  var(--text-muted);
 //** Abbreviations and acronyms border color
 @abbr-border-color:           @gray-light;
 //** Headings small color
-@headings-small-color:        @gray-light;
+@headings-small-color:        var(--text-muted);
 //** Blockquote small color
 @blockquote-small-color:      @gray-light;
 //** Blockquote font size
@@ -867,4 +867,4 @@
 //** Point at which .dl-horizontal becomes horizontal
 @dl-horizontal-breakpoint:    @grid-float-breakpoint;
 //** Horizontal line color.
-@hr-border:                   @gray-lighter;
+@hr-border:                   var(--border-color);

stuff/selectize/selectize.hc.less

@@ -38,7 +38,7 @@
 @selectize-color-optgroup-text: @dropdown-header-color;
 @selectize-color-optgroup-border: @dropdown-divider-bg;
 @selectize-color-dropdown: @dropdown-bg;
-@selectize-color-dropdown-border-top: mix(@input-border, @input-bg, 0.8);
+@selectize-color-dropdown-border-top: @input-border;
 @selectize-color-dropdown-item-active: @dropdown-link-hover-bg;
 @selectize-color-dropdown-item-active-text: @dropdown-link-hover-color;
 @selectize-color-dropdown-item-create-active-text: @dropdown-link-hover-color;