@openedx/paragon 23.0.0-alpha.3 → 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 (209) 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 +6 -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/DataTable/index.scss +12 -0
  11. package/dist/Dropdown/dropdown-bootstrap.scss +6 -0
  12. package/dist/Dropzone/index.scss +34 -0
  13. package/dist/Form/_FormText.scss +1 -1
  14. package/dist/Form/_bootstrap-custom-forms.scss +40 -0
  15. package/dist/Form/_index.scss +9 -0
  16. package/dist/Form/_mixins.scss +22 -0
  17. package/dist/IconButton/index.d.ts +1 -1
  18. package/dist/IconButton/index.scss +146 -0
  19. package/dist/Menu/index.scss +8 -0
  20. package/dist/Modal/ModalDialog.js +8 -4
  21. package/dist/Modal/ModalDialog.js.map +1 -1
  22. package/dist/Modal/_ModalDialog.scss +22 -2
  23. package/dist/Nav/index.scss +8 -0
  24. package/dist/Overlay/index.d.ts +2 -2
  25. package/dist/PageBanner/index.scss +2 -2
  26. package/dist/Pagination/pagination-bootstrap.scss +9 -0
  27. package/dist/Popover/index.scss +1 -1
  28. package/dist/ProductTour/Checkpoint.scss +1 -1
  29. package/dist/ProgressBar/bootstrap-progress.scss +20 -5
  30. package/dist/ProgressBar/index.scss +3 -3
  31. package/dist/Stepper/index.scss +1 -1
  32. package/dist/Sticky/index.scss +12 -0
  33. package/dist/Toast/index.scss +13 -1
  34. package/dist/Tooltip/index.scss +16 -0
  35. package/dist/core.css +911 -470
  36. package/dist/core.css.map +1 -1
  37. package/dist/core.min.css +1 -1
  38. package/dist/light.css +2035 -1315
  39. package/dist/light.css.map +1 -1
  40. package/dist/light.min.css +1 -1
  41. package/lib/build-tokens.js +67 -31
  42. package/package.json +7 -4
  43. package/src/Annotation/index.scss +16 -0
  44. package/src/Card/CardDeck.jsx +0 -3
  45. package/src/Card/README.md +0 -31
  46. package/src/Card/index.scss +6 -6
  47. package/src/Carousel/index.scss +24 -1
  48. package/src/CloseButton/index.scss +8 -0
  49. package/src/ColorPicker/index.scss +1 -1
  50. package/src/DataTable/index.scss +12 -0
  51. package/src/Dropdown/dropdown-bootstrap.scss +6 -0
  52. package/src/Dropzone/index.scss +34 -0
  53. package/src/Form/_FormText.scss +1 -1
  54. package/src/Form/_bootstrap-custom-forms.scss +40 -0
  55. package/src/Form/_index.scss +9 -0
  56. package/src/Form/_mixins.scss +22 -0
  57. package/src/IconButton/index.scss +146 -0
  58. package/src/Menu/index.scss +8 -0
  59. package/src/Modal/ModalDialog.jsx +7 -3
  60. package/src/Modal/_ModalDialog.scss +22 -2
  61. package/src/Modal/modal-dialog.mdx +95 -6
  62. package/src/Modal/tests/ModalDialog.test.jsx +2 -0
  63. package/src/Nav/index.scss +8 -0
  64. package/src/PageBanner/index.scss +2 -2
  65. package/src/Pagination/pagination-bootstrap.scss +9 -0
  66. package/src/Popover/index.scss +1 -1
  67. package/src/ProductTour/Checkpoint.scss +1 -1
  68. package/src/ProgressBar/bootstrap-progress.scss +20 -5
  69. package/src/ProgressBar/index.scss +3 -3
  70. package/src/Stepper/index.scss +1 -1
  71. package/src/Sticky/index.scss +12 -0
  72. package/src/Toast/index.scss +13 -1
  73. package/src/Tooltip/index.scss +16 -0
  74. package/styles/css/core/abstraction-variables.css +44 -0
  75. package/styles/css/core/custom-media-breakpoints.css +3 -4
  76. package/styles/css/core/index.css +2 -1
  77. package/styles/css/core/variables.css +494 -430
  78. package/styles/css/themes/light/abstraction-variables.css +304 -0
  79. package/styles/css/themes/light/index.css +1 -0
  80. package/styles/css/themes/light/utility-classes.css +2 -3
  81. package/styles/css/themes/light/variables.css +1753 -1334
  82. package/styles/scss/core/_typography.scss +16 -4
  83. package/styles/scss/core/_utilities.scss +7 -3
  84. package/styles/scss/core/_variables.scss +43 -30
  85. package/styles/scss/core/core.scss +1 -0
  86. package/tokens/src/core/alias/size.json +6 -5
  87. package/tokens/src/core/components/ActionRow.json +3 -2
  88. package/tokens/src/core/components/Alert.json +12 -10
  89. package/tokens/src/core/components/Annotation.json +9 -7
  90. package/tokens/src/core/components/Avatar.json +9 -9
  91. package/tokens/src/core/components/AvatarButton.json +4 -3
  92. package/tokens/src/core/components/Badge.json +12 -9
  93. package/tokens/src/core/components/Breadcrumb.json +7 -5
  94. package/tokens/src/core/components/Bubble.json +4 -3
  95. package/tokens/src/core/components/Button/core.json +35 -59
  96. package/tokens/src/core/components/Card.json +33 -44
  97. package/tokens/src/core/components/Carousel.json +39 -13
  98. package/tokens/src/core/components/Chip.json +13 -21
  99. package/tokens/src/core/components/ChipCarousel.json +4 -5
  100. package/tokens/src/core/components/CloseButton.json +2 -6
  101. package/tokens/src/core/components/Code.json +9 -8
  102. package/tokens/src/core/components/Collapsible.json +10 -13
  103. package/tokens/src/core/components/ColorPicker.json +3 -2
  104. package/tokens/src/core/components/Container.json +6 -5
  105. package/tokens/src/core/components/DataTable.json +17 -9
  106. package/tokens/src/core/components/Dropdown.json +24 -29
  107. package/tokens/src/core/components/Dropzone.json +5 -7
  108. package/tokens/src/core/components/Form/other.json +5 -4
  109. package/tokens/src/core/components/Form/size.json +72 -119
  110. package/tokens/src/core/components/Form/spacing.json +39 -83
  111. package/tokens/src/core/components/Form/transition.json +43 -7
  112. package/tokens/src/core/components/Form/typography.json +24 -88
  113. package/tokens/src/core/components/Icon.json +6 -5
  114. package/tokens/src/core/components/IconButton.json +4 -7
  115. package/tokens/src/core/components/Image.json +7 -6
  116. package/tokens/src/core/components/Menu.json +14 -12
  117. package/tokens/src/core/components/Modal.json +26 -21
  118. package/tokens/src/core/components/Nav.json +14 -16
  119. package/tokens/src/core/components/Navbar.json +15 -30
  120. package/tokens/src/core/components/Pagination.json +23 -24
  121. package/tokens/src/core/components/Popover.json +18 -14
  122. package/tokens/src/core/components/ProductTour.json +8 -14
  123. package/tokens/src/core/components/ProgressBar.json +29 -14
  124. package/tokens/src/core/components/SearchField.json +7 -9
  125. package/tokens/src/core/components/SelectableBox.json +4 -3
  126. package/tokens/src/core/components/Sheet.json +3 -2
  127. package/tokens/src/core/components/Spinner.json +9 -7
  128. package/tokens/src/core/components/Stack.json +2 -1
  129. package/tokens/src/core/components/Stepper.json +12 -14
  130. package/tokens/src/core/components/Sticky.json +2 -1
  131. package/tokens/src/core/components/Tab.json +8 -7
  132. package/tokens/src/core/components/Tabs.json +5 -5
  133. package/tokens/src/core/components/Toast.json +11 -8
  134. package/tokens/src/core/components/Tooltip.json +13 -11
  135. package/tokens/src/core/components/general/caret.json +5 -3
  136. package/tokens/src/core/components/general/headings.json +5 -4
  137. package/tokens/src/core/components/general/hr.json +3 -2
  138. package/tokens/src/core/components/general/input.json +19 -19
  139. package/tokens/src/core/components/general/link.json +13 -12
  140. package/tokens/src/core/components/general/list.json +9 -6
  141. package/tokens/src/core/components/general/text.json +6 -12
  142. package/tokens/src/core/global/breakpoints.json +25 -6
  143. package/tokens/src/core/global/elevation.json +55 -13
  144. package/tokens/src/core/global/other.json +5 -1
  145. package/tokens/src/core/global/spacing.json +70 -17
  146. package/tokens/src/core/global/transition.json +41 -4
  147. package/tokens/src/core/global/typography.json +248 -53
  148. package/tokens/src/core/utilities/color.json +35 -4
  149. package/tokens/src/themes/light/alias/color.json +276 -75
  150. package/tokens/src/themes/light/components/Alert.json +15 -26
  151. package/tokens/src/themes/light/components/Annotation.json +27 -13
  152. package/tokens/src/themes/light/components/Avatar.json +2 -1
  153. package/tokens/src/themes/light/components/Badge.json +57 -122
  154. package/tokens/src/themes/light/components/Breadcrumb.json +6 -5
  155. package/tokens/src/themes/light/components/Bubble.json +9 -8
  156. package/tokens/src/themes/light/components/Button/brand.json +171 -119
  157. package/tokens/src/themes/light/components/Button/core.json +8 -9
  158. package/tokens/src/themes/light/components/Button/danger.json +171 -112
  159. package/tokens/src/themes/light/components/Button/dark.json +188 -106
  160. package/tokens/src/themes/light/components/Button/info.json +186 -112
  161. package/tokens/src/themes/light/components/Button/light.json +186 -110
  162. package/tokens/src/themes/light/components/Button/primary.json +178 -116
  163. package/tokens/src/themes/light/components/Button/secondary.json +166 -132
  164. package/tokens/src/themes/light/components/Button/success.json +176 -117
  165. package/tokens/src/themes/light/components/Button/tertiary.json +34 -60
  166. package/tokens/src/themes/light/components/Button/warning.json +164 -128
  167. package/tokens/src/themes/light/components/Card.json +10 -21
  168. package/tokens/src/themes/light/components/Carousel.json +12 -11
  169. package/tokens/src/themes/light/components/Chip.json +14 -26
  170. package/tokens/src/themes/light/components/CloseButton.json +12 -2
  171. package/tokens/src/themes/light/components/Code.json +7 -9
  172. package/tokens/src/themes/light/components/DataTable.json +7 -11
  173. package/tokens/src/themes/light/components/Dropdown.json +17 -20
  174. package/tokens/src/themes/light/components/Dropzone.json +49 -11
  175. package/tokens/src/themes/light/components/Form/color.json +101 -155
  176. package/tokens/src/themes/light/components/Form/elevation.json +38 -42
  177. package/tokens/src/themes/light/components/Form/other.json +44 -41
  178. package/tokens/src/themes/light/components/IconButton.json +408 -256
  179. package/tokens/src/themes/light/components/Image.json +7 -4
  180. package/tokens/src/themes/light/components/Menu.json +12 -10
  181. package/tokens/src/themes/light/components/Modal.json +22 -12
  182. package/tokens/src/themes/light/components/Nav.json +82 -94
  183. package/tokens/src/themes/light/components/Navbar.json +32 -76
  184. package/tokens/src/themes/light/components/OverflowScroll.json +3 -1
  185. package/tokens/src/themes/light/components/PageBanner.json +11 -10
  186. package/tokens/src/themes/light/components/Pagination.json +19 -23
  187. package/tokens/src/themes/light/components/Popover.json +22 -27
  188. package/tokens/src/themes/light/components/ProductTour.json +9 -20
  189. package/tokens/src/themes/light/components/ProgressBar.json +12 -10
  190. package/tokens/src/themes/light/components/Scrollable.json +3 -3
  191. package/tokens/src/themes/light/components/SearchField.json +9 -9
  192. package/tokens/src/themes/light/components/Sheet.json +6 -7
  193. package/tokens/src/themes/light/components/Stepper.json +12 -17
  194. package/tokens/src/themes/light/components/Sticky.json +31 -6
  195. package/tokens/src/themes/light/components/Tab.json +47 -24
  196. package/tokens/src/themes/light/components/Toast.json +26 -14
  197. package/tokens/src/themes/light/components/Tooltip.json +25 -10
  198. package/tokens/src/themes/light/components/general/body.json +3 -2
  199. package/tokens/src/themes/light/components/general/headings.json +2 -1
  200. package/tokens/src/themes/light/components/general/hr.json +3 -6
  201. package/tokens/src/themes/light/components/general/input.json +11 -4
  202. package/tokens/src/themes/light/components/general/link.json +34 -43
  203. package/tokens/src/themes/light/components/general/list.json +15 -19
  204. package/tokens/src/themes/light/components/general/text.json +5 -6
  205. package/tokens/src/themes/light/global/color.json +1592 -867
  206. package/tokens/src/themes/light/global/elevation.json +481 -93
  207. package/tokens/style-dictionary.js +342 -144
  208. package/tokens/utils.js +176 -6
  209. package/tokens/src/core/global/display.json +0 -22
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
  }