From aae447206989c8bdf4d5b692bc01fa4653f6d8d2 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Wed, 29 May 2024 09:13:10 -0400
Subject: [PATCH] Use shadows instead of borders on interface skeleton (#61835)

* use shadows instead of borders

* fix shadow overlap with header

* transparent outline for high contrast windows

* consistent fullscreen mode/site icon
---
 .../header/fullscreen-mode-close/style.scss          |  3 +--
 packages/edit-site/src/components/layout/style.scss  |  4 +---
 .../src/components/interface-skeleton/style.scss     | 12 +++++++++---
 3 files changed, 11 insertions(+), 8 deletions(-)

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
index 911445344febcd..28a108c521bc44 100644
--- 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,10 +14,9 @@
 		background: $gray-900;
 		color: $white;
 		border-radius: 0;
-		height: $header-height + $border-width;
+		height: $header-height;
 		width: $header-height;
 		position: relative;
-		margin-bottom: - $border-width;
 
 		&:active {
 			color: $white;
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index fdbf6b184aa211..8c15cdae338818 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -162,15 +162,13 @@
 	position: relative;
 	color: $white;
 	border-radius: 0;
-	height: $header-height +  $border-width;
+	height: $header-height;
 	width: $header-height;
-	margin-bottom: -  $border-width;
 	overflow: hidden;
 	padding: 0;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border-bottom: 1px solid transparent;
 
 	&:hover,
 	&:active {
diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss
index a0e56658355ac8..be8eced71dabad 100644
--- a/packages/interface/src/components/interface-skeleton/style.scss
+++ b/packages/interface/src/components/interface-skeleton/style.scss
@@ -125,26 +125,32 @@ html.interface-interface-skeleton__html-container {
 }
 
 .interface-interface-skeleton__sidebar {
+	border-top: $border-width solid $gray-200;
 	overflow: hidden;
 
 	@include break-medium() {
-		border-left: $border-width solid $gray-200;
+		box-shadow: -$border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
+		outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 	}
 }
 
 .interface-interface-skeleton__secondary-sidebar {
+	border-top: $border-width solid $gray-200;
 	right: 0;
+
 	@include break-medium() {
-		border-right: $border-width solid $gray-200;
+		box-shadow: $border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
+		outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 	}
 }
 
 .interface-interface-skeleton__header {
 	flex-shrink: 0;
 	height: auto;  // Keep the height flexible.
-	border-bottom: $border-width solid $gray-200;
+	box-shadow: 0 $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
 	z-index: z-index(".interface-interface-skeleton__header");
 	color: $gray-900;
+	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 }
 
 .interface-interface-skeleton__footer {