@elderbyte/ngx-starter 19.1.0-beta.7 → 19.1.0-beta.9

package/theming/{style-tweaks/_elder-color-variants.scss → base/_elder-m2-legacy-base.scss}

@@ -13,7 +13,7 @@
 // "mat.color-variants-backwards-compatibility()"
 // But can be customized in this mixin below:
 
-@mixin elder-color-variants($theme) {
+@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);
@@ -28,4 +28,10 @@
   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-chip-theme.scss

@@ -0,0 +1,158 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../abstracts/elder-scss-variables' as config;
+
+$colorStateNone: var(--elder-chip-color-state-none);
+$colorStateOpen: var(--elder-chip-color-state-open);
+
+$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;
+
+@mixin theme($config-or-theme) {
+  .mat-mdc-chip.mat-mdc-chip {
+    --mdc-chip-elevated-container-color: rgba(143, 143, 143, 0.2);
+    background-color: var(--mdc-chip-elevated-container-color);
+
+    &.elder-chip-color-primary,
+    &.color-primary {
+      background-color: var(--md-sys-color-primary-container);
+    }
+
+    &.elder-chip-color-primary,
+    &.color-primary {
+      @include _theme_color_chip(
+        var(--md-sys-color-primary-container),
+        var(--md-sys-color-primary),
+        var(--md-sys-color-on-primary)
+      );
+    }
+
+    &.elder-chip-color-accent,
+    &.elder-chip-color-tertiary,
+    &.color-accent {
+      @include _theme_color_chip(
+        var(--md-sys-color-tertiary-container),
+        var(--md-sys-color-tertiary),
+        var(--md-sys-color-on-tertiary)
+      );
+    }
+
+    &.elder-chip-color-warn,
+    &.color-warn {
+      @include _theme_color_chip(
+        var(--md-sys-color-error-container),
+        var(--md-sys-color-error),
+        var(--md-sys-color-on-error)
+      );
+    }
+
+    &.elder-chip-state-none,
+    &.none {
+      @include _outlined-label-chip($colorStateNone);
+    }
+
+    &.elder-chip-state-open,
+    &.state-open {
+      @include _outlined-label-chip($colorStateOpen);
+    }
+
+    &.elder-chip-state-in-progress,
+    &.state-in-progress {
+      @include _outlined-label-chip($colorStateInProgress);
+    }
+
+    &.elder-chip-state-completed,
+    &.state-completed {
+      @include _outlined-label-chip($colorStateCompleted);
+    }
+
+    &.elder-chip-state-warn,
+    &.state-warn {
+      @include _outlined-label-chip($colorStateWarn);
+    }
+
+    &.elder-chip-state-error,
+    &.state-error {
+      @include _outlined-label-chip($colorStateError);
+    }
+
+    &.elder-chip-state-other,
+    &.state-other {
+      @include _outlined-label-chip($colorStateOther);
+    }
+
+    // ---
+
+    &.elder-chip-level-low,
+    &.level-low {
+      @include _outlined-label-chip($level-low);
+    }
+    &.elder-chip-level-medium,
+    &.level-medium {
+      @include _outlined-label-chip($level-medium);
+    }
+    &.elder-chip-level-high,
+    &.level-high {
+      @include _outlined-label-chip($level-high);
+    }
+    &.elder-chip-level-critical,
+    &.level-critical {
+      @include _outlined-label-chip($level-critical);
+    }
+
+    // &.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 {
+    //   color: red !important;
+    //   .mat-mdc-chip-action-label,
+    //   .mat-mdc-chip-avatar {
+    //     color: red !important;
+    //   }
+    // }
+  }
+}
+
+@mixin _theme_color_chip($color1, $color2, $color3) {
+  &.legacy {
+    background-color: $color2;
+    .mat-mdc-chip-action-label,
+    .mat-mdc-chip-avatar,
+    .mdc-evolution-chip__checkmark {
+      color: $color3;
+    }
+  }
+  &.md3 {
+    background-color: $color1;
+    border-color: $color2;
+    .mat-mdc-chip-action-label,
+    .mat-mdc-chip-avatar,
+    .mdc-evolution-chip__checkmark {
+      //color: $color2;
+    }
+  }
+}
+
+@mixin _outlined-label-chip($color1) {
+  background-color: $color1;
+  // border-color: $color1;
+  // .mat-mdc-chip-action-label,
+  // .mat-mdc-chip-avatar {
+  //   color: $color1;
+  // }
+}

package/theming/{utility-classes/_elder-color-helpers.scss → utilities/_elder-color-utils.scss}

@@ -1,4 +1,4 @@
-@mixin elder-color-helpers() {
+@mixin elder-color-utils() {
   $color-variables: (
     'background': var(--md-sys-color-background),
     'error': var(--md-sys-color-error),
@@ -69,13 +69,6 @@
     }
   }
 
-  // border colors
-  @each $name, $value in $color-variables {
-    .elder-border-#{$name} {
-      border-color: #{$value};
-    }
-  }
-
   .elder-pane-bg-color {
     background-color: var(--elder-pane-bg-color);
   }

package/theming/{utility-classes/_elder-common-helpers.scss → utilities/_elder-common-utils.scss}

@@ -1,12 +1,9 @@
-@mixin elder-common-helpers() {
+@mixin elder-common-utils() {
     .border-none {
         border: none;
     }
     .display-none {
-        display: none; // unfortunately .hidden is already used
-    }
-    .p-pane {
-        padding: var(--elder-pane-padding);
+        display: none;
     }
     .text-center {
         text-align: center;

package/theming/{utility-classes/_elder-flex-layout.scss → utilities/_elder-flex-layout-utils.scss}

@@ -1,4 +1,4 @@
-@use '../system/elder-config' as settings;
+@use '../abstracts/elder-scss-variables' as settings;
 @use 'sass:map';
 
 /***************************************************************************
@@ -33,7 +33,7 @@ $media: (
   flex: 1 1 100%;
 }
 
-@mixin elder-flex-layout($theme) {
+@mixin elder-flex-layout-utils($theme) {
   $common-sizes: map.get($theme, elder, common-sizes);
 
   /***************************************************************************

package/theming/{utility-classes/_elder-layout-system.scss → utilities/_elder-layout-utils.scss}

@@ -1,7 +1,7 @@
 @use '@angular/material' as mat;
 @use 'sass:map';
 
-@mixin elder-layout-system($theme) {
+@mixin elder-layout-utils($theme) {
   $common-sizes: map.get($theme, elder, common-sizes);
 
   /***************************************************************************
@@ -23,6 +23,10 @@
    *                                                                         *
    **************************************************************************/
 
+  .p-pane {
+    padding: var(--elder-pane-padding);
+  }
+
   .p-xs {
     padding: $xs;
   }
@@ -248,34 +252,25 @@
     margin-right: auto;
   }
 
-  .m-0 {
-    margin: 0;
-  }
-
-  .mt-0 {
-    margin-top: 0;
+  .my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
   }
 
-  .mb-0 {
-    margin-bottom: 0;
+  .mt-auto {
+    margin-top: auto;
   }
 
-  .mr-0 {
-    margin-right: 0;
+  .mb-auto {
+    margin-bottom: auto;
   }
 
-  .ml-0 {
-    margin-left: 0;
-  }
-
-  .mx-0 {
-    margin-left: 0;
-    margin-right: 0;
+  .mr-auto {
+    margin-right: auto;
   }
 
-  .my-0 {
-    margin-top: 0;
-    margin-bottom: 0;
+  .ml-auto {
+    margin-left: auto;
   }
 
   .m-xs {
@@ -458,6 +453,36 @@
     margin-bottom: $xxl;
   }
 
+  .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;
+  }
+
   /***************************************************************************
    *                                                                         *
    * Layout Widths                                                           *

package/theming/{utility-classes/_elder-typography-helpers.scss → utilities/_elder-typography-utils.scss}

@@ -1,4 +1,4 @@
-@mixin elder-typography-helpers() {
+@mixin elder-typography-utils() {
     .text-display-large {
         font: var(--md-sys-typescale-display-large);
     }

package/src/lib/components/chips/_elder-chip-theme.scss

@@ -1,129 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-$colorStateNone: rgb(143, 143, 143);
-$colorStateOpen: rgb(199, 199, 199);
-
-$colorStateInProgress: rgb(33, 150, 243);
-$colorStateCompleted: rgb(4, 170, 109);
-$colorStateWarn: rgb(255, 145, 0);
-$colorStateError: rgb(255, 0, 0);
-$colorStateOther: rgb(121, 73, 252);
-
-$level-low: rgb(4, 170, 109);
-$level-medium: rgb(33, 150, 243);
-$level-high: rgb(255, 145, 0);
-$level-critical: rgb(255, 0, 0);
-
-@mixin theme($config-or-theme) {
-  .mat-mdc-chip.elder-chip-label {
-    --mdc-chip-elevated-container-color: rgba(143, 143, 143, 0.2);
-    background-color: var(--mdc-chip-elevated-container-color);
-
-    &.color-primary {
-      background-color: var(--md-sys-color-primary-container);
-    }
-
-    &.color-primary {
-      @include _theme_color_chip(
-        var(--md-sys-color-primary-container),
-        var(--md-sys-color-primary),
-        var(--md-sys-color-on-primary)
-      );
-    }
-
-    &.color-accent {
-      @include _theme_color_chip(
-        var(--md-sys-color-tertiary-container),
-        var(--md-sys-color-tertiary),
-        var(--md-sys-color-on-tertiary)
-      );
-    }
-
-    &.color-warn {
-      @include _theme_color_chip(
-        var(--md-sys-color-error-container),
-        var(--md-sys-color-error),
-        var(--md-sys-color-on-error)
-      );
-    }
-
-    &.none {
-      background-color: rgba($colorStateNone, 0.2);
-      border-color: $colorStateNone;
-      background-color: var(--md-sys-color-surface-variant);
-    }
-
-    &.state-open {
-      background-color: rgba($colorStateOpen, 0.2);
-      border-color: var(--md-sys-color-surface-variant);
-      .mat-mdc-chip-avatar {
-        color: var(--md-sys-color-surface-variant);
-      }
-      background-color: var(--md-sys-color-surface-container);
-    }
-
-    &.state-in-progress {
-      --mdc-chip-elevated-container-color: var(--md-sys-color-primary-container);
-      --mdc-chip-label-text-color: var(--md-sys-color-on-primary-container);
-    }
-    &.state-completed {
-      --mdc-chip-elevated-container-color: var(--mdc-chip-elevated-selected-container-color);
-      --mdc-chip-label-text-color: var(--mdc-chip-elevated-on-container-color);
-    }
-    &.state-warn {
-      --mdc-chip-elevated-container-color: var(--md-sys-color-tertiary-container);
-      --mdc-chip-label-text-color: var(--md-sys-color-tertiary-on-container);
-    }
-    &.state-error {
-      --mdc-chip-elevated-container-color: var(--md-sys-color-error-container);
-      --mdc-chip-label-text-color: var(--md-sys-color-error-on-container);
-    }
-    &.state-other {
-      --mdc-chip-elevated-container-color: var(--md-sys-color-primary-fixed-dim);
-      --mdc-chip-label-text-color: var(--md-sys-color-on-primary-fixed);
-    }
-
-    &.level-low {
-      @include _outlined-label-chip($level-low);
-    }
-    &.level-medium {
-      @include _outlined-label-chip($level-medium);
-    }
-    &.level-high {
-      @include _outlined-label-chip($level-high);
-    }
-    &.level-critical {
-      @include _outlined-label-chip($level-critical);
-    }
-  }
-}
-
-@mixin _theme_color_chip($color1, $color2, $color3) {
-  &.legacy {
-    background-color: $color2;
-    .mat-mdc-chip-action-label,
-    .mat-mdc-chip-avatar,
-    .mdc-evolution-chip__checkmark {
-      color: $color3;
-    }
-  }
-  &.md3 {
-    background-color: $color1;
-    border-color: $color2;
-    .mat-mdc-chip-action-label,
-    .mat-mdc-chip-avatar,
-    .mdc-evolution-chip__checkmark {
-      //color: $color2;
-    }
-  }
-}
-
-@mixin _outlined-label-chip($color1) {
-  background-color: rgba($color1, 0.2);
-  border-color: $color1;
-  .mat-mdc-chip-action-label,
-  .mat-mdc-chip-avatar {
-    color: $color1;
-  }
-}

package/theming/style-tweaks/_elder-reset.scss

@@ -1,13 +0,0 @@
-/***************************************************************************
- *                                                                         *
- * CSS reset                                                               *
- *                                                                         *
- **************************************************************************/
-
-@mixin elder-reset() {
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-}

package/theming/system/_elder-design-tokens.scss

@@ -1,136 +0,0 @@
-@use 'sass:map';
-@use './elder-config' as config;
-
-@mixin elder-design-tokens() {
-  @include elder-badge-sizing();
-
-  // bg color
-  --md-sys-color-background: var(--md-sys-color-surface-container-highest);
-  --mat-app-background-color: var(--md-sys-color-background);
-
-  // 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
-  --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-sidenav-container-elevation-shadow: var(--mat-app-elevation-shadow-level-16);
-  --mat-sidenav-container-background-color: var(--md-sys-color-surface-container);
-
-  // 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);
-  --elder-scrollbar-width: 8px;
-  --elder-lightened-transparent-bg: rgba(255, 255, 255, 0.15);
-
-  // elder pane
-  --elder-pane-padding: #{map.get(config.$sizes, sm)};
-  --elder-pane-gap: #{map.get(config.$sizes, sm)};
-  --elder-pane-border-radius: var(
-    --mdc-outlined-card-container-shape,
-    var(--mat-app-corner-medium)
-  );
-  --elder-pane-bg-color: var(--md-sys-color-surface-container-lowest);
-
-  // card header
-  --elder-card-header-padding: 15px 15px 5px 15px;
-
-  // cards, table etc 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(--md-sys-color-surface-container-lowest);
-  --mat-paginator-container-background-color: var(--mat-table-background-color);
-  --elder-grid-background-color: var(--mat-table-background-color);
-
-  // elder toast messages
-  --elder-toast-message-color-title-default: var(--md-sys-color-inverse-on-surface);
-  --elder-toast-message-color-title-warn: var(--md-sys-color-inverse-on-surface);
-  --elder-toast-message-color-title-error: var(--md-sys-color-inverse-on-surface);
-
-  // main nav top left button color
-  --elder-toolbar-main-nav-button-color: var(--md-sys-color-on-primary);
-  --elder-toolbar-main-nav-button-container-bg-color: var(--md-sys-color-primary);
-
-  // custom colors
-  --elder-blue: rgb(11, 40, 79);
-  --elder-gold: rgb(182, 159, 106);
-  --elder-gold-darkest: #423d32;
-  --elder-gold-semi-dark: #7f7054;
-
-  --elder-color-highlight: var(--md-sys-color-primary-container);
-  --elder-color-highlight-dim: rgb(232, 239, 255);
-
-  // missing md3 color
-  --md-sys-color-on-primary-fixed-dim: var(--md-sys-color-on-surface);
-
-  // dialog
-  --elder-dialog-panel-bg-color: var(md-sys-color-surface-container-low);
-
-  // xy
-  --elder-round-form-field-outline: none;
-
-  &.elder-dark-theme {
-    --elder-dialog-panel-bg-color: var(--md-sys-color-surface-container);
-  }
-
-  // light theme overwrites
-  &.elder-light-theme {
-    --md-sys-color-primary: var(--elder-blue);
-    --md-sys-color-tertiary: var(--elder-gold);
-  }
-
-  // dark theme overwrites
-  &.elder-dark-theme {
-    --elder-round-form-field-outline: solid 1px var(--md-sys-color-outline);
-    --mat-sidenav-scrim-color: rgba(255, 255, 255, 0.4);
-    //--md-sys-color-primary-container: #d2cab4; // lighten up dark mode container color
-    --md-sys-color-primary-container: var(--elder-gold-semi-dark);
-    --md-sys-color-primary-fixed-dim: var(--elder-gold-darkest);
-    --elder-color-highlight-dim: var(--elder-gold-darkest);
-    --elder-color-highlight: var(--elder-gold-semi-dark);
-    --md-sys-color-tertiary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
-    --md-sys-color-on-primary-fixed-dim: var(--md-sys-color-on-surface);
-    --md-sys-color-tertiary-container: var(--md-sys-color-primary-container);
-    --md-sys-color-surface-container-highest: #191919;
-    --md-sys-color-surface-container-lowest: #262626;
-    --md-sys-color-error: #FF999F;
-    --md-sys-color-inverse-primary: var(--md-sys-color-primary-container);
-    --md-sys-color-surface-tint: var(--elder-gold-darkest);
-    --elder-dark-gray: var(--md-sys-color-surface-container);
-    --mdc-chip-outline-color: rgba(255, 255, 255, 0.3);
-
-
-
-    // dark mode specific colors
-    --elder-dark-mode-color-primary: var(--md-sys-color-primary);
-    --elder-dark-mode-color-on-primary: var(--md-sys-color-on-primary);
-    --elder-dark-mode-color-surface: var(--md-sys-color-surface);
-    --elder-dark-mode-color-on-surface: var(--md-sys-color-on-surface);
-  }
-}
-
-@mixin elder-badge-sizing() {
-  // Use legacy MAT 2 badge sizing
-  --mat-badge-container-size: unset;
-  --mat-badge-small-size-container-size: unset;
-  --mat-badge-large-size-container-size: unset;
-  --mat-badge-legacy-container-size: 22px;
-  --mat-badge-legacy-small-size-container-size: 16px;
-  --mat-badge-legacy-large-size-container-size: 28px;
-  --mat-badge-container-offset: -11px 0;
-  --mat-badge-small-size-container-offset: -8px 0;
-  --mat-badge-large-size-container-offset: -14px 0;
-  --mat-badge-container-overlap-offset: -11px;
-  --mat-badge-small-size-container-overlap-offset: -8px;
-  --mat-badge-large-size-container-overlap-offset: -14px;
-  --mat-badge-container-padding: 0;
-  --mat-badge-small-size-container-padding: 0;
-  --mat-badge-large-size-container-padding: 0;
-  --mat-badge-line-height: var(--mat-badge-legacy-container-size);
-  --mat-badge-small-size-line-height: var(--mat-badge-legacy-small-size-container-size);
-  --mat-badge-large-size-line-height: var(--mat-badge-legacy-large-size-container-size);
-}