Standardise & refactor colors scss to align with Gutenberg colors and WooCommerce brand.

assets/css/abstracts/_breakpoints.scss

@@ -8,6 +8,8 @@
 // See https://github.com/WordPress/gutenberg/tree/master/packages/viewport#usage
 $breakpoints: 480px, 600px, 782px, 960px, 1280px, 1440px;
 
+// @todo refactor breakpoints so they use the mixins from Gutenberg
+// https://github.com/WordPress/gutenberg/blob/master/packages/base-styles/_mixins.scss
 @mixin breakpoint( $sizes... ) {
 	@each $size in $sizes {
 		@if type-of( $size ) == string {

assets/css/abstracts/_colors.scss

@@ -1,54 +1,22 @@
-// Greys
-$core-grey-light-100: #f8f9f9;
-$core-grey-light-200: #f3f4f5;
-$core-grey-light-300: #edeff0;
-$core-grey-light-400: #e8eaeb;
-$core-grey-light-500: #e2e4e7;
-$core-grey-light-600: #d7dade;
-$core-grey-light-700: #ccd0d4;
-$core-grey-light-800: #b5bcc2;
-$core-grey-light-900: #a2aab2;
-$core-grey-dark-100: #86909b;
-$core-grey-dark-200: #78848f;
-$core-grey-dark-300: #6c7781; // This & below have 4.5+ contrast against white
-$core-grey-dark-400: #606a73;
-$core-grey-dark-500: #555d66;
-$core-grey-dark-600: #40464d;
-$core-grey-dark-700: #32373c;
-$core-grey-dark-800: #23282d;
-$core-grey-dark-900: #191e23;
-
-$gray-text: $core-grey-dark-500;
-
-// WooCommerce Purples
-$woocommerce-100: #ffd7ff;
-$woocommerce-200: #e2a5d7;
-$woocommerce-300: #c88bbd;
-$woocommerce-400: #af72a4;
-$woocommerce-500: #95588a;
-$woocommerce-600: #7c3f71;
-$woocommerce-700: #622557;
-$woocommerce-800: #490c3e;
-$woocommerce-900: #2f0024;
-$woocommerce: $woocommerce-500;
-
-$wp-admin-background: #f1f1f1;
-$black: #24292d; // same as wp-admin sidebar
+@import "node_modules/@wordpress/base-styles/colors";
+@import "node_modules/@automattic/color-studio/dist/color-variables";
 
+// @todo remove when `@woocommerce/base-styles` is updated.
+// Greys
+$black: #000;			// Use only when you truly need pure black. For UI, use $gray-900.
+$gray-100: #f0f0f0;		// Used for light gray backgrounds.
+$gray-200: #e0e0e0;		// Used sparingly for light borders.
+$gray-300: #ddd;		// Used for most borders.
+$gray-400: #ccc;
+$gray-600: #949494;		// Meets 3:1 UI or large text contrast against white.
+$gray-700: #757575;		// Meets 4.6:1 text contrast against white.
+$gray-900: #1e1e1e;
 $white: #fff;
 
 // Bright colors
-$valid-green: #4ab866;
-$notice-yellow: #ffb900;
-$error-red: #d94f4f;
-$box-shadow-blue: #5b9dd9;
-$core-orange: #ca4a1f;
-
-$gray-10: #c3c4c7;
-$gray-20: #a7aaad;
-$gray-50: #646970;
-$gray-60: #50575e;
-$gray-80: #2c3338;
+$no-stock-color: $alert-red;
+$low-stock-color: $alert-yellow;
+$in-stock-color: $alert-green;
 
 $input-border-gray: #8d96a0;
 $input-border-dark: rgba(255, 255, 255, 0.4);
@@ -61,4 +29,3 @@ $input-background-dark: rgba(0, 0, 0, 0.1);
 $select-dropdown-dark: #1e1e1e;
 $select-dropdown-light: #fff;
 $select-item-dark: rgba(0, 0, 0, 0.4);
-

assets/css/abstracts/_mixins.scss

@@ -26,9 +26,9 @@ $fontSizes: (
 // Adds animation to placeholder section
 @mixin placeholder() {
 	animation: loading-fade 1.2s ease-in-out infinite;
-	background-color: $core-grey-light-500 !important;
-	border-color: $core-grey-light-500 !important;
-	color: $core-grey-light-500 !important;
+	background-color: $gray-200 !important;
+	border-color: $gray-200 !important;
+	color: $gray-200 !important;
 	box-shadow: none;
 	pointer-events: none;
 
@@ -147,3 +147,13 @@ $fontSizes: (
 @function em($size, $base: 16px) {
 	@return $size / $base * 1em;
 }
+
+// Encodes hex colors so they can be used in URL content.
+@function encode-color($color) {
+	@if type-of($color) != "color" or str-index(#{$color}, "#") != 1 {
+		@return $color;
+	}
+
+	$hex: str-slice(ie-hex-str($color), 4);
+	@return "%23" + unquote("#{$hex}");
+}

assets/css/abstracts/_variables.scss

@@ -1,22 +1,14 @@
-$gap-largest: 40px;
-$gap-larger: 36px;
-$gap-large: 24px;
-$gap: 16px;
-$gap-small: 12px;
-$gap-smaller: 8px;
-$gap-smallest: 4px;
-
-// Variables pulled from Gutenberg.
-// Editor Widths
-$sidebar-width: 280px;
-$content-width: 610px; // For the visual width, subtract 30px (2 * $block-padding + 2px borders). This comes to 580px, which is optimized for 70 characters.
+@import "node_modules/@wordpress/base-styles/variables";
 
-// Blocks
-$block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
-$block-spacing: 4px; // Vertical space between blocks.
-$block-side-ui-width: 28px; // Width of the movers/drag handle UI.
-$block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block.
-$block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance; // Total space left and right of the block footprint.
+// @todo replace with $grid-unit values when `@woocommerce/base-styles` is updated.
+// see: https://github.com/WordPress/gutenberg/blob/master/packages/base-styles/_variables.scss#L23-L36
+$gap-largest: 40px; // $grid-unit-50
+$gap-larger: 36px;
+$gap-large: 24px; // $grid-unit-30
+$gap: 16px; // $grid-unit-20
+$gap-small: 12px; // $grid-unit-15
+$gap-smaller: 8px; // $grid-unit-10
+$gap-smallest: 4px; // $grid-unit-05
 
 // Cart block
 $cart-image-width: 5rem;

assets/css/editor.scss

@@ -49,7 +49,7 @@
 
 // Adds border to placeholder lists, so they can be distinguished from the white background.
 .components-placeholder .woocommerce-search-list__list {
-	border: 1px solid $core-grey-light-500;
+	border: 1px solid $gray-200;
 }
 
 // Work-around to make the SearchList component work fine with the last versions of @wordpress/components.

assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/style.scss

@@ -23,9 +23,9 @@
 			margin-bottom: $gap-large;
 
 			select {
-				border-color: $error-red;
+				border-color: $alert-red;
 				&:focus {
-					outline-color: $error-red;
+					outline-color: $alert-red;
 				}
 			}
 		}

assets/js/atomic/blocks/product-elements/shared/editor.scss

@@ -3,7 +3,7 @@
 }
 .wc-atomic-blocks-product__edit-card {
 	padding: 16px;
-	border-top: 1px solid #e2e4e7;
+	border-top: 1px solid $gray-200;
 
 	.wc-atomic-blocks-product__edit-card-title {
 		margin: 0 0 $gap;

assets/js/atomic/blocks/product-elements/stock-indicator/style.scss

@@ -5,13 +5,13 @@
 	@include font-size(small);
 
 	&--in-stock {
-		color: $valid-green;
+		color: $in-stock-color;
 	}
 	&--out-of-stock {
-		color: $error-red;
+		color: $no-stock-color;
 	}
 	&--low-stock,
 	&--available-on-backorder {
-		color: $notice-yellow;
+		color: $low-stock-color;
 	}
 }

assets/js/base/components/button/style.scss

@@ -1,7 +1,7 @@
 .wc-block-components-button:not(.is-link) {
 	@include reset-typography();
 	align-items: center;
-	background-color: $black;
+	background-color: $gray-900;
 	color: $white;
 	display: inline-flex;
 	font-weight: bold;
@@ -18,7 +18,7 @@
 	&:hover,
 	&:focus,
 	&:active {
-		background-color: $black;
+		background-color: $gray-900;
 		color: $white;
 	}
 

assets/js/base/components/cart-checkout/policies/style.scss

@@ -14,7 +14,7 @@
 	margin: 0;
 
 	&:not(:first-child) {
-		border-left: 1px solid $gray-10;
+		border-left: 1px solid $gray-400;
 	}
 
 	> a {

assets/js/base/components/chip/style.scss

@@ -14,8 +14,8 @@
 	&:hover,
 	&:focus,
 	&:active {
-		background: $core-grey-light-500;
-		color: $core-grey-dark-800;
+		background: $gray-200;
+		color: $gray-900;
 	}
 
 	&.wc-block-components-chip--radius-small {
@@ -55,11 +55,11 @@ button.wc-block-components-chip:hover > .wc-block-components-chip__remove,
 button.wc-block-components-chip:focus > .wc-block-components-chip__remove,
 .wc-block-components-chip__remove:hover,
 .wc-block-components-chip__remove:focus {
-	fill: #d94f4f;
+	fill: $alert-red;
 }
 
 button.wc-block-components-chip:disabled > .wc-block-components-chip__remove,
 .wc-block-components-chip__remove:disabled {
-	fill: $core-grey-dark-100;
+	fill: $gray-600;
 	cursor: not-allowed;
 }

assets/js/base/components/dropdown-selector/style.scss

@@ -20,7 +20,7 @@ $dropdown-selector-line-height: 18/14;
 	padding: 2px $gap-smaller;
 
 	.is-disabled & {
-		background-color: $core-grey-light-500;
+		background-color: $gray-200;
 	}
 
 	.is-multiple.has-checked > & {
@@ -102,7 +102,7 @@ $dropdown-selector-line-height: 18/14;
 	.wc-block-components-dropdown-selector__selected-value {
 		@include font-size(small);
 		align-items: center;
-		color: $core-grey-dark-600;
+		color: $gray-700;
 		display: inline-flex;
 		margin: em($gap-small/4) 0;
 		padding: em($gap-smallest * 0.75) 0 em($gap-smallest * 0.75);
@@ -155,14 +155,14 @@ $dropdown-selector-line-height: 18/14;
 
 .wc-block-components-dropdown-selector__list-item {
 	@include font-size(small);
-	color: $core-grey-dark-600;
+	color: $gray-700;
 	cursor: default;
 	list-style: none;
 	margin: 0;
 	padding: 0 $gap-smallest;
 
 	&.is-selected {
-		background-color: $core-grey-light-600;
+		background-color: $gray-300;
 	}
 
 	&:hover,

assets/js/base/components/payment-methods/no-payment-methods/style.scss

@@ -9,7 +9,7 @@
 		display: block;
 
 		.components-button {
-			background-color: $black;
+			background-color: $gray-900;
 			color: $white;
 		}
 

assets/js/base/components/payment-methods/style.scss

@@ -67,7 +67,7 @@
 		left: 0;
 		top: 0;
 		transform-origin: top left;
-		color: $gray-50;
+		color: $gray-700;
 		transition: transform 200ms ease;
 		margin: 0 0 0 #{$gap + 1px};
 		overflow: hidden;
@@ -109,14 +109,14 @@
 	}
 
 	.wc-block-gateway-input.has-error {
-		border-color: $error-red;
+		border-color: $alert-red;
 		&:focus {
-			outline-color: $error-red;
+			outline-color: $alert-red;
 		}
 	}
 
 	.wc-block-gateway-input.has-error + label {
-		color: $error-red;
+		color: $alert-red;
 	}
 }