Import all used Gutenberg component styles.

Fixes postcss theme overrides.

client/dashboard/style.scss

@@ -74,3 +74,29 @@
 		padding-bottom: 10px;
 	}
 }
+
+.woocommerce-dashboard__body {
+	background: $muriel-gray-0;
+	color: $muriel-gray-600;
+	font-family: $default-font;
+
+	#wpbody-content {
+		min-height: 100vh;
+	}
+
+	/* Hide wp-admin and WooCommerce elements when the dashboard body class is present */
+	#adminmenumain,
+	.woocommerce-layout__header,
+	.update-nag,
+	.woocommerce-store-alerts,
+	.woocommerce-message,
+	.notice,
+	.error,
+	.updated {
+		display: none;
+	}
+
+	#wpcontent {
+		margin-left: 0;
+	}
+}

client/stylesheets/abstracts/_mixins.scss

@@ -42,12 +42,84 @@
 }
 
 // Gutenberg mixins. These are temporary until Gutenberg's mixins are exposed.
+/**
+ * Breakpoint mixins
+ */
+
+@mixin break-huge() {
+	@media (min-width: #{ ($break-huge) }) {
+		@content;
+	}
+}
+
+@mixin break-wide() {
+	@media (min-width: #{ ($break-wide) }) {
+		@content;
+	}
+}
+
+@mixin break-xlarge() {
+	@media (min-width: #{ ($break-xlarge) }) {
+		@content;
+	}
+}
+
+@mixin break-large() {
+	@media (min-width: #{ ($break-large) }) {
+		@content;
+	}
+}
+
+@mixin break-medium() {
+	@media (min-width: #{ ($break-medium) }) {
+		@content;
+	}
+}
+
+@mixin break-small() {
+	@media (min-width: #{ ($break-small) }) {
+		@content;
+	}
+}
+
+@mixin break-mobile() {
+	@media (min-width: #{ ($break-mobile) }) {
+		@content;
+	}
+}
+
+@mixin break-zoomed-in() {
+	@media (min-width: #{ ($break-zoomed-in) }) {
+		@content;
+	}
+}
+
+// Buttons with rounded corners.
+@mixin button-style__disabled {
+	opacity: 0.6;
+	cursor: default;
+}
+
+@mixin button-style__hover {
+	background-color: $white;
+	color: $dark-gray-900;
+	box-shadow: inset 0 0 0 1px $light-gray-500, inset 0 0 0 2px $white,
+		0 1px 1px rgba($dark-gray-900, 0.2);
+}
+
+@mixin button-style__active() {
+	outline: none;
+	background-color: $white;
+	color: $dark-gray-900;
+	box-shadow: inset 0 0 0 1px $light-gray-700, inset 0 0 0 2px $white;
+}
+
 @mixin button-style__focus-active() {
 	background-color: $white;
 	color: $dark-gray-900;
 	box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $white;
 
-	// Windows High Contrast mode will show this outline, but not the box-shadow
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
 	outline-offset: -2px;
 }
@@ -77,6 +149,15 @@
 	}
 }
 
+// Gutenberg Switch.
+@mixin switch-style__focus-active() {
+	box-shadow: 0 0 0 2px $white, 0 0 0 3px $dark-gray-300;
+
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
+	outline: 2px solid transparent;
+	outline-offset: 2px;
+}
+
 // Sets positions for children of grid elements
 @mixin set-grid-item-position( $wrap-after, $number-of-items ) {
 	@for $i from 1 through $number-of-items {

client/stylesheets/abstracts/_variables.scss

@@ -23,19 +23,55 @@ $sidebar-width: 272px;
 $spacing: 16px;
 
 // Gutenberg variables. These are temporary until Gutenberg's variables are exposed.
+$break-huge: 1440px;
+$break-wide: 1280px;
+$break-xlarge: 1080px;
+$break-large: 960px; // admin sidebar auto folds
+$break-medium: 782px; // adminbar goes big
+$break-small: 600px;
+$break-mobile: 480px;
+$break-zoomed-in: 280px;
+$border-width: 1px;
 $default-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
 	'Helvetica Neue', sans-serif;
 $default-font-size: 13px;
 $default-line-height: 1.4;
-$break-small: 600px;
-$border-width: 1px;
+$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;
+$blue-medium-100: #e5f5fa;
+$blue-medium-highlight: #b3e7fe;
 $blue-medium-focus: #007cba;
+$light-gray-100: $core-grey-light-100;
+$light-gray-200: $core-grey-light-200;
+$light-gray-300: $core-grey-light-300;
+$light-gray-400: $core-grey-light-400;
 $light-gray-500: $core-grey-light-500;
-$dark-gray-300: $core-grey-dark-300;
+$light-gray-600: $core-grey-light-600;
+$light-gray-700: $core-grey-light-700;
+$light-gray-800: $core-grey-light-800;
+$light-gray-900: $core-grey-light-900;
+$dark-gray-100: $core-grey-dark-100;
+$dark-gray-200: $core-grey-dark-200;
+$dark-gray-300: $core-grey-dark-300; // This & below have 4.5+ contrast against white
+$dark-gray-400: $core-grey-dark-400;
+$dark-gray-500: $core-grey-dark-500;
+$dark-gray-600: $core-grey-dark-600;
 $dark-gray-700: $core-grey-dark-700;
+$dark-gray-800: $core-grey-dark-800;
 $dark-gray-900: $core-grey-dark-900;
 $alert-red: $error-red;
+$alert-yellow: $notice-yellow;
+$alert-green: $valid-green;
+$toggle-border-width: 2px;
 $radius-round-rectangle: 4px;
+$icon-button-size: 36px;
+$icon-button-size-small: 24px;
 
 // WordPress defaults
 $adminbar-height: 32px;

client/stylesheets/shared/_gutenberg-components.scss

@@ -5,4 +5,13 @@ Import Gutenberg component SCSS so webpack's postcss process can handle theme-in
 allows Woo themed components based on the config found in postcss.config.js
  */
 @import 'gutenberg-components/button/style.scss';
+@import 'gutenberg-components/checkbox-control/style.scss';
+@import 'gutenberg-components/dashicon/style.scss';
+@import 'gutenberg-components/form-toggle/style.scss';
+@import 'gutenberg-components/icon-button/style.scss';
+@import 'gutenberg-components/notice/style.scss';
+@import 'gutenberg-components/select-control/style.scss';
 @import 'gutenberg-components/snackbar/style.scss';
+@import 'gutenberg-components/spinner/style.scss';
+@import 'gutenberg-components/text-control/style.scss';
+@import 'gutenberg-components/tooltip/style.scss';