@zendeskgarden/react-datepickers 8.74.2 → 8.75.0

package/dist/index.cjs.js

@@ -112,7 +112,7 @@ function getMenuPosition(popperPlacement) {
 const COMPONENT_ID$b = 'datepickers.menu';
 const StyledMenu = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
@@ -155,7 +155,7 @@ const StyledDatepicker = styled__default.default.div.attrs({
 }).withConfig({
   displayName: "StyledDatepicker",
   componentId: "sc-w3zqsp-0"
-})(["direction:", ";", " background-color:", ";color:", ";", ";"], props => props.theme.rtl && 'rtl', retrievePadding, props => props.theme.colors.background, props => props.theme.colors.foreground, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
+})(["direction:", ";", " background-color:", ";color:", ";", ";"], props => props.theme.rtl && 'rtl', retrievePadding, props => reactTheming.getColorV8('background', 600 , props.theme), props => reactTheming.getColorV8('foreground', 600 , props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledDatepicker.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -197,7 +197,7 @@ const retrieveColor$1 = _ref2 => {
   let {
     theme
   } = _ref2;
-  return styled.css([":hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}color:", ";"], reactTheming.getColor('primaryHue', 600, theme, 0.08), theme.colors.foreground, reactTheming.getColor('primaryHue', 600, theme, 0.2), theme.colors.foreground, reactTheming.getColor('neutralHue', 600, theme));
+  return styled.css([":hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}color:", ";"], reactTheming.getColorV8('primaryHue', 600, theme, 0.08), reactTheming.getColorV8('foreground', 600 , theme), reactTheming.getColorV8('primaryHue', 600, theme, 0.2), reactTheming.getColorV8('foreground', 600 , theme), reactTheming.getColorV8('neutralHue', 600, theme));
 };
 const COMPONENT_ID$6 = 'datepickers.header_paddle';
 const StyledHeaderPaddle = styled__default.default.div.attrs({
@@ -295,7 +295,7 @@ const retrieveColor = _ref2 => {
     isHighlighted,
     theme
   } = _ref2;
-  return styled.css(["background-color:", ";"], isHighlighted && reactTheming.getColor('primaryHue', 600, theme, 0.08));
+  return styled.css(["background-color:", ";"], isHighlighted && reactTheming.getColorV8('primaryHue', 600, theme, 0.08));
 };
 const StyledHighlight = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1
@@ -316,26 +316,26 @@ const retrieveStyledDayColors = _ref => {
     theme
   } = _ref;
   let backgroundColor = 'inherit';
-  let color = reactTheming.getColor('primaryHue', 600, theme);
+  let color = reactTheming.getColorV8('primaryHue', 600, theme);
   if (isSelected && !isDisabled) {
-    backgroundColor = reactTheming.getColor('primaryHue', 600, theme);
-    color = theme.colors.background;
+    backgroundColor = reactTheming.getColorV8('primaryHue', 600, theme);
+    color = reactTheming.getColorV8('background', 600 , theme);
   } else if (isDisabled) {
-    color = reactTheming.getColor('neutralHue', 400, theme);
+    color = reactTheming.getColorV8('neutralHue', 400, theme);
   } else if (isToday) {
     color = 'inherit';
   } else if (isPreviousMonth) {
-    color = reactTheming.getColor('neutralHue', 600, theme);
+    color = reactTheming.getColorV8('neutralHue', 600, theme);
   }
   return styled.css(["background-color:", ";color:", ";", ""], backgroundColor, color, !isSelected && !isDisabled && `
       :hover {
-        background-color: ${reactTheming.getColor('primaryHue', 600, theme, 0.08)};
-        color: ${reactTheming.getColor('primaryHue', 800, theme)};
+        background-color: ${reactTheming.getColorV8('primaryHue', 600, theme, 0.08)};
+        color: ${reactTheming.getColorV8('primaryHue', 800, theme)};
       }
 
       :active {
-        background-color: ${reactTheming.getColor('primaryHue', 600, theme, 0.2)};
-        color: ${reactTheming.getColor('primaryHue', 800, theme)};
+        background-color: ${reactTheming.getColorV8('primaryHue', 600, theme, 0.2)};
+        color: ${reactTheming.getColorV8('primaryHue', 800, theme)};
       }
   `);
 };
@@ -1639,7 +1639,7 @@ const Calendar = React.forwardRef((props, ref) => {
   return React__namespace.default.createElement(StyledRangeCalendar, _extends({
     ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '8.74.2'
+    "data-garden-version": '8.75.0'
   }, props), React__namespace.default.createElement(Month, {
     displayDate: state.previewDate,
     isNextHidden: true

package/dist/index.esm.js

@@ -23,7 +23,7 @@ import { isSameMonth } from 'date-fns/isSameMonth';
 import { isBefore } from 'date-fns/isBefore';
 import { isAfter } from 'date-fns/isAfter';
 import { getDate } from 'date-fns/getDate';
-import { retrieveComponentStyles, DEFAULT_THEME, menuStyles, getColor } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, menuStyles, getColorV8 } from '@zendeskgarden/react-theming';
 import { addMonths } from 'date-fns/addMonths';
 import { subMonths } from 'date-fns/subMonths';
 import { isValid } from 'date-fns/isValid';
@@ -87,7 +87,7 @@ function getMenuPosition(popperPlacement) {
 const COMPONENT_ID$b = 'datepickers.menu';
 const StyledMenu = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
@@ -130,7 +130,7 @@ const StyledDatepicker = styled.div.attrs({
 }).withConfig({
   displayName: "StyledDatepicker",
   componentId: "sc-w3zqsp-0"
-})(["direction:", ";", " background-color:", ";color:", ";", ";"], props => props.theme.rtl && 'rtl', retrievePadding, props => props.theme.colors.background, props => props.theme.colors.foreground, props => retrieveComponentStyles(COMPONENT_ID$9, props));
+})(["direction:", ";", " background-color:", ";color:", ";", ";"], props => props.theme.rtl && 'rtl', retrievePadding, props => getColorV8('background', 600 , props.theme), props => getColorV8('foreground', 600 , props.theme), props => retrieveComponentStyles(COMPONENT_ID$9, props));
 StyledDatepicker.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -172,7 +172,7 @@ const retrieveColor$1 = _ref2 => {
   let {
     theme
   } = _ref2;
-  return css([":hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}color:", ";"], getColor('primaryHue', 600, theme, 0.08), theme.colors.foreground, getColor('primaryHue', 600, theme, 0.2), theme.colors.foreground, getColor('neutralHue', 600, theme));
+  return css([":hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}color:", ";"], getColorV8('primaryHue', 600, theme, 0.08), getColorV8('foreground', 600 , theme), getColorV8('primaryHue', 600, theme, 0.2), getColorV8('foreground', 600 , theme), getColorV8('neutralHue', 600, theme));
 };
 const COMPONENT_ID$6 = 'datepickers.header_paddle';
 const StyledHeaderPaddle = styled.div.attrs({
@@ -270,7 +270,7 @@ const retrieveColor = _ref2 => {
     isHighlighted,
     theme
   } = _ref2;
-  return css(["background-color:", ";"], isHighlighted && getColor('primaryHue', 600, theme, 0.08));
+  return css(["background-color:", ";"], isHighlighted && getColorV8('primaryHue', 600, theme, 0.08));
 };
 const StyledHighlight = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1
@@ -291,26 +291,26 @@ const retrieveStyledDayColors = _ref => {
     theme
   } = _ref;
   let backgroundColor = 'inherit';
-  let color = getColor('primaryHue', 600, theme);
+  let color = getColorV8('primaryHue', 600, theme);
   if (isSelected && !isDisabled) {
-    backgroundColor = getColor('primaryHue', 600, theme);
-    color = theme.colors.background;
+    backgroundColor = getColorV8('primaryHue', 600, theme);
+    color = getColorV8('background', 600 , theme);
   } else if (isDisabled) {
-    color = getColor('neutralHue', 400, theme);
+    color = getColorV8('neutralHue', 400, theme);
   } else if (isToday) {
     color = 'inherit';
   } else if (isPreviousMonth) {
-    color = getColor('neutralHue', 600, theme);
+    color = getColorV8('neutralHue', 600, theme);
   }
   return css(["background-color:", ";color:", ";", ""], backgroundColor, color, !isSelected && !isDisabled && `
       :hover {
-        background-color: ${getColor('primaryHue', 600, theme, 0.08)};
-        color: ${getColor('primaryHue', 800, theme)};
+        background-color: ${getColorV8('primaryHue', 600, theme, 0.08)};
+        color: ${getColorV8('primaryHue', 800, theme)};
       }
 
       :active {
-        background-color: ${getColor('primaryHue', 600, theme, 0.2)};
-        color: ${getColor('primaryHue', 800, theme)};
+        background-color: ${getColorV8('primaryHue', 600, theme, 0.2)};
+        color: ${getColorV8('primaryHue', 800, theme)};
       }
   `);
 };
@@ -1614,7 +1614,7 @@ const Calendar = forwardRef((props, ref) => {
   return React__default.createElement(StyledRangeCalendar, _extends({
     ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '8.74.2'
+    "data-garden-version": '8.75.0'
   }, props), React__default.createElement(Month, {
     displayDate: state.previewDate,
     isNextHidden: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-datepickers",
-  "version": "8.74.2",
+  "version": "8.75.0",
   "description": "Components relating to datepickers in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -33,7 +33,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.74.2",
+    "@zendeskgarden/react-theming": "^8.75.0",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "be0e20f0b016a227ed1ab6b5b13cb04971969d3b"
+  "gitHead": "56a54793a611efc223b8e36262d428365613c853"
 }