@ihk-gfi/lux-components-theme 21.4.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 (22) 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 +415 -23
  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 +415 -23
  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/_luxCard.scss +2 -2
  14. package/src/base-templates/components/_luxFormControlWrapper.scss +1 -0
  15. package/src/base-templates/components/_luxList.scss +1 -1
  16. package/src/base-templates/components/_luxTabs.scss +21 -4
  17. package/src/base-templates/components/_luxTile.scss +5 -3
  18. package/src/base-templates/components/_luxTimepicker.scss +7 -0
  19. package/src/theme-authentic/_variables.scss +3 -0
  20. package/src/theme-authentic/lux-authentic.scss +2 -0
  21. package/src/theme-green/_variables.scss +3 -0
  22. package/src/theme-green/lux-green.scss +2 -0
package/README.md CHANGED
@@ -2,17 +2,30 @@
2
2
 
3
3
  - [Theme](#theme)
4
4
  - [Installation](#installation)
5
- - [LUX-Theme](#lux-theme)
6
- - [Allgemeine CSS-Variablen](#allgemeine-css-variablen)
7
- - [CSS-Variablen-Beispiele](#css-variablen-beispiele)
8
- - [Allgemeine CSS-Klassen](#allgemeine-css-klassen)
9
- - [CSS-Klassen](#css-klassen)
10
- - [Code-Beispiele](#code-beispiele)
11
- - [CSS-Variable nutzen](#css-variable-nutzen)
12
- - [LUX-Card umstylen](#lux-card-umstylen)
13
- - [LUX-Button (rund) umstylen](#lux-button-rund-umstylen)
14
- - [LUX-Button (stroked) umstylen](#lux-button-stroked-umstylen)
15
- - [CSS-Klasse](#css-klasse)
5
+ - [CSS-Variablen](#css-variablen)
6
+ - [Farbpaletten \& semantische Farben](#farbpaletten--semantische-farben)
7
+ - [Design Tokens: Layout, Typografie \& Spacing](#design-tokens-layout-typografie--spacing)
8
+ - [App-Grundlayout \& Zustände](#app-grundlayout--zustände)
9
+ - [Formulare \& Eingaben](#formulare--eingaben)
10
+ - [Navigation \& Struktur](#navigation--struktur)
11
+ - [Buttons](#buttons)
12
+ - [Container \& Inhalte](#container--inhalte)
13
+ - [Feedback \& Hinweise](#feedback--hinweise)
14
+ - [Sonstiges](#sonstiges)
15
+ - [CSS-Klassen](#css-klassen)
16
+ - [Textfarbe](#textfarbe)
17
+ - [Hintergrundfarbe](#hintergrundfarbe)
18
+ - [Rahmenfarbe](#rahmenfarbe)
19
+ - [Outline-Farbe](#outline-farbe)
20
+ - [Textdekorationsfarbe](#textdekorationsfarbe)
21
+ - [Spaltentrennlinien-Farbe](#spaltentrennlinien-farbe)
22
+ - [Sonstiges](#sonstiges-1)
23
+ - [Code-Beispiele](#code-beispiele)
24
+ - [CSS-Variable nutzen](#css-variable-nutzen)
25
+ - [LUX-Card umstylen](#lux-card-umstylen)
26
+ - [LUX-Button (rund) umstylen](#lux-button-rund-umstylen)
27
+ - [LUX-Button (stroked) umstylen](#lux-button-stroked-umstylen)
28
+ - [CSS-Klasse](#css-klasse)
16
29
  - [Lizenztext - Icons](#lizenztext---icons)
17
30
  - [Lizenztext - Fonts](#lizenztext---fonts)
18
31
 
@@ -26,92 +39,1538 @@ Dieses Projekt enthält alle Themes der [LUX-Components](https://www.npmjs.com/p
26
39
  npm install @ihk-gfi/lux-components-theme
27
40
  ```
28
41
 
29
- ## LUX-Theme
30
-
31
- Ein LUX-Theme besteht immer aus unterschiedlichen Farbpaletten:
32
-
33
- - `lux-palette_primary`
34
- - `lux-palette_accent`
35
- - `lux-palette_warn`
36
- - `lux-palette_neutral`
37
-
38
- Aus den Farbpaletten werden zahlreiche CSS-Variablen und CSS-Klassen abgeleitet.
39
- Zusätzlich gibt es viele allgemeine CSS-Variablen und CSS-Klassen.
40
- Alles zusammen bildet die Grundlage für das Theming eigener Komponenten auf Basis eines LUX-Themes.
41
-
42
- ### Allgemeine CSS-Variablen
43
-
44
- Die verfügbaren CSS-Variablen stehen im jeweiligen Theme:
45
-
46
- - `projects\lux-components-theme\src\${themeName}\_variables.scss`
47
- - `projects\lux-components-theme\src\${themeName}\_variablesPreferContrast.scss`
48
-
49
- #### CSS-Variablen-Beispiele
50
-
51
- - --lux-theme-app-font-family (Schriftart)
52
- - --lux-theme-custom-red (Hintergrundfarbe)
53
- - --lux-theme-custom-on-red (Textfarbe)
54
- - --lux-theme-accordion-header-color-neutral (Hintergrundfarbe)
55
- - --lux-theme-accordion-header-color-on-neutral (Textfarbe)
56
- - ...
57
-
58
- ### Allgemeine CSS-Klassen
59
-
60
- - `lux-app-header-bg`
61
- - `lux-app-content-bg`
62
- - `lux-app-footer-bg`
63
- - `lux-app-data-bg`
64
- - `lux-highlight-section`
65
- - `lux-highlight-section-label`
66
- - `lux-color-dark-primary-text`
67
- - `lux-color-dark-secondary-text`
68
- - `lux-color-dark-disabled-text`
69
- - `lux-color-dark-focused`
70
- - `lux-color-light-primary-text`
71
- - `lux-color-light-secondary-text`
72
- - `lux-color-light-disabled-text`
73
- - `lux-color-light-focused`
74
- - `lux-selected-bg`
75
- - `lux-hover-bg`
76
- - `lux-hover-dark-bg`
77
- - `lux-color-dark-divider`
78
- - `lux-color-light-divider`
79
- - `lux-outline-color-light`
80
- - `lux-outline-color-dark`
81
- - `lux-outline-width`
82
- - `lux-outline-style`
83
- - `lux-outline-light`
84
- - `lux-outline-dark`
85
-
86
- #### CSS-Klassen
87
-
88
- Zu jedem Eintrag (z.B. 0, 10, 20,...) der Farbpalette gibt es im LUX-Theme entsprechende CSS-Klassen.
89
- Hier im Beispiel werden nur die CSS-Klassen des Eintrags 20 aufgeführt. Die Klassen der anderen Einträge
90
- (0, 10, 20,...) sind analog aufgebaut.
91
-
92
- - `lux-color-primary-20`
93
- - `lux-bg-color-primary-20`
94
- - `lux-border-color-primary-20`
95
- - `lux-outline-color-primary-20`
96
- - `lux-text-decoration-primary-color-20`
97
- - `lux-column-rule-color-primary-20`
98
- - `lux-color-accent-20`
99
- - `lux-bg-color-accent`
100
- - `lux-border-color-accent-20`
101
- - `lux-outline-color-accent-20`
102
- - `lux-text-decoration-accent-color-20`
103
- - `lux-column-rule-color-accent-20`
104
- - `lux-color-warn-20`
105
- - `lux-bg-color-warn-20`
106
- - `lux-border-color-warn-20`
107
- - `lux-outline-color-warn-20`
108
- - `lux-text-decoration-warn-color-20`
109
- - `lux-column-rule-color-warn-20`
110
- - ...
111
-
112
- ### Code-Beispiele
113
-
114
- #### CSS-Variable nutzen
42
+ ## CSS-Variablen
43
+
44
+ ### Farbpaletten & semantische Farben
45
+
46
+ | Variable | Beschreibung |
47
+ | -------------------------------------------- | -------------------------------------------------------------------------------- |
48
+ | `--lux-theme-primary-0` | Primärfarbpalette; Tonstufe 0 (sehr dunkel / 0%). |
49
+ | `--lux-theme-primary-10` | Primärfarbpalette; Tonstufe 10 (sehr dunkel). |
50
+ | `--lux-theme-primary-20` | Primärfarbpalette; Tonstufe 20 (dunkel). |
51
+ | `--lux-theme-primary-25` | Primärfarbpalette; Tonstufe 25 (dunkler Zwischenwert). |
52
+ | `--lux-theme-primary-30` | Primärfarbpalette; Tonstufe 30 (kräftig dunkel). |
53
+ | `--lux-theme-primary-35` | Primärfarbpalette; Tonstufe 35 (dunkel-mittel). |
54
+ | `--lux-theme-primary-40` | Primärfarbpalette; Tonstufe 40 (Basis-/Standardton). |
55
+ | `--lux-theme-primary-50` | Primärfarbpalette; Tonstufe 50 (mittlerer Ton). |
56
+ | `--lux-theme-primary-60` | Primärfarbpalette; Tonstufe 60 (mittel-hell). |
57
+ | `--lux-theme-primary-70` | Primärfarbpalette; Tonstufe 70 (hell). |
58
+ | `--lux-theme-primary-80` | Primärfarbpalette; Tonstufe 80 (sehr hell). |
59
+ | `--lux-theme-primary-90` | Primärfarbpalette; Tonstufe 90 (nahe Pastell). |
60
+ | `--lux-theme-primary-95` | Primärfarbpalette; Tonstufe 95 (sehr blass). |
61
+ | `--lux-theme-primary-98` | Primärfarbpalette; Tonstufe 98 (fast weiß). |
62
+ | `--lux-theme-primary-99` | Primärfarbpalette; Tonstufe 99 (minimal getönt). |
63
+ | `--lux-theme-primary-100` | Primärfarbpalette; Tonstufe 100 (weiß / 100%). |
64
+ | `--lux-theme-accent-0` | Akzent-/Sekundärpalette; Tonstufe 0 (sehr dunkel / 0%). |
65
+ | `--lux-theme-accent-10` | Akzent-/Sekundärpalette; Tonstufe 10 (sehr dunkel). |
66
+ | `--lux-theme-accent-20` | Akzent-/Sekundärpalette; Tonstufe 20 (dunkel). |
67
+ | `--lux-theme-accent-25` | Akzent-/Sekundärpalette; Tonstufe 25 (dunkler Zwischenwert). |
68
+ | `--lux-theme-accent-30` | Akzent-/Sekundärpalette; Tonstufe 30 (kräftig dunkel). |
69
+ | `--lux-theme-accent-35` | Akzent-/Sekundärpalette; Tonstufe 35 (dunkel-mittel). |
70
+ | `--lux-theme-accent-40` | Akzent-/Sekundärpalette; Tonstufe 40 (Basis-/Standardton). |
71
+ | `--lux-theme-accent-50` | Akzent-/Sekundärpalette; Tonstufe 50 (mittlerer Ton). |
72
+ | `--lux-theme-accent-60` | Akzent-/Sekundärpalette; Tonstufe 60 (mittel-hell). |
73
+ | `--lux-theme-accent-70` | Akzent-/Sekundärpalette; Tonstufe 70 (hell). |
74
+ | `--lux-theme-accent-80` | Akzent-/Sekundärpalette; Tonstufe 80 (sehr hell). |
75
+ | `--lux-theme-accent-90` | Akzent-/Sekundärpalette; Tonstufe 90 (nahe Pastell). |
76
+ | `--lux-theme-accent-95` | Akzent-/Sekundärpalette; Tonstufe 95 (sehr blass). |
77
+ | `--lux-theme-accent-98` | Akzent-/Sekundärpalette; Tonstufe 98 (fast weiß). |
78
+ | `--lux-theme-accent-99` | Akzent-/Sekundärpalette; Tonstufe 99 (minimal getönt). |
79
+ | `--lux-theme-accent-100` | Akzent-/Sekundärpalette; Tonstufe 100 (weiß / 100%). |
80
+ | `--lux-theme-neutral-0` | Neutrale Graustufenpalette; Tonstufe 0 (sehr dunkel / 0%). |
81
+ | `--lux-theme-neutral-10` | Neutrale Graustufenpalette; Tonstufe 10 (sehr dunkel). |
82
+ | `--lux-theme-neutral-20` | Neutrale Graustufenpalette; Tonstufe 20 (dunkel). |
83
+ | `--lux-theme-neutral-25` | Neutrale Graustufenpalette; Tonstufe 25 (dunkler Zwischenwert). |
84
+ | `--lux-theme-neutral-30` | Neutrale Graustufenpalette; Tonstufe 30 (kräftig dunkel). |
85
+ | `--lux-theme-neutral-35` | Neutrale Graustufenpalette; Tonstufe 35 (dunkel-mittel). |
86
+ | `--lux-theme-neutral-40` | Neutrale Graustufenpalette; Tonstufe 40 (Basis-/Standardton). |
87
+ | `--lux-theme-neutral-50` | Neutrale Graustufenpalette; Tonstufe 50 (mittlerer Ton). |
88
+ | `--lux-theme-neutral-60` | Neutrale Graustufenpalette; Tonstufe 60 (mittel-hell). |
89
+ | `--lux-theme-neutral-70` | Neutrale Graustufenpalette; Tonstufe 70 (hell). |
90
+ | `--lux-theme-neutral-80` | Neutrale Graustufenpalette; Tonstufe 80 (sehr hell). |
91
+ | `--lux-theme-neutral-90` | Neutrale Graustufenpalette; Tonstufe 90 (nahe Pastell). |
92
+ | `--lux-theme-neutral-95` | Neutrale Graustufenpalette; Tonstufe 95 (sehr blass). |
93
+ | `--lux-theme-neutral-98` | Neutrale Graustufenpalette; Tonstufe 98 (fast weiß). |
94
+ | `--lux-theme-neutral-99` | Neutrale Graustufenpalette; Tonstufe 99 (minimal getönt). |
95
+ | `--lux-theme-neutral-100` | Neutrale Graustufenpalette; Tonstufe 100 (weiß / 100%). |
96
+ | `--lux-theme-warn-0` | Warn-/Fehlerpalette; Tonstufe 0 (sehr dunkel / 0%). |
97
+ | `--lux-theme-warn-10` | Warn-/Fehlerpalette; Tonstufe 10 (sehr dunkel). |
98
+ | `--lux-theme-warn-20` | Warn-/Fehlerpalette; Tonstufe 20 (dunkel). |
99
+ | `--lux-theme-warn-25` | Warn-/Fehlerpalette; Tonstufe 25 (dunkler Zwischenwert). |
100
+ | `--lux-theme-warn-30` | Warn-/Fehlerpalette; Tonstufe 30 (kräftig dunkel). |
101
+ | `--lux-theme-warn-35` | Warn-/Fehlerpalette; Tonstufe 35 (dunkel-mittel). |
102
+ | `--lux-theme-warn-40` | Warn-/Fehlerpalette; Tonstufe 40 (Basis-/Standardton). |
103
+ | `--lux-theme-warn-50` | Warn-/Fehlerpalette; Tonstufe 50 (mittlerer Ton). |
104
+ | `--lux-theme-warn-60` | Warn-/Fehlerpalette; Tonstufe 60 (mittel-hell). |
105
+ | `--lux-theme-warn-70` | Warn-/Fehlerpalette; Tonstufe 70 (hell). |
106
+ | `--lux-theme-warn-80` | Warn-/Fehlerpalette; Tonstufe 80 (sehr hell). |
107
+ | `--lux-theme-warn-90` | Warn-/Fehlerpalette; Tonstufe 90 (nahe Pastell). |
108
+ | `--lux-theme-warn-95` | Warn-/Fehlerpalette; Tonstufe 95 (sehr blass). |
109
+ | `--lux-theme-warn-98` | Warn-/Fehlerpalette; Tonstufe 98 (fast weiß). |
110
+ | `--lux-theme-warn-99` | Warn-/Fehlerpalette; Tonstufe 99 (minimal getönt). |
111
+ | `--lux-theme-warn-100` | Warn-/Fehlerpalette; Tonstufe 100 (weiß / 100%). |
112
+ | `--lux-theme-primary-color` | Primärfarbpalette; Tonstufe color (Skalenwert). |
113
+ | `--lux-theme-accent-color` | Akzent-/Sekundärpalette; Tonstufe color (Skalenwert). |
114
+ | `--lux-theme-warn-color` | Warn-/Fehlerpalette; Tonstufe color (Skalenwert). |
115
+ | `--lux-theme-custom-purple` | Benutzerdefinierter Farbtoken „purple“. |
116
+ | `--lux-theme-custom-on-purple` | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „purple“. |
117
+ | `--lux-theme-custom-pink` | Benutzerdefinierter Farbtoken „pink“. |
118
+ | `--lux-theme-custom-on-pink` | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „pink“. |
119
+ | `--lux-theme-custom-yellow` | Benutzerdefinierter Farbtoken „yellow“. |
120
+ | `--lux-theme-custom-on-yellow` | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „yellow“. |
121
+ | `--lux-theme-custom-orange` | Benutzerdefinierter Farbtoken „orange“. |
122
+ | `--lux-theme-custom-on-orange` | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „orange“. |
123
+ | `--lux-theme-custom-lightblue` | Benutzerdefinierter Farbtoken „lightblue“. |
124
+ | `--lux-theme-custom-on-lightblue` | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „lightblue“. |
125
+ | `--lux-theme-custom-blue` | Benutzerdefinierter Farbtoken „blue“. |
126
+ | `--lux-theme-custom-on-blue` | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „blue“. |
127
+ | `--lux-theme-custom-green` | Benutzerdefinierter Farbtoken „green“. |
128
+ | `--lux-theme-custom-on-green` | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „green“. |
129
+ | `--lux-theme-custom-red` | Benutzerdefinierter Farbtoken „red“. |
130
+ | `--lux-theme-custom-on-red` | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „red“. |
131
+ | `--lux-theme-custom-gray` | Benutzerdefinierter Farbtoken „gray“. |
132
+ | `--lux-theme-custom-on-gray` | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „gray“. |
133
+ | `--lux-theme-custom-black` | Benutzerdefinierter Farbtoken „black“. |
134
+ | `--lux-theme-custom-on-black` | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „black“. |
135
+ | `--lux-theme-custom-white` | Benutzerdefinierter Farbtoken „white“. |
136
+ | `--lux-theme-custom-on-white` | Text-/Vordergrundfarbe auf benutzerdefiniertem Farbton „white“. |
137
+ | `--lux-theme-contrast-custom-purple` | Kontrastoptimierter benutzerdefinierter Farbtoken „purple“. |
138
+ | `--lux-theme-contrast-custom-on-purple` | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „purple“. |
139
+ | `--lux-theme-contrast-custom-pink` | Kontrastoptimierter benutzerdefinierter Farbtoken „pink“. |
140
+ | `--lux-theme-contrast-custom-on-pink` | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „pink“. |
141
+ | `--lux-theme-contrast-custom-yellow` | Kontrastoptimierter benutzerdefinierter Farbtoken „yellow“. |
142
+ | `--lux-theme-contrast-custom-on-yellow` | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „yellow“. |
143
+ | `--lux-theme-contrast-custom-orange` | Kontrastoptimierter benutzerdefinierter Farbtoken „orange“. |
144
+ | `--lux-theme-contrast-custom-on-orange` | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „orange“. |
145
+ | `--lux-theme-contrast-custom-lightblue` | Kontrastoptimierter benutzerdefinierter Farbtoken „lightblue“. |
146
+ | `--lux-theme-contrast-custom-on-lightblue` | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „lightblue“. |
147
+ | `--lux-theme-contrast-custom-blue` | Kontrastoptimierter benutzerdefinierter Farbtoken „blue“. |
148
+ | `--lux-theme-contrast-custom-on-blue` | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „blue“. |
149
+ | `--lux-theme-contrast-custom-green` | Kontrastoptimierter benutzerdefinierter Farbtoken „green“. |
150
+ | `--lux-theme-contrast-custom-on-green` | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „green“. |
151
+ | `--lux-theme-contrast-custom-red` | Kontrastoptimierter benutzerdefinierter Farbtoken „red“. |
152
+ | `--lux-theme-contrast-custom-on-red` | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „red“. |
153
+ | `--lux-theme-contrast-custom-gray` | Kontrastoptimierter benutzerdefinierter Farbtoken „gray“. |
154
+ | `--lux-theme-contrast-custom-on-gray` | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „gray“. |
155
+ | `--lux-theme-contrast-custom-black` | Kontrastoptimierter benutzerdefinierter Farbtoken „black“. |
156
+ | `--lux-theme-contrast-custom-on-black` | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „black“. |
157
+ | `--lux-theme-contrast-custom-white` | Kontrastoptimierter benutzerdefinierter Farbtoken „white“. |
158
+ | `--lux-theme-contrast-custom-on-white` | Kontrastoptimierte Vordergrundfarbe für benutzerdefinierten Farbton „white“. |
159
+ | `--lux-theme-component-bg-red` | Hintergrundfarbe für Komponentenvariante „red“. |
160
+ | `--lux-theme-component-bg-green` | Hintergrundfarbe für Komponentenvariante „green“. |
161
+ | `--lux-theme-component-bg-purple` | Hintergrundfarbe für Komponentenvariante „purple“. |
162
+ | `--lux-theme-component-bg-blue` | Hintergrundfarbe für Komponentenvariante „blue“. |
163
+ | `--lux-theme-component-bg-gray` | Hintergrundfarbe für Komponentenvariante „gray“. |
164
+ | `--lux-theme-component-bg-orange` | Hintergrundfarbe für Komponentenvariante „orange“. |
165
+ | `--lux-theme-component-bg-black` | Hintergrundfarbe für Komponentenvariante „black“. |
166
+ | `--lux-theme-component-bg-white` | Hintergrundfarbe für Komponentenvariante „white“. |
167
+ | `--lux-theme-component-bg-yellow` | Hintergrundfarbe für Komponentenvariante „yellow“. |
168
+ | `--lux-theme-component-bg-pink` | Hintergrundfarbe für Komponentenvariante „pink“. |
169
+ | `--lux-theme-component-bg-lightblue` | Hintergrundfarbe für Komponentenvariante „lightblue“. |
170
+ | `--lux-theme-component-font-color-red` | Schriftfarbe für Komponentenvariante „red“. |
171
+ | `--lux-theme-component-font-color-green` | Schriftfarbe für Komponentenvariante „green“. |
172
+ | `--lux-theme-component-font-color-purple` | Schriftfarbe für Komponentenvariante „purple“. |
173
+ | `--lux-theme-component-font-color-blue` | Schriftfarbe für Komponentenvariante „blue“. |
174
+ | `--lux-theme-component-font-color-gray` | Schriftfarbe für Komponentenvariante „gray“. |
175
+ | `--lux-theme-component-font-color-orange` | Schriftfarbe für Komponentenvariante „orange“. |
176
+ | `--lux-theme-component-font-color-black` | Schriftfarbe für Komponentenvariante „black“. |
177
+ | `--lux-theme-component-font-color-white` | Schriftfarbe für Komponentenvariante „white“. |
178
+ | `--lux-theme-component-font-color-yellow` | Schriftfarbe für Komponentenvariante „yellow“. |
179
+ | `--lux-theme-component-font-color-pink` | Schriftfarbe für Komponentenvariante „pink“. |
180
+ | `--lux-theme-component-font-color-lightblue` | Schriftfarbe für Komponentenvariante „lightblue“. |
181
+
182
+ ### Design Tokens: Layout, Typografie & Spacing
183
+
184
+ | Variable | Beschreibung |
185
+ | ------------------------------- | ---------------------------------------- |
186
+ | `--lux-theme-app-font-family` | Standardschriftfamilie der Anwendung. |
187
+ | `--lux-theme-app-headline-font` | Schriftfamilie für Überschriften. |
188
+ | `--lux-theme-breakpoint-xs` | Responsiver Breakpoint für Größe „xs“. |
189
+ | `--lux-theme-breakpoint-sm` | Responsiver Breakpoint für Größe „sm“. |
190
+ | `--lux-theme-breakpoint-md` | Responsiver Breakpoint für Größe „md“. |
191
+ | `--lux-theme-breakpoint-lg` | Responsiver Breakpoint für Größe „lg“. |
192
+ | `--lux-theme-breakpoint-xl` | Responsiver Breakpoint für Größe „xl“. |
193
+ | `--lux-theme-radius-xs` | Eckradius in Größe „xs“. |
194
+ | `--lux-theme-radius-sm` | Eckradius in Größe „sm“. |
195
+ | `--lux-theme-radius-md` | Eckradius in Größe „md“. |
196
+ | `--lux-theme-radius-lg` | Eckradius in Größe „lg“. |
197
+ | `--lux-theme-radius-xl` | Eckradius in Größe „xl“. |
198
+ | `--lux-theme-radius-xxl` | Eckradius in Größe „xxl“. |
199
+ | `--lux-theme-spacing-xxs` | Abstands-/Spacing-Token in Größe „xxs“. |
200
+ | `--lux-theme-spacing-xs` | Abstands-/Spacing-Token in Größe „xs“. |
201
+ | `--lux-theme-spacing-1-5` | Abstands-/Spacing-Token in Größe „1-5“. |
202
+ | `--lux-theme-spacing-sm` | Abstands-/Spacing-Token in Größe „sm“. |
203
+ | `--lux-theme-spacing-3` | Abstands-/Spacing-Token in Größe „3“. |
204
+ | `--lux-theme-spacing-md` | Abstands-/Spacing-Token in Größe „md“. |
205
+ | `--lux-theme-spacing-lg` | Abstands-/Spacing-Token in Größe „lg“. |
206
+ | `--lux-theme-spacing-xl` | Abstands-/Spacing-Token in Größe „xl“. |
207
+ | `--lux-theme-spacing-xxl` | Abstands-/Spacing-Token in Größe „xxl“. |
208
+ | `--lux-theme-spacing-xxxl` | Abstands-/Spacing-Token in Größe „xxxl“. |
209
+ | `--lux-theme-font-size-xs` | Schriftgrößen-Token in Größe „xs“. |
210
+ | `--lux-theme-font-size-sm` | Schriftgrößen-Token in Größe „sm“. |
211
+ | `--lux-theme-font-size-md` | Schriftgrößen-Token in Größe „md“. |
212
+ | `--lux-theme-font-size-lg` | Schriftgrößen-Token in Größe „lg“. |
213
+ | `--lux-theme-font-size-xl` | Schriftgrößen-Token in Größe „xl“. |
214
+ | `--lux-theme-font-size-2xl` | Schriftgrößen-Token in Größe „2xl“. |
215
+
216
+ ### App-Grundlayout & Zustände
217
+
218
+ | Variable | Beschreibung |
219
+ | --------------------------------------------- | ----------------------------------------------------------- |
220
+ | `--lux-theme-app-header-item-border-radius` | Anwendungsweites App-Token für „header-item-border-radius“. |
221
+ | `--lux-theme-app-header-bg` | Anwendungsweites App-Token für „header-bg“. |
222
+ | `--lux-theme-app-content-bg` | Anwendungsweites App-Token für „content-bg“. |
223
+ | `--lux-theme-app-footer-bg` | Anwendungsweites App-Token für „footer-bg“. |
224
+ | `--lux-theme-app-footer-border-color` | Anwendungsweites App-Token für „footer-border-color“. |
225
+ | `--lux-theme-app-data-bg` | Anwendungsweites App-Token für „data-bg“. |
226
+ | `--lux-theme-app-gradient` | Anwendungsweites App-Token für „gradient“. |
227
+ | `--lux-theme-app-gradient-reverse` | Anwendungsweites App-Token für „gradient-reverse“. |
228
+ | `--lux-theme-app-border-color` | Anwendungsweites App-Token für „border-color“. |
229
+ | `--lux-theme-app-border-radius` | Anwendungsweites App-Token für „border-radius“. |
230
+ | `--lux-theme-app-state-layer-color` | Anwendungsweites App-Token für „state-layer-color“. |
231
+ | `--lux-theme-hover-state-layer-opacity` | Token für Hover-Zustände. |
232
+ | `--lux-theme-outline-dark` | Token für Fokus-/Outline-Darstellung. |
233
+ | `--lux-theme-outline-bright` | Token für Fokus-/Outline-Darstellung. |
234
+ | `--lux-theme-outline-width` | Token für Fokus-/Outline-Darstellung. |
235
+ | `--lux-theme-outline-style` | Token für Fokus-/Outline-Darstellung. |
236
+ | `--lux-theme-outline-color-bright` | Token für Fokus-/Outline-Darstellung. |
237
+ | `--lux-theme-outline-color-dark` | Token für Fokus-/Outline-Darstellung. |
238
+ | `--lux-theme-hover-color` | Token für Hover-Zustände. |
239
+ | `--lux-theme-on-hover-color` | Token für Hover-Zustände. |
240
+ | `--lux-theme-hover-color-for-dark-background` | Token für Hover-Zustände. |
241
+ | `--lux-theme-selected-border-color` | Token für ausgewählten Zustand. |
242
+ | `--lux-theme-selected-bg-color` | Token für ausgewählten Zustand. |
243
+ | `--lux-theme-on-selected-color` | Token für ausgewählten Zustand. |
244
+
245
+ ### Formulare & Eingaben
246
+
247
+ | Variable | Beschreibung |
248
+ | ------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
249
+ | `--lux-theme-form-border-width` | Formular-Token für „border-width“. |
250
+ | `--lux-theme-form-min-height` | Formular-Token für „min-height“. |
251
+ | `--lux-theme-form-dense-min-height` | Formular-Token für „dense-min-height“. |
252
+ | `--lux-theme-form-control-textarea-padding` | Formular-Token für „control-textarea-padding“. |
253
+ | `--lux-theme-form-control-textarea-dense-padding` | Formular-Token für „control-textarea-dense-padding“. |
254
+ | `--lux-theme-form-control-label-margin` | Formular-Token für „control-label-margin“. |
255
+ | `--lux-theme-form-control-error-margin` | Formular-Token für „control-error-margin“. |
256
+ | `--lux-theme-form-border-color` | Formular-Token für „border-color“. |
257
+ | `--lux-theme-form-hover-border-color` | Formular-Token für „hover-border-color“. |
258
+ | `--lux-theme-form-focus-border-color` | Formular-Token für „focus-border-color“. |
259
+ | `--lux-theme-form-focus-box-shadow` | Formular-Token für „focus-box-shadow“. |
260
+ | `--lux-theme-form-error-border-color` | Formular-Token für „error-border-color“. |
261
+ | `--lux-theme-form-error-box-shadow` | Formular-Token für „error-box-shadow“. |
262
+ | `--lux-theme-form-control-font-size` | Formular-Token für „control-font-size“. |
263
+ | `--lux-theme-form-control-buffer` | Formular-Token für „control-buffer“. |
264
+ | `--lux-theme-form-error-msg-background` | Formular-Token für „error-msg-background“. |
265
+ | `--lux-theme-form-autofill-background-color` | Formular-Token für „autofill-background-color“. |
266
+ | `--lux-theme-form-readonly-color` | Formular-Token für „readonly-color“. |
267
+ | `--lux-theme-form-readonly-bg-color` | Formular-Token für „readonly-bg-color“. |
268
+ | `--lux-theme-datepicker-icon-color` | Datepicker-Komponente; steuert „icon-color“. |
269
+ | `--lux-theme-datepicker-panel-shape` | Datepicker-Komponente; steuert „panel-shape“. |
270
+ | `--lux-theme-datepicker-panel-text-color` | Datepicker-Komponente; steuert „panel-text-color“. |
271
+ | `--lux-theme-datepicker-panel-font-size` | Datepicker-Komponente; steuert „panel-font-size“. |
272
+ | `--lux-theme-datepicker-panel-date-border-radius` | Datepicker-Komponente; steuert „panel-date-border-radius“. |
273
+ | `--lux-theme-datepicker-panel-date-background-color` | Datepicker-Komponente; steuert „panel-date-background-color“. |
274
+ | `--lux-theme-datepicker-panel-date-selected-color` | Datepicker-Komponente; steuert „panel-date-selected-color“. |
275
+ | `--lux-theme-datepicker-panel-date-selected-background-color` | Datepicker-Komponente; steuert „panel-date-selected-background-color“. |
276
+ | `--lux-theme-datepicker-panel-date-hover-background-color` | Datepicker-Komponente; steuert „panel-date-hover-background-color“. |
277
+ | `--lux-theme-file-upload-padding` | File-Upload-Komponente; steuert „padding“. |
278
+ | `--lux-theme-file-upload-background-image` | File-Upload-Komponente; steuert „background-image“. |
279
+ | `--lux-theme-file-upload-item-container-border` | File-Upload-Komponente; steuert „item-container-border“. |
280
+ | `--lux-theme-file-upload-item-disabled-container-border` | File-Upload-Komponente; steuert „item-disabled-container-border“. |
281
+ | `--lux-theme-file-upload-item-background-color` | File-Upload-Komponente; steuert „item-background-color“. |
282
+ | `--lux-theme-file-upload-item-margin` | File-Upload-Komponente; steuert „item-margin“. |
283
+ | `--lux-theme-file-upload-item-padding` | File-Upload-Komponente; steuert „item-padding“. |
284
+ | `--lux-theme-file-upload-item-border` | File-Upload-Komponente; steuert „item-border“. |
285
+ | `--lux-theme-file-upload-item-border-bottom` | File-Upload-Komponente; steuert „item-border-bottom“. |
286
+ | `--lux-theme-file-upload-item-border-bottom-left-radius` | File-Upload-Komponente; steuert „item-border-bottom-left-radius“. |
287
+ | `--lux-theme-file-upload-item-border-bottom-right-radius` | File-Upload-Komponente; steuert „item-border-bottom-right-radius“. |
288
+ | `--lux-theme-file-upload-item-disabled-border` | File-Upload-Komponente; steuert „item-disabled-border“. |
289
+ | `--lux-theme-file-upload-item-disabled-border-bottom` | File-Upload-Komponente; steuert „item-disabled-border-bottom“. |
290
+ | `--lux-theme-lookup-invalid-option-text-color` | Lookup-/Autocomplete-Komponente; steuert „invalid-option-text-color“. |
291
+ | `--lux-theme-lookup-invalid-option-font-weight` | Lookup-/Autocomplete-Komponente; steuert „invalid-option-font-weight“. |
292
+ | `--lux-theme-panel-option-min-height` | Panel-/Optionslisten-Komponente; steuert „option-min-height“. |
293
+ | `--lux-theme-panel-option-padding` | Panel-/Optionslisten-Komponente; steuert „option-padding“. |
294
+ | `--lux-theme-panel-bg-color` | Panel-/Optionslisten-Komponente; steuert „bg-color“. |
295
+ | `--lux-theme-panel-option-label-text-size` | Panel-/Optionslisten-Komponente; steuert „option-label-text-size“. |
296
+ | `--lux-theme-panel-option-label-text-color` | Panel-/Optionslisten-Komponente; steuert „option-label-text-color“. |
297
+ | `--lux-theme-panel-option-selected-state-layer-color` | Panel-/Optionslisten-Komponente; steuert „option-selected-state-layer-color“. |
298
+ | `--lux-theme-panel-option-hover-state-layer-color` | Panel-/Optionslisten-Komponente; steuert „option-hover-state-layer-color“. |
299
+ | `--lux-theme-panel-option-focus-state-layer-color` | Panel-/Optionslisten-Komponente; steuert „option-focus-state-layer-color“. |
300
+ | `--lux-theme-panel-option-disabled-selected-checkmark-color` | Panel-/Optionslisten-Komponente; steuert „option-disabled-selected-checkmark-color“. |
301
+ | `--lux-theme-panel-option-selected-checkmark-color` | Panel-/Optionslisten-Komponente; steuert „option-selected-checkmark-color“. |
302
+
303
+ ### Navigation & Struktur
304
+
305
+ | Variable | Beschreibung |
306
+ | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
307
+ | `--lux-theme-breadcrumb-hover-color` | Breadcrumb-Komponente; steuert „hover-color“. |
308
+ | `--lux-theme-menu-item-font-color` | Menü-Komponente; steuert „item-font-color“. |
309
+ | `--lux-theme-menu-item-subtitle-font-color` | Menü-Komponente; steuert „item-subtitle-font-color“. |
310
+ | `--lux-theme-menu-item-subtitle-font-size` | Menü-Komponente; steuert „item-subtitle-font-size“. |
311
+ | `--lux-theme-menu-panel-header-font-color` | Menü-Komponente; steuert „panel-header-font-color“. |
312
+ | `--lux-theme-menu-panel-header-font-weight` | Menü-Komponente; steuert „panel-header-font-weight“. |
313
+ | `--lux-theme-menu-panel-header-font-size` | Menü-Komponente; steuert „panel-header-font-size“. |
314
+ | `--lux-theme-menu-item-icon-size` | Menü-Komponente; steuert „item-icon-size“. |
315
+ | `--lux-theme-menu-item-icon-size-large` | Menü-Komponente; steuert „item-icon-size-large“. |
316
+ | `--lux-theme-menu-item-font-size` | Menü-Komponente; steuert „item-font-size“. |
317
+ | `--lux-theme-menu-button-item-font-size` | Menü-Komponente; steuert „button-item-font-size“. |
318
+ | `--lux-theme-menu-button-text-container-shape` | Menü-Komponente; steuert „button-text-container-shape“. |
319
+ | `--lux-theme-menu-container-height` | Menü-Komponente; steuert „container-height“. |
320
+ | `--lux-theme-menu-panel-option-min-height` | Menü-Komponente; steuert „panel-option-min-height“. |
321
+ | `--lux-theme-menu-panel-option-padding` | Menü-Komponente; steuert „panel-option-padding“. |
322
+ | `--lux-theme-stepper-large-nav-item-font-size` | Stepper-Komponente; steuert „large-nav-item-font-size“. |
323
+ | `--lux-theme-stepper-large-nav-item-font-weight` | Stepper-Komponente; steuert „large-nav-item-font-weight“. |
324
+ | `--lux-theme-stepper-large-nav-item-line-height` | Stepper-Komponente; steuert „large-nav-item-line-height“. |
325
+ | `--lux-theme-stepper-large-nav-item-completed-font-size` | Stepper-Komponente; steuert „large-nav-item-completed-font-size“. |
326
+ | `--lux-theme-stepper-large-nav-item-completed-font-weight` | Stepper-Komponente; steuert „large-nav-item-completed-font-weight“. |
327
+ | `--lux-theme-stepper-large-nav-item-completed-line-height` | Stepper-Komponente; steuert „large-nav-item-completed-line-height“. |
328
+ | `--lux-theme-stepper-large-nav-item-number-container-background-color` | Stepper-Komponente; steuert „large-nav-item-number-container-background-color“. |
329
+ | `--lux-theme-stepper-large-nav-item-number-container-width` | Stepper-Komponente; steuert „large-nav-item-number-container-width“. |
330
+ | `--lux-theme-stepper-large-nav-item-number-container-height` | Stepper-Komponente; steuert „large-nav-item-number-container-height“. |
331
+ | `--lux-theme-stepper-large-nav-item-number-container-padding` | Stepper-Komponente; steuert „large-nav-item-number-container-padding“. |
332
+ | `--lux-theme-stepper-large-nav-item-number-container-radius` | Stepper-Komponente; steuert „large-nav-item-number-container-radius“. |
333
+ | `--lux-theme-stepper-large-nav-item-completed-icon-width` | Stepper-Komponente; steuert „large-nav-item-completed-icon-width“. |
334
+ | `--lux-theme-stepper-large-nav-item-completed-icon-height` | Stepper-Komponente; steuert „large-nav-item-completed-icon-height“. |
335
+ | `--lux-theme-stepper-large-nav-item-completed-icon-margin` | Stepper-Komponente; steuert „large-nav-item-completed-icon-margin“. |
336
+ | `--lux-theme-stepper-large-backdrop-bg` | Stepper-Komponente; steuert „large-backdrop-bg“. |
337
+ | `--lux-theme-stepper-large-completed-fc` | Stepper-Komponente; steuert „large-completed-fc“. |
338
+ | `--lux-theme-stepper-large-nav-item-active-fc` | Stepper-Komponente; steuert „large-nav-item-active-fc“. |
339
+ | `--lux-theme-stepper-large-nav-item-active-bg` | Stepper-Komponente; steuert „large-nav-item-active-bg“. |
340
+ | `--lux-theme-stepper-large-nav-item-disabled-fg` | Stepper-Komponente; steuert „large-nav-item-disabled-fg“. |
341
+ | `--lux-theme-stepper-large-nav-item-disabled-bg` | Stepper-Komponente; steuert „large-nav-item-disabled-bg“. |
342
+ | `--lux-theme-stepper-large-nav-item-completed-fg` | Stepper-Komponente; steuert „large-nav-item-completed-fg“. |
343
+ | `--lux-theme-stepper-large-nav-item-completed-bg` | Stepper-Komponente; steuert „large-nav-item-completed-bg“. |
344
+ | `--lux-theme-stepper-large-nav-item-not-touched-fg` | Stepper-Komponente; steuert „large-nav-item-not-touched-fg“. |
345
+ | `--lux-theme-stepper-large-nav-item-not-touched-bg` | Stepper-Komponente; steuert „large-nav-item-not-touched-bg“. |
346
+ | `--lux-theme-side-nav-button-color` | Side-Navigation-Komponente; steuert „button-color“. |
347
+ | `--lux-theme-tabs-text-font` | Tabs-Komponente; steuert „text-font“. |
348
+ | `--lux-theme-tabs-label-text-size` | Tabs-Komponente; steuert „label-text-size“. |
349
+ | `--lux-theme-tabs-label-text-weight` | Tabs-Komponente; steuert „label-text-weight“. |
350
+ | `--lux-theme-tabs-border-radius` | Tabs-Komponente; steuert „border-radius“. |
351
+
352
+ ### Buttons
353
+
354
+ | Variable | Beschreibung |
355
+ | -------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
356
+ | `--lux-theme-button-text-default-text-color` | Button-Komponente; steuert „text-default-text-color“. |
357
+ | `--lux-theme-button-text-primary-text-color` | Button-Komponente; steuert „text-primary-text-color“. |
358
+ | `--lux-theme-button-text-accent-text-color` | Button-Komponente; steuert „text-accent-text-color“. |
359
+ | `--lux-theme-button-text-warn-text-color` | Button-Komponente; steuert „text-warn-text-color“. |
360
+ | `--lux-theme-button-icon-default-text-color` | Button-Komponente; steuert „icon-default-text-color“. |
361
+ | `--lux-theme-button-icon-primary-text-color` | Button-Komponente; steuert „icon-primary-text-color“. |
362
+ | `--lux-theme-button-icon-accent-text-color` | Button-Komponente; steuert „icon-accent-text-color“. |
363
+ | `--lux-theme-button-icon-warn-text-color` | Button-Komponente; steuert „icon-warn-text-color“. |
364
+ | `--lux-theme-button-icon-size` | Button-Komponente; steuert „icon-size“. |
365
+ | `--lux-theme-button-icon-container-size` | Button-Komponente; steuert „icon-container-size“. |
366
+ | `--lux-theme-button-icon-container-shape` | Button-Komponente; steuert „icon-container-shape“. |
367
+ | `--lux-theme-button-flat-default-text-color` | Button-Komponente; steuert „flat-default-text-color“. |
368
+ | `--lux-theme-button-flat-default-container-color` | Button-Komponente; steuert „flat-default-container-color“. |
369
+ | `--lux-theme-button-flat-primary-text-color` | Button-Komponente; steuert „flat-primary-text-color“. |
370
+ | `--lux-theme-button-flat-primary-container-color` | Button-Komponente; steuert „flat-primary-container-color“. |
371
+ | `--lux-theme-button-flat-accent-text-color` | Button-Komponente; steuert „flat-accent-text-color“. |
372
+ | `--lux-theme-button-flat-accent-container-color` | Button-Komponente; steuert „flat-accent-container-color“. |
373
+ | `--lux-theme-button-flat-warn-text-color` | Button-Komponente; steuert „flat-warn-text-color“. |
374
+ | `--lux-theme-button-flat-warn-container-color` | Button-Komponente; steuert „flat-warn-container-color“. |
375
+ | `--lux-theme-button-raised-default-text-color` | Button-Komponente; steuert „raised-default-text-color“. |
376
+ | `--lux-theme-button-raised-default-container-color` | Button-Komponente; steuert „raised-default-container-color“. |
377
+ | `--lux-theme-button-raised-primary-text-color` | Button-Komponente; steuert „raised-primary-text-color“. |
378
+ | `--lux-theme-button-raised-primary-container-color` | Button-Komponente; steuert „raised-primary-container-color“. |
379
+ | `--lux-theme-button-raised-accent-text-color` | Button-Komponente; steuert „raised-accent-text-color“. |
380
+ | `--lux-theme-button-raised-accent-container-color` | Button-Komponente; steuert „raised-accent-container-color“. |
381
+ | `--lux-theme-button-raised-warn-text-color` | Button-Komponente; steuert „raised-warn-text-color“. |
382
+ | `--lux-theme-button-raised-warn-container-color` | Button-Komponente; steuert „raised-warn-container-color“. |
383
+ | `--lux-theme-button-stroked-default-text-color` | Button-Komponente; steuert „stroked-default-text-color“. |
384
+ | `--lux-theme-button-stroked-primary-text-color` | Button-Komponente; steuert „stroked-primary-text-color“. |
385
+ | `--lux-theme-button-stroked-accent-text-color` | Button-Komponente; steuert „stroked-accent-text-color“. |
386
+ | `--lux-theme-button-stroked-warn-text-color` | Button-Komponente; steuert „stroked-warn-text-color“. |
387
+ | `--lux-theme-button-rounded-stroked-default-text-color` | Button-Komponente; steuert „rounded-stroked-default-text-color“. |
388
+ | `--lux-theme-button-rounded-stroked-primary-text-color` | Button-Komponente; steuert „rounded-stroked-primary-text-color“. |
389
+ | `--lux-theme-button-rounded-stroked-accent-text-color` | Button-Komponente; steuert „rounded-stroked-accent-text-color“. |
390
+ | `--lux-theme-button-rounded-stroked-warn-text-color` | Button-Komponente; steuert „rounded-stroked-warn-text-color“. |
391
+ | `--lux-theme-button-rounded-default-text-color` | Button-Komponente; steuert „rounded-default-text-color“. |
392
+ | `--lux-theme-button-rounded-default-container-color` | Button-Komponente; steuert „rounded-default-container-color“. |
393
+ | `--lux-theme-button-rounded-primary-text-color` | Button-Komponente; steuert „rounded-primary-text-color“. |
394
+ | `--lux-theme-button-rounded-primary-container-color` | Button-Komponente; steuert „rounded-primary-container-color“. |
395
+ | `--lux-theme-button-rounded-accent-text-color` | Button-Komponente; steuert „rounded-accent-text-color“. |
396
+ | `--lux-theme-button-rounded-accent-container-color` | Button-Komponente; steuert „rounded-accent-container-color“. |
397
+ | `--lux-theme-button-rounded-warn-text-color` | Button-Komponente; steuert „rounded-warn-text-color“. |
398
+ | `--lux-theme-button-rounded-warn-container-color` | Button-Komponente; steuert „rounded-warn-container-color“. |
399
+ | `--lux-theme-button-text-container-shape` | Button-Komponente; steuert „text-container-shape“. |
400
+ | `--lux-theme-button-flat-container-shape` | Button-Komponente; steuert „flat-container-shape“. |
401
+ | `--lux-theme-button-raised-container-shape` | Button-Komponente; steuert „raised-container-shape“. |
402
+ | `--lux-theme-button-stroked-container-shape` | Button-Komponente; steuert „stroked-container-shape“. |
403
+ | `--lux-theme-button-rounded-container-shape` | Button-Komponente; steuert „rounded-container-shape“. |
404
+ | `--lux-theme-button-rounded-stroked-container-shape` | Button-Komponente; steuert „rounded-stroked-container-shape“. |
405
+ | `--lux-theme-button-text-container-height` | Button-Komponente; steuert „text-container-height“. |
406
+ | `--lux-theme-button-flat-container-height` | Button-Komponente; steuert „flat-container-height“. |
407
+ | `--lux-theme-button-raised-container-height` | Button-Komponente; steuert „raised-container-height“. |
408
+ | `--lux-theme-button-stroked-container-height` | Button-Komponente; steuert „stroked-container-height“. |
409
+ | `--lux-theme-button-rounded-container-height` | Button-Komponente; steuert „rounded-container-height“. |
410
+ | `--lux-theme-button-rounded-stroked-container-height` | Button-Komponente; steuert „rounded-stroked-container-height“. |
411
+ | `--lux-theme-button-text-text-size` | Button-Komponente; steuert „text-text-size“. |
412
+ | `--lux-theme-button-flat-text-size` | Button-Komponente; steuert „flat-text-size“. |
413
+ | `--lux-theme-button-raised-text-size` | Button-Komponente; steuert „raised-text-size“. |
414
+ | `--lux-theme-button-stroked-text-size` | Button-Komponente; steuert „stroked-text-size“. |
415
+ | `--lux-theme-button-rounded-text-size` | Button-Komponente; steuert „rounded-text-size“. |
416
+ | `--lux-theme-button-rounded-stroked-text-size` | Button-Komponente; steuert „rounded-stroked-text-size“. |
417
+ | `--lux-theme-button-text-text-weight` | Button-Komponente; steuert „text-text-weight“. |
418
+ | `--lux-theme-button-flat-text-weight` | Button-Komponente; steuert „flat-text-weight“. |
419
+ | `--lux-theme-button-raised-text-weight` | Button-Komponente; steuert „raised-text-weight“. |
420
+ | `--lux-theme-button-stroked-text-weight` | Button-Komponente; steuert „stroked-text-weight“. |
421
+ | `--lux-theme-button-text-font` | Button-Komponente; steuert „text-font“. |
422
+ | `--lux-theme-button-flat-font` | Button-Komponente; steuert „flat-font“. |
423
+ | `--lux-theme-button-raised-font` | Button-Komponente; steuert „raised-font“. |
424
+ | `--lux-theme-button-stroked-font` | Button-Komponente; steuert „stroked-font“. |
425
+ | `--lux-theme-button-text-text-tracking` | Button-Komponente; steuert „text-text-tracking“. |
426
+ | `--lux-theme-button-flat-text-tracking` | Button-Komponente; steuert „flat-text-tracking“. |
427
+ | `--lux-theme-button-raised-text-tracking` | Button-Komponente; steuert „raised-text-tracking“. |
428
+ | `--lux-theme-button-stroked-text-tracking` | Button-Komponente; steuert „stroked-text-tracking“. |
429
+ | `--lux-theme-button-toggle-height` | Button-Komponente; steuert „toggle-height“. |
430
+ | `--lux-theme-button-toggle-height-dense` | Button-Komponente; steuert „toggle-height-dense“. |
431
+ | `--lux-theme-button-toggle-shape` | Button-Komponente; steuert „toggle-shape“. |
432
+ | `--lux-theme-button-toggle-text-color` | Button-Komponente; steuert „toggle-text-color“. |
433
+ | `--lux-theme-button-toggle-divider-color` | Button-Komponente; steuert „toggle-divider-color“. |
434
+ | `--lux-theme-button-toggle-disabled-divider-color` | Button-Komponente; steuert „toggle-disabled-divider-color“. |
435
+ | `--lux-theme-button-toggle-selected-state-text-color` | Button-Komponente; steuert „toggle-selected-state-text-color“. |
436
+ | `--lux-theme-button-toggle-selected-state-background-color` | Button-Komponente; steuert „toggle-selected-state-background-color“. |
437
+ | `--lux-theme-button-toggle-hover-state-layer-opacity` | Button-Komponente; steuert „toggle-hover-state-layer-opacity“. |
438
+ | `--lux-theme-button-toggle-disabled-selected-state-text-color` | Button-Komponente; steuert „toggle-disabled-selected-state-text-color“. |
439
+ | `--lux-theme-button-toggle-disabled-selected-state-background-color` | Button-Komponente; steuert „toggle-disabled-selected-state-background-color“. |
440
+ | `--lux-theme-button-toggle-disabled-state-text-color` | Button-Komponente; steuert „toggle-disabled-state-text-color“. |
441
+ | `--lux-theme-button-toggle-disabled-state-background-color` | Button-Komponente; steuert „toggle-disabled-state-background-color“. |
442
+
443
+ ### Container & Inhalte
444
+
445
+ | Variable | Beschreibung |
446
+ | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
447
+ | `--lux-theme-accordion-panel-container-elevation-shadow-width` | Accordion-Komponente; steuert „panel-container-elevation-shadow-width“. |
448
+ | `--lux-theme-accordion-header-color-neutral` | Accordion-Komponente; steuert „header-color-neutral“. |
449
+ | `--lux-theme-accordion-header-color-on-neutral` | Accordion-Komponente; steuert „header-color-on-neutral“. |
450
+ | `--lux-theme-accordion-header-hover-color-on-neutral` | Accordion-Komponente; steuert „header-hover-color-on-neutral“. |
451
+ | `--lux-theme-accordion-header-focus-color-on-neutral` | Accordion-Komponente; steuert „header-focus-color-on-neutral“. |
452
+ | `--lux-theme-accordion-header-color-primary` | Accordion-Komponente; steuert „header-color-primary“. |
453
+ | `--lux-theme-accordion-header-color-on-primary` | Accordion-Komponente; steuert „header-color-on-primary“. |
454
+ | `--lux-theme-accordion-header-hover-color-on-primary` | Accordion-Komponente; steuert „header-hover-color-on-primary“. |
455
+ | `--lux-theme-accordion-header-focus-color-on-primary` | Accordion-Komponente; steuert „header-focus-color-on-primary“. |
456
+ | `--lux-theme-accordion-header-color-accent` | Accordion-Komponente; steuert „header-color-accent“. |
457
+ | `--lux-theme-accordion-header-color-on-accent` | Accordion-Komponente; steuert „header-color-on-accent“. |
458
+ | `--lux-theme-accordion-header-hover-color-on-accent` | Accordion-Komponente; steuert „header-hover-color-on-accent“. |
459
+ | `--lux-theme-accordion-header-focus-color-on-accent` | Accordion-Komponente; steuert „header-focus-color-on-accent“. |
460
+ | `--lux-theme-accordion-header-color-warn` | Accordion-Komponente; steuert „header-color-warn“. |
461
+ | `--lux-theme-accordion-header-color-on-warn` | Accordion-Komponente; steuert „header-color-on-warn“. |
462
+ | `--lux-theme-accordion-header-hover-color-on-warn` | Accordion-Komponente; steuert „header-hover-color-on-warn“. |
463
+ | `--lux-theme-accordion-header-focus-color-on-warn` | Accordion-Komponente; steuert „header-focus-color-on-warn“. |
464
+ | `--lux-theme-card-title-line-height` | Card-Komponente; steuert „title-line-height“. |
465
+ | `--lux-theme-card-title-text-size` | Card-Komponente; steuert „title-text-size“. |
466
+ | `--lux-theme-card-title-text-weight` | Card-Komponente; steuert „title-text-weight“. |
467
+ | `--lux-theme-card-subtitle-text-size` | Card-Komponente; steuert „subtitle-text-size“. |
468
+ | `--lux-theme-card-subtitle-text-weight` | Card-Komponente; steuert „subtitle-text-weight“. |
469
+ | `--lux-theme-card-subtitle-text-color` | Card-Komponente; steuert „subtitle-text-color“. |
470
+ | `--lux-theme-card-outline-color` | Card-Komponente; steuert „outline-color“. |
471
+ | `--lux-theme-card-shape` | Card-Komponente; steuert „shape“. |
472
+ | `--lux-theme-card-background-color` | Card-Komponente; steuert „background-color“. |
473
+ | `--lux-theme-card-padding` | Card-Komponente; steuert „padding“. |
474
+ | `--lux-theme-dialog-close-button-hover-color` | Dialog-Komponente; steuert „close-button-hover-color“. |
475
+ | `--lux-theme-dialog-close-button-hover-background-color` | Dialog-Komponente; steuert „close-button-hover-background-color“. |
476
+ | `--lux-theme-popup-background-color` | Popup-Komponente; steuert „background-color“. |
477
+ | `--lux-theme-popup-fade-in-duration` | Popup-Komponente; steuert „fade-in-duration“. |
478
+ | `--lux-theme-popup-panel-padding` | Popup-Komponente; steuert „panel-padding“. |
479
+ | `--lux-theme-popup-title-font-size` | Popup-Komponente; steuert „title-font-size“. |
480
+ | `--lux-theme-popup-title-line-height` | Popup-Komponente; steuert „title-line-height“. |
481
+ | `--lux-theme-popup-title-font-weight` | Popup-Komponente; steuert „title-font-weight“. |
482
+ | `--lux-theme-popup-font-size` | Popup-Komponente; steuert „font-size“. |
483
+ | `--lux-theme-popup-line-height` | Popup-Komponente; steuert „line-height“. |
484
+ | `--lux-theme-popup-font-weight` | Popup-Komponente; steuert „font-weight“. |
485
+ | `--lux-theme-tabble-alternate-row-bg-color` | Tabellen-Token (vermutlich Schreibvariante von table); steuert „alternate-row-bg-color“. |
486
+ | `--lux-theme-tile-font-hover-color` | Tile-Komponente; steuert „font-hover-color“. |
487
+ | `--lux-theme-tile-icon-color` | Tile-Komponente; steuert „icon-color“. |
488
+ | `--lux-theme-tile-border-radius` | Tile-Komponente; steuert „border-radius“. |
489
+ | `--lux-theme-tile-borderradius` | Tile-Komponente; steuert „borderradius“. |
490
+ | `--lux-theme-tile-bottom-line-color` | Tile-Komponente; steuert „bottom-line-color“. |
491
+ | `--lux-theme-tile-ac-icon-color` | Tile-Komponente; steuert „ac-icon-color“. |
492
+ | `--lux-theme-tile-ac-hover-bg-color` | Tile-Komponente; steuert „ac-hover-bg-color“. |
493
+ | `--lux-theme-tile-ac-hover-border-color` | Tile-Komponente; steuert „ac-hover-border-color“. |
494
+
495
+ ### Feedback & Hinweise
496
+
497
+ | Variable | Beschreibung |
498
+ | ----------------------------------------------- | ------------------------------------------------------------------- |
499
+ | `--lux-theme-snackbar-red` | Farbtoken für Snackbar-Variante „red“. |
500
+ | `--lux-theme-snackbar-green` | Farbtoken für Snackbar-Variante „green“. |
501
+ | `--lux-theme-snackbar-blue` | Farbtoken für Snackbar-Variante „blue“. |
502
+ | `--lux-theme-snackbar-orange` | Farbtoken für Snackbar-Variante „orange“. |
503
+ | `--lux-theme-snackbar-yellow` | Farbtoken für Snackbar-Variante „yellow“. |
504
+ | `--lux-theme-snackbar-white` | Farbtoken für Snackbar-Variante „white“. |
505
+ | `--lux-theme-badge-red` | Badge-Komponente; steuert „red“. |
506
+ | `--lux-theme-badge-on-red` | Badge-Komponente; steuert „on-red“. |
507
+ | `--lux-theme-badge-green` | Badge-Komponente; steuert „green“. |
508
+ | `--lux-theme-badge-on-green` | Badge-Komponente; steuert „on-green“. |
509
+ | `--lux-theme-badge-purple` | Badge-Komponente; steuert „purple“. |
510
+ | `--lux-theme-badge-on-purple` | Badge-Komponente; steuert „on-purple“. |
511
+ | `--lux-theme-badge-blue` | Badge-Komponente; steuert „blue“. |
512
+ | `--lux-theme-badge-on-blue` | Badge-Komponente; steuert „on-blue“. |
513
+ | `--lux-theme-badge-gray` | Badge-Komponente; steuert „gray“. |
514
+ | `--lux-theme-badge-on-gray` | Badge-Komponente; steuert „on-gray“. |
515
+ | `--lux-theme-badge-orange` | Badge-Komponente; steuert „orange“. |
516
+ | `--lux-theme-badge-on-orange` | Badge-Komponente; steuert „on-orange“. |
517
+ | `--lux-theme-badge-black` | Badge-Komponente; steuert „black“. |
518
+ | `--lux-theme-badge-on-black` | Badge-Komponente; steuert „on-black“. |
519
+ | `--lux-theme-badge-white` | Badge-Komponente; steuert „white“. |
520
+ | `--lux-theme-badge-on-white` | Badge-Komponente; steuert „on-white“. |
521
+ | `--lux-theme-badge-yellow` | Badge-Komponente; steuert „yellow“. |
522
+ | `--lux-theme-badge-on-yellow` | Badge-Komponente; steuert „on-yellow“. |
523
+ | `--lux-theme-badge-pink` | Badge-Komponente; steuert „pink“. |
524
+ | `--lux-theme-badge-on-pink` | Badge-Komponente; steuert „on-pink“. |
525
+ | `--lux-theme-badge-lightblue` | Badge-Komponente; steuert „lightblue“. |
526
+ | `--lux-theme-badge-on-lightblue` | Badge-Komponente; steuert „on-lightblue“. |
527
+ | `--lux-theme-icon-red` | Icon-Komponente; steuert „red“. |
528
+ | `--lux-theme-icon-on-red` | Icon-Komponente; steuert „on-red“. |
529
+ | `--lux-theme-icon-green` | Icon-Komponente; steuert „green“. |
530
+ | `--lux-theme-icon-on-green` | Icon-Komponente; steuert „on-green“. |
531
+ | `--lux-theme-icon-purple` | Icon-Komponente; steuert „purple“. |
532
+ | `--lux-theme-icon-on-purple` | Icon-Komponente; steuert „on-purple“. |
533
+ | `--lux-theme-icon-blue` | Icon-Komponente; steuert „blue“. |
534
+ | `--lux-theme-icon-on-blue` | Icon-Komponente; steuert „on-blue“. |
535
+ | `--lux-theme-icon-gray` | Icon-Komponente; steuert „gray“. |
536
+ | `--lux-theme-icon-on-gray` | Icon-Komponente; steuert „on-gray“. |
537
+ | `--lux-theme-icon-orange` | Icon-Komponente; steuert „orange“. |
538
+ | `--lux-theme-icon-on-orange` | Icon-Komponente; steuert „on-orange“. |
539
+ | `--lux-theme-icon-black` | Icon-Komponente; steuert „black“. |
540
+ | `--lux-theme-icon-on-black` | Icon-Komponente; steuert „on-black“. |
541
+ | `--lux-theme-icon-yellow` | Icon-Komponente; steuert „yellow“. |
542
+ | `--lux-theme-icon-on-yellow` | Icon-Komponente; steuert „on-yellow“. |
543
+ | `--lux-theme-icon-pink` | Icon-Komponente; steuert „pink“. |
544
+ | `--lux-theme-icon-on-pink` | Icon-Komponente; steuert „on-pink“. |
545
+ | `--lux-theme-icon-lightblue` | Icon-Komponente; steuert „lightblue“. |
546
+ | `--lux-theme-icon-on-lightblue` | Icon-Komponente; steuert „on-lightblue“. |
547
+ | `--lux-theme-link-plain-color` | Link-Komponente; steuert „plain-color“. |
548
+ | `--lux-theme-link-plain-icon-color` | Link-Komponente; steuert „plain-icon-color“. |
549
+ | `--lux-theme-link-plain-text-decoration` | Link-Komponente; steuert „plain-text-decoration“. |
550
+ | `--lux-theme-link-plain-background-color` | Link-Komponente; steuert „plain-background-color“. |
551
+ | `--lux-theme-link-plain-hover-color` | Link-Komponente; steuert „plain-hover-color“. |
552
+ | `--lux-theme-link-plain-hover-background-color` | Link-Komponente; steuert „plain-hover-background-color“. |
553
+ | `--lux-theme-messagebox-red` | Messagebox-Komponente; steuert „red“. |
554
+ | `--lux-theme-messagebox-on-red` | Messagebox-Komponente; steuert „on-red“. |
555
+ | `--lux-theme-messagebox-green` | Messagebox-Komponente; steuert „green“. |
556
+ | `--lux-theme-messagebox-on-green` | Messagebox-Komponente; steuert „on-green“. |
557
+ | `--lux-theme-messagebox-purple` | Messagebox-Komponente; steuert „purple“. |
558
+ | `--lux-theme-messagebox-on-purple` | Messagebox-Komponente; steuert „on-purple“. |
559
+ | `--lux-theme-messagebox-blue` | Messagebox-Komponente; steuert „blue“. |
560
+ | `--lux-theme-messagebox-on-blue` | Messagebox-Komponente; steuert „on-blue“. |
561
+ | `--lux-theme-messagebox-gray` | Messagebox-Komponente; steuert „gray“. |
562
+ | `--lux-theme-messagebox-on-gray` | Messagebox-Komponente; steuert „on-gray“. |
563
+ | `--lux-theme-messagebox-orange` | Messagebox-Komponente; steuert „orange“. |
564
+ | `--lux-theme-messagebox-on-orange` | Messagebox-Komponente; steuert „on-orange“. |
565
+ | `--lux-theme-messagebox-white` | Messagebox-Komponente; steuert „white“. |
566
+ | `--lux-theme-messagebox-on-white` | Messagebox-Komponente; steuert „on-white“. |
567
+ | `--lux-theme-messagebox-yellow` | Messagebox-Komponente; steuert „yellow“. |
568
+ | `--lux-theme-messagebox-on-yellow` | Messagebox-Komponente; steuert „on-yellow“. |
569
+ | `--lux-theme-messagebox-pink` | Messagebox-Komponente; steuert „pink“. |
570
+ | `--lux-theme-messagebox-on-pink` | Messagebox-Komponente; steuert „on-pink“. |
571
+ | `--lux-theme-messagebox-lightblue` | Messagebox-Komponente; steuert „lightblue“. |
572
+ | `--lux-theme-messagebox-on-lightblue` | Messagebox-Komponente; steuert „on-lightblue“. |
573
+ | `--lux-theme-textbox-default-color` | Textbox-/Hinweisbox-Komponente; steuert „default-color“. |
574
+ | `--lux-theme-textbox-default-on-color` | Textbox-/Hinweisbox-Komponente; steuert „default-on-color“. |
575
+ | `--lux-theme-textbox-default-border-color` | Textbox-/Hinweisbox-Komponente; steuert „default-border-color“. |
576
+ | `--lux-theme-textbox-default-icon-color` | Textbox-/Hinweisbox-Komponente; steuert „default-icon-color“. |
577
+ | `--lux-theme-textbox-blue-color` | Textbox-/Hinweisbox-Komponente; steuert „blue-color“. |
578
+ | `--lux-theme-textbox-blue-on-color` | Textbox-/Hinweisbox-Komponente; steuert „blue-on-color“. |
579
+ | `--lux-theme-textbox-blue-border-color` | Textbox-/Hinweisbox-Komponente; steuert „blue-border-color“. |
580
+ | `--lux-theme-textbox-blue-icon-color` | Textbox-/Hinweisbox-Komponente; steuert „blue-icon-color“. |
581
+ | `--lux-theme-textbox-green-color` | Textbox-/Hinweisbox-Komponente; steuert „green-color“. |
582
+ | `--lux-theme-textbox-green-on-color` | Textbox-/Hinweisbox-Komponente; steuert „green-on-color“. |
583
+ | `--lux-theme-textbox-green-border-color` | Textbox-/Hinweisbox-Komponente; steuert „green-border-color“. |
584
+ | `--lux-theme-textbox-green-icon-color` | Textbox-/Hinweisbox-Komponente; steuert „green-icon-color“. |
585
+ | `--lux-theme-textbox-red-color` | Textbox-/Hinweisbox-Komponente; steuert „red-color“. |
586
+ | `--lux-theme-textbox-red-on-color` | Textbox-/Hinweisbox-Komponente; steuert „red-on-color“. |
587
+ | `--lux-theme-textbox-red-border-color` | Textbox-/Hinweisbox-Komponente; steuert „red-border-color“. |
588
+ | `--lux-theme-textbox-red-icon-color` | Textbox-/Hinweisbox-Komponente; steuert „red-icon-color“. |
589
+ | `--lux-theme-textbox-yellow-color` | Textbox-/Hinweisbox-Komponente; steuert „yellow-color“. |
590
+ | `--lux-theme-textbox-yellow-on-color` | Textbox-/Hinweisbox-Komponente; steuert „yellow-on-color“. |
591
+ | `--lux-theme-textbox-yellow-border-color` | Textbox-/Hinweisbox-Komponente; steuert „yellow-border-color“. |
592
+ | `--lux-theme-textbox-yellow-icon-color` | Textbox-/Hinweisbox-Komponente; steuert „yellow-icon-color“. |
593
+ | `--lux-theme-tour-hint-overlay-backdrop-color` | Tour-/Onboarding-Komponente; steuert „hint-overlay-backdrop-color“. |
594
+
595
+ ### Sonstiges
596
+
597
+ | Variable | Beschreibung |
598
+ | ----------------------------------------- | --------------------------------------------- |
599
+ | `--lux-theme-dark-primary-text` | Allgemeiner projekt-spezifischer Theme-Token. |
600
+ | `--lux-theme-dark-secondary-text` | Allgemeiner projekt-spezifischer Theme-Token. |
601
+ | `--lux-theme-dark-disabled-text` | Allgemeiner projekt-spezifischer Theme-Token. |
602
+ | `--lux-theme-dark-dividers` | Allgemeiner projekt-spezifischer Theme-Token. |
603
+ | `--lux-theme-dark-focused` | Allgemeiner projekt-spezifischer Theme-Token. |
604
+ | `--lux-theme-light-primary-text` | Allgemeiner projekt-spezifischer Theme-Token. |
605
+ | `--lux-theme-light-secondary-text` | Allgemeiner projekt-spezifischer Theme-Token. |
606
+ | `--lux-theme-light-disabled-text` | Allgemeiner projekt-spezifischer Theme-Token. |
607
+ | `--lux-theme-light-dividers` | Allgemeiner projekt-spezifischer Theme-Token. |
608
+ | `--lux-theme-light-focused` | Allgemeiner projekt-spezifischer Theme-Token. |
609
+ | `--lux-theme-state-layer-color` | Allgemeiner projekt-spezifischer Theme-Token. |
610
+ | `--lux-theme-focus-state-layer-opacity` | Allgemeiner projekt-spezifischer Theme-Token. |
611
+ | `--lux-theme-pressed-state-layer-opacity` | Allgemeiner projekt-spezifischer Theme-Token. |
612
+ | `--lux-focus-state-layer-color` | Allgemeiner projekt-spezifischer Theme-Token. |
613
+ | `--lux-z-action-bar` | Allgemeiner projekt-spezifischer Theme-Token. |
614
+ | `--lux-z-header` | Allgemeiner projekt-spezifischer Theme-Token. |
615
+ | `--lux-z-backdrop` | Allgemeiner projekt-spezifischer Theme-Token. |
616
+ | `--lux-z-drawer` | Allgemeiner projekt-spezifischer Theme-Token. |
617
+ | `--lux-z-skip-link` | Allgemeiner projekt-spezifischer Theme-Token. |
618
+ | `--lux-theme-file-input-button-size` | Allgemeiner projekt-spezifischer Theme-Token. |
619
+ | `--lux-theme-file-input-button-padding` | Allgemeiner projekt-spezifischer Theme-Token. |
620
+
621
+ ## CSS-Klassen
622
+
623
+ ### Textfarbe
624
+
625
+ | CSS-Klasse | Beschreibung |
626
+ | --------------------------------- | ----------------------------------------------------------------------- |
627
+ | `.lux-color-primary-0` | Setzt die Textfarbe (`color`) auf den Farbtoken „primary-0“. |
628
+ | `.lux-color-primary-10` | Setzt die Textfarbe (`color`) auf den Farbtoken „primary-10“. |
629
+ | `.lux-color-primary-20` | Setzt die Textfarbe (`color`) auf den Farbtoken „primary-20“. |
630
+ | `.lux-color-primary-25` | Setzt die Textfarbe (`color`) auf den Farbtoken „primary-25“. |
631
+ | `.lux-color-primary-30` | Setzt die Textfarbe (`color`) auf den Farbtoken „primary-30“. |
632
+ | `.lux-color-primary-35` | Setzt die Textfarbe (`color`) auf den Farbtoken „primary-35“. |
633
+ | `.lux-color-primary-40` | Setzt die Textfarbe (`color`) auf den Farbtoken „primary-40“. |
634
+ | `.lux-color-primary-50` | Setzt die Textfarbe (`color`) auf den Farbtoken „primary-50“. |
635
+ | `.lux-color-primary-60` | Setzt die Textfarbe (`color`) auf den Farbtoken „primary-60“. |
636
+ | `.lux-color-primary-70` | Setzt die Textfarbe (`color`) auf den Farbtoken „primary-70“. |
637
+ | `.lux-color-primary-80` | Setzt die Textfarbe (`color`) auf den Farbtoken „primary-80“. |
638
+ | `.lux-color-primary-90` | Setzt die Textfarbe (`color`) auf den Farbtoken „primary-90“. |
639
+ | `.lux-color-primary-95` | Setzt die Textfarbe (`color`) auf den Farbtoken „primary-95“. |
640
+ | `.lux-color-primary-98` | Setzt die Textfarbe (`color`) auf den Farbtoken „primary-98“. |
641
+ | `.lux-color-primary-99` | Setzt die Textfarbe (`color`) auf den Farbtoken „primary-99“. |
642
+ | `.lux-color-primary-100` | Setzt die Textfarbe (`color`) auf den Farbtoken „primary-100“. |
643
+ | `.lux-color-accent-0` | Setzt die Textfarbe (`color`) auf den Farbtoken „accent-0“. |
644
+ | `.lux-color-accent-10` | Setzt die Textfarbe (`color`) auf den Farbtoken „accent-10“. |
645
+ | `.lux-color-accent-20` | Setzt die Textfarbe (`color`) auf den Farbtoken „accent-20“. |
646
+ | `.lux-color-accent-25` | Setzt die Textfarbe (`color`) auf den Farbtoken „accent-25“. |
647
+ | `.lux-color-accent-30` | Setzt die Textfarbe (`color`) auf den Farbtoken „accent-30“. |
648
+ | `.lux-color-accent-35` | Setzt die Textfarbe (`color`) auf den Farbtoken „accent-35“. |
649
+ | `.lux-color-accent-40` | Setzt die Textfarbe (`color`) auf den Farbtoken „accent-40“. |
650
+ | `.lux-color-accent-50` | Setzt die Textfarbe (`color`) auf den Farbtoken „accent-50“. |
651
+ | `.lux-color-accent-60` | Setzt die Textfarbe (`color`) auf den Farbtoken „accent-60“. |
652
+ | `.lux-color-accent-70` | Setzt die Textfarbe (`color`) auf den Farbtoken „accent-70“. |
653
+ | `.lux-color-accent-80` | Setzt die Textfarbe (`color`) auf den Farbtoken „accent-80“. |
654
+ | `.lux-color-accent-90` | Setzt die Textfarbe (`color`) auf den Farbtoken „accent-90“. |
655
+ | `.lux-color-accent-95` | Setzt die Textfarbe (`color`) auf den Farbtoken „accent-95“. |
656
+ | `.lux-color-accent-98` | Setzt die Textfarbe (`color`) auf den Farbtoken „accent-98“. |
657
+ | `.lux-color-accent-99` | Setzt die Textfarbe (`color`) auf den Farbtoken „accent-99“. |
658
+ | `.lux-color-accent-100` | Setzt die Textfarbe (`color`) auf den Farbtoken „accent-100“. |
659
+ | `.lux-color-neutral-0` | Setzt die Textfarbe (`color`) auf den Farbtoken „neutral-0“. |
660
+ | `.lux-color-neutral-10` | Setzt die Textfarbe (`color`) auf den Farbtoken „neutral-10“. |
661
+ | `.lux-color-neutral-20` | Setzt die Textfarbe (`color`) auf den Farbtoken „neutral-20“. |
662
+ | `.lux-color-neutral-25` | Setzt die Textfarbe (`color`) auf den Farbtoken „neutral-25“. |
663
+ | `.lux-color-neutral-30` | Setzt die Textfarbe (`color`) auf den Farbtoken „neutral-30“. |
664
+ | `.lux-color-neutral-35` | Setzt die Textfarbe (`color`) auf den Farbtoken „neutral-35“. |
665
+ | `.lux-color-neutral-40` | Setzt die Textfarbe (`color`) auf den Farbtoken „neutral-40“. |
666
+ | `.lux-color-neutral-50` | Setzt die Textfarbe (`color`) auf den Farbtoken „neutral-50“. |
667
+ | `.lux-color-neutral-60` | Setzt die Textfarbe (`color`) auf den Farbtoken „neutral-60“. |
668
+ | `.lux-color-neutral-70` | Setzt die Textfarbe (`color`) auf den Farbtoken „neutral-70“. |
669
+ | `.lux-color-neutral-80` | Setzt die Textfarbe (`color`) auf den Farbtoken „neutral-80“. |
670
+ | `.lux-color-neutral-90` | Setzt die Textfarbe (`color`) auf den Farbtoken „neutral-90“. |
671
+ | `.lux-color-neutral-95` | Setzt die Textfarbe (`color`) auf den Farbtoken „neutral-95“. |
672
+ | `.lux-color-neutral-98` | Setzt die Textfarbe (`color`) auf den Farbtoken „neutral-98“. |
673
+ | `.lux-color-neutral-99` | Setzt die Textfarbe (`color`) auf den Farbtoken „neutral-99“. |
674
+ | `.lux-color-neutral-100` | Setzt die Textfarbe (`color`) auf den Farbtoken „neutral-100“. |
675
+ | `.lux-color-warn-0` | Setzt die Textfarbe (`color`) auf den Farbtoken „warn-0“. |
676
+ | `.lux-color-warn-10` | Setzt die Textfarbe (`color`) auf den Farbtoken „warn-10“. |
677
+ | `.lux-color-warn-20` | Setzt die Textfarbe (`color`) auf den Farbtoken „warn-20“. |
678
+ | `.lux-color-warn-25` | Setzt die Textfarbe (`color`) auf den Farbtoken „warn-25“. |
679
+ | `.lux-color-warn-30` | Setzt die Textfarbe (`color`) auf den Farbtoken „warn-30“. |
680
+ | `.lux-color-warn-35` | Setzt die Textfarbe (`color`) auf den Farbtoken „warn-35“. |
681
+ | `.lux-color-warn-40` | Setzt die Textfarbe (`color`) auf den Farbtoken „warn-40“. |
682
+ | `.lux-color-warn-50` | Setzt die Textfarbe (`color`) auf den Farbtoken „warn-50“. |
683
+ | `.lux-color-warn-60` | Setzt die Textfarbe (`color`) auf den Farbtoken „warn-60“. |
684
+ | `.lux-color-warn-70` | Setzt die Textfarbe (`color`) auf den Farbtoken „warn-70“. |
685
+ | `.lux-color-warn-80` | Setzt die Textfarbe (`color`) auf den Farbtoken „warn-80“. |
686
+ | `.lux-color-warn-90` | Setzt die Textfarbe (`color`) auf den Farbtoken „warn-90“. |
687
+ | `.lux-color-warn-95` | Setzt die Textfarbe (`color`) auf den Farbtoken „warn-95“. |
688
+ | `.lux-color-warn-98` | Setzt die Textfarbe (`color`) auf den Farbtoken „warn-98“. |
689
+ | `.lux-color-warn-99` | Setzt die Textfarbe (`color`) auf den Farbtoken „warn-99“. |
690
+ | `.lux-color-warn-100` | Setzt die Textfarbe (`color`) auf den Farbtoken „warn-100“. |
691
+ | `.lux-color-dark-divider` | Setzt die Textfarbe (`color`) auf den Farbtoken „dark-divider“. |
692
+ | `.lux-color-light-divider` | Setzt die Textfarbe (`color`) auf den Farbtoken „light-divider“. |
693
+ | `.lux-color-red` | Setzt die Textfarbe (`color`) auf den Farbtoken „red“. |
694
+ | `.lux-color-green` | Setzt die Textfarbe (`color`) auf den Farbtoken „green“. |
695
+ | `.lux-color-purple` | Setzt die Textfarbe (`color`) auf den Farbtoken „purple“. |
696
+ | `.lux-color-blue` | Setzt die Textfarbe (`color`) auf den Farbtoken „blue“. |
697
+ | `.lux-color-gray` | Setzt die Textfarbe (`color`) auf den Farbtoken „gray“. |
698
+ | `.lux-color-orange` | Setzt die Textfarbe (`color`) auf den Farbtoken „orange“. |
699
+ | `.lux-color-black` | Setzt die Textfarbe (`color`) auf den Farbtoken „black“. |
700
+ | `.lux-color-white` | Setzt die Textfarbe (`color`) auf den Farbtoken „white“. |
701
+ | `.lux-color-yellow` | Setzt die Textfarbe (`color`) auf den Farbtoken „yellow“. |
702
+ | `.lux-color-pink` | Setzt die Textfarbe (`color`) auf den Farbtoken „pink“. |
703
+ | `.lux-color-lightblue` | Setzt die Textfarbe (`color`) auf den Farbtoken „lightblue“. |
704
+ | `.lux-color-dark-primary-text` | Setzt die Textfarbe (`color`) auf den Farbtoken „dark-primary-text“. |
705
+ | `.lux-color-dark-secondary-text` | Setzt die Textfarbe (`color`) auf den Farbtoken „dark-secondary-text“. |
706
+ | `.lux-color-dark-disabled-text` | Setzt die Textfarbe (`color`) auf den Farbtoken „dark-disabled-text“. |
707
+ | `.lux-color-dark-focused` | Setzt die Textfarbe (`color`) auf den Farbtoken „dark-focused“. |
708
+ | `.lux-color-light-primary-text` | Setzt die Textfarbe (`color`) auf den Farbtoken „light-primary-text“. |
709
+ | `.lux-color-light-secondary-text` | Setzt die Textfarbe (`color`) auf den Farbtoken „light-secondary-text“. |
710
+ | `.lux-color-light-disabled-text` | Setzt die Textfarbe (`color`) auf den Farbtoken „light-disabled-text“. |
711
+ | `.lux-color-light-focused` | Setzt die Textfarbe (`color`) auf den Farbtoken „light-focused“. |
712
+
713
+ ### Hintergrundfarbe
714
+
715
+ | CSS-Klasse | Beschreibung |
716
+ | --------------------------- | -------------------------------------------------------------------------------- |
717
+ | `.lux-bg-color-primary-0` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „primary-0“. |
718
+ | `.lux-bg-color-primary-10` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „primary-10“. |
719
+ | `.lux-bg-color-primary-20` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „primary-20“. |
720
+ | `.lux-bg-color-primary-25` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „primary-25“. |
721
+ | `.lux-bg-color-primary-30` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „primary-30“. |
722
+ | `.lux-bg-color-primary-35` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „primary-35“. |
723
+ | `.lux-bg-color-primary-40` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „primary-40“. |
724
+ | `.lux-bg-color-primary-50` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „primary-50“. |
725
+ | `.lux-bg-color-primary-60` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „primary-60“. |
726
+ | `.lux-bg-color-primary-70` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „primary-70“. |
727
+ | `.lux-bg-color-primary-80` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „primary-80“. |
728
+ | `.lux-bg-color-primary-90` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „primary-90“. |
729
+ | `.lux-bg-color-primary-95` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „primary-95“. |
730
+ | `.lux-bg-color-primary-98` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „primary-98“. |
731
+ | `.lux-bg-color-primary-99` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „primary-99“. |
732
+ | `.lux-bg-color-primary-100` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „primary-100“. |
733
+ | `.lux-bg-color-accent-0` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „accent-0“. |
734
+ | `.lux-bg-color-accent-10` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „accent-10“. |
735
+ | `.lux-bg-color-accent-20` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „accent-20“. |
736
+ | `.lux-bg-color-accent-25` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „accent-25“. |
737
+ | `.lux-bg-color-accent-30` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „accent-30“. |
738
+ | `.lux-bg-color-accent-35` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „accent-35“. |
739
+ | `.lux-bg-color-accent-40` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „accent-40“. |
740
+ | `.lux-bg-color-accent-50` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „accent-50“. |
741
+ | `.lux-bg-color-accent-60` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „accent-60“. |
742
+ | `.lux-bg-color-accent-70` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „accent-70“. |
743
+ | `.lux-bg-color-accent-80` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „accent-80“. |
744
+ | `.lux-bg-color-accent-90` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „accent-90“. |
745
+ | `.lux-bg-color-accent-95` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „accent-95“. |
746
+ | `.lux-bg-color-accent-98` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „accent-98“. |
747
+ | `.lux-bg-color-accent-99` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „accent-99“. |
748
+ | `.lux-bg-color-accent-100` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „accent-100“. |
749
+ | `.lux-bg-color-neutral-0` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „neutral-0“. |
750
+ | `.lux-bg-color-neutral-10` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „neutral-10“. |
751
+ | `.lux-bg-color-neutral-20` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „neutral-20“. |
752
+ | `.lux-bg-color-neutral-25` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „neutral-25“. |
753
+ | `.lux-bg-color-neutral-30` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „neutral-30“. |
754
+ | `.lux-bg-color-neutral-35` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „neutral-35“. |
755
+ | `.lux-bg-color-neutral-40` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „neutral-40“. |
756
+ | `.lux-bg-color-neutral-50` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „neutral-50“. |
757
+ | `.lux-bg-color-neutral-60` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „neutral-60“. |
758
+ | `.lux-bg-color-neutral-70` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „neutral-70“. |
759
+ | `.lux-bg-color-neutral-80` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „neutral-80“. |
760
+ | `.lux-bg-color-neutral-90` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „neutral-90“. |
761
+ | `.lux-bg-color-neutral-95` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „neutral-95“. |
762
+ | `.lux-bg-color-neutral-98` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „neutral-98“. |
763
+ | `.lux-bg-color-neutral-99` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „neutral-99“. |
764
+ | `.lux-bg-color-neutral-100` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „neutral-100“. |
765
+ | `.lux-bg-color-warn-0` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „warn-0“. |
766
+ | `.lux-bg-color-warn-10` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „warn-10“. |
767
+ | `.lux-bg-color-warn-20` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „warn-20“. |
768
+ | `.lux-bg-color-warn-25` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „warn-25“. |
769
+ | `.lux-bg-color-warn-30` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „warn-30“. |
770
+ | `.lux-bg-color-warn-35` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „warn-35“. |
771
+ | `.lux-bg-color-warn-40` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „warn-40“. |
772
+ | `.lux-bg-color-warn-50` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „warn-50“. |
773
+ | `.lux-bg-color-warn-60` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „warn-60“. |
774
+ | `.lux-bg-color-warn-70` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „warn-70“. |
775
+ | `.lux-bg-color-warn-80` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „warn-80“. |
776
+ | `.lux-bg-color-warn-90` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „warn-90“. |
777
+ | `.lux-bg-color-warn-95` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „warn-95“. |
778
+ | `.lux-bg-color-warn-98` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „warn-98“. |
779
+ | `.lux-bg-color-warn-99` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „warn-99“. |
780
+ | `.lux-bg-color-warn-100` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „warn-100“. |
781
+ | `.lux-bg-color-red` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „red“. |
782
+ | `.lux-bg-color-green` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „green“. |
783
+ | `.lux-bg-color-purple` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „purple“. |
784
+ | `.lux-bg-color-blue` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „blue“. |
785
+ | `.lux-bg-color-gray` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „gray“. |
786
+ | `.lux-bg-color-orange` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „orange“. |
787
+ | `.lux-bg-color-black` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „black“. |
788
+ | `.lux-bg-color-white` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „white“. |
789
+ | `.lux-bg-color-yellow` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „yellow“. |
790
+ | `.lux-bg-color-pink` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „pink“. |
791
+ | `.lux-bg-color-lightblue` | Setzt die Hintergrundfarbe (`background-color`) auf den Farbtoken „lightblue“. |
792
+
793
+ ### Rahmenfarbe
794
+
795
+ | CSS-Klasse | Beschreibung |
796
+ | ------------------------------- | ----------------------------------------------------------------------- |
797
+ | `.lux-border-color-primary-0` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „primary-0“. |
798
+ | `.lux-border-color-primary-10` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „primary-10“. |
799
+ | `.lux-border-color-primary-20` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „primary-20“. |
800
+ | `.lux-border-color-primary-25` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „primary-25“. |
801
+ | `.lux-border-color-primary-30` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „primary-30“. |
802
+ | `.lux-border-color-primary-35` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „primary-35“. |
803
+ | `.lux-border-color-primary-40` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „primary-40“. |
804
+ | `.lux-border-color-primary-50` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „primary-50“. |
805
+ | `.lux-border-color-primary-60` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „primary-60“. |
806
+ | `.lux-border-color-primary-70` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „primary-70“. |
807
+ | `.lux-border-color-primary-80` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „primary-80“. |
808
+ | `.lux-border-color-primary-90` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „primary-90“. |
809
+ | `.lux-border-color-primary-95` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „primary-95“. |
810
+ | `.lux-border-color-primary-98` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „primary-98“. |
811
+ | `.lux-border-color-primary-99` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „primary-99“. |
812
+ | `.lux-border-color-primary-100` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „primary-100“. |
813
+ | `.lux-border-color-accent-0` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „accent-0“. |
814
+ | `.lux-border-color-accent-10` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „accent-10“. |
815
+ | `.lux-border-color-accent-20` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „accent-20“. |
816
+ | `.lux-border-color-accent-25` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „accent-25“. |
817
+ | `.lux-border-color-accent-30` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „accent-30“. |
818
+ | `.lux-border-color-accent-35` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „accent-35“. |
819
+ | `.lux-border-color-accent-40` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „accent-40“. |
820
+ | `.lux-border-color-accent-50` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „accent-50“. |
821
+ | `.lux-border-color-accent-60` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „accent-60“. |
822
+ | `.lux-border-color-accent-70` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „accent-70“. |
823
+ | `.lux-border-color-accent-80` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „accent-80“. |
824
+ | `.lux-border-color-accent-90` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „accent-90“. |
825
+ | `.lux-border-color-accent-95` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „accent-95“. |
826
+ | `.lux-border-color-accent-98` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „accent-98“. |
827
+ | `.lux-border-color-accent-99` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „accent-99“. |
828
+ | `.lux-border-color-accent-100` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „accent-100“. |
829
+ | `.lux-border-color-neutral-0` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „neutral-0“. |
830
+ | `.lux-border-color-neutral-10` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „neutral-10“. |
831
+ | `.lux-border-color-neutral-20` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „neutral-20“. |
832
+ | `.lux-border-color-neutral-25` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „neutral-25“. |
833
+ | `.lux-border-color-neutral-30` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „neutral-30“. |
834
+ | `.lux-border-color-neutral-35` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „neutral-35“. |
835
+ | `.lux-border-color-neutral-40` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „neutral-40“. |
836
+ | `.lux-border-color-neutral-50` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „neutral-50“. |
837
+ | `.lux-border-color-neutral-60` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „neutral-60“. |
838
+ | `.lux-border-color-neutral-70` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „neutral-70“. |
839
+ | `.lux-border-color-neutral-80` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „neutral-80“. |
840
+ | `.lux-border-color-neutral-90` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „neutral-90“. |
841
+ | `.lux-border-color-neutral-95` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „neutral-95“. |
842
+ | `.lux-border-color-neutral-98` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „neutral-98“. |
843
+ | `.lux-border-color-neutral-99` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „neutral-99“. |
844
+ | `.lux-border-color-neutral-100` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „neutral-100“. |
845
+ | `.lux-border-color-warn-0` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „warn-0“. |
846
+ | `.lux-border-color-warn-10` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „warn-10“. |
847
+ | `.lux-border-color-warn-20` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „warn-20“. |
848
+ | `.lux-border-color-warn-25` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „warn-25“. |
849
+ | `.lux-border-color-warn-30` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „warn-30“. |
850
+ | `.lux-border-color-warn-35` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „warn-35“. |
851
+ | `.lux-border-color-warn-40` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „warn-40“. |
852
+ | `.lux-border-color-warn-50` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „warn-50“. |
853
+ | `.lux-border-color-warn-60` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „warn-60“. |
854
+ | `.lux-border-color-warn-70` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „warn-70“. |
855
+ | `.lux-border-color-warn-80` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „warn-80“. |
856
+ | `.lux-border-color-warn-90` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „warn-90“. |
857
+ | `.lux-border-color-warn-95` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „warn-95“. |
858
+ | `.lux-border-color-warn-98` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „warn-98“. |
859
+ | `.lux-border-color-warn-99` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „warn-99“. |
860
+ | `.lux-border-color-warn-100` | Setzt die Rahmenfarbe (`border-color`) auf den Farbtoken „warn-100“. |
861
+
862
+ ### Outline-Farbe
863
+
864
+ | CSS-Klasse | Beschreibung |
865
+ | -------------------------------- | -------------------------------------------------------------------------- |
866
+ | `.lux-outline-color-primary-0` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „primary-0“. |
867
+ | `.lux-outline-color-primary-10` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „primary-10“. |
868
+ | `.lux-outline-color-primary-20` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „primary-20“. |
869
+ | `.lux-outline-color-primary-25` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „primary-25“. |
870
+ | `.lux-outline-color-primary-30` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „primary-30“. |
871
+ | `.lux-outline-color-primary-35` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „primary-35“. |
872
+ | `.lux-outline-color-primary-40` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „primary-40“. |
873
+ | `.lux-outline-color-primary-50` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „primary-50“. |
874
+ | `.lux-outline-color-primary-60` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „primary-60“. |
875
+ | `.lux-outline-color-primary-70` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „primary-70“. |
876
+ | `.lux-outline-color-primary-80` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „primary-80“. |
877
+ | `.lux-outline-color-primary-90` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „primary-90“. |
878
+ | `.lux-outline-color-primary-95` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „primary-95“. |
879
+ | `.lux-outline-color-primary-98` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „primary-98“. |
880
+ | `.lux-outline-color-primary-99` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „primary-99“. |
881
+ | `.lux-outline-color-primary-100` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „primary-100“. |
882
+ | `.lux-outline-color-accent-0` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „accent-0“. |
883
+ | `.lux-outline-color-accent-10` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „accent-10“. |
884
+ | `.lux-outline-color-accent-20` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „accent-20“. |
885
+ | `.lux-outline-color-accent-25` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „accent-25“. |
886
+ | `.lux-outline-color-accent-30` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „accent-30“. |
887
+ | `.lux-outline-color-accent-35` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „accent-35“. |
888
+ | `.lux-outline-color-accent-40` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „accent-40“. |
889
+ | `.lux-outline-color-accent-50` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „accent-50“. |
890
+ | `.lux-outline-color-accent-60` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „accent-60“. |
891
+ | `.lux-outline-color-accent-70` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „accent-70“. |
892
+ | `.lux-outline-color-accent-80` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „accent-80“. |
893
+ | `.lux-outline-color-accent-90` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „accent-90“. |
894
+ | `.lux-outline-color-accent-95` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „accent-95“. |
895
+ | `.lux-outline-color-accent-98` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „accent-98“. |
896
+ | `.lux-outline-color-accent-99` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „accent-99“. |
897
+ | `.lux-outline-color-accent-100` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „accent-100“. |
898
+ | `.lux-outline-color-neutral-0` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „neutral-0“. |
899
+ | `.lux-outline-color-neutral-10` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „neutral-10“. |
900
+ | `.lux-outline-color-neutral-20` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „neutral-20“. |
901
+ | `.lux-outline-color-neutral-25` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „neutral-25“. |
902
+ | `.lux-outline-color-neutral-30` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „neutral-30“. |
903
+ | `.lux-outline-color-neutral-35` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „neutral-35“. |
904
+ | `.lux-outline-color-neutral-40` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „neutral-40“. |
905
+ | `.lux-outline-color-neutral-50` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „neutral-50“. |
906
+ | `.lux-outline-color-neutral-60` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „neutral-60“. |
907
+ | `.lux-outline-color-neutral-70` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „neutral-70“. |
908
+ | `.lux-outline-color-neutral-80` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „neutral-80“. |
909
+ | `.lux-outline-color-neutral-90` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „neutral-90“. |
910
+ | `.lux-outline-color-neutral-95` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „neutral-95“. |
911
+ | `.lux-outline-color-neutral-98` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „neutral-98“. |
912
+ | `.lux-outline-color-neutral-99` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „neutral-99“. |
913
+ | `.lux-outline-color-neutral-100` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „neutral-100“. |
914
+ | `.lux-outline-color-warn-0` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „warn-0“. |
915
+ | `.lux-outline-color-warn-10` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „warn-10“. |
916
+ | `.lux-outline-color-warn-20` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „warn-20“. |
917
+ | `.lux-outline-color-warn-25` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „warn-25“. |
918
+ | `.lux-outline-color-warn-30` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „warn-30“. |
919
+ | `.lux-outline-color-warn-35` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „warn-35“. |
920
+ | `.lux-outline-color-warn-40` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „warn-40“. |
921
+ | `.lux-outline-color-warn-50` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „warn-50“. |
922
+ | `.lux-outline-color-warn-60` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „warn-60“. |
923
+ | `.lux-outline-color-warn-70` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „warn-70“. |
924
+ | `.lux-outline-color-warn-80` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „warn-80“. |
925
+ | `.lux-outline-color-warn-90` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „warn-90“. |
926
+ | `.lux-outline-color-warn-95` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „warn-95“. |
927
+ | `.lux-outline-color-warn-98` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „warn-98“. |
928
+ | `.lux-outline-color-warn-99` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „warn-99“. |
929
+ | `.lux-outline-color-warn-100` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „warn-100“. |
930
+ | `.lux-outline-color-light` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „light“. |
931
+ | `.lux-outline-color-dark` | Setzt die Outline-Farbe (`outline-color`) auf den Farbtoken „dark“. |
932
+
933
+ ### Textdekorationsfarbe
934
+
935
+ | CSS-Klasse | Beschreibung |
936
+ | ---------------------------------------- | ----------------------------------------------------------------------------------------------- |
937
+ | `.lux-text-decoration-primary-color-0` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „primary-color-0“. |
938
+ | `.lux-text-decoration-primary-color-10` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „primary-color-10“. |
939
+ | `.lux-text-decoration-primary-color-20` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „primary-color-20“. |
940
+ | `.lux-text-decoration-primary-color-25` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „primary-color-25“. |
941
+ | `.lux-text-decoration-primary-color-30` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „primary-color-30“. |
942
+ | `.lux-text-decoration-primary-color-35` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „primary-color-35“. |
943
+ | `.lux-text-decoration-primary-color-40` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „primary-color-40“. |
944
+ | `.lux-text-decoration-primary-color-50` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „primary-color-50“. |
945
+ | `.lux-text-decoration-primary-color-60` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „primary-color-60“. |
946
+ | `.lux-text-decoration-primary-color-70` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „primary-color-70“. |
947
+ | `.lux-text-decoration-primary-color-80` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „primary-color-80“. |
948
+ | `.lux-text-decoration-primary-color-90` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „primary-color-90“. |
949
+ | `.lux-text-decoration-primary-color-95` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „primary-color-95“. |
950
+ | `.lux-text-decoration-primary-color-98` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „primary-color-98“. |
951
+ | `.lux-text-decoration-primary-color-99` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „primary-color-99“. |
952
+ | `.lux-text-decoration-primary-color-100` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „primary-color-100“. |
953
+ | `.lux-text-decoration-accent-color-0` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „accent-color-0“. |
954
+ | `.lux-text-decoration-accent-color-10` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „accent-color-10“. |
955
+ | `.lux-text-decoration-accent-color-20` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „accent-color-20“. |
956
+ | `.lux-text-decoration-accent-color-25` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „accent-color-25“. |
957
+ | `.lux-text-decoration-accent-color-30` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „accent-color-30“. |
958
+ | `.lux-text-decoration-accent-color-35` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „accent-color-35“. |
959
+ | `.lux-text-decoration-accent-color-40` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „accent-color-40“. |
960
+ | `.lux-text-decoration-accent-color-50` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „accent-color-50“. |
961
+ | `.lux-text-decoration-accent-color-60` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „accent-color-60“. |
962
+ | `.lux-text-decoration-accent-color-70` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „accent-color-70“. |
963
+ | `.lux-text-decoration-accent-color-80` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „accent-color-80“. |
964
+ | `.lux-text-decoration-accent-color-90` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „accent-color-90“. |
965
+ | `.lux-text-decoration-accent-color-95` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „accent-color-95“. |
966
+ | `.lux-text-decoration-accent-color-98` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „accent-color-98“. |
967
+ | `.lux-text-decoration-accent-color-99` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „accent-color-99“. |
968
+ | `.lux-text-decoration-accent-color-100` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „accent-color-100“. |
969
+ | `.lux-text-decoration-neutral-color-0` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „neutral-color-0“. |
970
+ | `.lux-text-decoration-neutral-color-10` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „neutral-color-10“. |
971
+ | `.lux-text-decoration-neutral-color-20` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „neutral-color-20“. |
972
+ | `.lux-text-decoration-neutral-color-25` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „neutral-color-25“. |
973
+ | `.lux-text-decoration-neutral-color-30` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „neutral-color-30“. |
974
+ | `.lux-text-decoration-neutral-color-35` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „neutral-color-35“. |
975
+ | `.lux-text-decoration-neutral-color-40` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „neutral-color-40“. |
976
+ | `.lux-text-decoration-neutral-color-50` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „neutral-color-50“. |
977
+ | `.lux-text-decoration-neutral-color-60` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „neutral-color-60“. |
978
+ | `.lux-text-decoration-neutral-color-70` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „neutral-color-70“. |
979
+ | `.lux-text-decoration-neutral-color-80` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „neutral-color-80“. |
980
+ | `.lux-text-decoration-neutral-color-90` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „neutral-color-90“. |
981
+ | `.lux-text-decoration-neutral-color-95` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „neutral-color-95“. |
982
+ | `.lux-text-decoration-neutral-color-98` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „neutral-color-98“. |
983
+ | `.lux-text-decoration-neutral-color-99` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „neutral-color-99“. |
984
+ | `.lux-text-decoration-neutral-color-100` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „neutral-color-100“. |
985
+ | `.lux-text-decoration-warn-color-0` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „warn-color-0“. |
986
+ | `.lux-text-decoration-warn-color-10` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „warn-color-10“. |
987
+ | `.lux-text-decoration-warn-color-20` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „warn-color-20“. |
988
+ | `.lux-text-decoration-warn-color-25` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „warn-color-25“. |
989
+ | `.lux-text-decoration-warn-color-30` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „warn-color-30“. |
990
+ | `.lux-text-decoration-warn-color-35` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „warn-color-35“. |
991
+ | `.lux-text-decoration-warn-color-40` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „warn-color-40“. |
992
+ | `.lux-text-decoration-warn-color-50` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „warn-color-50“. |
993
+ | `.lux-text-decoration-warn-color-60` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „warn-color-60“. |
994
+ | `.lux-text-decoration-warn-color-70` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „warn-color-70“. |
995
+ | `.lux-text-decoration-warn-color-80` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „warn-color-80“. |
996
+ | `.lux-text-decoration-warn-color-90` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „warn-color-90“. |
997
+ | `.lux-text-decoration-warn-color-95` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „warn-color-95“. |
998
+ | `.lux-text-decoration-warn-color-98` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „warn-color-98“. |
999
+ | `.lux-text-decoration-warn-color-99` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „warn-color-99“. |
1000
+ | `.lux-text-decoration-warn-color-100` | Setzt die Textdekorationsfarbe (`text-decoration-color`) auf den Farbtoken „warn-color-100“. |
1001
+
1002
+ ### Spaltentrennlinien-Farbe
1003
+
1004
+ | CSS-Klasse | Beschreibung |
1005
+ | ------------------------------------ | ----------------------------------------------------------------------------------------- |
1006
+ | `.lux-column-rule-color-primary-0` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „primary-0“. |
1007
+ | `.lux-column-rule-color-primary-10` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „primary-10“. |
1008
+ | `.lux-column-rule-color-primary-20` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „primary-20“. |
1009
+ | `.lux-column-rule-color-primary-25` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „primary-25“. |
1010
+ | `.lux-column-rule-color-primary-30` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „primary-30“. |
1011
+ | `.lux-column-rule-color-primary-35` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „primary-35“. |
1012
+ | `.lux-column-rule-color-primary-40` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „primary-40“. |
1013
+ | `.lux-column-rule-color-primary-50` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „primary-50“. |
1014
+ | `.lux-column-rule-color-primary-60` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „primary-60“. |
1015
+ | `.lux-column-rule-color-primary-70` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „primary-70“. |
1016
+ | `.lux-column-rule-color-primary-80` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „primary-80“. |
1017
+ | `.lux-column-rule-color-primary-90` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „primary-90“. |
1018
+ | `.lux-column-rule-color-primary-95` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „primary-95“. |
1019
+ | `.lux-column-rule-color-primary-98` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „primary-98“. |
1020
+ | `.lux-column-rule-color-primary-99` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „primary-99“. |
1021
+ | `.lux-column-rule-color-primary-100` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „primary-100“. |
1022
+ | `.lux-column-rule-color-accent-0` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „accent-0“. |
1023
+ | `.lux-column-rule-color-accent-10` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „accent-10“. |
1024
+ | `.lux-column-rule-color-accent-20` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „accent-20“. |
1025
+ | `.lux-column-rule-color-accent-25` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „accent-25“. |
1026
+ | `.lux-column-rule-color-accent-30` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „accent-30“. |
1027
+ | `.lux-column-rule-color-accent-35` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „accent-35“. |
1028
+ | `.lux-column-rule-color-accent-40` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „accent-40“. |
1029
+ | `.lux-column-rule-color-accent-50` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „accent-50“. |
1030
+ | `.lux-column-rule-color-accent-60` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „accent-60“. |
1031
+ | `.lux-column-rule-color-accent-70` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „accent-70“. |
1032
+ | `.lux-column-rule-color-accent-80` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „accent-80“. |
1033
+ | `.lux-column-rule-color-accent-90` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „accent-90“. |
1034
+ | `.lux-column-rule-color-accent-95` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „accent-95“. |
1035
+ | `.lux-column-rule-color-accent-98` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „accent-98“. |
1036
+ | `.lux-column-rule-color-accent-99` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „accent-99“. |
1037
+ | `.lux-column-rule-color-accent-100` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „accent-100“. |
1038
+ | `.lux-column-rule-color-neutral-0` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „neutral-0“. |
1039
+ | `.lux-column-rule-color-neutral-10` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „neutral-10“. |
1040
+ | `.lux-column-rule-color-neutral-20` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „neutral-20“. |
1041
+ | `.lux-column-rule-color-neutral-25` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „neutral-25“. |
1042
+ | `.lux-column-rule-color-neutral-30` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „neutral-30“. |
1043
+ | `.lux-column-rule-color-neutral-35` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „neutral-35“. |
1044
+ | `.lux-column-rule-color-neutral-40` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „neutral-40“. |
1045
+ | `.lux-column-rule-color-neutral-50` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „neutral-50“. |
1046
+ | `.lux-column-rule-color-neutral-60` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „neutral-60“. |
1047
+ | `.lux-column-rule-color-neutral-70` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „neutral-70“. |
1048
+ | `.lux-column-rule-color-neutral-80` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „neutral-80“. |
1049
+ | `.lux-column-rule-color-neutral-90` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „neutral-90“. |
1050
+ | `.lux-column-rule-color-neutral-95` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „neutral-95“. |
1051
+ | `.lux-column-rule-color-neutral-98` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „neutral-98“. |
1052
+ | `.lux-column-rule-color-neutral-99` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „neutral-99“. |
1053
+ | `.lux-column-rule-color-neutral-100` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „neutral-100“. |
1054
+ | `.lux-column-rule-color-warn-0` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „warn-0“. |
1055
+ | `.lux-column-rule-color-warn-10` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „warn-10“. |
1056
+ | `.lux-column-rule-color-warn-20` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „warn-20“. |
1057
+ | `.lux-column-rule-color-warn-25` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „warn-25“. |
1058
+ | `.lux-column-rule-color-warn-30` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „warn-30“. |
1059
+ | `.lux-column-rule-color-warn-35` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „warn-35“. |
1060
+ | `.lux-column-rule-color-warn-40` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „warn-40“. |
1061
+ | `.lux-column-rule-color-warn-50` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „warn-50“. |
1062
+ | `.lux-column-rule-color-warn-60` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „warn-60“. |
1063
+ | `.lux-column-rule-color-warn-70` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „warn-70“. |
1064
+ | `.lux-column-rule-color-warn-80` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „warn-80“. |
1065
+ | `.lux-column-rule-color-warn-90` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „warn-90“. |
1066
+ | `.lux-column-rule-color-warn-95` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „warn-95“. |
1067
+ | `.lux-column-rule-color-warn-98` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „warn-98“. |
1068
+ | `.lux-column-rule-color-warn-99` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „warn-99“. |
1069
+ | `.lux-column-rule-color-warn-100` | Setzt die Spaltentrennlinien-Farbe (`column-rule-color`) auf den Farbtoken „warn-100“. |
1070
+
1071
+ ### Sonstiges
1072
+
1073
+ | CSS-Klasse | Beschreibung |
1074
+ | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
1075
+ | `.lux-h1` | Utility-Klasse mit folgenden Deklarationen: font-family: var(--lux-theme-app-headline-font), font-size: 2rem, font-weight: 500. |
1076
+ | `.lux-h2` | Utility-Klasse mit folgenden Deklarationen: font-family: var(--lux-theme-app-headline-font), font-size: 1.5rem, font-weight: 500. |
1077
+ | `.lux-h3` | Utility-Klasse mit folgenden Deklarationen: font-family: var(--lux-theme-app-headline-font), font-size: 1.25rem, font-weight: 500. |
1078
+ | `.lux-h4` | Utility-Klasse mit folgenden Deklarationen: font-family: var(--lux-theme-app-headline-font), font-size: 1rem, font-weight: 500. |
1079
+ | `.lux-h5` | Utility-Klasse mit folgenden Deklarationen: font-family: var(--lux-theme-app-headline-font), font-size: 0.875rem, font-weight: 700. |
1080
+ | `.lux-h6` | Utility-Klasse mit folgenden Deklarationen: font-family: var(--lux-theme-app-headline-font), font-size: 0.75rem, font-weight: 700. |
1081
+ | `.lux-disabled` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-dark-disabled-text), cursor: text, text-decoration: none. |
1082
+ | `.lux-selected-bg` | Utility-Klasse mit folgenden Deklarationen: background-color: var(--lux-theme-selected-bg-color). |
1083
+ | `.lux-hover-bg` | Utility-Klasse mit folgenden Deklarationen: background-color: var(--lux-theme-hover-color). |
1084
+ | `.lux-hover-dark-bg` | Utility-Klasse mit folgenden Deklarationen: background-color: var(--lux-theme-hover-color) -for-dark-background. |
1085
+ | `.lux-gradient-bg` | Utility-Klasse mit folgenden Deklarationen: background-color: #fff, background-image: var(--lux-theme-app-gradient). |
1086
+ | `.lux-outline-width` | Utility-Klasse mit folgenden Deklarationen: outline-width: var(--lux-theme-outline-width). |
1087
+ | `.lux-outline-style` | Utility-Klasse mit folgenden Deklarationen: outline-style: var(--lux-theme-outline-style). |
1088
+ | `.lux-outline-light` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-outline-color-bright), outline-width: var(--lux-theme-outline-width), outline-style: var(--lux-theme-outline-style). |
1089
+ | `.lux-outline-dark` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-outline-color-dark), outline-width: var(--lux-theme-outline-width), outline-style: var(--lux-theme-outline-style). |
1090
+ | `.lux-card-grow` | Utility-Klasse mit folgenden Deklarationen: display: flex, flex: 1 1 auto, width: 400px. |
1091
+ | `.lux-crop` | Utility-Klasse mit folgenden Deklarationen: overflow: hidden, white-space: nowrap, text-overflow: ellipsis. |
1092
+ | `.lux-crop-2-lines` | Utility-Klasse mit folgenden Deklarationen: overflow: hidden, white-space: normal, word-wrap: break-word. |
1093
+ | `.lux-label` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-dark-secondary-text), font-size: 0.75rem. |
1094
+ | `.lux-hint` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-dark-secondary-text), font-size: 0.75rem. |
1095
+ | `.lux-sr-only` | Utility-Klasse mit folgenden Deklarationen: position: absolute, left: -10000px, top: auto. |
1096
+ | `.lux-border-box` | Utility-Klasse mit folgenden Deklarationen: box-sizing: border-box. |
1097
+ | `.lux-content-box` | Utility-Klasse mit folgenden Deklarationen: box-sizing: content-box. |
1098
+ | `.lux-nowrap` | Utility-Klasse mit folgenden Deklarationen: white-space: nowrap. |
1099
+ | `.lux-cursor` | Utility-Klasse mit folgenden Deklarationen: cursor: pointer. |
1100
+ | `.lux-block-pointer-events` | Utility-Klasse mit folgenden Deklarationen: pointer-events: none. |
1101
+ | `.lux-vertical-align-baseline` | Utility-Klasse mit folgenden Deklarationen: vertical-align: baseline !important. |
1102
+ | `.lux-black-semi-transparent` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-dark-primary-text). |
1103
+ | `.lux-semi-transparent` | Utility-Klasse mit folgenden Deklarationen: opacity: 0.6. |
1104
+ | `.lux-overflow-wrap-break-word` | Utility-Klasse mit folgenden Deklarationen: overflow-wrap: break-word. |
1105
+ | `.lux-bold` | Utility-Klasse mit folgenden Deklarationen: font-weight: bold !important. |
1106
+ | `.lux-uppercase` | Utility-Klasse mit folgenden Deklarationen: text-transform: uppercase !important. |
1107
+ | `.lux-lowercase` | Utility-Klasse mit folgenden Deklarationen: text-transform: lowercase !important. |
1108
+ | `.lux-hyphenate` | Utility-Klasse mit folgenden Deklarationen: overflow-wrap: break-word, word-wrap: break-word, word-break: normal. |
1109
+ | `.lux-font-color-red` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-custom-on-red). |
1110
+ | `.lux-font-color-green` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-custom-on-green). |
1111
+ | `.lux-font-color-purple` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-custom-on-purple). |
1112
+ | `.lux-font-color-blue` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-custom-on-blue). |
1113
+ | `.lux-font-color-gray` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-custom-on-gray). |
1114
+ | `.lux-font-color-orange` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-custom-on-orange). |
1115
+ | `.lux-font-color-black` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-custom-on-black). |
1116
+ | `.lux-font-color-white` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-custom-on-white). |
1117
+ | `.lux-font-color-yellow` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-custom-on-yellow). |
1118
+ | `.lux-font-color-pink` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-custom-on-pink). |
1119
+ | `.lux-font-color-lightblue` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-custom-on-lightblue). |
1120
+ | `.lux-text-highlight-primary` | Utility-Klasse mit folgenden Deklarationen: color: var(--mat-sys-on-primary-container), background-color: var(--mat-sys-primary-container). |
1121
+ | `.lux-text-highlight-primary-strong` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-dark-primary-text), background-color: var(--lux-theme-primary-70). |
1122
+ | `.lux-text-highlight-success` | Utility-Klasse mit folgenden Deklarationen: color: var(--mat-sys-on-tertiary-container), background-color: var(--mat-sys-tertiary-container). |
1123
+ | `.lux-text-highlight-success-strong` | Utility-Klasse mit folgenden Deklarationen: color: #1c1b1b, background-color: #56bd66. |
1124
+ | `.lux-text-highlight-alert` | Utility-Klasse mit folgenden Deklarationen: color: #1c1b1b, background-color: #fdedab. |
1125
+ | `.lux-text-highlight-alert-strong` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-custom-on-yellow), background-color: var(--lux-theme-custom-yellow). |
1126
+ | `.lux-text-highlight-error` | Utility-Klasse mit folgenden Deklarationen: color: #93000c, background-color: #ffdad6. |
1127
+ | `.lux-text-highlight-error-strong` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-dark-primary-text), background-color: var(--lux-theme-warn-70). |
1128
+ | `.lux-block` | Utility-Klasse mit folgenden Deklarationen: display: block. |
1129
+ | `.lux-flex` | Utility-Klasse mit folgenden Deklarationen: display: flex. |
1130
+ | `.lux-grid` | Utility-Klasse mit folgenden Deklarationen: display: grid. |
1131
+ | `.lux-inline-flex` | Utility-Klasse mit folgenden Deklarationen: display: inline-flex. |
1132
+ | `.lux-inline-block` | Utility-Klasse mit folgenden Deklarationen: display: inline-block. |
1133
+ | `.lux-inline-grid` | Utility-Klasse mit folgenden Deklarationen: display: inline-grid. |
1134
+ | `.lux-none` | Utility-Klasse mit folgenden Deklarationen: display: none. |
1135
+ | `.lux-display-none` | Utility-Klasse mit folgenden Deklarationen: display: none. |
1136
+ | `.lux-display-none-important` | Utility-Klasse mit folgenden Deklarationen: display: none !important. |
1137
+ | `.lux-hidden` | Utility-Klasse mit folgenden Deklarationen: visibility: hidden. |
1138
+ | `.lux-hidden-important` | Utility-Klasse mit folgenden Deklarationen: visibility: hidden !important. |
1139
+ | `.lux-m-0` | Utility-Klasse mit folgenden Deklarationen: margin: 0px. |
1140
+ | `.lux-mt-0` | Utility-Klasse mit folgenden Deklarationen: margin-top: 0px. |
1141
+ | `.lux-p-0` | Utility-Klasse mit folgenden Deklarationen: padding: 0px. |
1142
+ | `.lux-pt-0` | Utility-Klasse mit folgenden Deklarationen: padding-top: 0px. |
1143
+ | `.lux-m-1` | Utility-Klasse mit folgenden Deklarationen: margin: 2px. |
1144
+ | `.lux-mt-1` | Utility-Klasse mit folgenden Deklarationen: margin-top: 2px. |
1145
+ | `.lux-p-1` | Utility-Klasse mit folgenden Deklarationen: padding: 2px. |
1146
+ | `.lux-pt-1` | Utility-Klasse mit folgenden Deklarationen: padding-top: 2px. |
1147
+ | `.lux-m-2` | Utility-Klasse mit folgenden Deklarationen: margin: 4px. |
1148
+ | `.lux-mt-2` | Utility-Klasse mit folgenden Deklarationen: margin-top: 4px. |
1149
+ | `.lux-p-2` | Utility-Klasse mit folgenden Deklarationen: padding: 4px. |
1150
+ | `.lux-pt-2` | Utility-Klasse mit folgenden Deklarationen: padding-top: 4px. |
1151
+ | `.lux-m-3` | Utility-Klasse mit folgenden Deklarationen: margin: 8px. |
1152
+ | `.lux-mt-3` | Utility-Klasse mit folgenden Deklarationen: margin-top: 8px. |
1153
+ | `.lux-p-3` | Utility-Klasse mit folgenden Deklarationen: padding: 8px. |
1154
+ | `.lux-pt-3` | Utility-Klasse mit folgenden Deklarationen: padding-top: 8px. |
1155
+ | `.lux-m-4` | Utility-Klasse mit folgenden Deklarationen: margin: 16px. |
1156
+ | `.lux-mt-4` | Utility-Klasse mit folgenden Deklarationen: margin-top: 16px. |
1157
+ | `.lux-p-4` | Utility-Klasse mit folgenden Deklarationen: padding: 16px. |
1158
+ | `.lux-pt-4` | Utility-Klasse mit folgenden Deklarationen: padding-top: 16px. |
1159
+ | `.lux-m-5` | Utility-Klasse mit folgenden Deklarationen: margin: 32px. |
1160
+ | `.lux-mt-5` | Utility-Klasse mit folgenden Deklarationen: margin-top: 32px. |
1161
+ | `.lux-p-5` | Utility-Klasse mit folgenden Deklarationen: padding: 32px. |
1162
+ | `.lux-pt-5` | Utility-Klasse mit folgenden Deklarationen: padding-top: 32px. |
1163
+ | `.lux-m-6` | Utility-Klasse mit folgenden Deklarationen: margin: 64px. |
1164
+ | `.lux-mt-6` | Utility-Klasse mit folgenden Deklarationen: margin-top: 64px. |
1165
+ | `.lux-p-6` | Utility-Klasse mit folgenden Deklarationen: padding: 64px. |
1166
+ | `.lux-pt-6` | Utility-Klasse mit folgenden Deklarationen: padding-top: 64px. |
1167
+ | `.lux-mb-0` | Utility-Klasse mit folgenden Deklarationen: margin-bottom: 0px. |
1168
+ | `.lux-pb-0` | Utility-Klasse mit folgenden Deklarationen: padding-bottom: 0px. |
1169
+ | `.lux-mb-1` | Utility-Klasse mit folgenden Deklarationen: margin-bottom: 2px. |
1170
+ | `.lux-pb-1` | Utility-Klasse mit folgenden Deklarationen: padding-bottom: 2px. |
1171
+ | `.lux-mb-2` | Utility-Klasse mit folgenden Deklarationen: margin-bottom: 4px. |
1172
+ | `.lux-pb-2` | Utility-Klasse mit folgenden Deklarationen: padding-bottom: 4px. |
1173
+ | `.lux-mb-3` | Utility-Klasse mit folgenden Deklarationen: margin-bottom: 8px. |
1174
+ | `.lux-pb-3` | Utility-Klasse mit folgenden Deklarationen: padding-bottom: 8px. |
1175
+ | `.lux-mb-4` | Utility-Klasse mit folgenden Deklarationen: margin-bottom: 16px. |
1176
+ | `.lux-pb-4` | Utility-Klasse mit folgenden Deklarationen: padding-bottom: 16px. |
1177
+ | `.lux-mb-5` | Utility-Klasse mit folgenden Deklarationen: margin-bottom: 32px. |
1178
+ | `.lux-pb-5` | Utility-Klasse mit folgenden Deklarationen: padding-bottom: 32px. |
1179
+ | `.lux-mb-6` | Utility-Klasse mit folgenden Deklarationen: margin-bottom: 64px. |
1180
+ | `.lux-pb-6` | Utility-Klasse mit folgenden Deklarationen: padding-bottom: 64px. |
1181
+ | `.lux-ml-0` | Utility-Klasse mit folgenden Deklarationen: margin-left: 0px. |
1182
+ | `.lux-pl-0` | Utility-Klasse mit folgenden Deklarationen: padding-left: 0px. |
1183
+ | `.lux-ml-1` | Utility-Klasse mit folgenden Deklarationen: margin-left: 2px. |
1184
+ | `.lux-pl-1` | Utility-Klasse mit folgenden Deklarationen: padding-left: 2px. |
1185
+ | `.lux-ml-2` | Utility-Klasse mit folgenden Deklarationen: margin-left: 4px. |
1186
+ | `.lux-pl-2` | Utility-Klasse mit folgenden Deklarationen: padding-left: 4px. |
1187
+ | `.lux-ml-3` | Utility-Klasse mit folgenden Deklarationen: margin-left: 8px. |
1188
+ | `.lux-pl-3` | Utility-Klasse mit folgenden Deklarationen: padding-left: 8px. |
1189
+ | `.lux-ml-4` | Utility-Klasse mit folgenden Deklarationen: margin-left: 16px. |
1190
+ | `.lux-pl-4` | Utility-Klasse mit folgenden Deklarationen: padding-left: 16px. |
1191
+ | `.lux-ml-5` | Utility-Klasse mit folgenden Deklarationen: margin-left: 32px. |
1192
+ | `.lux-pl-5` | Utility-Klasse mit folgenden Deklarationen: padding-left: 32px. |
1193
+ | `.lux-ml-6` | Utility-Klasse mit folgenden Deklarationen: margin-left: 64px. |
1194
+ | `.lux-pl-6` | Utility-Klasse mit folgenden Deklarationen: padding-left: 64px. |
1195
+ | `.lux-mr-0` | Utility-Klasse mit folgenden Deklarationen: margin-right: 0px. |
1196
+ | `.lux-pr-0` | Utility-Klasse mit folgenden Deklarationen: padding-right: 0px. |
1197
+ | `.lux-mr-1` | Utility-Klasse mit folgenden Deklarationen: margin-right: 2px. |
1198
+ | `.lux-pr-1` | Utility-Klasse mit folgenden Deklarationen: padding-right: 2px. |
1199
+ | `.lux-mr-2` | Utility-Klasse mit folgenden Deklarationen: margin-right: 4px. |
1200
+ | `.lux-pr-2` | Utility-Klasse mit folgenden Deklarationen: padding-right: 4px. |
1201
+ | `.lux-mr-3` | Utility-Klasse mit folgenden Deklarationen: margin-right: 8px. |
1202
+ | `.lux-pr-3` | Utility-Klasse mit folgenden Deklarationen: padding-right: 8px. |
1203
+ | `.lux-mr-4` | Utility-Klasse mit folgenden Deklarationen: margin-right: 16px. |
1204
+ | `.lux-pr-4` | Utility-Klasse mit folgenden Deklarationen: padding-right: 16px. |
1205
+ | `.lux-mr-5` | Utility-Klasse mit folgenden Deklarationen: margin-right: 32px. |
1206
+ | `.lux-pr-5` | Utility-Klasse mit folgenden Deklarationen: padding-right: 32px. |
1207
+ | `.lux-mr-6` | Utility-Klasse mit folgenden Deklarationen: margin-right: 64px. |
1208
+ | `.lux-pr-6` | Utility-Klasse mit folgenden Deklarationen: padding-right: 64px. |
1209
+ | `.lux-flex-row` | Utility-Klasse mit folgenden Deklarationen: flex-direction: row. |
1210
+ | `.lux-flex-row-reverse` | Utility-Klasse mit folgenden Deklarationen: flex-direction: row-reverse. |
1211
+ | `.lux-flex-col` | Utility-Klasse mit folgenden Deklarationen: flex-direction: column. |
1212
+ | `.lux-flex-col-revers` | Utility-Klasse mit folgenden Deklarationen: flex-direction: column-reverse. |
1213
+ | `.lux-flex-nowrap` | Utility-Klasse mit folgenden Deklarationen: flex-wrap: nowrap. |
1214
+ | `.lux-flex-wrap` | Utility-Klasse mit folgenden Deklarationen: flex-wrap: wrap. |
1215
+ | `.lux-flex-wrap-reverse` | Utility-Klasse mit folgenden Deklarationen: flex-wrap: wrap-reverse. |
1216
+ | `.lux-flex-1` | Utility-Klasse mit folgenden Deklarationen: flex: 1 1 0%. |
1217
+ | `.lux-flex-auto` | Utility-Klasse mit folgenden Deklarationen: flex: 1 1 auto. |
1218
+ | `.lux-flex-initial` | Utility-Klasse mit folgenden Deklarationen: flex: 0 1 auto. |
1219
+ | `.lux-flex-none` | Utility-Klasse mit folgenden Deklarationen: flex: none. |
1220
+ | `.lux-flex-grow-0` | Utility-Klasse mit folgenden Deklarationen: flex-grow: 0. |
1221
+ | `.lux-flex-shrink-0` | Utility-Klasse mit folgenden Deklarationen: flex-shrink: 0. |
1222
+ | `.lux-flex-grow-1` | Utility-Klasse mit folgenden Deklarationen: flex-grow: 1. |
1223
+ | `.lux-flex-shrink-1` | Utility-Klasse mit folgenden Deklarationen: flex-shrink: 1. |
1224
+ | `.lux-flex-grow-2` | Utility-Klasse mit folgenden Deklarationen: flex-grow: 2. |
1225
+ | `.lux-flex-shrink-2` | Utility-Klasse mit folgenden Deklarationen: flex-shrink: 2. |
1226
+ | `.lux-flex-grow-3` | Utility-Klasse mit folgenden Deklarationen: flex-grow: 3. |
1227
+ | `.lux-flex-shrink-3` | Utility-Klasse mit folgenden Deklarationen: flex-shrink: 3. |
1228
+ | `.lux-flex-grow-4` | Utility-Klasse mit folgenden Deklarationen: flex-grow: 4. |
1229
+ | `.lux-flex-shrink-4` | Utility-Klasse mit folgenden Deklarationen: flex-shrink: 4. |
1230
+ | `.lux-flex-grow-5` | Utility-Klasse mit folgenden Deklarationen: flex-grow: 5. |
1231
+ | `.lux-flex-shrink-5` | Utility-Klasse mit folgenden Deklarationen: flex-shrink: 5. |
1232
+ | `.lux-flex-order-0` | Utility-Klasse mit folgenden Deklarationen: order: 0. |
1233
+ | `.lux-flex-order-1` | Utility-Klasse mit folgenden Deklarationen: order: 1. |
1234
+ | `.lux-flex-order-2` | Utility-Klasse mit folgenden Deklarationen: order: 2. |
1235
+ | `.lux-flex-order-3` | Utility-Klasse mit folgenden Deklarationen: order: 3. |
1236
+ | `.lux-flex-order-4` | Utility-Klasse mit folgenden Deklarationen: order: 4. |
1237
+ | `.lux-flex-order-5` | Utility-Klasse mit folgenden Deklarationen: order: 5. |
1238
+ | `.lux-flex-order-6` | Utility-Klasse mit folgenden Deklarationen: order: 6. |
1239
+ | `.lux-flex-order-7` | Utility-Klasse mit folgenden Deklarationen: order: 7. |
1240
+ | `.lux-flex-order-8` | Utility-Klasse mit folgenden Deklarationen: order: 8. |
1241
+ | `.lux-flex-order-9` | Utility-Klasse mit folgenden Deklarationen: order: 9. |
1242
+ | `.lux-flex-order-10` | Utility-Klasse mit folgenden Deklarationen: order: 10. |
1243
+ | `.lux-justify-normal` | Utility-Klasse mit folgenden Deklarationen: justify-content: normal. |
1244
+ | `.lux-justify-start` | Utility-Klasse mit folgenden Deklarationen: justify-content: flex-start. |
1245
+ | `.lux-justify-end` | Utility-Klasse mit folgenden Deklarationen: justify-content: flex-end. |
1246
+ | `.lux-justify-center` | Utility-Klasse mit folgenden Deklarationen: justify-content: center. |
1247
+ | `.lux-justify-between` | Utility-Klasse mit folgenden Deklarationen: justify-content: space-between. |
1248
+ | `.lux-justify-around` | Utility-Klasse mit folgenden Deklarationen: justify-content: space-around. |
1249
+ | `.lux-justify-evenly` | Utility-Klasse mit folgenden Deklarationen: justify-content: space-evenly. |
1250
+ | `.lux-justify-stretch` | Utility-Klasse mit folgenden Deklarationen: justify-content: stretch. |
1251
+ | `.lux-justify-items-start` | Utility-Klasse mit folgenden Deklarationen: justify-items: start. |
1252
+ | `.lux-justify-items-end` | Utility-Klasse mit folgenden Deklarationen: justify-items: end. |
1253
+ | `.lux-justify-items-center` | Utility-Klasse mit folgenden Deklarationen: justify-items: center. |
1254
+ | `.lux-justify-items-stretch` | Utility-Klasse mit folgenden Deklarationen: justify-items: stretch. |
1255
+ | `.lux-justify-self-start` | Utility-Klasse mit folgenden Deklarationen: justify-self: start. |
1256
+ | `.lux-justify-self-end` | Utility-Klasse mit folgenden Deklarationen: justify-self: end. |
1257
+ | `.lux-justify-self-center` | Utility-Klasse mit folgenden Deklarationen: justify-self: center. |
1258
+ | `.lux-justify-self-stretch` | Utility-Klasse mit folgenden Deklarationen: justify-self: stretch. |
1259
+ | `.lux-content-normal` | Utility-Klasse mit folgenden Deklarationen: align-content: normal. |
1260
+ | `.lux-content-start` | Utility-Klasse mit folgenden Deklarationen: align-content: flex-start. |
1261
+ | `.lux-content-end` | Utility-Klasse mit folgenden Deklarationen: align-content: flex-end. |
1262
+ | `.lux-content-center` | Utility-Klasse mit folgenden Deklarationen: align-content: center. |
1263
+ | `.lux-content-between` | Utility-Klasse mit folgenden Deklarationen: align-content: space-between. |
1264
+ | `.lux-content-around` | Utility-Klasse mit folgenden Deklarationen: align-content: space-around. |
1265
+ | `.lux-content-evenly` | Utility-Klasse mit folgenden Deklarationen: align-content: space-evenly. |
1266
+ | `.lux-content-stretch` | Utility-Klasse mit folgenden Deklarationen: align-content: stretch. |
1267
+ | `.lux-content-baseline` | Utility-Klasse mit folgenden Deklarationen: align-content: baseline. |
1268
+ | `.lux-items-start` | Utility-Klasse mit folgenden Deklarationen: align-items: flex-start. |
1269
+ | `.lux-items-end` | Utility-Klasse mit folgenden Deklarationen: align-items: flex-end. |
1270
+ | `.lux-items-center` | Utility-Klasse mit folgenden Deklarationen: align-items: center. |
1271
+ | `.lux-items-stretch` | Utility-Klasse mit folgenden Deklarationen: align-items: stretch. |
1272
+ | `.lux-items-baseline` | Utility-Klasse mit folgenden Deklarationen: align-items: baseline. |
1273
+ | `.lux-align-self-auto` | Utility-Klasse mit folgenden Deklarationen: align-self: auto. |
1274
+ | `.lux-align-self-start` | Utility-Klasse mit folgenden Deklarationen: align-self: flex-start. |
1275
+ | `.lux-align-self-end` | Utility-Klasse mit folgenden Deklarationen: align-self: flex-end. |
1276
+ | `.lux-align-self-center` | Utility-Klasse mit folgenden Deklarationen: align-self: center. |
1277
+ | `.lux-align-self-stretch` | Utility-Klasse mit folgenden Deklarationen: align-self: stretch. |
1278
+ | `.lux-align-self-baseline` | Utility-Klasse mit folgenden Deklarationen: align-self: baseline. |
1279
+ | `.lux-place-content-center` | Utility-Klasse mit folgenden Deklarationen: place-content: center. |
1280
+ | `.lux-place-content-start` | Utility-Klasse mit folgenden Deklarationen: place-content: flex-start. |
1281
+ | `.lux-place-content-end` | Utility-Klasse mit folgenden Deklarationen: place-content: flex-end. |
1282
+ | `.lux-place-content-between` | Utility-Klasse mit folgenden Deklarationen: place-content: space-between. |
1283
+ | `.lux-place-content-around` | Utility-Klasse mit folgenden Deklarationen: place-content: space-around. |
1284
+ | `.lux-place-content-evenly` | Utility-Klasse mit folgenden Deklarationen: place-content: space-evenly. |
1285
+ | `.lux-place-content-baseline` | Utility-Klasse mit folgenden Deklarationen: place-content: baseline. |
1286
+ | `.lux-place-content-stretch` | Utility-Klasse mit folgenden Deklarationen: place-content: stretch. |
1287
+ | `.lux-place-items-center` | Utility-Klasse mit folgenden Deklarationen: place-items: center. |
1288
+ | `.lux-place-items-start` | Utility-Klasse mit folgenden Deklarationen: place-items: start. |
1289
+ | `.lux-place-items-end` | Utility-Klasse mit folgenden Deklarationen: place-items: end. |
1290
+ | `.lux-place-items-baseline` | Utility-Klasse mit folgenden Deklarationen: place-items: baseline. |
1291
+ | `.lux-place-items-stretch` | Utility-Klasse mit folgenden Deklarationen: place-items: stretch. |
1292
+ | `.lux-place-self-center` | Utility-Klasse mit folgenden Deklarationen: place-self: center. |
1293
+ | `.lux-place-self-start` | Utility-Klasse mit folgenden Deklarationen: place-self: start. |
1294
+ | `.lux-place-self-end` | Utility-Klasse mit folgenden Deklarationen: place-self: end. |
1295
+ | `.lux-place-self-baseline` | Utility-Klasse mit folgenden Deklarationen: place-self: baseline. |
1296
+ | `.lux-place-self-stretch` | Utility-Klasse mit folgenden Deklarationen: place-self: stretch. |
1297
+ | `.lux-gap-0` | Utility-Klasse mit folgenden Deklarationen: gap: 0px. |
1298
+ | `.lux-row-gap-0` | Utility-Klasse mit folgenden Deklarationen: row-gap: 0px. |
1299
+ | `.lux-col-gap-0` | Utility-Klasse mit folgenden Deklarationen: column-gap: 0px. |
1300
+ | `.lux-gap-1` | Utility-Klasse mit folgenden Deklarationen: gap: 0.25rem. |
1301
+ | `.lux-row-gap-1` | Utility-Klasse mit folgenden Deklarationen: row-gap: 0.25rem. |
1302
+ | `.lux-col-gap-1` | Utility-Klasse mit folgenden Deklarationen: column-gap: 0.25rem. |
1303
+ | `.lux-gap-2` | Utility-Klasse mit folgenden Deklarationen: gap: 0.5rem. |
1304
+ | `.lux-row-gap-2` | Utility-Klasse mit folgenden Deklarationen: row-gap: 0.5rem. |
1305
+ | `.lux-col-gap-2` | Utility-Klasse mit folgenden Deklarationen: column-gap: 0.5rem. |
1306
+ | `.lux-gap-3` | Utility-Klasse mit folgenden Deklarationen: gap: 0.75rem. |
1307
+ | `.lux-row-gap-3` | Utility-Klasse mit folgenden Deklarationen: row-gap: 0.75rem. |
1308
+ | `.lux-col-gap-3` | Utility-Klasse mit folgenden Deklarationen: column-gap: 0.75rem. |
1309
+ | `.lux-gap-4` | Utility-Klasse mit folgenden Deklarationen: gap: 1rem. |
1310
+ | `.lux-row-gap-4` | Utility-Klasse mit folgenden Deklarationen: row-gap: 1rem. |
1311
+ | `.lux-col-gap-4` | Utility-Klasse mit folgenden Deklarationen: column-gap: 1rem. |
1312
+ | `.lux-gap-5` | Utility-Klasse mit folgenden Deklarationen: gap: 1.25rem. |
1313
+ | `.lux-row-gap-5` | Utility-Klasse mit folgenden Deklarationen: row-gap: 1.25rem. |
1314
+ | `.lux-col-gap-5` | Utility-Klasse mit folgenden Deklarationen: column-gap: 1.25rem. |
1315
+ | `.lux-gap-6` | Utility-Klasse mit folgenden Deklarationen: gap: 1.5rem. |
1316
+ | `.lux-row-gap-6` | Utility-Klasse mit folgenden Deklarationen: row-gap: 1.5rem. |
1317
+ | `.lux-col-gap-6` | Utility-Klasse mit folgenden Deklarationen: column-gap: 1.5rem. |
1318
+ | `.lux-gap-7` | Utility-Klasse mit folgenden Deklarationen: gap: 1.75rem. |
1319
+ | `.lux-row-gap-7` | Utility-Klasse mit folgenden Deklarationen: row-gap: 1.75rem. |
1320
+ | `.lux-col-gap-7` | Utility-Klasse mit folgenden Deklarationen: column-gap: 1.75rem. |
1321
+ | `.lux-gap-8` | Utility-Klasse mit folgenden Deklarationen: gap: 2rem. |
1322
+ | `.lux-row-gap-8` | Utility-Klasse mit folgenden Deklarationen: row-gap: 2rem. |
1323
+ | `.lux-col-gap-8` | Utility-Klasse mit folgenden Deklarationen: column-gap: 2rem. |
1324
+ | `.lux-gap-9` | Utility-Klasse mit folgenden Deklarationen: gap: 2.25rem. |
1325
+ | `.lux-row-gap-9` | Utility-Klasse mit folgenden Deklarationen: row-gap: 2.25rem. |
1326
+ | `.lux-col-gap-9` | Utility-Klasse mit folgenden Deklarationen: column-gap: 2.25rem. |
1327
+ | `.lux-gap-10` | Utility-Klasse mit folgenden Deklarationen: gap: 2.5rem. |
1328
+ | `.lux-row-gap-10` | Utility-Klasse mit folgenden Deklarationen: row-gap: 2.5rem. |
1329
+ | `.lux-col-gap-10` | Utility-Klasse mit folgenden Deklarationen: column-gap: 2.5rem. |
1330
+ | `.lux-gap-11` | Utility-Klasse mit folgenden Deklarationen: gap: 2.75rem. |
1331
+ | `.lux-row-gap-11` | Utility-Klasse mit folgenden Deklarationen: row-gap: 2.75rem. |
1332
+ | `.lux-col-gap-11` | Utility-Klasse mit folgenden Deklarationen: column-gap: 2.75rem. |
1333
+ | `.lux-gap-12` | Utility-Klasse mit folgenden Deklarationen: gap: 3rem. |
1334
+ | `.lux-row-gap-12` | Utility-Klasse mit folgenden Deklarationen: row-gap: 3rem. |
1335
+ | `.lux-col-gap-12` | Utility-Klasse mit folgenden Deklarationen: column-gap: 3rem. |
1336
+ | `.lux-gap-16` | Utility-Klasse mit folgenden Deklarationen: gap: 4rem. |
1337
+ | `.lux-row-gap-16` | Utility-Klasse mit folgenden Deklarationen: row-gap: 4rem. |
1338
+ | `.lux-col-gap-16` | Utility-Klasse mit folgenden Deklarationen: column-gap: 4rem. |
1339
+ | `.lux-gap-20` | Utility-Klasse mit folgenden Deklarationen: gap: 5rem. |
1340
+ | `.lux-row-gap-20` | Utility-Klasse mit folgenden Deklarationen: row-gap: 5rem. |
1341
+ | `.lux-col-gap-20` | Utility-Klasse mit folgenden Deklarationen: column-gap: 5rem. |
1342
+ | `.lux-gap-24` | Utility-Klasse mit folgenden Deklarationen: gap: 6rem. |
1343
+ | `.lux-row-gap-24` | Utility-Klasse mit folgenden Deklarationen: row-gap: 6rem. |
1344
+ | `.lux-col-gap-24` | Utility-Klasse mit folgenden Deklarationen: column-gap: 6rem. |
1345
+ | `.lux-gap-28` | Utility-Klasse mit folgenden Deklarationen: gap: 7rem. |
1346
+ | `.lux-row-gap-28` | Utility-Klasse mit folgenden Deklarationen: row-gap: 7rem. |
1347
+ | `.lux-col-gap-28` | Utility-Klasse mit folgenden Deklarationen: column-gap: 7rem. |
1348
+ | `.lux-gap-32` | Utility-Klasse mit folgenden Deklarationen: gap: 8rem. |
1349
+ | `.lux-row-gap-32` | Utility-Klasse mit folgenden Deklarationen: row-gap: 8rem. |
1350
+ | `.lux-col-gap-32` | Utility-Klasse mit folgenden Deklarationen: column-gap: 8rem. |
1351
+ | `.lux-gap-36` | Utility-Klasse mit folgenden Deklarationen: gap: 9rem. |
1352
+ | `.lux-row-gap-36` | Utility-Klasse mit folgenden Deklarationen: row-gap: 9rem. |
1353
+ | `.lux-col-gap-36` | Utility-Klasse mit folgenden Deklarationen: column-gap: 9rem. |
1354
+ | `.lux-gap-40` | Utility-Klasse mit folgenden Deklarationen: gap: 10rem. |
1355
+ | `.lux-row-gap-40` | Utility-Klasse mit folgenden Deklarationen: row-gap: 10rem. |
1356
+ | `.lux-col-gap-40` | Utility-Klasse mit folgenden Deklarationen: column-gap: 10rem. |
1357
+ | `.lux-gap-44` | Utility-Klasse mit folgenden Deklarationen: gap: 11rem. |
1358
+ | `.lux-row-gap-44` | Utility-Klasse mit folgenden Deklarationen: row-gap: 11rem. |
1359
+ | `.lux-col-gap-44` | Utility-Klasse mit folgenden Deklarationen: column-gap: 11rem. |
1360
+ | `.lux-gap-48` | Utility-Klasse mit folgenden Deklarationen: gap: 12rem. |
1361
+ | `.lux-row-gap-48` | Utility-Klasse mit folgenden Deklarationen: row-gap: 12rem. |
1362
+ | `.lux-col-gap-48` | Utility-Klasse mit folgenden Deklarationen: column-gap: 12rem. |
1363
+ | `.lux-gap-52` | Utility-Klasse mit folgenden Deklarationen: gap: 13rem. |
1364
+ | `.lux-row-gap-52` | Utility-Klasse mit folgenden Deklarationen: row-gap: 13rem. |
1365
+ | `.lux-col-gap-52` | Utility-Klasse mit folgenden Deklarationen: column-gap: 13rem. |
1366
+ | `.lux-gap-56` | Utility-Klasse mit folgenden Deklarationen: gap: 14rem. |
1367
+ | `.lux-row-gap-56` | Utility-Klasse mit folgenden Deklarationen: row-gap: 14rem. |
1368
+ | `.lux-col-gap-56` | Utility-Klasse mit folgenden Deklarationen: column-gap: 14rem. |
1369
+ | `.lux-gap-60` | Utility-Klasse mit folgenden Deklarationen: gap: 15rem. |
1370
+ | `.lux-row-gap-60` | Utility-Klasse mit folgenden Deklarationen: row-gap: 15rem. |
1371
+ | `.lux-col-gap-60` | Utility-Klasse mit folgenden Deklarationen: column-gap: 15rem. |
1372
+ | `.lux-gap-64` | Utility-Klasse mit folgenden Deklarationen: gap: 16rem. |
1373
+ | `.lux-row-gap-64` | Utility-Klasse mit folgenden Deklarationen: row-gap: 16rem. |
1374
+ | `.lux-col-gap-64` | Utility-Klasse mit folgenden Deklarationen: column-gap: 16rem. |
1375
+ | `.lux-gap-72` | Utility-Klasse mit folgenden Deklarationen: gap: 18rem. |
1376
+ | `.lux-row-gap-72` | Utility-Klasse mit folgenden Deklarationen: row-gap: 18rem. |
1377
+ | `.lux-col-gap-72` | Utility-Klasse mit folgenden Deklarationen: column-gap: 18rem. |
1378
+ | `.lux-gap-80` | Utility-Klasse mit folgenden Deklarationen: gap: 20rem. |
1379
+ | `.lux-row-gap-80` | Utility-Klasse mit folgenden Deklarationen: row-gap: 20rem. |
1380
+ | `.lux-col-gap-80` | Utility-Klasse mit folgenden Deklarationen: column-gap: 20rem. |
1381
+ | `.lux-gap-96` | Utility-Klasse mit folgenden Deklarationen: gap: 24rem. |
1382
+ | `.lux-row-gap-96` | Utility-Klasse mit folgenden Deklarationen: row-gap: 24rem. |
1383
+ | `.lux-col-gap-96` | Utility-Klasse mit folgenden Deklarationen: column-gap: 24rem. |
1384
+ | `.lux-grid-cols-1` | Utility-Klasse mit folgenden Deklarationen: grid-template-columns: repeat(1, minmax(0, 1fr)). |
1385
+ | `.lux-col-span-1` | Utility-Klasse mit folgenden Deklarationen: grid-column: span 1/span 1. |
1386
+ | `.lux-col-start-1` | Utility-Klasse mit folgenden Deklarationen: grid-column-start: 1. |
1387
+ | `.lux-col-end-1` | Utility-Klasse mit folgenden Deklarationen: grid-column-end: 1. |
1388
+ | `.lux-grid-cols-2` | Utility-Klasse mit folgenden Deklarationen: grid-template-columns: repeat(2, minmax(0, 1fr)). |
1389
+ | `.lux-col-span-2` | Utility-Klasse mit folgenden Deklarationen: grid-column: span 2/span 2. |
1390
+ | `.lux-col-start-2` | Utility-Klasse mit folgenden Deklarationen: grid-column-start: 2. |
1391
+ | `.lux-col-end-2` | Utility-Klasse mit folgenden Deklarationen: grid-column-end: 2. |
1392
+ | `.lux-grid-cols-3` | Utility-Klasse mit folgenden Deklarationen: grid-template-columns: repeat(3, minmax(0, 1fr)). |
1393
+ | `.lux-col-span-3` | Utility-Klasse mit folgenden Deklarationen: grid-column: span 3/span 3. |
1394
+ | `.lux-col-start-3` | Utility-Klasse mit folgenden Deklarationen: grid-column-start: 3. |
1395
+ | `.lux-col-end-3` | Utility-Klasse mit folgenden Deklarationen: grid-column-end: 3. |
1396
+ | `.lux-grid-cols-4` | Utility-Klasse mit folgenden Deklarationen: grid-template-columns: repeat(4, minmax(0, 1fr)). |
1397
+ | `.lux-col-span-4` | Utility-Klasse mit folgenden Deklarationen: grid-column: span 4/span 4. |
1398
+ | `.lux-col-start-4` | Utility-Klasse mit folgenden Deklarationen: grid-column-start: 4. |
1399
+ | `.lux-col-end-4` | Utility-Klasse mit folgenden Deklarationen: grid-column-end: 4. |
1400
+ | `.lux-grid-cols-5` | Utility-Klasse mit folgenden Deklarationen: grid-template-columns: repeat(5, minmax(0, 1fr)). |
1401
+ | `.lux-col-span-5` | Utility-Klasse mit folgenden Deklarationen: grid-column: span 5/span 5. |
1402
+ | `.lux-col-start-5` | Utility-Klasse mit folgenden Deklarationen: grid-column-start: 5. |
1403
+ | `.lux-col-end-5` | Utility-Klasse mit folgenden Deklarationen: grid-column-end: 5. |
1404
+ | `.lux-grid-cols-6` | Utility-Klasse mit folgenden Deklarationen: grid-template-columns: repeat(6, minmax(0, 1fr)). |
1405
+ | `.lux-col-span-6` | Utility-Klasse mit folgenden Deklarationen: grid-column: span 6/span 6. |
1406
+ | `.lux-col-start-6` | Utility-Klasse mit folgenden Deklarationen: grid-column-start: 6. |
1407
+ | `.lux-col-end-6` | Utility-Klasse mit folgenden Deklarationen: grid-column-end: 6. |
1408
+ | `.lux-grid-cols-7` | Utility-Klasse mit folgenden Deklarationen: grid-template-columns: repeat(7, minmax(0, 1fr)). |
1409
+ | `.lux-col-span-7` | Utility-Klasse mit folgenden Deklarationen: grid-column: span 7/span 7. |
1410
+ | `.lux-col-start-7` | Utility-Klasse mit folgenden Deklarationen: grid-column-start: 7. |
1411
+ | `.lux-col-end-7` | Utility-Klasse mit folgenden Deklarationen: grid-column-end: 7. |
1412
+ | `.lux-grid-cols-8` | Utility-Klasse mit folgenden Deklarationen: grid-template-columns: repeat(8, minmax(0, 1fr)). |
1413
+ | `.lux-col-span-8` | Utility-Klasse mit folgenden Deklarationen: grid-column: span 8/span 8. |
1414
+ | `.lux-col-start-8` | Utility-Klasse mit folgenden Deklarationen: grid-column-start: 8. |
1415
+ | `.lux-col-end-8` | Utility-Klasse mit folgenden Deklarationen: grid-column-end: 8. |
1416
+ | `.lux-grid-cols-9` | Utility-Klasse mit folgenden Deklarationen: grid-template-columns: repeat(9, minmax(0, 1fr)). |
1417
+ | `.lux-col-span-9` | Utility-Klasse mit folgenden Deklarationen: grid-column: span 9/span 9. |
1418
+ | `.lux-col-start-9` | Utility-Klasse mit folgenden Deklarationen: grid-column-start: 9. |
1419
+ | `.lux-col-end-9` | Utility-Klasse mit folgenden Deklarationen: grid-column-end: 9. |
1420
+ | `.lux-grid-cols-10` | Utility-Klasse mit folgenden Deklarationen: grid-template-columns: repeat(10, minmax(0, 1fr)). |
1421
+ | `.lux-col-span-10` | Utility-Klasse mit folgenden Deklarationen: grid-column: span 10/span 10. |
1422
+ | `.lux-col-start-10` | Utility-Klasse mit folgenden Deklarationen: grid-column-start: 10. |
1423
+ | `.lux-col-end-10` | Utility-Klasse mit folgenden Deklarationen: grid-column-end: 10. |
1424
+ | `.lux-grid-cols-11` | Utility-Klasse mit folgenden Deklarationen: grid-template-columns: repeat(11, minmax(0, 1fr)). |
1425
+ | `.lux-col-span-11` | Utility-Klasse mit folgenden Deklarationen: grid-column: span 11/span 11. |
1426
+ | `.lux-col-start-11` | Utility-Klasse mit folgenden Deklarationen: grid-column-start: 11. |
1427
+ | `.lux-col-end-11` | Utility-Klasse mit folgenden Deklarationen: grid-column-end: 11. |
1428
+ | `.lux-grid-cols-12` | Utility-Klasse mit folgenden Deklarationen: grid-template-columns: repeat(12, minmax(0, 1fr)). |
1429
+ | `.lux-col-span-12` | Utility-Klasse mit folgenden Deklarationen: grid-column: span 12/span 12. |
1430
+ | `.lux-col-start-12` | Utility-Klasse mit folgenden Deklarationen: grid-column-start: 12. |
1431
+ | `.lux-col-end-12` | Utility-Klasse mit folgenden Deklarationen: grid-column-end: 12. |
1432
+ | `.lux-grid-cols-none` | Utility-Klasse mit folgenden Deklarationen: grid-template-columns: none. |
1433
+ | `.lux-col-auto` | Utility-Klasse mit folgenden Deklarationen: grid-column: auto. |
1434
+ | `.lux-col-start-13` | Utility-Klasse mit folgenden Deklarationen: grid-column-start: 13. |
1435
+ | `.lux-col-end-13` | Utility-Klasse mit folgenden Deklarationen: grid-column-end: 13. |
1436
+ | `.lux-col-span-full` | Utility-Klasse mit folgenden Deklarationen: grid-column: 1/-1. |
1437
+ | `.lux-col-start-auto` | Utility-Klasse mit folgenden Deklarationen: grid-column-start: auto. |
1438
+ | `.lux-col-end-auto` | Utility-Klasse mit folgenden Deklarationen: grid-column-end: auto. |
1439
+ | `.lux-grid-rows-1` | Utility-Klasse mit folgenden Deklarationen: grid-template-rows: repeat(1, minmax(0, 1fr)). |
1440
+ | `.lux-row-span-1` | Utility-Klasse mit folgenden Deklarationen: grid-row: span 1/span 1. |
1441
+ | `.lux-row-start-1` | Utility-Klasse mit folgenden Deklarationen: grid-row-start: 1. |
1442
+ | `.lux-row-end-1` | Utility-Klasse mit folgenden Deklarationen: grid-row-end: 1. |
1443
+ | `.lux-grid-rows-2` | Utility-Klasse mit folgenden Deklarationen: grid-template-rows: repeat(2, minmax(0, 1fr)). |
1444
+ | `.lux-row-span-2` | Utility-Klasse mit folgenden Deklarationen: grid-row: span 2/span 2. |
1445
+ | `.lux-row-start-2` | Utility-Klasse mit folgenden Deklarationen: grid-row-start: 2. |
1446
+ | `.lux-row-end-2` | Utility-Klasse mit folgenden Deklarationen: grid-row-end: 2. |
1447
+ | `.lux-grid-rows-3` | Utility-Klasse mit folgenden Deklarationen: grid-template-rows: repeat(3, minmax(0, 1fr)). |
1448
+ | `.lux-row-span-3` | Utility-Klasse mit folgenden Deklarationen: grid-row: span 3/span 3. |
1449
+ | `.lux-row-start-3` | Utility-Klasse mit folgenden Deklarationen: grid-row-start: 3. |
1450
+ | `.lux-row-end-3` | Utility-Klasse mit folgenden Deklarationen: grid-row-end: 3. |
1451
+ | `.lux-grid-rows-4` | Utility-Klasse mit folgenden Deklarationen: grid-template-rows: repeat(4, minmax(0, 1fr)). |
1452
+ | `.lux-row-span-4` | Utility-Klasse mit folgenden Deklarationen: grid-row: span 4/span 4. |
1453
+ | `.lux-row-start-4` | Utility-Klasse mit folgenden Deklarationen: grid-row-start: 4. |
1454
+ | `.lux-row-end-4` | Utility-Klasse mit folgenden Deklarationen: grid-row-end: 4. |
1455
+ | `.lux-grid-rows-5` | Utility-Klasse mit folgenden Deklarationen: grid-template-rows: repeat(5, minmax(0, 1fr)). |
1456
+ | `.lux-row-span-5` | Utility-Klasse mit folgenden Deklarationen: grid-row: span 5/span 5. |
1457
+ | `.lux-row-start-5` | Utility-Klasse mit folgenden Deklarationen: grid-row-start: 5. |
1458
+ | `.lux-row-end-5` | Utility-Klasse mit folgenden Deklarationen: grid-row-end: 5. |
1459
+ | `.lux-grid-rows-6` | Utility-Klasse mit folgenden Deklarationen: grid-template-rows: repeat(6, minmax(0, 1fr)). |
1460
+ | `.lux-row-span-6` | Utility-Klasse mit folgenden Deklarationen: grid-row: span 6/span 6. |
1461
+ | `.lux-row-start-6` | Utility-Klasse mit folgenden Deklarationen: grid-row-start: 6. |
1462
+ | `.lux-row-end-6` | Utility-Klasse mit folgenden Deklarationen: grid-row-end: 6. |
1463
+ | `.lux-grid-rows-none` | Utility-Klasse mit folgenden Deklarationen: grid-template-rows: none. |
1464
+ | `.lux-row-span-full` | Utility-Klasse mit folgenden Deklarationen: grid-row: 1/-1. |
1465
+ | `.lux-row-start-auto` | Utility-Klasse mit folgenden Deklarationen: grid-row-start: auto. |
1466
+ | `.lux-row-end-auto` | Utility-Klasse mit folgenden Deklarationen: grid-row-end: auto. |
1467
+ | `.lux-row-start-7` | Utility-Klasse mit folgenden Deklarationen: grid-row-start: 7. |
1468
+ | `.lux-row-end-7` | Utility-Klasse mit folgenden Deklarationen: grid-row-end: 7. |
1469
+ | `.lux-grid-flow-row` | Utility-Klasse mit folgenden Deklarationen: grid-auto-flow: row. |
1470
+ | `.lux-grid-flow-col` | Utility-Klasse mit folgenden Deklarationen: grid-auto-flow: column. |
1471
+ | `.lux-grid-flow-dense` | Utility-Klasse mit folgenden Deklarationen: grid-auto-flow: dense. |
1472
+ | `.lux-grid-flow-row-dense` | Utility-Klasse mit folgenden Deklarationen: grid-auto-flow: row dense. |
1473
+ | `.lux-grid-flow-col-dense` | Utility-Klasse mit folgenden Deklarationen: grid-auto-flow: column dense. |
1474
+ | `.lux-auto-cols-auto` | Utility-Klasse mit folgenden Deklarationen: grid-auto-columns: auto. |
1475
+ | `.lux-auto-cols-min` | Utility-Klasse mit folgenden Deklarationen: grid-auto-columns: min-content. |
1476
+ | `.lux-auto-cols-max` | Utility-Klasse mit folgenden Deklarationen: grid-auto-columns: max-content. |
1477
+ | `.lux-auto-cols-fr` | Utility-Klasse mit folgenden Deklarationen: grid-auto-columns: minmax(0, 1fr). |
1478
+ | `.lux-auto-rows-auto` | Utility-Klasse mit folgenden Deklarationen: grid-auto-rows: auto. |
1479
+ | `.lux-auto-rows-min` | Utility-Klasse mit folgenden Deklarationen: grid-auto-rows: min-content. |
1480
+ | `.lux-auto-rows-max` | Utility-Klasse mit folgenden Deklarationen: grid-auto-rows: max-content. |
1481
+ | `.lux-auto-rows-fr` | Utility-Klasse mit folgenden Deklarationen: grid-auto-rows: minmax(0, 1fr). |
1482
+ | `.lux-static` | Utility-Klasse mit folgenden Deklarationen: position: static. |
1483
+ | `.lux-relative` | Utility-Klasse mit folgenden Deklarationen: position: relative. |
1484
+ | `.lux-absolute` | Utility-Klasse mit folgenden Deklarationen: position: absolute. |
1485
+ | `.lux-fixed` | Utility-Klasse mit folgenden Deklarationen: position: fixed. |
1486
+ | `.lux-sticky` | Utility-Klasse mit folgenden Deklarationen: position: sticky. |
1487
+ | `.lux-inset-0` | Utility-Klasse mit folgenden Deklarationen: inset: 0. |
1488
+ | `.lux-top-0` | Utility-Klasse mit folgenden Deklarationen: top: 0. |
1489
+ | `.lux-right-0` | Utility-Klasse mit folgenden Deklarationen: right: 0. |
1490
+ | `.lux-bottom-0` | Utility-Klasse mit folgenden Deklarationen: bottom: 0. |
1491
+ | `.lux-left-0` | Utility-Klasse mit folgenden Deklarationen: left: 0. |
1492
+ | `.lux-inset-auto` | Utility-Klasse mit folgenden Deklarationen: inset: auto. |
1493
+ | `.lux-top-auto` | Utility-Klasse mit folgenden Deklarationen: top: auto. |
1494
+ | `.lux-right-auto` | Utility-Klasse mit folgenden Deklarationen: right: auto. |
1495
+ | `.lux-bottom-auto` | Utility-Klasse mit folgenden Deklarationen: bottom: auto. |
1496
+ | `.lux-left-auto` | Utility-Klasse mit folgenden Deklarationen: left: auto. |
1497
+ | `.lux-z-auto` | Utility-Klasse mit folgenden Deklarationen: z-index: auto. |
1498
+ | `.lux-z-0` | Utility-Klasse mit folgenden Deklarationen: z-index: 0. |
1499
+ | `.lux-z-1` | Utility-Klasse mit folgenden Deklarationen: z-index: 1. |
1500
+ | `.lux-z-5` | Utility-Klasse mit folgenden Deklarationen: z-index: 5. |
1501
+ | `.lux-z-8` | Utility-Klasse mit folgenden Deklarationen: z-index: 8. |
1502
+ | `.lux-z-9` | Utility-Klasse mit folgenden Deklarationen: z-index: 9. |
1503
+ | `.lux-z-10` | Utility-Klasse mit folgenden Deklarationen: z-index: 10. |
1504
+ | `.lux-z-100` | Utility-Klasse mit folgenden Deklarationen: z-index: 100. |
1505
+ | `.lux-z-199` | Utility-Klasse mit folgenden Deklarationen: z-index: 199. |
1506
+ | `.lux-z-200` | Utility-Klasse mit folgenden Deklarationen: z-index: 200. |
1507
+ | `.lux-z-500` | Utility-Klasse mit folgenden Deklarationen: z-index: 500. |
1508
+ | `.lux-z-1000` | Utility-Klasse mit folgenden Deklarationen: z-index: 1000. |
1509
+ | `.lux-z-10000` | Utility-Klasse mit folgenden Deklarationen: z-index: 10000. |
1510
+ | `.lux-overflow-auto` | Utility-Klasse mit folgenden Deklarationen: overflow: auto. |
1511
+ | `.lux-overflow-x-auto` | Utility-Klasse mit folgenden Deklarationen: overflow-x: auto. |
1512
+ | `.lux-overflow-y-auto` | Utility-Klasse mit folgenden Deklarationen: overflow-y: auto. |
1513
+ | `.lux-overflow-hidden` | Utility-Klasse mit folgenden Deklarationen: overflow: hidden. |
1514
+ | `.lux-overflow-x-hidden` | Utility-Klasse mit folgenden Deklarationen: overflow-x: hidden. |
1515
+ | `.lux-overflow-y-hidden` | Utility-Klasse mit folgenden Deklarationen: overflow-y: hidden. |
1516
+ | `.lux-overflow-visible` | Utility-Klasse mit folgenden Deklarationen: overflow: visible. |
1517
+ | `.lux-overflow-x-visible` | Utility-Klasse mit folgenden Deklarationen: overflow-x: visible. |
1518
+ | `.lux-overflow-y-visible` | Utility-Klasse mit folgenden Deklarationen: overflow-y: visible. |
1519
+ | `.lux-overflow-scroll` | Utility-Klasse mit folgenden Deklarationen: overflow: scroll. |
1520
+ | `.lux-overflow-x-scroll` | Utility-Klasse mit folgenden Deklarationen: overflow-x: scroll. |
1521
+ | `.lux-overflow-y-scroll` | Utility-Klasse mit folgenden Deklarationen: overflow-y: scroll. |
1522
+ | `.lux-border-0` | Utility-Klasse mit folgenden Deklarationen: border: none. |
1523
+ | `.lux-rounded-none` | Utility-Klasse mit folgenden Deklarationen: border-radius: 0. |
1524
+ | `.lux-rounded-sm` | Utility-Klasse mit folgenden Deklarationen: border-radius: var(--lux-theme-radius-xs). |
1525
+ | `.lux-rounded-md` | Utility-Klasse mit folgenden Deklarationen: border-radius: var(--lux-theme-radius-sm). |
1526
+ | `.lux-rounded-lg` | Utility-Klasse mit folgenden Deklarationen: border-radius: var(--lux-theme-radius-md). |
1527
+ | `.lux-rounded-full` | Utility-Klasse mit folgenden Deklarationen: border-radius: 50%. |
1528
+ | `.lux-rounded-theme` | Utility-Klasse mit folgenden Deklarationen: border-radius: var(--lux-theme-app-border-radius). |
1529
+ | `.lux-shadow-none` | Utility-Klasse mit folgenden Deklarationen: box-shadow: none. |
1530
+ | `.lux-cursor-pointer` | Utility-Klasse mit folgenden Deklarationen: cursor: pointer. |
1531
+ | `.lux-cursor-default` | Utility-Klasse mit folgenden Deklarationen: cursor: default. |
1532
+ | `.lux-pointer-events-none` | Utility-Klasse mit folgenden Deklarationen: pointer-events: none. |
1533
+ | `.lux-pointer-events-auto` | Utility-Klasse mit folgenden Deklarationen: pointer-events: auto. |
1534
+ | `.lux-text-xs` | Utility-Klasse mit folgenden Deklarationen: font-size: var(--lux-theme-font-size-xs). |
1535
+ | `.lux-text-sm` | Utility-Klasse mit folgenden Deklarationen: font-size: var(--lux-theme-font-size-sm). |
1536
+ | `.lux-text-base` | Utility-Klasse mit folgenden Deklarationen: font-size: var(--lux-theme-font-size-md). |
1537
+ | `.lux-text-lg` | Utility-Klasse mit folgenden Deklarationen: font-size: var(--lux-theme-font-size-lg). |
1538
+ | `.lux-text-xl` | Utility-Klasse mit folgenden Deklarationen: font-size: var(--lux-theme-font-size-xl). |
1539
+ | `.lux-text-2xl` | Utility-Klasse mit folgenden Deklarationen: font-size: var(--lux-theme-font-size-2xl). |
1540
+ | `.lux-font-light` | Utility-Klasse mit folgenden Deklarationen: font-weight: 300. |
1541
+ | `.lux-font-normal` | Utility-Klasse mit folgenden Deklarationen: font-weight: 400. |
1542
+ | `.lux-font-medium` | Utility-Klasse mit folgenden Deklarationen: font-weight: 500. |
1543
+ | `.lux-font-semibold` | Utility-Klasse mit folgenden Deklarationen: font-weight: 600. |
1544
+ | `.lux-font-bold` | Utility-Klasse mit folgenden Deklarationen: font-weight: 700. |
1545
+ | `.lux-font-headline` | Utility-Klasse mit folgenden Deklarationen: font-family: var(--lux-theme-app-headline-font, inherit). |
1546
+ | `.lux-font-body` | Utility-Klasse mit folgenden Deklarationen: font-family: var(--lux-theme-app-font-family, inherit). |
1547
+ | `.lux-leading-none` | Utility-Klasse mit folgenden Deklarationen: line-height: 1. |
1548
+ | `.lux-leading-tight` | Utility-Klasse mit folgenden Deklarationen: line-height: 1.2. |
1549
+ | `.lux-leading-normal` | Utility-Klasse mit folgenden Deklarationen: line-height: 1.5. |
1550
+ | `.lux-leading-relaxed` | Utility-Klasse mit folgenden Deklarationen: line-height: 1.75. |
1551
+ | `.lux-whitespace-nowrap` | Utility-Klasse mit folgenden Deklarationen: white-space: nowrap. |
1552
+ | `.lux-whitespace-normal` | Utility-Klasse mit folgenden Deklarationen: white-space: normal. |
1553
+ | `.lux-bg-transparent` | Utility-Klasse mit folgenden Deklarationen: background: transparent. |
1554
+ | `.lux-bg-header` | Utility-Klasse mit folgenden Deklarationen: background-color: var(--lux-theme-app-header-bg). |
1555
+ | `.lux-bg-content` | Utility-Klasse mit folgenden Deklarationen: background-color: var(--lux-theme-app-content-bg). |
1556
+ | `.lux-bg-footer` | Utility-Klasse mit folgenden Deklarationen: background-color: var(--lux-theme-app-footer-bg). |
1557
+ | `.lux-bg-primary` | Utility-Klasse mit folgenden Deklarationen: background-color: var(--lux-theme-primary-color). |
1558
+ | `.lux-text-primary` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-primary-color). |
1559
+ | `.lux-text-dark` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-dark-primary-text). |
1560
+ | `.lux-text-light` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-light-primary-text). |
1561
+ | `.lux-text-secondary` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-dark-secondary-text). |
1562
+ | `.lux-text-disabled` | Utility-Klasse mit folgenden Deklarationen: color: var(--lux-theme-dark-disabled-text). |
1563
+ | `.lux-outline-none` | Utility-Klasse mit folgenden Deklarationen: outline: none. |
1564
+ | `.lux-transition-none` | Utility-Klasse mit folgenden Deklarationen: transition: none. |
1565
+ | `.lux-vertical` | Utility-Klasse mit folgenden Deklarationen: flex-direction: column. |
1566
+ | `.lux-form-error-container` | Utility-Klasse mit folgenden Deklarationen: display: flex, flex: 0 1 auto, font-size: 0.75rem. |
1567
+ | `.lux-form-error-icon` | Utility-Klasse mit folgenden Deklarationen: color: var(--mat-sys-on-error-container). |
1568
+ | `.lux-form-error-label` | Utility-Klasse mit folgenden Deklarationen: display: flex, flex: 0 1 auto, background-color: var(--lux-theme-form-error-msg-background). |
1569
+ | `.lux-focused` | Utility-Klasse mit folgenden Deklarationen: outline: var(--lux-theme-outline-dark). |
1570
+
1571
+ ## Code-Beispiele
1572
+
1573
+ ### CSS-Variable nutzen
115
1574
 
116
1575
  Beispiel:
117
1576
 
@@ -129,7 +1588,7 @@ span.highlight {
129
1588
  }
130
1589
  ```
131
1590
 
132
- #### LUX-Card umstylen
1591
+ ### LUX-Card umstylen
133
1592
 
134
1593
  Beispiel:
135
1594
 
@@ -154,7 +1613,7 @@ lux-card.highlight {
154
1613
  }
155
1614
  ```
156
1615
 
157
- #### LUX-Button (rund) umstylen
1616
+ ### LUX-Button (rund) umstylen
158
1617
 
159
1618
  Beispiel:
160
1619
 
@@ -173,7 +1632,7 @@ lux-button.my-button {
173
1632
  }
174
1633
  ```
175
1634
 
176
- #### LUX-Button (stroked) umstylen
1635
+ ### LUX-Button (stroked) umstylen
177
1636
 
178
1637
  Beispiel:
179
1638
 
@@ -194,7 +1653,7 @@ lux-button.my-button {
194
1653
  }
195
1654
  ```
196
1655
 
197
- #### CSS-Klasse
1656
+ ### CSS-Klasse
198
1657
 
199
1658
  HTML-Datei:
200
1659