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

package/commonjs/Button/styles.js

@@ -47,7 +47,7 @@ var Container = _styledComponents.default.button.withConfig({
 }, function (props) {
   return props.theme.colors.button[props.appearance].background.hover;
 }, function (props) {
-  return props.appearance === "placeholder" ? props.theme.shadows.low : "none";
+  return props.appearance === "placeholder" ? props.theme.shadows[100] : "none";
 }, function (props) {
   return props.theme.colors.button[props.appearance].text.hover;
 }, function (props) {

package/commonjs/Card/styles.js

@@ -19,7 +19,7 @@ var Container = (0, _styledComponents.default)(_Box.default).withConfig({
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {
-  return props.theme.shadows.low;
+  return props.theme.shadows[100];
 }, function (props) {
   return props.theme.duration.medium;
 }, function (props) {

package/commonjs/Drawer/styles.js

@@ -29,7 +29,7 @@ var Container = _styledComponents.default.div.withConfig({
 }, function (props) {
   return props.theme.colors.container.background.base;
 }, function (props) {
-  return props.theme.shadows.high;
+  return props.theme.shadows[400];
 }, function (props) {
   return (0, _styledComponents.css)(["", ":", "px;"], props.direction, props.offset);
 }, _systemProps.COMMON);

package/commonjs/KeyboardKey/styles.js

@@ -21,7 +21,7 @@ var Container = _styledComponents.default.div.withConfig({
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {
-  return props.theme.shadows.low;
+  return props.theme.shadows[100];
 }, function (props) {
   return props.theme.space[200];
 }, _systemProps.COMMON);

package/commonjs/Modal/styles.js

@@ -72,7 +72,7 @@ var Container = (0, _styledComponents.default)(ReactModalAdapter).withConfig({
 }, function (props) {
   return props.theme.radii[500];
 }, function (props) {
-  return props.theme.shadows.medium;
+  return props.theme.shadows[300];
 }, function (props) {
   return props.theme.colors.text.body;
 }, BODY_PADDING, BODY_PADDING, BODY_PADDING, _styledSystem.width, _systemProps.COMMON);

package/commonjs/Popout/index.js

@@ -290,7 +290,7 @@ Popout.Content = function (_ref4) {
     border: 500,
     borderColor: "container.border.base",
     borderRadius: "outer",
-    boxShadow: "medium",
+    boxShadow: 300,
     p: 400,
     m: 300
   }, rest), children);

package/commonjs/Tooltip/index.js

@@ -132,7 +132,7 @@ var Content = function Content(_ref2) {
     m: 200,
     color: "text.body",
     bg: "container.background.base",
-    boxShadow: "medium",
+    boxShadow: 300,
     border: 500,
     borderColor: "container.border.base" // $FlowIssue - upgrade v0.112.0
 

package/commonjs/themes/dark/theme.js

@@ -1,12 +1,10 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.shadows = void 0;
+exports.default = void 0;
 
 var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
 
-var _seedsDepth = _interopRequireDefault(require("@sproutsocial/seeds-depth"));
-
 var _theme = _interopRequireDefault(require("../default/theme"));
 
 var _datavizPalette = require("./dataviz-palette");
@@ -17,198 +15,185 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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); }
 
-var shadows = {
-  low: _seedsDepth.default.ELEVATION_LEVEL_100 + " " + _seedsColor.default.COLOR_NEUTRAL_1100 + "FF",
-  medium: _seedsDepth.default.ELEVATION_LEVEL_300 + " " + _seedsColor.default.COLOR_NEUTRAL_1100 + "FF",
-  high: _seedsDepth.default.ELEVATION_LEVEL_400 + " " + _seedsColor.default.COLOR_NEUTRAL_1100 + "FF"
-};
-exports.shadows = shadows;
-
-var colors = _extends({}, _theme.default.colors, {
-  app: {
-    background: {
-      base: _seedsColor.default.COLOR_NEUTRAL_1000
-    }
-  },
-  container: {
-    background: {
-      base: _seedsColor.default.COLOR_NEUTRAL_900,
-      success: _decorativePalettes.green.background,
-      warning: _decorativePalettes.yellow.background,
-      error: _decorativePalettes.red.background,
-      info: _decorativePalettes.blue.background,
-      opportunity: _decorativePalettes.purple.background,
-      danger: _decorativePalettes.red.background,
-      decorative: {
-        green: _decorativePalettes.green.background,
-        blue: _decorativePalettes.blue.background,
-        purple: _decorativePalettes.purple.background,
-        yellow: _decorativePalettes.yellow.background,
-        orange: _decorativePalettes.orange.background,
-        red: _decorativePalettes.red.background,
-        neutral: _decorativePalettes.neutral.background
-      },
-      selected: _seedsColor.default.COLOR_NEUTRAL_0
-    },
-    border: {
-      base: _seedsColor.default.COLOR_NEUTRAL_1100,
-      success: _decorativePalettes.green.highlight,
-      warning: _decorativePalettes.yellow.highlight,
-      error: _decorativePalettes.red.highlight,
-      danger: _decorativePalettes.red.highlight,
-      info: _decorativePalettes.blue.highlight,
-      opportunity: _decorativePalettes.purple.highlight,
-      decorative: {
-        green: _decorativePalettes.green.highlight,
-        blue: _decorativePalettes.blue.highlight,
-        purple: _decorativePalettes.purple.highlight,
-        yellow: _decorativePalettes.yellow.highlight,
-        orange: _decorativePalettes.orange.highlight,
-        red: _decorativePalettes.red.highlight,
-        neutral: _decorativePalettes.neutral.highlight
-      },
-      selected: _seedsColor.default.COLOR_NEUTRAL_0
-    }
-  },
-  button: {
-    primary: {
+var darkTheme = _extends({}, _theme.default, {
+  colors: _extends({}, _theme.default.colors, {
+    app: {
       background: {
-        base: _seedsColor.default.COLOR_BLUE_400,
-        hover: _seedsColor.default.COLOR_BLUE_300,
-        active: _seedsColor.default.COLOR_BLUE_200
-      },
-      border: {
-        base: "transparent"
-      },
-      text: {
-        base: _seedsColor.default.COLOR_NEUTRAL_900,
-        hover: _seedsColor.default.COLOR_NEUTRAL_1000
+        base: _seedsColor.default.COLOR_NEUTRAL_1000
       }
     },
-    secondary: {
+    container: {
       background: {
-        base: "transparent",
-        hover: _seedsColor.default.COLOR_NEUTRAL_100,
-        active: _seedsColor.default.COLOR_NEUTRAL_0
+        base: _seedsColor.default.COLOR_NEUTRAL_900,
+        success: _decorativePalettes.green.background,
+        warning: _decorativePalettes.yellow.background,
+        error: _decorativePalettes.red.background,
+        info: _decorativePalettes.blue.background,
+        opportunity: _decorativePalettes.purple.background,
+        danger: _decorativePalettes.red.background,
+        decorative: {
+          green: _decorativePalettes.green.background,
+          blue: _decorativePalettes.blue.background,
+          purple: _decorativePalettes.purple.background,
+          yellow: _decorativePalettes.yellow.background,
+          orange: _decorativePalettes.orange.background,
+          red: _decorativePalettes.red.background,
+          neutral: _decorativePalettes.neutral.background
+        },
+        selected: _seedsColor.default.COLOR_NEUTRAL_0
       },
       border: {
-        base: _seedsColor.default.COLOR_NEUTRAL_0
-      },
-      text: {
-        base: _seedsColor.default.COLOR_NEUTRAL_0,
-        hover: _seedsColor.default.COLOR_NEUTRAL_800
+        base: _seedsColor.default.COLOR_NEUTRAL_1100,
+        success: _decorativePalettes.green.highlight,
+        warning: _decorativePalettes.yellow.highlight,
+        error: _decorativePalettes.red.highlight,
+        danger: _decorativePalettes.red.highlight,
+        info: _decorativePalettes.blue.highlight,
+        opportunity: _decorativePalettes.purple.highlight,
+        decorative: {
+          green: _decorativePalettes.green.highlight,
+          blue: _decorativePalettes.blue.highlight,
+          purple: _decorativePalettes.purple.highlight,
+          yellow: _decorativePalettes.yellow.highlight,
+          orange: _decorativePalettes.orange.highlight,
+          red: _decorativePalettes.red.highlight,
+          neutral: _decorativePalettes.neutral.highlight
+        },
+        selected: _seedsColor.default.COLOR_NEUTRAL_0
       }
     },
-    pill: {
-      background: {
-        base: "transparent",
-        hover: _seedsColor.default.COLOR_NEUTRAL_1000,
-        active: _seedsColor.default.COLOR_NEUTRAL_900
+    button: {
+      primary: {
+        background: {
+          base: _seedsColor.default.COLOR_BLUE_400,
+          hover: _seedsColor.default.COLOR_BLUE_300,
+          active: _seedsColor.default.COLOR_BLUE_200
+        },
+        border: {
+          base: "transparent"
+        },
+        text: {
+          base: _seedsColor.default.COLOR_NEUTRAL_900,
+          hover: _seedsColor.default.COLOR_NEUTRAL_1000
+        }
       },
-      border: {
-        base: "transparent"
+      secondary: {
+        background: {
+          base: "transparent",
+          hover: _seedsColor.default.COLOR_NEUTRAL_100,
+          active: _seedsColor.default.COLOR_NEUTRAL_0
+        },
+        border: {
+          base: _seedsColor.default.COLOR_NEUTRAL_0
+        },
+        text: {
+          base: _seedsColor.default.COLOR_NEUTRAL_0,
+          hover: _seedsColor.default.COLOR_NEUTRAL_800
+        }
       },
-      text: {
-        base: _seedsColor.default.COLOR_NEUTRAL_100,
-        hover: _seedsColor.default.COLOR_NEUTRAL_0
-      }
-    },
-    destructive: {
-      background: {
-        base: _seedsColor.default.COLOR_RED_400,
-        hover: _seedsColor.default.COLOR_RED_300,
-        active: _seedsColor.default.COLOR_RED_200
+      pill: {
+        background: {
+          base: "transparent",
+          hover: _seedsColor.default.COLOR_NEUTRAL_1000,
+          active: _seedsColor.default.COLOR_NEUTRAL_900
+        },
+        border: {
+          base: "transparent"
+        },
+        text: {
+          base: _seedsColor.default.COLOR_NEUTRAL_100,
+          hover: _seedsColor.default.COLOR_NEUTRAL_0
+        }
       },
-      border: {
-        base: "transparent"
+      destructive: {
+        background: {
+          base: _seedsColor.default.COLOR_RED_400,
+          hover: _seedsColor.default.COLOR_RED_300,
+          active: _seedsColor.default.COLOR_RED_200
+        },
+        border: {
+          base: "transparent"
+        },
+        text: {
+          base: _seedsColor.default.COLOR_NEUTRAL_900,
+          hover: _seedsColor.default.COLOR_NEUTRAL_1000
+        }
       },
-      text: {
-        base: _seedsColor.default.COLOR_NEUTRAL_900,
-        hover: _seedsColor.default.COLOR_NEUTRAL_1000
+      placeholder: {
+        background: {
+          base: "transparent",
+          hover: _seedsColor.default.COLOR_NEUTRAL_1100,
+          active: _seedsColor.default.COLOR_NEUTRAL_1100
+        },
+        border: {
+          base: _seedsColor.default.COLOR_NEUTRAL_500
+        },
+        text: {
+          base: _seedsColor.default.COLOR_BLUE_400,
+          hover: _seedsColor.default.COLOR_BLUE_300
+        }
+      },
+      unstyled: {
+        background: {
+          base: "transparent"
+        },
+        border: {
+          base: "transparent"
+        },
+        text: {
+          base: _seedsColor.default.COLOR_NEUTRAL_300,
+          hover: _seedsColor.default.COLOR_NEUTRAL_200
+        }
       }
     },
-    placeholder: {
+    link: {
+      base: _seedsColor.default.COLOR_BLUE_400,
+      hover: _seedsColor.default.COLOR_BLUE_300
+    },
+    text: {
+      headline: _seedsColor.default.COLOR_NEUTRAL_0,
+      subtext: _seedsColor.default.COLOR_NEUTRAL_300,
+      body: _seedsColor.default.COLOR_NEUTRAL_100,
+      inverse: _seedsColor.default.COLOR_NEUTRAL_900,
+      error: _seedsColor.default.COLOR_RED_400
+    },
+    icon: {
+      base: _seedsColor.default.COLOR_NEUTRAL_100,
+      inverse: _seedsColor.default.COLOR_NEUTRAL_900,
+      success: _decorativePalettes.green.foreground,
+      warning: _decorativePalettes.yellow.foreground,
+      error: _decorativePalettes.red.foreground,
+      danger: _decorativePalettes.red.foreground,
+      info: _decorativePalettes.blue.foreground,
+      opportunity: _decorativePalettes.purple.foreground
+    },
+    form: {
       background: {
-        base: "transparent",
-        hover: _seedsColor.default.COLOR_NEUTRAL_1100,
-        active: _seedsColor.default.COLOR_NEUTRAL_1100
+        base: _seedsColor.default.COLOR_NEUTRAL_900,
+        selected: _seedsColor.default.COLOR_NEUTRAL_0
       },
       border: {
-        base: _seedsColor.default.COLOR_NEUTRAL_500
+        base: _seedsColor.default.COLOR_NEUTRAL_500,
+        error: _decorativePalettes.red.highlight,
+        warning: _decorativePalettes.yellow.highlight,
+        selected: _seedsColor.default.COLOR_NEUTRAL_0
       },
-      text: {
-        base: _seedsColor.default.COLOR_BLUE_400,
-        hover: _seedsColor.default.COLOR_BLUE_300
+      placeholder: {
+        base: _seedsColor.default.COLOR_NEUTRAL_500
       }
     },
-    unstyled: {
+    listItem: {
       background: {
-        base: "transparent"
-      },
-      border: {
-        base: "transparent"
-      },
-      text: {
-        base: _seedsColor.default.COLOR_NEUTRAL_300,
-        hover: _seedsColor.default.COLOR_NEUTRAL_200
+        base: "transparent",
+        hover: _seedsColor.default.COLOR_NEUTRAL_800,
+        selected: _seedsColor.default.COLOR_NEUTRAL_0
       }
-    }
-  },
-  link: {
-    base: _seedsColor.default.COLOR_BLUE_400,
-    hover: _seedsColor.default.COLOR_BLUE_300
-  },
-  text: {
-    headline: _seedsColor.default.COLOR_NEUTRAL_0,
-    subtext: _seedsColor.default.COLOR_NEUTRAL_300,
-    body: _seedsColor.default.COLOR_NEUTRAL_100,
-    inverse: _seedsColor.default.COLOR_NEUTRAL_900,
-    error: _seedsColor.default.COLOR_RED_400
-  },
-  icon: {
-    base: _seedsColor.default.COLOR_NEUTRAL_100,
-    inverse: _seedsColor.default.COLOR_NEUTRAL_900,
-    success: _decorativePalettes.green.foreground,
-    warning: _decorativePalettes.yellow.foreground,
-    error: _decorativePalettes.red.foreground,
-    danger: _decorativePalettes.red.foreground,
-    info: _decorativePalettes.blue.foreground,
-    opportunity: _decorativePalettes.purple.foreground
-  },
-  form: {
-    background: {
-      base: _seedsColor.default.COLOR_NEUTRAL_900,
-      selected: _seedsColor.default.COLOR_NEUTRAL_0
-    },
-    border: {
-      base: _seedsColor.default.COLOR_NEUTRAL_500,
-      error: _decorativePalettes.red.highlight,
-      warning: _decorativePalettes.yellow.highlight,
-      selected: _seedsColor.default.COLOR_NEUTRAL_0
     },
-    placeholder: {
-      base: _seedsColor.default.COLOR_NEUTRAL_500
-    }
-  },
-  listItem: {
-    background: {
-      base: "transparent",
-      hover: _seedsColor.default.COLOR_NEUTRAL_800,
-      selected: _seedsColor.default.COLOR_NEUTRAL_0
+    dataviz: {
+      map: _datavizPalette.datavizPalette.DATAVIZ_COLORS_MAP,
+      list: _datavizPalette.datavizPalette.DATAVIZ_COLORS_LIST
     }
-  },
-  elevation: {
-    base: _seedsColor.default.COLOR_NEUTRAL_1100
-  },
-  dataviz: {
-    map: _datavizPalette.datavizPalette.DATAVIZ_COLORS_MAP,
-    list: _datavizPalette.datavizPalette.DATAVIZ_COLORS_LIST
-  }
-}, _datavizPalette.datavizPalette);
-
-var darkTheme = _extends({}, _theme.default, {
-  colors: colors,
-  shadows: shadows,
+  }, _datavizPalette.datavizPalette),
   mode: "dark"
 });
 

package/commonjs/themes/default/theme.js

@@ -203,9 +203,6 @@ var colors = _extends({
       selected: _seedsColor.default.COLOR_NEUTRAL_800
     }
   },
-  elevation: {
-    base: _seedsColor.default.COLOR_NEUTRAL_900 + "3D"
-  },
   network: {
     twitter: _seedsNetworkcolor.default.NETWORK_COLOR_TWITTER,
     twitter_like: _seedsNetworkcolor.default.NETWORK_COLOR_TWITTER_LIKE,
@@ -294,9 +291,10 @@ var borderWidths = {
 };
 exports.borderWidths = borderWidths;
 var shadows = {
-  low: _seedsDepth.default.ELEVATION_LEVEL_100 + " " + _seedsColor.default.COLOR_NEUTRAL_900 + "3D",
-  medium: _seedsDepth.default.ELEVATION_LEVEL_300 + " " + _seedsColor.default.COLOR_NEUTRAL_900 + "3D",
-  high: _seedsDepth.default.ELEVATION_LEVEL_400 + " " + _seedsColor.default.COLOR_NEUTRAL_900 + "3D"
+  "100": _seedsDepth.default.ELEVATION_LEVEL_100,
+  "200": _seedsDepth.default.ELEVATION_LEVEL_200,
+  "300": _seedsDepth.default.ELEVATION_LEVEL_300,
+  "400": _seedsDepth.default.ELEVATION_LEVEL_400
 };
 exports.shadows = shadows;
 var easing = {
@@ -332,7 +330,9 @@ var theme = {
   }),
   borders: borders,
   borderWidths: borderWidths,
-  shadows: shadows,
+  shadows: _extends({}, shadows, {
+    shadows: shadows
+  }),
   easing: easing,
   duration: duration
 };

package/dist/themes/_themes.scss

@@ -0,0 +1,140 @@
+// Inspired by https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
+// This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.
+
+// SET-UP
+// These files are auto-generated based on JS theme files, ensuring our SCSS theme variables stay in sync.
+@import "dist/themes/default.scss";
+@import "dist/themes/dark.scss";
+
+// In the JS theme files, the theme object is exported as "default" (i.e., using "export default"),
+// so we need to map-get "default" to access it.
+$themes: (
+        default: map-get($default, "default"),
+        dark: map-get($dark, "default")
+);
+
+// MIXIN
+// CSS properties that are theme-dependent must be wrapped in this mixin
+@mixin themed() {
+  @each $theme, $map in $themes {
+    // ~ selects siblings to the specified selector, * selects all children of those siblings,
+    // which makes ~ * a kind of nephew selector. Thus we can target all elements on the page even if they are
+    // not a direct descendent of the element that we apply the theme classname to.
+    // This is important for pop-ups and modals, since they are often mounted directly to the body.
+    .theme--#{$theme} ~ * & {
+      $theme-map: () !global;
+      @each $key, $submap in $map {
+        $value: map-get(map-get($themes, $theme), "#{$key}");
+        $theme-map: map-merge($theme-map, ($key: $value)) !global;
+      }
+      @content;
+      $theme-map: null !global;
+    }
+  }
+}
+
+// FUNCTIONS
+// This function will allow you to get any value from the theme.
+// @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
+@function t($key) {
+  $keys: _string-split($key, ".");
+  @return _map-deep-get($theme-map, $keys);
+}
+
+// These functions are convenience methods to get theme values for subsets of the theme.
+// @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
+@function colors($key) {
+  $keys: _string-split($key, ".");
+  @return _map-deep-get($theme-map, join("colors", $keys));
+}
+
+// @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
+@function typography($key) {
+  $keys: _string-split($key, ".");
+  @return _map-deep-get($theme-map, join("typography", $keys));
+}
+
+// @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
+@function fontWeights($key) {
+  $keys: _string-split($key, ".");
+  @return _map-deep-get($theme-map, join("fontWeights", $keys));
+}
+
+// @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
+@function space($key) {
+  $keys: _string-split($key, ".");
+  @return _map-deep-get($theme-map, join("space", $keys));
+}
+
+// @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
+@function radii($key) {
+  $keys: _string-split($key, ".");
+  @return _map-deep-get($theme-map, join("radii", $keys));
+}
+
+// @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
+@function borders($key) {
+  $keys: _string-split($key, ".");
+  @return _map-deep-get($theme-map, join("borders", $keys));
+}
+
+// @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
+@function borderWidths($key) {
+  $keys: _string-split($key, ".");
+  @return _map-deep-get($theme-map, join("borderWidths", $keys));
+}
+
+// @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
+@function shadows($key) {
+  $keys: _string-split($key, ".");
+  @return _map-deep-get($theme-map, join("shadows", $keys));
+}
+
+// @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
+@function easing($key) {
+  $keys: _string-split($key, ".");
+  @return _map-deep-get($theme-map, join("easing", $keys));
+}
+
+// @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
+@function duration($key) {
+  $keys: _string-split($key, ".");
+  @return _map-deep-get($theme-map, join("duration", $keys));
+}
+
+// UTILITIES
+// Helper functions that power the functions above. Not relevant to the theme.
+// If you import this file with @use, they will not be included.
+
+// Via https://stackoverflow.com/a/42295154
+// Only works with a single-character separator
+@function _string-split($string, $separator) {
+  // empty array/list
+  $split-arr: ();
+  // first index of separator in string
+  $index : str-index($string, $separator);
+  // loop through string
+  @while $index != null {
+    // get the substring from the first character to the separator
+    $item: str-slice($string, 1, $index - 1);
+    // push item to array
+    $split-arr: append($split-arr, $item);
+    // remove item and separator from string
+    $string: str-slice($string, $index + 1);
+    // find new index of separator
+    $index : str-index($string, $separator);
+  }
+  // add the remaining string to list (the last item)
+  $split-arr: append($split-arr, $string);
+
+  @return $split-arr;
+}
+
+// Adapted from https://css-tricks.com/snippets/sass/deep-getset-maps/
+// Iterates over a list of keys to read multi-level maps
+@function _map-deep-get($map, $keys) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}

package/dist/themes/dark.scss

@@ -1,10 +1,5 @@
 $dark: (
   __esModule: true,
-  shadows: (
-    low: 0px 2px 4px rgba(39,51,51,.24) #040404FF,
-    medium: 0px 8px 16px rgba(39,51,51,.24) #040404FF,
-    high: 0px 16px 32px rgba(39,51,51,.24) #040404FF
-  ),
   default: (
     breakpoints: (900px, 1200px, 1500px, 1800px),
     colors: (
@@ -180,9 +175,6 @@ $dark: (
           selected: #FFFFFF
         )
       ),
-      elevation: (
-        base: #040404
-      ),
       network: (
         twitter: #1da1f2,
         twitter_like: #e0245e,
@@ -576,9 +568,16 @@ $dark: (
       500: 1px
     ),
     shadows: (
-      low: 0px 2px 4px rgba(39,51,51,.24) #040404FF,
-      medium: 0px 8px 16px rgba(39,51,51,.24) #040404FF,
-      high: 0px 16px 32px rgba(39,51,51,.24) #040404FF
+      100: 0px 2px 4px rgba(39,51,51,.24),
+      200: 0px 4px 8px rgba(39,51,51,.24),
+      300: 0px 8px 16px rgba(39,51,51,.24),
+      400: 0px 16px 32px rgba(39,51,51,.24),
+      shadows: (
+        100: 0px 2px 4px rgba(39,51,51,.24),
+        200: 0px 4px 8px rgba(39,51,51,.24),
+        300: 0px 8px 16px rgba(39,51,51,.24),
+        400: 0px 16px 32px rgba(39,51,51,.24)
+      )
     ),
     easing: (
       ease_in: cubic-bezier(.4, 0, .7, .2),