@marigold/system 0.2.0 → 0.3.0

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 (48) hide show
  1. package/CHANGELOG.md +95 -0
  2. package/dist/Box.d.ts +14 -0
  3. package/dist/Global.d.ts +2 -0
  4. package/dist/SVG.d.ts +6 -0
  5. package/dist/index.d.ts +6 -4
  6. package/dist/normalize.d.ts +101 -67
  7. package/dist/system.cjs.development.js +299 -294
  8. package/dist/system.cjs.development.js.map +1 -1
  9. package/dist/system.cjs.production.min.js +1 -1
  10. package/dist/system.cjs.production.min.js.map +1 -1
  11. package/dist/system.esm.js +291 -289
  12. package/dist/system.esm.js.map +1 -1
  13. package/dist/theme.d.ts +136 -0
  14. package/dist/types.d.ts +1 -2
  15. package/dist/useTheme.d.ts +11 -5
  16. package/dist/variant.d.ts +29 -0
  17. package/package.json +4 -5
  18. package/src/Box.test.tsx +308 -0
  19. package/src/Box.tsx +199 -0
  20. package/src/Colors.stories.mdx +332 -456
  21. package/src/Global.test.tsx +57 -0
  22. package/src/Global.tsx +34 -0
  23. package/src/SVG.stories.mdx +55 -0
  24. package/src/SVG.test.tsx +82 -0
  25. package/src/SVG.tsx +24 -0
  26. package/src/index.ts +6 -4
  27. package/src/normalize.test.tsx +9 -36
  28. package/src/normalize.ts +51 -82
  29. package/src/theme.ts +157 -0
  30. package/src/types.ts +0 -2
  31. package/src/useTheme.test.tsx +22 -14
  32. package/src/useTheme.tsx +37 -9
  33. package/src/variant.test.ts +93 -0
  34. package/src/variant.ts +54 -0
  35. package/dist/Element.d.ts +0 -8
  36. package/dist/cache.d.ts +0 -4
  37. package/dist/reset.d.ts +0 -24
  38. package/dist/useClassname.d.ts +0 -2
  39. package/dist/useStyles.d.ts +0 -15
  40. package/src/Element.test.tsx +0 -203
  41. package/src/Element.tsx +0 -59
  42. package/src/cache.ts +0 -4
  43. package/src/reset.ts +0 -108
  44. package/src/useClassname.test.tsx +0 -70
  45. package/src/useClassname.ts +0 -23
  46. package/src/useStyles.stories.mdx +0 -24
  47. package/src/useStyles.test.tsx +0 -286
  48. package/src/useStyles.ts +0 -63
package/src/Colors.stories.mdx CHANGED
@@ -1,12 +1,5 @@
1
1
  import { Meta, Story, Canvas } from '@storybook/addon-docs';
2
- import {
3
- Column,
4
- Columns,
5
- Container,
6
- Heading,
7
- Text,
8
- } from '@marigold/components';
9
- import { useStyles } from '@marigold/system';
2
+ import { Box, Column, Columns, Container, Text } from '@marigold/components';
10
3
 
11
4
  <Meta title="Tokens/Marigold Colours" />
12
5
 
@@ -18,475 +11,383 @@ import { useStyles } from '@marigold/system';
18
11
  <Story name="B2B Theme">
19
12
  <Columns space={16}>
20
13
  <Column width={6}>
21
- <Heading>Gray</Heading>
22
- <Container
23
- className={useStyles({
24
- css: {
25
- bg: '#ffffff',
26
- p: '8px',
27
- display: 'flex',
28
- justifyContent: 'space-between',
29
- },
30
- })}
14
+ <Text as="h2" variant="headline2">
15
+ Gray
16
+ </Text>
17
+ <Box
18
+ as={Container}
19
+ bg="#ffffff"
20
+ p="8px"
21
+ display="flex"
22
+ justifyContent="space-between"
31
23
  >
32
24
  <Text>Gray00</Text>
33
25
  <Text>#ffffff</Text>
34
- </Container>
35
- <Container
36
- className={useStyles({
37
- css: {
38
- bg: '#fafafa',
39
- p: '8px',
40
- display: 'flex',
41
- justifyContent: 'space-between',
42
- },
43
- })}
26
+ </Box>
27
+ <Box
28
+ as={Container}
29
+ bg="#fafafa"
30
+ p="8px"
31
+ display="flex"
32
+ justifyContent="space-between"
44
33
  >
45
34
  <Text>Gray10</Text>
46
35
  <Text>#fafafa</Text>
47
- </Container>
48
- <Container
49
- className={useStyles({
50
- css: {
51
- bg: '#f3f3f3',
52
- p: '8px',
53
- display: 'flex',
54
- justifyContent: 'space-between',
55
- },
56
- })}
36
+ </Box>
37
+ <Box
38
+ as={Container}
39
+ bg="#f3f3f3"
40
+ p="8px"
41
+ display="flex"
42
+ justifyContent="space-between"
57
43
  >
58
44
  <Text>Gray20</Text>
59
45
  <Text>#f3f3f3</Text>
60
- </Container>
61
- <Container
62
- className={useStyles({
63
- css: {
64
- bg: '#e3e3e3',
65
- p: '8px',
66
- display: 'flex',
67
- justifyContent: 'space-between',
68
- },
69
- })}
46
+ </Box>
47
+ <Box
48
+ as={Container}
49
+ bg="#e3e3e3"
50
+ p="8px"
51
+ display="flex"
52
+ justifyContent="space-between"
70
53
  >
71
54
  <Text>Gray30</Text>
72
55
  <Text>#e3e3e3</Text>
73
- </Container>
74
- <Container
75
- className={useStyles({
76
- css: {
77
- bg: '#cccccc',
78
- p: '8px',
79
- display: 'flex',
80
- justifyContent: 'space-between',
81
- },
82
- })}
56
+ </Box>
57
+ <Box
58
+ as={Container}
59
+ bg="#cccccc"
60
+ p="8px"
61
+ display="flex"
62
+ justifyContent="space-between"
83
63
  >
84
64
  <Text>Gray40</Text>
85
65
  <Text>#cccccc</Text>
86
- </Container>
87
- <Container
88
- className={useStyles({
89
- css: {
90
- bg: '#8d8d8d',
91
- p: '8px',
92
- display: 'flex',
93
- justifyContent: 'space-between',
94
- },
95
- })}
66
+ </Box>
67
+ <Box
68
+ as={Container}
69
+ bg="#8d8d8d"
70
+ p="8px"
71
+ display="flex"
72
+ justifyContent="space-between"
96
73
  >
97
74
  <Text>Gray50</Text>
98
75
  <Text>#8d8d8d</Text>
99
- </Container>
100
- <Container
101
- className={useStyles({
102
- css: {
103
- color: 'white',
104
- bg: '#6d6d6d',
105
- p: '8px',
106
- display: 'flex',
107
- justifyContent: 'space-between',
108
- },
109
- })}
76
+ </Box>
77
+ <Box
78
+ as={Container}
79
+ css={{ color: 'white' }}
80
+ bg="#6d6d6d"
81
+ p="8px"
82
+ display="flex"
83
+ justifyContent="space-between"
110
84
  >
111
85
  <Text>Gray60</Text>
112
86
  <Text>#6d6d6d</Text>
113
- </Container>
114
- <Container
115
- className={useStyles({
116
- css: {
117
- color: 'white',
118
- bg: '#4b4b4b',
119
- p: '8px',
120
- display: 'flex',
121
- justifyContent: 'space-between',
122
- },
123
- })}
87
+ </Box>
88
+ <Box
89
+ as={Container}
90
+ css={{ color: 'white' }}
91
+ bg="#4b4b4b"
92
+ p="8px"
93
+ display="flex"
94
+ justifyContent="space-between"
124
95
  >
125
96
  <Text>Gray70 (Text Black)</Text>
126
97
  <Text>#4b4b4b</Text>
127
- </Container>
128
- <Container
129
- className={useStyles({
130
- css: {
131
- color: 'white',
132
- bg: '#2b2b2b',
133
- p: '8px',
134
- display: 'flex',
135
- justifyContent: 'space-between',
136
- },
137
- })}
98
+ </Box>
99
+ <Box
100
+ as={Container}
101
+ css={{ color: 'white' }}
102
+ bg="#2b2b2b"
103
+ p="8px"
104
+ display="flex"
105
+ justifyContent="space-between"
138
106
  >
139
107
  <Text>Gray80</Text>
140
108
  <Text>#2b2b2b</Text>
141
- </Container>
142
- <Container
143
- className={useStyles({
144
- css: {
145
- color: 'white',
146
- bg: '#0f0f0f',
147
- p: '8px',
148
- display: 'flex',
149
- justifyContent: 'space-between',
150
- },
151
- })}
109
+ </Box>
110
+ <Box
111
+ as={Container}
112
+ css={{ color: 'white' }}
113
+ bg="#0f0f0f"
114
+ p="8px"
115
+ display="flex"
116
+ justifyContent="space-between"
152
117
  >
153
118
  <Text>Gray90</Text>
154
119
  <Text>#0f0f0f</Text>
155
- </Container>
120
+ </Box>
156
121
  </Column>
157
122
  <Column width={6}>
158
- <Heading>Orange</Heading>
159
- <Container
160
- className={useStyles({
161
- css: {
162
- bg: '#fff8f1',
163
- p: '8px',
164
- display: 'flex',
165
- justifyContent: 'space-between',
166
- },
167
- })}
123
+ <Text as="h2" variant="headline2">
124
+ Orange
125
+ </Text>
126
+ <Box
127
+ as={Container}
128
+ bg="#fff8f1"
129
+ p="8px"
130
+ display="flex"
131
+ justifyContent="space-between"
168
132
  >
169
133
  <Text>Orange10</Text>
170
134
  <Text>#fff8f1</Text>
171
- </Container>
172
- <Container
173
- className={useStyles({
174
- css: {
175
- bg: '#fdcca0',
176
- p: '8px',
177
- display: 'flex',
178
- justifyContent: 'space-between',
179
- },
180
- })}
135
+ </Box>
136
+ <Box
137
+ as={Container}
138
+ bg="#fdcca0"
139
+ p="8px"
140
+ display="flex"
141
+ justifyContent="space-between"
181
142
  >
182
143
  <Text>Orange20</Text>
183
144
  <Text>#fdcca0</Text>
184
- </Container>
185
- <Container
186
- className={useStyles({
187
- css: {
188
- bg: '#f8ac67',
189
- p: '8px',
190
- display: 'flex',
191
- justifyContent: 'space-between',
192
- },
193
- })}
145
+ </Box>
146
+ <Box
147
+ as={Container}
148
+ bg="#f8ac67"
149
+ p="8px"
150
+ display="flex"
151
+ justifyContent="space-between"
194
152
  >
195
153
  <Text>Orange40</Text>
196
154
  <Text>#f8ac67</Text>
197
- </Container>
198
- <Container
199
- className={useStyles({
200
- css: {
201
- bg: '#fa8005',
202
- p: '8px',
203
- display: 'flex',
204
- justifyContent: 'space-between',
205
- },
206
- })}
155
+ </Box>
156
+ <Box
157
+ as={Container}
158
+ bg="#fa8005"
159
+ p="8px"
160
+ display="flex"
161
+ justifyContent="space-between"
207
162
  >
208
163
  <Text>Orange60 (Primary)</Text>
209
164
  <Text>#fa8005</Text>
210
- </Container>
211
- <Container
212
- className={useStyles({
213
- css: {
214
- bg: '#ea5200',
215
- p: '8px',
216
- display: 'flex',
217
- justifyContent: 'space-between',
218
- },
219
- })}
165
+ </Box>
166
+ <Box
167
+ as={Container}
168
+ bg="#ea5200"
169
+ p="8px"
170
+ display="flex"
171
+ justifyContent="space-between"
220
172
  >
221
173
  <Text>Orange70</Text>
222
174
  <Text>#ea5200</Text>
223
- </Container>
224
- <Container
225
- className={useStyles({
226
- css: {
227
- color: 'white',
228
- bg: '#ae440a',
229
- p: '8px',
230
- display: 'flex',
231
- justifyContent: 'space-between',
232
- },
233
- })}
175
+ </Box>
176
+ <Box
177
+ as={Container}
178
+ css={{ color: 'white' }}
179
+ bg="#ae440a"
180
+ p="8px"
181
+ display="flex"
182
+ justifyContent="space-between"
234
183
  >
235
184
  <Text>Orange80</Text>
236
185
  <Text>#ae440a</Text>
237
- </Container>
186
+ </Box>
238
187
  </Column>
239
188
  </Columns>
240
189
  <Columns space={16}>
241
190
  <Column width={6}>
242
- <Heading>Blue</Heading>
243
- <Container
244
- className={useStyles({
245
- css: {
246
- bg: '#e8f4fa',
247
- p: '8px',
248
- display: 'flex',
249
- justifyContent: 'space-between',
250
- },
251
- })}
191
+ <Text as="h2" variant="headline2">
192
+ Blue
193
+ </Text>
194
+ <Box
195
+ as={Container}
196
+ bg="#e8f4fa"
197
+ p="8px"
198
+ display="flex"
199
+ justifyContent="space-between"
252
200
  >
253
201
  <Text>Blue10</Text>
254
202
  <Text>#e8f4fa</Text>
255
- </Container>
256
- <Container
257
- className={useStyles({
258
- css: {
259
- bg: '#c1f0fc',
260
- p: '8px',
261
- display: 'flex',
262
- justifyContent: 'space-between',
263
- },
264
- })}
203
+ </Box>
204
+ <Box
205
+ as={Container}
206
+ bg="#c1f0fc"
207
+ p="8px"
208
+ display="flex"
209
+ justifyContent="space-between"
265
210
  >
266
211
  <Text>Blue20</Text>
267
212
  <Text>#c1f0fc</Text>
268
- </Container>
269
- <Container
270
- className={useStyles({
271
- css: {
272
- bg: '#67dfff',
273
- p: '8px',
274
- display: 'flex',
275
- justifyContent: 'space-between',
276
- },
277
- })}
213
+ </Box>
214
+ <Box
215
+ as={Container}
216
+ bg="#67dfff"
217
+ p="8px"
218
+ display="flex"
219
+ justifyContent="space-between"
278
220
  >
279
221
  <Text>Blue40</Text>
280
222
  <Text>#67dfff</Text>
281
- </Container>
282
- <Container
283
- className={useStyles({
284
- css: {
285
- bg: '#3ab3d5',
286
- p: '8px',
287
- display: 'flex',
288
- justifyContent: 'space-between',
289
- },
290
- })}
223
+ </Box>
224
+ <Box
225
+ as={Container}
226
+ bg="#3ab3d5"
227
+ p="8px"
228
+ display="flex"
229
+ justifyContent="space-between"
291
230
  >
292
231
  <Text>Blue60</Text>
293
232
  <Text>#3ab3d5</Text>
294
- </Container>
295
- <Container
296
- className={useStyles({
297
- css: {
298
- color: 'white',
299
- bg: '#1d67b6',
300
- p: '8px',
301
- display: 'flex',
302
- justifyContent: 'space-between',
303
- },
304
- })}
233
+ </Box>
234
+ <Box
235
+ as={Container}
236
+ css={{ color: 'white' }}
237
+ bg="#1d67b6"
238
+ p="8px"
239
+ display="flex"
240
+ justifyContent="space-between"
305
241
  >
306
242
  <Text>Blue70</Text>
307
243
  <Text>#1d67b6</Text>
308
- </Container>
309
- <Container
310
- className={useStyles({
311
- css: {
312
- color: 'white',
313
- bg: '#fafafa',
314
- p: '8px',
315
- display: 'flex',
316
- justifyContent: 'space-between',
317
- },
318
- })}
244
+ </Box>
245
+ <Box
246
+ as={Container}
247
+ css={{ color: 'white' }}
248
+ bg="#fafafa"
249
+ p="8px"
250
+ display="flex"
251
+ justifyContent="space-between"
319
252
  >
320
253
  <Text>Blue80</Text>
321
254
  <Text>#0c3a6b</Text>
322
- </Container>
255
+ </Box>
323
256
  </Column>
324
257
  <Column width={6}>
325
- <Heading>Green</Heading>
326
- <Container
327
- className={useStyles({
328
- css: {
329
- bg: '#f9fed0',
330
- p: '8px',
331
- display: 'flex',
332
- justifyContent: 'space-between',
333
- },
334
- })}
258
+ <Text as="h2" variant="headline2">
259
+ Green
260
+ </Text>
261
+ <Box
262
+ as={Container}
263
+ bg="#f9fed0"
264
+ p="8px"
265
+ display="flex"
266
+ justifyContent="space-between"
335
267
  >
336
268
  <Text>Green10</Text>
337
269
  <Text>#f9fed0</Text>
338
- </Container>
339
- <Container
340
- className={useStyles({
341
- css: {
342
- bg: '#e8f57b',
343
- p: '8px',
344
- display: 'flex',
345
- justifyContent: 'space-between',
346
- },
347
- })}
270
+ </Box>
271
+ <Box
272
+ as={Container}
273
+ bg="#e8f57b"
274
+ p="8px"
275
+ display="flex"
276
+ justifyContent="space-between"
348
277
  >
349
278
  <Text>Green20</Text>
350
279
  <Text>#e8f57b</Text>
351
- </Container>
352
- <Container
353
- className={useStyles({
354
- css: {
355
- bg: '#bacb2a',
356
- p: '8px',
357
- display: 'flex',
358
- justifyContent: 'space-between',
359
- },
360
- })}
280
+ </Box>
281
+ <Box
282
+ as={Container}
283
+ bg="#bacb2a"
284
+ p="8px"
285
+ display="flex"
286
+ justifyContent="space-between"
361
287
  >
362
288
  <Text>Green40</Text>
363
289
  <Text>#bacb2a</Text>
364
- </Container>
365
- <Container
366
- className={useStyles({
367
- css: {
368
- bg: '#8bbd26',
369
- p: '8px',
370
- display: 'flex',
371
- justifyContent: 'space-between',
372
- },
373
- })}
290
+ </Box>
291
+ <Box
292
+ as={Container}
293
+ bg="#8bbd26"
294
+ p="8px"
295
+ display="flex"
296
+ justifyContent="space-between"
374
297
  >
375
298
  <Text>Green60</Text>
376
299
  <Text>#8bbd26</Text>
377
- </Container>
378
- <Container
379
- className={useStyles({
380
- css: {
381
- bg: '#44a112',
382
- p: '8px',
383
- display: 'flex',
384
- justifyContent: 'space-between',
385
- },
386
- })}
300
+ </Box>
301
+ <Box
302
+ as={Container}
303
+ bg="#44a112"
304
+ p="8px"
305
+ display="flex"
306
+ justifyContent="space-between"
387
307
  >
388
308
  <Text>Green70</Text>
389
309
  <Text>#44a112</Text>
390
- </Container>
391
- <Container
392
- className={useStyles({
393
- css: {
394
- color: 'white',
395
- bg: '#215107',
396
- p: '8px',
397
- display: 'flex',
398
- justifyContent: 'space-between',
399
- },
400
- })}
310
+ </Box>
311
+ <Box
312
+ as={Container}
313
+ css={{ color: 'white' }}
314
+ bg="#215107"
315
+ p="8px"
316
+ display="flex"
317
+ justifyContent="space-between"
401
318
  >
402
319
  <Text>Green80</Text>
403
320
  <Text>#215107</Text>
404
- </Container>
321
+ </Box>
405
322
  </Column>
406
323
  </Columns>
407
324
  <Columns space={16}>
408
- <Column width={6}>
409
- <Heading>Red</Heading>
410
- <Container
411
- className={useStyles({
412
- css: {
413
- bg: '#fff8f8',
414
- p: '8px',
415
- display: 'flex',
416
- justifyContent: 'space-between',
417
- },
418
- })}
325
+ <Column width={6}>
326
+ <Text as="h2" variant="headline2">
327
+ Red
328
+ </Text>
329
+ <Box
330
+ as={Container}
331
+ bg="#fff8f8"
332
+ p="8px"
333
+ display="flex"
334
+ justifyContent="space-between"
419
335
  >
420
336
  <Text>Red10</Text>
421
337
  <Text>#fff8f8</Text>
422
- </Container>
423
- <Container
424
- className={useStyles({
425
- css: {
426
- bg: '#fec8c9',
427
- p: '8px',
428
- display: 'flex',
429
- justifyContent: 'space-between',
430
- },
431
- })}
338
+ </Box>
339
+ <Box
340
+ as={Container}
341
+ bg="#fec8c9"
342
+ p="8px"
343
+ display="flex"
344
+ justifyContent="space-between"
432
345
  >
433
346
  <Text>Red20</Text>
434
347
  <Text>#fec8c9</Text>
435
- </Container>
436
- <Container
437
- className={useStyles({
438
- css: {
439
- bg: '#f38a8a',
440
- p: '8px',
441
- display: 'flex',
442
- justifyContent: 'space-between',
443
- },
444
- })}
348
+ </Box>
349
+ <Box
350
+ as={Container}
351
+ bg="#f38a8a"
352
+ p="8px"
353
+ display="flex"
354
+ justifyContent="space-between"
445
355
  >
446
356
  <Text>Red40</Text>
447
357
  <Text>#f38a8a</Text>
448
- </Container>
449
- <Container
450
- className={useStyles({
451
- css: {
452
- bg: '#dd4142',
453
- p: '8px',
454
- display: 'flex',
455
- justifyContent: 'space-between',
456
- },
457
- })}
358
+ </Box>
359
+ <Box
360
+ as={Container}
361
+ bg="#dd4142"
362
+ p="8px"
363
+ display="flex"
364
+ justifyContent="space-between"
458
365
  >
459
366
  <Text>Red60</Text>
460
367
  <Text>#dd4142</Text>
461
- </Container>
462
- <Container
463
- className={useStyles({
464
- css: {
465
- color: 'white',
466
- bg: '#8b0027',
467
- p: '8px',
468
- display: 'flex',
469
- justifyContent: 'space-between',
470
- },
471
- })}
368
+ </Box>
369
+ <Box
370
+ as={Container}
371
+ css={{ color: 'white' }}
372
+ bg="#8b0027"
373
+ p="8px"
374
+ display="flex"
375
+ justifyContent="space-between"
472
376
  >
473
377
  <Text>Red70</Text>
474
378
  <Text>#8b0027</Text>
475
- </Container>
476
- <Container
477
- className={useStyles({
478
- css: {
479
- color: 'white',
480
- bg: '#4d0419',
481
- p: '8px',
482
- display: 'flex',
483
- justifyContent: 'space-between',
484
- },
485
- })}
379
+ </Box>
380
+ <Box
381
+ as={Container}
382
+ css={{ color: 'white' }}
383
+ bg="#4d0419"
384
+ p="8px"
385
+ display="flex"
386
+ justifyContent="space-between"
486
387
  >
487
388
  <Text>Red80</Text>
488
389
  <Text>#4d0419</Text>
489
- </Container>
390
+ </Box>
490
391
  </Column>
491
392
  </Columns>
492
393
  </Story>
@@ -498,125 +399,100 @@ import { useStyles } from '@marigold/system';
498
399
  <Story name="Unicorn Theme">
499
400
  <Columns space={16}>
500
401
  <Column width={6}>
501
- <Heading>Base Colours</Heading>
502
- <Container
503
- className={useStyles({
504
- css: {
505
- color: 'white',
506
- bg: '#070708',
507
- p: '8px',
508
- display: 'flex',
509
- justifyContent: 'space-between',
510
- },
511
- })}
402
+ <Text as="h2" variant="headline2">
403
+ Base Colours
404
+ </Text>
405
+ <Box
406
+ as={Container}
407
+ css={{ color: 'white' }}
408
+ bg="#070708"
409
+ p="8px"
410
+ display="flex"
411
+ justifyContent="space-between"
512
412
  >
513
413
  <Text>Text</Text>
514
414
  <Text>#070708</Text>
515
- </Container>
516
- <Container
517
- className={useStyles({
518
- css: {
519
- bg: '#fdfcfd',
520
- p: '8px',
521
- display: 'flex',
522
- justifyContent: 'space-between',
523
- },
524
- })}
415
+ </Box>
416
+ <Box
417
+ as={Container}
418
+ bg="#fdfcfd"
419
+ p="8px"
420
+ display="flex"
421
+ justifyContent="space-between"
525
422
  >
526
423
  <Text>Background</Text>
527
424
  <Text>#fdfcfd</Text>
528
- </Container>
529
- <Container
530
- className={useStyles({
531
- css: {
532
- bg: '#c9b1ff',
533
- p: '8px',
534
- display: 'flex',
535
- justifyContent: 'space-between',
536
- },
537
- })}
425
+ </Box>
426
+ <Box
427
+ as={Container}
428
+ bg="#c9b1ff"
429
+ p="8px"
430
+ display="flex"
431
+ justifyContent="space-between"
538
432
  >
539
433
  <Text>Primary</Text>
540
434
  <Text>#c9b1ff</Text>
541
- </Container>
542
- <Container
543
- className={useStyles({
544
- css: {
545
- bg: '#ffcaf2',
546
- p: '8px',
547
- display: 'flex',
548
- justifyContent: 'space-between',
549
- },
550
- })}
435
+ </Box>
436
+ <Box
437
+ as={Container}
438
+ bg="#ffcaf2"
439
+ p="8px"
440
+ display="flex"
441
+ justifyContent="space-between"
551
442
  >
552
443
  <Text>Secondary</Text>
553
444
  <Text>#ffcaf2</Text>
554
- </Container>
555
- <Container
556
- className={useStyles({
557
- css: {
558
- bg: '#e9e7eb',
559
- p: '8px',
560
- display: 'flex',
561
- justifyContent: 'space-between',
562
- },
563
- })}
445
+ </Box>
446
+ <Box
447
+ as={Container}
448
+ bg="#e9e7eb"
449
+ p="8px"
450
+ display="flex"
451
+ justifyContent="space-between"
564
452
  >
565
453
  <Text>Disabled</Text>
566
454
  <Text>#e9e7eb</Text>
567
- </Container>
568
- <Container
569
- className={useStyles({
570
- css: {
571
- bg: '#ffb2b1',
572
- p: '8px',
573
- display: 'flex',
574
- justifyContent: 'space-between',
575
- },
576
- })}
455
+ </Box>
456
+ <Box
457
+ as={Container}
458
+ bg="#ffb2b1"
459
+ p="8px"
460
+ display="flex"
461
+ justifyContent="space-between"
577
462
  >
578
463
  <Text>Error</Text>
579
464
  <Text>#ffb2b1</Text>
580
- </Container>
581
- <Container
582
- className={useStyles({
583
- css: {
584
- bg: '#fff3ad',
585
- p: '8px',
586
- display: 'flex',
587
- justifyContent: 'space-between',
588
- },
589
- })}
465
+ </Box>
466
+ <Box
467
+ as={Container}
468
+ bg="#fff3ad"
469
+ p="8px"
470
+ display="flex"
471
+ justifyContent="space-between"
590
472
  >
591
473
  <Text>Warning</Text>
592
474
  <Text>#fff3ad</Text>
593
- </Container>
594
- <Container
595
- className={useStyles({
596
- css: {
597
- bg: '#a2edff',
598
- p: '8px',
599
- display: 'flex',
600
- justifyContent: 'space-between',
601
- },
602
- })}
475
+ </Box>
476
+ <Box
477
+ as={Container}
478
+ bg="#a2edff"
479
+ p="8px"
480
+ display="flex"
481
+ justifyContent="space-between"
603
482
  >
604
483
  <Text>Info</Text>
605
484
  <Text>#a2edff</Text>
606
- </Container>
607
- <Container
608
- className={useStyles({
609
- css: {
610
- bg: '#bcffbc',
611
- p: '8px',
612
- display: 'flex',
613
- justifyContent: 'space-between',
614
- },
615
- })}
485
+ </Box>
486
+ <Box
487
+ as={Container}
488
+ bg="#bcffbc"
489
+ p="8px"
490
+ display="flex"
491
+ justifyContent="space-between"
616
492
  >
617
493
  <Text>Success</Text>
618
494
  <Text>#bcffbc</Text>
619
- </Container>
495
+ </Box>
620
496
  </Column>
621
497
  </Columns>
622
498
  </Story>