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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "19.1.0-beta.19",
+  "version": "19.1.0-beta.20",
   "peerDependencies": {
     "@angular/core": "^18.0.0 || ^19.0.0",
     "@angular/common": "^18.0.0 || ^19.0.0",

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

@@ -16,6 +16,22 @@ $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);
 
@@ -81,10 +97,81 @@ $level-critical: $colorStateError;
   }
 
   // Customize the entire app. Change :root to your selector if you want to scope the styles.
-  & {
-    @include mat.chips-overrides(
-      (
-        /*
+  
+  &.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
@@ -135,7 +222,18 @@ $level-critical: $colorStateError;
         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,
+    )
+  );
+}