@kickstartds/ds-agency-premium 1.7.0--canary.46.1927.0 → 1.7.0--canary.43.2352.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (506) hide show
  1. package/dist/{BlogAsideProps-d9decb7c.d.ts → BlogAsideProps-c760fd2a.d.ts} +5 -5
  2. package/dist/{BlogAuthorProps-88a11566.d.ts → BlogAuthorProps-fb0241df.d.ts} +7 -2
  3. package/dist/BlogOverviewProps-9f207f1c.d.ts +2 -2
  4. package/dist/{BlogPostProps-d9decb7c.d.ts → BlogPostProps-c760fd2a.d.ts} +3 -3
  5. package/dist/BusinessCardProps-e10e7b62.d.ts +101 -0
  6. package/dist/{ButtonProps-03ff6d21.d.ts → ButtonProps-4e2b2ecf.d.ts} +6 -4
  7. package/dist/ContactProps-7cac90e5.d.ts +70 -0
  8. package/dist/ContentNavProps-0e282a9f.d.ts +36 -0
  9. package/dist/{CtaProps-93230a76.d.ts → CtaProps-789f8508.d.ts} +16 -11
  10. package/dist/DownloadsProps-a49a977e.d.ts +34 -0
  11. package/dist/EventAppointmentProps-443cd1ce.d.ts +38 -0
  12. package/dist/EventDetailProps-42a7eebe.d.ts +387 -0
  13. package/dist/EventFilterProps-b190eb86.d.ts +73 -0
  14. package/dist/EventLatestTeaserProps-fc9d3281.d.ts +58 -0
  15. package/dist/EventListTeaserProps-5cc94436.d.ts +89 -0
  16. package/dist/EventLocationProps-871bc198.d.ts +41 -0
  17. package/dist/{FaqProps-ad618cd5.d.ts → FaqProps-78384db5.d.ts} +7 -12
  18. package/dist/{FeaturesProps-e58616a5.d.ts → FeaturesProps-a9041d97.d.ts} +9 -4
  19. package/dist/{FooterProps-171a3067.d.ts → FooterProps-a0a104ca.d.ts} +2 -2
  20. package/dist/{HeaderProps-e22382f1.d.ts → HeaderProps-72763967.d.ts} +2 -2
  21. package/dist/HeadlineProps-e1305784.d.ts +53 -0
  22. package/dist/{HeroProps-f704d270.d.ts → HeroProps-fec6b267.d.ts} +15 -5
  23. package/dist/ImageStoryProps-e853e1e7.d.ts +1 -1
  24. package/dist/{LogosProps-f9474fe2.d.ts → LogosProps-d4677d2c.d.ts} +1 -23
  25. package/dist/MosaicProps-d52c7151.d.ts +4 -4
  26. package/dist/PageProps-aa29c554.d.ts +1 -1
  27. package/dist/SearchBarProps-26263244.d.ts +29 -0
  28. package/dist/SearchFilterProps-2fa6419b.d.ts +29 -0
  29. package/dist/SearchFormProps-3d2c3462.d.ts +30 -0
  30. package/dist/SearchResultMatchProps-777cd47c.d.ts +23 -0
  31. package/dist/SearchResultProps-f6f07017.d.ts +44 -0
  32. package/dist/{SectionProps-1cfcf6e8.d.ts → SectionProps-7cac90e5.d.ts} +27 -13
  33. package/dist/{SliderProps-93230a76.d.ts → SliderProps-789f8508.d.ts} +5 -5
  34. package/dist/SplitEvenProps-7cac90e5.d.ts +72 -0
  35. package/dist/SplitWeightedProps-7cac90e5.d.ts +102 -0
  36. package/dist/{TeaserCardProps-b9c28e78.d.ts → TeaserCardProps-d069476f.d.ts} +9 -4
  37. package/dist/{VideoCurtainProps-6c625a69.d.ts → VideoCurtainProps-a2c0cc7f.d.ts} +5 -5
  38. package/dist/components/blog-aside/blog-aside.css +4 -4
  39. package/dist/components/blog-aside/blog-aside.schema.dereffed.json +16 -14
  40. package/dist/components/blog-aside/blog-aside.schema.json +4 -4
  41. package/dist/components/blog-aside/index.d.ts +1 -1
  42. package/dist/components/blog-aside/index.js +3 -3
  43. package/dist/components/blog-author/blog-author.schema.dereffed.json +12 -7
  44. package/dist/components/blog-author/index.d.ts +1 -1
  45. package/dist/components/blog-head/blog-head.schema.dereffed.json +0 -6
  46. package/dist/components/blog-overview/blog-overview.schema.dereffed.json +17053 -1570
  47. package/dist/components/blog-post/blog-post.schema.dereffed.json +17068 -1571
  48. package/dist/components/blog-post/index.d.ts +1 -1
  49. package/dist/components/blog-post/index.js +5 -3
  50. package/dist/components/blog-tag/blog-tag.schema.dereffed.json +0 -3
  51. package/dist/components/blog-teaser/blog-teaser.css +2 -2
  52. package/dist/components/blog-teaser/blog-teaser.schema.dereffed.json +0 -6
  53. package/dist/components/blog-teaser/index.js +5 -7
  54. package/dist/components/breadcrumb/breadcrumb.css +32 -0
  55. package/dist/components/breadcrumb/breadcrumb.schema.dereffed.json +31 -0
  56. package/dist/components/breadcrumb/breadcrumb.schema.json +27 -0
  57. package/dist/components/breadcrumb/index.d.ts +28 -0
  58. package/dist/components/breadcrumb/index.js +22 -0
  59. package/dist/components/business-card/business-card.css +186 -0
  60. package/dist/components/business-card/business-card.schema.dereffed.json +141 -0
  61. package/dist/components/business-card/business-card.schema.json +126 -0
  62. package/dist/components/business-card/index.d.ts +7 -0
  63. package/dist/components/business-card/index.js +31 -0
  64. package/dist/components/button/button.css +5 -2
  65. package/dist/components/button/button.schema.dereffed.json +10 -4
  66. package/dist/components/button/button.schema.json +8 -3
  67. package/dist/components/button/index.d.ts +1 -1
  68. package/dist/components/button/index.js +19 -9
  69. package/dist/components/button-group/button-group.schema.dereffed.json +12 -9
  70. package/dist/components/button-group/index.d.ts +4 -4
  71. package/dist/components/button-group/index.js +11 -2
  72. package/dist/components/contact/contact.css +11 -17
  73. package/dist/components/contact/contact.schema.dereffed.json +13 -8
  74. package/dist/components/contact/contact.schema.json +11 -5
  75. package/dist/components/contact/index.d.ts +1 -65
  76. package/dist/components/contact/index.js +1 -1
  77. package/dist/components/content-nav/content-nav.css +122 -0
  78. package/dist/components/content-nav/content-nav.schema.dereffed.json +58 -0
  79. package/dist/components/content-nav/content-nav.schema.json +52 -0
  80. package/dist/components/content-nav/index.d.ts +7 -0
  81. package/dist/components/content-nav/index.js +21 -0
  82. package/dist/components/cookie-consent/C15t.client.d.ts +5 -0
  83. package/dist/components/cookie-consent/C15t.client.js +123 -0
  84. package/dist/components/cookie-consent/CookieConsent.client.d.ts +29 -0
  85. package/dist/components/cookie-consent/CookieConsent.client.js +84 -0
  86. package/dist/components/cookie-consent/cookie-consent.css +255 -0
  87. package/dist/components/cookie-consent/cookie-consent.schema.dereffed.json +256 -0
  88. package/dist/components/cookie-consent/cookie-consent.schema.json +224 -0
  89. package/dist/components/cookie-consent/index.d.ts +143 -0
  90. package/dist/components/cookie-consent/index.js +26 -0
  91. package/dist/components/cta/cta.css +48 -71
  92. package/dist/components/cta/cta.schema.dereffed.json +21 -13
  93. package/dist/components/cta/cta.schema.json +17 -10
  94. package/dist/components/cta/index.d.ts +1 -1
  95. package/dist/components/cta/index.js +29 -29
  96. package/dist/components/divider/divider.schema.dereffed.json +0 -3
  97. package/dist/components/downloads/downloads.css +158 -0
  98. package/dist/components/downloads/downloads.schema.dereffed.json +52 -0
  99. package/dist/components/downloads/downloads.schema.json +44 -0
  100. package/dist/components/downloads/index.d.ts +8 -0
  101. package/dist/components/downloads/index.js +23 -0
  102. package/dist/components/event-appointment/event-appointment.css +63 -0
  103. package/dist/components/event-appointment/event-appointment.schema.dereffed.json +53 -0
  104. package/dist/components/event-appointment/event-appointment.schema.json +47 -0
  105. package/dist/components/event-appointment/index.d.ts +7 -0
  106. package/dist/components/event-appointment/index.js +21 -0
  107. package/dist/components/event-detail/event-detail.schema.dereffed.json +278 -0
  108. package/dist/components/event-detail/event-detail.schema.json +74 -0
  109. package/dist/components/event-detail/index.d.ts +5 -0
  110. package/dist/components/event-detail/index.js +37 -0
  111. package/dist/components/event-filter/event-filter.css +31 -0
  112. package/dist/components/event-filter/event-filter.schema.dereffed.json +115 -0
  113. package/dist/components/event-filter/event-filter.schema.json +107 -0
  114. package/dist/components/event-filter/index.d.ts +7 -0
  115. package/dist/components/event-filter/index.js +61 -0
  116. package/dist/components/event-header/event-header.css +6 -0
  117. package/dist/components/event-header/event-header.schema.dereffed.json +35 -0
  118. package/dist/components/event-header/event-header.schema.json +34 -0
  119. package/dist/components/event-header/index.d.ts +35 -0
  120. package/dist/components/event-header/index.js +25 -0
  121. package/dist/components/event-latest/event-latest.css +5 -0
  122. package/dist/components/event-latest/event-latest.schema.dereffed.json +136 -0
  123. package/dist/components/event-latest/event-latest.schema.json +46 -0
  124. package/dist/components/event-latest/index.d.ts +30 -0
  125. package/dist/components/event-latest/index.js +24 -0
  126. package/dist/components/event-latest-teaser/event-latest-teaser.css +131 -0
  127. package/dist/components/event-latest-teaser/event-latest-teaser.schema.dereffed.json +94 -0
  128. package/dist/components/event-latest-teaser/event-latest-teaser.schema.json +73 -0
  129. package/dist/components/event-latest-teaser/index.d.ts +8 -0
  130. package/dist/components/event-latest-teaser/index.js +23 -0
  131. package/dist/components/event-list/event-list.schema.dereffed.json +275 -0
  132. package/dist/components/event-list/event-list.schema.json +18 -0
  133. package/dist/components/event-list/index.d.ts +19 -0
  134. package/dist/components/event-list/index.js +74 -0
  135. package/dist/components/event-list-teaser/event-list-teaser.css +143 -0
  136. package/dist/components/event-list-teaser/event-list-teaser.schema.dereffed.json +148 -0
  137. package/dist/components/event-list-teaser/event-list-teaser.schema.json +116 -0
  138. package/dist/components/event-list-teaser/index.d.ts +8 -0
  139. package/dist/components/event-list-teaser/index.js +28 -0
  140. package/dist/components/event-location/event-location.css +71 -0
  141. package/dist/components/event-location/event-location.schema.dereffed.json +120 -0
  142. package/dist/components/event-location/event-location.schema.json +61 -0
  143. package/dist/components/event-location/index.d.ts +7 -0
  144. package/dist/components/event-location/index.js +25 -0
  145. package/dist/components/event-login/event-login.css +31 -0
  146. package/dist/components/event-login/event-login.schema.dereffed.json +122 -0
  147. package/dist/components/event-login/event-login.schema.json +98 -0
  148. package/dist/components/event-login/index.d.ts +78 -0
  149. package/dist/components/event-login/index.js +31 -0
  150. package/dist/components/event-registration/event-registration.css +88 -0
  151. package/dist/components/event-registration/event-registration.schema.dereffed.json +171 -0
  152. package/dist/components/event-registration/event-registration.schema.json +138 -0
  153. package/dist/components/event-registration/index.d.ts +106 -0
  154. package/dist/components/event-registration/index.js +36 -0
  155. package/dist/components/faq/faq.css +1 -1
  156. package/dist/components/faq/faq.schema.dereffed.json +2 -5
  157. package/dist/components/faq/faq.schema.json +2 -1
  158. package/dist/components/faq/index.d.ts +24 -7
  159. package/dist/components/faq/index.js +1 -1
  160. package/dist/components/feature/feature.schema.dereffed.json +13 -6
  161. package/dist/components/feature/feature.schema.json +11 -3
  162. package/dist/components/feature/index.d.ts +8 -3
  163. package/dist/components/feature/index.js +5 -4
  164. package/dist/components/features/features.css +12 -14
  165. package/dist/components/features/features.schema.dereffed.json +13 -6
  166. package/dist/components/features/features.schema.json +5 -2
  167. package/dist/components/features/index.d.ts +1 -1
  168. package/dist/components/features/index.js +3 -2
  169. package/dist/components/footer/footer.css +4 -3
  170. package/dist/components/footer/footer.schema.dereffed.json +12 -15
  171. package/dist/components/footer/index.d.ts +1 -1
  172. package/dist/components/footer/index.js +1 -1
  173. package/dist/components/gallery/gallery.schema.dereffed.json +2 -4
  174. package/dist/components/gallery/gallery.schema.json +2 -1
  175. package/dist/components/gallery/index.js +2 -1
  176. package/dist/components/header/header.css +52 -9
  177. package/dist/components/header/header.schema.dereffed.json +12 -15
  178. package/dist/components/header/index.d.ts +1 -1
  179. package/dist/components/header/index.js +5 -5
  180. package/dist/components/headline/headline.css +33 -41
  181. package/dist/components/headline/headline.schema.dereffed.json +0 -3
  182. package/dist/components/headline/index.d.ts +1 -53
  183. package/dist/components/headline/index.js +13 -4
  184. package/dist/components/hero/hero.css +145 -52
  185. package/dist/components/hero/hero.schema.dereffed.json +19 -8
  186. package/dist/components/hero/hero.schema.json +24 -4
  187. package/dist/components/hero/index.d.ts +1 -1
  188. package/dist/components/hero/index.js +52 -40
  189. package/dist/components/html/html.schema.dereffed.json +0 -3
  190. package/dist/components/image-story/image-story.css +13 -6
  191. package/dist/components/image-story/image-story.schema.dereffed.json +10 -7
  192. package/dist/components/image-text/image-text.css +4 -4
  193. package/dist/components/image-text/image-text.schema.dereffed.json +0 -3
  194. package/dist/components/index/index.d.ts +4 -3
  195. package/dist/components/logo/logo.schema.dereffed.json +0 -3
  196. package/dist/components/logos/index.d.ts +1 -1
  197. package/dist/components/logos/index.js +1 -1
  198. package/dist/components/logos/logos.css +2 -2
  199. package/dist/components/logos/logos.schema.dereffed.json +7 -11
  200. package/dist/components/logos/logos.schema.json +7 -8
  201. package/dist/components/mosaic/index.js +1 -1
  202. package/dist/components/mosaic/mosaic.css +5 -7
  203. package/dist/components/mosaic/mosaic.schema.dereffed.json +3 -9
  204. package/dist/components/nav-dropdown/index.d.ts +1 -1
  205. package/dist/components/nav-dropdown/index.js +2 -2
  206. package/dist/components/nav-dropdown/nav-dropdown.css +13 -4
  207. package/dist/components/nav-dropdown/nav-dropdown.schema.dereffed.json +1 -4
  208. package/dist/components/nav-flyout/index.d.ts +2 -2
  209. package/dist/components/nav-flyout/index.js +6 -8
  210. package/dist/components/nav-flyout/nav-flyout.css +29 -15
  211. package/dist/components/nav-flyout/nav-flyout.schema.dereffed.json +12 -18
  212. package/dist/components/nav-main/index.d.ts +5 -5
  213. package/dist/components/nav-main/index.js +0 -2
  214. package/dist/components/nav-main/nav-main.schema.dereffed.json +15 -21
  215. package/dist/components/nav-main/nav-main.schema.json +14 -14
  216. package/dist/components/nav-toggle/index.js +1 -1
  217. package/dist/components/nav-topbar/index.d.ts +2 -2
  218. package/dist/components/nav-topbar/index.js +2 -2
  219. package/dist/components/nav-topbar/nav-topbar.css +17 -4
  220. package/dist/components/nav-topbar/nav-topbar.schema.dereffed.json +12 -15
  221. package/dist/components/page/page.schema.dereffed.json +17045 -1552
  222. package/dist/components/page-wrapper/index.js +51 -1
  223. package/dist/components/page-wrapper/tokens.css +448 -752
  224. package/dist/components/pagination/index.d.ts +55 -0
  225. package/dist/components/pagination/index.js +58 -0
  226. package/dist/components/pagination/pagination.css +90 -0
  227. package/dist/components/pagination/pagination.schema.dereffed.json +64 -0
  228. package/dist/components/pagination/pagination.schema.json +60 -0
  229. package/dist/components/presets.json +2314 -521
  230. package/dist/components/providers/index.js +1 -1
  231. package/dist/components/search/index.d.ts +29 -0
  232. package/dist/components/search/index.js +53 -0
  233. package/dist/components/search/search.schema.dereffed.json +301 -0
  234. package/dist/components/search/search.schema.json +24 -0
  235. package/dist/components/search-bar/index.d.ts +7 -0
  236. package/dist/components/search-bar/index.js +20 -0
  237. package/dist/components/search-bar/search-bar.css +33 -0
  238. package/dist/components/search-bar/search-bar.schema.dereffed.json +45 -0
  239. package/dist/components/search-bar/search-bar.schema.json +35 -0
  240. package/dist/components/search-filter/index.d.ts +7 -0
  241. package/dist/components/search-filter/index.js +20 -0
  242. package/dist/components/search-filter/search-filter.css +22 -0
  243. package/dist/components/search-filter/search-filter.schema.dereffed.json +66 -0
  244. package/dist/components/search-filter/search-filter.schema.json +46 -0
  245. package/dist/components/search-form/SearchForm.client.d.ts +25 -0
  246. package/dist/components/search-form/SearchForm.client.js +228 -0
  247. package/dist/components/search-form/SearchFormPagefind.client.d.ts +5 -0
  248. package/dist/components/search-form/SearchFormPagefind.client.js +40 -0
  249. package/dist/components/search-form/index.d.ts +4 -0
  250. package/dist/components/search-form/index.js +25 -0
  251. package/dist/components/search-form/search-form.css +10 -0
  252. package/dist/components/search-form/search-form.schema.dereffed.json +49 -0
  253. package/dist/components/search-form/search-form.schema.json +38 -0
  254. package/dist/components/search-modal/RadioEmit.client.d.ts +5 -0
  255. package/dist/components/search-modal/RadioEmit.client.js +17 -0
  256. package/dist/components/search-modal/SearchModal.client.d.ts +5 -0
  257. package/dist/components/search-modal/SearchModal.client.js +31 -0
  258. package/dist/components/search-modal/index.d.ts +18 -0
  259. package/dist/components/search-modal/index.js +39 -0
  260. package/dist/components/search-modal/search-modal.css +27 -0
  261. package/dist/components/search-modal/search-modal.schema.dereffed.json +70 -0
  262. package/dist/components/search-modal/search-modal.schema.json +24 -0
  263. package/dist/components/search-result/index.d.ts +7 -0
  264. package/dist/components/search-result/index.js +29 -0
  265. package/dist/components/search-result/search-result.css +76 -0
  266. package/dist/components/search-result/search-result.schema.dereffed.json +90 -0
  267. package/dist/components/search-result/search-result.schema.json +52 -0
  268. package/dist/components/search-result-match/index.d.ts +7 -0
  269. package/dist/components/search-result-match/index.js +18 -0
  270. package/dist/components/search-result-match/search-result-match.css +18 -0
  271. package/dist/components/search-result-match/search-result-match.schema.dereffed.json +33 -0
  272. package/dist/components/search-result-match/search-result-match.schema.json +31 -0
  273. package/dist/components/section/index.d.ts +1 -1
  274. package/dist/components/section/index.js +15 -17
  275. package/dist/components/section/section.css +45 -58
  276. package/dist/components/section/section.schema.dereffed.json +17045 -1546
  277. package/dist/components/section/section.schema.json +38 -11
  278. package/dist/components/seo/seo.schema.dereffed.json +0 -3
  279. package/dist/components/settings/settings.schema.dereffed.json +24 -36
  280. package/dist/components/slider/index.d.ts +4 -2
  281. package/dist/components/slider/index.js +19 -3
  282. package/dist/components/slider/slider.css +14 -9
  283. package/dist/components/slider/slider.schema.dereffed.json +72 -67
  284. package/dist/components/split-even/index.d.ts +12 -0
  285. package/dist/components/split-even/index.js +26 -0
  286. package/dist/components/split-even/split-even.css +103 -0
  287. package/dist/components/split-even/split-even.schema.dereffed.json +7322 -0
  288. package/dist/components/split-even/split-even.schema.json +212 -0
  289. package/dist/components/split-weighted/index.d.ts +12 -0
  290. package/dist/components/split-weighted/index.js +42 -0
  291. package/dist/components/split-weighted/split-weighted.css +133 -0
  292. package/dist/components/split-weighted/split-weighted.schema.dereffed.json +7382 -0
  293. package/dist/components/split-weighted/split-weighted.schema.json +254 -0
  294. package/dist/components/stat/stat.schema.dereffed.json +0 -3
  295. package/dist/components/stats/stats.schema.dereffed.json +0 -6
  296. package/dist/components/teaser-card/index.d.ts +1 -1
  297. package/dist/components/teaser-card/index.js +10 -9
  298. package/dist/components/teaser-card/teaser-card.css +106 -54
  299. package/dist/components/teaser-card/teaser-card.schema.dereffed.json +10 -7
  300. package/dist/components/teaser-card/teaser-card.schema.json +10 -4
  301. package/dist/components/testimonial/testimonial.schema.dereffed.json +0 -3
  302. package/dist/components/testimonials/index.d.ts +1 -1
  303. package/dist/components/testimonials/testimonials.css +4 -0
  304. package/dist/components/testimonials/testimonials.schema.dereffed.json +0 -3
  305. package/dist/components/text/text.css +2 -2
  306. package/dist/components/text/text.schema.dereffed.json +0 -3
  307. package/dist/components/tile/tile.schema.dereffed.json +3 -6
  308. package/dist/components/tile/tile.schema.json +2 -2
  309. package/dist/components/video-curtain/index.d.ts +1 -1
  310. package/dist/components/video-curtain/index.js +12 -4
  311. package/dist/components/video-curtain/video-curtain.css +54 -31
  312. package/dist/components/video-curtain/video-curtain.schema.dereffed.json +6 -7
  313. package/dist/components/video-curtain/video-curtain.schema.json +3 -3
  314. package/dist/global.css +1310 -66
  315. package/dist/static/fonts/systemics/Montserrat-Bold.woff2 +0 -0
  316. package/dist/static/fonts/systemics/Montserrat-Light.woff2 +0 -0
  317. package/dist/static/fonts/systemics/Montserrat-Medium.woff2 +0 -0
  318. package/dist/static/fonts/systemics/Montserrat-Regular.woff2 +0 -0
  319. package/dist/static/fonts/systemics/Montserrat-SemiBold.woff2 +0 -0
  320. package/dist/static/img/about/angled-image.png +0 -0
  321. package/dist/static/img/about/cta.png +0 -0
  322. package/dist/static/img/about/cutout.png +0 -0
  323. package/dist/static/img/about/disclaimer.png +0 -0
  324. package/dist/static/img/about/purpose.png +0 -0
  325. package/dist/static/img/about/spoiler.png +0 -0
  326. package/dist/static/img/kickstartDS/CMS-Starter producthunt-slide-01.svg +72 -0
  327. package/dist/static/img/kickstartDS/CMS-Starter producthunt-slide-02.svg +112 -0
  328. package/dist/static/img/kickstartDS/CMS-Starter producthunt-slide-03.svg +197 -0
  329. package/dist/static/img/kickstartDS/CMS-Starter producthunt-slide-04.svg +76 -0
  330. package/dist/static/img/kickstartDS/CMS-Starter producthunt-slide-05.svg +82 -0
  331. package/dist/static/img/kickstartDS/CMS-Starter producthunt-slide-06.svg +219 -0
  332. package/dist/static/img/kickstartDS/CMS-Starter producthunt-slide-07.svg +85 -0
  333. package/dist/static/img/logos/logoipsum-344.svg +174 -0
  334. package/dist/static/img/logos/logoipsum-347.svg +52 -0
  335. package/dist/static/img/logos/logoipsum-352.svg +22 -0
  336. package/dist/static/img/logos/logoipsum-356.svg +20 -0
  337. package/dist/static/img/logos/logoipsum-358.svg +29 -0
  338. package/dist/static/img/logos/logoipsum-369.svg +20 -0
  339. package/dist/static/img/logos/logoipsum-373.svg +17 -0
  340. package/dist/static/img/people/author-alex.png +0 -0
  341. package/dist/static/img/people/author-emily.png +0 -0
  342. package/dist/static/img/people/author-john.png +0 -0
  343. package/dist/static/img/people/contact-person.png +0 -0
  344. package/dist/static/img/screenshots/blog-blog-aside--default.png +0 -0
  345. package/dist/static/img/screenshots/blog-blog-author--default.png +0 -0
  346. package/dist/static/img/screenshots/blog-blog-head--default.png +0 -0
  347. package/dist/static/img/screenshots/blog-blog-teaser--default.png +0 -0
  348. package/dist/static/img/screenshots/components-button--primary-button.png +0 -0
  349. package/dist/static/img/screenshots/components-button--primary-disabled-button.png +0 -0
  350. package/dist/static/img/screenshots/components-button--secondary-button.png +0 -0
  351. package/dist/static/img/screenshots/components-button--tertiary-button.png +0 -0
  352. package/dist/static/img/screenshots/components-contact--circular-avatar.png +0 -0
  353. package/dist/static/img/screenshots/components-contact--full-image-width.png +0 -0
  354. package/dist/static/img/screenshots/components-contact--vertical-image-with-paragraph.png +0 -0
  355. package/dist/static/img/screenshots/components-contact--wide-image.png +0 -0
  356. package/dist/static/img/screenshots/components-cta--align-bottom.png +0 -0
  357. package/dist/static/img/screenshots/components-cta--angled-image.png +0 -0
  358. package/dist/static/img/screenshots/components-cta--banner.png +0 -0
  359. package/dist/static/img/screenshots/components-cta--colored-banner.png +0 -0
  360. package/dist/static/img/screenshots/components-cta--contact-banner.png +0 -0
  361. package/dist/static/img/screenshots/components-cta--highlighted.png +0 -0
  362. package/dist/static/img/screenshots/components-cta--left-aligned.png +0 -0
  363. package/dist/static/img/screenshots/components-cta--product-advertisement.png +0 -0
  364. package/dist/static/img/screenshots/components-cta--split-banner.png +0 -0
  365. package/dist/static/img/screenshots/components-faq--dropdown-list.png +0 -0
  366. package/dist/static/img/screenshots/components-faq--single-dropdown.png +0 -0
  367. package/dist/static/img/screenshots/components-features--icon-beside-with-link-in-text.png +0 -0
  368. package/dist/static/img/screenshots/components-features--icon-centered.png +0 -0
  369. package/dist/static/img/screenshots/components-features--icon-intext-with-link.png +0 -0
  370. package/dist/static/img/screenshots/components-features--list-view.png +0 -0
  371. package/dist/static/img/screenshots/components-features--stack-with-button.png +0 -0
  372. package/dist/static/img/screenshots/components-gallery--free-aspect-ratio.png +0 -0
  373. package/dist/static/img/screenshots/components-gallery--large-landscape-tiles.png +0 -0
  374. package/dist/static/img/screenshots/components-gallery--small-squares-with-lightbox.png +0 -0
  375. package/dist/static/img/screenshots/components-gallery--stack-landscape.png +0 -0
  376. package/dist/static/img/screenshots/components-headline--h-1.png +0 -0
  377. package/dist/static/img/screenshots/components-headline--h-2.png +0 -0
  378. package/dist/static/img/screenshots/components-headline--h-3.png +0 -0
  379. package/dist/static/img/screenshots/components-headline--h-4.png +0 -0
  380. package/dist/static/img/screenshots/components-headline--order-swapped.png +0 -0
  381. package/dist/static/img/screenshots/components-headline--with-markdown.png +0 -0
  382. package/dist/static/img/screenshots/components-headline--with-subheadline.png +0 -0
  383. package/dist/static/img/screenshots/components-hero--text-below-image.png +0 -0
  384. package/dist/static/img/screenshots/components-hero--text-box-on-full-screen.png +0 -0
  385. package/dist/static/img/screenshots/components-hero--text-on-image-with-overlay.png +0 -0
  386. package/dist/static/img/screenshots/components-html--html.png +0 -0
  387. package/dist/static/img/screenshots/components-html--with-consent.png +0 -0
  388. package/dist/static/img/screenshots/components-html--with-script.png +0 -0
  389. package/dist/static/img/screenshots/components-image-story--sticky-image-next-to-scrolling-text.png +0 -0
  390. package/dist/static/img/screenshots/components-image-text--above-layout.png +0 -0
  391. package/dist/static/img/screenshots/components-image-text--beside-right-layout.png +0 -0
  392. package/dist/static/img/screenshots/components-logos--centered-with-button.png +0 -0
  393. package/dist/static/img/screenshots/components-logos--left-aligned-with-text-link.png +0 -0
  394. package/dist/static/img/screenshots/components-logos--logo-row.png +0 -0
  395. package/dist/static/img/screenshots/components-logos--logo-wall.png +0 -0
  396. package/dist/static/img/screenshots/components-mosaic--colorful-text-with-illustrations.png +0 -0
  397. package/dist/static/img/screenshots/components-mosaic--colorful-tiles.png +0 -0
  398. package/dist/static/img/screenshots/components-stats--count-up-with-description.png +0 -0
  399. package/dist/static/img/screenshots/components-stats--count-up-with-icons.png +0 -0
  400. package/dist/static/img/screenshots/components-teaser-card--page-navigation.png +0 -0
  401. package/dist/static/img/screenshots/components-teaser-card--product-tiles.png +0 -0
  402. package/dist/static/img/screenshots/components-teaser-card--showcase-preview.png +0 -0
  403. package/dist/static/img/screenshots/components-testimonials--alternating-layout.png +0 -0
  404. package/dist/static/img/screenshots/components-testimonials--list-layout.png +0 -0
  405. package/dist/static/img/screenshots/components-testimonials--simple.png +0 -0
  406. package/dist/static/img/screenshots/components-testimonials--slider-layout.png +0 -0
  407. package/dist/static/img/screenshots/components-testimonials--with-rating.png +0 -0
  408. package/dist/static/img/screenshots/components-testimonials--with-title.png +0 -0
  409. package/dist/static/img/screenshots/components-text--centered.png +0 -0
  410. package/dist/static/img/screenshots/components-text--highlight.png +0 -0
  411. package/dist/static/img/screenshots/components-text--multi-column.png +0 -0
  412. package/dist/static/img/screenshots/components-text--single-column.png +0 -0
  413. package/dist/static/img/screenshots/components-video-curtain--atmospheric-video-with-overlay.png +0 -0
  414. package/dist/static/img/screenshots/components-video-curtain--color-neutral-text.png +0 -0
  415. package/dist/static/img/screenshots/components-video-curtain--color-neutral-video.png +0 -0
  416. package/dist/static/img/screenshots/corporate-breadcrumb--default.png +0 -0
  417. package/dist/static/img/screenshots/corporate-business-card--centered.png +0 -0
  418. package/dist/static/img/screenshots/corporate-business-card--default.png +0 -0
  419. package/dist/static/img/screenshots/corporate-business-card--without-image.png +0 -0
  420. package/dist/static/img/screenshots/corporate-content-nav--default.png +0 -0
  421. package/dist/static/img/screenshots/corporate-cookie-consent--banner.png +0 -0
  422. package/dist/static/img/screenshots/corporate-cookie-consent--c-15-t.png +0 -0
  423. package/dist/static/img/screenshots/corporate-cookie-consent--card.png +0 -0
  424. package/dist/static/img/screenshots/corporate-downloads--complete.png +0 -0
  425. package/dist/static/img/screenshots/corporate-downloads--description-only.png +0 -0
  426. package/dist/static/img/screenshots/corporate-downloads--mixed.png +0 -0
  427. package/dist/static/img/screenshots/corporate-downloads--technical-details-only.png +0 -0
  428. package/dist/static/img/screenshots/corporate-pagination--default.png +0 -0
  429. package/dist/static/img/screenshots/corporate-search-bar--default.png +0 -0
  430. package/dist/static/img/screenshots/corporate-search-filter--default.png +0 -0
  431. package/dist/static/img/screenshots/corporate-search-form--pagefind.png +0 -0
  432. package/dist/static/img/screenshots/corporate-search-modal--pagefind.png +0 -0
  433. package/dist/static/img/screenshots/corporate-search-result--default.png +0 -0
  434. package/dist/static/img/screenshots/event-event-filter--default.png +0 -0
  435. package/dist/static/img/screenshots/event-event-header--default.png +0 -0
  436. package/dist/static/img/screenshots/event-event-latest--default.png +0 -0
  437. package/dist/static/img/screenshots/event-event-latest-teaser--default.png +0 -0
  438. package/dist/static/img/screenshots/event-event-list-teaser--default.png +0 -0
  439. package/dist/static/img/screenshots/event-event-location--default.png +0 -0
  440. package/dist/static/img/screenshots/event-event-login--default.png +0 -0
  441. package/dist/static/img/screenshots/event-event-registration--default.png +0 -0
  442. package/dist/static/img/screenshots/form-checkbox--default.png +0 -0
  443. package/dist/static/img/screenshots/form-radio--default.png +0 -0
  444. package/dist/static/img/screenshots/form-select-field--default.png +0 -0
  445. package/dist/static/img/screenshots/form-text-area--default.png +0 -0
  446. package/dist/static/img/screenshots/form-text-field--default.png +0 -0
  447. package/dist/static/img/screenshots/layout-divider--accent.png +0 -0
  448. package/dist/static/img/screenshots/layout-divider--default.png +0 -0
  449. package/dist/static/img/screenshots/layout-footer--footer.png +0 -0
  450. package/dist/static/img/screenshots/layout-header--header.png +0 -0
  451. package/dist/static/img/screenshots/layout-section--accent-background.png +0 -0
  452. package/dist/static/img/screenshots/layout-section--background-image.png +0 -0
  453. package/dist/static/img/screenshots/layout-section--bold-background.png +0 -0
  454. package/dist/static/img/screenshots/layout-section--dynamic-layout.png +0 -0
  455. package/dist/static/img/screenshots/layout-section--framed.png +0 -0
  456. package/dist/static/img/screenshots/layout-section--inverted.png +0 -0
  457. package/dist/static/img/screenshots/layout-section--list-layout.png +0 -0
  458. package/dist/static/img/screenshots/layout-section--slider.png +0 -0
  459. package/dist/static/img/screenshots/layout-section--tile-layout.png +0 -0
  460. package/dist/static/img/screenshots/layout-section--with-buttons.png +0 -0
  461. package/dist/static/img/screenshots/layout-slider--with-arrows.png +0 -0
  462. package/dist/static/img/screenshots/layout-slider--with-autoplay.png +0 -0
  463. package/dist/static/img/screenshots/layout-slider--with-nav.png +0 -0
  464. package/dist/static/img/screenshots/layout-slider--with-teased-neighbours.png +0 -0
  465. package/dist/static/img/screenshots/layout-split-even--faq-with-form.png +0 -0
  466. package/dist/static/img/screenshots/layout-split-even--text-with-logos.png +0 -0
  467. package/dist/static/img/screenshots/layout-split-weighted--text-with-contact.png +0 -0
  468. package/dist/static/img/screenshots/layout-split-weighted--text-with-teaser.png +0 -0
  469. package/dist/static/img/screenshots/page-archetypes-about--about.png +0 -0
  470. package/dist/static/img/screenshots/page-archetypes-blog-overview--blog-overview.png +0 -0
  471. package/dist/static/img/screenshots/page-archetypes-blog-post--blog-post.png +0 -0
  472. package/dist/static/img/screenshots/page-archetypes-event-detail--event-detail.png +0 -0
  473. package/dist/static/img/screenshots/page-archetypes-event-list--event-list.png +0 -0
  474. package/dist/static/img/screenshots/page-archetypes-job-detail--job-detail.png +0 -0
  475. package/dist/static/img/screenshots/page-archetypes-jobs--jobs.png +0 -0
  476. package/dist/static/img/screenshots/page-archetypes-landingpage--landingpage.png +0 -0
  477. package/dist/static/img/screenshots/page-archetypes-overview--overview.png +0 -0
  478. package/dist/static/img/screenshots/page-archetypes-search--search.png +0 -0
  479. package/dist/static/img/screenshots/page-archetypes-showcase--showcase.png +0 -0
  480. package/dist/static/logo-dark.svg +13 -0
  481. package/dist/static/logo-dsa-inverted.svg +26 -0
  482. package/dist/static/logo-dsa.svg +26 -0
  483. package/dist/static/logo-inverted.svg +12 -25
  484. package/dist/static/logo.svg +12 -25
  485. package/dist/tokens/IconSprite.js +50 -0
  486. package/dist/tokens/icon-sprite.html +18 -0
  487. package/dist/tokens/themes.css +4 -4
  488. package/dist/tokens/tokens.css +448 -752
  489. package/dist/tokens/tokens.js +673 -774
  490. package/package.json +14 -5
  491. package/dist/components/split/index.d.ts +0 -14
  492. package/dist/components/split/index.js +0 -17
  493. package/dist/components/split/split.css +0 -53
  494. package/dist/components/split/split.schema.dereffed.json +0 -29
  495. package/dist/components/split/split.schema.json +0 -19
  496. package/dist/static/img/logos/logoipsum-212.svg +0 -12
  497. package/dist/static/img/logos/logoipsum-217.svg +0 -4
  498. package/dist/static/img/logos/logoipsum-239.svg +0 -16
  499. package/dist/static/img/logos/logoipsum-244.svg +0 -19
  500. package/dist/static/img/logos/logoipsum-250.svg +0 -21
  501. package/dist/static/img/logos/logoipsum-286.svg +0 -20
  502. package/dist/static/img/screenshots/layout-section--cards.png +0 -0
  503. package/dist/static/img/screenshots/layout-section--colorful-gradient.png +0 -0
  504. package/dist/static/img/screenshots/layout-section--flex-layout.png +0 -0
  505. package/dist/static/img/screenshots/layout-section--spotlight.png +0 -0
  506. package/dist/static/img/screenshots/layout-section--stagelights.png +0 -0
package/dist/global.css CHANGED
@@ -291,54 +291,57 @@ h3 {
291
291
  --c-rich-text_headline--margin:1.5em 0 1em;
292
292
  }
293
293
  }
294
- :root,
295
- [ks-inverted],
296
- [ks-theme] {
297
- --dsa-text-color-on-primary-base: var(--ks-color-fg);
298
- --dsa-text-color-on-primary-inverted-base: var(--ks-color-fg-inverted);
294
+ :root, [ks-inverted], [ks-theme] {
295
+ --dsa-text-color-on-primary-base: var(--ks-color-fg-inverted);
296
+ --dsa-text-color-on-primary-inverted-base: var(--ks-color-fg);
297
+ --dsa-overlay--background-color: var(--ks-color-fg-alpha-4);
298
+ --dsa-overlay-box_transparent--background-color: var(--ks-color-bg-alpha-4);
299
+ --dsa-overlay-box_transparent--backdrop-filter: blur(16px);
300
+ --dsa-overlay-box_opaque--background-color: var(--ks-color-bg-alpha-2);
301
+ --dsa-overlay-box_opaque--backdrop-filter: blur(20px);
302
+ --dsa-overlay-box--text-color: var(--ks-color-fg);
303
+ --dsa-overlay-text--shadow-base: 0 0 10px var(--ks-color-fg-alpha-3);
304
+ --dsa-overlay-text--shadow-inverted-base: 0 0 10px var(--ks-color-fg-alpha-3-inverted);
305
+ --dsa-overlay-text--text-color-base: var(--ks-text-color-display-inverted);
306
+ --dsa-overlay-text--text-color-inverted-base: var(--ks-text-color-display);
299
307
  --dsa-topic--font: var(--ks-font-display-m);
300
- --dsa-topic--font-weight: var(--ks-font-weight-medium);
308
+ --dsa-topic--font-weight: var(--ks-font-weight-semi-bold);
301
309
  --dsa-topic--color: var(--ks-text-color-display);
302
310
  --dsa-topic--font-family: var(--ks-font-family-display);
303
- --dsa-link--font-weight: var(--ks-font-weight-semi-bold);
311
+ --dsa-link--font-weight: var(--ks-font-weight-regular);
304
312
  --dsa-link--color: var(--ks-text-color-default-interactive);
305
313
  --dsa-link--color_hover: var(--ks-text-color-default-interactive-hover);
306
- --dsa-link--text-decoration: underline;
307
- --dsa-link--text-decoration_hover: underline;
308
- --dsa-typo--highlight: linear-gradient(90deg, var(--ks-color-primary) 0%, var(--ks-color-secondary) 100%);
309
- --dsa-content--spacing: var(--ks-spacing-inset-l);
314
+ --dsa-link--text-decoration: none;
315
+ --dsa-link--text-decoration_hover: none;
316
+ --dsa-typo--highlight: var(--ks-color-primary);
317
+ --dsa-content--horizontal-spacing: var(--ks-spacing-inset-l);
318
+ --dsa-content--vertical-spacing: var(--ks-spacing-xxl);
310
319
  --dsa-content--width_narrow: calc(var(--ks-font-size-copy-m) * 34);
311
320
  --dsa-content--width_default: calc(var(--ks-font-size-copy-m) * 50);
312
- --dsa-content--width_wide: calc(var(--ks-font-size-copy-m) * 64);
321
+ --dsa-content--width_wide: calc(var(--ks-font-size-copy-m) * 72);
313
322
  --dsa-content--width_max: 100vw;
314
323
  --dsa-content--width_full: 100vw;
315
324
  --dsa-tile--width_smallest: calc(var(--ks-font-size-copy-m) * 10);
316
325
  --dsa-tile--width_small: calc(var(--ks-font-size-copy-m) * 14);
317
326
  --dsa-tile--width_medium: calc(var(--ks-font-size-copy-m) * 20);
318
327
  --dsa-tile--width_large: calc(var(--ks-font-size-copy-m) * 28);
319
- --dsa-tile--width_largest: calc(var(--ks-font-size-copy-m) * 38);
320
- --dsa-logo--height: 2.25rem;
328
+ --dsa-tile--width_largest: calc(var(--ks-font-size-copy-m) * 42);
329
+ --dsa-logo--height: 2rem;
321
330
  --dsa-header--height: calc(var(--dsa-logo--height) + var(--ks-spacing-stack-m) + var(--ks-spacing-stack-m));
322
331
  }
323
332
  @media (min-width: 48em) {
324
- :root,
325
- [ks-inverted],
326
- [ks-theme] {
327
- --dsa-content--spacing: var(--ks-spacing-inset-xl);
333
+ :root, [ks-inverted], [ks-theme] {
334
+ --dsa-content--horizontal-spacing: var(--ks-spacing-inset-xl);
328
335
  }
329
336
  }
330
337
  @media (min-width: 48em) {
331
- :root,
332
- [ks-inverted],
333
- [ks-theme] {
334
- --dsa-logo--height: 2.5rem;
338
+ :root, [ks-inverted], [ks-theme] {
339
+ --dsa-logo--height: 2.25rem;
335
340
  }
336
341
  }
337
342
  @media (min-width: 62em) {
338
- :root,
339
- [ks-inverted],
340
- [ks-theme] {
341
- --dsa-logo--height: 3rem;
343
+ :root, [ks-inverted], [ks-theme] {
344
+ --dsa-logo--height: 2.5rem;
342
345
  }
343
346
  }
344
347
 
@@ -355,7 +358,7 @@ h3 {
355
358
  --dsa-blog-teaser__topic--font-weight: var(--dsa-topic--font-weight);
356
359
  --dsa-blog-teaser__tag-label--font: var(--ks-font-interface-xs);
357
360
  --dsa-blog-teaser__copy--font: var(--ks-font-copy-s);
358
- --dsa-blog-teaser__copy--color: var(--dsa-rich-text--color);
361
+ --dsa-blog-teaser__copy--color: var(--ks-text-color-copy);
359
362
  --dsa-blog-teaser__copy--color_hover: var(--ks-text-color-default);
360
363
  --dsa-blog-teaser__copy--margin-top: 0.5em;
361
364
  --dsa-blog-teaser__meta--font: var(--ks-spacing-stack-s);
@@ -387,7 +390,7 @@ h3 {
387
390
  --c-teaser--background: var(--dsa-blog-teaser--background, transparent);
388
391
  --c-post-teaser--gap: var(--dsa-blog-teaser--gap, var(--ks-spacing-stack-s) var(--ks-spacing-inline-s));
389
392
  --c-teaser_text--spacing: var(--dsa-blog-teaser__copy--margin-top, var(--ks-spacing-stack-s));
390
- --c-post-teaser--color: var(--dsa-blog-teaser__copy--color, var(--dsa-rich-text--color));
393
+ --c-post-teaser--color: var(--dsa-blog-teaser__copy--color, var(--ks-text-color-copy));
391
394
  }
392
395
  .dsa-blog-teaser.c-post-teaser .c-tag-label {
393
396
  --c-tag-label--font: var(--dsa-blog-teaser__tag-label--font, var(--ks-font-interface-s));
@@ -441,84 +444,130 @@ h3 {
441
444
  }
442
445
 
443
446
  .c-form-check {
444
- --dsa-form-check--border: var(--ks-border-width-default) solid;
445
- --dsa-form-check--border-color: var(--ks-border-color-interface-interactive);
446
- --dsa-form-check--border-color_hover: var(--ks-border-color-interface-interactive-hover);
447
- --dsa-form-check--border-color_focus: var(--ks-border-color-interface-interactive-active);
448
- --dsa-form-check--border-color_checked: var(--ks-border-color-interface-interactive-selected);
449
- --dsa-form-check--background: var(--ks-background-color-interface-interactive);
450
- --dsa-form-check--background_checked: var(--ks-color-secondary);
451
- --dsa-form-check--shadow_focus: 0 0 4px 0;
452
- --dsa-form-check__checkmark--color: var(--dsa-text-color-on-primary);
447
+ --dsa-check--background: transparent;
448
+ --dsa-check--background_checked: var(--ks-color-primary);
449
+ --dsa-check--background_active: transparent;
450
+ --dsa-check--border: var(--ks-border-width-default) solid;
451
+ --dsa-check--border-color: var(--ks-border-color-interface-interactive);
452
+ --dsa-check--border-color_hover: var(--ks-border-color-interface-interactive-hover);
453
+ --dsa-check--border-color_focus: var(--ks-border-color-interface-interactive-active);
454
+ --dsa-check--border-color_checked: var(--ks-border-color-interface-interactive-selected);
455
+ --dsa-check--size: 1.5em;
456
+ --dsa-check--shadow_focus: 0 0 0 var(--ks-border-width-emphasized);
457
+ --dsa-check_box--border-radius: min(var(--ks-border-radius-control), calc(var(--dsa-check--size) / 4));
458
+ --dsa-check_radio--border-radius: var(--ks-border-radius-circle);
459
+ --dsa-check_radio__checkmark--size: calc(var(--dsa-check--size) * 0.5);
460
+ --dsa-check__checkmark--color: var(--dsa-text-color-on-primary);
461
+ --dsa-check__label--font: var(--ks-font-interface-s);
462
+ --dsa-check__label--font-weight: var(--ks-font-weight-regular);
463
+ --dsa-check__label--color: var(--ks-text-color-interface);
464
+ --dsa-check__label--margin-left: 0.5em;
453
465
  }
454
466
 
455
467
  .c-form-field {
456
- --dsa-form-field--color: var(--ks-text-color-interface);
457
- --dsa-form-field--border: var(--ks-border-width-default) solid;
458
- --dsa-form-field--border-color: var(--ks-border-color-interface-interactive);
459
- --dsa-form-field--border-color_hover: var(--ks-border-color-interface-interactive-hover);
460
- --dsa-form-field--border-color_focus: var(--ks-border-color-interface-interactive-active);
461
- --dsa-form-field--background: var(--ks-background-color-interface-interactive);
462
- --dsa-form-field--shadow_focus: 0 0 4px 0;
463
- --dsa-form-field__placeholder--color: var(--ks-color-fg-alpha-5);
468
+ --dsa-input--color: var(--ks-text-color-interface);
469
+ --dsa-input--border: var(--ks-border-width-default) solid;
470
+ --dsa-input--border-color: var(--ks-border-color-interface-interactive);
471
+ --dsa-input--border-color_hover: var(--ks-border-color-interface-interactive-hover);
472
+ --dsa-input--border-color_focus: var(--ks-border-color-interface-interactive-active);
473
+ --dsa-input--border-color_active: var(--ks-border-color-interface-interactive-active);
474
+ --dsa-input__label--padding-bottom: 0.25em;
475
+ --dsa-input__label--color: var(--ks-text-color-interface);
476
+ --dsa-input__label--font: var(--ks-font-interface-s);
477
+ --dsa-input__label--font-weight: var(--ks-font-weight-semi-bold);
478
+ --dsa-input--font: var(--ks-font-interface-s);
479
+ --dsa-input--background: transparent;
480
+ --dsa-input--background_focus: transparent;
481
+ --dsa-input--padding: 0.4rem 0.75rem 0.35rem;
482
+ --dsa-input--shadow_focus: 0 0 0 var(--ks-border-width-emphasized);
483
+ --dsa-input__placeholder--color: var(--ks-color-fg-alpha-5);
464
484
  }
465
485
 
466
486
  :root .c-form-check, [ks-inverted] .c-form-check, [ks-theme] .c-form-check {
467
- --c-form-check_box--size: var(--dsa-form-check--size, 1rem);
468
- --c-form-check_box--border: var(--dsa-form-check--border, var(--ks-border-width-default)) solid;
469
- --c-form-check_box--border-color: var(--dsa-form-check--border-color, var(--ks-border-color-interface-interactive));
487
+ --c-form-check_box--size: var(--dsa-check--size, 1.125em);
488
+ --c-form-check_box--border: var(--dsa-check--border, var(--ks-border-width-default) solid);
489
+ --c-form-check_box--border-color: var(--dsa-check--border-color, var(--ks-border-color-interface-interactive));
470
490
  --c-form-check_box-hover--border-color: var(
471
- --dsa-form-check--border-color_hover,
491
+ --dsa-check--border-color_hover,
472
492
  var(--ks-border-color-interface-interactive-hover)
473
493
  );
474
494
  --c-form-check_box-focus--border-color: var(
475
- --dsa-form-check--border-color_focus,
495
+ --dsa-check--border-color_focus,
476
496
  var(--ks-border-color-interface-interactive-active)
477
497
  );
478
498
  --c-form-check_box-checked--border-color: var(
479
- --dsa-form-check--border-color_checked,
499
+ --dsa-check--border-color_checked,
480
500
  var(--ks-border-color-interface-interactive-selected)
481
501
  );
482
- --c-form-check_box--background: var(--dsa-form-check--background, var(--ks-background-color-interface-interactive));
502
+ --c-form-check_box--background: var(--dsa-check--background, var(--ks-background-color-interface-interactive));
483
503
  --c-form-check_box-checked--background: var(
484
- --dsa-form-check--background_checked,
504
+ --dsa-check--background_checked,
485
505
  var(--ks-background-color-interface-interactive-selected)
486
506
  );
487
- --c-form-check_box-focus--shadow: var(--dsa-form-check--shadow_focus, 0 0 4px 0);
488
- --c-form-check_checkmark--color: var(--dsa-form-check__checkmark--color, var(--dsa-text-color-on-primary));
507
+ --c-form-check_checkmark--color: var(--dsa-check__checkmark--color, var(--dsa-text-color-on-primary));
508
+ --c-form-check_box--border-radius: var(--dsa-check--border-radius, 2px);
509
+ --c-form-check_box-focus--shadow: var(--dsa-check--shadow_focus, 0 0 4px 0);
510
+ --c-form-check_checkmark--size: var(--dsa-check_radio__checkmark--size, calc(var(--dsa-check--size) * 0.5));
511
+ font: var(--dsa-check__label--font, var(--ks-font-interface-s));
512
+ font-weight: var(--dsa-check__label--font-weight, var(--ks-font-weight-regular));
513
+ color: var(--dsa-check__label--color, var(--ks-text-color-interface-interactive));
514
+ }
515
+ :root .c-form-check__label, [ks-inverted] .c-form-check__label, [ks-theme] .c-form-check__label {
516
+ margin-left: var(--dsa-check__label--margin-left, 0.5em);
517
+ }
518
+ :root .c-form-check--checkbox, [ks-inverted] .c-form-check--checkbox, [ks-theme] .c-form-check--checkbox {
519
+ --c-form-check_box--border-radius: var(
520
+ --dsa-check_box--border-radius,
521
+ min(4px, calc(var(--dsa-check--size) / 4))
522
+ );
523
+ }
524
+ :root .c-form-check--radio, [ks-inverted] .c-form-check--radio, [ks-theme] .c-form-check--radio {
525
+ --c-form-check_box--border-radius: var(--dsa-check_radio--border-radius, var(--ks-border-radius-circle));
489
526
  }
490
527
  :root .c-form-field, [ks-inverted] .c-form-field, [ks-theme] .c-form-field {
491
- --c-form-field--border: var(--dsa-form-field--border, var(--ks-border-width-default)) solid;
492
- --c-form-field--border-color: var(--dsa-form-field--border-color, var(--ks-border-color-interface-interactive));
528
+ --c-form-field_label--padding: 0 0 var(--dsa-input__label--padding-bottom, 0.25em) 0;
529
+ --c-form-field--border: var(--dsa-input--border, var(--ks-border-width-default) solid);
530
+ --c-form-field--border-color: var(--dsa-input--border-color, var(--ks-border-color-interface-interactive));
493
531
  --c-form-field-hover--border-color: var(
494
- --dsa-form-field--border-color_hover,
532
+ --dsa-input--border-color_hover,
495
533
  var(--ks-border-color-interface-interactive-hover)
496
534
  );
497
535
  --c-form-field-focus--border-color: var(
498
- --dsa-form-field--border-color_focus,
536
+ --dsa-input--border-color_focus,
499
537
  var(--ks-border-color-interface-interactive-active)
500
538
  );
501
- --c-form-field--background: var(--dsa-form-field--background, var(--ks-background-color-interface-interactive));
502
- --c-form-field_focus--shadow: var(--dsa-form-field--shadow_focus, 0 0 4px 0);
539
+ --c-form-field--background: var(--dsa-input--background, var(--ks-background-color-interface-interactive));
540
+ --c-form-field_focus--shadow: var(--dsa-input--shadow_focus, 0 0 4px 0);
503
541
  --c-form-field--background-disabled: var(
504
542
  --ks-background-color-interface-interactive-disabled,
505
543
  var(--ks-background-color-interface-interactive-disabled)
506
544
  );
507
- --c-form-field--color: var(--dsa-form-field--color, var(--ks-text-color-interface));
545
+ --c-form-field--color: var(--dsa-input--color, var(--ks-text-color-interface));
508
546
  --c-form-field_hover--border-color: var(
509
- --dsa-form-field--border-color_hover,
547
+ --dsa-input--border-color_hover,
510
548
  var(--ks-border-color-interface-interactive-hover)
511
549
  );
512
550
  --c-form-field_focus--border-color: var(
513
- --dsa-form-field--border-color_active,
551
+ --dsa-input--border-color_active,
514
552
  var(--ks-border-color-interface-interactive-active)
515
553
  );
516
- --c-form-field_focus--shadow: 0 0 4px -1px;
517
554
  --c-form-field_icon--size: calc(var(--ks-line-height-interface-m) * 0.75em);
518
555
  --c-form-field_icon--color: var(--ks-color-fg-alpha-3);
556
+ --c-form-field_label--color: var(--dsa-input__label--color, var(--ks-text-color-interface));
557
+ }
558
+ :root .c-form-field__input, [ks-inverted] .c-form-field__input, [ks-theme] .c-form-field__input {
559
+ font: var(--dsa-input--font, var(--ks-font-interface-m));
560
+ padding: var(--dsa-input--padding, 0.4rem 0.75rem 0.35rem);
519
561
  }
520
562
  :root .c-form-field__input::placeholder, [ks-inverted] .c-form-field__input::placeholder, [ks-theme] .c-form-field__input::placeholder {
521
- color: var(--dsa-form-field__placeholder--color, var(--ks-color-fg-alpha-5));
563
+ color: var(--dsa-input__placeholder--color, var(--ks-color-fg-alpha-5));
564
+ }
565
+ :root .c-form-field__input:focus, [ks-inverted] .c-form-field__input:focus, [ks-theme] .c-form-field__input:focus {
566
+ background-color: var(--dsa-input--background_focus, var(--ks-background-color-interface-interactive-active));
567
+ }
568
+ :root .c-form-field__label, [ks-inverted] .c-form-field__label, [ks-theme] .c-form-field__label {
569
+ font: var(--dsa-input__label--font, var(--ks-font-interface-s));
570
+ font-weight: var(--dsa-input__label--font-weight, var(--ks-font-weight-regular));
522
571
  }
523
572
 
524
573
  :root {
@@ -554,6 +603,38 @@ h3 {
554
603
  --c-lightbox--error-text-color: var(--ks-color-error) !important;
555
604
  }
556
605
 
606
+ /* inter-regular - latin */
607
+ @font-face {
608
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
609
+ font-family: "Montserrat";
610
+ font-style: normal;
611
+ font-weight: 400;
612
+ src: url("static/fonts/systemics/Montserrat-Regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
613
+ }
614
+ /* inter-500 - latin */
615
+ @font-face {
616
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
617
+ font-family: "Montserrat";
618
+ font-style: normal;
619
+ font-weight: 500;
620
+ src: url("static/fonts/systemics/Montserrat-Medium.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
621
+ }
622
+ /* inter-600 - latin */
623
+ @font-face {
624
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
625
+ font-family: "Montserrat";
626
+ font-style: normal;
627
+ font-weight: 600;
628
+ src: url("static/fonts/systemics/Montserrat-SemiBold.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
629
+ }
630
+ /* inter-700 - latin */
631
+ @font-face {
632
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
633
+ font-family: "Montserrat";
634
+ font-style: normal;
635
+ font-weight: 700;
636
+ src: url("static/fonts/systemics/Montserrat-Bold.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
637
+ }
557
638
  @font-face {
558
639
  font-family: "Fredoka";
559
640
  src: url("static/fonts/dsa/Fredoka-Regular.woff") format("woff2"), url("static/fonts/dsa/Fredoka-Regular.woff") format("woff");
@@ -666,6 +747,1147 @@ h3 {
666
747
  font-style: normal;
667
748
  font-display: swap;
668
749
  }
750
+ .spacings {
751
+ border: 2px solid white;
752
+ display: flex;
753
+ flex-direction: column;
754
+ gap: 6px;
755
+ }
756
+
757
+ .spacing {
758
+ height: 26px;
759
+ background-color: var(--ks-color-fg-alpha-4);
760
+ position: relative;
761
+ }
762
+
763
+ .spacing-xxs {
764
+ width: calc(var(--ks-spacing-xxs) * 1);
765
+ }
766
+
767
+ .spacing-xs {
768
+ width: calc(var(--ks-spacing-xs) * 1);
769
+ }
770
+
771
+ .spacing-s {
772
+ width: calc(var(--ks-spacing-s) * 1);
773
+ }
774
+
775
+ .spacing-m {
776
+ width: calc(var(--ks-spacing-m) * 1);
777
+ }
778
+
779
+ .spacing-l {
780
+ width: calc(var(--ks-spacing-l) * 1);
781
+ }
782
+
783
+ .spacing-xl {
784
+ width: calc(var(--ks-spacing-xl) * 1);
785
+ }
786
+
787
+ .spacing-xxl {
788
+ width: calc(var(--ks-spacing-xxl) * 1);
789
+ }
790
+
791
+ .font-sizes {
792
+ display: flex;
793
+ flex-direction: column;
794
+ gap: var(--ks-spacing-stack-m);
795
+ }
796
+ .font-sizes-display {
797
+ font-family: var(--ks-font-family-display);
798
+ }
799
+ .font-sizes-interface {
800
+ font-family: var(--ks-font-family-interface);
801
+ }
802
+ .font-sizes-copy {
803
+ font-family: var(--ks-font-family-copy);
804
+ }
805
+ .font-sizes-mono {
806
+ font-family: var(--ks-font-family-mono);
807
+ }
808
+
809
+ .font-size {
810
+ color: var(--ks-color-fg);
811
+ }
812
+ .font-size-display-xxs {
813
+ font: var(--ks-font-display-xxs);
814
+ }
815
+ .font-size-display-xs {
816
+ font: var(--ks-font-display-xs);
817
+ }
818
+ .font-size-display-s {
819
+ font: var(--ks-font-display-s);
820
+ }
821
+ .font-size-display-m {
822
+ font: var(--ks-font-display-m);
823
+ }
824
+ .font-size-display-l {
825
+ font: var(--ks-font-display-l);
826
+ }
827
+ .font-size-display-xl {
828
+ font: var(--ks-font-display-xl);
829
+ }
830
+ .font-size-display-xxl {
831
+ font: var(--ks-font-display-xxl);
832
+ }
833
+ .font-size-copy-xxs {
834
+ font-size: var(--ks-font-size-copy-xxs);
835
+ }
836
+ .font-size-copy-xs {
837
+ font-size: var(--ks-font-size-copy-xs);
838
+ }
839
+ .font-size-copy-s {
840
+ font-size: var(--ks-font-size-copy-s);
841
+ }
842
+ .font-size-copy-m {
843
+ font-size: var(--ks-font-size-copy-m);
844
+ }
845
+ .font-size-copy-l {
846
+ font-size: var(--ks-font-size-copy-l);
847
+ }
848
+ .font-size-copy-xl {
849
+ font-size: var(--ks-font-size-copy-xl);
850
+ }
851
+ .font-size-copy-xxl {
852
+ font-size: var(--ks-font-size-copy-xxl);
853
+ }
854
+ .font-size-interface-xxs {
855
+ font-size: var(--ks-font-size-interface-xxs);
856
+ }
857
+ .font-size-interface-xs {
858
+ font-size: var(--ks-font-size-interface-xs);
859
+ }
860
+ .font-size-interface-s {
861
+ font-size: var(--ks-font-size-interface-s);
862
+ }
863
+ .font-size-interface-m {
864
+ font-size: var(--ks-font-size-interface-m);
865
+ }
866
+ .font-size-interface-l {
867
+ font-size: var(--ks-font-size-interface-l);
868
+ }
869
+ .font-size-interface-xl {
870
+ font-size: var(--ks-font-size-interface-xl);
871
+ }
872
+ .font-size-interface-xxl {
873
+ font-size: var(--ks-font-size-interface-xxl);
874
+ }
875
+ .font-size-mono-xxs {
876
+ font-size: var(--ks-font-size-mono-xxs);
877
+ }
878
+ .font-size-mono-xs {
879
+ font-size: var(--ks-font-size-mono-xs);
880
+ }
881
+ .font-size-mono-s {
882
+ font-size: var(--ks-font-size-mono-s);
883
+ }
884
+ .font-size-mono-m {
885
+ font-size: var(--ks-font-size-mono-m);
886
+ }
887
+ .font-size-mono-l {
888
+ font-size: var(--ks-font-size-mono-l);
889
+ }
890
+ .font-size-mono-xl {
891
+ font-size: var(--ks-font-size-mono-xl);
892
+ }
893
+ .font-size-mono-xxl {
894
+ font-size: var(--ks-font-size-mono-xxl);
895
+ }
896
+ .font-size-base-xxs {
897
+ font-size: var(--ks-font-size-xxs);
898
+ }
899
+ .font-size-base-xs {
900
+ font-size: var(--ks-font-size-xs);
901
+ }
902
+ .font-size-base-s {
903
+ font-size: var(--ks-font-size-s);
904
+ }
905
+ .font-size-base-m {
906
+ font-size: var(--ks-font-size-m);
907
+ }
908
+ .font-size-base-l {
909
+ font-size: var(--ks-font-size-l);
910
+ }
911
+ .font-size-base-xl {
912
+ font-size: var(--ks-font-size-xl);
913
+ }
914
+ .font-size-base-xxl {
915
+ font-size: var(--ks-font-size-xxl);
916
+ }
917
+
918
+ :root {
919
+ --global-shrink-factor: 0.8;
920
+ --global-grow-factor: 1.2;
921
+ --global-bp-factor: 1.02;
922
+ }
923
+
924
+ :root {
925
+ --color-test: #ff00ff;
926
+ --color-test-inverted: #00f2ff;
927
+ }
928
+
929
+ :root,
930
+ [ks-theme] {
931
+ --ks-color-test-base: var(--color-test);
932
+ --ks-color-test-inverted-base: var(--color-test-inverted);
933
+ }
934
+
935
+ :root,
936
+ [ks-theme],
937
+ [ks-inverted=false] {
938
+ --ks-color-test: var(--ks-color-test-base);
939
+ --ks-color-test-inverted: var(--ks-color-test-inverted-base);
940
+ }
941
+
942
+ [ks-inverted=true] {
943
+ --ks-color-test: var(--ks-color-test-inverted-base);
944
+ --ks-color-test-inverted: var(--ks-color-test-base);
945
+ }
946
+
947
+ :root,
948
+ [ks-inverted],
949
+ [ks-inverted=true],
950
+ [ks-inverted=false] {
951
+ --ks-color-test-alpha-1: color-mix(in srgb, var(--ks-color-test) 10%, transparent);
952
+ --ks-color-test-alpha-2: color-mix(in srgb, var(--ks-color-test) 20%, transparent);
953
+ --ks-color-test-alpha-3: color-mix(in srgb, var(--ks-color-test) 30%, transparent);
954
+ --ks-color-test-alpha-4: color-mix(in srgb, var(--ks-color-test) 40%, transparent);
955
+ --ks-color-test-alpha-5: color-mix(in srgb, var(--ks-color-test) 50%, transparent);
956
+ --ks-color-test-alpha-6: color-mix(in srgb, var(--ks-color-test) 60%, transparent);
957
+ --ks-color-test-alpha-7: color-mix(in srgb, var(--ks-color-test) 70%, transparent);
958
+ --ks-color-test-alpha-8: color-mix(in srgb, var(--ks-color-test) 80%, transparent);
959
+ --ks-color-test-alpha-9: color-mix(in srgb, var(--ks-color-test) 90%, transparent);
960
+ --ks-color-test-inverted-alpha-1: color-mix(in srgb, var(--ks-color-test-inverted) 10%, transparent);
961
+ --ks-color-test-inverted-alpha-2: color-mix(in srgb, var(--ks-color-test-inverted) 20%, transparent);
962
+ --ks-color-test-inverted-alpha-3: color-mix(in srgb, var(--ks-color-test-inverted) 30%, transparent);
963
+ --ks-color-test-inverted-alpha-4: color-mix(in srgb, var(--ks-color-test-inverted) 40%, transparent);
964
+ --ks-color-test-inverted-alpha-5: color-mix(in srgb, var(--ks-color-test-inverted) 50%, transparent);
965
+ --ks-color-test-inverted-alpha-6: color-mix(in srgb, var(--ks-color-test-inverted) 60%, transparent);
966
+ --ks-color-test-inverted-alpha-7: color-mix(in srgb, var(--ks-color-test-inverted) 70%, transparent);
967
+ --ks-color-test-inverted-alpha-8: color-mix(in srgb, var(--ks-color-test-inverted) 80%, transparent);
968
+ --ks-color-test-inverted-alpha-9: color-mix(in srgb, var(--ks-color-test-inverted) 90%, transparent);
969
+ --ks-color-test-to-bg-1: color-mix(in srgb, var(--ks-color-test) 10%, var(--ks-color-bg));
970
+ --ks-color-test-to-bg-2: color-mix(in srgb, var(--ks-color-test) 20%, var(--ks-color-bg));
971
+ --ks-color-test-to-bg-3: color-mix(in srgb, var(--ks-color-test) 30%, var(--ks-color-bg));
972
+ --ks-color-test-to-bg-4: color-mix(in srgb, var(--ks-color-test) 40%, var(--ks-color-bg));
973
+ --ks-color-test-to-bg-5: color-mix(in srgb, var(--ks-color-test) 50%, var(--ks-color-bg));
974
+ --ks-color-test-to-bg-6: color-mix(in srgb, var(--ks-color-test) 60%, var(--ks-color-bg));
975
+ --ks-color-test-to-bg-7: color-mix(in srgb, var(--ks-color-test) 70%, var(--ks-color-bg));
976
+ --ks-color-test-to-bg-8: color-mix(in srgb, var(--ks-color-test) 80%, var(--ks-color-bg));
977
+ --ks-color-test-to-bg-9: color-mix(in srgb, var(--ks-color-test) 90%, var(--ks-color-bg));
978
+ --ks-color-test-inverted-to-bg-1: color-mix(in srgb, var(--ks-color-test-inverted) 10%, var(--ks-color-bg-inverted));
979
+ --ks-color-test-inverted-to-bg-2: color-mix(in srgb, var(--ks-color-test-inverted) 20%, var(--ks-color-bg-inverted));
980
+ --ks-color-test-inverted-to-bg-3: color-mix(in srgb, var(--ks-color-test-inverted) 30%, var(--ks-color-bg-inverted));
981
+ --ks-color-test-inverted-to-bg-4: color-mix(in srgb, var(--ks-color-test-inverted) 40%, var(--ks-color-bg-inverted));
982
+ --ks-color-test-inverted-to-bg-5: color-mix(in srgb, var(--ks-color-test-inverted) 50%, var(--ks-color-bg-inverted));
983
+ --ks-color-test-inverted-to-bg-6: color-mix(in srgb, var(--ks-color-test-inverted) 60%, var(--ks-color-bg-inverted));
984
+ --ks-color-test-inverted-to-bg-7: color-mix(in srgb, var(--ks-color-test-inverted) 70%, var(--ks-color-bg-inverted));
985
+ --ks-color-test-inverted-to-bg-8: color-mix(in srgb, var(--ks-color-test-inverted) 80%, var(--ks-color-bg-inverted));
986
+ --ks-color-test-inverted-to-bg-9: color-mix(in srgb, var(--ks-color-test-inverted) 90%, var(--ks-color-bg-inverted));
987
+ --ks-color-test-to-fg-1: color-mix(in srgb, var(--ks-color-test) 10%, var(--ks-color-fg));
988
+ --ks-color-test-to-fg-2: color-mix(in srgb, var(--ks-color-test) 20%, var(--ks-color-fg));
989
+ --ks-color-test-to-fg-3: color-mix(in srgb, var(--ks-color-test) 30%, var(--ks-color-fg));
990
+ --ks-color-test-to-fg-4: color-mix(in srgb, var(--ks-color-test) 40%, var(--ks-color-fg));
991
+ --ks-color-test-to-fg-5: color-mix(in srgb, var(--ks-color-test) 50%, var(--ks-color-fg));
992
+ --ks-color-test-to-fg-6: color-mix(in srgb, var(--ks-color-test) 60%, var(--ks-color-fg));
993
+ --ks-color-test-to-fg-7: color-mix(in srgb, var(--ks-color-test) 70%, var(--ks-color-fg));
994
+ --ks-color-test-to-fg-8: color-mix(in srgb, var(--ks-color-test) 80%, var(--ks-color-fg));
995
+ --ks-color-test-to-fg-9: color-mix(in srgb, var(--ks-color-test) 90%, var(--ks-color-fg));
996
+ --ks-color-test-to-fg-1: color-mix(in srgb, var(--ks-color-test-inverted) 10%, var(--ks-color-fg-inverted));
997
+ --ks-color-test-to-fg-2: color-mix(in srgb, var(--ks-color-test-inverted) 20%, var(--ks-color-fg-inverted));
998
+ --ks-color-test-to-fg-3: color-mix(in srgb, var(--ks-color-test-inverted) 30%, var(--ks-color-fg-inverted));
999
+ --ks-color-test-to-fg-4: color-mix(in srgb, var(--ks-color-test-inverted) 40%, var(--ks-color-fg-inverted));
1000
+ --ks-color-test-to-fg-5: color-mix(in srgb, var(--ks-color-test-inverted) 50%, var(--ks-color-fg-inverted));
1001
+ --ks-color-test-to-fg-6: color-mix(in srgb, var(--ks-color-test-inverted) 60%, var(--ks-color-fg-inverted));
1002
+ --ks-color-test-to-fg-7: color-mix(in srgb, var(--ks-color-test-inverted) 70%, var(--ks-color-fg-inverted));
1003
+ --ks-color-test-to-fg-8: color-mix(in srgb, var(--ks-color-test-inverted) 80%, var(--ks-color-fg-inverted));
1004
+ --ks-color-test-to-fg-9: color-mix(in srgb, var(--ks-color-test-inverted) 90%, var(--ks-color-fg-inverted));
1005
+ }
1006
+
1007
+ :root,
1008
+ [ks-theme] {
1009
+ --ks-background-color-test-base: var(--ks-color-test);
1010
+ --ks-background-color-test-inverted-base: var(--ks-color-test-inverted);
1011
+ }
1012
+
1013
+ :root {
1014
+ --ks-background-color-test: var(--ks-background-color-test-base);
1015
+ --ks-background-color-test-inverted: var(--ks-background-color-test-inverted-base);
1016
+ }
1017
+
1018
+ [ks-inverted=true] {
1019
+ --ks-background-color-test: var(--ks-background-color-test-inverted-base);
1020
+ --ks-background-color-test-inverted: var(--ks-background-color-test-base);
1021
+ }
1022
+
1023
+ .dsa-button.c-button {
1024
+ --dsa-button_primary--background-color: var(--ks-background-color-test);
1025
+ }
1026
+
1027
+ :root,
1028
+ [ks-inverted=true],
1029
+ [ks-inverted=false],
1030
+ [ks-theme] {
1031
+ --ks-font-family-display: Fredoka, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
1032
+ --ks-font-family-copy: Mulish, "Helvetica Neue", Helvetica, Arial, sans-serif;
1033
+ --ks-font-family-interface: Mulish, system-ui, -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI",
1034
+ "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen",
1035
+ "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
1036
+ --ks-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
1037
+ --ks-font-weight-light: 300;
1038
+ --ks-font-weight-regular: 400;
1039
+ --ks-font-weight-medium: 500;
1040
+ --ks-font-weight-semi-bold: 600;
1041
+ --ks-font-weight-bold: 700;
1042
+ --ks-line-height-display-base-factor: 1.15;
1043
+ --ks-line-height-display-shrink-factor: 1;
1044
+ --ks-line-height-display-grow-factor: 1;
1045
+ --ks-line-height-display-xxs: calc(
1046
+ var(--ks-line-height-display-xs) * calc(var(--ks-line-height-display-shrink-factor) * 1)
1047
+ );
1048
+ --ks-line-height-display-xs: calc(
1049
+ var(--ks-line-height-display-s) * calc(var(--ks-line-height-display-shrink-factor) * 1)
1050
+ );
1051
+ --ks-line-height-display-s: calc(
1052
+ var(--ks-line-height-display-m) * calc(var(--ks-line-height-display-shrink-factor) * 1)
1053
+ );
1054
+ --ks-line-height-display-m: var(--ks-line-height-display-base-factor);
1055
+ --ks-line-height-display-l: calc(var(--ks-line-height-display-m) * var(--ks-line-height-display-grow-factor));
1056
+ --ks-line-height-display-xl: calc(var(--ks-line-height-display-l) * var(--ks-line-height-display-grow-factor));
1057
+ --ks-line-height-display-xxl: calc(var(--ks-line-height-display-xl) * var(--ks-line-height-display-grow-factor));
1058
+ --ks-line-height-copy-base-factor: 1.5;
1059
+ --ks-line-height-copy-shrink-factor: 1;
1060
+ --ks-line-height-copy-grow-factor: 1;
1061
+ --ks-line-height-copy-xxs: calc(var(--ks-line-height-copy-xs) * calc(var(--ks-line-height-copy-shrink-factor) * 1));
1062
+ --ks-line-height-copy-xs: calc(var(--ks-line-height-copy-s) * calc(var(--ks-line-height-copy-shrink-factor) * 1));
1063
+ --ks-line-height-copy-s: calc(var(--ks-line-height-copy-m) * calc(var(--ks-line-height-copy-shrink-factor) * 1));
1064
+ --ks-line-height-copy-m: var(--ks-line-height-copy-base-factor);
1065
+ --ks-line-height-copy-l: calc(var(--ks-line-height-copy-m) * var(--ks-line-height-copy-grow-factor));
1066
+ --ks-line-height-copy-xl: calc(var(--ks-line-height-copy-l) * var(--ks-line-height-copy-grow-factor));
1067
+ --ks-line-height-copy-xxl: calc(var(--ks-line-height-copy-xl) * var(--ks-line-height-copy-grow-factor));
1068
+ --ks-line-height-copy-base-factor: 1.5;
1069
+ --ks-line-height-interface-shrink-factor: 1;
1070
+ --ks-line-height-interface-grow-factor: 1;
1071
+ --ks-line-height-interface-xxs: calc(
1072
+ var(--ks-line-height-interface-xs) * calc(var(--ks-line-height-interface-shrink-factor) * 1)
1073
+ );
1074
+ --ks-line-height-interface-xs: calc(
1075
+ var(--ks-line-height-interface-s) * calc(var(--ks-line-height-interface-shrink-factor) * 1)
1076
+ );
1077
+ --ks-line-height-interface-s: calc(
1078
+ var(--ks-line-height-interface-m) * calc(var(--ks-line-height-interface-shrink-factor) * 1)
1079
+ );
1080
+ --ks-line-height-interface-m: var(--ks-line-height-interface-base-factor);
1081
+ --ks-line-height-interface-l: calc(var(--ks-line-height-interface-m) * var(--ks-line-height-interface-grow-factor));
1082
+ --ks-line-height-interface-xl: calc(var(--ks-line-height-interface-l) * var(--ks-line-height-interface-grow-factor));
1083
+ --ks-line-height-interface-xxl: calc(
1084
+ var(--ks-line-height-interface-xl) * var(--ks-line-height-interface-grow-factor)
1085
+ );
1086
+ --ks-line-height-copy-base-factor: 1.5;
1087
+ --ks-line-height-mono-shrink-factor: 1;
1088
+ --ks-line-height-mono-grow-factor: 1;
1089
+ --ks-line-height-mono-xxs: calc(var(--ks-line-height-mono-xs) * calc(var(--ks-line-height-mono-shrink-factor) * 1));
1090
+ --ks-line-height-mono-xs: calc(var(--ks-line-height-mono-s) * calc(var(--ks-line-height-mono-shrink-factor) * 1));
1091
+ --ks-line-height-mono-s: calc(var(--ks-line-height-mono-m) * calc(var(--ks-line-height-mono-shrink-factor) * 1));
1092
+ --ks-line-height-mono-m: var(--ks-line-height-mono-base-factor);
1093
+ --ks-line-height-mono-l: calc(var(--ks-line-height-mono-m) * var(--ks-line-height-mono-grow-factor));
1094
+ --ks-line-height-mono-xl: calc(var(--ks-line-height-mono-l) * var(--ks-line-height-mono-grow-factor));
1095
+ --ks-line-height-mono-xxl: calc(var(--ks-line-height-mono-xl) * var(--ks-line-height-mono-grow-factor));
1096
+ --ks-font-display-xxs: var(--ks-font-size-display-xxs) / var(--ks-line-height-display-xxs)
1097
+ var(--ks-font-family-display);
1098
+ --ks-font-display-xs: var(--ks-font-size-display-xs) / var(--ks-line-height-display-xs) var(--ks-font-family-display);
1099
+ --ks-font-display-s: var(--ks-font-size-display-s) / var(--ks-line-height-display-s) var(--ks-font-family-display);
1100
+ --ks-font-display-m: var(--ks-font-size-display-m) / var(--ks-line-height-display-m) var(--ks-font-family-display);
1101
+ --ks-font-display-l: var(--ks-font-size-display-l) / var(--ks-line-height-display-l) var(--ks-font-family-display);
1102
+ --ks-font-display-xl: var(--ks-font-size-display-xl) / var(--ks-line-height-display-xl) var(--ks-font-family-display);
1103
+ --ks-font-display-xxl: var(--ks-font-size-display-xxl) / var(--ks-line-height-display-xxl)
1104
+ var(--ks-font-family-display);
1105
+ --ks-font-copy-xxs: var(--ks-font-size-copy-xxs) / var(--ks-line-height-copy-xxs) var(--ks-font-family-copy);
1106
+ --ks-font-copy-xs: var(--ks-font-size-copy-xs) / var(--ks-line-height-copy-xs) var(--ks-font-family-copy);
1107
+ --ks-font-copy-s: var(--ks-font-size-copy-s) / var(--ks-line-height-copy-s) var(--ks-font-family-copy);
1108
+ --ks-font-copy-m: var(--ks-font-size-copy-m) / var(--ks-line-height-copy-m) var(--ks-font-family-copy);
1109
+ --ks-font-copy-l: var(--ks-font-size-copy-l) / var(--ks-line-height-copy-l) var(--ks-font-family-copy);
1110
+ --ks-font-copy-xl: var(--ks-font-size-copy-xl) / var(--ks-line-height-copy-xl) var(--ks-font-family-copy);
1111
+ --ks-font-copy-xxl: var(--ks-font-size-copy-xxl) / var(--ks-line-height-copy-xxl) var(--ks-font-family-copy);
1112
+ --ks-font-interface-xxs: var(--ks-font-size-interface-xxs) / var(--ks-line-height-interface-xxs)
1113
+ var(--ks-font-family-interface);
1114
+ --ks-font-interface-xs: var(--ks-font-size-interface-xs) / var(--ks-line-height-interface-xs)
1115
+ var(--ks-font-family-interface);
1116
+ --ks-font-interface-s: var(--ks-font-size-interface-s) / var(--ks-line-height-interface-s)
1117
+ var(--ks-font-family-interface);
1118
+ --ks-font-interface-m: var(--ks-font-size-interface-m) / var(--ks-line-height-interface-m)
1119
+ var(--ks-font-family-interface);
1120
+ --ks-font-interface-l: var(--ks-font-size-interface-l) / var(--ks-line-height-interface-l)
1121
+ var(--ks-font-family-interface);
1122
+ --ks-font-interface-xl: var(--ks-font-size-interface-xl) / var(--ks-line-height-interface-xl)
1123
+ var(--ks-font-family-interface);
1124
+ --ks-font-interface-xxl: var(--ks-font-size-interface-xxl) / var(--ks-line-height-interface-xxl)
1125
+ var(--ks-font-family-interface);
1126
+ --ks-font-mono-xxs: var(--ks-font-size-mono-xxs) / var(--ks-line-height-mono-xxs) var(--ks-font-family-mono);
1127
+ --ks-font-mono-xs: var(--ks-font-size-mono-xs) / var(--ks-line-height-mono-xs) var(--ks-font-family-mono);
1128
+ --ks-font-mono-s: var(--ks-font-size-mono-s) / var(--ks-line-height-mono-s) var(--ks-font-family-mono);
1129
+ --ks-font-mono-m: var(--ks-font-size-mono-m) / var(--ks-line-height-mono-m) var(--ks-font-family-mono);
1130
+ --ks-font-mono-l: var(--ks-font-size-mono-l) / var(--ks-line-height-mono-l) var(--ks-font-family-mono);
1131
+ --ks-font-mono-xl: var(--ks-font-size-mono-xl) / var(--ks-line-height-mono-xl) var(--ks-font-family-mono);
1132
+ --ks-font-mono-xxl: var(--ks-font-size-mono-xxl) / var(--ks-line-height-mono-xxl) var(--ks-font-family-mono);
1133
+ }
1134
+
1135
+ :root,
1136
+ [ks-theme],
1137
+ [ks-inverted=false],
1138
+ [ks-inverted=true] {
1139
+ --font-size-base: 16px;
1140
+ --font-size-display-shrink-factor: 0.8;
1141
+ --font-size-display-grow-factor: 1.3;
1142
+ --font-size-display-bp-factor: 1.02;
1143
+ --font-size-copy-shrink-factor: 0.8;
1144
+ --font-size-copy-grow-factor: 1.2;
1145
+ --font-size-copy-bp-factor: 1.01;
1146
+ --font-size-interface-shrink-factor: 0.8;
1147
+ --font-size-interface-grow-factor: 1.2;
1148
+ --font-size-interface-bp-factor: 1.01;
1149
+ --font-size-mono-shrink-factor: 0.8;
1150
+ --font-size-mono-grow-factor: 1.2;
1151
+ --font-size-mono-bp-factor: 1.01;
1152
+ --font-size-display-xxs-bp-factor: calc(1 * var(--font-size-display-bp-factor));
1153
+ --font-size-display-xs-bp-factor: calc(var(--font-size-display-xxs-bp-factor) * var(--font-size-display-bp-factor));
1154
+ --font-size-display-s-bp-factor: calc(var(--font-size-display-xs-bp-factor) * var(--font-size-display-bp-factor));
1155
+ --font-size-display-m-bp-factor: calc(var(--font-size-display-s-bp-factor) * var(--font-size-display-bp-factor));
1156
+ --font-size-display-l-bp-factor: calc(var(--font-size-display-m-bp-factor) * var(--font-size-display-bp-factor));
1157
+ --font-size-display-xl-bp-factor: calc(var(--font-size-display-l-bp-factor) * var(--font-size-display-bp-factor));
1158
+ --font-size-display-xxl-bp-factor: calc(var(--font-size-display-xl-bp-factor) * var(--font-size-display-bp-factor));
1159
+ --font-size-copy-xxs-bp-factor: calc(1 * var(--font-size-copy-bp-factor));
1160
+ --font-size-copy-xs-bp-factor: calc(var(--font-size-copy-xxs-bp-factor) * var(--font-size-copy-bp-factor));
1161
+ --font-size-copy-s-bp-factor: calc(var(--font-size-copy-xs-bp-factor) * var(--font-size-copy-bp-factor));
1162
+ --font-size-copy-m-bp-factor: calc(var(--font-size-copy-s-bp-factor) * var(--font-size-copy-bp-factor));
1163
+ --font-size-copy-l-bp-factor: calc(var(--font-size-copy-m-bp-factor) * var(--font-size-copy-bp-factor));
1164
+ --font-size-copy-xl-bp-factor: calc(var(--font-size-copy-l-bp-factor) * var(--font-size-copy-bp-factor));
1165
+ --font-size-copy-xxl-bp-factor: calc(var(--font-size-copy-xl-bp-factor) * var(--font-size-copy-bp-factor));
1166
+ --font-size-interface-xxs-bp-factor: calc(1 * var(--font-size-interface-bp-factor));
1167
+ --font-size-interface-xs-bp-factor: calc(
1168
+ var(--font-size-interface-xxs-bp-factor) * var(--font-size-interface-bp-factor)
1169
+ );
1170
+ --font-size-interface-s-bp-factor: calc(
1171
+ var(--font-size-interface-xs-bp-factor) * var(--font-size-interface-bp-factor)
1172
+ );
1173
+ --font-size-interface-m-bp-factor: calc(
1174
+ var(--font-size-interface-s-bp-factor) * var(--font-size-interface-bp-factor)
1175
+ );
1176
+ --font-size-interface-l-bp-factor: calc(
1177
+ var(--font-size-interface-m-bp-factor) * var(--font-size-interface-bp-factor)
1178
+ );
1179
+ --font-size-interface-xl-bp-factor: calc(
1180
+ var(--font-size-interface-l-bp-factor) * var(--font-size-interface-bp-factor)
1181
+ );
1182
+ --font-size-interface-xxl-bp-factor: calc(
1183
+ var(--font-size-interface-xl-bp-factor) * var(--font-size-interface-bp-factor)
1184
+ );
1185
+ --font-size-mono-xxs-bp-factor: calc(1 * var(--font-size-mono-bp-factor));
1186
+ --font-size-mono-xs-bp-factor: calc(var(--font-size-mono-xxs-bp-factor) * var(--font-size-mono-bp-factor));
1187
+ --font-size-mono-s-bp-factor: calc(var(--font-size-mono-xs-bp-factor) * var(--font-size-mono-bp-factor));
1188
+ --font-size-mono-m-bp-factor: calc(var(--font-size-mono-s-bp-factor) * var(--font-size-mono-bp-factor));
1189
+ --font-size-mono-l-bp-factor: calc(var(--font-size-mono-m-bp-factor) * var(--font-size-mono-bp-factor));
1190
+ --font-size-mono-xl-bp-factor: calc(var(--font-size-mono-l-bp-factor) * var(--font-size-mono-bp-factor));
1191
+ --font-size-mono-xxl-bp-factor: calc(var(--font-size-mono-xl-bp-factor) * var(--font-size-mono-bp-factor));
1192
+ }
1193
+
1194
+ :root,
1195
+ [ks-theme],
1196
+ [ks-inverted=false],
1197
+ [ks-inverted=true] {
1198
+ --ks-font-size-display-xxs-base: calc(
1199
+ var(--ks-font-size-display-xs-base) * calc(var(--font-size-display-shrink-factor) * 1)
1200
+ );
1201
+ --ks-font-size-display-xs-base: calc(
1202
+ var(--ks-font-size-display-s-base) * calc(var(--font-size-display-shrink-factor) * 1)
1203
+ );
1204
+ --ks-font-size-display-s-base: calc(
1205
+ var(--ks-font-size-display-m-base) * calc(var(--font-size-display-shrink-factor) * 1)
1206
+ );
1207
+ --ks-font-size-display-m-base: var(--font-size-base);
1208
+ --ks-font-size-display-l-base: calc(var(--ks-font-size-display-m-base) * var(--font-size-display-grow-factor));
1209
+ --ks-font-size-display-xl-base: calc(var(--ks-font-size-display-l-base) * var(--font-size-display-grow-factor));
1210
+ --ks-font-size-display-xxl-base: calc(var(--ks-font-size-display-xl-base) * var(--font-size-display-grow-factor));
1211
+ --ks-font-size-copy-xxs-base: calc(var(--ks-font-size-copy-xs-base) * calc(var(--font-size-copy-shrink-factor) * 1));
1212
+ --ks-font-size-copy-xs-base: calc(var(--ks-font-size-copy-s-base) * calc(var(--font-size-copy-shrink-factor) * 1));
1213
+ --ks-font-size-copy-s-base: calc(var(--ks-font-size-copy-m-base) * calc(var(--font-size-copy-shrink-factor) * 1));
1214
+ --ks-font-size-copy-m-base: var(--font-size-base);
1215
+ --ks-font-size-copy-l-base: calc(var(--ks-font-size-copy-m-base) * var(--font-size-copy-grow-factor));
1216
+ --ks-font-size-copy-xl-base: calc(var(--ks-font-size-copy-l-base) * var(--font-size-copy-grow-factor));
1217
+ --ks-font-size-copy-xxl-base: calc(var(--ks-font-size-copy-xl-base) * var(--font-size-copy-grow-factor));
1218
+ --ks-font-size-interface-xxs-base: calc(
1219
+ var(--ks-font-size-interface-xs-base) * calc(var(--font-size-interface-shrink-factor) * 1)
1220
+ );
1221
+ --ks-font-size-interface-xs-base: calc(
1222
+ var(--ks-font-size-interface-s-base) * calc(var(--font-size-interface-shrink-factor) * 1)
1223
+ );
1224
+ --ks-font-size-interface-s-base: calc(
1225
+ var(--ks-font-size-interface-m-base) * calc(var(--font-size-interface-shrink-factor) * 1)
1226
+ );
1227
+ --ks-font-size-interface-m-base: var(--font-size-base);
1228
+ --ks-font-size-interface-l-base: calc(var(--ks-font-size-interface-m-base) * var(--font-size-interface-grow-factor));
1229
+ --ks-font-size-interface-xl-base: calc(var(--ks-font-size-interface-l-base) * var(--font-size-interface-grow-factor));
1230
+ --ks-font-size-interface-xxl-base: calc(
1231
+ var(--ks-font-size-interface-xl-base) * var(--font-size-interface-grow-factor)
1232
+ );
1233
+ --ks-font-size-mono-xxs-base: calc(var(--ks-font-size-mono-xs-base) * calc(var(--font-size-mono-shrink-factor) * 1));
1234
+ --ks-font-size-mono-xs-base: calc(var(--ks-font-size-mono-s-base) * calc(var(--font-size-mono-shrink-factor) * 1));
1235
+ --ks-font-size-mono-s-base: calc(var(--ks-font-size-mono-m-base) * calc(var(--font-size-mono-shrink-factor) * 1));
1236
+ --ks-font-size-mono-m-base: var(--font-size-base);
1237
+ --ks-font-size-mono-l-base: calc(var(--ks-font-size-mono-m-base) * var(--font-size-mono-grow-factor));
1238
+ --ks-font-size-mono-xl-base: calc(var(--ks-font-size-mono-l-base) * var(--font-size-mono-grow-factor));
1239
+ --ks-font-size-mono-xxl-base: calc(var(--ks-font-size-mono-xl-base) * var(--font-size-mono-grow-factor));
1240
+ }
1241
+
1242
+ :root,
1243
+ [ks-theme],
1244
+ [ks-inverted=false],
1245
+ [ks-inverted=true] {
1246
+ --ks-font-size-display-xxs-bp-factor-phone: calc(1 * var(--font-size-display-xxs-bp-factor));
1247
+ --ks-font-size-display-xxs-bp-factor-tablet: calc(
1248
+ var(--ks-font-size-display-xxs-bp-factor-phone) * var(--font-size-display-xxs-bp-factor)
1249
+ );
1250
+ --ks-font-size-display-xxs-bp-factor-laptop: calc(
1251
+ var(--ks-font-size-display-xxs-bp-factor-tablet) * var(--font-size-display-xxs-bp-factor)
1252
+ );
1253
+ --ks-font-size-display-xxs-bp-factor-desktop: calc(
1254
+ var(--ks-font-size-display-xxs-bp-factor-laptop) * var(--font-size-display-xxs-bp-factor)
1255
+ );
1256
+ --ks-font-size-display-xs-bp-factor-phone: calc(1 * var(--font-size-display-xs-bp-factor));
1257
+ --ks-font-size-display-xs-bp-factor-tablet: calc(
1258
+ var(--ks-font-size-display-xs-bp-factor-phone) * var(--font-size-display-xs-bp-factor)
1259
+ );
1260
+ --ks-font-size-display-xs-bp-factor-laptop: calc(
1261
+ var(--ks-font-size-display-xs-bp-factor-tablet) * var(--font-size-display-xs-bp-factor)
1262
+ );
1263
+ --ks-font-size-display-xs-bp-factor-desktop: calc(
1264
+ var(--ks-font-size-display-xs-bp-factor-laptop) * var(--font-size-display-xs-bp-factor)
1265
+ );
1266
+ --ks-font-size-display-s-bp-factor-phone: calc(1 * var(--font-size-display-s-bp-factor));
1267
+ --ks-font-size-display-s-bp-factor-tablet: calc(
1268
+ var(--ks-font-size-display-s-bp-factor-phone) * var(--font-size-display-s-bp-factor)
1269
+ );
1270
+ --ks-font-size-display-s-bp-factor-laptop: calc(
1271
+ var(--ks-font-size-display-s-bp-factor-tablet) * var(--font-size-display-s-bp-factor)
1272
+ );
1273
+ --ks-font-size-display-s-bp-factor-desktop: calc(
1274
+ var(--ks-font-size-display-s-bp-factor-laptop) * var(--font-size-display-s-bp-factor)
1275
+ );
1276
+ --ks-font-size-display-m-bp-factor-phone: calc(1 * var(--font-size-display-m-bp-factor));
1277
+ --ks-font-size-display-m-bp-factor-tablet: calc(
1278
+ var(--ks-font-size-display-m-bp-factor-phone) * var(--font-size-display-m-bp-factor)
1279
+ );
1280
+ --ks-font-size-display-m-bp-factor-laptop: calc(
1281
+ var(--ks-font-size-display-m-bp-factor-tablet) * var(--font-size-display-m-bp-factor)
1282
+ );
1283
+ --ks-font-size-display-m-bp-factor-desktop: calc(
1284
+ var(--ks-font-size-display-m-bp-factor-laptop) * var(--font-size-display-m-bp-factor)
1285
+ );
1286
+ --ks-font-size-display-l-bp-factor-phone: calc(1 * var(--font-size-display-l-bp-factor));
1287
+ --ks-font-size-display-l-bp-factor-tablet: calc(
1288
+ var(--ks-font-size-display-l-bp-factor-phone) * var(--font-size-display-l-bp-factor)
1289
+ );
1290
+ --ks-font-size-display-l-bp-factor-laptop: calc(
1291
+ var(--ks-font-size-display-l-bp-factor-tablet) * var(--font-size-display-l-bp-factor)
1292
+ );
1293
+ --ks-font-size-display-l-bp-factor-desktop: calc(
1294
+ var(--ks-font-size-display-l-bp-factor-laptop) * var(--font-size-display-l-bp-factor)
1295
+ );
1296
+ --ks-font-size-display-xl-bp-factor-phone: calc(1 * var(--font-size-display-xl-bp-factor));
1297
+ --ks-font-size-display-xl-bp-factor-tablet: calc(
1298
+ var(--ks-font-size-display-xl-bp-factor-phone) * var(--font-size-display-xl-bp-factor)
1299
+ );
1300
+ --ks-font-size-display-xl-bp-factor-laptop: calc(
1301
+ var(--ks-font-size-display-xl-bp-factor-tablet) * var(--font-size-display-xl-bp-factor)
1302
+ );
1303
+ --ks-font-size-display-xl-bp-factor-desktop: calc(
1304
+ var(--ks-font-size-display-xl-bp-factor-laptop) * var(--font-size-display-xl-bp-factor)
1305
+ );
1306
+ --ks-font-size-display-xxl-bp-factor-phone: calc(1 * var(--font-size-display-xxl-bp-factor));
1307
+ --ks-font-size-display-xxl-bp-factor-tablet: calc(
1308
+ var(--ks-font-size-display-xxl-bp-factor-phone) * var(--font-size-display-xxl-bp-factor)
1309
+ );
1310
+ --ks-font-size-display-xxl-bp-factor-laptop: calc(
1311
+ var(--ks-font-size-display-xxl-bp-factor-tablet) * var(--font-size-display-xxl-bp-factor)
1312
+ );
1313
+ --ks-font-size-display-xxl-bp-factor-desktop: calc(
1314
+ var(--ks-font-size-display-xxl-bp-factor-laptop) * var(--font-size-display-xxl-bp-factor)
1315
+ );
1316
+ --ks-font-size-copy-xxs-bp-factor-phone: calc(1 * var(--font-size-copy-xxs-bp-factor));
1317
+ --ks-font-size-copy-xxs-bp-factor-tablet: calc(
1318
+ var(--ks-font-size-copy-xxs-bp-factor-phone) * var(--font-size-copy-xxs-bp-factor)
1319
+ );
1320
+ --ks-font-size-copy-xxs-bp-factor-laptop: calc(
1321
+ var(--ks-font-size-copy-xxs-bp-factor-tablet) * var(--font-size-copy-xxs-bp-factor)
1322
+ );
1323
+ --ks-font-size-copy-xxs-bp-factor-desktop: calc(
1324
+ var(--ks-font-size-copy-xxs-bp-factor-laptop) * var(--font-size-copy-xxs-bp-factor)
1325
+ );
1326
+ --ks-font-size-copy-xs-bp-factor-phone: calc(1 * var(--font-size-copy-xs-bp-factor));
1327
+ --ks-font-size-copy-xs-bp-factor-tablet: calc(
1328
+ var(--ks-font-size-copy-xs-bp-factor-phone) * var(--font-size-copy-xs-bp-factor)
1329
+ );
1330
+ --ks-font-size-copy-xs-bp-factor-laptop: calc(
1331
+ var(--ks-font-size-copy-xs-bp-factor-tablet) * var(--font-size-copy-xs-bp-factor)
1332
+ );
1333
+ --ks-font-size-copy-xs-bp-factor-desktop: calc(
1334
+ var(--ks-font-size-copy-xs-bp-factor-laptop) * var(--font-size-copy-xs-bp-factor)
1335
+ );
1336
+ --ks-font-size-copy-s-bp-factor-phone: calc(1 * var(--font-size-copy-s-bp-factor));
1337
+ --ks-font-size-copy-s-bp-factor-tablet: calc(
1338
+ var(--ks-font-size-copy-s-bp-factor-phone) * var(--font-size-copy-s-bp-factor)
1339
+ );
1340
+ --ks-font-size-copy-s-bp-factor-laptop: calc(
1341
+ var(--ks-font-size-copy-s-bp-factor-tablet) * var(--font-size-copy-s-bp-factor)
1342
+ );
1343
+ --ks-font-size-copy-s-bp-factor-desktop: calc(
1344
+ var(--ks-font-size-copy-s-bp-factor-laptop) * var(--font-size-copy-s-bp-factor)
1345
+ );
1346
+ --ks-font-size-copy-m-bp-factor-phone: calc(1 * var(--font-size-copy-m-bp-factor));
1347
+ --ks-font-size-copy-m-bp-factor-tablet: calc(
1348
+ var(--ks-font-size-copy-m-bp-factor-phone) * var(--font-size-copy-m-bp-factor)
1349
+ );
1350
+ --ks-font-size-copy-m-bp-factor-laptop: calc(
1351
+ var(--ks-font-size-copy-m-bp-factor-tablet) * var(--font-size-copy-m-bp-factor)
1352
+ );
1353
+ --ks-font-size-copy-m-bp-factor-desktop: calc(
1354
+ var(--ks-font-size-copy-m-bp-factor-laptop) * var(--font-size-copy-m-bp-factor)
1355
+ );
1356
+ --ks-font-size-copy-l-bp-factor-phone: calc(1 * var(--font-size-copy-l-bp-factor));
1357
+ --ks-font-size-copy-l-bp-factor-tablet: calc(
1358
+ var(--ks-font-size-copy-l-bp-factor-phone) * var(--font-size-copy-l-bp-factor)
1359
+ );
1360
+ --ks-font-size-copy-l-bp-factor-laptop: calc(
1361
+ var(--ks-font-size-copy-l-bp-factor-tablet) * var(--font-size-copy-l-bp-factor)
1362
+ );
1363
+ --ks-font-size-copy-l-bp-factor-desktop: calc(
1364
+ var(--ks-font-size-copy-l-bp-factor-laptop) * var(--font-size-copy-l-bp-factor)
1365
+ );
1366
+ --ks-font-size-copy-xl-bp-factor-phone: calc(1 * var(--font-size-copy-xl-bp-factor));
1367
+ --ks-font-size-copy-xl-bp-factor-tablet: calc(
1368
+ var(--ks-font-size-copy-xl-bp-factor-phone) * var(--font-size-copy-xl-bp-factor)
1369
+ );
1370
+ --ks-font-size-copy-xl-bp-factor-laptop: calc(
1371
+ var(--ks-font-size-copy-xl-bp-factor-tablet) * var(--font-size-copy-xl-bp-factor)
1372
+ );
1373
+ --ks-font-size-copy-xl-bp-factor-desktop: calc(
1374
+ var(--ks-font-size-copy-xl-bp-factor-laptop) * var(--font-size-copy-xl-bp-factor)
1375
+ );
1376
+ --ks-font-size-copy-xxl-bp-factor-phone: calc(1 * var(--font-size-copy-xxl-bp-factor));
1377
+ --ks-font-size-copy-xxl-bp-factor-tablet: calc(
1378
+ var(--ks-font-size-copy-xxl-bp-factor-phone) * var(--font-size-copy-xxl-bp-factor)
1379
+ );
1380
+ --ks-font-size-copy-xxl-bp-factor-laptop: calc(
1381
+ var(--ks-font-size-copy-xxl-bp-factor-tablet) * var(--font-size-copy-xxl-bp-factor)
1382
+ );
1383
+ --ks-font-size-copy-xxl-bp-factor-desktop: calc(
1384
+ var(--ks-font-size-copy-xxl-bp-factor-laptop) * var(--font-size-copy-xxl-bp-factor)
1385
+ );
1386
+ --ks-font-size-interface-xxs-bp-factor-phone: calc(1 * var(--font-size-interface-xxs-bp-factor));
1387
+ --ks-font-size-interface-xxs-bp-factor-tablet: calc(
1388
+ var(--ks-font-size-interface-xxs-bp-factor-phone) * var(--font-size-interface-xxs-bp-factor)
1389
+ );
1390
+ --ks-font-size-interface-xxs-bp-factor-laptop: calc(
1391
+ var(--ks-font-size-interface-xxs-bp-factor-tablet) * var(--font-size-interface-xxs-bp-factor)
1392
+ );
1393
+ --ks-font-size-interface-xxs-bp-factor-desktop: calc(
1394
+ var(--ks-font-size-interface-xxs-bp-factor-laptop) * var(--font-size-interface-xxs-bp-factor)
1395
+ );
1396
+ --ks-font-size-interface-xs-bp-factor-phone: calc(1 * var(--font-size-interface-xs-bp-factor));
1397
+ --ks-font-size-interface-xs-bp-factor-tablet: calc(
1398
+ var(--ks-font-size-interface-xs-bp-factor-phone) * var(--font-size-interface-xs-bp-factor)
1399
+ );
1400
+ --ks-font-size-interface-xs-bp-factor-laptop: calc(
1401
+ var(--ks-font-size-interface-xs-bp-factor-tablet) * var(--font-size-interface-xs-bp-factor)
1402
+ );
1403
+ --ks-font-size-interface-xs-bp-factor-desktop: calc(
1404
+ var(--ks-font-size-interface-xs-bp-factor-laptop) * var(--font-size-interface-xs-bp-factor)
1405
+ );
1406
+ --ks-font-size-interface-s-bp-factor-phone: calc(1 * var(--font-size-interface-s-bp-factor));
1407
+ --ks-font-size-interface-s-bp-factor-tablet: calc(
1408
+ var(--ks-font-size-interface-s-bp-factor-phone) * var(--font-size-interface-s-bp-factor)
1409
+ );
1410
+ --ks-font-size-interface-s-bp-factor-laptop: calc(
1411
+ var(--ks-font-size-interface-s-bp-factor-tablet) * var(--font-size-interface-s-bp-factor)
1412
+ );
1413
+ --ks-font-size-interface-s-bp-factor-desktop: calc(
1414
+ var(--ks-font-size-interface-s-bp-factor-laptop) * var(--font-size-interface-s-bp-factor)
1415
+ );
1416
+ --ks-font-size-interface-m-bp-factor-phone: calc(1 * var(--font-size-interface-m-bp-factor));
1417
+ --ks-font-size-interface-m-bp-factor-tablet: calc(
1418
+ var(--ks-font-size-interface-m-bp-factor-phone) * var(--font-size-interface-m-bp-factor)
1419
+ );
1420
+ --ks-font-size-interface-m-bp-factor-laptop: calc(
1421
+ var(--ks-font-size-interface-m-bp-factor-tablet) * var(--font-size-interface-m-bp-factor)
1422
+ );
1423
+ --ks-font-size-interface-m-bp-factor-desktop: calc(
1424
+ var(--ks-font-size-interface-m-bp-factor-laptop) * var(--font-size-interface-m-bp-factor)
1425
+ );
1426
+ --ks-font-size-interface-l-bp-factor-phone: calc(1 * var(--font-size-interface-l-bp-factor));
1427
+ --ks-font-size-interface-l-bp-factor-tablet: calc(
1428
+ var(--ks-font-size-interface-l-bp-factor-phone) * var(--font-size-interface-l-bp-factor)
1429
+ );
1430
+ --ks-font-size-interface-l-bp-factor-laptop: calc(
1431
+ var(--ks-font-size-interface-l-bp-factor-tablet) * var(--font-size-interface-l-bp-factor)
1432
+ );
1433
+ --ks-font-size-interface-l-bp-factor-desktop: calc(
1434
+ var(--ks-font-size-interface-l-bp-factor-laptop) * var(--font-size-interface-l-bp-factor)
1435
+ );
1436
+ --ks-font-size-interface-xl-bp-factor-phone: calc(1 * var(--font-size-interface-xl-bp-factor));
1437
+ --ks-font-size-interface-xl-bp-factor-tablet: calc(
1438
+ var(--ks-font-size-interface-xl-bp-factor-phone) * var(--font-size-interface-xl-bp-factor)
1439
+ );
1440
+ --ks-font-size-interface-xl-bp-factor-laptop: calc(
1441
+ var(--ks-font-size-interface-xl-bp-factor-tablet) * var(--font-size-interface-xl-bp-factor)
1442
+ );
1443
+ --ks-font-size-interface-xl-bp-factor-desktop: calc(
1444
+ var(--ks-font-size-interface-xl-bp-factor-laptop) * var(--font-size-interface-xl-bp-factor)
1445
+ );
1446
+ --ks-font-size-interface-xxl-bp-factor-phone: calc(1 * var(--font-size-interface-xxl-bp-factor));
1447
+ --ks-font-size-interface-xxl-bp-factor-tablet: calc(
1448
+ var(--ks-font-size-interface-xxl-bp-factor-phone) * var(--font-size-interface-xxl-bp-factor)
1449
+ );
1450
+ --ks-font-size-interface-xxl-bp-factor-laptop: calc(
1451
+ var(--ks-font-size-interface-xxl-bp-factor-tablet) * var(--font-size-interface-xxl-bp-factor)
1452
+ );
1453
+ --ks-font-size-interface-xxl-bp-factor-desktop: calc(
1454
+ var(--ks-font-size-interface-xxl-bp-factor-laptop) * var(--font-size-interface-xxl-bp-factor)
1455
+ );
1456
+ --ks-font-size-mono-xxs-bp-factor-phone: calc(1 * var(--font-size-mono-xxs-bp-factor));
1457
+ --ks-font-size-mono-xxs-bp-factor-tablet: calc(
1458
+ var(--ks-font-size-mono-xxs-bp-factor-phone) * var(--font-size-mono-xxs-bp-factor)
1459
+ );
1460
+ --ks-font-size-mono-xxs-bp-factor-laptop: calc(
1461
+ var(--ks-font-size-mono-xxs-bp-factor-tablet) * var(--font-size-mono-xxs-bp-factor)
1462
+ );
1463
+ --ks-font-size-mono-xxs-bp-factor-desktop: calc(
1464
+ var(--ks-font-size-mono-xxs-bp-factor-laptop) * var(--font-size-mono-xxs-bp-factor)
1465
+ );
1466
+ --ks-font-size-mono-xs-bp-factor-phone: calc(1 * var(--font-size-mono-xs-bp-factor));
1467
+ --ks-font-size-mono-xs-bp-factor-tablet: calc(
1468
+ var(--ks-font-size-mono-xs-bp-factor-phone) * var(--font-size-mono-xs-bp-factor)
1469
+ );
1470
+ --ks-font-size-mono-xs-bp-factor-laptop: calc(
1471
+ var(--ks-font-size-mono-xs-bp-factor-tablet) * var(--font-size-mono-xs-bp-factor)
1472
+ );
1473
+ --ks-font-size-mono-xs-bp-factor-desktop: calc(
1474
+ var(--ks-font-size-mono-xs-bp-factor-laptop) * var(--font-size-mono-xs-bp-factor)
1475
+ );
1476
+ --ks-font-size-mono-s-bp-factor-phone: calc(1 * var(--font-size-mono-s-bp-factor));
1477
+ --ks-font-size-mono-s-bp-factor-tablet: calc(
1478
+ var(--ks-font-size-mono-s-bp-factor-phone) * var(--font-size-mono-s-bp-factor)
1479
+ );
1480
+ --ks-font-size-mono-s-bp-factor-laptop: calc(
1481
+ var(--ks-font-size-mono-s-bp-factor-tablet) * var(--font-size-mono-s-bp-factor)
1482
+ );
1483
+ --ks-font-size-mono-s-bp-factor-desktop: calc(
1484
+ var(--ks-font-size-mono-s-bp-factor-laptop) * var(--font-size-mono-s-bp-factor)
1485
+ );
1486
+ --ks-font-size-mono-m-bp-factor-phone: calc(1 * var(--font-size-mono-m-bp-factor));
1487
+ --ks-font-size-mono-m-bp-factor-tablet: calc(
1488
+ var(--ks-font-size-mono-m-bp-factor-phone) * var(--font-size-mono-m-bp-factor)
1489
+ );
1490
+ --ks-font-size-mono-m-bp-factor-laptop: calc(
1491
+ var(--ks-font-size-mono-m-bp-factor-tablet) * var(--font-size-mono-m-bp-factor)
1492
+ );
1493
+ --ks-font-size-mono-m-bp-factor-desktop: calc(
1494
+ var(--ks-font-size-mono-m-bp-factor-laptop) * var(--font-size-mono-m-bp-factor)
1495
+ );
1496
+ --ks-font-size-mono-l-bp-factor-phone: calc(1 * var(--font-size-mono-l-bp-factor));
1497
+ --ks-font-size-mono-l-bp-factor-tablet: calc(
1498
+ var(--ks-font-size-mono-l-bp-factor-phone) * var(--font-size-mono-l-bp-factor)
1499
+ );
1500
+ --ks-font-size-mono-l-bp-factor-laptop: calc(
1501
+ var(--ks-font-size-mono-l-bp-factor-tablet) * var(--font-size-mono-l-bp-factor)
1502
+ );
1503
+ --ks-font-size-mono-l-bp-factor-desktop: calc(
1504
+ var(--ks-font-size-mono-l-bp-factor-laptop) * var(--font-size-mono-l-bp-factor)
1505
+ );
1506
+ --ks-font-size-mono-xl-bp-factor-phone: calc(1 * var(--font-size-mono-xl-bp-factor));
1507
+ --ks-font-size-mono-xl-bp-factor-tablet: calc(
1508
+ var(--ks-font-size-mono-xl-bp-factor-phone) * var(--font-size-mono-xl-bp-factor)
1509
+ );
1510
+ --ks-font-size-mono-xl-bp-factor-laptop: calc(
1511
+ var(--ks-font-size-mono-xl-bp-factor-tablet) * var(--font-size-mono-xl-bp-factor)
1512
+ );
1513
+ --ks-font-size-mono-xl-bp-factor-desktop: calc(
1514
+ var(--ks-font-size-mono-xl-bp-factor-laptop) * var(--font-size-mono-xl-bp-factor)
1515
+ );
1516
+ --ks-font-size-mono-xxl-bp-factor-phone: calc(1 * var(--font-size-mono-xxl-bp-factor));
1517
+ --ks-font-size-mono-xxl-bp-factor-tablet: calc(
1518
+ var(--ks-font-size-mono-xxl-bp-factor-phone) * var(--font-size-mono-xxl-bp-factor)
1519
+ );
1520
+ --ks-font-size-mono-xxl-bp-factor-laptop: calc(
1521
+ var(--ks-font-size-mono-xxl-bp-factor-tablet) * var(--font-size-mono-xxl-bp-factor)
1522
+ );
1523
+ --ks-font-size-mono-xxl-bp-factor-desktop: calc(
1524
+ var(--ks-font-size-mono-xxl-bp-factor-laptop) * var(--font-size-mono-xxl-bp-factor)
1525
+ );
1526
+ }
1527
+
1528
+ :root,
1529
+ [ks-theme],
1530
+ [ks-inverted=false],
1531
+ [ks-inverted=true] {
1532
+ --ks-font-size-display-xxs: calc(var(--ks-font-size-display-xxs-base) * var(--ks-font-size-display-xxs-bp-factor, 1));
1533
+ --ks-font-size-display-xs: calc(var(--ks-font-size-display-xs-base) * var(--ks-font-size-display-xs-bp-factor, 1));
1534
+ --ks-font-size-display-s: calc(var(--ks-font-size-display-s-base) * var(--ks-font-size-display-s-bp-factor, 1));
1535
+ --ks-font-size-display-m: calc(var(--ks-font-size-display-m-base) * var(--ks-font-size-display-m-bp-factor, 1));
1536
+ --ks-font-size-display-l: calc(var(--ks-font-size-display-l-base) * var(--ks-font-size-display-l-bp-factor, 1));
1537
+ --ks-font-size-display-xl: calc(var(--ks-font-size-display-xl-base) * var(--ks-font-size-display-xl-bp-factor, 1));
1538
+ --ks-font-size-display-xxl: calc(var(--ks-font-size-display-xxl-base) * var(--ks-font-size-display-xxl-bp-factor, 1));
1539
+ --ks-font-size-copy-xxs: calc(var(--ks-font-size-copy-xxs-base) * var(--ks-font-size-copy-xxs-bp-factor, 1));
1540
+ --ks-font-size-copy-xs: calc(var(--ks-font-size-copy-xs-base) * var(--ks-font-size-copy-xs-bp-factor, 1));
1541
+ --ks-font-size-copy-s: calc(var(--ks-font-size-copy-s-base) * var(--ks-font-size-copy-s-bp-factor, 1));
1542
+ --ks-font-size-copy-m: calc(var(--ks-font-size-copy-m-base) * var(--ks-font-size-copy-m-bp-factor, 1));
1543
+ --ks-font-size-copy-l: calc(var(--ks-font-size-copy-l-base) * var(--ks-font-size-copy-l-bp-factor, 1));
1544
+ --ks-font-size-copy-xl: calc(var(--ks-font-size-copy-xl-base) * var(--ks-font-size-copy-xl-bp-factor, 1));
1545
+ --ks-font-size-copy-xxl: calc(var(--ks-font-size-copy-xxl-base) * var(--ks-font-size-copy-xxl-bp-factor, 1));
1546
+ --ks-font-size-interface-xxs: calc(
1547
+ var(--ks-font-size-interface-xxs-base) * var(--ks-font-size-interface-xxs-bp-factor, 1)
1548
+ );
1549
+ --ks-font-size-interface-xs: calc(
1550
+ var(--ks-font-size-interface-xs-base) * var(--ks-font-size-interface-xs-bp-factor, 1)
1551
+ );
1552
+ --ks-font-size-interface-s: calc(var(--ks-font-size-interface-s-base) * var(--ks-font-size-interface-s-bp-factor, 1));
1553
+ --ks-font-size-interface-m: calc(var(--ks-font-size-interface-m-base) * var(--ks-font-size-interface-m-bp-factor, 1));
1554
+ --ks-font-size-interface-l: calc(var(--ks-font-size-interface-l-base) * var(--ks-font-size-interface-l-bp-factor, 1));
1555
+ --ks-font-size-interface-xl: calc(
1556
+ var(--ks-font-size-interface-xl-base) * var(--ks-font-size-interface-xl-bp-factor, 1)
1557
+ );
1558
+ --ks-font-size-interface-xxl: calc(
1559
+ var(--ks-font-size-interface-xxl-base) * var(--ks-font-size-interface-xxl-bp-factor, 1)
1560
+ );
1561
+ --ks-font-size-mono-xxs: calc(var(--ks-font-size-mono-xxs-base) * var(--ks-font-size-mono-xxs-bp-factor, 1));
1562
+ --ks-font-size-mono-xs: calc(var(--ks-font-size-mono-xs-base) * var(--ks-font-size-mono-xs-bp-factor, 1));
1563
+ --ks-font-size-mono-s: calc(var(--ks-font-size-mono-s-base) * var(--ks-font-size-mono-s-bp-factor, 1));
1564
+ --ks-font-size-mono-m: calc(var(--ks-font-size-mono-m-base) * var(--ks-font-size-mono-m-bp-factor, 1));
1565
+ --ks-font-size-mono-l: calc(var(--ks-font-size-mono-l-base) * var(--ks-font-size-mono-l-bp-factor, 1));
1566
+ --ks-font-size-mono-xl: calc(var(--ks-font-size-mono-xl-base) * var(--ks-font-size-mono-xl-bp-factor, 1));
1567
+ --ks-font-size-mono-xxl: calc(var(--ks-font-size-mono-xxl-base) * var(--ks-font-size-mono-xxl-bp-factor, 1));
1568
+ }
1569
+
1570
+ @media (min-width: 36em) {
1571
+ :root,
1572
+ [ks-theme],
1573
+ [ks-inverted=false],
1574
+ [ks-inverted=true] {
1575
+ --ks-font-size-display-bp-factor: var(--ks-font-size-display-bp-factor-phone);
1576
+ --ks-font-size-display-xxs-bp-factor: var(--ks-font-size-display-xxs-bp-factor-phone);
1577
+ --ks-font-size-display-xs-bp-factor: var(--ks-font-size-display-xs-bp-factor-phone);
1578
+ --ks-font-size-display-s-bp-factor: var(--ks-font-size-display-s-bp-factor-phone);
1579
+ --ks-font-size-display-m-bp-factor: var(--ks-font-size-display-m-bp-factor-phone);
1580
+ --ks-font-size-display-l-bp-factor: var(--ks-font-size-display-l-bp-factor-phone);
1581
+ --ks-font-size-display-xl-bp-factor: var(--ks-font-size-display-xl-bp-factor-phone);
1582
+ --ks-font-size-display-xxl-bp-factor: var(--ks-font-size-display-xxl-bp-factor-phone);
1583
+ --ks-font-size-copy-bp-factor: var(--ks-font-size-copy-bp-factor-phone);
1584
+ --ks-font-size-copy-xxs-bp-factor: var(--ks-font-size-copy-xxs-bp-factor-phone);
1585
+ --ks-font-size-copy-xs-bp-factor: var(--ks-font-size-copy-xs-bp-factor-phone);
1586
+ --ks-font-size-copy-s-bp-factor: var(--ks-font-size-copy-s-bp-factor-phone);
1587
+ --ks-font-size-copy-m-bp-factor: var(--ks-font-size-copy-m-bp-factor-phone);
1588
+ --ks-font-size-copy-l-bp-factor: var(--ks-font-size-copy-l-bp-factor-phone);
1589
+ --ks-font-size-copy-xl-bp-factor: var(--ks-font-size-copy-xl-bp-factor-phone);
1590
+ --ks-font-size-copy-xxl-bp-factor: var(--ks-font-size-copy-xxl-bp-factor-phone);
1591
+ --ks-font-size-interface-bp-factor: var(--ks-font-size-interface-bp-factor-phone);
1592
+ --ks-font-size-interface-xxs-bp-factor: var(--ks-font-size-interface-xxs-bp-factor-phone);
1593
+ --ks-font-size-interface-xs-bp-factor: var(--ks-font-size-interface-xs-bp-factor-phone);
1594
+ --ks-font-size-interface-s-bp-factor: var(--ks-font-size-interface-s-bp-factor-phone);
1595
+ --ks-font-size-interface-m-bp-factor: var(--ks-font-size-interface-m-bp-factor-phone);
1596
+ --ks-font-size-interface-l-bp-factor: var(--ks-font-size-interface-l-bp-factor-phone);
1597
+ --ks-font-size-interface-xl-bp-factor: var(--ks-font-size-interface-xl-bp-factor-phone);
1598
+ --ks-font-size-interface-xxl-bp-factor: var(--ks-font-size-interface-xxl-bp-factor-phone);
1599
+ --ks-font-size-mono-bp-factor: var(--ks-font-size-mono-bp-factor-phone);
1600
+ --ks-font-size-mono-xxs-bp-factor: var(--ks-font-size-mono-xxs-bp-factor-phone);
1601
+ --ks-font-size-mono-xs-bp-factor: var(--ks-font-size-mono-xs-bp-factor-phone);
1602
+ --ks-font-size-mono-s-bp-factor: var(--ks-font-size-mono-s-bp-factor-phone);
1603
+ --ks-font-size-mono-m-bp-factor: var(--ks-font-size-mono-m-bp-factor-phone);
1604
+ --ks-font-size-mono-l-bp-factor: var(--ks-font-size-mono-l-bp-factor-phone);
1605
+ --ks-font-size-mono-xl-bp-factor: var(--ks-font-size-mono-xl-bp-factor-phone);
1606
+ --ks-font-size-mono-xxl-bp-factor: var(--ks-font-size-mono-xxl-bp-factor-phone);
1607
+ }
1608
+ }
1609
+ @media (min-width: 48em) {
1610
+ :root,
1611
+ [ks-theme],
1612
+ [ks-inverted=false],
1613
+ [ks-inverted=true] {
1614
+ --ks-font-size-display-xxs-bp-factor: var(--ks-font-size-display-xxs-bp-factor-tablet);
1615
+ --ks-font-size-display-xs-bp-factor: var(--ks-font-size-display-xs-bp-factor-tablet);
1616
+ --ks-font-size-display-s-bp-factor: var(--ks-font-size-display-s-bp-factor-tablet);
1617
+ --ks-font-size-display-m-bp-factor: var(--ks-font-size-display-m-bp-factor-tablet);
1618
+ --ks-font-size-display-l-bp-factor: var(--ks-font-size-display-l-bp-factor-tablet);
1619
+ --ks-font-size-display-xl-bp-factor: var(--ks-font-size-display-xl-bp-factor-tablet);
1620
+ --ks-font-size-display-xxl-bp-factor: var(--ks-font-size-display-xxl-bp-factor-tablet);
1621
+ --ks-font-size-copy-xxs-bp-factor: var(--ks-font-size-copy-xxs-bp-factor-tablet);
1622
+ --ks-font-size-copy-xs-bp-factor: var(--ks-font-size-copy-xs-bp-factor-tablet);
1623
+ --ks-font-size-copy-s-bp-factor: var(--ks-font-size-copy-s-bp-factor-tablet);
1624
+ --ks-font-size-copy-m-bp-factor: var(--ks-font-size-copy-m-bp-factor-tablet);
1625
+ --ks-font-size-copy-l-bp-factor: var(--ks-font-size-copy-l-bp-factor-tablet);
1626
+ --ks-font-size-copy-xl-bp-factor: var(--ks-font-size-copy-xl-bp-factor-tablet);
1627
+ --ks-font-size-copy-xxl-bp-factor: var(--ks-font-size-copy-xxl-bp-factor-tablet);
1628
+ --ks-font-size-interface-xxs-bp-factor: var(--ks-font-size-interface-xxs-bp-factor-tablet);
1629
+ --ks-font-size-interface-xs-bp-factor: var(--ks-font-size-interface-xs-bp-factor-tablet);
1630
+ --ks-font-size-interface-s-bp-factor: var(--ks-font-size-interface-s-bp-factor-tablet);
1631
+ --ks-font-size-interface-m-bp-factor: var(--ks-font-size-interface-m-bp-factor-tablet);
1632
+ --ks-font-size-interface-l-bp-factor: var(--ks-font-size-interface-l-bp-factor-tablet);
1633
+ --ks-font-size-interface-xl-bp-factor: var(--ks-font-size-interface-xl-bp-factor-tablet);
1634
+ --ks-font-size-interface-xxl-bp-factor: var(--ks-font-size-interface-xxl-bp-factor-tablet);
1635
+ --ks-font-size-mono-xxs-bp-factor: var(--ks-font-size-mono-xxs-bp-factor-tablet);
1636
+ --ks-font-size-mono-xs-bp-factor: var(--ks-font-size-mono-xs-bp-factor-tablet);
1637
+ --ks-font-size-mono-s-bp-factor: var(--ks-font-size-mono-s-bp-factor-tablet);
1638
+ --ks-font-size-mono-m-bp-factor: var(--ks-font-size-mono-m-bp-factor-tablet);
1639
+ --ks-font-size-mono-l-bp-factor: var(--ks-font-size-mono-l-bp-factor-tablet);
1640
+ --ks-font-size-mono-xl-bp-factor: var(--ks-font-size-mono-xl-bp-factor-tablet);
1641
+ --ks-font-size-mono-xxl-bp-factor: var(--ks-font-size-mono-xxl-bp-factor-tablet);
1642
+ }
1643
+ }
1644
+ @media (min-width: 62em) {
1645
+ :root,
1646
+ [ks-theme],
1647
+ [ks-inverted=false],
1648
+ [ks-inverted=true] {
1649
+ --ks-font-size-display-xxs-bp-factor: var(--ks-font-size-display-xxs-bp-factor-laptop);
1650
+ --ks-font-size-display-xs-bp-factor: var(--ks-font-size-display-xs-bp-factor-laptop);
1651
+ --ks-font-size-display-s-bp-factor: var(--ks-font-size-display-s-bp-factor-laptop);
1652
+ --ks-font-size-display-m-bp-factor: var(--ks-font-size-display-m-bp-factor-laptop);
1653
+ --ks-font-size-display-l-bp-factor: var(--ks-font-size-display-l-bp-factor-laptop);
1654
+ --ks-font-size-display-xl-bp-factor: var(--ks-font-size-display-xl-bp-factor-laptop);
1655
+ --ks-font-size-display-xxl-bp-factor: var(--ks-font-size-display-xxl-bp-factor-laptop);
1656
+ --ks-font-size-copy-xxs-bp-factor: var(--ks-font-size-copy-xxs-bp-factor-laptop);
1657
+ --ks-font-size-copy-xs-bp-factor: var(--ks-font-size-copy-xs-bp-factor-laptop);
1658
+ --ks-font-size-copy-s-bp-factor: var(--ks-font-size-copy-s-bp-factor-laptop);
1659
+ --ks-font-size-copy-m-bp-factor: var(--ks-font-size-copy-m-bp-factor-laptop);
1660
+ --ks-font-size-copy-l-bp-factor: var(--ks-font-size-copy-l-bp-factor-laptop);
1661
+ --ks-font-size-copy-xl-bp-factor: var(--ks-font-size-copy-xl-bp-factor-laptop);
1662
+ --ks-font-size-copy-xxl-bp-factor: var(--ks-font-size-copy-xxl-bp-factor-laptop);
1663
+ --ks-font-size-interface-xxs-bp-factor: var(--ks-font-size-interface-xxs-bp-factor-laptop);
1664
+ --ks-font-size-interface-xs-bp-factor: var(--ks-font-size-interface-xs-bp-factor-laptop);
1665
+ --ks-font-size-interface-s-bp-factor: var(--ks-font-size-interface-s-bp-factor-laptop);
1666
+ --ks-font-size-interface-m-bp-factor: var(--ks-font-size-interface-m-bp-factor-laptop);
1667
+ --ks-font-size-interface-l-bp-factor: var(--ks-font-size-interface-l-bp-factor-laptop);
1668
+ --ks-font-size-interface-xl-bp-factor: var(--ks-font-size-interface-xl-bp-factor-laptop);
1669
+ --ks-font-size-interface-xxl-bp-factor: var(--ks-font-size-interface-xxl-bp-factor-laptop);
1670
+ --ks-font-size-mono-xxs-bp-factor: var(--ks-font-size-mono-xxs-bp-factor-laptop);
1671
+ --ks-font-size-mono-xs-bp-factor: var(--ks-font-size-mono-xs-bp-factor-laptop);
1672
+ --ks-font-size-mono-s-bp-factor: var(--ks-font-size-mono-s-bp-factor-laptop);
1673
+ --ks-font-size-mono-m-bp-factor: var(--ks-font-size-mono-m-bp-factor-laptop);
1674
+ --ks-font-size-mono-l-bp-factor: var(--ks-font-size-mono-l-bp-factor-laptop);
1675
+ --ks-font-size-mono-xl-bp-factor: var(--ks-font-size-mono-xl-bp-factor-laptop);
1676
+ --ks-font-size-mono-xxl-bp-factor: var(--ks-font-size-mono-xxl-bp-factor-laptop);
1677
+ }
1678
+ }
1679
+ @media (min-width: 75em) {
1680
+ :root,
1681
+ [ks-theme],
1682
+ [ks-inverted=false],
1683
+ [ks-inverted=true] {
1684
+ --ks-font-size-display-xxs-bp-factor: var(--ks-font-size-display-xxs-bp-factor-desktop);
1685
+ --ks-font-size-display-xs-bp-factor: var(--ks-font-size-display-xs-bp-factor-desktop);
1686
+ --ks-font-size-display-s-bp-factor: var(--ks-font-size-display-s-bp-factor-desktop);
1687
+ --ks-font-size-display-m-bp-factor: var(--ks-font-size-display-m-bp-factor-desktop);
1688
+ --ks-font-size-display-l-bp-factor: var(--ks-font-size-display-l-bp-factor-desktop);
1689
+ --ks-font-size-display-xl-bp-factor: var(--ks-font-size-display-xl-bp-factor-desktop);
1690
+ --ks-font-size-display-xxl-bp-factor: var(--ks-font-size-display-xxl-bp-factor-desktop);
1691
+ --ks-font-size-copy-xxs-bp-factor: var(--ks-font-size-copy-xxs-bp-factor-desktop);
1692
+ --ks-font-size-copy-xs-bp-factor: var(--ks-font-size-copy-xs-bp-factor-desktop);
1693
+ --ks-font-size-copy-s-bp-factor: var(--ks-font-size-copy-s-bp-factor-desktop);
1694
+ --ks-font-size-copy-m-bp-factor: var(--ks-font-size-copy-m-bp-factor-desktop);
1695
+ --ks-font-size-copy-l-bp-factor: var(--ks-font-size-copy-l-bp-factor-desktop);
1696
+ --ks-font-size-copy-xl-bp-factor: var(--ks-font-size-copy-xl-bp-factor-desktop);
1697
+ --ks-font-size-copy-xxl-bp-factor: var(--ks-font-size-copy-xxl-bp-factor-desktop);
1698
+ --ks-font-size-interface-xxs-bp-factor: var(--ks-font-size-interface-xxs-bp-factor-desktop);
1699
+ --ks-font-size-interface-xs-bp-factor: var(--ks-font-size-interface-xs-bp-factor-desktop);
1700
+ --ks-font-size-interface-s-bp-factor: var(--ks-font-size-interface-s-bp-factor-desktop);
1701
+ --ks-font-size-interface-m-bp-factor: var(--ks-font-size-interface-m-bp-factor-desktop);
1702
+ --ks-font-size-interface-l-bp-factor: var(--ks-font-size-interface-l-bp-factor-desktop);
1703
+ --ks-font-size-interface-xl-bp-factor: var(--ks-font-size-interface-xl-bp-factor-desktop);
1704
+ --ks-font-size-interface-xxl-bp-factor: var(--ks-font-size-interface-xxl-bp-factor-desktop);
1705
+ --ks-font-size-mono-xxs-bp-factor: var(--ks-font-size-mono-xxs-bp-factor-desktop);
1706
+ --ks-font-size-mono-xs-bp-factor: var(--ks-font-size-mono-xs-bp-factor-desktop);
1707
+ --ks-font-size-mono-s-bp-factor: var(--ks-font-size-mono-s-bp-factor-desktop);
1708
+ --ks-font-size-mono-m-bp-factor: var(--ks-font-size-mono-m-bp-factor-desktop);
1709
+ --ks-font-size-mono-l-bp-factor: var(--ks-font-size-mono-l-bp-factor-desktop);
1710
+ --ks-font-size-mono-xl-bp-factor: var(--ks-font-size-mono-xl-bp-factor-desktop);
1711
+ --ks-font-size-mono-xxl-bp-factor: var(--ks-font-size-mono-xxl-bp-factor-desktop);
1712
+ }
1713
+ }
1714
+ :root,
1715
+ [ks-theme],
1716
+ [ks-inverted=false],
1717
+ [ks-inverted=true] {
1718
+ --spacing-base: 16px;
1719
+ --spacing-shrink-factor: calc(var(--global-shrink-factor) * 1);
1720
+ --spacing-grow-factor: calc(var(--global-grow-factor) * 1);
1721
+ --spacing-bp-factor: calc(var(--global-bp-factor) * 1);
1722
+ --spacing-shrink-factor: 0.65;
1723
+ --spacing-grow-factor: 1.585;
1724
+ --spacing-bp-factor: 1.0125;
1725
+ --spacing-xxs-bp-factor: calc(1 * var(--spacing-bp-factor));
1726
+ --spacing-xs-bp-factor: calc(var(--spacing-xxs-bp-factor) * var(--spacing-bp-factor));
1727
+ --spacing-s-bp-factor: calc(var(--spacing-xs-bp-factor) * var(--spacing-bp-factor));
1728
+ --spacing-m-bp-factor: calc(var(--spacing-s-bp-factor) * var(--spacing-bp-factor));
1729
+ --spacing-l-bp-factor: calc(var(--spacing-m-bp-factor) * var(--spacing-bp-factor));
1730
+ --spacing-xl-bp-factor: calc(var(--spacing-l-bp-factor) * var(--spacing-bp-factor));
1731
+ --spacing-xxl-bp-factor: calc(var(--spacing-xl-bp-factor) * var(--spacing-bp-factor));
1732
+ }
1733
+
1734
+ :root,
1735
+ [ks-theme],
1736
+ [ks-inverted=false],
1737
+ [ks-inverted=true] {
1738
+ --ks-spacing-xxs-base: calc(var(--ks-spacing-xs-base) * calc(var(--spacing-shrink-factor) * 1));
1739
+ --ks-spacing-xs-base: calc(var(--ks-spacing-s-base) * calc(var(--spacing-shrink-factor) * 1));
1740
+ --ks-spacing-s-base: calc(var(--ks-spacing-m-base) * calc(var(--spacing-shrink-factor) * 1));
1741
+ --ks-spacing-m-base: var(--spacing-base);
1742
+ --ks-spacing-l-base: calc(var(--ks-spacing-m-base) * var(--spacing-grow-factor));
1743
+ --ks-spacing-xl-base: calc(var(--ks-spacing-l-base) * var(--spacing-grow-factor));
1744
+ --ks-spacing-xxl-base: calc(var(--ks-spacing-xl-base) * var(--spacing-grow-factor));
1745
+ }
1746
+
1747
+ :root,
1748
+ [ks-theme],
1749
+ [ks-inverted=false],
1750
+ [ks-inverted=true] {
1751
+ --ks-spacing-xxs-bp-factor-phone: calc(1 * var(--spacing-xxs-bp-factor));
1752
+ --ks-spacing-xxs-bp-factor-tablet: calc(var(--ks-spacing-xxs-bp-factor-phone) * var(--spacing-xxs-bp-factor));
1753
+ --ks-spacing-xxs-bp-factor-laptop: calc(var(--ks-spacing-xxs-bp-factor-tablet) * var(--spacing-xxs-bp-factor));
1754
+ --ks-spacing-xxs-bp-factor-desktop: calc(var(--ks-spacing-xxs-bp-factor-laptop) * var(--spacing-xxs-bp-factor));
1755
+ --ks-spacing-xs-bp-factor-phone: calc(1 * var(--spacing-xs-bp-factor));
1756
+ --ks-spacing-xs-bp-factor-tablet: calc(var(--ks-spacing-xs-bp-factor-phone) * var(--spacing-xs-bp-factor));
1757
+ --ks-spacing-xs-bp-factor-laptop: calc(var(--ks-spacing-xs-bp-factor-tablet) * var(--spacing-xs-bp-factor));
1758
+ --ks-spacing-xs-bp-factor-desktop: calc(var(--ks-spacing-xs-bp-factor-laptop) * var(--spacing-xs-bp-factor));
1759
+ --ks-spacing-s-bp-factor-phone: calc(1 * var(--spacing-s-bp-factor));
1760
+ --ks-spacing-s-bp-factor-tablet: calc(var(--ks-spacing-s-bp-factor-phone) * var(--spacing-s-bp-factor));
1761
+ --ks-spacing-s-bp-factor-laptop: calc(var(--ks-spacing-s-bp-factor-tablet) * var(--spacing-s-bp-factor));
1762
+ --ks-spacing-s-bp-factor-desktop: calc(var(--ks-spacing-s-bp-factor-laptop) * var(--spacing-s-bp-factor));
1763
+ --ks-spacing-m-bp-factor-phone: calc(1 * var(--spacing-m-bp-factor));
1764
+ --ks-spacing-m-bp-factor-tablet: calc(var(--ks-spacing-m-bp-factor-phone) * var(--spacing-m-bp-factor));
1765
+ --ks-spacing-m-bp-factor-laptop: calc(var(--ks-spacing-m-bp-factor-tablet) * var(--spacing-m-bp-factor));
1766
+ --ks-spacing-m-bp-factor-desktop: calc(var(--ks-spacing-m-bp-factor-laptop) * var(--spacing-m-bp-factor));
1767
+ --ks-spacing-l-bp-factor-phone: calc(1 * var(--spacing-l-bp-factor));
1768
+ --ks-spacing-l-bp-factor-tablet: calc(var(--ks-spacing-l-bp-factor-phone) * var(--spacing-l-bp-factor));
1769
+ --ks-spacing-l-bp-factor-laptop: calc(var(--ks-spacing-l-bp-factor-tablet) * var(--spacing-l-bp-factor));
1770
+ --ks-spacing-l-bp-factor-desktop: calc(var(--ks-spacing-l-bp-factor-laptop) * var(--spacing-l-bp-factor));
1771
+ --ks-spacing-xl-bp-factor-phone: calc(1 * var(--spacing-xl-bp-factor));
1772
+ --ks-spacing-xl-bp-factor-tablet: calc(var(--ks-spacing-xl-bp-factor-phone) * var(--spacing-xl-bp-factor));
1773
+ --ks-spacing-xl-bp-factor-laptop: calc(var(--ks-spacing-xl-bp-factor-tablet) * var(--spacing-xl-bp-factor));
1774
+ --ks-spacing-xl-bp-factor-desktop: calc(var(--ks-spacing-xl-bp-factor-laptop) * var(--spacing-xl-bp-factor));
1775
+ --ks-spacing-xxl-bp-factor-phone: calc(1 * var(--spacing-xxl-bp-factor));
1776
+ --ks-spacing-xxl-bp-factor-tablet: calc(var(--ks-spacing-xxl-bp-factor-phone) * var(--spacing-xxl-bp-factor));
1777
+ --ks-spacing-xxl-bp-factor-laptop: calc(var(--ks-spacing-xxl-bp-factor-tablet) * var(--spacing-xxl-bp-factor));
1778
+ --ks-spacing-xxl-bp-factor-desktop: calc(var(--ks-spacing-xxl-bp-factor-laptop) * var(--spacing-xxl-bp-factor));
1779
+ }
1780
+
1781
+ :root,
1782
+ [ks-theme],
1783
+ [ks-inverted=false],
1784
+ [ks-inverted=true] {
1785
+ --ks-spacing-stack-xxs: var(--ks-spacing-xxs);
1786
+ --ks-spacing-stack-xs: var(--ks-spacing-xs);
1787
+ --ks-spacing-stack-s: var(--ks-spacing-s);
1788
+ --ks-spacing-stack-m: var(--ks-spacing-m);
1789
+ --ks-spacing-stack-l: var(--ks-spacing-l);
1790
+ --ks-spacing-stack-xl: var(--ks-spacing-xl);
1791
+ --ks-spacing-stack-xxl: var(--ks-spacing-xxl);
1792
+ --ks-spacing-inline-xxs: var(--ks-spacing-xxs);
1793
+ --ks-spacing-inline-xs: var(--ks-spacing-xs);
1794
+ --ks-spacing-inline-s: var(--ks-spacing-s);
1795
+ --ks-spacing-inline-m: var(--ks-spacing-m);
1796
+ --ks-spacing-inline-l: var(--ks-spacing-l);
1797
+ --ks-spacing-inline-xl: var(--ks-spacing-xl);
1798
+ --ks-spacing-inline-xxl: var(--ks-spacing-xxl);
1799
+ --ks-spacing-inset-xxs: var(--ks-spacing-xxs);
1800
+ --ks-spacing-inset-xs: var(--ks-spacing-xs);
1801
+ --ks-spacing-inset-s: var(--ks-spacing-s);
1802
+ --ks-spacing-inset-m: var(--ks-spacing-m);
1803
+ --ks-spacing-inset-l: var(--ks-spacing-l);
1804
+ --ks-spacing-inset-xl: var(--ks-spacing-xl);
1805
+ --ks-spacing-inset-xxl: var(--ks-spacing-xxl);
1806
+ --ks-spacing-inset-squish-xxs: var(--ks-spacing-xs) var(--ks-spacing-xxs);
1807
+ --ks-spacing-inset-squish-xs: var(--ks-spacing-s) var(--ks-spacing-xs);
1808
+ --ks-spacing-inset-squish-s: var(--ks-spacing-m) var(--ks-spacing-s);
1809
+ --ks-spacing-inset-squish-m: var(--ks-spacing-l) var(--ks-spacing-m);
1810
+ --ks-spacing-inset-squish-l: var(--ks-spacing-xl) var(--ks-spacing-l);
1811
+ --ks-spacing-inset-squish-xl: var(--ks-spacing-xxl) var(--ks-spacing-xl);
1812
+ --ks-spacing-inset-squish-xxl: calc(var(--ks-spacing-xxl) * 1.25) var(--ks-spacing-xxl);
1813
+ --ks-spacing-inset-squish-xxs: var(--ks-spacing-xxs) var(--ks-spacing-xs);
1814
+ --ks-spacing-inset-squish-xs: var(--ks-spacing-xs) var(--ks-spacing-s);
1815
+ --ks-spacing-inset-squish-s: var(--ks-spacing-s) var(--ks-spacing-m);
1816
+ --ks-spacing-inset-squish-m: var(--ks-spacing-m) var(--ks-spacing-l);
1817
+ --ks-spacing-inset-squish-l: var(--ks-spacing-l) var(--ks-spacing-xl);
1818
+ --ks-spacing-inset-squish-xl: var(--ks-spacing-xl) var(--ks-spacing-xxl);
1819
+ --ks-spacing-inset-squish-xxl: var(--ks-spacing-xxl) calc(var(--ks-spacing-xxl) * 1.25);
1820
+ }
1821
+
1822
+ :root,
1823
+ [ks-theme],
1824
+ [ks-inverted=false],
1825
+ [ks-inverted=true] {
1826
+ --ks-spacing-xxs: calc(var(--ks-spacing-xxs-base) * var(--ks-spacing-xxs-bp-factor, 1));
1827
+ --ks-spacing-xs: calc(var(--ks-spacing-xs-base) * var(--ks-spacing-xs-bp-factor, 1));
1828
+ --ks-spacing-s: calc(var(--ks-spacing-s-base) * var(--ks-spacing-s-bp-factor, 1));
1829
+ --ks-spacing-m: calc(var(--ks-spacing-m-base) * var(--ks-spacing-m-bp-factor, 1));
1830
+ --ks-spacing-l: calc(var(--ks-spacing-l-base) * var(--ks-spacing-l-bp-factor, 1));
1831
+ --ks-spacing-xl: calc(var(--ks-spacing-xl-base) * var(--ks-spacing-xl-bp-factor, 1));
1832
+ --ks-spacing-xxl: calc(var(--ks-spacing-xxl-base) * var(--ks-spacing-xxl-bp-factor, 1));
1833
+ }
1834
+
1835
+ @media (min-width: 36em) {
1836
+ :root,
1837
+ [ks-theme],
1838
+ [ks-inverted=false],
1839
+ [ks-inverted=true] {
1840
+ --ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-phone);
1841
+ --ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-phone);
1842
+ --ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-phone);
1843
+ --ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-phone);
1844
+ --ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-phone);
1845
+ --ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-phone);
1846
+ --ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-phone);
1847
+ }
1848
+ }
1849
+ @media (min-width: 48em) {
1850
+ :root,
1851
+ [ks-theme],
1852
+ [ks-inverted=false],
1853
+ [ks-inverted=true] {
1854
+ --ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-tablet);
1855
+ --ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-tablet);
1856
+ --ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-tablet);
1857
+ --ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-tablet);
1858
+ --ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-tablet);
1859
+ --ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-tablet);
1860
+ --ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-tablet);
1861
+ }
1862
+ }
1863
+ @media (min-width: 62em) {
1864
+ :root,
1865
+ [ks-theme],
1866
+ [ks-inverted=false],
1867
+ [ks-inverted=true] {
1868
+ --ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-laptop);
1869
+ --ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-laptop);
1870
+ --ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-laptop);
1871
+ --ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-laptop);
1872
+ --ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-laptop);
1873
+ --ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-laptop);
1874
+ --ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-laptop);
1875
+ }
1876
+ }
1877
+ @media (min-width: 75em) {
1878
+ :root,
1879
+ [ks-theme],
1880
+ [ks-inverted=false],
1881
+ [ks-inverted=true] {
1882
+ --ks-spacing-xxs-bp-factor: var(--ks-spacing-xxs-bp-factor-desktop);
1883
+ --ks-spacing-xs-bp-factor: var(--ks-spacing-xs-bp-factor-desktop);
1884
+ --ks-spacing-s-bp-factor: var(--ks-spacing-s-bp-factor-desktop);
1885
+ --ks-spacing-m-bp-factor: var(--ks-spacing-m-bp-factor-desktop);
1886
+ --ks-spacing-l-bp-factor: var(--ks-spacing-l-bp-factor-desktop);
1887
+ --ks-spacing-xl-bp-factor: var(--ks-spacing-xl-bp-factor-desktop);
1888
+ --ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-desktop);
1889
+ }
1890
+ }
669
1891
  @font-face {
670
1892
  font-family: "Google Sans 18pt";
671
1893
  font-style: normal;
@@ -687,8 +1909,10 @@ h3 {
687
1909
  :root, [ks-inverted], [ks-theme] {
688
1910
  --dsa-rich-text__headline--font-weight: var(--dsa-headline--font-weight, var(--ks-font-weight-medium));
689
1911
  --dsa-rich-text__headline--color: var(--dsa-headline--color, var(--ks-text-color-display));
1912
+ --dsa-rich-text__headline--margin: 1.25em 0 0.5em;
690
1913
  --dsa-rich-text--color: var(--ks-text-color-copy);
691
1914
  --dsa-rich-text--font: var(--ks-font-copy-m);
1915
+ --dsa-rich-text--vertical-spacing: 1em 0 0;
692
1916
  }
693
1917
 
694
1918
  :root, [ks-inverted], [ks-theme] {
@@ -721,6 +1945,18 @@ hr.c-divider {
721
1945
  --c-divider--background: var(--ks-border-color-accent);
722
1946
  }
723
1947
 
1948
+ .sr-only {
1949
+ position: absolute;
1950
+ width: 1px;
1951
+ height: 1px;
1952
+ padding: 0;
1953
+ margin: -1px;
1954
+ overflow: hidden;
1955
+ clip: rect(0, 0, 0, 0);
1956
+ white-space: nowrap;
1957
+ border: 0;
1958
+ }
1959
+
724
1960
  :root, [ks-inverted], [ks-theme] {
725
1961
  --g-link--font-weight: var(--dsa-link--font-weight, var(--ks-font-weight-semi-bold));
726
1962
  --g-link--text-decoration: var(--dsa-link--text-decoration, underline);
@@ -748,9 +1984,17 @@ hr.c-divider {
748
1984
  #root {
749
1985
  --dsa-text-color-on-primary: var(--dsa-text-color-on-primary-base);
750
1986
  --dsa-text-color-on-primary-inverted: var(--dsa-text-color-on-primary-inverted-base);
1987
+ --dsa-overlay-text--shadow: var(--dsa-overlay-text--shadow-base);
1988
+ --dsa-overlay-text--shadow-inverted: var(--dsa-overlay-text--shadow-inverted-base);
1989
+ --dsa-overlay-text--text-color: var(--dsa-overlay-text--text-color-base);
1990
+ --dsa-overlay-text--text-color-inverted: var(--dsa-overlay-text--text-color-inverted-base);
751
1991
  }
752
1992
 
753
1993
  [ks-inverted=true] {
754
1994
  --dsa-text-color-on-primary: var(--dsa-text-color-on-primary-inverted-base);
755
1995
  --dsa-text-color-on-primary-inverted: var(--dsa-text-color-on-primary-base);
1996
+ --dsa-overlay-text--shadow: var(--dsa-overlay-text--shadow-inverted-base);
1997
+ --dsa-overlay-text--shadow-inverted: var(--dsa-overlay-text--shadow-base);
1998
+ --dsa-overlay-text--text-color: var(--dsa-overlay-text--text-color-inverted-base);
1999
+ --dsa-overlay-text--text-color-inverted: var(--dsa-overlay-text--text-color-base);
756
2000
  }