refactor(themes): remove the outer-content class from core (#16589)

BREAKING CHANGES

The outer-content class has been removed in favor of setting the color in your app instead:

```
.outer-content {
  --background: #f2f2f2;
 }
```

core/src/components/action-sheet/test/preview/index.html

@@ -32,12 +32,6 @@
       <ion-button expand="block" id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
 
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 
   <script>

core/src/components/alert/test/preview/index.html

@@ -32,12 +32,6 @@
       <ion-button id="checkbox" expand="block" onclick="presentAlertCheckbox()">Checkbox</ion-button>
       <ion-button expand="block" onclick="presentWithCssClass()">CssClass</ion-button>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 
   <script>

core/src/components/avatar/test/preview/index.html

@@ -38,12 +38,6 @@
         <ion-label>Item Avatar</ion-label>
       </ion-item>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 </body>
 

core/src/components/badge/test/preview/index.html

@@ -112,12 +112,6 @@
         </ion-item>
       </ion-list>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 
   <script>

core/src/components/button/test/preview/index.html

@@ -81,12 +81,6 @@
       </p>
 
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 
   <script>

core/src/components/card/test/preview/index.html

@@ -68,10 +68,6 @@
     </ion-content>
 
     <style>
-      ion-toolbar {
-        --background: white;
-      }
-
       .content {
         background: #e5e5e5;
       }

core/src/components/checkbox/test/preview/index.html

@@ -80,12 +80,6 @@
         <ion-checkbox slot="end" disabled></ion-checkbox>
       </ion-item>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 </body>
 

core/src/components/chip/test/preview/index.html

@@ -92,12 +92,6 @@
       </ion-chip>
 
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 </body>
 

core/src/components/content/test/preview/index.html

@@ -100,10 +100,6 @@
     </script>
 
     <style>
-      ion-toolbar {
-        --background: white;
-      }
-
       ion-header.animation,
       ion-footer.animation,
       ion-content.animation {

core/src/components/content/test/standalone/index.html

@@ -84,6 +84,10 @@
       height: 100%;
     }
 
+    .outer-content {
+      --background: #f2f2f2;
+    }
+
     .custom-color {
       --background: blue;
       --color: white;

core/src/components/datetime/test/basic/index.html

@@ -141,6 +141,12 @@
 
     </ion-content>
 
+    <style>
+      .outer-content {
+        --background: #f2f2f2;
+      }
+    </style>
+
     <script>
       var yearValuesArray = [2020, 2016, 2008, 2004, 2000, 1996];
       var customYearValues = document.getElementById('customYearValues');

core/src/components/datetime/test/preview/index.html

@@ -127,8 +127,8 @@
       </ion-content>
 
     <style>
-      ion-toolbar {
+      .outer-content {
-        --background: white;
+        --background: #f2f2f2;
       }
     </style>
 
@@ -173,6 +173,7 @@
       }
     </script>
   </ion-app>
+
 </body>
 
 </html>

core/src/components/fab/test/preview/index.html

@@ -150,10 +150,6 @@
     </ion-footer>
 
     <style>
-      ion-toolbar {
-        --background: white;
-      }
-
       f {
         display: block;
         margin: 15px auto;

core/src/components/grid/test/preview/index.html

@@ -284,10 +284,6 @@
     </ion-content>
 
     <style>
-      ion-toolbar {
-        --background: white;
-      }
-
       .grid-demo ion-col div {
         background-color: #f7f7f7;
         border: 1px solid #ddd;

core/src/components/icon/test/preview/index.html

@@ -176,9 +176,6 @@
 
 
     <style>
-      ion-toolbar {
-        --background: white;
-      }
 
       /*to ensure ng css encapsulation doesn't mess with icon attributes*/
       code {

core/src/components/infinite-scroll/test/preview/index.html

@@ -34,12 +34,6 @@
       </ion-infinite-scroll>
     </ion-content>
 
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
-
   </ion-app>
 
   <script>

core/src/components/input/test/preview/index.html

@@ -103,12 +103,6 @@
 
     </ion-content>
 
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
-
     <script>
       function toggleBoolean(id, prop) {
         var el = document.getElementById(id);

core/src/components/item-divider/test/preview/index.html

@@ -146,8 +146,8 @@
     </ion-content>
 
     <style>
-      ion-toolbar {
+      .outer-content {
-        --background: white;
+        --background: #f2f2f2;
       }
 
       img {

core/src/components/item-sliding/test/preview/index.html

@@ -298,10 +298,6 @@
     </ion-content>
 
     <style>
-      ion-toolbar {
-        --background: white;
-      }
-
       .download-spinner {
         display: none;
       }

core/src/components/item/test/dividers/index.html

@@ -142,6 +142,12 @@
         </ion-item>
       </ion-item-group>
     </ion-content>
+
+    <style>
+      .outer-content {
+        --background: #f2f2f2;
+      }
+    </style>
   </ion-app>
 </body>
 

core/src/components/item/test/preview/index.html

@@ -115,12 +115,6 @@
         <ion-title>Footer</ion-title>
       </ion-toolbar>
     </ion-footer>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 </body>
 

core/src/components/item/test/text/index.html

@@ -120,6 +120,12 @@
 
     </ion-content>
 
+    <style>
+      .outer-content {
+        --background: #f2f2f2;
+      }
+    </style>
+
   </ion-app>
 </body>
 

core/src/components/label/test/preview/index.html

@@ -43,12 +43,6 @@
         </ion-item>
       </ion-list>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 </body>
 

core/src/components/list/test/preview/index.html

@@ -41,12 +41,6 @@
         <ion-item>Halo</ion-item>
       </ion-list>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 </body>
 

core/src/components/modal/test/preview/index.html

@@ -25,12 +25,6 @@
       </p>
     </ion-content>
     <ion-modal-controller></ion-modal-controller>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 
   <script>

core/src/components/nav-pop/test/preview/index.html

@@ -16,10 +16,6 @@
   </ion-app>
 
   <style>
-    ion-toolbar {
-      --background: white;
-    }
-
     f {
       display: block;
       margin: 15px auto;

core/src/components/nav-push/test/preview/index.html

@@ -16,10 +16,6 @@
   </ion-app>
 
   <style>
-    ion-toolbar {
-      --background: white;
-    }
-
     f {
       display: block;
       margin: 15px auto;

core/src/components/nav-set-root/test/preview/index.html

@@ -14,11 +14,6 @@
   <ion-app>
     <ion-nav root="page-one"></ion-nav>
   </ion-app>
-  <style>
-    ion-toolbar {
-      --background: white;
-    }
-  </style>
 </body>
 
 <script>

core/src/components/nav/test/preview/index.html

@@ -75,11 +75,6 @@
   <ion-app>
     <ion-nav root="page-one"></ion-nav>
   </ion-app>
-  <style>
-    ion-toolbar {
-      --background: white;
-    }
-  </style>
 </body>
 
 </html>

core/src/components/note/test/preview/index.html

@@ -131,12 +131,6 @@
         </ion-item>
       </ion-list>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 
   <script>

core/src/components/radio-group/test/basic/index.html

@@ -12,8 +12,6 @@
 
 <body>
   <ion-app>
-
-
     <ion-header>
       <ion-toolbar>
         <ion-title>Radio Group - Basic</ion-title>
@@ -57,6 +55,12 @@
       <ion-button onClick="toggleDisabled()">Toggle Disabled</ion-button>
     </ion-content>
 
+    <style>
+      .outer-content {
+        --background: #f2f2f2;
+      }
+    </style>
+
     <script>
       var dynamicDisabled = document.getElementById('dynamicDisabled');
 
@@ -64,7 +68,6 @@
         dynamicDisabled.disabled = !dynamicDisabled.disabled;
       }
     </script>
-
   </ion-app>
 </body>
 

core/src/components/radio-group/test/form/index.html

@@ -12,8 +12,6 @@
 
 <body>
   <ion-app>
-
-
     <ion-header>
       <ion-toolbar>
         <ion-title>Radio Group - Form</ion-title>
@@ -79,6 +77,11 @@
 
     </ion-content>
 
+    <style>
+      .outer-content {
+        --background: #f2f2f2;
+      }
+    </style>
     <script>
       var changes = 0;
 

core/src/components/radio-group/test/preview/index.html

@@ -56,8 +56,8 @@
     </ion-content>
 
     <style>
-      ion-toolbar {
+      .outer-content {
-        --background: white;
+        --background: #f2f2f2;
       }
     </style>
 

core/src/components/radio/test/basic/index.html

@@ -12,7 +12,6 @@
 
 <body>
   <ion-app>
-
     <ion-header>
       <ion-toolbar>
         <ion-title>Radio - Basic</ion-title>
@@ -187,6 +186,10 @@
     </script>
 
     <style>
+      .outer-content {
+        --background: #f2f2f2;
+      }
+
       .radio-test pre {
         background: #f6f6f6;
         border: 1px solid #ddd;

core/src/components/radio/test/preview/index.html

@@ -181,8 +181,8 @@
     </script>
 
     <style>
-      ion-toolbar {
+      .outer-content {
-        --background: white;
+        --background: #f2f2f2;
       }
 
       .radio-test pre {

core/src/components/range/test/preview/index.html

@@ -104,12 +104,6 @@
 
   </ion-app>
 
-  <style>
-    ion-toolbar {
-      --background: white;
-    }
-  </style>
-
   <script>
     var ranges = ['progressValue', 'brightnessValue', 'contrastValue'];
 

core/src/components/refresher/test/preview/index.html

@@ -26,12 +26,6 @@
 
       <ion-list id="list"></ion-list>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 
   <script type="text/javascript" src="preview/data.js"></script>

core/src/components/reorder-group/test/preview/index.html

@@ -108,12 +108,6 @@
         </ion-reorder-group>
       </ion-list>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 
   <script>

core/src/components/ripple-effect/test/preview/index.html

@@ -59,12 +59,6 @@
         <ion-ripple-effect></ion-ripple-effect>
       </div>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
   <script>
     function blockClicked() {

core/src/components/router/test/preview/index.html

@@ -140,10 +140,6 @@
   </ion-app>
 
   <style>
-    ion-toolbar {
-      --background: white;
-    }
-
     f {
       display: block;
       margin: 15px auto;

core/src/components/searchbar/test/preview/index.html

@@ -115,13 +115,6 @@
         }
       </script>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
-
   </ion-app>
 </body>
 

core/src/components/select/test/basic/index.html

@@ -272,6 +272,12 @@
 
     </ion-content>
 
+    <style>
+      .outer-content {
+        --background: #f2f2f2;
+      }
+    </style>
+
     <script>
       var pets = document.getElementById('pets');
       pets.value = ['bird', 'dog'];

core/src/components/select/test/multiple-value/index.html

@@ -119,6 +119,12 @@
 
     </ion-content>
 
+    <style>
+      .outer-content {
+        --background: #f2f2f2;
+      }
+    </style>
+
     <script>
       var toppings = document.getElementById('toppings');
       toppings.value = ['bacon', 'xcheese'];

core/src/components/select/test/preview/index.html

@@ -118,8 +118,8 @@
     </ion-content>
 
     <style>
-      ion-toolbar {
+      .outer-content {
-        --background: white;
+        --background: #f2f2f2;
       }
     </style>
 

core/src/components/select/test/single-value/index.html

@@ -160,6 +160,12 @@
       </p>
     </ion-content>
 
+    <style>
+      .outer-content {
+        --background: #f2f2f2;
+      }
+    </style>
+
     <script>
       let selects = document.querySelectorAll('ion-select');
       selects.forEach(function (select) {

core/src/components/spinner/test/preview/index.html

@@ -58,12 +58,6 @@
         </ion-item>
       </ion-list>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 </body>
 

core/src/components/tabs/test/preview/index.html

@@ -76,12 +76,6 @@
         </ion-tab-button>
       </ion-tab-bar>
     </ion-tabs>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 </body>
 

core/src/components/text/test/preview/index.html

@@ -72,10 +72,6 @@
   </ion-app>
 
   <style>
-    ion-toolbar {
-      --background: white;
-    }
-
     .color-purple {
       color: purple;
     }

core/src/components/textarea/test/preview/index.html

@@ -95,12 +95,6 @@
       </div>
     </ion-content>
 
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
-
     <script>
       function toggleBoolean(id, prop) {
         var el = document.getElementById(id);

core/src/components/thumbnail/test/preview/index.html

@@ -38,12 +38,6 @@
         <ion-label>Wide Thumbnail</ion-label>
       </ion-item>
     </ion-content>
-
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
   </ion-app>
 </body>
 

core/src/components/toast/test/preview/index.html

@@ -84,10 +84,6 @@
   </script>
 
   <style>
-    ion-toolbar {
-      --background: white;
-    }
-
     f {
       display: block;
       background: blue;

core/src/components/toggle/test/preview/index.html

@@ -79,12 +79,6 @@
       </p>
     </ion-content>
 
-    <style>
-      ion-toolbar {
-        --background: white;
-      }
-    </style>
-
     <script>
       function printForm(ev) {