consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #5019 from consul/automatic_color_contrast

Browse Source 
Base text color on background color when possible
This commit is contained in:
Javi Martín
2022-10-28 14:23:53 +02:00
committed by GitHub
parent 48391eb668 7c740f1daa
commit 7b4e7c6e9c
17 changed files with 35 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/stylesheets/_consul_settings.scss
View File

@@ -43,6 +43,7 @@ $small-font-size: rem-calc(14) !default;
$abbr-underline: none !default; $abbr-underline: none !default;
$orbit-bullet-diameter: 0.8rem !default; $orbit-bullet-diameter: 0.8rem !default;
$orbit-caption-background: #eee;
$show-header-for-stacked: true !default; $show-header-for-stacked: true !default;
@@ -123,6 +124,7 @@ $off-screen-left: -1000rem !default;
$sdg-icon-min-width: 45px !default; $sdg-icon-min-width: 45px !default;
$sdg-text: #fff;
$sdg-colors: ( $sdg-colors: (
1: #e5243b, 1: #e5243b,
2: #dda63a, 2: #dda63a,

4
app/assets/stylesheets/admin.scss
View File

@@ -21,7 +21,7 @@ $admin-border: 2px solid $admin-border-color;
$admin-color: #245b80; $admin-color: #245b80;
$admin-text: #434d54; $admin-text: #434d54;
$sidebar: #245b80; $sidebar: $admin-color;
$sidebar-hover: #25597c; $sidebar-hover: #25597c;
$sidebar-active: #f4fcd0; $sidebar-active: #f4fcd0;
@@ -840,7 +840,7 @@ table {
.fullscreen { .fullscreen {
.fullscreen-container { .fullscreen-container {
color: $white; color: color-pick-contrast($admin-color);
a { a {
line-height: 3rem; line-height: 3rem;

3
app/assets/stylesheets/admin/machine_learning/setting.scss
View File

@@ -1,8 +1,7 @@
.admin .machine-learning-setting { .admin .machine-learning-setting {
.card-divider { .card-divider {
background: $primary-color; @include background-with-text-contrast($primary-color);
color: $white;
h3 { h3 {
margin-top: 0; margin-top: 0;

5
app/assets/stylesheets/admin/menu.scss
View File

@@ -1,8 +1,7 @@
.admin-sidebar { .admin-sidebar {
background: $sidebar; @include background-with-text-contrast($sidebar);
background: linear-gradient(to bottom, #245b80 0%, #488fb5 100%); background: linear-gradient(to bottom, $sidebar 0%, #488fb5 100%);
border-right: 1px solid $border; border-right: 1px solid $border;
color: $white;
ul { ul {
list-style-type: none; list-style-type: none;

6
app/assets/stylesheets/budgets/phases.scss
View File

@@ -87,8 +87,7 @@
&[aria-selected="true"], &[aria-selected="true"],
&.is-active { &.is-active {
background: $dark; @include background-with-text-contrast($dark);
color: $white;
font-weight: normal; font-weight: normal;
} }
@@ -99,8 +98,7 @@
} }
&.current-phase-tab a { &.current-phase-tab a {
background: $brand-secondary; @include background-with-text-contrast($brand-secondary);
color: $white;
padding-top: $line-height / 2; padding-top: $line-height / 2;
&:hover { &:hover {

6
app/assets/stylesheets/dashboard.scss
View File

@@ -458,8 +458,7 @@
max-width: rem-calc(600); max-width: rem-calc(600);
.mail-header { .mail-header {
background: $pdf-primary; @include background-with-text-contrast($pdf-primary);
color: #fff;
padding: $line-height * 2; padding: $line-height * 2;
img { img {
@@ -513,8 +512,7 @@
.dashboard-poster-preview, .dashboard-poster-preview,
.dashboard-poster-pdf { .dashboard-poster-pdf {
.poster-header { .poster-header {
background: $pdf-primary; @include background-with-text-contrast($pdf-primary);
color: #fff;
h1 { h1 {
text-align: left; text-align: left;

9
app/assets/stylesheets/layout.scss
View File

@@ -696,8 +696,7 @@ body > header,
} }
.top-links { .top-links {
background: $dark; @include background-with-text-contrast($dark);
color: $white;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-size: $small-font-size; font-size: $small-font-size;
@@ -808,10 +807,9 @@ body > header,
padding-bottom: 0; padding-bottom: 0;
button { button {
background: $border; @include background-with-text-contrast($border);
border: 1px solid #ccc; border: 1px solid #ccc;
border-left: 0; border-left: 0;
color: $text;
height: $line-height * 1.5; height: $line-height * 1.5;
line-height: $line-height * 1.5; line-height: $line-height * 1.5;
padding-top: 0; padding-top: 0;
@@ -976,10 +974,9 @@ footer {
} }
.auth-image { .auth-image {
background-color: $brand; @include background-with-text-contrast($brand);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
color: $white;
@include breakpoint(medium) { @include breakpoint(medium) {
min-height: $line-height * 42; min-height: $line-height * 42;

2
app/assets/stylesheets/layout/locale_switcher.scss
View File

@@ -29,7 +29,7 @@
background: #001d33; background: #001d33;
border: 0; border: 0;
border-radius: rem-calc(4); border-radius: rem-calc(4);
color: #fff; color: color-pick-contrast(#001d33);
font-size: $small-font-size; font-size: $small-font-size;
height: $line-height; height: $line-height;
margin-bottom: 0; margin-bottom: 0;

5
app/assets/stylesheets/milestones.scss
View File

@@ -23,7 +23,7 @@ $progress-bar-color: #fea230;
} }
.progress-meter-text { .progress-meter-text {
color: #000; color: color-pick-contrast($progress-bar-background);
right: 12px; right: 12px;
text-align: right; text-align: right;
transform: translate(0%, -50%); transform: translate(0%, -50%);
@@ -118,9 +118,8 @@ $progress-bar-color: #fea230;
} }
.milestone-status { .milestone-status {
background: $budget; @include background-with-text-contrast($budget);
border-radius: rem-calc(4); border-radius: rem-calc(4);
color: #fff;
display: inline-block; display: inline-block;
margin-top: $line-height / 6; margin-top: $line-height / 6;
padding: $line-height / 4 $line-height / 2; padding: $line-height / 4 $line-height / 2;

2
app/assets/stylesheets/mixins/buttons.scss
View File

@@ -57,7 +57,7 @@
position: relative; position: relative;
&::after { &::after {
background: $white; background: color-pick-contrast($primary-color);
border-radius: 100%; border-radius: 100%;
content: ""; content: "";
display: block; display: block;

10
app/assets/stylesheets/mixins/colors.scss
View File

@@ -1,6 +1,10 @@
@mixin brand-background($color: $brand, $invert-selection: true) { @mixin background-with-text-contrast($color) {
background-color: $color; background-color: $color;
color: $white; color: color-pick-contrast($color);
}
@mixin brand-background($color: $brand, $invert-selection: true) {
@include background-with-text-contrast($color);
@if $invert-selection { @if $invert-selection {
@include inverted-selection; @include inverted-selection;
@@ -29,7 +33,7 @@
&::selection, &::selection,
*::selection { *::selection {
background-color: rgba($white, 0.99); background-color: rgba(color-pick-contrast($brand), 0.99);
color: $brand; color: $brand;
} }
} }

2
app/assets/stylesheets/mixins/tags.scss
View File

@@ -16,7 +16,7 @@
%tag { %tag {
background: #ececec; background: #ececec;
border-radius: rem-calc(6); border-radius: rem-calc(6);
color: $text; color: color-pick-contrast(#ececec);
display: inline-block; display: inline-block;
font-size: $small-font-size; font-size: $small-font-size;
margin-bottom: $line-height / 3; margin-bottom: $line-height / 3;

15
app/assets/stylesheets/participation.scss
View File

@@ -657,8 +657,7 @@
} }
.button-support { .button-support {
background: $budget; @include background-with-text-contrast($budget);
color: #fff;
font-size: $base-font-size; font-size: $base-font-size;
font-weight: bold; font-weight: bold;
@@ -781,7 +780,7 @@
width: rem-calc(36); width: rem-calc(36);
&::before { &::before {
color: $text; color: color-pick-contrast(#eee);
font-family: "icons"; font-family: "icons";
} }
} }
@@ -1461,11 +1460,6 @@
position: relative; position: relative;
} }
.orbit-caption {
background: #eee;
color: $text;
}
.orbit-next, .orbit-next,
.orbit-previous { .orbit-previous {
background: rgba(34, 34, 34, 0.25); background: rgba(34, 34, 34, 0.25);
@@ -1488,8 +1482,7 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: $dark; @include background-with-text-contrast($dark);
color: #fff;
text-decoration: none; text-decoration: none;
} }
} }
@@ -1640,7 +1633,7 @@
&.answered { &.answered {
background: #f4f8ec; background: #f4f8ec;
border: 2px solid #92ba48; border: 2px solid #92ba48;
color: $text; color: color-pick-contrast(#f4f8ec);
position: relative; position: relative;
&::after { &::after {

2
app/assets/stylesheets/sdg/goals/show.scss
View File

@@ -4,7 +4,7 @@
> header { > header {
align-items: center; align-items: center;
color: #fff; color: $sdg-text;
display: flex; display: flex;
margin: $line-height / 2 0; margin: $line-height / 2 0;
text-shadow: 0 0 1px $black; text-shadow: 0 0 1px $black;

4
app/assets/stylesheets/sdg/related_list_selector.scss
View File

@@ -6,7 +6,7 @@
} }
.amsify-suggestags-area .amsify-select-tag { .amsify-suggestags-area .amsify-select-tag {
color: $white; color: $sdg-text;
@each $code, $color in $sdg-colors { @each $code, $color in $sdg-colors {
&[data-val^="#{$code}"] { &[data-val^="#{$code}"] {
@@ -72,7 +72,7 @@
} }
.remove-tag { .remove-tag {
color: $white; color: $sdg-text;
} }
h3 { h3 {

2
app/assets/stylesheets/sdg/tag_list.scss
View File

@@ -13,7 +13,7 @@
a:not(.more-targets), a:not(.more-targets),
span { span {
color: $white; color: $sdg-text;
} }
@each $code, $color in $sdg-colors { @each $code, $color in $sdg-colors {

2
app/views/dashboard/mailing/index.html.erb
View File

@@ -1,6 +1,6 @@
<% content_for :action_title, t("dashboard.mailing.index.title") %> <% content_for :action_title, t("dashboard.mailing.index.title") %>
<div class="row expanded"> <div class="row expanded">
<div class="small-12 medium-9 dashboard-mail-preview column dashboard-mail-preview"> <div class="small-12 medium-9 column dashboard-mail-preview">
<div class="mail-header text-left"> <div class="mail-header text-left">
<%= image_tag "quote_before_white.png" %> <%= image_tag "quote_before_white.png" %>
<h1 class="inline"><%= proposal.title %></h1> <h1 class="inline"><%= proposal.title %></h1>