@instructure/ui-color-picker 8.56.1 → 8.56.2-snapshot-2

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.56.2-snapshot-2](https://github.com/instructure/instructure-ui/compare/v8.56.1...v8.56.2-snapshot-2) (2024-08-06)
+
+
+### Bug Fixes
+
+* **ui-color-picker,ui-color-utils:** fix corrupted CJS build ([ba5965f](https://github.com/instructure/instructure-ui/commit/ba5965f1b4b21067b1122a490183252868916f1a))
+
+
+
+
+
 ## [8.56.1](https://github.com/instructure/instructure-ui/compare/v8.56.0...v8.56.1) (2024-06-13)
 
 

package/es/ColorContrast/index.js

@@ -29,7 +29,8 @@ import React, { Component } from 'react';
 import { omitProps } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { error } from '@instructure/console';
-import { contrast as getContrast, colorToRGB, colorToHex8 } from '@instructure/ui-color-utils';
+import { contrast as getContrast } from '@instructure/ui-color-utils';
+import conversions from '@instructure/ui-color-utils';
 import { withStyle, jsx } from '@instructure/emotion';
 import { Text } from '@instructure/ui-text';
 import { Pill } from '@instructure/ui-pill';
@@ -124,8 +125,8 @@ let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _d
   //We project the firstColor onto an opaque white background, then we project the secondColor onto
   //the projected first color. We calculate the contrast of these two, projected colors.
   get calcContrast() {
-    const c1RGBA = colorToRGB(this.props.firstColor);
-    const c2RGBA = colorToRGB(this.props.secondColor);
+    const c1RGBA = conversions.colorToRGB(this.props.firstColor);
+    const c2RGBA = conversions.colorToRGB(this.props.secondColor);
     const c1OnWhite = this.calcBlendedColor({
       r: 255,
       g: 255,
@@ -133,7 +134,7 @@ let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _d
       a: 1
     }, c1RGBA);
     const c2OnC1OnWhite = this.calcBlendedColor(c1OnWhite, c2RGBA);
-    return getContrast(colorToHex8(c1OnWhite), colorToHex8(c2OnC1OnWhite), 2);
+    return getContrast(conversions.colorToHex8(c1OnWhite), conversions.colorToHex8(c2OnC1OnWhite), 2);
   }
   render() {
     const _this$props5 = this.props,

package/es/ColorIndicator/styles.js

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
+import conversions from '@instructure/ui-color-utils';
 import { isValid } from '@instructure/ui-color-utils';
-import { colorToRGB } from '@instructure/ui-color-utils';
 const calcBlendedColor = (c1, c2) => {
   // 0.4 as decided by design
   const c2Alpha = c2.a * 0.4;
@@ -61,7 +61,7 @@ const generateStyle = (componentTheme, props) => {
       backgroundImage: componentTheme.backgroundImage,
       backgroundSize: componentTheme.backgroundSize,
       backgroundPosition: componentTheme.backgroundPosition,
-      borderColor: calcBlendedColor(colorToRGB(componentTheme.colorIndicatorBorderColor), colorToRGB(isValid(color) ? color : '#fff'))
+      borderColor: calcBlendedColor(conversions.colorToRGB(componentTheme.colorIndicatorBorderColor), conversions.colorToRGB(isValid(color) ? color : '#fff'))
     }
   };
 };

package/es/ColorMixer/index.js

@@ -28,7 +28,8 @@ import { Component } from 'react';
 import { withStyle, jsx } from '@instructure/emotion';
 import { omitProps } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
-import { colorToHex8, colorToHsva, colorToRGB, isValid } from '@instructure/ui-color-utils';
+import { isValid } from '@instructure/ui-color-utils';
+import conversions from '@instructure/ui-color-utils';
 import { logWarn as warn } from '@instructure/console';
 import ColorPalette from './ColorPalette';
 import Slider from './Slider';
@@ -69,7 +70,7 @@ let ColorMixer = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
     warn(isValid(this.props.value), `[ColorMixer] The passed color value is not valid.`);
     this.setState({
-      ...colorToHsva(this.props.value)
+      ...conversions.colorToHsva(this.props.value)
     });
   }
   componentDidUpdate(prevProps, prevState) {
@@ -81,21 +82,21 @@ let ColorMixer = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
       v = _this$state.v,
       a = _this$state.a;
     if (prevState.h !== h || prevState.s !== s || prevState.v !== v || prevState.a !== a) {
-      this.props.onChange(colorToHex8({
+      this.props.onChange(conversions.colorToHex8({
         h,
         s,
         v,
         a
       }));
     }
-    if (prevProps.value !== this.props.value && colorToHex8({
+    if (prevProps.value !== this.props.value && conversions.colorToHex8({
       h,
       s,
       v,
       a
     }) !== this.props.value) {
       this.setState({
-        ...colorToHsva(this.props.value)
+        ...conversions.colorToHsva(this.props.value)
       });
     }
   }
@@ -122,7 +123,7 @@ let ColorMixer = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
       css: styles === null || styles === void 0 ? void 0 : styles.colorMixer
     }), jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.sliderAndPaletteContainer,
-      "aria-label": `${colorToHex8({
+      "aria-label": `${conversions.colorToHex8({
         h,
         s,
         v,
@@ -156,7 +157,7 @@ let ColorMixer = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
       value: h,
       minValue: 0,
       maxValue: 359,
-      color: colorToHex8({
+      color: conversions.colorToHex8({
         h,
         s,
         v,
@@ -173,7 +174,7 @@ let ColorMixer = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
       width: this._width,
       height: this._sliderHeight,
       indicatorRadius: this._sliderIndicatorRadius,
-      color: colorToHex8({
+      color: conversions.colorToHex8({
         h,
         s,
         v
@@ -189,14 +190,14 @@ let ColorMixer = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
       disabled: disabled,
       label: withAlpha ? 'RGBA' : 'RGB',
       width: this._width,
-      value: colorToRGB({
+      value: conversions.colorToRGB({
         h,
         s,
         v,
         a
       }),
       onChange: color => this.setState({
-        ...colorToHsva(color)
+        ...conversions.colorToHsva(color)
       }),
       withAlpha: withAlpha,
       rgbRedInputScreenReaderLabel: rgbRedInputScreenReaderLabel,

package/es/ColorPicker/index.js

@@ -30,7 +30,8 @@ import { withStyle, jsx } from '@instructure/emotion';
 import { warn, error } from '@instructure/console';
 import { omitProps } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
-import { colorToHex8, isValid, contrast as getContrast } from '@instructure/ui-color-utils';
+import { isValid, contrast as getContrast } from '@instructure/ui-color-utils';
+import conversions from '@instructure/ui-color-utils';
 import { TextInput } from '@instructure/ui-text-input';
 import { Tooltip } from '@instructure/ui-tooltip';
 import { Button, IconButton } from '@instructure/ui-buttons';
@@ -119,7 +120,7 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
         onChange = _this$props.onChange;
       return jsx("div", null, typeof children === 'function' && children(`#${this.mixedColorWithStrippedAlpha}`, newColor => {
         this.setState({
-          mixedColor: colorToHex8(newColor).slice(1)
+          mixedColor: conversions.colorToHex8(newColor).slice(1)
         });
       }, () => {
         this.setState({
@@ -139,7 +140,7 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       }, ((_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : (_this$props2$colorMix = _this$props2.colorMixerSettings) === null || _this$props2$colorMix === void 0 ? void 0 : _this$props2$colorMix.colorMixer) && jsx(ColorMixer, {
         value: `#${this.state.mixedColor}`,
         onChange: newColor => this.setState({
-          mixedColor: colorToHex8(newColor).slice(1)
+          mixedColor: conversions.colorToHex8(newColor).slice(1)
         }),
         withAlpha: this.props.colorMixerSettings.colorMixer.withAlpha,
         rgbRedInputScreenReaderLabel: this.props.colorMixerSettings.colorMixer.rgbRedInputScreenReaderLabel,

package/es/ColorPreset/index.js

@@ -28,7 +28,7 @@ import { Component } from 'react';
 import { withStyle, jsx } from '@instructure/emotion';
 import { omitProps } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
-import { colorToHex8, colorToRGB } from '@instructure/ui-color-utils';
+import conversions from '@instructure/ui-color-utils';
 import { IconButton, Button } from '@instructure/ui-buttons';
 import { View } from '@instructure/ui-view';
 import { Tooltip } from '@instructure/ui-tooltip';
@@ -99,9 +99,9 @@ let ColorPreset = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       }, 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),
+        value: conversions.colorToHex8(this.state.newColor),
         onChange: newColor => this.setState({
-          newColor: colorToRGB(newColor)
+          newColor: conversions.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,
@@ -115,7 +115,7 @@ let ColorPreset = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
         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),
+        secondColor: conversions.colorToHex8(this.state.newColor),
         label: this.props.colorMixerSettings.colorContrast.label,
         successLabel: this.props.colorMixerSettings.colorContrast.successLabel,
         failureLabel: this.props.colorMixerSettings.colorContrast.failureLabel,
@@ -129,7 +129,7 @@ let ColorPreset = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       }, 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$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([conversions.colorToHex8(this.state.newColor), ...this.props.colors]);
           this.setState({
             openAddNew: false
           });
@@ -226,7 +226,7 @@ let ColorPreset = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   }
   isSelectedColor(color) {
     const selected = this.props.selected;
-    return !!selected && colorToHex8(selected) === colorToHex8(color);
+    return !!selected && conversions.colorToHex8(selected) === conversions.colorToHex8(color);
   }
   render() {
     const _this$props9 = this.props,

package/lib/ColorContrast/index.js

@@ -11,6 +11,7 @@ var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _console = require("@instructure/console");
 var _contrast = require("@instructure/ui-color-utils/lib/contrast.js");
+var _uiColorUtils = _interopRequireDefault(require("@instructure/ui-color-utils"));
 var _emotion = require("@instructure/emotion");
 var _Text = require("@instructure/ui-text/lib/Text");
 var _Pill = require("@instructure/ui-pill/lib/Pill");
@@ -130,8 +131,8 @@ let ColorContrast = exports.ColorContrast = (_dec = (0, _emotion.withStyle)(_sty
   //We project the firstColor onto an opaque white background, then we project the secondColor onto
   //the projected first color. We calculate the contrast of these two, projected colors.
   get calcContrast() {
-    const c1RGBA = colorToRGB(this.props.firstColor);
-    const c2RGBA = colorToRGB(this.props.secondColor);
+    const c1RGBA = _uiColorUtils.default.colorToRGB(this.props.firstColor);
+    const c2RGBA = _uiColorUtils.default.colorToRGB(this.props.secondColor);
     const c1OnWhite = this.calcBlendedColor({
       r: 255,
       g: 255,
@@ -139,7 +140,7 @@ let ColorContrast = exports.ColorContrast = (_dec = (0, _emotion.withStyle)(_sty
       a: 1
     }, c1RGBA);
     const c2OnC1OnWhite = this.calcBlendedColor(c1OnWhite, c2RGBA);
-    return (0, _contrast.contrast)(colorToHex8(c1OnWhite), colorToHex8(c2OnC1OnWhite), 2);
+    return (0, _contrast.contrast)(_uiColorUtils.default.colorToHex8(c1OnWhite), _uiColorUtils.default.colorToHex8(c2OnC1OnWhite), 2);
   }
   render() {
     const _this$props5 = this.props,

package/lib/ColorIndicator/styles.js

@@ -1,11 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _uiColorUtils = _interopRequireDefault(require("@instructure/ui-color-utils"));
 var _isValid = require("@instructure/ui-color-utils/lib/isValid.js");
-var _uiColorUtils = require("@instructure/ui-color-utils");
 /*
  * The MIT License (MIT)
  *
@@ -67,7 +68,7 @@ const generateStyle = (componentTheme, props) => {
       backgroundImage: componentTheme.backgroundImage,
       backgroundSize: componentTheme.backgroundSize,
       backgroundPosition: componentTheme.backgroundPosition,
-      borderColor: calcBlendedColor((0, _uiColorUtils.colorToRGB)(componentTheme.colorIndicatorBorderColor), (0, _uiColorUtils.colorToRGB)((0, _isValid.isValid)(color) ? color : '#fff'))
+      borderColor: calcBlendedColor(_uiColorUtils.default.colorToRGB(componentTheme.colorIndicatorBorderColor), _uiColorUtils.default.colorToRGB((0, _isValid.isValid)(color) ? color : '#fff'))
     }
   };
 };

package/lib/ColorMixer/index.js

@@ -10,6 +10,7 @@ var _emotion = require("@instructure/emotion");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _isValid = require("@instructure/ui-color-utils/lib/isValid.js");
+var _uiColorUtils = _interopRequireDefault(require("@instructure/ui-color-utils"));
 var _console = require("@instructure/console");
 var _ColorPalette = _interopRequireDefault(require("./ColorPalette"));
 var _Slider = _interopRequireDefault(require("./Slider"));
@@ -74,7 +75,7 @@ let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyle)(_styles.de
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
     (0, _console.logWarn)((0, _isValid.isValid)(this.props.value), `[ColorMixer] The passed color value is not valid.`);
     this.setState({
-      ...colorToHsva(this.props.value)
+      ..._uiColorUtils.default.colorToHsva(this.props.value)
     });
   }
   componentDidUpdate(prevProps, prevState) {
@@ -86,21 +87,21 @@ let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyle)(_styles.de
       v = _this$state.v,
       a = _this$state.a;
     if (prevState.h !== h || prevState.s !== s || prevState.v !== v || prevState.a !== a) {
-      this.props.onChange(colorToHex8({
+      this.props.onChange(_uiColorUtils.default.colorToHex8({
         h,
         s,
         v,
         a
       }));
     }
-    if (prevProps.value !== this.props.value && colorToHex8({
+    if (prevProps.value !== this.props.value && _uiColorUtils.default.colorToHex8({
       h,
       s,
       v,
       a
     }) !== this.props.value) {
       this.setState({
-        ...colorToHsva(this.props.value)
+        ..._uiColorUtils.default.colorToHsva(this.props.value)
       });
     }
   }
@@ -127,7 +128,7 @@ let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyle)(_styles.de
       css: styles === null || styles === void 0 ? void 0 : styles.colorMixer
     }), (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.sliderAndPaletteContainer,
-      "aria-label": `${colorToHex8({
+      "aria-label": `${_uiColorUtils.default.colorToHex8({
         h,
         s,
         v,
@@ -161,7 +162,7 @@ let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyle)(_styles.de
       value: h,
       minValue: 0,
       maxValue: 359,
-      color: colorToHex8({
+      color: _uiColorUtils.default.colorToHex8({
         h,
         s,
         v,
@@ -178,7 +179,7 @@ let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyle)(_styles.de
       width: this._width,
       height: this._sliderHeight,
       indicatorRadius: this._sliderIndicatorRadius,
-      color: colorToHex8({
+      color: _uiColorUtils.default.colorToHex8({
         h,
         s,
         v
@@ -194,14 +195,14 @@ let ColorMixer = exports.ColorMixer = (_dec = (0, _emotion.withStyle)(_styles.de
       disabled: disabled,
       label: withAlpha ? 'RGBA' : 'RGB',
       width: this._width,
-      value: colorToRGB({
+      value: _uiColorUtils.default.colorToRGB({
         h,
         s,
         v,
         a
       }),
       onChange: color => this.setState({
-        ...colorToHsva(color)
+        ..._uiColorUtils.default.colorToHsva(color)
       }),
       withAlpha: withAlpha,
       rgbRedInputScreenReaderLabel: rgbRedInputScreenReaderLabel,

package/lib/ColorPicker/index.js

@@ -13,6 +13,7 @@ var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _isValid = require("@instructure/ui-color-utils/lib/isValid.js");
 var _contrast = require("@instructure/ui-color-utils/lib/contrast.js");
+var _uiColorUtils = _interopRequireDefault(require("@instructure/ui-color-utils"));
 var _TextInput = require("@instructure/ui-text-input/lib/TextInput");
 var _Tooltip = require("@instructure/ui-tooltip/lib/Tooltip");
 var _Button = require("@instructure/ui-buttons/lib/Button");
@@ -131,7 +132,7 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
         onChange = _this$props.onChange;
       return (0, _emotion.jsx)("div", null, typeof children === 'function' && children(`#${this.mixedColorWithStrippedAlpha}`, newColor => {
         this.setState({
-          mixedColor: colorToHex8(newColor).slice(1)
+          mixedColor: _uiColorUtils.default.colorToHex8(newColor).slice(1)
         });
       }, () => {
         this.setState({
@@ -151,7 +152,7 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
       }, ((_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : (_this$props2$colorMix = _this$props2.colorMixerSettings) === null || _this$props2$colorMix === void 0 ? void 0 : _this$props2$colorMix.colorMixer) && (0, _emotion.jsx)(_ColorMixer.default, {
         value: `#${this.state.mixedColor}`,
         onChange: newColor => this.setState({
-          mixedColor: colorToHex8(newColor).slice(1)
+          mixedColor: _uiColorUtils.default.colorToHex8(newColor).slice(1)
         }),
         withAlpha: this.props.colorMixerSettings.colorMixer.withAlpha,
         rgbRedInputScreenReaderLabel: this.props.colorMixerSettings.colorMixer.rgbRedInputScreenReaderLabel,

package/lib/ColorPreset/index.js

@@ -9,7 +9,7 @@ var _react = require("react");
 var _emotion = require("@instructure/emotion");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-var _uiColorUtils = require("@instructure/ui-color-utils");
+var _uiColorUtils = _interopRequireDefault(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");
@@ -106,9 +106,9 @@ let ColorPreset = exports.ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.
       }, (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),
+        value: _uiColorUtils.default.colorToHex8(this.state.newColor),
         onChange: newColor => this.setState({
-          newColor: (0, _uiColorUtils.colorToRGB)(newColor)
+          newColor: _uiColorUtils.default.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,
@@ -122,7 +122,7 @@ let ColorPreset = exports.ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.
         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),
+        secondColor: _uiColorUtils.default.colorToHex8(this.state.newColor),
         label: this.props.colorMixerSettings.colorContrast.label,
         successLabel: this.props.colorMixerSettings.colorContrast.successLabel,
         failureLabel: this.props.colorMixerSettings.colorContrast.failureLabel,
@@ -136,7 +136,7 @@ let ColorPreset = exports.ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.
       }, (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$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([_uiColorUtils.default.colorToHex8(this.state.newColor), ...this.props.colors]);
           this.setState({
             openAddNew: false
           });
@@ -233,7 +233,7 @@ let ColorPreset = exports.ColorPreset = (_dec = (0, _emotion.withStyle)(_styles.
   }
   isSelectedColor(color) {
     const selected = this.props.selected;
-    return !!selected && (0, _uiColorUtils.colorToHex8)(selected) === (0, _uiColorUtils.colorToHex8)(color);
+    return !!selected && _uiColorUtils.default.colorToHex8(selected) === _uiColorUtils.default.colorToHex8(color);
   }
   render() {
     const _this$props9 = this.props,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-color-picker",
-  "version": "8.56.1",
+  "version": "8.56.2-snapshot-2",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,33 +24,33 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/console": "8.56.1",
-    "@instructure/emotion": "8.56.1",
-    "@instructure/shared-types": "8.56.1",
-    "@instructure/ui-a11y-content": "8.56.1",
-    "@instructure/ui-buttons": "8.56.1",
-    "@instructure/ui-color-utils": "8.56.1",
-    "@instructure/ui-dom-utils": "8.56.1",
-    "@instructure/ui-drilldown": "8.56.1",
-    "@instructure/ui-form-field": "8.56.1",
-    "@instructure/ui-icons": "8.56.1",
-    "@instructure/ui-pill": "8.56.1",
-    "@instructure/ui-popover": "8.56.1",
-    "@instructure/ui-react-utils": "8.56.1",
-    "@instructure/ui-testable": "8.56.1",
-    "@instructure/ui-text": "8.56.1",
-    "@instructure/ui-text-input": "8.56.1",
-    "@instructure/ui-themes": "8.56.1",
-    "@instructure/ui-tooltip": "8.56.1",
-    "@instructure/ui-utils": "8.56.1",
-    "@instructure/ui-view": "8.56.1",
+    "@instructure/console": "8.56.2-snapshot-2",
+    "@instructure/emotion": "8.56.2-snapshot-2",
+    "@instructure/shared-types": "8.56.2-snapshot-2",
+    "@instructure/ui-a11y-content": "8.56.2-snapshot-2",
+    "@instructure/ui-buttons": "8.56.2-snapshot-2",
+    "@instructure/ui-color-utils": "8.56.2-snapshot-2",
+    "@instructure/ui-dom-utils": "8.56.2-snapshot-2",
+    "@instructure/ui-drilldown": "8.56.2-snapshot-2",
+    "@instructure/ui-form-field": "8.56.2-snapshot-2",
+    "@instructure/ui-icons": "8.56.2-snapshot-2",
+    "@instructure/ui-pill": "8.56.2-snapshot-2",
+    "@instructure/ui-popover": "8.56.2-snapshot-2",
+    "@instructure/ui-react-utils": "8.56.2-snapshot-2",
+    "@instructure/ui-testable": "8.56.2-snapshot-2",
+    "@instructure/ui-text": "8.56.2-snapshot-2",
+    "@instructure/ui-text-input": "8.56.2-snapshot-2",
+    "@instructure/ui-themes": "8.56.2-snapshot-2",
+    "@instructure/ui-tooltip": "8.56.2-snapshot-2",
+    "@instructure/ui-utils": "8.56.2-snapshot-2",
+    "@instructure/ui-view": "8.56.2-snapshot-2",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.56.1",
-    "@instructure/ui-test-locator": "8.56.1",
-    "@instructure/ui-test-queries": "8.56.1",
-    "@instructure/ui-test-utils": "8.56.1"
+    "@instructure/ui-babel-preset": "8.56.2-snapshot-2",
+    "@instructure/ui-test-locator": "8.56.2-snapshot-2",
+    "@instructure/ui-test-queries": "8.56.2-snapshot-2",
+    "@instructure/ui-test-utils": "8.56.2-snapshot-2"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

package/src/ColorContrast/index.tsx

@@ -29,11 +29,8 @@ import React, { Component } from 'react'
 import { omitProps } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
 import { error } from '@instructure/console'
-import {
-  contrast as getContrast,
-  colorToRGB,
-  colorToHex8
-} from '@instructure/ui-color-utils'
+import { contrast as getContrast } from '@instructure/ui-color-utils'
+import conversions from '@instructure/ui-color-utils'
 import type { RGBAType } from '@instructure/ui-color-utils'
 import { withStyle, jsx } from '@instructure/emotion'
 
@@ -169,15 +166,19 @@ class ColorContrast extends Component<ColorContrastProps> {
   //We project the firstColor onto an opaque white background, then we project the secondColor onto
   //the projected first color. We calculate the contrast of these two, projected colors.
   get calcContrast() {
-    const c1RGBA = colorToRGB(this.props.firstColor)
-    const c2RGBA = colorToRGB(this.props.secondColor)
+    const c1RGBA = conversions.colorToRGB(this.props.firstColor)
+    const c2RGBA = conversions.colorToRGB(this.props.secondColor)
     const c1OnWhite = this.calcBlendedColor(
       { r: 255, g: 255, b: 255, a: 1 },
       c1RGBA
     )
     const c2OnC1OnWhite = this.calcBlendedColor(c1OnWhite, c2RGBA)
 
-    return getContrast(colorToHex8(c1OnWhite), colorToHex8(c2OnC1OnWhite), 2)
+    return getContrast(
+      conversions.colorToHex8(c1OnWhite),
+      conversions.colorToHex8(c2OnC1OnWhite),
+      2
+    )
   }
 
   render() {

package/src/ColorIndicator/styles.ts

@@ -25,8 +25,8 @@
 import type { ColorIndicatorProps, ColorIndicatorStyle } from './props'
 import type { ColorIndicatorTheme } from '@instructure/shared-types'
 import type { RGBAType } from '@instructure/ui-color-utils'
+import conversions from '@instructure/ui-color-utils'
 import { isValid } from '@instructure/ui-color-utils'
-import { colorToRGB } from '@instructure/ui-color-utils'
 
 const calcBlendedColor = (c1: RGBAType, c2: RGBAType) => {
   // 0.4 as decided by design
@@ -79,8 +79,8 @@ const generateStyle = (
       backgroundSize: componentTheme.backgroundSize,
       backgroundPosition: componentTheme.backgroundPosition,
       borderColor: calcBlendedColor(
-        colorToRGB(componentTheme.colorIndicatorBorderColor),
-        colorToRGB(isValid(color!) ? color! : '#fff')
+        conversions.colorToRGB(componentTheme.colorIndicatorBorderColor),
+        conversions.colorToRGB(isValid(color!) ? color! : '#fff')
       )
     }
   }

package/src/ColorMixer/index.tsx

@@ -28,12 +28,8 @@ import { Component } from 'react'
 import { withStyle, jsx } from '@instructure/emotion'
 import { omitProps } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
-import {
-  colorToHex8,
-  colorToHsva,
-  colorToRGB,
-  isValid
-} from '@instructure/ui-color-utils'
+import { isValid } from '@instructure/ui-color-utils'
+import conversions from '@instructure/ui-color-utils'
 import { logWarn as warn } from '@instructure/console'
 import type { HSVType } from '@instructure/ui-color-utils'
 import ColorPalette from './ColorPalette'
@@ -97,7 +93,7 @@ class ColorMixer extends Component<ColorMixerProps, ColorMixerState> {
       `[ColorMixer] The passed color value is not valid.`
     )
     this.setState({
-      ...colorToHsva(this.props.value!)
+      ...conversions.colorToHsva(this.props.value!)
     })
   }
 
@@ -110,14 +106,14 @@ class ColorMixer extends Component<ColorMixerProps, ColorMixerState> {
       prevState.v !== v ||
       prevState.a !== a
     ) {
-      this.props.onChange(colorToHex8({ h, s, v, a }))
+      this.props.onChange(conversions.colorToHex8({ h, s, v, a }))
     }
     if (
       prevProps.value !== this.props.value &&
-      colorToHex8({ h, s, v, a }) !== this.props.value
+      conversions.colorToHex8({ h, s, v, a }) !== this.props.value
     ) {
       this.setState({
-        ...colorToHsva(this.props.value!)
+        ...conversions.colorToHsva(this.props.value!)
       })
     }
   }
@@ -147,7 +143,7 @@ class ColorMixer extends Component<ColorMixerProps, ColorMixerState> {
       >
         <span
           css={styles?.sliderAndPaletteContainer}
-          aria-label={`${colorToHex8({ h, s, v, a })}`}
+          aria-label={`${conversions.colorToHex8({ h, s, v, a })}`}
           aria-live="polite"
         >
           <ColorPalette
@@ -177,7 +173,7 @@ class ColorMixer extends Component<ColorMixerProps, ColorMixerState> {
             value={h}
             minValue={0}
             maxValue={359}
-            color={colorToHex8({ h, s, v, a })}
+            color={conversions.colorToHex8({ h, s, v, a })}
             onChange={(hue: number) => {
               this.setState({ h: hue })
             }}
@@ -191,7 +187,7 @@ class ColorMixer extends Component<ColorMixerProps, ColorMixerState> {
               width={this._width}
               height={this._sliderHeight}
               indicatorRadius={this._sliderIndicatorRadius}
-              color={colorToHex8({ h, s, v })}
+              color={conversions.colorToHex8({ h, s, v })}
               value={a}
               minValue={0}
               maxValue={1}
@@ -206,8 +202,10 @@ class ColorMixer extends Component<ColorMixerProps, ColorMixerState> {
           disabled={disabled}
           label={withAlpha ? 'RGBA' : 'RGB'}
           width={this._width}
-          value={colorToRGB({ h, s, v, a })}
-          onChange={(color) => this.setState({ ...colorToHsva(color) })}
+          value={conversions.colorToRGB({ h, s, v, a })}
+          onChange={(color) =>
+            this.setState({ ...conversions.colorToHsva(color) })
+          }
           withAlpha={withAlpha}
           rgbRedInputScreenReaderLabel={rgbRedInputScreenReaderLabel}
           rgbGreenInputScreenReaderLabel={rgbGreenInputScreenReaderLabel}