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

package/theming/_elder-color-helpers.scss

@@ -0,0 +1,74 @@
+@mixin elder-color-helpers() {
+  $color-variables: (
+    'background': var(--md-sys-color-background),
+    'error': var(--md-sys-color-error),
+    'error-container': var(--md-sys-color-error-container),
+    'inverse-on-surface': var(--md-sys-color-inverse-on-surface),
+    'inverse-primary': var(--md-sys-color-inverse-primary),
+    'inverse-surface': var(--md-sys-color-inverse-surface),
+    'on-background': var(--md-sys-color-on-background),
+    'on-error': var(--md-sys-color-on-error),
+    'on-error-container': var(--md-sys-color-on-error-container),
+    'on-primary': var(--md-sys-color-on-primary),
+    'on-primary-container': var(--md-sys-color-on-primary-container),
+    'on-primary-fixed': var(--md-sys-color-on-primary-fixed),
+    'on-primary-fixed-variant': var(--md-sys-color-on-primary-fixed-variant),
+    'on-secondary': var(--md-sys-color-on-secondary),
+    'on-secondary-container': var(--md-sys-color-on-secondary-container),
+    'on-secondary-fixed': var(--md-sys-color-on-secondary-fixed),
+    'on-secondary-fixed-variant': var(--md-sys-color-on-secondary-fixed-variant),
+    'on-surface': var(--md-sys-color-on-surface),
+    'on-surface-variant': var(--md-sys-color-on-surface-variant),
+    'on-tertiary': var(--md-sys-color-on-tertiary),
+    'on-tertiary-container': var(--md-sys-color-on-tertiary-container),
+    'on-tertiary-fixed': var(--md-sys-color-on-tertiary-fixed),
+    'on-tertiary-fixed-variant': var(--md-sys-color-on-tertiary-fixed-variant),
+    'outline': var(--md-sys-color-outline),
+    'outline-variant': var(--md-sys-color-outline-variant),
+    'primary': var(--md-sys-color-primary),
+    'primary-container': var(--md-sys-color-primary-container),
+    'primary-fixed': var(--md-sys-color-primary-fixed),
+    'primary-fixed-dim': var(--md-sys-color-primary-fixed-dim),
+    'scrim': var(--md-sys-color-scrim),
+    'secondary': var(--md-sys-color-secondary),
+    'secondary-container': var(--md-sys-color-secondary-container),
+    'secondary-fixed': var(--md-sys-color-secondary-fixed),
+    'secondary-fixed-dim': var(--md-sys-color-secondary-fixed-dim),
+    'shadow': var(--md-sys-color-shadow),
+    'surface': var(--md-sys-color-surface),
+    'surface-bright': var(--md-sys-color-surface-bright),
+    'surface-container': var(--md-sys-color-surface-container),
+    'surface-container-high': var(--md-sys-color-surface-container-high),
+    'surface-container-highest': var(--md-sys-color-surface-container-highest),
+    'surface-container-low': var(--md-sys-color-surface-container-low),
+    'surface-container-lowest': var(--md-sys-color-surface-container-lowest),
+    'surface-dim': var(--md-sys-color-surface-dim),
+    'surface-tint': var(--md-sys-color-surface-tint),
+    'surface-variant': var(--md-sys-color-surface-variant),
+    'tertiary': var(--md-sys-color-tertiary),
+    'tertiary-container': var(--md-sys-color-tertiary-container),
+    'tertiary-fixed': var(--md-sys-color-tertiary-fixed),
+    'tertiary-fixed-dim': var(--md-sys-color-tertiary-fixed-dim),
+  );
+
+  // background colors
+  @each $name, $value in $color-variables {
+    .elder-bg-#{$name} {
+      background-color: #{$value};
+    }
+  }
+
+  // text colors
+  @each $name, $value in $color-variables {
+    .elder-text-#{$name} {
+      color: #{$value};
+    }
+  }
+
+  // border colors
+  @each $name, $value in $color-variables {
+    .elder-border-#{$name} {
+      border-color: #{$value};
+    }
+  }
+}

package/theming/_elder-common.scss

@@ -19,6 +19,18 @@
   $xl: map-get($common-sizes, xl);
   $xxl: map-get($common-sizes, xxl);
 
+  /***************************************************************************
+   *                                                                         *
+   * CSS reset                                                               *
+   *                                                                         *
+   **************************************************************************/
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   /***************************************************************************
    *                                                                         *
    * Angular Material Extensions (Optional)                                  *
@@ -112,9 +124,9 @@
    **************************************************************************/
 
   .custom-dialog-container .mat-mdc-dialog-container {
-    overflow-y: hidden;
-    padding: 0;
-    margin: 0;
+    // overflow-y: hidden;
+    // padding: 0;
+    // margin: 0;
   }
 
   .no-padding-dialog .mat-mdc-dialog-container {

package/theming/_elder-design-token-overwrites.scss

@@ -0,0 +1,33 @@
+@mixin elder-design-token-overwrites() {
+  // mat variables
+  --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
+  // make table row border color lighter
+  --mat-table-row-item-outline-color: var(--md-sys-color-outline-variant);
+  --mat-divider-color: var(--md-sys-color-outline-variant); // make divider color lighter
+
+  //--mat-table-row-item-outline-color: var(--md-sys-color-outline-variant); // make table row border color lighter
+
+  // elder custom variables
+  --elder-border-radius-sm: 4px; // typical small border radius, inspired by mat 2
+  --elder-border-light: 1px solid var(--md-sys-color-outline-variant);
+  --elder-box-shadow-default: var(--mat-app-elevation-shadow-level-8);
+
+  // cards white bg
+  --mdc-elevated-card-container-color: var(--md-sys-color-surface-container-lowest);
+  --mdc-outlined-card-container-color: var(--mdc-elevated-card-container-color);
+  --mat-table-background-color: var(--mdc-elevated-card-container-color);
+
+  // dark theme overwrites
+  &.elder-dark-theme {
+    //--mdc-elevated-card-container-color: var(--md-sys-color-surface-bright);
+    --elder-dark-gray: #1f1f1f; // copied from mat 2 theme
+    --mdc-elevated-card-container-color: #262626; // copied from mat 2 theme
+    --mdc-outlined-card-container-color: var(--mdc-elevated-card-container-color);
+    --mat-table-background-color: var(--mdc-elevated-card-container-color);
+  }
+}

package/theming/_elder-flex-layout.scss

@@ -25,13 +25,11 @@ $media: (
 }
 
 @mixin flex-layout {
-  box-sizing: border-box;
   display: flex !important;
 }
 
 @mixin flex-initial-100 {
   flex: 1 1 100%;
-  box-sizing: border-box;
 }
 
 @mixin elder-flex-layout($theme) {
@@ -61,7 +59,6 @@ $media: (
     min-height: 100%;
     min-width: 100%;
     width: 100%;
-    box-sizing: border-box;
   }
 
   /***************************************************************************
@@ -195,24 +192,20 @@ $media: (
 
   .flex {
     flex: 1 1 0%; // grow, shrink, no initial size
-    box-sizing: border-box;
     min-width: 0;
     min-height: 0;
   }
 
   .flex-auto {
     flex: 1 1 auto; // grow, shrink
-    box-sizing: border-box;
   }
 
   .flex-initial {
     flex: 0 1 auto; // No grow, shrink
-    box-sizing: border-box;
   }
 
   .flex-none {
     flex: none;
-    box-sizing: border-box;
   }
 
   .layout-row {
@@ -325,22 +318,18 @@ $media: (
 
   .flex-grow {
     flex-grow: 1;
-    box-sizing: border-box;
   }
 
   .flex-nogrow {
     flex-grow: 0;
-    box-sizing: border-box;
   }
 
   .flex-shrink {
     flex-shrink: 1;
-    box-sizing: border-box;
   }
 
   .flex-noshrink {
     flex: 1 0 0%; // grow, shrink, no initial size
-    box-sizing: border-box;
   }
 
   /***************************************************************************

package/theming/_elder-layout-system.scss

@@ -202,6 +202,231 @@
     padding-bottom: $xxl;
   }
 
+  /***************************************************************************
+   *                                                                         *
+   * Margin                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  .m-auto {
+    margin: auto;
+  }
+
+  .mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .m-0 {
+    margin: 0;
+  }
+
+  .mt-0 {
+    margin-top: 0;
+  }
+
+  .mb-0 {
+    margin-bottom: 0;
+  }
+
+  .mr-0 {
+    margin-right: 0;
+  }
+
+  .ml-0 {
+    margin-left: 0;
+  }
+
+  .mx-0 {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .my-0 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .m-xs {
+    margin: $xs;
+  }
+
+  .mt-xs {
+    margin-top: $xs;
+  }
+
+  .mb-xs {
+    margin-bottom: $xs;
+  }
+
+  .mr-xs {
+    margin-right: $xs;
+  }
+
+  .ml-xs {
+    margin-left: $xs;
+  }
+
+  .mx-xs {
+    margin-left: $xs;
+    margin-right: $xs;
+  }
+
+  .my-xs {
+    margin-top: $xs;
+    margin-bottom: $xs;
+  }
+
+  .m-sm {
+    margin: $sm;
+  }
+
+  .mt-sm {
+    margin-top: $sm;
+  }
+
+  .mb-sm {
+    margin-bottom: $sm;
+  }
+
+  .mr-sm {
+    margin-right: $sm;
+  }
+
+  .ml-sm {
+    margin-left: $sm;
+  }
+
+  .mx-sm {
+    margin-left: $sm;
+    margin-right: $sm;
+  }
+
+  .my-sm {
+    margin-top: $sm;
+    margin-bottom: $sm;
+  }
+
+  .m-md {
+    margin: $md;
+  }
+
+  .mt-md {
+    margin-top: $md;
+  }
+
+  .mb-md {
+    margin-bottom: $md;
+  }
+
+  .mr-md {
+    margin-right: $md;
+  }
+
+  .ml-md {
+    margin-left: $md;
+  }
+
+  .mx-md {
+    margin-left: $md;
+    margin-right: $md;
+  }
+
+  .my-md {
+    margin-top: $md;
+    margin-bottom: $md;
+  }
+
+  .m-lg {
+    margin: $lg;
+  }
+
+  .mt-lg {
+    margin-top: $lg;
+  }
+
+  .mb-lg {
+    margin-bottom: $lg;
+  }
+
+  .mr-lg {
+    margin-right: $lg;
+  }
+
+  .ml-lg {
+    margin-left: $lg;
+  }
+
+  .mx-lg {
+    margin-left: $lg;
+    margin-right: $lg;
+  }
+
+  .my-lg {
+    margin-top: $lg;
+    margin-bottom: $lg;
+  }
+
+  .m-xl {
+    margin: $xl;
+  }
+
+  .mt-xl {
+    margin-top: $xl;
+  }
+
+  .mb-xl {
+    margin-bottom: $xl;
+  }
+
+  .mr-xl {
+    margin-right: $xl;
+  }
+
+  .ml-xl {
+    margin-left: $xl;
+  }
+
+  .mx-xl {
+    margin-left: $xl;
+    margin-right: $xl;
+  }
+
+  .my-xl {
+    margin-top: $xl;
+    margin-bottom: $xl;
+  }
+
+  .m-xxl {
+    margin: $xxl;
+  }
+
+  .mt-xxl {
+    margin-top: $xxl;
+  }
+
+  .mb-xxl {
+    margin-bottom: $xxl;
+  }
+
+  .mr-xxl {
+    margin-right: $xxl;
+  }
+
+  .ml-xxl {
+    margin-left: $xxl;
+  }
+
+  .mx-xxl {
+    margin-left: $xxl;
+    margin-right: $xxl;
+  }
+
+  .my-xxl {
+    margin-top: $xxl;
+    margin-bottom: $xxl;
+  }
+
   /***************************************************************************
    *                                                                         *
    * Layout Widths                                                           *

package/theming/_elder-m3-theme.scss

@@ -1,8 +1,45 @@
-// This file was generated by running 'ng generate @angular/material:m3-theme'.
-// Proceed with caution if making changes to this file.
-
 @use 'sass:map';
 @use '@angular/material' as mat;
+@use 'elder-design-token-overwrites' as elder-design-token-overwrites;
+@use '../index' as elder;
+
+@mixin render-default-elder-theme ($themes, $options: ()) {
+  // map options
+  $use-typography-hierarchy: not map-has-key($options, 'no-typography-hierarchy');
+
+  // create theme
+  //$themes: create-default-elder-themes();
+  $elder-light-theme-m3: map.get($themes, light);
+  $elder-dark-theme-m3: map.get($themes, dark-reverse);
+
+  // render theme
+  @include mat.all-component-typographies();
+  @include mat.core();
+
+  @if $use-typography-hierarchy {
+    @include mat.typography-hierarchy($elder-light-theme-m3, $back-compat: true);
+  }
+
+  .elder-light-theme,
+  .elder-dark-theme {
+    @include mat.all-component-themes($elder-light-theme-m3);
+    @include mat.system-level-colors($elder-light-theme-m3);
+    @include mat.system-level-typography($elder-light-theme-m3);
+    @include mat.color-variants-backwards-compatibility($elder-light-theme-m3);
+    @include elder.starter-theme($elder-light-theme-m3);
+  }
+
+  .elder-dark-theme {
+    @include mat.all-component-colors($elder-dark-theme-m3);
+    @include mat.system-level-colors($elder-dark-theme-m3);
+    @include mat.color-variants-backwards-compatibility($elder-dark-theme-m3);
+  }
+
+  .elder-light-theme,
+  .elder-dark-theme {
+    @include elder-design-token-overwrites.elder-design-token-overwrites();
+  }
+}
 
 @function create-default-elder-themes() {
   @return create-themes(get-palettes());
@@ -19,6 +56,8 @@
   );
   $_primary: map.merge(map.get($_palettes, primary), $_rest);
   $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
+  $_primary-reverse: map.merge(map.get($_palettes, tertiary), $_rest);
+  $_tertiary-reverse: map.merge(map.get($_palettes, tertiary), $_rest);
 
   $density: 0;
 
@@ -60,7 +99,47 @@
     )
   );
 
-  @return (light: $light-theme, dark: $dark-theme);
+  $light-theme-reverse: mat.define-theme(
+    (
+      color: (
+        theme-type: light,
+        primary: $_primary-reverse,
+        tertiary: $_tertiary-reverse,
+        use-system-variables: true,
+        system-variables-prefix: md-sys-color,
+      ),
+      typography: (
+        use-system-variables: true,
+        system-variables-prefix: md-sys-typescale,
+      ),
+      density: (
+        scale: $density,
+      ),
+    )
+  );
+
+  $dark-theme-reverse: mat.define-theme(
+    (
+      color: (
+        theme-type: dark,
+        primary: $_primary-reverse,
+        tertiary: $_tertiary-reverse,
+        use-system-variables: true,
+        system-variables-prefix: md-sys-color,
+      ),
+      typography: (
+        use-system-variables: true,
+        system-variables-prefix: md-sys-typescale,
+      ),
+      density: (
+        scale: $density,
+      ),
+    )
+  );
+
+
+
+  @return (light: $light-theme, dark: $dark-theme, light-reverse: $light-theme-reverse, dark-reverse: $dark-theme-reverse);
 }
 
 @function get-palettes() {
@@ -752,3 +831,128 @@
   --md-sys-color-surface-container-high: rgb(41 42 45);
   --md-sys-color-surface-container-highest: rgb(52 53 56);
 }
+
+@function get-palettes-variant-3() {
+  // Note: Color palettes are generated from primary: #00378F, tertiary: #ACACFF
+  $_palettes: (
+    primary: (
+      0: #000000,
+      10: #001848,
+      20: #002b74,
+      25: #00358b,
+      30: #144199,
+      35: #264da5,
+      40: #345ab2,
+      50: #5073cd,
+      60: #6b8de9,
+      70: #89a9ff,
+      80: #b2c5ff,
+      90: #dae2ff,
+      95: #eef0ff,
+      98: #faf8ff,
+      99: #fefbff,
+      100: #ffffff,
+    ),
+    secondary: (
+      0: #000000,
+      10: #0d1a3a,
+      20: #232f50,
+      25: #2e3a5c,
+      30: #3a4668,
+      35: #455174,
+      40: #515d81,
+      50: #6a769b,
+      60: #8490b6,
+      70: #9eaad2,
+      80: #b9c5ee,
+      90: #dae2ff,
+      95: #eef0ff,
+      98: #faf8ff,
+      99: #fefbff,
+      100: #ffffff,
+    ),
+    tertiary: (
+      0: #000000,
+      10: #100b5c,
+      20: #272671,
+      25: #32327c,
+      30: #3e3e89,
+      35: #4a4a95,
+      40: #5656a2,
+      50: #6f6fbd,
+      60: #8989d9,
+      70: #a3a3f6,
+      80: #c2c1ff,
+      90: #e2dfff,
+      95: #f2efff,
+      98: #fcf8ff,
+      99: #fffbff,
+      100: #ffffff,
+    ),
+    neutral: (
+      0: #000000,
+      10: #1a1b21,
+      20: #2f3036,
+      25: #3a3b41,
+      30: #45464d,
+      35: #515259,
+      40: #5d5e65,
+      50: #76777e,
+      60: #909097,
+      70: #aaaab2,
+      80: #c6c6ce,
+      90: #e2e2ea,
+      95: #f1f0f8,
+      98: #faf8ff,
+      99: #fefbff,
+      100: #ffffff,
+      4: #0c0e13,
+      6: #121319,
+      12: #1e1f25,
+      17: #282a30,
+      22: #33343b,
+      24: #38393f,
+      87: #dad9e1,
+      92: #e8e7ef,
+      94: #eeedf5,
+      96: #f4f3fb,
+    ),
+    neutral-variant: (
+      0: #000000,
+      10: #181b25,
+      20: #2d303b,
+      25: #383b46,
+      30: #434652,
+      35: #4f525e,
+      40: #5b5e6a,
+      50: #747683,
+      60: #8e909d,
+      70: #a8aab8,
+      80: #c4c6d4,
+      90: #e0e2f0,
+      95: #eef0fe,
+      98: #faf8ff,
+      99: #fefbff,
+      100: #ffffff,
+    ),
+    error: (
+      0: #000000,
+      10: #410002,
+      20: #690005,
+      25: #7e0007,
+      30: #93000a,
+      35: #a80710,
+      40: #ba1a1a,
+      50: #de3730,
+      60: #ff5449,
+      70: #ff897d,
+      80: #ffb4ab,
+      90: #ffdad6,
+      95: #ffedea,
+      98: #fff8f7,
+      99: #fffbff,
+      100: #ffffff,
+    ),
+  );
+  @return $_palettes;
+}

package/theming/_elder-scrollbar-theme.scss

@@ -45,7 +45,7 @@
 
     /* Handle on hover */
     ::-webkit-scrollbar-thumb:hover {
-      background: var(--md-sys-color-primary-fixed);
+      background: var(--md-sys-color-primary);
     }
   }
 }