From 8cb2ea680428c132641b015e890abcfda9453972 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 5 Feb 2021 12:55:57 -0500
Subject: [PATCH] test(): update modal dark theme, fix styles test (#22884)

---
 .../themes/test/css-variables/css/dark.css    | 12 ++++++++---
 .../themes/test/css-variables/css/toolbar.css |  6 +++---
 core/src/themes/test/css-variables/index.html | 21 +++++++++++++------
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/core/src/themes/test/css-variables/css/dark.css b/core/src/themes/test/css-variables/css/dark.css
index 2f95414a7f..ef0b5f8bc9 100644
--- a/core/src/themes/test/css-variables/css/dark.css
+++ b/core/src/themes/test/css-variables/css/dark.css
@@ -63,7 +63,7 @@
   --ion-color-light-tint: #383a3e;
 }
 
-.ios {
+.ios body {
   --ion-background-color: #000000;
   --ion-background-color-rgb: 0,0,0;
 
@@ -96,7 +96,7 @@
   --ion-toolbar-color: #fff;
 }
 
-.md {
+.md body {
   --ion-background-color: #121212;
   --ion-background-color-rgb: 18,18,18;
 
@@ -126,4 +126,10 @@
   --ion-color-step-950: #f3f3f3;
 
   --ion-item-background: #1a1b1e;
-}
\ No newline at end of file
+}
+
+ion-modal.ios {
+  --ion-background-color: var(--ion-color-step-100);
+  --ion-toolbar-background: var(--ion-color-step-150);
+  --ion-toolbar-border-color: var(--ion-color-step-250);
+}
diff --git a/core/src/themes/test/css-variables/css/toolbar.css b/core/src/themes/test/css-variables/css/toolbar.css
index 693e988e70..4c37eb8a21 100644
--- a/core/src/themes/test/css-variables/css/toolbar.css
+++ b/core/src/themes/test/css-variables/css/toolbar.css
@@ -16,11 +16,11 @@
   --ion-toolbar-color: var(--ion-color-light);
 }
 
-.md {
+.md body {
   --ion-toolbar-segment-color: rgba(var(--ion-color-light-rgb), .7);
   --ion-toolbar-segment-color-checked: var(--ion-color-light);
 }
 
-.ios {
+.ios body {
   --ion-toolbar-segment-color-checked: var(--ion-color-primary);
-}
\ No newline at end of file
+}
diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html
index 64d1e7b1e2..e3337995c0 100644
--- a/core/src/themes/test/css-variables/index.html
+++ b/core/src/themes/test/css-variables/index.html
@@ -921,22 +921,31 @@
       // create component to open
       const element = document.createElement('div');
       element.innerHTML = `
-      <ion-header>
+      <ion-header translucent="true">
         <ion-toolbar>
           <ion-title>Super Modal</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-content>
-        <h1>Content of doom</h1>
-        <div>Here's some more content</div>
-        <ion-button class="dismiss">Dismiss Modal</ion-button>
+      <ion-content fullscreen="true">
+        <ion-header collapse="condense">
+          <ion-toolbar>
+            <ion-title size="large">Super Modal</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <div class="ion-padding">
+          <h1>Content of doom</h1>
+          <div>Here's some more content</div>
+          <ion-button class="dismiss">Dismiss Modal</ion-button>
+        </div>
       </ion-content>
       `;
 
 
       // present the modal
       const modalElement = Object.assign(document.createElement('ion-modal'), {
-        component: element
+        component: element,
+        swipeToClose: true,
+        presentingElement: document.querySelector('ion-tabs')
       });
 
       // listen for close event