@devopmaat/badaboom 1.2.3 → 1.3.2

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

@@ -1,36 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../core-theme' as bdb;
-
-@mixin color($theme) {
-  @each $palette-name in bdb.$material-palettes {
-    .#{$palette-name}.mat-mdc-form-field {
-      @include mat.form-field-color($theme, $color-variant: $palette-name);
-    }
-  }
-
-  @each $palette-name in bdb.$badaboom-palettes {
-    .#{$palette-name}.mat-mdc-form-field {
-      --mdc-filled-text-field-caret-color: var(--sys-#{$palette-name});
-      --mdc-filled-text-field-focus-active-indicator-color: var(--sys-#{$palette-name});
-      --mdc-filled-text-field-focus-label-text-color: var(--sys-#{$palette-name});
-      --mdc-outlined-text-field-caret-color: var(--sys-#{$palette-name});
-      --mdc-outlined-text-field-focus-outline-color: var(--sys-#{$palette-name});
-      --mdc-outlined-text-field-focus-label-text-color: var(--sys-#{$palette-name});
-      --mat-form-field-focus-select-arrow-color: var(--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-m3-theme.scss

@@ -1,32 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../core-theme' as bdb;
-
-@mixin color($theme) {
-  @each $palette-name in bdb.$material-palettes {
-    .mat-icon.#{$palette-name},
-    .mat-icon.mat-#{$palette-name} {
-      @include mat.icon-color($theme, $color-variant: $palette-name);
-    }
-  }
-
-  @each $palette-name in bdb.$badaboom-palettes {
-    .mat-icon.#{$palette-name},
-    .mat-icon.mat-#{$palette-name} {
-      --mat-icon-color: var(--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/_option-m3-theme.scss

@@ -1,34 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../core-theme' as bdb;
-
-@mixin color($theme) {
-  @each $palette-name in bdb.$material-palettes {
-    .#{$palette-name}.mat-mdc-option {
-      @include mat.option-color($theme, $color-variant: $palette-name);
-    }
-  }
-
-  @each $palette-name in bdb.$badaboom-palettes {
-    .#{$palette-name}.mat-mdc-option {
-      --mat-option-selected-state-label-text-color: var(--sys-on-#{$palette-name}-container);
-      --mat-option-label-text-color: var(--sys-on-surface);
-      --mat-option-hover-state-layer-color: color-mix(in srgb, var(--sys-on-surface) 8%, transparent);
-      --mat-option-focus-state-layer-color: color-mix(in srgb, var(--sys-on-surface) 12%, transparent);
-      --mat-option-selected-state-layer-color: var(--sys-#{$palette-name}-container);
-    }
-  }
-}
-
-@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/_progress-bar-m3-theme.scss

@@ -1,31 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../core-theme' as bdb;
-
-@mixin color($theme) {
-  @each $palette-name in bdb.$material-palettes {
-    .#{$palette-name}.mat-mdc-progress-bar {
-      @include mat.progress-bar-color($theme, $color-variant: $palette-name);
-    }
-  }
-
-  @each $palette-name in bdb.$badaboom-palettes {
-    .#{$palette-name}.mat-mdc-progress-bar {
-      --mdc-linear-progress-active-indicator-color: var(--sys-#{$palette-name});
-      --mdc-linear-progress-track-color: var(--sys-#{$palette-name}-container);
-    }
-  }
-}
-
-@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/_radio-m3-theme.scss

@@ -1,42 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../core-theme' as bdb;
-
-@mixin color($theme) {
-  @each $palette-name in bdb.$material-palettes {
-    .#{$palette-name}.mat-mdc-radio-button {
-      @include mat.radio-color($theme, $color-variant: $palette-name);
-    }
-  }
-
-  @each $palette-name in bdb.$badaboom-palettes {
-    .#{$palette-name}.mat-mdc-radio-button {
-      --mdc-radio-disabled-selected-icon-color: var(--sys-on-surface);
-      --mdc-radio-disabled-unselected-icon-color: var(--sys-on-surface);
-      --mdc-radio-unselected-hover-icon-color: var(--sys-on-surface);
-      --mdc-radio-unselected-icon-color: var(--sys-on-surface-variant);
-      --mdc-radio-unselected-pressed-icon-color: var(--sys-on-surface);
-      --mdc-radio-selected-focus-icon-color: var(--sys-#{$palette-name});
-      --mdc-radio-selected-hover-icon-color: var(--sys-#{$palette-name});
-      --mdc-radio-selected-icon-color: var(--sys-#{$palette-name});
-      --mdc-radio-selected-pressed-icon-color: var(--sys-#{$palette-name});
-      --mat-radio-ripple-color: var(--sys-on-surface);
-      --mat-radio-checked-ripple-color: var(--sys-#{$palette-name});
-      --mat-radio-disabled-label-color: color-mix(in srgb, var(--sys-on-surface) 38%, transparent);
-      --mat-radio-label-text-color: var(--sys-on-surface);
-    }
-  }
-}
-
-@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/_slide-toggle-m3-theme.scss

@@ -1,68 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../core-theme' as bdb;
-
-@mixin color($theme) {
-  @each $palette-name in bdb.$material-palettes {
-    .#{$palette-name}.mat-mdc-slide-toggle {
-      @include mat.slide-toggle-color($theme, $color-variant: $palette-name);
-    }
-  }
-
-  @each $palette-name in bdb.$badaboom-palettes {
-    .#{$palette-name}.mat-mdc-slide-toggle {
-      --mdc-switch-selected-focus-state-layer-opacity: 0.12;
-      --mdc-switch-selected-hover-state-layer-opacity: 0.08;
-      --mdc-switch-selected-pressed-state-layer-opacity: 0.12;
-      --mdc-switch-unselected-focus-state-layer-opacity: 0.12;
-      --mdc-switch-unselected-hover-state-layer-opacity: 0.08;
-      --mdc-switch-unselected-pressed-state-layer-opacity: 0.12;
-      --mdc-switch-selected-focus-state-layer-color: var(--sys-#{$palette-name});
-      --mdc-switch-selected-handle-color: var(--sys-on-#{$palette-name});
-      --mdc-switch-selected-hover-state-layer-color: var(--sys-#{$palette-name});
-      --mdc-switch-selected-pressed-state-layer-color: var(--sys-#{$palette-name});
-      --mdc-switch-selected-focus-handle-color: var(--sys-#{$palette-name}-container);
-      --mdc-switch-selected-hover-handle-color: var(--sys-#{$palette-name}-container);
-      --mdc-switch-selected-pressed-handle-color: var(--sys-#{$palette-name}-container);
-      --mdc-switch-selected-focus-track-color: var(--sys-#{$palette-name});
-      --mdc-switch-selected-hover-track-color: var(--sys-#{$palette-name});
-      --mdc-switch-selected-pressed-track-color: var(--sys-#{$palette-name});
-      --mdc-switch-selected-track-color: var(--sys-#{$palette-name});
-      --mdc-switch-disabled-selected-handle-color: var(--sys-surface);
-      --mdc-switch-disabled-selected-icon-color: var(--sys-on-surface);
-      --mdc-switch-disabled-selected-track-color: var(--sys-on-surface);
-      --mdc-switch-disabled-unselected-handle-color: var(--sys-on-surface);
-      --mdc-switch-disabled-unselected-icon-color: var(--sys-surface-variant);
-      --mdc-switch-disabled-unselected-track-color: var(--sys-surface-variant);
-      --mdc-switch-selected-icon-color: var(--sys-on-#{$palette-name}-container);
-      --mdc-switch-unselected-focus-handle-color: var(--sys-on-surface-variant);
-      --mdc-switch-unselected-focus-state-layer-color: var(--sys-on-surface);
-      --mdc-switch-unselected-focus-track-color: var(--sys-surface-variant);
-      --mdc-switch-unselected-handle-color: var(--sys-outline);
-      --mdc-switch-unselected-hover-handle-color: var(--sys-on-surface-variant);
-      --mdc-switch-unselected-hover-state-layer-color: var(--sys-on-surface);
-      --mdc-switch-unselected-hover-track-color: var(--sys-surface-variant);
-      --mdc-switch-unselected-icon-color: var(--sys-surface-variant);
-      --mdc-switch-unselected-pressed-handle-color: var(--sys-on-surface-variant);
-      --mdc-switch-unselected-pressed-state-layer-color: var(--sys-on-surface);
-      --mdc-switch-unselected-pressed-track-color: var(--sys-surface-variant);
-      --mdc-switch-unselected-track-color: var(--sys-surface-variant);
-      --mat-switch-track-outline-color: var(--sys-outline);
-      --mat-switch-disabled-unselected-track-outline-color: var(--sys-on-surface);
-      --mat-switch-label-text-color: var(--sys-on-surface);
-    }
-  }
-}
-
-@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/_slider-m3-theme.scss

@@ -1,48 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../core-theme' as bdb;
-
-@mixin color($theme) {
-  @each $palette-name in bdb.$material-palettes {
-    .#{$palette-name}.mat-mdc-slider {
-      @include mat.slider-color($theme, $color-variant: $palette-name);
-    }
-  }
-
-  @each $palette-name in bdb.$badaboom-palettes {
-    .#{$palette-name}.mat-mdc-slider {
-      --mdc-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
-        0px 1px 3px 0px rgba(0, 0, 0, 0.12);
-      --mdc-slider-handle-color: var(--sys-#{$palette-name});
-      --mdc-slider-focus-handle-color: var(--sys-#{$palette-name});
-      --mdc-slider-hover-handle-color: var(--sys-#{$palette-name});
-      --mdc-slider-active-track-color: var(--sys-#{$palette-name});
-      --mdc-slider-inactive-track-color: var(--sys-surface-variant);
-      --mdc-slider-with-tick-marks-inactive-container-color: var(--sys-on-surface-variant);
-      --mdc-slider-with-tick-marks-active-container-color: var(--sys-on-#{$palette-name});
-      --mdc-slider-disabled-active-track-color: var(--sys-on-surface);
-      --mdc-slider-disabled-handle-color: var(--sys-on-surface);
-      --mdc-slider-disabled-inactive-track-color: var(--sys-on-surface);
-      --mdc-slider-label-container-color: var(--sys-#{$palette-name});
-      --mdc-slider-label-label-text-color: var(--sys-on-#{$palette-name});
-      --mdc-slider-with-overlap-handle-outline-color: var(--sys-on-#{$palette-name});
-      --mdc-slider-with-tick-marks-disabled-container-color: var(--sys-on-surface);
-      --mat-slider-ripple-color: var(--sys-#{$palette-name});
-      --mat-slider-hover-state-layer-color: color-mix(in srgb, var(--sys-#{$palette-name}) 5%, transparent);
-      --mat-slider-focus-state-layer-color: color-mix(in srgb, var(--sys-#{$palette-name}) 20%, transparent);
-    }
-  }
-}
-
-@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/_stepper-m3-theme.scss

@@ -1,44 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../core-theme' as bdb;
-
-@mixin color($theme) {
-  @each $palette-name in bdb.$material-palettes {
-    .#{$palette-name}.mat-stepper-horizontal {
-      @include mat.stepper-color($theme, $color-variant: $palette-name);
-    }
-  }
-
-  @each $palette-name in bdb.$badaboom-palettes {
-    .#{$palette-name}.mat-stepper-horizontal {
-      --mat-stepper-header-icon-foreground-color: var(--sys-surface);
-      --mat-stepper-header-selected-state-icon-background-color: var(--sys-#{$palette-name});
-      --mat-stepper-header-selected-state-icon-foreground-color: var(--sys-on-#{$palette-name});
-      --mat-stepper-header-edit-state-icon-background-color: var(--sys-#{$palette-name});
-      --mat-stepper-header-edit-state-icon-foreground-color: var(--sys-on-#{$palette-name});
-      --mat-stepper-container-color: var(--sys-surface);
-      --mat-stepper-line-color: var(--sys-outline);
-      --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, var(--sys-inverse-surface) 8%, transparent);
-      --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, var(--sys-inverse-surface) 12%, transparent);
-      --mat-stepper-header-label-text-color: var(--sys-on-surface-variant);
-      --mat-stepper-header-optional-label-text-color: var(--sys-on-surface-variant);
-      --mat-stepper-header-selected-state-label-text-color: var(--sys-on-surface-variant);
-      --mat-stepper-header-error-state-label-text-color: var(--sys-error);
-      --mat-stepper-header-icon-background-color: var(--sys-on-surface-variant);
-      --mat-stepper-header-error-state-icon-foreground-color: var(--sys-error);
-    }
-  }
-}
-
-@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/_tabs-m3-theme.scss

@@ -1,32 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../core-theme' as bdb;
-
-@mixin color($theme) {
-  @each $palette-name in bdb.$material-palettes {
-    .#{$palette-name}.mat-mdc-tab-group {
-      @include mat.tabs-color($theme, $color-variant: $palette-name);
-    }
-  }
-
-  @each $palette-name in bdb.$badaboom-palettes {
-    .#{$palette-name}.mat-mdc-tab-group {
-      --mdc-tab-indicator-active-indicator-color: var(--sys-#{$palette-name});
-      --mat-tab-header-active-focus-indicator-color: var(--sys-#{$palette-name});
-      --mat-tab-header-active-hover-indicator-color: var(--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/_toolbar-m3-theme.scss

@@ -1,63 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../core-theme' as bdb;
-
-@mixin color($theme) {
-  .mat-toolbar {
-    @if mat.get-theme-type($theme) == dark {
-      --mat-toolbar-container-background-color: var(--sys-surface-container);
-    } @else {
-      --mat-toolbar-container-background-color: var(--sys-surface-container-low);
-    }
-    --mat-toolbar-container-text-color: var(--sys-on-surface);
-
-    @each $palette-name in bdb.$palette-names {
-      &.#{$palette-name} {
-        --mat-toolbar-container-background-color: var(--sys-#{$palette-name});
-        --mat-toolbar-container-text-color: var(--sys-on-#{$palette-name});
-
-        &.container {
-          --mat-toolbar-container-background-color: var(--sys-#{$palette-name}-container);
-          --mat-toolbar-container-text-color: var(--sys-on-#{$palette-name}-container);
-        }
-      }
-    }
-  }
-
-  //   @if mat.get-theme-type($theme) == dark {
-
-  //     // --mat-toolbar-container-background-color: #{bdb.bdb-get-theme-color($theme, info, 10)};
-  //     // --mat-toolbar-container-text-color: #{bdb.bdb-get-theme-color($theme, info, 90)};
-  //     @each $palette-name in bdb.$palette-names {
-  //       &.#{$palette-name} {
-  //         --mat-toolbar-container-background-color: #{bdb.bdb-get-theme-color($theme, $palette-name, 10)};
-  //         --mat-toolbar-container-text-color: #{bdb.bdb-get-theme-color($theme, $palette-name, 90)};
-  //       }
-  //     }
-  //   } @else {
-  //     --mat-toolbar-container-background-color: #{bdb.bdb-get-theme-color($theme, info, 95)};
-  //     --mat-toolbar-container-text-color: #{bdb.bdb-get-theme-color($theme, info, 10)};
-  //     @each $palette-name in bdb.$palette-names {
-  //       &.#{$palette-name} {
-  //         --mat-toolbar-container-background-color: var(--sys-#{$palette-name}-container);
-  //         --mat-toolbar-container-text-color: var(--sys-on-#{$palette-name}-container);
-  //         // --mat-toolbar-container-background-color: #{bdb.bdb-get-theme-color($theme, $palette-name, 95)};
-  //         // --mat-toolbar-container-text-color: #{bdb.bdb-get-theme-color($theme, $palette-name, 10)};
-  //       }
-  //     }
-  //   }
-  // }
-}
-
-@mixin typography($theme) {
-}
-
-@mixin theme($theme) {
-  @if mat.theme-has($theme, color) {
-    @include color($theme);
-  }
-
-  @if mat.theme-has($theme, typography) {
-    @include typography($theme);
-  }
-}