@syncfusion/ej2-base 20.2.48 → 20.3.48

package/styles/common/_core.scss

@@ -1,4 +1,5 @@
 @include export-module('base-core') {
+
   /*! common core */
   .e-control,
   .e-css  {
@@ -11,8 +12,7 @@
   $background: #e82824;
 
   $warning: #ffd800;
-  $yellow:  rgb(255, 255, 0);
-
+  $yellow: #ffff00;
   .e-error {
     color: $error-font-color;
     font-family: $font-family;
@@ -21,8 +21,8 @@
   }
 
   .e-control,
-  .e-control [class^='e-'],
-  .e-control [class*=' e-'] {
+  .e-control [class ^= 'e-'],
+  .e-control [class *= ' e-'] {
     box-sizing: border-box;
   }
 
@@ -84,17 +84,14 @@
   .e-block-touch {
     touch-action: pinch-zoom;
   }
-
   .e-license {
     color: $yellow;
     text-decoration: none;
   }
-
   .e-license-banner {
-    cursor: pointer;
     position: absolute;
     right: 10px;
     top: 27%;
+    cursor: pointer;
   }
-
 }

package/styles/definition/_bootstrap-dark.scss

@@ -59,3 +59,117 @@ $grey-dark: $gray-dark !default;
 $grey: $gray !default;
 $grey-light: $gray-light !default;
 $grey-lighter: $gray-lighter !default;
+
+//Message Component
+
+//Message Default
+$msg-color: $grey-light-font !default;
+$msg-bg-color: $gray-dark !default;
+$msg-border-color: $gray !default;
+$msg-color-alt1: $grey-light-font !default;
+$msg-bg-color-alt1: transparent !default;
+$msg-border-color-alt1: $gray-light !default;
+$msg-color-alt2: $brand-primary-font !default;
+$msg-bg-color-alt2: $grey-ad !default;
+$msg-border-color-alt2: $grey-ad !default;
+
+$msg-icon-color: $grey-light-font !default;
+$msg-icon-color-alt1: $grey-light-font !default;
+$msg-icon-color-alt2: $brand-primary-font !default;
+
+$msg-close-icon-color: $grey-cc !default;
+$msg-close-icon-color-alt1: $grey-cc !default;
+$msg-close-icon-color-alt2: $brand-primary-font !default;
+
+//Message Danger
+$msg-danger-color: lighten($brand-danger, 30%) !default;
+$msg-danger-bg-color: darken($brand-danger, 25%) !default;
+$msg-danger-border-color: darken($brand-danger, 22%) !default;
+$msg-danger-color-alt1: lighten($brand-danger, 20%) !default;
+$msg-danger-bg-color-alt1: transparent !default;
+$msg-danger-border-color-alt1: $brand-danger !default;
+$msg-danger-color-alt2: $gray-base !default;
+$msg-danger-bg-color-alt2: $brand-danger !default;
+$msg-danger-border-color-alt2: $brand-danger !default;
+
+$msg-danger-icon-color: lighten($brand-danger, 30%) !default;
+$msg-danger-icon-color-alt1: $brand-danger !default;
+$msg-danger-icon-color-alt2: $gray-base !default;
+
+$msg-danger-close-icon-color: $grey-cc !default;
+$msg-danger-close-icon-color-alt1: $grey-cc !default;
+$msg-danger-close-icon-color-alt2: $gray-base !default;
+
+//Message success
+$msg-success-color: lighten($brand-success, 20%) !default;
+$msg-success-bg-color: darken($brand-success, 25%) !default;
+$msg-success-border-color: darken($brand-success, 20%) !default;
+$msg-success-color-alt1: $brand-success !default;
+$msg-success-bg-color-alt1: transparent !default;
+$msg-success-border-color-alt1: $brand-success !default;
+$msg-success-color-alt2: $gray-base !default;
+$msg-success-bg-color-alt2: $brand-success !default;
+$msg-success-border-color-alt2: $brand-success !default;
+
+$msg-success-icon-color: lighten($brand-success, 20%) !default;
+$msg-success-icon-color-alt1: $brand-success !default;
+$msg-success-icon-color-alt2: $gray-base !default;
+
+$msg-success-close-icon-color: $grey-cc !default;
+$msg-success-close-icon-color-alt1: $grey-cc !default;
+$msg-success-close-icon-color-alt2: $gray-base !default;
+
+//Message warning
+$msg-warning-color: lighten($brand-warning, 20%) !default;
+$msg-warning-bg-color: darken($brand-warning, 50%) !default;
+$msg-warning-border-color: darken($brand-warning, 45%) !default;
+$msg-warning-color-alt1: $brand-warning !default;
+$msg-warning-bg-color-alt1: transparent !default;
+$msg-warning-border-color-alt1: $brand-warning !default;
+$msg-warning-color-alt2: $gray-base !default;
+$msg-warning-bg-color-alt2: $brand-warning !default;
+$msg-warning-border-color-alt2: $brand-warning !default;
+
+$msg-warning-icon-color: $brand-warning !default;
+$msg-warning-icon-color-alt1: $brand-warning !default;
+$msg-warning-icon-color-alt2: $gray-base !default;
+
+$msg-warning-close-icon-color: $grey-cc !default;
+$msg-warning-close-icon-color-alt1: $grey-cc !default;
+$msg-warning-close-icon-color-alt2: $gray-base !default;
+
+//Message Info
+$msg-info-color: lighten($brand-info, 35%) !default;
+$msg-info-bg-color: darken($brand-info, 25%) !default;
+$msg-info-border-color: darken($brand-info, 22%) !default;
+$msg-info-color-alt1: $brand-info !default;
+$msg-info-bg-color-alt1: transparent !default;
+$msg-info-border-color-alt1: $brand-info !default;
+$msg-info-color-alt2: $gray-base !default;
+$msg-info-bg-color-alt2: $brand-info !default;
+$msg-info-border-color-alt2: $brand-info !default;
+
+$msg-info-icon-color: $brand-info !default;
+$msg-info-icon-color-alt1: $brand-info !default;
+$msg-info-icon-color-alt2: $gray-base !default;
+
+$msg-info-close-icon-color: $grey-cc !default;
+$msg-info-close-icon-color-alt1: $grey-cc !default;
+$msg-info-close-icon-color-alt2: $gray-base !default;
+
+//App bar
+//Light
+$appbar-bg-color-alt1: $gray-dark !default;
+$appbar-color-alt1: $grey-dark-font !default;
+$appbar-border-color-alt1: $gray-dark !default;
+$appbar-hover-bg-color-alt1: rgba(255, 255, 255, .08) !default;
+
+//Dark
+$appbar-bg-color-alt2: $grey-d4 !default;
+$appbar-color-alt2: $gray-darker !default;
+$appbar-border-color-alt2: $grey-d4 !default;
+$appbar-hover-bg-color-alt2: rgba(transparent, .056) !default;
+
+//shadow
+$appbar-bottom-shadow: none !default;
+$appbar-top-shadow: none !default;

package/styles/definition/_bootstrap.scss

@@ -48,9 +48,123 @@ $skin-name: 'bootstrap' !default;
 $theme-name: 'bootstrap' !default;
 
 // mapping Bootstrap variables
-$grey-base: $gray-base  !default;
+$grey-base: $gray-base !default;
 $grey-darker: $gray-darker !default;
 $grey-dark: $gray-dark !default;
 $grey: $gray !default;
 $grey-light: $gray-light !default;
 $grey-lighter: $gray-lighter !default;
+
+//Message component
+
+//Message Default
+$msg-color: $gray-darker !default;
+$msg-bg-color: $grey-f9 !default;
+$msg-border-color: $grey-e6 !default;
+$msg-color-alt1: $gray-darker !default;
+$msg-bg-color-alt1: transparent !default;
+$msg-border-color-alt1: $grey-88 !default;
+$msg-color-alt2: $grey-white !default;
+$msg-bg-color-alt2: $gray !default;
+$msg-border-color-alt2: $gray !default;
+
+$msg-icon-color: $gray-darker !default;
+$msg-icon-color-alt1: $gray-darker !default;
+$msg-icon-color-alt2: $grey-white !default;
+
+$msg-close-icon-color: $gray !default;
+$msg-close-icon-color-alt1: $gray !default;
+$msg-close-icon-color-alt2: $grey-white !default;
+
+//Message Danger
+$msg-danger-color: $brand-danger-dark !default;
+$msg-danger-bg-color: $brand-danger-light !default;
+$msg-danger-border-color: #ebccd1 !default;
+$msg-danger-color-alt1: $brand-danger-dark !default;
+$msg-danger-bg-color-alt1: transparent !default;
+$msg-danger-border-color-alt1: $brand-danger-dark !default;
+$msg-danger-color-alt2: $grey-white !default;
+$msg-danger-bg-color-alt2: $brand-danger-dark !default;
+$msg-danger-border-color-alt2: $brand-danger-dark !default;
+
+$msg-danger-icon-color: $brand-danger-dark !default;
+$msg-danger-icon-color-alt1: $brand-danger-dark !default;
+$msg-danger-icon-color-alt2: $grey-white !default;
+
+$msg-danger-close-icon-color: $gray !default;
+$msg-danger-close-icon-color-alt1: $gray !default;
+$msg-danger-close-icon-color-alt2: $grey-white !default;
+
+//Message success
+$msg-success-color: $brand-success-dark !default;
+$msg-success-bg-color: $brand-success-light !default;
+$msg-success-border-color: #d6e9c6 !default;
+$msg-success-color-alt1: $brand-success-dark !default;
+$msg-success-bg-color-alt1: transparent !default;
+$msg-success-border-color-alt1: $brand-success-dark !default;
+$msg-success-color-alt2: $grey-white !default;
+$msg-success-bg-color-alt2: $brand-success-dark !default;
+$msg-success-border-color-alt2: $brand-success-dark !default;
+
+$msg-success-icon-color: $brand-success-dark !default;
+$msg-success-icon-color-alt1: $brand-success-dark !default;
+$msg-success-icon-color-alt2: $grey-white !default;
+
+$msg-success-close-icon-color: $gray !default;
+$msg-success-close-icon-color-alt1: $gray !default;
+$msg-success-close-icon-color-alt2: $grey-white !default;
+
+//Message warning
+$msg-warning-color: $brand-warning-dark !default;
+$msg-warning-bg-color: $brand-warning-light !default;
+$msg-warning-border-color: #faebcc !default;
+$msg-warning-color-alt1: $brand-warning-dark !default;
+$msg-warning-bg-color-alt1: transparent !default;
+$msg-warning-border-color-alt1: $brand-warning-dark !default;
+$msg-warning-color-alt2: $grey-white !default;
+$msg-warning-bg-color-alt2: $brand-warning-dark !default;
+$msg-warning-border-color-alt2: $brand-warning-dark !default;
+
+$msg-warning-icon-color: $brand-warning-dark !default;
+$msg-warning-icon-color-alt1: $brand-warning-dark !default;
+$msg-warning-icon-color-alt2: $grey-white !default;
+
+$msg-warning-close-icon-color: $gray !default;
+$msg-warning-close-icon-color-alt1: $gray !default;
+$msg-warning-close-icon-color-alt2: $grey-white !default;
+
+//Message Info
+$msg-info-color: $brand-info-font !default;
+$msg-info-bg-color: $brand-info-light !default;
+$msg-info-border-color: #bce8f1 !default;
+$msg-info-color-alt1: $brand-info-font !default;
+$msg-info-bg-color-alt1: transparent !default;
+$msg-info-border-color-alt1: $brand-info-font !default;
+$msg-info-color-alt2: $grey-white !default;
+$msg-info-bg-color-alt2: $brand-info-font !default;
+$msg-info-border-color-alt2: $brand-info-font !default;
+
+$msg-info-icon-color: $brand-info-font !default;
+$msg-info-icon-color-alt1: $brand-info-font !default;
+$msg-info-icon-color-alt2: $grey-white !default;
+
+$msg-info-close-icon-color: $gray !default;
+$msg-info-close-icon-color-alt1: $gray !default;
+$msg-info-close-icon-color-alt2: $grey-white !default;
+
+//App bar
+//Light
+$appbar-bg-color-alt1: $grey-f8 !default;
+$appbar-color-alt1: $gray !default;
+$appbar-border-color-alt1: $grey-e6 !default;
+$appbar-hover-bg-color-alt1: rgba(transparent, .056) !default;
+
+//Dark
+$appbar-bg-color-alt2: $gray-darker !default;
+$appbar-color-alt2: $grey-e6 !default;
+$appbar-border-color-alt2: $gray-darker !default;
+$appbar-hover-bg-color-alt2: rgba(255, 255, 255, .08) !default;
+
+//shadow
+$appbar-bottom-shadow: none !default;
+$appbar-top-shadow: none !default;

package/styles/definition/_bootstrap4.scss

@@ -37,3 +37,117 @@ $content-bg:    $white !default;
 $content-popup-bg: $white !default;
 $skin-name: 'bootstrap4' !default;
 $theme-name: 'bootstrap4' !default;
+
+//Message component
+
+//Message Default
+$msg-color: $gray-900 !default;
+$msg-bg-color: #e2e3e5 !default;
+$msg-border-color: #d6d8db !default;
+$msg-color-alt1: $gray-900 !default;
+$msg-bg-color-alt1: transparent !default;
+$msg-border-color-alt1: $gray-500 !default;
+$msg-color-alt2: $white !default;
+$msg-bg-color-alt2: $gray-600 !default;
+$msg-border-color-alt2: $gray-600 !default;
+
+$msg-icon-color: $gray-900 !default;
+$msg-icon-color-alt1: $gray-900 !default;
+$msg-icon-color-alt2: $white !default;
+
+$msg-close-icon-color: $dark !default;
+$msg-close-icon-color-alt1: $dark !default;
+$msg-close-icon-color-alt2: $white !default;
+
+//Message Danger
+$msg-danger-color: #721c24 !default;
+$msg-danger-bg-color: #f8d7da !default;
+$msg-danger-border-color: #f5c6cb !default;
+$msg-danger-color-alt1: $red !default;
+$msg-danger-bg-color-alt1: transparent !default;
+$msg-danger-border-color-alt1: $msg-danger-color-alt1 !default;
+$msg-danger-color-alt2: $white !default;
+$msg-danger-bg-color-alt2: $msg-danger-color-alt1 !default;
+$msg-danger-border-color-alt2: $msg-danger-color-alt1 !default;
+
+$msg-danger-icon-color: $red !default;
+$msg-danger-icon-color-alt1: $red !default;
+$msg-danger-icon-color-alt2: $white !default;
+
+$msg-danger-close-icon-color: $dark !default;
+$msg-danger-close-icon-color-alt1: $dark !default;
+$msg-danger-close-icon-color-alt2: $white !default;
+
+//Message success
+$msg-success-color: #155724 !default;
+$msg-success-bg-color: #d4edda !default;
+$msg-success-border-color: #c3e6cb !default;
+$msg-success-color-alt1: $green !default;
+$msg-success-bg-color-alt1: transparent !default;
+$msg-success-border-color-alt1: $msg-success-color-alt1 !default;
+$msg-success-color-alt2: $white !default;
+$msg-success-bg-color-alt2: $msg-success-color-alt1 !default;
+$msg-success-border-color-alt2: $msg-success-color-alt1 !default;
+
+$msg-success-icon-color: $green !default;
+$msg-success-icon-color-alt1: $green !default;
+$msg-success-icon-color-alt2: $white !default;
+
+$msg-success-close-icon-color: $dark !default;
+$msg-success-close-icon-color-alt1: $dark !default;
+$msg-success-close-icon-color-alt2: $white !default;
+
+//Message warning
+$msg-warning-color: #856404 !default;
+$msg-warning-bg-color: #fff3cd !default;
+$msg-warning-border-color: lighten($yellow, 35%) !default;
+$msg-warning-color-alt1: darken($yellow, 25%) !default;
+$msg-warning-bg-color-alt1: transparent !default;
+$msg-warning-border-color-alt1: $yellow !default;
+$msg-warning-color-alt2: $gray-900 !default;
+$msg-warning-bg-color-alt2: $msg-warning-border-color-alt1 !default;
+$msg-warning-border-color-alt2: $msg-warning-border-color-alt1 !default;
+
+$msg-warning-icon-color: darken($yellow, 25%) !default;
+$msg-warning-icon-color-alt1: darken($yellow, 25%) !default;
+$msg-warning-icon-color-alt2: $black !default;
+
+$msg-warning-close-icon-color: $dark !default;
+$msg-warning-close-icon-color-alt1: $dark !default;
+$msg-warning-close-icon-color-alt2: $gray-900 !default;
+
+//Message Info
+$msg-info-color: #0c5460 !default;
+$msg-info-bg-color: #d1ecf1 !default;
+$msg-info-border-color: #bee5eb !default;
+$msg-info-color-alt1: $cyan !default;
+$msg-info-bg-color-alt1: transparent !default;
+$msg-info-border-color-alt1: $cyan !default;
+$msg-info-color-alt2: $white !default;
+$msg-info-bg-color-alt2: $msg-info-color-alt1 !default;
+$msg-info-border-color-alt2: $msg-info-color-alt1 !default;
+
+$msg-info-icon-color: $cyan !default;
+$msg-info-icon-color-alt1: $cyan !default;
+$msg-info-icon-color-alt2: $white !default;
+
+$msg-info-close-icon-color: $dark !default;
+$msg-info-close-icon-color-alt1: $dark !default;
+$msg-info-close-icon-color-alt2: $white !default;
+
+//App bar
+//Light
+$appbar-bg-color-alt1: $gray-100 !default;
+$appbar-color-alt1: $gray-900 !default;
+$appbar-border-color-alt1: $gray-100 !default;
+$appbar-hover-bg-color-alt1: rgba(transparent, .056) !default;
+
+//Dark
+$appbar-bg-color-alt2: $gray-800 !default;
+$appbar-color-alt2: $white !default;
+$appbar-border-color-alt2: $gray-800 !default;
+$appbar-hover-bg-color-alt2: rgba(255, 255, 255, .08) !default;
+
+//shadow
+$appbar-bottom-shadow: none !default;
+$appbar-top-shadow: none !default;

package/styles/definition/_bootstrap5-dark.scss

@@ -18,15 +18,15 @@ $white:    #fff !default;
 $transparent: transparent;
 
 // scss-docs-start gray-color-variables
-$gray-100: #f8f9fa !default;//
-$gray-200: #e9ecef !default;//
-$gray-300: #dee2e6 !default;//
-$gray-400: #ced4da !default;//
-$gray-500: #adb5bd !default;//
-$gray-600: #6c757d !default;//
-$gray-700: #495057 !default;//
-$gray-800: #343a40 !default;//
-$gray-900: #212529 !default;//
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
 
 // scss-docs-start color-variables
 $blue:    #0d6efd !default;
@@ -40,7 +40,6 @@ $green:   #198754 !default;
 $teal:    #20c997 !default;
 $cyan:    #0dcaf0 !default;
 
-
 $primary:       $blue !default;
 $secondary:     $gray-600 !default;
 $success:       lighten($green, 10%) !default;
@@ -63,8 +62,6 @@ $info-light-alt:          darken($cyan, 25%) !default;
 $warning-light-alt:       darken($yellow, 20%) !default;
 $danger-light-alt:        darken($red, 25%) !default;
 
-
-
 // backgroundcolor
 $content-bg-color: $gray-900 !default;
 $content-bg-color-alt1: lighten($gray-900, 3%) !default;
@@ -103,7 +100,6 @@ $spreadsheet-selection-4: #4caf51;
 $spreadsheet-selection-5: #fe9800;
 $spreadsheet-selection-6: #3f52b5;
 
-
 // text-color
 $content-text-color: $white !default;
 $content-text-color-alt1: $gray-200 !default;
@@ -115,7 +111,7 @@ $content-text-color-focus: $white !default;
 $content-text-color-selected: $primary-text-color !default;
 $content-text-color-dragged: $white !default;
 $content-text-color-disabled: $gray-600 !default;
-$placeholder-text-color: $gray-600  !default;
+$placeholder-text-color: $gray-600 !default;
 $flyout-text-color: $white !default;
 $flyout-text-color-hover: $white !default;
 $flyout-text-color-pressed: $primary-text-color !default;
@@ -150,8 +146,6 @@ $tooltip-bg-color: $gray-200 !default;
 $tooltip-border: $gray-200;
 $toooltip-text-color: $gray-900 !default;
 
-
-
 // shadow
 $shadow: 0 .8px 16px rgba($black, .15) !default;
 $shadow-sm: 0 2px 4px rgba($black, .075) !default;
@@ -170,11 +164,9 @@ $danger-shadow-focus: 0 0 0 4px rgba(tint-color($danger, 15%), .5) !default;
 $info-shadow-focus: 0 0 0 4px rgba(tint-color($info, 15%), .5) !default;
 $warning-shadow-focus: 0 0 0 4px rgba(tint-color($warning, 15%), .5) !default;
 
-
 // fontfamily
 $font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
 
-
 // default font Size
 $text-xxs: 10px !default;
 $text-xs: 12px !default;
@@ -209,7 +201,6 @@ $leading-normal: 1.5 !default;
 $leading-relaxed: 1.625 !default;
 $leading-loose: 2 !default;
 
-
 // font Weight
 $font-weight-lighter:         lighter !default;
 $font-weight-light:           300 !default;
@@ -218,7 +209,6 @@ $font-weight-medium:          500 !default;
 $font-weight-bold:            700 !default;
 $font-weight-bolder:          bolder !default;
 
-
 // Secondary-button
 
 $secondary-bg-color: $secondary !default;
@@ -237,8 +227,6 @@ $secondary-bg-color-disabled: rgba($secondary-bg-color, .65) !default;
 $secondary-border-color-disabled: $secondary-bg-color-disabled !default;
 $secondary-text-color-disabled: rgba($secondary-text-color, .65) !default;
 
-
-
 // Primary-button
 
 $primary-bg-color: $primary !default;
@@ -334,8 +322,6 @@ $danger-outline: lighten($danger, 10%) !default;
 $success-outline: lighten($success, 10%) !default;
 $info-outline: lighten($info, 10%) !default;
 
-
-
 // Chart series
 $series-1: $gray-800;
 $series-2: $gray-700;
@@ -356,3 +342,116 @@ $theme-name: 'bootstrap5-dark' !default;
 $diagram-palette-background: $gray-300 !default;
 $diagram-palette-hover-background: $gray-400 !default;
 
+//Message component
+
+//Message Default
+$msg-color: $white !default;
+$msg-bg-color: #3b4248 !default;
+$msg-border-color: lighten($gray-800, 7%) !default;
+$msg-color-alt1: $white !default;
+$msg-bg-color-alt1: $transparent !default;
+$msg-border-color-alt1: #9ca3af !default;
+$msg-color-alt2: $white !default;
+$msg-bg-color-alt2: lighten($gray-800, 7%) !default;
+$msg-border-color-alt2: $msg-bg-color-alt2 !default;
+
+$msg-icon-color: $white !default;
+$msg-icon-color-alt1: $white !default;
+$msg-icon-color-alt2: $white !default;
+
+$msg-close-icon-color: $icon-color !default;
+$msg-close-icon-color-alt1: $icon-color !default;
+$msg-close-icon-color-alt2: $white !default;
+
+//Message Danger
+$msg-danger-color: lighten($red, 40%) !default;
+$msg-danger-bg-color: darken($red, 30%) !default;
+$msg-danger-border-color: darken($red, 30%) !default;
+$msg-danger-color-alt1: lighten($red, 10%) !default;
+$msg-danger-bg-color-alt1: $transparent !default;
+$msg-danger-border-color-alt1: lighten($red, 10%) !default;
+$msg-danger-color-alt2: $gray-900 !default;
+$msg-danger-bg-color-alt2: lighten($red, 10%) !default;
+$msg-danger-border-color-alt2: lighten($red, 10%) !default;
+
+$msg-danger-icon-color: lighten($red, 40%) !default;
+$msg-danger-icon-color-alt1: lighten($red, 10%) !default;
+$msg-danger-icon-color-alt2: $gray-900 !default;
+
+$msg-danger-close-icon-color: $icon-color !default;
+$msg-danger-close-icon-color-alt1: $icon-color !default;
+$msg-danger-close-icon-color-alt2: $gray-900 !default;
+
+//Message success
+$msg-success-color: #2ed889 !default;
+$msg-success-bg-color: darken($green, 20%) !default;
+$msg-success-border-color: darken($green, 18%) !default;
+$msg-success-color-alt1: lighten($green, 10%) !default;
+$msg-success-bg-color-alt1: $transparent !default;
+$msg-success-border-color-alt1: lighten($green, 10%) !default;
+$msg-success-color-alt2: $gray-900 !default;
+$msg-success-bg-color-alt2: lighten($green, 10%) !default;
+$msg-success-border-color-alt2: lighten($green, 10%) !default;
+
+$msg-success-icon-color: #2ed889 !default;
+$msg-success-icon-color-alt1: lighten($green, 10%) !default;
+$msg-success-icon-color-alt2: $gray-900 !default;
+
+$msg-success-close-icon-color: $icon-color !default;
+$msg-success-close-icon-color-alt1: $icon-color !default;
+$msg-success-close-icon-color-alt2: $gray-900 !default;
+
+//Message warning
+$msg-warning-color: lighten($yellow, 35%) !default;
+$msg-warning-bg-color: darken($yellow, 25%) !default;
+$msg-warning-border-color: darken($yellow, 22%) !default;
+$msg-warning-color-alt1: $yellow !default;
+$msg-warning-bg-color-alt1: $transparent !default;
+$msg-warning-border-color-alt1: $yellow !default;
+$msg-warning-color-alt2: $gray-900 !default;
+$msg-warning-bg-color-alt2: $yellow !default;
+$msg-warning-border-color-alt2: $yellow !default;
+
+$msg-warning-icon-color: $yellow !default;
+$msg-warning-icon-color-alt1: $yellow !default;
+$msg-warning-icon-color-alt2: $gray-900 !default;
+
+$msg-warning-close-icon-color: $icon-color !default;
+$msg-warning-close-icon-color-alt1: $icon-color !default;
+$msg-warning-close-icon-color-alt2: $gray-900 !default;
+
+//Message Info
+$msg-info-color: lighten($cyan, 25%) !default;
+$msg-info-bg-color: darken($cyan, 30%) !default;
+$msg-info-border-color: darken($cyan, 27%) !default;
+$msg-info-color-alt1: $cyan !default;
+$msg-info-bg-color-alt1: $transparent !default;
+$msg-info-border-color-alt1: $cyan !default;
+$msg-info-color-alt2: $gray-900 !default;
+$msg-info-bg-color-alt2: $cyan !default;
+$msg-info-border-color-alt2: $cyan !default;
+
+$msg-info-icon-color: $cyan !default;
+$msg-info-icon-color-alt1: $cyan !default;
+$msg-info-icon-color-alt2: $gray-900 !default;
+
+$msg-info-close-icon-color: $icon-color !default;
+$msg-info-close-icon-color-alt1: $icon-color !default;
+$msg-info-close-icon-color-alt2: $gray-900 !default;
+
+//App bar
+//Light
+$appbar-bg-color-alt1: $gray-800 !default;
+$appbar-color-alt1: $white !default;
+$appbar-border-color-alt1: $gray-800 !default;
+$appbar-hover-bg-color-alt1: rgba(255, 255, 255, .08) !default;
+
+//Dark
+$appbar-bg-color-alt2: $gray-300 !default;
+$appbar-color-alt2: $gray-900 !default;
+$appbar-border-color-alt2: $gray-300 !default;
+$appbar-hover-bg-color-alt2: rgba(transparent, .056) !default;
+
+//shadow
+$appbar-bottom-shadow: none !default;
+$appbar-top-shadow: none !default;