superdesk-ui-framework 2.4.20 → 3.0.1-beta.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 (443) hide show
  1. package/app/img/spinner.svg +3 -0
  2. package/app/img/themes/theme-base.svg +1 -0
  3. package/app/img/themes/theme-contrast.svg +45 -0
  4. package/app/img/themes/theme-dark.svg +1 -0
  5. package/app/img/themes/theme-light.svg +1 -0
  6. package/app/index.js +2 -1
  7. package/app/scripts/modals.js +1 -0
  8. package/app/styles/_accessibility.scss +305 -3
  9. package/app/styles/_alerts.scss +227 -97
  10. package/app/styles/_avatar.scss +60 -33
  11. package/app/styles/_badge.scss +55 -26
  12. package/app/styles/_big-icon-font.scss +2 -1
  13. package/app/styles/_boxed-list.scss +41 -20
  14. package/app/styles/_buttons.scss +544 -1026
  15. package/app/styles/_carousel.scss +19 -13
  16. package/app/styles/_content-divider.scss +125 -0
  17. package/app/styles/_design-tokens.scss +2 -0
  18. package/app/styles/_drag-drop.scss +1 -1
  19. package/app/styles/_empty-states.scss +9 -1
  20. package/app/styles/_helpers.scss +650 -308
  21. package/app/styles/_icon-font.scss +5 -5
  22. package/app/styles/_icon-labels.scss +6 -7
  23. package/app/styles/_labels.scss +65 -52
  24. package/app/styles/_loaders.scss +28 -0
  25. package/app/styles/_master-desk.scss +11 -11
  26. package/app/styles/_mixins.scss +21 -13
  27. package/app/styles/_modals.scss +103 -116
  28. package/app/styles/_normalize.scss +1 -0
  29. package/app/styles/_panel-info.scss +21 -16
  30. package/app/styles/_popover.scss +2 -2
  31. package/app/styles/_pr-superdesk-theme.scss +4 -0
  32. package/app/styles/_publisher-styles.scss +182 -0
  33. package/app/styles/_reboot.scss +1 -0
  34. package/app/styles/_sd-tag-input.scss +184 -97
  35. package/app/styles/_simple-list.scss +41 -19
  36. package/app/styles/_tables.scss +5 -4
  37. package/app/styles/_tabs.scss +24 -75
  38. package/app/styles/_tag-labels.scss +47 -47
  39. package/app/styles/_thumb-carousel.scss +11 -10
  40. package/app/styles/_toggle-box.scss +52 -46
  41. package/app/styles/_toggle-button.scss +42 -0
  42. package/app/styles/_tooltips.scss +55 -98
  43. package/app/styles/_variables.scss +0 -1
  44. package/app/styles/app.scss +16 -1
  45. package/app/styles/components/_card-item.scss +41 -28
  46. package/app/styles/components/_list-item.scss +24 -94
  47. package/app/styles/components/_sd-circular-progress.scss +1 -1
  48. package/app/styles/components/_sd-collapse-box.scss +6 -33
  49. package/app/styles/components/_sd-comment-box.scss +1 -1
  50. package/app/styles/components/_sd-dropzone.scss +78 -0
  51. package/app/styles/components/_sd-grid-item.scss +78 -180
  52. package/app/styles/components/_sd-loader.scss +1 -16
  53. package/app/styles/components/_sd-media-carousel.scss +10 -12
  54. package/app/styles/components/_sd-photo-preview.scss +13 -13
  55. package/app/styles/components/_sd-searchbar.scss +43 -127
  56. package/app/styles/components/_sd-toaster.scss +13 -6
  57. package/app/styles/components/_subnav.scss +111 -117
  58. package/app/styles/components/_theme-selector.scss +189 -0
  59. package/app/styles/components/sd-slider.scss +11 -11
  60. package/app/styles/design-tokens/_design-tokens-general.scss +77 -0
  61. package/app/styles/design-tokens/_new-colors.scss +700 -0
  62. package/app/styles/dropdowns/_basic-dropdown.scss +119 -76
  63. package/app/styles/dropdowns/_navigation_dropdown.scss +7 -8
  64. package/app/styles/dropdowns/_nested-dropdown.scss +30 -16
  65. package/app/styles/dropdowns/_other_dropdown.scss +1 -1
  66. package/app/styles/editor/_editor-buttons.scss +54 -0
  67. package/app/styles/editor/_editor-themes.scss +437 -0
  68. package/app/styles/form-elements/_autocomplete.scss +12 -41
  69. package/app/styles/form-elements/_checkbox.scss +180 -245
  70. package/app/styles/form-elements/_forms-general.scss +92 -20
  71. package/app/styles/form-elements/_inputs.scss +96 -350
  72. package/app/styles/form-elements/_radio.scss +6 -6
  73. package/app/styles/form-elements/_select-grid.scss +16 -14
  74. package/app/styles/form-elements/_switch.scss +26 -47
  75. package/app/styles/grids/_basic-grid.scss +52 -26
  76. package/app/styles/grids/_grid-layout.scss +93 -58
  77. package/app/styles/grids/_layout-grid.scss +6 -6
  78. package/app/styles/grids/_sd-kanban-list.scss +2 -2
  79. package/app/styles/interface-elements/_side-panel.scss +115 -83
  80. package/app/styles/layout/_basic-layout.scss +11 -19
  81. package/app/styles/layout/_container.scss +32 -0
  82. package/app/styles/layout/_editor.scss +306 -0
  83. package/app/styles/layout/_general.scss +4 -5
  84. package/app/styles/menus/_sd-content-navigation.scss +1 -1
  85. package/app/styles/menus/_sd-left-navigation.scss +34 -18
  86. package/app/styles/menus/_sd-sidebar-menu.scss +117 -25
  87. package/app/styles/menus/_sd-top-menu.scss +3 -3
  88. package/app/styles/primereact/_pr-datepicker.scss +60 -9
  89. package/app/styles/primereact/_pr-dialog.scss +99 -30
  90. package/app/styles/primereact/_pr-dropdown.scss +177 -19
  91. package/app/styles/primereact/_pr-general.scss +14 -7
  92. package/app/styles/primereact/_pr-menu.scss +9 -12
  93. package/app/styles/variables/_colors.scss +124 -516
  94. package/app/styles/variables/_dimensions.scss +82 -4
  95. package/app/styles/variables/_form-elements.scss +0 -2
  96. package/app/styles/variables/_typography.scss +2 -0
  97. package/app-typescript/components/Alert.tsx +16 -1
  98. package/app-typescript/components/Avatar.tsx +21 -0
  99. package/app-typescript/components/ButtonGroup.tsx +9 -5
  100. package/app-typescript/components/Carousel.tsx +1 -1
  101. package/app-typescript/components/CheckButtonGroup.tsx +19 -5
  102. package/app-typescript/components/CheckGroup.tsx +2 -1
  103. package/app-typescript/components/Checkbox.tsx +7 -3
  104. package/app-typescript/components/CheckboxButton.tsx +9 -2
  105. package/app-typescript/components/ContentDivider.tsx +34 -0
  106. package/app-typescript/components/DatePicker.tsx +6 -2
  107. package/app-typescript/components/DropZone.tsx +89 -0
  108. package/app-typescript/components/Dropdown.tsx +30 -11
  109. package/app-typescript/components/DropdownFirst.tsx +1 -1
  110. package/app-typescript/components/Editor/EditorButton.tsx +34 -0
  111. package/app-typescript/components/Form/FormGroup.tsx +33 -0
  112. package/app-typescript/components/Form/FormItem.tsx +20 -0
  113. package/app-typescript/components/Form/FormLabel.tsx +22 -0
  114. package/app-typescript/components/Form/FormRow.tsx +40 -0
  115. package/app-typescript/components/Form/FormText.tsx +15 -0
  116. package/app-typescript/components/Form/index.tsx +5 -0
  117. package/app-typescript/components/IconButton.tsx +26 -12
  118. package/app-typescript/components/Input.tsx +38 -20
  119. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
  120. package/app-typescript/components/Layouts/AuthoringFrame.tsx +72 -0
  121. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
  122. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
  123. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
  124. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
  125. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
  126. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +15 -0
  127. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
  128. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
  129. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
  130. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +38 -0
  131. package/app-typescript/components/Layouts/AuthoringMain.tsx +46 -0
  132. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
  133. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
  134. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +15 -0
  135. package/app-typescript/components/Layouts/Container.tsx +30 -0
  136. package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
  137. package/app-typescript/components/Layouts/LayoutContainer.tsx +18 -0
  138. package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
  139. package/app-typescript/components/Layouts/MainPanel.tsx +22 -0
  140. package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
  141. package/app-typescript/components/Layouts/Panel.tsx +207 -0
  142. package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
  143. package/app-typescript/components/Layouts/index.tsx +25 -0
  144. package/app-typescript/components/LeftMenu.tsx +123 -49
  145. package/app-typescript/components/Lists/BoxedList.tsx +133 -0
  146. package/app-typescript/components/Lists/SimpleList.tsx +54 -0
  147. package/app-typescript/components/Lists/index.tsx +2 -0
  148. package/app-typescript/components/Modal.tsx +7 -2
  149. package/app-typescript/components/MultiSelect.tsx +69 -0
  150. package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
  151. package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
  152. package/app-typescript/components/Navigation/SideBarTabs.tsx +77 -0
  153. package/app-typescript/components/Navigation/index.tsx +3 -0
  154. package/app-typescript/components/RadioButtonGroup.tsx +113 -0
  155. package/app-typescript/components/RadioGroup.tsx +69 -0
  156. package/app-typescript/components/Select.tsx +7 -9
  157. package/app-typescript/components/SelectGrid.tsx +3 -3
  158. package/app-typescript/components/SlidingToolbar.tsx +8 -2
  159. package/app-typescript/components/Spinner.tsx +0 -1
  160. package/app-typescript/components/SubNav.tsx +25 -4
  161. package/app-typescript/components/Switch.tsx +34 -12
  162. package/app-typescript/components/TabCustom.tsx +40 -89
  163. package/app-typescript/components/TabList.tsx +18 -43
  164. package/app-typescript/components/Tag.tsx +31 -8
  165. package/app-typescript/components/Text/Heading.tsx +67 -0
  166. package/app-typescript/components/Text/Text.tsx +36 -0
  167. package/app-typescript/components/ThemeSelector.tsx +113 -0
  168. package/app-typescript/components/TimePicker.tsx +3 -3
  169. package/app-typescript/components/Togglebox.tsx +8 -6
  170. package/app-typescript/components/TreeSelect.tsx +330 -0
  171. package/app-typescript/index.ts +16 -4
  172. package/dist/avatar-2.jpg +0 -0
  173. package/dist/avatar-3.jpg +0 -0
  174. package/dist/avatar-4.jpg +0 -0
  175. package/dist/avatar-5.jpg +0 -0
  176. package/dist/avatar-6.jpg +0 -0
  177. package/dist/avatar_64.png +0 -0
  178. package/dist/components/basic-grid.html +1 -1
  179. package/dist/components/checkbox.html +1 -1
  180. package/dist/examples.bundle.css +1933 -2393
  181. package/dist/examples.bundle.js +23583 -15736
  182. package/dist/index.html +9 -12
  183. package/dist/playgrounds/boxed-list.html +1 -1
  184. package/dist/playgrounds/cards.html +9 -4
  185. package/dist/playgrounds/editor-3-test.html +15 -0
  186. package/dist/playgrounds/form-layout.html +9 -7
  187. package/dist/playgrounds/layout-test-2.html +40 -36
  188. package/dist/playgrounds/list-item-test.html +1 -1
  189. package/dist/playgrounds/master-desk.html +1 -3
  190. package/dist/playgrounds/photo-desk.html +33 -33
  191. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
  192. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  193. package/dist/playgrounds/react-playgrounds/Index.tsx +5 -1
  194. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  195. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
  196. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +30 -39
  197. package/dist/playgrounds/react-playgrounds/TestGround.tsx +232 -23
  198. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +300 -0
  199. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
  200. package/dist/playgrounds/tags-input.html +1 -1
  201. package/dist/react/Alerts.tsx +123 -23
  202. package/dist/react/Avatar.tsx +314 -127
  203. package/dist/react/BoxedList.tsx +362 -0
  204. package/dist/react/ButtonGroups.tsx +66 -65
  205. package/dist/react/Buttons.tsx +62 -247
  206. package/dist/react/Carousel.tsx +2 -3
  207. package/dist/react/Checkboxs.tsx +66 -25
  208. package/dist/react/Container.tsx +143 -0
  209. package/dist/react/ContentDivider.tsx +178 -0
  210. package/dist/react/DropZone.tsx +103 -0
  211. package/dist/react/Heading.tsx +106 -0
  212. package/dist/react/IconButtons.tsx +49 -42
  213. package/dist/react/Index.tsx +118 -11
  214. package/dist/react/Inputs.tsx +9 -24
  215. package/dist/react/LeftNavigations.tsx +161 -9
  216. package/dist/react/ListItems.tsx +3 -3
  217. package/dist/react/Modal.tsx +173 -19
  218. package/dist/react/MultiSelect.tsx +193 -0
  219. package/dist/react/NavButtons.tsx +4 -4
  220. package/dist/react/Panel.tsx +366 -0
  221. package/dist/react/QuickNavigationBar.tsx +142 -0
  222. package/dist/react/RadioGroup.tsx +351 -0
  223. package/dist/react/SelectWithTemplate.tsx +1 -1
  224. package/dist/react/Selects.tsx +3 -23
  225. package/dist/react/SimpleList.tsx +148 -0
  226. package/dist/react/SubNav.tsx +69 -20
  227. package/dist/react/Tabs.tsx +72 -248
  228. package/dist/react/Tags.tsx +45 -4
  229. package/dist/react/Text.tsx +134 -0
  230. package/dist/react/Tooltips.tsx +1 -1
  231. package/dist/react/TreeSelect.tsx +178 -0
  232. package/dist/react.html +4 -0
  233. package/dist/superdesk-ui.bundle.css +28522 -23998
  234. package/dist/superdesk-ui.bundle.js +7546 -3667
  235. package/dist/vendor.bundle.js +64 -68
  236. package/examples/css/docs-page.css +205 -46
  237. package/examples/img/avatar-2.jpg +0 -0
  238. package/examples/img/avatar-3.jpg +0 -0
  239. package/examples/img/avatar-4.jpg +0 -0
  240. package/examples/img/avatar-5.jpg +0 -0
  241. package/examples/img/avatar-6.jpg +0 -0
  242. package/examples/index.html +9 -12
  243. package/examples/index.js +20 -0
  244. package/examples/pages/components/basic-grid.html +1 -1
  245. package/examples/pages/components/checkbox.html +1 -1
  246. package/examples/pages/playgrounds/boxed-list.html +1 -1
  247. package/examples/pages/playgrounds/cards.html +9 -4
  248. package/examples/pages/playgrounds/editor-3-test.html +15 -0
  249. package/examples/pages/playgrounds/form-layout.html +9 -7
  250. package/examples/pages/playgrounds/layout-test-2.html +40 -36
  251. package/examples/pages/playgrounds/list-item-test.html +1 -1
  252. package/examples/pages/playgrounds/master-desk.html +1 -3
  253. package/examples/pages/playgrounds/photo-desk.html +33 -33
  254. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
  255. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  256. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +5 -1
  257. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  258. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
  259. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +30 -39
  260. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +232 -23
  261. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +300 -0
  262. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
  263. package/examples/pages/playgrounds/tags-input.html +1 -1
  264. package/examples/pages/react/Alerts.tsx +123 -23
  265. package/examples/pages/react/Avatar.tsx +314 -127
  266. package/examples/pages/react/BoxedList.tsx +362 -0
  267. package/examples/pages/react/ButtonGroups.tsx +66 -65
  268. package/examples/pages/react/Buttons.tsx +62 -247
  269. package/examples/pages/react/Carousel.tsx +2 -3
  270. package/examples/pages/react/Checkboxs.tsx +66 -25
  271. package/examples/pages/react/Container.tsx +143 -0
  272. package/examples/pages/react/ContentDivider.tsx +178 -0
  273. package/examples/pages/react/DropZone.tsx +103 -0
  274. package/examples/pages/react/Heading.tsx +106 -0
  275. package/examples/pages/react/IconButtons.tsx +49 -42
  276. package/examples/pages/react/Index.tsx +118 -11
  277. package/examples/pages/react/Inputs.tsx +9 -24
  278. package/examples/pages/react/LeftNavigations.tsx +161 -9
  279. package/examples/pages/react/ListItems.tsx +3 -3
  280. package/examples/pages/react/Modal.tsx +173 -19
  281. package/examples/pages/react/MultiSelect.tsx +193 -0
  282. package/examples/pages/react/NavButtons.tsx +4 -4
  283. package/examples/pages/react/Panel.tsx +366 -0
  284. package/examples/pages/react/QuickNavigationBar.tsx +142 -0
  285. package/examples/pages/react/RadioGroup.tsx +351 -0
  286. package/examples/pages/react/SelectWithTemplate.tsx +1 -1
  287. package/examples/pages/react/Selects.tsx +3 -23
  288. package/examples/pages/react/SimpleList.tsx +148 -0
  289. package/examples/pages/react/SubNav.tsx +69 -20
  290. package/examples/pages/react/Tabs.tsx +72 -248
  291. package/examples/pages/react/Tags.tsx +45 -4
  292. package/examples/pages/react/Text.tsx +134 -0
  293. package/examples/pages/react/Tooltips.tsx +1 -1
  294. package/examples/pages/react/TreeSelect.tsx +178 -0
  295. package/examples/pages/react.html +4 -0
  296. package/images/avatar_64.png +0 -0
  297. package/package.json +10 -6
  298. package/react/components/Alert.d.ts +3 -0
  299. package/react/components/Alert.js +9 -1
  300. package/react/components/Avatar.d.ts +9 -0
  301. package/react/components/Avatar.js +19 -1
  302. package/react/components/ButtonGroup.d.ts +4 -2
  303. package/react/components/ButtonGroup.js +5 -3
  304. package/react/components/Carousel.js +1 -1
  305. package/react/components/CheckButtonGroup.d.ts +3 -1
  306. package/react/components/CheckButtonGroup.js +8 -2
  307. package/react/components/CheckGroup.d.ts +1 -0
  308. package/react/components/CheckGroup.js +1 -1
  309. package/react/components/Checkbox.d.ts +2 -1
  310. package/react/components/Checkbox.js +2 -2
  311. package/react/components/CheckboxButton.d.ts +1 -0
  312. package/react/components/CheckboxButton.js +2 -2
  313. package/react/components/ContentDivider.d.ts +12 -0
  314. package/react/components/ContentDivider.js +66 -0
  315. package/react/components/DatePicker.js +7 -2
  316. package/react/components/DropZone.d.ts +25 -0
  317. package/react/components/DropZone.js +93 -0
  318. package/react/components/Dropdown.d.ts +1 -0
  319. package/react/components/Dropdown.js +28 -23
  320. package/react/components/DropdownFirst.js +1 -1
  321. package/react/components/Form/FormGroup.d.ts +13 -0
  322. package/react/components/Form/FormGroup.js +61 -0
  323. package/react/components/Form/FormItem.d.ts +9 -0
  324. package/react/components/Form/FormItem.js +54 -0
  325. package/react/components/Form/FormLabel.d.ts +10 -0
  326. package/react/components/Form/FormLabel.js +54 -0
  327. package/react/components/Form/FormRow.d.ts +17 -0
  328. package/react/components/Form/FormRow.js +62 -0
  329. package/react/components/Form/FormText.d.ts +8 -0
  330. package/react/components/Form/FormText.js +47 -0
  331. package/react/components/Form/index.d.ts +5 -0
  332. package/react/components/Form/index.js +12 -0
  333. package/react/components/IconButton.d.ts +9 -2
  334. package/react/components/IconButton.js +13 -5
  335. package/react/components/Input.d.ts +20 -6
  336. package/react/components/Input.js +10 -13
  337. package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
  338. package/react/components/Layouts/AuthorinInnerSideBar.js +47 -0
  339. package/react/components/Layouts/AuthoringFrame.d.ts +18 -0
  340. package/react/components/Layouts/AuthoringFrame.js +56 -0
  341. package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
  342. package/react/components/Layouts/AuthoringFrameContainer.js +47 -0
  343. package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
  344. package/react/components/Layouts/AuthoringFrameLeftBar.js +47 -0
  345. package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
  346. package/react/components/Layouts/AuthoringFrameMain.js +47 -0
  347. package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
  348. package/react/components/Layouts/AuthoringFrameNavBar.js +47 -0
  349. package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
  350. package/react/components/Layouts/AuthoringFrameOverlay.js +47 -0
  351. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +8 -0
  352. package/react/components/Layouts/AuthoringFrameRightBar.js +47 -0
  353. package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
  354. package/react/components/Layouts/AuthoringFrameSidePanel.js +56 -0
  355. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
  356. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +56 -0
  357. package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
  358. package/react/components/Layouts/AuthoringInnerBody.js +47 -0
  359. package/react/components/Layouts/AuthoringInnerHeader.d.ts +13 -0
  360. package/react/components/{RadioButton.js → Layouts/AuthoringInnerHeader.js} +20 -22
  361. package/react/components/Layouts/AuthoringMain.d.ts +12 -0
  362. package/react/components/Layouts/AuthoringMain.js +53 -0
  363. package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
  364. package/react/components/Layouts/AuthoringMainContainer.js +47 -0
  365. package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
  366. package/react/components/Layouts/AuthoringMainContent.js +47 -0
  367. package/react/components/Layouts/AuthoringMainToolBar.d.ts +8 -0
  368. package/react/components/Layouts/AuthoringMainToolBar.js +47 -0
  369. package/react/components/Layouts/Container.d.ts +14 -0
  370. package/react/components/Layouts/Container.js +60 -0
  371. package/react/components/Layouts/HeaderPanel.d.ts +8 -0
  372. package/react/components/Layouts/HeaderPanel.js +47 -0
  373. package/react/components/Layouts/LayoutContainer.d.ts +8 -0
  374. package/react/components/Layouts/LayoutContainer.js +47 -0
  375. package/react/components/Layouts/LeftPanel.d.ts +9 -0
  376. package/react/components/Layouts/LeftPanel.js +54 -0
  377. package/react/components/Layouts/MainPanel.d.ts +10 -0
  378. package/react/components/Layouts/MainPanel.js +50 -0
  379. package/react/components/Layouts/PageLayout.d.ts +16 -0
  380. package/react/components/Layouts/PageLayout.js +64 -0
  381. package/react/components/Layouts/Panel.d.ts +65 -0
  382. package/react/components/Layouts/Panel.js +166 -0
  383. package/react/components/Layouts/RightPanel.d.ts +9 -0
  384. package/react/components/Layouts/RightPanel.js +47 -0
  385. package/react/components/Layouts/index.d.ts +24 -0
  386. package/react/components/Layouts/index.js +55 -0
  387. package/react/components/LeftMenu.d.ts +8 -3
  388. package/react/components/LeftMenu.js +55 -16
  389. package/react/components/Lists/BoxedList.d.ts +36 -0
  390. package/react/components/Lists/BoxedList.js +137 -0
  391. package/react/components/Lists/SimpleList.d.ts +21 -0
  392. package/react/components/Lists/SimpleList.js +78 -0
  393. package/react/components/Lists/index.d.ts +2 -0
  394. package/react/components/Lists/index.js +9 -0
  395. package/react/components/Modal.d.ts +3 -1
  396. package/react/components/Modal.js +3 -2
  397. package/react/components/Navigation/QuickNavBar.d.ts +24 -0
  398. package/react/components/Navigation/QuickNavBar.js +113 -0
  399. package/react/components/Navigation/SideBarMenu.d.ts +21 -0
  400. package/react/components/Navigation/SideBarMenu.js +77 -0
  401. package/react/components/Navigation/SideBarTabs.d.ts +22 -0
  402. package/react/components/Navigation/SideBarTabs.js +82 -0
  403. package/react/components/Navigation/index.d.ts +3 -0
  404. package/react/components/Navigation/index.js +8 -0
  405. package/react/components/RadioButtonGroup.d.ts +29 -0
  406. package/react/components/RadioButtonGroup.js +89 -0
  407. package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
  408. package/react/components/{Radio.js → RadioGroup.js} +15 -11
  409. package/react/components/Select.d.ts +1 -1
  410. package/react/components/Select.js +2 -9
  411. package/react/components/SelectGrid.js +3 -3
  412. package/react/components/SlidingToolbar.d.ts +1 -1
  413. package/react/components/SlidingToolbar.js +11 -1
  414. package/react/components/Spinner.d.ts +0 -1
  415. package/react/components/Spinner.js +0 -1
  416. package/react/components/SubNav.d.ts +8 -1
  417. package/react/components/SubNav.js +22 -4
  418. package/react/components/Switch.d.ts +4 -1
  419. package/react/components/Switch.js +19 -7
  420. package/react/components/TabCustom.d.ts +11 -22
  421. package/react/components/TabCustom.js +23 -52
  422. package/react/components/TabList.d.ts +2 -11
  423. package/react/components/TabList.js +11 -32
  424. package/react/components/Tag.d.ts +3 -3
  425. package/react/components/Tag.js +16 -5
  426. package/react/components/TagInput.d.ts +0 -1
  427. package/react/components/Text/Heading.d.ts +15 -0
  428. package/react/components/Text/Heading.js +77 -0
  429. package/react/components/Text/Text.d.ts +15 -0
  430. package/react/components/Text/Text.js +65 -0
  431. package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
  432. package/react/components/ThemeSelector.js +112 -0
  433. package/react/components/TimePicker.js +2 -2
  434. package/react/components/Togglebox.d.ts +1 -0
  435. package/react/components/Togglebox.js +9 -2
  436. package/react/index.d.ts +15 -4
  437. package/react/index.js +36 -6
  438. package/app/styles/_editor-themes.scss +0 -326
  439. package/app/styles/variables/_design-tokens-general.scss +0 -76
  440. package/app-typescript/components/Radio.tsx +0 -57
  441. package/app-typescript/components/RadioButton.tsx +0 -57
  442. package/dist/react/Radios.tsx +0 -391
  443. package/examples/pages/react/Radios.tsx +0 -391
@@ -5,10 +5,10 @@
5
5
  .subnav {
6
6
  position: relative;
7
7
  display: flex;
8
- height:$subnav-height;
8
+ height: $subnav-height;
9
9
  background: $subnav-background;
10
10
  border-bottom: 0px;
11
- @include box-shadow-both(0 1px 3px rgba(0,0,0,0.07), 0 1px 0 0 rgba(0,0,0,0.1));
11
+ box-shadow: var(--sd-shadow__subnav);
12
12
  @include transition(all, 0.3s, ease);
13
13
  z-index: 3;
14
14
  align-items: center;
@@ -31,11 +31,6 @@
31
31
  background: $subnav-background-blue-grey !important;
32
32
  color: $white;
33
33
  }
34
- &--dark-ui, &--darkUi {
35
- background: $subnav-background-darkUi !important;
36
- @include box-shadow-both(0 1px 3px rgba(0,0,0,0.12), 0 1px 0 0 rgba(0,0,0,0.1));
37
- color: $white;
38
- }
39
34
  &--absolute {
40
35
  position: absolute;
41
36
  top:48px;
@@ -44,7 +39,7 @@
44
39
  }
45
40
  + .subnav,
46
41
  &--lower-z-index {
47
- z-index: 2 !important;
42
+ z-index: 2;
48
43
  }
49
44
  .sd-check__group {
50
45
  padding: 0;
@@ -57,7 +52,7 @@
57
52
  flex-grow: 1;
58
53
  }
59
54
  .subnav__page-title {
60
- padding: 1rem 2rem;
55
+ padding: 0 1.6rem;
61
56
  color: inherit;
62
57
  font-size: 1.8rem;
63
58
  line-height: 2.8rem;
@@ -72,6 +67,23 @@
72
67
  flex-grow: 1;
73
68
  }
74
69
 
70
+ .subnav__divider {
71
+ display: inline-flex;
72
+ height: 100%;
73
+ &--small {
74
+ width: $sd-base-increment * 1.5;
75
+ }
76
+ &--medium {
77
+ width: $sd-base-increment * 2;
78
+ }
79
+ &--large {
80
+ width: $sd-base-increment * 3;
81
+ }
82
+ &--x-large {
83
+ width: $sd-base-increment * 4;
84
+ }
85
+ }
86
+
75
87
 
76
88
  .subnav {
77
89
  &.subnav--level2 {
@@ -81,6 +93,9 @@
81
93
  z-index: 2;
82
94
  box-shadow: none;
83
95
  }
96
+ .sd-nav-tabs {
97
+ box-shadow: none;
98
+ }
84
99
  }
85
100
 
86
101
  .subnav__sliding-toolbar {
@@ -90,30 +105,8 @@
90
105
  // ============================================================================
91
106
  // NEW NAVBUTTONS
92
107
  // ============================================================================
93
-
94
- :root {
95
- --color-navbutton-border: rgba(0,0,0,.1);
96
- --color-navbutton-bg-hover: rgba(0,0,0, 0.05);
97
- --color-navbutton-bg-active: rgba(255,255,255,1);
98
- --color-navbutton-dropdown-open-bg: rgba(255, 255, 255, 1);
99
- --color-navbutton-bg-100: rgba(0,0,0,.06);
100
- --color-navbutton-bg-100-hover: rgba(0,0,0,.12);
101
- }
102
-
103
- .sd-top-menu {
104
- --color-navbutton-border: rgba(255,255,255,0.06);
105
- }
106
-
107
- .subnav--dark-ui,
108
- [data-theme="dark-ui"] {
109
- --color-navbutton-border: rgba(0,0,0,.15);
110
- --color-navbutton-bg-hover: rgba(0,0,0,.1);
111
- --color-navbutton-bg-active: rgba(255,255,255,.08);
112
- --color-navbutton-bg-100: rgba(0,0,0,.1);
113
- --color-navbutton-bg-100-hover: rgba(0,0,0,.2);
114
- }
115
108
 
116
- $navbutton-border-color: var(--color-navbutton-border);
109
+ $navbutton-border-color: var(--sd-colour-line--x-light);
117
110
  $navbutton-bg-color: transparent;
118
111
  $navbutton-transition: all 0.2s ease-out, color 0.1s ease-out;
119
112
  $navbutton-bg-color-hover: var(--color-navbutton-bg-hover);
@@ -121,56 +114,56 @@ $navbutton-bg-color-active: var(--color-navbutton-bg-active);
121
114
  $navbutton-bg-color-darker: var(--color-navbutton-bg-100);
122
115
  $navbutton-bg-color-darker-hover: var(--color-navbutton-bg-100-hover);
123
116
 
124
- $navbutton-focus-box-shadow: inset 0 0 0 1px rgba(94, 169, 200, 0.7), 0 0 0 2px rgba(94, 169, 200, 0.3);
117
+ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-70), 0 0 0 2px $sd-colour--focus-shadow;
125
118
 
126
119
  @mixin navbutton-base {
127
- position: relative;
128
- height: $subnav-height;
129
- width: 4.8rem;
120
+ position: relative;
121
+ height: $subnav-height;
122
+ width: 4.8rem;
130
123
 
131
- display: inline-flex;
132
- flex-direction: row;
133
- align-items: center;
134
- justify-content: center;
135
-
136
- background: $navbutton-bg-color;
137
- color: inherit;
138
- text-align: center;
124
+ display: inline-flex;
125
+ flex-direction: row;
126
+ align-items: center;
127
+ justify-content: center;
139
128
 
140
- text-decoration: none;
141
- border: 0;
142
- border: 1px solid $navbutton-border-color;
143
- border-width: 0 0 0 1px;
144
- cursor: pointer;
145
- transition: $navbutton-transition;
129
+ background: $navbutton-bg-color;
130
+ color: inherit;
131
+ text-align: center;
146
132
 
147
- i {
148
- opacity: 0.75;
149
- vertical-align: baseline !important;
150
- transition: opacity 0.2s ease-out;
151
- }
152
- [class^="big-icon--"], [class*=" big-icon--"],
153
- [class^="icon-"], [class*=" icon-"] {
154
- color: currentColor;
155
- }
156
- &:hover {
157
- background: $navbutton-bg-color-hover;
158
- > i {
159
- opacity: 1;
160
- }
161
- }
162
- &:active{
163
- background: $navbutton-bg-color-active;
164
- > i {
165
- opacity: 1;
166
- }
167
- }
168
- &:focus-visible {
169
- box-shadow: $navbutton-focus-box-shadow;
170
- > i {
171
- opacity: 1;
172
- }
173
- }
133
+ text-decoration: none;
134
+ border: 0;
135
+ border: 0px solid $navbutton-border-color;
136
+ border-inline-width: 1px 0;
137
+ cursor: pointer;
138
+ transition: $navbutton-transition;
139
+
140
+ i {
141
+ opacity: 0.75;
142
+ vertical-align: baseline !important;
143
+ transition: opacity 0.2s ease-out;
144
+ }
145
+ [class^="big-icon--"], [class*=" big-icon--"],
146
+ [class^="icon-"], [class*=" icon-"] {
147
+ color: currentColor;
148
+ }
149
+ &:hover {
150
+ background: $navbutton-bg-color-hover;
151
+ > i {
152
+ opacity: 1;
153
+ }
154
+ }
155
+ &:active {
156
+ background: $navbutton-bg-color-active;
157
+ > i {
158
+ opacity: 1;
159
+ }
160
+ }
161
+ &:focus-visible {
162
+ box-shadow: $navbutton-focus-box-shadow;
163
+ > i {
164
+ opacity: 1;
165
+ }
166
+ }
174
167
  }
175
168
 
176
169
  .sd-navbtn {
@@ -198,16 +191,16 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px rgba(94, 169, 200, 0.7), 0 0 0 2px
198
191
  }
199
192
  }
200
193
  &.sd-navbtn--primary, &.sd-navbtn--active {
201
- background: $sd-blue;
202
- border-color: darken($sd-blue, 5%);
194
+ background: $sd-colour-interactive;
195
+ border-color: var(--sd-colour-interactive--darken-10);
203
196
  color: $white;
204
197
  &:hover {
205
- background-color: darken($sd-blue, 5%);
206
- border-color: darken($sd-blue, 10%);
198
+ background-color: var(--sd-colour-interactive--darken-10);
199
+ border-color: var(--sd-colour-interactive--darken-20);
207
200
  }
208
201
  &:active{
209
- background-color: lighten($sd-blue, 5%);
210
- border-color: darken($sd-blue, 5%);
202
+ background-color: var(--sd-colour-interactive--lighten-10);
203
+ border-color: var(--sd-colour-interactive--darken-10);
211
204
  }
212
205
 
213
206
  }
@@ -266,17 +259,18 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px rgba(94, 169, 200, 0.7), 0 0 0 2px
266
259
 
267
260
  .dropdown.open {
268
261
  .sd-navbtn {
269
- background-color: var(--color-navbutton-dropdown-open-bg);
262
+ background-color: var(--color-dropdown-menu-Bg);
270
263
  position: relative;
271
- box-shadow: 0 8px 0 0px var(--color-navbutton-dropdown-open-bg), -2px -1px 8px -2px rgba(0, 0, 0, 0.24), 3px -1px 8px -2px rgba(0, 0, 0, 0.24);
264
+ box-shadow: 0 8px 0 0px var(--color-dropdown-menu-Bg), -2px -1px 8px -2px rgba(0, 0, 0, 0.24), 3px -1px 8px -2px rgba(0, 0, 0, 0.24);
272
265
  border-color: transparent !important;
273
266
  z-index: 1001;
274
267
  i {
275
268
  opacity: 1;
276
- color: $sd-blue;
269
+ color: $sd-colour-interactive;
277
270
  }
278
271
  &.sd-navbtn--textual {
279
272
  .sd-navbtn__text {
273
+ color: $sd-colour-interactive;
280
274
  &::after {
281
275
  opacity: 1;
282
276
  }
@@ -287,18 +281,22 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px rgba(94, 169, 200, 0.7), 0 0 0 2px
287
281
 
288
282
  .navbtn {
289
283
  position: relative;
290
- display: inline-block;
284
+ display: inline-flex;
285
+ flex-direction: row;
286
+ align-items: center;
287
+ justify-content: center;
291
288
  height: $subnav-height;
292
289
  width: 4.8rem;
293
- padding: 0 10px;
290
+ padding: 0;
294
291
  background: transparent;
295
- color: inherit;
292
+ color: $sd-text;
296
293
  text-align: center;
297
- line-height: 5.6rem;
298
294
  text-decoration: none;
299
- border: 0;
300
- border-left: 1px solid rgba(0,0,0,.1);
295
+ border: 0px solid transparent;
296
+ border-color: $navbutton-border-color;
297
+ border-inline-width: 1px 0;
301
298
  cursor:pointer;
299
+ background: transparent;
302
300
  transition: background-color 0.2s ease-out, color 0.1s ease-out;
303
301
  i {
304
302
  opacity: 0.75;
@@ -307,44 +305,43 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px rgba(94, 169, 200, 0.7), 0 0 0 2px
307
305
  }
308
306
  [class^="big-icon--"],
309
307
  [class*=" big-icon--"] {
310
- line-height: 1;
311
- color: currentColor;
312
- display: block;
308
+ line-height: 1;
309
+ color: $sd-text;
310
+ display: block;
313
311
  }
314
312
  .big-icon--send-to {
315
- margin-left: 0.3rem;
313
+ margin-left: 0.3rem;
316
314
  }
317
315
  [class^="icon-"],
318
316
  [class*=" icon-"] {
319
- color: currentColor;
317
+ color: $sd-text;
320
318
  }
321
319
  &:hover {
322
- background: rgba(255, 255, 255, 0.5);
320
+ background: var(--color-navbutton-bg-hover);
323
321
  > i {
324
322
  opacity: 1;
325
323
  }
326
324
  }
327
325
  &.navbtn--left {
328
- border-left: none;
329
- border-right: 1px solid rgba(0,0,0,.1);
326
+ border-inline-width: 0 1px;
330
327
  }
331
328
  &.navbtn--blue {
332
- background: $sd-blue;
333
- border-left: 1px solid lighten($sd-blue, 10%);
329
+ background: $sd-colour-interactive;
330
+ border-color: var(--sd-colour-interactive--lighten-10);
334
331
  color: $white;
335
332
  &.disabled {
336
- background: #898989;
333
+ background: var(--sd-colour-interactive--lighten-30);
337
334
  }
338
335
  }
339
336
  &.navbtn--text-only {
340
337
  width: auto;
341
338
  line-height: $subnav-height;
342
339
  padding: 0 20px;
343
- border-left: none;
340
+ border-inline-width: 0 1px;
344
341
  font-size: 1.5rem;
345
342
  }
346
343
  &.navbtn--border-r {
347
- border-right: 1px solid rgba(0,0,0,.1) !important;
344
+ border-inline-end: 1px !important;
348
345
  }
349
346
  &.navbtn--highlighted {
350
347
  background-color: $purple !important;
@@ -359,7 +356,7 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px rgba(94, 169, 200, 0.7), 0 0 0 2px
359
356
  background-color: rgba(0, 0, 0, 0.05);
360
357
  }
361
358
  &.navbtn--active {
362
- background-color: $sd-blue;
359
+ background-color: $sd-colour-interactive;
363
360
  > i {
364
361
  opacity: 1;
365
362
  color: $white;
@@ -369,19 +366,16 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px rgba(94, 169, 200, 0.7), 0 0 0 2px
369
366
  background-color: rgba(0, 0, 0, 0.05);
370
367
  }
371
368
  }
372
- .subnav--dark-ui {
373
- .navbtn:hover {
374
- background-color: rgba(255, 255, 255, 0.06);
375
- }
376
- }
369
+
377
370
  .dropdown.open {
378
371
  .navbtn {
379
- background: rgba(255, 255, 255, 1);
372
+ background: var(--color-dropdown-menu-Bg);
373
+ color: $sd-colour-interactive;
380
374
  box-shadow: -2px -1px 5px -2px rgba(0, 0, 0, 0.2), 3px -1px 5px -2px rgba(0, 0, 0, 0.2);
381
375
  z-index: $zindexDropdown + 1;
382
376
  > i {
383
377
  opacity: 1;
384
- color: $sd-blue;
378
+ color: $sd-colour-interactive;
385
379
  }
386
380
  }
387
381
  .sd-create-btn {
@@ -398,7 +392,7 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px rgba(94, 169, 200, 0.7), 0 0 0 2px
398
392
  @include sd-margin('1-5', 'x');
399
393
  align-items: center;
400
394
  &.subnav__stretch-bar--right {
401
- text-align: right;
395
+ text-align: end;
402
396
  justify-content: flex-end;
403
397
  }
404
398
  }
@@ -410,7 +404,7 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px rgba(94, 169, 200, 0.7), 0 0 0 2px
410
404
  @include sd-margin('1-5', 'x');
411
405
  align-items: center;
412
406
  &.subnav__content-bar--right {
413
- text-align: right;
407
+ text-align: end;
414
408
  justify-content: flex-end;
415
409
  }
416
410
  }
@@ -471,7 +465,7 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px rgba(94, 169, 200, 0.7), 0 0 0 2px
471
465
  }
472
466
  }
473
467
  &--right {
474
- text-align: right;
468
+ text-align: end;
475
469
  padding-right: 2rem;
476
470
  }
477
471
  &--padded {
@@ -564,7 +558,7 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px rgba(94, 169, 200, 0.7), 0 0 0 2px
564
558
  .dropdown__caret {
565
559
  position: absolute;
566
560
  top: 50%;
567
- right: 1rem;
561
+ inset-inline-end: 1rem;
568
562
  }
569
563
  }
570
564
  .navbtn {
@@ -0,0 +1,189 @@
1
+ .sd-theme-selector__list {
2
+ display: grid;
3
+ grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
4
+ gap: $sd-base-increment * 2;
5
+ flex-grow: 1;
6
+ align-self: stretch;
7
+ &--small {
8
+ grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
9
+ }
10
+ &--medium {
11
+ grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
12
+ }
13
+ &--large {
14
+ grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
15
+ gap: $sd-base-increment * 3;
16
+ }
17
+ }
18
+
19
+ .sd-theme-selector__item {
20
+ display: flex;
21
+ flex-direction: column;
22
+ border-radius: var(--b-radius--medium);
23
+ background-color: var(--sd-item__main-Bg);
24
+ position: relative;
25
+ overflow: visible;
26
+ &:disabled {
27
+ opacity: 0.75;
28
+ cursor: not-allowed;
29
+ }
30
+ transition: all 0.3s ease;
31
+ }
32
+ .sd-theme-selector__item-thumb {
33
+ display: flex;
34
+ aspect-ratio: 1.66;
35
+ border-radius: var(--b-radius--medium) var(--b-radius--medium) 0 0;
36
+ overflow: hidden;
37
+ svg {
38
+ width: 100%;
39
+ height: auto;
40
+ }
41
+ }
42
+ .sd-theme-selector__item-action {
43
+ display: flex;
44
+ flex-direction: row;
45
+ align-items: center;
46
+ gap: $sd-base-increment;
47
+ height: $sd-base-increment * 5;
48
+ border-radius: 0 0 var(--b-radius--medium) var(--b-radius--medium);
49
+ overflow: hidden;
50
+ color: var(--color-text);
51
+ padding: 0 $sd-base-increment * 1.5;
52
+ box-shadow: 0 -3px 6px -2px hsla(0, 0%, 0%, 0.12);
53
+ }
54
+ .sd-theme-selector__input {
55
+ position: absolute;
56
+ inset-block-start: 0px;
57
+ inset-inline-start: 0px;
58
+ opacity: 0;
59
+ height: 100%;
60
+ width: 100%;
61
+ z-index: 2;
62
+ padding: 0px;
63
+ border-width: 0px;
64
+ overflow: hidden;
65
+ outline: none !important;
66
+ &:hover {
67
+ cursor: pointer;
68
+ }
69
+ }
70
+ .sd-theme-selector__label {
71
+ position: absolute;
72
+ inset-block-start: 0px;
73
+ inset-inline-start: 0px;
74
+ height: 100%;
75
+ width: 100%;
76
+ z-index: 1;
77
+ border-radius: var(--b-radius--medium);
78
+ border: 1px solid var(--sd-colour-line--medium);
79
+ transition: all 0.3s ease;
80
+ font-size: 1px;
81
+ color: transparent;
82
+ user-select: none;
83
+ }
84
+ .sd-theme-selector__label-text {
85
+ font-size: 1.4rem;
86
+ color: var(--color-text);
87
+ }
88
+ .sd-theme-selector__item {
89
+ input:hover {
90
+ & ~ .sd-check-new,
91
+ & ~ .sd-radio-new {
92
+ border-color: var(--color-checkbox-border-hover);
93
+ }
94
+ &:not(:checked) {
95
+ & ~ label {
96
+ box-shadow: var(--sd-shadow--z1);
97
+ border-color: var(--sd-colour-line--strong);
98
+ }
99
+
100
+ }
101
+ }
102
+ input:checked {
103
+ & ~ .sd-radio-new {
104
+ border-color: $sd-colour-interactive;
105
+ background: $sd-colour-interactive;
106
+ &::after {
107
+ opacity: 1;
108
+ transform: scale(1, 1);
109
+ }
110
+ }
111
+ & ~ .sd-radio-new {
112
+ background: transparent;
113
+ }
114
+ & ~ label {
115
+ box-shadow: 0 0 0 1px var(--sd-colour-interactive), inset 0 0 0 2px var(--sd-colour-interactive--alpha-30);
116
+ }
117
+ & ~ .sd-theme-selector__label-text {
118
+ color: $sd-colour-interactive;
119
+ }
120
+ }
121
+ input:focus-visible {
122
+ & ~ label {
123
+ box-shadow: 0 0 0 2px var(--sd-colour-interactive--alpha-30);
124
+ }
125
+ }
126
+ input:disabled {
127
+ z-index: 1;
128
+ cursor: not-allowed;
129
+ pointer-events: none;
130
+
131
+ & ~ label {
132
+ z-index: 2;
133
+ cursor: not-allowed;
134
+ box-shadow: none !important;
135
+ border-color: var(--sd-colour-line--light) !important;
136
+ }
137
+ & ~ .sd-theme-selector__label-text {
138
+ opacity: 0.4;
139
+ }
140
+ & ~ .sd-radio-new {
141
+ opacity: 0.4;
142
+ border-color: var(--color-checkbox-border) !important;
143
+ }
144
+ }
145
+ }
146
+
147
+ [data-theme="dark-ui"] {
148
+ figure[data-theme="dark-ui"] {
149
+ --color-text: hsla(0, 0%, 96%, 1);
150
+ --color-text-light: hsla(214, 13%, 96%, 0.75);
151
+ --color-text-lighter: hsla(214, 13%, 96%, 0.55);
152
+ --color-icon-default: hsla(214, 13%, 96%, 0.65);
153
+
154
+ --sd-colour-panel-bg--100: hsla(214, 13%, 16%, 1);
155
+ --sd-colour-interactive: hsla(160, 50%, 50%, 1);
156
+ --sd-colour-btn-bg-neutral: hsla(214, 13%, 50%, 0.4);
157
+ --sd-colour-sidebar-menu--00: hsla(214, 13%, 25%, 1);
158
+ --color-icon-default: hsla(214, 13%, 96%, 0.65);
159
+ --sd-colour--shadow-line: hsla(214, 13%, 74%, 0.2);
160
+ --sd-colour-line--medium: hsla(214, 13%, 70%, 0.2);
161
+
162
+ }
163
+ figure[data-theme="light-ui"] {
164
+ --color-text: hsla(0, 0%, 20%, 1);
165
+ --color-text-light: hsla(214, 13%, 20%, 0.75);
166
+ --color-text-lighter: hsla(214, 13%, 20%, 0.55);
167
+ --color-icon-default: hsla(214, 13%, 30%, 1);
168
+
169
+ --sd-colour-panel-bg--100: hsla(214, 13%, 96%, 1);
170
+ --sd-colour-interactive: hsla(198, 50%, 50%, 1);
171
+ --sd-colour-btn-bg-neutral: hsla(214, 13%, 50%, 0.4);
172
+ --sd-colour-sidebar-menu--00: hsla(214, 13%, 85%, 1);
173
+ --sd-colour--shadow-line: hsla(214, 13%, 70%, 0);
174
+ --sd-colour-line--medium: hsla(214, 13%, 20%, 0.2);
175
+
176
+
177
+ }
178
+ figure[data-theme="contrast-light-ui"] {
179
+ --color-text: hsla(0, 0%, 0%, 1);
180
+ --color-text-light: hsla(214, 13%, 10%, 0.85);
181
+ --color-text-lighter: hsla(214, 13%, 10%, 0.65);
182
+ --color-icon-default: hsla(214, 13%, 20%, 1);
183
+
184
+ --sd-colour-panel-bg--100: hsla(214, 13%, 96%, 1);
185
+ --sd-colour-sidebar-menu--00: hsla(214, 13%, 90%, 1);
186
+ --sd-colour--shadow-line: hsla(214, 13%, 60%, 0);
187
+ --sd-colour-line--medium: hsla(214, 13%, 20%, 0.4);
188
+ }
189
+ }
@@ -21,8 +21,8 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
21
21
  width: 1.6rem;
22
22
  height: 1.6rem;
23
23
  transform: scale(1);
24
- border-radius: 50%;
25
- background-color: $sd-blue;
24
+ border-radius: $border-radius__base--full;
25
+ background-color: $sd-colour-interactive;
26
26
  transition: $sd-slider-transition;
27
27
  touch-action: manipulation;
28
28
  cursor: pointer;
@@ -30,7 +30,7 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
30
30
  cursor: grab;
31
31
 
32
32
  &:hover {
33
- background-color: scale-color($sd-blue, $lightness: -10%);
33
+ background-color: var(--sd-colour-interactive--darken-10);
34
34
  }
35
35
  &:active {
36
36
  transform: scale(1.4);
@@ -42,7 +42,7 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
42
42
  &:focus {
43
43
  box-shadow: 0 0 0 1px rgba(123, 123, 123, 0.3);
44
44
  &::-webkit-slider-thumb {
45
- background-color: scale-color($sd-blue, $lightness: -10%);
45
+ background-color: var(--sd-colour-interactive--darken-10);
46
46
  }
47
47
  }
48
48
  }
@@ -68,8 +68,8 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
68
68
  width: 1.6rem;
69
69
  height: 1.6rem;
70
70
  transform: scale(1);
71
- border-radius: 50%;
72
- background-color: $sd-blue;
71
+ border-radius: $border-radius__base--full;
72
+ background-color: $sd-colour-interactive;
73
73
  transition: $sd-slider-transition;
74
74
  touch-action: manipulation;
75
75
  cursor: pointer;
@@ -77,7 +77,7 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
77
77
  cursor: grab;
78
78
 
79
79
  &:hover {
80
- background-color: scale-color($sd-blue, $lightness: -10%);
80
+ background-color: var(--sd-colour-interactive--darken-10);
81
81
  }
82
82
  &:active, &--active {
83
83
  transform: scale(1.4);
@@ -95,14 +95,14 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
95
95
  width: 3rem;
96
96
  height: 3rem;
97
97
  transform: scale(0);
98
- border-radius: 50%;
99
- background-color: scale-color($sd-blue, $alpha: -70%);
98
+ border-radius: $border-radius__base--full;
99
+ background-color: var(--sd-colour-interactive--alpha-30);
100
100
  opacity: 0;
101
101
  transition: $sd-slider-transition;
102
102
  &:focus {
103
103
  transform: scale(1);
104
104
  opacity: 1;
105
- background-color: scale-color($sd-blue, $lightness: -10%);
105
+ background-color: var(--sd-colour-interactive--darken-10);
106
106
  }
107
107
  }
108
108
 
@@ -113,6 +113,6 @@ $sd-slider-transition: transform .4s cubic-bezier(.25,.8,.25,1), background-colo
113
113
  display: inline-block;
114
114
  max-width: 100%;
115
115
  height: 0.2rem;
116
- background-color: $sd-blue;
116
+ background-color: $sd-colour-interactive;
117
117
  transition: $sd-slider-transition;
118
118
  }