@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/density/classes/all.css CHANGED
@@ -1,1032 +1,1025 @@
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
+
7
71
  .db-density-expressive,
8
72
  [data-density=expressive], .db-density-regular,
9
73
  [data-density=regular], .db-density-functional,
10
74
  [data-density=functional] {
11
- line-height: var(--db-type-body-line-height-md);
12
- font-size: var(--db-type-body-font-size-md);
75
+ font: var(--db-type-body-md);
13
76
  }
14
77
 
15
78
  .db-density-expressive,
16
79
  [data-density=expressive], .db-density-regular,
17
80
  [data-density=regular], .db-density-functional,
18
81
  [data-density=functional] {
19
- /* Those variables are only for components to calculate heights and change icons */
20
- --db-icon-font-weight: var(--db-base-body-icon-weight-md);
21
- --db-icon-font-size: var(--db-base-body-icon-font-size-md);
22
- line-height: var(--db-type-body-line-height-md);
23
- font-size: var(--db-type-body-font-size-md);
82
+ font: var(--db-type-body-md);
83
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
84
+ }
85
+ @layer variables {
86
+ .db-density-expressive,
87
+ [data-density=expressive], .db-density-regular,
88
+ [data-density=regular], .db-density-functional,
89
+ [data-density=functional] {
90
+ /* Those variables are only for components to calculate heights and change icons */
91
+ --db-icon-font-weight: var(--db-base-body-icon-weight-md);
92
+ --db-icon-font-size: var(--db-base-body-icon-font-size-md);
93
+ }
24
94
  }
25
95
 
26
- /* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
27
- /* Use fixed spacings for all kind of distances (margin, padding, ...) */
28
- /* The primary use-case for responsive spacings are
29
- paddings/gaps in an application e.g. the <main> should have a responsive padding. */
30
- /* Elevation */
31
- /* Border */
32
- /* Transitions */
33
- /* Variants for adaptive components like input, select, notification, ... */
96
+ @layer variables {}
97
+
98
+ @layer variables {}
99
+
100
+ @layer variables {}
101
+
102
+ @layer variables {}
103
+
104
+ @layer variables {}
105
+
106
+ @layer variables {}
107
+
108
+ @layer variables {}
109
+
110
+ @layer variables {}
111
+
112
+ @layer variables {}
113
+
114
+ @layer variables {}
115
+
116
+ @layer variables {}
117
+
118
+ @layer variables {}
119
+
120
+ @layer variables {}
121
+
122
+ /**
123
+ * @mixin screen-min-max
124
+ * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
125
+ */
34
126
  .db-density-expressive,
35
127
  [data-density=expressive] {
36
- --db-sizing-3xs: var(--db-sizing-expressive-3xs);
37
- --db-sizing-2xs: var(--db-sizing-expressive-2xs);
38
- --db-sizing-xs: var(--db-sizing-expressive-xs);
39
- --db-sizing-sm: var(--db-sizing-expressive-sm);
40
- --db-sizing-md: var(--db-sizing-expressive-md);
41
- --db-sizing-lg: var(--db-sizing-expressive-lg);
42
- --db-sizing-xl: var(--db-sizing-expressive-xl);
43
- --db-sizing-2xl: var(--db-sizing-expressive-2xl);
44
- --db-sizing-3xl: var(--db-sizing-expressive-3xl);
45
- --db-spacing-fixed-3xs: var(--db-spacing-fixed-expressive-3xs);
46
- --db-spacing-fixed-2xs: var(--db-spacing-fixed-expressive-2xs);
47
- --db-spacing-fixed-xs: var(--db-spacing-fixed-expressive-xs);
48
- --db-spacing-fixed-sm: var(--db-spacing-fixed-expressive-sm);
49
- --db-spacing-fixed-md: var(--db-spacing-fixed-expressive-md);
50
- --db-spacing-fixed-lg: var(--db-spacing-fixed-expressive-lg);
51
- --db-spacing-fixed-xl: var(--db-spacing-fixed-expressive-xl);
52
- --db-spacing-fixed-2xl: var(--db-spacing-fixed-expressive-2xl);
53
- --db-spacing-fixed-3xl: var(--db-spacing-fixed-expressive-3xl);
54
- --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-mobile-3xs);
55
- --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-mobile-2xs);
56
- --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-mobile-xs);
57
- --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-mobile-sm);
58
- --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-mobile-md);
59
- --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-mobile-lg);
60
- --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-mobile-xl);
61
- --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-mobile-2xl);
62
- --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-mobile-3xl);
63
- /* stylelint-disable at-rule-empty-line-before */
64
- /* stylelint-enable at-rule-empty-line-before */
65
- /* stylelint-disable-next-line media-query-no-invalid */
66
- /* stylelint-disable-next-line at-rule-empty-line-before */
67
- /* stylelint-disable at-rule-empty-line-before */
68
- /* stylelint-enable at-rule-empty-line-before */
69
- /* stylelint-disable-next-line media-query-no-invalid */
70
- /* stylelint-disable-next-line at-rule-empty-line-before */
128
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
71
129
  }
72
- @media screen and (min-width: 45em) {
73
- .db-density-expressive:not([data-force-mobile]),
74
- [data-density=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-density-expressive,
75
- [data-force-mobile=false][data-density=expressive] {
76
- --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-tablet-3xs);
77
- --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-tablet-2xs);
78
- --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-tablet-xs);
79
- --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-tablet-sm);
80
- --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-tablet-md);
81
- --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-tablet-lg);
82
- --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-tablet-xl);
83
- --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-tablet-2xl);
84
- --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-tablet-3xl);
130
+ @layer variables {
131
+ .db-density-expressive,
132
+ [data-density=expressive] {
133
+ --db-sizing-3xs: var(--db-sizing-expressive-3xs);
134
+ --db-sizing-2xs: var(--db-sizing-expressive-2xs);
135
+ --db-sizing-xs: var(--db-sizing-expressive-xs);
136
+ --db-sizing-sm: var(--db-sizing-expressive-sm);
137
+ --db-sizing-md: var(--db-sizing-expressive-md);
138
+ --db-sizing-lg: var(--db-sizing-expressive-lg);
139
+ --db-sizing-xl: var(--db-sizing-expressive-xl);
140
+ --db-sizing-2xl: var(--db-sizing-expressive-2xl);
141
+ --db-sizing-3xl: var(--db-sizing-expressive-3xl);
142
+ --db-spacing-fixed-3xs: var(--db-spacing-fixed-expressive-3xs);
143
+ --db-spacing-fixed-2xs: var(--db-spacing-fixed-expressive-2xs);
144
+ --db-spacing-fixed-xs: var(--db-spacing-fixed-expressive-xs);
145
+ --db-spacing-fixed-sm: var(--db-spacing-fixed-expressive-sm);
146
+ --db-spacing-fixed-md: var(--db-spacing-fixed-expressive-md);
147
+ --db-spacing-fixed-lg: var(--db-spacing-fixed-expressive-lg);
148
+ --db-spacing-fixed-xl: var(--db-spacing-fixed-expressive-xl);
149
+ --db-spacing-fixed-2xl: var(--db-spacing-fixed-expressive-2xl);
150
+ --db-spacing-fixed-3xl: var(--db-spacing-fixed-expressive-3xl);
151
+ /* stylelint-disable-next-line media-query-no-invalid */
152
+ /* stylelint-disable-next-line at-rule-empty-line-before */
153
+ /* stylelint-disable-next-line media-query-no-invalid */
154
+ /* stylelint-disable-next-line at-rule-empty-line-before */
155
+ /* stylelint-disable-next-line media-query-no-invalid */
156
+ /* stylelint-disable-next-line at-rule-empty-line-before */
85
157
  }
86
- }
87
- @media screen and (min-width: 64em) {
88
- .db-density-expressive:not([data-force-mobile]),
89
- [data-density=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-density-expressive,
90
- [data-force-mobile=false][data-density=expressive] {
91
- --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-desktop-3xs);
92
- --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-desktop-2xs);
93
- --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-desktop-xs);
94
- --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-desktop-sm);
95
- --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-desktop-md);
96
- --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-desktop-lg);
97
- --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-desktop-xl);
98
- --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-desktop-2xl);
99
- --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-desktop-3xl);
158
+ @media screen and (width <= 45em) {
159
+ .db-density-expressive,
160
+ [data-density=expressive] {
161
+ --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-mobile-3xs);
162
+ --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-mobile-2xs);
163
+ --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-mobile-xs);
164
+ --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-mobile-sm);
165
+ --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-mobile-md);
166
+ --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-mobile-lg);
167
+ --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-mobile-xl);
168
+ --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-mobile-2xl);
169
+ --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-mobile-3xl);
170
+ }
171
+ }
172
+ @media screen and (45em < width <= 64em) {
173
+ .db-density-expressive,
174
+ [data-density=expressive] {
175
+ --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-tablet-3xs);
176
+ --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-tablet-2xs);
177
+ --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-tablet-xs);
178
+ --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-tablet-sm);
179
+ --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-tablet-md);
180
+ --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-tablet-lg);
181
+ --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-tablet-xl);
182
+ --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-tablet-2xl);
183
+ --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-tablet-3xl);
184
+ }
185
+ }
186
+ @media screen and (64em < width) {
187
+ .db-density-expressive,
188
+ [data-density=expressive] {
189
+ --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-desktop-3xs);
190
+ --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-desktop-2xs);
191
+ --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-desktop-xs);
192
+ --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-desktop-sm);
193
+ --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-desktop-md);
194
+ --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-desktop-lg);
195
+ --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-desktop-xl);
196
+ --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-desktop-2xl);
197
+ --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-desktop-3xl);
198
+ }
100
199
  }
101
200
  }
102
201
 
103
202
  .db-density-regular,
104
203
  [data-density=regular] {
105
- --db-sizing-3xs: var(--db-sizing-regular-3xs);
106
- --db-sizing-2xs: var(--db-sizing-regular-2xs);
107
- --db-sizing-xs: var(--db-sizing-regular-xs);
108
- --db-sizing-sm: var(--db-sizing-regular-sm);
109
- --db-sizing-md: var(--db-sizing-regular-md);
110
- --db-sizing-lg: var(--db-sizing-regular-lg);
111
- --db-sizing-xl: var(--db-sizing-regular-xl);
112
- --db-sizing-2xl: var(--db-sizing-regular-2xl);
113
- --db-sizing-3xl: var(--db-sizing-regular-3xl);
114
- --db-spacing-fixed-3xs: var(--db-spacing-fixed-regular-3xs);
115
- --db-spacing-fixed-2xs: var(--db-spacing-fixed-regular-2xs);
116
- --db-spacing-fixed-xs: var(--db-spacing-fixed-regular-xs);
117
- --db-spacing-fixed-sm: var(--db-spacing-fixed-regular-sm);
118
- --db-spacing-fixed-md: var(--db-spacing-fixed-regular-md);
119
- --db-spacing-fixed-lg: var(--db-spacing-fixed-regular-lg);
120
- --db-spacing-fixed-xl: var(--db-spacing-fixed-regular-xl);
121
- --db-spacing-fixed-2xl: var(--db-spacing-fixed-regular-2xl);
122
- --db-spacing-fixed-3xl: var(--db-spacing-fixed-regular-3xl);
123
- --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-mobile-3xs);
124
- --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-mobile-2xs);
125
- --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-mobile-xs);
126
- --db-spacing-responsive-sm: var(--db-spacing-responsive-regular-mobile-sm);
127
- --db-spacing-responsive-md: var(--db-spacing-responsive-regular-mobile-md);
128
- --db-spacing-responsive-lg: var(--db-spacing-responsive-regular-mobile-lg);
129
- --db-spacing-responsive-xl: var(--db-spacing-responsive-regular-mobile-xl);
130
- --db-spacing-responsive-2xl: var(--db-spacing-responsive-regular-mobile-2xl);
131
- --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-mobile-3xl);
132
- /* stylelint-disable at-rule-empty-line-before */
133
- /* stylelint-enable at-rule-empty-line-before */
134
- /* stylelint-disable-next-line media-query-no-invalid */
135
- /* stylelint-disable-next-line at-rule-empty-line-before */
136
- /* stylelint-disable at-rule-empty-line-before */
137
- /* stylelint-enable at-rule-empty-line-before */
138
- /* stylelint-disable-next-line media-query-no-invalid */
139
- /* stylelint-disable-next-line at-rule-empty-line-before */
204
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
140
205
  }
141
- @media screen and (min-width: 45em) {
142
- .db-density-regular:not([data-force-mobile]),
143
- [data-density=regular]:not([data-force-mobile]), [data-force-mobile=false].db-density-regular,
144
- [data-force-mobile=false][data-density=regular] {
145
- --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-tablet-3xs);
146
- --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-tablet-2xs);
147
- --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-tablet-xs);
148
- --db-spacing-responsive-sm: var(--db-spacing-responsive-regular-tablet-sm);
149
- --db-spacing-responsive-md: var(--db-spacing-responsive-regular-tablet-md);
150
- --db-spacing-responsive-lg: var(--db-spacing-responsive-regular-tablet-lg);
151
- --db-spacing-responsive-xl: var(--db-spacing-responsive-regular-tablet-xl);
152
- --db-spacing-responsive-2xl: var(--db-spacing-responsive-regular-tablet-2xl);
153
- --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-tablet-3xl);
206
+ @layer variables {
207
+ .db-density-regular,
208
+ [data-density=regular] {
209
+ --db-sizing-3xs: var(--db-sizing-regular-3xs);
210
+ --db-sizing-2xs: var(--db-sizing-regular-2xs);
211
+ --db-sizing-xs: var(--db-sizing-regular-xs);
212
+ --db-sizing-sm: var(--db-sizing-regular-sm);
213
+ --db-sizing-md: var(--db-sizing-regular-md);
214
+ --db-sizing-lg: var(--db-sizing-regular-lg);
215
+ --db-sizing-xl: var(--db-sizing-regular-xl);
216
+ --db-sizing-2xl: var(--db-sizing-regular-2xl);
217
+ --db-sizing-3xl: var(--db-sizing-regular-3xl);
218
+ --db-spacing-fixed-3xs: var(--db-spacing-fixed-regular-3xs);
219
+ --db-spacing-fixed-2xs: var(--db-spacing-fixed-regular-2xs);
220
+ --db-spacing-fixed-xs: var(--db-spacing-fixed-regular-xs);
221
+ --db-spacing-fixed-sm: var(--db-spacing-fixed-regular-sm);
222
+ --db-spacing-fixed-md: var(--db-spacing-fixed-regular-md);
223
+ --db-spacing-fixed-lg: var(--db-spacing-fixed-regular-lg);
224
+ --db-spacing-fixed-xl: var(--db-spacing-fixed-regular-xl);
225
+ --db-spacing-fixed-2xl: var(--db-spacing-fixed-regular-2xl);
226
+ --db-spacing-fixed-3xl: var(--db-spacing-fixed-regular-3xl);
227
+ /* stylelint-disable-next-line media-query-no-invalid */
228
+ /* stylelint-disable-next-line at-rule-empty-line-before */
229
+ /* stylelint-disable-next-line media-query-no-invalid */
230
+ /* stylelint-disable-next-line at-rule-empty-line-before */
231
+ /* stylelint-disable-next-line media-query-no-invalid */
232
+ /* stylelint-disable-next-line at-rule-empty-line-before */
154
233
  }
155
- }
156
- @media screen and (min-width: 64em) {
157
- .db-density-regular:not([data-force-mobile]),
158
- [data-density=regular]:not([data-force-mobile]), [data-force-mobile=false].db-density-regular,
159
- [data-force-mobile=false][data-density=regular] {
160
- --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-desktop-3xs);
161
- --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-desktop-2xs);
162
- --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-desktop-xs);
163
- --db-spacing-responsive-sm: var(--db-spacing-responsive-regular-desktop-sm);
164
- --db-spacing-responsive-md: var(--db-spacing-responsive-regular-desktop-md);
165
- --db-spacing-responsive-lg: var(--db-spacing-responsive-regular-desktop-lg);
166
- --db-spacing-responsive-xl: var(--db-spacing-responsive-regular-desktop-xl);
167
- --db-spacing-responsive-2xl: var(--db-spacing-responsive-regular-desktop-2xl);
168
- --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-desktop-3xl);
234
+ @media screen and (width <= 45em) {
235
+ .db-density-regular,
236
+ [data-density=regular] {
237
+ --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-mobile-3xs);
238
+ --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-mobile-2xs);
239
+ --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-mobile-xs);
240
+ --db-spacing-responsive-sm: var(--db-spacing-responsive-regular-mobile-sm);
241
+ --db-spacing-responsive-md: var(--db-spacing-responsive-regular-mobile-md);
242
+ --db-spacing-responsive-lg: var(--db-spacing-responsive-regular-mobile-lg);
243
+ --db-spacing-responsive-xl: var(--db-spacing-responsive-regular-mobile-xl);
244
+ --db-spacing-responsive-2xl: var(--db-spacing-responsive-regular-mobile-2xl);
245
+ --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-mobile-3xl);
246
+ }
247
+ }
248
+ @media screen and (45em < width <= 64em) {
249
+ .db-density-regular,
250
+ [data-density=regular] {
251
+ --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-tablet-3xs);
252
+ --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-tablet-2xs);
253
+ --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-tablet-xs);
254
+ --db-spacing-responsive-sm: var(--db-spacing-responsive-regular-tablet-sm);
255
+ --db-spacing-responsive-md: var(--db-spacing-responsive-regular-tablet-md);
256
+ --db-spacing-responsive-lg: var(--db-spacing-responsive-regular-tablet-lg);
257
+ --db-spacing-responsive-xl: var(--db-spacing-responsive-regular-tablet-xl);
258
+ --db-spacing-responsive-2xl: var(--db-spacing-responsive-regular-tablet-2xl);
259
+ --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-tablet-3xl);
260
+ }
261
+ }
262
+ @media screen and (64em < width) {
263
+ .db-density-regular,
264
+ [data-density=regular] {
265
+ --db-spacing-responsive-3xs: var(--db-spacing-responsive-regular-desktop-3xs);
266
+ --db-spacing-responsive-2xs: var(--db-spacing-responsive-regular-desktop-2xs);
267
+ --db-spacing-responsive-xs: var(--db-spacing-responsive-regular-desktop-xs);
268
+ --db-spacing-responsive-sm: var(--db-spacing-responsive-regular-desktop-sm);
269
+ --db-spacing-responsive-md: var(--db-spacing-responsive-regular-desktop-md);
270
+ --db-spacing-responsive-lg: var(--db-spacing-responsive-regular-desktop-lg);
271
+ --db-spacing-responsive-xl: var(--db-spacing-responsive-regular-desktop-xl);
272
+ --db-spacing-responsive-2xl: var(--db-spacing-responsive-regular-desktop-2xl);
273
+ --db-spacing-responsive-3xl: var(--db-spacing-responsive-regular-desktop-3xl);
274
+ }
169
275
  }
170
276
  }
171
277
 
172
278
  .db-density-functional,
173
279
  [data-density=functional] {
174
- --db-sizing-3xs: var(--db-sizing-functional-3xs);
175
- --db-sizing-2xs: var(--db-sizing-functional-2xs);
176
- --db-sizing-xs: var(--db-sizing-functional-xs);
177
- --db-sizing-sm: var(--db-sizing-functional-sm);
178
- --db-sizing-md: var(--db-sizing-functional-md);
179
- --db-sizing-lg: var(--db-sizing-functional-lg);
180
- --db-sizing-xl: var(--db-sizing-functional-xl);
181
- --db-sizing-2xl: var(--db-sizing-functional-2xl);
182
- --db-sizing-3xl: var(--db-sizing-functional-3xl);
183
- --db-spacing-fixed-3xs: var(--db-spacing-fixed-functional-3xs);
184
- --db-spacing-fixed-2xs: var(--db-spacing-fixed-functional-2xs);
185
- --db-spacing-fixed-xs: var(--db-spacing-fixed-functional-xs);
186
- --db-spacing-fixed-sm: var(--db-spacing-fixed-functional-sm);
187
- --db-spacing-fixed-md: var(--db-spacing-fixed-functional-md);
188
- --db-spacing-fixed-lg: var(--db-spacing-fixed-functional-lg);
189
- --db-spacing-fixed-xl: var(--db-spacing-fixed-functional-xl);
190
- --db-spacing-fixed-2xl: var(--db-spacing-fixed-functional-2xl);
191
- --db-spacing-fixed-3xl: var(--db-spacing-fixed-functional-3xl);
192
- --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-mobile-3xs);
193
- --db-spacing-responsive-2xs: var(--db-spacing-responsive-functional-mobile-2xs);
194
- --db-spacing-responsive-xs: var(--db-spacing-responsive-functional-mobile-xs);
195
- --db-spacing-responsive-sm: var(--db-spacing-responsive-functional-mobile-sm);
196
- --db-spacing-responsive-md: var(--db-spacing-responsive-functional-mobile-md);
197
- --db-spacing-responsive-lg: var(--db-spacing-responsive-functional-mobile-lg);
198
- --db-spacing-responsive-xl: var(--db-spacing-responsive-functional-mobile-xl);
199
- --db-spacing-responsive-2xl: var(--db-spacing-responsive-functional-mobile-2xl);
200
- --db-spacing-responsive-3xl: var(--db-spacing-responsive-functional-mobile-3xl);
201
- /* stylelint-disable at-rule-empty-line-before */
202
- /* stylelint-enable at-rule-empty-line-before */
203
- /* stylelint-disable-next-line media-query-no-invalid */
204
- /* stylelint-disable-next-line at-rule-empty-line-before */
205
- /* stylelint-disable at-rule-empty-line-before */
206
- /* stylelint-enable at-rule-empty-line-before */
207
- /* stylelint-disable-next-line media-query-no-invalid */
208
- /* stylelint-disable-next-line at-rule-empty-line-before */
280
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
209
281
  }
210
- @media screen and (min-width: 45em) {
211
- .db-density-functional:not([data-force-mobile]),
212
- [data-density=functional]:not([data-force-mobile]), [data-force-mobile=false].db-density-functional,
213
- [data-force-mobile=false][data-density=functional] {
214
- --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-tablet-3xs);
215
- --db-spacing-responsive-2xs: var(--db-spacing-responsive-functional-tablet-2xs);
216
- --db-spacing-responsive-xs: var(--db-spacing-responsive-functional-tablet-xs);
217
- --db-spacing-responsive-sm: var(--db-spacing-responsive-functional-tablet-sm);
218
- --db-spacing-responsive-md: var(--db-spacing-responsive-functional-tablet-md);
219
- --db-spacing-responsive-lg: var(--db-spacing-responsive-functional-tablet-lg);
220
- --db-spacing-responsive-xl: var(--db-spacing-responsive-functional-tablet-xl);
221
- --db-spacing-responsive-2xl: var(--db-spacing-responsive-functional-tablet-2xl);
222
- --db-spacing-responsive-3xl: var(--db-spacing-responsive-functional-tablet-3xl);
282
+ @layer variables {
283
+ .db-density-functional,
284
+ [data-density=functional] {
285
+ --db-sizing-3xs: var(--db-sizing-functional-3xs);
286
+ --db-sizing-2xs: var(--db-sizing-functional-2xs);
287
+ --db-sizing-xs: var(--db-sizing-functional-xs);
288
+ --db-sizing-sm: var(--db-sizing-functional-sm);
289
+ --db-sizing-md: var(--db-sizing-functional-md);
290
+ --db-sizing-lg: var(--db-sizing-functional-lg);
291
+ --db-sizing-xl: var(--db-sizing-functional-xl);
292
+ --db-sizing-2xl: var(--db-sizing-functional-2xl);
293
+ --db-sizing-3xl: var(--db-sizing-functional-3xl);
294
+ --db-spacing-fixed-3xs: var(--db-spacing-fixed-functional-3xs);
295
+ --db-spacing-fixed-2xs: var(--db-spacing-fixed-functional-2xs);
296
+ --db-spacing-fixed-xs: var(--db-spacing-fixed-functional-xs);
297
+ --db-spacing-fixed-sm: var(--db-spacing-fixed-functional-sm);
298
+ --db-spacing-fixed-md: var(--db-spacing-fixed-functional-md);
299
+ --db-spacing-fixed-lg: var(--db-spacing-fixed-functional-lg);
300
+ --db-spacing-fixed-xl: var(--db-spacing-fixed-functional-xl);
301
+ --db-spacing-fixed-2xl: var(--db-spacing-fixed-functional-2xl);
302
+ --db-spacing-fixed-3xl: var(--db-spacing-fixed-functional-3xl);
303
+ /* stylelint-disable-next-line media-query-no-invalid */
304
+ /* stylelint-disable-next-line at-rule-empty-line-before */
305
+ /* stylelint-disable-next-line media-query-no-invalid */
306
+ /* stylelint-disable-next-line at-rule-empty-line-before */
307
+ /* stylelint-disable-next-line media-query-no-invalid */
308
+ /* stylelint-disable-next-line at-rule-empty-line-before */
223
309
  }
224
- }
225
- @media screen and (min-width: 64em) {
226
- .db-density-functional:not([data-force-mobile]),
227
- [data-density=functional]:not([data-force-mobile]), [data-force-mobile=false].db-density-functional,
228
- [data-force-mobile=false][data-density=functional] {
229
- --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-desktop-3xs);
230
- --db-spacing-responsive-2xs: var(--db-spacing-responsive-functional-desktop-2xs);
231
- --db-spacing-responsive-xs: var(--db-spacing-responsive-functional-desktop-xs);
232
- --db-spacing-responsive-sm: var(--db-spacing-responsive-functional-desktop-sm);
233
- --db-spacing-responsive-md: var(--db-spacing-responsive-functional-desktop-md);
234
- --db-spacing-responsive-lg: var(--db-spacing-responsive-functional-desktop-lg);
235
- --db-spacing-responsive-xl: var(--db-spacing-responsive-functional-desktop-xl);
236
- --db-spacing-responsive-2xl: var(--db-spacing-responsive-functional-desktop-2xl);
237
- --db-spacing-responsive-3xl: var(--db-spacing-responsive-functional-desktop-3xl);
310
+ @media screen and (width <= 45em) {
311
+ .db-density-functional,
312
+ [data-density=functional] {
313
+ --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-mobile-3xs);
314
+ --db-spacing-responsive-2xs: var(--db-spacing-responsive-functional-mobile-2xs);
315
+ --db-spacing-responsive-xs: var(--db-spacing-responsive-functional-mobile-xs);
316
+ --db-spacing-responsive-sm: var(--db-spacing-responsive-functional-mobile-sm);
317
+ --db-spacing-responsive-md: var(--db-spacing-responsive-functional-mobile-md);
318
+ --db-spacing-responsive-lg: var(--db-spacing-responsive-functional-mobile-lg);
319
+ --db-spacing-responsive-xl: var(--db-spacing-responsive-functional-mobile-xl);
320
+ --db-spacing-responsive-2xl: var(--db-spacing-responsive-functional-mobile-2xl);
321
+ --db-spacing-responsive-3xl: var(--db-spacing-responsive-functional-mobile-3xl);
322
+ }
323
+ }
324
+ @media screen and (45em < width <= 64em) {
325
+ .db-density-functional,
326
+ [data-density=functional] {
327
+ --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-tablet-3xs);
328
+ --db-spacing-responsive-2xs: var(--db-spacing-responsive-functional-tablet-2xs);
329
+ --db-spacing-responsive-xs: var(--db-spacing-responsive-functional-tablet-xs);
330
+ --db-spacing-responsive-sm: var(--db-spacing-responsive-functional-tablet-sm);
331
+ --db-spacing-responsive-md: var(--db-spacing-responsive-functional-tablet-md);
332
+ --db-spacing-responsive-lg: var(--db-spacing-responsive-functional-tablet-lg);
333
+ --db-spacing-responsive-xl: var(--db-spacing-responsive-functional-tablet-xl);
334
+ --db-spacing-responsive-2xl: var(--db-spacing-responsive-functional-tablet-2xl);
335
+ --db-spacing-responsive-3xl: var(--db-spacing-responsive-functional-tablet-3xl);
336
+ }
337
+ }
338
+ @media screen and (64em < width) {
339
+ .db-density-functional,
340
+ [data-density=functional] {
341
+ --db-spacing-responsive-3xs: var(--db-spacing-responsive-functional-desktop-3xs);
342
+ --db-spacing-responsive-2xs: var(--db-spacing-responsive-functional-desktop-2xs);
343
+ --db-spacing-responsive-xs: var(--db-spacing-responsive-functional-desktop-xs);
344
+ --db-spacing-responsive-sm: var(--db-spacing-responsive-functional-desktop-sm);
345
+ --db-spacing-responsive-md: var(--db-spacing-responsive-functional-desktop-md);
346
+ --db-spacing-responsive-lg: var(--db-spacing-responsive-functional-desktop-lg);
347
+ --db-spacing-responsive-xl: var(--db-spacing-responsive-functional-desktop-xl);
348
+ --db-spacing-responsive-2xl: var(--db-spacing-responsive-functional-desktop-2xl);
349
+ --db-spacing-responsive-3xl: var(--db-spacing-responsive-functional-desktop-3xl);
350
+ }
238
351
  }
239
352
  }
240
353
 
241
354
  .db-density-expressive,
242
355
  [data-density=expressive] {
243
- --db-type-headline-font-size-3xs: var(--db-typography-expressive-mobile-headline-3xs-font-size);
244
- --db-type-headline-line-height-3xs: var(--db-typography-expressive-mobile-headline-3xs-line-height);
245
- --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-headline-3xs);
246
- --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-headline-3xs);
247
- --db-type-headline-font-size-2xs: var(--db-typography-expressive-mobile-headline-2xs-font-size);
248
- --db-type-headline-line-height-2xs: var(--db-typography-expressive-mobile-headline-2xs-line-height);
249
- --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-headline-2xs);
250
- --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-headline-2xs);
251
- --db-type-headline-font-size-xs: var(--db-typography-expressive-mobile-headline-xs-font-size);
252
- --db-type-headline-line-height-xs: var(--db-typography-expressive-mobile-headline-xs-line-height);
253
- --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-headline-xs);
254
- --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-headline-xs);
255
- --db-type-headline-font-size-sm: var(--db-typography-expressive-mobile-headline-sm-font-size);
256
- --db-type-headline-line-height-sm: var(--db-typography-expressive-mobile-headline-sm-line-height);
257
- --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-headline-sm);
258
- --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-headline-sm);
259
- --db-type-headline-font-size-md: var(--db-typography-expressive-mobile-headline-md-font-size);
260
- --db-type-headline-line-height-md: var(--db-typography-expressive-mobile-headline-md-line-height);
261
- --db-base-headline-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-headline-md);
262
- --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-headline-md);
263
- --db-type-headline-font-size-lg: var(--db-typography-expressive-mobile-headline-lg-font-size);
264
- --db-type-headline-line-height-lg: var(--db-typography-expressive-mobile-headline-lg-line-height);
265
- --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-headline-lg);
266
- --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-headline-lg);
267
- --db-type-headline-font-size-xl: var(--db-typography-expressive-mobile-headline-xl-font-size);
268
- --db-type-headline-line-height-xl: var(--db-typography-expressive-mobile-headline-xl-line-height);
269
- --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-headline-xl);
270
- --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-headline-xl);
271
- --db-type-headline-font-size-2xl: var(--db-typography-expressive-mobile-headline-2xl-font-size);
272
- --db-type-headline-line-height-2xl: var(--db-typography-expressive-mobile-headline-2xl-line-height);
273
- --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-expressive-mobile-headline-2xl);
274
- --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-mobile-headline-2xl);
275
- --db-type-headline-font-size-3xl: var(--db-typography-expressive-mobile-headline-3xl-font-size);
276
- --db-type-headline-line-height-3xl: var(--db-typography-expressive-mobile-headline-3xl-line-height);
277
- --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-expressive-mobile-headline-3xl);
278
- --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-headline-3xl);
279
- /* stylelint-disable at-rule-empty-line-before */
280
- /* stylelint-enable at-rule-empty-line-before */
281
- /* stylelint-disable-next-line media-query-no-invalid */
282
- /* stylelint-disable-next-line at-rule-empty-line-before */
283
- /* stylelint-disable at-rule-empty-line-before */
284
- /* stylelint-enable at-rule-empty-line-before */
285
- /* stylelint-disable-next-line media-query-no-invalid */
286
- /* stylelint-disable-next-line at-rule-empty-line-before */
356
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
287
357
  }
288
- @media screen and (min-width: 45em) {
289
- .db-density-expressive:not([data-force-mobile]),
290
- [data-density=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-density-expressive,
291
- [data-force-mobile=false][data-density=expressive] {
292
- --db-type-headline-font-size-3xs: var(--db-typography-expressive-tablet-headline-3xs-font-size);
293
- --db-type-headline-line-height-3xs: var(--db-typography-expressive-tablet-headline-3xs-line-height);
294
- --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-expressive-tablet-headline-3xs);
295
- --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-tablet-headline-3xs);
296
- --db-type-headline-font-size-2xs: var(--db-typography-expressive-tablet-headline-2xs-font-size);
297
- --db-type-headline-line-height-2xs: var(--db-typography-expressive-tablet-headline-2xs-line-height);
298
- --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-expressive-tablet-headline-2xs);
299
- --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-tablet-headline-2xs);
300
- --db-type-headline-font-size-xs: var(--db-typography-expressive-tablet-headline-xs-font-size);
301
- --db-type-headline-line-height-xs: var(--db-typography-expressive-tablet-headline-xs-line-height);
302
- --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-expressive-tablet-headline-xs);
303
- --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-expressive-tablet-headline-xs);
304
- --db-type-headline-font-size-sm: var(--db-typography-expressive-tablet-headline-sm-font-size);
305
- --db-type-headline-line-height-sm: var(--db-typography-expressive-tablet-headline-sm-line-height);
306
- --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-expressive-tablet-headline-sm);
307
- --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-expressive-tablet-headline-sm);
308
- --db-type-headline-font-size-md: var(--db-typography-expressive-tablet-headline-md-font-size);
309
- --db-type-headline-line-height-md: var(--db-typography-expressive-tablet-headline-md-line-height);
310
- --db-base-headline-icon-weight-md: var(--db-base-icon-weight-expressive-tablet-headline-md);
311
- --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-expressive-tablet-headline-md);
312
- --db-type-headline-font-size-lg: var(--db-typography-expressive-tablet-headline-lg-font-size);
313
- --db-type-headline-line-height-lg: var(--db-typography-expressive-tablet-headline-lg-line-height);
314
- --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-expressive-tablet-headline-lg);
315
- --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-expressive-tablet-headline-lg);
316
- --db-type-headline-font-size-xl: var(--db-typography-expressive-tablet-headline-xl-font-size);
317
- --db-type-headline-line-height-xl: var(--db-typography-expressive-tablet-headline-xl-line-height);
318
- --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-expressive-tablet-headline-xl);
319
- --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-expressive-tablet-headline-xl);
320
- --db-type-headline-font-size-2xl: var(--db-typography-expressive-tablet-headline-2xl-font-size);
321
- --db-type-headline-line-height-2xl: var(--db-typography-expressive-tablet-headline-2xl-line-height);
322
- --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-expressive-tablet-headline-2xl);
323
- --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-tablet-headline-2xl);
324
- --db-type-headline-font-size-3xl: var(--db-typography-expressive-tablet-headline-3xl-font-size);
325
- --db-type-headline-line-height-3xl: var(--db-typography-expressive-tablet-headline-3xl-line-height);
326
- --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-expressive-tablet-headline-3xl);
327
- --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-tablet-headline-3xl);
358
+ @layer variables {
359
+ .db-density-expressive,
360
+ [data-density=expressive] {
361
+ /* stylelint-disable-next-line media-query-no-invalid */
362
+ /* stylelint-disable-next-line at-rule-empty-line-before */
363
+ /* stylelint-disable-next-line media-query-no-invalid */
364
+ /* stylelint-disable-next-line at-rule-empty-line-before */
365
+ /* stylelint-disable-next-line media-query-no-invalid */
366
+ /* stylelint-disable-next-line at-rule-empty-line-before */
328
367
  }
329
- }
330
- @media screen and (min-width: 64em) {
331
- .db-density-expressive:not([data-force-mobile]),
332
- [data-density=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-density-expressive,
333
- [data-force-mobile=false][data-density=expressive] {
334
- --db-type-headline-font-size-3xs: var(--db-typography-expressive-desktop-headline-3xs-font-size);
335
- --db-type-headline-line-height-3xs: var(--db-typography-expressive-desktop-headline-3xs-line-height);
336
- --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-expressive-desktop-headline-3xs);
337
- --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-desktop-headline-3xs);
338
- --db-type-headline-font-size-2xs: var(--db-typography-expressive-desktop-headline-2xs-font-size);
339
- --db-type-headline-line-height-2xs: var(--db-typography-expressive-desktop-headline-2xs-line-height);
340
- --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-expressive-desktop-headline-2xs);
341
- --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-desktop-headline-2xs);
342
- --db-type-headline-font-size-xs: var(--db-typography-expressive-desktop-headline-xs-font-size);
343
- --db-type-headline-line-height-xs: var(--db-typography-expressive-desktop-headline-xs-line-height);
344
- --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-expressive-desktop-headline-xs);
345
- --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-expressive-desktop-headline-xs);
346
- --db-type-headline-font-size-sm: var(--db-typography-expressive-desktop-headline-sm-font-size);
347
- --db-type-headline-line-height-sm: var(--db-typography-expressive-desktop-headline-sm-line-height);
348
- --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-expressive-desktop-headline-sm);
349
- --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-expressive-desktop-headline-sm);
350
- --db-type-headline-font-size-md: var(--db-typography-expressive-desktop-headline-md-font-size);
351
- --db-type-headline-line-height-md: var(--db-typography-expressive-desktop-headline-md-line-height);
352
- --db-base-headline-icon-weight-md: var(--db-base-icon-weight-expressive-desktop-headline-md);
353
- --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-expressive-desktop-headline-md);
354
- --db-type-headline-font-size-lg: var(--db-typography-expressive-desktop-headline-lg-font-size);
355
- --db-type-headline-line-height-lg: var(--db-typography-expressive-desktop-headline-lg-line-height);
356
- --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-expressive-desktop-headline-lg);
357
- --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-expressive-desktop-headline-lg);
358
- --db-type-headline-font-size-xl: var(--db-typography-expressive-desktop-headline-xl-font-size);
359
- --db-type-headline-line-height-xl: var(--db-typography-expressive-desktop-headline-xl-line-height);
360
- --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-expressive-desktop-headline-xl);
361
- --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-expressive-desktop-headline-xl);
362
- --db-type-headline-font-size-2xl: var(--db-typography-expressive-desktop-headline-2xl-font-size);
363
- --db-type-headline-line-height-2xl: var(--db-typography-expressive-desktop-headline-2xl-line-height);
364
- --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-expressive-desktop-headline-2xl);
365
- --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-desktop-headline-2xl);
366
- --db-type-headline-font-size-3xl: var(--db-typography-expressive-desktop-headline-3xl-font-size);
367
- --db-type-headline-line-height-3xl: var(--db-typography-expressive-desktop-headline-3xl-line-height);
368
- --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-expressive-desktop-headline-3xl);
369
- --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-desktop-headline-3xl);
368
+ @media screen and (width <= 45em) {
369
+ .db-density-expressive,
370
+ [data-density=expressive] {
371
+ --db-type-headline-3xs: var(--db-typography-expressive-mobile-headline-3xs);
372
+ --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-headline-3xs);
373
+ --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-headline-3xs);
374
+ --db-type-headline-2xs: var(--db-typography-expressive-mobile-headline-2xs);
375
+ --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-headline-2xs);
376
+ --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-headline-2xs);
377
+ --db-type-headline-xs: var(--db-typography-expressive-mobile-headline-xs);
378
+ --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-headline-xs);
379
+ --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-headline-xs);
380
+ --db-type-headline-sm: var(--db-typography-expressive-mobile-headline-sm);
381
+ --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-headline-sm);
382
+ --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-headline-sm);
383
+ --db-type-headline-md: var(--db-typography-expressive-mobile-headline-md);
384
+ --db-base-headline-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-headline-md);
385
+ --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-headline-md);
386
+ --db-type-headline-lg: var(--db-typography-expressive-mobile-headline-lg);
387
+ --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-headline-lg);
388
+ --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-headline-lg);
389
+ --db-type-headline-xl: var(--db-typography-expressive-mobile-headline-xl);
390
+ --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-headline-xl);
391
+ --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-headline-xl);
392
+ --db-type-headline-2xl: var(--db-typography-expressive-mobile-headline-2xl);
393
+ --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-expressive-mobile-headline-2xl);
394
+ --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-mobile-headline-2xl);
395
+ --db-type-headline-3xl: var(--db-typography-expressive-mobile-headline-3xl);
396
+ --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-expressive-mobile-headline-3xl);
397
+ --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-headline-3xl);
398
+ }
399
+ }
400
+ @media screen and (45em < width <= 64em) {
401
+ .db-density-expressive,
402
+ [data-density=expressive] {
403
+ --db-type-headline-3xs: var(--db-typography-expressive-tablet-headline-3xs);
404
+ --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-expressive-tablet-headline-3xs);
405
+ --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-tablet-headline-3xs);
406
+ --db-type-headline-2xs: var(--db-typography-expressive-tablet-headline-2xs);
407
+ --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-expressive-tablet-headline-2xs);
408
+ --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-tablet-headline-2xs);
409
+ --db-type-headline-xs: var(--db-typography-expressive-tablet-headline-xs);
410
+ --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-expressive-tablet-headline-xs);
411
+ --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-expressive-tablet-headline-xs);
412
+ --db-type-headline-sm: var(--db-typography-expressive-tablet-headline-sm);
413
+ --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-expressive-tablet-headline-sm);
414
+ --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-expressive-tablet-headline-sm);
415
+ --db-type-headline-md: var(--db-typography-expressive-tablet-headline-md);
416
+ --db-base-headline-icon-weight-md: var(--db-base-icon-weight-expressive-tablet-headline-md);
417
+ --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-expressive-tablet-headline-md);
418
+ --db-type-headline-lg: var(--db-typography-expressive-tablet-headline-lg);
419
+ --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-expressive-tablet-headline-lg);
420
+ --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-expressive-tablet-headline-lg);
421
+ --db-type-headline-xl: var(--db-typography-expressive-tablet-headline-xl);
422
+ --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-expressive-tablet-headline-xl);
423
+ --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-expressive-tablet-headline-xl);
424
+ --db-type-headline-2xl: var(--db-typography-expressive-tablet-headline-2xl);
425
+ --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-expressive-tablet-headline-2xl);
426
+ --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-tablet-headline-2xl);
427
+ --db-type-headline-3xl: var(--db-typography-expressive-tablet-headline-3xl);
428
+ --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-expressive-tablet-headline-3xl);
429
+ --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-tablet-headline-3xl);
430
+ }
431
+ }
432
+ @media screen and (64em < width) {
433
+ .db-density-expressive,
434
+ [data-density=expressive] {
435
+ --db-type-headline-3xs: var(--db-typography-expressive-desktop-headline-3xs);
436
+ --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-expressive-desktop-headline-3xs);
437
+ --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-desktop-headline-3xs);
438
+ --db-type-headline-2xs: var(--db-typography-expressive-desktop-headline-2xs);
439
+ --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-expressive-desktop-headline-2xs);
440
+ --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-desktop-headline-2xs);
441
+ --db-type-headline-xs: var(--db-typography-expressive-desktop-headline-xs);
442
+ --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-expressive-desktop-headline-xs);
443
+ --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-expressive-desktop-headline-xs);
444
+ --db-type-headline-sm: var(--db-typography-expressive-desktop-headline-sm);
445
+ --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-expressive-desktop-headline-sm);
446
+ --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-expressive-desktop-headline-sm);
447
+ --db-type-headline-md: var(--db-typography-expressive-desktop-headline-md);
448
+ --db-base-headline-icon-weight-md: var(--db-base-icon-weight-expressive-desktop-headline-md);
449
+ --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-expressive-desktop-headline-md);
450
+ --db-type-headline-lg: var(--db-typography-expressive-desktop-headline-lg);
451
+ --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-expressive-desktop-headline-lg);
452
+ --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-expressive-desktop-headline-lg);
453
+ --db-type-headline-xl: var(--db-typography-expressive-desktop-headline-xl);
454
+ --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-expressive-desktop-headline-xl);
455
+ --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-expressive-desktop-headline-xl);
456
+ --db-type-headline-2xl: var(--db-typography-expressive-desktop-headline-2xl);
457
+ --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-expressive-desktop-headline-2xl);
458
+ --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-desktop-headline-2xl);
459
+ --db-type-headline-3xl: var(--db-typography-expressive-desktop-headline-3xl);
460
+ --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-expressive-desktop-headline-3xl);
461
+ --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-desktop-headline-3xl);
462
+ }
370
463
  }
371
464
  }
372
465
 
373
466
  .db-density-expressive,
374
467
  [data-density=expressive] {
375
- --db-type-body-font-size-3xs: var(--db-typography-expressive-mobile-body-3xs-font-size);
376
- --db-type-body-line-height-3xs: var(--db-typography-expressive-mobile-body-3xs-line-height);
377
- --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-body-3xs);
378
- --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-body-3xs);
379
- --db-type-body-font-size-2xs: var(--db-typography-expressive-mobile-body-2xs-font-size);
380
- --db-type-body-line-height-2xs: var(--db-typography-expressive-mobile-body-2xs-line-height);
381
- --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-body-2xs);
382
- --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-body-2xs);
383
- --db-type-body-font-size-xs: var(--db-typography-expressive-mobile-body-xs-font-size);
384
- --db-type-body-line-height-xs: var(--db-typography-expressive-mobile-body-xs-line-height);
385
- --db-base-body-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-body-xs);
386
- --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-body-xs);
387
- --db-type-body-font-size-sm: var(--db-typography-expressive-mobile-body-sm-font-size);
388
- --db-type-body-line-height-sm: var(--db-typography-expressive-mobile-body-sm-line-height);
389
- --db-base-body-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-body-sm);
390
- --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-body-sm);
391
- --db-type-body-font-size-md: var(--db-typography-expressive-mobile-body-md-font-size);
392
- --db-type-body-line-height-md: var(--db-typography-expressive-mobile-body-md-line-height);
393
- --db-base-body-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-body-md);
394
- --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-body-md);
395
- --db-type-body-font-size-lg: var(--db-typography-expressive-mobile-body-lg-font-size);
396
- --db-type-body-line-height-lg: var(--db-typography-expressive-mobile-body-lg-line-height);
397
- --db-base-body-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-body-lg);
398
- --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-body-lg);
399
- --db-type-body-font-size-xl: var(--db-typography-expressive-mobile-body-xl-font-size);
400
- --db-type-body-line-height-xl: var(--db-typography-expressive-mobile-body-xl-line-height);
401
- --db-base-body-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-body-xl);
402
- --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-body-xl);
403
- --db-type-body-font-size-2xl: var(--db-typography-expressive-mobile-body-2xl-font-size);
404
- --db-type-body-line-height-2xl: var(--db-typography-expressive-mobile-body-2xl-line-height);
405
- --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-expressive-mobile-body-2xl);
406
- --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-mobile-body-2xl);
407
- --db-type-body-font-size-3xl: var(--db-typography-expressive-mobile-body-3xl-font-size);
408
- --db-type-body-line-height-3xl: var(--db-typography-expressive-mobile-body-3xl-line-height);
409
- --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-expressive-mobile-body-3xl);
410
- --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-body-3xl);
411
- /* stylelint-disable at-rule-empty-line-before */
412
- /* stylelint-enable at-rule-empty-line-before */
413
- /* stylelint-disable-next-line media-query-no-invalid */
414
- /* stylelint-disable-next-line at-rule-empty-line-before */
415
- /* stylelint-disable at-rule-empty-line-before */
416
- /* stylelint-enable at-rule-empty-line-before */
417
- /* stylelint-disable-next-line media-query-no-invalid */
418
- /* stylelint-disable-next-line at-rule-empty-line-before */
468
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
419
469
  }
420
- @media screen and (min-width: 45em) {
421
- .db-density-expressive:not([data-force-mobile]),
422
- [data-density=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-density-expressive,
423
- [data-force-mobile=false][data-density=expressive] {
424
- --db-type-body-font-size-3xs: var(--db-typography-expressive-tablet-body-3xs-font-size);
425
- --db-type-body-line-height-3xs: var(--db-typography-expressive-tablet-body-3xs-line-height);
426
- --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-body-3xs);
427
- --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-body-3xs);
428
- --db-type-body-font-size-2xs: var(--db-typography-expressive-tablet-body-2xs-font-size);
429
- --db-type-body-line-height-2xs: var(--db-typography-expressive-tablet-body-2xs-line-height);
430
- --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-body-2xs);
431
- --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-body-2xs);
432
- --db-type-body-font-size-xs: var(--db-typography-expressive-tablet-body-xs-font-size);
433
- --db-type-body-line-height-xs: var(--db-typography-expressive-tablet-body-xs-line-height);
434
- --db-base-body-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-body-xs);
435
- --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-body-xs);
436
- --db-type-body-font-size-sm: var(--db-typography-expressive-tablet-body-sm-font-size);
437
- --db-type-body-line-height-sm: var(--db-typography-expressive-tablet-body-sm-line-height);
438
- --db-base-body-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-body-sm);
439
- --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-body-sm);
440
- --db-type-body-font-size-md: var(--db-typography-expressive-tablet-body-md-font-size);
441
- --db-type-body-line-height-md: var(--db-typography-expressive-tablet-body-md-line-height);
442
- --db-base-body-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-body-md);
443
- --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-body-md);
444
- --db-type-body-font-size-lg: var(--db-typography-expressive-tablet-body-lg-font-size);
445
- --db-type-body-line-height-lg: var(--db-typography-expressive-tablet-body-lg-line-height);
446
- --db-base-body-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-body-lg);
447
- --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-body-lg);
448
- --db-type-body-font-size-xl: var(--db-typography-expressive-tablet-body-xl-font-size);
449
- --db-type-body-line-height-xl: var(--db-typography-expressive-tablet-body-xl-line-height);
450
- --db-base-body-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-body-xl);
451
- --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-body-xl);
452
- --db-type-body-font-size-2xl: var(--db-typography-expressive-tablet-body-2xl-font-size);
453
- --db-type-body-line-height-2xl: var(--db-typography-expressive-tablet-body-2xl-line-height);
454
- --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-expressive-mobile-body-2xl);
455
- --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-mobile-body-2xl);
456
- --db-type-body-font-size-3xl: var(--db-typography-expressive-tablet-body-3xl-font-size);
457
- --db-type-body-line-height-3xl: var(--db-typography-expressive-tablet-body-3xl-line-height);
458
- --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-expressive-mobile-body-3xl);
459
- --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-body-3xl);
470
+ @layer variables {
471
+ .db-density-expressive,
472
+ [data-density=expressive] {
473
+ /* stylelint-disable-next-line media-query-no-invalid */
474
+ /* stylelint-disable-next-line at-rule-empty-line-before */
475
+ /* stylelint-disable-next-line media-query-no-invalid */
476
+ /* stylelint-disable-next-line at-rule-empty-line-before */
477
+ /* stylelint-disable-next-line media-query-no-invalid */
478
+ /* stylelint-disable-next-line at-rule-empty-line-before */
460
479
  }
461
- }
462
- @media screen and (min-width: 64em) {
463
- .db-density-expressive:not([data-force-mobile]),
464
- [data-density=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-density-expressive,
465
- [data-force-mobile=false][data-density=expressive] {
466
- --db-type-body-font-size-3xs: var(--db-typography-expressive-desktop-body-3xs-font-size);
467
- --db-type-body-line-height-3xs: var(--db-typography-expressive-desktop-body-3xs-line-height);
468
- --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-body-3xs);
469
- --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-body-3xs);
470
- --db-type-body-font-size-2xs: var(--db-typography-expressive-desktop-body-2xs-font-size);
471
- --db-type-body-line-height-2xs: var(--db-typography-expressive-desktop-body-2xs-line-height);
472
- --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-body-2xs);
473
- --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-body-2xs);
474
- --db-type-body-font-size-xs: var(--db-typography-expressive-desktop-body-xs-font-size);
475
- --db-type-body-line-height-xs: var(--db-typography-expressive-desktop-body-xs-line-height);
476
- --db-base-body-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-body-xs);
477
- --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-body-xs);
478
- --db-type-body-font-size-sm: var(--db-typography-expressive-desktop-body-sm-font-size);
479
- --db-type-body-line-height-sm: var(--db-typography-expressive-desktop-body-sm-line-height);
480
- --db-base-body-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-body-sm);
481
- --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-body-sm);
482
- --db-type-body-font-size-md: var(--db-typography-expressive-desktop-body-md-font-size);
483
- --db-type-body-line-height-md: var(--db-typography-expressive-desktop-body-md-line-height);
484
- --db-base-body-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-body-md);
485
- --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-body-md);
486
- --db-type-body-font-size-lg: var(--db-typography-expressive-desktop-body-lg-font-size);
487
- --db-type-body-line-height-lg: var(--db-typography-expressive-desktop-body-lg-line-height);
488
- --db-base-body-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-body-lg);
489
- --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-body-lg);
490
- --db-type-body-font-size-xl: var(--db-typography-expressive-desktop-body-xl-font-size);
491
- --db-type-body-line-height-xl: var(--db-typography-expressive-desktop-body-xl-line-height);
492
- --db-base-body-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-body-xl);
493
- --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-body-xl);
494
- --db-type-body-font-size-2xl: var(--db-typography-expressive-desktop-body-2xl-font-size);
495
- --db-type-body-line-height-2xl: var(--db-typography-expressive-desktop-body-2xl-line-height);
496
- --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-expressive-mobile-body-2xl);
497
- --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-mobile-body-2xl);
498
- --db-type-body-font-size-3xl: var(--db-typography-expressive-desktop-body-3xl-font-size);
499
- --db-type-body-line-height-3xl: var(--db-typography-expressive-desktop-body-3xl-line-height);
500
- --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-expressive-mobile-body-3xl);
501
- --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-body-3xl);
480
+ @media screen and (width <= 45em) {
481
+ .db-density-expressive,
482
+ [data-density=expressive] {
483
+ --db-type-body-3xs: var(--db-typography-expressive-mobile-body-3xs);
484
+ --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-body-3xs);
485
+ --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-body-3xs);
486
+ --db-type-body-2xs: var(--db-typography-expressive-mobile-body-2xs);
487
+ --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-body-2xs);
488
+ --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-body-2xs);
489
+ --db-type-body-xs: var(--db-typography-expressive-mobile-body-xs);
490
+ --db-base-body-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-body-xs);
491
+ --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-body-xs);
492
+ --db-type-body-sm: var(--db-typography-expressive-mobile-body-sm);
493
+ --db-base-body-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-body-sm);
494
+ --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-body-sm);
495
+ --db-type-body-md: var(--db-typography-expressive-mobile-body-md);
496
+ --db-base-body-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-body-md);
497
+ --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-body-md);
498
+ --db-type-body-lg: var(--db-typography-expressive-mobile-body-lg);
499
+ --db-base-body-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-body-lg);
500
+ --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-body-lg);
501
+ --db-type-body-xl: var(--db-typography-expressive-mobile-body-xl);
502
+ --db-base-body-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-body-xl);
503
+ --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-body-xl);
504
+ --db-type-body-2xl: var(--db-typography-expressive-mobile-body-2xl);
505
+ --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-expressive-mobile-body-2xl);
506
+ --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-mobile-body-2xl);
507
+ --db-type-body-3xl: var(--db-typography-expressive-mobile-body-3xl);
508
+ --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-expressive-mobile-body-3xl);
509
+ --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-body-3xl);
510
+ }
511
+ }
512
+ @media screen and (45em < width <= 64em) {
513
+ .db-density-expressive,
514
+ [data-density=expressive] {
515
+ --db-type-body-3xs: var(--db-typography-expressive-tablet-body-3xs);
516
+ --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-expressive-tablet-body-3xs);
517
+ --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-tablet-body-3xs);
518
+ --db-type-body-2xs: var(--db-typography-expressive-tablet-body-2xs);
519
+ --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-expressive-tablet-body-2xs);
520
+ --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-tablet-body-2xs);
521
+ --db-type-body-xs: var(--db-typography-expressive-tablet-body-xs);
522
+ --db-base-body-icon-weight-xs: var(--db-base-icon-weight-expressive-tablet-body-xs);
523
+ --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-expressive-tablet-body-xs);
524
+ --db-type-body-sm: var(--db-typography-expressive-tablet-body-sm);
525
+ --db-base-body-icon-weight-sm: var(--db-base-icon-weight-expressive-tablet-body-sm);
526
+ --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-expressive-tablet-body-sm);
527
+ --db-type-body-md: var(--db-typography-expressive-tablet-body-md);
528
+ --db-base-body-icon-weight-md: var(--db-base-icon-weight-expressive-tablet-body-md);
529
+ --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-expressive-tablet-body-md);
530
+ --db-type-body-lg: var(--db-typography-expressive-tablet-body-lg);
531
+ --db-base-body-icon-weight-lg: var(--db-base-icon-weight-expressive-tablet-body-lg);
532
+ --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-expressive-tablet-body-lg);
533
+ --db-type-body-xl: var(--db-typography-expressive-tablet-body-xl);
534
+ --db-base-body-icon-weight-xl: var(--db-base-icon-weight-expressive-tablet-body-xl);
535
+ --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-expressive-tablet-body-xl);
536
+ --db-type-body-2xl: var(--db-typography-expressive-tablet-body-2xl);
537
+ --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-expressive-tablet-body-2xl);
538
+ --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-tablet-body-2xl);
539
+ --db-type-body-3xl: var(--db-typography-expressive-tablet-body-3xl);
540
+ --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-expressive-tablet-body-3xl);
541
+ --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-tablet-body-3xl);
542
+ }
543
+ }
544
+ @media screen and (64em < width) {
545
+ .db-density-expressive,
546
+ [data-density=expressive] {
547
+ --db-type-body-3xs: var(--db-typography-expressive-desktop-body-3xs);
548
+ --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-expressive-desktop-body-3xs);
549
+ --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-desktop-body-3xs);
550
+ --db-type-body-2xs: var(--db-typography-expressive-desktop-body-2xs);
551
+ --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-expressive-desktop-body-2xs);
552
+ --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-desktop-body-2xs);
553
+ --db-type-body-xs: var(--db-typography-expressive-desktop-body-xs);
554
+ --db-base-body-icon-weight-xs: var(--db-base-icon-weight-expressive-desktop-body-xs);
555
+ --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-expressive-desktop-body-xs);
556
+ --db-type-body-sm: var(--db-typography-expressive-desktop-body-sm);
557
+ --db-base-body-icon-weight-sm: var(--db-base-icon-weight-expressive-desktop-body-sm);
558
+ --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-expressive-desktop-body-sm);
559
+ --db-type-body-md: var(--db-typography-expressive-desktop-body-md);
560
+ --db-base-body-icon-weight-md: var(--db-base-icon-weight-expressive-desktop-body-md);
561
+ --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-expressive-desktop-body-md);
562
+ --db-type-body-lg: var(--db-typography-expressive-desktop-body-lg);
563
+ --db-base-body-icon-weight-lg: var(--db-base-icon-weight-expressive-desktop-body-lg);
564
+ --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-expressive-desktop-body-lg);
565
+ --db-type-body-xl: var(--db-typography-expressive-desktop-body-xl);
566
+ --db-base-body-icon-weight-xl: var(--db-base-icon-weight-expressive-desktop-body-xl);
567
+ --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-expressive-desktop-body-xl);
568
+ --db-type-body-2xl: var(--db-typography-expressive-desktop-body-2xl);
569
+ --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-expressive-desktop-body-2xl);
570
+ --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-desktop-body-2xl);
571
+ --db-type-body-3xl: var(--db-typography-expressive-desktop-body-3xl);
572
+ --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-expressive-desktop-body-3xl);
573
+ --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-desktop-body-3xl);
574
+ }
502
575
  }
503
576
  }
504
577
 
505
578
  .db-density-regular,
506
579
  [data-density=regular] {
507
- --db-type-headline-font-size-3xs: var(--db-typography-regular-mobile-headline-3xs-font-size);
508
- --db-type-headline-line-height-3xs: var(--db-typography-regular-mobile-headline-3xs-line-height);
509
- --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-headline-3xs);
510
- --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-headline-3xs);
511
- --db-type-headline-font-size-2xs: var(--db-typography-regular-mobile-headline-2xs-font-size);
512
- --db-type-headline-line-height-2xs: var(--db-typography-regular-mobile-headline-2xs-line-height);
513
- --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-regular-mobile-headline-2xs);
514
- --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-regular-mobile-headline-2xs);
515
- --db-type-headline-font-size-xs: var(--db-typography-regular-mobile-headline-xs-font-size);
516
- --db-type-headline-line-height-xs: var(--db-typography-regular-mobile-headline-xs-line-height);
517
- --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-regular-mobile-headline-xs);
518
- --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-regular-mobile-headline-xs);
519
- --db-type-headline-font-size-sm: var(--db-typography-regular-mobile-headline-sm-font-size);
520
- --db-type-headline-line-height-sm: var(--db-typography-regular-mobile-headline-sm-line-height);
521
- --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-regular-mobile-headline-sm);
522
- --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-regular-mobile-headline-sm);
523
- --db-type-headline-font-size-md: var(--db-typography-regular-mobile-headline-md-font-size);
524
- --db-type-headline-line-height-md: var(--db-typography-regular-mobile-headline-md-line-height);
525
- --db-base-headline-icon-weight-md: var(--db-base-icon-weight-regular-mobile-headline-md);
526
- --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-regular-mobile-headline-md);
527
- --db-type-headline-font-size-lg: var(--db-typography-regular-mobile-headline-lg-font-size);
528
- --db-type-headline-line-height-lg: var(--db-typography-regular-mobile-headline-lg-line-height);
529
- --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-regular-mobile-headline-lg);
530
- --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-regular-mobile-headline-lg);
531
- --db-type-headline-font-size-xl: var(--db-typography-regular-mobile-headline-xl-font-size);
532
- --db-type-headline-line-height-xl: var(--db-typography-regular-mobile-headline-xl-line-height);
533
- --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-regular-mobile-headline-xl);
534
- --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-regular-mobile-headline-xl);
535
- --db-type-headline-font-size-2xl: var(--db-typography-regular-mobile-headline-2xl-font-size);
536
- --db-type-headline-line-height-2xl: var(--db-typography-regular-mobile-headline-2xl-line-height);
537
- --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-regular-mobile-headline-2xl);
538
- --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-regular-mobile-headline-2xl);
539
- --db-type-headline-font-size-3xl: var(--db-typography-regular-mobile-headline-3xl-font-size);
540
- --db-type-headline-line-height-3xl: var(--db-typography-regular-mobile-headline-3xl-line-height);
541
- --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-regular-mobile-headline-3xl);
542
- --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-headline-3xl);
543
- /* stylelint-disable at-rule-empty-line-before */
544
- /* stylelint-enable at-rule-empty-line-before */
545
- /* stylelint-disable-next-line media-query-no-invalid */
546
- /* stylelint-disable-next-line at-rule-empty-line-before */
547
- /* stylelint-disable at-rule-empty-line-before */
548
- /* stylelint-enable at-rule-empty-line-before */
549
- /* stylelint-disable-next-line media-query-no-invalid */
550
- /* stylelint-disable-next-line at-rule-empty-line-before */
580
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
551
581
  }
552
- @media screen and (min-width: 45em) {
553
- .db-density-regular:not([data-force-mobile]),
554
- [data-density=regular]:not([data-force-mobile]), [data-force-mobile=false].db-density-regular,
555
- [data-force-mobile=false][data-density=regular] {
556
- --db-type-headline-font-size-3xs: var(--db-typography-regular-tablet-headline-3xs-font-size);
557
- --db-type-headline-line-height-3xs: var(--db-typography-regular-tablet-headline-3xs-line-height);
558
- --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-tablet-headline-3xs);
559
- --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-tablet-headline-3xs);
560
- --db-type-headline-font-size-2xs: var(--db-typography-regular-tablet-headline-2xs-font-size);
561
- --db-type-headline-line-height-2xs: var(--db-typography-regular-tablet-headline-2xs-line-height);
562
- --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-regular-tablet-headline-2xs);
563
- --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-regular-tablet-headline-2xs);
564
- --db-type-headline-font-size-xs: var(--db-typography-regular-tablet-headline-xs-font-size);
565
- --db-type-headline-line-height-xs: var(--db-typography-regular-tablet-headline-xs-line-height);
566
- --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-regular-tablet-headline-xs);
567
- --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-regular-tablet-headline-xs);
568
- --db-type-headline-font-size-sm: var(--db-typography-regular-tablet-headline-sm-font-size);
569
- --db-type-headline-line-height-sm: var(--db-typography-regular-tablet-headline-sm-line-height);
570
- --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-regular-tablet-headline-sm);
571
- --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-regular-tablet-headline-sm);
572
- --db-type-headline-font-size-md: var(--db-typography-regular-tablet-headline-md-font-size);
573
- --db-type-headline-line-height-md: var(--db-typography-regular-tablet-headline-md-line-height);
574
- --db-base-headline-icon-weight-md: var(--db-base-icon-weight-regular-tablet-headline-md);
575
- --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-regular-tablet-headline-md);
576
- --db-type-headline-font-size-lg: var(--db-typography-regular-tablet-headline-lg-font-size);
577
- --db-type-headline-line-height-lg: var(--db-typography-regular-tablet-headline-lg-line-height);
578
- --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-regular-tablet-headline-lg);
579
- --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-regular-tablet-headline-lg);
580
- --db-type-headline-font-size-xl: var(--db-typography-regular-tablet-headline-xl-font-size);
581
- --db-type-headline-line-height-xl: var(--db-typography-regular-tablet-headline-xl-line-height);
582
- --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-regular-tablet-headline-xl);
583
- --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-regular-tablet-headline-xl);
584
- --db-type-headline-font-size-2xl: var(--db-typography-regular-tablet-headline-2xl-font-size);
585
- --db-type-headline-line-height-2xl: var(--db-typography-regular-tablet-headline-2xl-line-height);
586
- --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-regular-tablet-headline-2xl);
587
- --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-regular-tablet-headline-2xl);
588
- --db-type-headline-font-size-3xl: var(--db-typography-regular-tablet-headline-3xl-font-size);
589
- --db-type-headline-line-height-3xl: var(--db-typography-regular-tablet-headline-3xl-line-height);
590
- --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-regular-tablet-headline-3xl);
591
- --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-regular-tablet-headline-3xl);
582
+ @layer variables {
583
+ .db-density-regular,
584
+ [data-density=regular] {
585
+ /* stylelint-disable-next-line media-query-no-invalid */
586
+ /* stylelint-disable-next-line at-rule-empty-line-before */
587
+ /* stylelint-disable-next-line media-query-no-invalid */
588
+ /* stylelint-disable-next-line at-rule-empty-line-before */
589
+ /* stylelint-disable-next-line media-query-no-invalid */
590
+ /* stylelint-disable-next-line at-rule-empty-line-before */
592
591
  }
593
- }
594
- @media screen and (min-width: 64em) {
595
- .db-density-regular:not([data-force-mobile]),
596
- [data-density=regular]:not([data-force-mobile]), [data-force-mobile=false].db-density-regular,
597
- [data-force-mobile=false][data-density=regular] {
598
- --db-type-headline-font-size-3xs: var(--db-typography-regular-desktop-headline-3xs-font-size);
599
- --db-type-headline-line-height-3xs: var(--db-typography-regular-desktop-headline-3xs-line-height);
600
- --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-desktop-headline-3xs);
601
- --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-desktop-headline-3xs);
602
- --db-type-headline-font-size-2xs: var(--db-typography-regular-desktop-headline-2xs-font-size);
603
- --db-type-headline-line-height-2xs: var(--db-typography-regular-desktop-headline-2xs-line-height);
604
- --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-regular-desktop-headline-2xs);
605
- --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-regular-desktop-headline-2xs);
606
- --db-type-headline-font-size-xs: var(--db-typography-regular-desktop-headline-xs-font-size);
607
- --db-type-headline-line-height-xs: var(--db-typography-regular-desktop-headline-xs-line-height);
608
- --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-regular-desktop-headline-xs);
609
- --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-regular-desktop-headline-xs);
610
- --db-type-headline-font-size-sm: var(--db-typography-regular-desktop-headline-sm-font-size);
611
- --db-type-headline-line-height-sm: var(--db-typography-regular-desktop-headline-sm-line-height);
612
- --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-regular-desktop-headline-sm);
613
- --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-regular-desktop-headline-sm);
614
- --db-type-headline-font-size-md: var(--db-typography-regular-desktop-headline-md-font-size);
615
- --db-type-headline-line-height-md: var(--db-typography-regular-desktop-headline-md-line-height);
616
- --db-base-headline-icon-weight-md: var(--db-base-icon-weight-regular-desktop-headline-md);
617
- --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-regular-desktop-headline-md);
618
- --db-type-headline-font-size-lg: var(--db-typography-regular-desktop-headline-lg-font-size);
619
- --db-type-headline-line-height-lg: var(--db-typography-regular-desktop-headline-lg-line-height);
620
- --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-regular-desktop-headline-lg);
621
- --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-regular-desktop-headline-lg);
622
- --db-type-headline-font-size-xl: var(--db-typography-regular-desktop-headline-xl-font-size);
623
- --db-type-headline-line-height-xl: var(--db-typography-regular-desktop-headline-xl-line-height);
624
- --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-regular-desktop-headline-xl);
625
- --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-regular-desktop-headline-xl);
626
- --db-type-headline-font-size-2xl: var(--db-typography-regular-desktop-headline-2xl-font-size);
627
- --db-type-headline-line-height-2xl: var(--db-typography-regular-desktop-headline-2xl-line-height);
628
- --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-regular-desktop-headline-2xl);
629
- --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-regular-desktop-headline-2xl);
630
- --db-type-headline-font-size-3xl: var(--db-typography-regular-desktop-headline-3xl-font-size);
631
- --db-type-headline-line-height-3xl: var(--db-typography-regular-desktop-headline-3xl-line-height);
632
- --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-regular-desktop-headline-3xl);
633
- --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-regular-desktop-headline-3xl);
592
+ @media screen and (width <= 45em) {
593
+ .db-density-regular,
594
+ [data-density=regular] {
595
+ --db-type-headline-3xs: var(--db-typography-regular-mobile-headline-3xs);
596
+ --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-headline-3xs);
597
+ --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-headline-3xs);
598
+ --db-type-headline-2xs: var(--db-typography-regular-mobile-headline-2xs);
599
+ --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-regular-mobile-headline-2xs);
600
+ --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-regular-mobile-headline-2xs);
601
+ --db-type-headline-xs: var(--db-typography-regular-mobile-headline-xs);
602
+ --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-regular-mobile-headline-xs);
603
+ --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-regular-mobile-headline-xs);
604
+ --db-type-headline-sm: var(--db-typography-regular-mobile-headline-sm);
605
+ --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-regular-mobile-headline-sm);
606
+ --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-regular-mobile-headline-sm);
607
+ --db-type-headline-md: var(--db-typography-regular-mobile-headline-md);
608
+ --db-base-headline-icon-weight-md: var(--db-base-icon-weight-regular-mobile-headline-md);
609
+ --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-regular-mobile-headline-md);
610
+ --db-type-headline-lg: var(--db-typography-regular-mobile-headline-lg);
611
+ --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-regular-mobile-headline-lg);
612
+ --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-regular-mobile-headline-lg);
613
+ --db-type-headline-xl: var(--db-typography-regular-mobile-headline-xl);
614
+ --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-regular-mobile-headline-xl);
615
+ --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-regular-mobile-headline-xl);
616
+ --db-type-headline-2xl: var(--db-typography-regular-mobile-headline-2xl);
617
+ --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-regular-mobile-headline-2xl);
618
+ --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-regular-mobile-headline-2xl);
619
+ --db-type-headline-3xl: var(--db-typography-regular-mobile-headline-3xl);
620
+ --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-regular-mobile-headline-3xl);
621
+ --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-headline-3xl);
622
+ }
623
+ }
624
+ @media screen and (45em < width <= 64em) {
625
+ .db-density-regular,
626
+ [data-density=regular] {
627
+ --db-type-headline-3xs: var(--db-typography-regular-tablet-headline-3xs);
628
+ --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-tablet-headline-3xs);
629
+ --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-tablet-headline-3xs);
630
+ --db-type-headline-2xs: var(--db-typography-regular-tablet-headline-2xs);
631
+ --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-regular-tablet-headline-2xs);
632
+ --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-regular-tablet-headline-2xs);
633
+ --db-type-headline-xs: var(--db-typography-regular-tablet-headline-xs);
634
+ --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-regular-tablet-headline-xs);
635
+ --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-regular-tablet-headline-xs);
636
+ --db-type-headline-sm: var(--db-typography-regular-tablet-headline-sm);
637
+ --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-regular-tablet-headline-sm);
638
+ --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-regular-tablet-headline-sm);
639
+ --db-type-headline-md: var(--db-typography-regular-tablet-headline-md);
640
+ --db-base-headline-icon-weight-md: var(--db-base-icon-weight-regular-tablet-headline-md);
641
+ --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-regular-tablet-headline-md);
642
+ --db-type-headline-lg: var(--db-typography-regular-tablet-headline-lg);
643
+ --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-regular-tablet-headline-lg);
644
+ --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-regular-tablet-headline-lg);
645
+ --db-type-headline-xl: var(--db-typography-regular-tablet-headline-xl);
646
+ --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-regular-tablet-headline-xl);
647
+ --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-regular-tablet-headline-xl);
648
+ --db-type-headline-2xl: var(--db-typography-regular-tablet-headline-2xl);
649
+ --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-regular-tablet-headline-2xl);
650
+ --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-regular-tablet-headline-2xl);
651
+ --db-type-headline-3xl: var(--db-typography-regular-tablet-headline-3xl);
652
+ --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-regular-tablet-headline-3xl);
653
+ --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-regular-tablet-headline-3xl);
654
+ }
655
+ }
656
+ @media screen and (64em < width) {
657
+ .db-density-regular,
658
+ [data-density=regular] {
659
+ --db-type-headline-3xs: var(--db-typography-regular-desktop-headline-3xs);
660
+ --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-regular-desktop-headline-3xs);
661
+ --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-regular-desktop-headline-3xs);
662
+ --db-type-headline-2xs: var(--db-typography-regular-desktop-headline-2xs);
663
+ --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-regular-desktop-headline-2xs);
664
+ --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-regular-desktop-headline-2xs);
665
+ --db-type-headline-xs: var(--db-typography-regular-desktop-headline-xs);
666
+ --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-regular-desktop-headline-xs);
667
+ --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-regular-desktop-headline-xs);
668
+ --db-type-headline-sm: var(--db-typography-regular-desktop-headline-sm);
669
+ --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-regular-desktop-headline-sm);
670
+ --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-regular-desktop-headline-sm);
671
+ --db-type-headline-md: var(--db-typography-regular-desktop-headline-md);
672
+ --db-base-headline-icon-weight-md: var(--db-base-icon-weight-regular-desktop-headline-md);
673
+ --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-regular-desktop-headline-md);
674
+ --db-type-headline-lg: var(--db-typography-regular-desktop-headline-lg);
675
+ --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-regular-desktop-headline-lg);
676
+ --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-regular-desktop-headline-lg);
677
+ --db-type-headline-xl: var(--db-typography-regular-desktop-headline-xl);
678
+ --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-regular-desktop-headline-xl);
679
+ --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-regular-desktop-headline-xl);
680
+ --db-type-headline-2xl: var(--db-typography-regular-desktop-headline-2xl);
681
+ --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-regular-desktop-headline-2xl);
682
+ --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-regular-desktop-headline-2xl);
683
+ --db-type-headline-3xl: var(--db-typography-regular-desktop-headline-3xl);
684
+ --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-regular-desktop-headline-3xl);
685
+ --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-regular-desktop-headline-3xl);
686
+ }
634
687
  }
635
688
  }
636
689
 
637
690
  .db-density-regular,
638
691
  [data-density=regular] {
639
- --db-type-body-font-size-3xs: var(--db-typography-regular-mobile-body-3xs-font-size);
640
- --db-type-body-line-height-3xs: var(--db-typography-regular-mobile-body-3xs-line-height);
641
- --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-body-3xs);
642
- --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-body-3xs);
643
- --db-type-body-font-size-2xs: var(--db-typography-regular-mobile-body-2xs-font-size);
644
- --db-type-body-line-height-2xs: var(--db-typography-regular-mobile-body-2xs-line-height);
645
- --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-regular-mobile-body-2xs);
646
- --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-regular-mobile-body-2xs);
647
- --db-type-body-font-size-xs: var(--db-typography-regular-mobile-body-xs-font-size);
648
- --db-type-body-line-height-xs: var(--db-typography-regular-mobile-body-xs-line-height);
649
- --db-base-body-icon-weight-xs: var(--db-base-icon-weight-regular-mobile-body-xs);
650
- --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-regular-mobile-body-xs);
651
- --db-type-body-font-size-sm: var(--db-typography-regular-mobile-body-sm-font-size);
652
- --db-type-body-line-height-sm: var(--db-typography-regular-mobile-body-sm-line-height);
653
- --db-base-body-icon-weight-sm: var(--db-base-icon-weight-regular-mobile-body-sm);
654
- --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-regular-mobile-body-sm);
655
- --db-type-body-font-size-md: var(--db-typography-regular-mobile-body-md-font-size);
656
- --db-type-body-line-height-md: var(--db-typography-regular-mobile-body-md-line-height);
657
- --db-base-body-icon-weight-md: var(--db-base-icon-weight-regular-mobile-body-md);
658
- --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-regular-mobile-body-md);
659
- --db-type-body-font-size-lg: var(--db-typography-regular-mobile-body-lg-font-size);
660
- --db-type-body-line-height-lg: var(--db-typography-regular-mobile-body-lg-line-height);
661
- --db-base-body-icon-weight-lg: var(--db-base-icon-weight-regular-mobile-body-lg);
662
- --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-regular-mobile-body-lg);
663
- --db-type-body-font-size-xl: var(--db-typography-regular-mobile-body-xl-font-size);
664
- --db-type-body-line-height-xl: var(--db-typography-regular-mobile-body-xl-line-height);
665
- --db-base-body-icon-weight-xl: var(--db-base-icon-weight-regular-mobile-body-xl);
666
- --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-regular-mobile-body-xl);
667
- --db-type-body-font-size-2xl: var(--db-typography-regular-mobile-body-2xl-font-size);
668
- --db-type-body-line-height-2xl: var(--db-typography-regular-mobile-body-2xl-line-height);
669
- --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-regular-mobile-body-2xl);
670
- --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-regular-mobile-body-2xl);
671
- --db-type-body-font-size-3xl: var(--db-typography-regular-mobile-body-3xl-font-size);
672
- --db-type-body-line-height-3xl: var(--db-typography-regular-mobile-body-3xl-line-height);
673
- --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-regular-mobile-body-3xl);
674
- --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-body-3xl);
675
- /* stylelint-disable at-rule-empty-line-before */
676
- /* stylelint-enable at-rule-empty-line-before */
677
- /* stylelint-disable-next-line media-query-no-invalid */
678
- /* stylelint-disable-next-line at-rule-empty-line-before */
679
- /* stylelint-disable at-rule-empty-line-before */
680
- /* stylelint-enable at-rule-empty-line-before */
681
- /* stylelint-disable-next-line media-query-no-invalid */
682
- /* stylelint-disable-next-line at-rule-empty-line-before */
692
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
683
693
  }
684
- @media screen and (min-width: 45em) {
685
- .db-density-regular:not([data-force-mobile]),
686
- [data-density=regular]:not([data-force-mobile]), [data-force-mobile=false].db-density-regular,
687
- [data-force-mobile=false][data-density=regular] {
688
- --db-type-body-font-size-3xs: var(--db-typography-regular-tablet-body-3xs-font-size);
689
- --db-type-body-line-height-3xs: var(--db-typography-regular-tablet-body-3xs-line-height);
690
- --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-body-3xs);
691
- --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-body-3xs);
692
- --db-type-body-font-size-2xs: var(--db-typography-regular-tablet-body-2xs-font-size);
693
- --db-type-body-line-height-2xs: var(--db-typography-regular-tablet-body-2xs-line-height);
694
- --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-regular-mobile-body-2xs);
695
- --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-regular-mobile-body-2xs);
696
- --db-type-body-font-size-xs: var(--db-typography-regular-tablet-body-xs-font-size);
697
- --db-type-body-line-height-xs: var(--db-typography-regular-tablet-body-xs-line-height);
698
- --db-base-body-icon-weight-xs: var(--db-base-icon-weight-regular-mobile-body-xs);
699
- --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-regular-mobile-body-xs);
700
- --db-type-body-font-size-sm: var(--db-typography-regular-tablet-body-sm-font-size);
701
- --db-type-body-line-height-sm: var(--db-typography-regular-tablet-body-sm-line-height);
702
- --db-base-body-icon-weight-sm: var(--db-base-icon-weight-regular-mobile-body-sm);
703
- --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-regular-mobile-body-sm);
704
- --db-type-body-font-size-md: var(--db-typography-regular-tablet-body-md-font-size);
705
- --db-type-body-line-height-md: var(--db-typography-regular-tablet-body-md-line-height);
706
- --db-base-body-icon-weight-md: var(--db-base-icon-weight-regular-mobile-body-md);
707
- --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-regular-mobile-body-md);
708
- --db-type-body-font-size-lg: var(--db-typography-regular-tablet-body-lg-font-size);
709
- --db-type-body-line-height-lg: var(--db-typography-regular-tablet-body-lg-line-height);
710
- --db-base-body-icon-weight-lg: var(--db-base-icon-weight-regular-mobile-body-lg);
711
- --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-regular-mobile-body-lg);
712
- --db-type-body-font-size-xl: var(--db-typography-regular-tablet-body-xl-font-size);
713
- --db-type-body-line-height-xl: var(--db-typography-regular-tablet-body-xl-line-height);
714
- --db-base-body-icon-weight-xl: var(--db-base-icon-weight-regular-mobile-body-xl);
715
- --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-regular-mobile-body-xl);
716
- --db-type-body-font-size-2xl: var(--db-typography-regular-tablet-body-2xl-font-size);
717
- --db-type-body-line-height-2xl: var(--db-typography-regular-tablet-body-2xl-line-height);
718
- --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-regular-mobile-body-2xl);
719
- --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-regular-mobile-body-2xl);
720
- --db-type-body-font-size-3xl: var(--db-typography-regular-tablet-body-3xl-font-size);
721
- --db-type-body-line-height-3xl: var(--db-typography-regular-tablet-body-3xl-line-height);
722
- --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-regular-mobile-body-3xl);
723
- --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-body-3xl);
694
+ @layer variables {
695
+ .db-density-regular,
696
+ [data-density=regular] {
697
+ /* stylelint-disable-next-line media-query-no-invalid */
698
+ /* stylelint-disable-next-line at-rule-empty-line-before */
699
+ /* stylelint-disable-next-line media-query-no-invalid */
700
+ /* stylelint-disable-next-line at-rule-empty-line-before */
701
+ /* stylelint-disable-next-line media-query-no-invalid */
702
+ /* stylelint-disable-next-line at-rule-empty-line-before */
724
703
  }
725
- }
726
- @media screen and (min-width: 64em) {
727
- .db-density-regular:not([data-force-mobile]),
728
- [data-density=regular]:not([data-force-mobile]), [data-force-mobile=false].db-density-regular,
729
- [data-force-mobile=false][data-density=regular] {
730
- --db-type-body-font-size-3xs: var(--db-typography-regular-desktop-body-3xs-font-size);
731
- --db-type-body-line-height-3xs: var(--db-typography-regular-desktop-body-3xs-line-height);
732
- --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-body-3xs);
733
- --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-body-3xs);
734
- --db-type-body-font-size-2xs: var(--db-typography-regular-desktop-body-2xs-font-size);
735
- --db-type-body-line-height-2xs: var(--db-typography-regular-desktop-body-2xs-line-height);
736
- --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-regular-mobile-body-2xs);
737
- --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-regular-mobile-body-2xs);
738
- --db-type-body-font-size-xs: var(--db-typography-regular-desktop-body-xs-font-size);
739
- --db-type-body-line-height-xs: var(--db-typography-regular-desktop-body-xs-line-height);
740
- --db-base-body-icon-weight-xs: var(--db-base-icon-weight-regular-mobile-body-xs);
741
- --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-regular-mobile-body-xs);
742
- --db-type-body-font-size-sm: var(--db-typography-regular-desktop-body-sm-font-size);
743
- --db-type-body-line-height-sm: var(--db-typography-regular-desktop-body-sm-line-height);
744
- --db-base-body-icon-weight-sm: var(--db-base-icon-weight-regular-mobile-body-sm);
745
- --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-regular-mobile-body-sm);
746
- --db-type-body-font-size-md: var(--db-typography-regular-desktop-body-md-font-size);
747
- --db-type-body-line-height-md: var(--db-typography-regular-desktop-body-md-line-height);
748
- --db-base-body-icon-weight-md: var(--db-base-icon-weight-regular-mobile-body-md);
749
- --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-regular-mobile-body-md);
750
- --db-type-body-font-size-lg: var(--db-typography-regular-desktop-body-lg-font-size);
751
- --db-type-body-line-height-lg: var(--db-typography-regular-desktop-body-lg-line-height);
752
- --db-base-body-icon-weight-lg: var(--db-base-icon-weight-regular-mobile-body-lg);
753
- --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-regular-mobile-body-lg);
754
- --db-type-body-font-size-xl: var(--db-typography-regular-desktop-body-xl-font-size);
755
- --db-type-body-line-height-xl: var(--db-typography-regular-desktop-body-xl-line-height);
756
- --db-base-body-icon-weight-xl: var(--db-base-icon-weight-regular-mobile-body-xl);
757
- --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-regular-mobile-body-xl);
758
- --db-type-body-font-size-2xl: var(--db-typography-regular-desktop-body-2xl-font-size);
759
- --db-type-body-line-height-2xl: var(--db-typography-regular-desktop-body-2xl-line-height);
760
- --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-regular-mobile-body-2xl);
761
- --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-regular-mobile-body-2xl);
762
- --db-type-body-font-size-3xl: var(--db-typography-regular-desktop-body-3xl-font-size);
763
- --db-type-body-line-height-3xl: var(--db-typography-regular-desktop-body-3xl-line-height);
764
- --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-regular-mobile-body-3xl);
765
- --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-body-3xl);
704
+ @media screen and (width <= 45em) {
705
+ .db-density-regular,
706
+ [data-density=regular] {
707
+ --db-type-body-3xs: var(--db-typography-regular-mobile-body-3xs);
708
+ --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-mobile-body-3xs);
709
+ --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-mobile-body-3xs);
710
+ --db-type-body-2xs: var(--db-typography-regular-mobile-body-2xs);
711
+ --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-regular-mobile-body-2xs);
712
+ --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-regular-mobile-body-2xs);
713
+ --db-type-body-xs: var(--db-typography-regular-mobile-body-xs);
714
+ --db-base-body-icon-weight-xs: var(--db-base-icon-weight-regular-mobile-body-xs);
715
+ --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-regular-mobile-body-xs);
716
+ --db-type-body-sm: var(--db-typography-regular-mobile-body-sm);
717
+ --db-base-body-icon-weight-sm: var(--db-base-icon-weight-regular-mobile-body-sm);
718
+ --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-regular-mobile-body-sm);
719
+ --db-type-body-md: var(--db-typography-regular-mobile-body-md);
720
+ --db-base-body-icon-weight-md: var(--db-base-icon-weight-regular-mobile-body-md);
721
+ --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-regular-mobile-body-md);
722
+ --db-type-body-lg: var(--db-typography-regular-mobile-body-lg);
723
+ --db-base-body-icon-weight-lg: var(--db-base-icon-weight-regular-mobile-body-lg);
724
+ --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-regular-mobile-body-lg);
725
+ --db-type-body-xl: var(--db-typography-regular-mobile-body-xl);
726
+ --db-base-body-icon-weight-xl: var(--db-base-icon-weight-regular-mobile-body-xl);
727
+ --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-regular-mobile-body-xl);
728
+ --db-type-body-2xl: var(--db-typography-regular-mobile-body-2xl);
729
+ --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-regular-mobile-body-2xl);
730
+ --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-regular-mobile-body-2xl);
731
+ --db-type-body-3xl: var(--db-typography-regular-mobile-body-3xl);
732
+ --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-regular-mobile-body-3xl);
733
+ --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-regular-mobile-body-3xl);
734
+ }
735
+ }
736
+ @media screen and (45em < width <= 64em) {
737
+ .db-density-regular,
738
+ [data-density=regular] {
739
+ --db-type-body-3xs: var(--db-typography-regular-tablet-body-3xs);
740
+ --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-tablet-body-3xs);
741
+ --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-tablet-body-3xs);
742
+ --db-type-body-2xs: var(--db-typography-regular-tablet-body-2xs);
743
+ --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-regular-tablet-body-2xs);
744
+ --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-regular-tablet-body-2xs);
745
+ --db-type-body-xs: var(--db-typography-regular-tablet-body-xs);
746
+ --db-base-body-icon-weight-xs: var(--db-base-icon-weight-regular-tablet-body-xs);
747
+ --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-regular-tablet-body-xs);
748
+ --db-type-body-sm: var(--db-typography-regular-tablet-body-sm);
749
+ --db-base-body-icon-weight-sm: var(--db-base-icon-weight-regular-tablet-body-sm);
750
+ --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-regular-tablet-body-sm);
751
+ --db-type-body-md: var(--db-typography-regular-tablet-body-md);
752
+ --db-base-body-icon-weight-md: var(--db-base-icon-weight-regular-tablet-body-md);
753
+ --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-regular-tablet-body-md);
754
+ --db-type-body-lg: var(--db-typography-regular-tablet-body-lg);
755
+ --db-base-body-icon-weight-lg: var(--db-base-icon-weight-regular-tablet-body-lg);
756
+ --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-regular-tablet-body-lg);
757
+ --db-type-body-xl: var(--db-typography-regular-tablet-body-xl);
758
+ --db-base-body-icon-weight-xl: var(--db-base-icon-weight-regular-tablet-body-xl);
759
+ --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-regular-tablet-body-xl);
760
+ --db-type-body-2xl: var(--db-typography-regular-tablet-body-2xl);
761
+ --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-regular-tablet-body-2xl);
762
+ --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-regular-tablet-body-2xl);
763
+ --db-type-body-3xl: var(--db-typography-regular-tablet-body-3xl);
764
+ --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-regular-tablet-body-3xl);
765
+ --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-regular-tablet-body-3xl);
766
+ }
767
+ }
768
+ @media screen and (64em < width) {
769
+ .db-density-regular,
770
+ [data-density=regular] {
771
+ --db-type-body-3xs: var(--db-typography-regular-desktop-body-3xs);
772
+ --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-regular-desktop-body-3xs);
773
+ --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-regular-desktop-body-3xs);
774
+ --db-type-body-2xs: var(--db-typography-regular-desktop-body-2xs);
775
+ --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-regular-desktop-body-2xs);
776
+ --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-regular-desktop-body-2xs);
777
+ --db-type-body-xs: var(--db-typography-regular-desktop-body-xs);
778
+ --db-base-body-icon-weight-xs: var(--db-base-icon-weight-regular-desktop-body-xs);
779
+ --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-regular-desktop-body-xs);
780
+ --db-type-body-sm: var(--db-typography-regular-desktop-body-sm);
781
+ --db-base-body-icon-weight-sm: var(--db-base-icon-weight-regular-desktop-body-sm);
782
+ --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-regular-desktop-body-sm);
783
+ --db-type-body-md: var(--db-typography-regular-desktop-body-md);
784
+ --db-base-body-icon-weight-md: var(--db-base-icon-weight-regular-desktop-body-md);
785
+ --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-regular-desktop-body-md);
786
+ --db-type-body-lg: var(--db-typography-regular-desktop-body-lg);
787
+ --db-base-body-icon-weight-lg: var(--db-base-icon-weight-regular-desktop-body-lg);
788
+ --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-regular-desktop-body-lg);
789
+ --db-type-body-xl: var(--db-typography-regular-desktop-body-xl);
790
+ --db-base-body-icon-weight-xl: var(--db-base-icon-weight-regular-desktop-body-xl);
791
+ --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-regular-desktop-body-xl);
792
+ --db-type-body-2xl: var(--db-typography-regular-desktop-body-2xl);
793
+ --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-regular-desktop-body-2xl);
794
+ --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-regular-desktop-body-2xl);
795
+ --db-type-body-3xl: var(--db-typography-regular-desktop-body-3xl);
796
+ --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-regular-desktop-body-3xl);
797
+ --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-regular-desktop-body-3xl);
798
+ }
766
799
  }
767
800
  }
768
801
 
769
802
  .db-density-functional,
770
803
  [data-density=functional] {
771
- --db-type-headline-font-size-3xs: var(--db-typography-functional-mobile-headline-3xs-font-size);
772
- --db-type-headline-line-height-3xs: var(--db-typography-functional-mobile-headline-3xs-line-height);
773
- --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-functional-mobile-headline-3xs);
774
- --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-functional-mobile-headline-3xs);
775
- --db-type-headline-font-size-2xs: var(--db-typography-functional-mobile-headline-2xs-font-size);
776
- --db-type-headline-line-height-2xs: var(--db-typography-functional-mobile-headline-2xs-line-height);
777
- --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-functional-mobile-headline-2xs);
778
- --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-functional-mobile-headline-2xs);
779
- --db-type-headline-font-size-xs: var(--db-typography-functional-mobile-headline-xs-font-size);
780
- --db-type-headline-line-height-xs: var(--db-typography-functional-mobile-headline-xs-line-height);
781
- --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-functional-mobile-headline-xs);
782
- --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-functional-mobile-headline-xs);
783
- --db-type-headline-font-size-sm: var(--db-typography-functional-mobile-headline-sm-font-size);
784
- --db-type-headline-line-height-sm: var(--db-typography-functional-mobile-headline-sm-line-height);
785
- --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-functional-mobile-headline-sm);
786
- --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-functional-mobile-headline-sm);
787
- --db-type-headline-font-size-md: var(--db-typography-functional-mobile-headline-md-font-size);
788
- --db-type-headline-line-height-md: var(--db-typography-functional-mobile-headline-md-line-height);
789
- --db-base-headline-icon-weight-md: var(--db-base-icon-weight-functional-mobile-headline-md);
790
- --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-functional-mobile-headline-md);
791
- --db-type-headline-font-size-lg: var(--db-typography-functional-mobile-headline-lg-font-size);
792
- --db-type-headline-line-height-lg: var(--db-typography-functional-mobile-headline-lg-line-height);
793
- --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-functional-mobile-headline-lg);
794
- --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-functional-mobile-headline-lg);
795
- --db-type-headline-font-size-xl: var(--db-typography-functional-mobile-headline-xl-font-size);
796
- --db-type-headline-line-height-xl: var(--db-typography-functional-mobile-headline-xl-line-height);
797
- --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-functional-mobile-headline-xl);
798
- --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-functional-mobile-headline-xl);
799
- --db-type-headline-font-size-2xl: var(--db-typography-functional-mobile-headline-2xl-font-size);
800
- --db-type-headline-line-height-2xl: var(--db-typography-functional-mobile-headline-2xl-line-height);
801
- --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-functional-mobile-headline-2xl);
802
- --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-functional-mobile-headline-2xl);
803
- --db-type-headline-font-size-3xl: var(--db-typography-functional-mobile-headline-3xl-font-size);
804
- --db-type-headline-line-height-3xl: var(--db-typography-functional-mobile-headline-3xl-line-height);
805
- --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-functional-mobile-headline-3xl);
806
- --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-functional-mobile-headline-3xl);
807
- /* stylelint-disable at-rule-empty-line-before */
808
- /* stylelint-enable at-rule-empty-line-before */
809
- /* stylelint-disable-next-line media-query-no-invalid */
810
- /* stylelint-disable-next-line at-rule-empty-line-before */
811
- /* stylelint-disable at-rule-empty-line-before */
812
- /* stylelint-enable at-rule-empty-line-before */
813
- /* stylelint-disable-next-line media-query-no-invalid */
814
- /* stylelint-disable-next-line at-rule-empty-line-before */
804
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
815
805
  }
816
- @media screen and (min-width: 45em) {
817
- .db-density-functional:not([data-force-mobile]),
818
- [data-density=functional]:not([data-force-mobile]), [data-force-mobile=false].db-density-functional,
819
- [data-force-mobile=false][data-density=functional] {
820
- --db-type-headline-font-size-3xs: var(--db-typography-functional-tablet-headline-3xs-font-size);
821
- --db-type-headline-line-height-3xs: var(--db-typography-functional-tablet-headline-3xs-line-height);
822
- --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-functional-tablet-headline-3xs);
823
- --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-functional-tablet-headline-3xs);
824
- --db-type-headline-font-size-2xs: var(--db-typography-functional-tablet-headline-2xs-font-size);
825
- --db-type-headline-line-height-2xs: var(--db-typography-functional-tablet-headline-2xs-line-height);
826
- --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-functional-tablet-headline-2xs);
827
- --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-functional-tablet-headline-2xs);
828
- --db-type-headline-font-size-xs: var(--db-typography-functional-tablet-headline-xs-font-size);
829
- --db-type-headline-line-height-xs: var(--db-typography-functional-tablet-headline-xs-line-height);
830
- --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-functional-tablet-headline-xs);
831
- --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-functional-tablet-headline-xs);
832
- --db-type-headline-font-size-sm: var(--db-typography-functional-tablet-headline-sm-font-size);
833
- --db-type-headline-line-height-sm: var(--db-typography-functional-tablet-headline-sm-line-height);
834
- --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-functional-tablet-headline-sm);
835
- --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-functional-tablet-headline-sm);
836
- --db-type-headline-font-size-md: var(--db-typography-functional-tablet-headline-md-font-size);
837
- --db-type-headline-line-height-md: var(--db-typography-functional-tablet-headline-md-line-height);
838
- --db-base-headline-icon-weight-md: var(--db-base-icon-weight-functional-tablet-headline-md);
839
- --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-functional-tablet-headline-md);
840
- --db-type-headline-font-size-lg: var(--db-typography-functional-tablet-headline-lg-font-size);
841
- --db-type-headline-line-height-lg: var(--db-typography-functional-tablet-headline-lg-line-height);
842
- --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-functional-tablet-headline-lg);
843
- --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-functional-tablet-headline-lg);
844
- --db-type-headline-font-size-xl: var(--db-typography-functional-tablet-headline-xl-font-size);
845
- --db-type-headline-line-height-xl: var(--db-typography-functional-tablet-headline-xl-line-height);
846
- --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-functional-tablet-headline-xl);
847
- --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-functional-tablet-headline-xl);
848
- --db-type-headline-font-size-2xl: var(--db-typography-functional-tablet-headline-2xl-font-size);
849
- --db-type-headline-line-height-2xl: var(--db-typography-functional-tablet-headline-2xl-line-height);
850
- --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-functional-tablet-headline-2xl);
851
- --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-functional-tablet-headline-2xl);
852
- --db-type-headline-font-size-3xl: var(--db-typography-functional-tablet-headline-3xl-font-size);
853
- --db-type-headline-line-height-3xl: var(--db-typography-functional-tablet-headline-3xl-line-height);
854
- --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-functional-tablet-headline-3xl);
855
- --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-functional-tablet-headline-3xl);
806
+ @layer variables {
807
+ .db-density-functional,
808
+ [data-density=functional] {
809
+ /* stylelint-disable-next-line media-query-no-invalid */
810
+ /* stylelint-disable-next-line at-rule-empty-line-before */
811
+ /* stylelint-disable-next-line media-query-no-invalid */
812
+ /* stylelint-disable-next-line at-rule-empty-line-before */
813
+ /* stylelint-disable-next-line media-query-no-invalid */
814
+ /* stylelint-disable-next-line at-rule-empty-line-before */
856
815
  }
857
- }
858
- @media screen and (min-width: 64em) {
859
- .db-density-functional:not([data-force-mobile]),
860
- [data-density=functional]:not([data-force-mobile]), [data-force-mobile=false].db-density-functional,
861
- [data-force-mobile=false][data-density=functional] {
862
- --db-type-headline-font-size-3xs: var(--db-typography-functional-desktop-headline-3xs-font-size);
863
- --db-type-headline-line-height-3xs: var(--db-typography-functional-desktop-headline-3xs-line-height);
864
- --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-functional-desktop-headline-3xs);
865
- --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-functional-desktop-headline-3xs);
866
- --db-type-headline-font-size-2xs: var(--db-typography-functional-desktop-headline-2xs-font-size);
867
- --db-type-headline-line-height-2xs: var(--db-typography-functional-desktop-headline-2xs-line-height);
868
- --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-functional-desktop-headline-2xs);
869
- --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-functional-desktop-headline-2xs);
870
- --db-type-headline-font-size-xs: var(--db-typography-functional-desktop-headline-xs-font-size);
871
- --db-type-headline-line-height-xs: var(--db-typography-functional-desktop-headline-xs-line-height);
872
- --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-functional-desktop-headline-xs);
873
- --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-functional-desktop-headline-xs);
874
- --db-type-headline-font-size-sm: var(--db-typography-functional-desktop-headline-sm-font-size);
875
- --db-type-headline-line-height-sm: var(--db-typography-functional-desktop-headline-sm-line-height);
876
- --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-functional-desktop-headline-sm);
877
- --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-functional-desktop-headline-sm);
878
- --db-type-headline-font-size-md: var(--db-typography-functional-desktop-headline-md-font-size);
879
- --db-type-headline-line-height-md: var(--db-typography-functional-desktop-headline-md-line-height);
880
- --db-base-headline-icon-weight-md: var(--db-base-icon-weight-functional-desktop-headline-md);
881
- --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-functional-desktop-headline-md);
882
- --db-type-headline-font-size-lg: var(--db-typography-functional-desktop-headline-lg-font-size);
883
- --db-type-headline-line-height-lg: var(--db-typography-functional-desktop-headline-lg-line-height);
884
- --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-functional-desktop-headline-lg);
885
- --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-functional-desktop-headline-lg);
886
- --db-type-headline-font-size-xl: var(--db-typography-functional-desktop-headline-xl-font-size);
887
- --db-type-headline-line-height-xl: var(--db-typography-functional-desktop-headline-xl-line-height);
888
- --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-functional-desktop-headline-xl);
889
- --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-functional-desktop-headline-xl);
890
- --db-type-headline-font-size-2xl: var(--db-typography-functional-desktop-headline-2xl-font-size);
891
- --db-type-headline-line-height-2xl: var(--db-typography-functional-desktop-headline-2xl-line-height);
892
- --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-functional-desktop-headline-2xl);
893
- --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-functional-desktop-headline-2xl);
894
- --db-type-headline-font-size-3xl: var(--db-typography-functional-desktop-headline-3xl-font-size);
895
- --db-type-headline-line-height-3xl: var(--db-typography-functional-desktop-headline-3xl-line-height);
896
- --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-functional-desktop-headline-3xl);
897
- --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-functional-desktop-headline-3xl);
816
+ @media screen and (width <= 45em) {
817
+ .db-density-functional,
818
+ [data-density=functional] {
819
+ --db-type-headline-3xs: var(--db-typography-functional-mobile-headline-3xs);
820
+ --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-functional-mobile-headline-3xs);
821
+ --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-functional-mobile-headline-3xs);
822
+ --db-type-headline-2xs: var(--db-typography-functional-mobile-headline-2xs);
823
+ --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-functional-mobile-headline-2xs);
824
+ --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-functional-mobile-headline-2xs);
825
+ --db-type-headline-xs: var(--db-typography-functional-mobile-headline-xs);
826
+ --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-functional-mobile-headline-xs);
827
+ --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-functional-mobile-headline-xs);
828
+ --db-type-headline-sm: var(--db-typography-functional-mobile-headline-sm);
829
+ --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-functional-mobile-headline-sm);
830
+ --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-functional-mobile-headline-sm);
831
+ --db-type-headline-md: var(--db-typography-functional-mobile-headline-md);
832
+ --db-base-headline-icon-weight-md: var(--db-base-icon-weight-functional-mobile-headline-md);
833
+ --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-functional-mobile-headline-md);
834
+ --db-type-headline-lg: var(--db-typography-functional-mobile-headline-lg);
835
+ --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-functional-mobile-headline-lg);
836
+ --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-functional-mobile-headline-lg);
837
+ --db-type-headline-xl: var(--db-typography-functional-mobile-headline-xl);
838
+ --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-functional-mobile-headline-xl);
839
+ --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-functional-mobile-headline-xl);
840
+ --db-type-headline-2xl: var(--db-typography-functional-mobile-headline-2xl);
841
+ --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-functional-mobile-headline-2xl);
842
+ --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-functional-mobile-headline-2xl);
843
+ --db-type-headline-3xl: var(--db-typography-functional-mobile-headline-3xl);
844
+ --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-functional-mobile-headline-3xl);
845
+ --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-functional-mobile-headline-3xl);
846
+ }
847
+ }
848
+ @media screen and (45em < width <= 64em) {
849
+ .db-density-functional,
850
+ [data-density=functional] {
851
+ --db-type-headline-3xs: var(--db-typography-functional-tablet-headline-3xs);
852
+ --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-functional-tablet-headline-3xs);
853
+ --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-functional-tablet-headline-3xs);
854
+ --db-type-headline-2xs: var(--db-typography-functional-tablet-headline-2xs);
855
+ --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-functional-tablet-headline-2xs);
856
+ --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-functional-tablet-headline-2xs);
857
+ --db-type-headline-xs: var(--db-typography-functional-tablet-headline-xs);
858
+ --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-functional-tablet-headline-xs);
859
+ --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-functional-tablet-headline-xs);
860
+ --db-type-headline-sm: var(--db-typography-functional-tablet-headline-sm);
861
+ --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-functional-tablet-headline-sm);
862
+ --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-functional-tablet-headline-sm);
863
+ --db-type-headline-md: var(--db-typography-functional-tablet-headline-md);
864
+ --db-base-headline-icon-weight-md: var(--db-base-icon-weight-functional-tablet-headline-md);
865
+ --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-functional-tablet-headline-md);
866
+ --db-type-headline-lg: var(--db-typography-functional-tablet-headline-lg);
867
+ --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-functional-tablet-headline-lg);
868
+ --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-functional-tablet-headline-lg);
869
+ --db-type-headline-xl: var(--db-typography-functional-tablet-headline-xl);
870
+ --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-functional-tablet-headline-xl);
871
+ --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-functional-tablet-headline-xl);
872
+ --db-type-headline-2xl: var(--db-typography-functional-tablet-headline-2xl);
873
+ --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-functional-tablet-headline-2xl);
874
+ --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-functional-tablet-headline-2xl);
875
+ --db-type-headline-3xl: var(--db-typography-functional-tablet-headline-3xl);
876
+ --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-functional-tablet-headline-3xl);
877
+ --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-functional-tablet-headline-3xl);
878
+ }
879
+ }
880
+ @media screen and (64em < width) {
881
+ .db-density-functional,
882
+ [data-density=functional] {
883
+ --db-type-headline-3xs: var(--db-typography-functional-desktop-headline-3xs);
884
+ --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-functional-desktop-headline-3xs);
885
+ --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-functional-desktop-headline-3xs);
886
+ --db-type-headline-2xs: var(--db-typography-functional-desktop-headline-2xs);
887
+ --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-functional-desktop-headline-2xs);
888
+ --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-functional-desktop-headline-2xs);
889
+ --db-type-headline-xs: var(--db-typography-functional-desktop-headline-xs);
890
+ --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-functional-desktop-headline-xs);
891
+ --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-functional-desktop-headline-xs);
892
+ --db-type-headline-sm: var(--db-typography-functional-desktop-headline-sm);
893
+ --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-functional-desktop-headline-sm);
894
+ --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-functional-desktop-headline-sm);
895
+ --db-type-headline-md: var(--db-typography-functional-desktop-headline-md);
896
+ --db-base-headline-icon-weight-md: var(--db-base-icon-weight-functional-desktop-headline-md);
897
+ --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-functional-desktop-headline-md);
898
+ --db-type-headline-lg: var(--db-typography-functional-desktop-headline-lg);
899
+ --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-functional-desktop-headline-lg);
900
+ --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-functional-desktop-headline-lg);
901
+ --db-type-headline-xl: var(--db-typography-functional-desktop-headline-xl);
902
+ --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-functional-desktop-headline-xl);
903
+ --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-functional-desktop-headline-xl);
904
+ --db-type-headline-2xl: var(--db-typography-functional-desktop-headline-2xl);
905
+ --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-functional-desktop-headline-2xl);
906
+ --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-functional-desktop-headline-2xl);
907
+ --db-type-headline-3xl: var(--db-typography-functional-desktop-headline-3xl);
908
+ --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-functional-desktop-headline-3xl);
909
+ --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-functional-desktop-headline-3xl);
910
+ }
898
911
  }
899
912
  }
900
913
 
901
914
  .db-density-functional,
902
915
  [data-density=functional] {
903
- --db-type-body-font-size-3xs: var(--db-typography-functional-mobile-body-3xs-font-size);
904
- --db-type-body-line-height-3xs: var(--db-typography-functional-mobile-body-3xs-line-height);
905
- --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-functional-mobile-body-3xs);
906
- --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-functional-mobile-body-3xs);
907
- --db-type-body-font-size-2xs: var(--db-typography-functional-mobile-body-2xs-font-size);
908
- --db-type-body-line-height-2xs: var(--db-typography-functional-mobile-body-2xs-line-height);
909
- --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-functional-mobile-body-2xs);
910
- --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-functional-mobile-body-2xs);
911
- --db-type-body-font-size-xs: var(--db-typography-functional-mobile-body-xs-font-size);
912
- --db-type-body-line-height-xs: var(--db-typography-functional-mobile-body-xs-line-height);
913
- --db-base-body-icon-weight-xs: var(--db-base-icon-weight-functional-mobile-body-xs);
914
- --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-functional-mobile-body-xs);
915
- --db-type-body-font-size-sm: var(--db-typography-functional-mobile-body-sm-font-size);
916
- --db-type-body-line-height-sm: var(--db-typography-functional-mobile-body-sm-line-height);
917
- --db-base-body-icon-weight-sm: var(--db-base-icon-weight-functional-mobile-body-sm);
918
- --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-functional-mobile-body-sm);
919
- --db-type-body-font-size-md: var(--db-typography-functional-mobile-body-md-font-size);
920
- --db-type-body-line-height-md: var(--db-typography-functional-mobile-body-md-line-height);
921
- --db-base-body-icon-weight-md: var(--db-base-icon-weight-functional-mobile-body-md);
922
- --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-functional-mobile-body-md);
923
- --db-type-body-font-size-lg: var(--db-typography-functional-mobile-body-lg-font-size);
924
- --db-type-body-line-height-lg: var(--db-typography-functional-mobile-body-lg-line-height);
925
- --db-base-body-icon-weight-lg: var(--db-base-icon-weight-functional-mobile-body-lg);
926
- --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-functional-mobile-body-lg);
927
- --db-type-body-font-size-xl: var(--db-typography-functional-mobile-body-xl-font-size);
928
- --db-type-body-line-height-xl: var(--db-typography-functional-mobile-body-xl-line-height);
929
- --db-base-body-icon-weight-xl: var(--db-base-icon-weight-functional-mobile-body-xl);
930
- --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-functional-mobile-body-xl);
931
- --db-type-body-font-size-2xl: var(--db-typography-functional-mobile-body-2xl-font-size);
932
- --db-type-body-line-height-2xl: var(--db-typography-functional-mobile-body-2xl-line-height);
933
- --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-functional-mobile-body-2xl);
934
- --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-functional-mobile-body-2xl);
935
- --db-type-body-font-size-3xl: var(--db-typography-functional-mobile-body-3xl-font-size);
936
- --db-type-body-line-height-3xl: var(--db-typography-functional-mobile-body-3xl-line-height);
937
- --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-functional-mobile-body-3xl);
938
- --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-functional-mobile-body-3xl);
939
- /* stylelint-disable at-rule-empty-line-before */
940
- /* stylelint-enable at-rule-empty-line-before */
941
- /* stylelint-disable-next-line media-query-no-invalid */
942
- /* stylelint-disable-next-line at-rule-empty-line-before */
943
- /* stylelint-disable at-rule-empty-line-before */
944
- /* stylelint-enable at-rule-empty-line-before */
945
- /* stylelint-disable-next-line media-query-no-invalid */
946
- /* stylelint-disable-next-line at-rule-empty-line-before */
916
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
947
917
  }
948
- @media screen and (min-width: 45em) {
949
- .db-density-functional:not([data-force-mobile]),
950
- [data-density=functional]:not([data-force-mobile]), [data-force-mobile=false].db-density-functional,
951
- [data-force-mobile=false][data-density=functional] {
952
- --db-type-body-font-size-3xs: var(--db-typography-functional-tablet-body-3xs-font-size);
953
- --db-type-body-line-height-3xs: var(--db-typography-functional-tablet-body-3xs-line-height);
954
- --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-functional-mobile-body-3xs);
955
- --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-functional-mobile-body-3xs);
956
- --db-type-body-font-size-2xs: var(--db-typography-functional-tablet-body-2xs-font-size);
957
- --db-type-body-line-height-2xs: var(--db-typography-functional-tablet-body-2xs-line-height);
958
- --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-functional-mobile-body-2xs);
959
- --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-functional-mobile-body-2xs);
960
- --db-type-body-font-size-xs: var(--db-typography-functional-tablet-body-xs-font-size);
961
- --db-type-body-line-height-xs: var(--db-typography-functional-tablet-body-xs-line-height);
962
- --db-base-body-icon-weight-xs: var(--db-base-icon-weight-functional-mobile-body-xs);
963
- --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-functional-mobile-body-xs);
964
- --db-type-body-font-size-sm: var(--db-typography-functional-tablet-body-sm-font-size);
965
- --db-type-body-line-height-sm: var(--db-typography-functional-tablet-body-sm-line-height);
966
- --db-base-body-icon-weight-sm: var(--db-base-icon-weight-functional-mobile-body-sm);
967
- --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-functional-mobile-body-sm);
968
- --db-type-body-font-size-md: var(--db-typography-functional-tablet-body-md-font-size);
969
- --db-type-body-line-height-md: var(--db-typography-functional-tablet-body-md-line-height);
970
- --db-base-body-icon-weight-md: var(--db-base-icon-weight-functional-mobile-body-md);
971
- --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-functional-mobile-body-md);
972
- --db-type-body-font-size-lg: var(--db-typography-functional-tablet-body-lg-font-size);
973
- --db-type-body-line-height-lg: var(--db-typography-functional-tablet-body-lg-line-height);
974
- --db-base-body-icon-weight-lg: var(--db-base-icon-weight-functional-mobile-body-lg);
975
- --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-functional-mobile-body-lg);
976
- --db-type-body-font-size-xl: var(--db-typography-functional-tablet-body-xl-font-size);
977
- --db-type-body-line-height-xl: var(--db-typography-functional-tablet-body-xl-line-height);
978
- --db-base-body-icon-weight-xl: var(--db-base-icon-weight-functional-mobile-body-xl);
979
- --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-functional-mobile-body-xl);
980
- --db-type-body-font-size-2xl: var(--db-typography-functional-tablet-body-2xl-font-size);
981
- --db-type-body-line-height-2xl: var(--db-typography-functional-tablet-body-2xl-line-height);
982
- --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-functional-mobile-body-2xl);
983
- --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-functional-mobile-body-2xl);
984
- --db-type-body-font-size-3xl: var(--db-typography-functional-tablet-body-3xl-font-size);
985
- --db-type-body-line-height-3xl: var(--db-typography-functional-tablet-body-3xl-line-height);
986
- --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-functional-mobile-body-3xl);
987
- --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-functional-mobile-body-3xl);
918
+ @layer variables {
919
+ .db-density-functional,
920
+ [data-density=functional] {
921
+ /* stylelint-disable-next-line media-query-no-invalid */
922
+ /* stylelint-disable-next-line at-rule-empty-line-before */
923
+ /* stylelint-disable-next-line media-query-no-invalid */
924
+ /* stylelint-disable-next-line at-rule-empty-line-before */
925
+ /* stylelint-disable-next-line media-query-no-invalid */
926
+ /* stylelint-disable-next-line at-rule-empty-line-before */
988
927
  }
989
- }
990
- @media screen and (min-width: 64em) {
991
- .db-density-functional:not([data-force-mobile]),
992
- [data-density=functional]:not([data-force-mobile]), [data-force-mobile=false].db-density-functional,
993
- [data-force-mobile=false][data-density=functional] {
994
- --db-type-body-font-size-3xs: var(--db-typography-functional-desktop-body-3xs-font-size);
995
- --db-type-body-line-height-3xs: var(--db-typography-functional-desktop-body-3xs-line-height);
996
- --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-functional-mobile-body-3xs);
997
- --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-functional-mobile-body-3xs);
998
- --db-type-body-font-size-2xs: var(--db-typography-functional-desktop-body-2xs-font-size);
999
- --db-type-body-line-height-2xs: var(--db-typography-functional-desktop-body-2xs-line-height);
1000
- --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-functional-mobile-body-2xs);
1001
- --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-functional-mobile-body-2xs);
1002
- --db-type-body-font-size-xs: var(--db-typography-functional-desktop-body-xs-font-size);
1003
- --db-type-body-line-height-xs: var(--db-typography-functional-desktop-body-xs-line-height);
1004
- --db-base-body-icon-weight-xs: var(--db-base-icon-weight-functional-mobile-body-xs);
1005
- --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-functional-mobile-body-xs);
1006
- --db-type-body-font-size-sm: var(--db-typography-functional-desktop-body-sm-font-size);
1007
- --db-type-body-line-height-sm: var(--db-typography-functional-desktop-body-sm-line-height);
1008
- --db-base-body-icon-weight-sm: var(--db-base-icon-weight-functional-mobile-body-sm);
1009
- --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-functional-mobile-body-sm);
1010
- --db-type-body-font-size-md: var(--db-typography-functional-desktop-body-md-font-size);
1011
- --db-type-body-line-height-md: var(--db-typography-functional-desktop-body-md-line-height);
1012
- --db-base-body-icon-weight-md: var(--db-base-icon-weight-functional-mobile-body-md);
1013
- --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-functional-mobile-body-md);
1014
- --db-type-body-font-size-lg: var(--db-typography-functional-desktop-body-lg-font-size);
1015
- --db-type-body-line-height-lg: var(--db-typography-functional-desktop-body-lg-line-height);
1016
- --db-base-body-icon-weight-lg: var(--db-base-icon-weight-functional-mobile-body-lg);
1017
- --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-functional-mobile-body-lg);
1018
- --db-type-body-font-size-xl: var(--db-typography-functional-desktop-body-xl-font-size);
1019
- --db-type-body-line-height-xl: var(--db-typography-functional-desktop-body-xl-line-height);
1020
- --db-base-body-icon-weight-xl: var(--db-base-icon-weight-functional-mobile-body-xl);
1021
- --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-functional-mobile-body-xl);
1022
- --db-type-body-font-size-2xl: var(--db-typography-functional-desktop-body-2xl-font-size);
1023
- --db-type-body-line-height-2xl: var(--db-typography-functional-desktop-body-2xl-line-height);
1024
- --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-functional-mobile-body-2xl);
1025
- --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-functional-mobile-body-2xl);
1026
- --db-type-body-font-size-3xl: var(--db-typography-functional-desktop-body-3xl-font-size);
1027
- --db-type-body-line-height-3xl: var(--db-typography-functional-desktop-body-3xl-line-height);
1028
- --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-functional-mobile-body-3xl);
1029
- --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-functional-mobile-body-3xl);
928
+ @media screen and (width <= 45em) {
929
+ .db-density-functional,
930
+ [data-density=functional] {
931
+ --db-type-body-3xs: var(--db-typography-functional-mobile-body-3xs);
932
+ --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-functional-mobile-body-3xs);
933
+ --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-functional-mobile-body-3xs);
934
+ --db-type-body-2xs: var(--db-typography-functional-mobile-body-2xs);
935
+ --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-functional-mobile-body-2xs);
936
+ --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-functional-mobile-body-2xs);
937
+ --db-type-body-xs: var(--db-typography-functional-mobile-body-xs);
938
+ --db-base-body-icon-weight-xs: var(--db-base-icon-weight-functional-mobile-body-xs);
939
+ --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-functional-mobile-body-xs);
940
+ --db-type-body-sm: var(--db-typography-functional-mobile-body-sm);
941
+ --db-base-body-icon-weight-sm: var(--db-base-icon-weight-functional-mobile-body-sm);
942
+ --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-functional-mobile-body-sm);
943
+ --db-type-body-md: var(--db-typography-functional-mobile-body-md);
944
+ --db-base-body-icon-weight-md: var(--db-base-icon-weight-functional-mobile-body-md);
945
+ --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-functional-mobile-body-md);
946
+ --db-type-body-lg: var(--db-typography-functional-mobile-body-lg);
947
+ --db-base-body-icon-weight-lg: var(--db-base-icon-weight-functional-mobile-body-lg);
948
+ --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-functional-mobile-body-lg);
949
+ --db-type-body-xl: var(--db-typography-functional-mobile-body-xl);
950
+ --db-base-body-icon-weight-xl: var(--db-base-icon-weight-functional-mobile-body-xl);
951
+ --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-functional-mobile-body-xl);
952
+ --db-type-body-2xl: var(--db-typography-functional-mobile-body-2xl);
953
+ --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-functional-mobile-body-2xl);
954
+ --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-functional-mobile-body-2xl);
955
+ --db-type-body-3xl: var(--db-typography-functional-mobile-body-3xl);
956
+ --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-functional-mobile-body-3xl);
957
+ --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-functional-mobile-body-3xl);
958
+ }
959
+ }
960
+ @media screen and (45em < width <= 64em) {
961
+ .db-density-functional,
962
+ [data-density=functional] {
963
+ --db-type-body-3xs: var(--db-typography-functional-tablet-body-3xs);
964
+ --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-functional-tablet-body-3xs);
965
+ --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-functional-tablet-body-3xs);
966
+ --db-type-body-2xs: var(--db-typography-functional-tablet-body-2xs);
967
+ --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-functional-tablet-body-2xs);
968
+ --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-functional-tablet-body-2xs);
969
+ --db-type-body-xs: var(--db-typography-functional-tablet-body-xs);
970
+ --db-base-body-icon-weight-xs: var(--db-base-icon-weight-functional-tablet-body-xs);
971
+ --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-functional-tablet-body-xs);
972
+ --db-type-body-sm: var(--db-typography-functional-tablet-body-sm);
973
+ --db-base-body-icon-weight-sm: var(--db-base-icon-weight-functional-tablet-body-sm);
974
+ --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-functional-tablet-body-sm);
975
+ --db-type-body-md: var(--db-typography-functional-tablet-body-md);
976
+ --db-base-body-icon-weight-md: var(--db-base-icon-weight-functional-tablet-body-md);
977
+ --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-functional-tablet-body-md);
978
+ --db-type-body-lg: var(--db-typography-functional-tablet-body-lg);
979
+ --db-base-body-icon-weight-lg: var(--db-base-icon-weight-functional-tablet-body-lg);
980
+ --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-functional-tablet-body-lg);
981
+ --db-type-body-xl: var(--db-typography-functional-tablet-body-xl);
982
+ --db-base-body-icon-weight-xl: var(--db-base-icon-weight-functional-tablet-body-xl);
983
+ --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-functional-tablet-body-xl);
984
+ --db-type-body-2xl: var(--db-typography-functional-tablet-body-2xl);
985
+ --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-functional-tablet-body-2xl);
986
+ --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-functional-tablet-body-2xl);
987
+ --db-type-body-3xl: var(--db-typography-functional-tablet-body-3xl);
988
+ --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-functional-tablet-body-3xl);
989
+ --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-functional-tablet-body-3xl);
990
+ }
991
+ }
992
+ @media screen and (64em < width) {
993
+ .db-density-functional,
994
+ [data-density=functional] {
995
+ --db-type-body-3xs: var(--db-typography-functional-desktop-body-3xs);
996
+ --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-functional-desktop-body-3xs);
997
+ --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-functional-desktop-body-3xs);
998
+ --db-type-body-2xs: var(--db-typography-functional-desktop-body-2xs);
999
+ --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-functional-desktop-body-2xs);
1000
+ --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-functional-desktop-body-2xs);
1001
+ --db-type-body-xs: var(--db-typography-functional-desktop-body-xs);
1002
+ --db-base-body-icon-weight-xs: var(--db-base-icon-weight-functional-desktop-body-xs);
1003
+ --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-functional-desktop-body-xs);
1004
+ --db-type-body-sm: var(--db-typography-functional-desktop-body-sm);
1005
+ --db-base-body-icon-weight-sm: var(--db-base-icon-weight-functional-desktop-body-sm);
1006
+ --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-functional-desktop-body-sm);
1007
+ --db-type-body-md: var(--db-typography-functional-desktop-body-md);
1008
+ --db-base-body-icon-weight-md: var(--db-base-icon-weight-functional-desktop-body-md);
1009
+ --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-functional-desktop-body-md);
1010
+ --db-type-body-lg: var(--db-typography-functional-desktop-body-lg);
1011
+ --db-base-body-icon-weight-lg: var(--db-base-icon-weight-functional-desktop-body-lg);
1012
+ --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-functional-desktop-body-lg);
1013
+ --db-type-body-xl: var(--db-typography-functional-desktop-body-xl);
1014
+ --db-base-body-icon-weight-xl: var(--db-base-icon-weight-functional-desktop-body-xl);
1015
+ --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-functional-desktop-body-xl);
1016
+ --db-type-body-2xl: var(--db-typography-functional-desktop-body-2xl);
1017
+ --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-functional-desktop-body-2xl);
1018
+ --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-functional-desktop-body-2xl);
1019
+ --db-type-body-3xl: var(--db-typography-functional-desktop-body-3xl);
1020
+ --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-functional-desktop-body-3xl);
1021
+ --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-functional-desktop-body-3xl);
1022
+ }
1030
1023
  }
1031
1024
  }
1032
1025