@ihk-gfi/lux-components-theme 21.3.0 → 21.5.0

package/src/base-templates/common/_luxstyles.scss

@@ -117,14 +117,17 @@ a:not(.lux-link) {
   }
 }
 
+// @deprecated Verwende stattdessen .lux-bg-header aus _luxutilities.scss.
 .lux-app-header-bg {
   background-color: var(--lux-theme-app-header-bg);
 }
 
+// @deprecated Verwende stattdessen .lux-bg-content aus _luxutilities.scss.
 .lux-app-content-bg {
   background-color: var(--lux-theme-app-content-bg);
 }
 
+// @deprecated Verwende stattdessen .lux-bg-footer aus _luxutilities.scss.
 .lux-app-footer-bg {
   background-color: var(--lux-theme-app-footer-bg);
 }
@@ -314,14 +317,17 @@ lux-card.lux-card-grow {
   box-sizing: content-box;
 }
 
+// @deprecated Verwende stattdessen .lux-whitespace-nowrap aus _luxutilities.scss.
 .lux-nowrap {
   white-space: nowrap;
 }
 
+// @deprecated Verwende stattdessen .lux-cursor-pointer aus _luxutilities.scss.
 .lux-cursor {
   cursor: pointer;
 }
 
+// @deprecated Verwende stattdessen .lux-pointer-events-none aus _luxutilities.scss.
 .lux-block-pointer-events {
   pointer-events: none;
 }
@@ -338,14 +344,6 @@ lux-card.lux-card-grow {
   opacity: 0.6;
 }
 
-.lux-overflow-y-hidden {
-  overflow-y: hidden;
-}
-
-.lux-overflow-y-auto {
-  overflow-y: auto;
-}
-
 .lux-overflow-wrap-break-word {
   overflow-wrap: break-word;
 }
@@ -402,6 +400,7 @@ $gapSteps: 10, 20, 30;
 }
 
 /*
+  @deprecated Verwende stattdessen .lux-z-{n} aus _luxutilities.scss (z.B. .lux-z-100).
   Erstellt die Z-Indizes.
   Um weitere Z-Indizes anzulegen, die Variable zindexSteps um die entsprechenden Werte ergaenzen.
  */

package/src/base-templates/common/_luxutilities.scss

@@ -0,0 +1,343 @@
+@use "luxfocus" as focus;
+
+// =============================================================================
+// LUX Utility Classes
+// =============================================================================
+// Tailwind-inspired utility classes that complement the LUX component styles.
+// LUX component styles cover: display, flex, gap, margin, padding,
+//   width/height, align, justify.
+// These utilities add: positioning, overflow, border, cursor, typography,
+//   z-index, interaction patterns.
+//
+// Usage in consuming apps:
+//   The utilities are included automatically via the LUX theme package.
+// =============================================================================
+
+// =============================================================================
+// LUX Utility Design Tokens
+// =============================================================================
+// Utilities-spezifische CSS Custom Properties.
+// Theme-agnostische Base-Tokens (Spacing, Font-Size) sind in _variables.scss.
+// =============================================================================
+
+:root {
+  // --- Focus State Layer ---
+  // Background tint applied behind focus-visible outlines (12% primary, per Figma "focus-state-layer-color").
+  --lux-focus-state-layer-color: color-mix(in srgb, var(--lux-theme-primary-color) 12%, transparent);
+
+  // --- Z-Index ---
+  --lux-z-action-bar: 8;
+  --lux-z-header: 100;
+  --lux-z-backdrop: 199;
+  --lux-z-drawer: 200;
+  --lux-z-skip-link: 10000;
+}
+
+// =============================================================================
+// Positioning
+// =============================================================================
+
+$positions: static, relative, absolute, fixed, sticky;
+@each $pos in $positions {
+  .lux-#{$pos} {
+    position: $pos;
+  }
+}
+
+// Inset (top, right, bottom, left)
+$inset-values: (
+  "0": 0,
+  "auto": auto
+);
+@each $key, $val in $inset-values {
+  .lux-inset-#{$key} {
+    inset: $val;
+  }
+  .lux-top-#{$key} {
+    top: $val;
+  }
+  .lux-right-#{$key} {
+    right: $val;
+  }
+  .lux-bottom-#{$key} {
+    bottom: $val;
+  }
+  .lux-left-#{$key} {
+    left: $val;
+  }
+}
+
+// =============================================================================
+// Z-Index
+// =============================================================================
+
+$z-indices: (
+  "auto": auto,
+  "0": 0,
+  "1": 1,
+  "5": 5,
+  "8": 8,
+  "9": 9,
+  "10": 10,
+  "100": 100,
+  "199": 199,
+  "200": 200,
+  "500": 500,
+  "1000": 1000,
+  "10000": 10000
+);
+@each $key, $val in $z-indices {
+  .lux-z-#{$key} {
+    z-index: $val;
+  }
+}
+
+// =============================================================================
+// Overflow
+// =============================================================================
+// Note: .lux-overflow-y-hidden and .lux-overflow-y-auto are also defined in
+// _luxstyles.scss. The definitions below are identical and take precedence
+// due to cascade order.
+
+$overflow-values: auto, hidden, visible, scroll;
+@each $val in $overflow-values {
+  .lux-overflow-#{$val} {
+    overflow: $val;
+  }
+  .lux-overflow-x-#{$val} {
+    overflow-x: $val;
+  }
+  .lux-overflow-y-#{$val} {
+    overflow-y: $val;
+  }
+}
+
+// =============================================================================
+// Border
+// =============================================================================
+
+.lux-border-0 {
+  border: none;
+}
+
+$border-radius: (
+  "none": 0,
+  "xs": var(--lux-theme-radius-xs),
+  "sm": var(--lux-theme-radius-sm),
+  "md": var(--lux-theme-radius-md),
+  "lg": var(--lux-theme-radius-lg),
+  "xl": var(--lux-theme-radius-xl),
+  "xxl": var(--lux-theme-radius-xxl),
+  "full": 50%,
+  "theme": var(--lux-theme-app-border-radius)
+);
+@each $key, $val in $border-radius {
+  .lux-rounded-#{$key} {
+    border-radius: $val;
+  }
+}
+
+// =============================================================================
+// Box Shadow
+// =============================================================================
+
+.lux-shadow-none {
+  box-shadow: none;
+}
+
+// =============================================================================
+// Cursor
+// =============================================================================
+
+.lux-cursor-pointer {
+  cursor: pointer;
+}
+
+.lux-cursor-default {
+  cursor: default;
+}
+
+// =============================================================================
+// Pointer Events
+// =============================================================================
+
+.lux-pointer-events-none {
+  pointer-events: none;
+}
+
+.lux-pointer-events-auto {
+  pointer-events: auto;
+}
+
+// =============================================================================
+// Typography
+// =============================================================================
+
+// Font size
+$font-sizes: (
+  "xs": var(--lux-theme-font-size-xs),
+  "sm": var(--lux-theme-font-size-sm),
+  "base": var(--lux-theme-font-size-md),
+  "lg": var(--lux-theme-font-size-lg),
+  "xl": var(--lux-theme-font-size-xl),
+  "2xl": var(--lux-theme-font-size-2xl)
+);
+@each $key, $val in $font-sizes {
+  .lux-text-#{$key} {
+    font-size: $val;
+  }
+}
+
+// Font weight
+$font-weights: (
+  "light": 300,
+  "normal": 400,
+  "medium": 500,
+  "semibold": 600,
+  "bold": 700
+);
+@each $key, $val in $font-weights {
+  .lux-font-#{$key} {
+    font-weight: $val;
+  }
+}
+
+// Font family
+.lux-font-headline {
+  font-family: var(--lux-theme-app-headline-font, inherit);
+}
+
+.lux-font-body {
+  font-family: var(--lux-theme-app-font-family, inherit);
+}
+
+// Line height
+$line-heights: (
+  "none": 1,
+  "tight": 1.2,
+  "normal": 1.5,
+  "relaxed": 1.75
+);
+@each $key, $val in $line-heights {
+  .lux-leading-#{$key} {
+    line-height: $val;
+  }
+}
+
+// White space
+.lux-whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.lux-whitespace-normal {
+  white-space: normal;
+}
+
+// =============================================================================
+// Background
+// =============================================================================
+
+.lux-bg-transparent {
+  background: transparent;
+}
+
+.lux-bg-header {
+  background-color: var(--lux-theme-app-header-bg);
+}
+
+.lux-bg-content {
+  background-color: var(--lux-theme-app-content-bg);
+}
+
+.lux-bg-footer {
+  background-color: var(--lux-theme-app-footer-bg);
+}
+
+.lux-bg-primary {
+  background-color: var(--lux-theme-primary-color);
+}
+
+// =============================================================================
+// Text Color
+// =============================================================================
+
+.lux-text-primary {
+  color: var(--lux-theme-primary-color);
+}
+
+.lux-text-dark {
+  color: var(--lux-theme-dark-primary-text);
+}
+
+.lux-text-light {
+  color: var(--lux-theme-light-primary-text);
+}
+
+.lux-text-secondary {
+  color: var(--lux-theme-dark-secondary-text);
+}
+
+.lux-text-disabled {
+  color: var(--lux-theme-dark-disabled-text);
+}
+
+// =============================================================================
+// Outline
+// =============================================================================
+
+.lux-outline-none {
+  outline: none;
+}
+
+// =============================================================================
+// Transition
+// =============================================================================
+
+.lux-transition-none {
+  transition: none;
+}
+
+// =============================================================================
+// Skip-Link
+// =============================================================================
+// Visually hidden until focused; reveals as a high-contrast pill above all content.
+// Pair with `lux-sr-only` on the element so it stays hidden by default.
+
+.lux-skip-link {
+  &:focus-visible {
+    position: fixed;
+    top: var(--lux-theme-spacing-sm);
+    left: var(--lux-theme-spacing-sm);
+    width: auto;
+    height: auto;
+    padding: var(--lux-theme-spacing-sm) var(--lux-theme-spacing-md);
+    background-color: var(--lux-theme-primary-20);
+    color: var(--lux-theme-primary-100);
+    font-size: var(--lux-theme-font-size-sm);
+    font-weight: 600;
+    border-radius: var(--lux-theme-radius-sm);
+    z-index: var(--lux-z-skip-link);
+    outline: 3px solid var(--lux-theme-custom-lightblue);
+  }
+}
+
+// =============================================================================
+// Interaction
+// =============================================================================
+// Applies the LUX hover/active/focus pattern to custom interactive elements
+// (e.g. <a> or <button> without lux-button).
+// Use together with .lux-rounded-theme for consistent styling.
+
+.lux-interactive {
+  &:hover:not(:focus-visible) {
+    background-color: var(--lux-theme-hover-color);
+  }
+
+  &:active {
+    background-color: var(--lux-theme-selected-bg-color);
+  }
+
+  &:focus-visible {
+    @include focus.lux-button-focus;
+  }
+}

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

@@ -3,6 +3,11 @@
 
 // Accordion
 lux-accordion {
+  .mat-accordion {
+    display: block;
+    padding: var(--lux-theme-accordion-panel-container-elevation-shadow-width);
+  }
+
   @include mat.expansion-overrides(
     (
       container-text-color: var(--lux-theme-dark-primary-text)
@@ -20,7 +25,7 @@ lux-accordion {
           header-description-color: var(--lux-theme-accordion-header-color-on-primary),
           header-indicator-color: var(--lux-theme-accordion-header-color-on-primary),
           header-hover-state-layer-color: var(--lux-theme-accordion-header-hover-color-on-primary),
-          header-focus-state-layer-color: var(--lux-theme-accordion-header-focus-color-on-primary),
+          header-focus-state-layer-color: var(--lux-theme-accordion-header-focus-color-on-primary)
         )
       );
     }
@@ -36,7 +41,7 @@ lux-accordion {
           header-description-color: var(--lux-theme-accordion-header-color-on-accent),
           header-indicator-color: var(--lux-theme-accordion-header-color-on-accent),
           header-hover-state-layer-color: var(--lux-theme-accordion-header-hover-color-on-accent),
-          header-focus-state-layer-color: var(--lux-theme-accordion-header-focus-color-on-accent),
+          header-focus-state-layer-color: var(--lux-theme-accordion-header-focus-color-on-accent)
         )
       );
     }
@@ -89,7 +94,8 @@ lux-panel {
       header-disabled-state-text-color: var(--lux-theme-dark-disabled-text),
       header-hover-state-layer-color: var(--lux-theme-accordion-header-hover-color-on-neutral),
       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-elevation-shadow: 0 0 0 var(--lux-theme-accordion-panel-container-elevation-shadow-width)
+        var(--mat-card-outlined-outline-color, var(--mat-sys-outline-variant))
     )
   );
 
@@ -134,4 +140,17 @@ lux-panel {
       @include luxfocus.focus-dark-mixin-inline;
     }
   }
+
+  // Ränder für Panels außerhalb von Accordions
+  &:not(lux-accordion lux-panel) {
+    padding-left: var(--lux-theme-accordion-panel-container-elevation-shadow-width);
+    padding-right: var(--lux-theme-accordion-panel-container-elevation-shadow-width);
+
+    &:first-of-type {
+      padding-top: var(--lux-theme-accordion-panel-container-elevation-shadow-width);
+    }
+    &:last-of-type {
+      padding-bottom: var(--lux-theme-accordion-panel-container-elevation-shadow-width);
+    }
+  }
 }

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

@@ -1,5 +1,6 @@
 @use "@angular/material" as mat;
 @use "../common/luxfocus";
+@use "../common/luxbreakpoints" as bp;
 
 $margin-right-icon: 20px;
 
@@ -47,11 +48,13 @@ lux-card {
       }
 
       .lux-card-icon-container {
+        margin-top: 4px;
         margin-right: 10px;
         order: 5;
       }
 
       .lux-card-info-container {
+        margin-top: 4px;
         order: 15;
 
         // Damit die Info-Komponente immer rechtsbündig im Card-Header ist, auch wenn der Titel oder Subtitle kurz sind.
@@ -110,11 +113,31 @@ lux-card {
     // damit es mit den anderen Paddings innerhalb der Card (wie z.B. Header und Content) übereinstimmt.
     .lux-card-actions {
       padding: var(--lux-theme-card-padding);
+
+      @include bp.xs {
+        lux-card-actions {
+          flex-direction: column;
+        }
+
+        .lux-card-actions-container {
+          flex-direction: column;
+          align-items: stretch;
+
+          lux-button {
+            display: block;
+            width: 100%;
+
+            button.lux-button {
+              width: 100%;
+            }
+          }
+        }
+      }
     }
   }
 
   .lux-card {
-    &[class~="lux-cursor"]:hover {
+    &[class~="lux-cursor-pointer"]:hover {
       background-image: var(--lux-theme-app-gradient-reverse);
       background-color: #ffffff;
       border-color: var(--lux-theme-dark-primary-text);
@@ -126,7 +149,7 @@ lux-card {
       }
     }
 
-    &[class~="lux-cursor"]:focus-visible {
+    &[class~="lux-cursor-pointer"]:focus-visible {
       @include luxfocus.focus-dark-mixin-inline;
     }
   }

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

@@ -13,6 +13,26 @@
   color: var(--lux-theme-dark-secondary-text);
 }
 
+@mixin form-error-icon {
+  color: var(--mat-sys-on-error-container);
+  mat-icon.mat-icon {
+    box-sizing: border-box;
+  }
+}
+
+@mixin form-error-label {
+  display: flex;
+  flex: 0 1 auto;
+  background-color: var(--lux-theme-form-error-msg-background);
+  border-radius: 4px;
+  padding-right: 2px;
+  color: var(--mat-sys-on-error-container) !important;
+  box-shadow:
+    -18px 0px 0 0 var(--lux-theme-form-error-msg-background),
+    -18px -1px 0 0 var(--lux-theme-form-error-msg-background),
+    0 -1px 0 0 var(--lux-theme-form-error-msg-background);
+}
+
 @mixin lux-form-control-min-height($min-height) {
   input,
   mat-select,
@@ -73,6 +93,7 @@ lux-input-ac,
 lux-select-ac,
 lux-lookup-combobox-ac,
 lux-datepicker-ac,
+lux-timepicker,
 lux-datetimepicker-ac,
 lux-file-input-ac,
 lux-textarea-ac {
@@ -227,21 +248,10 @@ lux-form-control-wrapper {
       }
       .lux-form-control-misc-authentic {
         .lux-alert-icon {
-          color: var(--mat-sys-on-error-container);
-          mat-icon.mat-icon {
-            box-sizing: border-box;
-          }
+          @include form-error-icon;
         }
         .mat-mdc-form-field-error {
-          display: flex;
-          background-color: var(--lux-theme-form-error-msg-background);
-          border-radius: 4px;
-          padding-right: 2px;
-          color: var(--mat-sys-on-error-container) !important;
-          box-shadow:
-            -18px 0px 0 0 var(--lux-theme-form-error-msg-background),
-            -18px -1px 0 0 var(--lux-theme-form-error-msg-background),
-            0 -1px 0 0 var(--lux-theme-form-error-msg-background);
+          @include form-error-label;
         }
       }
     }
@@ -274,3 +284,17 @@ lux-form-control-wrapper {
     transition: background-color 5000s ease-in-out 0s;
   }
 }
+
+.lux-form-error-container {
+  display: flex;
+  flex: 0 1 auto;
+  font-size: 0.75rem;
+}
+
+.lux-form-error-icon {
+  @include form-error-icon;
+}
+
+.lux-form-error-label {
+  @include form-error-label;
+}

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

@@ -78,7 +78,7 @@ lux-list {
       }
 
       &:not(.lux-list-item-selected) {
-        mat-card[class~="lux-cursor"]:not([class*="mat-elevation-z"]) {
+        mat-card[class~="lux-cursor-pointer"]:not([class*="mat-elevation-z"]) {
           @include luxfocus.lux-selectable-mixin;
 
           &:hover {

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

@@ -139,6 +139,7 @@ lux-menu {
   }
 
   .lux-menu-item-icon {
+    display: inline-block;
     align-self: center;
     vertical-align: middle;
     width: var(--lux-theme-menu-item-icon-size);

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

@@ -39,6 +39,17 @@ lux-message-box {
       padding: var(--lux-theme-outline-width) 24px;
       border-radius: 4px;
 
+      transition: opacity 300ms ease-out;
+
+      @starting-style {
+        opacity: 0;
+      }
+
+      &.lux-message-closing {
+        opacity: 0;
+        transition: opacity 300ms ease-in;
+      }
+
       &.lux-messagebox-white {
         // da im Theme authentic der Schatten entfernt wurde, muss eine Weiße Messagebox eine Border erhalten.
         border: 1px solid var(--lux-theme-primary-color);

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

@@ -0,0 +1,7 @@
+@use "@angular/material" as mat;
+
+:root {
+  @include mat.paginator-overrides((
+    container-background-color: transparent,
+  ));
+}

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

@@ -20,6 +20,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "yell
   @include mat.snack-bar-overrides(
     (
       supporting-text-size: 1rem,
+      supporting-text-line-height: 1.5rem,
       supporting-text-weight: 600
     )
   );

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

@@ -12,7 +12,7 @@ lux-stepper {
       line-color: var(--lux-theme-app-border-color),
       header-label-text-size: 1rem,
       header-selected-state-label-text-size: 1rem,
-      header-error-state-label-text-size: 1rem,
+      header-error-state-label-text-size: 1rem
     )
   );
 
@@ -30,6 +30,16 @@ lux-stepper {
   .mat-vertical-stepper-header {
     margin: 8px 8px 0 8px;
   }
+
+  .mat-horizontal-stepper-header .mat-step-icon,
+  .mat-vertical-stepper-header .mat-step-icon {
+    margin-right: 0;
+  }
+
+  lux-step-header div {
+    margin-left: 0.75rem;
+  }
+
   mat-step-header {
     margin: var(--lux-theme-outline-width);
 
@@ -44,6 +54,7 @@ lux-stepper {
 
     .mat-step-label {
       height: 100%;
+      min-width: unset;
       display: flex;
       align-items: center;
       position: relative;