@ihk-gfi/lux-components-theme 21.1.0 → 21.3.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 (30) 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 +339 -59
  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 +341 -61
  9. package/prebuilt-themes/luxtheme-green.css.map +1 -1
  10. package/src/base-templates/common/_luxstyles.scss +42 -0
  11. package/src/base-templates/components/_luxAppHeaderAc.scss +1 -1
  12. package/src/base-templates/components/_luxButton.scss +1 -0
  13. package/src/base-templates/components/_luxButtonFlat.scss +8 -8
  14. package/src/base-templates/components/_luxButtonIcon.scss +44 -0
  15. package/src/base-templates/components/_luxButtonRaised.scss +2 -2
  16. package/src/base-templates/components/_luxButtonRoundedStroked.scss +11 -4
  17. package/src/base-templates/components/_luxButtonSpinner.scss +3 -3
  18. package/src/base-templates/components/_luxButtonToggle.scss +61 -0
  19. package/src/base-templates/components/_luxConsent.scss +63 -0
  20. package/src/base-templates/components/_luxDialog.scss +15 -12
  21. package/src/base-templates/components/_luxFormControlWrapper.scss +1 -1
  22. package/src/base-templates/components/_luxInput.scss +4 -8
  23. package/src/base-templates/components/_luxMenu.scss +26 -3
  24. package/src/base-templates/components/_luxSelect.scss +41 -1
  25. package/src/base-templates/components/_luxTile.scss +1 -1
  26. package/src/base-templates/components/_luxTileAc.scss +5 -1
  27. package/src/theme-authentic/_variables.scss +85 -18
  28. package/src/theme-authentic/lux-authentic.scss +2 -0
  29. package/src/theme-green/_variables.scss +86 -19
  30. package/src/theme-green/lux-green.scss +2 -0
package/src/theme-authentic/_variables.scss CHANGED
@@ -25,7 +25,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
25
25
  --lux-theme-dark-primary-text: var(--mat-sys-on-surface);
26
26
  --lux-theme-dark-secondary-text: var(--mat-sys-on-surface-variant);
27
27
  --lux-theme-dark-disabled-text: var(--mat-sys-outline);
28
- --lux-theme-dark-dividers: var(--mat-sys-outline-variant);
28
+ --lux-theme-dark-dividers: rgba(0, 51, 102, 0.1);
29
29
  --lux-theme-dark-focused: rgba(0, 0, 0, 0.12); // TODO: wofür?
30
30
 
31
31
  --lux-theme-light-primary-text: white;
@@ -34,6 +34,35 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
34
34
  --lux-theme-light-dividers: rgba(255, 255, 255, 0.2);
35
35
  --lux-theme-light-focused: rgba(255, 255, 255, 0.12);
36
36
 
37
+ // Base-Tokens
38
+ --lux-theme-breakpoint-xs: 599px;
39
+ --lux-theme-breakpoint-sm: 959px;
40
+ --lux-theme-breakpoint-md: 1279px;
41
+ --lux-theme-breakpoint-lg: 1919px;
42
+ --lux-theme-breakpoint-xl: 4999px;
43
+
44
+ --lux-theme-radius-xs: 2px;
45
+ --lux-theme-radius-sm: 4px;
46
+ --lux-theme-radius-md: 8px;
47
+ --lux-theme-radius-lg: 16px;
48
+ --lux-theme-radius-xl: 24px;
49
+ --lux-theme-radius-xxl: 999px;
50
+
51
+ --lux-theme-spacing-xxs: 2px;
52
+ --lux-theme-spacing-xs: 4px;
53
+ --lux-theme-spacing-sm: 8px;
54
+ --lux-theme-spacing-md: 16px;
55
+ --lux-theme-spacing-lg: 24px;
56
+ --lux-theme-spacing-xl: 32px;
57
+ --lux-theme-spacing-xxl: 48px;
58
+ --lux-theme-spacing-xxxl: 64px;
59
+
60
+ --lux-theme-font-size-xs: 0.75rem;
61
+ --lux-theme-font-size-sm: 0.875rem;
62
+ --lux-theme-font-size-md: 1rem;
63
+ --lux-theme-font-size-lg: 1.125rem;
64
+ --lux-theme-font-size-xl: 1.25rem;
65
+
37
66
  // Hauptfarben
38
67
  --lux-theme-primary-color: #{palettes.$lux-primary-color};
39
68
  --lux-theme-accent-color: #{palettes.$lux-accent-color};
@@ -106,6 +135,11 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
106
135
  --lux-theme-app-gradient-reverse: linear-gradient(270deg, #ffffff 0%, var(--mat-sys-surface-container) 100%);
107
136
  --lux-theme-app-border-color: var(--mat-sys-outline-variant);
108
137
  --lux-theme-app-border-radius: 4px;
138
+ --lux-theme-state-layer-color: var(--lux-theme-primary-40);
139
+ --lux-theme-app-state-layer-color: #{map.get(palettes.$lux-palette_primary, 40)};
140
+ --lux-theme-hover-state-layer-opacity: 0.08;
141
+ --lux-theme-focus-state-layer-opacity: 0.12;
142
+ --lux-theme-pressed-state-layer-opacity: 0.16;
109
143
 
110
144
  // Form
111
145
  --lux-theme-form-border-width: 1px;
@@ -116,6 +150,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
116
150
  --lux-theme-form-control-label-margin: 0 0.5rem 0.25rem 0.5rem;
117
151
  --lux-theme-form-control-error-margin: 0.25rem calc(0.5rem + 1px) 0 calc(0.5rem + 3px);
118
152
  --lux-theme-form-border-color: var(--mat-sys-outline);
153
+ --lux-theme-form-hover-border-color: var(--lux-theme-neutral-10);
119
154
  --lux-theme-form-focus-border-color: var(--lux-theme-primary-20);
120
155
  --lux-theme-form-focus-box-shadow: 0 0 0 1px var(--lux-theme-primary-20) inset;
121
156
  --lux-theme-form-error-border-color: var(--mat-sys-error);
@@ -138,12 +173,12 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
138
173
  // Hover
139
174
  --lux-theme-hover-color: var(--mat-option-hover-state-layer-color);
140
175
  --lux-theme-on-hover-color: var(--mat-option-label-text-color);
141
- --lux-theme-hover-color-for-dark-background: #335c85;
176
+ --lux-theme-hover-color-for-dark-background: var(--lux-theme-primary-40);
142
177
 
143
178
  // Selektion
144
179
  --lux-theme-selected-border-color: #{palettes.$lux-primary-color};
145
180
  --lux-theme-selected-bg-color: var(--mat-option-selected-state-layer-color);
146
- --lux-theme-on-selected-color: var(--mat-option-selected-state-label-text-color);;
181
+ --lux-theme-on-selected-color: var(--mat-option-selected-state-label-text-color);
147
182
 
148
183
  // Snackbar
149
184
  --lux-theme-snackbar-red: #f17474;
@@ -204,6 +239,14 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
204
239
  --lux-theme-button-text-accent-text-color: var(--mat-sys-on-tertiary-container);
205
240
  --lux-theme-button-text-warn-text-color: var(--mat-sys-error);
206
241
 
242
+ --lux-theme-button-icon-default-text-color: var(--lux-theme-dark-primary-text);
243
+ --lux-theme-button-icon-primary-text-color: var(--lux-theme-primary-color);
244
+ --lux-theme-button-icon-accent-text-color: var(--mat-sys-on-tertiary-container);
245
+ --lux-theme-button-icon-warn-text-color: var(--mat-sys-error);
246
+ --lux-theme-button-icon-size: 18px;
247
+ --lux-theme-button-icon-container-size: 36px;
248
+ --lux-theme-button-icon-container-shape: 50%;
249
+
207
250
  --lux-theme-button-flat-default-text-color: var(--lux-theme-dark-primary-text);
208
251
  --lux-theme-button-flat-default-container-color: #ffffff;
209
252
  --lux-theme-button-flat-primary-text-color: var(--mat-sys-on-primary);
@@ -224,12 +267,12 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
224
267
 
225
268
  --lux-theme-button-stroked-default-text-color: var(--lux-theme-dark-primary-text);
226
269
  --lux-theme-button-stroked-primary-text-color: var(--lux-theme-primary-color);
227
- --lux-theme-button-stroked-accent-text-color: var(--mat-sys-on-tertiary-container);;
270
+ --lux-theme-button-stroked-accent-text-color: var(--mat-sys-on-tertiary-container);
228
271
  --lux-theme-button-stroked-warn-text-color: var(--mat-sys-error);
229
272
 
230
273
  --lux-theme-button-rounded-stroked-default-text-color: var(--lux-theme-dark-primary-text);
231
274
  --lux-theme-button-rounded-stroked-primary-text-color: var(--lux-theme-primary-color);
232
- --lux-theme-button-rounded-stroked-accent-text-color: var(--mat-sys-on-tertiary-container);;
275
+ --lux-theme-button-rounded-stroked-accent-text-color: var(--mat-sys-on-tertiary-container);
233
276
  --lux-theme-button-rounded-stroked-warn-text-color: var(--mat-sys-error);
234
277
 
235
278
  --lux-theme-button-rounded-default-text-color: var(--lux-theme-dark-primary-text);
@@ -277,6 +320,21 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
277
320
  --lux-theme-button-raised-text-tracking: 0.078125rem;
278
321
  --lux-theme-button-stroked-text-tracking: 0.078125rem;
279
322
 
323
+ // LUX-Button-Toggle
324
+ --lux-theme-button-toggle-height: 2.25rem;
325
+ --lux-theme-button-toggle-height-dense: 1.5rem;
326
+ --lux-theme-button-toggle-shape: var(--lux-theme-app-border-radius);
327
+ --lux-theme-button-toggle-text-color: var(--lux-theme-primary-color);
328
+ --lux-theme-button-toggle-divider-color: var(--lux-theme-primary-color);
329
+ --lux-theme-button-toggle-disabled-divider-color: var(--lux-theme-app-border-color);
330
+ --lux-theme-button-toggle-selected-state-text-color: var(--lux-theme-primary-color);
331
+ --lux-theme-button-toggle-selected-state-background-color: var(--mat-sys-surface-container-high);
332
+ --lux-theme-button-toggle-hover-state-layer-opacity: 0.08;
333
+ --lux-theme-button-toggle-disabled-selected-state-text-color: var(--lux-theme-dark-disabled-text);
334
+ --lux-theme-button-toggle-disabled-selected-state-background-color: var(--lux-theme-app-border-color);
335
+ --lux-theme-button-toggle-disabled-state-text-color: var(--lux-theme-dark-disabled-text);
336
+ --lux-theme-button-toggle-disabled-state-background-color: transparent;
337
+
280
338
  // LUX-Card
281
339
  --lux-theme-card-title-line-height: 2rem;
282
340
  --lux-theme-card-title-text-size: 1.5rem;
@@ -292,17 +350,17 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
292
350
  // LUX-Datepicker
293
351
  --lux-theme-datepicker-icon-color: #{map.get(palettes.$lux-palette_primary, 20)};
294
352
  --lux-theme-datepicker-panel-shape: var(--lux-theme-app-border-radius);
295
- --lux-theme-datepicker-panel-text-color: #003366;
353
+ --lux-theme-datepicker-panel-text-color: var(--lux-theme-primary-20);
296
354
  --lux-theme-datepicker-panel-font-size: 1rem;
297
355
  --lux-theme-datepicker-panel-date-border-radius: 999px;
298
356
  --lux-theme-datepicker-panel-date-background-color: var(--lux-theme-panel-bg-color);
299
- --lux-theme-datepicker-panel-date-selected-color: #e3ebf5;
300
- --lux-theme-datepicker-panel-date-selected-background-color: #003366;
301
- --lux-theme-datepicker-panel-date-hover-background-color: rgba(0, 51, 102, 0.3);
357
+ --lux-theme-datepicker-panel-date-selected-color: #ffffff;
358
+ --lux-theme-datepicker-panel-date-selected-background-color: var(--lux-theme-primary-20);
359
+ --lux-theme-datepicker-panel-date-hover-background-color: var(--lux-theme-panel-option-hover-state-layer-color);
302
360
 
303
361
  // LUX-Dialog
304
- --lux-theme-dialog-close-button-hover-color: var(--lux-theme-dark-primary-text);
305
- --lux-theme-dialog-close-button-hover-background-color: color-mix(in srgb, var(--mat-sys-secondary-container) 8%, transparent);
362
+ --lux-theme-dialog-close-button-hover-color: var(--lux-theme-on-hover-color);
363
+ --lux-theme-dialog-close-button-hover-background-color: var(--lux-theme-hover-color);
306
364
 
307
365
  // LUX-File-Upload
308
366
  --lux-theme-file-upload-padding: 16px 48px 12px 48px;
@@ -350,12 +408,18 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
350
408
  --lux-theme-link-plain-hover-background-color: var(--mat-sys-primary-container);
351
409
 
352
410
  // Lookup
353
- --lux-theme-lookup-invalid-option-text-color: var(--lux-theme-warn-50);
411
+ --lux-theme-lookup-invalid-option-text-color: var(--mat-sys-on-error-container);
354
412
  --lux-theme-lookup-invalid-option-font-weight: 300;
355
413
 
356
414
  // LUX-Menu
357
415
  --lux-theme-menu-item-font-color: var(--lux-theme-primary-color);
358
416
  --lux-theme-menu-item-subtitle-font-color: var(--mat-sys-secondary-container);
417
+ --lux-theme-menu-item-subtitle-font-size: 0.875rem;
418
+ --lux-theme-menu-panel-header-font-color: var(--lux-theme-dark-secondary-text);
419
+ --lux-theme-menu-panel-header-font-weight: 600;
420
+ --lux-theme-menu-panel-header-font-size: 1rem;
421
+ --lux-theme-menu-item-icon-size: 20px;
422
+ --lux-theme-menu-item-icon-size-large: 40px;
359
423
  --lux-theme-menu-item-font-size: 1rem;
360
424
  --lux-theme-menu-button-item-font-size: 0.875rem;
361
425
  --lux-theme-menu-button-text-container-shape: 4px;
@@ -430,7 +494,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
430
494
 
431
495
  // LUX-Tabs
432
496
  --lux-theme-tabs-text-font: var(--lux-theme-app-font-family);
433
- --lux-theme-tabs-label-text-size: 0.875rem;
497
+ --lux-theme-tabs-label-text-size: 1rem;
434
498
  --lux-theme-tabs-label-text-weight: 600;
435
499
  --lux-theme-tabs-border-radius: var(--lux-theme-card-shape);
436
500
 
@@ -461,13 +525,16 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
461
525
  --lux-theme-textbox-yellow-icon-color: var(--lux-theme-custom-yellow);
462
526
 
463
527
  // LUX-Tile
464
- --lux-theme-tile-font-hover-color: #2e8533;
465
- --lux-theme-tile-icon-color: #56bd66;
466
- --lux-theme-tile-borderradius: 24px;
467
- --lux-theme-tile-bottom-line-color: #56bd66;
528
+ --lux-theme-tile-font-hover-color: var(--mat-sys-on-tertiary-container);
529
+ --lux-theme-tile-icon-color: var(--mat-sys-tertiary);
530
+ --lux-theme-tile-border-radius: var(--lux-theme-app-border-radius);
531
+ --lux-theme-tile-borderradius: var(--lux-theme-tile-border-radius);
532
+ --lux-theme-tile-bottom-line-color: var(--mat-sys-tertiary);
468
533
 
469
534
  // LUX-Tile-Ac
470
535
  --lux-theme-tile-ac-icon-color: var(--lux-theme-primary-color);
536
+ --lux-theme-tile-ac-hover-bg-color: var(--lux-theme-app-gradient-reverse);
537
+ --lux-theme-tile-ac-hover-border-color: var(--lux-theme-form-hover-border-color);
471
538
 
472
539
  // LUX-Tourhint
473
540
  --lux-theme-tour-hint-overlay-backdrop-color: rgba(0, 0, 0, 0.12);
@@ -478,7 +545,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
478
545
  --lux-theme-panel-bg-color: var(--mat-sys-surface-container);
479
546
  --lux-theme-panel-option-label-text-size: 1rem;
480
547
  --lux-theme-panel-option-label-text-color: var(--lux-theme-primary-color);
481
- --lux-theme-panel-option-selected-state-layer-color: color-mix(in srgb, var(--mat-sys-secondary-container) 12%, transparent);;
548
+ --lux-theme-panel-option-selected-state-layer-color: color-mix(in srgb, var(--mat-sys-secondary-container) 12%, transparent);
482
549
  --lux-theme-panel-option-hover-state-layer-color: color-mix(in srgb, var(--mat-sys-secondary-container) 8%, transparent);
483
550
  --lux-theme-panel-option-focus-state-layer-color: color-mix(in srgb, var(--mat-sys-secondary-container) 12%, transparent);
484
551
  --lux-theme-panel-option-disabled-selected-checkmark-color: var(--lux-theme-dark-disabled-text);
package/src/theme-authentic/lux-authentic.scss CHANGED
@@ -21,10 +21,12 @@
21
21
  @use "../base-templates/components/luxBadgeNotification";
22
22
  @use "../base-templates/components/luxBreadcrumb";
23
23
  @use "../base-templates/components/luxButton";
24
+ @use "../base-templates/components/luxButtonToggle";
24
25
  @use "../base-templates/components/luxCard";
25
26
  @use "../base-templates/components/luxCheckbox";
26
27
  @use "../base-templates/components/luxCheckboxContainerAc";
27
28
  @use "../base-templates/components/luxChips";
29
+ @use "../base-templates/components/luxConsent";
28
30
  @use "../base-templates/components/luxCore";
29
31
  @use "../base-templates/components/luxDatepicker";
30
32
  @use "../base-templates/components/luxDatetimepicker";
package/src/theme-green/_variables.scss CHANGED
@@ -25,7 +25,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
25
25
  --lux-theme-dark-primary-text: #003366;
26
26
  --lux-theme-dark-secondary-text: #335c85;
27
27
  --lux-theme-dark-disabled-text: #636d76;
28
- --lux-theme-dark-dividers: rgba(0, 51, 102, 0.2);
28
+ --lux-theme-dark-dividers: rgba(0, 51, 102, 0.1);
29
29
  --lux-theme-dark-focused: rgba(0, 0, 0, 0.12);
30
30
 
31
31
  --lux-theme-light-primary-text: white;
@@ -34,6 +34,35 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
34
34
  --lux-theme-light-dividers: #e3ebf5;
35
35
  --lux-theme-light-focused: rgba(255, 255, 255, 0.12);
36
36
 
37
+ // Base-Tokens
38
+ --lux-theme-breakpoint-xs: 599px;
39
+ --lux-theme-breakpoint-sm: 959px;
40
+ --lux-theme-breakpoint-md: 1279px;
41
+ --lux-theme-breakpoint-lg: 1919px;
42
+ --lux-theme-breakpoint-xl: 4999px;
43
+
44
+ --lux-theme-radius-xs: 2px;
45
+ --lux-theme-radius-sm: 4px;
46
+ --lux-theme-radius-md: 8px;
47
+ --lux-theme-radius-lg: 18px;
48
+ --lux-theme-radius-xl: 20px;
49
+ --lux-theme-radius-xxl: 999px;
50
+
51
+ --lux-theme-spacing-xxs: 2px;
52
+ --lux-theme-spacing-xs: 4px;
53
+ --lux-theme-spacing-sm: 8px;
54
+ --lux-theme-spacing-md: 16px;
55
+ --lux-theme-spacing-lg: 24px;
56
+ --lux-theme-spacing-xl: 32px;
57
+ --lux-theme-spacing-xxl: 48px;
58
+ --lux-theme-spacing-xxxl: 64px;
59
+
60
+ --lux-theme-font-size-xs: 0.75rem;
61
+ --lux-theme-font-size-sm: 0.875rem;
62
+ --lux-theme-font-size-md: 1rem;
63
+ --lux-theme-font-size-lg: 1.125rem;
64
+ --lux-theme-font-size-xl: 1.25rem;
65
+
37
66
  // Hauptfarben
38
67
  --lux-theme-primary-color: #{palettes.$lux-primary-color};
39
68
  --lux-theme-accent-color: #{palettes.$lux-accent-color};
@@ -107,6 +136,11 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
107
136
  --lux-theme-app-gradient-reverse: none;
108
137
  --lux-theme-app-border-color: var(--mat-sys-outline-variant);
109
138
  --lux-theme-app-border-radius: 14px;
139
+ --lux-theme-state-layer-color: #E3EBF5;
140
+ --lux-theme-app-state-layer-color: #{map.get(palettes.$lux-palette_primary, 40)};
141
+ --lux-theme-hover-state-layer-opacity: 0.08;
142
+ --lux-theme-focus-state-layer-opacity: 0.12;
143
+ --lux-theme-pressed-state-layer-opacity: 0.16;
110
144
 
111
145
  // Form
112
146
  --lux-theme-form-border-width: 1px;
@@ -117,6 +151,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
117
151
  --lux-theme-form-control-label-margin: 0 0 0.25rem 0;
118
152
  --lux-theme-form-control-error-margin: 0.25rem 0 0 0;
119
153
  --lux-theme-form-border-color: rgba(0, 0, 0, 0.42);
154
+ --lux-theme-form-hover-border-color: var(--lux-theme-neutral-10);
120
155
  --lux-theme-form-focus-border-color: var(--lux-theme-primary-20);
121
156
  --lux-theme-form-focus-box-shadow: 0 0 0 2px var(--lux-theme-accent-secondary-color), 0 0 4px 2px var(--lux-theme-accent-secondary-color);
122
157
  --lux-theme-form-error-border-color: var(--lux-theme-warn-50);
@@ -126,7 +161,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
126
161
  --lux-theme-form-error-msg-background: rgb(255, 228, 231);
127
162
  --lux-theme-form-autofill-background-color: #e6e9ee;
128
163
  --lux-theme-form-readonly-color: var(--lux-theme-primary-color);
129
- --lux-theme-form-readonly-bg-color: #EFF3F6;
164
+ --lux-theme-form-readonly-bg-color: #eff3f6;
130
165
 
131
166
  // Fokus
132
167
  --lux-theme-outline-dark: 4px solid var(--lux-theme-accent-secondary-color) !important;
@@ -139,7 +174,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
139
174
  // Hover
140
175
  --lux-theme-hover-color: var(--mat-option-hover-state-layer-color);
141
176
  --lux-theme-on-hover-color: var(--mat-option-label-text-color);
142
- --lux-theme-hover-color-for-dark-background: #335c85;
177
+ --lux-theme-hover-color-for-dark-background: var(--lux-theme-primary-40);
143
178
 
144
179
  // Selektion
145
180
  --lux-theme-selected-border-color: var(--lux-theme-accent-secondary-color);
@@ -205,6 +240,14 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
205
240
  --lux-theme-button-text-accent-text-color: var(--mat-sys-on-tertiary-container);
206
241
  --lux-theme-button-text-warn-text-color: var(--mat-sys-error);
207
242
 
243
+ --lux-theme-button-icon-default-text-color: var(--lux-theme-dark-primary-text);
244
+ --lux-theme-button-icon-primary-text-color: var(--lux-theme-primary-color);
245
+ --lux-theme-button-icon-accent-text-color: var(--mat-sys-on-tertiary-container);
246
+ --lux-theme-button-icon-warn-text-color: var(--mat-sys-error);
247
+ --lux-theme-button-icon-size: 18px;
248
+ --lux-theme-button-icon-container-size: 45px;
249
+ --lux-theme-button-icon-container-shape: 18px;
250
+
208
251
  --lux-theme-button-flat-default-text-color: var(--lux-theme-dark-primary-text);
209
252
  --lux-theme-button-flat-default-container-color: #ffffff;
210
253
  --lux-theme-button-flat-primary-text-color: var(--mat-sys-on-primary);
@@ -225,12 +268,12 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
225
268
 
226
269
  --lux-theme-button-stroked-default-text-color: var(--lux-theme-dark-primary-text);
227
270
  --lux-theme-button-stroked-primary-text-color: var(--lux-theme-primary-color);
228
- --lux-theme-button-stroked-accent-text-color: var(--mat-sys-on-tertiary-container);;
271
+ --lux-theme-button-stroked-accent-text-color: var(--mat-sys-on-tertiary-container);
229
272
  --lux-theme-button-stroked-warn-text-color: var(--mat-sys-error);
230
273
 
231
274
  --lux-theme-button-rounded-stroked-default-text-color: var(--lux-theme-dark-primary-text);
232
275
  --lux-theme-button-rounded-stroked-primary-text-color: var(--lux-theme-primary-color);
233
- --lux-theme-button-rounded-stroked-accent-text-color: var(--mat-sys-on-tertiary-container);;
276
+ --lux-theme-button-rounded-stroked-accent-text-color: var(--mat-sys-on-tertiary-container);
234
277
  --lux-theme-button-rounded-stroked-warn-text-color: var(--mat-sys-error);
235
278
 
236
279
  --lux-theme-button-rounded-default-text-color: var(--lux-theme-dark-primary-text);
@@ -278,6 +321,21 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
278
321
  --lux-theme-button-raised-text-tracking: normal;
279
322
  --lux-theme-button-stroked-text-tracking: normal;
280
323
 
324
+ // LUX-Button-Toggle
325
+ --lux-theme-button-toggle-height: 2.25rem;
326
+ --lux-theme-button-toggle-height-dense: 1.5rem;
327
+ --lux-theme-button-toggle-shape: var(--lux-theme-app-border-radius);
328
+ --lux-theme-button-toggle-text-color: var(--lux-theme-primary-color);
329
+ --lux-theme-button-toggle-divider-color: var(--lux-theme-primary-color);
330
+ --lux-theme-button-toggle-disabled-divider-color: var(--lux-theme-app-border-color);
331
+ --lux-theme-button-toggle-selected-state-text-color: var(--lux-theme-primary-color);
332
+ --lux-theme-button-toggle-selected-state-background-color: var(--mat-sys-surface-container-high);
333
+ --lux-theme-button-toggle-hover-state-layer-opacity: 0.08;
334
+ --lux-theme-button-toggle-disabled-selected-state-text-color: var(--lux-theme-dark-disabled-text);
335
+ --lux-theme-button-toggle-disabled-selected-state-background-color: var(--lux-theme-app-border-color);
336
+ --lux-theme-button-toggle-disabled-state-text-color: var(--lux-theme-dark-disabled-text);
337
+ --lux-theme-button-toggle-disabled-state-background-color: transparent;
338
+
281
339
  // LUX-Card
282
340
  --lux-theme-card-title-line-height: 2rem;
283
341
  --lux-theme-card-title-text-size: 1.5rem;
@@ -293,17 +351,17 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
293
351
  // LUX-Datepicker
294
352
  --lux-theme-datepicker-icon-color: #{map.get(palettes.$lux-palette_primary, 20)};
295
353
  --lux-theme-datepicker-panel-shape: var(--lux-theme-app-border-radius);
296
- --lux-theme-datepicker-panel-text-color: #003366;
354
+ --lux-theme-datepicker-panel-text-color: var(--lux-theme-primary-20);
297
355
  --lux-theme-datepicker-panel-font-size: 1.125rem;
298
356
  --lux-theme-datepicker-panel-date-border-radius: 0;
299
357
  --lux-theme-datepicker-panel-date-background-color: #e3ebf5;
300
- --lux-theme-datepicker-panel-date-selected-color: #e3ebf5;
301
- --lux-theme-datepicker-panel-date-selected-background-color: #003366;
302
- --lux-theme-datepicker-panel-date-hover-background-color: rgba(0, 51, 102, 0.3);
358
+ --lux-theme-datepicker-panel-date-selected-color: #ffffff;
359
+ --lux-theme-datepicker-panel-date-selected-background-color: var(--lux-theme-primary-20);
360
+ --lux-theme-datepicker-panel-date-hover-background-color: var(--lux-theme-panel-option-hover-state-layer-color);
303
361
 
304
362
  // LUX-Dialog
305
- --lux-theme-dialog-close-button-hover-color: var(--lux-theme-dark-primary-text);
306
- --lux-theme-dialog-close-button-hover-background-color: color-mix(in srgb, var(--mat-sys-secondary-container) 8%, transparent);
363
+ --lux-theme-dialog-close-button-hover-color: var(--lux-theme-on-hover-color);
364
+ --lux-theme-dialog-close-button-hover-background-color: var(--lux-theme-on-hover-color);
307
365
 
308
366
  // LUX-File-Upload
309
367
  --lux-theme-file-upload-padding: 24px 48px;
@@ -351,12 +409,18 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
351
409
  --lux-theme-link-plain-hover-background-color: #e4f1e4;
352
410
 
353
411
  // Lookup
354
- --lux-theme-lookup-invalid-option-text-color: var(--lux-theme-warn-50);
412
+ --lux-theme-lookup-invalid-option-text-color: var(--mat-sys-error);
355
413
  --lux-theme-lookup-invalid-option-font-weight: 300;
356
414
 
357
415
  // LUX-Menu
358
416
  --lux-theme-menu-item-font-color: var(--lux-theme-primary-color);
359
417
  --lux-theme-menu-item-subtitle-font-color: var(--lux-theme-dark-secondary-text);
418
+ --lux-theme-menu-item-subtitle-font-size: 0.875rem;
419
+ --lux-theme-menu-panel-header-font-color: var(--lux-theme-dark-secondary-text);
420
+ --lux-theme-menu-panel-header-font-weight: 600;
421
+ --lux-theme-menu-panel-header-font-size: 1rem;
422
+ --lux-theme-menu-item-icon-size: 20px;
423
+ --lux-theme-menu-item-icon-size-large: 40px;
360
424
  --lux-theme-menu-item-font-size: 1rem;
361
425
  --lux-theme-menu-button-item-font-size: 0.875rem;
362
426
  --lux-theme-menu-button-text-container-shape: 4px;
@@ -387,7 +451,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
387
451
  --lux-theme-messagebox-on-lightblue: var(--lux-theme-custom-on-lightblue);
388
452
 
389
453
  // LUX-Popup
390
- --lux-theme-popup-background-color: #E3EBF5;
454
+ --lux-theme-popup-background-color: #e3ebf5;
391
455
  --lux-theme-popup-fade-in-duration: 125ms;
392
456
  --lux-theme-popup-panel-padding: 16px;
393
457
  --lux-theme-popup-title-font-size: 1rem;
@@ -431,7 +495,7 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
431
495
 
432
496
  // LUX-Tabs
433
497
  --lux-theme-tabs-text-font: var(--lux-theme-app-headline-font);
434
- --lux-theme-tabs-label-text-size: 1.125rem;
498
+ --lux-theme-tabs-label-text-size: 1rem;
435
499
  --lux-theme-tabs-label-text-weight: 600;
436
500
  --lux-theme-tabs-border-radius: var(--lux-theme-card-shape);
437
501
 
@@ -462,13 +526,16 @@ $componentColorNames: ("red", "green", "purple", "blue", "gray", "orange", "blac
462
526
  --lux-theme-textbox-yellow-icon-color: #f4cb25;
463
527
 
464
528
  // LUX-Tile
465
- --lux-theme-tile-font-hover-color: var(--lux-theme-accent-secondary-color);
466
- --lux-theme-tile-icon-color: #56bd66;
467
- --lux-theme-tile-borderradius: 24px;
468
- --lux-theme-tile-bottom-line-color: #56bd66;
529
+ --lux-theme-tile-font-hover-color: var(--mat-sys-on-tertiary-container);
530
+ --lux-theme-tile-icon-color: var(--mat-sys-tertiary);
531
+ --lux-theme-tile-border-radius: var(--lux-theme-app-border-radius);
532
+ --lux-theme-tile-borderradius: var(--lux-theme-tile-border-radius);
533
+ --lux-theme-tile-bottom-line-color: var(--mat-sys-tertiary);
469
534
 
470
- // LUX-Tile-Ac
535
+ // LUX-Tile-Ac
471
536
  --lux-theme-tile-ac-icon-color: var(--lux-theme-primary-color);
537
+ --lux-theme-tile-ac-hover-bg-color: var(--lux-theme-app-gradient-reverse);
538
+ --lux-theme-tile-ac-hover-border-color: var(--lux-theme-form-hover-border-color);
472
539
 
473
540
  // LUX-Tourhint
474
541
  --lux-theme-tour-hint-overlay-backdrop-color: rgba(0, 0, 0, 0.12);
package/src/theme-green/lux-green.scss CHANGED
@@ -20,10 +20,12 @@
20
20
  @use "../base-templates/components/luxBadgeNotification";
21
21
  @use "../base-templates/components/luxBreadcrumb";
22
22
  @use "../base-templates/components/luxButton";
23
+ @use "../base-templates/components/luxButtonToggle";
23
24
  @use "../base-templates/components/luxCard";
24
25
  @use "../base-templates/components/luxCheckbox";
25
26
  @use "../base-templates/components/luxCheckboxContainerAc";
26
27
  @use "../base-templates/components/luxChips";
28
+ @use "../base-templates/components/luxConsent";
27
29
  @use "../base-templates/components/luxCore";
28
30
  @use "../base-templates/components/luxDatepicker";
29
31
  @use "../base-templates/components/luxDatetimepicker";