From 3aa73110c5082660dfb9b42e9937d1665eb1804c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 13 Oct 2022 00:07:34 +0200 Subject: [PATCH 1/6] Use foundation variables to set caption color This way we can simplify the code a bit since Foundation automatically chooses the text color of the caption so there's enough contrast with the background color defined in `$orbit-caption-background`. --- app/assets/stylesheets/_consul_settings.scss | 1 + app/assets/stylesheets/participation.scss | 5 ----- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss index c29f86bf7..8f492c7aa 100644 --- a/app/assets/stylesheets/_consul_settings.scss +++ b/app/assets/stylesheets/_consul_settings.scss @@ -43,6 +43,7 @@ $small-font-size: rem-calc(14) !default; $abbr-underline: none !default; $orbit-bullet-diameter: 0.8rem !default; +$orbit-caption-background: #eee; $show-header-for-stacked: true !default; diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 0a7aa2a08..4abdb88cf 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -1461,11 +1461,6 @@ position: relative; } -.orbit-caption { - background: #eee; - color: $text; -} - .orbit-next, .orbit-previous { background: rgba(34, 34, 34, 0.25); From 5845dd46d93c092b7bee1b242e24e792759609b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 13 Oct 2022 20:57:31 +0200 Subject: [PATCH 2/6] Extract variable for SDG text color We were using `#fff` in some places and `$white` in others. We're choosing `#fff` because it has a better contrast against the lighter SDG colors and because it's the one officially used by the United Nations. --- app/assets/stylesheets/_consul_settings.scss | 1 + app/assets/stylesheets/sdg/goals/show.scss | 2 +- app/assets/stylesheets/sdg/related_list_selector.scss | 4 ++-- app/assets/stylesheets/sdg/tag_list.scss | 2 +- 4 files changed, 5 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss index 8f492c7aa..fe190497a 100644 --- a/app/assets/stylesheets/_consul_settings.scss +++ b/app/assets/stylesheets/_consul_settings.scss @@ -124,6 +124,7 @@ $off-screen-left: -1000rem !default; $sdg-icon-min-width: 45px !default; +$sdg-text: #fff; $sdg-colors: ( 1: #e5243b, 2: #dda63a, diff --git a/app/assets/stylesheets/sdg/goals/show.scss b/app/assets/stylesheets/sdg/goals/show.scss index 093572281..0492d0ced 100644 --- a/app/assets/stylesheets/sdg/goals/show.scss +++ b/app/assets/stylesheets/sdg/goals/show.scss @@ -4,7 +4,7 @@ > header { align-items: center; - color: #fff; + color: $sdg-text; display: flex; margin: $line-height / 2 0; text-shadow: 0 0 1px $black; diff --git a/app/assets/stylesheets/sdg/related_list_selector.scss b/app/assets/stylesheets/sdg/related_list_selector.scss index 15632a19c..08f3a2438 100644 --- a/app/assets/stylesheets/sdg/related_list_selector.scss +++ b/app/assets/stylesheets/sdg/related_list_selector.scss @@ -6,7 +6,7 @@ } .amsify-suggestags-area .amsify-select-tag { - color: $white; + color: $sdg-text; @each $code, $color in $sdg-colors { &[data-val^="#{$code}"] { @@ -72,7 +72,7 @@ } .remove-tag { - color: $white; + color: $sdg-text; } h3 { diff --git a/app/assets/stylesheets/sdg/tag_list.scss b/app/assets/stylesheets/sdg/tag_list.scss index 2a0018a1f..52a613382 100644 --- a/app/assets/stylesheets/sdg/tag_list.scss +++ b/app/assets/stylesheets/sdg/tag_list.scss @@ -13,7 +13,7 @@ a:not(.more-targets), span { - color: $white; + color: $sdg-text; } @each $code, $color in $sdg-colors { From 025d7bf9f8f15497273caa50557a4ddb84f84424 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 13 Oct 2022 21:24:38 +0200 Subject: [PATCH 3/6] Remove duplication in sidebar color definition We're going to change that code so it uses color-pick-contrast, so we're refactoring it first. --- app/assets/stylesheets/admin.scss | 2 +- app/assets/stylesheets/admin/menu.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index 0bfce2b43..acdf75498 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -21,7 +21,7 @@ $admin-border: 2px solid $admin-border-color; $admin-color: #245b80; $admin-text: #434d54; -$sidebar: #245b80; +$sidebar: $admin-color; $sidebar-hover: #25597c; $sidebar-active: #f4fcd0; diff --git a/app/assets/stylesheets/admin/menu.scss b/app/assets/stylesheets/admin/menu.scss index a626b625a..a543fca1d 100644 --- a/app/assets/stylesheets/admin/menu.scss +++ b/app/assets/stylesheets/admin/menu.scss @@ -1,6 +1,6 @@ .admin-sidebar { background: $sidebar; - background: linear-gradient(to bottom, #245b80 0%, #488fb5 100%); + background: linear-gradient(to bottom, $sidebar 0%, #488fb5 100%); border-right: 1px solid $border; color: $white; From 1b1b5b57558e5212f691ebf13c6be37689324f8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sun, 23 Oct 2022 00:42:08 +0200 Subject: [PATCH 4/6] Use color-pick-contrast to get text colors We were defining (for instance) white text against the `$brand` background. That meant that, if somebody customized the `$brand` color so it used a light color, they had to customize the text color as well in order to guarantee proper contrast between text and background colors. So we're using `color-pick-contrast` instead, which means we don't have to manually calculate whether white or black will be the color which makes the text more readable. --- app/assets/stylesheets/admin.scss | 2 +- .../stylesheets/admin/machine_learning/setting.scss | 2 +- app/assets/stylesheets/admin/menu.scss | 2 +- app/assets/stylesheets/budgets/phases.scss | 4 ++-- app/assets/stylesheets/dashboard.scss | 4 ++-- app/assets/stylesheets/layout.scss | 6 +++--- app/assets/stylesheets/layout/locale_switcher.scss | 2 +- app/assets/stylesheets/milestones.scss | 4 ++-- app/assets/stylesheets/mixins/buttons.scss | 2 +- app/assets/stylesheets/mixins/colors.scss | 4 ++-- app/assets/stylesheets/mixins/tags.scss | 2 +- app/assets/stylesheets/participation.scss | 8 ++++---- 12 files changed, 21 insertions(+), 21 deletions(-) diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index acdf75498..01a7d0dcc 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -840,7 +840,7 @@ table { .fullscreen { .fullscreen-container { - color: $white; + color: color-pick-contrast($admin-color); a { line-height: 3rem; diff --git a/app/assets/stylesheets/admin/machine_learning/setting.scss b/app/assets/stylesheets/admin/machine_learning/setting.scss index 3bf902365..4bd989cfb 100644 --- a/app/assets/stylesheets/admin/machine_learning/setting.scss +++ b/app/assets/stylesheets/admin/machine_learning/setting.scss @@ -2,7 +2,7 @@ .card-divider { background: $primary-color; - color: $white; + color: color-pick-contrast($primary-color); h3 { margin-top: 0; diff --git a/app/assets/stylesheets/admin/menu.scss b/app/assets/stylesheets/admin/menu.scss index a543fca1d..da89b804a 100644 --- a/app/assets/stylesheets/admin/menu.scss +++ b/app/assets/stylesheets/admin/menu.scss @@ -2,7 +2,7 @@ background: $sidebar; background: linear-gradient(to bottom, $sidebar 0%, #488fb5 100%); border-right: 1px solid $border; - color: $white; + color: color-pick-contrast($sidebar); ul { list-style-type: none; diff --git a/app/assets/stylesheets/budgets/phases.scss b/app/assets/stylesheets/budgets/phases.scss index f9bd55892..8cb48372b 100644 --- a/app/assets/stylesheets/budgets/phases.scss +++ b/app/assets/stylesheets/budgets/phases.scss @@ -88,7 +88,7 @@ &[aria-selected="true"], &.is-active { background: $dark; - color: $white; + color: color-pick-contrast($dark); font-weight: normal; } @@ -100,7 +100,7 @@ &.current-phase-tab a { background: $brand-secondary; - color: $white; + color: color-pick-contrast($brand-secondary); padding-top: $line-height / 2; &:hover { diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss index 57a4c41d4..9c73a4df7 100644 --- a/app/assets/stylesheets/dashboard.scss +++ b/app/assets/stylesheets/dashboard.scss @@ -459,7 +459,7 @@ .mail-header { background: $pdf-primary; - color: #fff; + color: color-pick-contrast($pdf-primary); padding: $line-height * 2; img { @@ -514,7 +514,7 @@ .dashboard-poster-pdf { .poster-header { background: $pdf-primary; - color: #fff; + color: color-pick-contrast($pdf-primary); h1 { text-align: left; diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 6152d0bcc..5441e0cfc 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -697,7 +697,7 @@ body > header, .top-links { background: $dark; - color: $white; + color: color-pick-contrast($dark); display: flex; flex-wrap: wrap; font-size: $small-font-size; @@ -811,7 +811,7 @@ body > header, background: $border; border: 1px solid #ccc; border-left: 0; - color: $text; + color: color-pick-contrast($border); height: $line-height * 1.5; line-height: $line-height * 1.5; padding-top: 0; @@ -979,7 +979,7 @@ footer { background-color: $brand; background-repeat: no-repeat; background-size: cover; - color: $white; + color: color-pick-contrast($brand); @include breakpoint(medium) { min-height: $line-height * 42; diff --git a/app/assets/stylesheets/layout/locale_switcher.scss b/app/assets/stylesheets/layout/locale_switcher.scss index afbf2e510..5b2bc8076 100644 --- a/app/assets/stylesheets/layout/locale_switcher.scss +++ b/app/assets/stylesheets/layout/locale_switcher.scss @@ -29,7 +29,7 @@ background: #001d33; border: 0; border-radius: rem-calc(4); - color: #fff; + color: color-pick-contrast(#001d33); font-size: $small-font-size; height: $line-height; margin-bottom: 0; diff --git a/app/assets/stylesheets/milestones.scss b/app/assets/stylesheets/milestones.scss index ba60057de..cd3f30cdf 100644 --- a/app/assets/stylesheets/milestones.scss +++ b/app/assets/stylesheets/milestones.scss @@ -23,7 +23,7 @@ $progress-bar-color: #fea230; } .progress-meter-text { - color: #000; + color: color-pick-contrast($progress-bar-background); right: 12px; text-align: right; transform: translate(0%, -50%); @@ -120,7 +120,7 @@ $progress-bar-color: #fea230; .milestone-status { background: $budget; border-radius: rem-calc(4); - color: #fff; + color: color-pick-contrast($budget); display: inline-block; margin-top: $line-height / 6; padding: $line-height / 4 $line-height / 2; diff --git a/app/assets/stylesheets/mixins/buttons.scss b/app/assets/stylesheets/mixins/buttons.scss index b8b6010ff..bc494b083 100644 --- a/app/assets/stylesheets/mixins/buttons.scss +++ b/app/assets/stylesheets/mixins/buttons.scss @@ -57,7 +57,7 @@ position: relative; &::after { - background: $white; + background: color-pick-contrast($primary-color); border-radius: 100%; content: ""; display: block; diff --git a/app/assets/stylesheets/mixins/colors.scss b/app/assets/stylesheets/mixins/colors.scss index 2d54e5214..17c22874b 100644 --- a/app/assets/stylesheets/mixins/colors.scss +++ b/app/assets/stylesheets/mixins/colors.scss @@ -1,6 +1,6 @@ @mixin brand-background($color: $brand, $invert-selection: true) { background-color: $color; - color: $white; + color: color-pick-contrast($color); @if $invert-selection { @include inverted-selection; @@ -29,7 +29,7 @@ &::selection, *::selection { - background-color: rgba($white, 0.99); + background-color: rgba(color-pick-contrast($brand), 0.99); color: $brand; } } diff --git a/app/assets/stylesheets/mixins/tags.scss b/app/assets/stylesheets/mixins/tags.scss index 285eaf55d..47de272a2 100644 --- a/app/assets/stylesheets/mixins/tags.scss +++ b/app/assets/stylesheets/mixins/tags.scss @@ -16,7 +16,7 @@ %tag { background: #ececec; border-radius: rem-calc(6); - color: $text; + color: color-pick-contrast(#ececec); display: inline-block; font-size: $small-font-size; margin-bottom: $line-height / 3; diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 4abdb88cf..1b6401193 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -658,7 +658,7 @@ .button-support { background: $budget; - color: #fff; + color: color-pick-contrast($budget); font-size: $base-font-size; font-weight: bold; @@ -781,7 +781,7 @@ width: rem-calc(36); &::before { - color: $text; + color: color-pick-contrast(#eee); font-family: "icons"; } } @@ -1484,7 +1484,7 @@ &:hover { background: $dark; - color: #fff; + color: color-pick-contrast($dark); text-decoration: none; } } @@ -1635,7 +1635,7 @@ &.answered { background: #f4f8ec; border: 2px solid #92ba48; - color: $text; + color: color-pick-contrast(#f4f8ec); position: relative; &::after { From 6cb4f4acde5ad99bfca3806b5e2a1d2cf1ae1d13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sun, 23 Oct 2022 01:15:14 +0200 Subject: [PATCH 5/6] Extract mixin to get a background with text contrast This way we simplify the code a bit. Note we're only using this function when variables for background colors are already defined, since that means customizing the variable using the background color will automatically change the color of the text. Customization isn't easier when using raw colors. --- .../stylesheets/admin/machine_learning/setting.scss | 3 +-- app/assets/stylesheets/admin/menu.scss | 3 +-- app/assets/stylesheets/budgets/phases.scss | 6 ++---- app/assets/stylesheets/dashboard.scss | 6 ++---- app/assets/stylesheets/layout.scss | 9 +++------ app/assets/stylesheets/milestones.scss | 3 +-- app/assets/stylesheets/mixins/colors.scss | 6 +++++- app/assets/stylesheets/participation.scss | 6 ++---- 8 files changed, 17 insertions(+), 25 deletions(-) diff --git a/app/assets/stylesheets/admin/machine_learning/setting.scss b/app/assets/stylesheets/admin/machine_learning/setting.scss index 4bd989cfb..81b243d0c 100644 --- a/app/assets/stylesheets/admin/machine_learning/setting.scss +++ b/app/assets/stylesheets/admin/machine_learning/setting.scss @@ -1,8 +1,7 @@ .admin .machine-learning-setting { .card-divider { - background: $primary-color; - color: color-pick-contrast($primary-color); + @include background-with-text-contrast($primary-color); h3 { margin-top: 0; diff --git a/app/assets/stylesheets/admin/menu.scss b/app/assets/stylesheets/admin/menu.scss index da89b804a..d458fe9f4 100644 --- a/app/assets/stylesheets/admin/menu.scss +++ b/app/assets/stylesheets/admin/menu.scss @@ -1,8 +1,7 @@ .admin-sidebar { - background: $sidebar; + @include background-with-text-contrast($sidebar); background: linear-gradient(to bottom, $sidebar 0%, #488fb5 100%); border-right: 1px solid $border; - color: color-pick-contrast($sidebar); ul { list-style-type: none; diff --git a/app/assets/stylesheets/budgets/phases.scss b/app/assets/stylesheets/budgets/phases.scss index 8cb48372b..4a2e2af77 100644 --- a/app/assets/stylesheets/budgets/phases.scss +++ b/app/assets/stylesheets/budgets/phases.scss @@ -87,8 +87,7 @@ &[aria-selected="true"], &.is-active { - background: $dark; - color: color-pick-contrast($dark); + @include background-with-text-contrast($dark); font-weight: normal; } @@ -99,8 +98,7 @@ } &.current-phase-tab a { - background: $brand-secondary; - color: color-pick-contrast($brand-secondary); + @include background-with-text-contrast($brand-secondary); padding-top: $line-height / 2; &:hover { diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss index 9c73a4df7..a42f5047a 100644 --- a/app/assets/stylesheets/dashboard.scss +++ b/app/assets/stylesheets/dashboard.scss @@ -458,8 +458,7 @@ max-width: rem-calc(600); .mail-header { - background: $pdf-primary; - color: color-pick-contrast($pdf-primary); + @include background-with-text-contrast($pdf-primary); padding: $line-height * 2; img { @@ -513,8 +512,7 @@ .dashboard-poster-preview, .dashboard-poster-pdf { .poster-header { - background: $pdf-primary; - color: color-pick-contrast($pdf-primary); + @include background-with-text-contrast($pdf-primary); h1 { text-align: left; diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 5441e0cfc..d745e38f6 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -696,8 +696,7 @@ body > header, } .top-links { - background: $dark; - color: color-pick-contrast($dark); + @include background-with-text-contrast($dark); display: flex; flex-wrap: wrap; font-size: $small-font-size; @@ -808,10 +807,9 @@ body > header, padding-bottom: 0; button { - background: $border; + @include background-with-text-contrast($border); border: 1px solid #ccc; border-left: 0; - color: color-pick-contrast($border); height: $line-height * 1.5; line-height: $line-height * 1.5; padding-top: 0; @@ -976,10 +974,9 @@ footer { } .auth-image { - background-color: $brand; + @include background-with-text-contrast($brand); background-repeat: no-repeat; background-size: cover; - color: color-pick-contrast($brand); @include breakpoint(medium) { min-height: $line-height * 42; diff --git a/app/assets/stylesheets/milestones.scss b/app/assets/stylesheets/milestones.scss index cd3f30cdf..addc2d117 100644 --- a/app/assets/stylesheets/milestones.scss +++ b/app/assets/stylesheets/milestones.scss @@ -118,9 +118,8 @@ $progress-bar-color: #fea230; } .milestone-status { - background: $budget; + @include background-with-text-contrast($budget); border-radius: rem-calc(4); - color: color-pick-contrast($budget); display: inline-block; margin-top: $line-height / 6; padding: $line-height / 4 $line-height / 2; diff --git a/app/assets/stylesheets/mixins/colors.scss b/app/assets/stylesheets/mixins/colors.scss index 17c22874b..6bd835fb8 100644 --- a/app/assets/stylesheets/mixins/colors.scss +++ b/app/assets/stylesheets/mixins/colors.scss @@ -1,6 +1,10 @@ -@mixin brand-background($color: $brand, $invert-selection: true) { +@mixin background-with-text-contrast($color) { background-color: $color; color: color-pick-contrast($color); +} + +@mixin brand-background($color: $brand, $invert-selection: true) { + @include background-with-text-contrast($color); @if $invert-selection { @include inverted-selection; diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 1b6401193..d7833a58a 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -657,8 +657,7 @@ } .button-support { - background: $budget; - color: color-pick-contrast($budget); + @include background-with-text-contrast($budget); font-size: $base-font-size; font-weight: bold; @@ -1483,8 +1482,7 @@ cursor: pointer; &:hover { - background: $dark; - color: color-pick-contrast($dark); + @include background-with-text-contrast($dark); text-decoration: none; } } From 7c740f1daa89bbb293e0e8bd373b328c1ebd8d5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sun, 23 Oct 2022 13:59:06 +0200 Subject: [PATCH 6/6] Remove duplicate HTML in dashboard mail preview We noticed this while editing the styles for this class in the previous commits. --- app/views/dashboard/mailing/index.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/dashboard/mailing/index.html.erb b/app/views/dashboard/mailing/index.html.erb index bf1f01fb9..713f85935 100644 --- a/app/views/dashboard/mailing/index.html.erb +++ b/app/views/dashboard/mailing/index.html.erb @@ -1,6 +1,6 @@ <% content_for :action_title, t("dashboard.mailing.index.title") %>
-
+
<%= image_tag "quote_before_white.png" %>

<%= proposal.title %>