@devopmaat/badaboom 1.3.0 → 1.3.2

package/lib/common/_button-m2-theme.scss

@@ -1,87 +0,0 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use '@angular/material' as mat;
-
-$_ripple-opacity: 0.1;
-
-// Applies the background color for a ripple. If the value provided is not a Sass color,
-// we assume that we've been given a CSS variable. Since we can't perform alpha-blending
-// on a CSS variable, we instead add the opacity directly to the ripple element.
-@mixin _ripple-background($palette, $hue, $opacity) {
-  $background-color: mat.m2-get-color-from-palette($palette, $hue, $opacity);
-  background-color: $background-color;
-  @if (meta.type-of($background-color) != color) {
-    opacity: $opacity;
-  }
-}
-
-@mixin _ripple-color($theme, $hue, $opacity: $_ripple-opacity) {
-  $warn: map.get($theme, warn);
-  $danger: map.get($theme, danger);
-  $success: map.get($theme, success);
-  $info: map.get($theme, info);
-
-  &.mat-warn .mat-ripple-element {
-    @include _ripple-background($warn, $hue, $opacity);
-  }
-
-  &.mat-danger .mat-ripple-element {
-    @include _ripple-background($danger, $hue, $opacity);
-  }
-
-  &.mat-success .mat-ripple-element {
-    @include _ripple-background($success, $hue, $opacity);
-  }
-
-  &.mat-info .mat-ripple-element {
-    @include _ripple-background($info, $hue, $opacity);
-  }
-}
-
-// Applies a property to an mat-button element for each of the supported palettes.
-@mixin _theme-property($theme, $property, $hue) {
-  $danger: map.get($theme, danger);
-  $success: map.get($theme, success);
-  $info: map.get($theme, info);
-  $warn: map.get($theme, warn);
-  $background: map.get($theme, background);
-  $foreground: map.get($theme, foreground);
-
-  &.mat-warn {
-    #{$property}: mat.m2-get-color-from-palette($warn, $hue);
-  }
-  &.mat-danger {
-    #{$property}: mat.m2-get-color-from-palette($danger, $hue);
-  }
-  &.mat-success {
-    #{$property}: mat.m2-get-color-from-palette($success, $hue);
-  }
-  &.mat-info {
-    #{$property}: mat.m2-get-color-from-palette($info, $hue);
-  }
-  &[disabled] {
-    $palette: if($property == 'color', $foreground, $background);
-    #{$property}: mat.m2-get-color-from-palette($palette, disabled-button);
-  }
-}
-
-@mixin theme($config-or-theme) {
-  $config: mat.m2-get-color-config($config-or-theme);
-
-  .mat-mdc-button-base {
-    &.mat-mdc-button,
-    &.mat-mdc-icon-button,
-    &.mat-mdc-outlined-button {
-      @include _theme-property($config, 'color', text);
-    }
-
-    &.mat-mdc-unelevated-button,
-    &.mat-mdc-raised-button,
-    &.mat-mdc-fab,
-    &.mat-mdc-mini-fab {
-      @include _theme-property($config, 'color', default-contrast);
-      @include _theme-property($config, 'background-color', default);
-      @include _ripple-color($config, default-contrast);
-    }
-  }
-}

package/lib/common/_icon-m2-theme.scss

@@ -1,32 +0,0 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use '@angular/material' as mat;
-
-// Applies a property to an mat-button element for each of the supported palettes.
-@mixin _theme-property($theme, $property, $hue) {
-  $warn: map.get($theme, warn);
-  $danger: map.get($theme, danger);
-  $success: map.get($theme, success);
-  $info: map.get($theme, info);  
-
-  &.mat-warn {
-    #{$property}: mat.m2-get-color-from-palette($warn, $hue);
-  }
-  &.mat-danger {
-    #{$property}: mat.m2-get-color-from-palette($danger, $hue);
-  }
-  &.mat-success {
-    #{$property}: mat.m2-get-color-from-palette($success, $hue);
-  }
-  &.mat-info {
-    #{$property}: mat.m2-get-color-from-palette($info, $hue);
-  }  
-}
-
-@mixin theme($config-or-theme) {
-  $config: mat.m2-get-color-config($config-or-theme);
-
-  .mat-icon {
-    @include _theme-property($config, 'color', text);
-  }
-}

package/lib/common/alert/_bdb-alert-m2-theme.scss

@@ -1,34 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  $color-config:      mat.m2-get-color-config($theme);
-  $paletteNames: (primary,accent,warn,danger,success,info);
-
-  @each $paletteName in $paletteNames {
-    $palette:         map.get($color-config, $paletteName);
-    $color:           mat.m2-get-color-from-palette($palette, default);
-    $contrast:        mat.m2-get-color-from-palette($palette, default-contrast);
-
-    .bdb-alert.bdb-#{$paletteName} .bdb-alert-wrapper {
-      .bdb-icon-container{
-        background-color: $color;
-        color: $contrast;
-      }
-
-      .label {
-        font-size: 16px;
-        line-height: 24px;
-      }
-      border-color: $color;  
-    }  
-  }
-
-  .bdb-alert .alert.muted {
-    .icon-container{
-      background-color: #E0E0E0;
-      color: #757575;
-    }
-    border-color: #E0E0E0;
-  }
-}

package/lib/common/alert/_bdb-alert-m3-theme.scss

@@ -1,29 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../styles/core-theme' as bdb;
-
-@mixin color($theme) {
-  @each $palette-name in bdb.$palette-names {
-    .#{$palette-name}.bdb-alert,
-    .bdb-#{$palette-name}.bdb-alert {
-      --bdb-alert-container-color: var(--sys-#{$palette-name});
-      --bdb-alert-content-container-color: var(--sys-#{$palette-name}-container);
-      --bdb-alert-content-color: var(--sys-on-#{$palette-name}-container);
-      --bdb-alert-icon-color: var(--sys-on-#{$palette-name});
-      --bdb-alert-border-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/common/boolean-display/_bdb-boolean-display-m2-theme.scss

@@ -1,18 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  $color-config: mat.m2-get-color-config($theme);
-
-  $danger: mat.m2-get-color-from-palette(map.get($color-config, danger), default);
-  $success: mat.m2-get-color-from-palette(map.get($color-config, success), default);
-
-  .bdb-boolean-display {
-    .false {
-      color: $danger;
-    }
-    .true {
-      color: $success;
-    }
-  }
-}

package/lib/common/boolean-display/_bdb-boolean-display-m3-theme.scss

@@ -1,27 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../styles/core-theme' as bdb;
-
-@mixin color($theme) {
-  .bdb-boolean-display {
-    .false {
-      color: var(--sys-error);
-    }
-    .true {
-      color: var(--sys-success);
-    }
-  }
-}
-
-@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/common/color.d.ts

@@ -1,14 +0,0 @@
-import { BdbPalette } from './bdb-palette';
-import { AbstractConstructor, Constructor } from './constructor';
-import { ElementRef } from '@angular/core';
-export interface CanColor {
-    color: BdbPalette;
-    defaultColor: BdbPalette | undefined;
-}
-type CanColorCtor = Constructor<CanColor> & AbstractConstructor<CanColor>;
-export interface HasElementRef {
-    _elementRef: ElementRef;
-}
-/** Mixin to augment a directive with a `color` property. */
-export declare function mixinColor<T extends AbstractConstructor<HasElementRef>>(base: T, defaultColor?: BdbPalette): CanColorCtor & T;
-export {};

package/lib/common/constructor.d.ts

@@ -1,2 +0,0 @@
-export type Constructor<T> = new (...args: any[]) => T;
-export type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;

package/lib/common/field/_bdb-field-m2-theme.scss

@@ -1,13 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  .bdb-field {
-    background-color: rgba(0, 0, 0, 0.02);
-    min-height: 56px;
-    gap: 4px;
-    .field-label {
-      color: rgba(0, 0, 0, 0.38);
-    }
-  }
-}

package/lib/common/field/_bdb-field-m3-theme.scss

@@ -1,56 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../styles/core-theme' as bdb;
-
-@mixin color($theme) {
-  & {
-    --bdb-field-border-color: var(--sys-surface-container-high);
-    --bdb-field-color: var(--sys-on-surface);
-    --bdb-field-label-color: var(--sys-on-surface-variant);
-
-    @if mat.get-theme-type($theme) == dark {
-      --bdb-field-container-color: var(--sys-surface-container);
-    } @else {
-      --bdb-field-container-color: var(--sys-surface-container-low);
-    }
-  }
-
-  .bdb-field {
-    background-color: var(--bdb-field-container-color);
-    border: 1px solid var(--bdb-field-border-color);
-    border-bottom-width: 2px;
-    color: var(--bdb-field-color);
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-    border-top-left-radius: var(--mdc-filled-text-field-container-shape);
-    border-top-right-radius: var(--mdc-filled-text-field-container-shape);
-    min-height: 52px;
-    gap: 2px;
-
-    .field-label {
-      color: var(--bdb-field-label-color);
-    }
-  }
-
-  @each $palette-name in bdb.$palette-names {
-    .#{$palette-name}.bdb-field {
-      border-bottom-color: var(--sys-#{$palette-name});
-      &.container {
-        border-bottom-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/_badge-m3-theme.scss

@@ -1,35 +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-badge-#{$palette-name} .mat-badge-content,
-    .badge-#{$palette-name} .mat-badge-content {
-      @include mat.badge-color($theme, $color-variant: $palette-name);
-    }
-  }
-
-  @each $palette-name in bdb.$badaboom-palettes {
-    .mat-badge-#{$palette-name} .mat-badge-content,
-    .badge-#{$palette-name} .mat-badge-content {
-      --mat-badge-background-color: var(--sys-#{$palette-name});
-      --mat-badge-text-color: var(--sys-on-${palette-name});
-      --mat-badge-disabled-state-background-color: color-mix(in srgb, var(--sys-${palette-name}) 38%, transparent);
-      --mat-badge-disabled-state-text-color: var(--sys-on-${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/_button-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 {
-    .mdc-button.#{$palette-name} {
-      @include mat.button-color($theme, $color-variant: $palette-name);
-    }
-  }
-
-  @each $palette-name in bdb.$badaboom-palettes {
-    .mdc-button.#{$palette-name} {
-      --mdc-text-button-label-text-color: var(--sys-#{$palette-name});
-      --mdc-text-button-disabled-label-text-color: color-mix(in srgb, var(--sys-on-surface) 38%, transparent);
-      --mdc-protected-button-container-elevation-shadow: 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-protected-button-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2),
-        0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
-      --mdc-protected-button-focus-container-elevation-shadow: 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-protected-button-hover-container-elevation-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
-        0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
-      --mdc-protected-button-pressed-container-elevation-shadow: 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-protected-button-container-color: var(--sys-surface);
-      --mdc-protected-button-label-text-color: var(--sys-#{$palette-name});
-      --mdc-protected-button-disabled-container-color: color-mix(in srgb, var(--sys-on-surface) 12%, transparent);
-      --mdc-protected-button-disabled-label-text-color: color-mix(in srgb, var(--sys-on-surface) 38%, transparent);
-      --mdc-filled-button-container-color: var(--sys-#{$palette-name});
-      --mdc-filled-button-label-text-color: var(--sys-on-#{$palette-name});
-      --mdc-filled-button-disabled-container-color: color-mix(in srgb, var(--sys-on-surface) 12%, transparent);
-      --mdc-filled-button-disabled-label-text-color: color-mix(in srgb, var(--sys-on-surface) 38%, transparent);
-      --mdc-outlined-button-disabled-outline-color: color-mix(in srgb, var(--sys-on-surface) 12%, transparent);
-      --mdc-outlined-button-disabled-label-text-color: color-mix(in srgb, var(--sys-on-surface) 38%, transparent);
-      --mdc-outlined-button-label-text-color: var(--sys-#{$palette-name});
-      --mdc-outlined-button-outline-color: var(--sys-outline);
-      --mat-text-button-state-layer-color: var(--sys-#{$palette-name});
-      --mat-text-button-disabled-state-layer-color: var(--sys-on-surface-variant);
-      --mat-text-button-ripple-color: color-mix(in srgb, var(--sys-#{$palette-name}) 12%, transparent);
-      --mat-text-button-hover-state-layer-opacity: 0.08;
-      --mat-text-button-focus-state-layer-opacity: 0.12;
-      --mat-text-button-pressed-state-layer-opacity: 0.12;
-      --mat-protected-button-state-layer-color: var(--sys-#{$palette-name});
-      --mat-protected-button-disabled-state-layer-color: var(--sys-on-surface-variant);
-      --mat-protected-button-ripple-color: color-mix(in srgb, var(--sys-#{$palette-name}) 12%, transparent);
-      --mat-protected-button-hover-state-layer-opacity: 0.08;
-      --mat-protected-button-focus-state-layer-opacity: 0.12;
-      --mat-protected-button-pressed-state-layer-opacity: 0.12;
-      --mat-filled-button-state-layer-color: var(--sys-on-#{$palette-name});
-      --mat-filled-button-disabled-state-layer-color: var(--sys-on-surface-variant);
-      --mat-filled-button-ripple-color: color-mix(in srgb, var(--sys-on-#{$palette-name}) 12%, transparent);
-      --mat-filled-button-hover-state-layer-opacity: 0.08;
-      --mat-filled-button-focus-state-layer-opacity: 0.12;
-      --mat-filled-button-pressed-state-layer-opacity: 0.12;
-      --mat-outlined-button-state-layer-color: var(--sys-#{$palette-name});
-      --mat-outlined-button-disabled-state-layer-color: var(--sys-on-surface-variant);
-      --mat-outlined-button-ripple-color: color-mix(in srgb, var(--sys-#{$palette-name}) 12%, transparent);
-      --mat-outlined-button-hover-state-layer-opacity: 0.08;
-      --mat-outlined-button-focus-state-layer-opacity: 0.12;
-      --mat-outlined-button-pressed-state-layer-opacity: 0.12;
-    }
-  }
-}
-
-@mixin typography($theme) {
-}
-
-@mixin theme($theme) {
-  // round button corners to 8px
-  --mdc-filled-button-container-shape: 8px;
-  --mdc-outlined-button-container-shape: 8px;
-  --mdc-stroked-button-container-shape: 8px;
-  --mdc-protected-button-container-shape: 8px;
-  --mdc-text-button-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-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.$palette-names {
-    .mat-mdc-card.#{$palette-name},
-    .mat-card.mat-#{$palette-name} {
-      color: var(--sys-on-#{$palette-name});
-      --mdc-elevated-card-container-color: var(--sys-#{$palette-name});
-      --mdc-outlined-card-container-color: var(--sys-#{$palette-name});
-    }
-
-    .mat-mdc-card.#{$palette-name}-container,
-    .mat-card.mat-#{$palette-name}-container {
-      color: var(--sys-on-#{$palette-name}-container);
-      --mdc-elevated-card-container-color: var(--sys-#{$palette-name}-container);
-      --mdc-outlined-card-container-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/_checkbox-m3-theme.scss

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

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

@@ -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);
-  }
-}