sweetalert2 11.2.0 → 11.3.1

package/src/{instanceMethods/keydown-handler.js → keydown-handler.js}

@@ -1,8 +1,8 @@
-import * as dom from '../utils/dom/index.js'
-import { DismissReason } from '../utils/DismissReason.js'
-import { callIfFunction } from '../utils/utils.js'
-import { clickConfirm } from '../staticMethods/dom.js'
-import privateProps from '../privateProps.js'
+import * as dom from './utils/dom/index.js'
+import { DismissReason } from './utils/DismissReason.js'
+import { callIfFunction } from './utils/utils.js'
+import { clickConfirm } from './staticMethods/dom.js'
+import privateProps from './privateProps.js'
 
 export const addKeydownHandler = (instance, globalState, innerParams, dismissWith) => {
   if (globalState.keydownTarget && globalState.keydownHandlerAdded) {

package/src/{instanceMethods/popup-click-handler.js → popup-click-handler.js}

@@ -1,6 +1,6 @@
-import { callIfFunction } from '../utils/utils.js'
-import { DismissReason } from '../utils/DismissReason.js'
-import privateProps from '../privateProps.js'
+import { callIfFunction } from './utils/utils.js'
+import { DismissReason } from './utils/DismissReason.js'
+import privateProps from './privateProps.js'
 
 export const handlePopupClick = (instance, domCache, dismissWith) => {
   const innerParams = privateProps.innerParams.get(instance)

package/src/utils/dom/getters.js

@@ -1,6 +1,6 @@
 import { swalClasses } from '../classes.js'
 import { uniqueArray, toArray } from '../utils.js'
-import { isVisible } from './domUtils.js'
+import { isVisible, hasClass } from './domUtils.js'
 
 export const getContainer = () => document.body.querySelector(`.${swalClasses.container}`)
 
@@ -87,11 +87,11 @@ export const getFocusableElements = () => {
 }
 
 export const isModal = () => {
-  return !isToast() && !document.body.classList.contains(swalClasses['no-backdrop'])
+  return !hasClass(document.body, swalClasses['toast-shown']) && !hasClass(document.body, swalClasses['no-backdrop'])
 }
 
 export const isToast = () => {
-  return document.body.classList.contains(swalClasses['toast-shown'])
+  return getPopup() && hasClass(getPopup(), swalClasses.toast)
 }
 
 export const isLoading = () => {

package/src/utils/dom/renderers/renderPopup.js

@@ -17,6 +17,11 @@ export const renderPopup = (instance, params) => {
   // Padding
   dom.applyNumericalStyle(popup, 'padding', params.padding)
 
+  // Color
+  if (params.color) {
+    popup.style.color = params.color
+  }
+
   // Background
   if (params.background) {
     popup.style.background = params.background

package/src/utils/params.js

@@ -23,6 +23,7 @@ export const defaultParams = {
   },
   customClass: {},
   target: 'body',
+  color: undefined,
   backdrop: true,
   heightAuto: true,
   allowOutsideClick: true,
@@ -99,6 +100,7 @@ export const updatableParams = [
   'cancelButtonText',
   'closeButtonAriaLabel',
   'closeButtonHtml',
+  'color',
   'confirmButtonAriaLabel',
   'confirmButtonColor',
   'confirmButtonText',

package/src/variables.scss

@@ -51,7 +51,7 @@ $swal2-title-position: relative !default;
 $swal2-title-max-width: 100% !default;
 $swal2-title-margin: 0 !default;
 $swal2-title-padding: .8em 1em 0 !default;
-$swal2-title-color: lighten($swal2-black, 35) !default;
+$swal2-title-color: inherit !default;
 $swal2-title-font-size: 1.875em !default;
 $swal2-title-font-weight: 600 !default;
 $swal2-title-text-align: center !default;
@@ -61,7 +61,7 @@ $swal2-html-container-justify-content: center !default;
 $swal2-html-container-margin: 1em 1.6em .3em !default;
 $swal2-html-container-padding: 0 !default;
 $swal2-html-container-overflow: auto !default;
-$swal2-html-container-color: lighten($swal2-black, 33) !default;
+$swal2-html-container-color: inherit !default;
 $swal2-html-container-font-size: 1.125em !default;
 $swal2-html-container-font-weight: normal !default;
 $swal2-html-container-line-height: normal !default;
@@ -129,7 +129,7 @@ $swal2-active-step-color: $swal2-white !default;
 $swal2-footer-margin: 1em 0 0 !default;
 $swal2-footer-padding: 1em 1em 0 !default;
 $swal2-footer-border-color: #eee !default;
-$swal2-footer-color: lighten($swal2-black, 33) !default;
+$swal2-footer-color: inherit !default;
 $swal2-footer-font-size: 1em !default;
 
 // TIMER POGRESS BAR
@@ -187,7 +187,7 @@ $swal2-button-focus-box-shadow: 0 0 0 3px $swal2-outline-color !default;
 $swal2-confirm-button-order: null !default;
 $swal2-confirm-button-border: 0 !default;
 $swal2-confirm-button-border-radius: .25em !default;
-$swal2-confirm-button-background-color: #7367f0 !default;
+$swal2-confirm-button-background-color: #7066e0 !default;
 $swal2-confirm-button-color: $swal2-white !default;
 $swal2-confirm-button-font-size: 1em !default;
 $swal2-confirm-button-focus-box-shadow: 0 0 0 3px rgba($swal2-confirm-button-background-color, .5) !default;
@@ -196,7 +196,7 @@ $swal2-confirm-button-focus-box-shadow: 0 0 0 3px rgba($swal2-confirm-button-bac
 $swal2-deny-button-order: null !default;
 $swal2-deny-button-border: 0 !default;
 $swal2-deny-button-border-radius: .25em !default;
-$swal2-deny-button-background-color: #ea5455 !default;
+$swal2-deny-button-background-color: #dc3741 !default;
 $swal2-deny-button-color: $swal2-white !default;
 $swal2-deny-button-font-size: 1em !default;
 $swal2-deny-button-focus-box-shadow: 0 0 0 3px rgba($swal2-deny-button-background-color, .5) !default;
@@ -205,7 +205,7 @@ $swal2-deny-button-focus-box-shadow: 0 0 0 3px rgba($swal2-deny-button-backgroun
 $swal2-cancel-button-order: null !default;
 $swal2-cancel-button-border: 0 !default;
 $swal2-cancel-button-border-radius: .25em !default;
-$swal2-cancel-button-background-color: #6e7d88 !default;
+$swal2-cancel-button-background-color: #6e7881 !default;
 $swal2-cancel-button-color: $swal2-white !default;
 $swal2-cancel-button-font-size: 1em !default;
 $swal2-cancel-button-focus-box-shadow: 0 0 0 3px rgba($swal2-cancel-button-background-color, .5) !default;

package/sweetalert2.d.ts

@@ -580,7 +580,14 @@ declare module 'sweetalert2' {
     padding?: number | string;
 
     /**
-     * Popup background (CSS `background` property).
+     * Color for title, content and footer (CSS `color` property).  The default color is `#545454`.
+     *
+     * @default undefined
+     */
+    color?: string;
+
+    /**
+     * Popup background (CSS `background` property). The default background is `#fff`.
      *
      * @default undefined
      */