Use a darker frame for template mode and previews (#31044)

WordPress · Apr 27, 2021 · bdaebb2 · bdaebb2
1 parent e856dc6
commit bdaebb2
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 2 deletions.
diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
@@ -5,6 +5,7 @@
 // WordPress grays.
 $black: #000;			// Use only when you truly need pure black. For UI, use $gray-900.
 $gray-900: #1e1e1e;
+$gray-800: #2f2f2f;
 $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;

diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss
@@ -14,9 +14,10 @@
 		background: #23282e; // WP-admin gray.
 		color: $white;
 		border-radius: 0;
-		height: $header-height;
+		height: $header-height + $border-width;
 		width: $header-height;
 		position: relative;
+		margin-bottom: - $border-width;
 
 		&:active {
 			color: $white;

diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
@@ -87,7 +87,7 @@
 }
 
 .edit-post-layout .interface-interface-skeleton__content {
-	background-color: $gray-100;
+	background-color: $gray-800;
 }
 
 .edit-post-layout__inserter-panel {

diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
@@ -65,4 +65,11 @@
 	position: absolute;
 	top: $grid-unit-10;
 	left: $grid-unit-10;
+	color: $white;
+
+	&:active:not([aria-disabled="true"]),
+	&:focus:not([aria-disabled="true"]),
+	&:hover {
+		color: $gray-100;
+	}
 }