@zendeskgarden/react-drag-drop - npm Package Compare versions

Comparing version 8.74.3 to 8.75.0

dist/index.cjs.js

@@ -63,7 +63,7 @@ /**
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledGrip",
   componentId: "sc-n349wb-0"
-})(["display:flex;transition:color 0.1s ease-in-out;box-sizing:border-box;color:", ";", " ", ";"], p => reactTheming.getColor('neutralHue', 600, p.theme), sizeStyles$6, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
+})(["display:flex;transition:color 0.1s ease-in-out;box-sizing:border-box;color:", ";", " ", ";"], p => reactTheming.getColorV8('neutralHue', 600, p.theme), sizeStyles$6, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledGrip.defaultProps = {
@@ -81,3 +81,3 @@ theme: reactTheming.DEFAULT_THEME
   const blurRadius = `${space.base * 7}px`;
-  const color = reactTheming.getColor('neutralHue', 600, theme, 0.35);
+  const color = reactTheming.getColorV8('neutralHue', 600, theme, 0.35);
   return shadows.lg(offsetY, blurRadius, color);
@@ -94,6 +94,6 @@ }
   } = props;
-  const baseColor = reactTheming.getColor('primaryHue', 600, theme);
+  const baseColor = reactTheming.getColorV8('primaryHue', 600, theme);
   const dragShadow = getDragShadow(theme);
-  const baseBgColor = theme.colors.background;
-  const disabledColor = reactTheming.getColor('neutralHue', 400, theme);
+  const baseBgColor = reactTheming.getColorV8('background', 600 , theme);
+  const disabledColor = reactTheming.getColorV8('neutralHue', 400, theme);
   let color;
@@ -105,9 +105,9 @@ let hoverBackgroundColor;
   if (isDisabled) {
-    backgroundColor = reactTheming.getColor('neutralHue', 200, theme);
+    backgroundColor = reactTheming.getColorV8('neutralHue', 200, theme);
     color = disabledColor;
   } else if (isPlaceholder) {
-    backgroundColor = reactTheming.getColor('neutralHue', 800, theme, 0.1);
+    backgroundColor = reactTheming.getColorV8('neutralHue', 800, theme, 0.1);
   } else {
-    color = theme.colors.foreground;
-    borderColor = isBare ? 'transparent' : reactTheming.getColor('neutralHue', 300, theme);
+    color = reactTheming.getColorV8('foreground', 600 , theme);
+    borderColor = isBare ? 'transparent' : reactTheming.getColorV8('neutralHue', 300, theme);
     hoverBackgroundColor = isGrabbed ? baseBgColor : polished.rgba(baseColor, 0.08);
@@ -140,3 +140,3 @@ boxShadow = dragShadow;
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -153,3 +153,3 @@ displayName: "StyledDraggable",
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -175,3 +175,3 @@ displayName: "StyledContent",
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -203,3 +203,3 @@ displayName: "StyledItem",
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -218,4 +218,4 @@ displayName: "StyledDraggableList",
   } = props;
-  const backgroundColor = reactTheming.getColor('primaryHue', 600, theme);
-  const color = reactTheming.getColor('primaryHue', 600, theme);
+  const backgroundColor = reactTheming.getColorV8('primaryHue', 600, theme);
+  const color = reactTheming.getColorV8('primaryHue', 600, theme);
   return styled.css(["box-shadow:", ";&::before,&::after{background-color:", ";}&:focus{outline:none;}"], `0 0 0 ${theme.borderWidths.sm} ${color}`, backgroundColor);
@@ -235,3 +235,3 @@ };
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -255,4 +255,4 @@ displayName: "StyledDropIndicator",
   const hue = isDanger ? 'dangerHue' : 'primaryHue';
-  const baseColor = reactTheming.getColor(hue, 600, theme);
-  const neutralColor = reactTheming.getColor('neutralHue', 600, theme);
+  const baseColor = reactTheming.getColorV8(hue, 600, theme);
+  const neutralColor = reactTheming.getColorV8('neutralHue', 600, theme);
   let backgroundColor = 'transparent';
@@ -262,7 +262,7 @@ let borderColor = neutralColor;
   if (isDisabled) {
-    backgroundColor = reactTheming.getColor('neutralHue', 200, theme);
-    borderColor = reactTheming.getColor('neutralHue', 300, theme);
-    color = reactTheming.getColor('neutralHue', 400, theme);
+    backgroundColor = reactTheming.getColorV8('neutralHue', 200, theme);
+    borderColor = reactTheming.getColorV8('neutralHue', 300, theme);
+    color = reactTheming.getColorV8('neutralHue', 400, theme);
   } else if (isActive || isHighlighted) {
-    color = isHighlighted ? reactTheming.getColor(hue, 800, theme) : baseColor;
+    color = isHighlighted ? reactTheming.getColorV8(hue, 800, theme) : baseColor;
     backgroundColor = polished.rgba(baseColor, 0.08);
@@ -286,3 +286,3 @@ borderColor = baseColor;
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -299,3 +299,3 @@ displayName: "StyledDropzone",
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -328,3 +328,3 @@ displayName: "StyledMessage",
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -331,0 +331,0 @@ displayName: "StyledIcon",

dist/index.esm.js

@@ -12,3 +12,3 @@ /**
 import { rgba, math } from 'polished';
-import { getColor, retrieveComponentStyles, DEFAULT_THEME, focusStyles, getLineHeight, useText } from '@zendeskgarden/react-theming';
+import { getColorV8, retrieveComponentStyles, DEFAULT_THEME, focusStyles, getLineHeight, useText } from '@zendeskgarden/react-theming';
 
@@ -40,7 +40,7 @@ function _extends$2() {
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledGrip",
   componentId: "sc-n349wb-0"
-})(["display:flex;transition:color 0.1s ease-in-out;box-sizing:border-box;color:", ";", " ", ";"], p => getColor('neutralHue', 600, p.theme), sizeStyles$6, props => retrieveComponentStyles(COMPONENT_ID$8, props));
+})(["display:flex;transition:color 0.1s ease-in-out;box-sizing:border-box;color:", ";", " ", ";"], p => getColorV8('neutralHue', 600, p.theme), sizeStyles$6, props => retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledGrip.defaultProps = {
@@ -58,3 +58,3 @@ theme: DEFAULT_THEME
   const blurRadius = `${space.base * 7}px`;
-  const color = getColor('neutralHue', 600, theme, 0.35);
+  const color = getColorV8('neutralHue', 600, theme, 0.35);
   return shadows.lg(offsetY, blurRadius, color);
@@ -71,6 +71,6 @@ }
   } = props;
-  const baseColor = getColor('primaryHue', 600, theme);
+  const baseColor = getColorV8('primaryHue', 600, theme);
   const dragShadow = getDragShadow(theme);
-  const baseBgColor = theme.colors.background;
-  const disabledColor = getColor('neutralHue', 400, theme);
+  const baseBgColor = getColorV8('background', 600 , theme);
+  const disabledColor = getColorV8('neutralHue', 400, theme);
   let color;
@@ -82,9 +82,9 @@ let hoverBackgroundColor;
   if (isDisabled) {
-    backgroundColor = getColor('neutralHue', 200, theme);
+    backgroundColor = getColorV8('neutralHue', 200, theme);
     color = disabledColor;
   } else if (isPlaceholder) {
-    backgroundColor = getColor('neutralHue', 800, theme, 0.1);
+    backgroundColor = getColorV8('neutralHue', 800, theme, 0.1);
   } else {
-    color = theme.colors.foreground;
-    borderColor = isBare ? 'transparent' : getColor('neutralHue', 300, theme);
+    color = getColorV8('foreground', 600 , theme);
+    borderColor = isBare ? 'transparent' : getColorV8('neutralHue', 300, theme);
     hoverBackgroundColor = isGrabbed ? baseBgColor : rgba(baseColor, 0.08);
@@ -117,3 +117,3 @@ boxShadow = dragShadow;
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -130,3 +130,3 @@ displayName: "StyledDraggable",
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -152,3 +152,3 @@ displayName: "StyledContent",
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -180,3 +180,3 @@ displayName: "StyledItem",
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -195,4 +195,4 @@ displayName: "StyledDraggableList",
   } = props;
-  const backgroundColor = getColor('primaryHue', 600, theme);
-  const color = getColor('primaryHue', 600, theme);
+  const backgroundColor = getColorV8('primaryHue', 600, theme);
+  const color = getColorV8('primaryHue', 600, theme);
   return css(["box-shadow:", ";&::before,&::after{background-color:", ";}&:focus{outline:none;}"], `0 0 0 ${theme.borderWidths.sm} ${color}`, backgroundColor);
@@ -212,3 +212,3 @@ };
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -232,4 +232,4 @@ displayName: "StyledDropIndicator",
   const hue = isDanger ? 'dangerHue' : 'primaryHue';
-  const baseColor = getColor(hue, 600, theme);
-  const neutralColor = getColor('neutralHue', 600, theme);
+  const baseColor = getColorV8(hue, 600, theme);
+  const neutralColor = getColorV8('neutralHue', 600, theme);
   let backgroundColor = 'transparent';
@@ -239,7 +239,7 @@ let borderColor = neutralColor;
   if (isDisabled) {
-    backgroundColor = getColor('neutralHue', 200, theme);
-    borderColor = getColor('neutralHue', 300, theme);
-    color = getColor('neutralHue', 400, theme);
+    backgroundColor = getColorV8('neutralHue', 200, theme);
+    borderColor = getColorV8('neutralHue', 300, theme);
+    color = getColorV8('neutralHue', 400, theme);
   } else if (isActive || isHighlighted) {
-    color = isHighlighted ? getColor(hue, 800, theme) : baseColor;
+    color = isHighlighted ? getColorV8(hue, 800, theme) : baseColor;
     backgroundColor = rgba(baseColor, 0.08);
@@ -263,3 +263,3 @@ borderColor = baseColor;
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -276,3 +276,3 @@ displayName: "StyledDropzone",
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -305,3 +305,3 @@ displayName: "StyledMessage",
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.74.3'
+  'data-garden-version': '8.75.0'
 }).withConfig({
@@ -308,0 +308,0 @@ displayName: "StyledIcon",

package.json

 {
   "name": "@zendeskgarden/react-drag-drop",
-  "version": "8.74.3",
+  "version": "8.75.0",
   "description": "Components related to drag and drop in the Garden Design System",
@@ -37,3 +37,3 @@ "license": "Apache-2.0",
     "@dnd-kit/utilities": "3.2.2",
-    "@zendeskgarden/react-theming": "^8.74.3",
+    "@zendeskgarden/react-theming": "^8.75.0",
     "@zendeskgarden/svg-icons": "7.0.0"
@@ -55,3 +55,3 @@ },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "2ae5e421f4bad609f443d6b227e00b6d8e77a06d"
+  "gitHead": "56a54793a611efc223b8e36262d428365613c853"
 }

No alert changes

Improved metrics

Total package byte prevSize

65451

increased by0.22%

No dependency changes