@elderbyte/ngx-starter 18.13.0-beta.1 → 18.13.0

package/theming/_elder-mdc-support.scss

@@ -1,43 +1,172 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use './elder-typography-utils' as elder-typography;
+@use '../theming/mat-icon-button-size' as icon-button-size;
+@use '../theming/elder-typography-utils' as elder-typography;
 
 @mixin mdc-theme-support($config-or-theme) {
-  @include _mdc-mat-toolbar();
-  @include _mdc-control-icon();
+  $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);
 }
 
-@mixin _mdc-mat-toolbar() {
+/**
+ * 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);
+
   .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 _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;
+@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);
 
   .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: $bg-color-extra;
+    background: mat.m2-get-color-from-palette($palette);
     color: $contrast-color;
 
     .mdc-text-field__input {
-      background: $bg-color-extra;
+      background: mat.m2-get-color-from-palette($palette);
       color: $contrast-color;
       caret-color: currentColor;
     }
@@ -104,49 +233,3 @@
     }
   }
 }
-
-@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-palettes.scss

@@ -0,0 +1,148 @@
+@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-scrollbar-theme.scss

@@ -9,6 +9,11 @@
   $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
@@ -37,15 +42,20 @@
       @include scrollbar-width(map.get($commonSizes, xxl));
     }
 
+    /* Track */
+    ::-webkit-scrollbar-track {
+      // background: mat.get-color-from-palette($background, background);
+    }
+
     /* Handle */
     ::-webkit-scrollbar-thumb {
-      background: var(--md-sys-color-primary);
+      background: mat.m2-get-color-from-palette($primary);
       border-radius: 5px;
     }
 
     /* Handle on hover */
     ::-webkit-scrollbar-thumb:hover {
-      background: var(--md-sys-color-primary-fixed);
+      background: mat.m2-get-color-from-palette($primary, 300);
     }
   }
 }

package/theming/_elder-style-fixes.scss

@@ -1,11 +1,10 @@
 @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 * {
@@ -91,6 +90,88 @@
     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
   *******************************/
@@ -100,50 +181,36 @@
       cursor: pointer;
     }
   }
+}
 
-  /******************************
-    Styling toast messages
-    *******************************/
-  .elder-primary-text {
-    color: var(--md-sys-color-primary);
-  }
-
-  .elder-accent-text {
-    color: var(--md-sys-color-tertiary);
-  }
-
-  .elder-warn-text {
-    color: var(--md-sys-color-error);
-  }
+.mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label {
+  display: block !important;
 }
 
-@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-table-row-item-outline-color: var(--md-sys-color-outline-variant); // make table row border color lighter
-
-  .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);
-      }
-    }
+@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;
   }
+}
 
-  .mat-toolbar .mat-mdc-icon-button {
-    color: inherit;
+@function calc-padding-top-form-field-inflix($density) {
+  @if $density > -3 {
+    @return 20px;
+  } @else {
+    @return 14px;
   }
 }

package/theming/_elder-theme.scss

@@ -0,0 +1,51 @@
+@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);
+}

package/theming/_elder-toast-theme.scss

@@ -0,0 +1,46 @@
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+  $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);
+
+  /*
+  .elder-primary-toast {
+    background: mat.get-color-from-palette($background, dialog);
+    color: mat.get-color-from-palette($primary);
+  }
+
+  .elder-accent-toast {
+    background: mat.get-color-from-palette($background, dialog);
+    color: mat.get-color-from-palette($accent);
+  }
+
+  .elder-success-toast {
+    background: mat.get-color-from-palette($background, dialog);
+    color: mat.get-color-from-palette($primary);
+  }
+
+  .elder-warning-toast {
+    background: mat.get-color-from-palette($background, dialog);
+    color: mat.get-color-from-palette($accent);
+  }
+
+  .elder-error-toast {
+    background-color: mat.get-color-from-palette($warn);
+  }*/
+
+  .elder-primary-text {
+    color: mat.m2-get-color-from-palette($primary);
+  }
+
+  .elder-accent-text {
+    color: mat.m2-get-color-from-palette($accent);
+  }
+
+  .elder-warn-text {
+    color: mat.m2-get-color-from-palette($warn);
+  }
+}