@marigold/system 0.0.2 → 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 (47) 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 +7 -4
  6. package/dist/normalize.d.ts +143 -5
  7. package/dist/system.cjs.development.js +334 -159
  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 +324 -156
  12. package/dist/system.esm.js.map +1 -1
  13. package/dist/theme.d.ts +136 -0
  14. package/dist/types.d.ts +8 -0
  15. package/dist/useTheme.d.ts +15 -5
  16. package/dist/variant.d.ts +29 -0
  17. package/package.json +6 -8
  18. package/src/Box.test.tsx +308 -0
  19. package/src/Box.tsx +199 -0
  20. package/src/Colors.stories.mdx +492 -448
  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/concepts-principles.mdx +1 -1
  27. package/src/index.ts +7 -4
  28. package/src/normalize.test.tsx +15 -0
  29. package/src/normalize.ts +79 -93
  30. package/src/theme.ts +157 -0
  31. package/src/types.ts +14 -0
  32. package/src/useTheme.test.tsx +92 -17
  33. package/src/useTheme.tsx +45 -6
  34. package/src/variant.test.ts +93 -0
  35. package/src/variant.ts +54 -0
  36. package/dist/categories.d.ts +0 -169
  37. package/dist/system.d.ts +0 -37
  38. package/dist/useClassname.d.ts +0 -2
  39. package/dist/useStyles.d.ts +0 -10
  40. package/src/categories.ts +0 -203
  41. package/src/system.test.tsx +0 -84
  42. package/src/system.tsx +0 -55
  43. package/src/useClassname.test.tsx +0 -61
  44. package/src/useClassname.ts +0 -8
  45. package/src/useStyles.test.tsx +0 -313
  46. package/src/useStyles.ts +0 -56
  47. package/src/writeComponent.stories.mdx +0 -126
package/src/Colors.stories.mdx CHANGED
@@ -1,455 +1,499 @@
1
- import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
1
+ import { Meta, Story, Canvas } from '@storybook/addon-docs';
2
+ import { Box, Column, Columns, Container, Text } from '@marigold/components';
2
3
 
3
- <Meta title="Colours" />
4
+ <Meta title="Tokens/Marigold Colours" />
4
5
 
5
6
  # Colours
6
7
 
7
- The following colours are used in the b2b-theme.
8
+ ## B2B Theme
8
9
 
9
- ## Colour Values
10
-
11
- <Preview>
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>
10
+ <Canvas>
11
+ <Story name="B2B Theme">
12
+ <Columns space={16}>
13
+ <Column width={6}>
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"
23
+ >
24
+ <Text>Gray00</Text>
25
+ <Text>#ffffff</Text>
26
+ </Box>
27
+ <Box
28
+ as={Container}
29
+ bg="#fafafa"
30
+ p="8px"
31
+ display="flex"
32
+ justifyContent="space-between"
33
+ >
34
+ <Text>Gray10</Text>
35
+ <Text>#fafafa</Text>
36
+ </Box>
37
+ <Box
38
+ as={Container}
39
+ bg="#f3f3f3"
40
+ p="8px"
41
+ display="flex"
42
+ justifyContent="space-between"
43
+ >
44
+ <Text>Gray20</Text>
45
+ <Text>#f3f3f3</Text>
46
+ </Box>
47
+ <Box
48
+ as={Container}
49
+ bg="#e3e3e3"
50
+ p="8px"
51
+ display="flex"
52
+ justifyContent="space-between"
53
+ >
54
+ <Text>Gray30</Text>
55
+ <Text>#e3e3e3</Text>
56
+ </Box>
57
+ <Box
58
+ as={Container}
59
+ bg="#cccccc"
60
+ p="8px"
61
+ display="flex"
62
+ justifyContent="space-between"
63
+ >
64
+ <Text>Gray40</Text>
65
+ <Text>#cccccc</Text>
66
+ </Box>
67
+ <Box
68
+ as={Container}
69
+ bg="#8d8d8d"
70
+ p="8px"
71
+ display="flex"
72
+ justifyContent="space-between"
73
+ >
74
+ <Text>Gray50</Text>
75
+ <Text>#8d8d8d</Text>
76
+ </Box>
77
+ <Box
78
+ as={Container}
79
+ css={{ color: 'white' }}
80
+ bg="#6d6d6d"
81
+ p="8px"
82
+ display="flex"
83
+ justifyContent="space-between"
84
+ >
85
+ <Text>Gray60</Text>
86
+ <Text>#6d6d6d</Text>
87
+ </Box>
88
+ <Box
89
+ as={Container}
90
+ css={{ color: 'white' }}
91
+ bg="#4b4b4b"
92
+ p="8px"
93
+ display="flex"
94
+ justifyContent="space-between"
95
+ >
96
+ <Text>Gray70 (Text Black)</Text>
97
+ <Text>#4b4b4b</Text>
98
+ </Box>
99
+ <Box
100
+ as={Container}
101
+ css={{ color: 'white' }}
102
+ bg="#2b2b2b"
103
+ p="8px"
104
+ display="flex"
105
+ justifyContent="space-between"
106
+ >
107
+ <Text>Gray80</Text>
108
+ <Text>#2b2b2b</Text>
109
+ </Box>
110
+ <Box
111
+ as={Container}
112
+ css={{ color: 'white' }}
113
+ bg="#0f0f0f"
114
+ p="8px"
115
+ display="flex"
116
+ justifyContent="space-between"
117
+ >
118
+ <Text>Gray90</Text>
119
+ <Text>#0f0f0f</Text>
120
+ </Box>
121
+ </Column>
122
+ <Column width={6}>
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"
132
+ >
133
+ <Text>Orange10</Text>
134
+ <Text>#fff8f1</Text>
135
+ </Box>
136
+ <Box
137
+ as={Container}
138
+ bg="#fdcca0"
139
+ p="8px"
140
+ display="flex"
141
+ justifyContent="space-between"
142
+ >
143
+ <Text>Orange20</Text>
144
+ <Text>#fdcca0</Text>
145
+ </Box>
146
+ <Box
147
+ as={Container}
148
+ bg="#f8ac67"
149
+ p="8px"
150
+ display="flex"
151
+ justifyContent="space-between"
152
+ >
153
+ <Text>Orange40</Text>
154
+ <Text>#f8ac67</Text>
155
+ </Box>
156
+ <Box
157
+ as={Container}
158
+ bg="#fa8005"
159
+ p="8px"
160
+ display="flex"
161
+ justifyContent="space-between"
162
+ >
163
+ <Text>Orange60 (Primary)</Text>
164
+ <Text>#fa8005</Text>
165
+ </Box>
166
+ <Box
167
+ as={Container}
168
+ bg="#ea5200"
169
+ p="8px"
170
+ display="flex"
171
+ justifyContent="space-between"
172
+ >
173
+ <Text>Orange70</Text>
174
+ <Text>#ea5200</Text>
175
+ </Box>
176
+ <Box
177
+ as={Container}
178
+ css={{ color: 'white' }}
179
+ bg="#ae440a"
180
+ p="8px"
181
+ display="flex"
182
+ justifyContent="space-between"
183
+ >
184
+ <Text>Orange80</Text>
185
+ <Text>#ae440a</Text>
186
+ </Box>
187
+ </Column>
188
+ </Columns>
189
+ <Columns space={16}>
190
+ <Column width={6}>
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"
200
+ >
201
+ <Text>Blue10</Text>
202
+ <Text>#e8f4fa</Text>
203
+ </Box>
204
+ <Box
205
+ as={Container}
206
+ bg="#c1f0fc"
207
+ p="8px"
208
+ display="flex"
209
+ justifyContent="space-between"
210
+ >
211
+ <Text>Blue20</Text>
212
+ <Text>#c1f0fc</Text>
213
+ </Box>
214
+ <Box
215
+ as={Container}
216
+ bg="#67dfff"
217
+ p="8px"
218
+ display="flex"
219
+ justifyContent="space-between"
220
+ >
221
+ <Text>Blue40</Text>
222
+ <Text>#67dfff</Text>
223
+ </Box>
224
+ <Box
225
+ as={Container}
226
+ bg="#3ab3d5"
227
+ p="8px"
228
+ display="flex"
229
+ justifyContent="space-between"
230
+ >
231
+ <Text>Blue60</Text>
232
+ <Text>#3ab3d5</Text>
233
+ </Box>
234
+ <Box
235
+ as={Container}
236
+ css={{ color: 'white' }}
237
+ bg="#1d67b6"
238
+ p="8px"
239
+ display="flex"
240
+ justifyContent="space-between"
241
+ >
242
+ <Text>Blue70</Text>
243
+ <Text>#1d67b6</Text>
244
+ </Box>
245
+ <Box
246
+ as={Container}
247
+ css={{ color: 'white' }}
248
+ bg="#fafafa"
249
+ p="8px"
250
+ display="flex"
251
+ justifyContent="space-between"
252
+ >
253
+ <Text>Blue80</Text>
254
+ <Text>#0c3a6b</Text>
255
+ </Box>
256
+ </Column>
257
+ <Column width={6}>
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"
267
+ >
268
+ <Text>Green10</Text>
269
+ <Text>#f9fed0</Text>
270
+ </Box>
271
+ <Box
272
+ as={Container}
273
+ bg="#e8f57b"
274
+ p="8px"
275
+ display="flex"
276
+ justifyContent="space-between"
277
+ >
278
+ <Text>Green20</Text>
279
+ <Text>#e8f57b</Text>
280
+ </Box>
281
+ <Box
282
+ as={Container}
283
+ bg="#bacb2a"
284
+ p="8px"
285
+ display="flex"
286
+ justifyContent="space-between"
287
+ >
288
+ <Text>Green40</Text>
289
+ <Text>#bacb2a</Text>
290
+ </Box>
291
+ <Box
292
+ as={Container}
293
+ bg="#8bbd26"
294
+ p="8px"
295
+ display="flex"
296
+ justifyContent="space-between"
297
+ >
298
+ <Text>Green60</Text>
299
+ <Text>#8bbd26</Text>
300
+ </Box>
301
+ <Box
302
+ as={Container}
303
+ bg="#44a112"
304
+ p="8px"
305
+ display="flex"
306
+ justifyContent="space-between"
307
+ >
308
+ <Text>Green70</Text>
309
+ <Text>#44a112</Text>
310
+ </Box>
311
+ <Box
312
+ as={Container}
313
+ css={{ color: 'white' }}
314
+ bg="#215107"
315
+ p="8px"
316
+ display="flex"
317
+ justifyContent="space-between"
318
+ >
319
+ <Text>Green80</Text>
320
+ <Text>#215107</Text>
321
+ </Box>
322
+ </Column>
323
+ </Columns>
324
+ <Columns space={16}>
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"
335
+ >
336
+ <Text>Red10</Text>
337
+ <Text>#fff8f8</Text>
338
+ </Box>
339
+ <Box
340
+ as={Container}
341
+ bg="#fec8c9"
342
+ p="8px"
343
+ display="flex"
344
+ justifyContent="space-between"
345
+ >
346
+ <Text>Red20</Text>
347
+ <Text>#fec8c9</Text>
348
+ </Box>
349
+ <Box
350
+ as={Container}
351
+ bg="#f38a8a"
352
+ p="8px"
353
+ display="flex"
354
+ justifyContent="space-between"
355
+ >
356
+ <Text>Red40</Text>
357
+ <Text>#f38a8a</Text>
358
+ </Box>
359
+ <Box
360
+ as={Container}
361
+ bg="#dd4142"
362
+ p="8px"
363
+ display="flex"
364
+ justifyContent="space-between"
365
+ >
366
+ <Text>Red60</Text>
367
+ <Text>#dd4142</Text>
368
+ </Box>
369
+ <Box
370
+ as={Container}
371
+ css={{ color: 'white' }}
372
+ bg="#8b0027"
373
+ p="8px"
374
+ display="flex"
375
+ justifyContent="space-between"
376
+ >
377
+ <Text>Red70</Text>
378
+ <Text>#8b0027</Text>
379
+ </Box>
380
+ <Box
381
+ as={Container}
382
+ css={{ color: 'white' }}
383
+ bg="#4d0419"
384
+ p="8px"
385
+ display="flex"
386
+ justifyContent="space-between"
387
+ >
388
+ <Text>Red80</Text>
389
+ <Text>#4d0419</Text>
390
+ </Box>
391
+ </Column>
392
+ </Columns>
296
393
  </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>
375
- </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>
394
+ </Canvas>
395
+
396
+ ## Unicorn Theme
397
+
398
+ <Canvas>
399
+ <Story name="Unicorn Theme">
400
+ <Columns space={16}>
401
+ <Column width={6}>
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"
412
+ >
413
+ <Text>Text</Text>
414
+ <Text>#070708</Text>
415
+ </Box>
416
+ <Box
417
+ as={Container}
418
+ bg="#fdfcfd"
419
+ p="8px"
420
+ display="flex"
421
+ justifyContent="space-between"
422
+ >
423
+ <Text>Background</Text>
424
+ <Text>#fdfcfd</Text>
425
+ </Box>
426
+ <Box
427
+ as={Container}
428
+ bg="#c9b1ff"
429
+ p="8px"
430
+ display="flex"
431
+ justifyContent="space-between"
432
+ >
433
+ <Text>Primary</Text>
434
+ <Text>#c9b1ff</Text>
435
+ </Box>
436
+ <Box
437
+ as={Container}
438
+ bg="#ffcaf2"
439
+ p="8px"
440
+ display="flex"
441
+ justifyContent="space-between"
442
+ >
443
+ <Text>Secondary</Text>
444
+ <Text>#ffcaf2</Text>
445
+ </Box>
446
+ <Box
447
+ as={Container}
448
+ bg="#e9e7eb"
449
+ p="8px"
450
+ display="flex"
451
+ justifyContent="space-between"
452
+ >
453
+ <Text>Disabled</Text>
454
+ <Text>#e9e7eb</Text>
455
+ </Box>
456
+ <Box
457
+ as={Container}
458
+ bg="#ffb2b1"
459
+ p="8px"
460
+ display="flex"
461
+ justifyContent="space-between"
462
+ >
463
+ <Text>Error</Text>
464
+ <Text>#ffb2b1</Text>
465
+ </Box>
466
+ <Box
467
+ as={Container}
468
+ bg="#fff3ad"
469
+ p="8px"
470
+ display="flex"
471
+ justifyContent="space-between"
472
+ >
473
+ <Text>Warning</Text>
474
+ <Text>#fff3ad</Text>
475
+ </Box>
476
+ <Box
477
+ as={Container}
478
+ bg="#a2edff"
479
+ p="8px"
480
+ display="flex"
481
+ justifyContent="space-between"
482
+ >
483
+ <Text>Info</Text>
484
+ <Text>#a2edff</Text>
485
+ </Box>
486
+ <Box
487
+ as={Container}
488
+ bg="#bcffbc"
489
+ p="8px"
490
+ display="flex"
491
+ justifyContent="space-between"
492
+ >
493
+ <Text>Success</Text>
494
+ <Text>#bcffbc</Text>
495
+ </Box>
496
+ </Column>
497
+ </Columns>
454
498
  </Story>
455
- </Preview>
499
+ </Canvas>