ngx-edu-sharing-ui 10.0.26 → 10.0.28

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: 'Montserrat',
+     primaryFontSize: 9pt,
+     customIcons: true
+);
+
+
+$warning: #EA4B71;
+$warningMedium: #e98c1b;
+$colorStatusPositive: #189d62;
+
+$oehYellow: #e4f700;
+$oehGreen: #b4da1c;
+$tabColorLight: $oehYellow;
+$cardWidth: 280px;
+
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+$custom-typography: mat.m2-define-typography-config(
+    $font-family: map.get($tokens, primaryFontFamily),
+        //$display-1: mat.define-typography-level(32px, 40px, 500, 'Montserrat'),
+    $headline-1: mat.m2-define-typography-level(24px, 32px, 700, 'Montserrat'),
+    $headline-2: mat.m2-define-typography-level(20px, 30px, 700, 'Montserrat'),
+    $subtitle-1: mat.m2-define-typography-level(18px, 27px, 700, 'Montserrat'),
+    $subtitle-2: mat.m2-define-typography-level(16px, 24px, 700, 'Montserrat'),
+    $body-2: mat.m2-define-typography-level(16px, 24px, 400, 'Montserrat'),
+    $body-1: mat.m2-define-typography-level(16px, 21px, 400),
+    $caption: mat.m2-define-typography-level(11px, 15px, 500, 'Montserrat'),
+    $button: mat.m2-define-typography-level(14px, 20px, 700, 'Montserrat'),
+    //$input: mat.define-typography-level(inherit, 1.125, 400),
+);

package/assets/scss/material-theme.scss

@@ -50,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 {

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;
     --aiColorChipRemove: #555;