From 8a12860cd35399529f11710635dd3dac17222be9 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Tue, 16 Jan 2018 12:01:15 +0100
Subject: [PATCH] Update theme progress color bar to match theme

This makes it so the animated updater matches the WordPress admin color scheme.
---
 editor/assets/stylesheets/_admin-schemes.scss    | 13 +++++++++++++
 editor/components/post-publish-button/style.scss | 10 +++++-----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/editor/assets/stylesheets/_admin-schemes.scss b/editor/assets/stylesheets/_admin-schemes.scss
index bf181b1b9b6b9..39e6df4550d4b 100644
--- a/editor/assets/stylesheets/_admin-schemes.scss
+++ b/editor/assets/stylesheets/_admin-schemes.scss
@@ -51,6 +51,19 @@ $scheme-sunrise__spot-color: #de823f;
 				border-color: $spot-color;
 			}
 		}
+
+		// Saving state indicators
+		.editor-post-publish-button.is-saving,
+		.editor-post-publish-button.is-saving:disabled {
+			// Yes, these need to be !important because they !important upstream too ¯\_(ツ)_/¯
+			border-color: darken( $spot-color, 10 ) darken( $spot-color, 20 ) darken( $spot-color, 20 ) !important;
+			box-shadow: 0 1px 0 darken( $spot-color, 20 ) !important;
+			text-shadow: 0 -1px 1px darken( $spot-color, 20 ), 1px 0 1px darken( $spot-color, 20 ), 0 1px 1px darken( $spot-color, 20 ), -1px 0 1px darken( $spot-color, 20 ) !important;
+
+			&:before {
+				background-image: repeating-linear-gradient( -45deg, darken( $spot-color, 20 ), darken( $spot-color, 20 ) 11px, darken( $spot-color, 10 ) 10px, darken( $spot-color, 10 ) 20px );
+			}
+		}
 	}
 }
 
diff --git a/editor/components/post-publish-button/style.scss b/editor/components/post-publish-button/style.scss
index 0bec4c9ca20ec..ecf96ec0bff8e 100644
--- a/editor/components/post-publish-button/style.scss
+++ b/editor/components/post-publish-button/style.scss
@@ -3,13 +3,13 @@
 	position: relative;
 
 	// These styles overrides the disabled state with the button primary styles
+	opacity: 1;
 	background: none !important;
-	border-color: #0073aa #006799 #006799 !important;
-	box-shadow: 0 1px 0 #006799 !important;
-	color: #fff !important;
 	text-decoration: none !important;
-	text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799 !important;
-	opacity: 1;
+	color: $white !important;
+	border-color: $blue-wordpress $blue-wordpress-700 $blue-wordpress-700 !important;
+	box-shadow: 0 1px 0 $blue-wordpress-700 !important;
+	text-shadow: 0 -1px 1px $blue-wordpress-700, 1px 0 1px $blue-wordpress-700, 0 1px 1px $blue-wordpress-700, -1px 0 1px $blue-wordpress-700 !important;
 	// End of the overriding
 
 	&:hover {