From 25be2977a9f19578fd0741317149453d3ccf24be Mon Sep 17 00:00:00 2001
From: Michal Migurski <mike@teczno.com>
Date: Fri, 1 Jan 2021 10:51:43 -0800
Subject: [PATCH 1/6] Moved all CSS color literals into parameters.scss
 variable definitions

---
 app/assets/stylesheets/common.scss     | 90 +++++++++++++-------------
 app/assets/stylesheets/parameters.scss | 48 ++++++++++++++
 app/assets/stylesheets/small.scss      |  6 +-
 3 files changed, 96 insertions(+), 48 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index d8369e3ce3..453300ecd4 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -12,8 +12,8 @@ body {
   font-family: 'Helvetica Neue',Arial,sans-serif;
   font-size: $typeheight;
   line-height: 1.6666;
-  color: #222;
-  background-color: #fff;
+  color: $common-body-color;
+  background-color: $common-body-background-color;
   margin: 0px;
   padding: 0px;
   text-align: left;
@@ -75,7 +75,7 @@ small, aside {
 /* Rules for links */
 
 a {
-  color: #24d;
+  color: $common-a-color;
   text-decoration: none;
   outline: 0;
   &:hover {
@@ -148,11 +148,11 @@ header {
     padding-top: 15px;
 
     a {
-      color: #000;
+      color: $common-header-h1-a-color;
     }
 
     a:hover {
-      color: #000;
+      color: $common-header-h1-a-color;
     }
   }
 
@@ -284,7 +284,7 @@ body.compact-nav {
   background: lighten($green, 30%);
   margin: 0 2px;
   font-size: 11px;
-  color: #333;
+  color: $common-count-number;
 }
 
 /* Rules for the message shown in place of the map when javascript is disabled */
@@ -301,8 +301,8 @@ body.compact-nav {
   display: block;
   height: 40px;
   width: 40px;
-  background-color: #333;
-  background-color: rgba(0,0,0,.6);
+  background-color: $common-leaflet-control-control-button-background-color;
+  background-color: $common-leaflet-control-control-button-background-shade;
   border-radius: 4px 0 0 4px;
   margin-bottom: 10px;
   outline: none;
@@ -313,8 +313,8 @@ body.compact-nav {
 
   &.disabled,
   &.leaflet-disabled {
-    background-color: #333;
-    background-color: rgba(0,0,0,.5);
+    background-color: $common-leaflet-control-control-button-disabled-background-color;
+    background-color: $common-leaflet-control-control-button-disabled-background-shade;
     cursor: default;
   }
 
@@ -365,7 +365,7 @@ body.compact-nav {
   #sidebar {
     float: left;
     width: $sidebarWidth;
-    background: #fff;
+    background: $common-map-layout-sidebar-background-color;
 
     #sidebar_loader {
       display: none;
@@ -465,7 +465,7 @@ body.compact-nav {
       padding: .6em;
 
       &.learn-more {
-        border-right: 1px solid #fff;
+        border-right: 1px solid $common-map-layout-welcome-button-learn-more-border-color;
       }
     }
   }
@@ -515,7 +515,7 @@ body.compact-nav {
       padding:5px;
       font-size:20px;
       line-height:10px;
-      color:#222;
+      color: $common-map-layout-map-ui-a-close-button-color;
       border:1px solid $grey;
     }
 
@@ -547,7 +547,7 @@ body.compact-nav {
     li  {
       overflow: hidden;
       border-radius: 3px;
-      border: 2px solid #fff;
+      border: 2px solid $common-layers-ui-base-layers-li-border-color;
       margin-bottom: 8px;
       position: relative;
       transition: border-color 0.08s ease-in;
@@ -561,8 +561,8 @@ body.compact-nav {
         cursor: pointer;
         font-weight: 600;
         font-size: 16px;
-        text-stroke: 2px #fff;
-        background: rgba(255,255,255,.9);
+        text-stroke: 2px $common-layers-ui-base-layers-li-label-text-stroke;
+        background: $common-layers-ui-base-layers-li-label-background-color;
         z-index: 1000;
         input[type="radio"] {
           display: none;
@@ -591,15 +591,15 @@ body.compact-nav {
     margin-bottom: 10px;
 
     a {
-      color: #fff;
+      color: $common-share-ui-share-tabs-a-color;
       text-decoration: none;
       background-color: $lightblue;
       padding: 5px 10px;
-      border-right: 1px solid #fff;
+      border-right: 1px solid $common-share-ui-share-tabs-a-border-color;
     }
 
     a:first-child {
-      border-right: 1px solid #fff;
+      border-right: 1px solid $common-share-ui-share-tabs-a-border-color;
       border-radius: 4px 0 0 4px;
     }
 
@@ -757,7 +757,7 @@ header .search_forms,
 }
 
 .search_results_error {
-  color: #f00;
+  color: $common-search-results-error-color;
   padding: 10px 20px;
 }
 
@@ -879,7 +879,7 @@ tr.turn:hover {
     p {
       padding: 7px 10px;
       font-size: 12px;
-      background-color: #FFF;
+      background-color: $common-sidebar-content-browse-field-p-background-color;
       border: 1px solid $grey;
       border-top: 0;
       border-radius: 0 0 4px 4px;
@@ -918,7 +918,7 @@ tr.turn:hover {
 
     .browse-tag-v {
       border-left: 1px solid $grey;
-      background-color: #fff;
+      background-color: $common-sidebar-content-browse-tag-list-browse-tag-v-background-color;
     }
 
     .colour-preview-box {
@@ -926,7 +926,7 @@ tr.turn:hover {
       width: 14px;
       height: 14px;
       margin: 4px 0px;
-      border: 1px solid rgba(0, 0, 0, .1);
+      border: 1px solid $common-sidebar-content-browse-tag-list-colour-preview-box-border-color;
       // add color via inline css on element: background-color: <tag value>;
     }
   }
@@ -1251,7 +1251,7 @@ tr.turn:hover {
   }
 
   &.deleted {
-    background-color: #fee;
+    background-color: $common-diary-post-deleted-background-color;
   }
 
   .post_heading {
@@ -1304,7 +1304,7 @@ tr.turn:hover {
       border-top: 1px solid $grey;
     }
     &.deleted {
-      background-color: #fee;
+      background-color: $common-diary-entries-diary-comment-deleted-background-color;
     }
     p {
       margin-bottom: $lineheight/2;
@@ -1419,7 +1419,7 @@ tr.turn:hover {
   }
 
   .inbox-row-unread {
-    background: #CBEEA7;
+    background: $common-messages-inbox-row-unread-background-color;
   }
 
   .right {
@@ -1465,15 +1465,15 @@ tr.turn:hover {
   padding: $lineheight;
 
   &.error {
-    background-color: #ff7070;
+    background-color: $common-flash-error-background-color;
   }
 
   &.warning {
-    background-color: #ffe0cc;
+    background-color: $common-flash-warning-background-color;
   }
 
   &.notice {
-    background-color: #CBEEA7;
+    background-color: $common-flash-notice-background-color;
   }
 
   div.message {
@@ -1504,31 +1504,31 @@ tr.turn:hover {
   margin-top: 5px;
   border-radius: 4px;
   font-size: 12px;
-  color: #fff;
-  background-color: #ff7070;
+  color: $common-form-error-color;
+  background-color: $common-form-error-background-color;
 }
 
 /* Rules for rails validation error boxes */
 
 #errorExplanation {
   width: 400px;
-  border: 2px solid #ff7070;
+  border: 2px solid $common-error-explanation-border-color;
   padding: 0 $lineheight/2;
   margin-bottom: $lineheight;
-  background-color: #f0f0f0;
+  background-color: $common-error-explanation-background-color;
 
   h2 {
     margin: 0 -10px 10px -10px;
     padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
     font-weight: bold;
     font-size: 12px;
-    background-color: #c00;
-    color: #fff;
+    background-color: $common-error-explanation-h2-background-color;
+    color: $common-error-explanation-h2-color;
     text-align: left;
   }
 
   p {
-    color: #333;
+    color: $common-error-explanation-p-color;
     margin-bottom: 0px;
     padding: $lineheight/4;
   }
@@ -1601,8 +1601,8 @@ tr.turn:hover {
   input[type="url"],
   input[type="password"],
   textarea {
-    color: #222;
-    background-color: #fff;
+    color: $common-standard-form-textarea-color;
+    background-color: $common-standard-form-textarea-background-color;
     border: 1px solid $grey;
     border-radius: 3px;
     padding: 2px 5px;
@@ -1610,7 +1610,7 @@ tr.turn:hover {
     width: 200px;
 
     &.field_with_errors {
-      border: 2px solid #ff7070;
+      border: 2px solid $common-standard-form-textarea-field-with-errors-border-color;
     }
   }
 
@@ -1706,7 +1706,7 @@ tr.turn:hover {
     }
 
     input.error {
-      background-color: rgba($red, 0.4);
+      background-color: $common-standard-form-search-directions-form-input-error-background-color;
     }
 
     select {
@@ -2145,7 +2145,7 @@ div.secondary-actions {
   }
 
   .icon.note {
-    background-color: #333;
+    background-color: $common-site-welcome-fixthemap-icon-note-background-color;
     border-radius: 4px;
   }
 }
@@ -2160,7 +2160,7 @@ div.secondary-actions {
 
   .content-inner {
     position: relative;
-    color: #333;
+    color: $common-site-about-content-inner-color;
     min-width: 320px;
     max-width: 640px;
   }
@@ -2173,8 +2173,8 @@ div.secondary-actions {
   .attr {
     position: relative;
     padding: 170px 40px 20px;
-    background: #333;
-    background: rgba(0, 0, 0, .8);
+    background: $common-site-about-content-attr-background-color;
+    background: $common-site-about-content-attr-background-shade;
     margin-bottom: 0;
     margin-top: -20px;
 
@@ -2217,7 +2217,7 @@ div.secondary-actions {
       padding: 20px 20px 20px 40px;
       font: 500 20px/24px Helvetica, Arial, sans-serif;
       white-space: nowrap;
-      color: #fff;
+      color: $common-site-about-attr-byosm-color;
       background: $vibrant-green;
     }
 
diff --git a/app/assets/stylesheets/parameters.scss b/app/assets/stylesheets/parameters.scss
index 5d02604103..7d7ac5e8ff 100644
--- a/app/assets/stylesheets/parameters.scss
+++ b/app/assets/stylesheets/parameters.scss
@@ -17,3 +17,51 @@ $keyline: 1px solid $lightgrey;
 $border-radius: 3px;
 $list-highlight: #FFFFC0;
 $border: 1px solid $grey;
+
+$common-body-color: #222;
+$common-body-background-color: #fff;
+$common-a-color: #24d;
+$common-header-h1-a-color: #000;
+$common-count-number: #333;
+$common-leaflet-control-control-button-background-color: #333;
+$common-leaflet-control-control-button-background-shade: rgba(0,0,0,.6);
+$common-leaflet-control-control-button-disabled-background-color: #333;
+$common-leaflet-control-control-button-disabled-background-shade: rgba(0,0,0,.5);
+$common-map-layout-sidebar-background-color: #fff;
+$common-map-layout-welcome-button-learn-more-border-color: #fff;
+$common-map-layout-map-ui-a-close-button-color: #222;
+$common-layers-ui-base-layers-li-border-color: #fff;
+$common-layers-ui-base-layers-li-label-text-stroke: #fff;
+$common-layers-ui-base-layers-li-label-background-color: rgba(255,255,255,.9);
+$common-share-ui-share-tabs-a-color: #fff;
+$common-share-ui-share-tabs-a-border-color: #fff;
+$common-search-results-error-color: #f00;
+$common-sidebar-content-browse-field-p-background-color: #FFF;
+$common-sidebar-content-browse-tag-list-browse-tag-v-background-color: #fff;
+$common-sidebar-content-browse-tag-list-colour-preview-box-border-color: rgba(0, 0, 0, .1);
+$common-diary-post-deleted-background-color: #fee;
+$common-diary-entries-diary-comment-deleted-background-color: #fee;
+$common-messages-inbox-row-unread-background-color: #CBEEA7;
+$common-flash-error-background-color: #ff7070;
+$common-flash-warning-background-color: #ffe0cc;
+$common-flash-notice-background-color: #CBEEA7;
+$common-form-error-color: #fff;
+$common-form-error-background-color: #ff7070;
+$common-error-explanation-border-color: #ff7070;
+$common-error-explanation-background-color: #f0f0f0;
+$common-error-explanation-h2-background-color: #c00;
+$common-error-explanation-h2-color: #fff;
+$common-error-explanation-p-color: #333;
+$common-standard-form-textarea-color: #222;
+$common-standard-form-textarea-background-color: #fff;
+$common-standard-form-textarea-field-with-errors-border-color: #ff7070;
+$common-standard-form-search-directions-form-input-error-background-color: rgba(1, 0, 0, 0.4);
+$common-site-welcome-fixthemap-icon-note-background-color: #333;
+$common-site-about-content-inner-color: #333;
+$common-site-about-content-attr-background-color: #333;
+$common-site-about-content-attr-background-shade: rgba(0, 0, 0, .8);
+$common-site-about-attr-byosm-color: #fff;
+
+$small-body-small-nav-header-background-color: #fff;
+$small-body-small-nav-primary-ul-border-color: #eee;
+$small-body-small-nav-primary-ul-li-border-color: #eee;
diff --git a/app/assets/stylesheets/small.scss b/app/assets/stylesheets/small.scss
index 808b8caa6f..9a68871fb5 100644
--- a/app/assets/stylesheets/small.scss
+++ b/app/assets/stylesheets/small.scss
@@ -18,7 +18,7 @@ body.small-nav {
   header {
     height: auto;
     min-height: $headerHeight;
-    background: #fff;
+    background: $small-body-small-nav-header-background-color;
 
     h1 {
       padding-bottom: 15px;
@@ -49,9 +49,9 @@ body.small-nav {
     }
 
     ul {
-      border-top: 1px solid #eee;
+      border-top: 1px solid $small-body-small-nav-primary-ul-border-color;
       li {
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid $small-body-small-nav-primary-ul-li-border-color;
         border-right: none;
         > a {
           border-radius: 0;

From 89cf9787b3de21532b65a737397c6d12be20246e Mon Sep 17 00:00:00 2001
From: Michal Migurski <mike@teczno.com>
Date: Fri, 1 Jan 2021 11:03:58 -0800
Subject: [PATCH 2/6] Moved remaining CSS color names into parameters.scss
 variable definitions

---
 app/assets/stylesheets/common.scss     | 22 +++++++++++-----------
 app/assets/stylesheets/parameters.scss | 12 ++++++++++++
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 453300ecd4..87ad5fb169 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -4,7 +4,7 @@
 
 /* Styles common to large and small screens */
 
-.fillL { background-color: white; }
+.fillL { background-color: $common-fillL-background-color; }
 
 /* Default rules for the body of every page */
 
@@ -215,18 +215,18 @@ nav.secondary {
 
   .user-menu {
     .btn-outline-secondary {
-      @include button-outline-variant($darkgrey, $darkgrey, white, $darkgrey);
+      @include button-outline-variant($darkgrey, $darkgrey, $common-nav-secondary-user-menu-btn-outline-secondary-active-background-color, $darkgrey);
       border-color: $grey;
       &:hover {
         border-color: $grey;
       }
       &:focus {
-        background-color: white;
+        background-color: $common-nav-secondary-user-menu-btn-outline-secondary-focus-background-color;
         box-shadow: none;
       }
     }
     &.show .btn-outline-secondary {
-      background-color: white;
+      background-color: $common-nav-secondary-user-menu-show-btn-outline-secondary-background-color;
       &:focus {
         box-shadow: none;
       }
@@ -258,7 +258,7 @@ nav.primary, nav.secondary {
   .dropdown-item {
     &:hover, &:active {
       background-color: $green;
-      color: white;
+      color: $common-nav-primary-secondary-hover-active-color;
     }
   }
 }
@@ -308,7 +308,7 @@ body.compact-nav {
   outline: none;
 
   &:hover {
-    background-color: black;
+    background-color: $common-leaflet-control-control-button-hover-background-color;
   }
 
   &.disabled,
@@ -502,7 +502,7 @@ body.compact-nav {
     float: right;
     width: 250px;
     height: 100%;
-    background: white;
+    background: $common-map-layout-map-ui-background-color;
     overflow: auto;
 
     .section {
@@ -1635,7 +1635,7 @@ tr.turn:hover {
     min-height: 20px + $lineheight/2;
     min-width: 120px;
     margin: 0 0 $lineheight/2 0;
-    color: white;
+    color: $common-standard-form-a-button-color;
     background: $blue;
     text-align: center;
     border-radius: 2px;
@@ -1873,7 +1873,7 @@ div.secondary-actions {
     margin:0;
     min-width: 75px;
     max-width: 180px;
-    border-right:1px solid white;
+    border-right:1px solid $common-buttons-button-to-border-color;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
@@ -2166,7 +2166,7 @@ div.secondary-actions {
   }
 
   .text {
-    background: white;
+    background: $common-site-about-content-text-background-color;
     padding: 40px;
   }
 
@@ -2180,7 +2180,7 @@ div.secondary-actions {
 
     h1 {
       display: block;
-      color: white;
+      color: $common-site-about-content-attr-h1-color;
       font-weight: 300;
       font-size: 28px;
       span {
diff --git a/app/assets/stylesheets/parameters.scss b/app/assets/stylesheets/parameters.scss
index 7d7ac5e8ff..79b06c4da8 100644
--- a/app/assets/stylesheets/parameters.scss
+++ b/app/assets/stylesheets/parameters.scss
@@ -18,6 +18,7 @@ $border-radius: 3px;
 $list-highlight: #FFFFC0;
 $border: 1px solid $grey;
 
+$common-fillL-background-color: white;
 $common-body-color: #222;
 $common-body-background-color: #fff;
 $common-a-color: #24d;
@@ -25,10 +26,12 @@ $common-header-h1-a-color: #000;
 $common-count-number: #333;
 $common-leaflet-control-control-button-background-color: #333;
 $common-leaflet-control-control-button-background-shade: rgba(0,0,0,.6);
+$common-leaflet-control-control-button-hover-background-color: black;
 $common-leaflet-control-control-button-disabled-background-color: #333;
 $common-leaflet-control-control-button-disabled-background-shade: rgba(0,0,0,.5);
 $common-map-layout-sidebar-background-color: #fff;
 $common-map-layout-welcome-button-learn-more-border-color: #fff;
+$common-map-layout-map-ui-background-color: white;
 $common-map-layout-map-ui-a-close-button-color: #222;
 $common-layers-ui-base-layers-li-border-color: #fff;
 $common-layers-ui-base-layers-li-label-text-stroke: #fff;
@@ -52,6 +55,7 @@ $common-error-explanation-background-color: #f0f0f0;
 $common-error-explanation-h2-background-color: #c00;
 $common-error-explanation-h2-color: #fff;
 $common-error-explanation-p-color: #333;
+$common-standard-form-a-button-color: white;
 $common-standard-form-textarea-color: #222;
 $common-standard-form-textarea-background-color: #fff;
 $common-standard-form-textarea-field-with-errors-border-color: #ff7070;
@@ -61,6 +65,14 @@ $common-site-about-content-inner-color: #333;
 $common-site-about-content-attr-background-color: #333;
 $common-site-about-content-attr-background-shade: rgba(0, 0, 0, .8);
 $common-site-about-attr-byosm-color: #fff;
+$common-site-about-content-text-background-color: white;
+$common-site-about-content-attr-h1-color: white;
+
+$common-nav-secondary-user-menu-btn-outline-secondary-active-background-color: white;
+$common-nav-secondary-user-menu-btn-outline-secondary-focus-background-color: white;
+$common-nav-secondary-user-menu-show-btn-outline-secondary-background-color: white;
+$common-nav-primary-secondary-hover-active-color: white;
+$common-buttons-button-to-border-color: white;
 
 $small-body-small-nav-header-background-color: #fff;
 $small-body-small-nav-primary-ul-border-color: #eee;

From dbaa3b80a92c7de25f85ad1fd87c94a69e8ae643 Mon Sep 17 00:00:00 2001
From: Michal Migurski <mike@teczno.com>
Date: Fri, 1 Jan 2021 11:11:12 -0800
Subject: [PATCH 3/6] Renamed remaining color variables to include "-color"
 suffix

---
 app/assets/stylesheets/common.scss     | 196 ++++++++++++-------------
 app/assets/stylesheets/parameters.scss |  32 ++--
 2 files changed, 114 insertions(+), 114 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 87ad5fb169..bce3a5dc35 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -86,14 +86,14 @@ a {
 /* Utility for de-emphasizing content */
 
 .deemphasize {
-  color: $darkgrey;
+  color: $darkgrey-color;
   a {
-    color: $blue;
+    color: $blue-color;
   }
 }
 
 .text-muted a {
-  color: $blue;
+  color: $blue-color;
 }
 
 /* Rules for the header */
@@ -164,20 +164,20 @@ header {
 
 nav.primary {
   .btn-outline-primary {
-    @include button-outline-variant($green, $white);
+    @include button-outline-variant($green-color, $white);
   }
 
   .disabled {
     .btn-outline-primary {
-      color: $grey;
+      color: $grey-color;
       cursor: default;
 
       .caret {
-        border-top-color: $grey;
+        border-top-color: $grey-color;
       }
 
       &:hover {
-        background-color: lighten($green, 30%);
+        background-color: lighten($green-color, 30%);
       }
     }
   }
@@ -185,11 +185,11 @@ nav.primary {
   // Small tweaks to the toggle to stop the primary colour showing through
   // when the menu is shown
   .show > .btn-outline-primary.dropdown-toggle {
-    background-color: $green;
-    border-color: $green;
+    background-color: $green-color;
+    border-color: $green-color;
 
     &:focus {
-      box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
+      box-shadow: 0 0 0 0.2rem fade-out($green-color, 0.5);
     }
   }
 }
@@ -200,25 +200,25 @@ nav.secondary {
 
   .nav-link {
     padding: 0.2rem;
-    color: $darkgrey;
+    color: $darkgrey-color;
   }
 
   > ul li.current a {
-    color: darken($darkgrey, 25%);
+    color: darken($darkgrey-color, 25%);
   }
 
   .login-menu {
     .btn-outline-secondary {
-      @include button-outline-variant($darkgrey);
+      @include button-outline-variant($darkgrey-color);
     }
   }
 
   .user-menu {
     .btn-outline-secondary {
-      @include button-outline-variant($darkgrey, $darkgrey, $common-nav-secondary-user-menu-btn-outline-secondary-active-background-color, $darkgrey);
-      border-color: $grey;
+      @include button-outline-variant($darkgrey-color, $darkgrey-color, $common-nav-secondary-user-menu-btn-outline-secondary-active-background-color, $darkgrey-color);
+      border-color: $grey-color;
       &:hover {
-        border-color: $grey;
+        border-color: $grey-color;
       }
       &:focus {
         background-color: $common-nav-secondary-user-menu-btn-outline-secondary-focus-background-color;
@@ -242,7 +242,7 @@ nav.secondary {
     display: inline-block;
     height: 25px;
     margin: 3px 0 3px 3px;
-    background-color: lighten($grey, 10%);
+    background-color: lighten($grey-color, 10%);
     line-height: 20px;
     border-radius: 3;
   }
@@ -257,7 +257,7 @@ nav.secondary {
 nav.primary, nav.secondary {
   .dropdown-item {
     &:hover, &:active {
-      background-color: $green;
+      background-color: $green-color;
       color: $common-nav-primary-secondary-hover-active-color;
     }
   }
@@ -281,10 +281,10 @@ body.compact-nav {
 .count-number {
   padding: 2px $lineheight/4;
   border-radius: 2px;
-  background: lighten($green, 30%);
+  background: lighten($green-color, 30%);
   margin: 0 2px;
   font-size: 11px;
-  color: $common-count-number;
+  color: $common-count-number-color;
 }
 
 /* Rules for the message shown in place of the map when javascript is disabled */
@@ -302,7 +302,7 @@ body.compact-nav {
   height: 40px;
   width: 40px;
   background-color: $common-leaflet-control-control-button-background-color;
-  background-color: $common-leaflet-control-control-button-background-shade;
+  background-color: $common-leaflet-control-control-button-background-shade-color;
   border-radius: 4px 0 0 4px;
   margin-bottom: 10px;
   outline: none;
@@ -314,12 +314,12 @@ body.compact-nav {
   &.disabled,
   &.leaflet-disabled {
     background-color: $common-leaflet-control-control-button-disabled-background-color;
-    background-color: $common-leaflet-control-control-button-disabled-background-shade;
+    background-color: $common-leaflet-control-control-button-disabled-background-shade-color;
     cursor: default;
   }
 
   &.active {
-    background-color: $vibrant-green;
+    background-color: $vibrant-green-color;
   }
 
   .icon {
@@ -506,7 +506,7 @@ body.compact-nav {
     overflow: auto;
 
     .section {
-      border-bottom: 1px solid $grey;
+      border-bottom: 1px solid $grey-color;
       padding: 10px 20px;
     }
 
@@ -516,14 +516,14 @@ body.compact-nav {
       font-size:20px;
       line-height:10px;
       color: $common-map-layout-map-ui-a-close-button-color;
-      border:1px solid $grey;
+      border:1px solid $grey-color;
     }
 
     .tooltip {
       opacity: 1;
-      border: 1px solid $grey;
+      border: 1px solid $grey-color;
       .tooltip-arrow {
-        border-top-color: $grey;
+        border-top-color: $grey-color;
       }
     }
   }
@@ -569,10 +569,10 @@ body.compact-nav {
         }
       }
 
-      &.active { border-color: darken($green, 10%); }
+      &.active { border-color: darken($green-color, 10%); }
       &:hover {
-        border-color: $grey;
-        &.active { border-color: darken($green, 20%); }
+        border-color: $grey-color;
+        &.active { border-color: darken($green-color, 20%); }
       }
     }
   }
@@ -582,7 +582,7 @@ body.compact-nav {
       font-size: 13px;
       margin-bottom: 8px;
     }
-    li.disabled { color: $darkgrey; }
+    li.disabled { color: $darkgrey-color; }
   }
 }
 
@@ -593,7 +593,7 @@ body.compact-nav {
     a {
       color: $common-share-ui-share-tabs-a-color;
       text-decoration: none;
-      background-color: $lightblue;
+      background-color: $lightblue-color;
       padding: 5px 10px;
       border-right: 1px solid $common-share-ui-share-tabs-a-border-color;
     }
@@ -608,7 +608,7 @@ body.compact-nav {
     }
 
     a.active {
-      background-color: $blue;
+      background-color: $blue-color;
     }
   }
 
@@ -678,15 +678,15 @@ body.compact-nav {
   text-align: center;
 }
 
-.donate-attr { color: darken($green, 10%) !important; }
+.donate-attr { color: darken($green-color, 10%) !important; }
 
 /* Rules for the sidebar */
 
 .sidebar_heading {
   position: relative;
   padding: $lineheight/2 $lineheight;
-  // background: $offwhite;
-  // border-bottom: 1px solid $grey;
+  // background: $offwhite-color;
+  // border-bottom: 1px solid $grey-color;
   > .close {
     float: right;
     margin-top: 2px;
@@ -747,7 +747,7 @@ header .search_forms,
 #sidebar .search_results_entry {
   ul li {
     cursor: pointer;
-    &.selected { background: $list-highlight; }
+    &.selected { background: $list-highlight-color; }
   }
 
   .search_more .loader {
@@ -787,10 +787,10 @@ p#routing_summary {
 td.instruction, td.distance {
     padding-top: $lineheight/5;
     padding-bottom: $lineheight/5;
-    border-bottom: 1px solid $grey;
+    border-bottom: 1px solid $grey-color;
 }
 td.distance {
-    color: $darkgrey;
+    color: $darkgrey-color;
     text-align: right;
     font-size: x-small;
 }
@@ -798,7 +798,7 @@ tr.turn {
     cursor: pointer;
 }
 tr.turn:hover {
-    background: $list-highlight;
+    background: $list-highlight-color;
 }
 .routing_engines, #route_from, #route_to { margin-left: 25px; }
 .routing_marker { width: 15px; position: absolute; cursor: move; }
@@ -822,13 +822,13 @@ tr.turn:hover {
   li {
     cursor: pointer;
 
-    &.selected { background: $list-highlight; }
+    &.selected { background: $list-highlight-color; }
     /* color is derived from changeset bbox fillColor in history.js */
   }
 
   .comments {
     float: right;
-    color: $darkgrey;
+    color: $darkgrey-color;
   }
 
   .comments-0 {
@@ -846,7 +846,7 @@ tr.turn:hover {
 #sidebar_content {
   .browse-section {
     padding: $lineheight/2 $lineheight;
-    border-bottom: 1px solid $grey;
+    border-bottom: 1px solid $grey-color;
 
     h4:first-child {
       margin-top: 0;
@@ -861,7 +861,7 @@ tr.turn:hover {
   .paginate {
     float: right;
     padding: 1px 6px;
-    border: 1px solid $lightgrey;
+    border: 1px solid $lightgrey-color;
     border-radius: 3px;
   }
 
@@ -871,24 +871,24 @@ tr.turn:hover {
     h4 {
       padding: 5px 0 5px 10px;
       font-size: 12px;
-      border: 1px solid $grey;
+      border: 1px solid $grey-color;
       border-radius: 4px 4px 0 0;
-      background-color: $offwhite;
+      background-color: $offwhite-color;
     }
 
     p {
       padding: 7px 10px;
       font-size: 12px;
       background-color: $common-sidebar-content-browse-field-p-background-color;
-      border: 1px solid $grey;
+      border: 1px solid $grey-color;
       border-top: 0;
       border-radius: 0 0 4px 4px;
     }
   }
 
   .browse-tag-list {
-    background-color: $offwhite;
-    border: 1px solid $grey;
+    background-color: $offwhite-color;
+    border: 1px solid $grey-color;
     border-radius: 3px;
     table-layout: fixed;
     border-collapse: separate;
@@ -896,7 +896,7 @@ tr.turn:hover {
     width: 100%;
 
     th, td {
-      border-bottom: 1px solid $grey;
+      border-bottom: 1px solid $grey-color;
     }
 
     tr:last-child th, tr:last-child td {
@@ -913,11 +913,11 @@ tr.turn:hover {
 
     .browse-tag-k {
       font-weight: 500;
-      background-color: $offwhite;
+      background-color: $offwhite-color;
     }
 
     .browse-tag-v {
-      border-left: 1px solid $grey;
+      border-left: 1px solid $grey-color;
       background-color: $common-sidebar-content-browse-tag-list-browse-tag-v-background-color;
     }
 
@@ -985,7 +985,7 @@ tr.turn:hover {
         }
 
         &.selected {
-          background: $list-highlight;
+          background: $list-highlight-color;
         }
       }
     }
@@ -1012,8 +1012,8 @@ tr.turn:hover {
   }
 
   .export_boxy {
-    background: $lightgrey;
-    border: 1px solid $grey;
+    background: $lightgrey-color;
+    border: 1px solid $grey-color;
     border-radius: 3px;
 
     #maxlat { margin-top: -1px; }
@@ -1074,7 +1074,7 @@ tr.turn:hover {
 /* Rules for non-map content pages */
 
 .content-heading {
-  background: $lightgrey;
+  background: $lightgrey-color;
 }
 
 .content-inner {
@@ -1143,7 +1143,7 @@ tr.turn:hover {
 
 .content_map {
   height: 200px;
-  border: 1px solid $grey;
+  border: 1px solid $grey-color;
   margin-bottom: $lineheight;
 }
 
@@ -1244,7 +1244,7 @@ tr.turn:hover {
   position: relative;
   padding-top: $lineheight;
   padding-bottom: $lineheight/2;
-  border-top: 1px solid $grey;
+  border-top: 1px solid $grey-color;
 
   &:first-of-type {
     margin-top: $lineheight/2;
@@ -1282,12 +1282,12 @@ tr.turn:hover {
 .diary_entries {
   #map {
     height: 400px;
-    border: 1px solid $grey;
+    border: 1px solid $grey-color;
     display: none;
     margin-bottom: $lineheight;
   }
   #newcomment {
-    border-top: 1px solid $grey;
+    border-top: 1px solid $grey-color;
     padding-top: $lineheight;
     margin-top: $lineheight/2;
   }
@@ -1295,13 +1295,13 @@ tr.turn:hover {
     max-width: 740px;
   }
   .diary-comment {
-    border-top: 1px dashed $grey;
+    border-top: 1px dashed $grey-color;
     padding-top: $lineheight/2;
     padding-bottom: $lineheight/2;
     &:first-child {
       margin-top: $lineheight/2;
       padding-top: $lineheight;
-      border-top: 1px solid $grey;
+      border-top: 1px solid $grey-color;
     }
     &.deleted {
       background-color: $common-diary-entries-diary-comment-deleted-background-color;
@@ -1342,7 +1342,7 @@ tr.turn:hover {
 
 .users-terms {
   .legale {
-    border: 1px solid $grey;
+    border: 1px solid $grey-color;
     padding: $lineheight;
     margin-bottom: $lineheight;
     overflow: auto;
@@ -1358,9 +1358,9 @@ tr.turn:hover {
   }
 
   #decline {
-    background: $lightblue;
+    background: $lightblue-color;
     &:hover {
-      background: darken($lightblue, $hovercolor);
+      background: darken($lightblue-color, $hovercolor-color);
     }
   }
 }
@@ -1415,7 +1415,7 @@ tr.turn:hover {
   }
 
   .inbox-row {
-    background: $offwhite;
+    background: $offwhite-color;
   }
 
   .inbox-row-unread {
@@ -1434,7 +1434,7 @@ tr.turn:hover {
 .info-line {
   margin-bottom: $lineheight;
   padding: $lineheight/4 0px 4px 0px;
-  border-bottom: 1px solid $grey;
+  border-bottom: 1px solid $grey-color;
 
   form, form div {
     display: inline;
@@ -1561,7 +1561,7 @@ tr.turn:hover {
   .form-divider {
     margin-top: $lineheight;
     padding-top: $lineheight;
-    border-top: 1px solid $lightgrey;
+    border-top: 1px solid $lightgrey-color;
   }
   .horizontal-list .standard-form-row {
     float: left;
@@ -1603,7 +1603,7 @@ tr.turn:hover {
   textarea {
     color: $common-standard-form-textarea-color;
     background-color: $common-standard-form-textarea-background-color;
-    border: 1px solid $grey;
+    border: 1px solid $grey-color;
     border-radius: 3px;
     padding: 2px 5px;
     margin: 0;
@@ -1636,23 +1636,23 @@ tr.turn:hover {
     min-width: 120px;
     margin: 0 0 $lineheight/2 0;
     color: $common-standard-form-a-button-color;
-    background: $blue;
+    background: $blue-color;
     text-align: center;
     border-radius: 2px;
     &:hover {
-      background: darken($blue, $hovercolor);
+      background: darken($blue-color, $hovercolor-color);
       text-decoration: none;
     }
     &.deemphasize {
-      background: $lightblue;
+      background: $lightblue-color;
       &:hover {
-        background: darken($lightblue, $hovercolor);
+        background: darken($lightblue-color, $hovercolor-color);
       }
     }
     &:disabled {
-      background: $lightgrey;
+      background: $lightgrey-color;
       &:hover {
-        background: $lightgrey;
+        background: $lightgrey-color;
       }
     }
     &:last-child {
@@ -1674,7 +1674,7 @@ tr.turn:hover {
   .directions_form {
     position: relative;
     padding: $lineheight/2;
-    background-color: $lightgrey;
+    background-color: $lightgrey-color;
 
     .query_wrapper {
       position: relative;
@@ -1695,7 +1695,7 @@ tr.turn:hover {
 
     input:focus {
       outline: none;
-      box-shadow: 0px 0px 7px $vibrant-green;
+      box-shadow: 0px 0px 7px $vibrant-green-color;
     }
 
     input[type=submit].float {
@@ -1718,7 +1718,7 @@ tr.turn:hover {
     .query_options {
       text-align: right;
       font-size: 10px;
-      color: $blue;
+      color: $blue-color;
     }
 
     .describe_location {
@@ -1726,7 +1726,7 @@ tr.turn:hover {
       top: 6px;
       right: 6px;
       font-size: 10px;
-      color: $blue;
+      color: $blue-color;
     }
 
     .switch_link {
@@ -1788,7 +1788,7 @@ tr.turn:hover {
 img.user_image {
   max-width: 100px;
   max-height: 100px;
-  border: 1px solid $grey;
+  border: 1px solid $grey-color;
   margin-bottom: $lineheight;
   float: left;
   margin-right: $lineheight;
@@ -1797,7 +1797,7 @@ img.user_image {
 img.user_thumbnail {
   max-width: 50px;
   max-height: 50px;
-  border: 1px solid $grey;
+  border: 1px solid $grey-color;
   margin-right: $lineheight;
 }
 
@@ -1806,7 +1806,7 @@ img.user_thumbnail_tiny {
   height: auto;
   max-width: 25px;
   max-height: 25px;
-  border: 1px solid $grey;
+  border: 1px solid $grey-color;
 }
 
 /* Rules for geo microformats */
@@ -1830,7 +1830,7 @@ ul.secondary-actions {
     display: block;
     float: left;
     list-style: none;
-    border-left: 1px solid $grey;
+    border-left: 1px solid $grey-color;
     padding-left: $lineheight/2;
     margin-right: $lineheight/2;
     &:first-child {
@@ -1918,7 +1918,7 @@ div.secondary-actions {
 
 .table-striped > tbody > tr:nth-child(2n+1) > td,
 .table-striped > tbody > tr:nth-child(2n+1) > th {
-   background-color: $offwhite;
+   background-color: $offwhite-color;
 }
 
 /* Rules for OpenID logo */
@@ -1934,13 +1934,13 @@ div.secondary-actions {
 .prose {
   code {
     font-size: 13px;
-    background: $lightgrey;
+    background: $lightgrey-color;
     padding: 2px 3px;
   }
 
   pre {
     font-size: 13px;
-    background: $lightgrey;
+    background: $lightgrey-color;
     padding: 2px 3px;
     white-space: pre-wrap;
 
@@ -1951,17 +1951,17 @@ div.secondary-actions {
 
   img {
     padding: $lineheight;
-    background-color: $offwhite;
+    background-color: $offwhite-color;
     display: block;
     max-width: 100%;
     margin: auto;
   }
 
   blockquote {
-    border-left: $lineheight solid $offwhite;
+    border-left: $lineheight solid $offwhite-color;
     padding-left: $lineheight;
     margin: 0;
-    color: $darkgrey;
+    color: $darkgrey-color;
   }
 }
 
@@ -2002,7 +2002,7 @@ div.secondary-actions {
       .richtext_preview {
         display: inline-block;
         padding: $lineheight;
-        background-color: $offwhite;
+        background-color: $offwhite-color;
         overflow-x: auto;
 
         &.loading {
@@ -2021,7 +2021,7 @@ div.secondary-actions {
       display: inline-block;
       vertical-align: top;
       margin-left: 15px;
-      background-color: $offwhite;
+      background-color: $offwhite-color;
       padding: $lineheight/2;
       width: 220px;
 
@@ -2030,7 +2030,7 @@ div.secondary-actions {
       }
 
       h4.heading, li {
-        border-bottom: 1px solid $grey;
+        border-bottom: 1px solid $grey-color;
         margin-bottom: $lineheight/4;
         padding-bottom: $lineheight/4;
       }
@@ -2060,7 +2060,7 @@ div.secondary-actions {
 
 .note_list {
   tr.creator {
-    background-color: $offwhite;
+    background-color: $offwhite-color;
   }
 }
 
@@ -2151,7 +2151,7 @@ div.secondary-actions {
 }
 
 .site-about #content {
-  background-color: $lightgrey;
+  background-color: $lightgrey-color;
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-size: cover;
@@ -2174,7 +2174,7 @@ div.secondary-actions {
     position: relative;
     padding: 170px 40px 20px;
     background: $common-site-about-content-attr-background-color;
-    background: $common-site-about-content-attr-background-shade;
+    background: $common-site-about-content-attr-background-shade-color;
     margin-bottom: 0;
     margin-top: -20px;
 
@@ -2184,7 +2184,7 @@ div.secondary-actions {
       font-weight: 300;
       font-size: 28px;
       span {
-        color: $vibrant-green;
+        color: $vibrant-green-color;
       }
     }
 
@@ -2204,7 +2204,7 @@ div.secondary-actions {
       background-repeat: no-repeat;
       background-image: image-url('about/osm.png');
       background-size: cover;
-      background-color: $vibrant-green;
+      background-color: $vibrant-green-color;
     }
 
     .byosm {
@@ -2218,7 +2218,7 @@ div.secondary-actions {
       font: 500 20px/24px Helvetica, Arial, sans-serif;
       white-space: nowrap;
       color: $common-site-about-attr-byosm-color;
-      background: $vibrant-green;
+      background: $vibrant-green-color;
     }
 
     .byosm span {
diff --git a/app/assets/stylesheets/parameters.scss b/app/assets/stylesheets/parameters.scss
index 79b06c4da8..38255203ea 100644
--- a/app/assets/stylesheets/parameters.scss
+++ b/app/assets/stylesheets/parameters.scss
@@ -2,33 +2,33 @@
 $lineheight: 20px;
 $typeheight: 14px;
 
-$offwhite: #f8f8ff;
-$blue: #7092FF;
-$lightblue: #B8C5F0;
-$green: #7ebc6f;
-$vibrant-green: #76c551;
-$grey: #CCC;
-$lightgrey: #EEE;
-$darkgrey: #888;
-$hovercolor: 20%;
+$offwhite-color: #f8f8ff;
+$blue-color: #7092FF;
+$lightblue-color: #B8C5F0;
+$green-color: #7ebc6f;
+$vibrant-green-color: #76c551;
+$grey-color: #CCC;
+$lightgrey-color: #EEE;
+$darkgrey-color: #888;
+$hovercolor-color: 20%;
 $headerHeight: 55px;
 $sidebarWidth: 350px;
-$keyline: 1px solid $lightgrey;
+$keyline: 1px solid $lightgrey-color;
 $border-radius: 3px;
-$list-highlight: #FFFFC0;
-$border: 1px solid $grey;
+$list-highlight-color: #FFFFC0;
+$border: 1px solid $grey-color;
 
 $common-fillL-background-color: white;
 $common-body-color: #222;
 $common-body-background-color: #fff;
 $common-a-color: #24d;
 $common-header-h1-a-color: #000;
-$common-count-number: #333;
+$common-count-number-color: #333;
 $common-leaflet-control-control-button-background-color: #333;
-$common-leaflet-control-control-button-background-shade: rgba(0,0,0,.6);
+$common-leaflet-control-control-button-background-shade-color: rgba(0,0,0,.6);
 $common-leaflet-control-control-button-hover-background-color: black;
 $common-leaflet-control-control-button-disabled-background-color: #333;
-$common-leaflet-control-control-button-disabled-background-shade: rgba(0,0,0,.5);
+$common-leaflet-control-control-button-disabled-background-shade-color: rgba(0,0,0,.5);
 $common-map-layout-sidebar-background-color: #fff;
 $common-map-layout-welcome-button-learn-more-border-color: #fff;
 $common-map-layout-map-ui-background-color: white;
@@ -63,7 +63,7 @@ $common-standard-form-search-directions-form-input-error-background-color: rgba(
 $common-site-welcome-fixthemap-icon-note-background-color: #333;
 $common-site-about-content-inner-color: #333;
 $common-site-about-content-attr-background-color: #333;
-$common-site-about-content-attr-background-shade: rgba(0, 0, 0, .8);
+$common-site-about-content-attr-background-shade-color: rgba(0, 0, 0, .8);
 $common-site-about-attr-byosm-color: #fff;
 $common-site-about-content-text-background-color: white;
 $common-site-about-content-attr-h1-color: white;

From 42823e157915e0e11b634a816c410043d5aea997 Mon Sep 17 00:00:00 2001
From: Michal Migurski <mike@teczno.com>
Date: Fri, 1 Jan 2021 11:23:37 -0800
Subject: [PATCH 4/6] Added media queries with in -invcolor usage for dark mode

---
 app/assets/stylesheets/common.scss     | 700 ++++++++++++++++++++++++-
 app/assets/stylesheets/parameters.scss |   5 +-
 app/assets/stylesheets/small.scss      |  18 +
 3 files changed, 719 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index bce3a5dc35..654ebe38e2 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -40,6 +40,14 @@ small, aside {
 
 [dir=ltr] { /* no-r2 */ text-align: left; }
 
+@media (prefers-color-scheme:dark)
+{
+  body {
+    color: $common-body-invcolor;
+    background-color: $common-body-background-invcolor;
+  }
+}
+
 /* Rules for icons */
 
 .icon {
@@ -83,6 +91,13 @@ a {
   }
 }
 
+@media (prefers-color-scheme:dark)
+{
+  a {
+    color: $common-a-invcolor;
+  }
+}
+
 /* Utility for de-emphasizing content */
 
 .deemphasize {
@@ -96,6 +111,20 @@ a {
   color: $blue-color;
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .deemphasize {
+    color: $darkgrey-invcolor;
+    a {
+      color: $blue-invcolor;
+    }
+  }
+
+  .text-muted a {
+    color: $blue-invcolor;
+  }
+}
+
 /* Rules for the header */
 
 #menu-icon {
@@ -162,6 +191,22 @@ header {
 }
 
 
+@media (prefers-color-scheme:dark)
+{
+  header {
+    h1 {
+      a {
+        color: $common-header-h1-a-invcolor;
+      }
+
+      a:hover {
+        color: $common-header-h1-a-invcolor;
+      }
+    }
+  }
+}
+
+
 nav.primary {
   .btn-outline-primary {
     @include button-outline-variant($green-color, $white);
@@ -194,6 +239,40 @@ nav.primary {
   }
 }
 
+@media (prefers-color-scheme:dark)
+{
+  nav.primary {
+    .btn-outline-primary {
+      @include button-outline-variant($green-invcolor, $white);
+    }
+
+    .disabled {
+      .btn-outline-primary {
+        color: $grey-invcolor;
+
+        .caret {
+          border-top-color: $grey-invcolor;
+        }
+
+        &:hover {
+          background-color: lighten($green-invcolor, 30%);
+        }
+      }
+    }
+
+    // Small tweaks to the toggle to stop the primary colour showing through
+    // when the menu is shown
+    .show > .btn-outline-primary.dropdown-toggle {
+      background-color: $green-invcolor;
+      border-color: $green-invcolor;
+
+      &:focus {
+        box-shadow: 0 0 0 0.2rem fade-out($green-invcolor, 0.5);
+      }
+    }
+  }
+}
+
 nav.secondary {
   position: absolute;
   right: 0;
@@ -276,6 +355,55 @@ body.compact-nav {
   }
 }
 
+@media (prefers-color-scheme:dark)
+{
+  nav.secondary {
+    .nav-link {
+      color: $darkgrey-invcolor;
+    }
+
+    > ul li.current a {
+      color: darken($darkgrey-invcolor, 25%);
+    }
+
+    .login-menu {
+      .btn-outline-secondary {
+        @include button-outline-variant($darkgrey-invcolor);
+      }
+    }
+
+    .user-menu {
+      .btn-outline-secondary {
+        @include button-outline-variant($darkgrey-invcolor, $darkgrey-invcolor, $common-nav-secondary-user-menu-btn-outline-secondary-active-background-invcolor, $darkgrey-invcolor);
+        border-color: $grey-invcolor;
+        &:hover {
+          border-color: $grey-invcolor;
+        }
+        &:focus {
+          background-color: $common-nav-secondary-user-menu-btn-outline-secondary-focus-background-invcolor;
+          box-shadow: none;
+        }
+      }
+      &.show .btn-outline-secondary {
+        background-color: $common-nav-secondary-user-menu-show-btn-outline-secondary-background-invcolor;
+      }
+    }
+
+    #inboxanchor {
+      background-color: lighten($grey-invcolor, 10%);
+    }
+  }
+
+  nav.primary, nav.secondary {
+    .dropdown-item {
+      &:hover, &:active {
+        background-color: $green-invcolor;
+        color: $common-nav-primary-secondary-hover-active-invcolor;
+      }
+    }
+  }
+}
+
 /* Utility for styling notification numbers */
 
 .count-number {
@@ -287,6 +415,14 @@ body.compact-nav {
   color: $common-count-number-color;
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .count-number {
+    background: lighten($green-invcolor, 30%);
+    color: $common-count-number-invcolor;
+  }
+}
+
 /* Rules for the message shown in place of the map when javascript is disabled */
 
 #noscript {
@@ -344,6 +480,28 @@ body.compact-nav {
   border-radius: 0 0 0 4px;
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .leaflet-control .control-button {
+    background-color: $common-leaflet-control-control-button-background-invcolor;
+    background-color: $common-leaflet-control-control-button-background-shade-invcolor;
+
+    &:hover {
+      background-color: $common-leaflet-control-control-button-hover-background-invcolor;
+    }
+
+    &.disabled,
+    &.leaflet-disabled {
+      background-color: $common-leaflet-control-control-button-disabled-background-invcolor;
+      background-color: $common-leaflet-control-control-button-disabled-background-shade-invcolor;
+    }
+
+    &.active {
+      background-color: $vibrant-green-invcolor;
+    }
+  }
+}
+
 /* Rules for the sidebar and main map area */
 
 .map-layout {
@@ -529,6 +687,43 @@ body.compact-nav {
   }
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .map-layout {
+    #sidebar {
+      background: $common-map-layout-sidebar-background-invcolor;
+    }
+
+    .welcome {
+      .button {
+        &.learn-more {
+          border-right-color: $common-map-layout-welcome-button-learn-more-border-invcolor;
+        }
+      }
+    }
+
+    #map-ui {
+      background: $common-map-layout-map-ui-background-invcolor;
+
+      .section {
+        border-bottom-color: $grey-invcolor;
+      }
+
+      a.close-button {
+        color: $common-map-layout-map-ui-a-close-button-invcolor;
+        border-color: $grey-invcolor;
+      }
+
+      .tooltip {
+        border-color: $grey-invcolor;
+        .tooltip-arrow {
+          border-top-color: $grey-invcolor;
+        }
+      }
+    }
+  }
+}
+
 .layers-ui,
 .share-ui {
   li:last-child {
@@ -586,6 +781,32 @@ body.compact-nav {
   }
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .layers-ui {
+    .base-layers {
+      li  {
+        border-color: $common-layers-ui-base-layers-li-border-invcolor;
+
+        label {
+          text-stroke: 2px $common-layers-ui-base-layers-li-label-text-invstroke;
+          background: $common-layers-ui-base-layers-li-label-background-invcolor;
+        }
+
+        &.active { border-color: darken($green-invcolor, 10%); }
+        &:hover {
+          border-color: $grey-invcolor;
+          &.active { border-color: darken($green-invcolor, 20%); }
+        }
+      }
+    }
+
+    .overlay-layers {
+      li.disabled { color: $darkgrey-invcolor; }
+    }
+  }
+}
+
 .share-ui {
   .share-tabs {
     margin-bottom: 10px;
@@ -641,6 +862,27 @@ body.compact-nav {
   }
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .share-ui {
+    .share-tabs {
+      a {
+        color: $common-share-ui-share-tabs-a-invcolor;
+        background-color: $lightblue-invcolor;
+        border-right-color: $common-share-ui-share-tabs-a-border-invcolor;
+      }
+
+      a:first-child {
+        border-right-color: $common-share-ui-share-tabs-a-border-invcolor;
+      }
+
+      a.active {
+        background-color: $blue-invcolor;
+      }
+    }
+  }
+}
+
 .leaflet-top {
   top: $lineheight/2 !important;
   .leaflet-control {
@@ -680,6 +922,11 @@ body.compact-nav {
 
 .donate-attr { color: darken($green-color, 10%) !important; }
 
+@media (prefers-color-scheme:dark)
+{
+  .donate-attr { color: darken($green-invcolor, 10%) !important; }
+}
+
 /* Rules for the sidebar */
 
 .sidebar_heading {
@@ -717,6 +964,14 @@ body.compact-nav {
   }
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .sidebar_heading {
+    // background: $offwhite-invcolor;
+    // border-bottom: 1px solid $grey-invcolor;
+  }
+}
+
 /* Temporary label size override until we remove site-wide font customisation */
 
 form {
@@ -761,6 +1016,19 @@ header .search_forms,
   padding: 10px 20px;
 }
 
+@media (prefers-color-scheme:dark)
+{
+  #sidebar .search_results_entry {
+    ul li {
+      &.selected { background: $list-highlight-invcolor; }
+    }
+  }
+
+  .search_results_error {
+    color: $common-search-results-error-invcolor;
+  }
+}
+
 /* Rules for routing */
 
 #sidebar_content>table {
@@ -816,6 +1084,19 @@ tr.turn:hover {
   display: none;
 }
 
+@media (prefers-color-scheme:dark)
+{
+  td.instruction, td.distance {
+      border-bottom-color: $grey-invcolor;
+  }
+  td.distance {
+      color: $darkgrey-invcolor;
+  }
+  tr.turn:hover {
+      background: $list-highlight-invcolor;
+  }
+}
+
 /* Rules for the history sidebar */
 
 #sidebar .changesets {
@@ -841,6 +1122,20 @@ tr.turn:hover {
   }
 }
 
+@media (prefers-color-scheme:dark)
+{
+  #sidebar .changesets {
+    li {
+      &.selected { background: $list-highlight-invcolor; }
+      /* color is derived from changeset bbox fillColor in history.js */
+    }
+
+    .comments {
+      color: $darkgrey-invcolor;
+    }
+  }
+}
+
 /* Rules for the browse sidebar */
 
 #sidebar_content {
@@ -992,6 +1287,64 @@ tr.turn:hover {
   }
 }
 
+@media (prefers-color-scheme:dark)
+{
+  #sidebar_content {
+    .browse-section {
+      border-bottom-color: $grey-invcolor;
+    }
+
+    .paginate {
+      border-color: $lightgrey-invcolor;
+    }
+
+    .browse-field {
+      h4 {
+        border-color: $grey-invcolor;
+        background-color: $offwhite-invcolor;
+      }
+
+      p {
+        background-color: $common-sidebar-content-browse-field-p-background-invcolor;
+        border-color: $grey-invcolor;
+      }
+    }
+
+    .browse-tag-list {
+      background-color: $offwhite-invcolor;
+      border-color: $grey-invcolor;
+
+      th, td {
+        border-bottom-color: $grey-invcolor;
+      }
+
+      .browse-tag-k {
+        background-color: $offwhite-invcolor;
+      }
+
+      .browse-tag-v {
+        border-left-color: $grey-invcolor;
+        background-color: $common-sidebar-content-browse-tag-list-browse-tag-v-background-invcolor;
+      }
+
+      .colour-preview-box {
+        border-color: $common-sidebar-content-browse-tag-list-colour-preview-box-border-invcolor;
+        // add color via inline css on element: background-color: <tag value>;
+      }
+    }
+
+    .query-results {
+      ul {
+        li {
+          &.selected {
+            background: $list-highlight-color;
+          }
+        }
+      }
+    }
+  }
+}
+
 /* Rules for export sidebar */
 
 .export_form {
@@ -1046,6 +1399,16 @@ tr.turn:hover {
   }
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .export_form {
+    .export_boxy {
+      background: $lightgrey-invcolor;
+      border-color: $grey-invcolor;
+    }
+  }
+}
+
 /* Rules for the routing sidebar */
 
 #sidebar_content {
@@ -1084,6 +1447,13 @@ tr.turn:hover {
   padding: $lineheight;
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .content-heading {
+    background: $lightgrey-invcolor;
+  }
+}
+
 /* Overrides for pages that use new layout conventions */
 
 .users-new,
@@ -1153,6 +1523,13 @@ tr.turn:hover {
   }
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .content_map {
+    border-color: $grey-invcolor;
+  }
+}
+
 /* Rules for the user profile page */
 
 #userinformation {
@@ -1277,6 +1654,17 @@ tr.turn:hover {
   padding-top: $lineheight;
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .diary_post {
+    border-top-color: $grey-invcolor;
+
+    &.deleted {
+      background-color: $common-diary-post-deleted-background-invcolor;
+    }
+  }
+}
+
 /* Rules for the diary entry page */
 
 .diary_entries {
@@ -1327,6 +1715,27 @@ tr.turn:hover {
   left: 130px;
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .diary_entries {
+    #map {
+      border-color: $grey-invcolor;
+    }
+    #newcomment {
+      border-top-color: $grey-invcolor;
+    }
+    .diary-comment {
+      border-top-color: $grey-invcolor;
+      &:first-child {
+        border-top-color: $grey-invcolor;
+      }
+      &.deleted {
+        background-color: $common-diary-entries-diary-comment-deleted-background-invcolor;
+      }
+    }
+  }
+}
+
 /* Rules for the log in page */
 
 #login_auth_buttons {
@@ -1360,7 +1769,23 @@ tr.turn:hover {
   #decline {
     background: $lightblue-color;
     &:hover {
-      background: darken($lightblue-color, $hovercolor-color);
+      background: darken($lightblue-color, $hovercolor-opacity);
+    }
+  }
+}
+
+@media (prefers-color-scheme:dark)
+{
+  .users-terms {
+    .legale {
+      border-color: $grey-invcolor;
+    }
+
+    #decline {
+      background: $lightblue-invcolor;
+      &:hover {
+        background: darken($lightblue-invcolor, $hovercolor-opacity);
+      }
     }
   }
 }
@@ -1459,6 +1884,23 @@ tr.turn:hover {
   display: none;
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .messages {
+    .inbox-row {
+      background: $offwhite-invcolor;
+    }
+
+    .inbox-row-unread {
+      background: $common-messages-inbox-row-unread-background-invcolor;
+    }
+  }
+
+  .info-line {
+    border-bottom-color: $grey-invcolor;
+  }
+}
+
 /* Rules for "flash" notice boxes shown at the top of the content area */
 
 .flash {
@@ -1496,6 +1938,23 @@ tr.turn:hover {
   }
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .flash {
+    &.error {
+      background-color: $common-flash-error-background-invcolor;
+    }
+
+    &.warning {
+      background-color: $common-flash-warning-background-invcolor;
+    }
+
+    &.notice {
+      background-color: $common-flash-notice-background-invcolor;
+    }
+  }
+}
+
 /* Rules for highlighting fields with rails validation errors */
 
 .formError {
@@ -1508,6 +1967,14 @@ tr.turn:hover {
   background-color: $common-form-error-background-color;
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .formError {
+    color: $common-form-error-invcolor;
+    background-color: $common-form-error-background-invcolor;
+  }
+}
+
 /* Rules for rails validation error boxes */
 
 #errorExplanation {
@@ -1534,6 +2001,23 @@ tr.turn:hover {
   }
 }
 
+@media (prefers-color-scheme:dark)
+{
+  #errorExplanation {
+    border-color: $common-error-explanation-border-invcolor;
+    background-color: $common-error-explanation-background-invcolor;
+
+    h2 {
+      background-color: $common-error-explanation-h2-background-invcolor;
+      color: $common-error-explanation-h2-invcolor;
+    }
+
+    p {
+      color: $common-error-explanation-p-invcolor;
+    }
+  }
+}
+
 /* Rules for forms */
 
 .standard-form {
@@ -1640,13 +2124,13 @@ tr.turn:hover {
     text-align: center;
     border-radius: 2px;
     &:hover {
-      background: darken($blue-color, $hovercolor-color);
+      background: darken($blue-color, $hovercolor-opacity);
       text-decoration: none;
     }
     &.deemphasize {
       background: $lightblue-color;
       &:hover {
-        background: darken($lightblue-color, $hovercolor-color);
+        background: darken($lightblue-color, $hovercolor-opacity);
       }
     }
     &:disabled {
@@ -1783,6 +2267,75 @@ tr.turn:hover {
   }
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .standard-form {
+    .form-divider {
+      border-top-color: $lightgrey-invcolor;
+    }
+
+    input[type="text"],
+    input[type="email"],
+    input[type="url"],
+    input[type="password"],
+    textarea {
+      color: $common-standard-form-textarea-invcolor;
+      background-color: $common-standard-form-textarea-background-invcolor;
+      border-color: $grey-invcolor;
+
+      &.field_with_errors {
+        border-color: $common-standard-form-textarea-field-with-errors-border-invcolor;
+      }
+    }
+
+    /* Utility for general button styles */
+
+    input[type="button"],
+    input[type="submit"],
+    input[type="reset"],
+    a.button {
+      color: $common-standard-form-a-button-invcolor;
+      background: $blue-invcolor;
+      &:hover {
+        background: darken($blue-invcolor, $hovercolor-opacity);
+      }
+      &.deemphasize {
+        background: $lightblue-invcolor;
+        &:hover {
+          background: darken($lightblue-invcolor, $hovercolor-opacity);
+        }
+      }
+      &:disabled {
+        background: $lightgrey-invcolor;
+        &:hover {
+          background: $lightgrey-invcolor;
+        }
+      }
+    }
+
+    .search_form,
+    .directions_form {
+      background-color: $lightgrey-invcolor;
+
+      input:focus {
+        box-shadow: 0px 0px 7px $vibrant-green-invcolor;
+      }
+
+      input.error {
+        background-color: $common-standard-form-search-directions-form-input-error-background-invcolor;
+      }
+
+      .query_options {
+        color: $blue-invcolor;
+      }
+
+      .describe_location {
+        color: $blue-invcolor;
+      }
+    }
+  }
+}
+
 /* Rules for user images */
 
 img.user_image {
@@ -1809,6 +2362,21 @@ img.user_thumbnail_tiny {
   border: 1px solid $grey-color;
 }
 
+@media (prefers-color-scheme:dark)
+{
+  img.user_image {
+    border-color: $grey-invcolor;
+  }
+
+  img.user_thumbnail {
+    border-color: $grey-invcolor;
+  }
+
+  img.user_thumbnail_tiny {
+    border-color: $grey-invcolor;
+  }
+}
+
 /* Rules for geo microformats */
 
 abbr.geo {
@@ -1848,6 +2416,15 @@ div.secondary-actions {
   text-align: center;
 }
 
+@media (prefers-color-scheme:dark)
+{
+  ul.secondary-actions {
+    > li {
+      border-left-color: $grey-invcolor;
+    }
+  }
+}
+
 /* Utility for managing inner content areas */
 
 .inner22 { padding: $lineheight;}
@@ -1914,6 +2491,19 @@ div.secondary-actions {
   }
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .buttons {
+    input[type="submit"],
+    input[type="button"],
+    input[type="reset"],
+    .button,
+    .button_to {
+      border-right-color: $common-buttons-button-to-border-invcolor;
+    }
+  }
+}
+
 /* Customise the background colour of striped tables */
 
 .table-striped > tbody > tr:nth-child(2n+1) > td,
@@ -1921,6 +2511,14 @@ div.secondary-actions {
    background-color: $offwhite-color;
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .table-striped > tbody > tr:nth-child(2n+1) > td,
+  .table-striped > tbody > tr:nth-child(2n+1) > th {
+     background-color: $offwhite-invcolor;
+  }
+}
+
 /* Rules for OpenID logo */
 
 .openid_logo {
@@ -1974,6 +2572,29 @@ div.secondary-actions {
   margin-top: 0;
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .richtext,
+  .prose {
+    code {
+      background: $lightgrey-invcolor;
+    }
+
+    pre {
+      background: $lightgrey-invcolor;
+    }
+
+    img {
+      background-color: $offwhite-invcolor;
+    }
+
+    blockquote {
+      border-left: $lineheight solid $offwhite-invcolor;
+      color: $darkgrey-invcolor;
+    }
+  }
+}
+
 /* Rules for rich text editors */
 
 .standard-form {
@@ -2056,6 +2677,27 @@ div.secondary-actions {
   }
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .standard-form {
+    .richtext_container {
+      .richtext_content {
+        .richtext_preview {
+          background-color: $offwhite-invcolor;
+        }
+      }
+
+      .richtext_help {
+        background-color: $offwhite-invcolor;
+
+        h4.heading, li {
+          border-bottom-color: $grey-invcolor;
+        }
+      }
+    }
+  }
+}
+
 /* Rules for the user notes list */
 
 .note_list {
@@ -2064,6 +2706,15 @@ div.secondary-actions {
   }
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .note_list {
+    tr.creator {
+      background-color: $offwhite-invcolor;
+    }
+  }
+}
+
 /* Rules for the iD editor */
 
 .id-embed {
@@ -2150,6 +2801,15 @@ div.secondary-actions {
   }
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .site-welcome, .site-fixthemap {
+    .icon.note {
+      background-color: $common-site-welcome-fixthemap-icon-note-background-invcolor;
+    }
+  }
+}
+
 .site-about #content {
   background-color: $lightgrey-color;
   background-position: 50% 50%;
@@ -2262,6 +2922,40 @@ div.secondary-actions {
   }
 }
 
+@media (prefers-color-scheme:dark)
+{
+  .site-about #content {
+    .content-inner {
+      color: $common-site-about-content-inner-invcolor;
+    }
+
+    .text {
+      background: $common-site-about-content-text-background-invcolor;
+    }
+
+    .attr {
+      background: $common-site-about-content-attr-background-invcolor;
+      background: $common-site-about-content-attr-background-shade-invcolor;
+
+      h1 {
+        color: $common-site-about-content-attr-h1-invcolor;
+        span {
+          color: $vibrant-green-invcolor;
+        }
+      }
+
+      .user-image {
+        background-color: $vibrant-green-invcolor;
+      }
+
+      .byosm {
+        color: $common-site-about-attr-byosm-invcolor;
+        background: $vibrant-green-invcolor;
+      }
+    }
+  }
+}
+
 @import 'browse';
 
 @media only screen and (max-width:960px) {
diff --git a/app/assets/stylesheets/parameters.scss b/app/assets/stylesheets/parameters.scss
index 38255203ea..2adb16b397 100644
--- a/app/assets/stylesheets/parameters.scss
+++ b/app/assets/stylesheets/parameters.scss
@@ -10,7 +10,7 @@ $vibrant-green-color: #76c551;
 $grey-color: #CCC;
 $lightgrey-color: #EEE;
 $darkgrey-color: #888;
-$hovercolor-color: 20%;
+$hovercolor-opacity: 20%;
 $headerHeight: 55px;
 $sidebarWidth: 350px;
 $keyline: 1px solid $lightgrey-color;
@@ -77,3 +77,6 @@ $common-buttons-button-to-border-color: white;
 $small-body-small-nav-header-background-color: #fff;
 $small-body-small-nav-primary-ul-border-color: #eee;
 $small-body-small-nav-primary-ul-li-border-color: #eee;
+
+$common-body-invcolor: #ddd;
+$common-body-background-invcolor: #000;
diff --git a/app/assets/stylesheets/small.scss b/app/assets/stylesheets/small.scss
index 9a68871fb5..2ff92b1a5f 100644
--- a/app/assets/stylesheets/small.scss
+++ b/app/assets/stylesheets/small.scss
@@ -147,3 +147,21 @@ body.small-nav {
     padding: 2px;
   }
 }
+
+@media (prefers-color-scheme:dark)
+{
+  body.small-nav {
+    header {
+      background: $small-body-small-nav-header-background-invcolor;
+    }
+
+    nav.primary {
+      ul {
+        border-top: 1px solid $small-body-small-nav-primary-ul-border-invcolor;
+        li {
+          border-bottom: 1px solid $small-body-small-nav-primary-ul-li-border-invcolor;
+        }
+      }
+    }
+  }
+}

From c15e81f968ece04781cb8f15d77f3951f1e577ea Mon Sep 17 00:00:00 2001
From: Michal Migurski <mike@teczno.com>
Date: Fri, 1 Jan 2021 13:13:00 -0800
Subject: [PATCH 5/6] Defined all -invcolor variables

Used Chroma-js with simple inverted luminance:

    function inv(s) { var c1 = Chroma(s); c2 = c1.set('lch.l', 100 - c1.get('lch.l')); return c2 }
---
 app/assets/stylesheets/parameters.scss | 71 +++++++++++++++++++++++++-
 1 file changed, 70 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/parameters.scss b/app/assets/stylesheets/parameters.scss
index 2adb16b397..62961475c6 100644
--- a/app/assets/stylesheets/parameters.scss
+++ b/app/assets/stylesheets/parameters.scss
@@ -78,5 +78,74 @@ $small-body-small-nav-header-background-color: #fff;
 $small-body-small-nav-primary-ul-border-color: #eee;
 $small-body-small-nav-primary-ul-li-border-color: #eee;
 
-$common-body-invcolor: #ddd;
+
+
+$offwhite-invcolor: #08080f;
+$blue-invcolor: #0953b7;
+$lightblue-invcolor: #1f3052;
+$green-invcolor: #0e510a;
+$vibrant-green-invcolor: #004f00;
+$grey-invcolor: #2c2c2c;
+$lightgrey-invcolor: #131313;
+$darkgrey-invcolor: #666;
+$list-highlight-invcolor: #0e0a00;
+
+$common-fillL-background-invcolor: black;
+$common-body-invcolor: #d9d9d9;
 $common-body-background-invcolor: #000;
+$common-a-invcolor: #8582ff;
+$common-header-h1-a-invcolor: #ffffff;
+$common-count-number-invcolor: #c3c3c3;
+$common-leaflet-control-control-button-background-invcolor: #c3c3c3;
+$common-leaflet-control-control-button-background-shade-invcolor: rgba(255, 255, 255, .6);
+$common-leaflet-control-control-button-hover-background-invcolor: white;
+$common-leaflet-control-control-button-disabled-background-invcolor: #c3c3c3;
+$common-leaflet-control-control-button-disabled-background-shade-invcolor: rgba(255, 255, 255, .5);
+$common-map-layout-sidebar-background-invcolor: #000;
+$common-map-layout-welcome-button-learn-more-border-invcolor: #000;
+$common-map-layout-map-ui-background-invcolor: black;
+$common-map-layout-map-ui-a-close-button-invcolor: #d9d9d9;
+$common-layers-ui-base-layers-li-border-invcolor: #000;
+$common-layers-ui-base-layers-li-label-text-invstroke: #000;
+$common-layers-ui-base-layers-li-label-background-invcolor: rgba(0,0,0,.9);
+$common-share-ui-share-tabs-a-invcolor: #000;
+$common-share-ui-share-tabs-a-border-invcolor: #000;
+$common-search-results-error-invcolor: #e90000;
+$common-sidebar-content-browse-field-p-background-invcolor: #000;
+$common-sidebar-content-browse-tag-list-browse-tag-v-background-invcolor: #000;
+$common-sidebar-content-browse-tag-list-colour-preview-box-border-invcolor: rgba(255, 255, 255, .1);
+$common-diary-post-deleted-background-invcolor: #1a0c0c;
+$common-diary-entries-diary-comment-deleted-background-invcolor: #1a0c0c;
+$common-messages-inbox-row-unread-background-invcolor: #092200;
+$common-flash-error-background-invcolor: #a2172a;
+$common-flash-warning-background-invcolor: #281500;
+$common-flash-notice-background-invcolor: #092200;
+$common-form-error-invcolor: #000;
+$common-form-error-background-invcolor: #a2172a;
+$common-error-explanation-border-invcolor: #a2172a;
+$common-error-explanation-background-invcolor: #111;
+$common-error-explanation-h2-background-invcolor: #fd4528;
+$common-error-explanation-h2-invcolor: #000;
+$common-error-explanation-p-invcolor: #c3c3c3;
+$common-standard-form-a-button-invcolor: black;
+$common-standard-form-textarea-invcolor: #d9d9d9;
+$common-standard-form-textarea-background-invcolor: #000;
+$common-standard-form-textarea-field-with-errors-border-invcolor: #a2172a;
+$common-standard-form-search-directions-form-input-error-background-invcolor: rgba(233, 0, 0, 0.5);
+$common-site-welcome-fixthemap-icon-note-background-invcolor: #c3c3c3;
+$common-site-about-content-inner-invcolor: #c3c3c3;
+$common-site-about-content-attr-background-invcolor: #c3c3c3;
+$common-site-about-content-attr-background-shade-invcolor: rgba(255, 255, 255, .8);
+$common-site-about-attr-byosm-invcolor: #000;
+$common-site-about-content-text-background-invcolor: black;
+$common-site-about-content-attr-h1-invcolor: black;
+
+$common-nav-secondary-user-menu-btn-outline-secondary-active-background-invcolor: black;
+$common-nav-secondary-user-menu-btn-outline-secondary-focus-background-invcolor: black;
+$common-nav-secondary-user-menu-show-btn-outline-secondary-background-invcolor: black;
+$common-nav-primary-secondary-hover-active-invcolor: black;
+$common-buttons-button-to-border-invcolor: black;
+
+$small-body-small-nav-header-background-invcolor: #000;
+$small-body-small-nav-primary-ul-border-invcolor: #131313;
+$small-body-small-nav-primary-ul-li-border-invcolor: #131313;

From 17874fd2cea0652b191dbaa0f7acd38be1b5e019 Mon Sep 17 00:00:00 2001
From: Michal Migurski <mike@teczno.com>
Date: Fri, 1 Jan 2021 13:44:36 -0800
Subject: [PATCH 6/6] Redefined all -invcolor variables

Used Chroma-js with adjusted inverted luminance:

    function inv(str)
    {
      var c = Chroma(str);
      // sqrt bends the luminance curve to improve light-on-dark contrast
      c2 = c.set('lch.l', 100 * Math.sqrt((100 - c.get('lch.l')) / 100));
      return c2
    }
---
 app/assets/stylesheets/parameters.scss | 69 +++++++++++++-------------
 1 file changed, 35 insertions(+), 34 deletions(-)

diff --git a/app/assets/stylesheets/parameters.scss b/app/assets/stylesheets/parameters.scss
index 62961475c6..6ba085e2e5 100644
--- a/app/assets/stylesheets/parameters.scss
+++ b/app/assets/stylesheets/parameters.scss
@@ -80,61 +80,62 @@ $small-body-small-nav-primary-ul-li-border-color: #eee;
 
 
 
-$offwhite-invcolor: #08080f;
-$blue-invcolor: #0953b7;
-$lightblue-invcolor: #1f3052;
-$green-invcolor: #0e510a;
-$vibrant-green-invcolor: #004f00;
-$grey-invcolor: #2c2c2c;
-$lightgrey-invcolor: #131313;
-$darkgrey-invcolor: #666;
-$list-highlight-invcolor: #0e0a00;
+$offwhite-invcolor: #25252a;
+$blue-invcolor: #6b8efa;
+$lightblue-invcolor: #5c6990;
+$green-invcolor: #539046;
+$vibrant-green-invcolor: #3d8e1b;
+$grey-invcolor: #646464;
+$lightgrey-invcolor: #3a3a3a;
+$darkgrey-invcolor: #a0a0a0;
+
+$list-highlight-invcolor: #212100;
 
 $common-fillL-background-invcolor: black;
-$common-body-invcolor: #d9d9d9;
+$common-body-invcolor: #ebebeb;
 $common-body-background-invcolor: #000;
-$common-a-invcolor: #8582ff;
+$common-a-invcolor: #b9aeff;
 $common-header-h1-a-invcolor: #ffffff;
-$common-count-number-invcolor: #c3c3c3;
-$common-leaflet-control-control-button-background-invcolor: #c3c3c3;
+$common-count-number-invcolor: #dfdfdf;
+$common-leaflet-control-control-button-background-invcolor: #dfdfdf;
 $common-leaflet-control-control-button-background-shade-invcolor: rgba(255, 255, 255, .6);
 $common-leaflet-control-control-button-hover-background-invcolor: white;
-$common-leaflet-control-control-button-disabled-background-invcolor: #c3c3c3;
+$common-leaflet-control-control-button-disabled-background-invcolor: #dfdfdf;
 $common-leaflet-control-control-button-disabled-background-shade-invcolor: rgba(255, 255, 255, .5);
 $common-map-layout-sidebar-background-invcolor: #000;
 $common-map-layout-welcome-button-learn-more-border-invcolor: #000;
 $common-map-layout-map-ui-background-invcolor: black;
-$common-map-layout-map-ui-a-close-button-invcolor: #d9d9d9;
+$common-map-layout-map-ui-a-close-button-invcolor: #ebebeb;
 $common-layers-ui-base-layers-li-border-invcolor: #000;
 $common-layers-ui-base-layers-li-label-text-invstroke: #000;
 $common-layers-ui-base-layers-li-label-background-invcolor: rgba(0,0,0,.9);
 $common-share-ui-share-tabs-a-invcolor: #000;
 $common-share-ui-share-tabs-a-border-invcolor: #000;
-$common-search-results-error-invcolor: #e90000;
+$common-search-results-error-invcolor: #ff502e;
 $common-sidebar-content-browse-field-p-background-invcolor: #000;
 $common-sidebar-content-browse-tag-list-browse-tag-v-background-invcolor: #000;
 $common-sidebar-content-browse-tag-list-colour-preview-box-border-invcolor: rgba(255, 255, 255, .1);
-$common-diary-post-deleted-background-invcolor: #1a0c0c;
-$common-diary-entries-diary-comment-deleted-background-invcolor: #1a0c0c;
-$common-messages-inbox-row-unread-background-invcolor: #092200;
-$common-flash-error-background-invcolor: #a2172a;
-$common-flash-warning-background-invcolor: #281500;
-$common-flash-notice-background-invcolor: #092200;
+$common-diary-post-deleted-background-invcolor: #3d3031;
+$common-diary-entries-diary-comment-deleted-background-invcolor: #3d3031;
+$common-messages-inbox-row-unread-background-invcolor: #325215;
+$common-flash-error-background-invcolor: #ed6062;
+$common-flash-warning-background-invcolor: #584131;
+$common-flash-notice-background-invcolor: #325215;
 $common-form-error-invcolor: #000;
-$common-form-error-background-invcolor: #a2172a;
-$common-error-explanation-border-invcolor: #a2172a;
-$common-error-explanation-background-invcolor: #111;
-$common-error-explanation-h2-background-invcolor: #fd4528;
+$common-form-error-background-invcolor: #ed6062;
+$common-error-explanation-border-invcolor: #ed6062;
+$common-error-explanation-background-invcolor: #363636;
+$common-error-explanation-h2-background-invcolor: #ff7c55;
 $common-error-explanation-h2-invcolor: #000;
-$common-error-explanation-p-invcolor: #c3c3c3;
+$common-error-explanation-p-invcolor: #dfdfdf;
 $common-standard-form-a-button-invcolor: black;
-$common-standard-form-textarea-invcolor: #d9d9d9;
+$common-standard-form-textarea-invcolor: #ebebeb;
 $common-standard-form-textarea-background-invcolor: #000;
-$common-standard-form-textarea-field-with-errors-border-invcolor: #a2172a;
+$common-standard-form-textarea-field-with-errors-border-invcolor: #ed6062;
 $common-standard-form-search-directions-form-input-error-background-invcolor: rgba(233, 0, 0, 0.5);
-$common-site-welcome-fixthemap-icon-note-background-invcolor: #c3c3c3;
-$common-site-about-content-inner-invcolor: #c3c3c3;
-$common-site-about-content-attr-background-invcolor: #c3c3c3;
+$common-site-welcome-fixthemap-icon-note-background-invcolor: #dfdfdf;
+$common-site-about-content-inner-invcolor: #dfdfdf;
+$common-site-about-content-attr-background-invcolor: #dfdfdf;
 $common-site-about-content-attr-background-shade-invcolor: rgba(255, 255, 255, .8);
 $common-site-about-attr-byosm-invcolor: #000;
 $common-site-about-content-text-background-invcolor: black;
@@ -147,5 +148,5 @@ $common-nav-primary-secondary-hover-active-invcolor: black;
 $common-buttons-button-to-border-invcolor: black;
 
 $small-body-small-nav-header-background-invcolor: #000;
-$small-body-small-nav-primary-ul-border-invcolor: #131313;
-$small-body-small-nav-primary-ul-li-border-invcolor: #131313;
+$small-body-small-nav-primary-ul-border-invcolor: #3a3a3a;
+$small-body-small-nav-primary-ul-li-border-invcolor: #3a3a3a;