@atlaskit/task-decision 17.3.2 → 17.4.2

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/task-decision
 
+## 17.4.2
+
+### Patch Changes
+
+- [`a424e62b264`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a424e62b264) - Changes to support Node 16 Typescript definitions from `@types/node`.
+
+## 17.4.1
+
+### Patch Changes
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+
+## 17.4.0
+
+### Minor Changes
+
+- [`785548f317d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/785548f317d) - [ux] Instrumented `@atlaskit/task-decision` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- [`7edfc6b2928`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7edfc6b2928) - [ux] Fix for checkbox hover state
+- Updated dependencies
+
 ## 17.3.2
 
 ### Patch Changes

package/dist/cjs/styled/DecisionItem.js

@@ -17,12 +17,14 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 var EditorIconWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 16px;\n  height: 16px;\n  width: 16px;\n  color: ", ";\n  margin: 4px ", "px 0 0;\n\n  > span {\n    margin: -8px;\n  }\n"])), function (props) {
-  return props.showPlaceholder ? _colors.N100 : (0, _components.themed)({
-    light: _colors.G400,
-    dark: _colors.G200
+  return props.showPlaceholder ? (0, _tokens.token)('color.icon.subtle', _colors.N100) : (0, _components.themed)({
+    light: (0, _tokens.token)('color.icon.success', _colors.G400),
+    dark: (0, _tokens.token)('color.icon.success', _colors.G200)
   });
 }, (0, _constants.gridSize)() * 1.5);
 

package/dist/cjs/styled/Item.js

@@ -17,6 +17,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var ContentWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n  word-wrap: break-word;\n  min-width: 0;\n  flex: 1 1 auto;\n"])));
@@ -28,8 +30,8 @@ var TaskWrapper = _styledComponents.default.div(_templateObject2 || (_templateOb
 exports.TaskWrapper = TaskWrapper;
 
 var DecisionWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  margin: ", "px 0 0 0;\n  padding: ", "px;\n  padding-left: ", "px;\n  border-radius: ", "px;\n  background-color: ", ";\n  position: relative;\n\n  .decision-item {\n    cursor: initial;\n  }\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)(), (0, _constants.gridSize)() * 1.5, (0, _constants.borderRadius)(), (0, _components.themed)({
-  light: _colors.N20A,
-  dark: _colors.DN50
+  light: (0, _tokens.token)('color.background.neutral', _colors.N20A),
+  dark: (0, _tokens.token)('color.background.neutral', _colors.DN50)
 }));
 
 exports.DecisionWrapper = DecisionWrapper;

package/dist/cjs/styled/Placeholder.js

@@ -13,10 +13,12 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 var Placeholder = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", ";\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"])), function (props) {
   return "0 0 0 ".concat(props.offset, "px;");
-}, _colors.N100);
+}, (0, _tokens.token)('color.text.subtlest', _colors.N100));
 
 exports.Placeholder = Placeholder;

package/dist/cjs/styled/TaskItem.js

@@ -19,26 +19,28 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2;
 
 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); }
 
 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; }
 
-var CheckBoxWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 16px;\n  width: 16px;\n  height: 16px;\n  position: relative;\n  align-self: start;\n  margin: 4px ", "px 0 0;\n\n  & > input[type='checkbox'] {\n    width: 16px;\n    height: 16px;\n    z-index: 1;\n    cursor: pointer;\n    position: absolute;\n    outline: none;\n    margin: 0;\n    opacity: 0;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n\n    + div {\n      box-sizing: border-box;\n      display: block;\n      position: relative;\n      width: 100%;\n      cursor: pointer;\n\n      &::after {\n        background: ", "\n        background-size: 16px;\n        border-radius: 3px;\n        border-style: solid;\n        border-width: 1px;\n        border-color: ", "\n        box-sizing: border-box;\n        content: '';\n        height: 16px;\n        left: 50%;\n        position: absolute;\n        transition: border-color 0.2s ease-in-out;\n        top: 8px;\n        width: 16px;\n        transform: translate(-50%, -50%);\n      }\n    }\n    &:focus-visible + div:after {\n      ", "\n    }\n    &:not([disabled]):hover + div::after {\n      background: ", "\n      transition: border 0.2s ease-in-out;\n    }\n    &[disabled] + div {\n      opacity: 0.5;\n      cursor: default;\n    }\n    &:checked {\n      + div::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDA1MkNDIj48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n        border: 0;\n        border-color: transparent;\n      }\n      &:not([disabled]):hover + div::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDc0N0E2Ij48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n      }\n    }\n  }\n"])), (0, _constants.gridSize)(), (0, _components.themed)({
-  light: _colors.N0,
-  dark: _colors.DN100
+var CheckBoxWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 16px;\n  width: 16px;\n  height: 16px;\n  position: relative;\n  align-self: start;\n  margin: 4px ", "px 0 0;\n\n  & > input[type='checkbox'] {\n    width: 16px;\n    height: 16px;\n    z-index: 1;\n    cursor: pointer;\n    position: absolute;\n    outline: none;\n    margin: 0;\n    opacity: 0;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n\n    + div {\n      box-sizing: border-box;\n      display: block;\n      position: relative;\n      width: 100%;\n      cursor: pointer;\n\n      &::after {\n        background: ", ";\n        background-size: 16px;\n        border-radius: 3px;\n        border-style: solid;\n        border-width: 1px;\n        border-color: ", ";\n        box-sizing: border-box;\n        content: '';\n        height: 16px;\n        left: 50%;\n        position: absolute;\n        transition: border-color 0.2s ease-in-out;\n        top: 8px;\n        width: 16px;\n        transform: translate(-50%, -50%);\n      }\n    }\n    &:focus-visible + div:after {\n      ", "\n    }\n    &:not([disabled]):hover + div::after {\n      background: ", ";\n      transition: border 0.2s ease-in-out;\n    }\n    &[disabled] + div {\n      opacity: 0.5;\n      cursor: default;\n    }\n    &:checked {\n      + div::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDA1MkNDIj48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n        border: 0;\n        border-color: transparent;\n      }\n      &:not([disabled]):hover + div::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDc0N0E2Ij48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n      }\n    }\n  }\n"])), (0, _constants.gridSize)(), (0, _components.themed)({
+  light: (0, _tokens.token)('color.background.input', _colors.N0),
+  dark: (0, _tokens.token)('color.background.input', _colors.DN100)
 }), (0, _components.themed)({
-  light: _colors.N90,
-  dark: _colors.DN200
+  light: (0, _tokens.token)('color.border', _colors.N90),
+  dark: (0, _tokens.token)('color.border', _colors.DN200)
 }), function (props) {
-  return props.isRenderer ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n              outline: 2px solid ", ";\n            "])), (0, _components.themed)({
-    light: _colors.B300,
-    dark: _colors.B75
+  return props.isRenderer ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n              outline: 2px solid\n                ", ";\n            "])), (0, _components.themed)({
+    light: (0, _tokens.token)('color.border.focused', _colors.B300),
+    dark: (0, _tokens.token)('color.border.focused', _colors.B75)
   })) : '';
 }, (0, _components.themed)({
-  light: _colors.N30,
-  dark: _colors.B75
+  light: (0, _tokens.token)('color.background.input', _colors.N30),
+  dark: (0, _tokens.token)('color.background.input', _colors.B75)
 }));
 
 exports.CheckBoxWrapper = CheckBoxWrapper;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/task-decision",
-	"version": "17.3.2",
+	"version": "17.4.2",
 	"sideEffects": false
 }

package/dist/es2019/styled/DecisionItem.js

@@ -4,13 +4,14 @@ import styled from 'styled-components'; // @ts-ignore: unused variable
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N100, G400, G200 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const EditorIconWrapper = styled.span`
   flex: 0 0 16px;
   height: 16px;
   width: 16px;
-  color: ${props => props.showPlaceholder ? N100 : themed({
-  light: G400,
-  dark: G200
+  color: ${props => props.showPlaceholder ? token('color.icon.subtle', N100) : themed({
+  light: token('color.icon.success', G400),
+  dark: token('color.icon.success', G200)
 })};
   margin: 4px ${gridSize() * 1.5}px 0 0;
 

package/dist/es2019/styled/Item.js

@@ -4,6 +4,7 @@ import styled from 'styled-components'; // @ts-ignore: unused variable
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { N20A, DN50 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const ContentWrapper = styled.div`
   margin: 0;
   word-wrap: break-word;
@@ -24,8 +25,8 @@ export const DecisionWrapper = styled.div`
   padding-left: ${gridSize() * 1.5}px;
   border-radius: ${borderRadius()}px;
   background-color: ${themed({
-  light: N20A,
-  dark: DN50
+  light: token('color.background.neutral', N20A),
+  dark: token('color.background.neutral', DN50)
 })};
   position: relative;
 

package/dist/es2019/styled/Placeholder.js

@@ -2,10 +2,11 @@ import styled from 'styled-components'; // @ts-ignore: unused variable
 // prettier-ignore
 
 import { N100 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const Placeholder = styled.span`
   margin: ${props => `0 0 0 ${props.offset}px;`};
   position: absolute;
-  color: ${N100};
+  color: ${token('color.text.subtlest', N100)};
   pointer-events: none;
   text-overflow: ellipsis;
   overflow: hidden;

package/dist/es2019/styled/TaskItem.js

@@ -4,6 +4,7 @@ import styled, { css } from 'styled-components'; // @ts-ignore: unused variable
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N0, DN100, DN200, N30, N90, B75, B300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const CheckBoxWrapper = styled.span`
   flex: 0 0 16px;
   width: 16px;
@@ -34,17 +35,17 @@ export const CheckBoxWrapper = styled.span`
 
       &::after {
         background: ${themed({
-  light: N0,
-  dark: DN100
-})}
+  light: token('color.background.input', N0),
+  dark: token('color.background.input', DN100)
+})};
         background-size: 16px;
         border-radius: 3px;
         border-style: solid;
         border-width: 1px;
         border-color: ${themed({
-  light: N90,
-  dark: DN200
-})}
+  light: token('color.border', N90),
+  dark: token('color.border', DN200)
+})};
         box-sizing: border-box;
         content: '';
         height: 16px;
@@ -58,17 +59,18 @@ export const CheckBoxWrapper = styled.span`
     }
     &:focus-visible + div:after {
       ${props => props.isRenderer ? css`
-              outline: 2px solid ${themed({
-  light: B300,
-  dark: B75
+              outline: 2px solid
+                ${themed({
+  light: token('color.border.focused', B300),
+  dark: token('color.border.focused', B75)
 })};
             ` : ''}
     }
     &:not([disabled]):hover + div::after {
       background: ${themed({
-  light: N30,
-  dark: B75
-})}
+  light: token('color.background.input', N30),
+  dark: token('color.background.input', B75)
+})};
       transition: border 0.2s ease-in-out;
     }
     &[disabled] + div {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/task-decision",
-	"version": "17.3.2",
+	"version": "17.4.2",
 	"sideEffects": false
 }

package/dist/esm/styled/DecisionItem.js

@@ -8,9 +8,10 @@ import styled from 'styled-components'; // @ts-ignore: unused variable
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N100, G400, G200 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export var EditorIconWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 0 0 16px;\n  height: 16px;\n  width: 16px;\n  color: ", ";\n  margin: 4px ", "px 0 0;\n\n  > span {\n    margin: -8px;\n  }\n"])), function (props) {
-  return props.showPlaceholder ? N100 : themed({
-    light: G400,
-    dark: G200
+  return props.showPlaceholder ? token('color.icon.subtle', N100) : themed({
+    light: token('color.icon.success', G400),
+    dark: token('color.icon.success', G200)
   });
 }, gridSize() * 1.5);

package/dist/esm/styled/Item.js

@@ -8,10 +8,11 @@ import styled from 'styled-components'; // @ts-ignore: unused variable
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { N20A, DN50 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export var ContentWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0;\n  word-wrap: break-word;\n  min-width: 0;\n  flex: 1 1 auto;\n"])));
 export var TaskWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 6px 3px;\n  position: relative;\n"])));
 export var DecisionWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  margin: ", "px 0 0 0;\n  padding: ", "px;\n  padding-left: ", "px;\n  border-radius: ", "px;\n  background-color: ", ";\n  position: relative;\n\n  .decision-item {\n    cursor: initial;\n  }\n"])), gridSize(), gridSize(), gridSize() * 1.5, borderRadius(), themed({
-  light: N20A,
-  dark: DN50
+  light: token('color.background.neutral', N20A),
+  dark: token('color.background.neutral', DN50)
 }));
 export var ParticipantWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: -2px 8px;\n"])));

package/dist/esm/styled/Placeholder.js

@@ -6,6 +6,7 @@ import styled from 'styled-components'; // @ts-ignore: unused variable
 // prettier-ignore
 
 import { N100 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export var Placeholder = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: ", ";\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"])), function (props) {
   return "0 0 0 ".concat(props.offset, "px;");
-}, N100);
+}, token('color.text.subtlest', N100));

package/dist/esm/styled/TaskItem.js

@@ -8,18 +8,19 @@ import styled, { css } from 'styled-components'; // @ts-ignore: unused variable
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N0, DN100, DN200, N30, N90, B75, B300 } from '@atlaskit/theme/colors';
-export var CheckBoxWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 0 0 16px;\n  width: 16px;\n  height: 16px;\n  position: relative;\n  align-self: start;\n  margin: 4px ", "px 0 0;\n\n  & > input[type='checkbox'] {\n    width: 16px;\n    height: 16px;\n    z-index: 1;\n    cursor: pointer;\n    position: absolute;\n    outline: none;\n    margin: 0;\n    opacity: 0;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n\n    + div {\n      box-sizing: border-box;\n      display: block;\n      position: relative;\n      width: 100%;\n      cursor: pointer;\n\n      &::after {\n        background: ", "\n        background-size: 16px;\n        border-radius: 3px;\n        border-style: solid;\n        border-width: 1px;\n        border-color: ", "\n        box-sizing: border-box;\n        content: '';\n        height: 16px;\n        left: 50%;\n        position: absolute;\n        transition: border-color 0.2s ease-in-out;\n        top: 8px;\n        width: 16px;\n        transform: translate(-50%, -50%);\n      }\n    }\n    &:focus-visible + div:after {\n      ", "\n    }\n    &:not([disabled]):hover + div::after {\n      background: ", "\n      transition: border 0.2s ease-in-out;\n    }\n    &[disabled] + div {\n      opacity: 0.5;\n      cursor: default;\n    }\n    &:checked {\n      + div::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDA1MkNDIj48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n        border: 0;\n        border-color: transparent;\n      }\n      &:not([disabled]):hover + div::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDc0N0E2Ij48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n      }\n    }\n  }\n"])), gridSize(), themed({
-  light: N0,
-  dark: DN100
+import { token } from '@atlaskit/tokens';
+export var CheckBoxWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 0 0 16px;\n  width: 16px;\n  height: 16px;\n  position: relative;\n  align-self: start;\n  margin: 4px ", "px 0 0;\n\n  & > input[type='checkbox'] {\n    width: 16px;\n    height: 16px;\n    z-index: 1;\n    cursor: pointer;\n    position: absolute;\n    outline: none;\n    margin: 0;\n    opacity: 0;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n\n    + div {\n      box-sizing: border-box;\n      display: block;\n      position: relative;\n      width: 100%;\n      cursor: pointer;\n\n      &::after {\n        background: ", ";\n        background-size: 16px;\n        border-radius: 3px;\n        border-style: solid;\n        border-width: 1px;\n        border-color: ", ";\n        box-sizing: border-box;\n        content: '';\n        height: 16px;\n        left: 50%;\n        position: absolute;\n        transition: border-color 0.2s ease-in-out;\n        top: 8px;\n        width: 16px;\n        transform: translate(-50%, -50%);\n      }\n    }\n    &:focus-visible + div:after {\n      ", "\n    }\n    &:not([disabled]):hover + div::after {\n      background: ", ";\n      transition: border 0.2s ease-in-out;\n    }\n    &[disabled] + div {\n      opacity: 0.5;\n      cursor: default;\n    }\n    &:checked {\n      + div::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDA1MkNDIj48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n        border: 0;\n        border-color: transparent;\n      }\n      &:not([disabled]):hover + div::after {\n        background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICA8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyIiBmaWxsPSIjMDc0N0E2Ij48L3JlY3Q+DQogIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik05LjM3NCA0LjkxNEw1LjQ1NiA4LjgzMmEuNzY5Ljc2OSAwIDAgMS0xLjA4OCAwTDIuNjI2IDcuMDkxYS43NjkuNzY5IDAgMSAxIDEuMDg4LTEuMDg5TDQuOTEyIDcuMmwzLjM3NC0zLjM3NGEuNzY5Ljc2OSAwIDEgMSAxLjA4OCAxLjA4OCI+PC9wYXRoPg0KPC9zdmc+)\n          no-repeat 0 0;\n        background-size: 16px;\n      }\n    }\n  }\n"])), gridSize(), themed({
+  light: token('color.background.input', N0),
+  dark: token('color.background.input', DN100)
 }), themed({
-  light: N90,
-  dark: DN200
+  light: token('color.border', N90),
+  dark: token('color.border', DN200)
 }), function (props) {
-  return props.isRenderer ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              outline: 2px solid ", ";\n            "])), themed({
-    light: B300,
-    dark: B75
+  return props.isRenderer ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              outline: 2px solid\n                ", ";\n            "])), themed({
+    light: token('color.border.focused', B300),
+    dark: token('color.border.focused', B75)
   })) : '';
 }, themed({
-  light: N30,
-  dark: B75
+  light: token('color.background.input', N30),
+  dark: token('color.background.input', B75)
 }));

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/task-decision",
-	"version": "17.3.2",
+	"version": "17.4.2",
 	"sideEffects": false
 }

package/dist/types/analytics/index.d.ts

@@ -1,2 +1,2 @@
 export declare const fabricElementsChannel = "fabric-elements";
-export declare const createAndFireEventInElementsChannel: (payload: Record<string, any>) => (createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;
+export declare const createAndFireEventInElementsChannel: (payload: import("@atlaskit/analytics-next").AnalyticsEventPayload) => (createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;

package/dist/types/components/TaskItem.d.ts

@@ -26,5 +26,5 @@ export declare class TaskItem extends PureComponent<Props & WithAnalyticsEventsP
     handleOnKeyPress: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     render(): JSX.Element;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Props & WithAnalyticsEventsProps, "placeholder" | "children" | "onChange" | "showPlaceholder" | "appearance" | "contentRef" | "dataAttributes" | "taskId" | "isDone" | "isRenderer" | "disabled">, never> & Partial<Pick<Pick<Props & WithAnalyticsEventsProps, "placeholder" | "children" | "onChange" | "showPlaceholder" | "appearance" | "contentRef" | "dataAttributes" | "taskId" | "isDone" | "isRenderer" | "disabled">, "placeholder" | "children" | "onChange" | "showPlaceholder" | "appearance" | "contentRef" | "dataAttributes" | "taskId" | "isDone" | "isRenderer" | "disabled">> & Partial<Pick<Partial<Props>, never>> & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Props & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<Props & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps>, keyof Props>> & Partial<Pick<Partial<Props>, never>> & React.RefAttributes<any>>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/task-decision",
-  "version": "17.3.2",
+  "version": "17.4.2",
   "description": "Tasks and decisions react components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,6 +30,7 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.9.0",
     "@atlaskit/util-service-support": "^6.1.0",
     "@babel/runtime": "^7.0.0",
     "uuid": "^3.1.0"
@@ -44,9 +45,9 @@
     "@atlaskit/analytics-listeners": "^8.2.0",
     "@atlaskit/avatar": "^20.5.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-common": "^65.0.0",
+    "@atlaskit/editor-common": "^66.0.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
-    "@atlaskit/renderer": "^92.0.0",
+    "@atlaskit/renderer": "^93.0.0",
     "@atlaskit/util-data-test": "^17.2.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@types/url-search-params": "^0.10.0",
@@ -54,15 +55,17 @@
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "fetch-mock": "^8.0.0",
-    "jest-fetch-mock": "^3.0.3",
     "react": "^16.8.0",
     "sinon": "^2.2.0",
-    "typescript": "3.9.6",
+    "typescript": "4.2.4",
     "url-search-params": "^0.10.0"
   },
   "techstack": {
     "@atlassian/frontend": {
       "tree-shaking": []
+    },
+    "@repo/internal": {
+      "theming": "tokens"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"