@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/global/elevation.json CHANGED
@@ -1,199 +1,587 @@
1
1
  {
2
2
  "elevation": {
3
+ "$type": "shadow",
3
4
  "box-shadow": {
4
5
  "level": {
5
6
  "1": {
6
- "value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)",
7
- "type": "shadow",
8
7
  "source": "$level-1-box-shadow",
9
- "description": "Basic box shadow of level 1."
8
+ "$value": [
9
+ {
10
+ "color": "rgba(0, 0, 0, .15)",
11
+ "offsetX": "0",
12
+ "offsetY": ".0625rem",
13
+ "blur": ".125rem"
14
+ },
15
+ {
16
+ "color": "rgba(0, 0, 0, .15)",
17
+ "offsetX": "0",
18
+ "offsetY": ".0625rem",
19
+ "blur": ".25rem"
20
+ }
21
+ ],
22
+ "$description": "Basic box shadow of level 1."
10
23
  },
11
24
  "2": {
12
- "value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)",
13
- "type": "shadow",
14
25
  "source": "$level-2-box-shadow",
15
- "description": "Basic box shadow of level 2."
26
+ "$value": [
27
+ {
28
+ "color": "rgba(0, 0, 0, .15)",
29
+ "offsetX": "0",
30
+ "offsetY": ".125rem",
31
+ "blur": ".25rem"
32
+ },
33
+ {
34
+ "color": "rgba(0, 0, 0, .15)",
35
+ "offsetX": "0",
36
+ "offsetY": ".125rem",
37
+ "blur": ".5rem"
38
+ }
39
+ ],
40
+ "$description": "Basic box shadow of level 2."
16
41
  },
17
42
  "3": {
18
- "value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)",
19
- "type": "shadow",
20
43
  "source": "$level-3-box-shadow",
21
- "description": "Basic box shadow of level 3."
44
+ "$value": [
45
+ {
46
+ "color": "rgba(0, 0, 0, .15)",
47
+ "offsetX": "0",
48
+ "offsetY": "0",
49
+ "blur": ".625rem"
50
+ },
51
+ {
52
+ "color": "rgba(0, 0, 0, .15)",
53
+ "offsetX": "0",
54
+ "offsetY": "0",
55
+ "blur": "1rem"
56
+ }
57
+ ],
58
+ "$description": "Basic box shadow of level 3."
22
59
  },
23
60
  "4": {
24
- "value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)",
25
- "type": "shadow",
26
61
  "source": "$level-4-box-shadow",
27
- "description": "Basic box shadow of level 4."
62
+ "$value": [
63
+ {
64
+ "color": "rgba(0, 0, 0, .15)",
65
+ "offsetX": "0",
66
+ "offsetY": ".625rem",
67
+ "blur": "1.25rem"
68
+ },
69
+ {
70
+ "color": "rgba(0, 0, 0, .15)",
71
+ "offsetX": "0",
72
+ "offsetY": ".5rem",
73
+ "blur": "1.25rem"
74
+ }
75
+ ],
76
+ "$description": "Basic box shadow of level 4."
28
77
  },
29
78
  "5": {
30
- "value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)",
31
- "type": "shadow",
32
79
  "source": "$level-5-box-shadow",
33
- "description": "Basic box shadow of level 5."
80
+ "$value": [
81
+ {
82
+ "color": "rgba(0, 0, 0, .15)",
83
+ "offsetX": "0",
84
+ "offsetY": "1.25px",
85
+ "blur": "2.5rem"
86
+ },
87
+ {
88
+ "color": "rgba(0, 0, 0, .15)",
89
+ "offsetX": "0",
90
+ "offsetY": ".5rem",
91
+ "blur": "2.5rem"
92
+ }
93
+ ],
94
+ "$description": "Basic box shadow of level 5."
34
95
  }
35
96
  },
36
- "base": { "value": "0 .125rem .25rem rgba(0, 0, 0, .3)", "type": "shadow", "source": "$box-shadow", "description": "Default box shadow." },
37
- "sm": { "value": "0 .0625rem .125rem rgba(0, 0, 0, .2)", "type": "shadow", "source": "$box-shadow-sm", "description": "Small box shadow." },
38
- "lg": { "value": "0 .25rem .5rem rgba(0, 0, 0, .3)", "type": "shadow", "source": "$box-shadow-lg", "description": "Large box shadow." },
97
+ "base": {
98
+ "source": "$box-shadow",
99
+ "$value": {
100
+ "color": "rgba(0, 0, 0, .3)",
101
+ "offsetX": "0",
102
+ "offsetY": ".125rem",
103
+ "blur": ".25rem"
104
+ },
105
+ "$description": "Default box shadow."
106
+ },
107
+ "sm": {
108
+ "source": "$box-shadow-sm",
109
+ "$value": {
110
+ "color": "rgba(0, 0, 0, .2)",
111
+ "offsetX": "0",
112
+ "offsetY": ".0625rem",
113
+ "blur": ".125rem"
114
+ },
115
+ "$description": "Small box shadow."
116
+ },
117
+ "lg": {
118
+ "source": "$box-shadow-lg",
119
+ "$value": {
120
+ "color": "rgba(0, 0, 0, .3)",
121
+ "offsetX": "0",
122
+ "offsetY": ".25rem",
123
+ "blur": ".5rem"
124
+ },
125
+ "$description": "Large box shadow."
126
+ },
39
127
  "down": {
40
128
  "1": {
41
- "value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)",
42
- "type": "shadow",
43
129
  "source": "$box-shadow-down-1",
44
- "description": "Bottom box shadow of level 1."
130
+ "$value": [
131
+ {
132
+ "color": "rgba(0, 0, 0, .15)",
133
+ "offsetX": "0",
134
+ "offsetY": ".0625rem",
135
+ "blur": ".125rem"
136
+ },
137
+ {
138
+ "color": "rgba(0, 0, 0, .15)",
139
+ "offsetX": "0",
140
+ "offsetY": ".0625rem",
141
+ "blur": ".25rem"
142
+ }
143
+ ],
144
+ "$description": "Bottom box shadow of level 1."
45
145
  },
46
146
  "2": {
47
- "value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)",
48
- "type": "shadow",
49
147
  "source": "$box-shadow-down-2",
50
- "description": "Bottom box shadow of level 2."
148
+ "$value": [
149
+ {
150
+ "color": "rgba(0, 0, 0, .15)",
151
+ "offsetX": "0",
152
+ "offsetY": ".125rem",
153
+ "blur": ".25rem"
154
+ },
155
+ {
156
+ "color": "rgba(0, 0, 0, .15)",
157
+ "offsetX": "0",
158
+ "offsetY": ".125rem",
159
+ "blur": ".5rem"
160
+ }
161
+ ],
162
+ "$description": "Bottom box shadow of level 2."
51
163
  },
52
164
  "3": {
53
- "value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)",
54
- "type": "shadow",
55
165
  "source": "$box-shadow-down-3",
56
- "description": "Bottom box shadow of level 3."
166
+ "$value": [
167
+ {
168
+ "color": "rgba(0, 0, 0, .15)",
169
+ "offsetX": "0",
170
+ "offsetY": ".5rem",
171
+ "blur": "1rem"
172
+ },
173
+ {
174
+ "color": "rgba(0, 0, 0, .15)",
175
+ "offsetX": "0",
176
+ "offsetY": ".25rem",
177
+ "blur": ".625rem"
178
+ }
179
+ ],
180
+ "$description": "Bottom box shadow of level 3."
57
181
  },
58
182
  "4": {
59
- "value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)",
60
- "type": "shadow",
61
183
  "source": "$box-shadow-down-4",
62
- "description": "Bottom box shadow of level 4."
184
+ "$value": [
185
+ {
186
+ "color": "rgba(0, 0, 0, .15)",
187
+ "offsetX": "0",
188
+ "offsetY": ".625rem",
189
+ "blur": "1.25rem"
190
+ },
191
+ {
192
+ "color": "rgba(0, 0, 0, .15)",
193
+ "offsetX": "0",
194
+ "offsetY": ".5rem",
195
+ "blur": "1.25rem"
196
+ }
197
+ ],
198
+ "$description": "Bottom box shadow of level 4."
63
199
  },
64
200
  "5": {
65
- "value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)",
66
- "type": "shadow",
67
201
  "source": "$box-shadow-down-5",
68
- "description": "Bottom box shadow of level 5."
202
+ "$value": [
203
+ {
204
+ "color": "rgba(0, 0, 0, .15)",
205
+ "offsetX": "0",
206
+ "offsetY": "1.25px",
207
+ "blur": "2.5rem"
208
+ },
209
+ {
210
+ "color": "rgba(0, 0, 0, .15)",
211
+ "offsetX": "0",
212
+ "offsetY": ".5rem",
213
+ "blur": "2.5rem"
214
+ }
215
+ ],
216
+ "$description": "Bottom box shadow of level 5."
69
217
  }
70
218
  },
71
219
  "left": {
72
220
  "1": {
73
- "value": "-.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15)",
74
- "type": "shadow",
75
221
  "source": "$box-shadow-left-1",
76
- "description": "Left box shadow of level 1."
222
+ "$value": [
223
+ {
224
+ "color": "rgba(0, 0, 0, .15)",
225
+ "offsetX": "-.0625rem",
226
+ "offsetY": "0",
227
+ "blur": ".125rem"
228
+ },
229
+ {
230
+ "color": "rgba(0, 0, 0, .15)",
231
+ "offsetX": "-.0625rem",
232
+ "offsetY": "0",
233
+ "blur": ".25rem"
234
+ }
235
+ ],
236
+ "$description": "Left box shadow of level 1."
77
237
  },
78
238
  "2": {
79
- "value": "-.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15)",
80
- "type": "shadow",
81
239
  "source": "$box-shadow-left-2",
82
- "description": "Left box shadow of level 2."
240
+ "$value": [
241
+ {
242
+ "color": "rgba(0, 0, 0, .15)",
243
+ "offsetX": "-.125rem",
244
+ "offsetY": "0",
245
+ "blur": ".25rem"
246
+ },
247
+ {
248
+ "color": "rgba(0, 0, 0, .15)",
249
+ "offsetX": "-.125rem",
250
+ "offsetY": "0",
251
+ "blur": ".5rem"
252
+ }
253
+ ],
254
+ "$description": "Left box shadow of level 2."
83
255
  },
84
256
  "3": {
85
- "value": "-.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15)",
86
- "type": "shadow",
87
257
  "source": "$box-shadow-left-3",
88
- "description": "Left box shadow of level 3."
258
+ "$value": [
259
+ {
260
+ "color": "rgba(0, 0, 0, .15)",
261
+ "offsetX": "-.5rem",
262
+ "offsetY": "0",
263
+ "blur": "1rem"
264
+ },
265
+ {
266
+ "color": "rgba(0, 0, 0, .15)",
267
+ "offsetX": "-.25rem",
268
+ "offsetY": "0",
269
+ "blur": ".625rem"
270
+ }
271
+ ],
272
+ "$description": "Left box shadow of level 3."
89
273
  },
90
274
  "4": {
91
- "value": "-.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15)",
92
- "type": "shadow",
93
275
  "source": "$box-shadow-left-4",
94
- "description": "Left box shadow of level 4."
276
+ "$value": [
277
+ {
278
+ "color": "rgba(0, 0, 0, .15)",
279
+ "offsetX": "-.625rem",
280
+ "offsetY": "0",
281
+ "blur": "1.25rem"
282
+ },
283
+ {
284
+ "color": "rgba(0, 0, 0, .15)",
285
+ "offsetX": "-.5rem",
286
+ "offsetY": "0",
287
+ "blur": "1.25rem"
288
+ }
289
+ ],
290
+ "$description": "Left box shadow of level 4."
95
291
  },
96
292
  "5": {
97
- "value": "-1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15)",
98
- "type": "shadow",
99
293
  "source": "$box-shadow-left-5",
100
- "description": "Left box shadow of level 5."
294
+ "$value": [
295
+ {
296
+ "color": "rgba(0, 0, 0, .15)",
297
+ "offsetX": "-1.25rem",
298
+ "offsetY": "0",
299
+ "blur": "2.5rem"
300
+ },
301
+ {
302
+ "color": "rgba(0, 0, 0, .15)",
303
+ "offsetX": "-.5rem",
304
+ "offsetY": "0",
305
+ "blur": "3rem"
306
+ }
307
+ ],
308
+ "$description": "Left box shadow of level 5."
101
309
  }
102
310
  },
103
311
  "up": {
104
312
  "1": {
105
- "value": "0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15)",
106
- "type": "shadow",
107
313
  "source": "$box-shadow-up-1",
108
- "description": "Top box shadow of level 1."
314
+ "$value": [
315
+ {
316
+ "color": "rgba(0, 0, 0, .15)",
317
+ "offsetX": "0",
318
+ "offsetY": "-.0625rem",
319
+ "blur": ".125rem"
320
+ },
321
+ {
322
+ "color": "rgba(0, 0, 0, .15)",
323
+ "offsetX": "0",
324
+ "offsetY": "-.0625rem",
325
+ "blur": ".25rem"
326
+ }
327
+ ],
328
+ "$description": "Top box shadow of level 1."
109
329
  },
110
330
  "2": {
111
- "value": "0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15)",
112
- "type": "shadow",
113
331
  "source": "$box-shadow-up-2",
114
- "description": "Top box shadow of level 2."
332
+ "$value": [
333
+ {
334
+ "color": "rgba(0, 0, 0, .15)",
335
+ "offsetX": "0",
336
+ "offsetY": "-.125rem",
337
+ "blur": ".25rem"
338
+ },
339
+ {
340
+ "color": "rgba(0, 0, 0, .15)",
341
+ "offsetX": "0",
342
+ "offsetY": "-.125rem",
343
+ "blur": ".5rem"
344
+ }
345
+ ],
346
+ "$description": "Top box shadow of level 2."
115
347
  },
116
348
  "3": {
117
- "value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)",
118
- "type": "shadow",
119
349
  "source": "$box-shadow-up-3",
120
- "description": "Top box shadow of level 3."
350
+ "$value": [
351
+ {
352
+ "color": "rgba(0, 0, 0, .15)",
353
+ "offsetX": "0",
354
+ "offsetY": "-.5rem",
355
+ "blur": "1rem"
356
+ },
357
+ {
358
+ "color": "rgba(0, 0, 0, .15)",
359
+ "offsetX": "0",
360
+ "offsetY": "-.25rem",
361
+ "blur": ".625rem"
362
+ }
363
+ ],
364
+ "$description": "Top box shadow of level 3."
121
365
  },
122
366
  "4": {
123
- "value": "0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15)",
124
- "type": "shadow",
125
367
  "source": "$box-shadow-up-4",
126
- "description": "Top box shadow of level 4."
368
+ "$value": [
369
+ {
370
+ "color": "rgba(0, 0, 0, .15)",
371
+ "offsetX": "0",
372
+ "offsetY": "-.625rem",
373
+ "blur": "1.25rem"
374
+ },
375
+ {
376
+ "color": "rgba(0, 0, 0, .15)",
377
+ "offsetX": "0",
378
+ "offsetY": "-.5rem",
379
+ "blur": "1.25rem"
380
+ }
381
+ ],
382
+ "$description": "Top box shadow of level 4."
127
383
  },
128
384
  "5": {
129
- "value": "0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15)",
130
- "type": "shadow",
131
385
  "source": "$box-shadow-up-5",
132
- "description": "Basic box shadow of level 5."
386
+ "$value": [
387
+ {
388
+ "color": "rgba(0, 0, 0, .15)",
389
+ "offsetX": "0",
390
+ "offsetY": "-1.25rem",
391
+ "blur": "2.5rem"
392
+ },
393
+ {
394
+ "color": "rgba(0, 0, 0, .15)",
395
+ "offsetX": "0",
396
+ "offsetY": "-.5rem",
397
+ "blur": "3rem"
398
+ }
399
+ ],
400
+ "$description": "Basic box shadow of level 5."
133
401
  }
134
402
  },
135
403
  "right": {
136
404
  "1": {
137
- "value": ".0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15)",
138
- "type": "shadow",
139
405
  "source": "$box-shadow-right-1",
140
- "description": "Right box shadow of level 1."
406
+ "$value": [
407
+ {
408
+ "color": "rgba(0, 0, 0, .15)",
409
+ "offsetX": ".0625rem",
410
+ "offsetY": "0",
411
+ "blur": ".125rem"
412
+ },
413
+ {
414
+ "color": "rgba(0, 0, 0, .15)",
415
+ "offsetX": ".0625rem",
416
+ "offsetY": "0",
417
+ "blur": ".25rem"
418
+ }
419
+ ],
420
+ "$description": "Right box shadow of level 1."
141
421
  },
142
422
  "2": {
143
- "value": ".125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15)",
144
- "type": "shadow",
145
423
  "source": "$box-shadow-right-2",
146
- "description": "Right box shadow of level 2."
424
+ "$value": [
425
+ {
426
+ "color": "rgba(0, 0, 0, .15)",
427
+ "offsetX": ".125rem",
428
+ "offsetY": "0",
429
+ "blur": ".25rem"
430
+ },
431
+ {
432
+ "color": "rgba(0, 0, 0, .15)",
433
+ "offsetX": ".125rem",
434
+ "offsetY": "0",
435
+ "blur": ".5rem"
436
+ }
437
+ ],
438
+ "$description": "Right box shadow of level 2."
147
439
  },
148
440
  "3": {
149
- "value": ".5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15)",
150
- "type": "shadow",
151
441
  "source": "$box-shadow-right-3",
152
- "description": "Right box shadow of level 3."
442
+ "$value": [
443
+ {
444
+ "color": "rgba(0, 0, 0, .15)",
445
+ "offsetX": ".5rem",
446
+ "offsetY": "0",
447
+ "blur": "1rem"
448
+ },
449
+ {
450
+ "color": "rgba(0, 0, 0, .15)",
451
+ "offsetX": ".25rem",
452
+ "offsetY": "0",
453
+ "blur": ".625rem"
454
+ }
455
+ ],
456
+ "$description": "Right box shadow of level 3."
153
457
  },
154
458
  "4": {
155
- "value": ".625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15)",
156
- "type": "shadow",
157
459
  "source": "$box-shadow-right-4",
158
- "description": "Right box shadow of level 4."
460
+ "$value": [
461
+ {
462
+ "color": "rgba(0, 0, 0, .15)",
463
+ "offsetX": ".625rem",
464
+ "offsetY": "0",
465
+ "blur": "1.25rem"
466
+ },
467
+ {
468
+ "color": "rgba(0, 0, 0, .15)",
469
+ "offsetX": ".5rem",
470
+ "offsetY": "0",
471
+ "blur": "1.25rem"
472
+ }
473
+ ],
474
+ "$description": "Right box shadow of level 4."
159
475
  },
160
476
  "5": {
161
- "value": "1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15)",
162
- "type": "shadow",
163
477
  "source": "$box-shadow-right-5",
164
- "description": "Right box shadow of level 5."
478
+ "$value": [
479
+ {
480
+ "color": "rgba(0, 0, 0, .15)",
481
+ "offsetX": "1.25rem",
482
+ "offsetY": "0",
483
+ "blur": "2.5rem"
484
+ },
485
+ {
486
+ "color": "rgba(0, 0, 0, .15)",
487
+ "offsetX": ".5rem",
488
+ "offsetY": "0",
489
+ "blur": "3rem"
490
+ }
491
+ ],
492
+ "$description": "Right box shadow of level 5."
165
493
  }
166
494
  },
167
495
  "centered": {
168
496
  "1": {
169
- "value": "0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15)",
170
- "type": "shadow",
171
497
  "source": "$box-shadow-centered-1",
172
- "description": "Centered box shadow of level 1."
498
+ "$value": [
499
+ {
500
+ "color": "rgba(0, 0, 0, .15)",
501
+ "offsetX": "0",
502
+ "offsetY": "0",
503
+ "blur": ".125rem"
504
+ },
505
+ {
506
+ "color": "rgba(0, 0, 0, .15)",
507
+ "offsetX": "0",
508
+ "offsetY": "0",
509
+ "blur": ".25rem"
510
+ }
511
+ ],
512
+ "$description": "Centered box shadow of level 1."
173
513
  },
174
514
  "2": {
175
- "value": "0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15)",
176
- "type": "shadow",
177
515
  "source": "$box-shadow-centered-2",
178
- "description": "Centered box shadow of level 2."
516
+ "$value": [
517
+ {
518
+ "color": "rgba(0, 0, 0, .15)",
519
+ "offsetX": "0",
520
+ "offsetY": "0",
521
+ "blur": ".25rem"
522
+ },
523
+ {
524
+ "color": "rgba(0, 0, 0, .15)",
525
+ "offsetX": "0",
526
+ "offsetY": "0",
527
+ "blur": ".5rem"
528
+ }
529
+ ],
530
+ "$description": "Centered box shadow of level 2."
179
531
  },
180
532
  "3": {
181
- "value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)",
182
- "type": "shadow",
183
533
  "source": "$box-shadow-centered-3",
184
- "description": "Centered box shadow of level 3."
534
+ "$value": [
535
+ {
536
+ "color": "rgba(0, 0, 0, .15)",
537
+ "offsetX": "0",
538
+ "offsetY": "0",
539
+ "blur": ".625rem"
540
+ },
541
+ {
542
+ "color": "rgba(0, 0, 0, .15)",
543
+ "offsetX": "0",
544
+ "offsetY": "0",
545
+ "blur": "1rem"
546
+ }
547
+ ],
548
+ "$description": "Centered box shadow of level 3."
185
549
  },
186
550
  "4": {
187
- "value": "0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15)",
188
- "type": "shadow",
189
551
  "source": "$box-shadow-centered-4",
190
- "description": "Centered box shadow of level 4."
552
+ "$value": [
553
+ {
554
+ "color": "rgba(0, 0, 0, .15)",
555
+ "offsetX": "0",
556
+ "offsetY": "0",
557
+ "blur": "1.25rem"
558
+ },
559
+ {
560
+ "color": "rgba(0, 0, 0, .15)",
561
+ "offsetX": "0",
562
+ "offsetY": "0",
563
+ "blur": "1.25rem"
564
+ }
565
+ ],
566
+ "$description": "Centered box shadow of level 4."
191
567
  },
192
568
  "5": {
193
- "value": "0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15)",
194
- "type": "shadow",
195
569
  "source": "$box-shadow-centered-5",
196
- "description": "Centered box shadow of level 5."
570
+ "$value": [
571
+ {
572
+ "color": "rgba(0, 0, 0, .15)",
573
+ "offsetX": "0",
574
+ "offsetY": "0",
575
+ "blur": "2.5rem"
576
+ },
577
+ {
578
+ "color": "rgba(0, 0, 0, .15)",
579
+ "offsetX": "0",
580
+ "offsetY": "0",
581
+ "blur": "3rem"
582
+ }
583
+ ],
584
+ "$description": "Centered box shadow of level 5."
197
585
  }
198
586
  }
199
587
  }