@atlaskit/calendar 12.1.4 → 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 (17) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/calendar.js +5 -7
  3. package/dist/cjs/internal/components/heading.js +5 -7
  4. package/dist/cjs/internal/components/week-header.js +1 -3
  5. package/dist/cjs/internal/styles/date.js +21 -23
  6. package/dist/cjs/version.json +1 -1
  7. package/dist/es2019/calendar.js +5 -6
  8. package/dist/es2019/internal/components/heading.js +5 -6
  9. package/dist/es2019/internal/components/week-header.js +1 -2
  10. package/dist/es2019/internal/styles/date.js +21 -22
  11. package/dist/es2019/version.json +1 -1
  12. package/dist/esm/calendar.js +5 -6
  13. package/dist/esm/internal/components/heading.js +5 -6
  14. package/dist/esm/internal/components/week-header.js +1 -2
  15. package/dist/esm/internal/styles/date.js +21 -22
  16. package/dist/esm/version.json +1 -1
  17. package/package.json +6 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
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
+
3
10
  ## 12.1.4
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/calendar.js CHANGED
@@ -25,8 +25,6 @@ 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");
29
-
30
28
  var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
31
29
 
32
30
  var _heading = _interopRequireDefault(require("./internal/components/heading"));
@@ -61,8 +59,8 @@ var lightWrapperStyles = (0, _core.css)({
61
59
  display: 'inline-block',
62
60
  boxSizing: 'border-box',
63
61
  padding: 16,
64
- backgroundColor: (0, _tokens.token)('color.background.overlay', _colors.N0),
65
- 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, ")"),
66
64
  outline: 'none',
67
65
  userSelect: 'none'
68
66
  });
@@ -70,8 +68,8 @@ var darkWrapperStyles = (0, _core.css)({
70
68
  display: 'inline-block',
71
69
  boxSizing: 'border-box',
72
70
  padding: 16,
73
- backgroundColor: (0, _tokens.token)('color.background.overlay', _colors.N700),
74
- 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, ")"),
75
73
  outline: 'none',
76
74
  userSelect: 'none'
77
75
  });
@@ -85,7 +83,7 @@ var gridsContainerStyles = (0, _core.css)({
85
83
  var analyticsAttributes = {
86
84
  componentName: 'calendar',
87
85
  packageName: "@atlaskit/calendar",
88
- packageVersion: "12.1.4"
86
+ packageVersion: "12.1.5"
89
87
  };
90
88
  var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
91
89
  var day = _ref.day,
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.4",
3
+ "version": "12.1.5",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/calendar.js CHANGED
@@ -7,7 +7,6 @@ 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';
11
10
  import VisuallyHidden from '@atlaskit/visually-hidden';
12
11
  import HeadingComponent from './internal/components/heading';
13
12
  import WeekDaysComponent from './internal/components/week-days';
@@ -25,8 +24,8 @@ const lightWrapperStyles = css({
25
24
  display: 'inline-block',
26
25
  boxSizing: 'border-box',
27
26
  padding: 16,
28
- backgroundColor: token('color.background.overlay', N0),
29
- color: token('color.text.highEmphasis', N900),
27
+ backgroundColor: `var(--ds-background-overlay, ${N0})`,
28
+ color: `var(--ds-text-highEmphasis, ${N900})`,
30
29
  outline: 'none',
31
30
  userSelect: 'none'
32
31
  });
@@ -34,8 +33,8 @@ const darkWrapperStyles = css({
34
33
  display: 'inline-block',
35
34
  boxSizing: 'border-box',
36
35
  padding: 16,
37
- backgroundColor: token('color.background.overlay', N700),
38
- color: token('color.text.highEmphasis', DN600),
36
+ backgroundColor: `var(--ds-background-overlay, ${N700})`,
37
+ color: `var(--ds-text-highEmphasis, ${DN600})`,
39
38
  outline: 'none',
40
39
  userSelect: 'none'
41
40
  });
@@ -49,7 +48,7 @@ const gridsContainerStyles = css({
49
48
  const analyticsAttributes = {
50
49
  componentName: 'calendar',
51
50
  packageName: "@atlaskit/calendar",
52
- packageVersion: "12.1.4"
51
+ packageVersion: "12.1.5"
53
52
  };
54
53
  const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
55
54
  day,
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.4",
3
+ "version": "12.1.5",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/calendar.js CHANGED
@@ -13,7 +13,6 @@ 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';
17
16
  import VisuallyHidden from '@atlaskit/visually-hidden';
18
17
  import HeadingComponent from './internal/components/heading';
19
18
  import WeekDaysComponent from './internal/components/week-days';
@@ -31,8 +30,8 @@ var lightWrapperStyles = css({
31
30
  display: 'inline-block',
32
31
  boxSizing: 'border-box',
33
32
  padding: 16,
34
- backgroundColor: token('color.background.overlay', N0),
35
- color: token('color.text.highEmphasis', N900),
33
+ backgroundColor: "var(--ds-background-overlay, ".concat(N0, ")"),
34
+ color: "var(--ds-text-highEmphasis, ".concat(N900, ")"),
36
35
  outline: 'none',
37
36
  userSelect: 'none'
38
37
  });
@@ -40,8 +39,8 @@ var darkWrapperStyles = css({
40
39
  display: 'inline-block',
41
40
  boxSizing: 'border-box',
42
41
  padding: 16,
43
- backgroundColor: token('color.background.overlay', N700),
44
- color: token('color.text.highEmphasis', DN600),
42
+ backgroundColor: "var(--ds-background-overlay, ".concat(N700, ")"),
43
+ color: "var(--ds-text-highEmphasis, ".concat(DN600, ")"),
45
44
  outline: 'none',
46
45
  userSelect: 'none'
47
46
  });
@@ -55,7 +54,7 @@ var gridsContainerStyles = css({
55
54
  var analyticsAttributes = {
56
55
  componentName: 'calendar',
57
56
  packageName: "@atlaskit/calendar",
58
- packageVersion: "12.1.4"
57
+ packageVersion: "12.1.5"
59
58
  };
60
59
  var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
61
60
  var day = _ref.day,
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.4",
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.4",
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/"
@@ -29,7 +29,7 @@
29
29
  "@atlaskit/icon": "^21.9.0",
30
30
  "@atlaskit/locale": "^2.3.0",
31
31
  "@atlaskit/theme": "^12.0.0",
32
- "@atlaskit/tokens": "^0.3.0",
32
+ "@atlaskit/tokens": "^0.4.0",
33
33
  "@atlaskit/visually-hidden": "^0.1.1",
34
34
  "@babel/runtime": "^7.0.0",
35
35
  "@emotion/core": "^10.0.9",
@@ -66,7 +66,10 @@
66
66
  "analytics": "analytics-next",
67
67
  "theming": "tokens",
68
68
  "deprecation": "no-deprecated-imports",
69
- "styling": "emotion"
69
+ "styling": [
70
+ "static",
71
+ "emotion"
72
+ ]
70
73
  }
71
74
  },
72
75
  "af:exports": {