@sproutsocial/racine 8.6.1 → 8.6.3-dar10.2

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 (10) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/__flow__/Collapsible/index.js +1 -0
  3. package/__flow__/Collapsible/styles.js +23 -24
  4. package/commonjs/Collapsible/index.js +1 -0
  5. package/commonjs/Collapsible/styles.js +5 -7
  6. package/lib/Collapsible/index.js +1 -0
  7. package/lib/Collapsible/styles.js +5 -7
  8. package/lib/themes/dark/dark.scss +569 -0
  9. package/lib/themes/default/default.scss +668 -0
  10. package/package.json +2 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # Change Log
2
2
 
3
+ ## 8.6.2
4
+
5
+ ### Patch Changes
6
+
7
+ - 039da3f: Address visual bug on collapsible shadow
8
+
3
9
  ## 8.6.1
4
10
 
5
11
  ### Patch Changes
package/__flow__/Collapsible/index.js CHANGED
@@ -103,6 +103,7 @@ const Panel = ({ children, ...rest }) => {
103
103
 
104
104
  return (
105
105
  <CollapsingBox
106
+ hasShadow={collapsedHeight || openHeight > 0}
106
107
  scrollable={isOpen}
107
108
  maxHeight={isOpen ? maxHeight : collapsedHeight}
108
109
  minHeight={collapsedHeight}
package/__flow__/Collapsible/styles.js CHANGED
@@ -10,29 +10,28 @@ export const CollapsingBox = styled<typeof Box, TypeTheme, *>(Box)`
10
10
  will-change: max-height;
11
11
  position: relative;
12
12
  overflow: auto;
13
- background: /* Shadow covers */ linear-gradient(
14
- ${(p) => p.theme.colors.neutral[100]} 30%,
15
- rgba(255, 255, 255, 0)
16
- ),
17
- linear-gradient(
18
- rgba(255, 255, 255, 0),
19
- ${(p) => p.theme.colors.neutral[100]} 70%
20
- )
21
- 0 100%,
22
- /* Shadows */
23
- radial-gradient(
24
- farthest-side at 50% 0,
25
- rgb(39 51 51 / 5%),
26
- rgba(0, 0, 0, 0)
13
+ ${({ hasShadow, theme, scrollable }) =>
14
+ hasShadow
15
+ ? `background: /* Shadow covers */ linear-gradient(
16
+ transparent 30%,
17
+ rgba(255, 255, 255, 0)
27
18
  ),
28
- radial-gradient(
29
- farthest-side at 50% 100%,
30
- rgb(39 51 51 / 5%),
31
- rgba(0, 0, 0, 0)
32
- )
33
- 0 100%;
34
- background-repeat: no-repeat;
35
- background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
36
- background-attachment: local, local, scroll, scroll;
37
- ${({ scrollable }) => (scrollable ? `overflow: auto` : `overflow: hidden`)};
19
+ linear-gradient(rgba(255, 255, 255, 0), transparent 70%) 0 100%,
20
+ /* Shadows */
21
+ radial-gradient(
22
+ farthest-side at 50% 0,
23
+ rgb(39 51 51 / 5%),
24
+ rgba(0, 0, 0, 0)
25
+ ),
26
+ radial-gradient(
27
+ farthest-side at 50% 100%,
28
+ rgb(39 51 51 / 5%),
29
+ rgba(0, 0, 0, 0)
30
+ )
31
+ 0 100%;
32
+ background-repeat: no-repeat;
33
+ background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
34
+ background-attachment: local, local, scroll, scroll;
35
+ ${scrollable ? `overflow: auto` : `overflow: hidden`};`
36
+ : ""}
38
37
  `;
package/commonjs/Collapsible/index.js CHANGED
@@ -118,6 +118,7 @@ var Panel = function Panel(_ref3) {
118
118
  }
119
119
  }, [isOpen]);
120
120
  return /*#__PURE__*/React.createElement(_styles.CollapsingBox, _extends({
121
+ hasShadow: collapsedHeight || openHeight > 0,
121
122
  scrollable: isOpen,
122
123
  maxHeight: isOpen ? maxHeight : collapsedHeight,
123
124
  minHeight: collapsedHeight,
package/commonjs/Collapsible/styles.js CHANGED
@@ -12,16 +12,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
12
12
  var CollapsingBox = (0, _styledComponents.default)(_Box.default).withConfig({
13
13
  displayName: "styles__CollapsingBox",
14
14
  componentId: "sc-1xvfbl7-0"
15
- })(["transition:max-height ", " ", ";will-change:max-height;position:relative;overflow:auto;background:linear-gradient( ", " 30%,rgba(255,255,255,0) ),linear-gradient( rgba(255,255,255,0),", " 70% ) 0 100%,radial-gradient( farthest-side at 50% 0,rgb(39 51 51 / 5%),rgba(0,0,0,0) ),radial-gradient( farthest-side at 50% 100%,rgb(39 51 51 / 5%),rgba(0,0,0,0) ) 0 100%;background-repeat:no-repeat;background-size:100% 40px,100% 40px,100% 14px,100% 14px;background-attachment:local,local,scroll,scroll;", ";"], function (p) {
15
+ })(["transition:max-height ", " ", ";will-change:max-height;position:relative;overflow:auto;", ""], function (p) {
16
16
  return p.theme.duration.medium;
17
17
  }, function (p) {
18
18
  return p.theme.easing.ease_inout;
19
- }, function (p) {
20
- return p.theme.colors.neutral[100];
21
- }, function (p) {
22
- return p.theme.colors.neutral[100];
23
19
  }, function (_ref) {
24
- var scrollable = _ref.scrollable;
25
- return scrollable ? "overflow: auto" : "overflow: hidden";
20
+ var hasShadow = _ref.hasShadow,
21
+ theme = _ref.theme,
22
+ scrollable = _ref.scrollable;
23
+ return hasShadow ? "background: /* Shadow covers */ linear-gradient(\n transparent 30%,\n rgba(255, 255, 255, 0)\n ),\n linear-gradient(rgba(255, 255, 255, 0), transparent 70%) 0 100%,\n /* Shadows */\n radial-gradient(\n farthest-side at 50% 0,\n rgb(39 51 51 / 5%),\n rgba(0, 0, 0, 0)\n ),\n radial-gradient(\n farthest-side at 50% 100%,\n rgb(39 51 51 / 5%),\n rgba(0, 0, 0, 0)\n )\n 0 100%;\n background-repeat: no-repeat;\n background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;\n background-attachment: local, local, scroll, scroll;\n " + (scrollable ? "overflow: auto" : "overflow: hidden") + ";" : "";
26
24
  });
27
25
  exports.CollapsingBox = CollapsingBox;
package/lib/Collapsible/index.js CHANGED
@@ -104,6 +104,7 @@ var Panel = function Panel(_ref3) {
104
104
  }
105
105
  }, [isOpen]);
106
106
  return /*#__PURE__*/React.createElement(CollapsingBox, _extends({
107
+ hasShadow: collapsedHeight || openHeight > 0,
107
108
  scrollable: isOpen,
108
109
  maxHeight: isOpen ? maxHeight : collapsedHeight,
109
110
  minHeight: collapsedHeight,
package/lib/Collapsible/styles.js CHANGED
@@ -3,15 +3,13 @@ import Box from "../Box";
3
3
  export var CollapsingBox = styled(Box).withConfig({
4
4
  displayName: "styles__CollapsingBox",
5
5
  componentId: "sc-1xvfbl7-0"
6
- })(["transition:max-height ", " ", ";will-change:max-height;position:relative;overflow:auto;background:linear-gradient( ", " 30%,rgba(255,255,255,0) ),linear-gradient( rgba(255,255,255,0),", " 70% ) 0 100%,radial-gradient( farthest-side at 50% 0,rgb(39 51 51 / 5%),rgba(0,0,0,0) ),radial-gradient( farthest-side at 50% 100%,rgb(39 51 51 / 5%),rgba(0,0,0,0) ) 0 100%;background-repeat:no-repeat;background-size:100% 40px,100% 40px,100% 14px,100% 14px;background-attachment:local,local,scroll,scroll;", ";"], function (p) {
6
+ })(["transition:max-height ", " ", ";will-change:max-height;position:relative;overflow:auto;", ""], function (p) {
7
7
  return p.theme.duration.medium;
8
8
  }, function (p) {
9
9
  return p.theme.easing.ease_inout;
10
- }, function (p) {
11
- return p.theme.colors.neutral[100];
12
- }, function (p) {
13
- return p.theme.colors.neutral[100];
14
10
  }, function (_ref) {
15
- var scrollable = _ref.scrollable;
16
- return scrollable ? "overflow: auto" : "overflow: hidden";
11
+ var hasShadow = _ref.hasShadow,
12
+ theme = _ref.theme,
13
+ scrollable = _ref.scrollable;
14
+ return hasShadow ? "background: /* Shadow covers */ linear-gradient(\n transparent 30%,\n rgba(255, 255, 255, 0)\n ),\n linear-gradient(rgba(255, 255, 255, 0), transparent 70%) 0 100%,\n /* Shadows */\n radial-gradient(\n farthest-side at 50% 0,\n rgb(39 51 51 / 5%),\n rgba(0, 0, 0, 0)\n ),\n radial-gradient(\n farthest-side at 50% 100%,\n rgb(39 51 51 / 5%),\n rgba(0, 0, 0, 0)\n )\n 0 100%;\n background-repeat: no-repeat;\n background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;\n background-attachment: local, local, scroll, scroll;\n " + (scrollable ? "overflow: auto" : "overflow: hidden") + ";" : "";
17
15
  });
package/lib/themes/dark/dark.scss ADDED
@@ -0,0 +1,569 @@
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
+ neutral: (
206
+ 0: #FFFFFF,
207
+ 100: #f3f4f4,
208
+ 200: #dee1e1,
209
+ 300: #c8cccc,
210
+ 400: #b0b6b7,
211
+ 500: #929a9b,
212
+ 600: #6e797a,
213
+ 700: #515e5f,
214
+ 800: #364141,
215
+ 900: #273333,
216
+ 1000: #162020
217
+ ),
218
+ green: (
219
+ 0: #ebf9eb,
220
+ 100: #d7f4d7,
221
+ 200: #c2f2bd,
222
+ 300: #98e58e,
223
+ 400: #75dd66,
224
+ 500: #59cb59,
225
+ 600: #2bb656,
226
+ 700: #0ca750,
227
+ 800: #008b46,
228
+ 900: #006b40,
229
+ 1000: #08422f,
230
+ 1100: #002b20
231
+ ),
232
+ red: (
233
+ 0: #ffeae9,
234
+ 100: #ffd5d2,
235
+ 200: #ffb8b1,
236
+ 300: #ff9c8f,
237
+ 400: #ff7f6e,
238
+ 500: #f76054,
239
+ 600: #ed4c42,
240
+ 700: #db3e3e,
241
+ 800: #c63434,
242
+ 900: #992222,
243
+ 1000: #6d1313
244
+ ),
245
+ blue: (
246
+ 0: #e9f8ff,
247
+ 100: #dcf2ff,
248
+ 200: #c7e4f9,
249
+ 300: #a1d2f8,
250
+ 400: #56adf5,
251
+ 500: #3896e3,
252
+ 600: #2b87d3,
253
+ 700: #2079c3,
254
+ 800: #116daa,
255
+ 900: #0c5689,
256
+ 1000: #0a3960,
257
+ 1100: #002138
258
+ ),
259
+ teal: (
260
+ 0: #e5f9f5,
261
+ 100: #cdf7ef,
262
+ 200: #b3f2e6,
263
+ 300: #7dead5,
264
+ 400: #24e0c5,
265
+ 500: #08c4b2,
266
+ 600: #00a99c,
267
+ 700: #0b968f,
268
+ 800: #067c7c,
269
+ 900: #026661,
270
+ 1000: #083f3f,
271
+ 1100: #002528
272
+ ),
273
+ aqua: (
274
+ 0: #d9fcfb,
275
+ 100: #c5f9f9,
276
+ 200: #a5f2f2,
277
+ 300: #76e5e2,
278
+ 400: #33d6e2,
279
+ 500: #17b8ce,
280
+ 600: #0797ae,
281
+ 700: #0b8599,
282
+ 800: #0f6e84,
283
+ 900: #035e73,
284
+ 1000: #083d4f,
285
+ 1100: #002838
286
+ ),
287
+ purple: (
288
+ 0: #f2f2f9,
289
+ 100: #eaeaf9,
290
+ 200: #d8d7f9,
291
+ 300: #c1c1f7,
292
+ 400: #a193f2,
293
+ 500: #9180f4,
294
+ 600: #816fea,
295
+ 700: #6f5ed3,
296
+ 800: #5e4eba,
297
+ 900: #483a9c,
298
+ 1000: #2d246b,
299
+ 1100: #1d1d38
300
+ ),
301
+ magenta: (
302
+ 0: #fef0ff,
303
+ 100: #f9e3fc,
304
+ 200: #f4c4f7,
305
+ 300: #edadf2,
306
+ 400: #f282f5,
307
+ 500: #db61db,
308
+ 600: #c44eb9,
309
+ 700: #ac44a8,
310
+ 800: #8f3896,
311
+ 900: #6c2277,
312
+ 1000: #451551,
313
+ 1100: #29192d
314
+ ),
315
+ yellow: (
316
+ 0: #fff8e2,
317
+ 100: #fdefcd,
318
+ 200: #ffe99a,
319
+ 300: #ffe16e,
320
+ 400: #ffd943,
321
+ 500: #ffcd1c,
322
+ 600: #ffbc00,
323
+ 700: #dd9903,
324
+ 800: #ba7506,
325
+ 900: #944c0c,
326
+ 1000: #542a00,
327
+ 1100: #2d1a05
328
+ ),
329
+ pink: (
330
+ 0: #ffe9f3,
331
+ 100: #fcdbeb,
332
+ 200: #ffb5d5,
333
+ 300: #ff95c1,
334
+ 400: #ff76ae,
335
+ 500: #ef588b,
336
+ 600: #e0447c,
337
+ 700: #ce3665,
338
+ 800: #b22f5b,
339
+ 900: #931847,
340
+ 1000: #561231,
341
+ 1100: #2b1721
342
+ ),
343
+ orange: (
344
+ 0: #ffede3,
345
+ 100: #fcdccc,
346
+ 200: #ffc6a4,
347
+ 300: #ffb180,
348
+ 400: #ff9c5d,
349
+ 500: #fc8943,
350
+ 600: #f57d33,
351
+ 700: #ed7024,
352
+ 800: #ce5511,
353
+ 900: #962c0b,
354
+ 1000: #601700,
355
+ 1100: #2d130e
356
+ ),
357
+ DATAVIZ_COLORS_LIST: (#24e0c5, #a193f2, #ff76ae, #ffcd1c, #56adf5, #f282f5, #75dd66, #ff9c5d, #db3e3e, #0b968f, #6f5ed3, #ce3665, #ba7506, #2079c3, #ac44a8, #0ca750, #ed7024, #ff7f6e, #c2f2bd, #ffe99a),
358
+ DATAVIZ_COLORS_MAP: (
359
+ 1: #24e0c5,
360
+ 2: #a193f2,
361
+ 3: #ff76ae,
362
+ 4: #ffcd1c,
363
+ 5: #56adf5,
364
+ 6: #f282f5,
365
+ 7: #75dd66,
366
+ 8: #ff9c5d,
367
+ 9: #db3e3e,
368
+ 10: #0b968f,
369
+ 11: #6f5ed3,
370
+ 12: #ce3665,
371
+ 13: #ba7506,
372
+ 14: #2079c3,
373
+ 15: #ac44a8,
374
+ 16: #0ca750,
375
+ 17: #ed7024,
376
+ 18: #ff7f6e,
377
+ 19: #c2f2bd,
378
+ 20: #ffe99a
379
+ )
380
+ ),
381
+ typography: (
382
+ 100: (
383
+ fontSize: 11px,
384
+ lineHeight: 18.666666666666668px
385
+ ),
386
+ 200: (
387
+ fontSize: 13px,
388
+ lineHeight: 21.333333333333332px
389
+ ),
390
+ 300: (
391
+ fontSize: 16px,
392
+ lineHeight: 24px
393
+ ),
394
+ 400: (
395
+ fontSize: 18px,
396
+ lineHeight: 26.666666666666668px
397
+ ),
398
+ 500: (
399
+ fontSize: 21px,
400
+ lineHeight: 29.333333333333332px
401
+ ),
402
+ 600: (
403
+ fontSize: 24px,
404
+ lineHeight: 32px
405
+ ),
406
+ 700: (
407
+ fontSize: 32px,
408
+ lineHeight: 40px
409
+ ),
410
+ 800: (
411
+ fontSize: 43px,
412
+ lineHeight: 50.666666666666664px
413
+ ),
414
+ 900: (
415
+ fontSize: 57px,
416
+ lineHeight: 64px
417
+ ),
418
+ 1000: (
419
+ fontSize: 76px,
420
+ lineHeight: 80px
421
+ ),
422
+ 1100: (
423
+ fontSize: 101px,
424
+ lineHeight: 101.33333333333333px
425
+ ),
426
+ 1200: (
427
+ fontSize: 135px,
428
+ lineHeight: 125.33333333333333px
429
+ ),
430
+ typography: (
431
+ 100: (
432
+ fontSize: 11px,
433
+ lineHeight: 18.666666666666668px
434
+ ),
435
+ 200: (
436
+ fontSize: 13px,
437
+ lineHeight: 21.333333333333332px
438
+ ),
439
+ 300: (
440
+ fontSize: 16px,
441
+ lineHeight: 24px
442
+ ),
443
+ 400: (
444
+ fontSize: 18px,
445
+ lineHeight: 26.666666666666668px
446
+ ),
447
+ 500: (
448
+ fontSize: 21px,
449
+ lineHeight: 29.333333333333332px
450
+ ),
451
+ 600: (
452
+ fontSize: 24px,
453
+ lineHeight: 32px
454
+ ),
455
+ 700: (
456
+ fontSize: 32px,
457
+ lineHeight: 40px
458
+ ),
459
+ 800: (
460
+ fontSize: 43px,
461
+ lineHeight: 50.666666666666664px
462
+ ),
463
+ 900: (
464
+ fontSize: 57px,
465
+ lineHeight: 64px
466
+ ),
467
+ 1000: (
468
+ fontSize: 76px,
469
+ lineHeight: 80px
470
+ ),
471
+ 1100: (
472
+ fontSize: 101px,
473
+ lineHeight: 101.33333333333333px
474
+ ),
475
+ 1200: (
476
+ fontSize: 135px,
477
+ lineHeight: 125.33333333333333px
478
+ )
479
+ )
480
+ ),
481
+ fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif",
482
+ fontWeights: (
483
+ normal: 400,
484
+ semibold: 600,
485
+ bold: 700,
486
+ extrabold: 800
487
+ ),
488
+ space: (
489
+ 0: 0px,
490
+ 100: 2px,
491
+ 200: 4px,
492
+ 300: 8px,
493
+ 350: 12px,
494
+ 400: 16px,
495
+ 450: 24px,
496
+ 500: 32px,
497
+ 600: 40px,
498
+ space: (
499
+ 0: 0px,
500
+ 100: 2px,
501
+ 200: 4px,
502
+ 300: 8px,
503
+ 350: 12px,
504
+ 400: 16px,
505
+ 450: 24px,
506
+ 500: 32px,
507
+ 600: 40px
508
+ ),
509
+ -space: (
510
+ 0: -0px,
511
+ 100: -2px,
512
+ 200: -4px,
513
+ 300: -8px,
514
+ 350: -12px,
515
+ 400: -16px,
516
+ 450: -24px,
517
+ 500: -32px,
518
+ 600: -40px
519
+ )
520
+ ),
521
+ radii: (
522
+ 400: 4px,
523
+ 500: 6px,
524
+ 600: 8px,
525
+ 1000: 999999px,
526
+ inner: 6px,
527
+ outer: 8px,
528
+ pill: 999999px,
529
+ radii: (
530
+ 400: 4px,
531
+ 500: 6px,
532
+ 600: 8px,
533
+ 1000: 999999px,
534
+ inner: 6px,
535
+ outer: 8px,
536
+ pill: 999999px
537
+ )
538
+ ),
539
+ borders: (
540
+ 500: 1px solid
541
+ ),
542
+ borderWidths: (
543
+ 500: 1px
544
+ ),
545
+ shadows: (
546
+ 100: 0px 2px 4px rgba(39,51,51,.24),
547
+ 200: 0px 4px 8px rgba(39,51,51,.24),
548
+ 300: 0px 8px 16px rgba(39,51,51,.24),
549
+ 400: 0px 16px 32px rgba(39,51,51,.24),
550
+ shadows: (
551
+ 100: 0px 2px 4px rgba(39,51,51,.24),
552
+ 200: 0px 4px 8px rgba(39,51,51,.24),
553
+ 300: 0px 8px 16px rgba(39,51,51,.24),
554
+ 400: 0px 16px 32px rgba(39,51,51,.24)
555
+ )
556
+ ),
557
+ easing: (
558
+ ease_in: cubic-bezier(.4, 0, .7, .2),
559
+ ease_out: cubic-bezier(0, 0, .2, 1),
560
+ ease_inout: cubic-bezier(.4, 0, .2, 1)
561
+ ),
562
+ duration: (
563
+ fast: .15s,
564
+ medium: .3s,
565
+ slow: .6s
566
+ ),
567
+ mode: dark
568
+ )
569
+ );
package/lib/themes/default/default.scss ADDED
@@ -0,0 +1,668 @@
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
+ neutral: (
306
+ 0: #FFFFFF,
307
+ 100: #f3f4f4,
308
+ 200: #dee1e1,
309
+ 300: #c8cccc,
310
+ 400: #b0b6b7,
311
+ 500: #929a9b,
312
+ 600: #6e797a,
313
+ 700: #515e5f,
314
+ 800: #364141,
315
+ 900: #273333,
316
+ 1000: #162020
317
+ ),
318
+ green: (
319
+ 0: #ebf9eb,
320
+ 100: #d7f4d7,
321
+ 200: #c2f2bd,
322
+ 300: #98e58e,
323
+ 400: #75dd66,
324
+ 500: #59cb59,
325
+ 600: #2bb656,
326
+ 700: #0ca750,
327
+ 800: #008b46,
328
+ 900: #006b40,
329
+ 1000: #08422f,
330
+ 1100: #002b20
331
+ ),
332
+ red: (
333
+ 0: #ffeae9,
334
+ 100: #ffd5d2,
335
+ 200: #ffb8b1,
336
+ 300: #ff9c8f,
337
+ 400: #ff7f6e,
338
+ 500: #f76054,
339
+ 600: #ed4c42,
340
+ 700: #db3e3e,
341
+ 800: #c63434,
342
+ 900: #992222,
343
+ 1000: #6d1313
344
+ ),
345
+ blue: (
346
+ 0: #e9f8ff,
347
+ 100: #dcf2ff,
348
+ 200: #c7e4f9,
349
+ 300: #a1d2f8,
350
+ 400: #56adf5,
351
+ 500: #3896e3,
352
+ 600: #2b87d3,
353
+ 700: #2079c3,
354
+ 800: #116daa,
355
+ 900: #0c5689,
356
+ 1000: #0a3960,
357
+ 1100: #002138
358
+ ),
359
+ teal: (
360
+ 0: #e5f9f5,
361
+ 100: #cdf7ef,
362
+ 200: #b3f2e6,
363
+ 300: #7dead5,
364
+ 400: #24e0c5,
365
+ 500: #08c4b2,
366
+ 600: #00a99c,
367
+ 700: #0b968f,
368
+ 800: #067c7c,
369
+ 900: #026661,
370
+ 1000: #083f3f,
371
+ 1100: #002528
372
+ ),
373
+ aqua: (
374
+ 0: #d9fcfb,
375
+ 100: #c5f9f9,
376
+ 200: #a5f2f2,
377
+ 300: #76e5e2,
378
+ 400: #33d6e2,
379
+ 500: #17b8ce,
380
+ 600: #0797ae,
381
+ 700: #0b8599,
382
+ 800: #0f6e84,
383
+ 900: #035e73,
384
+ 1000: #083d4f,
385
+ 1100: #002838
386
+ ),
387
+ purple: (
388
+ 0: #f2f2f9,
389
+ 100: #eaeaf9,
390
+ 200: #d8d7f9,
391
+ 300: #c1c1f7,
392
+ 400: #a193f2,
393
+ 500: #9180f4,
394
+ 600: #816fea,
395
+ 700: #6f5ed3,
396
+ 800: #5e4eba,
397
+ 900: #483a9c,
398
+ 1000: #2d246b,
399
+ 1100: #1d1d38
400
+ ),
401
+ magenta: (
402
+ 0: #fef0ff,
403
+ 100: #f9e3fc,
404
+ 200: #f4c4f7,
405
+ 300: #edadf2,
406
+ 400: #f282f5,
407
+ 500: #db61db,
408
+ 600: #c44eb9,
409
+ 700: #ac44a8,
410
+ 800: #8f3896,
411
+ 900: #6c2277,
412
+ 1000: #451551,
413
+ 1100: #29192d
414
+ ),
415
+ yellow: (
416
+ 0: #fff8e2,
417
+ 100: #fdefcd,
418
+ 200: #ffe99a,
419
+ 300: #ffe16e,
420
+ 400: #ffd943,
421
+ 500: #ffcd1c,
422
+ 600: #ffbc00,
423
+ 700: #dd9903,
424
+ 800: #ba7506,
425
+ 900: #944c0c,
426
+ 1000: #542a00,
427
+ 1100: #2d1a05
428
+ ),
429
+ pink: (
430
+ 0: #ffe9f3,
431
+ 100: #fcdbeb,
432
+ 200: #ffb5d5,
433
+ 300: #ff95c1,
434
+ 400: #ff76ae,
435
+ 500: #ef588b,
436
+ 600: #e0447c,
437
+ 700: #ce3665,
438
+ 800: #b22f5b,
439
+ 900: #931847,
440
+ 1000: #561231,
441
+ 1100: #2b1721
442
+ ),
443
+ orange: (
444
+ 0: #ffede3,
445
+ 100: #fcdccc,
446
+ 200: #ffc6a4,
447
+ 300: #ffb180,
448
+ 400: #ff9c5d,
449
+ 500: #fc8943,
450
+ 600: #f57d33,
451
+ 700: #ed7024,
452
+ 800: #ce5511,
453
+ 900: #962c0b,
454
+ 1000: #601700,
455
+ 1100: #2d130e
456
+ ),
457
+ DATAVIZ_COLORS_LIST: (#08c4b2, #6f5ed3, #ce3665, #ffcd1c, #3896e3, #db61db, #59cb59, #fc8943, #db3e3e, #026661, #a193f2, #931847, #944c0c, #0c5689, #6c2277, #006b40, #962c0b, #ff7f6e, #0ca750, #ba7506),
458
+ DATAVIZ_COLORS_MAP: (
459
+ 1: #08c4b2,
460
+ 2: #6f5ed3,
461
+ 3: #ce3665,
462
+ 4: #ffcd1c,
463
+ 5: #3896e3,
464
+ 6: #db61db,
465
+ 7: #59cb59,
466
+ 8: #fc8943,
467
+ 9: #db3e3e,
468
+ 10: #026661,
469
+ 11: #a193f2,
470
+ 12: #931847,
471
+ 13: #944c0c,
472
+ 14: #0c5689,
473
+ 15: #6c2277,
474
+ 16: #006b40,
475
+ 17: #962c0b,
476
+ 18: #ff7f6e,
477
+ 19: #0ca750,
478
+ 20: #ba7506
479
+ )
480
+ ),
481
+ typography: (
482
+ 100: (
483
+ fontSize: 11px,
484
+ lineHeight: 18.666666666666668px
485
+ ),
486
+ 200: (
487
+ fontSize: 13px,
488
+ lineHeight: 21.333333333333332px
489
+ ),
490
+ 300: (
491
+ fontSize: 16px,
492
+ lineHeight: 24px
493
+ ),
494
+ 400: (
495
+ fontSize: 18px,
496
+ lineHeight: 26.666666666666668px
497
+ ),
498
+ 500: (
499
+ fontSize: 21px,
500
+ lineHeight: 29.333333333333332px
501
+ ),
502
+ 600: (
503
+ fontSize: 24px,
504
+ lineHeight: 32px
505
+ ),
506
+ 700: (
507
+ fontSize: 32px,
508
+ lineHeight: 40px
509
+ ),
510
+ 800: (
511
+ fontSize: 43px,
512
+ lineHeight: 50.666666666666664px
513
+ ),
514
+ 900: (
515
+ fontSize: 57px,
516
+ lineHeight: 64px
517
+ ),
518
+ 1000: (
519
+ fontSize: 76px,
520
+ lineHeight: 80px
521
+ ),
522
+ 1100: (
523
+ fontSize: 101px,
524
+ lineHeight: 101.33333333333333px
525
+ ),
526
+ 1200: (
527
+ fontSize: 135px,
528
+ lineHeight: 125.33333333333333px
529
+ ),
530
+ typography: (
531
+ 100: (
532
+ fontSize: 11px,
533
+ lineHeight: 18.666666666666668px
534
+ ),
535
+ 200: (
536
+ fontSize: 13px,
537
+ lineHeight: 21.333333333333332px
538
+ ),
539
+ 300: (
540
+ fontSize: 16px,
541
+ lineHeight: 24px
542
+ ),
543
+ 400: (
544
+ fontSize: 18px,
545
+ lineHeight: 26.666666666666668px
546
+ ),
547
+ 500: (
548
+ fontSize: 21px,
549
+ lineHeight: 29.333333333333332px
550
+ ),
551
+ 600: (
552
+ fontSize: 24px,
553
+ lineHeight: 32px
554
+ ),
555
+ 700: (
556
+ fontSize: 32px,
557
+ lineHeight: 40px
558
+ ),
559
+ 800: (
560
+ fontSize: 43px,
561
+ lineHeight: 50.666666666666664px
562
+ ),
563
+ 900: (
564
+ fontSize: 57px,
565
+ lineHeight: 64px
566
+ ),
567
+ 1000: (
568
+ fontSize: 76px,
569
+ lineHeight: 80px
570
+ ),
571
+ 1100: (
572
+ fontSize: 101px,
573
+ lineHeight: 101.33333333333333px
574
+ ),
575
+ 1200: (
576
+ fontSize: 135px,
577
+ lineHeight: 125.33333333333333px
578
+ )
579
+ )
580
+ ),
581
+ fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif",
582
+ fontWeights: (
583
+ normal: 400,
584
+ semibold: 600,
585
+ bold: 700,
586
+ extrabold: 800
587
+ ),
588
+ space: (
589
+ 0: 0px,
590
+ 100: 2px,
591
+ 200: 4px,
592
+ 300: 8px,
593
+ 350: 12px,
594
+ 400: 16px,
595
+ 450: 24px,
596
+ 500: 32px,
597
+ 600: 40px,
598
+ space: (
599
+ 0: 0px,
600
+ 100: 2px,
601
+ 200: 4px,
602
+ 300: 8px,
603
+ 350: 12px,
604
+ 400: 16px,
605
+ 450: 24px,
606
+ 500: 32px,
607
+ 600: 40px
608
+ ),
609
+ -space: (
610
+ 0: -0px,
611
+ 100: -2px,
612
+ 200: -4px,
613
+ 300: -8px,
614
+ 350: -12px,
615
+ 400: -16px,
616
+ 450: -24px,
617
+ 500: -32px,
618
+ 600: -40px
619
+ )
620
+ ),
621
+ radii: (
622
+ 400: 4px,
623
+ 500: 6px,
624
+ 600: 8px,
625
+ 1000: 999999px,
626
+ inner: 6px,
627
+ outer: 8px,
628
+ pill: 999999px,
629
+ radii: (
630
+ 400: 4px,
631
+ 500: 6px,
632
+ 600: 8px,
633
+ 1000: 999999px,
634
+ inner: 6px,
635
+ outer: 8px,
636
+ pill: 999999px
637
+ )
638
+ ),
639
+ borders: (
640
+ 500: 1px solid
641
+ ),
642
+ borderWidths: (
643
+ 500: 1px
644
+ ),
645
+ shadows: (
646
+ 100: 0px 2px 4px rgba(39,51,51,.24),
647
+ 200: 0px 4px 8px rgba(39,51,51,.24),
648
+ 300: 0px 8px 16px rgba(39,51,51,.24),
649
+ 400: 0px 16px 32px rgba(39,51,51,.24),
650
+ shadows: (
651
+ 100: 0px 2px 4px rgba(39,51,51,.24),
652
+ 200: 0px 4px 8px rgba(39,51,51,.24),
653
+ 300: 0px 8px 16px rgba(39,51,51,.24),
654
+ 400: 0px 16px 32px rgba(39,51,51,.24)
655
+ )
656
+ ),
657
+ easing: (
658
+ ease_in: cubic-bezier(.4, 0, .7, .2),
659
+ ease_out: cubic-bezier(0, 0, .2, 1),
660
+ ease_inout: cubic-bezier(.4, 0, .2, 1)
661
+ ),
662
+ duration: (
663
+ fast: .15s,
664
+ medium: .3s,
665
+ slow: .6s
666
+ )
667
+ )
668
+ );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/racine",
3
- "version": "8.6.1",
3
+ "version": "8.6.3-dar10.2",
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",