@sproutsocial/racine 8.7.0 → 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 (33) hide show
  1. package/__flow__/Button/styles.js +1 -1
  2. package/__flow__/Card/styles.js +1 -1
  3. package/__flow__/Drawer/styles.js +1 -1
  4. package/__flow__/KeyboardKey/styles.js +1 -1
  5. package/__flow__/Menu/index.stories.js +1 -1
  6. package/__flow__/Modal/__snapshots__/index.test.js.snap +1 -1
  7. package/__flow__/Modal/styles.js +1 -1
  8. package/__flow__/Popout/index.js +1 -1
  9. package/__flow__/Tooltip/index.js +1 -1
  10. package/__flow__/themes/dark/theme.js +171 -158
  11. package/__flow__/themes/default/theme.js +7 -8
  12. package/__flow__/types/system-props.flow.js +1 -2
  13. package/commonjs/Button/styles.js +1 -1
  14. package/commonjs/Card/styles.js +1 -1
  15. package/commonjs/Drawer/styles.js +1 -1
  16. package/commonjs/KeyboardKey/styles.js +1 -1
  17. package/commonjs/Modal/styles.js +1 -1
  18. package/commonjs/Popout/index.js +1 -1
  19. package/commonjs/Tooltip/index.js +1 -1
  20. package/commonjs/themes/dark/theme.js +171 -156
  21. package/commonjs/themes/default/theme.js +7 -7
  22. package/dist/themes/dark.scss +11 -10
  23. package/dist/themes/default.scss +9 -14
  24. package/lib/Button/styles.js +1 -1
  25. package/lib/Card/styles.js +1 -1
  26. package/lib/Drawer/styles.js +1 -1
  27. package/lib/KeyboardKey/styles.js +1 -1
  28. package/lib/Modal/styles.js +1 -1
  29. package/lib/Popout/index.js +1 -1
  30. package/lib/Tooltip/index.js +1 -1
  31. package/lib/themes/dark/theme.js +167 -155
  32. package/lib/themes/default/theme.js +7 -7
  33. package/package.json +5 -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,185 +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
  }
155
+ }
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
191
188
  },
192
- dataviz: {
193
- map: _datavizPalette.datavizPalette.DATAVIZ_COLORS_MAP,
194
- list: _datavizPalette.datavizPalette.DATAVIZ_COLORS_LIST
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
195
198
  }
196
- }, _datavizPalette.datavizPalette),
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,
197
212
  mode: "dark"
198
213
  });
199
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,
@@ -291,10 +294,9 @@ var borderWidths = {
291
294
  };
292
295
  exports.borderWidths = borderWidths;
293
296
  var shadows = {
294
- "100": _seedsDepth.default.ELEVATION_LEVEL_100,
295
- "200": _seedsDepth.default.ELEVATION_LEVEL_200,
296
- "300": _seedsDepth.default.ELEVATION_LEVEL_300,
297
- "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"
298
300
  };
299
301
  exports.shadows = shadows;
300
302
  var easing = {
@@ -330,9 +332,7 @@ var theme = {
330
332
  }),
331
333
  borders: borders,
332
334
  borderWidths: borderWidths,
333
- shadows: _extends({}, shadows, {
334
- shadows: shadows
335
- }),
335
+ shadows: shadows,
336
336
  easing: easing,
337
337
  duration: duration
338
338
  };
package/dist/themes/dark.scss CHANGED
@@ -1,5 +1,10 @@
1
1
  $dark: (
2
2
  __esModule: true,
3
+ shadows: (
4
+ low: 0px 2px 4px rgba(39,51,51,.24) #040404FF,
5
+ medium: 0px 8px 16px rgba(39,51,51,.24) #040404FF,
6
+ high: 0px 16px 32px rgba(39,51,51,.24) #040404FF
7
+ ),
3
8
  default: (
4
9
  breakpoints: (900px, 1200px, 1500px, 1800px),
5
10
  colors: (
@@ -175,6 +180,9 @@ $dark: (
175
180
  selected: #FFFFFF
176
181
  )
177
182
  ),
183
+ elevation: (
184
+ base: #040404
185
+ ),
178
186
  network: (
179
187
  twitter: #1da1f2,
180
188
  twitter_like: #e0245e,
@@ -568,16 +576,9 @@ $dark: (
568
576
  500: 1px
569
577
  ),
570
578
  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
- )
579
+ low: 0px 2px 4px rgba(39,51,51,.24) #040404FF,
580
+ medium: 0px 8px 16px rgba(39,51,51,.24) #040404FF,
581
+ high: 0px 16px 32px rgba(39,51,51,.24) #040404FF
581
582
  ),
582
583
  easing: (
583
584
  ease_in: cubic-bezier(.4, 0, .7, .2),
package/dist/themes/default.scss CHANGED
@@ -85,10 +85,9 @@ $default: (
85
85
  500: 1px
86
86
  ),
87
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)
88
+ low: 0px 2px 4px rgba(39,51,51,.24) #2733333D,
89
+ medium: 0px 8px 16px rgba(39,51,51,.24) #2733333D,
90
+ high: 0px 16px 32px rgba(39,51,51,.24) #2733333D
92
91
  ),
93
92
  easing: (
94
93
  ease_in: cubic-bezier(.4, 0, .7, .2),
@@ -275,6 +274,9 @@ $default: (
275
274
  selected: #364141
276
275
  )
277
276
  ),
277
+ elevation: (
278
+ base: #2733333D
279
+ ),
278
280
  network: (
279
281
  twitter: #1da1f2,
280
282
  twitter_like: #e0245e,
@@ -668,16 +670,9 @@ $default: (
668
670
  500: 1px
669
671
  ),
670
672
  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
- )
673
+ low: 0px 2px 4px rgba(39,51,51,.24) #2733333D,
674
+ medium: 0px 8px 16px rgba(39,51,51,.24) #2733333D,
675
+ high: 0px 16px 32px rgba(39,51,51,.24) #2733333D
681
676
  ),
682
677
  easing: (
683
678
  ease_in: cubic-bezier(.4, 0, .7, .2),
package/lib/Button/styles.js CHANGED
@@ -32,7 +32,7 @@ var Container = styled.button.withConfig({
32
32
  }, function (props) {
33
33
  return props.theme.colors.button[props.appearance].background.hover;
34
34
  }, function (props) {
35
- return props.appearance === "placeholder" ? props.theme.shadows[100] : "none";
35
+ return props.appearance === "placeholder" ? props.theme.shadows.low : "none";
36
36
  }, function (props) {
37
37
  return props.theme.colors.button[props.appearance].text.hover;
38
38
  }, function (props) {
package/lib/Card/styles.js CHANGED
@@ -9,7 +9,7 @@ var Container = styled(Box).withConfig({
9
9
  }, function (props) {
10
10
  return props.theme.radii[500];
11
11
  }, function (props) {
12
- return props.theme.shadows[100];
12
+ return props.theme.shadows.low;
13
13
  }, function (props) {
14
14
  return props.theme.duration.medium;
15
15
  }, function (props) {
package/lib/Drawer/styles.js CHANGED
@@ -13,7 +13,7 @@ var Container = styled.div.withConfig({
13
13
  }, function (props) {
14
14
  return props.theme.colors.container.background.base;
15
15
  }, function (props) {
16
- return props.theme.shadows[400];
16
+ return props.theme.shadows.high;
17
17
  }, function (props) {
18
18
  return css(["", ":", "px;"], props.direction, props.offset);
19
19
  }, COMMON);
package/lib/KeyboardKey/styles.js CHANGED
@@ -12,7 +12,7 @@ var Container = styled.div.withConfig({
12
12
  }, function (props) {
13
13
  return props.theme.radii[500];
14
14
  }, function (props) {
15
- return props.theme.shadows[100];
15
+ return props.theme.shadows.low;
16
16
  }, function (props) {
17
17
  return props.theme.space[200];
18
18
  }, COMMON);
package/lib/Modal/styles.js CHANGED
@@ -53,7 +53,7 @@ export var Container = styled(ReactModalAdapter).withConfig({
53
53
  }, function (props) {
54
54
  return props.theme.radii[500];
55
55
  }, function (props) {
56
- return props.theme.shadows[300];
56
+ return props.theme.shadows.medium;
57
57
  }, function (props) {
58
58
  return props.theme.colors.text.body;
59
59
  }, BODY_PADDING, BODY_PADDING, BODY_PADDING, width, COMMON);
package/lib/Popout/index.js CHANGED
@@ -267,7 +267,7 @@ Popout.Content = function (_ref4) {
267
267
  border: 500,
268
268
  borderColor: "container.border.base",
269
269
  borderRadius: "outer",
270
- boxShadow: 300,
270
+ boxShadow: "medium",
271
271
  p: 400,
272
272
  m: 300
273
273
  }, rest), children);
package/lib/Tooltip/index.js CHANGED
@@ -118,7 +118,7 @@ var Content = function Content(_ref2) {
118
118
  m: 200,
119
119
  color: "text.body",
120
120
  bg: "container.background.base",
121
- boxShadow: 300,
121
+ boxShadow: "medium",
122
122
  border: 500,
123
123
  borderColor: "container.border.base" // $FlowIssue - upgrade v0.112.0
124
124