@zendeskgarden/react-colorpickers 9.0.0-next.18 → 9.0.0-next.19

package/dist/esm/elements/ColorPicker/ColorWell.js

@@ -95,7 +95,7 @@ const ColorWell = React__default.memo(_ref => {
   }, [throttledChange]);
   return (
     React__default.createElement(StyledColorWell, {
-      hue: hue,
+      $hue: hue,
       ref: containerRef,
       role: "presentation",
       onMouseDown: handleMouseDown

package/dist/esm/elements/ColorPicker/index.js

@@ -134,27 +134,27 @@ const ColorPicker = forwardRef((_ref, ref) => {
   }, [computedColor]);
   return React__default.createElement(StyledColorPicker, Object.assign({
     ref: ref,
-    isOpaque: isOpaque
+    $isOpaque: isOpaque
   }, props), React__default.createElement(ColorWell, {
     hue: computedColor.hue,
     saturation: computedColor.saturation,
     lightness: computedColor.lightness,
     onChange: handleColorWellChange
   }), React__default.createElement(StyledSliderGroup, null, React__default.createElement(StyledPreview, {
-    red: computedColor.red,
-    green: computedColor.green,
-    blue: computedColor.blue,
-    alpha: computedColor.alpha,
-    isOpaque: isOpaque
+    $red: computedColor.red,
+    $green: computedColor.green,
+    $blue: computedColor.blue,
+    $alpha: computedColor.alpha,
+    $isOpaque: isOpaque
   }), React__default.createElement(StyledSliders, {
-    isOpaque: isOpaque
+    $isOpaque: isOpaque
   }, React__default.createElement(Field, null, React__default.createElement(Field.Label, {
     hidden: true
   }, labels.hueSlider || 'Hue slider'), React__default.createElement(StyledHueRange, {
     step: 1,
     max: 360,
     value: computedColor.hue,
-    isOpaque: isOpaque,
+    $isOpaque: isOpaque,
     onChange: handleHueChange
   })), !isOpaque && React__default.createElement(Field, null, React__default.createElement(Field.Label, {
     hidden: true
@@ -163,9 +163,9 @@ const ColorPicker = forwardRef((_ref, ref) => {
     step: 0.01,
     value: computedColor.alpha / 100,
     onChange: handleAlphaSliderChange,
-    red: computedColor.red,
-    green: computedColor.green,
-    blue: computedColor.blue
+    $red: computedColor.red,
+    $green: computedColor.green,
+    $blue: computedColor.blue
   })))), React__default.createElement(StyledInputGroup, null, React__default.createElement(StyledHexField, null, React__default.createElement(StyledLabel, {
     isRegular: true
   }, labels.hex || 'Hex'), React__default.createElement(StyledInput, {

package/dist/esm/elements/ColorPickerDialog/index.js

@@ -102,7 +102,7 @@ const ColorPickerDialog = forwardRef((_ref, ref) => {
     ref: buttonRef,
     onClick: onClick
   }, buttonProps), React__default.createElement(StyledButtonPreview, {
-    backgroundColor: isControlled ? color : uncontrolledColor
+    $backgroundColor: isControlled ? color : uncontrolledColor
   }), React__default.createElement(Button.EndIcon, {
     isRotated: referenceElement != null
   }, React__default.createElement(SvgChevronDownStroke, null))), React__default.createElement(StyledTooltipModal, Object.assign({
@@ -110,7 +110,6 @@ const ColorPickerDialog = forwardRef((_ref, ref) => {
     hasArrow: hasArrow,
     zIndex: zIndex,
     isAnimated: isAnimated,
-    isOpaque: isOpaque,
     focusOnMount: false,
     placement: placement,
     referenceElement: referenceElement,

package/dist/esm/elements/ColorSwatch/index.js

@@ -119,7 +119,7 @@ const ColorSwatch = forwardRef((_ref, ref) => {
       key: value,
       role: role
     }, React__default.createElement(StyledColorSwatchLabel, {
-      backgroundColor: value
+      $backgroundColor: value
     }, React__default.createElement(Tooltip, {
       content: label
     }, React__default.createElement(StyledColorSwatchInput, Object.assign({

package/dist/esm/elements/ColorSwatchDialog/index.js

@@ -131,7 +131,7 @@ const ColorSwatchDialog = forwardRef((_ref, ref) => {
     ref: buttonRef,
     onClick: onClick
   }, buttonProps), React__default.createElement(StyledButtonPreview, {
-    backgroundColor: backgroundColor
+    $backgroundColor: backgroundColor
   }), React__default.createElement(Button.EndIcon, {
     isRotated: referenceElement !== null
   }, React__default.createElement(SvgChevronDownStroke, null))), React__default.createElement(StyledTooltipModal, Object.assign({

package/dist/esm/styled/ColorPicker/StyledAlphaRange.js

@@ -11,8 +11,8 @@ import { StyledRange, getTrackMargin, getTrackHeight } from '../common/StyledRan
 const COMPONENT_ID = 'colorpickers.colorpicker_alpha';
 const background = props => {
   const direction = `to ${props.theme.rtl ? 'left' : 'right'}`;
-  const fromColor = `rgba(${props.red}, ${props.green}, ${props.blue}, 0)`;
-  const toColor = `rgb(${props.red}, ${props.green}, ${props.blue})`;
+  const fromColor = `rgba(${props.$red}, ${props.$green}, ${props.$blue}, 0)`;
+  const toColor = `rgb(${props.$red}, ${props.$green}, ${props.$blue})`;
   const positionY = getTrackMargin(props);
   const height = getTrackHeight(props);
   const overlay = `linear-gradient(${direction}, ${fromColor}, ${toColor}) 0 ${positionY}px / 100% ${height}px no-repeat`;
@@ -30,7 +30,7 @@ const StyledAlphaRange = styled(StyledRange).attrs(props => ({
     background: background(props)
   },
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-1f6hp2j-0"

package/dist/esm/styled/ColorPicker/StyledColorPicker.js

@@ -9,11 +9,11 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 
 const COMPONENT_ID = 'colorpickers.colorpicker';
 const getColorPickerWidth = props => {
-  return props.isOpaque ? 268 : 312;
+  return props.$isOpaque ? 268 : 312;
 };
 const StyledColorPicker = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-gspq4q-0"

package/dist/esm/styled/ColorPicker/StyledColorWell.js

@@ -14,13 +14,13 @@ const background = props => {
   const black = `linear-gradient(0deg, ${props.theme.palette.black}, ${blackAlpha} 1%, transparent 99%)`;
   const whiteAngle = `${props.theme.rtl ? -90 : 90}deg`;
   const white = `linear-gradient(${whiteAngle}, ${props.theme.palette.white} 1%, transparent)`;
-  const colorValue = hsl(props.hue, 1, 0.5);
+  const colorValue = hsl(props.$hue, 1, 0.5);
   const color = `linear-gradient(${colorValue}, ${colorValue})`;
   return `${black}, ${white}, ${color}`;
 };
 const StyledColorWell = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.19',
   'data-test-id': 'colorwell',
   style: {
     background: background(props)

package/dist/esm/styled/ColorPicker/StyledColorWellThumb.js

@@ -4,26 +4,37 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { stripUnit } from 'polished';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_colorwell_thumb';
-const sizeStyles = theme => {
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = getColor({
+    theme,
+    hue: 'white'
+  });
+  const boxShadow = `${theme.shadows.xs(getColor({
+    theme,
+    hue: 'black'
+  }))}`;
+  return css(["border-color:", ";box-shadow:", ";"], borderColor, boxShadow);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme
+  } = _ref2;
   const borderWidth = stripUnit(theme.borderWidths.sm) * 2;
   const size = theme.space.base * 5;
   const translateValue = size / -2;
-  return `
-    transform: translate(${translateValue}px, ${translateValue}px);
-    box-sizing: border-box;
-    border-width: ${borderWidth}px;
-    width: ${size}px;
-    height: ${size}px;
-  `;
+  return css(["transform:translate(", "px,", "px);box-sizing:border-box;border-width:", "px;width:", "px;height:", "px;"], translateValue, translateValue, borderWidth, size, size);
 };
 const StyledColorWellThumb = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.19',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,
@@ -32,7 +43,7 @@ const StyledColorWellThumb = styled.div.attrs(props => ({
 })).withConfig({
   displayName: "StyledColorWellThumb",
   componentId: "sc-1npyab0-0"
-})(["position:absolute;border:solid ", ";border-radius:50%;box-shadow:", ";", ";", ";"], props => props.theme.palette.white, props => props.theme.shadows.lg(`${props.theme.space.base}px`, `${props.theme.space.base * 2}px`, getColorV8('neutralHue', 800, props.theme, 0.24)), props => sizeStyles(props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["position:absolute;border:", ";border-radius:50%;", " ", " ", ";"], props => props.theme.borders.sm, sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledColorWellThumb.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/ColorPicker/StyledHexField.js

@@ -11,7 +11,7 @@ import { Field } from '@zendeskgarden/react-forms';
 const COMPONENT_ID = 'colorpickers.colorpicker_hex_field';
 const StyledHexField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.19',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",

package/dist/esm/styled/ColorPicker/StyledHueRange.js

@@ -11,11 +11,11 @@ import { StyledRange, getTrackMargin, getTrackHeight } from '../common/StyledRan
 const COMPONENT_ID = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-1gdhww1-0"
-})(["background:linear-gradient( to ", ",#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100% ) no-repeat;background-position:", ";background-size:100% ", "px;"], props => props.theme.rtl ? 'left' : 'right', props => !props.isOpaque && `0 ${getTrackMargin(props)}px`, props => getTrackHeight(props));
+})(["background:linear-gradient( to ", ",#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100% ) no-repeat;background-position:", ";background-size:100% ", "px;"], props => props.theme.rtl ? 'left' : 'right', props => !props.$isOpaque && `0 ${getTrackMargin(props)}px`, props => getTrackHeight(props));
 StyledHueRange.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/ColorPicker/StyledInput.js

@@ -11,7 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.colorpicker_input';
 const StyledInput = styled(Input).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.19',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",

package/dist/esm/styled/ColorPicker/StyledInputGroup.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.colorpicker_input_group';
 const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-1m9g2wg-0"

package/dist/esm/styled/ColorPicker/StyledLabel.js

@@ -11,7 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.colorpicker_label';
 const StyledLabel = styled(Label).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1vxt3m9-0"

package/dist/esm/styled/ColorPicker/StyledPreview.js

@@ -10,9 +10,9 @@ import { retrieveComponentStyles, DEFAULT_THEME, getCheckeredBackground } from '
 
 const COMPONENT_ID = 'colorpickers.colorpicker_preview_box';
 const background = props => {
-  const alpha = props.alpha ? props.alpha / 100 : 0;
-  let retVal = `rgba(${props.red}, ${props.green}, ${props.blue}, ${alpha})`;
-  if (!props.isOpaque) {
+  const alpha = props.$alpha ? props.$alpha / 100 : 0;
+  let retVal = `rgba(${props.$red}, ${props.$green}, ${props.$blue}, ${alpha})`;
+  if (!props.$isOpaque) {
     retVal = getCheckeredBackground({
       theme: props.theme,
       size: 13,
@@ -26,12 +26,12 @@ const StyledPreview = styled.div.attrs(props => ({
     background: background(props)
   },
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.19',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",
   componentId: "sc-1z5nh7-0"
-})(["flex-shrink:0;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], props => props.theme.borderRadii.md, props => props.theme.borderWidths.sm, props => rgba(props.theme.palette.black, 0.19), props => props.theme.space.base * (props.isOpaque ? 6 : 8), props => props.theme.space.base * (props.isOpaque ? 6 : 8), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["flex-shrink:0;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], props => props.theme.borderRadii.md, props => props.theme.borderWidths.sm, props => rgba(props.theme.palette.black, 0.19), props => props.theme.space.base * (props.$isOpaque ? 6 : 8), props => props.theme.space.base * (props.$isOpaque ? 6 : 8), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledPreview.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/ColorPicker/StyledRGBAField.js

@@ -20,7 +20,7 @@ const sizeStyles = theme => {
 };
 const StyledRGBAField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-13266k8-0"

package/dist/esm/styled/ColorPicker/StyledSliderGroup.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.colorpicker_slider_group';
 const StyledSliderGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-tigkzg-0"

package/dist/esm/styled/ColorPicker/StyledSliders.js

@@ -6,16 +6,38 @@
 */
 import styled from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
-import { getTrackMargin, getTrackHeight } from '../common/StyledRange.js';
+import { getTrackHeight, getTrackMargin } from '../common/StyledRange.js';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_sliders';
+const sizeStyles = props => {
+  if (props.$isOpaque) {
+    return undefined;
+  }
+  const trackHeight = getTrackHeight(props);
+  const trackMargin = getTrackMargin(props);
+  return `
+    & > * {
+      position: absolute;
+      width: 100%;
+      height: ${trackMargin * 2 + trackHeight}px;
+    }
+
+    & > :first-child {
+      top: -${trackMargin}px;
+    }
+
+    & > :last-child {
+      bottom: -${trackMargin}px;
+    }
+  `;
+};
 const StyledSliders = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-1lgr50m-0"
-})(["position:relative;margin-", ":", "px;width:100%;& > *{position:absolute;width:100%;height:", "px;}& > :first-child{top:-", "px;}& > :last-child{bottom:-", "px;}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, props => getTrackMargin(props) * 2 + getTrackHeight(props), getTrackMargin, getTrackMargin, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["position:relative;margin-", ":", "px;width:100%;", " ", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledSliders.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/ColorPickerDialog/StyledButton.js

@@ -10,7 +10,7 @@ import { Button } from '@zendeskgarden/react-buttons';
 
 const StyledButton = styled(Button).attrs({
   isNeutral: true,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-1dlijfv-0"

package/dist/esm/styled/ColorPickerDialog/StyledButtonPreview.js

@@ -9,22 +9,23 @@ import { rgba } from 'polished';
 import { getCheckeredBackground, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colordialog_preview';
-const background = props => {
-  const {
-    backgroundColor
-  } = props;
+const background = _ref => {
+  let {
+    $backgroundColor,
+    theme
+  } = _ref;
   let retVal;
-  if (typeof backgroundColor === 'string') {
-    retVal = backgroundColor;
-  } else if (backgroundColor === undefined) {
-    retVal = props.theme.palette.white;
+  if (typeof $backgroundColor === 'string') {
+    retVal = $backgroundColor;
+  } else if ($backgroundColor === undefined) {
+    retVal = theme.palette.white;
   } else {
     const {
       red,
       green,
       blue,
       alpha = 1
-    } = backgroundColor;
+    } = $backgroundColor;
     retVal = `rgba(${red}, ${green}, ${blue}, ${alpha ? alpha / 100 : 0})`;
   }
   return retVal;
@@ -38,7 +39,7 @@ const StyledButtonPreview = styled.span.attrs(props => ({
     })
   },
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.19',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",

package/dist/esm/styled/ColorPickerDialog/StyledTooltipBody.js

@@ -11,7 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.colordialog_tooltipmodal_body';
 const StyledTooltipBody = styled(TooltipModal.Body).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-1ueddpo-0"

package/dist/esm/styled/ColorPickerDialog/StyledTooltipModal.js

@@ -11,7 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.colordialog_tooltipmodal';
 const StyledTooltipModal = styled(TooltipModal).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledTooltipModal",
   componentId: "sc-gykkrw-0"

package/dist/esm/styled/ColorSwatch/StyledCell.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.swatch_cell';
 const StyledCell = styled.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"

package/dist/esm/styled/ColorSwatch/StyledColorSwatch.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.color_swatch';
 const StyledColorSwatch = styled.table.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledColorSwatch",
   componentId: "sc-ajx440-0"

package/dist/esm/styled/ColorSwatch/StyledColorSwatchInput.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'colorpickers.color_swatch_input';
 const StyledColorSwatchInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledColorSwatchInput",
   componentId: "sc-em45h0-0"

package/dist/esm/styled/ColorSwatch/StyledColorSwatchLabel.js

@@ -6,17 +6,30 @@
 */
 import styled from 'styled-components';
 import { parseToRgb, readableColor } from 'polished';
-import { focusStyles, retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { focusStyles, retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { StyledButtonPreview } from '../ColorPickerDialog/StyledButtonPreview.js';
 
 const COMPONENT_ID = 'colorpickers.color_swatch_label';
-const colorStyles = props => {
+const colorStyles = _ref => {
+  let {
+    $backgroundColor,
+    theme
+  } = _ref;
   const {
     alpha
-  } = parseToRgb(props.backgroundColor);
-  let foregroundColor = getColorV8('foreground', 600 , props.theme);
+  } = parseToRgb($backgroundColor);
+  const returnIfLightColor = getColor({
+    theme,
+    hue: 'neutralHue',
+    shade: 900
+  });
+  let foregroundColor = returnIfLightColor;
   if (alpha === undefined || alpha >= 0.4) {
-    foregroundColor = readableColor(props.backgroundColor, foregroundColor, getColorV8('background', 600 , props.theme), false );
+    const returnIfDarkColor = getColor({
+      theme,
+      hue: 'white'
+    });
+    foregroundColor = readableColor($backgroundColor, returnIfLightColor, returnIfDarkColor, false );
   }
   return `
     color: ${foregroundColor};
@@ -25,7 +38,7 @@ const colorStyles = props => {
 const StyledColorSwatchLabel = styled(StyledButtonPreview).attrs({
   as: 'label',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledColorSwatchLabel",
   componentId: "sc-1aghocg-0"

package/dist/esm/styled/ColorSwatch/StyledIcon.js

@@ -12,7 +12,7 @@ import { StyledColorSwatchInput } from './StyledColorSwatchInput.js';
 const COMPONENT_ID = 'colorpickers.colorswatch_check';
 const StyledIcon = styled(SvgCheckSmFill).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"

package/dist/esm/styled/common/StyledRange.js

@@ -6,8 +6,8 @@
 */
 import { Range } from '@zendeskgarden/react-forms';
 import styled from 'styled-components';
-import { stripUnit, math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { stripUnit } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.colorpicker_range';
 const thumbStyles = function (styles) {
@@ -54,17 +54,36 @@ const trackLowerStyles = function (styles) {
     }
   `;
 };
-const colorStyles = props => {
-  const thumbBackgroundColor = getColorV8('neutralHue', 100, props.theme);
-  const thumbBorderColor = thumbBackgroundColor;
-  const thumbActiveBackgroundColor = getColorV8('neutralHue', 200, props.theme);
-  const thumbActiveBorderColor = getColorV8('primaryHue', 600, props.theme);
-  const thumbFocusBorderColor = getColorV8('primaryHue', 400, props.theme);
-  const thumbHoverBackgroundColor = thumbActiveBackgroundColor;
-  const thumbHoverBorderColor = thumbHoverBackgroundColor;
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const thumbBackgroundColor = getColor({
+    theme,
+    variable: 'background.default'
+  });
+  const thumbBorderColor = getColor({
+    theme,
+    variable: 'border.default',
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  });
+  const thumbActiveBackgroundColor = thumbBackgroundColor;
+  const thumbActiveBorderColor = getColor({
+    theme,
+    variable: 'border.primaryEmphasis'
+  });
+  const thumbFocusBorderColor = thumbActiveBorderColor;
+  const thumbHoverBackgroundColor = getColor({
+    theme,
+    variable: 'background.subtle'
+  });
+  const thumbHoverBorderColor = thumbActiveBorderColor;
   return `
-    border-color: ${props.isOpaque && getColorV8('background', 600 , props.theme)};
-
     ${trackStyles(`
       background-color: transparent;
     `)}
@@ -94,32 +113,22 @@ const colorStyles = props => {
       `, ':active')}
   `;
 };
-const getThumbSize = props => props.theme.space.base * (props.isOpaque ? 6 : 4);
-const getTrackHeight = props => props.theme.space.base * (props.isOpaque ? 6 : 3);
+const getThumbSize = props => props.theme.space.base * (props.$isOpaque ? 6 : 4);
+const getTrackHeight = props => props.theme.space.base * (props.$isOpaque ? 6 : 3);
 const getTrackMargin = props => (getThumbSize(props) - getTrackHeight(props)) / 2 + stripUnit(props.theme.shadowWidths.md);
 const sizeStyles = props => {
   const thumbSize = getThumbSize(props);
   const trackHeight = getTrackHeight(props);
   const trackMargin = getTrackMargin(props);
   const thumbMargin = (trackHeight - thumbSize) / 2;
-  const trackOffset = props.theme.space.base * (props.isOpaque ? -2 : -1);
-  const height = props.isOpaque ? trackHeight : trackMargin * 2 + trackHeight;
-  let marginHorizontal;
-  let border;
-  let borderRadius;
-  if (props.isOpaque) {
-    marginHorizontal = `-${trackMargin}px`;
-    border = `${trackMargin}px ${props.theme.borderStyles.solid}`;
-    borderRadius = `${trackMargin + stripUnit(props.theme.shadowWidths.md)}px`;
-  }
+  const trackOffset = props.theme.space.base * (props.$isOpaque ? -2 : -1);
+  const height = props.$isOpaque ? trackHeight : trackMargin * 2 + trackHeight;
   return `
     /* stylelint-disable-next-line declaration-no-important */
     margin-top: 0 !important;
-    margin-${props.theme.rtl ? 'right' : 'left'}: ${marginHorizontal};
     height: ${height}px; /* [1] */
     box-sizing: content-box; /* [2] */
-    border: ${border};
-    border-radius: ${borderRadius};
+    border-radius: ${props.$isOpaque && props.theme.borderRadii.md};
 
     ${trackStyles(`
       margin: ${trackMargin}px ${trackOffset}px;
@@ -128,7 +137,7 @@ const sizeStyles = props => {
 
     ${thumbStyles(`
       margin: ${thumbMargin}px 0;
-      border-width: ${math(`${props.theme.borderWidths.sm} * 2`)};
+      border-width: ${props.theme.borderWidths.sm};
       height: ${thumbSize}px;
       width: ${thumbSize}px;
     `)};
@@ -136,7 +145,7 @@ const sizeStyles = props => {
 };
 const StyledRange = styled(Range).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.19',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",