@zendeskgarden/react-colorpickers - npm Package Compare versions

Comparing version 8.74.3 to 8.75.0

dist/index.cjs.js

@@ -150,3 +150,3 @@ /**
 const COMPONENT_ID$l = 'colorpickers.colorpicker';
-const getColorPickerWidth = props => {
+const getColorV8PickerWidth = props => {
   return props.isOpaque ? 268 : 312;
@@ -156,7 +156,7 @@ };
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.74.3'
+  '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 = {
@@ -212,11 +212,11 @@ theme: reactTheming.DEFAULT_THEME
 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)};
 
@@ -294,3 +294,3 @@ ${trackStyles(`
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.0',
   hasLowerTrack: false
@@ -310,3 +310,3 @@ }).withConfig({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -323,3 +323,3 @@ displayName: "StyledHueRange",
   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`;
@@ -356,3 +356,3 @@ const positionX1 = theme.rtl ? '100%' : '0';
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 })).withConfig({
@@ -381,3 +381,3 @@ displayName: "StyledAlphaRange",
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.0',
   'data-test-id': 'preview-box'
@@ -404,3 +404,3 @@ })).withConfig({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.0',
   'data-test-id': 'colorwell',
@@ -433,3 +433,3 @@ style: {
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.0',
   'data-test-id': 'colorwell-thumb',
@@ -443,3 +443,3 @@ style: {
   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 = {
@@ -452,3 +452,3 @@ theme: reactTheming.DEFAULT_THEME
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -465,3 +465,3 @@ displayName: "StyledSliderGroup",
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.0',
   spellcheck: false
@@ -479,3 +479,3 @@ }).withConfig({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -492,3 +492,3 @@ displayName: "StyledLabel",
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.0',
   focusInset: false
@@ -506,3 +506,3 @@ }).withConfig({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -528,3 +528,3 @@ displayName: "StyledInputGroup",
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -541,3 +541,3 @@ displayName: "StyledRGBAField",
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -555,3 +555,3 @@ displayName: "StyledSliders",
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -591,3 +591,3 @@ displayName: "StyledButton",
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.0',
   'data-test-id': 'dialog-preview'
@@ -605,3 +605,3 @@ })).withConfig({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -618,3 +618,3 @@ displayName: "StyledTooltipModal",
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -633,3 +633,3 @@ displayName: "StyledTooltipBody",
   'data-test-id': props.backgroundColor,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 })).withConfig({
@@ -648,3 +648,3 @@ displayName: "StyledSwatchButton",
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.0',
   role: 'grid'
@@ -668,5 +668,5 @@ }).withConfig({
   } = 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);
   }
@@ -687,3 +687,3 @@ return `
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -700,3 +700,3 @@ displayName: "StyledIcon",
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -703,0 +703,0 @@ displayName: "StyledCell",

dist/index.esm.js

@@ -14,3 +14,3 @@ /**
 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';
@@ -124,3 +124,3 @@ import { Button } from '@zendeskgarden/react-buttons';
 const COMPONENT_ID$l = 'colorpickers.colorpicker';
-const getColorPickerWidth = props => {
+const getColorV8PickerWidth = props => {
   return props.isOpaque ? 268 : 312;
@@ -130,7 +130,7 @@ };
   'data-garden-id': COMPONENT_ID$l,
-  'data-garden-version': '8.74.3'
+  '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 = {
@@ -186,11 +186,11 @@ theme: DEFAULT_THEME
 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)};
 
@@ -268,3 +268,3 @@ ${trackStyles(`
   'data-garden-id': COMPONENT_ID$k,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.0',
   hasLowerTrack: false
@@ -284,3 +284,3 @@ }).withConfig({
   'data-garden-id': COMPONENT_ID$j,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -297,3 +297,3 @@ displayName: "StyledHueRange",
   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`;
@@ -330,3 +330,3 @@ const positionX1 = theme.rtl ? '100%' : '0';
   'data-garden-id': COMPONENT_ID$i,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 })).withConfig({
@@ -355,3 +355,3 @@ displayName: "StyledAlphaRange",
   'data-garden-id': COMPONENT_ID$h,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.0',
   'data-test-id': 'preview-box'
@@ -378,3 +378,3 @@ })).withConfig({
   'data-garden-id': COMPONENT_ID$g,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.0',
   'data-test-id': 'colorwell',
@@ -407,3 +407,3 @@ style: {
   'data-garden-id': COMPONENT_ID$f,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.0',
   'data-test-id': 'colorwell-thumb',
@@ -417,3 +417,3 @@ style: {
   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 = {
@@ -426,3 +426,3 @@ theme: DEFAULT_THEME
   'data-garden-id': COMPONENT_ID$e,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -439,3 +439,3 @@ displayName: "StyledSliderGroup",
   'data-garden-id': COMPONENT_ID$d,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.0',
   spellcheck: false
@@ -453,3 +453,3 @@ }).withConfig({
   'data-garden-id': COMPONENT_ID$c,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -466,3 +466,3 @@ displayName: "StyledLabel",
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.0',
   focusInset: false
@@ -480,3 +480,3 @@ }).withConfig({
   'data-garden-id': COMPONENT_ID$a,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -502,3 +502,3 @@ displayName: "StyledInputGroup",
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -515,3 +515,3 @@ displayName: "StyledRGBAField",
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -529,3 +529,3 @@ displayName: "StyledSliders",
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -565,3 +565,3 @@ displayName: "StyledButton",
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.0',
   'data-test-id': 'dialog-preview'
@@ -579,3 +579,3 @@ })).withConfig({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -592,3 +592,3 @@ displayName: "StyledTooltipModal",
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -607,3 +607,3 @@ displayName: "StyledTooltipBody",
   'data-test-id': props.backgroundColor,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 })).withConfig({
@@ -622,3 +622,3 @@ displayName: "StyledSwatchButton",
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.74.3',
+  'data-garden-version': '8.75.0',
   role: 'grid'
@@ -642,5 +642,5 @@ }).withConfig({
   } = 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);
   }
@@ -661,3 +661,3 @@ return `
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -674,3 +674,3 @@ displayName: "StyledIcon",
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -677,0 +677,0 @@ displayName: "StyledCell",

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

@@ -10,3 +10,3 @@ /**
 }
-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, {
@@ -13,0 +13,0 @@ 'data-garden-id': string;

package.json

 {
   "name": "@zendeskgarden/react-colorpickers",
-  "version": "8.74.3",
+  "version": "8.75.0",
   "description": "Components related to color pickers in the Garden Design System",
@@ -26,6 +26,6 @@ "license": "Apache-2.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^8.74.3",
-    "@zendeskgarden/react-forms": "^8.74.3",
-    "@zendeskgarden/react-modals": "^8.74.3",
-    "@zendeskgarden/react-tooltips": "^8.74.3",
+    "@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",
@@ -45,3 +45,3 @@ "lodash.throttle": "^4.1.1",
     "@types/lodash.throttle": "4.1.9",
-    "@zendeskgarden/react-theming": "^8.74.3",
+    "@zendeskgarden/react-theming": "^8.75.0",
     "@zendeskgarden/svg-icons": "7.0.0"
@@ -60,3 +60,3 @@ },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "2ae5e421f4bad609f443d6b227e00b6d8e77a06d"
+  "gitHead": "56a54793a611efc223b8e36262d428365613c853"
 }

No alert changes

Improved metrics

Total package byte prevSize

142712

increased by0.14%

Dependency changes

• Updated@zendeskgarden/react-buttons@^8.75.0

• Updated@zendeskgarden/react-forms@^8.75.0

• Updated@zendeskgarden/react-modals@^8.75.0

• Updated@zendeskgarden/react-tooltips@^8.75.0