@ihk-gfi/lux-components-theme 18.5.0 → 19.0.0

package/src/authentic/_luxcommon.scss

@@ -43,8 +43,8 @@ $app-header-bg: map.get(luxpalette.$lux-palette_primary, 50);
 $app-content-bg: #ffffff;
 $app-footer-bg: map.get(luxpalette.$lux-palette_primary, 50);
 $app-data-bg: #ffffff;
-$app-gradient: linear-gradient(90deg, #ffffff 0%, #f8fbff 100%);
-$app-gradient-reverse: linear-gradient(270deg, #ffffff 0%, #f8fbff 100%);
+$app-gradient: linear-gradient(90deg, #ffffff 0%, map-get(map-get(luxpalette.$lux-palettes-new, 'primary'), 98) 100%);
+$app-gradient-reverse: linear-gradient(270deg, #ffffff 0%, map-get(map-get(luxpalette.$lux-palettes-new, 'primary'), 98) 100%);
 $app-border-color: rgba(black, 0.12);
 $app-border-radius: 4px;
 
@@ -52,6 +52,7 @@ $app-border-radius: 4px;
 $form-border-color: rgba(0, 0, 0, 0.38);
 $form-control-font-size: 1rem;
 $form-control-buffer: 4px;
+$form-error-msg-background: rgb(255, 228, 231); //lux-warn-50 mit opacity: 0.5
 
 // Button
 $button-height: 2.25rem;
@@ -92,35 +93,41 @@ $lux-panel-option-padding: 12px 0;
 
 // Hintergrundfarben (z.B. Badge oder Progress)
 $componentBgColors: (
-  "red": luxpalette.$lux-warn-color,
-  "green": luxpalette.$lux-accent-color,
-  "purple": #9900b8,
-  "blue": luxpalette.$lux-primary-color,
-  "gray": #666666,
-  "orange": rgba(237, 110, 17, 1),
-  "brown": #783f04,
-  "black": $dark-primary-text,
+  "red": map-get(map-get(luxpalette.$lux-palettes-new, 'error'), 40),
+  "green": map-get(map-get(luxpalette.$lux-palettes-new, 'tertiary'), 70),
+  "purple": #715289,
+  "blue": map-get(map-get(luxpalette.$lux-palettes-new, 'primary'), 20),
+  "gray": map-get(map-get(luxpalette.$lux-palettes-new, 'neutral'), 40),
+  "orange":  #fc791f,
+  "black":  map-get(map-get(luxpalette.$lux-palettes-new, 'neutral'), 10),
   "white": #ffffff,
-  "yellow": rgba(244, 203, 37, 1),
-  "pink": rgba(237, 95, 122, 1),
-  "lightblue": rgba(63, 155, 218, 1)
+  "yellow": #fbd12c,
+  "pink":  #fc6b85,
+  "lightblue": #4fa8e8
 );
 
 // Vordergrundfarben (z.B. Badge)
 $componentFontColors: (
-  black: #000000,
-  white: #ffffff
+  "red": #ffffff,
+  "green": map-get(map-get(luxpalette.$lux-palettes-new, 'neutral'), 10),
+  "purple": #ffffff,
+  "blue": #ffffff,
+  "gray": #ffffff,
+  "orange": map-get(map-get(luxpalette.$lux-palettes-new, 'neutral'), 10),
+  "black": #ffffff,
+  "white": map-get(map-get(luxpalette.$lux-palettes-new, 'neutral'), 10),
+  "yellow": map-get(map-get(luxpalette.$lux-palettes-new, 'neutral'), 10),
+  "pink": map-get(map-get(luxpalette.$lux-palettes-new, 'neutral'), 10),
+  "lightblue": map-get(map-get(luxpalette.$lux-palettes-new, 'neutral'), 10)
 );
 
 // Farben für einen dunklen Hintergrund (z.B. Snackbar).
 $colorsForDarkBg: (
   "red": #f17474,
   "green": #53b12b,
-  "purple": #e561ff,
-  "blue": #729eca,
-  "gray": #c8c8c8,
+  "blue": map-get(map-get(luxpalette.$lux-palettes-new, 'primary'), 80),
   "orange": #ec9c1b,
-  "brown": #eb7c05,
+  "yellow": #fbd12c,
   "white": #ffffff
 );
 

package/src/authentic/_luxpalette.scss

@@ -104,3 +104,127 @@ $lux-palette_warn: (
 $lux-primary-color: map.get($lux-palette_primary, 500);
 $lux-accent-color: map.get($lux-palette_accent, 500);
 $lux-warn-color: map.get($lux-palette_warn, 500);
+
+$lux-palettes-new: (
+  primary: (
+    0: #000000,
+    5: #001129,  //primary-900 und 800
+    10: #001b3c, //primary-700
+    15: #00264e, //primary-600
+    20: #003366, //primary-500
+    25: #0f3b6f,
+    30: #1f477b, //primary-400
+    35: #2d5387,
+    40: #3a5f94, //primary-300
+    50: #5478af,
+    60: #6e92ca, //primary-200
+    70: #89ace7,
+    80: #a7c8ff, //primary-100
+    90: #d5e3ff, //primary-50
+    95: #ecf1ff,
+    98: #f9f9ff,
+    99: #fdfbff,
+    100: #ffffff
+  ),
+  secondary: (
+    0: #000000,
+    5: #0a111c,
+    10: #151c28,
+    15: #1f2632,
+    20: #2a313d,
+    25: #353c49,
+    30: #404754,
+    35: #4c5360,
+    40: #585f6c,
+    50: #707786,
+    60: #8a91a0,
+    70: #a4abbb,
+    80: #c0c6d7,
+    90: #dce2f3,
+    95: #ecf1ff,
+    98: #f9f9ff,
+    99: #fdfbff,
+    100: #ffffff
+  ),
+  tertiary: (
+    0: #000000,
+    5: #001503,
+    10: #002107,
+    15: #002d0c,
+    20: #003911,
+    25: #004617,
+    30: #00531d, //accent-900
+    35: #006022,
+    40: #006e29, //accent-800
+    50: #198939, //accent-700
+    60: #3ca450, //accent-600
+    70: #56bd66, //accent-500
+    80: #75dc81, //accent-300 und 400
+    90: #90f99b, //accent-200
+    95: #c6ffc5, //accent-100
+    98: #ebffe6, //accent-50
+    99: #f6fff1,
+    100: #ffffff
+  ),
+  neutral: (
+    0: #000000,
+    5: #111111,
+    10: #1c1b1b, //dark-primary-text
+    15: #262625,
+    20: #313030,
+    25: #3c3b3b,
+    30: #484646,
+    35: #535252,
+    40: #605e5e, //dark-secondary-text
+    50: #797776,
+    60: #929090, //form-border-color
+    70: #adaaaa,
+    80: #c9c6c5,
+    90: #e5e2e1, //app-border-color und dark-disabled-text
+    95: #f4f0ef,
+    98: #fcf8f8,
+    99: #f6feff,
+    100: #ffffff
+  ),
+  neutral-variant: (
+    0: #000000,
+    5: #111111,
+    10: #1c1b1b,
+    15: #262625,
+    20: #313030,
+    25: #3c3b3b,
+    30: #484646,
+    35: #535252,
+    40: #5f5e5e,
+    50: #787776,
+    60: #929090,
+    70: #adabaa,
+    80: #c9c6c5,
+    90: #e5e2e1,
+    95: #f4f0ef,
+    98: #fcf8f8,
+    99: #f6feff,
+    100: #ffffff
+  ),
+  error:
+  (
+    0: #000000,
+    5: #2d0001,
+    10: #410002,
+    15: #540004, //warn-900
+    20: #690005,
+    25: #7e0007, //warn-800
+    30: #93000a, //warn-700
+    35: #a80710, //warn-600
+    40: #ba1a1a, //warn-500
+    50: #ec2125, //warn-400
+    60: #ff5449, //warn-300
+    70: #ff897d, //warn-200
+    80: #ffb4ab, //warn-100
+    90: #ffdad6, //warn-50
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff
+  )
+);

package/src/authentic/luxtheme.scss

@@ -4,6 +4,7 @@
   $lux-palette_primary: themePalette.$lux-palette_primary,
   $lux-palette_accent: themePalette.$lux-palette_accent,
   $lux-palette_warn: themePalette.$lux-palette_warn,
+  $lux-palettes-new: themePalette.$lux-palettes-new,
 
   // Hauptfarben
   $lux-primary-color: themePalette.$lux-primary-color,
@@ -45,6 +46,7 @@
   $form-border-color: themeCommon.$form-border-color,
   $form-control-font-size: themeCommon.$form-control-font-size,
   $form-control-buffer: themeCommon.$form-control-buffer,
+  $form-error-msg-background: themeCommon.$form-error-msg-background,
 
   // Button
   $button-height: themeCommon.$button-height,
@@ -108,3 +110,4 @@
 @use "../base/luxtheme";
 
 @use "custom";
+@use "custombutton";

package/src/base/_luxcommon.scss

@@ -27,6 +27,7 @@ $app-border-radius: mustOverriden !default;
 $form-border-color: mustOverriden !default;
 $form-control-font-size: mustOverriden !default;
 $form-control-buffer: mustOverriden !default;
+$form-error-msg-background: mustOverriden !default;
 
 // Button
 $button-height: mustOverriden !default;

package/src/base/_luxcomponents.scss

@@ -2,6 +2,7 @@
 @use "components/luxAppHeaderAc.scss";
 @use "components/luxAppHeader.scss";
 @use "components/luxAppFooter.scss";
+@use "components/luxBadge";
 @use "components/luxLinkPlain.scss";
 @use "components/luxTileAc.scss";
 @use "components/luxTile.scss";
@@ -143,6 +144,11 @@ $fileUploadProgressSize: 8px;
   flex-direction: column;
   flex: 1 1 auto;
 
+  .lux-file-upload-view-container {
+    margin-left: luxcommon.$outline-width;
+    margin-right: luxcommon.$outline-width;
+  }
+
   .lux-file-upload-drop-container {
     display: flex;
     flex-direction: column;
@@ -176,6 +182,7 @@ $fileUploadProgressSize: 8px;
 
       .lux-file-upload-link {
         cursor: default;
+        text-decoration: none;
       }
     }
 
@@ -208,12 +215,14 @@ $fileUploadProgressSize: 8px;
     align-items: center;
     flex: 1 1 auto;
     gap: 12px;
-
-    border: 1px solid var(--lux-theme-warn-500);
+    
+    border: 1px solid var(--lux-theme-warn-900);
     border-radius: 4px;
-    color: var(--lux-theme-warn-500);
+    color: map.get(luxpalette.$lux-palette-warn, 900) !important;
+    background-color: luxcommon.$form-error-msg-background;
     padding: 18px 15px 15px 26px;
-    margin-bottom: 12px;
+    margin-left: luxcommon.$outline-width;
+    margin-right: luxcommon.$outline-width;
 
     .lux-file-upload-error-icon {
       display: flex;
@@ -227,25 +236,39 @@ $fileUploadProgressSize: 8px;
 
     .lux-file-upload-error-button {
       display: flex;
-      flex: 0 0 auto;
+      align-items: center;
 
-      button {
+      button.mat-mdc-button {
         padding: 0;
         margin: 0;
-        border-radius: 8px;
-        min-width: 40px;
-        min-height: 30px;
       }
     }
   }
 
+  .lux-file-upload-error-container-no-button {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: fit-content;
+
+    margin: 2px 5px;
+    font-size: 0.75rem;
+    background-color: luxcommon.$form-error-msg-background;
+    border-radius: 4px;
+    padding-left: 2px;
+    padding-right: 2px;
+    color: map-get(luxpalette.$lux-palette_warn, 900) !important;
+  }
+
   .lux-file-upload-hint-container {
     margin-top: 4px;
-    margin-bottom: 12px;
+    padding-left: luxcommon.$outline-width;
+    padding-right: luxcommon.$outline-width;
   }
 
   .lux-file-upload-no-hint-container {
-    min-height: 12px;
+    min-height: 0;
   }
 
   .lux-file-upload-view-item-container {
@@ -255,18 +278,11 @@ $fileUploadProgressSize: 8px;
     align-items: center;
     flex: 1 1 auto;
     gap: 12px;
-
-    background-color: var(--lux-theme-selected-bg-color);
-    border: 1px solid var(--lux-theme-accent-500);
-    border-radius: 4px;
     color: var(--lux-theme-primary-500);
-    padding: 18px 15px 18px 26px;
-    margin-bottom: 12px;
 
     &.lux-file-upload-view-item-disabled {
       color: var(--lux-theme-dark-disabled-text);
       background-color: var(--lux-theme-app-data-bg);
-      border: 1px solid var(--lux-theme-dark-disabled-text);
     }
 
     .lux-file-upload-view-item {
@@ -277,9 +293,9 @@ $fileUploadProgressSize: 8px;
       flex: 1 1 auto;
       gap: 12px;
 
-      .lux-file-upload-view-item-icon {
-        display: flex;
-        flex: 0 0 30px;
+      .lux-file-upload-label-text {
+        hyphens: auto;
+        word-break: break-all;
       }
 
       .lux-file-upload-view-item-label-container {
@@ -287,23 +303,20 @@ $fileUploadProgressSize: 8px;
         flex: 1 1 auto;
       }
 
-      lux-button.lux-file-upload-view-item-delete-button {
+      lux-button.lux-file-upload-view-item-button {
         display: flex;
         align-items: center;
 
         button.mat-mdc-button {
           padding: 0;
           margin: 0;
-          border-radius: 8px;
-          min-width: 40px;
-          min-height: 30px;
-
-          .lux-button-icon mat-icon.mat-icon.lux-icon {
-            width: 24px !important;
-            height: 24px !important;
-          }
         }
       }
+
+      lux-button.lux-file-upload-view-item-button button:disabled {
+        color: var(--lux-theme-dark-disabled-text);
+        background-color: transparent;
+      }
     }
   }
 
@@ -445,16 +458,16 @@ mat-expansion-panel.mat-expansion-panel:not([class*="mat-elevation-z"]) {
   }
 }
 
-//Von Material wird ein Margin gesetzt wenn der Indicator links ist und das Panel disabled wird. Damit wird das Margin überschrieben und der Header des Panels wird nicht verschoben.
-mat-expansion-panel-header.mat-expansion-toggle-indicator-before .mat-content.mat-content-hide-toggle {
-  margin: 0;
-}
-
 .mat-expansion-panel {
   --mat-expansion-container-shape: #{luxcommon.$app-border-radius};
   --mat-expansion-container-shape: #{luxcommon.$app-border-radius};
 }
 
+//Von Material wird ein Margin gesetzt wenn der Indicator links ist und das Panel disabled wird. Damit wird das Margin überschrieben und der Header des Panels wird nicht verschoben.
+mat-expansion-panel-header.mat-expansion-toggle-indicator-before .mat-content.mat-content-hide-toggle {
+  margin: 0;
+}
+
 /*
  * Theming for LUX-Errorpage
  */

package/src/base/_luxpalette.scss

@@ -3,6 +3,7 @@
 $lux-palette_primary: () !default;
 $lux-palette_accent: () !default;
 $lux-palette_warn: () !default;
+$lux-palettes-new: () !default;
 
 $lux-primary-color: mustOverriden !default;
 $lux-accent-color: mustOverriden !default;

package/src/base/_luxstyles.scss

@@ -48,6 +48,7 @@ $paletteNamen: primary, accent, warn;
   --lux-theme-form-border-color: #{luxcommon.$form-border-color};
   --lux-theme-form-control-font-size: #{luxcommon.$form-control-font-size};
   --lux-theme-form-control-buffer: #{luxcommon.$form-control-buffer};
+  --lux-theme-form-error-msg-background: #{luxcommon.$form-error-msg-background};
 
   // Button
   --lux-theme-button-font-size: #{luxcommon.$button-font-size};
@@ -610,8 +611,19 @@ $notificationSizes: (18, 24, 30);
     border: 2px solid transparent;
   }
 
+  &.mat-badge:not(.mat-badge-disabled).mat-badge-primary .mat-badge-content {
+    color: #ffffff;
+    background-color: #003366;
+  }
+
   &.mat-badge:not(.mat-badge-disabled).mat-badge-accent .mat-badge-content {
-    background-color: map.get(luxcommon.$componentBgColors, "green");
+    color: #1c1b1b;
+    background-color: #56bd66;
+  }
+
+  &.mat-badge:not(.mat-badge-disabled).mat-badge-warn .mat-badge-content {
+    color: #ffffff;
+    background-color: #C00013;
   }
 
   &.lux-badge-color-default {

package/src/base/components/_luxAppHeader.scss

@@ -5,6 +5,15 @@
 @use "../luxelevations";
 @use "../luxfocus";
 
+button.lux-menu-item.lux-user-name-label {
+  opacity: 1;
+  color: #003366;
+  background-color: #f0f3f6;
+  .mat-mdc-menu-item-text {
+    font-weight: 600;
+  }
+}
+
 lux-app-header {
   flex: 0 0 auto;
   max-height: 65px;

package/src/base/components/_luxAppHeaderAc.scss

@@ -22,63 +22,59 @@ lux-app-header-ac {
     }
   }
 
-  lux-button {
-    button.lux-button.lux-button-rounded {
-      min-width: 2.25rem; //Weil der Menu-Trigger hier ein andere Min-width setzt- könnte vielleich geändert werden?
-      width: 2.25rem;
-      padding-left: 0px !important;
-      padding-right: 0px !important;
-      background-color: transparent;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+  lux-button button.lux-button.mat-mdc-button:not([disabled]) {
+    &:hover {
+      background-color: #D5E3FF !important;
+    }
+  }
 
-      @include luxelevations.lux-elevation-z0;
+  lux-button button.lux-button.mat-mdc-fab.mat-primary:not(.lux-stroked):not([disabled]) {
+    min-width: 2.25rem; //Weil der Menu-Trigger hier ein andere Min-width setzt- könnte vielleich geändert werden?
+    width: 2.25rem;
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+    background-color: transparent !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-      lux-icon {
-        color: luxpalette.$lux-primary-color;
-        box-sizing: border-box;
-      }
+    @include luxelevations.lux-elevation-z0;
 
-      &:hover:not([disabled]).mat-mdc-fab:hover.mat-primary {
-        lux-icon {
-          color: #ffffff !important;
-        }
-      }
-      &:focus-visible:not([disabled]).mat-mdc-fab.mat-primary.cdk-focused.cdk-keyboard-focused {
-        background-color: transparent !important;
-        lux-icon {
-          color: map.get(luxpalette.$lux-palette_primary, 700) !important;
-        }
-        @include luxfocus.focus-dark-mixin;
-      }
+    lux-icon {
+      color: luxpalette.$lux-primary-color !important;
+      box-sizing: border-box;
     }
 
-    &.menu-opened {
-      button.lux-button.lux-button-rounded {
-        background-color: map.get(luxpalette.$lux-palette_primary, 300);
-        lux-icon {
-          color: #ffffff !important;
-        }
+    &:focus-visible:not(:hover) {
+      // color: #ffffff !important;
+      background-color: transparent !important;
+
+      lux-icon {
+        // color: #ffffff !important;
       }
+      @include luxfocus.focus-dark-mixin;
     }
 
-    &.lux-menu-trigger-default {
-      button.mat-mdc-button.lux-button {
-        &:hover {
-          background-color: map.get(luxpalette.$lux-palette-primary, 300) !important;
-          color: #ffffff !important;
-        }
-        &:focus-visible:not(:hover) {
-          color: map.get(luxpalette.$lux-palette-primary, 700) !important;
-          background-color: transparent !important;
-        }
-        &:active {
-          color: map.get(luxpalette.$lux-palette-primary, 700) !important;
-        }
+    &:active {
+      color: #ffffff !important;
+
+      lux-icon {
+        color: #ffffff !important;
       }
     }
   }
+
+  lux-button button[disabled].lux-button.mat-mdc-fab.mat-primary:not(.lux-stroked) {
+    background-color: transparent !important;
+  }
+
+
+  lux-button {
+    button.lux-button.lux-button-rounded {
+      
+    }
+  }
+
   lux-menu {
     width: unset;
     .lux-menu-extended {
@@ -165,16 +161,6 @@ lux-app-header-ac {
   button.lux-menu-item {
     margin: 0px;
 
-    &.lux-user-name-label {
-      opacity: 1;
-      color: map.get(luxpalette.$lux-palette-primary, 500);
-      background-color: #f0f3f6;
-
-      .lux-button-label {
-        font-weight: 600;
-      }
-    }
-
     &.lux-selected-item-ac {
       font-weight: 600;
       color: luxpalette.$lux-primary-color;

package/src/base/components/_luxBadge.scss

@@ -0,0 +1,62 @@
+@use "sass:map";
+@use "../luxcommon";
+@use "../luxpalette";
+
+.lux-badge {
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  flex: initial;
+}
+
+.lux-badge.lux-badge-uppercase * {
+  text-transform: uppercase;
+}
+
+.lux-badge > lux-icon ::ng-deep {
+  width: 1em;
+  height: 1em;
+  display: inline-flex;
+}
+
+@media (prefers-contrast: more) {
+  .lux-badge {
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+
+    &.lux-bg-color-red {
+        background-color: map-get(map-get(luxpalette.$lux-palettes-new, 'error'), 35);
+    }
+
+    &.lux-bg-color-orange {
+      background-color: map-get(luxcommon.$colorsForDarkBg, 'yellow');
+    }
+
+    &.lux-font-color-green {
+        color: #ffffff;
+    }
+    &.lux-bg-color-green {
+      background-color:  map-get(map-get(luxpalette.$lux-palettes-new, 'tertiary'), 30);
+    }
+
+    &.lux-font-color-lightblue {
+        color: #ffffff;
+    }
+    &.lux-bg-color-lightblue {
+      background-color: luxpalette.$lux-primary-color;
+    }
+
+    &.lux-font-color-gray,
+    &.lux-font-color-purple,
+    &.lux-font-color-pink {
+        color: #ffffff;
+    }
+    &.lux-bg-color-gray,
+    &.lux-bg-color-purple,
+    &.lux-bg-color-pink {
+      background-color:  #000000;
+    }
+  }
+}