@digigov/css 2.0.0-rc.7 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (145) hide show
  1. package/dist/base/index.css +3 -3
  2. package/dist/base.js +1 -1
  3. package/dist/components.js +1 -1
  4. package/dist/digigov.css +5 -5
  5. package/dist/utilities/index.css +1 -1
  6. package/dist/utilities.js +1 -1
  7. package/index.js +99 -69
  8. package/package.json +20 -20
  9. package/postcss.config.js +4 -3
  10. package/src/base/index.css +1 -0
  11. package/src/base/index.native.css +0 -0
  12. package/src/base/postcss.config.js +11 -10
  13. package/src/base/tailwind.config.js +4 -11
  14. package/src/components/accordion.common.css +29 -0
  15. package/src/components/accordion.css +39 -12
  16. package/src/components/accordion.native.css +27 -0
  17. package/src/components/admin-header.css +1 -19
  18. package/src/components/admin-layout.css +6 -15
  19. package/src/components/autocomplete.css +7 -5
  20. package/src/components/blockquote.common.css +14 -0
  21. package/src/components/blockquote.css +9 -0
  22. package/src/components/blockquote.native.css +14 -0
  23. package/src/components/breadcrumbs.css +9 -2
  24. package/src/components/button.common.css +62 -0
  25. package/src/components/button.css +13 -28
  26. package/src/components/button.native.css +55 -0
  27. package/src/components/card.common.css +33 -0
  28. package/src/components/card.css +36 -15
  29. package/src/components/card.native.css +29 -0
  30. package/src/components/checkboxes.common.css +16 -0
  31. package/src/components/checkboxes.css +6 -8
  32. package/src/components/checkboxes.native.css +27 -0
  33. package/src/components/chip.common.css +19 -0
  34. package/src/components/chip.css +5 -4
  35. package/src/components/chip.native.css +15 -0
  36. package/src/components/code.css +129 -0
  37. package/src/components/copy-to-clipboard.css +1 -1
  38. package/src/components/copy-to-clipboard.native.css +26 -0
  39. package/src/components/details.common.css +26 -0
  40. package/src/components/details.css +10 -9
  41. package/src/components/details.native.css +34 -0
  42. package/src/components/drawer.css +21 -4
  43. package/src/components/dropdown.common.css +23 -0
  44. package/src/components/dropdown.css +7 -9
  45. package/src/components/dropdown.native.css +27 -0
  46. package/src/components/fillable.css +1 -1
  47. package/src/components/filter.css +72 -29
  48. package/src/components/footer.css +8 -7
  49. package/src/components/form.common.css +81 -0
  50. package/src/components/form.css +65 -33
  51. package/src/components/form.native.css +182 -0
  52. package/src/components/header.common.css +35 -0
  53. package/src/components/header.css +29 -20
  54. package/src/components/header.native.css +29 -0
  55. package/src/components/hidden.css +11 -11
  56. package/src/components/index.css +34 -31
  57. package/src/components/kitchensink.css +2 -2
  58. package/src/components/layout.common.css +36 -0
  59. package/src/components/layout.css +12 -11
  60. package/src/components/layout.native.css +40 -0
  61. package/src/components/loader.common.css +7 -0
  62. package/src/components/loader.css +3 -1
  63. package/src/components/loader.native.css +5 -0
  64. package/src/components/masthead.css +1 -1
  65. package/src/components/misc.css +25 -1
  66. package/src/components/modal.common.css +16 -0
  67. package/src/components/modal.css +27 -14
  68. package/src/components/modal.native.css +18 -0
  69. package/src/components/nav.common.css +22 -0
  70. package/src/components/nav.css +8 -7
  71. package/src/components/nav.native.css +39 -0
  72. package/src/components/notification-banner.common.css +46 -0
  73. package/src/components/notification-banner.css +27 -7
  74. package/src/components/notification-banner.native.css +42 -0
  75. package/src/components/pagination.css +19 -3
  76. package/src/components/panel.common.css +30 -0
  77. package/src/components/panel.css +6 -15
  78. package/src/components/panel.native.css +26 -0
  79. package/src/components/phase-banner.common.css +23 -0
  80. package/src/components/phase-banner.css +7 -6
  81. package/src/components/phase-banner.native.css +30 -0
  82. package/src/components/postcss.config.js +7 -6
  83. package/src/components/radios.common.css +16 -0
  84. package/src/components/radios.css +5 -11
  85. package/src/components/radios.native.css +23 -0
  86. package/src/components/skeleton.common.css +20 -0
  87. package/src/components/skeleton.css +82 -0
  88. package/src/components/skeleton.native.css +53 -0
  89. package/src/components/stack.common.css +67 -0
  90. package/src/components/stack.css +25 -23
  91. package/src/components/stack.native.css +68 -0
  92. package/src/components/stepnav.css +2 -2
  93. package/src/components/summary-list.common.css +102 -0
  94. package/src/components/summary-list.css +103 -20
  95. package/src/components/summary-list.native.css +97 -0
  96. package/src/components/svg-icons.common.css +56 -0
  97. package/src/components/svg-icons.css +1 -1
  98. package/src/components/svg-icons.native.css +54 -0
  99. package/src/components/table.css +63 -19
  100. package/src/components/tabs.css +47 -62
  101. package/src/components/task-list.css +12 -7
  102. package/src/components/test.css +7 -0
  103. package/src/components/timeline.css +8 -7
  104. package/src/components/typography.common.css +135 -0
  105. package/src/components/typography.css +51 -108
  106. package/src/components/typography.native.css +128 -0
  107. package/src/components/warning-text.common.css +23 -0
  108. package/src/components/warning-text.css +10 -7
  109. package/src/components/warning-text.native.css +22 -0
  110. package/src/index.native.css +26 -0
  111. package/src/utilities/gap.css +141 -0
  112. package/src/utilities/index.css +6 -1655
  113. package/src/utilities/index.native.css +6 -0
  114. package/src/utilities/layout.css +231 -0
  115. package/src/utilities/layout.native.css +278 -0
  116. package/src/utilities/margin.css +4299 -0
  117. package/src/utilities/padding.css +4299 -0
  118. package/src/utilities/postcss.config.js +7 -6
  119. package/src/utilities/print.css +11 -0
  120. package/src/utilities/utilities.css +3 -1661
  121. package/tailwind.config.js +102 -105
  122. package/theming.js +121 -0
  123. package/defaultTheme/accordion.json +0 -16
  124. package/defaultTheme/back-to-top.json +0 -27
  125. package/defaultTheme/brandConfig.json +0 -145
  126. package/defaultTheme/breadcrumbs.json +0 -8
  127. package/defaultTheme/button.json +0 -90
  128. package/defaultTheme/card.json +0 -23
  129. package/defaultTheme/form.json +0 -30
  130. package/defaultTheme/globals.json +0 -81
  131. package/defaultTheme/index.js +0 -27
  132. package/defaultTheme/layout.json +0 -55
  133. package/defaultTheme/misc.json +0 -68
  134. package/defaultTheme/panel.json +0 -48
  135. package/defaultTheme/phase-banner.json +0 -8
  136. package/defaultTheme/radios.json +0 -8
  137. package/defaultTheme/summary-list.json +0 -8
  138. package/defaultTheme/typography.json +0 -295
  139. package/src/pages/admin-filtering-data.js +0 -160
  140. package/src/pages/admin.js +0 -61
  141. package/src/pages/dropdown.js +0 -249
  142. package/src/pages/form.js +0 -400
  143. package/src/pages/pagination.js +0 -124
  144. package/src/pages/table.js +0 -308
  145. package/themes.plugin.js +0 -148
package/src/pages/table.js DELETED
@@ -1,308 +0,0 @@
1
- export default function Table() {
2
- return (
3
- <body>
4
-
5
-
6
- <table className="ds-table">
7
- <caption className="ds-table__caption ds-table__caption--sm">Table caption S</caption>
8
- <caption className="ds-table__caption ds-table__caption--md">Table caption M</caption>
9
- <caption className="ds-table__caption ds-table__caption--lg">Table caption L</caption>
10
- <caption className="ds-table__caption ds-table__caption--xl">Table caption XL</caption>
11
- </table>
12
-
13
- <table className="ds-table">
14
- <caption className="ds-table__caption ds-table__caption--md">Simple Table</caption>
15
- <thead className="ds-table__head">
16
- <tr className="ds-table__row">
17
- <th scope="col" className="ds-table__header">Date</th>
18
- <th scope="col" className="ds-table__header">Amount</th>
19
- </tr>
20
- </thead>
21
- <tbody className="ds-table__body">
22
- <tr className="ds-table__row">
23
- <th scope="row" className="ds-table__header">First 6 weeks</th>
24
- <td className="ds-table__cell">€109.80 per week</td>
25
- </tr>
26
- <tr className="ds-table__row">
27
- <th scope="row" className="ds-table__header">Next 33 weeks</th>
28
- <td className="ds-table__cell">€109.80 per week</td>
29
- </tr>
30
- <tr className="ds-table__row">
31
- <th scope="row" className="ds-table__header">Total estimated pay</th>
32
- <td className="ds-table__cell">€4,282.20</td>
33
- </tr>
34
- </tbody>
35
- </table>
36
-
37
- {/* Table with vertical lines */}
38
- <table className="ds-table ds-table--vertical-lines">
39
- <caption className="ds-table__caption ds-table__caption--md">Table with vertical lines</caption>
40
- <thead className="ds-table__head">
41
- <tr className="ds-table__row">
42
- <th scope="col" className="ds-table__header">Date</th>
43
- <th scope="col" className="ds-table__header">Amount</th>
44
- <th scope="col" className="ds-table__header">Amount</th>
45
- </tr>
46
- </thead>
47
- <tbody className="ds-table__body">
48
- <tr className="ds-table__row">
49
- <th scope="row" className="ds-table__header">First 6 weeks</th>
50
- <td className="ds-table__cell">€109.80 per week</td>
51
- <td className="ds-table__cell">€109.80 per week</td>
52
- </tr>
53
- <tr className="ds-table__row">
54
- <th scope="row" className="ds-table__header">Next 33 weeks</th>
55
- <td className="ds-table__cell">€109.80 per week</td>
56
- <td className="ds-table__cell">€109.80 per week</td>
57
- </tr>
58
- <tr className="ds-table__row">
59
- <th scope="row" className="ds-table__header">Total estimated pay</th>
60
- <td className="ds-table__cell">€4,282.20</td>
61
- <td className="ds-table__cell">€4,282.20</td>
62
- </tr>
63
- </tbody>
64
- </table>
65
-
66
- <table className="ds-table">
67
- <caption className="ds-table__caption ds-table__caption--md">Table with numbers and custom column widths </caption>
68
- <thead className="ds-table__head">
69
- <tr className="ds-table__row">
70
- <th scope="col" className="ds-table__header ds-!-width-one-half">Date</th>
71
- <th scope="col" className="ds-table__header ds-!-width-one-quarter ds-table__header--numeric">Regular</th>
72
- <th scope="col" className="ds-table__header ds-!-width-one-quarter ds-table__header--numeric">Reduced</th>
73
- </tr>
74
- </thead>
75
- <tbody className="ds-table__body">
76
- <tr className="ds-table__row">
77
- <th scope="row" className="ds-table__header ds-!-width-one-half">First 6 weeks</th>
78
- <td className="ds-table__cell ds-table__cell--numeric">€109.80</td>
79
- <td className="ds-table__cell ds-table__cell--numeric">€69.80</td>
80
- </tr>
81
- <tr className="ds-table__row">
82
- <th scope="row" className="ds-table__header ds-!-width-one-half">Next 33 weeks</th>
83
- <td className="ds-table__cell ds-table__cell--numeric">€109.80</td>
84
- <td className="ds-table__cell ds-table__cell--numeric">€69.80</td>
85
- </tr>
86
- </tbody>
87
- </table>
88
-
89
- {/* Table with primary color at header */}
90
- <table className="ds-table ds-table--dark ds-table--vertical-lines">
91
- <caption className="ds-table__caption ds-table__caption--md">Table with primary color at header</caption>
92
- <thead className="ds-table__head">
93
- <tr className="ds-table__row">
94
- <th scope="col" className="ds-table__header ds-table__header--dark">Date</th>
95
- <th scope="col" className="ds-table__header ds-table__header--dark">Amount</th>
96
- </tr>
97
- </thead>
98
- <tbody className="ds-table__body">
99
- <tr className="ds-table__row">
100
- <th scope="row" className="ds-table__header">First 6 weeks</th>
101
- <td className="ds-table__cell">€109.80 per week</td>
102
- </tr>
103
- <tr className="ds-table__row">
104
- <th scope="row" className="ds-table__header">Next 33 weeks</th>
105
- <td className="ds-table__cell">€109.80 per week</td>
106
- </tr>
107
- <tr className="ds-table__row">
108
- <th scope="row" className="ds-table__header">Total estimated pay</th>
109
- <td className="ds-table__cell">€4,282.20</td>
110
- </tr>
111
- </tbody>
112
- </table>
113
-
114
- {/* Table with gray color at all headers */}
115
- <table className="ds-table ds-table--dark ">
116
- <caption className="ds-table__caption ds-table__caption--md">Table with gray color at header</caption>
117
- <thead className="ds-table__head">
118
- <tr className="ds-table__row">
119
- <th scope="col" className="ds-table__header ds-table__header--gray">Date</th>
120
- <th scope="col" className="ds-table__header ds-table__header--gray">Amount</th>
121
- <th scope="col" className="ds-table__header ds-table__header--gray">Discount</th>
122
- </tr>
123
- </thead>
124
- <tbody className="ds-table__body">
125
- <tr className="ds-table__row">
126
- <th scope="row" className="ds-table__header ds-table__header--gray">First 6 weeks</th>
127
- <td className="ds-table__cell">€109.80 per week</td>
128
- <td className="ds-table__cell">€69.80 per week</td>
129
- </tr>
130
- <tr className="ds-table__row">
131
- <th scope="row" className="ds-table__header ds-table__header--gray">Next 33 weeks</th>
132
- <td className="ds-table__cell">€109.80 per week</td>
133
- <td className="ds-table__cell">€79.80 per week</td>
134
- </tr>
135
- </tbody>
136
- </table>
137
-
138
- {/* Zebra Table */}
139
- <table className="ds-table ds-table--zebra">
140
- <caption className="ds-table__caption ds-table__caption--md">Zebra Table</caption>
141
- <thead className="ds-table__head">
142
- <tr className="ds-table__row">
143
- <th scope="col" className="ds-table__header">Date</th>
144
- <th scope="col" className="ds-table__header">Amount</th>
145
- </tr>
146
- </thead>
147
- <tbody className="ds-table__body">
148
- <tr className="ds-table__row">
149
- <th scope="row" className="ds-table__header">First 6 weeks</th>
150
- <td className="ds-table__cell">€109.80 per week</td>
151
- </tr>
152
- <tr className="ds-table__row">
153
- <th scope="row" className="ds-table__header">First 6 weeks</th>
154
- <td className="ds-table__cell">€109.80 per week</td>
155
- </tr>
156
- <tr className="ds-table__row">
157
- <th scope="row" className="ds-table__header">Next 33 weeks</th>
158
- <td className="ds-table__cell">€109.80 per week</td>
159
- </tr>
160
- <tr className="ds-table__row">
161
- <th scope="row" className="ds-table__header">Total estimated pay</th>
162
- <td className="ds-table__cell">€4,282.20</td>
163
- </tr>
164
- <tr className="ds-table__row">
165
- <th scope="row" className="ds-table__header">Total estimated pay</th>
166
- <td className="ds-table__cell">€4,282.20</td>
167
- </tr>
168
- </tbody>
169
- </table>
170
-
171
- {/* Zebra Table with dark header */}
172
- <table className="ds-table ds-table--dark ds-table--zebra">
173
- <caption className="ds-table__caption ds-table__caption--md">Zebra Table with dark header</caption>
174
- <thead className="ds-table__head">
175
- <tr className="ds-table__row">
176
- <th scope="col" className="ds-table__header ds-table__header--dark">Date</th>
177
- <th scope="col" className="ds-table__header ds-table__header--dark">Amount</th>
178
- </tr>
179
- </thead>
180
- <tbody className="ds-table__body">
181
- <tr className="ds-table__row">
182
- <th scope="row" className="ds-table__header">First 6 weeks</th>
183
- <td className="ds-table__cell">€109.80 per week</td>
184
- </tr>
185
- <tr className="ds-table__row">
186
- <th scope="row" className="ds-table__header">First 6 weeks</th>
187
- <td className="ds-table__cell">€109.80 per week</td>
188
- </tr>
189
- <tr className="ds-table__row">
190
- <th scope="row" className="ds-table__header">Next 33 weeks</th>
191
- <td className="ds-table__cell">€109.80 per week</td>
192
- </tr>
193
- <tr className="ds-table__row">
194
- <th scope="row" className="ds-table__header">Total estimated pay</th>
195
- <td className="ds-table__cell">€4,282.20</td>
196
- </tr>
197
- <tr className="ds-table__row">
198
- <th scope="row" className="ds-table__header">Total estimated pay</th>
199
- <td className="ds-table__cell">€4,282.20</td>
200
- </tr>
201
- </tbody>
202
- </table>
203
-
204
- {/* Zebra Table with dark headers */}
205
- <table className="ds-table ds-table--dark ds-table--zebra">
206
- <caption className="ds-table__caption ds-table__caption--md">Zebra Table with dark header</caption>
207
- <thead className="ds-table__head">
208
- <tr className="ds-table__row">
209
- <th scope="col" className="ds-table__header ds-table__header--dark">Date</th>
210
- <th scope="col" className="ds-table__header ds-table__header--dark">Amount</th>
211
- <th scope="col" className="ds-table__header ds-table__header--dark">Amount</th>
212
- <th scope="col" className="ds-table__header ds-table__header--dark">Amount</th>
213
- </tr>
214
- </thead>
215
- <tbody className="ds-table__body">
216
- <tr className="ds-table__row">
217
- <th scope="row" className="ds-table__header ds-table__header--dark">First 6 weeks</th>
218
- <td className="ds-table__cell">€109.80 per week</td>
219
- <td className="ds-table__cell">€109.80 per week</td>
220
- <td className="ds-table__cell">€109.80 per week</td>
221
- </tr>
222
- <tr className="ds-table__row">
223
- <th scope="row" className="ds-table__header ds-table__header--dark">First 6 weeks</th>
224
- <td className="ds-table__cell">€109.80 per week</td>
225
- <td className="ds-table__cell">€109.80 per week</td>
226
- <td className="ds-table__cell">€109.80 per week</td>
227
- </tr>
228
- <tr className="ds-table__row">
229
- <th scope="row" className="ds-table__header ds-table__header--dark">Next 33 weeks</th>
230
- <td className="ds-table__cell">€109.80 per week</td>
231
- <td className="ds-table__cell">€109.80 per week</td>
232
- <td className="ds-table__cell">€109.80 per week</td>
233
- </tr>
234
- <tr className="ds-table__row">
235
- <th scope="row" className="ds-table__header ds-table__header--dark">Total estimated pay</th>
236
- <td className="ds-table__cell">€4,282.20</td>
237
- <td className="ds-table__cell">€4,282.20</td>
238
- <td className="ds-table__cell">€4,282.20</td>
239
- </tr>
240
- <tr className="ds-table__row">
241
- <th scope="row" className="ds-table__header ds-table__header--dark">Total estimated pay</th>
242
- <td className="ds-table__cell">€4,282.20</td>
243
- <td className="ds-table__cell">€4,282.20</td>
244
- <td className="ds-table__cell">€4,282.20</td>
245
- </tr>
246
- </tbody>
247
- </table>
248
-
249
- {/* Densed zebra Table */}
250
- <table className="ds-table ds-table--zebra ds-table--dense">
251
- <caption className="ds-table__caption ds-table__caption--md">Densed zebra Table</caption>
252
- <thead className="ds-table__head">
253
- <tr className="ds-table__row">
254
- <th scope="col" className="ds-table__header">Date</th>
255
- <th scope="col" className="ds-table__header">Amount</th>
256
- <th scope="col" className="ds-table__header">Amount</th>
257
- <th scope="col" className="ds-table__header">Amount</th>
258
- <th scope="col" className="ds-table__header">Amount</th>
259
- <th scope="col" className="ds-table__header">Amount</th>
260
- </tr>
261
- </thead>
262
- <tbody className="ds-table__body">
263
- <tr className="ds-table__row">
264
- <th scope="row" className="ds-table__header">First 6 weeks</th>
265
- <td className="ds-table__cell">€109.80</td>
266
- <td className="ds-table__cell">€109.80</td>
267
- <td className="ds-table__cell">€109.80</td>
268
- <td className="ds-table__cell">€109.80</td>
269
- <td className="ds-table__cell">€109.80</td>
270
- </tr>
271
- <tr className="ds-table__row">
272
- <th scope="row" className="ds-table__header">First 6 weeks</th>
273
- <td className="ds-table__cell">€109.80</td>
274
- <td className="ds-table__cell">€109.80</td>
275
- <td className="ds-table__cell">€109.80</td>
276
- <td className="ds-table__cell">€109.80</td>
277
- <td className="ds-table__cell">€109.80</td>
278
- </tr>
279
- <tr className="ds-table__row">
280
- <th scope="row" className="ds-table__header">Next 33 weeks</th>
281
- <td className="ds-table__cell">€109.80</td>
282
- <td className="ds-table__cell">€109.80</td>
283
- <td className="ds-table__cell">€109.80</td>
284
- <td className="ds-table__cell">€109.80</td>
285
- <td className="ds-table__cell">€109.80</td>
286
- </tr>
287
- <tr className="ds-table__row">
288
- <th scope="row" className="ds-table__header">Total estimated pay</th>
289
- <td className="ds-table__cell">€4,282.20</td>
290
- <td className="ds-table__cell">€4,282.20</td>
291
- <td className="ds-table__cell">€4,282.20</td>
292
- <td className="ds-table__cell">€4,282.20</td>
293
- <td className="ds-table__cell">€4,282.20</td>
294
- </tr>
295
- <tr className="ds-table__row">
296
- <th scope="row" className="ds-table__header">Total estimated pay</th>
297
- <td className="ds-table__cell">€4,282.20</td>
298
- <td className="ds-table__cell">€4,282.20</td>
299
- <td className="ds-table__cell">€4,282.20</td>
300
- <td className="ds-table__cell">€4,282.20</td>
301
- <td className="ds-table__cell">€4,282.20</td>
302
- </tr>
303
- </tbody>
304
- </table>
305
-
306
- </body>
307
- )
308
- }
package/themes.plugin.js DELETED
@@ -1,148 +0,0 @@
1
- const fs = require("fs");
2
- const path = require("path");
3
- const postcss = require("postcss");
4
- const postcssrc = require("postcss-load-config");
5
- const postcssJs = require("postcss-js");
6
-
7
- const prefix = "ds";
8
- const mediaQueriesMapping = {
9
- xs: "@media (min-width: 0px)",
10
- sm: "@media (min-width: 640px)",
11
- md: "@media (min-width: 768px)",
12
- lg: "@media (min-width: 1024px)",
13
- print: "@media print",
14
- };
15
-
16
- let hasRun = false;
17
-
18
- module.exports = function addThemes({ addBase, config }) {
19
- if (hasRun) {
20
- return;
21
- }
22
- hasRun = true;
23
-
24
- let base = {};
25
- const themes = config("themes");
26
- const defaultTheme = config("defaultTheme");
27
- for (const customTheme in themes) {
28
- const customThemeObject = require(themes[customTheme]);
29
- if (customThemeObject.overrides) {
30
- console.log("Loading theme css from source...");
31
- const css = fs
32
- .readFileSync(
33
- path.resolve(
34
- path.dirname(themes[customTheme]),
35
- "overrides/index.css",
36
- ),
37
- )
38
- .toString();
39
- const ctx = {};
40
- const { plugins, options } = postcssrc.sync(ctx);
41
- const result = postcss(plugins).process(css, options).result.root;
42
- const cssJs = postcssJs.objectify(result);
43
- base[`.${customTheme}`] = cssJs;
44
- }
45
- if (customTheme === defaultTheme) {
46
- base[`:root,:root.${customTheme},::before,::after`] =
47
- extractVars(customThemeObject);
48
- } else {
49
- base[
50
- `:root.${customTheme},.${customTheme},.${customTheme} *::before,.${customTheme} *::after`
51
- ] = extractVars(customThemeObject);
52
- }
53
-
54
- if (customThemeObject.variables && customThemeObject.variables.components) {
55
- const extractedVariables = extractMediaQueriesFromComponentVars(
56
- customThemeObject.variables.components,
57
- customTheme,
58
- defaultTheme,
59
- );
60
- Object.keys(extractedVariables).forEach((key) => {
61
- if (base[key]) {
62
- base[key] = { ...base[key], ...extractedVariables[key] };
63
- } else {
64
- base[key] = extractedVariables[key];
65
- }
66
- });
67
- }
68
- }
69
- addBase(base);
70
- };
71
-
72
- function extractVars(themeObj) {
73
- const colorVars = extractColorVars(themeObj.colors);
74
- const globalVars =
75
- themeObj.variables && themeObj.variables.globals
76
- ? extractGlobalVars(themeObj.variables.globals)
77
- : {};
78
- return { ...colorVars, ...globalVars };
79
- }
80
-
81
- function extractColorVars(colorObj, colorGroup = "") {
82
- return Object.keys(colorObj).reduce((vars, colorKey) => {
83
- const value = colorObj[colorKey];
84
- const colorName =
85
- colorKey == "default"
86
- ? `--color${colorGroup}`
87
- : `--color${colorGroup}-${colorKey}`;
88
- const newVars =
89
- typeof value === "string"
90
- ? {
91
- [colorName]: value,
92
- [`${colorName}-rgb`]: hexToRGB(value),
93
- }
94
- : extractColorVars(value, `-${colorKey}`);
95
- return { ...vars, ...newVars };
96
- }, {});
97
- }
98
-
99
- function extractGlobalVars(globalVarsObj) {
100
- return Object.keys(globalVarsObj).reduce((vars, varKey) => {
101
- const value = globalVarsObj[varKey];
102
- vars[`--${varKey}`] = value;
103
- return vars;
104
- }, {});
105
- }
106
-
107
- function hexToRGB(hex) {
108
- const r = parseInt(hex.slice(1, 3), 16),
109
- g = parseInt(hex.slice(3, 5), 16),
110
- b = parseInt(hex.slice(5, 7), 16);
111
-
112
- return r + ", " + g + ", " + b;
113
- }
114
-
115
- function extractMediaQueriesFromComponentVars(
116
- componentObj,
117
- customTheme,
118
- defaultTheme,
119
- ) {
120
- let mediaObj = {};
121
- Object.keys(componentObj).forEach((componentClass) => {
122
- Object.keys(componentObj[componentClass]).forEach((componentAttr) => {
123
- Object.keys(componentObj[componentClass][componentAttr]).forEach(
124
- (componentMedia) => {
125
- const newAttrKey = `--${componentClass}-${componentAttr}`;
126
- const newAttrValue =
127
- componentObj[componentClass][componentAttr][componentMedia];
128
- const newAttr = { [newAttrKey]: newAttrValue };
129
- const newClass = `.${prefix}-${componentClass}`;
130
- const newMedia = mediaQueriesMapping[componentMedia];
131
- const newTheme =
132
- customTheme === defaultTheme ? "" : `.${customTheme}`;
133
-
134
- if (mediaObj[newMedia]) {
135
- if (mediaObj[newMedia][newTheme][newClass]) {
136
- mediaObj[newMedia][newTheme][newClass][newAttrKey] = newAttrValue;
137
- } else {
138
- mediaObj[newMedia][newTheme][newClass] = newAttr;
139
- }
140
- } else {
141
- mediaObj[newMedia] = { [newTheme]: { [newClass]: newAttr } };
142
- }
143
- },
144
- );
145
- });
146
- });
147
- return mediaObj;
148
- }