ngx-edu-sharing-ui 10.0.25 → 10.0.27

package/assets/scss/branding.scss

@@ -1,6 +1,7 @@
 /**
     branding is deprecated. Use the "themeColors" in the client.config
  */
-$workspaceTopBarBackground: #383838;
-$workspaceTopBarFontColor: #fff;
-$customIcons: false;
+$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
@@ -44,8 +50,37 @@ $dark-disabled-text: rgba(black, 0.54); // increased contrast
 $dark-secondary-text: rgba(black, 0.54);
 
 :root {
+    --mat-sys-corner-full: 9999px;
     --mdc-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);
+}
+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);
+}
+.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);
+}
 
 .mdc-button {
     span {
@@ -148,7 +183,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 {

package/assets/scss/mixins.scss

@@ -54,10 +54,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.scss

@@ -34,6 +34,8 @@ $fontSizeXSmall: var(--fontSizeXSmall) !default;
 $backgroundColor: #fff !default;
 $workspaceSidebarWidth: 300px !default;
 $workspaceInheritColor: #42ca8d !default;
+$workspaceTopBarBackground: #383838 !default;
+$workspaceTopBarFontColor: #fff !default;
 $editorialCollectionsBackground: #f5ec19 !default;
 $itemSelectedBackground: $primaryVeryLight !default;
 $itemSelectedTextColor: $primaryMediumDark !default;
@@ -71,7 +73,6 @@ $actionDialogBackground: #eee !default;
 $cardLightBackground: #f9f9f9 !default;
 $searchInputBorderColor: #ccc !default;
 $cardSeparatorLineColor: #ccc !default;
-$genericSeperatorLineColor: #ececec !default;
 $chipsSeperatorLineColor: #e2e2e2 !default;
 $inputBorderColor: #9e9e9e !default;
 $commentsActionsSeperatorLineColor: $backgroundColor !default;

package/assets/scss/variables.scss

@@ -6,7 +6,8 @@
 :root {
     --primary: var(--palette-primary-500);
     --warning: #cd2457;
-    --aiColor: #6d176e;
+    --aiColor: #2c0799;
+    --aiColorChipBg: color-mix(in srgb, var(--aiColor), #fff 75%);
     --aiColorText: #fff;
     --aiColorChip: #fff;
     --aiColorChipRemove: #555;
@@ -24,8 +25,14 @@
     --nodeVirtualColor: #42ca8d;
     --nodeVirtualColorLight: #b8fcdd;
     --transitionNormal: 0.2s;
+    --genericSeperatorLineColor: #ececec;
+    --tableSeperatorLineColor: #d2d2d2;
+    --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(