@porscheinformatik/material-addons 21.0.4 → 22.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porscheinformatik/material-addons",
-  "version": "21.0.4",
+  "version": "22.0.0",
   "description": "Custom theme and components for Angular Material",
   "homepage": "https://github.com/porscheinformatik/material-addons",
   "repository": {

package/themes/carcat-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: #0072a3, tertiary: #005073, error: #c21d00
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #001e2f,
+    20: #00344d,
+    25: #00405d,
+    30: #004c6e,
+    35: #00587f,
+    40: #006590,
+    50: #207eb0,
+    60: #4498cb,
+    70: #63b3e8,
+    80: #89ceff,
+    90: #c8e6ff,
+    95: #e5f2ff,
+    98: #f6faff,
+    99: #fcfcff,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    10: #001e2f,
+    20: #163346,
+    25: #223e51,
+    30: #2e4a5d,
+    35: #3a5569,
+    40: #466276,
+    50: #5f7a8f,
+    60: #7894aa,
+    70: #93afc5,
+    80: #aecae1,
+    90: #c9e6fe,
+    95: #e5f2ff,
+    98: #f6faff,
+    99: #fcfcff,
+    100: #ffffff,
+  ),
+  tertiary: (
+    0: #000000,
+    10: #001e2e,
+    20: #00344d,
+    25: #00405d,
+    30: #004c6d,
+    35: #12587b,
+    40: #246488,
+    50: #427da2,
+    60: #5d97bd,
+    70: #78b2d9,
+    80: #94cdf6,
+    90: #c8e6ff,
+    95: #e5f2ff,
+    98: #f6faff,
+    99: #fbfcff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #181c1f,
+    20: #2d3134,
+    25: #383c3f,
+    30: #43474b,
+    35: #4f5357,
+    40: #5b5f63,
+    50: #74777b,
+    60: #8e9195,
+    70: #a8abb0,
+    80: #c4c7cb,
+    90: #e0e3e7,
+    95: #eef1f5,
+    98: #f7f9fe,
+    99: #fcfcff,
+    100: #ffffff,
+    4: #0b0f12,
+    6: #101417,
+    12: #1c2023,
+    17: #272a2e,
+    22: #313539,
+    24: #363a3d,
+    87: #d7dade,
+    92: #e6e8ed,
+    94: #ebeef2,
+    96: #f1f4f8,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #141d23,
+    20: #293138,
+    25: #343c43,
+    30: #40484f,
+    35: #4b535b,
+    40: #575f67,
+    50: #707880,
+    60: #89929a,
+    70: #a4acb4,
+    80: #bfc7d0,
+    90: #dbe3ec,
+    95: #eaf2fa,
+    98: #f6faff,
+    99: #fcfcff,
+    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/carcat.scss

@@ -1,43 +1,43 @@
-@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: 'poba';
+$theme-name: 'carcat';
 
-$primary-palette: (
-  50: #79c6e6,
-  100: #64bfe6,
-  200: #39b3e8,
-  300: #11a6e6,
-  400: #078dc6,
-  500: #0072a3,
-  600: #005579,
-  700: #00374f,
-  800: #001a25,
-  900: black,
-  A100: #4cb7e6,
-  A200: #23b7e8,
-  A400: #0098d9,
-  A700: #005073,
-  contrast: common.$contrast,
-  background-color: #fcfcfc,
+// M3 Theme Configuration
+$primary-color: #0072a3; // Former palette 500 value
+$tertiary-color: #005073; // Info color
+$background-color: #fcfcfc;
+
+$custom-colors: (
   warn-color: #ad7600,
   error-color: #c21d00,
   info-color: #005073,
   success-color: #3c8500,
 );
 
-@include mat.elevation-classes();
-@include mat.app-background();
+// M3 palettes generated from CARCAT brand colors
+$palettes: (
+  primary: carcat.$primary-palette,
+  tertiary: carcat.$tertiary-palette,
+);
 
-$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);
 
+// Custom alert density for CARCAT theme (preserved from M2)
 mad-alert {
   .alert.small {
     @include mat.icon-button-density(-3);

package/themes/common/components/_button.scss

@@ -0,0 +1,147 @@
+@use '@angular/material' as mat;
+
+@mixin button-theme() {
+  @include mat.button-overrides(
+    (
+      filled-container-shape: var(--container-shape),
+      outlined-container-shape: var(--container-shape),
+      protected-container-shape: var(--container-shape),
+      text-container-shape: var(--container-shape),
+      tonal-container-shape: var(--container-shape),
+    )
+  );
+
+  .mdc-button.mad-uppercase {
+    text-transform: uppercase;
+  }
+
+  .mad-outline.mat-mdc-outlined-button:not(:disabled) {
+    --mat-button-outlined-outline-color: var(--mat-button-outlined-label-text-color);
+  }
+
+  // M3 Button Color Classes
+  // Filled buttons (mat-flat-button) - these rules are nested inside html{} via theme-styles
+  // mixin, so we use background-color directly to override mat.all-component-themes()
+  .mat-mdc-unelevated-button.mat-unthemed:not(:disabled):not(.mad-danger),
+  .mat-mdc-unelevated-button.mat-primary:not(:disabled) {
+    --mat-button-filled-container-color: var(--main-primary);
+    --mdc-filled-button-label-text-color: white;
+    background-color: var(--main-primary);
+    color: white;
+  }
+
+  .mat-mdc-unelevated-button.mad-danger:not(:disabled) {
+    --mat-button-filled-container-color: var(--error-color);
+    --mdc-filled-button-label-text-color: white;
+    background-color: var(--error-color);
+    color: white;
+  }
+
+  // Raised buttons (mat-raised-button) - same override pattern as filled buttons
+  .mat-mdc-raised-button.mat-primary:not(:disabled) {
+    --mat-button-protected-container-color: var(--main-primary);
+    --mat-button-protected-label-text-color: white;
+    background-color: var(--main-primary);
+    color: white;
+  }
+
+  // Outlined buttons (mat-stroked-button) - override M3 --mat-button-* variables
+  // Support both mad-primary (library class) and mat-primary (Angular Material class)
+  .mat-mdc-outlined-button.mad-primary:not(:disabled),
+  .mat-mdc-outlined-button.mat-primary:not(:disabled) {
+    --mat-button-outlined-label-text-color: var(--main-primary);
+    --mat-button-outlined-outline-color: var(--main-primary);
+  }
+
+  .mat-mdc-outlined-button.mad-accent:not(:disabled) {
+    --mat-button-outlined-label-text-color: var(--mat-sys-secondary, #625b71);
+    --mat-button-outlined-outline-color: var(--mat-sys-secondary, #625b71);
+  }
+
+  .mat-mdc-outlined-button.mad-warn:not(:disabled) {
+    --mat-button-outlined-label-text-color: var(--error-color);
+    --mat-button-outlined-outline-color: var(--error-color);
+  }
+
+  // Text buttons (mat-button) - override M3 --mat-button-* variables
+  // Support both mad-primary (library class) and mat-primary (Angular Material class)
+  .mat-mdc-button.mad-primary:not(:disabled),
+  .mat-mdc-button.mat-primary:not(:disabled) {
+    --mat-button-text-label-text-color: var(--main-primary);
+  }
+
+  .mat-mdc-button.mad-accent:not(:disabled) {
+    --mat-button-text-label-text-color: var(--mat-sys-secondary, #625b71);
+  }
+
+  .mat-mdc-button.mad-warn:not(:disabled) {
+    --mat-button-text-label-text-color: var(--error-color);
+  }
+
+  // FAB buttons - M3 defaults to tertiary-container, override to primary
+  .mat-mdc-fab.mat-primary:not(:disabled),
+  .mat-mdc-fab.mat-unthemed:not(:disabled) {
+    --mdc-fab-container-color: var(--main-primary);
+    --mat-fab-container-color: var(--main-primary);
+    --mat-fab-foreground-color: white;
+    --mat-fab-state-layer-color: white;
+  }
+
+  .mat-mdc-mini-fab.mat-primary:not(:disabled),
+  .mat-mdc-mini-fab.mat-unthemed:not(:disabled) {
+    --mdc-fab-small-container-color: var(--main-primary);
+    --mat-fab-small-container-color: var(--main-primary);
+    --mat-fab-small-foreground-color: white;
+    --mat-fab-small-state-layer-color: white;
+  }
+
+  .mat-mdc-mini-fab.mat-accent:not(:disabled) {
+    --mdc-fab-small-container-color: var(--mat-sys-secondary, #625b71);
+    --mat-fab-small-container-color: var(--mat-sys-secondary, #625b71);
+    --mat-fab-small-foreground-color: white;
+    --mat-fab-small-state-layer-color: white;
+  }
+
+  // Icon buttons - M3 no longer applies primary color by default
+  .mat-mdc-icon-button.mat-primary:not(:disabled) {
+    --mat-icon-button-icon-color: var(--main-primary);
+    --mat-icon-button-state-layer-color: var(--main-primary);
+    color: var(--main-primary);
+  }
+
+  // Standalone mat-icon with color class (replaces deprecated color input)
+  .mat-icon.mat-primary {
+    color: var(--main-primary);
+  }
+
+  .mat-icon.mat-accent {
+    color: var(--mat-sys-secondary, #625b71);
+  }
+}
+
+.mad-button-group {
+  button,
+  a {
+    border-left-width: 0;
+    border-radius: 0;
+
+    &:first-child {
+      border-left-width: var(--mat-button-outlined-outline-width, 1px);
+      border-bottom-left-radius: var(--mat-button-outlined-container-shape, var(--mat-shape-small, 4px));
+      border-top-left-radius: var(--mat-button-outlined-container-shape, var(--mat-shape-small, 4px));
+    }
+
+    &:last-child {
+      border-bottom-right-radius: var(--mat-button-outlined-container-shape, var(--mat-shape-small, 4px));
+      border-top-right-radius: var(--mat-button-outlined-container-shape, var(--mat-shape-small, 4px));
+    }
+
+    &:disabled:has(+ button:not(:disabled)) {
+      border-right-width: 0;
+    }
+
+    &:disabled + button:not(:disabled) {
+      border-left-width: var(--mat-button-outlined-outline-width, 1px);
+    }
+  }
+}

package/themes/common/components/_color-overrides.scss

@@ -0,0 +1,33 @@
+@mixin component-colors() {
+  .clickable-table-row:hover,
+  .mat-row-link:hover {
+    background-color: var(--table-hover-color);
+  }
+
+  .mat-mdc-form-field-required-marker {
+    color: var(--warn-color);
+  }
+
+  .mat-chip.mat-standard-chip.mat-warn {
+    color: var(--warn-color);
+    border: 1px solid var(--warn-color);
+  }
+
+  .mat-mdc-outlined-button {
+    border-color: var(--main-primary) !important;
+  }
+
+  .mat-chip-selected {
+    border: 1px solid var(--main-primary) !important;
+    color: var(--main-primary) !important;
+    background-color: var(--mat-sys-surface) !important;
+  }
+
+  .selected-drag-list {
+    border-color: var(--main-primary) !important;
+  }
+
+  .active-column-definition {
+    color: var(--main-primary) !important;
+  }
+}

package/themes/common/components/_flowbar.scss

@@ -0,0 +1,27 @@
+@mixin flowbar-theme() {
+  mad-flowbar {
+    .mat-horizontal-stepper-header {
+      padding: 0;
+      height: auto;
+    }
+
+    .mat-step-header[aria-labelledby='disabled'] {
+      pointer-events: none !important;
+      cursor: not-allowed;
+    }
+
+    .mat-horizontal-content-container {
+      padding: 0 0 10px 0;
+    }
+
+    .mat-stepper-horizontal-line {
+      margin: 0 5px;
+      border-top-width: 4px;
+      border-top-color: var(--step-border-color);
+    }
+  }
+
+  mad-flowbar .mat-stepper-horizontal-line {
+    border-top-color: var(--step-border-color);
+  }
+}

package/themes/common/components/_material-overrides.scss

@@ -0,0 +1,44 @@
+@mixin material-overrides() {
+  .mat-badge-medium .mat-badge-content {
+    width: 22px;
+    height: 22px;
+    line-height: 22px;
+    font-size: 12px;
+    --mat-badge-text-size: 12px;
+    --mat-badge-container-size: 22px;
+  }
+
+  .mat-badge-primary .mat-badge-content {
+    --mat-badge-background-color: var(--main-primary);
+    --mat-badge-text-color: white;
+    background-color: var(--main-primary);
+    color: white;
+  }
+
+  .mat-badge-warn .mat-badge-content {
+    --mat-badge-background-color: var(--error-color);
+    --mat-badge-text-color: white;
+    background-color: var(--error-color);
+    color: white;
+  }
+
+  .mat-badge-accent .mat-badge-content {
+    --mat-badge-background-color: var(--mat-sys-secondary, #625b71);
+    --mat-badge-text-color: white;
+    background-color: var(--mat-sys-secondary, #625b71);
+    color: white;
+  }
+
+  .mdc-tooltip__surface {
+    --mdc-plain-tooltip-container-color: #616161;
+    --mdc-plain-tooltip-supporting-text-color: white;
+    background-color: #616161;
+    color: white;
+  }
+
+  .mat-mdc-form-field {
+    --mdc-outlined-text-field-outline-color: var(--mat-sys-outline);
+    --mdc-outlined-text-field-focus-outline-color: var(--main-primary);
+    --mdc-outlined-text-field-hover-outline-color: var(--mat-sys-on-surface);
+  }
+}

package/themes/common/components/_readonly.scss

@@ -0,0 +1,7 @@
+@mixin readonly-theme() {
+  .custom-tooltip {
+    font-size: 14px !important;
+    word-break: break-all !important;
+    white-space: normal !important;
+  }
+}

package/themes/common/components/_toolbar.scss

@@ -0,0 +1,6 @@
+@mixin toolbar-theme() {
+  .mad-toolbar .mat-badge-content {
+    bottom: -7px;
+    right: -7px;
+  }
+}

package/themes/common/foundation/_base.scss

@@ -0,0 +1,9 @@
+table {
+  width: 100%;
+}
+
+app-root {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}

package/themes/common/foundation/_fonts.scss

@@ -0,0 +1,16 @@
+@use 'material-icons/iconfont/material-icons.css';
+@use 'roboto-fontface/css/roboto/roboto-fontface.css';
+
+html {
+  font-family: Roboto, sans-serif;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}

package/themes/common/foundation/_typography.scss

@@ -0,0 +1,6 @@
+@mixin typography($theme-name, $theme) {
+  body,
+  .mat-typography {
+    font-size: 14px;
+  }
+}