@atlaskit/calendar 12.1.6 → 12.1.9

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 +19 -0
  2. package/dist/cjs/calendar.js +5 -5
  3. package/dist/cjs/internal/components/heading.js +5 -5
  4. package/dist/cjs/internal/components/week-header.js +1 -1
  5. package/dist/cjs/internal/styles/date.js +19 -19
  6. package/dist/cjs/version.json +1 -1
  7. package/dist/es2019/calendar.js +5 -5
  8. package/dist/es2019/internal/components/heading.js +5 -5
  9. package/dist/es2019/internal/components/week-header.js +1 -1
  10. package/dist/es2019/internal/styles/date.js +19 -19
  11. package/dist/es2019/version.json +1 -1
  12. package/dist/esm/calendar.js +5 -5
  13. package/dist/esm/internal/components/heading.js +5 -5
  14. package/dist/esm/internal/components/week-header.js +1 -1
  15. package/dist/esm/internal/styles/date.js +19 -19
  16. package/dist/esm/version.json +1 -1
  17. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @atlaskit/calendar
2
2
 
3
+ ## 12.1.9
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 12.1.8
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 12.1.7
16
+
17
+ ### Patch Changes
18
+
19
+ - [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
20
+ - Updated dependencies
21
+
3
22
  ## 12.1.6
4
23
 
5
24
  ### Patch Changes
package/dist/cjs/calendar.js CHANGED
@@ -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: "var(--ds-background-overlay, ".concat(_colors.N0, ")"),
63
- color: "var(--ds-text-highEmphasis, ".concat(_colors.N900, ")"),
62
+ backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
63
+ color: "var(--ds-text, ".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: "var(--ds-background-overlay, ".concat(_colors.N700, ")"),
72
- color: "var(--ds-text-highEmphasis, ".concat(_colors.DN600, ")"),
71
+ backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N700, ")"),
72
+ color: "var(--ds-text, ".concat(_colors.DN600, ")"),
73
73
  outline: 'none',
74
74
  userSelect: 'none'
75
75
  });
@@ -83,7 +83,7 @@ var gridsContainerStyles = (0, _core.css)({
83
83
  var analyticsAttributes = {
84
84
  componentName: 'calendar',
85
85
  packageName: "@atlaskit/calendar",
86
- packageVersion: "12.1.6"
86
+ packageVersion: "12.1.9"
87
87
  };
88
88
  var CalendarWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
89
89
  var day = _ref.day,
package/dist/cjs/internal/components/heading.js CHANGED
@@ -21,13 +21,13 @@ var _colors = require("@atlaskit/theme/colors");
21
21
 
22
22
  /** @jsx jsx */
23
23
  var headingColor = {
24
- light: "var(--ds-text-highEmphasis, ".concat(_colors.N800, ")"),
25
- dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN800, ")")
24
+ light: "var(--ds-text, ".concat(_colors.N800, ")"),
25
+ dark: "var(--ds-text, ".concat(_colors.DN800, ")")
26
26
  };
27
27
  var headingStyles = (0, _core.css)({
28
28
  display: 'flex',
29
29
  padding: '0 0 13px 0',
30
- color: "var(--ds-text-highEmphasis, ".concat(_colors.N800, ")"),
30
+ color: "var(--ds-text, ".concat(_colors.N800, ")"),
31
31
  fontWeight: 'bold'
32
32
  });
33
33
 
@@ -69,7 +69,7 @@ var Heading = /*#__PURE__*/(0, _react.memo)(function Heading(_ref) {
69
69
  iconBefore: (0, _core.jsx)(_chevronLeftLarge.default, {
70
70
  label: "Last month",
71
71
  size: "medium",
72
- primaryColor: "var(--ds-text-lowEmphasis, ".concat(_colors.N70, ")")
72
+ primaryColor: "var(--ds-text-subtlest, ".concat(_colors.N70, ")")
73
73
  })
74
74
  }), (0, _core.jsx)("div", {
75
75
  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
@@ -85,7 +85,7 @@ var Heading = /*#__PURE__*/(0, _react.memo)(function Heading(_ref) {
85
85
  iconBefore: (0, _core.jsx)(_chevronRightLarge.default, {
86
86
  label: "Next month",
87
87
  size: "medium",
88
- primaryColor: "var(--ds-text-lowEmphasis, ".concat(_colors.N70, ")")
88
+ primaryColor: "var(--ds-text-subtlest, ".concat(_colors.N70, ")")
89
89
  })
90
90
  }));
91
91
  });
package/dist/cjs/internal/components/week-header.js CHANGED
@@ -22,7 +22,7 @@ var dayNameCellStyles = (0, _core.css)({
22
22
  minWidth: 40,
23
23
  padding: '8px 8px',
24
24
  border: 0,
25
- color: "var(--ds-text-mediumEmphasis, ".concat(_colors.N200, ")"),
25
+ color: "var(--ds-text-subtle, ".concat(_colors.N200, ")"),
26
26
  fontSize: 11,
27
27
  fontWeight: 700,
28
28
  textAlign: 'center',
package/dist/cjs/internal/styles/date.js CHANGED
@@ -8,29 +8,29 @@ exports.dateCellStyles = void 0;
8
8
  var _colors = require("@atlaskit/theme/colors");
9
9
 
10
10
  var textColor = {
11
- light: "var(--ds-text-highEmphasis, ".concat(_colors.N900, ")"),
12
- dark: "var(--ds-text-highEmphasis, ".concat(_colors.DN600, ")")
11
+ light: "var(--ds-text, ".concat(_colors.N900, ")"),
12
+ dark: "var(--ds-text, ".concat(_colors.DN600, ")")
13
13
  };
14
- var textColorMedium = "var(--ds-text-mediumEmphasis, ".concat(_colors.N600, ")");
14
+ var textColorMedium = "var(--ds-text-subtle, ".concat(_colors.N600, ")");
15
15
  var todayColor = {
16
- light: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
17
- dark: "var(--ds-text-selected, ".concat(_colors.B100, ")")
16
+ light: "var(--ds-text-brand, ".concat(_colors.B400, ")"),
17
+ dark: "var(--ds-text-brand, ".concat(_colors.B100, ")")
18
18
  };
19
19
  var hoverBackground = {
20
- light: "var(--ds-background-transparentNeutral-hover, ".concat(_colors.N30, ")"),
21
- dark: "var(--ds-background-transparentNeutral-hover, ".concat(_colors.N800, ")")
20
+ light: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"),
21
+ dark: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N800, ")")
22
22
  };
23
23
  var textSelected = {
24
- light: "var(--ds-text-selected, ".concat(_colors.N0, ")"),
25
- dark: "var(--ds-text-selected, ".concat(_colors.N700, ")")
24
+ light: "var(--ds-text-brand, ".concat(_colors.N0, ")"),
25
+ dark: "var(--ds-text-brand, ".concat(_colors.N700, ")")
26
26
  };
27
27
  var selectedBackground = {
28
- light: "var(--ds-background-selected-resting, ".concat(_colors.N500, ")"),
29
- dark: "var(--ds-background-selected-resting, ".concat(_colors.N0, ")")
28
+ light: "var(--ds-background-brand, ".concat(_colors.N500, ")"),
29
+ dark: "var(--ds-background-brand, ".concat(_colors.N0, ")")
30
30
  };
31
31
  var borderColorFocused = {
32
- light: "var(--ds-border-focus, ".concat(_colors.B100, ")"),
33
- dark: "var(--ds-border-focus, ".concat(_colors.B75, ")")
32
+ light: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
33
+ dark: "var(--ds-border-focused, ".concat(_colors.B75, ")")
34
34
  };
35
35
 
36
36
  var dateCellStyles = function dateCellStyles() {
@@ -48,7 +48,7 @@ var dateCellStyles = function dateCellStyles() {
48
48
  fontSize: 14,
49
49
  textAlign: 'center',
50
50
  '&[data-sibling]': {
51
- color: "var(--ds-text-lowEmphasis, ".concat(_colors.N200, ")")
51
+ color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
52
52
  },
53
53
  '&[data-today]': {
54
54
  color: todayColor[mode],
@@ -65,8 +65,8 @@ var dateCellStyles = function dateCellStyles() {
65
65
  }
66
66
  },
67
67
  '&[data-prev-selected]': {
68
- backgroundColor: "var(--ds-background-subtleBrand-resting, ".concat(_colors.B50, ")"),
69
- color: "var(--ds-text-mediumEmphasis, ".concat(_colors.N600, ")")
68
+ backgroundColor: "var(--ds-background-brand, ".concat(_colors.B50, ")"),
69
+ color: "var(--ds-text-subtle, ".concat(_colors.N600, ")")
70
70
  },
71
71
  '&[data-selected]': {
72
72
  backgroundColor: selectedBackground[mode],
@@ -84,18 +84,18 @@ var dateCellStyles = function dateCellStyles() {
84
84
  color: textColor[mode]
85
85
  },
86
86
  '&:active': {
87
- backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(_colors.B50, ")"),
87
+ backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.B50, ")"),
88
88
  color: textColor[mode]
89
89
  },
90
90
  '&[data-selected]:hover': {
91
91
  color: textColorMedium
92
92
  },
93
93
  '&[data-prev-selected]:hover': {
94
- backgroundColor: "var(--ds-background-subtleBrand-resting, ".concat(_colors.B50, ")"),
94
+ backgroundColor: "var(--ds-background-brand, ".concat(_colors.B50, ")"),
95
95
  color: textColorMedium
96
96
  },
97
97
  '&[data-sibling]:hover': {
98
- color: "var(--ds-text-lowEmphasis, ".concat(_colors.N200, ")")
98
+ color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
99
99
  },
100
100
  '&[data-disabled]:hover': {
101
101
  backgroundColor: 'transparent',
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/calendar",
3
- "version": "12.1.6",
3
+ "version": "12.1.9",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/calendar.js CHANGED
@@ -24,8 +24,8 @@ const lightWrapperStyles = css({
24
24
  display: 'inline-block',
25
25
  boxSizing: 'border-box',
26
26
  padding: 16,
27
- backgroundColor: `var(--ds-background-overlay, ${N0})`,
28
- color: `var(--ds-text-highEmphasis, ${N900})`,
27
+ backgroundColor: `var(--ds-surface-overlay, ${N0})`,
28
+ color: `var(--ds-text, ${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: `var(--ds-background-overlay, ${N700})`,
37
- color: `var(--ds-text-highEmphasis, ${DN600})`,
36
+ backgroundColor: `var(--ds-surface-overlay, ${N700})`,
37
+ color: `var(--ds-text, ${DN600})`,
38
38
  outline: 'none',
39
39
  userSelect: 'none'
40
40
  });
@@ -48,7 +48,7 @@ const gridsContainerStyles = css({
48
48
  const analyticsAttributes = {
49
49
  componentName: 'calendar',
50
50
  packageName: "@atlaskit/calendar",
51
- packageVersion: "12.1.6"
51
+ packageVersion: "12.1.9"
52
52
  };
53
53
  const CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar({
54
54
  day,
package/dist/es2019/internal/components/heading.js CHANGED
@@ -6,13 +6,13 @@ 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
8
  const headingColor = {
9
- light: `var(--ds-text-highEmphasis, ${N800})`,
10
- dark: `var(--ds-text-highEmphasis, ${DN800})`
9
+ light: `var(--ds-text, ${N800})`,
10
+ dark: `var(--ds-text, ${DN800})`
11
11
  };
12
12
  const headingStyles = css({
13
13
  display: 'flex',
14
14
  padding: '0 0 13px 0',
15
- color: `var(--ds-text-highEmphasis, ${N800})`,
15
+ color: `var(--ds-text, ${N800})`,
16
16
  fontWeight: 'bold'
17
17
  });
18
18
 
@@ -50,7 +50,7 @@ const Heading = /*#__PURE__*/memo(function Heading({
50
50
  iconBefore: jsx(ArrowleftIcon, {
51
51
  label: "Last month",
52
52
  size: "medium",
53
- primaryColor: `var(--ds-text-lowEmphasis, ${N70})`
53
+ primaryColor: `var(--ds-text-subtlest, ${N70})`
54
54
  })
55
55
  }), jsx("div", {
56
56
  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
@@ -66,7 +66,7 @@ const Heading = /*#__PURE__*/memo(function Heading({
66
66
  iconBefore: jsx(ArrowrightIcon, {
67
67
  label: "Next month",
68
68
  size: "medium",
69
- primaryColor: `var(--ds-text-lowEmphasis, ${N70})`
69
+ primaryColor: `var(--ds-text-subtlest, ${N70})`
70
70
  })
71
71
  }));
72
72
  });
package/dist/es2019/internal/components/week-header.js CHANGED
@@ -12,7 +12,7 @@ const dayNameCellStyles = css({
12
12
  minWidth: 40,
13
13
  padding: '8px 8px',
14
14
  border: 0,
15
- color: `var(--ds-text-mediumEmphasis, ${N200})`,
15
+ color: `var(--ds-text-subtle, ${N200})`,
16
16
  fontSize: 11,
17
17
  fontWeight: 700,
18
18
  textAlign: 'center',
package/dist/es2019/internal/styles/date.js CHANGED
@@ -1,28 +1,28 @@
1
1
  import { B100, B400, B50, B75, DN600, N0, N200, N30, N40, N500, N600, N700, N800, N900 } from '@atlaskit/theme/colors';
2
2
  const textColor = {
3
- light: `var(--ds-text-highEmphasis, ${N900})`,
4
- dark: `var(--ds-text-highEmphasis, ${DN600})`
3
+ light: `var(--ds-text, ${N900})`,
4
+ dark: `var(--ds-text, ${DN600})`
5
5
  };
6
- const textColorMedium = `var(--ds-text-mediumEmphasis, ${N600})`;
6
+ const textColorMedium = `var(--ds-text-subtle, ${N600})`;
7
7
  const todayColor = {
8
- light: `var(--ds-text-selected, ${B400})`,
9
- dark: `var(--ds-text-selected, ${B100})`
8
+ light: `var(--ds-text-brand, ${B400})`,
9
+ dark: `var(--ds-text-brand, ${B100})`
10
10
  };
11
11
  const hoverBackground = {
12
- light: `var(--ds-background-transparentNeutral-hover, ${N30})`,
13
- dark: `var(--ds-background-transparentNeutral-hover, ${N800})`
12
+ light: `var(--ds-background-neutral-subtle-hovered, ${N30})`,
13
+ dark: `var(--ds-background-neutral-subtle-hovered, ${N800})`
14
14
  };
15
15
  const textSelected = {
16
- light: `var(--ds-text-selected, ${N0})`,
17
- dark: `var(--ds-text-selected, ${N700})`
16
+ light: `var(--ds-text-brand, ${N0})`,
17
+ dark: `var(--ds-text-brand, ${N700})`
18
18
  };
19
19
  const selectedBackground = {
20
- light: `var(--ds-background-selected-resting, ${N500})`,
21
- dark: `var(--ds-background-selected-resting, ${N0})`
20
+ light: `var(--ds-background-brand, ${N500})`,
21
+ dark: `var(--ds-background-brand, ${N0})`
22
22
  };
23
23
  const borderColorFocused = {
24
- light: `var(--ds-border-focus, ${B100})`,
25
- dark: `var(--ds-border-focus, ${B75})`
24
+ light: `var(--ds-border-focused, ${B100})`,
25
+ dark: `var(--ds-border-focused, ${B75})`
26
26
  };
27
27
  export const dateCellStyles = (mode = 'light') => ({
28
28
  all: 'unset',
@@ -37,7 +37,7 @@ export const dateCellStyles = (mode = 'light') => ({
37
37
  fontSize: 14,
38
38
  textAlign: 'center',
39
39
  '&[data-sibling]': {
40
- color: `var(--ds-text-lowEmphasis, ${N200})`
40
+ color: `var(--ds-text-subtlest, ${N200})`
41
41
  },
42
42
  '&[data-today]': {
43
43
  color: todayColor[mode],
@@ -54,8 +54,8 @@ export const dateCellStyles = (mode = 'light') => ({
54
54
  }
55
55
  },
56
56
  '&[data-prev-selected]': {
57
- backgroundColor: `var(--ds-background-subtleBrand-resting, ${B50})`,
58
- color: `var(--ds-text-mediumEmphasis, ${N600})`
57
+ backgroundColor: `var(--ds-background-brand, ${B50})`,
58
+ color: `var(--ds-text-subtle, ${N600})`
59
59
  },
60
60
  '&[data-selected]': {
61
61
  backgroundColor: selectedBackground[mode],
@@ -73,18 +73,18 @@ export const dateCellStyles = (mode = 'light') => ({
73
73
  color: textColor[mode]
74
74
  },
75
75
  '&:active': {
76
- backgroundColor: `var(--ds-background-transparentNeutral-pressed, ${B50})`,
76
+ backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${B50})`,
77
77
  color: textColor[mode]
78
78
  },
79
79
  '&[data-selected]:hover': {
80
80
  color: textColorMedium
81
81
  },
82
82
  '&[data-prev-selected]:hover': {
83
- backgroundColor: `var(--ds-background-subtleBrand-resting, ${B50})`,
83
+ backgroundColor: `var(--ds-background-brand, ${B50})`,
84
84
  color: textColorMedium
85
85
  },
86
86
  '&[data-sibling]:hover': {
87
- color: `var(--ds-text-lowEmphasis, ${N200})`
87
+ color: `var(--ds-text-subtlest, ${N200})`
88
88
  },
89
89
  '&[data-disabled]:hover': {
90
90
  backgroundColor: 'transparent',
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/calendar",
3
- "version": "12.1.6",
3
+ "version": "12.1.9",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/calendar.js CHANGED
@@ -30,8 +30,8 @@ var lightWrapperStyles = css({
30
30
  display: 'inline-block',
31
31
  boxSizing: 'border-box',
32
32
  padding: 16,
33
- backgroundColor: "var(--ds-background-overlay, ".concat(N0, ")"),
34
- color: "var(--ds-text-highEmphasis, ".concat(N900, ")"),
33
+ backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
34
+ color: "var(--ds-text, ".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: "var(--ds-background-overlay, ".concat(N700, ")"),
43
- color: "var(--ds-text-highEmphasis, ".concat(DN600, ")"),
42
+ backgroundColor: "var(--ds-surface-overlay, ".concat(N700, ")"),
43
+ color: "var(--ds-text, ".concat(DN600, ")"),
44
44
  outline: 'none',
45
45
  userSelect: 'none'
46
46
  });
@@ -54,7 +54,7 @@ var gridsContainerStyles = css({
54
54
  var analyticsAttributes = {
55
55
  componentName: 'calendar',
56
56
  packageName: "@atlaskit/calendar",
57
- packageVersion: "12.1.6"
57
+ packageVersion: "12.1.9"
58
58
  };
59
59
  var CalendarWithMode = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
60
60
  var day = _ref.day,
package/dist/esm/internal/components/heading.js CHANGED
@@ -6,13 +6,13 @@ 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
8
  var headingColor = {
9
- light: "var(--ds-text-highEmphasis, ".concat(N800, ")"),
10
- dark: "var(--ds-text-highEmphasis, ".concat(DN800, ")")
9
+ light: "var(--ds-text, ".concat(N800, ")"),
10
+ dark: "var(--ds-text, ".concat(DN800, ")")
11
11
  };
12
12
  var headingStyles = css({
13
13
  display: 'flex',
14
14
  padding: '0 0 13px 0',
15
- color: "var(--ds-text-highEmphasis, ".concat(N800, ")"),
15
+ color: "var(--ds-text, ".concat(N800, ")"),
16
16
  fontWeight: 'bold'
17
17
  });
18
18
 
@@ -54,7 +54,7 @@ var Heading = /*#__PURE__*/memo(function Heading(_ref) {
54
54
  iconBefore: jsx(ArrowleftIcon, {
55
55
  label: "Last month",
56
56
  size: "medium",
57
- primaryColor: "var(--ds-text-lowEmphasis, ".concat(N70, ")")
57
+ primaryColor: "var(--ds-text-subtlest, ".concat(N70, ")")
58
58
  })
59
59
  }), jsx("div", {
60
60
  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
@@ -70,7 +70,7 @@ var Heading = /*#__PURE__*/memo(function Heading(_ref) {
70
70
  iconBefore: jsx(ArrowrightIcon, {
71
71
  label: "Next month",
72
72
  size: "medium",
73
- primaryColor: "var(--ds-text-lowEmphasis, ".concat(N70, ")")
73
+ primaryColor: "var(--ds-text-subtlest, ".concat(N70, ")")
74
74
  })
75
75
  }));
76
76
  });
package/dist/esm/internal/components/week-header.js CHANGED
@@ -12,7 +12,7 @@ var dayNameCellStyles = css({
12
12
  minWidth: 40,
13
13
  padding: '8px 8px',
14
14
  border: 0,
15
- color: "var(--ds-text-mediumEmphasis, ".concat(N200, ")"),
15
+ color: "var(--ds-text-subtle, ".concat(N200, ")"),
16
16
  fontSize: 11,
17
17
  fontWeight: 700,
18
18
  textAlign: 'center',
package/dist/esm/internal/styles/date.js CHANGED
@@ -1,28 +1,28 @@
1
1
  import { B100, B400, B50, B75, DN600, N0, N200, N30, N40, N500, N600, N700, N800, N900 } from '@atlaskit/theme/colors';
2
2
  var textColor = {
3
- light: "var(--ds-text-highEmphasis, ".concat(N900, ")"),
4
- dark: "var(--ds-text-highEmphasis, ".concat(DN600, ")")
3
+ light: "var(--ds-text, ".concat(N900, ")"),
4
+ dark: "var(--ds-text, ".concat(DN600, ")")
5
5
  };
6
- var textColorMedium = "var(--ds-text-mediumEmphasis, ".concat(N600, ")");
6
+ var textColorMedium = "var(--ds-text-subtle, ".concat(N600, ")");
7
7
  var todayColor = {
8
- light: "var(--ds-text-selected, ".concat(B400, ")"),
9
- dark: "var(--ds-text-selected, ".concat(B100, ")")
8
+ light: "var(--ds-text-brand, ".concat(B400, ")"),
9
+ dark: "var(--ds-text-brand, ".concat(B100, ")")
10
10
  };
11
11
  var hoverBackground = {
12
- light: "var(--ds-background-transparentNeutral-hover, ".concat(N30, ")"),
13
- dark: "var(--ds-background-transparentNeutral-hover, ".concat(N800, ")")
12
+ light: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"),
13
+ dark: "var(--ds-background-neutral-subtle-hovered, ".concat(N800, ")")
14
14
  };
15
15
  var textSelected = {
16
- light: "var(--ds-text-selected, ".concat(N0, ")"),
17
- dark: "var(--ds-text-selected, ".concat(N700, ")")
16
+ light: "var(--ds-text-brand, ".concat(N0, ")"),
17
+ dark: "var(--ds-text-brand, ".concat(N700, ")")
18
18
  };
19
19
  var selectedBackground = {
20
- light: "var(--ds-background-selected-resting, ".concat(N500, ")"),
21
- dark: "var(--ds-background-selected-resting, ".concat(N0, ")")
20
+ light: "var(--ds-background-brand, ".concat(N500, ")"),
21
+ dark: "var(--ds-background-brand, ".concat(N0, ")")
22
22
  };
23
23
  var borderColorFocused = {
24
- light: "var(--ds-border-focus, ".concat(B100, ")"),
25
- dark: "var(--ds-border-focus, ".concat(B75, ")")
24
+ light: "var(--ds-border-focused, ".concat(B100, ")"),
25
+ dark: "var(--ds-border-focused, ".concat(B75, ")")
26
26
  };
27
27
  export var dateCellStyles = function dateCellStyles() {
28
28
  var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
@@ -39,7 +39,7 @@ export var dateCellStyles = function dateCellStyles() {
39
39
  fontSize: 14,
40
40
  textAlign: 'center',
41
41
  '&[data-sibling]': {
42
- color: "var(--ds-text-lowEmphasis, ".concat(N200, ")")
42
+ color: "var(--ds-text-subtlest, ".concat(N200, ")")
43
43
  },
44
44
  '&[data-today]': {
45
45
  color: todayColor[mode],
@@ -56,8 +56,8 @@ export var dateCellStyles = function dateCellStyles() {
56
56
  }
57
57
  },
58
58
  '&[data-prev-selected]': {
59
- backgroundColor: "var(--ds-background-subtleBrand-resting, ".concat(B50, ")"),
60
- color: "var(--ds-text-mediumEmphasis, ".concat(N600, ")")
59
+ backgroundColor: "var(--ds-background-brand, ".concat(B50, ")"),
60
+ color: "var(--ds-text-subtle, ".concat(N600, ")")
61
61
  },
62
62
  '&[data-selected]': {
63
63
  backgroundColor: selectedBackground[mode],
@@ -75,18 +75,18 @@ export var dateCellStyles = function dateCellStyles() {
75
75
  color: textColor[mode]
76
76
  },
77
77
  '&:active': {
78
- backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(B50, ")"),
78
+ backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(B50, ")"),
79
79
  color: textColor[mode]
80
80
  },
81
81
  '&[data-selected]:hover': {
82
82
  color: textColorMedium
83
83
  },
84
84
  '&[data-prev-selected]:hover': {
85
- backgroundColor: "var(--ds-background-subtleBrand-resting, ".concat(B50, ")"),
85
+ backgroundColor: "var(--ds-background-brand, ".concat(B50, ")"),
86
86
  color: textColorMedium
87
87
  },
88
88
  '&[data-sibling]:hover': {
89
- color: "var(--ds-text-lowEmphasis, ".concat(N200, ")")
89
+ color: "var(--ds-text-subtlest, ".concat(N200, ")")
90
90
  },
91
91
  '&[data-disabled]:hover': {
92
92
  backgroundColor: 'transparent',
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/calendar",
3
- "version": "12.1.6",
3
+ "version": "12.1.9",
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.6",
3
+ "version": "12.1.9",
4
4
  "description": "A React component for displaying a calendar.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -23,13 +23,13 @@
23
23
  },
24
24
  "dependencies": {
25
25
  "@atlaskit/analytics-next": "^8.2.0",
26
- "@atlaskit/button": "^16.1.0",
27
- "@atlaskit/ds-lib": "^1.3.0",
26
+ "@atlaskit/button": "^16.2.0",
27
+ "@atlaskit/ds-lib": "^1.4.0",
28
28
  "@atlaskit/icon": "^21.10.0",
29
29
  "@atlaskit/locale": "^2.3.0",
30
30
  "@atlaskit/theme": "^12.1.0",
31
- "@atlaskit/tokens": "^0.5.0",
32
- "@atlaskit/visually-hidden": "^0.1.1",
31
+ "@atlaskit/tokens": "^0.7.0",
32
+ "@atlaskit/visually-hidden": "^1.0.0",
33
33
  "@babel/runtime": "^7.0.0",
34
34
  "@emotion/core": "^10.0.9",
35
35
  "date-fns": "^2.17.0",