@sproutsocial/racine 9.1.0-token-beta.0 → 9.1.1-theme-extension.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 (64) hide show
  1. package/CHANGELOG.md +0 -28
  2. package/__flow__/Breadcrumb/styles.js +5 -0
  3. package/__flow__/Button/styles.js +1 -1
  4. package/__flow__/Card/index.stories.js +1 -0
  5. package/__flow__/Card/styles.js +1 -1
  6. package/__flow__/CustomThemeProvider/index.js +16 -0
  7. package/__flow__/Drawer/index.stories.js +3 -3
  8. package/__flow__/Drawer/styles.js +1 -1
  9. package/__flow__/KeyboardKey/styles.js +1 -1
  10. package/__flow__/Menu/index.stories.js +1 -1
  11. package/__flow__/Modal/__snapshots__/index.test.js.snap +1 -1
  12. package/__flow__/Modal/styles.js +1 -1
  13. package/__flow__/Popout/index.js +1 -1
  14. package/__flow__/ThemeProvider/index.js +2 -2
  15. package/__flow__/Token/index.js +1 -4
  16. package/__flow__/Token/index.stories.js +0 -11
  17. package/__flow__/Token/styles.js +33 -43
  18. package/__flow__/Tooltip/index.js +1 -1
  19. package/__flow__/index.js +1 -0
  20. package/__flow__/themes/dark/theme.js +156 -180
  21. package/__flow__/themes/default/theme.js +8 -19
  22. package/__flow__/themes/sprout/theme.js +22 -0
  23. package/__flow__/types/system-props.flow.js +2 -1
  24. package/__flow__/utils/extendTheme.js +17 -0
  25. package/commonjs/Breadcrumb/styles.js +1 -1
  26. package/commonjs/Button/styles.js +1 -1
  27. package/commonjs/Card/styles.js +1 -1
  28. package/commonjs/CustomThemeProvider/index.js +23 -0
  29. package/commonjs/Drawer/styles.js +1 -1
  30. package/commonjs/KeyboardKey/styles.js +1 -1
  31. package/commonjs/Modal/styles.js +1 -1
  32. package/commonjs/Popout/index.js +1 -1
  33. package/commonjs/Token/index.js +2 -5
  34. package/commonjs/Token/styles.js +50 -19
  35. package/commonjs/Tooltip/index.js +1 -1
  36. package/commonjs/index.js +5 -1
  37. package/commonjs/themes/dark/theme.js +154 -179
  38. package/commonjs/themes/default/theme.js +8 -19
  39. package/commonjs/themes/sprout/theme.js +29 -0
  40. package/commonjs/utils/extendTheme.js +22 -0
  41. package/lib/Breadcrumb/styles.js +1 -1
  42. package/lib/Button/styles.js +1 -1
  43. package/lib/Card/styles.js +1 -1
  44. package/lib/CustomThemeProvider/index.js +12 -0
  45. package/lib/Drawer/styles.js +1 -1
  46. package/lib/KeyboardKey/styles.js +1 -1
  47. package/lib/Modal/styles.js +1 -1
  48. package/lib/Popout/index.js +1 -1
  49. package/lib/Token/index.js +2 -5
  50. package/lib/Token/styles.js +50 -19
  51. package/lib/Tooltip/index.js +1 -1
  52. package/lib/index.js +1 -0
  53. package/lib/themes/dark/theme.js +153 -174
  54. package/lib/themes/default/theme.js +8 -18
  55. package/lib/themes/sprout/theme.js +19 -0
  56. package/lib/utils/extendTheme.js +12 -0
  57. package/package.json +9 -6
  58. package/__flow__/themes/_themes.scss +0 -138
  59. package/__flow__/themes/utils/interact.js +0 -12
  60. package/commonjs/themes/utils/interact.js +0 -19
  61. package/dist/themes/_themes.scss +0 -138
  62. package/dist/themes/dark.scss +0 -601
  63. package/dist/themes/default.scss +0 -692
  64. package/lib/themes/utils/interact.js +0 -13
@@ -1,601 +0,0 @@
1
- $dark: (
2
- __esModule: true,
3
- shadows: (
4
- low: 0px 2px 4px rgba(39,51,51,.24) #040404FF,
5
- medium: 0px 8px 16px rgba(39,51,51,.24) #040404FF,
6
- high: 0px 16px 32px rgba(39,51,51,.24) #040404FF
7
- ),
8
- default: (
9
- utils: (
10
-
11
- ),
12
- breakpoints: (900px, 1200px, 1500px, 1800px),
13
- colors: (
14
- app: (
15
- background: (
16
- base: #162020
17
- )
18
- ),
19
- container: (
20
- background: (
21
- base: #273333,
22
- success: #006b40,
23
- warning: #944c0c,
24
- error: #992222,
25
- info: #0c5689,
26
- opportunity: #5e4eba,
27
- danger: #992222,
28
- decorative: (
29
- green: #006b40,
30
- blue: #0c5689,
31
- purple: #5e4eba,
32
- yellow: #944c0c,
33
- orange: #962c0b,
34
- red: #992222,
35
- neutral: #273333
36
- ),
37
- selected: #FFFFFF
38
- ),
39
- border: (
40
- base: #040404,
41
- success: #59cb59,
42
- warning: #ffbc00,
43
- error: #ed4c42,
44
- danger: #ed4c42,
45
- info: #2b87d3,
46
- opportunity: #9180f4,
47
- decorative: (
48
- green: #59cb59,
49
- blue: #2b87d3,
50
- purple: #9180f4,
51
- yellow: #ffbc00,
52
- orange: #f57d33,
53
- red: #ed4c42,
54
- neutral: #929a9b
55
- ),
56
- selected: #FFFFFF
57
- )
58
- ),
59
- button: (
60
- primary: (
61
- background: (
62
- base: #56adf5,
63
- hover: #a1d2f8,
64
- active: #c7e4f9
65
- ),
66
- border: (
67
- base: transparent
68
- ),
69
- text: (
70
- base: #273333,
71
- hover: #162020
72
- )
73
- ),
74
- secondary: (
75
- background: (
76
- base: transparent,
77
- hover: #f3f4f4,
78
- active: #FFFFFF
79
- ),
80
- border: (
81
- base: #FFFFFF
82
- ),
83
- text: (
84
- base: #FFFFFF,
85
- hover: #364141
86
- )
87
- ),
88
- pill: (
89
- background: (
90
- base: transparent,
91
- hover: #162020,
92
- active: #273333
93
- ),
94
- border: (
95
- base: transparent
96
- ),
97
- text: (
98
- base: #f3f4f4,
99
- hover: #FFFFFF
100
- )
101
- ),
102
- destructive: (
103
- background: (
104
- base: #ff7f6e,
105
- hover: #ff9c8f,
106
- active: #ffb8b1
107
- ),
108
- border: (
109
- base: transparent
110
- ),
111
- text: (
112
- base: #273333,
113
- hover: #162020
114
- )
115
- ),
116
- placeholder: (
117
- background: (
118
- base: transparent,
119
- hover: #040404,
120
- active: #040404
121
- ),
122
- border: (
123
- base: #929a9b
124
- ),
125
- text: (
126
- base: #56adf5,
127
- hover: #a1d2f8
128
- )
129
- ),
130
- unstyled: (
131
- background: (
132
- base: transparent
133
- ),
134
- border: (
135
- base: transparent
136
- ),
137
- text: (
138
- base: #c8cccc,
139
- hover: #dee1e1
140
- )
141
- )
142
- ),
143
- link: (
144
- base: #56adf5,
145
- hover: #a1d2f8
146
- ),
147
- text: (
148
- headline: #FFFFFF,
149
- subtext: #c8cccc,
150
- body: #f3f4f4,
151
- inverse: #273333,
152
- error: #ff7f6e
153
- ),
154
- icon: (
155
- base: #f3f4f4,
156
- inverse: #273333,
157
- success: #d7f4d7,
158
- warning: #fdefcd,
159
- error: #ffd5d2,
160
- danger: #ffd5d2,
161
- info: #dcf2ff,
162
- opportunity: #eaeaf9
163
- ),
164
- form: (
165
- background: (
166
- base: #273333,
167
- selected: #FFFFFF
168
- ),
169
- border: (
170
- base: #929a9b,
171
- error: #ed4c42,
172
- warning: #ffbc00,
173
- selected: #FFFFFF
174
- ),
175
- placeholder: (
176
- base: #929a9b
177
- )
178
- ),
179
- listItem: (
180
- background: (
181
- base: transparent,
182
- hover: #364141,
183
- selected: #FFFFFF
184
- )
185
- ),
186
- elevation: (
187
- base: #040404
188
- ),
189
- network: (
190
- twitter: #1da1f2,
191
- twitter_like: #e0245e,
192
- facebook: #217bee,
193
- facebook_audience_network: #58409B,
194
- linkedin: #0A66C2,
195
- instagram: #e4405f,
196
- feedly: #2bb24c,
197
- analytics: #ef6c00,
198
- youtube: #ff0000,
199
- messenger: #0084ff,
200
- snapchat: #fffc00,
201
- pinterest: #E60023,
202
- tumblr: #35465c,
203
- reddit: #ff4500,
204
- tripadvisor: #00B087,
205
- glassdoor: #0CAA41,
206
- google_my_business: #4285F4,
207
- google_business_messages: #1A73EA,
208
- salesforce: #1589EE,
209
- zendesk: #03363D,
210
- hubspot: #FF7A59,
211
- microsoft_dynamics: #002050,
212
- yelp: #FF1A1A,
213
- whatsapp: #25D366,
214
- tiktok: #000000
215
- ),
216
- dataviz: (
217
- map: (
218
- 1: #24e0c5,
219
- 2: #a193f2,
220
- 3: #ff76ae,
221
- 4: #ffcd1c,
222
- 5: #56adf5,
223
- 6: #f282f5,
224
- 7: #75dd66,
225
- 8: #ff9c5d,
226
- 9: #db3e3e,
227
- 10: #0b968f,
228
- 11: #6f5ed3,
229
- 12: #ce3665,
230
- 13: #ba7506,
231
- 14: #2079c3,
232
- 15: #ac44a8,
233
- 16: #0ca750,
234
- 17: #ed7024,
235
- 18: #ff7f6e,
236
- 19: #c2f2bd,
237
- 20: #ffe99a
238
- ),
239
- list: (#24e0c5, #a193f2, #ff76ae, #ffcd1c, #56adf5, #f282f5, #75dd66, #ff9c5d, #db3e3e, #0b968f, #6f5ed3, #ce3665, #ba7506, #2079c3, #ac44a8, #0ca750, #ed7024, #ff7f6e, #c2f2bd, #ffe99a)
240
- ),
241
- neutral: (
242
- 0: #FFFFFF,
243
- 100: #f3f4f4,
244
- 200: #dee1e1,
245
- 300: #c8cccc,
246
- 400: #b0b6b7,
247
- 500: #929a9b,
248
- 600: #6e797a,
249
- 700: #515e5f,
250
- 800: #364141,
251
- 900: #273333,
252
- 1000: #162020
253
- ),
254
- green: (
255
- 0: #ebf9eb,
256
- 100: #d7f4d7,
257
- 200: #c2f2bd,
258
- 300: #98e58e,
259
- 400: #75dd66,
260
- 500: #59cb59,
261
- 600: #2bb656,
262
- 700: #0ca750,
263
- 800: #008b46,
264
- 900: #006b40,
265
- 1000: #08422f,
266
- 1100: #002b20
267
- ),
268
- red: (
269
- 0: #ffeae9,
270
- 100: #ffd5d2,
271
- 200: #ffb8b1,
272
- 300: #ff9c8f,
273
- 400: #ff7f6e,
274
- 500: #f76054,
275
- 600: #ed4c42,
276
- 700: #db3e3e,
277
- 800: #c63434,
278
- 900: #992222,
279
- 1000: #6d1313
280
- ),
281
- blue: (
282
- 0: #e9f8ff,
283
- 100: #dcf2ff,
284
- 200: #c7e4f9,
285
- 300: #a1d2f8,
286
- 400: #56adf5,
287
- 500: #3896e3,
288
- 600: #2b87d3,
289
- 700: #2079c3,
290
- 800: #116daa,
291
- 900: #0c5689,
292
- 1000: #0a3960,
293
- 1100: #002138
294
- ),
295
- teal: (
296
- 0: #e5f9f5,
297
- 100: #cdf7ef,
298
- 200: #b3f2e6,
299
- 300: #7dead5,
300
- 400: #24e0c5,
301
- 500: #08c4b2,
302
- 600: #00a99c,
303
- 700: #0b968f,
304
- 800: #067c7c,
305
- 900: #026661,
306
- 1000: #083f3f,
307
- 1100: #002528
308
- ),
309
- aqua: (
310
- 0: #d9fcfb,
311
- 100: #c5f9f9,
312
- 200: #a5f2f2,
313
- 300: #76e5e2,
314
- 400: #33d6e2,
315
- 500: #17b8ce,
316
- 600: #0797ae,
317
- 700: #0b8599,
318
- 800: #0f6e84,
319
- 900: #035e73,
320
- 1000: #083d4f,
321
- 1100: #002838
322
- ),
323
- purple: (
324
- 0: #f2f2f9,
325
- 100: #eaeaf9,
326
- 200: #d8d7f9,
327
- 300: #c1c1f7,
328
- 400: #a193f2,
329
- 500: #9180f4,
330
- 600: #816fea,
331
- 700: #6f5ed3,
332
- 800: #5e4eba,
333
- 900: #483a9c,
334
- 1000: #2d246b,
335
- 1100: #1d1d38
336
- ),
337
- magenta: (
338
- 0: #fef0ff,
339
- 100: #f9e3fc,
340
- 200: #f4c4f7,
341
- 300: #edadf2,
342
- 400: #f282f5,
343
- 500: #db61db,
344
- 600: #c44eb9,
345
- 700: #ac44a8,
346
- 800: #8f3896,
347
- 900: #6c2277,
348
- 1000: #451551,
349
- 1100: #29192d
350
- ),
351
- yellow: (
352
- 0: #fff8e2,
353
- 100: #fdefcd,
354
- 200: #ffe99a,
355
- 300: #ffe16e,
356
- 400: #ffd943,
357
- 500: #ffcd1c,
358
- 600: #ffbc00,
359
- 700: #dd9903,
360
- 800: #ba7506,
361
- 900: #944c0c,
362
- 1000: #542a00,
363
- 1100: #2d1a05
364
- ),
365
- pink: (
366
- 0: #ffe9f3,
367
- 100: #fcdbeb,
368
- 200: #ffb5d5,
369
- 300: #ff95c1,
370
- 400: #ff76ae,
371
- 500: #ef588b,
372
- 600: #e0447c,
373
- 700: #ce3665,
374
- 800: #b22f5b,
375
- 900: #931847,
376
- 1000: #561231,
377
- 1100: #2b1721
378
- ),
379
- orange: (
380
- 0: #ffede3,
381
- 100: #fcdccc,
382
- 200: #ffc6a4,
383
- 300: #ffb180,
384
- 400: #ff9c5d,
385
- 500: #fc8943,
386
- 600: #f57d33,
387
- 700: #ed7024,
388
- 800: #ce5511,
389
- 900: #962c0b,
390
- 1000: #601700,
391
- 1100: #2d130e
392
- ),
393
- DATAVIZ_COLORS_LIST: (#24e0c5, #a193f2, #ff76ae, #ffcd1c, #56adf5, #f282f5, #75dd66, #ff9c5d, #db3e3e, #0b968f, #6f5ed3, #ce3665, #ba7506, #2079c3, #ac44a8, #0ca750, #ed7024, #ff7f6e, #c2f2bd, #ffe99a),
394
- DATAVIZ_COLORS_MAP: (
395
- 1: #24e0c5,
396
- 2: #a193f2,
397
- 3: #ff76ae,
398
- 4: #ffcd1c,
399
- 5: #56adf5,
400
- 6: #f282f5,
401
- 7: #75dd66,
402
- 8: #ff9c5d,
403
- 9: #db3e3e,
404
- 10: #0b968f,
405
- 11: #6f5ed3,
406
- 12: #ce3665,
407
- 13: #ba7506,
408
- 14: #2079c3,
409
- 15: #ac44a8,
410
- 16: #0ca750,
411
- 17: #ed7024,
412
- 18: #ff7f6e,
413
- 19: #c2f2bd,
414
- 20: #ffe99a
415
- ),
416
- utils: (
417
-
418
- )
419
- ),
420
- typography: (
421
- 100: (
422
- fontSize: 11px,
423
- lineHeight: 18.666666666666668px
424
- ),
425
- 200: (
426
- fontSize: 13px,
427
- lineHeight: 21.333333333333332px
428
- ),
429
- 300: (
430
- fontSize: 16px,
431
- lineHeight: 24px
432
- ),
433
- 400: (
434
- fontSize: 18px,
435
- lineHeight: 26.666666666666668px
436
- ),
437
- 500: (
438
- fontSize: 21px,
439
- lineHeight: 29.333333333333332px
440
- ),
441
- 600: (
442
- fontSize: 24px,
443
- lineHeight: 32px
444
- ),
445
- 700: (
446
- fontSize: 32px,
447
- lineHeight: 40px
448
- ),
449
- 800: (
450
- fontSize: 43px,
451
- lineHeight: 50.666666666666664px
452
- ),
453
- 900: (
454
- fontSize: 57px,
455
- lineHeight: 64px
456
- ),
457
- 1000: (
458
- fontSize: 76px,
459
- lineHeight: 80px
460
- ),
461
- 1100: (
462
- fontSize: 101px,
463
- lineHeight: 101.33333333333333px
464
- ),
465
- 1200: (
466
- fontSize: 135px,
467
- lineHeight: 125.33333333333333px
468
- ),
469
- typography: (
470
- 100: (
471
- fontSize: 11px,
472
- lineHeight: 18.666666666666668px
473
- ),
474
- 200: (
475
- fontSize: 13px,
476
- lineHeight: 21.333333333333332px
477
- ),
478
- 300: (
479
- fontSize: 16px,
480
- lineHeight: 24px
481
- ),
482
- 400: (
483
- fontSize: 18px,
484
- lineHeight: 26.666666666666668px
485
- ),
486
- 500: (
487
- fontSize: 21px,
488
- lineHeight: 29.333333333333332px
489
- ),
490
- 600: (
491
- fontSize: 24px,
492
- lineHeight: 32px
493
- ),
494
- 700: (
495
- fontSize: 32px,
496
- lineHeight: 40px
497
- ),
498
- 800: (
499
- fontSize: 43px,
500
- lineHeight: 50.666666666666664px
501
- ),
502
- 900: (
503
- fontSize: 57px,
504
- lineHeight: 64px
505
- ),
506
- 1000: (
507
- fontSize: 76px,
508
- lineHeight: 80px
509
- ),
510
- 1100: (
511
- fontSize: 101px,
512
- lineHeight: 101.33333333333333px
513
- ),
514
- 1200: (
515
- fontSize: 135px,
516
- lineHeight: 125.33333333333333px
517
- )
518
- )
519
- ),
520
- fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif",
521
- fontWeights: (
522
- normal: 400,
523
- semibold: 600,
524
- bold: 700,
525
- extrabold: 800
526
- ),
527
- space: (
528
- 0: 0px,
529
- 100: 2px,
530
- 200: 4px,
531
- 300: 8px,
532
- 350: 12px,
533
- 400: 16px,
534
- 450: 24px,
535
- 500: 32px,
536
- 600: 40px,
537
- space: (
538
- 0: 0px,
539
- 100: 2px,
540
- 200: 4px,
541
- 300: 8px,
542
- 350: 12px,
543
- 400: 16px,
544
- 450: 24px,
545
- 500: 32px,
546
- 600: 40px
547
- ),
548
- -space: (
549
- 0: -0px,
550
- 100: -2px,
551
- 200: -4px,
552
- 300: -8px,
553
- 350: -12px,
554
- 400: -16px,
555
- 450: -24px,
556
- 500: -32px,
557
- 600: -40px
558
- )
559
- ),
560
- radii: (
561
- 400: 4px,
562
- 500: 6px,
563
- 600: 8px,
564
- 1000: 999999px,
565
- inner: 6px,
566
- outer: 8px,
567
- pill: 999999px,
568
- radii: (
569
- 400: 4px,
570
- 500: 6px,
571
- 600: 8px,
572
- 1000: 999999px,
573
- inner: 6px,
574
- outer: 8px,
575
- pill: 999999px
576
- )
577
- ),
578
- borders: (
579
- 500: 1px solid
580
- ),
581
- borderWidths: (
582
- 500: 1px
583
- ),
584
- shadows: (
585
- low: 0px 2px 4px rgba(39,51,51,.24) #040404FF,
586
- medium: 0px 8px 16px rgba(39,51,51,.24) #040404FF,
587
- high: 0px 16px 32px rgba(39,51,51,.24) #040404FF
588
- ),
589
- easing: (
590
- ease_in: cubic-bezier(.4, 0, .7, .2),
591
- ease_out: cubic-bezier(0, 0, .2, 1),
592
- ease_inout: cubic-bezier(.4, 0, .2, 1)
593
- ),
594
- duration: (
595
- fast: .15s,
596
- medium: .3s,
597
- slow: .6s
598
- ),
599
- mode: default-dark
600
- )
601
- );