@devopmaat/badaboom 1.1.1 → 1.2.0

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

@@ -0,0 +1,54 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$material-palettes {
+    .mat-mdc-checkbox.#{$palette-name} {
+      @include mat.checkbox-color($theme, $color-variant: $palette-name);
+    }
+  }
+
+  @each $palette-name in bdb.$badaboom-palettes {
+    .mat-mdc-checkbox.#{$palette-name} {
+      --mdc-checkbox-disabled-selected-checkmark-color: var(--sys-surface);
+      --mdc-checkbox-selected-focus-state-layer-opacity: 0.12;
+      --mdc-checkbox-selected-hover-state-layer-opacity: 0.08;
+      --mdc-checkbox-selected-pressed-state-layer-opacity: 0.12;
+      --mdc-checkbox-unselected-focus-state-layer-opacity: 0.12;
+      --mdc-checkbox-unselected-hover-state-layer-opacity: 0.08;
+      --mdc-checkbox-unselected-pressed-state-layer-opacity: 0.12;
+      --mdc-checkbox-selected-pressed-icon-color: var(--sys-#{$palette-name});
+      --mdc-checkbox-disabled-selected-icon-color: color-mix(in srgb, var(--sys-on-surface) 38%, transparent);
+      --mdc-checkbox-disabled-unselected-icon-color: color-mix(in srgb, var(--sys-on-surface) 38%, transparent);
+      --mdc-checkbox-selected-checkmark-color: var(--sys-on-#{$palette-name});
+      --mdc-checkbox-selected-focus-icon-color: var(--sys-#{$palette-name});
+      --mdc-checkbox-selected-hover-icon-color: var(--sys-#{$palette-name});
+      --mdc-checkbox-selected-icon-color: var(--sys-#{$palette-name});
+      --mdc-checkbox-unselected-focus-icon-color: var(--sys-on-surface);
+      --mdc-checkbox-unselected-hover-icon-color: var(--sys-on-surface);
+      --mdc-checkbox-unselected-icon-color: var(--sys-on-surface-variant);
+      --mdc-checkbox-selected-focus-state-layer-color: var(--sys-#{$palette-name});
+      --mdc-checkbox-selected-hover-state-layer-color: var(--sys-#{$palette-name});
+      --mdc-checkbox-selected-pressed-state-layer-color: var(--sys-on-surface);
+      --mdc-checkbox-unselected-focus-state-layer-color: var(--sys-on-surface);
+      --mdc-checkbox-unselected-hover-state-layer-color: var(--sys-on-surface);
+      --mdc-checkbox-unselected-pressed-state-layer-color: var(--sys-#{$palette-name});
+      --mat-checkbox-disabled-label-color: color-mix(in srgb, var(--sys-on-surface) 38%, transparent);
+      --mat-checkbox-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/_chips-m3-theme.scss

@@ -0,0 +1,58 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$material-palettes {
+    .mat-mdc-chip.#{$palette-name},
+    .mat-mdc-chip.mat-#{$palette-name} {
+      @include mat.chips-color($theme, $color-variant: $palette-name);
+    }
+  }
+
+  @each $palette-name in bdb.$badaboom-palettes {
+    .mat-mdc-chip.#{$palette-name},
+    .mat-mdc-chip.mat-#{$palette-name} {
+      --mdc-chip-outline-color: var(--sys-outline);
+      --mdc-chip-disabled-outline-color: color-mix(in srgb, var(--sys-on-surface) 12%, transparent);
+      --mdc-chip-focus-outline-color: var(--sys-on-surface-variant);
+      --mdc-chip-hover-state-layer-opacity: 0.08;
+      --mdc-chip-selected-hover-state-layer-opacity: 0.08;
+      --mdc-chip-disabled-label-text-color: color-mix(in srgb, var(--sys-on-surface) 38%, transparent);
+      --mdc-chip-elevated-selected-container-color: var(--sys-#{$palette-name}-container);
+      --mdc-chip-flat-disabled-selected-container-color: color-mix(in srgb, var(--sys-on-surface) 12%, transparent);
+      --mdc-chip-focus-state-layer-color: var(--sys-on-surface-variant);
+      --mdc-chip-hover-state-layer-color: var(--sys-on-surface-variant);
+      --mdc-chip-selected-hover-state-layer-color: var(--sys-on-#{$palette-name}-container);
+      --mdc-chip-focus-state-layer-opacity: 0.12;
+      --mdc-chip-selected-focus-state-layer-color: var(--sys-on-#{$palette-name}-container);
+      --mdc-chip-selected-focus-state-layer-opacity: 0.12;
+      --mdc-chip-label-text-color: var(--sys-on-surface-variant);
+      --mdc-chip-selected-label-text-color: var(--sys-on-#{$palette-name}-container);
+      --mdc-chip-with-icon-icon-color: var(--sys-on-surface-variant);
+      --mdc-chip-with-icon-disabled-icon-color: var(--sys-on-surface);
+      --mdc-chip-with-icon-selected-icon-color: var(--sys-on-#{$palette-name}-container);
+      --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: var(--sys-on-surface);
+      --mdc-chip-with-trailing-icon-trailing-icon-color: var(--sys-on-surface-variant);
+      --mat-chip-trailing-action-state-layer-color: var(--sys-on-surface-variant);
+      --mat-chip-selected-trailing-action-state-layer-color: var(--sys-on-#{$palette-name}-container);
+      --mat-chip-trailing-action-hover-state-layer-opacity: 0.08;
+      --mat-chip-trailing-action-focus-state-layer-opacity: 0.12;
+      --mat-chip-selected-disabled-trailing-icon-color: var(--sys-on-surface);
+      --mat-chip-selected-trailing-icon-color: var(--sys-on-#{$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/_datepicker-m3-theme.scss

@@ -0,0 +1,84 @@
+@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

@@ -0,0 +1,84 @@
+@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

@@ -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.$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

@@ -0,0 +1,32 @@
+@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

@@ -0,0 +1,34 @@
+@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

@@ -0,0 +1,31 @@
+@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/_progress-spinner-m3-theme.scss

@@ -0,0 +1,30 @@
+@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-spinner {
+      @include mat.progress-spinner-color($theme, $color-variant: $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});
+    }
+  }
+}
+
+@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

@@ -0,0 +1,42 @@
+@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

@@ -0,0 +1,68 @@
+@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

@@ -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.$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

@@ -0,0 +1,44 @@
+@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);
+  }
+}