@sproutsocial/seeds-react-theme 3.0.0 → 3.1.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.
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.shadows = exports.default = void 0;
6
+ exports.shadows = exports.default = exports.colors = void 0;
7
7
  var _polished = require("polished");
8
8
  var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
9
9
  var _seedsDepth = _interopRequireDefault(require("@sproutsocial/seeds-depth"));
@@ -28,7 +28,7 @@ var shadows = exports.shadows = {
28
28
 
29
29
  // If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
30
30
 
31
- var colors = _objectSpread(_objectSpread({}, _theme.default.colors), {}, {
31
+ var colors = exports.colors = _objectSpread(_objectSpread({}, _theme.default.colors), {}, {
32
32
  app: {
33
33
  background: {
34
34
  base: _seedsColor.default.COLOR_NEUTRAL_1000
@@ -159,6 +159,12 @@ var colors = _objectSpread(_objectSpread({}, _theme.default.colors), {}, {
159
159
  hover: _seedsColor.default.COLOR_BLUE_300
160
160
  }
161
161
  },
162
+ overlay: {
163
+ background: {
164
+ base: (0, _polished.transparentize)(0.56, _seedsColor.default.COLOR_NEUTRAL_1000),
165
+ hover: (0, _polished.transparentize)(0.64, _seedsColor.default.COLOR_NEUTRAL_1000)
166
+ }
167
+ },
162
168
  unstyled: {
163
169
  background: {
164
170
  base: "transparent"
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.typography = exports.space = exports.shadows = exports.radii = exports.lineHeights = exports.fontWeights = exports.fontSizes = exports.fontFamily = exports.easing = exports.duration = exports.default = exports.breakpoints = exports.borders = exports.borderWidths = void 0;
6
+ exports.typography = exports.space = exports.shadows = exports.radii = exports.lineHeights = exports.fontWeights = exports.fontSizes = exports.fontFamily = exports.easing = exports.duration = exports.default = exports.colors = exports.breakpoints = exports.borders = exports.borderWidths = void 0;
7
7
  var _polished = require("polished");
8
8
  var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
9
9
  var _seedsNetworkcolor = _interopRequireDefault(require("@sproutsocial/seeds-networkcolor"));
@@ -29,7 +29,7 @@ var MODE = "light";
29
29
 
30
30
  // If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
31
31
 
32
- var colors = _objectSpread(_objectSpread({
32
+ var colors = exports.colors = _objectSpread(_objectSpread({
33
33
  app: {
34
34
  background: {
35
35
  base: _seedsColor.default.COLOR_NEUTRAL_100
@@ -161,8 +161,10 @@ var colors = _objectSpread(_objectSpread({
161
161
  }
162
162
  },
163
163
  overlay: {
164
- base: (0, _polished.transparentize)(0.56, _seedsColor.default.COLOR_NEUTRAL_1000),
165
- hover: (0, _polished.transparentize)(0.64, _seedsColor.default.COLOR_NEUTRAL_1000)
164
+ background: {
165
+ base: (0, _polished.transparentize)(0.56, _seedsColor.default.COLOR_NEUTRAL_1000),
166
+ hover: (0, _polished.transparentize)(0.64, _seedsColor.default.COLOR_NEUTRAL_1000)
167
+ }
166
168
  },
167
169
  unstyled: {
168
170
  background: {
@@ -1,4 +1,520 @@
1
1
  $theme: (
2
+ "colors": (
3
+ "app": (
4
+ "background": (
5
+ "base": #162020
6
+ )
7
+ ),
8
+ "container": (
9
+ "background": (
10
+ "base": #273333,
11
+ "success": #006b40,
12
+ "warning": #944c0c,
13
+ "error": #992222,
14
+ "info": #0c3f89,
15
+ "opportunity": #483a9c,
16
+ "danger": #992222,
17
+ "decorative": (
18
+ "green": #006b40,
19
+ "blue": #0c3f89,
20
+ "purple": #483a9c,
21
+ "yellow": #944c0c,
22
+ "orange": #962c0b,
23
+ "red": #992222,
24
+ "neutral": #162020,
25
+ "magenta": #6c2277,
26
+ "pink": #931847,
27
+ "aqua": #035e73,
28
+ "teal": #026661
29
+ ),
30
+ "selected": #FFFFFF,
31
+ "positive_sentiment": #3876e3,
32
+ "negative_sentiment": #f76054,
33
+ "neutral_sentiment": #c8cccc
34
+ ),
35
+ "border": (
36
+ "base": #040404,
37
+ "success": #59cb59,
38
+ "warning": #ffbc00,
39
+ "error": #ed4c42,
40
+ "danger": #ed4c42,
41
+ "info": #2b68d3,
42
+ "opportunity": #9180f4,
43
+ "decorative": (
44
+ "green": #59cb59,
45
+ "blue": #2b68d3,
46
+ "purple": #9180f4,
47
+ "yellow": #ffbc00,
48
+ "orange": #f57d33,
49
+ "red": #ed4c42,
50
+ "neutral": #6e797a,
51
+ "magenta": #c44eb9,
52
+ "pink": #e0447c,
53
+ "aqua": #17b8ce,
54
+ "teal": #08c4b2
55
+ ),
56
+ "selected": #FFFFFF
57
+ )
58
+ ),
59
+ "button": (
60
+ "primary": (
61
+ "background": (
62
+ "base": #679eff,
63
+ "hover": #a1c2f8,
64
+ "active": #c7dbf9
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
+ "hover": #FFFFFF
97
+ ),
98
+ "text": (
99
+ "base": #f3f4f4,
100
+ "hover": #FFFFFF
101
+ )
102
+ ),
103
+ "destructive": (
104
+ "background": (
105
+ "base": #ff7f6e,
106
+ "hover": #ff9c8f,
107
+ "active": #ffb8b1
108
+ ),
109
+ "border": (
110
+ "base": transparent
111
+ ),
112
+ "text": (
113
+ "base": #273333,
114
+ "hover": #162020
115
+ )
116
+ ),
117
+ "placeholder": (
118
+ "background": (
119
+ "base": transparent,
120
+ "hover": #040404,
121
+ "active": #040404
122
+ ),
123
+ "border": (
124
+ "base": #929a9b
125
+ ),
126
+ "text": (
127
+ "base": #679eff,
128
+ "hover": #a1c2f8
129
+ )
130
+ ),
131
+ "overlay": (
132
+ "background": (
133
+ "base": rgba(22,32,32,0.44),
134
+ "hover": rgba(22,32,32,0.36)
135
+ )
136
+ ),
137
+ "unstyled": (
138
+ "background": (
139
+ "base": transparent
140
+ ),
141
+ "border": (
142
+ "base": transparent
143
+ ),
144
+ "text": (
145
+ "base": #c8cccc,
146
+ "hover": #dee1e1
147
+ )
148
+ )
149
+ ),
150
+ "link": (
151
+ "base": #679eff,
152
+ "hover": #a1c2f8
153
+ ),
154
+ "text": (
155
+ "headline": #FFFFFF,
156
+ "subtext": #dee1e1,
157
+ "body": #f3f4f4,
158
+ "inverse": #273333,
159
+ "error": #ffd5d2,
160
+ "background": (
161
+ "highlight": #944c0c,
162
+ "selection": #1150aa
163
+ ),
164
+ "decorative": (
165
+ "green": #d7f4d7,
166
+ "blue": #deebfe,
167
+ "purple": #eaeaf9,
168
+ "yellow": #fdefcd,
169
+ "orange": #fcdccc,
170
+ "red": #ffd5d2,
171
+ "neutral": #f3f4f4,
172
+ "magenta": #f9e3fc,
173
+ "pink": #fcdbeb,
174
+ "aqua": #c5f9f9,
175
+ "teal": #cdf7ef
176
+ )
177
+ ),
178
+ "icon": (
179
+ "base": #f3f4f4,
180
+ "inverse": #273333,
181
+ "success": #d7f4d7,
182
+ "warning": #fdefcd,
183
+ "error": #ffd5d2,
184
+ "danger": #ffd5d2,
185
+ "info": #deebfe,
186
+ "opportunity": #eaeaf9,
187
+ "applied": #679eff,
188
+ "positive_sentiment": #2b68d3,
189
+ "negative_sentiment": #ed4c42,
190
+ "neutral_sentiment": #929a9b
191
+ ),
192
+ "form": (
193
+ "background": (
194
+ "base": #273333,
195
+ "selected": #FFFFFF
196
+ ),
197
+ "border": (
198
+ "base": #929a9b,
199
+ "error": #ed4c42,
200
+ "warning": #ffbc00,
201
+ "selected": #FFFFFF
202
+ ),
203
+ "placeholder": (
204
+ "base": #929a9b
205
+ )
206
+ ),
207
+ "listItem": (
208
+ "background": (
209
+ "base": transparent,
210
+ "hover": #364141,
211
+ "selected": #FFFFFF,
212
+ "active": #FFFFFF
213
+ ),
214
+ "border": (
215
+ "base": #6e797a
216
+ )
217
+ ),
218
+ "menuItem": (
219
+ "background": (
220
+ "active": #515e5f
221
+ )
222
+ ),
223
+ "nav": (
224
+ "navItem": (
225
+ "text": (
226
+ "base": #FFFFFF
227
+ ),
228
+ "icon": (
229
+ "base": #FFFFFF
230
+ ),
231
+ "indicator": (
232
+ "notification": (
233
+ "base": #e0447c
234
+ ),
235
+ "userStatus": (
236
+ "online": #59cb59,
237
+ "offline": #ed4c42,
238
+ "unavailable": #364141
239
+ )
240
+ ),
241
+ "background": (
242
+ "base": transparent,
243
+ "hover": #364141,
244
+ "active": #040404,
245
+ "selected": #515e5f
246
+ ),
247
+ "border": (
248
+ "hover": #515e5f,
249
+ "active": #515e5f,
250
+ "selected": #515e5f
251
+ )
252
+ )
253
+ ),
254
+ "overlay": (
255
+ "background": (
256
+ "base": rgba(22,32,32,0.72)
257
+ ),
258
+ "text": (
259
+ "base": #FFFFFF
260
+ ),
261
+ "icon": (
262
+ "base": #FFFFFF
263
+ )
264
+ ),
265
+ "elevation": (
266
+ "base": #040404
267
+ ),
268
+ "illustration": (
269
+ "fill": #679eff,
270
+ "stroke": #f3f4f4
271
+ ),
272
+ "network": (
273
+ "twitter": #000000,
274
+ "twitter_like": #e0245e,
275
+ "facebook": #1877F2,
276
+ "facebook_audience_network": #58409B,
277
+ "linkedin": #0A66C2,
278
+ "instagram": #e4405f,
279
+ "feedly": #2bb24c,
280
+ "analytics": #ef6c00,
281
+ "youtube": #ff0000,
282
+ "messenger": #000000,
283
+ "snapchat": #fffc00,
284
+ "pinterest": #E60023,
285
+ "tumblr": #35465c,
286
+ "reddit": #ff4500,
287
+ "tripadvisor": #00B087,
288
+ "glassdoor": #0CAA41,
289
+ "google_my_business": #4285F4,
290
+ "google_business_messages": #1A73EA,
291
+ "google_play_store": #01875F,
292
+ "apple_app_store": #17C8F5,
293
+ "salesforce": #1589EE,
294
+ "zendesk": #03363D,
295
+ "hubspot": #FF7A59,
296
+ "microsoft_dynamics": #002050,
297
+ "yelp": #FF1A1A,
298
+ "whatsapp": #59CE72,
299
+ "tiktok": #000000,
300
+ "threads": #000000,
301
+ "trustpilot": #04DA8D,
302
+ "x": #000000,
303
+ "x_like": #e0245e,
304
+ "bluesky": #1185FE
305
+ ),
306
+ "dataviz": (
307
+ "map": (
308
+ "1": #24e0c5,
309
+ "2": #a193f2,
310
+ "3": #ff76ae,
311
+ "4": #ffcd1c,
312
+ "5": #679eff,
313
+ "6": #f282f5,
314
+ "7": #75dd66,
315
+ "8": #ff9c5d,
316
+ "9": #db3e3e,
317
+ "10": #0b968f,
318
+ "11": #6f5ed3,
319
+ "12": #ce3665,
320
+ "13": #ba7506,
321
+ "14": #205bc3,
322
+ "15": #ac44a8,
323
+ "16": #0ca750,
324
+ "17": #ed7024,
325
+ "18": #ff7f6e,
326
+ "19": #c2f2bd,
327
+ "20": #ffe99a
328
+ ),
329
+ "list": (#24e0c5, #a193f2, #ff76ae, #ffcd1c, #679eff, #f282f5, #75dd66, #ff9c5d, #db3e3e, #0b968f, #6f5ed3, #ce3665, #ba7506, #205bc3, #ac44a8, #0ca750, #ed7024, #ff7f6e, #c2f2bd, #ffe99a),
330
+ "placeholder": #364141
331
+ ),
332
+ "userStatus": (
333
+ "online": #59cb59,
334
+ "offline": #f76054,
335
+ "unavailable": #929a9b
336
+ ),
337
+ "neutral": (
338
+ "0": #FFFFFF,
339
+ "100": #f3f4f4,
340
+ "200": #dee1e1,
341
+ "300": #c8cccc,
342
+ "400": #b0b6b7,
343
+ "500": #929a9b,
344
+ "600": #6e797a,
345
+ "700": #515e5f,
346
+ "800": #364141,
347
+ "900": #273333,
348
+ "1000": #162020,
349
+ "1100": #040404
350
+ ),
351
+ "green": (
352
+ "0": #ebf9eb,
353
+ "100": #d7f4d7,
354
+ "200": #c2f2bd,
355
+ "300": #98e58e,
356
+ "400": #75dd66,
357
+ "500": #59cb59,
358
+ "600": #2bb656,
359
+ "700": #0ca750,
360
+ "800": #008b46,
361
+ "900": #006b40,
362
+ "1000": #08422f,
363
+ "1100": #002b20
364
+ ),
365
+ "red": (
366
+ "0": #ffeae9,
367
+ "100": #ffd5d2,
368
+ "200": #ffb8b1,
369
+ "300": #ff9c8f,
370
+ "400": #ff7f6e,
371
+ "500": #f76054,
372
+ "600": #ed4c42,
373
+ "700": #db3e3e,
374
+ "800": #c63434,
375
+ "900": #992222,
376
+ "1000": #6d1313,
377
+ "1100": #2b1111
378
+ ),
379
+ "blue": (
380
+ "0": #e9f4ff,
381
+ "100": #deebfe,
382
+ "200": #c7dbf9,
383
+ "300": #a1c2f8,
384
+ "400": #679eff,
385
+ "500": #3876e3,
386
+ "600": #2b68d3,
387
+ "700": #205bc3,
388
+ "800": #1150aa,
389
+ "900": #0c3f89,
390
+ "1000": #0a2960,
391
+ "1100": #001738
392
+ ),
393
+ "teal": (
394
+ "0": #e5f9f5,
395
+ "50": #CCF1EA,
396
+ "100": #cdf7ef,
397
+ "200": #b3f2e6,
398
+ "300": #7dead5,
399
+ "400": #24e0c5,
400
+ "500": #08c4b2,
401
+ "600": #00a99c,
402
+ "700": #0b968f,
403
+ "800": #067c7c,
404
+ "900": #026661,
405
+ "1000": #083f3f,
406
+ "1100": #002528
407
+ ),
408
+ "aqua": (
409
+ "0": #d9fcfb,
410
+ "100": #c5f9f9,
411
+ "200": #a5f2f2,
412
+ "300": #76e5e2,
413
+ "400": #33d6e2,
414
+ "500": #17b8ce,
415
+ "600": #0797ae,
416
+ "700": #0b8599,
417
+ "800": #0f6e84,
418
+ "900": #035e73,
419
+ "1000": #083d4f,
420
+ "1100": #002838
421
+ ),
422
+ "purple": (
423
+ "0": #f2f2f9,
424
+ "100": #eaeaf9,
425
+ "200": #d8d7f9,
426
+ "300": #c1c1f7,
427
+ "400": #a193f2,
428
+ "500": #9180f4,
429
+ "600": #816fea,
430
+ "700": #6f5ed3,
431
+ "800": #5e4eba,
432
+ "900": #483a9c,
433
+ "1000": #2d246b,
434
+ "1100": #1d1d38
435
+ ),
436
+ "magenta": (
437
+ "0": #fef0ff,
438
+ "100": #f9e3fc,
439
+ "200": #f4c4f7,
440
+ "300": #edadf2,
441
+ "350": #EC9AF1,
442
+ "400": #f282f5,
443
+ "500": #db61db,
444
+ "600": #c44eb9,
445
+ "700": #ac44a8,
446
+ "800": #8f3896,
447
+ "900": #6c2277,
448
+ "1000": #451551,
449
+ "1100": #29192d
450
+ ),
451
+ "yellow": (
452
+ "0": #fff8e2,
453
+ "100": #fdefcd,
454
+ "200": #ffe99a,
455
+ "300": #ffe16e,
456
+ "400": #ffd943,
457
+ "500": #ffcd1c,
458
+ "600": #ffbc00,
459
+ "700": #dd9903,
460
+ "800": #ba7506,
461
+ "900": #944c0c,
462
+ "1000": #542a00,
463
+ "1100": #2d1a05
464
+ ),
465
+ "pink": (
466
+ "0": #ffe9f3,
467
+ "100": #fcdbeb,
468
+ "200": #ffb5d5,
469
+ "300": #ff95c1,
470
+ "400": #ff76ae,
471
+ "500": #ef588b,
472
+ "600": #e0447c,
473
+ "700": #ce3665,
474
+ "800": #b22f5b,
475
+ "900": #931847,
476
+ "1000": #561231,
477
+ "1100": #2b1721
478
+ ),
479
+ "orange": (
480
+ "0": #ffede3,
481
+ "100": #fcdccc,
482
+ "200": #ffc6a4,
483
+ "300": #ffb180,
484
+ "400": #ff9c5d,
485
+ "500": #fc8943,
486
+ "600": #f57d33,
487
+ "700": #ed7024,
488
+ "800": #ce5511,
489
+ "900": #962c0b,
490
+ "1000": #601700,
491
+ "1100": #2d130e
492
+ ),
493
+ "DATAVIZ_COLORS_LIST": (#24e0c5, #a193f2, #ff76ae, #ffcd1c, #679eff, #f282f5, #75dd66, #ff9c5d, #db3e3e, #0b968f, #6f5ed3, #ce3665, #ba7506, #205bc3, #ac44a8, #0ca750, #ed7024, #ff7f6e, #c2f2bd, #ffe99a),
494
+ "DATAVIZ_COLORS_MAP": (
495
+ "1": #24e0c5,
496
+ "2": #a193f2,
497
+ "3": #ff76ae,
498
+ "4": #ffcd1c,
499
+ "5": #679eff,
500
+ "6": #f282f5,
501
+ "7": #75dd66,
502
+ "8": #ff9c5d,
503
+ "9": #db3e3e,
504
+ "10": #0b968f,
505
+ "11": #6f5ed3,
506
+ "12": #ce3665,
507
+ "13": #ba7506,
508
+ "14": #205bc3,
509
+ "15": #ac44a8,
510
+ "16": #0ca750,
511
+ "17": #ed7024,
512
+ "18": #ff7f6e,
513
+ "19": #c2f2bd,
514
+ "20": #ffe99a
515
+ ),
516
+ "PLACEHOLDER": #364141
517
+ ),
2
518
  "default": (
3
519
  "breakpoints": (900px, 1200px, 1500px, 1800px),
4
520
  "colors": (
@@ -130,6 +646,12 @@ $theme: (
130
646
  "hover": #a1c2f8
131
647
  )
132
648
  ),
649
+ "overlay": (
650
+ "background": (
651
+ "base": rgba(22,32,32,0.44),
652
+ "hover": rgba(22,32,32,0.36)
653
+ )
654
+ ),
133
655
  "unstyled": (
134
656
  "background": (
135
657
  "base": transparent
@@ -182,6 +182,12 @@ $theme: (
182
182
  "hover": #a1c2f8
183
183
  )
184
184
  ),
185
+ "overlay": (
186
+ "background": (
187
+ "base": rgba(22,32,32,0.44),
188
+ "hover": rgba(22,32,32,0.36)
189
+ )
190
+ ),
185
191
  "unstyled": (
186
192
  "background": (
187
193
  "base": transparent
@@ -183,8 +183,10 @@ $theme: (
183
183
  )
184
184
  ),
185
185
  "overlay": (
186
- "base": rgba(22,32,32,0.44),
187
- "hover": rgba(22,32,32,0.36)
186
+ "background": (
187
+ "base": rgba(22,32,32,0.44),
188
+ "hover": rgba(22,32,32,0.36)
189
+ )
188
190
  ),
189
191
  "unstyled": (
190
192
  "background": (