@helsenorge/designsystem-react 15.7.2 → 16.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (326) hide show
  1. package/lib/Button.js +2 -2
  2. package/lib/Button.js.map +1 -1
  3. package/lib/CHANGELOG.md +2664 -997
  4. package/lib/Close.js +1 -1
  5. package/lib/Close.js.map +1 -1
  6. package/lib/Drawer.js +3 -4
  7. package/lib/Drawer.js.map +1 -1
  8. package/lib/DrawerNavigation.js +1 -0
  9. package/lib/DrawerNavigation.js.map +1 -1
  10. package/lib/Duolist.js +5 -1
  11. package/lib/Duolist.js.map +1 -1
  12. package/lib/ElementHeader.js.map +1 -1
  13. package/lib/Expander.js +1 -0
  14. package/lib/Expander.js.map +1 -1
  15. package/lib/FilterLinkList.js +1 -1
  16. package/lib/FilterLinkList.js.map +1 -1
  17. package/lib/FormGroup.js +3 -3
  18. package/lib/FormGroup.js.map +1 -1
  19. package/lib/HelpDetails.js +1 -1
  20. package/lib/HelpTriggerIcon.js +2 -2
  21. package/lib/HelpTriggerIcon.js.map +1 -1
  22. package/lib/HelpTriggerStandalone.js +1 -1
  23. package/lib/HelpTriggerStandalone.js.map +1 -1
  24. package/lib/HorizontalScroll.js +6 -10
  25. package/lib/HorizontalScroll.js.map +1 -1
  26. package/lib/LazyIcon.js +1 -0
  27. package/lib/LazyIcon.js.map +1 -1
  28. package/lib/LazyIllustration.js +2 -0
  29. package/lib/LazyIllustration.js.map +1 -1
  30. package/lib/LinkList.js +10 -10
  31. package/lib/LinkList.js.map +1 -1
  32. package/lib/ListEditMode.js +1 -1
  33. package/lib/ListEditMode.js.map +1 -1
  34. package/lib/PopOver.js +2 -2
  35. package/lib/PopOver.js.map +1 -1
  36. package/lib/Radio.js +65 -55
  37. package/lib/Radio.js.map +1 -1
  38. package/lib/Radio2.js +74 -0
  39. package/lib/Radio2.js.map +1 -0
  40. package/lib/RadioMarker.js +2 -2
  41. package/lib/RadioMarker.js.map +1 -1
  42. package/lib/StackedCellContent.js +15 -0
  43. package/lib/StackedCellContent.js.map +1 -0
  44. package/lib/TabList.js +5 -5
  45. package/lib/TabList.js.map +1 -1
  46. package/lib/TabPanel.js +1 -0
  47. package/lib/TabPanel.js.map +1 -1
  48. package/lib/TableContext.js +26 -0
  49. package/lib/TableContext.js.map +1 -0
  50. package/lib/Toggle.js +2 -2
  51. package/lib/Toggle.js.map +1 -1
  52. package/lib/UNSAFE_TableBody.js +22 -0
  53. package/lib/UNSAFE_TableBody.js.map +1 -0
  54. package/lib/UNSAFE_TableCell.js +26 -0
  55. package/lib/UNSAFE_TableCell.js.map +1 -0
  56. package/lib/UNSAFE_TableDetail.js +17 -0
  57. package/lib/UNSAFE_TableDetail.js.map +1 -0
  58. package/lib/UNSAFE_TableExpandedRow.js +46 -0
  59. package/lib/UNSAFE_TableExpandedRow.js.map +1 -0
  60. package/lib/UNSAFE_TableHead.js +25 -0
  61. package/lib/UNSAFE_TableHead.js.map +1 -0
  62. package/lib/UNSAFE_TableHeadCell.js +182 -0
  63. package/lib/UNSAFE_TableHeadCell.js.map +1 -0
  64. package/lib/UNSAFE_TableRow.js +130 -0
  65. package/lib/UNSAFE_TableRow.js.map +1 -0
  66. package/lib/VisualRadio.js +1 -1
  67. package/lib/VisualRadio.js.map +1 -1
  68. package/lib/__mocks__/ResizeObserver.js +4 -1
  69. package/lib/__mocks__/ResizeObserver.js.map +1 -1
  70. package/lib/components/AnchorLink/styles.module.scss +3 -4
  71. package/lib/components/ArticleTeaser/styles.module.scss +12 -12
  72. package/lib/components/Button/Button.d.ts +1 -1
  73. package/lib/components/Button/styles.module.scss +111 -60
  74. package/lib/components/Button/styles.module.scss.d.ts +1 -1
  75. package/lib/components/Checkbox/CheckboxMarker/styles.module.scss +6 -6
  76. package/lib/components/Chip/styles.module.scss +2 -3
  77. package/lib/components/Close/styles.module.scss +2 -3
  78. package/lib/components/DictionaryTrigger/index.js +26 -1
  79. package/lib/{DictionaryTrigger.js.map → components/DictionaryTrigger/index.js.map} +1 -1
  80. package/lib/components/DictionaryTrigger/styles.module.scss +6 -8
  81. package/lib/components/Drawer/Drawer.d.ts +0 -4
  82. package/lib/components/Drawer/DrawerBackButton.module.scss +1 -2
  83. package/lib/components/Drawer/styles.module.scss +6 -3
  84. package/lib/components/Dropdown/SingleSelect/styles.module.scss +0 -2
  85. package/lib/components/Dropdown/index.js +9 -17
  86. package/lib/components/Dropdown/index.js.map +1 -1
  87. package/lib/components/Dropdown/styles.module.scss +12 -14
  88. package/lib/components/Duolist/Duolist.d.ts +14 -2
  89. package/lib/components/Duolist/styles.module.scss +28 -8
  90. package/lib/components/Duolist/styles.module.scss.d.ts +3 -0
  91. package/lib/components/ElementHeader/ElementHeader.d.ts +1 -1
  92. package/lib/components/ElementHeader/styles.module.scss +1 -1
  93. package/lib/components/EmptyState/styles.module.scss +1 -2
  94. package/lib/components/ErrorWrapper/styles.module.scss +3 -3
  95. package/lib/components/Expander/styles.module.scss +0 -2
  96. package/lib/components/Expander/styles.module.scss.d.ts +1 -1
  97. package/lib/components/ExpanderHierarchy/index.js +1 -0
  98. package/lib/components/ExpanderHierarchy/index.js.map +1 -1
  99. package/lib/components/ExpanderList/index.js +21 -19
  100. package/lib/components/ExpanderList/index.js.map +1 -1
  101. package/lib/components/ExpanderList/styles.module.scss +11 -11
  102. package/lib/components/FavoriteButton/index.js +3 -3
  103. package/lib/components/FavoriteButton/index.js.map +1 -1
  104. package/lib/components/FavoriteButton/styles.module.scss +0 -1
  105. package/lib/components/Filter/FilterButton/styles.module.scss +5 -6
  106. package/lib/components/Filter/FilterButtonAndChipsWrapper/styles.module.scss +0 -1
  107. package/lib/components/Filter/FilterDrawer/styles.module.scss +0 -1
  108. package/lib/components/Filter/FilterLinkList/FilterLinkList.module.scss +5 -6
  109. package/lib/components/Filter/FilterOverviewSearch/styles.module.scss +1 -4
  110. package/lib/components/Filter/FilterSearch/styles.module.scss +14 -15
  111. package/lib/components/Filter/FilterSort/styles.module.scss +1 -2
  112. package/lib/components/Filter/FilterStateWrapper/styles.module.scss +0 -2
  113. package/lib/components/Filter/LoaderSpinner/styles.module.scss +2 -4
  114. package/lib/components/FormFieldTag/styles.module.scss +0 -1
  115. package/lib/components/FormGroup/styles.module.scss +0 -1
  116. package/lib/components/HelpBubble/styles.module.scss +0 -1
  117. package/lib/components/HelpDetails/styles.module.scss +2 -4
  118. package/lib/components/HelpDrawer/styles.module.scss +1 -2
  119. package/lib/components/HelpPanel/HelpPanel.d.ts +2 -2
  120. package/lib/components/HelpPanel/index.js +1 -17
  121. package/lib/components/HelpPanel/index.js.map +1 -1
  122. package/lib/components/HelpPanel/styles.module.scss +2 -22
  123. package/lib/components/HelpPanel/styles.module.scss.d.ts +0 -4
  124. package/lib/components/HelpTeaser/styles.module.scss +7 -9
  125. package/lib/components/HelpTriggerIcon/HelpTriggerIcon.d.ts +2 -2
  126. package/lib/components/HelpTriggerIcon/styles.module.scss +20 -22
  127. package/lib/components/HelpTriggerIcon/styles.module.scss.d.ts +1 -1
  128. package/lib/components/HelpTriggerInline/styles.module.scss +3 -5
  129. package/lib/components/HelpTriggerStandalone/styles.module.scss +3 -5
  130. package/lib/components/HighlightPanel/styles.module.scss +2 -3
  131. package/lib/components/HorizontalScroll/HorizontalScroll.d.ts +0 -4
  132. package/lib/components/HorizontalScroll/styles.module.scss +1 -4
  133. package/lib/components/HorizontalScroll/styles.module.scss.d.ts +0 -1
  134. package/lib/components/Icons/AdditionalIconInformation.d.ts +4 -0
  135. package/lib/components/Icons/AdditionalIconInformation.js +14 -10
  136. package/lib/components/Icons/AdditionalIconInformation.js.map +1 -1
  137. package/lib/components/Icons/HistoryDocument.js +6 -7
  138. package/lib/components/Icons/HistoryDocument.js.map +1 -1
  139. package/lib/components/Icons/IconNames.d.ts +1 -1
  140. package/lib/components/Icons/IconNames.js +1 -0
  141. package/lib/components/Icons/IconNames.js.map +1 -1
  142. package/lib/components/Icons/YesNo.d.ts +3 -0
  143. package/lib/components/Icons/YesNo.js +53 -0
  144. package/lib/components/Icons/YesNo.js.map +1 -0
  145. package/lib/components/Illustrations/IllustrationNames.d.ts +1 -1
  146. package/lib/components/Illustrations/IllustrationNames.js +2 -0
  147. package/lib/components/Illustrations/IllustrationNames.js.map +1 -1
  148. package/lib/components/Illustrations/MoveAway.d.ts +11 -0
  149. package/lib/components/Illustrations/MoveAway.js +18 -0
  150. package/lib/components/Illustrations/MoveAway.js.map +1 -0
  151. package/lib/components/Illustrations/MoveAwayMedium.d.ts +3 -0
  152. package/lib/components/Illustrations/MoveAwayMedium.js +114 -0
  153. package/lib/components/Illustrations/MoveAwayMedium.js.map +1 -0
  154. package/lib/components/InfoTeaser/styles.module.scss +6 -8
  155. package/lib/components/Label/styles.module.scss +1 -1
  156. package/lib/components/LinkList/LinkList.d.ts +1 -1
  157. package/lib/components/LinkList/styles.module.scss +9 -11
  158. package/lib/components/LinkList/styles.module.scss.d.ts +1 -1
  159. package/lib/components/ListEditMode/styles.module.scss +5 -7
  160. package/lib/components/Loader/Loader.d.ts +1 -1
  161. package/lib/components/Loader/index.js +4 -4
  162. package/lib/components/Loader/index.js.map +1 -1
  163. package/lib/components/Loader/styles.module.scss +7 -7
  164. package/lib/components/Loader/styles.module.scss.d.ts +3 -3
  165. package/lib/components/Modal/constants.d.ts +1 -1
  166. package/lib/components/Modal/index.js +6 -3
  167. package/lib/components/Modal/index.js.map +1 -1
  168. package/lib/components/Modal/styles.module.scss +14 -19
  169. package/lib/components/Modal/styles.module.scss.d.ts +2 -3
  170. package/lib/components/Panel/index.js +1 -1
  171. package/lib/components/Panel/index.js.map +1 -1
  172. package/lib/components/Panel/styles.module.scss +15 -16
  173. package/lib/components/Panel/styles.module.scss.d.ts +1 -1
  174. package/lib/components/PopMenu/PopMenu.d.ts +4 -0
  175. package/lib/components/PopMenu/index.js +10 -5
  176. package/lib/components/PopMenu/index.js.map +1 -1
  177. package/lib/components/PopOver/styles.module.scss +1 -3
  178. package/lib/components/Progressbar/Progressbar.d.ts +1 -1
  179. package/lib/components/Progressbar/constants.d.ts +1 -1
  180. package/lib/components/Progressbar/index.js +4 -4
  181. package/lib/components/Progressbar/index.js.map +1 -1
  182. package/lib/components/Radio/Radio.d.ts +28 -0
  183. package/lib/components/Radio/index.d.ts +3 -0
  184. package/lib/components/Radio/index.js +7 -0
  185. package/lib/components/Radio/index.js.map +1 -0
  186. package/lib/components/{RadioButton → Radio}/styles.module.scss +8 -9
  187. package/lib/components/Radio/styles.module.scss.d.ts +26 -0
  188. package/lib/components/ServiceMessage/styles.module.scss +20 -22
  189. package/lib/components/Slider/styles.module.scss +1 -2
  190. package/lib/components/StatusDot/styles.module.scss +4 -5
  191. package/lib/components/StickyNote/index.js +2 -2
  192. package/lib/components/StickyNote/index.js.map +1 -1
  193. package/lib/components/StickyNote/styles.module.scss +9 -10
  194. package/lib/components/Table/index.js +0 -1
  195. package/lib/components/Table/index.js.map +1 -1
  196. package/lib/components/Tabs/TabList/styles.module.scss +20 -18
  197. package/lib/components/Tabs/TabPanel/styles.module.scss +2 -3
  198. package/lib/components/Tabs/styles.module.scss +0 -1
  199. package/lib/components/Tag/styles.module.scss +0 -1
  200. package/lib/components/Tile/styles.module.scss +5 -7
  201. package/lib/components/Toast/styles.module.scss +0 -1
  202. package/lib/components/Toggle/styles.module.scss +9 -10
  203. package/lib/components/UNSAFE_Table/StackedCellContent.d.ts +9 -0
  204. package/lib/components/UNSAFE_Table/TableCaption.d.ts +10 -0
  205. package/lib/components/UNSAFE_Table/TableContext.d.ts +22 -0
  206. package/lib/components/UNSAFE_Table/UNSAFE_Table.d.ts +37 -0
  207. package/lib/components/UNSAFE_Table/UNSAFE_TableBody/UNSAFE_TableBody.d.ts +10 -0
  208. package/lib/components/UNSAFE_Table/UNSAFE_TableBody/index.d.ts +3 -0
  209. package/lib/components/UNSAFE_Table/UNSAFE_TableBody/index.js +2 -0
  210. package/lib/components/UNSAFE_Table/UNSAFE_TableCell/UNSAFE_TableCell.d.ts +15 -0
  211. package/lib/components/UNSAFE_Table/UNSAFE_TableCell/index.d.ts +3 -0
  212. package/lib/components/UNSAFE_Table/UNSAFE_TableCell/index.js +7 -0
  213. package/lib/components/UNSAFE_Table/UNSAFE_TableCell/index.js.map +1 -0
  214. package/lib/components/UNSAFE_Table/UNSAFE_TableDetail/UNSAFE_TableDetail.d.ts +12 -0
  215. package/lib/components/UNSAFE_Table/UNSAFE_TableDetail/index.d.ts +3 -0
  216. package/lib/components/UNSAFE_Table/UNSAFE_TableDetail/index.js +7 -0
  217. package/lib/components/UNSAFE_Table/UNSAFE_TableDetail/index.js.map +1 -0
  218. package/lib/components/UNSAFE_Table/UNSAFE_TableExpandedRow/UNSAFE_TableExpandedRow.d.ts +17 -0
  219. package/lib/components/UNSAFE_Table/UNSAFE_TableExpandedRow/index.d.ts +3 -0
  220. package/lib/components/UNSAFE_Table/UNSAFE_TableExpandedRow/index.js +7 -0
  221. package/lib/components/UNSAFE_Table/UNSAFE_TableExpandedRow/index.js.map +1 -0
  222. package/lib/components/UNSAFE_Table/UNSAFE_TableExpanderCell/UNSAFE_TableExpanderCellMobile.d.ts +4 -0
  223. package/lib/components/UNSAFE_Table/UNSAFE_TableHead/UNSAFE_TableHead.d.ts +8 -0
  224. package/lib/components/UNSAFE_Table/UNSAFE_TableHead/index.d.ts +3 -0
  225. package/lib/components/UNSAFE_Table/UNSAFE_TableHead/index.js +7 -0
  226. package/lib/components/UNSAFE_Table/UNSAFE_TableHead/index.js.map +1 -0
  227. package/lib/components/UNSAFE_Table/UNSAFE_TableHeadCell/UNSAFE_TableHeadCell.d.ts +15 -0
  228. package/lib/components/UNSAFE_Table/UNSAFE_TableHeadCell/index.d.ts +3 -0
  229. package/lib/components/UNSAFE_Table/UNSAFE_TableHeadCell/index.js +2 -0
  230. package/lib/components/UNSAFE_Table/UNSAFE_TablePopMenuCell/UNSAFE_TablePopMenuCell.d.ts +8 -0
  231. package/lib/components/UNSAFE_Table/UNSAFE_TableRow/UNSAFE_TableRow.d.ts +20 -0
  232. package/lib/components/UNSAFE_Table/UNSAFE_TableRow/index.d.ts +3 -0
  233. package/lib/components/UNSAFE_Table/UNSAFE_TableRow/index.js +2 -0
  234. package/lib/components/UNSAFE_Table/constants.d.ts +29 -0
  235. package/lib/components/UNSAFE_Table/index.d.ts +19 -0
  236. package/lib/components/UNSAFE_Table/index.js +182 -0
  237. package/lib/components/UNSAFE_Table/index.js.map +1 -0
  238. package/lib/components/UNSAFE_Table/resourceHelper.d.ts +3 -0
  239. package/lib/components/UNSAFE_Table/styles.module.scss +621 -0
  240. package/lib/components/UNSAFE_Table/styles.module.scss.d.ts +62 -0
  241. package/lib/components/UNSAFE_Table/useTableExpandedRows.d.ts +12 -0
  242. package/lib/components/UNSAFE_Table/useTableShowMore.d.ts +25 -0
  243. package/lib/components/UNSAFE_Table/utils.d.ts +47 -0
  244. package/lib/components/Validation/index.js +2 -2
  245. package/lib/components/Validation/index.js.map +1 -1
  246. package/lib/components/VisualCheckboxCloud/Checkbox/styles.module.scss +0 -2
  247. package/lib/components/VisualCheckboxCloud/styles.module.scss +0 -1
  248. package/lib/components/VisualCheckboxGroup/VisualCheckbox/styles.module.scss +0 -2
  249. package/lib/components/VisualCheckboxGroup/styles.module.scss +0 -1
  250. package/lib/components/VisualContentgroupWithImage/styles.module.scss +0 -1
  251. package/lib/components/VisualRadioCloud/Radio/index.js +1 -1
  252. package/lib/components/VisualRadioCloud/Radio/styles.module.scss +0 -2
  253. package/lib/components/VisualRadioCloud/index.js +1 -1
  254. package/lib/components/VisualRadioCloud/styles.module.scss +0 -1
  255. package/lib/components/VisualRadioGroup/VisualRadio/styles.module.scss +0 -2
  256. package/lib/components/VisualRadioGroup/styles.module.scss +0 -1
  257. package/lib/constants.d.ts +2 -3
  258. package/lib/constants.js +2 -3
  259. package/lib/constants.js.map +1 -1
  260. package/lib/constants3.js +42 -0
  261. package/lib/constants3.js.map +1 -0
  262. package/lib/floating-ui.react.js +3 -460
  263. package/lib/floating-ui.react.js.map +1 -1
  264. package/lib/hooks/useDismissablePopover.d.ts +20 -0
  265. package/lib/hooks/useDismissablePopover.js +66 -0
  266. package/lib/hooks/useDismissablePopover.js.map +1 -0
  267. package/lib/hooks/useOutsideEvent.d.ts +3 -0
  268. package/lib/hooks/useOutsideEvent.js +24 -3
  269. package/lib/hooks/useOutsideEvent.js.map +1 -1
  270. package/lib/hooks/useReturnFocusOnClose.d.ts +7 -0
  271. package/lib/hooks/useReturnFocusOnClose.js +22 -0
  272. package/lib/hooks/useReturnFocusOnClose.js.map +1 -0
  273. package/lib/hooks/useSort.d.ts +88 -0
  274. package/lib/hooks/useSort.js +91 -0
  275. package/lib/hooks/useSort.js.map +1 -0
  276. package/lib/hooks/useSort.test.js +11739 -0
  277. package/lib/hooks/useSort.test.js.map +1 -0
  278. package/lib/hooks/useSynchronousResizeObserver.d.ts +11 -0
  279. package/lib/hooks/useSynchronousResizeObserver.js +29 -0
  280. package/lib/hooks/useSynchronousResizeObserver.js.map +1 -0
  281. package/lib/index.d.ts +2 -0
  282. package/lib/index.js +3 -1
  283. package/lib/resources/HN.Designsystem.Table.nb-NO.json.d.ts +9 -0
  284. package/lib/resources/Resources.d.ts +19 -0
  285. package/lib/rolldown-runtime.js +33 -0
  286. package/lib/scss/_font-mixins.scss +28 -1
  287. package/lib/scss/_visual-form.scss +47 -47
  288. package/lib/scss/helsenorge.scss +1 -0
  289. package/lib/scss/supernova/styles/colors.css +177 -122
  290. package/lib/scss/supernova/styles/typography.css +58 -51
  291. package/lib/scss/supernova-legacy/index.css +2 -0
  292. package/lib/scss/supernova-legacy/styles/legacy-colors.css +111 -0
  293. package/lib/scss/typography.module.scss +8 -0
  294. package/lib/scss/typography.module.scss.d.ts +2 -0
  295. package/lib/scss/typography.stories.tsx +8 -0
  296. package/lib/utils/formSpacing.js +3 -3
  297. package/lib/utils/formSpacing.js.map +1 -1
  298. package/lib/utils/uuid.js +1 -12
  299. package/lib/utils/uuid.js.map +1 -1
  300. package/package.json +61 -15
  301. package/scss/_font-mixins.scss +28 -1
  302. package/scss/_visual-form.scss +47 -47
  303. package/scss/helsenorge.scss +1 -0
  304. package/scss/supernova/styles/colors.css +177 -122
  305. package/scss/supernova/styles/typography.css +58 -51
  306. package/scss/supernova-legacy/index.css +2 -0
  307. package/scss/supernova-legacy/styles/legacy-colors.css +111 -0
  308. package/scss/typography.module.scss +8 -0
  309. package/scss/typography.module.scss.d.ts +2 -0
  310. package/scss/typography.stories.tsx +8 -0
  311. package/lib/DictionaryTrigger.js +0 -27
  312. package/lib/RadioButton.js +0 -84
  313. package/lib/RadioButton.js.map +0 -1
  314. package/lib/components/HelpTooltip/HelpTooltip.d.ts +0 -12
  315. package/lib/components/HelpTooltip/index.d.ts +0 -3
  316. package/lib/components/HelpTooltip/index.js +0 -48
  317. package/lib/components/HelpTooltip/index.js.map +0 -1
  318. package/lib/components/RadioButton/RadioButton.d.ts +0 -28
  319. package/lib/components/RadioButton/index.d.ts +0 -3
  320. package/lib/components/RadioButton/index.js +0 -7
  321. package/lib/components/RadioButton/index.js.map +0 -1
  322. package/lib/components/RadioButton/styles.module.scss.d.ts +0 -26
  323. package/lib/designsystem-react.css +0 -273
  324. /package/lib/components/{RadioButton → Radio}/RadioMarker/RadioMarker.d.ts +0 -0
  325. /package/lib/components/{RadioButton → Radio}/RadioMarker/styles.module.scss +0 -0
  326. /package/lib/components/{RadioButton → Radio}/RadioMarker/styles.module.scss.d.ts +0 -0
package/scss/supernova/styles/colors.css CHANGED
@@ -8,8 +8,8 @@
8
8
  */
9
9
 
10
10
  :root {
11
- --color-action-graphics-onlight: #188097;
12
- --color-action-graphics-onlight-hover: #126f87;
11
+ --color-action-graphics-dark-normal: #188097;
12
+ --color-action-graphics-dark-hover: #126f87;
13
13
  --core-color-banana-50: #fdf8df;
14
14
  --core-color-banana-100: #fcf2bf;
15
15
  --core-color-banana-200: #f9ea9f;
@@ -72,138 +72,135 @@
72
72
  --core-color-plum-900: #3c1471;
73
73
  --core-color-black: #000000;
74
74
  --core-color-white: #ffffff;
75
- --color-action-border-ondark: #ffffff;
76
- --color-action-text-ondark: #ffffff;
77
- --color-action-graphics-ondark: #ffffff;
78
- --color-notification-background-info: #e4f7f9;
79
- --color-notification-background-error: #fff2ea;
80
- --color-notification-background-warning: #fdf8df;
81
- --color-notification-background-success: #e6f8ee;
82
- --color-notification-border-info: #08667c;
83
- --color-notification-border-error: #a31f0e;
84
- --color-notification-border-warning: #ab7c00;
85
- --color-notification-border-success: #078141;
86
- --color-notification-graphics-info: #08667c;
87
- --color-notification-graphics-error: #a31f0e;
88
- --color-notification-graphics-warning: #ab7c00;
89
- --color-notification-graphics-success: #078141;
90
- --color-notification-status-info: #188097;
91
- --color-notification-status-error: #c83521;
92
- --color-notification-status-warning: #ebc840;
93
- --color-notification-status-success: #099150;
94
- --color-disabled-background: #d6d4d3;
75
+ --color-action-border-light-normal: #ffffff;
76
+ --color-action-text-light-normal: #ffffff;
77
+ --color-action-graphics-light-normal: #ffffff;
78
+ --color-notification-info-background: #e4f7f9;
79
+ --color-notification-error-background: #fff2ea;
80
+ --color-notification-warning-background: #fdf8df;
81
+ --color-notification-success-background: #e6f8ee;
82
+ --color-notification-info-border: #08667c;
83
+ --color-notification-error-border: #a31f0e;
84
+ --color-notification-warning-border: #ab7c00;
85
+ --color-notification-success-border: #078141;
86
+ --color-notification-info-graphics: #08667c;
87
+ --color-notification-error-graphics: #a31f0e;
88
+ --color-notification-warning-graphics: #ab7c00;
89
+ --color-notification-success-graphics: #078141;
90
+ --color-notification-info: #188097;
91
+ --color-notification-error: #c83521;
92
+ --color-notification-warning: #ebc840;
93
+ --color-notification-success: #099150;
94
+ --color-disabled-background-light: #d6d4d3;
95
95
  --color-disabled-text: #62625f;
96
- --color-disabled-border: #7d7c79;
97
- --color-destructive-background-emphasized: #f7e1d2;
98
- --color-destructive-background-normal: #fff2ea;
99
- --color-destructive-graphics-normal: #c83521;
100
- --color-destructive-graphics-hover: #b62e1c;
101
- --color-destructive-text-normal: #b62e1c;
102
- --color-destructive-text-hover: #a31f0e;
103
- --color-help-background-normal: #f4ecfe;
104
- --color-help-graphics-normal: #5c27a1;
105
- --color-help-border-normal: #5c27a1;
106
- --color-disabled-graphics: #62625f;
107
- --color-destructive-border-normal: #c83521;
108
- --color-action-border-ondark-hover: #e4f7f9;
109
- --color-action-graphics-ondark-hover: #e4f7f9;
96
+ --color-disabled-border-dark: #7d7c79;
97
+ --color-destructive-background-light-plus1-hover: #f7e1d2;
98
+ --color-destructive-background-light-plus1-normal: #fff2ea;
99
+ --color-destructive-graphics-dark-normal: #c83521;
100
+ --color-destructive-graphics-dark-hover: #b62e1c;
101
+ --color-destructive-text-dark-normal: #b62e1c;
102
+ --color-destructive-text-dark-hover: #a31f0e;
103
+ --color-help-background: #f4ecfe;
104
+ --color-help-graphics: #5c27a1;
105
+ --color-help-border: #5c27a1;
106
+ --color-disabled-graphics-dark: #62625f;
107
+ --color-destructive-border-dark-normal: #c83521;
108
+ --color-action-border-light-hover: #e4f7f9;
109
+ --color-action-graphics-light-hover: #e4f7f9;
110
110
 
111
111
  /* Hoverfarge for bakgrunn på interaktive elementer - onLight */
112
112
  --color-action-background-transparent-onlight-hover: #126f8721;
113
113
 
114
114
  /* Hoverfarge for bakgrunn på interaktive elementer - onLight selected */
115
- --color-action-background-transparent-onlight-hoverselected: #126f872b;
116
- --color-action-border-ondark-focus: #ffffff;
117
- --color-disabled-border-ondark: #d6d4d3;
118
- --color-disabled-graphics-ondark: #d6d4d3;
119
- --color-disabled-text-ondark: #ffffff;
120
- --color-action-text-onlight: #126f87;
121
- --color-action-text-onlight-hover: #08667c;
122
- --color-action-border-onlight: #188097;
123
- --color-action-border-onlight-hover: #08667c;
124
- --color-action-border-onlight-focus: #000000;
125
- --color-action-background-ondark: #ffffff;
126
- --color-action-background-ondark-hover: #e4f7f9;
127
- --color-action-background-ondark-selected: #cae7ed;
128
- --color-action-background-ondark-hoverselected: #afdae3;
129
- --color-action-background-onlight: #188097;
130
- --color-action-background-onlight-hover: #08667c;
115
+ --color-action-background-transparent-onlight-plus1-hover: #126f872b;
116
+ --color-action-border-light-focus: #ffffff;
117
+ --color-disabled-border-light: #d6d4d3;
118
+ --color-disabled-graphics-light: #d6d4d3;
119
+ --color-action-text-dark-normal: #126f87;
120
+ --color-action-text-dark-hover: #08667c;
121
+ --color-action-border-dark-normal: #188097;
122
+ --color-action-border-dark-plus1-hover: #08667c;
123
+ --color-action-border-dark-focus: #000000;
124
+ --color-action-background-light-normal: #ffffff;
125
+ --color-action-background-light-hover: #e4f7f9;
126
+ --color-action-background-light-selected: #cae7ed;
127
+ --color-action-background-light-active: #cae7ed;
128
+ --color-action-background-dark-normal: #188097;
129
+ --color-action-background-dark-plus1-hover: #08667c;
131
130
 
132
131
  /* Hoverfarge for bakgrunn på interaktive elementer - hvor hover skal eksistere på forskjellige fargebakgrunner */
133
- --color-action-background-transparent-ondark-hover: #00000026;
134
- --color-action-background-transparent-onmulticolor-hover: #00000013;
132
+ --color-action-background-transparent-multi-onlight-hover: #00000013;
135
133
 
136
134
  /* Activefarge for bakgrunn på interaktive elementer - hvor hover skal eksistere på forskjellige fargebakgrunner */
137
- --color-action-background-transparent-ondark-hoverselected: #000000bf;
138
- --color-action-background-transparent-onmulticolor-active: #00000026;
139
- --color-base-background-blueberry: #e4f7f9;
140
- --color-base-background-cherry: #fff2ea;
141
- --color-base-background-neutral: #f5f3f3;
142
- --color-base-background-white: #ffffff;
143
- --color-base-background-dark-blueberry: #188097;
144
- --color-base-background-dark-cherry: #c83521;
145
- --color-base-background-dark-neutral: #2b2c2b;
146
- --color-base-text-onlight: #000000;
147
- --color-base-text-ondark: #ffffff;
148
- --color-base-border-ondark: #d6d4d3;
149
- --color-base-border-onlight: #7d7c79;
150
- --color-base-border-onlight-emphasized: #62625f;
151
- --color-base-graphics-onlight: #000000;
152
- --color-base-graphics-ondark: #ffffff;
153
- --brandcolor-white: #ffffff;
154
- --brandcolor-black: #000000;
155
- --brandcolor-neutral-verylight: #f5f3f3;
156
- --brandcolor-neutral-light: #eae7e7;
157
- --brandcolor-neutral-mediumlight: #d6d4d3;
158
- --brandcolor-neutral-medium: #989693;
159
- --brandcolor-neutral-dark: #62625f;
160
- --brandcolor-neutral-verydark: #2b2c2b;
161
- --brandcolor-blueberry-verylight: #e4f7f9;
162
- --brandcolor-blueberry-light: #cae7ed;
163
- --brandcolor-blueberry-mediumlight: #afdae3;
164
- --brandcolor-blueberry-medium: #188097;
165
- --brandcolor-blueberry-mediumdark: #126f87;
166
- --brandcolor-blueberry-dark: #08667c;
167
- --brandcolor-cherry-verylight: #fff2ea;
168
- --brandcolor-cherry-light: #f7e1d2;
169
- --brandcolor-cherry-medium: #c83521;
170
- --brandcolor-cherry-mediumdark: #b62e1c;
171
- --brandcolor-cherry-dark: #a31f0e;
135
+ --color-action-background-transparent-multi-ondark-hover: #00000026;
136
+ --color-base-blueberry-background-light: #e4f7f9;
137
+ --color-base-cherry-background-light: #fff2ea;
138
+ --color-base-neutral-background-light: #f5f3f3;
139
+ --color-base-background-light: #ffffff;
140
+ --color-base-blueberry-background-dark: #188097;
141
+ --color-base-cherry-background-dark: #c83521;
142
+ --color-base-neutral-background-dark: #2b2c2b;
143
+ --color-base-text-dark: #000000;
144
+ --color-base-text-light: #ffffff;
145
+ --color-base-border-light-ondark: #d6d4d3;
146
+ --color-base-border-dark: #7d7c79;
147
+ --color-base-emphasized-border-dark: #62625f;
148
+ --color-base-graphics-dark: #000000;
149
+ --color-base-graphics-light: #ffffff;
150
+ --brand-color-white: #ffffff;
151
+ --brand-color-black: #000000;
152
+ --brand-color-neutral-verylight: #f5f3f3;
153
+ --brand-color-neutral-light: #eae7e7;
154
+ --brand-color-neutral-mediumlight: #d6d4d3;
155
+ --brand-color-neutral-medium: #989693;
156
+ --brand-color-neutral-dark: #62625f;
157
+ --brand-color-neutral-verydark: #2b2c2b;
158
+ --brand-color-blueberry-verylight: #e4f7f9;
159
+ --brand-color-blueberry-light: #cae7ed;
160
+ --brand-color-blueberry-mediumlight: #afdae3;
161
+ --brand-color-blueberry-medium: #188097;
162
+ --brand-color-blueberry-mediumdark: #126f87;
163
+ --brand-color-blueberry-dark: #08667c;
164
+ --brand-color-cherry-verylight: #fff2ea;
165
+ --brand-color-cherry-light: #f7e1d2;
166
+ --brand-color-cherry-medium: #c83521;
167
+ --brand-color-cherry-mediumdark: #b62e1c;
168
+ --brand-color-cherry-dark: #a31f0e;
172
169
 
173
170
  /* Placeholdertext in input- and textarea-controls */
174
- --color-placeholder-text-onlight: #62625f;
175
- --color-base-border-onlight-subtle: #d6d4d3;
176
- --color-base-border-neutral: #d6d4d3;
177
- --color-base-border-blueberry: #afdae3;
178
- --color-base-border-cherry: #eec0a5;
171
+ --color-placeholder-text-dark: #62625f;
172
+ --color-base-border-light: #d6d4d3;
173
+ --color-base-neutral-border-light: #d6d4d3;
174
+ --color-base-blueberry-border-light: #afdae3;
175
+ --color-base-cherry-border-light: #eec0a5;
179
176
 
180
177
  /* In a few cases where coloured text is required to stress the semantics of an information notification text */
181
- --color-notification-text-info: #08667c;
178
+ --color-notification-info-text: #08667c;
182
179
 
183
180
  /* In a few cases where coloured text is required to stress the semantics of an error notification text */
184
- --color-notification-text-error: #a31f0e;
185
- --color-notification-text-warning: #916500;
186
- --color-notification-text-success: #078141;
187
- --color-base-border-neutral-emphasized: #bdbab9;
188
- --color-notification-status-draft: #7d7c79;
181
+ --color-notification-error-text: #a31f0e;
182
+ --color-notification-warning-text: #916500;
183
+ --color-notification-success-text: #078141;
184
+ --color-base-neutral-border-light-plus1: #bdbab9;
185
+ --color-notification-draft: #7d7c79;
189
186
 
190
187
  /* hoverstate on help components on white background */
191
188
  --color-help-background-transparent-onlight-hover: #6c36b31a;
192
- --color-help-background-transparent-onlight-hover-selected: #6c38b333;
189
+ --color-help-background-transparent-onlight-hoverselected: #6c38b333;
193
190
  --color-help-background-transparent-onlight-active: #6c38b34d;
194
191
  --color-action-background-transparent-onlight-active: #126f874d;
195
192
 
196
193
  /* Background outside of modal and bottomsheet to mask inactive screen-area */
197
194
  --color-shadow-pagemask: #2c2b2cb8;
198
195
  --color-help-border-subtle-wcag: #9862df;
199
- --color-help-graphics-dark: #4c1b8c;
200
- --color-help-border-dark: #4c1b8c;
201
- --color-help-graphics-verydark: #3c1471;
202
- --color-help-border-verydark: #3c1471;
203
- --color-action-background-onlight-active: #06596c;
196
+ --color-help-graphics-plus1: #4c1b8c;
197
+ --color-help-border-plus1: #4c1b8c;
198
+ --color-help-graphics-plus2: #3c1471;
199
+ --color-help-border-plus2: #3c1471;
200
+ --color-action-background-dark-plus1-active: #06596c;
204
201
  --color-action-background-like-transparent-but-opaque-onlight-hover: #e0ecef;
205
202
  --color-action-background-like-transparent-but-opaque-onlight-hoverselected: #d7e7eb;
206
- --color-action-background-stroke-onlight: #126f87;
203
+ --color-action-border-dark-hover: #126f87;
207
204
  --component-stickynote-background-normal-light: #fdf8df;
208
205
  --component-stickynote-background-normal-medium: #fcf2bf;
209
206
  --component-stickynote-background-normal-dark: #f9ea9f;
@@ -212,7 +209,7 @@
212
209
  --component-stickynote-background-error-dark: #eec0a5;
213
210
  --component-stickynote-background-error-medium: #f7e1d2;
214
211
  --component-stickynote-background-error-light: #fff2ea;
215
- --color-base-text-onlight-subdued: #474745;
212
+ --color-base-subdued-text-dark: #474745;
216
213
  --component-stickynote-background-fold-error-dark: #e39376;
217
214
  --component-stickynote-background-fold-error-light: #f7e1d2;
218
215
  --component-stickynote-background-fold-error-medium: #eec0a5;
@@ -248,25 +245,83 @@
248
245
  --component-statusdot-graphics-kiwi-onlight: #078141;
249
246
  --component-statusdot-graphics-neutral-ondark: #f5f3f3;
250
247
  --component-statusdot-graphics-neutral-onlight: #7d7c79;
251
- --color-action-graphics-emphasized-onlight: #08667c;
252
- --color-base-background-stroke-dark-cherry: #b62e1c;
253
- --color-base-background-stroke-dark-blueberry: #126f87;
254
- --color-base-background-stroke-dark-neutral: #000000;
255
- --color-destructive-graphics-emphasized-onlight: #a31f0e;
248
+ --color-action-graphics-dark-active: #08667c;
249
+ --color-destructive-graphics-dark-active: #a31f0e;
256
250
  --component-listelements-background-neutral-verydark: #bdbab9;
257
251
  --component-listelements-background-blueberry-verydark: #7abecc;
258
252
  --component-listelements-border-neutral-ondark: #ffffff;
259
253
  --component-listelements-background-cherry-verydark: #e39376;
260
- --color-notification-background-info-hover: #cae7ed;
261
- --color-notification-background-info-active: #afdae3;
262
- --color-notification-background-error-hover: #f7e1d2;
263
- --color-notification-background-error-active: #eec0a5;
264
- --color-notification-background-warning-hover: #fcf2bf;
265
- --color-notification-background-warning-active: #f9ea9f;
266
- --color-notification-background-success-hover: #c2edd6;
267
- --color-notification-background-success-active: #9de2bf;
254
+ --color-notification-info-background-hover: #cae7ed;
255
+ --color-notification-info-background-active: #afdae3;
256
+ --color-notification-error-background-hover: #f7e1d2;
257
+ --color-notification-error-background-active: #eec0a5;
258
+ --color-notification-warning-background-hover: #fcf2bf;
259
+ --color-notification-warning-background-active: #f9ea9f;
260
+ --color-notification-success-background-hover: #c2edd6;
261
+ --color-notification-success-background-active: #9de2bf;
268
262
  --color-lightbox-background-transparent-ondark-hover: #00000026;
269
263
  --color-lightbox-background-transparent-ondark-hoverselected: #000000bf;
270
264
  --component-lightbox-background-transparent-ondark-hover: #00000026;
271
265
  --component-lightbox-background-transparent-ondark-hoverselected: #000000bf;
272
- }
266
+
267
+ /* active-state for text */
268
+ --color-action-text-dark-active: #06596c;
269
+ --pink-flamingo-pale: #f8a4e6;
270
+ --color-action-border-dark-plus1-active: #06596c;
271
+ --color-action-graphics-light-max-hover: #ffffff;
272
+ --color-action-graphics-light-max-active: #ffffff;
273
+ --color-action-text-light-max-hover: #ffffff;
274
+ --color-action-text-light-max-active: #ffffff;
275
+ --core-color-transparent: #00000000;
276
+ --color-action-background-transparent-onlight-normal: #00000000;
277
+ --color-action-border-dark-active: #08667c;
278
+ --color-action-background-transparent-multi-onlight-normal: #00000000;
279
+ --color-action-background-transparent-multi-ondark-normal: #00000000;
280
+ --color-action-background-transparent-multi-ondark-active: #00000040;
281
+
282
+ /* Activefarge for bakgrunn på interaktive elementer - hvor hover skal eksistere på forskjellige fargebakgrunner */
283
+ --color-action-background-transparent-multi-onlight-active: #00000026;
284
+ --color-action-border-light-max-hover: #ffffff;
285
+ --color-action-border-light-max-active: #ffffff;
286
+ --color-destructive-background-transparent-onlight-normal: #00000000;
287
+ --color-destructive-background-transparent-onlight-hover: #ff924f21;
288
+ --color-destructive-background-transparent-onlight-active: #d96f263b;
289
+ --color-destructive-border-dark-hover: #b62e1c;
290
+ --color-destructive-border-dark-active: #a31f0e;
291
+ --color-destructive-text-dark-active: #912112;
292
+ --color-destructive-background-dark-normal: #c83521;
293
+ --color-destructive-background-dark-hover: #b62e1c;
294
+ --color-destructive-background-dark-active: #a31f0e;
295
+ --color-destructive-text-light-normal: #ffffff;
296
+ --color-destructive-text-light-max-hover: #ffffff;
297
+ --color-destructive-text-light-max-active: #ffffff;
298
+ --color-destructive-graphics-light-normal: #ffffff;
299
+ --color-destructive-graphics-light-max-hover: #ffffff;
300
+ --color-destructive-graphics-light-max-active: #ffffff;
301
+ --color-destructive-background-light-normal: #ffffff;
302
+ --color-destructive-background-light-hover: #fff2ea;
303
+ --color-destructive-background-light-active: #f7e1d2;
304
+ --color-destructive-background-light-plus1-active: #eec0a5;
305
+ --color-destructive-border-light-normal: #ffffff;
306
+ --color-destructive-border-light-max-hover: #fff2ea;
307
+ --color-destructive-border-light-max-active: #f7e1d2;
308
+ --color-action-background-light-plus1-normal: #e4f7f9;
309
+ --color-action-background-light-plus1-hover: #cae7ed;
310
+ --color-action-background-light-plus1-active: #afdae3;
311
+ --color-base-neutral-border-normal: #7d7c79;
312
+ --color-action-background-transparent-onlight-plus1-normal: #126f8721;
313
+ --color-action-background-transparent-onlight-plus1-plus1: #126f872b;
314
+ --color-action-background-transparent-onlight-plus1-active: #126f874d;
315
+ --color-action-background-light-onlight-normal: #ffffff;
316
+ --brand-color-blueberry-verydark: #06596c;
317
+ --color-disabled-text-light: #d6d4d3;
318
+ --color-disabled-text-dark: #62625f;
319
+ --color-action-background-light-onlight-active: #cae7ed;
320
+ --color-action-background-light-onlight-hover: #e4f7f9;
321
+ --color-action-background-light-plus2-normal: #cae7ed;
322
+ --color-action-background-light-plus2-hover: #afdae3;
323
+ --color-action-background-light-plus2-active: #7abecc;
324
+ --color-action-background-dark-hover: #126f87;
325
+ --color-action-background-dark-active: #08667c;
326
+ --color-action-border-light-active: #cae7ed;
327
+ }
package/scss/supernova/styles/typography.css CHANGED
@@ -8,103 +8,110 @@
8
8
  */
9
9
 
10
10
  :root {
11
+
11
12
  /* Hovedtittel H1 */
12
- --desktop-h1-title1: 600 3rem/120% 'Source Sans Pro';
13
+ --desktop-h1-title1: 600 3rem/120% "Source Sans Pro";
13
14
 
14
15
  /* Sekundærtittel H2 */
15
- --desktop-h2-title2: 600 2rem/120% 'Source Sans Pro';
16
+ --desktop-h2-title2: 600 2rem/120% "Source Sans Pro";
16
17
 
17
18
  /* Tertiærtittel H3 */
18
- --desktop-h3-title3: 600 1.625rem/120% 'Source Sans Pro';
19
- --desktop-h4-title4: 600 1.375rem/130% 'Source Sans Pro';
20
- --desktop-h5-title5: 700 1.125rem/140% 'Source Sans Pro';
21
- --desktop-preamble: 400 1.5rem/130% 'Source Sans Pro';
22
- --desktop-legend: 600 1.5rem/130% 'Source Sans Pro';
23
- --desktop-label: 600 1.25rem/130% 'Source Sans Pro';
24
- --desktop-body: 400 1.25rem/150% 'Source Sans Pro';
19
+ --desktop-h3-title3: 600 1.625rem/120% "Source Sans Pro";
20
+ --desktop-h4-title4: 600 1.375rem/130% "Source Sans Pro";
21
+ --desktop-h5-title5: 700 1.125rem/140% "Source Sans Pro";
22
+ --desktop-preamble: 400 1.5rem/130% "Source Sans Pro";
23
+ --desktop-legend: 600 1.5rem/130% "Source Sans Pro";
24
+ --desktop-label: 600 1.25rem/130% "Source Sans Pro";
25
+ --desktop-body: 400 1.25rem/150% "Source Sans Pro";
25
26
 
26
27
  /* Display of condensed textual data, such as metadata or information that is useful, but perhaps not essential for the use of a service. */
27
- --desktop-compact-data: 400 1.125rem/140% 'Source Sans Pro';
28
+ --desktop-compact-data: 400 1.125rem/140% "Source Sans Pro";
28
29
 
29
30
  /* Tekst i tabellceller. Mer kompakt enn brødtekst (body) */
30
- --desktop-tablecell: 400 1.125rem/130% 'Source Sans Pro';
31
- --desktop-body-strong: 600 1.25rem/150% 'Source Sans Pro';
31
+ --desktop-tablecell: 400 1.125rem/130% "Source Sans Pro";
32
+ --desktop-body-strong: 600 1.25rem/150% "Source Sans Pro";
32
33
 
33
34
  /* Text inside input-fields, textarea fields and numeric steppers, etc. Not to be used as the Label for Radiogroup or Checkbox - use Label. */
34
- --desktop-form-input: 400 1.25rem/140% 'Source Sans Pro';
35
+ --desktop-form-input: 400 1.25rem/140% "Source Sans Pro";
35
36
 
36
37
  /* Bildetekst - plasseres nedenfor bilde eller figur */
37
- --desktop-image-caption: 400 1rem/150% 'Source Sans Pro';
38
+ --desktop-image-caption: 400 1rem/150% "Source Sans Pro";
38
39
 
39
40
  /* Supply copyright information for images */
40
- --desktop-image-credit: 400 0.75rem/130% 'Source Sans Pro';
41
+ --desktop-image-credit: 400 0.75rem/130% "Source Sans Pro";
41
42
 
42
43
  /* Vis status/tidskoder - lav linjehøyde for kompakt visning */
43
- --desktop-status-time-stamp-time: 400 1.125rem/110% 'Source Sans Pro';
44
+ --desktop-status-time-stamp-time: 400 1.125rem/110% "Source Sans Pro";
44
45
 
45
46
  /* Hovedtittel H1 */
46
- --mobile-h1-title1: 600 2rem/120% 'Source Sans Pro';
47
+ --mobile-h1-title1: 600 2rem/120% "Source Sans Pro";
47
48
 
48
49
  /* Sekundærtittel H2 */
49
- --mobile-h2-title2: 600 1.625rem/120% 'Source Sans Pro';
50
+ --mobile-h2-title2: 600 1.625rem/120% "Source Sans Pro";
50
51
 
51
52
  /* Tertiærtittel H3 */
52
- --mobile-h3-title3: 600 1.375rem/136% 'Source Sans Pro';
53
- --mobile-h4-title4: 600 1.25rem/130% 'Source Sans Pro';
54
- --mobile-preamble: 400 1.25rem/130% 'Source Sans Pro';
55
- --mobile-legend: 600 1.125rem/130% 'Source Sans Pro';
56
- --mobile-label: 600 1.125rem/120% 'Source Sans Pro';
57
- --mobile-body: 400 1.125rem/150% 'Source Sans Pro';
53
+ --mobile-h3-title3: 600 1.375rem/136% "Source Sans Pro";
54
+ --mobile-h4-title4: 600 1.25rem/130% "Source Sans Pro";
55
+ --mobile-preamble: 400 1.25rem/130% "Source Sans Pro";
56
+ --mobile-legend: 600 1.125rem/130% "Source Sans Pro";
57
+ --mobile-label: 600 1.125rem/120% "Source Sans Pro";
58
+ --mobile-body: 400 1.125rem/150% "Source Sans Pro";
58
59
 
59
60
  /* Tekst i tabellceller. Mer kompakt enn brødtekst (body) */
60
- --mobile-tablecell: 400 1.125rem/128% 'Source Sans Pro';
61
+ --mobile-tablecell: 400 1.125rem/128% "Source Sans Pro";
61
62
 
62
63
  /* Text in Input and Textarea - widgets */
63
- --mobile-form-input: 400 1.125rem/150% 'Source Sans Pro';
64
- --mobile-image-caption: 400 1rem/150% 'Source Sans Pro';
65
- --mobile-image-credit: 400 0.75rem/133% 'Source Sans Pro';
64
+ --mobile-form-input: 400 1.125rem/150% "Source Sans Pro";
65
+ --mobile-image-caption: 400 1rem/150% "Source Sans Pro";
66
+ --mobile-image-credit: 400 0.75rem/133% "Source Sans Pro";
66
67
 
67
68
  /* Vis status/tidskoder - lav linjehøyde for kompakt visning */
68
- --mobile-status-time-stamp-time: 400 1rem/110% 'Source Sans Pro';
69
- --mobile-h5-title5: 700 1rem/140% 'Source Sans Pro';
70
- --desktop-h6-title6: 600 1.125rem/140% 'Source Sans Pro';
71
- --desktop-label-subdued: 400 1.25rem/130% 'Source Sans Pro';
72
- --desktop-sublabel: 600 1.125rem/130% 'Source Sans 3';
73
- --desktop-sublabel-subdued: 400 1.125rem/130% 'Source Sans 3';
74
- --mobile-h6-title6: 600 1rem/140% 'Source Sans Pro';
75
- --mobile-label-subdued: 400 1.125rem/120% 'Source Sans Pro';
76
- --mobile-sublabel: 600 1rem/120% 'Source Sans 3';
69
+ --mobile-status-time-stamp-time: 400 1rem/110% "Source Sans Pro";
70
+ --mobile-h5-title5: 700 1rem/140% "Source Sans Pro";
71
+ --desktop-h6-title6: 600 1.125rem/140% "Source Sans Pro";
72
+ --desktop-label-subdued: 400 1.25rem/130% "Source Sans Pro";
73
+ --desktop-sublabel: 600 1.125rem/130% "Source Sans 3";
74
+ --desktop-sublabel-subdued: 400 1.125rem/130% "Source Sans 3";
75
+ --mobile-h6-title6: 600 1rem/140% "Source Sans Pro";
76
+ --mobile-label-subdued: 400 1.125rem/120% "Source Sans Pro";
77
+ --mobile-sublabel: 600 1rem/120% "Source Sans 3";
77
78
 
78
79
  /* <label> */
79
- --mobile-sublabel-subdued: 400 1rem/120% 'Source Sans 3';
80
- --mobile-body-strong: 600 1.125rem/150% 'Source Sans Pro';
81
- --mobile-compact-data: 400 1rem/150% 'Source Sans Pro';
80
+ --mobile-sublabel-subdued: 400 1rem/120% "Source Sans 3";
81
+ --mobile-body-strong: 600 1.125rem/150% "Source Sans Pro";
82
+ --mobile-compact-data: 400 1rem/150% "Source Sans Pro";
82
83
 
83
84
  /* Name-value pairs as rendered by an HTML <DT>-tag */
84
- --desktop-definitionlist-type: 600 1.25rem/130% 'Source Sans Pro';
85
+ --desktop-definitionlist-type: 600 1.25rem/130% "Source Sans Pro";
85
86
 
86
87
  /* Data-value in Name-Value-pairs as rendered by a <DD>-tag (definition-data) */
87
- --desktop-definition-list-data: 400 1.25rem/130% 'Source Sans Pro';
88
+ --desktop-definition-list-data: 400 1.25rem/130% "Source Sans Pro";
88
89
 
89
90
  /* Use for inherent "chunking" of text in hmtl lists <LI>, ie. bullet-lists and ordered lists. */
90
- --desktop-textlist: 400 1.25rem/130% 'Source Sans Pro';
91
+ --desktop-textlist: 400 1.25rem/130% "Source Sans Pro";
91
92
 
92
93
  /* Use for the Name part in name-value pairs, the equivalent of html <DT> */
93
- --mobile-definitionlist-type: 600 1.125rem/120% 'Source Sans Pro';
94
- --mobile-definitionlist-data: 400 1.125rem/120% 'Source Sans Pro';
94
+ --mobile-definitionlist-type: 600 1.125rem/120% "Source Sans Pro";
95
+ --mobile-definitionlist-data: 400 1.125rem/120% "Source Sans Pro";
95
96
 
96
97
  /* Renders clumping in ordinary clumps */
97
- --mobile-textlist: 400 1.125rem/120% 'Source Sans Pro';
98
+ --mobile-textlist: 400 1.125rem/120% "Source Sans Pro";
98
99
 
99
100
  /* For use as body text in smaller help components as HelpExpander (detail panel), HelpBubble and HelpTooltip */
100
- --desktop-help-text: 400 1.125rem/140% 'Source Sans Pro';
101
+ --desktop-help-text: 400 1.125rem/140% "Source Sans Pro";
101
102
 
102
103
  /* For use in Help trigger components */
103
- --desktop-help-trigger-text: 600 1.125rem/130% 'Source Sans 3';
104
+ --desktop-help-trigger-text: 600 1.125rem/130% "Source Sans 3";
104
105
 
105
106
  /* For use as body text in smaller help components as HelpExpander (detail panel), HelpBubble and HelpTooltip */
106
- --mobile-help-text: 400 1rem/150% 'Source Sans Pro';
107
+ --mobile-help-text: 400 1rem/150% "Source Sans Pro";
107
108
 
108
109
  /* For use in Help trigger components */
109
- --mobile-help-trigger-text: 600 1rem/120% 'Source Sans 3';
110
- }
110
+ --mobile-help-trigger-text: 600 1rem/120% "Source Sans 3";
111
+
112
+ /* Eyebrow er en stikktittel som gir mulighet til å videreføre et tema eller område over flere sider – slik at man implisitt ser at siden man er på tilhører et gitt tema eller område. */
113
+ --desktop-eyebrow: 400 1.25rem/1.875rem "Source Sans Pro";
114
+
115
+ /* Eyebrow er en stikktittel som gir mulighet til å videreføre et tema eller område over flere sider – slik at man implisitt ser at siden man er på tilhører et gitt tema eller område. */
116
+ --mobile-eyebrow: 400 1.125rem/1.688rem "Source Sans Pro";
117
+ }
package/scss/supernova-legacy/index.css ADDED
@@ -0,0 +1,2 @@
1
+ /* Base tokens */
2
+ @import './styles/legacy-colors.css';
package/scss/supernova-legacy/styles/legacy-colors.css ADDED
@@ -0,0 +1,111 @@
1
+ /* stylelint-disable color-hex-length */
2
+
3
+ /**
4
+ * Color variables retained for backwards compatibility.
5
+ * This file is maintained manually and is not generated by Supernova.io.
6
+ */
7
+
8
+ :root {
9
+ --color-action-graphics-onlight: #188097;
10
+ --color-action-graphics-onlight-hover: #126f87;
11
+ --color-action-border-ondark: #ffffff;
12
+ --color-action-text-ondark: #ffffff;
13
+ --color-action-graphics-ondark: #ffffff;
14
+ --color-notification-background-info: #e4f7f9;
15
+ --color-notification-background-error: #fff2ea;
16
+ --color-notification-background-warning: #fdf8df;
17
+ --color-notification-background-success: #e6f8ee;
18
+ --color-notification-border-info: #08667c;
19
+ --color-notification-border-error: #a31f0e;
20
+ --color-notification-border-warning: #ab7c00;
21
+ --color-notification-border-success: #078141;
22
+ --color-notification-graphics-info: #08667c;
23
+ --color-notification-graphics-error: #a31f0e;
24
+ --color-notification-graphics-warning: #ab7c00;
25
+ --color-notification-graphics-success: #078141;
26
+ --color-notification-status-info: #188097;
27
+ --color-notification-status-error: #c83521;
28
+ --color-notification-status-warning: #ebc840;
29
+ --color-notification-status-success: #099150;
30
+ --color-disabled-background: #d6d4d3;
31
+ --color-disabled-border: #7d7c79;
32
+ --color-destructive-background-emphasized: #f7e1d2;
33
+ --color-destructive-background-normal: #fff2ea;
34
+ --color-destructive-graphics-normal: #c83521;
35
+ --color-destructive-graphics-hover: #b62e1c;
36
+ --color-destructive-text-normal: #b62e1c;
37
+ --color-destructive-text-hover: #a31f0e;
38
+ --color-help-background-normal: #f4ecfe;
39
+ --color-help-graphics-normal: #5c27a1;
40
+ --color-help-border-normal: #5c27a1;
41
+ --color-disabled-graphics: #62625f;
42
+ --color-destructive-border-normal: #c83521;
43
+ --color-action-border-ondark-hover: #e4f7f9;
44
+ --color-action-graphics-ondark-hover: #e4f7f9;
45
+ --color-action-background-transparent-onlight-hoverselected: #126f872b;
46
+ --color-action-border-ondark-focus: #ffffff;
47
+ --color-disabled-border-ondark: #d6d4d3;
48
+ --color-disabled-graphics-ondark: #d6d4d3;
49
+ --color-disabled-text-ondark: #ffffff;
50
+ --color-action-text-onlight: #126f87;
51
+ --color-action-text-onlight-hover: #08667c;
52
+ --color-action-border-onlight: #188097;
53
+ --color-action-border-onlight-hover: #08667c;
54
+ --color-action-border-onlight-focus: #000000;
55
+ --color-action-background-ondark: #ffffff;
56
+ --color-action-background-ondark-hover: #e4f7f9;
57
+ --color-action-background-ondark-selected: #cae7ed;
58
+ --color-action-background-ondark-hoverselected: #afdae3;
59
+ --color-action-background-onlight: #188097;
60
+ --color-action-background-onlight-hover: #08667c;
61
+ --color-action-background-transparent-ondark-hover: #00000026;
62
+ --color-action-background-transparent-onmulticolor-hover: #00000013;
63
+ --color-action-background-transparent-ondark-hoverselected: #000000bf;
64
+ --color-action-background-transparent-onmulticolor-active: #00000026;
65
+ --color-base-background-blueberry: #e4f7f9;
66
+ --color-base-background-cherry: #fff2ea;
67
+ --color-base-background-neutral: #f5f3f3;
68
+ --color-base-background-white: #ffffff;
69
+ --color-base-background-dark-blueberry: #188097;
70
+ --color-base-background-dark-cherry: #c83521;
71
+ --color-base-background-dark-neutral: #2b2c2b;
72
+ --color-base-text-onlight: #000000;
73
+ --color-base-text-ondark: #ffffff;
74
+ --color-base-border-ondark: #d6d4d3;
75
+ --color-base-border-onlight: #7d7c79;
76
+ --color-base-border-onlight-emphasized: #62625f;
77
+ --color-base-graphics-onlight: #000000;
78
+ --color-base-graphics-ondark: #ffffff;
79
+ --color-placeholder-text-onlight: #62625f;
80
+ --color-base-border-onlight-subtle: #d6d4d3;
81
+ --color-base-border-neutral: #d6d4d3;
82
+ --color-base-border-blueberry: #afdae3;
83
+ --color-base-border-cherry: #eec0a5;
84
+ --color-notification-text-info: #08667c;
85
+ --color-notification-text-error: #a31f0e;
86
+ --color-notification-text-warning: #916500;
87
+ --color-notification-text-success: #078141;
88
+ --color-base-border-neutral-emphasized: #bdbab9;
89
+ --color-notification-status-draft: #7d7c79;
90
+ --color-help-background-transparent-onlight-hover-selected: #6c38b333;
91
+ --color-help-graphics-dark: #4c1b8c;
92
+ --color-help-border-dark: #4c1b8c;
93
+ --color-help-graphics-verydark: #3c1471;
94
+ --color-help-border-verydark: #3c1471;
95
+ --color-action-background-onlight-active: #06596c;
96
+ --color-action-background-stroke-onlight: #126f87;
97
+ --color-base-text-onlight-subdued: #474745;
98
+ --color-action-graphics-emphasized-onlight: #08667c;
99
+ --color-base-background-stroke-dark-cherry: #b62e1c;
100
+ --color-base-background-stroke-dark-blueberry: #126f87;
101
+ --color-base-background-stroke-dark-neutral: #000000;
102
+ --color-destructive-graphics-emphasized-onlight: #a31f0e;
103
+ --color-notification-background-info-hover: #cae7ed;
104
+ --color-notification-background-info-active: #afdae3;
105
+ --color-notification-background-error-hover: #f7e1d2;
106
+ --color-notification-background-error-active: #eec0a5;
107
+ --color-notification-background-warning-hover: #fcf2bf;
108
+ --color-notification-background-warning-active: #f9ea9f;
109
+ --color-notification-background-success-hover: #c2edd6;
110
+ --color-notification-background-success-active: #9de2bf;
111
+ }