@fremtind/jokul 4.3.0 → 5.0.0-next.1

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 (609) hide show
  1. package/README.md +1 -1
  2. package/build/build-stats.html +1 -1
  3. package/build/cjs/components/beta/description-list/DescriptionList.cjs +2 -0
  4. package/build/cjs/components/beta/description-list/DescriptionList.cjs.map +1 -0
  5. package/build/cjs/components/beta/description-list/DescriptionListItem.cjs +2 -0
  6. package/build/cjs/components/beta/description-list/DescriptionListItem.cjs.map +1 -0
  7. package/build/cjs/{components-beta → components/beta}/description-list/index.d.cts +2 -2
  8. package/build/cjs/components/beta/nav-link/NavLink.cjs +2 -0
  9. package/build/cjs/components/beta/nav-link/NavLink.cjs.map +1 -0
  10. package/build/cjs/components/beta/nav-link/index.d.cts +1 -0
  11. package/build/cjs/{components-beta → components/beta}/nav-link/types.d.cts +1 -1
  12. package/build/cjs/components/beta/select/Select.cjs +2 -0
  13. package/build/cjs/components/beta/select/Select.cjs.map +1 -0
  14. package/build/cjs/components/beta/select/index.d.cts +2 -0
  15. package/build/cjs/{components-beta → components/beta}/select/types.d.cts +1 -1
  16. package/build/cjs/components/breadcrumb/types.d.cts +1 -1
  17. package/build/cjs/components/checkbox/types.d.cts +1 -1
  18. package/build/cjs/components/cookie-consent/types.d.cts +1 -1
  19. package/build/cjs/components/datepicker/types.d.cts +1 -1
  20. package/build/cjs/components/description-list/index.cjs +1 -1
  21. package/build/cjs/components/description-list/index.d.cts +3 -3
  22. package/build/cjs/components/description-list/types.d.cts +1 -1
  23. package/build/cjs/components/feedback/feedbackContext.cjs.map +1 -1
  24. package/build/cjs/components/feedback/feedbackContext.d.cts +1 -1
  25. package/build/cjs/components/feedback/followup/followupContext.cjs.map +1 -1
  26. package/build/cjs/components/feedback/followup/followupContext.d.cts +1 -1
  27. package/build/cjs/components/feedback/main-question/mainQuestionContext.cjs.map +1 -1
  28. package/build/cjs/components/feedback/main-question/mainQuestionContext.d.cts +1 -1
  29. package/build/cjs/components/feedback/questions/smileyUtils.cjs.map +1 -1
  30. package/build/cjs/components/file-input/internal/Dropzone.cjs.map +1 -1
  31. package/build/cjs/components/file-input/internal/Dropzone.d.cts +1 -1
  32. package/build/cjs/components/file-input/internal/fileInputContext.cjs.map +1 -1
  33. package/build/cjs/components/file-input/internal/fileInputContext.d.cts +1 -1
  34. package/build/cjs/components/icon/development/internal/IconsExampleGrid.d.cts +1 -1
  35. package/build/cjs/components/input-group/InputGroup.d.cts +2 -2
  36. package/build/cjs/components/input-group/types.d.cts +1 -1
  37. package/build/cjs/components/link/Link.cjs +1 -1
  38. package/build/cjs/components/link/Link.cjs.map +1 -1
  39. package/build/cjs/components/link/Link.d.cts +2 -2
  40. package/build/cjs/components/link/types.d.cts +4 -1
  41. package/build/cjs/components/link-list/LinkList.d.cts +1 -1
  42. package/build/cjs/components/list/ListItem.cjs.map +1 -1
  43. package/build/cjs/components/list/ListItem.d.cts +1 -1
  44. package/build/cjs/components/logo/types.d.cts +1 -1
  45. package/build/cjs/components/menu/types.d.cts +1 -1
  46. package/build/cjs/components/modal/Modal.cjs +1 -1
  47. package/build/cjs/components/modal/Modal.cjs.map +1 -1
  48. package/build/cjs/components/modal/Modal.d.cts +9 -2
  49. package/build/cjs/components/modal/index.d.cts +1 -1
  50. package/build/cjs/components/modal/types.d.cts +1 -19
  51. package/build/cjs/components/nav-link/index.cjs +1 -1
  52. package/build/cjs/components/nav-link/index.d.cts +2 -2
  53. package/build/cjs/components/radio-button/radioGroupContext.cjs.map +1 -1
  54. package/build/cjs/components/radio-button/radioGroupContext.d.cts +1 -1
  55. package/build/cjs/components/screen-reader-only/types.d.cts +1 -1
  56. package/build/cjs/components/select/index.cjs +1 -1
  57. package/build/cjs/components/select/index.d.cts +2 -2
  58. package/build/cjs/components/select/types.d.cts +1 -1
  59. package/build/cjs/components/system-message/types.d.cts +1 -1
  60. package/build/cjs/components/table/types.d.cts +1 -1
  61. package/build/cjs/components/table-of-contents/TableOfContents.d.cts +1 -1
  62. package/build/cjs/components/tabs/types.d.cts +1 -1
  63. package/build/cjs/components/toast/types.d.cts +1 -1
  64. package/build/cjs/components/toggle-switch/types.d.cts +1 -1
  65. package/build/cjs/components/tooltip/Tooltip.cjs.map +1 -1
  66. package/build/cjs/components/tooltip/Tooltip.d.cts +1 -1
  67. package/build/cjs/hooks/useAnimatedHeight/types.d.cts +1 -1
  68. package/build/cjs/hooks/useAnimatedHeight/useAnimatedHeight.cjs +1 -1
  69. package/build/cjs/hooks/useAnimatedHeight/useAnimatedHeight.cjs.map +1 -1
  70. package/build/cjs/hooks/useAnimatedHeight/useAnimatedHeightBetween.cjs +1 -1
  71. package/build/cjs/hooks/useAnimatedHeight/useAnimatedHeightBetween.cjs.map +1 -1
  72. package/build/cjs/hooks/useAnimatedHeight/useAutoAnimateHeight.cjs +1 -1
  73. package/build/cjs/hooks/useAnimatedHeight/useAutoAnimateHeight.cjs.map +1 -1
  74. package/build/cjs/hooks/useAnimatedHeight/useAutoAnimateHeight.d.cts +1 -1
  75. package/build/cjs/hooks/useAriaLiveRegion/useAriaLiveRegion.d.cts +1 -1
  76. package/build/cjs/hooks/useBrowserPreferences/useBrowserPreferences.cjs.map +1 -1
  77. package/build/cjs/hooks/useBrowserPreferences/useBrowserPreferences.d.cts +1 -1
  78. package/build/cjs/hooks/useScreen/useScreen.cjs +1 -1
  79. package/build/cjs/hooks/useScreen/useScreen.cjs.map +1 -1
  80. package/build/cjs/tailwind/plugins/jokulTypographyPlugin.cjs +1 -1
  81. package/build/cjs/tailwind/plugins/jokulTypographyPlugin.cjs.map +1 -1
  82. package/build/cjs/tailwind/tailwindPreset.cjs +1 -1
  83. package/build/cjs/tailwind/tailwindPreset.cjs.map +1 -1
  84. package/build/cjs/tokens.cjs +2 -0
  85. package/build/cjs/tokens.cjs.map +1 -0
  86. package/build/cjs/tokens.d.cts +176 -0
  87. package/build/cjs/utilities/getThemeAndSize.cjs +1 -1
  88. package/build/cjs/utilities/getThemeAndSize.cjs.map +1 -1
  89. package/build/cjs/utilities/getThemeAndSize.d.cts +1 -1
  90. package/build/cjs/utilities/index.d.cts +1 -0
  91. package/build/cjs/{core → utilities}/types.d.cts +1 -1
  92. package/build/es/components/beta/description-list/DescriptionList.js +2 -0
  93. package/build/es/components/beta/description-list/DescriptionList.js.map +1 -0
  94. package/build/es/components/beta/description-list/DescriptionListItem.js +2 -0
  95. package/build/es/components/beta/description-list/DescriptionListItem.js.map +1 -0
  96. package/build/es/{components-beta → components/beta}/description-list/index.d.ts +2 -2
  97. package/build/es/components/beta/nav-link/NavLink.js +2 -0
  98. package/build/es/components/beta/nav-link/NavLink.js.map +1 -0
  99. package/build/es/components/beta/nav-link/index.d.ts +1 -0
  100. package/build/es/{components-beta → components/beta}/nav-link/types.d.ts +1 -1
  101. package/build/es/components/beta/select/Select.js +2 -0
  102. package/build/es/components/beta/select/Select.js.map +1 -0
  103. package/build/es/components/beta/select/index.d.ts +2 -0
  104. package/build/es/{components-beta → components/beta}/select/types.d.ts +1 -1
  105. package/build/es/components/breadcrumb/types.d.ts +1 -1
  106. package/build/es/components/checkbox/types.d.ts +1 -1
  107. package/build/es/components/cookie-consent/types.d.ts +1 -1
  108. package/build/es/components/datepicker/types.d.ts +1 -1
  109. package/build/es/components/description-list/index.d.ts +3 -3
  110. package/build/es/components/description-list/index.js +1 -1
  111. package/build/es/components/description-list/types.d.ts +1 -1
  112. package/build/es/components/feedback/feedbackContext.d.ts +1 -1
  113. package/build/es/components/feedback/feedbackContext.js.map +1 -1
  114. package/build/es/components/feedback/followup/followupContext.d.ts +1 -1
  115. package/build/es/components/feedback/followup/followupContext.js.map +1 -1
  116. package/build/es/components/feedback/main-question/mainQuestionContext.d.ts +1 -1
  117. package/build/es/components/feedback/main-question/mainQuestionContext.js.map +1 -1
  118. package/build/es/components/feedback/questions/smileyUtils.js.map +1 -1
  119. package/build/es/components/file-input/internal/Dropzone.d.ts +1 -1
  120. package/build/es/components/file-input/internal/Dropzone.js.map +1 -1
  121. package/build/es/components/file-input/internal/fileInputContext.d.ts +1 -1
  122. package/build/es/components/file-input/internal/fileInputContext.js.map +1 -1
  123. package/build/es/components/icon/development/internal/IconsExampleGrid.d.ts +1 -1
  124. package/build/es/components/input-group/InputGroup.d.ts +2 -2
  125. package/build/es/components/input-group/types.d.ts +1 -1
  126. package/build/es/components/link/Link.d.ts +2 -2
  127. package/build/es/components/link/Link.js +1 -1
  128. package/build/es/components/link/Link.js.map +1 -1
  129. package/build/es/components/link/types.d.ts +4 -1
  130. package/build/es/components/link-list/LinkList.d.ts +1 -1
  131. package/build/es/components/list/ListItem.d.ts +1 -1
  132. package/build/es/components/list/ListItem.js.map +1 -1
  133. package/build/es/components/logo/types.d.ts +1 -1
  134. package/build/es/components/menu/types.d.ts +1 -1
  135. package/build/es/components/modal/Modal.d.ts +9 -2
  136. package/build/es/components/modal/Modal.js +1 -1
  137. package/build/es/components/modal/Modal.js.map +1 -1
  138. package/build/es/components/modal/index.d.ts +1 -1
  139. package/build/es/components/modal/types.d.ts +1 -19
  140. package/build/es/components/nav-link/index.d.ts +2 -2
  141. package/build/es/components/nav-link/index.js +1 -1
  142. package/build/es/components/radio-button/radioGroupContext.d.ts +1 -1
  143. package/build/es/components/radio-button/radioGroupContext.js.map +1 -1
  144. package/build/es/components/screen-reader-only/types.d.ts +1 -1
  145. package/build/es/components/select/index.d.ts +2 -2
  146. package/build/es/components/select/index.js +1 -1
  147. package/build/es/components/select/types.d.ts +1 -1
  148. package/build/es/components/system-message/types.d.ts +1 -1
  149. package/build/es/components/table/types.d.ts +1 -1
  150. package/build/es/components/table-of-contents/TableOfContents.d.ts +1 -1
  151. package/build/es/components/tabs/types.d.ts +1 -1
  152. package/build/es/components/toast/types.d.ts +1 -1
  153. package/build/es/components/toggle-switch/types.d.ts +1 -1
  154. package/build/es/components/tooltip/Tooltip.d.ts +1 -1
  155. package/build/es/components/tooltip/Tooltip.js.map +1 -1
  156. package/build/es/hooks/useAnimatedHeight/types.d.ts +1 -1
  157. package/build/es/hooks/useAnimatedHeight/useAnimatedHeight.js +1 -1
  158. package/build/es/hooks/useAnimatedHeight/useAnimatedHeight.js.map +1 -1
  159. package/build/es/hooks/useAnimatedHeight/useAnimatedHeightBetween.js +1 -1
  160. package/build/es/hooks/useAnimatedHeight/useAnimatedHeightBetween.js.map +1 -1
  161. package/build/es/hooks/useAnimatedHeight/useAutoAnimateHeight.d.ts +1 -1
  162. package/build/es/hooks/useAnimatedHeight/useAutoAnimateHeight.js +1 -1
  163. package/build/es/hooks/useAnimatedHeight/useAutoAnimateHeight.js.map +1 -1
  164. package/build/es/hooks/useAriaLiveRegion/useAriaLiveRegion.d.ts +1 -1
  165. package/build/es/hooks/useBrowserPreferences/useBrowserPreferences.d.ts +1 -1
  166. package/build/es/hooks/useBrowserPreferences/useBrowserPreferences.js.map +1 -1
  167. package/build/es/hooks/useScreen/useScreen.js +1 -1
  168. package/build/es/hooks/useScreen/useScreen.js.map +1 -1
  169. package/build/es/tailwind/plugins/jokulTypographyPlugin.js +1 -1
  170. package/build/es/tailwind/plugins/jokulTypographyPlugin.js.map +1 -1
  171. package/build/es/tailwind/tailwindPreset.js +1 -1
  172. package/build/es/tailwind/tailwindPreset.js.map +1 -1
  173. package/build/es/tokens.d.ts +176 -0
  174. package/build/es/tokens.js +2 -0
  175. package/build/es/tokens.js.map +1 -0
  176. package/build/es/utilities/getThemeAndSize.d.ts +1 -1
  177. package/build/es/utilities/getThemeAndSize.js +1 -1
  178. package/build/es/utilities/getThemeAndSize.js.map +1 -1
  179. package/build/es/utilities/index.d.ts +1 -0
  180. package/build/es/{core → utilities}/types.d.ts +1 -1
  181. package/package.json +7 -585
  182. package/styles/base.css +1405 -0
  183. package/styles/base.min.css +2 -0
  184. package/styles/components/autosuggest/autosuggest.css +4 -10
  185. package/styles/components/autosuggest/autosuggest.min.css +1 -1
  186. package/styles/components/autosuggest/autosuggest.scss +1 -1
  187. package/styles/{components-beta → components/beta}/description-list/description-list.scss +1 -1
  188. package/styles/{components-beta → components/beta}/nav-link/navlink.css +9 -12
  189. package/styles/components/beta/nav-link/navlink.min.css +1 -0
  190. package/styles/{components-beta → components/beta}/nav-link/navlink.scss +2 -2
  191. package/styles/components/beta/select/_index.scss +3 -0
  192. package/styles/{components-beta → components/beta}/select/select.css +5 -8
  193. package/styles/components/beta/select/select.min.css +1 -0
  194. package/styles/{components-beta → components/beta}/select/select.scss +2 -3
  195. package/styles/components/breadcrumb/breadcrumb.scss +1 -1
  196. package/styles/components/button/button.css +9 -12
  197. package/styles/components/button/button.min.css +1 -1
  198. package/styles/components/button/button.scss +2 -2
  199. package/styles/components/card/card.css +2 -2
  200. package/styles/components/card/card.min.css +1 -1
  201. package/styles/components/card/card.scss +1 -1
  202. package/styles/components/checkbox/checkbox.css +12 -33
  203. package/styles/components/checkbox/checkbox.min.css +1 -1
  204. package/styles/components/checkbox/checkbox.scss +5 -15
  205. package/styles/components/checkbox-panel/checkbox-panel.css +19 -46
  206. package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
  207. package/styles/components/checkbox-panel/checkbox-panel.scss +1 -1
  208. package/styles/components/checkbox-panel/development/styles.scss +1 -1
  209. package/styles/components/chip/chip.css +4 -7
  210. package/styles/components/chip/chip.min.css +1 -1
  211. package/styles/components/chip/chip.scss +2 -2
  212. package/styles/components/combobox/combobox.css +12 -24
  213. package/styles/components/combobox/combobox.min.css +1 -1
  214. package/styles/components/combobox/combobox.scss +1 -2
  215. package/styles/components/cookie-consent/cookie-consent.css +1 -5
  216. package/styles/components/cookie-consent/cookie-consent.min.css +1 -1
  217. package/styles/components/cookie-consent/cookie-consent.scss +1 -1
  218. package/styles/components/countdown/countdown.css +2 -2
  219. package/styles/components/countdown/countdown.min.css +1 -1
  220. package/styles/components/datepicker/_calendar-date-button.scss +7 -7
  221. package/styles/components/datepicker/_calendar-navigation-dropdown.scss +2 -2
  222. package/styles/components/datepicker/_calendar-navigation.scss +1 -1
  223. package/styles/components/datepicker/_calendar-table.scss +1 -1
  224. package/styles/components/datepicker/_calendar.scss +7 -6
  225. package/styles/components/datepicker/datepicker.css +13 -33
  226. package/styles/components/datepicker/datepicker.min.css +1 -1
  227. package/styles/components/datepicker/datepicker.scss +1 -1
  228. package/styles/components/description-list/description-list.css +1 -1
  229. package/styles/components/description-list/description-list.min.css +1 -1
  230. package/styles/components/description-list/description-list.scss +2 -2
  231. package/styles/components/expander/expandable.css +3 -3
  232. package/styles/components/expander/expandable.min.css +1 -1
  233. package/styles/components/expander/expandable.scss +1 -1
  234. package/styles/components/feedback/feedback.css +10 -14
  235. package/styles/components/feedback/feedback.min.css +1 -1
  236. package/styles/components/feedback/feedback.scss +1 -1
  237. package/styles/components/file/file.css +5 -13
  238. package/styles/components/file/file.min.css +1 -1
  239. package/styles/components/file/file.scss +2 -2
  240. package/styles/components/file-input/file-input.css +35 -57
  241. package/styles/components/file-input/file-input.min.css +1 -1
  242. package/styles/components/file-input/file-input.scss +1 -1
  243. package/styles/components/help/help.scss +1 -1
  244. package/styles/components/icon/_base-styles.scss +3 -5
  245. package/styles/components/icon/icon.css +9 -30
  246. package/styles/components/icon/icon.min.css +1 -1
  247. package/styles/components/icon/icon.scss +1 -15
  248. package/styles/components/icon-button/icon-button.css +2 -2
  249. package/styles/components/icon-button/icon-button.min.css +1 -1
  250. package/styles/components/icon-button/icon-button.scss +1 -1
  251. package/styles/components/image/image.css +2 -2
  252. package/styles/components/image/image.min.css +1 -1
  253. package/styles/components/image/image.scss +1 -1
  254. package/styles/components/input-group/_field-group.scss +1 -1
  255. package/styles/components/input-group/_labels.scss +1 -1
  256. package/styles/components/input-group/input-group.css +12 -27
  257. package/styles/components/input-group/input-group.min.css +1 -1
  258. package/styles/components/input-group/input-group.scss +1 -1
  259. package/styles/components/input-panel/input-panel.css +7 -13
  260. package/styles/components/input-panel/input-panel.min.css +1 -1
  261. package/styles/components/input-panel/input-panel.scss +2 -2
  262. package/styles/components/link/link.css +6 -7
  263. package/styles/components/link/link.min.css +1 -1
  264. package/styles/components/link/link.scss +1 -2
  265. package/styles/components/link-list/link-list.css +11 -21
  266. package/styles/components/link-list/link-list.min.css +1 -1
  267. package/styles/components/link-list/link-list.scss +1 -1
  268. package/styles/components/list/list.css +6 -27
  269. package/styles/components/list/list.min.css +1 -1
  270. package/styles/components/list/list.scss +11 -15
  271. package/styles/components/loader/loader.css +6 -6
  272. package/styles/components/loader/loader.min.css +1 -1
  273. package/styles/components/loader/loader.scss +1 -1
  274. package/styles/components/loader/skeleton-loader.css +3 -3
  275. package/styles/components/loader/skeleton-loader.min.css +1 -1
  276. package/styles/components/loader/skeleton-loader.scss +1 -1
  277. package/styles/components/logo/logo.css +4 -4
  278. package/styles/components/logo/logo.min.css +1 -1
  279. package/styles/components/logo/logo.scss +1 -1
  280. package/styles/components/menu/_menu-divider.scss +1 -1
  281. package/styles/components/menu/_menu-item.scss +1 -1
  282. package/styles/components/menu/menu.css +6 -21
  283. package/styles/components/menu/menu.min.css +1 -1
  284. package/styles/components/menu/menu.scss +7 -11
  285. package/styles/components/message/message.css +8 -20
  286. package/styles/components/message/message.min.css +1 -1
  287. package/styles/components/message/message.scss +1 -1
  288. package/styles/components/modal/modal.css +35 -125
  289. package/styles/components/modal/modal.min.css +1 -1
  290. package/styles/components/modal/modal.scss +95 -6
  291. package/styles/components/nav-link/nav-link.css +4 -4
  292. package/styles/components/nav-link/nav-link.min.css +1 -1
  293. package/styles/components/nav-link/nav-link.scss +2 -2
  294. package/styles/components/pagination/development/styles.scss +1 -1
  295. package/styles/components/pagination/pagination.css +1 -1
  296. package/styles/components/pagination/pagination.min.css +1 -1
  297. package/styles/components/pagination/pagination.scss +1 -1
  298. package/styles/components/popover/popover.css +5 -17
  299. package/styles/components/popover/popover.min.css +1 -1
  300. package/styles/components/popover/popover.scss +6 -10
  301. package/styles/components/progress-bar/progress-bar.css +3 -3
  302. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  303. package/styles/components/progress-bar/progress-bar.scss +1 -1
  304. package/styles/components/radio-button/radio-button.css +12 -30
  305. package/styles/components/radio-button/radio-button.min.css +1 -1
  306. package/styles/components/radio-button/radio-button.scss +5 -15
  307. package/styles/components/radio-panel/development/styles.scss +1 -1
  308. package/styles/components/radio-panel/radio-panel.css +7 -13
  309. package/styles/components/radio-panel/radio-panel.min.css +1 -1
  310. package/styles/components/radio-panel/radio-panel.scss +1 -1
  311. package/styles/components/search/search-with-submit-button.css +2 -2
  312. package/styles/components/search/search-with-submit-button.min.css +1 -1
  313. package/styles/components/search/search-with-submit-button.scss +1 -1
  314. package/styles/components/search/search.css +8 -14
  315. package/styles/components/search/search.min.css +1 -1
  316. package/styles/components/search/search.scss +1 -1
  317. package/styles/components/segmented-control/segmented-control.css +39 -97
  318. package/styles/components/segmented-control/segmented-control.min.css +1 -1
  319. package/styles/components/segmented-control/segmented-control.scss +1 -1
  320. package/styles/components/select/select.css +12 -21
  321. package/styles/components/select/select.min.css +1 -1
  322. package/styles/components/select/select.scss +1 -2
  323. package/styles/components/summary-table/development/summary-table-example.scss +1 -1
  324. package/styles/components/summary-table/summary-table.css +3 -6
  325. package/styles/components/summary-table/summary-table.min.css +1 -1
  326. package/styles/components/summary-table/summary-table.scss +3 -3
  327. package/styles/components/system-message/system-message.css +4 -7
  328. package/styles/components/system-message/system-message.min.css +1 -1
  329. package/styles/components/system-message/system-message.scss +1 -2
  330. package/styles/components/table/_table-caption.scss +1 -1
  331. package/styles/components/table/_table-cell.scss +1 -1
  332. package/styles/components/table/_table-head.scss +3 -13
  333. package/styles/components/table/_table-header.scss +4 -4
  334. package/styles/components/table/_table-pagination.scss +1 -1
  335. package/styles/components/table/_table-row.scss +1 -1
  336. package/styles/components/table/table.css +18 -46
  337. package/styles/components/table/table.min.css +1 -1
  338. package/styles/components/table/table.scss +1 -1
  339. package/styles/components/table-of-contents/table-of-contents.css +3 -7
  340. package/styles/components/table-of-contents/table-of-contents.min.css +1 -1
  341. package/styles/components/table-of-contents/table-of-contents.scss +1 -1
  342. package/styles/components/tabs/tabs.css +6 -9
  343. package/styles/components/tabs/tabs.min.css +1 -1
  344. package/styles/components/tabs/tabs.scss +1 -1
  345. package/styles/components/tag/tag.css +2 -5
  346. package/styles/components/tag/tag.min.css +1 -1
  347. package/styles/components/tag/tag.scss +2 -2
  348. package/styles/components/text-area/text-area.css +9 -18
  349. package/styles/components/text-area/text-area.min.css +1 -1
  350. package/styles/components/text-area/text-area.scss +1 -1
  351. package/styles/components/text-input/text-input.css +4 -10
  352. package/styles/components/text-input/text-input.min.css +1 -1
  353. package/styles/components/text-input/text-input.scss +2 -3
  354. package/styles/components/toast/toast.css +6 -12
  355. package/styles/components/toast/toast.min.css +1 -1
  356. package/styles/components/toast/toast.scss +1 -2
  357. package/styles/components/toggle-switch/_toggle-slider.scss +1 -1
  358. package/styles/components/toggle-switch/toggle-switch.css +7 -10
  359. package/styles/components/toggle-switch/toggle-switch.min.css +2 -2
  360. package/styles/components/toggle-switch/toggle-switch.scss +1 -1
  361. package/styles/components/tooltip/tooltip.css +4 -8
  362. package/styles/components/tooltip/tooltip.min.css +1 -1
  363. package/styles/components/tooltip/tooltip.scss +1 -1
  364. package/styles/{styles.css → components.css} +329 -734
  365. package/styles/components.min.css +3 -0
  366. package/styles/{styles.scss → components.scss} +2 -2
  367. package/styles/{core/global → global}/_base-class.scss +6 -4
  368. package/styles/{core/global → global}/_top-layer.scss +1 -1
  369. package/styles/hooks/stories/styles.scss +5 -7
  370. package/styles/{core/jkl/_theme.scss → jkl/_forced-colors.scss} +0 -49
  371. package/styles/{core/jkl → jkl}/_index.scss +3 -6
  372. package/styles/{core/jkl → jkl}/_motion.scss +8 -26
  373. package/styles/{core/jkl → jkl}/_reset.scss +2 -2
  374. package/styles/{core/jkl → jkl}/_spacing.scss +1 -6
  375. package/styles/jkl/_tokens.scss +306 -0
  376. package/styles/{core/jkl → jkl}/_typography.scss +5 -98
  377. package/styles/shared/input/shared-input-styles.scss +1 -1
  378. package/styles/shared/track/track.scss +1 -1
  379. package/styles/tailwind.css +171 -0
  380. package/styles/theme/_color-scheme.scss +84 -0
  381. package/styles/{core/theme → theme}/_dynamic-spacing.scss +9 -5
  382. package/styles/theme/_fonts.scss +147 -0
  383. package/styles/theme/_index.scss +5 -0
  384. package/styles/theme/_size.scss +53 -0
  385. package/styles/theme/_tokens.scss +94 -0
  386. package/styles/{core/utility → utility}/_headings.scss +1 -1
  387. package/styles/utility/_paragraphs.scss +24 -0
  388. package/styles/{core/utility → utility}/_screen-reader.scss +1 -1
  389. package/styles/{core/utility → utility}/_spacing.scss +4 -3
  390. package/build/cjs/components-beta/description-list/DescriptionList.cjs +0 -2
  391. package/build/cjs/components-beta/description-list/DescriptionList.cjs.map +0 -1
  392. package/build/cjs/components-beta/description-list/DescriptionListItem.cjs +0 -2
  393. package/build/cjs/components-beta/description-list/DescriptionListItem.cjs.map +0 -1
  394. package/build/cjs/components-beta/nav-link/NavLink.cjs +0 -2
  395. package/build/cjs/components-beta/nav-link/NavLink.cjs.map +0 -1
  396. package/build/cjs/components-beta/nav-link/index.d.cts +0 -1
  397. package/build/cjs/components-beta/select/Select.cjs +0 -2
  398. package/build/cjs/components-beta/select/Select.cjs.map +0 -1
  399. package/build/cjs/components-beta/select/index.d.cts +0 -2
  400. package/build/cjs/core/index.cjs +0 -2
  401. package/build/cjs/core/index.cjs.map +0 -1
  402. package/build/cjs/core/index.d.cts +0 -2
  403. package/build/cjs/core/tokens/build-tailwind-4.cjs +0 -2
  404. package/build/cjs/core/tokens/build-tailwind-4.cjs.map +0 -1
  405. package/build/cjs/core/tokens/build-tailwind-4.d.cts +0 -1
  406. package/build/cjs/core/tokens/style-dictionary/build.cjs +0 -2
  407. package/build/cjs/core/tokens/style-dictionary/build.cjs.map +0 -1
  408. package/build/cjs/core/tokens/style-dictionary/build.d.cts +0 -0
  409. package/build/cjs/core/tokens/style-dictionary/config.cjs +0 -2
  410. package/build/cjs/core/tokens/style-dictionary/config.cjs.map +0 -1
  411. package/build/cjs/core/tokens/style-dictionary/config.d.cts +0 -4
  412. package/build/cjs/core/tokens/style-dictionary/filters/index.cjs +0 -2
  413. package/build/cjs/core/tokens/style-dictionary/filters/index.cjs.map +0 -1
  414. package/build/cjs/core/tokens/style-dictionary/filters/index.d.cts +0 -3
  415. package/build/cjs/core/tokens/style-dictionary/formats/css-dynamic-color-variables.cjs +0 -2
  416. package/build/cjs/core/tokens/style-dictionary/formats/css-dynamic-color-variables.cjs.map +0 -1
  417. package/build/cjs/core/tokens/style-dictionary/formats/css-dynamic-color-variables.d.cts +0 -3
  418. package/build/cjs/core/tokens/style-dictionary/formats/css-theme-variables.cjs +0 -2
  419. package/build/cjs/core/tokens/style-dictionary/formats/css-theme-variables.cjs.map +0 -1
  420. package/build/cjs/core/tokens/style-dictionary/formats/css-theme-variables.d.cts +0 -3
  421. package/build/cjs/core/tokens/style-dictionary/formats/index.cjs +0 -2
  422. package/build/cjs/core/tokens/style-dictionary/formats/index.cjs.map +0 -1
  423. package/build/cjs/core/tokens/style-dictionary/formats/index.d.cts +0 -6
  424. package/build/cjs/core/tokens/style-dictionary/formats/javascript-esm.cjs +0 -2
  425. package/build/cjs/core/tokens/style-dictionary/formats/javascript-esm.cjs.map +0 -1
  426. package/build/cjs/core/tokens/style-dictionary/formats/javascript-esm.d.cts +0 -3
  427. package/build/cjs/core/tokens/style-dictionary/formats/scss-theme-variables.cjs +0 -2
  428. package/build/cjs/core/tokens/style-dictionary/formats/scss-theme-variables.cjs.map +0 -1
  429. package/build/cjs/core/tokens/style-dictionary/formats/scss-theme-variables.d.cts +0 -3
  430. package/build/cjs/core/tokens/style-dictionary/formats/tailwindcss-colors.cjs +0 -2
  431. package/build/cjs/core/tokens/style-dictionary/formats/tailwindcss-colors.cjs.map +0 -1
  432. package/build/cjs/core/tokens/style-dictionary/formats/tailwindcss-colors.d.cts +0 -3
  433. package/build/cjs/core/tokens/style-dictionary/register.cjs +0 -2
  434. package/build/cjs/core/tokens/style-dictionary/register.cjs.map +0 -1
  435. package/build/cjs/core/tokens/style-dictionary/register.d.cts +0 -1
  436. package/build/cjs/core/tokens/style-dictionary/transforms/index.cjs +0 -2
  437. package/build/cjs/core/tokens/style-dictionary/transforms/index.cjs.map +0 -1
  438. package/build/cjs/core/tokens/style-dictionary/transforms/index.d.cts +0 -2
  439. package/build/cjs/core/tokens/style-dictionary/transforms/strip-light-dark.cjs +0 -2
  440. package/build/cjs/core/tokens/style-dictionary/transforms/strip-light-dark.cjs.map +0 -1
  441. package/build/cjs/core/tokens/style-dictionary/transforms/strip-light-dark.d.cts +0 -3
  442. package/build/cjs/core/tokens.cjs +0 -2
  443. package/build/cjs/core/tokens.cjs.map +0 -1
  444. package/build/cjs/core/tokens.d.cts +0 -593
  445. package/build/cjs/index.cjs +0 -2
  446. package/build/cjs/index.cjs.map +0 -1
  447. package/build/cjs/index.d.cts +0 -3
  448. package/build/cjs/tailwind/colors.cjs +0 -2
  449. package/build/cjs/tailwind/colors.cjs.map +0 -1
  450. package/build/cjs/tailwind/colors.d.cts +0 -39
  451. package/build/es/components-beta/description-list/DescriptionList.js +0 -2
  452. package/build/es/components-beta/description-list/DescriptionList.js.map +0 -1
  453. package/build/es/components-beta/description-list/DescriptionListItem.js +0 -2
  454. package/build/es/components-beta/description-list/DescriptionListItem.js.map +0 -1
  455. package/build/es/components-beta/nav-link/NavLink.js +0 -2
  456. package/build/es/components-beta/nav-link/NavLink.js.map +0 -1
  457. package/build/es/components-beta/nav-link/index.d.ts +0 -1
  458. package/build/es/components-beta/select/Select.js +0 -2
  459. package/build/es/components-beta/select/Select.js.map +0 -1
  460. package/build/es/components-beta/select/index.d.ts +0 -2
  461. package/build/es/core/index.d.ts +0 -2
  462. package/build/es/core/index.js +0 -2
  463. package/build/es/core/index.js.map +0 -1
  464. package/build/es/core/tokens/build-tailwind-4.d.ts +0 -1
  465. package/build/es/core/tokens/build-tailwind-4.js +0 -2
  466. package/build/es/core/tokens/build-tailwind-4.js.map +0 -1
  467. package/build/es/core/tokens/style-dictionary/build.d.ts +0 -0
  468. package/build/es/core/tokens/style-dictionary/build.js +0 -2
  469. package/build/es/core/tokens/style-dictionary/build.js.map +0 -1
  470. package/build/es/core/tokens/style-dictionary/config.d.ts +0 -4
  471. package/build/es/core/tokens/style-dictionary/config.js +0 -2
  472. package/build/es/core/tokens/style-dictionary/config.js.map +0 -1
  473. package/build/es/core/tokens/style-dictionary/filters/index.d.ts +0 -3
  474. package/build/es/core/tokens/style-dictionary/filters/index.js +0 -2
  475. package/build/es/core/tokens/style-dictionary/filters/index.js.map +0 -1
  476. package/build/es/core/tokens/style-dictionary/formats/css-dynamic-color-variables.d.ts +0 -3
  477. package/build/es/core/tokens/style-dictionary/formats/css-dynamic-color-variables.js +0 -2
  478. package/build/es/core/tokens/style-dictionary/formats/css-dynamic-color-variables.js.map +0 -1
  479. package/build/es/core/tokens/style-dictionary/formats/css-theme-variables.d.ts +0 -3
  480. package/build/es/core/tokens/style-dictionary/formats/css-theme-variables.js +0 -2
  481. package/build/es/core/tokens/style-dictionary/formats/css-theme-variables.js.map +0 -1
  482. package/build/es/core/tokens/style-dictionary/formats/index.d.ts +0 -6
  483. package/build/es/core/tokens/style-dictionary/formats/index.js +0 -2
  484. package/build/es/core/tokens/style-dictionary/formats/index.js.map +0 -1
  485. package/build/es/core/tokens/style-dictionary/formats/javascript-esm.d.ts +0 -3
  486. package/build/es/core/tokens/style-dictionary/formats/javascript-esm.js +0 -2
  487. package/build/es/core/tokens/style-dictionary/formats/javascript-esm.js.map +0 -1
  488. package/build/es/core/tokens/style-dictionary/formats/scss-theme-variables.d.ts +0 -3
  489. package/build/es/core/tokens/style-dictionary/formats/scss-theme-variables.js +0 -2
  490. package/build/es/core/tokens/style-dictionary/formats/scss-theme-variables.js.map +0 -1
  491. package/build/es/core/tokens/style-dictionary/formats/tailwindcss-colors.d.ts +0 -3
  492. package/build/es/core/tokens/style-dictionary/formats/tailwindcss-colors.js +0 -2
  493. package/build/es/core/tokens/style-dictionary/formats/tailwindcss-colors.js.map +0 -1
  494. package/build/es/core/tokens/style-dictionary/register.d.ts +0 -1
  495. package/build/es/core/tokens/style-dictionary/register.js +0 -2
  496. package/build/es/core/tokens/style-dictionary/register.js.map +0 -1
  497. package/build/es/core/tokens/style-dictionary/transforms/index.d.ts +0 -2
  498. package/build/es/core/tokens/style-dictionary/transforms/index.js +0 -2
  499. package/build/es/core/tokens/style-dictionary/transforms/index.js.map +0 -1
  500. package/build/es/core/tokens/style-dictionary/transforms/strip-light-dark.d.ts +0 -3
  501. package/build/es/core/tokens/style-dictionary/transforms/strip-light-dark.js +0 -2
  502. package/build/es/core/tokens/style-dictionary/transforms/strip-light-dark.js.map +0 -1
  503. package/build/es/core/tokens.d.ts +0 -593
  504. package/build/es/core/tokens.js +0 -2
  505. package/build/es/core/tokens.js.map +0 -1
  506. package/build/es/index.d.ts +0 -3
  507. package/build/es/index.js +0 -2
  508. package/build/es/index.js.map +0 -1
  509. package/build/es/tailwind/colors.d.ts +0 -39
  510. package/build/es/tailwind/colors.js +0 -2
  511. package/build/es/tailwind/colors.js.map +0 -1
  512. package/build/index-Ck94bTpt.cjs +0 -2
  513. package/build/index-Ck94bTpt.cjs.map +0 -1
  514. package/build/index-DOHQmuhD.js +0 -2
  515. package/build/index-DOHQmuhD.js.map +0 -1
  516. package/src/fonts/styles/_index.scss +0 -1
  517. package/src/fonts/styles/webfonts.scss +0 -145
  518. package/src/tailwind/v4/jokul-tailwind.css +0 -266
  519. package/styles/components/modal/_layout.scss +0 -22
  520. package/styles/components/modal/_modal-base.scss +0 -32
  521. package/styles/components/modal/_motion.scss +0 -45
  522. package/styles/components/modal/_overlay.scss +0 -20
  523. package/styles/components/modal/_parts.scss +0 -33
  524. package/styles/components/modal/_placement.scss +0 -59
  525. package/styles/components-beta/nav-link/navlink.min.css +0 -1
  526. package/styles/components-beta/select/_index.scss +0 -3
  527. package/styles/components-beta/select/select.min.css +0 -1
  528. package/styles/core/core.css +0 -1731
  529. package/styles/core/core.min.css +0 -2
  530. package/styles/core/jkl/_colors.scss +0 -26
  531. package/styles/core/jkl/_helpers.scss +0 -26
  532. package/styles/core/jkl/_tokens.scss +0 -59
  533. package/styles/core/jkl/legacy/_dynamic-colors.scss +0 -40
  534. package/styles/core/jkl/legacy/_index.scss +0 -2
  535. package/styles/core/jkl/legacy/_tokens.scss +0 -742
  536. package/styles/core/theme/_color-tokens.scss +0 -73
  537. package/styles/core/theme/_index.scss +0 -10
  538. package/styles/core/theme/_legacy-color-tokens.scss +0 -81
  539. package/styles/core/theme/_legacy-tokens.scss +0 -279
  540. package/styles/core/theme/_old-vars.scss +0 -21
  541. package/styles/core/theme/_shape.scss +0 -12
  542. package/styles/core/theme/_spacing-tokens.scss +0 -33
  543. package/styles/core/theme/_spacing.scss +0 -64
  544. package/styles/core/theme/_tokens.scss +0 -33
  545. package/styles/core/theme/_typography.scss +0 -38
  546. package/styles/core/utility/_paragraphs.scss +0 -29
  547. package/styles/fonts/_index.scss +0 -1
  548. package/styles/fonts/webfonts.css +0 -115
  549. package/styles/fonts/webfonts.min.css +0 -1
  550. package/styles/fonts/webfonts.scss +0 -145
  551. package/styles/styles.min.css +0 -3
  552. /package/build/cjs/{components-beta → components/beta}/description-list/DescriptionList.d.cts +0 -0
  553. /package/build/cjs/{components-beta → components/beta}/description-list/DescriptionListItem.d.cts +0 -0
  554. /package/build/cjs/{components-beta → components/beta}/description-list/index.cjs +0 -0
  555. /package/build/cjs/{components-beta → components/beta}/description-list/index.cjs.map +0 -0
  556. /package/build/cjs/{components-beta → components/beta}/description-list/types.cjs +0 -0
  557. /package/build/cjs/{components-beta → components/beta}/description-list/types.cjs.map +0 -0
  558. /package/build/cjs/{components-beta → components/beta}/description-list/types.d.cts +0 -0
  559. /package/build/cjs/{components-beta → components/beta}/nav-link/NavLink.d.cts +0 -0
  560. /package/build/cjs/{components-beta → components/beta}/nav-link/index.cjs +0 -0
  561. /package/build/cjs/{components-beta → components/beta}/nav-link/index.cjs.map +0 -0
  562. /package/build/cjs/{components-beta → components/beta}/nav-link/types.cjs +0 -0
  563. /package/build/cjs/{components-beta → components/beta}/nav-link/types.cjs.map +0 -0
  564. /package/build/cjs/{components-beta → components/beta}/select/Select.d.cts +0 -0
  565. /package/build/cjs/{components-beta → components/beta}/select/index.cjs +0 -0
  566. /package/build/cjs/{components-beta → components/beta}/select/index.cjs.map +0 -0
  567. /package/build/cjs/{components-beta → components/beta}/select/types.cjs +0 -0
  568. /package/build/cjs/{components-beta → components/beta}/select/types.cjs.map +0 -0
  569. /package/build/cjs/{core → utilities}/types.cjs +0 -0
  570. /package/build/cjs/{core → utilities}/types.cjs.map +0 -0
  571. /package/build/es/{components-beta → components/beta}/description-list/DescriptionList.d.ts +0 -0
  572. /package/build/es/{components-beta → components/beta}/description-list/DescriptionListItem.d.ts +0 -0
  573. /package/build/es/{components-beta → components/beta}/description-list/index.js +0 -0
  574. /package/build/es/{components-beta → components/beta}/description-list/index.js.map +0 -0
  575. /package/build/es/{components-beta → components/beta}/description-list/types.d.ts +0 -0
  576. /package/build/es/{components-beta → components/beta}/description-list/types.js +0 -0
  577. /package/build/es/{components-beta → components/beta}/description-list/types.js.map +0 -0
  578. /package/build/es/{components-beta → components/beta}/nav-link/NavLink.d.ts +0 -0
  579. /package/build/es/{components-beta → components/beta}/nav-link/index.js +0 -0
  580. /package/build/es/{components-beta → components/beta}/nav-link/index.js.map +0 -0
  581. /package/build/es/{components-beta → components/beta}/nav-link/types.js +0 -0
  582. /package/build/es/{components-beta → components/beta}/nav-link/types.js.map +0 -0
  583. /package/build/es/{components-beta → components/beta}/select/Select.d.ts +0 -0
  584. /package/build/es/{components-beta → components/beta}/select/index.js +0 -0
  585. /package/build/es/{components-beta → components/beta}/select/index.js.map +0 -0
  586. /package/build/es/{components-beta → components/beta}/select/types.js +0 -0
  587. /package/build/es/{components-beta → components/beta}/select/types.js.map +0 -0
  588. /package/build/es/{core → utilities}/types.js +0 -0
  589. /package/build/es/{core → utilities}/types.js.map +0 -0
  590. /package/styles/{core/_layers.scss → _layers.scss} +0 -0
  591. /package/styles/{core/core.scss → base.scss} +0 -0
  592. /package/styles/{components-beta → components/beta}/description-list/_index.scss +0 -0
  593. /package/styles/{components-beta → components/beta}/description-list/description-list.css +0 -0
  594. /package/styles/{components-beta → components/beta}/description-list/description-list.min.css +0 -0
  595. /package/styles/{components-beta → components/beta}/nav-link/_index.scss +0 -0
  596. /package/styles/{core/global → global}/_index.scss +0 -0
  597. /package/styles/{core/jkl → jkl}/_convert.scss +0 -0
  598. /package/styles/{core/jkl → jkl}/_navigation.scss +0 -0
  599. /package/styles/{core/jkl → jkl}/_ornaments.scss +0 -0
  600. /package/styles/{core/jkl → jkl}/_responsive-units.scss +0 -0
  601. /package/styles/{core/jkl → jkl}/_screenreader.scss +0 -0
  602. /package/styles/{core/jkl → jkl}/_screens.scss +0 -0
  603. /package/styles/{core/jkl → jkl}/_shadows.scss +0 -0
  604. /package/styles/{core/jkl → jkl}/_underline.scss +0 -0
  605. /package/styles/{core/jkl → jkl}/_z-index.scss +0 -0
  606. /package/styles/{core/resets → resets}/_index.scss +0 -0
  607. /package/styles/{core/resets → resets}/_normalize.scss +0 -0
  608. /package/styles/{core/resets → resets}/_reset.scss +0 -0
  609. /package/styles/{core/utility → utility}/_index.scss +0 -0
@@ -1,1731 +0,0 @@
1
- @charset "UTF-8";
2
- @layer jokul {
3
- @layer resets, theme, global, components, utility;
4
- }
5
- /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
6
- @layer jokul.resets {
7
- /* Document
8
- ========================================================================== */
9
- /**
10
- * 1. Correct the line height in all browsers.
11
- * 2. Prevent adjustments of font size after orientation changes in iOS.
12
- */
13
- html {
14
- line-height: 1.15; /* 1 */
15
- -webkit-text-size-adjust: 100%; /* 2 */
16
- }
17
- /* Sections
18
- ========================================================================== */
19
- /**
20
- * Remove the margin in all browsers.
21
- */
22
- body {
23
- margin: 0;
24
- }
25
- /**
26
- * Correct the font size and margin on `h1` elements within `section` and
27
- * `article` contexts in Chrome, Firefox, and Safari.
28
- */
29
- h1 {
30
- font-size: 2em;
31
- margin: 0.67em 0;
32
- }
33
- /* Grouping content
34
- ========================================================================== */
35
- /**
36
- * 1. Add the correct box sizing in Firefox.
37
- * 2. Show the overflow in Edge and IE.
38
- */
39
- hr {
40
- box-sizing: content-box; /* 1 */
41
- height: 0; /* 1 */
42
- overflow: visible; /* 2 */
43
- }
44
- /**
45
- * 1. Correct the inheritance and scaling of font size in all browsers.
46
- * 2. Correct the odd `em` font sizing in all browsers.
47
- */
48
- pre {
49
- font-family: monospace, monospace; /* 1 */
50
- font-size: 1em; /* 2 */
51
- }
52
- /* Text-level semantics
53
- ========================================================================== */
54
- /**
55
- * 1. Remove the bottom border in Chrome 57-
56
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
57
- */
58
- abbr[title] {
59
- border-bottom: none; /* 1 */
60
- text-decoration: underline; /* 2 */
61
- text-decoration: underline dotted; /* 2 */
62
- }
63
- /**
64
- * Add the correct font weight in Chrome, Edge, and Safari.
65
- */
66
- b,
67
- strong {
68
- font-weight: bolder;
69
- }
70
- /**
71
- * 1. Correct the inheritance and scaling of font size in all browsers.
72
- * 2. Correct the odd `em` font sizing in all browsers.
73
- */
74
- code,
75
- kbd,
76
- samp {
77
- font-family: monospace, monospace; /* 1 */
78
- font-size: 1em; /* 2 */
79
- }
80
- /**
81
- * Add the correct font size in all browsers.
82
- */
83
- small {
84
- font-size: 80%;
85
- }
86
- /**
87
- * Prevent `sub` and `sup` elements from affecting the line height in
88
- * all browsers.
89
- */
90
- sub,
91
- sup {
92
- font-size: 75%;
93
- line-height: 0;
94
- position: relative;
95
- vertical-align: baseline;
96
- }
97
- sub {
98
- bottom: -0.25em;
99
- }
100
- sup {
101
- top: -0.5em;
102
- }
103
- /* Forms
104
- ========================================================================== */
105
- /**
106
- * 1. Change the font styles in all browsers.
107
- * 2. Remove the margin in Firefox and Safari.
108
- */
109
- button,
110
- input,
111
- optgroup,
112
- select,
113
- textarea {
114
- font-family: inherit; /* 1 */
115
- font-size: 100%; /* 1 */
116
- line-height: 1.15; /* 1 */
117
- margin: 0; /* 2 */
118
- }
119
- /**
120
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
121
- * 1. Remove the inheritance of text transform in Firefox.
122
- */
123
- button,
124
- select {
125
- /* 1 */
126
- text-transform: none;
127
- }
128
- /**
129
- * Correct the inability to style clickable types in iOS and Safari.
130
- */
131
- button,
132
- [type=button],
133
- [type=reset],
134
- [type=submit] {
135
- -webkit-appearance: button;
136
- }
137
- /**
138
- * Correct the padding in Firefox.
139
- */
140
- fieldset {
141
- padding: 0.35em 0.75em 0.625em;
142
- }
143
- /**
144
- * 1. Correct the text wrapping in Edge and IE.
145
- * 2. Remove the padding so developers are not caught out when they zero out
146
- * `fieldset` elements in all browsers.
147
- */
148
- legend {
149
- box-sizing: border-box; /* 1 */
150
- display: table; /* 1 */
151
- max-width: 100%; /* 1 */
152
- padding: 0; /* 2 */
153
- white-space: normal; /* 1 */
154
- }
155
- /**
156
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
157
- */
158
- progress {
159
- vertical-align: baseline;
160
- }
161
- /**
162
- * Correct the cursor style of increment and decrement buttons in Chrome.
163
- */
164
- [type=number]::-webkit-inner-spin-button,
165
- [type=number]::-webkit-outer-spin-button {
166
- height: auto;
167
- }
168
- /**
169
- * 1. Correct the odd appearance in Chrome and Safari.
170
- * 2. Correct the outline style in Safari.
171
- */
172
- [type=search] {
173
- -webkit-appearance: textfield; /* 1 */
174
- outline-offset: -2px; /* 2 */
175
- }
176
- /**
177
- * Remove the inner padding in Chrome and Safari on macOS.
178
- */
179
- [type=search]::-webkit-search-decoration {
180
- -webkit-appearance: none;
181
- }
182
- /**
183
- * 1. Correct the inability to style clickable types in iOS and Safari.
184
- * 2. Change font properties to `inherit` in Safari.
185
- */
186
- ::-webkit-file-upload-button {
187
- -webkit-appearance: button; /* 1 */
188
- font: inherit; /* 2 */
189
- }
190
- /* Interactive
191
- ========================================================================== */
192
- /*
193
- * Add the correct display in Edge, IE 10+, and Firefox.
194
- */
195
- details {
196
- display: block;
197
- }
198
- /*
199
- * Add the correct display in all browsers.
200
- */
201
- summary {
202
- display: list-item;
203
- }
204
- }
205
- @layer jokul.resets {
206
- /* Text blocks
207
- ========================================================================== */
208
- /**
209
- * Remove default margins from all block-level text elements
210
- * such as `p` and headings
211
- */
212
- h1,
213
- h2,
214
- h3,
215
- h4,
216
- h5,
217
- h6,
218
- p {
219
- margin: 0;
220
- }
221
- /* Forms
222
- ========================================================================== */
223
- /**
224
- * Remove margins from fieldset element.
225
- */
226
- fieldset {
227
- margin: 0;
228
- border: 0;
229
- padding: 0;
230
- display: block;
231
- line-height: 1;
232
- }
233
- /* Forms
234
- ========================================================================== */
235
- /**
236
- * Remove borders from table elements.
237
- */
238
- table {
239
- border-collapse: collapse;
240
- }
241
- /**
242
- * Remove margins from table elements.
243
- */
244
- table,
245
- thead,
246
- tbody,
247
- tr,
248
- td,
249
- th {
250
- margin: 0;
251
- padding: 0;
252
- }
253
- /*
254
- * https://css-tricks.com/the-hidden-attribute-is-visibly-weak/
255
- * tl;dr – hidden er en User Agent style, så hvis et element har noen som helst display som ikke er
256
- * hidden vil ikke hidden-attributtet gjøre noe som helst visuelt. Her gjør vi det til vår egen author style.
257
- */
258
- .jkl [hidden] {
259
- display: none !important;
260
- }
261
- }
262
- /**
263
- * Do not edit directly, this file was auto-generated.
264
- */
265
- /* stylelint-disable */
266
- /**
267
- * Do not edit directly, this file was auto-generated.
268
- */
269
- @layer jokul.theme {
270
- @media screen and (prefers-color-scheme: light) {
271
- :root {
272
- --jkl-color-background-page: oklch(96% 0.004 67);
273
- --jkl-color-background-surface-default: oklch(92% 0.008 67);
274
- --jkl-color-background-surface-highlight: oklch(100% 0.001 67);
275
- --jkl-color-background-surface-on-surface: oklch(96% 0.004 67);
276
- --jkl-color-background-surface-moderate: oklch(80% 0.008 67);
277
- --jkl-color-background-surface-knockout: oklch(35% 0.007 67);
278
- --jkl-color-background-surface-error: oklch(80% 0.09 16);
279
- --jkl-color-background-surface-warning: oklch(90% 0.08 94);
280
- --jkl-color-background-surface-info: oklch(80% 0.09 285);
281
- --jkl-color-background-surface-succes: oklch(80% 0.066 156);
282
- --jkl-color-border-subdued: oklch(80% 0.008 67);
283
- --jkl-color-border-strong: oklch(50% 0.007 67);
284
- --jkl-color-border-strongest: oklch(0% 0.007 64);
285
- --jkl-color-border-knockout: oklch(100% 0.001 67);
286
- --jkl-color-border-info: oklch(70% 0.145 285);
287
- --jkl-color-border-success: oklch(70% 0.089 156);
288
- --jkl-color-border-error: oklch(70% 0.13 16);
289
- --jkl-color-border-warning: oklch(70% 0.1 94);
290
- --jkl-color-text-default: oklch(0% 0.007 64);
291
- --jkl-color-text-subdued: oklch(50% 0.007 67);
292
- --jkl-color-text-knockout: oklch(100% 0.001 67);
293
- --jkl-color-text-info: oklch(25% 0.056 285);
294
- --jkl-color-text-info-strong: oklch(50% 0.186 285);
295
- --jkl-color-text-success: oklch(25% 0.024 156);
296
- --jkl-color-text-success-strong: oklch(50% 0.106 156);
297
- --jkl-color-text-error: oklch(25% 0.056 16);
298
- --jkl-color-text-error-strong: oklch(50% 0.16 16);
299
- --jkl-color-text-warning: oklch(25% 0.03 94);
300
- --jkl-color-text-warning-strong: oklch(70% 0.1 94);
301
- }
302
- }
303
- [data-theme=light] {
304
- --jkl-color-background-page: oklch(96% 0.004 67);
305
- --jkl-color-background-surface-default: oklch(92% 0.008 67);
306
- --jkl-color-background-surface-highlight: oklch(100% 0.001 67);
307
- --jkl-color-background-surface-on-surface: oklch(96% 0.004 67);
308
- --jkl-color-background-surface-moderate: oklch(80% 0.008 67);
309
- --jkl-color-background-surface-knockout: oklch(35% 0.007 67);
310
- --jkl-color-background-surface-error: oklch(80% 0.09 16);
311
- --jkl-color-background-surface-warning: oklch(90% 0.08 94);
312
- --jkl-color-background-surface-info: oklch(80% 0.09 285);
313
- --jkl-color-background-surface-succes: oklch(80% 0.066 156);
314
- --jkl-color-border-subdued: oklch(80% 0.008 67);
315
- --jkl-color-border-strong: oklch(50% 0.007 67);
316
- --jkl-color-border-strongest: oklch(0% 0.007 64);
317
- --jkl-color-border-knockout: oklch(100% 0.001 67);
318
- --jkl-color-border-info: oklch(70% 0.145 285);
319
- --jkl-color-border-success: oklch(70% 0.089 156);
320
- --jkl-color-border-error: oklch(70% 0.13 16);
321
- --jkl-color-border-warning: oklch(70% 0.1 94);
322
- --jkl-color-text-default: oklch(0% 0.007 64);
323
- --jkl-color-text-subdued: oklch(50% 0.007 67);
324
- --jkl-color-text-knockout: oklch(100% 0.001 67);
325
- --jkl-color-text-info: oklch(25% 0.056 285);
326
- --jkl-color-text-info-strong: oklch(50% 0.186 285);
327
- --jkl-color-text-success: oklch(25% 0.024 156);
328
- --jkl-color-text-success-strong: oklch(50% 0.106 156);
329
- --jkl-color-text-error: oklch(25% 0.056 16);
330
- --jkl-color-text-error-strong: oklch(50% 0.16 16);
331
- --jkl-color-text-warning: oklch(25% 0.03 94);
332
- --jkl-color-text-warning-strong: oklch(70% 0.1 94);
333
- }
334
- @media screen and (prefers-color-scheme: dark) {
335
- :root {
336
- --jkl-color-background-page: oklch(10% 0.007 67);
337
- --jkl-color-background-surface-default: oklch(25% 0.007 67);
338
- --jkl-color-background-surface-highlight: oklch(35% 0.007 67);
339
- --jkl-color-background-surface-on-surface: oklch(10% 0.007 67);
340
- --jkl-color-background-surface-moderate: oklch(50% 0.007 67);
341
- --jkl-color-background-surface-knockout: oklch(85% 0.008 67);
342
- --jkl-color-background-surface-error: oklch(45% 0.146 16);
343
- --jkl-color-background-surface-warning: oklch(45% 0.065 94);
344
- --jkl-color-background-surface-info: oklch(45% 0.169 285);
345
- --jkl-color-background-surface-succes: oklch(45% 0.095 156);
346
- --jkl-color-border-subdued: oklch(50% 0.007 67);
347
- --jkl-color-border-strong: oklch(80% 0.008 67);
348
- --jkl-color-border-strongest: oklch(100% 0.001 67);
349
- --jkl-color-border-knockout: oklch(0% 0.007 64);
350
- --jkl-color-border-info: oklch(60% 0.17 285);
351
- --jkl-color-border-success: oklch(60% 0.1 156);
352
- --jkl-color-border-error: oklch(60% 0.149 16);
353
- --jkl-color-border-warning: oklch(60% 0.09 94);
354
- --jkl-color-text-default: oklch(100% 0.001 67);
355
- --jkl-color-text-subdued: oklch(80% 0.008 67);
356
- --jkl-color-text-knockout: oklch(0% 0.007 64);
357
- --jkl-color-text-info: oklch(90% 0.034 285);
358
- --jkl-color-text-info-strong: oklch(70% 0.145 285);
359
- --jkl-color-text-success: oklch(90% 0.035 156);
360
- --jkl-color-text-success-strong: oklch(70% 0.089 156);
361
- --jkl-color-text-error: oklch(90% 0.045 16);
362
- --jkl-color-text-error-strong: oklch(70% 0.13 16);
363
- --jkl-color-text-warning: oklch(90% 0.08 94);
364
- --jkl-color-text-warning-strong: oklch(70% 0.1 94);
365
- }
366
- }
367
- [data-theme=dark] {
368
- --jkl-color-background-page: oklch(10% 0.007 67);
369
- --jkl-color-background-surface-default: oklch(25% 0.007 67);
370
- --jkl-color-background-surface-highlight: oklch(35% 0.007 67);
371
- --jkl-color-background-surface-on-surface: oklch(10% 0.007 67);
372
- --jkl-color-background-surface-moderate: oklch(50% 0.007 67);
373
- --jkl-color-background-surface-knockout: oklch(85% 0.008 67);
374
- --jkl-color-background-surface-error: oklch(45% 0.146 16);
375
- --jkl-color-background-surface-warning: oklch(45% 0.065 94);
376
- --jkl-color-background-surface-info: oklch(45% 0.169 285);
377
- --jkl-color-background-surface-succes: oklch(45% 0.095 156);
378
- --jkl-color-border-subdued: oklch(50% 0.007 67);
379
- --jkl-color-border-strong: oklch(80% 0.008 67);
380
- --jkl-color-border-strongest: oklch(100% 0.001 67);
381
- --jkl-color-border-knockout: oklch(0% 0.007 64);
382
- --jkl-color-border-info: oklch(60% 0.17 285);
383
- --jkl-color-border-success: oklch(60% 0.1 156);
384
- --jkl-color-border-error: oklch(60% 0.149 16);
385
- --jkl-color-border-warning: oklch(60% 0.09 94);
386
- --jkl-color-text-default: oklch(100% 0.001 67);
387
- --jkl-color-text-subdued: oklch(80% 0.008 67);
388
- --jkl-color-text-knockout: oklch(0% 0.007 64);
389
- --jkl-color-text-info: oklch(90% 0.034 285);
390
- --jkl-color-text-info-strong: oklch(70% 0.145 285);
391
- --jkl-color-text-success: oklch(90% 0.035 156);
392
- --jkl-color-text-success-strong: oklch(70% 0.089 156);
393
- --jkl-color-text-error: oklch(90% 0.045 16);
394
- --jkl-color-text-error-strong: oklch(70% 0.13 16);
395
- --jkl-color-text-warning: oklch(90% 0.08 94);
396
- --jkl-color-text-warning-strong: oklch(70% 0.1 94);
397
- }
398
- }
399
- @layer jokul.theme {
400
- :root {
401
- --jkl-spacing-2: 0.125rem;
402
- --jkl-spacing-4: 0.25rem;
403
- --jkl-spacing-8: 0.5rem;
404
- --jkl-spacing-12: 0.75rem;
405
- --jkl-spacing-16: 1rem;
406
- --jkl-spacing-24: 1.5rem;
407
- --jkl-spacing-32: 2rem;
408
- --jkl-spacing-40: 2.5rem;
409
- --jkl-spacing-64: 4rem;
410
- --jkl-spacing-104: 6.5rem;
411
- --jkl-spacing-168: 10.5rem;
412
- --jkl-spacing-16-24: 1rem;
413
- --jkl-spacing-24-40: 1.5rem;
414
- --jkl-spacing-24-32: 1.5rem;
415
- --jkl-spacing-32-40: 2rem;
416
- --jkl-spacing-40-64: 2.5rem;
417
- --jkl-spacing-64-104: 4rem;
418
- --jkl-spacing-104-168: 6.5rem;
419
- --jkl-spacing-16-16-24: 1rem;
420
- --jkl-spacing-16-24-32: 1rem;
421
- --jkl-spacing-16-24-40: 1rem;
422
- --jkl-spacing-24-24-32: 1.5rem;
423
- --jkl-spacing-24-24-40: 1.5rem;
424
- --jkl-spacing-24-32-40: 1.5rem;
425
- --jkl-spacing-32-32-40: 2rem;
426
- --jkl-spacing-32-40-64: 2rem;
427
- --jkl-spacing-40-40-64: 2.5rem;
428
- --jkl-spacing-40-64-104: 2.5rem;
429
- --jkl-spacing-64-64-104: 4rem;
430
- --jkl-spacing-64-104-168: 4rem;
431
- --jkl-spacing-104-104-168: 6.5rem;
432
- }
433
- @media (min-width: 680px) {
434
- :root {
435
- --jkl-spacing-16-24: 1.5rem;
436
- --jkl-spacing-24-40: 2.5rem;
437
- --jkl-spacing-24-32: 2rem;
438
- --jkl-spacing-32-40: 2.5rem;
439
- --jkl-spacing-40-64: 4rem;
440
- --jkl-spacing-64-104: 6.5rem;
441
- --jkl-spacing-104-168: 10.5rem;
442
- --jkl-spacing-16-16-24: 1rem;
443
- --jkl-spacing-16-24-32: 1.5rem;
444
- --jkl-spacing-16-24-40: 1.5rem;
445
- --jkl-spacing-24-24-32: 1.5rem;
446
- --jkl-spacing-24-24-40: 1.5rem;
447
- --jkl-spacing-24-32-40: 2rem;
448
- --jkl-spacing-32-32-40: 2rem;
449
- --jkl-spacing-32-40-64: 2.5rem;
450
- --jkl-spacing-40-40-64: 2.5rem;
451
- --jkl-spacing-40-64-104: 4rem;
452
- --jkl-spacing-64-64-104: 4rem;
453
- --jkl-spacing-64-104-168: 6.5rem;
454
- --jkl-spacing-104-104-168: 6.5rem;
455
- }
456
- }
457
- @media (min-width: 1200px) {
458
- :root {
459
- --jkl-spacing-16-16-24: 1.5rem;
460
- --jkl-spacing-16-24-32: 2rem;
461
- --jkl-spacing-16-24-40: 2.5rem;
462
- --jkl-spacing-24-24-32: 2rem;
463
- --jkl-spacing-24-24-40: 2.5rem;
464
- --jkl-spacing-24-32-40: 2.5rem;
465
- --jkl-spacing-32-32-40: 2.5rem;
466
- --jkl-spacing-32-40-64: 4rem;
467
- --jkl-spacing-40-40-64: 4rem;
468
- --jkl-spacing-40-64-104: 6.5rem;
469
- --jkl-spacing-64-64-104: 6.5rem;
470
- --jkl-spacing-64-104-168: 10.5rem;
471
- --jkl-spacing-104-104-168: 10.5rem;
472
- }
473
- }
474
- }
475
- /**
476
- * Do not edit directly, this file was auto-generated.
477
- */
478
- /* stylelint-disable */
479
- @layer jokul.theme {
480
- @media screen and (prefers-color-scheme: light) {
481
- :root {
482
- --jkl-color-background-page: #F4F2EF;
483
- --jkl-color-background-page-variant: #F9F9F9;
484
- --jkl-color-background-container: #F9F9F9;
485
- --jkl-color-background-container-low: #ECE9E5;
486
- --jkl-color-background-container-high: #FFFFFF;
487
- --jkl-color-background-container-inverted: #1B1917;
488
- --jkl-color-background-container-subdued: #C8C5C3;
489
- --jkl-color-background-input-base: rgba(0, 0, 0, 0);
490
- --jkl-color-background-input-focus: #FFFFFF;
491
- --jkl-color-background-action: #1B1917;
492
- --jkl-color-background-interactive: rgba(0, 0, 0, 0);
493
- --jkl-color-background-interactive-hover: #ECE9E5;
494
- --jkl-color-background-interactive-selected: #E0DBD4;
495
- --jkl-color-background-alert-neutral: #E0DBD4;
496
- --jkl-color-background-alert-info: #D3D3F6;
497
- --jkl-color-background-alert-success: #ACD3B5;
498
- --jkl-color-background-alert-warning: #EFDD9E;
499
- --jkl-color-background-alert-error: #F6B3B3;
500
- --jkl-color-text-default: #1B1917;
501
- --jkl-color-text-subdued: #636060;
502
- --jkl-color-text-inverted: #F9F9F9;
503
- --jkl-color-text-on-action: #F9F9F9;
504
- --jkl-color-text-interactive: #1B1917;
505
- --jkl-color-text-interactive-hover: #636060;
506
- --jkl-color-text-on-alert: #1B1917;
507
- --jkl-color-text-on-alert-subdued: #444141;
508
- --jkl-color-border-action: #1B1917;
509
- --jkl-color-border-input: #636060;
510
- --jkl-color-border-input-focus: #1B1917;
511
- --jkl-color-border-separator: #C8C5C3;
512
- --jkl-color-border-separator-strong: #636060;
513
- --jkl-color-border-separator-hover: #1B1917;
514
- --jkl-color-border-subdued: #C8C5C3;
515
- }
516
- }
517
- [data-theme=light] {
518
- --jkl-color-background-page: #F4F2EF;
519
- --jkl-color-background-page-variant: #F9F9F9;
520
- --jkl-color-background-container: #F9F9F9;
521
- --jkl-color-background-container-low: #ECE9E5;
522
- --jkl-color-background-container-high: #FFFFFF;
523
- --jkl-color-background-container-inverted: #1B1917;
524
- --jkl-color-background-container-subdued: #C8C5C3;
525
- --jkl-color-background-input-base: rgba(0, 0, 0, 0);
526
- --jkl-color-background-input-focus: #FFFFFF;
527
- --jkl-color-background-action: #1B1917;
528
- --jkl-color-background-interactive: rgba(0, 0, 0, 0);
529
- --jkl-color-background-interactive-hover: #ECE9E5;
530
- --jkl-color-background-interactive-selected: #E0DBD4;
531
- --jkl-color-background-alert-neutral: #E0DBD4;
532
- --jkl-color-background-alert-info: #D3D3F6;
533
- --jkl-color-background-alert-success: #ACD3B5;
534
- --jkl-color-background-alert-warning: #EFDD9E;
535
- --jkl-color-background-alert-error: #F6B3B3;
536
- --jkl-color-text-default: #1B1917;
537
- --jkl-color-text-subdued: #636060;
538
- --jkl-color-text-inverted: #F9F9F9;
539
- --jkl-color-text-on-action: #F9F9F9;
540
- --jkl-color-text-interactive: #1B1917;
541
- --jkl-color-text-interactive-hover: #636060;
542
- --jkl-color-text-on-alert: #1B1917;
543
- --jkl-color-text-on-alert-subdued: #444141;
544
- --jkl-color-border-action: #1B1917;
545
- --jkl-color-border-input: #636060;
546
- --jkl-color-border-input-focus: #1B1917;
547
- --jkl-color-border-separator: #C8C5C3;
548
- --jkl-color-border-separator-strong: #636060;
549
- --jkl-color-border-separator-hover: #1B1917;
550
- --jkl-color-border-subdued: #C8C5C3;
551
- }
552
- @media screen and (prefers-color-scheme: dark) {
553
- :root {
554
- --jkl-color-background-page: #1B1917;
555
- --jkl-color-background-page-variant: #1B1917;
556
- --jkl-color-background-container: #313030;
557
- --jkl-color-background-container-low: #000000;
558
- --jkl-color-background-container-high: #313030;
559
- --jkl-color-background-container-inverted: #F9F9F9;
560
- --jkl-color-background-container-subdued: #636060;
561
- --jkl-color-background-input-base: rgba(0, 0, 0, 0);
562
- --jkl-color-background-input-focus: #313030;
563
- --jkl-color-background-action: #F9F9F9;
564
- --jkl-color-background-interactive: rgba(0, 0, 0, 0);
565
- --jkl-color-background-interactive-hover: #444141;
566
- --jkl-color-background-interactive-selected: #636060;
567
- --jkl-color-background-alert-neutral: #E0DBD4;
568
- --jkl-color-background-alert-info: #A9A9CA;
569
- --jkl-color-background-alert-success: #94B79B;
570
- --jkl-color-background-alert-warning: #DECC8D;
571
- --jkl-color-background-alert-error: #DE9E9E;
572
- --jkl-color-text-default: #F9F9F9;
573
- --jkl-color-text-subdued: #C8C5C3;
574
- --jkl-color-text-inverted: #1B1917;
575
- --jkl-color-text-on-action: #1B1917;
576
- --jkl-color-text-interactive: #F9F9F9;
577
- --jkl-color-text-interactive-hover: #C8C5C3;
578
- --jkl-color-text-on-alert: #1B1917;
579
- --jkl-color-text-on-alert-subdued: #444141;
580
- --jkl-color-border-action: #F9F9F9;
581
- --jkl-color-border-input: #C8C5C3;
582
- --jkl-color-border-input-focus: #F9F9F9;
583
- --jkl-color-border-separator: #636060;
584
- --jkl-color-border-separator-strong: #C8C5C3;
585
- --jkl-color-border-separator-hover: #F9F9F9;
586
- --jkl-color-border-subdued: #636060;
587
- }
588
- }
589
- [data-theme=dark] {
590
- --jkl-color-background-page: #1B1917;
591
- --jkl-color-background-page-variant: #1B1917;
592
- --jkl-color-background-container: #313030;
593
- --jkl-color-background-container-low: #000000;
594
- --jkl-color-background-container-high: #313030;
595
- --jkl-color-background-container-inverted: #F9F9F9;
596
- --jkl-color-background-container-subdued: #636060;
597
- --jkl-color-background-input-base: rgba(0, 0, 0, 0);
598
- --jkl-color-background-input-focus: #313030;
599
- --jkl-color-background-action: #F9F9F9;
600
- --jkl-color-background-interactive: rgba(0, 0, 0, 0);
601
- --jkl-color-background-interactive-hover: #444141;
602
- --jkl-color-background-interactive-selected: #636060;
603
- --jkl-color-background-alert-neutral: #E0DBD4;
604
- --jkl-color-background-alert-info: #A9A9CA;
605
- --jkl-color-background-alert-success: #94B79B;
606
- --jkl-color-background-alert-warning: #DECC8D;
607
- --jkl-color-background-alert-error: #DE9E9E;
608
- --jkl-color-text-default: #F9F9F9;
609
- --jkl-color-text-subdued: #C8C5C3;
610
- --jkl-color-text-inverted: #1B1917;
611
- --jkl-color-text-on-action: #1B1917;
612
- --jkl-color-text-interactive: #F9F9F9;
613
- --jkl-color-text-interactive-hover: #C8C5C3;
614
- --jkl-color-text-on-alert: #1B1917;
615
- --jkl-color-text-on-alert-subdued: #444141;
616
- --jkl-color-border-action: #F9F9F9;
617
- --jkl-color-border-input: #C8C5C3;
618
- --jkl-color-border-input-focus: #F9F9F9;
619
- --jkl-color-border-separator: #636060;
620
- --jkl-color-border-separator-strong: #C8C5C3;
621
- --jkl-color-border-separator-hover: #F9F9F9;
622
- --jkl-color-border-subdued: #636060;
623
- }
624
- }
625
- /**
626
- * Do not edit directly, this file was auto-generated.
627
- */
628
- @layer jokul.theme {
629
- :root {
630
- --jkl-border-width-1: 0.0625rem;
631
- --jkl-border-width-2: 0.125rem;
632
- --jkl-border-width-3: 0.1875rem;
633
- --jkl-border-radius-none: 0;
634
- --jkl-border-radius-xs: 0.25rem;
635
- --jkl-border-radius-s: 0.5rem;
636
- --jkl-border-radius-m: 0.75rem;
637
- --jkl-border-radius-l: 1rem;
638
- --jkl-border-radius-full: 9999px;
639
- --jkl-breakpoint-small: 0;
640
- --jkl-breakpoint-medium: 680px;
641
- --jkl-breakpoint-large: 1200px;
642
- --jkl-breakpoint-xl: 1600px;
643
- --jkl-color-brand-snohvit: #F9F9F9;
644
- --jkl-color-brand-varde: #E0DBD4;
645
- --jkl-color-brand-granitt: #1B1917;
646
- --jkl-color-brand-hvit: #FFFFFF;
647
- --jkl-color-brand-svart: #000000;
648
- --jkl-color-brand-skifer: #313030;
649
- --jkl-color-brand-fjellgra: #444141;
650
- --jkl-color-brand-stein: #636060;
651
- --jkl-color-brand-svaberg: #C8C5C3;
652
- --jkl-color-brand-dis: #ECE9E5;
653
- --jkl-color-brand-sand: #F4F2EF;
654
- --jkl-color-functional-info: #D3D3F6;
655
- --jkl-color-functional-info-dark: #A9A9CA;
656
- --jkl-color-functional-success: #ACD3B5;
657
- --jkl-color-functional-success-dark: #94B79B;
658
- --jkl-color-functional-warning: #EFDD9E;
659
- --jkl-color-functional-warning-dark: #DECC8D;
660
- --jkl-color-functional-error: #F6B3B3;
661
- --jkl-color-functional-error-dark: #DE9E9E;
662
- --jkl-color-svart: #000;
663
- --jkl-color-granitt: #1b1917;
664
- --jkl-color-skifer: #313030;
665
- --jkl-color-fjellgra: #444141;
666
- --jkl-color-stein: #636060;
667
- --jkl-color-svaberg: #c8c5c3;
668
- --jkl-color-varde: #e0dbd4;
669
- --jkl-color-dis: #ece9e5;
670
- --jkl-color-sand: #f4f2ef;
671
- --jkl-color-snohvit: #f9f9f9;
672
- --jkl-color-hvit: #fff;
673
- --jkl-color-suksess: #acd3b5;
674
- --jkl-color-suksess-dark: #94b79b;
675
- --jkl-color-feil: #f6b3b3;
676
- --jkl-color-feil-dark: #de9e9e;
677
- --jkl-color-info: #d3d3f6;
678
- --jkl-color-info-dark: #a9a9ca;
679
- --jkl-color-advarsel: #efdd9e;
680
- --jkl-color-advarsel-dark: #decc8d;
681
- --jkl-motion-timing-energetic: 75ms;
682
- --jkl-motion-timing-snappy: 100ms;
683
- --jkl-motion-timing-productive: 150ms;
684
- --jkl-motion-timing-expressive: 250ms;
685
- --jkl-motion-timing-lazy: 400ms;
686
- --jkl-motion-easing-standard: ease;
687
- --jkl-motion-easing-entrance: ease-out;
688
- --jkl-motion-easing-exit: ease-in;
689
- --jkl-motion-easing-ease-in-bounce-out: cubic-bezier(0, 0, 0.375, 1.17);
690
- --jkl-motion-easing-focus: cubic-bezier(0.6, 0.2, 0.35, 1);
691
- --jkl-spacing-0: 0rem;
692
- --jkl-spacing-2: 0.125rem;
693
- --jkl-spacing-4: 0.25rem;
694
- --jkl-spacing-8: 0.5rem;
695
- --jkl-spacing-12: 0.75rem;
696
- --jkl-spacing-16: 1rem;
697
- --jkl-spacing-24: 1.5rem;
698
- --jkl-spacing-32: 2rem;
699
- --jkl-spacing-40: 2.5rem;
700
- --jkl-spacing-64: 4rem;
701
- --jkl-spacing-104: 6.5rem;
702
- --jkl-spacing-168: 10.5rem;
703
- --jkl-semantic-spacing-none: 0;
704
- --jkl-semantic-spacing-2xs: 0.25rem;
705
- --jkl-semantic-spacing-xs: 0.5rem;
706
- --jkl-semantic-spacing-s: 1rem;
707
- --jkl-semantic-spacing-m: 1.5rem;
708
- --jkl-semantic-spacing-l: 2.5rem;
709
- --jkl-semantic-spacing-xl: 4rem;
710
- --jkl-semantic-spacing-2xl: 6.5rem;
711
- --jkl-icon-weight-normal: 300;
712
- --jkl-icon-weight-bold: 400;
713
- --jkl-typography-weight-normal: 400;
714
- --jkl-typography-weight-bold: 700;
715
- --jkl-typography-font-weight-normal: 400;
716
- --jkl-typography-font-weight-bold: 700;
717
- --jkl-typography-font-size-1: var(--jkl-font-size-1);
718
- --jkl-typography-font-size-2: var(--jkl-font-size-2);
719
- --jkl-typography-font-size-3: var(--jkl-font-size-3);
720
- --jkl-typography-font-size-4: var(--jkl-font-size-4);
721
- --jkl-typography-font-size-5: var(--jkl-font-size-5);
722
- --jkl-typography-font-size-6: var(--jkl-font-size-6);
723
- --jkl-typography-font-size-7: var(--jkl-font-size-7);
724
- --jkl-typography-font-size-8: var(--jkl-font-size-8);
725
- --jkl-typography-font-size-9: var(--jkl-font-size-9);
726
- --jkl-typography-font-size-10: var(--jkl-font-size-10);
727
- --jkl-typography-font-size-16: 1rem;
728
- --jkl-typography-font-size-18: 1.125rem;
729
- --jkl-typography-font-size-20: 1.25rem;
730
- --jkl-typography-font-size-21: 1.3125rem;
731
- --jkl-typography-font-size-23: 1.4375rem;
732
- --jkl-typography-font-size-25: 1.5625rem;
733
- --jkl-typography-font-size-26: 1.625rem;
734
- --jkl-typography-font-size-28: 1.75rem;
735
- --jkl-typography-font-size-30: 1.875rem;
736
- --jkl-typography-font-size-36: 2.25rem;
737
- --jkl-typography-font-size-44: 2.75rem;
738
- --jkl-typography-font-size-56: 3.5rem;
739
- --jkl-typography-line-height-24: 1.5rem;
740
- --jkl-typography-line-height-28: 1.75rem;
741
- --jkl-typography-line-height-32: 2rem;
742
- --jkl-typography-line-height-36: 2.25rem;
743
- --jkl-typography-line-height-40: 2.5rem;
744
- --jkl-typography-line-height-44: 2.75rem;
745
- --jkl-typography-line-height-52: 3.25rem;
746
- --jkl-typography-line-height-64: 4rem;
747
- --jkl-typography-line-height-flush: var(--jkl-line-height-flush);
748
- --jkl-typography-line-height-tight: var(--jkl-line-height-tight);
749
- --jkl-typography-line-height-relaxed: var(--jkl-line-height-relaxed);
750
- --jkl-typography-style-title-small-font-size: var(--jkl-font-size-8);
751
- --jkl-typography-style-title-small-line-height: var(--jkl-line-height-tight);
752
- --jkl-typography-style-title-small-font-weight: 400;
753
- --jkl-typography-style-title-base-font-size: var(--jkl-font-size-8);
754
- --jkl-typography-style-title-base-line-height: var(--jkl-line-height-tight);
755
- --jkl-typography-style-title-base-font-weight: 400;
756
- --jkl-typography-style-title-small-small-font-size: var(--jkl-font-size-7);
757
- --jkl-typography-style-title-small-small-line-height: var(--jkl-line-height-tight);
758
- --jkl-typography-style-title-small-small-font-weight: 400;
759
- --jkl-typography-style-title-small-base-font-size: var(--jkl-font-size-7);
760
- --jkl-typography-style-title-small-base-line-height: var(--jkl-line-height-tight);
761
- --jkl-typography-style-title-small-base-font-weight: 400;
762
- --jkl-typography-style-heading-1-small-font-size: var(--jkl-font-size-8);
763
- --jkl-typography-style-heading-1-small-line-height: var(--jkl-line-height-tight);
764
- --jkl-typography-style-heading-1-small-font-weight: 400;
765
- --jkl-typography-style-heading-1-base-font-size: var(--jkl-font-size-8);
766
- --jkl-typography-style-heading-1-base-line-height: var(--jkl-line-height-tight);
767
- --jkl-typography-style-heading-1-base-font-weight: 400;
768
- --jkl-typography-style-heading-2-small-font-size: var(--jkl-font-size-7);
769
- --jkl-typography-style-heading-2-small-line-height: var(--jkl-line-height-tight);
770
- --jkl-typography-style-heading-2-small-font-weight: 400;
771
- --jkl-typography-style-heading-2-base-font-size: var(--jkl-font-size-7);
772
- --jkl-typography-style-heading-2-base-line-height: var(--jkl-line-height-tight);
773
- --jkl-typography-style-heading-2-base-font-weight: 400;
774
- --jkl-typography-style-heading-3-small-font-size: var(--jkl-font-size-6);
775
- --jkl-typography-style-heading-3-small-line-height: var(--jkl-line-height-tight);
776
- --jkl-typography-style-heading-3-small-font-weight: 700;
777
- --jkl-typography-style-heading-3-base-font-size: var(--jkl-font-size-6);
778
- --jkl-typography-style-heading-3-base-line-height: var(--jkl-line-height-tight);
779
- --jkl-typography-style-heading-3-base-font-weight: 700;
780
- --jkl-typography-style-heading-4-small-font-size: var(--jkl-font-size-5);
781
- --jkl-typography-style-heading-4-small-line-height: var(--jkl-line-height-tight);
782
- --jkl-typography-style-heading-4-small-font-weight: 700;
783
- --jkl-typography-style-heading-4-base-font-size: var(--jkl-font-size-5);
784
- --jkl-typography-style-heading-4-base-line-height: var(--jkl-line-height-tight);
785
- --jkl-typography-style-heading-4-base-font-weight: 700;
786
- --jkl-typography-style-heading-5-small-font-size: var(--jkl-font-size-4);
787
- --jkl-typography-style-heading-5-small-line-height: var(--jkl-line-height-tight);
788
- --jkl-typography-style-heading-5-small-font-weight: 700;
789
- --jkl-typography-style-heading-5-base-font-size: var(--jkl-font-size-4);
790
- --jkl-typography-style-heading-5-base-line-height: var(--jkl-line-height-tight);
791
- --jkl-typography-style-heading-5-base-font-weight: 700;
792
- --jkl-typography-style-paragraph-large-small-font-size: var(--jkl-font-size-5);
793
- --jkl-typography-style-paragraph-large-small-line-height: var(--jkl-line-height-relaxed);
794
- --jkl-typography-style-paragraph-large-small-font-weight: 400;
795
- --jkl-typography-style-paragraph-large-base-font-size: var(--jkl-font-size-5);
796
- --jkl-typography-style-paragraph-large-base-line-height: var(--jkl-line-height-relaxed);
797
- --jkl-typography-style-paragraph-large-base-font-weight: 400;
798
- --jkl-typography-style-paragraph-medium-small-font-size: var(--jkl-font-size-3);
799
- --jkl-typography-style-paragraph-medium-small-line-height: var(--jkl-line-height-relaxed);
800
- --jkl-typography-style-paragraph-medium-small-font-weight: 400;
801
- --jkl-typography-style-paragraph-medium-base-font-size: var(--jkl-font-size-3);
802
- --jkl-typography-style-paragraph-medium-base-line-height: var(--jkl-line-height-relaxed);
803
- --jkl-typography-style-paragraph-medium-base-font-weight: 400;
804
- --jkl-typography-style-paragraph-small-small-font-size: var(--jkl-font-size-2);
805
- --jkl-typography-style-paragraph-small-small-line-height: var(--jkl-line-height-relaxed);
806
- --jkl-typography-style-paragraph-small-small-font-weight: 400;
807
- --jkl-typography-style-paragraph-small-base-font-size: var(--jkl-font-size-2);
808
- --jkl-typography-style-paragraph-small-base-line-height: var(--jkl-line-height-relaxed);
809
- --jkl-typography-style-paragraph-small-base-font-weight: 400;
810
- --jkl-typography-style-text-large-small-font-size: var(--jkl-font-size-5);
811
- --jkl-typography-style-text-large-small-line-height: var(--jkl-line-height-tight);
812
- --jkl-typography-style-text-large-small-font-weight: 400;
813
- --jkl-typography-style-text-large-base-font-size: var(--jkl-font-size-5);
814
- --jkl-typography-style-text-large-base-line-height: var(--jkl-line-height-tight);
815
- --jkl-typography-style-text-large-base-font-weight: 400;
816
- --jkl-typography-style-text-medium-small-font-size: var(--jkl-font-size-3);
817
- --jkl-typography-style-text-medium-small-line-height: var(--jkl-line-height-tight);
818
- --jkl-typography-style-text-medium-small-font-weight: 400;
819
- --jkl-typography-style-text-medium-base-font-size: var(--jkl-font-size-3);
820
- --jkl-typography-style-text-medium-base-line-height: var(--jkl-line-height-tight);
821
- --jkl-typography-style-text-medium-base-font-weight: 400;
822
- --jkl-typography-style-text-small-small-font-size: var(--jkl-font-size-2);
823
- --jkl-typography-style-text-small-small-line-height: var(--jkl-line-height-tight);
824
- --jkl-typography-style-text-small-small-font-weight: 400;
825
- --jkl-typography-style-text-small-base-font-size: var(--jkl-font-size-2);
826
- --jkl-typography-style-text-small-base-line-height: var(--jkl-line-height-tight);
827
- --jkl-typography-style-text-small-base-font-weight: 400;
828
- --jkl-typography-style-text-micro-small-font-size: var(--jkl-font-size-1);
829
- --jkl-typography-style-text-micro-small-line-height: var(--jkl-line-height-tight);
830
- --jkl-typography-style-text-micro-small-font-weight: 400;
831
- --jkl-typography-style-text-micro-base-font-size: var(--jkl-font-size-1);
832
- --jkl-typography-style-text-micro-base-line-height: var(--jkl-line-height-tight);
833
- --jkl-typography-style-text-micro-base-font-weight: 400;
834
- --jkl-typography-style-body-small-font-size: 1.125rem;
835
- --jkl-typography-style-body-small-line-height: 1.75rem;
836
- --jkl-typography-style-body-small-font-weight: 400;
837
- --jkl-typography-style-body-base-font-size: 1.25rem;
838
- --jkl-typography-style-body-base-line-height: 2rem;
839
- --jkl-typography-style-body-base-font-weight: 400;
840
- --jkl-typography-style-small-small-font-size: 1rem;
841
- --jkl-typography-style-small-small-line-height: 1.5rem;
842
- --jkl-typography-style-small-small-font-weight: 400;
843
- --jkl-typography-style-small-base-font-size: 1rem;
844
- --jkl-typography-style-small-base-line-height: 1.5rem;
845
- --jkl-typography-style-small-base-font-weight: 400;
846
- --jkl-typography-title-small-font-size: 2.25rem;
847
- --jkl-typography-title-small-line-height: 2.75rem;
848
- --jkl-typography-title-small-font-weight: 400;
849
- --jkl-typography-title-base-font-size: 3.5rem;
850
- --jkl-typography-title-base-line-height: 4rem;
851
- --jkl-typography-title-base-font-weight: 400;
852
- --jkl-typography-title-small-small-font-size: 1.875rem;
853
- --jkl-typography-title-small-small-line-height: 2.25rem;
854
- --jkl-typography-title-small-small-font-weight: 400;
855
- --jkl-typography-title-small-base-font-size: 2.75rem;
856
- --jkl-typography-title-small-base-line-height: 3.25rem;
857
- --jkl-typography-title-small-base-font-weight: 400;
858
- --jkl-typography-heading-1-small-font-size: 1.625rem;
859
- --jkl-typography-heading-1-small-line-height: 2rem;
860
- --jkl-typography-heading-1-small-font-weight: 400;
861
- --jkl-typography-heading-1-base-font-size: 2.25rem;
862
- --jkl-typography-heading-1-base-line-height: 2.75rem;
863
- --jkl-typography-heading-1-base-font-weight: 400;
864
- --jkl-typography-heading-2-small-font-size: 1.4375rem;
865
- --jkl-typography-heading-2-small-line-height: 2rem;
866
- --jkl-typography-heading-2-small-font-weight: 400;
867
- --jkl-typography-heading-2-base-font-size: 1.75rem;
868
- --jkl-typography-heading-2-base-line-height: 2.5rem;
869
- --jkl-typography-heading-2-base-font-weight: 400;
870
- --jkl-typography-heading-3-small-font-size: 1.3125rem;
871
- --jkl-typography-heading-3-small-line-height: 1.75rem;
872
- --jkl-typography-heading-3-small-font-weight: 700;
873
- --jkl-typography-heading-3-base-font-size: 1.5625rem;
874
- --jkl-typography-heading-3-base-line-height: 2rem;
875
- --jkl-typography-heading-3-base-font-weight: 700;
876
- --jkl-typography-heading-4-small-font-size: 1.125rem;
877
- --jkl-typography-heading-4-small-line-height: 1.5rem;
878
- --jkl-typography-heading-4-small-font-weight: 700;
879
- --jkl-typography-heading-4-base-font-size: 1.3125rem;
880
- --jkl-typography-heading-4-base-line-height: 1.75rem;
881
- --jkl-typography-heading-4-base-font-weight: 700;
882
- --jkl-typography-heading-5-small-font-size: 1rem;
883
- --jkl-typography-heading-5-small-line-height: 1.5rem;
884
- --jkl-typography-heading-5-small-font-weight: 700;
885
- --jkl-typography-heading-5-base-font-size: 1rem;
886
- --jkl-typography-heading-5-base-line-height: 1.5rem;
887
- --jkl-typography-heading-5-base-font-weight: 700;
888
- --jkl-typography-body-small-font-size: 1.125rem;
889
- --jkl-typography-body-small-line-height: 1.75rem;
890
- --jkl-typography-body-small-font-weight: 400;
891
- --jkl-typography-body-base-font-size: 1.25rem;
892
- --jkl-typography-body-base-line-height: 2rem;
893
- --jkl-typography-body-base-font-weight: 400;
894
- --jkl-typography-small-small-font-size: 1rem;
895
- --jkl-typography-small-small-line-height: 1.5rem;
896
- --jkl-typography-small-small-font-weight: 400;
897
- --jkl-typography-small-base-font-size: 1rem;
898
- --jkl-typography-small-base-line-height: 1.5rem;
899
- --jkl-typography-small-base-font-weight: 400;
900
- }
901
- }
902
- @layer jokul.theme {
903
- @media screen and (prefers-color-scheme: light) {
904
- :root {
905
- --jkl-background-color: #f9f9f9;
906
- --jkl-color: #1b1917;
907
- --jkl-error: #f6b3b3;
908
- --jkl-info: #d3d3f6;
909
- --jkl-warning: #efdd9e;
910
- --jkl-success: #acd3b5;
911
- }
912
- }
913
- [data-theme=light] {
914
- --jkl-background-color: #f9f9f9;
915
- --jkl-color: #1b1917;
916
- --jkl-error: #f6b3b3;
917
- --jkl-info: #d3d3f6;
918
- --jkl-warning: #efdd9e;
919
- --jkl-success: #acd3b5;
920
- }
921
- @media screen and (prefers-color-scheme: dark) {
922
- :root {
923
- --jkl-background-color: #1b1917;
924
- --jkl-color: #f9f9f9;
925
- --jkl-error: #de9e9e;
926
- --jkl-info: #a9a9ca;
927
- --jkl-warning: #decc8d;
928
- --jkl-success: #94b79b;
929
- }
930
- }
931
- [data-theme=dark] {
932
- --jkl-background-color: #1b1917;
933
- --jkl-color: #f9f9f9;
934
- --jkl-error: #de9e9e;
935
- --jkl-info: #a9a9ca;
936
- --jkl-warning: #decc8d;
937
- --jkl-success: #94b79b;
938
- }
939
- }
940
- /**
941
- * Do not edit directly, this file was auto-generated.
942
- */
943
- @layer jokul.theme {
944
- :root {
945
- --jkl-unit-10: var(--jkl-unit-base);
946
- --jkl-unit-15: calc(var(--jkl-unit-base) * 1.5);
947
- --jkl-unit-20: calc(var(--jkl-unit-base) * 2);
948
- --jkl-unit-25: calc(var(--jkl-unit-base) * 2.5);
949
- --jkl-unit-30: calc(var(--jkl-unit-base) * 3);
950
- --jkl-unit-40: calc(var(--jkl-unit-base) * 4);
951
- --jkl-unit-50: calc(var(--jkl-unit-base) * 5);
952
- --jkl-unit-60: calc(var(--jkl-unit-base) * 6);
953
- --jkl-unit-70: calc(var(--jkl-unit-base) * 7);
954
- --jkl-unit-80: calc(var(--jkl-unit-base) * 8);
955
- --jkl-unit-90: calc(var(--jkl-unit-base) * 9);
956
- --jkl-unit-130: calc(var(--jkl-unit-base) * 13);
957
- --jkl-unit-210: calc(var(--jkl-unit-base) * 21);
958
- --jkl-unit-base: 0.5rem;
959
- --jkl-unit-02: calc(var(--jkl-unit-base) * .25);
960
- --jkl-unit-05: calc(var(--jkl-unit-base) * .5);
961
- --jkl-spacing-none: 0;
962
- --jkl-spacing-xxs: calc(var(--jkl-unit-base) * .5);
963
- --jkl-spacing-xs: var(--jkl-unit-base);
964
- --jkl-spacing-s: calc(var(--jkl-unit-base) * 2);
965
- --jkl-spacing-m: calc(var(--jkl-unit-base) * 3);
966
- --jkl-spacing-l: calc(var(--jkl-unit-base) * 5);
967
- --jkl-spacing-xl: calc(var(--jkl-unit-base) * 8);
968
- --jkl-spacing-2xl: calc(var(--jkl-unit-base) * 13);
969
- }
970
- }
971
- @layer jokul.theme {
972
- :root {
973
- --jkl-line-height-flush: 1;
974
- --jkl-line-height-tight: 1.3;
975
- --jkl-line-height-relaxed: 1.6;
976
- }
977
- :root,
978
- [data-size] {
979
- --jkl-font-size-1: 0.875rem;
980
- --jkl-font-size-2: 1rem;
981
- --jkl-font-size-3: 1.125rem;
982
- --jkl-font-size-4: 1.25rem;
983
- --jkl-font-size-5: 1.5rem;
984
- --jkl-font-size-6: 1.75rem;
985
- --jkl-font-size-7: 2rem;
986
- --jkl-font-size-8: 2.5rem;
987
- --jkl-font-size-9: 3rem;
988
- --jkl-font-size-10: 3.5rem;
989
- }
990
- [data-size=small] {
991
- --jkl-font-size-1: 0.75rem;
992
- --jkl-font-size-2: 0.875rem;
993
- --jkl-font-size-3: 1rem;
994
- --jkl-font-size-4: 1.125rem;
995
- --jkl-font-size-5: 1.25rem;
996
- --jkl-font-size-6: 1.5rem;
997
- --jkl-font-size-7: 1.75rem;
998
- --jkl-font-size-8: 2rem;
999
- --jkl-font-size-9: 2.5rem;
1000
- --jkl-font-size-10: 3rem;
1001
- }
1002
- }
1003
- @layer jokul.theme {
1004
- :root,
1005
- [data-size] {
1006
- --jkl-unit-0: 0;
1007
- --jkl-unit-10: var(--jkl-unit-base);
1008
- --jkl-unit-15: calc(var(--jkl-unit-base) * 1.5);
1009
- --jkl-unit-20: calc(var(--jkl-unit-base) * 2);
1010
- --jkl-unit-25: calc(var(--jkl-unit-base) * 2.5);
1011
- --jkl-unit-30: calc(var(--jkl-unit-base) * 3);
1012
- --jkl-unit-35: calc(var(--jkl-unit-base) * 3.5);
1013
- --jkl-unit-40: calc(var(--jkl-unit-base) * 4);
1014
- --jkl-unit-50: calc(var(--jkl-unit-base) * 5);
1015
- --jkl-unit-60: calc(var(--jkl-unit-base) * 6);
1016
- --jkl-unit-70: calc(var(--jkl-unit-base) * 7);
1017
- --jkl-unit-80: calc(var(--jkl-unit-base) * 8);
1018
- --jkl-unit-90: calc(var(--jkl-unit-base) * 9);
1019
- --jkl-unit-100: calc(var(--jkl-unit-base) * 10);
1020
- --jkl-unit-130: calc(var(--jkl-unit-base) * 13);
1021
- --jkl-unit-210: calc(var(--jkl-unit-base) * 21);
1022
- --jkl-unit-02: calc(var(--jkl-unit-base) * .25);
1023
- --jkl-unit-05: calc(var(--jkl-unit-base) * .5);
1024
- --jkl-spacing-0: 0;
1025
- --jkl-spacing-2: 0.125rem;
1026
- --jkl-spacing-4: 0.25rem;
1027
- --jkl-spacing-8: 0.5rem;
1028
- --jkl-spacing-12: 0.75rem;
1029
- --jkl-spacing-16: 1rem;
1030
- --jkl-spacing-20: 1.25rem;
1031
- --jkl-spacing-24: 1.5rem;
1032
- --jkl-spacing-28: 1.75rem;
1033
- --jkl-spacing-32: 2rem;
1034
- --jkl-spacing-40: 2.5rem;
1035
- --jkl-spacing-48: 3rem;
1036
- --jkl-spacing-56: 3.5rem;
1037
- --jkl-spacing-64: 4rem;
1038
- --jkl-spacing-72: 4.5rem;
1039
- --jkl-spacing-80: 5rem;
1040
- --jkl-spacing-104: 6.5rem;
1041
- --jkl-spacing-168: 10.5rem;
1042
- --jkl-spacing-none: 0;
1043
- --jkl-spacing-xxs: calc(var(--jkl-unit-base) * .5);
1044
- --jkl-spacing-xs: var(--jkl-unit-base);
1045
- --jkl-spacing-s: calc(var(--jkl-unit-base) * 2);
1046
- --jkl-spacing-m: calc(var(--jkl-unit-base) * 3);
1047
- --jkl-spacing-l: calc(var(--jkl-unit-base) * 5);
1048
- --jkl-spacing-xl: calc(var(--jkl-unit-base) * 8);
1049
- --jkl-spacing-2xl: calc(var(--jkl-unit-base) * 13);
1050
- }
1051
- [data-size=small] {
1052
- --jkl-unit-base: 0.3125rem;
1053
- }
1054
- :root,
1055
- [data-size=medium] {
1056
- --jkl-unit-base: 0.5rem;
1057
- }
1058
- [data-size=large] {
1059
- --jkl-unit-base: 0.6875rem;
1060
- }
1061
- }
1062
- @layer jokul.theme {
1063
- :root {
1064
- --jkl-border-radius-none: 0;
1065
- --jkl-border-radius-xs: 0.25rem;
1066
- --jkl-border-radius-s: 0.5rem;
1067
- --jkl-border-radius-m: 0.75rem;
1068
- --jkl-border-radius-l: 1rem;
1069
- --jkl-border-radius-full: 9999px;
1070
- }
1071
- }
1072
- @layer jokul.global {
1073
- /* Legger til støtte for fontskalering via OS-innstillinger på Apple-enheter */
1074
- @supports (font: -apple-system-body) {
1075
- @media (pointer: coarse) {
1076
- :root {
1077
- /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
1078
- font: -apple-system-body;
1079
- }
1080
- }
1081
- }
1082
- .jkl {
1083
- -webkit-font-smoothing: antialiased;
1084
- -moz-osx-font-smoothing: grayscale;
1085
- background-color: var(--jkl-background-color);
1086
- color: var(--jkl-color);
1087
- font-family: "Fremtind Grotesk", "Adjusted Arial Fallback", Arial, sans-serif;
1088
- }
1089
- .jkl strong {
1090
- --jkl-icon-weight: 400;
1091
- font-weight: 700;
1092
- }
1093
- @media screen and (prefers-reduced-motion: reduce) {
1094
- *,
1095
- *::after,
1096
- *::before {
1097
- animation-duration: 0ms !important;
1098
- animation-delay: 0ms !important;
1099
- transition: none !important;
1100
- }
1101
- }
1102
- }
1103
- @layer jokul.global {
1104
- [popover] {
1105
- opacity: 0;
1106
- transition: opacity, overlay allow-discrete, display allow-discrete;
1107
- transition-timing-function: ease;
1108
- transition-duration: 150ms;
1109
- }
1110
- [popover]:popover-open {
1111
- opacity: 1;
1112
- }
1113
- @starting-style {
1114
- [popover]:popover-open {
1115
- opacity: 0;
1116
- }
1117
- }
1118
- }
1119
- @layer jokul.utility {
1120
- .jkl-body {
1121
- font-size: var(--jkl-font-size-3);
1122
- line-height: var(--jkl-line-height-relaxed);
1123
- font-weight: 400;
1124
- --jkl-icon-weight: 300;
1125
- }
1126
- .jkl-bold {
1127
- font-size: var(--jkl-font-size-3);
1128
- line-height: var(--jkl-line-height-relaxed);
1129
- font-weight: 400;
1130
- --jkl-icon-weight: 300;
1131
- --jkl-icon-weight: 400;
1132
- font-weight: 700;
1133
- }
1134
- .jkl-small {
1135
- font-size: var(--jkl-font-size-2);
1136
- line-height: var(--jkl-line-height-relaxed);
1137
- font-weight: 400;
1138
- --jkl-icon-weight: 300;
1139
- --jkl-icon-size: 1.2em;
1140
- }
1141
- .jkl-title {
1142
- font-size: var(--jkl-font-size-8);
1143
- line-height: var(--jkl-line-height-tight);
1144
- font-weight: 400;
1145
- --jkl-icon-weight: 300;
1146
- }
1147
- .jkl-title-small {
1148
- font-size: var(--jkl-font-size-7);
1149
- line-height: var(--jkl-line-height-tight);
1150
- font-weight: 400;
1151
- --jkl-icon-weight: 300;
1152
- }
1153
- .jkl-heading-1 {
1154
- font-size: var(--jkl-font-size-8);
1155
- line-height: var(--jkl-line-height-tight);
1156
- font-weight: 400;
1157
- --jkl-icon-weight: 300;
1158
- }
1159
- .jkl-heading-2 {
1160
- font-size: var(--jkl-font-size-7);
1161
- line-height: var(--jkl-line-height-tight);
1162
- font-weight: 400;
1163
- --jkl-icon-weight: 300;
1164
- }
1165
- .jkl-heading-3 {
1166
- font-size: var(--jkl-font-size-6);
1167
- line-height: var(--jkl-line-height-tight);
1168
- font-weight: 700;
1169
- --jkl-icon-weight: 400;
1170
- }
1171
- .jkl-heading-4 {
1172
- font-size: var(--jkl-font-size-5);
1173
- line-height: var(--jkl-line-height-tight);
1174
- font-weight: 700;
1175
- --jkl-icon-weight: 400;
1176
- }
1177
- .jkl-heading-5 {
1178
- font-size: var(--jkl-font-size-4);
1179
- line-height: var(--jkl-line-height-tight);
1180
- font-weight: 700;
1181
- --jkl-icon-weight: 400;
1182
- }
1183
- .jkl-paragraph-large {
1184
- font-size: var(--jkl-font-size-5);
1185
- line-height: var(--jkl-line-height-relaxed);
1186
- font-weight: 400;
1187
- --jkl-icon-weight: 300;
1188
- }
1189
- .jkl-paragraph-medium {
1190
- font-size: var(--jkl-font-size-3);
1191
- line-height: var(--jkl-line-height-relaxed);
1192
- font-weight: 400;
1193
- --jkl-icon-weight: 300;
1194
- }
1195
- .jkl-paragraph-small {
1196
- font-size: var(--jkl-font-size-2);
1197
- line-height: var(--jkl-line-height-relaxed);
1198
- font-weight: 400;
1199
- --jkl-icon-weight: 300;
1200
- --jkl-icon-size: 1.2em;
1201
- }
1202
- .jkl-text-large {
1203
- font-size: var(--jkl-font-size-5);
1204
- line-height: var(--jkl-line-height-tight);
1205
- font-weight: 400;
1206
- --jkl-icon-weight: 300;
1207
- }
1208
- .jkl-text-medium {
1209
- font-size: var(--jkl-font-size-3);
1210
- line-height: var(--jkl-line-height-tight);
1211
- font-weight: 400;
1212
- --jkl-icon-weight: 300;
1213
- }
1214
- .jkl-text-small {
1215
- font-size: var(--jkl-font-size-2);
1216
- line-height: var(--jkl-line-height-tight);
1217
- font-weight: 400;
1218
- --jkl-icon-weight: 300;
1219
- }
1220
- .jkl-text-micro {
1221
- font-size: var(--jkl-font-size-1);
1222
- line-height: var(--jkl-line-height-tight);
1223
- font-weight: 400;
1224
- --jkl-icon-weight: 300;
1225
- }
1226
- }
1227
- @layer jokul.utility {
1228
- .jkl-sr-only {
1229
- border: 0 !important;
1230
- clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
1231
- clip-path: inset(50%) !important; /* 2 */
1232
- height: 1px !important;
1233
- margin: -1px !important;
1234
- overflow: hidden !important;
1235
- padding: 0 !important;
1236
- position: absolute !important;
1237
- width: 1px !important;
1238
- white-space: nowrap !important; /* 3 */
1239
- }
1240
- .jkl-sr-only--focusable:focus, .jkl-sr-only--focusable:active {
1241
- clip: auto !important;
1242
- clip-path: none !important;
1243
- height: auto !important;
1244
- margin: auto !important;
1245
- overflow: visible !important;
1246
- width: auto !important;
1247
- white-space: normal !important;
1248
- }
1249
- }
1250
- @layer jokul.utility {
1251
- .jkl-spacing-2--all {
1252
- margin: var(--jkl-spacing-2);
1253
- }
1254
- .jkl-spacing-2--top {
1255
- margin-top: var(--jkl-spacing-2);
1256
- }
1257
- .jkl-spacing-2--bottom {
1258
- margin-bottom: var(--jkl-spacing-2);
1259
- }
1260
- .jkl-spacing-2--left {
1261
- margin-left: var(--jkl-spacing-2);
1262
- }
1263
- .jkl-spacing-2--right {
1264
- margin-right: var(--jkl-spacing-2);
1265
- }
1266
- .jkl-spacing-4--all {
1267
- margin: var(--jkl-spacing-4);
1268
- }
1269
- .jkl-spacing-4--top {
1270
- margin-top: var(--jkl-spacing-4);
1271
- }
1272
- .jkl-spacing-4--bottom {
1273
- margin-bottom: var(--jkl-spacing-4);
1274
- }
1275
- .jkl-spacing-4--left {
1276
- margin-left: var(--jkl-spacing-4);
1277
- }
1278
- .jkl-spacing-4--right {
1279
- margin-right: var(--jkl-spacing-4);
1280
- }
1281
- .jkl-spacing-8--all {
1282
- margin: var(--jkl-spacing-8);
1283
- }
1284
- .jkl-spacing-8--top {
1285
- margin-top: var(--jkl-spacing-8);
1286
- }
1287
- .jkl-spacing-8--bottom {
1288
- margin-bottom: var(--jkl-spacing-8);
1289
- }
1290
- .jkl-spacing-8--left {
1291
- margin-left: var(--jkl-spacing-8);
1292
- }
1293
- .jkl-spacing-8--right {
1294
- margin-right: var(--jkl-spacing-8);
1295
- }
1296
- .jkl-spacing-12--all {
1297
- margin: var(--jkl-spacing-12);
1298
- }
1299
- .jkl-spacing-12--top {
1300
- margin-top: var(--jkl-spacing-12);
1301
- }
1302
- .jkl-spacing-12--bottom {
1303
- margin-bottom: var(--jkl-spacing-12);
1304
- }
1305
- .jkl-spacing-12--left {
1306
- margin-left: var(--jkl-spacing-12);
1307
- }
1308
- .jkl-spacing-12--right {
1309
- margin-right: var(--jkl-spacing-12);
1310
- }
1311
- .jkl-spacing-16--all {
1312
- margin: var(--jkl-spacing-16);
1313
- }
1314
- .jkl-spacing-16--top {
1315
- margin-top: var(--jkl-spacing-16);
1316
- }
1317
- .jkl-spacing-16--bottom {
1318
- margin-bottom: var(--jkl-spacing-16);
1319
- }
1320
- .jkl-spacing-16--left {
1321
- margin-left: var(--jkl-spacing-16);
1322
- }
1323
- .jkl-spacing-16--right {
1324
- margin-right: var(--jkl-spacing-16);
1325
- }
1326
- .jkl-spacing-24--all {
1327
- margin: var(--jkl-spacing-24);
1328
- }
1329
- .jkl-spacing-24--top {
1330
- margin-top: var(--jkl-spacing-24);
1331
- }
1332
- .jkl-spacing-24--bottom {
1333
- margin-bottom: var(--jkl-spacing-24);
1334
- }
1335
- .jkl-spacing-24--left {
1336
- margin-left: var(--jkl-spacing-24);
1337
- }
1338
- .jkl-spacing-24--right {
1339
- margin-right: var(--jkl-spacing-24);
1340
- }
1341
- .jkl-spacing-32--all {
1342
- margin: var(--jkl-spacing-32);
1343
- }
1344
- .jkl-spacing-32--top {
1345
- margin-top: var(--jkl-spacing-32);
1346
- }
1347
- .jkl-spacing-32--bottom {
1348
- margin-bottom: var(--jkl-spacing-32);
1349
- }
1350
- .jkl-spacing-32--left {
1351
- margin-left: var(--jkl-spacing-32);
1352
- }
1353
- .jkl-spacing-32--right {
1354
- margin-right: var(--jkl-spacing-32);
1355
- }
1356
- .jkl-spacing-40--all {
1357
- margin: var(--jkl-spacing-40);
1358
- }
1359
- .jkl-spacing-40--top {
1360
- margin-top: var(--jkl-spacing-40);
1361
- }
1362
- .jkl-spacing-40--bottom {
1363
- margin-bottom: var(--jkl-spacing-40);
1364
- }
1365
- .jkl-spacing-40--left {
1366
- margin-left: var(--jkl-spacing-40);
1367
- }
1368
- .jkl-spacing-40--right {
1369
- margin-right: var(--jkl-spacing-40);
1370
- }
1371
- .jkl-spacing-64--all {
1372
- margin: var(--jkl-spacing-64);
1373
- }
1374
- .jkl-spacing-64--top {
1375
- margin-top: var(--jkl-spacing-64);
1376
- }
1377
- .jkl-spacing-64--bottom {
1378
- margin-bottom: var(--jkl-spacing-64);
1379
- }
1380
- .jkl-spacing-64--left {
1381
- margin-left: var(--jkl-spacing-64);
1382
- }
1383
- .jkl-spacing-64--right {
1384
- margin-right: var(--jkl-spacing-64);
1385
- }
1386
- .jkl-spacing-104--all {
1387
- margin: var(--jkl-spacing-104);
1388
- }
1389
- .jkl-spacing-104--top {
1390
- margin-top: var(--jkl-spacing-104);
1391
- }
1392
- .jkl-spacing-104--bottom {
1393
- margin-bottom: var(--jkl-spacing-104);
1394
- }
1395
- .jkl-spacing-104--left {
1396
- margin-left: var(--jkl-spacing-104);
1397
- }
1398
- .jkl-spacing-104--right {
1399
- margin-right: var(--jkl-spacing-104);
1400
- }
1401
- .jkl-spacing-168--all {
1402
- margin: var(--jkl-spacing-168);
1403
- }
1404
- .jkl-spacing-168--top {
1405
- margin-top: var(--jkl-spacing-168);
1406
- }
1407
- .jkl-spacing-168--bottom {
1408
- margin-bottom: var(--jkl-spacing-168);
1409
- }
1410
- .jkl-spacing-168--left {
1411
- margin-left: var(--jkl-spacing-168);
1412
- }
1413
- .jkl-spacing-168--right {
1414
- margin-right: var(--jkl-spacing-168);
1415
- }
1416
- .jkl-spacing-16-24--all {
1417
- margin: var(--jkl-spacing-16-24);
1418
- }
1419
- .jkl-spacing-16-24--top {
1420
- margin-top: var(--jkl-spacing-16-24);
1421
- }
1422
- .jkl-spacing-16-24--bottom {
1423
- margin-bottom: var(--jkl-spacing-16-24);
1424
- }
1425
- .jkl-spacing-16-24--left {
1426
- margin-left: var(--jkl-spacing-16-24);
1427
- }
1428
- .jkl-spacing-16-24--right {
1429
- margin-right: var(--jkl-spacing-16-24);
1430
- }
1431
- .jkl-spacing-24-40--all {
1432
- margin: var(--jkl-spacing-24-40);
1433
- }
1434
- .jkl-spacing-24-40--top {
1435
- margin-top: var(--jkl-spacing-24-40);
1436
- }
1437
- .jkl-spacing-24-40--bottom {
1438
- margin-bottom: var(--jkl-spacing-24-40);
1439
- }
1440
- .jkl-spacing-24-40--left {
1441
- margin-left: var(--jkl-spacing-24-40);
1442
- }
1443
- .jkl-spacing-24-40--right {
1444
- margin-right: var(--jkl-spacing-24-40);
1445
- }
1446
- .jkl-spacing-24-32--all {
1447
- margin: var(--jkl-spacing-24-32);
1448
- }
1449
- .jkl-spacing-24-32--top {
1450
- margin-top: var(--jkl-spacing-24-32);
1451
- }
1452
- .jkl-spacing-24-32--bottom {
1453
- margin-bottom: var(--jkl-spacing-24-32);
1454
- }
1455
- .jkl-spacing-24-32--left {
1456
- margin-left: var(--jkl-spacing-24-32);
1457
- }
1458
- .jkl-spacing-24-32--right {
1459
- margin-right: var(--jkl-spacing-24-32);
1460
- }
1461
- .jkl-spacing-32-40--all {
1462
- margin: var(--jkl-spacing-32-40);
1463
- }
1464
- .jkl-spacing-32-40--top {
1465
- margin-top: var(--jkl-spacing-32-40);
1466
- }
1467
- .jkl-spacing-32-40--bottom {
1468
- margin-bottom: var(--jkl-spacing-32-40);
1469
- }
1470
- .jkl-spacing-32-40--left {
1471
- margin-left: var(--jkl-spacing-32-40);
1472
- }
1473
- .jkl-spacing-32-40--right {
1474
- margin-right: var(--jkl-spacing-32-40);
1475
- }
1476
- .jkl-spacing-40-64--all {
1477
- margin: var(--jkl-spacing-40-64);
1478
- }
1479
- .jkl-spacing-40-64--top {
1480
- margin-top: var(--jkl-spacing-40-64);
1481
- }
1482
- .jkl-spacing-40-64--bottom {
1483
- margin-bottom: var(--jkl-spacing-40-64);
1484
- }
1485
- .jkl-spacing-40-64--left {
1486
- margin-left: var(--jkl-spacing-40-64);
1487
- }
1488
- .jkl-spacing-40-64--right {
1489
- margin-right: var(--jkl-spacing-40-64);
1490
- }
1491
- .jkl-spacing-64-104--all {
1492
- margin: var(--jkl-spacing-64-104);
1493
- }
1494
- .jkl-spacing-64-104--top {
1495
- margin-top: var(--jkl-spacing-64-104);
1496
- }
1497
- .jkl-spacing-64-104--bottom {
1498
- margin-bottom: var(--jkl-spacing-64-104);
1499
- }
1500
- .jkl-spacing-64-104--left {
1501
- margin-left: var(--jkl-spacing-64-104);
1502
- }
1503
- .jkl-spacing-64-104--right {
1504
- margin-right: var(--jkl-spacing-64-104);
1505
- }
1506
- .jkl-spacing-104-168--all {
1507
- margin: var(--jkl-spacing-104-168);
1508
- }
1509
- .jkl-spacing-104-168--top {
1510
- margin-top: var(--jkl-spacing-104-168);
1511
- }
1512
- .jkl-spacing-104-168--bottom {
1513
- margin-bottom: var(--jkl-spacing-104-168);
1514
- }
1515
- .jkl-spacing-104-168--left {
1516
- margin-left: var(--jkl-spacing-104-168);
1517
- }
1518
- .jkl-spacing-104-168--right {
1519
- margin-right: var(--jkl-spacing-104-168);
1520
- }
1521
- .jkl-spacing-16-16-24--all {
1522
- margin: var(--jkl-spacing-16-16-24);
1523
- }
1524
- .jkl-spacing-16-16-24--top {
1525
- margin-top: var(--jkl-spacing-16-16-24);
1526
- }
1527
- .jkl-spacing-16-16-24--bottom {
1528
- margin-bottom: var(--jkl-spacing-16-16-24);
1529
- }
1530
- .jkl-spacing-16-16-24--left {
1531
- margin-left: var(--jkl-spacing-16-16-24);
1532
- }
1533
- .jkl-spacing-16-16-24--right {
1534
- margin-right: var(--jkl-spacing-16-16-24);
1535
- }
1536
- .jkl-spacing-16-24-32--all {
1537
- margin: var(--jkl-spacing-16-24-32);
1538
- }
1539
- .jkl-spacing-16-24-32--top {
1540
- margin-top: var(--jkl-spacing-16-24-32);
1541
- }
1542
- .jkl-spacing-16-24-32--bottom {
1543
- margin-bottom: var(--jkl-spacing-16-24-32);
1544
- }
1545
- .jkl-spacing-16-24-32--left {
1546
- margin-left: var(--jkl-spacing-16-24-32);
1547
- }
1548
- .jkl-spacing-16-24-32--right {
1549
- margin-right: var(--jkl-spacing-16-24-32);
1550
- }
1551
- .jkl-spacing-16-24-40--all {
1552
- margin: var(--jkl-spacing-16-24-40);
1553
- }
1554
- .jkl-spacing-16-24-40--top {
1555
- margin-top: var(--jkl-spacing-16-24-40);
1556
- }
1557
- .jkl-spacing-16-24-40--bottom {
1558
- margin-bottom: var(--jkl-spacing-16-24-40);
1559
- }
1560
- .jkl-spacing-16-24-40--left {
1561
- margin-left: var(--jkl-spacing-16-24-40);
1562
- }
1563
- .jkl-spacing-16-24-40--right {
1564
- margin-right: var(--jkl-spacing-16-24-40);
1565
- }
1566
- .jkl-spacing-24-24-32--all {
1567
- margin: var(--jkl-spacing-24-24-32);
1568
- }
1569
- .jkl-spacing-24-24-32--top {
1570
- margin-top: var(--jkl-spacing-24-24-32);
1571
- }
1572
- .jkl-spacing-24-24-32--bottom {
1573
- margin-bottom: var(--jkl-spacing-24-24-32);
1574
- }
1575
- .jkl-spacing-24-24-32--left {
1576
- margin-left: var(--jkl-spacing-24-24-32);
1577
- }
1578
- .jkl-spacing-24-24-32--right {
1579
- margin-right: var(--jkl-spacing-24-24-32);
1580
- }
1581
- .jkl-spacing-24-24-40--all {
1582
- margin: var(--jkl-spacing-24-24-40);
1583
- }
1584
- .jkl-spacing-24-24-40--top {
1585
- margin-top: var(--jkl-spacing-24-24-40);
1586
- }
1587
- .jkl-spacing-24-24-40--bottom {
1588
- margin-bottom: var(--jkl-spacing-24-24-40);
1589
- }
1590
- .jkl-spacing-24-24-40--left {
1591
- margin-left: var(--jkl-spacing-24-24-40);
1592
- }
1593
- .jkl-spacing-24-24-40--right {
1594
- margin-right: var(--jkl-spacing-24-24-40);
1595
- }
1596
- .jkl-spacing-24-32-40--all {
1597
- margin: var(--jkl-spacing-24-32-40);
1598
- }
1599
- .jkl-spacing-24-32-40--top {
1600
- margin-top: var(--jkl-spacing-24-32-40);
1601
- }
1602
- .jkl-spacing-24-32-40--bottom {
1603
- margin-bottom: var(--jkl-spacing-24-32-40);
1604
- }
1605
- .jkl-spacing-24-32-40--left {
1606
- margin-left: var(--jkl-spacing-24-32-40);
1607
- }
1608
- .jkl-spacing-24-32-40--right {
1609
- margin-right: var(--jkl-spacing-24-32-40);
1610
- }
1611
- .jkl-spacing-32-32-40--all {
1612
- margin: var(--jkl-spacing-32-32-40);
1613
- }
1614
- .jkl-spacing-32-32-40--top {
1615
- margin-top: var(--jkl-spacing-32-32-40);
1616
- }
1617
- .jkl-spacing-32-32-40--bottom {
1618
- margin-bottom: var(--jkl-spacing-32-32-40);
1619
- }
1620
- .jkl-spacing-32-32-40--left {
1621
- margin-left: var(--jkl-spacing-32-32-40);
1622
- }
1623
- .jkl-spacing-32-32-40--right {
1624
- margin-right: var(--jkl-spacing-32-32-40);
1625
- }
1626
- .jkl-spacing-32-40-64--all {
1627
- margin: var(--jkl-spacing-32-40-64);
1628
- }
1629
- .jkl-spacing-32-40-64--top {
1630
- margin-top: var(--jkl-spacing-32-40-64);
1631
- }
1632
- .jkl-spacing-32-40-64--bottom {
1633
- margin-bottom: var(--jkl-spacing-32-40-64);
1634
- }
1635
- .jkl-spacing-32-40-64--left {
1636
- margin-left: var(--jkl-spacing-32-40-64);
1637
- }
1638
- .jkl-spacing-32-40-64--right {
1639
- margin-right: var(--jkl-spacing-32-40-64);
1640
- }
1641
- .jkl-spacing-40-40-64--all {
1642
- margin: var(--jkl-spacing-40-40-64);
1643
- }
1644
- .jkl-spacing-40-40-64--top {
1645
- margin-top: var(--jkl-spacing-40-40-64);
1646
- }
1647
- .jkl-spacing-40-40-64--bottom {
1648
- margin-bottom: var(--jkl-spacing-40-40-64);
1649
- }
1650
- .jkl-spacing-40-40-64--left {
1651
- margin-left: var(--jkl-spacing-40-40-64);
1652
- }
1653
- .jkl-spacing-40-40-64--right {
1654
- margin-right: var(--jkl-spacing-40-40-64);
1655
- }
1656
- .jkl-spacing-40-64-104--all {
1657
- margin: var(--jkl-spacing-40-64-104);
1658
- }
1659
- .jkl-spacing-40-64-104--top {
1660
- margin-top: var(--jkl-spacing-40-64-104);
1661
- }
1662
- .jkl-spacing-40-64-104--bottom {
1663
- margin-bottom: var(--jkl-spacing-40-64-104);
1664
- }
1665
- .jkl-spacing-40-64-104--left {
1666
- margin-left: var(--jkl-spacing-40-64-104);
1667
- }
1668
- .jkl-spacing-40-64-104--right {
1669
- margin-right: var(--jkl-spacing-40-64-104);
1670
- }
1671
- .jkl-spacing-64-64-104--all {
1672
- margin: var(--jkl-spacing-64-64-104);
1673
- }
1674
- .jkl-spacing-64-64-104--top {
1675
- margin-top: var(--jkl-spacing-64-64-104);
1676
- }
1677
- .jkl-spacing-64-64-104--bottom {
1678
- margin-bottom: var(--jkl-spacing-64-64-104);
1679
- }
1680
- .jkl-spacing-64-64-104--left {
1681
- margin-left: var(--jkl-spacing-64-64-104);
1682
- }
1683
- .jkl-spacing-64-64-104--right {
1684
- margin-right: var(--jkl-spacing-64-64-104);
1685
- }
1686
- .jkl-spacing-64-104-168--all {
1687
- margin: var(--jkl-spacing-64-104-168);
1688
- }
1689
- .jkl-spacing-64-104-168--top {
1690
- margin-top: var(--jkl-spacing-64-104-168);
1691
- }
1692
- .jkl-spacing-64-104-168--bottom {
1693
- margin-bottom: var(--jkl-spacing-64-104-168);
1694
- }
1695
- .jkl-spacing-64-104-168--left {
1696
- margin-left: var(--jkl-spacing-64-104-168);
1697
- }
1698
- .jkl-spacing-64-104-168--right {
1699
- margin-right: var(--jkl-spacing-64-104-168);
1700
- }
1701
- .jkl-spacing-104-104-168--all {
1702
- margin: var(--jkl-spacing-104-104-168);
1703
- }
1704
- .jkl-spacing-104-104-168--top {
1705
- margin-top: var(--jkl-spacing-104-104-168);
1706
- }
1707
- .jkl-spacing-104-104-168--bottom {
1708
- margin-bottom: var(--jkl-spacing-104-104-168);
1709
- }
1710
- .jkl-spacing-104-104-168--left {
1711
- margin-left: var(--jkl-spacing-104-104-168);
1712
- }
1713
- .jkl-spacing-104-104-168--right {
1714
- margin-right: var(--jkl-spacing-104-104-168);
1715
- }
1716
- .jkl-spacing-0--all {
1717
- margin: 0rem;
1718
- }
1719
- .jkl-spacing-0--top {
1720
- margin-top: 0rem;
1721
- }
1722
- .jkl-spacing-0--bottom {
1723
- margin-bottom: 0rem;
1724
- }
1725
- .jkl-spacing-0--left {
1726
- margin-left: 0rem;
1727
- }
1728
- .jkl-spacing-0--right {
1729
- margin-right: 0rem;
1730
- }
1731
- }