Merge pull request #3817 from WordPress/try/respect-color-scheme

Adhere to admin color schemes

editor/assets/stylesheets/_admin-schemes.scss

@@ -0,0 +1,63 @@
+/**
+ * Admin Color Scheme Overrides
+ */
+
+// All color schemes, body.admin-color ...
+// -fresh (default, needs no overriding)
+// -light (needs no overriding)
+// -blue
+// -coffee
+// -ectoplasm
+// -midnight
+// -ocean
+// -sunrise
+
+// List of Gutenberg elements that need to be overridden
+// - primary buttons (parent bleeds in)
+// - switches
+// - tab indicators
+
+// List of spot colors (eyedropped from the primary button)
+$scheme-fresh__spot-color: #0083b8;
+$scheme-blue__spot-color: #e1a84b;
+$scheme-coffee__spot-color: #c6a488;
+$scheme-ectoplasm__spot-color: #a0b748;
+$scheme-midnight__spot-color: #e34e46;
+$scheme-ocean__spot-color: #9bb99f;
+$scheme-sunrise__spot-color: #de823f;
+
+// Color override mixin
+@mixin admin-scheme-color-overrides( $scheme: fresh, $spot-color: $scheme-fresh__spot-color ) {
+	body.admin-color-#{ ( $scheme ) } {
+		// Tab indicators
+		.editor-sidebar__panel-tab.is-active,
+		.editor-inserter__tab.is-active {
+			border-bottom-color: $spot-color;
+		}
+
+		// Switch
+		.components-form-toggle.is-checked {
+			.components-form-toggle__track {
+				background-color: $spot-color;
+				border-color: $spot-color;
+			}
+
+			.components-form-toggle__thumb {
+				background-color: $spot-color;
+			}
+
+			&:before {
+				background-color: $spot-color;
+				border-color: $spot-color;
+			}
+		}
+	}
+}
+
+// Output overrides for each scheme
+@include admin-scheme-color-overrides( 'blue', $scheme-blue__spot-color );
+@include admin-scheme-color-overrides( 'coffee', $scheme-coffee__spot-color );
+@include admin-scheme-color-overrides( 'ectoplasm', $scheme-ectoplasm__spot-color );
+@include admin-scheme-color-overrides( 'midnight', $scheme-midnight__spot-color );
+@include admin-scheme-color-overrides( 'ocean', $scheme-ocean__spot-color );
+@include admin-scheme-color-overrides( 'sunrise', $scheme-sunrise__spot-color );

webpack.config.js

@@ -36,7 +36,7 @@ const extractConfig = {
 			loader: 'sass-loader',
 			query: {
 				includePaths: [ 'editor/assets/stylesheets' ],
-				data: '@import "colors"; @import "breakpoints"; @import "variables"; @import "mixins"; @import "animations";@import "z-index";',
+				data: '@import "colors"; @import "admin-schemes"; @import "breakpoints"; @import "variables"; @import "mixins"; @import "animations";@import "z-index";',
 				outputStyle: 'production' === process.env.NODE_ENV ?
 					'compressed' : 'nested',
 			},