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;
$orbit-bullet-diameter: 0.8rem !default;
$orbit-caption-background: #eee;
$show-header-for-stacked: true !default;
@@ -123,6 +124,7 @@ $off-screen-left: -1000rem !default;
$sdg-icon-min-width: 45px !default;
$sdg-text: #fff;
$sdg-colors: (
1: #e5243b,
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-text: #434d54;
$sidebar: #245b80;
$sidebar: $admin-color;
$sidebar-hover: #25597c;
$sidebar-active: #f4fcd0;
@@ -840,7 +840,7 @@ table {
.fullscreen {
.fullscreen-container {
color: $white;
color: color-pick-contrast($admin-color);
a {
line-height: 3rem;

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

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

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

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

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

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

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

@@ -458,8 +458,7 @@
max-width: rem-calc(600);
.mail-header {
background: $pdf-primary;
color: #fff;
@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: #fff;
@include background-with-text-contrast($pdf-primary);
h1 {
text-align: left;

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

@@ -696,8 +696,7 @@ body > header,
}
.top-links {
background: $dark;
color: $white;
@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: $text;
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: $white;
@include breakpoint(medium) {
min-height: $line-height * 42;

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

@@ -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;

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

@@ -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%);
@@ -118,9 +118,8 @@ $progress-bar-color: #fea230;
}
.milestone-status {
background: $budget;
@include background-with-text-contrast($budget);
border-radius: rem-calc(4);
color: #fff;
display: inline-block;
margin-top: $line-height / 6;
padding: $line-height / 4 $line-height / 2;

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

@@ -57,7 +57,7 @@
position: relative;
&::after {
background: $white;
background: color-pick-contrast($primary-color);
border-radius: 100%;
content: "";
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;
color: $white;
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;
@@ -29,7 +33,7 @@
&::selection,
*::selection {
background-color: rgba($white, 0.99);
background-color: rgba(color-pick-contrast($brand), 0.99);
color: $brand;
}
}

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

@@ -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;

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

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

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

@@ -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;

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

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

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

@@ -13,7 +13,7 @@
a:not(.more-targets),
span {
color: $white;
color: $sdg-text;
}
@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") %>
<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">
<%= image_tag "quote_before_white.png" %>
<h1 class="inline"><%= proposal.title %></h1>