@sproutsocial/racine 8.8.0-dar35-beta.0 → 9.1.0-token-beta.0

package/commonjs/themes/dark/theme.js

@@ -1,200 +1,221 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports.default = exports.shadows = 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");
 
 var _decorativePalettes = require("./decorative-palettes");
 
+var _interact = _interopRequireDefault(require("../utils/interact"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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 darkTheme = _extends({}, _theme.default, {
-  colors: _extends({}, _theme.default.colors, {
-    app: {
+var MODE = "default-dark";
+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, {
+  utils: {
+    interact: (0, _interact.default)(MODE)
+  },
+  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: {
       background: {
-        base: _seedsColor.default.COLOR_NEUTRAL_1000
+        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
       }
     },
-    container: {
+    secondary: {
       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
+        base: "transparent",
+        hover: _seedsColor.default.COLOR_NEUTRAL_100,
+        active: _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
+        base: _seedsColor.default.COLOR_NEUTRAL_0
+      },
+      text: {
+        base: _seedsColor.default.COLOR_NEUTRAL_0,
+        hover: _seedsColor.default.COLOR_NEUTRAL_800
       }
     },
-    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
-        }
-      },
-      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
-        }
+    pill: {
+      background: {
+        base: "transparent",
+        hover: _seedsColor.default.COLOR_NEUTRAL_1000,
+        active: _seedsColor.default.COLOR_NEUTRAL_900
       },
-      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_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
       },
-      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
-        }
+      border: {
+        base: "transparent"
       },
-      unstyled: {
-        background: {
-          base: "transparent"
-        },
-        border: {
-          base: "transparent"
-        },
-        text: {
-          base: _seedsColor.default.COLOR_NEUTRAL_300,
-          hover: _seedsColor.default.COLOR_NEUTRAL_200
-        }
+      text: {
+        base: _seedsColor.default.COLOR_NEUTRAL_900,
+        hover: _seedsColor.default.COLOR_NEUTRAL_1000
       }
     },
-    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: {
+    placeholder: {
       background: {
-        base: _seedsColor.default.COLOR_NEUTRAL_900,
-        selected: _seedsColor.default.COLOR_NEUTRAL_0
+        base: "transparent",
+        hover: _seedsColor.default.COLOR_NEUTRAL_1100,
+        active: _seedsColor.default.COLOR_NEUTRAL_1100
       },
       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
+      },
+      text: {
+        base: _seedsColor.default.COLOR_BLUE_400,
+        hover: _seedsColor.default.COLOR_BLUE_300
       }
     },
-    listItem: {
+    unstyled: {
       background: {
-        base: "transparent",
-        hover: _seedsColor.default.COLOR_NEUTRAL_800,
-        selected: _seedsColor.default.COLOR_NEUTRAL_0
+        base: "transparent"
+      },
+      border: {
+        base: "transparent"
+      },
+      text: {
+        base: _seedsColor.default.COLOR_NEUTRAL_300,
+        hover: _seedsColor.default.COLOR_NEUTRAL_200
       }
+    }
+  },
+  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
     },
-    dataviz: {
-      map: _datavizPalette.datavizPalette.DATAVIZ_COLORS_MAP,
-      list: _datavizPalette.datavizPalette.DATAVIZ_COLORS_LIST
+    placeholder: {
+      base: _seedsColor.default.COLOR_NEUTRAL_500
+    }
+  },
+  listItem: {
+    background: {
+      base: "transparent",
+      hover: _seedsColor.default.COLOR_NEUTRAL_800,
+      selected: _seedsColor.default.COLOR_NEUTRAL_0
     }
-  }, _datavizPalette.datavizPalette),
-  mode: "dark"
+  },
+  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,
+  mode: MODE
 });
 
 var _default = darkTheme;

package/commonjs/themes/default/theme.js

@@ -23,12 +23,15 @@ var _seedsMotion = _interopRequireDefault(require("@sproutsocial/seeds-motion"))
 
 var _seedsBorder = _interopRequireDefault(require("@sproutsocial/seeds-border"));
 
+var _interact = _interopRequireDefault(require("../utils/interact"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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 breakpoints = ["900px", "1200px", "1500px", "1800px"];
 exports.breakpoints = breakpoints;
+var MODE = "default-light";
 
 var colors = _extends({
   app: {
@@ -203,6 +206,9 @@ 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,
@@ -291,10 +297,9 @@ var borderWidths = {
 };
 exports.borderWidths = borderWidths;
 var shadows = {
-  "100": _seedsDepth.default.ELEVATION_LEVEL_100,
-  "200": _seedsDepth.default.ELEVATION_LEVEL_200,
-  "300": _seedsDepth.default.ELEVATION_LEVEL_300,
-  "400": _seedsDepth.default.ELEVATION_LEVEL_400
+  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"
 };
 exports.shadows = shadows;
 var easing = {
@@ -310,6 +315,9 @@ var duration = {
 };
 exports.duration = duration;
 var theme = {
+  utils: {
+    interact: (0, _interact.default)(MODE)
+  },
   breakpoints: breakpoints,
   colors: colors,
   typography: _extends({}, typography, {
@@ -330,11 +338,10 @@ var theme = {
   }),
   borders: borders,
   borderWidths: borderWidths,
-  shadows: _extends({}, shadows, {
-    shadows: shadows
-  }),
+  shadows: shadows,
   easing: easing,
-  duration: duration
+  duration: duration,
+  mode: MODE
 };
 var _default = theme;
 exports.default = _default;

package/commonjs/themes/utils/interact.js

@@ -0,0 +1,19 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _polished = require("polished");
+
+var interact = function interact(mode) {
+  return function (themeValue) {
+    if (mode === "default-dark") {
+      return (0, _polished.lighten)(0.2, themeValue);
+    } else {
+      return (0, _polished.darken)(0.2, themeValue);
+    }
+  };
+};
+
+var _default = interact;
+exports.default = _default;

package/dist/themes/_themes.scss

@@ -3,25 +3,21 @@
 
 // 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";
+@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")
+   light: 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--#{$theme} & {
       $theme-map: () !global;
       @each $key, $submap in $map {
         $value: map-get(map-get($themes, $theme), "#{$key}");
@@ -37,78 +33,79 @@ $themes: (
 // 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, ".");
+  $keys: _str-split($key, ".");
   @return _map-deep-get($theme-map, $keys);
 }
 
-// These functions are convenience methods to get theme values for subsets of the theme.
+// The rest of the 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, ".");
+  $keys: _str-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, ".");
+  $keys: _str-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, ".");
+  $keys: _str-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, ".");
+  $keys: _str-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, ".");
+  $keys: _str-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, ".");
+  $keys: _str-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, ".");
+  $keys: _str-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, ".");
+  $keys: _str-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, ".");
+  $keys: _str-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, ".");
+  $keys: _str-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.
+// If you import this file with @use, these functions will be excluded because they are private.
 
 // Via https://stackoverflow.com/a/42295154
-// Only works with a single-character separator
-@function _string-split($string, $separator) {
+// Used to split period-separated object keys, e.g. "colors.text.body" => ["colors", "text", "body"]
+// Only works with a single-character separator.
+@function _str-split($string, $separator) {
   // empty array/list
   $split-arr: ();
   // first index of separator in string
@@ -131,7 +128,8 @@ $themes: (
 }
 
 // Adapted from https://css-tricks.com/snippets/sass/deep-getset-maps/
-// Iterates over a list of keys to read multi-level maps
+// Iterates over a list of keys to read multi-level maps.
+// e.g., _map-deep-get((colors: (text: (body: "#364141"))), ["colors", "text", "body"]) => "#364141"
 @function _map-deep-get($map, $keys) {
   @each $key in $keys {
     $map: map-get($map, $key);

package/dist/themes/dark.scss

@@ -1,6 +1,14 @@
 $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: (
+    utils: (
+      
+    ),
     breakpoints: (900px, 1200px, 1500px, 1800px),
     colors: (
       app: (
@@ -175,6 +183,9 @@ $dark: (
           selected: #FFFFFF
         )
       ),
+      elevation: (
+        base: #040404
+      ),
       network: (
         twitter: #1da1f2,
         twitter_like: #e0245e,
@@ -401,6 +412,9 @@ $dark: (
         18: #ff7f6e,
         19: #c2f2bd,
         20: #ffe99a
+      ),
+      utils: (
+        
       )
     ),
     typography: (
@@ -568,16 +582,9 @@ $dark: (
       500: 1px
     ),
     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),
-      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)
-      )
+      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
     ),
     easing: (
       ease_in: cubic-bezier(.4, 0, .7, .2),
@@ -589,6 +596,6 @@ $dark: (
       medium: .3s,
       slow: .6s
     ),
-    mode: dark
+    mode: default-dark
   )
 );