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] 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 {