@atlaskit/calendar 12.1.1 → 12.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/dist/cjs/calendar.js +8 -19
  3. package/dist/cjs/internal/components/date.js +1 -0
  4. package/dist/cjs/internal/components/heading.js +5 -7
  5. package/dist/cjs/internal/components/week-header.js +1 -3
  6. package/dist/cjs/internal/styles/date.js +21 -23
  7. package/dist/cjs/version.json +1 -1
  8. package/dist/es2019/calendar.js +8 -19
  9. package/dist/es2019/internal/components/date.js +1 -0
  10. package/dist/es2019/internal/components/heading.js +5 -6
  11. package/dist/es2019/internal/components/week-header.js +1 -2
  12. package/dist/es2019/internal/styles/date.js +21 -22
  13. package/dist/es2019/version.json +1 -1
  14. package/dist/esm/calendar.js +8 -19
  15. package/dist/esm/internal/components/date.js +1 -0
  16. package/dist/esm/internal/components/heading.js +5 -6
  17. package/dist/esm/internal/components/week-header.js +1 -2
  18. package/dist/esm/internal/styles/date.js +21 -22
  19. package/dist/esm/version.json +1 -1
  20. package/package.json +9 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,31 @@
1
1
  # @atlaskit/calendar
2
2
 
3
+ ## 12.1.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
8
+ - Updated dependencies
9
+
10
+ ## 12.1.4
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
16
+ ## 12.1.3
17
+
18
+ ### Patch Changes
19
+
20
+ - [`192d35cfdbd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/192d35cfdbd) - Defaults native button usage to type="button" to prevent unintended submittig of forms.
21
+ - [`f7d71a9ba09`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f7d71a9ba09) - Replaces visually hidden styles in component to instead use '@atlaskit/visually-hidden'.
22
+
23
+ ## 12.1.2
24
+
25
+ ### Patch Changes
26
+
27
+ - Updated dependencies
28
+
3
29
  ## 12.1.1
4
30
 
5
31
  ### Patch Changes
package/dist/cjs/calendar.js CHANGED
@@ -25,7 +25,7 @@ var _colors = require("@atlaskit/theme/colors");
25
25
 
26
26
  var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
27
27
 
28
- var _tokens = require("@atlaskit/tokens");
28
+ var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
29
29
 
30
30
  var _heading = _interopRequireDefault(require("./internal/components/heading"));
31
31
 
@@ -59,8 +59,8 @@ var lightWrapperStyles = (0, _core.css)({
59
59
  display: 'inline-block',
60
60
  boxSizing: 'border-box',
61
61
  padding: 16,
62
- backgroundColor: (0, _tokens.token)('color.background.overlay', _colors.N0),
63
- color: (0, _tokens.token)('color.text.highEmphasis', _colors.N900),
62
+ backgroundColor: "var(--ds-background-overlay, ".concat(_colors.N0, ")"),
63
+ color: "var(--ds-text-highEmphasis, ".concat(_colors.N900, ")"),
64
64
  outline: 'none',
65
65
  userSelect: 'none'
66
66
  });
@@ -68,8 +68,8 @@ var darkWrapperStyles = (0, _core.css)({
68
68
  display: 'inline-block',
69
69
  boxSizing: 'border-box',
70
70
  padding: 16,
71
- backgroundColor: (0, _tokens.token)('color.background.overlay', _colors.N700),
72
- color: (0, _tokens.token)('color.text.highEmphasis', _colors.DN600),
71
+ backgroundColor: "var(--ds-background-overlay, ".concat(_colors.N700, ")"),
72
+ color: "var(--ds-text-highEmphasis, ".concat(_colors.DN600, ")"),
73
73
  outline: 'none',
74
74
  userSelect: 'none'
75
75
  });
@@ -80,20 +80,10 @@ var gridsContainerStyles = (0, _core.css)({
80
80
  marginBottom: 5,
81
81
  textAlign: 'center'
82
82
  });
83
- var announcerStyles = (0, _core.css)({
84
- width: 1,
85
- height: 1,
86
- margin: -1,
87
- padding: 0,
88
- position: 'absolute',
89
- border: 0,
90
- clip: 'rect(0 0 0 0)',
91
- overflow: 'hidden'
92
- });
93
83
  var analyticsAttributes = {
94
84
  componentName: 'calendar',
95
85
  packageName: "@atlaskit/calendar",
96
- packageVersion: "12.1.1"
86
+ packageVersion: "12.1.5"
97
87
  };
98
88
  var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
99
89
  var day = _ref.day,
@@ -244,12 +234,11 @@ var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_re
244
234
  role: "presentation",
245
235
  "data-testid": testId && "".concat(testId, "--container"),
246
236
  ref: ref
247
- }, (0, _core.jsx)("div", {
248
- css: announcerStyles,
237
+ }, (0, _core.jsx)(_visuallyHidden.default, null, (0, _core.jsx)("span", {
249
238
  id: announceId,
250
239
  "aria-live": "assertive",
251
240
  "aria-relevant": "text"
252
- }, announcerDate), (0, _core.jsx)("div", {
241
+ }, announcerDate)), (0, _core.jsx)("div", {
253
242
  css: !mode || mode === 'light' ? lightWrapperStyles : darkWrapperStyles,
254
243
  "aria-describedby": announceId,
255
244
  "aria-label": "calendar",
package/dist/cjs/internal/components/date.js CHANGED
@@ -73,6 +73,7 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
73
73
  css: dateCellStyles,
74
74
  "aria-selected": isSelected ? 'true' : 'false',
75
75
  tabIndex: isSelected ? 0 : -1,
76
+ type: "button",
76
77
  role: "gridcell",
77
78
  onClick: handleClick,
78
79
  ref: ref,
package/dist/cjs/internal/components/heading.js CHANGED
@@ -19,17 +19,15 @@ var _chevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/ch
19
19
 
20
20
  var _colors = require("@atlaskit/theme/colors");
21
21
 
22
- var _tokens = require("@atlaskit/tokens");
23
-
24
22
  /** @jsx jsx */
25
23
  var headingColor = {
26
- light: (0, _tokens.token)('color.text.highEmphasis', _colors.N800),
27
- dark: (0, _tokens.token)('color.text.highEmphasis', _colors.DN800)
24
+ light: "var(--ds-text-highEmphasis, ".concat(_colors.N800, ")"),
25
+ dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN800, ")")
28
26
  };
29
27
  var headingStyles = (0, _core.css)({
30
28
  display: 'flex',
31
29
  padding: '0 0 13px 0',
32
- color: (0, _tokens.token)('color.text.highEmphasis', _colors.N800),
30
+ color: "var(--ds-text-highEmphasis, ".concat(_colors.N800, ")"),
33
31
  fontWeight: 'bold'
34
32
  });
35
33
 
@@ -71,7 +69,7 @@ var Heading = /*#__PURE__*/(0, _react.memo)(function Heading(_ref) {
71
69
  iconBefore: (0, _core.jsx)(_chevronLeftLarge.default, {
72
70
  label: "Last month",
73
71
  size: "medium",
74
- primaryColor: (0, _tokens.token)('color.text.lowEmphasis', _colors.N70)
72
+ primaryColor: "var(--ds-text-lowEmphasis, ".concat(_colors.N70, ")")
75
73
  })
76
74
  }), (0, _core.jsx)("div", {
77
75
  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
@@ -87,7 +85,7 @@ var Heading = /*#__PURE__*/(0, _react.memo)(function Heading(_ref) {
87
85
  iconBefore: (0, _core.jsx)(_chevronRightLarge.default, {
88
86
  label: "Next month",
89
87
  size: "medium",
90
- primaryColor: (0, _tokens.token)('color.text.lowEmphasis', _colors.N70)
88
+ primaryColor: "var(--ds-text-lowEmphasis, ".concat(_colors.N70, ")")
91
89
  })
92
90
  }));
93
91
  });
package/dist/cjs/internal/components/week-header.js CHANGED
@@ -11,8 +11,6 @@ var _core = require("@emotion/core");
11
11
 
12
12
  var _colors = require("@atlaskit/theme/colors");
13
13
 
14
- var _tokens = require("@atlaskit/tokens");
15
-
16
14
  /** @jsx jsx */
17
15
  var dayNameGridStyles = (0, _core.css)({
18
16
  display: 'grid',
@@ -24,7 +22,7 @@ var dayNameCellStyles = (0, _core.css)({
24
22
  minWidth: 40,
25
23
  padding: '8px 8px',
26
24
  border: 0,
27
- color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N200),
25
+ color: "var(--ds-text-mediumEmphasis, ".concat(_colors.N200, ")"),
28
26
  fontSize: 11,
29
27
  fontWeight: 700,
30
28
  textAlign: 'center',
package/dist/cjs/internal/styles/date.js CHANGED
@@ -7,32 +7,30 @@ exports.dateCellStyles = void 0;
7
7
 
8
8
  var _colors = require("@atlaskit/theme/colors");
9
9
 
10
- var _tokens = require("@atlaskit/tokens");
11
-
12
10
  var textColor = {
13
- light: (0, _tokens.token)('color.text.highEmphasis', _colors.N900),
14
- dark: (0, _tokens.token)('color.text.highEmphasis', _colors.DN600)
11
+ light: "var(--ds-text-highEmphasis, ".concat(_colors.N900, ")"),
12
+ dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN600, ")")
15
13
  };
16
- var textColorMedium = (0, _tokens.token)('color.text.mediumEmphasis', _colors.N600);
14
+ var textColorMedium = "var(--ds-text-mediumEmphasis, ".concat(_colors.N600, ")");
17
15
  var todayColor = {
18
- light: (0, _tokens.token)('color.text.selected', _colors.B400),
19
- dark: (0, _tokens.token)('color.text.selected', _colors.B100)
16
+ light: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
17
+ dark: "var(--ds-text-selected, ".concat(_colors.B100, ")")
20
18
  };
21
19
  var hoverBackground = {
22
- light: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N30),
23
- dark: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N800)
20
+ light: "var(--ds-background-transparentNeutral-hover, ".concat(_colors.N30, ")"),
21
+ dark: "var(--ds-background-transparentNeutral-hover, ".concat(_colors.N800, ")")
24
22
  };
25
23
  var textSelected = {
26
- light: (0, _tokens.token)('color.text.selected', _colors.N0),
27
- dark: (0, _tokens.token)('color.text.selected', _colors.N700)
24
+ light: "var(--ds-text-selected, ".concat(_colors.N0, ")"),
25
+ dark: "var(--ds-text-selected, ".concat(_colors.N700, ")")
28
26
  };
29
27
  var selectedBackground = {
30
- light: (0, _tokens.token)('color.background.selected.resting', _colors.N500),
31
- dark: (0, _tokens.token)('color.background.selected.resting', _colors.N0)
28
+ light: "var(--ds-background-selected-resting, ".concat(_colors.N500, ")"),
29
+ dark: "var(--ds-background-selected-resting, ".concat(_colors.N0, ")")
32
30
  };
33
31
  var borderColorFocused = {
34
- light: (0, _tokens.token)('color.border.focus', _colors.B100),
35
- dark: (0, _tokens.token)('color.border.focus', _colors.B75)
32
+ light: "var(--ds-border-focus, ".concat(_colors.B100, ")"),
33
+ dark: "var(--ds-border-focus, ".concat(_colors.B75, ")")
36
34
  };
37
35
 
38
36
  var dateCellStyles = function dateCellStyles() {
@@ -50,7 +48,7 @@ var dateCellStyles = function dateCellStyles() {
50
48
  fontSize: 14,
51
49
  textAlign: 'center',
52
50
  '&[data-sibling]': {
53
- color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
51
+ color: "var(--ds-text-lowEmphasis, ".concat(_colors.N200, ")")
54
52
  },
55
53
  '&[data-today]': {
56
54
  color: todayColor[mode],
@@ -67,15 +65,15 @@ var dateCellStyles = function dateCellStyles() {
67
65
  }
68
66
  },
69
67
  '&[data-prev-selected]': {
70
- backgroundColor: (0, _tokens.token)('color.background.subtleBrand.resting', _colors.B50),
71
- color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N600)
68
+ backgroundColor: "var(--ds-background-subtleBrand-resting, ".concat(_colors.B50, ")"),
69
+ color: "var(--ds-text-mediumEmphasis, ".concat(_colors.N600, ")")
72
70
  },
73
71
  '&[data-selected]': {
74
72
  backgroundColor: selectedBackground[mode],
75
73
  color: textSelected[mode]
76
74
  },
77
75
  '&[data-disabled]': {
78
- color: (0, _tokens.token)('color.text.disabled', _colors.N40),
76
+ color: "var(--ds-text-disabled, ".concat(_colors.N40, ")"),
79
77
  cursor: 'not-allowed'
80
78
  },
81
79
  '&[data-focused]': {
@@ -86,22 +84,22 @@ var dateCellStyles = function dateCellStyles() {
86
84
  color: textColor[mode]
87
85
  },
88
86
  '&:active': {
89
- backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.pressed', _colors.B50),
87
+ backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(_colors.B50, ")"),
90
88
  color: textColor[mode]
91
89
  },
92
90
  '&[data-selected]:hover': {
93
91
  color: textColorMedium
94
92
  },
95
93
  '&[data-prev-selected]:hover': {
96
- backgroundColor: (0, _tokens.token)('color.background.subtleBrand.resting', _colors.B50),
94
+ backgroundColor: "var(--ds-background-subtleBrand-resting, ".concat(_colors.B50, ")"),
97
95
  color: textColorMedium
98
96
  },
99
97
  '&[data-sibling]:hover': {
100
- color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N200)
98
+ color: "var(--ds-text-lowEmphasis, ".concat(_colors.N200, ")")
101
99
  },
102
100
  '&[data-disabled]:hover': {
103
101
  backgroundColor: 'transparent',
104
- color: (0, _tokens.token)('color.text.disabled', _colors.N40)
102
+ color: "var(--ds-text-disabled, ".concat(_colors.N40, ")")
105
103
  }
106
104
  };
107
105
  };
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/calendar",
3
- "version": "12.1.1",
3
+ "version": "12.1.5",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/calendar.js CHANGED
@@ -7,7 +7,7 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatfor
7
7
  import noop from '@atlaskit/ds-lib/noop';
8
8
  import { DN600, N0, N700, N900 } from '@atlaskit/theme/colors';
9
9
  import GlobalTheme from '@atlaskit/theme/components';
10
- import { token } from '@atlaskit/tokens';
10
+ import VisuallyHidden from '@atlaskit/visually-hidden';
11
11
  import HeadingComponent from './internal/components/heading';
12
12
  import WeekDaysComponent from './internal/components/week-days';
13
13
  import WeekHeaderComponent from './internal/components/week-header';
@@ -24,8 +24,8 @@ const lightWrapperStyles = css({
24
24
  display: 'inline-block',
25
25
  boxSizing: 'border-box',
26
26
  padding: 16,
27
- backgroundColor: token('color.background.overlay', N0),
28
- color: token('color.text.highEmphasis', N900),
27
+ backgroundColor: `var(--ds-background-overlay, ${N0})`,
28
+ color: `var(--ds-text-highEmphasis, ${N900})`,
29
29
  outline: 'none',
30
30
  userSelect: 'none'
31
31
  });
@@ -33,8 +33,8 @@ const darkWrapperStyles = css({
33
33
  display: 'inline-block',
34
34
  boxSizing: 'border-box',
35
35
  padding: 16,
36
- backgroundColor: token('color.background.overlay', N700),
37
- color: token('color.text.highEmphasis', DN600),
36
+ backgroundColor: `var(--ds-background-overlay, ${N700})`,
37
+ color: `var(--ds-text-highEmphasis, ${DN600})`,
38
38
  outline: 'none',
39
39
  userSelect: 'none'
40
40
  });
@@ -45,20 +45,10 @@ const gridsContainerStyles = css({
45
45
  marginBottom: 5,
46
46
  textAlign: 'center'
47
47
  });
48
- const announcerStyles = css({
49
- width: 1,
50
- height: 1,
51
- margin: -1,
52
- padding: 0,
53
- position: 'absolute',
54
- border: 0,
55
- clip: 'rect(0 0 0 0)',
56
- overflow: 'hidden'
57
- });
58
48
  const analyticsAttributes = {
59
49
  componentName: 'calendar',
60
50
  packageName: "@atlaskit/calendar",
61
- packageVersion: "12.1.1"
51
+ packageVersion: "12.1.5"
62
52
  };
63
53
  const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
64
54
  day,
@@ -184,12 +174,11 @@ const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
184
174
  role: "presentation",
185
175
  "data-testid": testId && `${testId}--container`,
186
176
  ref: ref
187
- }, jsx("div", {
188
- css: announcerStyles,
177
+ }, jsx(VisuallyHidden, null, jsx("span", {
189
178
  id: announceId,
190
179
  "aria-live": "assertive",
191
180
  "aria-relevant": "text"
192
- }, announcerDate), jsx("div", {
181
+ }, announcerDate)), jsx("div", {
193
182
  css: !mode || mode === 'light' ? lightWrapperStyles : darkWrapperStyles,
194
183
  "aria-describedby": announceId,
195
184
  "aria-label": "calendar",
package/dist/es2019/internal/components/date.js CHANGED
@@ -53,6 +53,7 @@ const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
53
53
  css: dateCellStyles,
54
54
  "aria-selected": isSelected ? 'true' : 'false',
55
55
  tabIndex: isSelected ? 0 : -1,
56
+ type: "button",
56
57
  role: "gridcell",
57
58
  onClick: handleClick,
58
59
  ref: ref,
package/dist/es2019/internal/components/heading.js CHANGED
@@ -5,15 +5,14 @@ import Button from '@atlaskit/button/standard-button';
5
5
  import ArrowleftIcon from '@atlaskit/icon/glyph/chevron-left-large';
6
6
  import ArrowrightIcon from '@atlaskit/icon/glyph/chevron-right-large';
7
7
  import { DN800, N70, N800 } from '@atlaskit/theme/colors';
8
- import { token } from '@atlaskit/tokens';
9
8
  const headingColor = {
10
- light: token('color.text.highEmphasis', N800),
11
- dark: token('color.text.highEmphasis', DN800)
9
+ light: `var(--ds-text-highEmphasis, ${N800})`,
10
+ dark: `var(--ds-text-highEmphasis, ${DN800})`
12
11
  };
13
12
  const headingStyles = css({
14
13
  display: 'flex',
15
14
  padding: '0 0 13px 0',
16
- color: token('color.text.highEmphasis', N800),
15
+ color: `var(--ds-text-highEmphasis, ${N800})`,
17
16
  fontWeight: 'bold'
18
17
  });
19
18
 
@@ -51,7 +50,7 @@ const Heading = /*#__PURE__*/memo(function Heading({
51
50
  iconBefore: jsx(ArrowleftIcon, {
52
51
  label: "Last month",
53
52
  size: "medium",
54
- primaryColor: token('color.text.lowEmphasis', N70)
53
+ primaryColor: `var(--ds-text-lowEmphasis, ${N70})`
55
54
  })
56
55
  }), jsx("div", {
57
56
  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
@@ -67,7 +66,7 @@ const Heading = /*#__PURE__*/memo(function Heading({
67
66
  iconBefore: jsx(ArrowrightIcon, {
68
67
  label: "Next month",
69
68
  size: "medium",
70
- primaryColor: token('color.text.lowEmphasis', N70)
69
+ primaryColor: `var(--ds-text-lowEmphasis, ${N70})`
71
70
  })
72
71
  }));
73
72
  });
package/dist/es2019/internal/components/week-header.js CHANGED
@@ -2,7 +2,6 @@
2
2
  import { memo } from 'react';
3
3
  import { css, jsx } from '@emotion/core';
4
4
  import { N200 } from '@atlaskit/theme/colors';
5
- import { token } from '@atlaskit/tokens';
6
5
  const dayNameGridStyles = css({
7
6
  display: 'grid',
8
7
  gridTemplateColumns: 'repeat(7, 1fr)',
@@ -13,7 +12,7 @@ const dayNameCellStyles = css({
13
12
  minWidth: 40,
14
13
  padding: '8px 8px',
15
14
  border: 0,
16
- color: token('color.text.mediumEmphasis', N200),
15
+ color: `var(--ds-text-mediumEmphasis, ${N200})`,
17
16
  fontSize: 11,
18
17
  fontWeight: 700,
19
18
  textAlign: 'center',
package/dist/es2019/internal/styles/date.js CHANGED
@@ -1,29 +1,28 @@
1
1
  import { B100, B400, B50, B75, DN600, N0, N200, N30, N40, N500, N600, N700, N800, N900 } from '@atlaskit/theme/colors';
2
- import { token } from '@atlaskit/tokens';
3
2
  const textColor = {
4
- light: token('color.text.highEmphasis', N900),
5
- dark: token('color.text.highEmphasis', DN600)
3
+ light: `var(--ds-text-highEmphasis, ${N900})`,
4
+ dark: `var(--ds-text-highEmphasis, ${DN600})`
6
5
  };
7
- const textColorMedium = token('color.text.mediumEmphasis', N600);
6
+ const textColorMedium = `var(--ds-text-mediumEmphasis, ${N600})`;
8
7
  const todayColor = {
9
- light: token('color.text.selected', B400),
10
- dark: token('color.text.selected', B100)
8
+ light: `var(--ds-text-selected, ${B400})`,
9
+ dark: `var(--ds-text-selected, ${B100})`
11
10
  };
12
11
  const hoverBackground = {
13
- light: token('color.background.transparentNeutral.hover', N30),
14
- dark: token('color.background.transparentNeutral.hover', N800)
12
+ light: `var(--ds-background-transparentNeutral-hover, ${N30})`,
13
+ dark: `var(--ds-background-transparentNeutral-hover, ${N800})`
15
14
  };
16
15
  const textSelected = {
17
- light: token('color.text.selected', N0),
18
- dark: token('color.text.selected', N700)
16
+ light: `var(--ds-text-selected, ${N0})`,
17
+ dark: `var(--ds-text-selected, ${N700})`
19
18
  };
20
19
  const selectedBackground = {
21
- light: token('color.background.selected.resting', N500),
22
- dark: token('color.background.selected.resting', N0)
20
+ light: `var(--ds-background-selected-resting, ${N500})`,
21
+ dark: `var(--ds-background-selected-resting, ${N0})`
23
22
  };
24
23
  const borderColorFocused = {
25
- light: token('color.border.focus', B100),
26
- dark: token('color.border.focus', B75)
24
+ light: `var(--ds-border-focus, ${B100})`,
25
+ dark: `var(--ds-border-focus, ${B75})`
27
26
  };
28
27
  export const dateCellStyles = (mode = 'light') => ({
29
28
  all: 'unset',
@@ -38,7 +37,7 @@ export const dateCellStyles = (mode = 'light') => ({
38
37
  fontSize: 14,
39
38
  textAlign: 'center',
40
39
  '&[data-sibling]': {
41
- color: token('color.text.lowEmphasis', N200)
40
+ color: `var(--ds-text-lowEmphasis, ${N200})`
42
41
  },
43
42
  '&[data-today]': {
44
43
  color: todayColor[mode],
@@ -55,15 +54,15 @@ export const dateCellStyles = (mode = 'light') => ({
55
54
  }
56
55
  },
57
56
  '&[data-prev-selected]': {
58
- backgroundColor: token('color.background.subtleBrand.resting', B50),
59
- color: token('color.text.mediumEmphasis', N600)
57
+ backgroundColor: `var(--ds-background-subtleBrand-resting, ${B50})`,
58
+ color: `var(--ds-text-mediumEmphasis, ${N600})`
60
59
  },
61
60
  '&[data-selected]': {
62
61
  backgroundColor: selectedBackground[mode],
63
62
  color: textSelected[mode]
64
63
  },
65
64
  '&[data-disabled]': {
66
- color: token('color.text.disabled', N40),
65
+ color: `var(--ds-text-disabled, ${N40})`,
67
66
  cursor: 'not-allowed'
68
67
  },
69
68
  '&[data-focused]': {
@@ -74,21 +73,21 @@ export const dateCellStyles = (mode = 'light') => ({
74
73
  color: textColor[mode]
75
74
  },
76
75
  '&:active': {
77
- backgroundColor: token('color.background.transparentNeutral.pressed', B50),
76
+ backgroundColor: `var(--ds-background-transparentNeutral-pressed, ${B50})`,
78
77
  color: textColor[mode]
79
78
  },
80
79
  '&[data-selected]:hover': {
81
80
  color: textColorMedium
82
81
  },
83
82
  '&[data-prev-selected]:hover': {
84
- backgroundColor: token('color.background.subtleBrand.resting', B50),
83
+ backgroundColor: `var(--ds-background-subtleBrand-resting, ${B50})`,
85
84
  color: textColorMedium
86
85
  },
87
86
  '&[data-sibling]:hover': {
88
- color: token('color.text.lowEmphasis', N200)
87
+ color: `var(--ds-text-lowEmphasis, ${N200})`
89
88
  },
90
89
  '&[data-disabled]:hover': {
91
90
  backgroundColor: 'transparent',
92
- color: token('color.text.disabled', N40)
91
+ color: `var(--ds-text-disabled, ${N40})`
93
92
  }
94
93
  });
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/calendar",
3
- "version": "12.1.1",
3
+ "version": "12.1.5",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/calendar.js CHANGED
@@ -13,7 +13,7 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatfor
13
13
  import noop from '@atlaskit/ds-lib/noop';
14
14
  import { DN600, N0, N700, N900 } from '@atlaskit/theme/colors';
15
15
  import GlobalTheme from '@atlaskit/theme/components';
16
- import { token } from '@atlaskit/tokens';
16
+ import VisuallyHidden from '@atlaskit/visually-hidden';
17
17
  import HeadingComponent from './internal/components/heading';
18
18
  import WeekDaysComponent from './internal/components/week-days';
19
19
  import WeekHeaderComponent from './internal/components/week-header';
@@ -30,8 +30,8 @@ var lightWrapperStyles = css({
30
30
  display: 'inline-block',
31
31
  boxSizing: 'border-box',
32
32
  padding: 16,
33
- backgroundColor: token('color.background.overlay', N0),
34
- color: token('color.text.highEmphasis', N900),
33
+ backgroundColor: "var(--ds-background-overlay, ".concat(N0, ")"),
34
+ color: "var(--ds-text-highEmphasis, ".concat(N900, ")"),
35
35
  outline: 'none',
36
36
  userSelect: 'none'
37
37
  });
@@ -39,8 +39,8 @@ var darkWrapperStyles = css({
39
39
  display: 'inline-block',
40
40
  boxSizing: 'border-box',
41
41
  padding: 16,
42
- backgroundColor: token('color.background.overlay', N700),
43
- color: token('color.text.highEmphasis', DN600),
42
+ backgroundColor: "var(--ds-background-overlay, ".concat(N700, ")"),
43
+ color: "var(--ds-text-highEmphasis, ".concat(DN600, ")"),
44
44
  outline: 'none',
45
45
  userSelect: 'none'
46
46
  });
@@ -51,20 +51,10 @@ var gridsContainerStyles = css({
51
51
  marginBottom: 5,
52
52
  textAlign: 'center'
53
53
  });
54
- var announcerStyles = css({
55
- width: 1,
56
- height: 1,
57
- margin: -1,
58
- padding: 0,
59
- position: 'absolute',
60
- border: 0,
61
- clip: 'rect(0 0 0 0)',
62
- overflow: 'hidden'
63
- });
64
54
  var analyticsAttributes = {
65
55
  componentName: 'calendar',
66
56
  packageName: "@atlaskit/calendar",
67
- packageVersion: "12.1.1"
57
+ packageVersion: "12.1.5"
68
58
  };
69
59
  var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
70
60
  var day = _ref.day,
@@ -215,12 +205,11 @@ var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
215
205
  role: "presentation",
216
206
  "data-testid": testId && "".concat(testId, "--container"),
217
207
  ref: ref
218
- }, jsx("div", {
219
- css: announcerStyles,
208
+ }, jsx(VisuallyHidden, null, jsx("span", {
220
209
  id: announceId,
221
210
  "aria-live": "assertive",
222
211
  "aria-relevant": "text"
223
- }, announcerDate), jsx("div", {
212
+ }, announcerDate)), jsx("div", {
224
213
  css: !mode || mode === 'light' ? lightWrapperStyles : darkWrapperStyles,
225
214
  "aria-describedby": announceId,
226
215
  "aria-label": "calendar",
package/dist/esm/internal/components/date.js CHANGED
@@ -60,6 +60,7 @@ var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref, ref) {
60
60
  css: dateCellStyles,
61
61
  "aria-selected": isSelected ? 'true' : 'false',
62
62
  tabIndex: isSelected ? 0 : -1,
63
+ type: "button",
63
64
  role: "gridcell",
64
65
  onClick: handleClick,
65
66
  ref: ref,
package/dist/esm/internal/components/heading.js CHANGED
@@ -5,15 +5,14 @@ import Button from '@atlaskit/button/standard-button';
5
5
  import ArrowleftIcon from '@atlaskit/icon/glyph/chevron-left-large';
6
6
  import ArrowrightIcon from '@atlaskit/icon/glyph/chevron-right-large';
7
7
  import { DN800, N70, N800 } from '@atlaskit/theme/colors';
8
- import { token } from '@atlaskit/tokens';
9
8
  var headingColor = {
10
- light: token('color.text.highEmphasis', N800),
11
- dark: token('color.text.highEmphasis', DN800)
9
+ light: "var(--ds-text-highEmphasis, ".concat(N800, ")"),
10
+ dark: "var(--ds-text-highEmphasis, ".concat(DN800, ")")
12
11
  };
13
12
  var headingStyles = css({
14
13
  display: 'flex',
15
14
  padding: '0 0 13px 0',
16
- color: token('color.text.highEmphasis', N800),
15
+ color: "var(--ds-text-highEmphasis, ".concat(N800, ")"),
17
16
  fontWeight: 'bold'
18
17
  });
19
18
 
@@ -55,7 +54,7 @@ var Heading = /*#__PURE__*/memo(function Heading(_ref) {
55
54
  iconBefore: jsx(ArrowleftIcon, {
56
55
  label: "Last month",
57
56
  size: "medium",
58
- primaryColor: token('color.text.lowEmphasis', N70)
57
+ primaryColor: "var(--ds-text-lowEmphasis, ".concat(N70, ")")
59
58
  })
60
59
  }), jsx("div", {
61
60
  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
@@ -71,7 +70,7 @@ var Heading = /*#__PURE__*/memo(function Heading(_ref) {
71
70
  iconBefore: jsx(ArrowrightIcon, {
72
71
  label: "Next month",
73
72
  size: "medium",
74
- primaryColor: token('color.text.lowEmphasis', N70)
73
+ primaryColor: "var(--ds-text-lowEmphasis, ".concat(N70, ")")
75
74
  })
76
75
  }));
77
76
  });
package/dist/esm/internal/components/week-header.js CHANGED
@@ -2,7 +2,6 @@
2
2
  import { memo } from 'react';
3
3
  import { css, jsx } from '@emotion/core';
4
4
  import { N200 } from '@atlaskit/theme/colors';
5
- import { token } from '@atlaskit/tokens';
6
5
  var dayNameGridStyles = css({
7
6
  display: 'grid',
8
7
  gridTemplateColumns: 'repeat(7, 1fr)',
@@ -13,7 +12,7 @@ var dayNameCellStyles = css({
13
12
  minWidth: 40,
14
13
  padding: '8px 8px',
15
14
  border: 0,
16
- color: token('color.text.mediumEmphasis', N200),
15
+ color: "var(--ds-text-mediumEmphasis, ".concat(N200, ")"),
17
16
  fontSize: 11,
18
17
  fontWeight: 700,
19
18
  textAlign: 'center',
package/dist/esm/internal/styles/date.js CHANGED
@@ -1,29 +1,28 @@
1
1
  import { B100, B400, B50, B75, DN600, N0, N200, N30, N40, N500, N600, N700, N800, N900 } from '@atlaskit/theme/colors';
2
- import { token } from '@atlaskit/tokens';
3
2
  var textColor = {
4
- light: token('color.text.highEmphasis', N900),
5
- dark: token('color.text.highEmphasis', DN600)
3
+ light: "var(--ds-text-highEmphasis, ".concat(N900, ")"),
4
+ dark: "var(--ds-text-highEmphasis, ".concat(DN600, ")")
6
5
  };
7
- var textColorMedium = token('color.text.mediumEmphasis', N600);
6
+ var textColorMedium = "var(--ds-text-mediumEmphasis, ".concat(N600, ")");
8
7
  var todayColor = {
9
- light: token('color.text.selected', B400),
10
- dark: token('color.text.selected', B100)
8
+ light: "var(--ds-text-selected, ".concat(B400, ")"),
9
+ dark: "var(--ds-text-selected, ".concat(B100, ")")
11
10
  };
12
11
  var hoverBackground = {
13
- light: token('color.background.transparentNeutral.hover', N30),
14
- dark: token('color.background.transparentNeutral.hover', N800)
12
+ light: "var(--ds-background-transparentNeutral-hover, ".concat(N30, ")"),
13
+ dark: "var(--ds-background-transparentNeutral-hover, ".concat(N800, ")")
15
14
  };
16
15
  var textSelected = {
17
- light: token('color.text.selected', N0),
18
- dark: token('color.text.selected', N700)
16
+ light: "var(--ds-text-selected, ".concat(N0, ")"),
17
+ dark: "var(--ds-text-selected, ".concat(N700, ")")
19
18
  };
20
19
  var selectedBackground = {
21
- light: token('color.background.selected.resting', N500),
22
- dark: token('color.background.selected.resting', N0)
20
+ light: "var(--ds-background-selected-resting, ".concat(N500, ")"),
21
+ dark: "var(--ds-background-selected-resting, ".concat(N0, ")")
23
22
  };
24
23
  var borderColorFocused = {
25
- light: token('color.border.focus', B100),
26
- dark: token('color.border.focus', B75)
24
+ light: "var(--ds-border-focus, ".concat(B100, ")"),
25
+ dark: "var(--ds-border-focus, ".concat(B75, ")")
27
26
  };
28
27
  export var dateCellStyles = function dateCellStyles() {
29
28
  var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
@@ -40,7 +39,7 @@ export var dateCellStyles = function dateCellStyles() {
40
39
  fontSize: 14,
41
40
  textAlign: 'center',
42
41
  '&[data-sibling]': {
43
- color: token('color.text.lowEmphasis', N200)
42
+ color: "var(--ds-text-lowEmphasis, ".concat(N200, ")")
44
43
  },
45
44
  '&[data-today]': {
46
45
  color: todayColor[mode],
@@ -57,15 +56,15 @@ export var dateCellStyles = function dateCellStyles() {
57
56
  }
58
57
  },
59
58
  '&[data-prev-selected]': {
60
- backgroundColor: token('color.background.subtleBrand.resting', B50),
61
- color: token('color.text.mediumEmphasis', N600)
59
+ backgroundColor: "var(--ds-background-subtleBrand-resting, ".concat(B50, ")"),
60
+ color: "var(--ds-text-mediumEmphasis, ".concat(N600, ")")
62
61
  },
63
62
  '&[data-selected]': {
64
63
  backgroundColor: selectedBackground[mode],
65
64
  color: textSelected[mode]
66
65
  },
67
66
  '&[data-disabled]': {
68
- color: token('color.text.disabled', N40),
67
+ color: "var(--ds-text-disabled, ".concat(N40, ")"),
69
68
  cursor: 'not-allowed'
70
69
  },
71
70
  '&[data-focused]': {
@@ -76,22 +75,22 @@ export var dateCellStyles = function dateCellStyles() {
76
75
  color: textColor[mode]
77
76
  },
78
77
  '&:active': {
79
- backgroundColor: token('color.background.transparentNeutral.pressed', B50),
78
+ backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(B50, ")"),
80
79
  color: textColor[mode]
81
80
  },
82
81
  '&[data-selected]:hover': {
83
82
  color: textColorMedium
84
83
  },
85
84
  '&[data-prev-selected]:hover': {
86
- backgroundColor: token('color.background.subtleBrand.resting', B50),
85
+ backgroundColor: "var(--ds-background-subtleBrand-resting, ".concat(B50, ")"),
87
86
  color: textColorMedium
88
87
  },
89
88
  '&[data-sibling]:hover': {
90
- color: token('color.text.lowEmphasis', N200)
89
+ color: "var(--ds-text-lowEmphasis, ".concat(N200, ")")
91
90
  },
92
91
  '&[data-disabled]:hover': {
93
92
  backgroundColor: 'transparent',
94
- color: token('color.text.disabled', N40)
93
+ color: "var(--ds-text-disabled, ".concat(N40, ")")
95
94
  }
96
95
  };
97
96
  };
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/calendar",
3
- "version": "12.1.1",
3
+ "version": "12.1.5",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/calendar",
3
- "version": "12.1.1",
3
+ "version": "12.1.5",
4
4
  "description": "A React component for displaying a calendar.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -26,10 +26,11 @@
26
26
  "@atlaskit/analytics-next": "^8.2.0",
27
27
  "@atlaskit/button": "^16.1.0",
28
28
  "@atlaskit/ds-lib": "^1.3.0",
29
- "@atlaskit/icon": "^21.7.0",
29
+ "@atlaskit/icon": "^21.9.0",
30
30
  "@atlaskit/locale": "^2.3.0",
31
- "@atlaskit/theme": "^11.4.0",
32
- "@atlaskit/tokens": "^0.2.0",
31
+ "@atlaskit/theme": "^12.0.0",
32
+ "@atlaskit/tokens": "^0.4.0",
33
+ "@atlaskit/visually-hidden": "^0.1.1",
33
34
  "@babel/runtime": "^7.0.0",
34
35
  "@emotion/core": "^10.0.9",
35
36
  "date-fns": "^2.17.0",
@@ -65,7 +66,10 @@
65
66
  "analytics": "analytics-next",
66
67
  "theming": "tokens",
67
68
  "deprecation": "no-deprecated-imports",
68
- "styling": "emotion"
69
+ "styling": [
70
+ "static",
71
+ "emotion"
72
+ ]
69
73
  }
70
74
  },
71
75
  "af:exports": {