@ihk-gfi/lux-components-theme 19.2.0 → 21.0.0

package/src/{base → base-templates}/components/_luxTable.scss

@@ -1,10 +1,27 @@
-@use "../luxcommon";
-@use "../luxpalette";
-@use "../luxfocus";
-@use "../luxbreakpoints";
-@use "sass:map";
+@use "@angular/material" as mat;
+@use "../common/luxfocus";
+@use "../common/luxbreakpoints";
 
 lux-table {
+  @include mat.table-overrides(
+    (
+      header-headline-color: var(--lux-theme-dark-primary-text),
+      header-headline-size: 1rem,
+      header-headline-weight: 700,
+      footer-supporting-text-size: 0.9375rem,
+      header-container-height: auto
+    )
+  );
+
+  // Paginator - Select für Seitenanzahl
+  .lux-table-paginator {
+    @include mat.form-field-overrides(
+      (
+        filled-container-color: transparent
+      )
+    );
+  }
+
   display: flex;
   height: 100%;
 
@@ -14,12 +31,8 @@ lux-table {
     padding-left: 24px;
   }
 
-  table.mat-mdc-table {
-    font-family: luxcommon.$app-font-family;
-  }
-
   .lux-row-selected {
-    background-color: luxcommon.$lux-selected-bg-color;
+    background-color: var(--lux-theme-selected-bg-color);
   }
 
   .lux-table {
@@ -34,23 +47,13 @@ lux-table {
       box-sizing: border-box;
     }
 
-    th,
     .lux-table-header-no-data th {
       vertical-align: middle;
       height: 30px;
     }
 
-    td,
-    th {
-      padding: 0.5em 1em;
-    }
-
     th {
-      padding-top: 1em;
-    }
-
-    tr.mat-mdc-header-row {
-      height: auto;
+      padding: 1rem 1rem 0.5rem 1rem;
     }
 
     th.mat-mdc-header-cell,
@@ -61,9 +64,8 @@ lux-table {
 
     td.mat-mdc-footer-cell {
       border: none;
-      border-top: 1px solid luxcommon.$app-border-color;
-      font-size: 0.9375rem;
-      color: luxcommon.$dark-primary-text;
+      border-top: 1px solid var(--lux-theme-app-border-color);
+      color: var(--lux-theme-dark-primary-text);
       padding-bottom: 1em;
     }
 
@@ -85,25 +87,13 @@ lux-table {
       border-radius: 4px;
 
       &:not(.lux-hide-borders) {
-        border: 1px solid luxcommon.$app-border-color;
+        border: 1px solid var(--lux-theme-app-border-color);
       }
 
       table {
         width: 100%;
         border-spacing: 0 !important;
 
-        td .lux-form-control-wrapper {
-          margin: 0;
-
-          .lux-form-control-container-authentic {
-            padding: 0.25em 0.5em; // bei den Form-Controls in einer Tabellen-Zelle wird die Höhe reduziert
-
-            &.lux-no-input-row {
-              padding: 0em;
-            }
-          }
-        }
-
         tbody tr:last-of-type td {
           border-bottom: none;
         }
@@ -123,14 +113,8 @@ lux-table {
         }
       }
 
-      thead th {
-        font-size: 1rem;
-        color: luxcommon.$dark-primary-text;
-        font-weight: 700;
-      }
-
       .mat-mdc-row:nth-child(odd) {
-        background-color: #f0f3f6;
+        background-color: var(--lux-theme-tabble-alternate-row-bg-color);
       }
 
       .mat-mdc-row:nth-child(even) {
@@ -151,15 +135,6 @@ lux-table {
       }
     }
 
-    .mat-mdc-paginator,
-    .mat-mdc-paginator-page-size .mat-mdc-select-trigger {
-      font-size: 0.75rem;
-
-      .mdc-text-field--filled:not(.mdc-text-field--disabled) {
-        background-color: #ffffff;
-      }
-    }
-
     .lux-table-overlay {
       -webkit-transition: opacity 1s;
       -moz-transition: opacity 1s;
@@ -219,10 +194,6 @@ lux-table {
       height: 0;
     }
 
-    lux-checkbox-ac .mat-mdc-checkbox-inner-container {
-      margin: 0px;
-    }
-
     @include luxbreakpoints.xs {
       .lux-table-filter-input {
         max-width: 100%;
@@ -233,11 +204,6 @@ lux-table {
     }
   }
 
-  .lux-form-control-readonly-authentic {
-    // damit die Events der eigentliche Checkbox nicht zusätzlich gezählt werden
-    pointer-events: none;
-  }
-
   .lux-element-align-top {
     vertical-align: text-top;
   }
@@ -251,7 +217,7 @@ lux-table {
   }
 
   .lux-row-selected:focus-visible {
-    background-color: luxcommon.$lux-hover-color !important;
+    background-color: var(--lux-theme-hover-color) !important;
     outline: none;
   }
 

package/src/{base → base-templates}/components/_luxTabs.scss

@@ -1,18 +1,29 @@
-@use "sass:map";
-@use "../luxpalette";
-@use "../luxcommon";
-@use "../luxfocus";
-@use "../luxbreakpoints";
+@use "@angular/material" as mat;
+@use "../common/luxfocus";
+@use "../common/luxbreakpoints";
 
 lux-tabs {
-  .mat-tab-nav-bar,
-  .mat-tab-header {
-    border-color: luxcommon.$app-border-color;
-    font-size: 1rem;
-  }
-
-  .mat-mdc-tab-label-container {
-    border: none;
+  @include mat.tabs-overrides(
+    (
+      label-text-font: var(--lux-theme-tabs-text-font),
+      label-text-size: var(--lux-theme-tabs-label-text-size),
+      label-text-weight: var(--lux-theme-tabs-label-text-weight),
+      active-label-text-color: var(--lux-theme-primary-20),
+      active-focus-label-text-color: var(--lux-theme-primary-20),
+      active-hover-label-text-color: var(--lux-theme-primary-20),
+      active-indicator-height: 4px,
+      active-indicator-shape: var(--lux-theme-app-border-radius),
+      inactive-label-text-color: var(--lux-theme-primary-20),
+      inactive-hover-label-text-color: var(--lux-theme-primary-20),
+      divider-height: 1px,
+      divider-color: var(--lux-theme-app-border-color)
+    )
+  );
+
+  mat-tab-group:not(.lux-tabs-show-divider) {
+    @include mat.tabs-overrides((
+      divider-height: 0,
+    ));
   }
 
   .mdc-tab {
@@ -21,19 +32,13 @@ lux-tabs {
   }
 
   mat-tab-group div[role="tab"] {
-    font-size: 0.875rem;
-    font-weight: 600;
     letter-spacing: normal;
     min-height: unset !important;
     height: unset !important;
-    &:not(.mat-tab-disabled) .mdc-tab__text-label {
-      color: map.get(luxpalette.$lux-palette_primary, 500);
-      opacity: 1;
-    }
   }
 
-  mat-tab-group.lux-tabs-show-divider mat-tab-header {
-    border-bottom: 1px solid luxcommon.$app-border-color;
+  .lux-tab-title-container {
+    justify-content: center;
   }
 
   .lux-tab-title {
@@ -55,23 +60,17 @@ lux-tabs {
   }
 
   .lux-notification-new {
-    background-color: map.get(luxcommon.$componentBgColors, "green");
+    background-color: var(--lux-theme-custom-green);
   }
 
   .lux-tabs-notification-icon {
-    border: 2px solid #ffffff;
-  }
-
-  .lux-locked {
-    pointer-events: none;
-    background: red;
-    color: red;
+    border: 2px solid var(--lux-theme-app-content-bg);
   }
 
   .lux-tabs-show-border {
-    border: 1px solid luxcommon.$app-border-color;
-    border-radius: 4px;
-    background-color: luxcommon.$app-content-bg;
+    border: 1px solid var(--lux-theme-app-border-color);
+    border-radius: var(--lux-theme-tabs-border-radius);
+    background-color: var(--lux-theme-app-content-bg);
   }
 
   // Anpassungen für kleine Screensizes
@@ -90,10 +89,6 @@ lux-tabs {
       padding-left: 30px;
       padding-right: 30px;
     }
-
-    mat-chip {
-      background: white !important;
-    }
   }
 
   .mat-mdc-tab-label.lux-tab-with-icon {
@@ -124,7 +119,7 @@ lux-tabs {
     &.mat-badge.lux-badge-no-border .mat-badge-content {
       left: unset;
       bottom: unset;
-      top: 20px;
+      top: 18px;
       right: -22px;
     }
   }
@@ -190,33 +185,3 @@ lux-tabs {
     }
   }
 }
-
-/** ########## HOVER / FOCUS ########## **/
-lux-tabs,
-mat-card lux-tabs {
-  mat-tab-group div[role="tab"]:not(.mat-mdc-tab-disabled) {
-    &:focus-visible {
-      @include luxfocus.focus-dark-mixin-inline;
-      border-radius: luxcommon.$app-border-radius;
-    }
-
-    &:hover {
-      background-color: transparent;
-
-      &:not(.mdc-tab--active) .lux-tab-title,
-      &:not(.mdc-tab--active) lux-icon {
-        color: luxcommon.$lux-hover-color;
-      }
-    }
-
-    &:hover .mdc-tab__ripple::before {
-      background-color: transparent;
-    }
-  }
-
-  .mdc-tab-indicator__content {
-    background-color: map.get(luxpalette.$lux-palette_primary, 500) !important;
-    height: 4px;
-    border-radius: luxcommon.$app-border-radius;
-  }
-}

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

@@ -0,0 +1,16 @@
+lux-textarea-ac {
+  textarea {
+    font: inherit;
+    color: currentColor;
+    background: transparent;
+    border: none;
+    outline: 0;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    max-width: 100%;
+    vertical-align: bottom;
+    text-align: inherit;
+    font-size: var(--lux-theme-form-control-font-size);
+  }
+}

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

@@ -0,0 +1,83 @@
+@mixin lux-textbox($color) {
+  color: var(--lux-theme-textbox-#{$color}-on-color);
+  background: var(--lux-theme-textbox-#{$color}-color);
+  border: 1px solid var(--lux-theme-textbox-#{$color}-border-color);
+  lux-icon.lux-textbox-icon {
+    color: var(--lux-theme-textbox-#{$color}-icon-color);
+  }
+
+  .lux-textbox-content {
+    color: var(--lux-theme-textbox-#{$color}-on-color);
+  }
+}
+
+lux-textbox {
+  .lux-textbox-container {
+    display: grid;
+    grid-template-columns: 1.5em 1fr;
+    gap: 1.5em;
+    row-gap: 1em;
+    border-radius: 4px;
+    padding: 1.5em;
+
+    h1.lux-textbox-title,
+    h2.lux-textbox-title,
+    h3.lux-textbox-title,
+    h4.lux-textbox-title,
+    h5.lux-textbox-title,
+    h6.lux-textbox-title {
+      margin: 0;
+      font-size: 1.125rem;
+      font-weight: 600;
+    }
+
+    .lux-textbox-icon {
+      width: 24px;
+      height: 24px;
+      justify-self: start;
+      align-self: start;
+      mat-icon.mat-icon.lux-icon {
+        padding: 0 !important;
+      }
+    }
+
+    .lux-textbox-content {
+      color: var(--lux-theme-textbox-default-on-color);
+      grid-column-start: 2;
+      font-size: 1rem;
+      p {
+        padding: 0;
+        margin: 0;
+      }
+
+      &:empty {
+        display: none;
+      }
+    }
+
+    &.lux-no-icon {
+      grid-template-columns: 1fr;
+
+      .lux-text-box-title,
+      .lux-textbox-content {
+        grid-column: 1 / -1;
+      }
+    }
+
+    &.lux-default {
+      @include lux-textbox(default);
+    }
+    &.lux-blue {
+      @include lux-textbox(blue);
+    }
+    &.lux-green {
+      @include lux-textbox(green);
+    }
+    &.lux-red {
+      @include lux-textbox(red);
+    }
+    &.lux-yellow {
+      @include lux-textbox(yellow);
+    }
+  }
+}

package/src/{base → base-templates}/components/_luxTile.scss

@@ -1,11 +1,5 @@
-@use "sass:map";
-@use "../luxpalette";
-@use "../luxcommon";
-@use "../luxelevations";
-@use "../luxfocus";
-@use "@angular/material" as mat;
-
-$dark-green: #2e8533;
+@use "../common/luxelevations";
+@use "../common/luxfocus";
 
 // Diese Komponenten wird nur noch für das Green-Theme gepflegt
 lux-tile {
@@ -13,12 +7,12 @@ lux-tile {
   display: flex;
 
   .lux-notification-new {
-    background-color: map.get(luxpalette.$lux-palette_accent, 500);
+    background-color: var(--lux-theme-accent-70);
   }
 
   mat-card[class~="lux-cursor"] {
     &.mat-mdc-card {
-      border-radius: luxcommon.$lux-tile-borderradius;
+      border-radius: var(--lux-theme-tile-borderradius);
       overflow: hidden !important;
       padding: 24px;
     }
@@ -39,7 +33,7 @@ lux-tile {
       left: 0;
       right: 0;
       height: 8px;
-      background-color: luxcommon.$lux-tile-bottom-line-color;
+      background-color: var(--lux-theme-tile-bottom-line-color);
       transition: 0.2s ease;
     }
 
@@ -63,7 +57,7 @@ lux-tile {
 
   h2 {
     margin: 4px 0 0 0;
-    color: map.get(luxpalette.$lux-palette_primary, 500);
+    color: var(--lux-theme-primary-20);
   }
 
   .lux-tile-mobile-view {
@@ -77,7 +71,7 @@ lux-tile {
       word-wrap: break-word;
       max-width: 100%;
       margin: 4px 0px;
-      font-family: luxcommon.$app-headline-font;
+      font-family: var(--lux-theme-app-headline-font);
     }
   }
 
@@ -92,7 +86,7 @@ lux-tile {
       word-wrap: break-word;
       max-width: 100%;
       margin: 12px 0px;
-      font-family: luxcommon.$app-headline-font;
+      font-family: var(--lux-theme-app-headline-font);
     }
   }
 
@@ -104,7 +98,7 @@ lux-tile {
   }
 
   .lux-tile-icon {
-    color: luxcommon.$lux-tile-icon-color;
+    color: var(--lux-theme-tile-icon-color);
     margin-top: 6px;
     lux-icon {
       mat-icon {
@@ -179,7 +173,8 @@ lux-tile {
 
   mat-card[class~="lux-cursor"] {
     &.mat-mdc-card:focus-visible {
-      @include luxfocus.lux-focus-mixin-green;
+      box-shadow: 0 0 0 2px #2e8533, 0 0 8px 2px #2e8533 !important;
+      outline: 0 !important;
     }
 
     &:hover {
@@ -187,7 +182,7 @@ lux-tile {
       background-color: white !important;
 
       h2 {
-        color: luxcommon.$lux-tile-font-hover-color;
+        color: var(--lux-theme-tile-font-hover-color);
       }
     }
 

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

@@ -0,0 +1,71 @@
+@use "@angular/material" as mat;
+
+$tileBoxShadow: 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 {
+  @include mat.card-overrides(
+    (
+      title-text-size: 1.25rem,
+      title-text-weight: 500,
+      subtitle-text-size: 0.9375rem,
+      subtitle-text-color: var(--lux-theme-dark-secondary-text),
+      elevated-container-shape: var(--lux-theme-app-border-radius),
+      elevated-container-elevation: #{"0 0 0 1px rgba(0, 0, 0, .12), #{$tileBoxShadow}"}
+    )
+  );
+
+  .mat-mdc-card-header {
+    padding: 16px;
+  }
+
+  .lux-tile-ac {
+    display: flex;
+    flex: 1 1 auto;
+    height: 100%;
+    min-width: 150px;
+    background-image: var(--lux-theme-app-gradient);
+  }
+
+  .mat-mdc-card-header-text {
+    // Damit der Titel und Subtitle nicht umbrechen und stattdessen abgeschnitten werden, wenn der Text zu lang ist.
+    // Ohne die min-width würde ein langer Text dazu führen, dass der Header breiter als die Card wird.
+    min-width: 0;
+  }
+
+  .lux-tile-title {
+    padding-bottom: 12px;
+  }
+
+  .lux-tile-header {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .lux-tile-icon-container {
+    .lux-icon {
+      color: var(--lux-theme-tile-ac-icon-color);
+      padding: 0px !important;
+      height: 32px;
+      width: 32px;
+    }
+  }
+
+  // Fokus
+  .lux-tile-ac:focus-visible {
+    outline: none;
+    @include mat.card-overrides(
+      (
+        elevated-container-elevation: #{"0 0 0 var(--lux-theme-outline-width) var(--lux-theme-outline-color-dark), #{$tileBoxShadow}"}
+      )
+    );
+  }
+
+  // Hover
+  &:hover {
+    @include mat.card-overrides(
+      (
+        elevated-container-elevation: #{"0 0 0 1px #000, #{$tileBoxShadow}"}
+      )
+    );
+  }
+}

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

@@ -0,0 +1,19 @@
+@use "@angular/material" as mat;
+
+lux-toggle-ac {
+  @include mat.slide-toggle-overrides(
+    (
+      label-text-size: var(--lux-theme-form-control-font-size),
+      disabled-label-text-color: var(--lux-theme-dark-disabled-text)
+    )
+  );
+
+  // Readonly state
+  &.lux-form-control-readonly {
+    pointer-events: none;
+
+    .mdc-switch__handle {
+      pointer-events: none;
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+@use "@angular/material" as mat;
+
+:root {
+  @include mat.tooltip-overrides((
+    container-shape: var(--lux-theme-app-border-radius),
+    supporting-text-size: 0.875rem
+  ));
+}

package/src/{base → base-templates}/components/_luxTourHint.scss

@@ -1,5 +1,4 @@
-@use "../luxcommon";
-@use "../luxfocus";
+@use "../common/luxfocus";
 
 $arrowSize: 16px;
 
@@ -12,7 +11,7 @@ lux-tour-hint {
 
     position: fixed;
     z-index: 1002;
-    border-radius: luxcommon.$app-border-radius;
+    border-radius: var(--lux-theme-app-border-radius);
     transform: translate(var(--baseOffsetX), var(--baseOffsetY));
     padding: 10px;
     min-width: 250px;
@@ -77,7 +76,7 @@ lux-tour-hint {
   }
 
   .tour-hint-overlay {
-    background-color: luxcommon.$lux-overlay-backdrop-color;
+    background-color: var(--lux-theme-tour-hint-overlay-backdrop-color);
     position: fixed;
     z-index: 1001;
 
@@ -92,7 +91,7 @@ lux-tour-hint {
         position: absolute;
         width: 100%;
         height: 100%;
-        border: 5px solid luxcommon.$lux-overlay-backdrop-color;
+        border: 5px solid var(--lux-theme-tour-hint-overlay-backdrop-color);
         border-radius: 10px;
         transform: translate(-5px, -5px);
       }
@@ -138,12 +137,17 @@ lux-tour-hint-preset {
       position: absolute;
       top: 8px;
       right: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 24px;
+      min-height: 24px;
 
       &:hover {
-        background-color: #fff !important;
+        background-color: var(--lux-theme-dialog-close-button-hover-background-color);
 
         mat-icon.mat-icon-no-color {
-          color: luxcommon.$lux-hover-color;
+          color: var(--lux-theme-dialog-close-button-hover-color);
         }
 
         cursor: pointer;