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

package/prebuilt-themes/luxtheme-authentic.css

@@ -1605,13 +1605,37 @@
   --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);
   --lux-theme-light-primary-text: white;
   --lux-theme-light-secondary-text: rgba(255, 255, 255, 0.74);
   --lux-theme-light-disabled-text: rgba(255, 255, 255, 0.38);
   --lux-theme-light-dividers: rgba(255, 255, 255, 0.2);
   --lux-theme-light-focused: rgba(255, 255, 255, 0.12);
+  --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;
   --lux-theme-primary-color: #003366;
   --lux-theme-accent-color: ;
   --lux-theme-warn-color: #ba1a1a;
@@ -1691,6 +1715,11 @@
   --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: #3a5f94;
+  --lux-theme-hover-state-layer-opacity: 0.08;
+  --lux-theme-focus-state-layer-opacity: 0.12;
+  --lux-theme-pressed-state-layer-opacity: 0.16;
   --lux-theme-form-border-width: 1px;
   --lux-theme-form-min-height: 50px;
   --lux-theme-form-dense-min-height: 38px;
@@ -1699,6 +1728,7 @@
   --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);
@@ -1717,7 +1747,7 @@
   --lux-theme-outline-color-dark: var(--lux-theme-custom-lightblue);
   --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);
   --lux-theme-selected-border-color: #003366;
   --lux-theme-selected-bg-color: var(--mat-option-selected-state-layer-color);
   --lux-theme-on-selected-color: var(--mat-option-selected-state-label-text-color);
@@ -1770,6 +1800,13 @@
   --lux-theme-button-text-primary-text-color: var(--lux-theme-primary-color);
   --lux-theme-button-text-accent-text-color: var(--mat-sys-on-tertiary-container);
   --lux-theme-button-text-warn-text-color: var(--mat-sys-error);
+  --lux-theme-button-icon-default-text-color: var(--lux-theme-dark-primary-text);
+  --lux-theme-button-icon-primary-text-color: var(--lux-theme-primary-color);
+  --lux-theme-button-icon-accent-text-color: var(--mat-sys-on-tertiary-container);
+  --lux-theme-button-icon-warn-text-color: var(--mat-sys-error);
+  --lux-theme-button-icon-size: 18px;
+  --lux-theme-button-icon-container-size: 36px;
+  --lux-theme-button-icon-container-shape: 50%;
   --lux-theme-button-flat-default-text-color: var(--lux-theme-dark-primary-text);
   --lux-theme-button-flat-default-container-color: #ffffff;
   --lux-theme-button-flat-primary-text-color: var(--mat-sys-on-primary);
@@ -1832,6 +1869,19 @@
   --lux-theme-button-flat-text-tracking: 0.078125rem;
   --lux-theme-button-raised-text-tracking: 0.078125rem;
   --lux-theme-button-stroked-text-tracking: 0.078125rem;
+  --lux-theme-button-toggle-height: 2.25rem;
+  --lux-theme-button-toggle-height-dense: 1.5rem;
+  --lux-theme-button-toggle-shape: var(--lux-theme-app-border-radius);
+  --lux-theme-button-toggle-text-color: var(--lux-theme-primary-color);
+  --lux-theme-button-toggle-divider-color: var(--lux-theme-primary-color);
+  --lux-theme-button-toggle-disabled-divider-color: var(--lux-theme-app-border-color);
+  --lux-theme-button-toggle-selected-state-text-color: var(--lux-theme-primary-color);
+  --lux-theme-button-toggle-selected-state-background-color: var(--mat-sys-surface-container-high);
+  --lux-theme-button-toggle-hover-state-layer-opacity: 0.08;
+  --lux-theme-button-toggle-disabled-selected-state-text-color: var(--lux-theme-dark-disabled-text);
+  --lux-theme-button-toggle-disabled-selected-state-background-color: var(--lux-theme-app-border-color);
+  --lux-theme-button-toggle-disabled-state-text-color: var(--lux-theme-dark-disabled-text);
+  --lux-theme-button-toggle-disabled-state-background-color: transparent;
   --lux-theme-card-title-line-height: 2rem;
   --lux-theme-card-title-text-size: 1.5rem;
   --lux-theme-card-title-text-weight: 500;
@@ -1844,15 +1894,15 @@
   --lux-theme-card-padding: 20px;
   --lux-theme-datepicker-icon-color: #003366;
   --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-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-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-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-theme-file-upload-padding: 16px 48px 12px 48px;
   --lux-theme-file-upload-background-image: var(--lux-theme-app-gradient);
   --lux-theme-file-upload-item-container-border: 1px solid var(--lux-theme-app-border-color);
@@ -1892,10 +1942,16 @@
   --lux-theme-link-plain-background-color: transparent;
   --lux-theme-link-plain-hover-color: var(--mat-sys-on-primary-container);
   --lux-theme-link-plain-hover-background-color: var(--mat-sys-primary-container);
-  --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-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;
@@ -1958,7 +2014,7 @@
   --lux-theme-side-nav-button-color: var(--lux-theme-dark-primary-text);
   --lux-theme-tabble-alternate-row-bg-color: var(--mat-sys-surface-container-high);
   --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);
   --lux-theme-textbox-default-color: #ffffff;
@@ -1981,11 +2037,14 @@
   --lux-theme-textbox-yellow-on-color: var(--lux-theme-custom-on-yellow);
   --lux-theme-textbox-yellow-border-color: var(--lux-theme-custom-yellow);
   --lux-theme-textbox-yellow-icon-color: var(--lux-theme-custom-yellow);
-  --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-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-theme-tour-hint-overlay-backdrop-color: rgba(0, 0, 0, 0.12);
   --lux-theme-panel-option-min-height: 24px;
   --lux-theme-panel-option-padding: 12px 0;
@@ -3254,6 +3313,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);
@@ -36718,7 +36819,7 @@ lux-app-header-ac .lux-image:focus-visible {
 lux-app-header-ac lux-button.lux-rounded:not(.lux-stroked):not([disabled]) .mat-primary {
   --mat-fab-foreground-color: var(--mat-sys-primary);
   --mat-fab-container-color: var(--mat-sys-on-primary);
-  --mat-fab-hover-state-layer-opacity: 0.1;
+  --mat-fab-hover-state-layer-opacity: var(--lux-theme-hover-state-layer-opacity);
 }
 lux-app-header-ac lux-button button.lux-button.mat-mdc-fab.mat-primary:not(.lux-stroked):not([disabled]) {
   min-width: 2.25rem;
@@ -37155,8 +37256,8 @@ lux-link.lux-raised {
   --mat-button-protected-container-height: var(--lux-theme-button-raised-container-height);
   --mat-button-protected-label-text-color: var(--lux-theme-button-raised-default-text-color);
   --mat-button-protected-container-color: var(--lux-theme-button-raised-default-container-color);
-  --mat-button-protected-focus-state-layer-opacity: 0.1;
-  --mat-button-protected-hover-state-layer-opacity: 0.1;
+  --mat-button-protected-focus-state-layer-opacity: var(--lux-theme-focus-state-layer-opacity);
+  --mat-button-protected-hover-state-layer-opacity: var(--lux-theme-hover-state-layer-opacity);
 }
 lux-button.lux-raised .mat-primary,
 lux-link.lux-raised .mat-primary {
@@ -37206,29 +37307,29 @@ lux-link.lux-flat {
   --mat-button-filled-container-height: var(--lux-theme-button-flat-container-height);
   --mat-button-filled-label-text-color: var(--lux-theme-button-flat-default-text-color);
   --mat-button-filled-container-color: var(--lux-theme-button-flat-default-container-color);
-  --mat-button-filled-focus-state-layer-opacity: 0.1;
-  --mat-button-filled-hover-state-layer-opacity: 0.1;
+  --mat-button-filled-focus-state-layer-opacity: var(--lux-theme-focus-state-layer-opacity);
+  --mat-button-filled-hover-state-layer-opacity: var(--lux-theme-hover-state-layer-opacity);
 }
 lux-button.lux-flat .mat-primary,
 lux-link.lux-flat .mat-primary {
   --mat-button-filled-label-text-color: var(--lux-theme-button-flat-primary-text-color);
   --mat-button-filled-container-color: var(--lux-theme-button-flat-primary-container-color);
-  --mat-button-filled-focus-state-layer-opacity: 0.1;
-  --mat-button-filled-hover-state-layer-opacity: 0.1;
+  --mat-button-filled-focus-state-layer-opacity: var(--lux-theme-focus-state-layer-opacity);
+  --mat-button-filled-hover-state-layer-opacity: var(--lux-theme-hover-state-layer-opacity);
 }
 lux-button.lux-flat .mat-accent,
 lux-link.lux-flat .mat-accent {
   --mat-button-filled-label-text-color: var(--lux-theme-button-flat-accent-text-color);
   --mat-button-filled-container-color: var(--lux-theme-button-flat-accent-container-color);
-  --mat-button-filled-focus-state-layer-opacity: 0.1;
-  --mat-button-filled-hover-state-layer-opacity: 0.1;
+  --mat-button-filled-focus-state-layer-opacity: var(--lux-theme-focus-state-layer-opacity);
+  --mat-button-filled-hover-state-layer-opacity: var(--lux-theme-hover-state-layer-opacity);
 }
 lux-button.lux-flat .mat-warn,
 lux-link.lux-flat .mat-warn {
   --mat-button-filled-label-text-color: var(--lux-theme-button-flat-warn-text-color);
   --mat-button-filled-container-color: var(--lux-theme-button-flat-warn-container-color);
-  --mat-button-filled-focus-state-layer-opacity: 0.1;
-  --mat-button-filled-hover-state-layer-opacity: 0.1;
+  --mat-button-filled-focus-state-layer-opacity: var(--lux-theme-focus-state-layer-opacity);
+  --mat-button-filled-hover-state-layer-opacity: var(--lux-theme-hover-state-layer-opacity);
 }
 
 lux-button.lux-rounded:not(.lux-stroked),
@@ -37300,19 +37401,19 @@ lux-button.lux-rounded.lux-stroked .lux-stroked.mat-primary,
 lux-link.lux-rounded.lux-stroked .lux-stroked.mat-primary {
   --mat-fab-foreground-color: var(--lux-theme-button-rounded-stroked-primary-text-color);
   --mat-fab-container-color: transparent;
-  --mat-fab-hover-state-layer-opacity: 0.1;
+  --mat-fab-hover-state-layer-opacity: var(--lux-theme-hover-state-layer-opacity);
 }
 lux-button.lux-rounded.lux-stroked .lux-stroked.mat-accent,
 lux-link.lux-rounded.lux-stroked .lux-stroked.mat-accent {
   --mat-fab-foreground-color: var(--lux-theme-button-rounded-stroked-accent-text-color);
   --mat-fab-container-color: transparent;
-  --mat-fab-hover-state-layer-opacity: 0.1;
+  --mat-fab-hover-state-layer-opacity: var(--lux-theme-hover-state-layer-opacity);
 }
 lux-button.lux-rounded.lux-stroked .lux-stroked.mat-warn,
 lux-link.lux-rounded.lux-stroked .lux-stroked.mat-warn {
   --mat-fab-foreground-color: var(--lux-theme-button-rounded-stroked-warn-text-color);
   --mat-fab-container-color: transparent;
-  --mat-fab-hover-state-layer-opacity: 0.1;
+  --mat-fab-hover-state-layer-opacity: var(--lux-theme-hover-state-layer-opacity);
 }
 lux-button.lux-rounded.lux-stroked .mat-mdc-fab-base,
 lux-link.lux-rounded.lux-stroked .mat-mdc-fab-base {
@@ -37324,24 +37425,54 @@ lux-link.lux-rounded.lux-stroked .lux-icon {
   width: var(--lux-theme-button-rounded-stroked-text-size);
   height: var(--lux-theme-button-rounded-stroked-text-size);
 }
-lux-button.lux-rounded.lux-stroked .lux-stroked:not(:disabled):not([aria-disabled=true]),
-lux-link.lux-rounded.lux-stroked .lux-stroked:not(:disabled):not([aria-disabled=true]) {
+lux-button.lux-rounded.lux-stroked .lux-stroked,
+lux-link.lux-rounded.lux-stroked .lux-stroked {
   border: 1px solid;
+}
+lux-button.lux-rounded.lux-stroked .lux-stroked:disabled,
+lux-link.lux-rounded.lux-stroked .lux-stroked:disabled {
+  border-color: transparent;
+}
+lux-button.lux-rounded.lux-stroked .lux-stroked:not(:disabled),
+lux-link.lux-rounded.lux-stroked .lux-stroked:not(:disabled) {
   border-color: var(--lux-theme-button-rounded-stroked-default-text-color);
 }
-lux-button.lux-rounded.lux-stroked .lux-stroked:not(:disabled):not([aria-disabled=true]).mat-primary,
-lux-link.lux-rounded.lux-stroked .lux-stroked:not(:disabled):not([aria-disabled=true]).mat-primary {
+lux-button.lux-rounded.lux-stroked .lux-stroked:not(:disabled).mat-primary,
+lux-link.lux-rounded.lux-stroked .lux-stroked:not(:disabled).mat-primary {
   border-color: var(--lux-theme-button-rounded-stroked-primary-text-color);
 }
-lux-button.lux-rounded.lux-stroked .lux-stroked:not(:disabled):not([aria-disabled=true]).mat-accent,
-lux-link.lux-rounded.lux-stroked .lux-stroked:not(:disabled):not([aria-disabled=true]).mat-accent {
+lux-button.lux-rounded.lux-stroked .lux-stroked:not(:disabled).mat-accent,
+lux-link.lux-rounded.lux-stroked .lux-stroked:not(:disabled).mat-accent {
   border-color: var(--lux-theme-button-rounded-stroked-accent-text-color);
 }
-lux-button.lux-rounded.lux-stroked .lux-stroked:not(:disabled):not([aria-disabled=true]).mat-warn,
-lux-link.lux-rounded.lux-stroked .lux-stroked:not(:disabled):not([aria-disabled=true]).mat-warn {
+lux-button.lux-rounded.lux-stroked .lux-stroked:not(:disabled).mat-warn,
+lux-link.lux-rounded.lux-stroked .lux-stroked:not(:disabled).mat-warn {
   border-color: var(--lux-theme-button-rounded-stroked-warn-text-color);
 }
 
+lux-button.lux-icon-button {
+  --mat-icon-button-container-shape: var(--lux-theme-button-icon-container-shape);
+  --mat-icon-button-icon-color: var(--lux-theme-button-icon-default-text-color);
+  --mat-icon-button-icon-size: var(--lux-theme-button-icon-size);
+  --mat-icon-button-state-layer-size: var(--lux-theme-button-icon-container-size);
+  --mat-icon-button-state-layer-color: var(--lux-theme-state-layer-color);
+  --mat-icon-button-touch-target-size: var(--lux-theme-button-icon-container-size);
+}
+lux-button.lux-icon-button lux-icon,
+lux-button.lux-icon-button .lux-icon {
+  width: var(--lux-theme-button-icon-size);
+  height: var(--lux-theme-button-icon-size);
+}
+lux-button.lux-icon-button .mat-primary {
+  --mat-icon-button-icon-color: var(--lux-theme-button-icon-primary-text-color);
+}
+lux-button.lux-icon-button .mat-accent {
+  --mat-icon-button-icon-color: var(--lux-theme-button-icon-accent-text-color);
+}
+lux-button.lux-icon-button .mat-warn {
+  --mat-icon-button-icon-color: var(--lux-theme-button-icon-warn-text-color);
+}
+
 lux-button.lux-raised mat-progress-spinner, lux-button.lux-flat mat-progress-spinner, lux-button.lux-rounded:not(.lux-stroked) mat-progress-spinner,
 lux-link.lux-raised mat-progress-spinner,
 lux-link.lux-flat mat-progress-spinner,
@@ -37382,10 +37513,10 @@ lux-button .mat-warn mat-progress-spinner,
 lux-link .mat-warn mat-progress-spinner {
   --mat-progress-spinner-active-indicator-color: var(--lux-theme-button-text-warn-text-color);
 }
-lux-button .lux-button-spinner mat-progress-spinner,
-lux-link .lux-button-spinner mat-progress-spinner {
-  width: 0.875rem !important;
-  height: 0.875rem !important;
+lux-button .lux-button-spinner .lux-progress-small mat-progress-spinner,
+lux-link .lux-button-spinner .lux-progress-small mat-progress-spinner {
+  width: 1.125rem !important;
+  height: 1.125rem !important;
 }
 lux-button .lux-button-spinner .spinner-padding,
 lux-link .lux-button-spinner .spinner-padding {
@@ -37475,6 +37606,49 @@ lux-link a:not([disabled]):focus-visible {
   outline-offset: 1px;
 }
 
+lux-button-toggle {
+  --mat-button-toggle-shape: var(--lux-theme-button-toggle-shape);
+  --mat-button-toggle-text-color: var(--lux-theme-button-toggle-text-color);
+  --mat-button-toggle-selected-state-text-color: var(--lux-theme-button-toggle-selected-state-text-color);
+  --mat-button-toggle-selected-state-background-color: var(--lux-theme-button-toggle-selected-state-background-color);
+  --mat-button-toggle-hover-state-layer-opacity: var(--lux-theme-button-toggle-hover-state-layer-opacity);
+  --mat-button-toggle-disabled-selected-state-text-color: var(--lux-theme-button-toggle-disabled-selected-state-text-color);
+  --mat-button-toggle-disabled-selected-state-background-color: var(--lux-theme-button-toggle-disabled-selected-state-background-color);
+  --mat-button-toggle-disabled-state-text-color: var(--lux-theme-button-toggle-disabled-state-text-color);
+  --mat-button-toggle-disabled-state-background-color: var(--lux-theme-button-toggle-disabled-state-background-color);
+  --mat-button-toggle-height: var(--lux-theme-button-toggle-height);
+  --mat-button-toggle-divider-color: var(--lux-theme-button-toggle-divider-color);
+}
+lux-button-toggle mat-button-toggle-group[aria-disabled=true] {
+  --mat-button-toggle-divider-color: var(--lux-theme-button-toggle-disabled-divider-color);
+}
+lux-button-toggle.lux-dense {
+  --mat-button-toggle-height: var(--lux-theme-button-toggle-height-dense);
+}
+lux-button-toggle .lux-button-toggle-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+lux-button-toggle .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 .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);
+}
+
 lux-card {
   --mat-card-outlined-container-color: var(--lux-theme-card-background-color);
   --mat-card-outlined-container-shape: var(--lux-theme-card-shape);
@@ -37690,6 +37864,56 @@ lux-chips-ac mat-chip-row.cdk-focused:not(.cdk-mouse-focused):not(.cdk-program-f
   border-radius: 4px;
 }
 
+lux-consent-dialog lux-toggle-ac lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-misc-authentic {
+  font-size: 0.875rem;
+}
+lux-consent-dialog .lux-consent-description {
+  margin-top: 0;
+  padding-top: 0;
+}
+lux-consent-dialog .lux-consent-card {
+  padding: 4px;
+}
+lux-consent-dialog .essential-always-active {
+  font-weight: 700;
+}
+lux-consent-dialog .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 .lux-consent-dialog-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+lux-consent-dialog .storage-type-title {
+  padding-left: 26px;
+}
+lux-consent-dialog .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-consent-dialog.mobile-view .lux-consent-dialog-actions lux-button {
+  display: flex;
+  flex: 1 1 auto;
+}
+lux-consent-dialog.mobile-view .lux-consent-dialog-actions lux-button button {
+  display: flex;
+  flex: 1 1 auto;
+}
+
 :root {
   --mat-option-label-text-size: var(--lux-theme-panel-option-label-text-size);
   --mat-option-label-text-color: var(--lux-theme-panel-option-label-text-color);
@@ -37759,6 +37983,12 @@ lux-datetimepicker-ac button:not(:disabled) .lux-datetimepicker-toggle-icon {
 
 .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 {
@@ -37767,10 +37997,6 @@ lux-datetimepicker-ac button:not(:disabled) .lux-datetimepicker-toggle-icon {
   --mat-dialog-container-min-width: 0;
 }
 
-lux-dialog-preset {
-  height: 100%;
-}
-
 lux-dialog-action {
   flex-flow: row wrap;
   gap: 8px;
@@ -37782,7 +38008,6 @@ lux-dialog-structure {
   --mat-dialog-supporting-text-size: 1rem;
   display: flex;
   flex: 1 1 auto;
-  min-height: 100%;
 }
 lux-dialog-structure .lux-dialog {
   outline-width: 0;
@@ -37802,7 +38027,6 @@ lux-dialog-structure .lux-dialog .mat-mdc-dialog-container {
 lux-dialog-structure .lux-dialog .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);
@@ -38502,7 +38726,7 @@ lux-form-control-wrapper .lux-form-control-wrapper .lux-no-input-row {
   padding: 0;
 }
 lux-form-control-wrapper .lux-form-control-wrapper: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);
 }
 lux-form-control-wrapper .lux-form-control-wrapper.lux-focused-authentic .lux-form-control-label-authentic > * {
   color: var(--lux-theme-primary-30);
@@ -38662,14 +38886,10 @@ lux-form-control-wrapper input {
   font-size: var(--lux-theme-form-control-font-size);
 }
 
-lux-input-ac .lux-input-prefix-container,
-lux-input-ac .lux-input-suffix-container {
-  width: auto;
+lux-input-ac lux-input-ac-prefix,
+lux-input-ac lux-input-ac-suffix {
+  display: flex;
   white-space: nowrap;
-  display: inline-block;
-  flex: 1 1 auto;
-  max-height: 1.5em;
-  align-items: center;
 }
 
 lux-link-plain {
@@ -39151,6 +39371,14 @@ lux-menu .lux-menu-trigger > lux-button button {
 .lux-menu-panel .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-menu-panel .lux-menu-item-icon .lux-icon,
+.lux-menu-panel .lux-menu-item-icon mat-icon {
+  width: 100%;
+  height: 100%;
+  font-size: var(--lux-theme-menu-item-icon-size);
 }
 .lux-menu-panel .lux-menu-item-icon mat-icon {
   margin: 0;
@@ -39191,7 +39419,7 @@ lux-menu .lux-menu-trigger > lux-button button {
 }
 .lux-menu-section-panel .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;
@@ -39203,8 +39431,9 @@ lux-menu .lux-menu-trigger > lux-button button {
   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%;
 }
@@ -39264,6 +39493,14 @@ lux-menu .lux-menu-trigger > lux-button button {
 .lux-menu-section-panel .lux-menu-item-badge-right {
   text-align: end;
 }
+.lux-menu-section-panel.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-menu-section-panel.lux-menu-panel-large .lux-menu-item-icon .lux-icon,
+.lux-menu-section-panel.lux-menu-panel-large .lux-menu-item-icon mat-icon {
+  font-size: var(--lux-theme-menu-item-icon-size-large);
+}
 
 lux-message-box {
   display: block;
@@ -39515,6 +39752,46 @@ lux-radio-ac.lux-form-control-readonly {
   --mat-select-panel-background-color: var(--lux-theme-panel-bg-color);
   --mat-select-container-elevation-shadow: 0 0 0 1px var(--mat-card-outlined-outline-color, var(--mat-sys-outline-variant));
 }
+.lux-select-panel-ac lux-select-panel-filter,
+.lux-select-panel-ac-multiple 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-ac .lux-select-panel-filter,
+.lux-select-panel-ac-multiple .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-ac .lux-select-panel-filter-option,
+.lux-select-panel-ac-multiple .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-ac .lux-select-panel-filter-option .mdc-list-item__primary-text,
+.lux-select-panel-ac-multiple .lux-select-panel-filter-option .mdc-list-item__primary-text {
+  width: 100%;
+}
+.lux-select-panel-ac.lux-select-panel-ac-filter,
+.lux-select-panel-ac-multiple.lux-select-panel-ac-filter {
+  padding-top: 0;
+  scroll-padding-top: var(--lux-select-filter-offset, 0px);
+}
+.lux-select-panel-ac.lux-select-panel-ac-filter .mat-mdc-option,
+.lux-select-panel-ac-multiple.lux-select-panel-ac-filter .mat-mdc-option {
+  scroll-margin-top: var(--lux-select-filter-offset, 0px);
+}
 
 lux-select-ac {
   --mat-select-enabled-arrow-color: var(--lux-theme-primary-color);
@@ -40684,7 +40961,7 @@ lux-tile .lux-notification-new {
   background-color: var(--lux-theme-accent-70);
 }
 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;
 }
@@ -40864,7 +41141,10 @@ lux-tile-ac .lux-tile-ac:focus-visible {
   --mat-card-elevated-container-elevation: 0 0 0 var(--lux-theme-outline-width) var(--lux-theme-outline-color-dark), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 }
 lux-tile-ac:hover {
-  --mat-card-elevated-container-elevation: 0 0 0 1px #000, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  --mat-card-elevated-container-elevation: 0 0 0 1px var(--lux-theme-tile-ac-hover-border-color), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+lux-tile-ac:hover .lux-tile-ac {
+  background-image: var(--lux-theme-tile-ac-hover-bg-color);
 }
 
 lux-toggle-ac {