@openedx/paragon 23.0.0-alpha.3 → 23.0.0-alpha.5

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 (258) hide show
  1. package/bin/paragon-scripts.js +10 -0
  2. package/dist/Annotation/index.scss +16 -0
  3. package/dist/Card/CardDeck.js +0 -2
  4. package/dist/Card/CardDeck.js.map +1 -1
  5. package/dist/Card/index.scss +8 -6
  6. package/dist/Carousel/index.scss +24 -1
  7. package/dist/Chip/ChipIcon.d.ts +1 -1
  8. package/dist/CloseButton/index.scss +8 -0
  9. package/dist/ColorPicker/index.scss +1 -1
  10. package/dist/Container/index.d.ts +16 -0
  11. package/dist/Container/index.js +15 -13
  12. package/dist/Container/index.js.map +1 -1
  13. package/dist/DataTable/index.scss +12 -0
  14. package/dist/Dropdown/dropdown-bootstrap.scss +6 -0
  15. package/dist/Dropzone/index.scss +34 -0
  16. package/dist/Form/_FormText.scss +1 -1
  17. package/dist/Form/_bootstrap-custom-forms.scss +40 -0
  18. package/dist/Form/_index.scss +9 -0
  19. package/dist/Form/_mixins.scss +22 -0
  20. package/dist/IconButton/index.d.ts +1 -1
  21. package/dist/IconButton/index.js +1 -1
  22. package/dist/IconButton/index.js.map +1 -1
  23. package/dist/IconButton/index.scss +146 -0
  24. package/dist/Menu/SelectMenu.js +9 -4
  25. package/dist/Menu/SelectMenu.js.map +1 -1
  26. package/dist/Menu/index.scss +8 -0
  27. package/dist/Modal/ModalContext.d.ts +15 -0
  28. package/dist/Modal/ModalContext.js +7 -14
  29. package/dist/Modal/ModalContext.js.map +1 -1
  30. package/dist/Modal/ModalDialog.d.ts +110 -0
  31. package/dist/Modal/ModalDialog.js +30 -24
  32. package/dist/Modal/ModalDialog.js.map +1 -1
  33. package/dist/Modal/ModalDialogHeader.d.ts +10 -0
  34. package/dist/Modal/ModalDialogHeader.js +6 -7
  35. package/dist/Modal/ModalDialogHeader.js.map +1 -1
  36. package/dist/Modal/ModalLayer.d.ts +53 -0
  37. package/dist/Modal/ModalLayer.js +5 -14
  38. package/dist/Modal/ModalLayer.js.map +1 -1
  39. package/dist/Modal/Portal.d.ts +11 -0
  40. package/dist/Modal/Portal.js +5 -6
  41. package/dist/Modal/Portal.js.map +1 -1
  42. package/dist/Modal/_ModalDialog.scss +22 -2
  43. package/dist/Nav/index.scss +8 -0
  44. package/dist/Overlay/index.d.ts +2 -2
  45. package/dist/PageBanner/index.scss +2 -2
  46. package/dist/Pagination/pagination-bootstrap.scss +9 -0
  47. package/dist/Popover/index.scss +1 -1
  48. package/dist/ProductTour/Checkpoint.scss +1 -1
  49. package/dist/ProgressBar/bootstrap-progress.scss +20 -5
  50. package/dist/ProgressBar/index.scss +3 -3
  51. package/dist/Stepper/index.scss +1 -1
  52. package/dist/Sticky/index.scss +12 -0
  53. package/dist/Toast/index.scss +13 -1
  54. package/dist/Tooltip/index.scss +16 -0
  55. package/dist/core.css +913 -470
  56. package/dist/core.css.map +1 -1
  57. package/dist/core.min.css +1 -1
  58. package/dist/hooks/useArrowKeyNavigation.js +2 -3
  59. package/dist/hooks/useArrowKeyNavigation.js.map +1 -1
  60. package/dist/index.d.ts +19 -5
  61. package/dist/index.js +5 -5
  62. package/dist/light.css +2035 -1315
  63. package/dist/light.css.map +1 -1
  64. package/dist/light.min.css +1 -1
  65. package/icons/es5/Newsstand.js +15 -0
  66. package/icons/es5/index.js +1 -0
  67. package/icons/es5/index.ts +1 -0
  68. package/icons/jsx/Newsstand.jsx +17 -0
  69. package/icons/jsx/index.jsx +1 -0
  70. package/icons/svg/newsstand.svg +1 -0
  71. package/lib/build-tokens.js +67 -31
  72. package/package.json +8 -5
  73. package/src/Annotation/index.scss +16 -0
  74. package/src/Card/CardDeck.jsx +0 -3
  75. package/src/Card/README.md +0 -31
  76. package/src/Card/index.scss +8 -6
  77. package/src/Carousel/index.scss +24 -1
  78. package/src/CloseButton/index.scss +8 -0
  79. package/src/ColorPicker/index.scss +1 -1
  80. package/src/Container/{Container.test.jsx → Container.test.tsx} +14 -8
  81. package/src/Container/README.md +4 -0
  82. package/src/Container/index.tsx +64 -0
  83. package/src/DataTable/index.scss +12 -0
  84. package/src/DataTable/selection/tests/ControlledSelectHeader.test.jsx +7 -7
  85. package/src/Dropdown/dropdown-bootstrap.scss +6 -0
  86. package/src/Dropzone/index.scss +34 -0
  87. package/src/Form/_FormText.scss +1 -1
  88. package/src/Form/_bootstrap-custom-forms.scss +40 -0
  89. package/src/Form/_index.scss +9 -0
  90. package/src/Form/_mixins.scss +22 -0
  91. package/src/IconButton/index.scss +146 -0
  92. package/src/IconButton/index.tsx +1 -1
  93. package/src/Menu/SelectMenu.jsx +5 -0
  94. package/src/Menu/SelectMenu.test.jsx +6 -0
  95. package/src/Menu/index.scss +8 -0
  96. package/src/Menu/select-menu.md +8 -0
  97. package/src/Modal/{ModalContext.jsx → ModalContext.tsx} +19 -16
  98. package/src/Modal/{ModalDialog.jsx → ModalDialog.tsx} +57 -26
  99. package/src/Modal/{ModalDialogHeader.jsx → ModalDialogHeader.tsx} +17 -11
  100. package/src/Modal/{ModalLayer.jsx → ModalLayer.tsx} +17 -17
  101. package/src/Modal/{Portal.jsx → Portal.tsx} +10 -7
  102. package/src/Modal/_ModalDialog.scss +22 -2
  103. package/src/Modal/modal-dialog.mdx +95 -6
  104. package/src/Modal/tests/{ModalDialog.test.jsx → ModalDialog.test.tsx} +18 -10
  105. package/src/Modal/tests/{ModalLayer.test.jsx → ModalLayer.test.tsx} +5 -5
  106. package/src/Modal/tests/{Portal.test.jsx → Portal.test.tsx} +3 -3
  107. package/src/Nav/index.scss +8 -0
  108. package/src/PageBanner/index.scss +2 -2
  109. package/src/Pagination/pagination-bootstrap.scss +9 -0
  110. package/src/Popover/index.scss +1 -1
  111. package/src/ProductTour/Checkpoint.scss +1 -1
  112. package/src/ProgressBar/bootstrap-progress.scss +20 -5
  113. package/src/ProgressBar/index.scss +3 -3
  114. package/src/Stepper/index.scss +1 -1
  115. package/src/Sticky/index.scss +12 -0
  116. package/src/Toast/index.scss +13 -1
  117. package/src/Tooltip/index.scss +16 -0
  118. package/src/hooks/useArrowKeyNavigation.jsx +1 -2
  119. package/src/index.d.ts +19 -5
  120. package/src/index.js +5 -5
  121. package/styles/css/core/abstraction-variables.css +44 -0
  122. package/styles/css/core/custom-media-breakpoints.css +3 -4
  123. package/styles/css/core/index.css +2 -1
  124. package/styles/css/core/variables.css +494 -430
  125. package/styles/css/themes/light/abstraction-variables.css +304 -0
  126. package/styles/css/themes/light/index.css +1 -0
  127. package/styles/css/themes/light/utility-classes.css +2 -3
  128. package/styles/css/themes/light/variables.css +1753 -1334
  129. package/styles/scss/core/_typography.scss +16 -4
  130. package/styles/scss/core/_utilities.scss +7 -3
  131. package/styles/scss/core/_variables.scss +43 -30
  132. package/styles/scss/core/core.scss +1 -0
  133. package/tokens/src/core/alias/size.json +6 -5
  134. package/tokens/src/core/components/ActionRow.json +3 -2
  135. package/tokens/src/core/components/Alert.json +12 -10
  136. package/tokens/src/core/components/Annotation.json +9 -7
  137. package/tokens/src/core/components/Avatar.json +9 -9
  138. package/tokens/src/core/components/AvatarButton.json +4 -3
  139. package/tokens/src/core/components/Badge.json +12 -9
  140. package/tokens/src/core/components/Breadcrumb.json +7 -5
  141. package/tokens/src/core/components/Bubble.json +4 -3
  142. package/tokens/src/core/components/Button/core.json +35 -59
  143. package/tokens/src/core/components/Card.json +33 -44
  144. package/tokens/src/core/components/Carousel.json +39 -13
  145. package/tokens/src/core/components/Chip.json +13 -21
  146. package/tokens/src/core/components/ChipCarousel.json +4 -5
  147. package/tokens/src/core/components/CloseButton.json +2 -6
  148. package/tokens/src/core/components/Code.json +9 -8
  149. package/tokens/src/core/components/Collapsible.json +10 -13
  150. package/tokens/src/core/components/ColorPicker.json +3 -2
  151. package/tokens/src/core/components/Container.json +6 -5
  152. package/tokens/src/core/components/DataTable.json +17 -9
  153. package/tokens/src/core/components/Dropdown.json +24 -29
  154. package/tokens/src/core/components/Dropzone.json +5 -7
  155. package/tokens/src/core/components/Form/other.json +5 -4
  156. package/tokens/src/core/components/Form/size.json +72 -119
  157. package/tokens/src/core/components/Form/spacing.json +39 -83
  158. package/tokens/src/core/components/Form/transition.json +43 -7
  159. package/tokens/src/core/components/Form/typography.json +24 -88
  160. package/tokens/src/core/components/Icon.json +6 -5
  161. package/tokens/src/core/components/IconButton.json +4 -7
  162. package/tokens/src/core/components/Image.json +7 -6
  163. package/tokens/src/core/components/Menu.json +14 -12
  164. package/tokens/src/core/components/Modal.json +26 -21
  165. package/tokens/src/core/components/Nav.json +14 -16
  166. package/tokens/src/core/components/Navbar.json +15 -30
  167. package/tokens/src/core/components/Pagination.json +23 -24
  168. package/tokens/src/core/components/Popover.json +18 -14
  169. package/tokens/src/core/components/ProductTour.json +8 -14
  170. package/tokens/src/core/components/ProgressBar.json +29 -14
  171. package/tokens/src/core/components/SearchField.json +7 -9
  172. package/tokens/src/core/components/SelectableBox.json +4 -3
  173. package/tokens/src/core/components/Sheet.json +3 -2
  174. package/tokens/src/core/components/Spinner.json +9 -7
  175. package/tokens/src/core/components/Stack.json +2 -1
  176. package/tokens/src/core/components/Stepper.json +12 -14
  177. package/tokens/src/core/components/Sticky.json +2 -1
  178. package/tokens/src/core/components/Tab.json +8 -7
  179. package/tokens/src/core/components/Tabs.json +5 -5
  180. package/tokens/src/core/components/Toast.json +11 -8
  181. package/tokens/src/core/components/Tooltip.json +13 -11
  182. package/tokens/src/core/components/general/caret.json +5 -3
  183. package/tokens/src/core/components/general/headings.json +5 -4
  184. package/tokens/src/core/components/general/hr.json +3 -2
  185. package/tokens/src/core/components/general/input.json +19 -19
  186. package/tokens/src/core/components/general/link.json +13 -12
  187. package/tokens/src/core/components/general/list.json +9 -6
  188. package/tokens/src/core/components/general/text.json +6 -12
  189. package/tokens/src/core/global/breakpoints.json +25 -6
  190. package/tokens/src/core/global/elevation.json +55 -13
  191. package/tokens/src/core/global/other.json +5 -1
  192. package/tokens/src/core/global/spacing.json +70 -17
  193. package/tokens/src/core/global/transition.json +41 -4
  194. package/tokens/src/core/global/typography.json +248 -53
  195. package/tokens/src/core/utilities/color.json +35 -4
  196. package/tokens/src/themes/light/alias/color.json +276 -75
  197. package/tokens/src/themes/light/components/Alert.json +15 -26
  198. package/tokens/src/themes/light/components/Annotation.json +27 -13
  199. package/tokens/src/themes/light/components/Avatar.json +2 -1
  200. package/tokens/src/themes/light/components/Badge.json +57 -122
  201. package/tokens/src/themes/light/components/Breadcrumb.json +6 -5
  202. package/tokens/src/themes/light/components/Bubble.json +9 -8
  203. package/tokens/src/themes/light/components/Button/brand.json +171 -119
  204. package/tokens/src/themes/light/components/Button/core.json +8 -9
  205. package/tokens/src/themes/light/components/Button/danger.json +171 -112
  206. package/tokens/src/themes/light/components/Button/dark.json +188 -106
  207. package/tokens/src/themes/light/components/Button/info.json +186 -112
  208. package/tokens/src/themes/light/components/Button/light.json +186 -110
  209. package/tokens/src/themes/light/components/Button/primary.json +178 -116
  210. package/tokens/src/themes/light/components/Button/secondary.json +166 -132
  211. package/tokens/src/themes/light/components/Button/success.json +176 -117
  212. package/tokens/src/themes/light/components/Button/tertiary.json +34 -60
  213. package/tokens/src/themes/light/components/Button/warning.json +164 -128
  214. package/tokens/src/themes/light/components/Card.json +10 -21
  215. package/tokens/src/themes/light/components/Carousel.json +12 -11
  216. package/tokens/src/themes/light/components/Chip.json +14 -26
  217. package/tokens/src/themes/light/components/CloseButton.json +12 -2
  218. package/tokens/src/themes/light/components/Code.json +7 -9
  219. package/tokens/src/themes/light/components/DataTable.json +7 -11
  220. package/tokens/src/themes/light/components/Dropdown.json +17 -20
  221. package/tokens/src/themes/light/components/Dropzone.json +49 -11
  222. package/tokens/src/themes/light/components/Form/color.json +101 -155
  223. package/tokens/src/themes/light/components/Form/elevation.json +38 -42
  224. package/tokens/src/themes/light/components/Form/other.json +44 -41
  225. package/tokens/src/themes/light/components/IconButton.json +408 -256
  226. package/tokens/src/themes/light/components/Image.json +7 -4
  227. package/tokens/src/themes/light/components/Menu.json +12 -10
  228. package/tokens/src/themes/light/components/Modal.json +22 -12
  229. package/tokens/src/themes/light/components/Nav.json +82 -94
  230. package/tokens/src/themes/light/components/Navbar.json +32 -76
  231. package/tokens/src/themes/light/components/OverflowScroll.json +3 -1
  232. package/tokens/src/themes/light/components/PageBanner.json +11 -10
  233. package/tokens/src/themes/light/components/Pagination.json +19 -23
  234. package/tokens/src/themes/light/components/Popover.json +22 -27
  235. package/tokens/src/themes/light/components/ProductTour.json +9 -20
  236. package/tokens/src/themes/light/components/ProgressBar.json +12 -10
  237. package/tokens/src/themes/light/components/Scrollable.json +3 -3
  238. package/tokens/src/themes/light/components/SearchField.json +9 -9
  239. package/tokens/src/themes/light/components/Sheet.json +6 -7
  240. package/tokens/src/themes/light/components/Stepper.json +12 -17
  241. package/tokens/src/themes/light/components/Sticky.json +31 -6
  242. package/tokens/src/themes/light/components/Tab.json +47 -24
  243. package/tokens/src/themes/light/components/Toast.json +26 -14
  244. package/tokens/src/themes/light/components/Tooltip.json +25 -10
  245. package/tokens/src/themes/light/components/general/body.json +3 -2
  246. package/tokens/src/themes/light/components/general/headings.json +2 -1
  247. package/tokens/src/themes/light/components/general/hr.json +3 -6
  248. package/tokens/src/themes/light/components/general/input.json +11 -4
  249. package/tokens/src/themes/light/components/general/link.json +34 -43
  250. package/tokens/src/themes/light/components/general/list.json +15 -19
  251. package/tokens/src/themes/light/components/general/text.json +5 -6
  252. package/tokens/src/themes/light/global/color.json +1592 -867
  253. package/tokens/src/themes/light/global/elevation.json +481 -93
  254. package/tokens/style-dictionary.js +342 -144
  255. package/tokens/utils.js +176 -6
  256. package/src/Container/index.jsx +0 -49
  257. package/tokens/src/core/global/display.json +0 -22
  258. /package/src/Truncate/{Truncate.test.js → utils.test.js} +0 -0
package/tokens/src/themes/light/components/Button/info.json CHANGED
@@ -1,235 +1,309 @@
1
1
  {
2
2
  "color": {
3
+ "$type": "color",
3
4
  "btn": {
4
5
  "text": {
5
6
  "info": {
6
- "value": "{color.btn.bg.info}",
7
- "type": "color",
8
7
  "source": "$btn-info-color",
9
- "modify": [{ "type": "color-yiq" }]
8
+ "modify": [{ "type": "color-yiq" }],
9
+ "$value": "{color.btn.bg.info}"
10
+ },
11
+ "outline-info": {
12
+ "source": "$btn-info-outline-color",
13
+ "$value": "{color.info.base}"
14
+ },
15
+ "inverse-info": {
16
+ "source": "$btn-info-inverse-color",
17
+ "$value": "{color.info.base}"
10
18
  },
11
- "outline-info": { "value": "{color.info.base}", "type": "color", "source": "$btn-info-outline-color" },
12
- "inverse-info": { "value": "{color.info.base}", "type": "color", "source": "$btn-info-inverse-color" },
13
19
  "inverse-outline-info": {
14
- "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-outline-color"
20
+ "source": "$btn-info-inverse-outline-color",
21
+ "$value": "{color.white}"
15
22
  }
16
23
  },
17
24
  "bg": {
18
- "info": { "value": "{color.info.base}", "type": "color", "source": "$btn-info-bg" },
19
- "outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-outline-bg" },
25
+ "info": {
26
+ "source": "$btn-info-bg",
27
+ "$value": "{color.info.base}"
28
+ },
29
+ "outline-info": {
30
+ "source": "$btn-info-outline-bg",
31
+ "$value": "inherit"
32
+ },
20
33
  "inverse-info": {
21
- "value": "{color.btn.text.inverse-info}",
22
- "type": "color",
23
34
  "source": "$btn-info-inverse-bg",
24
- "modify": [{ "type": "color-yiq" }]
35
+ "modify": [{ "type": "color-yiq" }],
36
+ "$value": "{color.btn.text.inverse-info}"
25
37
  },
26
- "inverse-outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-outline-bg" }
38
+ "inverse-outline-info": {
39
+ "source": "$btn-info-inverse-outline-bg",
40
+ "$value": "inherit"
41
+ }
27
42
  },
28
43
  "border": {
29
- "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-border-color" },
44
+ "info": {
45
+ "source": "$btn-info-border-color",
46
+ "$value": "{color.btn.bg.info}"
47
+ },
30
48
  "outline-info": {
31
- "value": "{color.info.base}", "type": "color", "source": "$btn-info-outline-border-color"
49
+ "source": "$btn-info-outline-border-color",
50
+ "$value": "{color.info.base}"
51
+ },
52
+ "inverse-info": {
53
+ "source": "$btn-info-inverse-border-color",
54
+ "$value": "transparent"
32
55
  },
33
- "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-border-color" },
34
56
  "inverse-outline-info": {
35
- "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-outline-border-color"
57
+ "source": "$btn-info-inverse-outline-border-color",
58
+ "$value": "{color.white}"
36
59
  }
37
60
  },
38
61
  "hover": {
39
62
  "text": {
40
63
  "info": {
41
- "value": "{color.btn.hover.bg.info}",
42
- "type": "color",
43
64
  "source": "$btn-info-hover-color",
44
- "modify": [{ "type": "color-yiq" }]
65
+ "modify": [{ "type": "color-yiq" }],
66
+ "$value": "{color.btn.hover.bg.info}"
45
67
  },
46
68
  "outline-info": {
47
- "value": "{color.theme.hover.info}", "type": "color", "source": "$btn-info-outline-hover-color"
69
+ "source": "$btn-info-outline-hover-color",
70
+ "$value": "{color.theme.hover.info}"
48
71
  },
49
72
  "inverse-info": {
50
- "value": "{color.btn.text.inverse-info}",
51
- "type": "color",
52
73
  "source": "$btn-info-inverse-hover-color",
53
- "modify": [{ "type": "darken", "amount": 0.075 }]
74
+ "modify": [{ "type": "darken", "amount": 0.075 }],
75
+ "$value": "{color.btn.text.inverse-info}"
54
76
  },
55
77
  "inverse-outline-info": {
56
- "value": "{color.theme.hover.info}",
57
- "type": "color",
58
- "source": "$btn-info-inverse-outline-hover-color"
78
+ "source": "$btn-info-inverse-outline-hover-color",
79
+ "$value": "{color.theme.hover.info}"
59
80
  }
60
81
  },
61
82
  "bg": {
62
- "info": { "value": "{color.theme.hover.info}", "type": "color", "source": "$btn-info-hover-bg" },
63
- "outline-info": { "value": "{color.info.100}", "type": "color", "source": "$btn-info-outline-hover-bg" },
83
+ "info": {
84
+ "source": "$btn-info-hover-bg",
85
+ "$value": "{color.theme.hover.info}"
86
+ },
87
+ "outline-info": {
88
+ "source": "$btn-info-outline-hover-bg",
89
+ "$value": "{color.info.100}"
90
+ },
64
91
  "inverse-info": {
65
- "value": "{color.btn.bg.inverse-info}",
66
- "type": "color",
67
92
  "source": "$btn-info-inverse-hover-bg",
68
- "modify": [{ "type": "darken", "amount": 0.075 }]
93
+ "modify": [{ "type": "darken", "amount": 0.075 }],
94
+ "$value": "{color.btn.bg.inverse-info}"
69
95
  },
70
96
  "inverse-outline-info": {
71
- "value": "{color.info.100}", "type": "color", "source": "$btn-info-inverse-outline-hover-bg"
97
+ "source": "$btn-info-inverse-outline-hover-bg",
98
+ "$value": "{color.info.100}"
72
99
  }
73
100
  },
74
101
  "border": {
75
102
  "info": {
76
- "value": "{color.theme.hover.info}", "type": "color", "source": "$btn-info-hover-border-color"
103
+ "source": "$btn-info-hover-border-color",
104
+ "$value": "{color.theme.hover.info}"
77
105
  },
78
106
  "outline-info": {
79
- "value": "{color.info.900}", "type": "color", "source": "$btn-info-outline-hover-border-color"
107
+ "source": "$btn-info-outline-hover-border-color",
108
+ "$value": "{color.info.900}"
109
+ },
110
+ "inverse-info": {
111
+ "source": "$btn-info-inverse-hover-border-color",
112
+ "$value": "transparent"
80
113
  },
81
- "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-hover-border-color" },
82
114
  "inverse-outline-info": {
83
- "value": "transparent", "type": "color", "source": "$btn-info-inverse-outline-hover-border-color"
115
+ "source": "$btn-info-inverse-outline-hover-border-color",
116
+ "$value": "transparent"
84
117
  }
85
118
  }
86
119
  },
87
120
  "active": {
88
121
  "text": {
89
122
  "info": {
90
- "value": "{color.btn.active.bg.info}",
91
- "type": "color",
92
123
  "source": "$btn-info-active-color",
93
- "modify": [{ "type": "color-yiq" }]
124
+ "modify": [{ "type": "color-yiq" }],
125
+ "$value": "{color.btn.active.bg.info}"
94
126
  },
95
127
  "outline-info": {
96
- "value": "{color.btn.active.bg.outline-info}",
97
- "type": "color",
98
128
  "source": "$btn-info-outline-active-color",
99
- "modify": [{ "type": "color-yiq" }]
129
+ "modify": [{ "type": "color-yiq" }],
130
+ "$value": "{color.btn.active.bg.outline-info}"
100
131
  },
101
132
  "inverse-info": {
102
- "value": "{color.btn.text.inverse-info}",
103
- "type": "color",
104
133
  "source": "$btn-info-inverse-active-color",
105
- "modify": [{ "type": "darken", "amount": 0.1 }]
134
+ "modify": [{ "type": "darken", "amount": 0.1 }],
135
+ "$value": "{color.btn.text.inverse-info}"
106
136
  },
107
137
  "inverse-outline-info": {
108
- "value": "{color.btn.active.bg.inverse-outline-info}",
109
- "type": "color",
110
138
  "source": "$btn-info-inverse-outline-active-color",
111
- "modify": [{ "type": "color-yiq" }] }
139
+ "modify": [{ "type": "color-yiq" }],
140
+ "$value": "{color.btn.active.bg.inverse-outline-info}"
141
+ }
112
142
  },
113
143
  "bg": {
114
- "info": { "value": "{color.theme.active.info}", "type": "color", "source": "$btn-info-active-bg" },
144
+ "info": {
145
+ "source": "$btn-info-active-bg",
146
+ "$value": "{color.theme.active.info}"
147
+ },
115
148
  "outline-info": {
116
- "value": "{color.theme.bg.info}", "type": "color", "source": "$btn-info-outline-active-bg"
149
+ "source": "$btn-info-outline-active-bg",
150
+ "$value": "{color.theme.bg.info}"
151
+ },
152
+ "inverse-info": {
153
+ "source": "$btn-info-inverse-active-bg",
154
+ "$value": "{color.gray.100}"
117
155
  },
118
- "inverse-info": { "value": "{color.gray.100}", "type": "color", "source": "$btn-info-inverse-active-bg" },
119
156
  "inverse-outline-info": {
120
- "value": "{color.theme.bg.info}", "type": "color", "source": "$btn-info-inverse-outline-active-bg"
157
+ "source": "$btn-info-inverse-outline-active-bg",
158
+ "$value": "{color.theme.bg.info}"
121
159
  }
122
160
  },
123
161
  "border": {
124
162
  "info": {
125
- "value": "{color.theme.active.info}", "type": "color", "source": "$btn-info-active-border-color"
163
+ "source": "$btn-info-active-border-color",
164
+ "$value": "{color.theme.active.info}"
126
165
  },
127
166
  "outline-info": {
128
- "value": "{color.theme.active.info}",
129
- "type": "color",
130
- "source": "$btn-info-outline-active-border-color"
167
+ "source": "$btn-info-outline-active-border-color",
168
+ "$value": "{color.theme.active.info}"
169
+ },
170
+ "inverse-info": {
171
+ "source": "$btn-info-inverse-active-border-color",
172
+ "$value": "transparent"
131
173
  },
132
- "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-active-border-color" },
133
174
  "inverse-outline-info": {
134
- "value": "transparent", "type": "color", "source": "$btn-info-inverse-outline-active-border-color"
175
+ "source": "$btn-info-inverse-outline-active-border-color",
176
+ "$value": "transparent"
135
177
  }
136
178
  }
137
179
  },
138
180
  "focus": {
139
181
  "text": {
140
- "info": { "value": "{color.btn.text.info}", "type": "color", "source": "$btn-info-focus-color" },
182
+ "info": {
183
+ "source": "$btn-info-focus-color",
184
+ "$value": "{color.btn.text.info}"
185
+ },
141
186
  "outline-info": {
142
- "value": "{color.btn.text.outline-info}",
143
- "type": "color",
144
- "source": "$btn-info-outline-focus-color"
187
+ "source": "$btn-info-outline-focus-color",
188
+ "$value": "{color.btn.text.outline-info}"
145
189
  },
146
190
  "inverse-info": {
147
- "value": "{color.btn.text.inverse-info}",
148
- "type": "color",
149
- "source": "$btn-info-inverse-focus-color"
191
+ "source": "$btn-info-inverse-focus-color",
192
+ "$value": "{color.btn.text.inverse-info}"
150
193
  },
151
194
  "inverse-outline-info": {
152
- "value": "{color.btn.text.inverse-outline-info}",
153
- "type": "color",
154
- "source": "$btn-info-inverse-outline-focus-color"
195
+ "source": "$btn-info-inverse-outline-focus-color",
196
+ "$value": "{color.btn.text.inverse-outline-info}"
155
197
  }
156
198
  },
157
199
  "border": {
158
- "info": { "value": "{color.btn.border.info}", "type": "color", "source": "$btn-info-focus-border-color" },
200
+ "info": {
201
+ "source": "$btn-info-focus-border-color",
202
+ "$value": "{color.btn.border.info}"
203
+ },
159
204
  "outline-info": {
160
- "value": "{color.btn.border.outline-info}",
161
- "type": "color",
162
- "source": "$btn-info-outline-focus-border-color"
205
+ "source": "$btn-info-outline-focus-border-color",
206
+ "$value": "{color.btn.border.outline-info}"
207
+ },
208
+ "inverse-info": {
209
+ "source": "$btn-info-inverse-focus-border-color",
210
+ "$value": "{color.white}"
163
211
  },
164
- "inverse-info": { "value": "{color.white}", "type": "color", "source": "$btn-info-inverse-focus-border-color" },
165
212
  "inverse-outline-info": {
166
- "value": "{color.btn.border.inverse-outline-info}",
167
- "type": "color",
168
- "source": "$btn-info-inverse-outline-focus-border-color"
213
+ "source": "$btn-info-inverse-outline-focus-border-color",
214
+ "$value": "{color.btn.border.inverse-outline-info}"
169
215
  }
170
216
  },
171
217
  "bg": {
172
- "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-focus-bg" },
173
- "outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-outline-focus-bg" },
174
- "inverse-info": { "value": "{color.btn.bg.inverse-info}", "type": "color", "source": "$btn-info-inverse-focus-bg" },
175
- "inverse-outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-outline-focus-bg" }
218
+ "info": {
219
+ "source": "$btn-info-focus-bg",
220
+ "$value": "{color.btn.bg.info}"
221
+ },
222
+ "outline-info": {
223
+ "source": "$btn-info-outline-focus-bg",
224
+ "$value": "inherit"
225
+ },
226
+ "inverse-info": {
227
+ "source": "$btn-info-inverse-focus-bg",
228
+ "$value": "{color.btn.bg.inverse-info}"
229
+ },
230
+ "inverse-outline-info": {
231
+ "source": "$btn-info-inverse-outline-focus-bg",
232
+ "$value": "inherit"
233
+ }
176
234
  },
177
235
  "outline": {
178
- "info": { "value": "{color.theme.focus.info}", "type": "color", "source": "$btn-info-focus-outline-color" },
236
+ "info": {
237
+ "source": "$btn-info-focus-outline-color",
238
+ "$value": "{color.theme.focus.info}"
239
+ },
179
240
  "outline-info": {
180
- "value": "{color.theme.focus.info}",
181
- "type": "color",
182
- "source": "$btn-info-outline-focus-outline-color"
241
+ "source": "$btn-info-outline-focus-outline-color",
242
+ "$value": "{color.theme.focus.info}"
183
243
  },
184
244
  "inverse-info": {
185
- "value": "{color.btn.focus.border.inverse-info}",
186
- "type": "color",
187
- "source": "$btn-info-inverse-focus-outline-color"
245
+ "source": "$btn-info-inverse-focus-outline-color",
246
+ "$value": "{color.btn.focus.border.inverse-info}"
188
247
  },
189
248
  "inverse-outline-info": {
190
- "value": "{color.btn.focus.border.inverse-outline-info}",
191
- "type": "color",
192
- "source": "$btn-info-inverse-outline-focus-outline-color"
249
+ "source": "$btn-info-inverse-outline-focus-outline-color",
250
+ "$value": "{color.btn.focus.border.inverse-outline-info}"
193
251
  }
194
252
  }
195
253
  },
196
254
  "disabled": {
197
255
  "text": {
198
- "info": { "value": "{color.btn.text.info}", "type": "color", "source": "$btn-info-disabled-color" },
256
+ "info": {
257
+ "source": "$btn-info-disabled-color",
258
+ "$value": "{color.btn.text.info}"
259
+ },
199
260
  "outline-info": {
200
- "value": "{color.btn.text.outline-info}",
201
- "type": "color",
202
- "source": "$btn-info-outline-disabled-color"
261
+ "source": "$btn-info-outline-disabled-color",
262
+ "$value": "{color.btn.text.outline-info}"
203
263
  },
204
264
  "inverse-info": {
205
- "value": "{color.info.base}",
206
- "type": "color",
207
- "source": "$btn-info-inverse-disabled-color"
265
+ "source": "$btn-info-inverse-disabled-color",
266
+ "$value": "{color.info.base}"
208
267
  },
209
268
  "inverse-outline-info": {
210
- "value": "{color.btn.text.inverse-outline-info}",
211
- "type": "color",
212
- "source": "$btn-info-inverse-outline-disabled-color"
269
+ "source": "$btn-info-inverse-outline-disabled-color",
270
+ "$value": "{color.btn.text.inverse-outline-info}"
213
271
  }
214
272
  },
215
273
  "bg": {
216
- "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-disabled-bg" },
217
- "outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-outline-disabled-bg" },
218
- "inverse-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-disabled-bg" },
219
- "inverse-outline-info": { "value": "inherit", "type": "color", "source": "$btn-info-inverse-outline-disabled-bg" }
274
+ "info": {
275
+ "source": "$btn-info-disabled-bg",
276
+ "$value": "{color.btn.bg.info}"
277
+ },
278
+ "outline-info": {
279
+ "source": "$btn-info-outline-disabled-bg",
280
+ "$value": "inherit"
281
+ },
282
+ "inverse-info": {
283
+ "source": "$btn-info-inverse-disabled-bg",
284
+ "$value": "inherit"
285
+ },
286
+ "inverse-outline-info": {
287
+ "source": "$btn-info-inverse-outline-disabled-bg",
288
+ "$value": "inherit"
289
+ }
220
290
  },
221
291
  "border": {
222
- "info": { "value": "{color.btn.bg.info}", "type": "color", "source": "$btn-info-disabled-border-color" },
292
+ "info": {
293
+ "source": "$btn-info-disabled-border-color",
294
+ "$value": "{color.btn.bg.info}"
295
+ },
223
296
  "outline-info": {
224
- "value": "{color.btn.border.outline-info}",
225
- "type": "color",
226
- "source": "$btn-info-outline-disabled-border-color"
297
+ "source": "$btn-info-outline-disabled-border-color",
298
+ "$value": "{color.btn.border.outline-info}"
299
+ },
300
+ "inverse-info": {
301
+ "source": "$btn-info-inverse-disabled-border-color",
302
+ "$value": "transparent"
227
303
  },
228
- "inverse-info": { "value": "transparent", "type": "color", "source": "$btn-info-inverse-disabled-border-color" },
229
304
  "inverse-outline-info": {
230
- "value": "{color.btn.border.inverse-outline-info}",
231
- "type": "color",
232
- "source": "$btn-info-inverse-outline-disabled-border-color"
305
+ "source": "$btn-info-inverse-outline-disabled-border-color",
306
+ "$value": "{color.btn.border.inverse-outline-info}"
233
307
  }
234
308
  }
235
309
  }