Build: using a postcss plugin to generate the admin-schemes styles (#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;