@zendeskgarden/react-colorpickers 9.0.0-next.9 → 9.1.0

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

@@ -5,19 +5,38 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
-import { getTrackMargin, getTrackHeight } from '../common/StyledRange.js';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+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.9'
+  'data-garden-version': '9.1.0'
 }).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));
-StyledSliders.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["position:relative;margin-", ":", "px;width:100%;", " ", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 
 export { StyledSliders };

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

@@ -5,20 +5,14 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { Button } from '@zendeskgarden/react-buttons';
 
-const COMPONENT_ID = 'colorpickers.colordialog_button';
 const StyledButton = styled(Button).attrs({
   isNeutral: true,
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledButton",
   componentId: "sc-1dlijfv-0"
-})(["padding:0;width:", "px;max-width:", "px;&:last-of-type:not(:first-child){border-top-", "-radius:", " !important;border-bottom-", "-radius:", " !important;}", ";"], props => props.theme.space.base * 17, props => props.theme.space.base * 17, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledButton.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["padding:0;width:", "px;max-width:", "px;&:last-of-type:not(:first-child){border-top-", "-radius:", " !important;border-bottom-", "-radius:", " !important;}"], props => props.theme.space.base * 17, props => props.theme.space.base * 17, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md);
 
 export { StyledButton };

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

@@ -6,25 +6,26 @@
 */
 import styled from 'styled-components';
 import { rgba } from 'polished';
-import { getCheckeredBackground, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getCheckeredBackground, retrieveComponentStyles } 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,14 +39,11 @@ const StyledButtonPreview = styled.span.attrs(props => ({
     })
   },
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9',
+  'data-garden-version': '9.1.0',
   'data-test-id': 'dialog-preview'
 })).withConfig({
   displayName: "StyledButtonPreview",
   componentId: "sc-yxis8h-0"
 })(["display:inline-block;bottom:", "px;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], props => props.theme.space.base, props => props.theme.borderRadii.sm, props => props.theme.borderWidths.sm, props => rgba(props.theme.palette.black, 0.19), props => props.theme.space.base * 5, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledButtonPreview.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledButtonPreview };

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

@@ -5,19 +5,16 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { TooltipModal } from '@zendeskgarden/react-modals';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { TooltipDialog } from '@zendeskgarden/react-modals';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
-const COMPONENT_ID = 'colorpickers.colordialog_tooltipmodal_body';
-const StyledTooltipBody = styled(TooltipModal.Body).attrs({
+const COMPONENT_ID = 'colorpickers.colordialog_tooltipdialog_body';
+const StyledTooltipBody = styled(TooltipDialog.Body).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledTooltipBody",
   componentId: "sc-1ueddpo-0"
 })(["padding:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledTooltipBody.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledTooltipBody };

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

@@ -0,0 +1,20 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* 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 { TooltipDialog } from '@zendeskgarden/react-modals';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'colorpickers.colordialog_tooltipdialog';
+const StyledTooltipDialog = styled(TooltipDialog).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.1.0'
+}).withConfig({
+  displayName: "StyledTooltipDialog",
+  componentId: "sc-1vbkccl-0"
+})(["width:auto !important;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+
+export { StyledTooltipDialog };

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

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.swatch_cell';
 const StyledCell = styled.td.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledCell",
   componentId: "sc-qr3oit-0"
 })(["padding:", "px;font-size:0;", ";"], props => props.theme.space.base, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledCell.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledCell };

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

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.color_swatch';
 const StyledColorSwatch = styled.table.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledColorSwatch",
   componentId: "sc-ajx440-0"
 })(["border-collapse:collapse;line-height:normal;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledColorSwatch.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledColorSwatch };

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

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'colorpickers.color_swatch_input';
 const StyledColorSwatchInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledColorSwatchInput",
   componentId: "sc-em45h0-0"
 })(["position:absolute;opacity:0;z-index:1;margin:0;cursor:pointer;width:100%;height:100%;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledColorSwatchInput.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledColorSwatchInput };

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, 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.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledColorSwatchLabel",
   componentId: "sc-1aghocg-0"
@@ -33,8 +46,5 @@ const StyledColorSwatchLabel = styled(StyledButtonPreview).attrs({
   theme: props.theme,
   selector: '&:has(:focus-visible)'
 }), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledColorSwatchLabel.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledColorSwatchLabel };

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

@@ -6,19 +6,16 @@
 */
 import styled from 'styled-components';
 import SvgCheckSmFill from '../../node_modules/@zendeskgarden/svg-icons/src/12/check-sm-fill.svg.js';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 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.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-8oigif-0"
 })(["position:absolute;top:0;left:0;transition:opacity 0.2s ease-in-out;opacity:0;width:100%;height:100%;", ":checked ~ &{opacity:1;}", ";"], StyledColorSwatchInput, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledIcon.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledIcon };

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, 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.9',
+  'data-garden-version': '9.1.0',
   hasLowerTrack: false
 }).withConfig({
   displayName: "StyledRange",
@@ -144,8 +153,5 @@ const StyledRange = styled(Range).attrs({
 })(["", ";", " ", ";", ";"], sizeStyles, trackStyles(`
     border-radius: 0;
   `), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledRange.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledRange, getTrackHeight, getTrackMargin, trackStyles };