@ihk-gfi/lux-components-theme 21.0.0 → 21.2.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 (25) hide show
  1. package/README.md +30 -28
  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 +276 -46
  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 +278 -48
  10. package/prebuilt-themes/luxtheme-green.css.map +1 -1
  11. package/src/base-templates/components/_luxBreadcrumb.scss +63 -33
  12. package/src/base-templates/components/_luxButton.scss +1 -0
  13. package/src/base-templates/components/_luxButtonIcon.scss +44 -0
  14. package/src/base-templates/components/_luxButtonRoundedStroked.scss +8 -1
  15. package/src/base-templates/components/_luxButtonSpinner.scss +3 -3
  16. package/src/base-templates/components/_luxButtonToggle.scss +61 -0
  17. package/src/base-templates/components/_luxChips.scss +21 -0
  18. package/src/base-templates/components/_luxConsent.scss +63 -0
  19. package/src/base-templates/components/_luxDialog.scss +29 -6
  20. package/src/base-templates/components/_luxInput.scss +4 -8
  21. package/src/base-templates/components/_luxSelect.scss +41 -1
  22. package/src/theme-authentic/_variables.scss +28 -4
  23. package/src/theme-authentic/lux-authentic.scss +2 -0
  24. package/src/theme-green/_variables.scss +29 -5
  25. package/src/theme-green/lux-green.scss +2 -0
package/README.md CHANGED
@@ -3,19 +3,21 @@
3
3
  - [Theme](#theme)
4
4
  - [Installation](#installation)
5
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)
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
10
  - [Code-Beispiele](#code-beispiele)
11
- - [Css-Variable nutzen](#css-variable-nutzen)
11
+ - [CSS-Variable nutzen](#css-variable-nutzen)
12
12
  - [LUX-Card umstylen](#lux-card-umstylen)
13
13
  - [LUX-Button (rund) umstylen](#lux-button-rund-umstylen)
14
14
  - [LUX-Button (stroked) umstylen](#lux-button-stroked-umstylen)
15
- - [Css-Klasse](#css-klasse)
15
+ - [CSS-Klasse](#css-klasse)
16
16
  - [Lizenztext - Icons](#lizenztext---icons)
17
17
  - [Lizenztext - Fonts](#lizenztext---fonts)
18
18
 
19
+ Dieses Projekt enthält alle Themes der [LUX-Components](https://www.npmjs.com/package/@ihk-gfi/lux-components).
20
+
19
21
  > **Hinweis:** Seit Version 20 basiert das Theme auf [Material Theme 3 (MDC)](https://m3.material.io/) und verwendet Design Tokens für eine moderne, flexible und konsistente Gestaltung. Die Farbpaletten und Variablen wurden überarbeitet. Migrationstipps siehe unten.
20
22
 
21
23
  ## Installation
@@ -33,27 +35,27 @@ Ein LUX-Theme besteht immer aus unterschiedlichen Farbpaletten:
33
35
  - `lux-palette_warn`
34
36
  - `lux-palette_neutral`
35
37
 
36
- Aus den Farbpaletten werden eine Menge von Css-Variablen und Css-Klassen abgeleitet.
37
- Zusätzlich gibt es eine Menge von allgemeinen Css-Variablen und Css-Klassen.
38
- Alles zusammen bildet die Grundlage für das Theming der eigenen Komponenten auf Basis eines LUX-Themes.
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.
39
41
 
40
- ### Allgemeine Css-Variablen
42
+ ### Allgemeine CSS-Variablen
41
43
 
42
- Die verfügbaren Css-Variablen stehen im jeweiligen Theme:
44
+ Die verfügbaren CSS-Variablen stehen im jeweiligen Theme:
43
45
 
44
46
  - `projects\lux-components-theme\src\${themeName}\_variables.scss`
45
47
  - `projects\lux-components-theme\src\${themeName}\_variablesPreferContrast.scss`
46
48
 
47
- #### Css-Variablen-Beispiele
49
+ #### CSS-Variablen-Beispiele
48
50
 
49
- - --lux-theme-app-font-family (Schriften)
51
+ - --lux-theme-app-font-family (Schriftart)
50
52
  - --lux-theme-custom-red (Hintergrundfarbe)
51
53
  - --lux-theme-custom-on-red (Textfarbe)
52
54
  - --lux-theme-accordion-header-color-neutral (Hintergrundfarbe)
53
55
  - --lux-theme-accordion-header-color-on-neutral (Textfarbe)
54
56
  - ...
55
57
 
56
- ### Allgemeine Css-Klassen
58
+ ### Allgemeine CSS-Klassen
57
59
 
58
60
  - `lux-app-header-bg`
59
61
  - `lux-app-content-bg`
@@ -81,10 +83,10 @@ Die verfügbaren Css-Variablen stehen im jeweiligen Theme:
81
83
  - `lux-outline-light`
82
84
  - `lux-outline-dark`
83
85
 
84
- #### Css-Klassen
86
+ #### CSS-Klassen
85
87
 
86
- Zu jedem Eintrag (z.B. 0, 10, 20,...) der Farbpalette gibt es im LUX-Theme entsprechende Css-Klassen.
87
- Hier im Beispiel werden nur die Css-Klassen des Eintrags 20 aufgeführt. Die Klassen der anderen Einträge
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
88
90
  (0, 10, 20,...) sind analog aufgebaut.
89
91
 
90
92
  - `lux-color-primary-20`
@@ -109,17 +111,17 @@ Hier im Beispiel werden nur die Css-Klassen des Eintrags 20 aufgeführt. Die Kla
109
111
 
110
112
  ### Code-Beispiele
111
113
 
112
- #### Css-Variable nutzen
114
+ #### CSS-Variable nutzen
113
115
 
114
116
  Beispiel:
115
117
 
116
- Html-Datei:
118
+ HTML-Datei:
117
119
 
118
120
  ```html
119
121
  <span class="highlight">Lorem ipsum</span>
120
122
  ```
121
123
 
122
- Scss-Datei:
124
+ SCSS-Datei:
123
125
 
124
126
  ```scss
125
127
  span.highlight {
@@ -131,13 +133,13 @@ span.highlight {
131
133
 
132
134
  Beispiel:
133
135
 
134
- Html-Datei:
136
+ HTML-Datei:
135
137
 
136
138
  ```html
137
139
  <lux-card class="highlight" luxTitle="Lorem ipsum"></lux-card>
138
140
  ```
139
141
 
140
- Scss-Datei:
142
+ SCSS-Datei:
141
143
 
142
144
  ```scss
143
145
  lux-card.highlight {
@@ -156,13 +158,13 @@ lux-card.highlight {
156
158
 
157
159
  Beispiel:
158
160
 
159
- Html-Datei:
161
+ HTML-Datei:
160
162
 
161
163
  ```html
162
164
  <lux-button class="my-button" luxIconName="lux-save" [luxRounded]="true" [luxStroked]="true" luxLabel="Lorem ipsum"></lux-button>
163
165
  ```
164
166
 
165
- Scss-Datei:
167
+ SCSS-Datei:
166
168
 
167
169
  ```scss
168
170
  lux-button.my-button {
@@ -175,13 +177,13 @@ lux-button.my-button {
175
177
 
176
178
  Beispiel:
177
179
 
178
- Html-Datei:
180
+ HTML-Datei:
179
181
 
180
182
  ```html
181
183
  <lux-button class="my-button" luxLabel="Lorem ipsum" [luxStroked]="true" luxLabel="Lorem ipsum"></lux-button>
182
184
  ```
183
185
 
184
- Scss-Datei:
186
+ SCSS-Datei:
185
187
 
186
188
  ```scss
187
189
  lux-button.my-button {
@@ -192,9 +194,9 @@ lux-button.my-button {
192
194
  }
193
195
  ```
194
196
 
195
- #### Css-Klasse
197
+ #### CSS-Klasse
196
198
 
197
- Html-Datei:
199
+ HTML-Datei:
198
200
 
199
201
  ```html
200
202
  <div class="lux-color-accent-50 lux-bg-color-accent-30">Lorem ipsum</div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ihk-gfi/lux-components-theme",
3
- "version": "21.0.0",
3
+ "version": "21.2.0",
4
4
  "description": "",
5
5
  "private": false,
6
6
  "publishConfig": {