Build: using a postcss plugin to generate the admin-schemes styles (WordPress#6739)

* Try using a post-css plugin to generate the admin-schemes styles

* Add browserlist config

* Use postCSS color-function to avoid having to declare darkened colors as theme colors

* Fix postcss-themes packages.json indentation

* Fix the form toggle colors

* Add publishConfig to the package.json of postcss-themes

* Fix date picker theme colors

* Fix toggle colors

* Adding a unit test

* Fix sass code style (adding spaces)

* Fix unit tests

Author: youknowriad

.browserslistrc

@@ -0,0 +1 @@
+extends @wordpress/browserslist-config

components/button/style.scss

@@ -34,7 +34,7 @@
 	&.button-primary.is-busy[disabled] {
 		color: $white !important;
 		background-size: 100px 100% !important;
-		background-image: linear-gradient( -45deg, $blue-medium-500 28%, $blue-dark-900 28%, $blue-dark-900 72%, $blue-medium-500 72%) !important;
+		background-image: linear-gradient( -45deg, theme( primary ) 28%, $blue-dark-900 28%, $blue-dark-900 72%, theme( primary ) 72%) !important;
 		border-color: $blue-dark-900 !important;
 	}
 

components/date-time/style.scss

@@ -1,12 +1,3 @@
-$datepicker__background-color: $light-gray-300;
-$datepicker__border-color: $light-gray-500;
-$datepicker__highlighted-color: $blue-wordpress;
-$datepicker__muted-color: #ccc;
-$datepicker__selected-color: $blue-wordpress;
-$datepicker__text-color: $dark-gray-500;
-$datepicker__header-color: $black;
-$datepicker__navigation-disabled-color: lighten($datepicker__muted-color, 10%);
-
 $datepicker__border-radius: 0;
 $datepicker__day-margin: 0.166rem;
 $datepicker__font-size: 13px;
@@ -16,6 +7,13 @@ $datepicker__margin: 0.4rem;
 $datepicker__navigation-size: 6px;
 $datepicker__triangle-size: 6px;
 
+$datepicker__background-color: $light-gray-300;
+$datepicker__text-color: $dark-gray-500;
+$datepicker__header-color: $black;
+$datepicker__muted-color: #ccc;
+$datepicker__navigation-disabled-color: lighten($datepicker__muted-color, 10%);
+$datepicker__border-color: $light-gray-500;
+
 @import '~react-datepicker/src/stylesheets/datepicker';
 
 .react-datepicker__month-container {
@@ -29,7 +27,7 @@ $datepicker__triangle-size: 6px;
 
 .react-datepicker__navigation {
 	top: 12px;
-	
+
 	&--previous,
 	&--previous:hover {
 		border-right-color: $black;
@@ -73,3 +71,54 @@ $datepicker__triangle-size: 6px;
 		transform: translateY(1px);
 	}
 }
+
+// Extending colors to use theme colors
+.react-datepicker__time-container {
+  .react-datepicker__time {
+    .react-datepicker__time-box {
+      ul.react-datepicker__time-list {
+        li.react-datepicker__time-list-item {
+          &--selected {
+            background-color: theme( primary );
+            &:hover {
+              background-color: theme( primary );
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.react-datepicker__day {
+  &--highlighted {
+    background-color: theme( primary );
+    &:hover {
+      background-color: color( theme( primary ) shade(5%) );
+    }
+  }
+
+  &--selected,
+  &--in-selecting-range,
+  &--in-range {
+    background-color: theme( primary );
+    &:hover {
+      background-color: color( theme( primary ) shade(5%) );
+    }
+  }
+
+  &--keyboard-selected {
+    background-color: color( theme( primary ) tint(5%) );
+    &:hover {
+      background-color: color( theme( primary ) shade(5%) );
+    }
+  }
+
+  &--in-selecting-range:not(&--in-range) {
+    background-color: color( theme( primary ) a(50%) );
+  }
+}
+
+.react-datepicker__close-icon::after {
+	background-color: theme( primary );
+}

components/form-toggle/style.scss

@@ -66,8 +66,8 @@ $toggle-border-width: 2px;
 
 	// checked state
 	&.is-checked .components-form-toggle__track {
-		background-color: $blue-medium-400;
-		border: $toggle-border-width solid $blue-medium-400;
+		background-color: theme( toggle );
+		border: $toggle-border-width solid theme( toggle );
 		border: #{ $toggle-height / 2 } solid transparent; // expand the border to fake a solid in Windows High Contrast Mode
 	}
 
@@ -83,8 +83,8 @@ $toggle-border-width: 2px;
 		}
 
 		&:before {
-			background-color: $blue-medium-500;
-			border: $toggle-border-width solid $blue-medium-500;
+			background-color: theme( toggle );
+			border: $toggle-border-width solid theme( toggle );
 		}
 	}
 }
@@ -119,4 +119,4 @@ $toggle-border-width: 2px;
 		filter: none;
 		border: 1px solid $white;
 	}
-}
+}

components/form-token-field/style.scss

@@ -82,7 +82,7 @@
 
 		.components-form-token-field__token-text {
 			background: transparent;
-			color: $blue-wordpress;
+			color: theme( secondary );
 		}
 
 		.components-form-token-field__remove-token {

core-blocks/gallery/editor.scss

@@ -10,7 +10,7 @@
 .blocks-gallery-item {
 
 	.is-selected {
-		outline: 4px solid $blue-medium-500;
+		outline: 4px solid theme( primary );
 		outline-offset: -4px;
 	}
 
@@ -67,7 +67,7 @@
 	position: absolute;
 	top: 0;
 	right: 0;
-	background-color: $blue-medium-500;
+	background-color: theme( primary );
 	display: inline-flex;
 	z-index: z-index( '.core-blocks-gallery-item__inline-menu' );
 

core-blocks/image/editor.scss

@@ -26,7 +26,7 @@
 	width: 15px !important;
 	height: 15px !important;
 	position: absolute;
-	background: $blue-medium-500;
+	background: theme( primary );
 	padding: 0 3px 3px 0;
 	box-sizing: border-box;
 	cursor: se-resize;

core-blocks/spacer/editor.scss

@@ -15,7 +15,7 @@
 	width: 15px !important;
 	height: 15px !important;
 	position: absolute;
-	background: $blue-medium-500;
+	background: theme( primary );
 	padding: 0 3px 3px 0;
 	box-sizing: border-box;
 	cursor: se-resize;

edit-post/assets/stylesheets/_admin-schemes.scss

@@ -27,15 +27,13 @@ $white: #fff;
 
 // Additional colors
 // some from https://make.wordpress.org/design/handbook/foundations/colors/
-$blue-wordpress: #0073aa;
 $blue-wordpress-700: #00669b;
 $blue-dark-900: #0071a1;
 
 $blue-medium-900: #006589;
 $blue-medium-800: #00739C;
 $blue-medium-700: #007FAC;
 $blue-medium-600: #008DBE;
-$blue-medium-500: #00a0d2;
 $blue-medium-400: #33B3DB;
 $blue-medium-300: #66C6E4;
 $blue-medium-200: #BFE7F3;

edit-post/assets/stylesheets/_colors.scss

@@ -1,14 +1,3 @@
-// Output overrides for each scheme
-// Almost all schemes use only one color swatch, a few have exceptions to ensure usability
-@include admin-scheme-color-overrides( 'fresh', $scheme-fresh__spot-color, $scheme-fresh__spot-color );
-@include admin-scheme-color-overrides( 'light', $scheme-light__spot-color, $scheme-light__spot-color );
-@include admin-scheme-color-overrides( 'blue', $scheme-blue__spot-color, $scheme-blue__spot-color );
-@include admin-scheme-color-overrides( 'coffee', $scheme-coffee__spot-color, $scheme-coffee__spot-color );
-@include admin-scheme-color-overrides( 'ectoplasm', $scheme-ectoplasm__spot-color, $scheme-ectoplasm__spot-color );
-@include admin-scheme-color-overrides( 'midnight', $scheme-midnight__spot-color, $scheme-midnight__spot-color-2 ); // exception to ensure usability
-@include admin-scheme-color-overrides( 'ocean', $scheme-ocean__spot-color, $scheme-ocean__spot-color );
-@include admin-scheme-color-overrides( 'sunrise', $scheme-sunrise__spot-color, $scheme-sunrise__spot-color-2 ); // exception to ensure usability
-
 // Fade animations
 @keyframes animate_fade {
 	from {

edit-post/assets/stylesheets/main.scss

@@ -19,7 +19,7 @@
 
 	&.is-active {
 		padding-bottom: 0;
-		border-bottom: 3px solid $blue-medium-500;
+		border-bottom: 3px solid theme( primary );
 		font-weight: 600;
 	}
 

edit-post/components/sidebar/settings-header/style.scss

@@ -157,7 +157,7 @@
 
 	&.is-active {
 		padding-bottom: 0;
-		border-bottom: 3px solid $blue-medium-500;
+		border-bottom: 3px solid theme( primary );
 		font-weight: 600;
 	}
 

edit-post/components/sidebar/style.scss

@@ -9,14 +9,14 @@
 
 	&.is-close-to-bottom {
 		background: none;
-		border-bottom: 3px solid $blue-medium-500;
+		border-bottom: 3px solid theme( primary );
 	}
 
 	&.is-close-to-top,
 	&.is-appender.is-close-to-top,
 	&.is-appender.is-close-to-bottom {
 		background: none;
-		border-top: 3px solid $blue-medium-500;
+		border-top: 3px solid theme( primary );
 		border-bottom: none;
 	}
 

editor/components/block-drop-zone/style.scss

@@ -519,7 +519,7 @@
 	height: 2px;
 	left: 0;
 	right: 0;
-	background: $blue-medium-500;
+	background: theme( primary );
 }
 
 .editor-block-list__insertion-point-inserter {

editor/components/block-list/style.scss

@@ -202,7 +202,7 @@ input[type="search"].editor-inserter__search {
 	&.is-active {
 		padding-bottom: 8px;
 		font-weight: 600;
-		border-bottom: 3px solid $blue-medium-500;
+		border-bottom: 3px solid theme( primary );
 		position: relative;
 		z-index: z-index( '.editor-inserter__tab.is-active' );
 	}

editor/components/inserter/style.scss

@@ -8,15 +8,15 @@
 
 .editor-post-featured-image__toggle {
 	text-decoration: underline;
-	color: $blue-wordpress;
+	color: theme( secondary );
 
 	&:focus {
 		box-shadow: none;
 		outline: none;
 	}
 
 	&:hover {
-		color: $blue-medium-500;
+		color: theme( primary );
 	}
 }
 

editor/components/post-featured-image/style.scss

@@ -7,7 +7,7 @@
 	background: none !important;
 	text-decoration: none !important;
 	color: $white !important;
-	border-color: $blue-wordpress $blue-wordpress-700 $blue-wordpress-700 !important;
+	border-color: theme( secondary ) $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
@@ -23,7 +23,7 @@
 		right: 0;
 		bottom: 0;
 		content: '';
-		background-image: repeating-linear-gradient( -45deg, $blue-wordpress-700, $blue-wordpress-700 11px, $blue-wordpress 10px, $blue-wordpress 20px );
+		background-image: repeating-linear-gradient( -45deg, $blue-wordpress-700, $blue-wordpress-700 11px, theme( secondary ) 10px, theme( secondary ) 20px );
 		z-index: -1;
 		@include move_background;
 	}