fix(#4049): Express theme should render a border on Popovers and Dialogs with forced-colors: active (#4050)

Author: Michael Jordan

packages/@adobe/spectrum-css-temp/components/dialog/index.css

@@ -59,12 +59,14 @@ governing permissions and limitations under the License.
   max-width: 100%;
 
   max-height: inherit;
-
+  overflow: hidden;
   outline: none;
 
   --spectrum-dialog-padding-x: var(--spectrum-dialog-padding);
   --spectrum-dialog-padding-y: var(--spectrum-dialog-padding);
   --spectrum-dialog-border-radius: var(--spectrum-border-radius);
+
+  border-radius: var(--spectrum-dialog-border-radius);
 }
 
 .spectrum-Dialog--small {
@@ -271,6 +273,7 @@ governing permissions and limitations under the License.
   width: 100%;
   height: 100%;
 
+  border-style: none;
   border-radius: 0;
 }
 /** @unofficial */

packages/@adobe/spectrum-css-temp/components/dialog/skin.css

@@ -36,8 +36,3 @@ governing permissions and limitations under the License.
     color: var(--spectrum-dialog-warning-icon-color);
   }
 }
-@media (forced-colors: active) {
-  .spectrum-Dialog {
-    border: 1px solid transparent;
-  }
-}

packages/@adobe/spectrum-css-temp/components/modal/index.css

@@ -22,6 +22,8 @@ governing permissions and limitations under the License.
   /* Distance between top and bottom of dialog and edge of window for fullscreen dialog */
   --spectrum-dialog-fullscreen-margin: 40px;
   --spectrum-dialog-max-height: calc(var(--spectrum-visual-viewport-height) * 0.9);
+
+  --spectrum-dialog-border-size: var(--spectrum-popover-border-size);
 }
 
 /* Used to position the modal */
@@ -73,6 +75,7 @@ governing permissions and limitations under the License.
   min-width: var(--spectrum-dialog-min-width);
 
   border-radius: var(--spectrum-dialog-border-radius);
+  border-width: var(--spectrum-dialog-border-size);
   outline: none; /* Firefox shows outline */
   pointer-events: auto;
 
@@ -143,3 +146,9 @@ only screen and (max-device-height: 350px) {
     transform: none;
   }
 }
+
+@media (forced-colors: active) {
+  .spectrum-Modal:not(.spectrum-Modal--fullscreenTakeover) {
+    border-style: solid;
+  }
+}

packages/@adobe/spectrum-css-temp/components/modal/skin.css

@@ -10,6 +10,12 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+
+:root {
+  --spectrum-dialog-border-color: var(--spectrum-alias-border-color-transparent);
+}
+
 .spectrum-Modal {
   background: var(--spectrum-dialog-background-color);
-}
+  border-color: var(--spectrum-dialog-border-color);
+}

packages/@adobe/spectrum-css-temp/components/popover/index.css

@@ -48,12 +48,17 @@ governing permissions and limitations under the License.
 
   outline: none; /* Hide focus outline */
   box-sizing: border-box;
+  overflow: hidden;
 
   &.is-open {
     @inherit: %spectrum-overlay--open;
   }
 }
 
+.spectrum-Popover--withTip {
+  overflow: visible;
+}
+
 .spectrum-Popover-tip {
   position: absolute;
   --spectrum-popover-tip-size: var(--spectrum-popover-tip-width);

packages/@adobe/spectrum-css-temp/components/popover/skin.css

@@ -37,3 +37,10 @@ governing permissions and limitations under the License.
     }
   }
 }
+
+@media (forced-colors: active) {
+  .spectrum-Popover {
+    --spectrum-popover-background-color: Canvas;
+    --spectrum-popover-border-color: CanvasText;
+  }
+}

packages/@adobe/spectrum-css-temp/components/rule/skin.css

@@ -21,3 +21,12 @@ governing permissions and limitations under the License.
 .spectrum-Rule--small {
   background-color: var(--spectrum-rule-small-background-color);
 }
+
+@media (forced-colors: active) {
+  .spectrum-Rule {
+    forced-color-adjust: none;
+    --spectrum-rule-large-background-color: CanvasText;
+    --spectrum-rule-medium-background-color: CanvasText;
+    --spectrum-rule-small-background-color: CanvasText;
+  }
+}

packages/@adobe/spectrum-css-temp/components/tray/index.css

@@ -63,6 +63,9 @@
   display: flex;
   flex-direction: column;
 
+  overflow-x: hidden;
+  overflow-y: auto;
+
   border-radius: var(--spectrum-tray-full-width-border-radius) var(--spectrum-tray-full-width-border-radius) var(--spectrum-tray-border-radius) var(--spectrum-tray-border-radius);
 
   /* Start offset by the animation distance */
@@ -94,3 +97,10 @@
     border-radius: var(--spectrum-tray-border-radius);
   }
 }
+
+@media (forced-colors: active) {
+  .spectrum-Tray {
+    border-width: var(--spectrum-alias-border-size-thin);
+    border-style: solid solid none;
+  }
+}

packages/@adobe/spectrum-css-temp/vars/express.css

@@ -162,3 +162,9 @@
 .express.large {
   --spectrum-switch-track-width: 36px;
 }
+
+@media (forced-colors: active) {
+  .express.express {
+    --spectrum-popover-border-size: var(--spectrum-alias-border-size-thin);
+  }
+}