@syncfusion/ej2-base 20.2.48 → 20.3.48

package/styles/definition/_fluent.scss

@@ -20,28 +20,37 @@ $transparent: transparent;
 //Neutrals
 //not used
 $gray220: #11100f !default;
+
 //not used
 $gray210: #161514 !default;
+
 //not used
 $gray200: #1b1a19 !default;
 $gray190: #201f1e !default;
+
 //not used
 $gray180: #252423 !default;
+
 //not used
 $gray170: #292827 !default;
 $gray160: #323130 !default;
 $gray150: #3b3a39 !default;
+
 //not used
 $gray140: #484644 !default;
 $gray130: #605e5c !default;
+
 //not used
 $gray120: #797775 !default;
 $gray110: #8a8886 !default;
+
 //not used
 $gray100: #979593 !default;
 $gray90: #a19f9d !default;
+
 //not used
 $gray80: #b3b0ad !default;
+
 //not used
 $gray70: #bebbb8 !default;
 $gray60: #c8c6c4 !default;
@@ -57,6 +66,8 @@ $red10:     #d13438 !default;
 $orange20:  #ca5010 !default;
 $green20:   #0b6a0b !default;
 $cyan20: #038387 !default;
+$yellow10: #fce100 !default;
+$orangeyellow10: #c19c00 !default;
 
 // Primary palette
 $theme-primary: $cyanblue10 !default;
@@ -68,7 +79,6 @@ $theme-dark-alt: #106ebe !default;
 $theme-dark: #005a9e !default;
 $theme-darker: #004578 !default;
 
-
 $primary:      $theme-primary !default;
 $primary-text-color: $white !default;
 $primary-light: $theme-light !default;
@@ -92,8 +102,6 @@ $info-light-alt: $info-light !default;
 $warning-light-alt: $warning-light !default;
 $danger-light-alt: $danger-light !default;
 
-
-
 // backgroundcolor
 $content-bg-color: $white !default;
 $content-bg-color-alt1: $gray10 !default;
@@ -133,7 +141,6 @@ $spreadsheet-selection-4: #4caf51;
 $spreadsheet-selection-5: #fe9800;
 $spreadsheet-selection-6: #3f52b5;
 
-
 // text-color
 $content-text-color: $gray190 !default;
 $content-text-color-alt1: $gray160 !default;
@@ -145,7 +152,7 @@ $content-text-color-focus: $gray190 !default;
 $content-text-color-selected: $gray190 !default;
 $content-text-color-dragged: $gray190 !default;
 $content-text-color-disabled: $gray90 !default;
-$placeholder-text-color: $gray130  !default;
+$placeholder-text-color: $gray130 !default;
 $flyout-text-color: $gray190 !default;
 $flyout-text-color-hover: $gray190 !default;
 $flyout-text-color-pressed: $gray190 !default;
@@ -184,8 +191,6 @@ $tooltip-bg-color: $white !default;
 $tooltip-border: $tooltip-bg-color;
 $toooltip-text-color: $gray160 !default;
 
-
-
 // shadow
 $shadow: 0 .8px 16px rgba($black, .15) !default;
 $shadow-sm: 0 1.6px 3.6px 0 rgba($black, .132), 0 .3px .9px 0 rgba($black, .108) !default;
@@ -205,11 +210,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: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif !default;
 
-
 // default font Size
 $text-xxs: 10px !default;
 $text-xs: 12px !default;
@@ -244,7 +247,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;
@@ -253,7 +255,6 @@ $font-weight-medium:          600 !default;
 $font-weight-bold:            700 !default;
 $font-weight-bolder:          bolder !default;
 
-
 // Secondary-button
 
 $secondary-bg-color: $white !default;
@@ -272,8 +273,6 @@ $secondary-bg-color-disabled: $gray20 !default;
 $secondary-border-color-disabled: $gray20 !default;
 $secondary-text-color-disabled: $gray90 !default;
 
-
-
 // Primary-button
 
 $primary-bg-color: $primary !default;
@@ -373,7 +372,6 @@ $info-outline: $info-bg-color !default;
 $toast-text-color: $gray190;
 $toast-alt-text-color: $gray190;
 
-
 // chart series
 
 $series-1: $gray30;
@@ -408,3 +406,117 @@ $model-radius-bigger: $inputs-radius !default;
 $inputs-radius-small: $inputs-radius !default;
 $flyout-radius-small: $inputs-radius !default;
 $model-radius-small: $inputs-radius !default;
+
+//Message component
+
+//Message Default
+$msg-color: $gray160 !default;
+$msg-bg-color: $gray20 !default;
+$msg-border-color: $gray20 !default;
+$msg-color-alt1: $gray190 !default;
+$msg-bg-color-alt1: $transparent !default;
+$msg-border-color-alt1: $gray60 !default;
+$msg-color-alt2: $white !default;
+$msg-bg-color-alt2: $gray130 !default;
+$msg-border-color-alt2: $gray130 !default;
+
+$msg-icon-color: $gray130 !default;
+$msg-icon-color-alt1: $gray130 !default;
+$msg-icon-color-alt2: $white !default;
+
+$msg-close-icon-color: $gray160 !default;
+$msg-close-icon-color-alt1: $msg-color !default;
+$msg-close-icon-color-alt2: $white !default;
+
+//Message success
+$msg-success-color: $gray160 !default;
+$msg-success-bg-color: $success-light !default;
+$msg-success-border-color: $success-light !default;
+$msg-success-color-alt1: darken($green20, 5%) !default;
+$msg-success-bg-color-alt1: $transparent !default;
+$msg-success-border-color-alt1: $border-success !default;
+$msg-success-color-alt2: $white !default;
+$msg-success-bg-color-alt2: $green20 !default;
+$msg-success-border-color-alt2: $green20 !default;
+
+$msg-success-icon-color: #107c10 !default;
+$msg-success-icon-color-alt1: darken($green20, 5%) !default;
+$msg-success-icon-color-alt2: $white !default;
+
+$msg-success-close-icon-color: $gray160 !default;
+$msg-success-close-icon-color-alt1: $msg-color !default;
+$msg-success-close-icon-color-alt2: $white !default;
+
+//Message danger
+$msg-danger-color: $gray160 !default;
+$msg-danger-bg-color: lighten($red10, 42%) !default;
+$msg-danger-border-color: lighten($red10, 42%) !default;
+$msg-danger-color-alt1: darken($red10, 5%) !default;
+$msg-danger-bg-color-alt1: $transparent !default;
+$msg-danger-border-color-alt1: #a4262c !default;
+$msg-danger-color-alt2: $white !default;
+$msg-danger-bg-color-alt2: $red10 !default;
+$msg-danger-border-color-alt2: $red10 !default;
+
+$msg-danger-icon-color: #a80000 !default;
+$msg-danger-icon-color-alt1: darken($red10, 5%) !default;
+$msg-danger-icon-color-alt2: $white !default;
+
+$msg-danger-close-icon-color: $gray160 !default;
+$msg-danger-close-icon-color-alt1: $msg-color !default;
+$msg-danger-close-icon-color-alt2: $white !default;
+
+//Message warning
+$msg-warning-color: $gray160 !default;
+$msg-warning-bg-color: lighten($orangeyellow10, 51%) !default;
+$msg-warning-border-color: lighten($orangeyellow10, 51%) !default;
+$msg-warning-color-alt1: darken($orangeyellow10, 10%) !default;
+$msg-warning-bg-color-alt1: $transparent !default;
+$msg-warning-border-color-alt1: $orangeyellow10 !default;
+$msg-warning-color-alt2: $white !default;
+$msg-warning-bg-color-alt2: darken($orangeyellow10, 13%) !default;
+$msg-warning-border-color-alt2: darken($orangeyellow10, 13%) !default;
+
+$msg-warning-icon-color: $gray120 !default;
+$msg-warning-icon-color-alt1: darken($orangeyellow10, 13%) !default;
+$msg-warning-icon-color-alt2: $white !default;
+
+$msg-warning-close-icon-color: $gray160 !default;
+$msg-warning-close-icon-color-alt1: $msg-color !default;
+$msg-warning-close-icon-color-alt2: $white !default;
+
+//Message Info
+$msg-info-color: $gray160 !default;
+$msg-info-bg-color: $info-light !default;
+$msg-info-border-color: $info-light !default;
+$msg-info-color-alt1: darken($cyan20, 5%) !default;
+$msg-info-bg-color-alt1: $transparent !default;
+$msg-info-border-color-alt1: $cyan20 !default;
+$msg-info-color-alt2: $white !default;
+$msg-info-bg-color-alt2: $cyan20 !default;
+$msg-info-border-color-alt2: $cyan20 !default;
+
+$msg-info-icon-color: $content-text-color-alt3 !default;
+$msg-info-icon-color-alt1: darken($cyan20, 5%) !default;
+$msg-info-icon-color-alt2: $white !default;
+
+$msg-info-close-icon-color: $gray160 !default;
+$msg-info-close-icon-color-alt1: $msg-color !default;
+$msg-info-close-icon-color-alt2: $white !default;
+
+//Appbar
+//Light
+$appbar-bg-color-alt1:$gray10 !default;
+$appbar-color-alt1: $gray190 !default;
+$appbar-border-color-alt1: $gray10 !default;
+$appbar-hover-bg-color-alt1: rgba(transparent, .056) !default;
+
+//Dark
+$appbar-bg-color-alt2: $gray150 !default;
+$appbar-color-alt2: $white !default;
+$appbar-border-color-alt2: $gray150 !default;
+$appbar-hover-bg-color-alt2: rgba(255, 255, 255, .08) !default;
+
+//shadow
+$appbar-bottom-shadow: 0 1.6px 3.6px rgba(0, 0, 0, .13), 0 .3px .9px rgba(0, 0, 0, .1) !default;
+$appbar-top-shadow: 0 -1.6px 3.6px rgba(0, 0, 0, .13), 0 -.3px .9px rgba(0, 0, 0, .1) !default;

package/styles/definition/_fusionnew-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,19 @@ $theme-name: 'bootstrap5-dark' !default;
 $diagram-palette-background: $gray-300 !default;
 $diagram-palette-hover-background: $gray-400 !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;

package/styles/definition/_fusionnew.scss

@@ -40,7 +40,6 @@ $green:   #198754 !default;
 $teal:    #20c997 !default;
 $cyan:    #0dcaf0 !default;
 
-
 $primary:       $blue !default;
 $secondary:     $gray-600 !default;
 $success:       $green !default;
@@ -63,8 +62,6 @@ $info-light-alt: tint-color($info, 80%) !default;
 $warning-light-alt: tint-color($warning, 80%) !default;
 $danger-light-alt: tint-color($danger, 80%) !default;
 
-
-
 // backgroundcolor
 $content-bg-color: $white !default;
 $content-bg-color-alt1: $gray-100 !default;
@@ -102,7 +99,6 @@ $spreadsheet-selection-4: #4caf51;
 $spreadsheet-selection-5: #fe9800;
 $spreadsheet-selection-6: #3f52b5;
 
-
 // text-color
 $content-text-color: $gray-900 !default;
 $content-text-color-alt1: $gray-800 !default;
@@ -114,7 +110,7 @@ $content-text-color-focus: $gray-900 !default;
 $content-text-color-selected: $primary-text-color !default;
 $content-text-color-dragged: $gray-900 !default;
 $content-text-color-disabled: $gray-500 !default;
-$placeholder-text-color: $gray-600  !default;
+$placeholder-text-color: $gray-600 !default;
 $flyout-text-color: $gray-900 !default;
 $flyout-text-color-hover: $gray-900 !default;
 $flyout-text-color-pressed: $primary-text-color !default;
@@ -150,8 +146,6 @@ $tooltip-bg-color: $gray-900 !default;
 $tooltip-border: $gray-900;
 $toooltip-text-color: #f9fafb !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,7 +322,6 @@ $danger-outline: $danger-bg-color !default;
 $success-outline: $success-bg-color !default;
 $info-outline: $info-bg-color !default;
 
-
 // chart series
 
 $series-1: $gray-200;
@@ -355,3 +342,20 @@ $theme-name: 'bootstrap5' !default;
 //Diagram Palette color
 $diagram-palette-background: $white !default;
 $diagram-palette-hover-background: $content-bg-color-hover !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-900 !default;
+$appbar-color-alt2: $white !default;
+$appbar-border-color-alt2: $gray-900 !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/_highcontrast-light.scss

@@ -34,3 +34,115 @@ $disable: #757575 !default;
 $shadow: #000 !default;
 $skin-name: 'highcontrast-light' !default;
 $theme-name: 'highcontrast-light' !default;
+
+//Message Default
+$msg-color: $bg-base-100 !default;
+$msg-bg-color: $bg-base-0 !default;
+$msg-border-color: $bg-base-100 !default;
+$msg-color-alt1: $selection-bg !default;
+$msg-bg-color-alt1: transparent !default;
+$msg-border-color-alt1: $selection-bg !default;
+$msg-color-alt2: $bg-base-0 !default;
+$msg-bg-color-alt2: $selection-bg !default;
+$msg-border-color-alt2: $selection-bg !default;
+
+$msg-icon-color: $bg-base-100 !default;
+$msg-icon-color-alt1: $bg-base-100 !default;
+$msg-icon-color-alt2: $bg-base-0 !default;
+
+$msg-close-icon-color: $bg-base-100 !default;
+$msg-close-icon-color-alt1: $selection-bg !default;
+$msg-close-icon-color-alt2: $bg-base-0 !default;
+
+//Message success
+$msg-success-color: #fd0000 !default;
+$msg-success-bg-color: $bg-base-0 !default;
+$msg-success-border-color: $msg-success-color !default;
+$msg-success-color-alt1: $msg-success-color !default;
+$msg-success-bg-color-alt1: transparent !default;
+$msg-success-border-color-alt1: $bg-base-100 !default;
+$msg-success-color-alt2: $bg-base-0 !default;
+$msg-success-bg-color-alt2: $msg-success-color !default;
+$msg-success-border-color-alt2: $msg-success-color !default;
+
+$msg-success-icon-color: #fd0000 !default;
+$msg-success-icon-color-alt1: #fd0000 !default;
+$msg-success-icon-color-alt2: $bg-base-0 !default;
+
+$msg-success-close-icon-color: #fd0000 !default;
+$msg-success-close-icon-color-alt1: $content-font !default;
+$msg-success-close-icon-color-alt2: $bg-base-0 !default;
+
+//Message warning
+$msg-warning-color: #ff5b04 !default;
+$msg-warning-bg-color: $bg-base-0 !default;
+$msg-warning-border-color: $msg-warning-color !default;
+$msg-warning-color-alt1: $msg-warning-color !default;
+$msg-warning-bg-color-alt1: transparent !default;
+$msg-warning-border-color-alt1: $bg-base-100 !default;
+$msg-warning-color-alt2: $bg-base-0;
+$msg-warning-bg-color-alt2: $msg-warning-color !default;
+$msg-warning-border-color-alt2: $msg-warning-color !default;
+
+$msg-warning-icon-color: #ff5b04 !default;
+$msg-warning-icon-color-alt1: #ff5b04 !default;
+$msg-warning-icon-color-alt2: $bg-base-0 !default;
+
+$msg-warning-close-icon-color: #ff5b04 !default;
+$msg-warning-close-icon-color-alt1: $content-font !default;
+$msg-warning-close-icon-color-alt2: $bg-base-0 !default;
+
+//Message Danger
+$msg-danger-color: #fd0000 !default;
+$msg-danger-bg-color: $bg-base-0 !default;
+$msg-danger-border-color: $msg-danger-color !default;
+$msg-danger-color-alt1: $msg-danger-color !default;
+$msg-danger-bg-color-alt1: transparent !default;
+$msg-danger-border-color-alt1: $bg-base-100 !default;
+$msg-danger-color-alt2: $bg-base-0 !default;
+$msg-danger-bg-color-alt2: $msg-danger-color !default;
+$msg-danger-border-color-alt2: $msg-danger-color !default;
+
+$msg-danger-icon-color: #fd0000 !default;
+$msg-danger-icon-color-alt1: #fd0000 !default;
+$msg-danger-icon-color-alt2: $bg-base-0 !default;
+
+$msg-danger-close-icon-color: #fd0000 !default;
+$msg-danger-close-icon-color-alt1: $content-font !default;
+$msg-danger-close-icon-color-alt2: $bg-base-0 !default;
+
+//Message Info
+$msg-info-color: #22f8ff !default;
+$msg-info-bg-color: $bg-base-0 !default;
+$msg-info-border-color: $msg-info-color !default;
+$msg-info-color-alt1: $msg-info-color !default;
+$msg-info-bg-color-alt1: transparent !default;
+$msg-info-border-color-alt1: $bg-base-100 !default;
+$msg-info-color-alt2: $bg-base-0 !default;
+$msg-info-bg-color-alt2: $msg-info-color !default;
+$msg-info-border-color-alt2: $msg-info-color !default;
+
+$msg-info-icon-color: #22f8ff !default;
+$msg-info-icon-color-alt1: #22f8ff !default;
+$msg-info-icon-color-alt2: $bg-base-0 !default;
+
+$msg-info-close-icon-color: #22f8ff !default;
+$msg-info-close-icon-color-alt1: $content-font !default;
+$msg-info-close-icon-color-alt2: $bg-base-0 !default;
+
+//App bar
+//Light
+$appbar-bg-color-alt1: #fff !default;
+$appbar-color-alt1: #000 !default;
+$appbar-border-color-alt1: #000 !default;
+$appbar-hover-bg-color-alt1: rgba(255, 255, 255, .08) !default;
+
+//Dark
+$appbar-bg-color-alt2: #fff !default;
+$appbar-color-alt2: #000 !default;
+$appbar-border-color-alt2: #000 !default;
+$appbar-hover-bg-color-alt2: rgba(255, 255, 255, .08) !default;
+
+//shadow
+$appbar-bottom-shadow: none !default;
+$appbar-top-shadow: none !default;