@ihk-gfi/lux-components-theme 21.6.0 → 21.7.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 (13) hide show
  1. package/package.json +1 -1
  2. package/prebuilt-themes/luxtheme-authentic-min.css +1 -1
  3. package/prebuilt-themes/luxtheme-authentic-min.css.map +1 -1
  4. package/prebuilt-themes/luxtheme-authentic.css +137 -0
  5. package/prebuilt-themes/luxtheme-authentic.css.map +1 -1
  6. package/prebuilt-themes/luxtheme-green-min.css +1 -1
  7. package/prebuilt-themes/luxtheme-green-min.css.map +1 -1
  8. package/prebuilt-themes/luxtheme-green.css +137 -0
  9. package/prebuilt-themes/luxtheme-green.css.map +1 -1
  10. package/src/base-templates/components/_luxBadge.scss +32 -0
  11. package/src/base-templates/components/_luxMenu.scss +32 -0
  12. package/src/theme-authentic/_variables.scss +32 -0
  13. package/src/theme-green/_variables.scss +32 -0
package/src/base-templates/components/_luxBadge.scss CHANGED
@@ -11,6 +11,18 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "yell
11
11
  }
12
12
  }
13
13
 
14
+ @mixin lux-badge-muted-color-mixin($prefix) {
15
+ @each $colorName in $componentColorNames {
16
+ &.lux-badge-#{$colorName} {
17
+ background-color: var(#{$prefix}-#{$colorName});
18
+ box-shadow: inset 0 0 0 1px var(#{$prefix}-stroke-#{$colorName});
19
+ }
20
+ &.lux-badge-on-#{$colorName} {
21
+ color: var(#{$prefix}-on-#{$colorName});
22
+ }
23
+ }
24
+ }
25
+
14
26
  .lux-badge {
15
27
  border-radius: 8px;
16
28
  display: inline-flex;
@@ -18,6 +30,22 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "yell
18
30
  flex: initial;
19
31
 
20
32
  @include lux-badge-color-mixin("--lux-theme-badge");
33
+
34
+ &.lux-badge-muted {
35
+ @include lux-badge-muted-color-mixin("--lux-theme-badge-muted");
36
+ }
37
+
38
+ &.lux-badge-size-small {
39
+ font-size: 0.75rem;
40
+ }
41
+
42
+ &.lux-badge-size-medium {
43
+ font-size: 1rem;
44
+ }
45
+
46
+ &.lux-badge-size-large {
47
+ font-size: 1.25rem;
48
+ }
21
49
  }
22
50
 
23
51
  .lux-badge.lux-badge-uppercase * {
@@ -36,5 +64,9 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "yell
36
64
  font-style: normal;
37
65
  font-weight: 600;
38
66
  line-height: normal;
67
+
68
+ &.lux-badge-size-small {
69
+ font-size: 1rem;
70
+ }
39
71
  }
40
72
  }
package/src/base-templates/components/_luxMenu.scss CHANGED
@@ -69,6 +69,18 @@ lux-menu {
69
69
  }
70
70
 
71
71
  /* Menu-Overlay-Panel anpassen */
72
+ .lux-menu-panel:not(.lux-menu-section-panel) {
73
+ .lux-menu-item-color-warn:not([disabled]) {
74
+ --mat-menu-item-label-text-color: var(--lux-theme-button-text-warn-text-color);
75
+ --mat-menu-item-icon-color: var(--lux-theme-button-text-warn-text-color);
76
+ }
77
+
78
+ .lux-menu-item-color-accent:not([disabled]) {
79
+ --mat-menu-item-label-text-color: var(--lux-theme-button-text-accent-text-color);
80
+ --mat-menu-item-icon-color: var(--lux-theme-button-text-accent-text-color);
81
+ }
82
+ }
83
+
72
84
  .lux-menu-panel {
73
85
  @include mat.menu-overrides(
74
86
  (
@@ -261,6 +273,26 @@ lux-menu {
261
273
  padding: 4px;
262
274
  }
263
275
 
276
+ .lux-menu-item-color-warn:not([disabled]) {
277
+ --mat-menu-item-icon-color: var(--lux-theme-button-text-warn-text-color);
278
+ --mat-menu-item-label-text-color: var(--lux-theme-button-text-warn-text-color);
279
+
280
+ .lux-button-label,
281
+ .lux-button-label-subtitle {
282
+ color: var(--lux-theme-button-text-warn-text-color);
283
+ }
284
+ }
285
+
286
+ .lux-menu-item-color-accent:not([disabled]) {
287
+ --mat-menu-item-icon-color: var(--lux-theme-button-text-accent-text-color);
288
+ --mat-menu-item-label-text-color: var(--lux-theme-button-text-accent-text-color);
289
+
290
+ .lux-button-label,
291
+ .lux-button-label-subtitle {
292
+ color: var(--lux-theme-button-text-accent-text-color);
293
+ }
294
+ }
295
+
264
296
  .lux-menu-item-selected {
265
297
  background-color: var(--lux-theme-primary-90) !important;
266
298
  text-decoration-line: underline;
package/src/theme-authentic/_variables.scss CHANGED
@@ -234,6 +234,38 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
234
234
  --lux-theme-badge-lightblue: var(--lux-theme-custom-lightblue);
235
235
  --lux-theme-badge-on-lightblue: var(--lux-theme-custom-on-lightblue);
236
236
 
237
+ // LUX-Badge Muted
238
+ --lux-theme-badge-muted-red: #ffedea;
239
+ --lux-theme-badge-muted-on-red: #93000c;
240
+ --lux-theme-badge-muted-stroke-red: #ffb4ab;
241
+ --lux-theme-badge-muted-green: #ebffe6;
242
+ --lux-theme-badge-muted-on-green: #00531d;
243
+ --lux-theme-badge-muted-stroke-green: #75dc81;
244
+ --lux-theme-badge-muted-purple: #f4eeff;
245
+ --lux-theme-badge-muted-on-purple: #4a3597;
246
+ --lux-theme-badge-muted-stroke-purple: #d2bbff;
247
+ --lux-theme-badge-muted-blue: #ffffff;
248
+ --lux-theme-badge-muted-on-blue: #003366;
249
+ --lux-theme-badge-muted-stroke-blue: #003366;
250
+ --lux-theme-badge-muted-gray: #f4f0ef;
251
+ --lux-theme-badge-muted-on-gray: #484646;
252
+ --lux-theme-badge-muted-stroke-gray: #c9c6c5;
253
+ --lux-theme-badge-muted-orange: #ffede4;
254
+ --lux-theme-badge-muted-on-orange: #793100;
255
+ --lux-theme-badge-muted-stroke-orange: #793100;
256
+ --lux-theme-badge-muted-black: #ffffff;
257
+ --lux-theme-badge-muted-on-black: #1c1b1b;
258
+ --lux-theme-badge-muted-stroke-black: #605e5e;
259
+ --lux-theme-badge-muted-yellow: #ffefd3;
260
+ --lux-theme-badge-muted-on-yellow: #5a4400;
261
+ --lux-theme-badge-muted-stroke-yellow: #f5bf00;
262
+ --lux-theme-badge-muted-pink: #ffecf2;
263
+ --lux-theme-badge-muted-on-pink: #8e0051;
264
+ --lux-theme-badge-muted-stroke-pink: #ffb0ce;
265
+ --lux-theme-badge-muted-lightblue: #e6f2ff;
266
+ --lux-theme-badge-muted-on-lightblue: #003366;
267
+ --lux-theme-badge-muted-stroke-lightblue: #91cdff;
268
+
237
269
  // LUX-Breadcrumb
238
270
  --lux-theme-breadcrumb-hover-color: var(--lux-theme-link-plain-hover-color);
239
271
 
package/src/theme-green/_variables.scss CHANGED
@@ -235,6 +235,38 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
235
235
  --lux-theme-badge-lightblue: var(--lux-theme-custom-lightblue);
236
236
  --lux-theme-badge-on-lightblue: var(--lux-theme-custom-on-lightblue);
237
237
 
238
+ // LUX-Badge Muted
239
+ --lux-theme-badge-muted-red: #ffedea;
240
+ --lux-theme-badge-muted-on-red: #93000c;
241
+ --lux-theme-badge-muted-stroke-red: #ffb4ab;
242
+ --lux-theme-badge-muted-green: #ebffe6;
243
+ --lux-theme-badge-muted-on-green: #00531d;
244
+ --lux-theme-badge-muted-stroke-green: #75dc81;
245
+ --lux-theme-badge-muted-purple: #f4eeff;
246
+ --lux-theme-badge-muted-on-purple: #4a3597;
247
+ --lux-theme-badge-muted-stroke-purple: #d2bbff;
248
+ --lux-theme-badge-muted-blue: #ffffff;
249
+ --lux-theme-badge-muted-on-blue: #003366;
250
+ --lux-theme-badge-muted-stroke-blue: #003366;
251
+ --lux-theme-badge-muted-gray: #f4f0ef;
252
+ --lux-theme-badge-muted-on-gray: #484646;
253
+ --lux-theme-badge-muted-stroke-gray: #c9c6c5;
254
+ --lux-theme-badge-muted-orange: #ffede4;
255
+ --lux-theme-badge-muted-on-orange: #793100;
256
+ --lux-theme-badge-muted-stroke-orange: #793100;
257
+ --lux-theme-badge-muted-black: #ffffff;
258
+ --lux-theme-badge-muted-on-black: #1c1b1b;
259
+ --lux-theme-badge-muted-stroke-black: #605e5e;
260
+ --lux-theme-badge-muted-yellow: #ffefd3;
261
+ --lux-theme-badge-muted-on-yellow: #5a4400;
262
+ --lux-theme-badge-muted-stroke-yellow: #f5bf00;
263
+ --lux-theme-badge-muted-pink: #ffecf2;
264
+ --lux-theme-badge-muted-on-pink: #8e0051;
265
+ --lux-theme-badge-muted-stroke-pink: #ffb0ce;
266
+ --lux-theme-badge-muted-lightblue: #e6f2ff;
267
+ --lux-theme-badge-muted-on-lightblue: #003366;
268
+ --lux-theme-badge-muted-stroke-lightblue: #91cdff;
269
+
238
270
  // LUX-Breadcrumb
239
271
  --lux-theme-breadcrumb-hover-color: var(--lux-theme-accent-secondary-color);
240
272