@ihk-gfi/lux-components-theme 21.2.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/_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

@@ -7,7 +7,7 @@ lux-button.lux-icon-button {
       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-app-state-layer-color),
+      state-layer-color: var(--lux-theme-state-layer-color),
       touch-target-size: var(--lux-theme-button-icon-container-size)
     )
   );

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)
         )
       );
     }
@@ -65,7 +65,7 @@ lux-link.lux-rounded.lux-stroked {
     }
   }
 
-  .lux-stroked:not(:disabled):not([aria-disabled="true"]) {
+  .lux-stroked:not(:disabled) {
     border-color: var(--lux-theme-button-rounded-stroked-default-text-color);
 
     &.mat-primary {

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

@@ -6,15 +6,12 @@
 .cdk-overlay-pane.mat-mdc-dialog-panel {
   .mat-mdc-dialog-container {
     border-radius: var(--lux-theme-app-border-radius);
-    height: inherit;
-    min-height: inherit;
-    max-height: inherit;
-    min-width: 100%;
-  }
-
-  .mat-mdc-dialog-inner-container {
-    min-width: 100%;
-    min-height: 100%;
+     width: unset;
+     height: unset;
+     min-width: 100%;
+     max-width: 100%;
+     min-height: 100%;
+     max-height: 100%;
   }
 }
 
@@ -28,10 +25,6 @@
   );
 }
 
-lux-dialog-preset {
-  height: 100%;
-}
-
 lux-dialog-action {
   flex-flow: row wrap;
   gap: 8px;
@@ -48,7 +41,6 @@ lux-dialog-structure {
 
   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
@@ -73,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/_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/_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}"}
       )
     );
   }

package/src/theme-authentic/_variables.scss

@@ -25,7 +25,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
   --lux-theme-dark-primary-text: var(--mat-sys-on-surface);
   --lux-theme-dark-secondary-text: var(--mat-sys-on-surface-variant);
   --lux-theme-dark-disabled-text: var(--mat-sys-outline);
-  --lux-theme-dark-dividers: var(--mat-sys-outline-variant);
+  --lux-theme-dark-dividers: rgba(0, 51, 102, 0.1);
   --lux-theme-dark-focused: rgba(0, 0, 0, 0.12); // TODO: wofür?
 
   --lux-theme-light-primary-text: white;
@@ -34,6 +34,35 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
   --lux-theme-light-dividers: rgba(255, 255, 255, 0.2);
   --lux-theme-light-focused: rgba(255, 255, 255, 0.12);
 
+  // Base-Tokens
+  --lux-theme-breakpoint-xs: 599px;
+  --lux-theme-breakpoint-sm: 959px;
+  --lux-theme-breakpoint-md: 1279px;
+  --lux-theme-breakpoint-lg: 1919px;
+  --lux-theme-breakpoint-xl: 4999px;
+
+  --lux-theme-radius-xs: 2px;
+  --lux-theme-radius-sm: 4px;
+  --lux-theme-radius-md: 8px;
+  --lux-theme-radius-lg: 16px;
+  --lux-theme-radius-xl: 24px;
+  --lux-theme-radius-xxl: 999px;
+
+  --lux-theme-spacing-xxs: 2px;
+  --lux-theme-spacing-xs: 4px;
+  --lux-theme-spacing-sm: 8px;
+  --lux-theme-spacing-md: 16px;
+  --lux-theme-spacing-lg: 24px;
+  --lux-theme-spacing-xl: 32px;
+  --lux-theme-spacing-xxl: 48px;
+  --lux-theme-spacing-xxxl: 64px;
+
+  --lux-theme-font-size-xs: 0.75rem;
+  --lux-theme-font-size-sm: 0.875rem;
+  --lux-theme-font-size-md: 1rem;
+  --lux-theme-font-size-lg: 1.125rem;
+  --lux-theme-font-size-xl: 1.25rem;
+
   // Hauptfarben
   --lux-theme-primary-color: #{palettes.$lux-primary-color};
   --lux-theme-accent-color: #{palettes.$lux-accent-color};
@@ -106,7 +135,11 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
   --lux-theme-app-gradient-reverse: linear-gradient(270deg, #ffffff 0%, var(--mat-sys-surface-container) 100%);
   --lux-theme-app-border-color: var(--mat-sys-outline-variant);
   --lux-theme-app-border-radius: 4px;
+  --lux-theme-state-layer-color: var(--lux-theme-primary-40);
   --lux-theme-app-state-layer-color: #{map.get(palettes.$lux-palette_primary, 40)};
+  --lux-theme-hover-state-layer-opacity: 0.08;
+  --lux-theme-focus-state-layer-opacity: 0.12;
+  --lux-theme-pressed-state-layer-opacity: 0.16;
 
   // Form
   --lux-theme-form-border-width: 1px;
@@ -117,6 +150,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
   --lux-theme-form-control-label-margin: 0 0.5rem 0.25rem 0.5rem;
   --lux-theme-form-control-error-margin: 0.25rem calc(0.5rem + 1px) 0 calc(0.5rem + 3px);
   --lux-theme-form-border-color: var(--mat-sys-outline);
+  --lux-theme-form-hover-border-color: var(--lux-theme-neutral-10);
   --lux-theme-form-focus-border-color: var(--lux-theme-primary-20);
   --lux-theme-form-focus-box-shadow: 0 0 0 1px var(--lux-theme-primary-20) inset;
   --lux-theme-form-error-border-color: var(--mat-sys-error);
@@ -139,7 +173,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
   // Hover
   --lux-theme-hover-color: var(--mat-option-hover-state-layer-color);
   --lux-theme-on-hover-color: var(--mat-option-label-text-color);
-  --lux-theme-hover-color-for-dark-background: #335c85;
+  --lux-theme-hover-color-for-dark-background: var(--lux-theme-primary-40);
 
   // Selektion
   --lux-theme-selected-border-color: #{palettes.$lux-primary-color};
@@ -316,17 +350,17 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
   // LUX-Datepicker
   --lux-theme-datepicker-icon-color: #{map.get(palettes.$lux-palette_primary, 20)};
   --lux-theme-datepicker-panel-shape: var(--lux-theme-app-border-radius);
-  --lux-theme-datepicker-panel-text-color: #003366;
+  --lux-theme-datepicker-panel-text-color: var(--lux-theme-primary-20);
   --lux-theme-datepicker-panel-font-size: 1rem;
   --lux-theme-datepicker-panel-date-border-radius: 999px;
   --lux-theme-datepicker-panel-date-background-color: var(--lux-theme-panel-bg-color);
-  --lux-theme-datepicker-panel-date-selected-color: #e3ebf5;
-  --lux-theme-datepicker-panel-date-selected-background-color: #003366;
-  --lux-theme-datepicker-panel-date-hover-background-color: rgba(0, 51, 102, 0.3);
+  --lux-theme-datepicker-panel-date-selected-color: #ffffff;
+  --lux-theme-datepicker-panel-date-selected-background-color: var(--lux-theme-primary-20);
+  --lux-theme-datepicker-panel-date-hover-background-color: var(--lux-theme-panel-option-hover-state-layer-color);
 
   // LUX-Dialog
-  --lux-theme-dialog-close-button-hover-color: var(--lux-theme-dark-primary-text);
-  --lux-theme-dialog-close-button-hover-background-color: color-mix(in srgb, var(--mat-sys-secondary-container) 8%, transparent);
+  --lux-theme-dialog-close-button-hover-color: var(--lux-theme-on-hover-color);
+  --lux-theme-dialog-close-button-hover-background-color: var(--lux-theme-hover-color);
 
   // LUX-File-Upload
   --lux-theme-file-upload-padding: 16px 48px 12px 48px;
@@ -374,12 +408,18 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
   --lux-theme-link-plain-hover-background-color: var(--mat-sys-primary-container);
 
   // Lookup
-  --lux-theme-lookup-invalid-option-text-color: var(--lux-theme-warn-50);
+  --lux-theme-lookup-invalid-option-text-color: var(--mat-sys-on-error-container);
   --lux-theme-lookup-invalid-option-font-weight: 300;
 
   // LUX-Menu
   --lux-theme-menu-item-font-color: var(--lux-theme-primary-color);
   --lux-theme-menu-item-subtitle-font-color: var(--mat-sys-secondary-container);
+  --lux-theme-menu-item-subtitle-font-size: 0.875rem;
+  --lux-theme-menu-panel-header-font-color: var(--lux-theme-dark-secondary-text);
+  --lux-theme-menu-panel-header-font-weight: 600;
+  --lux-theme-menu-panel-header-font-size: 1rem;
+  --lux-theme-menu-item-icon-size: 20px;
+  --lux-theme-menu-item-icon-size-large: 40px;
   --lux-theme-menu-item-font-size: 1rem;
   --lux-theme-menu-button-item-font-size: 0.875rem;
   --lux-theme-menu-button-text-container-shape: 4px;
@@ -454,7 +494,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
 
   // LUX-Tabs
   --lux-theme-tabs-text-font: var(--lux-theme-app-font-family);
-  --lux-theme-tabs-label-text-size: 0.875rem;
+  --lux-theme-tabs-label-text-size: 1rem;
   --lux-theme-tabs-label-text-weight: 600;
   --lux-theme-tabs-border-radius: var(--lux-theme-card-shape);
 
@@ -485,13 +525,16 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
   --lux-theme-textbox-yellow-icon-color: var(--lux-theme-custom-yellow);
 
   // LUX-Tile
-  --lux-theme-tile-font-hover-color: #2e8533;
-  --lux-theme-tile-icon-color: #56bd66;
-  --lux-theme-tile-borderradius: 24px;
-  --lux-theme-tile-bottom-line-color: #56bd66;
+  --lux-theme-tile-font-hover-color: var(--mat-sys-on-tertiary-container);
+  --lux-theme-tile-icon-color: var(--mat-sys-tertiary);
+  --lux-theme-tile-border-radius: var(--lux-theme-app-border-radius);
+  --lux-theme-tile-borderradius: var(--lux-theme-tile-border-radius);
+  --lux-theme-tile-bottom-line-color: var(--mat-sys-tertiary);
 
   // LUX-Tile-Ac
   --lux-theme-tile-ac-icon-color: var(--lux-theme-primary-color);
+  --lux-theme-tile-ac-hover-bg-color: var(--lux-theme-app-gradient-reverse);
+  --lux-theme-tile-ac-hover-border-color: var(--lux-theme-form-hover-border-color);
 
   // LUX-Tourhint
   --lux-theme-tour-hint-overlay-backdrop-color: rgba(0, 0, 0, 0.12);

package/src/theme-green/_variables.scss

@@ -25,7 +25,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
   --lux-theme-dark-primary-text: #003366;
   --lux-theme-dark-secondary-text: #335c85;
   --lux-theme-dark-disabled-text: #636d76;
-  --lux-theme-dark-dividers: rgba(0, 51, 102, 0.2);
+  --lux-theme-dark-dividers: rgba(0, 51, 102, 0.1);
   --lux-theme-dark-focused: rgba(0, 0, 0, 0.12);
 
   --lux-theme-light-primary-text: white;
@@ -34,6 +34,35 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
   --lux-theme-light-dividers: #e3ebf5;
   --lux-theme-light-focused: rgba(255, 255, 255, 0.12);
 
+  // Base-Tokens
+  --lux-theme-breakpoint-xs: 599px;
+  --lux-theme-breakpoint-sm: 959px;
+  --lux-theme-breakpoint-md: 1279px;
+  --lux-theme-breakpoint-lg: 1919px;
+  --lux-theme-breakpoint-xl: 4999px;
+
+  --lux-theme-radius-xs: 2px;
+  --lux-theme-radius-sm: 4px;
+  --lux-theme-radius-md: 8px;
+  --lux-theme-radius-lg: 18px;
+  --lux-theme-radius-xl: 20px;
+  --lux-theme-radius-xxl: 999px;
+
+  --lux-theme-spacing-xxs: 2px;
+  --lux-theme-spacing-xs: 4px;
+  --lux-theme-spacing-sm: 8px;
+  --lux-theme-spacing-md: 16px;
+  --lux-theme-spacing-lg: 24px;
+  --lux-theme-spacing-xl: 32px;
+  --lux-theme-spacing-xxl: 48px;
+  --lux-theme-spacing-xxxl: 64px;
+
+  --lux-theme-font-size-xs: 0.75rem;
+  --lux-theme-font-size-sm: 0.875rem;
+  --lux-theme-font-size-md: 1rem;
+  --lux-theme-font-size-lg: 1.125rem;
+  --lux-theme-font-size-xl: 1.25rem;
+
   // Hauptfarben
   --lux-theme-primary-color: #{palettes.$lux-primary-color};
   --lux-theme-accent-color: #{palettes.$lux-accent-color};
@@ -107,7 +136,11 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
   --lux-theme-app-gradient-reverse: none;
   --lux-theme-app-border-color: var(--mat-sys-outline-variant);
   --lux-theme-app-border-radius: 14px;
+  --lux-theme-state-layer-color: #E3EBF5;
   --lux-theme-app-state-layer-color: #{map.get(palettes.$lux-palette_primary, 40)};
+  --lux-theme-hover-state-layer-opacity: 0.08;
+  --lux-theme-focus-state-layer-opacity: 0.12;
+  --lux-theme-pressed-state-layer-opacity: 0.16;
 
   // Form
   --lux-theme-form-border-width: 1px;
@@ -118,6 +151,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
   --lux-theme-form-control-label-margin: 0 0 0.25rem 0;
   --lux-theme-form-control-error-margin: 0.25rem 0 0 0;
   --lux-theme-form-border-color: rgba(0, 0, 0, 0.42);
+  --lux-theme-form-hover-border-color: var(--lux-theme-neutral-10);
   --lux-theme-form-focus-border-color: var(--lux-theme-primary-20);
   --lux-theme-form-focus-box-shadow: 0 0 0 2px var(--lux-theme-accent-secondary-color), 0 0 4px 2px var(--lux-theme-accent-secondary-color);
   --lux-theme-form-error-border-color: var(--lux-theme-warn-50);
@@ -140,7 +174,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
   // Hover
   --lux-theme-hover-color: var(--mat-option-hover-state-layer-color);
   --lux-theme-on-hover-color: var(--mat-option-label-text-color);
-  --lux-theme-hover-color-for-dark-background: #335c85;
+  --lux-theme-hover-color-for-dark-background: var(--lux-theme-primary-40);
 
   // Selektion
   --lux-theme-selected-border-color: var(--lux-theme-accent-secondary-color);
@@ -317,17 +351,17 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
   // LUX-Datepicker
   --lux-theme-datepicker-icon-color: #{map.get(palettes.$lux-palette_primary, 20)};
   --lux-theme-datepicker-panel-shape: var(--lux-theme-app-border-radius);
-  --lux-theme-datepicker-panel-text-color: #003366;
+  --lux-theme-datepicker-panel-text-color: var(--lux-theme-primary-20);
   --lux-theme-datepicker-panel-font-size: 1.125rem;
   --lux-theme-datepicker-panel-date-border-radius: 0;
   --lux-theme-datepicker-panel-date-background-color: #e3ebf5;
-  --lux-theme-datepicker-panel-date-selected-color: #e3ebf5;
-  --lux-theme-datepicker-panel-date-selected-background-color: #003366;
-  --lux-theme-datepicker-panel-date-hover-background-color: rgba(0, 51, 102, 0.3);
+  --lux-theme-datepicker-panel-date-selected-color: #ffffff;
+  --lux-theme-datepicker-panel-date-selected-background-color: var(--lux-theme-primary-20);
+  --lux-theme-datepicker-panel-date-hover-background-color: var(--lux-theme-panel-option-hover-state-layer-color);
 
   // LUX-Dialog
-  --lux-theme-dialog-close-button-hover-color: var(--lux-theme-dark-primary-text);
-  --lux-theme-dialog-close-button-hover-background-color: color-mix(in srgb, var(--mat-sys-secondary-container) 8%, transparent);
+  --lux-theme-dialog-close-button-hover-color: var(--lux-theme-on-hover-color);
+  --lux-theme-dialog-close-button-hover-background-color: var(--lux-theme-on-hover-color);
 
   // LUX-File-Upload
   --lux-theme-file-upload-padding: 24px 48px;
@@ -375,12 +409,18 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
   --lux-theme-link-plain-hover-background-color: #e4f1e4;
 
   // Lookup
-  --lux-theme-lookup-invalid-option-text-color: var(--lux-theme-warn-50);
+  --lux-theme-lookup-invalid-option-text-color: var(--mat-sys-error);
   --lux-theme-lookup-invalid-option-font-weight: 300;
 
   // LUX-Menu
   --lux-theme-menu-item-font-color: var(--lux-theme-primary-color);
   --lux-theme-menu-item-subtitle-font-color: var(--lux-theme-dark-secondary-text);
+  --lux-theme-menu-item-subtitle-font-size: 0.875rem;
+  --lux-theme-menu-panel-header-font-color: var(--lux-theme-dark-secondary-text);
+  --lux-theme-menu-panel-header-font-weight: 600;
+  --lux-theme-menu-panel-header-font-size: 1rem;
+  --lux-theme-menu-item-icon-size: 20px;
+  --lux-theme-menu-item-icon-size-large: 40px;
   --lux-theme-menu-item-font-size: 1rem;
   --lux-theme-menu-button-item-font-size: 0.875rem;
   --lux-theme-menu-button-text-container-shape: 4px;
@@ -455,7 +495,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
 
   // LUX-Tabs
   --lux-theme-tabs-text-font: var(--lux-theme-app-headline-font);
-  --lux-theme-tabs-label-text-size: 1.125rem;
+  --lux-theme-tabs-label-text-size: 1rem;
   --lux-theme-tabs-label-text-weight: 600;
   --lux-theme-tabs-border-radius: var(--lux-theme-card-shape);
 
@@ -486,13 +526,16 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
   --lux-theme-textbox-yellow-icon-color: #f4cb25;
 
   // LUX-Tile
-  --lux-theme-tile-font-hover-color: var(--lux-theme-accent-secondary-color);
-  --lux-theme-tile-icon-color: #56bd66;
-  --lux-theme-tile-borderradius: 24px;
-  --lux-theme-tile-bottom-line-color: #56bd66;
+  --lux-theme-tile-font-hover-color: var(--mat-sys-on-tertiary-container);
+  --lux-theme-tile-icon-color: var(--mat-sys-tertiary);
+  --lux-theme-tile-border-radius: var(--lux-theme-app-border-radius);
+  --lux-theme-tile-borderradius: var(--lux-theme-tile-border-radius);
+  --lux-theme-tile-bottom-line-color: var(--mat-sys-tertiary);
 
   // LUX-Tile-Ac
   --lux-theme-tile-ac-icon-color: var(--lux-theme-primary-color);
+  --lux-theme-tile-ac-hover-bg-color: var(--lux-theme-app-gradient-reverse);
+  --lux-theme-tile-ac-hover-border-color: var(--lux-theme-form-hover-border-color);
 
   // LUX-Tourhint
   --lux-theme-tour-hint-overlay-backdrop-color: rgba(0, 0, 0, 0.12);