@devopmaat/badaboom 1.3.0 → 1.3.3

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

@@ -1,84 +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-calendar {
-      @include mat.datepicker-color($theme, $color-variant: $palette-name);
-    }
-  }
-
-  @each $palette-name in bdb.$badaboom-palettes {
-    .#{$palette-name}.mat-calendar {
-      --mat-datepicker-calendar-date-selected-state-text-color: var(--sys-on-#{$palette-name});
-      --mat-datepicker-calendar-date-selected-state-background-color: var(--sys-#{$palette-name});
-      --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(
-        in srgb,
-        var(--sys-on-surface) 38%,
-        transparent
-      );
-      --mat-datepicker-calendar-date-today-selected-state-outline-color: var(--sys-#{$palette-name});
-      --mat-datepicker-calendar-date-focus-state-background-color: color-mix(
-        in srgb,
-        var(--sys-on-surface) 12%,
-        transparent
-      );
-      --mat-datepicker-calendar-date-hover-state-background-color: color-mix(
-        in srgb,
-        var(--sys-on-surface) 8%,
-        transparent
-      );
-      --mat-datepicker-toggle-active-state-icon-color: var(--sys-on-surface-variant);
-      --mat-datepicker-calendar-date-in-range-state-background-color: var(--sys-#{$palette-name}-container);
-      --mat-datepicker-calendar-date-in-comparison-range-state-background-color: var(--sys-tertiary-container);
-      --mat-datepicker-calendar-date-in-overlap-range-state-background-color: var(--sys-primary-container);
-      --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: var(--sys-primary);
-      --mat-datepicker-toggle-icon-color: var(--sys-on-surface-variant);
-      --mat-datepicker-calendar-body-label-text-color: var(--sys-on-surface);
-      --mat-datepicker-calendar-period-button-text-color: var(--sys-on-surface-variant);
-      --mat-datepicker-calendar-period-button-icon-color: var(--sys-on-surface-variant);
-      --mat-datepicker-calendar-navigation-button-icon-color: var(--sys-on-surface-variant);
-      --mat-datepicker-calendar-header-text-color: var(--sys-on-surface-variant);
-      --mat-datepicker-calendar-date-today-outline-color: var(--sys-#{$palette-name});
-      --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(
-        in srgb,
-        var(--sys-on-surface) 38%,
-        transparent
-      );
-      --mat-datepicker-calendar-date-text-color: var(--sys-on-surface);
-      --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(
-        in srgb,
-        var(--sys-on-surface) 38%,
-        transparent
-      );
-      --mat-datepicker-calendar-date-preview-state-outline-color: var(--sys-#{$palette-name});
-      --mat-datepicker-range-input-separator-color: var(--sys-on-surface);
-      --mat-datepicker-range-input-disabled-state-separator-color: color-mix(
-        in srgb,
-        var(--sys-on-surface) 38%,
-        transparent
-      );
-      --mat-datepicker-range-input-disabled-state-text-color: color-mix(
-        in srgb,
-        var(--sys-on-surface) 38%,
-        transparent
-      );
-      --mat-datepicker-calendar-container-background-color: var(--sys-surface-container-high);
-      --mat-datepicker-calendar-container-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/_fab-m3-theme.scss

@@ -1,84 +0,0 @@
-@use 'sass:map';
-@use 'sass:list';
-@use '@angular/material' as mat;
-@use '../core-theme' as bdb;
-
-@mixin color($theme) {
-  // does not support error...?
-  @each $palette-name in primary, secondary, tertiary {
-    .mat-mdc-fab.#{$palette-name},
-    .mat-mdc-fab.mat-#{$palette-name},
-    .mat-mdc-mini-fab.#{$palette-name},
-    .mat-mdc-mini-fab.mat-#{$palette-name} {
-      @include mat.fab-color($theme, $color-variant: $palette-name);
-    }
-  }
-
-  // so add error this way
-  @each $palette-name in list.join(bdb.$badaboom-palettes, 'error') {
-    .mat-mdc-fab.#{$palette-name},
-    .mat-mdc-fab.mat-#{$palette-name},
-    .mat-mdc-mini-fab.#{$palette-name},
-    .mat-mdc-mini-fab.mat-#{$palette-name} {
-      --mdc-extended-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-        0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-      --mdc-extended-fab-focus-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-        0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-      --mdc-extended-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
-        0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
-      --mdc-extended-fab-pressed-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-        0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-      --mdc-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
-        0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-      --mdc-fab-focus-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-        0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-      --mdc-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
-        0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
-      --mdc-fab-pressed-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-        0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-      --mdc-fab-container-color: var(--sys-#{$palette-name}-container);
-      --mdc-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-        0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-      --mdc-fab-small-focus-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-        0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-      --mdc-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
-        0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
-      --mdc-fab-small-pressed-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-        0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-      --mdc-fab-small-container-color: var(--sys-#{$palette-name}-container);
-      --mat-fab-foreground-color: var(--sys-on-#{$palette-name}-container);
-      --mat-fab-state-layer-color: var(--sys-on-#{$palette-name}-container);
-      --mat-fab-ripple-color: color-mix(in srgb, var(--sys-on-#{$palette-name}-container) 12%, transparent);
-      --mat-fab-hover-state-layer-opacity: 0.08;
-      --mat-fab-focus-state-layer-opacity: 0.12;
-      --mat-fab-pressed-state-layer-opacity: 0.12;
-      --mat-fab-disabled-state-container-color: color-mix(in srgb, var(--sys-on-surface) 12%, transparent);
-      --mat-fab-disabled-state-foreground-color: color-mix(in srgb, var(--sys-on-surface) 38%, transparent);
-      --mat-fab-small-foreground-color: var(--sys-on-#{$palette-name}-container);
-      --mat-fab-small-state-layer-color: var(--sys-on-#{$palette-name}-container);
-      --mat-fab-small-ripple-color: color-mix(in srgb, var(--sys-on-#{$palette-name}-container) 12%, transparent);
-      --mat-fab-small-hover-state-layer-opacity: 0.08;
-      --mat-fab-small-focus-state-layer-opacity: 0.12;
-      --mat-fab-small-pressed-state-layer-opacity: 0.12;
-      --mat-fab-small-disabled-state-container-color: color-mix(in srgb, var(--sys-on-surface) 12%, transparent);
-      --mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, var(--sys-on-surface) 38%, transparent);
-    }
-  }
-}
-
-@mixin typography($theme) {
-}
-
-@mixin theme($theme) {
-  // round button corners to 8px
-  --mdc-fab-container-shape: 8px;
-  --mdc-fab-small-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/_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);
-  }
-}