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

package/src/green/_luxcommon.scss

@@ -16,6 +16,11 @@ $app-header-bg: #ffffff;
 $app-content-bg: #ffffff;
 $app-footer-bg: #E3EBF5;
 $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);
+$app-headline-font: Korb, Roboto, Helvetica Neue, sans-serif;
+$app-font-family: Roboto, Helvetica Neue, sans-serif;
 
 // Form
 $form-border-color: rgba(0, 0, 0, 0.42);
@@ -24,17 +29,26 @@ $form-control-height: 24px;
 $form-control-height-small: 18px;
 $form-control-font-size: 15px;
 $form-control-font-size-small: 12px;
+$form-control-label-padding: 2px 0 4px 0;
+$form-control-container-padding: 10px 5px 10px 5px;
+$form-control-misc-margin: 4px 0 2px 0;
+$form-control-complete-height: 84px;
+$form-control-buffer: 6px;
+$form-control-margin: 0px;
 
 // Button
 $button-height: 45px;
+$button-font-size: 22px;
 $button-fav-height: 45px;
 
 // Fokus
+$outline-width: 1px;
+$outline-style: dotted;
 $outline-color-bright: #ffffff;
 $outline-color-dark: #000000;
 
 // Hover
-$lux-hover-color: #CCEBD1;
+$lux-hover-color: #e3ebf5;
 $lux-hover-color-for-dark-background: #e3ebf5;
 
 // Selektion
@@ -54,15 +68,18 @@ $lux-stepper-large-nav-item-completed-bg: #2E8533;
 
 // Hintergrundfarben (z.B. Badge oder Progress)
 $componentBgColors: (
-  "red": #b01211,
-  "green": #3e8320,
+  "red": #db272e,
+  "green": #56bd66,
   "purple": #9900B8,
-  "blue": #00569a,
+  "blue": #003366,
   "gray": #636D76,
   "orange": #c75000,
   "brown": #783f04,
   "black": black,
-  "white": #ffffff
+  "white": #ffffff,
+  "yellow": rgba(244, 203, 37, 1),
+  "pink": #ea515a,
+  "lightblue":  rgba(63, 155, 218, 1)
 );
 
 // Vordergrundfarben (z.B. Badge)

package/src/green/_luxpalette.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 /*
   Dieses Partial-SCSS dient der Verwaltung der Farb-Paletten für die LUX-Components.
 */
@@ -101,6 +102,6 @@ $lux-palette_warn: (
         )
 );
 
-$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);
+$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

@@ -1,12 +1,103 @@
-@import "luxpalette";
-@import "../public/global";
-$app-font-family: "Source Sans Pro", "Helvetica", "Arial", "sans-serif";
-$outline-width: 1px;
-@import "luxcommon";
-@import "../base/luxcomponents";
-$lux-hover-color: #e3ebf5;
-@import "../base/luxfocus";
-@import "../base/luxstyles";
-@import "../../node_modules/@angular/material/theming";
-@import "../base/luxtheme";
-@import "custom";
+@use "../public/global" with (
+    $app-font-family: ("Source Sans Pro", Helvetica, Arial, sans-serif)
+);
+
+@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 "../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,
+
+    // 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/public/global.scss

@@ -1,13 +1,9 @@
 // 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';
+$mat-xsmall: 'max-width: 599px' !default;
+$mat-small: 'max-width: 959px' !default;
+$mat-medium: 'max-width: 1279px' !default;
+$mat-large: 'max-width: 1919px' !default;
+$mat-xlarge: 'max-width: 5000px' !default;
 
 // Font
-$app-font-family: Roboto, Helvetica Neue, sans-serif;
-
-// Fokus
-$outline-width: 2px;
-$outline-style: dotted;
+$app-font-family: Roboto, Helvetica Neue, sans-serif !default;

package/CHANGELOG.md

@@ -1,84 +0,0 @@
-# Version 11.13.0
-## New
-- **chips**: Vorschlagsliste soll so breit wie die Chips-Komponente sein. [Issue 20](https://github.com/IHK-GfI/lux-components-theme/issues/20)
-- **stepper-large**: Farben und Hover-Effekte ändern. [Issue 22](https://github.com/IHK-GfI/lux-components-theme/issues/22)
-
-## New - Theme "green"
-- **select**: Schriftfarbe anpasse. [Issue 21](https://github.com/IHK-GfI/lux-components-theme/issues/21)
-
-# Version 11.12.0
-- **file-upload**: Styles für die neue Dateiupload-Komponente (lux-file-upload) entwickeln. [Issue 19](https://github.com/IHK-GfI/lux-components-theme/issues/19)
-
-# Version 11.11.0
-- **allgemein**: Die Font Awesome- und Material-Icons sollen nicht über die Server von Google und Font Awesome direkt importiert werden. [Issue 17](https://github.com/IHK-GfI/lux-components-theme/issues/17)
-- **stepper-large**: lux-stepper-larger - Der Inhaltscontainer soll sich automatisch der Größe seines Containers anpassen. [Issue 18](https://github.com/IHK-GfI/lux-components-theme/issues/18)
-
-# Version 11.10.0
-## New - Theme "green"
-- **stepper-large**: Styles für den neuen Stepper (lux-stepper-large) entwickeln. [Issue 16](https://github.com/IHK-GfI/lux-components-theme/issues/16)
-
-# Version 11.9.0
-- **allgemein**: Die folgenden neuen CSS-Klassen wurden eingeführt: [Issue 15](https://github.com/IHK-GfI/lux-components-theme/issues/15)
-  - lux-display-none-important
-  - lux-hidden-important
- 
-# Version 11.8.0
-## New - Theme "green"
-- **tabs**: Die Schrift der Tablabels soll auf die Schrift "Korb (700) 22px" umgestellt werden. [Issue 14](https://github.com/IHK-GfI/lux-components-theme/issues/14)
-- **tabs**: Die Hover- und Active-Farbe soll auf den Wert "E3EBF5" eingestellt werden. [Issue 14](https://github.com/IHK-GfI/lux-components-theme/issues/14)
-
-# Version 11.7.1
-## Bug Fixes - Theme "green"
-- **checkbox**: Deaktivierte Checkbox wird nicht angezeigt. [Issue 13](https://github.com/IHK-GfI/lux-components-theme/issues/13)
-
-# Version 11.7.0
-## New
-- **allgemein**: Die folgenden neuen CSS-Variablen wurden eingeführt: [Issue 12](https://github.com/IHK-GfI/lux-components-theme/issues/12)
- - `--lux-theme-form-control-default-height-not-scalable` 
- - `--lux-theme-form-control-height`
- - `--lux-theme-form-control-height-small`
- - `--lux-theme-form-control-font-size`
- - `--lux-theme-form-control-font-size-small`
-
-## New - Theme "green"
-- **checkbox**: Checkboxen abgerundet darstellen. [Issue 12](https://github.com/IHK-GfI/lux-components-theme/issues/12)
-- **radio**: Aktivierte Radio-Buttons mit Haken-Icon darstellen. [Issue 12](https://github.com/IHK-GfI/lux-components-theme/issues/12)
-- **form-fields**: Eingabefelder mit abgerundetem Rahmen und Label darstellen. [Issue 12](https://github.com/IHK-GfI/lux-components-theme/issues/12)
-- **table**: Die Zeilenhintergrundfarbe alternierend in Weiß und Hellgrau darstellen. [Issue 12](https://github.com/IHK-GfI/lux-components-theme/issues/12)
-- **table**: Den Tabellenheader in Grün darstellen. [Issue 12](https://github.com/IHK-GfI/lux-components-theme/issues/12)
-- **datepicker**: Überschriften (Wochentage) mit zwei Buchstaben darstellen. [Issue 12](https://github.com/IHK-GfI/lux-components-theme/issues/12)
-- **datepicker**: Tagehintergrund in hellblauen Kästchen. [Issue 12](https://github.com/IHK-GfI/lux-components-theme/issues/12)
-- **datepicker**: Selektierter Tag als dunkelblaues Kästchen. [Issue 12](https://github.com/IHK-GfI/lux-components-theme/issues/12)
-- **datepicker**: Monatsname unterhalb der Tagesspaltenköpfe soll entfallen (falls möglich). [Issue 12](https://github.com/IHK-GfI/lux-components-theme/issues/12)
-
-# Version 11.6.1
-## Bug Fixes
-- **table**: Falsche Fokusdarstellung bei den Tabellenzellen (td-Tags) [Issue 11](https://github.com/IHK-GfI/lux-components-theme/issues/11)
-
-# Version 11.6.0
-## New
-- **badge-notification**: Accent-Farbe noch ans Theme anpassen [Issue 7](https://github.com/IHK-GfI/lux-components-theme/issues/7)
-- **allgemein**: Themefarben auch als Css-Variablen zur Verfügung stellen [Issue 8](https://github.com/IHK-GfI/lux-components-theme/issues/8)
-
-# Version 11.5.0
-## New
-- **green**: Die Buttons und Schriften im Theme "green" überarbeiten. [Issue 6](https://github.com/IHK-GfI/lux-components-theme/issues/6)
-
-## Bug Fixes
-- **button**: Unterschiedliche Buttonhöhen (mit/ohne Icons) korrigieren [Issue 5](https://github.com/IHK-GfI/lux-components-theme/issues/5)
-
-# Version 11.4.0
-## New
-- **lux-datetimepicker**: Styles für den neuen Datetimepicker inklusive Uhrzeit bereitstellen. [Issue 4](https://github.com/IHK-GfI/lux-components/issues/4)
-
-# Version 11.3.0
-## New
-- **green**: Theme "green" vollständig überarbeiten. [Issue 3](https://github.com/IHK-GfI/lux-components-theme/issues/3)
-
-# Version 11.2.1
-## Bug Fixes
-- **tab-notification**: "Tab Notification"-Icons haben fälschlicherweise einen roten Rand. [Issue 2](https://github.com/IHK-GfI/lux-components-theme/issues/2)
-
-# Version 11.2.0
-## New
-- **tooltip**: Schriftgröße erhöhen. [Issue 1](https://github.com/IHK-GfI/lux-components-theme/issues/1)