test(theming): update theming tests

core/src/components/toolbar/test/colors/index.html

@@ -20,8 +20,10 @@
           <ion-button fill="solid" color="danger">
             <ion-icon slot="icon-only" name="add"></ion-icon>
           </ion-button>
+          <ion-button fill="solid">Solid</ion-button>
         </ion-buttons>
         <ion-buttons slot="primary">
+          <ion-button fill="clear">Clear</ion-button>
           <ion-button>
             <ion-icon slot="icon-only" name="more"></ion-icon>
           </ion-button>
@@ -34,8 +36,10 @@
           <ion-button fill="solid" color="danger">
             <ion-icon slot="icon-only" name="add"></ion-icon>
           </ion-button>
+        <ion-button fill="outline">Outline</ion-button>
         </ion-buttons>
         <ion-buttons slot="primary">
+          <ion-button fill="clear">Clear</ion-button>
           <ion-button>
             <ion-icon slot="icon-only" name="more"></ion-icon>
           </ion-button>
@@ -48,8 +52,10 @@
           <ion-button fill="solid" color="danger">
             <ion-icon slot="icon-only" name="add"></ion-icon>
           </ion-button>
+          <ion-button fill="solid">Solid</ion-button>
         </ion-buttons>
         <ion-buttons slot="primary">
+          <ion-button fill="clear">Clear</ion-button>
           <ion-button>
             <ion-icon slot="icon-only" name="more"></ion-icon>
           </ion-button>
@@ -62,8 +68,10 @@
           <ion-button fill="solid" color="danger">
             <ion-icon slot="icon-only" name="add"></ion-icon>
           </ion-button>
+          <ion-button fill="outline">Outline</ion-button>
         </ion-buttons>
         <ion-buttons slot="primary">
+          <ion-button fill="clear">Clear</ion-button>
           <ion-button>
             <ion-icon slot="icon-only" name="more"></ion-icon>
           </ion-button>
@@ -76,8 +84,10 @@
           <ion-button fill="solid" color="danger">
             <ion-icon slot="icon-only" name="add"></ion-icon>
           </ion-button>
+          <ion-button fill="solid">Solid</ion-button>
         </ion-buttons>
         <ion-buttons slot="primary">
+          <ion-button fill="clear">Clear</ion-button>
           <ion-button>
             <ion-icon slot="icon-only" name="more"></ion-icon>
           </ion-button>
@@ -90,8 +100,10 @@
           <ion-button fill="solid" color="danger">
             <ion-icon slot="icon-only" name="add"></ion-icon>
           </ion-button>
+          <ion-button fill="outline">Outline</ion-button>
         </ion-buttons>
         <ion-buttons slot="primary">
+          <ion-button fill="clear">Clear</ion-button>
           <ion-button>
             <ion-icon slot="icon-only" name="more"></ion-icon>
           </ion-button>
@@ -104,8 +116,10 @@
           <ion-button fill="solid" color="danger">
             <ion-icon slot="icon-only" name="add"></ion-icon>
           </ion-button>
+          <ion-button fill="solid">Solid</ion-button>
         </ion-buttons>
         <ion-buttons slot="primary">
+          <ion-button fill="clear">Clear</ion-button>
           <ion-button>
             <ion-icon slot="icon-only" name="more"></ion-icon>
           </ion-button>
@@ -118,8 +132,10 @@
           <ion-button fill="solid" color="danger">
             <ion-icon slot="icon-only" name="add"></ion-icon>
           </ion-button>
+          <ion-button fill="solid">Solid</ion-button>
         </ion-buttons>
         <ion-buttons slot="primary">
+          <ion-button fill="outline">Outline</ion-button>
           <ion-button>
             <ion-icon slot="icon-only" name="more"></ion-icon>
           </ion-button>
@@ -132,8 +148,10 @@
           <ion-button fill="solid" color="danger">
             <ion-icon slot="icon-only" name="add"></ion-icon>
           </ion-button>
+          <ion-button fill="solid">Solid</ion-button>
         </ion-buttons>
         <ion-buttons slot="primary">
+          <ion-button fill="clear">Clear</ion-button>
           <ion-button>
             <ion-icon slot="icon-only" name="more"></ion-icon>
           </ion-button>
@@ -146,8 +164,10 @@
           <ion-button fill="solid" color="danger">
             <ion-icon slot="icon-only" name="add"></ion-icon>
           </ion-button>
+          <ion-button fill="solid">Solid</ion-button>
         </ion-buttons>
         <ion-buttons slot="primary">
+          <ion-button fill="clear">Clear</ion-button>
           <ion-button>
             <ion-icon slot="icon-only" name="more"></ion-icon>
           </ion-button>
@@ -160,8 +180,10 @@
           <ion-button fill="solid" color="danger">
             <ion-icon slot="icon-only" name="add"></ion-icon>
           </ion-button>
+          <ion-button fill="solid">Solid</ion-button>
         </ion-buttons>
         <ion-buttons slot="primary">
+          <ion-button fill="clear">Clear</ion-button>
           <ion-button>
             <ion-icon slot="icon-only" name="more"></ion-icon>
           </ion-button>

core/src/themes/test/css-variables/css/dark.css

@@ -27,4 +27,21 @@
 
   --ion-item-background: #1b2025;
   --ion-item-background-activated: #051b35;
+
+  /* Custom Toolbar CSS (optional) */
+  --ion-toolbar-background: #000;
+  --ion-toolbar-border-color: #333;
+  --ion-toolbar-color: limegreen;
+  --ion-toolbar-color-activated: rgb(35, 156, 35);
+}
+
+/* Customize the Toolbar Segment by Mode */
+.ios {
+  --ion-toolbar-color-unchecked: limegreen;
+  --ion-toolbar-color-checked: limegreen;
+}
+
+.md {
+  --ion-toolbar-color-unchecked: rgba(255, 255, 255, .6);
+  --ion-toolbar-color-checked: #fff;
 }

core/src/themes/test/css-variables/index.html

@@ -11,6 +11,8 @@
   <script src="../../../../../scripts/testing/scripts.js"></script>
   <script src="../../../../../dist/ionic.js"></script>
 
+  <link id="theme" href="/src/themes/test/css-variables/css/default.css" rel="stylesheet">
+
   <style>
     .wrapper {
       display: flex;
@@ -68,9 +70,21 @@
 
       <ion-tab tab="list">
         <ion-header>
-          <ion-toolbar color="primary">
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button default-href="/"></ion-back-button>
+              <ion-button>Default</ion-button>
+              <ion-button fill="solid">Solid</ion-button>
+              <ion-button fill="clear">Clear</ion-button>
+              <ion-button fill="outline">Outline</ion-button>
+            </ion-buttons>
+
             <ion-title>Lists</ion-title>
 
+            <ion-buttons slot="primary">
+              <ion-button color="secondary" fill="outline">Secondary Outline</ion-button>
+            </ion-buttons>
+
             <div slot="end" class="right-container">
               <ion-label>Select a Theme:</ion-label>
               <ion-select interface="popover" class="theme-picker">
@@ -81,6 +95,14 @@
               </ion-select>
             </div>
           </ion-toolbar>
+          <ion-toolbar>
+            <ion-segment>
+              <ion-segment-button><ion-label>Favorites</ion-label></ion-segment-button>
+              <ion-segment-button><ion-label>All</ion-label></ion-segment-button>
+              <ion-segment-button disabled><ion-label>Disabled</ion-label></ion-segment-button>
+              <ion-segment-button checked><ion-label>Active</ion-label></ion-segment-button>
+            </ion-segment>
+          </ion-toolbar>
         </ion-header>
 
         <ion-content padding>
@@ -702,7 +724,6 @@
   </ion-app>
 
   <script>
-    const cssCache = new Map();
     const selects = document.querySelectorAll('.theme-picker');
 
     for (let i = 0; i < selects.length; i++) {
@@ -713,21 +734,18 @@
     }
 
     function toggleTheme(theme) {
-      const styleTarget = document.documentElement.style;
+      var cssFile = `/src/themes/test/css-variables/css/${theme}.css`;
-      if (theme === 'default') {
+
-        styleTarget.cssText = '';
+      var oldLink = document.getElementById('theme');
-      } else {
+
-        if (cssCache.has(theme)) {
+      var newLink = document.createElement('link');
-          styleTarget.cssText = cssCache.get(theme);
+      newLink.setAttribute('id', 'theme');
-        } else {
+      newLink.setAttribute('rel', 'stylesheet');
-          fetch(`/src/themes/test/css-variables/css/${theme}.css`)
+      newLink.setAttribute('type', 'text/css');
-            .then(result => result.text())
+      newLink.setAttribute('href', cssFile);
-            .then(css => {
+
-              cssCache.set(theme, css.replace(/(:root ?{)|}|\/\*\*.*\*\*\/|\s/g, '').trim());
+      document.getElementsByTagName('head').item(0).replaceChild(newLink, oldLink);
-              toggleTheme(theme);
+
-            });
-        }
-      }
 
       for (let i = 0; i < selects.length; i++) {
         selects[i].value = theme;