@sproutsocial/racine 8.6.3 → 8.8.0-beta-shadows.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/__flow__/Button/styles.js +1 -1
  3. package/__flow__/Card/styles.js +1 -1
  4. package/__flow__/Drawer/styles.js +1 -1
  5. package/__flow__/KeyboardKey/styles.js +1 -1
  6. package/__flow__/Menu/index.stories.js +1 -1
  7. package/__flow__/Modal/__snapshots__/index.test.js.snap +1 -1
  8. package/__flow__/Modal/styles.js +1 -1
  9. package/__flow__/Popout/index.js +1 -1
  10. package/__flow__/Tooltip/index.js +1 -1
  11. package/__flow__/themes/dark/theme.js +172 -155
  12. package/__flow__/themes/default/theme.js +11 -8
  13. package/__flow__/types/system-props.flow.js +1 -2
  14. package/commonjs/Button/styles.js +1 -1
  15. package/commonjs/Card/styles.js +1 -1
  16. package/commonjs/Drawer/styles.js +1 -1
  17. package/commonjs/KeyboardKey/styles.js +1 -1
  18. package/commonjs/Modal/styles.js +1 -1
  19. package/commonjs/Popout/index.js +1 -1
  20. package/commonjs/Tooltip/index.js +1 -1
  21. package/commonjs/themes/dark/theme.js +172 -153
  22. package/commonjs/themes/default/theme.js +11 -7
  23. package/dist/themes/dark.scss +595 -0
  24. package/dist/themes/default.scss +688 -0
  25. package/lib/Button/styles.js +1 -1
  26. package/lib/Card/styles.js +1 -1
  27. package/lib/Drawer/styles.js +1 -1
  28. package/lib/KeyboardKey/styles.js +1 -1
  29. package/lib/Modal/styles.js +1 -1
  30. package/lib/Popout/index.js +1 -1
  31. package/lib/Tooltip/index.js +1 -1
  32. package/lib/themes/dark/theme.js +168 -152
  33. package/lib/themes/default/theme.js +11 -7
  34. package/package.json +6 -8
package/commonjs/themes/dark/theme.js CHANGED
@@ -1,10 +1,12 @@
1
1
  "use strict";
2
2
 
3
3
  exports.__esModule = true;
4
- exports.default = void 0;
4
+ exports.default = exports.shadows = void 0;
5
5
 
6
6
  var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
7
7
 
8
+ var _seedsDepth = _interopRequireDefault(require("@sproutsocial/seeds-depth"));
9
+
8
10
  var _theme = _interopRequireDefault(require("../default/theme"));
9
11
 
10
12
  var _datavizPalette = require("./dataviz-palette");
@@ -15,181 +17,198 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
15
17
 
16
18
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
17
19
 
18
- var darkTheme = _extends({}, _theme.default, {
19
- colors: _extends({}, _theme.default.colors, {
20
- app: {
20
+ var shadows = {
21
+ low: _seedsDepth.default.ELEVATION_LEVEL_100 + " " + _seedsColor.default.COLOR_NEUTRAL_1100 + "FF",
22
+ medium: _seedsDepth.default.ELEVATION_LEVEL_300 + " " + _seedsColor.default.COLOR_NEUTRAL_1100 + "FF",
23
+ high: _seedsDepth.default.ELEVATION_LEVEL_400 + " " + _seedsColor.default.COLOR_NEUTRAL_1100 + "FF"
24
+ };
25
+ exports.shadows = shadows;
26
+
27
+ var colors = _extends({}, _theme.default.colors, {
28
+ app: {
29
+ background: {
30
+ base: _seedsColor.default.COLOR_NEUTRAL_1000
31
+ }
32
+ },
33
+ container: {
34
+ background: {
35
+ base: _seedsColor.default.COLOR_NEUTRAL_900,
36
+ success: _decorativePalettes.green.background,
37
+ warning: _decorativePalettes.yellow.background,
38
+ error: _decorativePalettes.red.background,
39
+ info: _decorativePalettes.blue.background,
40
+ opportunity: _decorativePalettes.purple.background,
41
+ danger: _decorativePalettes.red.background,
42
+ decorative: {
43
+ green: _decorativePalettes.green.background,
44
+ blue: _decorativePalettes.blue.background,
45
+ purple: _decorativePalettes.purple.background,
46
+ yellow: _decorativePalettes.yellow.background,
47
+ orange: _decorativePalettes.orange.background,
48
+ red: _decorativePalettes.red.background,
49
+ neutral: _decorativePalettes.neutral.background
50
+ },
51
+ selected: _seedsColor.default.COLOR_NEUTRAL_0
52
+ },
53
+ border: {
54
+ base: _seedsColor.default.COLOR_NEUTRAL_1100,
55
+ success: _decorativePalettes.green.highlight,
56
+ warning: _decorativePalettes.yellow.highlight,
57
+ error: _decorativePalettes.red.highlight,
58
+ danger: _decorativePalettes.red.highlight,
59
+ info: _decorativePalettes.blue.highlight,
60
+ opportunity: _decorativePalettes.purple.highlight,
61
+ decorative: {
62
+ green: _decorativePalettes.green.highlight,
63
+ blue: _decorativePalettes.blue.highlight,
64
+ purple: _decorativePalettes.purple.highlight,
65
+ yellow: _decorativePalettes.yellow.highlight,
66
+ orange: _decorativePalettes.orange.highlight,
67
+ red: _decorativePalettes.red.highlight,
68
+ neutral: _decorativePalettes.neutral.highlight
69
+ },
70
+ selected: _seedsColor.default.COLOR_NEUTRAL_0
71
+ }
72
+ },
73
+ button: {
74
+ primary: {
21
75
  background: {
22
- base: _seedsColor.default.COLOR_NEUTRAL_1000
76
+ base: _seedsColor.default.COLOR_BLUE_400,
77
+ hover: _seedsColor.default.COLOR_BLUE_300,
78
+ active: _seedsColor.default.COLOR_BLUE_200
79
+ },
80
+ border: {
81
+ base: "transparent"
82
+ },
83
+ text: {
84
+ base: _seedsColor.default.COLOR_NEUTRAL_900,
85
+ hover: _seedsColor.default.COLOR_NEUTRAL_1000
23
86
  }
24
87
  },
25
- container: {
88
+ secondary: {
26
89
  background: {
27
- base: _seedsColor.default.COLOR_NEUTRAL_900,
28
- success: _decorativePalettes.green.background,
29
- warning: _decorativePalettes.yellow.background,
30
- error: _decorativePalettes.red.background,
31
- info: _decorativePalettes.blue.background,
32
- opportunity: _decorativePalettes.purple.background,
33
- danger: _decorativePalettes.red.background,
34
- decorative: {
35
- green: _decorativePalettes.green.background,
36
- blue: _decorativePalettes.blue.background,
37
- purple: _decorativePalettes.purple.background,
38
- yellow: _decorativePalettes.yellow.background,
39
- orange: _decorativePalettes.orange.background,
40
- red: _decorativePalettes.red.background,
41
- neutral: _decorativePalettes.neutral.background
42
- },
43
- selected: _seedsColor.default.COLOR_NEUTRAL_0
90
+ base: "transparent",
91
+ hover: _seedsColor.default.COLOR_NEUTRAL_100,
92
+ active: _seedsColor.default.COLOR_NEUTRAL_0
44
93
  },
45
94
  border: {
46
- base: _seedsColor.default.COLOR_NEUTRAL_1100,
47
- success: _decorativePalettes.green.highlight,
48
- warning: _decorativePalettes.yellow.highlight,
49
- error: _decorativePalettes.red.highlight,
50
- danger: _decorativePalettes.red.highlight,
51
- info: _decorativePalettes.blue.highlight,
52
- opportunity: _decorativePalettes.purple.highlight,
53
- decorative: {
54
- green: _decorativePalettes.green.highlight,
55
- blue: _decorativePalettes.blue.highlight,
56
- purple: _decorativePalettes.purple.highlight,
57
- yellow: _decorativePalettes.yellow.highlight,
58
- orange: _decorativePalettes.orange.highlight,
59
- red: _decorativePalettes.red.highlight,
60
- neutral: _decorativePalettes.neutral.highlight
61
- },
62
- selected: _seedsColor.default.COLOR_NEUTRAL_0
95
+ base: _seedsColor.default.COLOR_NEUTRAL_0
96
+ },
97
+ text: {
98
+ base: _seedsColor.default.COLOR_NEUTRAL_0,
99
+ hover: _seedsColor.default.COLOR_NEUTRAL_800
63
100
  }
64
101
  },
65
- button: {
66
- primary: {
67
- background: {
68
- base: _seedsColor.default.COLOR_BLUE_400,
69
- hover: _seedsColor.default.COLOR_BLUE_300,
70
- active: _seedsColor.default.COLOR_BLUE_200
71
- },
72
- border: {
73
- base: "transparent"
74
- },
75
- text: {
76
- base: _seedsColor.default.COLOR_NEUTRAL_900,
77
- hover: _seedsColor.default.COLOR_NEUTRAL_1000
78
- }
79
- },
80
- secondary: {
81
- background: {
82
- base: "transparent",
83
- hover: _seedsColor.default.COLOR_NEUTRAL_100,
84
- active: _seedsColor.default.COLOR_NEUTRAL_0
85
- },
86
- border: {
87
- base: _seedsColor.default.COLOR_NEUTRAL_0
88
- },
89
- text: {
90
- base: _seedsColor.default.COLOR_NEUTRAL_0,
91
- hover: _seedsColor.default.COLOR_NEUTRAL_800
92
- }
102
+ pill: {
103
+ background: {
104
+ base: "transparent",
105
+ hover: _seedsColor.default.COLOR_NEUTRAL_1000,
106
+ active: _seedsColor.default.COLOR_NEUTRAL_900
93
107
  },
94
- pill: {
95
- background: {
96
- base: "transparent",
97
- hover: _seedsColor.default.COLOR_NEUTRAL_1000,
98
- active: _seedsColor.default.COLOR_NEUTRAL_900
99
- },
100
- border: {
101
- base: "transparent"
102
- },
103
- text: {
104
- base: _seedsColor.default.COLOR_NEUTRAL_100,
105
- hover: _seedsColor.default.COLOR_NEUTRAL_0
106
- }
108
+ border: {
109
+ base: "transparent"
107
110
  },
108
- destructive: {
109
- background: {
110
- base: _seedsColor.default.COLOR_RED_400,
111
- hover: _seedsColor.default.COLOR_RED_300,
112
- active: _seedsColor.default.COLOR_RED_200
113
- },
114
- border: {
115
- base: "transparent"
116
- },
117
- text: {
118
- base: _seedsColor.default.COLOR_NEUTRAL_900,
119
- hover: _seedsColor.default.COLOR_NEUTRAL_1000
120
- }
111
+ text: {
112
+ base: _seedsColor.default.COLOR_NEUTRAL_100,
113
+ hover: _seedsColor.default.COLOR_NEUTRAL_0
114
+ }
115
+ },
116
+ destructive: {
117
+ background: {
118
+ base: _seedsColor.default.COLOR_RED_400,
119
+ hover: _seedsColor.default.COLOR_RED_300,
120
+ active: _seedsColor.default.COLOR_RED_200
121
121
  },
122
- placeholder: {
123
- background: {
124
- base: "transparent",
125
- hover: _seedsColor.default.COLOR_NEUTRAL_1100,
126
- active: _seedsColor.default.COLOR_NEUTRAL_1100
127
- },
128
- border: {
129
- base: _seedsColor.default.COLOR_NEUTRAL_500
130
- },
131
- text: {
132
- base: _seedsColor.default.COLOR_BLUE_400,
133
- hover: _seedsColor.default.COLOR_BLUE_300
134
- }
122
+ border: {
123
+ base: "transparent"
135
124
  },
136
- unstyled: {
137
- background: {
138
- base: "transparent"
139
- },
140
- border: {
141
- base: "transparent"
142
- },
143
- text: {
144
- base: _seedsColor.default.COLOR_NEUTRAL_300,
145
- hover: _seedsColor.default.COLOR_NEUTRAL_200
146
- }
125
+ text: {
126
+ base: _seedsColor.default.COLOR_NEUTRAL_900,
127
+ hover: _seedsColor.default.COLOR_NEUTRAL_1000
147
128
  }
148
129
  },
149
- link: {
150
- base: _seedsColor.default.COLOR_BLUE_400,
151
- hover: _seedsColor.default.COLOR_BLUE_300
152
- },
153
- text: {
154
- headline: _seedsColor.default.COLOR_NEUTRAL_0,
155
- subtext: _seedsColor.default.COLOR_NEUTRAL_300,
156
- body: _seedsColor.default.COLOR_NEUTRAL_100,
157
- inverse: _seedsColor.default.COLOR_NEUTRAL_900,
158
- error: _seedsColor.default.COLOR_RED_400
159
- },
160
- icon: {
161
- base: _seedsColor.default.COLOR_NEUTRAL_100,
162
- inverse: _seedsColor.default.COLOR_NEUTRAL_900,
163
- success: _decorativePalettes.green.foreground,
164
- warning: _decorativePalettes.yellow.foreground,
165
- error: _decorativePalettes.red.foreground,
166
- danger: _decorativePalettes.red.foreground,
167
- info: _decorativePalettes.blue.foreground,
168
- opportunity: _decorativePalettes.purple.foreground
169
- },
170
- form: {
130
+ placeholder: {
171
131
  background: {
172
- base: _seedsColor.default.COLOR_NEUTRAL_900,
173
- selected: _seedsColor.default.COLOR_NEUTRAL_0
132
+ base: "transparent",
133
+ hover: _seedsColor.default.COLOR_NEUTRAL_1100,
134
+ active: _seedsColor.default.COLOR_NEUTRAL_1100
174
135
  },
175
136
  border: {
176
- base: _seedsColor.default.COLOR_NEUTRAL_500,
177
- error: _decorativePalettes.red.highlight,
178
- warning: _decorativePalettes.yellow.highlight,
179
- selected: _seedsColor.default.COLOR_NEUTRAL_0
180
- },
181
- placeholder: {
182
137
  base: _seedsColor.default.COLOR_NEUTRAL_500
138
+ },
139
+ text: {
140
+ base: _seedsColor.default.COLOR_BLUE_400,
141
+ hover: _seedsColor.default.COLOR_BLUE_300
183
142
  }
184
143
  },
185
- listItem: {
144
+ unstyled: {
186
145
  background: {
187
- base: "transparent",
188
- hover: _seedsColor.default.COLOR_NEUTRAL_800,
189
- selected: _seedsColor.default.COLOR_NEUTRAL_0
146
+ base: "transparent"
147
+ },
148
+ border: {
149
+ base: "transparent"
150
+ },
151
+ text: {
152
+ base: _seedsColor.default.COLOR_NEUTRAL_300,
153
+ hover: _seedsColor.default.COLOR_NEUTRAL_200
190
154
  }
191
155
  }
192
- }, _datavizPalette.datavizPalette),
156
+ },
157
+ link: {
158
+ base: _seedsColor.default.COLOR_BLUE_400,
159
+ hover: _seedsColor.default.COLOR_BLUE_300
160
+ },
161
+ text: {
162
+ headline: _seedsColor.default.COLOR_NEUTRAL_0,
163
+ subtext: _seedsColor.default.COLOR_NEUTRAL_300,
164
+ body: _seedsColor.default.COLOR_NEUTRAL_100,
165
+ inverse: _seedsColor.default.COLOR_NEUTRAL_900,
166
+ error: _seedsColor.default.COLOR_RED_400
167
+ },
168
+ icon: {
169
+ base: _seedsColor.default.COLOR_NEUTRAL_100,
170
+ inverse: _seedsColor.default.COLOR_NEUTRAL_900,
171
+ success: _decorativePalettes.green.foreground,
172
+ warning: _decorativePalettes.yellow.foreground,
173
+ error: _decorativePalettes.red.foreground,
174
+ danger: _decorativePalettes.red.foreground,
175
+ info: _decorativePalettes.blue.foreground,
176
+ opportunity: _decorativePalettes.purple.foreground
177
+ },
178
+ form: {
179
+ background: {
180
+ base: _seedsColor.default.COLOR_NEUTRAL_900,
181
+ selected: _seedsColor.default.COLOR_NEUTRAL_0
182
+ },
183
+ border: {
184
+ base: _seedsColor.default.COLOR_NEUTRAL_500,
185
+ error: _decorativePalettes.red.highlight,
186
+ warning: _decorativePalettes.yellow.highlight,
187
+ selected: _seedsColor.default.COLOR_NEUTRAL_0
188
+ },
189
+ placeholder: {
190
+ base: _seedsColor.default.COLOR_NEUTRAL_500
191
+ }
192
+ },
193
+ listItem: {
194
+ background: {
195
+ base: "transparent",
196
+ hover: _seedsColor.default.COLOR_NEUTRAL_800,
197
+ selected: _seedsColor.default.COLOR_NEUTRAL_0
198
+ }
199
+ },
200
+ elevation: {
201
+ base: _seedsColor.default.COLOR_NEUTRAL_1100
202
+ },
203
+ dataviz: {
204
+ map: _datavizPalette.datavizPalette.DATAVIZ_COLORS_MAP,
205
+ list: _datavizPalette.datavizPalette.DATAVIZ_COLORS_LIST
206
+ }
207
+ }, _datavizPalette.datavizPalette);
208
+
209
+ var darkTheme = _extends({}, _theme.default, {
210
+ colors: colors,
211
+ shadows: shadows,
193
212
  mode: "dark"
194
213
  });
195
214
 
package/commonjs/themes/default/theme.js CHANGED
@@ -203,6 +203,9 @@ var colors = _extends({
203
203
  selected: _seedsColor.default.COLOR_NEUTRAL_800
204
204
  }
205
205
  },
206
+ elevation: {
207
+ base: _seedsColor.default.COLOR_NEUTRAL_900 + "3D"
208
+ },
206
209
  network: {
207
210
  twitter: _seedsNetworkcolor.default.NETWORK_COLOR_TWITTER,
208
211
  twitter_like: _seedsNetworkcolor.default.NETWORK_COLOR_TWITTER_LIKE,
@@ -229,6 +232,10 @@ var colors = _extends({
229
232
  yelp: _seedsNetworkcolor.default.NETWORK_COLOR_YELP,
230
233
  whatsapp: _seedsNetworkcolor.default.NETWORK_COLOR_WHATSAPP,
231
234
  tiktok: _seedsNetworkcolor.default.NETWORK_COLOR_TIKTOK
235
+ },
236
+ dataviz: {
237
+ map: _datavizPalette.datavizPalette.DATAVIZ_COLORS_MAP,
238
+ list: _datavizPalette.datavizPalette.DATAVIZ_COLORS_LIST
232
239
  }
233
240
  }, _literalColors.default, _datavizPalette.datavizPalette);
234
241
 
@@ -287,10 +294,9 @@ var borderWidths = {
287
294
  };
288
295
  exports.borderWidths = borderWidths;
289
296
  var shadows = {
290
- "100": _seedsDepth.default.ELEVATION_LEVEL_100,
291
- "200": _seedsDepth.default.ELEVATION_LEVEL_200,
292
- "300": _seedsDepth.default.ELEVATION_LEVEL_300,
293
- "400": _seedsDepth.default.ELEVATION_LEVEL_400
297
+ low: _seedsDepth.default.ELEVATION_LEVEL_100 + " " + _seedsColor.default.COLOR_NEUTRAL_900 + "3D",
298
+ medium: _seedsDepth.default.ELEVATION_LEVEL_300 + " " + _seedsColor.default.COLOR_NEUTRAL_900 + "3D",
299
+ high: _seedsDepth.default.ELEVATION_LEVEL_400 + " " + _seedsColor.default.COLOR_NEUTRAL_900 + "3D"
294
300
  };
295
301
  exports.shadows = shadows;
296
302
  var easing = {
@@ -326,9 +332,7 @@ var theme = {
326
332
  }),
327
333
  borders: borders,
328
334
  borderWidths: borderWidths,
329
- shadows: _extends({}, shadows, {
330
- shadows: shadows
331
- }),
335
+ shadows: shadows,
332
336
  easing: easing,
333
337
  duration: duration
334
338
  };