Merge pull request #1767 from overleaf/as-color-contrast

Improve colour contrast

GitOrigin-RevId: 56796839e5c2e741e85bc849399cb28d3db36976

services/web/app/src/Features/StaticPages/StaticPagesRouter.js

@@ -38,10 +38,6 @@ module.exports = {
       '/style',
       HomeController.externalPage('style_guide', 'Style Guide')
     )
-    webRouter.get(
-      '/ol-style',
-      HomeController.externalPage('ol_style_guide', 'Overleaf Style Guide')
-    )
     webRouter.get('/jobs', HomeController.externalPage('jobs', 'Jobs'))
 
     webRouter.get(

services/web/app/views/_metadata.pug

@@ -100,4 +100,4 @@ if metadata && metadata.viewport
 link(rel="icon", href="/" + settings.brandPrefix + "favicon.ico")
 link(rel="icon", sizes="192x192", href="/" + settings.brandPrefix + "touch-icon-192x192.png")
 link(rel="apple-touch-icon-precomposed", href="/" + settings.brandPrefix + "apple-touch-icon-precomposed.png")
-link(rel="mask-icon", href="/" + settings.brandPrefix + "mask-favicon.svg", color=settings.brandPrefix === 'sl-' ? "#a93529" : "#4f9c45")
+link(rel="mask-icon", href="/" + settings.brandPrefix + "mask-favicon.svg", color=settings.brandPrefix === 'sl-' ? "#a93529" : "#138A07")

services/web/public/img/ol-brand/overleaf-o.svg

@@ -1 +1 @@
-<svg width="136" height="157" xmlns="http://www.w3.org/2000/svg"><path d="M37.205 39.652C14.822 53.982 0 77.339 0 102.326 0 132.522 24.48 157 54.681 157c30.198 0 54.674-24.478 54.674-54.674 0-23.34-14.626-43.276-35.204-51.111-3.958-1.505-12.556-4.213-19.421-3.635-9.806 6.234-21.751 19.044-27.411 31.809 8.416-10.093 21.537-14.488 33.17-12.619 17.126 2.777 30.208 17.638 30.208 35.551 0 19.896-16.126 36.021-36.016 36.021-10.962 0-20.785-4.896-27.388-12.619C17.516 114.299 15 101.91 16.975 89.809c6.927-42.375 57.233-66.53 94.636-75.799-12.207 6.458-34.227 17.074-49.626 28.63 44.924 17.341 52.184-20.517 73.217-37.459C114.038-3.07 37.33-6.117 37.205 39.652z" fill="#4F9C45" fill-rule="evenodd"/></svg>
+<svg width="136" height="157" xmlns="http://www.w3.org/2000/svg"><path d="M37.205 39.652C14.822 53.982 0 77.339 0 102.326 0 132.522 24.48 157 54.681 157c30.198 0 54.674-24.478 54.674-54.674 0-23.34-14.626-43.276-35.204-51.111-3.958-1.505-12.556-4.213-19.421-3.635-9.806 6.234-21.751 19.044-27.411 31.809 8.416-10.093 21.537-14.488 33.17-12.619 17.126 2.777 30.208 17.638 30.208 35.551 0 19.896-16.126 36.021-36.016 36.021-10.962 0-20.785-4.896-27.388-12.619C17.516 114.299 15 101.91 16.975 89.809c6.927-42.375 57.233-66.53 94.636-75.799-12.207 6.458-34.227 17.074-49.626 28.63 44.924 17.341 52.184-20.517 73.217-37.459C114.038-3.07 37.33-6.117 37.205 39.652z" fill="#138A07" fill-rule="evenodd"/></svg>

services/web/public/img/other-brands/logo_google.svg

@@ -1 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 510.2"><title>Shape-Copy</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path id="Shape-Copy" d="M254.85,303.57v-94.9H493.62C497.19,224.74,500,239.8,500,261c0,145.66-97.7,249.23-244.9,249.23C114.29,510.2,0,395.92,0,255.1S114.29,0,255.1,0C324,0,381.63,25.26,425.77,66.58L353.32,137c-18.37-17.35-50.51-37.76-98.21-37.76-84.44,0-153.32,70.15-153.32,156.12S170.66,411.48,255.1,411.48c97.7,0,133.67-67.6,140.31-107.65H254.85Z" fill="#fff"/></g></g></svg>
+<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M21.77 11.241c0-.901-.076-1.559-.238-2.241H11v4.068h6.182c-.124 1.011-.797 2.534-2.293 3.557l-.021.136 3.33 2.521.23.023c2.12-1.913 3.341-4.726 3.341-8.064" fill="#4285F4"/>
+  <path d="M11.021 21.794c3.03 0 5.572-.974 7.43-2.655l-3.54-2.68c-.948.646-2.22 1.096-3.89 1.096A6.739 6.739 0 0 1 4.64 13l-.132.01-3.463 2.62-.045.123c1.845 3.58 5.634 6.041 10.021 6.041z" fill="#34A853"/>
+  <path d="M4.836 13.142a6.61 6.61 0 0 1-.374-2.168c0-.755.137-1.486.362-2.168l-.007-.145L1.311 6l-.114.053A10.77 10.77 0 0 0 0 10.974c0 1.766.436 3.435 1.197 4.921l3.64-2.753" fill="#FBBC05"/>
+  <path d="M11.021 4.239c2.107 0 3.528.889 4.338 1.632l3.166-3.02C16.581 1.083 14.05 0 11.021 0 6.634 0 2.845 2.46 1 6.041l3.627 2.753a6.767 6.767 0 0 1 6.394-4.555" fill="#EB4335"/>
+</svg>

services/web/public/img/other-brands/logo_google_alt.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 510.2"><title>Shape-Copy</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path id="Shape-Copy" d="M254.85,303.57v-94.9H493.62C497.19,224.74,500,239.8,500,261c0,145.66-97.7,249.23-244.9,249.23C114.29,510.2,0,395.92,0,255.1S114.29,0,255.1,0C324,0,381.63,25.26,425.77,66.58L353.32,137c-18.37-17.35-50.51-37.76-98.21-37.76-84.44,0-153.32,70.15-153.32,156.12S170.66,411.48,255.1,411.48c97.7,0,133.67-67.6,140.31-107.65H254.85Z" fill="#4885ED"/></g></g></svg>

services/web/public/img/other-brands/logo_google_white.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M21.77 11.241c0-.901-.076-1.559-.238-2.241H11v4.068h6.182c-.124 1.011-.797 2.534-2.293 3.557l-.021.136 3.33 2.521.23.023c2.12-1.913 3.341-4.726 3.341-8.064" fill="#fff"/>
+  <path d="M11.021 21.794c3.03 0 5.572-.974 7.43-2.655l-3.54-2.68c-.948.646-2.22 1.096-3.89 1.096A6.739 6.739 0 0 1 4.64 13l-.132.01-3.463 2.62-.045.123c1.845 3.58 5.634 6.041 10.021 6.041z" fill="#fff"/>
+  <path d="M4.836 13.142a6.61 6.61 0 0 1-.374-2.168c0-.755.137-1.486.362-2.168l-.007-.145L1.311 6l-.114.053A10.77 10.77 0 0 0 0 10.974c0 1.766.436 3.435 1.197 4.921l3.64-2.753" fill="#fff"/>
+  <path d="M11.021 4.239c2.107 0 3.528.889 4.338 1.632l3.166-3.02C16.581 1.083 14.05 0 11.021 0 6.634 0 2.845 2.46 1 6.041l3.627 2.753a6.767 6.767 0 0 1 6.394-4.555" fill="#fff"/>
+</svg>

services/web/public/img/other-brands/logo_orcid.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M289.06,181.64H242.77V336.72h47.85c68.16,0,83.79-51.76,83.79-77.54C374.41,217.19,347.66,181.64,289.06,181.64Z" fill="#fff"/><path d="M250,0C111.91,0,0,111.91,0,250S111.91,500,250,500,500,388.09,500,250,388.09,0,250,0ZM168.55,249V363.67H138.48V154.49h30.08Zm-15-118.36a19.73,19.73,0,1,1,19.73-19.73A19.8,19.8,0,0,1,153.52,130.66Zm140.82,233.2H212.7V154.49h81.25c77.34,0,111.33,55.27,111.33,104.69C405.27,312.89,363.28,363.87,294.34,363.87Z" fill="#fff"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M289.06,181.64H242.77V336.72h47.85c68.16,0,83.79-51.76,83.79-77.54C374.41,217.19,347.66,181.64,289.06,181.64Z" fill="#95ba2e"/><path d="M250,0C111.91,0,0,111.91,0,250S111.91,500,250,500,500,388.09,500,250,388.09,0,250,0ZM168.55,249V363.67H138.48V154.49h30.08Zm-15-118.36a19.73,19.73,0,1,1,19.73-19.73A19.8,19.8,0,0,1,153.52,130.66Zm140.82,233.2H212.7V154.49h81.25c77.34,0,111.33,55.27,111.33,104.69C405.27,312.89,363.28,363.87,294.34,363.87Z" fill="#95ba2e"/></g></g></svg>

services/web/public/img/other-brands/logo_orcid_alt.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M289.06,181.64H242.77V336.72h47.85c68.16,0,83.79-51.76,83.79-77.54C374.41,217.19,347.66,181.64,289.06,181.64Z" fill="#95ba2e"/><path d="M250,0C111.91,0,0,111.91,0,250S111.91,500,250,500,500,388.09,500,250,388.09,0,250,0ZM168.55,249V363.67H138.48V154.49h30.08Zm-15-118.36a19.73,19.73,0,1,1,19.73-19.73A19.8,19.8,0,0,1,153.52,130.66Zm140.82,233.2H212.7V154.49h81.25c77.34,0,111.33,55.27,111.33,104.69C405.27,312.89,363.28,363.87,294.34,363.87Z" fill="#95ba2e"/></g></g></svg>

services/web/public/img/other-brands/logo_orcid_white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M289.06,181.64H242.77V336.72h47.85c68.16,0,83.79-51.76,83.79-77.54C374.41,217.19,347.66,181.64,289.06,181.64Z" fill="#fff"/><path d="M250,0C111.91,0,0,111.91,0,250S111.91,500,250,500,500,388.09,500,250,388.09,0,250,0ZM168.55,249V363.67H138.48V154.49h30.08Zm-15-118.36a19.73,19.73,0,1,1,19.73-19.73A19.8,19.8,0,0,1,153.52,130.66Zm140.82,233.2H212.7V154.49h81.25c77.34,0,111.33,55.27,111.33,104.69C405.27,312.89,363.28,363.87,294.34,363.87Z" fill="#fff"/></g></g></svg>

services/web/public/img/other-brands/logo_twitter.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 406.28"><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M157.24,406.28c188.68,0,291.88-156.32,291.88-291.88,0-4.44,0-8.86-.3-13.26A208.72,208.72,0,0,0,500,48a204.76,204.76,0,0,1-58.92,16.14,102.94,102.94,0,0,0,45.1-56.74A205.58,205.58,0,0,1,421,32.34,102.68,102.68,0,0,0,246.22,125.9,291.24,291.24,0,0,1,34.8,18.72,102.66,102.66,0,0,0,66.56,155.66,101.82,101.82,0,0,1,20,142.82v1.3a102.62,102.62,0,0,0,82.3,100.56A102.42,102.42,0,0,1,56,246.44a102.7,102.7,0,0,0,95.84,71.24,205.84,205.84,0,0,1-127.4,44A208.82,208.82,0,0,1,0,360.2a290.42,290.42,0,0,0,157.24,46" fill="#fff"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 406.28"><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M157.24,406.28c188.68,0,291.88-156.32,291.88-291.88,0-4.44,0-8.86-.3-13.26A208.72,208.72,0,0,0,500,48a204.76,204.76,0,0,1-58.92,16.14,102.94,102.94,0,0,0,45.1-56.74A205.58,205.58,0,0,1,421,32.34,102.68,102.68,0,0,0,246.22,125.9,291.24,291.24,0,0,1,34.8,18.72,102.66,102.66,0,0,0,66.56,155.66,101.82,101.82,0,0,1,20,142.82v1.3a102.62,102.62,0,0,0,82.3,100.56A102.42,102.42,0,0,1,56,246.44a102.7,102.7,0,0,0,95.84,71.24,205.84,205.84,0,0,1-127.4,44A208.82,208.82,0,0,1,0,360.2a290.42,290.42,0,0,0,157.24,46" fill="#1DA1F2"/></g></g></svg>

services/web/public/img/other-brands/logo_twitter_white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 406.28"><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M157.24,406.28c188.68,0,291.88-156.32,291.88-291.88,0-4.44,0-8.86-.3-13.26A208.72,208.72,0,0,0,500,48a204.76,204.76,0,0,1-58.92,16.14,102.94,102.94,0,0,0,45.1-56.74A205.58,205.58,0,0,1,421,32.34,102.68,102.68,0,0,0,246.22,125.9,291.24,291.24,0,0,1,34.8,18.72,102.66,102.66,0,0,0,66.56,155.66,101.82,101.82,0,0,1,20,142.82v1.3a102.62,102.62,0,0,0,82.3,100.56A102.42,102.42,0,0,1,56,246.44a102.7,102.7,0,0,0,95.84,71.24,205.84,205.84,0,0,1-127.4,44A208.82,208.82,0,0,1,0,360.2a290.42,290.42,0,0,0,157.24,46" fill="#fff"/></g></g></svg>

services/web/public/stylesheets/app/homepage.less

@@ -165,8 +165,15 @@
 	}
 }
 
-.hp-login-btn {
+.hp-login-btn when (@is-overleaf = true) {
+	.login-btn;
 	min-width: 220px;
+
+	background-color: @ol-blue-gray-3;
+
+	&:hover, &:focus, &:active {
+		background-color: darken(@ol-blue-gray-3, 8%);
+	}
 }
 
 .hp-register-form-email-pwd {

services/web/public/stylesheets/app/login-register.less

@@ -1,40 +1,9 @@
 @brand-ieee-color       : #00629B;
-@brand-google-color     : #4885ED;
+@brand-google-color     : #276fea; // Not the "official" color but modified for a11y
 @brand-twitter-color    : #1DA1F2;
 @brand-orcid-color      : #A6CE39;
 @brand-sharelatex-color : #A93529;
 
-.make-login-register-brand-btn(@bg-color) {
-	background-color: @bg-color;
-	text-indent: -10px;
-	padding-left: 0;
-	padding-right: 0;
-	&:focus,
-	&:hover {
-		background-color: darken(@bg-color, 8%);
-	}
-	&:active {
-		background-color: darken(@bg-color, 16%);
-	} 
-}
-
-.make-login-register-brand-btn-alt(@color) {
-	background-color: #FFF;
-	color: @color;
-	text-indent: -10px;
-	padding-left: 0;
-	padding-right: 0;
-	&:focus,
-	&:hover {
-		background-color: #FFF;
-		color: darken(@color, 8%);
-	}
-	&:active {
-		background-color: #FFF;
-		color: darken(@color, 16%);
-	} 
-}
-
 .login-register-container {
 	max-width: 400px;
 	margin: 0 auto;
@@ -120,64 +89,53 @@
 			}
 		}
 
-		.login-btn-ieee {
-			.make-login-register-brand-btn(@brand-ieee-color);
+		.login-btn {
+			.btn;
+			.btn-default;
+			position: relative;
+			padding-left: 20px;
+			padding-right: 0;
 		}
 
-		.login-btn-google {
-			.make-login-register-brand-btn(@brand-google-color);
-		} 
-
-		.login-btn-google-alt {
-			.make-login-register-brand-btn-alt(@brand-google-color);
-		} 
-
-		.login-btn-twitter {
-			.make-login-register-brand-btn(@brand-twitter-color);
-		} 
-
-		.login-btn-orcid {
-			.make-login-register-brand-btn(@brand-orcid-color);
-		} 
-
-		.login-btn-orcid-alt {
-			.make-login-register-brand-btn-alt(darken(@brand-orcid-color, 6%));
-		} 
-
 		.login-btn-sharelatex {
-			.make-login-register-brand-btn(@brand-sharelatex-color);
+			background-color: @brand-sharelatex-color;
+			&:focus,
+			&:hover {
+				background-color: darken(@brand-sharelatex-color, 8%);
+			}
+			&:active {
+				background-color: darken(@brand-sharelatex-color, 16%);
+			}
 		} 
-			.login-btn-icon {
-				display: inline-block;
-				float: left;
-				margin-left: 5px;
-				background: url(/img/brand/lion.svg) center/contain no-repeat;
-				width: 24px;
 
+			.login-btn-icon {
+				position: absolute;
+				top: 4px;
+				left: 4px;
+				background: #FFF url(/img/brand/lion.svg) center/20px no-repeat;
+				border-radius: 99999px;
+				width: 26px;
+				height: 26px;
+			
 				&::before {
 					content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
 				}
 			}
+
 			.login-btn-icon-ieee {
 				background-image: url(/img/other-brands/logo_ieee.svg);
 			}
 			.login-btn-icon-google {
 				background-image: url(/img/other-brands/logo_google.svg);
 			}
-			.login-btn-icon-google-alt {
-				background-image: url(/img/other-brands/logo_google_alt.svg);
-			}
 			.login-btn-icon-twitter {
 				background-image: url(/img/other-brands/logo_twitter.svg);
 			}
 			.login-btn-icon-orcid {
 				background-image: url(/img/other-brands/logo_orcid.svg);
 			}
-			.login-btn-icon-orcid-alt {
-				background-image: url(/img/other-brands/logo_orcid_alt.svg);
-			}
 			.login-btn-icon-sharelatex {
-				background-image: url(/img/other-brands/logo_sharelatex.svg);
+				background-size: 22px;
 			}
 
 		.login-register-header-heading {

services/web/public/stylesheets/components/daterange-picker.less

@@ -34,7 +34,7 @@
 @daterangepicker-in-range-bg-color:          #ebf4f8;
 
 @daterangepicker-active-color:               #fff;
-@daterangepicker-active-bg-color:            #4F9C45;
+@daterangepicker-active-bg-color:            #138A07;
 @daterangepicker-active-border-color:        transparent;
 
 @daterangepicker-unselected-color:           #999;

services/web/public/stylesheets/core/ol-light-variables.less

@@ -7,9 +7,9 @@
 @ol-blue-gray-5 : #2C3645;
 @ol-blue-gray-6 : #1E2530;
 
-@ol-green       : #4F9C45;
-@ol-dark-green  : #1C5B26;
-@ol-blue        : #4B7FD1;
+@ol-green       : #138A07;
+@ol-dark-green  : #004A0E;
+@ol-blue        : #3E70BB;
 @ol-dark-blue   : #2857A1;
 @ol-red         : #C9453E;
 @ol-dark-red    : #A6312B;

services/web/public/stylesheets/core/ol-variables.less

@@ -14,9 +14,9 @@
 @ol-blue-gray-5 : #2C3645;
 @ol-blue-gray-6 : #1E2530;
 
-@ol-green       : #4F9C45;
-@ol-dark-green  : #1C5B26;
-@ol-blue        : #4B7FD1;
+@ol-green       : #138A07;
+@ol-dark-green  : #004A0E;
+@ol-blue        : #3E70BB;
 @ol-dark-blue   : #2857A1;
 @ol-red         : #C9453E;
 @ol-dark-red    : #A6312B;
@@ -55,6 +55,7 @@
 @link-hover-color-alt   : @ol-dark-green;
 @hr-border              : @ol-blue-gray-1;
 @hr-border-alt          : @gray-lighter;
+@blockquote-small-color: @ol-blue-gray-3;
 
 // Button colors and sizing
 @btn-border-width        : 0;
@@ -114,7 +115,7 @@
 
 // Tags
 @tag-border-radius       : 9999px;
-@tag-color               : lighten(@ol-blue-gray-3, 10%);
+@tag-color               : @ol-blue-gray-4;
 @tag-bg-color            : @ol-blue-gray-1;
 @tag-bg-hover-color      : darken(@ol-blue-gray-1, 5%);
 @tag-top-adjustment      : 2px;
@@ -353,7 +354,7 @@
 @history-toolbar-bg-color                 : @editor-toolbar-bg;
 @history-toolbar-color                    : #FFF;
 @history-file-badge-bg                    : rgba(255, 255, 255, .25);
-@history-file-badge-color:                : @file-tree-item-color;
+@history-file-badge-color                 : @file-tree-item-color;
 // Screens
 // added -size to not conflict with common_variables
 @screen-size-sm-max                   : 767px;