@porscheinformatik/material-addons 21.0.4 → 22.0.0

package/themes/common/theme.scss

@@ -1,57 +1,95 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-$primary-palette: undefined;
-$accent-palette: undefined;
-$warn-palette: undefined;
-$default-palette: undefined;
-$is-dark-theme: undefined;
-
-$typography: mat.m2-define-typography-config(
-  $font-family: 'Roboto, sans-serif',
-);
-
-@function build-custom-theme($theme-name, $primary-palette, $default-colors, $warn-palette: mat.$m2-red-palette) {
-  $material-addons-colors-primary: mat.m2-define-palette($primary-palette);
-  $material-addons-colors-warn: mat.m2-define-palette($warn-palette);
-  $material-addons-theme: mat.m2-define-light-theme(
+// Build an Angular Material theme along with the metadata MAD needs to expose CSS variables.
+@function build-custom-theme-m3(
+  $theme-name,
+  $primary-hex,
+  $tertiary-hex,
+  $custom-colors,
+  $default-colors,
+  $background-hex: #fafafa,
+  $palettes: null
+) {
+  $mat-theme: mat.define-theme(
     (
       color: (
-        primary: $material-addons-colors-primary,
-        accent: $material-addons-colors-primary,
-        warn: $material-addons-colors-warn,
+        theme-type: light,
+        primary: if($palettes, map.get($palettes, primary), mat.$azure-palette),
+        tertiary: if($palettes, map.get($palettes, tertiary), mat.$blue-palette),
+        use-system-variables: true,
+      ),
+      typography: (
+        brand-family: 'Roboto',
+        plain-family: 'Roboto',
+      ),
+      density: (
+        scale: 0,
       ),
-      typography: $typography,
     )
   );
 
-  $color-config: mat.m2-get-color-config($material-addons-theme);
-  $primary-palette: map.get($color-config, 'primary') !global;
-  $accent-palette: map.get($color-config, 'accent') !global;
-  $warn-palette: map.get($color-config, 'warn') !global;
-  $default-palette: $default-colors !global;
-  $is-dark-theme: map.get($color-config, 'is-dark') !global;
+  @return (
+    mat-theme: $mat-theme,
+    theme-name: $theme-name,
+    primary-color: $primary-hex,
+    tertiary-color: $tertiary-hex,
+    background-color: $background-hex,
+    custom-colors: $custom-colors,
+    default-palette: $default-colors
+  );
+}
 
-  @return $material-addons-theme;
+@function material-theme($theme-config) {
+  @return map.get($theme-config, mat-theme);
 }
 
-@function get-main-color() {
-  @return map-get($primary-palette, 500);
+@function get-theme-name($theme-config) {
+  @return map.get($theme-config, theme-name);
 }
 
-@function get-selection-background() {
-  @return map-get($primary-palette, 50);
+@function get-main-color($theme-config) {
+  @return map.get($theme-config, primary-color);
+}
+
+@function get-selection-background($theme-config) {
+  @return mix(white, get-main-color($theme-config), 90%);
 }
 
 @function get-table-hover-color($color) {
   @return rgba($color, 0.08);
 }
 
-@function get-background-color() {
-  @return map-get($primary-palette, background-color);
+@function get-background-color($theme-config) {
+  @return map.get($theme-config, background-color);
+}
+
+@function get-hover-color($theme-config) {
+  @return mix(white, get-main-color($theme-config), 90%);
+}
+
+@function get-panel-color($theme-config) {
+  @return mix(black, get-main-color($theme-config), 30%);
 }
 
-@function map-get-or-default($theme-map, $key) {
-  $key-exists: map-has-key($theme-map, $key);
-  @return map-get(if($key-exists, $theme-map, $default-palette), $key);
+@function get-custom-color($theme-config, $key) {
+  $custom-colors: map.get($theme-config, custom-colors);
+  @if $custom-colors == null {
+    @return null;
+  }
+  @return map.get($custom-colors, $key);
+}
+
+@function map-get-or-default($theme-config, $key) {
+  $custom-colors: map.get($theme-config, custom-colors);
+  @if $custom-colors != null and map.has-key($custom-colors, $key) {
+    @return map.get($custom-colors, $key);
+  }
+
+  $default-palette: map.get($theme-config, default-palette);
+  @if $default-palette != null and map.has-key($default-palette, $key) {
+    @return map.get($default-palette, $key);
+  }
+
+  @return null;
 }

package/themes/common/tokens/_tokens.scss

@@ -0,0 +1,89 @@
+@use '../theme';
+
+$default-palette: (
+  panel-background-color: #e8e8e8,
+  panel-border-color: #cccccc,
+  panel-select-background: white,
+  alert-success-background-color: rgb(238, 252, 227),
+  alert-success-border-color: rgb(66, 129, 14),
+  alert-success-text-color: #155724,
+  alert-info-background-color: rgb(229, 247, 255),
+  alert-info-border-color: rgb(0, 121, 173),
+  alert-info-text-color: #0c5460,
+  alert-warning-background-color: rgb(255, 242, 214),
+  alert-warning-border-color: rgb(255, 185, 46),
+  alert-warning-text-color: #856404,
+  alert-error-background-color: rgb(255, 242, 240),
+  alert-error-border-color: rgb(224, 34, 0),
+  alert-error-text-color: #721c24,
+);
+
+// Mixin to define CSS variables (must be called in :root selector)
+@mixin color-variables($theme-name, $theme) {
+  $main-primary: theme.get-main-color($theme);
+  $selection-background: theme.get-selection-background($theme);
+  $table-hover-color: theme.get-table-hover-color($main-primary);
+  $background-color: theme.get-background-color($theme);
+  $hover-color: theme.get-hover-color($theme);
+  $panel-color: theme.get-panel-color($theme);
+
+  $warn-color: theme.get-custom-color($theme, warn-color);
+  $error-color: theme.get-custom-color($theme, error-color);
+  $info-color: theme.get-custom-color($theme, info-color);
+  $success-color: theme.get-custom-color($theme, success-color);
+
+  $panel-background-color: theme.map-get-or-default($theme, panel-background-color);
+  $panel-border-color: theme.map-get-or-default($theme, panel-border-color);
+  $panel-select-background: theme.map-get-or-default($theme, panel-select-background);
+
+  $alert-success-background-color: theme.map-get-or-default($theme, alert-success-background-color);
+  $alert-success-border-color: theme.map-get-or-default($theme, alert-success-border-color);
+  $alert-success-text-color: theme.map-get-or-default($theme, alert-success-text-color);
+
+  $alert-info-background-color: theme.map-get-or-default($theme, alert-info-background-color);
+  $alert-info-border-color: theme.map-get-or-default($theme, alert-info-border-color);
+  $alert-info-text-color: theme.map-get-or-default($theme, alert-info-text-color);
+
+  $alert-warning-background-color: theme.map-get-or-default($theme, alert-warning-background-color);
+  $alert-warning-border-color: theme.map-get-or-default($theme, alert-warning-border-color);
+  $alert-warning-text-color: theme.map-get-or-default($theme, alert-warning-text-color);
+
+  $alert-error-background-color: theme.map-get-or-default($theme, alert-error-background-color);
+  $alert-error-border-color: theme.map-get-or-default($theme, alert-error-border-color);
+  $alert-error-text-color: theme.map-get-or-default($theme, alert-error-text-color);
+
+  --main-primary: #{$main-primary};
+  --selection-background: #{$selection-background};
+  --hover-color: #{$hover-color};
+  --table-hover-color: #{$table-hover-color};
+  --warn-color: #{$warn-color};
+  --error-color: #{$error-color};
+  --background-color: #{$background-color};
+  --panel-color: var(--mat-sys-on-surface);
+  --panel-background-color: #{$panel-background-color};
+  --panel-border-color: #{$panel-border-color};
+  --panel-select-background: #{$panel-select-background};
+  --mat-button-protected-label-text-color: #{$main-primary};
+  --alert-success-background-color: #{$alert-success-background-color};
+  --alert-success-border-color: #{$alert-success-border-color};
+  --alert-success-text-color: #{$alert-success-text-color};
+  --alert-info-background-color: #{$alert-info-background-color};
+  --alert-info-border-color: #{$alert-info-border-color};
+  --alert-info-text-color: #{$alert-info-text-color};
+  --alert-warning-background-color: #{$alert-warning-background-color};
+  --alert-warning-border-color: #{$alert-warning-border-color};
+  --alert-warning-text-color: #{$alert-warning-text-color};
+  --alert-error-background-color: #{$alert-error-background-color};
+  --alert-error-border-color: #{$alert-error-border-color};
+  --alert-error-text-color: #{$alert-error-text-color};
+
+  --step-border-color: var(--mat-sys-outline-variant);
+  --step-complete-color: #{$alert-success-border-color};
+  --step-neutral-color: var(--mat-sys-outline);
+  --step-header-selected-background: var(--mat-sys-surface-variant);
+  --step-header-default-background: var(--mat-sys-surface);
+  --toolbar-background: var(--mat-sys-surface);
+  --datatable-background: var(--mat-sys-surface);
+  --datatable-hover: var(--mat-sys-surface-variant);
+  --container-shape: 0.25rem;
+}

package/themes/pbv-palettes.scss

@@ -0,0 +1,137 @@
+// This file was generated by running 'ng generate @angular/material:theme-color'.
+// Proceed with caution if making changes to this file.
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #004665, tertiary: #00648f, error: #c21d00
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #001e2e,
+    20: #00344c,
+    25: #00405c,
+    30: #0c4c6b,
+    35: #1f5777,
+    40: #2d6484,
+    50: #497c9e,
+    60: #6396b9,
+    70: #7eb1d5,
+    80: #99cdf2,
+    90: #c8e6ff,
+    95: #e5f2ff,
+    98: #f6faff,
+    99: #fbfcff,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    10: #0a1d29,
+    20: #20323f,
+    25: #2b3e4a,
+    30: #374956,
+    35: #425562,
+    40: #4e616f,
+    50: #677988,
+    60: #8093a2,
+    70: #9baebd,
+    80: #b6c9d9,
+    90: #d2e5f6,
+    95: #e5f2ff,
+    98: #f6faff,
+    99: #fbfcff,
+    100: #ffffff,
+  ),
+  tertiary: (
+    0: #000000,
+    10: #001e2e,
+    20: #00344d,
+    25: #00405d,
+    30: #004c6d,
+    35: #00587e,
+    40: #026590,
+    50: #317eaa,
+    60: #5098c5,
+    70: #6cb3e2,
+    80: #88ceff,
+    90: #c8e6ff,
+    95: #e5f2ff,
+    98: #f6faff,
+    99: #fbfcff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #191c1e,
+    20: #2e3133,
+    25: #393c3e,
+    30: #454749,
+    35: #505355,
+    40: #5c5e61,
+    50: #75777a,
+    60: #8f9193,
+    70: #aaabae,
+    80: #c5c6c9,
+    90: #e1e2e5,
+    95: #f0f1f3,
+    98: #f9f9fc,
+    99: #fbfcff,
+    100: #ffffff,
+    4: #0c0e11,
+    6: #111416,
+    12: #1d2022,
+    17: #282a2d,
+    22: #333537,
+    24: #37393c,
+    87: #d9dadd,
+    92: #e7e8eb,
+    94: #edeef1,
+    96: #f3f3f6,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #161c21,
+    20: #2b3137,
+    25: #363c42,
+    30: #41484d,
+    35: #4d5359,
+    40: #585f65,
+    50: #71787e,
+    60: #8b9198,
+    70: #a5acb3,
+    80: #c1c7ce,
+    90: #dde3ea,
+    95: #ebf1f8,
+    98: #f6faff,
+    99: #fbfcff,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #3f0400,
+    20: #650a00,
+    25: #790e00,
+    30: #8e1300,
+    35: #a41700,
+    40: #ba1b00,
+    50: #e03417,
+    60: #ff5637,
+    70: #ff8a73,
+    80: #ffb4a5,
+    90: #ffdad3,
+    95: #ffede9,
+    98: #fff8f6,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes, neutral-variant),
+  error: map.get($_palettes, error),
+);
+
+$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
+$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);

package/themes/pbv.scss

@@ -1,57 +1,48 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
 @use './common/theme' as theme;
 @use './common/styles' as common;
-@use './common/button';
+@use './common/theme-entry' as theme-entry;
+@use './carcat-palettes' as carcat;
 
 $theme-name: 'pbv';
 
-$primary-palette: (
-  50: #e0e9ed,
-  100: #b3c8d1,
-  200: #80a3b2,
-  300: #4d7e93,
-  400: #26627c,
-  500: #004665,
-  600: #003f5d,
-  700: #003753,
-  800: #002f49,
-  900: #002037,
-  A100: #6eb3ff,
-  A200: #3b98ff,
-  A400: #087eff,
-  A700: #0071ee,
-  contrast: common.$contrast,
-  background-color: #fafafa,
+// M3 Theme Configuration
+$primary-color: #0072a3;
+$tertiary-color: #005073; // Info color
+$background-color: #fcfcfc;
+
+$custom-colors: (
   warn-color: #ad7600,
   error-color: #c21d00,
-  info-color: #00648f,
+  info-color: #005073,
   success-color: #3c8500,
 );
 
-$warn-palette: (
-  50: #f2e4e8,
-  100: #dfbbc5,
-  200: #ca8e9e,
-  300: #b56077,
-  400: #a53e5a,
-  500: #970505,
-  600: #8d1937,
-  700: #82142f,
-  800: #781127,
-  900: #67091a,
-  A100: #ff99a6,
-  A200: #ff667a,
-  A400: #ff334e,
-  A700: #ff1a38,
-  contrast: common.$contrast,
+// M3 palettes generated from brand colors (same primary as CarCat)
+$palettes: (
+  primary: carcat.$primary-palette,
+  tertiary: carcat.$tertiary-palette,
 );
 
-@include mat.elevation-classes();
-@include mat.app-background();
+// Build M3 theme
+$custom-theme: theme.build-custom-theme-m3(
+  $theme-name,
+  $primary-color,
+  $tertiary-color,
+  $custom-colors,
+  common.$default-palette,
+  $background-color,
+  $palettes
+);
 
-$custom-theme: theme.build-custom-theme($theme-name, $primary-palette, common.$default-palette, $warn-palette);
+$pbv-root-overrides: (
+  --selection-background: #79c6e6,
+  --hover-color: #79c6e6,
+  --panel-color: #000000,
+);
 
-@include mat.all-component-themes($custom-theme);
-@include mat.all-component-typographies($custom-theme);
-@include common.theme($theme-name, $custom-theme);
+@include theme-entry.apply-theme(
+  $custom-theme,
+  (
+    root-overrides: $pbv-root-overrides,
+  )
+);

package/themes/poa-palettes.scss

@@ -0,0 +1,137 @@
+// This file was generated by running 'ng generate @angular/material:theme-color'.
+// Proceed with caution if making changes to this file.
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #14a1a9, tertiary: #00648f, error: #c21d00
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #002022,
+    20: #00373a,
+    25: #004346,
+    30: #004f53,
+    35: #005c61,
+    40: #00696f,
+    50: #00848b,
+    60: #11a0a8,
+    70: #41bbc3,
+    80: #63d7df,
+    90: #81f4fc,
+    95: #c3fbff,
+    98: #e8feff,
+    99: #f3feff,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    10: #002022,
+    20: #093639,
+    25: #184144,
+    30: #254d50,
+    35: #31595c,
+    40: #3d6568,
+    50: #567e81,
+    60: #70989b,
+    70: #8ab2b5,
+    80: #a5ced1,
+    90: #c0eaed,
+    95: #cef8fc,
+    98: #e8feff,
+    99: #f3feff,
+    100: #ffffff,
+  ),
+  tertiary: (
+    0: #000000,
+    10: #001e2e,
+    20: #00344d,
+    25: #00405d,
+    30: #004c6d,
+    35: #00587e,
+    40: #026590,
+    50: #317eaa,
+    60: #5098c5,
+    70: #6cb3e2,
+    80: #88ceff,
+    90: #c8e6ff,
+    95: #e5f2ff,
+    98: #f6faff,
+    99: #fbfcff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #171d1d,
+    20: #2c3132,
+    25: #373c3d,
+    30: #424848,
+    35: #4e5354,
+    40: #5a5f60,
+    50: #727878,
+    60: #8c9292,
+    70: #a7acac,
+    80: #c2c7c8,
+    90: #dee3e3,
+    95: #edf2f2,
+    98: #f5fafa,
+    99: #f8fdfd,
+    100: #ffffff,
+    4: #0a0f10,
+    6: #0f1415,
+    12: #1b2121,
+    17: #252b2b,
+    22: #303636,
+    24: #353a3b,
+    87: #d6dbdb,
+    92: #e4e9e9,
+    94: #eaefef,
+    96: #eff5f5,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #121d1e,
+    20: #273233,
+    25: #323e3e,
+    30: #3d494a,
+    35: #485556,
+    40: #546161,
+    50: #6d797a,
+    60: #869394,
+    70: #a1aeae,
+    80: #bcc9ca,
+    90: #d8e5e6,
+    95: #e6f3f4,
+    98: #effcfd,
+    99: #f3feff,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #3f0400,
+    20: #650a00,
+    25: #790e00,
+    30: #8e1300,
+    35: #a41700,
+    40: #ba1b00,
+    50: #e03417,
+    60: #ff5637,
+    70: #ff8a73,
+    80: #ffb4a5,
+    90: #ffdad3,
+    95: #ffede9,
+    98: #fff8f6,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes, neutral-variant),
+  error: map.get($_palettes, error),
+);
+
+$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
+$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);

package/themes/poa.scss

@@ -1,57 +1,37 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
 @use './common/theme' as theme;
 @use './common/styles' as common;
-@use './common/button';
+@use './common/theme-entry' as theme-entry;
+@use './poa-palettes' as poa;
 
 $theme-name: 'poa';
 
-$primary-palette: (
-  50: #e8f3f3,
-  100: #e2fafb,
-  200: #c5f5f8,
-  300: #a8f0f4,
-  400: #8cebf1,
-  500: #14a1a9,
-  600: #32d3da,
-  700: #23c0c7,
-  800: #1ea4aa,
-  900: #19888d,
-  A100: #ccfdff,
-  A200: #adfcff,
-  A400: #86faff,
-  A700: #16f7ff,
-  contrast: common.$contrast,
-  background-color: #fafafa,
+// M3 Theme Configuration
+$primary-color: #14a1a9; // Former palette 500 value
+$tertiary-color: #00648f; // Info color
+$background-color: #fafafa;
+
+$custom-colors: (
   warn-color: #ad7600,
   error-color: #c21d00,
   info-color: #00648f,
   success-color: #3c8500,
 );
 
-$warn-palette: (
-  50: #f8e4e0,
-  100: #edbbb3,
-  200: #e18e80,
-  300: #d4614d,
-  400: #cb3f26,
-  500: #c21d00,
-  600: #bc1a00,
-  700: #b41500,
-  800: #ac1100,
-  900: #9f0a00,
-  A100: #ffcbc9,
-  A200: #ff9996,
-  A400: #ff6763,
-  A700: #ff4e4a,
-  contrast: common.$contrast,
+// M3 palettes generated from POA brand colors
+$palettes: (
+  primary: poa.$primary-palette,
+  tertiary: poa.$tertiary-palette,
 );
 
-@include mat.elevation-classes();
-@include mat.app-background();
-
-$custom-theme: theme.build-custom-theme($theme-name, $primary-palette, common.$default-palette);
+// Build M3 theme
+$custom-theme: theme.build-custom-theme-m3(
+  $theme-name,
+  $primary-color,
+  $tertiary-color,
+  $custom-colors,
+  common.$default-palette,
+  $background-color,
+  $palettes
+);
 
-@include mat.all-component-themes($custom-theme);
-@include mat.all-component-typographies($custom-theme);
-@include common.theme($theme-name, $custom-theme);
+@include theme-entry.apply-theme($custom-theme);