@elderbyte/ngx-starter 19.1.0-beta.2 → 19.1.0-beta.20

package/theming/abstracts/_elder-theme-main.scss

@@ -0,0 +1,92 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use './elder-starter-theme' as starter-theme;
+@use './elder-scss-variables' as config;
+
+@mixin render-default-elder-theme($themes: 'default', $options: ()) {
+  @if $themes == 'default' {
+    $themes: create-themes(config.$palettes); // typically this will be used
+  } @else {
+    $themes: $themes;
+  }
+
+  // map options
+  $use-typography-hierarchy: not map.has-key($options, 'no-typography-hierarchy');
+
+  // create theme
+  $elder-light-theme: map.get($themes, light);
+  $elder-dark-theme: map.get($themes, dark);
+
+  // render theme
+  @include mat.all-component-typographies();
+  @include mat.elevation-classes();
+  @include mat.app-background();
+
+  @if $use-typography-hierarchy {
+    @include mat.typography-hierarchy($elder-light-theme, $back-compat: true);
+  }
+
+  .elder-light-theme,
+  .elder-dark-theme {
+    @include mat.all-component-themes($elder-light-theme);
+    @include mat.system-level-colors($elder-light-theme);
+    @include mat.system-level-typography($elder-light-theme);
+    @include mat.color-variants-backwards-compatibility($elder-light-theme);
+  }
+
+  .elder-dark-theme {
+    @include mat.all-component-colors($elder-dark-theme);
+    @include mat.system-level-colors($elder-dark-theme);
+    @include mat.color-variants-backwards-compatibility($elder-dark-theme);
+  }
+
+  .elder-light-theme,
+  .elder-dark-theme {
+    @include starter-theme.starter-theme($elder-light-theme);
+  }
+}
+
+@function create-themes($palettesArg) {
+  $_palettes: $palettesArg;
+
+  $_rest: (
+    secondary: map.get($_palettes, secondary),
+    neutral: map.get($_palettes, neutral),
+    neutral-variant: map.get($_palettes, neutral-variant),
+    error: map.get($_palettes, error),
+  );
+  $_primary: map.merge(map.get($_palettes, primary), $_rest);
+  $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
+
+  $density: 0; // ATM important ot start with 0, since we are (miss-)using the tighter -4 density settings only for forms
+
+  $light-theme: _elder-define-theme(light, $_primary, $_tertiary, $density);
+  $dark-theme: _elder-define-theme(dark, $_primary, $_tertiary, $density);
+  $dark-theme-mono: _elder-define-theme(dark, $_tertiary, $_tertiary, $density);
+
+  @return (
+    light: $light-theme,
+    dark: $dark-theme-mono,
+  );
+}
+
+@function _elder-define-theme($theme-type, $primary, $tertiary, $density: 0) {
+  @return mat.define-theme(
+    (
+      color: (
+        theme-type: $theme-type,
+        primary: $primary,
+        tertiary: $tertiary,
+        use-system-variables: true,
+        system-variables-prefix: md-sys-color,
+      ),
+      typography: (
+        use-system-variables: true,
+        system-variables-prefix: md-sys-typescale,
+      ),
+      density: (
+        scale: $density,
+      ),
+    )
+  );
+}

package/theming/{style-tweaks/_elder-common.scss → base/_elder-common-base.scss}

@@ -1,22 +1,19 @@
-@use './elder-style-tweak-mixins' as mixins;
+@use './elder-base-mixins' as mixins;
 @use '@angular/material' as mat;
 @use 'sass:map';
 
-@mixin elder-common-styles($theme) {
-  $common-sizes: map.get($theme, elder, common-sizes);
-
+@mixin elder-common-base($theme) {
   /***************************************************************************
    *                                                                         *
-   * Common Sizes                                                            *
+   * CSS reset: box-sizing                                                   *
    *                                                                         *
    **************************************************************************/
 
-  $xs: map.get($common-sizes, xs);
-  $sm: map.get($common-sizes, sm);
-  $md: map.get($common-sizes, md);
-  $lg: map.get($common-sizes, lg);
-  $xl: map.get($common-sizes, xl);
-  $xxl: map.get($common-sizes, xxl);
+   *,
+   *::before,
+   *::after {
+     box-sizing: border-box;
+   }
 
   /***************************************************************************
    *                                                                         *

package/theming/base/_elder-component-themes.scss

@@ -0,0 +1,21 @@
+@use '../components/elder-chip-theme' as elder-chip;
+@use '../components/elder-table-theme.scss' as elder-table;
+@use '../components/elder-nav-theme' as elder-nav;
+@use '../components/elder-card-stack-theme.scss' as elder-card-stack;
+@use '../components/elder-select-theme' as elder-select;
+@use '../components/elder-multi-select-chips-theme'
+  as elder-multi-select-chips;
+@use '../components/elder-multi-select-chip-options-theme'
+  as elder-multi-select-chip-options;
+@use '../components/elder-filter-chip-template-theme' as elder-filter-chip-template;
+
+@mixin theme($theme) {
+  @include elder-chip.theme($theme);
+  @include elder-table.theme($theme);
+  @include elder-nav.theme($theme);
+  @include elder-card-stack.theme($theme);
+  @include elder-select.theme($theme);
+  @include elder-multi-select-chips.theme($theme);
+  @include elder-multi-select-chip-options.theme($theme);
+  @include elder-filter-chip-template.theme($theme);
+}

package/theming/{style-tweaks/_elder-style-fixes.scss → base/_elder-fixes-base.scss}

@@ -1,8 +1,8 @@
 @use '@angular/material' as mat;
-@use './elder-style-tweak-mixins' as mixins;
+@use './elder-base-mixins' as mixins;
 @use 'sass:map';
 
-@mixin elder-style-fixes($theme) {
+@mixin elder-fixes-base($theme) {
   @include _ng-style-fixes;
   @include _mat-style-fixes($theme);
   @include _mat3-fixes($theme);
@@ -128,13 +128,6 @@
     background-color: var(--md-sys-color-surface-container);
   }
 
-  .legacy-layout-card {
-    background-color: var(--mdc-elevated-card-container-color);
-    border-radius: var(--elder-border-radius-sm);
-    box-shadow: var(--mdc-elevated-card-container-elevation, var(--mat-sys-level1));
-    overflow: hidden; // this might cause issues, but is probably correct..
-  }
-
   .elder-card-title {
     padding-bottom: 0 !important;
     margin-bottom: 6px !important;
@@ -177,7 +170,14 @@
     }
   }
 
+  &.elder-light-theme {
+    .mat-toolbar.mat-primary .mat-mdc-input-element::placeholder {
+      color: var(--md-sys-color-inverse-on-surface) !important; // fix placeholder color
+    }
+  }
+
   &.elder-dark-theme {
+    .mat-toolbar,
     .mat-toolbar.mat-primary,
     .mat-toolbar.mat-accent {
       background-color: var(--elder-dark-gray) !important;
@@ -286,10 +286,6 @@
   }
 
   // fix
-  .elder-pane .legacy-layout-card {
-    border-radius: 0 !important;
-  }
-
   .mat-mdc-card,
   .mat-mdc-card-outlined {
     // set normal mat-cards back to m2 border-radius
@@ -297,18 +293,18 @@
   }
 
   // round input fields
-  &.deactivated {
-    elder-search-box .elder-search-box-field,
-    .mat-toolbar .mat-mdc-form-field {
-      background-color: var(--md-sys-color-surface-container-low);
-      border-radius: 24px !important;
-
-      // remove border from notch piece on input fields
-      .mat-mdc-notch-piece {
-        border-width: 0 !important;
-      }
-    }
-  }
+  // &.deactivated {
+  //   elder-search-box .elder-search-box-field,
+  //   .mat-toolbar .mat-mdc-form-field {
+  //     background-color: var(--md-sys-color-surface-container-low);
+  //     border-radius: 24px !important;
+
+  //     // remove border from notch piece on input fields
+  //     .mat-mdc-notch-piece {
+  //       border-width: 0 !important;
+  //     }
+  //   }
+  // }
 
   .mat-toolbar .mat-mdc-form-field {
     background-color: var(--elder-lightened-transparent-bg);
@@ -319,26 +315,12 @@
       --mdc-outlined-text-field-input-text-color: var(--md-sys-color-inverse-on-surface) !important;
       --mdc-outlined-text-field-caret-color: var(--md-sys-color-inverse-on-surface) !important;
     }
-    // * {
-    //   color: var(--md-sys-color-inverse-on-surface);
-    //   border-color: var(--md-sys-color-inverse-on-surface);
-    // }
   }
 
   .elder-pane {
     background-color: var(--md-sys-color-surface-container-lowest);
   }
 
-  &.elder-dark-theme {
-    // brighter dark mode nav
-    .elder-nav-list-full {
-      background-color: var(--md-sys-color-surface-container-lowest) !important;
-    }
-    .nav-link-active {
-      color: var(--md-sys-color-primary) !important;
-    }
-  }
-
   /**************************************************************************
     Elder panel
   **************************************************************************/
@@ -374,9 +356,15 @@
     }
   }
 
-  &.elder-light-theme,
-  &.elder-dark-theme {
-    // TMP only for debugging
-    --mdc-linear-progress-track-color: green !important; // TODO REMOVE
+  &.elder-light-theme elder-data-transfer-aggregate .mdc-linear-progress__buffer-bar {
+    --mdc-linear-progress-track-color: var(--md-sys-color-tertiary-fixed);
   }
+  &.elder-dark-theme elder-data-transfer-aggregate .mdc-linear-progress__buffer-bar {
+    --mdc-linear-progress-track-color: var(--md-sys-color-tertiary-container);
+  }
+
+  // disable icon button overflow
+  // .mat-mdc-icon-button {
+  //   overflow: hidden;
+  // }
 }

package/theming/{style-tweaks/_elder-form.scss → base/_elder-form-base.scss}

@@ -1,8 +1,8 @@
-@use './elder-style-tweak-mixins' as mixins;
+@use './elder-base-mixins' as mixins;
 @use '@angular/material' as mat;
 @use 'sass:map';
 
-@mixin elder-form-styles($theme) {
+@mixin elder-form-base($theme) {
   $common-sizes: map.get($theme, elder, common-sizes);
   $form-field-density: map.get($theme, elder, density, form-field);
 
@@ -325,16 +325,19 @@
   .elder-round-form-field {
     border: none;
     border-radius: 24px;
-    background-color: var(--md-sys-color-surface-container-low);
+    background-color: var(--md-sys-color-surface-container);
+    cursor: text;
+    outline: var(--elder-round-form-field-outline);
 
     .mdc-notched-outline .mat-mdc-notch-piece {
       border: none !important;
     }
     &:hover {
-      outline: solid 1px var(--md-sys-color-primary-container);
+      background-color: var(--md-sys-color-surface-container-high);
     }
     &.mat-focused {
       outline: solid 1px var(--md-sys-color-primary);
+      background-color: var(--md-sys-color-surface-container-low);
     }
   }
 }

package/theming/base/_elder-m2-legacy-base.scss

@@ -0,0 +1,37 @@
+@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
+ */
+
+// Custom Color variants for m3. They can already be provided through
+// "mat.color-variants-backwards-compatibility()"
+// But can be customized in this mixin below:
+
+@mixin elder-m2-legacy-base($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);
+  // }
+
+  // // &.elder-light-theme {
+  // //   .mat-accent.mat-mdc-standard-chip {
+  // //     background-color: var(--md-sys-color-tertiary-fixed) !important;
+  // //   }
+  // // }
+}

package/theming/components/_elder-card-stack-theme.scss

@@ -0,0 +1,72 @@
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+  .card-stack {
+    //background-color: var(--md-sys-color-surface-container);
+    border-radius: var(--elder-border-radius-sm);
+    border: var(--elder-border-light);
+  }
+
+  .card-list.cdk-drop-list-dragging {
+    border: 2px dashed var(--md-sys-color-outline-variant);
+  }
+
+  .stack-header {
+    height: 62px;
+  }
+  
+  .card-container {
+    min-width: 120px;
+    min-height: 0;
+  }
+  
+  .card-list {
+    min-height: 100%;
+  }
+  
+  .card {
+    border-radius: var(--elder-border-radius-sm);
+    box-shadow: var(--mat-app-elevation-shadow-level-1);
+    cursor: move;
+    overflow: hidden;
+  }
+  .card.cdk-drag-disabled.clickable {
+    cursor: pointer;
+  }
+  .card.cdk-drag-disabled.unclickable {
+    cursor: default;
+  }
+  
+  .hoverme .hide {
+    visibility: hidden;
+  }
+  
+  .hoverme:hover .hide {
+    visibility: visible;
+  }
+  
+  .rotate {
+    transform: rotate(-90deg);
+  }
+  
+  .scrollable {
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  .noselect {
+    user-select: none;
+  }
+  
+  .cdk-drag-placeholder {
+    opacity: 0;
+  }
+  
+  .cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+  
+  .card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+}

package/theming/components/_elder-chip-theme.scss

@@ -0,0 +1,239 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../abstracts/elder-scss-variables' as config;
+
+$colorStateNone: var(--md-sys-color-surface-variant);
+$colorStateOpen: var(--md-sys-color-surface-variant);
+
+$colorStateInProgress: var(--elder-chip-color-state-in-progress);
+$colorStateCompleted: var(--elder-chip-color-state-completed);
+$colorStateWarn: var(--elder-chip-color-state-warn);
+$colorStateError: var(--elder-chip-color-state-error);
+$colorStateOther: var(--elder-chip-color-state-other);
+
+$level-low: $colorStateCompleted;
+$level-medium: $colorStateInProgress;
+$level-high: $colorStateWarn;
+$level-critical: $colorStateError;
+
+
+// darkend light colors
+// $colorStateCompletedLightContent: config.$chip-colors-dark.state-in-progress;
+$colorStateNoneLightContent: map-get(config.$chip-colors-dark, state-none);
+$colorStateOpenLightContent: map-get(config.$chip-colors-dark, state-open);
+$colorStateInProgressLightContent: map-get(config.$chip-colors-dark, state-in-progress);
+$colorStateCompletedLightContent: map-get(config.$chip-colors-dark, state-completed);
+$colorStateWarnLightContent: map-get(config.$chip-colors-dark, state-warn);
+$colorStateErrorLightContent: map-get(config.$chip-colors-dark, state-error);
+$colorStateOtherLightContent: map-get(config.$chip-colors-dark, state-other);
+
+$levelLowLightContent: $colorStateCompletedLightContent;
+$levelMediumLightContent: $colorStateInProgressLightContent;
+$levelHighLightContent: $colorStateWarnLightContent;
+$levelCriticalLightContent: $colorStateErrorLightContent;
+
+@mixin theme($config-or-theme) {
+  //@include elder-m2-legacy-base($config-or-theme);
+
+  .mat-mdc-chip.mat-mdc-chip {
+    &.elder-chip-state-in-progress,
+    &.state-in-progress {
+      background-color: $colorStateInProgress;
+    }
+
+    &.elder-chip-state-none,
+    &.none {
+      background-color: $colorStateNone;
+    }
+
+    &.elder-chip-state-open,
+    &.state-open {
+      background-color: $colorStateOpen;
+    }
+
+    &.elder-chip-state-in-progress,
+    &.state-in-progress {
+      background-color: $colorStateInProgress;
+    }
+
+    &.elder-chip-state-completed,
+    &.state-completed {
+      background-color: $colorStateCompleted;
+    }
+
+    &.elder-chip-state-warn,
+    &.state-warn {
+      background-color: $colorStateWarn;
+    }
+
+    &.elder-chip-state-error,
+    &.state-error {
+      background-color: $colorStateError;
+    }
+
+    &.elder-chip-state-other,
+    &.state-other {
+      background-color: $colorStateOther;
+    }
+
+    // ---
+
+    &.elder-chip-level-low,
+    &.level-low {
+      background-color: $level-low;
+    }
+    &.elder-chip-level-medium,
+    &.level-medium {
+      background-color: $level-medium;
+    }
+    &.elder-chip-level-high,
+    &.level-high {
+      background-color: $level-high;
+    }
+    &.elder-chip-level-critical,
+    &.level-critical {
+      background-color: $level-critical;
+    }
+  }
+
+  // Customize the entire app. Change :root to your selector if you want to scope the styles.
+  
+  &.elder-light-theme .mat-mdc-chip.mat-mdc-chip {
+    &.elder-chip-state-none,
+    &.none {
+      @include chip-content-color-variant(rgba(0,0,0,0.6));
+    }
+
+    &.elder-chip-state-open,
+    &.state-open {
+      @include chip-content-color-variant(rgba(0,0,0,0.6));
+    }
+
+    &.elder-chip-state-in-progress,
+    &.state-in-progress {
+      @include chip-content-color-variant($colorStateInProgressLightContent);
+    }
+
+    &.elder-chip-state-completed,
+    &.state-completed {
+      @include chip-content-color-variant($colorStateCompletedLightContent);
+    }
+
+    &.elder-chip-state-warn,
+    &.state-warn {
+      @include chip-content-color-variant($colorStateWarnLightContent);
+    }
+
+    &.elder-chip-state-error,
+    &.state-error {
+      @include chip-content-color-variant($colorStateErrorLightContent);
+    }
+
+    &.elder-chip-state-other,
+    &.state-other {
+      @include chip-content-color-variant($colorStateOtherLightContent);
+    }
+
+    // ---
+
+    &.elder-chip-level-low,
+    &.level-low {
+      @include chip-content-color-variant($levelLowLightContent);
+    }
+    &.elder-chip-level-medium,
+    &.level-medium {
+      @include chip-content-color-variant($levelMediumLightContent);
+    }
+    &.elder-chip-level-high,
+    &.level-high {
+      @include chip-content-color-variant($levelHighLightContent);
+    }
+    &.elder-chip-level-critical,
+    &.level-critical {
+      @include chip-content-color-variant($levelCriticalLightContent);
+    }
+  }
+
+  &.elder-light-theme {
+    .elder-chip-state-in-progress,
+    .elder-chip-state-none,
+    .elder-chip-state-open,
+    .elder-chip-state-in-progress,
+    .elder-chip-state-completed,
+    .elder-chip-state-warn,
+    .elder-chip-state-error,
+    .elder-chip-state-other,
+    .elder-chip-level-low,
+    .elder-chip-level-medium,
+    .elder-chip-level-high,
+    .elder-chip-level-critical {
+      @include mat.chips-overrides(
+        (
+          outline-color: rgba(0,0,0,0.3),
+          label-text-color: rgba(0,0,0,0.5),
+          /*
+        outline-color: orange,
+        disabled-outline-color: red,
+        container-shape-radius
+        with-avatar-avatar-shape-radius
+        with-avatar-avatar-size
+        with-icon-icon-size
+        outline-width
+        outline-color
+        disabled-outline-color
+        focus-outline-color
+        hover-state-layer-opacity
+        with-avatar-disabled-avatar-opacity
+        flat-selected-outline-width
+        selected-hover-state-layer-opacity
+        with-trailing-icon-disabled-trailing-icon-opacity
+        with-icon-disabled-icon-opacity
+        disabled-label-text-color
+        elevated-container-color
+        elevated-selected-container-color
+        elevated-disabled-container-color
+        flat-disabled-selected-container-color
+        focus-state-layer-color
+        hover-state-layer-color
+        selected-hover-state-layer-color
+        focus-state-layer-opacity
+        selected-focus-state-layer-color
+        selected-focus-state-layer-opacity
+        label-text-color
+        selected-label-text-color
+        with-icon-icon-color
+        with-icon-disabled-icon-color
+        with-icon-selected-icon-color
+        with-trailing-icon-disabled-trailing-icon-color
+        with-trailing-icon-trailing-icon-color
+        label-text-font
+        label-text-line-height
+        label-text-size
+        label-text-tracking
+        label-text-weight
+        container-height
+        disabled-container-opacity
+        trailing-action-opacity
+        trailing-action-focus-opacity
+        trailing-action-state-layer-color
+        selected-trailing-action-state-layer-color
+        trailing-action-hover-state-layer-opacity
+        trailing-action-focus-state-layer-opacity
+        selected-disabled-trailing-icon-color
+        selected-trailing-icon-color
+        */
+        )
+      );
+    }
+  }
+}
+
+@mixin chip-content-color-variant($color) {
+  @include mat.chips-overrides(
+    (
+      outline-color: $color,
+      label-text-color: $color,
+      with-icon-icon-color: $color,
+    )
+  );
+}