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] 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; } }