@elderbyte/ngx-starter 15.3.0 → 15.3.2

package/lib/components/chips/elder-chip-label.directive.d.ts

@@ -1,7 +1,7 @@
 import { MatChip } from '@angular/material/chips';
 import { ThemePalette } from '@angular/material/core';
 import * as i0 from "@angular/core";
-export declare type StateColor = 'none' | 'open' | 'inProgress' | 'completed' | 'warn' | 'error' | 'other';
+export declare type ElderStateColor = 'none' | 'open' | 'inProgress' | 'completed' | 'warn' | 'error' | 'other';
 export declare type ElderChipAppearance = 'md3' | 'legacy';
 export declare class ElderChipLabelDirective {
     private readonly matChip;
@@ -12,7 +12,7 @@ export declare class ElderChipLabelDirective {
      **************************************************************************/
     private readonly baseClass;
     themeColor: ThemePalette;
-    stateColor: StateColor;
+    stateColor: ElderStateColor;
     appearance: ElderChipAppearance;
     /***************************************************************************
      *                                                                         *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "15.3.0",
+  "version": "15.3.2",
   "peerDependencies": {
     "@angular/core": "^15.0.0 || ^16.0.0",
     "@angular/common": "^15.0.0 || ^16.0.0",

package/theming/_elder-chip-theme.scss

@@ -19,28 +19,19 @@ $colorStateOther: rgb(121, 73, 252);
   $color-config: mat.get-color-config($config-or-theme);
   $is-dark-theme: map.get($color-config, is-dark);
 
-  // override state colors for cases where base color needs adjustment for either dark or light theme
-  //$colorStateInProgress: mix(black, $colorStateInProgress, if($is-dark-theme, 0%, 30%));
-  //$colorStateWarn: mix(black, $colorStateWarn, if($is-dark-theme, 0%, 30%));
-  //$colorStateWarn: mat-comat-color($primary, lighter);
-
-  .mat-mdc-chip.elderChipLabel {
+  .mat-mdc-chip.elder-chip-label {
 
     &.md3 {
       border-style: solid;
       border-width: 1px;
     }
 
-    &.colorPrimary {
+    &.color-primary {
       &.legacy {
         background-color: mat.get-color-from-palette($primary, default);
         .mat-mdc-chip-action-label,
         .mat-mdc-chip-avatar {
-          color: if(
-              $is-dark-theme,
-              mdc-theme-color.prop-value(text-primary-on-light),
-              mdc-theme-color.prop-value(text-primary-on-dark)
-          );
+          color: mat.get-color-from-palette($primary, default-contrast);
         }
       }
       &.md3 {
@@ -53,16 +44,12 @@ $colorStateOther: rgb(121, 73, 252);
       }
     }
 
-    &.colorAccent {
+    &.color-accent {
       &.legacy {
         background-color: mat.get-color-from-palette($accent, default);
         .mat-mdc-chip-action-label,
         .mat-mdc-chip-avatar {
-          color: if(
-              $is-dark-theme,
-              mdc-theme-color.prop-value(text-primary-on-light),
-              mdc-theme-color.prop-value(text-primary-on-dark)
-          );
+          color: mat.get-color-from-palette($accent, default-contrast);
         }
       }
       &.md3 {
@@ -70,22 +57,22 @@ $colorStateOther: rgb(121, 73, 252);
         border-color: mat.get-color-from-palette($accent);
         .mat-mdc-chip-action-label,
         .mat-mdc-chip-avatar {
-          color: mat.get-color-from-palette($accent);
+          color: if(
+              $is-dark-theme,
+              mat.get-color-from-palette($accent),
+              mat.get-color-from-palette($accent, 700) // make color a little darker in case of light-mode
+          );
         }
       }
 
     }
 
-    &.colorWarn {
+    &.color-warn {
       &.legacy {
         background-color: mat.get-color-from-palette($warn, default);
         .mat-mdc-chip-action-label,
         .mat-mdc-chip-avatar {
-          color: if(
-              $is-dark-theme,
-              mdc-theme-color.prop-value(text-primary-on-light),
-              mdc-theme-color.prop-value(text-primary-on-dark)
-          );
+          color: mat.get-color-from-palette($warn, default-contrast);
         }
       }
       &.md3 {
@@ -98,12 +85,12 @@ $colorStateOther: rgb(121, 73, 252);
       }
     }
 
-    &.stateNone {
+    &.state-none {
       background-color: rgba($colorStateNone, 0.2);
       border-color: $colorStateNone;
     }
 
-    &.stateOpen {
+    &.state-open {
       background-color: rgba($colorStateOpen, 0.2);
       border-color: $colorStateOpen;
       .mat-mdc-chip-avatar {
@@ -111,7 +98,7 @@ $colorStateOther: rgb(121, 73, 252);
       }
     }
 
-    &.stateInProgress {
+    &.state-in-progress {
       background-color: rgba($colorStateInProgress, 0.2);
       border-color: $colorStateInProgress;
       .mat-mdc-chip-action-label,
@@ -120,7 +107,7 @@ $colorStateOther: rgb(121, 73, 252);
       }
     }
 
-    &.stateCompleted {
+    &.state-completed {
       background-color: rgba($colorStateCompleted, 0.2);
       border-color: $colorStateCompleted;
       .mat-mdc-chip-action-label,
@@ -129,7 +116,7 @@ $colorStateOther: rgb(121, 73, 252);
       }
     }
 
-    &.stateWarn {
+    &.state-warn {
       background-color: rgba($colorStateWarn, 0.2);
       border-color: $colorStateWarn;
       .mat-mdc-chip-action-label,
@@ -138,7 +125,7 @@ $colorStateOther: rgb(121, 73, 252);
       }
     }
 
-    &.stateError {
+    &.state-error {
       background-color: rgba($colorStateError, 0.2);
       border-color: $colorStateError;
       .mat-mdc-chip-action-label,
@@ -147,7 +134,7 @@ $colorStateOther: rgb(121, 73, 252);
       }
     }
 
-    &.stateOther {
+    &.state-other {
       background-color: rgba($colorStateOther, 0.2);
       border-color: $colorStateOther;
       .mat-mdc-chip-action-label,