ngx-edu-sharing-ui 11.0.0 → 11.0.2

package/assets/scss/branding.scss

@@ -1,7 +1,32 @@
-/**
-    branding is deprecated. Use the "themeColors" in the client.config
- */
-$tokens: (/*
-     primaryFontFamily,
-     primaryFontSize,
-     */ customIcons: false);
+$tokens: (
+    primaryFontFamily: '"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+    primaryFontSize: 15px,
+    customIcons: false
+);
+
+
+$cardRadius: 20px;
+$cardWidth: 250px;
+$breadcrumbHeight: 60px;
+
+$default-chip-color: rgb(188, 188, 188);
+$custom-chip-colors: (
+    'ccm_taxonid': var(--primary),
+    'ccm_educationallearningresourcetype_agg': $default-chip-color,
+    'ccm_educationalcontext': $default-chip-color,
+);
+
+$mebisBreakpoint_2xl: 1536px;
+$mebisBreakpoint_xl: 1280px;
+$mebisBreakpoint_l: 1025px;
+$mebisBreakpoint_m: 769px;
+$mebisBreakpoint_s: 640px;
+
+$custom-chip-colors: (
+    'customProperties_special': rgb(166, 214, 208),
+    'ccm_educationallearningresourcetype_agg': rgb(214, 166, 166),
+    'ccm_taxonid': rgb(231, 213, 191),
+    'customProperties_license': rgb(166, 192, 214),
+    'customProperties_context': rgb(214, 193, 166),
+    'customProperties_source': rgb(211, 214, 166),
+);

package/assets/scss/material-theme.scss

@@ -50,9 +50,48 @@ $dark-disabled-text: rgba(black, 0.54); // increased contrast
 $dark-secondary-text: rgba(black, 0.54);
 
 :root {
-    --mdc-fab-container-color: #{$backgroundColor};
+    --mat-sys-corner-full: 9999px;
+    --mat-fab-container-color: #{$backgroundColor};
+}
+:root {
+    --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-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 {
+    --mat-chip-elevated-container-color: var(--palette-primary-100);
+}
+.mdc-switch--selected {
+    --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;
@@ -75,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);
@@ -106,7 +145,10 @@ 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 {
@@ -197,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,
@@ -218,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;
     }
@@ -292,7 +334,7 @@ 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-form-field:not(.mat-mdc-paginator-page-size-select) {
@@ -304,19 +346,17 @@ body {
     }
 }
 .mat-mdc-checkbox {
+    --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 {
-        border-color: var(--primary) !important;
-
-        background-color: #fff !important;
-
+        background-color: #fff;
         .mdc-checkbox__checkmark {
             color: #fff !important;
         }
     }
     &.mdc-checkbox--disabled {
-        .mdc-checkbox__background {
-            border-color: var(--palette-primary-100) !important;
-        }
         &.mat-mdc-checkbox-checked,
         &.mat-mdc-checkbox-indeterminate {
             .mdc-checkbox__background {
@@ -327,7 +367,6 @@ body {
     &.mat-mdc-checkbox-checked,
     &.mat-mdc-checkbox-indeterminate {
         .mdc-checkbox__background {
-            background-color: var(--primary) !important;
             .mdc-checkbox__checkmark,
             .mdc-checkbox__mixedmark {
                 color: #fff !important;
@@ -416,7 +455,7 @@ button {
 .mat-calendar-table-header-divider {
     display: none;
 }
-.mat-option {
+mat-option {
     font-size: 100%;
     .mat-option-primary {
         line-height: initial;
@@ -544,7 +583,6 @@ mat-select.mat-select-icon {
     }
 }
 .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) {
-    background-color: var(--palette-primary-100) !important;
     .mat-mdc-chip-remove {
         color: var(--primary) !important;
         opacity: 1 !important;

package/assets/scss/mixins.scss

@@ -50,6 +50,26 @@
         background-color: var(--palette-primary-200);
     }
 }
+@mixin materialScrollbarLight() {
+    &::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
+        border-radius: 10px;
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar {
+        height: 4px;
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        max-width: 4px;
+        border-radius: 10px;
+        // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+        background-color: var(--palette-primary-100);
+    }
+    // Firefox
+    scrollbar-width: thin;
+    scrollbar-color: var(--palette-primary-100) transparent;
+}
 @mixin removeDefaultFocus() {
     outline: none;
 }
@@ -192,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,13 +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;
 $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;
@@ -51,7 +56,6 @@ $workspaceSelectedBackgroundEffect: linear-gradient(
     )
     no-repeat !default;
 $workspaceTreeBackground: #f7f7f7 !default;
-$workspaceTopBarSafeBackground: #963a3a;
 $dialogRightWidth: 320px !default;
 $workspaceTreeSelectedBackground: #fff !default;
 $workspaceTreeWidth: 300px !default;
@@ -71,16 +75,16 @@ $actionDialogBackground: #eee !default;
 $cardLightBackground: #f9f9f9 !default;
 $searchInputBorderColor: #ccc !default;
 $cardSeparatorLineColor: #ccc !default;
-$genericSeperatorLineColor: #ececec !default;
 $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;
@@ -106,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

@@ -6,7 +6,8 @@
 :root {
     --primary: var(--palette-primary-500);
     --warning: #cd2457;
-    --aiColor: #2f0b9b;
+    --aiColor: #2c0799;
+    --aiColorChipBg: color-mix(in srgb, var(--aiColor), #fff 75%);
     --aiColorText: #fff;
     --aiColorChip: #fff;
     --defaultBackground: #fff;
@@ -17,23 +18,45 @@
     --textLight: #585858;
     --textMediumLight: #888;
     --textMain: #383838;
+    --buttonDisabled: #999;
     --workspaceTopBarBackground: #383838;
     --workspaceTopBarFontColor: #fff;
-    --cardWidth: 240px;
+    --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(
@@ -45,3 +68,6 @@
         )
         no-repeat;
 }
+es-node-entries-wrapper {
+    --es-node-entries-scroll-gradient-color: #fff;
+}