Adds SCSS color variables and breakpoints (https://github.com/woocommerce/woocommerce-admin/pull/39)

* Adds SCSS color variables and breakpoint mixins

* Use webpack to pull in shared CSS

* Move notices reset rule to wpadmin-reset

* Prefix breakpoints, colors, and wpadmin reset

plugins/woocommerce-admin/client/components/card/style.scss

@@ -1,12 +1,14 @@
+/** @format */
+
 .woo-dash__card {
 	margin-bottom: 20px;
 	background: white;
-	border: 1px solid rgba( black, 0.2 );
+	border: 1px solid $gray;
 }
 
 .woo-dash__card-header {
 	padding: 20px;
-	border-bottom: 1px solid rgba( black, 0.2 );
+	border-bottom: 1px solid $gray;
 	display: grid;
 
 	.has-action & {

plugins/woocommerce-admin/client/components/header/index.js

@@ -19,7 +19,9 @@ const Header = ( { sections, showTimeline } ) => {
 		const crumbs = _sections.map( ( subSection, i ) => <span key={ i }>{ subSection }</span> );
 		return (
 			<h1>
-				<span><a href={ getAdminLink( 'admin.php?page=woodash' ) }>WooCommerce</a></span>
+				<span>
+					<a href={ getAdminLink( 'admin.php?page=woodash' ) }>WooCommerce</a>
+				</span>
 				{ crumbs }
 			</h1>
 		);
@@ -28,9 +30,7 @@ const Header = ( { sections, showTimeline } ) => {
 	return (
 		<div className="woo-dash__header">
 			{ renderBreadcrumbs() }
-			{ showTimeline && (
+			{ showTimeline && <div /> }
-				<div />
-			) }
 		</div>
 	);
 };

plugins/woocommerce-admin/client/components/header/style.scss

@@ -1,5 +1,7 @@
+/** @format */
+
 .woo-dash__header {
-	background: #ffffff;
+	background: $white;
 	width: 100%;
 	min-height: 47px;
 	margin: 0 0 8px;
@@ -9,8 +11,8 @@
 	flex-direction: row;
 	align-items: center;
 	box-sizing: border-box;
-	background: #ffffff;
+	background: $white;
-	border-bottom: 1px solid rgba( black, 0.2 );
+	border-bottom: 1px solid $gray;
 
 	h1 {
 		font-size: 13px;
@@ -21,8 +23,8 @@
 
 		span + span::before {
 			content: ' / ';
-			color: #cccccc;
+			color: $gray-text;
-			margin: 0 2px 0 4px;
+			margin: 0 2px 0 6px;
 		}
 	}
-}
+}

plugins/woocommerce-admin/client/dashboard/style.scss

@@ -1,17 +1,4 @@
-.woocommerce-page {
+/** @format */
-	.wrap {
-		margin: 0;
-	}
-
-	#wpcontent {
-		padding: 0;
-	}
-}
-
-.woo-dashboard__admin-notice-list-hide {
-	display: none;
-}
-
 .woo-dashboard {
 	display: grid;
 	grid-template-columns: auto 300px;
@@ -21,8 +8,8 @@
 }
 
 .woo-dash__secondary {
-	background: white;
+	background: $white;
-	border: 1px solid rgba( black, 0.2 );
+	border: 1px solid $gray;
 	padding: 2em;
 }
 

plugins/woocommerce-admin/client/index.js

@@ -13,13 +13,14 @@ import { pick } from 'lodash';
 import Dashboard from './dashboard';
 
 render(
-	createElement( APIProvider, {
+	createElement(
-		...wpApiSettings,
+		APIProvider,
-		...pick( wp.api, [
+		{
-			'postTypeRestBaseMapping',
+			...wpApiSettings,
-			'taxonomyRestBaseMapping',
+			...pick( wp.api, [ 'postTypeRestBaseMapping', 'taxonomyRestBaseMapping' ] ),
-		] ),
+		},
-	}, createElement( Dashboard ) ),
+		createElement( Dashboard )
+	),
 	document.getElementById( 'root' )
 );
 

plugins/woocommerce-admin/client/stylesheets/_breakpoints.scss

@@ -0,0 +1,53 @@
+// Breakpoints
+// Forked from https://github.com/Automattic/wp-calypso/blob/46ae24d8800fb85da6acf057a640e60dac988a38/assets/stylesheets/shared/mixins/_breakpoints.scss
+
+$breakpoints: 480px, 660px, 800px, 960px, 1040px, 1280px, 1400px; // Think very carefully before adding a new breakpoint
+
+@mixin breakpoint( $sizes... ) {
+	@each $size in $sizes {
+		@if type-of( $size ) == string {
+			$approved-value: 0;
+			@each $breakpoint in $breakpoints {
+				$and-larger: '>' + $breakpoint;
+				$and-smaller: '<' + $breakpoint;
+
+				@if $size == $and-smaller {
+					$approved-value: 1;
+					@media (max-width: $breakpoint) {
+						@content;
+					}
+				} @else {
+					@if $size == $and-larger {
+						$approved-value: 2;
+						@media (min-width: $breakpoint + 1) {
+							@content;
+						}
+					} @else {
+						@each $breakpoint-end in $breakpoints {
+							$range: $breakpoint + '-' + $breakpoint-end;
+							@if $size == $range {
+								$approved-value: 3;
+								@media (min-width: $breakpoint + 1) and (max-width: $breakpoint-end) {
+									@content;
+								}
+							}
+						}
+					}
+				}
+			}
+			@if $approved-value == 0 {
+				$sizes: '';
+				@each $breakpoint in $breakpoints {
+					$sizes: $sizes + ' ' + $breakpoint;
+				}
+				@warn "ERROR in breakpoint( #{ $size } ) : You can only use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth( $breakpoints, 1 ) } >#{ nth( $breakpoints, 1 ) } #{ nth( $breakpoints, 1 ) }-#{ nth( $breakpoints, 2 ) } ]";
+			}
+		} @else {
+			$sizes: '';
+			@each $breakpoint in $breakpoints {
+				$sizes: $sizes + ' ' + $breakpoint;
+			}
+			@error "ERROR in breakpoint( #{ $size } ) : Please wrap the breakpoint $size in parenthesis. You can use these sizes[ #{$sizes} ] using the following syntax [ <#{ nth( $breakpoints, 1 ) } >#{ nth( $breakpoints, 1 ) } #{ nth( $breakpoints, 1 ) }-#{ nth( $breakpoints, 2 ) } ]";
+		}
+	}
+}

plugins/woocommerce-admin/client/stylesheets/_colors.scss

@@ -0,0 +1,5 @@
+$white: rgba(255, 255, 255, 1);
+
+// Grays
+$gray: #ccc;
+$gray-text: darken($gray, 38%);

plugins/woocommerce-admin/client/stylesheets/_wpadmin-reset.scss

@@ -0,0 +1,17 @@
+/** @format */
+
+// css resets some wp-admin specific rules so that the app fits better in the extension container
+
+.woocommerce-page {
+	.wrap {
+		margin: 0;
+	}
+
+	#wpcontent {
+		padding: 0;
+	}
+}
+
+.woo-dashboard__admin-notice-list-hide {
+	display: none;
+}

plugins/woocommerce-admin/webpack.config.js

@@ -74,7 +74,16 @@ const webpackConfig = {
 				test: /\.scss$/,
 				use: ExtractTextPlugin.extract( {
 					fallback: 'style-loader',
-					use: [ 'css-loader', 'sass-loader' ],
+					use: [
+						'css-loader',
+						{
+							loader: 'sass-loader',
+							query: {
+								includePaths: [ 'client/stylesheets' ],
+								data: '@import "_colors"; @import "_breakpoints"; @import "_wpadmin-reset";',
+							},
+						},
+					],
 				} ),
 			},
 		],