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

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

@@ -56,6 +56,48 @@ h6 {
   margin-block-end: 0.8rem;
 }
 
+.lux-h1,
+h1.lux-h1 {
+  font-family: var(--lux-theme-app-headline-font);
+  font-size: 2rem;
+  font-weight: 500;
+}
+
+.lux-h2,
+h2.lux-h2 {
+  font-family: var(--lux-theme-app-headline-font);
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
+.lux-h3,
+h3.lux-h3 {
+  font-family: var(--lux-theme-app-headline-font);
+  font-size: 1.25rem;
+  font-weight: 500;
+}
+
+.lux-h4,
+h4.lux-h4 {
+  font-family: var(--lux-theme-app-headline-font);
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.lux-h5,
+h5.lux-h5 {
+  font-family: var(--lux-theme-app-headline-font);
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+
+.lux-h6,
+h6.lux-h6 {
+  font-family: var(--lux-theme-app-headline-font);
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
 a:not(.lux-link) {
   background-color: var(--lux-theme-link-plain-background-color);
   color: var(--lux-theme-link-plain-color);

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

@@ -23,7 +23,7 @@ lux-app-header-ac {
         (
           foreground-color: var(--mat-sys-primary),
           container-color: var(--mat-sys-on-primary),
-          hover-state-layer-opacity: 0.1
+          hover-state-layer-opacity: var(--lux-theme-hover-state-layer-opacity)
         )
       );
     }

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

@@ -6,6 +6,7 @@
 @use "luxButtonFlat";
 @use "luxButtonRounded";
 @use "luxButtonRoundedStroked";
+@use "luxButtonIcon";
 @use "luxButtonSpinner";
 
 lux-button,

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

@@ -13,8 +13,8 @@ lux-link.lux-flat {
       filled-container-height: var(--lux-theme-button-flat-container-height),
       filled-label-text-color: var(--lux-theme-button-flat-default-text-color),
       filled-container-color: var(--lux-theme-button-flat-default-container-color),
-      filled-focus-state-layer-opacity: 0.1,
-      filled-hover-state-layer-opacity: 0.1
+      filled-focus-state-layer-opacity: var(--lux-theme-focus-state-layer-opacity),
+      filled-hover-state-layer-opacity: var(--lux-theme-hover-state-layer-opacity)
     )
   );
 
@@ -23,8 +23,8 @@ lux-link.lux-flat {
       (
         filled-label-text-color: var(--lux-theme-button-flat-primary-text-color),
         filled-container-color: var(--lux-theme-button-flat-primary-container-color),
-        filled-focus-state-layer-opacity: 0.1,
-        filled-hover-state-layer-opacity: 0.1
+        filled-focus-state-layer-opacity: var(--lux-theme-focus-state-layer-opacity),
+        filled-hover-state-layer-opacity: var(--lux-theme-hover-state-layer-opacity)
       )
     );
   }
@@ -34,8 +34,8 @@ lux-link.lux-flat {
       (
         filled-label-text-color: var(--lux-theme-button-flat-accent-text-color),
         filled-container-color: var(--lux-theme-button-flat-accent-container-color),
-        filled-focus-state-layer-opacity: 0.1,
-        filled-hover-state-layer-opacity: 0.1
+        filled-focus-state-layer-opacity: var(--lux-theme-focus-state-layer-opacity),
+        filled-hover-state-layer-opacity: var(--lux-theme-hover-state-layer-opacity)
       )
     );
   }
@@ -45,8 +45,8 @@ lux-link.lux-flat {
       (
         filled-label-text-color: var(--lux-theme-button-flat-warn-text-color),
         filled-container-color: var(--lux-theme-button-flat-warn-container-color),
-        filled-focus-state-layer-opacity: 0.1,
-        filled-hover-state-layer-opacity: 0.1
+        filled-focus-state-layer-opacity: var(--lux-theme-focus-state-layer-opacity),
+        filled-hover-state-layer-opacity: var(--lux-theme-hover-state-layer-opacity)
       )
     );
   }

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

@@ -0,0 +1,44 @@
+@use "@angular/material" as mat;
+
+lux-button.lux-icon-button {
+  @include mat.icon-button-overrides(
+    (
+      container-shape: var(--lux-theme-button-icon-container-shape),
+      icon-color: var(--lux-theme-button-icon-default-text-color),
+      icon-size: var(--lux-theme-button-icon-size),
+      state-layer-size: var(--lux-theme-button-icon-container-size),
+      state-layer-color: var(--lux-theme-state-layer-color),
+      touch-target-size: var(--lux-theme-button-icon-container-size)
+    )
+  );
+
+  lux-icon,
+  .lux-icon {
+    width: var(--lux-theme-button-icon-size);
+    height: var(--lux-theme-button-icon-size);
+  }
+
+  .mat-primary {
+    @include mat.icon-button-overrides(
+      (
+        icon-color: var(--lux-theme-button-icon-primary-text-color)
+      )
+    );
+  }
+
+  .mat-accent {
+    @include mat.icon-button-overrides(
+      (
+        icon-color: var(--lux-theme-button-icon-accent-text-color)
+      )
+    );
+  }
+
+  .mat-warn {
+    @include mat.icon-button-overrides(
+      (
+        icon-color: var(--lux-theme-button-icon-warn-text-color)
+      )
+    );
+  }
+}

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

@@ -13,8 +13,8 @@ lux-link.lux-raised {
       protected-container-height: var(--lux-theme-button-raised-container-height),
       protected-label-text-color: var(--lux-theme-button-raised-default-text-color),
       protected-container-color: var(--lux-theme-button-raised-default-container-color),
-      protected-focus-state-layer-opacity: 0.1,
-      protected-hover-state-layer-opacity: 0.1
+      protected-focus-state-layer-opacity: var(--lux-theme-focus-state-layer-opacity),
+      protected-hover-state-layer-opacity: var(--lux-theme-hover-state-layer-opacity)
     )
   );
 

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

@@ -21,7 +21,7 @@ lux-link.lux-rounded.lux-stroked {
         (
           foreground-color: var(--lux-theme-button-rounded-stroked-primary-text-color),
           container-color: transparent,
-          hover-state-layer-opacity: 0.1
+          hover-state-layer-opacity: var(--lux-theme-hover-state-layer-opacity)
         )
       );
     }
@@ -31,7 +31,7 @@ lux-link.lux-rounded.lux-stroked {
         (
           foreground-color: var(--lux-theme-button-rounded-stroked-accent-text-color),
           container-color: transparent,
-          hover-state-layer-opacity: 0.1
+          hover-state-layer-opacity: var(--lux-theme-hover-state-layer-opacity)
         )
       );
     }
@@ -41,7 +41,7 @@ lux-link.lux-rounded.lux-stroked {
         (
           foreground-color: var(--lux-theme-button-rounded-stroked-warn-text-color),
           container-color: transparent,
-          hover-state-layer-opacity: 0.1
+          hover-state-layer-opacity: var(--lux-theme-hover-state-layer-opacity)
         )
       );
     }
@@ -57,8 +57,15 @@ lux-link.lux-rounded.lux-stroked {
     height: var(--lux-theme-button-rounded-stroked-text-size);
   }
 
-  .lux-stroked:not(:disabled):not([aria-disabled="true"]) {
+  .lux-stroked {
     border: 1px solid;
+
+    &:disabled {
+      border-color: transparent;
+    }
+  }
+
+  .lux-stroked:not(:disabled) {
     border-color: var(--lux-theme-button-rounded-stroked-default-text-color);
 
     &.mat-primary {

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

@@ -79,9 +79,9 @@ lux-link {
   }
 
   .lux-button-spinner {
-    mat-progress-spinner {
-      width: 0.875rem !important;
-      height: 0.875rem !important;
+    .lux-progress-small mat-progress-spinner {
+      width: 1.125rem !important;
+      height: 1.125rem !important;
     }
     .spinner-padding {
       padding: 0;

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

@@ -0,0 +1,61 @@
+@use "@angular/material" as mat;
+
+lux-button-toggle {
+  @include mat.button-toggle-overrides(
+    (
+      shape: var(--lux-theme-button-toggle-shape),
+      text-color: var(--lux-theme-button-toggle-text-color),
+      selected-state-text-color: var(--lux-theme-button-toggle-selected-state-text-color),
+      selected-state-background-color: var(--lux-theme-button-toggle-selected-state-background-color),
+      hover-state-layer-opacity: var(--lux-theme-button-toggle-hover-state-layer-opacity),
+      disabled-selected-state-text-color: var(--lux-theme-button-toggle-disabled-selected-state-text-color),
+      disabled-selected-state-background-color: var(--lux-theme-button-toggle-disabled-selected-state-background-color),
+      disabled-state-text-color: var(--lux-theme-button-toggle-disabled-state-text-color),
+      disabled-state-background-color: var(--lux-theme-button-toggle-disabled-state-background-color),
+      height: var(--lux-theme-button-toggle-height),
+      divider-color: var(--lux-theme-button-toggle-divider-color)
+    )
+  );
+
+  mat-button-toggle-group[aria-disabled="true"] {
+    @include mat.button-toggle-overrides(
+      (
+        divider-color: var(--lux-theme-button-toggle-disabled-divider-color)
+      )
+    );
+  }
+
+  &.lux-dense {
+    @include mat.button-toggle-overrides(
+      (
+        height: var(--lux-theme-button-toggle-height-dense)
+      )
+    );
+  }
+
+  .lux-button-toggle-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .lux-button-toggle-misc {
+    display: flex;
+    margin-left: 12px;
+    font-size: 0.75rem;
+    line-height: 1.2rem;
+    color: var(--lux-theme-dark-secondary-text);
+    word-wrap: break-word;
+  }
+
+  .lux-button-toggle-error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-color: var(--lux-theme-form-error-msg-background);
+    border-radius: 4px;
+    padding-right: 2px;
+    color: var(--mat-sys-on-error-container);
+  }
+}

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

@@ -0,0 +1,63 @@
+lux-consent-dialog {
+  // Größere Schrift für die Hinweistexte der Toggle
+  lux-toggle-ac lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-misc-authentic {
+    font-size: 0.875rem;
+  }
+
+  .lux-consent-description {
+    margin-top: 0;
+    padding-top: 0;
+  }
+
+  .lux-consent-card {
+    padding: 4px;
+  }
+
+  .essential-always-active {
+    font-weight: 700;
+  }
+
+  .essential-hint {
+    display: flex;
+    font-size: 0.875rem;
+    line-height: 1em;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.6);
+    word-wrap: break-word;
+    margin: 0.25em calc(0.5em + 1px) 0 calc(0.5em + 1px);
+  }
+
+  .lux-consent-dialog-actions {
+    display: flex;
+    gap: 0.5rem;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .storage-type-title {
+    padding-left: 26px;
+  }
+
+  .storage-name {
+    word-break: break-all;
+  }
+}
+
+lux-consent-dialog.mobile-view {
+  .lux-consent-dialog-actions {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    justify-content: space-between;
+
+    lux-button {
+      display: flex;
+      flex: 1 1 auto;
+
+      button {
+        display: flex;
+        flex: 1 1 auto;
+      }
+    }
+  }
+}

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

@@ -3,8 +3,16 @@
 @use "../common/luxbreakpoints";
 @use "@angular/material" as mat;
 
-.cdk-overlay-pane.mat-mdc-dialog-panel .mat-mdc-dialog-container {
-  border-radius: var(--lux-theme-app-border-radius);
+.cdk-overlay-pane.mat-mdc-dialog-panel {
+  .mat-mdc-dialog-container {
+    border-radius: var(--lux-theme-app-border-radius);
+     width: unset;
+     height: unset;
+     min-width: 100%;
+     max-width: 100%;
+     min-height: 100%;
+     max-height: 100%;
+  }
 }
 
 .cdk-overlay-pane.mat-mdc-dialog-panel.lux-dialog {
@@ -17,10 +25,6 @@
   );
 }
 
-lux-dialog-preset {
-  height: 100%;
-}
-
 lux-dialog-action {
   flex-flow: row wrap;
   gap: 8px;
@@ -29,14 +33,14 @@ lux-dialog-action {
 }
 
 lux-dialog-structure {
-
-  @include mat.dialog-overrides((
-    supporting-text-size: 1rem
-  ));
+  @include mat.dialog-overrides(
+    (
+      supporting-text-size: 1rem
+    )
+  );
 
   display: flex;
   flex: 1 1 auto;
-  min-height: 100%;
 
   .lux-dialog {
     // Das Element kann fokussiert werden, das muss aber nicht zwingend mit der Outline gezeigt werden
@@ -61,7 +65,6 @@ lux-dialog-structure {
     .lux-dialog-content {
       margin: 0;
       padding: 0;
-      max-height: 100%;
       font-family: var(--lux-theme-app-font-family);
       letter-spacing: normal;
       color: var(--lux-theme-dark-primary-text);

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

@@ -206,7 +206,7 @@ lux-form-control-wrapper {
     // HOVER
     &:hover:not(.lux-form-control-disabled-authentic):not(.lux-focused-authentic):not(.lux-form-control-error-authentic) {
       .lux-form-control-container-authentic:not(.lux-no-input-row) {
-        border-color: var(--lux-theme-dark-primary-text);
+        border-color: var(--lux-theme-form-hover-border-color);
       }
     }
     // FOCUS

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

@@ -18,13 +18,9 @@ lux-form-control-wrapper {
 
 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;
+   lux-input-ac-prefix,
+   lux-input-ac-suffix {
+     display: flex;
+     white-space: nowrap;
   }
 }

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

@@ -141,6 +141,16 @@ lux-menu {
   .lux-menu-item-icon {
     align-self: center;
     vertical-align: middle;
+    width: var(--lux-theme-menu-item-icon-size);
+    height: var(--lux-theme-menu-item-icon-size);
+
+    .lux-icon,
+    mat-icon {
+      width: 100%;
+      height: 100%;
+      font-size: var(--lux-theme-menu-item-icon-size);
+    }
+
     mat-icon {
       margin: 0;
     }
@@ -188,7 +198,7 @@ lux-menu {
 
   .lux-button-label-subtitle {
     color: var(--lux-theme-menu-item-subtitle-font-color);
-    font-size: 0.875rem;
+    font-size: var(--lux-theme-menu-item-subtitle-font-size);
     font-style: normal;
     font-weight: 400;
     letter-spacing: 0.07px;
@@ -201,8 +211,9 @@ lux-menu {
     align-items: flex-start;
     gap: 4px;
     align-self: stretch;
-    font-weight: 600;
-    font-size: 1rem;
+    color: var(--lux-theme-menu-panel-header-font-color);
+    font-weight: var(--lux-theme-menu-panel-header-font-weight);
+    font-size: var(--lux-theme-menu-panel-header-font-size);
     font-style: normal;
     line-height: 120%;
   }
@@ -267,4 +278,16 @@ lux-menu {
   .lux-menu-item-badge-right {
     text-align: end;
   }
+
+  &.lux-menu-panel-large {
+    .lux-menu-item-icon {
+      width: var(--lux-theme-menu-item-icon-size-large);
+      height: var(--lux-theme-menu-item-icon-size-large);
+
+      .lux-icon,
+      mat-icon {
+        font-size: var(--lux-theme-menu-item-icon-size-large);
+      }
+    }
+  }
 }

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

@@ -9,6 +9,46 @@
       container-elevation-shadow: 0 0 0 1px var(--mat-card-outlined-outline-color, var(--mat-sys-outline-variant))
     )
   );
+
+  lux-select-panel-filter {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    display: block;
+    box-sizing: border-box;
+    background-color: var(--lux-theme-panel-bg-color);
+    border-bottom: 1px solid var(--mat-card-outlined-outline-color, var(--mat-sys-outline-variant));
+  }
+
+  .lux-select-panel-filter {
+    display: block;
+    box-sizing: border-box;
+    padding: 8px 8px 4px;
+    background-color: var(--lux-theme-panel-bg-color);
+  }
+
+  .lux-select-panel-filter-option {
+    position: sticky;
+    top: 0;
+    z-index: 3;
+    min-height: auto !important;
+    padding: 0 !important;
+    pointer-events: auto;
+    cursor: default;
+  }
+
+  .lux-select-panel-filter-option .mdc-list-item__primary-text {
+    width: 100%;
+  }
+
+  &.lux-select-panel-ac-filter {
+    padding-top: 0;
+    scroll-padding-top: var(--lux-select-filter-offset, 0px);
+  }
+
+  &.lux-select-panel-ac-filter .mat-mdc-option {
+    scroll-margin-top: var(--lux-select-filter-offset, 0px);
+  }
 }
 
 lux-select-ac {
@@ -39,4 +79,4 @@ lux-select-ac {
       @include luxfocus.focus-dark-mixin;
     }
   }
-}
+}

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

@@ -12,7 +12,7 @@ lux-tile {
 
   mat-card[class~="lux-cursor"] {
     &.mat-mdc-card {
-      border-radius: var(--lux-theme-tile-borderradius);
+      border-radius: var(--lux-theme-tile-border-radius);
       overflow: hidden !important;
       padding: 24px;
     }

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

@@ -62,9 +62,13 @@ lux-tile-ac {
 
   // Hover
   &:hover {
+    .lux-tile-ac {
+      background-image: var(--lux-theme-tile-ac-hover-bg-color);
+    }
+
     @include mat.card-overrides(
       (
-        elevated-container-elevation: #{"0 0 0 1px #000, #{$tileBoxShadow}"}
+        elevated-container-elevation: #{"0 0 0 1px var(--lux-theme-tile-ac-hover-border-color), #{$tileBoxShadow}"}
       )
     );
   }