@sproutsocial/racine 9.1.1-theme-extension.0 → 10.0.0-dar105-beta.0

package/commonjs/themes/dark/theme.js

@@ -1,196 +1,227 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports.default = exports.shadows = void 0;
 
 var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
 
-var _theme = _interopRequireDefault(require("../default/theme"));
+var _seedsDepth = _interopRequireDefault(require("@sproutsocial/seeds-depth"));
+
+var _theme = _interopRequireDefault(require("../light/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 = "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,
+      positive_sentiment: _seedsColor.default.COLOR_BLUE_500,
+      negative_sentiment: _seedsColor.default.COLOR_RED_500,
+      neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_300
+    },
+    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
       }
     }
-  }, _datavizPalette.datavizPalette),
-  mode: "dark"
+  },
+  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,
+    positive_sentiment: _seedsColor.default.COLOR_BLUE_700,
+    negative_sentiment: _seedsColor.default.COLOR_RED_600,
+    neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_600
+  },
+  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
+    }
+  },
+  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 → light}/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 = "light";
 
 var colors = _extends({
   app: {
@@ -54,7 +57,10 @@ var colors = _extends({
         red: _decorativePalettes.red.background,
         neutral: _decorativePalettes.neutral.background
       },
-      selected: _seedsColor.default.COLOR_NEUTRAL_800
+      selected: _seedsColor.default.COLOR_NEUTRAL_800,
+      positive_sentiment: _seedsColor.default.COLOR_BLUE_500,
+      negative_sentiment: _seedsColor.default.COLOR_RED_500,
+      neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_300
     },
     border: {
       base: _seedsColor.default.COLOR_NEUTRAL_200,
@@ -179,7 +185,10 @@ var colors = _extends({
     error: _decorativePalettes.red.foreground,
     danger: _decorativePalettes.red.foreground,
     info: _decorativePalettes.blue.foreground,
-    opportunity: _decorativePalettes.purple.foreground
+    opportunity: _decorativePalettes.purple.foreground,
+    positive_sentiment: _seedsColor.default.COLOR_BLUE_700,
+    negative_sentiment: _seedsColor.default.COLOR_RED_600,
+    neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_600
   },
   form: {
     background: {
@@ -203,6 +212,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,
@@ -229,6 +241,10 @@ var colors = _extends({
     yelp: _seedsNetworkcolor.default.NETWORK_COLOR_YELP,
     whatsapp: _seedsNetworkcolor.default.NETWORK_COLOR_WHATSAPP,
     tiktok: _seedsNetworkcolor.default.NETWORK_COLOR_TIKTOK
+  },
+  dataviz: {
+    map: _datavizPalette.datavizPalette.DATAVIZ_COLORS_MAP,
+    list: _datavizPalette.datavizPalette.DATAVIZ_COLORS_LIST
   }
 }, _literalColors.default, _datavizPalette.datavizPalette);
 
@@ -287,10 +303,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 = {
@@ -306,6 +321,9 @@ var duration = {
 };
 exports.duration = duration;
 var theme = {
+  utils: {
+    interact: (0, _interact.default)(MODE)
+  },
   breakpoints: breakpoints,
   colors: colors,
   typography: _extends({}, typography, {
@@ -326,11 +344,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 === "dark") {
+      return (0, _polished.lighten)(0.2, themeValue);
+    } else {
+      return (0, _polished.darken)(0.2, themeValue);
+    }
+  };
+};
+
+var _default = interact;
+exports.default = _default;

package/commonjs/types/theme.colors.flow.js

@@ -1,5 +1,5 @@
 "use strict";
 
-var _literalColors = _interopRequireDefault(require("../themes/default/literal-colors"));
+var _literalColors = _interopRequireDefault(require("../themes/light/literal-colors"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/commonjs/types/theme.flow.js

@@ -1,3 +1,3 @@
 "use strict";
 
-var _theme = require("../themes/default/theme");
+var _theme = require("../themes/light/theme");

package/commonjs/utils/mixins.js

@@ -5,7 +5,7 @@ exports.disabled = exports.pill = exports.focusRing = exports.visuallyHidden = e
 
 var _styledComponents = require("styled-components");
 
-var _theme = _interopRequireDefault(require("../themes/default/theme"));
+var _theme = _interopRequireDefault(require("../themes/light/theme"));
 
 var _polished = require("polished");
 

package/commonjs/utils/responsiveProps/index.js

@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports.normalizeResponsiveProp = void 0;
 
-var _theme = _interopRequireDefault(require("../../themes/default/theme"));
+var _theme = _interopRequireDefault(require("../../themes/light/theme"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/dist/themes/dark/_themed.scss

@@ -0,0 +1,133 @@
+// 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
+// This file is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
+@import "../../../dist/themes/dark/dark.scss";
+
+// In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
+// so we need to map-get "default" to access it.
+$theme: map-get($dark, 'default');
+
+// MIXIN
+// CSS properties that are theme-dependent must be wrapped in this mixin.
+// It will convert semantic tokens to the appropriate theme-dependent CSS property.
+@mixin themed() {
+  & {
+    $theme-map: () !global;
+    @each $key, $submap in $theme {
+      $value: map-get($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: _str-split($key, ".");
+  @return _map-deep-get($theme-map, $keys);
+}
+
+// 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: _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: _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: _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: _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: _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: _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: _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: _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: _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: _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, these functions will be excluded because they are private.
+
+// Via https://stackoverflow.com/a/42295154
+// 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
+  $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.
+// 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);
+  }
+  @return $map;
+}