@ihk-gfi/lux-components-theme 16.3.0 → 18.1.0

package/src/base/components/_luxTile.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../luxpalette";
+@use "../luxcommon";
 @use "../luxelevations";
 @use "../luxfocus";
 @use "@angular/material" as mat;
@@ -15,23 +16,49 @@ lux-tile {
     background-color: map.get(luxpalette.$lux-palette_accent, 500);
   }
 
-  .lux-highlight {
-    color: map.get(luxpalette.$lux-palette_primary, 500);
-  }
+  mat-card[class~="lux-cursor"] {
+    &.mat-mdc-card {
+      border-radius: luxcommon.$lux-tile-borderradius;
+      overflow: hidden !important;
+      padding: 24px;
+    }
+
+    .mat-mdc-card-content {
+      padding-top: 0px !important;
+    }
+
+    &.mat-mdc-card.lux-tile-mobile {
+      padding: 14px;
+    }
+
+    &.mat-mdc-card::before {
+      content: "";
+      position: absolute;
+      display: block;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 8px;
+      background-color: luxcommon.$lux-tile-bottom-line-color;
+      transition: 0.2s ease;
+    }
 
-  mat-card.mat-card {
-    padding: 0;
-    .mat-card-content {
-      margin: 0px;
+    &.lux-badge-notification.mat-badge-after.mat-badge-above.mat-badge-medium.mat-badge-overlap {
+      .mat-badge-content {
+        right: 2px;
+        top: 5px;
+        padding-top: 0px;
+        line-height: 20px;
+      }
     }
   }
 
-  .mat-card:not([class*="mat-elevation-z"]) {
-    @include luxelevations.lux-elevation-z2;
+  .mat-mdc-card:not([class*="mat-elevation-z"]) {
+    @include luxelevations.lux-elevation-z0;
   }
 
-  lux-divider {
-    margin-bottom: 0 !important;
+  .lux-tile-shadow:not([class*="mat-elevation-z"]) {
+    @include luxelevations.lux-elevation-z2;
   }
 
   h2 {
@@ -39,44 +66,63 @@ lux-tile {
     color: map.get(luxpalette.$lux-palette_primary, 500);
   }
 
-  .lux-tile-small-font {
-    flex: 0 0 140px;
-    max-width: 140px !important;
-    min-width: 140px !important;
+  .lux-tile-mobile-view {
+    flex: 0 0 180px;
+    max-width: 180px !important;
+    min-width: 180px !important;
+    min-height: 134px !important;
 
     h2 > * {
-      font-size: 0.75em;
+      font-size: 1.25rem;
+      word-wrap: break-word;
+      max-width: 100%;
+      margin: 4px 0px;
+      font-family: luxcommon.$app-headline-font;
     }
   }
 
-  .lux-tile-normal-font {
-    flex: 0 0 240px;
-    max-width: 240px !important;
-    min-width: 240px !important;
+  .lux-tile-desktop-view {
+    flex: 0 0 260px;
+    max-width: 260px !important;
+    min-width: 260px !important;
+    min-height: 175px !important;
 
     h2 > * {
-      font-size: 1em;
+      font-size: 1.5rem;
+      word-wrap: break-word;
+      max-width: 100%;
+      margin: 12px 0px;
+      font-family: luxcommon.$app-headline-font;
     }
   }
 
-  .lux-tile-content,
-  .lux-tile-content lux-image {
-    height: 100px;
-  }
-
   .lux-tile-content-container {
     height: 100%;
     min-height: 100%;
     min-width: 100%;
     width: 100%;
   }
-  .lux-tile-content {
-    flex: 1 1 100px;
+
+  .lux-tile-icon {
+    color: luxcommon.$lux-tile-icon-color;
+    margin-top: 6px;
     lux-icon {
       mat-icon {
-        font-size: 4em;
+        width: 72px !important;
+        height: 72px !important;
+        padding: 0px;
       }
     }
+    lux-image {
+      height: 100px;
+    }
+  }
+
+  .lux-tile-mobile {
+    lux-icon mat-icon {
+      width: 50px !important;
+      height: 50px !important;
+    }
   }
 
   .lux-tile-notification-icon {
@@ -115,9 +161,10 @@ lux-tile {
     display: flex;
     flex-shrink: 1;
     flex-grow: 0;
-    min-height: 70px;
+    min-height: 40px;
     max-height: 70px;
     text-align: center;
+    text-decoration-line: underline;
   }
 
   .lux-notification-read {
@@ -132,22 +179,21 @@ lux-tile {
   /** ########## Focus / Hover ########## **/
 
   mat-card[class~="lux-cursor"] {
-    &:focus-visible {
-      @include luxfocus.focus-dark-mixin;
+    &.mat-mdc-card:focus-visible {
+      @include luxfocus.lux-focus-mixin-green;
     }
 
     &:hover {
       background-image: none !important;
       background-color: white !important;
-      // farbiger Schatten beim Hover
-      @include mat.elevation(2, $dark-green, 1);
 
       h2 {
-        color: luxpalette.$lux-accent-color;
+        color: luxcommon.$lux-tile-font-hover-color;
       }
     }
-    &.lux-highlight:hover {
-      color: luxpalette.$lux-accent-color;
+
+    &.mat-mdc-card:hover::before {
+      height: 14px;
     }
   }
 }

package/src/base/components/_luxTileAc.scss

@@ -9,7 +9,15 @@ lux-tile-ac {
   box-sizing: border-box;
   display: inline-block;
 
-  .mat-card.lux-tile-ac {
+  mat-card {
+    padding: 16px;
+
+    &.mdc-card {
+      flex-direction: unset;
+    }
+  }
+
+  .mat-mdc-card.lux-tile-ac {
     box-sizing: border-box;
     display: flex;
     height: 100%;
@@ -37,10 +45,11 @@ lux-tile-ac {
       mat-card-title.lux-tile-title {
         color: luxcommon.$dark-primary-text;
         font-family: luxcommon.$app-headline-font, luxcommon.$app-font-family;
+        line-height: 30px;
         font-size: 1.25rem;
         margin: 0;
       }
-      mat-card-subtitle.mat-card-subtitle:not(:first-child) {
+      mat-card-subtitle.mat-mdc-card-subtitle:not(:first-child) {
         color: luxcommon.$dark-secondary-text;
         font-size: 0.875rem;
         font-weight: normal;

package/src/base/components/_luxToolTip.scss

@@ -0,0 +1,9 @@
+@use "../luxcommon";
+
+.mat-mdc-tooltip {
+  --mdc-plain-tooltip-container-shape: #{luxcommon.$app-border-radius};
+}
+
+.mat-mdc-tooltip-surface {
+  --mdc-plain-tooltip-supporting-text-size: 14px;
+}

package/src/base/components/_luxTourHint.scss

@@ -1,4 +1,5 @@
 @use "../luxcommon";
+@use "../luxfocus";
 
 $arrowSize: 16px;
 
@@ -19,7 +20,10 @@ lux-tour-hint {
 
     display: flex;
 
-    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    box-shadow:
+      0px 11px 15px -7px rgba(0, 0, 0, 0.2),
+      0px 24px 38px 3px rgba(0, 0, 0, 0.14),
+      0px 9px 46px 8px rgba(0, 0, 0, 0.12);
     background: #fff;
 
     &:focus {
@@ -136,8 +140,19 @@ lux-tour-hint-preset {
       right: 8px;
 
       &:hover {
+        background-color: #fff !important;
+
+        mat-icon.mat-icon-no-color {
+          color: luxcommon.$lux-hover-color;
+        }
+
         cursor: pointer;
       }
+
+      &:focus-visible {
+        @include luxfocus.focus-dark-mixin;
+        border-radius: 4px;
+      }
     }
 
     .tour-hint-inner-container {

package/src/green/_custom.scss

@@ -37,11 +37,23 @@ h6 {
   font-family: luxcommon.$app-headline-font;
 }
 
+/*
+ * Theming for LUX-Slider
+ */
+lux-slider-ac {
+  lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic {
+    &.lux-no-input-row {
+      padding-top: 12px;
+      padding-bottom: 4px;
+    }
+  }
+}
+
 /*
  * Theming for LUX-Card
  */
 lux-card {
-  .mat-card {
+  .mat-mdc-card {
     color: luxpalette.$lux-primary-color;
   }
 }
@@ -113,26 +125,30 @@ lux-button button.lux-button {
   font-weight: 400 !important;
   font-family: luxcommon.$app-button-font-family;
 
+  &.mdc-button {
+    letter-spacing: normal;
+  }
+
   p,
   div,
   span {
     font-family: luxcommon.$app-button-font-family;
   }
 
-  &.mat-button,
-  &.mat-raised-button,
-  &.mat-flat-button,
-  &.mat-stroked-button {
+  &.mat-mdc-button,
+  &.mat-mdc-raised-button,
+  &.mat-mdc-unelevated-button,
+  &.mat-mdc-outlined-button {
     border-radius: 18px;
     height: luxcommon.$button-height;
     font-size: $button-font-size;
   }
 
-  &.mat-button.mat-button-disabled,
-  &.mat-raised-button.mat-button-disabled,
-  &.mat-fab.mat-button-disabled,
-  &.mat-stroked-button.mat-button-disabled,
-  &.mat-flat-button.mat-button-disabled {
+  &.mat-mdc-button:disabled,
+  &.mat-mdc-raised-button:disabled,
+  &.mat-mdc-fab:disabled,
+  &.mat-mdc-outlined-button:disabled,
+  &.mat-mdc-unelevated-button:disabled {
     color: luxcommon.$dark-disabled-text;
     &.lux-stroked {
       color: luxcommon.$dark-disabled-text;
@@ -140,18 +156,18 @@ lux-button button.lux-button {
     }
   }
 
-  &.mat-flat-button:not(.mat-button-disabled, .mat-accent, .mat-warn, .mat-primary),
-  &.mat-raised-button:not(.mat-button-disabled, .mat-accent, .mat-warn, .mat-primary),
-  &.mat-stroked-button:not(.mat-button-disabled, .mat-accent, .mat-warn, .mat-primary) {
+  &.mat-mdc-unelevated-button:not([disabled], .mat-accent, .mat-warn, .mat-primary),
+  &.mat-mdc-raised-button:not([disabled], .mat-accent, .mat-warn, .mat-primary),
+  &.mat-mdc-outlined-button:not([disabled], .mat-accent, .mat-warn, .mat-primary) {
     color: luxpalette.$lux-primary-color;
     & lux-icon.lux-button-icon:not(.lux-button-icon-round) {
       color: #000000;
     }
   }
 
-  &.mat-raised-button.mat-accent:not(.mat-button-disabled),
-  &.mat-flat-button.mat-accent:not(.mat-button-disabled),
-  &.mat-fab.mat-accent:not(.mat-button-disabled) {
+  &.mat-mdc-raised-button.mat-accent:not([disabled]),
+  &.mat-mdc-unelevated-button.mat-accent:not([disabled]),
+  &.mat-mdc-fab.mat-accent:not([disabled]) {
     color: map.get(luxpalette.$lux-palette-primary, 500);
     &.lux-stroked {
       color: luxpalette.$lux-accent-color;
@@ -168,7 +184,7 @@ lux-button button.lux-button {
     }
   }
 
-  &.mat-fab.lux-button-rounded {
+  &.mat-mdc-fab.lux-button-rounded {
     border-radius: 16px !important;
     height: luxcommon.$button-fav-height;
     width: luxcommon.$button-fav-height;
@@ -182,10 +198,10 @@ lux-button button.lux-button {
     }
     &.lux-stroked {
       border-color: luxcommon.$app-border-color !important;
-      &:hover:not(.mat-button-disabled) {
+      &:hover:not([disabled]) {
         background-color: color.adjust(luxcommon.$lux-hover-color, $lightness: -10%) !important;
       }
-      &:focus-visible:not(.mat-button-disabled, :hover) {
+      &:focus-visible:not([disabled], :hover) {
         background-color: transparent !important;
       }
       @include luxelevations.lux-elevation-z0;
@@ -279,7 +295,7 @@ lux-table {
  */
 lux-list lux-list-item lux-card {
   &.lux-list-item-selected {
-    mat-card.mat-card.lux-card {
+    mat-card.mat-mdc-card.lux-card {
       @include luxfocus.lux-selected-mixin;
       background: unset;
       box-shadow: unset;
@@ -347,16 +363,25 @@ lux-stepper {
  */
 lux-tabs,
 mat-card lux-tabs {
-  mat-tab-group div[role="tab"]:not(.mat-tab-disabled) {
+  mat-tab-group div[role="tab"]:not(.mat-mdc-tab-disabled) {
     &.mat-tab-label-active {
       background-color: luxcommon.$lux-hover-color;
-      border-radius: 4px;
+      border-radius: luxcommon.$app-border-radius;
     }
 
-    &:hover:not(.mat-tab-label-active) {
-      color: luxpalette.$lux-primary-color;
+    &:hover {
       background-color: luxcommon.$lux-hover-color;
-      border-radius: 4px;
+      border-radius: luxcommon.$app-border-radius;
+
+      &:not(.mdc-tab--active) .lux-tab-title,
+      &:not(.mdc-tab--active) lux-icon {
+        color: luxpalette.$lux-primary-color;
+      }
+    }
+
+    &:hover .mdc-tab__ripple::before {
+      background-color: luxcommon.$lux-hover-color;
+      border-radius: luxcommon.$app-border-radius;
     }
   }
 
@@ -430,10 +455,6 @@ mat-card lux-tabs {
     font-size: 1.125rem;
     color: map.get(luxpalette.$lux-palette_primary, 500);
 
-    .mat-button-focus-overlay {
-      display: none;
-    }
-
     &:focus {
       @include luxfocus.focus-dark-mixin;
     }
@@ -470,7 +491,7 @@ mat-card lux-tabs {
 lux-filter-form {
   lux-accordion {
     lux-menu {
-      .lux-menu-trigger button.mat-button {
+      .lux-menu-trigger button.mat-mdc-button {
         height: 45px;
       }
     }
@@ -498,7 +519,7 @@ lux-filter-form {
   }
 
   .lux-detail-header-ac {
-    mat-card.mat-card {
+    mat-card.mat-mdc-card {
       @include luxelevations.lux-elevation-z0;
     }
   }
@@ -536,6 +557,14 @@ lux-form-control-wrapper .lux-form-control-wrapper {
     }
   }
 
+  &.lux-dense-authentic {
+    .lux-form-control-container-authentic {
+      &.lux-no-input-row {
+        padding: 0.25em 0em;
+      }
+    }
+  }
+
   .lux-form-control-container-authentic {
     padding: 10px;
     line-height: 1;
@@ -551,7 +580,6 @@ lux-form-control-wrapper .lux-form-control-wrapper {
       font-size: luxcommon.$form-control-font-size;
       font-family: luxcommon.$app-font-family;
       padding: 8px 0;
-      min-height: 40px;
     }
   }
 
@@ -629,43 +657,11 @@ lux-checkbox-ac {
 */
 lux-radio-ac {
   & lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic.lux-no-input-row {
-    padding: 10px 0;
     height: auto;
   }
 
-  .mat-radio-outer-circle {
-    border: 1.5px solid map.get(luxpalette.$lux-palette_primary, 500);
-  }
-
-  .mat-radio-inner-circle {
-    // Checkmark-Symbol mit css gezeichnet, anstatt des inneren Kreises
-    border-radius: 2px;
-    background-color: transparent !important;
-    border-bottom: 5px solid white;
-    border-right: 5px solid white;
-    height: 32px;
-    width: 14px;
-    margin-top: -8px;
-    margin-left: 3px;
-  }
-
-  .mat-radio-checked {
-    .mat-radio-outer-circle {
-      background: map.get(luxpalette.$lux-palette_primary, 500);
-    }
-
-    &.mat-radio-disabled .mat-radio-outer-circle {
-      background: luxcommon.$dark-disabled-text;
-      border: none;
-    }
-  }
-
-  .mat-radio-checked .mat-radio-inner-circle {
-    transform: rotate(45deg) scale(0.4);
-  }
-
   .mat-radio-button {
-    .mat-radio-label-content {
+    .mdc-label {
       line-height: normal;
     }
     .mat-radio-ripple {
@@ -705,7 +701,7 @@ lux-datetimepicker-ac {
         width: 18px;
       }
 
-      &.mat-button-disabled {
+      &:disabled {
         svg {
           color: luxcommon.$dark-disabled-text;
         }
@@ -719,7 +715,7 @@ lux-datetimepicker-ac {
 }
 
 .cdk-overlay-pane .mat-datepicker-content,
-.lux-datetimepicker-overlay .mat-card.lux-card {
+.lux-datetimepicker-overlay .mat-mdc-card.lux-card {
   margin: 11px -6px;
 }
 
@@ -741,10 +737,10 @@ lux-lookup-combobox-ac {
  * wird noch für "Green" benötigt
  */
 .cdk-overlay-pane {
-  & > .mat-autocomplete-panel:not([class*="mat-elevation-z"]),
+  & > .mat-mdc-autocomplete-panel:not([class*="mat-elevation-z"]),
   .mat-datepicker-content,
-  .mat-select-panel:not([class*="mat-elevation-z"]),
-  .mat-menu-panel {
+  .mat-mdc-select-panel:not([class*="mat-elevation-z"]),
+  .mat-mdc-menu-panel {
     @include luxelevations.lux-elevation-z4;
   }
 }

package/src/green/_luxcommon.scss

@@ -95,3 +95,9 @@ $colorsForDarkBg: (
   "brown": #eb7c05,
   "white": #ffffff
 );
+
+// Tile
+$lux-tile-font-hover-color: #2e8533;
+$lux-tile-icon-color: #56bd66;
+$lux-tile-borderradius: 24px;
+$lux-tile-bottom-line-color: #56bd66;

package/src/green/luxtheme.scss

@@ -92,7 +92,13 @@
   $componentFontColors: themeCommon.$componentFontColors,
 
   // Farben für einen dunklen Hintergrund (z.B. Snackbar).
-  $colorsForDarkBg: themeCommon.$colorsForDarkBg
+  $colorsForDarkBg: themeCommon.$colorsForDarkBg,
+
+  // Tile
+  $lux-tile-font-hover-color: themeCommon.$lux-tile-font-hover-color,
+  $lux-tile-icon-color: themeCommon.$lux-tile-icon-color,
+  $lux-tile-borderradius: themeCommon.$lux-tile-borderradius,
+  $lux-tile-bottom-line-color: themeCommon.$lux-tile-bottom-line-color
 );
 @use "../base/luxSvgIcons";
 @use "../base/luxelevations";

package/src/public/global.scss

@@ -6,4 +6,47 @@ $mat-large: "max-width: 1919px" !default;
 $mat-xlarge: "max-width: 5000px" !default;
 
 // Font
-$app-font-family: Source Sans Pro, Helvetica Neue, sans-serif !default;
+$app-font-family:
+  Source Sans Pro,
+  Helvetica Neue,
+  sans-serif !default;
+
+html body {
+  --mat-checkbox-label-text-font: #{$app-font-family};
+  --mat-switch-label-text-font: #{$app-font-family};
+  --mat-stepper-container-text-font: #{$app-font-family};
+  --mat-stepper-header-label-text-font: #{$app-font-family};
+  --mat-expansion-header-text-font: #{$app-font-family};
+  --mat-expansion-container-text-font: #{$app-font-family};
+  --mat-datepicker-calendar-text-font: #{$app-font-family};
+  --mat-legacy-button-toggle-text-font: #{$app-font-family};
+  --mat-standard-button-toggle-text-font: #{$app-font-family};
+  --mat-bottom-sheet-container-text-font: #{$app-font-family};
+  --mat-badge-text-font: #{$app-font-family};
+  --mat-toolbar-title-text-font: #{$app-font-family};
+  --mat-stepper-container-text-font: #{$app-font-family};
+  --mat-stepper-header-label-text-font: #{$app-font-family};
+  --mat-expansion-header-text-font: #{$app-font-family};
+  --mat-expansion-container-text-font: #{$app-font-family};
+  --mat-datepicker-calendar-text-font: #{$app-font-family};
+  --mat-legacy-button-toggle-text-font: #{$app-font-family};
+  --mat-standard-button-toggle-text-font: #{$app-font-family};
+  --mat-bottom-sheet-container-text-font: #{$app-font-family};
+  --mat-badge-text-font: #{$app-font-family};
+  --mat-table-header-headline-font: #{$app-font-family};
+  --mat-table-row-item-label-text-font: #{$app-font-family};
+  --mat-table-footer-supporting-text-font: #{$app-font-family};
+  --mat-paginator-container-text-font: #{$app-font-family};
+  --mat-menu-item-label-text-font: #{$app-font-family};
+  --mat-select-trigger-text-font: #{$app-font-family};
+  --mdc-filled-text-field-label-text-font: #{$app-font-family};
+  --mdc-outlined-text-field-label-text-font: #{$app-font-family};
+  --mat-form-field-container-text-font: #{$app-font-family};
+  --mat-form-field-subscript-text-font: #{$app-font-family};
+  --mat-optgroup-label-text-font: #{$app-font-family};
+  --mat-option-label-text-font: #{$app-font-family};
+}
+
+.mat-mdc-tooltip-surface {
+  --mdc-plain-tooltip-supporting-text-font: #{$app-font-family};
+}