@devopmaat/badaboom 1.2.3 → 1.3.2

package/lib/styles/_theme.scss

@@ -2,156 +2,73 @@
 @use '@angular/material' as mat;
 @use './core-theme' as bdb;
 
-@use '../common/alert/bdb-alert-m2-theme';
-@use '../common/boolean-display/bdb-boolean-display-m2-theme';
-@use '../common/field/bdb-field-m2-theme';
-@use '../application/common/query-input/bdb-query-input-m2-theme';
-@use '../application/common/search/bdb-search-m2-theme';
-@use '../application/common/table/bdb-table-m2-theme';
-@use '../common/button-m2-theme';
-@use '../common/icon-m2-theme';
+@use './material/badge-theme';
+@use './material/button-theme';
+@use './material/card-theme';
+@use './material/checkbox-theme';
+@use './material/chips-theme';
+@use './material/datepicker-theme';
+@use './material/fab-theme';
+@use './material/form-field-theme';
+@use './material/icon-button-theme';
+@use './material/icon-theme';
+@use './material/option-theme';
+@use './material/progress-bar-theme';
+@use './material/progress-spinner-theme';
+@use './material/radio-theme';
+@use './material/slide-toggle-theme';
+@use './material/slider-theme';
+@use './material/stepper-theme';
+@use './material/tabs-theme';
+@use './material/toolbar-theme';
 
-@use './material/badge-m3-theme';
-@use './material/button-m3-theme';
-@use './material/card-m3-theme';
-@use './material/checkbox-m3-theme';
-@use './material/chips-m3-theme';
-@use './material/datepicker-m3-theme';
-@use './material/fab-m3-theme';
-@use './material/form-field-m3-theme';
-@use './material/icon-m3-theme';
-@use './material/option-m3-theme';
-@use './material/progress-bar-m3-theme';
-@use './material/progress-spinner-m3-theme';
-@use './material/radio-m3-theme';
-@use './material/slide-toggle-m3-theme';
-@use './material/slider-m3-theme';
-@use './material/stepper-m3-theme';
-@use './material/tabs-m3-theme';
-@use './material/toolbar-m3-theme';
-
-@use '../application/common/query-input/bdb-query-input-m3-theme';
-@use '../application/common/table/bdb-table-m3-theme';
-@use '../common/alert/bdb-alert-m3-theme';
-@use '../common/boolean-display/bdb-boolean-display-m3-theme';
-@use '../common/field/bdb-field-m3-theme';
-@use '../common/collapse-row/collapse-row-theme';
-
-@function define-light-theme($mat-theme, $warn-palette, $danger-palette, $success-palette, $info-palette) {
-  @warn "Using Badaboom with Material 2 is deprecated";
-  @return map.deep-merge(
-    $mat-theme,
-    (
-      color: (
-        warn: $warn-palette,
-        danger: $danger-palette,
-        success: $success-palette,
-        info: $info-palette,
-      ),
-    )
-  );
-}
-
-@mixin all-component-m2-themes($bdb-theme) {
-  @warn "Using Badaboom with Material 2 is deprecated";
-  @include bdb-alert-m2-theme.theme($bdb-theme);
-  @include bdb-boolean-display-m2-theme.theme($bdb-theme);
-  @include bdb-field-m2-theme.theme($bdb-theme);
-  @include bdb-query-input-m2-theme.theme($bdb-theme);
-  @include bdb-search-m2-theme.theme($bdb-theme);
-  @include bdb-table-m2-theme.theme($bdb-theme);
-  @include button-m2-theme.theme($bdb-theme);
-  @include icon-m2-theme.theme($bdb-theme);
-}
-
-//Material 3
-
-@function define-theme($material-theme, $badaboom-palettes) {
-  @return map.deep-merge(
-    $material-theme,
-    (
-      color: $badaboom-palettes,
-    )
-  );
-}
+@use '../application/common/table/bdb-table-theme';
+@use '../common/alert/bdb-alert-theme';
+@use '../common/field/bdb-field-theme';
+@use '../common/collapse-row/bdb-collapse-row-theme';
 
 @mixin system-level-colors($bdb-theme) {
-  $palettes: map-get($bdb-theme, color);
+  $palettes: map.get($bdb-theme, color);
   @each $palette-name in bdb.$badaboom-palettes {
-    $palette: map-get($palettes, $palette-name);
+    $palette: map.get($palettes, $palette-name);
     & {
-      @if mat.get-theme-type($bdb-theme) == dark {
-        --sys-#{$palette-name}: #{map.get($palette, 80)};
-        --sys-on-#{$palette-name}: #{map.get($palette, 20)};
-        --sys-#{$palette-name}-container: #{map.get($palette, 30)};
-        --sys-on-#{$palette-name}-container: #{map.get($palette, 90)};
-      } @else {
-        --sys-#{$palette-name}: #{map.get($palette, 40)};
-        --sys-on-#{$palette-name}: #{map.get($palette, 100)};
-        --sys-#{$palette-name}-container: #{map.get($palette, 90)};
-        --sys-on-#{$palette-name}-container: #{map.get($palette, 10)};
-      }
+      --bdb-sys-#{$palette-name}: light-dark(#{map.get($palette, 40)}, #{map.get($palette, 80)});
+      --bdb-sys-on-#{$palette-name}: light-dark(#{map.get($palette, 100)}, #{map.get($palette, 20)});
+      --bdb-sys-#{$palette-name}-container: light-dark(#{map.get($palette, 90)}, #{map.get($palette, 30)});
+      --bdb-sys-on-#{$palette-name}-container: light-dark(#{map.get($palette, 10)}, #{map.get($palette, 90)});
     }
   }
 }
 
-@mixin all-component-themes($bdb-theme) {
-  @include badge-m3-theme.theme($bdb-theme);
-  @include button-m3-theme.theme($bdb-theme);
-  @include card-m3-theme.theme($bdb-theme);
-  @include checkbox-m3-theme.theme($bdb-theme);
-  @include chips-m3-theme.theme($bdb-theme);
-  @include datepicker-m3-theme.theme($bdb-theme);
-  @include fab-m3-theme.theme($bdb-theme);
-  @include form-field-m3-theme.theme($bdb-theme);
-  @include icon-m3-theme.theme($bdb-theme);
-  @include option-m3-theme.theme($bdb-theme);
-  @include progress-bar-m3-theme.theme($bdb-theme);
-  @include progress-spinner-m3-theme.theme($bdb-theme);
-  @include radio-m3-theme.theme($bdb-theme);
-  @include slide-toggle-m3-theme.theme($bdb-theme);
-  @include slider-m3-theme.theme($bdb-theme);
-  @include stepper-m3-theme.theme($bdb-theme);
-  @include tabs-m3-theme.theme($bdb-theme);
-  @include toolbar-m3-theme.theme($bdb-theme);
-
-  @include bdb-table-m3-theme.theme($bdb-theme);
-  @include bdb-query-input-m3-theme.theme($bdb-theme);
+@mixin all-component-themes($mat-theme, $bdb-theme) {
+  @include badge-theme.theme($bdb-theme);
+  @include button-theme.theme($bdb-theme);
+  @include card-theme.theme($bdb-theme);
+  @include checkbox-theme.theme($bdb-theme);
+  @include chips-theme.theme($bdb-theme);
+  @include datepicker-theme.theme($bdb-theme);
+  @include fab-theme.theme($bdb-theme);
+  @include form-field-theme.theme($bdb-theme);
+  @include icon-button-theme.theme($bdb-theme);
+  @include icon-theme.theme($bdb-theme);
+  @include option-theme.theme($bdb-theme);
+  @include progress-bar-theme.theme($bdb-theme);
+  @include progress-spinner-theme.theme($bdb-theme);
+  @include radio-theme.theme($bdb-theme);
+  @include slide-toggle-theme.theme($bdb-theme);
+  @include slider-theme.theme($bdb-theme);
+  @include stepper-theme.theme($bdb-theme);
+  @include tabs-theme.theme($bdb-theme);
+  @include toolbar-theme.theme($bdb-theme);
 
-  @include bdb-alert-m3-theme.theme($bdb-theme);
-  @include bdb-boolean-display-m3-theme.theme($bdb-theme);
-  @include bdb-field-m3-theme.theme($bdb-theme);
-  @include collapse-row-theme.theme($bdb-theme);
+  @include bdb-alert-theme.theme($bdb-theme);
+  @include bdb-collapse-row-theme.theme($bdb-theme);
+  @include bdb-field-theme.theme($bdb-theme);
+  @include bdb-table-theme.theme($mat-theme, $bdb-theme);
 }
 
-@mixin all-component-colors($bdb-theme) {
-  @if mat.theme-has($bdb-theme, color) {
-    @include badge-m3-theme.color($bdb-theme);
-    @include button-m3-theme.color($bdb-theme);
-    @include card-m3-theme.color($bdb-theme);
-    @include checkbox-m3-theme.color($bdb-theme);
-    @include chips-m3-theme.color($bdb-theme);
-    @include datepicker-m3-theme.color($bdb-theme);
-    @include fab-m3-theme.color($bdb-theme);
-    @include form-field-m3-theme.color($bdb-theme);
-    @include icon-m3-theme.color($bdb-theme);
-    @include option-m3-theme.color($bdb-theme);
-    @include progress-bar-m3-theme.color($bdb-theme);
-    @include progress-spinner-m3-theme.color($bdb-theme);
-    @include radio-m3-theme.color($bdb-theme);
-    @include slide-toggle-m3-theme.color($bdb-theme);
-    @include slider-m3-theme.color($bdb-theme);
-    @include stepper-m3-theme.color($bdb-theme);
-    @include tabs-m3-theme.color($bdb-theme);
-    @include toolbar-m3-theme.color($bdb-theme);
-
-    @include bdb-table-m3-theme.color($bdb-theme);
-    @include bdb-query-input-m3-theme.color($bdb-theme);
-
-    @include bdb-alert-m3-theme.color($bdb-theme);
-    @include bdb-boolean-display-m3-theme.color($bdb-theme);
-    @include bdb-field-m3-theme.color($bdb-theme);
-    @include bdb-field-m3-theme.color($bdb-theme);
-    @include collapse-row-theme.color($bdb-theme);
-  }
+@mixin theme($mat-theme, $bdb-theme) {
+  @include mat.theme($mat-theme);
+  @include system-level-colors($bdb-theme);
+  @include all-component-themes($mat-theme, $bdb-theme);
 }

package/lib/styles/material/_badge-theme.scss

@@ -0,0 +1,46 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$palette-names {
+    $bg: bdb.palette-color($palette-name);
+    $fg: bdb.on-palette-color($palette-name);
+    .mat-badge.badge-#{$palette-name} {
+      @include mat.badge-overrides(
+        (
+          background-color: $bg,
+          text-color: $fg,
+          disabled-state-background-color: $bg,
+          disabled-state-text-color: $fg,
+        )
+      );
+    }
+
+    .mat-badge.badge-#{$palette-name}-container {
+      $bg: bdb.palette-color($palette-name, true);
+      $fg: bdb.on-palette-color($palette-name, true);
+      @include mat.badge-overrides(
+        (
+          background-color: $bg,
+          text-color: $fg,
+          disabled-state-background-color: $bg,
+          disabled-state-text-color: $fg,
+        )
+      );
+    }
+  }
+}
+
+@mixin typography($theme) {
+}
+
+@mixin theme($theme) {
+  @if mat.theme-has($theme, color) {
+    @include color($theme);
+  }
+
+  @if mat.theme-has($theme, typography) {
+    @include typography($theme);
+  }
+}

package/lib/styles/material/_button-theme.scss

@@ -0,0 +1,66 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$palette-names {
+    $bg: bdb.palette-color($palette-name);
+    $bg-container: bdb.palette-color($palette-name, true);
+    $fg: bdb.on-palette-color($palette-name);
+    $fg-container: bdb.on-palette-color($palette-name, true);
+
+    .mdc-button.#{$palette-name} {
+      @include mat.button-overrides(
+        (
+          filled-container-color: $bg,
+          filled-label-text-color: $fg,
+          filled-state-layer-color: $fg,
+          outlined-label-text-color: $bg,
+          outlined-state-layer-color: $bg,
+          protected-label-text-color: $bg,
+          protected-state-layer-color: $bg,
+          text-label-text-color: $bg,
+          text-state-layer-color: $bg,
+        )
+      );
+    }
+    .mdc-button.#{$palette-name}-container {
+      @include mat.button-overrides(
+        (
+          filled-container-color: $bg-container,
+          filled-label-text-color: $fg-container,
+          filled-state-layer-color: $fg-container,
+          outlined-label-text-color: $bg-container,
+          outlined-state-layer-color: $bg-container,
+          protected-label-text-color: $bg-container,
+          protected-state-layer-color: $bg-container,
+          text-label-text-color: $bg-container,
+          text-state-layer-color: $bg-container,
+        )
+      );
+    }
+  }
+}
+
+@mixin typography($theme) {
+}
+
+@mixin theme($theme) {
+  // round button corners to 8px
+  @include mat.button-overrides(
+    (
+      filled-container-shape: 8px,
+      outlined-container-shape: 8px,
+      protected-container-shape: 8px,
+      text-container-shape: 8px,
+    )
+  );
+
+  @if mat.theme-has($theme, color) {
+    @include color($theme);
+  }
+
+  @if mat.theme-has($theme, typography) {
+    @include typography($theme);
+  }
+}

package/lib/styles/material/_card-theme.scss

@@ -0,0 +1,41 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$palette-names {
+    $bg: bdb.palette-color($palette-name);
+    $fg: bdb.on-palette-color($palette-name);
+    .mdc-card.#{$palette-name} {
+      @include mat.card-overrides(
+        (
+          elevated-container-color: $bg,
+          outlined-container-color: $bg,
+        )
+      );
+    }
+
+    .mdc-card.#{$palette-name}-container {
+      $bg: bdb.palette-color($palette-name, true);
+      @include mat.card-overrides(
+        (
+          elevated-container-color: $bg,
+          outlined-container-color: $bg,
+        )
+      );
+    }
+  }
+}
+
+@mixin typography($theme) {
+}
+
+@mixin theme($theme) {
+  @if mat.theme-has($theme, color) {
+    @include color($theme);
+  }
+
+  @if mat.theme-has($theme, typography) {
+    @include typography($theme);
+  }
+}

package/lib/styles/material/_checkbox-theme.scss

@@ -0,0 +1,35 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$palette-names {
+    .mat-mdc-checkbox.#{$palette-name} {
+      $bg: bdb.palette-color($palette-name);
+      @include mat.checkbox-overrides(
+        (
+          selected-pressed-icon-color: $bg,
+          selected-focus-icon-color: $bg,
+          selected-hover-icon-color: $bg,
+          selected-icon-color: $bg,
+          selected-focus-state-layer-color: $bg,
+          selected-hover-state-layer-color: $bg,
+          unselected-pressed-state-layer-color: $bg,
+        )
+      );
+    }
+  }
+}
+
+@mixin typography($theme) {
+}
+
+@mixin theme($theme) {
+  @if mat.theme-has($theme, color) {
+    @include color($theme);
+  }
+
+  @if mat.theme-has($theme, typography) {
+    @include typography($theme);
+  }
+}

package/lib/styles/material/_chips-theme.scss

@@ -0,0 +1,37 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$palette-names {
+    $bg: bdb.palette-color($palette-name);
+    $fg: bdb.on-palette-color($palette-name);
+    .mat-mdc-chip.#{$palette-name} {
+      @include mat.chips-overrides(
+        (
+          outline-color: $bg,
+          elevated-selected-container-color: $bg,
+          selected-hover-state-layer-color: $bg,
+          selected-focus-state-layer-color: $bg,
+          selected-label-text-color: $bg,
+          label-text-color: $fg,
+          with-icon-selected-icon-color: $fg,
+          selected-trailing-icon-color: $fg,
+        )
+      );
+    }
+  }
+}
+
+@mixin typography($theme) {
+}
+
+@mixin theme($theme) {
+  @if mat.theme-has($theme, color) {
+    @include color($theme);
+  }
+
+  @if mat.theme-has($theme, typography) {
+    @include typography($theme);
+  }
+}

package/lib/styles/material/_datepicker-theme.scss

@@ -0,0 +1,36 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$palette-names {
+    $bg: bdb.palette-color($palette-name);
+    $fg: bdb.on-palette-color($palette-name);
+    $bg-container: bdb.palette-color($palette-name, true);
+    .mat-calendar.#{$palette-name} {
+      @include mat.datepicker-overrides(
+        (
+          calendar-date-selected-state-background-color: $bg,
+          calendar-date-today-selected-state-outline-color: $bg,
+          calendar-date-in-range-state-background-color: $bg-container,
+          calendar-date-selected-state-text-color: $fg,
+          calendar-date-today-outline-color: $bg,
+          calendar-date-preview-state-outline-color: $bg,
+        )
+      );
+    }
+  }
+}
+
+@mixin typography($theme) {
+}
+
+@mixin theme($theme) {
+  @if mat.theme-has($theme, color) {
+    @include color($theme);
+  }
+
+  @if mat.theme-has($theme, typography) {
+    @include typography($theme);
+  }
+}

package/lib/styles/material/_fab-theme.scss

@@ -0,0 +1,50 @@
+@use 'sass:map';
+@use 'sass:list';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$palette-names {
+    .mat-mdc-fab.#{$palette-name},
+    .mat-mdc-mini-fab.#{$palette-name} {
+      $bg: bdb.palette-color($palette-name);
+      $bg-container: bdb.palette-color($palette-name, true);
+      $fg: bdb.on-palette-color($palette-name);
+      $fg-container: bdb.on-palette-color($palette-name, true);
+      @include mat.fab-overrides(
+        (
+          container-color: $bg,
+          foreground-color: $fg,
+          state-layer-color: $bg,
+          // ripple-color: $bg,
+          small-container-color: $bg,
+          small-foreground-color: $fg,
+          small-state-layer-color: $bg,
+          // small-ripple-color: $bg,
+          small-container-elevation-shadow: var(--mat-sys-level3),
+        )
+      );
+    }
+  }
+}
+
+@mixin typography($theme) {
+}
+
+@mixin theme($theme) {
+  // round button corners to 8px
+  @include mat.fab-overrides(
+    (
+      container-shape: 4px,
+      small-container-shape: 4px,
+    )
+  );
+
+  @if mat.theme-has($theme, color) {
+    @include color($theme);
+  }
+
+  @if mat.theme-has($theme, typography) {
+    @include typography($theme);
+  }
+}

package/lib/styles/material/_form-field-theme.scss

@@ -0,0 +1,48 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$palette-names {
+    $bg: bdb.palette-color($palette-name);
+    $fg: bdb.on-palette-color($palette-name);
+    .mat-mdc-form-field.#{$palette-name} {
+      @include mat.form-field-overrides(
+        (
+          filled-caret-color: $bg,
+          filled-focus-active-indicator-color: $bg,
+          filled-focus-label-text-color: $bg,
+          outlined-caret-color: $bg,
+          outlined-focus-outline-color: $bg,
+          outlined-focus-label-text-color: $bg,
+          focus-select-arrow-color: $bg,
+        )
+      );
+    }
+  }
+
+  // @each $palette-name in bdb.$badaboom-palettes {
+  //   .#{$palette-name}.mat-mdc-form-field {
+  //     --mdc-filled-text-field-caret-color: var(--mat-sys-#{$palette-name});
+  //     --mdc-filled-text-field-focus-active-indicator-color: var(--mat-sys-#{$palette-name});
+  //     --mdc-filled-text-field-focus-label-text-color: var(--mat-sys-#{$palette-name});
+  //     --mdc-outlined-text-field-caret-color: var(--mat-sys-#{$palette-name});
+  //     --mdc-outlined-text-field-focus-outline-color: var(--mat-sys-#{$palette-name});
+  //     --mdc-outlined-text-field-focus-label-text-color: var(--mat-sys-#{$palette-name});
+  //     --mat-form-field-focus-select-arrow-color: var(--mat-sys-#{$palette-name});
+  //   }
+  // }
+}
+
+@mixin typography($theme) {
+}
+
+@mixin theme($theme) {
+  @if mat.theme-has($theme, color) {
+    @include color($theme);
+  }
+
+  @if mat.theme-has($theme, typography) {
+    @include typography($theme);
+  }
+}

package/lib/styles/material/_icon-button-theme.scss

@@ -0,0 +1,52 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$material-palettes {
+    .mdc-icon-button.#{$palette-name} {
+      @include mat.icon-button-overrides(
+        (
+          icon-color: var(--mat-sys-#{$palette-name}),
+          state-layer-color: var(--mat-sys-#{$palette-name}),
+          disabled-state-layer-color: var(--mat-sys-#{$palette-name}),
+        )
+      );
+    }
+  }
+
+  @each $palette-name in bdb.$badaboom-palettes {
+    .mdc-icon-button.#{$palette-name} {
+      @include mat.icon-button-overrides(
+        (
+          icon-color: var(--bdb-sys-#{$palette-name}),
+          state-layer-color: var(--bdb-sys-#{$palette-name}),
+          disabled-state-layer-color: var(--bdb-sys-#{$palette-name}),
+        )
+      );
+    }
+  }
+}
+
+@mixin typography($theme) {
+}
+
+@mixin theme($theme) {
+  // round button corners to 8px
+  @include mat.button-overrides(
+    (
+      filled-container-shape: 8px,
+      outlined-container-shape: 8px,
+      protected-container-shape: 8px,
+      text-container-shape: 8px,
+    )
+  );
+
+  @if mat.theme-has($theme, color) {
+    @include color($theme);
+  }
+
+  @if mat.theme-has($theme, typography) {
+    @include typography($theme);
+  }
+}

package/lib/styles/material/{_progress-spinner-m3-theme.scss → _icon-theme.scss}

@@ -4,14 +4,22 @@
 
 @mixin color($theme) {
   @each $palette-name in bdb.$material-palettes {
-    .#{$palette-name}.mat-mdc-progress-spinner {
-      @include mat.progress-spinner-color($theme, $color-variant: $palette-name);
+    .mat-icon.#{$palette-name} {
+      @include mat.icon-overrides(
+        (
+          color: var(--mat-sys-#{$palette-name}),
+        )
+      );
     }
   }
 
   @each $palette-name in bdb.$badaboom-palettes {
-    .#{$palette-name}.mat-mdc-progress-spinner {
-      --mdc-circular-progress-active-indicator-color: var(--sys-#{$palette-name});
+    .mat-icon.#{$palette-name} {
+      @include mat.icon-overrides(
+        (
+          color: var(--bdb-sys-#{$palette-name}),
+        )
+      );
     }
   }
 }