@openedx/paragon 22.4.0 → 23.0.0-alpha.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 (530) hide show
  1. package/README.md +36 -5
  2. package/bin/paragon-scripts.js +128 -9
  3. package/dist/ActionRow/_index.scss +2 -4
  4. package/dist/Alert/index.scss +41 -32
  5. package/dist/Annotation/_mixins.scss +104 -0
  6. package/dist/Annotation/index.scss +130 -103
  7. package/dist/Avatar/index.scss +18 -20
  8. package/dist/AvatarButton/index.scss +3 -5
  9. package/dist/Badge/index.scss +112 -2
  10. package/dist/Breadcrumb/index.scss +14 -16
  11. package/dist/Bubble/index.scss +25 -12
  12. package/dist/Button/_mixins.scss +14 -0
  13. package/dist/Button/button-group.scss +126 -0
  14. package/dist/Button/index.js +0 -2
  15. package/dist/Button/index.js.map +1 -1
  16. package/dist/Button/index.scss +855 -370
  17. package/dist/Card/card-bootstrap.scss +168 -0
  18. package/dist/Card/index.scss +78 -79
  19. package/dist/Carousel/index.scss +168 -2
  20. package/dist/Chip/index.scss +46 -37
  21. package/dist/Chip/mixins.scss +8 -3
  22. package/dist/ChipCarousel/index.scss +4 -4
  23. package/dist/CloseButton/index.scss +31 -2
  24. package/dist/Code/index.scss +47 -2
  25. package/dist/Collapsible/index.scss +15 -15
  26. package/dist/ColorPicker/index.scss +9 -11
  27. package/dist/DataTable/CollapsibleButtonGroup.js +2 -2
  28. package/dist/DataTable/CollapsibleButtonGroup.js.map +1 -1
  29. package/dist/DataTable/index.scss +48 -50
  30. package/dist/Dropdown/dropdown-bootstrap.scss +181 -0
  31. package/dist/Dropdown/index.js +0 -2
  32. package/dist/Dropdown/index.js.map +1 -1
  33. package/dist/Dropdown/index.scss +11 -12
  34. package/dist/Dropzone/index.scss +12 -14
  35. package/dist/Form/_FormText.scss +8 -8
  36. package/dist/Form/_bootstrap-custom-forms.scss +551 -0
  37. package/dist/Form/_bootstrap-forms.scss +381 -0
  38. package/dist/Form/_index.scss +168 -146
  39. package/dist/Form/_input-group.scss +188 -0
  40. package/dist/Form/_mixins.scss +216 -3
  41. package/dist/Hyperlink/index.scss +1 -1
  42. package/dist/Icon/index.scss +10 -12
  43. package/dist/IconButton/_mixins.scss +4 -0
  44. package/dist/IconButton/index.js +5 -11
  45. package/dist/IconButton/index.js.map +1 -1
  46. package/dist/IconButton/index.scss +387 -74
  47. package/dist/IconButtonToggle/index.scss +1 -1
  48. package/dist/Image/index.scss +53 -2
  49. package/dist/Menu/index.scss +25 -27
  50. package/dist/Modal/_ModalDialog.scss +52 -50
  51. package/dist/Modal/index.scss +6 -73
  52. package/dist/Nav/_mixins.scss +4 -4
  53. package/dist/Nav/index.scss +70 -66
  54. package/dist/Navbar/index.scss +276 -2
  55. package/dist/OverflowScroll/data/useOverflowScrollElementAttributes.js +3 -3
  56. package/dist/Overlay/index.js +2 -3
  57. package/dist/Overlay/index.js.map +1 -1
  58. package/dist/PageBanner/index.scss +17 -21
  59. package/dist/Pagination/index.scss +32 -34
  60. package/dist/Pagination/pagination-bootstrap.scss +83 -0
  61. package/dist/Popover/index.scss +9 -10
  62. package/dist/Popover/popover-bootstrap.scss +198 -0
  63. package/dist/ProductTour/Checkpoint.scss +71 -43
  64. package/dist/ProgressBar/_mixins.scss +22 -0
  65. package/dist/ProgressBar/bootstrap-progress.scss +49 -0
  66. package/dist/ProgressBar/index.scss +28 -36
  67. package/dist/Scrollable/index.scss +2 -2
  68. package/dist/SearchField/SearchFieldInput.js +2 -2
  69. package/dist/SearchField/SearchFieldInput.js.map +1 -1
  70. package/dist/SearchField/index.scss +15 -17
  71. package/dist/SelectableBox/index.scss +11 -13
  72. package/dist/Sheet/index.scss +10 -10
  73. package/dist/Spinner/index.scss +57 -2
  74. package/dist/Stack/index.scss +1 -3
  75. package/dist/Stepper/index.scss +19 -20
  76. package/dist/Sticky/index.scss +4 -6
  77. package/dist/Tabs/index.js +0 -2
  78. package/dist/Tabs/index.js.map +1 -1
  79. package/dist/Tabs/index.scss +26 -25
  80. package/dist/Toast/ToastContainer.scss +9 -11
  81. package/dist/Toast/bootstrap-toast.scss +46 -0
  82. package/dist/Toast/index.scss +9 -10
  83. package/dist/Tooltip/index.scss +136 -10
  84. package/dist/ValidationMessage/index.scss +1 -1
  85. package/dist/core.css +16788 -0
  86. package/dist/core.css.map +1 -0
  87. package/dist/core.min.css +2 -0
  88. package/dist/index.js +0 -14
  89. package/dist/index.scss +0 -4
  90. package/dist/light.css +4098 -0
  91. package/dist/light.css.map +1 -0
  92. package/dist/light.min.css +2 -0
  93. package/dist/theme-urls.json +21 -0
  94. package/dist/utils/breakpoints.js +1 -1
  95. package/lib/build-scss.js +188 -0
  96. package/lib/build-tokens.js +119 -0
  97. package/lib/help.js +36 -23
  98. package/lib/replace-variables.js +38 -0
  99. package/lib/utils.js +30 -0
  100. package/package.json +25 -10
  101. package/src/ActionRow/_index.scss +2 -4
  102. package/src/Alert/index.scss +41 -32
  103. package/src/Annotation/_mixins.scss +104 -0
  104. package/src/Annotation/index.scss +130 -103
  105. package/src/Avatar/index.scss +18 -20
  106. package/src/AvatarButton/index.scss +3 -5
  107. package/src/Badge/index.scss +112 -2
  108. package/src/Breadcrumb/index.scss +14 -16
  109. package/src/Bubble/index.scss +25 -12
  110. package/src/Button/README.md +0 -84
  111. package/src/Button/_mixins.scss +14 -0
  112. package/src/Button/button-group.scss +126 -0
  113. package/src/Button/index.jsx +0 -3
  114. package/src/Button/index.scss +855 -370
  115. package/src/Card/card-bootstrap.scss +168 -0
  116. package/src/Card/index.scss +78 -79
  117. package/src/Carousel/index.scss +168 -2
  118. package/src/Chip/index.scss +46 -37
  119. package/src/Chip/mixins.scss +8 -3
  120. package/src/ChipCarousel/index.scss +4 -4
  121. package/src/CloseButton/index.scss +31 -2
  122. package/src/Code/index.scss +47 -2
  123. package/src/Collapsible/index.scss +15 -15
  124. package/src/ColorPicker/index.scss +9 -11
  125. package/src/DataTable/CollapsibleButtonGroup.jsx +2 -2
  126. package/src/DataTable/index.scss +48 -50
  127. package/src/Dropdown/README.md +0 -93
  128. package/src/Dropdown/dropdown-bootstrap.scss +181 -0
  129. package/src/Dropdown/index.jsx +0 -2
  130. package/src/Dropdown/index.scss +11 -12
  131. package/src/Dropzone/index.scss +12 -14
  132. package/src/Form/_FormText.scss +8 -8
  133. package/src/Form/_bootstrap-custom-forms.scss +551 -0
  134. package/src/Form/_bootstrap-forms.scss +381 -0
  135. package/src/Form/_index.scss +168 -146
  136. package/src/Form/_input-group.scss +188 -0
  137. package/src/Form/_mixins.scss +216 -3
  138. package/src/Hyperlink/index.scss +1 -1
  139. package/src/Icon/index.scss +10 -12
  140. package/src/IconButton/README.md +1 -15
  141. package/src/IconButton/__snapshots__/IconButton.test.jsx.snap +5 -28
  142. package/src/IconButton/_mixins.scss +4 -0
  143. package/src/IconButton/index.jsx +6 -13
  144. package/src/IconButton/index.scss +387 -74
  145. package/src/IconButtonToggle/index.scss +1 -1
  146. package/src/Image/index.scss +53 -2
  147. package/src/Menu/index.scss +25 -27
  148. package/src/Modal/_ModalDialog.scss +52 -50
  149. package/src/Modal/index.scss +6 -73
  150. package/src/Nav/_mixins.scss +4 -4
  151. package/src/Nav/index.scss +70 -66
  152. package/src/Navbar/index.scss +276 -2
  153. package/src/OverflowScroll/data/useOverflowScrollElementAttributes.js +3 -3
  154. package/src/Overlay/index.jsx +2 -3
  155. package/src/PageBanner/index.scss +17 -21
  156. package/src/Pagination/index.scss +32 -34
  157. package/src/Pagination/pagination-bootstrap.scss +83 -0
  158. package/src/Popover/index.scss +9 -10
  159. package/src/Popover/popover-bootstrap.scss +198 -0
  160. package/src/ProductTour/Checkpoint.scss +71 -43
  161. package/src/ProgressBar/_mixins.scss +22 -0
  162. package/src/ProgressBar/bootstrap-progress.scss +49 -0
  163. package/src/ProgressBar/index.scss +28 -36
  164. package/src/Scrollable/index.scss +2 -2
  165. package/src/SearchField/SearchFieldInput.jsx +2 -2
  166. package/src/SearchField/__snapshots__/SearchField.test.jsx.snap +12 -8
  167. package/src/SearchField/index.scss +15 -17
  168. package/src/SelectableBox/index.scss +11 -13
  169. package/src/Sheet/index.scss +10 -10
  170. package/src/Spinner/index.scss +57 -2
  171. package/src/Stack/index.scss +1 -3
  172. package/src/Stepper/index.scss +19 -20
  173. package/src/Sticky/index.scss +4 -6
  174. package/src/Tabs/README.md +1 -23
  175. package/src/Tabs/index.jsx +0 -3
  176. package/src/Tabs/index.scss +26 -25
  177. package/src/Toast/ToastContainer.scss +9 -11
  178. package/src/Toast/bootstrap-toast.scss +46 -0
  179. package/src/Toast/index.scss +9 -10
  180. package/src/Tooltip/index.scss +136 -10
  181. package/src/TransitionReplace/README.md +4 -4
  182. package/src/ValidationMessage/index.scss +1 -1
  183. package/src/index.js +0 -14
  184. package/src/index.scss +0 -4
  185. package/src/setupTest.js +0 -6
  186. package/src/utils/breakpoints.js +1 -1
  187. package/styles/css/core/custom-media-breakpoints.css +17 -0
  188. package/styles/css/core/index.css +2 -0
  189. package/styles/css/core/variables.css +614 -0
  190. package/styles/css/themes/light/index.css +2 -0
  191. package/styles/css/themes/light/utility-classes.css +2454 -0
  192. package/styles/css/themes/light/variables.css +1644 -0
  193. package/{scss → styles/scss}/core/_functions.scss +1 -1
  194. package/styles/scss/core/_grid.scss +21 -0
  195. package/{scss → styles/scss}/core/_utilities.scss +17 -11
  196. package/styles/scss/core/_variables.scss +869 -0
  197. package/styles/scss/core/bootstrap-override/_functions.scss +104 -0
  198. package/styles/scss/core/bootstrap-override/_mixins.scss +4 -0
  199. package/styles/scss/core/bootstrap-override/_utilities.scss +4 -0
  200. package/styles/scss/core/bootstrap-override/bootstrap.scss +2 -0
  201. package/styles/scss/core/bootstrap-override/mixins/_grid-framework.scss +80 -0
  202. package/styles/scss/core/bootstrap-override/mixins/_grid.scss +69 -0
  203. package/styles/scss/core/bootstrap-override/mixins/_list-group.scss +22 -0
  204. package/styles/scss/core/bootstrap-override/utilities/_background.scss +7 -0
  205. package/styles/scss/core/bootstrap-override/utilities/_borders.scss +67 -0
  206. package/styles/scss/core/bootstrap-override/utilities/_spacing.scss +70 -0
  207. package/styles/scss/core/bootstrap-override/utilities/_text.scss +68 -0
  208. package/styles/scss/core/core.scss +21 -0
  209. package/{scss → styles/scss}/core/utilities-only.scss +1 -0
  210. package/tokens/README.md +158 -0
  211. package/tokens/css-utilities.js +56 -0
  212. package/tokens/map-scss-to-css.js +24 -0
  213. package/tokens/replace-variables.js +32 -0
  214. package/tokens/sass-helpers.js +98 -0
  215. package/tokens/src/core/alias/size.json +15 -0
  216. package/tokens/src/core/components/ActionRow.json +10 -0
  217. package/tokens/src/core/components/Alert.json +30 -0
  218. package/tokens/src/core/components/Annotation.json +25 -0
  219. package/tokens/src/core/components/Avatar.json +17 -0
  220. package/tokens/src/core/components/AvatarButton.json +11 -0
  221. package/tokens/src/core/components/Badge.json +33 -0
  222. package/tokens/src/core/components/Breadcrumb.json +37 -0
  223. package/tokens/src/core/components/Bubble.json +10 -0
  224. package/tokens/src/core/components/Button/core.json +105 -0
  225. package/tokens/src/core/components/Card.json +91 -0
  226. package/tokens/src/core/components/Carousel.json +37 -0
  227. package/tokens/src/core/components/Chip.json +43 -0
  228. package/tokens/src/core/components/ChipCarousel.json +15 -0
  229. package/tokens/src/core/components/CloseButton.json +14 -0
  230. package/tokens/src/core/components/Code.json +34 -0
  231. package/tokens/src/core/components/Collapsible.json +29 -0
  232. package/tokens/src/core/components/ColorPicker.json +8 -0
  233. package/tokens/src/core/components/Container.json +13 -0
  234. package/tokens/src/core/components/DataTable.json +27 -0
  235. package/tokens/src/core/components/Dropdown.json +67 -0
  236. package/tokens/src/core/components/Dropzone.json +21 -0
  237. package/tokens/src/core/components/Form/other.json +14 -0
  238. package/tokens/src/core/components/Form/size.json +233 -0
  239. package/tokens/src/core/components/Form/spacing.json +155 -0
  240. package/tokens/src/core/components/Form/transition.json +16 -0
  241. package/tokens/src/core/components/Form/typography.json +122 -0
  242. package/tokens/src/core/components/Icon.json +11 -0
  243. package/tokens/src/core/components/IconButton.json +15 -0
  244. package/tokens/src/core/components/Image.json +28 -0
  245. package/tokens/src/core/components/Menu.json +48 -0
  246. package/tokens/src/core/components/Modal.json +47 -0
  247. package/tokens/src/core/components/Nav.json +55 -0
  248. package/tokens/src/core/components/Navbar.json +70 -0
  249. package/tokens/src/core/components/Pagination.json +70 -0
  250. package/tokens/src/core/components/Popover.json +48 -0
  251. package/tokens/src/core/components/ProductTour.json +37 -0
  252. package/tokens/src/core/components/ProgressBar.json +39 -0
  253. package/tokens/src/core/components/SearchField.json +23 -0
  254. package/tokens/src/core/components/SelectableBox.json +9 -0
  255. package/tokens/src/core/components/Sheet.json +10 -0
  256. package/tokens/src/core/components/Spinner.json +19 -0
  257. package/tokens/src/core/components/Stack.json +7 -0
  258. package/tokens/src/core/components/Stepper.json +42 -0
  259. package/tokens/src/core/components/Sticky.json +7 -0
  260. package/tokens/src/core/components/Tab.json +19 -0
  261. package/tokens/src/core/components/Tabs.json +19 -0
  262. package/tokens/src/core/components/Toast.json +30 -0
  263. package/tokens/src/core/components/Tooltip.json +33 -0
  264. package/tokens/src/core/components/general/caret.json +13 -0
  265. package/tokens/src/core/components/general/headings.json +16 -0
  266. package/tokens/src/core/components/general/hr.json +10 -0
  267. package/tokens/src/core/components/general/input.json +51 -0
  268. package/tokens/src/core/components/general/link.json +30 -0
  269. package/tokens/src/core/components/general/list.json +26 -0
  270. package/tokens/src/core/components/general/text.json +24 -0
  271. package/tokens/src/core/global/breakpoints.json +12 -0
  272. package/tokens/src/core/global/display.json +21 -0
  273. package/tokens/src/core/global/elevation.json +19 -0
  274. package/tokens/src/core/global/other.json +4 -0
  275. package/tokens/src/core/global/spacing.json +35 -0
  276. package/tokens/src/core/global/transition.json +14 -0
  277. package/tokens/src/core/global/typography.json +91 -0
  278. package/tokens/src/core/utilities/color.json +12 -0
  279. package/tokens/src/themes/light/alias/color.json +114 -0
  280. package/tokens/src/themes/light/components/Alert.json +47 -0
  281. package/tokens/src/themes/light/components/Annotation.json +29 -0
  282. package/tokens/src/themes/light/components/Avatar.json +7 -0
  283. package/tokens/src/themes/light/components/Badge.json +186 -0
  284. package/tokens/src/themes/light/components/Breadcrumb.json +14 -0
  285. package/tokens/src/themes/light/components/Bubble.json +18 -0
  286. package/tokens/src/themes/light/components/Button/brand.json +260 -0
  287. package/tokens/src/themes/light/components/Button/core.json +24 -0
  288. package/tokens/src/themes/light/components/Button/danger.json +247 -0
  289. package/tokens/src/themes/light/components/Button/dark.json +230 -0
  290. package/tokens/src/themes/light/components/Button/info.json +238 -0
  291. package/tokens/src/themes/light/components/Button/light.json +236 -0
  292. package/tokens/src/themes/light/components/Button/primary.json +250 -0
  293. package/tokens/src/themes/light/components/Button/secondary.json +278 -0
  294. package/tokens/src/themes/light/components/Button/success.json +253 -0
  295. package/tokens/src/themes/light/components/Button/tertiary.json +109 -0
  296. package/tokens/src/themes/light/components/Button/warning.json +276 -0
  297. package/tokens/src/themes/light/components/Card.json +40 -0
  298. package/tokens/src/themes/light/components/Carousel.json +45 -0
  299. package/tokens/src/themes/light/components/Chip.json +50 -0
  300. package/tokens/src/themes/light/components/CloseButton.json +10 -0
  301. package/tokens/src/themes/light/components/Code.json +23 -0
  302. package/tokens/src/themes/light/components/DataTable.json +26 -0
  303. package/tokens/src/themes/light/components/Dropdown.json +41 -0
  304. package/tokens/src/themes/light/components/Dropzone.json +23 -0
  305. package/tokens/src/themes/light/components/Form/color.json +270 -0
  306. package/tokens/src/themes/light/components/Form/elevation.json +76 -0
  307. package/tokens/src/themes/light/components/Form/other.json +131 -0
  308. package/tokens/src/themes/light/components/IconButton.json +451 -0
  309. package/tokens/src/themes/light/components/Image.json +18 -0
  310. package/tokens/src/themes/light/components/Menu.json +30 -0
  311. package/tokens/src/themes/light/components/Modal.json +37 -0
  312. package/tokens/src/themes/light/components/Nav.json +166 -0
  313. package/tokens/src/themes/light/components/Navbar.json +136 -0
  314. package/tokens/src/themes/light/components/OverflowScroll.json +9 -0
  315. package/tokens/src/themes/light/components/PageBanner.json +24 -0
  316. package/tokens/src/themes/light/components/Pagination.json +45 -0
  317. package/tokens/src/themes/light/components/Popover.json +55 -0
  318. package/tokens/src/themes/light/components/ProductTour.json +35 -0
  319. package/tokens/src/themes/light/components/ProgressBar.json +20 -0
  320. package/tokens/src/themes/light/components/Scrollable.json +14 -0
  321. package/tokens/src/themes/light/components/SearchField.json +25 -0
  322. package/tokens/src/themes/light/components/Sheet.json +22 -0
  323. package/tokens/src/themes/light/components/Stepper.json +34 -0
  324. package/tokens/src/themes/light/components/Sticky.json +18 -0
  325. package/tokens/src/themes/light/components/Tab.json +62 -0
  326. package/tokens/src/themes/light/components/Toast.json +33 -0
  327. package/tokens/src/themes/light/components/Tooltip.json +30 -0
  328. package/tokens/src/themes/light/components/general/body.json +8 -0
  329. package/tokens/src/themes/light/components/general/headings.json +7 -0
  330. package/tokens/src/themes/light/components/general/hr.json +15 -0
  331. package/tokens/src/themes/light/components/general/input.json +18 -0
  332. package/tokens/src/themes/light/components/general/link.json +109 -0
  333. package/tokens/src/themes/light/components/general/list.json +38 -0
  334. package/tokens/src/themes/light/components/general/text.json +6 -0
  335. package/tokens/src/themes/light/global/color.json +1661 -0
  336. package/tokens/src/themes/light/global/elevation.json +201 -0
  337. package/tokens/src/themes/light/global/other.json +4 -0
  338. package/tokens/style-dictionary.js +223 -0
  339. package/tokens/utils.js +210 -0
  340. package/dist/ActionRow/_variables.scss +0 -2
  341. package/dist/Alert/_variables.scss +0 -24
  342. package/dist/Annotation/_variables.scss +0 -18
  343. package/dist/Avatar/_variables.scss +0 -10
  344. package/dist/AvatarButton/_variables.scss +0 -3
  345. package/dist/Badge/_variables.scss +0 -16
  346. package/dist/Breadcrumb/_variables.scss +0 -27
  347. package/dist/Bubble/_variables.scss +0 -8
  348. package/dist/Button/_variables.scss +0 -52
  349. package/dist/Button/deprecated/index.js +0 -149
  350. package/dist/Button/deprecated/index.js.map +0 -1
  351. package/dist/Card/_variables.scss +0 -55
  352. package/dist/Carousel/_variables.scss +0 -27
  353. package/dist/CheckBox/index.js +0 -102
  354. package/dist/CheckBox/index.js.map +0 -1
  355. package/dist/CheckBoxGroup/index.js +0 -15
  356. package/dist/CheckBoxGroup/index.js.map +0 -1
  357. package/dist/Chip/_variables.scss +0 -28
  358. package/dist/ChipCarousel/_variables.scss +0 -3
  359. package/dist/CloseButton/_variables.scss +0 -6
  360. package/dist/Code/_variables.scss +0 -17
  361. package/dist/Collapsible/_variables.scss +0 -12
  362. package/dist/ColorPicker/_variables.scss +0 -2
  363. package/dist/Container/_variables.scss +0 -5
  364. package/dist/DataTable/_variables.scss +0 -11
  365. package/dist/Dropdown/_variables.scss +0 -33
  366. package/dist/Dropdown/deprecated/DropdownButton.js +0 -44
  367. package/dist/Dropdown/deprecated/DropdownButton.js.map +0 -1
  368. package/dist/Dropdown/deprecated/DropdownItem.js +0 -33
  369. package/dist/Dropdown/deprecated/DropdownItem.js.map +0 -1
  370. package/dist/Dropdown/deprecated/DropdownMenu.js +0 -46
  371. package/dist/Dropdown/deprecated/DropdownMenu.js.map +0 -1
  372. package/dist/Dropdown/deprecated/index.js +0 -241
  373. package/dist/Dropdown/deprecated/index.js.map +0 -1
  374. package/dist/Dropzone/_variables.scss +0 -9
  375. package/dist/Fieldset/index.js +0 -117
  376. package/dist/Fieldset/index.js.map +0 -1
  377. package/dist/Fieldset/index.scss +0 -12
  378. package/dist/Form/_variables.scss +0 -267
  379. package/dist/Icon/_variables.scss +0 -7
  380. package/dist/Image/_variables.scss +0 -13
  381. package/dist/Input/index.js +0 -166
  382. package/dist/Input/index.js.map +0 -1
  383. package/dist/InputSelect/index.js +0 -105
  384. package/dist/InputSelect/index.js.map +0 -1
  385. package/dist/InputText/index.js +0 -45
  386. package/dist/InputText/index.js.map +0 -1
  387. package/dist/ListBox/index.js +0 -148
  388. package/dist/ListBox/index.js.map +0 -1
  389. package/dist/ListBoxOption/index.js +0 -94
  390. package/dist/ListBoxOption/index.js.map +0 -1
  391. package/dist/Menu/_variables.scss +0 -24
  392. package/dist/Modal/_variables.scss +0 -50
  393. package/dist/Modal/index.js +0 -292
  394. package/dist/Modal/index.js.map +0 -1
  395. package/dist/Nav/_variables.scss +0 -58
  396. package/dist/Navbar/_variables.scss +0 -40
  397. package/dist/OverflowScroll/_variables.scss +0 -5
  398. package/dist/OverflowScroll/index.scss +0 -1
  399. package/dist/Pagination/_variables.scss +0 -19
  400. package/dist/Popover/_variables.scss +0 -36
  401. package/dist/ProductTour/_variables.scss +0 -15
  402. package/dist/ProgressBar/_variables.scss +0 -23
  403. package/dist/RadioButtonGroup/index.js +0 -188
  404. package/dist/RadioButtonGroup/index.js.map +0 -1
  405. package/dist/SearchField/_variables.scss +0 -14
  406. package/dist/SelectableBox/_variables.scss +0 -5
  407. package/dist/Spinner/_variables.scss +0 -9
  408. package/dist/Stack/_variables.scss +0 -1
  409. package/dist/StatusAlert/index.js +0 -168
  410. package/dist/StatusAlert/index.js.map +0 -1
  411. package/dist/Stepper/_variables.scss +0 -18
  412. package/dist/Sticky/_variables.scss +0 -3
  413. package/dist/Table/_variables.scss +0 -34
  414. package/dist/Table/index.js +0 -267
  415. package/dist/Table/index.js.map +0 -1
  416. package/dist/Table/index.scss +0 -12
  417. package/dist/Tabs/_variables.scss +0 -24
  418. package/dist/Tabs/deprecated/Tabs.scss +0 -3
  419. package/dist/Tabs/deprecated/index.js +0 -123
  420. package/dist/Tabs/deprecated/index.js.map +0 -1
  421. package/dist/TextArea/index.js +0 -44
  422. package/dist/TextArea/index.js.map +0 -1
  423. package/dist/Toast/_variables.scss +0 -19
  424. package/dist/Tooltip/_variables.scss +0 -21
  425. package/dist/ValidationFormGroup/index.js +0 -106
  426. package/dist/ValidationFormGroup/index.js.map +0 -1
  427. package/dist/paragon.css +0 -45
  428. package/scss/core/_grid.scss +0 -21
  429. package/scss/core/_variables.scss +0 -875
  430. package/scss/core/core.scss +0 -21
  431. package/src/ActionRow/_variables.scss +0 -2
  432. package/src/Alert/_variables.scss +0 -24
  433. package/src/Annotation/_variables.scss +0 -18
  434. package/src/Avatar/_variables.scss +0 -10
  435. package/src/AvatarButton/_variables.scss +0 -3
  436. package/src/Badge/_variables.scss +0 -16
  437. package/src/Breadcrumb/_variables.scss +0 -27
  438. package/src/Bubble/_variables.scss +0 -8
  439. package/src/Button/_variables.scss +0 -52
  440. package/src/Button/deprecated/Button.test.jsx +0 -34
  441. package/src/Button/deprecated/index.jsx +0 -145
  442. package/src/Card/_variables.scss +0 -55
  443. package/src/Carousel/_variables.scss +0 -27
  444. package/src/CheckBox/CheckBox.test.jsx +0 -65
  445. package/src/CheckBox/README.md +0 -93
  446. package/src/CheckBox/index.jsx +0 -80
  447. package/src/CheckBoxGroup/CheckBoxGroup.test.jsx +0 -33
  448. package/src/CheckBoxGroup/README.md +0 -35
  449. package/src/CheckBoxGroup/index.jsx +0 -19
  450. package/src/Chip/_variables.scss +0 -28
  451. package/src/ChipCarousel/_variables.scss +0 -3
  452. package/src/CloseButton/_variables.scss +0 -6
  453. package/src/Code/_variables.scss +0 -17
  454. package/src/Collapsible/_variables.scss +0 -12
  455. package/src/ColorPicker/_variables.scss +0 -2
  456. package/src/Container/_variables.scss +0 -5
  457. package/src/DataTable/_variables.scss +0 -11
  458. package/src/Dropdown/_variables.scss +0 -33
  459. package/src/Dropdown/deprecated/Dropdown.test.jsx +0 -238
  460. package/src/Dropdown/deprecated/DropdownButton.jsx +0 -52
  461. package/src/Dropdown/deprecated/DropdownItem.jsx +0 -34
  462. package/src/Dropdown/deprecated/DropdownMenu.jsx +0 -50
  463. package/src/Dropdown/deprecated/__snapshots__/Dropdown.test.jsx.snap +0 -229
  464. package/src/Dropdown/deprecated/index.jsx +0 -222
  465. package/src/Dropzone/_variables.scss +0 -9
  466. package/src/Fieldset/Fieldset.test.jsx +0 -101
  467. package/src/Fieldset/README.md +0 -146
  468. package/src/Fieldset/index.jsx +0 -107
  469. package/src/Fieldset/index.scss +0 -12
  470. package/src/Form/_variables.scss +0 -267
  471. package/src/Icon/_variables.scss +0 -7
  472. package/src/Image/_variables.scss +0 -13
  473. package/src/Input/README.md +0 -74
  474. package/src/Input/__snapshots__/input.test.jsx.snap +0 -53
  475. package/src/Input/index.jsx +0 -151
  476. package/src/Input/input.test.jsx +0 -85
  477. package/src/InputSelect/README.md +0 -136
  478. package/src/InputSelect/index.jsx +0 -92
  479. package/src/InputText/InputText.test.jsx +0 -74
  480. package/src/InputText/README.md +0 -293
  481. package/src/InputText/index.jsx +0 -49
  482. package/src/ListBox/ListBox.test.jsx +0 -161
  483. package/src/ListBox/README.md +0 -185
  484. package/src/ListBox/index.jsx +0 -115
  485. package/src/ListBoxOption/ListBoxOption.test.jsx +0 -154
  486. package/src/ListBoxOption/index.jsx +0 -78
  487. package/src/Menu/_variables.scss +0 -24
  488. package/src/Modal/README.md +0 -148
  489. package/src/Modal/_variables.scss +0 -50
  490. package/src/Modal/index.jsx +0 -319
  491. package/src/Modal/tests/Modal.test.jsx +0 -261
  492. package/src/Nav/_variables.scss +0 -58
  493. package/src/Navbar/_variables.scss +0 -40
  494. package/src/OverflowScroll/_variables.scss +0 -5
  495. package/src/OverflowScroll/index.scss +0 -1
  496. package/src/Pagination/_variables.scss +0 -19
  497. package/src/Popover/_variables.scss +0 -36
  498. package/src/ProductTour/_variables.scss +0 -15
  499. package/src/ProgressBar/_variables.scss +0 -23
  500. package/src/RadioButtonGroup/README.md +0 -50
  501. package/src/RadioButtonGroup/RadioButtonGroup.test.jsx +0 -127
  502. package/src/RadioButtonGroup/index.jsx +0 -185
  503. package/src/SearchField/_variables.scss +0 -14
  504. package/src/SelectableBox/_variables.scss +0 -5
  505. package/src/Spinner/_variables.scss +0 -9
  506. package/src/Stack/_variables.scss +0 -1
  507. package/src/StatusAlert/README.md +0 -149
  508. package/src/StatusAlert/StatusAlert.test.jsx +0 -150
  509. package/src/StatusAlert/index.jsx +0 -144
  510. package/src/Stepper/_variables.scss +0 -18
  511. package/src/Sticky/_variables.scss +0 -3
  512. package/src/Table/README.md +0 -506
  513. package/src/Table/Table.test.jsx +0 -367
  514. package/src/Table/_variables.scss +0 -34
  515. package/src/Table/index.jsx +0 -264
  516. package/src/Table/index.scss +0 -12
  517. package/src/Tabs/_variables.scss +0 -24
  518. package/src/Tabs/deprecated/Tabs.scss +0 -3
  519. package/src/Tabs/deprecated/Tabs.test.jsx +0 -50
  520. package/src/Tabs/deprecated/index.jsx +0 -117
  521. package/src/TextArea/README.md +0 -63
  522. package/src/TextArea/index.jsx +0 -48
  523. package/src/Toast/_variables.scss +0 -19
  524. package/src/Tooltip/_variables.scss +0 -21
  525. package/src/ValidationFormGroup/README.md +0 -116
  526. package/src/ValidationFormGroup/ValidationFormGroup.test.jsx +0 -146
  527. package/src/ValidationFormGroup/__snapshots__/ValidationFormGroup.test.jsx.snap +0 -161
  528. package/src/ValidationFormGroup/index.jsx +0 -114
  529. /package/{scss → styles/scss}/core/_exports.module.scss +0 -0
  530. /package/{scss → styles/scss}/core/_typography.scss +0 -0
package/tokens/src/themes/light/components/Form/other.json ADDED
@@ -0,0 +1,131 @@
1
+ {
2
+ "other": {
3
+ "form": {
4
+ "feedback": {
5
+ "tooltip-opacity": { "value": ".9", "type": "ratio", "source": "$form-feedback-tooltip-opacity" }
6
+ }
7
+ },
8
+ "content": {
9
+ "form": {
10
+ "control": {
11
+ "checkbox": {
12
+ "indicator": {
13
+ "icon-checked": {
14
+ "base": {
15
+ "value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='{color.form.control.indicator.checked.base}'/></svg>\")",
16
+ "type": "file",
17
+ "source": "$custom-checkbox-indicator-icon-checked",
18
+ "outputReferences": false,
19
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
20
+ },
21
+ "valid": {
22
+ "value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='{color.form.control.indicator.checked.valid}'/></svg>\")",
23
+ "type": "file",
24
+ "source": "$custom-checkbox-indicator-icon-valid-checked",
25
+ "outputReferences": false,
26
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
27
+ },
28
+ "invalid": {
29
+ "value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='{color.form.control.indicator.checked.invalid}'/></svg>\")",
30
+ "type": "file",
31
+ "source": "$custom-checkbox-indicator-icon-invalid-checked",
32
+ "outputReferences": false,
33
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
34
+ }
35
+ },
36
+ "indeterminate": {
37
+ "icon": {
38
+ "value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM17 13H7V11H17V13Z' fill='{color.form.control.checkbox.indicator.indeterminate.base}'/></svg>\")",
39
+ "type": "file",
40
+ "source": "$custom-checkbox-indicator-icon-indeterminate",
41
+ "outputReferences": false,
42
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
43
+ }
44
+ }
45
+ }
46
+ },
47
+ "radio": {
48
+ "indicator": {
49
+ "icon-checked": {
50
+ "base": {
51
+ "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")",
52
+ "type": "file",
53
+ "source": "$custom-radio-indicator-icon-checked",
54
+ "outputReferences": false,
55
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23"}]
56
+ },
57
+ "valid": {
58
+ "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.valid}'/%3e%3c/svg%3e\")",
59
+ "type": "file",
60
+ "source": "$custom-radio-indicator-icon-valid-checked",
61
+ "outputReferences": false,
62
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23"}]
63
+ },
64
+ "invalid": {
65
+ "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.invalid}'/%3e%3c/svg%3e\")",
66
+ "type": "file",
67
+ "source": "$custom-radio-indicator-icon-invalid-checked",
68
+ "outputReferences": false,
69
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23"}]
70
+ }
71
+ }
72
+ }
73
+ },
74
+ "switch": {
75
+ "indicator": {
76
+ "icon-off": {
77
+ "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")",
78
+ "type": "file",
79
+ "source": "$custom-switch-indicator-icon-off",
80
+ "outputReferences": false,
81
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
82
+ },
83
+ "icon-on": {
84
+ "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.active.base}'/%3e%3c/svg%3e\")",
85
+ "type": "file",
86
+ "source": "$custom-switch-indicator-icon-on",
87
+ "outputReferences": false,
88
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
89
+ }
90
+ }
91
+ },
92
+ "select": {
93
+ "indicator": {
94
+ "icon": {
95
+ "value": "url('data:image/svg+xml,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z\" fill=\"{color.form.control.select.indicator.base}\"/></svg>')",
96
+ "type": "file",
97
+ "source": "$custom-select-indicator",
98
+ "outputReferences": false,
99
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
100
+ }
101
+ },
102
+ "bg": {
103
+ "value": "{other.content.form.control.select.indicator.icon} no-repeat right {spacing.form.input.padding.y.base} center / {color.form.control.select.bg.base}",
104
+ "type": "background",
105
+ "source": "$custom-select-background"
106
+ }
107
+ }
108
+ },
109
+ "feedback": {
110
+ "icon": {
111
+ "valid": {
112
+ "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='{color.form.feedback.icon.valid}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\")",
113
+ "type": "file",
114
+ "source": "$form-feedback-icon-valid",
115
+ "outputReferences": false,
116
+ "modify": [
117
+ { "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
118
+ },
119
+ "invalid": {
120
+ "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.form.feedback.icon.invalid}' viewBox='-2 -2 7 7'%3e%3cpath stroke='{color.form.feedback.icon.invalid}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E\")",
121
+ "type": "file",
122
+ "source": "$form-feedback-icon-invalid",
123
+ "outputReferences": false,
124
+ "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
125
+ }
126
+ }
127
+ }
128
+ }
129
+ }
130
+ }
131
+ }
package/tokens/src/themes/light/components/IconButton.json ADDED
@@ -0,0 +1,451 @@
1
+ {
2
+ "color": {
3
+ "icon-button": {
4
+ "bg": {
5
+ "base": { "value": "transparent", "type": "color", "source": "$btn-icon-bg" },
6
+ "primary": {
7
+ "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
8
+ "hover": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
9
+ "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
10
+ "inverse": {
11
+ "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
12
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
13
+ "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
14
+ },
15
+ "active": {
16
+ "base": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
17
+ "hover": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
18
+ "focus": { "value": "{color.icon-button.text.primary.base}", "type": "color" }
19
+ },
20
+ "inverse-active": {
21
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
22
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
23
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
24
+ }
25
+ },
26
+ "secondary": {
27
+ "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
28
+ "hover": { "value": "{color.secondary.base}", "type": "color" },
29
+ "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
30
+ "inverse": {
31
+ "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
32
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
33
+ "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
34
+ },
35
+ "active": {
36
+ "base": { "value": "{color.secondary.base}", "type": "color" },
37
+ "hover": { "value": "{color.icon-button.bg.secondary.active.base}", "type": "color" },
38
+ "focus": { "value": "{color.icon-button.bg.secondary.active.base}", "type": "color" }
39
+ },
40
+ "inverse-active": {
41
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
42
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
43
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
44
+ }
45
+ },
46
+ "brand": {
47
+ "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
48
+ "hover": { "value": "{color.brand.base}", "type": "color" },
49
+ "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
50
+ "inverse": {
51
+ "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
52
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
53
+ "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
54
+ },
55
+ "active": {
56
+ "base": { "value": "{color.brand.base}", "type": "color" },
57
+ "hover": { "value": "{color.icon-button.bg.brand.active.base}", "type": "color" },
58
+ "focus": { "value": "{color.icon-button.bg.brand.active.base}", "type": "color" }
59
+ },
60
+ "inverse-active": {
61
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
62
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
63
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
64
+ }
65
+ },
66
+ "success": {
67
+ "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
68
+ "hover": { "value": "{color.success.base}", "type": "color" },
69
+ "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
70
+ "inverse": {
71
+ "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
72
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
73
+ "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
74
+ },
75
+ "active": {
76
+ "base": { "value": "{color.success.base}", "type": "color" },
77
+ "hover": { "value": "{color.icon-button.bg.success.active.base}", "type": "color" },
78
+ "focus": { "value": "{color.icon-button.bg.success.active.base}", "type": "color" }
79
+ },
80
+ "inverse-active": {
81
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
82
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
83
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
84
+ }
85
+ },
86
+ "warning": {
87
+ "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
88
+ "hover": { "value": "{color.warning.base}", "type": "color" },
89
+ "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
90
+ "inverse": {
91
+ "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
92
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
93
+ "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
94
+ },
95
+ "active": {
96
+ "base": { "value": "{color.warning.base}", "type": "color" },
97
+ "hover": { "value": "{color.icon-button.bg.warning.active.base}", "type": "color" },
98
+ "focus": { "value": "{color.icon-button.bg.warning.active.base}", "type": "color" }
99
+ },
100
+ "inverse-active": {
101
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
102
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
103
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
104
+ }
105
+ },
106
+ "danger": {
107
+ "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
108
+ "hover": { "value": "{color.danger.base}", "type": "color" },
109
+ "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
110
+ "inverse": {
111
+ "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
112
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
113
+ "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
114
+ },
115
+ "active": {
116
+ "base": { "value": "{color.danger.base}", "type": "color" },
117
+ "hover": { "value": "{color.icon-button.bg.danger.active.base}", "type": "color" },
118
+ "focus": { "value": "{color.icon-button.bg.danger.active.base}", "type": "color" }
119
+ },
120
+ "inverse-active": {
121
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
122
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
123
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
124
+ }
125
+ },
126
+ "light": {
127
+ "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
128
+ "hover": { "value": "{color.light.base}", "type": "color" },
129
+ "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
130
+ "inverse": {
131
+ "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
132
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
133
+ "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
134
+ },
135
+ "active": {
136
+ "base": { "value": "{color.light.base}", "type": "color" },
137
+ "hover": { "value": "{color.icon-button.bg.light.active.base}", "type": "color" },
138
+ "focus": { "value": "{color.icon-button.bg.light.active.base}", "type": "color" }
139
+ },
140
+ "inverse-active": {
141
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
142
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
143
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
144
+ }
145
+ },
146
+ "dark": {
147
+ "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
148
+ "hover": { "value": "{color.dark.base}", "type": "color" },
149
+ "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
150
+ "inverse": {
151
+ "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
152
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
153
+ "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
154
+ },
155
+ "active": {
156
+ "base": { "value": "{color.dark.base}", "type": "color" },
157
+ "hover": { "value": "{color.icon-button.bg.dark.active.base}", "type": "color" },
158
+ "focus": { "value": "{color.icon-button.bg.dark.active.base}", "type": "color" }
159
+ },
160
+ "inverse-active": {
161
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
162
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
163
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
164
+ }
165
+ },
166
+ "black": {
167
+ "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
168
+ "hover": { "value": "{color.black}", "type": "color" },
169
+ "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
170
+ "inverse": {
171
+ "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
172
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
173
+ "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
174
+ },
175
+ "active": {
176
+ "base": { "value": "{color.black}", "type": "color" },
177
+ "hover": { "value": "{color.icon-button.bg.black.active.base}", "type": "color" },
178
+ "focus": { "value": "{color.icon-button.bg.black.active.base}", "type": "color" }
179
+ },
180
+ "inverse-active": {
181
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
182
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
183
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
184
+ }
185
+ }
186
+ },
187
+ "text": {
188
+ "primary": {
189
+ "base": { "value": "{color.primary.base}", "type": "color" },
190
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
191
+ "focus": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
192
+ "inverse": {
193
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
194
+ "hover": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
195
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
196
+ },
197
+ "active": {
198
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
199
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
200
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
201
+ },
202
+ "inverse-active": {
203
+ "base": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
204
+ "hover": { "value": "color.icon-button.text.primary.base", "type": "color" },
205
+ "focus": { "value": "{color.icon-button.text.primary.base}", "type": "color" }
206
+ }
207
+ },
208
+ "secondary": {
209
+ "base": { "value": "{color.secondary.base}", "type": "color" },
210
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
211
+ "focus": { "value": "{color.icon-button.text.secondary.base}", "type": "color" },
212
+ "inverse": {
213
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
214
+ "hover": { "value": "{color.secondary.base}", "type": "color" },
215
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
216
+ },
217
+ "active": {
218
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
219
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
220
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
221
+ },
222
+ "inverse-active": {
223
+ "base": { "value": "{color.secondary.base}", "type": "color" },
224
+ "hover": { "value": "{color.icon-button.text.secondary.inverse-active.base}", "type": "color" },
225
+ "focus": { "value": "{color.icon-button.text.secondary.inverse-active.base}", "type": "color" }
226
+ }
227
+ },
228
+ "brand": {
229
+ "base": { "value": "{color.brand.base}", "type": "color" },
230
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
231
+ "focus": { "value": "{color.icon-button.text.brand.base}", "type": "color" },
232
+ "inverse": {
233
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
234
+ "hover": { "value": "{color.brand.base}", "type": "color" },
235
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
236
+ },
237
+ "active": {
238
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
239
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
240
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
241
+ },
242
+ "inverse-active": {
243
+ "base": { "value": "{color.brand.base}", "type": "color" },
244
+ "hover": { "value": "{color.icon-button.text.brand.inverse-active.base}", "type": "color" },
245
+ "focus": { "value": "{color.icon-button.text.brand.inverse-active.base}", "type": "color" }
246
+ }
247
+ },
248
+ "success": {
249
+ "base": { "value": "{color.success.base}", "type": "color" },
250
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
251
+ "focus": { "value": "{color.icon-button.text.success.base}", "type": "color" },
252
+ "inverse": {
253
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
254
+ "hover": { "value": "{color.success.base}", "type": "color" },
255
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
256
+ },
257
+ "active": {
258
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
259
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
260
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
261
+ },
262
+ "inverse-active": {
263
+ "base": { "value": "{color.success.base}", "type": "color" },
264
+ "hover": { "value": "{color.icon-button.text.success.inverse-active.base}", "type": "color" },
265
+ "focus": { "value": "{color.icon-button.text.success.inverse-active.base}", "type": "color" }
266
+ }
267
+ },
268
+ "warning": {
269
+ "base": { "value": "{color.warning.base}", "type": "color" },
270
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
271
+ "focus": { "value": "{color.icon-button.text.warning.base}", "type": "color" },
272
+ "inverse": {
273
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
274
+ "hover": { "value": "{color.warning.base}", "type": "color" },
275
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
276
+ },
277
+ "active": {
278
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
279
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
280
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
281
+ },
282
+ "inverse-active": {
283
+ "base": { "value": "{color.warning.base}", "type": "color" },
284
+ "hover": { "value": "{color.icon-button.text.warning.inverse-active.base}", "type": "color" },
285
+ "focus": { "value": "{color.icon-button.text.warning.inverse-active.base}", "type": "color" }
286
+ }
287
+ },
288
+ "danger": {
289
+ "base": { "value": "{color.danger.base}", "type": "color" },
290
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
291
+ "focus": { "value": "{color.icon-button.text.danger.base}", "type": "color" },
292
+ "inverse": {
293
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
294
+ "hover": { "value": "{color.danger.base}", "type": "color" },
295
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
296
+ },
297
+ "active": {
298
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
299
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
300
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
301
+ },
302
+ "inverse-active": {
303
+ "base": { "value": "{color.danger.base}", "type": "color" },
304
+ "hover": { "value": "{color.icon-button.text.danger.inverse-active.base}", "type": "color" },
305
+ "focus": { "value": "{color.icon-button.text.danger.inverse-active.base}", "type": "color" }
306
+ }
307
+ },
308
+ "light": {
309
+ "base": { "value": "{color.light.base}", "type": "color" },
310
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
311
+ "focus": { "value": "{color.icon-button.text.light.base}", "type": "color" },
312
+ "inverse": {
313
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
314
+ "hover": { "value": "{color.light.base}", "type": "color" },
315
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
316
+ },
317
+ "active": {
318
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
319
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
320
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
321
+ },
322
+ "inverse-active": {
323
+ "base": { "value": "{color.light.base}", "type": "color" },
324
+ "hover": { "value": "{color.icon-button.text.light.inverse-active.base}", "type": "color" },
325
+ "focus": { "value": "{color.icon-button.text.light.inverse-active.base}", "type": "color" }
326
+ }
327
+ },
328
+ "dark": {
329
+ "base": { "value": "{color.dark.base}", "type": "color" },
330
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
331
+ "focus": { "value": "{color.icon-button.text.dark.base}", "type": "color" },
332
+ "inverse": {
333
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
334
+ "hover": { "value": "{color.dark.base}", "type": "color" },
335
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
336
+ },
337
+ "active": {
338
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
339
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
340
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
341
+ },
342
+ "inverse-active": {
343
+ "base": { "value": "{color.dark.base}", "type": "color" },
344
+ "hover": { "value": "{color.icon-button.text.dark.inverse-active.base}", "type": "color" },
345
+ "focus": { "value": "{color.icon-button.text.dark.inverse-active.base}", "type": "color" }
346
+ }
347
+ },
348
+ "black": {
349
+ "base": { "value": "{color.black}", "type": "color" },
350
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
351
+ "focus": { "value": "{color.icon-button.text.black.base}", "type": "color" },
352
+ "inverse": {
353
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
354
+ "hover": { "value": "{color.black}", "type": "color" },
355
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
356
+ },
357
+ "active": {
358
+ "base": { "value": "{color.icon-button.accent}", "type": "color" },
359
+ "hover": { "value": "{color.icon-button.accent}", "type": "color" },
360
+ "focus": { "value": "{color.icon-button.accent}", "type": "color" }
361
+ },
362
+ "inverse-active": {
363
+ "base": { "value": "{color.black}", "type": "color" },
364
+ "hover": { "value": "{color.icon-button.text.black.inverse-active.base}", "type": "color" },
365
+ "focus": { "value": "{color.icon-button.text.black.inverse-active.base}", "type": "color" }
366
+ }
367
+ }
368
+ },
369
+ "accent": { "value": "{color.white}", "type": "color", "source": "$btn-icon-accent-color" },
370
+ "black": { "value": "{color.black}", "type": "color", "source": "$btn-icon-black" }
371
+ }
372
+ },
373
+ "elevation": {
374
+ "icon-button": {
375
+ "box-shadow": {
376
+ "primary": {
377
+ "base": {
378
+ "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.primary.base}", "type": "shadow"
379
+ },
380
+ "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
381
+ "active": { "value": "none", "type": "shadow" },
382
+ "inverse-active": { "value": "none", "type": "shadow" }
383
+ },
384
+ "secondary": {
385
+ "base": {
386
+ "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.secondary.base}", "type": "shadow"
387
+ },
388
+ "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
389
+ "active": { "value": "none", "type": "shadow" },
390
+ "inverse-active": { "value": "none", "type": "shadow" }
391
+ },
392
+ "brand": {
393
+ "base": {
394
+ "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.brand.base}", "type": "shadow"
395
+ },
396
+ "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
397
+ "active": { "value": "none", "type": "shadow" },
398
+ "inverse-active": { "value": "none", "type": "shadow" }
399
+ },
400
+ "success": {
401
+ "base": {
402
+ "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.success.base}", "type": "shadow"
403
+ },
404
+ "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
405
+ "active": { "value": "none", "type": "shadow" },
406
+ "inverse-active": { "value": "none", "type": "shadow" }
407
+ },
408
+ "warning": {
409
+ "base": {
410
+ "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.warning.base}", "type": "shadow"
411
+ },
412
+ "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
413
+ "active": { "value": "none", "type": "shadow" },
414
+ "inverse-active": { "value": "none", "type": "shadow" }
415
+ },
416
+ "danger": {
417
+ "base": {
418
+ "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.danger.base}", "type": "shadow"
419
+ },
420
+ "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
421
+ "active": { "value": "none", "type": "shadow" },
422
+ "inverse-active": { "value": "none", "type": "shadow" }
423
+ },
424
+ "light": {
425
+ "base": {
426
+ "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.light.base}", "type": "shadow"
427
+ },
428
+ "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
429
+ "active": { "value": "none", "type": "shadow" },
430
+ "inverse-active": { "value": "none", "type": "shadow" }
431
+ },
432
+ "dark": {
433
+ "base": {
434
+ "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.dark.base}", "type": "shadow"
435
+ },
436
+ "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
437
+ "active": { "value": "none", "type": "shadow" },
438
+ "inverse-active": { "value": "none", "type": "shadow" }
439
+ },
440
+ "black": {
441
+ "base": {
442
+ "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.black.base}", "type": "shadow"
443
+ },
444
+ "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
445
+ "active": { "value": "none", "type": "shadow" },
446
+ "inverse-active": { "value": "none", "type": "shadow" }
447
+ }
448
+ }
449
+ }
450
+ }
451
+ }
package/tokens/src/themes/light/components/Image.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "color": {
3
+ "image": {
4
+ "figure-caption": { "value": "{color.gray.500}", "type": "color", "source": "$figure-caption-color" },
5
+ "thumbnail": {
6
+ "bg": { "value": "{color.body.bg}", "type": "color", "source": "$thumbnail-bg" },
7
+ "border": { "value": "{color.gray.200}", "type": "color", "source": "$thumbnail-border-color" }
8
+ }
9
+ }
10
+ },
11
+ "elevation": {
12
+ "image": {
13
+ "thumbnail": {
14
+ "box-shadow": { "value": "none", "type": "shadow", "source": "$thumbnail-box-shadow" }
15
+ }
16
+ }
17
+ }
18
+ }