@atlaskit/task-decision 19.0.0 → 19.0.2

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 (14) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/components/TaskItem.js +6 -4
  3. package/dist/cjs/components/compiled/TaskItem.compiled.css +19 -19
  4. package/dist/cjs/components/compiled/TaskItem.js +8 -18
  5. package/dist/cjs/components/theme.js +18 -19
  6. package/dist/es2019/components/TaskItem.js +6 -4
  7. package/dist/es2019/components/compiled/TaskItem.compiled.css +19 -19
  8. package/dist/es2019/components/compiled/TaskItem.js +7 -7
  9. package/dist/es2019/components/theme.js +18 -20
  10. package/dist/esm/components/TaskItem.js +6 -4
  11. package/dist/esm/components/compiled/TaskItem.compiled.css +19 -19
  12. package/dist/esm/components/compiled/TaskItem.js +8 -19
  13. package/dist/esm/components/theme.js +18 -20
  14. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/task-decision
2
2
 
3
+ ## 19.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#119045](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119045)
8
+ [`47b940a098a8c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/47b940a098a8c) -
9
+ [ux] EDF-2511 - Iconography uplift
10
+
11
+ ## 19.0.1
12
+
13
+ ### Patch Changes
14
+
15
+ - [#116900](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116900)
16
+ [`8ada0df072585`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8ada0df072585) -
17
+ replace custom checkbox with atlaskit checkbox for task
18
+ - Updated dependencies
19
+
3
20
  ## 19.0.0
4
21
 
5
22
  ### Major Changes
package/dist/cjs/components/TaskItem.js CHANGED
@@ -8,7 +8,8 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.default = void 0;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
  var _react2 = require("@emotion/react");
11
- var _checkbox = _interopRequireDefault(require("@atlaskit/icon/glyph/checkbox"));
11
+ var _checkboxChecked = _interopRequireDefault(require("@atlaskit/icon/core/checkbox-checked"));
12
+ var _checkboxUnchecked = _interopRequireDefault(require("@atlaskit/icon/core/checkbox-unchecked"));
12
13
  var _Item = _interopRequireDefault(require("./Item"));
13
14
  var _analyticsNext = require("@atlaskit/analytics-next");
14
15
  var _analytics = require("../analytics");
@@ -90,9 +91,10 @@ var TaskItem = function TaskItem(props) {
90
91
  suppressHydrationWarning: true,
91
92
  onKeyPress: handleOnKeyPress,
92
93
  ref: inputRef
93
- }), (0, _react2.jsx)(_checkbox.default, {
94
- label: "",
95
- isFacadeDisabled: true
94
+ }), isDone ? (0, _react2.jsx)(_checkboxChecked.default, {
95
+ label: ""
96
+ }) : (0, _react2.jsx)(_checkboxUnchecked.default, {
97
+ label: ""
96
98
  }));
97
99
  _react.default.useEffect(function () {
98
100
  if (isFocused && inputRef.current) {
package/dist/cjs/components/compiled/TaskItem.compiled.css CHANGED
@@ -1,12 +1,12 @@
1
1
 
2
2
  ._18a711so>input[type=checkbox]+span>svg rect:first-of-type{transition:stroke .2s ease-in-out}
3
3
  ._1abj1mn3>input[type=checkbox]+span>svg{transition:color .2s ease-in-out,fill .2s ease-in-out}
4
- ._den51ifg>input[type=checkbox]:focus+span:after{border:var(--_18khk6)}
4
+ ._den512j9>input[type=checkbox]:focus+span:after{border:var(--_toyvsf)}
5
5
  ._zh8l1b66>input[type=checkbox]:focus+span:after{border-radius:var(--ds-space-050,4px)}._10cr1ssb>input[type=checkbox]+span>svg{top:50%}
6
- ._12yy12ci>input[type=checkbox]:hover+span>svg{color:var(--_1z08gfx)}
6
+ ._12yy1d5g>input[type=checkbox]:hover+span>svg{color:var(--ds-background-input-hovered,#f7f8f9)}
7
7
  ._13vl73ad>input[type=checkbox][disabled]{cursor:default}
8
8
  ._16jlidpf{flex-grow:0}
9
- ._16npddza>input[type=checkbox]+span>svg rect:first-of-type{stroke:var(--_vnm8xo)}
9
+ ._16np1elr>input[type=checkbox]+span>svg rect:first-of-type{stroke:var(--ds-border-input,#8590a2)}
10
10
  ._1746glyw>input[type=checkbox]{outline-style:none}
11
11
  ._18tob3bt>input[type=checkbox]:focus+span:after{content:""}
12
12
  ._19l51ooe>input[type=checkbox]+span{transform:translate(-50%,-50%)}
@@ -17,57 +17,57 @@
17
17
  ._1h5xidpf>input[type=checkbox]{margin-top:0}
18
18
  ._1l0615vq>input[type=checkbox]+span>svg{overflow-y:hidden}
19
19
  ._1mh7kb7n>input[type=checkbox]{z-index:1}
20
- ._1miyddza>input[type=checkbox]:hover+span>svg rect:first-of-type{stroke:var(--_vnm8xo)}
20
+ ._1miy1elr>input[type=checkbox]:hover+span>svg rect:first-of-type{stroke:var(--ds-border-input,#8590a2)}
21
21
  ._1mwj1ssb>input[type=checkbox]+span{left:50%}
22
22
  ._1nuz1tcg>input[type=checkbox]+span{height:24px}
23
23
  ._1o9zidpf{flex-shrink:0}
24
24
  ._1q8r7vkz>input[type=checkbox]{width:1pc}
25
25
  ._1qduewfl>input[type=checkbox]:checked+span>svg path:first-of-type{visibility:visible}
26
- ._1qp6e69j>input[type=checkbox]:active+span>svg rect:first-of-type{stroke:var(--_rczcge)}
26
+ ._1qp6muej>input[type=checkbox]:active+span>svg rect:first-of-type{stroke:var(--ds-border,#091e4224)}
27
27
  ._1rvv1ooe>input[type=checkbox]{transform:translate(-50%,-50%)}
28
28
  ._1smcidpf>input[type=checkbox]{margin-left:0}
29
29
  ._1snx1r31>input[type=checkbox]{outline-color:currentColor}
30
30
  ._1stbpxbi>input[type=checkbox]:focus+span:after{height:var(--ds-space-200,1pc)}
31
31
  ._1t711tcg>input[type=checkbox]+span{width:24px}
32
32
  ._1u2istnw>input[type=checkbox]+span>svg{position:absolute}
33
- ._1umo1ehr>input[type=checkbox]:checked:hover+span>svg{color:var(--_14y1fod)}
33
+ ._1umo18hz>input[type=checkbox]:checked:hover+span>svg{color:var(--ds-background-selected-bold-hovered,#05c)}
34
34
  ._1wn015vq>input[type=checkbox]+span>svg path:first-of-type{visibility:hidden}
35
35
  ._1wpzv2br{align-self:start}
36
- ._1x1ysnw8>input[type=checkbox]:disabled:checked+span>svg{fill:var(--_1xmcmw9)}
37
- ._1y9teh7q>input[type=checkbox]:checked+span>svg{fill:var(--_jf353p)}
38
- ._32ro1kd8>input[type=checkbox]+span>svg{color:var(--_4mkb4g)}
36
+ ._1x1y1lg7>input[type=checkbox]:disabled:checked+span>svg{fill:var(--ds-icon-disabled,#091e424f)}
37
+ ._1y9t5w2r>input[type=checkbox]:checked+span>svg{fill:var(--ds-icon-inverse,#fff)}
38
+ ._32ro1j9a>input[type=checkbox]+span>svg{color:var(--ds-background-input,#fff)}
39
39
  ._4k421ssb>input[type=checkbox]{left:50%}
40
40
  ._4t3i1tcg{height:24px}
41
41
  ._8bo8stnw>input[type=checkbox]{position:absolute}
42
42
  ._9j2j1ssb>input[type=checkbox]+span{top:50%}
43
43
  ._9l2s7vkz>input[type=checkbox]{height:1pc}
44
44
  ._a27kkb7n>input[type=checkbox]+span>svg rect:first-of-type{stroke-width:1}
45
- ._bhku1ouc>input[type=checkbox]:disabled+span>svg rect:first-of-type, ._czfe1ouc>input[type=checkbox]:disabled:active+span>svg rect:first-of-type, ._1gxg1ouc>input[type=checkbox]:disabled:focus+span>svg rect:first-of-type, ._19w01ouc>input[type=checkbox]:disabled:hover+span>svg rect:first-of-type{stroke:var(--_r5pknd)}
46
- ._c8dpe69j>input[type=checkbox]:checked:active+span>svg rect:first-of-type{stroke:var(--_rczcge)}
45
+ ._bhkusyzs>input[type=checkbox]:disabled+span>svg rect:first-of-type, ._czfesyzs>input[type=checkbox]:disabled:active+span>svg rect:first-of-type, ._1gxgsyzs>input[type=checkbox]:disabled:focus+span>svg rect:first-of-type, ._19w0syzs>input[type=checkbox]:disabled:hover+span>svg rect:first-of-type{stroke:var(--ds-background-disabled,#091e4208)}
46
+ ._c8dpmuej>input[type=checkbox]:checked:active+span>svg rect:first-of-type{stroke:var(--ds-border,#091e4224)}
47
47
  ._cr751ooe>input[type=checkbox]:focus+span:after{transform:translate(-50%,-50%)}
48
48
  ._cs4qstnw>input[type=checkbox]+span{position:absolute}
49
- ._d2dc1ouc>input[type=checkbox]:disabled+span>svg, ._1eul1ouc>input[type=checkbox]:disabled:active+span>svg, ._1bc71ouc>input[type=checkbox]:disabled:focus+span>svg, ._16fm1ouc>input[type=checkbox]:disabled:hover+span>svg{color:var(--_r5pknd)}
49
+ ._d2dcsyzs>input[type=checkbox]:disabled+span>svg, ._1eulsyzs>input[type=checkbox]:disabled:active+span>svg, ._1bc7syzs>input[type=checkbox]:disabled:focus+span>svg, ._16fmsyzs>input[type=checkbox]:disabled:hover+span>svg{color:var(--ds-background-disabled,#091e4208)}
50
50
  ._dx3f1o36>input[type=checkbox]{outline-width:medium}
51
51
  ._fs2cidpf>input[type=checkbox]{margin-bottom:0}
52
52
  ._g5w3stnw>input[type=checkbox]:focus+span:after{position:absolute}
53
- ._gi9h1kc0>input[type=checkbox]:active+span>svg{color:var(--_1cd0fcx)}
53
+ ._gi9hr01l>input[type=checkbox]:active+span>svg{color:var(--ds-background-input-pressed,#fff)}
54
54
  ._haf81ssb>input[type=checkbox]:focus+span:after{top:50%}
55
55
  ._i0dl1tcg{flex-basis:24px}
56
- ._k6dg1ehr>input[type=checkbox]:checked:hover+span>svg rect:first-of-type{stroke:var(--_14y1fod)}
56
+ ._k6dg18hz>input[type=checkbox]:checked:hover+span>svg rect:first-of-type{stroke:var(--ds-background-selected-bold-hovered,#05c)}
57
57
  ._kqswh2mm{position:relative}
58
58
  ._l9o0n7od>input[type=checkbox]+span>svg{max-width:unset}
59
59
  ._m7eu1ooe>input[type=checkbox]+span>svg{transform:translate(-50%,-50%)}
60
60
  ._oezm15vq>input[type=checkbox]+span>svg{overflow-x:hidden}
61
61
  ._psnc1ssb>input[type=checkbox]{top:50%}
62
62
  ._q3p7usvi>input[type=checkbox]+span>svg{box-sizing:border-box}
63
- ._q8ft1j4g>input[type=checkbox]:checked+span>svg{color:var(--_1gcp7nr)}
63
+ ._q8ft1fvw>input[type=checkbox]:checked+span>svg{color:var(--ds-background-selected-bold,#0c66e4)}
64
64
  ._qhqx1nu9>input[type=checkbox]+span>svg{display:inline}
65
65
  ._ra781ssb>input[type=checkbox]:focus+span:after{left:50%}
66
66
  ._s3uktlke>input[type=checkbox]{cursor:pointer}
67
67
  ._sqizidpf>input[type=checkbox]{margin-right:0}
68
- ._tpz2eh7q>input[type=checkbox]:checked:hover+span>svg{fill:var(--_jf353p)}
69
- ._ut031j4g>input[type=checkbox]:checked+span>svg rect:first-of-type{stroke:var(--_1gcp7nr)}
68
+ ._tpz25w2r>input[type=checkbox]:checked:hover+span>svg{fill:var(--ds-icon-inverse,#fff)}
69
+ ._ut031fvw>input[type=checkbox]:checked+span>svg rect:first-of-type{stroke:var(--ds-background-selected-bold,#0c66e4)}
70
70
  ._whhepxbi>input[type=checkbox]:focus+span:after{width:var(--ds-space-200,1pc)}
71
- ._wo24xz7c>input[type=checkbox]:checked:active+span>svg{fill:var(--_uq1ko9)}
72
- ._wxkg1kc0>input[type=checkbox]:checked:active+span>svg{color:var(--_1cd0fcx)}
71
+ ._wo245w2r>input[type=checkbox]:checked:active+span>svg{fill:var(--ds-icon-inverse,#fff)}
72
+ ._wxkgr01l>input[type=checkbox]:checked:active+span>svg{color:var(--ds-background-input-pressed,#fff)}
73
73
  ._zfav1ssb>input[type=checkbox]+span>svg{left:50%}
package/dist/cjs/components/compiled/TaskItem.js CHANGED
@@ -10,11 +10,11 @@ exports.default = void 0;
10
10
  require("./TaskItem.compiled.css");
11
11
  var _runtime = require("@compiled/react/runtime");
12
12
  var _react = _interopRequireWildcard(require("react"));
13
- var _checkbox = _interopRequireDefault(require("@atlaskit/icon/glyph/checkbox"));
13
+ var _checkboxChecked = _interopRequireDefault(require("@atlaskit/icon/core/checkbox-checked"));
14
+ var _checkboxUnchecked = _interopRequireDefault(require("@atlaskit/icon/core/checkbox-unchecked"));
14
15
  var _Item = _interopRequireDefault(require("./Item"));
15
16
  var _analyticsNext = require("@atlaskit/analytics-next");
16
17
  var _analytics = require("../../analytics");
17
- var _colors = require("@atlaskit/theme/colors");
18
18
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
19
19
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
20
20
  /**
@@ -75,20 +75,9 @@ var TaskItem = function TaskItem(props) {
75
75
  var inputRef = inputRefFromProps !== null && inputRefFromProps !== void 0 ? inputRefFromProps : defaultInputRef;
76
76
  var icon = /*#__PURE__*/_react.default.createElement("span", {
77
77
  contentEditable: false,
78
- className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1tcg _1bsb1tcg _4t3i1tcg _kqswh2mm _1wpzv2br _1snx1r31 _1746glyw _dx3f1o36 _1h5xidpf _sqizidpf _fs2cidpf _1smcidpf _oezm15vq _1l0615vq _1abj1mn3 _18a711so _16npddza _a27kkb7n _q3p7usvi _qhqx1nu9 _10cr1ssb _zfav1ssb _m7eu1ooe _l9o0n7od _1efjn7od _1u2istnw _32ro1kd8 _1wn015vq _den51ifg _zh8l1b66 _g5w3stnw _whhepxbi _1stbpxbi _18tob3bt _1awt1ule _haf81ssb _ra781ssb _cr751ooe _1q8r7vkz _9l2s7vkz _1mh7kb7n _s3uktlke _1davidpf _8bo8stnw _psnc1ssb _4k421ssb _1rvv1ooe _13vl73ad _1t711tcg _1nuz1tcg _cs4qstnw _9j2j1ssb _1mwj1ssb _19l51ooe _12yy12ci _1miyddza _1umo1ehr _tpz2eh7q _k6dg1ehr _1qduewfl _q8ft1j4g _1y9teh7q _ut031j4g _gi9h1kc0 _1qp6e69j _wxkg1kc0 _wo24xz7c _c8dpe69j _d2dc1ouc _1eul1ouc _1bc71ouc _16fm1ouc _bhku1ouc _czfe1ouc _1gxg1ouc _19w01ouc _1x1ysnw8"]),
78
+ className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1tcg _1bsb1tcg _4t3i1tcg _kqswh2mm _1wpzv2br _1snx1r31 _1746glyw _dx3f1o36 _1h5xidpf _sqizidpf _fs2cidpf _1smcidpf _oezm15vq _1l0615vq _1abj1mn3 _18a711so _16np1elr _a27kkb7n _q3p7usvi _qhqx1nu9 _10cr1ssb _zfav1ssb _m7eu1ooe _l9o0n7od _1efjn7od _1u2istnw _32ro1j9a _1wn015vq _den512j9 _zh8l1b66 _g5w3stnw _whhepxbi _1stbpxbi _18tob3bt _1awt1ule _haf81ssb _ra781ssb _cr751ooe _1q8r7vkz _9l2s7vkz _1mh7kb7n _s3uktlke _1davidpf _8bo8stnw _psnc1ssb _4k421ssb _1rvv1ooe _13vl73ad _1t711tcg _1nuz1tcg _cs4qstnw _9j2j1ssb _1mwj1ssb _19l51ooe _12yy1d5g _1miy1elr _1umo18hz _tpz25w2r _k6dg18hz _1qduewfl _q8ft1fvw _1y9t5w2r _ut031fvw _gi9hr01l _1qp6muej _wxkgr01l _wo245w2r _c8dpmuej _d2dcsyzs _1eulsyzs _1bc7syzs _16fmsyzs _bhkusyzs _czfesyzs _1gxgsyzs _19w0syzs _1x1y1lg7"]),
79
79
  style: {
80
- "--_4mkb4g": (0, _runtime.ix)("var(--ds-background-input, ".concat(_colors.N10, ")")),
81
- "--_vnm8xo": (0, _runtime.ix)("var(--ds-border-input, ".concat(_colors.N100, ")")),
82
- "--_1z08gfx": (0, _runtime.ix)("var(--ds-background-input-hovered, ".concat(_colors.N30, ")")),
83
- "--_14y1fod": (0, _runtime.ix)("var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")")),
84
- "--_jf353p": (0, _runtime.ix)("var(--ds-icon-inverse, ".concat(_colors.N10, ")")),
85
- "--_1gcp7nr": (0, _runtime.ix)("var(--ds-background-selected-bold, ".concat(_colors.B400, ")")),
86
- "--_1cd0fcx": (0, _runtime.ix)("var(--ds-background-input-pressed, ".concat(_colors.B50, ")")),
87
- "--_rczcge": (0, _runtime.ix)("var(--ds-border, ".concat(_colors.B50, ")")),
88
- "--_uq1ko9": (0, _runtime.ix)("var(--ds-icon-inverse, ".concat(_colors.B400, ")")),
89
- "--_r5pknd": (0, _runtime.ix)("var(--ds-background-disabled, ".concat(_colors.N20, ")")),
90
- "--_1xmcmw9": (0, _runtime.ix)("var(--ds-icon-disabled, ".concat(_colors.N70, ")")),
91
- "--_18khk6": (0, _runtime.ix)("2px solid ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")))
80
+ "--_toyvsf": (0, _runtime.ix)("2px solid ".concat("var(--ds-border-focused, #388BFF)"))
92
81
  }
93
82
  }, /*#__PURE__*/_react.default.createElement("input", {
94
83
  id: checkBoxId,
@@ -102,9 +91,10 @@ var TaskItem = function TaskItem(props) {
102
91
  suppressHydrationWarning: true,
103
92
  onKeyPress: handleOnKeyPress,
104
93
  ref: inputRef
105
- }), /*#__PURE__*/_react.default.createElement(_checkbox.default, {
106
- label: "",
107
- isFacadeDisabled: true
94
+ }), isDone ? /*#__PURE__*/_react.default.createElement(_checkboxChecked.default, {
95
+ label: ""
96
+ }) : /*#__PURE__*/_react.default.createElement(_checkboxUnchecked.default, {
97
+ label: ""
108
98
  }));
109
99
  _react.default.useEffect(function () {
110
100
  if (isFocused && inputRef.current) {
package/dist/cjs/components/theme.js CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _colors = require("@atlaskit/theme/colors");
8
7
  /**
9
8
  * Styles taken from packages/design-system/checkbox/src/internal/theme.tsx
10
9
  * To be used until mobile editor does not require legacy themed() API anymore
@@ -12,26 +11,26 @@ var _colors = require("@atlaskit/theme/colors");
12
11
  var checkboxTheme = {
13
12
  light: {
14
13
  borderColor: {
15
- rest: "var(--ds-border-input, ".concat(_colors.N100, ")"),
16
- hovered: "var(--ds-border-input, ".concat(_colors.N100, ")"),
17
- disabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
18
- checked: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
19
- active: "var(--ds-border, ".concat(_colors.B50, ")"),
20
- focused: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
21
- hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")")
14
+ rest: "var(--ds-border-input, #8590A2)",
15
+ hovered: "var(--ds-border-input, #8590A2)",
16
+ disabled: "var(--ds-background-disabled, #091E4208)",
17
+ checked: "var(--ds-background-selected-bold, #0C66E4)",
18
+ active: "var(--ds-border, #091E4224)",
19
+ focused: "var(--ds-border-focused, #388BFF)",
20
+ hoveredAndChecked: "var(--ds-background-selected-bold-hovered, #0055CC)"
22
21
  },
23
22
  boxColor: {
24
- rest: "var(--ds-background-input, ".concat(_colors.N10, ")"),
25
- hovered: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
26
- disabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
27
- active: "var(--ds-background-input-pressed, ".concat(_colors.B50, ")"),
28
- hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")"),
29
- checked: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")")
23
+ rest: "var(--ds-background-input, #FFFFFF)",
24
+ hovered: "var(--ds-background-input-hovered, #F7F8F9)",
25
+ disabled: "var(--ds-background-disabled, #091E4208)",
26
+ active: "var(--ds-background-input-pressed, #FFFFFF)",
27
+ hoveredAndChecked: "var(--ds-background-selected-bold-hovered, #0055CC)",
28
+ checked: "var(--ds-background-selected-bold, #0C66E4)"
30
29
  },
31
30
  tickColor: {
32
- disabledAndChecked: "var(--ds-icon-disabled, ".concat(_colors.N70, ")"),
33
- activeAndChecked: "var(--ds-icon-inverse, ".concat(_colors.B400, ")"),
34
- checked: "var(--ds-icon-inverse, ".concat(_colors.N10, ")")
31
+ disabledAndChecked: "var(--ds-icon-disabled, #091E424F)",
32
+ activeAndChecked: "var(--ds-icon-inverse, #FFFFFF)",
33
+ checked: "var(--ds-icon-inverse, #FFFFFF)"
35
34
  }
36
35
  },
37
36
  /**
@@ -42,8 +41,8 @@ var checkboxTheme = {
42
41
  */
43
42
  dark: {
44
43
  borderColor: {
45
- rest: "var(--ds-border-input, ".concat(_colors.DN200, ")"),
46
- hovered: "var(--ds-border-input, ".concat(_colors.DN200, ")"),
44
+ rest: "var(--ds-border-input, #8590A2)",
45
+ hovered: "var(--ds-border-input, #8590A2)",
47
46
  disabled: "var(--ds-background-disabled, #BCD6F00A)",
48
47
  checked: "var(--ds-background-selected-bold, #579DFF)",
49
48
  active: "var(--ds-border, #A6C5E229)",
package/dist/es2019/components/TaskItem.js CHANGED
@@ -5,7 +5,8 @@
5
5
  import React, { useMemo, useRef } from 'react';
6
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
7
  import { jsx } from '@emotion/react';
8
- import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
8
+ import CheckboxCheckedIcon from '@atlaskit/icon/core/checkbox-checked';
9
+ import CheckboxUncheckedIcon from '@atlaskit/icon/core/checkbox-unchecked';
9
10
  import Item from './Item';
10
11
  import { withAnalyticsEvents } from '@atlaskit/analytics-next';
11
12
  import { createAndFireEventInElementsChannel } from '../analytics';
@@ -74,9 +75,10 @@ const TaskItem = props => {
74
75
  suppressHydrationWarning: true,
75
76
  onKeyPress: handleOnKeyPress,
76
77
  ref: inputRef
77
- }), jsx(CheckboxIcon, {
78
- label: "",
79
- isFacadeDisabled: true
78
+ }), isDone ? jsx(CheckboxCheckedIcon, {
79
+ label: ""
80
+ }) : jsx(CheckboxUncheckedIcon, {
81
+ label: ""
80
82
  }));
81
83
  React.useEffect(() => {
82
84
  if (isFocused && inputRef.current) {
package/dist/es2019/components/compiled/TaskItem.compiled.css CHANGED
@@ -1,12 +1,12 @@
1
1
 
2
2
  ._18a711so>input[type=checkbox]+span>svg rect:first-of-type{transition:stroke .2s ease-in-out}
3
3
  ._1abj1mn3>input[type=checkbox]+span>svg{transition:color .2s ease-in-out,fill .2s ease-in-out}
4
- ._den51ekn>input[type=checkbox]:focus+span:after{border:2px solid var(--ds-border-focused,#4c9aff)}
4
+ ._den5ugt7>input[type=checkbox]:focus+span:after{border:2px solid var(--ds-border-focused,#388bff)}
5
5
  ._zh8l1b66>input[type=checkbox]:focus+span:after{border-radius:var(--ds-space-050,4px)}._10cr1ssb>input[type=checkbox]+span>svg{top:50%}
6
- ._12yy10ko>input[type=checkbox]:hover+span>svg{color:var(--ds-background-input-hovered,#ebecf0)}
6
+ ._12yy1d5g>input[type=checkbox]:hover+span>svg{color:var(--ds-background-input-hovered,#f7f8f9)}
7
7
  ._13vl73ad>input[type=checkbox][disabled]{cursor:default}
8
8
  ._16jlidpf{flex-grow:0}
9
- ._16np1fmg>input[type=checkbox]+span>svg rect:first-of-type{stroke:var(--ds-border-input,#7a869a)}
9
+ ._16np1elr>input[type=checkbox]+span>svg rect:first-of-type{stroke:var(--ds-border-input,#8590a2)}
10
10
  ._1746glyw>input[type=checkbox]{outline-style:none}
11
11
  ._18tob3bt>input[type=checkbox]:focus+span:after{content:""}
12
12
  ._19l51ooe>input[type=checkbox]+span{transform:translate(-50%,-50%)}
@@ -17,57 +17,57 @@
17
17
  ._1h5xidpf>input[type=checkbox]{margin-top:0}
18
18
  ._1l0615vq>input[type=checkbox]+span>svg{overflow-y:hidden}
19
19
  ._1mh7kb7n>input[type=checkbox]{z-index:1}
20
- ._1miy1fmg>input[type=checkbox]:hover+span>svg rect:first-of-type{stroke:var(--ds-border-input,#7a869a)}
20
+ ._1miy1elr>input[type=checkbox]:hover+span>svg rect:first-of-type{stroke:var(--ds-border-input,#8590a2)}
21
21
  ._1mwj1ssb>input[type=checkbox]+span{left:50%}
22
22
  ._1nuz1tcg>input[type=checkbox]+span{height:24px}
23
23
  ._1o9zidpf{flex-shrink:0}
24
24
  ._1q8r7vkz>input[type=checkbox]{width:1pc}
25
25
  ._1qduewfl>input[type=checkbox]:checked+span>svg path:first-of-type{visibility:visible}
26
- ._1qp6unzk>input[type=checkbox]:active+span>svg rect:first-of-type{stroke:var(--ds-border,#deebff)}
26
+ ._1qp6muej>input[type=checkbox]:active+span>svg rect:first-of-type{stroke:var(--ds-border,#091e4224)}
27
27
  ._1rvv1ooe>input[type=checkbox]{transform:translate(-50%,-50%)}
28
28
  ._1smcidpf>input[type=checkbox]{margin-left:0}
29
29
  ._1snx1r31>input[type=checkbox]{outline-color:currentColor}
30
30
  ._1stbpxbi>input[type=checkbox]:focus+span:after{height:var(--ds-space-200,1pc)}
31
31
  ._1t711tcg>input[type=checkbox]+span{width:24px}
32
32
  ._1u2istnw>input[type=checkbox]+span>svg{position:absolute}
33
- ._1umohh5a>input[type=checkbox]:checked:hover+span>svg{color:var(--ds-background-selected-bold-hovered,#0065ff)}
33
+ ._1umo18hz>input[type=checkbox]:checked:hover+span>svg{color:var(--ds-background-selected-bold-hovered,#05c)}
34
34
  ._1wn015vq>input[type=checkbox]+span>svg path:first-of-type{visibility:hidden}
35
35
  ._1wpzv2br{align-self:start}
36
- ._1x1y15t7>input[type=checkbox]:disabled:checked+span>svg{fill:var(--ds-icon-disabled,#a5adba)}
37
- ._1y9t1qbb>input[type=checkbox]:checked+span>svg{fill:var(--ds-icon-inverse,#fafbfc)}
38
- ._32romag2>input[type=checkbox]+span>svg{color:var(--ds-background-input,#fafbfc)}
36
+ ._1x1y1lg7>input[type=checkbox]:disabled:checked+span>svg{fill:var(--ds-icon-disabled,#091e424f)}
37
+ ._1y9t5w2r>input[type=checkbox]:checked+span>svg{fill:var(--ds-icon-inverse,#fff)}
38
+ ._32ro1j9a>input[type=checkbox]+span>svg{color:var(--ds-background-input,#fff)}
39
39
  ._4k421ssb>input[type=checkbox]{left:50%}
40
40
  ._4t3i1tcg{height:24px}
41
41
  ._8bo8stnw>input[type=checkbox]{position:absolute}
42
42
  ._9j2j1ssb>input[type=checkbox]+span{top:50%}
43
43
  ._9l2s7vkz>input[type=checkbox]{height:1pc}
44
44
  ._a27kkb7n>input[type=checkbox]+span>svg rect:first-of-type{stroke-width:1}
45
- ._bhku1y1w>input[type=checkbox]:disabled+span>svg rect:first-of-type, ._czfe1y1w>input[type=checkbox]:disabled:active+span>svg rect:first-of-type, ._1gxg1y1w>input[type=checkbox]:disabled:focus+span>svg rect:first-of-type, ._19w01y1w>input[type=checkbox]:disabled:hover+span>svg rect:first-of-type{stroke:var(--ds-background-disabled,#f4f5f7)}
46
- ._c8dpunzk>input[type=checkbox]:checked:active+span>svg rect:first-of-type{stroke:var(--ds-border,#deebff)}
45
+ ._bhkusyzs>input[type=checkbox]:disabled+span>svg rect:first-of-type, ._czfesyzs>input[type=checkbox]:disabled:active+span>svg rect:first-of-type, ._1gxgsyzs>input[type=checkbox]:disabled:focus+span>svg rect:first-of-type, ._19w0syzs>input[type=checkbox]:disabled:hover+span>svg rect:first-of-type{stroke:var(--ds-background-disabled,#091e4208)}
46
+ ._c8dpmuej>input[type=checkbox]:checked:active+span>svg rect:first-of-type{stroke:var(--ds-border,#091e4224)}
47
47
  ._cr751ooe>input[type=checkbox]:focus+span:after{transform:translate(-50%,-50%)}
48
48
  ._cs4qstnw>input[type=checkbox]+span{position:absolute}
49
- ._d2dc1y1w>input[type=checkbox]:disabled+span>svg, ._1eul1y1w>input[type=checkbox]:disabled:active+span>svg, ._1bc71y1w>input[type=checkbox]:disabled:focus+span>svg, ._16fm1y1w>input[type=checkbox]:disabled:hover+span>svg{color:var(--ds-background-disabled,#f4f5f7)}
49
+ ._d2dcsyzs>input[type=checkbox]:disabled+span>svg, ._1eulsyzs>input[type=checkbox]:disabled:active+span>svg, ._1bc7syzs>input[type=checkbox]:disabled:focus+span>svg, ._16fmsyzs>input[type=checkbox]:disabled:hover+span>svg{color:var(--ds-background-disabled,#091e4208)}
50
50
  ._dx3f1o36>input[type=checkbox]{outline-width:medium}
51
51
  ._fs2cidpf>input[type=checkbox]{margin-bottom:0}
52
52
  ._g5w3stnw>input[type=checkbox]:focus+span:after{position:absolute}
53
- ._gi9h11d3>input[type=checkbox]:active+span>svg{color:var(--ds-background-input-pressed,#deebff)}
53
+ ._gi9hr01l>input[type=checkbox]:active+span>svg{color:var(--ds-background-input-pressed,#fff)}
54
54
  ._haf81ssb>input[type=checkbox]:focus+span:after{top:50%}
55
55
  ._i0dl1tcg{flex-basis:24px}
56
- ._k6dghh5a>input[type=checkbox]:checked:hover+span>svg rect:first-of-type{stroke:var(--ds-background-selected-bold-hovered,#0065ff)}
56
+ ._k6dg18hz>input[type=checkbox]:checked:hover+span>svg rect:first-of-type{stroke:var(--ds-background-selected-bold-hovered,#05c)}
57
57
  ._kqswh2mm{position:relative}
58
58
  ._l9o0n7od>input[type=checkbox]+span>svg{max-width:unset}
59
59
  ._m7eu1ooe>input[type=checkbox]+span>svg{transform:translate(-50%,-50%)}
60
60
  ._oezm15vq>input[type=checkbox]+span>svg{overflow-x:hidden}
61
61
  ._psnc1ssb>input[type=checkbox]{top:50%}
62
62
  ._q3p7usvi>input[type=checkbox]+span>svg{box-sizing:border-box}
63
- ._q8ftzyvw>input[type=checkbox]:checked+span>svg{color:var(--ds-background-selected-bold,#0052cc)}
63
+ ._q8ft1fvw>input[type=checkbox]:checked+span>svg{color:var(--ds-background-selected-bold,#0c66e4)}
64
64
  ._qhqx1nu9>input[type=checkbox]+span>svg{display:inline}
65
65
  ._ra781ssb>input[type=checkbox]:focus+span:after{left:50%}
66
66
  ._s3uktlke>input[type=checkbox]{cursor:pointer}
67
67
  ._sqizidpf>input[type=checkbox]{margin-right:0}
68
- ._tpz21qbb>input[type=checkbox]:checked:hover+span>svg{fill:var(--ds-icon-inverse,#fafbfc)}
69
- ._ut03zyvw>input[type=checkbox]:checked+span>svg rect:first-of-type{stroke:var(--ds-background-selected-bold,#0052cc)}
68
+ ._tpz25w2r>input[type=checkbox]:checked:hover+span>svg{fill:var(--ds-icon-inverse,#fff)}
69
+ ._ut031fvw>input[type=checkbox]:checked+span>svg rect:first-of-type{stroke:var(--ds-background-selected-bold,#0c66e4)}
70
70
  ._whhepxbi>input[type=checkbox]:focus+span:after{width:var(--ds-space-200,1pc)}
71
- ._wo241dzn>input[type=checkbox]:checked:active+span>svg{fill:var(--ds-icon-inverse,#0052cc)}
72
- ._wxkg11d3>input[type=checkbox]:checked:active+span>svg{color:var(--ds-background-input-pressed,#deebff)}
71
+ ._wo245w2r>input[type=checkbox]:checked:active+span>svg{fill:var(--ds-icon-inverse,#fff)}
72
+ ._wxkgr01l>input[type=checkbox]:checked:active+span>svg{color:var(--ds-background-input-pressed,#fff)}
73
73
  ._zfav1ssb>input[type=checkbox]+span>svg{left:50%}
package/dist/es2019/components/compiled/TaskItem.js CHANGED
@@ -2,12 +2,11 @@
2
2
  import "./TaskItem.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React, { useMemo, useRef } from 'react';
5
- import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
5
+ import CheckboxCheckedIcon from '@atlaskit/icon/core/checkbox-checked';
6
+ import CheckboxUncheckedIcon from '@atlaskit/icon/core/checkbox-unchecked';
6
7
  import Item from './Item';
7
8
  import { withAnalyticsEvents } from '@atlaskit/analytics-next';
8
9
  import { createAndFireEventInElementsChannel } from '../../analytics';
9
- import { B100, B300, B400, B50, N10, N100, N20, N30, N70 } from '@atlaskit/theme/colors';
10
-
11
10
  /**
12
11
  * References packages/design-system/checkbox/src/checkbox.tsx
13
12
  * To be used until mobile editor does not require legacy themed() API anymore,
@@ -62,7 +61,7 @@ const TaskItem = props => {
62
61
  const inputRef = inputRefFromProps !== null && inputRefFromProps !== void 0 ? inputRefFromProps : defaultInputRef;
63
62
  const icon = /*#__PURE__*/React.createElement("span", {
64
63
  contentEditable: false,
65
- className: ax(["_16jlidpf _1o9zidpf _i0dl1tcg _1bsb1tcg _4t3i1tcg _kqswh2mm _1wpzv2br _1snx1r31 _1746glyw _dx3f1o36 _1h5xidpf _sqizidpf _fs2cidpf _1smcidpf _oezm15vq _1l0615vq _1abj1mn3 _18a711so _16np1fmg _a27kkb7n _q3p7usvi _qhqx1nu9 _10cr1ssb _zfav1ssb _m7eu1ooe _l9o0n7od _1efjn7od _1u2istnw _32romag2 _1wn015vq _den51ekn _zh8l1b66 _g5w3stnw _whhepxbi _1stbpxbi _18tob3bt _1awt1ule _haf81ssb _ra781ssb _cr751ooe _1q8r7vkz _9l2s7vkz _1mh7kb7n _s3uktlke _1davidpf _8bo8stnw _psnc1ssb _4k421ssb _1rvv1ooe _13vl73ad _1t711tcg _1nuz1tcg _cs4qstnw _9j2j1ssb _1mwj1ssb _19l51ooe _12yy10ko _1miy1fmg _1umohh5a _tpz21qbb _k6dghh5a _1qduewfl _q8ftzyvw _1y9t1qbb _ut03zyvw _gi9h11d3 _1qp6unzk _wxkg11d3 _wo241dzn _c8dpunzk _d2dc1y1w _1eul1y1w _1bc71y1w _16fm1y1w _bhku1y1w _czfe1y1w _1gxg1y1w _19w01y1w _1x1y15t7"])
64
+ className: ax(["_16jlidpf _1o9zidpf _i0dl1tcg _1bsb1tcg _4t3i1tcg _kqswh2mm _1wpzv2br _1snx1r31 _1746glyw _dx3f1o36 _1h5xidpf _sqizidpf _fs2cidpf _1smcidpf _oezm15vq _1l0615vq _1abj1mn3 _18a711so _16np1elr _a27kkb7n _q3p7usvi _qhqx1nu9 _10cr1ssb _zfav1ssb _m7eu1ooe _l9o0n7od _1efjn7od _1u2istnw _32ro1j9a _1wn015vq _den5ugt7 _zh8l1b66 _g5w3stnw _whhepxbi _1stbpxbi _18tob3bt _1awt1ule _haf81ssb _ra781ssb _cr751ooe _1q8r7vkz _9l2s7vkz _1mh7kb7n _s3uktlke _1davidpf _8bo8stnw _psnc1ssb _4k421ssb _1rvv1ooe _13vl73ad _1t711tcg _1nuz1tcg _cs4qstnw _9j2j1ssb _1mwj1ssb _19l51ooe _12yy1d5g _1miy1elr _1umo18hz _tpz25w2r _k6dg18hz _1qduewfl _q8ft1fvw _1y9t5w2r _ut031fvw _gi9hr01l _1qp6muej _wxkgr01l _wo245w2r _c8dpmuej _d2dcsyzs _1eulsyzs _1bc7syzs _16fmsyzs _bhkusyzs _czfesyzs _1gxgsyzs _19w0syzs _1x1y1lg7"])
66
65
  }, /*#__PURE__*/React.createElement("input", {
67
66
  id: checkBoxId,
68
67
  "aria-labelledby": `${checkBoxId}-wrapper`,
@@ -75,9 +74,10 @@ const TaskItem = props => {
75
74
  suppressHydrationWarning: true,
76
75
  onKeyPress: handleOnKeyPress,
77
76
  ref: inputRef
78
- }), /*#__PURE__*/React.createElement(CheckboxIcon, {
79
- label: "",
80
- isFacadeDisabled: true
77
+ }), isDone ? /*#__PURE__*/React.createElement(CheckboxCheckedIcon, {
78
+ label: ""
79
+ }) : /*#__PURE__*/React.createElement(CheckboxUncheckedIcon, {
80
+ label: ""
81
81
  }));
82
82
  React.useEffect(() => {
83
83
  if (isFocused && inputRef.current) {
package/dist/es2019/components/theme.js CHANGED
@@ -1,5 +1,3 @@
1
- import { B100, B300, B400, B50, DN200, N10, N20, N30, N70, N100 } from '@atlaskit/theme/colors';
2
-
3
1
  /**
4
2
  * Styles taken from packages/design-system/checkbox/src/internal/theme.tsx
5
3
  * To be used until mobile editor does not require legacy themed() API anymore
@@ -7,26 +5,26 @@ import { B100, B300, B400, B50, DN200, N10, N20, N30, N70, N100 } from '@atlaski
7
5
  const checkboxTheme = {
8
6
  light: {
9
7
  borderColor: {
10
- rest: `var(--ds-border-input, ${N100})`,
11
- hovered: `var(--ds-border-input, ${N100})`,
12
- disabled: `var(--ds-background-disabled, ${N20})`,
13
- checked: `var(--ds-background-selected-bold, ${B400})`,
14
- active: `var(--ds-border, ${B50})`,
15
- focused: `var(--ds-border-focused, ${B100})`,
16
- hoveredAndChecked: `var(--ds-background-selected-bold-hovered, ${B300})`
8
+ rest: "var(--ds-border-input, #8590A2)",
9
+ hovered: "var(--ds-border-input, #8590A2)",
10
+ disabled: "var(--ds-background-disabled, #091E4208)",
11
+ checked: "var(--ds-background-selected-bold, #0C66E4)",
12
+ active: "var(--ds-border, #091E4224)",
13
+ focused: "var(--ds-border-focused, #388BFF)",
14
+ hoveredAndChecked: "var(--ds-background-selected-bold-hovered, #0055CC)"
17
15
  },
18
16
  boxColor: {
19
- rest: `var(--ds-background-input, ${N10})`,
20
- hovered: `var(--ds-background-input-hovered, ${N30})`,
21
- disabled: `var(--ds-background-disabled, ${N20})`,
22
- active: `var(--ds-background-input-pressed, ${B50})`,
23
- hoveredAndChecked: `var(--ds-background-selected-bold-hovered, ${B300})`,
24
- checked: `var(--ds-background-selected-bold, ${B400})`
17
+ rest: "var(--ds-background-input, #FFFFFF)",
18
+ hovered: "var(--ds-background-input-hovered, #F7F8F9)",
19
+ disabled: "var(--ds-background-disabled, #091E4208)",
20
+ active: "var(--ds-background-input-pressed, #FFFFFF)",
21
+ hoveredAndChecked: "var(--ds-background-selected-bold-hovered, #0055CC)",
22
+ checked: "var(--ds-background-selected-bold, #0C66E4)"
25
23
  },
26
24
  tickColor: {
27
- disabledAndChecked: `var(--ds-icon-disabled, ${N70})`,
28
- activeAndChecked: `var(--ds-icon-inverse, ${B400})`,
29
- checked: `var(--ds-icon-inverse, ${N10})`
25
+ disabledAndChecked: "var(--ds-icon-disabled, #091E424F)",
26
+ activeAndChecked: "var(--ds-icon-inverse, #FFFFFF)",
27
+ checked: "var(--ds-icon-inverse, #FFFFFF)"
30
28
  }
31
29
  },
32
30
  /**
@@ -37,8 +35,8 @@ const checkboxTheme = {
37
35
  */
38
36
  dark: {
39
37
  borderColor: {
40
- rest: `var(--ds-border-input, ${DN200})`,
41
- hovered: `var(--ds-border-input, ${DN200})`,
38
+ rest: "var(--ds-border-input, #8590A2)",
39
+ hovered: "var(--ds-border-input, #8590A2)",
42
40
  disabled: "var(--ds-background-disabled, #BCD6F00A)",
43
41
  checked: "var(--ds-background-selected-bold, #579DFF)",
44
42
  active: "var(--ds-border, #A6C5E229)",
package/dist/esm/components/TaskItem.js CHANGED
@@ -5,7 +5,8 @@
5
5
  import React, { useMemo, useRef } from 'react';
6
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
7
  import { jsx } from '@emotion/react';
8
- import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
8
+ import CheckboxCheckedIcon from '@atlaskit/icon/core/checkbox-checked';
9
+ import CheckboxUncheckedIcon from '@atlaskit/icon/core/checkbox-unchecked';
9
10
  import Item from './Item';
10
11
  import { withAnalyticsEvents } from '@atlaskit/analytics-next';
11
12
  import { createAndFireEventInElementsChannel } from '../analytics';
@@ -78,9 +79,10 @@ var TaskItem = function TaskItem(props) {
78
79
  suppressHydrationWarning: true,
79
80
  onKeyPress: handleOnKeyPress,
80
81
  ref: inputRef
81
- }), jsx(CheckboxIcon, {
82
- label: "",
83
- isFacadeDisabled: true
82
+ }), isDone ? jsx(CheckboxCheckedIcon, {
83
+ label: ""
84
+ }) : jsx(CheckboxUncheckedIcon, {
85
+ label: ""
84
86
  }));
85
87
  React.useEffect(function () {
86
88
  if (isFocused && inputRef.current) {
package/dist/esm/components/compiled/TaskItem.compiled.css CHANGED
@@ -1,12 +1,12 @@
1
1
 
2
2
  ._18a711so>input[type=checkbox]+span>svg rect:first-of-type{transition:stroke .2s ease-in-out}
3
3
  ._1abj1mn3>input[type=checkbox]+span>svg{transition:color .2s ease-in-out,fill .2s ease-in-out}
4
- ._den51ifg>input[type=checkbox]:focus+span:after{border:var(--_18khk6)}
4
+ ._den512j9>input[type=checkbox]:focus+span:after{border:var(--_toyvsf)}
5
5
  ._zh8l1b66>input[type=checkbox]:focus+span:after{border-radius:var(--ds-space-050,4px)}._10cr1ssb>input[type=checkbox]+span>svg{top:50%}
6
- ._12yy12ci>input[type=checkbox]:hover+span>svg{color:var(--_1z08gfx)}
6
+ ._12yy1d5g>input[type=checkbox]:hover+span>svg{color:var(--ds-background-input-hovered,#f7f8f9)}
7
7
  ._13vl73ad>input[type=checkbox][disabled]{cursor:default}
8
8
  ._16jlidpf{flex-grow:0}
9
- ._16npddza>input[type=checkbox]+span>svg rect:first-of-type{stroke:var(--_vnm8xo)}
9
+ ._16np1elr>input[type=checkbox]+span>svg rect:first-of-type{stroke:var(--ds-border-input,#8590a2)}
10
10
  ._1746glyw>input[type=checkbox]{outline-style:none}
11
11
  ._18tob3bt>input[type=checkbox]:focus+span:after{content:""}
12
12
  ._19l51ooe>input[type=checkbox]+span{transform:translate(-50%,-50%)}
@@ -17,57 +17,57 @@
17
17
  ._1h5xidpf>input[type=checkbox]{margin-top:0}
18
18
  ._1l0615vq>input[type=checkbox]+span>svg{overflow-y:hidden}
19
19
  ._1mh7kb7n>input[type=checkbox]{z-index:1}
20
- ._1miyddza>input[type=checkbox]:hover+span>svg rect:first-of-type{stroke:var(--_vnm8xo)}
20
+ ._1miy1elr>input[type=checkbox]:hover+span>svg rect:first-of-type{stroke:var(--ds-border-input,#8590a2)}
21
21
  ._1mwj1ssb>input[type=checkbox]+span{left:50%}
22
22
  ._1nuz1tcg>input[type=checkbox]+span{height:24px}
23
23
  ._1o9zidpf{flex-shrink:0}
24
24
  ._1q8r7vkz>input[type=checkbox]{width:1pc}
25
25
  ._1qduewfl>input[type=checkbox]:checked+span>svg path:first-of-type{visibility:visible}
26
- ._1qp6e69j>input[type=checkbox]:active+span>svg rect:first-of-type{stroke:var(--_rczcge)}
26
+ ._1qp6muej>input[type=checkbox]:active+span>svg rect:first-of-type{stroke:var(--ds-border,#091e4224)}
27
27
  ._1rvv1ooe>input[type=checkbox]{transform:translate(-50%,-50%)}
28
28
  ._1smcidpf>input[type=checkbox]{margin-left:0}
29
29
  ._1snx1r31>input[type=checkbox]{outline-color:currentColor}
30
30
  ._1stbpxbi>input[type=checkbox]:focus+span:after{height:var(--ds-space-200,1pc)}
31
31
  ._1t711tcg>input[type=checkbox]+span{width:24px}
32
32
  ._1u2istnw>input[type=checkbox]+span>svg{position:absolute}
33
- ._1umo1ehr>input[type=checkbox]:checked:hover+span>svg{color:var(--_14y1fod)}
33
+ ._1umo18hz>input[type=checkbox]:checked:hover+span>svg{color:var(--ds-background-selected-bold-hovered,#05c)}
34
34
  ._1wn015vq>input[type=checkbox]+span>svg path:first-of-type{visibility:hidden}
35
35
  ._1wpzv2br{align-self:start}
36
- ._1x1ysnw8>input[type=checkbox]:disabled:checked+span>svg{fill:var(--_1xmcmw9)}
37
- ._1y9teh7q>input[type=checkbox]:checked+span>svg{fill:var(--_jf353p)}
38
- ._32ro1kd8>input[type=checkbox]+span>svg{color:var(--_4mkb4g)}
36
+ ._1x1y1lg7>input[type=checkbox]:disabled:checked+span>svg{fill:var(--ds-icon-disabled,#091e424f)}
37
+ ._1y9t5w2r>input[type=checkbox]:checked+span>svg{fill:var(--ds-icon-inverse,#fff)}
38
+ ._32ro1j9a>input[type=checkbox]+span>svg{color:var(--ds-background-input,#fff)}
39
39
  ._4k421ssb>input[type=checkbox]{left:50%}
40
40
  ._4t3i1tcg{height:24px}
41
41
  ._8bo8stnw>input[type=checkbox]{position:absolute}
42
42
  ._9j2j1ssb>input[type=checkbox]+span{top:50%}
43
43
  ._9l2s7vkz>input[type=checkbox]{height:1pc}
44
44
  ._a27kkb7n>input[type=checkbox]+span>svg rect:first-of-type{stroke-width:1}
45
- ._bhku1ouc>input[type=checkbox]:disabled+span>svg rect:first-of-type, ._czfe1ouc>input[type=checkbox]:disabled:active+span>svg rect:first-of-type, ._1gxg1ouc>input[type=checkbox]:disabled:focus+span>svg rect:first-of-type, ._19w01ouc>input[type=checkbox]:disabled:hover+span>svg rect:first-of-type{stroke:var(--_r5pknd)}
46
- ._c8dpe69j>input[type=checkbox]:checked:active+span>svg rect:first-of-type{stroke:var(--_rczcge)}
45
+ ._bhkusyzs>input[type=checkbox]:disabled+span>svg rect:first-of-type, ._czfesyzs>input[type=checkbox]:disabled:active+span>svg rect:first-of-type, ._1gxgsyzs>input[type=checkbox]:disabled:focus+span>svg rect:first-of-type, ._19w0syzs>input[type=checkbox]:disabled:hover+span>svg rect:first-of-type{stroke:var(--ds-background-disabled,#091e4208)}
46
+ ._c8dpmuej>input[type=checkbox]:checked:active+span>svg rect:first-of-type{stroke:var(--ds-border,#091e4224)}
47
47
  ._cr751ooe>input[type=checkbox]:focus+span:after{transform:translate(-50%,-50%)}
48
48
  ._cs4qstnw>input[type=checkbox]+span{position:absolute}
49
- ._d2dc1ouc>input[type=checkbox]:disabled+span>svg, ._1eul1ouc>input[type=checkbox]:disabled:active+span>svg, ._1bc71ouc>input[type=checkbox]:disabled:focus+span>svg, ._16fm1ouc>input[type=checkbox]:disabled:hover+span>svg{color:var(--_r5pknd)}
49
+ ._d2dcsyzs>input[type=checkbox]:disabled+span>svg, ._1eulsyzs>input[type=checkbox]:disabled:active+span>svg, ._1bc7syzs>input[type=checkbox]:disabled:focus+span>svg, ._16fmsyzs>input[type=checkbox]:disabled:hover+span>svg{color:var(--ds-background-disabled,#091e4208)}
50
50
  ._dx3f1o36>input[type=checkbox]{outline-width:medium}
51
51
  ._fs2cidpf>input[type=checkbox]{margin-bottom:0}
52
52
  ._g5w3stnw>input[type=checkbox]:focus+span:after{position:absolute}
53
- ._gi9h1kc0>input[type=checkbox]:active+span>svg{color:var(--_1cd0fcx)}
53
+ ._gi9hr01l>input[type=checkbox]:active+span>svg{color:var(--ds-background-input-pressed,#fff)}
54
54
  ._haf81ssb>input[type=checkbox]:focus+span:after{top:50%}
55
55
  ._i0dl1tcg{flex-basis:24px}
56
- ._k6dg1ehr>input[type=checkbox]:checked:hover+span>svg rect:first-of-type{stroke:var(--_14y1fod)}
56
+ ._k6dg18hz>input[type=checkbox]:checked:hover+span>svg rect:first-of-type{stroke:var(--ds-background-selected-bold-hovered,#05c)}
57
57
  ._kqswh2mm{position:relative}
58
58
  ._l9o0n7od>input[type=checkbox]+span>svg{max-width:unset}
59
59
  ._m7eu1ooe>input[type=checkbox]+span>svg{transform:translate(-50%,-50%)}
60
60
  ._oezm15vq>input[type=checkbox]+span>svg{overflow-x:hidden}
61
61
  ._psnc1ssb>input[type=checkbox]{top:50%}
62
62
  ._q3p7usvi>input[type=checkbox]+span>svg{box-sizing:border-box}
63
- ._q8ft1j4g>input[type=checkbox]:checked+span>svg{color:var(--_1gcp7nr)}
63
+ ._q8ft1fvw>input[type=checkbox]:checked+span>svg{color:var(--ds-background-selected-bold,#0c66e4)}
64
64
  ._qhqx1nu9>input[type=checkbox]+span>svg{display:inline}
65
65
  ._ra781ssb>input[type=checkbox]:focus+span:after{left:50%}
66
66
  ._s3uktlke>input[type=checkbox]{cursor:pointer}
67
67
  ._sqizidpf>input[type=checkbox]{margin-right:0}
68
- ._tpz2eh7q>input[type=checkbox]:checked:hover+span>svg{fill:var(--_jf353p)}
69
- ._ut031j4g>input[type=checkbox]:checked+span>svg rect:first-of-type{stroke:var(--_1gcp7nr)}
68
+ ._tpz25w2r>input[type=checkbox]:checked:hover+span>svg{fill:var(--ds-icon-inverse,#fff)}
69
+ ._ut031fvw>input[type=checkbox]:checked+span>svg rect:first-of-type{stroke:var(--ds-background-selected-bold,#0c66e4)}
70
70
  ._whhepxbi>input[type=checkbox]:focus+span:after{width:var(--ds-space-200,1pc)}
71
- ._wo24xz7c>input[type=checkbox]:checked:active+span>svg{fill:var(--_uq1ko9)}
72
- ._wxkg1kc0>input[type=checkbox]:checked:active+span>svg{color:var(--_1cd0fcx)}
71
+ ._wo245w2r>input[type=checkbox]:checked:active+span>svg{fill:var(--ds-icon-inverse,#fff)}
72
+ ._wxkgr01l>input[type=checkbox]:checked:active+span>svg{color:var(--ds-background-input-pressed,#fff)}
73
73
  ._zfav1ssb>input[type=checkbox]+span>svg{left:50%}
package/dist/esm/components/compiled/TaskItem.js CHANGED
@@ -2,12 +2,11 @@
2
2
  import "./TaskItem.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React, { useMemo, useRef } from 'react';
5
- import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
5
+ import CheckboxCheckedIcon from '@atlaskit/icon/core/checkbox-checked';
6
+ import CheckboxUncheckedIcon from '@atlaskit/icon/core/checkbox-unchecked';
6
7
  import Item from './Item';
7
8
  import { withAnalyticsEvents } from '@atlaskit/analytics-next';
8
9
  import { createAndFireEventInElementsChannel } from '../../analytics';
9
- import { B100, B300, B400, B50, N10, N100, N20, N30, N70 } from '@atlaskit/theme/colors';
10
-
11
10
  /**
12
11
  * References packages/design-system/checkbox/src/checkbox.tsx
13
12
  * To be used until mobile editor does not require legacy themed() API anymore,
@@ -66,20 +65,9 @@ var TaskItem = function TaskItem(props) {
66
65
  var inputRef = inputRefFromProps !== null && inputRefFromProps !== void 0 ? inputRefFromProps : defaultInputRef;
67
66
  var icon = /*#__PURE__*/React.createElement("span", {
68
67
  contentEditable: false,
69
- className: ax(["_16jlidpf _1o9zidpf _i0dl1tcg _1bsb1tcg _4t3i1tcg _kqswh2mm _1wpzv2br _1snx1r31 _1746glyw _dx3f1o36 _1h5xidpf _sqizidpf _fs2cidpf _1smcidpf _oezm15vq _1l0615vq _1abj1mn3 _18a711so _16npddza _a27kkb7n _q3p7usvi _qhqx1nu9 _10cr1ssb _zfav1ssb _m7eu1ooe _l9o0n7od _1efjn7od _1u2istnw _32ro1kd8 _1wn015vq _den51ifg _zh8l1b66 _g5w3stnw _whhepxbi _1stbpxbi _18tob3bt _1awt1ule _haf81ssb _ra781ssb _cr751ooe _1q8r7vkz _9l2s7vkz _1mh7kb7n _s3uktlke _1davidpf _8bo8stnw _psnc1ssb _4k421ssb _1rvv1ooe _13vl73ad _1t711tcg _1nuz1tcg _cs4qstnw _9j2j1ssb _1mwj1ssb _19l51ooe _12yy12ci _1miyddza _1umo1ehr _tpz2eh7q _k6dg1ehr _1qduewfl _q8ft1j4g _1y9teh7q _ut031j4g _gi9h1kc0 _1qp6e69j _wxkg1kc0 _wo24xz7c _c8dpe69j _d2dc1ouc _1eul1ouc _1bc71ouc _16fm1ouc _bhku1ouc _czfe1ouc _1gxg1ouc _19w01ouc _1x1ysnw8"]),
68
+ className: ax(["_16jlidpf _1o9zidpf _i0dl1tcg _1bsb1tcg _4t3i1tcg _kqswh2mm _1wpzv2br _1snx1r31 _1746glyw _dx3f1o36 _1h5xidpf _sqizidpf _fs2cidpf _1smcidpf _oezm15vq _1l0615vq _1abj1mn3 _18a711so _16np1elr _a27kkb7n _q3p7usvi _qhqx1nu9 _10cr1ssb _zfav1ssb _m7eu1ooe _l9o0n7od _1efjn7od _1u2istnw _32ro1j9a _1wn015vq _den512j9 _zh8l1b66 _g5w3stnw _whhepxbi _1stbpxbi _18tob3bt _1awt1ule _haf81ssb _ra781ssb _cr751ooe _1q8r7vkz _9l2s7vkz _1mh7kb7n _s3uktlke _1davidpf _8bo8stnw _psnc1ssb _4k421ssb _1rvv1ooe _13vl73ad _1t711tcg _1nuz1tcg _cs4qstnw _9j2j1ssb _1mwj1ssb _19l51ooe _12yy1d5g _1miy1elr _1umo18hz _tpz25w2r _k6dg18hz _1qduewfl _q8ft1fvw _1y9t5w2r _ut031fvw _gi9hr01l _1qp6muej _wxkgr01l _wo245w2r _c8dpmuej _d2dcsyzs _1eulsyzs _1bc7syzs _16fmsyzs _bhkusyzs _czfesyzs _1gxgsyzs _19w0syzs _1x1y1lg7"]),
70
69
  style: {
71
- "--_4mkb4g": ix("var(--ds-background-input, ".concat(N10, ")")),
72
- "--_vnm8xo": ix("var(--ds-border-input, ".concat(N100, ")")),
73
- "--_1z08gfx": ix("var(--ds-background-input-hovered, ".concat(N30, ")")),
74
- "--_14y1fod": ix("var(--ds-background-selected-bold-hovered, ".concat(B300, ")")),
75
- "--_jf353p": ix("var(--ds-icon-inverse, ".concat(N10, ")")),
76
- "--_1gcp7nr": ix("var(--ds-background-selected-bold, ".concat(B400, ")")),
77
- "--_1cd0fcx": ix("var(--ds-background-input-pressed, ".concat(B50, ")")),
78
- "--_rczcge": ix("var(--ds-border, ".concat(B50, ")")),
79
- "--_uq1ko9": ix("var(--ds-icon-inverse, ".concat(B400, ")")),
80
- "--_r5pknd": ix("var(--ds-background-disabled, ".concat(N20, ")")),
81
- "--_1xmcmw9": ix("var(--ds-icon-disabled, ".concat(N70, ")")),
82
- "--_18khk6": ix("2px solid ".concat("var(--ds-border-focused, ".concat(B100, ")")))
70
+ "--_toyvsf": ix("2px solid ".concat("var(--ds-border-focused, #388BFF)"))
83
71
  }
84
72
  }, /*#__PURE__*/React.createElement("input", {
85
73
  id: checkBoxId,
@@ -93,9 +81,10 @@ var TaskItem = function TaskItem(props) {
93
81
  suppressHydrationWarning: true,
94
82
  onKeyPress: handleOnKeyPress,
95
83
  ref: inputRef
96
- }), /*#__PURE__*/React.createElement(CheckboxIcon, {
97
- label: "",
98
- isFacadeDisabled: true
84
+ }), isDone ? /*#__PURE__*/React.createElement(CheckboxCheckedIcon, {
85
+ label: ""
86
+ }) : /*#__PURE__*/React.createElement(CheckboxUncheckedIcon, {
87
+ label: ""
99
88
  }));
100
89
  React.useEffect(function () {
101
90
  if (isFocused && inputRef.current) {
package/dist/esm/components/theme.js CHANGED
@@ -1,5 +1,3 @@
1
- import { B100, B300, B400, B50, DN200, N10, N20, N30, N70, N100 } from '@atlaskit/theme/colors';
2
-
3
1
  /**
4
2
  * Styles taken from packages/design-system/checkbox/src/internal/theme.tsx
5
3
  * To be used until mobile editor does not require legacy themed() API anymore
@@ -7,26 +5,26 @@ import { B100, B300, B400, B50, DN200, N10, N20, N30, N70, N100 } from '@atlaski
7
5
  var checkboxTheme = {
8
6
  light: {
9
7
  borderColor: {
10
- rest: "var(--ds-border-input, ".concat(N100, ")"),
11
- hovered: "var(--ds-border-input, ".concat(N100, ")"),
12
- disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
13
- checked: "var(--ds-background-selected-bold, ".concat(B400, ")"),
14
- active: "var(--ds-border, ".concat(B50, ")"),
15
- focused: "var(--ds-border-focused, ".concat(B100, ")"),
16
- hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(B300, ")")
8
+ rest: "var(--ds-border-input, #8590A2)",
9
+ hovered: "var(--ds-border-input, #8590A2)",
10
+ disabled: "var(--ds-background-disabled, #091E4208)",
11
+ checked: "var(--ds-background-selected-bold, #0C66E4)",
12
+ active: "var(--ds-border, #091E4224)",
13
+ focused: "var(--ds-border-focused, #388BFF)",
14
+ hoveredAndChecked: "var(--ds-background-selected-bold-hovered, #0055CC)"
17
15
  },
18
16
  boxColor: {
19
- rest: "var(--ds-background-input, ".concat(N10, ")"),
20
- hovered: "var(--ds-background-input-hovered, ".concat(N30, ")"),
21
- disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
22
- active: "var(--ds-background-input-pressed, ".concat(B50, ")"),
23
- hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(B300, ")"),
24
- checked: "var(--ds-background-selected-bold, ".concat(B400, ")")
17
+ rest: "var(--ds-background-input, #FFFFFF)",
18
+ hovered: "var(--ds-background-input-hovered, #F7F8F9)",
19
+ disabled: "var(--ds-background-disabled, #091E4208)",
20
+ active: "var(--ds-background-input-pressed, #FFFFFF)",
21
+ hoveredAndChecked: "var(--ds-background-selected-bold-hovered, #0055CC)",
22
+ checked: "var(--ds-background-selected-bold, #0C66E4)"
25
23
  },
26
24
  tickColor: {
27
- disabledAndChecked: "var(--ds-icon-disabled, ".concat(N70, ")"),
28
- activeAndChecked: "var(--ds-icon-inverse, ".concat(B400, ")"),
29
- checked: "var(--ds-icon-inverse, ".concat(N10, ")")
25
+ disabledAndChecked: "var(--ds-icon-disabled, #091E424F)",
26
+ activeAndChecked: "var(--ds-icon-inverse, #FFFFFF)",
27
+ checked: "var(--ds-icon-inverse, #FFFFFF)"
30
28
  }
31
29
  },
32
30
  /**
@@ -37,8 +35,8 @@ var checkboxTheme = {
37
35
  */
38
36
  dark: {
39
37
  borderColor: {
40
- rest: "var(--ds-border-input, ".concat(DN200, ")"),
41
- hovered: "var(--ds-border-input, ".concat(DN200, ")"),
38
+ rest: "var(--ds-border-input, #8590A2)",
39
+ hovered: "var(--ds-border-input, #8590A2)",
42
40
  disabled: "var(--ds-background-disabled, #BCD6F00A)",
43
41
  checked: "var(--ds-background-selected-bold, #579DFF)",
44
42
  active: "var(--ds-border, #A6C5E229)",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/task-decision",
3
- "version": "19.0.0",
3
+ "version": "19.0.2",
4
4
  "description": "Tasks and decisions react components",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -43,10 +43,10 @@
43
43
  "dependencies": {
44
44
  "@atlaskit/analytics-namespaced-context": "^7.0.0",
45
45
  "@atlaskit/analytics-next": "^11.0.0",
46
- "@atlaskit/icon": "^24.0.0",
46
+ "@atlaskit/icon": "^24.1.0",
47
47
  "@atlaskit/platform-feature-flags-react": "^0.1.0",
48
48
  "@atlaskit/theme": "^17.0.0",
49
- "@atlaskit/tokens": "^4.0.0",
49
+ "@atlaskit/tokens": "^4.2.0",
50
50
  "@atlaskit/util-service-support": "^6.2.0",
51
51
  "@babel/runtime": "^7.0.0",
52
52
  "@compiled/react": "^0.18.2",