@ihk-gfi/lux-components-theme 21.4.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/_luxCard.scss

@@ -137,7 +137,7 @@ lux-card {
   }
 
   .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);
@@ -149,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

@@ -93,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 {

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/_luxTabs.scss

@@ -21,9 +21,11 @@ lux-tabs {
   );
 
   mat-tab-group:not(.lux-tabs-show-divider) {
-    @include mat.tabs-overrides((
-      divider-height: 0,
-    ));
+    @include mat.tabs-overrides(
+      (
+        divider-height: 0
+      )
+    );
   }
 
   .mdc-tab {
@@ -59,8 +61,23 @@ lux-tabs {
     padding-top: 4px;
   }
 
+  // HINWEIS: Für jeden Wert in LuxBadgeNotificationColor muss hier eine Klasse existieren.
+  .lux-notification-color-primary {
+    background-color: var(--lux-theme-primary-color);
+  }
+
+  // Deprecated: .lux-notification-new wird in einer zukünftigen Version entfernt. Bitte stattdessen .lux-notification-color-accent verwenden.
+  .lux-notification-color-accent,
   .lux-notification-new {
-    background-color: var(--lux-theme-custom-green);
+    background-color: var(--lux-theme-accent-70);
+  }
+
+  .lux-notification-color-warn {
+    background-color: var(--mat-sys-error);
+  }
+
+  .lux-notification-color-default {
+    background-color: #605e5e;
   }
 
   .lux-tabs-notification-icon {

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

@@ -10,7 +10,7 @@ lux-tile {
     background-color: var(--lux-theme-accent-70);
   }
 
-  mat-card[class~="lux-cursor"] {
+  mat-card[class~="lux-cursor-pointer"] {
     &.mat-mdc-card {
       border-radius: var(--lux-theme-tile-border-radius);
       overflow: hidden !important;
@@ -171,9 +171,11 @@ lux-tile {
 
   /** ########## Focus / Hover ########## **/
 
-  mat-card[class~="lux-cursor"] {
+  mat-card[class~="lux-cursor-pointer"] {
     &.mat-mdc-card:focus-visible {
-      box-shadow: 0 0 0 2px #2e8533, 0 0 8px 2px #2e8533 !important;
+      box-shadow:
+        0 0 0 2px #2e8533,
+        0 0 8px 2px #2e8533 !important;
       outline: 0 !important;
     }
 

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

@@ -0,0 +1,7 @@
+@use "@angular/material" as mat;
+
+lux-timepicker {
+  button:not(:disabled) .lux-timepicker-toggle-icon {
+    color: var(--lux-theme-datepicker-icon-color);
+  }
+}

package/src/theme-authentic/_variables.scss

@@ -50,7 +50,9 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
 
   --lux-theme-spacing-xxs: 2px;
   --lux-theme-spacing-xs: 4px;
+  --lux-theme-spacing-1-5: 6px;
   --lux-theme-spacing-sm: 8px;
+  --lux-theme-spacing-3: 12px;
   --lux-theme-spacing-md: 16px;
   --lux-theme-spacing-lg: 24px;
   --lux-theme-spacing-xl: 32px;
@@ -62,6 +64,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
   --lux-theme-font-size-md: 1rem;
   --lux-theme-font-size-lg: 1.125rem;
   --lux-theme-font-size-xl: 1.25rem;
+  --lux-theme-font-size-2xl: 1.5rem;
 
   // Hauptfarben
   --lux-theme-primary-color: #{palettes.$lux-primary-color};

package/src/theme-authentic/lux-authentic.scss

@@ -9,6 +9,7 @@
 @use "../base-templates/common/luxstyles";
 @use "../base-templates/common/luxbreakpoints";
 @use "../base-templates/common/luxlayout";
+@use "../base-templates/common/luxutilities";
 
 @use "../base-templates/components/luxAccordion";
 @use "../base-templates/components/luxAppContent";
@@ -67,6 +68,7 @@
 @use "../base-templates/components/luxTextbox";
 @use "../base-templates/components/luxTile";
 @use "../base-templates/components/luxTileAc";
+@use "../base-templates/components/luxTimepicker";
 @use "../base-templates/components/luxToggle";
 @use "../base-templates/components/luxPopup";
 @use "../base-templates/components/luxToolTip";

package/src/theme-green/_variables.scss

@@ -50,7 +50,9 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
 
   --lux-theme-spacing-xxs: 2px;
   --lux-theme-spacing-xs: 4px;
+  --lux-theme-spacing-1-5: 6px;
   --lux-theme-spacing-sm: 8px;
+  --lux-theme-spacing-3: 12px;
   --lux-theme-spacing-md: 16px;
   --lux-theme-spacing-lg: 24px;
   --lux-theme-spacing-xl: 32px;
@@ -62,6 +64,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
   --lux-theme-font-size-md: 1rem;
   --lux-theme-font-size-lg: 1.125rem;
   --lux-theme-font-size-xl: 1.25rem;
+  --lux-theme-font-size-2xl: 1.5rem;
 
   // Hauptfarben
   --lux-theme-primary-color: #{palettes.$lux-primary-color};

package/src/theme-green/lux-green.scss

@@ -9,6 +9,7 @@
 @use "../base-templates/common/luxstyles";
 @use "../base-templates/common/luxbreakpoints";
 @use "../base-templates/common/luxlayout";
+@use "../base-templates/common/luxutilities";
 
 @use "../base-templates/components/luxAccordion";
 @use "../base-templates/components/luxAppContent";
@@ -67,6 +68,7 @@
 @use "../base-templates/components/luxTile";
 @use "../base-templates/components/luxTileAc";
 @use "../base-templates/components/luxToggle";
+@use "../base-templates/components/luxTimepicker";
 @use "../base-templates/components/luxPopup";
 @use "../base-templates/components/luxToolTip";
 @use "../base-templates/components/luxTourHint";