@ihk-gfi/lux-components-theme 11.4.0

package/src/green/_custom.scss

@@ -0,0 +1,219 @@
+body {
+  color: #003366;
+}
+
+lux-card .mat-card {
+  color: #003366;
+}
+
+lux-panel {
+  & .mat-expansion-panel, .mat-expansion-panel-header-title, .mat-expansion-panel-header-description {
+    color: #003366;
+  }
+}
+
+@mixin lux-hovered-mixin-green {
+  background-color: #e3ebf5 !important;
+  border-radius: 4px;
+}
+
+lux-app-header {
+  .lux-app-header {
+    background-color: $app-header-bg;
+
+    .lux-show-border {
+      border-left: 1px solid #003366;
+    }
+
+    .lux-header-title {
+      color: map-get($lux-palette-primary, 500);
+    }
+
+    div.lux-header-action {
+      lux-button {
+        button {
+
+          &:not(.mat-accent):not(.mat-warn):not(.mat-primary):not(.mat-button-disabled) {
+            color: map-get($lux-palette-primary, 500);
+          }
+
+          &:not(.mat-accent):not(.mat-warn):not(.mat-primary).mat-button-disabled {
+            color: $dark-disabled-text;
+          }
+
+          &.mat-accent:not(.mat-button-disabled) {
+            color: map-get($lux-palette_accent, A100);
+          }
+
+          &.mat-warn:not(.mat-button-disabled) {
+            color: map-get($lux-palette_warn, A100);
+          }
+
+          &.mat-primary:not(.mat-button-disabled) {
+            color: map-get($lux-palette_primary, A100);
+          }
+        }
+      }
+    }
+
+    button:not(.mat-primary):not(.mat-warn):not(.mat-accent):not(.lux-button-rounded) {
+      color: map-get($lux-palette-primary, 500);
+    }
+
+    .lux-header-user {
+      .lux-header-user-short {
+        > span {
+          color: map-get($lux-palette_primary, 500);
+          background-color: map-get($lux-palette-primary, 500);
+        }
+      }
+    }
+  }
+
+  .lux-side-nav-header, .lux-side-nav-footer {
+    color: map-get($lux-palette_primary, A400);
+  }
+
+  .lux-header-side-nav {
+    .lux-side-nav-trigger-active {
+      background-color: $dark-focused;
+    }
+  }
+
+  .lux-side-nav .lux-side-nav-content {
+    lux-button, .lux-menu-item, .lux-action-nav-menu lux-button {
+      color: map-get($lux-palette_primary, 500);
+    }
+  }
+}
+
+lux-app-header {
+  .lux-app-header-title-label {
+    &:focus {
+      @include focus-dark-mixin;
+    }
+
+    &:hover {
+      @include lux-hovered-mixin-green;
+      color: #003366 !important;
+    }
+  }
+
+  & .lux-side-nav-trigger button:not([disabled]) {
+    &:focus {
+      @include focus-dark-mixin;
+    }
+
+    &:hover {
+      background-color: $lux-hover-color !important;
+      color: #003366 !important;
+    }
+
+    &:hover lux-icon {
+      background-color: $lux-hover-color;
+      color: #003366 !important;
+    }
+  }
+
+  & .lux-header-action button:not([disabled]) {
+    &:focus {
+      @include focus-dark-mixin;
+    }
+
+    color: #003366 !important;
+
+    &.mat-accent lux-icon {
+      color: map-get($lux-palette_accent, 500) !important;
+    }
+
+    &.mat-warn lux-icon {
+      color: map-get($lux-palette_warn, 500) !important;
+    }
+
+    &.mat-primary lux-icon {
+      color: map-get($lux-palette_primary, 500) !important;
+    }
+
+    &:hover {
+      color: #003366 !important;
+      background-color: $lux-hover-color !important;
+
+      &.mat-accent lux-icon {
+        color: map-get($lux-palette_accent, 500) !important;
+      }
+
+      &.mat-warn lux-icon {
+        color: map-get($lux-palette_warn, 500) !important;
+      }
+
+      &.mat-primary lux-icon {
+        color: map-get($lux-palette_primary, 500) !important;
+      }
+    }
+  }
+
+  & lux-image:focus {
+    @include focus-dark-mixin;
+  }
+
+  & lux-icon:focus {
+    @include focus-dark-mixin;
+  }
+
+  lux-menu-trigger button.lux-right-nav-trigger {
+    &:focus {
+      @include focus-dark-mixin;
+    }
+
+    &:hover {
+      @include lux-hovered-mixin-green;
+
+      & lux-icon, .lux-header-username {
+        color: #003366 !important;
+      }
+    }
+  }
+}
+
+/*
+ * Theming for LUX-Tile
+ */
+lux-tile {
+
+  .lux-notification-new {
+    background-color: #56bd66;
+  }
+
+  h2 {
+    color: #003366;
+  }
+
+  .lux-highlight {
+    color: #003366;
+  }
+}
+
+lux-tile {
+
+  .lux-highlight:hover {
+    color: #56BD66;
+  }
+
+  mat-card[class~=lux-cursor] {
+
+    box-shadow: 0px 2px 1px -1px rgb(0 51 102 / 60%), 0px 1px 1px 0px rgb(0 51 102 / 50%), 0px 1px 3px 0px rgb(0 51 102 / 40%) !important;
+
+    &:focus {
+      @include focus-dark-mixin;
+    }
+
+    &:hover {
+      background-color: white !important;
+      box-shadow: 0px 2px 1px -1px rgb(46 133 51 / 60%), 0px 1px 1px 0px rgb(46 133 51 / 50%), 0px 1px 3px 0px rgb(46 133 51 / 40%) !important;
+
+      h2 {
+        color: #56BD66;
+      }
+    }
+  }
+}

package/src/green/_luxcommon.scss

@@ -0,0 +1,64 @@
+// Allgemein
+$dark-primary-text: #003366;
+$dark-secondary-text: #003366;
+$dark-disabled-text: #636D76;
+$dark-dividers: rgba(black, 0.20);
+$dark-focused: rgba(black, 0.12);
+
+$light-primary-text: white;
+$light-secondary-text: rgba(white, 0.7);
+$light-disabled-text: rgba(white, 0.5);
+$light-dividers: #E3EBF5;
+$light-focused: rgba(white, 0.12);
+
+// App
+$app-header-bg: #ffffff;
+$app-content-bg: #ffffff;
+$app-footer-bg: #E3EBF5;
+$app-data-bg: #ffffff;
+
+// Form
+$form-border-color: rgba(0, 0, 0, 0.42);
+
+// Fokus
+$outline-color-bright: #ffffff;
+$outline-color-dark: #000000;
+
+// Hover
+$lux-hover-color: #CCEBD1;
+$lux-hover-color-for-dark-background: #e3ebf5;
+
+// Selektion
+$lux-selected-border-color: #2E8533;
+$lux-selected-bg-color: #E3EBF5;
+
+// Hintergrundfarben (z.B. Badge oder Progress)
+$componentBgColors: (
+  "red": #b01211,
+  "green": #3e8320,
+  "purple": #9900B8,
+  "blue": #00569a,
+  "gray": #636D76,
+  "orange": #c75000,
+  "brown": #783f04,
+  "black": black,
+  "white": #ffffff
+);
+
+// Vordergrundfarben (z.B. Badge)
+$componentFontColors: (
+  black: #000000,
+  white: #ffffff
+);
+
+// Farben für einen dunklen Hintergrund (z.B. Snackbar).
+$colorsForDarkBg: (
+  "red": #f17474,
+  "green": #53b12b,
+  "purple": #e561ff,
+  "blue": #729eca,
+  "gray": #c8c8c8,
+  "orange": #ec9c1b,
+  "brown": #eb7c05,
+  "white": #ffffff
+);

package/src/green/_luxpalette.scss

@@ -0,0 +1,106 @@
+/*
+  Dieses Partial-SCSS dient der Verwaltung der Farb-Paletten für die LUX-Components.
+*/
+
+$lux-palette_primary: (
+        50 : #e0e7ed,
+        100 : #b3c2d1,
+        200 : #8099b3,
+        300 : #4d7094,
+        400 : #26527d,
+        500 : #003366,
+        600 : #002e5e,
+        700 : #002753,
+        800 : #002049,
+        900 : #001438,
+        A100 : #6e93ff,
+        A200 : #3b6cff,
+        A400 : #0846ff,
+        A700 : #003bee,
+        contrast: (
+                50 : #000000,
+                100 : #000000,
+                200 : #000000,
+                300 : #ffffff,
+                400 : #ffffff,
+                500 : #ffffff,
+                600 : #ffffff,
+                700 : #ffffff,
+                800 : #ffffff,
+                900 : #ffffff,
+                A100 : #000000,
+                A200 : #ffffff,
+                A400 : #ffffff,
+                A700 : #ffffff,
+        )
+);
+
+$lux-palette_accent: (
+        50 : #ebf7ed,
+        100 : #ccebd1,
+        200 : #abdeb3,
+        300 : #89d194,
+        400 : #6fc77d,
+        500 : #56bd66,
+        600 : #4fb75e,
+        700 : #45ae53,
+        800 : #3ca649,
+        900 : #2b9838,
+        A100 : #dcffe0,
+        A200 : #a9ffb2,
+        A400 : #76ff84,
+        A700 : #5dff6d,
+        contrast: (
+                50 : #000000,
+                100 : #000000,
+                200 : #000000,
+                300 : #000000,
+                400 : #ffffff,
+                500 : #ffffff,
+                600 : #ffffff,
+                700 : #ffffff,
+                800 : #ffffff,
+                900 : #ffffff,
+                A100 : #000000,
+                A200 : #000000,
+                A400 : #000000,
+                A700 : #000000,
+        )
+);
+
+$lux-palette_warn: (
+        50 : #fceaeb,
+        100 : #f9cbce,
+        200 : #f5a8ad,
+        300 : #f0858c,
+        400 : #ed6b73,
+        500 : #ea515a,
+        600 : #e74a52,
+        700 : #e44048,
+        800 : #e1373f,
+        900 : #db272e,
+        A100 : #ffffff,
+        A200 : #ffe5e5,
+        A400 : #ffb2b4,
+        A700 : #ff989b,
+        contrast: (
+                50 : #000000,
+                100 : #000000,
+                200 : #000000,
+                300 : #000000,
+                400 : #000000,
+                500 : #ffffff,
+                600 : #ffffff,
+                700 : #ffffff,
+                800 : #ffffff,
+                900 : #ffffff,
+                A100 : #000000,
+                A200 : #000000,
+                A400 : #000000,
+                A700 : #000000,
+        )
+);
+
+$lux-primary-color: map-get($lux-palette_primary, 500);
+$lux-accent-color: map-get($lux-palette_accent, 500);
+$lux-warn-color: map-get($lux-palette_warn, 500);

package/src/green/luxtheme.scss

@@ -0,0 +1,13 @@
+@import "luxpalette";
+@import "../public/global";
+$outline-width: 1px;
+@import "luxcommon";
+@import "../base/luxcomponents";
+$lux-hover-color: #e3ebf5;
+@import "../base/luxfocus";
+@import "../base/luxstyles";
+@import "../base/luxicons";
+@import "../../node_modules/@angular/material/theming";
+@import "../base/luxtheme";
+@import "custom";
+

package/src/orange/_custom.scss

@@ -0,0 +1,66 @@
+/*
+ * Theming for LUX-Tile
+ */
+lux-tile {
+  .lux-notification-new {
+    background-color: map-get($lux-palette_accent, 500);
+  }
+
+  .lux-highlight {
+    color: map-get($lux-palette_primary, 800);
+  }
+}
+
+/*
+ * Theming for LUX-App-Header
+ */
+lux-app-header {
+  .lux-header-title {
+    color: white;
+  }
+
+  .lux-side-nav-header, .lux-side-nav-footer {
+    color: map-get($lux-palette_primary, 800);
+  }
+}
+
+
+lux-app-header {
+  .lux-app-header {
+
+    .lux-show-border {
+      border-left: 1px solid $light-dividers;
+    }
+
+    .lux-header-title {
+      color: white;
+    }
+
+    div.lux-header-action {
+      lux-button {
+        button {
+
+          &:not(.mat-accent):not(.mat-warn):not(.mat-primary):not(.mat-button-disabled) {
+            color: white;
+          }
+        }
+      }
+    }
+
+    button:not(.mat-primary):not(.mat-warn):not(.mat-accent):not(.lux-button-rounded) {
+      color: white;
+    }
+
+    .lux-header-user {
+      .lux-header-user-short {
+        > span {
+          background-color:white;
+        }
+      }
+    }
+  }
+
+  .lux-side-nav-header, .lux-side-nav-footer {
+    color: map-get($lux-palette_primary, 800);
+  }
+}

package/src/orange/_luxcommon.scss

@@ -0,0 +1,64 @@
+// Allgemein
+$dark-primary-text: rgba(black, 0.87);
+$dark-secondary-text: rgba(black, 0.65);
+$dark-disabled-text: rgba(black, 0.40);
+$dark-dividers: rgba(black, 0.20);
+$dark-focused: rgba(black, 0.12);
+
+$light-primary-text: white;
+$light-secondary-text: rgba(white, 0.7);
+$light-disabled-text: rgba(white, 0.5);
+$light-dividers: rgba(white, 0.20);
+$light-focused: rgba(white, 0.12);
+
+// App
+$app-header-bg: #9b6100;
+$app-content-bg: #f0f0f2;
+$app-footer-bg: #b98b4a;
+$app-data-bg: #ffffff;
+
+// Form
+$form-border-color: rgba(0, 0, 0, 0.42);
+
+// Fokus
+$outline-color-bright: #ffffff;
+$outline-color-dark: #000000;
+
+// Hover
+$lux-hover-color: #f1e4bc;
+$lux-hover-color-for-dark-background: #9b6100;
+
+// Selektion
+$lux-selected-border-color: #b3790b;
+$lux-selected-bg-color: #f1e4bc;
+
+// Hintergrundfarben (z.B. Badge oder Progress)
+$componentBgColors: (
+  "red": #b01211,
+  "green": #3e8320,
+  "purple": #9900B8,
+  "blue": #00569a,
+  "gray": $dark-secondary-text,
+  "orange": #c75000,
+  "brown": #783f04,
+  "black": $dark-primary-text,
+  "white": #ffffff
+);
+
+// Vordergrundfarben (z.B. Badge)
+$componentFontColors: (
+  black: #000000,
+  white: #ffffff
+);
+
+// Farben für einen dunklen Hintergrund (z.B. Snackbar).
+$colorsForDarkBg: (
+  "red": #f17474,
+  "green": #53b12b,
+  "purple": #e561ff,
+  "blue": #729eca,
+  "gray": #c8c8c8,
+  "orange": #ec9c1b,
+  "brown": #eb7c05,
+  "white": #ffffff
+);

package/src/orange/_luxpalette.scss

@@ -0,0 +1,106 @@
+/*
+  Dieses Partial-SCSS dient der Verwaltung der Farb-Paletten für die LUX-Components.
+*/
+
+$lux-palette_primary: (
+        50 : #f9f4e4,
+        100 : #f1e4bc,
+        200 : #e8d290,
+        300 : #dec063,
+        400 : #d7b341,
+        500 : #d0a520,
+        600 : #cb9d1c,
+        700 : #c49318,
+        800 : #be8a13,
+        900 : #b3790b,
+        A100 : #fff3e0,
+        A200 : #ffe0ad,
+        A400 : #ffcc7a,
+        A700 : #ffc260,
+        contrast: (
+                50 : #000000,
+                100 : #000000,
+                200 : #000000,
+                300 : #000000,
+                400 : #000000,
+                500 : #000000,
+                600 : #000000,
+                700 : #000000,
+                800 : #000000,
+                900 : #ffffff,
+                A100 : #000000,
+                A200 : #000000,
+                A400 : #000000,
+                A700 : #000000,
+        )
+);
+
+$lux-palette_accent: (
+        50 : #e8f0f8,
+        100 : #c5daee,
+        200 : #9ec2e3,
+        300 : #77aad7,
+        400 : #5a97cf,
+        500 : #3d85c6,
+        600 : #377dc0,
+        700 : #2f72b9,
+        800 : #2768b1,
+        900 : #1a55a4,
+        A100 : #dae9ff,
+        A200 : #a7caff,
+        A400 : #74abff,
+        A700 : #5b9cff,
+        contrast: (
+                50 : #000000,
+                100 : #000000,
+                200 : #000000,
+                300 : #000000,
+                400 : #000000,
+                500 : #ffffff,
+                600 : #ffffff,
+                700 : #ffffff,
+                800 : #ffffff,
+                900 : #ffffff,
+                A100 : #000000,
+                A200 : #000000,
+                A400 : #000000,
+                A700 : #000000,
+        )
+);
+
+$lux-palette_warn: (
+        50 : #F6E3E2,
+        100 : #e7b8b8,
+        200 : #d88988,
+        300 : #c85958,
+        400 : #bc3635,
+        500 : #b01211,
+        600 : #a9100f,
+        700 : #a00d0c,
+        800 : #970a0a,
+        900 : #870505,
+        A100 : #eccaca,
+        A200 : #ff8181,
+        A400 : #ff4e4e,
+        A700 : #ff3535,
+        contrast: (
+                50 : #000000,
+                100 : #000000,
+                200 : #000000,
+                300 : #ffffff,
+                400 : #ffffff,
+                500 : #ffffff,
+                600 : #ffffff,
+                700 : #ffffff,
+                800 : #ffffff,
+                900 : #ffffff,
+                A100 : #000000,
+                A200 : #000000,
+                A400 : #000000,
+                A700 : #ffffff,
+        )
+);
+
+$lux-primary-color: map-get($lux-palette_primary, 500);
+$lux-accent-color: map-get($lux-palette_accent, 500);
+$lux-warn-color: map-get($lux-palette_warn, 500);

package/src/orange/luxtheme.scss

@@ -0,0 +1,11 @@
+@import "luxpalette";
+@import "../public/global";
+@import "luxcommon";
+@import "../base/luxcomponents";
+@import "../base/luxfocus";
+@import "../base/luxstyles";
+@import "../base/luxicons";
+@import "../../node_modules/@angular/material/theming";
+@import "../base/luxtheme";
+@import "custom";
+

package/src/public/global.scss

@@ -0,0 +1,13 @@
+// Media Queries
+$mat-xsmall: 'max-width: 599px';
+$mat-small: 'max-width: 959px';
+$mat-medium: 'max-width: 1279px';
+$mat-large: 'max-width: 1919px';
+$mat-xlarge: 'max-width: 5000px';
+
+// Font
+$app-font-family: Roboto, Helvetica Neue, sans-serif;
+
+// Fokus
+$outline-width: 2px;
+$outline-style: dotted;