@openedx/paragon 22.6.0 → 23.0.0-alpha.2

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 (564) hide show
  1. package/README.md +61 -21
  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 +15 -40
  15. package/dist/Button/index.js.map +1 -1
  16. package/dist/Button/index.scss +855 -372
  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/ChipIcon.d.ts +2 -2
  21. package/dist/Chip/ChipIcon.js.map +1 -1
  22. package/dist/Chip/index.d.ts +2 -2
  23. package/dist/Chip/index.js +2 -2
  24. package/dist/Chip/index.js.map +1 -1
  25. package/dist/Chip/index.scss +48 -38
  26. package/dist/Chip/mixins.scss +8 -3
  27. package/dist/ChipCarousel/index.scss +4 -4
  28. package/dist/CloseButton/index.scss +31 -2
  29. package/dist/Code/index.scss +47 -2
  30. package/dist/Collapsible/index.scss +15 -15
  31. package/dist/ColorPicker/index.scss +9 -11
  32. package/dist/DataTable/CollapsibleButtonGroup.js +2 -2
  33. package/dist/DataTable/CollapsibleButtonGroup.js.map +1 -1
  34. package/dist/DataTable/index.scss +48 -50
  35. package/dist/Dropdown/dropdown-bootstrap.scss +181 -0
  36. package/dist/Dropdown/index.js +0 -2
  37. package/dist/Dropdown/index.js.map +1 -1
  38. package/dist/Dropdown/index.scss +11 -12
  39. package/dist/Dropzone/index.scss +12 -14
  40. package/dist/Form/_FormText.scss +8 -8
  41. package/dist/Form/_bootstrap-custom-forms.scss +551 -0
  42. package/dist/Form/_bootstrap-forms.scss +381 -0
  43. package/dist/Form/_index.scss +168 -146
  44. package/dist/Form/_input-group.scss +188 -0
  45. package/dist/Form/_mixins.scss +216 -3
  46. package/dist/Hyperlink/index.js +32 -20
  47. package/dist/Hyperlink/index.js.map +1 -1
  48. package/dist/Hyperlink/index.scss +1 -1
  49. package/dist/Icon/index.d.ts +2 -4
  50. package/dist/Icon/index.js +1 -1
  51. package/dist/Icon/index.js.map +1 -1
  52. package/dist/Icon/index.scss +10 -12
  53. package/dist/IconButton/_mixins.scss +4 -0
  54. package/dist/IconButton/index.js +5 -11
  55. package/dist/IconButton/index.js.map +1 -1
  56. package/dist/IconButton/index.scss +387 -74
  57. package/dist/IconButtonToggle/index.scss +1 -1
  58. package/dist/Image/index.scss +53 -2
  59. package/dist/Menu/index.scss +25 -27
  60. package/dist/Modal/_ModalDialog.scss +52 -54
  61. package/dist/Modal/index.scss +6 -73
  62. package/dist/Nav/_mixins.scss +4 -4
  63. package/dist/Nav/index.scss +70 -66
  64. package/dist/Navbar/index.scss +276 -2
  65. package/dist/OverflowScroll/data/useOverflowScrollElementAttributes.js +3 -3
  66. package/dist/Overlay/index.js +2 -3
  67. package/dist/Overlay/index.js.map +1 -1
  68. package/dist/PageBanner/index.scss +17 -21
  69. package/dist/Pagination/index.scss +32 -34
  70. package/dist/Pagination/pagination-bootstrap.scss +83 -0
  71. package/dist/Popover/index.scss +9 -10
  72. package/dist/Popover/popover-bootstrap.scss +198 -0
  73. package/dist/ProductTour/Checkpoint.scss +71 -43
  74. package/dist/ProgressBar/_mixins.scss +22 -0
  75. package/dist/ProgressBar/bootstrap-progress.scss +49 -0
  76. package/dist/ProgressBar/index.scss +28 -36
  77. package/dist/Scrollable/index.scss +2 -2
  78. package/dist/SearchField/SearchFieldInput.js +2 -2
  79. package/dist/SearchField/SearchFieldInput.js.map +1 -1
  80. package/dist/SearchField/index.scss +15 -17
  81. package/dist/SelectableBox/index.scss +11 -13
  82. package/dist/Sheet/index.scss +10 -10
  83. package/dist/Spinner/index.scss +57 -2
  84. package/dist/Stack/index.scss +1 -3
  85. package/dist/Stepper/index.scss +20 -20
  86. package/dist/Sticky/index.scss +4 -6
  87. package/dist/Tabs/index.js +0 -2
  88. package/dist/Tabs/index.js.map +1 -1
  89. package/dist/Tabs/index.scss +29 -25
  90. package/dist/Toast/ToastContainer.scss +9 -11
  91. package/dist/Toast/bootstrap-toast.scss +46 -0
  92. package/dist/Toast/index.scss +9 -10
  93. package/dist/Tooltip/index.scss +136 -10
  94. package/dist/ValidationMessage/index.scss +1 -1
  95. package/dist/core.css +16777 -0
  96. package/dist/core.css.map +1 -0
  97. package/dist/core.min.css +2 -0
  98. package/dist/index.d.ts +2 -2
  99. package/dist/index.js +4 -18
  100. package/dist/index.scss +0 -4
  101. package/dist/light.css +4098 -0
  102. package/dist/light.css.map +1 -0
  103. package/dist/light.min.css +2 -0
  104. package/dist/theme-urls.json +21 -0
  105. package/dist/utils/breakpoints.js +1 -1
  106. package/lib/build-scss.js +188 -0
  107. package/lib/build-tokens.js +133 -0
  108. package/lib/help.js +36 -23
  109. package/lib/replace-variables.js +38 -0
  110. package/lib/utils.js +30 -0
  111. package/package.json +30 -14
  112. package/src/ActionRow/_index.scss +2 -4
  113. package/src/Alert/index.scss +41 -32
  114. package/src/Annotation/_mixins.scss +104 -0
  115. package/src/Annotation/index.scss +130 -103
  116. package/src/Avatar/index.scss +18 -20
  117. package/src/AvatarButton/index.scss +3 -5
  118. package/src/Badge/index.scss +112 -2
  119. package/src/Breadcrumb/index.scss +14 -16
  120. package/src/Bubble/index.scss +25 -12
  121. package/src/Button/{Button.test.tsx → Button.test.jsx} +2 -14
  122. package/src/Button/README.md +0 -84
  123. package/src/Button/__snapshots__/{Button.test.tsx.snap → Button.test.jsx.snap} +2 -19
  124. package/src/Button/_mixins.scss +14 -0
  125. package/src/Button/button-group.scss +126 -0
  126. package/src/Button/index.jsx +113 -0
  127. package/src/Button/index.scss +855 -372
  128. package/src/Card/card-bootstrap.scss +168 -0
  129. package/src/Card/index.scss +78 -79
  130. package/src/Carousel/index.scss +168 -2
  131. package/src/Chip/ChipIcon.tsx +1 -1
  132. package/src/Chip/index.scss +48 -38
  133. package/src/Chip/index.tsx +5 -5
  134. package/src/Chip/mixins.scss +8 -3
  135. package/src/ChipCarousel/index.scss +4 -4
  136. package/src/CloseButton/index.scss +31 -2
  137. package/src/Code/index.scss +47 -2
  138. package/src/Collapsible/index.scss +15 -15
  139. package/src/ColorPicker/index.scss +9 -11
  140. package/src/DataTable/CollapsibleButtonGroup.jsx +2 -2
  141. package/src/DataTable/index.scss +48 -50
  142. package/src/Dropdown/README.md +0 -93
  143. package/src/Dropdown/dropdown-bootstrap.scss +181 -0
  144. package/src/Dropdown/index.jsx +0 -2
  145. package/src/Dropdown/index.scss +11 -12
  146. package/src/Dropzone/index.scss +12 -14
  147. package/src/Form/_FormText.scss +8 -8
  148. package/src/Form/_bootstrap-custom-forms.scss +551 -0
  149. package/src/Form/_bootstrap-forms.scss +381 -0
  150. package/src/Form/_index.scss +168 -146
  151. package/src/Form/_input-group.scss +188 -0
  152. package/src/Form/_mixins.scss +216 -3
  153. package/src/Hyperlink/{Hyperlink.test.tsx → Hyperlink.test.jsx} +10 -21
  154. package/src/Hyperlink/{index.tsx → index.jsx} +37 -41
  155. package/src/Hyperlink/index.scss +1 -1
  156. package/src/Icon/index.d.ts +2 -4
  157. package/src/Icon/index.jsx +1 -1
  158. package/src/Icon/index.scss +10 -12
  159. package/src/IconButton/README.md +1 -15
  160. package/src/IconButton/__snapshots__/IconButton.test.jsx.snap +5 -28
  161. package/src/IconButton/_mixins.scss +4 -0
  162. package/src/IconButton/index.jsx +6 -13
  163. package/src/IconButton/index.scss +387 -74
  164. package/src/IconButtonToggle/index.scss +1 -1
  165. package/src/Image/index.scss +53 -2
  166. package/src/Menu/index.scss +25 -27
  167. package/src/Modal/_ModalDialog.scss +52 -54
  168. package/src/Modal/index.scss +6 -73
  169. package/src/Nav/_mixins.scss +4 -4
  170. package/src/Nav/index.scss +70 -66
  171. package/src/Navbar/index.scss +276 -2
  172. package/src/OverflowScroll/data/useOverflowScrollElementAttributes.js +3 -3
  173. package/src/Overlay/index.jsx +2 -3
  174. package/src/PageBanner/index.scss +17 -21
  175. package/src/Pagination/index.scss +32 -34
  176. package/src/Pagination/pagination-bootstrap.scss +83 -0
  177. package/src/Popover/index.scss +9 -10
  178. package/src/Popover/popover-bootstrap.scss +198 -0
  179. package/src/ProductTour/Checkpoint.scss +71 -43
  180. package/src/ProgressBar/_mixins.scss +22 -0
  181. package/src/ProgressBar/bootstrap-progress.scss +49 -0
  182. package/src/ProgressBar/index.scss +28 -36
  183. package/src/Scrollable/index.scss +2 -2
  184. package/src/SearchField/SearchFieldInput.jsx +2 -2
  185. package/src/SearchField/__snapshots__/SearchField.test.jsx.snap +12 -8
  186. package/src/SearchField/index.scss +15 -17
  187. package/src/SelectableBox/index.scss +11 -13
  188. package/src/Sheet/index.scss +10 -10
  189. package/src/Spinner/index.scss +57 -2
  190. package/src/Stack/index.scss +1 -3
  191. package/src/Stepper/index.scss +20 -20
  192. package/src/Sticky/index.scss +4 -6
  193. package/src/Tabs/README.md +1 -23
  194. package/src/Tabs/index.jsx +0 -3
  195. package/src/Tabs/index.scss +29 -25
  196. package/src/Toast/ToastContainer.scss +9 -11
  197. package/src/Toast/bootstrap-toast.scss +46 -0
  198. package/src/Toast/index.scss +9 -10
  199. package/src/Tooltip/index.scss +136 -10
  200. package/src/TransitionReplace/README.md +4 -4
  201. package/src/ValidationMessage/index.scss +1 -1
  202. package/src/index.d.ts +2 -2
  203. package/src/index.js +4 -18
  204. package/src/index.scss +0 -4
  205. package/src/{setupTest.ts → setupTest.js} +0 -7
  206. package/src/utils/breakpoints.js +1 -1
  207. package/styles/css/core/custom-media-breakpoints.css +17 -0
  208. package/styles/css/core/index.css +2 -0
  209. package/styles/css/core/variables.css +603 -0
  210. package/styles/css/themes/light/index.css +2 -0
  211. package/styles/css/themes/light/utility-classes.css +2454 -0
  212. package/styles/css/themes/light/variables.css +1644 -0
  213. package/{scss → styles/scss}/core/_functions.scss +1 -1
  214. package/styles/scss/core/_grid.scss +21 -0
  215. package/{scss → styles/scss}/core/_utilities.scss +17 -11
  216. package/styles/scss/core/_variables.scss +868 -0
  217. package/styles/scss/core/bootstrap-override/_functions.scss +104 -0
  218. package/styles/scss/core/bootstrap-override/_mixins.scss +4 -0
  219. package/styles/scss/core/bootstrap-override/_utilities.scss +4 -0
  220. package/styles/scss/core/bootstrap-override/bootstrap.scss +2 -0
  221. package/styles/scss/core/bootstrap-override/mixins/_grid-framework.scss +80 -0
  222. package/styles/scss/core/bootstrap-override/mixins/_grid.scss +69 -0
  223. package/styles/scss/core/bootstrap-override/mixins/_list-group.scss +22 -0
  224. package/styles/scss/core/bootstrap-override/utilities/_background.scss +7 -0
  225. package/styles/scss/core/bootstrap-override/utilities/_borders.scss +67 -0
  226. package/styles/scss/core/bootstrap-override/utilities/_spacing.scss +70 -0
  227. package/styles/scss/core/bootstrap-override/utilities/_text.scss +68 -0
  228. package/styles/scss/core/core.scss +21 -0
  229. package/{scss → styles/scss}/core/utilities-only.scss +1 -0
  230. package/tokens/README.md +157 -0
  231. package/tokens/css-utilities.js +56 -0
  232. package/tokens/map-scss-to-css.js +24 -0
  233. package/tokens/replace-variables.js +32 -0
  234. package/tokens/sass-helpers.js +98 -0
  235. package/tokens/src/core/alias/size.json +15 -0
  236. package/tokens/src/core/components/ActionRow.json +10 -0
  237. package/tokens/src/core/components/Alert.json +30 -0
  238. package/tokens/src/core/components/Annotation.json +25 -0
  239. package/tokens/src/core/components/Avatar.json +17 -0
  240. package/tokens/src/core/components/AvatarButton.json +11 -0
  241. package/tokens/src/core/components/Badge.json +33 -0
  242. package/tokens/src/core/components/Breadcrumb.json +23 -0
  243. package/tokens/src/core/components/Bubble.json +10 -0
  244. package/tokens/src/core/components/Button/core.json +105 -0
  245. package/tokens/src/core/components/Card.json +96 -0
  246. package/tokens/src/core/components/Carousel.json +37 -0
  247. package/tokens/src/core/components/Chip.json +41 -0
  248. package/tokens/src/core/components/ChipCarousel.json +15 -0
  249. package/tokens/src/core/components/CloseButton.json +14 -0
  250. package/tokens/src/core/components/Code.json +34 -0
  251. package/tokens/src/core/components/Collapsible.json +29 -0
  252. package/tokens/src/core/components/ColorPicker.json +8 -0
  253. package/tokens/src/core/components/Container.json +13 -0
  254. package/tokens/src/core/components/DataTable.json +27 -0
  255. package/tokens/src/core/components/Dropdown.json +67 -0
  256. package/tokens/src/core/components/Dropzone.json +21 -0
  257. package/tokens/src/core/components/Form/other.json +14 -0
  258. package/tokens/src/core/components/Form/size.json +229 -0
  259. package/tokens/src/core/components/Form/spacing.json +155 -0
  260. package/tokens/src/core/components/Form/transition.json +16 -0
  261. package/tokens/src/core/components/Form/typography.json +122 -0
  262. package/tokens/src/core/components/Icon.json +11 -0
  263. package/tokens/src/core/components/IconButton.json +15 -0
  264. package/tokens/src/core/components/Image.json +28 -0
  265. package/tokens/src/core/components/Menu.json +48 -0
  266. package/tokens/src/core/components/Modal.json +47 -0
  267. package/tokens/src/core/components/Nav.json +52 -0
  268. package/tokens/src/core/components/Navbar.json +70 -0
  269. package/tokens/src/core/components/Pagination.json +66 -0
  270. package/tokens/src/core/components/Popover.json +48 -0
  271. package/tokens/src/core/components/ProductTour.json +32 -0
  272. package/tokens/src/core/components/ProgressBar.json +39 -0
  273. package/tokens/src/core/components/SearchField.json +23 -0
  274. package/tokens/src/core/components/SelectableBox.json +9 -0
  275. package/tokens/src/core/components/Sheet.json +10 -0
  276. package/tokens/src/core/components/Spinner.json +19 -0
  277. package/tokens/src/core/components/Stack.json +7 -0
  278. package/tokens/src/core/components/Stepper.json +42 -0
  279. package/tokens/src/core/components/Sticky.json +7 -0
  280. package/tokens/src/core/components/Tab.json +19 -0
  281. package/tokens/src/core/components/Tabs.json +19 -0
  282. package/tokens/src/core/components/Toast.json +30 -0
  283. package/tokens/src/core/components/Tooltip.json +33 -0
  284. package/tokens/src/core/components/general/caret.json +13 -0
  285. package/tokens/src/core/components/general/headings.json +16 -0
  286. package/tokens/src/core/components/general/hr.json +10 -0
  287. package/tokens/src/core/components/general/input.json +51 -0
  288. package/tokens/src/core/components/general/link.json +30 -0
  289. package/tokens/src/core/components/general/list.json +26 -0
  290. package/tokens/src/core/components/general/text.json +24 -0
  291. package/tokens/src/core/global/breakpoints.json +12 -0
  292. package/tokens/src/core/global/display.json +22 -0
  293. package/tokens/src/core/global/elevation.json +19 -0
  294. package/tokens/src/core/global/other.json +4 -0
  295. package/tokens/src/core/global/spacing.json +37 -0
  296. package/tokens/src/core/global/transition.json +14 -0
  297. package/tokens/src/core/global/typography.json +91 -0
  298. package/tokens/src/core/utilities/color.json +12 -0
  299. package/tokens/src/themes/light/alias/color.json +114 -0
  300. package/tokens/src/themes/light/components/Alert.json +38 -0
  301. package/tokens/src/themes/light/components/Annotation.json +29 -0
  302. package/tokens/src/themes/light/components/Avatar.json +7 -0
  303. package/tokens/src/themes/light/components/Badge.json +186 -0
  304. package/tokens/src/themes/light/components/Breadcrumb.json +13 -0
  305. package/tokens/src/themes/light/components/Bubble.json +18 -0
  306. package/tokens/src/themes/light/components/Button/brand.json +260 -0
  307. package/tokens/src/themes/light/components/Button/core.json +24 -0
  308. package/tokens/src/themes/light/components/Button/danger.json +247 -0
  309. package/tokens/src/themes/light/components/Button/dark.json +230 -0
  310. package/tokens/src/themes/light/components/Button/info.json +238 -0
  311. package/tokens/src/themes/light/components/Button/light.json +236 -0
  312. package/tokens/src/themes/light/components/Button/primary.json +250 -0
  313. package/tokens/src/themes/light/components/Button/secondary.json +278 -0
  314. package/tokens/src/themes/light/components/Button/success.json +253 -0
  315. package/tokens/src/themes/light/components/Button/tertiary.json +109 -0
  316. package/tokens/src/themes/light/components/Button/warning.json +276 -0
  317. package/tokens/src/themes/light/components/Card.json +36 -0
  318. package/tokens/src/themes/light/components/Carousel.json +45 -0
  319. package/tokens/src/themes/light/components/Chip.json +50 -0
  320. package/tokens/src/themes/light/components/CloseButton.json +10 -0
  321. package/tokens/src/themes/light/components/Code.json +23 -0
  322. package/tokens/src/themes/light/components/DataTable.json +26 -0
  323. package/tokens/src/themes/light/components/Dropdown.json +41 -0
  324. package/tokens/src/themes/light/components/Dropzone.json +23 -0
  325. package/tokens/src/themes/light/components/Form/color.json +270 -0
  326. package/tokens/src/themes/light/components/Form/elevation.json +76 -0
  327. package/tokens/src/themes/light/components/Form/other.json +131 -0
  328. package/tokens/src/themes/light/components/IconButton.json +451 -0
  329. package/tokens/src/themes/light/components/Image.json +18 -0
  330. package/tokens/src/themes/light/components/Menu.json +30 -0
  331. package/tokens/src/themes/light/components/Modal.json +37 -0
  332. package/tokens/src/themes/light/components/Nav.json +166 -0
  333. package/tokens/src/themes/light/components/Navbar.json +136 -0
  334. package/tokens/src/themes/light/components/OverflowScroll.json +9 -0
  335. package/tokens/src/themes/light/components/PageBanner.json +24 -0
  336. package/tokens/src/themes/light/components/Pagination.json +45 -0
  337. package/tokens/src/themes/light/components/Popover.json +55 -0
  338. package/tokens/src/themes/light/components/ProductTour.json +35 -0
  339. package/tokens/src/themes/light/components/ProgressBar.json +20 -0
  340. package/tokens/src/themes/light/components/Scrollable.json +14 -0
  341. package/tokens/src/themes/light/components/SearchField.json +25 -0
  342. package/tokens/src/themes/light/components/Sheet.json +22 -0
  343. package/tokens/src/themes/light/components/Stepper.json +34 -0
  344. package/tokens/src/themes/light/components/Sticky.json +18 -0
  345. package/tokens/src/themes/light/components/Tab.json +62 -0
  346. package/tokens/src/themes/light/components/Toast.json +33 -0
  347. package/tokens/src/themes/light/components/Tooltip.json +30 -0
  348. package/tokens/src/themes/light/components/general/body.json +8 -0
  349. package/tokens/src/themes/light/components/general/headings.json +7 -0
  350. package/tokens/src/themes/light/components/general/hr.json +15 -0
  351. package/tokens/src/themes/light/components/general/input.json +18 -0
  352. package/tokens/src/themes/light/components/general/link.json +109 -0
  353. package/tokens/src/themes/light/components/general/list.json +38 -0
  354. package/tokens/src/themes/light/components/general/text.json +12 -0
  355. package/tokens/src/themes/light/global/color.json +1661 -0
  356. package/tokens/src/themes/light/global/elevation.json +201 -0
  357. package/tokens/src/themes/light/global/other.json +4 -0
  358. package/tokens/style-dictionary.js +229 -0
  359. package/tokens/utils.js +210 -0
  360. package/dist/ActionRow/_variables.scss +0 -2
  361. package/dist/Alert/_variables.scss +0 -24
  362. package/dist/Annotation/_variables.scss +0 -18
  363. package/dist/Avatar/_variables.scss +0 -10
  364. package/dist/AvatarButton/_variables.scss +0 -3
  365. package/dist/Badge/_variables.scss +0 -16
  366. package/dist/Breadcrumb/_variables.scss +0 -27
  367. package/dist/Bubble/_variables.scss +0 -8
  368. package/dist/Button/_variables.scss +0 -52
  369. package/dist/Button/deprecated/index.js +0 -149
  370. package/dist/Button/deprecated/index.js.map +0 -1
  371. package/dist/Button/index.d.ts +0 -35
  372. package/dist/Card/_variables.scss +0 -55
  373. package/dist/Carousel/_variables.scss +0 -27
  374. package/dist/CheckBox/index.js +0 -102
  375. package/dist/CheckBox/index.js.map +0 -1
  376. package/dist/CheckBoxGroup/index.js +0 -15
  377. package/dist/CheckBoxGroup/index.js.map +0 -1
  378. package/dist/Chip/_variables.scss +0 -28
  379. package/dist/ChipCarousel/_variables.scss +0 -3
  380. package/dist/CloseButton/_variables.scss +0 -6
  381. package/dist/Code/_variables.scss +0 -17
  382. package/dist/Collapsible/_variables.scss +0 -12
  383. package/dist/ColorPicker/_variables.scss +0 -2
  384. package/dist/Container/_variables.scss +0 -5
  385. package/dist/DataTable/_variables.scss +0 -11
  386. package/dist/Dropdown/_variables.scss +0 -33
  387. package/dist/Dropdown/deprecated/DropdownButton.js +0 -44
  388. package/dist/Dropdown/deprecated/DropdownButton.js.map +0 -1
  389. package/dist/Dropdown/deprecated/DropdownItem.js +0 -33
  390. package/dist/Dropdown/deprecated/DropdownItem.js.map +0 -1
  391. package/dist/Dropdown/deprecated/DropdownMenu.js +0 -46
  392. package/dist/Dropdown/deprecated/DropdownMenu.js.map +0 -1
  393. package/dist/Dropdown/deprecated/index.js +0 -241
  394. package/dist/Dropdown/deprecated/index.js.map +0 -1
  395. package/dist/Dropzone/_variables.scss +0 -9
  396. package/dist/Fieldset/index.js +0 -117
  397. package/dist/Fieldset/index.js.map +0 -1
  398. package/dist/Fieldset/index.scss +0 -12
  399. package/dist/Form/_variables.scss +0 -267
  400. package/dist/Hyperlink/index.d.ts +0 -24
  401. package/dist/Icon/_variables.scss +0 -7
  402. package/dist/Image/_variables.scss +0 -13
  403. package/dist/Input/index.js +0 -166
  404. package/dist/Input/index.js.map +0 -1
  405. package/dist/InputSelect/index.js +0 -105
  406. package/dist/InputSelect/index.js.map +0 -1
  407. package/dist/InputText/index.js +0 -45
  408. package/dist/InputText/index.js.map +0 -1
  409. package/dist/ListBox/index.js +0 -148
  410. package/dist/ListBox/index.js.map +0 -1
  411. package/dist/ListBoxOption/index.js +0 -94
  412. package/dist/ListBoxOption/index.js.map +0 -1
  413. package/dist/Menu/_variables.scss +0 -24
  414. package/dist/Modal/_variables.scss +0 -50
  415. package/dist/Modal/index.js +0 -292
  416. package/dist/Modal/index.js.map +0 -1
  417. package/dist/Nav/_variables.scss +0 -58
  418. package/dist/Navbar/_variables.scss +0 -40
  419. package/dist/OverflowScroll/_variables.scss +0 -5
  420. package/dist/OverflowScroll/index.scss +0 -1
  421. package/dist/Pagination/_variables.scss +0 -19
  422. package/dist/Popover/_variables.scss +0 -36
  423. package/dist/ProductTour/_variables.scss +0 -15
  424. package/dist/ProgressBar/_variables.scss +0 -23
  425. package/dist/RadioButtonGroup/index.js +0 -188
  426. package/dist/RadioButtonGroup/index.js.map +0 -1
  427. package/dist/SearchField/_variables.scss +0 -14
  428. package/dist/SelectableBox/_variables.scss +0 -5
  429. package/dist/Spinner/_variables.scss +0 -9
  430. package/dist/Stack/_variables.scss +0 -1
  431. package/dist/StatusAlert/index.js +0 -168
  432. package/dist/StatusAlert/index.js.map +0 -1
  433. package/dist/Stepper/_variables.scss +0 -18
  434. package/dist/Sticky/_variables.scss +0 -3
  435. package/dist/Table/_variables.scss +0 -34
  436. package/dist/Table/index.js +0 -267
  437. package/dist/Table/index.js.map +0 -1
  438. package/dist/Table/index.scss +0 -12
  439. package/dist/Tabs/_variables.scss +0 -24
  440. package/dist/Tabs/deprecated/Tabs.scss +0 -3
  441. package/dist/Tabs/deprecated/index.js +0 -123
  442. package/dist/Tabs/deprecated/index.js.map +0 -1
  443. package/dist/TextArea/index.js +0 -44
  444. package/dist/TextArea/index.js.map +0 -1
  445. package/dist/Toast/_variables.scss +0 -19
  446. package/dist/Tooltip/_variables.scss +0 -21
  447. package/dist/ValidationFormGroup/index.js +0 -106
  448. package/dist/ValidationFormGroup/index.js.map +0 -1
  449. package/dist/paragon.css +0 -45
  450. package/dist/setupTest.d.ts +0 -2
  451. package/dist/setupTest.js.map +0 -1
  452. package/dist/utils/types/bootstrap.d.ts +0 -39
  453. package/dist/utils/types/bootstrap.js +0 -2
  454. package/dist/utils/types/bootstrap.js.map +0 -1
  455. package/scss/core/_grid.scss +0 -21
  456. package/scss/core/_variables.scss +0 -875
  457. package/scss/core/core.scss +0 -21
  458. package/src/ActionRow/_variables.scss +0 -2
  459. package/src/Alert/_variables.scss +0 -24
  460. package/src/Annotation/_variables.scss +0 -18
  461. package/src/Avatar/_variables.scss +0 -10
  462. package/src/AvatarButton/_variables.scss +0 -3
  463. package/src/Badge/_variables.scss +0 -16
  464. package/src/Breadcrumb/_variables.scss +0 -27
  465. package/src/Bubble/_variables.scss +0 -8
  466. package/src/Button/_variables.scss +0 -52
  467. package/src/Button/deprecated/Button.test.jsx +0 -34
  468. package/src/Button/deprecated/index.jsx +0 -145
  469. package/src/Button/index.tsx +0 -159
  470. package/src/Card/_variables.scss +0 -55
  471. package/src/Carousel/_variables.scss +0 -27
  472. package/src/CheckBox/CheckBox.test.jsx +0 -65
  473. package/src/CheckBox/README.md +0 -93
  474. package/src/CheckBox/index.jsx +0 -80
  475. package/src/CheckBoxGroup/CheckBoxGroup.test.jsx +0 -33
  476. package/src/CheckBoxGroup/README.md +0 -35
  477. package/src/CheckBoxGroup/index.jsx +0 -19
  478. package/src/Chip/_variables.scss +0 -28
  479. package/src/ChipCarousel/_variables.scss +0 -3
  480. package/src/CloseButton/_variables.scss +0 -6
  481. package/src/Code/_variables.scss +0 -17
  482. package/src/Collapsible/_variables.scss +0 -12
  483. package/src/ColorPicker/_variables.scss +0 -2
  484. package/src/Container/_variables.scss +0 -5
  485. package/src/DataTable/_variables.scss +0 -11
  486. package/src/Dropdown/_variables.scss +0 -33
  487. package/src/Dropdown/deprecated/Dropdown.test.jsx +0 -238
  488. package/src/Dropdown/deprecated/DropdownButton.jsx +0 -52
  489. package/src/Dropdown/deprecated/DropdownItem.jsx +0 -34
  490. package/src/Dropdown/deprecated/DropdownMenu.jsx +0 -50
  491. package/src/Dropdown/deprecated/__snapshots__/Dropdown.test.jsx.snap +0 -229
  492. package/src/Dropdown/deprecated/index.jsx +0 -222
  493. package/src/Dropzone/_variables.scss +0 -9
  494. package/src/Fieldset/Fieldset.test.jsx +0 -101
  495. package/src/Fieldset/README.md +0 -146
  496. package/src/Fieldset/index.jsx +0 -107
  497. package/src/Fieldset/index.scss +0 -12
  498. package/src/Form/_variables.scss +0 -267
  499. package/src/Icon/_variables.scss +0 -7
  500. package/src/Image/_variables.scss +0 -13
  501. package/src/Input/README.md +0 -74
  502. package/src/Input/__snapshots__/input.test.jsx.snap +0 -53
  503. package/src/Input/index.jsx +0 -151
  504. package/src/Input/input.test.jsx +0 -85
  505. package/src/InputSelect/README.md +0 -136
  506. package/src/InputSelect/index.jsx +0 -92
  507. package/src/InputText/InputText.test.jsx +0 -74
  508. package/src/InputText/README.md +0 -293
  509. package/src/InputText/index.jsx +0 -49
  510. package/src/ListBox/ListBox.test.jsx +0 -161
  511. package/src/ListBox/README.md +0 -185
  512. package/src/ListBox/index.jsx +0 -115
  513. package/src/ListBoxOption/ListBoxOption.test.jsx +0 -154
  514. package/src/ListBoxOption/index.jsx +0 -78
  515. package/src/Menu/_variables.scss +0 -24
  516. package/src/Modal/README.md +0 -148
  517. package/src/Modal/_variables.scss +0 -50
  518. package/src/Modal/index.jsx +0 -319
  519. package/src/Modal/tests/Modal.test.jsx +0 -261
  520. package/src/Nav/_variables.scss +0 -58
  521. package/src/Navbar/_variables.scss +0 -40
  522. package/src/OverflowScroll/_variables.scss +0 -5
  523. package/src/OverflowScroll/index.scss +0 -1
  524. package/src/Pagination/_variables.scss +0 -19
  525. package/src/Popover/_variables.scss +0 -36
  526. package/src/ProductTour/_variables.scss +0 -15
  527. package/src/ProgressBar/_variables.scss +0 -23
  528. package/src/RadioButtonGroup/README.md +0 -50
  529. package/src/RadioButtonGroup/RadioButtonGroup.test.jsx +0 -127
  530. package/src/RadioButtonGroup/index.jsx +0 -185
  531. package/src/SearchField/_variables.scss +0 -14
  532. package/src/SelectableBox/_variables.scss +0 -5
  533. package/src/Spinner/_variables.scss +0 -9
  534. package/src/Stack/_variables.scss +0 -1
  535. package/src/StatusAlert/README.md +0 -149
  536. package/src/StatusAlert/StatusAlert.test.jsx +0 -150
  537. package/src/StatusAlert/index.jsx +0 -144
  538. package/src/Stepper/_variables.scss +0 -18
  539. package/src/Sticky/_variables.scss +0 -3
  540. package/src/Table/README.md +0 -506
  541. package/src/Table/Table.test.jsx +0 -367
  542. package/src/Table/_variables.scss +0 -34
  543. package/src/Table/index.jsx +0 -264
  544. package/src/Table/index.scss +0 -12
  545. package/src/Tabs/_variables.scss +0 -24
  546. package/src/Tabs/deprecated/Tabs.scss +0 -3
  547. package/src/Tabs/deprecated/Tabs.test.jsx +0 -50
  548. package/src/Tabs/deprecated/index.jsx +0 -117
  549. package/src/TextArea/README.md +0 -63
  550. package/src/TextArea/index.jsx +0 -48
  551. package/src/Toast/_variables.scss +0 -19
  552. package/src/Tooltip/_variables.scss +0 -21
  553. package/src/ValidationFormGroup/README.md +0 -116
  554. package/src/ValidationFormGroup/ValidationFormGroup.test.jsx +0 -146
  555. package/src/ValidationFormGroup/__snapshots__/ValidationFormGroup.test.jsx.snap +0 -161
  556. package/src/ValidationFormGroup/index.jsx +0 -114
  557. package/src/utils/types/bootstrap.test.tsx +0 -86
  558. package/src/utils/types/bootstrap.ts +0 -43
  559. /package/src/Button/{ButtonGroup.test.tsx → ButtonGroup.test.jsx} +0 -0
  560. /package/src/Button/{ButtonToolbar.test.tsx → ButtonToolbar.test.jsx} +0 -0
  561. /package/src/Button/__snapshots__/{ButtonGroup.test.tsx.snap → ButtonGroup.test.jsx.snap} +0 -0
  562. /package/src/Button/__snapshots__/{ButtonToolbar.test.tsx.snap → ButtonToolbar.test.jsx.snap} +0 -0
  563. /package/{scss → styles/scss}/core/_exports.module.scss +0 -0
  564. /package/{scss → styles/scss}/core/_typography.scss +0 -0
package/dist/Button/index.scss CHANGED
@@ -1,219 +1,96 @@
1
- @import "variables";
2
- @import "~bootstrap/scss/button-group";
1
+ @import "mixins";
2
+ @import "button-group";
3
3
 
4
- @mixin button-variant(
5
- $background, $border, $hover-background: darken($background, 7.5%),
6
- $hover-border: darken($border, 10%), $active-background: darken($background, 10%),
7
- $active-border: darken($border, 12.5%), $color: color-yiq($background), $hover-color: color-yiq($hover-background),
8
- $active-color: color-yiq($active-background)
9
- ) {
10
- color: $color;
11
-
12
- @include gradient-bg($background);
13
-
14
- border-color: $border;
15
-
16
- @include box-shadow($btn-box-shadow);
17
-
18
- @include hover {
19
- color: $hover-color;
20
-
21
- @include gradient-bg($hover-background);
22
-
23
- border-color: $hover-border;
24
- }
25
-
26
- // Disabled comes first so active can properly restyle
27
- &.disabled,
28
- &:disabled {
29
- color: $color;
30
- background-color: $background;
31
- border-color: $border;
32
-
33
- // Remove CSS gradients if they're enabled
34
- @if $enable-gradients {
35
- background-image: none;
36
- }
37
- }
38
-
39
- &:not(:disabled):not(.disabled):active,
40
- &:not(:disabled):not(.disabled).active,
41
- .show > &.dropdown-toggle {
42
- color: $active-color;
43
- background-color: $active-background;
44
-
45
- @if $enable-gradients {
46
- background-image: none; // Remove the gradient for the pressed/active state
47
- }
48
-
49
- border-color: $active-border;
50
- }
51
- }
52
-
53
- // OVERRIDE FROM BOOTSTRAP
54
- // We do this to better control active and focus states.
55
- @mixin button-outline-variant(
56
- $color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color
57
- ) {
58
- color: $color;
59
- border-color: $color;
60
-
61
- @include hover {
62
- color: $color-hover;
63
- background-color: $active-background;
64
- border-color: $active-border;
65
- }
66
-
67
- &.disabled,
68
- &:disabled {
69
- color: $color;
70
- background-color: transparent;
71
- border-color: $color;
72
- }
73
-
74
- &:not(:disabled):not(.disabled):active,
75
- &:not(:disabled):not(.disabled).active,
76
- .show > &.dropdown-toggle {
77
- color: color-yiq($active-background);
78
- background-color: $active-background;
79
- border-color: $active-border;
80
- }
81
- }
82
-
83
- // OVERRIDE FROM BOOTSTRAP
84
- // No changes made. We do this to keep all button related mixins together,
85
- //
86
- // Button sizes
87
- @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
88
- padding: $padding-y $padding-x;
89
-
90
- @include font-size($font-size);
91
-
92
- line-height: $line-height;
93
-
94
- // Manually declare to provide an override to the browser default
95
- @include border-radius($border-radius, 0);
96
- }
4
+ .btn {
5
+ display: inline-flex;
6
+ align-items: center;
7
+ justify-content: center;
8
+ font-family: var(--pgn-typography-btn-font-family);
9
+ font-weight: var(--pgn-typography-btn-font-weight);
10
+ text-align: center;
11
+ vertical-align: middle;
12
+ user-select: none;
13
+ border: var(--pgn-size-btn-border-width) solid var(--pgn-btn-border-color, transparent);
14
+ color: var(--pgn-btn-color, var(--pgn-color-body-base));
15
+ background-color: var(--pgn-btn-bg, transparent);
16
+ transition: var(--pgn-transition-btn);
97
17
 
98
- // ------------------------
99
- // BELOW ARE EDX EXTENSIONS
100
- // ------------------------
18
+ @include button-size(
19
+ var(--pgn-spacing-btn-padding-y-base),
20
+ var(--pgn-spacing-btn-padding-x-base),
21
+ var(--pgn-typography-btn-font-size-base),
22
+ var(--pgn-typography-btn-line-height-base),
23
+ var(--pgn-size-btn-border-radius-base)
24
+ );
101
25
 
102
- //
103
- // A new variant of button (inverse)
104
- //
105
- @mixin button-inverse-variant(
106
- $color, $background: color-yiq($color), $active-background: $color, $active-border: $color
107
- ) {
108
- color: $color;
109
- border-color: transparent;
110
- background-color: $background;
111
-
112
- &:not(:disabled):not(.disabled) {
113
- @include hover {
114
- color: darken($color, 7.5%);
115
- background-color: darken($background, 7.5%);
116
- border-color: transparent;
117
- }
118
- }
26
+ &:not(:disabled):not(.disabled):not(.btn-link) {
27
+ &.focus,
28
+ &:focus {
29
+ position: relative;
30
+ outline: 0;
31
+ box-shadow: none;
32
+ background: var(--pgn-btn-focus-bg, transparent);
33
+ border-color: var(--pgn-btn-focus-border-color, transparent);
34
+ color: var(--pgn-btn-focus-color, var(--pgn-color-body-base));
119
35
 
120
- &.disabled,
121
- &:disabled {
122
- color: $color;
123
- background-color: $background;
124
- }
36
+ &::before {
37
+ content: "";
38
+ position: absolute;
39
+ top: calc(var(--pgn-spacing-btn-focus-distance-to-border) * -1);
40
+ right: calc(var(--pgn-spacing-btn-focus-distance-to-border) * -1);
41
+ bottom: calc(var(--pgn-spacing-btn-focus-distance-to-border) * -1);
42
+ left: calc(var(--pgn-spacing-btn-focus-distance-to-border) * -1);
43
+ border: solid var(--pgn-size-btn-focus-width) var(--pgn-btn-focus-outline-color, var(--pgn-color-body-base));
44
+ border-radius: var(--pgn-size-btn-focus-border-radius-base);
45
+ }
125
46
 
126
- &:not(:disabled):not(.disabled):active,
127
- &:not(:disabled):not(.disabled).active,
128
- .show > &.dropdown-toggle {
129
- color: darken($color, 10%);
130
- background: #EEEEEE;
131
- }
132
- }
47
+ &.btn-lg::before {
48
+ border-radius: var(--pgn-size-btn-focus-border-radius-lg);
49
+ }
133
50
 
134
- @mixin button-focus($ring-color) {
135
- &.focus,
136
- &:focus {
137
- position: relative;
138
- outline: 0;
139
- box-shadow: none;
51
+ &.btn-sm::before {
52
+ border-radius: var(--pgn-size-btn-focus-border-radius-sm);
53
+ }
140
54
 
141
- &::before {
142
- content: "";
143
- position: absolute;
144
- top: -1 * $btn-focus-distance-to-border;
145
- right: -1 * $btn-focus-distance-to-border;
146
- bottom: -1 * $btn-focus-distance-to-border;
147
- left: -1 * $btn-focus-distance-to-border;
148
- border: solid $btn-focus-width $ring-color;
149
- border-radius: $btn-focus-border-radius;
150
- }
55
+ &:active,
56
+ &.active {
57
+ &::before {
58
+ opacity: .75;
59
+ }
60
+ }
151
61
 
152
- &.btn-lg::before {
153
- border-radius: $btn-focus-border-radius-lg;
62
+ &:disabled,
63
+ &.disabled {
64
+ &::before {
65
+ display: none;
66
+ }
67
+ }
154
68
  }
155
69
 
156
- &.btn-sm::before {
157
- border-radius: $btn-focus-border-radius-sm;
70
+ &:hover {
71
+ color: var(--pgn-btn-hover-color, var(--pgn-color-body-base));
72
+ background-color: var(--pgn-btn-hover-bg, transparent);
73
+ border-color: var(--pgn-btn-hover-border-color, transparent);
74
+ text-decoration: none;
158
75
  }
159
76
 
160
77
  &:active,
161
- &.active {
162
- &::before {
163
- opacity: .75;
164
- }
165
- }
166
-
167
- // Disabled buttons should not have focus rings
168
- &:disabled,
169
- &.disabled {
170
- &::before {
171
- display: none;
172
- }
78
+ &.active,
79
+ .show > &.dropdown-toggle {
80
+ color: var(--pgn-btn-active-color, inherit);
81
+ background-color: var(--pgn-btn-active-bg, inherit);
82
+ border-color: var(--pgn-btn-active-border-color, transparent);
173
83
  }
174
84
  }
175
- }
176
85
 
177
- //
178
- // Override Bootstrap's button definition.
179
- // We do this to get more control over focus
180
- // and hover states, as well as to define
181
- // an extra button variant: btn-inverse-${color}
182
- //
183
-
184
- //
185
- // Base styles
186
- //
187
-
188
- .btn {
189
- display: inline-flex;
190
- align-items: center;
191
- justify-content: center;
192
- font-family: $btn-font-family;
193
- font-weight: $btn-font-weight;
194
- color: $body-color;
195
- text-align: center;
196
- vertical-align: middle;
197
- user-select: none;
198
- background-color: transparent;
199
- border: $btn-border-width solid transparent;
200
-
201
- @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
202
- @include transition($btn-transition);
203
-
204
- @include hover {
205
- color: $body-color;
206
- text-decoration: none;
207
- }
208
-
209
- // Disabled comes first so active can properly restyle
210
86
  &.disabled,
211
87
  &:disabled {
212
- opacity: $btn-disabled-opacity;
88
+ color: var(--pgn-btn-disabled-color, inherit);
89
+ background-color: var(--pgn-btn-disabled-bg, inherit);
90
+ border-color: var(--pgn-btn-disabled-border-color, transparent);
91
+ opacity: var(--pgn-other-btn-disabled-opacity);
213
92
  }
214
93
 
215
- // Button Icon Sizes
216
-
217
94
  .btn-icon-before {
218
95
  margin-inline-end: .5rem;
219
96
  margin-left: -.25em;
@@ -241,193 +118,32 @@ fieldset:disabled a.btn {
241
118
  pointer-events: none;
242
119
  }
243
120
 
244
- //
245
- // Alternate buttons
246
- //
247
-
248
- @each $color, $value in $theme-colors {
249
- .btn-#{$color} {
250
- $background: $value;
251
- $border: $value;
252
-
253
- $hover-background: theme-color($color, "hover");
254
- $hover-border: theme-color($color, "hover");
255
- $active-background: theme-color($color, "active");
256
- $active-border: theme-color($color, "active");
257
-
258
- // Defaults
259
- $hover-background: darken($background, 7.5%) !default;
260
- $hover-border: darken($border, 10%) !default;
261
- $active-background: darken($background, 10%) !default;
262
- $active-border: darken($border, 12.5%) !default;
263
-
264
- @include button-variant(
265
- $background,
266
- $border,
267
- $hover-background,
268
- $hover-border,
269
- $active-background,
270
- $active-border
271
- );
272
- @include button-focus(theme-color($color, "focus"));
273
- }
274
-
275
- .btn-outline-#{$color} {
276
- $text-and-border: $value;
277
-
278
- $color-hover: theme-color($color, "hover");
279
- $active-background: theme-color($color, "background");
280
- $active-border: theme-color($color, "active");
281
-
282
- // Defaults
283
- $color-hover: color-yiq($value) !default;
284
- $active-background: $value !default;
285
- $active-border: $value !default;
286
-
287
- @include button-outline-variant(
288
- $text-and-border,
289
- $color-hover,
290
- $active-background,
291
- $active-border,
292
- );
293
- @include button-focus(theme-color($color, "focus"));
294
- }
295
-
296
- .btn-inverse-#{$color} {
297
- $text: $value;
298
-
299
- $active-background: theme-color($color, "background");
300
- $active-border: theme-color($color, "active");
301
-
302
- // Defaults
303
- $background: color-yiq($value) !default;
304
- $active-background: $value !default;
305
- $active-border: $value !default;
306
-
307
- @include button-inverse-variant(
308
- $text,
309
- $background,
310
- $active-background,
311
- $active-border,
312
- );
313
- @include button-focus($white);
314
- }
315
-
316
- .btn-inverse-outline-#{$color} {
317
- $text-and-border: $white;
318
-
319
- $color-hover: theme-color($color, "hover");
320
- $active-background: theme-color($color, "background");
321
- $active-border: transparent;
322
-
323
- // Defaults
324
- $color-hover: color-yiq($value) !default;
325
- $active-background: $value !default;
326
- $active-border: $value !default;
327
-
328
- @include button-outline-variant(
329
- $text-and-border,
330
- $color-hover,
331
- $active-background,
332
- $active-border,
333
- );
334
- @include button-focus($white);
335
- }
336
- }
337
-
338
- //
339
- // Tertiary buttons
340
- //
341
-
342
- .btn-tertiary {
343
- $background: $btn-tertiary-bg;
344
- $border: transparent;
345
- $hover-background: $btn-tertiary-hover-bg;
346
- $hover-border: transparent;
347
- $active-background: $btn-tertiary-active-bg;
348
- $active-border: transparent;
349
-
350
- @include button-variant(
351
- $background,
352
- $border,
353
- $hover-background,
354
- $hover-border,
355
- $active-background,
356
- $active-border,
357
- $btn-tertiary-color,
358
- $btn-tertiary-color,
359
- $btn-tertiary-color
360
- );
361
-
362
- &.disabled,
363
- &:disabled {
364
- color: $yiq-text-dark;
365
- }
366
-
367
- @include button-focus(theme-color("primary", "focus"));
368
- }
369
-
370
- .btn-inverse-tertiary {
371
- $background: $btn-inverse-tertiary-bg;
372
- $border: transparent;
373
- $hover-background: $btn-inverse-tertiary-hover-bg;
374
- $hover-border: transparent;
375
- $active-background: $btn-inverse-tertiary-active-bg;
376
- $active-border: transparent;
377
-
378
- @include button-variant(
379
- $background,
380
- $border,
381
- $hover-background,
382
- $hover-border,
383
- $active-background,
384
- $active-border,
385
- $btn-inverse-tertiary-color,
386
- $btn-inverse-tertiary-color,
387
- $btn-inverse-tertiary-color
388
- );
389
-
390
- &.disabled,
391
- &:disabled {
392
- color: $yiq-text-light;
393
- }
394
-
395
- @include button-focus($white);
396
- }
397
-
398
121
  //
399
122
  // Link buttons
400
123
  //
401
124
 
402
125
  // Make a button look and behave like a link
403
126
  .btn-link {
404
- font-weight: $font-weight-normal;
405
- color: $link-color;
406
- text-decoration: $link-decoration;
127
+ font-weight: var(--pgn-typography-font-weight-normal);
128
+ color: var(--pgn-color-link-base);
129
+ text-decoration: var(--pgn-typography-link-decoration-base);
407
130
 
408
- @include hover {
409
- color: $link-hover-color;
410
- text-decoration: $link-hover-decoration;
131
+ &:hover {
132
+ color: var(--pgn-color-link-hover);
133
+ text-decoration: var(--pgn-typography-link-decoration-hover);
411
134
  }
412
135
 
413
136
  &:focus,
414
137
  &.focus {
415
- text-decoration: $link-hover-decoration;
138
+ text-decoration: var(--pgn-typography-link-decoration-hover);
416
139
  box-shadow: none;
417
140
  }
418
141
 
419
142
  &:disabled,
420
143
  &.disabled {
421
- color: $btn-link-disabled-color;
144
+ color: var(--pgn-color-btn-disabled-link);
422
145
  pointer-events: none;
423
146
  }
424
-
425
- // No need for an active state here
426
- }
427
-
428
- .btn-light,
429
- .btn-dark {
430
- @include button-focus(theme-color("primary", "focus"));
431
147
  }
432
148
 
433
149
  //
@@ -436,13 +152,21 @@ fieldset:disabled a.btn {
436
152
 
437
153
  .btn-lg {
438
154
  @include button-size(
439
- $btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg
155
+ var(--pgn-spacing-btn-padding-y-lg),
156
+ var(--pgn-spacing-btn-padding-x-lg),
157
+ var(--pgn-typography-btn-font-size-lg),
158
+ var(--pgn-typography-btn-line-height-lg),
159
+ var(--pgn-size-btn-border-radius-lg)
440
160
  );
441
161
  }
442
162
 
443
163
  .btn-sm {
444
164
  @include button-size(
445
- $btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm
165
+ var(--pgn-spacing-btn-padding-y-sm),
166
+ var(--pgn-spacing-btn-padding-x-sm),
167
+ var(--pgn-typography-btn-font-size-sm),
168
+ var(--pgn-typography-btn-line-height-sm),
169
+ var(--pgn-size-btn-border-radius-sm)
446
170
  );
447
171
  }
448
172
 
@@ -456,12 +180,12 @@ fieldset:disabled a.btn {
456
180
 
457
181
  // Vertically space out multiple block buttons
458
182
  + .btn-block {
459
- margin-top: $btn-block-spacing-y;
183
+ margin-top: var(--pgn-spacing-btn-block-spacing-y);
460
184
  }
461
185
  }
462
186
 
463
187
  .btn-inline {
464
- line-height: calc(#{$line-height-base}em - #{2 * $btn-border-width});
188
+ line-height: calc(var(--pgn-typography-line-height-base) * 1em - 2 * var(--pgn-size-btn-border-width));
465
189
  font-size: inherit;
466
190
  vertical-align: bottom;
467
191
  padding: 0 .25em;
@@ -484,11 +208,770 @@ input[type="button"] {
484
208
 
485
209
  [dir="rtl"] .btn-group > .btn:not(:first-child),
486
210
  [dir="rtl"] .btn-group > .btn-group:not(:first-child) > .btn {
487
- border-radius: $btn-border-radius 0 0 $btn-border-radius;
211
+ border-radius: var(--pgn-size-btn-border-radius-base) 0 0 var(--pgn-size-btn-border-radius-base);
488
212
  }
489
213
 
490
214
  [dir="rtl"] .btn-group > .btn:first-child,
491
215
  [dir="rtl"] .btn-group > .btn-group:first-child > .btn {
492
- border-top-right-radius: $btn-border-radius;
493
- border-bottom-right-radius: $btn-border-radius;
216
+ border-top-right-radius: var(--pgn-size-btn-border-radius-base);
217
+ border-bottom-right-radius: var(--pgn-size-btn-border-radius-base);
218
+ }
219
+
220
+ // PRIMARY BUTTONS
221
+ .btn-primary {
222
+ --pgn-btn-color: var(--pgn-color-btn-text-primary);
223
+ --pgn-btn-bg: var(--pgn-color-btn-bg-primary);
224
+ --pgn-btn-border-color: var(--pgn-color-btn-border-primary);
225
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-primary);
226
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-primary);
227
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-primary);
228
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-primary);
229
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-primary);
230
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-primary);
231
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-primary);
232
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-primary);
233
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-primary);
234
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-primary);
235
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-primary);
236
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-primary);
237
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-primary);
238
+
239
+ box-shadow: var(--pgn-elevation-btn-box-shadow-base);
240
+ }
241
+
242
+ .btn-outline-primary {
243
+ --pgn-btn-color: var(--pgn-color-btn-text-outline-primary);
244
+ --pgn-btn-bg: var(--pgn-color-btn-bg-outline-primary);
245
+ --pgn-btn-border-color: var(--pgn-color-btn-border-outline-primary);
246
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-primary);
247
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-primary);
248
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-primary);
249
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-primary);
250
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-primary);
251
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-primary);
252
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-primary);
253
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-primary);
254
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-primary);
255
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-primary);
256
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-primary);
257
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-primary);
258
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-primary);
259
+ }
260
+
261
+ .btn-inverse-primary {
262
+ --pgn-btn-color: var(--pgn-color-btn-text-inverse-primary);
263
+ --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-primary);
264
+ --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-primary);
265
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-primary);
266
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-primary);
267
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-primary);
268
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-primary);
269
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-primary);
270
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-primary);
271
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-primary);
272
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-primary);
273
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-primary);
274
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-primary);
275
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-primary);
276
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-primary);
277
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-primary);
278
+ }
279
+
280
+ .btn-inverse-outline-primary {
281
+ --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-primary);
282
+ --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-primary);
283
+ --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-primary);
284
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-primary);
285
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-primary);
286
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-primary);
287
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-primary);
288
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-primary);
289
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-primary);
290
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-primary);
291
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-primary);
292
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-primary);
293
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-primary);
294
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-primary);
295
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-primary);
296
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-primary);
297
+ }
298
+
299
+
300
+ // SECONDARY BUTTONS
301
+ .btn-secondary {
302
+ --pgn-btn-color: var(--pgn-color-btn-text-secondary);
303
+ --pgn-btn-bg: var(--pgn-color-btn-bg-secondary);
304
+ --pgn-btn-border-color: var(--pgn-color-btn-border-secondary);
305
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-secondary);
306
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-secondary);
307
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-secondary);
308
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-secondary);
309
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-secondary);
310
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-secondary);
311
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-secondary);
312
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-secondary);
313
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-secondary);
314
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-secondary);
315
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-secondary);
316
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-secondary);
317
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-secondary);
318
+
319
+ box-shadow: var(--pgn-elevation-btn-box-shadow-base);
320
+ }
321
+
322
+ .btn-outline-secondary {
323
+ --pgn-btn-color: var(--pgn-color-btn-text-outline-secondary);
324
+ --pgn-btn-bg: var(--pgn-color-btn-bg-outline-secondary);
325
+ --pgn-btn-border-color: var(--pgn-color-btn-border-outline-secondary);
326
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-secondary);
327
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-secondary);
328
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-secondary);
329
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-secondary);
330
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-secondary);
331
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-secondary);
332
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-secondary);
333
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-secondary);
334
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-secondary);
335
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-secondary);
336
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-secondary);
337
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-secondary);
338
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-secondary);
339
+ }
340
+
341
+ .btn-inverse-secondary {
342
+ --pgn-btn-color: var(--pgn-color-btn-text-inverse-secondary);
343
+ --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-secondary);
344
+ --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-secondary);
345
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-secondary);
346
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-secondary);
347
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-secondary);
348
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-secondary);
349
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-secondary);
350
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-secondary);
351
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-secondary);
352
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-secondary);
353
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-secondary);
354
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-secondary);
355
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-secondary);
356
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-secondary);
357
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-secondary);
358
+ }
359
+
360
+ .btn-inverse-outline-secondary {
361
+ --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-secondary);
362
+ --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-secondary);
363
+ --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-secondary);
364
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-secondary);
365
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-secondary);
366
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-secondary);
367
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-secondary);
368
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-secondary);
369
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-secondary);
370
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-secondary);
371
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-secondary);
372
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-secondary);
373
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-secondary);
374
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-secondary);
375
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-secondary);
376
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-secondary);
377
+ }
378
+
379
+
380
+ // BRAND BUTTONS
381
+ .btn-brand {
382
+ --pgn-btn-color: var(--pgn-color-btn-text-brand);
383
+ --pgn-btn-bg: var(--pgn-color-btn-bg-brand);
384
+ --pgn-btn-border-color: var(--pgn-color-btn-border-brand);
385
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-brand);
386
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-brand);
387
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-brand);
388
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-brand);
389
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-brand);
390
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-brand);
391
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-brand);
392
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-brand);
393
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-brand);
394
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-brand);
395
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-brand);
396
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-brand);
397
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-brand);
398
+
399
+ box-shadow: var(--pgn-elevation-btn-box-shadow-base);
400
+ }
401
+
402
+ .btn-outline-brand {
403
+ --pgn-btn-color: var(--pgn-color-btn-text-outline-brand);
404
+ --pgn-btn-bg: var(--pgn-color-btn-bg-outline-brand);
405
+ --pgn-btn-border-color: var(--pgn-color-btn-border-outline-brand);
406
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-brand);
407
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-brand);
408
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-brand);
409
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-brand);
410
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-brand);
411
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-brand);
412
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-brand);
413
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-brand);
414
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-brand);
415
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-brand);
416
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-brand);
417
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-brand);
418
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-brand);
419
+ }
420
+
421
+ .btn-inverse-brand {
422
+ --pgn-btn-color: var(--pgn-color-btn-text-inverse-brand);
423
+ --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-brand);
424
+ --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-brand);
425
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-brand);
426
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-brand);
427
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-brand);
428
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-brand);
429
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-brand);
430
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-brand);
431
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-brand);
432
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-brand);
433
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-brand);
434
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-brand);
435
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-brand);
436
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-brand);
437
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-brand);
438
+ }
439
+
440
+ .btn-inverse-outline-brand {
441
+ --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-brand);
442
+ --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-brand);
443
+ --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-brand);
444
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-brand);
445
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-brand);
446
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-brand);
447
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-brand);
448
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-brand);
449
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-brand);
450
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-brand);
451
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-brand);
452
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-brand);
453
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-brand);
454
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-brand);
455
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-brand);
456
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-brand);
457
+ }
458
+
459
+
460
+ // DANGER BUTTONS
461
+ .btn-danger {
462
+ --pgn-btn-color: var(--pgn-color-btn-text-danger);
463
+ --pgn-btn-bg: var(--pgn-color-btn-bg-danger);
464
+ --pgn-btn-border-color: var(--pgn-color-btn-border-danger);
465
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-danger);
466
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-danger);
467
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-danger);
468
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-danger);
469
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-danger);
470
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-danger);
471
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-danger);
472
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-danger);
473
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-danger);
474
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-danger);
475
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-danger);
476
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-danger);
477
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-danger);
478
+
479
+ box-shadow: var(--pgn-elevation-btn-box-shadow-base);
480
+ }
481
+
482
+ .btn-outline-danger {
483
+ --pgn-btn-color: var(--pgn-color-btn-text-outline-danger);
484
+ --pgn-btn-bg: var(--pgn-color-btn-bg-outline-danger);
485
+ --pgn-btn-border-color: var(--pgn-color-btn-border-outline-danger);
486
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-danger);
487
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-danger);
488
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-danger);
489
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-danger);
490
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-danger);
491
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-danger);
492
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-danger);
493
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-danger);
494
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-danger);
495
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-danger);
496
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-danger);
497
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-danger);
498
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-danger);
499
+ }
500
+
501
+ .btn-inverse-danger {
502
+ --pgn-btn-color: var(--pgn-color-btn-text-inverse-danger);
503
+ --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-danger);
504
+ --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-danger);
505
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-danger);
506
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-danger);
507
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-danger);
508
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-danger);
509
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-danger);
510
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-danger);
511
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-danger);
512
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-danger);
513
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-danger);
514
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-danger);
515
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-danger);
516
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-danger);
517
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-danger);
518
+ }
519
+
520
+ .btn-inverse-outline-danger {
521
+ --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-danger);
522
+ --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-danger);
523
+ --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-danger);
524
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-danger);
525
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-danger);
526
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-danger);
527
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-danger);
528
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-danger);
529
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-danger);
530
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-danger);
531
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-danger);
532
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-danger);
533
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-danger);
534
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-danger);
535
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-danger);
536
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-danger);
537
+ }
538
+
539
+
540
+ // DARK BUTTONS
541
+ .btn-dark {
542
+ --pgn-btn-color: var(--pgn-color-btn-text-dark);
543
+ --pgn-btn-bg: var(--pgn-color-btn-bg-dark);
544
+ --pgn-btn-border-color: var(--pgn-color-btn-border-dark);
545
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-dark);
546
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-dark);
547
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-dark);
548
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-dark);
549
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-dark);
550
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-dark);
551
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-dark);
552
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-dark);
553
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-dark);
554
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-dark);
555
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-dark);
556
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-dark);
557
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-dark);
558
+
559
+ box-shadow: var(--pgn-elevation-btn-box-shadow-base);
560
+ }
561
+
562
+ .btn-outline-dark {
563
+ --pgn-btn-color: var(--pgn-color-btn-text-outline-dark);
564
+ --pgn-btn-bg: var(--pgn-color-btn-bg-outline-dark);
565
+ --pgn-btn-border-color: var(--pgn-color-btn-border-outline-dark);
566
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-dark);
567
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-dark);
568
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-dark);
569
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-dark);
570
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-dark);
571
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-dark);
572
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-dark);
573
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-dark);
574
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-dark);
575
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-dark);
576
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-dark);
577
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-dark);
578
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-dark);
579
+ }
580
+
581
+ .btn-inverse-dark {
582
+ --pgn-btn-color: var(--pgn-color-btn-text-inverse-dark);
583
+ --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-dark);
584
+ --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-dark);
585
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-dark);
586
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-dark);
587
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-dark);
588
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-dark);
589
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-dark);
590
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-dark);
591
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-dark);
592
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-dark);
593
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-dark);
594
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-dark);
595
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-dark);
596
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-dark);
597
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-dark);
598
+ }
599
+
600
+ .btn-inverse-outline-dark {
601
+ --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-dark);
602
+ --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-dark);
603
+ --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-dark);
604
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-dark);
605
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-dark);
606
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-dark);
607
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-dark);
608
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-dark);
609
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-dark);
610
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-dark);
611
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-dark);
612
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-dark);
613
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-border-inverse-outline-dark);
614
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-dark);
615
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-outline-inverse-outline-dark);
616
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-dark);
617
+ }
618
+
619
+
620
+ // INFO BUTTONS
621
+ .btn-info {
622
+ --pgn-btn-color: var(--pgn-color-btn-text-info);
623
+ --pgn-btn-bg: var(--pgn-color-btn-bg-info);
624
+ --pgn-btn-border-color: var(--pgn-color-btn-border-info);
625
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-info);
626
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-info);
627
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-info);
628
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-info);
629
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-info);
630
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-info);
631
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-info);
632
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-info);
633
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-info);
634
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-info);
635
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-info);
636
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-info);
637
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-info);
638
+
639
+ box-shadow: var(--pgn-elevation-btn-box-shadow-base);
640
+ }
641
+
642
+ .btn-outline-info {
643
+ --pgn-btn-color: var(--pgn-color-btn-text-outline-info);
644
+ --pgn-btn-bg: var(--pgn-color-btn-bg-outline-info);
645
+ --pgn-btn-border-color: var(--pgn-color-btn-border-outline-info);
646
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-info);
647
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-info);
648
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-info);
649
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-info);
650
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-info);
651
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-info);
652
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-info);
653
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-info);
654
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-info);
655
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-info);
656
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-info);
657
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-info);
658
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-info);
659
+ }
660
+
661
+ .btn-inverse-info {
662
+ --pgn-btn-color: var(--pgn-color-btn-text-inverse-info);
663
+ --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-info);
664
+ --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-info);
665
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-info);
666
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-info);
667
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-info);
668
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-info);
669
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-info);
670
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-info);
671
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-info);
672
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-info);
673
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-info);
674
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-info);
675
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-info);
676
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-info);
677
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-info);
678
+ }
679
+
680
+ .btn-inverse-outline-info {
681
+ --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-info);
682
+ --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-info);
683
+ --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-info);
684
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-info);
685
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-info);
686
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-info);
687
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-info);
688
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-info);
689
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-info);
690
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-info);
691
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-info);
692
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-info);
693
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-info);
694
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-info);
695
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-info);
696
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-info);
697
+ }
698
+
699
+
700
+ // LIGHT BUTTONS
701
+ .btn-light {
702
+ --pgn-btn-color: var(--pgn-color-btn-text-light);
703
+ --pgn-btn-bg: var(--pgn-color-btn-bg-light);
704
+ --pgn-btn-border-color: var(--pgn-color-btn-border-light);
705
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-light);
706
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-light);
707
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-light);
708
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-light);
709
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-light);
710
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-light);
711
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-light);
712
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-light);
713
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-light);
714
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-light);
715
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-light);
716
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-light);
717
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-light);
718
+
719
+ box-shadow: var(--pgn-elevation-btn-box-shadow-base);
720
+ }
721
+
722
+ .btn-outline-light {
723
+ --pgn-btn-color: var(--pgn-color-btn-text-outline-light);
724
+ --pgn-btn-bg: var(--pgn-color-btn-bg-outline-light);
725
+ --pgn-btn-border-color: var(--pgn-color-btn-border-outline-light);
726
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-light);
727
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-light);
728
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-light);
729
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-light);
730
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-light);
731
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-light);
732
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-light);
733
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-light);
734
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-light);
735
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-light);
736
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-light);
737
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-light);
738
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-light);
739
+ }
740
+
741
+ .btn-inverse-light {
742
+ --pgn-btn-color: var(--pgn-color-btn-text-inverse-light);
743
+ --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-light);
744
+ --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-light);
745
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-light);
746
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-light);
747
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-light);
748
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-light);
749
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-light);
750
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-light);
751
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-light);
752
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-light);
753
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-light);
754
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-light);
755
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-light);
756
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-light);
757
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-light);
758
+ }
759
+
760
+ .btn-inverse-outline-light {
761
+ --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-light);
762
+ --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-light);
763
+ --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-light);
764
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-light);
765
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-light);
766
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-light);
767
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-light);
768
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-light);
769
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-light);
770
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-light);
771
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-light);
772
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-light);
773
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-light);
774
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-light);
775
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-light);
776
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-light);
777
+ }
778
+
779
+
780
+ // SUCCESS BUTTONS
781
+ .btn-success {
782
+ --pgn-btn-color: var(--pgn-color-btn-text-success);
783
+ --pgn-btn-bg: var(--pgn-color-btn-bg-success);
784
+ --pgn-btn-border-color: var(--pgn-color-btn-border-success);
785
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-success);
786
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-success);
787
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-success);
788
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-success);
789
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-success);
790
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-success);
791
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-success);
792
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-success);
793
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-success);
794
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-success);
795
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-success);
796
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-success);
797
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-success);
798
+
799
+ box-shadow: var(--pgn-elevation-btn-box-shadow-base);
800
+ }
801
+
802
+ .btn-outline-success {
803
+ --pgn-btn-color: var(--pgn-color-btn-text-outline-success);
804
+ --pgn-btn-bg: var(--pgn-color-btn-bg-outline-success);
805
+ --pgn-btn-border-color: var(--pgn-color-btn-border-outline-success);
806
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-success);
807
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-success);
808
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-success);
809
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-success);
810
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-success);
811
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-success);
812
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-success);
813
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-success);
814
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-success);
815
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-success);
816
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-success);
817
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-success);
818
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-success);
819
+ }
820
+
821
+ .btn-inverse-success {
822
+ --pgn-btn-color: var(--pgn-color-btn-text-inverse-success);
823
+ --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-success);
824
+ --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-success);
825
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-success);
826
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-success);
827
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-success);
828
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-success);
829
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-success);
830
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-success);
831
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-success);
832
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-success);
833
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-success);
834
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-success);
835
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-success);
836
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-success);
837
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-success);
838
+ }
839
+
840
+ .btn-inverse-outline-success {
841
+ --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-success);
842
+ --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-success);
843
+ --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-success);
844
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-success);
845
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-success);
846
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-success);
847
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-success);
848
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-success);
849
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-success);
850
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-success);
851
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-success);
852
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-success);
853
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-outline-success);
854
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-success);
855
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-success);
856
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-outline-success);
857
+ }
858
+
859
+
860
+ // WARNING BUTTONS
861
+ .btn-warning {
862
+ --pgn-btn-color: var(--pgn-color-btn-text-warning);
863
+ --pgn-btn-bg: var(--pgn-color-btn-bg-warning);
864
+ --pgn-btn-border-color: var(--pgn-color-btn-border-warning);
865
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-warning);
866
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-warning);
867
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-warning);
868
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-warning);
869
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-warning);
870
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-warning);
871
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-warning);
872
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-warning);
873
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-warning);
874
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-warning);
875
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-warning);
876
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-warning);
877
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-warning);
878
+
879
+ box-shadow: var(--pgn-elevation-btn-box-shadow-base);
880
+ }
881
+
882
+ .btn-outline-warning {
883
+ --pgn-btn-color: var(--pgn-color-btn-text-outline-warning);
884
+ --pgn-btn-bg: var(--pgn-color-btn-bg-outline-warning);
885
+ --pgn-btn-border-color: var(--pgn-color-btn-border-outline-warning);
886
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-outline-warning);
887
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-outline-warning);
888
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-outline-warning);
889
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-outline-warning);
890
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-outline-warning);
891
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-outline-warning);
892
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-outline-warning);
893
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-outline-warning);
894
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-outline-warning);
895
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-outline-warning);
896
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-outline-warning);
897
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-outline-warning);
898
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-outline-warning);
899
+ }
900
+
901
+ .btn-inverse-warning {
902
+ --pgn-btn-color: var(--pgn-color-btn-text-inverse-warning);
903
+ --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-warning);
904
+ --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-warning);
905
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-warning);
906
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-warning);
907
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-warning);
908
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-warning);
909
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-warning);
910
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-warning);
911
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-warning);
912
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-warning);
913
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-warning);
914
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-warning);
915
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-warning);
916
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-warning);
917
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-warning);
918
+ }
919
+
920
+ .btn-inverse-outline-warning {
921
+ --pgn-btn-color: var(--pgn-color-btn-text-inverse-outline-warning);
922
+ --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-outline-warning);
923
+ --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-outline-warning);
924
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-outline-warning);
925
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-outline-warning);
926
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-outline-warning);
927
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-outline-warning);
928
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-outline-warning);
929
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-outline-warning);
930
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-outline-warning);
931
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-outline-warning);
932
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-outline-warning);
933
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-border-inverse-outline-warning);
934
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-outline-warning);
935
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-outline-warning);
936
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-outline-inverse-outline-warning);
937
+ }
938
+
939
+
940
+ // TERTIARY BUTTONS
941
+ .btn-tertiary {
942
+ --pgn-btn-color: var(--pgn-color-btn-text-tertiary);
943
+ --pgn-btn-bg: var(--pgn-color-btn-bg-tertiary);
944
+ --pgn-btn-border-color: var(--pgn-color-btn-border-tertiary);
945
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-tertiary);
946
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-tertiary);
947
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-tertiary);
948
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-tertiary);
949
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-tertiary);
950
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-tertiary);
951
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-tertiary);
952
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-tertiary);
953
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-tertiary);
954
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-tertiary);
955
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-tertiary);
956
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-tertiary);
957
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-tertiary);
958
+ }
959
+
960
+ .btn-inverse-tertiary {
961
+ --pgn-btn-color: var(--pgn-color-btn-text-inverse-tertiary);
962
+ --pgn-btn-bg: var(--pgn-color-btn-bg-inverse-tertiary);
963
+ --pgn-btn-border-color: var(--pgn-color-btn-border-inverse-tertiary);
964
+ --pgn-btn-hover-color: var(--pgn-color-btn-hover-text-inverse-tertiary);
965
+ --pgn-btn-hover-bg: var(--pgn-color-btn-hover-bg-inverse-tertiary);
966
+ --pgn-btn-hover-border-color: var(--pgn-color-btn-hover-border-inverse-tertiary);
967
+ --pgn-btn-disabled-color: var(--pgn-color-btn-disabled-text-inverse-tertiary);
968
+ --pgn-btn-disabled-bg: var(--pgn-color-btn-disabled-bg-inverse-tertiary);
969
+ --pgn-btn-disabled-border-color: var(--pgn-color-btn-disabled-border-inverse-tertiary);
970
+ --pgn-btn-active-color: var(--pgn-color-btn-active-text-inverse-tertiary);
971
+ --pgn-btn-active-bg: var(--pgn-color-btn-active-bg-inverse-tertiary);
972
+ --pgn-btn-active-border-color: var(--pgn-color-btn-active-border-inverse-tertiary);
973
+ --pgn-btn-focus-outline-color: var(--pgn-color-btn-focus-outline-inverse-tertiary);
974
+ --pgn-btn-focus-color: var(--pgn-color-btn-focus-text-inverse-tertiary);
975
+ --pgn-btn-focus-border-color: var(--pgn-color-btn-focus-border-inverse-tertiary);
976
+ --pgn-btn-focus-bg: var(--pgn-color-btn-focus-bg-inverse-tertiary);
494
977
  }