@atlaskit/calendar 13.3.3 → 14.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/calendar
 
+## 14.0.0
+
+### Major Changes
+
+- [#41791](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41791) [`ec7c2a38247`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ec7c2a38247) - Removed all remaining legacy theming logic from the Calendar, Form, InlineDialog, InlineEdit and InlineMessage components.
+
 ## 13.3.3
 
 ### Patch Changes

package/dist/cjs/calendar.js

@@ -13,7 +13,6 @@ var _react2 = require("@emotion/react");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _primitives = require("@atlaskit/primitives");
-var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
 var _header = _interopRequireDefault(require("./internal/components/header"));
 var _weekDays = _interopRequireDefault(require("./internal/components/week-days"));
 var _weekHeader = _interopRequireDefault(require("./internal/components/week-header"));
@@ -35,9 +34,9 @@ var boxStyles = (0, _primitives.xcss)({
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "13.3.3"
+  packageVersion: "14.0.0"
 };
-var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
+var InnerCalendar = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
   var day = _ref.day,
     _ref$defaultDay = _ref.defaultDay,
     defaultDay = _ref$defaultDay === void 0 ? 0 : _ref$defaultDay,
@@ -75,8 +74,6 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
     weekStartDay = _ref$weekStartDay === void 0 ? 0 : _ref$weekStartDay,
     testId = _ref.testId,
     calendarRef = _ref.calendarRef,
-    _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'light' : _ref$mode,
     className = _ref.className,
     style = _ref.style,
     _ref$tabIndex = _ref.tabIndex,
@@ -218,7 +215,6 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
     handleClickNext: handleClickNext,
     handleClickPrev: handleClickPrev,
     headerId: headerId,
-    mode: mode,
     tabIndex: tabIndex,
     testId: testId
   }), (0, _react2.jsx)(_primitives.Box, {
@@ -229,12 +225,10 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
     testId: testId && "".concat(testId, "--calendar-dates")
   }, (0, _react2.jsx)(_weekHeader.default, {
     daysShort: daysShort,
-    mode: mode,
     testId: testId
   }), (0, _react2.jsx)(_weekDays.default, {
     weeks: weeks,
     handleClickDay: handleClickDay,
-    mode: mode,
     monthsLong: monthsLong,
     shouldSetFocus: shouldSetFocus,
     tabIndex: tabIndex,
@@ -252,13 +246,9 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
  * - [Usage](https://atlassian.design/components/calendar/usage)
  */
 var Calendar = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Calendar(props, ref) {
-  return (0, _react2.jsx)(_components.default.Consumer, null, function (_ref2) {
-    var mode = _ref2.mode;
-    return (0, _react2.jsx)(CalendarWithMode, (0, _extends2.default)({}, props, {
-      mode: mode,
-      ref: ref
-    }));
-  });
+  return (0, _react2.jsx)(InnerCalendar, (0, _extends2.default)({}, props, {
+    ref: ref
+  }));
 }));
 Calendar.displayName = 'Calendar';
 var _default = exports.default = Calendar;

package/dist/cjs/internal/components/date.js

@@ -32,7 +32,6 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     _ref2$isSibling = _ref2.isSibling,
     isSibling = _ref2$isSibling === void 0 ? false : _ref2$isSibling,
     year = _ref2.year,
-    mode = _ref2.mode,
     shouldSetFocus = _ref2.shouldSetFocus,
     tabIndex = _ref2.tabIndex,
     testId = _ref2.testId;
@@ -70,9 +69,7 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
       });
     }
   }, [onClick]);
-  var dateCellStyles = (0, _react.useMemo)(function () {
-    return (0, _react2.css)((0, _date.dateCellStyles)(mode));
-  }, [mode]);
+  var dateCellStyles = (0, _react2.css)((0, _date.dateCellStyles)());
   return (0, _react2.jsx)(_primitives.Grid, {
     role: "gridcell",
     alignItems: "center"

package/dist/cjs/internal/components/week-days.js

@@ -15,7 +15,6 @@ var _weekDayGrid = _interopRequireDefault(require("./week-day-grid"));
 var WeekDays = /*#__PURE__*/(0, _react.memo)(function WeekDays(_ref) {
   var weeks = _ref.weeks,
     handleClickDay = _ref.handleClickDay,
-    mode = _ref.mode,
     monthsLong = _ref.monthsLong,
     shouldSetFocus = _ref.shouldSetFocus,
     tabIndex = _ref.tabIndex,
@@ -41,7 +40,6 @@ var WeekDays = /*#__PURE__*/(0, _react.memo)(function WeekDays(_ref) {
         isSelected: weekDay.isSelected,
         isSibling: weekDay.isSiblingMonth,
         year: weekDay.year,
-        mode: mode,
         shouldSetFocus: shouldSetFocus,
         tabIndex: tabIndex,
         testId: testId

package/dist/cjs/internal/styles/date.js

@@ -5,33 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.dateCellStyles = void 0;
 var _colors = require("@atlaskit/theme/colors");
-var textColor = {
-  light: "var(--ds-text, ".concat(_colors.N900, ")"),
-  dark: "var(--ds-text, ".concat(_colors.DN600, ")")
-};
-var textColorMedium = "var(--ds-text-subtle, ".concat(_colors.N600, ")");
-var todayColor = {
-  light: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
-  dark: "var(--ds-text-selected, ".concat(_colors.B100, ")")
-};
-var hoverBackground = {
-  light: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"),
-  dark: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N800, ")")
-};
-var textSelected = {
-  light: "var(--ds-text-selected, ".concat(_colors.N0, ")"),
-  dark: "var(--ds-text-selected, ".concat(_colors.N700, ")")
-};
-var selectedBackground = {
-  light: "var(--ds-background-selected, ".concat(_colors.N500, ")"),
-  dark: "var(--ds-background-selected, ".concat(_colors.N0, ")")
-};
-var borderColorFocused = {
-  light: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
-  dark: "var(--ds-border-focused, ".concat(_colors.B100, ")")
-};
 var dateCellStyles = exports.dateCellStyles = function dateCellStyles() {
-  var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
   return {
     all: 'unset',
     display: 'block',
@@ -40,7 +14,7 @@ var dateCellStyles = exports.dateCellStyles = function dateCellStyles() {
     backgroundColor: 'transparent',
     border: '2px solid transparent',
     borderRadius: 3,
-    color: textColor[mode],
+    color: "var(--ds-text, ".concat(_colors.N900, ")"),
     cursor: 'pointer',
     flexGrow: 1,
     fontSize: "var(--ds-font-size-100, 14px)",
@@ -49,7 +23,7 @@ var dateCellStyles = exports.dateCellStyles = function dateCellStyles() {
       color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
     },
     '&[data-today]': {
-      color: todayColor[mode],
+      color: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
       fontWeight: "var(--ds-font-weight-bold, bold)",
       '&::after': {
         display: 'block',
@@ -67,30 +41,30 @@ var dateCellStyles = exports.dateCellStyles = function dateCellStyles() {
       color: "var(--ds-text-subtle, ".concat(_colors.N600, ")")
     },
     '&[data-selected]': {
-      backgroundColor: selectedBackground[mode],
-      color: textSelected[mode]
+      backgroundColor: "var(--ds-background-selected, ".concat(_colors.N500, ")"),
+      color: "var(--ds-text-selected, ".concat(_colors.N0, ")")
     },
     '&[data-disabled]': {
       color: "var(--ds-text-disabled, ".concat(_colors.N40, ")"),
       cursor: 'not-allowed'
     },
     '&:focus-visible': {
-      border: "2px solid ".concat(borderColorFocused[mode])
+      border: "2px solid ".concat("var(--ds-border-focused, ".concat(_colors.B200, ")"))
     },
     '&:hover': {
-      backgroundColor: hoverBackground[mode],
-      color: textColor[mode]
+      backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"),
+      color: "var(--ds-text, ".concat(_colors.N900, ")")
     },
     '&:active': {
       backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")"),
-      color: textColor[mode]
+      color: "var(--ds-text, ".concat(_colors.N900, ")")
     },
     '&[data-selected]:hover': {
       backgroundColor: "var(--ds-background-selected-hovered, ".concat(_colors.B50, ")"),
       color: "var(--ds-text-selected, ".concat(_colors.N600, ")")
     },
     '&[data-prev-selected]:hover': {
-      color: textColorMedium
+      color: "var(--ds-text-subtle, ".concat(_colors.N600, ")")
     },
     '&[data-sibling]:hover': {
       color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")

package/dist/es2019/calendar.js

@@ -5,7 +5,6 @@ import { jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
 import { Box, Stack, xcss } from '@atlaskit/primitives';
-import GlobalTheme from '@atlaskit/theme/components';
 import Header from './internal/components/header';
 import WeekDaysComponent from './internal/components/week-days';
 import WeekHeaderComponent from './internal/components/week-header';
@@ -25,9 +24,9 @@ const boxStyles = xcss({
 const analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "13.3.3"
+  packageVersion: "14.0.0"
 };
-const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
+const InnerCalendar = /*#__PURE__*/forwardRef(function Calendar({
   day,
   defaultDay = 0,
   defaultMonth = 0,
@@ -54,7 +53,6 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
   weekStartDay = 0,
   testId,
   calendarRef,
-  mode = 'light',
   className,
   style,
   tabIndex = 0
@@ -189,7 +187,6 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
     handleClickNext: handleClickNext,
     handleClickPrev: handleClickPrev,
     headerId: headerId,
-    mode: mode,
     tabIndex: tabIndex,
     testId: testId
   }), jsx(Box, {
@@ -200,12 +197,10 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
     testId: testId && `${testId}--calendar-dates`
   }, jsx(WeekHeaderComponent, {
     daysShort: daysShort,
-    mode: mode,
     testId: testId
   }), jsx(WeekDaysComponent, {
     weeks: weeks,
     handleClickDay: handleClickDay,
-    mode: mode,
     monthsLong: monthsLong,
     shouldSetFocus: shouldSetFocus,
     tabIndex: tabIndex,
@@ -223,12 +218,9 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
  * - [Usage](https://atlassian.design/components/calendar/usage)
  */
 const Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Calendar(props, ref) {
-  return jsx(GlobalTheme.Consumer, null, ({
-    mode
-  }) => jsx(CalendarWithMode, _extends({}, props, {
-    mode: mode,
+  return jsx(InnerCalendar, _extends({}, props, {
     ref: ref
-  })));
+  }));
 }));
 Calendar.displayName = 'Calendar';
 export default Calendar;

package/dist/es2019/internal/components/date.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import { Grid } from '@atlaskit/primitives';
@@ -17,7 +17,6 @@ const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
   isSelected = false,
   isSibling = false,
   year,
-  mode,
   shouldSetFocus,
   tabIndex,
   testId
@@ -57,7 +56,7 @@ const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
       });
     }
   }, [onClick]);
-  const dateCellStyles = useMemo(() => css(getDateCellStyles(mode)), [mode]);
+  const dateCellStyles = css(getDateCellStyles());
   return jsx(Grid, {
     role: "gridcell",
     alignItems: "center"

package/dist/es2019/internal/components/week-days.js

@@ -7,7 +7,6 @@ import WeekdayGrid from './week-day-grid';
 const WeekDays = /*#__PURE__*/memo(function WeekDays({
   weeks,
   handleClickDay,
-  mode,
   monthsLong,
   shouldSetFocus,
   tabIndex,
@@ -32,7 +31,6 @@ const WeekDays = /*#__PURE__*/memo(function WeekDays({
     isSelected: weekDay.isSelected,
     isSibling: weekDay.isSiblingMonth,
     year: weekDay.year,
-    mode: mode,
     shouldSetFocus: shouldSetFocus,
     tabIndex: tabIndex,
     testId: testId

package/dist/es2019/internal/styles/date.js

@@ -1,30 +1,5 @@
-import { B100, B200, B400, B50, DN600, N0, N200, N30, N40, N500, N600, N700, N800, N900 } from '@atlaskit/theme/colors';
-const textColor = {
-  light: `var(--ds-text, ${N900})`,
-  dark: `var(--ds-text, ${DN600})`
-};
-const textColorMedium = `var(--ds-text-subtle, ${N600})`;
-const todayColor = {
-  light: `var(--ds-text-selected, ${B400})`,
-  dark: `var(--ds-text-selected, ${B100})`
-};
-const hoverBackground = {
-  light: `var(--ds-background-neutral-subtle-hovered, ${N30})`,
-  dark: `var(--ds-background-neutral-subtle-hovered, ${N800})`
-};
-const textSelected = {
-  light: `var(--ds-text-selected, ${N0})`,
-  dark: `var(--ds-text-selected, ${N700})`
-};
-const selectedBackground = {
-  light: `var(--ds-background-selected, ${N500})`,
-  dark: `var(--ds-background-selected, ${N0})`
-};
-const borderColorFocused = {
-  light: `var(--ds-border-focused, ${B200})`,
-  dark: `var(--ds-border-focused, ${B100})`
-};
-export const dateCellStyles = (mode = 'light') => ({
+import { B200, B400, B50, N0, N200, N30, N40, N500, N600, N900 } from '@atlaskit/theme/colors';
+export const dateCellStyles = () => ({
   all: 'unset',
   display: 'block',
   padding: `${"var(--ds-space-050, 4px)"} 9px`,
@@ -32,7 +7,7 @@ export const dateCellStyles = (mode = 'light') => ({
   backgroundColor: 'transparent',
   border: '2px solid transparent',
   borderRadius: 3,
-  color: textColor[mode],
+  color: `var(--ds-text, ${N900})`,
   cursor: 'pointer',
   flexGrow: 1,
   fontSize: "var(--ds-font-size-100, 14px)",
@@ -41,7 +16,7 @@ export const dateCellStyles = (mode = 'light') => ({
     color: `var(--ds-text-subtlest, ${N200})`
   },
   '&[data-today]': {
-    color: todayColor[mode],
+    color: `var(--ds-text-selected, ${B400})`,
     fontWeight: "var(--ds-font-weight-bold, bold)",
     '&::after': {
       display: 'block',
@@ -59,30 +34,30 @@ export const dateCellStyles = (mode = 'light') => ({
     color: `var(--ds-text-subtle, ${N600})`
   },
   '&[data-selected]': {
-    backgroundColor: selectedBackground[mode],
-    color: textSelected[mode]
+    backgroundColor: `var(--ds-background-selected, ${N500})`,
+    color: `var(--ds-text-selected, ${N0})`
   },
   '&[data-disabled]': {
     color: `var(--ds-text-disabled, ${N40})`,
     cursor: 'not-allowed'
   },
   '&:focus-visible': {
-    border: `2px solid ${borderColorFocused[mode]}`
+    border: `2px solid ${`var(--ds-border-focused, ${B200})`}`
   },
   '&:hover': {
-    backgroundColor: hoverBackground[mode],
-    color: textColor[mode]
+    backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N30})`,
+    color: `var(--ds-text, ${N900})`
   },
   '&:active': {
     backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${B50})`,
-    color: textColor[mode]
+    color: `var(--ds-text, ${N900})`
   },
   '&[data-selected]:hover': {
     backgroundColor: `var(--ds-background-selected-hovered, ${B50})`,
     color: `var(--ds-text-selected, ${N600})`
   },
   '&[data-prev-selected]:hover': {
-    color: textColorMedium
+    color: `var(--ds-text-subtle, ${N600})`
   },
   '&[data-sibling]:hover': {
     color: `var(--ds-text-subtlest, ${N200})`

package/dist/esm/calendar.js

@@ -9,7 +9,6 @@ import { jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import noop from '@atlaskit/ds-lib/noop';
 import { Box, Stack, xcss } from '@atlaskit/primitives';
-import GlobalTheme from '@atlaskit/theme/components';
 import Header from './internal/components/header';
 import WeekDaysComponent from './internal/components/week-days';
 import WeekHeaderComponent from './internal/components/week-header';
@@ -29,9 +28,9 @@ var boxStyles = xcss({
 var analyticsAttributes = {
   componentName: 'calendar',
   packageName: "@atlaskit/calendar",
-  packageVersion: "13.3.3"
+  packageVersion: "14.0.0"
 };
-var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
+var InnerCalendar = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
   var day = _ref.day,
     _ref$defaultDay = _ref.defaultDay,
     defaultDay = _ref$defaultDay === void 0 ? 0 : _ref$defaultDay,
@@ -69,8 +68,6 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
     weekStartDay = _ref$weekStartDay === void 0 ? 0 : _ref$weekStartDay,
     testId = _ref.testId,
     calendarRef = _ref.calendarRef,
-    _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'light' : _ref$mode,
     className = _ref.className,
     style = _ref.style,
     _ref$tabIndex = _ref.tabIndex,
@@ -212,7 +209,6 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
     handleClickNext: handleClickNext,
     handleClickPrev: handleClickPrev,
     headerId: headerId,
-    mode: mode,
     tabIndex: tabIndex,
     testId: testId
   }), jsx(Box, {
@@ -223,12 +219,10 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
     testId: testId && "".concat(testId, "--calendar-dates")
   }, jsx(WeekHeaderComponent, {
     daysShort: daysShort,
-    mode: mode,
     testId: testId
   }), jsx(WeekDaysComponent, {
     weeks: weeks,
     handleClickDay: handleClickDay,
-    mode: mode,
     monthsLong: monthsLong,
     shouldSetFocus: shouldSetFocus,
     tabIndex: tabIndex,
@@ -246,13 +240,9 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
  * - [Usage](https://atlassian.design/components/calendar/usage)
  */
 var Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Calendar(props, ref) {
-  return jsx(GlobalTheme.Consumer, null, function (_ref2) {
-    var mode = _ref2.mode;
-    return jsx(CalendarWithMode, _extends({}, props, {
-      mode: mode,
-      ref: ref
-    }));
-  });
+  return jsx(InnerCalendar, _extends({}, props, {
+    ref: ref
+  }));
 }));
 Calendar.displayName = 'Calendar';
 export default Calendar;

package/dist/esm/internal/components/date.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import { Grid } from '@atlaskit/primitives';
@@ -24,7 +24,6 @@ var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref2, _ref)
     _ref2$isSibling = _ref2.isSibling,
     isSibling = _ref2$isSibling === void 0 ? false : _ref2$isSibling,
     year = _ref2.year,
-    mode = _ref2.mode,
     shouldSetFocus = _ref2.shouldSetFocus,
     tabIndex = _ref2.tabIndex,
     testId = _ref2.testId;
@@ -62,9 +61,7 @@ var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref2, _ref)
       });
     }
   }, [onClick]);
-  var dateCellStyles = useMemo(function () {
-    return css(getDateCellStyles(mode));
-  }, [mode]);
+  var dateCellStyles = css(getDateCellStyles());
   return jsx(Grid, {
     role: "gridcell",
     alignItems: "center"

package/dist/esm/internal/components/week-days.js

@@ -7,7 +7,6 @@ import WeekdayGrid from './week-day-grid';
 var WeekDays = /*#__PURE__*/memo(function WeekDays(_ref) {
   var weeks = _ref.weeks,
     handleClickDay = _ref.handleClickDay,
-    mode = _ref.mode,
     monthsLong = _ref.monthsLong,
     shouldSetFocus = _ref.shouldSetFocus,
     tabIndex = _ref.tabIndex,
@@ -33,7 +32,6 @@ var WeekDays = /*#__PURE__*/memo(function WeekDays(_ref) {
         isSelected: weekDay.isSelected,
         isSibling: weekDay.isSiblingMonth,
         year: weekDay.year,
-        mode: mode,
         shouldSetFocus: shouldSetFocus,
         tabIndex: tabIndex,
         testId: testId

package/dist/esm/internal/styles/date.js

@@ -1,31 +1,5 @@
-import { B100, B200, B400, B50, DN600, N0, N200, N30, N40, N500, N600, N700, N800, N900 } from '@atlaskit/theme/colors';
-var textColor = {
-  light: "var(--ds-text, ".concat(N900, ")"),
-  dark: "var(--ds-text, ".concat(DN600, ")")
-};
-var textColorMedium = "var(--ds-text-subtle, ".concat(N600, ")");
-var todayColor = {
-  light: "var(--ds-text-selected, ".concat(B400, ")"),
-  dark: "var(--ds-text-selected, ".concat(B100, ")")
-};
-var hoverBackground = {
-  light: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"),
-  dark: "var(--ds-background-neutral-subtle-hovered, ".concat(N800, ")")
-};
-var textSelected = {
-  light: "var(--ds-text-selected, ".concat(N0, ")"),
-  dark: "var(--ds-text-selected, ".concat(N700, ")")
-};
-var selectedBackground = {
-  light: "var(--ds-background-selected, ".concat(N500, ")"),
-  dark: "var(--ds-background-selected, ".concat(N0, ")")
-};
-var borderColorFocused = {
-  light: "var(--ds-border-focused, ".concat(B200, ")"),
-  dark: "var(--ds-border-focused, ".concat(B100, ")")
-};
+import { B200, B400, B50, N0, N200, N30, N40, N500, N600, N900 } from '@atlaskit/theme/colors';
 export var dateCellStyles = function dateCellStyles() {
-  var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
   return {
     all: 'unset',
     display: 'block',
@@ -34,7 +8,7 @@ export var dateCellStyles = function dateCellStyles() {
     backgroundColor: 'transparent',
     border: '2px solid transparent',
     borderRadius: 3,
-    color: textColor[mode],
+    color: "var(--ds-text, ".concat(N900, ")"),
     cursor: 'pointer',
     flexGrow: 1,
     fontSize: "var(--ds-font-size-100, 14px)",
@@ -43,7 +17,7 @@ export var dateCellStyles = function dateCellStyles() {
       color: "var(--ds-text-subtlest, ".concat(N200, ")")
     },
     '&[data-today]': {
-      color: todayColor[mode],
+      color: "var(--ds-text-selected, ".concat(B400, ")"),
       fontWeight: "var(--ds-font-weight-bold, bold)",
       '&::after': {
         display: 'block',
@@ -61,30 +35,30 @@ export var dateCellStyles = function dateCellStyles() {
       color: "var(--ds-text-subtle, ".concat(N600, ")")
     },
     '&[data-selected]': {
-      backgroundColor: selectedBackground[mode],
-      color: textSelected[mode]
+      backgroundColor: "var(--ds-background-selected, ".concat(N500, ")"),
+      color: "var(--ds-text-selected, ".concat(N0, ")")
     },
     '&[data-disabled]': {
       color: "var(--ds-text-disabled, ".concat(N40, ")"),
       cursor: 'not-allowed'
     },
     '&:focus-visible': {
-      border: "2px solid ".concat(borderColorFocused[mode])
+      border: "2px solid ".concat("var(--ds-border-focused, ".concat(B200, ")"))
     },
     '&:hover': {
-      backgroundColor: hoverBackground[mode],
-      color: textColor[mode]
+      backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"),
+      color: "var(--ds-text, ".concat(N900, ")")
     },
     '&:active': {
       backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")"),
-      color: textColor[mode]
+      color: "var(--ds-text, ".concat(N900, ")")
     },
     '&[data-selected]:hover': {
       backgroundColor: "var(--ds-background-selected-hovered, ".concat(B50, ")"),
       color: "var(--ds-text-selected, ".concat(N600, ")")
     },
     '&[data-prev-selected]:hover': {
-      color: textColorMedium
+      color: "var(--ds-text-subtle, ".concat(N600, ")")
     },
     '&[data-sibling]:hover': {
       color: "var(--ds-text-subtlest, ".concat(N200, ")")

package/dist/types/calendar.d.ts

@@ -9,5 +9,5 @@ import type { CalendarProps } from './types';
  * - [Code](https://atlassian.design/components/calendar/code)
  * - [Usage](https://atlassian.design/components/calendar/usage)
  */
-declare const Calendar: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<CalendarProps, "day" | "defaultDay" | "defaultMonth" | "defaultPreviouslySelected" | "defaultSelected" | "defaultYear" | "disabled" | "disabledDateFilter" | "maxDate" | "minDate" | "month" | "nextMonthLabel" | "onBlur" | "onChange" | "onFocus" | "onSelect" | "previouslySelected" | "previousMonthLabel" | "selected" | "today" | "year" | "locale" | "analyticsContext" | "weekStartDay" | "testId" | "className" | "style" | "calendarRef" | "mode" | "tabIndex" | "createAnalyticsEvent"> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const Calendar: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<CalendarProps, "day" | "defaultDay" | "defaultMonth" | "defaultPreviouslySelected" | "defaultSelected" | "defaultYear" | "disabled" | "disabledDateFilter" | "maxDate" | "minDate" | "month" | "nextMonthLabel" | "onBlur" | "onChange" | "onFocus" | "onSelect" | "previouslySelected" | "previousMonthLabel" | "selected" | "today" | "year" | "locale" | "analyticsContext" | "weekStartDay" | "testId" | "className" | "style" | "calendarRef" | "tabIndex" | "createAnalyticsEvent"> & import("react").RefAttributes<HTMLDivElement>>>;
 export default Calendar;

package/dist/types/internal/components/date.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { ThemeModes } from '@atlaskit/theme/types';
 import type { TabIndex } from '../../types';
 import type { DateObj } from '../types';
 interface DateProps {
@@ -15,7 +14,6 @@ interface DateProps {
     isSelected?: boolean;
     isSibling?: boolean;
     year: number;
-    mode?: ThemeModes;
     shouldSetFocus: boolean;
     tabIndex: TabIndex;
     testId?: string;

package/dist/types/internal/components/header.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { ThemeModes } from '@atlaskit/theme/types';
 import { TabIndex } from '../../types';
 interface HeaderProps {
     monthLongTitle: string;
@@ -10,7 +9,6 @@ interface HeaderProps {
     nextHeading: string;
     handleClickNext: (e: React.MouseEvent<HTMLElement>) => void;
     handleClickPrev: (e: React.MouseEvent<HTMLElement>) => void;
-    mode?: ThemeModes;
     headerId: string;
     tabIndex?: TabIndex;
     testId?: string;

package/dist/types/internal/components/week-days.d.ts

@@ -1,11 +1,9 @@
 /// <reference types="react" />
-import type { ThemeModes } from '@atlaskit/theme/types';
 import type { TabIndex } from '../../types';
 import { DateObj, Week } from '../types';
 interface WeekDaysProps {
     weeks: Week[];
     handleClickDay: (date: DateObj) => void;
-    mode?: ThemeModes;
     monthsLong: string[];
     shouldSetFocus: boolean;
     tabIndex: TabIndex;

package/dist/types/internal/components/week-header.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" />
-import type { ThemeModes } from '@atlaskit/theme/types';
 interface WeekHeaderProps {
     daysShort: string[];
-    mode?: ThemeModes;
     testId?: string;
 }
 declare const WeekHeader: import("react").NamedExoticComponent<WeekHeaderProps>;

package/dist/types/internal/styles/date.d.ts

@@ -1,3 +1,2 @@
 import { CSSObject } from '@emotion/react';
-import { ThemeModes } from '@atlaskit/theme/types';
-export declare const dateCellStyles: (mode?: ThemeModes) => CSSObject;
+export declare const dateCellStyles: () => CSSObject;

package/dist/types/types.d.ts

@@ -1,6 +1,5 @@
 import { CSSProperties } from 'react';
 import { UIAnalyticsEvent, WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { ThemeModes } from '@atlaskit/theme/types';
 import type { ArrowKeys, DateObj, ISODate } from './internal/types';
 export type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 export type TabIndex = -1 | 0;
@@ -146,10 +145,6 @@ export interface CalendarProps extends WithAnalyticsEventsProps {
      * backward compatibility. PLEASE DO NOT USE THIS.
      */
     calendarRef?: React.Ref<CalendarRef>;
-    /**
-     * @internal Legacy theme mode, can be either 'light' or 'dark'
-     */
-    mode?: ThemeModes;
     /**
      * Indicates if the calendar can be focused by keyboard or only
      * programmatically. Defaults to "0".

package/dist/types-ts4.5/calendar.d.ts

@@ -9,5 +9,5 @@ import type { CalendarProps } from './types';
  * - [Code](https://atlassian.design/components/calendar/code)
  * - [Usage](https://atlassian.design/components/calendar/usage)
  */
-declare const Calendar: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<CalendarProps, "day" | "defaultDay" | "defaultMonth" | "defaultPreviouslySelected" | "defaultSelected" | "defaultYear" | "disabled" | "disabledDateFilter" | "maxDate" | "minDate" | "month" | "nextMonthLabel" | "onBlur" | "onChange" | "onFocus" | "onSelect" | "previouslySelected" | "previousMonthLabel" | "selected" | "today" | "year" | "locale" | "analyticsContext" | "weekStartDay" | "testId" | "className" | "style" | "calendarRef" | "mode" | "tabIndex" | "createAnalyticsEvent"> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const Calendar: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<CalendarProps, "day" | "defaultDay" | "defaultMonth" | "defaultPreviouslySelected" | "defaultSelected" | "defaultYear" | "disabled" | "disabledDateFilter" | "maxDate" | "minDate" | "month" | "nextMonthLabel" | "onBlur" | "onChange" | "onFocus" | "onSelect" | "previouslySelected" | "previousMonthLabel" | "selected" | "today" | "year" | "locale" | "analyticsContext" | "weekStartDay" | "testId" | "className" | "style" | "calendarRef" | "tabIndex" | "createAnalyticsEvent"> & import("react").RefAttributes<HTMLDivElement>>>;
 export default Calendar;

package/dist/types-ts4.5/internal/components/date.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { ThemeModes } from '@atlaskit/theme/types';
 import type { TabIndex } from '../../types';
 import type { DateObj } from '../types';
 interface DateProps {
@@ -15,7 +14,6 @@ interface DateProps {
     isSelected?: boolean;
     isSibling?: boolean;
     year: number;
-    mode?: ThemeModes;
     shouldSetFocus: boolean;
     tabIndex: TabIndex;
     testId?: string;

package/dist/types-ts4.5/internal/components/header.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { ThemeModes } from '@atlaskit/theme/types';
 import { TabIndex } from '../../types';
 interface HeaderProps {
     monthLongTitle: string;
@@ -10,7 +9,6 @@ interface HeaderProps {
     nextHeading: string;
     handleClickNext: (e: React.MouseEvent<HTMLElement>) => void;
     handleClickPrev: (e: React.MouseEvent<HTMLElement>) => void;
-    mode?: ThemeModes;
     headerId: string;
     tabIndex?: TabIndex;
     testId?: string;

package/dist/types-ts4.5/internal/components/week-days.d.ts

@@ -1,11 +1,9 @@
 /// <reference types="react" />
-import type { ThemeModes } from '@atlaskit/theme/types';
 import type { TabIndex } from '../../types';
 import { DateObj, Week } from '../types';
 interface WeekDaysProps {
     weeks: Week[];
     handleClickDay: (date: DateObj) => void;
-    mode?: ThemeModes;
     monthsLong: string[];
     shouldSetFocus: boolean;
     tabIndex: TabIndex;

package/dist/types-ts4.5/internal/components/week-header.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" />
-import type { ThemeModes } from '@atlaskit/theme/types';
 interface WeekHeaderProps {
     daysShort: string[];
-    mode?: ThemeModes;
     testId?: string;
 }
 declare const WeekHeader: import("react").NamedExoticComponent<WeekHeaderProps>;

package/dist/types-ts4.5/internal/styles/date.d.ts

@@ -1,3 +1,2 @@
 import { CSSObject } from '@emotion/react';
-import { ThemeModes } from '@atlaskit/theme/types';
-export declare const dateCellStyles: (mode?: ThemeModes) => CSSObject;
+export declare const dateCellStyles: () => CSSObject;

package/dist/types-ts4.5/types.d.ts

@@ -1,6 +1,5 @@
 import { CSSProperties } from 'react';
 import { UIAnalyticsEvent, WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { ThemeModes } from '@atlaskit/theme/types';
 import type { ArrowKeys, DateObj, ISODate } from './internal/types';
 export type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 export type TabIndex = -1 | 0;
@@ -146,10 +145,6 @@ export interface CalendarProps extends WithAnalyticsEventsProps {
      * backward compatibility. PLEASE DO NOT USE THIS.
      */
     calendarRef?: React.Ref<CalendarRef>;
-    /**
-     * @internal Legacy theme mode, can be either 'light' or 'dark'
-     */
-    mode?: ThemeModes;
     /**
      * Indicates if the calendar can be focused by keyboard or only
      * programmatically. Defaults to "0".

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/calendar",
-  "version": "13.3.3",
+  "version": "14.0.0",
   "description": "An interactive calendar for date selection experiences.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/report.api.md

@@ -21,7 +21,6 @@ import { CSSProperties } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { MemoExoticComponent } from 'react';
 import { RefAttributes } from 'react';
-import { ThemeModes } from '@atlaskit/theme/types';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 
@@ -48,7 +47,6 @@ const Calendar: MemoExoticComponent<
       | 'locale'
       | 'maxDate'
       | 'minDate'
-      | 'mode'
       | 'month'
       | 'nextMonthLabel'
       | 'onBlur'
@@ -87,8 +85,6 @@ export interface CalendarProps extends WithAnalyticsEventsProps {
   locale?: string;
   maxDate?: string;
   minDate?: string;
-  // @internal
-  mode?: ThemeModes;
   month?: number;
   nextMonthLabel?: string;
   onBlur?: React.FocusEventHandler;

package/tmp/api-report-tmp.d.ts

@@ -10,7 +10,6 @@ import { CSSProperties } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { MemoExoticComponent } from 'react';
 import { RefAttributes } from 'react';
-import { ThemeModes } from '@atlaskit/theme/types';
 import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 
@@ -18,7 +17,7 @@ import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 type ArrowKeys = 'down' | 'left' | 'right' | 'up';
 
 // @public
-const Calendar: MemoExoticComponent<ForwardRefExoticComponent<Pick<CalendarProps, "analyticsContext" | "calendarRef" | "className" | "createAnalyticsEvent" | "day" | "defaultDay" | "defaultMonth" | "defaultPreviouslySelected" | "defaultSelected" | "defaultYear" | "disabled" | "disabledDateFilter" | "locale" | "maxDate" | "minDate" | "mode" | "month" | "nextMonthLabel" | "onBlur" | "onChange" | "onFocus" | "onSelect" | "previousMonthLabel" | "previouslySelected" | "selected" | "style" | "tabIndex" | "testId" | "today" | "weekStartDay" | "year"> & RefAttributes<HTMLDivElement>>>;
+const Calendar: MemoExoticComponent<ForwardRefExoticComponent<Pick<CalendarProps, "analyticsContext" | "calendarRef" | "className" | "createAnalyticsEvent" | "day" | "defaultDay" | "defaultMonth" | "defaultPreviouslySelected" | "defaultSelected" | "defaultYear" | "disabled" | "disabledDateFilter" | "locale" | "maxDate" | "minDate" | "month" | "nextMonthLabel" | "onBlur" | "onChange" | "onFocus" | "onSelect" | "previousMonthLabel" | "previouslySelected" | "selected" | "style" | "tabIndex" | "testId" | "today" | "weekStartDay" | "year"> & RefAttributes<HTMLDivElement>>>;
 export default Calendar;
 
 // @public (undocumented)
@@ -38,8 +37,6 @@ export interface CalendarProps extends WithAnalyticsEventsProps {
     locale?: string;
     maxDate?: string;
     minDate?: string;
-    // @internal
-    mode?: ThemeModes;
     month?: number;
     nextMonthLabel?: string;
     onBlur?: React.FocusEventHandler;