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

package/src/lib/components/navigation/nav/_elder-nav-theme.scss

@@ -6,46 +6,34 @@
 }
 
 @mixin _group-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);
-
   .nav-group-button:hover {
-    background-color: mat.m2-get-color-from-palette($primary, default, 0.1);
-    transition: background 0.5s;
+    background-color: var(--md-sys-color-surface-container-high);
+    transition: background-color 0.5s;
   }
 
   .nav-group-button:not(.nav-group-button-open) {
     .mat-icon {
-      color: mat.m2-get-color-from-palette($foreground, secondary-text);
+      color: var(--md-sys-color-on-surface);
     }
   }
 
   .nav-group-button-active {
-    background-color: mat.m2-get-color-from-palette($primary, default, 0.15);
+    background-color: var(--md-sys-color-primary-fixed);
   }
 
   .nav-group-button-open {
     padding-left: 11px !important; // -5 to counter border-left
     .mat-icon {
-      color: mat.m2-get-color-from-palette($primary);
+      color: var(--md-sys-color-primary);
     }
   }
 }
 
 @mixin _link-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);
-
   .nav-link.nav-link-clickable {
     cursor: pointer;
     &:hover {
-      background-color: mat.m2-get-color-from-palette($primary, default, 0.1);
+      background-color: var(--md-sys-color-surface-container-high);
     }
   }
 
@@ -54,21 +42,21 @@
   }
 
   .nav-link:hover {
-    background-color: mat.m2-get-color-from-palette($primary, default, 0.05);
+    background-color: var(--md-sys-color-primary-fixed);
   }
 
   .nav-link.nav-link-active {
-    background-color: mat.m2-get-color-from-palette($primary, default, 0.15);
-    color: mat.m2-get-color-from-palette($primary);
+    background-color: var(--md-sys-color-primary-fixed);
+    color: var(--md-sys-color-on-primary-fixed);
     .mat-icon {
-      color: mat.m2-get-color-from-palette($primary);
+      color: var(--md-sys-color-primary);
     }
   }
 
   .nav-link.nav-link-inactive {
-    color: mat.m2-get-color-from-palette($foreground, text);
+    color: var(--md-sys-color-on-surface);
     .mat-icon {
-      color: mat.m2-get-color-from-palette($foreground, secondary-text);
+      color: var(--md-sys-color-on-surface);
     }
   }
 }

package/src/lib/components/page/exit-guard/page-exit-lock-indicator/page-exit-lock-indicator.component.scss

@@ -3,8 +3,5 @@
   height: 250px;
   border-radius: 4px;
   overflow: hidden;
-  box-shadow:
-    0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--mat-app-elevation-shadow-level-8);
 }

package/src/lib/components/panels/card-panel/elder-card-panel.component.scss

@@ -1,21 +1,12 @@
 @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-card-panel {
-    color: mat.m2-get-color-from-palette($foreground, text);
-    background-color: mat.m2-get-color-from-palette($background, 'card');
+    color: var(--md-sys-color-on-surface);
+    background-color: var(--md-sys-color-surface);
 
     padding: 10px;
     border-radius: 4px;
-    box-shadow:
-      0 5px 5px -3px rgba(0, 0, 0, 0.2),
-      0 8px 10px 1px rgba(0, 0, 0, 0.14),
-      0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--mat-app-elevation-shadow-level-8);
   }
 }

package/src/lib/components/panels/elder-dialog-panel/elder-dialog-panel.component.scss

@@ -1,21 +1,13 @@
 @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-dialog-panel {
-    color: mat.m2-get-color-from-palette($foreground, text);
-    background-color: mat.m2-get-color-from-palette($background, dialog);
+    // Use CSS variables for Material 3
+    background-color: var(--md-sys-color-surface);
+    color: var(--md-sys-color-on-surface);
 
     padding: 10px;
     border-radius: 4px;
-    box-shadow:
-      0 5px 5px -3px rgba(0, 0, 0, 0.2),
-      0 8px 10px 1px rgba(0, 0, 0, 0.14),
-      0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--mat-app-elevation-shadow-level-8);
   }
 }

package/src/lib/components/panels/flat/_elder-panel-theme.scss

@@ -1,8 +1,13 @@
 @use '@angular/material' as mat;
 
-@mixin _elder-panel-color($palette) {
-  background: mat.m2-get-color-from-palette($palette);
-  color: mat.m2-get-color-from-palette($palette, default-contrast);
+@mixin _elder-panel-color($palette, $theme) {
+  @if (mat.get-theme-version($theme) == 1) {
+    background: var(--md-sys-color-primary-container);
+    color: var(--md-sys-color-on-primary-container);
+  } @else {
+    $background: mat.m2-get-color-from-palette($palette, app-bar);
+    $foreground: mat.m2-get-color-from-palette($palette, text);
+  }
 }
 
 @mixin _elder-panel-form-field-overrides {
@@ -34,23 +39,29 @@
   $foreground: map-get($theme, foreground);
 
   .mat-panel {
-    background: mat.m2-get-color-from-palette($background, app-bar);
-    color: mat.m2-get-color-from-palette($foreground, text);
+    @if (mat.get-theme-version($theme) == 1) {
+      background: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    } @else {
+      background: mat.m2-get-color-from-palette($background, app-bar);
+      color: mat.m2-get-color-from-palette($foreground, text);
+    }
     transition: background 0.5s;
 
     &.mat-primary {
-      @include _elder-panel-color($primary);
+      @include _elder-panel-color($primary, $theme);
     }
 
     &.mat-accent {
-      @include _elder-panel-color($accent);
+      @include _elder-panel-color($accent, $theme);
     }
 
     &.mat-warn {
-      @include _elder-panel-color($warn);
+      @include _elder-panel-color($warn, $theme);
     }
 
     @include _elder-panel-form-field-overrides;
+    @include elder-panel-typography($theme);
   }
 }
 
@@ -62,7 +73,13 @@
   .mat-panel h4,
   .mat-panel h5,
   .mat-panel h6 {
-    @include mat.m2-typography-level($config, title);
+    // @include mat.m2-typography-level($config, title);
+    // margin: 0;
+
+    // Set typography styles for different heading levels
+    font-family: var(--mdc-typography-font-family); // Use the MDC font family variable
+
+    //@include mat.typography($config, headline-2); // try, debug disabled
     margin: 0;
   }
 }

package/src/lib/components/select/_elder-select-base.scss

@@ -1,14 +1,9 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 @use '../../../../theming/elder-typography-utils' as elder-typography;
-@use '../../../../theming/mat-icon-button-size' as icon-button-size;
 
 @mixin typography($typography-config) {
-  $config: $typography-config; // TODO $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);
+  $line-height-em: var(--md-sys-typescale-body-medium-line-height);
 
   $icon-size: 16px;
   $arrow-icon-size: 24px;
@@ -32,6 +27,3 @@
     font-size: $icon-size !important;
   }
 }
-
-@mixin color($color-config) {
-}

package/src/lib/components/select/filter/elder-filter-chip-template/elder-filter-chip-template.component.scss

@@ -80,10 +80,7 @@
 .cdk-drag-preview {
   box-sizing: border-box;
   // border-radius: 4px;
-  box-shadow:
-    0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--mat-app-elevation-shadow-level-8);
 }
 
 .cdk-drag-placeholder {

package/src/lib/components/select/multi/elder-multi-select-chip-options/elder-multi-select-chip-options.component.scss

@@ -4,19 +4,13 @@
 @use '../../elder-select-base' as elder-select-base;
 
 @mixin typography($typography-config) {
-  $config: $typography-config; // TODO $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);
-
   @include elder-select-base.typography($typography-config);
 
   .elder-multi-select {
-    font-family: mat.m2-font-family($config);
+    font-family: var(--md-sys-typescale-body-medium-font);
 
     .elder-select-input {
-      height: $line-height-em;
+      height: var(--md-sys-typescale-body-medium-line-height);
     }
 
     .elder-prefix-icon {
@@ -40,39 +34,16 @@
 }
 
 @mixin theme($config-or-theme) {
-  $color: mat.m2-get-color-config($config-or-theme);
-  $typography: elder-typography.get-typography-config($config-or-theme);
-
-  // If no actual typography configuration has been specified, create a default one.
-  @if not $typography {
-    $typography: mat.m2-define-typography-config();
-  }
+  @include typography($config-or-theme);
 
-  @if $color != null {
-    @include elder-select-base.color($color);
-    @include _chip_color($config-or-theme);
+  .elder-chip-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  @if $typography != null {
-    @include typography($typography);
+  .elder-trailing-icon {
+    color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
+    opacity: 0.54;
   }
 }
-
-@mixin _chip_color($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-chip-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.elder-trailing-icon {
-  color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
-  opacity: 0.54;
-}

package/src/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.scss

@@ -4,19 +4,13 @@
 @use '../../elder-select-base' as elder-select-base;
 
 @mixin typography($typography-config) {
-  $config: $typography-config; // TODO $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);
-
   @include elder-select-base.typography($typography-config);
 
   .elder-multi-select {
-    font-family: mat.m2-font-family($config);
+    font-family: var(--md-sys-typescale-body-medium-font);
 
     .elder-select-input {
-      height: $line-height-em;
+      height: var(--md-sys-typescale-body-medium-line-height);
     }
 
     .elder-prefix-icon {
@@ -40,56 +34,29 @@
 }
 
 @mixin theme($config-or-theme) {
-  $color: mat.m2-get-color-config($config-or-theme);
-  $typography: elder-typography.get-typography-config($config-or-theme);
+  @include typography($config-or-theme);
 
-  // If no actual typography configuration has been specified, create a default one.
-  @if not $typography {
-    $typography: mat.m2-define-typography-config();
+  .elder-chip-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  @if $color != null {
-    @include elder-select-base.color($color);
-    @include _chip_color($config-or-theme);
+  .elder-trailing-icon {
+    color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
+    opacity: 0.54;
   }
 
-  @if $typography != null {
-    @include typography($typography);
+  .cdk-drag-preview {
+    box-sizing: border-box;
+    box-shadow: var(--mat-app-elevation-shadow-level-8);
   }
-}
-
-@mixin _chip_color($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-chip-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.elder-trailing-icon {
-  color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
-  opacity: 0.54;
-}
-
-.cdk-drag-preview {
-  box-sizing: border-box;
-  // border-radius: 4px;
-  box-shadow:
-    0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.cdk-drag-placeholder {
-  opacity: 0;
-}
+  .cdk-drag-placeholder {
+    opacity: 0;
+  }
 
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  .cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
 }

package/src/lib/components/select/single/elder-select/elder-select.component.scss

@@ -3,17 +3,13 @@
 @use '../../../../../../theming/elder-typography-utils' as elder-typography;
 @use '../../elder-select-base' as elder-select-base;
 
-@mixin typography($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);
+@mixin typography($config-or-theme) {
+  $line-height-em: var(--md-sys-typescale-body-medium-line-height);
 
-  @include elder-select-base.typography($typography-config);
+  @include elder-select-base.typography($config-or-theme);
 
   .elder-select {
-    font-family: mat.m2-font-family($config);
+    font-family: var(--md-sys-typescale-body-medium-font);
 
     .elder-input-prefix-icon-container {
       padding-right: 3px;
@@ -31,45 +27,33 @@
 }
 
 @mixin theme($config-or-theme) {
-  $color: mat.m2-get-color-config($config-or-theme);
-  $typography: elder-typography.get-typography-config($config-or-theme);
+  // @debug mat.get-theme-typography($config-or-theme, body-medium, line-height);
+  // @debug mat.get-theme-typography($config-or-theme, body-medium, font-family);
+  @include typography($config-or-theme);
 
-  // If no actual typography configuration has been specified, create a default one.
-  @if not $typography {
-    $typography: mat.m2-define-typography-config();
+  @keyframes shrink {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0.75);
+    }
   }
 
-  @if $color != null {
-    @include elder-select-base.color($color);
+  .loading {
+    animation: shrink 0.3s ease-in-out infinite alternate;
+    -webkit-animation: shrink 0.3s ease-in-out infinite alternate;
   }
 
-  @if $typography != null {
-    @include typography($typography);
+  .clickable-icon {
+    cursor: pointer;
   }
-}
 
-@keyframes shrink {
-  0% {
-    transform: scale(1);
+  .full-width {
+    width: 100%;
   }
-  100% {
-    transform: scale(0.75);
-  }
-}
-
-.loading {
-  animation: shrink 0.3s ease-in-out infinite alternate;
-  -webkit-animation: shrink 0.3s ease-in-out infinite alternate;
-}
-
-.clickable-icon {
-  cursor: pointer;
-}
 
-.full-width {
-  width: 100%;
-}
-
-.elder-select-dropdown-input {
-  cursor: pointer;
+  .elder-select-dropdown-input {
+    cursor: pointer;
+  }
 }

package/src/lib/components/time/_elder-time-input.theme.scss

@@ -3,9 +3,6 @@
 @use '../../../../theming/elder-typography-utils' as elder-typography;
 
 @mixin theme($config-or-theme) {
-  $color: mat.m2-get-color-config($config-or-theme);
-  $typography: mat.m2-get-typography-config($config-or-theme);
-
   @include _interval-form-field-sizing();
   @include _interval-form-field-color();
 }

package/theming/_elder-color-variants.scss

@@ -0,0 +1,26 @@
+@use '@angular/material' as mat;
+
+/**
+ * Source: https://material.angular.io/guide/theming#using-component-color-variants
+ * 
+ * This applies custom color variants for the legacy M2 color system for usage in M3.
+ * There are different mixins for many components (not all).
+ * You can find the list of the components and there supported color variants here:
+ * https://material.angular.io/guide/theming#using-component-color-variants
+ */
+@mixin elder-color-variants($theme) {
+  // Apply primary color variants for button components
+  mat-chip-option[color='primary'] {
+    @include mat.chips-color($theme, $color-variant: primary);
+  }
+
+  // Apply secondary color variants for button components
+  mat-chip-option[color='danger'] {
+    @include mat.chips-color($theme, $color-variant: error);
+  }
+
+  // Apply tertiary color variants for button components
+  mat-chip-option[color='accent'] {
+    @include mat.chips-color($theme, $color-variant: tertiary);
+  }
+}