@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/colors/_variables.palette.scss ADDED
@@ -0,0 +1,225 @@
1
+ /* Palette colors */
2
+
3
+ /* Note: In general you don't need this file. Use this only if you really know what you do! */
4
+
5
+ // brand
6
+ $db-brand-0: var(--db-brand-0);
7
+ $db-brand-1: var(--db-brand-1);
8
+ $db-brand-2: var(--db-brand-2);
9
+ $db-brand-3: var(--db-brand-3);
10
+ $db-brand-4: var(--db-brand-4);
11
+ $db-brand-5: var(--db-brand-5);
12
+ $db-brand-6: var(--db-brand-6);
13
+ $db-brand-7: var(--db-brand-7);
14
+ $db-brand-8: var(--db-brand-8);
15
+ $db-brand-9: var(--db-brand-9);
16
+ $db-brand-10: var(--db-brand-10);
17
+ $db-brand-11: var(--db-brand-11);
18
+ $db-brand-12: var(--db-brand-12);
19
+ $db-brand-13: var(--db-brand-13);
20
+ $db-brand-14: var(--db-brand-14);
21
+ $db-brand-origin: var(--db-brand-origin);
22
+ $db-brand-origin-light-default: var(--db-brand-origin-light-default);
23
+ $db-brand-origin-light-hovered: var(--db-brand-origin-light-hovered);
24
+ $db-brand-origin-light-pressed: var(--db-brand-origin-light-pressed);
25
+ $db-brand-on-origin-light-default: var(--db-brand-on-origin-light-default);
26
+ $db-brand-on-origin-light-hovered: var(--db-brand-on-origin-light-hovered);
27
+ $db-brand-on-origin-light-pressed: var(--db-brand-on-origin-light-pressed);
28
+ $db-brand-origin-dark-default: var(--db-brand-origin-dark-default);
29
+ $db-brand-origin-dark-hovered: var(--db-brand-origin-dark-hovered);
30
+ $db-brand-origin-dark-pressed: var(--db-brand-origin-dark-pressed);
31
+ $db-brand-on-origin-dark-default: var(--db-brand-on-origin-dark-default);
32
+ $db-brand-on-origin-dark-hovered: var(--db-brand-on-origin-dark-hovered);
33
+ $db-brand-on-origin-dark-pressed: var(--db-brand-on-origin-dark-pressed);
34
+
35
+ // neutral
36
+ $db-neutral-0: var(--db-neutral-0);
37
+ $db-neutral-1: var(--db-neutral-1);
38
+ $db-neutral-2: var(--db-neutral-2);
39
+ $db-neutral-3: var(--db-neutral-3);
40
+ $db-neutral-4: var(--db-neutral-4);
41
+ $db-neutral-5: var(--db-neutral-5);
42
+ $db-neutral-6: var(--db-neutral-6);
43
+ $db-neutral-7: var(--db-neutral-7);
44
+ $db-neutral-8: var(--db-neutral-8);
45
+ $db-neutral-9: var(--db-neutral-9);
46
+ $db-neutral-10: var(--db-neutral-10);
47
+ $db-neutral-11: var(--db-neutral-11);
48
+ $db-neutral-12: var(--db-neutral-12);
49
+ $db-neutral-13: var(--db-neutral-13);
50
+ $db-neutral-14: var(--db-neutral-14);
51
+ $db-neutral-origin: var(--db-neutral-origin);
52
+ $db-neutral-origin-light-default: var(--db-neutral-origin-light-default);
53
+ $db-neutral-origin-light-hovered: var(--db-neutral-origin-light-hovered);
54
+ $db-neutral-origin-light-pressed: var(--db-neutral-origin-light-pressed);
55
+ $db-neutral-on-origin-light-default: var(--db-neutral-on-origin-light-default);
56
+ $db-neutral-on-origin-light-hovered: var(--db-neutral-on-origin-light-hovered);
57
+ $db-neutral-on-origin-light-pressed: var(--db-neutral-on-origin-light-pressed);
58
+ $db-neutral-origin-dark-default: var(--db-neutral-origin-dark-default);
59
+ $db-neutral-origin-dark-hovered: var(--db-neutral-origin-dark-hovered);
60
+ $db-neutral-origin-dark-pressed: var(--db-neutral-origin-dark-pressed);
61
+ $db-neutral-on-origin-dark-default: var(--db-neutral-on-origin-dark-default);
62
+ $db-neutral-on-origin-dark-hovered: var(--db-neutral-on-origin-dark-hovered);
63
+ $db-neutral-on-origin-dark-pressed: var(--db-neutral-on-origin-dark-pressed);
64
+
65
+ // informational
66
+ $db-informational-0: var(--db-informational-0);
67
+ $db-informational-1: var(--db-informational-1);
68
+ $db-informational-2: var(--db-informational-2);
69
+ $db-informational-3: var(--db-informational-3);
70
+ $db-informational-4: var(--db-informational-4);
71
+ $db-informational-5: var(--db-informational-5);
72
+ $db-informational-6: var(--db-informational-6);
73
+ $db-informational-7: var(--db-informational-7);
74
+ $db-informational-8: var(--db-informational-8);
75
+ $db-informational-9: var(--db-informational-9);
76
+ $db-informational-10: var(--db-informational-10);
77
+ $db-informational-11: var(--db-informational-11);
78
+ $db-informational-12: var(--db-informational-12);
79
+ $db-informational-13: var(--db-informational-13);
80
+ $db-informational-14: var(--db-informational-14);
81
+ $db-informational-origin: var(--db-informational-origin);
82
+ $db-informational-origin-light-default: var(
83
+ --db-informational-origin-light-default
84
+ );
85
+ $db-informational-origin-light-hovered: var(
86
+ --db-informational-origin-light-hovered
87
+ );
88
+ $db-informational-origin-light-pressed: var(
89
+ --db-informational-origin-light-pressed
90
+ );
91
+ $db-informational-on-origin-light-default: var(
92
+ --db-informational-on-origin-light-default
93
+ );
94
+ $db-informational-on-origin-light-hovered: var(
95
+ --db-informational-on-origin-light-hovered
96
+ );
97
+ $db-informational-on-origin-light-pressed: var(
98
+ --db-informational-on-origin-light-pressed
99
+ );
100
+ $db-informational-origin-dark-default: var(
101
+ --db-informational-origin-dark-default
102
+ );
103
+ $db-informational-origin-dark-hovered: var(
104
+ --db-informational-origin-dark-hovered
105
+ );
106
+ $db-informational-origin-dark-pressed: var(
107
+ --db-informational-origin-dark-pressed
108
+ );
109
+ $db-informational-on-origin-dark-default: var(
110
+ --db-informational-on-origin-dark-default
111
+ );
112
+ $db-informational-on-origin-dark-hovered: var(
113
+ --db-informational-on-origin-dark-hovered
114
+ );
115
+ $db-informational-on-origin-dark-pressed: var(
116
+ --db-informational-on-origin-dark-pressed
117
+ );
118
+
119
+ // warning
120
+ $db-warning-0: var(--db-warning-0);
121
+ $db-warning-1: var(--db-warning-1);
122
+ $db-warning-2: var(--db-warning-2);
123
+ $db-warning-3: var(--db-warning-3);
124
+ $db-warning-4: var(--db-warning-4);
125
+ $db-warning-5: var(--db-warning-5);
126
+ $db-warning-6: var(--db-warning-6);
127
+ $db-warning-7: var(--db-warning-7);
128
+ $db-warning-8: var(--db-warning-8);
129
+ $db-warning-9: var(--db-warning-9);
130
+ $db-warning-10: var(--db-warning-10);
131
+ $db-warning-11: var(--db-warning-11);
132
+ $db-warning-12: var(--db-warning-12);
133
+ $db-warning-13: var(--db-warning-13);
134
+ $db-warning-14: var(--db-warning-14);
135
+ $db-warning-origin: var(--db-warning-origin);
136
+ $db-warning-origin-light-default: var(--db-warning-origin-light-default);
137
+ $db-warning-origin-light-hovered: var(--db-warning-origin-light-hovered);
138
+ $db-warning-origin-light-pressed: var(--db-warning-origin-light-pressed);
139
+ $db-warning-on-origin-light-default: var(--db-warning-on-origin-light-default);
140
+ $db-warning-on-origin-light-hovered: var(--db-warning-on-origin-light-hovered);
141
+ $db-warning-on-origin-light-pressed: var(--db-warning-on-origin-light-pressed);
142
+ $db-warning-origin-dark-default: var(--db-warning-origin-dark-default);
143
+ $db-warning-origin-dark-hovered: var(--db-warning-origin-dark-hovered);
144
+ $db-warning-origin-dark-pressed: var(--db-warning-origin-dark-pressed);
145
+ $db-warning-on-origin-dark-default: var(--db-warning-on-origin-dark-default);
146
+ $db-warning-on-origin-dark-hovered: var(--db-warning-on-origin-dark-hovered);
147
+ $db-warning-on-origin-dark-pressed: var(--db-warning-on-origin-dark-pressed);
148
+
149
+ // successful
150
+ $db-successful-0: var(--db-successful-0);
151
+ $db-successful-1: var(--db-successful-1);
152
+ $db-successful-2: var(--db-successful-2);
153
+ $db-successful-3: var(--db-successful-3);
154
+ $db-successful-4: var(--db-successful-4);
155
+ $db-successful-5: var(--db-successful-5);
156
+ $db-successful-6: var(--db-successful-6);
157
+ $db-successful-7: var(--db-successful-7);
158
+ $db-successful-8: var(--db-successful-8);
159
+ $db-successful-9: var(--db-successful-9);
160
+ $db-successful-10: var(--db-successful-10);
161
+ $db-successful-11: var(--db-successful-11);
162
+ $db-successful-12: var(--db-successful-12);
163
+ $db-successful-13: var(--db-successful-13);
164
+ $db-successful-14: var(--db-successful-14);
165
+ $db-successful-origin: var(--db-successful-origin);
166
+ $db-successful-origin-light-default: var(--db-successful-origin-light-default);
167
+ $db-successful-origin-light-hovered: var(--db-successful-origin-light-hovered);
168
+ $db-successful-origin-light-pressed: var(--db-successful-origin-light-pressed);
169
+ $db-successful-on-origin-light-default: var(
170
+ --db-successful-on-origin-light-default
171
+ );
172
+ $db-successful-on-origin-light-hovered: var(
173
+ --db-successful-on-origin-light-hovered
174
+ );
175
+ $db-successful-on-origin-light-pressed: var(
176
+ --db-successful-on-origin-light-pressed
177
+ );
178
+ $db-successful-origin-dark-default: var(--db-successful-origin-dark-default);
179
+ $db-successful-origin-dark-hovered: var(--db-successful-origin-dark-hovered);
180
+ $db-successful-origin-dark-pressed: var(--db-successful-origin-dark-pressed);
181
+ $db-successful-on-origin-dark-default: var(
182
+ --db-successful-on-origin-dark-default
183
+ );
184
+ $db-successful-on-origin-dark-hovered: var(
185
+ --db-successful-on-origin-dark-hovered
186
+ );
187
+ $db-successful-on-origin-dark-pressed: var(
188
+ --db-successful-on-origin-dark-pressed
189
+ );
190
+
191
+ // critical
192
+ $db-critical-0: var(--db-critical-0);
193
+ $db-critical-1: var(--db-critical-1);
194
+ $db-critical-2: var(--db-critical-2);
195
+ $db-critical-3: var(--db-critical-3);
196
+ $db-critical-4: var(--db-critical-4);
197
+ $db-critical-5: var(--db-critical-5);
198
+ $db-critical-6: var(--db-critical-6);
199
+ $db-critical-7: var(--db-critical-7);
200
+ $db-critical-8: var(--db-critical-8);
201
+ $db-critical-9: var(--db-critical-9);
202
+ $db-critical-10: var(--db-critical-10);
203
+ $db-critical-11: var(--db-critical-11);
204
+ $db-critical-12: var(--db-critical-12);
205
+ $db-critical-13: var(--db-critical-13);
206
+ $db-critical-14: var(--db-critical-14);
207
+ $db-critical-origin: var(--db-critical-origin);
208
+ $db-critical-origin-light-default: var(--db-critical-origin-light-default);
209
+ $db-critical-origin-light-hovered: var(--db-critical-origin-light-hovered);
210
+ $db-critical-origin-light-pressed: var(--db-critical-origin-light-pressed);
211
+ $db-critical-on-origin-light-default: var(
212
+ --db-critical-on-origin-light-default
213
+ );
214
+ $db-critical-on-origin-light-hovered: var(
215
+ --db-critical-on-origin-light-hovered
216
+ );
217
+ $db-critical-on-origin-light-pressed: var(
218
+ --db-critical-on-origin-light-pressed
219
+ );
220
+ $db-critical-origin-dark-default: var(--db-critical-origin-dark-default);
221
+ $db-critical-origin-dark-hovered: var(--db-critical-origin-dark-hovered);
222
+ $db-critical-origin-dark-pressed: var(--db-critical-origin-dark-pressed);
223
+ $db-critical-on-origin-dark-default: var(--db-critical-on-origin-dark-default);
224
+ $db-critical-on-origin-dark-hovered: var(--db-critical-on-origin-dark-hovered);
225
+ $db-critical-on-origin-dark-pressed: var(--db-critical-on-origin-dark-pressed);
package/build/styles/colors/_variables.scss ADDED
@@ -0,0 +1,156 @@
1
+ $variants: "neutral", "brand", "critical", "successful", "warning",
2
+ "informational";
3
+
4
+ $variant-colors: "neutral", "critical", "successful", "warning", "informational";
5
+
6
+ $on-background-colors: "emphasis-100", "emphasis-90", "emphasis-80",
7
+ "emphasis-70", "emphasis-60", "emphasis-50";
8
+
9
+ $background-colors: "basic-level-1", "basic-level-2", "basic-level-3",
10
+ "basic-transparent-semi", "basic-transparent-full";
11
+ $inverted-colors: "contrast-max", "contrast-high", "contrast-low";
12
+
13
+ // adaptive colors
14
+
15
+ // bg basic
16
+ $db-adaptive-bg-basic-level-1-default: var(
17
+ --db-adaptive-bg-basic-level-1-default
18
+ );
19
+ $db-adaptive-bg-basic-level-1-hovered: var(
20
+ --db-adaptive-bg-basic-level-1-hovered
21
+ );
22
+ $db-adaptive-bg-basic-level-1-pressed: var(
23
+ --db-adaptive-bg-basic-level-1-pressed
24
+ );
25
+ $db-adaptive-bg-basic-level-2-default: var(
26
+ --db-adaptive-bg-basic-level-2-default
27
+ );
28
+ $db-adaptive-bg-basic-level-2-hovered: var(
29
+ --db-adaptive-bg-basic-level-2-hovered
30
+ );
31
+ $db-adaptive-bg-basic-level-2-pressed: var(
32
+ --db-adaptive-bg-basic-level-2-pressed
33
+ );
34
+ $db-adaptive-bg-basic-level-3-default: var(
35
+ --db-adaptive-bg-basic-level-3-default
36
+ );
37
+ $db-adaptive-bg-basic-level-3-hovered: var(
38
+ --db-adaptive-bg-basic-level-3-hovered
39
+ );
40
+ $db-adaptive-bg-basic-level-3-pressed: var(
41
+ --db-adaptive-bg-basic-level-3-pressed
42
+ );
43
+
44
+ $db-adaptive-bg-basic-transparent-full-default: var(
45
+ --db-adaptive-bg-basic-transparent-full-default
46
+ );
47
+ $db-adaptive-bg-basic-transparent-semi-default: var(
48
+ --db-adaptive-bg-basic-transparent-semi-default
49
+ );
50
+ $db-adaptive-bg-basic-transparent-hovered: var(
51
+ --db-adaptive-bg-basic-transparent-hovered
52
+ );
53
+ $db-adaptive-bg-basic-transparent-pressed: var(
54
+ --db-adaptive-bg-basic-transparent-pressed
55
+ );
56
+
57
+ // on-bg basic
58
+ $db-adaptive-on-bg-basic-emphasis-100-default: var(
59
+ --db-adaptive-on-bg-basic-emphasis-100-default
60
+ );
61
+ $db-adaptive-on-bg-basic-emphasis-100-hovered: var(
62
+ --db-adaptive-on-bg-basic-emphasis-100-hovered
63
+ );
64
+ $db-adaptive-on-bg-basic-emphasis-100-pressed: var(
65
+ --db-adaptive-on-bg-basic-emphasis-100-pressed
66
+ );
67
+ $db-adaptive-on-bg-basic-emphasis-90-default: var(
68
+ --db-adaptive-on-bg-basic-emphasis-90-default
69
+ );
70
+ $db-adaptive-on-bg-basic-emphasis-90-hovered: var(
71
+ --db-adaptive-on-bg-basic-emphasis-90-hovered
72
+ );
73
+ $db-adaptive-on-bg-basic-emphasis-90-pressed: var(
74
+ --db-adaptive-on-bg-basic-emphasis-90-pressed
75
+ );
76
+ $db-adaptive-on-bg-basic-emphasis-80-default: var(
77
+ --db-adaptive-on-bg-basic-emphasis-80-default
78
+ );
79
+ $db-adaptive-on-bg-basic-emphasis-80-hovered: var(
80
+ --db-adaptive-on-bg-basic-emphasis-80-hovered
81
+ );
82
+ $db-adaptive-on-bg-basic-emphasis-80-pressed: var(
83
+ --db-adaptive-on-bg-basic-emphasis-80-pressed
84
+ );
85
+ $db-adaptive-on-bg-basic-emphasis-70-default: var(
86
+ --db-adaptive-on-bg-basic-emphasis-70-default
87
+ );
88
+ $db-adaptive-on-bg-basic-emphasis-70-hovered: var(
89
+ --db-adaptive-on-bg-basic-emphasis-70-hovered
90
+ );
91
+ $db-adaptive-on-bg-basic-emphasis-70-pressed: var(
92
+ --db-adaptive-on-bg-basic-emphasis-70-pressed
93
+ );
94
+ $db-adaptive-on-bg-basic-emphasis-60-default: var(
95
+ --db-adaptive-on-bg-basic-emphasis-60-default
96
+ );
97
+ $db-adaptive-on-bg-basic-emphasis-60-hovered: var(
98
+ --db-adaptive-on-bg-basic-emphasis-60-hovered
99
+ );
100
+ $db-adaptive-on-bg-basic-emphasis-60-pressed: var(
101
+ --db-adaptive-on-bg-basic-emphasis-60-pressed
102
+ );
103
+ $db-adaptive-on-bg-basic-emphasis-50-default: var(
104
+ --db-adaptive-on-bg-basic-emphasis-50-default
105
+ );
106
+ $db-adaptive-on-bg-basic-emphasis-50-hovered: var(
107
+ --db-adaptive-on-bg-basic-emphasis-50-hovered
108
+ );
109
+ $db-adaptive-on-bg-basic-emphasis-50-pressed: var(
110
+ --db-adaptive-on-bg-basic-emphasis-50-pressed
111
+ );
112
+
113
+ // inverted
114
+
115
+ $db-adaptive-bg-inverted-contrast-max-default: var(
116
+ --db-adaptive-bg-inverted-contrast-max-default
117
+ );
118
+ $db-adaptive-bg-inverted-contrast-max-hovered: var(
119
+ --db-adaptive-bg-inverted-contrast-max-hovered
120
+ );
121
+ $db-adaptive-bg-inverted-contrast-max-pressed: var(
122
+ --db-adaptive-bg-inverted-contrast-max-pressed
123
+ );
124
+ $db-adaptive-bg-inverted-contrast-high-default: var(
125
+ --db-adaptive-bg-inverted-contrast-high-default
126
+ );
127
+ $db-adaptive-bg-inverted-contrast-high-hovered: var(
128
+ --db-adaptive-bg-inverted-contrast-high-hovered
129
+ );
130
+ $db-adaptive-bg-inverted-contrast-high-pressed: var(
131
+ --db-adaptive-bg-inverted-contrast-high-pressed
132
+ );
133
+ $db-adaptive-bg-inverted-contrast-low-default: var(
134
+ --db-adaptive-bg-inverted-contrast-low-default
135
+ );
136
+ $db-adaptive-bg-inverted-contrast-low-hovered: var(
137
+ --db-adaptive-bg-inverted-contrast-low-hovered
138
+ );
139
+ $db-adaptive-bg-inverted-contrast-low-pressed: var(
140
+ --db-adaptive-bg-inverted-contrast-low-pressed
141
+ );
142
+
143
+ // on-bg-inverted
144
+ $db-adaptive-on-bg-inverted-default: var(--db-adaptive-on-bg-inverted-default);
145
+ $db-adaptive-on-bg-inverted-hovered: var(--db-adaptive-on-bg-inverted-hovered);
146
+ $db-adaptive-on-bg-inverted-pressed: var(--db-adaptive-on-bg-inverted-pressed);
147
+
148
+ // origin
149
+ $db-adaptive-origin-default: var(--db-adaptive-origin-default);
150
+ $db-adaptive-origin-hovered: var(--db-adaptive-origin-hovered);
151
+ $db-adaptive-origin-pressed: var(--db-adaptive-origin-pressed);
152
+
153
+ // on-origin
154
+ $db-adaptive-on-origin-default: var(--db-adaptive-on-origin-default);
155
+ $db-adaptive-on-origin-hovered: var(--db-adaptive-on-origin-hovered);
156
+ $db-adaptive-on-origin-pressed: var(--db-adaptive-on-origin-pressed);
package/build/styles/colors/_variables.speaking-colors.scss ADDED
@@ -0,0 +1,8 @@
1
+ /* Variants for adaptive components like input, select, notification, ... */
2
+
3
+ @forward "speaking-colors/semantic/brand.speaking-colors";
4
+ @forward "speaking-colors/semantic/neutral.speaking-colors";
5
+ @forward "speaking-colors/semantic/informational.speaking-colors";
6
+ @forward "speaking-colors/semantic/successful.speaking-colors";
7
+ @forward "speaking-colors/semantic/warning.speaking-colors";
8
+ @forward "speaking-colors/semantic/critical.speaking-colors";
package/build/styles/colors/classes/_get-class.scss ADDED
@@ -0,0 +1,23 @@
1
+ @mixin init($variant) {
2
+ [data-color="#{$variant}"],
3
+ .db-color-#{$variant} {
4
+ @extend %db-#{$variant}-variables;
5
+
6
+ color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
7
+ background-color: var(--db-adaptive-bg-basic-level-1-default);
8
+ }
9
+ }
10
+
11
+ @mixin init-on-background-colors($color) {
12
+ [data-on-bg-color="#{$color}"],
13
+ .db-on-bg-color-#{$color} {
14
+ color: var(--db-adaptive-on-bg-basic-#{$color}-default);
15
+ }
16
+ }
17
+
18
+ @mixin init-background-colors($background-color) {
19
+ [data-bg-color="#{$background-color}"],
20
+ .db-bg-color-#{$background-color} {
21
+ background-color: var(--db-adaptive-bg-#{$background-color}-default);
22
+ }
23
+ }