@db-ux/core-foundations 4.5.4 → 4.6.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 (111) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/README.md +16 -69
  3. package/agent/_instructions.md +84 -0
  4. package/agent/tailwind/Variables.md +11 -9
  5. package/build/styles/bundle.css +4820 -0
  6. package/build/styles/{index.scss → bundle.scss} +5 -0
  7. package/build/styles/colors/_default-color-mappings.scss +3461 -3472
  8. package/build/styles/colors/_placeholder.scss +155 -159
  9. package/build/styles/colors/classes/all.css +2499 -2601
  10. package/build/styles/colors/classes/blue.css +147 -185
  11. package/build/styles/colors/classes/brand.css +147 -185
  12. package/build/styles/colors/classes/burgundy.css +147 -185
  13. package/build/styles/colors/classes/critical.css +147 -185
  14. package/build/styles/colors/classes/cyan.css +147 -185
  15. package/build/styles/colors/classes/green.css +147 -185
  16. package/build/styles/colors/classes/informational.css +147 -185
  17. package/build/styles/colors/classes/light-green.css +147 -185
  18. package/build/styles/colors/classes/neutral.css +147 -185
  19. package/build/styles/colors/classes/orange.css +147 -185
  20. package/build/styles/colors/classes/pink.css +147 -185
  21. package/build/styles/colors/classes/red.css +147 -185
  22. package/build/styles/colors/classes/successful.css +147 -185
  23. package/build/styles/colors/classes/turquoise.css +147 -185
  24. package/build/styles/colors/classes/violet.css +147 -185
  25. package/build/styles/colors/classes/warning.css +147 -185
  26. package/build/styles/colors/classes/yellow.css +147 -185
  27. package/build/styles/defaults/default-code.css +97 -97
  28. package/build/styles/defaults/default-container-properties.css +1 -0
  29. package/build/styles/defaults/default-container-variables.css +1 -0
  30. package/build/styles/defaults/default-elevation.css +1 -1
  31. package/build/styles/defaults/default-fonts.css +1 -1
  32. package/build/styles/defaults/default-icons.css +1 -1
  33. package/build/styles/defaults/default-properties.css +1 -0
  34. package/build/styles/defaults/default-required.css +1 -1
  35. package/build/styles/defaults/default-required.scss +13 -16
  36. package/build/styles/defaults/default-root.css +97 -97
  37. package/build/styles/defaults/default-variables.css +1 -0
  38. package/build/styles/density/_scaling-placeholder.scss +51 -54
  39. package/build/styles/density/_typography-placeholder.scss +54 -60
  40. package/build/styles/density/classes/all.css +759 -907
  41. package/build/styles/density/classes/expressive.css +255 -377
  42. package/build/styles/density/classes/functional.css +255 -377
  43. package/build/styles/density/classes/regular.css +255 -377
  44. package/build/styles/fonts/_font-sizes.scss +10 -16
  45. package/build/styles/fonts/absolute.scss +1 -1
  46. package/build/styles/fonts/classes/all.css +54 -214
  47. package/build/styles/fonts/classes/body/2xl.css +3 -95
  48. package/build/styles/fonts/classes/body/2xs.css +3 -95
  49. package/build/styles/fonts/classes/body/3xl.css +3 -95
  50. package/build/styles/fonts/classes/body/3xs.css +3 -95
  51. package/build/styles/fonts/classes/body/all.css +27 -151
  52. package/build/styles/fonts/classes/body/lg.css +3 -95
  53. package/build/styles/fonts/classes/body/md.css +3 -95
  54. package/build/styles/fonts/classes/body/sm.css +3 -95
  55. package/build/styles/fonts/classes/body/xl.css +3 -95
  56. package/build/styles/fonts/classes/body/xs.css +3 -95
  57. package/build/styles/fonts/classes/headline/2xl.css +3 -95
  58. package/build/styles/fonts/classes/headline/2xs.css +3 -95
  59. package/build/styles/fonts/classes/headline/3xl.css +3 -95
  60. package/build/styles/fonts/classes/headline/3xs.css +3 -95
  61. package/build/styles/fonts/classes/headline/all.css +27 -151
  62. package/build/styles/fonts/classes/headline/lg.css +3 -95
  63. package/build/styles/fonts/classes/headline/md.css +3 -95
  64. package/build/styles/fonts/classes/headline/sm.css +3 -95
  65. package/build/styles/fonts/classes/headline/xl.css +3 -95
  66. package/build/styles/fonts/classes/headline/xs.css +3 -95
  67. package/build/styles/fonts/relative.scss +1 -1
  68. package/build/styles/fonts/rollup.scss +1 -1
  69. package/build/styles/fonts/webpack.scss +1 -1
  70. package/build/styles/helpers/_index.scss +0 -1
  71. package/build/styles/helpers/classes/all.css +0 -34
  72. package/build/styles/helpers/classes/divider.css +0 -34
  73. package/build/styles/helpers/classes/focus.css +0 -34
  74. package/build/styles/icons/absolute.css +1 -1
  75. package/build/styles/icons/absolute.scss +1 -1
  76. package/build/styles/icons/relative.css +1 -1
  77. package/build/styles/icons/relative.scss +1 -1
  78. package/build/styles/icons/rollup.css +1 -1
  79. package/build/styles/icons/rollup.scss +1 -1
  80. package/build/styles/icons/webpack.css +1 -1
  81. package/build/styles/icons/webpack.scss +1 -1
  82. package/build/styles/theme/absolute.css +1 -0
  83. package/build/styles/theme/relative.css +1 -0
  84. package/build/styles/{defaults/default-theme.scss → theme/relative.scss} +3 -6
  85. package/build/styles/theme/rollup.css +1 -0
  86. package/build/styles/theme/webpack.css +1 -0
  87. package/build/tailwind/theme/colors.css +1 -2953
  88. package/build/tailwind/theme/colors.scss +1 -10
  89. package/build/tailwind/theme/dimensions.css +77 -160
  90. package/package.json +4 -4
  91. package/build/styles/absolute.css +0 -10635
  92. package/build/styles/defaults/default-theme.css +0 -97
  93. package/build/styles/helpers/_layer.scss +0 -1
  94. package/build/styles/index.css +0 -4907
  95. package/build/styles/relative.css +0 -10635
  96. package/build/styles/relative.scss +0 -4
  97. package/build/styles/rollup.css +0 -10635
  98. package/build/styles/webpack.css +0 -10635
  99. package/build/tailwind/theme/_variables.scss +0 -77
  100. package/build/tailwind/theme/dimensions.scss +0 -17
  101. /package/build/styles/defaults/{_default-container-properties.scss → default-container-properties.scss} +0 -0
  102. /package/build/styles/defaults/{_default-container-variables.scss → default-container-variables.scss} +0 -0
  103. /package/build/styles/defaults/{_default-properties.scss → default-properties.scss} +0 -0
  104. /package/build/styles/defaults/{_default-variables.scss → default-variables.scss} +0 -0
  105. /package/build/styles/{_absolute.assets-paths.scss → theme/_absolute.assets-paths.scss} +0 -0
  106. /package/build/styles/{_default.assets-paths.scss → theme/_default.assets-paths.scss} +0 -0
  107. /package/build/styles/{_rollup.assets-paths.scss → theme/_rollup.assets-paths.scss} +0 -0
  108. /package/build/styles/{_webpack.assets-paths.scss → theme/_webpack.assets-paths.scss} +0 -0
  109. /package/build/styles/{absolute.scss → theme/absolute.scss} +0 -0
  110. /package/build/styles/{rollup.scss → theme/rollup.scss} +0 -0
  111. /package/build/styles/{webpack.scss → theme/webpack.scss} +0 -0
package/build/styles/fonts/_font-sizes.scss CHANGED
@@ -1,14 +1,11 @@
1
1
  @use "../helpers";
2
2
 
3
3
  @mixin set-component-variables($size) {
4
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
5
- @layer #{helpers.$layer-variables} {
6
- /* Those variables are only for components to calculate heights and change icons */
7
- // stylelint-disable-next-line no-invalid-position-declaration
8
- --db-icon-font-weight: var(--db-base-body-icon-weight-#{$size});
9
- // stylelint-disable-next-line no-invalid-position-declaration
10
- --db-icon-font-size: var(--db-base-body-icon-font-size-#{$size});
11
- }
4
+ /* Those variables are only for components to calculate heights and change icons */
5
+ // stylelint-disable-next-line no-invalid-position-declaration
6
+ --db-icon-font-weight: var(--db-base-body-icon-weight-#{$size});
7
+ // stylelint-disable-next-line no-invalid-position-declaration
8
+ --db-icon-font-size: var(--db-base-body-icon-font-size-#{$size});
12
9
  }
13
10
 
14
11
  @mixin set-font-size($size) {
@@ -16,14 +13,11 @@
16
13
  }
17
14
 
18
15
  @mixin set-headline-variables($size) {
19
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
20
- @layer #{helpers.$layer-variables} {
21
- /* Those variables are only for components to calculate heights and change icons */
22
- // stylelint-disable-next-line no-invalid-position-declaration
23
- --db-icon-font-weight: var(--db-base-headline-icon-weight-#{$size});
24
- // stylelint-disable-next-line no-invalid-position-declaration
25
- --db-icon-font-size: var(--db-base-headline-icon-font-size-#{$size});
26
- }
16
+ /* Those variables are only for components to calculate heights and change icons */
17
+ // stylelint-disable-next-line no-invalid-position-declaration
18
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-#{$size});
19
+ // stylelint-disable-next-line no-invalid-position-declaration
20
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-#{$size});
27
21
  }
28
22
 
29
23
  @mixin set-headline-size($size) {
package/build/styles/fonts/absolute.scss CHANGED
@@ -1,2 +1,2 @@
1
- @use "../absolute.assets-paths";
1
+ @use "../theme/absolute.assets-paths";
2
2
  @forward "./relative";
package/build/styles/fonts/classes/all.css CHANGED
@@ -1,304 +1,144 @@
1
1
  /* Variants for adaptive components like input, select, notification, ... */
2
- @layer variables {}
3
-
4
- @layer variables {}
5
-
6
- @layer variables {}
7
-
8
- @layer variables {}
9
-
10
- @layer variables {}
11
-
12
- @layer variables {}
13
-
14
- @layer variables {}
15
-
16
- @layer variables {}
17
-
18
- @layer variables {}
19
-
20
- @layer variables {}
21
-
22
- @layer variables {}
23
-
24
- @layer variables {}
25
-
26
- @layer variables {}
27
-
28
- @layer variables {}
29
-
30
- @layer variables {}
31
-
32
- @layer variables {}
33
-
34
- @layer variables {}
35
-
36
- @layer variables {}
37
-
38
2
  .db-font-size-3xl,
39
3
  [data-font-size="3xl"] {
40
4
  font: var(--db-type-body-3xl);
41
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
42
- }
43
- @layer variables {
44
- .db-font-size-3xl,
45
- [data-font-size="3xl"] {
46
- /* Those variables are only for components to calculate heights and change icons */
47
- --db-icon-font-weight: var(--db-base-body-icon-weight-3xl);
48
- --db-icon-font-size: var(--db-base-body-icon-font-size-3xl);
49
- }
5
+ /* Those variables are only for components to calculate heights and change icons */
6
+ --db-icon-font-weight: var(--db-base-body-icon-weight-3xl);
7
+ --db-icon-font-size: var(--db-base-body-icon-font-size-3xl);
50
8
  }
51
9
 
52
10
  .db-headline-size-3xl,
53
11
  [data-headline-size="3xl"] {
54
12
  font: var(--db-type-headline-3xl);
55
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
56
- }
57
- @layer variables {
58
- .db-headline-size-3xl,
59
- [data-headline-size="3xl"] {
60
- /* Those variables are only for components to calculate heights and change icons */
61
- --db-icon-font-weight: var(--db-base-headline-icon-weight-3xl);
62
- --db-icon-font-size: var(--db-base-headline-icon-font-size-3xl);
63
- }
13
+ /* Those variables are only for components to calculate heights and change icons */
14
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-3xl);
15
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-3xl);
64
16
  }
65
17
 
66
- @layer variables {}
67
-
68
18
  .db-font-size-2xl,
69
19
  [data-font-size="2xl"] {
70
20
  font: var(--db-type-body-2xl);
71
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
72
- }
73
- @layer variables {
74
- .db-font-size-2xl,
75
- [data-font-size="2xl"] {
76
- /* Those variables are only for components to calculate heights and change icons */
77
- --db-icon-font-weight: var(--db-base-body-icon-weight-2xl);
78
- --db-icon-font-size: var(--db-base-body-icon-font-size-2xl);
79
- }
21
+ /* Those variables are only for components to calculate heights and change icons */
22
+ --db-icon-font-weight: var(--db-base-body-icon-weight-2xl);
23
+ --db-icon-font-size: var(--db-base-body-icon-font-size-2xl);
80
24
  }
81
25
 
82
26
  .db-headline-size-2xl,
83
27
  [data-headline-size="2xl"] {
84
28
  font: var(--db-type-headline-2xl);
85
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
29
+ /* Those variables are only for components to calculate heights and change icons */
30
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-2xl);
31
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-2xl);
86
32
  }
87
- @layer variables {
88
- .db-headline-size-2xl,
89
- [data-headline-size="2xl"] {
90
- /* Those variables are only for components to calculate heights and change icons */
91
- --db-icon-font-weight: var(--db-base-headline-icon-weight-2xl);
92
- --db-icon-font-size: var(--db-base-headline-icon-font-size-2xl);
93
- }
94
- }
95
-
96
- @layer variables {}
97
33
 
98
34
  .db-font-size-xl,
99
35
  [data-font-size=xl] {
100
36
  font: var(--db-type-body-xl);
101
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
102
- }
103
- @layer variables {
104
- .db-font-size-xl,
105
- [data-font-size=xl] {
106
- /* Those variables are only for components to calculate heights and change icons */
107
- --db-icon-font-weight: var(--db-base-body-icon-weight-xl);
108
- --db-icon-font-size: var(--db-base-body-icon-font-size-xl);
109
- }
37
+ /* Those variables are only for components to calculate heights and change icons */
38
+ --db-icon-font-weight: var(--db-base-body-icon-weight-xl);
39
+ --db-icon-font-size: var(--db-base-body-icon-font-size-xl);
110
40
  }
111
41
 
112
42
  .db-headline-size-xl,
113
43
  [data-headline-size=xl] {
114
44
  font: var(--db-type-headline-xl);
115
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
45
+ /* Those variables are only for components to calculate heights and change icons */
46
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-xl);
47
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-xl);
116
48
  }
117
- @layer variables {
118
- .db-headline-size-xl,
119
- [data-headline-size=xl] {
120
- /* Those variables are only for components to calculate heights and change icons */
121
- --db-icon-font-weight: var(--db-base-headline-icon-weight-xl);
122
- --db-icon-font-size: var(--db-base-headline-icon-font-size-xl);
123
- }
124
- }
125
-
126
- @layer variables {}
127
49
 
128
50
  .db-font-size-lg,
129
51
  [data-font-size=lg] {
130
52
  font: var(--db-type-body-lg);
131
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
132
- }
133
- @layer variables {
134
- .db-font-size-lg,
135
- [data-font-size=lg] {
136
- /* Those variables are only for components to calculate heights and change icons */
137
- --db-icon-font-weight: var(--db-base-body-icon-weight-lg);
138
- --db-icon-font-size: var(--db-base-body-icon-font-size-lg);
139
- }
53
+ /* Those variables are only for components to calculate heights and change icons */
54
+ --db-icon-font-weight: var(--db-base-body-icon-weight-lg);
55
+ --db-icon-font-size: var(--db-base-body-icon-font-size-lg);
140
56
  }
141
57
 
142
58
  .db-headline-size-lg,
143
59
  [data-headline-size=lg] {
144
60
  font: var(--db-type-headline-lg);
145
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
61
+ /* Those variables are only for components to calculate heights and change icons */
62
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-lg);
63
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-lg);
146
64
  }
147
- @layer variables {
148
- .db-headline-size-lg,
149
- [data-headline-size=lg] {
150
- /* Those variables are only for components to calculate heights and change icons */
151
- --db-icon-font-weight: var(--db-base-headline-icon-weight-lg);
152
- --db-icon-font-size: var(--db-base-headline-icon-font-size-lg);
153
- }
154
- }
155
-
156
- @layer variables {}
157
65
 
158
66
  .db-font-size-md,
159
67
  [data-font-size=md] {
160
68
  font: var(--db-type-body-md);
161
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
162
- }
163
- @layer variables {
164
- .db-font-size-md,
165
- [data-font-size=md] {
166
- /* Those variables are only for components to calculate heights and change icons */
167
- --db-icon-font-weight: var(--db-base-body-icon-weight-md);
168
- --db-icon-font-size: var(--db-base-body-icon-font-size-md);
169
- }
69
+ /* Those variables are only for components to calculate heights and change icons */
70
+ --db-icon-font-weight: var(--db-base-body-icon-weight-md);
71
+ --db-icon-font-size: var(--db-base-body-icon-font-size-md);
170
72
  }
171
73
 
172
74
  .db-headline-size-md,
173
75
  [data-headline-size=md] {
174
76
  font: var(--db-type-headline-md);
175
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
77
+ /* Those variables are only for components to calculate heights and change icons */
78
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-md);
79
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-md);
176
80
  }
177
- @layer variables {
178
- .db-headline-size-md,
179
- [data-headline-size=md] {
180
- /* Those variables are only for components to calculate heights and change icons */
181
- --db-icon-font-weight: var(--db-base-headline-icon-weight-md);
182
- --db-icon-font-size: var(--db-base-headline-icon-font-size-md);
183
- }
184
- }
185
-
186
- @layer variables {}
187
81
 
188
82
  .db-font-size-sm,
189
83
  [data-font-size=sm] {
190
84
  font: var(--db-type-body-sm);
191
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
192
- }
193
- @layer variables {
194
- .db-font-size-sm,
195
- [data-font-size=sm] {
196
- /* Those variables are only for components to calculate heights and change icons */
197
- --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
198
- --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
199
- }
85
+ /* Those variables are only for components to calculate heights and change icons */
86
+ --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
87
+ --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
200
88
  }
201
89
 
202
90
  .db-headline-size-sm,
203
91
  [data-headline-size=sm] {
204
92
  font: var(--db-type-headline-sm);
205
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
206
- }
207
- @layer variables {
208
- .db-headline-size-sm,
209
- [data-headline-size=sm] {
210
- /* Those variables are only for components to calculate heights and change icons */
211
- --db-icon-font-weight: var(--db-base-headline-icon-weight-sm);
212
- --db-icon-font-size: var(--db-base-headline-icon-font-size-sm);
213
- }
93
+ /* Those variables are only for components to calculate heights and change icons */
94
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-sm);
95
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-sm);
214
96
  }
215
97
 
216
- @layer variables {}
217
-
218
98
  .db-font-size-xs,
219
99
  [data-font-size=xs] {
220
100
  font: var(--db-type-body-xs);
221
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
222
- }
223
- @layer variables {
224
- .db-font-size-xs,
225
- [data-font-size=xs] {
226
- /* Those variables are only for components to calculate heights and change icons */
227
- --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
228
- --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
229
- }
101
+ /* Those variables are only for components to calculate heights and change icons */
102
+ --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
103
+ --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
230
104
  }
231
105
 
232
106
  .db-headline-size-xs,
233
107
  [data-headline-size=xs] {
234
108
  font: var(--db-type-headline-xs);
235
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
236
- }
237
- @layer variables {
238
- .db-headline-size-xs,
239
- [data-headline-size=xs] {
240
- /* Those variables are only for components to calculate heights and change icons */
241
- --db-icon-font-weight: var(--db-base-headline-icon-weight-xs);
242
- --db-icon-font-size: var(--db-base-headline-icon-font-size-xs);
243
- }
109
+ /* Those variables are only for components to calculate heights and change icons */
110
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-xs);
111
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-xs);
244
112
  }
245
113
 
246
- @layer variables {}
247
-
248
114
  .db-font-size-2xs,
249
115
  [data-font-size="2xs"] {
250
116
  font: var(--db-type-body-2xs);
251
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
252
- }
253
- @layer variables {
254
- .db-font-size-2xs,
255
- [data-font-size="2xs"] {
256
- /* Those variables are only for components to calculate heights and change icons */
257
- --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
258
- --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
259
- }
117
+ /* Those variables are only for components to calculate heights and change icons */
118
+ --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
119
+ --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
260
120
  }
261
121
 
262
122
  .db-headline-size-2xs,
263
123
  [data-headline-size="2xs"] {
264
124
  font: var(--db-type-headline-2xs);
265
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
266
- }
267
- @layer variables {
268
- .db-headline-size-2xs,
269
- [data-headline-size="2xs"] {
270
- /* Those variables are only for components to calculate heights and change icons */
271
- --db-icon-font-weight: var(--db-base-headline-icon-weight-2xs);
272
- --db-icon-font-size: var(--db-base-headline-icon-font-size-2xs);
273
- }
125
+ /* Those variables are only for components to calculate heights and change icons */
126
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-2xs);
127
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-2xs);
274
128
  }
275
129
 
276
- @layer variables {}
277
-
278
130
  .db-font-size-3xs,
279
131
  [data-font-size="3xs"] {
280
132
  font: var(--db-type-body-3xs);
281
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
282
- }
283
- @layer variables {
284
- .db-font-size-3xs,
285
- [data-font-size="3xs"] {
286
- /* Those variables are only for components to calculate heights and change icons */
287
- --db-icon-font-weight: var(--db-base-body-icon-weight-3xs);
288
- --db-icon-font-size: var(--db-base-body-icon-font-size-3xs);
289
- }
133
+ /* Those variables are only for components to calculate heights and change icons */
134
+ --db-icon-font-weight: var(--db-base-body-icon-weight-3xs);
135
+ --db-icon-font-size: var(--db-base-body-icon-font-size-3xs);
290
136
  }
291
137
 
292
138
  .db-headline-size-3xs,
293
139
  [data-headline-size="3xs"] {
294
140
  font: var(--db-type-headline-3xs);
295
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
296
- }
297
- @layer variables {
298
- .db-headline-size-3xs,
299
- [data-headline-size="3xs"] {
300
- /* Those variables are only for components to calculate heights and change icons */
301
- --db-icon-font-weight: var(--db-base-headline-icon-weight-3xs);
302
- --db-icon-font-size: var(--db-base-headline-icon-font-size-3xs);
303
- }
141
+ /* Those variables are only for components to calculate heights and change icons */
142
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-3xs);
143
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-3xs);
304
144
  }
package/build/styles/fonts/classes/body/2xl.css CHANGED
@@ -1,100 +1,8 @@
1
1
  /* Variants for adaptive components like input, select, notification, ... */
2
- @layer variables {}
3
-
4
- @layer variables {}
5
-
6
- @layer variables {}
7
-
8
- @layer variables {}
9
-
10
- @layer variables {}
11
-
12
- @layer variables {}
13
-
14
- @layer variables {}
15
-
16
- @layer variables {}
17
-
18
- @layer variables {}
19
-
20
- @layer variables {}
21
-
22
- @layer variables {}
23
-
24
- @layer variables {}
25
-
26
- @layer variables {}
27
-
28
- @layer variables {}
29
-
30
- @layer variables {}
31
-
32
- @layer variables {}
33
-
34
- @layer variables {}
35
-
36
- @layer variables {}
37
-
38
- @layer variables {}
39
-
40
- @layer variables {}
41
-
42
- @layer variables {}
43
-
44
2
  .db-font-size-2xl,
45
3
  [data-font-size="2xl"] {
46
4
  font: var(--db-type-body-2xl);
47
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
5
+ /* Those variables are only for components to calculate heights and change icons */
6
+ --db-icon-font-weight: var(--db-base-body-icon-weight-2xl);
7
+ --db-icon-font-size: var(--db-base-body-icon-font-size-2xl);
48
8
  }
49
- @layer variables {
50
- .db-font-size-2xl,
51
- [data-font-size="2xl"] {
52
- /* Those variables are only for components to calculate heights and change icons */
53
- --db-icon-font-weight: var(--db-base-body-icon-weight-2xl);
54
- --db-icon-font-size: var(--db-base-body-icon-font-size-2xl);
55
- }
56
- }
57
-
58
- @layer variables {}
59
-
60
- @layer variables {}
61
-
62
- @layer variables {}
63
-
64
- @layer variables {}
65
-
66
- @layer variables {}
67
-
68
- @layer variables {}
69
-
70
- @layer variables {}
71
-
72
- @layer variables {}
73
-
74
- @layer variables {}
75
-
76
- @layer variables {}
77
-
78
- @layer variables {}
79
-
80
- @layer variables {}
81
-
82
- @layer variables {}
83
-
84
- @layer variables {}
85
-
86
- @layer variables {}
87
-
88
- @layer variables {}
89
-
90
- @layer variables {}
91
-
92
- @layer variables {}
93
-
94
- @layer variables {}
95
-
96
- @layer variables {}
97
-
98
- @layer variables {}
99
-
100
- @layer variables {}
package/build/styles/fonts/classes/body/2xs.css CHANGED
@@ -1,100 +1,8 @@
1
1
  /* Variants for adaptive components like input, select, notification, ... */
2
- @layer variables {}
3
-
4
- @layer variables {}
5
-
6
- @layer variables {}
7
-
8
- @layer variables {}
9
-
10
- @layer variables {}
11
-
12
- @layer variables {}
13
-
14
- @layer variables {}
15
-
16
- @layer variables {}
17
-
18
- @layer variables {}
19
-
20
- @layer variables {}
21
-
22
- @layer variables {}
23
-
24
- @layer variables {}
25
-
26
- @layer variables {}
27
-
28
- @layer variables {}
29
-
30
- @layer variables {}
31
-
32
- @layer variables {}
33
-
34
- @layer variables {}
35
-
36
- @layer variables {}
37
-
38
- @layer variables {}
39
-
40
- @layer variables {}
41
-
42
- @layer variables {}
43
-
44
- @layer variables {}
45
-
46
- @layer variables {}
47
-
48
- @layer variables {}
49
-
50
- @layer variables {}
51
-
52
- @layer variables {}
53
-
54
- @layer variables {}
55
-
56
- @layer variables {}
57
-
58
- @layer variables {}
59
-
60
- @layer variables {}
61
-
62
- @layer variables {}
63
-
64
- @layer variables {}
65
-
66
- @layer variables {}
67
-
68
- @layer variables {}
69
-
70
- @layer variables {}
71
-
72
- @layer variables {}
73
-
74
- @layer variables {}
75
-
76
- @layer variables {}
77
-
78
- @layer variables {}
79
-
80
2
  .db-font-size-2xs,
81
3
  [data-font-size="2xs"] {
82
4
  font: var(--db-type-body-2xs);
83
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
5
+ /* Those variables are only for components to calculate heights and change icons */
6
+ --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
7
+ --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
84
8
  }
85
- @layer variables {
86
- .db-font-size-2xs,
87
- [data-font-size="2xs"] {
88
- /* Those variables are only for components to calculate heights and change icons */
89
- --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
90
- --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
91
- }
92
- }
93
-
94
- @layer variables {}
95
-
96
- @layer variables {}
97
-
98
- @layer variables {}
99
-
100
- @layer variables {}