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

package/es/ColorPicker/theme.js

@@ -0,0 +1,76 @@
+/*
+ * 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.
+ */
+import { colorIndicatorBorderColor } from '../ColorIndicator/theme';
+/**
+ * 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,
+    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
+  };
+};
+
+export default generateComponentTheme;

package/es/ColorPreset/ColorPresetLocator.js

@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+import { locator } from '@instructure/ui-test-locator';
+import { ColorPreset } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
+export const ColorPresetLocator = locator(ColorPreset.selector);

package/es/ColorPreset/index.js

@@ -0,0 +1,268 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["disabled", "onSelect", "selected", "styles", "label", "colorMixerSettings", "colors", "elementRef"];
+
+var _dec, _dec2, _class, _class2, _IconAddLine, _Drilldown$Option, _Drilldown$Option2;
+
+/*
+ * 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.
+ */
+
+/** @jsx jsx */
+import { Component } from 'react';
+import { withStyle, jsx } from '@instructure/emotion';
+import { passthroughProps } from '@instructure/ui-react-utils';
+import { testable } from '@instructure/ui-testable';
+import { colorToHex8, colorToRGB } from '@instructure/ui-color-utils';
+import { IconButton, Button } from '@instructure/ui-buttons';
+import { View } from '@instructure/ui-view';
+import { Tooltip } from '@instructure/ui-tooltip';
+import { Popover } from '@instructure/ui-popover';
+import { Text } from '@instructure/ui-text';
+import { Drilldown } from '@instructure/ui-drilldown';
+import { IconAddLine, IconCheckDarkSolid } from '@instructure/ui-icons';
+import { ColorIndicator } from '../ColorIndicator';
+import { ColorMixer } from '../ColorMixer';
+import { ColorContrast } from '../ColorContrast';
+import generateStyle from './styles';
+import generateComponentTheme from './theme';
+import { propTypes, allowedProps } from './props';
+/**
+---
+category: components
+---
+@tsProps
+**/
+
+let ColorPreset = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class ColorPreset extends 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 jsx(Popover, {
+        renderTrigger: 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
+        }, jsx(IconButton, {
+          disabled: this.props.disabled,
+          screenReaderLabel: this.props.colorMixerSettings.addNewPresetButtonScreenReaderLabel
+        }, _IconAddLine || (_IconAddLine = jsx(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')
+      }, jsx("div", {
+        css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.popoverContent
+      }, jsx(ColorMixer, {
+        value: colorToHex8(this.state.newColor),
+        onChange: newColor => this.setState({
+          newColor: 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) && jsx("div", {
+        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.popoverContrastBlock
+      }, jsx(ColorContrast, {
+        firstColor: this.props.colorMixerSettings.colorContrast.firstColor,
+        secondColor: 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
+      }))), jsx("div", {
+        css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.popoverFooter
+      }, jsx(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([colorToHex8(this.state.newColor), ...this.props.colors]);
+          this.setState({
+            openAddNew: false
+          });
+        },
+        color: "primary",
+        margin: "0 xx-small 0 xx-small"
+      }, "Add"), jsx(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 jsx(Tooltip, {
+        renderTip: jsx("div", null, color)
+      }, jsx(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"
+      }), jsx("div", null, jsx(ColorIndicator, {
+        color: color,
+        shape: "rectangle"
+      }), this.props.selected === color && 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
+      }, jsx(IconCheckDarkSolid, {
+        themeOverride: {
+          sizeXSmall: '0.8rem'
+        },
+        size: "x-small"
+      })))));
+    };
+
+    this.renderSettingsMenu = (color, index) => jsx(Drilldown, {
+      onSelect: this.onMenuItemSelected(color),
+      trigger: this.renderColorIndicator(color),
+      key: `color-preset-color-${index}`,
+      rootPageId: "root",
+      width: "10rem",
+      offsetY: "15rem"
+    }, jsx(Drilldown.Page, {
+      withoutHeaderSeparator: true,
+      id: "root",
+      renderTitle: color
+    }, _Drilldown$Option || (_Drilldown$Option = jsx(Drilldown.Option, {
+      value: "select",
+      id: "select"
+    }, "Select")), _Drilldown$Option2 || (_Drilldown$Option2 = jsx(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 = _objectWithoutProperties(_this$props9, _excluded);
+
+    return jsx("div", Object.assign({}, passthroughProps(props), {
+      ref: this.handleRef,
+      css: styles === null || styles === void 0 ? void 0 : styles.colorPreset
+    }), label && jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.label
+    }, jsx(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) : jsx("div", {
+      key: `color-preset-color-${index}`
+    }, this.renderColorIndicator(color, true))));
+  }
+
+}, _class2.displayName = "ColorPreset", _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.componentId = 'ColorPreset', _class2.defaultProps = {
+  disabled: false
+}, _class2)) || _class) || _class);
+export { ColorPreset };
+export default ColorPreset;

package/es/ColorPreset/props.js

@@ -0,0 +1,36 @@
+/*
+ * 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.
+ */
+import PropTypes from 'prop-types';
+const propTypes = {
+  colors: PropTypes.array.isRequired,
+  disabled: PropTypes.bool,
+  elementRef: PropTypes.func,
+  label: PropTypes.string,
+  colorMixerSettings: PropTypes.object,
+  onSelect: PropTypes.func.isRequired,
+  popoverScreenReaderLabel: PropTypes.string,
+  selected: PropTypes.string.isRequired
+};
+const allowedProps = ['colors', 'disabled', 'elementRef', 'label', 'colorMixerSettings', 'onSelect', 'popoverScreenReaderLabel', 'selected'];
+export { propTypes, allowedProps };

package/es/ColorPreset/styles.js

@@ -0,0 +1,102 @@
+/*
+ * 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
+    }
+  };
+};
+
+export default generateStyle;

package/es/ColorPreset/theme.js

@@ -0,0 +1,53 @@
+/*
+ * 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
+  };
+};
+
+export default generateComponentTheme;

package/es/index.js

@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+export { ColorPicker } from './ColorPicker';
+export { ColorMixer } from './ColorMixer';
+export { ColorPreset } from './ColorPreset';
+export { ColorContrast } from './ColorContrast';
+export { ColorIndicator } from './ColorIndicator';

package/lib/ColorContrast/ColorContrastLocator.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorContrastLocator = void 0;
+
+var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
+
+var _uiTestQueries = require("@instructure/ui-test-queries");
+
+var _PillLocator = require("@instructure/ui-pill/lib/Pill/PillLocator");
+
+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.
+ */
+
+/* eslint-disable no-restricted-imports */
+// @ts-expect-error bypass no type definition found error
+
+/* eslint-enable no-restricted-imports */
+// @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 ColorContrastLocator = (0, _locator.locator)(_index.ColorContrast.selector, {
+  findPreview: function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return (0, _uiTestQueries.find)('[class$=-colorContrast__colorPreview]', ...args);
+  },
+  findNormalTextCheckPill: async () => {
+    const pills = await _PillLocator.PillLocator.findAll();
+    return pills[0];
+  },
+  findLargeTextCheckPill: async () => {
+    const pills = await _PillLocator.PillLocator.findAll();
+    return pills[1];
+  },
+  findGraphicsCheckPill: async () => {
+    const pills = await _PillLocator.PillLocator.findAll();
+    return pills[2];
+  }
+});
+exports.ColorContrastLocator = ColorContrastLocator;