WordPress · jasmussen · Jun 29, 2020 · Jun 25, 2020 · Jun 25, 2020 · Jun 25, 2020
diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md
@@ -5,6 +5,7 @@
 ## Breaking Changes
 
 - Remove the AdminColorThemes JavaScript variables.
+- Retire numerous colors and old grays, indicate others for deprecation.
 
 ## 1.2.0 (2020-01-13)
 

diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
@@ -2,107 +2,51 @@
  * Colors
  */
 
-// Hugo's new WordPress shades of gray, from http://codepen.io/hugobaeta/pen/grJjVp.
-$black: #000;
+// WordPress colors.
+$black: #000;					// Use only when you truly need pure black. For UI, use $dark-gray-primary.
+$dark-gray-primary: #1e1e1e;
+$medium-gray-text: #757575;		// Meets 4.6:1 text contrast against white.
+$light-gray-ui: #949494;		// Meets 3:1 UI or large text contrast against white.
+$light-gray-secondary: #ccc;
+$light-gray-tertiary: #e7e8e9;
+$white: #fff;
+$blue-medium-focus-dark: $white;	// Focus color when the theme is dark.
+
+// Opacities. For use when transparency is needed.
+$dark-gray-placeholder: rgba($dark-gray-primary, 0.62);
+$medium-gray-placeholder: rgba($dark-gray-primary, 0.55);
+$light-gray-placeholder: rgba($white, 0.65);
+
+// Alert colors.
+$alert-yellow: #f0b849;
+$alert-red: #d94f4f;
+$alert-green: #4ab866;
+
+
+/**
+ * Deprecated colors.
+ * Please avoid using these.
+ */
+
 $dark-gray-900: #191e23;
 $dark-gray-800: #23282d;
 $dark-gray-700: #32373c;
 $dark-gray-600: #40464d;
-$dark-gray-500: #555d66; // Use this most of the time for dark items.
+$dark-gray-500: #555d66;
 $dark-gray-400: #606a73;
-$dark-gray-300: #6c7781; // Lightest gray that can be used for AA text contrast.
+$dark-gray-300: #6c7781;
 $dark-gray-200: #7e8993;
-$dark-gray-150: #8d96a0; // Lightest gray that can be used for AA non-text contrast.
+$dark-gray-150: #8d96a0;
 $dark-gray-100: #8f98a1;
+
 $light-gray-900: #a2aab2;
 $light-gray-800: #b5bcc2;
 $light-gray-700: #ccd0d4;
 $light-gray-600: #d7dade;
-$light-gray-500: #e2e4e7; // Good for "grayed" items and borders.
-$light-gray-400: #e8eaeb; // Good for "readonly" input fields and special text selection.
+$light-gray-500: #e2e4e7;
+$light-gray-400: #e8eaeb;
 $light-gray-300: #edeff0;
 $light-gray-200: #f3f4f5;
 $light-gray-100: #f8f9f9;
-$white: #fff;
-
-// G2 colors.
-$dark-gray-primary: #1e1e1e;
-$medium-gray-text: #757575;		// Meets 4.6:1 text contrast.
-$light-gray-ui: #949494;		// Meets 3:1 UI contrast.
-$light-gray-secondary: #ccc;
-$light-gray-tertiary: #e7e8e9;
-$blue-medium-focus-dark: $white;
-
-// Dark opacities, for use with light themes.
-$dark-opacity-900: rgba(#000510, 0.9);
-$dark-opacity-800: rgba(#00000a, 0.85);
-$dark-opacity-700: rgba(#06060b, 0.8);
-$dark-opacity-600: rgba(#000913, 0.75);
-$dark-opacity-500: rgba(#0a1829, 0.7);
-$dark-opacity-400: rgba(#0a1829, 0.65);
-$dark-opacity-300: rgba(#0e1c2e, 0.62);
-$dark-opacity-200: rgba(#162435, 0.55);
-$dark-opacity-100: rgba(#223443, 0.5);
-$dark-opacity-light-900: rgba(#304455, 0.45);
-$dark-opacity-light-800: rgba(#425863, 0.4);
-$dark-opacity-light-700: rgba(#667886, 0.35);
-$dark-opacity-light-600: rgba(#7b86a2, 0.3);
-$dark-opacity-light-500: rgba(#9197a2, 0.25);
-$dark-opacity-light-400: rgba(#95959c, 0.2);
-$dark-opacity-light-300: rgba(#829493, 0.15);
-$dark-opacity-light-200: rgba(#8b8b96, 0.1);
-$dark-opacity-light-100: rgba(#747474, 0.05);
-$dark-opacity-background-fill: rgba($dark-gray-700, 0.7); // Similar to $dark-opacity-light-200, but more opaque.
-
-// Light opacities, for use with dark themes.
-$light-opacity-900: rgba($white, 1);
-$light-opacity-800: rgba($white, 0.9);
-$light-opacity-700: rgba($white, 0.85);
-$light-opacity-600: rgba($white, 0.8);
-$light-opacity-500: rgba($white, 0.75);
-$light-opacity-400: rgba($white, 0.7);
-$light-opacity-300: rgba($white, 0.65);
-$light-opacity-200: rgba($white, 0.6);
-$light-opacity-100: rgba($white, 0.55);
-$light-opacity-light-900: rgba($white, 0.5);
-$light-opacity-light-800: rgba($white, 0.45);
-$light-opacity-light-700: rgba($white, 0.4);
-$light-opacity-light-600: rgba($white, 0.35);
-$light-opacity-light-500: rgba($white, 0.3);
-$light-opacity-light-400: rgba($white, 0.25);
-$light-opacity-light-300: rgba($white, 0.2);
-$light-opacity-light-200: rgba($white, 0.15);
-$light-opacity-light-100: rgba($white, 0.1);
-$light-opacity-background-fill: rgba($light-gray-300, 0.8);  // Similar to $light-opacity-light-200, but more opaque.
-
-// Additional colors.
-// Some are from https://make.wordpress.org/design/handbook/foundations/colors/.
-$blue-wordpress-700: #00669b;
-$blue-dark-900: #0071a1;
 
-$blue-medium-900: #006589;
-$blue-medium-800: #00739c;
-$blue-medium-700: #007fac;
-$blue-medium-600: #008dbe;
-$blue-medium-500: #00a0d2;
-$blue-medium-400: #33b3db;
-$blue-medium-300: #66c6e4;
-$blue-medium-200: #bfe7f3;
 $blue-medium-100: #e5f5fa;
-$blue-medium-highlight: #b3e7fe;
-
-// Alert colors.
-$alert-yellow: #f0b849;
-$alert-red: #d94f4f;
-$alert-green: #4ab866;
-
-// Navigation.
-$light-style-sub-menu-background-color: #fff;
-$light-style-sub-menu-border-color: #ddd;
-$light-style-sub-menu-text-color: #111;
-$light-style-sub-menu-text-color-hover: #333;
-
-$dark-style-sub-menu-background-color: #333;
-$dark-style-sub-menu-border-color: #111;
-$dark-style-sub-menu-text-color: #fff;
-$dark-style-sub-menu-text-color-hover: #eee;
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
@@ -259,30 +259,30 @@
 
 	// Use opacity to work in various editor styles.
 	&::-webkit-input-placeholder {
-		color: $dark-opacity-300;
+		color: $dark-gray-placeholder;
 	}
 
 	&::-moz-placeholder {
 		opacity: 1; // Necessary because Firefox reduces this from 1.
-		color: $dark-opacity-300;
+		color: $dark-gray-placeholder;
 	}
 
 	&:-ms-input-placeholder {
-		color: $dark-opacity-300;
+		color: $dark-gray-placeholder;
 	}
 
 	.is-dark-theme & {
 		&::-webkit-input-placeholder {
-			color: $light-opacity-300;
+			color: $light-gray-placeholder;
 		}
 
 		&::-moz-placeholder {
 			opacity: 1; // Necessary because Firefox reduces this from 1.
-			color: $light-opacity-300;
+			color: $light-gray-placeholder;
 		}
 
 		&:-ms-input-placeholder {
-			color: $light-opacity-300;
+			color: $light-gray-placeholder;
 		}
 	}
 }

diff --git a/packages/block-editor/src/components/default-block-appender/style.scss b/packages/block-editor/src/components/default-block-appender/style.scss
@@ -34,9 +34,9 @@
 		padding: 0 #{ $block-padding + $button-size } 0 0;
 
 		// Use opacity to work in various editor styles.
-		color: $dark-opacity-300;
+		color: $dark-gray-placeholder;
 		.is-dark-theme & {
-			color: $light-opacity-300;
+			color: $light-gray-placeholder;
 		}
 	}
 

diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
@@ -20,7 +20,7 @@
 
 	// Add outline to button on focus to indicate focus-state
 	&:focus {
-		box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500;
+		box-shadow: 0 0 0 1px $white, 0 0 0 3px var(--wp-admin-theme-color);
 
 		// Windows' High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;

diff --git a/packages/block-library/src/calendar/style.scss b/packages/block-library/src/calendar/style.scss
@@ -27,7 +27,7 @@
 	}
 
 	tfoot a {
-		color: $blue-medium-800;
+		color: var(--wp-admin-theme-color);
 	}
 
 	table tbody,

diff --git a/packages/block-library/src/classic/editor.scss b/packages/block-library/src/classic/editor.scss
@@ -37,7 +37,7 @@
 	}
 
 	a {
-		color: $blue-medium-700;
+		color: var(--wp-admin-theme-color);
 	}
 
 	&:focus a[data-mce-selected] {

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -141,20 +141,20 @@
 .wp-block-navigation,
 .wp-block-navigation.is-style-light {
 	.wp-block-navigation-link:not(.has-text-color) {
-		color: $light-style-sub-menu-text-color;
+		color: $dark-gray-primary;
 	}
 	&:not(.has-background) .wp-block-navigation__container {
-		background-color: $light-style-sub-menu-background-color;
+		background-color: $white;
 	}
 }
 
 // Dark styles.
 .wp-block-navigation.is-style-dark {
 	.wp-block-navigation-link:not(.has-text-color) {
-		color: $dark-style-sub-menu-text-color;
+		color: $white;
 	}
 	&:not(.has-background) .wp-block-navigation__container {
-		background-color: $dark-style-sub-menu-background-color;
+		background-color: $dark-gray-primary;
 	}
 }
 

diff --git a/packages/block-library/src/search/editor.scss b/packages/block-library/src/search/editor.scss
@@ -2,7 +2,7 @@
 	&__input {
 		border-radius: $radius-round-rectangle;
 		border: 1px solid $dark-gray-200;
-		color: $dark-opacity-300;
+		color: $dark-gray-placeholder;
 		font-family: $default-font;
 		font-size: $default-font-size;
 		padding: $grid-unit-10;

diff --git a/packages/block-library/src/shortcode/editor.scss b/packages/block-library/src/shortcode/editor.scss
@@ -2,7 +2,6 @@
 	display: flex;
 	flex-direction: column;
 	padding: $block-padding;
-	background-color: $dark-opacity-light-200;
 	font-size: $default-font-size;
 	font-family: $default-font;
 	margin-bottom: $default-block-margin;

diff --git a/packages/block-library/src/spacer/editor.scss b/packages/block-library/src/spacer/editor.scss
@@ -2,7 +2,7 @@
 	background: $light-gray-200;
 
 	.is-dark-theme & {
-		background: $light-opacity-light-200;
+		background: rgba($white, 0.15);
 	}
 }
 

diff --git a/packages/block-library/src/table/editor.scss b/packages/block-library/src/table/editor.scss
@@ -41,8 +41,8 @@
 
 	td.is-selected,
 	th.is-selected {
-		border-color: $blue-medium-500;
-		box-shadow: inset 0 0 0 1px $blue-medium-500;
+		border-color: var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
 		border-style: double;
 	}
 

diff --git a/packages/components/src/color-picker/style.scss b/packages/components/src/color-picker/style.scss
@@ -205,18 +205,18 @@
 .components-color-picker__saturation-pointer:focus {
 	box-shadow:
 		0 0 0 2px #fff,
-		0 0 0 4px $blue-medium-500,
-		0 0 5px 0 $blue-medium-500,
+		0 0 0 4px var(--wp-admin-theme-color),
+		0 0 5px 0 var(--wp-admin-theme-color),
 		inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
 		0 0 1px 2px rgba(0, 0, 0, 0.4);
 }
 
 .components-color-picker__hue-pointer:focus,
 .components-color-picker__alpha-pointer:focus {
-	border-color: $blue-medium-500;
+	border-color: var(--wp-admin-theme-color);
 	box-shadow:
-		0 0 0 2px $blue-medium-500,
-		0 0 3px 0 $blue-medium-500;
+		0 0 0 2px var(--wp-admin-theme-color),
+		0 0 3px 0 var(--wp-admin-theme-color);
 	outline: 2px solid transparent;
 	outline-offset: -2px;
 }

diff --git a/packages/components/src/combobox-control/style.scss b/packages/components/src/combobox-control/style.scss
@@ -19,7 +19,7 @@
 	text-align: left;
 
 	&:focus {
-		border-color: $blue-medium-500;
+		border-color: var(--wp-admin-theme-color);
 	}
 
 	&-input {

diff --git a/packages/components/src/drop-zone/style.scss b/packages/components/src/drop-zone/style.scss
@@ -9,7 +9,7 @@
 	opacity: 0;
 	transition: 0.3s opacity, 0.3s background-color, 0s visibility 0.3s;
 	@include reduce-motion("transition");
-	border: 2px solid $blue-dark-900;
+	border: 2px solid var(--wp-admin-theme-color);
 	border-radius: 2px;
 
 	&.is-active {
@@ -20,7 +20,7 @@
 	}
 
 	&.is-dragging-over-element {
-		background-color: rgba($blue-dark-900, 0.8);
+		background-color: var(--wp-admin-theme-color);
 	}
 }
 

diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
@@ -174,7 +174,7 @@
 	cursor: pointer;
 
 	&.is-selected {
-		background: $blue-dark-900;
+		background: var(--wp-admin-theme-color);
 		color: $white;
 	}
 }

diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss
@@ -11,7 +11,7 @@
 		right: 0;
 		pointer-events: none;
 		outline: 4px solid transparent; // Shown in Windows High Contrast mode.
-		box-shadow: inset 0 0 0 4px $blue-medium-400;
+		box-shadow: inset 0 0 0 4px var(--wp-admin-theme-color);
 	}
 
 	@supports ( outline-offset: 1px ) {
@@ -21,7 +21,7 @@
 
 		&:focus {
 			outline-style: solid;
-			outline-color: $blue-medium-400;
+			outline-color: var(--wp-admin-theme-color);
 			outline-width: 4px;
 			outline-offset: -4px;
 		}

diff --git a/packages/components/src/notice/style.scss b/packages/components/src/notice/style.scss
@@ -2,8 +2,8 @@
 	display: flex;
 	font-family: $default-font;
 	font-size: $default-font-size;
-	background-color: $blue-medium-100;
-	border-left: 4px solid $blue-medium-500;
+	background-color: $white;
+	border-left: 4px solid var(--wp-admin-theme-color);
 	margin: 5px 15px 2px;
 	padding: 8px 12px;
 	align-items: center;

diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss
@@ -46,7 +46,7 @@
 		}
 
 		&:hover {
-			color: $blue-medium-400;
+			color: var(--wp-admin-theme-color);
 		}
 	}
 }

diff --git a/packages/editor/src/components/autocompleters/style.scss b/packages/editor/src/components/autocompleters/style.scss
@@ -34,6 +34,6 @@
 		flex-shrink: 0;
 	}
 	&:hover .editor-autocompleters__user-slug {
-		color: $blue-medium-300;
+		color: var(--wp-admin-theme-color);
 	}
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -37,7 +37,7 @@ @@
     	}
     	a {
-    		color: $blue-medium-700;
+    		color: var(--wp-admin-theme-color);
     	}
     	&:focus a[data-mce-selected] {
@@ Expand Down @@