@mediusinc/mng-commons 1.4.0 → 2.0.0-rc.1-b808fba6

package/public-api.d.ts

@@ -1,34 +1,40 @@
-export * from './lib/mng-commons.module';
-export * from './lib/api/services';
-export * from './lib/components/layout/services';
-export * from './lib/services';
-export * from './lib/services/providers';
-export * from './lib/services/tokens';
-export * from './lib/api/utils';
-export * from './lib/utils';
-export * from './lib/components/action';
-export * from './lib/components/form';
-export * from './lib/components/form/formly/fields';
-export * from './lib/components/form/formly/wrappers';
-export * from './lib/components/layout';
-export * from './lib/components/tableview';
-export * from './lib/directives';
-export * from './lib/pipes';
-export * from './lib/api/models';
-export * from './lib/components/action/models';
-export * from './lib/components/form/models';
-export * from './lib/components/tableview/models';
-export * from './lib/components/form/formly/models';
-export * from './lib/components/form/formly';
-export * from './lib/data-providers';
-export * from './lib/descriptors';
-export * from './lib/descriptors/interfaces';
-export * from './lib/descriptors/types';
-export * from './lib/models';
-export * from './lib/router';
-export * from './lib/router/models';
-export * from './lib/security';
-export * from './lib/security/model';
-export * from './lib/types';
-export * from './lib/styles';
-export * from './lib/styles/models';
+export * from './lib/mng-commons.module';
+export * from './lib/provide-commons';
+export * from './lib/api/services';
+export * from './lib/components/layout/services';
+export * from './lib/services';
+export * from './lib/services/providers';
+export * from './lib/services/tokens';
+export * from './lib/api/utils';
+export * from './lib/utils';
+export * from './lib/components/action';
+export * from './lib/components/form';
+export * from './lib/components/form/formly/fields';
+export * from './lib/components/form/formly/wrappers';
+export * from './lib/components/layout';
+export * from './lib/components/tableview';
+export * from './lib/directives';
+export * from './lib/pipes';
+export * from './lib/api/models';
+export * from './lib/components/action/models';
+export * from './lib/components/form/models';
+export * from './lib/components/tableview/models';
+export * from './lib/components/form/formly/models';
+export * from './lib/components/form/formly';
+export * from './lib/data-providers';
+export * from './lib/descriptors';
+export * from './lib/descriptors/action';
+export * from './lib/descriptors/editor';
+export * from './lib/descriptors/filter';
+export * from './lib/descriptors/interfaces';
+export * from './lib/descriptors/table';
+export * from './lib/descriptors/tableview';
+export * from './lib/descriptors/types';
+export * from './lib/models';
+export * from './lib/router';
+export * from './lib/router/models';
+export * from './lib/security';
+export * from './lib/security/model';
+export * from './lib/types';
+export * from './lib/styles';
+export * from './lib/styles/models';

package/scss/common/layout/_breadcrumb.scss

@@ -1,11 +1,15 @@
 .layout-breadcrumb-container {
     background-color: transparent;
+    padding-top: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
     .layout-breadcrumb {
         background: transparent;
         border: 0 none;
         border-radius: 0;
-        padding-left: 20px;
+        padding-left: 30px;
 
         ul {
             li {
@@ -24,7 +28,6 @@
 
                     .p-menuitem-text {
                         color: $textThirdColor;
-                        font-weight: $submenuHeaderFontWeight;
                     }
                 }
 
@@ -37,7 +40,14 @@
         }
     }
 
+    .layout-breadcrumb-left-items {
+        display: flex;
+        align-items: center;
+    }
+
     .layout-breadcrumb-right-items {
+        display: flex;
+
         .search-icon {
             display: none;
             align-items: center;

package/scss/common/layout/_exception.scss

@@ -77,7 +77,7 @@
             max-width: 320px;
         }
 
-        p-button {
+        button {
             margin-top: 50px;
         }
     }

package/scss/common/layout/_inlinemenu.scss

@@ -15,6 +15,9 @@
         cursor: pointer;
         padding: 2rem 2rem 1rem 2rem;
         color: $textColor;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
 
         img {
             border-radius: 22px;
@@ -23,6 +26,13 @@
 
         .layout-inline-menu-text {
             font-weight: 500;
+            display: flex;
+            flex-direction: column;
+            margin-left: 0.5rem;
+        }
+
+        .layout-inline-menu-icon {
+            margin-left: auto;
         }
     }
 
@@ -41,6 +51,9 @@
             }
 
             a {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
                 padding: 0.5rem 1rem;
                 border-left: 8px solid transparent;
                 border-radius: 8px;

package/scss/common/layout/_login.scss

@@ -8,6 +8,7 @@
 
         img {
             height: 100vh;
+            max-width: 490px;
         }
     }
 

package/scss/common/layout/_rightmenu.scss

@@ -56,6 +56,8 @@
     }
 
     .user-tasks {
+        display: flex;
+        justify-content: space-between;
         padding: 1.5rem 1rem;
         border-bottom: 1px solid $dividerColor;
 
@@ -69,6 +71,9 @@
             }
 
             .task-number {
+                display: flex;
+                justify-content: center;
+                align-items: center;
                 background-color: $rightMenuButtonBg;
                 color: $textColor;
                 text-align: center;

package/scss/common/layout/menu/_menu_common.scss

@@ -168,7 +168,7 @@
                     padding: 6px;
 
                     > a {
-                        padding: 0.75rem 1.25rem;
+                        padding: 0.75rem 1rem;
                     }
                 }
             }

package/scss/common/theme/designer/_mixins.scss

@@ -10,6 +10,12 @@
     box-shadow: $focusShadow;
 }
 
+@mixin focused-inset() {
+    outline: $focusOutline;
+    outline-offset: $focusOutlineOffset;
+    box-shadow: inset $focusShadow;
+}
+
 @mixin focused-input() {
     @include focused();
     border-color: $inputFocusBorderColor;
@@ -172,3 +178,26 @@
 @function shade($color, $percentage) {
     @return mix(#000, $color, $percentage);
 }
+
+@mixin button-states {
+    // <button> and <a> tags support :enabled selector.
+
+    &:enabled,
+    &:not(button):not(a):not(.p-disabled) {
+        @content;
+    }
+}
+
+@mixin menuitem-badge {
+    background: $badgeBg;
+    color: $badgeTextColor;
+    font-size: $badgeFontSize;
+    font-weight: $badgeFontWeight;
+    min-width: $badgeMinWidth;
+    height: $badgeHeight;
+    line-height: $badgeHeight;
+    border-radius: $borderRadius;
+    margin-left: $inlineSpacing;
+    padding-left: $inlineSpacing;
+    padding-right: $inlineSpacing;
+}

package/scss/common/theme/extensions/_datatable.scss

@@ -76,8 +76,8 @@
     }
 
     &.p-datatable-scrollable {
-        .p-datatable-thead {
-            background: $overlayContentBg;
+        .p-datatable-thead th {
+            background: $solidSurfaceColor;
         }
     }
 }

package/scss/common/variables/layout/_layout_dark.scss

@@ -42,7 +42,6 @@ $submenuItemTextColor: $textColor !default;
 $submenuItemHoverTextColor: $textColor !default;
 $submenuItemHoverBg: rgba(255, 255, 255, 0.05) !default;
 $activeSubmenuItemTextColor: $primaryColor !default;
-$submenuHeaderFontWeight: 500 !default;
 
 $overlayMenuActiveBg: rgba(255, 255, 255, 0.05) !default;
 $overlayMenuItemActiveBg: $primaryColor !default;

package/scss/common/variables/layout/_layout_light.scss

@@ -42,7 +42,6 @@ $submenuItemTextColor: $textColor !default;
 $submenuItemHoverTextColor: $textColor !default;
 $submenuItemHoverBg: rgba(68, 72, 109, 0.07) !default;
 $activeSubmenuItemTextColor: $primaryColor !default;
-$submenuHeaderFontWeight: 500 !default;
 
 $overlayMenuActiveBg: rgba(68, 72, 109, 0.07) !default;
 $overlayMenuItemActiveBg: $primaryColor !default;

package/scss/common/variables/theme/_theme_dark.scss

@@ -8,8 +8,9 @@ $colors: (
     'teal': #009688,
     'orange': #f57c00,
     'bluegray': #607d8b,
-    'purple': #9c27b0
-);
+    'purple': #9c27b0,
+    'primary': $primaryColor
+) !default;
 
 //shades
 $shade000: #ffffff !default; //text color
@@ -21,7 +22,9 @@ $shade700: rgba(255, 255, 255, 0.15) !default; //Alpha-03
 $shade800: rgba(255, 255, 255, 0.2) !default; //Alpha-04
 $shade900: rgba(255, 255, 255, 0.25) !default; //Alpha-05
 
-$solidSurfaceColor: #0a061a;
+$solidSurfaceColor: #0a061a !default;
+
+$hoverBg: rgba(255, 255, 255, 0.03) !default;
 
 //global
 $fontFamily: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
@@ -166,16 +169,16 @@ $infoButtonActiveBorderColor: transparent !default;
 $infoButtonShadow: 0px 0px 10px rgba(135, 62, 254, 0.3) !default;
 $infoButtonFocusShadow: none !default;
 
-$successButtonBg: #397289 !default;
+$successButtonBg: #0bd18a !default;
 $successButtonTextColor: #ffffff !default;
 $successButtonBorder: 1px solid transparent !default;
-$successButtonHoverBg: #68a4bb !default;
+$successButtonHoverBg: #049b65 !default;
 $successButtonTextHoverColor: $successButtonTextColor !default;
 $successButtonHoverBorderColor: transparent !default;
-$successButtonActiveBg: #264e5e !default;
+$successButtonActiveBg: #017e52 !default;
 $successButtonTextActiveColor: $successButtonTextColor !default;
 $successButtonActiveBorderColor: transparent !default;
-$successButtonShadow: 0px 0px 10px rgba(38, 78, 94, 0.3) !default;
+$successButtonShadow: 0px 0px 10px rgba(11, 209, 138, 0.3) !default;
 $successButtonFocusShadow: none !default;
 
 $warningButtonBg: #eee500 !default;
@@ -202,7 +205,7 @@ $helpButtonActiveBorderColor: transparent !default;
 $helpButtonShadow: 0px 0px 10px rgba(236, 77, 188, 0.3) !default;
 $helpButtonFocusShadow: none !default;
 
-$dangerButtonBg: #af1d1d !default;
+$dangerButtonBg: #fc6161 !default;
 $dangerButtonTextColor: #ffffff !default;
 $dangerButtonBorder: 1px solid transparent !default;
 $dangerButtonHoverBg: #e73a3a !default;
@@ -250,6 +253,7 @@ $colorPickerPreviewWidth: 2rem !default;
 $colorPickerPreviewHeight: 2rem !default;
 $colorPickerBg: $shade500 !default;
 $colorPickerBorderColor: $shade500 !default;
+$colorPickerBorder: 1px solid $shade500 !default;
 $colorPickerHandleColor: #ffffff !default;
 
 //togglebutton
@@ -316,6 +320,7 @@ $calendarHeaderCellPadding: 0.357rem !default;
 $calendarHeaderCellFontWeight: 500 !default;
 $calendarHeaderCellFontSize: 12px !default;
 $calendarHeaderCellTextColor: $shade200 !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
 
 $calendarCellDateBg: $shade500 !default;
 $calendarCellDatePadding: 0.357rem !default;
@@ -366,6 +371,7 @@ $panelHeaderTextHoverColor: $shade000 !default;
 
 $panelContentBorderColor: $shade700 !default;
 $panelContentBorder: 1px solid $shade700 !default;
+$panelContentEvenRowBg: rgba(255, 255, 255, 0.01) !default;
 $panelContentBg: transparent !default;
 $panelContentTextColor: $shade000 !default;
 $panelContentPadding: 1.143rem !default;
@@ -685,6 +691,7 @@ $progressBarHeight: 0.571rem !default;
 $progressBarBorder: 0 none !default;
 $progressBarBg: $shade600 !default;
 $progressBarValueBg: $primaryColor !default;
+$progressBarValueTextColor: $primaryTextColor !default;
 
 //menu (e.g. menu, menubar, tieredmenu)
 $menuWidth: 12.5rem !default;
@@ -813,38 +820,38 @@ $galleriaThumbnailNavigatorWidth: 2rem !default;
 $galleriaThumbnailNavigatorHeight: 2rem !default;
 
 //divider
-$dividerHorizontalMargin: 1rem 0;
-$dividerHorizontalPadding: 0 1rem;
-$dividerVerticalMargin: 0 1rem;
-$dividerVerticalPadding: 1rem 0;
-$dividerSize: 1px;
-$dividerColor: $shade700;
+$dividerHorizontalMargin: 1rem 0 !default;
+$dividerHorizontalPadding: 0 1rem !default;
+$dividerVerticalMargin: 0 1rem !default;
+$dividerVerticalPadding: 1rem 0 !default;
+$dividerSize: 1px !default;
+$dividerColor: $shade700 !default;
 
 //avatar
-$avatarBg: $shade500;
-$avatarTextColor: $textColor;
+$avatarBg: $shade500 !default;
+$avatarTextColor: $textColor !default;
 
 //chip
-$chipBg: $shade500;
-$chipTextColor: $textColor;
-$chipBorderRadius: 16px;
+$chipBg: $shade500 !default;
+$chipTextColor: $textColor !default;
+$chipBorderRadius: 16px !default;
 
 //scrollTop
-$scrollTopBg: $highlightBg;
-$scrollTopHoverBg: scale-color($highlightBg, $alpha: 24%);
-$scrollTopWidth: 3rem;
-$scrollTopHeight: 3rem;
-$scrollTopBorderRadius: 50%;
-$scrollTopFontSize: 1.5rem;
-$scrollTopTextColor: $highlightTextColor;
+$scrollTopBg: $highlightBg !default;
+$scrollTopHoverBg: scale-color($highlightBg, $alpha: 24%) !default;
+$scrollTopWidth: 3rem !default;
+$scrollTopHeight: 3rem !default;
+$scrollTopBorderRadius: 50% !default;
+$scrollTopFontSize: 1.5rem !default;
+$scrollTopTextColor: $highlightTextColor !default;
 
 //skeleton
-$skeletonBg: rgba(255, 255, 255, 0.06);
-$skeletonAnimationBg: rgba(255, 255, 255, 0.04);
+$skeletonBg: rgba(255, 255, 255, 0.06) !default;
+$skeletonAnimationBg: rgba(255, 255, 255, 0.04) !default;
 
 //splitter
-$splitterGutterBg: $shade700;
-$splitterGutterHandleBg: $shade700;
+$splitterGutterBg: $shade700 !default;
+$splitterGutterHandleBg: $shade700 !default;
 
 //speeddial
 $speedDialButtonWidth: 4rem !default;
@@ -884,28 +891,47 @@ $imagePreviewActionIconFontSize: 1.5rem !default;
 $imagePreviewActionIconBorderRadius: 50% !default;
 
 :root {
-    --surface-a: #{$shade200};
-    --surface-b: #{$shade500};
-    --surface-c: #{$shade600};
-    --surface-d: #{$shade700};
+    --surface-a: #{$shade800};
+    --surface-b: #{$shade900};
+    --surface-c: #{$hoverBg};
+    --surface-d: #{$shade600};
     --surface-e: #{$shade800};
-    --surface-f: #{$shade900};
+    --surface-f: #{$shade800};
     --text-color: #{$shade000};
     --text-color-secondary: #{$shade100};
     --primary-color: #{$primaryColor};
     --primary-color-text: #{$primaryTextColor};
     --font-family: #{$fontFamily};
-    --surface-0: #17212f;
-    --surface-50: #1d2734;
-    --surface-100: #232c39;
-    --surface-200: #28323f;
-    --surface-300: #2e3744;
-    --surface-400: #343d49;
-    --surface-500: #3a424e;
-    --surface-600: #404853;
-    --surface-700: #454d59;
-    --surface-800: #4b535e;
-    --surface-900: #515963;
+    --surface-0: #0a061a;
+    --surface-50: #231f31;
+    --surface-100: #3b3848;
+    --surface-200: #54515f;
+    --surface-300: #6c6a76;
+    --surface-400: #85838d;
+    --surface-500: #9d9ba3;
+    --surface-600: #b6b4ba;
+    --surface-700: #cecdd1;
+    --surface-800: #e7e6e8;
+    --surface-900: #ffffff;
+    --gray-50: #e7e6e8;
+    --gray-100: #cecdd1;
+    --gray-200: #b6b4ba;
+    --gray-300: #9d9ba3;
+    --gray-400: #85838d;
+    --gray-500: #6c6a76;
+    --gray-600: #54515f;
+    --gray-700: #3b3848;
+    --gray-800: #231f31;
+    --gray-900: #0a061a;
     --content-padding: #{$panelContentPadding};
     --inline-spacing: #{$inlineSpacing};
+    --border-radius: #{$borderRadius};
+    --surface-ground: linear-gradient(180deg, #2e323f 0%, #0a061a 100%);
+    --surface-section: linear-gradient(180deg, #2e323f 0%, #0a061a 100%);
+    --surface-card: rgba(255, 255, 255, 0.05);
+    --surface-overlay: linear-gradient(180deg, #2e323f 0%, #0a061a 100%);
+    --surface-border: rgba(255, 255, 255, 0.15);
+    --surface-hover: rgba(255, 255, 255, 0.05);
+    --maskbg: #{$maskBg};
+    --focus-ring: #{$focusShadow};
 }

package/scss/common/variables/theme/_theme_light.scss

@@ -8,8 +8,9 @@ $colors: (
     'teal': #009688,
     'orange': #f57c00,
     'bluegray': #607d8b,
-    'purple': #9c27b0
-);
+    'purple': #9c27b0,
+    'primary': $primaryColor
+) !default;
 
 //reused color variables
 $shade000: transparent !default; //surface
@@ -21,7 +22,7 @@ $shade500: #8a8ea6 !default; //text third color
 $shade600: #676b89 !default; //text secondary color
 $shade700: #44486d !default; //text color
 
-$solidSurfaceColor: white;
+$solidSurfaceColor: #ececf9 !default;
 
 //global
 $fontFamily: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
@@ -74,7 +75,7 @@ $inputHoverBorderColor: transparent !default;
 $inputFocusBorderColor: $primaryColor !default;
 $inputErrorBorderColor: $errorColor !default;
 $inputPlaceholderTextColor: $shade500 !default;
-$inputFilledBg: $shade000 !default; //??
+$inputFilledBg: $shade000 !default;
 $inputFilledHoverBg: $inputFilledBg !default;
 $inputFilledFocusBg: $shade100 !default;
 
@@ -166,16 +167,16 @@ $infoButtonActiveBorderColor: transparent !default;
 $infoButtonShadow: 0px 0px 10px rgba(135, 62, 254, 0.25) !default;
 $infoButtonFocusShadow: none !default;
 
-$successButtonBg: #397289 !default;
+$successButtonBg: #0bd18a !default;
 $successButtonTextColor: #ffffff !default;
 $successButtonBorder: 1px solid transparent !default;
-$successButtonHoverBg: #68a4bb !default;
+$successButtonHoverBg: #049b65 !default;
 $successButtonTextHoverColor: $successButtonTextColor !default;
 $successButtonHoverBorderColor: transparent !default;
-$successButtonActiveBg: #264e5e !default;
+$successButtonActiveBg: #017e52 !default;
 $successButtonTextActiveColor: $successButtonTextColor !default;
 $successButtonActiveBorderColor: transparent !default;
-$successButtonShadow: 0px 0px 10px rgba(38, 78, 94, 0.3) !default;
+$successButtonShadow: 0px 0px 10px rgba(11, 209, 138, 0.25) !default;
 $successButtonFocusShadow: none !default;
 
 $warningButtonBg: #eee500 !default;
@@ -202,7 +203,7 @@ $helpButtonActiveBorderColor: transparent !default;
 $helpButtonShadow: 0px 0px 10px rgba(236, 77, 188, 0.25) !default;
 $helpButtonFocusShadow: none !default;
 
-$dangerButtonBg: #af1d1d !default;
+$dangerButtonBg: #fc6161 !default;
 $dangerButtonTextColor: #ffffff !default;
 $dangerButtonBorder: 1px solid transparent !default;
 $dangerButtonHoverBg: #e73a3a !default;
@@ -250,6 +251,7 @@ $colorPickerPreviewWidth: 2rem !default;
 $colorPickerPreviewHeight: 2rem !default;
 $colorPickerBg: $shade100 !default;
 $colorPickerBorderColor: #191919 !default;
+$colorPickerBorder: 1px solid #191919 !default;
 $colorPickerHandleColor: #191919 !default;
 
 //togglebutton
@@ -316,6 +318,7 @@ $calendarHeaderCellPadding: 0.357rem !default;
 $calendarHeaderCellFontWeight: 500 !default;
 $calendarHeaderCellFontSize: 12px !default;
 $calendarHeaderCellTextColor: $shade500 !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
 
 $calendarCellDateBg: $shade100 !default;
 $calendarCellDatePadding: 0.357rem !default;
@@ -367,6 +370,7 @@ $panelHeaderTextHoverColor: $shade700 !default;
 $panelContentBorderColor: $shade300 !default;
 $panelContentBorder: 1px solid $shade300 !default;
 $panelContentBg: transparent !default;
+$panelContentEvenRowBg: scale-color($panelContentBg, $lightness: -1%) !default;
 $panelContentTextColor: $shade700 !default;
 $panelContentPadding: 1.143rem !default;
 
@@ -686,6 +690,7 @@ $progressBarHeight: 0.571rem !default;
 $progressBarBorder: 0 none !default;
 $progressBarBg: $shade200 !default;
 $progressBarValueBg: $primaryColor !default;
+$progressBarValueTextColor: $primaryTextColor !default;
 
 //menu (e.g. menu, menubar, tieredmenu)
 $menuWidth: 12.5rem !default;
@@ -814,38 +819,38 @@ $galleriaThumbnailNavigatorWidth: 2rem !default;
 $galleriaThumbnailNavigatorHeight: 2rem !default;
 
 //divider
-$dividerHorizontalMargin: 1rem 0;
-$dividerHorizontalPadding: 0 1rem;
-$dividerVerticalMargin: 0 1rem;
-$dividerVerticalPadding: 1rem 0;
-$dividerSize: 1px;
-$dividerColor: $shade300;
+$dividerHorizontalMargin: 1rem 0 !default;
+$dividerHorizontalPadding: 0 1rem !default;
+$dividerVerticalMargin: 0 1rem !default;
+$dividerVerticalPadding: 1rem 0 !default;
+$dividerSize: 1px !default;
+$dividerColor: $shade300 !default;
 
 //avatar
-$avatarBg: $shade300;
-$avatarTextColor: $textColor;
+$avatarBg: $shade300 !default;
+$avatarTextColor: $textColor !default;
 
 //chip
-$chipBg: $shade300;
-$chipTextColor: $textColor;
-$chipBorderRadius: 16px;
+$chipBg: $shade300 !default;
+$chipTextColor: $textColor !default;
+$chipBorderRadius: 16px !default;
 
 //scrollTop
-$scrollTopBg: rgba(0, 0, 0, 0.7);
-$scrollTopHoverBg: rgba(0, 0, 0, 0.8);
-$scrollTopWidth: 3rem;
-$scrollTopHeight: 3rem;
-$scrollTopBorderRadius: 50%;
-$scrollTopFontSize: 1.5rem;
-$scrollTopTextColor: $shade000;
+$scrollTopBg: rgba(0, 0, 0, 0.7) !default;
+$scrollTopHoverBg: rgba(0, 0, 0, 0.8) !default;
+$scrollTopWidth: 3rem !default;
+$scrollTopHeight: 3rem !default;
+$scrollTopBorderRadius: 50% !default;
+$scrollTopFontSize: 1.5rem !default;
+$scrollTopTextColor: $shade000 !default;
 
 //skeleton
-$skeletonBg: $shade100;
-$skeletonAnimationBg: rgba(255, 255, 255, 0.4);
+$skeletonBg: $shade100 !default;
+$skeletonAnimationBg: rgba(255, 255, 255, 0.4) !default;
 
 //splitter
-$splitterGutterBg: $shade300;
-$splitterGutterHandleBg: $shade300;
+$splitterGutterBg: $shade300 !default;
+$splitterGutterHandleBg: $shade300 !default;
 
 //speeddial
 $speedDialButtonWidth: 4rem !default;
@@ -889,11 +894,43 @@ $imagePreviewActionIconBorderRadius: 50% !default;
     --surface-b: #{$shade100};
     --surface-c: #{$shade200};
     --surface-d: #{$shade300};
-    --surface-e: #{$shade400};
-    --surface-f: #{$shade500};
+    --surface-e: #{$shade000};
+    --surface-f: #{$shade000};
     --text-color: #{$shade700};
     --text-color-secondary: #{$shade600};
     --primary-color: #{$primaryColor};
     --primary-color-text: #{$primaryTextColor};
     --font-family: #{$fontFamily};
+    --surface-0: #ffffff;
+    --surface-50: #e1e2e8;
+    --surface-100: #cbccd6;
+    --surface-200: #b4b6c5;
+    --surface-300: #9ea0b3;
+    --surface-400: #878aa2;
+    --surface-500: #717490;
+    --surface-600: #5a5e7f;
+    --surface-700: #44486d;
+    --surface-800: #3c3f60;
+    --surface-900: #343753;
+    --gray-50: #e1e2e8;
+    --gray-100: #cbccd6;
+    --gray-200: #b4b6c5;
+    --gray-300: #9ea0b3;
+    --gray-400: #878aa2;
+    --gray-500: #717490;
+    --gray-600: #5a5e7f;
+    --gray-700: #44486d;
+    --gray-800: #3c3f60;
+    --gray-900: #343753;
+    --content-padding: #{$panelContentPadding};
+    --inline-spacing: #{$inlineSpacing};
+    --border-radius: #{$borderRadius};
+    --surface-ground: linear-gradient(180deg, #f6f9fc 0%, #ececf9 100%);
+    --surface-section: #ffffff;
+    --surface-card: rgba(255, 255, 255, 0.9);
+    --surface-overlay: #ececf9;
+    --surface-border: rgba(68, 72, 109, 0.2);
+    --surface-hover: rgba(68, 72, 109, 0.07);
+    --maskbg: #{$maskBg};
+    --focus-ring: #{$focusShadow};
 }

package/scss/theme/default/_mng-variables-theme-light.scss

@@ -9,3 +9,5 @@ $primaryTextColor: #ffffff !default;
 $highlightBg: $primaryColor !default;
 $highlightTextColor: $primaryTextColor !default;
 $calendarHeaderTextColor: #000000; // black in light theme, white in dark theme
+
+$solidSurfaceColor: white !default;