@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/cjs/server.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.themeInitializerElement = exports.styleElement = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
+
+var styleElement = /*#__PURE__*/_react["default"].createElement("style", {
+  id: "uikit-style",
+  dangerouslySetInnerHTML: {
+    __html: _ThemeProvider["default"].styleReset
+  }
+});
+
+exports.styleElement = styleElement;
+
+var themeInitializerElement = /*#__PURE__*/_react["default"].createElement("script", {
+  dangerouslySetInnerHTML: {
+    __html: _ThemeProvider["default"].themeInitializerScript
+  }
+});
+
+exports.themeInitializerElement = themeInitializerElement;

package/dist/cjs/system/box-sizes.js

@@ -0,0 +1,61 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getBoxSize = getBoxSize;
+exports.boxSizes = void 0;
+var boxSizes = {
+  xs: {
+    boxSize: 2.5,
+    fontSize: 5,
+    lineHeight: 2.5,
+    paddingHorizontalDense: 0.5,
+    paddingHorizontal: 0.75,
+    paddingVertical: 0,
+    radius: 2.5
+  },
+  sm: {
+    boxSize: 3,
+    fontSize: 5,
+    lineHeight: 2.5,
+    paddingHorizontalDense: 0.5,
+    paddingHorizontal: 1,
+    paddingVertical: 0.25,
+    radius: 3
+  },
+  md: {
+    boxSize: 4,
+    fontSize: 4,
+    lineHeight: 3,
+    paddingHorizontalDense: 1,
+    paddingHorizontal: 1.375,
+    paddingVertical: 0.5,
+    radius: 4
+  },
+  lg: {
+    boxSize: 5,
+    fontSize: 3,
+    lineHeight: 4,
+    paddingHorizontalDense: 1,
+    paddingHorizontal: 1.75,
+    paddingVertical: 0.5,
+    radius: 5
+  },
+  xl: {
+    boxSize: 8,
+    fontSize: 1,
+    lineHeight: 5,
+    paddingHorizontalDense: 2,
+    paddingHorizontal: 2.25,
+    paddingVertical: 1.5,
+    radius: 6
+  }
+};
+exports.boxSizes = boxSizes;
+
+function getBoxSize(size) {
+  if (size === void 0) {
+    size = 'md';
+  }
+
+  return boxSizes[size] || {};
+}

package/dist/cjs/system/button-themes.js

@@ -0,0 +1,286 @@
+"use strict";
+
+exports.__esModule = true;
+exports.buttonThemes = void 0;
+var buttonThemes = {
+  "default": {
+    fill: {
+      color: 'foreground',
+      backgroundColor: 'grey-3',
+      hover: {
+        backgroundColor: 'grey-4'
+      },
+      active: {
+        backgroundColor: 'grey-5'
+      }
+    },
+    outline: {
+      stroke: 'separatorSecondary',
+      color: 'foreground',
+      hover: {
+        backgroundColor: 'highlight'
+      },
+      active: {
+        backgroundColor: 'highlightSecondary'
+      }
+    },
+    naked: {
+      color: 'foreground',
+      hover: {
+        backgroundColor: 'highlight'
+      },
+      active: {
+        backgroundColor: 'highlightSecondary'
+      }
+    }
+  },
+  white: {
+    fill: {
+      color: 'primary',
+      backgroundColor: 'white',
+      hover: {
+        backgroundColor: 'grey-0'
+      },
+      active: {
+        backgroundColor: 'grey-1'
+      }
+    },
+    outline: {
+      stroke: 'white',
+      color: 'white',
+      hover: {
+        backgroundColor: 'light-0'
+      },
+      active: {
+        backgroundColor: 'light-1'
+      }
+    },
+    naked: {
+      color: 'white',
+      hover: {
+        backgroundColor: 'light-0'
+      },
+      active: {
+        backgroundColor: 'light-1'
+      }
+    }
+  },
+  light: {
+    fill: {
+      color: 'white',
+      backgroundColor: 'light-1',
+      hover: {
+        backgroundColor: 'light-2'
+      },
+      active: {
+        backgroundColor: 'light-3'
+      }
+    },
+    outline: {
+      stroke: 'light-3',
+      color: 'white',
+      hover: {
+        backgroundColor: 'light-0'
+      },
+      active: {
+        backgroundColor: 'light-1'
+      }
+    },
+    naked: {
+      color: 'light-9',
+      hover: {
+        backgroundColor: 'light-0'
+      },
+      active: {
+        backgroundColor: 'light-1'
+      }
+    }
+  },
+  dark: {
+    fill: {
+      color: 'dark-9',
+      backgroundColor: 'dark-0',
+      hover: {
+        backgroundColor: 'dark-1'
+      },
+      active: {
+        backgroundColor: 'dark-2'
+      }
+    },
+    outline: {
+      stroke: 'dark-3',
+      color: 'dark-9',
+      hover: {
+        backgroundColor: 'dark-0'
+      },
+      active: {
+        backgroundColor: 'dark-1'
+      }
+    },
+    naked: {
+      color: 'dark-9',
+      hover: {
+        backgroundColor: 'dark-0'
+      },
+      active: {
+        backgroundColor: 'dark-1'
+      }
+    }
+  },
+  primary: {
+    fill: {
+      color: 'light-9',
+      backgroundColor: 'primary',
+      hover: {
+        backgroundColor: 'primary-dark'
+      },
+      active: {
+        backgroundColor: 'primary-darker'
+      }
+    },
+    outline: {
+      stroke: 'primary',
+      color: 'primary',
+      hover: {
+        backgroundColor: 'primary-lightest'
+      },
+      active: {
+        backgroundColor: 'primary-lighter'
+      }
+    },
+    naked: {
+      color: 'primary',
+      hover: {
+        backgroundColor: 'primary-lightest'
+      },
+      active: {
+        backgroundColor: 'primary-lighter'
+      }
+    }
+  },
+  warning: {
+    fill: {
+      color: 'dark-9',
+      backgroundColor: 'yellow-5',
+      hover: {
+        backgroundColor: 'yellow-4'
+      },
+      active: {
+        backgroundColor: 'yellow-3'
+      }
+    },
+    outline: {
+      stroke: 'yellow-5',
+      color: 'yellow-9',
+      hover: {
+        backgroundColor: 'yellow-0'
+      },
+      active: {
+        backgroundColor: 'yellow-1'
+      }
+    },
+    naked: {
+      color: 'yellow-9',
+      hover: {
+        backgroundColor: 'yellow-0'
+      },
+      active: {
+        backgroundColor: 'yellow-1'
+      }
+    }
+  },
+  error: {
+    fill: {
+      color: 'light-9',
+      backgroundColor: 'red-5',
+      hover: {
+        backgroundColor: 'red-4'
+      },
+      active: {
+        backgroundColor: 'red-3'
+      }
+    },
+    outline: {
+      stroke: 'red-5',
+      color: 'red-5',
+      hover: {
+        backgroundColor: 'red-0'
+      },
+      active: {
+        backgroundColor: 'red-1'
+      }
+    },
+    naked: {
+      color: 'error',
+      hover: {
+        backgroundColor: 'red-0'
+      },
+      active: {
+        backgroundColor: 'red-1'
+      }
+    }
+  },
+  success: {
+    fill: {
+      color: 'light-9',
+      backgroundColor: 'green-5',
+      hover: {
+        backgroundColor: 'green-4'
+      },
+      active: {
+        backgroundColor: 'green-3'
+      }
+    },
+    outline: {
+      stroke: 'green-5',
+      color: 'green-5',
+      hover: {
+        backgroundColor: 'green-0'
+      },
+      active: {
+        backgroundColor: 'green-1'
+      }
+    },
+    naked: {
+      color: 'green',
+      hover: {
+        backgroundColor: 'green-0'
+      },
+      active: {
+        backgroundColor: 'green-1'
+      }
+    }
+  },
+  info: {
+    fill: {
+      color: 'light-9',
+      backgroundColor: 'blue-5',
+      hover: {
+        backgroundColor: 'blue-4'
+      },
+      active: {
+        backgroundColor: 'blue-3'
+      }
+    },
+    outline: {
+      stroke: 'blue-5',
+      color: 'blue-5',
+      hover: {
+        backgroundColor: 'blue-0'
+      },
+      active: {
+        backgroundColor: 'blue-1'
+      }
+    },
+    naked: {
+      color: 'blue-5',
+      hover: {
+        backgroundColor: 'blue-0'
+      },
+      active: {
+        backgroundColor: 'blue-1'
+      }
+    }
+  }
+};
+exports.buttonThemes = buttonThemes;

package/dist/cjs/system/colors/colors.js

@@ -0,0 +1,107 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getColor = getColor;
+exports.colors = exports.palette = void 0;
+
+var _utils = require("./utils");
+
+var palette = {
+  primary: {
+    lightest: 'hsl(88, 24%, 92%)',
+    lighter: 'hsl(88, 32%, 86%)',
+    light: 'hsl(88, 40%, 54%)',
+    base: 'hsl(88, 44%, 40%)',
+    dark: 'hsl(88, 46%, 36%)',
+    darker: 'hsl(88, 52%, 32%)',
+    darkest: 'hsl(88, 72%, 20%)'
+  },
+  warning: {
+    lighter: 'hsl(60, 99%, 90%)',
+    light: 'hsl(56, 97%, 74%)',
+    base: 'hsl(50, 94%, 56%)',
+    dark: 'hsl(48, 93%, 48%)',
+    darker: 'hsl(42, 90%, 30%)'
+  },
+  error: {
+    lighter: 'hsl(7, 60%, 90%)',
+    light: 'hsl(7, 72%, 76%)',
+    base: 'hsl(7, 78%, 64%)',
+    dark: 'hsl(7, 80%, 52%)',
+    darker: 'hsl(7, 86%, 30%)'
+  },
+  success: {
+    lighter: 'hsl(96, 24%, 92%)',
+    light: 'hsl(96, 32%, 76%)',
+    base: 'hsl(96, 40%, 58%)',
+    dark: 'hsl(96, 44%, 50%)',
+    darker: 'hsl(96, 60%, 20%)'
+  },
+  red: ['hsl(8, 73%, 96%)', 'hsl(8, 74%, 92%)', 'hsl(8, 75%, 88%)', 'hsl(8, 76%, 68%)', 'hsl(8, 77%, 60%)', 'hsl(8, 78%, 56%)', 'hsl(8, 79%, 52%)', 'hsl(8, 80%, 48%)', 'hsl(8, 81%, 40%)', 'hsl(8, 82%, 30%)'],
+  blue: ['hsl(197, 56%, 92%)', 'hsl(197, 56%, 88%)', 'hsl(197, 56%, 72%)', 'hsl(197, 56%, 64%)', 'hsl(197, 56%, 52%)', 'hsl(197, 56%, 44%)', 'hsl(197, 56%, 40%)', 'hsl(197, 56%, 32%)', 'hsl(197, 56%, 24%)', 'hsl(197, 56%, 20%)'],
+  green: ['hsl(96, 24%, 92%)', 'hsl(96, 30%, 84%)', 'hsl(96, 32%, 76%)', 'hsl(96, 34%, 72%)', 'hsl(96, 36%, 64%)', 'hsl(96, 40%, 58%)', 'hsl(96, 44%, 50%)', 'hsl(96, 48%, 40%)', 'hsl(96, 52%, 30%)', 'hsl(96, 60%, 20%)'],
+  yellow: ['hsl(50, 89%, 90%)', 'hsl(50, 90%, 86%)', 'hsl(50, 91%, 74%)', 'hsl(50, 92%, 68%)', 'hsl(50, 93%, 62%)', 'hsl(50, 94%, 56%)', 'hsl(50, 95%, 48%)', 'hsl(50, 96%, 40%)', 'hsl(50, 97%, 32%)', 'hsl(50, 98%, 26%)'],
+  light: ['hsla(0,0%,100%,0.16)', 'hsla(0,0%,100%,0.24)', 'hsla(0,0%,100%,0.32)', 'hsla(0,0%,100%,0.44)', 'hsla(0,0%,100%,0.50)', 'hsla(0,0%,100%,0.60)', 'hsla(0,0%,100%,0.68)', 'hsla(0,0%,100%,0.76)', 'hsla(0,0%,100%,0.88)', 'hsla(0,0%,100%,0.96)'],
+  dark: ['hsla(0,0%,0%,0.04)', 'hsla(0,0%,0%,0.08)', 'hsla(0,0%,0%,0.12)', 'hsla(0,0%,0%,0.16)', 'hsla(0,0%,0%,0.24)', 'hsla(0,0%,0%,0.32)', 'hsla(0,0%,0%,0.40)', 'hsla(0,0%,0%,0.46)', 'hsla(0,0%,0%,0.54)', 'hsla(0,0%,0%,0.68)'],
+  grey: ['hsl(200,1%,98%)', 'hsl(200,1%,96%)', 'hsl(200,1%,94%)', 'hsl(200,1%,92%)', 'hsl(200,1%,90%)', 'hsl(200,1%,86%)', 'hsl(200,1%,74%)', 'hsl(200,1%,58%)', 'hsl(200,1%,46%)', 'hsl(200,1%,28%)'],
+  foreground: {
+    foreground: 'grey-9',
+    foregroundSecondary: 'grey-8',
+    foregroundTertiary: 'grey-7'
+  },
+  background: {
+    background: 'hsl(30, 9%, 99%)',
+    backgroundSecondary: 'hsl(30, 9%, 97%)',
+    backgroundTertiary: 'hsl(30, 9%, 95%)'
+  },
+  surface: {
+    surface: 'white',
+    surfaceSecondary: 'grey-0',
+    surfaceTertiary: 'grey-1'
+  },
+  separator: {
+    separator: 'grey-6',
+    separatorSecondary: 'grey-5',
+    separatorTertiary: 'grey-4',
+    separatorHover: 'separator',
+    separatorFocus: 'primary',
+    separatorFocusSecondary: 'primary-lighter'
+  },
+  highlight: {
+    highlight: 'grey-2',
+    highlightSecondary: 'grey-3'
+  },
+  link: {
+    linkForeground: 'primary',
+    linkBackground: 'hsl(200,100%,98%)'
+  },
+  days: {
+    sunday: '#7DC156',
+    monday: '#789FF8',
+    tuesday: '#A193FD',
+    wednesday: '#D18CF6',
+    thursday: '#FA7EA4',
+    friday: '#F69688',
+    saturday: '#66BEEB'
+  },
+  apps: {
+    'check-ins': '#8c6999',
+    giving: '#f4c551',
+    groups: '#f58a4f',
+    'music-stand': '#4984c4',
+    pco: '#3565cf',
+    people: '#5781cf',
+    'planning-center': '#2266f7',
+    projector: '#f19900',
+    registrations: '#569690',
+    calendar: '#cc4832',
+    services: '#6a9639'
+  }
+};
+exports.palette = palette;
+var colors = (0, _utils.flattenPalette)(palette);
+exports.colors = colors;
+
+function getColor(key) {
+  return key ? colors[key] : colors;
+}

package/dist/cjs/system/colors/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+exports.__esModule = true;
+exports.setAlphaChannel = exports.generateColorScale = exports.flattenPalette = exports.eachPalette = exports.createTones = exports.getColor = exports.palette = exports.colors = void 0;
+
+var _colors = require("./colors");
+
+exports.colors = _colors.colors;
+exports.palette = _colors.palette;
+exports.getColor = _colors.getColor;
+
+var _utils = require("./utils");
+
+exports.createTones = _utils.createTones;
+exports.eachPalette = _utils.eachPalette;
+exports.flattenPalette = _utils.flattenPalette;
+exports.generateColorScale = _utils.generateColorScale;
+exports.setAlphaChannel = _utils.setAlphaChannel;

package/dist/cjs/system/colors/utils.js

@@ -0,0 +1,211 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.setAlphaChannel = setAlphaChannel;
+exports.generateColorScale = generateColorScale;
+exports.eachPalette = eachPalette;
+exports.flattenPalette = flattenPalette;
+exports.adjustLightness = adjustLightness;
+exports.adjustSaturation = adjustSaturation;
+exports.createTone = createTone;
+exports.createTones = createTones;
+exports.createColorScale = createColorScale;
+exports.createColorScales = createColorScales;
+exports.flattenColorScales = flattenColorScales;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _polished = require("polished");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+function setAlphaChannel(alpha, color) {
+  if (typeof alpha !== 'undefined') {
+    var _parseToRgb = (0, _polished.parseToRgb)(color),
+        red = _parseToRgb.red,
+        green = _parseToRgb.green,
+        blue = _parseToRgb.blue;
+
+    return "rgba(" + red + ", " + green + ", " + blue + ", " + alpha + ")";
+  } else {
+    return color;
+  }
+}
+
+function generateColorScale(_ref) {
+  var _ref2;
+
+  var key = _ref.key,
+      baseColor = _ref.baseColor;
+  return _ref2 = {}, _ref2[key + "-lightest"] = (0, _polished.setLightness)(0.94, baseColor), _ref2[key + "-lighter"] = (0, _polished.setLightness)(0.92, baseColor), _ref2[key + "-light"] = (0, _polished.setLightness)(0.7, baseColor), _ref2[key] = baseColor, _ref2[key + "-dark"] = (0, _polished.darken)(0.04, baseColor), _ref2[key + "-darker"] = (0, _polished.darken)(0.08, baseColor), _ref2[key + "-darkest"] = (0, _polished.darken)(0.16, baseColor), _ref2;
+}
+
+function eachPalette(palette, getColor) {
+  return Object.keys(palette).map(function (key) {
+    var colorSet = palette[key];
+    var nextColors;
+
+    if (typeof colorSet === 'string') {
+      var _nextColors;
+
+      nextColors = (_nextColors = {}, _nextColors[key] = colorSet, _nextColors);
+    } else if (Array.isArray(colorSet)) {
+      // deal with scale values: color, color-0, color-1, etc.
+      nextColors = colorSet.reduce(function (flatColors, color, index) {
+        var _objectSpread2;
+
+        return _objectSpread(_objectSpread({}, flatColors), {}, (_objectSpread2 = {}, _objectSpread2[key + "-" + index] = color, _objectSpread2));
+      }, {});
+    } else {
+      // if palette contains a "base" key spread under key name: primary, primary-light, etc.
+      if (colorSet.base) {
+        nextColors = Object.keys(colorSet).reduce(function (flatColors, colorSetKey) {
+          var _objectSpread3;
+
+          return _objectSpread(_objectSpread({}, flatColors), {}, (_objectSpread3 = {}, _objectSpread3[colorSetKey === 'base' ? key : key + "-" + colorSetKey] = colorSet[colorSetKey], _objectSpread3));
+        }, {});
+      } else {
+        nextColors = Object.keys(colorSet).reduce(function (flatColors, colorSetKey) {
+          var _objectSpread4;
+
+          return _objectSpread(_objectSpread({}, flatColors), {}, (_objectSpread4 = {}, _objectSpread4[colorSetKey] = colorSet[colorSetKey], _objectSpread4));
+        }, {});
+      }
+    }
+
+    return getColor({
+      name: capitalizeFirstLetter(key),
+      colors: nextColors
+    });
+  });
+}
+
+function flattenPalette(palette) {
+  var parsedPalette = eachPalette(palette, function (_ref3) {
+    var colors = _ref3.colors;
+    return colors;
+  }).reduce(function (prevColors, nextColors) {
+    return _objectSpread(_objectSpread({}, prevColors), nextColors);
+  }, {}); // now that we have a resolved collection, run through it again to fill in any aliased colors
+
+  return Object.keys(parsedPalette).reduce(function (collection, key) {
+    var _objectSpread5;
+
+    var value = parsedPalette[key];
+    var aliasValue = parsedPalette[value];
+    return _objectSpread(_objectSpread({}, collection), {}, (_objectSpread5 = {}, _objectSpread5[key] = aliasValue ? "var(--colors-" + value + ")" : value, _objectSpread5));
+  }, {});
+} // ported from ChromaJS
+// https://github.com/gka/chroma.js/blob/d2c6d917df4ba2b87d8a740de116a0656bcbdfd5/src/io/lightness.coffee
+
+
+var EPS = 1e-7;
+
+function adjustLightness(amount, color) {
+  var _parseToRgb2 = (0, _polished.parseToRgb)(color),
+      _parseToRgb2$alpha = _parseToRgb2.alpha,
+      alpha = _parseToRgb2$alpha === void 0 ? 1 : _parseToRgb2$alpha;
+
+  var rgb;
+
+  if (amount === 0) {
+    rgb = (0, _polished.rgba)(0, 0, 0, alpha);
+  } else if (amount === 1) {
+    rgb = (0, _polished.rgba)(255, 255, 255, alpha);
+  } else {
+    var maxIteration = 20;
+
+    var test = function test(color1, color2) {
+      var mixed = (0, _polished.mix)(0.5, color1, color2);
+      var mixedlightness = (0, _polished.getLuminance)(mixed);
+
+      if (Math.abs(amount - mixedlightness) < EPS || !maxIteration--) {
+        return mixed;
+      }
+
+      if (mixedlightness > amount) {
+        return test(color1, mixed);
+      }
+
+      return test(mixed, color2);
+    };
+
+    rgb = (0, _polished.getLuminance)(color) > amount ? test('#000', color) : test(color, '#fff');
+  }
+
+  return rgb;
+}
+
+function adjustSaturation(amount, color) {
+  var hsl = (0, _polished.parseToHsl)(color);
+  hsl.saturation += hsl.saturation * amount;
+  return (0, _polished.toColorString)(hsl);
+} // Color pallette functions
+
+
+function createTone(color, desaturate) {
+  if (desaturate === void 0) {
+    desaturate = 0.5;
+  }
+
+  return function (value) {
+    // we clamp the number so we can generate better shades if 0 or 1 are passed,
+    // otherwise these colors would be pure black or white
+    var lightnessAmount = Math.min(Math.max(value, 0.05), 0.95);
+    return adjustSaturation(-value * desaturate, adjustLightness(lightnessAmount, color));
+  };
+} // calculations repurposed from jxnblk
+// https://github.com/jxnblk/monochrome/blob/master/src/palette.js#L22-L34
+
+
+function createTones(color, desaturate) {
+  var tone = createTone(color, desaturate);
+  var lightness = (0, _polished.getLuminance)(color);
+  var lowerstep = lightness / 5;
+  var upperstep = (1 - lightness) / 6;
+  var lower = [4, 3, 2, 1].map(function (step) {
+    return tone(step * lowerstep);
+  });
+  var upper = [5, 4, 3, 2, 1, 0].map(function (step) {
+    return tone(lightness + step * upperstep);
+  });
+  return [].concat(upper, lower);
+}
+
+function createColorScale(color, desaturate) {
+  return {
+    base: color,
+    text: (0, _polished.getLuminance)(color) < 0.5 ? '#fff' : '#000',
+    tone: createTone(color, desaturate),
+    tones: createTones(color, desaturate)
+  };
+}
+
+function createColorScales(colors, desaturate) {
+  function colorReducer(parsedColors, key) {
+    var _objectSpread6;
+
+    return _objectSpread(_objectSpread({}, parsedColors), {}, (_objectSpread6 = {}, _objectSpread6[key] = createColorScale(colors[key], desaturate), _objectSpread6));
+  }
+
+  return Object.keys(colors).reduce(colorReducer, {});
+}
+
+function flattenColorScales(colors) {
+  return Object.keys(colors).reduce(function (parsedColors, key) {
+    var color = colors[key];
+    parsedColors[key] = color.base;
+    color.tones.forEach(function (tone, index) {
+      parsedColors[key + "-" + index] = tone;
+    });
+    return parsedColors;
+  }, {});
+}