@openedx/paragon 23.0.0-alpha.2 → 23.0.0-alpha.4

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 (274) hide show
  1. package/bin/paragon-scripts.js +10 -0
  2. package/dist/Annotation/index.scss +16 -0
  3. package/dist/Button/index.d.ts +35 -0
  4. package/dist/Button/index.js +37 -15
  5. package/dist/Button/index.js.map +1 -1
  6. package/dist/Card/CardDeck.js +0 -2
  7. package/dist/Card/CardDeck.js.map +1 -1
  8. package/dist/Card/index.scss +6 -6
  9. package/dist/Carousel/index.scss +24 -1
  10. package/dist/Chip/ChipIcon.d.ts +13 -8
  11. package/dist/Chip/ChipIcon.js +0 -2
  12. package/dist/Chip/ChipIcon.js.map +1 -1
  13. package/dist/Chip/constants.d.ts +4 -0
  14. package/dist/Chip/constants.js +3 -2
  15. package/dist/Chip/constants.js.map +1 -0
  16. package/dist/Chip/index.d.ts +4 -3
  17. package/dist/Chip/index.js +2 -4
  18. package/dist/Chip/index.js.map +1 -1
  19. package/dist/ChipCarousel/index.js +0 -2
  20. package/dist/ChipCarousel/index.js.map +1 -1
  21. package/dist/CloseButton/index.scss +8 -0
  22. package/dist/ColorPicker/index.scss +1 -1
  23. package/dist/DataTable/index.scss +12 -0
  24. package/dist/Dropdown/dropdown-bootstrap.scss +6 -0
  25. package/dist/Dropzone/index.scss +34 -0
  26. package/dist/Form/_FormText.scss +1 -1
  27. package/dist/Form/_bootstrap-custom-forms.scss +40 -0
  28. package/dist/Form/_index.scss +9 -0
  29. package/dist/Form/_mixins.scss +22 -0
  30. package/dist/Hyperlink/index.d.ts +24 -0
  31. package/dist/Hyperlink/index.js +20 -32
  32. package/dist/Hyperlink/index.js.map +1 -1
  33. package/dist/Icon/index.d.ts +4 -2
  34. package/dist/Icon/index.js +1 -1
  35. package/dist/Icon/index.js.map +1 -1
  36. package/dist/IconButton/index.d.ts +342 -0
  37. package/dist/IconButton/index.js +18 -26
  38. package/dist/IconButton/index.js.map +1 -1
  39. package/dist/IconButton/index.scss +146 -0
  40. package/dist/Menu/index.scss +8 -0
  41. package/dist/Modal/ModalDialog.js +8 -4
  42. package/dist/Modal/ModalDialog.js.map +1 -1
  43. package/dist/Modal/ModalPopup.js +7 -1
  44. package/dist/Modal/ModalPopup.js.map +1 -1
  45. package/dist/Modal/_ModalDialog.scss +26 -2
  46. package/dist/Nav/index.scss +8 -0
  47. package/dist/Overlay/index.d.ts +128 -0
  48. package/dist/Overlay/index.js +8 -2
  49. package/dist/Overlay/index.js.map +1 -1
  50. package/dist/PageBanner/index.scss +2 -2
  51. package/dist/Pagination/pagination-bootstrap.scss +9 -0
  52. package/dist/Popover/index.scss +1 -1
  53. package/dist/ProductTour/Checkpoint.scss +1 -1
  54. package/dist/ProgressBar/bootstrap-progress.scss +20 -5
  55. package/dist/ProgressBar/index.scss +3 -3
  56. package/dist/Stepper/index.scss +1 -1
  57. package/dist/Sticky/index.scss +12 -0
  58. package/dist/Toast/index.scss +13 -1
  59. package/dist/Tooltip/index.d.ts +7 -0
  60. package/dist/Tooltip/index.js.map +1 -1
  61. package/dist/Tooltip/index.scss +16 -0
  62. package/dist/core.css +914 -470
  63. package/dist/core.css.map +1 -1
  64. package/dist/core.min.css +1 -1
  65. package/dist/index.d.ts +5 -5
  66. package/dist/index.js +7 -7
  67. package/dist/light.css +2035 -1315
  68. package/dist/light.css.map +1 -1
  69. package/dist/light.min.css +1 -1
  70. package/dist/setupTest.d.ts +2 -0
  71. package/dist/setupTest.js.map +1 -0
  72. package/dist/utils/types/bootstrap.d.ts +39 -0
  73. package/dist/utils/types/bootstrap.js +2 -0
  74. package/dist/utils/types/bootstrap.js.map +1 -0
  75. package/lib/build-tokens.js +67 -31
  76. package/package.json +11 -8
  77. package/src/Annotation/index.scss +16 -0
  78. package/src/Button/{Button.test.jsx → Button.test.tsx} +14 -2
  79. package/src/Button/__snapshots__/{Button.test.jsx.snap → Button.test.tsx.snap} +19 -2
  80. package/src/Button/{index.jsx → index.tsx} +58 -16
  81. package/src/Card/CardDeck.jsx +0 -3
  82. package/src/Card/README.md +0 -31
  83. package/src/Card/index.scss +6 -6
  84. package/src/Carousel/index.scss +24 -1
  85. package/src/Chip/{Chip.test.jsx → Chip.test.tsx} +5 -7
  86. package/src/Chip/ChipIcon.tsx +8 -8
  87. package/src/Chip/{constants.js → constants.ts} +1 -1
  88. package/src/Chip/index.tsx +6 -8
  89. package/src/ChipCarousel/index.tsx +0 -2
  90. package/src/CloseButton/index.scss +8 -0
  91. package/src/ColorPicker/index.scss +1 -1
  92. package/src/DataTable/index.scss +12 -0
  93. package/src/Dropdown/dropdown-bootstrap.scss +6 -0
  94. package/src/Dropzone/index.scss +34 -0
  95. package/src/Form/_FormText.scss +1 -1
  96. package/src/Form/_bootstrap-custom-forms.scss +40 -0
  97. package/src/Form/_index.scss +9 -0
  98. package/src/Form/_mixins.scss +22 -0
  99. package/src/Hyperlink/{Hyperlink.test.jsx → Hyperlink.test.tsx} +21 -10
  100. package/src/Hyperlink/{index.jsx → index.tsx} +41 -37
  101. package/src/Icon/index.d.ts +4 -2
  102. package/src/Icon/index.jsx +1 -1
  103. package/src/IconButton/{IconButton.test.jsx → IconButton.test.tsx} +24 -3
  104. package/src/IconButton/__snapshots__/IconButton.test.tsx.snap +90 -0
  105. package/src/IconButton/index.scss +146 -0
  106. package/src/IconButton/{index.jsx → index.tsx} +66 -26
  107. package/src/Menu/index.scss +8 -0
  108. package/src/Modal/ModalDialog.jsx +7 -3
  109. package/src/Modal/ModalPopup.jsx +9 -1
  110. package/src/Modal/_ModalDialog.scss +26 -2
  111. package/src/Modal/modal-dialog.mdx +95 -6
  112. package/src/Modal/tests/ModalDialog.test.jsx +2 -0
  113. package/src/Modal/tests/ModalPopupNoMock.test.jsx +29 -0
  114. package/src/Nav/index.scss +8 -0
  115. package/src/Overlay/{index.jsx → index.tsx} +13 -8
  116. package/src/PageBanner/index.scss +2 -2
  117. package/src/Pagination/pagination-bootstrap.scss +9 -0
  118. package/src/Popover/index.scss +1 -1
  119. package/src/ProductTour/Checkpoint.scss +1 -1
  120. package/src/ProgressBar/bootstrap-progress.scss +20 -5
  121. package/src/ProgressBar/index.scss +3 -3
  122. package/src/Stepper/index.scss +1 -1
  123. package/src/Sticky/index.scss +12 -0
  124. package/src/Toast/index.scss +13 -1
  125. package/src/Tooltip/index.scss +16 -0
  126. package/src/Tooltip/{index.jsx → index.tsx} +9 -3
  127. package/src/index.d.ts +5 -5
  128. package/src/index.js +7 -7
  129. package/src/{setupTest.js → setupTest.ts} +1 -0
  130. package/src/utils/types/bootstrap.test.tsx +86 -0
  131. package/src/utils/types/bootstrap.ts +43 -0
  132. package/styles/css/core/abstraction-variables.css +44 -0
  133. package/styles/css/core/custom-media-breakpoints.css +3 -4
  134. package/styles/css/core/index.css +2 -1
  135. package/styles/css/core/variables.css +494 -430
  136. package/styles/css/themes/light/abstraction-variables.css +304 -0
  137. package/styles/css/themes/light/index.css +1 -0
  138. package/styles/css/themes/light/utility-classes.css +2 -3
  139. package/styles/css/themes/light/variables.css +1753 -1334
  140. package/styles/scss/core/_typography.scss +16 -4
  141. package/styles/scss/core/_utilities.scss +7 -3
  142. package/styles/scss/core/_variables.scss +43 -30
  143. package/styles/scss/core/core.scss +1 -0
  144. package/tokens/src/core/alias/size.json +6 -5
  145. package/tokens/src/core/components/ActionRow.json +3 -2
  146. package/tokens/src/core/components/Alert.json +12 -10
  147. package/tokens/src/core/components/Annotation.json +9 -7
  148. package/tokens/src/core/components/Avatar.json +9 -9
  149. package/tokens/src/core/components/AvatarButton.json +4 -3
  150. package/tokens/src/core/components/Badge.json +12 -9
  151. package/tokens/src/core/components/Breadcrumb.json +7 -5
  152. package/tokens/src/core/components/Bubble.json +4 -3
  153. package/tokens/src/core/components/Button/core.json +35 -59
  154. package/tokens/src/core/components/Card.json +33 -44
  155. package/tokens/src/core/components/Carousel.json +39 -13
  156. package/tokens/src/core/components/Chip.json +13 -21
  157. package/tokens/src/core/components/ChipCarousel.json +4 -5
  158. package/tokens/src/core/components/CloseButton.json +2 -6
  159. package/tokens/src/core/components/Code.json +9 -8
  160. package/tokens/src/core/components/Collapsible.json +10 -13
  161. package/tokens/src/core/components/ColorPicker.json +3 -2
  162. package/tokens/src/core/components/Container.json +6 -5
  163. package/tokens/src/core/components/DataTable.json +17 -9
  164. package/tokens/src/core/components/Dropdown.json +24 -29
  165. package/tokens/src/core/components/Dropzone.json +5 -7
  166. package/tokens/src/core/components/Form/other.json +5 -4
  167. package/tokens/src/core/components/Form/size.json +72 -119
  168. package/tokens/src/core/components/Form/spacing.json +39 -83
  169. package/tokens/src/core/components/Form/transition.json +43 -7
  170. package/tokens/src/core/components/Form/typography.json +24 -88
  171. package/tokens/src/core/components/Icon.json +6 -5
  172. package/tokens/src/core/components/IconButton.json +4 -7
  173. package/tokens/src/core/components/Image.json +7 -6
  174. package/tokens/src/core/components/Menu.json +14 -12
  175. package/tokens/src/core/components/Modal.json +26 -21
  176. package/tokens/src/core/components/Nav.json +14 -16
  177. package/tokens/src/core/components/Navbar.json +15 -30
  178. package/tokens/src/core/components/Pagination.json +23 -24
  179. package/tokens/src/core/components/Popover.json +18 -14
  180. package/tokens/src/core/components/ProductTour.json +8 -14
  181. package/tokens/src/core/components/ProgressBar.json +29 -14
  182. package/tokens/src/core/components/SearchField.json +7 -9
  183. package/tokens/src/core/components/SelectableBox.json +4 -3
  184. package/tokens/src/core/components/Sheet.json +3 -2
  185. package/tokens/src/core/components/Spinner.json +9 -7
  186. package/tokens/src/core/components/Stack.json +2 -1
  187. package/tokens/src/core/components/Stepper.json +12 -14
  188. package/tokens/src/core/components/Sticky.json +2 -1
  189. package/tokens/src/core/components/Tab.json +8 -7
  190. package/tokens/src/core/components/Tabs.json +5 -5
  191. package/tokens/src/core/components/Toast.json +11 -8
  192. package/tokens/src/core/components/Tooltip.json +13 -11
  193. package/tokens/src/core/components/general/caret.json +5 -3
  194. package/tokens/src/core/components/general/headings.json +5 -4
  195. package/tokens/src/core/components/general/hr.json +3 -2
  196. package/tokens/src/core/components/general/input.json +19 -19
  197. package/tokens/src/core/components/general/link.json +13 -12
  198. package/tokens/src/core/components/general/list.json +9 -6
  199. package/tokens/src/core/components/general/text.json +6 -12
  200. package/tokens/src/core/global/breakpoints.json +25 -6
  201. package/tokens/src/core/global/elevation.json +55 -13
  202. package/tokens/src/core/global/other.json +5 -1
  203. package/tokens/src/core/global/spacing.json +70 -17
  204. package/tokens/src/core/global/transition.json +41 -4
  205. package/tokens/src/core/global/typography.json +248 -53
  206. package/tokens/src/core/utilities/color.json +35 -4
  207. package/tokens/src/themes/light/alias/color.json +276 -75
  208. package/tokens/src/themes/light/components/Alert.json +15 -26
  209. package/tokens/src/themes/light/components/Annotation.json +27 -13
  210. package/tokens/src/themes/light/components/Avatar.json +2 -1
  211. package/tokens/src/themes/light/components/Badge.json +57 -122
  212. package/tokens/src/themes/light/components/Breadcrumb.json +6 -5
  213. package/tokens/src/themes/light/components/Bubble.json +9 -8
  214. package/tokens/src/themes/light/components/Button/brand.json +171 -119
  215. package/tokens/src/themes/light/components/Button/core.json +8 -9
  216. package/tokens/src/themes/light/components/Button/danger.json +171 -112
  217. package/tokens/src/themes/light/components/Button/dark.json +188 -106
  218. package/tokens/src/themes/light/components/Button/info.json +186 -112
  219. package/tokens/src/themes/light/components/Button/light.json +186 -110
  220. package/tokens/src/themes/light/components/Button/primary.json +178 -116
  221. package/tokens/src/themes/light/components/Button/secondary.json +166 -132
  222. package/tokens/src/themes/light/components/Button/success.json +176 -117
  223. package/tokens/src/themes/light/components/Button/tertiary.json +34 -60
  224. package/tokens/src/themes/light/components/Button/warning.json +164 -128
  225. package/tokens/src/themes/light/components/Card.json +10 -21
  226. package/tokens/src/themes/light/components/Carousel.json +12 -11
  227. package/tokens/src/themes/light/components/Chip.json +14 -26
  228. package/tokens/src/themes/light/components/CloseButton.json +12 -2
  229. package/tokens/src/themes/light/components/Code.json +7 -9
  230. package/tokens/src/themes/light/components/DataTable.json +7 -11
  231. package/tokens/src/themes/light/components/Dropdown.json +17 -20
  232. package/tokens/src/themes/light/components/Dropzone.json +49 -11
  233. package/tokens/src/themes/light/components/Form/color.json +101 -155
  234. package/tokens/src/themes/light/components/Form/elevation.json +38 -42
  235. package/tokens/src/themes/light/components/Form/other.json +44 -41
  236. package/tokens/src/themes/light/components/IconButton.json +408 -256
  237. package/tokens/src/themes/light/components/Image.json +7 -4
  238. package/tokens/src/themes/light/components/Menu.json +12 -10
  239. package/tokens/src/themes/light/components/Modal.json +22 -12
  240. package/tokens/src/themes/light/components/Nav.json +82 -94
  241. package/tokens/src/themes/light/components/Navbar.json +32 -76
  242. package/tokens/src/themes/light/components/OverflowScroll.json +3 -1
  243. package/tokens/src/themes/light/components/PageBanner.json +11 -10
  244. package/tokens/src/themes/light/components/Pagination.json +19 -23
  245. package/tokens/src/themes/light/components/Popover.json +22 -27
  246. package/tokens/src/themes/light/components/ProductTour.json +9 -20
  247. package/tokens/src/themes/light/components/ProgressBar.json +12 -10
  248. package/tokens/src/themes/light/components/Scrollable.json +3 -3
  249. package/tokens/src/themes/light/components/SearchField.json +9 -9
  250. package/tokens/src/themes/light/components/Sheet.json +6 -7
  251. package/tokens/src/themes/light/components/Stepper.json +12 -17
  252. package/tokens/src/themes/light/components/Sticky.json +31 -6
  253. package/tokens/src/themes/light/components/Tab.json +47 -24
  254. package/tokens/src/themes/light/components/Toast.json +26 -14
  255. package/tokens/src/themes/light/components/Tooltip.json +25 -10
  256. package/tokens/src/themes/light/components/general/body.json +3 -2
  257. package/tokens/src/themes/light/components/general/headings.json +2 -1
  258. package/tokens/src/themes/light/components/general/hr.json +3 -6
  259. package/tokens/src/themes/light/components/general/input.json +11 -4
  260. package/tokens/src/themes/light/components/general/link.json +34 -43
  261. package/tokens/src/themes/light/components/general/list.json +15 -19
  262. package/tokens/src/themes/light/components/general/text.json +5 -6
  263. package/tokens/src/themes/light/global/color.json +1592 -867
  264. package/tokens/src/themes/light/global/elevation.json +481 -93
  265. package/tokens/style-dictionary.js +342 -144
  266. package/tokens/utils.js +176 -6
  267. package/src/IconButton/__snapshots__/IconButton.test.jsx.snap +0 -20
  268. package/tokens/src/core/global/display.json +0 -22
  269. /package/src/Button/{ButtonGroup.test.jsx → ButtonGroup.test.tsx} +0 -0
  270. /package/src/Button/{ButtonToolbar.test.jsx → ButtonToolbar.test.tsx} +0 -0
  271. /package/src/Button/__snapshots__/{ButtonGroup.test.jsx.snap → ButtonGroup.test.tsx.snap} +0 -0
  272. /package/src/Button/__snapshots__/{ButtonToolbar.test.jsx.snap → ButtonToolbar.test.tsx.snap} +0 -0
  273. /package/src/Chip/__snapshots__/{Chip.test.jsx.snap → Chip.test.tsx.snap} +0 -0
  274. /package/src/Tooltip/{Tooltip.test.jsx → Tooltip.test.tsx} +0 -0
package/tokens/src/themes/light/components/IconButton.json CHANGED
@@ -1,449 +1,601 @@
1
1
  {
2
2
  "color": {
3
+ "$type": "color",
3
4
  "icon-button": {
4
- "bg": {
5
- "base": { "value": "transparent", "type": "color", "source": "$btn-icon-bg" },
5
+ "bg": {
6
+ "base": { "source": "$btn-icon-bg", "$value": "transparent" },
6
7
  "primary": {
7
- "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
8
- "hover": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
9
- "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
8
+ "base": { "$value": "{color.icon-button.bg.base}" },
9
+ "hover": { "$value": "{color.icon-button.text.primary.base}" },
10
+ "focus": { "$value": "{color.icon-button.bg.base}" },
10
11
  "inverse": {
11
- "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
12
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
13
- "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
12
+ "base": { "$value": "{color.icon-button.bg.base}" },
13
+ "hover": { "$value": "{color.icon-button.accent}" },
14
+ "focus": { "$value": "{color.icon-button.bg.base}" }
14
15
  },
15
16
  "active": {
16
- "base": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
17
- "hover": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
18
- "focus": { "value": "{color.icon-button.text.primary.base}", "type": "color" }
17
+ "base": { "$value": "{color.icon-button.text.primary.base}" },
18
+ "hover": { "$value": "{color.icon-button.text.primary.base}" },
19
+ "focus": { "$value": "{color.icon-button.text.primary.base}" }
19
20
  },
20
21
  "inverse-active": {
21
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
22
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
23
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
22
+ "base": { "$value": "{color.icon-button.accent}" },
23
+ "hover": { "$value": "{color.icon-button.accent}" },
24
+ "focus": { "$value": "{color.icon-button.accent}" }
24
25
  }
25
26
  },
26
27
  "secondary": {
27
- "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
28
- "hover": { "value": "{color.secondary.base}", "type": "color" },
29
- "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
28
+ "base": { "$value": "{color.icon-button.bg.base}" },
29
+ "hover": { "$value": "{color.secondary.base}" },
30
+ "focus": { "$value": "{color.icon-button.bg.base}" },
30
31
  "inverse": {
31
- "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
32
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
33
- "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
32
+ "base": { "$value": "{color.icon-button.bg.base}" },
33
+ "hover": { "$value": "{color.icon-button.accent}" },
34
+ "focus": { "$value": "{color.icon-button.bg.base}" }
34
35
  },
35
36
  "active": {
36
- "base": { "value": "{color.secondary.base}", "type": "color" },
37
- "hover": { "value": "{color.icon-button.bg.secondary.active.base}", "type": "color" },
38
- "focus": { "value": "{color.icon-button.bg.secondary.active.base}", "type": "color" }
37
+ "base": { "$value": "{color.secondary.base}" },
38
+ "hover": { "$value": "{color.icon-button.bg.secondary.active.base}" },
39
+ "focus": { "$value": "{color.icon-button.bg.secondary.active.base}" }
39
40
  },
40
41
  "inverse-active": {
41
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
42
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
43
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
42
+ "base": { "$value": "{color.icon-button.accent}" },
43
+ "hover": { "$value": "{color.icon-button.accent}" },
44
+ "focus": { "$value": "{color.icon-button.accent}" }
44
45
  }
45
46
  },
46
47
  "brand": {
47
- "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
48
- "hover": { "value": "{color.brand.base}", "type": "color" },
49
- "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
48
+ "base": { "$value": "{color.icon-button.bg.base}" },
49
+ "hover": { "$value": "{color.brand.base}" },
50
+ "focus": { "$value": "{color.icon-button.bg.base}" },
50
51
  "inverse": {
51
- "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
52
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
53
- "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
52
+ "base": { "$value": "{color.icon-button.bg.base}" },
53
+ "hover": { "$value": "{color.icon-button.accent}" },
54
+ "focus": { "$value": "{color.icon-button.bg.base}" }
54
55
  },
55
56
  "active": {
56
- "base": { "value": "{color.brand.base}", "type": "color" },
57
- "hover": { "value": "{color.icon-button.bg.brand.active.base}", "type": "color" },
58
- "focus": { "value": "{color.icon-button.bg.brand.active.base}", "type": "color" }
57
+ "base": { "$value": "{color.brand.base}" },
58
+ "hover": { "$value": "{color.icon-button.bg.brand.active.base}" },
59
+ "focus": { "$value": "{color.icon-button.bg.brand.active.base}" }
59
60
  },
60
61
  "inverse-active": {
61
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
62
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
63
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
62
+ "base": { "$value": "{color.icon-button.accent}" },
63
+ "hover": { "$value": "{color.icon-button.accent}" },
64
+ "focus": { "$value": "{color.icon-button.accent}" }
64
65
  }
65
66
  },
66
67
  "success": {
67
- "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
68
- "hover": { "value": "{color.success.base}", "type": "color" },
69
- "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
68
+ "base": { "$value": "{color.icon-button.bg.base}" },
69
+ "hover": { "$value": "{color.success.base}" },
70
+ "focus": { "$value": "{color.icon-button.bg.base}" },
70
71
  "inverse": {
71
- "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
72
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
73
- "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
72
+ "base": { "$value": "{color.icon-button.bg.base}" },
73
+ "hover": { "$value": "{color.icon-button.accent}" },
74
+ "focus": { "$value": "{color.icon-button.bg.base}" }
74
75
  },
75
76
  "active": {
76
- "base": { "value": "{color.success.base}", "type": "color" },
77
- "hover": { "value": "{color.icon-button.bg.success.active.base}", "type": "color" },
78
- "focus": { "value": "{color.icon-button.bg.success.active.base}", "type": "color" }
77
+ "base": { "$value": "{color.success.base}" },
78
+ "hover": { "$value": "{color.icon-button.bg.success.active.base}" },
79
+ "focus": { "$value": "{color.icon-button.bg.success.active.base}" }
79
80
  },
80
81
  "inverse-active": {
81
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
82
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
83
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
82
+ "base": { "$value": "{color.icon-button.accent}" },
83
+ "hover": { "$value": "{color.icon-button.accent}" },
84
+ "focus": { "$value": "{color.icon-button.accent}" }
84
85
  }
85
86
  },
86
87
  "warning": {
87
- "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
88
- "hover": { "value": "{color.warning.base}", "type": "color" },
89
- "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
88
+ "base": { "$value": "{color.icon-button.bg.base}" },
89
+ "hover": { "$value": "{color.warning.base}" },
90
+ "focus": { "$value": "{color.icon-button.bg.base}" },
90
91
  "inverse": {
91
- "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
92
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
93
- "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
92
+ "base": { "$value": "{color.icon-button.bg.base}" },
93
+ "hover": { "$value": "{color.icon-button.accent}" },
94
+ "focus": { "$value": "{color.icon-button.bg.base}" }
94
95
  },
95
96
  "active": {
96
- "base": { "value": "{color.warning.base}", "type": "color" },
97
- "hover": { "value": "{color.icon-button.bg.warning.active.base}", "type": "color" },
98
- "focus": { "value": "{color.icon-button.bg.warning.active.base}", "type": "color" }
97
+ "base": { "$value": "{color.warning.base}" },
98
+ "hover": { "$value": "{color.icon-button.bg.warning.active.base}" },
99
+ "focus": { "$value": "{color.icon-button.bg.warning.active.base}" }
99
100
  },
100
101
  "inverse-active": {
101
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
102
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
103
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
102
+ "base": { "$value": "{color.icon-button.accent}" },
103
+ "hover": { "$value": "{color.icon-button.accent}" },
104
+ "focus": { "$value": "{color.icon-button.accent}" }
104
105
  }
105
106
  },
106
107
  "danger": {
107
- "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
108
- "hover": { "value": "{color.danger.base}", "type": "color" },
109
- "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
108
+ "base": { "$value": "{color.icon-button.bg.base}" },
109
+ "hover": { "$value": "{color.danger.base}" },
110
+ "focus": { "$value": "{color.icon-button.bg.base}" },
110
111
  "inverse": {
111
- "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
112
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
113
- "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
112
+ "base": { "$value": "{color.icon-button.bg.base}" },
113
+ "hover": { "$value": "{color.icon-button.accent}" },
114
+ "focus": { "$value": "{color.icon-button.bg.base}" }
114
115
  },
115
116
  "active": {
116
- "base": { "value": "{color.danger.base}", "type": "color" },
117
- "hover": { "value": "{color.icon-button.bg.danger.active.base}", "type": "color" },
118
- "focus": { "value": "{color.icon-button.bg.danger.active.base}", "type": "color" }
117
+ "base": { "$value": "{color.danger.base}" },
118
+ "hover": { "$value": "{color.icon-button.bg.danger.active.base}" },
119
+ "focus": { "$value": "{color.icon-button.bg.danger.active.base}" }
119
120
  },
120
121
  "inverse-active": {
121
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
122
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
123
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
122
+ "base": { "$value": "{color.icon-button.accent}" },
123
+ "hover": { "$value": "{color.icon-button.accent}" },
124
+ "focus": { "$value": "{color.icon-button.accent}" }
124
125
  }
125
126
  },
126
127
  "light": {
127
- "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
128
- "hover": { "value": "{color.light.base}", "type": "color" },
129
- "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
128
+ "base": { "$value": "{color.icon-button.bg.base}" },
129
+ "hover": { "$value": "{color.light.base}" },
130
+ "focus": { "$value": "{color.icon-button.bg.base}" },
130
131
  "inverse": {
131
- "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
132
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
133
- "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
132
+ "base": { "$value": "{color.icon-button.bg.base}" },
133
+ "hover": { "$value": "{color.icon-button.accent}" },
134
+ "focus": { "$value": "{color.icon-button.bg.base}" }
134
135
  },
135
136
  "active": {
136
- "base": { "value": "{color.light.base}", "type": "color" },
137
- "hover": { "value": "{color.icon-button.bg.light.active.base}", "type": "color" },
138
- "focus": { "value": "{color.icon-button.bg.light.active.base}", "type": "color" }
137
+ "base": { "$value": "{color.light.base}" },
138
+ "hover": { "$value": "{color.icon-button.bg.light.active.base}" },
139
+ "focus": { "$value": "{color.icon-button.bg.light.active.base}" }
139
140
  },
140
141
  "inverse-active": {
141
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
142
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
143
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
142
+ "base": { "$value": "{color.icon-button.accent}" },
143
+ "hover": { "$value": "{color.icon-button.accent}" },
144
+ "focus": { "$value": "{color.icon-button.accent}" }
144
145
  }
145
146
  },
146
147
  "dark": {
147
- "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
148
- "hover": { "value": "{color.dark.base}", "type": "color" },
149
- "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
148
+ "base": { "$value": "{color.icon-button.bg.base}" },
149
+ "hover": { "$value": "{color.dark.base}" },
150
+ "focus": { "$value": "{color.icon-button.bg.base}" },
150
151
  "inverse": {
151
- "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
152
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
153
- "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
152
+ "base": { "$value": "{color.icon-button.bg.base}" },
153
+ "hover": { "$value": "{color.icon-button.accent}" },
154
+ "focus": { "$value": "{color.icon-button.bg.base}" }
154
155
  },
155
156
  "active": {
156
- "base": { "value": "{color.dark.base}", "type": "color" },
157
- "hover": { "value": "{color.icon-button.bg.dark.active.base}", "type": "color" },
158
- "focus": { "value": "{color.icon-button.bg.dark.active.base}", "type": "color" }
157
+ "base": { "$value": "{color.dark.base}" },
158
+ "hover": { "$value": "{color.icon-button.bg.dark.active.base}" },
159
+ "focus": { "$value": "{color.icon-button.bg.dark.active.base}" }
159
160
  },
160
161
  "inverse-active": {
161
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
162
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
163
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
162
+ "base": { "$value": "{color.icon-button.accent}" },
163
+ "hover": { "$value": "{color.icon-button.accent}" },
164
+ "focus": { "$value": "{color.icon-button.accent}" }
164
165
  }
165
166
  },
166
167
  "black": {
167
- "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
168
- "hover": { "value": "{color.black}", "type": "color" },
169
- "focus": { "value": "{color.icon-button.bg.base}", "type": "color" },
168
+ "base": { "$value": "{color.icon-button.bg.base}" },
169
+ "hover": { "$value": "{color.black}" },
170
+ "focus": { "$value": "{color.icon-button.bg.base}" },
170
171
  "inverse": {
171
- "base": { "value": "{color.icon-button.bg.base}", "type": "color" },
172
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
173
- "focus": { "value": "{color.icon-button.bg.base}", "type": "color" }
172
+ "base": { "$value": "{color.icon-button.bg.base}" },
173
+ "hover": { "$value": "{color.icon-button.accent}" },
174
+ "focus": { "$value": "{color.icon-button.bg.base}" }
174
175
  },
175
176
  "active": {
176
- "base": { "value": "{color.black}", "type": "color" },
177
- "hover": { "value": "{color.icon-button.bg.black.active.base}", "type": "color" },
178
- "focus": { "value": "{color.icon-button.bg.black.active.base}", "type": "color" }
177
+ "base": { "$value": "{color.black}" },
178
+ "hover": { "$value": "{color.icon-button.bg.black.active.base}" },
179
+ "focus": { "$value": "{color.icon-button.bg.black.active.base}" }
179
180
  },
180
181
  "inverse-active": {
181
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
182
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
183
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
182
+ "base": { "$value": "{color.icon-button.accent}" },
183
+ "hover": { "$value": "{color.icon-button.accent}" },
184
+ "focus": { "$value": "{color.icon-button.accent}" }
184
185
  }
185
186
  }
186
187
  },
187
188
  "text": {
188
189
  "primary": {
189
- "base": { "value": "{color.primary.base}", "type": "color" },
190
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
191
- "focus": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
190
+ "base": { "$value": "{color.primary.base}" },
191
+ "hover": { "$value": "{color.icon-button.accent}" },
192
+ "focus": { "$value": "{color.icon-button.text.primary.base}" },
192
193
  "inverse": {
193
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
194
- "hover": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
195
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
194
+ "base": { "$value": "{color.icon-button.accent}" },
195
+ "hover": { "$value": "{color.icon-button.text.primary.base}" },
196
+ "focus": { "$value": "{color.icon-button.accent}" }
196
197
  },
197
198
  "active": {
198
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
199
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
200
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
199
+ "base": { "$value": "{color.icon-button.accent}" },
200
+ "hover": { "$value": "{color.icon-button.accent}" },
201
+ "focus": { "$value": "{color.icon-button.accent}" }
201
202
  },
202
203
  "inverse-active": {
203
- "base": { "value": "{color.icon-button.text.primary.base}", "type": "color" },
204
- "hover": { "value": "color.icon-button.text.primary.base", "type": "color" },
205
- "focus": { "value": "{color.icon-button.text.primary.base}", "type": "color" }
204
+ "base": { "$value": "{color.icon-button.text.primary.base}" },
205
+ "hover": { "$value": "{color.icon-button.text.primary.base}" },
206
+ "focus": { "$value": "{color.icon-button.text.primary.base}" }
206
207
  }
207
208
  },
208
209
  "secondary": {
209
- "base": { "value": "{color.secondary.base}", "type": "color" },
210
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
211
- "focus": { "value": "{color.icon-button.text.secondary.base}", "type": "color" },
210
+ "base": { "$value": "{color.secondary.base}" },
211
+ "hover": { "$value": "{color.icon-button.accent}" },
212
+ "focus": { "$value": "{color.icon-button.text.secondary.base}" },
212
213
  "inverse": {
213
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
214
- "hover": { "value": "{color.secondary.base}", "type": "color" },
215
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
214
+ "base": { "$value": "{color.icon-button.accent}" },
215
+ "hover": { "$value": "{color.secondary.base}" },
216
+ "focus": { "$value": "{color.icon-button.accent}" }
216
217
  },
217
218
  "active": {
218
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
219
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
220
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
219
+ "base": { "$value": "{color.icon-button.accent}" },
220
+ "hover": { "$value": "{color.icon-button.accent}" },
221
+ "focus": { "$value": "{color.icon-button.accent}" }
221
222
  },
222
223
  "inverse-active": {
223
- "base": { "value": "{color.secondary.base}", "type": "color" },
224
- "hover": { "value": "{color.icon-button.text.secondary.inverse-active.base}", "type": "color" },
225
- "focus": { "value": "{color.icon-button.text.secondary.inverse-active.base}", "type": "color" }
224
+ "base": { "$value": "{color.secondary.base}" },
225
+ "hover": { "$value": "{color.icon-button.text.secondary.inverse-active.base}" },
226
+ "focus": { "$value": "{color.icon-button.text.secondary.inverse-active.base}" }
226
227
  }
227
228
  },
228
229
  "brand": {
229
- "base": { "value": "{color.brand.base}", "type": "color" },
230
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
231
- "focus": { "value": "{color.icon-button.text.brand.base}", "type": "color" },
230
+ "base": { "$value": "{color.brand.base}" },
231
+ "hover": { "$value": "{color.icon-button.accent}" },
232
+ "focus": { "$value": "{color.icon-button.text.brand.base}" },
232
233
  "inverse": {
233
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
234
- "hover": { "value": "{color.brand.base}", "type": "color" },
235
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
234
+ "base": { "$value": "{color.icon-button.accent}" },
235
+ "hover": { "$value": "{color.brand.base}" },
236
+ "focus": { "$value": "{color.icon-button.accent}" }
236
237
  },
237
238
  "active": {
238
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
239
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
240
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
239
+ "base": { "$value": "{color.icon-button.accent}" },
240
+ "hover": { "$value": "{color.icon-button.accent}" },
241
+ "focus": { "$value": "{color.icon-button.accent}" }
241
242
  },
242
243
  "inverse-active": {
243
- "base": { "value": "{color.brand.base}", "type": "color" },
244
- "hover": { "value": "{color.icon-button.text.brand.inverse-active.base}", "type": "color" },
245
- "focus": { "value": "{color.icon-button.text.brand.inverse-active.base}", "type": "color" }
244
+ "base": { "$value": "{color.brand.base}" },
245
+ "hover": { "$value": "{color.icon-button.text.brand.inverse-active.base}" },
246
+ "focus": { "$value": "{color.icon-button.text.brand.inverse-active.base}" }
246
247
  }
247
248
  },
248
249
  "success": {
249
- "base": { "value": "{color.success.base}", "type": "color" },
250
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
251
- "focus": { "value": "{color.icon-button.text.success.base}", "type": "color" },
250
+ "base": { "$value": "{color.success.base}" },
251
+ "hover": { "$value": "{color.icon-button.accent}" },
252
+ "focus": { "$value": "{color.icon-button.text.success.base}" },
252
253
  "inverse": {
253
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
254
- "hover": { "value": "{color.success.base}", "type": "color" },
255
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
254
+ "base": { "$value": "{color.icon-button.accent}" },
255
+ "hover": { "$value": "{color.success.base}" },
256
+ "focus": { "$value": "{color.icon-button.accent}" }
256
257
  },
257
258
  "active": {
258
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
259
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
260
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
259
+ "base": { "$value": "{color.icon-button.accent}" },
260
+ "hover": { "$value": "{color.icon-button.accent}" },
261
+ "focus": { "$value": "{color.icon-button.accent}" }
261
262
  },
262
263
  "inverse-active": {
263
- "base": { "value": "{color.success.base}", "type": "color" },
264
- "hover": { "value": "{color.icon-button.text.success.inverse-active.base}", "type": "color" },
265
- "focus": { "value": "{color.icon-button.text.success.inverse-active.base}", "type": "color" }
264
+ "base": { "$value": "{color.success.base}" },
265
+ "hover": { "$value": "{color.icon-button.text.success.inverse-active.base}" },
266
+ "focus": { "$value": "{color.icon-button.text.success.inverse-active.base}" }
266
267
  }
267
268
  },
268
269
  "warning": {
269
- "base": { "value": "{color.warning.base}", "type": "color" },
270
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
271
- "focus": { "value": "{color.icon-button.text.warning.base}", "type": "color" },
270
+ "base": { "$value": "{color.warning.base}" },
271
+ "hover": { "$value": "{color.icon-button.accent}" },
272
+ "focus": { "$value": "{color.icon-button.text.warning.base}" },
272
273
  "inverse": {
273
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
274
- "hover": { "value": "{color.warning.base}", "type": "color" },
275
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
274
+ "base": { "$value": "{color.icon-button.accent}" },
275
+ "hover": { "$value": "{color.warning.base}" },
276
+ "focus": { "$value": "{color.icon-button.accent}" }
276
277
  },
277
278
  "active": {
278
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
279
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
280
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
279
+ "base": { "$value": "{color.icon-button.accent}" },
280
+ "hover": { "$value": "{color.icon-button.accent}" },
281
+ "focus": { "$value": "{color.icon-button.accent}" }
281
282
  },
282
283
  "inverse-active": {
283
- "base": { "value": "{color.warning.base}", "type": "color" },
284
- "hover": { "value": "{color.icon-button.text.warning.inverse-active.base}", "type": "color" },
285
- "focus": { "value": "{color.icon-button.text.warning.inverse-active.base}", "type": "color" }
284
+ "base": { "$value": "{color.warning.base}" },
285
+ "hover": { "$value": "{color.icon-button.text.warning.inverse-active.base}" },
286
+ "focus": { "$value": "{color.icon-button.text.warning.inverse-active.base}" }
286
287
  }
287
288
  },
288
289
  "danger": {
289
- "base": { "value": "{color.danger.base}", "type": "color" },
290
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
291
- "focus": { "value": "{color.icon-button.text.danger.base}", "type": "color" },
290
+ "base": { "$value": "{color.danger.base}" },
291
+ "hover": { "$value": "{color.icon-button.accent}" },
292
+ "focus": { "$value": "{color.icon-button.text.danger.base}" },
292
293
  "inverse": {
293
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
294
- "hover": { "value": "{color.danger.base}", "type": "color" },
295
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
294
+ "base": { "$value": "{color.icon-button.accent}" },
295
+ "hover": { "$value": "{color.danger.base}" },
296
+ "focus": { "$value": "{color.icon-button.accent}" }
296
297
  },
297
298
  "active": {
298
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
299
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
300
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
299
+ "base": { "$value": "{color.icon-button.accent}" },
300
+ "hover": { "$value": "{color.icon-button.accent}" },
301
+ "focus": { "$value": "{color.icon-button.accent}" }
301
302
  },
302
303
  "inverse-active": {
303
- "base": { "value": "{color.danger.base}", "type": "color" },
304
- "hover": { "value": "{color.icon-button.text.danger.inverse-active.base}", "type": "color" },
305
- "focus": { "value": "{color.icon-button.text.danger.inverse-active.base}", "type": "color" }
304
+ "base": { "$value": "{color.danger.base}" },
305
+ "hover": { "$value": "{color.icon-button.text.danger.inverse-active.base}" },
306
+ "focus": { "$value": "{color.icon-button.text.danger.inverse-active.base}" }
306
307
  }
307
308
  },
308
309
  "light": {
309
- "base": { "value": "{color.light.base}", "type": "color" },
310
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
311
- "focus": { "value": "{color.icon-button.text.light.base}", "type": "color" },
310
+ "base": { "$value": "{color.light.base}" },
311
+ "hover": { "$value": "{color.icon-button.accent}" },
312
+ "focus": { "$value": "{color.icon-button.text.light.base}" },
312
313
  "inverse": {
313
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
314
- "hover": { "value": "{color.light.base}", "type": "color" },
315
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
314
+ "base": { "$value": "{color.icon-button.accent}" },
315
+ "hover": { "$value": "{color.light.base}" },
316
+ "focus": { "$value": "{color.icon-button.accent}" }
316
317
  },
317
318
  "active": {
318
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
319
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
320
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
319
+ "base": { "$value": "{color.icon-button.accent}" },
320
+ "hover": { "$value": "{color.icon-button.accent}" },
321
+ "focus": { "$value": "{color.icon-button.accent}" }
321
322
  },
322
323
  "inverse-active": {
323
- "base": { "value": "{color.light.base}", "type": "color" },
324
- "hover": { "value": "{color.icon-button.text.light.inverse-active.base}", "type": "color" },
325
- "focus": { "value": "{color.icon-button.text.light.inverse-active.base}", "type": "color" }
324
+ "base": { "$value": "{color.light.base}" },
325
+ "hover": { "$value": "{color.icon-button.text.light.inverse-active.base}" },
326
+ "focus": { "$value": "{color.icon-button.text.light.inverse-active.base}" }
326
327
  }
327
328
  },
328
329
  "dark": {
329
- "base": { "value": "{color.dark.base}", "type": "color" },
330
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
331
- "focus": { "value": "{color.icon-button.text.dark.base}", "type": "color" },
330
+ "base": { "$value": "{color.dark.base}" },
331
+ "hover": { "$value": "{color.icon-button.accent}" },
332
+ "focus": { "$value": "{color.icon-button.text.dark.base}" },
332
333
  "inverse": {
333
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
334
- "hover": { "value": "{color.dark.base}", "type": "color" },
335
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
334
+ "base": { "$value": "{color.icon-button.accent}" },
335
+ "hover": { "$value": "{color.dark.base}" },
336
+ "focus": { "$value": "{color.icon-button.accent}" }
336
337
  },
337
338
  "active": {
338
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
339
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
340
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
339
+ "base": { "$value": "{color.icon-button.accent}" },
340
+ "hover": { "$value": "{color.icon-button.accent}" },
341
+ "focus": { "$value": "{color.icon-button.accent}" }
341
342
  },
342
343
  "inverse-active": {
343
- "base": { "value": "{color.dark.base}", "type": "color" },
344
- "hover": { "value": "{color.icon-button.text.dark.inverse-active.base}", "type": "color" },
345
- "focus": { "value": "{color.icon-button.text.dark.inverse-active.base}", "type": "color" }
344
+ "base": { "$value": "{color.dark.base}" },
345
+ "hover": { "$value": "{color.icon-button.text.dark.inverse-active.base}" },
346
+ "focus": { "$value": "{color.icon-button.text.dark.inverse-active.base}" }
346
347
  }
347
348
  },
348
349
  "black": {
349
- "base": { "value": "{color.black}", "type": "color" },
350
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
351
- "focus": { "value": "{color.icon-button.text.black.base}", "type": "color" },
350
+ "base": { "$value": "{color.black}" },
351
+ "hover": { "$value": "{color.icon-button.accent}" },
352
+ "focus": { "$value": "{color.icon-button.text.black.base}" },
352
353
  "inverse": {
353
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
354
- "hover": { "value": "{color.black}", "type": "color" },
355
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
354
+ "base": { "$value": "{color.icon-button.accent}" },
355
+ "hover": { "$value": "{color.black}" },
356
+ "focus": { "$value": "{color.icon-button.accent}" }
356
357
  },
357
358
  "active": {
358
- "base": { "value": "{color.icon-button.accent}", "type": "color" },
359
- "hover": { "value": "{color.icon-button.accent}", "type": "color" },
360
- "focus": { "value": "{color.icon-button.accent}", "type": "color" }
359
+ "base": { "$value": "{color.icon-button.accent}" },
360
+ "hover": { "$value": "{color.icon-button.accent}" },
361
+ "focus": { "$value": "{color.icon-button.accent}" }
361
362
  },
362
363
  "inverse-active": {
363
- "base": { "value": "{color.black}", "type": "color" },
364
- "hover": { "value": "{color.icon-button.text.black.inverse-active.base}", "type": "color" },
365
- "focus": { "value": "{color.icon-button.text.black.inverse-active.base}", "type": "color" }
364
+ "base": { "$value": "{color.black}" },
365
+ "hover": { "$value": "{color.icon-button.text.black.inverse-active.base}" },
366
+ "focus": { "$value": "{color.icon-button.text.black.inverse-active.base}" }
366
367
  }
367
368
  }
368
369
  },
369
- "accent": { "value": "{color.white}", "type": "color", "source": "$btn-icon-accent-color" },
370
- "black": { "value": "{color.black}", "type": "color", "source": "$btn-icon-black" }
370
+ "accent": {
371
+ "source": "$btn-icon-accent-color",
372
+ "$value": "{color.white}"
373
+ },
374
+ "black": {
375
+ "source": "$btn-icon-black",
376
+ "$value": "{color.black}"
377
+ }
371
378
  }
372
379
  },
373
380
  "elevation": {
381
+ "$type": "shadow",
374
382
  "icon-button": {
375
383
  "box-shadow": {
376
384
  "primary": {
377
385
  "base": {
378
- "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.primary.base}", "type": "shadow"
386
+ "$value": {
387
+ "color": "{color.icon-button.text.primary.base}",
388
+ "spread": "{size.btn.focus.width}",
389
+ "offsetX": "0",
390
+ "offsetY": "0",
391
+ "blur": "0",
392
+ "inset": "inset"
393
+ }
379
394
  },
380
- "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
381
- "active": { "value": "none", "type": "shadow" },
382
- "inverse-active": { "value": "none", "type": "shadow" }
395
+ "inverse": {
396
+ "$value": {
397
+ "color": "{color.icon-button.accent}",
398
+ "spread": "{size.btn.focus.width}",
399
+ "offsetX": "0",
400
+ "offsetY": "0",
401
+ "blur": "0",
402
+ "inset": "inset"
403
+ }
404
+ },
405
+ "active": { "$value": "none" },
406
+ "inverse-active": { "$value": "none" }
383
407
  },
384
408
  "secondary": {
385
409
  "base": {
386
- "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.secondary.base}", "type": "shadow"
410
+ "$value": {
411
+ "color": "{color.icon-button.text.secondary.base}",
412
+ "spread": "{size.btn.focus.width}",
413
+ "offsetX": "0",
414
+ "offsetY": "0",
415
+ "blur": "0",
416
+ "inset": "inset"
417
+ }
387
418
  },
388
- "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
389
- "active": { "value": "none", "type": "shadow" },
390
- "inverse-active": { "value": "none", "type": "shadow" }
419
+ "inverse": {
420
+ "$value": {
421
+ "color": "{color.icon-button.accent}",
422
+ "spread": "{size.btn.focus.width}",
423
+ "offsetX": "0",
424
+ "offsetY": "0",
425
+ "blur": "0",
426
+ "inset": "inset"
427
+ }
428
+ },
429
+ "active": { "$value": "none" },
430
+ "inverse-active": { "$value": "none" }
391
431
  },
392
432
  "brand": {
393
433
  "base": {
394
- "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.brand.base}", "type": "shadow"
434
+ "$value": {
435
+ "color": "{color.icon-button.text.brand.base}",
436
+ "spread": "{size.btn.focus.width}",
437
+ "offsetX": "0",
438
+ "offsetY": "0",
439
+ "blur": "0",
440
+ "inset": "inset"
441
+ }
395
442
  },
396
- "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
397
- "active": { "value": "none", "type": "shadow" },
398
- "inverse-active": { "value": "none", "type": "shadow" }
443
+ "inverse": {
444
+ "$value": {
445
+ "color": "{color.icon-button.accent}",
446
+ "spread": "{size.btn.focus.width}",
447
+ "offsetX": "0",
448
+ "offsetY": "0",
449
+ "blur": "0",
450
+ "inset": "inset"
451
+ }
452
+ },
453
+ "active": { "$value": "none" },
454
+ "inverse-active": { "$value": "none" }
399
455
  },
400
456
  "success": {
401
457
  "base": {
402
- "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.success.base}", "type": "shadow"
458
+ "$value": {
459
+ "color": "{color.icon-button.text.success.base}",
460
+ "spread": "{size.btn.focus.width}",
461
+ "offsetX": "0",
462
+ "offsetY": "0",
463
+ "blur": "0",
464
+ "inset": "inset"
465
+ }
403
466
  },
404
- "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
405
- "active": { "value": "none", "type": "shadow" },
406
- "inverse-active": { "value": "none", "type": "shadow" }
467
+ "inverse": {
468
+ "$value": {
469
+ "color": "{color.icon-button.accent}",
470
+ "spread": "{size.btn.focus.width}",
471
+ "offsetX": "0",
472
+ "offsetY": "0",
473
+ "blur": "0",
474
+ "inset": "inset"
475
+ }
476
+ },
477
+ "active": { "$value": "none" },
478
+ "inverse-active": { "$value": "none" }
407
479
  },
408
480
  "warning": {
409
481
  "base": {
410
- "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.warning.base}", "type": "shadow"
482
+ "$value": {
483
+ "color": "{color.icon-button.text.warning.base}",
484
+ "spread": "{size.btn.focus.width}",
485
+ "offsetX": "0",
486
+ "offsetY": "0",
487
+ "blur": "0",
488
+ "inset": "inset"
489
+ }
411
490
  },
412
- "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
413
- "active": { "value": "none", "type": "shadow" },
414
- "inverse-active": { "value": "none", "type": "shadow" }
491
+ "inverse": {
492
+ "$value": {
493
+ "color": "{color.icon-button.accent}",
494
+ "spread": "{size.btn.focus.width}",
495
+ "offsetX": "0",
496
+ "offsetY": "0",
497
+ "blur": "0",
498
+ "inset": "inset"
499
+ }
500
+ },
501
+ "active": { "$value": "none" },
502
+ "inverse-active": { "$value": "none" }
415
503
  },
416
504
  "danger": {
417
505
  "base": {
418
- "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.danger.base}", "type": "shadow"
506
+ "$value": {
507
+ "color": "{color.icon-button.text.danger.base}",
508
+ "spread": "{size.btn.focus.width}",
509
+ "offsetX": "0",
510
+ "offsetY": "0",
511
+ "blur": "0",
512
+ "inset": "inset"
513
+ }
419
514
  },
420
- "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
421
- "active": { "value": "none", "type": "shadow" },
422
- "inverse-active": { "value": "none", "type": "shadow" }
515
+ "inverse": {
516
+ "$value": {
517
+ "color": "{color.icon-button.accent}",
518
+ "spread": "{size.btn.focus.width}",
519
+ "offsetX": "0",
520
+ "offsetY": "0",
521
+ "blur": "0",
522
+ "inset": "inset"
523
+ }
524
+ },
525
+ "active": { "$value": "none" },
526
+ "inverse-active": { "$value": "none" }
423
527
  },
424
528
  "light": {
425
529
  "base": {
426
- "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.light.base}", "type": "shadow"
530
+ "$value": {
531
+ "color": "{color.icon-button.text.light.base}",
532
+ "spread": "{size.btn.focus.width}",
533
+ "offsetX": "0",
534
+ "offsetY": "0",
535
+ "blur": "0",
536
+ "inset": "inset"
537
+ }
427
538
  },
428
- "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
429
- "active": { "value": "none", "type": "shadow" },
430
- "inverse-active": { "value": "none", "type": "shadow" }
539
+ "inverse": {
540
+ "$value": {
541
+ "color": "{color.icon-button.accent}",
542
+ "spread": "{size.btn.focus.width}",
543
+ "offsetX": "0",
544
+ "offsetY": "0",
545
+ "blur": "0",
546
+ "inset": "inset"
547
+ }
548
+ },
549
+ "active": { "$value": "none" },
550
+ "inverse-active": { "$value": "none" }
431
551
  },
432
552
  "dark": {
433
553
  "base": {
434
- "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.dark.base}", "type": "shadow"
554
+ "$value": {
555
+ "color": "{color.icon-button.text.dark.base}",
556
+ "spread": "{size.btn.focus.width}",
557
+ "offsetX": "0",
558
+ "offsetY": "0",
559
+ "blur": "0",
560
+ "inset": "inset"
561
+ }
435
562
  },
436
- "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
437
- "active": { "value": "none", "type": "shadow" },
438
- "inverse-active": { "value": "none", "type": "shadow" }
563
+ "inverse": {
564
+ "$value": {
565
+ "color": "{color.icon-button.accent}",
566
+ "spread": "{size.btn.focus.width}",
567
+ "offsetX": "0",
568
+ "offsetY": "0",
569
+ "blur": "0",
570
+ "inset": "inset"
571
+ }
572
+ },
573
+ "active": { "$value": "none" },
574
+ "inverse-active": { "$value": "none" }
439
575
  },
440
576
  "black": {
441
577
  "base": {
442
- "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.black.base}", "type": "shadow"
578
+ "$value": {
579
+ "color": "{color.icon-button.text.black.base}",
580
+ "spread": "{size.btn.focus.width}",
581
+ "offsetX": "0",
582
+ "offsetY": "0",
583
+ "blur": "0",
584
+ "inset": "inset"
585
+ }
443
586
  },
444
- "inverse": { "value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}", "type": "shadow" },
445
- "active": { "value": "none", "type": "shadow" },
446
- "inverse-active": { "value": "none", "type": "shadow" }
587
+ "inverse": {
588
+ "$value": {
589
+ "color": "{color.icon-button.accent}",
590
+ "spread": "{size.btn.focus.width}",
591
+ "offsetX": "0",
592
+ "offsetY": "0",
593
+ "blur": "0",
594
+ "inset": "inset"
595
+ }
596
+ },
597
+ "active": { "$value": "none" },
598
+ "inverse-active": { "$value": "none" }
447
599
  }
448
600
  }
449
601
  }