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

package/prebuilt-themes/luxtheme-green.css

@@ -1605,13 +1605,37 @@
   --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;
   --lux-theme-light-secondary-text: rgba(255, 255, 255, 0.7);
   --lux-theme-light-disabled-text: rgba(255, 255, 255, 0.5);
   --lux-theme-light-dividers: #e3ebf5;
   --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: 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;
   --lux-theme-primary-color: #003366;
   --lux-theme-accent-color: #003911;
   --lux-theme-accent-secondary-color: #247929;
@@ -1692,7 +1716,11 @@
   --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: #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: 44px;
   --lux-theme-form-dense-min-height: 34px;
@@ -1701,6 +1729,7 @@
   --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);
@@ -1719,7 +1748,7 @@
   --lux-theme-outline-color-dark: var(--lux-theme-accent-secondary-color);
   --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: var(--lux-theme-accent-secondary-color);
   --lux-theme-selected-bg-color: #e3ebf5;
   --lux-theme-on-selected-color: var(--lux-theme-dark-primary-text);
@@ -1866,15 +1895,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: 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-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-on-hover-color);
   --lux-theme-file-upload-padding: 24px 48px;
   --lux-theme-file-upload-background-image: none;
   --lux-theme-file-upload-item-container-border: none;
@@ -1914,10 +1943,16 @@
   --lux-theme-link-plain-background-color: transparent;
   --lux-theme-link-plain-hover-color: var(--lux-theme-accent-secondary-color);
   --lux-theme-link-plain-hover-background-color: #e4f1e4;
-  --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-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;
@@ -1980,7 +2015,7 @@
   --lux-theme-side-nav-button-color: var(--lux-theme-dark-primary-text);
   --lux-theme-tabble-alternate-row-bg-color: #e3ebf5;
   --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);
   --lux-theme-textbox-default-color: #ffffff;
@@ -2003,11 +2038,14 @@
   --lux-theme-textbox-yellow-on-color: var(--lux-theme-dark-primary-text);
   --lux-theme-textbox-yellow-border-color: #f4cb25;
   --lux-theme-textbox-yellow-icon-color: #f4cb25;
-  --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-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;
@@ -3275,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);
@@ -36739,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;
@@ -37101,8 +37181,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 {
@@ -37152,29 +37232,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),
@@ -37246,19 +37326,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 {
@@ -37278,20 +37358,20 @@ 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):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: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);
 }
 
@@ -37300,7 +37380,7 @@ lux-button.lux-icon-button {
   --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-app-state-layer-color);
+  --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,
@@ -37828,14 +37908,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);
-  height: inherit;
-  min-height: inherit;
-  max-height: inherit;
-  min-width: 100%;
-}
-.cdk-overlay-pane.mat-mdc-dialog-panel .mat-mdc-dialog-inner-container {
+  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 {
@@ -37844,10 +37922,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;
@@ -37859,7 +37933,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;
@@ -37879,7 +37952,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);
@@ -38579,7 +38651,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);
@@ -39224,6 +39296,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;
@@ -39264,7 +39344,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;
@@ -39276,8 +39356,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%;
 }
@@ -39337,6 +39418,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;
@@ -40797,7 +40886,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;
 }
@@ -40977,7 +41066,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 {