Update Jetpack button and card styles to match WordPress 5.3 (#13729)

* Update Jetpack button and card styles to match WordPress 5.3 * Update button and card styles * fixed margins, border radius, visual display bugs, matched focus styles * Updated buttons and cards in JITM and connect flows * Add back RTL files Co-authored-by: Michael Arestad <marestad@gmail.com>
Automattic · Oct 24, 2019 · f82725b · f82725b
1 parent 07164de
commit f82725b
Show file tree

Hide file tree

Showing 19 changed files with 226 additions and 186 deletions.
diff --git a/_inc/client/at-a-glance/style.scss b/_inc/client/at-a-glance/style.scss
@@ -1,5 +1,7 @@
 // This document contains styles that influence the styles of Stats & At a Glance, overall.
 // For more precise styles, dig into the styles of each component. ie. dash-item
+@import '../scss/calypso-colors';
+
 .jp-at-a-glance {
 	margin-bottom: rem( 48px );
 }
@@ -78,13 +80,13 @@
 	margin: rem( 32px ) 0 0;
 
 	@include breakpoint( "<480px" ) {
-		box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px lighten( $gray, 30% );
+		box-shadow: 0 0 0 1px $light-gray-700;
 	}
 }
 
 .jp-at-a-glance__stats-summary {
 	text-align: center;
-	border-top: 1px $gray-light solid;
+	border-bottom: 1px $light-gray-700 solid;
 
 	@include breakpoint( ">660px" ) {
 		flex-wrap: nowrap;
@@ -100,7 +102,7 @@
 .jp-at-a-glance__stats-summary-bestday {
 	flex-basis: 25%;
 	padding: rem( 16px );
-	box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px lighten( $gray, 30% );
+	box-shadow: 0 0 0 1px $light-gray-700;
 }
 
 .jp-at-a-glance__stats-summary-today {
@@ -125,10 +127,10 @@
 .jp-at-a-glance__stats-summary-alltime {
 	flex-basis: 50%;
 	padding: rem( 16px );
-	box-shadow: 0 0 0 1px rgba(200, 215, 225, 0.5), 0 1px 2px lighten( $gray, 30% );
+	box-shadow: 0 0 0 1px $light-gray-700;
 
 	@include breakpoint( ">660px" ) {
-		max-width: 40%; // for IE 10 since it doesn't recognize flex-basis
+		max-width: 50%; // for IE 10 since it doesn't recognize flex-basis
 		display: flex;
 		flex-grow: 1;
 		flex-shrink: 1;

diff --git a/_inc/client/components/button-group/style.scss b/_inc/client/components/button-group/style.scss
@@ -9,20 +9,18 @@
 			// fixes focus styles in stacking context
 			position: relative;
 			z-index: z-index( 'button-group-parent', '.button-group .button:focus' );
-			box-shadow: inset 1px 0 0 $blue-medium, 0 0 0 2px $blue-light;
 		}
 		&.is-primary:focus {
-			box-shadow: inset 1px 0 0 $blue-dark, 0 0 0 2px $blue-light;
+			box-shadow:
+				0 0 0 1px $white,
+				0 0 0 3px $blue-medium-dark;
 		}
 		&.is-scary:focus {
 			box-shadow: inset 1px 0 0 $alert-red, 0 0 0 2px lighten( $alert-red, 20% );
 		}
 		&.is-primary.is-scary:focus {
 			box-shadow: inset 1px 0 0 darken( $alert-red, 30% ), 0 0 0 2px lighten( $alert-red, 20% );
 		}
-		&:first-child:focus {
-			box-shadow: 0 0 0 2px $blue-light;
-		}
 		&.is-scary:first-child:focus {
 			box-shadow: 0 0 0 2px lighten( $alert-red, 20% );
 		}

diff --git a/_inc/client/components/button/style.scss b/_inc/client/components/button/style.scss
@@ -6,11 +6,11 @@
 // ==========================================================================
 
 .dops-button {
-	background: $white;
-	border-color: lighten( $gray, 20% );
+	background: $blue-grey-light;
+	border-color: $blue-medium-dark;
 	border-style: solid;
-	border-width: 1px 1px 2px;
-	color: $gray-dark;
+	border-width: 1px;
+	color: $blue-medium-dark;
 	cursor: pointer;
 	display: inline-block;
 	margin: 0;
@@ -23,38 +23,30 @@
 	vertical-align: top;
 	box-sizing: border-box;
 	font-size: 14px;
-	line-height: 21px;
 	border-radius: 4px;
 	padding: 7px 14px 9px;
 	-webkit-appearance: none;
 	appearance: none;
 
 	&:hover {
-		border-color: lighten( $gray, 10% );
-		color: $gray-dark;
-	}
-	&:active {
-		border-width: 2px 1px 1px;
+		background: #f1f1f1;
+		border-color: $blue-grey-dark;
+		color: $blue-grey-dark;
 	}
 	&[disabled],
 	&:disabled {
 		color: lighten( $gray, 30% );
 		background: $white;
 		border-color: lighten( $gray, 30% );
 		cursor: default;
-
-		&:active {
-			border-width: 1px 1px 2px;
-		}
 	}
 	&:focus {
-		outline: 0;
-		border-color: $blue-medium;
-		box-shadow: 0 0 0 2px $blue-light;
+		background: $white;
+		border-color: $blue-medium-dark;
+		box-shadow: 0 0 0 1px $blue-medium-dark;
 	}
 	&.is-compact {
 		padding: 7px;
-		color: darken( $gray, 10% );
 		font-size: 11px;
 		line-height: 1;
 		text-transform: uppercase;
@@ -94,14 +86,20 @@
 // Primary buttons
 .dops-button.is-primary {
 	background: $blue-medium;
-	border-color: $blue-wordpress;
+	border-color: $blue-medium;
 	color: $white;
 
 	&:hover,
 	&:focus {
-		border-color: $blue-dark;
+		border-color: $blue-medium-dark;
+		background: $blue-medium-dark;
 		color: $white;
 	}
+	&:focus {
+		box-shadow:
+			0 0 0 1px $white,
+			0 0 0 3px $blue-medium-dark;
+	}
 	&[disabled],
 	&:disabled {
 		background: tint( $blue-light, 50% );

diff --git a/_inc/client/components/card/style.scss b/_inc/client/components/card/style.scss
@@ -17,8 +17,9 @@ $section-border: #DDDDDD;
 	padding: 16px;
 	box-sizing: border-box;
 	background: $white;
-	box-shadow: 0 0 0 1px transparentize( lighten( $gray, 20% ), .5 ),
-		0 1px 2px lighten( $gray, 30% );
+	box-shadow:
+		0 0 0 1px $light-gray-700,
+		0 1px 1px 1px  rgba(0,0,0,.04);
 
 	@include clear-fix;
 
@@ -65,4 +66,3 @@ a.dops-card:focus {
 		color: $link-highlight;
 	}
 }
-
diff --git a/_inc/client/components/dash-item/style.scss b/_inc/client/components/dash-item/style.scss
@@ -1,3 +1,5 @@
+@import '../../scss/calypso-colors';
+
 .jp-dash-item {
 	.jp-dash-item__content a {
 		font-style: italic;
@@ -33,7 +35,7 @@
 	font-weight: 500;
 	font-size: rem( 32px );
 	display: inline-block;
-	border: 1px solid $dashboard-number-border;
+	border: 1px solid $light-gray-700;
 	border-radius: 4px;
 	padding: 0px 4px;
 	min-width: 36px;

diff --git a/_inc/client/components/masthead/style.scss b/_inc/client/components/masthead/style.scss
@@ -1,8 +1,11 @@
+@import '../../scss/calypso-colors';
+
 .jp-masthead {
 	background-color: $white;
 	text-align: center;
-	box-shadow: 0 1px 0 transparentize( lighten( $gray, 20% ), .5 ),
-		0 1px 2px lighten( $gray, 30% );
+	box-shadow:
+		0 1px 0 $light-gray-700,
+		0 1px 1px 1px  rgba(0,0,0,.04);
 
 	@media (max-width: rem( 782px ) ) {
 		padding: 0 rem( 24px );

diff --git a/_inc/client/components/section-nav/style.scss b/_inc/client/components/section-nav/style.scss
@@ -17,8 +17,9 @@
 	margin: 0 0 17px 0;
 	background: $white;
 	box-sizing: border-box;
-	box-shadow: 0 0 0 1px transparentize( lighten( $gray, 20% ), .5 ),
-		0 1px 2px lighten( $gray, 30% );
+	box-shadow:
+		0 0 0 1px $light-gray-700,
+		0 1px 1px 1px  rgba(0,0,0,.04);
 
 	&.is-empty .dops-section-nav__panel {
 		visibility: hidden;
@@ -280,7 +281,7 @@
 
 	.is-selected & {
 		color: $white;
-		background-color: $blue-medium;
+		background-color: $blue-medium-dark;
 	}
 
 	&:focus {
@@ -300,9 +301,13 @@
 		}
 	}
 
+	&:hover {
+		color: $blue-grey-dark;
+	}
+
 	.notouch & {
 		&:hover {
-			color: $blue-medium;
+			color: $blue-medium-dark;
 		}
 	}
 
@@ -316,11 +321,11 @@
 		display: block;
 		width: auto;
 		padding: 16px 16px 14px 16px;
-		color: $blue-wordpress;
+		color: $blue-medium-dark;
 		font-weight: 400;
 
 		&:visited {
-			color: $blue-wordpress;
+			color: $blue-medium-dark;
 		}
 
 		.is-selected & {

diff --git a/_inc/client/my-plan/style.scss b/_inc/client/my-plan/style.scss
@@ -1,3 +1,5 @@
+@import '../scss/calypso-colors';
+
 .jp-landing__plans.dops-card {
 	padding: 0;
 }
@@ -56,8 +58,9 @@
 	box-sizing: border-box;
 	margin: rem( 8px );
 	background-color: $white;
-	box-shadow: 0 0 0 1px transparentize( lighten( $gray, 20% ), .5 ),
-		0 1px 2px lighten( $gray, 30% );
+	box-shadow:
+		0 0 0 1px $light-gray-700,
+		0 1px 1px 1px  rgba(0,0,0,.04);
 
 	&:last-child {
 		max-width: 100%;

diff --git a/_inc/client/plans/style.scss b/_inc/client/plans/style.scss
@@ -1,3 +1,4 @@
+@import '../scss/calypso-colors';
 // Plans Tables
 
 $plan-features-header-banner-height: 20px;
@@ -61,8 +62,8 @@ $plan-features-sidebar-width: 272px;
 }
 
 .plan-features__table-item {
-	border-right: solid 1px lighten( $gray, 27% );
-	border-left: solid 1px lighten( $gray, 27% );
+	border-right: solid 1px $light-gray-700;
+	border-left: solid 1px $light-gray-700;
 	background-color: $white;
 	position: relative;
 
@@ -104,19 +105,19 @@ $plan-features-sidebar-width: 272px;
 		display: block;
 		height: 1px;
 		width: calc( 100% - 24px );
-		border-bottom: 1px solid lighten( $gray, 27% );
+		border-bottom: 1px solid $light-gray-700;
 		position: absolute;
 		bottom: 0;
 		margin: 0 12px;
 	}
 }
 
 .plan-features__table-item.has-border-bottom {
-	border-bottom: solid 1px lighten( $gray, 27% );
+	border-bottom: solid 1px $light-gray-700;
 }
 
 .plan-features__table-item.has-border-top {
-	border-top: solid 1px lighten( $gray, 27% );
+	border-top: solid 1px $light-gray-700;
 }
 
 .plan-features__table-item.is-placeholder {

diff --git a/_inc/client/scss/calypso-colors.scss b/_inc/client/scss/calypso-colors.scss
@@ -1,8 +1,13 @@
 // Blues
 $blue-wordpress:         #0087be;
 $blue-light:             #78dcfa;
-$blue-medium:            #00aadc;
+$blue-medium:            #007cba;
 $blue-dark:              #005082;
+$blue-medium-dark:       #0071a1;
+$blue-grey-light:        #f3f5f6;
+$blue-grey-dark:         #016087;
+$light-gray-700:         #ccd0d4;
+
 
 // Grays
 $gray-original:          #87a6bc;

diff --git a/_inc/client/scss/variables/_colors.scss b/_inc/client/scss/variables/_colors.scss
@@ -7,7 +7,7 @@
 // Primary Accent (Blues)
 $blue-wordpress:         #0087be;
 $blue-light:             #78dcfa;
-$blue-medium:            #00aadc;
+$blue-medium:            #007cba;
 $blue-dark:              #005082;
 
 // Grays

diff --git a/_inc/client/settings/style.scss b/_inc/client/settings/style.scss
@@ -23,4 +23,5 @@
 	padding: 0;
 	background: none;
 	box-shadow: none;
+	border: none;
 }