@zendeskgarden/react-colorpickers 8.74.2 → 8.75.0

package/dist/index.cjs.js

@@ -147,16 +147,16 @@ const getThumbPosition = (x, y, rtl, container) => {
 };
 
 const COMPONENT_ID$l = 'colorpickers.colorpicker';
-const getColorPickerWidth = props => {
+const getColorV8PickerWidth = props => {
   return props.isOpaque ? 268 : 312;
 };
 const StyledColorPicker = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-1donyl9-0"
-})(["width:", "px;min-width:", "px;", ";"], getColorPickerWidth, getColorPickerWidth, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
+})(["width:", "px;min-width:", "px;", ";"], getColorV8PickerWidth, getColorV8PickerWidth, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
 StyledColorPicker.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -207,15 +207,15 @@ const trackLowerStyles = function (styles) {
   `;
 };
 const colorStyles$1 = props => {
-  const thumbBackgroundColor = reactTheming.getColor('neutralHue', 100, props.theme);
+  const thumbBackgroundColor = reactTheming.getColorV8('neutralHue', 100, props.theme);
   const thumbBorderColor = thumbBackgroundColor;
-  const thumbActiveBackgroundColor = reactTheming.getColor('neutralHue', 200, props.theme);
-  const thumbActiveBorderColor = reactTheming.getColor('primaryHue', 600, props.theme);
-  const thumbFocusBorderColor = reactTheming.getColor('primaryHue', 400, props.theme);
+  const thumbActiveBackgroundColor = reactTheming.getColorV8('neutralHue', 200, props.theme);
+  const thumbActiveBorderColor = reactTheming.getColorV8('primaryHue', 600, props.theme);
+  const thumbFocusBorderColor = reactTheming.getColorV8('primaryHue', 400, props.theme);
   const thumbHoverBackgroundColor = thumbActiveBackgroundColor;
   const thumbHoverBorderColor = thumbHoverBackgroundColor;
   return `
-    border-color: ${props.isOpaque && props.theme.colors.background};
+    border-color: ${props.isOpaque && reactTheming.getColorV8('background', 600 , props.theme)};
 
     ${trackStyles(`
       background-color: transparent;
@@ -288,7 +288,7 @@ const sizeStyles$2 = props => {
 };
 const StyledRange = styled__default.default(reactForms.Range).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.74.2',
+  'data-garden-version': '8.75.0',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
@@ -303,7 +303,7 @@ StyledRange.defaultProps = {
 const COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled__default.default(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-13ly7p-0"
@@ -315,7 +315,7 @@ StyledHueRange.defaultProps = {
 const checkeredBackground = function (theme, size) {
   let positionY = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   let repeat = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'repeat';
-  const color = reactTheming.getColor('neutralHue', 400, theme);
+  const color = reactTheming.getColorV8('neutralHue', 400, theme);
   const dimensions = `${size}px ${size}px`;
   const positionX1 = theme.rtl ? '100%' : '0';
   const positionX2 = theme.rtl ? `calc(100% - ${size / 2}px)` : `${size / 2}px`;
@@ -347,7 +347,7 @@ const StyledAlphaRange = styled__default.default(StyledRange).attrs(props => ({
     background: background$3(props)
   },
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-kuh2xc-0"
@@ -371,7 +371,7 @@ const StyledPreview = styled__default.default.div.attrs(props => ({
     background: background$2(props)
   },
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.74.2',
+  'data-garden-version': '8.75.0',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",
@@ -393,7 +393,7 @@ const background$1 = props => {
 };
 const StyledColorWell = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.74.2',
+  'data-garden-version': '8.75.0',
   'data-test-id': 'colorwell',
   style: {
     background: background$1(props)
@@ -421,7 +421,7 @@ const sizeStyles$1 = theme => {
 };
 const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.74.2',
+  'data-garden-version': '8.75.0',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,
@@ -430,7 +430,7 @@ const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
 })).withConfig({
   displayName: "StyledColorWellThumb",
   componentId: "sc-1pnz3jz-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`, reactTheming.getColor('neutralHue', 800, props.theme, 0.24)), props => sizeStyles$1(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
+})(["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`, reactTheming.getColorV8('neutralHue', 800, props.theme, 0.24)), props => sizeStyles$1(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
 StyledColorWellThumb.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -438,7 +438,7 @@ StyledColorWellThumb.defaultProps = {
 const COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
 const StyledSliderGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-rsq0ak-0"
@@ -450,7 +450,7 @@ StyledSliderGroup.defaultProps = {
 const COMPONENT_ID$d = 'colorpickers.colorpicker_hex_field';
 const StyledHexField = styled__default.default(reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.74.2',
+  'data-garden-version': '8.75.0',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
@@ -463,7 +463,7 @@ StyledHexField.defaultProps = {
 const COMPONENT_ID$c = 'colorpickers.colorpicker_label';
 const StyledLabel = styled__default.default(reactForms.Label).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1klhp6m-0"
@@ -475,7 +475,7 @@ StyledLabel.defaultProps = {
 const COMPONENT_ID$b = 'colorpickers.colorpicker_input';
 const StyledInput = styled__default.default(reactForms.Input).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.74.2',
+  'data-garden-version': '8.75.0',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
@@ -488,7 +488,7 @@ StyledInput.defaultProps = {
 const COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
 const StyledInputGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-mmy93w-0"
@@ -509,7 +509,7 @@ const sizeStyles = theme => {
 };
 const StyledRGBAField = styled__default.default(reactForms.Field).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-ibo1yw-0"
@@ -521,7 +521,7 @@ StyledRGBAField.defaultProps = {
 const COMPONENT_ID$8 = 'colorpickers.colorpicker_sliders';
 const StyledSliders = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-aclca2-0"
@@ -534,7 +534,7 @@ const COMPONENT_ID$7 = 'colorpickers.colordialog_button';
 const StyledButton = styled__default.default(reactButtons.Button).attrs({
   isNeutral: true,
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-101xjve-0"
@@ -569,7 +569,7 @@ const StyledButtonPreview = styled__default.default.span.attrs(props => ({
     background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
   },
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.74.2',
+  'data-garden-version': '8.75.0',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
@@ -582,7 +582,7 @@ StyledButtonPreview.defaultProps = {
 const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal';
 const StyledTooltipModal = styled__default.default(reactModals.TooltipModal).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledTooltipModal",
   componentId: "sc-o022s8-0"
@@ -594,7 +594,7 @@ StyledTooltipModal.defaultProps = {
 const COMPONENT_ID$4 = 'colorpickers.colordialog_tooltipmodal_body';
 const StyledTooltipBody = styled__default.default(reactModals.TooltipModal.Body).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-6gsgsy-0"
@@ -608,7 +608,7 @@ const StyledSwatchButton = styled__default.default(StyledButtonPreview).attrs(pr
   as: 'button',
   'data-garden-id': COMPONENT_ID$3,
   'data-test-id': props.backgroundColor,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 })).withConfig({
   displayName: "StyledSwatchButton",
   componentId: "sc-edpwpp-0"
@@ -622,7 +622,7 @@ StyledSwatchButton.defaultProps = {
 const COMPONENT_ID$2 = 'colorpickers.color_swatch';
 const StyledColorSwatch = styled__default.default.table.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.74.2',
+  'data-garden-version': '8.75.0',
   role: 'grid'
 }).withConfig({
   displayName: "StyledColorSwatch",
@@ -641,9 +641,9 @@ const colorStyles = props => {
   const {
     alpha
   } = polished.parseToRgb(color);
-  let checkColor = polished.readableColor(color, theme.colors.foreground, theme.colors.background);
+  let checkColor = polished.readableColor(color, reactTheming.getColorV8('foreground', 600 , theme), reactTheming.getColorV8('background', 600 , theme));
   if (alpha !== undefined && alpha < 0.4) {
-    checkColor = theme.colors.foreground;
+    checkColor = reactTheming.getColorV8('foreground', 600 , theme);
   }
   return `
     color: ${checkColor}
@@ -659,7 +659,7 @@ const StyledIcon = styled__default.default(_ref => {
   return React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
@@ -671,7 +671,7 @@ StyledIcon.defaultProps = {
 const COMPONENT_ID = 'colorpickers.swatch_cell';
 const StyledCell = styled__default.default.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"

package/dist/index.esm.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import { Range, Field, Label, Input } from '@zendeskgarden/react-forms';
 import throttle from 'lodash.throttle';
 import styled, { ThemeContext } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, useText } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, useText } from '@zendeskgarden/react-theming';
 import { stripUnit, math, rgba, hsl, parseToRgb, readableColor, parseToHsl, rgb } from 'polished';
 import { Button } from '@zendeskgarden/react-buttons';
 import { TooltipModal, PLACEMENT } from '@zendeskgarden/react-modals';
@@ -120,16 +120,16 @@ const getThumbPosition = (x, y, rtl, container) => {
 };
 
 const COMPONENT_ID$l = 'colorpickers.colorpicker';
-const getColorPickerWidth = props => {
+const getColorV8PickerWidth = props => {
   return props.isOpaque ? 268 : 312;
 };
 const StyledColorPicker = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledColorPicker",
   componentId: "sc-1donyl9-0"
-})(["width:", "px;min-width:", "px;", ";"], getColorPickerWidth, getColorPickerWidth, props => retrieveComponentStyles(COMPONENT_ID$l, props));
+})(["width:", "px;min-width:", "px;", ";"], getColorV8PickerWidth, getColorV8PickerWidth, props => retrieveComponentStyles(COMPONENT_ID$l, props));
 StyledColorPicker.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -180,15 +180,15 @@ const trackLowerStyles = function (styles) {
   `;
 };
 const colorStyles$1 = props => {
-  const thumbBackgroundColor = getColor('neutralHue', 100, props.theme);
+  const thumbBackgroundColor = getColorV8('neutralHue', 100, props.theme);
   const thumbBorderColor = thumbBackgroundColor;
-  const thumbActiveBackgroundColor = getColor('neutralHue', 200, props.theme);
-  const thumbActiveBorderColor = getColor('primaryHue', 600, props.theme);
-  const thumbFocusBorderColor = getColor('primaryHue', 400, props.theme);
+  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;
   return `
-    border-color: ${props.isOpaque && props.theme.colors.background};
+    border-color: ${props.isOpaque && getColorV8('background', 600 , props.theme)};
 
     ${trackStyles(`
       background-color: transparent;
@@ -261,7 +261,7 @@ const sizeStyles$2 = props => {
 };
 const StyledRange = styled(Range).attrs({
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.74.2',
+  'data-garden-version': '8.75.0',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
@@ -276,7 +276,7 @@ StyledRange.defaultProps = {
 const COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
 const StyledHueRange = styled(StyledRange).attrs({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledHueRange",
   componentId: "sc-13ly7p-0"
@@ -288,7 +288,7 @@ StyledHueRange.defaultProps = {
 const checkeredBackground = function (theme, size) {
   let positionY = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   let repeat = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'repeat';
-  const color = getColor('neutralHue', 400, theme);
+  const color = getColorV8('neutralHue', 400, theme);
   const dimensions = `${size}px ${size}px`;
   const positionX1 = theme.rtl ? '100%' : '0';
   const positionX2 = theme.rtl ? `calc(100% - ${size / 2}px)` : `${size / 2}px`;
@@ -320,7 +320,7 @@ const StyledAlphaRange = styled(StyledRange).attrs(props => ({
     background: background$3(props)
   },
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 })).withConfig({
   displayName: "StyledAlphaRange",
   componentId: "sc-kuh2xc-0"
@@ -344,7 +344,7 @@ const StyledPreview = styled.div.attrs(props => ({
     background: background$2(props)
   },
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.74.2',
+  'data-garden-version': '8.75.0',
   'data-test-id': 'preview-box'
 })).withConfig({
   displayName: "StyledPreview",
@@ -366,7 +366,7 @@ const background$1 = props => {
 };
 const StyledColorWell = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.74.2',
+  'data-garden-version': '8.75.0',
   'data-test-id': 'colorwell',
   style: {
     background: background$1(props)
@@ -394,7 +394,7 @@ const sizeStyles$1 = theme => {
 };
 const StyledColorWellThumb = styled.div.attrs(props => ({
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.74.2',
+  'data-garden-version': '8.75.0',
   'data-test-id': 'colorwell-thumb',
   style: {
     top: `${props.top}%`,
@@ -403,7 +403,7 @@ const StyledColorWellThumb = styled.div.attrs(props => ({
 })).withConfig({
   displayName: "StyledColorWellThumb",
   componentId: "sc-1pnz3jz-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`, getColor('neutralHue', 800, props.theme, 0.24)), props => sizeStyles$1(props.theme), props => retrieveComponentStyles(COMPONENT_ID$f, props));
+})(["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$1(props.theme), props => retrieveComponentStyles(COMPONENT_ID$f, props));
 StyledColorWellThumb.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -411,7 +411,7 @@ StyledColorWellThumb.defaultProps = {
 const COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
 const StyledSliderGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledSliderGroup",
   componentId: "sc-rsq0ak-0"
@@ -423,7 +423,7 @@ StyledSliderGroup.defaultProps = {
 const COMPONENT_ID$d = 'colorpickers.colorpicker_hex_field';
 const StyledHexField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.74.2',
+  'data-garden-version': '8.75.0',
   spellcheck: false
 }).withConfig({
   displayName: "StyledHexField",
@@ -436,7 +436,7 @@ StyledHexField.defaultProps = {
 const COMPONENT_ID$c = 'colorpickers.colorpicker_label';
 const StyledLabel = styled(Label).attrs({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1klhp6m-0"
@@ -448,7 +448,7 @@ StyledLabel.defaultProps = {
 const COMPONENT_ID$b = 'colorpickers.colorpicker_input';
 const StyledInput = styled(Input).attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.74.2',
+  'data-garden-version': '8.75.0',
   focusInset: false
 }).withConfig({
   displayName: "StyledInput",
@@ -461,7 +461,7 @@ StyledInput.defaultProps = {
 const COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
 const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-mmy93w-0"
@@ -482,7 +482,7 @@ const sizeStyles = theme => {
 };
 const StyledRGBAField = styled(Field).attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledRGBAField",
   componentId: "sc-ibo1yw-0"
@@ -494,7 +494,7 @@ StyledRGBAField.defaultProps = {
 const COMPONENT_ID$8 = 'colorpickers.colorpicker_sliders';
 const StyledSliders = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledSliders",
   componentId: "sc-aclca2-0"
@@ -507,7 +507,7 @@ const COMPONENT_ID$7 = 'colorpickers.colordialog_button';
 const StyledButton = styled(Button).attrs({
   isNeutral: true,
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-101xjve-0"
@@ -542,7 +542,7 @@ const StyledButtonPreview = styled.span.attrs(props => ({
     background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
   },
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.74.2',
+  'data-garden-version': '8.75.0',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
@@ -555,7 +555,7 @@ StyledButtonPreview.defaultProps = {
 const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal';
 const StyledTooltipModal = styled(TooltipModal).attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledTooltipModal",
   componentId: "sc-o022s8-0"
@@ -567,7 +567,7 @@ StyledTooltipModal.defaultProps = {
 const COMPONENT_ID$4 = 'colorpickers.colordialog_tooltipmodal_body';
 const StyledTooltipBody = styled(TooltipModal.Body).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-6gsgsy-0"
@@ -581,7 +581,7 @@ const StyledSwatchButton = styled(StyledButtonPreview).attrs(props => ({
   as: 'button',
   'data-garden-id': COMPONENT_ID$3,
   'data-test-id': props.backgroundColor,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 })).withConfig({
   displayName: "StyledSwatchButton",
   componentId: "sc-edpwpp-0"
@@ -595,7 +595,7 @@ StyledSwatchButton.defaultProps = {
 const COMPONENT_ID$2 = 'colorpickers.color_swatch';
 const StyledColorSwatch = styled.table.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.74.2',
+  'data-garden-version': '8.75.0',
   role: 'grid'
 }).withConfig({
   displayName: "StyledColorSwatch",
@@ -614,9 +614,9 @@ const colorStyles = props => {
   const {
     alpha
   } = parseToRgb(color);
-  let checkColor = readableColor(color, theme.colors.foreground, theme.colors.background);
+  let checkColor = readableColor(color, getColorV8('foreground', 600 , theme), getColorV8('background', 600 , theme));
   if (alpha !== undefined && alpha < 0.4) {
-    checkColor = theme.colors.foreground;
+    checkColor = getColorV8('foreground', 600 , theme);
   }
   return `
     color: ${checkColor}
@@ -632,7 +632,7 @@ const StyledIcon = styled(_ref => {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
@@ -644,7 +644,7 @@ StyledIcon.defaultProps = {
 const COMPONENT_ID = 'colorpickers.swatch_cell';
 const StyledCell = styled.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"

package/dist/typings/styled/Colorpicker/StyledColorPicker.d.ts

@@ -7,7 +7,7 @@
 interface IStyledColorPickerProps {
     isOpaque?: boolean;
 }
-export declare const getColorPickerWidth: (props: IStyledColorPickerProps) => 268 | 312;
+export declare const getColorV8PickerWidth: (props: IStyledColorPickerProps) => 268 | 312;
 export declare const StyledColorPicker: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-colorpickers",
-  "version": "8.74.2",
+  "version": "8.75.0",
   "description": "Components related to color pickers in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,10 +23,10 @@
   "dependencies": {
     "@zendeskgarden/container-grid": "^0.1.1",
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^8.74.2",
-    "@zendeskgarden/react-forms": "^8.74.2",
-    "@zendeskgarden/react-modals": "^8.74.2",
-    "@zendeskgarden/react-tooltips": "^8.74.2",
+    "@zendeskgarden/react-buttons": "^8.75.0",
+    "@zendeskgarden/react-forms": "^8.75.0",
+    "@zendeskgarden/react-modals": "^8.75.0",
+    "@zendeskgarden/react-tooltips": "^8.75.0",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "polished": "^4.0.0",
@@ -41,7 +41,7 @@
   "devDependencies": {
     "@types/lodash.isequal": "4.5.8",
     "@types/lodash.throttle": "4.1.9",
-    "@zendeskgarden/react-theming": "^8.74.2",
+    "@zendeskgarden/react-theming": "^8.75.0",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -55,5 +55,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "be0e20f0b016a227ed1ab6b5b13cb04971969d3b"
+  "gitHead": "56a54793a611efc223b8e36262d428365613c853"
 }