@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/fonts/classes/body/2xl.scss ADDED
@@ -0,0 +1,8 @@
1
+ @use "../../index";
2
+
3
+ $font-size: "2xl";
4
+
5
+ .db-font-size-#{$font-size},
6
+ [data-font-size="#{$font-size}"] {
7
+ @extend %db-overwrite-font-size-#{$font-size};
8
+ }
package/build/styles/fonts/classes/body/2xs.css ADDED
@@ -0,0 +1,16 @@
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-font-size-2xs,
8
+ [data-font-size="2xs"] {
9
+ /* Those variables are only for components to calculate heights and change icons */
10
+ --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
11
+ --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
12
+ --db-base-line-height: var(--db-type-body-line-height-2xs);
13
+ --db-base-font-size: var(--db-type-body-font-size-2xs);
14
+ line-height: var(--db-type-body-line-height-2xs);
15
+ font-size: var(--db-type-body-font-size-2xs);
16
+ }
package/build/styles/fonts/classes/body/2xs.scss ADDED
@@ -0,0 +1,8 @@
1
+ @use "../../index";
2
+
3
+ $font-size: "2xs";
4
+
5
+ .db-font-size-#{$font-size},
6
+ [data-font-size="#{$font-size}"] {
7
+ @extend %db-overwrite-font-size-#{$font-size};
8
+ }
package/build/styles/fonts/classes/body/3xl.css ADDED
@@ -0,0 +1,16 @@
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-font-size-3xl,
8
+ [data-font-size="3xl"] {
9
+ /* Those variables are only for components to calculate heights and change icons */
10
+ --db-icon-font-weight: var(--db-base-body-icon-weight-3xl);
11
+ --db-icon-font-size: var(--db-base-body-icon-font-size-3xl);
12
+ --db-base-line-height: var(--db-type-body-line-height-3xl);
13
+ --db-base-font-size: var(--db-type-body-font-size-3xl);
14
+ line-height: var(--db-type-body-line-height-3xl);
15
+ font-size: var(--db-type-body-font-size-3xl);
16
+ }
package/build/styles/fonts/classes/body/3xl.scss ADDED
@@ -0,0 +1,8 @@
1
+ @use "../../index";
2
+
3
+ $font-size: "3xl";
4
+
5
+ .db-font-size-#{$font-size},
6
+ [data-font-size="#{$font-size}"] {
7
+ @extend %db-overwrite-font-size-#{$font-size};
8
+ }
package/build/styles/fonts/classes/body/3xs.css ADDED
@@ -0,0 +1,16 @@
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-font-size-3xs,
8
+ [data-font-size="3xs"] {
9
+ /* Those variables are only for components to calculate heights and change icons */
10
+ --db-icon-font-weight: var(--db-base-body-icon-weight-3xs);
11
+ --db-icon-font-size: var(--db-base-body-icon-font-size-3xs);
12
+ --db-base-line-height: var(--db-type-body-line-height-3xs);
13
+ --db-base-font-size: var(--db-type-body-font-size-3xs);
14
+ line-height: var(--db-type-body-line-height-3xs);
15
+ font-size: var(--db-type-body-font-size-3xs);
16
+ }
package/build/styles/fonts/classes/body/3xs.scss ADDED
@@ -0,0 +1,8 @@
1
+ @use "../../index";
2
+
3
+ $font-size: "3xs";
4
+
5
+ .db-font-size-#{$font-size},
6
+ [data-font-size="#{$font-size}"] {
7
+ @extend %db-overwrite-font-size-#{$font-size};
8
+ }
package/build/styles/fonts/classes/body/all.css ADDED
@@ -0,0 +1,104 @@
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-font-size-3xl,
8
+ [data-font-size="3xl"] {
9
+ /* Those variables are only for components to calculate heights and change icons */
10
+ --db-icon-font-weight: var(--db-base-body-icon-weight-3xl);
11
+ --db-icon-font-size: var(--db-base-body-icon-font-size-3xl);
12
+ --db-base-line-height: var(--db-type-body-line-height-3xl);
13
+ --db-base-font-size: var(--db-type-body-font-size-3xl);
14
+ line-height: var(--db-type-body-line-height-3xl);
15
+ font-size: var(--db-type-body-font-size-3xl);
16
+ }
17
+
18
+ .db-font-size-2xl,
19
+ [data-font-size="2xl"] {
20
+ /* Those variables are only for components to calculate heights and change icons */
21
+ --db-icon-font-weight: var(--db-base-body-icon-weight-2xl);
22
+ --db-icon-font-size: var(--db-base-body-icon-font-size-2xl);
23
+ --db-base-line-height: var(--db-type-body-line-height-2xl);
24
+ --db-base-font-size: var(--db-type-body-font-size-2xl);
25
+ line-height: var(--db-type-body-line-height-2xl);
26
+ font-size: var(--db-type-body-font-size-2xl);
27
+ }
28
+
29
+ .db-font-size-xl,
30
+ [data-font-size=xl] {
31
+ /* Those variables are only for components to calculate heights and change icons */
32
+ --db-icon-font-weight: var(--db-base-body-icon-weight-xl);
33
+ --db-icon-font-size: var(--db-base-body-icon-font-size-xl);
34
+ --db-base-line-height: var(--db-type-body-line-height-xl);
35
+ --db-base-font-size: var(--db-type-body-font-size-xl);
36
+ line-height: var(--db-type-body-line-height-xl);
37
+ font-size: var(--db-type-body-font-size-xl);
38
+ }
39
+
40
+ .db-font-size-lg,
41
+ [data-font-size=lg] {
42
+ /* Those variables are only for components to calculate heights and change icons */
43
+ --db-icon-font-weight: var(--db-base-body-icon-weight-lg);
44
+ --db-icon-font-size: var(--db-base-body-icon-font-size-lg);
45
+ --db-base-line-height: var(--db-type-body-line-height-lg);
46
+ --db-base-font-size: var(--db-type-body-font-size-lg);
47
+ line-height: var(--db-type-body-line-height-lg);
48
+ font-size: var(--db-type-body-font-size-lg);
49
+ }
50
+
51
+ .db-font-size-md,
52
+ [data-font-size=md] {
53
+ /* Those variables are only for components to calculate heights and change icons */
54
+ --db-icon-font-weight: var(--db-base-body-icon-weight-md);
55
+ --db-icon-font-size: var(--db-base-body-icon-font-size-md);
56
+ --db-base-line-height: var(--db-type-body-line-height-md);
57
+ --db-base-font-size: var(--db-type-body-font-size-md);
58
+ line-height: var(--db-type-body-line-height-md);
59
+ font-size: var(--db-type-body-font-size-md);
60
+ }
61
+
62
+ .db-font-size-sm,
63
+ [data-font-size=sm] {
64
+ /* Those variables are only for components to calculate heights and change icons */
65
+ --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
66
+ --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
67
+ --db-base-line-height: var(--db-type-body-line-height-sm);
68
+ --db-base-font-size: var(--db-type-body-font-size-sm);
69
+ line-height: var(--db-type-body-line-height-sm);
70
+ font-size: var(--db-type-body-font-size-sm);
71
+ }
72
+
73
+ .db-font-size-xs,
74
+ [data-font-size=xs] {
75
+ /* Those variables are only for components to calculate heights and change icons */
76
+ --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
77
+ --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
78
+ --db-base-line-height: var(--db-type-body-line-height-xs);
79
+ --db-base-font-size: var(--db-type-body-font-size-xs);
80
+ line-height: var(--db-type-body-line-height-xs);
81
+ font-size: var(--db-type-body-font-size-xs);
82
+ }
83
+
84
+ .db-font-size-2xs,
85
+ [data-font-size="2xs"] {
86
+ /* Those variables are only for components to calculate heights and change icons */
87
+ --db-icon-font-weight: var(--db-base-body-icon-weight-2xs);
88
+ --db-icon-font-size: var(--db-base-body-icon-font-size-2xs);
89
+ --db-base-line-height: var(--db-type-body-line-height-2xs);
90
+ --db-base-font-size: var(--db-type-body-font-size-2xs);
91
+ line-height: var(--db-type-body-line-height-2xs);
92
+ font-size: var(--db-type-body-font-size-2xs);
93
+ }
94
+
95
+ .db-font-size-3xs,
96
+ [data-font-size="3xs"] {
97
+ /* Those variables are only for components to calculate heights and change icons */
98
+ --db-icon-font-weight: var(--db-base-body-icon-weight-3xs);
99
+ --db-icon-font-size: var(--db-base-body-icon-font-size-3xs);
100
+ --db-base-line-height: var(--db-type-body-line-height-3xs);
101
+ --db-base-font-size: var(--db-type-body-font-size-3xs);
102
+ line-height: var(--db-type-body-line-height-3xs);
103
+ font-size: var(--db-type-body-font-size-3xs);
104
+ }
package/build/styles/fonts/classes/body/all.scss ADDED
@@ -0,0 +1,8 @@
1
+ @use "../../index";
2
+
3
+ @each $font-size in index.$font-sizes {
4
+ .db-font-size-#{$font-size},
5
+ [data-font-size="#{$font-size}"] {
6
+ @extend %db-overwrite-font-size-#{$font-size};
7
+ }
8
+ }
package/build/styles/fonts/classes/body/lg.css ADDED
@@ -0,0 +1,16 @@
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-font-size-lg,
8
+ [data-font-size=lg] {
9
+ /* Those variables are only for components to calculate heights and change icons */
10
+ --db-icon-font-weight: var(--db-base-body-icon-weight-lg);
11
+ --db-icon-font-size: var(--db-base-body-icon-font-size-lg);
12
+ --db-base-line-height: var(--db-type-body-line-height-lg);
13
+ --db-base-font-size: var(--db-type-body-font-size-lg);
14
+ line-height: var(--db-type-body-line-height-lg);
15
+ font-size: var(--db-type-body-font-size-lg);
16
+ }
package/build/styles/fonts/classes/body/lg.scss ADDED
@@ -0,0 +1,8 @@
1
+ @use "../../index";
2
+
3
+ $font-size: "lg";
4
+
5
+ .db-font-size-#{$font-size},
6
+ [data-font-size="#{$font-size}"] {
7
+ @extend %db-overwrite-font-size-#{$font-size};
8
+ }
package/build/styles/fonts/classes/body/md.css ADDED
@@ -0,0 +1,16 @@
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-font-size-md,
8
+ [data-font-size=md] {
9
+ /* Those variables are only for components to calculate heights and change icons */
10
+ --db-icon-font-weight: var(--db-base-body-icon-weight-md);
11
+ --db-icon-font-size: var(--db-base-body-icon-font-size-md);
12
+ --db-base-line-height: var(--db-type-body-line-height-md);
13
+ --db-base-font-size: var(--db-type-body-font-size-md);
14
+ line-height: var(--db-type-body-line-height-md);
15
+ font-size: var(--db-type-body-font-size-md);
16
+ }
package/build/styles/fonts/classes/body/md.scss ADDED
@@ -0,0 +1,8 @@
1
+ @use "../../index";
2
+
3
+ $font-size: "md";
4
+
5
+ .db-font-size-#{$font-size},
6
+ [data-font-size="#{$font-size}"] {
7
+ @extend %db-overwrite-font-size-#{$font-size};
8
+ }
package/build/styles/fonts/classes/body/sm.css ADDED
@@ -0,0 +1,16 @@
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-font-size-sm,
8
+ [data-font-size=sm] {
9
+ /* Those variables are only for components to calculate heights and change icons */
10
+ --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
11
+ --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
12
+ --db-base-line-height: var(--db-type-body-line-height-sm);
13
+ --db-base-font-size: var(--db-type-body-font-size-sm);
14
+ line-height: var(--db-type-body-line-height-sm);
15
+ font-size: var(--db-type-body-font-size-sm);
16
+ }
package/build/styles/fonts/classes/body/sm.scss ADDED
@@ -0,0 +1,8 @@
1
+ @use "../../index";
2
+
3
+ $font-size: "sm";
4
+
5
+ .db-font-size-#{$font-size},
6
+ [data-font-size="#{$font-size}"] {
7
+ @extend %db-overwrite-font-size-#{$font-size};
8
+ }
package/build/styles/fonts/classes/body/xl.css ADDED
@@ -0,0 +1,16 @@
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-font-size-xl,
8
+ [data-font-size=xl] {
9
+ /* Those variables are only for components to calculate heights and change icons */
10
+ --db-icon-font-weight: var(--db-base-body-icon-weight-xl);
11
+ --db-icon-font-size: var(--db-base-body-icon-font-size-xl);
12
+ --db-base-line-height: var(--db-type-body-line-height-xl);
13
+ --db-base-font-size: var(--db-type-body-font-size-xl);
14
+ line-height: var(--db-type-body-line-height-xl);
15
+ font-size: var(--db-type-body-font-size-xl);
16
+ }
package/build/styles/fonts/classes/body/xl.scss ADDED
@@ -0,0 +1,8 @@
1
+ @use "../../index";
2
+
3
+ $font-size: "xl";
4
+
5
+ .db-font-size-#{$font-size},
6
+ [data-font-size="#{$font-size}"] {
7
+ @extend %db-overwrite-font-size-#{$font-size};
8
+ }
package/build/styles/fonts/classes/body/xs.css ADDED
@@ -0,0 +1,16 @@
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-font-size-xs,
8
+ [data-font-size=xs] {
9
+ /* Those variables are only for components to calculate heights and change icons */
10
+ --db-icon-font-weight: var(--db-base-body-icon-weight-xs);
11
+ --db-icon-font-size: var(--db-base-body-icon-font-size-xs);
12
+ --db-base-line-height: var(--db-type-body-line-height-xs);
13
+ --db-base-font-size: var(--db-type-body-font-size-xs);
14
+ line-height: var(--db-type-body-line-height-xs);
15
+ font-size: var(--db-type-body-font-size-xs);
16
+ }
package/build/styles/fonts/classes/body/xs.scss ADDED
@@ -0,0 +1,8 @@
1
+ @use "../../index";
2
+
3
+ $font-size: "xs";
4
+
5
+ .db-font-size-#{$font-size},
6
+ [data-font-size="#{$font-size}"] {
7
+ @extend %db-overwrite-font-size-#{$font-size};
8
+ }
package/build/styles/fonts/classes/headline/2xl.css ADDED
@@ -0,0 +1,14 @@
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-headline-size-2xl,
8
+ [data-headline-size="2xl"] {
9
+ /* Those variables are only for components to calculate heights and change icons */
10
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-2xl);
11
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-2xl);
12
+ line-height: var(--db-type-headline-line-height-2xl);
13
+ font-size: var(--db-type-headline-font-size-2xl);
14
+ }
package/build/styles/fonts/classes/headline/2xl.scss ADDED
@@ -0,0 +1,8 @@
1
+ @use "../../index";
2
+
3
+ $font-size: "2xl";
4
+
5
+ .db-headline-size-#{$font-size},
6
+ [data-headline-size="#{$font-size}"] {
7
+ @extend %db-overwrite-headline-size-#{$font-size};
8
+ }
package/build/styles/fonts/classes/headline/2xs.css ADDED
@@ -0,0 +1,14 @@
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-headline-size-2xs,
8
+ [data-headline-size="2xs"] {
9
+ /* Those variables are only for components to calculate heights and change icons */
10
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-2xs);
11
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-2xs);
12
+ line-height: var(--db-type-headline-line-height-2xs);
13
+ font-size: var(--db-type-headline-font-size-2xs);
14
+ }
package/build/styles/fonts/classes/headline/2xs.scss ADDED
@@ -0,0 +1,8 @@
1
+ @use "../../index";
2
+
3
+ $font-size: "2xs";
4
+
5
+ .db-headline-size-#{$font-size},
6
+ [data-headline-size="#{$font-size}"] {
7
+ @extend %db-overwrite-headline-size-#{$font-size};
8
+ }
package/build/styles/fonts/classes/headline/3xl.css ADDED
@@ -0,0 +1,14 @@
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-headline-size-3xl,
8
+ [data-headline-size="3xl"] {
9
+ /* Those variables are only for components to calculate heights and change icons */
10
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-3xl);
11
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-3xl);
12
+ line-height: var(--db-type-headline-line-height-3xl);
13
+ font-size: var(--db-type-headline-font-size-3xl);
14
+ }
package/build/styles/fonts/classes/headline/3xl.scss ADDED
@@ -0,0 +1,8 @@
1
+ @use "../../index";
2
+
3
+ $font-size: "3xl";
4
+
5
+ .db-headline-size-#{$font-size},
6
+ [data-headline-size="#{$font-size}"] {
7
+ @extend %db-overwrite-headline-size-#{$font-size};
8
+ }
package/build/styles/fonts/classes/headline/3xs.css ADDED
@@ -0,0 +1,14 @@
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-headline-size-3xs,
8
+ [data-headline-size="3xs"] {
9
+ /* Those variables are only for components to calculate heights and change icons */
10
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-3xs);
11
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-3xs);
12
+ line-height: var(--db-type-headline-line-height-3xs);
13
+ font-size: var(--db-type-headline-font-size-3xs);
14
+ }
package/build/styles/fonts/classes/headline/3xs.scss ADDED
@@ -0,0 +1,8 @@
1
+ @use "../../index";
2
+
3
+ $font-size: "3xs";
4
+
5
+ .db-headline-size-#{$font-size},
6
+ [data-headline-size="#{$font-size}"] {
7
+ @extend %db-overwrite-headline-size-#{$font-size};
8
+ }
package/build/styles/fonts/classes/headline/all.css ADDED
@@ -0,0 +1,86 @@
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-headline-size-3xl,
8
+ [data-headline-size="3xl"] {
9
+ /* Those variables are only for components to calculate heights and change icons */
10
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-3xl);
11
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-3xl);
12
+ line-height: var(--db-type-headline-line-height-3xl);
13
+ font-size: var(--db-type-headline-font-size-3xl);
14
+ }
15
+
16
+ .db-headline-size-2xl,
17
+ [data-headline-size="2xl"] {
18
+ /* Those variables are only for components to calculate heights and change icons */
19
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-2xl);
20
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-2xl);
21
+ line-height: var(--db-type-headline-line-height-2xl);
22
+ font-size: var(--db-type-headline-font-size-2xl);
23
+ }
24
+
25
+ .db-headline-size-xl,
26
+ [data-headline-size=xl] {
27
+ /* Those variables are only for components to calculate heights and change icons */
28
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-xl);
29
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-xl);
30
+ line-height: var(--db-type-headline-line-height-xl);
31
+ font-size: var(--db-type-headline-font-size-xl);
32
+ }
33
+
34
+ .db-headline-size-lg,
35
+ [data-headline-size=lg] {
36
+ /* Those variables are only for components to calculate heights and change icons */
37
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-lg);
38
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-lg);
39
+ line-height: var(--db-type-headline-line-height-lg);
40
+ font-size: var(--db-type-headline-font-size-lg);
41
+ }
42
+
43
+ .db-headline-size-md,
44
+ [data-headline-size=md] {
45
+ /* Those variables are only for components to calculate heights and change icons */
46
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-md);
47
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-md);
48
+ line-height: var(--db-type-headline-line-height-md);
49
+ font-size: var(--db-type-headline-font-size-md);
50
+ }
51
+
52
+ .db-headline-size-sm,
53
+ [data-headline-size=sm] {
54
+ /* Those variables are only for components to calculate heights and change icons */
55
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-sm);
56
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-sm);
57
+ line-height: var(--db-type-headline-line-height-sm);
58
+ font-size: var(--db-type-headline-font-size-sm);
59
+ }
60
+
61
+ .db-headline-size-xs,
62
+ [data-headline-size=xs] {
63
+ /* Those variables are only for components to calculate heights and change icons */
64
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-xs);
65
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-xs);
66
+ line-height: var(--db-type-headline-line-height-xs);
67
+ font-size: var(--db-type-headline-font-size-xs);
68
+ }
69
+
70
+ .db-headline-size-2xs,
71
+ [data-headline-size="2xs"] {
72
+ /* Those variables are only for components to calculate heights and change icons */
73
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-2xs);
74
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-2xs);
75
+ line-height: var(--db-type-headline-line-height-2xs);
76
+ font-size: var(--db-type-headline-font-size-2xs);
77
+ }
78
+
79
+ .db-headline-size-3xs,
80
+ [data-headline-size="3xs"] {
81
+ /* Those variables are only for components to calculate heights and change icons */
82
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-3xs);
83
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-3xs);
84
+ line-height: var(--db-type-headline-line-height-3xs);
85
+ font-size: var(--db-type-headline-font-size-3xs);
86
+ }
package/build/styles/fonts/classes/headline/all.scss ADDED
@@ -0,0 +1,8 @@
1
+ @use "../../index";
2
+
3
+ @each $font-size in index.$font-sizes {
4
+ .db-headline-size-#{$font-size},
5
+ [data-headline-size="#{$font-size}"] {
6
+ @extend %db-overwrite-headline-size-#{$font-size};
7
+ }
8
+ }
package/build/styles/fonts/classes/headline/lg.css ADDED
@@ -0,0 +1,14 @@
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-headline-size-lg,
8
+ [data-headline-size=lg] {
9
+ /* Those variables are only for components to calculate heights and change icons */
10
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-lg);
11
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-lg);
12
+ line-height: var(--db-type-headline-line-height-lg);
13
+ font-size: var(--db-type-headline-font-size-lg);
14
+ }
package/build/styles/fonts/classes/headline/lg.scss ADDED
@@ -0,0 +1,8 @@
1
+ @use "../../index";
2
+
3
+ $font-size: "lg";
4
+
5
+ .db-headline-size-#{$font-size},
6
+ [data-headline-size="#{$font-size}"] {
7
+ @extend %db-overwrite-headline-size-#{$font-size};
8
+ }
package/build/styles/fonts/classes/headline/md.css ADDED
@@ -0,0 +1,14 @@
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-headline-size-md,
8
+ [data-headline-size=md] {
9
+ /* Those variables are only for components to calculate heights and change icons */
10
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-md);
11
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-md);
12
+ line-height: var(--db-type-headline-line-height-md);
13
+ font-size: var(--db-type-headline-font-size-md);
14
+ }
package/build/styles/fonts/classes/headline/md.scss ADDED
@@ -0,0 +1,8 @@
1
+ @use "../../index";
2
+
3
+ $font-size: "md";
4
+
5
+ .db-headline-size-#{$font-size},
6
+ [data-headline-size="#{$font-size}"] {
7
+ @extend %db-overwrite-headline-size-#{$font-size};
8
+ }
package/build/styles/fonts/classes/headline/sm.css ADDED
@@ -0,0 +1,14 @@
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-headline-size-sm,
8
+ [data-headline-size=sm] {
9
+ /* Those variables are only for components to calculate heights and change icons */
10
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-sm);
11
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-sm);
12
+ line-height: var(--db-type-headline-line-height-sm);
13
+ font-size: var(--db-type-headline-font-size-sm);
14
+ }
package/build/styles/fonts/classes/headline/sm.scss ADDED
@@ -0,0 +1,8 @@
1
+ @use "../../index";
2
+
3
+ $font-size: "sm";
4
+
5
+ .db-headline-size-#{$font-size},
6
+ [data-headline-size="#{$font-size}"] {
7
+ @extend %db-overwrite-headline-size-#{$font-size};
8
+ }
package/build/styles/fonts/classes/headline/xl.css ADDED
@@ -0,0 +1,14 @@
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-headline-size-xl,
8
+ [data-headline-size=xl] {
9
+ /* Those variables are only for components to calculate heights and change icons */
10
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-xl);
11
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-xl);
12
+ line-height: var(--db-type-headline-line-height-xl);
13
+ font-size: var(--db-type-headline-font-size-xl);
14
+ }
package/build/styles/fonts/classes/headline/xl.scss ADDED
@@ -0,0 +1,8 @@
1
+ @use "../../index";
2
+
3
+ $font-size: "xl";
4
+
5
+ .db-headline-size-#{$font-size},
6
+ [data-headline-size="#{$font-size}"] {
7
+ @extend %db-overwrite-headline-size-#{$font-size};
8
+ }
package/build/styles/fonts/classes/headline/xs.css ADDED
@@ -0,0 +1,14 @@
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-headline-size-xs,
8
+ [data-headline-size=xs] {
9
+ /* Those variables are only for components to calculate heights and change icons */
10
+ --db-icon-font-weight: var(--db-base-headline-icon-weight-xs);
11
+ --db-icon-font-size: var(--db-base-headline-icon-font-size-xs);
12
+ line-height: var(--db-type-headline-line-height-xs);
13
+ font-size: var(--db-type-headline-font-size-xs);
14
+ }