@ihk-gfi/lux-components-theme 19.3.0 → 21.1.0

package/src/base-templates/components/_luxHtml.scss

@@ -0,0 +1,8 @@
+@use "../common/luxfocus";
+
+lux-html {
+  & a[href]:focus-visible {
+    @include luxfocus.focus-dark-mixin;
+    border-radius: var(--lux-theme-app-border-radius);
+  }
+}

package/src/base-templates/components/_luxIcon.scss

@@ -0,0 +1,53 @@
+  $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "yellow", "pink", "lightblue", "black");
+
+@mixin lux-icon-color-mixin($prefix) {
+  @each $colorName in $componentColorNames {
+    .lux-icon-#{$colorName} {
+      background-color: var(#{$prefix}-#{$colorName});
+    }
+    .lux-icon-on-#{$colorName} {
+      color: var(#{$prefix}-on-#{$colorName});
+    }
+  }
+}
+
+lux-icon {
+  position: relative;
+  display: inline-flex;
+  width: fit-content;
+
+  @include lux-icon-color-mixin("--lux-theme-icon");
+
+  &.lux-icon-rounded {
+    mat-icon.lux-icon {
+      border-radius: 50%;
+
+      &.lux-icon-rounded-1em {
+        padding: 0.25rem;
+      }
+      &.lux-icon-rounded-2em {
+        padding: 0.5rem;
+      }
+      &.lux-icon-rounded-3em {
+        padding: 0.75rem;
+      }
+      &.lux-icon-rounded-4em,
+      &.lux-icon-rounded-5em {
+        padding: 1rem;
+      }
+    }
+  }
+
+  &.lux-error-icon {
+    font-size: 0.75rem;
+
+    mat-icon.lux-icon {
+      padding: 0 !important;
+      color: var(--mat-sys-on-error-container);
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}

package/src/base-templates/components/_luxInput.scss

@@ -0,0 +1,30 @@
+// Muss der Wrapper sein, da Input-Elemente auch in anderen Komponenten (z.B. lux-autocomplete) genutzt werden
+lux-form-control-wrapper {
+  input {
+    font: inherit;
+    color: currentColor;
+    background: transparent;
+    border: none;
+    outline: 0;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    max-width: 100%;
+    vertical-align: bottom;
+    text-align: inherit;
+    font-size: var(--lux-theme-form-control-font-size);
+  }
+}
+
+lux-input-ac {
+  // Theming des Prefix- und Suffix-Containers
+  .lux-input-prefix-container,
+  .lux-input-suffix-container {
+    width: auto;
+    white-space: nowrap;
+    display: inline-block;
+    flex: 1 1 auto;
+    max-height: 1.5em;
+    align-items: center;
+  }
+}

package/src/{base → base-templates}/components/_luxLinkPlain.scss

@@ -1,11 +1,9 @@
-@use "sass:map";
-@use "../luxfocus";
-@use "../luxcommon";
-@use "../luxpalette";
+@use "../common/luxfocus";
 
 lux-link-plain {
   display: inline-flex;
   align-items: baseline;
+  background-color: var(--lux-theme-link-plain-background-color);
   .link-wrapper {
     display: flex;
     gap: 0.25em;
@@ -15,7 +13,7 @@ lux-link-plain {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
-      text-decoration: inherit;
+      text-decoration: var(--lux-theme-link-plain-text-decoration);
       color: inherit;
       display: flex;
     }
@@ -23,6 +21,7 @@ lux-link-plain {
     lux-icon {
       font-size: inherit;
       display: flex;
+      color: var(--lux-theme-link-plain-icon-color);
       mat-icon.mat-icon.lux-icon {
         padding: 0px !important;
         width: 0.8em;
@@ -38,34 +37,34 @@ lux-link-plain {
   }
 
   &.default-style {
-    color: map.get(luxpalette.$lux-palette-primary, A700);
+    color: var(--lux-theme-link-plain-color);
     font-family: inherit;
     lux-icon {
       mat-icon {
-        color: map.get(luxpalette.$lux-palette-primary, A700);
+        color: var(--lux-theme-link-plain-icon-color);
       }
     }
   }
 
-  &.lux-disabled,
-  .link-wrapper.lux-disabled {
-    color: luxcommon.$dark-disabled-text;
+  &.lux-disabled {
+    color: var(--lux-theme-dark-disabled-text);
     cursor: text;
     text-decoration: none;
     lux-icon {
       mat-icon {
-        color: luxcommon.$dark-disabled-text;
+        color: var(--lux-theme-dark-disabled-text);
       }
     }
   }
 
   &:hover:not(.lux-disabled) {
-    color: map.get(luxpalette.$lux-palette-primary, 300);
+    color: var(--lux-theme-link-plain-hover-color);
     text-decoration: underline;
+    background-color: var(--lux-theme-link-plain-hover-background-color);
     cursor: pointer;
     lux-icon {
       mat-icon {
-        color: map.get(luxpalette.$lux-palette-primary, 300);
+        color: var(--lux-theme-link-plain-hover-color);
       }
     }
   }

package/src/{base → base-templates}/components/_luxList.scss

@@ -1,8 +1,5 @@
-@use "sass:map";
-@use "../luxfocus";
-@use "../luxcommon";
-@use "../luxpalette";
-@use "../luxelevations";
+@use "../common/luxfocus";
+@use "../common/luxelevations";
 
 /*
  * Theming for LUX-List
@@ -17,7 +14,7 @@ lux-list {
 
   .lux-list-empty-icon,
   .lux-list-empty-icon-text {
-    color: map.get(luxcommon.$componentBgColors, "gray");
+    color: var(--lux-theme-custom-gray);
     padding: 0 8px;
   }
   .mat-mdc-card:not([class*="mat-elevation-z"]) {
@@ -85,8 +82,8 @@ lux-list {
           @include luxfocus.lux-selectable-mixin;
 
           &:hover {
-            border: 1px solid luxpalette.$lux-primary-color;
-            background: luxcommon.$app-gradient-reverse;
+            border: 1px solid var(--lux-theme-primary-color);
+            background: var(--lux-theme-app-gradient-reverse);
             background-color: #fff !important;
           }
         }

package/src/base-templates/components/_luxLookupAutocomplete.scss

@@ -0,0 +1,6 @@
+.lux-autocomplete-panel-ac {
+  .invalid {
+    font-weight: var(--lux-theme-lookup-invalid-option-font-weight);
+    color: var(--lux-theme-lookup-invalid-option-text-color);
+  }
+}

package/src/base-templates/components/_luxLookupCombobox.scss

@@ -0,0 +1,30 @@
+@use "../common/luxfocus" as luxfocus;
+
+lux-lookup-combobox-ac {
+  &.lux-form-control-readonly {
+    pointer-events: none;
+  }
+
+  // Hier kann nicht der Token "disabled-arrow-color" verwendet werden, da dieser
+  // nur greifen würde, wenn das mat-select-Element in einem mat-form-field verwendet wird.
+  [aria-disabled="true"] {
+    .mat-mdc-select-arrow {
+      color: var(--lux-theme-dark-disabled-text);
+    }
+  }
+}
+
+.lux-select-panel-ac {
+  .invalid {
+    font-weight: var(--lux-theme-lookup-invalid-option-font-weight);
+    color: var(--lux-theme-lookup-invalid-option-text-color);
+  }
+}
+
+lux-lookup-combobox-ac {
+ @media (prefers-contrast: more) {
+    .mat-mdc-select:focus {
+      @include luxfocus.focus-dark-mixin;
+    }
+  }
+}

package/src/{base → base-templates}/components/_luxMasterDetailAc.scss

@@ -1,15 +1,11 @@
-@use "sass:map";
-@use "../luxfocus";
-@use "../luxcommon";
-@use "../luxpalette";
-@use "../luxelevations";
+@use "../common/luxelevations";
 
 // Die lux-list besitzt eine unsichtbare Border für die Anzeige des Focus-Indicators
 // damit dieser vollständig angzeigt werden kann, muss die Master-View ein passendes Padding anbieten
 // damit der Master-Header/Master-Footer mit der Liste ausgerichtet werden, müssen sie ebenfalls mit dem
 // passenden Padding/Margin versehen werden.
 // Das Margin berechnet sich aus der Breite der Outline + 1px Abstand zu den Listitems.
-$listmargin: calc(luxcommon.$outline-width + 1px);
+$listmargin: calc(var(--lux-theme-outline-width) + 1px);
 
 .lux-master-detail-ac {
   // Hauptcontainer für die Komponente
@@ -45,7 +41,7 @@ $listmargin: calc(luxcommon.$outline-width + 1px);
       max-width: calc(50% - 15px);
     }
     &.lux-master-closed {
-      border: 1px solid luxcommon.$app-border-color;
+      border: 1px solid var(--lux-theme-app-border-color);
       border-left-style: none;
       border-radius: 0 4px 4px 0;
       padding: 0;
@@ -78,27 +74,17 @@ $listmargin: calc(luxcommon.$outline-width + 1px);
 
       button.lux-button.lux-button-rounded {
         @include luxelevations.lux-elevation-z0;
-        border: 1px solid luxcommon.$app-border-color;
-        color: map.get(luxpalette.$lux-palette-primary, 500);
+        border: 1px solid var(--lux-theme-app-border-color);
+        color: var(--lux-theme-primary-20);
         background-color: #fff !important;
       }
 
       .lux-button-icon-round.lux-lx-icon.lux-no-size {
         // optische Anpassung für das "Chevron"-Icon, damit es zentriert im Button sitzt
-        // // Anpassung erforderlich, falls das Icon ausgetauscht wird
+        // Anpassung erforderlich, falls das Icon ausgetauscht wird
         padding-bottom: 4px;
       }
     }
-    button.lux-button.lux-button-rounded {
-      &:hover:not([disabled]) {
-        color: luxcommon.$lux-hover-color;
-        border-radius: 50%;
-      }
-      &:active:not([disabled]) {
-        color: map.get(luxpalette.$lux-palette-primary, 700);
-        background-color: #fff !important;
-      }
-    }
     .lux-menu-extended {
       padding: 0px;
     }
@@ -118,9 +104,6 @@ $listmargin: calc(luxcommon.$outline-width + 1px);
   lux-filter-form .lux-filter-card,
   .detail-header-container .lux-detail-header-ac,
   .lux-master-view-ac lux-list-item {
-    mat-card.mat-mdc-card {
-      padding: 12px;
-    }
     mat-card-title,
     h2 {
       font-size: 1rem;
@@ -132,7 +115,7 @@ $listmargin: calc(luxcommon.$outline-width + 1px);
 
   .lux-empty-master-header {
     div.lux-master-header-container-ac {
-      border: 1px solid luxcommon.$app-border-color;
+      border: 1px solid var(--lux-theme-app-border-color);
       border-radius: 4px;
       background-color: #fff;
       height: 72px;
@@ -181,7 +164,7 @@ $listmargin: calc(luxcommon.$outline-width + 1px);
     }
     .lux-list-empty-icon,
     .lux-list-empty-icon-text {
-    color: rgb(97, 97, 97);
+      color: rgb(97, 97, 97);
       opacity: 1;
       margin-bottom: 8px;
     }
@@ -190,7 +173,7 @@ $listmargin: calc(luxcommon.$outline-width + 1px);
   lux-master-footer-ac {
     padding: 10px 12px 10px 16px;
     z-index: 100;
-    border: 1px solid luxcommon.$app-border-color;
+    border: 1px solid var(--lux-theme-app-border-color);
     border-radius: 4px;
     background-color: #fff;
     .lux-menu-extended {
@@ -200,7 +183,7 @@ $listmargin: calc(luxcommon.$outline-width + 1px);
 
   .lux-detail-ac-container {
     position: relative;
-    border: 1px solid luxcommon.$app-border-color;
+    border: 1px solid var(--lux-theme-app-border-color);
     border-radius: 4px;
     background-color: #fff;
     display: flex;
@@ -221,7 +204,7 @@ $listmargin: calc(luxcommon.$outline-width + 1px);
 
     .lux-detail-empty-icon,
     .lux-detail-empty-icon-text {
-    color: rgb(97, 97, 97);
+      color: rgb(97, 97, 97);
       opacity: 1;
     }
     &.lux-detail-ac-container-mobile {
@@ -229,7 +212,7 @@ $listmargin: calc(luxcommon.$outline-width + 1px);
       background-color: unset;
       .lux-detail-header-ac {
         mat-card.mat-mdc-card.lux-card {
-          border: 2px solid luxpalette.$lux-primary-color;
+          border: 2px solid var(--lux-theme-primary-color);
         }
       }
       .back-to-master-button-container {
@@ -239,15 +222,15 @@ $listmargin: calc(luxcommon.$outline-width + 1px);
         padding: 4px;
 
         &:hover {
-          color: luxcommon.$lux-hover-color;
+          color: var(--lux-theme-hover-color);
           cursor: pointer;
         }
 
         lux-button.back-to-master-button {
           button.lux-button.lux-button-rounded {
             @include luxelevations.lux-elevation-z0;
-            border: 1px solid luxcommon.$app-border-color;
-            color: map.get(luxpalette.$lux-palette-primary, 500);
+            border: 1px solid var(--lux-theme-app-border-color);
+            color: var(--lux-theme-primary-20);
           }
           .lux-button-icon-round.lux-lx-icon.lux-no-size {
             // optische Anpassung für das "Chevron"-Icon, damit es zentriert im Button sitzt
@@ -257,11 +240,11 @@ $listmargin: calc(luxcommon.$outline-width + 1px);
         }
         .back-to-master-label {
           font-size: 1rem;
-          color: map.get(luxpalette.$lux-palette-primary, 500);
+          color: var(--lux-theme-primary-20);
         }
       }
       .lux-detail-view-container {
-        border: 1px solid luxcommon.$app-border-color;
+        border: 1px solid var(--lux-theme-app-border-color);
         border-radius: 4px;
         background-color: #fff;
       }

package/src/base-templates/components/_luxMenu.scss

@@ -0,0 +1,270 @@
+@use "@angular/material" as mat;
+@use "../common/luxSvgIcons" as luxicons;
+@use "../common/luxfocus" as luxfocus;
+
+.mat-mdc-menu-panel {
+  .mat-mdc-menu-item-text {
+    min-height: var(--lux-theme-menu-panel-option-min-height);
+    padding: var(--lux-theme-menu-panel-option-padding);
+  }
+}
+
+lux-menu {
+  display: block;
+  width: 100%;
+
+  .lux-menu-extended,
+  .lux-menu-trigger {
+    > lux-button {
+      button {
+        padding-left: 8px;
+        padding-right: 8px;
+        min-width: 30px;
+      }
+    }
+  }
+}
+
+// Container für die Buttons und den Trigger ausserhalb des Menu-Panels
+.lux-menu-extended {
+  overflow: hidden;
+  min-width: 0;
+  padding: 4px 0;
+  position: relative;
+
+  > lux-button {
+    @include mat.button-overrides(
+      (
+        text-container-shape: var(--lux-theme-menu-button-text-container-shape),
+        text-label-text-size: var(--lux-theme-menu-button-item-font-size),
+        text-container-height: var(--lux-theme-menu-container-height)
+      )
+    );
+
+    margin-right: 8px;
+    &.lux-menu-item .lux-button-label {
+      white-space: nowrap;
+      font-weight: 400;
+      letter-spacing: 1px;
+    }
+  }
+}
+
+// Container für den Menu-Trigger-button
+.lux-menu-trigger {
+  display: flex;
+  flex: 0 0 auto;
+  margin: 0 4px;
+  align-self: center;
+  box-sizing: border-box;
+}
+
+.lux-menu-trigger-default {
+  button.mat-mdc-button {
+    white-space: nowrap;
+
+    &:not(:disabled) {
+      color: var(--lux-theme-primary-20);
+    }
+  }
+}
+
+/* Menu-Overlay-Panel anpassen */
+.lux-menu-panel {
+  @include mat.menu-overrides(
+    (
+      container-shape: var(--lux-theme-app-border-radius),
+      container-elevation-shadow: 0 0 0 1px var(--mat-card-outlined-outline-color, var(--mat-sys-outline-variant)),
+      container-color: var(--lux-theme-panel-bg-color),
+      item-hover-state-layer-color: color-mix(in srgb, var(--mat-sys-secondary-container) 8%, transparent),
+      item-focus-state-layer-color: color-mix(in srgb, var(--mat-sys-secondary-container) 12%, transparent),
+      item-label-text-size: var(--lux-theme-menu-item-font-size),
+      item-label-text-color: var(--lux-theme-menu-item-font-color),
+      item-icon-color: var(--lux-theme-menu-item-font-color),
+      divider-color: var(--lux-theme-dark-dividers)
+    )
+  );
+
+  .lux-selected-item-ac {
+    font-weight: 600;
+    color: var(--lux-theme-primary-color);
+    .lux-button-label {
+      padding-right: 24px;
+      &::after {
+        content: "";
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        right: 0;
+        top: 14px;
+        margin: 0 10px 0 4px;
+        background-color: var(--lux-theme-primary-color);
+        -webkit-mask: url(luxicons.$checkmark);
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        -webkit-mask-size: cover;
+        mask: url(luxicons.$checkmark);
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: cover;
+      }
+    }
+  }
+
+  .mat-mdc-menu-item-text {
+    display: flex;
+  }
+
+  .lux-button-badge-container {
+    min-width: 38px;
+    vertical-align: middle;
+    align-self: center;
+  }
+
+  .lux-button-badge {
+    color: #fff;
+    border-radius: 4px;
+    padding: 1px 4px;
+    font-size: 0.6875rem;
+    line-height: normal;
+    max-height: 16px;
+    min-width: 15px;
+    max-width: 38px;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    box-sizing: border-box;
+    letter-spacing: 1.25px;
+  }
+
+  .lux-menu-item-icon {
+    align-self: center;
+    vertical-align: middle;
+    mat-icon {
+      margin: 0;
+    }
+  }
+}
+
+//Styling für das neue Panel mit Sektionen und das Large Panel
+.lux-menu-section-panel,
+.lux-menu-section-panel:not(.lux-menu-panel-large) {
+  min-width: 260px !important;
+  max-width: 100%;
+}
+
+.lux-menu-section-panel,
+.lux-menu-section-panel:has(.lux-menu-panel-large) {
+  min-width: 360px !important;
+  max-width: 100%;
+}
+
+.lux-menu-section-panel {
+  .lux-menu-item-content {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .lux-menu-item-icon {
+    margin-right: 8px;
+    flex-shrink: 0;
+  }
+
+  .lux-button-label {
+    color: var(--lux-theme-menu-item-font-color);
+    text-align: left;
+    flex: 1 1 auto;
+    white-space: normal;
+  }
+
+  .lux-menu-item-badge-right {
+    min-width: 0px !important;
+    margin-left: auto;
+    align-self: center;
+    display: flex;
+  }
+
+  .lux-button-label-subtitle {
+    color: var(--lux-theme-menu-item-subtitle-font-color);
+    font-size: 0.875rem;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: 0.07px;
+  }
+
+  .lux-menu-panelheader-username {
+    display: flex;
+    padding: 12px 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+    align-self: stretch;
+    font-weight: 600;
+    font-size: 1rem;
+    font-style: normal;
+    line-height: 120%;
+  }
+  .lux-menu-panelheader-username-subtitle {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+    align-self: stretch;
+    font-weight: 400;
+
+    font-size: 0.75rem;
+    font-style: normal;
+    line-height: normal;
+  }
+  .lux-menu-section-title {
+    display: flex;
+    padding: 8px 16px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    align-self: stretch;
+
+    color: var(--lux-theme-neutral-40);
+    font-weight: 600;
+    font-size: 1rem;
+    letter-spacing: 0.08px;
+    line-height: 120%; /* 19.2px */
+  }
+  .lux-menu-item-divider {
+    padding: 4px;
+  }
+
+  .lux-menu-item-selected {
+    background-color: var(--lux-theme-primary-90) !important;
+    text-decoration-line: underline;
+    text-decoration-style: solid;
+    text-decoration-thickness: 10%;
+    text-underline-offset: 5%;
+    text-underline-position: from-font;
+  }
+
+  .lux-menu-item-selected {
+    background-color: var(--lux-theme-primary-90);
+    &.lux-button-label {
+      text-decoration-line: underline;
+      text-decoration-style: solid;
+      text-decoration-thickness: 10%;
+      text-underline-offset: 5%;
+      text-underline-position: from-font;
+    }
+    &.lux-button-label-subtitle {
+      text-decoration-color: var(--lux-theme-primary-40);
+      text-decoration-line: underline;
+      text-decoration-style: solid;
+      text-decoration-thickness: 12%;
+      text-underline-offset: 5%;
+      text-underline-position: from-font;
+    }
+  }
+
+  .lux-menu-item-badge-right {
+    text-align: end;
+  }
+}