@marigold/system 0.1.0 → 0.2.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 (20) hide show
  1. package/dist/Element.d.ts +8 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/normalize.d.ts +110 -0
  4. package/dist/system.cjs.development.js +246 -45
  5. package/dist/system.cjs.development.js.map +1 -1
  6. package/dist/system.cjs.production.min.js +1 -1
  7. package/dist/system.cjs.production.min.js.map +1 -1
  8. package/dist/system.esm.js +239 -39
  9. package/dist/system.esm.js.map +1 -1
  10. package/package.json +5 -6
  11. package/src/Colors.stories.mdx +614 -446
  12. package/src/Element.test.tsx +203 -0
  13. package/src/Element.tsx +59 -0
  14. package/src/concepts-principles.mdx +1 -1
  15. package/src/index.ts +1 -0
  16. package/src/normalize.test.tsx +42 -0
  17. package/src/normalize.ts +131 -0
  18. package/src/reset.ts +3 -3
  19. package/src/useStyles.stories.mdx +24 -0
  20. package/src/writeComponent.stories.mdx +0 -126
package/src/Colors.stories.mdx CHANGED
@@ -1,455 +1,623 @@
1
- import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
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
10
 
3
- <Meta title="Colours" />
11
+ <Meta title="Tokens/Marigold Colours" />
4
12
 
5
13
  # Colours
6
14
 
7
- The following colours are used in the b2b-theme.
8
-
9
- ## Colour Values
15
+ ## B2B Theme
10
16
 
11
17
  <Canvas>
12
- <Story name="Gray">
13
- <div style={{ padding: '0.5rem 1rem', fontFamily: 'Inter' }}>
14
- <h2>Gray</h2>
15
- <div style={{ display: 'inline-block', width: '260px' }}>
16
- <div
17
- style={{
18
- background: '#ffffff',
19
- color: 'black',
20
- padding: '8px',
21
- display: 'flex',
22
- justifyContent: 'space-between',
23
- }}
24
- >
25
- <span>Gray00</span>
26
- <span>#ffffff</span>
27
- </div>
28
- <div
29
- style={{
30
- background: '#fafafa',
31
- color: 'black',
32
- padding: '8px',
33
- display: 'flex',
34
- justifyContent: 'space-between',
35
- }}
36
- >
37
- <span>Gray10</span>
38
- <span>#fafafa</span>
39
- </div>
40
- <div
41
- style={{
42
- background: '#f3f3f3',
43
- color: 'black',
44
- padding: '8px',
45
- display: 'flex',
46
- justifyContent: 'space-between',
47
- }}
48
- >
49
- <span>Gray20</span>
50
- <span>#f3f3f3</span>
51
- </div>
52
- <div
53
- style={{
54
- background: '#e3e3e3',
55
- color: 'black',
56
- padding: '8px',
57
- display: 'flex',
58
- justifyContent: 'space-between',
59
- }}
60
- >
61
- <span>Gray30</span>
62
- <span>#e3e3e3</span>
63
- </div>
64
- <div
65
- style={{
66
- background: '#cccccc',
67
- color: 'black',
68
- padding: '8px',
69
- display: 'flex',
70
- justifyContent: 'space-between',
71
- }}
72
- >
73
- <span>Gray40</span>
74
- <span>#cccccc</span>
75
- </div>
76
- <div
77
- style={{
78
- background: '#8d8d8d',
79
- color: 'white',
80
- padding: '8px',
81
- display: 'flex',
82
- justifyContent: 'space-between',
83
- }}
84
- >
85
- <span>Gray50</span>
86
- <span>#8d8d8d</span>
87
- </div>
88
- <div
89
- style={{
90
- background: '#6d6d6d',
91
- color: 'white',
92
- padding: '8px',
93
- display: 'flex',
94
- justifyContent: 'space-between',
95
- }}
96
- >
97
- <span>Gray60</span>
98
- <span>#6d6d6d</span>
99
- </div>
100
- <div
101
- style={{
102
- background: '#4b4b4b',
103
- color: 'white',
104
- padding: '8px',
105
- display: 'flex',
106
- justifyContent: 'space-between',
107
- }}
108
- >
109
- <span>Gray70 (Text Black)</span>
110
- <span>#4b4b4b</span>
111
- </div>
112
- <div
113
- style={{
114
- background: '#2b2b2b',
115
- color: 'white',
116
- padding: '8px',
117
- display: 'flex',
118
- justifyContent: 'space-between',
119
- }}
120
- >
121
- <span>Gray80</span>
122
- <span>#2b2b2b</span>
123
- </div>
124
- <div
125
- style={{
126
- background: '#0f0f0f',
127
- color: 'white',
128
- padding: '8px',
129
- display: 'flex',
130
- justifyContent: 'space-between',
131
- }}
132
- >
133
- <span>Gray90</span>
134
- <span>#0f0f0f</span>
135
- </div>
136
- </div>
137
- </div>
138
- </Story>
139
- <Story name="Orange">
140
- <div style={{ padding: '0.5rem 1rem', fontFamily: 'Inter' }}>
141
- <h2>Orange</h2>
142
- <div style={{ display: 'inline-block', width: '260px' }}>
143
- <div
144
- style={{
145
- background: '#fff8f1',
146
- color: 'black',
147
- padding: '8px',
148
- display: 'flex',
149
- justifyContent: 'space-between',
150
- }}
151
- >
152
- <span>Orange10</span>
153
- <span>#fff8f1</span>
154
- </div>
155
- <div
156
- style={{
157
- background: '#fdcca0',
158
- color: 'black',
159
- padding: '8px',
160
- display: 'flex',
161
- justifyContent: 'space-between',
162
- }}
163
- >
164
- <span>Orange20</span>
165
- <span>#fdcca0</span>
166
- </div>
167
- <div
168
- style={{
169
- background: '#f8ac67',
170
- color: 'black',
171
- padding: '8px',
172
- display: 'flex',
173
- justifyContent: 'space-between',
174
- }}
175
- >
176
- <span>Orange40</span>
177
- <span>#f8ac67</span>
178
- </div>
179
- <div
180
- style={{
181
- background: '#fa8005',
182
- color: 'black',
183
- padding: '8px',
184
- display: 'flex',
185
- justifyContent: 'space-between',
186
- }}
187
- >
188
- <span>Orange60 (Primary)</span>
189
- <span>#fa8005</span>
190
- </div>
191
- <div
192
- style={{
193
- background: '#ea5200',
194
- color: 'black',
195
- padding: '8px',
196
- display: 'flex',
197
- justifyContent: 'space-between',
198
- }}
199
- >
200
- <span>Orange70</span>
201
- <span>#ea5200</span>
202
- </div>
203
- <div
204
- style={{
205
- background: '#ae440a',
206
- color: 'black',
207
- padding: '8px',
208
- display: 'flex',
209
- justifyContent: 'space-between',
210
- }}
211
- >
212
- <span>Orange80</span>
213
- <span>#ae440a</span>
214
- </div>
215
- </div>
216
- </div>
217
- </Story>
218
- <Story name="Blue">
219
- <div style={{ padding: '0.5rem 1rem', fontFamily: 'Inter' }}>
220
- <h2>Blue</h2>
221
- <div style={{ display: 'inline-block', width: '260px' }}>
222
- <div
223
- style={{
224
- background: '#e8f4fa',
225
- color: 'black',
226
- padding: '8px',
227
- display: 'flex',
228
- justifyContent: 'space-between',
229
- }}
230
- >
231
- <span>Blue10</span>
232
- <span>#e8f4fa</span>
233
- </div>
234
- <div
235
- style={{
236
- background: '#c1f0fc',
237
- color: 'black',
238
- padding: '8px',
239
- display: 'flex',
240
- justifyContent: 'space-between',
241
- }}
242
- >
243
- <span>Blue20</span>
244
- <span>#c1f0fc</span>
245
- </div>
246
- <div
247
- style={{
248
- background: '#67dfff',
249
- color: 'black',
250
- padding: '8px',
251
- display: 'flex',
252
- justifyContent: 'space-between',
253
- }}
254
- >
255
- <span>Blue40</span>
256
- <span>#67dfff</span>
257
- </div>
258
- <div
259
- style={{
260
- background: '#3ab3d5',
261
- color: 'white',
262
- padding: '8px',
263
- display: 'flex',
264
- justifyContent: 'space-between',
265
- }}
266
- >
267
- <span>Blue60</span>
268
- <span>#3ab3d5</span>
269
- </div>
270
- <div
271
- style={{
272
- background: '#1d67b6',
273
- color: 'white',
274
- padding: '8px',
275
- display: 'flex',
276
- justifyContent: 'space-between',
277
- }}
278
- >
279
- <span>Blue70</span>
280
- <span>#1d67b6</span>
281
- </div>
282
- <div
283
- style={{
284
- background: '#0c3a6b',
285
- color: 'white',
286
- padding: '8px',
287
- display: 'flex',
288
- justifyContent: 'space-between',
289
- }}
290
- >
291
- <span>Blue80</span>
292
- <span>#0c3a6b</span>
293
- </div>
294
- </div>
295
- </div>
296
- </Story>
297
- <Story name="Green">
298
- <div style={{ padding: '0.5rem 1rem', fontFamily: 'Inter' }}>
299
- <h2>Green</h2>
300
- <div style={{ display: 'inline-block', width: '260px' }}>
301
- <div
302
- style={{
303
- background: '#f9fed0',
304
- color: 'black',
305
- padding: '8px',
306
- display: 'flex',
307
- justifyContent: 'space-between',
308
- }}
309
- >
310
- <span>Green10</span>
311
- <span>#f9fed0</span>
312
- </div>
313
- <div
314
- style={{
315
- background: '#e8f57b',
316
- color: 'black',
317
- padding: '8px',
318
- display: 'flex',
319
- justifyContent: 'space-between',
320
- }}
321
- >
322
- <span>Green20</span>
323
- <span>#e8f57b</span>
324
- </div>
325
- <div
326
- style={{
327
- background: '#bacb2a',
328
- color: 'black',
329
- padding: '8px',
330
- display: 'flex',
331
- justifyContent: 'space-between',
332
- }}
333
- >
334
- <span>Green40</span>
335
- <span>#bacb2a</span>
336
- </div>
337
- <div
338
- style={{
339
- background: '#8bbd26',
340
- color: 'black',
341
- padding: '8px',
342
- display: 'flex',
343
- justifyContent: 'space-between',
344
- }}
345
- >
346
- <span>Green60</span>
347
- <span>#8bbd26</span>
348
- </div>
349
- <div
350
- style={{
351
- background: '#44a112',
352
- color: 'white',
353
- padding: '8px',
354
- display: 'flex',
355
- justifyContent: 'space-between',
356
- }}
357
- >
358
- <span>Green70</span>
359
- <span>#44a112</span>
360
- </div>
361
- <div
362
- style={{
363
- background: '#215107',
364
- color: 'white',
365
- padding: '8px',
366
- display: 'flex',
367
- justifyContent: 'space-between',
368
- }}
369
- >
370
- <span>Green80</span>
371
- <span>#215107</span>
372
- </div>
373
- </div>
374
- </div>
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>
375
492
  </Story>
376
- <Story name="Red">
377
- <div style={{ padding: '0.5rem 1rem', fontFamily: 'Inter' }}>
378
- <h2>Red</h2>
379
- <div style={{ display: 'inline-block', width: '260px' }}>
380
- <div
381
- style={{
382
- background: '#fff8f8',
383
- color: 'black',
384
- padding: '8px',
385
- display: 'flex',
386
- justifyContent: 'space-between',
387
- }}
388
- >
389
- <span>Red10</span>
390
- <span>#fff8f8</span>
391
- </div>
392
- <div
393
- style={{
394
- background: '#fec8c9',
395
- color: 'black',
396
- padding: '8px',
397
- display: 'flex',
398
- justifyContent: 'space-between',
399
- }}
400
- >
401
- <span>Red20</span>
402
- <span>#fec8c9</span>
403
- </div>
404
- <div
405
- style={{
406
- background: '#f38a8a',
407
- color: 'black',
408
- padding: '8px',
409
- display: 'flex',
410
- justifyContent: 'space-between',
411
- }}
412
- >
413
- <span>Red40</span>
414
- <span>#f38a8a</span>
415
- </div>
416
- <div
417
- style={{
418
- background: '#dd4142',
419
- color: 'black',
420
- padding: '8px',
421
- display: 'flex',
422
- justifyContent: 'space-between',
423
- }}
424
- >
425
- <span>Red60</span>
426
- <span>#dd4142</span>
427
- </div>
428
- <div
429
- style={{
430
- background: '#8b0027',
431
- color: 'white',
432
- padding: '8px',
433
- display: 'flex',
434
- justifyContent: 'space-between',
435
- }}
436
- >
437
- <span>Red70</span>
438
- <span>#8b0027</span>
439
- </div>
440
- <div
441
- style={{
442
- background: '#4d0419',
443
- color: 'white',
444
- padding: '8px',
445
- display: 'flex',
446
- justifyContent: 'space-between',
447
- }}
448
- >
449
- <span>Red80</span>
450
- <span>#4d0419</span>
451
- </div>
452
- </div>
453
- </div>
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>
454
622
  </Story>
455
623
  </Canvas>