@db-ux/core-foundations 1.0.0-test-13b991d

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