@ihk-gfi/lux-components-theme 13.0.0 → 14.0.0

package/src/authentic/_luxcommon.scss

@@ -0,0 +1,128 @@
+@use "sass:map";
+@use "luxpalette";
+
+$app-font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
+$app-headline-font: "Blogger Sans";
+
+body {
+  color: map.get(luxpalette.$lux-palette_primary , 500);
+  font-family: $app-font-family;
+}
+
+p, div {
+  font-family: $app-font-family;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $app-font-family;
+  color: rgba(black, 0.87);
+  font-weight: normal;
+}
+
+.cdk-overlay-pane {
+  font-family: $app-font-family;
+  .mat-menu-item {
+    font-family: $app-font-family;
+  }
+}
+
+// Allgemein
+$dark-primary-text: rgba(black, 0.87);
+$dark-secondary-text: rgba(black, 0.6);
+$dark-disabled-text: rgba(black, 0.38);
+$dark-dividers: rgba(black, 0.12);
+$dark-focused: rgba(black, 0.12);
+
+
+$light-primary-text: white;
+$light-secondary-text: rgba(white, 0.74);
+$light-disabled-text: rgba(white, 0.38);
+$light-dividers: rgba(white, 0.20);
+$light-focused: rgba(white, 0.12);
+
+// App
+$app-header-bg: map.get(luxpalette.$lux-palette_primary, 50);
+$app-content-bg: #ffffff;
+$app-footer-bg: map.get(luxpalette.$lux-palette_primary, 50);
+$app-data-bg: #ffffff;
+$app-gradient: linear-gradient(90deg, #ffffff 0%, #f8fbff 100%);
+$app-gradient-reverse: linear-gradient(270deg, #ffffff 0%, #f8fbff 100%);
+$app-border-color: rgba(black, 0.12);
+
+// Form
+$form-border-color: rgba(0, 0, 0, 0.12);
+$form-control-default-height-not-scalable: 30px;
+$form-control-height: 24px;
+$form-control-height-small: 18px; 
+$form-control-font-size: 16px;
+$form-control-font-size-small: 12px;
+$form-control-label-padding: 2px 0 0 0;
+$form-control-container-padding: 6px 0 0 0;
+$form-control-misc-margin: 4px 0 2px 0;
+$form-control-complete-height: 70px;
+$form-control-buffer: 4px;
+$form-control-margin: 0px;
+
+// Button
+$button-height: 36px;
+$button-font-size: 14px;
+$button-fav-height: 36px;
+
+// Fokus
+$outline-color-bright: #ffffff;
+$outline-color-dark: map.get(luxpalette.$lux-palette-primary, A200);
+$outline-width: 4px;
+$outline-style: solid;
+
+// Hover
+$lux-hover-color: map.get(luxpalette.$lux-palette-primary, 300);
+$lux-hover-color-for-dark-background: #335c85;
+
+// Selektion
+$lux-selected-border-color: luxpalette.$lux-primary-color;
+$lux-selected-bg-color: #f0f3f6;
+
+// Stepper (large)
+$lux-stepper-large-backdrop-bg: #636d76;
+$lux-stepper-large-completed-fc: #56bd66;
+
+$lux-stepper-large-nav-item-active-fc: #ffffff;
+$lux-stepper-large-nav-item-active-bg: #003366;
+$lux-stepper-large-nav-item-disabled-fg: #003366;
+$lux-stepper-large-nav-item-disabled-bg: #eff3f6;
+$lux-stepper-large-nav-item-completed-fg: #56bd66;
+$lux-stepper-large-nav-item-completed-bg: #ffffff;
+
+// Hintergrundfarben (z.B. Badge oder Progress)
+$componentBgColors: (
+  "red": luxpalette.$lux-warn-color,
+  "green": luxpalette.$lux-accent-color,
+  "purple": #9900B8,
+  "blue": luxpalette.$lux-primary-color,
+  "gray": #666666,
+  "orange": rgba(237, 110, 17, 1),
+  "brown": #783f04,
+  "black": $dark-primary-text,
+  "white": #ffffff,
+  "yellow": rgba(244, 203, 37, 1),
+  "pink": rgba(237, 95, 122, 1),
+  "lightblue":  rgba(63, 155, 218, 1), 
+);
+
+// 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/authentic/_luxpalette.scss

@@ -0,0 +1,106 @@
+@use "sass:map";
+/*
+  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 : #002d5d,
+  700 : #002753,
+  800 : #002049,
+  900 : #001438,
+  A100 : rgba(24, 186, 255, 1),
+  A200 : rgba(0, 152, 218, 1),
+  A400 : rgba(0, 134, 192, 1),
+  A700 : rgba(0, 124, 177, 1),
+  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_accent: (
+  50 : #ebf7ed,
+  100 : #ccebd1,
+  200 : #abdeb3,
+  300 : #89d194,
+  400 : #6fc77d,
+  500 : #56bd66,
+  600 : #4fb75e,
+  700 : #45ae53,
+  800 : #3ca649,
+  900 : #2b9838,
+  A100 : rgba(184, 255, 179, 1),
+  A200 : rgba(126, 255, 117, 1),
+  A400 : rgba(102, 255, 92, 1),
+  A700 : rgba(88, 255, 77, 1),
+  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 : #000000,
+  )
+);
+
+$lux-palette_warn: (
+  50 : #ffcacf,
+  100 : #f59594,
+  200 : #ed6b6a,
+  300 : #f64543,
+  400 : #fb2f24,
+  500 : #ec2125,
+  600 : #da101f,
+  700 : #ce0017,
+  800 : #c00007,
+  900 : #bf0006,
+  A100 : rgba(237, 95, 122, 1),
+  A200 : rgba(63, 155, 218, 1),
+  A400 : rgba(244, 203, 37, 1),
+  A700 : rgba(237, 110, 17, 1),
+  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/authentic/luxtheme.scss

@@ -0,0 +1,103 @@
+@use "luxpalette" as themePalette;
+@use "../base/luxpalette" with (
+    // Farbpaletten    
+    $lux-palette_primary: themePalette.$lux-palette_primary,
+    $lux-palette_accent: themePalette.$lux-palette_accent,
+    $lux-palette_warn: themePalette.$lux-palette_warn,
+
+    // Hauptfarben
+    $lux-primary-color: themePalette.$lux-primary-color,
+    $lux-accent-color:themePalette.$lux-accent-color,
+    $lux-warn-color: themePalette.$lux-warn-color
+);
+
+@use "luxcommon" as themeCommon;
+
+@use "../public/global";
+
+@use "../base/luxcommon" with ( 
+    // Allgemein
+    $dark-primary-text: themeCommon.$dark-primary-text,
+    $dark-secondary-text: themeCommon.$dark-secondary-text,
+    $dark-disabled-text: themeCommon.$dark-disabled-text,
+    $dark-dividers: themeCommon.$dark-dividers,
+    $dark-focused: themeCommon.$dark-focused,
+
+    $light-primary-text: themeCommon.$light-primary-text,
+    $light-secondary-text: themeCommon.$light-secondary-text,
+    $light-disabled-text: themeCommon.$light-disabled-text,
+    $light-dividers: themeCommon.$light-dividers,
+    $light-focused: themeCommon.$light-focused,
+
+    // App
+    $app-header-bg: themeCommon.$app-header-bg,
+    $app-content-bg: themeCommon.$app-content-bg,
+    $app-footer-bg: themeCommon.$app-footer-bg,
+    $app-data-bg: themeCommon.$app-data-bg,
+    $app-gradient: themeCommon.$app-gradient,
+    $app-gradient-reverse: themeCommon.$app-gradient-reverse,
+    $app-border-color: themeCommon.$app-border-color,
+    $app-headline-font: themeCommon.$app-headline-font,
+    $app-font-family: themeCommon.$app-font-family,
+
+    // Form
+    $form-border-color: themeCommon.$form-border-color,
+    $form-control-default-height-not-scalable: themeCommon.$form-control-default-height-not-scalable,
+    $form-control-height: themeCommon.$form-control-height,
+    $form-control-height-small: themeCommon.$form-control-height-small,
+    $form-control-font-size: themeCommon.$form-control-font-size,
+    $form-control-font-size-small: themeCommon.$form-control-font-size-small,
+    $form-control-label-padding: themeCommon.$form-control-label-padding,
+    $form-control-container-padding: themeCommon.$form-control-container-padding,
+    $form-control-misc-margin: themeCommon.$form-control-misc-margin,
+    $form-control-complete-height: themeCommon.$form-control-complete-height,
+    $form-control-buffer: themeCommon.$form-control-buffer,
+    $form-control-margin: themeCommon.$form-control-margin,
+
+    // Button
+    $button-height: themeCommon.$button-height,
+    $button-fav-height: themeCommon.$button-fav-height,
+    $button-font-size: themeCommon.$button-font-size,
+
+    // Fokus
+    $outline-width: themeCommon.$outline-width,
+    $outline-style: themeCommon.$outline-style,
+    $outline-color-bright: themeCommon.$outline-color-bright,
+    $outline-color-dark: themeCommon.$outline-color-dark,
+
+    // Hover
+    $lux-hover-color: themeCommon.$lux-hover-color,
+    $lux-hover-color-for-dark-background: themeCommon.$lux-hover-color-for-dark-background,
+
+    // Selektion
+    $lux-selected-border-color: themeCommon.$lux-selected-border-color,
+    $lux-selected-bg-color: themeCommon.$lux-selected-bg-color,
+
+    // Stepper (large)
+    $lux-stepper-large-backdrop-bg: themeCommon.$lux-stepper-large-backdrop-bg,
+    $lux-stepper-large-completed-fc: themeCommon.$lux-stepper-large-completed-fc,
+
+    $lux-stepper-large-nav-item-active-fc: themeCommon.$lux-stepper-large-nav-item-active-fc,
+    $lux-stepper-large-nav-item-active-bg: themeCommon.$lux-stepper-large-nav-item-active-bg,
+    $lux-stepper-large-nav-item-disabled-fg: themeCommon.$lux-stepper-large-nav-item-disabled-fg,
+    $lux-stepper-large-nav-item-disabled-bg: themeCommon.$lux-stepper-large-nav-item-disabled-bg,
+    $lux-stepper-large-nav-item-completed-fg: themeCommon.$lux-stepper-large-nav-item-completed-fg,
+    $lux-stepper-large-nav-item-completed-bg: themeCommon.$lux-stepper-large-nav-item-completed-bg,
+
+    // Hintergrundfarben (z.B. Badge oder Progress)
+    $componentBgColors: themeCommon.$componentBgColors,
+
+    // Vordergrundfarben (z.B. Badge)
+    $componentFontColors: themeCommon.$componentFontColors,
+
+    // Farben für einen dunklen Hintergrund (z.B. Snackbar).
+    $colorsForDarkBg: themeCommon.$colorsForDarkBg
+);
+
+@use "../base/luxelevations";
+@use "../base/luxcomponents";
+@use "../base/luxfocus";
+@use "../base/luxstyles";
+@use "../base/luxtheme";
+
+@use "custom";

package/src/base/_luxcommon.scss

@@ -0,0 +1,98 @@
+// Allgemein
+$dark-primary-text: mustOverriden !default;
+$dark-secondary-text: mustOverriden !default;
+$dark-disabled-text: mustOverriden !default;
+$dark-dividers: mustOverriden !default;
+$dark-focused: mustOverriden !default;
+
+$light-primary-text: mustOverriden !default;
+$light-secondary-text: mustOverriden !default;
+$light-disabled-text: mustOverriden !default;
+$light-dividers: mustOverriden !default;
+$light-focused: mustOverriden !default;
+
+// App
+$app-header-bg: mustOverriden !default;
+$app-content-bg: mustOverriden !default;
+$app-footer-bg: mustOverriden !default;
+$app-data-bg: mustOverriden !default;
+$app-gradient: mustOverriden !default;
+$app-gradient-reverse: mustOverriden !default;
+$app-border-color: mustOverriden !default;
+$app-headline-font: mustOverriden !default;
+$app-font-family: mustOverriden !default;
+
+// Form
+$form-border-color: mustOverriden !default;
+$form-control-default-height-not-scalable: mustOverriden !default;
+$form-control-height: mustOverriden !default;
+$form-control-height-small: mustOverriden !default;
+$form-control-font-size: mustOverriden !default;
+$form-control-font-size-small: mustOverriden !default;
+$form-control-label-padding: mustOverriden !default;
+$form-control-container-padding: mustOverriden !default;
+$form-control-misc-margin: mustOverriden !default;
+$form-control-complete-height: mustOverriden !default;
+$form-control-buffer: mustOverriden !default;
+$form-control-margin: mustOverriden !default;
+
+// Button
+$button-height: mustOverriden !default;
+$button-fav-height: mustOverriden !default;
+$button-font-size: mustOverriden !default;
+
+// Fokus
+$outline-width: mustOverriden !default;
+$outline-style: mustOverriden !default;
+$outline-color-bright: mustOverriden !default;
+$outline-color-dark: mustOverriden !default;
+
+// Hover
+$lux-hover-color: mustOverriden !default;
+$lux-hover-color-for-dark-background: mustOverriden !default;
+
+// Selektion
+$lux-selected-border-color: mustOverriden !default;
+$lux-selected-bg-color: mustOverriden !default;
+
+// Stepper (large)
+$lux-stepper-large-backdrop-bg: mustOverriden !default;
+$lux-stepper-large-completed-fc: mustOverriden !default;
+
+$lux-stepper-large-nav-item-active-fc: mustOverriden !default;
+$lux-stepper-large-nav-item-active-bg: mustOverriden !default;
+$lux-stepper-large-nav-item-disabled-fg: mustOverriden !default;
+$lux-stepper-large-nav-item-disabled-bg: mustOverriden !default;
+$lux-stepper-large-nav-item-completed-fg: mustOverriden !default;
+$lux-stepper-large-nav-item-completed-bg: mustOverriden !default;
+
+// Hintergrundfarben (z.B. Badge oder Progress)
+$componentBgColors: (
+  "red": mustOverriden,
+  "green": mustOverriden,
+  "purple": mustOverriden,
+  "blue": mustOverriden,
+  "gray": mustOverriden,
+  "orange": mustOverriden,
+  "brown": mustOverriden,
+  "black": mustOverriden,
+  "white": mustOverriden
+) !default;
+
+// Vordergrundfarben (z.B. Badge)
+$componentFontColors: (
+  black: mustOverriden,
+  white: mustOverriden
+) !default;
+
+// Farben für einen dunklen Hintergrund (z.B. Snackbar).
+$colorsForDarkBg: (
+  "red": mustOverriden,
+  "green": mustOverriden,
+  "purple": mustOverriden,
+  "blue": mustOverriden,
+  "gray": mustOverriden,
+  "orange": mustOverriden,
+  "brown": mustOverriden,
+  "white": mustOverriden
+) !default;