fix(toast): default hue should be subtle

Author: brandyscarney

core/api.txt

@@ -2428,6 +2428,7 @@ ion-toast,prop,duration,number,config.getNumber('toastDuration', 0),false,false
 ion-toast,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-toast,prop,header,string | undefined,undefined,false,false
 ion-toast,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
+ion-toast,prop,hue,"bold" | "subtle" | undefined,'subtle',false,false
 ion-toast,prop,icon,string | undefined,undefined,false,false
 ion-toast,prop,isOpen,boolean,false,false,false
 ion-toast,prop,keyboardClose,boolean,false,false,false

core/src/components/toast/test/colors/index.html renamed to core/src/components/toast/test/hue/index.html

@@ -33,8 +33,8 @@
           demo purposes only.
         </p>
 
-        <button class="expand" onclick="openAllToasts(false)">Show All Bold Toasts</button>
-        <button class="expand" onclick="openAllToasts(true)">Show All Subtle Toasts</button>
+        <button class="expand" onclick="openAllToasts(false)">Show All Subtle Toasts</button>
+        <button class="expand" onclick="openAllToasts(true)">Show All Bold Toasts</button>
       </ion-content>
 
       <div id="toastBackdrop" class="backdrop"></div>
@@ -116,7 +116,7 @@
       }
 
       // Show all toasts sequentially with a slight delay between each
-      function openAllToasts(isSubtle) {
+      function openAllToasts(isBold) {
         toastCount = 0;
         activeToasts = [];
 
@@ -127,7 +127,7 @@
               buttons: [{ text: 'Action' }, { icon: 'close', role: 'cancel' }],
               color: item.color,
               icon: item.icon,
-              ...(isSubtle ? { hue: 'subtle' } : {}),
+              ...(isBold ? { hue: 'bold' } : {}),
             },
             index * 150
           );

core/src/components/toast/toast.tsx

@@ -139,7 +139,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
    * Set to `"bold"` for a toast with vibrant, bold colors or to `"subtle"` for
    * a toast with muted, subtle colors.
    */
-  @Prop() hue?: 'bold' | 'subtle' = 'bold';
+  @Prop() hue?: 'bold' | 'subtle' = 'subtle';
 
   /**
    * Defines how the message and buttons are laid out in the toast.