Update Jetpack button and card styles to match WordPress 5.3

Automattic · Oct 11, 2019 · 8e3f856 · 8e3f856
1 parent 11aa749
commit 8e3f856
Show file tree

Hide file tree

Showing 13 changed files with 59 additions and 523 deletions.
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,15 +23,17 @@
 	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;
+		// border-color: lighten( $gray, 10% );
+		// color: $gray-dark;
+		background: #f1f1f1;
+    	border-color: $blue-grey-dark;
+    	color: $blue-grey-dark;
 	}
 	&:active {
 		border-width: 2px 1px 1px;
@@ -54,7 +56,6 @@
 	}
 	&.is-compact {
 		padding: 7px;
-		color: darken( $gray, 10% );
 		font-size: 11px;
 		line-height: 1;
 		text-transform: uppercase;
@@ -94,12 +95,13 @@
 // 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;
 	}
 	&[disabled],

diff --git a/_inc/client/components/card/style.scss b/_inc/client/components/card/style.scss
@@ -17,8 +17,11 @@ $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 transparentize( lighten( $gray, 20% ), .5 ),
+		0 1px 2px lighten( $gray, 30% );*/
+	border: 1px solid $light-gray-700;
+	box-shadow: 0 1px 1px rgba(0,0,0,.04);
+	border-radius: 2px;
 
 	@include clear-fix;
 
@@ -29,10 +32,10 @@ $section-border: #DDDDDD;
 
 	// Compact Card
 	&.is-compact {
-		margin-bottom: 1px;
+		margin-bottom: -1px;
 
 		@include breakpoint( ">480px" ) {
-			margin-bottom: 1px;
+			margin-bottom: -1px;
 			padding: 16px 24px;
 		}
 	}

diff --git a/_inc/client/components/dash-item/style.scss b/_inc/client/components/dash-item/style.scss
@@ -56,6 +56,7 @@
 
 .jp-dash-item .dops-section-header {
 	width: 100%;
+	margin-bottom: -1px;
 
 	.dops-button {
 		font-style: normal;

diff --git a/_inc/client/components/section-nav/style.scss b/_inc/client/components/section-nav/style.scss
@@ -17,8 +17,8 @@
 	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% );
+	border: 1px solid $light-gray-700;
+	box-shadow: 0 1px 1px rgba(0,0,0,.04);
 
 	&.is-empty .dops-section-nav__panel {
 		visibility: hidden;
@@ -280,7 +280,7 @@
 
 	.is-selected & {
 		color: $white;
-		background-color: $blue-medium;
+		background-color: $blue-medium-dark;
 	}
 
 	&:focus {
@@ -300,9 +300,13 @@
 		}
 	}
 
+	&:hover {
+		color: $blue-grey-dark;
+	}
+
 	.notouch & {
 		&:hover {
-			color: $blue-medium;
+			color: $blue-medium-dark;
 		}
 	}
 
@@ -316,11 +320,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/components/settings-group/style.scss b/_inc/client/components/settings-group/style.scss
@@ -1,6 +1,6 @@
 .jp-form-settings-group {
 	position: relative;
-	margin-bottom: 0;
+	margin-bottom: -1px;
 
 	p {
 		font-size: rem( 14px );

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