@kickstartds/ds-agency-premium 1.6.72--canary.56.2518.0 → 1.6.72--canary.43.2521.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 (474) hide show
  1. package/dist/{src/components/blog-aside/BlogAsideProps.d.ts → BlogAsideProps-c760fd2a.d.ts} +9 -8
  2. package/dist/{src/components/blog-author/BlogAuthorProps.d.ts → BlogAuthorProps-fb0241df.d.ts} +10 -9
  3. package/dist/{src/components/blog-head/BlogHeadProps.d.ts → BlogHeadProps-f5855e93.d.ts} +8 -7
  4. package/dist/{src/components/cms/BlogOverviewProps.d.ts → BlogOverviewProps-6a826e52.d.ts} +12 -11
  5. package/dist/{src/components/cms/BlogPostProps.d.ts → BlogPostProps-6a826e52.d.ts} +9 -8
  6. package/dist/{src/components/blog-tag/BlogTagProps.d.ts → BlogTagProps-f5855e93.d.ts} +3 -2
  7. package/dist/{src/components/blog-teaser/BlogTeaserProps.d.ts → BlogTeaserProps-d62a0a9a.d.ts} +17 -16
  8. package/dist/{src/components/business-card/BusinessCardProps.d.ts → BusinessCardProps-e10e7b62.d.ts} +10 -9
  9. package/dist/{src/components/button/ButtonProps.d.ts → ButtonProps-4e2b2ecf.d.ts} +9 -8
  10. package/dist/{src/components/contact/ContactProps.d.ts → ContactProps-7cac90e5.d.ts} +13 -12
  11. package/dist/{src/components/content-nav/ContentNavProps.d.ts → ContentNavProps-0e282a9f.d.ts} +2 -1
  12. package/dist/{src/components/cta/CtaProps.d.ts → CtaProps-789f8508.d.ts} +24 -23
  13. package/dist/{src/components/divider/DividerProps.d.ts → DividerProps-2ef31901.d.ts} +5 -4
  14. package/dist/{src/components/downloads/DownloadsProps.d.ts → DownloadsProps-a49a977e.d.ts} +2 -1
  15. package/dist/{src/components/event-appointment/EventAppointmentProps.d.ts → EventAppointmentProps-443cd1ce.d.ts} +8 -7
  16. package/dist/{src/components/cms/EventDetailProps.d.ts → EventDetailProps-42a7eebe.d.ts} +16 -15
  17. package/dist/{src/components/event-filter/EventFilterProps.d.ts → EventFilterProps-b190eb86.d.ts} +3 -2
  18. package/dist/{src/components/event-latest-teaser/EventLatestTeaserProps.d.ts → EventLatestTeaserProps-fc9d3281.d.ts} +11 -10
  19. package/dist/{src/components/event-list-teaser/EventListTeaserProps.d.ts → EventListTeaserProps-5cc94436.d.ts} +17 -16
  20. package/dist/{src/components/event-location/EventLocationProps.d.ts → EventLocationProps-871bc198.d.ts} +8 -7
  21. package/dist/{src/components/faq/FaqProps.d.ts → FaqProps-78384db5.d.ts} +6 -5
  22. package/dist/{src/components/features/FeaturesProps.d.ts → FeaturesProps-a9041d97.d.ts} +12 -11
  23. package/dist/{src/components/footer/FooterProps.d.ts → FooterProps-a0a104ca.d.ts} +10 -9
  24. package/dist/{src/components/gallery/GalleryProps.d.ts → GalleryProps-76e7de44.d.ts} +9 -8
  25. package/dist/{src/components/header/HeaderProps.d.ts → HeaderProps-72763967.d.ts} +12 -11
  26. package/dist/{src/components/headline/HeadlineProps.d.ts → HeadlineProps-e1305784.d.ts} +11 -10
  27. package/dist/{src/components/hero/HeroProps.d.ts → HeroProps-fec6b267.d.ts} +24 -23
  28. package/dist/{src/components/html/HtmlProps.d.ts → HtmlProps-9d091769.d.ts} +7 -6
  29. package/dist/{src/components/image-story/ImageStoryProps.d.ts → ImageStoryProps-4e2b2ecf.d.ts} +16 -15
  30. package/dist/{src/components/image-text/ImageTextProps.d.ts → ImageTextProps-9286cca4.d.ts} +7 -6
  31. package/dist/{src/components/logo/LogoProps.d.ts → LogoProps-01796f0a.d.ts} +9 -8
  32. package/dist/{src/components/logos/LogosProps.d.ts → LogosProps-d4677d2c.d.ts} +14 -13
  33. package/dist/{src/components/mosaic/MosaicProps.d.ts → MosaicProps-d52c7151.d.ts} +72 -5
  34. package/dist/{src/components/cms/PageProps.d.ts → PageProps-6a826e52.d.ts} +10 -9
  35. package/dist/{src/components/search-bar/SearchBarProps.d.ts → SearchBarProps-26263244.d.ts} +3 -2
  36. package/dist/{src/components/search-filter/SearchFilterProps.d.ts → SearchFilterProps-2fa6419b.d.ts} +2 -1
  37. package/dist/{src/components/search-form/SearchFormProps.d.ts → SearchFormProps-3d2c3462.d.ts} +4 -3
  38. package/dist/{src/components/search-result-match/SearchResultMatchProps.d.ts → SearchResultMatchProps-777cd47c.d.ts} +5 -4
  39. package/dist/{src/components/search-result/SearchResultProps.d.ts → SearchResultProps-f6f07017.d.ts} +10 -9
  40. package/dist/SectionProps-6a826e52.d.ts +162 -0
  41. package/dist/{src/components/seo/SeoProps.d.ts → SeoProps-f2d6dcaa.d.ts} +7 -6
  42. package/dist/SliderProps-789f8508.d.ts +57 -0
  43. package/dist/SplitEvenProps-d62a0a9a.d.ts +72 -0
  44. package/dist/SplitWeightedProps-d62a0a9a.d.ts +102 -0
  45. package/dist/{src/components/stat/StatProps.d.ts → StatProps-79109ad0.d.ts} +6 -5
  46. package/dist/{src/components/stats/StatsProps.d.ts → StatsProps-bf5ef578.d.ts} +4 -3
  47. package/dist/{src/components/teaser-card/TeaserCardProps.d.ts → TeaserCardProps-d069476f.d.ts} +11 -10
  48. package/dist/{src/components/testimonials/TestimonialsProps.d.ts → TestimonialsProps-e344f597.d.ts} +12 -11
  49. package/dist/{src/components/text/TextProps.d.ts → TextProps-a23170d2.d.ts} +6 -5
  50. package/dist/{src/components/video-curtain/VideoCurtainProps.d.ts → VideoCurtainProps-a2c0cc7f.d.ts} +17 -16
  51. package/dist/components/blog-aside/index.d.ts +8 -0
  52. package/dist/components/blog-aside/index.js +1 -1
  53. package/dist/components/blog-author/index.d.ts +8 -0
  54. package/dist/components/blog-author/index.js +1 -1
  55. package/dist/components/blog-head/index.d.ts +7 -0
  56. package/dist/components/blog-head/index.js +1 -1
  57. package/dist/components/blog-overview/index.d.ts +5 -0
  58. package/dist/components/blog-overview/index.js +1 -1
  59. package/dist/components/blog-post/index.d.ts +5 -0
  60. package/dist/components/blog-post/index.js +1 -1
  61. package/dist/components/blog-teaser/index.d.ts +8 -0
  62. package/dist/components/blog-teaser/index.js +1 -1
  63. package/dist/components/breadcrumb/index.d.ts +28 -0
  64. package/dist/components/breadcrumb/index.js +1 -1
  65. package/dist/components/business-card/business-card.css +7 -5
  66. package/dist/components/business-card/index.d.ts +7 -0
  67. package/dist/components/business-card/index.js +2 -2
  68. package/dist/components/button/button.css +6 -1
  69. package/dist/components/button/index.d.ts +7 -0
  70. package/dist/components/button/index.js +1 -1
  71. package/dist/components/button-group/index.d.ts +41 -0
  72. package/dist/components/button-group/index.js +1 -1
  73. package/dist/components/contact/index.d.ts +9 -0
  74. package/dist/components/contact/index.js +1 -1
  75. package/dist/components/content-nav/content-nav.css +2 -0
  76. package/dist/components/content-nav/index.d.ts +7 -0
  77. package/dist/components/content-nav/index.js +1 -1
  78. package/dist/components/cookie-consent/C15t.client.d.ts +5 -0
  79. package/dist/{src/components → components}/cookie-consent/CookieConsent.client.d.ts +2 -1
  80. package/dist/components/cookie-consent/cookie-consent.css +14 -10
  81. package/dist/{src/components/cookie-consent/CookieConsentProps.d.ts → components/cookie-consent/index.d.ts} +17 -9
  82. package/dist/components/cookie-consent/index.js +1 -1
  83. package/dist/components/cta/index.d.ts +8 -0
  84. package/dist/components/cta/index.js +1 -1
  85. package/dist/components/divider/index.d.ts +9 -0
  86. package/dist/components/divider/index.js +1 -1
  87. package/dist/components/downloads/index.d.ts +8 -0
  88. package/dist/components/downloads/index.js +1 -1
  89. package/dist/components/event-appointment/index.d.ts +7 -0
  90. package/dist/components/event-appointment/index.js +1 -1
  91. package/dist/components/event-detail/index.d.ts +5 -0
  92. package/dist/components/event-detail/index.js +1 -1
  93. package/dist/components/event-filter/index.d.ts +7 -0
  94. package/dist/components/event-filter/index.js +1 -1
  95. package/dist/components/event-header/index.d.ts +35 -0
  96. package/dist/components/event-header/index.js +1 -1
  97. package/dist/components/event-latest/index.d.ts +30 -0
  98. package/dist/components/event-latest/index.js +1 -1
  99. package/dist/components/event-latest-teaser/event-latest-teaser.css +2 -2
  100. package/dist/components/event-latest-teaser/index.d.ts +8 -0
  101. package/dist/components/event-latest-teaser/index.js +1 -1
  102. package/dist/components/event-list/index.d.ts +19 -0
  103. package/dist/components/event-list/index.js +1 -1
  104. package/dist/components/event-list-teaser/event-list-teaser.css +2 -2
  105. package/dist/components/event-list-teaser/index.d.ts +8 -0
  106. package/dist/components/event-list-teaser/index.js +1 -1
  107. package/dist/components/event-location/event-location.css +3 -3
  108. package/dist/components/event-location/index.d.ts +7 -0
  109. package/dist/components/event-location/index.js +1 -1
  110. package/dist/{src/components/event-login/EventLoginProps.d.ts → components/event-login/index.d.ts} +20 -13
  111. package/dist/components/event-login/index.js +1 -1
  112. package/dist/{src/components/event-registration/EventRegistrationProps.d.ts → components/event-registration/index.d.ts} +25 -18
  113. package/dist/components/event-registration/index.js +1 -1
  114. package/dist/components/faq/index.d.ts +25 -0
  115. package/dist/components/faq/index.js +1 -1
  116. package/dist/components/feature/index.d.ts +64 -0
  117. package/dist/components/feature/index.js +1 -1
  118. package/dist/components/features/index.d.ts +8 -0
  119. package/dist/components/features/index.js +1 -1
  120. package/dist/components/footer/index.d.ts +8 -0
  121. package/dist/components/footer/index.js +1 -1
  122. package/dist/components/gallery/index.d.ts +8 -0
  123. package/dist/components/gallery/index.js +1 -1
  124. package/dist/components/header/index.d.ts +8 -0
  125. package/dist/components/header/index.js +1 -1
  126. package/dist/components/headline/index.d.ts +12 -0
  127. package/dist/components/headline/index.js +1 -1
  128. package/dist/components/hero/hero.css +34 -28
  129. package/dist/components/hero/index.d.ts +8 -0
  130. package/dist/components/hero/index.js +1 -1
  131. package/dist/{src/components → components}/html/Html.client.d.ts +2 -1
  132. package/dist/components/html/index.d.ts +8 -0
  133. package/dist/components/html/index.js +1 -1
  134. package/dist/components/image-story/index.d.ts +8 -0
  135. package/dist/components/image-story/index.js +1 -1
  136. package/dist/components/image-text/index.d.ts +9 -0
  137. package/dist/components/image-text/index.js +1 -1
  138. package/dist/{src/components/cms/SettingsProps.d.ts → components/index/index.d.ts} +11 -5
  139. package/dist/components/logo/index.d.ts +8 -0
  140. package/dist/components/logo/index.js +1 -1
  141. package/dist/components/logos/index.d.ts +8 -0
  142. package/dist/components/logos/index.js +1 -1
  143. package/dist/components/logos/logos.css +8 -6
  144. package/dist/components/mosaic/index.d.ts +8 -0
  145. package/dist/components/mosaic/index.js +1 -1
  146. package/dist/{src/components/nav-dropdown/NavDropdownProps.d.ts → components/nav-dropdown/index.d.ts} +7 -2
  147. package/dist/components/nav-dropdown/nav-dropdown.css +5 -3
  148. package/dist/components/nav-flyout/index.d.ts +35 -0
  149. package/dist/components/nav-flyout/index.js +1 -1
  150. package/dist/{src/components/nav-main/NavMainProps.d.ts → components/nav-main/index.d.ts} +16 -8
  151. package/dist/components/nav-main/index.js +1 -1
  152. package/dist/{src/components → components}/nav-main/js/NavToggle.client.d.ts +2 -1
  153. package/dist/{src/components → components}/nav-main/js/body.client.d.ts +1 -1
  154. package/dist/components/nav-main/js/navMainEvents.client.d.ts +5 -0
  155. package/dist/components/nav-toggle/index.d.ts +6 -0
  156. package/dist/components/nav-topbar/index.d.ts +30 -0
  157. package/dist/components/nav-topbar/index.js +1 -1
  158. package/dist/components/page/index.d.ts +5 -0
  159. package/dist/components/page-wrapper/index.d.ts +3 -0
  160. package/dist/components/page-wrapper/index.js +4 -5
  161. package/dist/{src/components/pagination/PaginationProps.d.ts → components/pagination/index.d.ts} +16 -1
  162. package/dist/components/pagination/index.js +1 -1
  163. package/dist/components/pagination/pagination.css +3 -3
  164. package/dist/components/presets.json +5220 -0
  165. package/dist/{src/components/Providers.d.ts → components/providers/index.d.ts} +3 -2
  166. package/dist/components/providers/index.js +1 -1
  167. package/dist/{src/components/cms/SearchProps.d.ts → components/search/index.d.ts} +10 -5
  168. package/dist/components/search/index.js +1 -1
  169. package/dist/components/search-bar/index.d.ts +7 -0
  170. package/dist/components/search-bar/index.js +1 -1
  171. package/dist/components/search-filter/index.d.ts +7 -0
  172. package/dist/components/search-filter/index.js +1 -1
  173. package/dist/{src/components → components}/search-form/SearchForm.client.d.ts +2 -1
  174. package/dist/components/search-form/SearchFormPagefind.client.d.ts +5 -0
  175. package/dist/components/search-form/index.d.ts +4 -0
  176. package/dist/components/search-form/index.js +1 -1
  177. package/dist/{src/components → components}/search-modal/RadioEmit.client.d.ts +2 -1
  178. package/dist/{src/components → components}/search-modal/SearchModal.client.d.ts +2 -1
  179. package/dist/{src/components/search-modal/SearchModalProps.d.ts → components/search-modal/index.d.ts} +6 -2
  180. package/dist/components/search-modal/index.js +1 -1
  181. package/dist/components/search-result/index.d.ts +7 -0
  182. package/dist/components/search-result/index.js +1 -1
  183. package/dist/components/search-result/search-result.css +4 -0
  184. package/dist/components/search-result-match/index.d.ts +7 -0
  185. package/dist/components/search-result-match/index.js +1 -1
  186. package/dist/components/section/index.d.ts +9 -0
  187. package/dist/components/section/index.js +1 -1
  188. package/dist/components/section/js/Section.client.d.ts +2 -0
  189. package/dist/components/section/js/spotlight.client.d.ts +2 -0
  190. package/dist/components/slider/index.d.ts +8 -0
  191. package/dist/components/slider/index.js +1 -1
  192. package/dist/components/split-even/index.d.ts +12 -0
  193. package/dist/components/split-even/index.js +1 -1
  194. package/dist/components/split-weighted/index.d.ts +12 -0
  195. package/dist/components/split-weighted/index.js +1 -1
  196. package/dist/components/stat/index.d.ts +8 -0
  197. package/dist/components/stat/index.js +1 -1
  198. package/dist/components/stats/index.d.ts +8 -0
  199. package/dist/components/stats/index.js +1 -1
  200. package/dist/components/stats/stats.css +2 -0
  201. package/dist/components/teaser-card/index.d.ts +9 -0
  202. package/dist/components/teaser-card/index.js +1 -1
  203. package/dist/components/teaser-card/teaser-card.css +4 -1
  204. package/dist/components/testimonial/index.d.ts +64 -0
  205. package/dist/components/testimonial/index.js +1 -1
  206. package/dist/components/testimonials/index.d.ts +13 -0
  207. package/dist/components/testimonials/index.js +1 -1
  208. package/dist/components/testimonials/testimonials.css +3 -1
  209. package/dist/components/text/index.d.ts +8 -0
  210. package/dist/components/text/index.js +1 -1
  211. package/dist/components/video-curtain/index.d.ts +8 -0
  212. package/dist/components/video-curtain/index.js +1 -1
  213. package/dist/global.client.d.ts +2 -0
  214. package/dist/global.client.js +1 -1
  215. package/dist/global.css +4262 -224
  216. package/dist/helpers-12f48df8.d.ts +6 -0
  217. package/dist/playground/color-demo/index.d.ts +3 -0
  218. package/dist/playground/color-demo/index.js +237 -0
  219. package/dist/playground/font-demo/index.d.ts +4 -0
  220. package/dist/playground/font-demo/index.js +171 -0
  221. package/dist/playground/spacing-demo/index.d.ts +3 -0
  222. package/dist/playground/spacing-demo/index.js +114 -0
  223. package/dist/static/img/bg-color-swatch.png +0 -0
  224. package/dist/tokens/IconSprite.js +4 -3
  225. package/dist/tokens/branding-token-burgundy.css +113 -0
  226. package/dist/tokens/branding-token-coffee.css +114 -0
  227. package/dist/tokens/branding-token-mint.css +114 -0
  228. package/dist/tokens/branding-token-neon.css +113 -0
  229. package/dist/tokens/branding-token-water.css +114 -0
  230. package/dist/tokens/branding-token.css +113 -0
  231. package/dist/tokens/themes.css +20 -20
  232. package/dist/tokens/themes.css.d.ts +0 -0
  233. package/dist/tokens/tokens.css +1 -1
  234. package/dist/tokens/tokens.js +1 -1
  235. package/package.json +27 -24
  236. package/dist/.storybook/main.d.ts +0 -3
  237. package/dist/.storybook/manager.d.ts +0 -1
  238. package/dist/.storybook/preview.d.ts +0 -5
  239. package/dist/.storybook/test-runner.d.ts +0 -3
  240. package/dist/.storybook/themeSwitch.d.ts +0 -4
  241. package/dist/.storybook/themes.d.ts +0 -1
  242. package/dist/components/page-wrapper/tokens.css +0 -2479
  243. package/dist/src/bedrock/BedrockProvider.d.ts +0 -9
  244. package/dist/src/components/blog-aside/BlogAside.stories.d.ts +0 -6
  245. package/dist/src/components/blog-aside/BlogAsideComponent.d.ts +0 -7
  246. package/dist/src/components/blog-aside/BlogAsideDefaults.d.ts +0 -4
  247. package/dist/src/components/blog-author/BlogAuthor.stories.d.ts +0 -6
  248. package/dist/src/components/blog-author/BlogAuthorComponent.d.ts +0 -6
  249. package/dist/src/components/blog-author/BlogAuthorDefaults.d.ts +0 -4
  250. package/dist/src/components/blog-head/BlogHead.stories.d.ts +0 -6
  251. package/dist/src/components/blog-head/BlogHeadComponent.d.ts +0 -7
  252. package/dist/src/components/blog-head/BlogHeadDefaults.d.ts +0 -4
  253. package/dist/src/components/blog-tag/BlogTagDefaults.d.ts +0 -4
  254. package/dist/src/components/blog-teaser/BlogTeaser.stories.d.ts +0 -6
  255. package/dist/src/components/blog-teaser/BlogTeaserComponent.d.ts +0 -7
  256. package/dist/src/components/blog-teaser/BlogTeaserDefaults.d.ts +0 -4
  257. package/dist/src/components/breadcrumb/Breadcrumb.stories.d.ts +0 -6
  258. package/dist/src/components/breadcrumb/BreadcrumbComponent.d.ts +0 -7
  259. package/dist/src/components/breadcrumb/BreadcrumbDefaults.d.ts +0 -4
  260. package/dist/src/components/breadcrumb/BreadcrumbProps.d.ts +0 -20
  261. package/dist/src/components/business-card/BusinessCard.stories.d.ts +0 -8
  262. package/dist/src/components/business-card/BusinessCardComponent.d.ts +0 -7
  263. package/dist/src/components/business-card/BusinessCardDefaults.d.ts +0 -4
  264. package/dist/src/components/button/Button.stories.d.ts +0 -9
  265. package/dist/src/components/button/ButtonComponent.d.ts +0 -6
  266. package/dist/src/components/button/ButtonDefaults.d.ts +0 -4
  267. package/dist/src/components/button-group/ButtonGroupComponent.d.ts +0 -6
  268. package/dist/src/components/button-group/ButtonGroupDefaults.d.ts +0 -4
  269. package/dist/src/components/button-group/ButtonGroupProps.d.ts +0 -33
  270. package/dist/src/components/cms/BlogOverviewDefaults.d.ts +0 -4
  271. package/dist/src/components/cms/BlogPostDefaults.d.ts +0 -4
  272. package/dist/src/components/cms/EventDetailDefaults.d.ts +0 -4
  273. package/dist/src/components/cms/EventListDefaults.d.ts +0 -4
  274. package/dist/src/components/cms/EventListProps.d.ts +0 -14
  275. package/dist/src/components/cms/PageDefaults.d.ts +0 -4
  276. package/dist/src/components/cms/SearchDefaults.d.ts +0 -4
  277. package/dist/src/components/cms/SettingsDefaults.d.ts +0 -4
  278. package/dist/src/components/cms/blog-overview/BlogOverview.stories.d.ts +0 -6
  279. package/dist/src/components/cms/blog-overview/BlogOverviewComponent.d.ts +0 -4
  280. package/dist/src/components/cms/blog-post/BlogPost.stories.d.ts +0 -6
  281. package/dist/src/components/cms/blog-post/BlogPostComponent.d.ts +0 -4
  282. package/dist/src/components/cms/event-detail/EventDetail.stories.d.ts +0 -6
  283. package/dist/src/components/cms/event-detail/EventDetailComponent.d.ts +0 -4
  284. package/dist/src/components/cms/event-list/EventList.stories.d.ts +0 -6
  285. package/dist/src/components/cms/event-list/EventListComponent.d.ts +0 -4
  286. package/dist/src/components/cms/index.d.ts +0 -5
  287. package/dist/src/components/cms/page/PageComponent.d.ts +0 -4
  288. package/dist/src/components/cms/search/Search.stories.d.ts +0 -6
  289. package/dist/src/components/cms/search/SearchComponent.d.ts +0 -4
  290. package/dist/src/components/contact/Contact.stories.d.ts +0 -9
  291. package/dist/src/components/contact/ContactComponent.d.ts +0 -8
  292. package/dist/src/components/contact/ContactDefaults.d.ts +0 -4
  293. package/dist/src/components/content-nav/ContentNav.stories.d.ts +0 -6
  294. package/dist/src/components/content-nav/ContentNavComponent.d.ts +0 -7
  295. package/dist/src/components/content-nav/ContentNavDefaults.d.ts +0 -4
  296. package/dist/src/components/cookie-consent/C15t.client.d.ts +0 -4
  297. package/dist/src/components/cookie-consent/CookieConsent.stories.d.ts +0 -8
  298. package/dist/src/components/cookie-consent/CookieConsentComponent.d.ts +0 -8
  299. package/dist/src/components/cookie-consent/CookieConsentDefaults.d.ts +0 -4
  300. package/dist/src/components/cta/Cta.stories.d.ts +0 -14
  301. package/dist/src/components/cta/CtaComponent.d.ts +0 -7
  302. package/dist/src/components/cta/CtaDefaults.d.ts +0 -4
  303. package/dist/src/components/divider/Divider.stories.d.ts +0 -7
  304. package/dist/src/components/divider/DividerComponent.d.ts +0 -8
  305. package/dist/src/components/divider/DividerDefaults.d.ts +0 -4
  306. package/dist/src/components/downloads/Downloads.stories.d.ts +0 -9
  307. package/dist/src/components/downloads/DownloadsComponent.d.ts +0 -7
  308. package/dist/src/components/downloads/DownloadsDefaults.d.ts +0 -4
  309. package/dist/src/components/event-appointment/EventAppointmentComponent.d.ts +0 -7
  310. package/dist/src/components/event-appointment/EventAppointmentDefaults.d.ts +0 -4
  311. package/dist/src/components/event-filter/EventFilter.stories.d.ts +0 -6
  312. package/dist/src/components/event-filter/EventFilterComponent.d.ts +0 -7
  313. package/dist/src/components/event-filter/EventFilterDefaults.d.ts +0 -4
  314. package/dist/src/components/event-header/EventHeader.stories.d.ts +0 -6
  315. package/dist/src/components/event-header/EventHeaderComponent.d.ts +0 -7
  316. package/dist/src/components/event-header/EventHeaderDefaults.d.ts +0 -4
  317. package/dist/src/components/event-header/EventHeaderProps.d.ts +0 -28
  318. package/dist/src/components/event-latest/EventLatest.stories.d.ts +0 -6
  319. package/dist/src/components/event-latest/EventLatestComponent.d.ts +0 -7
  320. package/dist/src/components/event-latest/EventLatestDefaults.d.ts +0 -4
  321. package/dist/src/components/event-latest/EventLatestProps.d.ts +0 -19
  322. package/dist/src/components/event-latest-teaser/EventLatestTeaser.stories.d.ts +0 -6
  323. package/dist/src/components/event-latest-teaser/EventLatestTeaserComponent.d.ts +0 -7
  324. package/dist/src/components/event-latest-teaser/EventLatestTeaserDefaults.d.ts +0 -4
  325. package/dist/src/components/event-list-teaser/EventListTeaser.stories.d.ts +0 -6
  326. package/dist/src/components/event-list-teaser/EventListTeaserComponent.d.ts +0 -7
  327. package/dist/src/components/event-list-teaser/EventListTeaserDefaults.d.ts +0 -4
  328. package/dist/src/components/event-location/EventLocation.stories.d.ts +0 -6
  329. package/dist/src/components/event-location/EventLocationComponent.d.ts +0 -7
  330. package/dist/src/components/event-location/EventLocationDefaults.d.ts +0 -4
  331. package/dist/src/components/event-login/EventLogin.stories.d.ts +0 -6
  332. package/dist/src/components/event-login/EventLoginComponent.d.ts +0 -7
  333. package/dist/src/components/event-login/EventLoginDefaults.d.ts +0 -4
  334. package/dist/src/components/event-registration/EventRegistration.stories.d.ts +0 -6
  335. package/dist/src/components/event-registration/EventRegistrationComponent.d.ts +0 -7
  336. package/dist/src/components/event-registration/EventRegistrationDefaults.d.ts +0 -4
  337. package/dist/src/components/faq/Faq.stories.d.ts +0 -7
  338. package/dist/src/components/faq/FaqComponent.d.ts +0 -24
  339. package/dist/src/components/faq/FaqDefaults.d.ts +0 -4
  340. package/dist/src/components/feature/FeatureComponent.d.ts +0 -6
  341. package/dist/src/components/feature/FeatureDefaults.d.ts +0 -4
  342. package/dist/src/components/feature/FeatureProps.d.ts +0 -56
  343. package/dist/src/components/features/Features.stories.d.ts +0 -10
  344. package/dist/src/components/features/FeaturesComponent.d.ts +0 -7
  345. package/dist/src/components/features/FeaturesDefaults.d.ts +0 -4
  346. package/dist/src/components/footer/Footer.stories.d.ts +0 -17
  347. package/dist/src/components/footer/FooterComponent.d.ts +0 -7
  348. package/dist/src/components/footer/FooterDefaults.d.ts +0 -4
  349. package/dist/src/components/form/checkbox/Checkbox.stories.d.ts +0 -6
  350. package/dist/src/components/form/radio/Radio.stories.d.ts +0 -6
  351. package/dist/src/components/form/select-field/SelectField.stories.d.ts +0 -6
  352. package/dist/src/components/form/text-area/TextArea.stories.d.ts +0 -6
  353. package/dist/src/components/form/text-field/TextField.stories.d.ts +0 -6
  354. package/dist/src/components/gallery/Gallery.stories.d.ts +0 -9
  355. package/dist/src/components/gallery/GalleryComponent.d.ts +0 -7
  356. package/dist/src/components/gallery/GalleryDefaults.d.ts +0 -4
  357. package/dist/src/components/header/Header.stories.d.ts +0 -16
  358. package/dist/src/components/header/HeaderComponent.d.ts +0 -7
  359. package/dist/src/components/header/HeaderDefaults.d.ts +0 -4
  360. package/dist/src/components/headline/Headline.stories.d.ts +0 -12
  361. package/dist/src/components/headline/HeadlineComponent.d.ts +0 -11
  362. package/dist/src/components/headline/HeadlineDefaults.d.ts +0 -4
  363. package/dist/src/components/helpers.d.ts +0 -5
  364. package/dist/src/components/hero/Hero.stories.d.ts +0 -8
  365. package/dist/src/components/hero/HeroComponent.d.ts +0 -7
  366. package/dist/src/components/hero/HeroDefaults.d.ts +0 -4
  367. package/dist/src/components/html/Html.stories.d.ts +0 -8
  368. package/dist/src/components/html/HtmlComponent.d.ts +0 -8
  369. package/dist/src/components/html/HtmlDefaults.d.ts +0 -4
  370. package/dist/src/components/image-story/ImageStory.stories.d.ts +0 -6
  371. package/dist/src/components/image-story/ImageStoryComponent.d.ts +0 -7
  372. package/dist/src/components/image-story/ImageStoryDefaults.d.ts +0 -4
  373. package/dist/src/components/image-text/ImageText.stories.d.ts +0 -7
  374. package/dist/src/components/image-text/ImageTextComponent.d.ts +0 -8
  375. package/dist/src/components/image-text/ImageTextDefaults.d.ts +0 -4
  376. package/dist/src/components/logo/LogoComponent.d.ts +0 -7
  377. package/dist/src/components/logo/LogoDefaults.d.ts +0 -4
  378. package/dist/src/components/logos/Logos.stories.d.ts +0 -9
  379. package/dist/src/components/logos/LogosComponent.d.ts +0 -7
  380. package/dist/src/components/logos/LogosDefaults.d.ts +0 -4
  381. package/dist/src/components/mosaic/Mosaic.stories.d.ts +0 -7
  382. package/dist/src/components/mosaic/MosaicComponent.d.ts +0 -7
  383. package/dist/src/components/mosaic/MosaicDefaults.d.ts +0 -4
  384. package/dist/src/components/nav-dropdown/NavDropdownComponent.d.ts +0 -5
  385. package/dist/src/components/nav-dropdown/NavDropdownDefaults.d.ts +0 -4
  386. package/dist/src/components/nav-flyout/NavFlyoutComponent.d.ts +0 -7
  387. package/dist/src/components/nav-flyout/NavFlyoutDefaults.d.ts +0 -4
  388. package/dist/src/components/nav-flyout/NavFlyoutProps.d.ts +0 -27
  389. package/dist/src/components/nav-main/NavMainComponent.d.ts +0 -9
  390. package/dist/src/components/nav-main/NavMainDefaults.d.ts +0 -4
  391. package/dist/src/components/nav-main/NavToggleComponent.d.ts +0 -5
  392. package/dist/src/components/nav-main/js/navMainEvents.client.d.ts +0 -4
  393. package/dist/src/components/nav-topbar/NavTopbarComponent.d.ts +0 -7
  394. package/dist/src/components/nav-topbar/NavTopbarDefaults.d.ts +0 -4
  395. package/dist/src/components/nav-topbar/NavTopbarProps.d.ts +0 -22
  396. package/dist/src/components/page-wrapper/PageWrapperComponent.d.ts +0 -4
  397. package/dist/src/components/pagination/Pagination.stories.d.ts +0 -6
  398. package/dist/src/components/pagination/PaginationComponent.d.ts +0 -14
  399. package/dist/src/components/pagination/PaginationDefaults.d.ts +0 -4
  400. package/dist/src/components/search-bar/SearchBar.stories.d.ts +0 -6
  401. package/dist/src/components/search-bar/SearchBarComponent.d.ts +0 -7
  402. package/dist/src/components/search-bar/SearchBarDefaults.d.ts +0 -4
  403. package/dist/src/components/search-filter/SearchFilter.stories.d.ts +0 -6
  404. package/dist/src/components/search-filter/SearchFilterComponent.d.ts +0 -7
  405. package/dist/src/components/search-filter/SearchFilterDefaults.d.ts +0 -4
  406. package/dist/src/components/search-form/SearchForm.stories.d.ts +0 -7
  407. package/dist/src/components/search-form/SearchFormComponent.d.ts +0 -5
  408. package/dist/src/components/search-form/SearchFormDefaults.d.ts +0 -4
  409. package/dist/src/components/search-form/SearchFormPagefind.client.d.ts +0 -4
  410. package/dist/src/components/search-modal/SearchModal.stories.d.ts +0 -8
  411. package/dist/src/components/search-modal/SearchModalComponent.d.ts +0 -5
  412. package/dist/src/components/search-modal/SearchModalDefaults.d.ts +0 -4
  413. package/dist/src/components/search-result/SearchResult.stories.d.ts +0 -6
  414. package/dist/src/components/search-result/SearchResultComponent.d.ts +0 -7
  415. package/dist/src/components/search-result/SearchResultDefaults.d.ts +0 -4
  416. package/dist/src/components/search-result-match/SearchResultMatchComponent.d.ts +0 -7
  417. package/dist/src/components/search-result-match/SearchResultMatchDefaults.d.ts +0 -4
  418. package/dist/src/components/section/Section.stories.d.ts +0 -15
  419. package/dist/src/components/section/SectionComponent.d.ts +0 -8
  420. package/dist/src/components/section/SectionDefaults.d.ts +0 -4
  421. package/dist/src/components/section/SectionProps.d.ts +0 -161
  422. package/dist/src/components/section/js/Section.client.d.ts +0 -1
  423. package/dist/src/components/section/js/spotlight.client.d.ts +0 -1
  424. package/dist/src/components/seo/SeoDefaults.d.ts +0 -4
  425. package/dist/src/components/slider/Slider.stories.d.ts +0 -9
  426. package/dist/src/components/slider/SliderComponent.d.ts +0 -7
  427. package/dist/src/components/slider/SliderDefaults.d.ts +0 -4
  428. package/dist/src/components/slider/SliderProps.d.ts +0 -56
  429. package/dist/src/components/split-even/SplitEven.stories.d.ts +0 -7
  430. package/dist/src/components/split-even/SplitEvenComponent.d.ts +0 -11
  431. package/dist/src/components/split-even/SplitEvenDefaults.d.ts +0 -4
  432. package/dist/src/components/split-even/SplitEvenProps.d.ts +0 -71
  433. package/dist/src/components/split-weighted/SplitWeighted.stories.d.ts +0 -7
  434. package/dist/src/components/split-weighted/SplitWeightedComponent.d.ts +0 -11
  435. package/dist/src/components/split-weighted/SplitWeightedDefaults.d.ts +0 -4
  436. package/dist/src/components/split-weighted/SplitWeightedProps.d.ts +0 -101
  437. package/dist/src/components/stat/StatComponent.d.ts +0 -6
  438. package/dist/src/components/stat/StatDefaults.d.ts +0 -4
  439. package/dist/src/components/stats/Stats.stories.d.ts +0 -7
  440. package/dist/src/components/stats/StatsComponent.d.ts +0 -7
  441. package/dist/src/components/stats/StatsDefaults.d.ts +0 -4
  442. package/dist/src/components/teaser-card/TeaserCard.stories.d.ts +0 -8
  443. package/dist/src/components/teaser-card/TeaserCardComponent.d.ts +0 -8
  444. package/dist/src/components/teaser-card/TeaserCardDefaults.d.ts +0 -4
  445. package/dist/src/components/testimonial/TestimonialComponent.d.ts +0 -15
  446. package/dist/src/components/testimonial/TestimonialDefaults.d.ts +0 -4
  447. package/dist/src/components/testimonial/TestimonialProps.d.ts +0 -47
  448. package/dist/src/components/testimonials/Testimonials.stories.d.ts +0 -11
  449. package/dist/src/components/testimonials/TestimonialsComponent.d.ts +0 -12
  450. package/dist/src/components/testimonials/TestimonialsDefaults.d.ts +0 -4
  451. package/dist/src/components/text/Text.stories.d.ts +0 -9
  452. package/dist/src/components/text/TextComponent.d.ts +0 -7
  453. package/dist/src/components/text/TextDefaults.d.ts +0 -4
  454. package/dist/src/components/tile/TileDefaults.d.ts +0 -4
  455. package/dist/src/components/tile/TileProps.d.ts +0 -71
  456. package/dist/src/components/video-curtain/VideoCurtain.stories.d.ts +0 -8
  457. package/dist/src/components/video-curtain/VideoCurtainComponent.d.ts +0 -7
  458. package/dist/src/components/video-curtain/VideoCurtainDefaults.d.ts +0 -4
  459. package/dist/src/docs/ArchiveLink.d.ts +0 -2
  460. package/dist/src/docs/LinkProvider.d.ts +0 -1
  461. package/dist/src/global.client.d.ts +0 -4
  462. package/dist/src/pages/About.stories.d.ts +0 -9
  463. package/dist/src/pages/Jobs.stories.d.ts +0 -9
  464. package/dist/src/pages/JobsDetail.stories.d.ts +0 -9
  465. package/dist/src/pages/Landingpage.stories.d.ts +0 -9
  466. package/dist/src/pages/Overview.stories.d.ts +0 -9
  467. package/dist/src/pages/Showcase.stories.d.ts +0 -9
  468. package/dist/src/playroom/Frame.d.ts +0 -6
  469. package/dist/src/themes/index.d.ts +0 -53
  470. package/dist/src/themes/useTheme.d.ts +0 -2
  471. package/dist/src/token/IconSprite.d.ts +0 -2
  472. package/dist/src/token/tokens.d.ts +0 -951
  473. /package/dist/{global-DEsyKoU8.js → global-35f78d6d.js} +0 -0
  474. /package/dist/{helpers-DoO8Vy8R.js → helpers-12f48df8.js} +0 -0
package/dist/global.css CHANGED
@@ -292,8 +292,8 @@ h3 {
292
292
  }
293
293
  }
294
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);
295
+ --dsa-text-color-on-primary-base: var(--ks-brand-color-on-primary);
296
+ --dsa-text-color-on-primary-inverted-base: var(--ks-brand-color-on-primary-inverted);
297
297
  --dsa-overlay--background-color: var(--ks-color-fg-alpha-4);
298
298
  --dsa-overlay-box_transparent--background-color: var(--ks-color-bg-alpha-4);
299
299
  --dsa-overlay-box_transparent--backdrop-filter: blur(16px);
@@ -308,7 +308,7 @@ h3 {
308
308
  --dsa-topic--font-weight: var(--ks-font-weight-semi-bold);
309
309
  --dsa-topic--color: var(--ks-text-color-display);
310
310
  --dsa-topic--font-family: var(--ks-font-family-display);
311
- --dsa-link--font-weight: var(--ks-font-weight-regular);
311
+ --dsa-link--font-weight: var(--ks-font-weight-medium);
312
312
  --dsa-link--color: var(--ks-text-color-default-interactive);
313
313
  --dsa-link--color_hover: var(--ks-text-color-default-interactive-hover);
314
314
  --dsa-link--text-decoration: none;
@@ -316,6 +316,13 @@ h3 {
316
316
  --dsa-typo--highlight: var(--ks-color-primary);
317
317
  --dsa-content--horizontal-spacing: var(--ks-spacing-inset-l);
318
318
  --dsa-content--vertical-spacing: var(--ks-spacing-xxl);
319
+ }
320
+ @media (min-width: 48em) {
321
+ :root, [ks-inverted], [ks-theme] {
322
+ --dsa-content--horizontal-spacing: var(--ks-spacing-inset-xl);
323
+ }
324
+ }
325
+ :root, [ks-inverted], [ks-theme] {
319
326
  --dsa-content--width_narrow: calc(var(--ks-font-size-copy-m) * 34);
320
327
  --dsa-content--width_default: calc(var(--ks-font-size-copy-m) * 50);
321
328
  --dsa-content--width_wide: calc(var(--ks-font-size-copy-m) * 72);
@@ -327,86 +334,3103 @@ h3 {
327
334
  --dsa-tile--width_large: calc(var(--ks-font-size-copy-m) * 28);
328
335
  --dsa-tile--width_largest: calc(var(--ks-font-size-copy-m) * 42);
329
336
  --dsa-logo--height: 2rem;
330
- --dsa-header--height: calc(var(--dsa-logo--height) + var(--ks-spacing-stack-m) + var(--ks-spacing-stack-m));
331
337
  }
332
338
  @media (min-width: 48em) {
333
339
  :root, [ks-inverted], [ks-theme] {
334
- --dsa-content--horizontal-spacing: var(--ks-spacing-inset-xl);
340
+ --dsa-logo--height: 2.25rem;
335
341
  }
336
342
  }
337
- @media (min-width: 48em) {
343
+ @media (min-width: 62em) {
338
344
  :root, [ks-inverted], [ks-theme] {
339
- --dsa-logo--height: 2.25rem;
345
+ --dsa-logo--height: 2.5rem;
346
+ }
347
+ }
348
+ :root, [ks-inverted], [ks-theme] {
349
+ --dsa-header--height: calc(var(--dsa-logo--height) + var(--ks-spacing-stack-m) + var(--ks-spacing-stack-m));
350
+ }
351
+
352
+ /* inter-regular - latin */
353
+ @font-face {
354
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
355
+ font-family: "Montserrat";
356
+ font-style: normal;
357
+ font-weight: 400;
358
+ src: url("static/fonts/systemics/Montserrat-Regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
359
+ }
360
+ /* inter-500 - latin */
361
+ @font-face {
362
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
363
+ font-family: "Montserrat";
364
+ font-style: normal;
365
+ font-weight: 500;
366
+ src: url("static/fonts/systemics/Montserrat-Medium.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
367
+ }
368
+ /* inter-600 - latin */
369
+ @font-face {
370
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
371
+ font-family: "Montserrat";
372
+ font-style: normal;
373
+ font-weight: 600;
374
+ src: url("static/fonts/systemics/Montserrat-SemiBold.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
375
+ }
376
+ /* inter-700 - latin */
377
+ @font-face {
378
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
379
+ font-family: "Montserrat";
380
+ font-style: normal;
381
+ font-weight: 700;
382
+ src: url("static/fonts/systemics/Montserrat-Bold.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
383
+ }
384
+ .color-frame {
385
+ width: 100px;
386
+ height: 100px;
387
+ border: 1px solid rgba(0, 0, 0, 0.1);
388
+ display: flex;
389
+ align-items: center;
390
+ justify-content: center;
391
+ flex-direction: column;
392
+ }
393
+
394
+ .color-swatches {
395
+ display: flex;
396
+ gap: var(--ks-spacing-stack-m);
397
+ }
398
+ .color-swatches[ks-inverted=true] {
399
+ background-color: rgb(33, 31, 36);
400
+ padding: 1em;
401
+ }
402
+ .color-swatches > div {
403
+ border-style: solid;
404
+ width: 100px;
405
+ height: 50px;
406
+ display: flex;
407
+ gap: var(--ks-spacing-s);
408
+ }
409
+
410
+ .color-frame {
411
+ width: 100px;
412
+ height: 100px;
413
+ border: 1px solid rgba(0, 0, 0, 0.1);
414
+ display: flex;
415
+ align-items: center;
416
+ justify-content: center;
417
+ flex-direction: column;
418
+ }
419
+ .color-test {
420
+ background-color: var(--ks-color-test);
421
+ }
422
+
423
+ .color-swatches {
424
+ display: flex;
425
+ gap: var(--ks-spacing-stack-m);
426
+ }
427
+ .color-swatches[ks-inverted=true] {
428
+ background-color: rgb(33, 31, 36);
429
+ padding: 1em;
430
+ }
431
+ .color-swatches > div {
432
+ width: 100px;
433
+ height: 50px;
434
+ display: flex;
435
+ gap: var(--ks-spacing-s);
436
+ }
437
+
438
+ .color-frame {
439
+ width: 100px;
440
+ height: 100px;
441
+ border: 1px solid rgba(0, 0, 0, 0.1);
442
+ display: flex;
443
+ align-items: center;
444
+ justify-content: center;
445
+ flex-direction: column;
446
+ }
447
+ .color-test {
448
+ background-color: var(--ks-color-test);
449
+ }
450
+
451
+ .color-swatches {
452
+ display: flex;
453
+ gap: var(--ks-spacing-stack-m);
454
+ }
455
+ .color-swatches[ks-inverted=true] {
456
+ background-color: rgb(33, 31, 36);
457
+ padding: 1em;
458
+ }
459
+ .color-swatches > div {
460
+ width: 100px;
461
+ height: 50px;
462
+ display: flex;
463
+ gap: var(--ks-spacing-s);
464
+ }
465
+
466
+ .font-sizes {
467
+ display: flex;
468
+ flex-direction: column;
469
+ gap: var(--ks-spacing-stack-m);
470
+ }
471
+ .font-sizes-display {
472
+ font-family: var(--ks-font-family-display, sans-serif);
473
+ }
474
+ .font-sizes-interface {
475
+ font-family: var(--ks-font-family-interface, sans-serif);
476
+ }
477
+ .font-sizes-copy {
478
+ font-family: var(--ks-font-family-copy, sans-serif);
479
+ }
480
+ .font-sizes-mono {
481
+ font-family: var(--ks-font-family-mono, monospace);
482
+ }
483
+
484
+ .font-size-display-xxs {
485
+ font: var(--ks-font-display-xxs);
486
+ }
487
+ .font-size-display-xs {
488
+ font: var(--ks-font-display-xs);
489
+ }
490
+ .font-size-display-s {
491
+ font: var(--ks-font-display-s);
492
+ }
493
+ .font-size-display-m {
494
+ font: var(--ks-font-display-m);
495
+ }
496
+ .font-size-display-l {
497
+ font: var(--ks-font-display-l);
498
+ }
499
+ .font-size-display-xl {
500
+ font: var(--ks-font-display-xl);
501
+ }
502
+ .font-size-display-xxl {
503
+ font: var(--ks-font-display-xxl);
504
+ }
505
+ .font-size-copy-xxs {
506
+ font-size: var(--ks-font-size-copy-xxs);
507
+ }
508
+ .font-size-copy-xs {
509
+ font-size: var(--ks-font-size-copy-xs);
510
+ }
511
+ .font-size-copy-s {
512
+ font-size: var(--ks-font-size-copy-s);
513
+ }
514
+ .font-size-copy-m {
515
+ font-size: var(--ks-font-size-copy-m);
516
+ }
517
+ .font-size-copy-l {
518
+ font-size: var(--ks-font-size-copy-l);
519
+ }
520
+ .font-size-copy-xl {
521
+ font-size: var(--ks-font-size-copy-xl);
522
+ }
523
+ .font-size-copy-xxl {
524
+ font-size: var(--ks-font-size-copy-xxl);
525
+ }
526
+ .font-size-interface-xxs {
527
+ font-size: var(--ks-font-size-interface-xxs);
528
+ }
529
+ .font-size-interface-xs {
530
+ font-size: var(--ks-font-size-interface-xs);
531
+ }
532
+ .font-size-interface-s {
533
+ font-size: var(--ks-font-size-interface-s);
534
+ }
535
+ .font-size-interface-m {
536
+ font-size: var(--ks-font-size-interface-m);
537
+ }
538
+ .font-size-interface-l {
539
+ font-size: var(--ks-font-size-interface-l);
540
+ }
541
+ .font-size-interface-xl {
542
+ font-size: var(--ks-font-size-interface-xl);
543
+ }
544
+ .font-size-interface-xxl {
545
+ font-size: var(--ks-font-size-interface-xxl);
546
+ }
547
+ .font-size-mono-xxs {
548
+ font-size: var(--ks-font-size-mono-xxs);
549
+ }
550
+ .font-size-mono-xs {
551
+ font-size: var(--ks-font-size-mono-xs);
552
+ }
553
+ .font-size-mono-s {
554
+ font-size: var(--ks-font-size-mono-s);
555
+ }
556
+ .font-size-mono-m {
557
+ font-size: var(--ks-font-size-mono-m);
558
+ }
559
+ .font-size-mono-l {
560
+ font-size: var(--ks-font-size-mono-l);
561
+ }
562
+ .font-size-mono-xl {
563
+ font-size: var(--ks-font-size-mono-xl);
564
+ }
565
+ .font-size-mono-xxl {
566
+ font-size: var(--ks-font-size-mono-xxl);
567
+ }
568
+ .font-size-base-xxs {
569
+ font-size: var(--ks-font-size-xxs);
570
+ }
571
+ .font-size-base-xs {
572
+ font-size: var(--ks-font-size-xs);
573
+ }
574
+ .font-size-base-s {
575
+ font-size: var(--ks-font-size-s);
576
+ }
577
+ .font-size-base-m {
578
+ font-size: var(--ks-font-size-m);
579
+ }
580
+ .font-size-base-l {
581
+ font-size: var(--ks-font-size-l);
582
+ }
583
+ .font-size-base-xl {
584
+ font-size: var(--ks-font-size-xl);
585
+ }
586
+ .font-size-base-xxl {
587
+ font-size: var(--ks-font-size-xxl);
588
+ }
589
+
590
+ .spacings {
591
+ display: flex;
592
+ flex-direction: column;
593
+ gap: 6px;
594
+ }
595
+
596
+ .spacing {
597
+ height: 26px;
598
+ background-color: rgb(0, 0, 0);
599
+ position: relative;
600
+ }
601
+
602
+ .spacing-xxs {
603
+ width: var(--ks-spacing-xxs);
604
+ }
605
+
606
+ .spacing-xs {
607
+ width: var(--ks-spacing-xs);
608
+ }
609
+
610
+ .spacing-s {
611
+ width: var(--ks-spacing-s);
612
+ }
613
+
614
+ .spacing-m {
615
+ width: var(--ks-spacing-m);
616
+ }
617
+
618
+ .spacing-l {
619
+ width: var(--ks-spacing-l);
620
+ }
621
+
622
+ .spacing-xl {
623
+ width: var(--ks-spacing-xl);
624
+ }
625
+
626
+ .spacing-xxl {
627
+ width: var(--ks-spacing-xxl);
628
+ }
629
+
630
+ .shadows-row {
631
+ gap: 20px;
632
+ margin-bottom: 60px;
633
+ }
634
+ .shadows-card .shadow {
635
+ height: 400px;
636
+ width: 300px;
637
+ box-shadow: var(--ks-box-shadow-card);
638
+ background-color: var(--ks-background-color-default);
639
+ }
640
+ .shadows-card .shadow:hover {
641
+ box-shadow: var(--ks-box-shadow-card-hover);
642
+ }
643
+ .shadows-surface .shadow {
644
+ height: 400px;
645
+ width: 100%;
646
+ }
647
+
648
+ .shadow {
649
+ transition: var(--ks-transition-hover);
650
+ border-radius: 6px;
651
+ display: inline-block;
652
+ }
653
+
654
+ .border-preview {
655
+ width: 100px;
656
+ height: 100px;
657
+ }
658
+
659
+ .border-preview-radius {
660
+ border: 1px solid black;
661
+ }
662
+
663
+ .transition-preview {
664
+ width: 50px;
665
+ height: 50px;
666
+ background-color: black;
667
+ }
668
+ .transition-preview:hover {
669
+ transform: scale(1.1);
670
+ }
671
+
672
+ .preview-page {
673
+ max-width: 900px;
674
+ margin: auto;
675
+ padding-top: 15vh;
676
+ padding-bottom: 15vh;
677
+ padding-left: 4vw;
678
+ padding-right: 4vw;
679
+ }
680
+
681
+ :root {
682
+ /* Colors */
683
+ --ks-brand-color-primary: #3065c0;
684
+ --ks-brand-color-primary-inverted: #4e83e0;
685
+ --ks-brand-color-on-primary: var(--ks-color-fg-inverted);
686
+ --ks-brand-color-on-primary-inverted: var(--ks-color-fg);
687
+ --ks-brand-color-bg: #fff;
688
+ --ks-brand-color-bg-inverted: #0f203e;
689
+ --ks-brand-color-fg: #06081f;
690
+ --ks-brand-color-fg-inverted: #fff;
691
+ --ks-brand-color-link: #3065c0;
692
+ --ks-brand-color-link-inverted: #98b2e0;
693
+ --ks-brand-color-positive: #23831b;
694
+ --ks-brand-color-positive-inverted: #6edb64;
695
+ --ks-brand-color-negative: #ff1a57;
696
+ --ks-brand-color-negative-inverted: #d21d48;
697
+ --ks-brand-color-informative: #64c2db;
698
+ --ks-brand-color-informative-inverted: #00718f;
699
+ --ks-brand-color-notice: #64c2db;
700
+ --ks-brand-color-notice-inverted: #00718f;
701
+ --ks-brand-color-scale-9: 5%;
702
+ --ks-brand-color-scale-8: 15%;
703
+ --ks-brand-color-scale-7: 27%;
704
+ --ks-brand-color-scale-6: 39%;
705
+ --ks-brand-color-scale-5: 50%;
706
+ --ks-brand-color-scale-4: 61%;
707
+ --ks-brand-color-scale-3: 73%;
708
+ --ks-brand-color-scale-2: 85%;
709
+ --ks-brand-color-scale-1: 95%;
710
+ }
711
+
712
+ :root {
713
+ /* Font Families */
714
+ --ks-brand-font-family-display: Montserrat, Baskerville,
715
+ "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
716
+ --ks-brand-font-family-copy: system-ui, -apple-system, BlinkMacSystemFont,
717
+ "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue",
718
+ "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell",
719
+ "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic",
720
+ "Liberation Sans", sans-serif;
721
+ --ks-brand-font-family-interface: system-ui, -apple-system, BlinkMacSystemFont,
722
+ "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue",
723
+ "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell",
724
+ "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic",
725
+ "Liberation Sans", sans-serif;
726
+ --ks-brand-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
727
+ Consolas, "Liberation Mono", monospace;
728
+ /* Font Weights */
729
+ --ks-brand-font-weight-light: 300;
730
+ --ks-brand-font-weight-regular: 400;
731
+ --ks-brand-font-weight-medium: 500;
732
+ --ks-brand-font-weight-semi-bold: 600;
733
+ --ks-brand-font-weight-bold: 700;
734
+ }
735
+
736
+ /* Normalized user input tokens (range: 1-2) */
737
+ /*
738
+ Shrink Factor: Determine scaling from m to xxs
739
+ Grow Factor: Determine scaling from m to xxl
740
+ Breakpoint Factor: Higher bp factor means large spacings increase
741
+ more at bigger screen sizes than small spacings
742
+ */
743
+ /* Font Size */
744
+ :root {
745
+ --ks-brand-font-size-display-base: 20px;
746
+ --ks-brand-font-size-display-shrink-factor: 1.5;
747
+ --ks-brand-font-size-display-grow-factor: 1.5;
748
+ --ks-brand-font-size-display-bp-factor: 1.5;
749
+ --ks-brand-font-size-copy-base: 16px;
750
+ --ks-brand-font-size-copy-shrink-factor: 1.5;
751
+ --ks-brand-font-size-copy-grow-factor: 1.5;
752
+ --ks-brand-font-size-copy-bp-factor: 1.5;
753
+ --ks-brand-font-size-interface-base: 16px;
754
+ --ks-brand-font-size-interface-shrink-factor: 1.5;
755
+ --ks-brand-font-size-interface-grow-factor: 1.5;
756
+ --ks-brand-font-size-interface-bp-factor: 1.5;
757
+ --ks-brand-font-size-mono-base: 16px;
758
+ --ks-brand-font-size-mono-shrink-factor: 1.5;
759
+ --ks-brand-font-size-mono-grow-factor: 1.5;
760
+ --ks-brand-font-size-mono-bp-factor: 1.5;
761
+ }
762
+
763
+ /* Spacing */
764
+ :root {
765
+ --ks-brand-spacing-base: 16px;
766
+ --ks-brand-spacing-shrink-factor: 1.5;
767
+ --ks-brand-spacing-grow-factor: 1.5;
768
+ --ks-brand-spacing-bp-factor: 1.5;
769
+ }
770
+
771
+ :root {
772
+ --ks-brand-border-width-default: 1px;
773
+ --ks-brand-border-width-emphasized: 2px;
774
+ --ks-brand-border-radius-control: var(--ks-spacing-xs);
775
+ --ks-brand-border-radius-card: var(--ks-spacing-s);
776
+ --ks-brand-border-radius-surface: var(--ks-spacing-m);
777
+ }
778
+
779
+ :root {
780
+ /* Interpolated scaling tokens using normalized input and max tokens */
781
+ --font-size-display-shrink-factor: calc(
782
+ 1 + (var(--ks-brand-font-size-display-shrink-factor) - 1) * (var(--font-size-display-shrink-factor-max, 0.65) - 1)
783
+ );
784
+ --font-size-display-grow-factor: calc(
785
+ 1 + (var(--ks-brand-font-size-display-grow-factor) - 1) * (var(--font-size-display-grow-factor-max, 1.75) - 1)
786
+ );
787
+ --font-size-display-bp-factor: calc(
788
+ 1 + (var(--ks-brand-font-size-display-bp-factor) - 1) * (var(--font-size-display-bp-factor-max, 1.04) - 1)
789
+ );
790
+ --font-size-copy-shrink-factor: calc(
791
+ 1 + (var(--ks-brand-font-size-copy-shrink-factor) - 1) * (var(--font-size-copy-shrink-factor-max, 0.65) - 1)
792
+ );
793
+ --font-size-copy-grow-factor: calc(
794
+ 1 + (var(--ks-brand-font-size-copy-grow-factor) - 1) * (var(--font-size-copy-grow-factor-max, 1.75) - 1)
795
+ );
796
+ --font-size-copy-bp-factor: calc(
797
+ 1 + (var(--ks-brand-font-size-copy-bp-factor) - 1) * (var(--font-size-copy-bp-factor-max, 1.04) - 1)
798
+ );
799
+ --font-size-interface-shrink-factor: calc(
800
+ 1 + (var(--ks-brand-font-size-interface-shrink-factor) - 1) *
801
+ (var(--font-size-interface-shrink-factor-max, 0.65) - 1)
802
+ );
803
+ --font-size-interface-grow-factor: calc(
804
+ 1 + (var(--ks-brand-font-size-interface-grow-factor) - 1) * (var(--font-size-interface-grow-factor-max, 1.75) - 1)
805
+ );
806
+ --font-size-interface-bp-factor: calc(
807
+ 1 + (var(--ks-brand-font-size-interface-bp-factor) - 1) * (var(--font-size-interface-bp-factor-max, 1.04) - 1)
808
+ );
809
+ --font-size-mono-shrink-factor: calc(
810
+ 1 + (var(--ks-brand-font-size-mono-shrink-factor) - 1) * (var(--font-size-mono-shrink-factor-max, 0.65) - 1)
811
+ );
812
+ --font-size-mono-grow-factor: calc(
813
+ 1 + (var(--ks-brand-font-size-mono-grow-factor) - 1) * (var(--font-size-mono-grow-factor-max, 1.75) - 1)
814
+ );
815
+ --font-size-mono-bp-factor: calc(
816
+ 1 + (var(--ks-brand-font-size-mono-bp-factor) - 1) * (var(--font-size-mono-bp-factor-max, 1.04) - 1)
817
+ );
818
+ --ks-scale-spacing-shrink-factor: calc(
819
+ 1 + (var(--ks-brand-spacing-shrink-factor) - 1) * (var(--ks-scale-spacing-shrink-factor-max, 0.5) - 1)
820
+ );
821
+ --ks-scale-spacing-grow-factor: calc(
822
+ 1 + (var(--ks-brand-spacing-grow-factor) - 1) * (var(--ks-scale-spacing-grow-factor-max, 2) - 1)
823
+ );
824
+ --spacing-bp-factor: calc(
825
+ 1 + (var(--ks-brand-spacing-bp-factor) - 1) * (var(--ks-scale-spacing-bp-factor-max, 1.05) - 1)
826
+ );
827
+ }
828
+
829
+ :root,
830
+ [ks-theme],
831
+ [ks-inverted=false],
832
+ [ks-inverted=true] {
833
+ /* Interpolated scaling tokens using normalized input and max tokens */
834
+ --ks-scale-spacing-shrink-factor: calc(
835
+ 1 + (var(--ks-brand-spacing-shrink-factor) - 1) * (var(--ks-scale-spacing-shrink-factor-max, 0.5) - 1)
836
+ );
837
+ --ks-scale-spacing-grow-factor: calc(
838
+ 1 + (var(--ks-brand-spacing-grow-factor) - 1) * (var(--ks-scale-spacing-grow-factor-max, 2) - 1)
839
+ );
840
+ --spacing-bp-factor: calc(
841
+ 1 + (var(--ks-brand-spacing-bp-factor) - 1) * (var(--ks-scale-spacing-bp-factor-max, 1.05) - 1)
842
+ );
843
+ }
844
+
845
+ /* Set max values for your scales */
846
+ :root {
847
+ --font-size-display-shrink-factor-max: 0.825;
848
+ --font-size-display-grow-factor-max: 1.35;
849
+ --font-size-display-bp-factor-max: 1.015;
850
+ --font-size-copy-shrink-factor-max: 0.825;
851
+ --font-size-copy-grow-factor-max: 1.35;
852
+ --font-size-copy-bp-factor-max: 1.015;
853
+ --font-size-interface-shrink-factor-max: 0.825;
854
+ --font-size-interface-grow-factor-max: 1.35;
855
+ --font-size-interface-bp-factor-max: 1.015;
856
+ --font-size-mono-shrink-factor-max: 0.825;
857
+ --font-size-mono-grow-factor-max: 1.35;
858
+ --font-size-mono-bp-factor-max: 1.015;
859
+ --ks-scale-spacing-shrink-factor-max: 0.35;
860
+ --ks-scale-spacing-grow-factor-max: 1.8;
861
+ --ks-scale-spacing-bp-factor-max: 1.02;
862
+ }
863
+
864
+ :root,
865
+ [ks-theme] {
866
+ --ks-color-primary-base: var(--ks-brand-color-primary);
867
+ --ks-color-primary-inverted-base: var(--ks-brand-color-primary-inverted);
868
+ --ks-color-fg-base: var(--ks-brand-color-fg);
869
+ --ks-color-fg-inverted-base: var(--ks-brand-color-fg-inverted);
870
+ --ks-color-bg-base: var(--ks-brand-color-bg);
871
+ --ks-color-bg-inverted-base: var(--ks-brand-color-bg-inverted);
872
+ --ks-color-link-base: var(--ks-brand-color-link);
873
+ --ks-color-link-inverted-base: var(--ks-brand-color-link-inverted);
874
+ --ks-color-positive-base: var(--ks-brand-color-positive);
875
+ --ks-color-positive-inverted-base: var(--ks-brand-color-positive-inverted);
876
+ --ks-color-negative-base: var(--ks-brand-color-negative);
877
+ --ks-color-negative-inverted-base: var(--ks-brand-color-negative-inverted);
878
+ --ks-color-informative-base: var(--ks-brand-color-informative);
879
+ --ks-color-informative-inverted-base: var(--ks-brand-color-informative-inverted);
880
+ --ks-color-notice-base: var(--ks-brand-color-notice);
881
+ --ks-color-notice-inverted-base: var(--ks-brand-color-notice-inverted);
882
+ }
883
+
884
+ :root,
885
+ [ks-theme],
886
+ [ks-inverted=false] {
887
+ --ks-color-primary: var(--ks-color-primary-base);
888
+ --ks-color-primary-inverted: var(--ks-color-primary-inverted-base);
889
+ --ks-color-fg: var(--ks-color-fg-base);
890
+ --ks-color-fg-inverted: var(--ks-color-fg-inverted-base);
891
+ --ks-color-bg: var(--ks-color-bg-base);
892
+ --ks-color-bg-inverted: var(--ks-color-bg-inverted-base);
893
+ --ks-color-link: var(--ks-color-link-base);
894
+ --ks-color-link-inverted: var(--ks-color-link-inverted-base);
895
+ --ks-color-positive: var(--ks-color-positive-base);
896
+ --ks-color-positive-inverted: var(--ks-color-positive-inverted-base);
897
+ --ks-color-negative: var(--ks-color-negative-base);
898
+ --ks-color-negative-inverted: var(--ks-color-negative-inverted-base);
899
+ --ks-color-informative: var(--ks-color-informative-base);
900
+ --ks-color-informative-inverted: var(--ks-color-informative-inverted-base);
901
+ --ks-color-notice: var(--ks-color-notice-base);
902
+ --ks-color-notice-inverted: var(--ks-color-notice-inverted-base);
903
+ }
904
+
905
+ [ks-inverted=true] {
906
+ --ks-color-primary: var(--ks-color-primary-inverted-base);
907
+ --ks-color-primary-inverted: var(--ks-color-primary-base);
908
+ --ks-color-fg: var(--ks-color-fg-inverted-base);
909
+ --ks-color-fg-inverted: var(--ks-color-fg-base);
910
+ --ks-color-bg: var(--ks-color-bg-inverted-base);
911
+ --ks-color-bg-inverted: var(--ks-color-bg-base);
912
+ --ks-color-positive: var(--ks-color-positive-inverted-base);
913
+ --ks-color-positive-inverted: var(--ks-color-positive-base);
914
+ --ks-color-negative: var(--ks-color-negative-inverted-base);
915
+ --ks-color-negative-inverted: var(--ks-color-negative-base);
916
+ --ks-color-informative: var(--ks-color-informative-inverted-base);
917
+ --ks-color-informative-inverted: var(--ks-color-informative-base);
918
+ --ks-color-notice: var(--ks-color-notice-inverted-base);
919
+ --ks-color-notice-inverted: var(--ks-color-notice-base);
920
+ }
921
+
922
+ :root,
923
+ [ks-inverted],
924
+ [ks-inverted=true],
925
+ [ks-inverted=false] {
926
+ --ks-color-primary-alpha-1: color-mix(
927
+ in srgb,
928
+ var(--ks-color-primary) var(--ks-brand-color-scale-1, 10%),
929
+ transparent
930
+ );
931
+ --ks-color-primary-alpha-2: color-mix(
932
+ in srgb,
933
+ var(--ks-color-primary) var(--ks-brand-color-scale-2, 20%),
934
+ transparent
935
+ );
936
+ --ks-color-primary-alpha-3: color-mix(
937
+ in srgb,
938
+ var(--ks-color-primary) var(--ks-brand-color-scale-3, 30%),
939
+ transparent
940
+ );
941
+ --ks-color-primary-alpha-4: color-mix(
942
+ in srgb,
943
+ var(--ks-color-primary) var(--ks-brand-color-scale-4, 40%),
944
+ transparent
945
+ );
946
+ --ks-color-primary-alpha-5: color-mix(
947
+ in srgb,
948
+ var(--ks-color-primary) var(--ks-brand-color-scale-5, 50%),
949
+ transparent
950
+ );
951
+ --ks-color-primary-alpha-6: color-mix(
952
+ in srgb,
953
+ var(--ks-color-primary) var(--ks-brand-color-scale-6, 60%),
954
+ transparent
955
+ );
956
+ --ks-color-primary-alpha-7: color-mix(
957
+ in srgb,
958
+ var(--ks-color-primary) var(--ks-brand-color-scale-7, 70%),
959
+ transparent
960
+ );
961
+ --ks-color-primary-alpha-8: color-mix(
962
+ in srgb,
963
+ var(--ks-color-primary) var(--ks-brand-color-scale-8, 80%),
964
+ transparent
965
+ );
966
+ --ks-color-primary-alpha-9: color-mix(
967
+ in srgb,
968
+ var(--ks-color-primary) var(--ks-brand-color-scale-9, 90%),
969
+ transparent
970
+ );
971
+ --ks-color-primary-inverted-alpha-1: color-mix(
972
+ in srgb,
973
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-1, 10%),
974
+ transparent
975
+ );
976
+ --ks-color-primary-inverted-alpha-2: color-mix(
977
+ in srgb,
978
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-2, 20%),
979
+ transparent
980
+ );
981
+ --ks-color-primary-inverted-alpha-3: color-mix(
982
+ in srgb,
983
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-3, 30%),
984
+ transparent
985
+ );
986
+ --ks-color-primary-inverted-alpha-4: color-mix(
987
+ in srgb,
988
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-4, 40%),
989
+ transparent
990
+ );
991
+ --ks-color-primary-inverted-alpha-5: color-mix(
992
+ in srgb,
993
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-5, 50%),
994
+ transparent
995
+ );
996
+ --ks-color-primary-inverted-alpha-6: color-mix(
997
+ in srgb,
998
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-6, 60%),
999
+ transparent
1000
+ );
1001
+ --ks-color-primary-inverted-alpha-7: color-mix(
1002
+ in srgb,
1003
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-7, 70%),
1004
+ transparent
1005
+ );
1006
+ --ks-color-primary-inverted-alpha-8: color-mix(
1007
+ in srgb,
1008
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-8, 80%),
1009
+ transparent
1010
+ );
1011
+ --ks-color-primary-inverted-alpha-9: color-mix(
1012
+ in srgb,
1013
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-9, 90%),
1014
+ transparent
1015
+ );
1016
+ --ks-color-primary-to-bg-1: color-mix(
1017
+ in srgb,
1018
+ var(--ks-color-primary) var(--ks-brand-color-scale-1, 10%),
1019
+ var(--ks-color-bg)
1020
+ );
1021
+ --ks-color-primary-to-bg-2: color-mix(
1022
+ in srgb,
1023
+ var(--ks-color-primary) var(--ks-brand-color-scale-2, 20%),
1024
+ var(--ks-color-bg)
1025
+ );
1026
+ --ks-color-primary-to-bg-3: color-mix(
1027
+ in srgb,
1028
+ var(--ks-color-primary) var(--ks-brand-color-scale-3, 30%),
1029
+ var(--ks-color-bg)
1030
+ );
1031
+ --ks-color-primary-to-bg-4: color-mix(
1032
+ in srgb,
1033
+ var(--ks-color-primary) var(--ks-brand-color-scale-4, 40%),
1034
+ var(--ks-color-bg)
1035
+ );
1036
+ --ks-color-primary-to-bg-5: color-mix(
1037
+ in srgb,
1038
+ var(--ks-color-primary) var(--ks-brand-color-scale-5, 50%),
1039
+ var(--ks-color-bg)
1040
+ );
1041
+ --ks-color-primary-to-bg-6: color-mix(
1042
+ in srgb,
1043
+ var(--ks-color-primary) var(--ks-brand-color-scale-6, 60%),
1044
+ var(--ks-color-bg)
1045
+ );
1046
+ --ks-color-primary-to-bg-7: color-mix(
1047
+ in srgb,
1048
+ var(--ks-color-primary) var(--ks-brand-color-scale-7, 70%),
1049
+ var(--ks-color-bg)
1050
+ );
1051
+ --ks-color-primary-to-bg-8: color-mix(
1052
+ in srgb,
1053
+ var(--ks-color-primary) var(--ks-brand-color-scale-8, 80%),
1054
+ var(--ks-color-bg)
1055
+ );
1056
+ --ks-color-primary-to-bg-9: color-mix(
1057
+ in srgb,
1058
+ var(--ks-color-primary) var(--ks-brand-color-scale-9, 90%),
1059
+ var(--ks-color-bg)
1060
+ );
1061
+ --ks-color-primary-inverted-to-bg-1: color-mix(
1062
+ in srgb,
1063
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-1, 10%),
1064
+ var(--ks-color-bg-inverted)
1065
+ );
1066
+ --ks-color-primary-inverted-to-bg-2: color-mix(
1067
+ in srgb,
1068
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-2, 20%),
1069
+ var(--ks-color-bg-inverted)
1070
+ );
1071
+ --ks-color-primary-inverted-to-bg-3: color-mix(
1072
+ in srgb,
1073
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-3, 30%),
1074
+ var(--ks-color-bg-inverted)
1075
+ );
1076
+ --ks-color-primary-inverted-to-bg-4: color-mix(
1077
+ in srgb,
1078
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-4, 40%),
1079
+ var(--ks-color-bg-inverted)
1080
+ );
1081
+ --ks-color-primary-inverted-to-bg-5: color-mix(
1082
+ in srgb,
1083
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-5, 50%),
1084
+ var(--ks-color-bg-inverted)
1085
+ );
1086
+ --ks-color-primary-inverted-to-bg-6: color-mix(
1087
+ in srgb,
1088
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-6, 60%),
1089
+ var(--ks-color-bg-inverted)
1090
+ );
1091
+ --ks-color-primary-inverted-to-bg-7: color-mix(
1092
+ in srgb,
1093
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-7, 70%),
1094
+ var(--ks-color-bg-inverted)
1095
+ );
1096
+ --ks-color-primary-inverted-to-bg-8: color-mix(
1097
+ in srgb,
1098
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-8, 80%),
1099
+ var(--ks-color-bg-inverted)
1100
+ );
1101
+ --ks-color-primary-inverted-to-bg-9: color-mix(
1102
+ in srgb,
1103
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-9, 90%),
1104
+ var(--ks-color-bg-inverted)
1105
+ );
1106
+ --ks-color-primary-to-fg-1: color-mix(
1107
+ in srgb,
1108
+ var(--ks-color-primary) var(--ks-brand-color-scale-1, 10%),
1109
+ var(--ks-color-fg)
1110
+ );
1111
+ --ks-color-primary-to-fg-2: color-mix(
1112
+ in srgb,
1113
+ var(--ks-color-primary) var(--ks-brand-color-scale-2, 20%),
1114
+ var(--ks-color-fg)
1115
+ );
1116
+ --ks-color-primary-to-fg-3: color-mix(
1117
+ in srgb,
1118
+ var(--ks-color-primary) var(--ks-brand-color-scale-3, 30%),
1119
+ var(--ks-color-fg)
1120
+ );
1121
+ --ks-color-primary-to-fg-4: color-mix(
1122
+ in srgb,
1123
+ var(--ks-color-primary) var(--ks-brand-color-scale-4, 40%),
1124
+ var(--ks-color-fg)
1125
+ );
1126
+ --ks-color-primary-to-fg-5: color-mix(
1127
+ in srgb,
1128
+ var(--ks-color-primary) var(--ks-brand-color-scale-5, 50%),
1129
+ var(--ks-color-fg)
1130
+ );
1131
+ --ks-color-primary-to-fg-6: color-mix(
1132
+ in srgb,
1133
+ var(--ks-color-primary) var(--ks-brand-color-scale-6, 60%),
1134
+ var(--ks-color-fg)
1135
+ );
1136
+ --ks-color-primary-to-fg-7: color-mix(
1137
+ in srgb,
1138
+ var(--ks-color-primary) var(--ks-brand-color-scale-7, 70%),
1139
+ var(--ks-color-fg)
1140
+ );
1141
+ --ks-color-primary-to-fg-8: color-mix(
1142
+ in srgb,
1143
+ var(--ks-color-primary) var(--ks-brand-color-scale-8, 80%),
1144
+ var(--ks-color-fg)
1145
+ );
1146
+ --ks-color-primary-to-fg-9: color-mix(
1147
+ in srgb,
1148
+ var(--ks-color-primary) var(--ks-brand-color-scale-9, 90%),
1149
+ var(--ks-color-fg)
1150
+ );
1151
+ --ks-color-primary-inverted-to-fg-1: color-mix(
1152
+ in srgb,
1153
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-1, 10%),
1154
+ var(--ks-color-fg-inverted)
1155
+ );
1156
+ --ks-color-primary-inverted-to-fg-2: color-mix(
1157
+ in srgb,
1158
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-2, 20%),
1159
+ var(--ks-color-fg-inverted)
1160
+ );
1161
+ --ks-color-primary-inverted-to-fg-3: color-mix(
1162
+ in srgb,
1163
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-3, 30%),
1164
+ var(--ks-color-fg-inverted)
1165
+ );
1166
+ --ks-color-primary-inverted-to-fg-4: color-mix(
1167
+ in srgb,
1168
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-4, 40%),
1169
+ var(--ks-color-fg-inverted)
1170
+ );
1171
+ --ks-color-primary-inverted-to-fg-5: color-mix(
1172
+ in srgb,
1173
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-5, 50%),
1174
+ var(--ks-color-fg-inverted)
1175
+ );
1176
+ --ks-color-primary-inverted-to-fg-6: color-mix(
1177
+ in srgb,
1178
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-6, 60%),
1179
+ var(--ks-color-fg-inverted)
1180
+ );
1181
+ --ks-color-primary-inverted-to-fg-7: color-mix(
1182
+ in srgb,
1183
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-7, 70%),
1184
+ var(--ks-color-fg-inverted)
1185
+ );
1186
+ --ks-color-primary-inverted-to-fg-8: color-mix(
1187
+ in srgb,
1188
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-8, 80%),
1189
+ var(--ks-color-fg-inverted)
1190
+ );
1191
+ --ks-color-primary-inverted-to-fg-9: color-mix(
1192
+ in srgb,
1193
+ var(--ks-color-primary-inverted) var(--ks-brand-color-scale-9, 90%),
1194
+ var(--ks-color-fg-inverted)
1195
+ );
1196
+ --ks-color-fg-alpha-1: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-1, 10%), transparent);
1197
+ --ks-color-fg-alpha-2: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-2, 20%), transparent);
1198
+ --ks-color-fg-alpha-3: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-3, 30%), transparent);
1199
+ --ks-color-fg-alpha-4: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-4, 40%), transparent);
1200
+ --ks-color-fg-alpha-5: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-5, 50%), transparent);
1201
+ --ks-color-fg-alpha-6: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-6, 60%), transparent);
1202
+ --ks-color-fg-alpha-7: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-7, 70%), transparent);
1203
+ --ks-color-fg-alpha-8: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-8, 80%), transparent);
1204
+ --ks-color-fg-alpha-9: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-9, 90%), transparent);
1205
+ --ks-color-fg-inverted-alpha-1: color-mix(
1206
+ in srgb,
1207
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-1, 10%),
1208
+ transparent
1209
+ );
1210
+ --ks-color-fg-inverted-alpha-2: color-mix(
1211
+ in srgb,
1212
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-2, 20%),
1213
+ transparent
1214
+ );
1215
+ --ks-color-fg-inverted-alpha-3: color-mix(
1216
+ in srgb,
1217
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-3, 30%),
1218
+ transparent
1219
+ );
1220
+ --ks-color-fg-inverted-alpha-4: color-mix(
1221
+ in srgb,
1222
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-4, 40%),
1223
+ transparent
1224
+ );
1225
+ --ks-color-fg-inverted-alpha-5: color-mix(
1226
+ in srgb,
1227
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-5, 50%),
1228
+ transparent
1229
+ );
1230
+ --ks-color-fg-inverted-alpha-6: color-mix(
1231
+ in srgb,
1232
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-6, 60%),
1233
+ transparent
1234
+ );
1235
+ --ks-color-fg-inverted-alpha-7: color-mix(
1236
+ in srgb,
1237
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-7, 70%),
1238
+ transparent
1239
+ );
1240
+ --ks-color-fg-inverted-alpha-8: color-mix(
1241
+ in srgb,
1242
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-8, 80%),
1243
+ transparent
1244
+ );
1245
+ --ks-color-fg-inverted-alpha-9: color-mix(
1246
+ in srgb,
1247
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-9, 90%),
1248
+ transparent
1249
+ );
1250
+ --ks-color-fg-to-bg-1: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-1, 10%), var(--ks-color-bg));
1251
+ --ks-color-fg-to-bg-2: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-2, 20%), var(--ks-color-bg));
1252
+ --ks-color-fg-to-bg-3: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-3, 30%), var(--ks-color-bg));
1253
+ --ks-color-fg-to-bg-4: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-4, 40%), var(--ks-color-bg));
1254
+ --ks-color-fg-to-bg-5: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-5, 50%), var(--ks-color-bg));
1255
+ --ks-color-fg-to-bg-6: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-6, 60%), var(--ks-color-bg));
1256
+ --ks-color-fg-to-bg-7: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-7, 70%), var(--ks-color-bg));
1257
+ --ks-color-fg-to-bg-8: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-8, 80%), var(--ks-color-bg));
1258
+ --ks-color-fg-to-bg-9: color-mix(in srgb, var(--ks-color-fg) var(--ks-brand-color-scale-9, 90%), var(--ks-color-bg));
1259
+ --ks-color-fg-inverted-to-bg-1: color-mix(
1260
+ in srgb,
1261
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-1, 10%),
1262
+ var(--ks-color-bg-inverted)
1263
+ );
1264
+ --ks-color-fg-inverted-to-bg-2: color-mix(
1265
+ in srgb,
1266
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-2, 20%),
1267
+ var(--ks-color-bg-inverted)
1268
+ );
1269
+ --ks-color-fg-inverted-to-bg-3: color-mix(
1270
+ in srgb,
1271
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-3, 30%),
1272
+ var(--ks-color-bg-inverted)
1273
+ );
1274
+ --ks-color-fg-inverted-to-bg-4: color-mix(
1275
+ in srgb,
1276
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-4, 40%),
1277
+ var(--ks-color-bg-inverted)
1278
+ );
1279
+ --ks-color-fg-inverted-to-bg-5: color-mix(
1280
+ in srgb,
1281
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-5, 50%),
1282
+ var(--ks-color-bg-inverted)
1283
+ );
1284
+ --ks-color-fg-inverted-to-bg-6: color-mix(
1285
+ in srgb,
1286
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-6, 60%),
1287
+ var(--ks-color-bg-inverted)
1288
+ );
1289
+ --ks-color-fg-inverted-to-bg-7: color-mix(
1290
+ in srgb,
1291
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-7, 70%),
1292
+ var(--ks-color-bg-inverted)
1293
+ );
1294
+ --ks-color-fg-inverted-to-bg-8: color-mix(
1295
+ in srgb,
1296
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-8, 80%),
1297
+ var(--ks-color-bg-inverted)
1298
+ );
1299
+ --ks-color-fg-inverted-to-bg-9: color-mix(
1300
+ in srgb,
1301
+ var(--ks-color-fg-inverted) var(--ks-brand-color-scale-9, 90%),
1302
+ var(--ks-color-bg-inverted)
1303
+ );
1304
+ --ks-color-bg-alpha-1: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-1, 10%), transparent);
1305
+ --ks-color-bg-alpha-2: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-2, 20%), transparent);
1306
+ --ks-color-bg-alpha-3: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-3, 30%), transparent);
1307
+ --ks-color-bg-alpha-4: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-4, 40%), transparent);
1308
+ --ks-color-bg-alpha-5: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-5, 50%), transparent);
1309
+ --ks-color-bg-alpha-6: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-6, 60%), transparent);
1310
+ --ks-color-bg-alpha-7: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-7, 70%), transparent);
1311
+ --ks-color-bg-alpha-8: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-8, 80%), transparent);
1312
+ --ks-color-bg-alpha-9: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-9, 90%), transparent);
1313
+ --ks-color-bg-inverted-alpha-1: color-mix(
1314
+ in srgb,
1315
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-1, 10%),
1316
+ transparent
1317
+ );
1318
+ --ks-color-bg-inverted-alpha-2: color-mix(
1319
+ in srgb,
1320
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-2, 20%),
1321
+ transparent
1322
+ );
1323
+ --ks-color-bg-inverted-alpha-3: color-mix(
1324
+ in srgb,
1325
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-3, 30%),
1326
+ transparent
1327
+ );
1328
+ --ks-color-bg-inverted-alpha-4: color-mix(
1329
+ in srgb,
1330
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-4, 40%),
1331
+ transparent
1332
+ );
1333
+ --ks-color-bg-inverted-alpha-5: color-mix(
1334
+ in srgb,
1335
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-5, 50%),
1336
+ transparent
1337
+ );
1338
+ --ks-color-bg-inverted-alpha-6: color-mix(
1339
+ in srgb,
1340
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-6, 60%),
1341
+ transparent
1342
+ );
1343
+ --ks-color-bg-inverted-alpha-7: color-mix(
1344
+ in srgb,
1345
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-7, 70%),
1346
+ transparent
1347
+ );
1348
+ --ks-color-bg-inverted-alpha-8: color-mix(
1349
+ in srgb,
1350
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-8, 80%),
1351
+ transparent
1352
+ );
1353
+ --ks-color-bg-inverted-alpha-9: color-mix(
1354
+ in srgb,
1355
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-9, 90%),
1356
+ transparent
1357
+ );
1358
+ --ks-color-bg-to-fg-1: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-1, 10%), var(--ks-color-fg));
1359
+ --ks-color-bg-to-fg-2: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-2, 20%), var(--ks-color-fg));
1360
+ --ks-color-bg-to-fg-3: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-3, 30%), var(--ks-color-fg));
1361
+ --ks-color-bg-to-fg-4: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-4, 40%), var(--ks-color-fg));
1362
+ --ks-color-bg-to-fg-5: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-5, 50%), var(--ks-color-fg));
1363
+ --ks-color-bg-to-fg-6: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-6, 60%), var(--ks-color-fg));
1364
+ --ks-color-bg-to-fg-7: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-7, 70%), var(--ks-color-fg));
1365
+ --ks-color-bg-to-fg-8: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-8, 80%), var(--ks-color-fg));
1366
+ --ks-color-bg-to-fg-9: color-mix(in srgb, var(--ks-color-bg) var(--ks-brand-color-scale-9, 90%), var(--ks-color-fg));
1367
+ --ks-color-bg-inverted-to-fg-1: color-mix(
1368
+ in srgb,
1369
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-1, 10%),
1370
+ var(--ks-color-fg-inverted)
1371
+ );
1372
+ --ks-color-bg-inverted-to-fg-2: color-mix(
1373
+ in srgb,
1374
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-2, 20%),
1375
+ var(--ks-color-fg-inverted)
1376
+ );
1377
+ --ks-color-bg-inverted-to-fg-3: color-mix(
1378
+ in srgb,
1379
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-3, 30%),
1380
+ var(--ks-color-fg-inverted)
1381
+ );
1382
+ --ks-color-bg-inverted-to-fg-4: color-mix(
1383
+ in srgb,
1384
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-4, 40%),
1385
+ var(--ks-color-fg-inverted)
1386
+ );
1387
+ --ks-color-bg-inverted-to-fg-5: color-mix(
1388
+ in srgb,
1389
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-5, 50%),
1390
+ var(--ks-color-fg-inverted)
1391
+ );
1392
+ --ks-color-bg-inverted-to-fg-6: color-mix(
1393
+ in srgb,
1394
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-6, 60%),
1395
+ var(--ks-color-fg-inverted)
1396
+ );
1397
+ --ks-color-bg-inverted-to-fg-7: color-mix(
1398
+ in srgb,
1399
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-7, 70%),
1400
+ var(--ks-color-fg-inverted)
1401
+ );
1402
+ --ks-color-bg-inverted-to-fg-8: color-mix(
1403
+ in srgb,
1404
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-8, 80%),
1405
+ var(--ks-color-fg-inverted)
1406
+ );
1407
+ --ks-color-bg-inverted-to-fg-9: color-mix(
1408
+ in srgb,
1409
+ var(--ks-color-bg-inverted) var(--ks-brand-color-scale-9, 90%),
1410
+ var(--ks-color-fg-inverted)
1411
+ );
1412
+ --ks-color-link-alpha-1: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-1, 10%), transparent);
1413
+ --ks-color-link-alpha-2: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-2, 20%), transparent);
1414
+ --ks-color-link-alpha-3: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-3, 30%), transparent);
1415
+ --ks-color-link-alpha-4: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-4, 40%), transparent);
1416
+ --ks-color-link-alpha-5: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-5, 50%), transparent);
1417
+ --ks-color-link-alpha-6: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-6, 60%), transparent);
1418
+ --ks-color-link-alpha-7: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-7, 70%), transparent);
1419
+ --ks-color-link-alpha-8: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-8, 80%), transparent);
1420
+ --ks-color-link-alpha-9: color-mix(in srgb, var(--ks-color-link) var(--ks-brand-color-scale-9, 90%), transparent);
1421
+ --ks-color-link-inverted-alpha-1: color-mix(
1422
+ in srgb,
1423
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-1, 10%),
1424
+ transparent
1425
+ );
1426
+ --ks-color-link-inverted-alpha-2: color-mix(
1427
+ in srgb,
1428
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-2, 20%),
1429
+ transparent
1430
+ );
1431
+ --ks-color-link-inverted-alpha-3: color-mix(
1432
+ in srgb,
1433
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-3, 30%),
1434
+ transparent
1435
+ );
1436
+ --ks-color-link-inverted-alpha-4: color-mix(
1437
+ in srgb,
1438
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-4, 40%),
1439
+ transparent
1440
+ );
1441
+ --ks-color-link-inverted-alpha-5: color-mix(
1442
+ in srgb,
1443
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-5, 50%),
1444
+ transparent
1445
+ );
1446
+ --ks-color-link-inverted-alpha-6: color-mix(
1447
+ in srgb,
1448
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-6, 60%),
1449
+ transparent
1450
+ );
1451
+ --ks-color-link-inverted-alpha-7: color-mix(
1452
+ in srgb,
1453
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-7, 70%),
1454
+ transparent
1455
+ );
1456
+ --ks-color-link-inverted-alpha-8: color-mix(
1457
+ in srgb,
1458
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-8, 80%),
1459
+ transparent
1460
+ );
1461
+ --ks-color-link-inverted-alpha-9: color-mix(
1462
+ in srgb,
1463
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-9, 90%),
1464
+ transparent
1465
+ );
1466
+ --ks-color-link-to-bg-1: color-mix(
1467
+ in srgb,
1468
+ var(--ks-color-link) var(--ks-brand-color-scale-1, 10%),
1469
+ var(--ks-color-bg)
1470
+ );
1471
+ --ks-color-link-to-bg-2: color-mix(
1472
+ in srgb,
1473
+ var(--ks-color-link) var(--ks-brand-color-scale-2, 20%),
1474
+ var(--ks-color-bg)
1475
+ );
1476
+ --ks-color-link-to-bg-3: color-mix(
1477
+ in srgb,
1478
+ var(--ks-color-link) var(--ks-brand-color-scale-3, 30%),
1479
+ var(--ks-color-bg)
1480
+ );
1481
+ --ks-color-link-to-bg-4: color-mix(
1482
+ in srgb,
1483
+ var(--ks-color-link) var(--ks-brand-color-scale-4, 40%),
1484
+ var(--ks-color-bg)
1485
+ );
1486
+ --ks-color-link-to-bg-5: color-mix(
1487
+ in srgb,
1488
+ var(--ks-color-link) var(--ks-brand-color-scale-5, 50%),
1489
+ var(--ks-color-bg)
1490
+ );
1491
+ --ks-color-link-to-bg-6: color-mix(
1492
+ in srgb,
1493
+ var(--ks-color-link) var(--ks-brand-color-scale-6, 60%),
1494
+ var(--ks-color-bg)
1495
+ );
1496
+ --ks-color-link-to-bg-7: color-mix(
1497
+ in srgb,
1498
+ var(--ks-color-link) var(--ks-brand-color-scale-7, 70%),
1499
+ var(--ks-color-bg)
1500
+ );
1501
+ --ks-color-link-to-bg-8: color-mix(
1502
+ in srgb,
1503
+ var(--ks-color-link) var(--ks-brand-color-scale-8, 80%),
1504
+ var(--ks-color-bg)
1505
+ );
1506
+ --ks-color-link-to-bg-9: color-mix(
1507
+ in srgb,
1508
+ var(--ks-color-link) var(--ks-brand-color-scale-9, 90%),
1509
+ var(--ks-color-bg)
1510
+ );
1511
+ --ks-color-link-inverted-to-bg-1: color-mix(
1512
+ in srgb,
1513
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-1, 10%),
1514
+ var(--ks-color-bg-inverted)
1515
+ );
1516
+ --ks-color-link-inverted-to-bg-2: color-mix(
1517
+ in srgb,
1518
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-2, 20%),
1519
+ var(--ks-color-bg-inverted)
1520
+ );
1521
+ --ks-color-link-inverted-to-bg-3: color-mix(
1522
+ in srgb,
1523
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-3, 30%),
1524
+ var(--ks-color-bg-inverted)
1525
+ );
1526
+ --ks-color-link-inverted-to-bg-4: color-mix(
1527
+ in srgb,
1528
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-4, 40%),
1529
+ var(--ks-color-bg-inverted)
1530
+ );
1531
+ --ks-color-link-inverted-to-bg-5: color-mix(
1532
+ in srgb,
1533
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-5, 50%),
1534
+ var(--ks-color-bg-inverted)
1535
+ );
1536
+ --ks-color-link-inverted-to-bg-6: color-mix(
1537
+ in srgb,
1538
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-6, 60%),
1539
+ var(--ks-color-bg-inverted)
1540
+ );
1541
+ --ks-color-link-inverted-to-bg-7: color-mix(
1542
+ in srgb,
1543
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-7, 70%),
1544
+ var(--ks-color-bg-inverted)
1545
+ );
1546
+ --ks-color-link-inverted-to-bg-8: color-mix(
1547
+ in srgb,
1548
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-8, 80%),
1549
+ var(--ks-color-bg-inverted)
1550
+ );
1551
+ --ks-color-link-inverted-to-bg-9: color-mix(
1552
+ in srgb,
1553
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-9, 90%),
1554
+ var(--ks-color-bg-inverted)
1555
+ );
1556
+ --ks-color-link-to-fg-1: color-mix(
1557
+ in srgb,
1558
+ var(--ks-color-link) var(--ks-brand-color-scale-1, 10%),
1559
+ var(--ks-color-fg)
1560
+ );
1561
+ --ks-color-link-to-fg-2: color-mix(
1562
+ in srgb,
1563
+ var(--ks-color-link) var(--ks-brand-color-scale-2, 20%),
1564
+ var(--ks-color-fg)
1565
+ );
1566
+ --ks-color-link-to-fg-3: color-mix(
1567
+ in srgb,
1568
+ var(--ks-color-link) var(--ks-brand-color-scale-3, 30%),
1569
+ var(--ks-color-fg)
1570
+ );
1571
+ --ks-color-link-to-fg-4: color-mix(
1572
+ in srgb,
1573
+ var(--ks-color-link) var(--ks-brand-color-scale-4, 40%),
1574
+ var(--ks-color-fg)
1575
+ );
1576
+ --ks-color-link-to-fg-5: color-mix(
1577
+ in srgb,
1578
+ var(--ks-color-link) var(--ks-brand-color-scale-5, 50%),
1579
+ var(--ks-color-fg)
1580
+ );
1581
+ --ks-color-link-to-fg-6: color-mix(
1582
+ in srgb,
1583
+ var(--ks-color-link) var(--ks-brand-color-scale-6, 60%),
1584
+ var(--ks-color-fg)
1585
+ );
1586
+ --ks-color-link-to-fg-7: color-mix(
1587
+ in srgb,
1588
+ var(--ks-color-link) var(--ks-brand-color-scale-7, 70%),
1589
+ var(--ks-color-fg)
1590
+ );
1591
+ --ks-color-link-to-fg-8: color-mix(
1592
+ in srgb,
1593
+ var(--ks-color-link) var(--ks-brand-color-scale-8, 80%),
1594
+ var(--ks-color-fg)
1595
+ );
1596
+ --ks-color-link-to-fg-9: color-mix(
1597
+ in srgb,
1598
+ var(--ks-color-link) var(--ks-brand-color-scale-9, 90%),
1599
+ var(--ks-color-fg)
1600
+ );
1601
+ --ks-color-link-inverted-to-fg-1: color-mix(
1602
+ in srgb,
1603
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-1, 10%),
1604
+ var(--ks-color-fg-inverted)
1605
+ );
1606
+ --ks-color-link-inverted-to-fg-2: color-mix(
1607
+ in srgb,
1608
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-2, 20%),
1609
+ var(--ks-color-fg-inverted)
1610
+ );
1611
+ --ks-color-link-inverted-to-fg-3: color-mix(
1612
+ in srgb,
1613
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-3, 30%),
1614
+ var(--ks-color-fg-inverted)
1615
+ );
1616
+ --ks-color-link-inverted-to-fg-4: color-mix(
1617
+ in srgb,
1618
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-4, 40%),
1619
+ var(--ks-color-fg-inverted)
1620
+ );
1621
+ --ks-color-link-inverted-to-fg-5: color-mix(
1622
+ in srgb,
1623
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-5, 50%),
1624
+ var(--ks-color-fg-inverted)
1625
+ );
1626
+ --ks-color-link-inverted-to-fg-6: color-mix(
1627
+ in srgb,
1628
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-6, 60%),
1629
+ var(--ks-color-fg-inverted)
1630
+ );
1631
+ --ks-color-link-inverted-to-fg-7: color-mix(
1632
+ in srgb,
1633
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-7, 70%),
1634
+ var(--ks-color-fg-inverted)
1635
+ );
1636
+ --ks-color-link-inverted-to-fg-8: color-mix(
1637
+ in srgb,
1638
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-8, 80%),
1639
+ var(--ks-color-fg-inverted)
1640
+ );
1641
+ --ks-color-link-inverted-to-fg-9: color-mix(
1642
+ in srgb,
1643
+ var(--ks-color-link-inverted) var(--ks-brand-color-scale-9, 90%),
1644
+ var(--ks-color-fg-inverted)
1645
+ );
1646
+ --ks-color-positive-alpha-1: color-mix(
1647
+ in srgb,
1648
+ var(--ks-color-positive) var(--ks-brand-color-scale-1, 10%),
1649
+ transparent
1650
+ );
1651
+ --ks-color-positive-alpha-2: color-mix(
1652
+ in srgb,
1653
+ var(--ks-color-positive) var(--ks-brand-color-scale-2, 20%),
1654
+ transparent
1655
+ );
1656
+ --ks-color-positive-alpha-3: color-mix(
1657
+ in srgb,
1658
+ var(--ks-color-positive) var(--ks-brand-color-scale-3, 30%),
1659
+ transparent
1660
+ );
1661
+ --ks-color-positive-alpha-4: color-mix(
1662
+ in srgb,
1663
+ var(--ks-color-positive) var(--ks-brand-color-scale-4, 40%),
1664
+ transparent
1665
+ );
1666
+ --ks-color-positive-alpha-5: color-mix(
1667
+ in srgb,
1668
+ var(--ks-color-positive) var(--ks-brand-color-scale-5, 50%),
1669
+ transparent
1670
+ );
1671
+ --ks-color-positive-alpha-6: color-mix(
1672
+ in srgb,
1673
+ var(--ks-color-positive) var(--ks-brand-color-scale-6, 60%),
1674
+ transparent
1675
+ );
1676
+ --ks-color-positive-alpha-7: color-mix(
1677
+ in srgb,
1678
+ var(--ks-color-positive) var(--ks-brand-color-scale-7, 70%),
1679
+ transparent
1680
+ );
1681
+ --ks-color-positive-alpha-8: color-mix(
1682
+ in srgb,
1683
+ var(--ks-color-positive) var(--ks-brand-color-scale-8, 80%),
1684
+ transparent
1685
+ );
1686
+ --ks-color-positive-alpha-9: color-mix(
1687
+ in srgb,
1688
+ var(--ks-color-positive) var(--ks-brand-color-scale-9, 90%),
1689
+ transparent
1690
+ );
1691
+ --ks-color-positive-inverted-alpha-1: color-mix(
1692
+ in srgb,
1693
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-1, 10%),
1694
+ transparent
1695
+ );
1696
+ --ks-color-positive-inverted-alpha-2: color-mix(
1697
+ in srgb,
1698
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-2, 20%),
1699
+ transparent
1700
+ );
1701
+ --ks-color-positive-inverted-alpha-3: color-mix(
1702
+ in srgb,
1703
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-3, 30%),
1704
+ transparent
1705
+ );
1706
+ --ks-color-positive-inverted-alpha-4: color-mix(
1707
+ in srgb,
1708
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-4, 40%),
1709
+ transparent
1710
+ );
1711
+ --ks-color-positive-inverted-alpha-5: color-mix(
1712
+ in srgb,
1713
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-5, 50%),
1714
+ transparent
1715
+ );
1716
+ --ks-color-positive-inverted-alpha-6: color-mix(
1717
+ in srgb,
1718
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-6, 60%),
1719
+ transparent
1720
+ );
1721
+ --ks-color-positive-inverted-alpha-7: color-mix(
1722
+ in srgb,
1723
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-7, 70%),
1724
+ transparent
1725
+ );
1726
+ --ks-color-positive-inverted-alpha-8: color-mix(
1727
+ in srgb,
1728
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-8, 80%),
1729
+ transparent
1730
+ );
1731
+ --ks-color-positive-inverted-alpha-9: color-mix(
1732
+ in srgb,
1733
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-9, 90%),
1734
+ transparent
1735
+ );
1736
+ --ks-color-positive-to-bg-1: color-mix(
1737
+ in srgb,
1738
+ var(--ks-color-positive) var(--ks-brand-color-scale-1, 10%),
1739
+ var(--ks-color-bg)
1740
+ );
1741
+ --ks-color-positive-to-bg-2: color-mix(
1742
+ in srgb,
1743
+ var(--ks-color-positive) var(--ks-brand-color-scale-2, 20%),
1744
+ var(--ks-color-bg)
1745
+ );
1746
+ --ks-color-positive-to-bg-3: color-mix(
1747
+ in srgb,
1748
+ var(--ks-color-positive) var(--ks-brand-color-scale-3, 30%),
1749
+ var(--ks-color-bg)
1750
+ );
1751
+ --ks-color-positive-to-bg-4: color-mix(
1752
+ in srgb,
1753
+ var(--ks-color-positive) var(--ks-brand-color-scale-4, 40%),
1754
+ var(--ks-color-bg)
1755
+ );
1756
+ --ks-color-positive-to-bg-5: color-mix(
1757
+ in srgb,
1758
+ var(--ks-color-positive) var(--ks-brand-color-scale-5, 50%),
1759
+ var(--ks-color-bg)
1760
+ );
1761
+ --ks-color-positive-to-bg-6: color-mix(
1762
+ in srgb,
1763
+ var(--ks-color-positive) var(--ks-brand-color-scale-6, 60%),
1764
+ var(--ks-color-bg)
1765
+ );
1766
+ --ks-color-positive-to-bg-7: color-mix(
1767
+ in srgb,
1768
+ var(--ks-color-positive) var(--ks-brand-color-scale-7, 70%),
1769
+ var(--ks-color-bg)
1770
+ );
1771
+ --ks-color-positive-to-bg-8: color-mix(
1772
+ in srgb,
1773
+ var(--ks-color-positive) var(--ks-brand-color-scale-8, 80%),
1774
+ var(--ks-color-bg)
1775
+ );
1776
+ --ks-color-positive-to-bg-9: color-mix(
1777
+ in srgb,
1778
+ var(--ks-color-positive) var(--ks-brand-color-scale-9, 90%),
1779
+ var(--ks-color-bg)
1780
+ );
1781
+ --ks-color-positive-inverted-to-bg-1: color-mix(
1782
+ in srgb,
1783
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-1, 10%),
1784
+ var(--ks-color-bg-inverted)
1785
+ );
1786
+ --ks-color-positive-inverted-to-bg-2: color-mix(
1787
+ in srgb,
1788
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-2, 20%),
1789
+ var(--ks-color-bg-inverted)
1790
+ );
1791
+ --ks-color-positive-inverted-to-bg-3: color-mix(
1792
+ in srgb,
1793
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-3, 30%),
1794
+ var(--ks-color-bg-inverted)
1795
+ );
1796
+ --ks-color-positive-inverted-to-bg-4: color-mix(
1797
+ in srgb,
1798
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-4, 40%),
1799
+ var(--ks-color-bg-inverted)
1800
+ );
1801
+ --ks-color-positive-inverted-to-bg-5: color-mix(
1802
+ in srgb,
1803
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-5, 50%),
1804
+ var(--ks-color-bg-inverted)
1805
+ );
1806
+ --ks-color-positive-inverted-to-bg-6: color-mix(
1807
+ in srgb,
1808
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-6, 60%),
1809
+ var(--ks-color-bg-inverted)
1810
+ );
1811
+ --ks-color-positive-inverted-to-bg-7: color-mix(
1812
+ in srgb,
1813
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-7, 70%),
1814
+ var(--ks-color-bg-inverted)
1815
+ );
1816
+ --ks-color-positive-inverted-to-bg-8: color-mix(
1817
+ in srgb,
1818
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-8, 80%),
1819
+ var(--ks-color-bg-inverted)
1820
+ );
1821
+ --ks-color-positive-inverted-to-bg-9: color-mix(
1822
+ in srgb,
1823
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-9, 90%),
1824
+ var(--ks-color-bg-inverted)
1825
+ );
1826
+ --ks-color-positive-to-fg-1: color-mix(
1827
+ in srgb,
1828
+ var(--ks-color-positive) var(--ks-brand-color-scale-1, 10%),
1829
+ var(--ks-color-fg)
1830
+ );
1831
+ --ks-color-positive-to-fg-2: color-mix(
1832
+ in srgb,
1833
+ var(--ks-color-positive) var(--ks-brand-color-scale-2, 20%),
1834
+ var(--ks-color-fg)
1835
+ );
1836
+ --ks-color-positive-to-fg-3: color-mix(
1837
+ in srgb,
1838
+ var(--ks-color-positive) var(--ks-brand-color-scale-3, 30%),
1839
+ var(--ks-color-fg)
1840
+ );
1841
+ --ks-color-positive-to-fg-4: color-mix(
1842
+ in srgb,
1843
+ var(--ks-color-positive) var(--ks-brand-color-scale-4, 40%),
1844
+ var(--ks-color-fg)
1845
+ );
1846
+ --ks-color-positive-to-fg-5: color-mix(
1847
+ in srgb,
1848
+ var(--ks-color-positive) var(--ks-brand-color-scale-5, 50%),
1849
+ var(--ks-color-fg)
1850
+ );
1851
+ --ks-color-positive-to-fg-6: color-mix(
1852
+ in srgb,
1853
+ var(--ks-color-positive) var(--ks-brand-color-scale-6, 60%),
1854
+ var(--ks-color-fg)
1855
+ );
1856
+ --ks-color-positive-to-fg-7: color-mix(
1857
+ in srgb,
1858
+ var(--ks-color-positive) var(--ks-brand-color-scale-7, 70%),
1859
+ var(--ks-color-fg)
1860
+ );
1861
+ --ks-color-positive-to-fg-8: color-mix(
1862
+ in srgb,
1863
+ var(--ks-color-positive) var(--ks-brand-color-scale-8, 80%),
1864
+ var(--ks-color-fg)
1865
+ );
1866
+ --ks-color-positive-to-fg-9: color-mix(
1867
+ in srgb,
1868
+ var(--ks-color-positive) var(--ks-brand-color-scale-9, 90%),
1869
+ var(--ks-color-fg)
1870
+ );
1871
+ --ks-color-positive-inverted-to-fg-1: color-mix(
1872
+ in srgb,
1873
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-1, 10%),
1874
+ var(--ks-color-fg-inverted)
1875
+ );
1876
+ --ks-color-positive-inverted-to-fg-2: color-mix(
1877
+ in srgb,
1878
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-2, 20%),
1879
+ var(--ks-color-fg-inverted)
1880
+ );
1881
+ --ks-color-positive-inverted-to-fg-3: color-mix(
1882
+ in srgb,
1883
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-3, 30%),
1884
+ var(--ks-color-fg-inverted)
1885
+ );
1886
+ --ks-color-positive-inverted-to-fg-4: color-mix(
1887
+ in srgb,
1888
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-4, 40%),
1889
+ var(--ks-color-fg-inverted)
1890
+ );
1891
+ --ks-color-positive-inverted-to-fg-5: color-mix(
1892
+ in srgb,
1893
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-5, 50%),
1894
+ var(--ks-color-fg-inverted)
1895
+ );
1896
+ --ks-color-positive-inverted-to-fg-6: color-mix(
1897
+ in srgb,
1898
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-6, 60%),
1899
+ var(--ks-color-fg-inverted)
1900
+ );
1901
+ --ks-color-positive-inverted-to-fg-7: color-mix(
1902
+ in srgb,
1903
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-7, 70%),
1904
+ var(--ks-color-fg-inverted)
1905
+ );
1906
+ --ks-color-positive-inverted-to-fg-8: color-mix(
1907
+ in srgb,
1908
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-8, 80%),
1909
+ var(--ks-color-fg-inverted)
1910
+ );
1911
+ --ks-color-positive-inverted-to-fg-9: color-mix(
1912
+ in srgb,
1913
+ var(--ks-color-positive-inverted) var(--ks-brand-color-scale-9, 90%),
1914
+ var(--ks-color-fg-inverted)
1915
+ );
1916
+ --ks-color-negative-alpha-1: color-mix(
1917
+ in srgb,
1918
+ var(--ks-color-negative) var(--ks-brand-color-scale-1, 10%),
1919
+ transparent
1920
+ );
1921
+ --ks-color-negative-alpha-2: color-mix(
1922
+ in srgb,
1923
+ var(--ks-color-negative) var(--ks-brand-color-scale-2, 20%),
1924
+ transparent
1925
+ );
1926
+ --ks-color-negative-alpha-3: color-mix(
1927
+ in srgb,
1928
+ var(--ks-color-negative) var(--ks-brand-color-scale-3, 30%),
1929
+ transparent
1930
+ );
1931
+ --ks-color-negative-alpha-4: color-mix(
1932
+ in srgb,
1933
+ var(--ks-color-negative) var(--ks-brand-color-scale-4, 40%),
1934
+ transparent
1935
+ );
1936
+ --ks-color-negative-alpha-5: color-mix(
1937
+ in srgb,
1938
+ var(--ks-color-negative) var(--ks-brand-color-scale-5, 50%),
1939
+ transparent
1940
+ );
1941
+ --ks-color-negative-alpha-6: color-mix(
1942
+ in srgb,
1943
+ var(--ks-color-negative) var(--ks-brand-color-scale-6, 60%),
1944
+ transparent
1945
+ );
1946
+ --ks-color-negative-alpha-7: color-mix(
1947
+ in srgb,
1948
+ var(--ks-color-negative) var(--ks-brand-color-scale-7, 70%),
1949
+ transparent
1950
+ );
1951
+ --ks-color-negative-alpha-8: color-mix(
1952
+ in srgb,
1953
+ var(--ks-color-negative) var(--ks-brand-color-scale-8, 80%),
1954
+ transparent
1955
+ );
1956
+ --ks-color-negative-alpha-9: color-mix(
1957
+ in srgb,
1958
+ var(--ks-color-negative) var(--ks-brand-color-scale-9, 90%),
1959
+ transparent
1960
+ );
1961
+ --ks-color-negative-inverted-alpha-1: color-mix(
1962
+ in srgb,
1963
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-1, 10%),
1964
+ transparent
1965
+ );
1966
+ --ks-color-negative-inverted-alpha-2: color-mix(
1967
+ in srgb,
1968
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-2, 20%),
1969
+ transparent
1970
+ );
1971
+ --ks-color-negative-inverted-alpha-3: color-mix(
1972
+ in srgb,
1973
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-3, 30%),
1974
+ transparent
1975
+ );
1976
+ --ks-color-negative-inverted-alpha-4: color-mix(
1977
+ in srgb,
1978
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-4, 40%),
1979
+ transparent
1980
+ );
1981
+ --ks-color-negative-inverted-alpha-5: color-mix(
1982
+ in srgb,
1983
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-5, 50%),
1984
+ transparent
1985
+ );
1986
+ --ks-color-negative-inverted-alpha-6: color-mix(
1987
+ in srgb,
1988
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-6, 60%),
1989
+ transparent
1990
+ );
1991
+ --ks-color-negative-inverted-alpha-7: color-mix(
1992
+ in srgb,
1993
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-7, 70%),
1994
+ transparent
1995
+ );
1996
+ --ks-color-negative-inverted-alpha-8: color-mix(
1997
+ in srgb,
1998
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-8, 80%),
1999
+ transparent
2000
+ );
2001
+ --ks-color-negative-inverted-alpha-9: color-mix(
2002
+ in srgb,
2003
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-9, 90%),
2004
+ transparent
2005
+ );
2006
+ --ks-color-negative-to-bg-1: color-mix(
2007
+ in srgb,
2008
+ var(--ks-color-negative) var(--ks-brand-color-scale-1, 10%),
2009
+ var(--ks-color-bg)
2010
+ );
2011
+ --ks-color-negative-to-bg-2: color-mix(
2012
+ in srgb,
2013
+ var(--ks-color-negative) var(--ks-brand-color-scale-2, 20%),
2014
+ var(--ks-color-bg)
2015
+ );
2016
+ --ks-color-negative-to-bg-3: color-mix(
2017
+ in srgb,
2018
+ var(--ks-color-negative) var(--ks-brand-color-scale-3, 30%),
2019
+ var(--ks-color-bg)
2020
+ );
2021
+ --ks-color-negative-to-bg-4: color-mix(
2022
+ in srgb,
2023
+ var(--ks-color-negative) var(--ks-brand-color-scale-4, 40%),
2024
+ var(--ks-color-bg)
2025
+ );
2026
+ --ks-color-negative-to-bg-5: color-mix(
2027
+ in srgb,
2028
+ var(--ks-color-negative) var(--ks-brand-color-scale-5, 50%),
2029
+ var(--ks-color-bg)
2030
+ );
2031
+ --ks-color-negative-to-bg-6: color-mix(
2032
+ in srgb,
2033
+ var(--ks-color-negative) var(--ks-brand-color-scale-6, 60%),
2034
+ var(--ks-color-bg)
2035
+ );
2036
+ --ks-color-negative-to-bg-7: color-mix(
2037
+ in srgb,
2038
+ var(--ks-color-negative) var(--ks-brand-color-scale-7, 70%),
2039
+ var(--ks-color-bg)
2040
+ );
2041
+ --ks-color-negative-to-bg-8: color-mix(
2042
+ in srgb,
2043
+ var(--ks-color-negative) var(--ks-brand-color-scale-8, 80%),
2044
+ var(--ks-color-bg)
2045
+ );
2046
+ --ks-color-negative-to-bg-9: color-mix(
2047
+ in srgb,
2048
+ var(--ks-color-negative) var(--ks-brand-color-scale-9, 90%),
2049
+ var(--ks-color-bg)
2050
+ );
2051
+ --ks-color-negative-inverted-to-bg-1: color-mix(
2052
+ in srgb,
2053
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-1, 10%),
2054
+ var(--ks-color-bg-inverted)
2055
+ );
2056
+ --ks-color-negative-inverted-to-bg-2: color-mix(
2057
+ in srgb,
2058
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-2, 20%),
2059
+ var(--ks-color-bg-inverted)
2060
+ );
2061
+ --ks-color-negative-inverted-to-bg-3: color-mix(
2062
+ in srgb,
2063
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-3, 30%),
2064
+ var(--ks-color-bg-inverted)
2065
+ );
2066
+ --ks-color-negative-inverted-to-bg-4: color-mix(
2067
+ in srgb,
2068
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-4, 40%),
2069
+ var(--ks-color-bg-inverted)
2070
+ );
2071
+ --ks-color-negative-inverted-to-bg-5: color-mix(
2072
+ in srgb,
2073
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-5, 50%),
2074
+ var(--ks-color-bg-inverted)
2075
+ );
2076
+ --ks-color-negative-inverted-to-bg-6: color-mix(
2077
+ in srgb,
2078
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-6, 60%),
2079
+ var(--ks-color-bg-inverted)
2080
+ );
2081
+ --ks-color-negative-inverted-to-bg-7: color-mix(
2082
+ in srgb,
2083
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-7, 70%),
2084
+ var(--ks-color-bg-inverted)
2085
+ );
2086
+ --ks-color-negative-inverted-to-bg-8: color-mix(
2087
+ in srgb,
2088
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-8, 80%),
2089
+ var(--ks-color-bg-inverted)
2090
+ );
2091
+ --ks-color-negative-inverted-to-bg-9: color-mix(
2092
+ in srgb,
2093
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-9, 90%),
2094
+ var(--ks-color-bg-inverted)
2095
+ );
2096
+ --ks-color-negative-to-fg-1: color-mix(
2097
+ in srgb,
2098
+ var(--ks-color-negative) var(--ks-brand-color-scale-1, 10%),
2099
+ var(--ks-color-fg)
2100
+ );
2101
+ --ks-color-negative-to-fg-2: color-mix(
2102
+ in srgb,
2103
+ var(--ks-color-negative) var(--ks-brand-color-scale-2, 20%),
2104
+ var(--ks-color-fg)
2105
+ );
2106
+ --ks-color-negative-to-fg-3: color-mix(
2107
+ in srgb,
2108
+ var(--ks-color-negative) var(--ks-brand-color-scale-3, 30%),
2109
+ var(--ks-color-fg)
2110
+ );
2111
+ --ks-color-negative-to-fg-4: color-mix(
2112
+ in srgb,
2113
+ var(--ks-color-negative) var(--ks-brand-color-scale-4, 40%),
2114
+ var(--ks-color-fg)
2115
+ );
2116
+ --ks-color-negative-to-fg-5: color-mix(
2117
+ in srgb,
2118
+ var(--ks-color-negative) var(--ks-brand-color-scale-5, 50%),
2119
+ var(--ks-color-fg)
2120
+ );
2121
+ --ks-color-negative-to-fg-6: color-mix(
2122
+ in srgb,
2123
+ var(--ks-color-negative) var(--ks-brand-color-scale-6, 60%),
2124
+ var(--ks-color-fg)
2125
+ );
2126
+ --ks-color-negative-to-fg-7: color-mix(
2127
+ in srgb,
2128
+ var(--ks-color-negative) var(--ks-brand-color-scale-7, 70%),
2129
+ var(--ks-color-fg)
2130
+ );
2131
+ --ks-color-negative-to-fg-8: color-mix(
2132
+ in srgb,
2133
+ var(--ks-color-negative) var(--ks-brand-color-scale-8, 80%),
2134
+ var(--ks-color-fg)
2135
+ );
2136
+ --ks-color-negative-to-fg-9: color-mix(
2137
+ in srgb,
2138
+ var(--ks-color-negative) var(--ks-brand-color-scale-9, 90%),
2139
+ var(--ks-color-fg)
2140
+ );
2141
+ --ks-color-negative-inverted-to-fg-1: color-mix(
2142
+ in srgb,
2143
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-1, 10%),
2144
+ var(--ks-color-fg-inverted)
2145
+ );
2146
+ --ks-color-negative-inverted-to-fg-2: color-mix(
2147
+ in srgb,
2148
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-2, 20%),
2149
+ var(--ks-color-fg-inverted)
2150
+ );
2151
+ --ks-color-negative-inverted-to-fg-3: color-mix(
2152
+ in srgb,
2153
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-3, 30%),
2154
+ var(--ks-color-fg-inverted)
2155
+ );
2156
+ --ks-color-negative-inverted-to-fg-4: color-mix(
2157
+ in srgb,
2158
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-4, 40%),
2159
+ var(--ks-color-fg-inverted)
2160
+ );
2161
+ --ks-color-negative-inverted-to-fg-5: color-mix(
2162
+ in srgb,
2163
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-5, 50%),
2164
+ var(--ks-color-fg-inverted)
2165
+ );
2166
+ --ks-color-negative-inverted-to-fg-6: color-mix(
2167
+ in srgb,
2168
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-6, 60%),
2169
+ var(--ks-color-fg-inverted)
2170
+ );
2171
+ --ks-color-negative-inverted-to-fg-7: color-mix(
2172
+ in srgb,
2173
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-7, 70%),
2174
+ var(--ks-color-fg-inverted)
2175
+ );
2176
+ --ks-color-negative-inverted-to-fg-8: color-mix(
2177
+ in srgb,
2178
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-8, 80%),
2179
+ var(--ks-color-fg-inverted)
2180
+ );
2181
+ --ks-color-negative-inverted-to-fg-9: color-mix(
2182
+ in srgb,
2183
+ var(--ks-color-negative-inverted) var(--ks-brand-color-scale-9, 90%),
2184
+ var(--ks-color-fg-inverted)
2185
+ );
2186
+ --ks-color-informative-alpha-1: color-mix(
2187
+ in srgb,
2188
+ var(--ks-color-informative) var(--ks-brand-color-scale-1, 10%),
2189
+ transparent
2190
+ );
2191
+ --ks-color-informative-alpha-2: color-mix(
2192
+ in srgb,
2193
+ var(--ks-color-informative) var(--ks-brand-color-scale-2, 20%),
2194
+ transparent
2195
+ );
2196
+ --ks-color-informative-alpha-3: color-mix(
2197
+ in srgb,
2198
+ var(--ks-color-informative) var(--ks-brand-color-scale-3, 30%),
2199
+ transparent
2200
+ );
2201
+ --ks-color-informative-alpha-4: color-mix(
2202
+ in srgb,
2203
+ var(--ks-color-informative) var(--ks-brand-color-scale-4, 40%),
2204
+ transparent
2205
+ );
2206
+ --ks-color-informative-alpha-5: color-mix(
2207
+ in srgb,
2208
+ var(--ks-color-informative) var(--ks-brand-color-scale-5, 50%),
2209
+ transparent
2210
+ );
2211
+ --ks-color-informative-alpha-6: color-mix(
2212
+ in srgb,
2213
+ var(--ks-color-informative) var(--ks-brand-color-scale-6, 60%),
2214
+ transparent
2215
+ );
2216
+ --ks-color-informative-alpha-7: color-mix(
2217
+ in srgb,
2218
+ var(--ks-color-informative) var(--ks-brand-color-scale-7, 70%),
2219
+ transparent
2220
+ );
2221
+ --ks-color-informative-alpha-8: color-mix(
2222
+ in srgb,
2223
+ var(--ks-color-informative) var(--ks-brand-color-scale-8, 80%),
2224
+ transparent
2225
+ );
2226
+ --ks-color-informative-alpha-9: color-mix(
2227
+ in srgb,
2228
+ var(--ks-color-informative) var(--ks-brand-color-scale-9, 90%),
2229
+ transparent
2230
+ );
2231
+ --ks-color-informative-inverted-alpha-1: color-mix(
2232
+ in srgb,
2233
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-1, 10%),
2234
+ transparent
2235
+ );
2236
+ --ks-color-informative-inverted-alpha-2: color-mix(
2237
+ in srgb,
2238
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-2, 20%),
2239
+ transparent
2240
+ );
2241
+ --ks-color-informative-inverted-alpha-3: color-mix(
2242
+ in srgb,
2243
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-3, 30%),
2244
+ transparent
2245
+ );
2246
+ --ks-color-informative-inverted-alpha-4: color-mix(
2247
+ in srgb,
2248
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-4, 40%),
2249
+ transparent
2250
+ );
2251
+ --ks-color-informative-inverted-alpha-5: color-mix(
2252
+ in srgb,
2253
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-5, 50%),
2254
+ transparent
2255
+ );
2256
+ --ks-color-informative-inverted-alpha-6: color-mix(
2257
+ in srgb,
2258
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-6, 60%),
2259
+ transparent
2260
+ );
2261
+ --ks-color-informative-inverted-alpha-7: color-mix(
2262
+ in srgb,
2263
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-7, 70%),
2264
+ transparent
2265
+ );
2266
+ --ks-color-informative-inverted-alpha-8: color-mix(
2267
+ in srgb,
2268
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-8, 80%),
2269
+ transparent
2270
+ );
2271
+ --ks-color-informative-inverted-alpha-9: color-mix(
2272
+ in srgb,
2273
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-9, 90%),
2274
+ transparent
2275
+ );
2276
+ --ks-color-informative-to-bg-1: color-mix(
2277
+ in srgb,
2278
+ var(--ks-color-informative) var(--ks-brand-color-scale-1, 10%),
2279
+ var(--ks-color-bg)
2280
+ );
2281
+ --ks-color-informative-to-bg-2: color-mix(
2282
+ in srgb,
2283
+ var(--ks-color-informative) var(--ks-brand-color-scale-2, 20%),
2284
+ var(--ks-color-bg)
2285
+ );
2286
+ --ks-color-informative-to-bg-3: color-mix(
2287
+ in srgb,
2288
+ var(--ks-color-informative) var(--ks-brand-color-scale-3, 30%),
2289
+ var(--ks-color-bg)
2290
+ );
2291
+ --ks-color-informative-to-bg-4: color-mix(
2292
+ in srgb,
2293
+ var(--ks-color-informative) var(--ks-brand-color-scale-4, 40%),
2294
+ var(--ks-color-bg)
2295
+ );
2296
+ --ks-color-informative-to-bg-5: color-mix(
2297
+ in srgb,
2298
+ var(--ks-color-informative) var(--ks-brand-color-scale-5, 50%),
2299
+ var(--ks-color-bg)
2300
+ );
2301
+ --ks-color-informative-to-bg-6: color-mix(
2302
+ in srgb,
2303
+ var(--ks-color-informative) var(--ks-brand-color-scale-6, 60%),
2304
+ var(--ks-color-bg)
2305
+ );
2306
+ --ks-color-informative-to-bg-7: color-mix(
2307
+ in srgb,
2308
+ var(--ks-color-informative) var(--ks-brand-color-scale-7, 70%),
2309
+ var(--ks-color-bg)
2310
+ );
2311
+ --ks-color-informative-to-bg-8: color-mix(
2312
+ in srgb,
2313
+ var(--ks-color-informative) var(--ks-brand-color-scale-8, 80%),
2314
+ var(--ks-color-bg)
2315
+ );
2316
+ --ks-color-informative-to-bg-9: color-mix(
2317
+ in srgb,
2318
+ var(--ks-color-informative) var(--ks-brand-color-scale-9, 90%),
2319
+ var(--ks-color-bg)
2320
+ );
2321
+ --ks-color-informative-inverted-to-bg-1: color-mix(
2322
+ in srgb,
2323
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-1, 10%),
2324
+ var(--ks-color-bg-inverted)
2325
+ );
2326
+ --ks-color-informative-inverted-to-bg-2: color-mix(
2327
+ in srgb,
2328
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-2, 20%),
2329
+ var(--ks-color-bg-inverted)
2330
+ );
2331
+ --ks-color-informative-inverted-to-bg-3: color-mix(
2332
+ in srgb,
2333
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-3, 30%),
2334
+ var(--ks-color-bg-inverted)
2335
+ );
2336
+ --ks-color-informative-inverted-to-bg-4: color-mix(
2337
+ in srgb,
2338
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-4, 40%),
2339
+ var(--ks-color-bg-inverted)
2340
+ );
2341
+ --ks-color-informative-inverted-to-bg-5: color-mix(
2342
+ in srgb,
2343
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-5, 50%),
2344
+ var(--ks-color-bg-inverted)
2345
+ );
2346
+ --ks-color-informative-inverted-to-bg-6: color-mix(
2347
+ in srgb,
2348
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-6, 60%),
2349
+ var(--ks-color-bg-inverted)
2350
+ );
2351
+ --ks-color-informative-inverted-to-bg-7: color-mix(
2352
+ in srgb,
2353
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-7, 70%),
2354
+ var(--ks-color-bg-inverted)
2355
+ );
2356
+ --ks-color-informative-inverted-to-bg-8: color-mix(
2357
+ in srgb,
2358
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-8, 80%),
2359
+ var(--ks-color-bg-inverted)
2360
+ );
2361
+ --ks-color-informative-inverted-to-bg-9: color-mix(
2362
+ in srgb,
2363
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-9, 90%),
2364
+ var(--ks-color-bg-inverted)
2365
+ );
2366
+ --ks-color-informative-to-fg-1: color-mix(
2367
+ in srgb,
2368
+ var(--ks-color-informative) var(--ks-brand-color-scale-1, 10%),
2369
+ var(--ks-color-fg)
2370
+ );
2371
+ --ks-color-informative-to-fg-2: color-mix(
2372
+ in srgb,
2373
+ var(--ks-color-informative) var(--ks-brand-color-scale-2, 20%),
2374
+ var(--ks-color-fg)
2375
+ );
2376
+ --ks-color-informative-to-fg-3: color-mix(
2377
+ in srgb,
2378
+ var(--ks-color-informative) var(--ks-brand-color-scale-3, 30%),
2379
+ var(--ks-color-fg)
2380
+ );
2381
+ --ks-color-informative-to-fg-4: color-mix(
2382
+ in srgb,
2383
+ var(--ks-color-informative) var(--ks-brand-color-scale-4, 40%),
2384
+ var(--ks-color-fg)
2385
+ );
2386
+ --ks-color-informative-to-fg-5: color-mix(
2387
+ in srgb,
2388
+ var(--ks-color-informative) var(--ks-brand-color-scale-5, 50%),
2389
+ var(--ks-color-fg)
2390
+ );
2391
+ --ks-color-informative-to-fg-6: color-mix(
2392
+ in srgb,
2393
+ var(--ks-color-informative) var(--ks-brand-color-scale-6, 60%),
2394
+ var(--ks-color-fg)
2395
+ );
2396
+ --ks-color-informative-to-fg-7: color-mix(
2397
+ in srgb,
2398
+ var(--ks-color-informative) var(--ks-brand-color-scale-7, 70%),
2399
+ var(--ks-color-fg)
2400
+ );
2401
+ --ks-color-informative-to-fg-8: color-mix(
2402
+ in srgb,
2403
+ var(--ks-color-informative) var(--ks-brand-color-scale-8, 80%),
2404
+ var(--ks-color-fg)
2405
+ );
2406
+ --ks-color-informative-to-fg-9: color-mix(
2407
+ in srgb,
2408
+ var(--ks-color-informative) var(--ks-brand-color-scale-9, 90%),
2409
+ var(--ks-color-fg)
2410
+ );
2411
+ --ks-color-informative-inverted-to-fg-1: color-mix(
2412
+ in srgb,
2413
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-1, 10%),
2414
+ var(--ks-color-fg-inverted)
2415
+ );
2416
+ --ks-color-informative-inverted-to-fg-2: color-mix(
2417
+ in srgb,
2418
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-2, 20%),
2419
+ var(--ks-color-fg-inverted)
2420
+ );
2421
+ --ks-color-informative-inverted-to-fg-3: color-mix(
2422
+ in srgb,
2423
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-3, 30%),
2424
+ var(--ks-color-fg-inverted)
2425
+ );
2426
+ --ks-color-informative-inverted-to-fg-4: color-mix(
2427
+ in srgb,
2428
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-4, 40%),
2429
+ var(--ks-color-fg-inverted)
2430
+ );
2431
+ --ks-color-informative-inverted-to-fg-5: color-mix(
2432
+ in srgb,
2433
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-5, 50%),
2434
+ var(--ks-color-fg-inverted)
2435
+ );
2436
+ --ks-color-informative-inverted-to-fg-6: color-mix(
2437
+ in srgb,
2438
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-6, 60%),
2439
+ var(--ks-color-fg-inverted)
2440
+ );
2441
+ --ks-color-informative-inverted-to-fg-7: color-mix(
2442
+ in srgb,
2443
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-7, 70%),
2444
+ var(--ks-color-fg-inverted)
2445
+ );
2446
+ --ks-color-informative-inverted-to-fg-8: color-mix(
2447
+ in srgb,
2448
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-8, 80%),
2449
+ var(--ks-color-fg-inverted)
2450
+ );
2451
+ --ks-color-informative-inverted-to-fg-9: color-mix(
2452
+ in srgb,
2453
+ var(--ks-color-informative-inverted) var(--ks-brand-color-scale-9, 90%),
2454
+ var(--ks-color-fg-inverted)
2455
+ );
2456
+ --ks-color-notice-alpha-1: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-1, 10%), transparent);
2457
+ --ks-color-notice-alpha-2: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-2, 20%), transparent);
2458
+ --ks-color-notice-alpha-3: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-3, 30%), transparent);
2459
+ --ks-color-notice-alpha-4: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-4, 40%), transparent);
2460
+ --ks-color-notice-alpha-5: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-5, 50%), transparent);
2461
+ --ks-color-notice-alpha-6: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-6, 60%), transparent);
2462
+ --ks-color-notice-alpha-7: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-7, 70%), transparent);
2463
+ --ks-color-notice-alpha-8: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-8, 80%), transparent);
2464
+ --ks-color-notice-alpha-9: color-mix(in srgb, var(--ks-color-notice) var(--ks-brand-color-scale-9, 90%), transparent);
2465
+ --ks-color-notice-inverted-alpha-1: color-mix(
2466
+ in srgb,
2467
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-1, 10%),
2468
+ transparent
2469
+ );
2470
+ --ks-color-notice-inverted-alpha-2: color-mix(
2471
+ in srgb,
2472
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-2, 20%),
2473
+ transparent
2474
+ );
2475
+ --ks-color-notice-inverted-alpha-3: color-mix(
2476
+ in srgb,
2477
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-3, 30%),
2478
+ transparent
2479
+ );
2480
+ --ks-color-notice-inverted-alpha-4: color-mix(
2481
+ in srgb,
2482
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-4, 40%),
2483
+ transparent
2484
+ );
2485
+ --ks-color-notice-inverted-alpha-5: color-mix(
2486
+ in srgb,
2487
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-5, 50%),
2488
+ transparent
2489
+ );
2490
+ --ks-color-notice-inverted-alpha-6: color-mix(
2491
+ in srgb,
2492
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-6, 60%),
2493
+ transparent
2494
+ );
2495
+ --ks-color-notice-inverted-alpha-7: color-mix(
2496
+ in srgb,
2497
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-7, 70%),
2498
+ transparent
2499
+ );
2500
+ --ks-color-notice-inverted-alpha-8: color-mix(
2501
+ in srgb,
2502
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-8, 80%),
2503
+ transparent
2504
+ );
2505
+ --ks-color-notice-inverted-alpha-9: color-mix(
2506
+ in srgb,
2507
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-9, 90%),
2508
+ transparent
2509
+ );
2510
+ --ks-color-notice-to-bg-1: color-mix(
2511
+ in srgb,
2512
+ var(--ks-color-notice) var(--ks-brand-color-scale-1, 10%),
2513
+ var(--ks-color-bg)
2514
+ );
2515
+ --ks-color-notice-to-bg-2: color-mix(
2516
+ in srgb,
2517
+ var(--ks-color-notice) var(--ks-brand-color-scale-2, 20%),
2518
+ var(--ks-color-bg)
2519
+ );
2520
+ --ks-color-notice-to-bg-3: color-mix(
2521
+ in srgb,
2522
+ var(--ks-color-notice) var(--ks-brand-color-scale-3, 30%),
2523
+ var(--ks-color-bg)
2524
+ );
2525
+ --ks-color-notice-to-bg-4: color-mix(
2526
+ in srgb,
2527
+ var(--ks-color-notice) var(--ks-brand-color-scale-4, 40%),
2528
+ var(--ks-color-bg)
2529
+ );
2530
+ --ks-color-notice-to-bg-5: color-mix(
2531
+ in srgb,
2532
+ var(--ks-color-notice) var(--ks-brand-color-scale-5, 50%),
2533
+ var(--ks-color-bg)
2534
+ );
2535
+ --ks-color-notice-to-bg-6: color-mix(
2536
+ in srgb,
2537
+ var(--ks-color-notice) var(--ks-brand-color-scale-6, 60%),
2538
+ var(--ks-color-bg)
2539
+ );
2540
+ --ks-color-notice-to-bg-7: color-mix(
2541
+ in srgb,
2542
+ var(--ks-color-notice) var(--ks-brand-color-scale-7, 70%),
2543
+ var(--ks-color-bg)
2544
+ );
2545
+ --ks-color-notice-to-bg-8: color-mix(
2546
+ in srgb,
2547
+ var(--ks-color-notice) var(--ks-brand-color-scale-8, 80%),
2548
+ var(--ks-color-bg)
2549
+ );
2550
+ --ks-color-notice-to-bg-9: color-mix(
2551
+ in srgb,
2552
+ var(--ks-color-notice) var(--ks-brand-color-scale-9, 90%),
2553
+ var(--ks-color-bg)
2554
+ );
2555
+ --ks-color-notice-inverted-to-bg-1: color-mix(
2556
+ in srgb,
2557
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-1, 10%),
2558
+ var(--ks-color-bg-inverted)
2559
+ );
2560
+ --ks-color-notice-inverted-to-bg-2: color-mix(
2561
+ in srgb,
2562
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-2, 20%),
2563
+ var(--ks-color-bg-inverted)
2564
+ );
2565
+ --ks-color-notice-inverted-to-bg-3: color-mix(
2566
+ in srgb,
2567
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-3, 30%),
2568
+ var(--ks-color-bg-inverted)
2569
+ );
2570
+ --ks-color-notice-inverted-to-bg-4: color-mix(
2571
+ in srgb,
2572
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-4, 40%),
2573
+ var(--ks-color-bg-inverted)
2574
+ );
2575
+ --ks-color-notice-inverted-to-bg-5: color-mix(
2576
+ in srgb,
2577
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-5, 50%),
2578
+ var(--ks-color-bg-inverted)
2579
+ );
2580
+ --ks-color-notice-inverted-to-bg-6: color-mix(
2581
+ in srgb,
2582
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-6, 60%),
2583
+ var(--ks-color-bg-inverted)
2584
+ );
2585
+ --ks-color-notice-inverted-to-bg-7: color-mix(
2586
+ in srgb,
2587
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-7, 70%),
2588
+ var(--ks-color-bg-inverted)
2589
+ );
2590
+ --ks-color-notice-inverted-to-bg-8: color-mix(
2591
+ in srgb,
2592
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-8, 80%),
2593
+ var(--ks-color-bg-inverted)
2594
+ );
2595
+ --ks-color-notice-inverted-to-bg-9: color-mix(
2596
+ in srgb,
2597
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-9, 90%),
2598
+ var(--ks-color-bg-inverted)
2599
+ );
2600
+ --ks-color-notice-to-fg-1: color-mix(
2601
+ in srgb,
2602
+ var(--ks-color-notice) var(--ks-brand-color-scale-1, 10%),
2603
+ var(--ks-color-fg)
2604
+ );
2605
+ --ks-color-notice-to-fg-2: color-mix(
2606
+ in srgb,
2607
+ var(--ks-color-notice) var(--ks-brand-color-scale-2, 20%),
2608
+ var(--ks-color-fg)
2609
+ );
2610
+ --ks-color-notice-to-fg-3: color-mix(
2611
+ in srgb,
2612
+ var(--ks-color-notice) var(--ks-brand-color-scale-3, 30%),
2613
+ var(--ks-color-fg)
2614
+ );
2615
+ --ks-color-notice-to-fg-4: color-mix(
2616
+ in srgb,
2617
+ var(--ks-color-notice) var(--ks-brand-color-scale-4, 40%),
2618
+ var(--ks-color-fg)
2619
+ );
2620
+ --ks-color-notice-to-fg-5: color-mix(
2621
+ in srgb,
2622
+ var(--ks-color-notice) var(--ks-brand-color-scale-5, 50%),
2623
+ var(--ks-color-fg)
2624
+ );
2625
+ --ks-color-notice-to-fg-6: color-mix(
2626
+ in srgb,
2627
+ var(--ks-color-notice) var(--ks-brand-color-scale-6, 60%),
2628
+ var(--ks-color-fg)
2629
+ );
2630
+ --ks-color-notice-to-fg-7: color-mix(
2631
+ in srgb,
2632
+ var(--ks-color-notice) var(--ks-brand-color-scale-7, 70%),
2633
+ var(--ks-color-fg)
2634
+ );
2635
+ --ks-color-notice-to-fg-8: color-mix(
2636
+ in srgb,
2637
+ var(--ks-color-notice) var(--ks-brand-color-scale-8, 80%),
2638
+ var(--ks-color-fg)
2639
+ );
2640
+ --ks-color-notice-to-fg-9: color-mix(
2641
+ in srgb,
2642
+ var(--ks-color-notice) var(--ks-brand-color-scale-9, 90%),
2643
+ var(--ks-color-fg)
2644
+ );
2645
+ --ks-color-notice-inverted-to-fg-1: color-mix(
2646
+ in srgb,
2647
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-1, 10%),
2648
+ var(--ks-color-fg-inverted)
2649
+ );
2650
+ --ks-color-notice-inverted-to-fg-2: color-mix(
2651
+ in srgb,
2652
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-2, 20%),
2653
+ var(--ks-color-fg-inverted)
2654
+ );
2655
+ --ks-color-notice-inverted-to-fg-3: color-mix(
2656
+ in srgb,
2657
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-3, 30%),
2658
+ var(--ks-color-fg-inverted)
2659
+ );
2660
+ --ks-color-notice-inverted-to-fg-4: color-mix(
2661
+ in srgb,
2662
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-4, 40%),
2663
+ var(--ks-color-fg-inverted)
2664
+ );
2665
+ --ks-color-notice-inverted-to-fg-5: color-mix(
2666
+ in srgb,
2667
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-5, 50%),
2668
+ var(--ks-color-fg-inverted)
2669
+ );
2670
+ --ks-color-notice-inverted-to-fg-6: color-mix(
2671
+ in srgb,
2672
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-6, 60%),
2673
+ var(--ks-color-fg-inverted)
2674
+ );
2675
+ --ks-color-notice-inverted-to-fg-7: color-mix(
2676
+ in srgb,
2677
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-7, 70%),
2678
+ var(--ks-color-fg-inverted)
2679
+ );
2680
+ --ks-color-notice-inverted-to-fg-8: color-mix(
2681
+ in srgb,
2682
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-8, 80%),
2683
+ var(--ks-color-fg-inverted)
2684
+ );
2685
+ --ks-color-notice-inverted-to-fg-9: color-mix(
2686
+ in srgb,
2687
+ var(--ks-color-notice-inverted) var(--ks-brand-color-scale-9, 90%),
2688
+ var(--ks-color-fg-inverted)
2689
+ );
2690
+ }
2691
+
2692
+ :root,
2693
+ [ks-inverted=true],
2694
+ [ks-inverted=false],
2695
+ [ks-theme] {
2696
+ --ks-font-family-display: var(--ks-brand-font-family-display);
2697
+ --ks-font-family-copy: var(--ks-brand-font-family-copy);
2698
+ --ks-font-family-interface: var(--ks-brand-font-family-interface);
2699
+ --ks-font-family-mono: var(--ks-brand-font-family-mono);
2700
+ --ks-font-weight-light: var(--ks-brand-font-weight-light);
2701
+ --ks-font-weight-regular: var(--ks-brand-font-weight-regular);
2702
+ --ks-font-weight-medium: var(--ks-brand-font-weight-medium);
2703
+ --ks-font-weight-semi-bold: var(--ks-brand-font-weight-semi-bold);
2704
+ --ks-font-weight-bold: var(--ks-brand-font-weight-bold);
2705
+ --ks-line-height-display-base-factor: 1.15;
2706
+ --ks-line-height-display-shrink-factor: 1;
2707
+ --ks-line-height-display-grow-factor: 1;
2708
+ --ks-line-height-display-xxs: calc(
2709
+ var(--ks-line-height-display-xs) * calc(var(--ks-line-height-display-shrink-factor) * 1)
2710
+ );
2711
+ --ks-line-height-display-xs: calc(
2712
+ var(--ks-line-height-display-s) * calc(var(--ks-line-height-display-shrink-factor) * 1)
2713
+ );
2714
+ --ks-line-height-display-s: calc(
2715
+ var(--ks-line-height-display-m) * calc(var(--ks-line-height-display-shrink-factor) * 1)
2716
+ );
2717
+ --ks-line-height-display-m: var(--ks-line-height-display-base-factor);
2718
+ --ks-line-height-display-l: calc(var(--ks-line-height-display-m) * var(--ks-line-height-display-grow-factor));
2719
+ --ks-line-height-display-xl: calc(var(--ks-line-height-display-l) * var(--ks-line-height-display-grow-factor));
2720
+ --ks-line-height-display-xxl: calc(var(--ks-line-height-display-xl) * var(--ks-line-height-display-grow-factor));
2721
+ --ks-line-height-copy-base-factor: 1.5;
2722
+ --ks-line-height-copy-shrink-factor: 1;
2723
+ --ks-line-height-copy-grow-factor: 1;
2724
+ --ks-line-height-copy-xxs: calc(var(--ks-line-height-copy-xs) * calc(var(--ks-line-height-copy-shrink-factor) * 1));
2725
+ --ks-line-height-copy-xs: calc(var(--ks-line-height-copy-s) * calc(var(--ks-line-height-copy-shrink-factor) * 1));
2726
+ --ks-line-height-copy-s: calc(var(--ks-line-height-copy-m) * calc(var(--ks-line-height-copy-shrink-factor) * 1));
2727
+ --ks-line-height-copy-m: var(--ks-line-height-copy-base-factor);
2728
+ --ks-line-height-copy-l: calc(var(--ks-line-height-copy-m) * var(--ks-line-height-copy-grow-factor));
2729
+ --ks-line-height-copy-xl: calc(var(--ks-line-height-copy-l) * var(--ks-line-height-copy-grow-factor));
2730
+ --ks-line-height-copy-xxl: calc(var(--ks-line-height-copy-xl) * var(--ks-line-height-copy-grow-factor));
2731
+ --ks-line-height-interface-base-factor: 1.5;
2732
+ --ks-line-height-interface-shrink-factor: 1;
2733
+ --ks-line-height-interface-grow-factor: 1;
2734
+ --ks-line-height-interface-xxs: calc(
2735
+ var(--ks-line-height-interface-xs) * calc(var(--ks-line-height-interface-shrink-factor) * 1)
2736
+ );
2737
+ --ks-line-height-interface-xs: calc(
2738
+ var(--ks-line-height-interface-s) * calc(var(--ks-line-height-interface-shrink-factor) * 1)
2739
+ );
2740
+ --ks-line-height-interface-s: calc(
2741
+ var(--ks-line-height-interface-m) * calc(var(--ks-line-height-interface-shrink-factor) * 1)
2742
+ );
2743
+ --ks-line-height-interface-m: var(--ks-line-height-interface-base-factor);
2744
+ --ks-line-height-interface-l: calc(var(--ks-line-height-interface-m) * var(--ks-line-height-interface-grow-factor));
2745
+ --ks-line-height-interface-xl: calc(var(--ks-line-height-interface-l) * var(--ks-line-height-interface-grow-factor));
2746
+ --ks-line-height-interface-xxl: calc(
2747
+ var(--ks-line-height-interface-xl) * var(--ks-line-height-interface-grow-factor)
2748
+ );
2749
+ --ks-line-height-mono-base-factor: 1.5;
2750
+ --ks-line-height-mono-shrink-factor: 1;
2751
+ --ks-line-height-mono-grow-factor: 1;
2752
+ --ks-line-height-mono-xxs: calc(var(--ks-line-height-mono-xs) * calc(var(--ks-line-height-mono-shrink-factor) * 1));
2753
+ --ks-line-height-mono-xs: calc(var(--ks-line-height-mono-s) * calc(var(--ks-line-height-mono-shrink-factor) * 1));
2754
+ --ks-line-height-mono-s: calc(var(--ks-line-height-mono-m) * calc(var(--ks-line-height-mono-shrink-factor) * 1));
2755
+ --ks-line-height-mono-m: var(--ks-line-height-mono-base-factor);
2756
+ --ks-line-height-mono-l: calc(var(--ks-line-height-mono-m) * var(--ks-line-height-mono-grow-factor));
2757
+ --ks-line-height-mono-xl: calc(var(--ks-line-height-mono-l) * var(--ks-line-height-mono-grow-factor));
2758
+ --ks-line-height-mono-xxl: calc(var(--ks-line-height-mono-xl) * var(--ks-line-height-mono-grow-factor));
2759
+ --ks-font-display-xxs: var(--ks-font-size-display-xxs) / var(--ks-line-height-display-xxs)
2760
+ var(--ks-font-family-display);
2761
+ --ks-font-display-xs: var(--ks-font-size-display-xs) / var(--ks-line-height-display-xs) var(--ks-font-family-display);
2762
+ --ks-font-display-s: var(--ks-font-size-display-s) / var(--ks-line-height-display-s) var(--ks-font-family-display);
2763
+ --ks-font-display-m: var(--ks-font-size-display-m) / var(--ks-line-height-display-m) var(--ks-font-family-display);
2764
+ --ks-font-display-l: var(--ks-font-size-display-l) / var(--ks-line-height-display-l) var(--ks-font-family-display);
2765
+ --ks-font-display-xl: var(--ks-font-size-display-xl) / var(--ks-line-height-display-xl) var(--ks-font-family-display);
2766
+ --ks-font-display-xxl: var(--ks-font-size-display-xxl) / var(--ks-line-height-display-xxl)
2767
+ var(--ks-font-family-display);
2768
+ --ks-font-copy-xxs: var(--ks-font-size-copy-xxs) / var(--ks-line-height-copy-xxs) var(--ks-font-family-copy);
2769
+ --ks-font-copy-xs: var(--ks-font-size-copy-xs) / var(--ks-line-height-copy-xs) var(--ks-font-family-copy);
2770
+ --ks-font-copy-s: var(--ks-font-size-copy-s) / var(--ks-line-height-copy-s) var(--ks-font-family-copy);
2771
+ --ks-font-copy-m: var(--ks-font-size-copy-m) / var(--ks-line-height-copy-m) var(--ks-font-family-copy);
2772
+ --ks-font-copy-l: var(--ks-font-size-copy-l) / var(--ks-line-height-copy-l) var(--ks-font-family-copy);
2773
+ --ks-font-copy-xl: var(--ks-font-size-copy-xl) / var(--ks-line-height-copy-xl) var(--ks-font-family-copy);
2774
+ --ks-font-copy-xxl: var(--ks-font-size-copy-xxl) / var(--ks-line-height-copy-xxl) var(--ks-font-family-copy);
2775
+ --ks-font-interface-xxs: var(--ks-font-size-interface-xxs) / var(--ks-line-height-interface-xxs)
2776
+ var(--ks-font-family-interface);
2777
+ --ks-font-interface-xs: var(--ks-font-size-interface-xs) / var(--ks-line-height-interface-xs)
2778
+ var(--ks-font-family-interface);
2779
+ --ks-font-interface-s: var(--ks-font-size-interface-s) / var(--ks-line-height-interface-s)
2780
+ var(--ks-font-family-interface);
2781
+ --ks-font-interface-m: var(--ks-font-size-interface-m) / var(--ks-line-height-interface-m)
2782
+ var(--ks-font-family-interface);
2783
+ --ks-font-interface-l: var(--ks-font-size-interface-l) / var(--ks-line-height-interface-l)
2784
+ var(--ks-font-family-interface);
2785
+ --ks-font-interface-xl: var(--ks-font-size-interface-xl) / var(--ks-line-height-interface-xl)
2786
+ var(--ks-font-family-interface);
2787
+ --ks-font-interface-xxl: var(--ks-font-size-interface-xxl) / var(--ks-line-height-interface-xxl)
2788
+ var(--ks-font-family-interface);
2789
+ --ks-font-mono-xxs: var(--ks-font-size-mono-xxs) / var(--ks-line-height-mono-xxs) var(--ks-font-family-mono);
2790
+ --ks-font-mono-xs: var(--ks-font-size-mono-xs) / var(--ks-line-height-mono-xs) var(--ks-font-family-mono);
2791
+ --ks-font-mono-s: var(--ks-font-size-mono-s) / var(--ks-line-height-mono-s) var(--ks-font-family-mono);
2792
+ --ks-font-mono-m: var(--ks-font-size-mono-m) / var(--ks-line-height-mono-m) var(--ks-font-family-mono);
2793
+ --ks-font-mono-l: var(--ks-font-size-mono-l) / var(--ks-line-height-mono-l) var(--ks-font-family-mono);
2794
+ --ks-font-mono-xl: var(--ks-font-size-mono-xl) / var(--ks-line-height-mono-xl) var(--ks-font-family-mono);
2795
+ --ks-font-mono-xxl: var(--ks-font-size-mono-xxl) / var(--ks-line-height-mono-xxl) var(--ks-font-family-mono);
2796
+ }
2797
+
2798
+ :root,
2799
+ [ks-theme],
2800
+ [ks-inverted=false],
2801
+ [ks-inverted=true] {
2802
+ --font-size-display-xxs-bp-factor: calc(1 * var(--font-size-display-bp-factor));
2803
+ --font-size-display-xs-bp-factor: calc(var(--font-size-display-xxs-bp-factor) * var(--font-size-display-bp-factor));
2804
+ --font-size-display-s-bp-factor: calc(var(--font-size-display-xs-bp-factor) * var(--font-size-display-bp-factor));
2805
+ --font-size-display-m-bp-factor: calc(var(--font-size-display-s-bp-factor) * var(--font-size-display-bp-factor));
2806
+ --font-size-display-l-bp-factor: calc(var(--font-size-display-m-bp-factor) * var(--font-size-display-bp-factor));
2807
+ --font-size-display-xl-bp-factor: calc(var(--font-size-display-l-bp-factor) * var(--font-size-display-bp-factor));
2808
+ --font-size-display-xxl-bp-factor: calc(var(--font-size-display-xl-bp-factor) * var(--font-size-display-bp-factor));
2809
+ --font-size-copy-xxs-bp-factor: calc(1 * var(--font-size-copy-bp-factor));
2810
+ --font-size-copy-xs-bp-factor: calc(var(--font-size-copy-xxs-bp-factor) * var(--font-size-copy-bp-factor));
2811
+ --font-size-copy-s-bp-factor: calc(var(--font-size-copy-xs-bp-factor) * var(--font-size-copy-bp-factor));
2812
+ --font-size-copy-m-bp-factor: calc(var(--font-size-copy-s-bp-factor) * var(--font-size-copy-bp-factor));
2813
+ --font-size-copy-l-bp-factor: calc(var(--font-size-copy-m-bp-factor) * var(--font-size-copy-bp-factor));
2814
+ --font-size-copy-xl-bp-factor: calc(var(--font-size-copy-l-bp-factor) * var(--font-size-copy-bp-factor));
2815
+ --font-size-copy-xxl-bp-factor: calc(var(--font-size-copy-xl-bp-factor) * var(--font-size-copy-bp-factor));
2816
+ --font-size-interface-xxs-bp-factor: calc(1 * var(--font-size-interface-bp-factor));
2817
+ --font-size-interface-xs-bp-factor: calc(
2818
+ var(--font-size-interface-xxs-bp-factor) * var(--font-size-interface-bp-factor)
2819
+ );
2820
+ --font-size-interface-s-bp-factor: calc(
2821
+ var(--font-size-interface-xs-bp-factor) * var(--font-size-interface-bp-factor)
2822
+ );
2823
+ --font-size-interface-m-bp-factor: calc(
2824
+ var(--font-size-interface-s-bp-factor) * var(--font-size-interface-bp-factor)
2825
+ );
2826
+ --font-size-interface-l-bp-factor: calc(
2827
+ var(--font-size-interface-m-bp-factor) * var(--font-size-interface-bp-factor)
2828
+ );
2829
+ --font-size-interface-xl-bp-factor: calc(
2830
+ var(--font-size-interface-l-bp-factor) * var(--font-size-interface-bp-factor)
2831
+ );
2832
+ --font-size-interface-xxl-bp-factor: calc(
2833
+ var(--font-size-interface-xl-bp-factor) * var(--font-size-interface-bp-factor)
2834
+ );
2835
+ --font-size-mono-xxs-bp-factor: calc(1 * var(--font-size-mono-bp-factor));
2836
+ --font-size-mono-xs-bp-factor: calc(var(--font-size-mono-xxs-bp-factor) * var(--font-size-mono-bp-factor));
2837
+ --font-size-mono-s-bp-factor: calc(var(--font-size-mono-xs-bp-factor) * var(--font-size-mono-bp-factor));
2838
+ --font-size-mono-m-bp-factor: calc(var(--font-size-mono-s-bp-factor) * var(--font-size-mono-bp-factor));
2839
+ --font-size-mono-l-bp-factor: calc(var(--font-size-mono-m-bp-factor) * var(--font-size-mono-bp-factor));
2840
+ --font-size-mono-xl-bp-factor: calc(var(--font-size-mono-l-bp-factor) * var(--font-size-mono-bp-factor));
2841
+ --font-size-mono-xxl-bp-factor: calc(var(--font-size-mono-xl-bp-factor) * var(--font-size-mono-bp-factor));
2842
+ }
2843
+
2844
+ :root,
2845
+ [ks-theme],
2846
+ [ks-inverted=false],
2847
+ [ks-inverted=true] {
2848
+ --ks-font-size-display-xxs-base: calc(
2849
+ var(--ks-font-size-display-xs-base) * calc(var(--font-size-display-shrink-factor) * 1)
2850
+ );
2851
+ --ks-font-size-display-xs-base: calc(
2852
+ var(--ks-font-size-display-s-base) * calc(var(--font-size-display-shrink-factor) * 1)
2853
+ );
2854
+ --ks-font-size-display-s-base: calc(
2855
+ var(--ks-font-size-display-m-base) * calc(var(--font-size-display-shrink-factor) * 1)
2856
+ );
2857
+ --ks-font-size-display-m-base: var(--ks-brand-font-size-display-base);
2858
+ --ks-font-size-display-l-base: calc(var(--ks-font-size-display-m-base) * var(--font-size-display-grow-factor));
2859
+ --ks-font-size-display-xl-base: calc(var(--ks-font-size-display-l-base) * var(--font-size-display-grow-factor));
2860
+ --ks-font-size-display-xxl-base: calc(var(--ks-font-size-display-xl-base) * var(--font-size-display-grow-factor));
2861
+ --ks-font-size-copy-xxs-base: calc(var(--ks-font-size-copy-xs-base) * calc(var(--font-size-copy-shrink-factor) * 1));
2862
+ --ks-font-size-copy-xs-base: calc(var(--ks-font-size-copy-s-base) * calc(var(--font-size-copy-shrink-factor) * 1));
2863
+ --ks-font-size-copy-s-base: calc(var(--ks-font-size-copy-m-base) * calc(var(--font-size-copy-shrink-factor) * 1));
2864
+ --ks-font-size-copy-m-base: var(--ks-brand-font-size-copy-base);
2865
+ --ks-font-size-copy-l-base: calc(var(--ks-font-size-copy-m-base) * var(--font-size-copy-grow-factor));
2866
+ --ks-font-size-copy-xl-base: calc(var(--ks-font-size-copy-l-base) * var(--font-size-copy-grow-factor));
2867
+ --ks-font-size-copy-xxl-base: calc(var(--ks-font-size-copy-xl-base) * var(--font-size-copy-grow-factor));
2868
+ --ks-font-size-interface-xxs-base: calc(
2869
+ var(--ks-font-size-interface-xs-base) * calc(var(--font-size-interface-shrink-factor) * 1)
2870
+ );
2871
+ --ks-font-size-interface-xs-base: calc(
2872
+ var(--ks-font-size-interface-s-base) * calc(var(--font-size-interface-shrink-factor) * 1)
2873
+ );
2874
+ --ks-font-size-interface-s-base: calc(
2875
+ var(--ks-font-size-interface-m-base) * calc(var(--font-size-interface-shrink-factor) * 1)
2876
+ );
2877
+ --ks-font-size-interface-m-base: var(--ks-brand-font-size-interface-base);
2878
+ --ks-font-size-interface-l-base: calc(var(--ks-font-size-interface-m-base) * var(--font-size-interface-grow-factor));
2879
+ --ks-font-size-interface-xl-base: calc(var(--ks-font-size-interface-l-base) * var(--font-size-interface-grow-factor));
2880
+ --ks-font-size-interface-xxl-base: calc(
2881
+ var(--ks-font-size-interface-xl-base) * var(--font-size-interface-grow-factor)
2882
+ );
2883
+ --ks-font-size-mono-xxs-base: calc(var(--ks-font-size-mono-xs-base) * calc(var(--font-size-mono-shrink-factor) * 1));
2884
+ --ks-font-size-mono-xs-base: calc(var(--ks-font-size-mono-s-base) * calc(var(--font-size-mono-shrink-factor) * 1));
2885
+ --ks-font-size-mono-s-base: calc(var(--ks-font-size-mono-m-base) * calc(var(--font-size-mono-shrink-factor) * 1));
2886
+ --ks-font-size-mono-m-base: var(--ks-brand-font-size-mono-base);
2887
+ --ks-font-size-mono-l-base: calc(var(--ks-font-size-mono-m-base) * var(--font-size-mono-grow-factor));
2888
+ --ks-font-size-mono-xl-base: calc(var(--ks-font-size-mono-l-base) * var(--font-size-mono-grow-factor));
2889
+ --ks-font-size-mono-xxl-base: calc(var(--ks-font-size-mono-xl-base) * var(--font-size-mono-grow-factor));
2890
+ }
2891
+
2892
+ :root,
2893
+ [ks-theme],
2894
+ [ks-inverted=false],
2895
+ [ks-inverted=true] {
2896
+ --ks-font-size-display-xxs-bp-factor-phone: calc(1 * var(--font-size-display-xxs-bp-factor));
2897
+ --ks-font-size-display-xxs-bp-factor-tablet: calc(
2898
+ var(--ks-font-size-display-xxs-bp-factor-phone) * var(--font-size-display-xxs-bp-factor)
2899
+ );
2900
+ --ks-font-size-display-xxs-bp-factor-laptop: calc(
2901
+ var(--ks-font-size-display-xxs-bp-factor-tablet) * var(--font-size-display-xxs-bp-factor)
2902
+ );
2903
+ --ks-font-size-display-xxs-bp-factor-desktop: calc(
2904
+ var(--ks-font-size-display-xxs-bp-factor-laptop) * var(--font-size-display-xxs-bp-factor)
2905
+ );
2906
+ --ks-font-size-display-xs-bp-factor-phone: calc(1 * var(--font-size-display-xs-bp-factor));
2907
+ --ks-font-size-display-xs-bp-factor-tablet: calc(
2908
+ var(--ks-font-size-display-xs-bp-factor-phone) * var(--font-size-display-xs-bp-factor)
2909
+ );
2910
+ --ks-font-size-display-xs-bp-factor-laptop: calc(
2911
+ var(--ks-font-size-display-xs-bp-factor-tablet) * var(--font-size-display-xs-bp-factor)
2912
+ );
2913
+ --ks-font-size-display-xs-bp-factor-desktop: calc(
2914
+ var(--ks-font-size-display-xs-bp-factor-laptop) * var(--font-size-display-xs-bp-factor)
2915
+ );
2916
+ --ks-font-size-display-s-bp-factor-phone: calc(1 * var(--font-size-display-s-bp-factor));
2917
+ --ks-font-size-display-s-bp-factor-tablet: calc(
2918
+ var(--ks-font-size-display-s-bp-factor-phone) * var(--font-size-display-s-bp-factor)
2919
+ );
2920
+ --ks-font-size-display-s-bp-factor-laptop: calc(
2921
+ var(--ks-font-size-display-s-bp-factor-tablet) * var(--font-size-display-s-bp-factor)
2922
+ );
2923
+ --ks-font-size-display-s-bp-factor-desktop: calc(
2924
+ var(--ks-font-size-display-s-bp-factor-laptop) * var(--font-size-display-s-bp-factor)
2925
+ );
2926
+ --ks-font-size-display-m-bp-factor-phone: calc(1 * var(--font-size-display-m-bp-factor));
2927
+ --ks-font-size-display-m-bp-factor-tablet: calc(
2928
+ var(--ks-font-size-display-m-bp-factor-phone) * var(--font-size-display-m-bp-factor)
2929
+ );
2930
+ --ks-font-size-display-m-bp-factor-laptop: calc(
2931
+ var(--ks-font-size-display-m-bp-factor-tablet) * var(--font-size-display-m-bp-factor)
2932
+ );
2933
+ --ks-font-size-display-m-bp-factor-desktop: calc(
2934
+ var(--ks-font-size-display-m-bp-factor-laptop) * var(--font-size-display-m-bp-factor)
2935
+ );
2936
+ --ks-font-size-display-l-bp-factor-phone: calc(1 * var(--font-size-display-l-bp-factor));
2937
+ --ks-font-size-display-l-bp-factor-tablet: calc(
2938
+ var(--ks-font-size-display-l-bp-factor-phone) * var(--font-size-display-l-bp-factor)
2939
+ );
2940
+ --ks-font-size-display-l-bp-factor-laptop: calc(
2941
+ var(--ks-font-size-display-l-bp-factor-tablet) * var(--font-size-display-l-bp-factor)
2942
+ );
2943
+ --ks-font-size-display-l-bp-factor-desktop: calc(
2944
+ var(--ks-font-size-display-l-bp-factor-laptop) * var(--font-size-display-l-bp-factor)
2945
+ );
2946
+ --ks-font-size-display-xl-bp-factor-phone: calc(1 * var(--font-size-display-xl-bp-factor));
2947
+ --ks-font-size-display-xl-bp-factor-tablet: calc(
2948
+ var(--ks-font-size-display-xl-bp-factor-phone) * var(--font-size-display-xl-bp-factor)
2949
+ );
2950
+ --ks-font-size-display-xl-bp-factor-laptop: calc(
2951
+ var(--ks-font-size-display-xl-bp-factor-tablet) * var(--font-size-display-xl-bp-factor)
2952
+ );
2953
+ --ks-font-size-display-xl-bp-factor-desktop: calc(
2954
+ var(--ks-font-size-display-xl-bp-factor-laptop) * var(--font-size-display-xl-bp-factor)
2955
+ );
2956
+ --ks-font-size-display-xxl-bp-factor-phone: calc(1 * var(--font-size-display-xxl-bp-factor));
2957
+ --ks-font-size-display-xxl-bp-factor-tablet: calc(
2958
+ var(--ks-font-size-display-xxl-bp-factor-phone) * var(--font-size-display-xxl-bp-factor)
2959
+ );
2960
+ --ks-font-size-display-xxl-bp-factor-laptop: calc(
2961
+ var(--ks-font-size-display-xxl-bp-factor-tablet) * var(--font-size-display-xxl-bp-factor)
2962
+ );
2963
+ --ks-font-size-display-xxl-bp-factor-desktop: calc(
2964
+ var(--ks-font-size-display-xxl-bp-factor-laptop) * var(--font-size-display-xxl-bp-factor)
2965
+ );
2966
+ --ks-font-size-copy-xxs-bp-factor-phone: calc(1 * var(--font-size-copy-xxs-bp-factor));
2967
+ --ks-font-size-copy-xxs-bp-factor-tablet: calc(
2968
+ var(--ks-font-size-copy-xxs-bp-factor-phone) * var(--font-size-copy-xxs-bp-factor)
2969
+ );
2970
+ --ks-font-size-copy-xxs-bp-factor-laptop: calc(
2971
+ var(--ks-font-size-copy-xxs-bp-factor-tablet) * var(--font-size-copy-xxs-bp-factor)
2972
+ );
2973
+ --ks-font-size-copy-xxs-bp-factor-desktop: calc(
2974
+ var(--ks-font-size-copy-xxs-bp-factor-laptop) * var(--font-size-copy-xxs-bp-factor)
2975
+ );
2976
+ --ks-font-size-copy-xs-bp-factor-phone: calc(1 * var(--font-size-copy-xs-bp-factor));
2977
+ --ks-font-size-copy-xs-bp-factor-tablet: calc(
2978
+ var(--ks-font-size-copy-xs-bp-factor-phone) * var(--font-size-copy-xs-bp-factor)
2979
+ );
2980
+ --ks-font-size-copy-xs-bp-factor-laptop: calc(
2981
+ var(--ks-font-size-copy-xs-bp-factor-tablet) * var(--font-size-copy-xs-bp-factor)
2982
+ );
2983
+ --ks-font-size-copy-xs-bp-factor-desktop: calc(
2984
+ var(--ks-font-size-copy-xs-bp-factor-laptop) * var(--font-size-copy-xs-bp-factor)
2985
+ );
2986
+ --ks-font-size-copy-s-bp-factor-phone: calc(1 * var(--font-size-copy-s-bp-factor));
2987
+ --ks-font-size-copy-s-bp-factor-tablet: calc(
2988
+ var(--ks-font-size-copy-s-bp-factor-phone) * var(--font-size-copy-s-bp-factor)
2989
+ );
2990
+ --ks-font-size-copy-s-bp-factor-laptop: calc(
2991
+ var(--ks-font-size-copy-s-bp-factor-tablet) * var(--font-size-copy-s-bp-factor)
2992
+ );
2993
+ --ks-font-size-copy-s-bp-factor-desktop: calc(
2994
+ var(--ks-font-size-copy-s-bp-factor-laptop) * var(--font-size-copy-s-bp-factor)
2995
+ );
2996
+ --ks-font-size-copy-m-bp-factor-phone: calc(1 * var(--font-size-copy-m-bp-factor));
2997
+ --ks-font-size-copy-m-bp-factor-tablet: calc(
2998
+ var(--ks-font-size-copy-m-bp-factor-phone) * var(--font-size-copy-m-bp-factor)
2999
+ );
3000
+ --ks-font-size-copy-m-bp-factor-laptop: calc(
3001
+ var(--ks-font-size-copy-m-bp-factor-tablet) * var(--font-size-copy-m-bp-factor)
3002
+ );
3003
+ --ks-font-size-copy-m-bp-factor-desktop: calc(
3004
+ var(--ks-font-size-copy-m-bp-factor-laptop) * var(--font-size-copy-m-bp-factor)
3005
+ );
3006
+ --ks-font-size-copy-l-bp-factor-phone: calc(1 * var(--font-size-copy-l-bp-factor));
3007
+ --ks-font-size-copy-l-bp-factor-tablet: calc(
3008
+ var(--ks-font-size-copy-l-bp-factor-phone) * var(--font-size-copy-l-bp-factor)
3009
+ );
3010
+ --ks-font-size-copy-l-bp-factor-laptop: calc(
3011
+ var(--ks-font-size-copy-l-bp-factor-tablet) * var(--font-size-copy-l-bp-factor)
3012
+ );
3013
+ --ks-font-size-copy-l-bp-factor-desktop: calc(
3014
+ var(--ks-font-size-copy-l-bp-factor-laptop) * var(--font-size-copy-l-bp-factor)
3015
+ );
3016
+ --ks-font-size-copy-xl-bp-factor-phone: calc(1 * var(--font-size-copy-xl-bp-factor));
3017
+ --ks-font-size-copy-xl-bp-factor-tablet: calc(
3018
+ var(--ks-font-size-copy-xl-bp-factor-phone) * var(--font-size-copy-xl-bp-factor)
3019
+ );
3020
+ --ks-font-size-copy-xl-bp-factor-laptop: calc(
3021
+ var(--ks-font-size-copy-xl-bp-factor-tablet) * var(--font-size-copy-xl-bp-factor)
3022
+ );
3023
+ --ks-font-size-copy-xl-bp-factor-desktop: calc(
3024
+ var(--ks-font-size-copy-xl-bp-factor-laptop) * var(--font-size-copy-xl-bp-factor)
3025
+ );
3026
+ --ks-font-size-copy-xxl-bp-factor-phone: calc(1 * var(--font-size-copy-xxl-bp-factor));
3027
+ --ks-font-size-copy-xxl-bp-factor-tablet: calc(
3028
+ var(--ks-font-size-copy-xxl-bp-factor-phone) * var(--font-size-copy-xxl-bp-factor)
3029
+ );
3030
+ --ks-font-size-copy-xxl-bp-factor-laptop: calc(
3031
+ var(--ks-font-size-copy-xxl-bp-factor-tablet) * var(--font-size-copy-xxl-bp-factor)
3032
+ );
3033
+ --ks-font-size-copy-xxl-bp-factor-desktop: calc(
3034
+ var(--ks-font-size-copy-xxl-bp-factor-laptop) * var(--font-size-copy-xxl-bp-factor)
3035
+ );
3036
+ --ks-font-size-interface-xxs-bp-factor-phone: calc(1 * var(--font-size-interface-xxs-bp-factor));
3037
+ --ks-font-size-interface-xxs-bp-factor-tablet: calc(
3038
+ var(--ks-font-size-interface-xxs-bp-factor-phone) * var(--font-size-interface-xxs-bp-factor)
3039
+ );
3040
+ --ks-font-size-interface-xxs-bp-factor-laptop: calc(
3041
+ var(--ks-font-size-interface-xxs-bp-factor-tablet) * var(--font-size-interface-xxs-bp-factor)
3042
+ );
3043
+ --ks-font-size-interface-xxs-bp-factor-desktop: calc(
3044
+ var(--ks-font-size-interface-xxs-bp-factor-laptop) * var(--font-size-interface-xxs-bp-factor)
3045
+ );
3046
+ --ks-font-size-interface-xs-bp-factor-phone: calc(1 * var(--font-size-interface-xs-bp-factor));
3047
+ --ks-font-size-interface-xs-bp-factor-tablet: calc(
3048
+ var(--ks-font-size-interface-xs-bp-factor-phone) * var(--font-size-interface-xs-bp-factor)
3049
+ );
3050
+ --ks-font-size-interface-xs-bp-factor-laptop: calc(
3051
+ var(--ks-font-size-interface-xs-bp-factor-tablet) * var(--font-size-interface-xs-bp-factor)
3052
+ );
3053
+ --ks-font-size-interface-xs-bp-factor-desktop: calc(
3054
+ var(--ks-font-size-interface-xs-bp-factor-laptop) * var(--font-size-interface-xs-bp-factor)
3055
+ );
3056
+ --ks-font-size-interface-s-bp-factor-phone: calc(1 * var(--font-size-interface-s-bp-factor));
3057
+ --ks-font-size-interface-s-bp-factor-tablet: calc(
3058
+ var(--ks-font-size-interface-s-bp-factor-phone) * var(--font-size-interface-s-bp-factor)
3059
+ );
3060
+ --ks-font-size-interface-s-bp-factor-laptop: calc(
3061
+ var(--ks-font-size-interface-s-bp-factor-tablet) * var(--font-size-interface-s-bp-factor)
3062
+ );
3063
+ --ks-font-size-interface-s-bp-factor-desktop: calc(
3064
+ var(--ks-font-size-interface-s-bp-factor-laptop) * var(--font-size-interface-s-bp-factor)
3065
+ );
3066
+ --ks-font-size-interface-m-bp-factor-phone: calc(1 * var(--font-size-interface-m-bp-factor));
3067
+ --ks-font-size-interface-m-bp-factor-tablet: calc(
3068
+ var(--ks-font-size-interface-m-bp-factor-phone) * var(--font-size-interface-m-bp-factor)
3069
+ );
3070
+ --ks-font-size-interface-m-bp-factor-laptop: calc(
3071
+ var(--ks-font-size-interface-m-bp-factor-tablet) * var(--font-size-interface-m-bp-factor)
3072
+ );
3073
+ --ks-font-size-interface-m-bp-factor-desktop: calc(
3074
+ var(--ks-font-size-interface-m-bp-factor-laptop) * var(--font-size-interface-m-bp-factor)
3075
+ );
3076
+ --ks-font-size-interface-l-bp-factor-phone: calc(1 * var(--font-size-interface-l-bp-factor));
3077
+ --ks-font-size-interface-l-bp-factor-tablet: calc(
3078
+ var(--ks-font-size-interface-l-bp-factor-phone) * var(--font-size-interface-l-bp-factor)
3079
+ );
3080
+ --ks-font-size-interface-l-bp-factor-laptop: calc(
3081
+ var(--ks-font-size-interface-l-bp-factor-tablet) * var(--font-size-interface-l-bp-factor)
3082
+ );
3083
+ --ks-font-size-interface-l-bp-factor-desktop: calc(
3084
+ var(--ks-font-size-interface-l-bp-factor-laptop) * var(--font-size-interface-l-bp-factor)
3085
+ );
3086
+ --ks-font-size-interface-xl-bp-factor-phone: calc(1 * var(--font-size-interface-xl-bp-factor));
3087
+ --ks-font-size-interface-xl-bp-factor-tablet: calc(
3088
+ var(--ks-font-size-interface-xl-bp-factor-phone) * var(--font-size-interface-xl-bp-factor)
3089
+ );
3090
+ --ks-font-size-interface-xl-bp-factor-laptop: calc(
3091
+ var(--ks-font-size-interface-xl-bp-factor-tablet) * var(--font-size-interface-xl-bp-factor)
3092
+ );
3093
+ --ks-font-size-interface-xl-bp-factor-desktop: calc(
3094
+ var(--ks-font-size-interface-xl-bp-factor-laptop) * var(--font-size-interface-xl-bp-factor)
3095
+ );
3096
+ --ks-font-size-interface-xxl-bp-factor-phone: calc(1 * var(--font-size-interface-xxl-bp-factor));
3097
+ --ks-font-size-interface-xxl-bp-factor-tablet: calc(
3098
+ var(--ks-font-size-interface-xxl-bp-factor-phone) * var(--font-size-interface-xxl-bp-factor)
3099
+ );
3100
+ --ks-font-size-interface-xxl-bp-factor-laptop: calc(
3101
+ var(--ks-font-size-interface-xxl-bp-factor-tablet) * var(--font-size-interface-xxl-bp-factor)
3102
+ );
3103
+ --ks-font-size-interface-xxl-bp-factor-desktop: calc(
3104
+ var(--ks-font-size-interface-xxl-bp-factor-laptop) * var(--font-size-interface-xxl-bp-factor)
3105
+ );
3106
+ --ks-font-size-mono-xxs-bp-factor-phone: calc(1 * var(--font-size-mono-xxs-bp-factor));
3107
+ --ks-font-size-mono-xxs-bp-factor-tablet: calc(
3108
+ var(--ks-font-size-mono-xxs-bp-factor-phone) * var(--font-size-mono-xxs-bp-factor)
3109
+ );
3110
+ --ks-font-size-mono-xxs-bp-factor-laptop: calc(
3111
+ var(--ks-font-size-mono-xxs-bp-factor-tablet) * var(--font-size-mono-xxs-bp-factor)
3112
+ );
3113
+ --ks-font-size-mono-xxs-bp-factor-desktop: calc(
3114
+ var(--ks-font-size-mono-xxs-bp-factor-laptop) * var(--font-size-mono-xxs-bp-factor)
3115
+ );
3116
+ --ks-font-size-mono-xs-bp-factor-phone: calc(1 * var(--font-size-mono-xs-bp-factor));
3117
+ --ks-font-size-mono-xs-bp-factor-tablet: calc(
3118
+ var(--ks-font-size-mono-xs-bp-factor-phone) * var(--font-size-mono-xs-bp-factor)
3119
+ );
3120
+ --ks-font-size-mono-xs-bp-factor-laptop: calc(
3121
+ var(--ks-font-size-mono-xs-bp-factor-tablet) * var(--font-size-mono-xs-bp-factor)
3122
+ );
3123
+ --ks-font-size-mono-xs-bp-factor-desktop: calc(
3124
+ var(--ks-font-size-mono-xs-bp-factor-laptop) * var(--font-size-mono-xs-bp-factor)
3125
+ );
3126
+ --ks-font-size-mono-s-bp-factor-phone: calc(1 * var(--font-size-mono-s-bp-factor));
3127
+ --ks-font-size-mono-s-bp-factor-tablet: calc(
3128
+ var(--ks-font-size-mono-s-bp-factor-phone) * var(--font-size-mono-s-bp-factor)
3129
+ );
3130
+ --ks-font-size-mono-s-bp-factor-laptop: calc(
3131
+ var(--ks-font-size-mono-s-bp-factor-tablet) * var(--font-size-mono-s-bp-factor)
3132
+ );
3133
+ --ks-font-size-mono-s-bp-factor-desktop: calc(
3134
+ var(--ks-font-size-mono-s-bp-factor-laptop) * var(--font-size-mono-s-bp-factor)
3135
+ );
3136
+ --ks-font-size-mono-m-bp-factor-phone: calc(1 * var(--font-size-mono-m-bp-factor));
3137
+ --ks-font-size-mono-m-bp-factor-tablet: calc(
3138
+ var(--ks-font-size-mono-m-bp-factor-phone) * var(--font-size-mono-m-bp-factor)
3139
+ );
3140
+ --ks-font-size-mono-m-bp-factor-laptop: calc(
3141
+ var(--ks-font-size-mono-m-bp-factor-tablet) * var(--font-size-mono-m-bp-factor)
3142
+ );
3143
+ --ks-font-size-mono-m-bp-factor-desktop: calc(
3144
+ var(--ks-font-size-mono-m-bp-factor-laptop) * var(--font-size-mono-m-bp-factor)
3145
+ );
3146
+ --ks-font-size-mono-l-bp-factor-phone: calc(1 * var(--font-size-mono-l-bp-factor));
3147
+ --ks-font-size-mono-l-bp-factor-tablet: calc(
3148
+ var(--ks-font-size-mono-l-bp-factor-phone) * var(--font-size-mono-l-bp-factor)
3149
+ );
3150
+ --ks-font-size-mono-l-bp-factor-laptop: calc(
3151
+ var(--ks-font-size-mono-l-bp-factor-tablet) * var(--font-size-mono-l-bp-factor)
3152
+ );
3153
+ --ks-font-size-mono-l-bp-factor-desktop: calc(
3154
+ var(--ks-font-size-mono-l-bp-factor-laptop) * var(--font-size-mono-l-bp-factor)
3155
+ );
3156
+ --ks-font-size-mono-xl-bp-factor-phone: calc(1 * var(--font-size-mono-xl-bp-factor));
3157
+ --ks-font-size-mono-xl-bp-factor-tablet: calc(
3158
+ var(--ks-font-size-mono-xl-bp-factor-phone) * var(--font-size-mono-xl-bp-factor)
3159
+ );
3160
+ --ks-font-size-mono-xl-bp-factor-laptop: calc(
3161
+ var(--ks-font-size-mono-xl-bp-factor-tablet) * var(--font-size-mono-xl-bp-factor)
3162
+ );
3163
+ --ks-font-size-mono-xl-bp-factor-desktop: calc(
3164
+ var(--ks-font-size-mono-xl-bp-factor-laptop) * var(--font-size-mono-xl-bp-factor)
3165
+ );
3166
+ --ks-font-size-mono-xxl-bp-factor-phone: calc(1 * var(--font-size-mono-xxl-bp-factor));
3167
+ --ks-font-size-mono-xxl-bp-factor-tablet: calc(
3168
+ var(--ks-font-size-mono-xxl-bp-factor-phone) * var(--font-size-mono-xxl-bp-factor)
3169
+ );
3170
+ --ks-font-size-mono-xxl-bp-factor-laptop: calc(
3171
+ var(--ks-font-size-mono-xxl-bp-factor-tablet) * var(--font-size-mono-xxl-bp-factor)
3172
+ );
3173
+ --ks-font-size-mono-xxl-bp-factor-desktop: calc(
3174
+ var(--ks-font-size-mono-xxl-bp-factor-laptop) * var(--font-size-mono-xxl-bp-factor)
3175
+ );
3176
+ }
3177
+
3178
+ :root,
3179
+ [ks-theme],
3180
+ [ks-inverted=false],
3181
+ [ks-inverted=true] {
3182
+ --ks-font-size-display-xxs: calc(var(--ks-font-size-display-xxs-base) * var(--ks-font-size-display-xxs-bp-factor, 1));
3183
+ --ks-font-size-display-xs: calc(var(--ks-font-size-display-xs-base) * var(--ks-font-size-display-xs-bp-factor, 1));
3184
+ --ks-font-size-display-s: calc(var(--ks-font-size-display-s-base) * var(--ks-font-size-display-s-bp-factor, 1));
3185
+ --ks-font-size-display-m: calc(var(--ks-font-size-display-m-base) * var(--ks-font-size-display-m-bp-factor, 1));
3186
+ --ks-font-size-display-l: calc(var(--ks-font-size-display-l-base) * var(--ks-font-size-display-l-bp-factor, 1));
3187
+ --ks-font-size-display-xl: calc(var(--ks-font-size-display-xl-base) * var(--ks-font-size-display-xl-bp-factor, 1));
3188
+ --ks-font-size-display-xxl: calc(var(--ks-font-size-display-xxl-base) * var(--ks-font-size-display-xxl-bp-factor, 1));
3189
+ --ks-font-size-copy-xxs: calc(var(--ks-font-size-copy-xxs-base) * var(--ks-font-size-copy-xxs-bp-factor, 1));
3190
+ --ks-font-size-copy-xs: calc(var(--ks-font-size-copy-xs-base) * var(--ks-font-size-copy-xs-bp-factor, 1));
3191
+ --ks-font-size-copy-s: calc(var(--ks-font-size-copy-s-base) * var(--ks-font-size-copy-s-bp-factor, 1));
3192
+ --ks-font-size-copy-m: calc(var(--ks-font-size-copy-m-base) * var(--ks-font-size-copy-m-bp-factor, 1));
3193
+ --ks-font-size-copy-l: calc(var(--ks-font-size-copy-l-base) * var(--ks-font-size-copy-l-bp-factor, 1));
3194
+ --ks-font-size-copy-xl: calc(var(--ks-font-size-copy-xl-base) * var(--ks-font-size-copy-xl-bp-factor, 1));
3195
+ --ks-font-size-copy-xxl: calc(var(--ks-font-size-copy-xxl-base) * var(--ks-font-size-copy-xxl-bp-factor, 1));
3196
+ --ks-font-size-interface-xxs: calc(
3197
+ var(--ks-font-size-interface-xxs-base) * var(--ks-font-size-interface-xxs-bp-factor, 1)
3198
+ );
3199
+ --ks-font-size-interface-xs: calc(
3200
+ var(--ks-font-size-interface-xs-base) * var(--ks-font-size-interface-xs-bp-factor, 1)
3201
+ );
3202
+ --ks-font-size-interface-s: calc(var(--ks-font-size-interface-s-base) * var(--ks-font-size-interface-s-bp-factor, 1));
3203
+ --ks-font-size-interface-m: calc(var(--ks-font-size-interface-m-base) * var(--ks-font-size-interface-m-bp-factor, 1));
3204
+ --ks-font-size-interface-l: calc(var(--ks-font-size-interface-l-base) * var(--ks-font-size-interface-l-bp-factor, 1));
3205
+ --ks-font-size-interface-xl: calc(
3206
+ var(--ks-font-size-interface-xl-base) * var(--ks-font-size-interface-xl-bp-factor, 1)
3207
+ );
3208
+ --ks-font-size-interface-xxl: calc(
3209
+ var(--ks-font-size-interface-xxl-base) * var(--ks-font-size-interface-xxl-bp-factor, 1)
3210
+ );
3211
+ --ks-font-size-mono-xxs: calc(var(--ks-font-size-mono-xxs-base) * var(--ks-font-size-mono-xxs-bp-factor, 1));
3212
+ --ks-font-size-mono-xs: calc(var(--ks-font-size-mono-xs-base) * var(--ks-font-size-mono-xs-bp-factor, 1));
3213
+ --ks-font-size-mono-s: calc(var(--ks-font-size-mono-s-base) * var(--ks-font-size-mono-s-bp-factor, 1));
3214
+ --ks-font-size-mono-m: calc(var(--ks-font-size-mono-m-base) * var(--ks-font-size-mono-m-bp-factor, 1));
3215
+ --ks-font-size-mono-l: calc(var(--ks-font-size-mono-l-base) * var(--ks-font-size-mono-l-bp-factor, 1));
3216
+ --ks-font-size-mono-xl: calc(var(--ks-font-size-mono-xl-base) * var(--ks-font-size-mono-xl-bp-factor, 1));
3217
+ --ks-font-size-mono-xxl: calc(var(--ks-font-size-mono-xxl-base) * var(--ks-font-size-mono-xxl-bp-factor, 1));
3218
+ }
3219
+
3220
+ @media (min-width: 36em) {
3221
+ :root,
3222
+ [ks-theme],
3223
+ [ks-inverted=false],
3224
+ [ks-inverted=true] {
3225
+ --ks-font-size-display-bp-factor: var(--ks-font-size-display-bp-factor-phone);
3226
+ --ks-font-size-display-xxs-bp-factor: var(--ks-font-size-display-xxs-bp-factor-phone);
3227
+ --ks-font-size-display-xs-bp-factor: var(--ks-font-size-display-xs-bp-factor-phone);
3228
+ --ks-font-size-display-s-bp-factor: var(--ks-font-size-display-s-bp-factor-phone);
3229
+ --ks-font-size-display-m-bp-factor: var(--ks-font-size-display-m-bp-factor-phone);
3230
+ --ks-font-size-display-l-bp-factor: var(--ks-font-size-display-l-bp-factor-phone);
3231
+ --ks-font-size-display-xl-bp-factor: var(--ks-font-size-display-xl-bp-factor-phone);
3232
+ --ks-font-size-display-xxl-bp-factor: var(--ks-font-size-display-xxl-bp-factor-phone);
3233
+ --ks-font-size-copy-bp-factor: var(--ks-font-size-copy-bp-factor-phone);
3234
+ --ks-font-size-copy-xxs-bp-factor: var(--ks-font-size-copy-xxs-bp-factor-phone);
3235
+ --ks-font-size-copy-xs-bp-factor: var(--ks-font-size-copy-xs-bp-factor-phone);
3236
+ --ks-font-size-copy-s-bp-factor: var(--ks-font-size-copy-s-bp-factor-phone);
3237
+ --ks-font-size-copy-m-bp-factor: var(--ks-font-size-copy-m-bp-factor-phone);
3238
+ --ks-font-size-copy-l-bp-factor: var(--ks-font-size-copy-l-bp-factor-phone);
3239
+ --ks-font-size-copy-xl-bp-factor: var(--ks-font-size-copy-xl-bp-factor-phone);
3240
+ --ks-font-size-copy-xxl-bp-factor: var(--ks-font-size-copy-xxl-bp-factor-phone);
3241
+ --ks-font-size-interface-bp-factor: var(--ks-font-size-interface-bp-factor-phone);
3242
+ --ks-font-size-interface-xxs-bp-factor: var(--ks-font-size-interface-xxs-bp-factor-phone);
3243
+ --ks-font-size-interface-xs-bp-factor: var(--ks-font-size-interface-xs-bp-factor-phone);
3244
+ --ks-font-size-interface-s-bp-factor: var(--ks-font-size-interface-s-bp-factor-phone);
3245
+ --ks-font-size-interface-m-bp-factor: var(--ks-font-size-interface-m-bp-factor-phone);
3246
+ --ks-font-size-interface-l-bp-factor: var(--ks-font-size-interface-l-bp-factor-phone);
3247
+ --ks-font-size-interface-xl-bp-factor: var(--ks-font-size-interface-xl-bp-factor-phone);
3248
+ --ks-font-size-interface-xxl-bp-factor: var(--ks-font-size-interface-xxl-bp-factor-phone);
3249
+ --ks-font-size-mono-bp-factor: var(--ks-font-size-mono-bp-factor-phone);
3250
+ --ks-font-size-mono-xxs-bp-factor: var(--ks-font-size-mono-xxs-bp-factor-phone);
3251
+ --ks-font-size-mono-xs-bp-factor: var(--ks-font-size-mono-xs-bp-factor-phone);
3252
+ --ks-font-size-mono-s-bp-factor: var(--ks-font-size-mono-s-bp-factor-phone);
3253
+ --ks-font-size-mono-m-bp-factor: var(--ks-font-size-mono-m-bp-factor-phone);
3254
+ --ks-font-size-mono-l-bp-factor: var(--ks-font-size-mono-l-bp-factor-phone);
3255
+ --ks-font-size-mono-xl-bp-factor: var(--ks-font-size-mono-xl-bp-factor-phone);
3256
+ --ks-font-size-mono-xxl-bp-factor: var(--ks-font-size-mono-xxl-bp-factor-phone);
3257
+ }
3258
+ }
3259
+ @media (min-width: 48em) {
3260
+ :root,
3261
+ [ks-theme],
3262
+ [ks-inverted=false],
3263
+ [ks-inverted=true] {
3264
+ --ks-font-size-display-xxs-bp-factor: var(--ks-font-size-display-xxs-bp-factor-tablet);
3265
+ --ks-font-size-display-xs-bp-factor: var(--ks-font-size-display-xs-bp-factor-tablet);
3266
+ --ks-font-size-display-s-bp-factor: var(--ks-font-size-display-s-bp-factor-tablet);
3267
+ --ks-font-size-display-m-bp-factor: var(--ks-font-size-display-m-bp-factor-tablet);
3268
+ --ks-font-size-display-l-bp-factor: var(--ks-font-size-display-l-bp-factor-tablet);
3269
+ --ks-font-size-display-xl-bp-factor: var(--ks-font-size-display-xl-bp-factor-tablet);
3270
+ --ks-font-size-display-xxl-bp-factor: var(--ks-font-size-display-xxl-bp-factor-tablet);
3271
+ --ks-font-size-copy-xxs-bp-factor: var(--ks-font-size-copy-xxs-bp-factor-tablet);
3272
+ --ks-font-size-copy-xs-bp-factor: var(--ks-font-size-copy-xs-bp-factor-tablet);
3273
+ --ks-font-size-copy-s-bp-factor: var(--ks-font-size-copy-s-bp-factor-tablet);
3274
+ --ks-font-size-copy-m-bp-factor: var(--ks-font-size-copy-m-bp-factor-tablet);
3275
+ --ks-font-size-copy-l-bp-factor: var(--ks-font-size-copy-l-bp-factor-tablet);
3276
+ --ks-font-size-copy-xl-bp-factor: var(--ks-font-size-copy-xl-bp-factor-tablet);
3277
+ --ks-font-size-copy-xxl-bp-factor: var(--ks-font-size-copy-xxl-bp-factor-tablet);
3278
+ --ks-font-size-interface-xxs-bp-factor: var(--ks-font-size-interface-xxs-bp-factor-tablet);
3279
+ --ks-font-size-interface-xs-bp-factor: var(--ks-font-size-interface-xs-bp-factor-tablet);
3280
+ --ks-font-size-interface-s-bp-factor: var(--ks-font-size-interface-s-bp-factor-tablet);
3281
+ --ks-font-size-interface-m-bp-factor: var(--ks-font-size-interface-m-bp-factor-tablet);
3282
+ --ks-font-size-interface-l-bp-factor: var(--ks-font-size-interface-l-bp-factor-tablet);
3283
+ --ks-font-size-interface-xl-bp-factor: var(--ks-font-size-interface-xl-bp-factor-tablet);
3284
+ --ks-font-size-interface-xxl-bp-factor: var(--ks-font-size-interface-xxl-bp-factor-tablet);
3285
+ --ks-font-size-mono-xxs-bp-factor: var(--ks-font-size-mono-xxs-bp-factor-tablet);
3286
+ --ks-font-size-mono-xs-bp-factor: var(--ks-font-size-mono-xs-bp-factor-tablet);
3287
+ --ks-font-size-mono-s-bp-factor: var(--ks-font-size-mono-s-bp-factor-tablet);
3288
+ --ks-font-size-mono-m-bp-factor: var(--ks-font-size-mono-m-bp-factor-tablet);
3289
+ --ks-font-size-mono-l-bp-factor: var(--ks-font-size-mono-l-bp-factor-tablet);
3290
+ --ks-font-size-mono-xl-bp-factor: var(--ks-font-size-mono-xl-bp-factor-tablet);
3291
+ --ks-font-size-mono-xxl-bp-factor: var(--ks-font-size-mono-xxl-bp-factor-tablet);
3292
+ }
3293
+ }
3294
+ @media (min-width: 62em) {
3295
+ :root,
3296
+ [ks-theme],
3297
+ [ks-inverted=false],
3298
+ [ks-inverted=true] {
3299
+ --ks-font-size-display-xxs-bp-factor: var(--ks-font-size-display-xxs-bp-factor-laptop);
3300
+ --ks-font-size-display-xs-bp-factor: var(--ks-font-size-display-xs-bp-factor-laptop);
3301
+ --ks-font-size-display-s-bp-factor: var(--ks-font-size-display-s-bp-factor-laptop);
3302
+ --ks-font-size-display-m-bp-factor: var(--ks-font-size-display-m-bp-factor-laptop);
3303
+ --ks-font-size-display-l-bp-factor: var(--ks-font-size-display-l-bp-factor-laptop);
3304
+ --ks-font-size-display-xl-bp-factor: var(--ks-font-size-display-xl-bp-factor-laptop);
3305
+ --ks-font-size-display-xxl-bp-factor: var(--ks-font-size-display-xxl-bp-factor-laptop);
3306
+ --ks-font-size-copy-xxs-bp-factor: var(--ks-font-size-copy-xxs-bp-factor-laptop);
3307
+ --ks-font-size-copy-xs-bp-factor: var(--ks-font-size-copy-xs-bp-factor-laptop);
3308
+ --ks-font-size-copy-s-bp-factor: var(--ks-font-size-copy-s-bp-factor-laptop);
3309
+ --ks-font-size-copy-m-bp-factor: var(--ks-font-size-copy-m-bp-factor-laptop);
3310
+ --ks-font-size-copy-l-bp-factor: var(--ks-font-size-copy-l-bp-factor-laptop);
3311
+ --ks-font-size-copy-xl-bp-factor: var(--ks-font-size-copy-xl-bp-factor-laptop);
3312
+ --ks-font-size-copy-xxl-bp-factor: var(--ks-font-size-copy-xxl-bp-factor-laptop);
3313
+ --ks-font-size-interface-xxs-bp-factor: var(--ks-font-size-interface-xxs-bp-factor-laptop);
3314
+ --ks-font-size-interface-xs-bp-factor: var(--ks-font-size-interface-xs-bp-factor-laptop);
3315
+ --ks-font-size-interface-s-bp-factor: var(--ks-font-size-interface-s-bp-factor-laptop);
3316
+ --ks-font-size-interface-m-bp-factor: var(--ks-font-size-interface-m-bp-factor-laptop);
3317
+ --ks-font-size-interface-l-bp-factor: var(--ks-font-size-interface-l-bp-factor-laptop);
3318
+ --ks-font-size-interface-xl-bp-factor: var(--ks-font-size-interface-xl-bp-factor-laptop);
3319
+ --ks-font-size-interface-xxl-bp-factor: var(--ks-font-size-interface-xxl-bp-factor-laptop);
3320
+ --ks-font-size-mono-xxs-bp-factor: var(--ks-font-size-mono-xxs-bp-factor-laptop);
3321
+ --ks-font-size-mono-xs-bp-factor: var(--ks-font-size-mono-xs-bp-factor-laptop);
3322
+ --ks-font-size-mono-s-bp-factor: var(--ks-font-size-mono-s-bp-factor-laptop);
3323
+ --ks-font-size-mono-m-bp-factor: var(--ks-font-size-mono-m-bp-factor-laptop);
3324
+ --ks-font-size-mono-l-bp-factor: var(--ks-font-size-mono-l-bp-factor-laptop);
3325
+ --ks-font-size-mono-xl-bp-factor: var(--ks-font-size-mono-xl-bp-factor-laptop);
3326
+ --ks-font-size-mono-xxl-bp-factor: var(--ks-font-size-mono-xxl-bp-factor-laptop);
340
3327
  }
341
3328
  }
342
- @media (min-width: 62em) {
343
- :root, [ks-inverted], [ks-theme] {
344
- --dsa-logo--height: 2.5rem;
3329
+ @media (min-width: 75em) {
3330
+ :root,
3331
+ [ks-theme],
3332
+ [ks-inverted=false],
3333
+ [ks-inverted=true] {
3334
+ --ks-font-size-display-xxs-bp-factor: var(--ks-font-size-display-xxs-bp-factor-desktop);
3335
+ --ks-font-size-display-xs-bp-factor: var(--ks-font-size-display-xs-bp-factor-desktop);
3336
+ --ks-font-size-display-s-bp-factor: var(--ks-font-size-display-s-bp-factor-desktop);
3337
+ --ks-font-size-display-m-bp-factor: var(--ks-font-size-display-m-bp-factor-desktop);
3338
+ --ks-font-size-display-l-bp-factor: var(--ks-font-size-display-l-bp-factor-desktop);
3339
+ --ks-font-size-display-xl-bp-factor: var(--ks-font-size-display-xl-bp-factor-desktop);
3340
+ --ks-font-size-display-xxl-bp-factor: var(--ks-font-size-display-xxl-bp-factor-desktop);
3341
+ --ks-font-size-copy-xxs-bp-factor: var(--ks-font-size-copy-xxs-bp-factor-desktop);
3342
+ --ks-font-size-copy-xs-bp-factor: var(--ks-font-size-copy-xs-bp-factor-desktop);
3343
+ --ks-font-size-copy-s-bp-factor: var(--ks-font-size-copy-s-bp-factor-desktop);
3344
+ --ks-font-size-copy-m-bp-factor: var(--ks-font-size-copy-m-bp-factor-desktop);
3345
+ --ks-font-size-copy-l-bp-factor: var(--ks-font-size-copy-l-bp-factor-desktop);
3346
+ --ks-font-size-copy-xl-bp-factor: var(--ks-font-size-copy-xl-bp-factor-desktop);
3347
+ --ks-font-size-copy-xxl-bp-factor: var(--ks-font-size-copy-xxl-bp-factor-desktop);
3348
+ --ks-font-size-interface-xxs-bp-factor: var(--ks-font-size-interface-xxs-bp-factor-desktop);
3349
+ --ks-font-size-interface-xs-bp-factor: var(--ks-font-size-interface-xs-bp-factor-desktop);
3350
+ --ks-font-size-interface-s-bp-factor: var(--ks-font-size-interface-s-bp-factor-desktop);
3351
+ --ks-font-size-interface-m-bp-factor: var(--ks-font-size-interface-m-bp-factor-desktop);
3352
+ --ks-font-size-interface-l-bp-factor: var(--ks-font-size-interface-l-bp-factor-desktop);
3353
+ --ks-font-size-interface-xl-bp-factor: var(--ks-font-size-interface-xl-bp-factor-desktop);
3354
+ --ks-font-size-interface-xxl-bp-factor: var(--ks-font-size-interface-xxl-bp-factor-desktop);
3355
+ --ks-font-size-mono-xxs-bp-factor: var(--ks-font-size-mono-xxs-bp-factor-desktop);
3356
+ --ks-font-size-mono-xs-bp-factor: var(--ks-font-size-mono-xs-bp-factor-desktop);
3357
+ --ks-font-size-mono-s-bp-factor: var(--ks-font-size-mono-s-bp-factor-desktop);
3358
+ --ks-font-size-mono-m-bp-factor: var(--ks-font-size-mono-m-bp-factor-desktop);
3359
+ --ks-font-size-mono-l-bp-factor: var(--ks-font-size-mono-l-bp-factor-desktop);
3360
+ --ks-font-size-mono-xl-bp-factor: var(--ks-font-size-mono-xl-bp-factor-desktop);
3361
+ --ks-font-size-mono-xxl-bp-factor: var(--ks-font-size-mono-xxl-bp-factor-desktop);
345
3362
  }
346
3363
  }
347
-
348
3364
  :root,
349
3365
  [ks-theme],
350
3366
  [ks-inverted=false],
351
3367
  [ks-inverted=true] {
352
- --spacing-base: 16px;
353
- --spacing-shrink-factor: 0.65;
354
- --spacing-grow-factor: 1.585;
355
- --spacing-bp-factor: 1.0125;
356
- --spacing-xxs-bp-factor: calc(1 * var(--spacing-bp-factor));
357
- --spacing-xs-bp-factor: calc(var(--spacing-xxs-bp-factor) * var(--spacing-bp-factor));
358
- --spacing-s-bp-factor: calc(var(--spacing-xs-bp-factor) * var(--spacing-bp-factor));
359
- --spacing-m-bp-factor: calc(var(--spacing-s-bp-factor) * var(--spacing-bp-factor));
360
- --spacing-l-bp-factor: calc(var(--spacing-m-bp-factor) * var(--spacing-bp-factor));
361
- --spacing-xl-bp-factor: calc(var(--spacing-l-bp-factor) * var(--spacing-bp-factor));
362
- --spacing-xxl-bp-factor: calc(var(--spacing-xl-bp-factor) * var(--spacing-bp-factor));
3368
+ --ks-scale-spacing-xxs-bp-factor: calc(1 * var(--spacing-bp-factor));
3369
+ --ks-scale-spacing-xs-bp-factor: calc(var(--ks-scale-spacing-xxs-bp-factor) * var(--spacing-bp-factor));
3370
+ --ks-scale-spacing-s-bp-factor: calc(var(--ks-scale-spacing-xs-bp-factor) * var(--spacing-bp-factor));
3371
+ --ks-scale-spacing-m-bp-factor: calc(var(--ks-scale-spacing-s-bp-factor) * var(--spacing-bp-factor));
3372
+ --ks-scale-spacing-l-bp-factor: calc(var(--ks-scale-spacing-m-bp-factor) * var(--spacing-bp-factor));
3373
+ --ks-scale-spacing-xl-bp-factor: calc(var(--ks-scale-spacing-l-bp-factor) * var(--spacing-bp-factor));
3374
+ --ks-scale-spacing-xxl-bp-factor: calc(var(--ks-scale-spacing-xl-bp-factor) * var(--spacing-bp-factor));
363
3375
  }
364
3376
 
365
3377
  :root,
366
3378
  [ks-theme],
367
3379
  [ks-inverted=false],
368
3380
  [ks-inverted=true] {
369
- --ks-spacing-xxs-base: calc(var(--ks-spacing-xs-base) * calc(var(--spacing-shrink-factor) * 1));
370
- --ks-spacing-xs-base: calc(var(--ks-spacing-s-base) * calc(var(--spacing-shrink-factor) * 1));
371
- --ks-spacing-s-base: calc(var(--ks-spacing-m-base) * calc(var(--spacing-shrink-factor) * 1));
372
- --ks-spacing-m-base: var(--spacing-base);
373
- --ks-spacing-l-base: calc(var(--ks-spacing-m-base) * var(--spacing-grow-factor));
374
- --ks-spacing-xl-base: calc(var(--ks-spacing-l-base) * var(--spacing-grow-factor));
375
- --ks-spacing-xxl-base: calc(var(--ks-spacing-xl-base) * var(--spacing-grow-factor));
3381
+ --ks-spacing-xxs-base: calc(var(--ks-spacing-xs-base) * calc(var(--ks-scale-spacing-shrink-factor) * 1));
3382
+ --ks-spacing-xs-base: calc(var(--ks-spacing-s-base) * calc(var(--ks-scale-spacing-shrink-factor) * 1));
3383
+ --ks-spacing-s-base: calc(var(--ks-spacing-m-base) * calc(var(--ks-scale-spacing-shrink-factor) * 1));
3384
+ --ks-spacing-m-base: var(--ks-brand-spacing-base);
3385
+ --ks-spacing-l-base: calc(var(--ks-spacing-m-base) * var(--ks-scale-spacing-grow-factor));
3386
+ --ks-spacing-xl-base: calc(var(--ks-spacing-l-base) * var(--ks-scale-spacing-grow-factor));
3387
+ --ks-spacing-xxl-base: calc(var(--ks-spacing-xl-base) * var(--ks-scale-spacing-grow-factor));
376
3388
  }
377
3389
 
378
3390
  :root,
379
3391
  [ks-theme],
380
3392
  [ks-inverted=false],
381
3393
  [ks-inverted=true] {
382
- --ks-spacing-xxs-bp-factor-phone: calc(1 * var(--spacing-xxs-bp-factor));
383
- --ks-spacing-xxs-bp-factor-tablet: calc(var(--ks-spacing-xxs-bp-factor-phone) * var(--spacing-xxs-bp-factor));
384
- --ks-spacing-xxs-bp-factor-laptop: calc(var(--ks-spacing-xxs-bp-factor-tablet) * var(--spacing-xxs-bp-factor));
385
- --ks-spacing-xxs-bp-factor-desktop: calc(var(--ks-spacing-xxs-bp-factor-laptop) * var(--spacing-xxs-bp-factor));
386
- --ks-spacing-xs-bp-factor-phone: calc(1 * var(--spacing-xs-bp-factor));
387
- --ks-spacing-xs-bp-factor-tablet: calc(var(--ks-spacing-xs-bp-factor-phone) * var(--spacing-xs-bp-factor));
388
- --ks-spacing-xs-bp-factor-laptop: calc(var(--ks-spacing-xs-bp-factor-tablet) * var(--spacing-xs-bp-factor));
389
- --ks-spacing-xs-bp-factor-desktop: calc(var(--ks-spacing-xs-bp-factor-laptop) * var(--spacing-xs-bp-factor));
390
- --ks-spacing-s-bp-factor-phone: calc(1 * var(--spacing-s-bp-factor));
391
- --ks-spacing-s-bp-factor-tablet: calc(var(--ks-spacing-s-bp-factor-phone) * var(--spacing-s-bp-factor));
392
- --ks-spacing-s-bp-factor-laptop: calc(var(--ks-spacing-s-bp-factor-tablet) * var(--spacing-s-bp-factor));
393
- --ks-spacing-s-bp-factor-desktop: calc(var(--ks-spacing-s-bp-factor-laptop) * var(--spacing-s-bp-factor));
394
- --ks-spacing-m-bp-factor-phone: calc(1 * var(--spacing-m-bp-factor));
395
- --ks-spacing-m-bp-factor-tablet: calc(var(--ks-spacing-m-bp-factor-phone) * var(--spacing-m-bp-factor));
396
- --ks-spacing-m-bp-factor-laptop: calc(var(--ks-spacing-m-bp-factor-tablet) * var(--spacing-m-bp-factor));
397
- --ks-spacing-m-bp-factor-desktop: calc(var(--ks-spacing-m-bp-factor-laptop) * var(--spacing-m-bp-factor));
398
- --ks-spacing-l-bp-factor-phone: calc(1 * var(--spacing-l-bp-factor));
399
- --ks-spacing-l-bp-factor-tablet: calc(var(--ks-spacing-l-bp-factor-phone) * var(--spacing-l-bp-factor));
400
- --ks-spacing-l-bp-factor-laptop: calc(var(--ks-spacing-l-bp-factor-tablet) * var(--spacing-l-bp-factor));
401
- --ks-spacing-l-bp-factor-desktop: calc(var(--ks-spacing-l-bp-factor-laptop) * var(--spacing-l-bp-factor));
402
- --ks-spacing-xl-bp-factor-phone: calc(1 * var(--spacing-xl-bp-factor));
403
- --ks-spacing-xl-bp-factor-tablet: calc(var(--ks-spacing-xl-bp-factor-phone) * var(--spacing-xl-bp-factor));
404
- --ks-spacing-xl-bp-factor-laptop: calc(var(--ks-spacing-xl-bp-factor-tablet) * var(--spacing-xl-bp-factor));
405
- --ks-spacing-xl-bp-factor-desktop: calc(var(--ks-spacing-xl-bp-factor-laptop) * var(--spacing-xl-bp-factor));
406
- --ks-spacing-xxl-bp-factor-phone: calc(1 * var(--spacing-xxl-bp-factor));
407
- --ks-spacing-xxl-bp-factor-tablet: calc(var(--ks-spacing-xxl-bp-factor-phone) * var(--spacing-xxl-bp-factor));
408
- --ks-spacing-xxl-bp-factor-laptop: calc(var(--ks-spacing-xxl-bp-factor-tablet) * var(--spacing-xxl-bp-factor));
409
- --ks-spacing-xxl-bp-factor-desktop: calc(var(--ks-spacing-xxl-bp-factor-laptop) * var(--spacing-xxl-bp-factor));
3394
+ --ks-spacing-xxs-bp-factor-phone: calc(1 * var(--ks-scale-spacing-xxs-bp-factor));
3395
+ --ks-spacing-xxs-bp-factor-tablet: calc(
3396
+ var(--ks-spacing-xxs-bp-factor-phone) * var(--ks-scale-spacing-xxs-bp-factor)
3397
+ );
3398
+ --ks-spacing-xxs-bp-factor-laptop: calc(
3399
+ var(--ks-spacing-xxs-bp-factor-tablet) * var(--ks-scale-spacing-xxs-bp-factor)
3400
+ );
3401
+ --ks-spacing-xxs-bp-factor-desktop: calc(
3402
+ var(--ks-spacing-xxs-bp-factor-laptop) * var(--ks-scale-spacing-xxs-bp-factor)
3403
+ );
3404
+ --ks-spacing-xs-bp-factor-phone: calc(1 * var(--ks-scale-spacing-xs-bp-factor));
3405
+ --ks-spacing-xs-bp-factor-tablet: calc(var(--ks-spacing-xs-bp-factor-phone) * var(--ks-scale-spacing-xs-bp-factor));
3406
+ --ks-spacing-xs-bp-factor-laptop: calc(var(--ks-spacing-xs-bp-factor-tablet) * var(--ks-scale-spacing-xs-bp-factor));
3407
+ --ks-spacing-xs-bp-factor-desktop: calc(var(--ks-spacing-xs-bp-factor-laptop) * var(--ks-scale-spacing-xs-bp-factor));
3408
+ --ks-spacing-s-bp-factor-phone: calc(1 * var(--ks-scale-spacing-s-bp-factor));
3409
+ --ks-spacing-s-bp-factor-tablet: calc(var(--ks-spacing-s-bp-factor-phone) * var(--ks-scale-spacing-s-bp-factor));
3410
+ --ks-spacing-s-bp-factor-laptop: calc(var(--ks-spacing-s-bp-factor-tablet) * var(--ks-scale-spacing-s-bp-factor));
3411
+ --ks-spacing-s-bp-factor-desktop: calc(var(--ks-spacing-s-bp-factor-laptop) * var(--ks-scale-spacing-s-bp-factor));
3412
+ --ks-spacing-m-bp-factor-phone: calc(1 * var(--ks-scale-spacing-m-bp-factor));
3413
+ --ks-spacing-m-bp-factor-tablet: calc(var(--ks-spacing-m-bp-factor-phone) * var(--ks-scale-spacing-m-bp-factor));
3414
+ --ks-spacing-m-bp-factor-laptop: calc(var(--ks-spacing-m-bp-factor-tablet) * var(--ks-scale-spacing-m-bp-factor));
3415
+ --ks-spacing-m-bp-factor-desktop: calc(var(--ks-spacing-m-bp-factor-laptop) * var(--ks-scale-spacing-m-bp-factor));
3416
+ --ks-spacing-l-bp-factor-phone: calc(1 * var(--ks-scale-spacing-l-bp-factor));
3417
+ --ks-spacing-l-bp-factor-tablet: calc(var(--ks-spacing-l-bp-factor-phone) * var(--ks-scale-spacing-l-bp-factor));
3418
+ --ks-spacing-l-bp-factor-laptop: calc(var(--ks-spacing-l-bp-factor-tablet) * var(--ks-scale-spacing-l-bp-factor));
3419
+ --ks-spacing-l-bp-factor-desktop: calc(var(--ks-spacing-l-bp-factor-laptop) * var(--ks-scale-spacing-l-bp-factor));
3420
+ --ks-spacing-xl-bp-factor-phone: calc(1 * var(--ks-scale-spacing-xl-bp-factor));
3421
+ --ks-spacing-xl-bp-factor-tablet: calc(var(--ks-spacing-xl-bp-factor-phone) * var(--ks-scale-spacing-xl-bp-factor));
3422
+ --ks-spacing-xl-bp-factor-laptop: calc(var(--ks-spacing-xl-bp-factor-tablet) * var(--ks-scale-spacing-xl-bp-factor));
3423
+ --ks-spacing-xl-bp-factor-desktop: calc(var(--ks-spacing-xl-bp-factor-laptop) * var(--ks-scale-spacing-xl-bp-factor));
3424
+ --ks-spacing-xxl-bp-factor-phone: calc(1 * var(--ks-scale-spacing-xxl-bp-factor));
3425
+ --ks-spacing-xxl-bp-factor-tablet: calc(
3426
+ var(--ks-spacing-xxl-bp-factor-phone) * var(--ks-scale-spacing-xxl-bp-factor)
3427
+ );
3428
+ --ks-spacing-xxl-bp-factor-laptop: calc(
3429
+ var(--ks-spacing-xxl-bp-factor-tablet) * var(--ks-scale-spacing-xxl-bp-factor)
3430
+ );
3431
+ --ks-spacing-xxl-bp-factor-desktop: calc(
3432
+ var(--ks-spacing-xxl-bp-factor-laptop) * var(--ks-scale-spacing-xxl-bp-factor)
3433
+ );
410
3434
  }
411
3435
 
412
3436
  :root,
@@ -447,7 +3471,7 @@ h3 {
447
3471
  --ks-spacing-inset-squish-m: var(--ks-spacing-m) var(--ks-spacing-l);
448
3472
  --ks-spacing-inset-squish-l: var(--ks-spacing-l) var(--ks-spacing-xl);
449
3473
  --ks-spacing-inset-squish-xl: var(--ks-spacing-xl) var(--ks-spacing-xxl);
450
- --ks-spacing-inset-squish-xxl: var(--ks-spacing-xxl) calc(var(--ks-spacing-xxl) * 1.25);
3474
+ --ks-spacing-inset-squish-xxl: var(--ks-spacing-xxl) calc(var(--ks-spacing-xxxl) * 1.25);
451
3475
  }
452
3476
 
453
3477
  :root,
@@ -519,6 +3543,1169 @@ h3 {
519
3543
  --ks-spacing-xxl-bp-factor: var(--ks-spacing-xxl-bp-factor-desktop);
520
3544
  }
521
3545
  }
3546
+ :root {
3547
+ --ks-border-width-default: var(--ks-brand-border-width-default);
3548
+ --ks-border-width-emphasized: var(--ks-brand-border-width-emphasized);
3549
+ --ks-border-radius-control: var(--ks-brand-border-radius-control);
3550
+ --ks-border-radius-card: var(--ks-brand-border-radius-card);
3551
+ --ks-border-radius-surface: var(--ks-brand-border-radius-surface);
3552
+ --ks-border-radius-pill: 999px;
3553
+ --ks-border-radius-circle: 50%;
3554
+ }
3555
+
3556
+ :root,
3557
+ [ks-theme] {
3558
+ --ks-box-shadow-card-base: 0 2px 8px 0 var(--ks-color-fg-alpha-8);
3559
+ --ks-box-shadow-card-hover-base: 0 4px 16px 0 var(--ks-color-fg-alpha-7);
3560
+ --ks-box-shadow-card-inverted-base: 0 2px 8px 0 var(--ks-color-fg-inverted-alpha-7);
3561
+ --ks-box-shadow-card-inverted-hover-base: 0 4px 16px 0 var(--ks-color-fg-inverted-alpha-6);
3562
+ --ks-box-shadow-control-base: 0 1px 2px 0 var(--ks-color-fg-alpha-7);
3563
+ --ks-box-shadow-control-hover-base: 0 2px 4px 0 var(--ks-color-fg-alpha-8);
3564
+ --ks-box-shadow-control-inverted-base: 0 1px 2px 0 var(--ks-color-fg-inverted-alpha-6);
3565
+ --ks-box-shadow-control-inverted-hover-base: 0 2px 4px 0 var(--ks-color-fg-inverted-alpha-7);
3566
+ --ks-box-shadow-surface-base: 0 8px 20px 0 var(--ks-color-fg-alpha-8);
3567
+ --ks-box-shadow-surface-hover-base: 0 10px 26px 0 var(--ks-color-fg-alpha-7);
3568
+ --ks-box-shadow-surface-inverted-base: 0 8px 20px 0 var(--ks-color-fg-inverted-alpha-8);
3569
+ --ks-box-shadow-surface-inverted-hover-base: 0 10px 26px 0 var(--ks-color-fg-inverted-alpha-7);
3570
+ }
3571
+
3572
+ :root {
3573
+ --ks-box-shadow-card: var(--ks-box-shadow-card-base);
3574
+ --ks-box-shadow-card-inverted: var(--ks-box-shadow-card-inverted-base);
3575
+ --ks-box-shadow-control: var(--ks-box-shadow-control-base);
3576
+ --ks-box-shadow-control-inverted: var(--ks-box-shadow-control-inverted-base);
3577
+ --ks-box-shadow-surface: var(--ks-box-shadow-surface-base);
3578
+ --ks-box-shadow-surface-inverted: var(--ks-box-shadow-surface-inverted-base);
3579
+ --ks-box-shadow-card-hover: var(--ks-box-shadow-card-hover-base);
3580
+ --ks-box-shadow-card-inverted-hover: var(--ks-box-shadow-card-inverted-hover-base);
3581
+ --ks-box-shadow-control-hover: var(--ks-box-shadow-control-hover-base);
3582
+ --ks-box-shadow-control-inverted-hover: var(--ks-box-shadow-control-inverted-hover-base);
3583
+ --ks-box-shadow-surface-hover: var(--ks-box-shadow-surface-hover-base);
3584
+ --ks-box-shadow-surface-inverted-hover: var(--ks-box-shadow-surface-inverted-hover-base);
3585
+ }
3586
+
3587
+ [ks-inverted=true] {
3588
+ --ks-box-shadow-card: var(--ks-box-shadow-card-inverted-base);
3589
+ --ks-box-shadow-card-inverted: var(--ks-box-shadow-card-base);
3590
+ --ks-box-shadow-control: var(--ks-box-shadow-control-inverted-base);
3591
+ --ks-box-shadow-control-inverted: var(--ks-box-shadow-control-base);
3592
+ --ks-box-shadow-surface: var(--ks-box-shadow-surface-inverted-base);
3593
+ --ks-box-shadow-surface-inverted: var(--ks-box-shadow-surface-base);
3594
+ --ks-box-shadow-card-hover: var(--ks-box-shadow-card-inverted-hover-base);
3595
+ --ks-box-shadow-card-inverted-hover: var(--ks-box-shadow-card-hover-base);
3596
+ --ks-box-shadow-control-hover: var(--ks-box-shadow-control-inverted-hover-base);
3597
+ --ks-box-shadow-control-inverted-hover: var(--ks-box-shadow-control-hover-base);
3598
+ --ks-box-shadow-surface-hover: var(--ks-box-shadow-surface-inverted-hover-base);
3599
+ --ks-box-shadow-surface-inverted-hover: var(--ks-box-shadow-surface-hover-base);
3600
+ }
3601
+
3602
+ :root {
3603
+ --ks-duration-immediate: 50ms;
3604
+ --ks-duration-fast: 100ms;
3605
+ --ks-duration-medium: 150ms;
3606
+ --ks-duration-slow: 300ms;
3607
+ --ks-timing-function-bounce: cubic-bezier(0.17, 1, 0.5, 1.5);
3608
+ --ks-timing-function-ease-out: ease-out;
3609
+ --ks-timing-function-ease-in: ease-in;
3610
+ --ks-timing-function-ease-in-out: ease-in-out;
3611
+ --ks-timing-function-linear: linear;
3612
+ --ks-transition-collapse: var(--ks-duration-slow) var(--ks-timing-function-ease-out);
3613
+ --ks-transition-hover: var(--ks-duration-fast) var(--ks-timing-function-ease-in-out);
3614
+ --ks-transition-fade: var(--ks-duration-slow) var(--ks-timing-function-ease-out);
3615
+ }
3616
+
3617
+ :root,
3618
+ [ks-theme] {
3619
+ --ks-text-color-default-base: var(--ks-color-fg-alpha-3);
3620
+ --ks-text-color-default-inverted-base: var(--ks-color-fg-inverted-alpha-2);
3621
+ --ks-text-color-default-interactive-base: var(--ks-color-link);
3622
+ --ks-text-color-default-inverted-interactive-base: var(--ks-color-link-inverted);
3623
+ --ks-text-color-default-interactive-hover-base: var(--ks-color-link-to-fg-4);
3624
+ --ks-text-color-default-inverted-interactive-hover-base: var(--ks-color-link-inverted-alpha-4);
3625
+ --ks-text-color-default-interactive-active-base: var(--ks-color-link);
3626
+ --ks-text-color-default-inverted-interactive-active-base: var(--ks-color-link-inverted);
3627
+ --ks-text-color-default-interactive-selected-base: var(--ks-color-link);
3628
+ --ks-text-color-default-inverted-interactive-selected-base: var(--ks-color-link-inverted);
3629
+ --ks-text-color-copy-base: var(--ks-color-fg-alpha-3);
3630
+ --ks-text-color-copy-inverted-base: var(--ks-color-fg-inverted-alpha-3);
3631
+ --ks-text-color-copy-interactive-base: var(--ks-color-link);
3632
+ --ks-text-color-copy-inverted-interactive-base: var(--ks-color-link-inverted);
3633
+ --ks-text-color-copy-interactive-hover-base: var(--ks-color-link-to-fg-2);
3634
+ --ks-text-color-copy-inverted-interactive-hover-base: var(--ks-color-link-inverted-to-fg-2);
3635
+ --ks-text-color-copy-interactive-active-base: var(--ks-color-link-to-fg-3);
3636
+ --ks-text-color-copy-inverted-interactive-active-base: var(--ks-color-link-inverted-to-fg-2);
3637
+ --ks-text-color-copy-interactive-selected-base: var(--ks-color-link-to-fg-3);
3638
+ --ks-text-color-copy-inverted-interactive-selected-base: var(--ks-color-link-inverted-to-fg-2);
3639
+ --ks-text-color-display-base: var(--ks-color-fg);
3640
+ --ks-text-color-display-inverted-base: var(--ks-color-fg-inverted);
3641
+ --ks-text-color-display-interactive-base: var(--ks-color-link);
3642
+ --ks-text-color-display-inverted-interactive-base: var(--ks-color-link-inverted);
3643
+ --ks-text-color-display-interactive-hover-base: var(--ks-color-link-to-fg-2);
3644
+ --ks-text-color-display-inverted-interactive-hover-base: var(--ks-color-link-inverted-to-fg-2);
3645
+ --ks-text-color-display-interactive-active-base: var(--ks-color-link-to-fg-3);
3646
+ --ks-text-color-display-inverted-interactive-active-base: var(--ks-color-link-inverted-to-fg-2);
3647
+ --ks-text-color-display-interactive-selected-base: var(--ks-color-link-to-fg-3);
3648
+ --ks-text-color-display-inverted-interactive-selected-base: var(--ks-color-link-inverted-to-fg-2);
3649
+ --ks-text-color-interface-base: var(--ks-color-fg-alpha-2);
3650
+ --ks-text-color-interface-inverted-base: var(--ks-color-fg-inverted-alpha-4);
3651
+ --ks-text-color-interface-interactive-base: var(--ks-color-fg-alpha-4);
3652
+ --ks-text-color-interface-inverted-interactive-base: var(--ks-color-fg-inverted-alpha-3);
3653
+ --ks-text-color-interface-interactive-hover-base: var(--ks-color-fg);
3654
+ --ks-text-color-interface-inverted-interactive-hover-base: var(--ks-color-fg-inverted);
3655
+ --ks-text-color-interface-interactive-active-base: var(--ks-color-fg);
3656
+ --ks-text-color-interface-inverted-interactive-active-base: var(--ks-color-fg-inverted);
3657
+ --ks-text-color-interface-interactive-selected-base: var(--ks-color-fg);
3658
+ --ks-text-color-interface-inverted-interactive-selected-base: var(--ks-color-fg-inverted);
3659
+ --ks-text-color-card-base: var(--ks-color-fg-alpha-2);
3660
+ --ks-text-color-card-inverted-base: var(--ks-color-fg-inverted-alpha-2);
3661
+ --ks-text-color-card-interactive-base: var(--ks-color-fg);
3662
+ --ks-text-color-card-inverted-interactive-base: var(--ks-color-fg-inverted);
3663
+ --ks-text-color-card-interactive-hover-base: var(--ks-color-fg);
3664
+ --ks-text-color-card-inverted-interactive-hover-base: var(--ks-color-fg-inverted);
3665
+ --ks-text-color-card-interactive-active-base: var(--ks-color-fg);
3666
+ --ks-text-color-card-inverted-interactive-active-base: var(--ks-color-fg-inverted);
3667
+ --ks-text-color-card-interactive-selected-base: var(--ks-color-fg);
3668
+ --ks-text-color-card-inverted-interactive-selected-base: var(--ks-color-fg-inverted);
3669
+ --ks-text-color-primary-base: var(--ks-color-primary);
3670
+ --ks-text-color-primary-inverted-base: var(--ks-color-primary-inverted);
3671
+ --ks-text-color-primary-interactive-base: var(--ks-color-primary);
3672
+ --ks-text-color-primary-inverted-interactive-base: var(--ks-color-primary-inverted-alpha-2);
3673
+ --ks-text-color-primary-interactive-hover-base: var(--ks-color-primary-alpha-2);
3674
+ --ks-text-color-primary-inverted-interactive-hover-base: var(--ks-color-primary-inverted-alpha-2);
3675
+ --ks-text-color-primary-interactive-active-base: var(--ks-color-primary-alpha-2);
3676
+ --ks-text-color-primary-inverted-interactive-active-base: var(--ks-color-primary-inverted-alpha-2);
3677
+ --ks-text-color-primary-interactive-selected-base: var(--ks-color-primary-alpha-2);
3678
+ --ks-text-color-primary-inverted-interactive-selected-base: var(--ks-color-primary-inverted-alpha-2);
3679
+ --ks-text-color-positive-base: var(--ks-color-positive);
3680
+ --ks-text-color-positive-inverted-base: var(--ks-color-positive-inverted);
3681
+ --ks-text-color-positive-interactive-base: var(--ks-color-positive);
3682
+ --ks-text-color-positive-inverted-interactive-base: var(--ks-color-positive-inverted-alpha-2);
3683
+ --ks-text-color-positive-interactive-hover-base: var(--ks-color-positive-alpha-2);
3684
+ --ks-text-color-positive-inverted-interactive-hover-base: var(--ks-color-positive-inverted-alpha-2);
3685
+ --ks-text-color-positive-interactive-active-base: var(--ks-color-positive-alpha-2);
3686
+ --ks-text-color-positive-inverted-interactive-active-base: var(--ks-color-positive-inverted-alpha-2);
3687
+ --ks-text-color-positive-interactive-selected-base: var(--ks-color-positive-alpha-2);
3688
+ --ks-text-color-positive-inverted-interactive-selected-base: var(--ks-color-positive-inverted-alpha-2);
3689
+ --ks-text-color-informative-base: var(--ks-color-informative);
3690
+ --ks-text-color-informative-inverted-base: var(--ks-color-informative-inverted);
3691
+ --ks-text-color-informative-interactive-base: var(--ks-color-informative);
3692
+ --ks-text-color-informative-inverted-interactive-base: var(--ks-color-informative-inverted-alpha-2);
3693
+ --ks-text-color-informative-interactive-hover-base: var(--ks-color-informative-alpha-2);
3694
+ --ks-text-color-informative-inverted-interactive-hover-base: var(--ks-color-informative-inverted-alpha-2);
3695
+ --ks-text-color-informative-interactive-active-base: var(--ks-color-informative-alpha-2);
3696
+ --ks-text-color-informative-inverted-interactive-active-base: var(--ks-color-informative-inverted-alpha-2);
3697
+ --ks-text-color-informative-interactive-selected-base: var(--ks-color-informative-alpha-2);
3698
+ --ks-text-color-informative-inverted-interactive-selected-base: var(--ks-color-informative-inverted-alpha-2);
3699
+ --ks-text-color-notice-base: var(--ks-color-notice);
3700
+ --ks-text-color-notice-inverted-base: var(--ks-color-notice-inverted);
3701
+ --ks-text-color-notice-interactive-base: var(--ks-color-notice);
3702
+ --ks-text-color-notice-inverted-interactive-base: var(--ks-color-notice-inverted-alpha-2);
3703
+ --ks-text-color-notice-interactive-hover-base: var(--ks-color-notice-alpha-2);
3704
+ --ks-text-color-notice-inverted-interactive-hover-base: var(--ks-color-notice-inverted-alpha-2);
3705
+ --ks-text-color-notice-interactive-active-base: var(--ks-color-notice-alpha-2);
3706
+ --ks-text-color-notice-inverted-interactive-active-base: var(--ks-color-notice-inverted-alpha-2);
3707
+ --ks-text-color-notice-interactive-selected-base: var(--ks-color-notice-alpha-2);
3708
+ --ks-text-color-notice-inverted-interactive-selected-base: var(--ks-color-notice-inverted-alpha-2);
3709
+ --ks-text-color-negative-base: var(--ks-color-negative);
3710
+ --ks-text-color-negative-inverted-base: var(--ks-color-negative-inverted);
3711
+ --ks-text-color-negative-interactive-base: var(--ks-color-negative);
3712
+ --ks-text-color-negative-inverted-interactive-base: var(--ks-color-negative-inverted-alpha-2);
3713
+ --ks-text-color-negative-interactive-hover-base: var(--ks-color-negative-alpha-2);
3714
+ --ks-text-color-negative-inverted-interactive-hover-base: var(--ks-color-negative-inverted-alpha-2);
3715
+ --ks-text-color-negative-interactive-active-base: var(--ks-color-negative-alpha-2);
3716
+ --ks-text-color-negative-inverted-interactive-active-base: var(--ks-color-negative-inverted-alpha-2);
3717
+ --ks-text-color-negative-interactive-selected-base: var(--ks-color-negative-alpha-2);
3718
+ --ks-text-color-negative-inverted-interactive-selected-base: var(--ks-color-negative-inverted-alpha-2);
3719
+ }
3720
+
3721
+ :root {
3722
+ --ks-text-color-default: var(--ks-text-color-default-base);
3723
+ --ks-text-color-default-inverted: var(--ks-text-color-default-inverted-base);
3724
+ --ks-text-color-default-interactive: var(--ks-text-color-default-interactive-base);
3725
+ --ks-text-color-default-inverted-interactive: var(--ks-text-color-default-inverted-interactive-base);
3726
+ --ks-text-color-default-interactive-hover: var(--ks-text-color-default-interactive-hover-base);
3727
+ --ks-text-color-default-inverted-interactive-hover: var(--ks-text-color-default-inverted-interactive-hover-base);
3728
+ --ks-text-color-default-interactive-active: var(--ks-text-color-default-interactive-active-base);
3729
+ --ks-text-color-default-inverted-interactive-active: var(--ks-text-color-default-inverted-interactive-active-base);
3730
+ --ks-text-color-default-interactive-selected: var(--ks-text-color-default-interactive-selected-base);
3731
+ --ks-text-color-default-inverted-interactive-selected: var(
3732
+ --ks-text-color-default-inverted-interactive-selected-base
3733
+ );
3734
+ --ks-text-color-copy: var(--ks-text-color-copy-base);
3735
+ --ks-text-color-copy-inverted: var(--ks-text-color-copy-inverted-base);
3736
+ --ks-text-color-copy-interactive: var(--ks-text-color-copy-interactive-base);
3737
+ --ks-text-color-copy-inverted-interactive: var(--ks-text-color-copy-inverted-interactive-base);
3738
+ --ks-text-color-copy-interactive-hover: var(--ks-text-color-copy-interactive-hover-base);
3739
+ --ks-text-color-copy-inverted-interactive-hover: var(--ks-text-color-copy-inverted-interactive-hover-base);
3740
+ --ks-text-color-copy-interactive-active: var(--ks-text-color-copy-interactive-active-base);
3741
+ --ks-text-color-copy-inverted-interactive-active: var(--ks-text-color-copy-inverted-interactive-active-base);
3742
+ --ks-text-color-copy-interactive-selected: var(--ks-text-color-copy-interactive-selected-base);
3743
+ --ks-text-color-copy-inverted-interactive-selected: var(--ks-text-color-copy-inverted-interactive-selected-base);
3744
+ --ks-text-color-display: var(--ks-text-color-display-base);
3745
+ --ks-text-color-display-inverted: var(--ks-text-color-display-inverted-base);
3746
+ --ks-text-color-display-interactive: var(--ks-text-color-display-interactive-base);
3747
+ --ks-text-color-display-inverted-interactive: var(--ks-text-color-display-inverted-interactive-base);
3748
+ --ks-text-color-display-interactive-hover: var(--ks-text-color-display-interactive-hover-base);
3749
+ --ks-text-color-display-inverted-interactive-hover: var(--ks-text-color-display-inverted-interactive-hover-base);
3750
+ --ks-text-color-display-interactive-active: var(--ks-text-color-display-interactive-active-base);
3751
+ --ks-text-color-display-inverted-interactive-active: var(--ks-text-color-display-inverted-interactive-active-base);
3752
+ --ks-text-color-display-interactive-selected: var(--ks-text-color-display-interactive-selected-base);
3753
+ --ks-text-color-display-inverted-interactive-selected: var(
3754
+ --ks-text-color-display-inverted-interactive-selected-base
3755
+ );
3756
+ --ks-text-color-interface: var(--ks-text-color-interface-base);
3757
+ --ks-text-color-interface-inverted: var(--ks-text-color-interface-inverted-base);
3758
+ --ks-text-color-interface-interactive: var(--ks-text-color-interface-interactive-base);
3759
+ --ks-text-color-interface-inverted-interactive: var(--ks-text-color-interface-inverted-interactive-base);
3760
+ --ks-text-color-interface-interactive-hover: var(--ks-text-color-interface-interactive-hover-base);
3761
+ --ks-text-color-interface-inverted-interactive-hover: var(--ks-text-color-interface-inverted-interactive-hover-base);
3762
+ --ks-text-color-interface-interactive-active: var(--ks-text-color-interface-interactive-active-base);
3763
+ --ks-text-color-interface-inverted-interactive-active: var(
3764
+ --ks-text-color-interface-inverted-interactive-active-base
3765
+ );
3766
+ --ks-text-color-interface-interactive-selected: var(--ks-text-color-interface-interactive-selected-base);
3767
+ --ks-text-color-interface-inverted-interactive-selected: var(
3768
+ --ks-text-color-interface-inverted-interactive-selected-base
3769
+ );
3770
+ --ks-text-color-card: var(--ks-text-color-card-base);
3771
+ --ks-text-color-card-inverted: var(--ks-text-color-card-inverted-base);
3772
+ --ks-text-color-card-interactive: var(--ks-text-color-card-interactive-base);
3773
+ --ks-text-color-card-inverted-interactive: var(--ks-text-color-card-inverted-interactive-base);
3774
+ --ks-text-color-card-interactive-hover: var(--ks-text-color-card-interactive-hover-base);
3775
+ --ks-text-color-card-inverted-interactive-hover: var(--ks-text-color-card-inverted-interactive-hover-base);
3776
+ --ks-text-color-card-interactive-active: var(--ks-text-color-card-interactive-active-base);
3777
+ --ks-text-color-card-inverted-interactive-active: var(--ks-text-color-card-inverted-interactive-active-base);
3778
+ --ks-text-color-card-interactive-selected: var(--ks-text-color-card-interactive-selected-base);
3779
+ --ks-text-color-card-inverted-interactive-selected: var(--ks-text-color-card-inverted-interactive-selected-base);
3780
+ --ks-text-color-primary: var(--ks-text-color-primary-base);
3781
+ --ks-text-color-primary-inverted: var(--ks-text-color-primary-inverted-base);
3782
+ --ks-text-color-primary-interactive: var(--ks-text-color-primary-interactive-base);
3783
+ --ks-text-color-primary-inverted-interactive: var(--ks-text-color-primary-inverted-interactive-base);
3784
+ --ks-text-color-primary-interactive-hover: var(--ks-text-color-primary-interactive-hover-base);
3785
+ --ks-text-color-primary-inverted-interactive-hover: var(--ks-text-color-primary-inverted-interactive-hover-base);
3786
+ --ks-text-color-primary-interactive-active: var(--ks-text-color-primary-interactive-active-base);
3787
+ --ks-text-color-primary-inverted-interactive-active: var(--ks-text-color-primary-inverted-interactive-active-base);
3788
+ --ks-text-color-primary-interactive-selected: var(--ks-text-color-primary-interactive-selected-base);
3789
+ --ks-text-color-primary-inverted-interactive-selected: var(
3790
+ --ks-text-color-primary-inverted-interactive-selected-base
3791
+ );
3792
+ --ks-text-color-positive: var(--ks-text-color-positive-base);
3793
+ --ks-text-color-positive-inverted: var(--ks-text-color-positive-inverted-base);
3794
+ --ks-text-color-positive-interactive: var(--ks-text-color-positive-interactive-base);
3795
+ --ks-text-color-positive-inverted-interactive: var(--ks-text-color-positive-inverted-interactive-base);
3796
+ --ks-text-color-positive-interactive-hover: var(--ks-text-color-positive-interactive-hover-base);
3797
+ --ks-text-color-positive-inverted-interactive-hover: var(--ks-text-color-positive-inverted-interactive-hover-base);
3798
+ --ks-text-color-positive-interactive-active: var(--ks-text-color-positive-interactive-active-base);
3799
+ --ks-text-color-positive-inverted-interactive-active: var(--ks-text-color-positive-inverted-interactive-active-base);
3800
+ --ks-text-color-positive-interactive-selected: var(--ks-text-color-positive-interactive-selected-base);
3801
+ --ks-text-color-positive-inverted-interactive-selected: var(
3802
+ --ks-text-color-positive-inverted-interactive-selected-base
3803
+ );
3804
+ --ks-text-color-informative: var(--ks-text-color-informative-base);
3805
+ --ks-text-color-informative-inverted: var(--ks-text-color-informative-inverted-base);
3806
+ --ks-text-color-informative-interactive: var(--ks-text-color-informative-interactive-base);
3807
+ --ks-text-color-informative-inverted-interactive: var(--ks-text-color-informative-inverted-interactive-base);
3808
+ --ks-text-color-informative-interactive-hover: var(--ks-text-color-informative-interactive-hover-base);
3809
+ --ks-text-color-informative-inverted-interactive-hover: var(
3810
+ --ks-text-color-informative-inverted-interactive-hover-base
3811
+ );
3812
+ --ks-text-color-informative-interactive-active: var(--ks-text-color-informative-interactive-active-base);
3813
+ --ks-text-color-informative-inverted-interactive-active: var(
3814
+ --ks-text-color-informative-inverted-interactive-active-base
3815
+ );
3816
+ --ks-text-color-informative-interactive-selected: var(--ks-text-color-informative-interactive-selected-base);
3817
+ --ks-text-color-informative-inverted-interactive-selected: var(
3818
+ --ks-text-color-informative-inverted-interactive-selected-base
3819
+ );
3820
+ --ks-text-color-notice: var(--ks-text-color-notice-base);
3821
+ --ks-text-color-notice-inverted: var(--ks-text-color-notice-inverted-base);
3822
+ --ks-text-color-notice-interactive: var(--ks-text-color-notice-interactive-base);
3823
+ --ks-text-color-notice-inverted-interactive: var(--ks-text-color-notice-inverted-interactive-base);
3824
+ --ks-text-color-notice-interactive-hover: var(--ks-text-color-notice-interactive-hover-base);
3825
+ --ks-text-color-notice-inverted-interactive-hover: var(--ks-text-color-notice-inverted-interactive-hover-base);
3826
+ --ks-text-color-notice-interactive-active: var(--ks-text-color-notice-interactive-active-base);
3827
+ --ks-text-color-notice-inverted-interactive-active: var(--ks-text-color-notice-inverted-interactive-active-base);
3828
+ --ks-text-color-notice-interactive-selected: var(--ks-text-color-notice-interactive-selected-base);
3829
+ --ks-text-color-notice-inverted-interactive-selected: var(--ks-text-color-notice-inverted-interactive-selected-base);
3830
+ --ks-text-color-negative: var(--ks-text-color-negative-base);
3831
+ --ks-text-color-negative-inverted: var(--ks-text-color-negative-inverted-base);
3832
+ --ks-text-color-negative-interactive: var(--ks-text-color-negative-interactive-base);
3833
+ --ks-text-color-negative-inverted-interactive: var(--ks-text-color-negative-inverted-interactive-base);
3834
+ --ks-text-color-negative-interactive-hover: var(--ks-text-color-negative-interactive-hover-base);
3835
+ --ks-text-color-negative-inverted-interactive-hover: var(--ks-text-color-negative-inverted-interactive-hover-base);
3836
+ --ks-text-color-negative-interactive-active: var(--ks-text-color-negative-interactive-active-base);
3837
+ --ks-text-color-negative-inverted-interactive-active: var(--ks-text-color-negative-inverted-interactive-active-base);
3838
+ --ks-text-color-negative-interactive-selected: var(--ks-text-color-negative-interactive-selected-base);
3839
+ --ks-text-color-negative-inverted-interactive-selected: var(
3840
+ --ks-text-color-negative-inverted-interactive-selected-base
3841
+ );
3842
+ }
3843
+
3844
+ [ks-inverted=true] {
3845
+ --ks-text-color-default: var(--ks-text-color-default-inverted-base);
3846
+ --ks-text-color-default-inverted: var(--ks-text-color-default-base);
3847
+ --ks-text-color-default-interactive: var(--ks-text-color-default-inverted-interactive-base);
3848
+ --ks-text-color-default-inverted-interactive: var(--ks-text-color-default-interactive-base);
3849
+ --ks-text-color-default-interactive-hover: var(--ks-text-color-default-inverted-interactive-hover-base);
3850
+ --ks-text-color-default-inverted-interactive-hover: var(--ks-text-color-default-interactive-hover-base);
3851
+ --ks-text-color-default-interactive-active: var(--ks-text-color-default-inverted-interactive-active-base);
3852
+ --ks-text-color-default-inverted-interactive-active: var(--ks-text-color-default-interactive-active-base);
3853
+ --ks-text-color-default-interactive-selected: var(--ks-text-color-default-inverted-interactive-selected-base);
3854
+ --ks-text-color-default-inverted-interactive-selected: var(--ks-text-color-default-interactive-selected-base);
3855
+ --ks-text-color-copy: var(--ks-text-color-copy-inverted-base);
3856
+ --ks-text-color-copy-inverted: var(--ks-text-color-copy-base);
3857
+ --ks-text-color-copy-interactive: var(--ks-text-color-copy-inverted-interactive-base);
3858
+ --ks-text-color-copy-inverted-interactive: var(--ks-text-color-copy-interactive-base);
3859
+ --ks-text-color-copy-interactive-hover: var(--ks-text-color-copy-inverted-interactive-hover-base);
3860
+ --ks-text-color-copy-inverted-interactive-hover: var(--ks-text-color-copy-interactive-hover-base);
3861
+ --ks-text-color-copy-interactive-active: var(--ks-text-color-copy-inverted-interactive-active-base);
3862
+ --ks-text-color-copy-inverted-interactive-active: var(--ks-text-color-copy-interactive-active-base);
3863
+ --ks-text-color-copy-interactive-selected: var(--ks-text-color-copy-inverted-interactive-selected-base);
3864
+ --ks-text-color-copy-inverted-interactive-selected: var(--ks-text-color-copy-interactive-selected-base);
3865
+ --ks-text-color-display: var(--ks-text-color-display-inverted-base);
3866
+ --ks-text-color-display-inverted: var(--ks-text-color-display-base);
3867
+ --ks-text-color-display-interactive: var(--ks-text-color-display-inverted-interactive-base);
3868
+ --ks-text-color-display-inverted-interactive: var(--ks-text-color-display-interactive-base);
3869
+ --ks-text-color-display-interactive-hover: var(--ks-text-color-display-inverted-interactive-hover-base);
3870
+ --ks-text-color-display-inverted-interactive-hover: var(--ks-text-color-display-interactive-hover-base);
3871
+ --ks-text-color-display-interactive-active: var(--ks-text-color-display-inverted-interactive-active-base);
3872
+ --ks-text-color-display-inverted-interactive-active: var(--ks-text-color-display-interactive-active-base);
3873
+ --ks-text-color-display-interactive-selected: var(--ks-text-color-display-inverted-interactive-selected-base);
3874
+ --ks-text-color-display-inverted-interactive-selected: var(--ks-text-color-display-interactive-selected-base);
3875
+ --ks-text-color-interface: var(--ks-text-color-interface-inverted-base);
3876
+ --ks-text-color-interface-inverted: var(--ks-text-color-interface-base);
3877
+ --ks-text-color-interface-interactive: var(--ks-text-color-interface-inverted-interactive-base);
3878
+ --ks-text-color-interface-inverted-interactive: var(--ks-text-color-interface-interactive-base);
3879
+ --ks-text-color-interface-interactive-hover: var(--ks-text-color-interface-inverted-interactive-hover-base);
3880
+ --ks-text-color-interface-inverted-interactive-hover: var(--ks-text-color-interface-interactive-hover-base);
3881
+ --ks-text-color-interface-interactive-active: var(--ks-text-color-interface-inverted-interactive-active-base);
3882
+ --ks-text-color-interface-inverted-interactive-active: var(--ks-text-color-interface-interactive-active-base);
3883
+ --ks-text-color-interface-interactive-selected: var(--ks-text-color-interface-inverted-interactive-selected-base);
3884
+ --ks-text-color-interface-inverted-interactive-selected: var(--ks-text-color-interface-interactive-selected-base);
3885
+ --ks-text-color-card: var(--ks-text-color-card-inverted-base);
3886
+ --ks-text-color-card-inverted: var(--ks-text-color-card-base);
3887
+ --ks-text-color-card-interactive: var(--ks-text-color-card-inverted-interactive-base);
3888
+ --ks-text-color-card-inverted-interactive: var(--ks-text-color-card-interactive-base);
3889
+ --ks-text-color-card-interactive-hover: var(--ks-text-color-card-inverted-interactive-hover-base);
3890
+ --ks-text-color-card-inverted-interactive-hover: var(--ks-text-color-card-interactive-hover-base);
3891
+ --ks-text-color-card-interactive-active: var(--ks-text-color-card-inverted-interactive-active-base);
3892
+ --ks-text-color-card-inverted-interactive-active: var(--ks-text-color-card-interactive-active-base);
3893
+ --ks-text-color-card-interactive-selected: var(--ks-text-color-card-inverted-interactive-selected-base);
3894
+ --ks-text-color-card-inverted-interactive-selected: var(--ks-text-color-card-interactive-selected-base);
3895
+ --ks-text-color-primary: var(--ks-text-color-primary-inverted-base);
3896
+ --ks-text-color-primary-inverted: var(--ks-text-color-primary-base);
3897
+ --ks-text-color-primary-interactive: var(--ks-text-color-primary-inverted-interactive-base);
3898
+ --ks-text-color-primary-inverted-interactive: var(--ks-text-color-primary-interactive-base);
3899
+ --ks-text-color-primary-interactive-hover: var(--ks-text-color-primary-inverted-interactive-hover-base);
3900
+ --ks-text-color-primary-inverted-interactive-hover: var(--ks-text-color-primary-interactive-hover-base);
3901
+ --ks-text-color-primary-interactive-active: var(--ks-text-color-primary-inverted-interactive-active-base);
3902
+ --ks-text-color-primary-inverted-interactive-active: var(--ks-text-color-primary-interactive-active-base);
3903
+ --ks-text-color-primary-interactive-selected: var(--ks-text-color-primary-inverted-interactive-selected-base);
3904
+ --ks-text-color-primary-inverted-interactive-selected: var(--ks-text-color-primary-interactive-selected-base);
3905
+ --ks-text-color-positive: var(--ks-text-color-positive-inverted-base);
3906
+ --ks-text-color-positive-inverted: var(--ks-text-color-positive-base);
3907
+ --ks-text-color-positive-interactive: var(--ks-text-color-positive-inverted-interactive-base);
3908
+ --ks-text-color-positive-inverted-interactive: var(--ks-text-color-positive-interactive-base);
3909
+ --ks-text-color-positive-interactive-hover: var(--ks-text-color-positive-inverted-interactive-hover-base);
3910
+ --ks-text-color-positive-inverted-interactive-hover: var(--ks-text-color-positive-interactive-hover-base);
3911
+ --ks-text-color-positive-interactive-active: var(--ks-text-color-positive-inverted-interactive-active-base);
3912
+ --ks-text-color-positive-inverted-interactive-active: var(--ks-text-color-positive-interactive-active-base);
3913
+ --ks-text-color-positive-interactive-selected: var(--ks-text-color-positive-inverted-interactive-selected-base);
3914
+ --ks-text-color-positive-inverted-interactive-selected: var(--ks-text-color-positive-interactive-selected-base);
3915
+ --ks-text-color-informative: var(--ks-text-color-informative-inverted-base);
3916
+ --ks-text-color-informative-inverted: var(--ks-text-color-informative-base);
3917
+ --ks-text-color-informative-interactive: var(--ks-text-color-informative-inverted-interactive-base);
3918
+ --ks-text-color-informative-inverted-interactive: var(--ks-text-color-informative-interactive-base);
3919
+ --ks-text-color-informative-interactive-hover: var(--ks-text-color-informative-inverted-interactive-hover-base);
3920
+ --ks-text-color-informative-inverted-interactive-hover: var(--ks-text-color-informative-interactive-hover-base);
3921
+ --ks-text-color-informative-interactive-active: var(--ks-text-color-informative-inverted-interactive-active-base);
3922
+ --ks-text-color-informative-inverted-interactive-active: var(--ks-text-color-informative-interactive-active-base);
3923
+ --ks-text-color-informative-interactive-selected: var(--ks-text-color-informative-inverted-interactive-selected-base);
3924
+ --ks-text-color-informative-inverted-interactive-selected: var(--ks-text-color-informative-interactive-selected-base);
3925
+ --ks-text-color-notice: var(--ks-text-color-notice-inverted-base);
3926
+ --ks-text-color-notice-inverted: var(--ks-text-color-notice-base);
3927
+ --ks-text-color-notice-interactive: var(--ks-text-color-notice-inverted-interactive-base);
3928
+ --ks-text-color-notice-inverted-interactive: var(--ks-text-color-notice-interactive-base);
3929
+ --ks-text-color-notice-interactive-hover: var(--ks-text-color-notice-inverted-interactive-hover-base);
3930
+ --ks-text-color-notice-inverted-interactive-hover: var(--ks-text-color-notice-interactive-hover-base);
3931
+ --ks-text-color-notice-interactive-active: var(--ks-text-color-notice-inverted-interactive-active-base);
3932
+ --ks-text-color-notice-inverted-interactive-active: var(--ks-text-color-notice-interactive-active-base);
3933
+ --ks-text-color-notice-interactive-selected: var(--ks-text-color-notice-inverted-interactive-selected-base);
3934
+ --ks-text-color-notice-inverted-interactive-selected: var(--ks-text-color-notice-interactive-selected-base);
3935
+ --ks-text-color-negative: var(--ks-text-color-negative-inverted-base);
3936
+ --ks-text-color-negative-inverted: var(--ks-text-color-negative-base);
3937
+ --ks-text-color-negative-interactive: var(--ks-text-color-negative-inverted-interactive-base);
3938
+ --ks-text-color-negative-inverted-interactive: var(--ks-text-color-negative-interactive-base);
3939
+ --ks-text-color-negative-interactive-hover: var(--ks-text-color-negative-inverted-interactive-hover-base);
3940
+ --ks-text-color-negative-inverted-interactive-hover: var(--ks-text-color-negative-interactive-hover-base);
3941
+ --ks-text-color-negative-interactive-active: var(--ks-text-color-negative-inverted-interactive-active-base);
3942
+ --ks-text-color-negative-inverted-interactive-active: var(--ks-text-color-negative-interactive-active-base);
3943
+ --ks-text-color-negative-interactive-selected: var(--ks-text-color-negative-inverted-interactive-selected-base);
3944
+ --ks-text-color-negative-inverted-interactive-selected: var(--ks-text-color-negative-interactive-selected-base);
3945
+ }
3946
+
3947
+ :root,
3948
+ [ks-theme] {
3949
+ --ks-border-color-accent-base: var(--ks-color-primary-to-bg-8);
3950
+ --ks-border-color-accent-inverted-base: var(--ks-color-primary-inverted-to-bg-8);
3951
+ --ks-border-color-clear-base: var(--ks-color-transparent);
3952
+ --ks-border-color-clear-inverted-base: var(--ks-color-transparent);
3953
+ --ks-border-color-clear-interactive-base: var(--ks-color-transparent);
3954
+ --ks-border-color-clear-inverted-interactive-base: var(--ks-color-transparent);
3955
+ --ks-border-color-clear-interactive-hover-base: var(--ks-color-primary-alpha-8);
3956
+ --ks-border-color-clear-inverted-interactive-hover-base: var(--ks-color-primary-inverted-alpha-7);
3957
+ --ks-border-color-clear-interactive-active-base: var(--ks-color-primary-alpha-7);
3958
+ --ks-border-color-clear-inverted-interactive-active-base: var(--ks-color-primary-inverted-alpha-6);
3959
+ --ks-border-color-clear-interactive-selected-base: var(--ks-color-primary-alpha-6);
3960
+ --ks-border-color-clear-inverted-interactive-selected-base: var(--ks-color-primary-inverted-alpha-5);
3961
+ --ks-border-color-default-base: var(--ks-color-fg-alpha-8);
3962
+ --ks-border-color-default-inverted-base: var(--ks-color-fg-inverted-alpha-8);
3963
+ --ks-border-color-interface-base: var(--ks-color-primary-alpha-8);
3964
+ --ks-border-color-interface-inverted-base: var(--ks-color-fg-inverted-alpha-8);
3965
+ --ks-border-color-interface-interactive-base: var(--ks-color-fg-alpha-7);
3966
+ --ks-border-color-interface-inverted-interactive-base: var(--ks-color-fg-inverted-alpha-7);
3967
+ --ks-border-color-interface-interactive-disabled-base: var(--ks-color-fg-alpha-8);
3968
+ --ks-border-color-interface-inverted-interactive-disabled-base: var(--ks-color-fg-inverted-alpha-8);
3969
+ --ks-border-color-interface-interactive-hover-base: var(--ks-color-fg-alpha-5);
3970
+ --ks-border-color-interface-inverted-interactive-hover-base: var(--ks-color-fg-inverted-alpha-5);
3971
+ --ks-border-color-interface-interactive-active-base: var(--ks-color-primary);
3972
+ --ks-border-color-interface-inverted-interactive-active-base: var(--ks-color-fg-inverted-alpha-5);
3973
+ --ks-border-color-interface-interactive-selected-base: var(--ks-color-primary);
3974
+ --ks-border-color-interface-inverted-interactive-selected-base: var(--ks-color-primary-inverted);
3975
+ --ks-border-color-card-base: var(--ks-color-fg-alpha-9);
3976
+ --ks-border-color-card-inverted-base: var(--ks-color-fg-inverted-alpha-9);
3977
+ --ks-border-color-card-interactive-base: var(--ks-color-fg-alpha-8);
3978
+ --ks-border-color-card-inverted-interactive-base: var(--ks-color-fg-inverted-alpha-5);
3979
+ --ks-border-color-card-interactive-disabled-base: var(--ks-color-fg-alpha-8);
3980
+ --ks-border-color-card-inverted-interactive-disabled-base: var(--ks-color-fg-inverted-alpha-2);
3981
+ --ks-border-color-card-interactive-hover-base: var(--ks-color-fg-alpha-5);
3982
+ --ks-border-color-card-inverted-interactive-hover-base: var(--ks-color-fg-inverted-alpha-3);
3983
+ --ks-border-color-card-interactive-active-base: var(--ks-color-fg-alpha-3);
3984
+ --ks-border-color-card-inverted-interactive-active-base: var(--ks-color-fg-inverted-alpha-1);
3985
+ --ks-border-color-card-interactive-selected-base: var(--ks-color-primary);
3986
+ --ks-border-color-card-inverted-interactive-selected-base: var(--ks-color-primary-inverted);
3987
+ --ks-border-color-primary-base: var(--ks-color-primary);
3988
+ --ks-border-color-primary-inverted-base: var(--ks-color-primary-inverted);
3989
+ --ks-border-color-primary-interactive-base: var(--ks-color-primary);
3990
+ --ks-border-color-primary-inverted-interactive-base: var(--ks-color-primary-inverted);
3991
+ --ks-border-color-primary-interactive-hover-base: var(--ks-color-primary-to-bg-2);
3992
+ --ks-border-color-primary-inverted-interactive-hover-base: var(--ks-color-primary-inverted-to-bg-2);
3993
+ --ks-border-color-primary-interactive-active-base: var(--ks-color-primary-to-bg-3);
3994
+ --ks-border-color-primary-inverted-interactive-active-base: var(--ks-color-primary-inverted-to-bg-3);
3995
+ --ks-border-color-primary-interactive-selected-base: var(--ks-color-primary);
3996
+ --ks-border-color-primary-inverted-interactive-selected-base: var(--ks-color-primary-inverted);
3997
+ --ks-border-color-primary-translucent-base: var(--ks-color-primary-alpha-2);
3998
+ --ks-border-color-primary-inverted-translucent-base: var(--ks-color-primary-inverted-alpha-2);
3999
+ --ks-border-color-positive-base: var(--ks-color-positive);
4000
+ --ks-border-color-positive-inverted-base: var(--ks-color-positive-inverted);
4001
+ --ks-border-color-positive-interactive-base: var(--ks-color-positive);
4002
+ --ks-border-color-positive-inverted-interactive-base: var(--ks-color-positive-inverted);
4003
+ --ks-border-color-positive-interactive-hover-base: var(--ks-color-positive-to-bg-2);
4004
+ --ks-border-color-positive-inverted-interactive-hover-base: var(--ks-color-positive-inverted-to-bg-2);
4005
+ --ks-border-color-positive-interactive-active-base: var(--ks-color-positive-to-bg-3);
4006
+ --ks-border-color-positive-inverted-interactive-active-base: var(--ks-color-positive-inverted-to-bg-3);
4007
+ --ks-border-color-positive-interactive-selected-base: var(--ks-color-positive);
4008
+ --ks-border-color-positive-inverted-interactive-selected-base: var(--ks-color-positive-inverted);
4009
+ --ks-border-color-positive-translucent-base: var(--ks-color-positive-alpha-2);
4010
+ --ks-border-color-positive-inverted-translucent-base: var(--ks-color-positive-inverted-alpha-2);
4011
+ --ks-border-color-informative-base: var(--ks-color-informative);
4012
+ --ks-border-color-informative-inverted-base: var(--ks-color-informative-inverted);
4013
+ --ks-border-color-informative-interactive-base: var(--ks-color-informative);
4014
+ --ks-border-color-informative-inverted-interactive-base: var(--ks-color-informative-inverted);
4015
+ --ks-border-color-informative-interactive-hover-base: var(--ks-color-informative-to-bg-2);
4016
+ --ks-border-color-informative-inverted-interactive-hover-base: var(--ks-color-informative-inverted-to-bg-2);
4017
+ --ks-border-color-informative-interactive-active-base: var(--ks-color-informative-to-bg-3);
4018
+ --ks-border-color-informative-inverted-interactive-active-base: var(--ks-color-informative-inverted-to-bg-3);
4019
+ --ks-border-color-informative-interactive-selected-base: var(--ks-color-informative);
4020
+ --ks-border-color-informative-inverted-interactive-selected-base: var(--ks-color-informative-inverted);
4021
+ --ks-border-color-informative-translucent-base: var(--ks-color-informative-alpha-2);
4022
+ --ks-border-color-informative-inverted-translucent-base: var(--ks-color-informative-inverted-alpha-2);
4023
+ --ks-border-color-notice-base: var(--ks-color-notice);
4024
+ --ks-border-color-notice-inverted-base: var(--ks-color-notice-inverted);
4025
+ --ks-border-color-notice-interactive-base: var(--ks-color-notice);
4026
+ --ks-border-color-notice-inverted-interactive-base: var(--ks-color-notice-inverted);
4027
+ --ks-border-color-notice-interactive-hover-base: var(--ks-color-notice-to-bg-2);
4028
+ --ks-border-color-notice-inverted-interactive-hover-base: var(--ks-color-notice-inverted-to-bg-2);
4029
+ --ks-border-color-notice-interactive-active-base: var(--ks-color-notice-to-bg-3);
4030
+ --ks-border-color-notice-inverted-interactive-active-base: var(--ks-color-notice-inverted-to-bg-3);
4031
+ --ks-border-color-notice-interactive-selected-base: var(--ks-color-notice);
4032
+ --ks-border-color-notice-inverted-interactive-selected-base: var(--ks-color-notice-inverted);
4033
+ --ks-border-color-notice-translucent-base: var(--ks-color-notice-alpha-2);
4034
+ --ks-border-color-notice-inverted-translucent-base: var(--ks-color-notice-inverted-alpha-2);
4035
+ --ks-border-color-negative-base: var(--ks-color-negative);
4036
+ --ks-border-color-negative-inverted-base: var(--ks-color-negative-inverted);
4037
+ --ks-border-color-negative-interactive-base: var(--ks-color-negative);
4038
+ --ks-border-color-negative-inverted-interactive-base: var(--ks-color-negative-inverted);
4039
+ --ks-border-color-negative-interactive-hover-base: var(--ks-color-negative-to-bg-2);
4040
+ --ks-border-color-negative-inverted-interactive-hover-base: var(--ks-color-negative-inverted-to-bg-2);
4041
+ --ks-border-color-negative-interactive-active-base: var(--ks-color-negative-to-bg-3);
4042
+ --ks-border-color-negative-inverted-interactive-active-base: var(--ks-color-negative-inverted-to-bg-3);
4043
+ --ks-border-color-negative-interactive-selected-base: var(--ks-color-negative);
4044
+ --ks-border-color-negative-inverted-interactive-selected-base: var(--ks-color-negative-inverted);
4045
+ --ks-border-color-negative-translucent-base: var(--ks-color-negative-alpha-2);
4046
+ --ks-border-color-negative-inverted-translucent-base: var(--ks-color-negative-inverted-alpha-2);
4047
+ }
4048
+
4049
+ :root {
4050
+ --ks-border-color-accent: var(--ks-border-color-accent-base);
4051
+ --ks-border-color-accent-inverted: var(--ks-border-color-accent-inverted-base);
4052
+ --ks-border-color-clear: var(--ks-border-color-clear-base);
4053
+ --ks-border-color-clear-inverted: var(--ks-border-color-clear-inverted-base);
4054
+ --ks-border-color-clear-interactive: var(--ks-border-color-clear-interactive-base);
4055
+ --ks-border-color-clear-inverted-interactive: var(--ks-border-color-clear-inverted-interactive-base);
4056
+ --ks-border-color-clear-interactive-hover: var(--ks-border-color-clear-interactive-hover-base);
4057
+ --ks-border-color-clear-inverted-interactive-hover: var(--ks-border-color-clear-inverted-interactive-hover-base);
4058
+ --ks-border-color-clear-interactive-active: var(--ks-border-color-clear-interactive-active-base);
4059
+ --ks-border-color-clear-inverted-interactive-active: var(--ks-border-color-clear-inverted-interactive-active-base);
4060
+ --ks-border-color-clear-interactive-selected: var(--ks-border-color-clear-interactive-selected-base);
4061
+ --ks-border-color-clear-inverted-interactive-selected: var(
4062
+ --ks-border-color-clear-inverted-interactive-selected-base
4063
+ );
4064
+ --ks-border-color-default: var(--ks-border-color-default-base);
4065
+ --ks-border-color-default-inverted: var(--ks-border-color-default-inverted-base);
4066
+ --ks-border-color-interface: var(--ks-border-color-interface-base);
4067
+ --ks-border-color-interface-inverted: var(--ks-border-color-interface-inverted-base);
4068
+ --ks-border-color-interface-interactive: var(--ks-border-color-interface-interactive-base);
4069
+ --ks-border-color-interface-inverted-interactive: var(--ks-border-color-interface-inverted-interactive-base);
4070
+ --ks-border-color-interface-interactive-disabled: var(--ks-border-color-interface-interactive-disabled-base);
4071
+ --ks-border-color-interface-inverted-interactive-disabled: var(
4072
+ --ks-border-color-interface-inverted-interactive-disabled-base
4073
+ );
4074
+ --ks-border-color-interface-interactive-hover: var(--ks-border-color-interface-interactive-hover-base);
4075
+ --ks-border-color-interface-inverted-interactive-hover: var(
4076
+ --ks-border-color-interface-inverted-interactive-hover-base
4077
+ );
4078
+ --ks-border-color-interface-interactive-active: var(--ks-border-color-interface-interactive-active-base);
4079
+ --ks-border-color-interface-inverted-interactive-active: var(
4080
+ --ks-border-color-interface-inverted-interactive-active-base
4081
+ );
4082
+ --ks-border-color-interface-interactive-selected: var(--ks-border-color-interface-interactive-selected-base);
4083
+ --ks-border-color-interface-inverted-interactive-selected: var(
4084
+ --ks-border-color-interface-inverted-interactive-selected-base
4085
+ );
4086
+ --ks-border-color-card: var(--ks-border-color-card-base);
4087
+ --ks-border-color-card-inverted: var(--ks-border-color-card-inverted-base);
4088
+ --ks-border-color-card-interactive: var(--ks-border-color-card-interactive-base);
4089
+ --ks-border-color-card-inverted-interactive: var(--ks-border-color-card-inverted-interactive-base);
4090
+ --ks-border-color-card-interactive-disabled: var(--ks-border-color-card-interactive-disabled-base);
4091
+ --ks-border-color-card-inverted-interactive-disabled: var(--ks-border-color-card-inverted-interactive-disabled-base);
4092
+ --ks-border-color-card-interactive-hover: var(--ks-border-color-card-interactive-hover-base);
4093
+ --ks-border-color-card-inverted-interactive-hover: var(--ks-border-color-card-inverted-interactive-hover-base);
4094
+ --ks-border-color-card-interactive-active: var(--ks-border-color-card-interactive-active-base);
4095
+ --ks-border-color-card-inverted-interactive-active: var(--ks-border-color-card-inverted-interactive-active-base);
4096
+ --ks-border-color-card-interactive-selected: var(--ks-border-color-card-interactive-selected-base);
4097
+ --ks-border-color-card-inverted-interactive-selected: var(--ks-border-color-card-inverted-interactive-selected-base);
4098
+ --ks-border-color-primary: var(--ks-border-color-primary-base);
4099
+ --ks-border-color-primary-inverted: var(--ks-border-color-primary-inverted-base);
4100
+ --ks-border-color-primary-interactive: var(--ks-border-color-primary-interactive-base);
4101
+ --ks-border-color-primary-inverted-interactive: var(--ks-border-color-primary-inverted-interactive-base);
4102
+ --ks-border-color-primary-interactive-hover: var(--ks-border-color-primary-interactive-hover-base);
4103
+ --ks-border-color-primary-inverted-interactive-hover: var(--ks-border-color-primary-inverted-interactive-hover-base);
4104
+ --ks-border-color-primary-interactive-active: var(--ks-border-color-primary-interactive-active-base);
4105
+ --ks-border-color-primary-inverted-interactive-active: var(
4106
+ --ks-border-color-primary-inverted-interactive-active-base
4107
+ );
4108
+ --ks-border-color-primary-interactive-selected: var(--ks-border-color-primary-interactive-selected-base);
4109
+ --ks-border-color-primary-inverted-interactive-selected: var(
4110
+ --ks-border-color-primary-inverted-interactive-selected-base
4111
+ );
4112
+ --ks-border-color-primary-translucent: var(--ks-border-color-primary-translucent-base);
4113
+ --ks-border-color-primary-inverted-translucent: var(--ks-border-color-primary-inverted-translucent-base);
4114
+ --ks-border-color-positive: var(--ks-border-color-positive-base);
4115
+ --ks-border-color-positive-inverted: var(--ks-border-color-positive-inverted-base);
4116
+ --ks-border-color-positive-interactive: var(--ks-border-color-positive-interactive-base);
4117
+ --ks-border-color-positive-inverted-interactive: var(--ks-border-color-positive-inverted-interactive-base);
4118
+ --ks-border-color-positive-interactive-hover: var(--ks-border-color-positive-interactive-hover-base);
4119
+ --ks-border-color-positive-inverted-interactive-hover: var(
4120
+ --ks-border-color-positive-inverted-interactive-hover-base
4121
+ );
4122
+ --ks-border-color-positive-interactive-active: var(--ks-border-color-positive-interactive-active-base);
4123
+ --ks-border-color-positive-inverted-interactive-active: var(
4124
+ --ks-border-color-positive-inverted-interactive-active-base
4125
+ );
4126
+ --ks-border-color-positive-interactive-selected: var(--ks-border-color-positive-interactive-selected-base);
4127
+ --ks-border-color-positive-inverted-interactive-selected: var(
4128
+ --ks-border-color-positive-inverted-interactive-selected-base
4129
+ );
4130
+ --ks-border-color-positive-translucent: var(--ks-border-color-positive-translucent-base);
4131
+ --ks-border-color-positive-inverted-translucent: var(--ks-border-color-positive-inverted-translucent-base);
4132
+ --ks-border-color-informative: var(--ks-border-color-informative-base);
4133
+ --ks-border-color-informative-inverted: var(--ks-border-color-informative-inverted-base);
4134
+ --ks-border-color-informative-interactive: var(--ks-border-color-informative-interactive-base);
4135
+ --ks-border-color-informative-inverted-interactive: var(--ks-border-color-informative-inverted-interactive-base);
4136
+ --ks-border-color-informative-interactive-hover: var(--ks-border-color-informative-interactive-hover-base);
4137
+ --ks-border-color-informative-inverted-interactive-hover: var(
4138
+ --ks-border-color-informative-inverted-interactive-hover-base
4139
+ );
4140
+ --ks-border-color-informative-interactive-active: var(--ks-border-color-informative-interactive-active-base);
4141
+ --ks-border-color-informative-inverted-interactive-active: var(
4142
+ --ks-border-color-informative-inverted-interactive-active-base
4143
+ );
4144
+ --ks-border-color-informative-interactive-selected: var(--ks-border-color-informative-interactive-selected-base);
4145
+ --ks-border-color-informative-inverted-interactive-selected: var(
4146
+ --ks-border-color-informative-inverted-interactive-selected-base
4147
+ );
4148
+ --ks-border-color-informative-translucent: var(--ks-border-color-informative-translucent-base);
4149
+ --ks-border-color-informative-inverted-translucent: var(--ks-border-color-informative-inverted-translucent-base);
4150
+ --ks-border-color-notice: var(--ks-border-color-notice-base);
4151
+ --ks-border-color-notice-inverted: var(--ks-border-color-notice-inverted-base);
4152
+ --ks-border-color-notice-interactive: var(--ks-border-color-notice-interactive-base);
4153
+ --ks-border-color-notice-inverted-interactive: var(--ks-border-color-notice-inverted-interactive-base);
4154
+ --ks-border-color-notice-interactive-hover: var(--ks-border-color-notice-interactive-hover-base);
4155
+ --ks-border-color-notice-inverted-interactive-hover: var(--ks-border-color-notice-inverted-interactive-hover-base);
4156
+ --ks-border-color-notice-interactive-active: var(--ks-border-color-notice-interactive-active-base);
4157
+ --ks-border-color-notice-inverted-interactive-active: var(--ks-border-color-notice-inverted-interactive-active-base);
4158
+ --ks-border-color-notice-interactive-selected: var(--ks-border-color-notice-interactive-selected-base);
4159
+ --ks-border-color-notice-inverted-interactive-selected: var(
4160
+ --ks-border-color-notice-inverted-interactive-selected-base
4161
+ );
4162
+ --ks-border-color-notice-translucent: var(--ks-border-color-notice-translucent-base);
4163
+ --ks-border-color-notice-inverted-translucent: var(--ks-border-color-notice-inverted-translucent-base);
4164
+ --ks-border-color-negative: var(--ks-border-color-negative-base);
4165
+ --ks-border-color-negative-inverted: var(--ks-border-color-negative-inverted-base);
4166
+ --ks-border-color-negative-interactive: var(--ks-border-color-negative-interactive-base);
4167
+ --ks-border-color-negative-inverted-interactive: var(--ks-border-color-negative-inverted-interactive-base);
4168
+ --ks-border-color-negative-interactive-hover: var(--ks-border-color-negative-interactive-hover-base);
4169
+ --ks-border-color-negative-inverted-interactive-hover: var(
4170
+ --ks-border-color-negative-inverted-interactive-hover-base
4171
+ );
4172
+ --ks-border-color-negative-interactive-active: var(--ks-border-color-negative-interactive-active-base);
4173
+ --ks-border-color-negative-inverted-interactive-active: var(
4174
+ --ks-border-color-negative-inverted-interactive-active-base
4175
+ );
4176
+ --ks-border-color-negative-interactive-selected: var(--ks-border-color-negative-interactive-selected-base);
4177
+ --ks-border-color-negative-inverted-interactive-selected: var(
4178
+ --ks-border-color-negative-inverted-interactive-selected-base
4179
+ );
4180
+ --ks-border-color-negative-translucent: var(--ks-border-color-negative-translucent-base);
4181
+ --ks-border-color-negative-inverted-translucent: var(--ks-border-color-negative-inverted-translucent-base);
4182
+ }
4183
+
4184
+ [ks-inverted=true] {
4185
+ --ks-border-color-accent: var(--ks-border-color-accent-inverted-base);
4186
+ --ks-border-color-accent-inverted: var(--ks-border-color-accent-base);
4187
+ --ks-border-color-clear: var(--ks-border-color-clear-inverted-base);
4188
+ --ks-border-color-clear-inverted: var(--ks-border-color-clear-base);
4189
+ --ks-border-color-clear-interactive: var(--ks-border-color-clear-inverted-interactive-base);
4190
+ --ks-border-color-clear-inverted-interactive: var(--ks-border-color-clear-interactive-base);
4191
+ --ks-border-color-clear-interactive-hover: var(--ks-border-color-clear-inverted-interactive-hover-base);
4192
+ --ks-border-color-clear-inverted-interactive-hover: var(--ks-border-color-clear-interactive-hover-base);
4193
+ --ks-border-color-clear-interactive-active: var(--ks-border-color-clear-inverted-interactive-active-base);
4194
+ --ks-border-color-clear-inverted-interactive-active: var(--ks-border-color-clear-interactive-active-base);
4195
+ --ks-border-color-clear-interactive-selected: var(--ks-border-color-clear-inverted-interactive-selected-base);
4196
+ --ks-border-color-clear-inverted-interactive-selected: var(--ks-border-color-clear-interactive-selected-base);
4197
+ --ks-border-color-default: var(--ks-border-color-default-inverted-base);
4198
+ --ks-border-color-default-inverted: var(--ks-border-color-default-base);
4199
+ --ks-border-color-interface: var(--ks-border-color-interface-inverted-base);
4200
+ --ks-border-color-interface-inverted: var(--ks-border-color-interface-base);
4201
+ --ks-border-color-interface-interactive: var(--ks-border-color-interface-inverted-interactive-base);
4202
+ --ks-border-color-interface-inverted-interactive: var(--ks-border-color-interface-interactive-base);
4203
+ --ks-border-color-interface-interactive-disabled: var(--ks-border-color-interface-inverted-interactive-disabled-base);
4204
+ --ks-border-color-interface-inverted-interactive-disabled: var(--ks-border-color-interface-interactive-disabled-base);
4205
+ --ks-border-color-interface-interactive-hover: var(--ks-border-color-interface-inverted-interactive-hover-base);
4206
+ --ks-border-color-interface-inverted-interactive-hover: var(--ks-border-color-interface-interactive-hover-base);
4207
+ --ks-border-color-interface-interactive-active: var(--ks-border-color-interface-inverted-interactive-active-base);
4208
+ --ks-border-color-interface-inverted-interactive-active: var(--ks-border-color-interface-interactive-active-base);
4209
+ --ks-border-color-interface-interactive-selected: var(--ks-border-color-interface-inverted-interactive-selected-base);
4210
+ --ks-border-color-interface-inverted-interactive-selected: var(--ks-border-color-interface-interactive-selected-base);
4211
+ --ks-border-color-card: var(--ks-border-color-card-inverted-base);
4212
+ --ks-border-color-card-inverted: var(--ks-border-color-card-base);
4213
+ --ks-border-color-card-interactive: var(--ks-border-color-card-inverted-interactive-base);
4214
+ --ks-border-color-card-inverted-interactive: var(--ks-border-color-card-interactive-base);
4215
+ --ks-border-color-card-interactive-disabled: var(--ks-border-color-card-inverted-interactive-disabled-base);
4216
+ --ks-border-color-card-inverted-interactive-disabled: var(--ks-border-color-card-interactive-disabled-base);
4217
+ --ks-border-color-card-interactive-hover: var(--ks-border-color-card-inverted-interactive-hover-base);
4218
+ --ks-border-color-card-inverted-interactive-hover: var(--ks-border-color-card-interactive-hover-base);
4219
+ --ks-border-color-card-interactive-active: var(--ks-border-color-card-inverted-interactive-active-base);
4220
+ --ks-border-color-card-inverted-interactive-active: var(--ks-border-color-card-interactive-active-base);
4221
+ --ks-border-color-card-interactive-selected: var(--ks-border-color-card-inverted-interactive-selected-base);
4222
+ --ks-border-color-card-inverted-interactive-selected: var(--ks-border-color-card-interactive-selected-base);
4223
+ --ks-border-color-primary: var(--ks-border-color-primary-inverted-base);
4224
+ --ks-border-color-primary-inverted: var(--ks-border-color-primary-base);
4225
+ --ks-border-color-primary-interactive: var(--ks-border-color-primary-inverted-interactive-base);
4226
+ --ks-border-color-primary-inverted-interactive: var(--ks-border-color-primary-interactive-base);
4227
+ --ks-border-color-primary-interactive-hover: var(--ks-border-color-primary-inverted-interactive-hover-base);
4228
+ --ks-border-color-primary-inverted-interactive-hover: var(--ks-border-color-primary-interactive-hover-base);
4229
+ --ks-border-color-primary-interactive-active: var(--ks-border-color-primary-inverted-interactive-active-base);
4230
+ --ks-border-color-primary-inverted-interactive-active: var(--ks-border-color-primary-interactive-active-base);
4231
+ --ks-border-color-primary-interactive-selected: var(--ks-border-color-primary-inverted-interactive-selected-base);
4232
+ --ks-border-color-primary-inverted-interactive-selected: var(--ks-border-color-primary-interactive-selected-base);
4233
+ --ks-border-color-primary-translucent: var(--ks-border-color-primary-inverted-translucent-base);
4234
+ --ks-border-color-primary-inverted-translucent: var(--ks-border-color-primary-translucent-base);
4235
+ --ks-border-color-positive: var(--ks-border-color-positive-inverted-base);
4236
+ --ks-border-color-positive-inverted: var(--ks-border-color-positive-base);
4237
+ --ks-border-color-positive-interactive: var(--ks-border-color-positive-inverted-interactive-base);
4238
+ --ks-border-color-positive-inverted-interactive: var(--ks-border-color-positive-interactive-base);
4239
+ --ks-border-color-positive-interactive-hover: var(--ks-border-color-positive-inverted-interactive-hover-base);
4240
+ --ks-border-color-positive-inverted-interactive-hover: var(--ks-border-color-positive-interactive-hover-base);
4241
+ --ks-border-color-positive-interactive-active: var(--ks-border-color-positive-inverted-interactive-active-base);
4242
+ --ks-border-color-positive-inverted-interactive-active: var(--ks-border-color-positive-interactive-active-base);
4243
+ --ks-border-color-positive-interactive-selected: var(--ks-border-color-positive-inverted-interactive-selected-base);
4244
+ --ks-border-color-positive-inverted-interactive-selected: var(--ks-border-color-positive-interactive-selected-base);
4245
+ --ks-border-color-positive-translucent: var(--ks-border-color-positive-inverted-translucent-base);
4246
+ --ks-border-color-positive-inverted-translucent: var(--ks-border-color-positive-translucent-base);
4247
+ --ks-border-color-informative: var(--ks-border-color-informative-inverted-base);
4248
+ --ks-border-color-informative-inverted: var(--ks-border-color-informative-base);
4249
+ --ks-border-color-informative-interactive: var(--ks-border-color-informative-inverted-interactive-base);
4250
+ --ks-border-color-informative-inverted-interactive: var(--ks-border-color-informative-interactive-base);
4251
+ --ks-border-color-informative-interactive-hover: var(--ks-border-color-informative-inverted-interactive-hover-base);
4252
+ --ks-border-color-informative-inverted-interactive-hover: var(--ks-border-color-informative-interactive-hover-base);
4253
+ --ks-border-color-informative-interactive-active: var(--ks-border-color-informative-inverted-interactive-active-base);
4254
+ --ks-border-color-informative-inverted-interactive-active: var(--ks-border-color-informative-interactive-active-base);
4255
+ --ks-border-color-informative-interactive-selected: var(
4256
+ --ks-border-color-informative-inverted-interactive-selected-base
4257
+ );
4258
+ --ks-border-color-informative-inverted-interactive-selected: var(
4259
+ --ks-border-color-informative-interactive-selected-base
4260
+ );
4261
+ --ks-border-color-informative-translucent: var(--ks-border-color-informative-inverted-translucent-base);
4262
+ --ks-border-color-informative-inverted-translucent: var(--ks-border-color-informative-translucent-base);
4263
+ --ks-border-color-notice: var(--ks-border-color-notice-inverted-base);
4264
+ --ks-border-color-notice-inverted: var(--ks-border-color-notice-base);
4265
+ --ks-border-color-notice-interactive: var(--ks-border-color-notice-inverted-interactive-base);
4266
+ --ks-border-color-notice-inverted-interactive: var(--ks-border-color-notice-interactive-base);
4267
+ --ks-border-color-notice-interactive-hover: var(--ks-border-color-notice-inverted-interactive-hover-base);
4268
+ --ks-border-color-notice-inverted-interactive-hover: var(--ks-border-color-notice-interactive-hover-base);
4269
+ --ks-border-color-notice-interactive-active: var(--ks-border-color-notice-inverted-interactive-active-base);
4270
+ --ks-border-color-notice-inverted-interactive-active: var(--ks-border-color-notice-interactive-active-base);
4271
+ --ks-border-color-notice-interactive-selected: var(--ks-border-color-notice-inverted-interactive-selected-base);
4272
+ --ks-border-color-notice-inverted-interactive-selected: var(--ks-border-color-notice-interactive-selected-base);
4273
+ --ks-border-color-notice-translucent: var(--ks-border-color-notice-inverted-translucent-base);
4274
+ --ks-border-color-notice-inverted-translucent: var(--ks-border-color-notice-translucent-base);
4275
+ --ks-border-color-negative: var(--ks-border-color-negative-inverted-base);
4276
+ --ks-border-color-negative-inverted: var(--ks-border-color-negative-base);
4277
+ --ks-border-color-negative-interactive: var(--ks-border-color-negative-inverted-interactive-base);
4278
+ --ks-border-color-negative-inverted-interactive: var(--ks-border-color-negative-interactive-base);
4279
+ --ks-border-color-negative-interactive-hover: var(--ks-border-color-negative-inverted-interactive-hover-base);
4280
+ --ks-border-color-negative-inverted-interactive-hover: var(--ks-border-color-negative-interactive-hover-base);
4281
+ --ks-border-color-negative-interactive-active: var(--ks-border-color-negative-inverted-interactive-active-base);
4282
+ --ks-border-color-negative-inverted-interactive-active: var(--ks-border-color-negative-interactive-active-base);
4283
+ --ks-border-color-negative-interactive-selected: var(--ks-border-color-negative-inverted-interactive-selected-base);
4284
+ --ks-border-color-negative-inverted-interactive-selected: var(--ks-border-color-negative-interactive-selected-base);
4285
+ --ks-border-color-negative-translucent: var(--ks-border-color-negative-inverted-translucent-base);
4286
+ --ks-border-color-negative-inverted-translucent: var(--ks-border-color-negative-translucent-base);
4287
+ }
4288
+
4289
+ :root,
4290
+ [ks-theme] {
4291
+ --ks-background-color-accent-base: var(--ks-color-fg-to-bg-9);
4292
+ --ks-background-color-accent-inverted-base: var(--ks-color-primary-inverted-to-bg-8);
4293
+ --ks-background-color-bold-base: var(--ks-color-primary-to-bg-6);
4294
+ --ks-background-color-bold-inverted-base: var(--ks-color-primary-inverted-to-bg-6);
4295
+ --ks-background-color-clear-base: var(--ks-color-transparent);
4296
+ --ks-background-color-clear-inverted-base: var(--ks-color-transparent);
4297
+ --ks-background-color-clear-interactive-base: var(--ks-color-transparent);
4298
+ --ks-background-color-clear-inverted-interactive-base: var(--ks-color-transparent);
4299
+ --ks-background-color-clear-interactive-hover-base: var(--ks-color-primary-alpha-8);
4300
+ --ks-background-color-clear-inverted-interactive-hover-base: var(--ks-color-primary-inverted-alpha-7);
4301
+ --ks-background-color-clear-interactive-active-base: var(--ks-color-primary-alpha-7);
4302
+ --ks-background-color-clear-inverted-interactive-active-base: var(--ks-color-primary-inverted-alpha-6);
4303
+ --ks-background-color-clear-interactive-selected-base: var(--ks-color-primary-alpha-6);
4304
+ --ks-background-color-clear-inverted-interactive-selected-base: var(--ks-color-primary-inverted-alpha-5);
4305
+ --ks-background-color-default-base: var(--ks-color-bg);
4306
+ --ks-background-color-default-inverted-base: var(--ks-color-bg-inverted);
4307
+ --ks-background-color-interface-base: var(--ks-color-fg-alpha-9);
4308
+ --ks-background-color-interface-inverted-base: var(--ks-color-fg-inverted-alpha-9);
4309
+ --ks-background-color-interface-interactive-base: var(--ks-color-fg-alpha-8);
4310
+ --ks-background-color-interface-inverted-interactive-base: var(--ks-color-fg-inverted-alpha-8);
4311
+ --ks-background-color-interface-interactive-disabled-base: var(--ks-color-fg-alpha-9);
4312
+ --ks-background-color-interface-inverted-interactive-disabled-base: var(--ks-color-fg-inverted-alpha-9);
4313
+ --ks-background-color-interface-interactive-hover-base: var(--ks-color-fg-alpha-7);
4314
+ --ks-background-color-interface-inverted-interactive-hover-base: var(--ks-color-fg-inverted-alpha-6);
4315
+ --ks-background-color-interface-interactive-active-base: var(--ks-color-fg-alpha-6);
4316
+ --ks-background-color-interface-inverted-interactive-active-base: var(--ks-color-fg-inverted-alpha-6);
4317
+ --ks-background-color-interface-interactive-selected-base: var(--ks-color-primary);
4318
+ --ks-background-color-interface-inverted-interactive-selected-base: var(--ks-color-primary-inverted);
4319
+ --ks-background-color-card-base: var(--ks-color-fg-alpha-9);
4320
+ --ks-background-color-card-inverted-base: var(--ks-color-fg-inverted-to-bg-9);
4321
+ --ks-background-color-card-interactive-base: var(--ks-color-bg);
4322
+ --ks-background-color-card-inverted-interactive-base: var(--ks-color-fg-inverted-to-bg-9);
4323
+ --ks-background-color-card-interactive-disabled-base: var(--ks-color-bg-alpha-7);
4324
+ --ks-background-color-card-inverted-interactive-disabled-base: var(--ks-color-fg-inverted-alpha-7);
4325
+ --ks-background-color-card-interactive-hover-base: var(--ks-color-bg-alpha-9);
4326
+ --ks-background-color-card-inverted-interactive-hover-base: var(--ks-color-fg-inverted-alpha-9);
4327
+ --ks-background-color-card-interactive-active-base: var(--ks-color-bg-alpha-9);
4328
+ --ks-background-color-card-inverted-interactive-active-base: var(--ks-color-fg-inverted-alpha-9);
4329
+ --ks-background-color-card-interactive-selected-base: var(--ks-color-bg);
4330
+ --ks-background-color-card-inverted-interactive-selected-base: var(--ks-color-primary-inverted);
4331
+ --ks-background-color-primary-base: var(--ks-color-primary);
4332
+ --ks-background-color-primary-inverted-base: var(--ks-color-primary-inverted);
4333
+ --ks-background-color-primary-interactive-base: var(--ks-color-primary);
4334
+ --ks-background-color-primary-inverted-interactive-base: var(--ks-color-primary-inverted);
4335
+ --ks-background-color-primary-interactive-hover-base: var(--ks-color-primary-to-bg-2);
4336
+ --ks-background-color-primary-inverted-interactive-hover-base: var(--ks-color-primary-inverted-to-bg-2);
4337
+ --ks-background-color-primary-interactive-active-base: var(--ks-color-primary-to-bg-2);
4338
+ --ks-background-color-primary-inverted-interactive-active-base: var(--ks-color-primary-inverted-to-bg-2);
4339
+ --ks-background-color-primary-interactive-selected-base: var(--ks-color-primary-to-bg-4);
4340
+ --ks-background-color-primary-inverted-interactive-selected-base: var(--ks-color-primary-inverted-to-bg-4);
4341
+ --ks-background-color-primary-translucent-base: var(--ks-color-primary-alpha-5);
4342
+ --ks-background-color-primary-inverted-translucent-base: var(--ks-color-primary-inverted-alpha-5);
4343
+ --ks-background-color-positive-base: var(--ks-color-positive);
4344
+ --ks-background-color-positive-inverted-base: var(--ks-color-positive-inverted);
4345
+ --ks-background-color-positive-interactive-base: var(--ks-color-positive);
4346
+ --ks-background-color-positive-inverted-interactive-base: var(--ks-color-positive-inverted);
4347
+ --ks-background-color-positive-interactive-hover-base: var(--ks-color-positive-to-bg-2);
4348
+ --ks-background-color-positive-inverted-interactive-hover-base: var(--ks-color-positive-inverted-to-bg-2);
4349
+ --ks-background-color-positive-interactive-active-base: var(--ks-color-positive-to-bg-2);
4350
+ --ks-background-color-positive-inverted-interactive-active-base: var(--ks-color-positive-inverted-to-bg-2);
4351
+ --ks-background-color-positive-interactive-selected-base: var(--ks-color-positive-to-bg-4);
4352
+ --ks-background-color-positive-inverted-interactive-selected-base: var(--ks-color-positive-inverted-to-bg-4);
4353
+ --ks-background-color-positive-translucent-base: var(--ks-color-positive-alpha-5);
4354
+ --ks-background-color-positive-inverted-translucent-base: var(--ks-color-positive-inverted-alpha-5);
4355
+ --ks-background-color-informative-base: var(--ks-color-informative);
4356
+ --ks-background-color-informative-inverted-base: var(--ks-color-informative-inverted);
4357
+ --ks-background-color-informative-interactive-base: var(--ks-color-informative);
4358
+ --ks-background-color-informative-inverted-interactive-base: var(--ks-color-informative-inverted);
4359
+ --ks-background-color-informative-interactive-hover-base: var(--ks-color-informative-to-bg-2);
4360
+ --ks-background-color-informative-inverted-interactive-hover-base: var(--ks-color-informative-inverted-to-bg-2);
4361
+ --ks-background-color-informative-interactive-active-base: var(--ks-color-informative-to-bg-2);
4362
+ --ks-background-color-informative-inverted-interactive-active-base: var(--ks-color-informative-inverted-to-bg-2);
4363
+ --ks-background-color-informative-interactive-selected-base: var(--ks-color-informative-to-bg-4);
4364
+ --ks-background-color-informative-inverted-interactive-selected-base: var(--ks-color-informative-inverted-to-bg-4);
4365
+ --ks-background-color-informative-translucent-base: var(--ks-color-informative-alpha-5);
4366
+ --ks-background-color-informative-inverted-translucent-base: var(--ks-color-informative-inverted-alpha-5);
4367
+ --ks-background-color-notice-base: var(--ks-color-notice);
4368
+ --ks-background-color-notice-inverted-base: var(--ks-color-notice-inverted);
4369
+ --ks-background-color-notice-interactive-base: var(--ks-color-notice);
4370
+ --ks-background-color-notice-inverted-interactive-base: var(--ks-color-notice-inverted);
4371
+ --ks-background-color-notice-interactive-hover-base: var(--ks-color-notice-to-bg-2);
4372
+ --ks-background-color-notice-inverted-interactive-hover-base: var(--ks-color-notice-inverted-to-bg-2);
4373
+ --ks-background-color-notice-interactive-active-base: var(--ks-color-notice-to-bg-2);
4374
+ --ks-background-color-notice-inverted-interactive-active-base: var(--ks-color-notice-inverted-to-bg-2);
4375
+ --ks-background-color-notice-interactive-selected-base: var(--ks-color-notice-to-bg-4);
4376
+ --ks-background-color-notice-inverted-interactive-selected-base: var(--ks-color-notice-inverted-to-bg-4);
4377
+ --ks-background-color-notice-translucent-base: var(--ks-color-notice-alpha-5);
4378
+ --ks-background-color-notice-inverted-translucent-base: var(--ks-color-notice-inverted-alpha-5);
4379
+ --ks-background-color-negative-base: var(--ks-color-negative);
4380
+ --ks-background-color-negative-inverted-base: var(--ks-color-negative-inverted);
4381
+ --ks-background-color-negative-interactive-base: var(--ks-color-negative);
4382
+ --ks-background-color-negative-inverted-interactive-base: var(--ks-color-negative-inverted);
4383
+ --ks-background-color-negative-interactive-hover-base: var(--ks-color-negative-to-bg-2);
4384
+ --ks-background-color-negative-inverted-interactive-hover-base: var(--ks-color-negative-inverted-to-bg-2);
4385
+ --ks-background-color-negative-interactive-active-base: var(--ks-color-negative-to-bg-2);
4386
+ --ks-background-color-negative-inverted-interactive-active-base: var(--ks-color-negative-inverted-to-bg-2);
4387
+ --ks-background-color-negative-interactive-selected-base: var(--ks-color-negative-to-bg-4);
4388
+ --ks-background-color-negative-inverted-interactive-selected-base: var(--ks-color-negative-inverted-to-bg-4);
4389
+ --ks-background-color-negative-translucent-base: var(--ks-color-negative-alpha-5);
4390
+ --ks-background-color-negative-inverted-translucent-base: var(--ks-color-negative-inverted-alpha-5);
4391
+ }
4392
+
4393
+ :root {
4394
+ --ks-background-color-accent: var(--ks-background-color-accent-base);
4395
+ --ks-background-color-accent-inverted: var(--ks-background-color-accent-inverted-base);
4396
+ --ks-background-color-bold: var(--ks-background-color-bold-base);
4397
+ --ks-background-color-bold-inverted: var(--ks-background-color-bold-inverted-base);
4398
+ --ks-background-color-clear: var(--ks-background-color-clear-base);
4399
+ --ks-background-color-clear-inverted: var(--ks-background-color-clear-inverted-base);
4400
+ --ks-background-color-clear-interactive: var(--ks-background-color-clear-interactive-base);
4401
+ --ks-background-color-clear-inverted-interactive: var(--ks-background-color-clear-inverted-interactive-base);
4402
+ --ks-background-color-clear-interactive-hover: var(--ks-background-color-clear-interactive-hover-base);
4403
+ --ks-background-color-clear-inverted-interactive-hover: var(
4404
+ --ks-background-color-clear-inverted-interactive-hover-base
4405
+ );
4406
+ --ks-background-color-clear-interactive-active: var(--ks-background-color-clear-interactive-active-base);
4407
+ --ks-background-color-clear-inverted-interactive-active: var(
4408
+ --ks-background-color-clear-inverted-interactive-active-base
4409
+ );
4410
+ --ks-background-color-clear-interactive-selected: var(--ks-background-color-clear-interactive-selected-base);
4411
+ --ks-background-color-clear-inverted-interactive-selected: var(
4412
+ --ks-background-color-clear-inverted-interactive-selected-base
4413
+ );
4414
+ --ks-background-color-default: var(--ks-background-color-default-base);
4415
+ --ks-background-color-default-inverted: var(--ks-background-color-default-inverted-base);
4416
+ --ks-background-color-interface: var(--ks-background-color-interface-base);
4417
+ --ks-background-color-interface-inverted: var(--ks-background-color-interface-inverted-base);
4418
+ --ks-background-color-interface-interactive: var(--ks-background-color-interface-interactive-base);
4419
+ --ks-background-color-interface-inverted-interactive: var(--ks-background-color-interface-inverted-interactive-base);
4420
+ --ks-background-color-interface-interactive-disabled: var(--ks-background-color-interface-interactive-disabled-base);
4421
+ --ks-background-color-interface-inverted-interactive-disabled: var(
4422
+ --ks-background-color-interface-inverted-interactive-disabled-base
4423
+ );
4424
+ --ks-background-color-interface-interactive-hover: var(--ks-background-color-interface-interactive-hover-base);
4425
+ --ks-background-color-interface-inverted-interactive-hover: var(
4426
+ --ks-background-color-interface-inverted-interactive-hover-base
4427
+ );
4428
+ --ks-background-color-interface-interactive-active: var(--ks-background-color-interface-interactive-active-base);
4429
+ --ks-background-color-interface-inverted-interactive-active: var(
4430
+ --ks-background-color-interface-inverted-interactive-active-base
4431
+ );
4432
+ --ks-background-color-interface-interactive-selected: var(--ks-background-color-interface-interactive-selected-base);
4433
+ --ks-background-color-interface-inverted-interactive-selected: var(
4434
+ --ks-background-color-interface-inverted-interactive-selected-base
4435
+ );
4436
+ --ks-background-color-card: var(--ks-background-color-card-base);
4437
+ --ks-background-color-card-inverted: var(--ks-background-color-card-inverted-base);
4438
+ --ks-background-color-card-interactive: var(--ks-background-color-card-interactive-base);
4439
+ --ks-background-color-card-inverted-interactive: var(--ks-background-color-card-inverted-interactive-base);
4440
+ --ks-background-color-card-interactive-disabled: var(--ks-background-color-card-interactive-disabled-base);
4441
+ --ks-background-color-card-inverted-interactive-disabled: var(
4442
+ --ks-background-color-card-inverted-interactive-disabled-base
4443
+ );
4444
+ --ks-background-color-card-interactive-hover: var(--ks-background-color-card-interactive-hover-base);
4445
+ --ks-background-color-card-inverted-interactive-hover: var(
4446
+ --ks-background-color-card-inverted-interactive-hover-base
4447
+ );
4448
+ --ks-background-color-card-interactive-active: var(--ks-background-color-card-interactive-active-base);
4449
+ --ks-background-color-card-inverted-interactive-active: var(
4450
+ --ks-background-color-card-inverted-interactive-active-base
4451
+ );
4452
+ --ks-background-color-card-interactive-selected: var(--ks-background-color-card-interactive-selected-base);
4453
+ --ks-background-color-card-inverted-interactive-selected: var(
4454
+ --ks-background-color-card-inverted-interactive-selected-base
4455
+ );
4456
+ --ks-background-color-primary: var(--ks-background-color-primary-base);
4457
+ --ks-background-color-primary-inverted: var(--ks-background-color-primary-inverted-base);
4458
+ --ks-background-color-primary-interactive: var(--ks-background-color-primary-interactive-base);
4459
+ --ks-background-color-primary-inverted-interactive: var(--ks-background-color-primary-inverted-interactive-base);
4460
+ --ks-background-color-primary-interactive-hover: var(--ks-background-color-primary-interactive-hover-base);
4461
+ --ks-background-color-primary-inverted-interactive-hover: var(
4462
+ --ks-background-color-primary-inverted-interactive-hover-base
4463
+ );
4464
+ --ks-background-color-primary-interactive-active: var(--ks-background-color-primary-interactive-active-base);
4465
+ --ks-background-color-primary-inverted-interactive-active: var(
4466
+ --ks-background-color-primary-inverted-interactive-active-base
4467
+ );
4468
+ --ks-background-color-primary-interactive-selected: var(--ks-background-color-primary-interactive-selected-base);
4469
+ --ks-background-color-primary-inverted-interactive-selected: var(
4470
+ --ks-background-color-primary-inverted-interactive-selected-base
4471
+ );
4472
+ --ks-background-color-primary-translucent: var(--ks-background-color-primary-translucent-base);
4473
+ --ks-background-color-primary-inverted-translucent: var(--ks-background-color-primary-inverted-translucent-base);
4474
+ --ks-background-color-positive: var(--ks-background-color-positive-base);
4475
+ --ks-background-color-positive-inverted: var(--ks-background-color-positive-inverted-base);
4476
+ --ks-background-color-positive-interactive: var(--ks-background-color-positive-interactive-base);
4477
+ --ks-background-color-positive-inverted-interactive: var(--ks-background-color-positive-inverted-interactive-base);
4478
+ --ks-background-color-positive-interactive-hover: var(--ks-background-color-positive-interactive-hover-base);
4479
+ --ks-background-color-positive-inverted-interactive-hover: var(
4480
+ --ks-background-color-positive-inverted-interactive-hover-base
4481
+ );
4482
+ --ks-background-color-positive-interactive-active: var(--ks-background-color-positive-interactive-active-base);
4483
+ --ks-background-color-positive-inverted-interactive-active: var(
4484
+ --ks-background-color-positive-inverted-interactive-active-base
4485
+ );
4486
+ --ks-background-color-positive-interactive-selected: var(--ks-background-color-positive-interactive-selected-base);
4487
+ --ks-background-color-positive-inverted-interactive-selected: var(
4488
+ --ks-background-color-positive-inverted-interactive-selected-base
4489
+ );
4490
+ --ks-background-color-positive-translucent: var(--ks-background-color-positive-translucent-base);
4491
+ --ks-background-color-positive-inverted-translucent: var(--ks-background-color-positive-inverted-translucent-base);
4492
+ --ks-background-color-informative: var(--ks-background-color-informative-base);
4493
+ --ks-background-color-informative-inverted: var(--ks-background-color-informative-inverted-base);
4494
+ --ks-background-color-informative-interactive: var(--ks-background-color-informative-interactive-base);
4495
+ --ks-background-color-informative-inverted-interactive: var(
4496
+ --ks-background-color-informative-inverted-interactive-base
4497
+ );
4498
+ --ks-background-color-informative-interactive-hover: var(--ks-background-color-informative-interactive-hover-base);
4499
+ --ks-background-color-informative-inverted-interactive-hover: var(
4500
+ --ks-background-color-informative-inverted-interactive-hover-base
4501
+ );
4502
+ --ks-background-color-informative-interactive-active: var(--ks-background-color-informative-interactive-active-base);
4503
+ --ks-background-color-informative-inverted-interactive-active: var(
4504
+ --ks-background-color-informative-inverted-interactive-active-base
4505
+ );
4506
+ --ks-background-color-informative-interactive-selected: var(
4507
+ --ks-background-color-informative-interactive-selected-base
4508
+ );
4509
+ --ks-background-color-informative-inverted-interactive-selected: var(
4510
+ --ks-background-color-informative-inverted-interactive-selected-base
4511
+ );
4512
+ --ks-background-color-informative-translucent: var(--ks-background-color-informative-translucent-base);
4513
+ --ks-background-color-informative-inverted-translucent: var(
4514
+ --ks-background-color-informative-inverted-translucent-base
4515
+ );
4516
+ --ks-background-color-notice: var(--ks-background-color-notice-base);
4517
+ --ks-background-color-notice-inverted: var(--ks-background-color-notice-inverted-base);
4518
+ --ks-background-color-notice-interactive: var(--ks-background-color-notice-interactive-base);
4519
+ --ks-background-color-notice-inverted-interactive: var(--ks-background-color-notice-inverted-interactive-base);
4520
+ --ks-background-color-notice-interactive-hover: var(--ks-background-color-notice-interactive-hover-base);
4521
+ --ks-background-color-notice-inverted-interactive-hover: var(
4522
+ --ks-background-color-notice-inverted-interactive-hover-base
4523
+ );
4524
+ --ks-background-color-notice-interactive-active: var(--ks-background-color-notice-interactive-active-base);
4525
+ --ks-background-color-notice-inverted-interactive-active: var(
4526
+ --ks-background-color-notice-inverted-interactive-active-base
4527
+ );
4528
+ --ks-background-color-notice-interactive-selected: var(--ks-background-color-notice-interactive-selected-base);
4529
+ --ks-background-color-notice-inverted-interactive-selected: var(
4530
+ --ks-background-color-notice-inverted-interactive-selected-base
4531
+ );
4532
+ --ks-background-color-notice-translucent: var(--ks-background-color-notice-translucent-base);
4533
+ --ks-background-color-notice-inverted-translucent: var(--ks-background-color-notice-inverted-translucent-base);
4534
+ --ks-background-color-negative: var(--ks-background-color-negative-base);
4535
+ --ks-background-color-negative-inverted: var(--ks-background-color-negative-inverted-base);
4536
+ --ks-background-color-negative-interactive: var(--ks-background-color-negative-interactive-base);
4537
+ --ks-background-color-negative-inverted-interactive: var(--ks-background-color-negative-inverted-interactive-base);
4538
+ --ks-background-color-negative-interactive-hover: var(--ks-background-color-negative-interactive-hover-base);
4539
+ --ks-background-color-negative-inverted-interactive-hover: var(
4540
+ --ks-background-color-negative-inverted-interactive-hover-base
4541
+ );
4542
+ --ks-background-color-negative-interactive-active: var(--ks-background-color-negative-interactive-active-base);
4543
+ --ks-background-color-negative-inverted-interactive-active: var(
4544
+ --ks-background-color-negative-inverted-interactive-active-base
4545
+ );
4546
+ --ks-background-color-negative-interactive-selected: var(--ks-background-color-negative-interactive-selected-base);
4547
+ --ks-background-color-negative-inverted-interactive-selected: var(
4548
+ --ks-background-color-negative-inverted-interactive-selected-base
4549
+ );
4550
+ --ks-background-color-negative-translucent: var(--ks-background-color-negative-translucent-base);
4551
+ --ks-background-color-negative-inverted-translucent: var(--ks-background-color-negative-inverted-translucent-base);
4552
+ }
4553
+
4554
+ [ks-inverted=true] {
4555
+ --ks-background-color-accent: var(--ks-background-color-accent-inverted-base);
4556
+ --ks-background-color-accent-inverted: var(--ks-background-color-accent-base);
4557
+ --ks-background-color-bold: var(--ks-background-color-bold-inverted-base);
4558
+ --ks-background-color-bold-inverted: var(--ks-background-color-bold-base);
4559
+ --ks-background-color-clear: var(--ks-background-color-clear-inverted-base);
4560
+ --ks-background-color-clear-inverted: var(--ks-background-color-clear-base);
4561
+ --ks-background-color-clear-interactive: var(--ks-background-color-clear-inverted-interactive-base);
4562
+ --ks-background-color-clear-inverted-interactive: var(--ks-background-color-clear-interactive-base);
4563
+ --ks-background-color-clear-interactive-hover: var(--ks-background-color-clear-inverted-interactive-hover-base);
4564
+ --ks-background-color-clear-inverted-interactive-hover: var(--ks-background-color-clear-interactive-hover-base);
4565
+ --ks-background-color-clear-interactive-active: var(--ks-background-color-clear-inverted-interactive-active-base);
4566
+ --ks-background-color-clear-inverted-interactive-active: var(--ks-background-color-clear-interactive-active-base);
4567
+ --ks-background-color-clear-interactive-selected: var(--ks-background-color-clear-inverted-interactive-selected-base);
4568
+ --ks-background-color-clear-inverted-interactive-selected: var(--ks-background-color-clear-interactive-selected-base);
4569
+ --ks-background-color-default: var(--ks-background-color-default-inverted-base);
4570
+ --ks-background-color-default-inverted: var(--ks-background-color-default-base);
4571
+ --ks-background-color-interface: var(--ks-background-color-interface-inverted-base);
4572
+ --ks-background-color-interface-inverted: var(--ks-background-color-interface-base);
4573
+ --ks-background-color-interface-interactive: var(--ks-background-color-interface-inverted-interactive-base);
4574
+ --ks-background-color-interface-inverted-interactive: var(--ks-background-color-interface-interactive-base);
4575
+ --ks-background-color-interface-interactive-disabled: var(
4576
+ --ks-background-color-interface-inverted-interactive-disabled-base
4577
+ );
4578
+ --ks-background-color-interface-inverted-interactive-disabled: var(
4579
+ --ks-background-color-interface-interactive-disabled-base
4580
+ );
4581
+ --ks-background-color-interface-interactive-hover: var(
4582
+ --ks-background-color-interface-inverted-interactive-hover-base
4583
+ );
4584
+ --ks-background-color-interface-inverted-interactive-hover: var(
4585
+ --ks-background-color-interface-interactive-hover-base
4586
+ );
4587
+ --ks-background-color-interface-interactive-active: var(
4588
+ --ks-background-color-interface-inverted-interactive-active-base
4589
+ );
4590
+ --ks-background-color-interface-inverted-interactive-active: var(
4591
+ --ks-background-color-interface-interactive-active-base
4592
+ );
4593
+ --ks-background-color-interface-interactive-selected: var(
4594
+ --ks-background-color-interface-inverted-interactive-selected-base
4595
+ );
4596
+ --ks-background-color-interface-inverted-interactive-selected: var(
4597
+ --ks-background-color-interface-interactive-selected-base
4598
+ );
4599
+ --ks-background-color-card: var(--ks-background-color-card-inverted-base);
4600
+ --ks-background-color-card-inverted: var(--ks-background-color-card-base);
4601
+ --ks-background-color-card-interactive: var(--ks-background-color-card-inverted-interactive-base);
4602
+ --ks-background-color-card-inverted-interactive: var(--ks-background-color-card-interactive-base);
4603
+ --ks-background-color-card-interactive-disabled: var(--ks-background-color-card-inverted-interactive-disabled-base);
4604
+ --ks-background-color-card-inverted-interactive-disabled: var(--ks-background-color-card-interactive-disabled-base);
4605
+ --ks-background-color-card-interactive-hover: var(--ks-background-color-card-inverted-interactive-hover-base);
4606
+ --ks-background-color-card-inverted-interactive-hover: var(--ks-background-color-card-interactive-hover-base);
4607
+ --ks-background-color-card-interactive-active: var(--ks-background-color-card-inverted-interactive-active-base);
4608
+ --ks-background-color-card-inverted-interactive-active: var(--ks-background-color-card-interactive-active-base);
4609
+ --ks-background-color-card-interactive-selected: var(--ks-background-color-card-inverted-interactive-selected-base);
4610
+ --ks-background-color-card-inverted-interactive-selected: var(--ks-background-color-card-interactive-selected-base);
4611
+ --ks-background-color-primary: var(--ks-background-color-primary-inverted-base);
4612
+ --ks-background-color-primary-inverted: var(--ks-background-color-primary-base);
4613
+ --ks-background-color-primary-interactive: var(--ks-background-color-primary-inverted-interactive-base);
4614
+ --ks-background-color-primary-inverted-interactive: var(--ks-background-color-primary-interactive-base);
4615
+ --ks-background-color-primary-interactive-hover: var(--ks-background-color-primary-inverted-interactive-hover-base);
4616
+ --ks-background-color-primary-inverted-interactive-hover: var(--ks-background-color-primary-interactive-hover-base);
4617
+ --ks-background-color-primary-interactive-active: var(--ks-background-color-primary-inverted-interactive-active-base);
4618
+ --ks-background-color-primary-inverted-interactive-active: var(--ks-background-color-primary-interactive-active-base);
4619
+ --ks-background-color-primary-interactive-selected: var(
4620
+ --ks-background-color-primary-inverted-interactive-selected-base
4621
+ );
4622
+ --ks-background-color-primary-inverted-interactive-selected: var(
4623
+ --ks-background-color-primary-interactive-selected-base
4624
+ );
4625
+ --ks-background-color-primary-translucent: var(--ks-background-color-primary-inverted-translucent-base);
4626
+ --ks-background-color-primary-inverted-translucent: var(--ks-background-color-primary-translucent-base);
4627
+ --ks-background-color-positive: var(--ks-background-color-positive-inverted-base);
4628
+ --ks-background-color-positive-inverted: var(--ks-background-color-positive-base);
4629
+ --ks-background-color-positive-interactive: var(--ks-background-color-positive-inverted-interactive-base);
4630
+ --ks-background-color-positive-inverted-interactive: var(--ks-background-color-positive-interactive-base);
4631
+ --ks-background-color-positive-interactive-hover: var(--ks-background-color-positive-inverted-interactive-hover-base);
4632
+ --ks-background-color-positive-inverted-interactive-hover: var(--ks-background-color-positive-interactive-hover-base);
4633
+ --ks-background-color-positive-interactive-active: var(
4634
+ --ks-background-color-positive-inverted-interactive-active-base
4635
+ );
4636
+ --ks-background-color-positive-inverted-interactive-active: var(
4637
+ --ks-background-color-positive-interactive-active-base
4638
+ );
4639
+ --ks-background-color-positive-interactive-selected: var(
4640
+ --ks-background-color-positive-inverted-interactive-selected-base
4641
+ );
4642
+ --ks-background-color-positive-inverted-interactive-selected: var(
4643
+ --ks-background-color-positive-interactive-selected-base
4644
+ );
4645
+ --ks-background-color-positive-translucent: var(--ks-background-color-positive-inverted-translucent-base);
4646
+ --ks-background-color-positive-inverted-translucent: var(--ks-background-color-positive-translucent-base);
4647
+ --ks-background-color-informative: var(--ks-background-color-informative-inverted-base);
4648
+ --ks-background-color-informative-inverted: var(--ks-background-color-informative-base);
4649
+ --ks-background-color-informative-interactive: var(--ks-background-color-informative-inverted-interactive-base);
4650
+ --ks-background-color-informative-inverted-interactive: var(--ks-background-color-informative-interactive-base);
4651
+ --ks-background-color-informative-interactive-hover: var(
4652
+ --ks-background-color-informative-inverted-interactive-hover-base
4653
+ );
4654
+ --ks-background-color-informative-inverted-interactive-hover: var(
4655
+ --ks-background-color-informative-interactive-hover-base
4656
+ );
4657
+ --ks-background-color-informative-interactive-active: var(
4658
+ --ks-background-color-informative-inverted-interactive-active-base
4659
+ );
4660
+ --ks-background-color-informative-inverted-interactive-active: var(
4661
+ --ks-background-color-informative-interactive-active-base
4662
+ );
4663
+ --ks-background-color-informative-interactive-selected: var(
4664
+ --ks-background-color-informative-inverted-interactive-selected-base
4665
+ );
4666
+ --ks-background-color-informative-inverted-interactive-selected: var(
4667
+ --ks-background-color-informative-interactive-selected-base
4668
+ );
4669
+ --ks-background-color-informative-translucent: var(--ks-background-color-informative-inverted-translucent-base);
4670
+ --ks-background-color-informative-inverted-translucent: var(--ks-background-color-informative-translucent-base);
4671
+ --ks-background-color-notice: var(--ks-background-color-notice-inverted-base);
4672
+ --ks-background-color-notice-inverted: var(--ks-background-color-notice-base);
4673
+ --ks-background-color-notice-interactive: var(--ks-background-color-notice-inverted-interactive-base);
4674
+ --ks-background-color-notice-inverted-interactive: var(--ks-background-color-notice-interactive-base);
4675
+ --ks-background-color-notice-interactive-hover: var(--ks-background-color-notice-inverted-interactive-hover-base);
4676
+ --ks-background-color-notice-inverted-interactive-hover: var(--ks-background-color-notice-interactive-hover-base);
4677
+ --ks-background-color-notice-interactive-active: var(--ks-background-color-notice-inverted-interactive-active-base);
4678
+ --ks-background-color-notice-inverted-interactive-active: var(--ks-background-color-notice-interactive-active-base);
4679
+ --ks-background-color-notice-interactive-selected: var(
4680
+ --ks-background-color-notice-inverted-interactive-selected-base
4681
+ );
4682
+ --ks-background-color-notice-inverted-interactive-selected: var(
4683
+ --ks-background-color-notice-interactive-selected-base
4684
+ );
4685
+ --ks-background-color-notice-translucent: var(--ks-background-color-notice-inverted-translucent-base);
4686
+ --ks-background-color-notice-inverted-translucent: var(--ks-background-color-notice-translucent-base);
4687
+ --ks-background-color-negative: var(--ks-background-color-negative-inverted-base);
4688
+ --ks-background-color-negative-inverted: var(--ks-background-color-negative-base);
4689
+ --ks-background-color-negative-interactive: var(--ks-background-color-negative-inverted-interactive-base);
4690
+ --ks-background-color-negative-inverted-interactive: var(--ks-background-color-negative-interactive-base);
4691
+ --ks-background-color-negative-interactive-hover: var(--ks-background-color-negative-inverted-interactive-hover-base);
4692
+ --ks-background-color-negative-inverted-interactive-hover: var(--ks-background-color-negative-interactive-hover-base);
4693
+ --ks-background-color-negative-interactive-active: var(
4694
+ --ks-background-color-negative-inverted-interactive-active-base
4695
+ );
4696
+ --ks-background-color-negative-inverted-interactive-active: var(
4697
+ --ks-background-color-negative-interactive-active-base
4698
+ );
4699
+ --ks-background-color-negative-interactive-selected: var(
4700
+ --ks-background-color-negative-inverted-interactive-selected-base
4701
+ );
4702
+ --ks-background-color-negative-inverted-interactive-selected: var(
4703
+ --ks-background-color-negative-interactive-selected-base
4704
+ );
4705
+ --ks-background-color-negative-translucent: var(--ks-background-color-negative-inverted-translucent-base);
4706
+ --ks-background-color-negative-inverted-translucent: var(--ks-background-color-negative-translucent-base);
4707
+ }
4708
+
522
4709
  .l-container--blog-teaser {
523
4710
  /* stylelint-disable-next-line property-no-unknown */
524
4711
  container-name: blog-teaser;
@@ -617,6 +4804,13 @@ h3 {
617
4804
  margin-bottom: var(--dsa-blog-teaser__topic--margin-bottom, 0.35em);
618
4805
  }
619
4806
 
4807
+ .c-form-check-group {
4808
+ --dsa-check-group__label--color: var(--ks-text-color-interface);
4809
+ --dsa-check-group__label--font: var(--ks-font-interface-s);
4810
+ --dsa-check-group__label--font-weight: var(--ks-font-weight-semi-bold);
4811
+ --dsa-check-group__label--padding-bottom: 0.25em;
4812
+ }
4813
+
620
4814
  .c-form-check {
621
4815
  --dsa-check--background: transparent;
622
4816
  --dsa-check--background_checked: var(--ks-color-primary);
@@ -698,6 +4892,12 @@ h3 {
698
4892
  :root .c-form-check--radio, [ks-inverted] .c-form-check--radio, [ks-theme] .c-form-check--radio {
699
4893
  --c-form-check_box--border-radius: var(--dsa-check_radio--border-radius, var(--ks-border-radius-circle));
700
4894
  }
4895
+ :root .c-form-check-group__label, [ks-inverted] .c-form-check-group__label, [ks-theme] .c-form-check-group__label {
4896
+ color: var(--dsa-check-group__label--color, var(--ks-text-color-interface));
4897
+ font: var(--dsa-check-group__label--font, var(--ks-font-interface-s));
4898
+ font-weight: var(--dsa-check-group__label--font-weight, var(--ks-font-weight-semi-bold));
4899
+ padding-bottom: var(--dsa-check-group__label--padding-bottom, 0.25em);
4900
+ }
701
4901
  :root .c-form-field, [ks-inverted] .c-form-field, [ks-theme] .c-form-field {
702
4902
  --c-form-field_label--padding: 0 0 var(--dsa-input__label--padding-bottom, 0.25em) 0;
703
4903
  --c-form-field--border: var(--dsa-input--border, var(--ks-border-width-default) solid);
@@ -777,168 +4977,6 @@ h3 {
777
4977
  --c-lightbox--error-text-color: var(--ks-color-error) !important;
778
4978
  }
779
4979
 
780
- /* inter-regular - latin */
781
- @font-face {
782
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
783
- font-family: "Montserrat";
784
- font-style: normal;
785
- font-weight: 400;
786
- src: url("static/fonts/systemics/Montserrat-Regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
787
- }
788
- /* inter-500 - latin */
789
- @font-face {
790
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
791
- font-family: "Montserrat";
792
- font-style: normal;
793
- font-weight: 500;
794
- src: url("static/fonts/systemics/Montserrat-Medium.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
795
- }
796
- /* inter-600 - latin */
797
- @font-face {
798
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
799
- font-family: "Montserrat";
800
- font-style: normal;
801
- font-weight: 600;
802
- src: url("static/fonts/systemics/Montserrat-SemiBold.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
803
- }
804
- /* inter-700 - latin */
805
- @font-face {
806
- font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
807
- font-family: "Montserrat";
808
- font-style: normal;
809
- font-weight: 700;
810
- src: url("static/fonts/systemics/Montserrat-Bold.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
811
- }
812
- @font-face {
813
- font-family: "Fredoka";
814
- src: url("static/fonts/dsa/Fredoka-Regular.woff") format("woff2"), url("static/fonts/dsa/Fredoka-Regular.woff") format("woff");
815
- font-weight: 400;
816
- font-style: normal;
817
- font-display: swap;
818
- }
819
- @font-face {
820
- font-family: "Fredoka";
821
- src: url("static/fonts/dsa/Fredoka-SemiBold.woff2") format("woff2"), url("static/fonts/dsa/Fredoka-SemiBold.woff") format("woff");
822
- font-weight: 600;
823
- font-style: normal;
824
- font-display: swap;
825
- }
826
- @font-face {
827
- font-family: "Fredoka";
828
- src: url("static/fonts/dsa/Fredoka-Medium.woff2") format("woff2"), url("static/fonts/dsa/Fredoka-Medium.woff") format("woff");
829
- font-weight: 500;
830
- font-style: normal;
831
- font-display: swap;
832
- }
833
- @font-face {
834
- font-family: "Fredoka";
835
- src: url("static/fonts/dsa/Fredoka-Light.woff2") format("woff2"), url("static/fonts/dsa/Fredoka-Light.woff") format("woff");
836
- font-weight: 300;
837
- font-style: normal;
838
- font-display: swap;
839
- }
840
- @font-face {
841
- font-family: "Fredoka";
842
- src: url("static/fonts/dsa/Fredoka-Bold.woff2") format("woff2"), url("static/fonts/dsa/Fredoka-Bold.woff") format("woff");
843
- font-weight: bold;
844
- font-style: normal;
845
- font-display: swap;
846
- }
847
- @font-face {
848
- font-family: "Mulish";
849
- font-style: normal;
850
- font-weight: 400;
851
- font-display: swap;
852
- src: url("static/fonts/dsa/Mulish-Regular.woff2") format("woff2"), url("static/fonts/dsa/Mulish-Regular.woff") format("woff");
853
- }
854
- @font-face {
855
- font-family: "Mulish";
856
- font-style: normal;
857
- font-weight: 600;
858
- font-display: swap;
859
- src: url("static/fonts/dsa/Mulish-600.woff2") format("woff2"), url("static/fonts/dsa/Mulish-600.woff") format("woff"); /* Legacy iOS */
860
- }
861
- @font-face {
862
- font-family: "Mulish";
863
- font-style: normal;
864
- font-weight: 800;
865
- font-display: swap;
866
- src: url("static/fonts/dsa/Mulish-800.woff2") format("woff2"), url("static/fonts/dsa/Mulish-800.woff") format("woff");
867
- }
868
- @font-face {
869
- font-family: "Mulish";
870
- font-style: normal;
871
- font-weight: 300;
872
- font-display: swap;
873
- src: url("static/fonts/dsa/Mulish-300.woff2") format("woff2"), url("static/fonts/dsa/Mulish-300.woff") format("woff");
874
- }
875
- @font-face {
876
- font-family: "NovelPro";
877
- src: url("static/fonts/business/novelpro-regular.woff") format("woff");
878
- font-weight: 400;
879
- font-style: normal;
880
- font-display: swap;
881
- }
882
- @font-face {
883
- font-family: "NovelSansPro";
884
- src: url("static/fonts/business/novelsanspro-regular.woff") format("woff");
885
- font-weight: 400;
886
- font-style: normal;
887
- font-display: swap;
888
- }
889
- @font-face {
890
- font-family: "NovelSansPro";
891
- src: url("static/fonts/business/novelsanspro-bold.woff") format("woff");
892
- font-weight: 700;
893
- font-style: normal;
894
- font-display: swap;
895
- }
896
- @font-face {
897
- font-family: "TeleNeo";
898
- src: url("static/fonts/telekom/teleneo-thin-woff-data.woff") format("woff");
899
- font-weight: 400;
900
- font-style: normal;
901
- font-display: swap;
902
- }
903
- @font-face {
904
- font-family: "TeleNeo";
905
- src: url("static/fonts/telekom/teleneo-medium-woff-data.woff") format("woff");
906
- font-weight: 500;
907
- font-style: normal;
908
- font-display: swap;
909
- }
910
- @font-face {
911
- font-family: "TeleNeo";
912
- src: url("static/fonts/telekom/teleneo-bold-woff-data.woff") format("woff");
913
- font-weight: 700;
914
- font-style: normal;
915
- font-display: swap;
916
- }
917
- @font-face {
918
- font-family: "TeleNeo";
919
- src: url("static/fonts/telekom/teleneo-extrabold-woff-data.woff") format("woff");
920
- font-weight: 800;
921
- font-style: normal;
922
- font-display: swap;
923
- }
924
- @font-face {
925
- font-family: "Google Sans 18pt";
926
- font-style: normal;
927
- font-weight: normal;
928
- src: url("static/fonts/google/google-sans-18pt.woff2") format("woff2");
929
- }
930
- @font-face {
931
- font-family: "Google Sans Display";
932
- font-style: normal;
933
- font-weight: normal;
934
- src: url("static/fonts/google/google-sans-display.woff2") format("woff2");
935
- }
936
- @font-face {
937
- font-family: "Google Sans Text";
938
- font-style: normal;
939
- font-weight: normal;
940
- src: url("static/fonts/google/google-sans-text.woff2") format("woff2");
941
- }
942
4980
  :root, [ks-inverted], [ks-theme] {
943
4981
  --dsa-rich-text__headline--font-weight: var(--dsa-headline--font-weight, var(--ks-font-weight-medium));
944
4982
  --dsa-rich-text__headline--color: var(--dsa-headline--color, var(--ks-text-color-display));
@@ -959,16 +4997,16 @@ body.sb-show-main.sb-main-padded {
959
4997
  padding: 0 !important;
960
4998
  }
961
4999
 
5000
+ .preview--wrapper {
5001
+ background-color: #1f213d;
5002
+ padding: 2rem;
5003
+ }
962
5004
  .preview {
963
5005
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
964
5006
  padding: 42px 29px;
965
5007
  background-color: var(--ks-background-color-default);
966
5008
  border-radius: var(--ks-border-radius-card);
967
5009
  }
968
- .preview--wrapper {
969
- background-color: #1f213d;
970
- padding: 2rem;
971
- }
972
5010
 
973
5011
  body {
974
5012
  background: var(--ks-background-color-default);