@instructure/ui-color-picker 8.25.1-snapshot-20

package/lib/ColorPicker/theme.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _theme = require("../ColorIndicator/theme");
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = theme => {
+  const colors = theme.colors,
+        borders = theme.borders,
+        spacing = theme.spacing,
+        typography = theme.typography;
+  const componentVariables = {
+    hashMarkColor: colors === null || colors === void 0 ? void 0 : colors.ash,
+    warningIconColor: colors === null || colors === void 0 ? void 0 : colors.textWarning,
+    errorIconColor: colors === null || colors === void 0 ? void 0 : colors.textDanger,
+    successIconColor: colors === null || colors === void 0 ? void 0 : colors.textSuccess,
+    popoverSeparatorColor: colors === null || colors === void 0 ? void 0 : colors.tiara,
+    popoverFooterColor: colors === null || colors === void 0 ? void 0 : colors.porcelain,
+    smallBorder: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    smallSpacing: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    xSmallSpacing: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    xxSmallSpacing: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
+    xxxSmallSpacing: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
+    xLargeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXLarge,
+    checkerboardBackgroundColor: colors.white,
+    checkerboardBackgroundImage: `linear-gradient(45deg, ${colors.tiara} 25%, transparent 25%),
+    linear-gradient(-45deg, ${colors.tiara} 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, ${colors.tiara} 75%),
+    linear-gradient(-45deg, transparent 75%, ${colors.tiara} 75%)`,
+    checkerboardBackgroundSize: '.5rem .5rem',
+    checkerboardBackgroundPosition: '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px',
+    colorIndicatorBorderColor: _theme.colorIndicatorBorderColor,
+    simpleColorContainerLeftPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    hashMarkContainerLineHeight: typography === null || typography === void 0 ? void 0 : typography.fontSizeXLarge,
+    hashMarkContainerLeftPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    hashMarkContainerRightPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
+    errorIconsRightPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    successIconRightPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    labelRightMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
+    popoverContentPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    popoverContentBlockBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    popoverContentBlockTopMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    popoverContentBlockBottomMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    popoverFooterPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    popoverFooterTopBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    colorMixerButtonContainerLeftMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall
+  };
+  return { ...componentVariables
+  };
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/ColorPreset/ColorPresetLocator.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorPresetLocator = void 0;
+
+var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
+
+var _index = require("./index");
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+const ColorPresetLocator = (0, _locator.locator)(_index.ColorPreset.selector);
+exports.ColorPresetLocator = ColorPresetLocator;

package/lib/ColorPreset/index.js

@@ -0,0 +1,274 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ColorPreset = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = require("react");
+
+var _emotion = require("@instructure/emotion");
+
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+
+var _testable = require("@instructure/ui-testable/lib/testable.js");
+
+var _uiColorUtils = require("@instructure/ui-color-utils");
+
+var _IconButton = require("@instructure/ui-buttons/lib/IconButton");
+
+var _Button = require("@instructure/ui-buttons/lib/Button");
+
+var _View = require("@instructure/ui-view/lib/View");
+
+var _Tooltip = require("@instructure/ui-tooltip/lib/Tooltip");
+
+var _Popover = require("@instructure/ui-popover/lib/Popover");
+
+var _Text = require("@instructure/ui-text/lib/Text");
+
+var _Drilldown = require("@instructure/ui-drilldown/lib/Drilldown");
+
+var _IconAddLine2 = require("@instructure/ui-icons/lib/IconAddLine.js");
+
+var _IconCheckDarkSolid = require("@instructure/ui-icons/lib/IconCheckDarkSolid.js");
+
+var _ColorIndicator = require("../ColorIndicator");
+
+var _ColorMixer = require("../ColorMixer");
+
+var _ColorContrast = require("../ColorContrast");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _theme = _interopRequireDefault(require("./theme"));
+
+var _props = require("./props");
+
+const _excluded = ["disabled", "onSelect", "selected", "styles", "label", "colorMixerSettings", "colors", "elementRef"];
+
+var _dec, _dec2, _class, _class2, _IconAddLine, _Drilldown$Option, _Drilldown$Option2;
+
+/**
+---
+category: components
+---
+@tsProps
+**/
+let ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class ColorPreset extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.ref = null;
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+
+    this.onMenuItemSelected = color => (_e, args) => {
+      if (args.value === 'select') {
+        this.props.onSelect(color);
+      }
+
+      if (args.value === 'remove') {
+        var _this$props, _this$props$colorMixe;
+
+        (_this$props = this.props) === null || _this$props === void 0 ? void 0 : (_this$props$colorMixe = _this$props.colorMixerSettings) === null || _this$props$colorMixe === void 0 ? void 0 : _this$props$colorMixe.onPresetChange(this.props.colors.filter(clr => clr !== color));
+      }
+    };
+
+    this.renderAddNewPresetButton = () => {
+      var _this$props2, _this$props2$styles, _this$props$styles, _this$props3, _this$props3$colorMix, _this$props3$colorMix2, _this$props4, _this$props4$colorMix, _this$props$styles2, _this$props$styles3;
+
+      return (0, _emotion.jsx)(_Popover.Popover, {
+        renderTrigger: (0, _emotion.jsx)("div", {
+          css: (_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : (_this$props2$styles = _this$props2.styles) === null || _this$props2$styles === void 0 ? void 0 : _this$props2$styles.addNewPresetButton
+        }, (0, _emotion.jsx)(_IconButton.IconButton, {
+          disabled: this.props.disabled,
+          screenReaderLabel: this.props.colorMixerSettings.addNewPresetButtonScreenReaderLabel
+        }, _IconAddLine || (_IconAddLine = (0, _emotion.jsx)(_IconAddLine2.IconAddLine, null)))),
+        isShowingContent: this.state.openAddNew,
+        onShowContent: () => {
+          if (this.props.disabled) return;
+          this.setState({
+            openAddNew: true
+          });
+        },
+        onHideContent: () => {
+          this.setState({
+            openAddNew: false
+          });
+        },
+        on: "click",
+        screenReaderLabel: this.props.popoverScreenReaderLabel,
+        shouldContainFocus: true,
+        shouldReturnFocus: true,
+        shouldCloseOnDocumentClick: true,
+        offsetY: 16,
+        mountNode: () => document.getElementById('main')
+      }, (0, _emotion.jsx)("div", {
+        css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.popoverContent
+      }, (0, _emotion.jsx)(_ColorMixer.ColorMixer, {
+        value: (0, _uiColorUtils.colorToHex8)(this.state.newColor),
+        onChange: newColor => this.setState({
+          newColor: (0, _uiColorUtils.colorToRGB)(newColor)
+        }),
+        withAlpha: (_this$props3 = this.props) === null || _this$props3 === void 0 ? void 0 : (_this$props3$colorMix = _this$props3.colorMixerSettings) === null || _this$props3$colorMix === void 0 ? void 0 : (_this$props3$colorMix2 = _this$props3$colorMix.colorMixer) === null || _this$props3$colorMix2 === void 0 ? void 0 : _this$props3$colorMix2.withAlpha,
+        rgbRedInputScreenReaderLabel: this.props.colorMixerSettings.colorMixer.rgbRedInputScreenReaderLabel,
+        rgbGreenInputScreenReaderLabel: this.props.colorMixerSettings.colorMixer.rgbGreenInputScreenReaderLabel,
+        rgbBlueInputScreenReaderLabel: this.props.colorMixerSettings.colorMixer.rgbBlueInputScreenReaderLabel,
+        rgbAlphaInputScreenReaderLabel: this.props.colorMixerSettings.colorMixer.rgbAlphaInputScreenReaderLabel,
+        colorSliderNavigationExplanationScreenReaderLabel: this.props.colorMixerSettings.colorMixer.colorSliderNavigationExplanationScreenReaderLabel,
+        alphaSliderNavigationExplanationScreenReaderLabel: this.props.colorMixerSettings.colorMixer.alphaSliderNavigationExplanationScreenReaderLabel,
+        colorPaletteNavigationExplanationScreenReaderLabel: this.props.colorMixerSettings.colorMixer.colorPaletteNavigationExplanationScreenReaderLabel
+      }), ((_this$props4 = this.props) === null || _this$props4 === void 0 ? void 0 : (_this$props4$colorMix = _this$props4.colorMixerSettings) === null || _this$props4$colorMix === void 0 ? void 0 : _this$props4$colorMix.colorContrast) && (0, _emotion.jsx)("div", {
+        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.popoverContrastBlock
+      }, (0, _emotion.jsx)(_ColorContrast.ColorContrast, {
+        firstColor: this.props.colorMixerSettings.colorContrast.firstColor,
+        secondColor: (0, _uiColorUtils.colorToHex8)(this.state.newColor),
+        label: this.props.colorMixerSettings.colorContrast.label,
+        successLabel: this.props.colorMixerSettings.colorContrast.successLabel,
+        failureLabel: this.props.colorMixerSettings.colorContrast.failureLabel,
+        normalTextLabel: this.props.colorMixerSettings.colorContrast.normalTextLabel,
+        largeTextLabel: this.props.colorMixerSettings.colorContrast.largeTextLabel,
+        graphicsTextLabel: this.props.colorMixerSettings.colorContrast.graphicsTextLabel,
+        firstColorLabel: this.props.colorMixerSettings.colorContrast.firstColorLabel,
+        secondColorLabel: this.props.colorMixerSettings.colorContrast.secondColorLabel
+      }))), (0, _emotion.jsx)("div", {
+        css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.popoverFooter
+      }, (0, _emotion.jsx)(_Button.Button, {
+        onClick: () => {
+          var _this$props5, _this$props5$colorMix;
+
+          (_this$props5 = this.props) === null || _this$props5 === void 0 ? void 0 : (_this$props5$colorMix = _this$props5.colorMixerSettings) === null || _this$props5$colorMix === void 0 ? void 0 : _this$props5$colorMix.onPresetChange([(0, _uiColorUtils.colorToHex8)(this.state.newColor), ...this.props.colors]);
+          this.setState({
+            openAddNew: false
+          });
+        },
+        color: "primary",
+        margin: "0 xx-small 0 xx-small"
+      }, "Add"), (0, _emotion.jsx)(_Button.Button, {
+        onClick: () => this.setState({
+          openAddNew: false
+        }),
+        color: "secondary",
+        margin: "0 xx-small 0 xx-small"
+      }, "Close")));
+    };
+
+    this.renderColorIndicator = (color, selectOnClick) => {
+      var _this$props6, _this$props6$styles;
+
+      return (0, _emotion.jsx)(_Tooltip.Tooltip, {
+        renderTip: (0, _emotion.jsx)("div", null, color)
+      }, (0, _emotion.jsx)(_View.View, Object.assign({
+        disabled: this.props.disabled,
+        position: "relative",
+        width: "2.375rem",
+        height: "2.375rem",
+        background: "transparent",
+        margin: "xx-small",
+        display: "inline-block",
+        borderRadius: "medium",
+        borderWidth: "0",
+        padding: "0",
+        as: "button"
+      }, selectOnClick ? {
+        onClick: () => this.props.onSelect(color)
+      } : {}, this.props.selected === color ? {
+        'aria-label': 'selected'
+      } : {}, {
+        role: "presentation"
+      }), (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_ColorIndicator.ColorIndicator, {
+        color: color,
+        shape: "rectangle"
+      }), this.props.selected === color && (0, _emotion.jsx)("div", {
+        css: (_this$props6 = this.props) === null || _this$props6 === void 0 ? void 0 : (_this$props6$styles = _this$props6.styles) === null || _this$props6$styles === void 0 ? void 0 : _this$props6$styles.selectedIndicator
+      }, (0, _emotion.jsx)(_IconCheckDarkSolid.IconCheckDarkSolid, {
+        themeOverride: {
+          sizeXSmall: '0.8rem'
+        },
+        size: "x-small"
+      })))));
+    };
+
+    this.renderSettingsMenu = (color, index) => (0, _emotion.jsx)(_Drilldown.Drilldown, {
+      onSelect: this.onMenuItemSelected(color),
+      trigger: this.renderColorIndicator(color),
+      key: `color-preset-color-${index}`,
+      rootPageId: "root",
+      width: "10rem",
+      offsetY: "15rem"
+    }, (0, _emotion.jsx)(_Drilldown.Drilldown.Page, {
+      withoutHeaderSeparator: true,
+      id: "root",
+      renderTitle: color
+    }, _Drilldown$Option || (_Drilldown$Option = (0, _emotion.jsx)(_Drilldown.Drilldown.Option, {
+      value: "select",
+      id: "select"
+    }, "Select")), _Drilldown$Option2 || (_Drilldown$Option2 = (0, _emotion.jsx)(_Drilldown.Drilldown.Option, {
+      value: "remove",
+      id: "remove"
+    }, "Remove"))));
+
+    this.state = {
+      openEditor: false,
+      openAddNew: false,
+      newColor: {
+        r: 51,
+        g: 99,
+        b: 42,
+        a: 1
+      }
+    };
+  }
+
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props7;
+
+    (_this$props$makeStyle = (_this$props7 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props7);
+  }
+
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props8;
+
+    (_this$props$makeStyle2 = (_this$props8 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props8);
+  }
+
+  render() {
+    const _this$props9 = this.props,
+          disabled = _this$props9.disabled,
+          onSelect = _this$props9.onSelect,
+          selected = _this$props9.selected,
+          styles = _this$props9.styles,
+          label = _this$props9.label,
+          colorMixerSettings = _this$props9.colorMixerSettings,
+          colors = _this$props9.colors,
+          elementRef = _this$props9.elementRef,
+          props = (0, _objectWithoutProperties2.default)(_this$props9, _excluded);
+    return (0, _emotion.jsx)("div", Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
+      ref: this.handleRef,
+      css: styles === null || styles === void 0 ? void 0 : styles.colorPreset
+    }), label && (0, _emotion.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.label
+    }, (0, _emotion.jsx)(_Text.Text, {
+      weight: "bold"
+    }, label)), typeof (colorMixerSettings === null || colorMixerSettings === void 0 ? void 0 : colorMixerSettings.onPresetChange) === 'function' && this.renderAddNewPresetButton(), colors.map((color, index) => typeof (colorMixerSettings === null || colorMixerSettings === void 0 ? void 0 : colorMixerSettings.onPresetChange) === 'function' ? this.renderSettingsMenu(color, index) : (0, _emotion.jsx)("div", {
+      key: `color-preset-color-${index}`
+    }, this.renderColorIndicator(color, true))));
+  }
+
+}, _class2.displayName = "ColorPreset", _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.componentId = 'ColorPreset', _class2.defaultProps = {
+  disabled: false
+}, _class2)) || _class) || _class);
+exports.ColorPreset = ColorPreset;
+var _default = ColorPreset;
+exports.default = _default;

package/lib/ColorPreset/props.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.allowedProps = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+const propTypes = {
+  colors: _propTypes.default.array.isRequired,
+  disabled: _propTypes.default.bool,
+  elementRef: _propTypes.default.func,
+  label: _propTypes.default.string,
+  colorMixerSettings: _propTypes.default.object,
+  onSelect: _propTypes.default.func.isRequired,
+  popoverScreenReaderLabel: _propTypes.default.string,
+  selected: _propTypes.default.string.isRequired
+};
+exports.propTypes = propTypes;
+const allowedProps = ['colors', 'disabled', 'elementRef', 'label', 'colorMixerSettings', 'onSelect', 'popoverScreenReaderLabel', 'selected'];
+exports.allowedProps = allowedProps;

package/lib/ColorPreset/styles.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props) => {
+  const colorMixerSettings = props.colorMixerSettings;
+  return {
+    colorPreset: {
+      label: 'colorPreset',
+      display: 'flex',
+      flexWrap: 'wrap',
+      width: '17rem'
+    },
+    addNewPresetButton: {
+      label: 'colorPreset__addNewPresetButton',
+      width: '2.375rem',
+      height: '2.375rem',
+      margin: componentTheme.xxSmallSpacing
+    },
+    selectedIndicator: {
+      label: 'colorPreset__selectedIndicator',
+      width: '1.25rem',
+      height: '1.25rem',
+      borderStyle: 'solid',
+      borderColor: componentTheme.selectedIndicatorBorderColor,
+      borderWidth: componentTheme.smallBorder,
+      borderRadius: '1.25rem',
+      boxSizing: 'border-box',
+      position: 'relative',
+      insetInlineStart: '1.5rem',
+      bottom: '2.75rem',
+      backgroundColor: componentTheme.selectedIndicatorBackgroundColor,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    popoverContent: {
+      label: 'colorPreset__popoverContent',
+      padding: componentTheme.smallSpacing,
+      maxHeight: (colorMixerSettings === null || colorMixerSettings === void 0 ? void 0 : colorMixerSettings.maxHeight) || '100vh',
+      overflow: 'scroll'
+    },
+    popoverDivider: {
+      label: 'colorPreset__popoverDivider',
+      borderTop: 'solid',
+      borderWidth: componentTheme.smallBorder,
+      borderColor: componentTheme.popoverDividerColor,
+      margin: `${componentTheme.smallSpacing} 0 ${componentTheme.smallSpacing} 0`
+    },
+    popoverContrastBlock: {
+      label: 'colorPreset__popoverContrastBlock',
+      borderTop: 'solid',
+      borderWidth: componentTheme.smallBorder,
+      borderColor: componentTheme.popoverDividerColor,
+      margin: `${componentTheme.smallSpacing} 0 ${componentTheme.smallSpacing} 0`
+    },
+    popoverFooter: {
+      label: 'colorPreset__popoverFooter',
+      backgroundColor: componentTheme.popoverFooterColor,
+      display: 'flex',
+      flexDirection: 'row-reverse',
+      padding: componentTheme.smallSpacing
+    },
+    label: {
+      label: 'colorPreset__label',
+      width: '100%',
+      margin: componentTheme.xxSmallSpacing
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/ColorPreset/theme.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = theme => {
+  const colors = theme.colors,
+        borders = theme.borders,
+        spacing = theme.spacing;
+  const componentVariables = {
+    xxSmallSpacing: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
+    smallSpacing: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    selectedIndicatorBackgroundColor: colors.white,
+    selectedIndicatorBorderColor: colors.licorice,
+    popoverDividerColor: colors === null || colors === void 0 ? void 0 : colors.tiara,
+    smallBorder: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    popoverFooterColor: colors === null || colors === void 0 ? void 0 : colors.porcelain,
+    checkerboardBackgroundImage: `linear-gradient(45deg, ${colors.tiara} 25%, transparent 25%),
+    linear-gradient(-45deg, ${colors.tiara} 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, ${colors.tiara} 75%),
+    linear-gradient(-45deg, transparent 75%, ${colors.tiara} 75%)`,
+    checkerboardBackgroundSize: '.5rem .5rem',
+    checkerboardBackgroundPosition: '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px'
+  };
+  return { ...componentVariables
+  };
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ColorContrast", {
+  enumerable: true,
+  get: function () {
+    return _ColorContrast.ColorContrast;
+  }
+});
+Object.defineProperty(exports, "ColorIndicator", {
+  enumerable: true,
+  get: function () {
+    return _ColorIndicator.ColorIndicator;
+  }
+});
+Object.defineProperty(exports, "ColorMixer", {
+  enumerable: true,
+  get: function () {
+    return _ColorMixer.ColorMixer;
+  }
+});
+Object.defineProperty(exports, "ColorPicker", {
+  enumerable: true,
+  get: function () {
+    return _ColorPicker.ColorPicker;
+  }
+});
+Object.defineProperty(exports, "ColorPreset", {
+  enumerable: true,
+  get: function () {
+    return _ColorPreset.ColorPreset;
+  }
+});
+
+var _ColorPicker = require("./ColorPicker");
+
+var _ColorMixer = require("./ColorMixer");
+
+var _ColorPreset = require("./ColorPreset");
+
+var _ColorContrast = require("./ColorContrast");
+
+var _ColorIndicator = require("./ColorIndicator");

package/lib/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}