@elderbyte/ngx-starter 18.12.7 → 18.13.0-beta.0

package/theming/_elder-mdc-support.scss

@@ -1,172 +1,43 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '../theming/mat-icon-button-size' as icon-button-size;
-@use '../theming/elder-typography-utils' as elder-typography;
+@use './elder-typography-utils' as elder-typography;
 
 @mixin mdc-theme-support($config-or-theme) {
-  $color: mat.m2-get-color-config($config-or-theme);
-  $typography: elder-typography.get-typography-config($config-or-theme);
-
-  @if $color != null {
-    @include _color-support($color);
-  }
-
-  @if $typography != null {
-    @include _typography-support($typography);
-  }
-
-  /**
-   * This class should be applied to "controls"
-   * which themself contain a mat-form-field.
-   */
-  .elder-form-field-host {
-    display: inline-flex;
-    flex-direction: column;
-    min-width: 0;
-  }
-}
-
-@mixin _typography-support($typography-config) {
-  $config: $typography-config;
-
-  // The unit-less line-height from the font config.
-  $line-height: mat.m2-line-height($config, body-1);
-  $font-size: mat.m2-font-size($config, body-1);
-  $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
-
-  // $control-button-size: 24px; // $line-height-em
-  $control-button-size: var(--mdc-typography-body1-line-height, 24px);
-  $control-icon-size: 20px;
-
-  .elder-mdc-input-fix {
-    max-height: $control-button-size;
-  }
-
-  .mat-mdc-icon-button.elder-control-icon-button {
-    @include icon-button-size.matIconButtonSize($control-button-size, $control-icon-size); // 0.6
-  }
-
-  .mat-datepicker-toggle.elder-control-icon-button {
-    max-height: $control-button-size;
-    max-width: $control-button-size;
-
-    .mat-mdc-icon-button {
-      @include icon-button-size.matIconButtonSize($control-button-size, $control-icon-size); // 0.6
-    }
-  }
-}
-
-@mixin _color-support($color-config) {
-  @include _mdc-control-icon($color-config);
-  @include _mdc-mat-toolbar($color-config);
-  @include _mdc-mat-snack-bar($color-config);
+  @include _mdc-mat-toolbar();
+  @include _mdc-control-icon();
 }
 
-/**
- * The snackbar has a light background in dark, and a dark background in light theme.
- * Therefore, text/contrast colors need to be inverted inside the snackbar.
- */
-@mixin _mdc-mat-snack-bar($color-config) {
-  $is-dark-theme: map.get($color-config, is-dark);
-  $snackbar-text-color: if(
-    $is-dark-theme,
-    var(--mdc-theme-text-primary-on-light),
-    var(--mdc-theme-text-primary-on-dark)
-  );
-
-  .mat-mdc-snack-bar-container {
-    color: $snackbar-text-color; // Fix the default text color in snackbar
-  }
-}
-
-@mixin _mdc-mat-toolbar($color-config) {
-  $foreground: map.get($color-config, foreground);
-  $background: map.get($color-config, background);
-  $primary: map.get($color-config, primary);
-  $accent: map.get($color-config, accent);
-  $warn: map.get($color-config, warn);
-
+@mixin _mdc-mat-toolbar() {
   .mat-toolbar {
     &.mat-primary {
-      @include _form-field-palette($primary);
+      @include _form-field-palette(primary);
     }
 
     &.mat-accent {
-      @include _form-field-palette($accent);
+      @include _form-field-palette(accent);
     }
 
     &.mat-warn {
-      @include _form-field-palette($warn);
+      @include _form-field-palette(warn);
     }
   }
 }
 
-@mixin _mdc-control-icon($color-config) {
-  $foreground: map.get($color-config, foreground);
-  $background: map.get($color-config, background);
-  $primary: map.get($color-config, primary);
-  $accent: map.get($color-config, accent);
-  $warn: map.get($color-config, warn);
-
-  .elder-mdc-control-icon {
-    color: mat.m2-get-color-from-palette($foreground, secondary-text);
-  }
-
-  .mat-mdc-form-field {
-    &.mat-focused {
-      &.mat-primary {
-        .elder-mdc-control-icon,
-        .elder-control-icon-button {
-          color: mat.m2-get-color-from-palette($primary, text);
-        }
-      }
-
-      &.mat-accent {
-        .elder-mdc-control-icon,
-        .elder-control-icon-button {
-          color: mat.m2-get-color-from-palette($accent, text);
-        }
-      }
-
-      &.mat-warn {
-        .elder-mdc-control-icon,
-        .elder-control-icon-button {
-          color: mat.m2-get-color-from-palette($warn, text);
-        }
-      }
-    }
-
-    &.mat-form-field-invalid {
-      .elder-mdc-control-icon,
-      .elder-control-icon-button {
-        color: mat.m2-get-color-from-palette($warn, text);
-      }
-    }
-
-    &.mat-form-field-disabled {
-      .elder-mdc-control-icon,
-      .elder-control-icon-button {
-        color: mat.m2-get-color-from-palette($foreground, disabled-text);
-      }
-    }
-  }
-}
-
-@mixin _form-field-palette($palette) {
-  $contrast-color: mat.m2-get-color-from-palette($palette, default-contrast);
-  $contrast-color-inactive: rgba($contrast-color, 0.5);
+@mixin _form-field-palette($baseColor) {
+  $contrast-color: var(--md-sys-color-on-primary);
+  $contrast-color-inactive: var(--md-sys-color-outline-variant);
+  $bg-color-extra: transparent;
 
   .mat-mdc-slide-toggle .mdc-form-field {
-    background: mat.m2-get-color-from-palette($palette);
     color: $contrast-color;
   }
 
   .mat-mdc-form-field.mat-form-field-appearance-outline {
-    background: mat.m2-get-color-from-palette($palette);
+    background: $bg-color-extra;
     color: $contrast-color;
 
     .mdc-text-field__input {
-      background: mat.m2-get-color-from-palette($palette);
+      background: $bg-color-extra;
       color: $contrast-color;
       caret-color: currentColor;
     }
@@ -233,3 +104,49 @@
     }
   }
 }
+
+@mixin _mdc-control-icon() {
+  .elder-mdc-control-icon {
+    color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+  }
+
+  .mat-mdc-form-field {
+    &.mat-focused {
+      &.mat-primary {
+        .elder-mdc-control-icon,
+        .elder-control-icon-button {
+          color: var(--md-sys-color-primary);
+        }
+      }
+
+      &.mat-accent {
+        .elder-mdc-control-icon,
+        .elder-control-icon-button {
+          color: var(--md-sys-color-tertiary);
+        }
+      }
+
+      &.mat-warn {
+        .elder-mdc-control-icon,
+        .elder-control-icon-button {
+          color: var(--md-sys-color-error);
+        }
+      }
+    }
+
+    &.mat-form-field-invalid {
+      .elder-mdc-control-icon,
+      .elder-control-icon-button {
+        color: var(--md-sys-color-error);
+      }
+    }
+
+    &.mat-form-field-disabled {
+      .elder-mdc-control-icon,
+      .elder-control-icon-button {
+        color: var(--md-sys-color-on-surface, var(--md-sys-color-outline));
+        opacity: 0.38;
+      }
+    }
+  }
+}

package/theming/_elder-scrollbar-theme.scss

@@ -9,11 +9,6 @@
   $scrollbarStyling: map.get($theme, elder, scrollbar-styling);
 
   @if $scrollbarStyling {
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
     $commonSizes: map.get($theme, elder, common-sizes);
 
     @include scrollbar-width(map.get($commonSizes, sm)); // default
@@ -42,20 +37,15 @@
       @include scrollbar-width(map.get($commonSizes, xxl));
     }
 
-    /* Track */
-    ::-webkit-scrollbar-track {
-      // background: mat.get-color-from-palette($background, background);
-    }
-
     /* Handle */
     ::-webkit-scrollbar-thumb {
-      background: mat.m2-get-color-from-palette($primary);
+      background: var(--md-sys-color-primary);
       border-radius: 5px;
     }
 
     /* Handle on hover */
     ::-webkit-scrollbar-thumb:hover {
-      background: mat.m2-get-color-from-palette($primary, 300);
+      background: var(--md-sys-color-primary-fixed);
     }
   }
 }

package/theming/_elder-style-fixes.scss

@@ -1,10 +1,16 @@
 @use '@angular/material' as mat;
-@use 'mixins' as mixins;
+@use './mixins' as mixins;
 @use 'sass:map';
 
 @mixin elder-style-fixes($theme) {
   @include _ng-style-fixes;
   @include _mat-style-fixes($theme);
+  @include _mat3-fixes($theme);
+
+  // elder custom icons fill color
+  .mat-icon.svg-icon-inherit-color svg * {
+    fill: currentColor !important;
+  }
 }
 
 @mixin _ng-style-fixes {
@@ -85,88 +91,6 @@
     z-index: 1;
   }
 
-  .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper {
-    padding-left: 0 !important;
-  }
-
-  .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
-    padding-right: 0 !important;
-  }
-
-  .mat-mdc-form-field:not(.mat-mdc-form-field.elder-dense) {
-    $density: map-get($theme, elder, density, form-field);
-
-    /******************************
-    Fix big paddings for dense form fields
-    *******************************/
-
-    .mat-mdc-text-field-wrapper {
-      padding-left: calc-side-paddings($density);
-      padding-right: calc-side-paddings($density);
-    }
-
-    /******************************
-    Fix icon size and placement in mat label
-    *******************************/
-
-    @include mixins.form-field-icons($density);
-
-    /******************************
-    Fix text and hover placement of small filled form fields
-    *******************************/
-
-    $mat-mdc-form-field-label-transform: 0.75;
-    $mat-mdc-form-field-label-offset-x: -16px;
-    $form-field-density: map-get($theme, elder, density, form-field);
-
-    @if $form-field-density < -1 {
-      .mdc-text-field--filled {
-        .mdc-floating-label--float-above {
-          transform: var(
-            $mat-mdc-form-field-label-transform,
-            translateY(-50%)
-              translateX(calc(1 * (44px + var($mat-mdc-form-field-label-offset-x, 0px))))
-          ) !important;
-        }
-
-        .mat-mdc-form-field-infix {
-          padding-top: calc-padding-top-form-field-inflix($form-field-density) !important;
-          padding-bottom: 2px !important;
-          min-height: 40px; // (24 + 2*16) = 56px by default
-        }
-      }
-    }
-
-    /******************************
-    Material Form Field Label stealing clicks
-    *******************************/
-
-    .mat-mdc-floating-label.mdc-floating-label {
-      pointer-events: none !important;
-
-      mat-label {
-        pointer-events: none !important;
-      }
-    }
-
-    .mdc-notched-outline__notch {
-      pointer-events: none !important;
-
-      .mdc-floating-label {
-        pointer-events: none !important;
-
-        mat-label {
-          pointer-events: none !important;
-        }
-      }
-    }
-
-    .mat-mdc-form-field-error-wrapper {
-      display: flex;
-      padding-right: 0;
-    }
-  }
-
   /******************************
   Material chip make regular chips clickable when applying this class
   *******************************/
@@ -176,36 +100,49 @@
       cursor: pointer;
     }
   }
-}
 
-.mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label {
-  display: block !important;
-}
+  /******************************
+    Styling toast messages
+    *******************************/
+  .elder-primary-text {
+    color: var(--md-sys-color-primary);
+  }
 
-@function calc-side-paddings($density) {
-  $paddingDensityNeg4: 8px;
-  $paddingDensityNeg3: 10px;
-  $paddingDensityNeg2: 12px;
-  $paddingDensityNeg1: 14px;
-  $paddingDensity0: 16px;
-
-  @if $density == -4 {
-    @return $paddingDensityNeg4;
-  } @else if $density == -3 {
-    @return $paddingDensityNeg3;
-  } @else if $density == -2 {
-    @return $paddingDensityNeg2;
-  } @else if $density == -1 {
-    @return $paddingDensityNeg1;
-  } @else if $density == 0 {
-    @return $paddingDensity0;
+  .elder-accent-text {
+    color: var(--md-sys-color-tertiary);
+  }
+
+  .elder-warn-text {
+    color: var(--md-sys-color-error);
   }
 }
 
-@function calc-padding-top-form-field-inflix($density) {
-  @if $density > -3 {
-    @return 20px;
-  } @else {
-    @return 14px;
+@mixin _mat3-fixes($theme) {
+  --mat-sidenav-container-width: auto; // is set to around 300px by default in MAT 3 (MAT 2 was auto by default)
+  --mat-badge-small-size-text-size: 9px; // this is the mat2 setting, mat3 somehow sets this to 0, which hides the font, unclear why.
+  --mdc-dialog-container-shape: 16px; // make border-radius of dialog container smaller (default is 28px)
+  --mat-dialog-container-max-width: 80vw; // 80vw is mat 2 default, mat 3 default is very narrow: 560px;
+  --mat-toolbar-title-text-tracking: 0; // mat toolbar typography
+  --mat-toolbar-title-text-weight: 500; // mat toolbar typography
+
+  .mat-toolbar {
+    &.mat-primary {
+      --mat-toolbar-container-text-color: var(--md-sys-color-on-primary);
+      --mat-toolbar-container-background-color: var(--md-sys-color-primary);
+      .mat-mdc-icon-button {
+        color: var(--md-sys-color-on-primary);
+      }
+    }
+    &.mat-accent {
+      --mat-toolbar-container-text-color: var(--md-sys-color-on-tertiary);
+      --mat-toolbar-container-background-color: var(--md-sys-color-tertiary);
+      .mat-mdc-icon-button {
+        color: var(--md-sys-color-on-tertiary);
+      }
+    }
+  }
+
+  .mat-toolbar .mat-mdc-icon-button {
+    color: inherit;
   }
 }

package/theming/_elder-typography-utils.scss

@@ -10,14 +10,3 @@
 @function coerce-unitless-to-em($value) {
   @return if(math.is-unitless($value), 1em * $value, $value);
 }
-
-@function get-typography-config($config) {
-  $typography: mat.m2-get-typography-config($config);
-
-  // If no actual typography configuration has been specified, create a default one.
-  @if not $typography {
-    $typography: mat.m2-define-typography-config();
-  }
-
-  @return $typography;
-}

package/theming/_mixins.scss

@@ -50,3 +50,38 @@
     @return 40px;
   }
 }
+
+/**
+ * Based on https://github.com/btxtiger/mat-icon-button-sizes
+ * The default factor between button and icon size is *= 0.6
+ */
+@mixin matIconButtonSize($buttonSize, $iconSize) {
+  width: $buttonSize !important;
+  height: $buttonSize !important;
+  padding: 0 !important;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+
+  .mat-icon,
+  img {
+    width: $iconSize;
+    height: $iconSize;
+    font-size: $iconSize;
+
+    svg {
+      width: $iconSize;
+      height: $iconSize;
+    }
+  }
+
+  svg {
+    width: $iconSize;
+    height: $iconSize;
+  }
+
+  .mat-mdc-button-touch-target {
+    width: $buttonSize !important;
+    height: $buttonSize !important;
+  }
+}

package/theming/_elder-palettes.scss

@@ -1,148 +0,0 @@
-@use '@angular/material' as mat;
-@use 'sass:map';
-
-/***************************************************************************
- *                                                                         *
- * Overriding Material Base Variables                                      *
- *                                                                         *
- **************************************************************************/
-
-$dark-primary-text: rgba(black, 0.87);
-$light-primary-text: white;
-
-/***************************************************************************
- *                                                                         *
- * Material Color Palettes                                                 *
- *                                                                         *
- **************************************************************************/
-
-// ElderByte Theme
-
-$elder-blue: (
-  50: #dfe3e8,
-  100: #b3bcc8,
-  200: #8593a7,
-  300: #546883,
-  400: #2f4869,
-  500: #0b284f,
-  // Official Main Color tone: #002852 (#0B284F)
-  600: #0a2448,
-  700: #092040,
-  800: #081c38,
-  900: #061529,
-  A100: #809ec5,
-  A200: #5179bf,
-  A400: #004390,
-  A700: #00006b,
-  contrast: (
-    50: $dark-primary-text,
-    100: $dark-primary-text,
-    200: $dark-primary-text,
-    300: $dark-primary-text,
-    400: $light-primary-text,
-    500: $light-primary-text,
-    600: $light-primary-text,
-    700: $light-primary-text,
-    800: $light-primary-text,
-    900: $light-primary-text,
-    A100: $light-primary-text,
-    A200: $light-primary-text,
-    A400: $light-primary-text,
-    A700: $light-primary-text,
-  ),
-);
-
-$elder-gold: (
-  50: #f6f3ec,
-  100: #e8e1d1,
-  200: #dacfb4,
-  300: #ccbc96,
-  400: #c1ad80,
-  500: #b69f6a,
-  // Official ElderByte Accent tone
-  600: #a69160,
-  700: #948156,
-  800: #81714b,
-  900: #5f5337,
-  A100: #e1d1a9,
-  A200: #efd08f,
-  A400: #dbbe7a,
-  A700: #af9144,
-  contrast: (
-    50: $dark-primary-text,
-    100: $dark-primary-text,
-    200: $dark-primary-text,
-    300: $dark-primary-text,
-    400: $dark-primary-text,
-    500: $dark-primary-text,
-    600: $dark-primary-text,
-    700: $dark-primary-text,
-    800: $dark-primary-text,
-    900: $dark-primary-text,
-    A100: $dark-primary-text,
-    A200: $dark-primary-text,
-    A400: $dark-primary-text,
-    A700: $dark-primary-text,
-  ),
-);
-
-/***************************************************************************
- *                                                                         *
- * Dark Theme Palettes                                                     *
- *                                                                         *
- **************************************************************************/
-
-$grey-palette: mat.$m2-grey-palette;
-$light-primary-text: rgba(white, 0.87);
-$light-secondary-text: rgba(white, 0.4);
-$light-disabled-text: rgba(white, 0.38);
-$light-dividers: rgba(white, 0.12);
-$light-focused: rgba(white, 0.12);
-
-$dark-background-dp-01: #1f1f1f; // 5%
-$dark-background-dp-02: #222222; // 7%
-$dark-background-dp-03: #262626; // 8%
-$dark-background-dp-04: #272727; // 9%
-$dark-background-dp-06: #2c2c2c; // 11%
-$dark-background-dp-08: #2d2d2d; // 12%
-$dark-background-dp-12: #333333; // 14%
-
-// Background palette for dark themes.
-$elder-dark-theme-background: (
-  status-bar: black,
-  app-bar: $dark-background-dp-01,
-  background: #121212,
-  // #121212
-  hover: rgba(white, 0.04),
-  card: $dark-background-dp-03,
-  dialog: $dark-background-dp-12,
-  // $my-dark-dp-06
-  disabled-button: rgba(white, 0.12),
-  raised-button: map.get($grey-palette, 800),
-  focused-button: $light-focused,
-  selected-button: map.get($grey-palette, 900),
-  selected-disabled-button: map.get($grey-palette, 800),
-  disabled-button-toggle: black,
-  unselected-chip: map.get($grey-palette, 800),
-  disabled-list-option: rgba(white, 0.12),
-  tooltip: map.get($grey-palette, 800),
-);
-
-// Foreground palette for dark themes.
-$elder-dark-theme-foreground: (
-  base: rgba(white, 0.87),
-  divider: $light-dividers,
-  dividers: $light-dividers,
-  disabled: $light-disabled-text,
-  disabled-button: rgba(white, 0.38),
-  disabled-text: $light-disabled-text,
-  elevation: black,
-  hint-text: $light-disabled-text,
-  secondary-text: $light-secondary-text,
-  icon: rgba(white, 0.87),
-  icons: rgba(white, 0.87),
-  text: rgba(white, 0.87),
-  slider-min: rgba(white, 0.87),
-  slider-off: rgba(white, 0.38),
-  slider-off-active: rgba(white, 0.38),
-);

package/theming/_elder-theme.scss

@@ -1,51 +0,0 @@
-@use '@angular/material' as mat;
-@use 'sass:map';
-@use 'elder-palettes' as palettes;
-
-/***************************************************************************
- *                                                                         *
- * Public API                                                              *
- *                                                                         *
- **************************************************************************/
-
-@function define-dark-elder-theme($config) {
-  $result: $config;
-  @if map.get($config, color) {
-    $color-settings: map.get($config, color);
-    $primary: map.get($color-settings, primary);
-    $accent: map.get($color-settings, accent);
-    $warn: map.get($color-settings, warn);
-    $result: map.merge(
-      $config,
-      (
-        color: _mat-create-dark-color-config($primary, $accent, $warn),
-      )
-    );
-  }
-  @return _create-backwards-compatibility-theme($result);
-}
-
-/***************************************************************************
- *                                                                         *
- * Private functions                                                       *
- *                                                                         *
- **************************************************************************/
-
-@function _mat-create-dark-color-config($primary, $accent, $warn: null) {
-  @return (
-    primary: $primary,
-    accent: $accent,
-    warn: if($warn != null, $warn, mat.m2-define-palette(mat.$m2-red-palette)),
-    is-dark: true,
-    foreground: palettes.$elder-dark-theme-foreground,
-    background: palettes.$elder-dark-theme-background
-  );
-}
-
-@function _create-backwards-compatibility-theme($theme) {
-  @if not map.get($theme, color) {
-    @return $theme;
-  }
-  $color: map.get($theme, color);
-  @return map.merge($theme, $color);
-}