@porscheinformatik/material-addons 21.0.4 → 22.0.1

package/themes/common/styles.scss

@@ -1,540 +1,31 @@
-@use 'sass:map';
 @use '@angular/material' as mat;
 @use './theme';
-
-@import 'material-icons/iconfont/material-icons.css';
-@import 'roboto-fontface/css/roboto/roboto-fontface.css';
+@use './components/button' as button;
+@use './components/color-overrides' as color-overrides;
+@use './components/flowbar' as flowbar;
+@use './components/material-overrides' as material-overrides;
+@use './components/readonly' as readonly;
+@use './components/toolbar' as toolbar;
+@use './foundation/base';
+@use './foundation/fonts';
+@use './foundation/typography' as typography;
+@use './foundation/utilities';
+@use './tokens/tokens' as tokens;
+@forward './tokens/tokens' show $default-palette;
 
 @include mat.elevation-classes();
 @include mat.app-background();
 
-//TODO Contrasts should be part of the themes!
-$contrast: (
-  50: rgba(black, 0.87),
-  100: rgba(black, 0.87),
-  200: rgba(black, 0.87),
-  300: rgba(black, 0.87),
-  400: rgba(black, 0.87),
-  500: white,
-  600: white,
-  700: white,
-  800: white,
-  900: white,
-  A100: rgba(black, 0.87),
-  A200: rgba(black, 0.87),
-  A400: rgba(black, 0.87),
-  A700: rgba(black, 0.87),
-);
-
-$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 color($theme-name, $theme) {
-  $main-primary: theme.get-main-color();
-  $selection-background: theme.get-selection-background();
-  $table-hover-color: theme.get-table-hover-color($main-primary);
-  $background-color: theme.get-background-color();
-  $warn-color: map-get(theme.$primary-palette, warn-color);
-  $error-color: map-get(theme.$primary-palette, error-color);
-  $hover-color: map-get(theme.$primary-palette, 50);
-  $panel-color: map-get(theme.$primary-palette, 900);
-  $panel-background-color: theme.map-get-or-default(theme.$primary-palette, panel-background-color);
-  $panel-border-color: theme.map-get-or-default(theme.$primary-palette, panel-border-color);
-  $panel-select-background: theme.map-get-or-default(theme.$primary-palette, panel-select-background);
-
-  $alert-success-background-color: theme.map-get-or-default(theme.$primary-palette, alert-success-background-color);
-  $alert-success-border-color: theme.map-get-or-default(theme.$primary-palette, alert-success-border-color);
-  $alert-success-text-color: theme.map-get-or-default(theme.$primary-palette, alert-success-text-color);
-
-  $alert-info-background-color: theme.map-get-or-default(theme.$primary-palette, alert-info-background-color);
-  $alert-info-border-color: theme.map-get-or-default(theme.$primary-palette, alert-info-border-color);
-  $alert-info-text-color: theme.map-get-or-default(theme.$primary-palette, alert-info-text-color);
-
-  $alert-warning-background-color: theme.map-get-or-default(theme.$primary-palette, alert-warning-background-color);
-  $alert-warning-border-color: theme.map-get-or-default(theme.$primary-palette, alert-warning-border-color);
-  $alert-warning-text-color: theme.map-get-or-default(theme.$primary-palette, alert-warning-text-color);
-
-  $alert-error-background-color: theme.map-get-or-default(theme.$primary-palette, alert-error-background-color);
-  $alert-error-border-color: theme.map-get-or-default(theme.$primary-palette, alert-error-border-color);
-  $alert-error-text-color: theme.map-get-or-default(theme.$primary-palette, alert-error-text-color);
-
-  // Remark: when we style the addons components there is no theme set, yet. So we have multiple possibilities:
-  // a) include the components in the mixin (so it gets styled when the theme is set)
-  // b) use the theme-functions (e.g. see nav-child.component.scss)
-  // c) use css-variables which are overwritten at runtime (what we currently prefer)
-
-  :root {
-    --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: #{$panel-color};
-    --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};
-  }
-
-  @if variable-exists(table-hover-color) {
-    .clickable-table-row:hover,
-    .mat-row-link:hover {
-      background-color: $table-hover-color;
-    }
-  } @else {
-    @warn 'variable $table-hover-color in theme #{$theme-name} is not defined';
-  }
-
-  @if variable_exists(warn-color) {
-    .mat-mdc-form-field-required-marker {
-      color: $warn-color;
-    }
-
-    .mat-chip.mat-standard-chip.mat-warn {
-      color: $warn-color;
-      border: 1px solid $warn-color;
-    }
-  } @else {
-    @warn 'variable $warn-color in theme #{$theme-name} is not defined';
-  }
-
-  @if variable_exists(main-primary) {
-    .mat-mdc-outlined-button {
-      border-color: $main-primary !important;
-    }
-    .mat-chip-selected {
-      border: 1px solid $main-primary !important;
-      color: $main-primary !important;
-    }
-    .mat-stroked-button {
-      border-color: $main-primary !important;
-    }
-    .selected-drag-list {
-      border-color: $main-primary !important;
-    }
-    .active-column-definition {
-      color: $main-primary !important;
-    }
-  } @else {
-    @warn 'variable $main-primary  in theme #{$theme-name} is not defined';
-  }
-
-  .mat-chip-selected {
-    background-color: white !important;
-  }
-}
-
-@mixin typography($theme-name, $theme) {
-  $typography-config: mat.m2-get-typography-config($theme);
-
-  // set custom typography styles here
-}
-
 @mixin theme($theme-name, $theme) {
-  $color-config: mat.m2-get-color-config($theme-name, $theme);
-  @if $color-config != null {
-    @include color($theme-name, $theme);
-  }
-
-  $typography-config: mat.m2-get-typography-config($theme-name, $theme);
-  @if $typography-config != null {
-    @include typography($theme-name, $theme);
-  }
-}
-
-body {
-  margin: 0;
-}
-
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-.spacer {
-  flex: 1 1 auto;
-}
-
-table {
-  width: 100%;
-}
-
-app-root {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-}
-
-.mat-mdc-input-element:disabled {
-  cursor: auto;
-  color: black;
-}
-
-.mat-mdc-select-disabled .mat-select-value {
-  color: black;
-}
-
-.mat-mdc-form-field .mat-mdc-select.mat-select-disabled .mat-select-arrow {
-  color: white;
-}
-
-.mat-mdc-checkbox-disabled .mat-checkbox-label {
-  color: black;
-}
-
-.clickable-table-row:hover,
-.mat-row-link:hover {
-  cursor: pointer;
-}
-
-.button-panel {
-  padding-top: 16px;
-  padding-bottom: 8px;
-  padding-right: 16px;
-}
-
-mad-primary-button {
-  margin-right: 8px;
-}
-
-mad-outline-button {
-  margin-right: 8px;
-}
-
-mad-link-button {
-  margin-right: 8px;
-}
-
-mad-danger-button {
-  margin-right: 8px;
-}
-
-.simple-edit-section {
-  display: flex;
-  flex-direction: column;
-}
-
-.simple-edit-section > * {
-  width: 100%;
-  max-width: 640px;
-}
-
-.tiny-table-section {
-  display: flex;
-  flex-direction: column;
-}
-
-.table-condensed > .mat-mdc-row {
-  min-height: 36px;
-}
-
-.small-input {
-  max-width: 90px !important;
-}
-
-.tiny-input {
-  max-width: 60px !important;
-}
-
-.main-content {
-  padding: 73px 16px 16px;
-}
-
-.mat-mdc-tab-header {
-  margin: -16px -16px 16px;
-}
-
-.mat-mdc-row {
-  position: relative;
-}
-
-.mat-row-link {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-}
-
-.mat-mdc-button,
-.mat-mdc-unelevated-button,
-.mat-mdc-raised-button,
-.mat-mdc-outlined-button,
-.mat-mdc-icon-button {
-  text-transform: uppercase !important;
-}
-
-.toolbar-title {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.mat-mdc-select-disabled {
-  color: rgba(0, 0, 0, 0.38);
-}
-
-.sticky-paginator {
-  background-color: white;
-  position: fixed;
-  padding-right: 16px;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  z-index: 5;
-  text-align: right;
-}
-
-.with-sticky-paginator {
-  padding-bottom: 64px;
-}
-
-.criteria-panel {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-}
-
-.criteria-panel > * {
-  padding-right: 16px;
-}
-
-.mat-chip.mat-standard-chip {
-  background-color: white;
-  color: rgba(0, 0, 0, 0.87);
-  border: 1px solid rgba(0, 0, 0, 0.4);
-}
-
-.mat-chip.mat-standard-chip.mat-warn {
-  background-color: white;
-}
-
-.mat-mdc-tab-group {
-  max-width: 100%;
-}
-
-.large-icon {
-  font-size: xx-large;
-}
-
-.transparent .mat-mdc-dialog-container {
-  box-shadow: none;
-  background: rgba(0, 0, 0, 0);
-}
-
-/*
-* This class can be used to fix mat-tabs at the top of a page
-*/
-.fixedtabs > .mat-mdc-tab-header {
-  z-index: 10;
-  width: 100vw;
-  position: fixed;
-  background-color: white;
-}
-
-.mat-mdc-dialog-actions {
-  justify-content: flex-end;
-}
-
-.mat-md-card-header-text {
-  margin: 0 !important;
-}
-
-mat-icon.mat-icon.narrow-icon {
-  margin-right: 0;
-  margin-left: 0;
-}
-
-button.mat-mdc-menu-item {
-  min-height: 38px;
-}
-
-.mat-toolbar {
-  background-color: var(--panel-select-background);
-
-  .mat-mdc-button {
-    min-width: 0;
-    padding: 0;
-    margin: 0 5px;
-  }
-}
-
-.drop-down {
-  mat-icon.mat-icon.notranslate {
-    padding: 0;
-    margin: 0;
-  }
-
-  .mat-mdc-outlined-button:not(:disabled) {
-    color: var(--mat-button-outlined-label-text-color, inherit);
-    border-color: var(--mat-button-outlined-, inherit);
-  }
-
-  &::after {
-    content: '\02C7';
-    font-size: 2em !important;
-    padding-top: 15px;
-    padding-left: 3px;
-  }
-}
-
-// full page
-.top-nav-bar {
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 2;
-}
-
-//maybe we have different navs for desktop, mobile,...
-.top-main-nav {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  background-color: white;
-
-  > .mat-mdc-button {
-    &:last-child {
-      margin-left: auto;
-    }
-  }
-}
-
-.flex-spacer {
-  flex-grow: 1;
-}
-
-.logo {
-  display: flex;
-  height: 26px;
-  margin-right: 20px;
-}
-
-.logo a {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  color: var(--main-primary);
-}
-
-@mixin ellipsis-text-overflow {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.ellipsis-text-overflow {
-  @include ellipsis-text-overflow;
-}
-
-@media print {
-  .no-print,
-  .no-print * {
-    display: none !important;
-    width: 0 !important;
-    height: 0 !important;
-  }
-
-  mat-paginator {
-    display: none !important;
-    height: 0 !important;
-  }
-
-  mat-sidenav-content {
-    margin: 0 !important;
-  }
-
-  .mat-mdc-raised-button,
-  .mat-mdc-outlined-button,
-  .button-panel {
-    display: none !important;
-  }
-
-  mad-primary-button,
-  mad-outline-button,
-  mad-danger-button,
-  mad-link-button,
-  mad-icon-button {
-    display: none !important;
-  }
-
-  .criteria-panel {
-    display: none !important;
-    height: 0 !important;
-  }
-
-  async-autocomplete mat-icon {
-    display: none !important;
-  }
-  .mat-mdc-tab-label:not(.mat-tab-label-active) {
-    display: none !important;
-  }
-}
-
-.mad-read-only {
-  mat-label {
-    color: black;
-  }
-  .content {
-    color: black !important;
-  }
-  .mdc-notched-outline__leading,
-  .mdc-notched-outline__notch,
-  .mdc-notched-outline__trailing {
-    border: none !important;
-  }
-}
-
-// needed for the padding fix when subscriptSizing: 'dynamic'
-mat-form-field .mat-mdc-form-field {
-  &-subscript-wrapper {
-    margin-bottom: 1.25em;
-  }
-}
-
-// the label of the outline input is set into the padding of the form-field-component
-.mat-form-field-appearance-outline {
-  margin-top: 8px;
-}
-
-.pointer {
-  cursor: pointer;
+  @include tokens.color-variables($theme-name, $theme);
 }
 
-.quick-list-row {
-  display: flex;
-  flex-direction: row;
-  mad-icon-button {
-    margin-top: 8px;
-  }
+@mixin theme-styles($theme-name, $theme) {
+  @include color-overrides.component-colors();
+  @include toolbar.toolbar-theme();
+  @include readonly.readonly-theme();
+  @include flowbar.flowbar-theme();
+  @include typography.typography($theme-name, $theme);
+  @include button.button-theme();
+  @include material-overrides.material-overrides();
 }

package/themes/common/theme-entry.scss

@@ -0,0 +1,52 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use './theme';
+@use './styles' as common;
+
+$default-html-overrides: (
+  --mat-sys-surface: #ffffff,
+  --mat-sys-surface-variant: #f5f5f5,
+  --mat-sys-surface-container-lowest: #ffffff,
+  --mat-sys-surface-container-low: #ffffff,
+  --mat-sys-surface-container: #fafafa,
+  --mat-sys-surface-container-high: #f5f5f5,
+  --mat-sys-surface-container-highest: #eeeeee,
+);
+
+@mixin apply-theme($theme-config, $options: ()) {
+  $theme-name: theme.get-theme-name($theme-config);
+  $mat-theme: theme.material-theme($theme-config);
+  $root-overrides: (
+    --mat-sys-on-surface: #181c1f,
+  );
+  $html-overrides: $default-html-overrides;
+
+  @if map.has-key($options, root-overrides) {
+    $root-overrides: map.get($options, root-overrides);
+  }
+
+  @if map.has-key($options, html-overrides) and map.get($options, html-overrides) != null {
+    $html-overrides: map.merge($html-overrides, map.get($options, html-overrides));
+  }
+
+  :root {
+    @include common.theme($theme-name, $theme-config);
+    @include _emit-declarations($root-overrides);
+  }
+
+  html {
+    @include mat.system-level-colors($mat-theme);
+    @include _emit-declarations($html-overrides);
+    @include mat.all-component-themes($mat-theme);
+    @include mat.typography-hierarchy($mat-theme);
+    @include common.theme-styles($theme-name, $theme-config);
+  }
+}
+
+@mixin _emit-declarations($declarations) {
+  @if $declarations != null {
+    @each $prop, $value in $declarations {
+      #{$prop}: #{$value};
+    }
+  }
+}