@ihk-gfi/lux-components-theme 21.3.0 → 21.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/README.md +1560 -101
  2. package/package.json +1 -1
  3. package/prebuilt-themes/luxtheme-authentic-min.css +1 -1
  4. package/prebuilt-themes/luxtheme-authentic-min.css.map +1 -1
  5. package/prebuilt-themes/luxtheme-authentic.css +520 -25
  6. package/prebuilt-themes/luxtheme-authentic.css.map +1 -1
  7. package/prebuilt-themes/luxtheme-green-min.css +1 -1
  8. package/prebuilt-themes/luxtheme-green-min.css.map +1 -1
  9. package/prebuilt-themes/luxtheme-green.css +521 -26
  10. package/prebuilt-themes/luxtheme-green.css.map +1 -1
  11. package/src/base-templates/common/_luxstyles.scss +7 -8
  12. package/src/base-templates/common/_luxutilities.scss +343 -0
  13. package/src/base-templates/components/_luxAccordion.scss +22 -3
  14. package/src/base-templates/components/_luxCard.scss +25 -2
  15. package/src/base-templates/components/_luxFormControlWrapper.scss +37 -13
  16. package/src/base-templates/components/_luxList.scss +1 -1
  17. package/src/base-templates/components/_luxMenu.scss +1 -0
  18. package/src/base-templates/components/_luxMessagebox.scss +11 -0
  19. package/src/base-templates/components/_luxPaginator.scss +7 -0
  20. package/src/base-templates/components/_luxSnackbar.scss +1 -0
  21. package/src/base-templates/components/_luxStepper.scss +12 -1
  22. package/src/base-templates/components/_luxTabs.scss +21 -4
  23. package/src/base-templates/components/_luxTenantLogo.scss +27 -0
  24. package/src/base-templates/components/_luxTile.scss +5 -3
  25. package/src/base-templates/components/_luxTimepicker.scss +7 -0
  26. package/src/theme-authentic/_variables.scss +4 -0
  27. package/src/theme-authentic/lux-authentic.scss +4 -0
  28. package/src/theme-green/_variables.scss +5 -1
  29. package/src/theme-green/lux-green.scss +4 -0
package/src/base-templates/components/_luxTabs.scss CHANGED
@@ -21,9 +21,11 @@ lux-tabs {
21
21
  );
22
22
 
23
23
  mat-tab-group:not(.lux-tabs-show-divider) {
24
- @include mat.tabs-overrides((
25
- divider-height: 0,
26
- ));
24
+ @include mat.tabs-overrides(
25
+ (
26
+ divider-height: 0
27
+ )
28
+ );
27
29
  }
28
30
 
29
31
  .mdc-tab {
@@ -59,8 +61,23 @@ lux-tabs {
59
61
  padding-top: 4px;
60
62
  }
61
63
 
64
+ // HINWEIS: Für jeden Wert in LuxBadgeNotificationColor muss hier eine Klasse existieren.
65
+ .lux-notification-color-primary {
66
+ background-color: var(--lux-theme-primary-color);
67
+ }
68
+
69
+ // Deprecated: .lux-notification-new wird in einer zukünftigen Version entfernt. Bitte stattdessen .lux-notification-color-accent verwenden.
70
+ .lux-notification-color-accent,
62
71
  .lux-notification-new {
63
- background-color: var(--lux-theme-custom-green);
72
+ background-color: var(--lux-theme-accent-70);
73
+ }
74
+
75
+ .lux-notification-color-warn {
76
+ background-color: var(--mat-sys-error);
77
+ }
78
+
79
+ .lux-notification-color-default {
80
+ background-color: #605e5e;
64
81
  }
65
82
 
66
83
  .lux-tabs-notification-icon {
package/src/base-templates/components/_luxTenantLogo.scss ADDED
@@ -0,0 +1,27 @@
1
+ @use "../common/luxfocus";
2
+
3
+ lux-tenant-logo {
4
+ .lux-tenant-logo-error-container {
5
+ display: flex;
6
+ flex: 0 1 auto;
7
+
8
+ .lux-tenant-logo-error {
9
+ display: flex;
10
+ flex: 0 1 auto;
11
+ align-items: center;
12
+ padding: 4px;
13
+ color: var(--lux-theme-custom-gray);
14
+ background-color: var(--lux-theme-custom-on-gray);
15
+ font-size: 1rem;
16
+ font-style: italic;
17
+ border: 1px solid var(--lux-theme-app-border-color);
18
+ border-radius: var(--lux-theme-app-border-radius);
19
+ }
20
+ }
21
+
22
+ img:focus-visible,
23
+ .lux-tenant-logo-error:focus-visible {
24
+ @include luxfocus.focus-dark-mixin;
25
+ border-radius: var(--lux-theme-app-border-radius);
26
+ }
27
+ }
package/src/base-templates/components/_luxTile.scss CHANGED
@@ -10,7 +10,7 @@ lux-tile {
10
10
  background-color: var(--lux-theme-accent-70);
11
11
  }
12
12
 
13
- mat-card[class~="lux-cursor"] {
13
+ mat-card[class~="lux-cursor-pointer"] {
14
14
  &.mat-mdc-card {
15
15
  border-radius: var(--lux-theme-tile-border-radius);
16
16
  overflow: hidden !important;
@@ -171,9 +171,11 @@ lux-tile {
171
171
 
172
172
  /** ########## Focus / Hover ########## **/
173
173
 
174
- mat-card[class~="lux-cursor"] {
174
+ mat-card[class~="lux-cursor-pointer"] {
175
175
  &.mat-mdc-card:focus-visible {
176
- box-shadow: 0 0 0 2px #2e8533, 0 0 8px 2px #2e8533 !important;
176
+ box-shadow:
177
+ 0 0 0 2px #2e8533,
178
+ 0 0 8px 2px #2e8533 !important;
177
179
  outline: 0 !important;
178
180
  }
179
181
 
package/src/base-templates/components/_luxTimepicker.scss ADDED
@@ -0,0 +1,7 @@
1
+ @use "@angular/material" as mat;
2
+
3
+ lux-timepicker {
4
+ button:not(:disabled) .lux-timepicker-toggle-icon {
5
+ color: var(--lux-theme-datepicker-icon-color);
6
+ }
7
+ }
package/src/theme-authentic/_variables.scss CHANGED
@@ -50,7 +50,9 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
50
50
 
51
51
  --lux-theme-spacing-xxs: 2px;
52
52
  --lux-theme-spacing-xs: 4px;
53
+ --lux-theme-spacing-1-5: 6px;
53
54
  --lux-theme-spacing-sm: 8px;
55
+ --lux-theme-spacing-3: 12px;
54
56
  --lux-theme-spacing-md: 16px;
55
57
  --lux-theme-spacing-lg: 24px;
56
58
  --lux-theme-spacing-xl: 32px;
@@ -62,6 +64,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
62
64
  --lux-theme-font-size-md: 1rem;
63
65
  --lux-theme-font-size-lg: 1.125rem;
64
66
  --lux-theme-font-size-xl: 1.25rem;
67
+ --lux-theme-font-size-2xl: 1.5rem;
65
68
 
66
69
  // Hauptfarben
67
70
  --lux-theme-primary-color: #{palettes.$lux-primary-color};
@@ -189,6 +192,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
189
192
  --lux-theme-snackbar-white: #ffffff;
190
193
 
191
194
  // Accordion
195
+ --lux-theme-accordion-panel-container-elevation-shadow-width: 1px;
192
196
  --lux-theme-accordion-header-color-neutral: var(--lux-theme-app-content-bg);
193
197
  --lux-theme-accordion-header-color-on-neutral: var(--lux-theme-dark-primary-text);
194
198
  --lux-theme-accordion-header-hover-color-on-neutral: var(--lux-theme-app-content-bg);
package/src/theme-authentic/lux-authentic.scss CHANGED
@@ -9,6 +9,7 @@
9
9
  @use "../base-templates/common/luxstyles";
10
10
  @use "../base-templates/common/luxbreakpoints";
11
11
  @use "../base-templates/common/luxlayout";
12
+ @use "../base-templates/common/luxutilities";
12
13
 
13
14
  @use "../base-templates/components/luxAccordion";
14
15
  @use "../base-templates/components/luxAppContent";
@@ -50,6 +51,7 @@
50
51
  @use "../base-templates/components/luxMasterDetailAc";
51
52
  @use "../base-templates/components/luxMenu";
52
53
  @use "../base-templates/components/luxMessagebox";
54
+ @use "../base-templates/components/luxPaginator";
53
55
  @use "../base-templates/components/luxProgressBar";
54
56
  @use "../base-templates/components/luxProgressSpinner";
55
57
  @use "../base-templates/components/luxRadioButton";
@@ -61,10 +63,12 @@
61
63
  @use "../base-templates/components/luxStepperLarge";
62
64
  @use "../base-templates/components/luxTable";
63
65
  @use "../base-templates/components/luxTabs";
66
+ @use "../base-templates/components/luxTenantLogo";
64
67
  @use "../base-templates/components/luxTextarea";
65
68
  @use "../base-templates/components/luxTextbox";
66
69
  @use "../base-templates/components/luxTile";
67
70
  @use "../base-templates/components/luxTileAc";
71
+ @use "../base-templates/components/luxTimepicker";
68
72
  @use "../base-templates/components/luxToggle";
69
73
  @use "../base-templates/components/luxPopup";
70
74
  @use "../base-templates/components/luxToolTip";
package/src/theme-green/_variables.scss CHANGED
@@ -50,7 +50,9 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
50
50
 
51
51
  --lux-theme-spacing-xxs: 2px;
52
52
  --lux-theme-spacing-xs: 4px;
53
+ --lux-theme-spacing-1-5: 6px;
53
54
  --lux-theme-spacing-sm: 8px;
55
+ --lux-theme-spacing-3: 12px;
54
56
  --lux-theme-spacing-md: 16px;
55
57
  --lux-theme-spacing-lg: 24px;
56
58
  --lux-theme-spacing-xl: 32px;
@@ -62,6 +64,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
62
64
  --lux-theme-font-size-md: 1rem;
63
65
  --lux-theme-font-size-lg: 1.125rem;
64
66
  --lux-theme-font-size-xl: 1.25rem;
67
+ --lux-theme-font-size-2xl: 1.5rem;
65
68
 
66
69
  // Hauptfarben
67
70
  --lux-theme-primary-color: #{palettes.$lux-primary-color};
@@ -136,7 +139,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
136
139
  --lux-theme-app-gradient-reverse: none;
137
140
  --lux-theme-app-border-color: var(--mat-sys-outline-variant);
138
141
  --lux-theme-app-border-radius: 14px;
139
- --lux-theme-state-layer-color: #E3EBF5;
142
+ --lux-theme-state-layer-color: #e3ebf5;
140
143
  --lux-theme-app-state-layer-color: #{map.get(palettes.$lux-palette_primary, 40)};
141
144
  --lux-theme-hover-state-layer-opacity: 0.08;
142
145
  --lux-theme-focus-state-layer-opacity: 0.12;
@@ -190,6 +193,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
190
193
  --lux-theme-snackbar-white: #ffffff;
191
194
 
192
195
  // Accordion
196
+ --lux-theme-accordion-panel-container-elevation-shadow-width: 1px;
193
197
  --lux-theme-accordion-header-color-neutral: var(--lux-theme-app-content-bg);
194
198
  --lux-theme-accordion-header-color-on-neutral: var(--lux-theme-dark-primary-text);
195
199
  --lux-theme-accordion-header-hover-color-on-neutral: var(--lux-theme-app-content-bg);
package/src/theme-green/lux-green.scss CHANGED
@@ -9,6 +9,7 @@
9
9
  @use "../base-templates/common/luxstyles";
10
10
  @use "../base-templates/common/luxbreakpoints";
11
11
  @use "../base-templates/common/luxlayout";
12
+ @use "../base-templates/common/luxutilities";
12
13
 
13
14
  @use "../base-templates/components/luxAccordion";
14
15
  @use "../base-templates/components/luxAppContent";
@@ -49,6 +50,7 @@
49
50
  @use "../base-templates/components/luxMasterDetailAc";
50
51
  @use "../base-templates/components/luxMenu";
51
52
  @use "../base-templates/components/luxMessagebox";
53
+ @use "../base-templates/components/luxPaginator";
52
54
  @use "../base-templates/components/luxProgressBar";
53
55
  @use "../base-templates/components/luxProgressSpinner";
54
56
  @use "../base-templates/components/luxRadioButton";
@@ -60,11 +62,13 @@
60
62
  @use "../base-templates/components/luxStepperLarge";
61
63
  @use "../base-templates/components/luxTable";
62
64
  @use "../base-templates/components/luxTabs";
65
+ @use "../base-templates/components/luxTenantLogo";
63
66
  @use "../base-templates/components/luxTextarea";
64
67
  @use "../base-templates/components/luxTextbox";
65
68
  @use "../base-templates/components/luxTile";
66
69
  @use "../base-templates/components/luxTileAc";
67
70
  @use "../base-templates/components/luxToggle";
71
+ @use "../base-templates/components/luxTimepicker";
68
72
  @use "../base-templates/components/luxPopup";
69
73
  @use "../base-templates/components/luxToolTip";
70
74
  @use "../base-templates/components/luxTourHint";