ngx-edu-sharing-ui 10.0.30 → 11.0.2

package/assets/scss/material-theme.scss

@@ -51,41 +51,47 @@ $dark-secondary-text: rgba(black, 0.54);
 
 :root {
     --mat-sys-corner-full: 9999px;
-    --mdc-fab-container-color: #{$backgroundColor};
+    --mat-fab-container-color: #{$backgroundColor};
 }
 :root {
-    --mdc-switch-track-width: 48px;
-    --mdc-switch-track-height: 26px;
-    --mat-switch-with-icon-handle-size: 22px;
-    --mdc-switch-handle-width: 22px;
-    --mdc-switch-handle-height: 22px;
-    --mat-switch-pressed-handle-size: 22px;
-    --mat-switch-track-outline-color: var(--mdc-switch-unselected-handle-color);
-    --mdc-switch-handle-shape: var(--mat-sys-corner-full);
-    --mdc-switch-track-shape: var(--mat-sys-corner-full);
+    --mat-slide-toggle-track-width: 48px;
+    --mat-slide-toggle-track-height: 26px;
+    --mat-slide-toggle-with-icon-handle-size: 22px;
+    --mat-slide-toggle-handle-width: 22px;
+    --mat-slide-toggle-handle-height: 22px;
+    --mat-slide-toggle-pressed-handle-size: 22px;
+    --mat-slide-toggle-track-outline-color: var(--mat-slide-toggle-unselected-handle-color);
+    --mat-slide-toggle-handle-shape: var(--mat-sys-corner-full);
+    --mat-slide-toggle-track-shape: var(--mat-sys-corner-full);
+    --mat-sidenav-content-background-color: #{$backgroundColor};
+}
+html mat-sidenav {
+    --mat-sidenav-container-divider-color: transparent;
+    --mat-sidenav-container-background-color: #{$backgroundColor};
 }
-
 html .mat-mdc-slide-toggle {
-    --mat-switch-track-outline-width: 2px;
-    --mat-switch-unselected-with-icon-handle-horizontal-margin: 0 4px;
-    --mat-switch-unselected-pressed-handle-horizontal-margin: 0 4px;
-    --mat-switch-selected-with-icon-handle-horizontal-margin: 0 -2px;
-    --mat-switch-selected-pressed-handle-horizontal-margin: 0 -2px;
-    --mdc-switch-handle-elevation-shadow: none;
-    --mat-switch-track-outline-color: var(--mdc-switch-unselected-handle-color);
+    --mat-slide-toggle-track-outline-width: 2px;
+    --mat-slide-toggle-unselected-with-icon-handle-horizontal-margin: 0 4px;
+    --mat-slide-toggle-unselected-pressed-handle-horizontal-margin: 0 4px;
+    --mat-slide-toggle-selected-with-icon-handle-horizontal-margin: 0 -2px;
+    --mat-slide-toggle-selected-pressed-handle-horizontal-margin: 0 -2px;
+    --mat-slide-toggle-handle-elevation-shadow: none;
+    --mat-slide-toggle-track-outline-color: var(--mat-slide-toggle-unselected-handle-color);
 }
 .mat-mdc-standard-chip {
-    --mdc-chip-elevated-container-color: var(--palette-primary-100);
+    --mat-chip-elevated-container-color: var(--palette-primary-100);
 }
 .mdc-switch--selected {
-    --mdc-switch-selected-icon-size: 16px;
-    --mdc-switch-selected-handle-color: var(--palette-primary-contrast-500);
-    --mdc-switch-selected-focus-handle-color: var(--palette-primary-contrast-500);
-    --mdc-switch-selected-hover-handle-color: var(--palette-primary-contrast-500);
-    --mdc-switch-selected-pressed-handle-color: var(--palette-primary-contrast-500);
-    --mdc-switch-selected-icon-color: var(--palette-primary-500);
+    --mat-slide-toggle-selected-icon-size: 16px;
+    --mat-slide-toggle-selected-handle-color: var(--palette-primary-contrast-500);
+    --mat-slide-toggle-selected-focus-handle-color: var(--palette-primary-contrast-500);
+    --mat-slide-toggle-selected-hover-handle-color: var(--palette-primary-contrast-500);
+    --mat-slide-toggle-selected-pressed-handle-color: var(--palette-primary-contrast-500);
+    --mat-slide-toggle-selected-icon-color: var(--palette-primary-500);
+}
+.mat-mdc-outlined-button:not(:disabled) {
+    --mat-button-outlined-outline-color: var(--palette-primary-500);
 }
-
 .mdc-button {
     span {
         display: flex;
@@ -108,7 +114,7 @@ mat-button-toggle-group {
     .mat-button-toggle-checked.mat-button-toggle-appearance-standard {
         color: var(--light-primary-text);
         background-color: var(--primary);
-        --mat-standard-button-toggle-selected-state-text-color: var(--light-primary-text);
+        --mat-button-toggle-selected-state-text-color: var(--light-primary-text);
     }
     .mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay {
         background-color: var(--primary);
@@ -139,20 +145,23 @@ mat-button-toggle-group {
 }
 mat-tab-group {
     mat-tab-header {
-        background-color: $backgroundColor;
+        background-color: var(--roundedContainerBackground);
+    }
+    &.mat-tab-group-shadow mat-tab-header {
+        @include materialShadowBottom();
     }
 }
 .mat-tab-group.mat-dark {
     .mat-tab-header {
-        background-color: $workspaceTopBarBackground;
+        background-color: var(--workspaceTopBarBackground);
     }
     .mat-tab-header-pagination .mat-tab-header-pagination-chevron {
-        border-color: $workspaceTopBarFontColor;
+        border-color: var(--workspaceTopBarFontColor);
     }
     .mat-tab-labels {
-        background-color: $workspaceTopBarBackground;
+        background-color: var(--workspaceTopBarBackground);
         .mat-tab-label {
-            color: $workspaceTopBarFontColor;
+            color: var(--workspaceTopBarFontColor);
             &.cdk-keyboard-focused:not(.mat-tab-disabled) {
                 background-color: rgba(255, 255, 255, 0.2);
             }
@@ -230,7 +239,7 @@ mat-tab-group {
 }
 // form border on hover
 .mat-form-field-appearance-outline {
-    --mdc-outlined-text-field-hover-outline-color: #{mat-css-vars.mat-css-color-primary(300)};
+    --mat-form-field-outlined-hover-outline-color: #{mat-css-vars.mat-css-color-primary(300)};
 }
 .mat-form-field-dark {
     input,
@@ -251,28 +260,28 @@ mat-tab-group {
 .mat-mdc-form-field.mat-form-field-bright {
     input,
     textarea {
-        --mdc-outlined-text-field-caret-color: var(--primaryLight);
+        --mat-form-field-outlined-caret-color: var(--primaryLight);
     }
-    --mdc-outlined-text-field-label-text-color: rgba(255, 255, 255, 0.87);
-    --mdc-outlined-text-field-outline-color: rgba(255, 255, 255, 0.6);
-    --mdc-outlined-text-field-hover-outline-color: rgba(255, 255, 255, 0.87);
-    --mdc-outlined-text-field-focus-outline-color: #{mat-css-vars.mat-css-color-primary(100)};
+    --mat-form-field-outlined-label-text-color: rgba(255, 255, 255, 0.87);
+    --mat-form-field-outlined-outline-color: rgba(255, 255, 255, 0.6);
+    --mat-form-field-outlined-hover-outline-color: rgba(255, 255, 255, 0.87);
+    --mat-form-field-outlined-focus-outline-color: #{mat-css-vars.mat-css-color-primary(100)};
     .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
         color: mat-css-vars.mat-css-color-primary(50);
     }
-    --mdc-outlined-text-field-input-text-color: rgba(255, 255, 255);
+    --mat-form-field-outlined-input-text-color: rgba(255, 255, 255);
 }
 mat-slide-toggle.mat-mdc-slide-toggle.mat-primary-bright {
-    --mdc-switch-unselected-handle-color: #fff;
-    --mdc-switch-unselected-hover-handle-color: var(--palette-primary-50);
-    --mdc-switch-unselected-focus-handle-color: var(--palette-primary-50);
-    --mdc-switch-unselected-pressed-handle-color: var(--palette-primary-50);
-    --mdc-switch-unselected-icon-color: var(--textLight);
-    --mdc-switch-selected-handle-color: #fff;
-    --mdc-switch-selected-hover-handle-color: var(--palette-primary-50);
-    --mdc-switch-selected-focus-handle-color: var(--palette-primary-50);
-    --mdc-switch-selected-pressed-handle-color: var(--palette-primary-50);
-    --mdc-switch-selected-icon-color: var(--primary);
+    --mat-slide-toggle-unselected-handle-color: #fff;
+    --mat-slide-toggle-unselected-hover-handle-color: var(--palette-primary-50);
+    --mat-slide-toggle-unselected-focus-handle-color: var(--palette-primary-50);
+    --mat-slide-toggle-unselected-pressed-handle-color: var(--palette-primary-50);
+    --mat-slide-toggle-unselected-icon-color: var(--textLight);
+    --mat-slide-toggle-selected-handle-color: #fff;
+    --mat-slide-toggle-selected-hover-handle-color: var(--palette-primary-50);
+    --mat-slide-toggle-selected-focus-handle-color: var(--palette-primary-50);
+    --mat-slide-toggle-selected-pressed-handle-color: var(--palette-primary-50);
+    --mat-slide-toggle-selected-icon-color: var(--primary);
     .mdc-form-field label {
         color: #fff;
     }
@@ -325,20 +334,22 @@ mat-label,
 }
 body {
     // Background for raised button
-    --mdc-protected-button-container-color: white;
+    --mat-button-protected-container-color: white;
 }
 // improve default positioning of outlined fields with label
-.mat-mdc-text-field-wrapper.mdc-text-field--outlined {
-    .mat-mdc-form-field-infix {
-        padding-top: 20px;
-        min-height: unset;
+.mat-mdc-form-field:not(.mat-mdc-paginator-page-size-select) {
+    .mat-mdc-text-field-wrapper.mdc-text-field--outlined {
+        .mat-mdc-form-field-infix {
+            padding-top: 20px;
+            min-height: unset;
+        }
     }
 }
 .mat-mdc-checkbox {
-    --mdc-checkbox-selected-checkmark-color: var(--primary);
-    --mdc-checkbox-selected-hover-icon-color: var(--primary);
-    --mdc-checkbox-selected-focus-icon-color: var(--primary);
-    --mdc-checkbox-disabled-selected-checkmark-color: var(--palette-primary-100);
+    --mat-checkbox-selected-checkmark-color: var(--primary);
+    --mat-checkbox-selected-hover-icon-color: var(--primary);
+    --mat-checkbox-selected-focus-icon-color: var(--primary);
+    --mat-checkbox-disabled-selected-checkmark-color: var(--palette-primary-100);
     .mdc-checkbox__background {
         background-color: #fff;
         .mdc-checkbox__checkmark {

package/assets/scss/mixins.scss

@@ -27,6 +27,9 @@
 @mixin materialShadowSmall($important: false) {
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) if($important, !important, null);
 }
+@mixin materialShadowMedium($important: false, $opacity: 0.15) {
+    box-shadow: 0 0 12px rgba(0, 0, 0, $opacity) if($important, !important, null);
+}
 @mixin materialShadowMediumLarge($important: false, $opacity: 0.6) {
     box-shadow: 0 0 25px rgba(0, 0, 0, $opacity) if($important, !important, null);
 }
@@ -37,14 +40,14 @@
         background-color: transparent;
     }
     &::-webkit-scrollbar {
-        height: 10px;
+        height: 6px;
         background-color: transparent;
     }
     &::-webkit-scrollbar-thumb {
         max-width: 20px;
-        border-radius: 10px;
+        border-radius: 6px;
         // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
-        background-color: var(--primary);
+        background-color: var(--palette-primary-200);
     }
 }
 @mixin materialScrollbarLight() {
@@ -209,8 +212,11 @@
 @mixin darkenLight() {
     background-color: $darkenLightColor;
 }
-@mixin blurBackground($radius: 5px) {
+@mixin blurBackground($radius: 5px, $darken: 0) {
     backdrop-filter: blur($radius);
+    @if $darken != 0 {
+        background: rgba(0, 0, 0, $darken);
+    }
 }
 @mixin setGlobalFocus($color: $focusColor) {
     //respect element border radius

package/assets/scss/variables-scss.scss

@@ -1,4 +1,6 @@
 @use 'sass:map';
+@use 'branding' as *;
+
 @forward 'variables-root';
 @forward 'branding';
 
@@ -17,7 +19,9 @@ $primaryMediumDark: var(--palette-primary-700) !default;
 $tabColor: var(--primary) !default;
 $tabColorDark: var(--primary) !default;
 $tabColorLight: var(--palette-primary-200) !default;
+// @Deprecated: Use the css var(--colorStatusNegative)
 $warning: #cd2457 !default;
+// @Deprecated: Use the css var(--colorStatusWarning)
 $warningMedium: #e98c1b !default;
 $toastLeftError: #c15d5d !default;
 $toastPrimary: #333333 !default;
@@ -31,15 +35,14 @@ $fontSizeXLarge: 120% !default;
 $fontSizeLarge: 110% !default;
 $fontSizeSmall: 90% !default;
 $fontSizeXSmall: var(--fontSizeXSmall) !default;
-$backgroundColor: #fff !default;
+// page background
+$backgroundColor: #f3f3f3 !default;
 $workspaceSidebarWidth: 300px !default;
 $workspaceInheritColor: #42ca8d !default;
-$workspaceTopBarBackground: #383838 !default;
-$workspaceTopBarFontColor: #fff !default;
 $editorialCollectionsBackground: #f5ec19 !default;
 $itemSelectedBackground: $primaryVeryLight !default;
 $itemSelectedTextColor: $primaryMediumDark !default;
-$buttonHoverBackground: rgba(var(--palette-primary-500-no-rgb), 0.08) !default;
+$buttonHoverBackground: var(--buttonHoverBackground) !default;
 $workspaceNewBackground: $itemSelectedBackground !default;
 // the white bar height in search and es-workspace
 $secondaryBarHeight: 65px !default;
@@ -53,7 +56,6 @@ $workspaceSelectedBackgroundEffect: linear-gradient(
     )
     no-repeat !default;
 $workspaceTreeBackground: #f7f7f7 !default;
-$workspaceTopBarSafeBackground: #963a3a;
 $dialogRightWidth: 320px !default;
 $workspaceTreeSelectedBackground: #fff !default;
 $workspaceTreeWidth: 300px !default;
@@ -77,11 +79,12 @@ $chipsSeperatorLineColor: #e2e2e2 !default;
 $inputBorderColor: #9e9e9e !default;
 $commentsActionsSeperatorLineColor: $backgroundColor !default;
 $noResultsColor: rgba(black, 0.54) !default;
-// prefer using var(--$colorStatusPositive)
+// prefer using var(--colorStatusPositive)
 $colorStatusPositive: #40bf8e !default;
 // prefer using var(--colorStatusNegative)
 $colorStatusNegative: #cd2457 !default;
-$colorStatusWarning: $warningMedium !default;
+// prefer using var(--colorStatusWarning)
+$colorStatusWarning: var(--colorStatusWarning) !default;
 $colorStatusRecommended: #acd331 !default;
 $colorStatusNeutral: #777 !default;
 $colorStarActive: var(--colorStarActive) !default;
@@ -107,7 +110,7 @@ $workspaceTopBarInputBackground: #eee !default;
 $workspaceTopBarInputText: $textMain !default;
 $mobileTabsZIndex: 110 !default;
 $mobileTabNavHeight: 62px !default;
-$primaryFontFamily: 'open_sansregular' !default;
+$primaryFontFamily: 'open_sansregular', Arial, Sans-Serif !default;
 $primaryFontSize: 10pt !default;
 
 $default-chip-colors: (

package/assets/scss/variables.scss

@@ -10,6 +10,7 @@
     --aiColorChipBg: color-mix(in srgb, var(--aiColor), #fff 75%);
     --aiColorText: #fff;
     --aiColorChip: #fff;
+    --defaultBackground: #fff;
     --aiColorChipRemove: #555;
     --aiColorChipBorder: #ddd;
     --aiColorChipText: var(--aiColor);
@@ -17,22 +18,45 @@
     --textLight: #585858;
     --textMediumLight: #888;
     --textMain: #383838;
-    --cardWidth: 240px;
+    --buttonDisabled: #999;
+    --workspaceTopBarBackground: #383838;
+    --workspaceTopBarFontColor: #fff;
+    --landingPageTopBarBackground: var(--workspaceTopBarBackground);
+    --landingPageTopBarFontColor: var(--workspaceTopBarFontColor);
+    --landingPageTopBarIconFilter: invert(0);
+    --landingPageShortcutBackground: #fff;
+    --landingPageShortcutNewColor: var(--landingPageShortcutTileBackground);
+    --landingPageShortcutTileBackground: var(--palette-primary-700);
+    --landingPageShortcutTileFontColor: var(--palette-primary-contrast-500);
+    --landingPageShortcutTileIconFilter: brightness(0) invert(1);
+    --footerBackground: #f3f3f3;
+    --footerFontColor: var(--textLight);
+    --cardWidth: 270px;
+    --borderRadiusCards: 20px;
+    --borderRadiusBadges: 10px;
     --chipsSeperatorLineColor: #e2e2e2;
     --colorStatusPositive: #40bf8e;
     --colorStatusNegative: var(--warning);
+    --colorStatusWarning: #e98c1b;
     --colorStarActive: #ba7c00;
     --nodeVirtualColor: #42ca8d;
     --nodeVirtualColorLight: #b8fcdd;
+    // main background of the large, rounded containers
+    --roundedContainerBackground: #fff;
+    // margin of the rounded, large containers (like the workspace or editorial page)
+    --roundedContainerMargin: 15px;
     --transitionNormal: 0.2s;
     --genericSeperatorLineColor: #ececec;
     --tableSeperatorLineColor: #d2d2d2;
     --focusColor: var(--palette-primary-300);
     --focusWidth: 2px;
     --fontSizeXSmall: 85%;
+    --buttonHoverBackground: rgba(var(--palette-primary-500-no-rgb), 0.08);
     --topBarSearchFocusColor: var(--palette-primary-300);
+    --workspaceTopBarBackground: #383838;
+    --workspaceTopBarFontColor: #fff;
     --workspaceTopBarSafeBackground: #963a3a;
-    --workspaceTopBarNewAlpha: 0.1;
+    --workspaceTopBarNewAlpha: 0.08;
     --itemSelectedTextColor: var(--palette-primary-700);
     --listItemSelectedBackground: var(--palette-primary-50);
     --listItemSelectedBackgroundEffect: linear-gradient(
@@ -44,3 +68,6 @@
         )
         no-repeat;
 }
+es-node-entries-wrapper {
+    --es-node-entries-scroll-gradient-color: #fff;
+}