@devopmaat/badaboom 1.1.1 → 1.2.0

package/lib/application/common/query-input/_bdb-query-input-m3-theme.scss

@@ -0,0 +1,30 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../../styles/core-theme' as bdb;
+
+@mixin color($theme) {
+  .bdb-query-input {
+    background: var(--mdc-filled-text-field-container-color);
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    &:focus-within {
+      border-color: var(--sys-info);
+    }
+
+    input {
+      color: var(--mdc-filled-text-field-input-text-color);
+    }
+  }
+}
+
+@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/application/common/table/_bdb-table-m3-theme.scss

@@ -0,0 +1,70 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../../styles/core-theme' as bdb;
+
+@mixin color($theme) {
+  & {
+    @each $palette-name in bdb.$palette-names {
+      @if mat.get-theme-type($theme) == dark {
+        --bdb-table-row-#{$palette-name}: #{bdb.bdb-get-theme-color($theme, $palette-name, 10)};
+        --bdb-table-row-#{$palette-name}-selected-hover: #{bdb.bdb-get-theme-color($theme, $palette-name, 40)};
+      } @else {
+        --bdb-table-row-#{$palette-name}: #{bdb.bdb-get-theme-color($theme, $palette-name, 95)};
+        --bdb-table-row-#{$palette-name}-selected-hover: #{bdb.bdb-get-theme-color($theme, $palette-name, 80)};
+      }
+    }
+  }
+
+  .bdb-table {
+    tbody tr {
+      &.selected {
+        background-color: var(--sys-info-container);
+        color: var(--sys-on-info-container);
+      }
+
+      @each $palette-name in bdb.$palette-names {
+        &.bdb-#{$palette-name} {
+          background-color: var(--bdb-table-row-#{$palette-name});
+          color: var(--sys-on-#{$palette-name}-container);
+          &.selected {
+            background-color: var(--sys-#{$palette-name}-container);
+          }
+        }
+      }
+    }
+
+    &.is-clickable tbody tr {
+      &:hover {
+        background-color: var(--sys-info-container);
+      }
+      &.selected:hover {
+        background-color: var(--bdb-table-row-info-selected-hover);
+      }
+
+      @each $palette-name in bdb.$palette-names {
+        &.bdb-#{$palette-name} {
+          &:hover {
+            background-color: var(--sys-#{$palette-name}-container);
+            color: var(--sys-on-#{$palette-name}-container);
+          }
+          &.selected:hover {
+            background-color: var(--bdb-table-row-#{$palette-name}-selected-hover);
+          }
+        }
+      }
+    }
+  }
+}
+
+@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/application/common/table/bdb-column-options.d.ts

@@ -15,6 +15,7 @@ export interface BdbEnumColumnOptions extends BdbColumnOptions {
     pipe?: Type<PipeTransform>;
 }
 export interface BdbNumberColumnOptions extends BdbColumnOptions {
+    pipe?: Type<PipeTransform>;
     format?: string;
 }
 export interface BdbPercentageColumnOptions extends BdbColumnOptions {

package/lib/application/common/table/bdb-table.component.d.ts

@@ -9,7 +9,7 @@ import { BdbDataSource } from '../bdb-data-source';
 import { BdbContextAction } from './bdb-context-action';
 import { BdbCellDirective } from './bdb-cell.directive';
 import { BdbColumnType } from './bdb-column-type';
-import { BdbPalette } from '../../../common/bdb-palette';
+import { BdbPalette, BdbM3Palette } from '../../../common/bdb-palette';
 import * as i0 from "@angular/core";
 export declare class BdbTableComponent<TRead extends BdbEntity> implements OnInit, OnChanges, AfterContentInit, OnDestroy {
     private readonly _onDestroy;
@@ -34,7 +34,7 @@ export declare class BdbTableComponent<TRead extends BdbEntity> implements OnIni
         x: string;
         y: string;
     };
-    rowColor?: (x: TRead) => BdbPalette;
+    rowColor?: (x: TRead) => BdbPalette | BdbM3Palette;
     trackById: TrackByFunction<BdbEntity>;
     ngOnInit(): void;
     ngOnChanges(): void;

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

@@ -0,0 +1,29 @@
+@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/alert-error-response/bdb-alert-error-response.component.d.ts

@@ -5,6 +5,7 @@ import * as i0 from "@angular/core";
 export declare class BdbAlertErrorResponseComponent implements OnChanges {
     value: HttpErrorResponse | undefined | null;
     loginFailed: boolean;
+    alertClass: string;
     color: BdbPalette;
     icon: string;
     label: string;

package/lib/common/bdb-palette.d.ts

@@ -1 +1,2 @@
 export type BdbPalette = 'primary' | 'accent' | 'danger' | 'warn' | 'success' | 'info' | undefined;
+export type BdbM3Palette = 'primary' | 'secondary' | 'tertiary' | 'error' | 'warn' | 'success' | 'info' | undefined;

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

@@ -0,0 +1,27 @@
+@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/field/_bdb-field-m2-theme.scss

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

@@ -0,0 +1,56 @@
+@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/common/field/bdb-field.component.d.ts

@@ -1,5 +1,6 @@
 import * as i0 from "@angular/core";
 export declare class BdbFieldComponent {
+    class: string;
     label: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<BdbFieldComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BdbFieldComponent, "bdb-field", never, { "label": { "alias": "label"; "required": false; }; }, {}, never, ["*"], true, never>;

package/lib/common/plain-number-pipe.d.ts

@@ -0,0 +1,7 @@
+import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class PlainNumberPipe implements PipeTransform {
+    transform(value: number | undefined): string | undefined;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PlainNumberPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<PlainNumberPipe, "bdbPlainNumber", true>;
+}

package/lib/styles/_core-theme.scss

@@ -0,0 +1,29 @@
+@use 'sass:map';
+@use 'sass:list';
+@use '@angular/material' as mat;
+
+$material-palettes: 'primary', 'secondary', 'tertiary', 'error';
+$badaboom-palettes: 'info', 'success', 'warn';
+
+$palette-names: list.join($material-palettes, $badaboom-palettes, $separator: auto, $bracketed: auto);
+
+@function bdb-get-theme-color($bdb-theme, $palette-name, $hue) {
+  @if not list.index($palette-names, $palette-name) {
+    @error "#{$palette-name} is not a valid BaDaBoom palette. Expected one of #{$palette-names}.";
+  }
+  @if not list.index($material-palettes, $palette-name) {
+    $colors: map-get($bdb-theme, color);
+    @if type-of($colors) == 'map' {
+      $palette-map: map-get($colors, $palette-name);
+      @if type-of($palette-map) == 'map' {
+        @return map-get($palette-map, $hue);
+      } @else {
+        @warn "Make sure `#{$palette-name}` is a Sass map.";
+      }
+    } @else {
+      @warn "Make sure `color` is a Sass map.";
+    }
+  } @else {
+    @return mat.get-theme-color($bdb-theme, $palette-name, $hue);
+  }
+}

package/lib/styles/_theme.scss

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

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

@@ -0,0 +1,35 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$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

@@ -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 {
+    button.mdc-button.#{$palette-name} {
+      @include mat.button-color($theme, $color-variant: $palette-name);
+    }
+  }
+
+  @each $palette-name in bdb.$badaboom-palettes {
+    button.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

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