From 73fe89829d8c8f56a55727cd56986d7c445b88c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sat, 29 May 2021 14:23:02 +0200 Subject: [PATCH] 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);