@marigold/system 0.2.0 → 0.3.3

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 (50) hide show
  1. package/CHANGELOG.md +57 -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/SVG.stories.d.ts +5 -0
  6. package/dist/index.d.ts +6 -4
  7. package/dist/normalize.d.ts +101 -67
  8. package/dist/system.cjs.development.js +299 -294
  9. package/dist/system.cjs.development.js.map +1 -1
  10. package/dist/system.cjs.production.min.js +1 -1
  11. package/dist/system.cjs.production.min.js.map +1 -1
  12. package/dist/system.esm.js +291 -289
  13. package/dist/system.esm.js.map +1 -1
  14. package/dist/theme.d.ts +136 -0
  15. package/dist/types.d.ts +1 -2
  16. package/dist/useTheme.d.ts +11 -5
  17. package/dist/variant.d.ts +29 -0
  18. package/package.json +5 -6
  19. package/src/Box.test.tsx +308 -0
  20. package/src/Box.tsx +199 -0
  21. package/src/Global.test.tsx +57 -0
  22. package/src/Global.tsx +34 -0
  23. package/src/SVG.stories.tsx +48 -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/Colors.stories.mdx +0 -623
  41. package/src/Element.test.tsx +0 -203
  42. package/src/Element.tsx +0 -59
  43. package/src/cache.ts +0 -4
  44. package/src/concepts-principles.mdx +0 -84
  45. package/src/reset.ts +0 -108
  46. package/src/useClassname.test.tsx +0 -70
  47. package/src/useClassname.ts +0 -23
  48. package/src/useStyles.stories.mdx +0 -24
  49. package/src/useStyles.test.tsx +0 -286
  50. package/src/useStyles.ts +0 -63
package/src/Colors.stories.mdx DELETED
@@ -1,623 +0,0 @@
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';
10
-
11
- <Meta title="Tokens/Marigold Colours" />
12
-
13
- # Colours
14
-
15
- ## B2B Theme
16
-
17
- <Canvas>
18
- <Story name="B2B Theme">
19
- <Columns space={16}>
20
- <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
- })}
31
- >
32
- <Text>Gray00</Text>
33
- <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
- })}
44
- >
45
- <Text>Gray10</Text>
46
- <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
- })}
57
- >
58
- <Text>Gray20</Text>
59
- <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
- })}
70
- >
71
- <Text>Gray30</Text>
72
- <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
- })}
83
- >
84
- <Text>Gray40</Text>
85
- <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
- })}
96
- >
97
- <Text>Gray50</Text>
98
- <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
- })}
110
- >
111
- <Text>Gray60</Text>
112
- <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
- })}
124
- >
125
- <Text>Gray70 (Text Black)</Text>
126
- <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
- })}
138
- >
139
- <Text>Gray80</Text>
140
- <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
- })}
152
- >
153
- <Text>Gray90</Text>
154
- <Text>#0f0f0f</Text>
155
- </Container>
156
- </Column>
157
- <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
- })}
168
- >
169
- <Text>Orange10</Text>
170
- <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
- })}
181
- >
182
- <Text>Orange20</Text>
183
- <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
- })}
194
- >
195
- <Text>Orange40</Text>
196
- <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
- })}
207
- >
208
- <Text>Orange60 (Primary)</Text>
209
- <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
- })}
220
- >
221
- <Text>Orange70</Text>
222
- <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
- })}
234
- >
235
- <Text>Orange80</Text>
236
- <Text>#ae440a</Text>
237
- </Container>
238
- </Column>
239
- </Columns>
240
- <Columns space={16}>
241
- <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
- })}
252
- >
253
- <Text>Blue10</Text>
254
- <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
- })}
265
- >
266
- <Text>Blue20</Text>
267
- <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
- })}
278
- >
279
- <Text>Blue40</Text>
280
- <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
- })}
291
- >
292
- <Text>Blue60</Text>
293
- <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
- })}
305
- >
306
- <Text>Blue70</Text>
307
- <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
- })}
319
- >
320
- <Text>Blue80</Text>
321
- <Text>#0c3a6b</Text>
322
- </Container>
323
- </Column>
324
- <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
- })}
335
- >
336
- <Text>Green10</Text>
337
- <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
- })}
348
- >
349
- <Text>Green20</Text>
350
- <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
- })}
361
- >
362
- <Text>Green40</Text>
363
- <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
- })}
374
- >
375
- <Text>Green60</Text>
376
- <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
- })}
387
- >
388
- <Text>Green70</Text>
389
- <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
- })}
401
- >
402
- <Text>Green80</Text>
403
- <Text>#215107</Text>
404
- </Container>
405
- </Column>
406
- </Columns>
407
- <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
- })}
419
- >
420
- <Text>Red10</Text>
421
- <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
- })}
432
- >
433
- <Text>Red20</Text>
434
- <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
- })}
445
- >
446
- <Text>Red40</Text>
447
- <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
- })}
458
- >
459
- <Text>Red60</Text>
460
- <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
- })}
472
- >
473
- <Text>Red70</Text>
474
- <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
- })}
486
- >
487
- <Text>Red80</Text>
488
- <Text>#4d0419</Text>
489
- </Container>
490
- </Column>
491
- </Columns>
492
- </Story>
493
- </Canvas>
494
-
495
- ## Unicorn Theme
496
-
497
- <Canvas>
498
- <Story name="Unicorn Theme">
499
- <Columns space={16}>
500
- <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
- })}
512
- >
513
- <Text>Text</Text>
514
- <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
- })}
525
- >
526
- <Text>Background</Text>
527
- <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
- })}
538
- >
539
- <Text>Primary</Text>
540
- <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
- })}
551
- >
552
- <Text>Secondary</Text>
553
- <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
- })}
564
- >
565
- <Text>Disabled</Text>
566
- <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
- })}
577
- >
578
- <Text>Error</Text>
579
- <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
- })}
590
- >
591
- <Text>Warning</Text>
592
- <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
- })}
603
- >
604
- <Text>Info</Text>
605
- <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
- })}
616
- >
617
- <Text>Success</Text>
618
- <Text>#bcffbc</Text>
619
- </Container>
620
- </Column>
621
- </Columns>
622
- </Story>
623
- </Canvas>