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

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

@@ -0,0 +1,119 @@
+@use "sass:map";
+@use "../common/luxfocus";
+@use "../common/luxelevations";
+
+$componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "yellow", "pink", "lightblue", "white");
+
+@mixin lux-message-color-mixin($prefix) {
+  @each $colorName in $componentColorNames {
+    .lux-messagebox-#{$colorName} {
+      background-color: var(#{$prefix}-#{$colorName});
+    }
+    .lux-messagebox-on-#{$colorName} {
+      color: var(#{$prefix}-on-#{$colorName});
+    }
+  }
+}
+
+lux-message-box {
+  display: block;
+  overflow: hidden;
+  border-radius: 4px;
+
+  @include lux-message-color-mixin("--lux-theme-messagebox");
+
+  &.mat-elevation-z4 {
+    @include luxelevations.lux-elevation-z0();
+  }
+
+  & .lux-message-box-content {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+
+    & .lux-message-container {
+      display: grid;
+      grid-template-columns: 52px 1fr 36px;
+      align-items: center;
+
+      padding: var(--lux-theme-outline-width) 24px;
+      border-radius: 4px;
+
+      &.lux-messagebox-white {
+        // da im Theme authentic der Schatten entfernt wurde, muss eine Weiße Messagebox eine Border erhalten.
+        border: 1px solid var(--lux-theme-primary-color);
+        box-sizing: border-box;
+
+        & lux-button button.lux-button.mat-mdc-fab.lux-fab-rounded-default:not([class*="mat-elevation-z"]) {
+          color: var(--lux-theme-primary-color);
+        }
+      }
+
+      & lux-button {
+        button.lux-button.mat-mdc-fab.lux-fab-rounded-default:not([class*="mat-elevation-z"]) {
+          color: inherit !important;
+          @include luxelevations.lux-elevation-z0();
+        }
+
+        .mat-mdc-button-ripple {
+          display: none;
+        }
+      }
+
+      & lux-icon:not(.lux-button-icon, .lux-button-icon-round) {
+        display: contents;
+
+        mat-icon.lux-icon {
+          width: 20px;
+          height: 20px;
+        }
+      }
+    }
+    lux-message:not(:last-child) {
+      .lux-message-container {
+        margin-bottom: 1px;
+      }
+    }
+  }
+
+  mat-paginator {
+    & .mat-paginator-container {
+      padding: 0 20px !important;
+    }
+  }
+}
+
+/** ########## Hover / Focus  ########## **/
+lux-message-box {
+  & div.lux-message-box-content {
+    &:focus-visible {
+      @include luxfocus.focus-dark-mixin;
+    }
+
+    & .lux-message-container.lux-messagebox-white {
+      & .lux-message-text:focus-visible {
+        @include luxfocus.focus-dark-mixin;
+        border-radius: 4px;
+      }
+    }
+
+    & .lux-message-container:not(.lux-messagebox-white) {
+      --lux-theme-outline-color-dark: #ffffff;
+      & .lux-message-text:focus-visible {
+        @include luxfocus.focus-bright-mixin;
+        border-radius: 4px;
+      }
+    }
+  }
+}
+
+@media (prefers-contrast: more) {
+  lux-message-box {
+    .lux-message-container {
+      font-size: 1rem;
+      font-style: normal;
+      font-weight: 600;
+      line-height: normal;
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+.lux-popup-panel {
+  background-color: var(--lux-theme-popup-background-color);
+  border: 1px solid var(--lux-theme-app-border-color);
+  border-radius: var(--lux-theme-app-border-radius);
+}
+
+.lux-popup {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  box-sizing: border-box;
+  padding: var(--lux-theme-popup-panel-padding);
+  border-radius: var(--lux-theme-app-border-radius);
+  animation: lux-popup-fade-in var(--lux-theme-popup-fade-in-duration) ease-out;
+}
+
+.lux-popup__title {
+  font-family: var(--lux-theme-app-headline-font, var(--lux-theme-app-font-family));
+  font-size: var(--lux-theme-popup-title-font-size);
+  font-weight: var(--lux-theme-popup-title-font-weight);
+  line-height: var(--lux-theme-popup-title-line-height);
+  margin: 0;
+}
+
+.lux-popup__body {
+  font-size: var(--lux-theme-popup-font-size);
+  font-weight: var(--lux-theme-popup-font-weight);
+  line-height: var(--lux-theme-popup-line-height);
+}
+
+.lux-popup__actions {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+}
+
+@keyframes lux-popup-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+// Focus-Styling für Popup
+
+.lux-popup {
+  &:focus-visible {
+    outline: var(--lux-theme-outline-width) var(--lux-theme-outline-style) var(--lux-theme-outline-color-dark);
+  }
+}

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

@@ -0,0 +1,103 @@
+@use "@angular/material" as mat;
+
+lux-progress {
+  // Farben
+  @include mat.progress-bar-overrides(
+    (
+      track-color: #bcc8d5
+    )
+  );
+
+  .lux-color-red {
+    @include mat.progress-bar-overrides(
+      (
+        active-indicator-color: var(--lux-theme-custom-red)
+      )
+    );
+  }
+  .lux-color-green {
+    @include mat.progress-bar-overrides(
+      (
+        active-indicator-color: var(--lux-theme-custom-green)
+      )
+    );
+  }
+  .lux-color-purple {
+    @include mat.progress-bar-overrides(
+      (
+        active-indicator-color: var(--lux-theme-custom-purple)
+      )
+    );
+  }
+  .lux-color-blue {
+    @include mat.progress-bar-overrides(
+      (
+        active-indicator-color: var(--lux-theme-custom-blue)
+      )
+    );
+  }
+  .lux-color-gray {
+    @include mat.progress-bar-overrides(
+      (
+        active-indicator-color: var(--lux-theme-custom-gray)
+      )
+    );
+  }
+  .lux-color-orange {
+    @include mat.progress-bar-overrides(
+      (
+        active-indicator-color: var(--lux-theme-custom-orange)
+      )
+    );
+  }
+  .lux-color-yellow {
+    @include mat.progress-bar-overrides(
+      (
+        active-indicator-color: var(--lux-theme-custom-yellow)
+      )
+    );
+  }
+
+  .lux-color-pink {
+    @include mat.progress-bar-overrides(
+      (
+        active-indicator-color: var(--lux-theme-custom-pink)
+      )
+    );
+  }
+  .lux-color-lightblue {
+    @include mat.progress-bar-overrides(
+      (
+        active-indicator-color: var(--lux-theme-custom-lightblue)
+      )
+    );
+  }
+
+  // Höhe
+  .lux-progress-small {
+    @include mat.progress-bar-overrides(
+      (
+        track-height: 6px,
+        active-indicator-height: 6px
+      )
+    );
+  }
+
+  .lux-progress-medium {
+    @include mat.progress-bar-overrides(
+      (
+        track-height: 12px,
+        active-indicator-height: 12px
+      )
+    );
+  }
+
+  .lux-progress-large {
+    @include mat.progress-bar-overrides(
+      (
+        track-height: 24px,
+        active-indicator-height: 24px
+      )
+    );
+  }
+}

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

@@ -0,0 +1,94 @@
+@use "@angular/material" as mat;
+
+@mixin lux-progress-spinner-size($size) {
+  // Bug: https://github.com/angular/components/issues/32097
+  // width und height können entfernt werden, wenn der Bug behoben ist
+  width: $size !important;
+  height: $size !important;
+
+  @include mat.progress-spinner-overrides(
+    (
+      size: $size,
+      active-indicator-width: $size
+    )
+  );
+}
+
+lux-progress {
+  // Farben
+  .lux-color-red {
+    @include mat.progress-spinner-overrides(
+      (
+        active-indicator-color: var(--lux-theme-custom-red)
+      )
+    );
+  }
+  .lux-color-green {
+    @include mat.progress-spinner-overrides(
+      (
+        active-indicator-color: var(--lux-theme-custom-green)
+      )
+    );
+  }
+  .lux-color-purple {
+    @include mat.progress-spinner-overrides(
+      (
+        active-indicator-color: var(--lux-theme-custom-purple)
+      )
+    );
+  }
+  .lux-color-blue {
+    @include mat.progress-spinner-overrides(
+      (
+        active-indicator-color: var(--lux-theme-custom-blue)
+      )
+    );
+  }
+  .lux-color-gray {
+    @include mat.progress-spinner-overrides(
+      (
+        active-indicator-color: var(--lux-theme-custom-gray)
+      )
+    );
+  }
+  .lux-color-orange {
+    @include mat.progress-spinner-overrides(
+      (
+        active-indicator-color: var(--lux-theme-custom-orange)
+      )
+    );
+  }
+  .lux-color-yellow {
+    @include mat.progress-spinner-overrides(
+      (
+        active-indicator-color: var(--lux-theme-custom-yellow)
+      )
+    );
+  }
+
+  .lux-color-pink {
+    @include mat.progress-spinner-overrides(
+      (
+        active-indicator-color: var(--lux-theme-custom-pink)
+      )
+    );
+  }
+  .lux-color-lightblue {
+    @include mat.progress-spinner-overrides(
+      (
+        active-indicator-color: var(--lux-theme-custom-lightblue)
+      )
+    );
+  }
+
+  // Größen
+  .lux-progress-small mat-progress-spinner {
+    @include lux-progress-spinner-size(24px);
+  }
+  .lux-progress-medium mat-progress-spinner {
+    @include lux-progress-spinner-size(48px);
+  }
+  .lux-progress-large mat-progress-spinner {
+    @include lux-progress-spinner-size(96px);
+  }
+}

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

@@ -0,0 +1,32 @@
+@use "@angular/material" as mat;
+
+lux-radio-ac {
+  @include mat.radio-overrides(
+    (
+      label-text-size: var(--lux-theme-form-control-font-size)
+    )
+  );
+
+  .mat-mdc-radio-group {
+    display: flex;
+    box-sizing: border-box;
+    place-content: stretch flex-start;
+    align-items: stretch;
+
+    &.lux-horizontal {
+      column-gap: 0.75em;
+      flex-direction: row;
+      flex-flow: wrap;
+      max-height: 100%;
+    }
+    &.lux-vertical {
+      gap: 0;
+      flex-direction: column;
+      max-width: 100%;
+    }
+  }
+
+  &.lux-form-control-readonly {
+    pointer-events: none;
+  }
+}

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

@@ -0,0 +1,42 @@
+@use "@angular/material" as mat;
+@use "../common/luxfocus" as luxfocus;
+
+.lux-select-panel-ac,
+.lux-select-panel-ac-multiple {
+  @include mat.select-overrides(
+    (
+      panel-background-color: var(--lux-theme-panel-bg-color),
+      container-elevation-shadow: 0 0 0 1px var(--mat-card-outlined-outline-color, var(--mat-sys-outline-variant))
+    )
+  );
+}
+
+lux-select-ac {
+
+  @include mat.select-overrides(
+    (
+      enabled-arrow-color: var(--lux-theme-primary-color),
+      trigger-text-size: var(--lux-theme-form-control-font-size),
+    )
+  );
+
+  &.lux-form-control-readonly {
+    pointer-events: none;
+  }
+
+  // Hier kann nicht der Token "disabled-arrow-color" verwendet werden, da dieser
+  // nur greifen würde, wenn das mat-select-Element in einem mat-form-field verwendet wird.
+  [aria-disabled="true"] {
+    .mat-mdc-select-arrow {
+      color: var(--lux-theme-dark-disabled-text);
+    }
+  }
+}
+
+lux-select-ac {
+ @media (prefers-contrast: more) {
+    .mat-mdc-select:focus {
+      @include luxfocus.focus-dark-mixin;
+    }
+  }
+}

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

@@ -0,0 +1,93 @@
+@use "@angular/material" as mat;
+@use "../common/luxelevations";
+@use "../common/luxfocus";
+
+lux-side-nav {
+  lux-button {
+    @include mat.button-overrides(
+      (
+        text-label-text-color: var(--lux-theme-side-nav-button-color)
+      )
+    );
+  }
+
+  .lux-side-nav {
+    background: var(--lux-theme-app-data-bg);
+    @include luxelevations.lux-elevation-z16();
+
+    .lux-side-nav-header {
+      border-bottom: 1px solid var(--lux-theme-dark-dividers);
+    }
+
+    .lux-side-nav-footer {
+      border-top: 1px solid var(--lux-theme-dark-dividers);
+    }
+
+    .lux-side-nav-content {
+      .lux-side-nav-item {
+        padding-right: 4px;
+
+        .lux-side-nav-item-icon {
+          // color: var(--lux-theme-primary-20);
+
+          &.lux-side-nav-disabled {
+            color: var(--lux-theme-dark-disabled-text);
+          }
+        }
+
+        .lux-side-nav-item-expansion-icon {
+          // color: var(--lux-theme-primary-20);
+
+          &.lux-side-nav-disabled {
+            color: var(--lux-theme-dark-disabled-text);
+          }
+        }
+      }
+    }
+  }
+}
+
+.lux-side-nav-overlay {
+  background-color: var(--lux-theme-dark-focused);
+}
+
+lux-side-nav {
+  .lux-side-nav-item {
+    &.lux-side-nav-item-selected {
+      @include luxfocus.lux-selected-mixin;
+      color: var(--lux-theme-on-selected-color);
+      lux-button {
+        @include mat.button-overrides(
+          (
+            text-label-text-color: var(--lux-theme-on-selected-color)
+          )
+        );
+      }
+    }
+
+    &:focus:not(.lux-side-nav-disabled) {
+      @include luxfocus.focus-dark-mixin;
+    }
+
+    &:focus-within:not(.lux-side-nav-disabled) {
+      @include luxfocus.focus-dark-mixin;
+
+      button {
+        outline: var(--lux-theme-outline-width) var(--lux-theme-outline-style) transparent !important;
+      }
+    }
+
+    &:hover:not(.lux-side-nav-disabled) {
+      @include luxfocus.lux-hovered-mixin;
+      border-radius: 0;
+      color: var(--lux-theme-on-hover-color);
+      lux-button {
+        @include mat.button-overrides(
+          (
+            text-label-text-color: var(--lux-theme-on-hover-color)
+          )
+        );
+      }
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+@use "@angular/material" as mat;
+
+lux-slider-ac {
+  @include mat.slider-overrides(
+    (
+      value-indicator-width: 20px,
+      value-indicator-height: 20px,
+      active-track-color: var(--lux-theme-primary-20),
+      inactive-track-color: var(--lux-theme-primary-50)
+    )
+  );
+
+  // lux-form-control-wrapper .lux-form-control-wrapper .lux-form-control-container-authentic.lux-no-input-row {
+  //   padding-top: 2px;
+  //   padding-bottom: 0;
+  // }
+}

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

@@ -0,0 +1,41 @@
+@use "@angular/material" as mat;
+
+$componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "yellow", "pink", "lightblue", "white");
+
+@mixin lux-snackbar-color-mixin($prefix) {
+  @each $colorName in $componentColorNames {
+    &.lux-snackbar-color-text-#{$colorName} .lux-snackbar-text {
+      color: var(#{$prefix}-#{$colorName});
+    }
+    &.lux-snackbar-color-icon-#{$colorName} .lux-snackbar-icon {
+      color: var(#{$prefix}-#{$colorName});
+    }
+    &.lux-snackbar-color-action-#{$colorName} .lux-snackbar-action {
+      color: var(#{$prefix}-#{$colorName});
+    }
+  }
+}
+
+.lux-snackbar {
+  @include mat.snack-bar-overrides(
+    (
+      supporting-text-size: 1rem,
+      supporting-text-weight: 600
+    )
+  );
+
+  .lux-snackbar-text,
+  .lux-snackbar-icon,
+  .lux-snackbar-action {
+    background-color: transparent;
+  }
+
+  @include lux-snackbar-color-mixin("--lux-theme-snackbar");
+}
+
+.cdk-overlay-container .mat-mdc-snack-bar-container.lux-snackbar {
+  // Die Snackbar wird durch die App umpositioniert, bevor sie sichtbar geschaltet wird.
+  // Würde man die Snackbar nicht verstecken, würde sie von der initialen Position zur neuen
+  // springen.
+  visibility: hidden;
+}