Remove more colors (#23648)

* Retire $radius-round-rectangle * Retire dark-gray-900 * Retire dark-gray-800 * Rename new colors to be on a scale. * Rename a variable, retire blue medium 100. * Retire light-gray-100 * Make all grays neutral. * Retire light-gray-200 * Retire light-gray-300. * Replace light-gray-400 * Retire light gray 500, update borders.
WordPress · Jul 3, 2020 · e259fd0 · e259fd0
1 parent 9f2ca8b
commit e259fd0
Show file tree

Hide file tree

Showing 96 changed files with 255 additions and 275 deletions.
diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
@@ -2,19 +2,20 @@
  * Colors
  */
 
-// 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;
+// WordPress grays.
+$black: #000;			// Use only when you truly need pure black. For UI, use $gray-900.
+$gray-900: #1e1e1e;
+$gray-700: #757575;		// Meets 4.6:1 text contrast against white.
+$gray-600: #949494;		// Meets 3:1 UI or large text contrast against white.
+$gray-400: #ccc;
+$gray-200: #ddd;		// Used for most borders.
+$gray-100: #f0f0f0;
 $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);
+// Opacities & additional colors.
+$dark-theme-focus: $white;	// Focus color when the theme is dark.
+$dark-gray-placeholder: rgba($gray-900, 0.62);
+$medium-gray-placeholder: rgba($gray-900, 0.55);
 $light-gray-placeholder: rgba($white, 0.65);
 
 // Alert colors.
@@ -28,8 +29,6 @@ $alert-green: #4ab866;
  * Please avoid using these.
  */
 
-$dark-gray-900: #191e23;
-$dark-gray-800: #23282d;
 $dark-gray-700: #32373c;
 $dark-gray-600: #40464d;
 $dark-gray-500: #555d66;
@@ -43,10 +42,3 @@ $light-gray-900: #a2aab2;
 $light-gray-800: #b5bcc2;
 $light-gray-700: #ccd0d4;
 $light-gray-600: #d7dade;
-$light-gray-500: #e2e4e7;
-$light-gray-400: #e8eaeb;
-$light-gray-300: #edeff0;
-$light-gray-200: #f3f4f5;
-$light-gray-100: #f8f9f9;
-
-$blue-medium-100: #e5f5fa;
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
@@ -129,7 +129,7 @@
 	box-shadow: 0 0 0 transparent;
 	transition: box-shadow 0.1s linear;
 	border-radius: $radius-block-ui;
-	border: $border-width solid $medium-gray-text;
+	border: $border-width solid $gray-700;
 	@include reduce-motion("transition");
 }
 
@@ -289,7 +289,7 @@
 
 @mixin checkbox-control {
 	@include input-control;
-	border: $border-width solid $dark-gray-primary;
+	border: $border-width solid $gray-900;
 	margin-right: $grid-unit-15;
 	transition: none;
 	border-radius: $radius-block-ui;
@@ -350,7 +350,7 @@
 
 @mixin radio-control {
 	@include input-control;
-	border: $border-width solid $dark-gray-primary;
+	border: $border-width solid $gray-900;
 	margin-right: $grid-unit-15;
 	transition: none;
 	border-radius: $radius-round;

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
@@ -60,7 +60,7 @@ $mobile-color-swatch: 48px;
  */
 
 $shadow-popover: 0 2px 6px rgba($black, 0.05);
-$shadow-modal: 0 3px 30px rgba($dark-gray-900, 0.2);
+$shadow-modal: 0 3px 30px rgba($black, 0.2);
 
 
 /**
@@ -95,11 +95,9 @@ $block-selected-padding: 0;
 $block-selected-child-margin: 5px;
 $block-selected-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-border-width;
 
-
 /**
  * Border radii.
  */
 
-$radius-round-rectangle: 4px;
 $radius-round: 50%;
 $radius-block-ui: 2px;
diff --git a/packages/block-directory/src/components/downloadable-block-icon/style.scss b/packages/block-directory/src/components/downloadable-block-icon/style.scss
@@ -6,6 +6,6 @@
 		width: $button-size;
 		height: $button-size;
 		font-size: $button-size;
-		background-color: $light-gray-300;
+		background-color: $gray-200;
 	}
 }
diff --git a/packages/block-directory/src/components/downloadable-block-list-item/style.scss b/packages/block-directory/src/components/downloadable-block-list-item/style.scss
@@ -10,8 +10,8 @@
 	justify-content: center;
 	background: transparent;
 	word-break: break-word;
-	border-top: $border-width solid $light-gray-500;
-	border-bottom: $border-width solid $light-gray-500;
+	border-top: $border-width solid $gray-200;
+	border-bottom: $border-width solid $gray-200;
 	transition: all 0.05s ease-in-out;
 	@include reduce-motion("transition");
 	position: relative;
@@ -53,7 +53,7 @@
 	display: flex;
 	flex-direction: column;
 	padding: $grid-unit-20;
-	background-color: $light-gray-200;
+	background-color: $gray-100;
 }
 
 .block-directory-downloadable-block-list-item__content {

diff --git a/packages/block-editor/src/components/block-breadcrumb/style.scss b/packages/block-editor/src/components/block-breadcrumb/style.scss
@@ -47,7 +47,7 @@
 
 .block-editor-block-breadcrumb__button.components-button,
 .block-editor-block-breadcrumb__current {
-	color: $dark-gray-primary;
+	color: $gray-900;
 	padding: 0 $grid-unit-10;
 	font-size: inherit;
 }
diff --git a/packages/block-editor/src/components/block-compare/style.scss b/packages/block-editor/src/components/block-compare/style.scss
@@ -38,7 +38,7 @@
 	.block-editor-block-compare__html {
 		font-family: $editor-html-font;
 		font-size: 12px;
-		color: $dark-gray-800;
+		color: $gray-900;
 		border-bottom: 1px solid #ddd;
 		padding-bottom: 15px;
 		line-height: 1.7;

diff --git a/packages/block-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss
@@ -4,9 +4,9 @@
 }
 
 .block-editor-block-draggable-chip {
-	background-color: $dark-gray-primary;
+	background-color: $gray-900;
 	border-radius: $radius-block-ui;
-	border: $border-width solid $dark-gray-primary;
+	border: $border-width solid $gray-900;
 	box-shadow: 0 4px 6px rgba($black, 0.3);
 	color: $white;
 	cursor: grabbing;

diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss
@@ -8,7 +8,7 @@
 	}
 	.components-panel__body {
 		border: none;
-		border-top: $border-width solid $light-gray-500;
+		border-top: $border-width solid $gray-100;
 	}
 
 	.block-editor-block-card {

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -1,15 +1,4 @@
 .block-editor-block-list__layout .block-editor-block-list__block { // Needs specificity to override inherited styles.
-	// While block is being dragged, dim the slot dragged from, and hide some UI.
-	&.is-dragging {
-		> * {
-			background: $light-gray-100;
-		}
-
-		> * > * {
-			visibility: hidden;
-		}
-	}
-
 	.reusable-block-edit-panel * {
 		z-index: z-index(".block-editor-block-list__block .reusable-block-edit-panel *");
 	}
@@ -80,7 +69,7 @@
 
 			// Show a light color for dark themes.
 			.is-dark-theme & {
-				box-shadow: 0 0 0 $border-width-focus $blue-medium-focus-dark;
+				box-shadow: 0 0 0 $border-width-focus $dark-theme-focus;
 			}
 		}
 	}
@@ -163,7 +152,7 @@
 
 			// Show a lighter color for dark themes.
 			.is-dark-theme & {
-				box-shadow: 0 0 0 $border-width-focus $blue-medium-focus-dark;
+				box-shadow: 0 0 0 $border-width-focus $dark-theme-focus;
 			}
 		}
 
@@ -176,7 +165,7 @@
 	}
 
 	.is-navigate-mode & .block-editor-block-list__block.is-hovered:not(.is-selected)::after {
-		box-shadow: 0 0 0 1px $light-gray-ui;
+		box-shadow: 0 0 0 1px $gray-600;
 	}
 
 	.is-block-moving-mode & .block-editor-block-list__block.has-child-selected {
@@ -199,7 +188,7 @@
 			left: 0;
 			top: -$default-block-margin / 2;
 			border-radius: $radius-block-ui;
-			border-top: 4px solid $light-gray-secondary;
+			border-top: 4px solid $gray-400;
 		}
 
 		&::after {
@@ -424,7 +413,7 @@
 .block-editor-block-list__block-popover-inserter {
 	.block-editor-inserter__toggle.components-button.has-icon {
 		// Basic look
-		background: $dark-gray-primary;
+		background: $gray-900;
 		border-radius: $radius-block-ui;
 		color: $white;
 		padding: 0;
@@ -533,14 +522,14 @@
 
 .block-editor-block-contextual-toolbar {
 	// Block UI appearance.
-	border: $border-width solid $dark-gray-primary;
+	border: $border-width solid $gray-900;
 	border-radius: $radius-block-ui;
 	background-color: $white;
 
 	.block-editor-block-toolbar .components-toolbar-group,
 	.block-editor-block-toolbar .components-toolbar,
 	.block-editor-block-toolbar__mover-switcher-container {
-		border-right-color: $dark-gray-primary;
+		border-right-color: $gray-900;
 	}
 
 	.block-editor-block-toolbar__mover-switcher-container {
@@ -643,7 +632,7 @@
 		top: -$border-width;
 
 		// Block UI appearance.
-		box-shadow: 0 0 0 $border-width $dark-gray-primary;
+		box-shadow: 0 0 0 $border-width $gray-900;
 		border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius.
 		background-color: $white;
 

diff --git a/packages/block-editor/src/components/block-mobile-toolbar/style.scss b/packages/block-editor/src/components/block-mobile-toolbar/style.scss
@@ -1,12 +1,12 @@
 .block-editor-block-mobile-toolbar {
 	display: flex;
 	flex-direction: row;
-	border-right: $border-width solid $light-gray-500;
+	border-right: $border-width solid $gray-200;
 
 	.block-editor-block-mover-button {
 		width: $button-size;
 		height: $button-size;
-		border-radius: $radius-round-rectangle;
+		border-radius: $radius-block-ui;
 		padding: 3px;
 		margin: 0;
 		justify-content: center;

diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
@@ -7,7 +7,7 @@ $tree-item-height: 36px;
 
 .block-editor-block-navigation__label {
 	margin: 0 0 $grid-unit-15;
-	color: $medium-gray-text;
+	color: $gray-700;
 	text-transform: uppercase;
 	font-size: 11px;
 	font-weight: 500;
@@ -157,7 +157,7 @@ $tree-item-height: 36px;
 	}
 
 	.block-editor-inserter__toggle {
-		background: $dark-gray-primary;
+		background: $gray-900;
 		color: $white;
 		height: $grid-unit-30;
 		margin: 6px 6px 6px 1px;

diff --git a/packages/block-editor/src/components/block-parent-selector/style.scss b/packages/block-editor/src/components/block-parent-selector/style.scss
@@ -5,7 +5,7 @@
 	.block-editor-block-parent-selector__button {
 		width: $grid-unit-60;
 		height: $grid-unit-60;
-		border: $border-width solid $dark-gray-primary;
+		border: $border-width solid $gray-900;
 		border-radius: $radius-block-ui;
 	}
 }
diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
@@ -32,7 +32,7 @@
 		}
 
 		.block-editor-block-styles__item-preview {
-			border: 2px solid $dark-gray-primary;
+			border: 2px solid $gray-900;
 		}
 	}
 }

diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
@@ -36,7 +36,7 @@
 	// Since it's not clickable, though, don't show a hover state.
 	&,
 	.block-editor-block-icon.has-colors {
-		color: $dark-gray-primary !important;
+		color: $gray-900 !important;
 	}
 }
 
@@ -98,7 +98,7 @@
 	}
 
 	.components-panel__body + .components-panel__body {
-		border-top: $border-width solid $light-gray-500;
+		border-top: $border-width solid $gray-100;
 	}
 }
 
@@ -125,7 +125,7 @@
 
 	.components-popover__content {
 		box-shadow: none;
-		border: $border-width solid $dark-gray-primary;
+		border: $border-width solid $gray-900;
 		background: $white;
 		border-radius: $radius-block-ui;
 	}
@@ -139,7 +139,7 @@
 
 .block-editor-block-switcher__preview-title {
 	margin-bottom: $grid-unit-15;
-	color: $medium-gray-text;
+	color: $gray-700;
 	text-transform: uppercase;
 	font-size: 11px;
 	font-weight: 500;

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -34,7 +34,7 @@
 		border: 0;
 
 		// Add a border after item groups to show as separator in the block toolbar.
-		border-right: $border-width solid $light-gray-500;
+		border-right: $border-width solid $gray-200;
 	}
 
 	> :last-child,

diff --git a/packages/block-editor/src/components/button-block-appender/style.scss b/packages/block-editor/src/components/button-block-appender/style.scss
@@ -6,8 +6,8 @@
 	padding: $grid-unit-10;
 	width: 100%;
 	height: auto;
-	color: $dark-gray-primary;
-	box-shadow: inset 0 0 0 $border-width $dark-gray-primary;
+	color: $gray-900;
+	box-shadow: inset 0 0 0 $border-width $gray-900;
 
 	&:hover {
 		box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
@@ -25,7 +25,7 @@
 	&.block-list-appender__toggle {
 		display: flex;
 		flex-direction: row;
-		color: $dark-gray-primary;
+		color: $gray-900;
 		box-shadow: none;
 		height: 24px;
 		padding: 0;
@@ -37,7 +37,7 @@
 
 		& > svg {
 			width: 24px;
-			background-color: $dark-gray-primary;
+			background-color: $gray-900;
 			color: $white;
 			border-radius: $radius-block-ui;
 		}

diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -37,7 +37,7 @@
 
 		&.is-active {
 			color: $white;
-			background: $dark-gray-primary;
+			background: $gray-900;
 
 			// Windows High Contrast mode will show this outline, but not the box-shadow.
 			outline: 2px solid transparent;
@@ -49,7 +49,7 @@
 .block-editor-block-types-list__item-icon {
 	padding: 12px 20px;
 	border-radius: $radius-block-ui;
-	color: $dark-gray-primary;
+	color: $gray-900;
 	transition: all 0.05s ease-in-out;
 	@include reduce-motion("transition");