From ae66211c34e31e1c0962fb6728b970a001ca4ac9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Fri, 28 May 2021 23:35:48 +0200
Subject: [PATCH 1/4] Simplify colors in dashboard icons

We can just inherit the colors; no need to define them explicitly.
---
 app/assets/stylesheets/dashboard.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss
index 42daef732..ca913b0e7 100644
--- a/app/assets/stylesheets/dashboard.scss
+++ b/app/assets/stylesheets/dashboard.scss
@@ -237,7 +237,6 @@
     background: #fff;
     border: 1px solid $border;
     border-radius: rem-calc(36);
-    color: #000;
     content: "\77";
     font-family: "icons";
     font-size: rem-calc(24);
@@ -264,7 +263,6 @@
   position: relative;
 
   &::before {
-    color: #000;
     font-family: "icons";
     font-size: rem-calc(24);
     left: 6px;

From c3a329a6f6ca68f770c8d92dc634ef50fa2df69c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 29 May 2021 01:39:34 +0200
Subject: [PATCH 2/4] Remove unnecessary background color definitions

These elements already inherit these background colors form their parent
elements. Defining them explicitly makes it harder to change them and it
also makes it harder to customize the styles in other CONSUL
installations.
---
 app/assets/stylesheets/admin.scss               | 4 ----
 app/assets/stylesheets/layout.scss              | 3 ---
 app/assets/stylesheets/legislation.scss         | 1 -
 app/assets/stylesheets/legislation_process.scss | 1 -
 4 files changed, 9 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 17a3739d0..f96f375c0 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -509,10 +509,6 @@ code {
 // 04. Stats
 // ---------
 
-.stats {
-  background: #fff;
-}
-
 .stats-numbers {
   p {
     color: $text-medium;
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 9c9398e60..5dc90f53e 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -345,7 +345,6 @@ a {
       font-weight: bold;
 
       &::after {
-        background: $brand;
         border-bottom: 2px solid;
         bottom: 0;
         content: "";
@@ -1834,7 +1833,6 @@ table {
   }
 
   .reply {
-    background: #fff;
     border: 1px solid $border;
     border-left: 0;
     border-right: 0;
@@ -2177,7 +2175,6 @@ table {
   .debates-inner,
   .proposals-inner,
   .budget-investments-inner {
-    background: #fff;
     max-height: rem-calc(350);
 
     @include breakpoint(small) {
diff --git a/app/assets/stylesheets/legislation.scss b/app/assets/stylesheets/legislation.scss
index 044f969f4..699fe3417 100644
--- a/app/assets/stylesheets/legislation.scss
+++ b/app/assets/stylesheets/legislation.scss
@@ -40,7 +40,6 @@
 // -----------------
 .legislation {
   margin: 0 0 $line-height;
-  background: #fff;
   border: 1px solid;
   border-color: #e5e6e9 #dfe0e4 #d0d1d5;
   border-radius: 0;
diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index 119a5bb06..d94e68320 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -583,7 +583,6 @@
     }
 
     .calc-comments {
-      background: #fff;
       cursor: auto;
 
       @include breakpoint(small only) {

From 73fe89829d8c8f56a55727cd56986d7c445b88c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 29 May 2021 14:23:02 +0200
Subject: [PATCH 3/4] Use $body-background to remove color duplication

We're using `background: #fff` and `background: $white` in many places.
Sometimes we mean "use the same background as the body", which means if
we change the body background so it's, let's say, dark, we'll also have
to change all these places.

So now we're using `$body-background` in more places, so changing the
general background color is easier.

There are still some places where we use `#fff` or `$white`. Sometimes
it's hard to tell whether the intention is "use a white background here"
or "use the same background as the body here". When in doubt, I've left
it the way it was.

Just for testing purposes, I've tested locally how things would look
like if we added this code to `_consul_custom_overrides.scss`:

```
$body-background: #fea;
$card-background: $body-background;
$tab-background: $body-background;
$tab-content-background: $body-background;
$table-background: $body-background;
```

Or:

```
$body-background: #333;
$text: #fcfcfc;
$body-font-color: $text;
$card-background: $body-background;
$tab-background: $body-background;
$tab-content-background: $body-background;
$table-background: $body-background;
```

Testing shows we've still got a long way to go to make it easy to add
custom color themes, since there are many custom colors in the code.
Hopefully these changes bring us one step closer.
---
 app/assets/stylesheets/admin.scss             |  2 +-
 .../stylesheets/autocomplete_overrides.scss   |  2 +-
 app/assets/stylesheets/budgets/phases.scss    |  2 +-
 app/assets/stylesheets/dashboard.scss         |  2 +-
 app/assets/stylesheets/layout.scss            | 22 +++++++++----------
 app/assets/stylesheets/participation.scss     | 14 ++++++------
 6 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index f96f375c0..a67c23f99 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -711,7 +711,7 @@ table {
 // ---------------
 
 .markdown-editor {
-  background-color: #fff;
+  background-color: $body-background;
 
   .markdown-area,
   .markdown-preview {
diff --git a/app/assets/stylesheets/autocomplete_overrides.scss b/app/assets/stylesheets/autocomplete_overrides.scss
index a80be864c..25c759d8c 100644
--- a/app/assets/stylesheets/autocomplete_overrides.scss
+++ b/app/assets/stylesheets/autocomplete_overrides.scss
@@ -14,7 +14,7 @@
   list-style: none;
   padding: $line-height / 4 $line-height / 3;
   display: block;
-  background: #fff;
+  background: $body-background;
   border: 1px solid $border;
   font-size: $small-font-size;
 
diff --git a/app/assets/stylesheets/budgets/phases.scss b/app/assets/stylesheets/budgets/phases.scss
index 2cf816322..be9d2f9b0 100644
--- a/app/assets/stylesheets/budgets/phases.scss
+++ b/app/assets/stylesheets/budgets/phases.scss
@@ -74,7 +74,7 @@
     }
 
     a {
-      background: $white;
+      background: $body-background;
       color: inherit;
       height: 100%;
       padding: $line-height $line-height * 1.5;
diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss
index ca913b0e7..56d2268bc 100644
--- a/app/assets/stylesheets/dashboard.scss
+++ b/app/assets/stylesheets/dashboard.scss
@@ -234,7 +234,7 @@
   position: relative;
 
   &::before {
-    background: #fff;
+    background: $body-background;
     border: 1px solid $border;
     border-radius: rem-calc(36);
     content: "\77";
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 5dc90f53e..3a5341170 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -569,7 +569,7 @@ body > header,
 
       @include breakpoint(medium) {
         @include brand-text;
-        background: #fff;
+        background: $body-background;
         text-align: center;
       }
     }
@@ -585,7 +585,7 @@ body > header,
   .menu {
 
     &.is-dropdown-submenu {
-      background: #fff;
+      background: $body-background;
       color: $text;
       margin: 0;
       margin-top: rem-calc(-12);
@@ -685,7 +685,7 @@ body > header,
 .subnavigation {
 
   @include breakpoint(medium) {
-    background: #fff;
+    background: $body-background;
     color: $text;
     padding-bottom: 0;
   }
@@ -966,7 +966,7 @@ footer {
   text-align: center;
 
   span {
-    background: #fff;
+    background: $body-background;
     box-decoration-break: clone;
     font-weight: bold;
     padding: 0 $line-height / 2;
@@ -991,7 +991,7 @@ footer {
   select {
 
     option {
-      background: #fff;
+      background: $body-background;
       color: $text;
       border: 0;
       outline: none;
@@ -1352,7 +1352,7 @@ form {
   }
 
   &::before {
-    background: #fff;
+    background: $body-background;
     color: $brand;
     content: "\4d";
     font-family: "icons" !important;
@@ -1773,7 +1773,7 @@ table {
     position: relative;
 
     .icon-letter {
-      background: #fff;
+      background: $body-background;
       color: $color-info;
       font-size: rem-calc(24);
       margin-left: -27px;
@@ -1788,7 +1788,7 @@ table {
 // ------------
 
 .comments {
-  background: #fff;
+  background: $body-background;
   background-repeat: repeat-x;
   padding-bottom: $line-height * 4;
 
@@ -2266,7 +2266,7 @@ table {
   }
 
   .recommendation {
-    background: #fff;
+    background: $body-background;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
     display: block;
     margin-bottom: $line-height / 4;
@@ -2688,9 +2688,9 @@ table {
     }
 
     span {
-      background: #fff;
+      background: $body-background;
       border-radius: rem-calc(4);
-      color: #000;
+      color: $text;
       display: inline-block;
       font-size: $small-font-size;
       font-weight: bold;
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 9cbebc07b..66e93edf1 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -539,7 +539,7 @@
 .fixed-mobile-content {
 
   @include breakpoint(medium down) {
-    background: #fff;
+    background: $body-background;
     margin-bottom: rem-calc(-1) !important;
     padding-top: $line-height / 2;
   }
@@ -598,7 +598,7 @@
 }
 
 %panel {
-  background: #fff;
+  background: $body-background;
   border: 1px solid;
   border-color: #e5e6e9 #dfe0e4 #d0d1d5;
   border-radius: 0;
@@ -1086,7 +1086,7 @@
       margin-top: 0;
 
       &:hover {
-        background: #fff;
+        background: $body-background;
         color: $text;
       }
     }
@@ -1202,7 +1202,7 @@
 }
 
 .jumbo-budget {
-  background: $white;
+  background: $body-background;
   border-bottom: 2px solid $border;
 
   &.budget-heading {
@@ -1405,7 +1405,7 @@
     transition: height 0.3s;
 
     &.is-fixed {
-      background: $white;
+      background: $body-background;
       border-bottom: 2px solid $border;
       height: auto;
       left: 0;
@@ -1631,9 +1631,9 @@
 }
 
 .zoom-link {
-  background: #fff;
+  background: $body-background;
   border-radius: rem-calc(48);
-  color: #000;
+  color: $text;
   font-size: rem-calc(24);
   font-weight: bold;
   height: rem-calc(48);

From 366fd630dc8eb2cb6dafaec6ed33d0fc1ddc0444 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sat, 29 May 2021 17:14:24 +0200
Subject: [PATCH 4/4] Use $table-background to set table colors

This way it's possible to customize these colors by just changing a
variable.

The code is now quite a bit hacky; since I'm not an expert in color
design, I didn't want to change the colors we were using in case it made
the application have less appeal.

If slightly changing these colors isn't a problem, we could use
Foundation's defaults to simplify the code, maybe just changing the
`$table-color-scale` variable.
---
 app/assets/stylesheets/admin.scss  | 2 +-
 app/assets/stylesheets/layout.scss | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index a67c23f99..e2372ffa1 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -226,7 +226,7 @@ $table-header:   #ecf1f6;
       border: $table-border;
 
       &:hover {
-        background: #f3f6f7;
+        background: adjust-color(darken($table-background, 2%), $red: -4, $green: -1);
       }
     }
 
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 3a5341170..a54d1a0d7 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -1433,11 +1433,11 @@ table {
     }
 
     &:nth-child(odd) {
-      background: #fff;
+      background: $table-background;
     }
 
     &:nth-child(even) {
-      background: #fafcfb;
+      background: adjust-color($table-background, $red: -3, $green: -1, $blue: -2);
     }
   }