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