@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
@@ -1,64 +1,4 @@
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
2
  .db-density-functional,
63
3
  [data-density=functional] {
64
4
  font: var(--db-type-body-md);
@@ -67,352 +7,290 @@
67
7
  .db-density-functional,
68
8
  [data-density=functional] {
69
9
  font: var(--db-type-body-md);
70
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
10
+ /* Those variables are only for components to calculate heights and change icons */
11
+ --db-icon-font-weight: var(--db-base-body-icon-weight-md);
12
+ --db-icon-font-size: var(--db-base-body-icon-font-size-md);
71
13
  }
72
- @layer variables {
73
- .db-density-functional,
74
- [data-density=functional] {
75
- /* Those variables are only for components to calculate heights and change icons */
76
- --db-icon-font-weight: var(--db-base-body-icon-weight-md);
77
- --db-icon-font-size: var(--db-base-body-icon-font-size-md);
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 {}
110
14
 
111
15
  .db-density-functional,
112
16
  [data-density=functional] {
113
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
17
+ --db-sizing-3xs: var(--db-sizing-functional-3xs);
18
+ --db-sizing-2xs: var(--db-sizing-functional-2xs);
19
+ --db-sizing-xs: var(--db-sizing-functional-xs);
20
+ --db-sizing-sm: var(--db-sizing-functional-sm);
21
+ --db-sizing-md: var(--db-sizing-functional-md);
22
+ --db-sizing-lg: var(--db-sizing-functional-lg);
23
+ --db-sizing-xl: var(--db-sizing-functional-xl);
24
+ --db-sizing-2xl: var(--db-sizing-functional-2xl);
25
+ --db-sizing-3xl: var(--db-sizing-functional-3xl);
26
+ --db-spacing-fixed-3xs: var(--db-spacing-fixed-functional-3xs);
27
+ --db-spacing-fixed-2xs: var(--db-spacing-fixed-functional-2xs);
28
+ --db-spacing-fixed-xs: var(--db-spacing-fixed-functional-xs);
29
+ --db-spacing-fixed-sm: var(--db-spacing-fixed-functional-sm);
30
+ --db-spacing-fixed-md: var(--db-spacing-fixed-functional-md);
31
+ --db-spacing-fixed-lg: var(--db-spacing-fixed-functional-lg);
32
+ --db-spacing-fixed-xl: var(--db-spacing-fixed-functional-xl);
33
+ --db-spacing-fixed-2xl: var(--db-spacing-fixed-functional-2xl);
34
+ --db-spacing-fixed-3xl: var(--db-spacing-fixed-functional-3xl);
35
+ /* stylelint-disable-next-line media-query-no-invalid */
36
+ /* stylelint-disable-next-line at-rule-empty-line-before */
37
+ /* stylelint-disable-next-line media-query-no-invalid */
38
+ /* stylelint-disable-next-line at-rule-empty-line-before */
39
+ /* stylelint-disable-next-line media-query-no-invalid */
40
+ /* stylelint-disable-next-line at-rule-empty-line-before */
114
41
  }
115
- @layer variables {
42
+ @media (width <= 48em) {
116
43
  .db-density-functional,
117
44
  [data-density=functional] {
118
- --db-sizing-3xs: var(--db-sizing-functional-3xs);
119
- --db-sizing-2xs: var(--db-sizing-functional-2xs);
120
- --db-sizing-xs: var(--db-sizing-functional-xs);
121
- --db-sizing-sm: var(--db-sizing-functional-sm);
122
- --db-sizing-md: var(--db-sizing-functional-md);
123
- --db-sizing-lg: var(--db-sizing-functional-lg);
124
- --db-sizing-xl: var(--db-sizing-functional-xl);
125
- --db-sizing-2xl: var(--db-sizing-functional-2xl);
126
- --db-sizing-3xl: var(--db-sizing-functional-3xl);
127
- --db-spacing-fixed-3xs: var(--db-spacing-fixed-functional-3xs);
128
- --db-spacing-fixed-2xs: var(--db-spacing-fixed-functional-2xs);
129
- --db-spacing-fixed-xs: var(--db-spacing-fixed-functional-xs);
130
- --db-spacing-fixed-sm: var(--db-spacing-fixed-functional-sm);
131
- --db-spacing-fixed-md: var(--db-spacing-fixed-functional-md);
132
- --db-spacing-fixed-lg: var(--db-spacing-fixed-functional-lg);
133
- --db-spacing-fixed-xl: var(--db-spacing-fixed-functional-xl);
134
- --db-spacing-fixed-2xl: var(--db-spacing-fixed-functional-2xl);
135
- --db-spacing-fixed-3xl: var(--db-spacing-fixed-functional-3xl);
136
- /* stylelint-disable-next-line media-query-no-invalid */
137
- /* stylelint-disable-next-line at-rule-empty-line-before */
138
- /* stylelint-disable-next-line media-query-no-invalid */
139
- /* stylelint-disable-next-line at-rule-empty-line-before */
140
- /* stylelint-disable-next-line media-query-no-invalid */
141
- /* stylelint-disable-next-line at-rule-empty-line-before */
142
- }
143
- @media (width <= 48em) {
144
- .db-density-functional,
145
- [data-density=functional] {
146
- --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-mobile-3xs);
147
- --db-spacing-responsive-2xs: var(--db-spacing-responsive-functional-mobile-2xs);
148
- --db-spacing-responsive-xs: var(--db-spacing-responsive-functional-mobile-xs);
149
- --db-spacing-responsive-sm: var(--db-spacing-responsive-functional-mobile-sm);
150
- --db-spacing-responsive-md: var(--db-spacing-responsive-functional-mobile-md);
151
- --db-spacing-responsive-lg: var(--db-spacing-responsive-functional-mobile-lg);
152
- --db-spacing-responsive-xl: var(--db-spacing-responsive-functional-mobile-xl);
153
- --db-spacing-responsive-2xl: var(--db-spacing-responsive-functional-mobile-2xl);
154
- --db-spacing-responsive-3xl: var(--db-spacing-responsive-functional-mobile-3xl);
155
- }
45
+ --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-mobile-3xs);
46
+ --db-spacing-responsive-2xs: var(--db-spacing-responsive-functional-mobile-2xs);
47
+ --db-spacing-responsive-xs: var(--db-spacing-responsive-functional-mobile-xs);
48
+ --db-spacing-responsive-sm: var(--db-spacing-responsive-functional-mobile-sm);
49
+ --db-spacing-responsive-md: var(--db-spacing-responsive-functional-mobile-md);
50
+ --db-spacing-responsive-lg: var(--db-spacing-responsive-functional-mobile-lg);
51
+ --db-spacing-responsive-xl: var(--db-spacing-responsive-functional-mobile-xl);
52
+ --db-spacing-responsive-2xl: var(--db-spacing-responsive-functional-mobile-2xl);
53
+ --db-spacing-responsive-3xl: var(--db-spacing-responsive-functional-mobile-3xl);
156
54
  }
157
- @media (48em < width <= 64em) {
158
- .db-density-functional,
159
- [data-density=functional] {
160
- --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-tablet-3xs);
161
- --db-spacing-responsive-2xs: var(--db-spacing-responsive-functional-tablet-2xs);
162
- --db-spacing-responsive-xs: var(--db-spacing-responsive-functional-tablet-xs);
163
- --db-spacing-responsive-sm: var(--db-spacing-responsive-functional-tablet-sm);
164
- --db-spacing-responsive-md: var(--db-spacing-responsive-functional-tablet-md);
165
- --db-spacing-responsive-lg: var(--db-spacing-responsive-functional-tablet-lg);
166
- --db-spacing-responsive-xl: var(--db-spacing-responsive-functional-tablet-xl);
167
- --db-spacing-responsive-2xl: var(--db-spacing-responsive-functional-tablet-2xl);
168
- --db-spacing-responsive-3xl: var(--db-spacing-responsive-functional-tablet-3xl);
169
- }
55
+ }
56
+ @media (48em < width <= 64em) {
57
+ .db-density-functional,
58
+ [data-density=functional] {
59
+ --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-tablet-3xs);
60
+ --db-spacing-responsive-2xs: var(--db-spacing-responsive-functional-tablet-2xs);
61
+ --db-spacing-responsive-xs: var(--db-spacing-responsive-functional-tablet-xs);
62
+ --db-spacing-responsive-sm: var(--db-spacing-responsive-functional-tablet-sm);
63
+ --db-spacing-responsive-md: var(--db-spacing-responsive-functional-tablet-md);
64
+ --db-spacing-responsive-lg: var(--db-spacing-responsive-functional-tablet-lg);
65
+ --db-spacing-responsive-xl: var(--db-spacing-responsive-functional-tablet-xl);
66
+ --db-spacing-responsive-2xl: var(--db-spacing-responsive-functional-tablet-2xl);
67
+ --db-spacing-responsive-3xl: var(--db-spacing-responsive-functional-tablet-3xl);
170
68
  }
171
- @media (64em < width) {
172
- .db-density-functional,
173
- [data-density=functional] {
174
- --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-desktop-3xs);
175
- --db-spacing-responsive-2xs: var(--db-spacing-responsive-functional-desktop-2xs);
176
- --db-spacing-responsive-xs: var(--db-spacing-responsive-functional-desktop-xs);
177
- --db-spacing-responsive-sm: var(--db-spacing-responsive-functional-desktop-sm);
178
- --db-spacing-responsive-md: var(--db-spacing-responsive-functional-desktop-md);
179
- --db-spacing-responsive-lg: var(--db-spacing-responsive-functional-desktop-lg);
180
- --db-spacing-responsive-xl: var(--db-spacing-responsive-functional-desktop-xl);
181
- --db-spacing-responsive-2xl: var(--db-spacing-responsive-functional-desktop-2xl);
182
- --db-spacing-responsive-3xl: var(--db-spacing-responsive-functional-desktop-3xl);
183
- }
69
+ }
70
+ @media (64em < width) {
71
+ .db-density-functional,
72
+ [data-density=functional] {
73
+ --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-desktop-3xs);
74
+ --db-spacing-responsive-2xs: var(--db-spacing-responsive-functional-desktop-2xs);
75
+ --db-spacing-responsive-xs: var(--db-spacing-responsive-functional-desktop-xs);
76
+ --db-spacing-responsive-sm: var(--db-spacing-responsive-functional-desktop-sm);
77
+ --db-spacing-responsive-md: var(--db-spacing-responsive-functional-desktop-md);
78
+ --db-spacing-responsive-lg: var(--db-spacing-responsive-functional-desktop-lg);
79
+ --db-spacing-responsive-xl: var(--db-spacing-responsive-functional-desktop-xl);
80
+ --db-spacing-responsive-2xl: var(--db-spacing-responsive-functional-desktop-2xl);
81
+ --db-spacing-responsive-3xl: var(--db-spacing-responsive-functional-desktop-3xl);
184
82
  }
185
83
  }
186
84
 
187
- @layer variables {}
188
-
189
- @layer variables {}
190
-
191
- @layer variables {}
192
-
193
- @layer variables {}
194
-
195
85
  .db-density-functional,
196
86
  [data-density=functional] {
197
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
87
+ /* stylelint-disable-next-line media-query-no-invalid */
88
+ /* stylelint-disable-next-line at-rule-empty-line-before */
89
+ /* stylelint-disable-next-line media-query-no-invalid */
90
+ /* stylelint-disable-next-line at-rule-empty-line-before */
91
+ /* stylelint-disable-next-line media-query-no-invalid */
92
+ /* stylelint-disable-next-line at-rule-empty-line-before */
198
93
  }
199
- @layer variables {
94
+ @media (width <= 48em) {
200
95
  .db-density-functional,
201
96
  [data-density=functional] {
202
- /* stylelint-disable-next-line media-query-no-invalid */
203
- /* stylelint-disable-next-line at-rule-empty-line-before */
204
- /* stylelint-disable-next-line media-query-no-invalid */
205
- /* stylelint-disable-next-line at-rule-empty-line-before */
206
- /* stylelint-disable-next-line media-query-no-invalid */
207
- /* stylelint-disable-next-line at-rule-empty-line-before */
208
- }
209
- @media (width <= 48em) {
210
- .db-density-functional,
211
- [data-density=functional] {
212
- --db-type-headline-3xs: var(--db-typography-functional-mobile-headline-3xs);
213
- --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-functional-mobile-headline-3xs);
214
- --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-functional-mobile-headline-3xs);
215
- --db-type-headline-2xs: var(--db-typography-functional-mobile-headline-2xs);
216
- --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-functional-mobile-headline-2xs);
217
- --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-functional-mobile-headline-2xs);
218
- --db-type-headline-xs: var(--db-typography-functional-mobile-headline-xs);
219
- --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-functional-mobile-headline-xs);
220
- --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-functional-mobile-headline-xs);
221
- --db-type-headline-sm: var(--db-typography-functional-mobile-headline-sm);
222
- --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-functional-mobile-headline-sm);
223
- --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-functional-mobile-headline-sm);
224
- --db-type-headline-md: var(--db-typography-functional-mobile-headline-md);
225
- --db-base-headline-icon-weight-md: var(--db-base-icon-weight-functional-mobile-headline-md);
226
- --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-functional-mobile-headline-md);
227
- --db-type-headline-lg: var(--db-typography-functional-mobile-headline-lg);
228
- --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-functional-mobile-headline-lg);
229
- --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-functional-mobile-headline-lg);
230
- --db-type-headline-xl: var(--db-typography-functional-mobile-headline-xl);
231
- --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-functional-mobile-headline-xl);
232
- --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-functional-mobile-headline-xl);
233
- --db-type-headline-2xl: var(--db-typography-functional-mobile-headline-2xl);
234
- --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-functional-mobile-headline-2xl);
235
- --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-functional-mobile-headline-2xl);
236
- --db-type-headline-3xl: var(--db-typography-functional-mobile-headline-3xl);
237
- --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-functional-mobile-headline-3xl);
238
- --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-functional-mobile-headline-3xl);
239
- }
97
+ --db-type-headline-3xs: var(--db-typography-functional-mobile-headline-3xs);
98
+ --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-functional-mobile-headline-3xs);
99
+ --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-functional-mobile-headline-3xs);
100
+ --db-type-headline-2xs: var(--db-typography-functional-mobile-headline-2xs);
101
+ --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-functional-mobile-headline-2xs);
102
+ --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-functional-mobile-headline-2xs);
103
+ --db-type-headline-xs: var(--db-typography-functional-mobile-headline-xs);
104
+ --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-functional-mobile-headline-xs);
105
+ --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-functional-mobile-headline-xs);
106
+ --db-type-headline-sm: var(--db-typography-functional-mobile-headline-sm);
107
+ --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-functional-mobile-headline-sm);
108
+ --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-functional-mobile-headline-sm);
109
+ --db-type-headline-md: var(--db-typography-functional-mobile-headline-md);
110
+ --db-base-headline-icon-weight-md: var(--db-base-icon-weight-functional-mobile-headline-md);
111
+ --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-functional-mobile-headline-md);
112
+ --db-type-headline-lg: var(--db-typography-functional-mobile-headline-lg);
113
+ --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-functional-mobile-headline-lg);
114
+ --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-functional-mobile-headline-lg);
115
+ --db-type-headline-xl: var(--db-typography-functional-mobile-headline-xl);
116
+ --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-functional-mobile-headline-xl);
117
+ --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-functional-mobile-headline-xl);
118
+ --db-type-headline-2xl: var(--db-typography-functional-mobile-headline-2xl);
119
+ --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-functional-mobile-headline-2xl);
120
+ --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-functional-mobile-headline-2xl);
121
+ --db-type-headline-3xl: var(--db-typography-functional-mobile-headline-3xl);
122
+ --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-functional-mobile-headline-3xl);
123
+ --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-functional-mobile-headline-3xl);
240
124
  }
241
- @media (48em < width <= 64em) {
242
- .db-density-functional,
243
- [data-density=functional] {
244
- --db-type-headline-3xs: var(--db-typography-functional-tablet-headline-3xs);
245
- --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-functional-tablet-headline-3xs);
246
- --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-functional-tablet-headline-3xs);
247
- --db-type-headline-2xs: var(--db-typography-functional-tablet-headline-2xs);
248
- --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-functional-tablet-headline-2xs);
249
- --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-functional-tablet-headline-2xs);
250
- --db-type-headline-xs: var(--db-typography-functional-tablet-headline-xs);
251
- --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-functional-tablet-headline-xs);
252
- --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-functional-tablet-headline-xs);
253
- --db-type-headline-sm: var(--db-typography-functional-tablet-headline-sm);
254
- --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-functional-tablet-headline-sm);
255
- --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-functional-tablet-headline-sm);
256
- --db-type-headline-md: var(--db-typography-functional-tablet-headline-md);
257
- --db-base-headline-icon-weight-md: var(--db-base-icon-weight-functional-tablet-headline-md);
258
- --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-functional-tablet-headline-md);
259
- --db-type-headline-lg: var(--db-typography-functional-tablet-headline-lg);
260
- --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-functional-tablet-headline-lg);
261
- --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-functional-tablet-headline-lg);
262
- --db-type-headline-xl: var(--db-typography-functional-tablet-headline-xl);
263
- --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-functional-tablet-headline-xl);
264
- --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-functional-tablet-headline-xl);
265
- --db-type-headline-2xl: var(--db-typography-functional-tablet-headline-2xl);
266
- --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-functional-tablet-headline-2xl);
267
- --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-functional-tablet-headline-2xl);
268
- --db-type-headline-3xl: var(--db-typography-functional-tablet-headline-3xl);
269
- --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-functional-tablet-headline-3xl);
270
- --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-functional-tablet-headline-3xl);
271
- }
125
+ }
126
+ @media (48em < width <= 64em) {
127
+ .db-density-functional,
128
+ [data-density=functional] {
129
+ --db-type-headline-3xs: var(--db-typography-functional-tablet-headline-3xs);
130
+ --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-functional-tablet-headline-3xs);
131
+ --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-functional-tablet-headline-3xs);
132
+ --db-type-headline-2xs: var(--db-typography-functional-tablet-headline-2xs);
133
+ --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-functional-tablet-headline-2xs);
134
+ --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-functional-tablet-headline-2xs);
135
+ --db-type-headline-xs: var(--db-typography-functional-tablet-headline-xs);
136
+ --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-functional-tablet-headline-xs);
137
+ --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-functional-tablet-headline-xs);
138
+ --db-type-headline-sm: var(--db-typography-functional-tablet-headline-sm);
139
+ --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-functional-tablet-headline-sm);
140
+ --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-functional-tablet-headline-sm);
141
+ --db-type-headline-md: var(--db-typography-functional-tablet-headline-md);
142
+ --db-base-headline-icon-weight-md: var(--db-base-icon-weight-functional-tablet-headline-md);
143
+ --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-functional-tablet-headline-md);
144
+ --db-type-headline-lg: var(--db-typography-functional-tablet-headline-lg);
145
+ --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-functional-tablet-headline-lg);
146
+ --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-functional-tablet-headline-lg);
147
+ --db-type-headline-xl: var(--db-typography-functional-tablet-headline-xl);
148
+ --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-functional-tablet-headline-xl);
149
+ --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-functional-tablet-headline-xl);
150
+ --db-type-headline-2xl: var(--db-typography-functional-tablet-headline-2xl);
151
+ --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-functional-tablet-headline-2xl);
152
+ --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-functional-tablet-headline-2xl);
153
+ --db-type-headline-3xl: var(--db-typography-functional-tablet-headline-3xl);
154
+ --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-functional-tablet-headline-3xl);
155
+ --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-functional-tablet-headline-3xl);
272
156
  }
273
- @media (64em < width) {
274
- .db-density-functional,
275
- [data-density=functional] {
276
- --db-type-headline-3xs: var(--db-typography-functional-desktop-headline-3xs);
277
- --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-functional-desktop-headline-3xs);
278
- --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-functional-desktop-headline-3xs);
279
- --db-type-headline-2xs: var(--db-typography-functional-desktop-headline-2xs);
280
- --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-functional-desktop-headline-2xs);
281
- --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-functional-desktop-headline-2xs);
282
- --db-type-headline-xs: var(--db-typography-functional-desktop-headline-xs);
283
- --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-functional-desktop-headline-xs);
284
- --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-functional-desktop-headline-xs);
285
- --db-type-headline-sm: var(--db-typography-functional-desktop-headline-sm);
286
- --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-functional-desktop-headline-sm);
287
- --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-functional-desktop-headline-sm);
288
- --db-type-headline-md: var(--db-typography-functional-desktop-headline-md);
289
- --db-base-headline-icon-weight-md: var(--db-base-icon-weight-functional-desktop-headline-md);
290
- --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-functional-desktop-headline-md);
291
- --db-type-headline-lg: var(--db-typography-functional-desktop-headline-lg);
292
- --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-functional-desktop-headline-lg);
293
- --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-functional-desktop-headline-lg);
294
- --db-type-headline-xl: var(--db-typography-functional-desktop-headline-xl);
295
- --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-functional-desktop-headline-xl);
296
- --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-functional-desktop-headline-xl);
297
- --db-type-headline-2xl: var(--db-typography-functional-desktop-headline-2xl);
298
- --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-functional-desktop-headline-2xl);
299
- --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-functional-desktop-headline-2xl);
300
- --db-type-headline-3xl: var(--db-typography-functional-desktop-headline-3xl);
301
- --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-functional-desktop-headline-3xl);
302
- --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-functional-desktop-headline-3xl);
303
- }
157
+ }
158
+ @media (64em < width) {
159
+ .db-density-functional,
160
+ [data-density=functional] {
161
+ --db-type-headline-3xs: var(--db-typography-functional-desktop-headline-3xs);
162
+ --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-functional-desktop-headline-3xs);
163
+ --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-functional-desktop-headline-3xs);
164
+ --db-type-headline-2xs: var(--db-typography-functional-desktop-headline-2xs);
165
+ --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-functional-desktop-headline-2xs);
166
+ --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-functional-desktop-headline-2xs);
167
+ --db-type-headline-xs: var(--db-typography-functional-desktop-headline-xs);
168
+ --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-functional-desktop-headline-xs);
169
+ --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-functional-desktop-headline-xs);
170
+ --db-type-headline-sm: var(--db-typography-functional-desktop-headline-sm);
171
+ --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-functional-desktop-headline-sm);
172
+ --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-functional-desktop-headline-sm);
173
+ --db-type-headline-md: var(--db-typography-functional-desktop-headline-md);
174
+ --db-base-headline-icon-weight-md: var(--db-base-icon-weight-functional-desktop-headline-md);
175
+ --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-functional-desktop-headline-md);
176
+ --db-type-headline-lg: var(--db-typography-functional-desktop-headline-lg);
177
+ --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-functional-desktop-headline-lg);
178
+ --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-functional-desktop-headline-lg);
179
+ --db-type-headline-xl: var(--db-typography-functional-desktop-headline-xl);
180
+ --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-functional-desktop-headline-xl);
181
+ --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-functional-desktop-headline-xl);
182
+ --db-type-headline-2xl: var(--db-typography-functional-desktop-headline-2xl);
183
+ --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-functional-desktop-headline-2xl);
184
+ --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-functional-desktop-headline-2xl);
185
+ --db-type-headline-3xl: var(--db-typography-functional-desktop-headline-3xl);
186
+ --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-functional-desktop-headline-3xl);
187
+ --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-functional-desktop-headline-3xl);
304
188
  }
305
189
  }
306
190
 
307
191
  .db-density-functional,
308
192
  [data-density=functional] {
309
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
193
+ /* stylelint-disable-next-line media-query-no-invalid */
194
+ /* stylelint-disable-next-line at-rule-empty-line-before */
195
+ /* stylelint-disable-next-line media-query-no-invalid */
196
+ /* stylelint-disable-next-line at-rule-empty-line-before */
197
+ /* stylelint-disable-next-line media-query-no-invalid */
198
+ /* stylelint-disable-next-line at-rule-empty-line-before */
310
199
  }
311
- @layer variables {
200
+ @media (width <= 48em) {
312
201
  .db-density-functional,
313
202
  [data-density=functional] {
314
- /* stylelint-disable-next-line media-query-no-invalid */
315
- /* stylelint-disable-next-line at-rule-empty-line-before */
316
- /* stylelint-disable-next-line media-query-no-invalid */
317
- /* stylelint-disable-next-line at-rule-empty-line-before */
318
- /* stylelint-disable-next-line media-query-no-invalid */
319
- /* stylelint-disable-next-line at-rule-empty-line-before */
320
- }
321
- @media (width <= 48em) {
322
- .db-density-functional,
323
- [data-density=functional] {
324
- --db-type-body-3xs: var(--db-typography-functional-mobile-body-3xs);
325
- --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-functional-mobile-body-3xs);
326
- --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-functional-mobile-body-3xs);
327
- --db-type-body-2xs: var(--db-typography-functional-mobile-body-2xs);
328
- --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-functional-mobile-body-2xs);
329
- --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-functional-mobile-body-2xs);
330
- --db-type-body-xs: var(--db-typography-functional-mobile-body-xs);
331
- --db-base-body-icon-weight-xs: var(--db-base-icon-weight-functional-mobile-body-xs);
332
- --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-functional-mobile-body-xs);
333
- --db-type-body-sm: var(--db-typography-functional-mobile-body-sm);
334
- --db-base-body-icon-weight-sm: var(--db-base-icon-weight-functional-mobile-body-sm);
335
- --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-functional-mobile-body-sm);
336
- --db-type-body-md: var(--db-typography-functional-mobile-body-md);
337
- --db-base-body-icon-weight-md: var(--db-base-icon-weight-functional-mobile-body-md);
338
- --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-functional-mobile-body-md);
339
- --db-type-body-lg: var(--db-typography-functional-mobile-body-lg);
340
- --db-base-body-icon-weight-lg: var(--db-base-icon-weight-functional-mobile-body-lg);
341
- --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-functional-mobile-body-lg);
342
- --db-type-body-xl: var(--db-typography-functional-mobile-body-xl);
343
- --db-base-body-icon-weight-xl: var(--db-base-icon-weight-functional-mobile-body-xl);
344
- --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-functional-mobile-body-xl);
345
- --db-type-body-2xl: var(--db-typography-functional-mobile-body-2xl);
346
- --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-functional-mobile-body-2xl);
347
- --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-functional-mobile-body-2xl);
348
- --db-type-body-3xl: var(--db-typography-functional-mobile-body-3xl);
349
- --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-functional-mobile-body-3xl);
350
- --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-functional-mobile-body-3xl);
351
- }
203
+ --db-type-body-3xs: var(--db-typography-functional-mobile-body-3xs);
204
+ --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-functional-mobile-body-3xs);
205
+ --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-functional-mobile-body-3xs);
206
+ --db-type-body-2xs: var(--db-typography-functional-mobile-body-2xs);
207
+ --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-functional-mobile-body-2xs);
208
+ --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-functional-mobile-body-2xs);
209
+ --db-type-body-xs: var(--db-typography-functional-mobile-body-xs);
210
+ --db-base-body-icon-weight-xs: var(--db-base-icon-weight-functional-mobile-body-xs);
211
+ --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-functional-mobile-body-xs);
212
+ --db-type-body-sm: var(--db-typography-functional-mobile-body-sm);
213
+ --db-base-body-icon-weight-sm: var(--db-base-icon-weight-functional-mobile-body-sm);
214
+ --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-functional-mobile-body-sm);
215
+ --db-type-body-md: var(--db-typography-functional-mobile-body-md);
216
+ --db-base-body-icon-weight-md: var(--db-base-icon-weight-functional-mobile-body-md);
217
+ --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-functional-mobile-body-md);
218
+ --db-type-body-lg: var(--db-typography-functional-mobile-body-lg);
219
+ --db-base-body-icon-weight-lg: var(--db-base-icon-weight-functional-mobile-body-lg);
220
+ --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-functional-mobile-body-lg);
221
+ --db-type-body-xl: var(--db-typography-functional-mobile-body-xl);
222
+ --db-base-body-icon-weight-xl: var(--db-base-icon-weight-functional-mobile-body-xl);
223
+ --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-functional-mobile-body-xl);
224
+ --db-type-body-2xl: var(--db-typography-functional-mobile-body-2xl);
225
+ --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-functional-mobile-body-2xl);
226
+ --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-functional-mobile-body-2xl);
227
+ --db-type-body-3xl: var(--db-typography-functional-mobile-body-3xl);
228
+ --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-functional-mobile-body-3xl);
229
+ --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-functional-mobile-body-3xl);
352
230
  }
353
- @media (48em < width <= 64em) {
354
- .db-density-functional,
355
- [data-density=functional] {
356
- --db-type-body-3xs: var(--db-typography-functional-tablet-body-3xs);
357
- --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-functional-tablet-body-3xs);
358
- --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-functional-tablet-body-3xs);
359
- --db-type-body-2xs: var(--db-typography-functional-tablet-body-2xs);
360
- --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-functional-tablet-body-2xs);
361
- --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-functional-tablet-body-2xs);
362
- --db-type-body-xs: var(--db-typography-functional-tablet-body-xs);
363
- --db-base-body-icon-weight-xs: var(--db-base-icon-weight-functional-tablet-body-xs);
364
- --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-functional-tablet-body-xs);
365
- --db-type-body-sm: var(--db-typography-functional-tablet-body-sm);
366
- --db-base-body-icon-weight-sm: var(--db-base-icon-weight-functional-tablet-body-sm);
367
- --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-functional-tablet-body-sm);
368
- --db-type-body-md: var(--db-typography-functional-tablet-body-md);
369
- --db-base-body-icon-weight-md: var(--db-base-icon-weight-functional-tablet-body-md);
370
- --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-functional-tablet-body-md);
371
- --db-type-body-lg: var(--db-typography-functional-tablet-body-lg);
372
- --db-base-body-icon-weight-lg: var(--db-base-icon-weight-functional-tablet-body-lg);
373
- --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-functional-tablet-body-lg);
374
- --db-type-body-xl: var(--db-typography-functional-tablet-body-xl);
375
- --db-base-body-icon-weight-xl: var(--db-base-icon-weight-functional-tablet-body-xl);
376
- --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-functional-tablet-body-xl);
377
- --db-type-body-2xl: var(--db-typography-functional-tablet-body-2xl);
378
- --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-functional-tablet-body-2xl);
379
- --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-functional-tablet-body-2xl);
380
- --db-type-body-3xl: var(--db-typography-functional-tablet-body-3xl);
381
- --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-functional-tablet-body-3xl);
382
- --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-functional-tablet-body-3xl);
383
- }
231
+ }
232
+ @media (48em < width <= 64em) {
233
+ .db-density-functional,
234
+ [data-density=functional] {
235
+ --db-type-body-3xs: var(--db-typography-functional-tablet-body-3xs);
236
+ --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-functional-tablet-body-3xs);
237
+ --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-functional-tablet-body-3xs);
238
+ --db-type-body-2xs: var(--db-typography-functional-tablet-body-2xs);
239
+ --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-functional-tablet-body-2xs);
240
+ --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-functional-tablet-body-2xs);
241
+ --db-type-body-xs: var(--db-typography-functional-tablet-body-xs);
242
+ --db-base-body-icon-weight-xs: var(--db-base-icon-weight-functional-tablet-body-xs);
243
+ --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-functional-tablet-body-xs);
244
+ --db-type-body-sm: var(--db-typography-functional-tablet-body-sm);
245
+ --db-base-body-icon-weight-sm: var(--db-base-icon-weight-functional-tablet-body-sm);
246
+ --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-functional-tablet-body-sm);
247
+ --db-type-body-md: var(--db-typography-functional-tablet-body-md);
248
+ --db-base-body-icon-weight-md: var(--db-base-icon-weight-functional-tablet-body-md);
249
+ --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-functional-tablet-body-md);
250
+ --db-type-body-lg: var(--db-typography-functional-tablet-body-lg);
251
+ --db-base-body-icon-weight-lg: var(--db-base-icon-weight-functional-tablet-body-lg);
252
+ --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-functional-tablet-body-lg);
253
+ --db-type-body-xl: var(--db-typography-functional-tablet-body-xl);
254
+ --db-base-body-icon-weight-xl: var(--db-base-icon-weight-functional-tablet-body-xl);
255
+ --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-functional-tablet-body-xl);
256
+ --db-type-body-2xl: var(--db-typography-functional-tablet-body-2xl);
257
+ --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-functional-tablet-body-2xl);
258
+ --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-functional-tablet-body-2xl);
259
+ --db-type-body-3xl: var(--db-typography-functional-tablet-body-3xl);
260
+ --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-functional-tablet-body-3xl);
261
+ --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-functional-tablet-body-3xl);
384
262
  }
385
- @media (64em < width) {
386
- .db-density-functional,
387
- [data-density=functional] {
388
- --db-type-body-3xs: var(--db-typography-functional-desktop-body-3xs);
389
- --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-functional-desktop-body-3xs);
390
- --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-functional-desktop-body-3xs);
391
- --db-type-body-2xs: var(--db-typography-functional-desktop-body-2xs);
392
- --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-functional-desktop-body-2xs);
393
- --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-functional-desktop-body-2xs);
394
- --db-type-body-xs: var(--db-typography-functional-desktop-body-xs);
395
- --db-base-body-icon-weight-xs: var(--db-base-icon-weight-functional-desktop-body-xs);
396
- --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-functional-desktop-body-xs);
397
- --db-type-body-sm: var(--db-typography-functional-desktop-body-sm);
398
- --db-base-body-icon-weight-sm: var(--db-base-icon-weight-functional-desktop-body-sm);
399
- --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-functional-desktop-body-sm);
400
- --db-type-body-md: var(--db-typography-functional-desktop-body-md);
401
- --db-base-body-icon-weight-md: var(--db-base-icon-weight-functional-desktop-body-md);
402
- --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-functional-desktop-body-md);
403
- --db-type-body-lg: var(--db-typography-functional-desktop-body-lg);
404
- --db-base-body-icon-weight-lg: var(--db-base-icon-weight-functional-desktop-body-lg);
405
- --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-functional-desktop-body-lg);
406
- --db-type-body-xl: var(--db-typography-functional-desktop-body-xl);
407
- --db-base-body-icon-weight-xl: var(--db-base-icon-weight-functional-desktop-body-xl);
408
- --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-functional-desktop-body-xl);
409
- --db-type-body-2xl: var(--db-typography-functional-desktop-body-2xl);
410
- --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-functional-desktop-body-2xl);
411
- --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-functional-desktop-body-2xl);
412
- --db-type-body-3xl: var(--db-typography-functional-desktop-body-3xl);
413
- --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-functional-desktop-body-3xl);
414
- --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-functional-desktop-body-3xl);
415
- }
263
+ }
264
+ @media (64em < width) {
265
+ .db-density-functional,
266
+ [data-density=functional] {
267
+ --db-type-body-3xs: var(--db-typography-functional-desktop-body-3xs);
268
+ --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-functional-desktop-body-3xs);
269
+ --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-functional-desktop-body-3xs);
270
+ --db-type-body-2xs: var(--db-typography-functional-desktop-body-2xs);
271
+ --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-functional-desktop-body-2xs);
272
+ --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-functional-desktop-body-2xs);
273
+ --db-type-body-xs: var(--db-typography-functional-desktop-body-xs);
274
+ --db-base-body-icon-weight-xs: var(--db-base-icon-weight-functional-desktop-body-xs);
275
+ --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-functional-desktop-body-xs);
276
+ --db-type-body-sm: var(--db-typography-functional-desktop-body-sm);
277
+ --db-base-body-icon-weight-sm: var(--db-base-icon-weight-functional-desktop-body-sm);
278
+ --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-functional-desktop-body-sm);
279
+ --db-type-body-md: var(--db-typography-functional-desktop-body-md);
280
+ --db-base-body-icon-weight-md: var(--db-base-icon-weight-functional-desktop-body-md);
281
+ --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-functional-desktop-body-md);
282
+ --db-type-body-lg: var(--db-typography-functional-desktop-body-lg);
283
+ --db-base-body-icon-weight-lg: var(--db-base-icon-weight-functional-desktop-body-lg);
284
+ --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-functional-desktop-body-lg);
285
+ --db-type-body-xl: var(--db-typography-functional-desktop-body-xl);
286
+ --db-base-body-icon-weight-xl: var(--db-base-icon-weight-functional-desktop-body-xl);
287
+ --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-functional-desktop-body-xl);
288
+ --db-type-body-2xl: var(--db-typography-functional-desktop-body-2xl);
289
+ --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-functional-desktop-body-2xl);
290
+ --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-functional-desktop-body-2xl);
291
+ --db-type-body-3xl: var(--db-typography-functional-desktop-body-3xl);
292
+ --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-functional-desktop-body-3xl);
293
+ --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-functional-desktop-body-3xl);
416
294
  }
417
295
  }
418
296