@sproutsocial/racine 8.6.3 → 8.7.1

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # Change Log
2
2
 
3
+ ## 8.7.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 1cf97da: Remove font weight rule from Breadcrumbs styles
8
+
9
+ ## 8.7.0
10
+
11
+ ### Minor Changes
12
+
13
+ - bcfb6eb: Export themes as scss variables
14
+
3
15
  ## 8.6.3
4
16
 
5
17
  ### Patch Changes
@@ -42,11 +42,6 @@ const Nav: StyledComponent<{ ... }, TypeTheme, *> = styled.nav`
42
42
  font-weight: bold;
43
43
  }
44
44
 
45
- li:not(:last-child) a,
46
- li:not(:last-child) button {
47
- font-weight: normal;
48
- }
49
-
50
45
  li:not(:last-child)::after {
51
46
  content: "/";
52
47
  color: ${(props) => props.theme.colors.text.body};
@@ -189,6 +189,10 @@ const darkTheme = {
189
189
  selected: COLORS.COLOR_NEUTRAL_0,
190
190
  },
191
191
  },
192
+ dataviz: {
193
+ map: datavizPalette.DATAVIZ_COLORS_MAP,
194
+ list: datavizPalette.DATAVIZ_COLORS_LIST,
195
+ },
192
196
  ...datavizPalette,
193
197
  },
194
198
  mode: "dark",
@@ -223,6 +223,10 @@ const colors = {
223
223
  whatsapp: NETWORKCOLORS.NETWORK_COLOR_WHATSAPP,
224
224
  tiktok: NETWORKCOLORS.NETWORK_COLOR_TIKTOK,
225
225
  },
226
+ dataviz: {
227
+ map: datavizPalette.DATAVIZ_COLORS_MAP,
228
+ list: datavizPalette.DATAVIZ_COLORS_LIST,
229
+ },
226
230
  ...literalColors,
227
231
  ...datavizPalette,
228
232
  };
@@ -10,7 +10,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
10
10
  var Nav = _styledComponents.default.nav.withConfig({
11
11
  displayName: "styles__Nav",
12
12
  componentId: "sc-1ub1apc-0"
13
- })(["ol{", ";margin:0;font-family:", ";padding:0;display:flex;}li{margin-right:", ";display:flex;}a,button{", ";max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&:not(.overflow--menu){margin:0;padding:0;}}ol > div + li::before{content:\"/\";margin-right:", ";}li:last-child a,li:last-child button{color:", ";font-weight:bold;}li:not(:last-child) a,li:not(:last-child) button{font-weight:normal;}li:not(:last-child)::after{content:\"/\";color:", ";margin-left:", ";}"], function (props) {
13
+ })(["ol{", ";margin:0;font-family:", ";padding:0;display:flex;}li{margin-right:", ";display:flex;}a,button{", ";max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&:not(.overflow--menu){margin:0;padding:0;}}ol > div + li::before{content:\"/\";margin-right:", ";}li:last-child a,li:last-child button{color:", ";font-weight:bold;}li:not(:last-child)::after{content:\"/\";color:", ";margin-left:", ";}"], function (props) {
14
14
  return props.theme.typography[200];
15
15
  }, function (props) {
16
16
  return props.theme.fontFamily;
@@ -188,6 +188,10 @@ var darkTheme = _extends({}, _theme.default, {
188
188
  hover: _seedsColor.default.COLOR_NEUTRAL_800,
189
189
  selected: _seedsColor.default.COLOR_NEUTRAL_0
190
190
  }
191
+ },
192
+ dataviz: {
193
+ map: _datavizPalette.datavizPalette.DATAVIZ_COLORS_MAP,
194
+ list: _datavizPalette.datavizPalette.DATAVIZ_COLORS_LIST
191
195
  }
192
196
  }, _datavizPalette.datavizPalette),
193
197
  mode: "dark"
@@ -229,6 +229,10 @@ var colors = _extends({
229
229
  yelp: _seedsNetworkcolor.default.NETWORK_COLOR_YELP,
230
230
  whatsapp: _seedsNetworkcolor.default.NETWORK_COLOR_WHATSAPP,
231
231
  tiktok: _seedsNetworkcolor.default.NETWORK_COLOR_TIKTOK
232
+ },
233
+ dataviz: {
234
+ map: _datavizPalette.datavizPalette.DATAVIZ_COLORS_MAP,
235
+ list: _datavizPalette.datavizPalette.DATAVIZ_COLORS_LIST
232
236
  }
233
237
  }, _literalColors.default, _datavizPalette.datavizPalette);
234
238
 
@@ -0,0 +1,594 @@
1
+ $dark: (
2
+ __esModule: true,
3
+ default: (
4
+ breakpoints: (900px, 1200px, 1500px, 1800px),
5
+ colors: (
6
+ app: (
7
+ background: (
8
+ base: #162020
9
+ )
10
+ ),
11
+ container: (
12
+ background: (
13
+ base: #273333,
14
+ success: #006b40,
15
+ warning: #944c0c,
16
+ error: #992222,
17
+ info: #0c5689,
18
+ opportunity: #5e4eba,
19
+ danger: #992222,
20
+ decorative: (
21
+ green: #006b40,
22
+ blue: #0c5689,
23
+ purple: #5e4eba,
24
+ yellow: #944c0c,
25
+ orange: #962c0b,
26
+ red: #992222,
27
+ neutral: #273333
28
+ ),
29
+ selected: #FFFFFF
30
+ ),
31
+ border: (
32
+ base: #040404,
33
+ success: #59cb59,
34
+ warning: #ffbc00,
35
+ error: #ed4c42,
36
+ danger: #ed4c42,
37
+ info: #2b87d3,
38
+ opportunity: #9180f4,
39
+ decorative: (
40
+ green: #59cb59,
41
+ blue: #2b87d3,
42
+ purple: #9180f4,
43
+ yellow: #ffbc00,
44
+ orange: #f57d33,
45
+ red: #ed4c42,
46
+ neutral: #929a9b
47
+ ),
48
+ selected: #FFFFFF
49
+ )
50
+ ),
51
+ button: (
52
+ primary: (
53
+ background: (
54
+ base: #56adf5,
55
+ hover: #a1d2f8,
56
+ active: #c7e4f9
57
+ ),
58
+ border: (
59
+ base: transparent
60
+ ),
61
+ text: (
62
+ base: #273333,
63
+ hover: #162020
64
+ )
65
+ ),
66
+ secondary: (
67
+ background: (
68
+ base: transparent,
69
+ hover: #f3f4f4,
70
+ active: #FFFFFF
71
+ ),
72
+ border: (
73
+ base: #FFFFFF
74
+ ),
75
+ text: (
76
+ base: #FFFFFF,
77
+ hover: #364141
78
+ )
79
+ ),
80
+ pill: (
81
+ background: (
82
+ base: transparent,
83
+ hover: #162020,
84
+ active: #273333
85
+ ),
86
+ border: (
87
+ base: transparent
88
+ ),
89
+ text: (
90
+ base: #f3f4f4,
91
+ hover: #FFFFFF
92
+ )
93
+ ),
94
+ destructive: (
95
+ background: (
96
+ base: #ff7f6e,
97
+ hover: #ff9c8f,
98
+ active: #ffb8b1
99
+ ),
100
+ border: (
101
+ base: transparent
102
+ ),
103
+ text: (
104
+ base: #273333,
105
+ hover: #162020
106
+ )
107
+ ),
108
+ placeholder: (
109
+ background: (
110
+ base: transparent,
111
+ hover: #040404,
112
+ active: #040404
113
+ ),
114
+ border: (
115
+ base: #929a9b
116
+ ),
117
+ text: (
118
+ base: #56adf5,
119
+ hover: #a1d2f8
120
+ )
121
+ ),
122
+ unstyled: (
123
+ background: (
124
+ base: transparent
125
+ ),
126
+ border: (
127
+ base: transparent
128
+ ),
129
+ text: (
130
+ base: #c8cccc,
131
+ hover: #dee1e1
132
+ )
133
+ )
134
+ ),
135
+ link: (
136
+ base: #56adf5,
137
+ hover: #a1d2f8
138
+ ),
139
+ text: (
140
+ headline: #FFFFFF,
141
+ subtext: #c8cccc,
142
+ body: #f3f4f4,
143
+ inverse: #273333,
144
+ error: #ff7f6e
145
+ ),
146
+ icon: (
147
+ base: #f3f4f4,
148
+ inverse: #273333,
149
+ success: #d7f4d7,
150
+ warning: #fdefcd,
151
+ error: #ffd5d2,
152
+ danger: #ffd5d2,
153
+ info: #dcf2ff,
154
+ opportunity: #eaeaf9
155
+ ),
156
+ form: (
157
+ background: (
158
+ base: #273333,
159
+ selected: #FFFFFF
160
+ ),
161
+ border: (
162
+ base: #929a9b,
163
+ error: #ed4c42,
164
+ warning: #ffbc00,
165
+ selected: #FFFFFF
166
+ ),
167
+ placeholder: (
168
+ base: #929a9b
169
+ )
170
+ ),
171
+ listItem: (
172
+ background: (
173
+ base: transparent,
174
+ hover: #364141,
175
+ selected: #FFFFFF
176
+ )
177
+ ),
178
+ network: (
179
+ twitter: #1da1f2,
180
+ twitter_like: #e0245e,
181
+ facebook: #217bee,
182
+ facebook_audience_network: #58409B,
183
+ linkedin: #0A66C2,
184
+ instagram: #e4405f,
185
+ feedly: #2bb24c,
186
+ analytics: #ef6c00,
187
+ youtube: #ff0000,
188
+ messenger: #0084ff,
189
+ snapchat: #fffc00,
190
+ pinterest: #E60023,
191
+ tumblr: #35465c,
192
+ reddit: #ff4500,
193
+ tripadvisor: #00B087,
194
+ glassdoor: #0CAA41,
195
+ google_my_business: #4285F4,
196
+ google_business_messages: #1A73EA,
197
+ salesforce: #1589EE,
198
+ zendesk: #03363D,
199
+ hubspot: #FF7A59,
200
+ microsoft_dynamics: #002050,
201
+ yelp: #FF1A1A,
202
+ whatsapp: #25D366,
203
+ tiktok: #000000
204
+ ),
205
+ dataviz: (
206
+ map: (
207
+ 1: #24e0c5,
208
+ 2: #a193f2,
209
+ 3: #ff76ae,
210
+ 4: #ffcd1c,
211
+ 5: #56adf5,
212
+ 6: #f282f5,
213
+ 7: #75dd66,
214
+ 8: #ff9c5d,
215
+ 9: #db3e3e,
216
+ 10: #0b968f,
217
+ 11: #6f5ed3,
218
+ 12: #ce3665,
219
+ 13: #ba7506,
220
+ 14: #2079c3,
221
+ 15: #ac44a8,
222
+ 16: #0ca750,
223
+ 17: #ed7024,
224
+ 18: #ff7f6e,
225
+ 19: #c2f2bd,
226
+ 20: #ffe99a
227
+ ),
228
+ list: (#24e0c5, #a193f2, #ff76ae, #ffcd1c, #56adf5, #f282f5, #75dd66, #ff9c5d, #db3e3e, #0b968f, #6f5ed3, #ce3665, #ba7506, #2079c3, #ac44a8, #0ca750, #ed7024, #ff7f6e, #c2f2bd, #ffe99a)
229
+ ),
230
+ neutral: (
231
+ 0: #FFFFFF,
232
+ 100: #f3f4f4,
233
+ 200: #dee1e1,
234
+ 300: #c8cccc,
235
+ 400: #b0b6b7,
236
+ 500: #929a9b,
237
+ 600: #6e797a,
238
+ 700: #515e5f,
239
+ 800: #364141,
240
+ 900: #273333,
241
+ 1000: #162020
242
+ ),
243
+ green: (
244
+ 0: #ebf9eb,
245
+ 100: #d7f4d7,
246
+ 200: #c2f2bd,
247
+ 300: #98e58e,
248
+ 400: #75dd66,
249
+ 500: #59cb59,
250
+ 600: #2bb656,
251
+ 700: #0ca750,
252
+ 800: #008b46,
253
+ 900: #006b40,
254
+ 1000: #08422f,
255
+ 1100: #002b20
256
+ ),
257
+ red: (
258
+ 0: #ffeae9,
259
+ 100: #ffd5d2,
260
+ 200: #ffb8b1,
261
+ 300: #ff9c8f,
262
+ 400: #ff7f6e,
263
+ 500: #f76054,
264
+ 600: #ed4c42,
265
+ 700: #db3e3e,
266
+ 800: #c63434,
267
+ 900: #992222,
268
+ 1000: #6d1313
269
+ ),
270
+ blue: (
271
+ 0: #e9f8ff,
272
+ 100: #dcf2ff,
273
+ 200: #c7e4f9,
274
+ 300: #a1d2f8,
275
+ 400: #56adf5,
276
+ 500: #3896e3,
277
+ 600: #2b87d3,
278
+ 700: #2079c3,
279
+ 800: #116daa,
280
+ 900: #0c5689,
281
+ 1000: #0a3960,
282
+ 1100: #002138
283
+ ),
284
+ teal: (
285
+ 0: #e5f9f5,
286
+ 100: #cdf7ef,
287
+ 200: #b3f2e6,
288
+ 300: #7dead5,
289
+ 400: #24e0c5,
290
+ 500: #08c4b2,
291
+ 600: #00a99c,
292
+ 700: #0b968f,
293
+ 800: #067c7c,
294
+ 900: #026661,
295
+ 1000: #083f3f,
296
+ 1100: #002528
297
+ ),
298
+ aqua: (
299
+ 0: #d9fcfb,
300
+ 100: #c5f9f9,
301
+ 200: #a5f2f2,
302
+ 300: #76e5e2,
303
+ 400: #33d6e2,
304
+ 500: #17b8ce,
305
+ 600: #0797ae,
306
+ 700: #0b8599,
307
+ 800: #0f6e84,
308
+ 900: #035e73,
309
+ 1000: #083d4f,
310
+ 1100: #002838
311
+ ),
312
+ purple: (
313
+ 0: #f2f2f9,
314
+ 100: #eaeaf9,
315
+ 200: #d8d7f9,
316
+ 300: #c1c1f7,
317
+ 400: #a193f2,
318
+ 500: #9180f4,
319
+ 600: #816fea,
320
+ 700: #6f5ed3,
321
+ 800: #5e4eba,
322
+ 900: #483a9c,
323
+ 1000: #2d246b,
324
+ 1100: #1d1d38
325
+ ),
326
+ magenta: (
327
+ 0: #fef0ff,
328
+ 100: #f9e3fc,
329
+ 200: #f4c4f7,
330
+ 300: #edadf2,
331
+ 400: #f282f5,
332
+ 500: #db61db,
333
+ 600: #c44eb9,
334
+ 700: #ac44a8,
335
+ 800: #8f3896,
336
+ 900: #6c2277,
337
+ 1000: #451551,
338
+ 1100: #29192d
339
+ ),
340
+ yellow: (
341
+ 0: #fff8e2,
342
+ 100: #fdefcd,
343
+ 200: #ffe99a,
344
+ 300: #ffe16e,
345
+ 400: #ffd943,
346
+ 500: #ffcd1c,
347
+ 600: #ffbc00,
348
+ 700: #dd9903,
349
+ 800: #ba7506,
350
+ 900: #944c0c,
351
+ 1000: #542a00,
352
+ 1100: #2d1a05
353
+ ),
354
+ pink: (
355
+ 0: #ffe9f3,
356
+ 100: #fcdbeb,
357
+ 200: #ffb5d5,
358
+ 300: #ff95c1,
359
+ 400: #ff76ae,
360
+ 500: #ef588b,
361
+ 600: #e0447c,
362
+ 700: #ce3665,
363
+ 800: #b22f5b,
364
+ 900: #931847,
365
+ 1000: #561231,
366
+ 1100: #2b1721
367
+ ),
368
+ orange: (
369
+ 0: #ffede3,
370
+ 100: #fcdccc,
371
+ 200: #ffc6a4,
372
+ 300: #ffb180,
373
+ 400: #ff9c5d,
374
+ 500: #fc8943,
375
+ 600: #f57d33,
376
+ 700: #ed7024,
377
+ 800: #ce5511,
378
+ 900: #962c0b,
379
+ 1000: #601700,
380
+ 1100: #2d130e
381
+ ),
382
+ DATAVIZ_COLORS_LIST: (#24e0c5, #a193f2, #ff76ae, #ffcd1c, #56adf5, #f282f5, #75dd66, #ff9c5d, #db3e3e, #0b968f, #6f5ed3, #ce3665, #ba7506, #2079c3, #ac44a8, #0ca750, #ed7024, #ff7f6e, #c2f2bd, #ffe99a),
383
+ DATAVIZ_COLORS_MAP: (
384
+ 1: #24e0c5,
385
+ 2: #a193f2,
386
+ 3: #ff76ae,
387
+ 4: #ffcd1c,
388
+ 5: #56adf5,
389
+ 6: #f282f5,
390
+ 7: #75dd66,
391
+ 8: #ff9c5d,
392
+ 9: #db3e3e,
393
+ 10: #0b968f,
394
+ 11: #6f5ed3,
395
+ 12: #ce3665,
396
+ 13: #ba7506,
397
+ 14: #2079c3,
398
+ 15: #ac44a8,
399
+ 16: #0ca750,
400
+ 17: #ed7024,
401
+ 18: #ff7f6e,
402
+ 19: #c2f2bd,
403
+ 20: #ffe99a
404
+ )
405
+ ),
406
+ typography: (
407
+ 100: (
408
+ fontSize: 11px,
409
+ lineHeight: 18.666666666666668px
410
+ ),
411
+ 200: (
412
+ fontSize: 13px,
413
+ lineHeight: 21.333333333333332px
414
+ ),
415
+ 300: (
416
+ fontSize: 16px,
417
+ lineHeight: 24px
418
+ ),
419
+ 400: (
420
+ fontSize: 18px,
421
+ lineHeight: 26.666666666666668px
422
+ ),
423
+ 500: (
424
+ fontSize: 21px,
425
+ lineHeight: 29.333333333333332px
426
+ ),
427
+ 600: (
428
+ fontSize: 24px,
429
+ lineHeight: 32px
430
+ ),
431
+ 700: (
432
+ fontSize: 32px,
433
+ lineHeight: 40px
434
+ ),
435
+ 800: (
436
+ fontSize: 43px,
437
+ lineHeight: 50.666666666666664px
438
+ ),
439
+ 900: (
440
+ fontSize: 57px,
441
+ lineHeight: 64px
442
+ ),
443
+ 1000: (
444
+ fontSize: 76px,
445
+ lineHeight: 80px
446
+ ),
447
+ 1100: (
448
+ fontSize: 101px,
449
+ lineHeight: 101.33333333333333px
450
+ ),
451
+ 1200: (
452
+ fontSize: 135px,
453
+ lineHeight: 125.33333333333333px
454
+ ),
455
+ typography: (
456
+ 100: (
457
+ fontSize: 11px,
458
+ lineHeight: 18.666666666666668px
459
+ ),
460
+ 200: (
461
+ fontSize: 13px,
462
+ lineHeight: 21.333333333333332px
463
+ ),
464
+ 300: (
465
+ fontSize: 16px,
466
+ lineHeight: 24px
467
+ ),
468
+ 400: (
469
+ fontSize: 18px,
470
+ lineHeight: 26.666666666666668px
471
+ ),
472
+ 500: (
473
+ fontSize: 21px,
474
+ lineHeight: 29.333333333333332px
475
+ ),
476
+ 600: (
477
+ fontSize: 24px,
478
+ lineHeight: 32px
479
+ ),
480
+ 700: (
481
+ fontSize: 32px,
482
+ lineHeight: 40px
483
+ ),
484
+ 800: (
485
+ fontSize: 43px,
486
+ lineHeight: 50.666666666666664px
487
+ ),
488
+ 900: (
489
+ fontSize: 57px,
490
+ lineHeight: 64px
491
+ ),
492
+ 1000: (
493
+ fontSize: 76px,
494
+ lineHeight: 80px
495
+ ),
496
+ 1100: (
497
+ fontSize: 101px,
498
+ lineHeight: 101.33333333333333px
499
+ ),
500
+ 1200: (
501
+ fontSize: 135px,
502
+ lineHeight: 125.33333333333333px
503
+ )
504
+ )
505
+ ),
506
+ fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif",
507
+ fontWeights: (
508
+ normal: 400,
509
+ semibold: 600,
510
+ bold: 700,
511
+ extrabold: 800
512
+ ),
513
+ space: (
514
+ 0: 0px,
515
+ 100: 2px,
516
+ 200: 4px,
517
+ 300: 8px,
518
+ 350: 12px,
519
+ 400: 16px,
520
+ 450: 24px,
521
+ 500: 32px,
522
+ 600: 40px,
523
+ space: (
524
+ 0: 0px,
525
+ 100: 2px,
526
+ 200: 4px,
527
+ 300: 8px,
528
+ 350: 12px,
529
+ 400: 16px,
530
+ 450: 24px,
531
+ 500: 32px,
532
+ 600: 40px
533
+ ),
534
+ -space: (
535
+ 0: -0px,
536
+ 100: -2px,
537
+ 200: -4px,
538
+ 300: -8px,
539
+ 350: -12px,
540
+ 400: -16px,
541
+ 450: -24px,
542
+ 500: -32px,
543
+ 600: -40px
544
+ )
545
+ ),
546
+ radii: (
547
+ 400: 4px,
548
+ 500: 6px,
549
+ 600: 8px,
550
+ 1000: 999999px,
551
+ inner: 6px,
552
+ outer: 8px,
553
+ pill: 999999px,
554
+ radii: (
555
+ 400: 4px,
556
+ 500: 6px,
557
+ 600: 8px,
558
+ 1000: 999999px,
559
+ inner: 6px,
560
+ outer: 8px,
561
+ pill: 999999px
562
+ )
563
+ ),
564
+ borders: (
565
+ 500: 1px solid
566
+ ),
567
+ borderWidths: (
568
+ 500: 1px
569
+ ),
570
+ shadows: (
571
+ 100: 0px 2px 4px rgba(39,51,51,.24),
572
+ 200: 0px 4px 8px rgba(39,51,51,.24),
573
+ 300: 0px 8px 16px rgba(39,51,51,.24),
574
+ 400: 0px 16px 32px rgba(39,51,51,.24),
575
+ shadows: (
576
+ 100: 0px 2px 4px rgba(39,51,51,.24),
577
+ 200: 0px 4px 8px rgba(39,51,51,.24),
578
+ 300: 0px 8px 16px rgba(39,51,51,.24),
579
+ 400: 0px 16px 32px rgba(39,51,51,.24)
580
+ )
581
+ ),
582
+ easing: (
583
+ ease_in: cubic-bezier(.4, 0, .7, .2),
584
+ ease_out: cubic-bezier(0, 0, .2, 1),
585
+ ease_inout: cubic-bezier(.4, 0, .2, 1)
586
+ ),
587
+ duration: (
588
+ fast: .15s,
589
+ medium: .3s,
590
+ slow: .6s
591
+ ),
592
+ mode: dark
593
+ )
594
+ );
@@ -0,0 +1,693 @@
1
+ $default: (
2
+ __esModule: true,
3
+ breakpoints: (900px, 1200px, 1500px, 1800px),
4
+ typography: (
5
+ 100: (
6
+ fontSize: 11px,
7
+ lineHeight: 18.666666666666668px
8
+ ),
9
+ 200: (
10
+ fontSize: 13px,
11
+ lineHeight: 21.333333333333332px
12
+ ),
13
+ 300: (
14
+ fontSize: 16px,
15
+ lineHeight: 24px
16
+ ),
17
+ 400: (
18
+ fontSize: 18px,
19
+ lineHeight: 26.666666666666668px
20
+ ),
21
+ 500: (
22
+ fontSize: 21px,
23
+ lineHeight: 29.333333333333332px
24
+ ),
25
+ 600: (
26
+ fontSize: 24px,
27
+ lineHeight: 32px
28
+ ),
29
+ 700: (
30
+ fontSize: 32px,
31
+ lineHeight: 40px
32
+ ),
33
+ 800: (
34
+ fontSize: 43px,
35
+ lineHeight: 50.666666666666664px
36
+ ),
37
+ 900: (
38
+ fontSize: 57px,
39
+ lineHeight: 64px
40
+ ),
41
+ 1000: (
42
+ fontSize: 76px,
43
+ lineHeight: 80px
44
+ ),
45
+ 1100: (
46
+ fontSize: 101px,
47
+ lineHeight: 101.33333333333333px
48
+ ),
49
+ 1200: (
50
+ fontSize: 135px,
51
+ lineHeight: 125.33333333333333px
52
+ )
53
+ ),
54
+ fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif",
55
+ fontWeights: (
56
+ normal: 400,
57
+ semibold: 600,
58
+ bold: 700,
59
+ extrabold: 800
60
+ ),
61
+ space: (
62
+ 0: 0px,
63
+ 100: 2px,
64
+ 200: 4px,
65
+ 300: 8px,
66
+ 350: 12px,
67
+ 400: 16px,
68
+ 450: 24px,
69
+ 500: 32px,
70
+ 600: 40px
71
+ ),
72
+ radii: (
73
+ 400: 4px,
74
+ 500: 6px,
75
+ 600: 8px,
76
+ 1000: 999999px,
77
+ inner: 6px,
78
+ outer: 8px,
79
+ pill: 999999px
80
+ ),
81
+ borders: (
82
+ 500: 1px solid
83
+ ),
84
+ borderWidths: (
85
+ 500: 1px
86
+ ),
87
+ shadows: (
88
+ 100: 0px 2px 4px rgba(39,51,51,.24),
89
+ 200: 0px 4px 8px rgba(39,51,51,.24),
90
+ 300: 0px 8px 16px rgba(39,51,51,.24),
91
+ 400: 0px 16px 32px rgba(39,51,51,.24)
92
+ ),
93
+ easing: (
94
+ ease_in: cubic-bezier(.4, 0, .7, .2),
95
+ ease_out: cubic-bezier(0, 0, .2, 1),
96
+ ease_inout: cubic-bezier(.4, 0, .2, 1)
97
+ ),
98
+ duration: (
99
+ fast: .15s,
100
+ medium: .3s,
101
+ slow: .6s
102
+ ),
103
+ default: (
104
+ breakpoints: (900px, 1200px, 1500px, 1800px),
105
+ colors: (
106
+ app: (
107
+ background: (
108
+ base: #f3f4f4
109
+ )
110
+ ),
111
+ container: (
112
+ background: (
113
+ base: #FFFFFF,
114
+ success: #d7f4d7,
115
+ warning: #fdefcd,
116
+ error: #ffd5d2,
117
+ info: #dcf2ff,
118
+ opportunity: #eaeaf9,
119
+ danger: #ffd5d2,
120
+ decorative: (
121
+ green: #d7f4d7,
122
+ blue: #dcf2ff,
123
+ purple: #eaeaf9,
124
+ yellow: #fdefcd,
125
+ orange: #fcdccc,
126
+ red: #ffd5d2,
127
+ neutral: #f3f4f4
128
+ ),
129
+ selected: #364141
130
+ ),
131
+ border: (
132
+ base: #dee1e1,
133
+ success: #59cb59,
134
+ warning: #ffbc00,
135
+ error: #ed4c42,
136
+ danger: #ed4c42,
137
+ info: #2b87d3,
138
+ opportunity: #9180f4,
139
+ decorative: (
140
+ green: #59cb59,
141
+ blue: #2b87d3,
142
+ purple: #9180f4,
143
+ yellow: #ffbc00,
144
+ orange: #f57d33,
145
+ red: #ed4c42,
146
+ neutral: #929a9b
147
+ ),
148
+ selected: #364141
149
+ )
150
+ ),
151
+ button: (
152
+ primary: (
153
+ background: (
154
+ base: #2079c3,
155
+ hover: #116daa,
156
+ active: #0c5689
157
+ ),
158
+ border: (
159
+ base: transparent
160
+ ),
161
+ text: (
162
+ base: #FFFFFF,
163
+ hover: #FFFFFF
164
+ )
165
+ ),
166
+ secondary: (
167
+ background: (
168
+ base: transparent,
169
+ hover: #364141,
170
+ active: #273333
171
+ ),
172
+ border: (
173
+ base: #364141
174
+ ),
175
+ text: (
176
+ base: #364141,
177
+ hover: #FFFFFF
178
+ )
179
+ ),
180
+ pill: (
181
+ background: (
182
+ base: transparent,
183
+ hover: #f3f4f4,
184
+ active: #dee1e1
185
+ ),
186
+ border: (
187
+ base: transparent
188
+ ),
189
+ text: (
190
+ base: #364141,
191
+ hover: #273333
192
+ )
193
+ ),
194
+ destructive: (
195
+ background: (
196
+ base: #c63434,
197
+ hover: #992222,
198
+ active: #6d1313
199
+ ),
200
+ border: (
201
+ base: transparent
202
+ ),
203
+ text: (
204
+ base: #FFFFFF,
205
+ hover: #FFFFFF
206
+ )
207
+ ),
208
+ placeholder: (
209
+ background: (
210
+ base: transparent,
211
+ hover: #FFFFFF,
212
+ active: #FFFFFF
213
+ ),
214
+ border: (
215
+ base: #929a9b
216
+ ),
217
+ text: (
218
+ base: #2079c3,
219
+ hover: #116daa
220
+ )
221
+ ),
222
+ unstyled: (
223
+ background: (
224
+ base: transparent
225
+ ),
226
+ border: (
227
+ base: transparent
228
+ ),
229
+ text: (
230
+ base: #515e5f,
231
+ hover: #273333
232
+ )
233
+ )
234
+ ),
235
+ link: (
236
+ base: #116daa,
237
+ hover: #0c5689
238
+ ),
239
+ text: (
240
+ headline: #273333,
241
+ subtext: #515e5f,
242
+ body: #364141,
243
+ inverse: #FFFFFF,
244
+ error: #c63434
245
+ ),
246
+ icon: (
247
+ base: #364141,
248
+ inverse: #FFFFFF,
249
+ success: #006b40,
250
+ warning: #944c0c,
251
+ error: #992222,
252
+ danger: #992222,
253
+ info: #0c5689,
254
+ opportunity: #5e4eba
255
+ ),
256
+ form: (
257
+ background: (
258
+ base: #FFFFFF,
259
+ selected: #364141
260
+ ),
261
+ border: (
262
+ base: #b0b6b7,
263
+ error: #ed4c42,
264
+ warning: #ffbc00,
265
+ selected: #364141
266
+ ),
267
+ placeholder: (
268
+ base: #6e797a
269
+ )
270
+ ),
271
+ listItem: (
272
+ background: (
273
+ base: transparent,
274
+ hover: #f3f4f4,
275
+ selected: #364141
276
+ )
277
+ ),
278
+ network: (
279
+ twitter: #1da1f2,
280
+ twitter_like: #e0245e,
281
+ facebook: #217bee,
282
+ facebook_audience_network: #58409B,
283
+ linkedin: #0A66C2,
284
+ instagram: #e4405f,
285
+ feedly: #2bb24c,
286
+ analytics: #ef6c00,
287
+ youtube: #ff0000,
288
+ messenger: #0084ff,
289
+ snapchat: #fffc00,
290
+ pinterest: #E60023,
291
+ tumblr: #35465c,
292
+ reddit: #ff4500,
293
+ tripadvisor: #00B087,
294
+ glassdoor: #0CAA41,
295
+ google_my_business: #4285F4,
296
+ google_business_messages: #1A73EA,
297
+ salesforce: #1589EE,
298
+ zendesk: #03363D,
299
+ hubspot: #FF7A59,
300
+ microsoft_dynamics: #002050,
301
+ yelp: #FF1A1A,
302
+ whatsapp: #25D366,
303
+ tiktok: #000000
304
+ ),
305
+ dataviz: (
306
+ map: (
307
+ 1: #08c4b2,
308
+ 2: #6f5ed3,
309
+ 3: #ce3665,
310
+ 4: #ffcd1c,
311
+ 5: #3896e3,
312
+ 6: #db61db,
313
+ 7: #59cb59,
314
+ 8: #fc8943,
315
+ 9: #db3e3e,
316
+ 10: #026661,
317
+ 11: #a193f2,
318
+ 12: #931847,
319
+ 13: #944c0c,
320
+ 14: #0c5689,
321
+ 15: #6c2277,
322
+ 16: #006b40,
323
+ 17: #962c0b,
324
+ 18: #ff7f6e,
325
+ 19: #0ca750,
326
+ 20: #ba7506
327
+ ),
328
+ list: (#08c4b2, #6f5ed3, #ce3665, #ffcd1c, #3896e3, #db61db, #59cb59, #fc8943, #db3e3e, #026661, #a193f2, #931847, #944c0c, #0c5689, #6c2277, #006b40, #962c0b, #ff7f6e, #0ca750, #ba7506)
329
+ ),
330
+ neutral: (
331
+ 0: #FFFFFF,
332
+ 100: #f3f4f4,
333
+ 200: #dee1e1,
334
+ 300: #c8cccc,
335
+ 400: #b0b6b7,
336
+ 500: #929a9b,
337
+ 600: #6e797a,
338
+ 700: #515e5f,
339
+ 800: #364141,
340
+ 900: #273333,
341
+ 1000: #162020
342
+ ),
343
+ green: (
344
+ 0: #ebf9eb,
345
+ 100: #d7f4d7,
346
+ 200: #c2f2bd,
347
+ 300: #98e58e,
348
+ 400: #75dd66,
349
+ 500: #59cb59,
350
+ 600: #2bb656,
351
+ 700: #0ca750,
352
+ 800: #008b46,
353
+ 900: #006b40,
354
+ 1000: #08422f,
355
+ 1100: #002b20
356
+ ),
357
+ red: (
358
+ 0: #ffeae9,
359
+ 100: #ffd5d2,
360
+ 200: #ffb8b1,
361
+ 300: #ff9c8f,
362
+ 400: #ff7f6e,
363
+ 500: #f76054,
364
+ 600: #ed4c42,
365
+ 700: #db3e3e,
366
+ 800: #c63434,
367
+ 900: #992222,
368
+ 1000: #6d1313
369
+ ),
370
+ blue: (
371
+ 0: #e9f8ff,
372
+ 100: #dcf2ff,
373
+ 200: #c7e4f9,
374
+ 300: #a1d2f8,
375
+ 400: #56adf5,
376
+ 500: #3896e3,
377
+ 600: #2b87d3,
378
+ 700: #2079c3,
379
+ 800: #116daa,
380
+ 900: #0c5689,
381
+ 1000: #0a3960,
382
+ 1100: #002138
383
+ ),
384
+ teal: (
385
+ 0: #e5f9f5,
386
+ 100: #cdf7ef,
387
+ 200: #b3f2e6,
388
+ 300: #7dead5,
389
+ 400: #24e0c5,
390
+ 500: #08c4b2,
391
+ 600: #00a99c,
392
+ 700: #0b968f,
393
+ 800: #067c7c,
394
+ 900: #026661,
395
+ 1000: #083f3f,
396
+ 1100: #002528
397
+ ),
398
+ aqua: (
399
+ 0: #d9fcfb,
400
+ 100: #c5f9f9,
401
+ 200: #a5f2f2,
402
+ 300: #76e5e2,
403
+ 400: #33d6e2,
404
+ 500: #17b8ce,
405
+ 600: #0797ae,
406
+ 700: #0b8599,
407
+ 800: #0f6e84,
408
+ 900: #035e73,
409
+ 1000: #083d4f,
410
+ 1100: #002838
411
+ ),
412
+ purple: (
413
+ 0: #f2f2f9,
414
+ 100: #eaeaf9,
415
+ 200: #d8d7f9,
416
+ 300: #c1c1f7,
417
+ 400: #a193f2,
418
+ 500: #9180f4,
419
+ 600: #816fea,
420
+ 700: #6f5ed3,
421
+ 800: #5e4eba,
422
+ 900: #483a9c,
423
+ 1000: #2d246b,
424
+ 1100: #1d1d38
425
+ ),
426
+ magenta: (
427
+ 0: #fef0ff,
428
+ 100: #f9e3fc,
429
+ 200: #f4c4f7,
430
+ 300: #edadf2,
431
+ 400: #f282f5,
432
+ 500: #db61db,
433
+ 600: #c44eb9,
434
+ 700: #ac44a8,
435
+ 800: #8f3896,
436
+ 900: #6c2277,
437
+ 1000: #451551,
438
+ 1100: #29192d
439
+ ),
440
+ yellow: (
441
+ 0: #fff8e2,
442
+ 100: #fdefcd,
443
+ 200: #ffe99a,
444
+ 300: #ffe16e,
445
+ 400: #ffd943,
446
+ 500: #ffcd1c,
447
+ 600: #ffbc00,
448
+ 700: #dd9903,
449
+ 800: #ba7506,
450
+ 900: #944c0c,
451
+ 1000: #542a00,
452
+ 1100: #2d1a05
453
+ ),
454
+ pink: (
455
+ 0: #ffe9f3,
456
+ 100: #fcdbeb,
457
+ 200: #ffb5d5,
458
+ 300: #ff95c1,
459
+ 400: #ff76ae,
460
+ 500: #ef588b,
461
+ 600: #e0447c,
462
+ 700: #ce3665,
463
+ 800: #b22f5b,
464
+ 900: #931847,
465
+ 1000: #561231,
466
+ 1100: #2b1721
467
+ ),
468
+ orange: (
469
+ 0: #ffede3,
470
+ 100: #fcdccc,
471
+ 200: #ffc6a4,
472
+ 300: #ffb180,
473
+ 400: #ff9c5d,
474
+ 500: #fc8943,
475
+ 600: #f57d33,
476
+ 700: #ed7024,
477
+ 800: #ce5511,
478
+ 900: #962c0b,
479
+ 1000: #601700,
480
+ 1100: #2d130e
481
+ ),
482
+ DATAVIZ_COLORS_LIST: (#08c4b2, #6f5ed3, #ce3665, #ffcd1c, #3896e3, #db61db, #59cb59, #fc8943, #db3e3e, #026661, #a193f2, #931847, #944c0c, #0c5689, #6c2277, #006b40, #962c0b, #ff7f6e, #0ca750, #ba7506),
483
+ DATAVIZ_COLORS_MAP: (
484
+ 1: #08c4b2,
485
+ 2: #6f5ed3,
486
+ 3: #ce3665,
487
+ 4: #ffcd1c,
488
+ 5: #3896e3,
489
+ 6: #db61db,
490
+ 7: #59cb59,
491
+ 8: #fc8943,
492
+ 9: #db3e3e,
493
+ 10: #026661,
494
+ 11: #a193f2,
495
+ 12: #931847,
496
+ 13: #944c0c,
497
+ 14: #0c5689,
498
+ 15: #6c2277,
499
+ 16: #006b40,
500
+ 17: #962c0b,
501
+ 18: #ff7f6e,
502
+ 19: #0ca750,
503
+ 20: #ba7506
504
+ )
505
+ ),
506
+ typography: (
507
+ 100: (
508
+ fontSize: 11px,
509
+ lineHeight: 18.666666666666668px
510
+ ),
511
+ 200: (
512
+ fontSize: 13px,
513
+ lineHeight: 21.333333333333332px
514
+ ),
515
+ 300: (
516
+ fontSize: 16px,
517
+ lineHeight: 24px
518
+ ),
519
+ 400: (
520
+ fontSize: 18px,
521
+ lineHeight: 26.666666666666668px
522
+ ),
523
+ 500: (
524
+ fontSize: 21px,
525
+ lineHeight: 29.333333333333332px
526
+ ),
527
+ 600: (
528
+ fontSize: 24px,
529
+ lineHeight: 32px
530
+ ),
531
+ 700: (
532
+ fontSize: 32px,
533
+ lineHeight: 40px
534
+ ),
535
+ 800: (
536
+ fontSize: 43px,
537
+ lineHeight: 50.666666666666664px
538
+ ),
539
+ 900: (
540
+ fontSize: 57px,
541
+ lineHeight: 64px
542
+ ),
543
+ 1000: (
544
+ fontSize: 76px,
545
+ lineHeight: 80px
546
+ ),
547
+ 1100: (
548
+ fontSize: 101px,
549
+ lineHeight: 101.33333333333333px
550
+ ),
551
+ 1200: (
552
+ fontSize: 135px,
553
+ lineHeight: 125.33333333333333px
554
+ ),
555
+ typography: (
556
+ 100: (
557
+ fontSize: 11px,
558
+ lineHeight: 18.666666666666668px
559
+ ),
560
+ 200: (
561
+ fontSize: 13px,
562
+ lineHeight: 21.333333333333332px
563
+ ),
564
+ 300: (
565
+ fontSize: 16px,
566
+ lineHeight: 24px
567
+ ),
568
+ 400: (
569
+ fontSize: 18px,
570
+ lineHeight: 26.666666666666668px
571
+ ),
572
+ 500: (
573
+ fontSize: 21px,
574
+ lineHeight: 29.333333333333332px
575
+ ),
576
+ 600: (
577
+ fontSize: 24px,
578
+ lineHeight: 32px
579
+ ),
580
+ 700: (
581
+ fontSize: 32px,
582
+ lineHeight: 40px
583
+ ),
584
+ 800: (
585
+ fontSize: 43px,
586
+ lineHeight: 50.666666666666664px
587
+ ),
588
+ 900: (
589
+ fontSize: 57px,
590
+ lineHeight: 64px
591
+ ),
592
+ 1000: (
593
+ fontSize: 76px,
594
+ lineHeight: 80px
595
+ ),
596
+ 1100: (
597
+ fontSize: 101px,
598
+ lineHeight: 101.33333333333333px
599
+ ),
600
+ 1200: (
601
+ fontSize: 135px,
602
+ lineHeight: 125.33333333333333px
603
+ )
604
+ )
605
+ ),
606
+ fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif",
607
+ fontWeights: (
608
+ normal: 400,
609
+ semibold: 600,
610
+ bold: 700,
611
+ extrabold: 800
612
+ ),
613
+ space: (
614
+ 0: 0px,
615
+ 100: 2px,
616
+ 200: 4px,
617
+ 300: 8px,
618
+ 350: 12px,
619
+ 400: 16px,
620
+ 450: 24px,
621
+ 500: 32px,
622
+ 600: 40px,
623
+ space: (
624
+ 0: 0px,
625
+ 100: 2px,
626
+ 200: 4px,
627
+ 300: 8px,
628
+ 350: 12px,
629
+ 400: 16px,
630
+ 450: 24px,
631
+ 500: 32px,
632
+ 600: 40px
633
+ ),
634
+ -space: (
635
+ 0: -0px,
636
+ 100: -2px,
637
+ 200: -4px,
638
+ 300: -8px,
639
+ 350: -12px,
640
+ 400: -16px,
641
+ 450: -24px,
642
+ 500: -32px,
643
+ 600: -40px
644
+ )
645
+ ),
646
+ radii: (
647
+ 400: 4px,
648
+ 500: 6px,
649
+ 600: 8px,
650
+ 1000: 999999px,
651
+ inner: 6px,
652
+ outer: 8px,
653
+ pill: 999999px,
654
+ radii: (
655
+ 400: 4px,
656
+ 500: 6px,
657
+ 600: 8px,
658
+ 1000: 999999px,
659
+ inner: 6px,
660
+ outer: 8px,
661
+ pill: 999999px
662
+ )
663
+ ),
664
+ borders: (
665
+ 500: 1px solid
666
+ ),
667
+ borderWidths: (
668
+ 500: 1px
669
+ ),
670
+ shadows: (
671
+ 100: 0px 2px 4px rgba(39,51,51,.24),
672
+ 200: 0px 4px 8px rgba(39,51,51,.24),
673
+ 300: 0px 8px 16px rgba(39,51,51,.24),
674
+ 400: 0px 16px 32px rgba(39,51,51,.24),
675
+ shadows: (
676
+ 100: 0px 2px 4px rgba(39,51,51,.24),
677
+ 200: 0px 4px 8px rgba(39,51,51,.24),
678
+ 300: 0px 8px 16px rgba(39,51,51,.24),
679
+ 400: 0px 16px 32px rgba(39,51,51,.24)
680
+ )
681
+ ),
682
+ easing: (
683
+ ease_in: cubic-bezier(.4, 0, .7, .2),
684
+ ease_out: cubic-bezier(0, 0, .2, 1),
685
+ ease_inout: cubic-bezier(.4, 0, .2, 1)
686
+ ),
687
+ duration: (
688
+ fast: .15s,
689
+ medium: .3s,
690
+ slow: .6s
691
+ )
692
+ )
693
+ );
@@ -2,7 +2,7 @@ import styled from "styled-components";
2
2
  var Nav = styled.nav.withConfig({
3
3
  displayName: "styles__Nav",
4
4
  componentId: "sc-1ub1apc-0"
5
- })(["ol{", ";margin:0;font-family:", ";padding:0;display:flex;}li{margin-right:", ";display:flex;}a,button{", ";max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&:not(.overflow--menu){margin:0;padding:0;}}ol > div + li::before{content:\"/\";margin-right:", ";}li:last-child a,li:last-child button{color:", ";font-weight:bold;}li:not(:last-child) a,li:not(:last-child) button{font-weight:normal;}li:not(:last-child)::after{content:\"/\";color:", ";margin-left:", ";}"], function (props) {
5
+ })(["ol{", ";margin:0;font-family:", ";padding:0;display:flex;}li{margin-right:", ";display:flex;}a,button{", ";max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&:not(.overflow--menu){margin:0;padding:0;}}ol > div + li::before{content:\"/\";margin-right:", ";}li:last-child a,li:last-child button{color:", ";font-weight:bold;}li:not(:last-child)::after{content:\"/\";color:", ";margin-left:", ";}"], function (props) {
6
6
  return props.theme.typography[200];
7
7
  }, function (props) {
8
8
  return props.theme.fontFamily;
@@ -178,6 +178,10 @@ var darkTheme = _extends({}, defaultTheme, {
178
178
  hover: COLORS.COLOR_NEUTRAL_800,
179
179
  selected: COLORS.COLOR_NEUTRAL_0
180
180
  }
181
+ },
182
+ dataviz: {
183
+ map: datavizPalette.DATAVIZ_COLORS_MAP,
184
+ list: datavizPalette.DATAVIZ_COLORS_LIST
181
185
  }
182
186
  }, datavizPalette),
183
187
  mode: "dark"
@@ -211,6 +211,10 @@ var colors = _extends({
211
211
  yelp: NETWORKCOLORS.NETWORK_COLOR_YELP,
212
212
  whatsapp: NETWORKCOLORS.NETWORK_COLOR_WHATSAPP,
213
213
  tiktok: NETWORKCOLORS.NETWORK_COLOR_TIKTOK
214
+ },
215
+ dataviz: {
216
+ map: datavizPalette.DATAVIZ_COLORS_MAP,
217
+ list: datavizPalette.DATAVIZ_COLORS_LIST
214
218
  }
215
219
  }, literalColors, datavizPalette);
216
220
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/racine",
3
- "version": "8.6.3",
3
+ "version": "8.7.1",
4
4
  "license": "MIT",
5
5
  "files": [
6
6
  "__flow__",
@@ -143,6 +143,7 @@
143
143
  "jest-dom": "^3.5.0",
144
144
  "jest-styled-components": "7.0.0-beta.1",
145
145
  "jscodeshift": "^0.6.4",
146
+ "json-to-scss": "^1.6.2",
146
147
  "lint-staged": "^10.2.11",
147
148
  "moment": "^2.29.1",
148
149
  "npm-run-all": "^4.1.2",