@atlaskit/task-decision 17.9.5 → 17.9.6

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 (19) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/afm-cc/tsconfig.json +43 -0
  3. package/dist/cjs/components/DecisionItem.js +12 -22
  4. package/dist/cjs/components/Item.js +2 -3
  5. package/dist/cjs/components/TaskItem.js +2 -5
  6. package/dist/cjs/components/styles.js +3 -126
  7. package/dist/es2019/components/DecisionItem.js +5 -13
  8. package/dist/es2019/components/Item.js +2 -3
  9. package/dist/es2019/components/TaskItem.js +2 -5
  10. package/dist/es2019/components/styles.js +119 -240
  11. package/dist/esm/components/DecisionItem.js +13 -23
  12. package/dist/esm/components/Item.js +2 -3
  13. package/dist/esm/components/TaskItem.js +2 -5
  14. package/dist/esm/components/styles.js +4 -127
  15. package/dist/types/components/Item.d.ts +0 -2
  16. package/dist/types/components/styles.d.ts +2 -3
  17. package/dist/types-ts4.5/components/Item.d.ts +0 -2
  18. package/dist/types-ts4.5/components/styles.d.ts +2 -3
  19. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/task-decision
2
2
 
3
+ ## 17.9.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [#57137](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57137) [`9b9900944973`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9b9900944973) - Remove legacy theming logic from @atlaskit/date, @atlaskit/mention, @atlaskit/task-decision and @atlaskit/user-picker.
8
+
3
9
  ## 17.9.5
4
10
 
5
11
  ### Patch Changes
package/afm-cc/tsconfig.json ADDED
@@ -0,0 +1,43 @@
1
+ {
2
+ "extends": "../../../../tsconfig.entry-points.confluence.json",
3
+ "compilerOptions": {
4
+ "declaration": true,
5
+ "target": "es5",
6
+ "composite": true,
7
+ "outDir": "../dist",
8
+ "rootDir": "../",
9
+ "baseUrl": "../"
10
+ },
11
+ "include": [
12
+ "../src/**/*.ts",
13
+ "../src/**/*.tsx"
14
+ ],
15
+ "exclude": [
16
+ "../src/**/__tests__/*",
17
+ "../src/**/*.test.*",
18
+ "../src/**/test.*"
19
+ ],
20
+ "references": [
21
+ {
22
+ "path": "../../../analytics/analytics-namespaced-context/afm-cc/tsconfig.json"
23
+ },
24
+ {
25
+ "path": "../../../analytics/analytics-next/afm-cc/tsconfig.json"
26
+ },
27
+ {
28
+ "path": "../../../design-system/icon/afm-cc/tsconfig.json"
29
+ },
30
+ {
31
+ "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
32
+ },
33
+ {
34
+ "path": "../../../design-system/theme/afm-cc/tsconfig.json"
35
+ },
36
+ {
37
+ "path": "../../../design-system/tokens/afm-cc/tsconfig.json"
38
+ },
39
+ {
40
+ "path": "../../util-service-support/afm-cc/tsconfig.json"
41
+ }
42
+ ]
43
+ }
package/dist/cjs/components/DecisionItem.js CHANGED
@@ -9,27 +9,19 @@ var _react = require("@emotion/react");
9
9
  var _decision = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/decision"));
10
10
  var _Item = _interopRequireDefault(require("./Item"));
11
11
  var _colors = require("@atlaskit/theme/colors");
12
- var _components = require("@atlaskit/theme/components");
13
12
  /** @jsx jsx */
14
13
 
15
14
  var iconStyles = function iconStyles(showPlaceholder) {
16
- return function (theme) {
17
- return (0, _react.css)({
18
- flex: '0 0 16px',
19
- height: '16px',
20
- width: '16px',
21
- margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-150, 12px)", " 0 0"),
22
- color: showPlaceholder ? "var(--ds-icon-subtle, ".concat(_colors.N100, ")") : (0, _components.themed)({
23
- light: "var(--ds-icon-success, ".concat(_colors.G400, ")"),
24
- dark: "var(--ds-icon-success, ".concat(_colors.G200, ")")
25
- })({
26
- theme: theme
27
- }),
28
- '> span': {
29
- margin: "var(--ds-space-negative-100, -8px)"
30
- }
31
- });
32
- };
15
+ return (0, _react.css)({
16
+ flex: '0 0 16px',
17
+ height: '16px',
18
+ width: '16px',
19
+ margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-150, 12px)", " 0 0"),
20
+ color: showPlaceholder ? "var(--ds-icon-subtle, ".concat(_colors.N100, ")") : "var(--ds-icon-success, ".concat(_colors.G400, ")"),
21
+ '> span': {
22
+ margin: "var(--ds-space-negative-100, -8px)"
23
+ }
24
+ });
33
25
  };
34
26
  var DecisionItem = function DecisionItem(_ref) {
35
27
  var appearance = _ref.appearance,
@@ -38,10 +30,9 @@ var DecisionItem = function DecisionItem(_ref) {
38
30
  placeholder = _ref.placeholder,
39
31
  showPlaceholder = _ref.showPlaceholder,
40
32
  dataAttributes = _ref.dataAttributes;
41
- var theme = (0, _components.useGlobalTheme)();
42
33
  var icon = (0, _react.jsx)("span", {
43
34
  contentEditable: false,
44
- css: iconStyles(showPlaceholder)(theme)
35
+ css: iconStyles(showPlaceholder)
45
36
  }, (0, _react.jsx)(_decision.default, {
46
37
  label: "Decision",
47
38
  size: "large"
@@ -53,8 +44,7 @@ var DecisionItem = function DecisionItem(_ref) {
53
44
  placeholder: placeholder,
54
45
  showPlaceholder: showPlaceholder,
55
46
  itemType: "DECISION",
56
- dataAttributes: dataAttributes,
57
- theme: theme
47
+ dataAttributes: dataAttributes
58
48
  }, children);
59
49
  };
60
50
  var _default = exports.default = DecisionItem;
package/dist/cjs/components/Item.js CHANGED
@@ -56,8 +56,7 @@ var Item = exports.default = /*#__PURE__*/function (_PureComponent) {
56
56
  icon = _this$props2.icon,
57
57
  itemType = _this$props2.itemType,
58
58
  checkBoxId = _this$props2.checkBoxId,
59
- dataAttributes = _this$props2.dataAttributes,
60
- theme = _this$props2.theme;
59
+ dataAttributes = _this$props2.dataAttributes;
61
60
  if (itemType === 'TASK') {
62
61
  return (0, _react2.jsx)("div", {
63
62
  css: _styles.taskStyles,
@@ -69,7 +68,7 @@ var Item = exports.default = /*#__PURE__*/function (_PureComponent) {
69
68
  }, dataAttributes), children));
70
69
  } else if (itemType === 'DECISION') {
71
70
  return (0, _react2.jsx)("div", {
72
- css: (0, _styles.decisionStyles)(theme),
71
+ css: (0, _styles.decisionStyles)(),
73
72
  "data-decision-wrapper": "true"
74
73
  }, icon, this.renderPlaceholder(), (0, _react2.jsx)("div", (0, _extends2.default)({
75
74
  "data-component": "content",
package/dist/cjs/components/TaskItem.js CHANGED
@@ -12,7 +12,6 @@ var _checkbox = _interopRequireDefault(require("@atlaskit/icon/glyph/checkbox"))
12
12
  var _Item = _interopRequireDefault(require("./Item"));
13
13
  var _analyticsNext = require("@atlaskit/analytics-next");
14
14
  var _analytics = require("../analytics");
15
- var _components = require("@atlaskit/theme/components");
16
15
  var _styles = require("./styles");
17
16
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
18
17
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -36,7 +35,6 @@ var TaskItem = function TaskItem(props) {
36
35
  taskId = props.taskId,
37
36
  onChange = props.onChange,
38
37
  createAnalyticsEvent = props.createAnalyticsEvent;
39
- var theme = (0, _components.useGlobalTheme)();
40
38
  var checkBoxId = (0, _react.useMemo)(function () {
41
39
  return getCheckBoxId(taskId);
42
40
  }, [taskId]);
@@ -68,7 +66,7 @@ var TaskItem = function TaskItem(props) {
68
66
  }, [handleOnChange]);
69
67
  var inputRef = (0, _react.useRef)(null);
70
68
  var icon = (0, _react2.jsx)("span", {
71
- css: (0, _styles.checkboxStyles)(isRenderer)(theme),
69
+ css: (0, _styles.checkboxStyles)(isRenderer),
72
70
  contentEditable: false
73
71
  }, (0, _react2.jsx)("input", {
74
72
  id: checkBoxId,
@@ -103,8 +101,7 @@ var TaskItem = function TaskItem(props) {
103
101
  showPlaceholder: showPlaceholder,
104
102
  itemType: "TASK",
105
103
  dataAttributes: dataAttributes,
106
- checkBoxId: checkBoxId,
107
- theme: theme
104
+ checkBoxId: checkBoxId
108
105
  }, children);
109
106
  };
110
107
 
package/dist/cjs/components/styles.js CHANGED
@@ -8,7 +8,6 @@ exports.taskStyles = exports.taskListStyles = exports.placeholderStyles = export
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
9
  var _react = require("@emotion/react");
10
10
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
11
- var _components = require("@atlaskit/theme/components");
12
11
  var _colors = require("@atlaskit/theme/colors");
13
12
  var _theme = _interopRequireDefault(require("./theme"));
14
13
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
@@ -20,13 +19,8 @@ var listStyles = exports.listStyles = (0, _react.css)(_templateObject || (_templ
20
19
  var taskListStyles = exports.taskListStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n div + div {\n margin-top: ", ";\n }\n"])), "var(--ds-space-050, 4px)");
21
20
  var contentStyles = exports.contentStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0;\n word-wrap: break-word;\n min-width: 0;\n flex: 1 1 auto;\n"])));
22
21
  var taskStyles = exports.taskStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n position: relative;\n"])));
23
- var decisionStyles = exports.decisionStyles = function decisionStyles(theme) {
24
- return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n margin: ", " 0 0 0;\n padding: ", ";\n padding-left: ", ";\n border-radius: ", ";\n background-color: ", ";\n position: relative;\n\n .decision-item {\n cursor: initial;\n }\n "])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)", "var(--ds-border-radius-100, 3px)", (0, _components.themed)({
25
- light: "var(--ds-background-neutral, ".concat(_colors.N20A, ")"),
26
- dark: "var(--ds-background-neutral, ".concat(_colors.DN50, ")")
27
- })({
28
- theme: theme
29
- }));
22
+ var decisionStyles = exports.decisionStyles = function decisionStyles() {
23
+ return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n margin: ", " 0 0 0;\n padding: ", ";\n padding-left: ", ";\n border-radius: ", ";\n background-color: ", ";\n position: relative;\n\n .decision-item {\n cursor: initial;\n }\n "])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)", "var(--ds-border-radius-100, 3px)", "var(--ds-background-neutral, ".concat(_colors.N20A, ")"));
30
24
  };
31
25
  var placeholderStyles = exports.placeholderStyles = function placeholderStyles(offset) {
32
26
  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0 0 0 ", "px;\n position: absolute;\n color: ", ";\n pointer-events: none;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: calc(100% - 50px);\n "])), offset, "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
@@ -38,122 +32,5 @@ var placeholderStyles = exports.placeholderStyles = function placeholderStyles(o
38
32
  * which will allow migration to use @atlaskit/checkbox instead
39
33
  */
40
34
  var checkboxStyles = exports.checkboxStyles = function checkboxStyles(isRenderer) {
41
- return function (theme) {
42
- return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n flex: 0 0 24px;\n width: 24px;\n height: 24px;\n position: relative;\n align-self: start;\n\n & > input[type='checkbox'] {\n width: 16px;\n height: 16px;\n z-index: 1;\n cursor: pointer;\n outline: none;\n margin: 0;\n opacity: 0;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n &[disabled] {\n cursor: default;\n }\n\n + span {\n width: 24px;\n height: 24px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n + span > svg {\n box-sizing: border-box;\n display: inline;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n max-width: unset;\n max-height: unset;\n position: absolute;\n overflow: hidden;\n color: ", ";\n transition: color 0.2s ease-in-out, fill 0.2s ease-in-out;\n path:first-of-type {\n visibility: hidden;\n }\n rect:first-of-type {\n stroke: ", ";\n stroke-width: ", ";\n transition: stroke 0.2s ease-in-out;\n }\n }\n\n &&:focus + span > svg,\n &&:checked:focus + span > svg {\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:hover + span > svg {\n color: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:checked:hover + span > svg {\n color: ", ";\n fill: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:checked {\n + span > svg {\n path:first-of-type {\n visibility: visible;\n }\n color: ", ";\n fill: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n }\n\n &:active + span > svg {\n color: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:checked:active + span > svg {\n color: ", ";\n fill: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:disabled + span > svg,\n &:disabled:hover + span > svg,\n &:disabled:focus + span > svg,\n &:disabled:active + span > svg {\n color: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:disabled:checked + span > svg {\n fill: ", ";\n }\n\n &:focus + span > svg rect:first-of-type {\n stroke: ", ";\n }\n &:checked:focus + span {\n & > svg {\n rect:first-of-type {\n stroke: ", ";\n }\n }\n }\n\n ", "\n }\n "])), (0, _components.themed)({
43
- light: _theme.default.light.boxColor.rest,
44
- dark: _theme.default.dark.boxColor.rest
45
- })({
46
- theme: theme
47
- }), (0, _components.themed)({
48
- light: _theme.default.light.borderColor.rest,
49
- dark: _theme.default.dark.borderColor.rest
50
- })({
51
- theme: theme
52
- }), (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? 1 : 2, (0, _components.themed)({
53
- light: _theme.default.light.borderColor.focused,
54
- dark: _theme.default.dark.borderColor.focused
55
- })({
56
- theme: theme
57
- }), (0, _components.themed)({
58
- light: _theme.default.light.boxColor.hovered,
59
- dark: _theme.default.dark.boxColor.hovered
60
- })({
61
- theme: theme
62
- }), (0, _components.themed)({
63
- light: _theme.default.light.borderColor.hovered,
64
- dark: _theme.default.dark.borderColor.hovered
65
- })({
66
- theme: theme
67
- }), (0, _components.themed)({
68
- light: _theme.default.light.boxColor.hoveredAndChecked,
69
- dark: _theme.default.dark.boxColor.hoveredAndChecked
70
- })({
71
- theme: theme
72
- }), (0, _components.themed)({
73
- light: _theme.default.light.tickColor.checked,
74
- dark: _theme.default.dark.tickColor.checked
75
- })({
76
- theme: theme
77
- }), (0, _components.themed)({
78
- light: _theme.default.light.borderColor.hoveredAndChecked,
79
- dark: _theme.default.dark.borderColor.hoveredAndChecked
80
- })({
81
- theme: theme
82
- }), (0, _components.themed)({
83
- light: _theme.default.light.boxColor.checked,
84
- dark: _theme.default.dark.boxColor.checked
85
- })({
86
- theme: theme
87
- }), (0, _components.themed)({
88
- light: _theme.default.light.tickColor.checked,
89
- dark: _theme.default.dark.tickColor.checked
90
- })({
91
- theme: theme
92
- }), (0, _components.themed)({
93
- light: _theme.default.light.borderColor.checked,
94
- dark: _theme.default.dark.borderColor.checked
95
- })({
96
- theme: theme
97
- }), (0, _components.themed)({
98
- light: _theme.default.light.boxColor.active,
99
- dark: _theme.default.dark.boxColor.active
100
- })({
101
- theme: theme
102
- }), (0, _components.themed)({
103
- light: _theme.default.light.borderColor.active,
104
- dark: _theme.default.dark.borderColor.active
105
- })({
106
- theme: theme
107
- }), (0, _components.themed)({
108
- light: _theme.default.light.boxColor.active,
109
- dark: _theme.default.dark.boxColor.active
110
- })({
111
- theme: theme
112
- }), (0, _components.themed)({
113
- light: _theme.default.light.tickColor.activeAndChecked,
114
- dark: _theme.default.dark.tickColor.activeAndChecked
115
- })({
116
- theme: theme
117
- }), (0, _components.themed)({
118
- light: _theme.default.light.borderColor.active,
119
- dark: _theme.default.dark.borderColor.active
120
- })({
121
- theme: theme
122
- }), (0, _components.themed)({
123
- light: _theme.default.light.boxColor.disabled,
124
- dark: _theme.default.dark.boxColor.disabled
125
- })({
126
- theme: theme
127
- }), (0, _components.themed)({
128
- light: _theme.default.light.borderColor.disabled,
129
- dark: _theme.default.dark.borderColor.disabled
130
- })({
131
- theme: theme
132
- }), (0, _components.themed)({
133
- light: _theme.default.light.tickColor.disabledAndChecked,
134
- dark: _theme.default.dark.tickColor.disabledAndChecked
135
- })({
136
- theme: theme
137
- }), (0, _components.themed)({
138
- light: _theme.default.light.boxColor.checked,
139
- dark: _theme.default.dark.boxColor.checked
140
- })({
141
- theme: theme
142
- }), (0, _components.themed)({
143
- light: _theme.default.light.borderColor.focused,
144
- dark: _theme.default.dark.borderColor.focused
145
- })({
146
- theme: theme
147
- }), isRenderer ? (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n &:focus + span > svg,\n &:checked:focus + span > svg {\n rect:first-of-type {\n stroke: ", ";\n }\n }\n "])), (0, _components.themed)({
148
- light: _theme.default.light.borderColor.focused,
149
- dark: _theme.default.dark.borderColor.focused
150
- })({
151
- theme: theme
152
- })) : (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n &:active:focus + span > svg,\n &:checked:active:focus + span > svg {\n rect:first-of-type {\n stroke: ", ";\n }\n }\n "])), (0, _components.themed)({
153
- light: _theme.default.light.borderColor.focused,
154
- dark: _theme.default.dark.borderColor.focused
155
- })({
156
- theme: theme
157
- })));
158
- };
35
+ return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n flex: 0 0 24px;\n width: 24px;\n height: 24px;\n position: relative;\n align-self: start;\n\n & > input[type='checkbox'] {\n width: 16px;\n height: 16px;\n z-index: 1;\n cursor: pointer;\n outline: none;\n margin: 0;\n opacity: 0;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n &[disabled] {\n cursor: default;\n }\n\n + span {\n width: 24px;\n height: 24px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n + span > svg {\n box-sizing: border-box;\n display: inline;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n max-width: unset;\n max-height: unset;\n position: absolute;\n overflow: hidden;\n color: ", ";\n transition: color 0.2s ease-in-out, fill 0.2s ease-in-out;\n path:first-of-type {\n visibility: hidden;\n }\n rect:first-of-type {\n stroke: ", ";\n stroke-width: ", ";\n transition: stroke 0.2s ease-in-out;\n }\n }\n\n &&:focus + span > svg,\n &&:checked:focus + span > svg {\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:hover + span > svg {\n color: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:checked:hover + span > svg {\n color: ", ";\n fill: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:checked {\n + span > svg {\n path:first-of-type {\n visibility: visible;\n }\n color: ", ";\n fill: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n }\n\n &:active + span > svg {\n color: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:checked:active + span > svg {\n color: ", ";\n fill: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:disabled + span > svg,\n &:disabled:hover + span > svg,\n &:disabled:focus + span > svg,\n &:disabled:active + span > svg {\n color: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:disabled:checked + span > svg {\n fill: ", ";\n }\n\n &:focus + span > svg rect:first-of-type {\n stroke: ", ";\n }\n &:checked:focus + span {\n & > svg {\n rect:first-of-type {\n stroke: ", ";\n }\n }\n }\n\n ", "\n }\n "])), _theme.default.light.boxColor.rest, _theme.default.light.borderColor.rest, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? 1 : 2, _theme.default.light.borderColor.focused, _theme.default.light.boxColor.hovered, _theme.default.light.borderColor.hovered, _theme.default.light.boxColor.hoveredAndChecked, _theme.default.light.tickColor.checked, _theme.default.light.borderColor.hoveredAndChecked, _theme.default.light.boxColor.checked, _theme.default.light.tickColor.checked, _theme.default.light.borderColor.checked, _theme.default.light.boxColor.active, _theme.default.light.borderColor.active, _theme.default.light.boxColor.active, _theme.default.light.tickColor.activeAndChecked, _theme.default.light.borderColor.active, _theme.default.light.boxColor.disabled, _theme.default.light.borderColor.disabled, _theme.default.light.tickColor.disabledAndChecked, _theme.default.light.boxColor.checked, _theme.default.light.borderColor.focused, isRenderer ? (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n &:focus + span > svg,\n &:checked:focus + span > svg {\n rect:first-of-type {\n stroke: ", ";\n }\n }\n "])), _theme.default.light.borderColor.focused) : (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n &:active:focus + span > svg,\n &:checked:active:focus + span > svg {\n rect:first-of-type {\n stroke: ", ";\n }\n }\n "])), _theme.default.light.borderColor.focused));
159
36
  };
package/dist/es2019/components/DecisionItem.js CHANGED
@@ -3,20 +3,14 @@
3
3
  import { css, jsx } from '@emotion/react';
4
4
  import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
5
5
  import Item from './Item';
6
- import { G200, G400, N100 } from '@atlaskit/theme/colors';
7
- import { themed, useGlobalTheme } from '@atlaskit/theme/components';
8
- const iconStyles = showPlaceholder => theme => {
6
+ import { G400, N100 } from '@atlaskit/theme/colors';
7
+ const iconStyles = showPlaceholder => {
9
8
  return css({
10
9
  flex: '0 0 16px',
11
10
  height: '16px',
12
11
  width: '16px',
13
12
  margin: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-150, 12px)"} 0 0`,
14
- color: showPlaceholder ? `var(--ds-icon-subtle, ${N100})` : themed({
15
- light: `var(--ds-icon-success, ${G400})`,
16
- dark: `var(--ds-icon-success, ${G200})`
17
- })({
18
- theme
19
- }),
13
+ color: showPlaceholder ? `var(--ds-icon-subtle, ${N100})` : `var(--ds-icon-success, ${G400})`,
20
14
  '> span': {
21
15
  margin: "var(--ds-space-negative-100, -8px)"
22
16
  }
@@ -30,10 +24,9 @@ const DecisionItem = ({
30
24
  showPlaceholder,
31
25
  dataAttributes
32
26
  }) => {
33
- const theme = useGlobalTheme();
34
27
  const icon = jsx("span", {
35
28
  contentEditable: false,
36
- css: iconStyles(showPlaceholder)(theme)
29
+ css: iconStyles(showPlaceholder)
37
30
  }, jsx(DecisionIcon, {
38
31
  label: "Decision",
39
32
  size: "large"
@@ -45,8 +38,7 @@ const DecisionItem = ({
45
38
  placeholder: placeholder,
46
39
  showPlaceholder: showPlaceholder,
47
40
  itemType: "DECISION",
48
- dataAttributes: dataAttributes,
49
- theme: theme
41
+ dataAttributes: dataAttributes
50
42
  }, children);
51
43
  };
52
44
  export default DecisionItem;
package/dist/es2019/components/Item.js CHANGED
@@ -36,8 +36,7 @@ export default class Item extends PureComponent {
36
36
  icon,
37
37
  itemType,
38
38
  checkBoxId,
39
- dataAttributes,
40
- theme
39
+ dataAttributes
41
40
  } = this.props;
42
41
  if (itemType === 'TASK') {
43
42
  return jsx("div", {
@@ -50,7 +49,7 @@ export default class Item extends PureComponent {
50
49
  }, dataAttributes), children));
51
50
  } else if (itemType === 'DECISION') {
52
51
  return jsx("div", {
53
- css: decisionStyles(theme),
52
+ css: decisionStyles(),
54
53
  "data-decision-wrapper": "true"
55
54
  }, icon, this.renderPlaceholder(), jsx("div", _extends({
56
55
  "data-component": "content",
package/dist/es2019/components/TaskItem.js CHANGED
@@ -5,7 +5,6 @@ import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
5
5
  import Item from './Item';
6
6
  import { withAnalyticsEvents } from '@atlaskit/analytics-next';
7
7
  import { createAndFireEventInElementsChannel } from '../analytics';
8
- import { useGlobalTheme } from '@atlaskit/theme/components';
9
8
  import { checkboxStyles } from './styles';
10
9
  let taskCount = 0;
11
10
  const getCheckBoxId = localId => `${localId}-${taskCount++}`;
@@ -25,7 +24,6 @@ const TaskItem = props => {
25
24
  onChange,
26
25
  createAnalyticsEvent
27
26
  } = props;
28
- const theme = useGlobalTheme();
29
27
  const checkBoxId = useMemo(() => getCheckBoxId(taskId), [taskId]);
30
28
  const handleOnChange = useMemo(() => {
31
29
  return _evt => {
@@ -53,7 +51,7 @@ const TaskItem = props => {
53
51
  }, [handleOnChange]);
54
52
  const inputRef = useRef(null);
55
53
  const icon = jsx("span", {
56
- css: checkboxStyles(isRenderer)(theme),
54
+ css: checkboxStyles(isRenderer),
57
55
  contentEditable: false
58
56
  }, jsx("input", {
59
57
  id: checkBoxId,
@@ -88,8 +86,7 @@ const TaskItem = props => {
88
86
  showPlaceholder: showPlaceholder,
89
87
  itemType: "TASK",
90
88
  dataAttributes: dataAttributes,
91
- checkBoxId: checkBoxId,
92
- theme: theme
89
+ checkBoxId: checkBoxId
93
90
  }, children);
94
91
  };
95
92
 
package/dist/es2019/components/styles.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { css } from '@emotion/react';
2
2
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
3
- import { themed } from '@atlaskit/theme/components';
4
- import { DN50, N200, N20A } from '@atlaskit/theme/colors';
3
+ import { N200, N20A } from '@atlaskit/theme/colors';
5
4
  import checkboxTheme from './theme';
6
5
 
7
6
  /*
@@ -30,19 +29,14 @@ export const taskStyles = css`
30
29
  flex-direction: row;
31
30
  position: relative;
32
31
  `;
33
- export const decisionStyles = theme => css`
32
+ export const decisionStyles = () => css`
34
33
  display: flex;
35
34
  flex-direction: row;
36
35
  margin: ${"var(--ds-space-100, 8px)"} 0 0 0;
37
36
  padding: ${"var(--ds-space-100, 8px)"};
38
37
  padding-left: ${"var(--ds-space-150, 12px)"};
39
38
  border-radius: ${"var(--ds-border-radius-100, 3px)"};
40
- background-color: ${themed({
41
- light: `var(--ds-background-neutral, ${N20A})`,
42
- dark: `var(--ds-background-neutral, ${DN50})`
43
- })({
44
- theme
45
- })};
39
+ background-color: ${`var(--ds-background-neutral, ${N20A})`};
46
40
  position: relative;
47
41
 
48
42
  .decision-item {
@@ -65,265 +59,150 @@ export const placeholderStyles = offset => css`
65
59
  * To be used until mobile editor does not require legacy themed() API anymore,
66
60
  * which will allow migration to use @atlaskit/checkbox instead
67
61
  */
68
- export const checkboxStyles = isRenderer => theme => css`
69
- flex: 0 0 24px;
70
- width: 24px;
71
- height: 24px;
72
- position: relative;
73
- align-self: start;
62
+ export const checkboxStyles = isRenderer => css`
63
+ flex: 0 0 24px;
64
+ width: 24px;
65
+ height: 24px;
66
+ position: relative;
67
+ align-self: start;
68
+
69
+ & > input[type='checkbox'] {
70
+ width: 16px;
71
+ height: 16px;
72
+ z-index: 1;
73
+ cursor: pointer;
74
+ outline: none;
75
+ margin: 0;
76
+ opacity: 0;
77
+ position: absolute;
78
+ top: 50%;
79
+ left: 50%;
80
+ transform: translate(-50%, -50%);
81
+
82
+ &[disabled] {
83
+ cursor: default;
84
+ }
74
85
 
75
- & > input[type='checkbox'] {
76
- width: 16px;
77
- height: 16px;
78
- z-index: 1;
79
- cursor: pointer;
80
- outline: none;
81
- margin: 0;
82
- opacity: 0;
86
+ + span {
87
+ width: 24px;
88
+ height: 24px;
83
89
  position: absolute;
84
90
  top: 50%;
85
91
  left: 50%;
86
92
  transform: translate(-50%, -50%);
93
+ }
87
94
 
88
- &[disabled] {
89
- cursor: default;
95
+ + span > svg {
96
+ box-sizing: border-box;
97
+ display: inline;
98
+ top: 50%;
99
+ left: 50%;
100
+ transform: translate(-50%, -50%);
101
+ max-width: unset;
102
+ max-height: unset;
103
+ position: absolute;
104
+ overflow: hidden;
105
+ color: ${checkboxTheme.light.boxColor.rest};
106
+ transition: color 0.2s ease-in-out, fill 0.2s ease-in-out;
107
+ path:first-of-type {
108
+ visibility: hidden;
90
109
  }
91
-
92
- + span {
93
- width: 24px;
94
- height: 24px;
95
- position: absolute;
96
- top: 50%;
97
- left: 50%;
98
- transform: translate(-50%, -50%);
99
- }
100
-
101
- + span > svg {
102
- box-sizing: border-box;
103
- display: inline;
104
- top: 50%;
105
- left: 50%;
106
- transform: translate(-50%, -50%);
107
- max-width: unset;
108
- max-height: unset;
109
- position: absolute;
110
- overflow: hidden;
111
- color: ${themed({
112
- light: checkboxTheme.light.boxColor.rest,
113
- dark: checkboxTheme.dark.boxColor.rest
114
- })({
115
- theme
116
- })};
117
- transition: color 0.2s ease-in-out, fill 0.2s ease-in-out;
118
- path:first-of-type {
119
- visibility: hidden;
120
- }
121
- rect:first-of-type {
122
- stroke: ${themed({
123
- light: checkboxTheme.light.borderColor.rest,
124
- dark: checkboxTheme.dark.borderColor.rest
125
- })({
126
- theme
127
- })};
128
- stroke-width: ${getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? 1 : 2};
129
- transition: stroke 0.2s ease-in-out;
130
- }
110
+ rect:first-of-type {
111
+ stroke: ${checkboxTheme.light.borderColor.rest};
112
+ stroke-width: ${getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? 1 : 2};
113
+ transition: stroke 0.2s ease-in-out;
131
114
  }
115
+ }
132
116
 
133
- &&:focus + span > svg,
134
- &&:checked:focus + span > svg {
135
- rect:first-of-type {
136
- stroke: ${themed({
137
- light: checkboxTheme.light.borderColor.focused,
138
- dark: checkboxTheme.dark.borderColor.focused
139
- })({
140
- theme
141
- })};
142
- }
117
+ &&:focus + span > svg,
118
+ &&:checked:focus + span > svg {
119
+ rect:first-of-type {
120
+ stroke: ${checkboxTheme.light.borderColor.focused};
143
121
  }
122
+ }
144
123
 
145
- &:hover + span > svg {
146
- color: ${themed({
147
- light: checkboxTheme.light.boxColor.hovered,
148
- dark: checkboxTheme.dark.boxColor.hovered
149
- })({
150
- theme
151
- })};
152
- rect:first-of-type {
153
- stroke: ${themed({
154
- light: checkboxTheme.light.borderColor.hovered,
155
- dark: checkboxTheme.dark.borderColor.hovered
156
- })({
157
- theme
158
- })};
159
- }
124
+ &:hover + span > svg {
125
+ color: ${checkboxTheme.light.boxColor.hovered};
126
+ rect:first-of-type {
127
+ stroke: ${checkboxTheme.light.borderColor.hovered};
160
128
  }
129
+ }
161
130
 
162
- &:checked:hover + span > svg {
163
- color: ${themed({
164
- light: checkboxTheme.light.boxColor.hoveredAndChecked,
165
- dark: checkboxTheme.dark.boxColor.hoveredAndChecked
166
- })({
167
- theme
168
- })};
169
- fill: ${themed({
170
- light: checkboxTheme.light.tickColor.checked,
171
- dark: checkboxTheme.dark.tickColor.checked
172
- })({
173
- theme
174
- })};
175
- rect:first-of-type {
176
- stroke: ${themed({
177
- light: checkboxTheme.light.borderColor.hoveredAndChecked,
178
- dark: checkboxTheme.dark.borderColor.hoveredAndChecked
179
- })({
180
- theme
181
- })};
182
- }
131
+ &:checked:hover + span > svg {
132
+ color: ${checkboxTheme.light.boxColor.hoveredAndChecked};
133
+ fill: ${checkboxTheme.light.tickColor.checked};
134
+ rect:first-of-type {
135
+ stroke: ${checkboxTheme.light.borderColor.hoveredAndChecked};
183
136
  }
137
+ }
184
138
 
185
- &:checked {
186
- + span > svg {
187
- path:first-of-type {
188
- visibility: visible;
189
- }
190
- color: ${themed({
191
- light: checkboxTheme.light.boxColor.checked,
192
- dark: checkboxTheme.dark.boxColor.checked
193
- })({
194
- theme
195
- })};
196
- fill: ${themed({
197
- light: checkboxTheme.light.tickColor.checked,
198
- dark: checkboxTheme.dark.tickColor.checked
199
- })({
200
- theme
201
- })};
202
- rect:first-of-type {
203
- stroke: ${themed({
204
- light: checkboxTheme.light.borderColor.checked,
205
- dark: checkboxTheme.dark.borderColor.checked
206
- })({
207
- theme
208
- })};
209
- }
139
+ &:checked {
140
+ + span > svg {
141
+ path:first-of-type {
142
+ visibility: visible;
210
143
  }
211
- }
212
-
213
- &:active + span > svg {
214
- color: ${themed({
215
- light: checkboxTheme.light.boxColor.active,
216
- dark: checkboxTheme.dark.boxColor.active
217
- })({
218
- theme
219
- })};
144
+ color: ${checkboxTheme.light.boxColor.checked};
145
+ fill: ${checkboxTheme.light.tickColor.checked};
220
146
  rect:first-of-type {
221
- stroke: ${themed({
222
- light: checkboxTheme.light.borderColor.active,
223
- dark: checkboxTheme.dark.borderColor.active
224
- })({
225
- theme
226
- })};
147
+ stroke: ${checkboxTheme.light.borderColor.checked};
227
148
  }
228
149
  }
150
+ }
229
151
 
230
- &:checked:active + span > svg {
231
- color: ${themed({
232
- light: checkboxTheme.light.boxColor.active,
233
- dark: checkboxTheme.dark.boxColor.active
234
- })({
235
- theme
236
- })};
237
- fill: ${themed({
238
- light: checkboxTheme.light.tickColor.activeAndChecked,
239
- dark: checkboxTheme.dark.tickColor.activeAndChecked
240
- })({
241
- theme
242
- })};
243
- rect:first-of-type {
244
- stroke: ${themed({
245
- light: checkboxTheme.light.borderColor.active,
246
- dark: checkboxTheme.dark.borderColor.active
247
- })({
248
- theme
249
- })};
250
- }
152
+ &:active + span > svg {
153
+ color: ${checkboxTheme.light.boxColor.active};
154
+ rect:first-of-type {
155
+ stroke: ${checkboxTheme.light.borderColor.active};
251
156
  }
157
+ }
252
158
 
253
- &:disabled + span > svg,
254
- &:disabled:hover + span > svg,
255
- &:disabled:focus + span > svg,
256
- &:disabled:active + span > svg {
257
- color: ${themed({
258
- light: checkboxTheme.light.boxColor.disabled,
259
- dark: checkboxTheme.dark.boxColor.disabled
260
- })({
261
- theme
262
- })};
263
- rect:first-of-type {
264
- stroke: ${themed({
265
- light: checkboxTheme.light.borderColor.disabled,
266
- dark: checkboxTheme.dark.borderColor.disabled
267
- })({
268
- theme
269
- })};
270
- }
159
+ &:checked:active + span > svg {
160
+ color: ${checkboxTheme.light.boxColor.active};
161
+ fill: ${checkboxTheme.light.tickColor.activeAndChecked};
162
+ rect:first-of-type {
163
+ stroke: ${checkboxTheme.light.borderColor.active};
271
164
  }
165
+ }
272
166
 
273
- &:disabled:checked + span > svg {
274
- fill: ${themed({
275
- light: checkboxTheme.light.tickColor.disabledAndChecked,
276
- dark: checkboxTheme.dark.tickColor.disabledAndChecked
277
- })({
278
- theme
279
- })};
167
+ &:disabled + span > svg,
168
+ &:disabled:hover + span > svg,
169
+ &:disabled:focus + span > svg,
170
+ &:disabled:active + span > svg {
171
+ color: ${checkboxTheme.light.boxColor.disabled};
172
+ rect:first-of-type {
173
+ stroke: ${checkboxTheme.light.borderColor.disabled};
280
174
  }
175
+ }
281
176
 
282
- &:focus + span > svg rect:first-of-type {
283
- stroke: ${themed({
284
- light: checkboxTheme.light.boxColor.checked,
285
- dark: checkboxTheme.dark.boxColor.checked
286
- })({
287
- theme
288
- })};
289
- }
290
- &:checked:focus + span {
291
- & > svg {
292
- rect:first-of-type {
293
- stroke: ${themed({
294
- light: checkboxTheme.light.borderColor.focused,
295
- dark: checkboxTheme.dark.borderColor.focused
296
- })({
297
- theme
298
- })};
299
- }
177
+ &:disabled:checked + span > svg {
178
+ fill: ${checkboxTheme.light.tickColor.disabledAndChecked};
179
+ }
180
+
181
+ &:focus + span > svg rect:first-of-type {
182
+ stroke: ${checkboxTheme.light.boxColor.checked};
183
+ }
184
+ &:checked:focus + span {
185
+ & > svg {
186
+ rect:first-of-type {
187
+ stroke: ${checkboxTheme.light.borderColor.focused};
300
188
  }
301
189
  }
190
+ }
302
191
 
303
- ${isRenderer ? css`
304
- &:focus + span > svg,
305
- &:checked:focus + span > svg {
306
- rect:first-of-type {
307
- stroke: ${themed({
308
- light: checkboxTheme.light.borderColor.focused,
309
- dark: checkboxTheme.dark.borderColor.focused
310
- })({
311
- theme
312
- })};
313
- }
192
+ ${isRenderer ? css`
193
+ &:focus + span > svg,
194
+ &:checked:focus + span > svg {
195
+ rect:first-of-type {
196
+ stroke: ${checkboxTheme.light.borderColor.focused};
314
197
  }
315
- ` : css`
316
- &:active:focus + span > svg,
317
- &:checked:active:focus + span > svg {
318
- rect:first-of-type {
319
- stroke: ${themed({
320
- light: checkboxTheme.light.borderColor.focused,
321
- dark: checkboxTheme.dark.borderColor.focused
322
- })({
323
- theme
324
- })};
325
- }
198
+ }
199
+ ` : css`
200
+ &:active:focus + span > svg,
201
+ &:checked:active:focus + span > svg {
202
+ rect:first-of-type {
203
+ stroke: ${checkboxTheme.light.borderColor.focused};
326
204
  }
327
- `}
328
- }
329
- `;
205
+ }
206
+ `}
207
+ }
208
+ `;
package/dist/esm/components/DecisionItem.js CHANGED
@@ -3,26 +3,18 @@
3
3
  import { css, jsx } from '@emotion/react';
4
4
  import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
5
5
  import Item from './Item';
6
- import { G200, G400, N100 } from '@atlaskit/theme/colors';
7
- import { themed, useGlobalTheme } from '@atlaskit/theme/components';
6
+ import { G400, N100 } from '@atlaskit/theme/colors';
8
7
  var iconStyles = function iconStyles(showPlaceholder) {
9
- return function (theme) {
10
- return css({
11
- flex: '0 0 16px',
12
- height: '16px',
13
- width: '16px',
14
- margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-150, 12px)", " 0 0"),
15
- color: showPlaceholder ? "var(--ds-icon-subtle, ".concat(N100, ")") : themed({
16
- light: "var(--ds-icon-success, ".concat(G400, ")"),
17
- dark: "var(--ds-icon-success, ".concat(G200, ")")
18
- })({
19
- theme: theme
20
- }),
21
- '> span': {
22
- margin: "var(--ds-space-negative-100, -8px)"
23
- }
24
- });
25
- };
8
+ return css({
9
+ flex: '0 0 16px',
10
+ height: '16px',
11
+ width: '16px',
12
+ margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-150, 12px)", " 0 0"),
13
+ color: showPlaceholder ? "var(--ds-icon-subtle, ".concat(N100, ")") : "var(--ds-icon-success, ".concat(G400, ")"),
14
+ '> span': {
15
+ margin: "var(--ds-space-negative-100, -8px)"
16
+ }
17
+ });
26
18
  };
27
19
  var DecisionItem = function DecisionItem(_ref) {
28
20
  var appearance = _ref.appearance,
@@ -31,10 +23,9 @@ var DecisionItem = function DecisionItem(_ref) {
31
23
  placeholder = _ref.placeholder,
32
24
  showPlaceholder = _ref.showPlaceholder,
33
25
  dataAttributes = _ref.dataAttributes;
34
- var theme = useGlobalTheme();
35
26
  var icon = jsx("span", {
36
27
  contentEditable: false,
37
- css: iconStyles(showPlaceholder)(theme)
28
+ css: iconStyles(showPlaceholder)
38
29
  }, jsx(DecisionIcon, {
39
30
  label: "Decision",
40
31
  size: "large"
@@ -46,8 +37,7 @@ var DecisionItem = function DecisionItem(_ref) {
46
37
  placeholder: placeholder,
47
38
  showPlaceholder: showPlaceholder,
48
39
  itemType: "DECISION",
49
- dataAttributes: dataAttributes,
50
- theme: theme
40
+ dataAttributes: dataAttributes
51
41
  }, children);
52
42
  };
53
43
  export default DecisionItem;
package/dist/esm/components/Item.js CHANGED
@@ -52,8 +52,7 @@ var Item = /*#__PURE__*/function (_PureComponent) {
52
52
  icon = _this$props2.icon,
53
53
  itemType = _this$props2.itemType,
54
54
  checkBoxId = _this$props2.checkBoxId,
55
- dataAttributes = _this$props2.dataAttributes,
56
- theme = _this$props2.theme;
55
+ dataAttributes = _this$props2.dataAttributes;
57
56
  if (itemType === 'TASK') {
58
57
  return jsx("div", {
59
58
  css: taskStyles,
@@ -65,7 +64,7 @@ var Item = /*#__PURE__*/function (_PureComponent) {
65
64
  }, dataAttributes), children));
66
65
  } else if (itemType === 'DECISION') {
67
66
  return jsx("div", {
68
- css: decisionStyles(theme),
67
+ css: decisionStyles(),
69
68
  "data-decision-wrapper": "true"
70
69
  }, icon, this.renderPlaceholder(), jsx("div", _extends({
71
70
  "data-component": "content",
package/dist/esm/components/TaskItem.js CHANGED
@@ -5,7 +5,6 @@ import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
5
5
  import Item from './Item';
6
6
  import { withAnalyticsEvents } from '@atlaskit/analytics-next';
7
7
  import { createAndFireEventInElementsChannel } from '../analytics';
8
- import { useGlobalTheme } from '@atlaskit/theme/components';
9
8
  import { checkboxStyles } from './styles';
10
9
  var taskCount = 0;
11
10
  var getCheckBoxId = function getCheckBoxId(localId) {
@@ -25,7 +24,6 @@ var TaskItem = function TaskItem(props) {
25
24
  taskId = props.taskId,
26
25
  onChange = props.onChange,
27
26
  createAnalyticsEvent = props.createAnalyticsEvent;
28
- var theme = useGlobalTheme();
29
27
  var checkBoxId = useMemo(function () {
30
28
  return getCheckBoxId(taskId);
31
29
  }, [taskId]);
@@ -57,7 +55,7 @@ var TaskItem = function TaskItem(props) {
57
55
  }, [handleOnChange]);
58
56
  var inputRef = useRef(null);
59
57
  var icon = jsx("span", {
60
- css: checkboxStyles(isRenderer)(theme),
58
+ css: checkboxStyles(isRenderer),
61
59
  contentEditable: false
62
60
  }, jsx("input", {
63
61
  id: checkBoxId,
@@ -92,8 +90,7 @@ var TaskItem = function TaskItem(props) {
92
90
  showPlaceholder: showPlaceholder,
93
91
  itemType: "TASK",
94
92
  dataAttributes: dataAttributes,
95
- checkBoxId: checkBoxId,
96
- theme: theme
93
+ checkBoxId: checkBoxId
97
94
  }, children);
98
95
  };
99
96
 
package/dist/esm/components/styles.js CHANGED
@@ -2,8 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
2
2
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
3
3
  import { css } from '@emotion/react';
4
4
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
5
- import { themed } from '@atlaskit/theme/components';
6
- import { DN50, N200, N20A } from '@atlaskit/theme/colors';
5
+ import { N200, N20A } from '@atlaskit/theme/colors';
7
6
  import checkboxTheme from './theme';
8
7
 
9
8
  /*
@@ -14,13 +13,8 @@ export var listStyles = css(_templateObject || (_templateObject = _taggedTemplat
14
13
  export var taskListStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n div + div {\n margin-top: ", ";\n }\n"])), "var(--ds-space-050, 4px)");
15
14
  export var contentStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin: 0;\n word-wrap: break-word;\n min-width: 0;\n flex: 1 1 auto;\n"])));
16
15
  export var taskStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n position: relative;\n"])));
17
- export var decisionStyles = function decisionStyles(theme) {
18
- return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n margin: ", " 0 0 0;\n padding: ", ";\n padding-left: ", ";\n border-radius: ", ";\n background-color: ", ";\n position: relative;\n\n .decision-item {\n cursor: initial;\n }\n "])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)", "var(--ds-border-radius-100, 3px)", themed({
19
- light: "var(--ds-background-neutral, ".concat(N20A, ")"),
20
- dark: "var(--ds-background-neutral, ".concat(DN50, ")")
21
- })({
22
- theme: theme
23
- }));
16
+ export var decisionStyles = function decisionStyles() {
17
+ return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n margin: ", " 0 0 0;\n padding: ", ";\n padding-left: ", ";\n border-radius: ", ";\n background-color: ", ";\n position: relative;\n\n .decision-item {\n cursor: initial;\n }\n "])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)", "var(--ds-border-radius-100, 3px)", "var(--ds-background-neutral, ".concat(N20A, ")"));
24
18
  };
25
19
  export var placeholderStyles = function placeholderStyles(offset) {
26
20
  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n margin: 0 0 0 ", "px;\n position: absolute;\n color: ", ";\n pointer-events: none;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: calc(100% - 50px);\n "])), offset, "var(--ds-text-subtlest, ".concat(N200, ")"));
@@ -32,122 +26,5 @@ export var placeholderStyles = function placeholderStyles(offset) {
32
26
  * which will allow migration to use @atlaskit/checkbox instead
33
27
  */
34
28
  export var checkboxStyles = function checkboxStyles(isRenderer) {
35
- return function (theme) {
36
- return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n flex: 0 0 24px;\n width: 24px;\n height: 24px;\n position: relative;\n align-self: start;\n\n & > input[type='checkbox'] {\n width: 16px;\n height: 16px;\n z-index: 1;\n cursor: pointer;\n outline: none;\n margin: 0;\n opacity: 0;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n &[disabled] {\n cursor: default;\n }\n\n + span {\n width: 24px;\n height: 24px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n + span > svg {\n box-sizing: border-box;\n display: inline;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n max-width: unset;\n max-height: unset;\n position: absolute;\n overflow: hidden;\n color: ", ";\n transition: color 0.2s ease-in-out, fill 0.2s ease-in-out;\n path:first-of-type {\n visibility: hidden;\n }\n rect:first-of-type {\n stroke: ", ";\n stroke-width: ", ";\n transition: stroke 0.2s ease-in-out;\n }\n }\n\n &&:focus + span > svg,\n &&:checked:focus + span > svg {\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:hover + span > svg {\n color: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:checked:hover + span > svg {\n color: ", ";\n fill: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:checked {\n + span > svg {\n path:first-of-type {\n visibility: visible;\n }\n color: ", ";\n fill: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n }\n\n &:active + span > svg {\n color: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:checked:active + span > svg {\n color: ", ";\n fill: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:disabled + span > svg,\n &:disabled:hover + span > svg,\n &:disabled:focus + span > svg,\n &:disabled:active + span > svg {\n color: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:disabled:checked + span > svg {\n fill: ", ";\n }\n\n &:focus + span > svg rect:first-of-type {\n stroke: ", ";\n }\n &:checked:focus + span {\n & > svg {\n rect:first-of-type {\n stroke: ", ";\n }\n }\n }\n\n ", "\n }\n "])), themed({
37
- light: checkboxTheme.light.boxColor.rest,
38
- dark: checkboxTheme.dark.boxColor.rest
39
- })({
40
- theme: theme
41
- }), themed({
42
- light: checkboxTheme.light.borderColor.rest,
43
- dark: checkboxTheme.dark.borderColor.rest
44
- })({
45
- theme: theme
46
- }), getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? 1 : 2, themed({
47
- light: checkboxTheme.light.borderColor.focused,
48
- dark: checkboxTheme.dark.borderColor.focused
49
- })({
50
- theme: theme
51
- }), themed({
52
- light: checkboxTheme.light.boxColor.hovered,
53
- dark: checkboxTheme.dark.boxColor.hovered
54
- })({
55
- theme: theme
56
- }), themed({
57
- light: checkboxTheme.light.borderColor.hovered,
58
- dark: checkboxTheme.dark.borderColor.hovered
59
- })({
60
- theme: theme
61
- }), themed({
62
- light: checkboxTheme.light.boxColor.hoveredAndChecked,
63
- dark: checkboxTheme.dark.boxColor.hoveredAndChecked
64
- })({
65
- theme: theme
66
- }), themed({
67
- light: checkboxTheme.light.tickColor.checked,
68
- dark: checkboxTheme.dark.tickColor.checked
69
- })({
70
- theme: theme
71
- }), themed({
72
- light: checkboxTheme.light.borderColor.hoveredAndChecked,
73
- dark: checkboxTheme.dark.borderColor.hoveredAndChecked
74
- })({
75
- theme: theme
76
- }), themed({
77
- light: checkboxTheme.light.boxColor.checked,
78
- dark: checkboxTheme.dark.boxColor.checked
79
- })({
80
- theme: theme
81
- }), themed({
82
- light: checkboxTheme.light.tickColor.checked,
83
- dark: checkboxTheme.dark.tickColor.checked
84
- })({
85
- theme: theme
86
- }), themed({
87
- light: checkboxTheme.light.borderColor.checked,
88
- dark: checkboxTheme.dark.borderColor.checked
89
- })({
90
- theme: theme
91
- }), themed({
92
- light: checkboxTheme.light.boxColor.active,
93
- dark: checkboxTheme.dark.boxColor.active
94
- })({
95
- theme: theme
96
- }), themed({
97
- light: checkboxTheme.light.borderColor.active,
98
- dark: checkboxTheme.dark.borderColor.active
99
- })({
100
- theme: theme
101
- }), themed({
102
- light: checkboxTheme.light.boxColor.active,
103
- dark: checkboxTheme.dark.boxColor.active
104
- })({
105
- theme: theme
106
- }), themed({
107
- light: checkboxTheme.light.tickColor.activeAndChecked,
108
- dark: checkboxTheme.dark.tickColor.activeAndChecked
109
- })({
110
- theme: theme
111
- }), themed({
112
- light: checkboxTheme.light.borderColor.active,
113
- dark: checkboxTheme.dark.borderColor.active
114
- })({
115
- theme: theme
116
- }), themed({
117
- light: checkboxTheme.light.boxColor.disabled,
118
- dark: checkboxTheme.dark.boxColor.disabled
119
- })({
120
- theme: theme
121
- }), themed({
122
- light: checkboxTheme.light.borderColor.disabled,
123
- dark: checkboxTheme.dark.borderColor.disabled
124
- })({
125
- theme: theme
126
- }), themed({
127
- light: checkboxTheme.light.tickColor.disabledAndChecked,
128
- dark: checkboxTheme.dark.tickColor.disabledAndChecked
129
- })({
130
- theme: theme
131
- }), themed({
132
- light: checkboxTheme.light.boxColor.checked,
133
- dark: checkboxTheme.dark.boxColor.checked
134
- })({
135
- theme: theme
136
- }), themed({
137
- light: checkboxTheme.light.borderColor.focused,
138
- dark: checkboxTheme.dark.borderColor.focused
139
- })({
140
- theme: theme
141
- }), isRenderer ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n &:focus + span > svg,\n &:checked:focus + span > svg {\n rect:first-of-type {\n stroke: ", ";\n }\n }\n "])), themed({
142
- light: checkboxTheme.light.borderColor.focused,
143
- dark: checkboxTheme.dark.borderColor.focused
144
- })({
145
- theme: theme
146
- })) : css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n &:active:focus + span > svg,\n &:checked:active:focus + span > svg {\n rect:first-of-type {\n stroke: ", ";\n }\n }\n "])), themed({
147
- light: checkboxTheme.light.borderColor.focused,
148
- dark: checkboxTheme.dark.borderColor.focused
149
- })({
150
- theme: theme
151
- })));
152
- };
29
+ return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n flex: 0 0 24px;\n width: 24px;\n height: 24px;\n position: relative;\n align-self: start;\n\n & > input[type='checkbox'] {\n width: 16px;\n height: 16px;\n z-index: 1;\n cursor: pointer;\n outline: none;\n margin: 0;\n opacity: 0;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n &[disabled] {\n cursor: default;\n }\n\n + span {\n width: 24px;\n height: 24px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n + span > svg {\n box-sizing: border-box;\n display: inline;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n max-width: unset;\n max-height: unset;\n position: absolute;\n overflow: hidden;\n color: ", ";\n transition: color 0.2s ease-in-out, fill 0.2s ease-in-out;\n path:first-of-type {\n visibility: hidden;\n }\n rect:first-of-type {\n stroke: ", ";\n stroke-width: ", ";\n transition: stroke 0.2s ease-in-out;\n }\n }\n\n &&:focus + span > svg,\n &&:checked:focus + span > svg {\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:hover + span > svg {\n color: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:checked:hover + span > svg {\n color: ", ";\n fill: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:checked {\n + span > svg {\n path:first-of-type {\n visibility: visible;\n }\n color: ", ";\n fill: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n }\n\n &:active + span > svg {\n color: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:checked:active + span > svg {\n color: ", ";\n fill: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:disabled + span > svg,\n &:disabled:hover + span > svg,\n &:disabled:focus + span > svg,\n &:disabled:active + span > svg {\n color: ", ";\n rect:first-of-type {\n stroke: ", ";\n }\n }\n\n &:disabled:checked + span > svg {\n fill: ", ";\n }\n\n &:focus + span > svg rect:first-of-type {\n stroke: ", ";\n }\n &:checked:focus + span {\n & > svg {\n rect:first-of-type {\n stroke: ", ";\n }\n }\n }\n\n ", "\n }\n "])), checkboxTheme.light.boxColor.rest, checkboxTheme.light.borderColor.rest, getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? 1 : 2, checkboxTheme.light.borderColor.focused, checkboxTheme.light.boxColor.hovered, checkboxTheme.light.borderColor.hovered, checkboxTheme.light.boxColor.hoveredAndChecked, checkboxTheme.light.tickColor.checked, checkboxTheme.light.borderColor.hoveredAndChecked, checkboxTheme.light.boxColor.checked, checkboxTheme.light.tickColor.checked, checkboxTheme.light.borderColor.checked, checkboxTheme.light.boxColor.active, checkboxTheme.light.borderColor.active, checkboxTheme.light.boxColor.active, checkboxTheme.light.tickColor.activeAndChecked, checkboxTheme.light.borderColor.active, checkboxTheme.light.boxColor.disabled, checkboxTheme.light.borderColor.disabled, checkboxTheme.light.tickColor.disabledAndChecked, checkboxTheme.light.boxColor.checked, checkboxTheme.light.borderColor.focused, isRenderer ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n &:focus + span > svg,\n &:checked:focus + span > svg {\n rect:first-of-type {\n stroke: ", ";\n }\n }\n "])), checkboxTheme.light.borderColor.focused) : css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n &:active:focus + span > svg,\n &:checked:active:focus + span > svg {\n rect:first-of-type {\n stroke: ", ";\n }\n }\n "])), checkboxTheme.light.borderColor.focused));
153
30
  };
package/dist/types/components/Item.d.ts CHANGED
@@ -2,7 +2,6 @@
2
2
  import { PureComponent } from 'react';
3
3
  import { jsx } from '@emotion/react';
4
4
  import { Appearance, ContentRef, TaskType, DecisionType } from '../types';
5
- import type { Theme } from '@atlaskit/theme/types';
6
5
  export interface Props {
7
6
  icon: JSX.Element;
8
7
  itemType: TaskType | DecisionType;
@@ -15,7 +14,6 @@ export interface Props {
15
14
  [key: string]: string | number;
16
15
  };
17
16
  checkBoxId?: string;
18
- theme: Theme;
19
17
  }
20
18
  export default class Item extends PureComponent<Props, {}> {
21
19
  static defaultProps: Partial<Props>;
package/dist/types/components/styles.d.ts CHANGED
@@ -1,13 +1,12 @@
1
- import type { Theme } from '@atlaskit/theme/types';
2
1
  export declare const listStyles: import("@emotion/react").SerializedStyles;
3
2
  export declare const taskListStyles: import("@emotion/react").SerializedStyles;
4
3
  export declare const contentStyles: import("@emotion/react").SerializedStyles;
5
4
  export declare const taskStyles: import("@emotion/react").SerializedStyles;
6
- export declare const decisionStyles: (theme: Theme) => import("@emotion/react").SerializedStyles;
5
+ export declare const decisionStyles: () => import("@emotion/react").SerializedStyles;
7
6
  export declare const placeholderStyles: (offset: number) => import("@emotion/react").SerializedStyles;
8
7
  /**
9
8
  * References packages/design-system/checkbox/src/checkbox.tsx
10
9
  * To be used until mobile editor does not require legacy themed() API anymore,
11
10
  * which will allow migration to use @atlaskit/checkbox instead
12
11
  */
13
- export declare const checkboxStyles: (isRenderer: boolean | undefined) => (theme: Theme) => import("@emotion/react").SerializedStyles;
12
+ export declare const checkboxStyles: (isRenderer: boolean | undefined) => import("@emotion/react").SerializedStyles;
package/dist/types-ts4.5/components/Item.d.ts CHANGED
@@ -2,7 +2,6 @@
2
2
  import { PureComponent } from 'react';
3
3
  import { jsx } from '@emotion/react';
4
4
  import { Appearance, ContentRef, TaskType, DecisionType } from '../types';
5
- import type { Theme } from '@atlaskit/theme/types';
6
5
  export interface Props {
7
6
  icon: JSX.Element;
8
7
  itemType: TaskType | DecisionType;
@@ -15,7 +14,6 @@ export interface Props {
15
14
  [key: string]: string | number;
16
15
  };
17
16
  checkBoxId?: string;
18
- theme: Theme;
19
17
  }
20
18
  export default class Item extends PureComponent<Props, {}> {
21
19
  static defaultProps: Partial<Props>;
package/dist/types-ts4.5/components/styles.d.ts CHANGED
@@ -1,13 +1,12 @@
1
- import type { Theme } from '@atlaskit/theme/types';
2
1
  export declare const listStyles: import("@emotion/react").SerializedStyles;
3
2
  export declare const taskListStyles: import("@emotion/react").SerializedStyles;
4
3
  export declare const contentStyles: import("@emotion/react").SerializedStyles;
5
4
  export declare const taskStyles: import("@emotion/react").SerializedStyles;
6
- export declare const decisionStyles: (theme: Theme) => import("@emotion/react").SerializedStyles;
5
+ export declare const decisionStyles: () => import("@emotion/react").SerializedStyles;
7
6
  export declare const placeholderStyles: (offset: number) => import("@emotion/react").SerializedStyles;
8
7
  /**
9
8
  * References packages/design-system/checkbox/src/checkbox.tsx
10
9
  * To be used until mobile editor does not require legacy themed() API anymore,
11
10
  * which will allow migration to use @atlaskit/checkbox instead
12
11
  */
13
- export declare const checkboxStyles: (isRenderer: boolean | undefined) => (theme: Theme) => import("@emotion/react").SerializedStyles;
12
+ export declare const checkboxStyles: (isRenderer: boolean | undefined) => import("@emotion/react").SerializedStyles;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/task-decision",
3
- "version": "17.9.5",
3
+ "version": "17.9.6",
4
4
  "description": "Tasks and decisions react components",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"