ngx-edu-sharing-ui 10.0.24 → 11.0.0

package/assets/scss/branding.scss

@@ -1,5 +1,7 @@
 /**
     branding is deprecated. Use the "themeColors" in the client.config
  */
-$workspaceTopBarBackground: #383838;
-$workspaceTopBarFontColor: #fff;
+$tokens: (/*
+     primaryFontFamily,
+     primaryFontSize,
+     */ customIcons: false);

package/assets/scss/material-theme.scss

@@ -3,7 +3,8 @@
 
 @use 'variables' as *;
 @use 'variables-scss' as *;
-@use 'branding' as *;
+@use 'branding' as branding;
+@use 'sass:map';
 
 // optional
 $mat-css-dark-theme-selector: '.isDarkTheme';
@@ -16,7 +17,12 @@ $mat-css-light-theme-selector: '.isLightTheme';
 // hue. Available color palettes: https://material.io/design/color/
 
 $custom-typography: mat.m2-define-typography-config(
-    $font-family: $primaryFontFamily,
+    $font-family:
+        if(
+            map.get(branding.$tokens, primaryFontFamily) != null,
+            map.get(branding.$tokens, primaryFontFamily),
+            $primaryFontFamily
+        ),
     $body-1: mat.m2-define-typography-level(100%, normal, 400),
     $body-2: mat.m2-define-typography-level(100%, normal, 400),
     // mat-optgroups labels, input placeholder
@@ -105,15 +111,15 @@ mat-tab-group {
 }
 .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);
             }
@@ -148,7 +154,7 @@ mat-tab-group {
     // `color="warn"`
     &.mat-warn {
         // Red background, same as negative
-        background-color: $warning;
+        background-color: var(--palette-warn-500);
         color: white;
     }
     &.status-negative {
@@ -289,10 +295,12 @@ body {
     --mdc-protected-button-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 {

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 removeDefaultFocus() {
@@ -54,10 +57,10 @@
     //respect element border radius
     @include removeDefaultFocus();
     @if $mode== 'outline' {
-        outline: var(--focusWidth) solid var(--palette-primary-300);
+        outline: var(--focusWidth) solid var(--focusColor);
         outline-offset: 2px;
     } @else if $mode== 'border' {
-        border: var(--focusWidth) solid var(--palette-primary-300);
+        border: var(--focusWidth) solid var(--focusColor);
     }
 }
 // Apply the content styles in contrast mode. This is just enough contrast to be WCAG complient ---

package/assets/scss/variables.scss

@@ -6,9 +6,10 @@
 :root {
     --primary: var(--palette-primary-500);
     --warning: #cd2457;
-    --aiColor: #6d176e;
+    --aiColor: #2f0b9b;
     --aiColorText: #fff;
     --aiColorChip: #fff;
+    --defaultBackground: #fff;
     --aiColorChipRemove: #555;
     --aiColorChipBorder: #ddd;
     --aiColorChipText: var(--aiColor);
@@ -16,7 +17,10 @@
     --textLight: #585858;
     --textMediumLight: #888;
     --textMain: #383838;
+    --workspaceTopBarBackground: #383838;
+    --workspaceTopBarFontColor: #fff;
     --cardWidth: 240px;
+    --borderRadiusCards: 20px;
     --chipsSeperatorLineColor: #e2e2e2;
     --colorStatusPositive: #40bf8e;
     --colorStatusNegative: var(--warning);
@@ -24,8 +28,12 @@
     --nodeVirtualColor: #42ca8d;
     --nodeVirtualColorLight: #b8fcdd;
     --transitionNormal: 0.2s;
+    --focusColor: var(--palette-primary-300);
     --focusWidth: 2px;
     --fontSizeXSmall: 85%;
+    --topBarSearchFocusColor: var(--palette-primary-300);
+    --workspaceTopBarSafeBackground: #963a3a;
+    --workspaceTopBarNewAlpha: 0.1;
     --itemSelectedTextColor: var(--palette-primary-700);
     --listItemSelectedBackground: var(--palette-primary-50);
     --listItemSelectedBackgroundEffect: linear-gradient(