@elderbyte/ngx-starter 19.6.3 → 19.8.0

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

@@ -2,9 +2,11 @@
 @use 'sass:color';
 @use '@angular/material' as mat;
 @use '../abstracts/elder-scss-variables' as config;
+@use 'sass:string';
 
 @mixin theme($config-or-theme) {
   @include mat-chip-fixes();
+  @include chip-theme-palette-colors();
   @include chip-colors();
 
   .elder-chip-text {
@@ -97,107 +99,25 @@
   );
 }
 
-@mixin chip-colors {
-  $colorStateNone: var(--elder-chip-color-state-none);
-  // $colorStateNone: transparent;
-  $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;
-
-  // light theme elder progress chip colors
-  $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);
-
-  // map to level colors
-  $levelLowLightContent: $colorStateCompletedLightContent;
-  $levelMediumLightContent: $colorStateInProgressLightContent;
-  $levelHighLightContent: $colorStateWarnLightContent;
-  $levelCriticalLightContent: $colorStateErrorLightContent;
-
-  .mat-mdc-chip.mat-mdc-chip {
-    &.elder-chip-state-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;
-    }
-  }
-
+@mixin chip-theme-palette-colors {
   &.elder-light-theme .mat-mdc-chip.mat-mdc-chip {
     &.mat-mdc-chip-highlighted {
       $col: map.get(config.$palettes, primary, 30);
       @include standard-chip-content-color-variant($col);
     }
+
     &.color-primary,
     &[color='primary'] {
       $col: map.get(config.$palettes, primary, 30);
       @include standard-chip-content-color-variant($col);
     }
+
     &.color-accent,
     &[color='accent'] {
       $col: map.get(config.$palettes, tertiary, 40);
       @include standard-chip-content-color-variant($col);
     }
+
     &.color-warn,
     &[color='warn'] {
       $col: map.get(config.$palettes, error, 40);
@@ -215,89 +135,107 @@
       $col: map.get(config.$palettes, primary, 50);
       @include standard-chip-content-color-variant($col);
     }
+
     &.color-accent,
     &[color='accent'] {
       $col: map.get(config.$palettes, tertiary, 50);
       @include standard-chip-content-color-variant($col);
     }
+
     &.color-warn,
     &[color='warn'] {
       $col: map.get(config.$palettes, error, 50);
       @include standard-chip-content-color-variant($col);
     }
   }
+}
 
-  &.elder-light-theme .mat-mdc-chip.mat-mdc-chip {
-    &.elder-chip-state-none,
-    &.none {
-      @include chip-content-color-variant($colorStateNoneLightContent); // TODO
-      &.mat-mdc-chip-highlighted {
-        background-color: $colorStateNone;
-      }
-    }
+@mixin chip-colors {
+  $namedColors: ();
+  @each $key, $value in config.$named-colors {
+    $namedColors: map.set($namedColors, $key, $key);
+  }
 
-    &.elder-chip-state-open,
-    &.state-open {
-      @include chip-content-color-variant($colorStateOpenLightContent);
-    }
+  // State colors and light content colors
+  $states: (
+    none: 'white',
+    open: 'grey',
+    inProgress: 'blue',
+    completed: 'green',
+    warn: 'orange',
+    error: 'red',
+    other: 'purple',
+  );
 
-    &.elder-chip-state-in-progress,
-    &.state-in-progress {
-      @include chip-content-color-variant($colorStateInProgressLightContent);
-    }
+  // Level color mapping
+  $levels: (
+    low: 'green',
+    medium: 'blue',
+    high: 'orange',
+    critical: 'red',
+  );
 
-    &.elder-chip-state-completed,
-    &.state-completed {
-      @include chip-content-color-variant($colorStateCompletedLightContent);
+  // Apply background colors for states and levels
+  .mat-mdc-chip.elder-chip-label {
+    @each $state, $color in $states {
+      &.state-#{$state} {
+        background-color: var(--elder-named-color-#{$color});
+      }
     }
 
-    &.elder-chip-state-warn,
-    &.state-warn {
-      @include chip-content-color-variant($colorStateWarnLightContent);
+    @each $level, $color in $levels {
+      &.level-#{$level} {
+        background-color: var(--elder-named-color-#{$color});
+      }
     }
 
-    &.elder-chip-state-error,
-    &.state-error {
-      @include chip-content-color-variant($colorStateErrorLightContent);
+    @each $name, $color in $namedColors {
+      &.named-color-#{$name} {
+        background-color: var(--elder-named-color-#{$name});
+      }
     }
+  }
 
-    &.elder-chip-state-other,
-    &.state-other {
-      @include chip-content-color-variant($colorStateOtherLightContent);
+  // Light theme chip content color handling
+  &.elder-light-theme .mat-mdc-chip.elder-chip-label {
+    @each $state, $color in $states {
+      &.state-#{$state} {
+        $on-color: var(--elder-named-color-on-#{$color});
+        @include chip-content-color-variant($on-color);
+      }
     }
 
-    // level -------------
-
-    &.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);
+    @each $level, $color in $levels {
+      &.level-#{$level} {
+        $on-color: var(--elder-named-color-on-#{$color});
+        @include chip-content-color-variant($on-color);
+      }
     }
-    &.elder-chip-level-critical,
-    &.level-critical {
-      @include chip-content-color-variant($levelCriticalLightContent);
+
+    @each $name, $color in $namedColors {
+      &.named-color-#{$name} {
+        $on-color: var(--elder-named-color-on-#{$color});
+        @include chip-content-color-variant($on-color);
+      }
     }
   }
 }
 
-@mixin chip-content-color-variant($color, $inverse: false) {
-  $color-dark: color.adjust($color, $lightness: -12%);
-  @if $inverse {
-    $color-dark: color.adjust($color, $lightness: 12%);
-  }
+@mixin chip-content-color-variant($on-color) {
+  $on-color-disabled: string.unquote('color-mix(in srgb, #FFF 12%, #{$on-color})');
   @include mat.chips-overrides(
     (
-      outline-color: $color,
-      label-text-color: $color-dark,
-      with-icon-icon-color: $color-dark,
-      with-trailing-icon-trailing-icon-color: $color-dark,
+      outline-color: $on-color,
+      label-text-color: $on-color,
+      with-icon-icon-color: $on-color,
+      selected-trailing-icon-color: $on-color,
+      with-trailing-icon-trailing-icon-color: $on-color,
+
+      // disabled-outline-color: $color-disabled,
+      disabled-label-text-color: $on-color-disabled,
+      with-icon-disabled-icon-color: $on-color-disabled,
+      with-trailing-icon-disabled-trailing-icon-color: $on-color-disabled,
+      selected-disabled-trailing-icon-color: $on-color-disabled,
     )
   );
 }