diff --git a/plugins/woocommerce-admin/client/analytics/report/style.scss b/plugins/woocommerce-admin/client/analytics/report/style.scss
index 16e864b3462..e57b66d3107 100644
--- a/plugins/woocommerce-admin/client/analytics/report/style.scss
+++ b/plugins/woocommerce-admin/client/analytics/report/style.scss
@@ -1,4 +1,3 @@
-
 .woocommerce-analytics__table-placeholder {
 	.woocommerce-card__body {
 		padding: 0;
@@ -18,7 +17,7 @@
 // exportable card based on the Gutenberg component that houses wc-admin styles.
 .woocommerce-analytics__card {
 	border-radius: 0;
-	border: 1px solid $core-grey-light-700;
+	border: 1px solid $gray-400;
 	box-shadow: none;
 	margin-bottom: $gap-large;
 
@@ -34,8 +33,8 @@
 	}
 
 	> .woocommerce-card__header {
-		padding: ($gap - 3) $gap;
-		border-bottom: 1px solid $core-grey-light-700;
+		padding: ( $gap - 3 ) $gap;
+		border-bottom: 1px solid $gray-400;
 		border-radius: 0;
 
 		> .woocommerce-card__title-wrapper > .woocommerce-card__title {
diff --git a/plugins/woocommerce-admin/client/analytics/settings/setting.scss b/plugins/woocommerce-admin/client/analytics/settings/setting.scss
index ca40cf9d6af..a779428f138 100644
--- a/plugins/woocommerce-admin/client/analytics/settings/setting.scss
+++ b/plugins/woocommerce-admin/client/analytics/settings/setting.scss
@@ -1,5 +1,3 @@
-
-
 .woocommerce-setting {
 	display: flex;
 	margin-bottom: $gap-large;
@@ -9,7 +7,7 @@
 }
 
 .woocommerce-setting__label {
-	@include font-size(16);
+	@include font-size( 16 );
 	margin-bottom: $gap;
 	padding-right: $gap;
 	font-weight: bold;
@@ -33,7 +31,7 @@
 		width: 100%;
 		display: block;
 		margin-bottom: $gap-small;
-		color: $core-grey-dark-500;
+		color: $gray-700;
 	}
 
 	.woocommerce-filters-filter label {
@@ -62,5 +60,5 @@
 
 .woocommerce-setting__help {
 	font-style: italic;
-	color: $core-grey-dark-300;
+	color: $gray-700;
 }
diff --git a/plugins/woocommerce-admin/client/dashboard/dashboard-charts/block.scss b/plugins/woocommerce-admin/client/dashboard/dashboard-charts/block.scss
index e6dfb51de75..cef54d1e74f 100644
--- a/plugins/woocommerce-admin/client/dashboard/dashboard-charts/block.scss
+++ b/plugins/woocommerce-admin/client/dashboard/dashboard-charts/block.scss
@@ -1,5 +1,3 @@
-
-
 .woocommerce-dashboard__chart-block-wrapper {
 	cursor: pointer;
 	&:hover {
@@ -38,7 +36,7 @@
 			.woocommerce-legend__item > button {
 				cursor: default;
 				&:hover {
-					background: $core-grey-light-100;
+					background: $gray-100;
 				}
 				.woocommerce-legend__item-container {
 					cursor: default;
@@ -49,16 +47,16 @@
 			}
 
 			&:hover {
-				background: $core-grey-light-100;
+				background: $gray-100;
 				.woocommerce-legend__item > button {
-					background: $core-grey-light-100;
+					background: $gray-100;
 				}
 			}
 		}
 	}
 
 	&:hover {
-		background: $core-grey-light-100;
+		background: $gray-100;
 	}
 
 	.screen-reader-text:focus {
diff --git a/plugins/woocommerce-admin/client/dashboard/leaderboards/style.scss b/plugins/woocommerce-admin/client/dashboard/leaderboards/style.scss
index 17efa0b749a..b61cff2579b 100644
--- a/plugins/woocommerce-admin/client/dashboard/leaderboards/style.scss
+++ b/plugins/woocommerce-admin/client/dashboard/leaderboards/style.scss
@@ -1,11 +1,9 @@
-
-
 .woocommerce-dashboard__dashboard-leaderboards {
 	.components-base-control__field {
 		width: 100%;
 	}
 	.components-select-control__input {
-		border: 1px solid $core-grey-light-700;
+		border: 1px solid $gray-400;
 		height: 34px;
 	}
 	.woocommerce-dashboard__dashboard-leaderboards__select {
diff --git a/plugins/woocommerce-admin/client/dashboard/store-performance/style.scss b/plugins/woocommerce-admin/client/dashboard/store-performance/style.scss
index 5e42c230f39..fe287d0cac9 100644
--- a/plugins/woocommerce-admin/client/dashboard/store-performance/style.scss
+++ b/plugins/woocommerce-admin/client/dashboard/store-performance/style.scss
@@ -1,5 +1,3 @@
-
-
 .woocommerce-dashboard__store-performance {
 	margin-bottom: $gap-large;
 
@@ -8,7 +6,7 @@
 	}
 
 	.woocommerce-summary {
-		background-color: $core-grey-light-100;
+		background-color: $gray-100;
 		margin: 0;
 
 		@include breakpoint( '<782px' ) {
@@ -19,7 +17,7 @@
 			&:not(.is-placeholder) {
 				.woocommerce-summary__item-container:first-child {
 					.woocommerce-summary__item {
-						border-top: 1px solid $core-grey-light-700;
+						border-top: 1px solid $gray-400;
 					}
 				}
 			}
@@ -30,11 +28,11 @@
 		background-color: $studio-white;
 
 		&:hover {
-			background-color: $core-grey-light-200;
+			background-color: $gray-100;
 		}
 
 		&:active {
-			background-color: $core-grey-light-300;
+			background-color: $gray-100;
 		}
 	}
 }
diff --git a/plugins/woocommerce-admin/client/dashboard/style.scss b/plugins/woocommerce-admin/client/dashboard/style.scss
index c1ee102b20c..5ed76413d9d 100644
--- a/plugins/woocommerce-admin/client/dashboard/style.scss
+++ b/plugins/woocommerce-admin/client/dashboard/style.scss
@@ -42,7 +42,7 @@
 	}
 
 	> button svg {
-		fill: $core-grey-dark-500;
+		fill: $gray-700;
 	}
 }
 
@@ -68,12 +68,12 @@
 }
 
 .woocommerce-dashboard-section__add-more-btn-title {
-	color: $core-grey-dark-300;
+	color: $gray-700;
 	padding-top: 8px;
 }
 
 .woocommerce-dashboard-section-controls {
-	border-top: $border-width solid $core-grey-light-500;
+	border-top: $border-width solid $gray-100;
 	padding-top: $gap-smaller;
 
 	.dashicon {
@@ -100,7 +100,6 @@
 	}
 }
 
-
 .woocommerce-dashboard-card {
 	.components-card__header.is-size-large,
 	.components-card__header.is-size-medium {
diff --git a/plugins/woocommerce-admin/client/devdocs/style.scss b/plugins/woocommerce-admin/client/devdocs/style.scss
index 72ff05496e4..4a0cba7cf75 100644
--- a/plugins/woocommerce-admin/client/devdocs/style.scss
+++ b/plugins/woocommerce-admin/client/devdocs/style.scss
@@ -1,5 +1,3 @@
-
-
 .woocommerce_devdocs {
 	@include breakpoint( '>1280px' ) {
 		&.is-list {
@@ -27,13 +25,13 @@
 
 	.woocommerce-devdocs__example {
 		padding: $gap;
-		box-shadow: inset 0 2px 1px rgba($core-grey-dark-800, 0.075);
+		box-shadow: inset 0 2px 1px rgba($gray-900, 0.075);
 
 		// Grid background
-		background-image: linear-gradient(rgba($core-grey-dark-800, 0.05) 1px, transparent 1px),
-			linear-gradient(90deg, rgba($core-grey-dark-800, 0.05) 1px, transparent 1px),
-			linear-gradient(rgba($core-grey-dark-800, 0.025) 1px, transparent 1px),
-			linear-gradient(90deg, rgba($core-grey-dark-800, 0.025) 1px, transparent 1px);
+		background-image: linear-gradient(rgba($gray-900, 0.05) 1px, transparent 1px),
+			linear-gradient(90deg, rgba($gray-900, 0.05) 1px, transparent 1px),
+			linear-gradient(rgba($gray-900, 0.025) 1px, transparent 1px),
+			linear-gradient(90deg, rgba($gray-900, 0.025) 1px, transparent 1px);
 		background-size: 32px 32px, 32px 32px, 8px 8px, 8px 8px;
 		background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
 
@@ -65,7 +63,7 @@
 
 			th,
 			td {
-				border-bottom: 1px solid $core-grey-light-700;
+				border-bottom: 1px solid $gray-400;
 				text-align: left;
 			}
 
diff --git a/plugins/woocommerce-admin/client/header/activity-panel/activity-card/style.scss b/plugins/woocommerce-admin/client/header/activity-panel/activity-card/style.scss
index b2145f48aa0..6640911e6fd 100644
--- a/plugins/woocommerce-admin/client/header/activity-panel/activity-card/style.scss
+++ b/plugins/woocommerce-admin/client/header/activity-panel/activity-card/style.scss
@@ -1,11 +1,9 @@
-
-
 .woocommerce-activity-card {
 	position: relative;
 	padding: $fallback-gutter;
 	padding: $gutter;
 	background: $studio-white;
-	border-bottom: 1px solid $core-grey-light-400;
+	border-bottom: 1px solid $gray-200;
 	color: $gray-text;
 	@include font-size( 13 );
 
@@ -25,10 +23,10 @@
 
 .woocommerce-activity-card__unread {
 	position: absolute;
-	top: calc(#{ $fallback-gutter } - 6px);
-	top: calc(#{ $gutter } - 6px);
-	right: calc(#{ $fallback-gutter } - 6px);
-	right: calc(#{ $gutter } - 6px);
+	top: calc(#{$fallback-gutter} - 6px);
+	top: calc(#{$gutter} - 6px);
+	right: calc(#{$fallback-gutter} - 6px);
+	right: calc(#{$gutter} - 6px);
 	width: 6px;
 	height: 6px;
 	border-radius: 50%;
@@ -37,7 +35,7 @@
 
 .woocommerce-activity-card__icon {
 	grid-area: icon;
-	fill: $core-grey-light-600;
+	fill: $gray-200;
 }
 
 .woocommerce-activity-card__header {
@@ -51,7 +49,7 @@
 		order: 2;
 
 		.woocommerce-empty-activity-card & {
-			color: $dark-gray-primary;
+			color: $gray-900;
 			@include font-size( 16 );
 			font-style: normal;
 			line-height: 24px;
@@ -60,7 +58,7 @@
 	}
 
 	.woocommerce-activity-card__date {
-		color: $core-grey-dark-300;
+		color: $gray-700;
 		text-transform: uppercase;
 		@include font-size( 11 );
 		margin-bottom: $gap-small;
@@ -107,7 +105,7 @@
 		margin-bottom: 0;
 	}
 	.woocommerce-empty-activity-card & {
-		color: $medium-gray-text;
+		color: $gray-700;
 		font-style: normal;
 		font-weight: normal;
 		@include font-size( 14 );
@@ -224,7 +222,7 @@
 	padding: $fallback-gutter;
 	padding: $gutter;
 
-	@media screen and (prefers-reduced-motion: no-preference) {
+	@media screen and ( prefers-reduced-motion: no-preference ) {
 		transition: opacity 0.3s, height 0s, padding 0s;
 	}
 
@@ -240,7 +238,7 @@
 		height: 0;
 		opacity: 0;
 		padding: 0;
-		@media screen and (prefers-reduced-motion: no-preference) {
+		@media screen and ( prefers-reduced-motion: no-preference ) {
 			transition: opacity 0.3s, height 0s 0.3s, padding 0s 0.3s;
 		}
 	}
@@ -288,7 +286,8 @@
 			margin-top: $gap-smallest;
 		}
 
-		.woocommerce-review-activity-card__image-overlay__product .woocommerce-gravatar {
+		.woocommerce-review-activity-card__image-overlay__product
+		.woocommerce-gravatar {
 			margin-left: 0;
 			width: 18px;
 			height: 18px;
@@ -306,7 +305,7 @@
 	width: 60px;
 
 	&.is-placeholder::before {
-		background-color: $core-grey-dark-500;
+		background-color: $gray-700;
 		border-radius: 50%;
 		content: '';
 		position: absolute;
@@ -319,7 +318,7 @@
 }
 
 .woocommerce-stock-activity-card {
-	@media screen and (prefers-reduced-motion: no-preference) {
+	@media screen and ( prefers-reduced-motion: no-preference ) {
 		transition: opacity 0.3s;
 	}
 
@@ -328,8 +327,8 @@
 	}
 
 	.woocommerce-stock-activity-card__stock-quantity {
-		background: $core-grey-light-300;
-		color: $core-grey-dark-500;
+		background: $gray-100;
+		color: $gray-700;
 		padding: 3px $gap-smaller;
 		border-radius: 3px;
 	}
@@ -366,13 +365,13 @@
 	}
 
 	.woocommerce-activity-card__subtitle {
-		color: $core-grey-dark-500;
+		color: $gray-700;
 		@include font-size( 12 );
 	}
 }
 
 .woocommerce-empty-activity-card {
-	background: $core-grey-light-200;
+	background: $gray-100;
 	margin: 20px;
 	border-bottom: unset;
 }
diff --git a/plugins/woocommerce-admin/client/header/activity-panel/activity-header/style.scss b/plugins/woocommerce-admin/client/header/activity-panel/activity-header/style.scss
index 7d1d8a913f5..c109187edbd 100644
--- a/plugins/woocommerce-admin/client/header/activity-panel/activity-header/style.scss
+++ b/plugins/woocommerce-admin/client/header/activity-panel/activity-header/style.scss
@@ -1,8 +1,6 @@
-
-
 .woocommerce-layout__activity-panel-header {
 	height: 50px;
-	background: $core-grey-light-500;
+	background: $gray-200;
 	padding: 16px;
 	display: flex;
 	justify-content: space-between;
@@ -24,23 +22,23 @@
 	.woocommerce-ellipsis-menu__toggle.components-button:not(:disabled):not([aria-disabled='true']):hover {
 		box-shadow: none;
 		border-radius: 10px;
-		background: $core-grey-light-700;
+		background: $gray-400;
 	}
 }
 
 .woocommerce-layout__inbox-title {
-	color: $dark-gray-primary;
+	color: $gray-900;
 	display: flex;
 	align-items: center;
 }
 
 .woocommerce-layout__inbox-subtitle {
-	color: $medium-gray-text;
+	color: $gray-700;
 }
 
 .woocommerce-layout__inbox-badge {
 	margin-left: $gap-small / 2;
-	background-color: $medium-gray-text;
+	background-color: $gray-700;
 	border-radius: 13px;
 	padding: 0 $gap-small / 2;
 	color: $white;
diff --git a/plugins/woocommerce-admin/client/header/activity-panel/activity-outbound-link/style.scss b/plugins/woocommerce-admin/client/header/activity-panel/activity-outbound-link/style.scss
index 7068607eb3c..d6331da7902 100644
--- a/plugins/woocommerce-admin/client/header/activity-panel/activity-outbound-link/style.scss
+++ b/plugins/woocommerce-admin/client/header/activity-panel/activity-outbound-link/style.scss
@@ -1,12 +1,10 @@
-
-
 .woocommerce-layout__activity-panel-outbound-link {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	height: 50px;
-	background: $core-grey-light-200;
-	border-bottom: 1px solid $core-grey-light-400;
+	background: $gray-200;
+	border-bottom: 1px solid $gray-100;
 	padding: $gap $fallback-gutter;
 	padding: $gap $gutter;
 	font-size: 13px;
@@ -24,12 +22,13 @@
 	}
 
 	&:active {
-		background: $core-grey-light-100;
+		background: $gray-100;
 	}
 
 	&:focus {
-		background: $core-grey-light-200;
-		box-shadow: inset 0 0 0 1px $box-shadow-blue, inset 0 0 0 2px $studio-white;
+		background: $gray-200;
+		box-shadow: inset 0 0 0 1px $box-shadow-blue,
+			inset 0 0 0 2px $studio-white;
 	}
 
 	&:hover,
diff --git a/plugins/woocommerce-admin/client/header/activity-panel/panels/inbox/style.scss b/plugins/woocommerce-admin/client/header/activity-panel/panels/inbox/style.scss
index e6a27ed522e..12693654d9e 100644
--- a/plugins/woocommerce-admin/client/header/activity-panel/panels/inbox/style.scss
+++ b/plugins/woocommerce-admin/client/header/activity-panel/panels/inbox/style.scss
@@ -1,9 +1,7 @@
-
-
 .woocommerce-inbox-message {
 	position: relative;
 	color: $gray-text;
-	background: $core-grey-light-200;
+	background: $gray-100;
 	border-radius: 2px;
 	@include font-size( 13 );
 	margin: 0 0 $gap-large;
@@ -31,7 +29,7 @@
 	}
 
 	&:not(.is-placeholder) {
-		border: 1px solid $light-gray-secondary;
+		border: 1px solid $gray-200;
 	}
 
 	&.message-is-unread {
@@ -57,7 +55,7 @@
 
 .woocommerce-inbox-message__content {
 	.woocommerce-inbox-message__title {
-		color: $dark-gray-primary;
+		color: $gray-900;
 		@include font-size( 16 );
 		font-style: normal;
 		line-height: 1.5;
@@ -78,7 +76,7 @@
 	}
 
 	.woocommerce-inbox-message__date {
-		color: $medium-gray-text;
+		color: $gray-700;
 		@include font-size( 12 );
 		margin-bottom: $gap;
 		font-style: normal;
@@ -94,7 +92,7 @@
 }
 
 .woocommerce-inbox-message__text {
-	color: $medium-gray-text;
+	color: $gray-700;
 	font-style: normal;
 	font-weight: normal;
 	@include font-size( 14 );
@@ -117,7 +115,7 @@
 
 .woocommerce-inbox-message__actions {
 	padding-top: $gap;
-	border-top: 1px solid $light-gray-tertiary;
+	border-top: 1px solid $gray-200;
 
 	// Ensures any immediate child with a sibling has space between the items
 	& > * + * {
@@ -158,7 +156,7 @@
 .woocommerce-inbox-dismiss-confirmation_wrapper {
 	p {
 		font-size: 16px;
-		color: $medium-gray-text;
+		color: $gray-700;
 	}
 	.woocommerce-inbox-dismiss-confirmation_buttons {
 		text-align: right;
@@ -208,7 +206,7 @@
 }
 
 // Tweak to fix dropdown and placeholder in IE 11
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+@media all and ( -ms-high-contrast: none ), ( -ms-high-contrast: active ) {
 	.woocommerce-admin-dismiss-dropdown {
 		margin-top: 0;
 	}
diff --git a/plugins/woocommerce-admin/client/header/activity-panel/style.scss b/plugins/woocommerce-admin/client/header/activity-panel/style.scss
index ca5772f8e3c..38c72e02069 100644
--- a/plugins/woocommerce-admin/client/header/activity-panel/style.scss
+++ b/plugins/woocommerce-admin/client/header/activity-panel/style.scss
@@ -1,5 +1,3 @@
-
-
 .woocommerce-layout__activity-panel {
 	display: flex;
 	flex-direction: row;
@@ -78,10 +76,10 @@
 		min-width: 80px;
 		width: 100%;
 		height: $header-height;
-		color: $core-grey-dark-500;
+		color: $gray-700;
 
 		&::before {
-			background-color: theme(outlines);
+			background-color: var(--wp-admin-theme-color);
 			bottom: 0;
 			content: '';
 			height: 0;
@@ -95,7 +93,7 @@
 		}
 
 		&.is-active {
-			color: $core-grey-dark-700;
+			color: $gray-900;
 			box-shadow: none;
 
 			&::before {
@@ -133,18 +131,18 @@
 
 		&:hover,
 		&.components-button:not(:disabled):not([aria-disabled='true']):hover {
-			background-color: $core-grey-light-200;
+			background-color: $gray-100;
 			box-shadow: none;
 
 			&.has-unread::after,
 			&.woocommerce-layout__activity-panel-tab-wordpress-notices::after {
-				border-color: $core-grey-light-200;
+				border-color: $gray-200;
 			}
 		}
 
 		&:focus,
 		&.components-button:not(:disabled):not([aria-disabled='true']):focus {
-			box-shadow: inset -1px -1px 0 $core-grey-dark-300, inset 1px 1px 0 $core-grey-dark-300;
+			box-shadow: inset -1px -1px 0 $gray-700, inset 1px 1px 0 $gray-700;
 		}
 	}
 }
@@ -193,14 +191,14 @@
 	transition-property: transform box-shadow;
 	transition-duration: 300ms;
 	transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
-	@media screen and (prefers-reduced-motion: reduce) {
+	@media screen and ( prefers-reduced-motion: reduce ) {
 		transition-duration: 1ms;
 	}
 }
 
 .woocommerce-layout__activity-panel-wrapper {
 	height: calc(100vh - #{$header-height + $header-height + $adminbar-height-mobile});
-	background: $core-grey-light-200;
+	background: $gray-100;
 	width: 510px;
 	@include breakpoint( '<782px' ) {
 		width: 100%;
@@ -228,7 +226,7 @@
 		animation: tabSwitch;
 		animation-duration: 300ms;
 
-		@media screen and (prefers-reduced-motion: reduce) {
+		@media screen and ( prefers-reduced-motion: reduce ) {
 			animation: none;
 		}
 	}
diff --git a/plugins/woocommerce-admin/client/homescreen/stats-overview/style.scss b/plugins/woocommerce-admin/client/homescreen/stats-overview/style.scss
index b45c586bdc0..865256761e7 100644
--- a/plugins/woocommerce-admin/client/homescreen/stats-overview/style.scss
+++ b/plugins/woocommerce-admin/client/homescreen/stats-overview/style.scss
@@ -1,7 +1,7 @@
 // Set up some local color variables to make the CSS more clear
-$outer-border: $core-grey-light-700;
-$promo-actions-border-top: $core-grey-light-500;
-$promo-actions-border-bottom: $light-gray-tertiary;
+$outer-border: $gray-200;
+$promo-actions-border-top: $gray-100;
+$promo-actions-border-bottom: $gray-100;
 
 .woocommerce-stats-overview {
 	.woocommerce-card__body {
@@ -39,15 +39,19 @@ $promo-actions-border-bottom: $light-gray-tertiary;
 		display: inline-block;
 	}
 
-	.woocommerce-summary__item-container:nth-last-of-type(1) .woocommerce-summary__item {
+	.woocommerce-summary__item-container:nth-last-of-type(1)
+	.woocommerce-summary__item {
 		border-bottom: none;
 	}
 
-	&.is-even .woocommerce-summary__item-container:nth-last-of-type(2) .woocommerce-summary__item {
+	&.is-even
+	.woocommerce-summary__item-container:nth-last-of-type(2)
+	.woocommerce-summary__item {
 		border-bottom: none;
 	}
 
-	.woocommerce-summary__item-container:nth-of-type(even) .woocommerce-summary__item {
+	.woocommerce-summary__item-container:nth-of-type(even)
+	.woocommerce-summary__item {
 		border-right: none;
 	}
 
@@ -55,11 +59,11 @@ $promo-actions-border-bottom: $light-gray-tertiary;
 		background-color: $studio-white;
 
 		&:hover {
-			background-color: $light-gray-100;
+			background-color: $gray-100;
 		}
 
 		&:active {
-			background-color: $light-gray-200;
+			background-color: $gray-100;
 		}
 	}
 }
@@ -70,7 +74,7 @@ article.woocommerce-stats-overview__install-jetpack-promo {
 	}
 
 	h2 {
-		color: $dark-gray-primary;
+		color: $gray-900;
 		@include font-size( 16 );
 		font-style: normal;
 		line-height: 1.5;
@@ -78,7 +82,7 @@ article.woocommerce-stats-overview__install-jetpack-promo {
 		margin: $gap-smaller 0;
 	}
 	p {
-		color: $medium-gray-text;
+		color: $gray-700;
 		font-style: normal;
 		font-weight: normal;
 		@include font-size( 14 );
diff --git a/plugins/woocommerce-admin/client/layout/store-alerts/style.scss b/plugins/woocommerce-admin/client/layout/store-alerts/style.scss
index c0fc64d40bb..32f7b8639e6 100644
--- a/plugins/woocommerce-admin/client/layout/store-alerts/style.scss
+++ b/plugins/woocommerce-admin/client/layout/store-alerts/style.scss
@@ -1,4 +1,3 @@
-
 .woocommerce-store-alerts {
 	position: relative;
 	margin: 0 0 $gap-largest 0;
@@ -51,7 +50,7 @@
 		}
 
 		&.is-button {
-			color: $core-grey-dark-500;
+			color: $gray-700;
 		}
 	}
 
diff --git a/plugins/woocommerce-admin/client/marketing/components/button/style.scss b/plugins/woocommerce-admin/client/marketing/components/button/style.scss
index 63dfa2c3c03..976d75bd2c2 100644
--- a/plugins/woocommerce-admin/client/marketing/components/button/style.scss
+++ b/plugins/woocommerce-admin/client/marketing/components/button/style.scss
@@ -1,6 +1,6 @@
 .components-button.woocommerce-admin-marketing-button {
 	&:not([disabled]) {
-		border-color: $theme-color !important;
-		color: $theme-color !important;
+		border-color: var(--wp-admin-theme-color) !important;
+		color: var(--wp-admin-theme-color) !important;
 	}
 }
diff --git a/plugins/woocommerce-admin/client/marketing/components/knowledge-base/style.scss b/plugins/woocommerce-admin/client/marketing/components/knowledge-base/style.scss
index 62881a206df..361cc628763 100644
--- a/plugins/woocommerce-admin/client/marketing/components/knowledge-base/style.scss
+++ b/plugins/woocommerce-admin/client/marketing/components/knowledge-base/style.scss
@@ -1,5 +1,4 @@
 .woocommerce-marketing-knowledgebase-card {
-
 	.woocommerce-marketing-slider {
 		margin: 0 0 14px;
 	}
@@ -80,7 +79,7 @@
 		&-text {
 			margin: 10px 0 0;
 
-			@include breakpoint('>960px') {
+			@include breakpoint( '>960px' ) {
 				margin: 0;
 			}
 		}
@@ -92,13 +91,13 @@
 			line-height: 24px;
 			font-weight: 600;
 			white-space: normal;
-			color: $core-grey-dark-800;
+			color: $gray-900;
 			transition: color 0.2s ease;
 		}
 
 		&:hover {
 			h3 {
-				color: $theme-color;
+				color: var(--wp-admin-theme-color);
 			}
 		}
 
@@ -108,7 +107,7 @@
 			align-items: center;
 			font-size: 12px;
 			line-height: 17px;
-			color: $core-grey-dark-500;
+			color: $gray-700;
 			margin: 0;
 			padding: 0;
 			height: 17px;
diff --git a/plugins/woocommerce-admin/client/marketing/components/product-icon/style.scss b/plugins/woocommerce-admin/client/marketing/components/product-icon/style.scss
index 837d219a98b..d94585579eb 100644
--- a/plugins/woocommerce-admin/client/marketing/components/product-icon/style.scss
+++ b/plugins/woocommerce-admin/client/marketing/components/product-icon/style.scss
@@ -5,8 +5,8 @@
 	height: 36px;
 	border-radius: 8px;
 	// for loading state
-	background: $core-grey-light-300;
-	color: $core-grey-light-300;
+	background: $gray-100;
+	color: $gray-100;
 
 	svg {
 		width: 36px;
diff --git a/plugins/woocommerce-admin/client/marketing/components/recommended-extensions/style.scss b/plugins/woocommerce-admin/client/marketing/components/recommended-extensions/style.scss
index 01eb5c6647e..81c7e5beca8 100644
--- a/plugins/woocommerce-admin/client/marketing/components/recommended-extensions/style.scss
+++ b/plugins/woocommerce-admin/client/marketing/components/recommended-extensions/style.scss
@@ -37,7 +37,6 @@
 			}
 		}
 	}
-
 }
 
 .woocommerce-marketing-recommended-extensions-item {
@@ -47,24 +46,24 @@
 	position: relative;
 
 	h4 {
-		color: $core-grey-dark-800;
-		margin: -2px 0 ($gap-smallest - 1);
+		color: $gray-900;
+		margin: -2px 0 ( $gap-smallest - 1 );
 		font-size: 16px;
 		line-height: 1.3;
 		transition: color 0.2s ease;
 	}
 
 	p {
-		color: $core-grey-dark-500;
+		color: $gray-700;
 		margin: 0;
 	}
 
 	&:hover {
 		h4 {
-			color: $theme-color;
+			color: var(--wp-admin-theme-color);
 		}
 		p {
-			color: $core-grey-dark-900;
+			color: $gray-900;
 		}
 	}
 
@@ -77,5 +76,4 @@
 		top: 12px;
 		left: 12px;
 	}
-
 }
diff --git a/plugins/woocommerce-admin/client/marketing/coupons/style.scss b/plugins/woocommerce-admin/client/marketing/coupons/style.scss
index 565d9ca85b5..99c967a3929 100644
--- a/plugins/woocommerce-admin/client/marketing/coupons/style.scss
+++ b/plugins/woocommerce-admin/client/marketing/coupons/style.scss
@@ -11,7 +11,7 @@
 
 	.woocommerce-card__header {
 		padding: $gap $gap-large;
-		border-bottom: 1px solid $core-grey-light-500;
+		border-bottom: 1px solid $gray-100;
 		border-radius: 0;
 	}
 
@@ -29,11 +29,10 @@
 	}
 
 	.woocommerce-marketing-recommended-extensions-item {
-
 		.woocommerce-admin-marketing-product-icon {
 			background: $studio-white;
 			color: $studio-white;
-			border: 1px solid $theme-color;
+			border: 1px solid var(--wp-admin-theme-color);
 			overflow: hidden;
 			display: flex;
 			align-items: center;
@@ -44,13 +43,13 @@
 				width: 24px;
 				height: 24px;
 				transition: fill 0.2s ease;
-				fill: $theme-color;
+				fill: var(--wp-admin-theme-color);
 			}
 		}
 
 		&:hover {
 			.woocommerce-admin-marketing-product-icon {
-				background: $theme-color !important;
+				background: var(--wp-admin-theme-color) !important;
 
 				svg {
 					fill: #fff !important;
diff --git a/plugins/woocommerce-admin/client/marketing/overview/installed-extensions/style.scss b/plugins/woocommerce-admin/client/marketing/overview/installed-extensions/style.scss
index 875dccfe704..2b1518b6868 100644
--- a/plugins/woocommerce-admin/client/marketing/overview/installed-extensions/style.scss
+++ b/plugins/woocommerce-admin/client/marketing/overview/installed-extensions/style.scss
@@ -12,17 +12,17 @@
 			font-weight: 400;
 			font-size: 16px;
 			margin: 0 0 5px;
-			color: $core-grey-dark-800;
+			color: $gray-900;
 		}
 
 		p {
-			color: $core-grey-dark-500;
+			color: $gray-700;
 			margin: 0;
 		}
 	}
 
 	&__item:not(:last-child) {
-		border-bottom: 1px solid $core-grey-light-500;
+		border-bottom: 1px solid $gray-100;
 	}
 
 	&__item-text-and-actions {
@@ -69,7 +69,7 @@
 
 		a {
 			font-weight: 600;
-			color: $theme-color !important;
+			color: var(--wp-admin-theme-color) !important;
 			text-decoration: none;
 			font-size: 14px;
 		}
diff --git a/plugins/woocommerce-admin/client/marketing/overview/style.scss b/plugins/woocommerce-admin/client/marketing/overview/style.scss
index a38b659da9b..c17038012a4 100644
--- a/plugins/woocommerce-admin/client/marketing/overview/style.scss
+++ b/plugins/woocommerce-admin/client/marketing/overview/style.scss
@@ -4,7 +4,7 @@
 
 	.woocommerce-card__header {
 		padding: 16px 24px;
-		border-bottom: 1px solid $core-grey-light-500;
+		border-bottom: 1px solid $gray-100;
 	}
 
 	.woocommerce-card__title {
diff --git a/plugins/woocommerce-admin/client/marketing/overview/welcome-card/style.scss b/plugins/woocommerce-admin/client/marketing/overview/welcome-card/style.scss
index 29821ac6302..277743b630d 100644
--- a/plugins/woocommerce-admin/client/marketing/overview/welcome-card/style.scss
+++ b/plugins/woocommerce-admin/client/marketing/overview/welcome-card/style.scss
@@ -24,9 +24,9 @@
 		margin: 0;
 		border: none;
 		background: none;
-		color: $dark-gray-500;
+		color: $gray-700;
 		overflow: hidden;
-		border-radius: $radius-round-rectangle;
+		border-radius: 4px;
 		position: absolute;
 		top: 10px;
 		right: 10px;
diff --git a/plugins/woocommerce-admin/client/navigation/style.scss b/plugins/woocommerce-admin/client/navigation/style.scss
new file mode 100644
index 00000000000..e628f3f2bf6
--- /dev/null
+++ b/plugins/woocommerce-admin/client/navigation/style.scss
@@ -0,0 +1,19 @@
+.woocommerce-navigation {
+	position: fixed;
+	top: $admin-bar-height;
+	left: 0;
+	width: 160px;
+	height: 100%;
+	background: $core-grey-dark-800;
+}
+
+.woocommerce-navigation__menu-item {
+	padding: $gap-smaller 0;
+}
+
+.has-woocommerce-navigation {
+	#adminmenuwrap,
+	#adminmenuback {
+		display: none !important;
+	}
+}
diff --git a/plugins/woocommerce-admin/client/profile-wizard/style.scss b/plugins/woocommerce-admin/client/profile-wizard/style.scss
index 941fa1818b9..b7fee2aa340 100644
--- a/plugins/woocommerce-admin/client/profile-wizard/style.scss
+++ b/plugins/woocommerce-admin/client/profile-wizard/style.scss
@@ -93,7 +93,7 @@
 
 		.woocommerce-card ~ p {
 			font-size: 12px;
-			color: $core-grey-dark-150;
+			color: $gray-600;
 		}
 	}
 
@@ -310,7 +310,7 @@
 		box-shadow: $shadow-popover;
 
 		&.is-active {
-			border-color: $blue-medium-focus;
+			border-color: var(--wp-admin-theme-color);
 		}
 
 		.components-base-control__label {
@@ -452,14 +452,14 @@
 	margin-left: -$gap;
 	margin-right: -$gap;
 	padding: $gap-large $gap;
-	border-top: 1px solid $light-gray-tertiary;
-	border-bottom: 1px solid $light-gray-tertiary;
+	border-top: 1px solid $gray-100;
+	border-bottom: 1px solid $gray-100;
 	display: flex;
 	align-items: center;
 
 	label {
 		display: flex;
-		color: $dark-gray-primary;
+		color: $gray-900;
 		align-items: center;
 	}
 
@@ -469,7 +469,7 @@
 
 	.woocommerce-business-extensions__label-subtext {
 		display: block;
-		color: $core-grey-dark-150;
+		color: $gray-600;
 		font-size: 14px;
 	}
 
@@ -491,7 +491,7 @@
 			display: inline-flex;
 
 			i {
-				color: $blue-medium-focus;
+				color: var(--wp-admin-theme-color);
 				margin-right: $gap;
 			}
 		}
diff --git a/plugins/woocommerce-admin/client/stylesheets/abstracts/_breakpoints.scss b/plugins/woocommerce-admin/client/stylesheets/abstracts/_breakpoints.scss
index 5c5a1984a7b..fbef3a18ddd 100644
--- a/plugins/woocommerce-admin/client/stylesheets/abstracts/_breakpoints.scss
+++ b/plugins/woocommerce-admin/client/stylesheets/abstracts/_breakpoints.scss
@@ -22,13 +22,15 @@ $breakpoints: 320px, 400px, 600px, 782px, 960px, 1280px, 1440px;
 					@media (max-width: $breakpoint) {
 						@content;
 					}
-				} @else {
+				}
+				@else {
 					@if $size == $and-larger {
 						$approved-value: 2;
 						@media (min-width: $breakpoint + 1) {
 							@content;
 						}
-					} @else {
+					}
+					@else {
 						@each $breakpoint-end in $breakpoints {
 							$range: $breakpoint + '-' + $breakpoint-end;
 							@if $size == $range {
@@ -48,7 +50,8 @@ $breakpoints: 320px, 400px, 600px, 782px, 960px, 1280px, 1440px;
 				}
 				@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 {
+		}
+		@else {
 			$sizes: '';
 			@each $breakpoint in $breakpoints {
 				$sizes: $sizes + ' ' + $breakpoint;
diff --git a/plugins/woocommerce-admin/client/stylesheets/abstracts/_colors.scss b/plugins/woocommerce-admin/client/stylesheets/abstracts/_colors.scss
index c5e8ebde2fd..6918d612cdd 100644
--- a/plugins/woocommerce-admin/client/stylesheets/abstracts/_colors.scss
+++ b/plugins/woocommerce-admin/client/stylesheets/abstracts/_colors.scss
@@ -1,33 +1,10 @@
-
-
 @import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
+@import 'node_modules/@wordpress/base-styles/colors';
 
 $transparent: rgba(255, 255, 255, 0);
 
-// 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-150: #8d96a0;
-$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;
-$core-form-grey: #7e8993; // WP 5.3 form input border
-
-$gray-text: $core-grey-dark-500;
-$gray-text-hover: $core-grey-dark-800;
+$gray-text: $gray-700;
+$gray-text-hover: $gray-900;
 
 // Gutenberg
 $button-hover: #fafafa;
@@ -52,9 +29,3 @@ $button-border: darken($button, 20%);
 
 // Blues
 $core-blue-dark-900: #0071a1;
-
-// Inbox Messages
-$light-gray-secondary: #ccc;
-$light-gray-tertiary: #e7e8e9;
-$dark-gray-primary: #1e1e1e;
-$medium-gray-text: #757575;
diff --git a/plugins/woocommerce-admin/client/stylesheets/abstracts/_mixins.scss b/plugins/woocommerce-admin/client/stylesheets/abstracts/_mixins.scss
index 8a991d6f75b..80f93c65271 100644
--- a/plugins/woocommerce-admin/client/stylesheets/abstracts/_mixins.scss
+++ b/plugins/woocommerce-admin/client/stylesheets/abstracts/_mixins.scss
@@ -1,10 +1,8 @@
-
-
 // Rem output with px fallback
-@mixin font-size($sizeValue: 16, $lineHeight: false ) {
+@mixin font-size( $sizeValue: 16, $lineHeight: false ) {
 	font-size: $sizeValue + px;
-	font-size: ($sizeValue / 16) + rem;
-	@if ($lineHeight) {
+	font-size: ( $sizeValue / 16 ) + rem;
+	@if ( $lineHeight ) {
 		line-height: $lineHeight;
 	}
 }
@@ -24,14 +22,14 @@
 // Adds animation to placeholder section
 @mixin placeholder( $lighten-percentage: 30% ) {
 	animation: loading-fade 1.6s ease-in-out infinite;
-	background-color: $core-grey-light-500;
+	background-color: $gray-100;
 	color: transparent;
 
 	&::after {
 		content: '\00a0';
 	}
 
-	@media screen and (prefers-reduced-motion: reduce) {
+	@media screen and ( prefers-reduced-motion: reduce ) {
 		animation: none;
 	}
 }
@@ -40,7 +38,7 @@
 @mixin animate-transform( $duration: 0.2s ) {
 	transition: transform ease $duration;
 
-	@media screen and (prefers-reduced-motion: reduce) {
+	@media screen and ( prefers-reduced-motion: reduce ) {
 		transition: none;
 	}
 }
@@ -106,22 +104,22 @@
 
 @mixin button-style__hover {
 	background-color: $studio-white;
-	color: $dark-gray-900;
-	box-shadow: inset 0 0 0 1px $light-gray-500, inset 0 0 0 2px $studio-white,
-		0 1px 1px rgba($dark-gray-900, 0.2);
+	color: $gray-900;
+	box-shadow: inset 0 0 0 1px $gray-400, inset 0 0 0 2px $studio-white,
+		0 1px 1px rgba($gray-900, 0.2);
 }
 
 @mixin button-style__active() {
 	outline: none;
 	background-color: $studio-white;
-	color: $dark-gray-900;
-	box-shadow: inset 0 0 0 1px $light-gray-700, inset 0 0 0 2px $studio-white;
+	color: $gray-900;
+	box-shadow: inset 0 0 0 1px $gray-400, inset 0 0 0 2px $studio-white;
 }
 
 @mixin button-style__focus-active() {
 	background-color: $studio-white;
-	color: $dark-gray-900;
-	box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $studio-white;
+	color: $gray-900;
+	box-shadow: inset 0 0 0 1px $gray-700, inset 0 0 0 2px $studio-white;
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
@@ -129,17 +127,19 @@
 }
 
 /* stylelint-disable block-closing-brace-newline-after */
-@mixin reduce-motion($property: '') {
+@mixin reduce-motion( $property: '' ) {
 	@if $property == 'transition' {
-		@media (prefers-reduced-motion: reduce) {
+		@media ( prefers-reduced-motion: reduce ) {
 			transition-duration: 0s;
 		}
-	} @else if $property == 'animation' {
-		@media (prefers-reduced-motion: reduce) {
+	}
+	@else if $property == 'animation' {
+		@media ( prefers-reduced-motion: reduce ) {
 			animation-duration: 1ms;
 		}
-	} @else {
-		@media (prefers-reduced-motion: reduce) {
+	}
+	@else {
+		@media ( prefers-reduced-motion: reduce ) {
 			transition-duration: 0s;
 			animation-duration: 1ms;
 		}
@@ -155,7 +155,7 @@
 
 // Gutenberg Switch.
 @mixin switch-style__focus-active() {
-	box-shadow: 0 0 0 2px $studio-white, 0 0 0 3px $dark-gray-300;
+	box-shadow: 0 0 0 2px $studio-white, 0 0 0 3px $gray-700;
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
@@ -168,8 +168,8 @@
 		&:nth-child(#{$i}) {
 			grid-column-start: #{($i - 1) % $wrap-after + 1};
 			grid-column-end: #{($i - 1) % $wrap-after + 2};
-			grid-row-start: #{floor(($i - 1) / $wrap-after) + 1};
-			grid-row-end: #{floor(($i - 1) / $wrap-after) + 2};
+			grid-row-start: #{floor(( $i - 1 ) / $wrap-after) + 1};
+			grid-row-end: #{floor(( $i - 1 ) / $wrap-after) + 2};
 		}
 	}
 }
@@ -198,7 +198,7 @@
 }
 
 // Create a string-repeat function
-@function str-repeat($character, $n) {
+@function str-repeat( $character, $n ) {
 	@if $n == 0 {
 		@return '';
 	}
diff --git a/plugins/woocommerce-admin/client/stylesheets/abstracts/_variables.scss b/plugins/woocommerce-admin/client/stylesheets/abstracts/_variables.scss
index 077ad300569..b99633b2e1d 100644
--- a/plugins/woocommerce-admin/client/stylesheets/abstracts/_variables.scss
+++ b/plugins/woocommerce-admin/client/stylesheets/abstracts/_variables.scss
@@ -1,3 +1,5 @@
+@import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
+
 // Import Gutenberg variables
 @import 'node_modules/@wordpress/base-styles/colors';
 @import 'node_modules/@wordpress/base-styles/variables';
@@ -6,6 +8,11 @@
 @import 'node_modules/@wordpress/base-styles/animations';
 @import 'node_modules/@wordpress/base-styles/z-index';
 
+@include wordpress-admin-schemes;
+
+// TODO - remove this after the conflict with main is dealt with
+$core-grey-dark-800: $gray-900;
+
 $fallback-gutter: 24px;
 $fallback-gutter-large: 40px;
 $gutter: var(--main-gap);
@@ -31,24 +38,6 @@ $spacing: 16px;
 // Gutenberg variable overrides.
 $white: $studio-white;
 $black: $studio-black;
-$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;
-$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;
@@ -62,9 +51,9 @@ $wp-admin-background: #f1f1f1;
 $wp-admin-sidebar: #24292d;
 
 // Muriel
-$muriel-box-shadow-1dp: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
-	0 1px 3px 0 rgba(0, 0, 0, 0.12);
-$muriel-box-shadow-6dp: 0 3px 5px rgba(0, 0, 0, 0.2), 0 1px 18px rgba(0, 0, 0, 0.12),
-	0 6px 10px rgba(0, 0, 0, 0.14);
-$muriel-box-shadow-8dp: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
-	0 3px 14px 2px rgba(0, 0, 0, 0.12);
+$muriel-box-shadow-1dp: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
+	0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+$muriel-box-shadow-6dp: 0 3px 5px rgba(0, 0, 0, 0.2),
+	0 1px 18px rgba(0, 0, 0, 0.12), 0 6px 10px rgba(0, 0, 0, 0.14);
+$muriel-box-shadow-8dp: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+	0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
diff --git a/plugins/woocommerce-admin/client/stylesheets/shared/_global.scss b/plugins/woocommerce-admin/client/stylesheets/shared/_global.scss
index d51cbf903bf..c48b731c953 100644
--- a/plugins/woocommerce-admin/client/stylesheets/shared/_global.scss
+++ b/plugins/woocommerce-admin/client/stylesheets/shared/_global.scss
@@ -1,16 +1,14 @@
-
-
 // By using CSS variables, we can switch the spacing rhythm using a single media query.
 :root {
 	--large-gap: 40px;
 	--main-gap: 24px;
 }
-@media (max-width: 960px) {
+@media ( max-width: 960px ) {
 	:root {
 		--large-gap: 24px;
 	}
 }
-@media (max-width: 782px) {
+@media ( max-width: 782px ) {
 	:root {
 		--large-gap: 16px;
 		--main-gap: 16px;
@@ -32,7 +30,7 @@
 
 .woocommerce-layout {
 	select:hover {
-		color: $core-grey-dark-700;
+		color: $gray-900;
 	}
 
 	select.components-select-control__input {
diff --git a/plugins/woocommerce-admin/client/task-list/style.scss b/plugins/woocommerce-admin/client/task-list/style.scss
index f7c7603ae44..234bd6253dd 100644
--- a/plugins/woocommerce-admin/client/task-list/style.scss
+++ b/plugins/woocommerce-admin/client/task-list/style.scss
@@ -10,14 +10,14 @@
 			}
 			.woocommerce-list__item:not(.is-complete) {
 				.woocommerce-task__icon {
-					border: 1px solid $core-grey-light-500;
+					border: 1px solid $gray-100;
 					background: $white;
 				}
 			}
 
 			.woocommerce-list__item.is-complete {
 				.woocommerce-list__item-title {
-					color: $medium-gray-text;
+					color: $gray-700;
 				}
 			}
 
@@ -41,7 +41,7 @@
 	}
 
 	.woocommerce-task__estimated-time {
-		color: $core-grey-dark-300;
+		color: $gray-700;
 		font-weight: 400;
 		font-size: 12px;
 		display: block;
@@ -336,7 +336,7 @@
 		}
 	}
 
-	@include breakpoint('<600px') {
+	@include breakpoint( '<600px' ) {
 		.woocommerce-card__body {
 			flex-direction: column;
 		}
@@ -403,8 +403,7 @@
 }
 
 .woocommerce-task-dashboard__container {
-	.woocommerce-task-payments
-	.woocommerce-task-payments__actions {
+	.woocommerce-task-payments .woocommerce-task-payments__actions {
 		text-align: center;
 	}
 
@@ -470,7 +469,7 @@
 	}
 
 	.woocommerce-task-card__prompt-pointer {
-		border-bottom: 10px solid $core-grey-dark-700; /* Snackbar color */
+		border-bottom: 10px solid $gray-900; /* Snackbar color */
 		border-left: 10px solid transparent;
 		border-right: 10px solid transparent;
 		position: relative;
@@ -496,7 +495,7 @@
 
 	&:hover {
 		.woocommerce-task-card__prompt-pointer {
-			border-bottom-color: $core-grey-dark-900; /* Snackbar hover */
+			border-bottom-color: $gray-900; /* Snackbar hover */
 		}
 	}
 }
@@ -565,35 +564,36 @@
 
 	// Firefox
 	& {
-		background-color: $light-gray-300;
+		background-color: $gray-100;
 	}
 
 	&::-moz-progress-bar {
-		background-color: $dark-gray-500;
+		background-color: $gray-700;
 		border-top-left-radius: 2px;
 		border-top-right-radius: 2px;
 	}
 
 	// Chrome
 	&::-webkit-progress-bar {
-		background-color: $light-gray-300;
+		background-color: $gray-100;
 		border-top-left-radius: 2px;
 		border-top-right-radius: 2px;
 	}
 
 	&::-webkit-progress-value {
-		background-color: $dark-gray-500;
+		background-color: $gray-700;
 		border-top-left-radius: 2px;
 	}
 }
 
-.woocommerce-task-dashboard__container .woocommerce-task-card__progress-bar.completed {
+.woocommerce-task-dashboard__container
+.woocommerce-task-card__progress-bar.completed {
 	&::-webkit-progress-value {
 		border-top-right-radius: 2px;
 	}
 }
 
 .woocommerce-task__caption {
-	color: $dark-gray-300;
+	color: $gray-700;
 	margin-top: $gap;
 }
diff --git a/plugins/woocommerce-admin/package-lock.json b/plugins/woocommerce-admin/package-lock.json
index 67928ddf56d..139e2ce1827 100644
--- a/plugins/woocommerce-admin/package-lock.json
+++ b/plugins/woocommerce-admin/package-lock.json
@@ -6250,10 +6250,9 @@
 			}
 		},
 		"@wordpress/base-styles": {
-			"version": "1.8.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/base-styles/-/base-styles-1.8.0.tgz",
-			"integrity": "sha512-NXcR72DgB61dgcjEmRbbssRlvm5eTuCSOtMvvK7nzkN4J72sLfxXHEONeqzePt92D/60sX+AifmO8DmKN0zzPQ==",
-			"dev": true
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/base-styles/-/base-styles-2.0.0.tgz",
+			"integrity": "sha512-l0/j0+nVBvCtd/PFj/g6J2R8XuVLLRCNV2jSlnf0SPuswBZ2NYPvCLmf/OZ1Nw/c2O+Erdvq8IdYvXOObewqxQ=="
 		},
 		"@wordpress/browserslist-config": {
 			"version": "2.6.0",
@@ -6262,45 +6261,55 @@
 			"dev": true
 		},
 		"@wordpress/components": {
-			"version": "9.6.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/components/-/components-9.6.0.tgz",
-			"integrity": "sha512-moGKwpkwpXvKPfYPQ+q9leDv9eQKaMeeTfy83FmFtLCMWRXANJuNUPYJVS1rtAXuAx+dkxx9a6AYdRpoF7iTNQ==",
+			"version": "10.0.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/components/-/components-10.0.0.tgz",
+			"integrity": "sha512-2iJw70xAhIQSjR7DLRbYTZx84OFqjGUZNE4U2fy7vg30z5TItP3KQ133VOW9uqQwl4U9gzovIAluq1nq8TuX1A==",
 			"requires": {
 				"@babel/runtime": "^7.9.2",
 				"@emotion/core": "^10.0.22",
 				"@emotion/css": "^10.0.22",
 				"@emotion/native": "^10.0.22",
 				"@emotion/styled": "^10.0.23",
-				"@wordpress/a11y": "^2.9.0",
-				"@wordpress/compose": "^3.15.0",
-				"@wordpress/deprecated": "^2.8.0",
-				"@wordpress/dom": "^2.9.0",
-				"@wordpress/element": "^2.14.0",
-				"@wordpress/hooks": "^2.8.0",
-				"@wordpress/i18n": "^3.12.0",
-				"@wordpress/icons": "^2.0.0",
-				"@wordpress/is-shallow-equal": "^2.0.0",
-				"@wordpress/keycodes": "^2.12.0",
-				"@wordpress/primitives": "^1.5.0",
-				"@wordpress/rich-text": "^3.16.0",
-				"@wordpress/warning": "^1.1.0",
+				"@wordpress/a11y": "^2.11.0",
+				"@wordpress/compose": "^3.19.0",
+				"@wordpress/deprecated": "^2.9.0",
+				"@wordpress/dom": "^2.13.0",
+				"@wordpress/element": "^2.16.0",
+				"@wordpress/hooks": "^2.9.0",
+				"@wordpress/i18n": "^3.14.0",
+				"@wordpress/icons": "^2.4.0",
+				"@wordpress/is-shallow-equal": "^2.1.0",
+				"@wordpress/keycodes": "^2.14.0",
+				"@wordpress/primitives": "^1.7.0",
+				"@wordpress/rich-text": "^3.20.0",
+				"@wordpress/warning": "^1.2.0",
 				"classnames": "^2.2.5",
-				"clipboard": "^2.0.1",
 				"dom-scroll-into-view": "^1.2.1",
-				"downshift": "^4.0.5",
+				"downshift": "^5.4.0",
 				"gradient-parser": "^0.1.5",
 				"lodash": "^4.17.15",
 				"memize": "^1.1.0",
 				"moment": "^2.22.1",
-				"re-resizable": "^6.0.0",
+				"re-resizable": "^6.4.0",
 				"react-dates": "^17.1.1",
+				"react-resize-aware": "^3.0.1",
 				"react-spring": "^8.0.20",
-				"reakit": "^1.0.0-rc.2",
+				"react-use-gesture": "^7.0.15",
+				"reakit": "^1.1.0",
 				"rememo": "^3.0.0",
 				"tinycolor2": "^1.4.1",
 				"uuid": "^7.0.2"
 			},
 			"dependencies": {
+				"@wordpress/dom": {
+					"version": "2.13.1",
+					"resolved": "https://registry.npmjs.org/@wordpress/dom/-/dom-2.13.1.tgz",
+					"integrity": "sha512-1Qs5sc4v4nFO9XhBCh1DnfNq/OWqD/kPYG6YUIbO4NH1h13lJDBx7FVZBsjsIMM7koTO9tD8ML01hxyofuo9Ow==",
+					"requires": {
+						"@babel/runtime": "^7.9.2",
+						"lodash": "^4.17.15"
+					}
+				},
 				"@wordpress/element": {
 					"version": "2.16.0",
 					"resolved": "https://registry.npmjs.org/@wordpress/element/-/element-2.16.0.tgz",
@@ -6313,6 +6322,14 @@
 						"react-dom": "^16.9.0"
 					}
 				},
+				"@wordpress/hooks": {
+					"version": "2.9.0",
+					"resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-2.9.0.tgz",
+					"integrity": "sha512-RL7bIIwy1BJWPOicwtDdC1cO+0HqHhnRtry8qeatv+/qN7O5YrJaslCMot7R4Y9cIgzX8C8Vj2BN2QsXLqUAGg==",
+					"requires": {
+						"@babel/runtime": "^7.9.2"
+					}
+				},
 				"@wordpress/i18n": {
 					"version": "3.14.0",
 					"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-3.14.0.tgz",
@@ -6326,6 +6343,16 @@
 						"tannin": "^1.2.0"
 					}
 				},
+				"@wordpress/icons": {
+					"version": "2.4.0",
+					"resolved": "https://registry.npmjs.org/@wordpress/icons/-/icons-2.4.0.tgz",
+					"integrity": "sha512-G7ClNkJX8Hr/eSudoGM/cONrnwGspYLcL5Jf38lrk7Irrfl3rJXULnqe1FFcs4QHMgQuZUTphtrcMbiG6alKpw==",
+					"requires": {
+						"@babel/runtime": "^7.9.2",
+						"@wordpress/element": "^2.16.0",
+						"@wordpress/primitives": "^1.7.0"
+					}
+				},
 				"@wordpress/keycodes": {
 					"version": "2.14.0",
 					"resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-2.14.0.tgz",
@@ -6685,12 +6712,6 @@
 				"postcss-custom-properties": "^9.1.1"
 			},
 			"dependencies": {
-				"@wordpress/base-styles": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/@wordpress/base-styles/-/base-styles-2.0.0.tgz",
-					"integrity": "sha512-l0/j0+nVBvCtd/PFj/g6J2R8XuVLLRCNV2jSlnf0SPuswBZ2NYPvCLmf/OZ1Nw/c2O+Erdvq8IdYvXOObewqxQ==",
-					"dev": true
-				},
 				"@wordpress/postcss-themes": {
 					"version": "2.6.0",
 					"resolved": "https://registry.npmjs.org/@wordpress/postcss-themes/-/postcss-themes-2.6.0.tgz",
@@ -6812,13 +6833,13 @@
 			}
 		},
 		"@wordpress/rich-text": {
-			"version": "3.20.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/rich-text/-/rich-text-3.20.0.tgz",
-			"integrity": "sha512-pPz7xvttFAfEkWpRnDh3WH7Ueh2lbatOGyFEgkvTX1SWH4cd9xWpJj4J/wrQ705VwQveTtoyb0HA0B0GU/5UYA==",
+			"version": "3.20.1",
+			"resolved": "https://registry.npmjs.org/@wordpress/rich-text/-/rich-text-3.20.1.tgz",
+			"integrity": "sha512-VhvwSKaXN6sFoiuBsJmDVJRO1izBsO1CcVATs7PnhPXE4l3AUnvluSbd/d0JP3Gqq/hxprdutPffRMLcODKnfw==",
 			"requires": {
 				"@babel/runtime": "^7.9.2",
-				"@wordpress/compose": "^3.19.0",
-				"@wordpress/data": "^4.22.0",
+				"@wordpress/compose": "^3.19.1",
+				"@wordpress/data": "^4.22.1",
 				"@wordpress/deprecated": "^2.9.0",
 				"@wordpress/element": "^2.16.0",
 				"@wordpress/escape-html": "^1.9.0",
@@ -6830,13 +6851,28 @@
 				"rememo": "^3.0.0"
 			},
 			"dependencies": {
-				"@wordpress/data": {
-					"version": "4.22.0",
-					"resolved": "https://registry.npmjs.org/@wordpress/data/-/data-4.22.0.tgz",
-					"integrity": "sha512-dflzpbNnor/C2EUoidk8+qePTd6SyoiMFjcOijVD9el6248hlYOKxCNHBadcgJ+XO3BYTzImQgkPE87iCCIuNQ==",
+				"@wordpress/compose": {
+					"version": "3.19.1",
+					"resolved": "https://registry.npmjs.org/@wordpress/compose/-/compose-3.19.1.tgz",
+					"integrity": "sha512-D9IoSQJKgQ2Yqz/SDRjoeT26USR7PoTxzyO7Hk2EyolfPoB0sko0LjwbbndfLYYLksAcZ4x1js4cK9+tHkFJNA==",
 					"requires": {
 						"@babel/runtime": "^7.9.2",
-						"@wordpress/compose": "^3.19.0",
+						"@wordpress/element": "^2.16.0",
+						"@wordpress/is-shallow-equal": "^2.1.0",
+						"@wordpress/priority-queue": "^1.7.0",
+						"clipboard": "^2.0.1",
+						"lodash": "^4.17.15",
+						"mousetrap": "^1.6.5",
+						"react-resize-aware": "^3.0.1"
+					}
+				},
+				"@wordpress/data": {
+					"version": "4.22.1",
+					"resolved": "https://registry.npmjs.org/@wordpress/data/-/data-4.22.1.tgz",
+					"integrity": "sha512-Fbr3Og6myQvjhluG1SoJe9LOrFaDBCF0NsP8UcAE2EJuKI11C9eGJ/iLcy9nhRy/oRzOG3ju8+5qF1Sx2vsQ4A==",
+					"requires": {
+						"@babel/runtime": "^7.9.2",
+						"@wordpress/compose": "^3.19.1",
 						"@wordpress/deprecated": "^2.9.0",
 						"@wordpress/element": "^2.16.0",
 						"@wordpress/is-shallow-equal": "^2.1.0",
@@ -12775,14 +12811,14 @@
 			}
 		},
 		"downshift": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/downshift/-/downshift-4.1.0.tgz",
-			"integrity": "sha512-GODZOZC65a8n8YD/S/87hR2t5PJfqZ7+lwEBJsNi/AJnhImfle+CFD/ZPde4l+nB8QNHfn0GbE1W9djEFOj1yQ==",
+			"version": "5.4.6",
+			"resolved": "https://registry.npmjs.org/downshift/-/downshift-5.4.6.tgz",
+			"integrity": "sha512-GtSCmZUQMulQQ0gX3N3jvUAABJNU8IfAMLzFLu0E2fcOTt98xropy0iriYW2PSClRUqJ4QwKAov7FDy9Gk9aOA==",
 			"requires": {
-				"@babel/runtime": "^7.4.5",
-				"compute-scroll-into-view": "^1.0.9",
+				"@babel/runtime": "^7.10.2",
+				"compute-scroll-into-view": "^1.0.14",
 				"prop-types": "^15.7.2",
-				"react-is": "^16.9.0"
+				"react-is": "^16.13.1"
 			}
 		},
 		"duplexer": {
@@ -23876,7 +23912,7 @@
 			"dev": true
 		},
 		"prettier": {
-			"version": "1.19.1",
+			"version": "npm:prettier@1.19.1",
 			"resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-1.19.1.tgz",
 			"integrity": "sha512-mqAC2r1NDmRjG+z3KCJ/i61tycKlmADIjxnDhQab+KBxSAGbF/W7/zwB2guy/ypIeKrrftNsIYkNZZQKf3vJcg==",
 			"dev": true
@@ -24538,9 +24574,9 @@
 			}
 		},
 		"re-resizable": {
-			"version": "6.5.2",
-			"resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.5.2.tgz",
-			"integrity": "sha512-Pjo3ydkr/meTr6j3YZqyv+9fRS5UNOj5SaAI06gHFQ35BnpsZKmwNvupCnbo11gjQ1I62Uy+UzlHLO9xPQEuWQ==",
+			"version": "6.5.4",
+			"resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.5.4.tgz",
+			"integrity": "sha512-7T3L1lexB2zkZIDmzRJbwdq+xGFuRkrEVQIf5hBPnh7JuS9kG9Yc8XgIaxTWic1kU7jVlDgqzfId/gvmpBCjpA==",
 			"requires": {
 				"fast-memoize": "^2.5.1"
 			}
@@ -25250,6 +25286,11 @@
 				"prop-types": "^15.6.2"
 			}
 		},
+		"react-use-gesture": {
+			"version": "7.0.15",
+			"resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-7.0.15.tgz",
+			"integrity": "sha512-vHQkaa7oUbSDTAcFk9huQXa7E8KPrZH91erPuOMoqZT513qvtbb/SzTQ33lHc71/kOoJkMbzOkc4uoA4sT7Ogg=="
+		},
 		"react-visibility-sensor": {
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/react-visibility-sensor/-/react-visibility-sensor-5.1.1.tgz",
diff --git a/plugins/woocommerce-admin/package.json b/plugins/woocommerce-admin/package.json
index 85a8f3d1d87..25a714be8fe 100644
--- a/plugins/woocommerce-admin/package.json
+++ b/plugins/woocommerce-admin/package.json
@@ -94,7 +94,8 @@
 	"dependencies": {
 		"@fresh-data/framework": "0.6.1",
 		"@wordpress/api-fetch": "2.2.8",
-		"@wordpress/components": "9.6.0",
+		"@wordpress/base-styles": "2.0.0",
+		"@wordpress/components": "10.0.0",
 		"@wordpress/data": "4.16.1",
 		"@wordpress/data-controls": "1.10.1",
 		"@wordpress/date": "3.9.0",
@@ -162,12 +163,11 @@
 		"@wordpress/babel-plugin-import-jsx-pragma": "1.1.3",
 		"@wordpress/babel-plugin-makepot": "2.1.3",
 		"@wordpress/babel-preset-default": "3.0.2",
-		"@wordpress/base-styles": "1.8.0",
 		"@wordpress/browserslist-config": "2.6.0",
 		"@wordpress/custom-templated-path-webpack-plugin": "1.6.0",
 		"@wordpress/eslint-plugin": "3.4.1",
 		"@wordpress/jest-preset-default": "5.5.0",
-		"@wordpress/postcss-plugins-preset": "1.1.0",
+		"@wordpress/postcss-plugins-preset": "1.3.0",
 		"@wordpress/postcss-themes": "1.0.5",
 		"ast-types": "0.13.3",
 		"autoprefixer": "9.8.4",
diff --git a/plugins/woocommerce-admin/packages/components/src/advanced-filters/style.scss b/plugins/woocommerce-admin/packages/components/src/advanced-filters/style.scss
index 8176b26f6fa..0e8a1115651 100644
--- a/plugins/woocommerce-admin/packages/components/src/advanced-filters/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/advanced-filters/style.scss
@@ -1,5 +1,3 @@
-
-
 .woocommerce-filters-advanced {
 	margin: $gap-large 0;
 
@@ -23,9 +21,8 @@
 
 	@include breakpoint( '<782px' ) {
 		margin: $gap 0;
-		border: 1px solid $core-grey-light-700;
+		border: 1px solid $gray-400;
 	}
-
 	@include breakpoint( '<400px' ) {
 		margin: $gap-small 0;
 	}
@@ -46,11 +43,11 @@
 	margin: 0;
 	display: grid;
 	grid-template-columns: 1fr 40px;
-	background-color: $core-grey-light-100;
-	border-bottom: 1px solid $core-grey-light-700;
+	background-color: $gray-100;
+	border-bottom: 1px solid $gray-400;
 
 	&:hover {
-		background-color: $core-grey-light-200;
+		background-color: $gray-200;
 	}
 
 	.woocommerce-filters-advanced__line-item {
@@ -65,7 +62,7 @@
 		width: 40px;
 		height: 38px;
 		align-self: center;
-		color: $core-grey-dark-500;
+		color: $gray-700;
 		padding: $gap-smaller;
 
 		@include breakpoint( '<400px' ) {
@@ -91,11 +88,11 @@
 	margin: 0;
 	color: $studio-woocommerce-purple;
 	display: block;
-	background-color: $core-grey-light-100;
-	border-bottom: 1px solid $core-grey-light-700;
+	background-color: $gray-100;
+	border-bottom: 1px solid $gray-400;
 
 	&:hover {
-		background-color: $core-grey-light-200;
+		background-color: $gray-200;
 	}
 
 	div div {
@@ -172,7 +169,7 @@
 
 .woocommerce-filters-advanced__add-button {
 	align-items: center;
-	color: $core-grey-dark-500;
+	color: $gray-700;
 	padding: $gap-smaller;
 
 	svg {
@@ -212,11 +209,11 @@
 		padding: $gap-smaller;
 
 		&:hover {
-			background-color: $core-grey-light-200;
+			background-color: $gray-200;
 		}
 
 		&:not(:disabled):not([aria-disabled='true']):focus {
-			background-color: $core-grey-light-300;
+			background-color: $gray-100;
 			box-shadow: none;
 		}
 	}
diff --git a/plugins/woocommerce-admin/packages/components/src/calendar/style.scss b/plugins/woocommerce-admin/packages/components/src/calendar/style.scss
index 2799b163df9..b105fed897c 100644
--- a/plugins/woocommerce-admin/packages/components/src/calendar/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/calendar/style.scss
@@ -1,9 +1,7 @@
-
-
 .woocommerce-calendar {
 	width: 100%;
-	background-color: $core-grey-light-100;
-	border-top: 1px solid $core-grey-light-700;
+	background-color: $gray-100;
+	border-top: 1px solid $gray-400;
 	height: 396px;
 
 	&.is-mobile {
@@ -24,49 +22,49 @@
 	}
 
 	.CalendarDay__selected_span {
-		background: theme(primary);
-		border: 1px solid $core-grey-light-700;
+		background: var(--wp-admin-theme-color);
+		border: 1px solid $gray-400;
 
 		&:hover {
-			background: theme(secondary);
-			border: 1px solid $core-grey-light-500;
+			background: var(--wp-admin-theme-color-darker-10);
+			border: 1px solid $gray-100;
 		}
 	}
 
 	.CalendarDay__selected {
-		background: color(theme(primary) shade(20%));
-		border: 1px solid $core-grey-light-700;
+		background: var(--wp-admin-theme-color-darker-20);
+		border: 1px solid $gray-400;
 
 		&:hover {
-			background: theme(secondary);
-			border: 1px solid $core-grey-light-500;
+			background: var(--wp-admin-theme-color-darker-10);
+			border: 1px solid $gray-100;
 		}
 	}
 
 	.CalendarDay__hovered_span {
-		background: color(theme(primary) shade(15%));
-		border: 1px solid $core-grey-light-500;
+		background: var(--wp-admin-theme-color-darker-10);
+		border: 1px solid $gray-100;
 		color: $studio-white;
 
 		&:hover {
 			color: $studio-white;
-			background: theme(primary);
+			background: var(--wp-admin-theme-color);
 		}
 	}
 
 	.CalendarDay__blocked_out_of_range {
-		color: $core-grey-light-900;
+		color: $gray-400;
 	}
 
 	.DayPicker_transitionContainer,
 	.CalendarMonthGrid,
 	.CalendarMonth,
 	.DayPicker {
-		background-color: $core-grey-light-100;
+		background-color: $gray-100;
 	}
 
 	.DayPicker_weekHeader_li {
-		color: $core-grey-dark-400;
+		color: $gray-700;
 	}
 
 	.DayPickerNavigation_button {
@@ -122,7 +120,7 @@
 		left: 10px;
 
 		path {
-			fill: $core-grey-dark-300;
+			fill: $gray-700;
 		}
 	}
 
@@ -136,7 +134,7 @@
 
 	&.is-empty {
 		.dashicons-calendar path {
-			fill: $core-grey-dark-300;
+			fill: $gray-700;
 		}
 	}
 
@@ -150,26 +148,29 @@
 			box-shadow: inset 0 0 8px $error-red;
 
 			&:focus {
-				box-shadow: inset 0 0 8px $error-red, 0 0 6px rgba(30, 140, 190, 0.8);
+				box-shadow: inset 0 0 8px $error-red,
+					0 0 6px rgba(30, 140, 190, 0.8);
 			}
 		}
 	}
 
 	.woocommerce-calendar__input-text {
-		color: $core-grey-dark-500;
+		color: $gray-700;
 		border-radius: 3px;
 		padding: 10px 10px 10px 30px;
 		width: 100%;
 		@include font-size( 13 );
 
 		&::placeholder {
-			color: $core-grey-dark-300;
+			color: $gray-700;
 		}
 	}
 }
 
 .woocommerce-filters-date__content {
-	&.is-mobile .woocommerce-calendar__input-error .components-popover__content {
+	&.is-mobile
+	.woocommerce-calendar__input-error
+	.components-popover__content {
 		height: initial;
 	}
 }
@@ -187,7 +188,7 @@
 	}
 
 	.components-popover__content {
-		background-color: $core-grey-dark-400;
+		background-color: $gray-700;
 		color: $studio-white;
 		padding: 0.5em;
 		border: none;
@@ -201,13 +202,13 @@
 		}
 
 		&:not(.no-arrow):not(.is-mobile).is-bottom::before {
-			border-bottom-color: $core-grey-dark-400;
+			border-bottom-color: $gray-700;
 			z-index: 1;
 			top: -6px;
 		}
 
 		&:not(.no-arrow):not(.is-mobile).is-top::after {
-			border-top-color: $core-grey-dark-400;
+			border-top-color: $gray-700;
 			z-index: 1;
 			top: 0;
 		}
@@ -219,7 +220,7 @@
 	font-weight: 100;
 	text-transform: uppercase;
 	text-align: center;
-	color: $core-grey-dark-300;
+	color: $gray-700;
 	width: 100%;
 	margin: 0;
 	padding: 1em;
diff --git a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.scss b/plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.scss
index 5e22d41af8e..d76dcef27e2 100644
--- a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.scss
+++ b/plugins/woocommerce-admin/packages/components/src/chart/d3chart/legend.scss
@@ -1,5 +1,3 @@
-
-
 .woocommerce-legend {
 	&.has-total {
 		padding-bottom: 50px;
@@ -7,7 +5,7 @@
 	}
 
 	&.woocommerce-legend__direction-column {
-		border-right: 1px solid $core-grey-light-700;
+		border-right: 1px solid $gray-400;
 		min-width: 320px;
 
 		.woocommerce-chart__footer & {
@@ -28,7 +26,7 @@
 		overflow: auto;
 
 		.woocommerce-chart__footer & {
-			border-top: 1px solid $core-grey-light-700;
+			border-top: 1px solid $gray-400;
 			height: 100%;
 			max-height: none;
 			min-height: none;
@@ -56,7 +54,7 @@
 		justify-content: center;
 		align-items: center;
 		background-color: $studio-white;
-		color: $core-grey-dark-500;
+		color: $gray-700;
 		cursor: pointer;
 		display: inline-flex;
 		flex-direction: row;
@@ -79,13 +77,13 @@
 			&:hover {
 				input {
 					~ .woocommerce-legend__item-checkmark {
-						background-color: $core-grey-light-200;
+						background-color: $gray-200;
 					}
 				}
 			}
 
 			.woocommerce-legend__item-checkmark {
-				border: 1px solid $core-grey-light-900;
+				border: 1px solid $gray-400;
 				position: absolute;
 				top: 4px;
 				left: 0;
@@ -132,13 +130,13 @@
 
 			.woocommerce-legend__item-container {
 				.woocommerce-legend__item-checkmark {
-					outline: 2px solid $core-grey-light-900;
+					outline: 2px solid $gray-400;
 				}
 			}
 		}
 
 		&:hover {
-			background-color: $core-grey-light-100;
+			background-color: $gray-100;
 		}
 	}
 
@@ -190,9 +188,9 @@
 .woocommerce-legend__total {
 	align-items: center;
 	background: $studio-white;
-	border-top: 1px solid $core-grey-light-700;
+	border-top: 1px solid $gray-400;
 	bottom: 0;
-	color: $core-grey-dark-500;
+	color: $gray-700;
 	display: flex;
 	height: 50px;
 	justify-content: center;
diff --git a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/style.scss b/plugins/woocommerce-admin/packages/components/src/chart/d3chart/style.scss
index 5f004771883..4eb8d42451f 100644
--- a/plugins/woocommerce-admin/packages/components/src/chart/d3chart/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/chart/d3chart/style.scss
@@ -1,4 +1,3 @@
-
 /**
  * Internal Dependencies
  */
@@ -19,7 +18,7 @@
 	.d3-chart__empty-message {
 		align-items: center;
 		bottom: 0;
-		color: $core-grey-dark-300;
+		color: $gray-700;
 		display: flex;
 		@include font-size( 18 );
 		font-weight: bold;
@@ -41,7 +40,7 @@
 	}
 
 	.d3-chart__tooltip {
-		border: 1px solid $core-grey-light-700;
+		border: 1px solid $gray-400;
 		position: absolute;
 		display: flex;
 		min-width: 324px;
@@ -49,7 +48,8 @@
 		background-color: $studio-white;
 		text-align: left;
 		padding: 17px;
-		box-shadow: 0 3px 20px 0 rgba(18, 24, 30, 0.1), 0 1px 3px 0 rgba(18, 24, 30, 0.1);
+		box-shadow: 0 3px 20px 0 rgba(18, 24, 30, 0.1),
+			0 1px 3px 0 rgba(18, 24, 30, 0.1);
 		flex-direction: column;
 		flex-wrap: nowrap;
 		justify-content: flex-start;
@@ -68,7 +68,7 @@
 			width: 100%;
 			text-transform: uppercase;
 			font-size: 11px;
-			color: $core-grey-dark-300;
+			color: $gray-700;
 			margin-top: 0;
 		}
 
@@ -120,14 +120,14 @@
 	.grid {
 		.tick {
 			line {
-				stroke: $core-grey-light-500;
+				stroke: $gray-100;
 				stroke-width: 1;
 				shape-rendering: crispEdges;
 			}
 
 			&:first-child {
 				line {
-					stroke: $core-grey-dark-500;
+					stroke: $gray-700;
 				}
 			}
 		}
@@ -143,7 +143,7 @@
 		text-anchor: start;
 		&.tick {
 			&text {
-				fill: $core-grey-dark-500;
+				fill: $gray-700;
 			}
 		}
 	}
diff --git a/plugins/woocommerce-admin/packages/components/src/chart/style.scss b/plugins/woocommerce-admin/packages/components/src/chart/style.scss
index 9411ae4a6fe..b4ed6f4ce8d 100644
--- a/plugins/woocommerce-admin/packages/components/src/chart/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/chart/style.scss
@@ -1,11 +1,9 @@
-
 .woocommerce-chart {
 	margin-top: -$gap;
 	margin-bottom: $gap-large;
 	background: $studio-white;
-	border: 1px solid $core-grey-light-700;
+	border: 1px solid $gray-400;
 	border-top: 0;
-
 	@include breakpoint( '<782px' ) {
 		margin-left: -16px;
 		margin-right: -16px;
@@ -17,7 +15,7 @@
 
 	.woocommerce-chart__header {
 		min-height: 50px;
-		border-bottom: 1px solid $core-grey-light-700;
+		border-bottom: 1px solid $gray-400;
 		display: flex;
 		flex-flow: row wrap;
 		justify-content: space-between;
@@ -66,7 +64,7 @@
 
 .woocommerce-chart__interval-select {
 	align-items: start;
-	border-right: 1px solid $core-grey-light-700;
+	border-right: 1px solid $gray-400;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
@@ -104,12 +102,12 @@
 	background: transparent !important;
 
 	&.components-button {
-		color: $core-grey-light-700;
+		color: $gray-400;
 		display: inline-flex;
 		padding: 8px;
 
 		&.woocommerce-chart__type-button-selected {
-			color: $core-grey-dark-500;
+			color: $gray-700;
 		}
 	}
 }
diff --git a/plugins/woocommerce-admin/packages/components/src/date-range-filter-picker/style.scss b/plugins/woocommerce-admin/packages/components/src/date-range-filter-picker/style.scss
index 90d113bc257..e82d9a4c524 100644
--- a/plugins/woocommerce-admin/packages/components/src/date-range-filter-picker/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/date-range-filter-picker/style.scss
@@ -1,5 +1,3 @@
-
-
 .woocommerce-filters-date__content {
 	&.is-mobile {
 		.components-popover__header {
@@ -20,7 +18,7 @@
 
 .woocommerce-filters-date__tabs {
 	height: calc(100% - 42px);
-	border-top: 1px solid $core-grey-light-700;
+	border-top: 1px solid $gray-400;
 
 	.components-tab-panel__tabs {
 		display: flex;
@@ -47,7 +45,7 @@
 	font-weight: 100;
 	text-transform: uppercase;
 	text-align: center;
-	color: $core-grey-dark-300;
+	color: $gray-700;
 	width: 100%;
 	margin: 0;
 	padding: 1em;
@@ -63,7 +61,7 @@
 	background-color: $studio-white;
 
 	&.is-custom {
-		border-top: 1px solid $core-grey-light-700;
+		border-top: 1px solid $gray-400;
 	}
 }
 
diff --git a/plugins/woocommerce-admin/packages/components/src/dropdown-button/style.scss b/plugins/woocommerce-admin/packages/components/src/dropdown-button/style.scss
index 71627764070..88f8a89329d 100644
--- a/plugins/woocommerce-admin/packages/components/src/dropdown-button/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/dropdown-button/style.scss
@@ -1,10 +1,8 @@
-
-
 .woocommerce-page .woocommerce-dropdown-button {
 	background-color: $studio-white;
 	position: relative;
-	border: 1px solid $core-grey-light-500;
-	color: $core-grey-dark-500;
+	border: 1px solid $gray-100;
+	color: $gray-700;
 	border-radius: 4px;
 	padding: 0 40px 0 0;
 	width: 100%;
@@ -12,7 +10,9 @@
 
 	&::after {
 		content: '';
-		background: transparent url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 0 top 55%;
+		background: transparent
+			url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E)
+			no-repeat right 0 top 55%;
 		position: absolute;
 		right: 14px;
 		width: 32px;
@@ -29,7 +29,7 @@
 	&:hover,
 	&:active,
 	&.is-open {
-		background-color: $core-grey-light-100;
+		background-color: $gray-100;
 	}
 
 	&.is-multi-line .woocommerce-dropdown-button__labels {
@@ -37,7 +37,7 @@
 	}
 
 	&:not(:focus):not(.is-open) {
-		border-color: $core-form-grey;
+		border-color: $gray-700;
 	}
 }
 
diff --git a/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/style.scss b/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/style.scss
index 57029872948..849f7060a02 100644
--- a/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/ellipsis-menu/style.scss
@@ -1,4 +1,3 @@
-
 .woocommerce-ellipsis-menu {
 	text-align: center;
 }
@@ -37,7 +36,7 @@
 
 	.woocommerce-ellipsis-menu__item {
 		cursor: pointer;
-		color: $core-grey-dark-300;
+		color: $gray-700;
 
 		&:focus {
 			box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px $studio-white;
@@ -52,7 +51,7 @@
 
 	.components-base-control__label,
 	.woocommerce-ellipsis-menu__title {
-		color: $core-grey-dark-800;
+		color: $gray-900;
 		padding-top: $gap-smaller;
 		padding-bottom: $gap-smaller;
 		@include font-size( 15 );
diff --git a/plugins/woocommerce-admin/packages/components/src/filter-picker/style.scss b/plugins/woocommerce-admin/packages/components/src/filter-picker/style.scss
index 418921f780e..1b34bd36205 100644
--- a/plugins/woocommerce-admin/packages/components/src/filter-picker/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/filter-picker/style.scss
@@ -1,5 +1,3 @@
-
-
 .woocommerce-filters-filter__content {
 	&.is-mobile {
 		.components-popover__header-title {
@@ -7,11 +5,11 @@
 			font-weight: 100;
 			text-transform: uppercase;
 			text-align: center;
-			color: $core-grey-dark-500;
+			color: $gray-700;
 		}
 
 		.woocommerce-filters-filter__content-list-item:last-child {
-			border-bottom: 1px solid $core-grey-light-700;
+			border-bottom: 1px solid $gray-400;
 		}
 	}
 }
@@ -24,7 +22,7 @@
 
 .woocommerce-filters-filter__content-list-item {
 	border: 1px solid transparent;
-	border-bottom: 1px solid $core-grey-light-700;
+	border-bottom: 1px solid $gray-400;
 	margin: 0;
 
 	&:last-child {
@@ -58,20 +56,20 @@
 		display: flex;
 		width: 100%;
 		padding: 1em 1em 1em 3em;
-		background-color: $core-grey-light-100;
+		background-color: $gray-100;
 		text-align: left;
 
 		&.components-button {
-			color: $core-grey-dark-500;
+			color: $gray-700;
 		}
 
 		&:hover {
-			background-color: $core-grey-light-200;
-			color: $core-grey-dark-500;
+			background-color: $gray-200;
+			color: $gray-700;
 		}
 
 		&.components-button:not(:disabled):not([aria-disabled='true']):focus {
-			background-color: $core-grey-light-100;
+			background-color: $gray-100;
 		}
 
 		svg {
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/style.scss b/plugins/woocommerce-admin/packages/components/src/filters/style.scss
index 9d6c539d19c..b1afc4fb117 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/filters/style.scss
@@ -1,5 +1,3 @@
-
-
 .woocommerce-filters {
 	.components-base-control__field {
 		margin-bottom: 0;
@@ -68,12 +66,12 @@
 .woocommerce-filters-filter__content {
 	.components-popover__content {
 		width: 320px;
-		border: 1px solid $core-grey-light-700;
+		border: 1px solid $gray-400;
 		background-color: $studio-white;
 	}
 
 	.woocommerce-calendar__input-error .components-popover__content {
-		background-color: $core-grey-dark-400;
+		background-color: $gray-700;
 	}
 
 	&.is-mobile {
@@ -91,8 +89,8 @@
 
 .woocommerce-filters__compare-body {
 	padding: $gap;
-	background-color: $core-grey-light-100;
-	border-bottom: 1px solid $core-grey-light-500;
+	background-color: $gray-100;
+	border-bottom: 1px solid $gray-100;
 }
 
 .woocommerce-filters__compare-footer {
diff --git a/plugins/woocommerce-admin/packages/components/src/flag/style.scss b/plugins/woocommerce-admin/packages/components/src/flag/style.scss
index b3830e46599..18b422b596b 100644
--- a/plugins/woocommerce-admin/packages/components/src/flag/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/flag/style.scss
@@ -1,11 +1,10 @@
-
 .woocommerce-flag {
 	span {
 		vertical-align: middle;
 	}
 
 	.woocommerce-flag__fallback {
-		background: $core-grey-light-500;
+		background: $gray-100;
 		color: transparent;
 		width: 24px;
 		height: 18px;
diff --git a/plugins/woocommerce-admin/packages/components/src/list/stories/style.scss b/plugins/woocommerce-admin/packages/components/src/list/stories/style.scss
index 8ad7bf0a75a..8f677d33917 100644
--- a/plugins/woocommerce-admin/packages/components/src/list/stories/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/list/stories/style.scss
@@ -1,11 +1,11 @@
 .storybook-custom-list {
-	border: 1px solid $core-grey-light-900;
+	border: 1px solid $gray-400;
 	border-radius: 2px;
 	padding: 0;
 
 	.woocommerce-list__item {
 		&:not(:first-child) {
-			border-top: 1px solid $core-grey-light-600;
+			border-top: 1px solid $gray-200;
 		}
 
 		.woocommerce-list__item-before {
diff --git a/plugins/woocommerce-admin/packages/components/src/list/style.scss b/plugins/woocommerce-admin/packages/components/src/list/style.scss
index 47625df0b3d..7c633f21369 100644
--- a/plugins/woocommerce-admin/packages/components/src/list/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/list/style.scss
@@ -20,7 +20,8 @@
 		padding: $gap $gap-large;
 
 		&:focus {
-			box-shadow: inset 0 0 0 1px $studio-wordpress-blue, inset 0 0 0 2px $studio-white;
+			box-shadow: inset 0 0 0 1px $studio-wordpress-blue,
+				inset 0 0 0 2px $studio-white;
 		}
 	}
 
@@ -49,11 +50,11 @@
 		margin-left: auto;
 	}
 
-	$chevron-color: $dark-gray-primary;
+	$chevron-color: $gray-900;
 	$background-color: $white;
-	$background-color-hover: $light-gray-100;
-	$border-color: $light-gray-tertiary;
-	$foreground-color: $theme-color;
+	$background-color-hover: $gray-100;
+	$border-color: $gray-100;
+	$foreground-color: var(--wp-admin-theme-color);
 	$foreground-color-hover: color($foreground-color shade(20%));
 
 	background-color: $background-color;
@@ -88,11 +89,11 @@
 
 	&.is-complete {
 		.woocommerce-task__icon {
-			background-color: $theme-color;
+			background-color: var(--wp-admin-theme-color);
 		}
 
 		.woocommerce-list__item-title {
-			color: $dark-gray-500;
+			color: $gray-700;
 		}
 
 		.woocommerce-list__item-content {
diff --git a/plugins/woocommerce-admin/packages/components/src/order-status/style.scss b/plugins/woocommerce-admin/packages/components/src/order-status/style.scss
index 258db16e017..99d13219017 100644
--- a/plugins/woocommerce-admin/packages/components/src/order-status/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/order-status/style.scss
@@ -1,5 +1,3 @@
-
-
 .woocommerce-order-status {
 	display: flex;
 	align-items: center;
@@ -10,10 +8,10 @@
 	width: 16px;
 	height: 16px;
 	display: block;
-	background: $core-grey-light-700;
+	background: $gray-400;
 	margin-right: $gap-smallest * 2;
 	border-radius: 50%;
-	border: 3px solid $core-grey-light-500;
+	border: 3px solid $gray-100;
 
 	&.is-processing {
 		background: $valid-green;
diff --git a/plugins/woocommerce-admin/packages/components/src/pagination/style.scss b/plugins/woocommerce-admin/packages/components/src/pagination/style.scss
index 15c236447e5..339541a5047 100644
--- a/plugins/woocommerce-admin/packages/components/src/pagination/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/pagination/style.scss
@@ -1,5 +1,3 @@
-
-
 .woocommerce-pagination {
 	display: flex;
 	flex-direction: row;
@@ -36,7 +34,7 @@
 	}
 
 	.components-button:not(:disabled):not([aria-disabled='true']):hover {
-		color: $core-grey-dark-300;
+		color: $gray-700;
 	}
 
 	button:first-child {
diff --git a/plugins/woocommerce-admin/packages/components/src/rating/style.scss b/plugins/woocommerce-admin/packages/components/src/rating/style.scss
index a8cc14d8484..3fc2ac4715d 100644
--- a/plugins/woocommerce-admin/packages/components/src/rating/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/rating/style.scss
@@ -1,5 +1,3 @@
-
-
 .woocommerce-rating {
 	position: relative;
 	vertical-align: middle;
@@ -8,7 +6,7 @@
 	white-space: nowrap;
 
 	.gridicon {
-		fill: $core-grey-light-600;
+		fill: $gray-200;
 	}
 
 	.woocommerce-rating__star-outline {
@@ -19,7 +17,7 @@
 		overflow: hidden;
 
 		.gridicon {
-			fill: $core-grey-dark-500;
+			fill: $gray-700;
 		}
 	}
 }
diff --git a/plugins/woocommerce-admin/packages/components/src/search-list-control/style.scss b/plugins/woocommerce-admin/packages/components/src/search-list-control/style.scss
index 9d1141a24fc..3863f1848b6 100644
--- a/plugins/woocommerce-admin/packages/components/src/search-list-control/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/search-list-control/style.scss
@@ -9,7 +9,7 @@
 	padding: $gap 0 0;
 	// 76px is the height of 1 row of tags.
 	min-height: 76px;
-	border-top: 1px solid $core-grey-light-500;
+	border-top: 1px solid $gray-100;
 
 	.woocommerce-search-list__selected-header {
 		margin-bottom: $gap-smaller;
@@ -27,7 +27,7 @@
 .woocommerce-search-list__search {
 	margin: $gap 0;
 	padding: $gap 0 0;
-	border-top: 1px solid $core-grey-light-500;
+	border-top: 1px solid $gray-100;
 
 	.components-base-control__field {
 		margin-bottom: $gap;
@@ -39,8 +39,8 @@
 	max-height: 17em;
 	overflow-x: hidden;
 	overflow-y: auto;
-	border-top: 1px solid $core-grey-light-500;
-	border-bottom: 1px solid $core-grey-light-500;
+	border-top: 1px solid $gray-100;
+	border-bottom: 1px solid $gray-100;
 
 	&.is-loading {
 		padding: $gap-small 0;
@@ -78,7 +78,7 @@
 	}
 
 	& > [role='menu'] {
-		border: 1px solid $core-grey-light-500;
+		border: 1px solid $gray-100;
 		border-bottom: none;
 	}
 
@@ -89,11 +89,11 @@
 		padding: $gap-small $gap;
 		background: $studio-white;
 		// !important to keep the border around on hover
-		border-bottom: 1px solid $core-grey-light-500 !important;
-		color: $core-grey-dark-500;
+		border-bottom: 1px solid $gray-100 !important;
+		color: $gray-700;
 
 		@include hover-state {
-			background: $core-grey-light-100;
+			background: $gray-100;
 		}
 
 		&:last-child {
@@ -122,7 +122,7 @@
 		}
 
 		&:not(.depth-0) + .depth-0 {
-			border-top: 1px solid $core-grey-light-500;
+			border-top: 1px solid $gray-100;
 		}
 
 		// Anything deeper than 5 levels will use this fallback depth
@@ -148,7 +148,7 @@
 
 		.woocommerce-search-list__item-prefix {
 			display: none;
-			color: $core-grey-dark-300;
+			color: $gray-700;
 		}
 
 		&.is-searching,
@@ -170,18 +170,18 @@
 
 		&.is-searching {
 			.woocommerce-search-list__item-name {
-				color: $core-grey-dark-900;
+				color: $gray-900;
 			}
 		}
 
 		.woocommerce-search-list__item-count {
 			flex: 0 1 auto;
 			padding: $gap-smallest/2 $gap-smaller;
-			border: 1px solid $core-grey-light-500;
+			border: 1px solid $gray-100;
 			border-radius: 12px;
 			font-size: 0.8em;
 			line-height: 1.4;
-			color: $core-grey-dark-300;
+			color: $gray-700;
 			background: $studio-white;
 			white-space: nowrap;
 		}
diff --git a/plugins/woocommerce-admin/packages/components/src/search/style.scss b/plugins/woocommerce-admin/packages/components/src/search/style.scss
index 5f8373458c3..324f128622c 100644
--- a/plugins/woocommerce-admin/packages/components/src/search/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/search/style.scss
@@ -1,5 +1,3 @@
-
-
 .woocommerce-search.woocommerce-select-control {
 	position: relative;
 
@@ -7,7 +5,7 @@
 		position: absolute;
 		top: 9px;
 		left: 10px;
-		color: $core-grey-light-900;
+		color: $gray-400;
 		font-size: 20px;
 	}
 
@@ -19,16 +17,16 @@
 
 	.woocommerce-select-control__control {
 		height: auto;
-		border: 1px solid $core-grey-light-700;
+		border: 1px solid $gray-400;
 		font-size: 13px;
 		width: 100%;
 		padding: 3px 2px 3px 36px;
 		border-radius: 4px;
-		border-color: $core-form-grey;
+		border-color: $gray-700;
 		box-shadow: $shadow-popover;
 
 		&.is-active {
-			border-color: $blue-medium-focus;
+			border-color: var(--wp-admin-theme-color);
 		}
 	}
 
@@ -55,7 +53,9 @@
 
 	.is-active.components-base-control .components-base-control__label,
 	.with-value.components-base-control .components-base-control__label,
-	&.has-inline-tags .has-tags.components-base-control .components-base-control__label {
+	&.has-inline-tags
+	.has-tags.components-base-control
+	.components-base-control__label {
 		display: none;
 	}
 
@@ -68,7 +68,7 @@
 	}
 
 	.woocommerce-select-control__listbox {
-		border: 1px solid $core-grey-light-700;
+		border: 1px solid $gray-400;
 		top: 38px;
 	}
 
@@ -87,8 +87,8 @@
 		padding: $gap-small;
 		color: $studio-woocommerce-purple;
 		text-align: left;
-		background: $core-grey-light-100;
-		border-bottom: 1px solid $core-grey-light-500;
+		background: $gray-100;
+		border-bottom: 1px solid $gray-100;
 		font-size: 13px;
 		min-height: 43px;
 
@@ -99,7 +99,7 @@
 		&:hover {
 			box-shadow: none;
 			color: $studio-woocommerce-purple;
-			background: $core-grey-light-200;
+			background: $gray-200;
 		}
 
 		&.is-selected,
@@ -107,7 +107,8 @@
 		&:active {
 			color: $studio-woocommerce-purple;
 			background: $studio-white;
-			box-shadow: inset 0 0 0 1px $core-grey-light-200, inset 0 0 0 2px $wp-admin-sidebar;
+			box-shadow: inset 0 0 0 1px $gray-200,
+				inset 0 0 0 2px $wp-admin-sidebar;
 		}
 
 		.woocommerce-search__result-thumbnail {
diff --git a/plugins/woocommerce-admin/packages/components/src/segmented-selection/style.scss b/plugins/woocommerce-admin/packages/components/src/segmented-selection/style.scss
index e7f11630319..f6f62c0125c 100644
--- a/plugins/woocommerce-admin/packages/components/src/segmented-selection/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/segmented-selection/style.scss
@@ -1,27 +1,25 @@
-
-
 .woocommerce-segmented-selection {
 	width: 100%;
-	color: $core-grey-dark-500;
+	color: $gray-700;
 }
 
 .woocommerce-segmented-selection__container {
 	width: 100%;
 	grid-template-columns: 1fr 1fr;
 	display: grid;
-	border-top: 1px solid $core-grey-light-700;
-	border-bottom: 1px solid $core-grey-light-700;
-	background-color: $core-grey-light-700;
+	border-top: 1px solid $gray-400;
+	border-bottom: 1px solid $gray-400;
+	background-color: $gray-400;
 }
 
 .woocommerce-segmented-selection__item {
 	&:nth-child(2n) {
-		border-left: 1px solid $core-grey-light-700;
-		border-top: 1px solid $core-grey-light-700;
+		border-left: 1px solid $gray-400;
+		border-top: 1px solid $gray-400;
 	}
 
 	&:nth-child(2n + 1) {
-		border-top: 1px solid $core-grey-light-700;
+		border-top: 1px solid $gray-400;
 	}
 
 	&:nth-child(-n + 2) {
@@ -30,18 +28,18 @@
 }
 
 .woocommerce-segmented-selection__label {
-	background-color: $core-grey-light-100;
+	background-color: $gray-100;
 	padding: $gap-small $gap-small $gap-small $gap-larger;
 	position: relative;
 	display: block;
 	height: 100%;
 
 	&:active {
-		background-color: $core-grey-light-200;
+		background-color: $gray-200;
 	}
 
 	&:hover {
-		background-color: $core-grey-light-200;
+		background-color: $gray-200;
 	}
 }
 
@@ -51,7 +49,7 @@
 	left: -9999px;
 
 	&:active + label .woocommerce-segmented-selection__label {
-		background-color: $core-grey-light-200;
+		background-color: $gray-200;
 	}
 
 	&:checked + label .woocommerce-segmented-selection__label {
@@ -62,7 +60,7 @@
 			content: '';
 			width: 8px;
 			height: 8px;
-			background-color: $theme-color;
+			background-color: var(--wp-admin-theme-color);
 			position: absolute;
 			top: 50%;
 			transform: translate(-20px, -50%);
diff --git a/plugins/woocommerce-admin/packages/components/src/stepper/style.scss b/plugins/woocommerce-admin/packages/components/src/stepper/style.scss
index 159ab61af78..35273260735 100644
--- a/plugins/woocommerce-admin/packages/components/src/stepper/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/stepper/style.scss
@@ -1,5 +1,3 @@
-
-
 .woocommerce-stepper {
 	$step-icon-size: 24px;
 
@@ -60,7 +58,7 @@
 			min-width: 24px;
 			width: 24px;
 			border-radius: 50%;
-			background: $blue-medium-focus;
+			background: var(--wp-admin-theme-color);
 		}
 
 		.woocommerce-spinner__circle {
@@ -70,7 +68,7 @@
 		&.is-active,
 		&.is-complete {
 			.woocommerce-stepper__step-icon {
-				background: $blue-medium-focus;
+				background: var(--wp-admin-theme-color);
 				color: $studio-white;
 			}
 
@@ -149,8 +147,8 @@
 			content: '';
 			position: absolute;
 			left: $step-icon-size / 2 + $gap-smaller;
-			top: $step-icon-size + ($gap-smaller * 2);
-			height: calc(100% - #{$step-icon-size} - #{ $gap-smaller * 2 });
+			top: $step-icon-size + ( $gap-smaller * 2 );
+			height: calc(100% - #{$step-icon-size} - #{$gap-smaller * 2});
 			border-left: 1px solid $studio-gray-5;
 		}
 
diff --git a/plugins/woocommerce-admin/packages/components/src/summary/style.scss b/plugins/woocommerce-admin/packages/components/src/summary/style.scss
index 432e1b62c89..fe690ef22c1 100644
--- a/plugins/woocommerce-admin/packages/components/src/summary/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/summary/style.scss
@@ -1,17 +1,17 @@
-
-
 // Set up some local color variables to make the CSS more clear
-$border: $light-gray-tertiary;
+$border: $gray-200;
 
 // A local mixin to generate the grid template and border logic
 @mixin make-cols( $i ) {
 	grid-template-columns: repeat($i, 1fr);
 
-	.woocommerce-summary__item-container:nth-of-type(#{$i}n) .woocommerce-summary__item {
+	.woocommerce-summary__item-container:nth-of-type(#{$i}n)
+	.woocommerce-summary__item {
 		border-right-color: $border;
 	}
 
-	.woocommerce-summary__item-container:nth-of-type(#{$i}n+1):nth-last-of-type(-n+#{$i}) {
+	.woocommerce-summary__item-container:nth-of-type(#{$i}n
++ 1):nth-last-of-type(-n + #{$i}) {
 		.woocommerce-summary__item,
 		& ~ .woocommerce-summary__item-container .woocommerce-summary__item {
 			border-bottom-color: $border;
@@ -34,7 +34,7 @@ $border: $light-gray-tertiary;
 	border-width: 1px 0 0 1px;
 	border-style: solid;
 	border-color: $border;
-	background-color: $core-grey-light-300;
+	background-color: $gray-100;
 	box-shadow: inset -1px -1px 0 $border;
 
 	@include breakpoint( '<782px' ) {
@@ -159,7 +159,8 @@ $border: $light-gray-tertiary;
 
 		&.has-9-items,
 		&.has-10-items {
-			.woocommerce-summary__item-container:nth-of-type(5n) .woocommerce-summary__item {
+			.woocommerce-summary__item-container:nth-of-type(5n)
+			.woocommerce-summary__item {
 				border-right-color: $border;
 			}
 		}
@@ -258,12 +259,12 @@ $border: $light-gray-tertiary;
 	flex-direction: column;
 	height: 100%;
 	padding: $gap-large;
-	background-color: $core-grey-light-100;
+	background-color: $gray-100;
 	border-bottom: 1px solid $border;
 	border-right: 1px solid $border;
 	line-height: 1.4em;
 	text-decoration: none;
-	color: $theme-color;
+	color: $gray-900;
 
 	&.components-button {
 		height: auto;
@@ -271,26 +272,29 @@ $border: $light-gray-tertiary;
 		align-items: normal;
 	}
 
-
 	&:hover {
-		background-color: $light-gray-100;
-		color: color($theme-color shade(20%));
+		background-color: $gray-100;
+		color: var(--wp-admin-theme-color);
+
+		.woocommerce-summary__item-label {
+			color: var(--wp-admin-theme-color);
+		}
 	}
 
 	&:active {
-		background-color: $light-gray-200;
+		background-color: $gray-100;
 	}
 
 	&:focus {
 		// !important to override button styles
-		box-shadow: inset -1px -1px 0 $core-grey-dark-300, inset 1px 1px 0 $core-grey-dark-300 !important;
+		box-shadow: inset -1px -1px 0 $gray-700, inset 1px 1px 0 $gray-700 !important;
 	}
 
 	&.is-selected {
-
 		&:focus {
 			// !important to override button styles
-			box-shadow: inset -1px 1px 0 $core-grey-dark-300, inset 1px 0 0 $core-grey-dark-300, inset 0 -4px 0 $theme-color !important;
+			box-shadow: inset -1px 1px 0 $gray-700, inset 1px 0 0 $gray-700,
+				inset 0 -4px 0 var(--wp-admin-theme-color) !important;
 		}
 	}
 
@@ -312,26 +316,26 @@ $border: $light-gray-tertiary;
 	.woocommerce-summary__item-label {
 		display: block;
 		margin-bottom: $gap;
-		color: $theme-color;
+		color: $gray-700;
 	}
 
 	.woocommerce-summary__item-value {
 		margin-bottom: $gap-smallest;
 		font-weight: 500;
-		color: $dark-gray-primary;
+		color: $gray-900;
 	}
 
 	.woocommerce-summary__item-delta {
 		padding: 5px;
 		border-radius: 3px;
 		height: min-content;
-		background-color: $light-gray-500;
-		color: $dark-gray-primary;
+		background-color: $gray-100;
+		color: $gray-900;
 	}
 
 	&.is-selected {
 		background: $studio-white;
-		box-shadow: inset 0 -4px 0 $theme-color;
+		box-shadow: inset 0 -4px 0 var(--wp-admin-theme-color);
 
 		.woocommerce-summary__item-value {
 			font-weight: 600;
diff --git a/plugins/woocommerce-admin/packages/components/src/table/style.scss b/plugins/woocommerce-admin/packages/components/src/table/style.scss
index c9cd88fdfcb..364738bf80e 100644
--- a/plugins/woocommerce-admin/packages/components/src/table/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/table/style.scss
@@ -1,5 +1,3 @@
-
-
 .woocommerce-table {
 	.woocommerce-card__body {
 		padding: 0;
@@ -20,12 +18,12 @@
 	$header-row-height: #{$gap-smaller * 2} + #{$row-text-height} + 1px;
 	&.is-empty {
 		align-items: center;
-		background: $core-grey-light-100;
-		color: $core-grey-dark-500;
+		background: $gray-100;
+		color: $gray-700;
 		display: flex;
 		// Default to 5 rows for browsers not supporting custom properties (IE11)
-		height: calc(#{$header-row-height} + (#{$row-height}) * 5);
-		height: calc(#{$header-row-height} + (#{$row-height}) * var(--number-of-rows));
+		height: calc(#{$header-row-height} + ( #{$row-height} ) * 5);
+		height: calc(#{$header-row-height} + ( #{$row-height} ) * var(--number-of-rows));
 		justify-content: center;
 		padding: $gap;
 		text-align: center;
@@ -106,7 +104,7 @@
 
 	tr:hover,
 	tr:focus-within {
-		background-color: $core-grey-light-200;
+		background-color: $gray-200;
 		td,
 		th {
 			background: transparent;
@@ -118,7 +116,7 @@
 .woocommerce-table__item,
 .woocommerce-table__empty-item {
 	padding: $gap $gap-large;
-	border-bottom: 1px solid $core-grey-light-500;
+	border-bottom: 1px solid $gray-100;
 }
 
 .woocommerce-table__header,
@@ -163,7 +161,7 @@
 	}
 
 	&.is-sorted {
-		background-color: $core-grey-light-100;
+		background-color: $gray-100;
 	}
 
 	&.is-checkbox-column {
@@ -180,7 +178,7 @@
 .woocommerce-table__empty-item {
 	text-align: center;
 	@include font-size( 18 );
-	color: $core-grey-dark-300;
+	color: $gray-700;
 	font-weight: bold;
 
 	@include breakpoint( '<782px' ) {
@@ -195,12 +193,12 @@ th.woocommerce-table__item {
 .woocommerce-table__header {
 	padding: $gap-smaller $gap-large;
 	background-color: #f8f9fa;
-	border-bottom: 1px solid $core-grey-light-700;
+	border-bottom: 1px solid $gray-400;
 	font-weight: bold;
 	white-space: nowrap;
 
 	& + .woocommerce-table__header {
-		border-left: 1px solid $core-grey-light-700;
+		border-left: 1px solid $gray-400;
 	}
 
 	&.is-left-aligned.is-sortable {
diff --git a/plugins/woocommerce-admin/packages/components/src/tag/style.scss b/plugins/woocommerce-admin/packages/components/src/tag/style.scss
index d64feca7e87..5258a069099 100644
--- a/plugins/woocommerce-admin/packages/components/src/tag/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/tag/style.scss
@@ -1,5 +1,3 @@
-
-
 .woocommerce-tag {
 	display: inline-flex;
 	margin: 1px 4px 1px 0;
@@ -10,7 +8,7 @@
 	.woocommerce-tag__remove {
 		display: inline-block;
 		line-height: 24px;
-		background: $core-grey-light-500;
+		background: $gray-100;
 		transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);
 	}
 
@@ -18,7 +16,7 @@
 		align-self: center;
 		padding: 0 $gap-smaller;
 		border-radius: 12px;
-		color: $core-grey-dark-500;
+		color: $gray-700;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -33,13 +31,13 @@
 		cursor: pointer;
 		padding: 0 2px;
 		border-radius: 0 12px 12px 0;
-		color: $core-grey-dark-500;
+		color: $gray-700;
 		line-height: 10px;
 		text-indent: 0;
 		height: 24px;
 
 		&:hover {
-			color: $core-grey-dark-700;
+			color: $gray-900;
 		}
 	}
 }
diff --git a/plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/style.scss b/plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/style.scss
index 89e8c24fcc2..86428fc36e5 100644
--- a/plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/style.scss
@@ -15,7 +15,7 @@
 			border-right-width: 0;
 
 			& + .text-control-with-affixes__suffix {
-				border-left: 1px solid $core-grey-light-500;
+				border-left: 1px solid $gray-100;
 			}
 		}
 	}
@@ -37,7 +37,7 @@
 	background: $studio-white;
 	border-width: 1px;
 	border-style: solid;
-	border-color: $core-form-grey;
+	border-color: $gray-700;
 	color: $gray-text;
 	padding: 7px 14px;
 	white-space: nowrap;
@@ -63,7 +63,7 @@
 	& + input[type='text'],
 	& + input[type='number'] {
 		&:disabled {
-			border-left-color: $core-grey-light-500;
+			border-left-color: $gray-100;
 		}
 	}
 }
diff --git a/plugins/woocommerce-admin/packages/components/src/text-control/style.scss b/plugins/woocommerce-admin/packages/components/src/text-control/style.scss
index d18a9ad0610..e942478026e 100644
--- a/plugins/woocommerce-admin/packages/components/src/text-control/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/text-control/style.scss
@@ -1,5 +1,3 @@
-
-
 .muriel-input-text {
 	background: $studio-white;
 	border: 1px solid $studio-gray-20;
@@ -24,7 +22,22 @@
 		}
 	}
 
-	.components-text-control__input {
+	// @wordpress/components styles for text control target all types, so we must also do that
+	// to increase specificity and override the styles.
+	.components-text-control__input,
+	.components-text-control__input[type='text'],
+	.components-text-control__input[type='tel'],
+	.components-text-control__input[type='time'],
+	.components-text-control__input[type='url'],
+	.components-text-control__input[type='week'],
+	.components-text-control__input[type='password'],
+	.components-text-control__input[type='color'],
+	.components-text-control__input[type='date'],
+	.components-text-control__input[type='datetime'],
+	.components-text-control__input[type='datetime-local'],
+	.components-text-control__input[type='email'],
+	.components-text-control__input[type='month'],
+	.components-text-control__input[type='number'] {
 		border: 0;
 		box-shadow: none;
 		font-size: 16px;
@@ -39,7 +52,7 @@
 	}
 
 	&.active {
-		box-shadow: 0 0 0 2px $blue-medium-focus;
+		box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
 		border-color: transparent;
 
 		input {