@db-ux/core-foundations 2.0.0-0-custom-select-16b8cce → 2.0.1

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 (103) hide show
  1. package/build/ide/db.ide.css +10 -10
  2. package/build/styles/_screen-sizes.scss +62 -6
  3. package/build/styles/_variables.scss +9 -9
  4. package/build/styles/absolute.css +9015 -593
  5. package/build/styles/absolute.scss +1 -1
  6. package/build/styles/colors/_default-color-icons.scss +11 -0
  7. package/build/styles/colors/_default-color-mappings.scss +2944 -0
  8. package/build/styles/colors/_placeholder.scss +160 -153
  9. package/build/styles/colors/_variables.scss +20 -19
  10. package/build/styles/colors/classes/all.css +2205 -2115
  11. package/build/styles/colors/classes/blue.css +175 -141
  12. package/build/styles/colors/classes/brand.css +175 -141
  13. package/build/styles/colors/classes/critical.css +175 -141
  14. package/build/styles/colors/classes/cyan.css +175 -141
  15. package/build/styles/colors/classes/green.css +175 -141
  16. package/build/styles/colors/classes/informational.css +175 -141
  17. package/build/styles/colors/classes/neutral.css +175 -141
  18. package/build/styles/colors/classes/orange.css +175 -141
  19. package/build/styles/colors/classes/pink.css +175 -141
  20. package/build/styles/colors/classes/red.css +175 -141
  21. package/build/styles/colors/classes/successful.css +175 -141
  22. package/build/styles/colors/classes/turquoise.css +175 -141
  23. package/build/styles/colors/classes/violet.css +175 -141
  24. package/build/styles/colors/classes/warning.css +175 -141
  25. package/build/styles/colors/classes/yellow.css +175 -141
  26. package/build/styles/colors/speaking-colors/additional/_blue.speaking-colors.scss +9 -0
  27. package/build/styles/colors/speaking-colors/additional/_cyan.speaking-colors.scss +9 -0
  28. package/build/styles/colors/speaking-colors/additional/_green.speaking-colors.scss +9 -0
  29. package/build/styles/colors/speaking-colors/additional/_orange.speaking-colors.scss +9 -0
  30. package/build/styles/colors/speaking-colors/additional/_pink.speaking-colors.scss +9 -0
  31. package/build/styles/colors/speaking-colors/additional/_red.speaking-colors.scss +9 -0
  32. package/build/styles/colors/speaking-colors/additional/_turquoise.speaking-colors.scss +9 -0
  33. package/build/styles/colors/speaking-colors/additional/_violet.speaking-colors.scss +9 -0
  34. package/build/styles/colors/speaking-colors/additional/_yellow.speaking-colors.scss +9 -0
  35. package/build/styles/colors/speaking-colors/semantic/_brand.speaking-colors.scss +9 -0
  36. package/build/styles/colors/speaking-colors/semantic/_critical.speaking-colors.scss +9 -0
  37. package/build/styles/colors/speaking-colors/semantic/_informational.speaking-colors.scss +15 -0
  38. package/build/styles/colors/speaking-colors/semantic/_neutral.speaking-colors.scss +9 -0
  39. package/build/styles/colors/speaking-colors/semantic/_successful.speaking-colors.scss +9 -0
  40. package/build/styles/colors/speaking-colors/semantic/_warning.speaking-colors.scss +9 -0
  41. package/build/styles/colors/speaking-colors/vibrant.js +43 -0
  42. package/build/styles/defaults/_default-properties.scss +6770 -0
  43. package/build/styles/defaults/default-code.css +93 -93
  44. package/build/styles/defaults/default-code.scss +6 -4
  45. package/build/styles/defaults/default-elevation.css +1 -1
  46. package/build/styles/defaults/default-fonts.css +7 -7
  47. package/build/styles/defaults/default-fonts.scss +15 -18
  48. package/build/styles/defaults/default-icons.css +1 -1
  49. package/build/styles/defaults/default-required.css +1 -1
  50. package/build/styles/defaults/default-required.scss +33 -13
  51. package/build/styles/defaults/default-root.css +93 -93
  52. package/build/styles/defaults/default-theme.css +93 -93
  53. package/build/styles/defaults/default-theme.scss +9 -854
  54. package/build/styles/density/_scaling-placeholder.scss +57 -38
  55. package/build/styles/density/_typography-placeholder.scss +66 -42
  56. package/build/styles/density/classes/all.css +944 -951
  57. package/build/styles/density/classes/expressive.css +396 -327
  58. package/build/styles/density/classes/functional.css +396 -327
  59. package/build/styles/density/classes/regular.css +396 -327
  60. package/build/styles/fonts/_font-sizes.scss +18 -12
  61. package/build/styles/fonts/classes/all.css +236 -90
  62. package/build/styles/fonts/classes/body/2xl.css +100 -5
  63. package/build/styles/fonts/classes/body/2xs.css +100 -5
  64. package/build/styles/fonts/classes/body/3xl.css +100 -5
  65. package/build/styles/fonts/classes/body/3xs.css +100 -5
  66. package/build/styles/fonts/classes/body/all.css +164 -45
  67. package/build/styles/fonts/classes/body/lg.css +100 -5
  68. package/build/styles/fonts/classes/body/md.css +100 -5
  69. package/build/styles/fonts/classes/body/sm.css +100 -5
  70. package/build/styles/fonts/classes/body/xl.css +100 -5
  71. package/build/styles/fonts/classes/body/xs.css +100 -5
  72. package/build/styles/fonts/classes/headline/2xl.css +100 -5
  73. package/build/styles/fonts/classes/headline/2xs.css +100 -5
  74. package/build/styles/fonts/classes/headline/3xl.css +100 -5
  75. package/build/styles/fonts/classes/headline/3xs.css +100 -5
  76. package/build/styles/fonts/classes/headline/all.css +164 -45
  77. package/build/styles/fonts/classes/headline/lg.css +100 -5
  78. package/build/styles/fonts/classes/headline/md.css +100 -5
  79. package/build/styles/fonts/classes/headline/sm.css +100 -5
  80. package/build/styles/fonts/classes/headline/xl.css +100 -5
  81. package/build/styles/fonts/classes/headline/xs.css +100 -5
  82. package/build/styles/helpers/_divider.scss +5 -5
  83. package/build/styles/helpers/_focus.scss +3 -3
  84. package/build/styles/helpers/_index.scss +1 -0
  85. package/build/styles/helpers/_layer.scss +1 -0
  86. package/build/styles/helpers/classes/all.css +49 -19
  87. package/build/styles/helpers/classes/divider.css +46 -16
  88. package/build/styles/helpers/classes/focus.css +33 -3
  89. package/build/styles/icons/absolute.css +1 -1
  90. package/build/styles/icons/relative.css +1 -1
  91. package/build/styles/icons/rollup.css +1 -1
  92. package/build/styles/icons/webpack.css +1 -1
  93. package/build/styles/index.css +3570 -517
  94. package/build/styles/relative.css +7819 -5560
  95. package/build/styles/rollup.css +9015 -593
  96. package/build/styles/rollup.scss +1 -1
  97. package/build/styles/webpack.css +9015 -593
  98. package/build/styles/webpack.scss +1 -1
  99. package/build/tailwind/tailwind-tokens.json +10 -10
  100. package/build/tailwind/theme/index.css +10 -10
  101. package/package.json +4 -4
  102. package/build/styles/colors/_default-color-scheme.scss +0 -2961
  103. package/build/styles/colors/_default-palette.scss +0 -2523
package/build/styles/fonts/classes/headline/3xl.css CHANGED
@@ -1,14 +1,109 @@
1
+ /* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
2
+ /* Use fixed spacings for all kind of distances (margin, padding, ...) */
3
+ /* The primary use-case for responsive spacings are
4
+ paddings/gaps in an application e.g. the <main> should have a responsive padding. */
5
+ /* Elevation */
6
+ /* Border */
7
+ /* Transitions */
8
+ /* Variants for adaptive components like input, select, notification, ... */
9
+ @layer variables {}
10
+
11
+ @layer variables {}
12
+
13
+ @layer variables {}
14
+
15
+ @layer variables {}
16
+
17
+ @layer variables {}
18
+
19
+ @layer variables {}
20
+
21
+ @layer variables {}
22
+
23
+ @layer variables {}
24
+
25
+ @layer variables {}
26
+
27
+ @layer variables {}
28
+
29
+ @layer variables {}
30
+
31
+ @layer variables {}
32
+
33
+ @layer variables {}
34
+
35
+ @layer variables {}
36
+
37
+ @layer variables {}
38
+
1
39
  /**
2
40
  Generates 3 types of placeholders, e.g:
3
41
  - %db-component-variables-md
4
42
  - %db-font-size-md
5
43
  - %db-overwrite-font-size-md
6
44
  */
45
+ @layer variables {}
46
+
47
+ @layer variables {}
48
+
7
49
  .db-headline-size-3xl,
8
50
  [data-headline-size="3xl"] {
9
- /* Those variables are only for components to calculate heights and change icons */
10
- --db-icon-font-weight: var(--db-base-headline-icon-weight-3xl);
11
- --db-icon-font-size: var(--db-base-headline-icon-font-size-3xl);
12
- line-height: var(--db-type-headline-line-height-3xl);
13
- font-size: var(--db-type-headline-font-size-3xl);
51
+ font: var(--db-type-headline-3xl);
52
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
14
53
  }
54
+ @layer variables {
55
+ .db-headline-size-3xl,
56
+ [data-headline-size="3xl"] {
57
+ /* Those variables are only for components to calculate heights and change icons */
58
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-3xl);
59
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-3xl);
60
+ }
61
+ }
62
+
63
+ @layer variables {}
64
+
65
+ @layer variables {}
66
+
67
+ @layer variables {}
68
+
69
+ @layer variables {}
70
+
71
+ @layer variables {}
72
+
73
+ @layer variables {}
74
+
75
+ @layer variables {}
76
+
77
+ @layer variables {}
78
+
79
+ @layer variables {}
80
+
81
+ @layer variables {}
82
+
83
+ @layer variables {}
84
+
85
+ @layer variables {}
86
+
87
+ @layer variables {}
88
+
89
+ @layer variables {}
90
+
91
+ @layer variables {}
92
+
93
+ @layer variables {}
94
+
95
+ @layer variables {}
96
+
97
+ @layer variables {}
98
+
99
+ @layer variables {}
100
+
101
+ @layer variables {}
102
+
103
+ @layer variables {}
104
+
105
+ @layer variables {}
106
+
107
+ @layer variables {}
108
+
109
+ @layer variables {}
package/build/styles/fonts/classes/headline/3xs.css CHANGED
@@ -1,14 +1,109 @@
1
+ /* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
2
+ /* Use fixed spacings for all kind of distances (margin, padding, ...) */
3
+ /* The primary use-case for responsive spacings are
4
+ paddings/gaps in an application e.g. the <main> should have a responsive padding. */
5
+ /* Elevation */
6
+ /* Border */
7
+ /* Transitions */
8
+ /* Variants for adaptive components like input, select, notification, ... */
9
+ @layer variables {}
10
+
11
+ @layer variables {}
12
+
13
+ @layer variables {}
14
+
15
+ @layer variables {}
16
+
17
+ @layer variables {}
18
+
19
+ @layer variables {}
20
+
21
+ @layer variables {}
22
+
23
+ @layer variables {}
24
+
25
+ @layer variables {}
26
+
27
+ @layer variables {}
28
+
29
+ @layer variables {}
30
+
31
+ @layer variables {}
32
+
33
+ @layer variables {}
34
+
35
+ @layer variables {}
36
+
37
+ @layer variables {}
38
+
1
39
  /**
2
40
  Generates 3 types of placeholders, e.g:
3
41
  - %db-component-variables-md
4
42
  - %db-font-size-md
5
43
  - %db-overwrite-font-size-md
6
44
  */
45
+ @layer variables {}
46
+
47
+ @layer variables {}
48
+
49
+ @layer variables {}
50
+
51
+ @layer variables {}
52
+
53
+ @layer variables {}
54
+
55
+ @layer variables {}
56
+
57
+ @layer variables {}
58
+
59
+ @layer variables {}
60
+
61
+ @layer variables {}
62
+
63
+ @layer variables {}
64
+
65
+ @layer variables {}
66
+
67
+ @layer variables {}
68
+
69
+ @layer variables {}
70
+
71
+ @layer variables {}
72
+
73
+ @layer variables {}
74
+
75
+ @layer variables {}
76
+
77
+ @layer variables {}
78
+
79
+ @layer variables {}
80
+
81
+ @layer variables {}
82
+
83
+ @layer variables {}
84
+
85
+ @layer variables {}
86
+
87
+ @layer variables {}
88
+
89
+ @layer variables {}
90
+
91
+ @layer variables {}
92
+
93
+ @layer variables {}
94
+
95
+ @layer variables {}
96
+
7
97
  .db-headline-size-3xs,
8
98
  [data-headline-size="3xs"] {
9
- /* Those variables are only for components to calculate heights and change icons */
10
- --db-icon-font-weight: var(--db-base-headline-icon-weight-3xs);
11
- --db-icon-font-size: var(--db-base-headline-icon-font-size-3xs);
12
- line-height: var(--db-type-headline-line-height-3xs);
13
- font-size: var(--db-type-headline-font-size-3xs);
99
+ font: var(--db-type-headline-3xs);
100
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
101
+ }
102
+ @layer variables {
103
+ .db-headline-size-3xs,
104
+ [data-headline-size="3xs"] {
105
+ /* Those variables are only for components to calculate heights and change icons */
106
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-3xs);
107
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-3xs);
108
+ }
14
109
  }
package/build/styles/fonts/classes/headline/all.css CHANGED
@@ -1,86 +1,205 @@
1
+ /* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
2
+ /* Use fixed spacings for all kind of distances (margin, padding, ...) */
3
+ /* The primary use-case for responsive spacings are
4
+ paddings/gaps in an application e.g. the <main> should have a responsive padding. */
5
+ /* Elevation */
6
+ /* Border */
7
+ /* Transitions */
8
+ /* Variants for adaptive components like input, select, notification, ... */
9
+ @layer variables {}
10
+
11
+ @layer variables {}
12
+
13
+ @layer variables {}
14
+
15
+ @layer variables {}
16
+
17
+ @layer variables {}
18
+
19
+ @layer variables {}
20
+
21
+ @layer variables {}
22
+
23
+ @layer variables {}
24
+
25
+ @layer variables {}
26
+
27
+ @layer variables {}
28
+
29
+ @layer variables {}
30
+
31
+ @layer variables {}
32
+
33
+ @layer variables {}
34
+
35
+ @layer variables {}
36
+
37
+ @layer variables {}
38
+
1
39
  /**
2
40
  Generates 3 types of placeholders, e.g:
3
41
  - %db-component-variables-md
4
42
  - %db-font-size-md
5
43
  - %db-overwrite-font-size-md
6
44
  */
45
+ @layer variables {}
46
+
47
+ @layer variables {}
48
+
7
49
  .db-headline-size-3xl,
8
50
  [data-headline-size="3xl"] {
9
- /* Those variables are only for components to calculate heights and change icons */
10
- --db-icon-font-weight: var(--db-base-headline-icon-weight-3xl);
11
- --db-icon-font-size: var(--db-base-headline-icon-font-size-3xl);
12
- line-height: var(--db-type-headline-line-height-3xl);
13
- font-size: var(--db-type-headline-font-size-3xl);
51
+ font: var(--db-type-headline-3xl);
52
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
53
+ }
54
+ @layer variables {
55
+ .db-headline-size-3xl,
56
+ [data-headline-size="3xl"] {
57
+ /* Those variables are only for components to calculate heights and change icons */
58
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-3xl);
59
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-3xl);
60
+ }
14
61
  }
15
62
 
63
+ @layer variables {}
64
+
65
+ @layer variables {}
66
+
16
67
  .db-headline-size-2xl,
17
68
  [data-headline-size="2xl"] {
18
- /* Those variables are only for components to calculate heights and change icons */
19
- --db-icon-font-weight: var(--db-base-headline-icon-weight-2xl);
20
- --db-icon-font-size: var(--db-base-headline-icon-font-size-2xl);
21
- line-height: var(--db-type-headline-line-height-2xl);
22
- font-size: var(--db-type-headline-font-size-2xl);
69
+ font: var(--db-type-headline-2xl);
70
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
71
+ }
72
+ @layer variables {
73
+ .db-headline-size-2xl,
74
+ [data-headline-size="2xl"] {
75
+ /* Those variables are only for components to calculate heights and change icons */
76
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-2xl);
77
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-2xl);
78
+ }
23
79
  }
24
80
 
81
+ @layer variables {}
82
+
83
+ @layer variables {}
84
+
25
85
  .db-headline-size-xl,
26
86
  [data-headline-size=xl] {
27
- /* Those variables are only for components to calculate heights and change icons */
28
- --db-icon-font-weight: var(--db-base-headline-icon-weight-xl);
29
- --db-icon-font-size: var(--db-base-headline-icon-font-size-xl);
30
- line-height: var(--db-type-headline-line-height-xl);
31
- font-size: var(--db-type-headline-font-size-xl);
87
+ font: var(--db-type-headline-xl);
88
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
89
+ }
90
+ @layer variables {
91
+ .db-headline-size-xl,
92
+ [data-headline-size=xl] {
93
+ /* Those variables are only for components to calculate heights and change icons */
94
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-xl);
95
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-xl);
96
+ }
32
97
  }
33
98
 
99
+ @layer variables {}
100
+
101
+ @layer variables {}
102
+
34
103
  .db-headline-size-lg,
35
104
  [data-headline-size=lg] {
36
- /* Those variables are only for components to calculate heights and change icons */
37
- --db-icon-font-weight: var(--db-base-headline-icon-weight-lg);
38
- --db-icon-font-size: var(--db-base-headline-icon-font-size-lg);
39
- line-height: var(--db-type-headline-line-height-lg);
40
- font-size: var(--db-type-headline-font-size-lg);
105
+ font: var(--db-type-headline-lg);
106
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
107
+ }
108
+ @layer variables {
109
+ .db-headline-size-lg,
110
+ [data-headline-size=lg] {
111
+ /* Those variables are only for components to calculate heights and change icons */
112
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-lg);
113
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-lg);
114
+ }
41
115
  }
42
116
 
117
+ @layer variables {}
118
+
119
+ @layer variables {}
120
+
43
121
  .db-headline-size-md,
44
122
  [data-headline-size=md] {
45
- /* Those variables are only for components to calculate heights and change icons */
46
- --db-icon-font-weight: var(--db-base-headline-icon-weight-md);
47
- --db-icon-font-size: var(--db-base-headline-icon-font-size-md);
48
- line-height: var(--db-type-headline-line-height-md);
49
- font-size: var(--db-type-headline-font-size-md);
123
+ font: var(--db-type-headline-md);
124
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
125
+ }
126
+ @layer variables {
127
+ .db-headline-size-md,
128
+ [data-headline-size=md] {
129
+ /* Those variables are only for components to calculate heights and change icons */
130
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-md);
131
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-md);
132
+ }
50
133
  }
51
134
 
135
+ @layer variables {}
136
+
137
+ @layer variables {}
138
+
52
139
  .db-headline-size-sm,
53
140
  [data-headline-size=sm] {
54
- /* Those variables are only for components to calculate heights and change icons */
55
- --db-icon-font-weight: var(--db-base-headline-icon-weight-sm);
56
- --db-icon-font-size: var(--db-base-headline-icon-font-size-sm);
57
- line-height: var(--db-type-headline-line-height-sm);
58
- font-size: var(--db-type-headline-font-size-sm);
141
+ font: var(--db-type-headline-sm);
142
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
59
143
  }
144
+ @layer variables {
145
+ .db-headline-size-sm,
146
+ [data-headline-size=sm] {
147
+ /* Those variables are only for components to calculate heights and change icons */
148
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-sm);
149
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-sm);
150
+ }
151
+ }
152
+
153
+ @layer variables {}
154
+
155
+ @layer variables {}
60
156
 
61
157
  .db-headline-size-xs,
62
158
  [data-headline-size=xs] {
63
- /* Those variables are only for components to calculate heights and change icons */
64
- --db-icon-font-weight: var(--db-base-headline-icon-weight-xs);
65
- --db-icon-font-size: var(--db-base-headline-icon-font-size-xs);
66
- line-height: var(--db-type-headline-line-height-xs);
67
- font-size: var(--db-type-headline-font-size-xs);
159
+ font: var(--db-type-headline-xs);
160
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
68
161
  }
162
+ @layer variables {
163
+ .db-headline-size-xs,
164
+ [data-headline-size=xs] {
165
+ /* Those variables are only for components to calculate heights and change icons */
166
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-xs);
167
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-xs);
168
+ }
169
+ }
170
+
171
+ @layer variables {}
172
+
173
+ @layer variables {}
69
174
 
70
175
  .db-headline-size-2xs,
71
176
  [data-headline-size="2xs"] {
72
- /* Those variables are only for components to calculate heights and change icons */
73
- --db-icon-font-weight: var(--db-base-headline-icon-weight-2xs);
74
- --db-icon-font-size: var(--db-base-headline-icon-font-size-2xs);
75
- line-height: var(--db-type-headline-line-height-2xs);
76
- font-size: var(--db-type-headline-font-size-2xs);
177
+ font: var(--db-type-headline-2xs);
178
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
179
+ }
180
+ @layer variables {
181
+ .db-headline-size-2xs,
182
+ [data-headline-size="2xs"] {
183
+ /* Those variables are only for components to calculate heights and change icons */
184
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-2xs);
185
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-2xs);
186
+ }
77
187
  }
78
188
 
189
+ @layer variables {}
190
+
191
+ @layer variables {}
192
+
79
193
  .db-headline-size-3xs,
80
194
  [data-headline-size="3xs"] {
81
- /* Those variables are only for components to calculate heights and change icons */
82
- --db-icon-font-weight: var(--db-base-headline-icon-weight-3xs);
83
- --db-icon-font-size: var(--db-base-headline-icon-font-size-3xs);
84
- line-height: var(--db-type-headline-line-height-3xs);
85
- font-size: var(--db-type-headline-font-size-3xs);
195
+ font: var(--db-type-headline-3xs);
196
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
197
+ }
198
+ @layer variables {
199
+ .db-headline-size-3xs,
200
+ [data-headline-size="3xs"] {
201
+ /* Those variables are only for components to calculate heights and change icons */
202
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-3xs);
203
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-3xs);
204
+ }
86
205
  }
package/build/styles/fonts/classes/headline/lg.css CHANGED
@@ -1,14 +1,109 @@
1
+ /* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
2
+ /* Use fixed spacings for all kind of distances (margin, padding, ...) */
3
+ /* The primary use-case for responsive spacings are
4
+ paddings/gaps in an application e.g. the <main> should have a responsive padding. */
5
+ /* Elevation */
6
+ /* Border */
7
+ /* Transitions */
8
+ /* Variants for adaptive components like input, select, notification, ... */
9
+ @layer variables {}
10
+
11
+ @layer variables {}
12
+
13
+ @layer variables {}
14
+
15
+ @layer variables {}
16
+
17
+ @layer variables {}
18
+
19
+ @layer variables {}
20
+
21
+ @layer variables {}
22
+
23
+ @layer variables {}
24
+
25
+ @layer variables {}
26
+
27
+ @layer variables {}
28
+
29
+ @layer variables {}
30
+
31
+ @layer variables {}
32
+
33
+ @layer variables {}
34
+
35
+ @layer variables {}
36
+
37
+ @layer variables {}
38
+
1
39
  /**
2
40
  Generates 3 types of placeholders, e.g:
3
41
  - %db-component-variables-md
4
42
  - %db-font-size-md
5
43
  - %db-overwrite-font-size-md
6
44
  */
45
+ @layer variables {}
46
+
47
+ @layer variables {}
48
+
49
+ @layer variables {}
50
+
51
+ @layer variables {}
52
+
53
+ @layer variables {}
54
+
55
+ @layer variables {}
56
+
57
+ @layer variables {}
58
+
59
+ @layer variables {}
60
+
61
+ @layer variables {}
62
+
63
+ @layer variables {}
64
+
65
+ @layer variables {}
66
+
7
67
  .db-headline-size-lg,
8
68
  [data-headline-size=lg] {
9
- /* Those variables are only for components to calculate heights and change icons */
10
- --db-icon-font-weight: var(--db-base-headline-icon-weight-lg);
11
- --db-icon-font-size: var(--db-base-headline-icon-font-size-lg);
12
- line-height: var(--db-type-headline-line-height-lg);
13
- font-size: var(--db-type-headline-font-size-lg);
69
+ font: var(--db-type-headline-lg);
70
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
14
71
  }
72
+ @layer variables {
73
+ .db-headline-size-lg,
74
+ [data-headline-size=lg] {
75
+ /* Those variables are only for components to calculate heights and change icons */
76
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-lg);
77
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-lg);
78
+ }
79
+ }
80
+
81
+ @layer variables {}
82
+
83
+ @layer variables {}
84
+
85
+ @layer variables {}
86
+
87
+ @layer variables {}
88
+
89
+ @layer variables {}
90
+
91
+ @layer variables {}
92
+
93
+ @layer variables {}
94
+
95
+ @layer variables {}
96
+
97
+ @layer variables {}
98
+
99
+ @layer variables {}
100
+
101
+ @layer variables {}
102
+
103
+ @layer variables {}
104
+
105
+ @layer variables {}
106
+
107
+ @layer variables {}
108
+
109
+ @layer variables {}