@ihk-gfi/lux-components-theme 11.13.0 → 14.0.0

package/src/base/_luxcomponents.scss

@@ -1,8 +1,21 @@
+@use "sass:map";
+@use "components/luxAppHeaderAc.scss";
+@use "components/luxLinkPlain.scss";
+@use "components/luxTileAc.scss";
+@use "components/luxFormControlWrapper.scss";
+@use "components/luxFormControlsAuthentic.scss";
+@use "components/luxMasterDetailAc.scss";
+@use "luxcommon";
+@use "luxpalette";
+@use "../public/global";
+@use "luxelevations";
+
+
 /*
  * Theming for LUX-App-Content
  */
 lux-app-content {
-  background-color: $app-content-bg;
+  background-color: luxcommon.$app-content-bg;
 }
 
 /*
@@ -10,11 +23,11 @@ lux-app-content {
  */
 lux-app-footer {
   .lux-app-footer {
-    background-color: $app-footer-bg;
+    background-color: luxcommon.$app-footer-bg;
   }
 
   .footerFont {
-    font-family: $app-font-family;
+    font-family: global.$app-font-family;
   }
 }
 
@@ -23,106 +36,170 @@ lux-app-footer {
  */
 lux-app-header {
   .lux-app-header {
-    background-color: $app-header-bg;
+    background-color: luxcommon.$app-header-bg;
+    @include luxelevations.lux-elevation-z6();
 
     .lux-show-border {
-      border-left: 1px solid $light-dividers;
+      border-left: 1px solid luxcommon.$light-dividers;
     }
 
     .lux-header-title {
-      color: map-get(map-get($lux-palette-primary, contrast), 500);
+      color: map.get(map.get(luxpalette.$lux-palette-primary, contrast), 500);
     }
 
     div.lux-header-action {
       lux-button {
         button {
-
           &:not(.mat-accent):not(.mat-warn):not(.mat-primary):not(.mat-button-disabled) {
-            color: map-get(map-get($lux-palette-primary, contrast), 500);
+            color: map.get(map.get(luxpalette.$lux-palette-primary, contrast), 500);
           }
 
           &:not(.mat-accent):not(.mat-warn):not(.mat-primary).mat-button-disabled {
-            color: $dark-disabled-text;
+            color: luxcommon.$dark-disabled-text;
           }
 
           &.mat-accent:not(.mat-button-disabled) {
-            color: map-get($lux-palette_accent, A100);
+            color: map.get(luxpalette.$lux-palette_accent, A100);
           }
 
           &.mat-warn:not(.mat-button-disabled) {
-            color: map-get($lux-palette_warn, A100);
+            color: map.get(luxpalette.$lux-palette_warn, A100);
           }
 
           &.mat-primary:not(.mat-button-disabled) {
-            color: map-get($lux-palette_primary, A100);
+            color: map.get(luxpalette.$lux-palette_primary, A100);
+          }
+
+          &.lux-button-rounded {
+            @include luxelevations.lux-elevation-z0;
           }
         }
       }
     }
 
     button:not(.mat-primary):not(.mat-warn):not(.mat-accent):not(.lux-button-rounded) {
-      color: map-get(map-get($lux-palette-primary, contrast), 500);
+      color: map.get(map.get(luxpalette.$lux-palette-primary, contrast), 500);
     }
 
     .lux-header-user {
       .lux-header-user-short {
         > span {
-          color: map-get($lux-palette_primary, 500);
-          background-color: map-get(map-get($lux-palette-primary, contrast), 500);
+          color: map.get(luxpalette.$lux-palette_primary, 500);
+          background-color: map.get(map.get(luxpalette.$lux-palette-primary, contrast), 500);
         }
       }
     }
   }
 
   .lux-side-nav-header, .lux-side-nav-footer {
-    color: map-get($lux-palette_primary, A400);
+    color: map.get(luxpalette.$lux-palette_primary, A400);
   }
 
   .lux-header-side-nav {
     .lux-side-nav-trigger-active {
-      background-color: $dark-focused;
+      background-color: luxcommon.$dark-focused;
     }
   }
 
   .lux-side-nav .lux-side-nav-content {
     lux-button, .lux-menu-item, .lux-action-nav-menu lux-button {
-      color: map-get($lux-palette_primary, 500);
+      color: map.get(luxpalette.$lux-palette_primary, 500);
+      font-weight: 600;
     }
   }
 }
 
 // Menü wird im Cdk-Overlay dargestellt und hängt nicht unter dem LUX-APP-HEADER selbst.
 .lux-right-nav-menu .lux-menu-item {
-  color: map-get($lux-palette_primary, 500);
+  color: map.get(luxpalette.$lux-palette_primary, 500);
 }
 
 /*
  * Theming for LUX-Button
  */
 lux-button button.lux-button {
-  font-family: $app-font-family;
+  font-family: global.$app-font-family;
+  font-size: luxcommon.$button-font-size;
+  font-weight: 600;
 
-  &.mat-button, &.mat-raised-button {
-    height: $button-height;
-    margin-left: $outline-width;
-    margin-right: $outline-width;
+  &.mat-button, &.mat-raised-button, &.mat-stroked-button, &.mat-flat-button {
+    height: luxcommon.$button-height;
   }
 
   &.mat-button.mat-button-disabled,
   &.mat-raised-button.mat-button-disabled,
+  &.mat-flat-button.mat-button-disabled,
+  &.mat-stroked-button.mat-button-disabled,
+  &.mat-raised-button.mat-button-disabled:not([class*=mat-elevation-z]),
   &.mat-fab.mat-button-disabled {
-    color: $dark-disabled-text;
+    color: luxcommon.$dark-disabled-text;
+    @include luxelevations.lux-elevation-z0;
+  }
+
+  &.mat-raised-button:not([class*=mat-elevation-z]) {
+    @include luxelevations.lux-elevation-z2;
   }
 
   &.lux-icon-button {
-    height: $button-height;;
-    padding-top: 4px;
-    padding-bottom: 2px;
+    height: luxcommon.$button-height;
+    lux-icon {
+      display: inline-block;
+    }
   }
 
   &.lux-button-rounded {
-    height: $button-fav-height;
-    width: $button-fav-height;
+    height: luxcommon.$button-fav-height;
+    width: luxcommon.$button-fav-height;
+    
+
+    @include luxelevations.lux-elevation-z2;
+
+    .mat-button-wrapper {
+      padding: 0;
+      font-size: 15px;
+    }
+
+    lux-icon.lux-button-icon-round {
+      height: 20px;
+      width: 20px;
+      line-height: 1;
+      i {
+        line-height: 1;
+        display: inline-block;
+      }
+      mat-icon.mat-icon.lux-material-icon,
+      mat-icon.mat-icon.lux-lx-icon-no-size {
+        height: 20px;
+        width: 20px;
+      }
+    }
+  }
+  
+  lux-icon.lux-button-icon:not(.lux-button-icon-round) {
+    line-height: 1em;
+    &.lux-lx-icon {
+      height: luxcommon.$button-font-size;
+      width: luxcommon.$button-font-size;
+      font-size: luxcommon.$button-font-size;
+    }
+
+    i {
+      line-height: 1;
+      font-size: luxcommon.$button-font-size;
+      vertical-align: middle;
+    }
+
+    mat-icon.mat-icon.lux-material-icon:not(.lux-lx-icon, .lux-lx-icon-no-size) {
+      line-height: 1;
+      font-size: luxcommon.$button-font-size;
+      vertical-align: middle;
+      height: unset !important;
+      width: unset !important;
+    }
+    mat-icon.lux-lx-icon-no-size{
+      height: luxcommon.$button-font-size;
+      width: luxcommon.$button-font-size;
+    }
   }
 }
 
@@ -131,14 +208,14 @@ lux-button button.lux-button {
  */
 lux-checkbox {
   .mat-checkbox-disabled label {
-    color: $dark-disabled-text;
+    color: luxcommon.$dark-disabled-text;
   }
 
   .mat-checkbox-checked:not(.mat-checkbox-disabled) label span.mat-checkbox-inner-container {
-    background-color: map-get($lux-palette_primary, 500);
+    background-color: map.get(luxpalette.$lux-palette_primary, 500);
 
     svg {
-      background-color: map-get($lux-palette_primary, 500);
+      background-color: map.get(luxpalette.$lux-palette_primary, 500);
     }
   }
 }
@@ -146,28 +223,43 @@ lux-checkbox {
 /**
  * Theming für LUX-Card
  */
-lux-card {
+lux-card{
+
   .lux-card-content-container mat-tab-group.lux-tab-group .lux-tabs-notification-icon {
-    border-color: $app-data-bg;
+    border-color: luxcommon.$app-data-bg;
   }
 
-  .lux-highlight {
-    color: $dark-primary-text;
+  .lux-card-content-container {
+    overflow-x: hidden;
+    padding: luxcommon.$form-control-buffer;
+    font-family: luxcommon.$app-font-family;
+
+    > * {
+      margin-bottom: 0;
+    }
   }
 
-  .mat-card-subtitle {
-    color: $dark-secondary-text;
+  .lux-highlight {
+    color: luxcommon.$dark-primary-text;
   }
 
   .lux-card-content-expanded {
-    background: $app-data-bg;
+    background: luxcommon.$app-data-bg;
+  }
+
+  .mat-card:not([class*="mat-elevation-z"]) {
+    @include luxelevations.lux-elevation-z1;
   }
 }
 
 /**
  * Theming für LUX-Chips
  */
+
 lux-chips {
+  min-height: calc(#{luxcommon.$form-control-complete-height} + 20px);
+  margin-bottom: 20px;
+
   .lux-chips-autocomplete-icon {
     color: var(--lux-theme-primary-500);
     font-size: 24px;
@@ -184,40 +276,46 @@ lux-chips {
     mat-chip {
       // Löschicon (luxSelected=true)
       &.mat-chip-selected .mat-chip-remove {
-        color: $app-data-bg !important;
+        color: luxcommon.$app-data-bg !important;
         opacity: 1 !important;
       }
 
       // Löschicon (luxSelected=false)
       &:not(.mat-chip-selected) .mat-chip-remove {
-        color: $app-data-bg !important;
+        color: luxcommon.$app-data-bg !important;
         opacity: 1 !important;
       }
 
       &.mat-chip-disabled {
-        background-color: $dark-disabled-text !important;
-        color: $app-data-bg !important;
+        background-color: luxcommon.$dark-disabled-text !important;
+        color: luxcommon.$app-data-bg !important;
         opacity: 1;
 
         lux-icon {
           i,
           mat-icon {
-            color: $app-data-bg;
+            color: luxcommon.$app-data-bg;
           }
         }
       }
     }
+    mat-chip-list {
+      & div.mat-chip-list-wrapper {
+        margin: 0px 0px 0px -4px;
+      }
+    }
   }
 }
 
 .lux-chips-autocomplete-panel {
-  padding: $outline-width;
-  margin-left: 6px;
-  margin-right: 6px;
+  padding: luxcommon.$outline-width;
+  margin-top: -20px;
+  margin-left: 0;
+  margin-right: 0;
   border-radius: 4px;
 
   mat-option:not(:last-of-type) {
-    margin-bottom: $outline-width;
+    margin-bottom: luxcommon.$outline-width;
   }
 }
 
@@ -227,11 +325,11 @@ lux-chips {
 lux-datepicker {
   mat-datepicker-toggle button {
     &:not(.mat-button-disabled) .mat-button-wrapper > svg {
-      color: map-get($lux-palette_primary, 500);
+      color: map.get(luxpalette.$lux-palette_primary, 500);
     }
 
     &.mat-button-disabled .mat-button-wrapper > svg {
-      color: $dark-disabled-text;
+      color: luxcommon.$dark-disabled-text;
     }
   }
 }
@@ -242,11 +340,23 @@ lux-datepicker {
 lux-datetimepicker {
   mat-datepicker-toggle button {
     &:not(.mat-button-disabled) .mat-button-wrapper > svg {
-      color: map-get($lux-palette_primary, 500);
+      color: map.get(luxpalette.$lux-palette_primary, 500);
     }
 
     &.mat-button-disabled .mat-button-wrapper > svg {
-      color: $dark-disabled-text;
+      color: luxcommon.$dark-disabled-text;
+    }
+  }
+}
+
+.lux-datetime-overlay-content {
+  mat-card.mat-card {
+    @include luxelevations.lux-elevation-z4();
+
+    lux-input div.lux-form-control {
+      min-height: unset;
+      margin: luxcommon.$form-control-buffer;
+      text-align: center;
     }
   }
 }
@@ -256,17 +366,19 @@ lux-datetimepicker {
  */
 .lux-dialog {
   .lux-dialog-title {
-    color: $dark-primary-text;
+    color: luxcommon.$dark-primary-text;
+  }
+  .mat-dialog-container {
+    @include luxelevations.lux-elevation-z24;
   }
 }
 
-
 /*
  * Theming for LUX-Divider
  */
 lux-divider {
   .mat-divider {
-    background-color: $dark-dividers;
+    background-color: luxcommon.$dark-dividers;
   }
 }
 
@@ -274,18 +386,20 @@ lux-divider {
  * Theming for LUX-File-List
  */
 lux-file-list .lux-file-list {
+  margin: luxcommon.$form-control-margin;
+
   .lux-file-list-entry-label, .lux-file-list-entry-icon {
-    color: $dark-secondary-text;
+    color: luxcommon.$dark-secondary-text;
   }
 
   .lux-card-title-container {
-    color: map-get($lux-palette_primary, 500);
+    color: map.get(luxpalette.$lux-palette_primary, 500);
   }
 
   .lux-file-list-entries {
     .lux-file-list-entry {
       .lux-file-list-entry-label:not(.lux-file-list-entry-label-disabled) {
-        color: $dark-secondary-text;
+        color: luxcommon.$dark-secondary-text;
       }
     }
   }
@@ -295,15 +409,25 @@ lux-file-list .lux-file-list {
     mat-card-content,
     span,
     i {
-      color: $dark-disabled-text;
+      color: luxcommon.$dark-disabled-text;
     }
 
     .lux-file-icon-hint {
       span {
-        text-decoration-color: $dark-disabled-text !important;
+        text-decoration-color: luxcommon.$dark-disabled-text !important;
       }
     }
   }
+  
+  &.lux-file-list-error {
+    mat-card-title .lux-card-title-container {
+      color: luxpalette.$lux-warn-color;
+    }
+  }
+
+  mat-card {
+    margin: 0 !important;
+  }
 }
 
 /*
@@ -311,13 +435,13 @@ lux-file-list .lux-file-list {
  */
 lux-file-progress {
   .lux-file-overlay {
-    background: $dark-focused;
+    background: luxcommon.$dark-focused;
 
     mat-spinner,
     mat-spinner svg {
       circle {
-        stroke: map-get($lux-palette_primary, 500);
-        background: map-get($lux-palette_primary, 500);
+        stroke: map.get(luxpalette.$lux-palette_primary, 500);
+        background: map.get(luxpalette.$lux-palette_primary, 500);
       }
     }
   }
@@ -483,7 +607,7 @@ lux-file-progress {
         display: flex;
         align-items: center;
 
-        button {
+        button.mat-button {
           padding: 0;
           margin: 0;
           border-radius: 8px;
@@ -493,6 +617,15 @@ lux-file-progress {
           i {
             font-size: 24px;
           }
+          .lux-lx-icon {
+            height: 24px;
+            width: 24px;
+            mat-icon.mat-icon.lux-lx-icon-no-size {
+              width: 24px;
+              height: 24px;
+            }
+          }
+          
         }
       }
     }
@@ -562,43 +695,57 @@ lux-file-progress {
  * Theming for LUX-Form-Controls
  */
 .lux-form-control {
+  margin: luxcommon.$form-control-margin;
+  min-height: luxcommon.$form-control-complete-height;
+  
+  .lux-label,
+  mat-hint,
+  mat-error {
+    color: luxcommon.$dark-secondary-text;
+  }
+
   .lux-form-control-container {
     padding: 6px 0 0 0;
 
-    &:after {
-      border-bottom: 1px solid $form-border-color;
+    input, textarea {
+      &:required {
+        @include luxelevations.lux-elevation-z0;
+      }
     }
-  }
 
-  .lux-label, mat-hint, mat-error {
-    color: $dark-secondary-text;
+    &:after {
+      border-bottom: 1px solid luxcommon.$form-border-color;
+    }
   }
 }
 
 .lux-form-control-error {
   .lux-form-control-label {
     > * {
-      color: $lux-warn-color !important;
+      color: luxpalette.$lux-warn-color !important;
     }
   }
 
   .lux-form-control-container {
-    border-color: $lux-warn-color !important;
+    $lux-selected-border-color: luxpalette.$lux-warn-color !important;
+    &:after { // inaktives form-control hat auch eine rote Linie (anstatt schwarz)
+      border-bottom: 1px solid luxpalette.$lux-warn-color;
+    }
   }
 
   .lux-form-control-misc {
     > * {
-      color: $lux-warn-color !important;
+      color: luxpalette.$lux-warn-color !important;
     }
   }
 }
 
 .lux-form-control-disabled {
   .lux-form-control-container {
-    color: $dark-disabled-text !important;
+    color: luxcommon.$dark-disabled-text !important;
 
     &:after {
-      border-bottom: 1px dashed $dark-disabled-text;
+      border-bottom: 1px dashed luxcommon.$dark-disabled-text;
     }
   }
 }
@@ -608,7 +755,7 @@ lux-file-progress {
  */
 lux-layout-card-row {
   .row-title {
-    color: $dark-primary-text;
+    color: luxcommon.$dark-primary-text;
   }
 }
 
@@ -617,7 +764,7 @@ lux-layout-card-row {
  */
 lux-layout-form-row {
   .row-title {
-    color: $dark-primary-text;
+    color: luxcommon.$dark-primary-text;
   }
 }
 
@@ -627,25 +774,36 @@ lux-layout-form-row {
 lux-list {
   .lux-list-empty-icon,
   .lux-list-empty-icon-text {
-    color: $dark-primary-text;
+    color: luxcommon.$dark-primary-text;
+  }
+  .mat-card:not([class*="mat-elevation-z"]) {
+    @include luxelevations.lux-elevation-z2;
+  }
+  
+  lux-list-item lux-card mat-card {
+    margin: luxcommon.$outline-width;
+  }
+
+  .mat-card-content.menu-item-content {
+    margin-bottom: 0;
   }
 }
 
 /*
  * Theming for LUX-Lookup-Components
  */
-lux-lookup-combobox {
+lux-lookup-combobox, lux-lookup-combobox-ac {
   mat-select {
     &[aria-disabled="true"] .mat-select-arrow {
       border-width: 7px;
       margin: 0;
-      color: $dark-disabled-text;
+      color: luxcommon.$dark-disabled-text;
     }
 
     &[aria-disabled="false"] .mat-select-arrow {
       border-width: 7px;
       margin: 0;
-      color: map-get($lux-palette_primary, 500);
+      color: map.get(luxpalette.$lux-palette_primary, 500);
     }
   }
 }
@@ -653,10 +811,49 @@ lux-lookup-combobox {
 // Optionen werden im Cdk-Overlay dargestellt und hängen nicht unter der Component selbst.
 .lux-autocomplete-panel, .lux-select-panel {
   .mat-option {
-    border-left: 2px solid $app-data-bg;
+    border-left: none;
 
     &.invalid {
-      border-left: 2px solid $lux-warn-color;
+      border-left: 2px solid luxpalette.$lux-warn-color;
+    }
+  }
+}
+
+/* 
+ * Eineheitliche Elevation für die Components auf Cdk-Overlay-Pane
+ */
+.cdk-overlay-pane {
+  & > .mat-autocomplete-panel:not([class*="mat-elevation-z"]),
+  .mat-datepicker-content,
+  .mat-select-panel:not([class*="mat-elevation-z"]),
+  .mat-menu-panel {
+    @include luxelevations.lux-elevation-z4;
+  }
+}
+
+/*
+* Stylings für für Elemente die im Mat-Menu-Panel im cdk-overlay-container liegen 
+*/
+.cdk-overlay-container {
+  // spezielles Styling für das neue User-Menu-Label
+  .lux-user-name-label.mat-menu-item[disabled] {
+    color: luxcommon.$dark-primary-text;
+  }
+
+  lux-icon.lux-menu-item-icon {
+    width: 30px;
+    min-width: 30px;
+    max-width: 30px;
+    display: inline-grid;
+
+    mat-icon.mat-icon:not(.lux-lx-icon){
+      font-size: 24px !important;
+    }
+    &.lux-lx-icon.lux-no-size {
+      width: 24px;
+      min-width: 24px;
+      max-width: 24px;
+      height: 24px;
     }
   }
 }
@@ -668,7 +865,17 @@ lux-master-detail {
   .lux-detail-container {
     .lux-detail-empty-icon,
     .lux-detail-empty-icon-text {
-      color: $dark-primary-text;
+      color: luxcommon.$dark-primary-text;
+    }
+  }
+
+  .lux-master-container.lux-empty-elements-aligned {
+    @include luxelevations.lux-elevation-z1;
+  }
+
+  lux-list {
+    .mat-card:not([class*="mat-elevation-z"]) {
+      @include luxelevations.lux-elevation-z0;
     }
   }
 }
@@ -677,14 +884,16 @@ lux-master-detail {
  * Theming for LUX-Master-Footer
  */
 lux-master-footer {
-  background-color: $app-data-bg;
+  background-color: luxcommon.$app-data-bg;
+  @include luxelevations.lux-elevation-z1;
 }
 
 /*
  * Theming for LUX-Master-Header
  */
 lux-master-header {
-  background-color: $app-data-bg;
+  background-color: luxcommon.$app-data-bg;
+  @include luxelevations.lux-elevation-z1;
 }
 
 /*
@@ -704,19 +913,52 @@ lux-master-header {
  */
 lux-message-box {
   &.mat-elevation-z4 {
-    box-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);
+    @include luxelevations.lux-elevation-z4();
+  }
+  
+  .lux-message-container lux-button {
+    button.mat-fab.lux-icon-button.lux-button-rounded:not([class*=mat-elevation-z]) {
+      color: #fff;
+      background-color: transparent;
+      height: 36px;
+      width: 36px;
+      @include luxelevations.lux-elevation-z0();
+      
+    
+    }
+    .mat-button-ripple,
+    .mat-button-focus-overlay {
+      display: none;
+    }
+  }
+
+  .lux-message-container lux-icon:not(.lux-button-icon, .lux-button-icon-round) {
+    display: contents;
+
+    mat-icon.lux-lx-icon-no-size {
+      width: 20px;
+      height: 20px;
+    }
   }
 }
 
 /*
  * Theming for LUX-Snackbar
  */
-@each $colorName, $colorNameHex in $colorsForDarkBg {
-  .lux-snackbar-content .lux-bg-color-#{'' + $colorName + ''} {
+@each $colorName, $colorNameHex in luxcommon.$colorsForDarkBg {
+  .lux-snackbar-content .lux-bg-color-#{"" + $colorName + ""} {
     color: $colorNameHex;
     background-color: transparent;
   }
 }
+snack-bar-container.mat-snack-bar-container {
+  @include luxelevations.lux-elevation-z6();
+
+  mat-icon.mat-icon.lux-lx-icon-no-size {
+    width: 2em;
+    height: 2em;
+  }
+}
 
 /*
  * Theming for LUX-Progress
@@ -724,12 +966,12 @@ lux-message-box {
 lux-progress {
   .mat-progress-bar-fill:after,
   .mat-progress-spinner > svg > circle {
-    stroke: map-get($lux-palette_primary, A400);
-    background: map-get($lux-palette_primary, A400);
+    stroke: map.get(luxpalette.$lux-palette_primary, A400);
+    background: map.get(luxpalette.$lux-palette_primary, A400);
   }
 
-  @each $colorName, $colorNameHex in $componentBgColors {
-    .lux-bg-color-#{'' + $colorName + ''} {
+  @each $colorName, $colorNameHex in luxcommon.$componentBgColors {
+    .lux-bg-color-#{"" + $colorName + ""} {
       .mat-progress-bar-primary:after,
       .mat-progress-bar-secondary:after {
         background: $colorNameHex;
@@ -737,8 +979,8 @@ lux-progress {
     }
   }
 
-  @each $colorName, $colorNameHex in $componentBgColors {
-    mat-progress-spinner.lux-bg-color-#{'' + $colorName + ''} {
+  @each $colorName, $colorNameHex in luxcommon.$componentBgColors {
+    mat-progress-spinner.lux-bg-color-#{"" + $colorName + ""} {
       circle {
         stroke: $colorNameHex;
       }
@@ -747,40 +989,45 @@ lux-progress {
 }
 
 lux-radio {
+  // damit ist der Focus-Indicator rund, wie bei Toggle-Thumb und Chips
+  .mat-radio-container {
+    border-radius: 50%;
+  }
+
   .mat-radio-checked {
     label.mat-radio-label .mat-radio-container {
       span.mat-radio-inner-circle {
-        background-color: map-get($lux-palette_primary, 500);
+        background-color: map.get(luxpalette.$lux-palette_primary, 500);
       }
 
       span.mat-radio-outer-circle {
-        border-color: map-get($lux-palette_primary, 500);
+        border-color: map.get(luxpalette.$lux-palette_primary, 500);
       }
     }
 
     &.mat-radio-disabled label .mat-radio-container {
       span.mat-radio-inner-circle {
-        background-color: $dark-disabled-text;
+        background-color: luxcommon.$dark-disabled-text;
       }
 
       span.mat-radio-outer-circle {
-        border-color: $dark-disabled-text;
+        border-color: luxcommon.$dark-disabled-text;
       }
     }
   }
 
   .mat-radio-disabled label.mat-radio-label {
     .mat-radio-label-content {
-      color: $dark-disabled-text;
+      color: luxcommon.$dark-disabled-text;
     }
 
     .mat-radio-container {
       span.mat-radio-inner-circle {
-        background-color: $dark-disabled-text;
+        background-color: luxcommon.$dark-disabled-text;
       }
 
       span.mat-radio-outer-circle {
-        border-color: $dark-disabled-text;
+        border-color: luxcommon.$dark-disabled-text;
       }
     }
   }
@@ -792,18 +1039,22 @@ lux-radio {
 lux-select {
   mat-select {
     &[aria-disabled="true"] .mat-select-arrow {
-      color: $dark-disabled-text;
+      border-width: 7px;
+      margin: 0 2px 0 0;
+      color: luxcommon.$dark-disabled-text;
     }
 
     &[aria-disabled="false"] .mat-select-arrow {
-      color: map-get($lux-palette_primary, 500);
+      border-width: 7px;
+      margin: 0 2px 0 0;
+      color: map.get(luxpalette.$lux-palette_primary, 500);
     }
   }
 }
 
 // Checkbox wird im Cdk-Overlay dargestellt und hängt nicht unter der Component selbst.
 .lux-select-panel .mat-pseudo-checkbox-checked {
-  background-color: map-get($lux-palette_primary, 500);
+  background-color: map.get(luxpalette.$lux-palette_primary, 500);
 }
 
 /*
@@ -811,32 +1062,32 @@ lux-select {
  */
 lux-side-nav {
   .lux-side-nav {
-    background: $app-data-bg;
-    box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.5);
+    background: luxcommon.$app-data-bg;
+    @include luxelevations.lux-elevation-z16();
 
     .lux-side-nav-header {
-      border-bottom: 1px solid $dark-dividers;
+      border-bottom: 1px solid luxcommon.$dark-dividers;
     }
 
     .lux-side-nav-footer {
-      border-top: 1px solid $dark-dividers;
+      border-top: 1px solid luxcommon.$dark-dividers;
     }
 
     .lux-side-nav-content {
       .lux-side-nav-item {
         .lux-side-nav-item-icon {
-          color: map-get($lux-palette_primary, 500);
+          color: map.get(luxpalette.$lux-palette_primary, 500);
 
           &.lux-side-nav-disabled {
-            color: $dark-disabled-text;
+            color: luxcommon.$dark-disabled-text;
           }
         }
 
         .lux-side-nav-item-expansion-icon {
-          color: map-get($lux-palette_primary, 500);
+          color: map.get(luxpalette.$lux-palette_primary, 500);
 
           &.lux-side-nav-disabled {
-            color: $dark-disabled-text;
+            color: luxcommon.$dark-disabled-text;
           }
         }
       }
@@ -845,7 +1096,7 @@ lux-side-nav {
 }
 
 .lux-side-nav-overlay {
-  background-color: $dark-focused;
+  background-color: luxcommon.$dark-focused;
 }
 
 /*
@@ -855,7 +1106,7 @@ lux-slider {
   .lux-show-thumb-label-always {
     &.mat-slider-disabled {
       .mat-slider-thumb-label {
-        background-color: $dark-disabled-text;
+        background-color: luxcommon.$dark-disabled-text;
       }
     }
   }
@@ -866,37 +1117,79 @@ lux-slider {
  */
 lux-spinner {
   .mat-progress-spinner > svg > circle {
-    stroke: map-get($lux-palette_primary, A400);
+    stroke: map.get(luxpalette.$lux-palette_primary, A400);
   }
 }
 
+lux-filter-form {
+  lux-accordion {
+    lux-panel-header-title {
+      width: 100%;
+      mat-panel-title.mat-expansion-panel-header-title {
+        align-items: center;
+        justify-content: space-between;
+        margin: 0px;
+      }
+    }
+  }
+
+  h2.lux-card-title-container {
+    font-size: 16px;
+  }
+
+  lux-menu.filter-menu {
+    .lux-menu-extended {
+      padding: 0 !important;
+    }
+    .lux-filter-menu-trigger button.lux-button-rounded {
+      height: 36px;
+      width: 36px;
+      min-width: 36px;
+      max-width: 36px;
+      background-color: transparent;
+      color: map.get(luxpalette.$lux-palette_primary, 500);
+      padding: 0px !important;
+      //margin: 0px !important;
+
+      @include luxelevations.lux-elevation-z0;
+    }
+  }
+}
 /*
  * Theming for LUX-Stepper
  */
 lux-stepper {
+  .mat-stepper-horizontal, .mat-stepper-vertical {
+    background-color: transparent;
+  }
 
   // luxUseCustomIcons=true
   .lux-ignore-mat-step-icons {
-
     mat-step-header {
-      color: $dark-secondary-text;
-
+      color: luxcommon.$dark-secondary-text;
+    
       &.lux-step-header-touched {
         .lux-stepper-edited-icon,
         .lux-stepper-normal-icon {
-          i, mat-icon {
-            color: $app-data-bg;
-            background-color: map-get($lux-palette_primary, 500);
+          i,
+          mat-icon {
+            color: luxcommon.$app-data-bg;
+            background-color: map.get(luxpalette.$lux-palette_primary, 500);
           }
         }
+
+        lux-step-header {
+          color: map.get(luxpalette.$lux-palette_primary, 500);
+        }
       }
 
       &:not(.lux-step-header-touched) {
         .lux-stepper-edited-icon,
         .lux-stepper-normal-icon {
-          i, mat-icon {
-            color: $app-data-bg;
-            background-color: $dark-secondary-text;
+          i,
+          mat-icon {
+            color: luxcommon.$app-data-bg;
+            background-color: luxcommon.$dark-secondary-text;
           }
         }
       }
@@ -905,32 +1198,35 @@ lux-stepper {
 
   // luxUseCustomIcons=false
   .mat-step-header {
-
     lux-step-header {
-      color: $dark-secondary-text;
+      color: luxcommon.$dark-secondary-text;;
     }
-
+    
     &.lux-step-header-touched {
       .mat-step-icon {
-        color: $app-data-bg;
-        background-color: map-get($lux-palette_primary, 500);
+        color: luxcommon.$app-data-bg;
+        background-color: map.get(luxpalette.$lux-palette_primary, 500);
       }
 
       .mat-step-icon-selected {
-        color: $app-data-bg;
-        background-color: map-get($lux-palette_primary, 500);
+        color: luxcommon.$app-data-bg;
+        background-color: map.get(luxpalette.$lux-palette_primary, 500);
+      }
+
+      lux-step-header {
+        color: map.get(luxpalette.$lux-palette_primary, 500);
       }
     }
 
     &:not(.lux-step-header-touched) {
       .mat-step-icon {
-        color: $app-data-bg;
-        background-color: $dark-secondary-text;
+        color: luxcommon.$app-data-bg;
+        background-color: luxcommon.$dark-secondary-text;
       }
 
       .mat-step-icon-selected {
-        color: $app-data-bg;
-        background-color: map-get($lux-palette_primary, 500);
+        color: luxcommon.$app-data-bg;
+        background-color: map.get(luxpalette.$lux-palette_primary, 500);
       }
     }
   }
@@ -940,8 +1236,21 @@ lux-stepper {
  * Theming for LUX-Table
  */
 lux-table {
+  font-family: global.$app-font-family;
+
   .lux-row-selected {
-    background-color: $lux-selected-bg-color;
+    background-color: luxcommon.$lux-selected-bg-color;
+  }
+
+  table td {
+   div.lux-form-control {
+     min-height: luxcommon.$form-control-height-small;
+
+     .lux-form-control-label,
+     .lux-form-control-misc {
+       display: none;
+     }
+   }
   }
 }
 
@@ -949,20 +1258,27 @@ lux-table {
  * Theming for LUX-Tabs
  */
 lux-tabs {
-  .mat-tab-nav-bar, .mat-tab-header {
-    border-color: $dark-dividers;
+  .mat-tab-nav-bar,
+  .mat-tab-header {
+    border-color: rgba(black, 0.38);
+    font-size: 16px;
   }
 
   mat-tab-group div[role="tab"]:not(.mat-tab-disabled) {
-    color: map-get($lux-palette_primary, 500);
+    color: map.get(luxpalette.$lux-palette_primary, 500);
   }
 
   .lux-notification-new {
-    background-color: map-get($componentBgColors, "green");
+    background-color: map.get(luxcommon.$componentBgColors, "green");
   }
 
   .lux-tabs-notification-icon {
-    border: 2px solid $app-content-bg;
+    border: 2px solid luxcommon.$app-content-bg;
+  }
+
+  .lux-tabs-show-border {
+    border: 1px solid luxcommon.$app-border-color;
+    border-radius: 4px;
   }
 }
 
@@ -971,11 +1287,24 @@ lux-tabs {
  */
 lux-tile {
   .lux-notification-new {
-    background-color: map-get($lux-palette_accent, 500);
+    background-color: map.get(luxpalette.$lux-palette_accent, 500);
   }
 
   .lux-highlight {
-    color: map-get($lux-palette_primary, A400);
+    color: map.get(luxpalette.$lux-palette_primary, A400);
+  }
+
+  .mat-card:not([class*="mat-elevation-z"]) {
+    @include luxelevations.lux-elevation-z2;
+  }
+
+  .lux-tile-label {
+    margin: 0;
+    display: flex;
+    flex-shrink: 1;
+    flex-grow: 0;
+    min-height: 65px;
+    max-height: 65px;
   }
 }
 
@@ -983,20 +1312,23 @@ lux-tile {
  * Theming for LUX-Toggle
  */
 lux-toggle {
-
   .mat-slide-toggle {
     label {
-      color: $dark-primary-text;
-      font-family: $app-font-family;
+      color: luxcommon.$dark-primary-text;
+      font-family: global.$app-font-family;
+    }
+
+    .mat-slide-toggle-thumb {
+      @include luxelevations.lux-elevation-z1;
     }
 
     &.mat-checked {
       .mat-slide-toggle-bar {
-        background-color: map-get($lux-palette_primary, 100);
+        background-color: map.get(luxpalette.$lux-palette_primary, 100);
       }
 
       .mat-slide-toggle-thumb {
-        background-color: map-get($lux-palette_primary, 500);
+        background-color: map.get(luxpalette.$lux-palette_primary, 500);
       }
     }
 
@@ -1015,7 +1347,7 @@ lux-toggle {
 
       &.mat-checked {
         .mat-slide-toggle-bar {
-          background-color: $dark-disabled-text;
+          background-color: luxcommon.$dark-disabled-text;
         }
 
         .mat-slide-toggle-thumb {
@@ -1025,7 +1357,7 @@ lux-toggle {
 
       &:not(.mat-checked) {
         .mat-slide-toggle-bar {
-          background-color: $dark-disabled-text;
+          background-color: luxcommon.$dark-disabled-text;
         }
 
         .mat-slide-toggle-thumb {
@@ -1043,6 +1375,26 @@ mat-tooltip-component .mat-tooltip {
   font-size: 14px;
 }
 
+/*
+ * Theming for LUX-Accordion
+ */
+mat-expansion-panel.mat-expansion-panel:not([class*="mat-elevation-z"]) {
+  @include luxelevations.lux-elevation-z2;
+}
+
+
+/*
+ * Theming for LUX-Errorpage
+ */
+ lux-error-page {
+  lux-card:not(.lux-error-page-desktop) {
+      .mat-card:not([class*="mat-elevation-z"]) {
+        @include luxelevations.lux-elevation-z0;
+      }
+      
+    } 
+ }
+
 /*
 * Theming für Lux-Stepper-Large
 */
@@ -1096,8 +1448,8 @@ lux-stepper-large {
 
   &.lux-active:not(.lux-disabled) {
     .lux-stepper-large-nav-item-number-container {
-      color: $lux-stepper-large-nav-item-active-fc;
-      background-color: $lux-stepper-large-nav-item-active-bg;
+      color: luxcommon.$lux-stepper-large-nav-item-active-fc;
+      background-color: luxcommon.$lux-stepper-large-nav-item-active-bg;
     }
 
     .lux-stepper-large-nav-item-label {
@@ -1112,8 +1464,8 @@ lux-stepper-large {
 
     &.lux-completed:not(.lux-active) {
       .lux-stepper-large-nav-item-number-container {
-        color: $lux-stepper-large-nav-item-completed-fg;
-        background-color: $lux-stepper-large-nav-item-completed-bg;
+        color: luxcommon.$lux-stepper-large-nav-item-completed-fg;
+        background-color: luxcommon.$lux-stepper-large-nav-item-completed-bg;
       }
 
       a {
@@ -1123,8 +1475,8 @@ lux-stepper-large {
 
     &:not(.lux-completed):not(.lux-active) {
       .lux-stepper-large-nav-item-number-container {
-        color: $lux-stepper-large-nav-item-completed-fg;
-        background-color: $lux-stepper-large-nav-item-completed-bg;
+        color: luxcommon.$lux-stepper-large-nav-item-completed-fg;
+        background-color: luxcommon.$lux-stepper-large-nav-item-completed-bg;
       }
     }
   }
@@ -1134,8 +1486,8 @@ lux-stepper-large {
     color: #003366;
 
     .lux-stepper-large-nav-item-number-container {
-      color: $lux-stepper-large-nav-item-disabled-fg;
-      background-color: $lux-stepper-large-nav-item-disabled-bg;
+      color: luxcommon.$lux-stepper-large-nav-item-disabled-fg;
+      background-color: luxcommon.$lux-stepper-large-nav-item-disabled-bg;
     }
   }
 
@@ -1143,12 +1495,12 @@ lux-stepper-large {
     opacity: 0.6;
 
     .lux-stepper-large-nav-item-number-container {
-      color: $lux-stepper-large-nav-item-disabled-fg;
-      background-color: $lux-stepper-large-nav-item-disabled-bg;
+      color: luxcommon.$lux-stepper-large-nav-item-disabled-fg;
+      background-color: luxcommon.$lux-stepper-large-nav-item-disabled-bg;
     }
 
     .lux-stepper-large-nav-item-label {
-      color: $lux-stepper-large-nav-item-disabled-fg;
+      color: luxcommon.$lux-stepper-large-nav-item-disabled-fg;
     }
   }
 
@@ -1178,8 +1530,10 @@ lux-stepper-large {
     }
 
     .lux-stepper-large-nav-item-complete {
-      color: $lux-stepper-large-completed-fc;
+      color: luxcommon.$lux-stepper-large-completed-fc;
       font-size: 23px;
+      height: 23px;
+      width: 23px;
     }
   }
 }
@@ -1262,7 +1616,7 @@ lux-stepper-large {
 .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
   &.lux-stepper-large-mobile-overlay-backdrop {
     opacity: 0.6;
-    background-color: $lux-stepper-large-backdrop-bg;
+    background-color: luxcommon.$lux-stepper-large-backdrop-bg;
   }
 }
 
@@ -1274,7 +1628,7 @@ lux-stepper-large {
   max-height: calc(100% - 0px);
 
   padding: 0;
-  background: $app-data-bg;
+  background: luxcommon.$app-data-bg;
 }
 .lux-stepper-large-mobile-nav-close-button-container {
   display: flex;
@@ -1291,7 +1645,7 @@ lux-stepper-large {
   padding: 0 30px 24px 30px;
 
   div {
-    font-family: "Korb", $app-font-family;
+    font-family: Korb, global.$app-font-family;
     font-size: 28px;
   }
 }
@@ -1350,7 +1704,7 @@ lux-stepper-large {
     }
 
     .lux-stepper-large-mobile-nav-item-complete {
-      color: $lux-stepper-large-completed-fc;
+      color: luxcommon.$lux-stepper-large-completed-fc;
       font-size: 18px;
     }
   }