@atlaskit/task-decision 17.5.6 → 17.5.7

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 +6 -0
  2. package/dist/cjs/components/DecisionItem.js +3 -5
  3. package/dist/cjs/components/Item.js +3 -5
  4. package/dist/cjs/components/TaskItem.js +8 -10
  5. package/dist/cjs/version.json +1 -1
  6. package/dist/es2019/components/DecisionItem.js +3 -4
  7. package/dist/es2019/components/Item.js +3 -4
  8. package/dist/es2019/components/TaskItem.js +8 -9
  9. package/dist/es2019/version.json +1 -1
  10. package/dist/esm/components/DecisionItem.js +3 -4
  11. package/dist/esm/components/Item.js +3 -4
  12. package/dist/esm/components/TaskItem.js +8 -9
  13. package/dist/esm/version.json +1 -1
  14. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/task-decision
2
2
 
3
+ ## 17.5.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [`6455cf006b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6455cf006b3) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving performance.
8
+
3
9
  ## 17.5.6
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/components/DecisionItem.js CHANGED
@@ -13,8 +13,6 @@ var _decision = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/deci
13
13
 
14
14
  var _Item = _interopRequireDefault(require("./Item"));
15
15
 
16
- var _tokens = require("@atlaskit/tokens");
17
-
18
16
  var _colors = require("@atlaskit/theme/colors");
19
17
 
20
18
  var _components = require("@atlaskit/theme/components");
@@ -29,9 +27,9 @@ var iconStyles = function iconStyles(showPlaceholder) {
29
27
  height: '16px',
30
28
  width: '16px',
31
29
  margin: "4px ".concat((0, _constants.gridSize)() * 1.5, "px 0 0"),
32
- color: showPlaceholder ? (0, _tokens.token)('color.icon.subtle', _colors.N100) : (0, _components.themed)({
33
- light: (0, _tokens.token)('color.icon.success', _colors.G400),
34
- dark: (0, _tokens.token)('color.icon.success', _colors.G200)
30
+ color: showPlaceholder ? "var(--ds-icon-subtle, ".concat(_colors.N100, ")") : (0, _components.themed)({
31
+ light: "var(--ds-icon-success, ".concat(_colors.G400, ")"),
32
+ dark: "var(--ds-icon-success, ".concat(_colors.G200, ")")
35
33
  })({
36
34
  theme: theme
37
35
  }),
package/dist/cjs/components/Item.js CHANGED
@@ -27,8 +27,6 @@ var _react2 = require("@emotion/react");
27
27
 
28
28
  var _components = require("@atlaskit/theme/components");
29
29
 
30
- var _tokens = require("@atlaskit/tokens");
31
-
32
30
  var _colors = require("@atlaskit/theme/colors");
33
31
 
34
32
  var _constants = require("@atlaskit/theme/constants");
@@ -59,8 +57,8 @@ var decisionStyles = function decisionStyles(theme) {
59
57
  paddingLeft: "".concat((0, _constants.gridSize)() * 1.5, "px"),
60
58
  borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
61
59
  backgroundColor: (0, _components.themed)({
62
- light: (0, _tokens.token)('color.background.neutral', _colors.N20A),
63
- dark: (0, _tokens.token)('color.background.neutral', _colors.DN50)
60
+ light: "var(--ds-background-neutral, ".concat(_colors.N20A, ")"),
61
+ dark: "var(--ds-background-neutral, ".concat(_colors.DN50, ")")
64
62
  })({
65
63
  theme: theme
66
64
  }),
@@ -75,7 +73,7 @@ var placeHolderStyles = function placeHolderStyles(offset) {
75
73
  return (0, _react2.css)({
76
74
  margin: "0 0 0 ".concat(offset, "px"),
77
75
  position: 'absolute',
78
- color: (0, _tokens.token)('color.text.subtlest', _colors.N100),
76
+ color: "var(--ds-text-subtlest, ".concat(_colors.N100, ")"),
79
77
  pointerEvents: 'none',
80
78
  textOverflow: 'ellipsis',
81
79
  overflow: 'hidden',
package/dist/cjs/components/TaskItem.js CHANGED
@@ -25,8 +25,6 @@ var _constants = require("@atlaskit/theme/constants");
25
25
 
26
26
  var _components = require("@atlaskit/theme/components");
27
27
 
28
- var _tokens = require("@atlaskit/tokens");
29
-
30
28
  var _colors = require("@atlaskit/theme/colors");
31
29
 
32
30
  var _templateObject, _templateObject2;
@@ -44,23 +42,23 @@ var getCheckBoxId = function getCheckBoxId(localId) {
44
42
  var checkboxStyles = function checkboxStyles(isRenderer) {
45
43
  return function (theme) {
46
44
  return (0, _react2.css)(_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: inline;\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 ", "\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)({
47
- light: (0, _tokens.token)('color.background.input', _colors.N0),
48
- dark: (0, _tokens.token)('color.background.input', _colors.DN100)
45
+ light: "var(--ds-background-input, ".concat(_colors.N0, ")"),
46
+ dark: "var(--ds-background-input, ".concat(_colors.DN100, ")")
49
47
  })({
50
48
  theme: theme
51
49
  }), (0, _components.themed)({
52
- light: (0, _tokens.token)('color.border', _colors.N90),
53
- dark: (0, _tokens.token)('color.border', _colors.DN200)
50
+ light: "var(--ds-border, ".concat(_colors.N90, ")"),
51
+ dark: "var(--ds-border, ".concat(_colors.DN200, ")")
54
52
  })({
55
53
  theme: theme
56
54
  }), isRenderer ? (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n &:focus-visible + div:after {\n outline: 2px solid\n ", ";\n }\n "])), (0, _components.themed)({
57
- light: (0, _tokens.token)('color.border.focused', _colors.B300),
58
- dark: (0, _tokens.token)('color.border.focused', _colors.B75)
55
+ light: "var(--ds-border-focused, ".concat(_colors.B300, ")"),
56
+ dark: "var(--ds-border-focused, ".concat(_colors.B75, ")")
59
57
  })({
60
58
  theme: theme
61
59
  })) : '', (0, _components.themed)({
62
- light: (0, _tokens.token)('color.background.input', _colors.N30),
63
- dark: (0, _tokens.token)('color.background.input', _colors.B75)
60
+ light: "var(--ds-background-input, ".concat(_colors.N30, ")"),
61
+ dark: "var(--ds-background-input, ".concat(_colors.B75, ")")
64
62
  })({
65
63
  theme: theme
66
64
  }));
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/task-decision",
3
- "version": "17.5.6",
3
+ "version": "17.5.7",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/components/DecisionItem.js CHANGED
@@ -2,7 +2,6 @@
2
2
  import { css, jsx } from '@emotion/react';
3
3
  import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
4
4
  import Item from './Item';
5
- import { token } from '@atlaskit/tokens';
6
5
  import { G200, G400, N100 } from '@atlaskit/theme/colors';
7
6
  import { themed, useGlobalTheme } from '@atlaskit/theme/components';
8
7
  import { gridSize } from '@atlaskit/theme/constants';
@@ -13,9 +12,9 @@ const iconStyles = showPlaceholder => theme => {
13
12
  height: '16px',
14
13
  width: '16px',
15
14
  margin: `4px ${gridSize() * 1.5}px 0 0`,
16
- color: showPlaceholder ? token('color.icon.subtle', N100) : themed({
17
- light: token('color.icon.success', G400),
18
- dark: token('color.icon.success', G200)
15
+ color: showPlaceholder ? `var(--ds-icon-subtle, ${N100})` : themed({
16
+ light: `var(--ds-icon-success, ${G400})`,
17
+ dark: `var(--ds-icon-success, ${G200})`
19
18
  })({
20
19
  theme
21
20
  }),
package/dist/es2019/components/Item.js CHANGED
@@ -5,7 +5,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
5
5
  import { PureComponent } from 'react';
6
6
  import { css, jsx } from '@emotion/react';
7
7
  import { themed } from '@atlaskit/theme/components';
8
- import { token } from '@atlaskit/tokens';
9
8
  import { DN50, N100, N20A } from '@atlaskit/theme/colors';
10
9
  import { borderRadius, gridSize } from '@atlaskit/theme/constants';
11
10
  const contentStyle = css({
@@ -29,8 +28,8 @@ const decisionStyles = theme => css({
29
28
  paddingLeft: `${gridSize() * 1.5}px`,
30
29
  borderRadius: `${borderRadius()}px`,
31
30
  backgroundColor: themed({
32
- light: token('color.background.neutral', N20A),
33
- dark: token('color.background.neutral', DN50)
31
+ light: `var(--ds-background-neutral, ${N20A})`,
32
+ dark: `var(--ds-background-neutral, ${DN50})`
34
33
  })({
35
34
  theme
36
35
  }),
@@ -43,7 +42,7 @@ const decisionStyles = theme => css({
43
42
  const placeHolderStyles = offset => css({
44
43
  margin: `0 0 0 ${offset}px`,
45
44
  position: 'absolute',
46
- color: token('color.text.subtlest', N100),
45
+ color: `var(--ds-text-subtlest, ${N100})`,
47
46
  pointerEvents: 'none',
48
47
  textOverflow: 'ellipsis',
49
48
  overflow: 'hidden',
package/dist/es2019/components/TaskItem.js CHANGED
@@ -6,7 +6,6 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
6
6
  import { createAndFireEventInElementsChannel } from '../analytics';
7
7
  import { gridSize } from '@atlaskit/theme/constants';
8
8
  import { themed, useGlobalTheme } from '@atlaskit/theme/components';
9
- import { token } from '@atlaskit/tokens';
10
9
  import { B300, B75, DN100, DN200, N0, N30, N90 } from '@atlaskit/theme/colors';
11
10
  let taskCount = 0;
12
11
 
@@ -41,8 +40,8 @@ const checkboxStyles = isRenderer => theme => css`
41
40
 
42
41
  &::after {
43
42
  background: ${themed({
44
- light: token('color.background.input', N0),
45
- dark: token('color.background.input', DN100)
43
+ light: `var(--ds-background-input, ${N0})`,
44
+ dark: `var(--ds-background-input, ${DN100})`
46
45
  })({
47
46
  theme
48
47
  })};
@@ -51,8 +50,8 @@ const checkboxStyles = isRenderer => theme => css`
51
50
  border-style: solid;
52
51
  border-width: 1px;
53
52
  border-color: ${themed({
54
- light: token('color.border', N90),
55
- dark: token('color.border', DN200)
53
+ light: `var(--ds-border, ${N90})`,
54
+ dark: `var(--ds-border, ${DN200})`
56
55
  })({
57
56
  theme
58
57
  })};
@@ -71,8 +70,8 @@ const checkboxStyles = isRenderer => theme => css`
71
70
  &:focus-visible + div:after {
72
71
  outline: 2px solid
73
72
  ${themed({
74
- light: token('color.border.focused', B300),
75
- dark: token('color.border.focused', B75)
73
+ light: `var(--ds-border-focused, ${B300})`,
74
+ dark: `var(--ds-border-focused, ${B75})`
76
75
  })({
77
76
  theme
78
77
  })};
@@ -81,8 +80,8 @@ const checkboxStyles = isRenderer => theme => css`
81
80
 
82
81
  &:not([disabled]):hover + div::after {
83
82
  background: ${themed({
84
- light: token('color.background.input', N30),
85
- dark: token('color.background.input', B75)
83
+ light: `var(--ds-background-input, ${N30})`,
84
+ dark: `var(--ds-background-input, ${B75})`
86
85
  })({
87
86
  theme
88
87
  })};
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/task-decision",
3
- "version": "17.5.6",
3
+ "version": "17.5.7",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/components/DecisionItem.js CHANGED
@@ -2,7 +2,6 @@
2
2
  import { css, jsx } from '@emotion/react';
3
3
  import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
4
4
  import Item from './Item';
5
- import { token } from '@atlaskit/tokens';
6
5
  import { G200, G400, N100 } from '@atlaskit/theme/colors';
7
6
  import { themed, useGlobalTheme } from '@atlaskit/theme/components';
8
7
  import { gridSize } from '@atlaskit/theme/constants';
@@ -14,9 +13,9 @@ var iconStyles = function iconStyles(showPlaceholder) {
14
13
  height: '16px',
15
14
  width: '16px',
16
15
  margin: "4px ".concat(gridSize() * 1.5, "px 0 0"),
17
- color: showPlaceholder ? token('color.icon.subtle', N100) : themed({
18
- light: token('color.icon.success', G400),
19
- dark: token('color.icon.success', G200)
16
+ color: showPlaceholder ? "var(--ds-icon-subtle, ".concat(N100, ")") : themed({
17
+ light: "var(--ds-icon-success, ".concat(G400, ")"),
18
+ dark: "var(--ds-icon-success, ".concat(G200, ")")
20
19
  })({
21
20
  theme: theme
22
21
  }),
package/dist/esm/components/Item.js CHANGED
@@ -14,7 +14,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
14
14
  import { PureComponent } from 'react';
15
15
  import { css, jsx } from '@emotion/react';
16
16
  import { themed } from '@atlaskit/theme/components';
17
- import { token } from '@atlaskit/tokens';
18
17
  import { DN50, N100, N20A } from '@atlaskit/theme/colors';
19
18
  import { borderRadius, gridSize } from '@atlaskit/theme/constants';
20
19
  var contentStyle = css({
@@ -39,8 +38,8 @@ var decisionStyles = function decisionStyles(theme) {
39
38
  paddingLeft: "".concat(gridSize() * 1.5, "px"),
40
39
  borderRadius: "".concat(borderRadius(), "px"),
41
40
  backgroundColor: themed({
42
- light: token('color.background.neutral', N20A),
43
- dark: token('color.background.neutral', DN50)
41
+ light: "var(--ds-background-neutral, ".concat(N20A, ")"),
42
+ dark: "var(--ds-background-neutral, ".concat(DN50, ")")
44
43
  })({
45
44
  theme: theme
46
45
  }),
@@ -55,7 +54,7 @@ var placeHolderStyles = function placeHolderStyles(offset) {
55
54
  return css({
56
55
  margin: "0 0 0 ".concat(offset, "px"),
57
56
  position: 'absolute',
58
- color: token('color.text.subtlest', N100),
57
+ color: "var(--ds-text-subtlest, ".concat(N100, ")"),
59
58
  pointerEvents: 'none',
60
59
  textOverflow: 'ellipsis',
61
60
  overflow: 'hidden',
package/dist/esm/components/TaskItem.js CHANGED
@@ -10,7 +10,6 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
10
10
  import { createAndFireEventInElementsChannel } from '../analytics';
11
11
  import { gridSize } from '@atlaskit/theme/constants';
12
12
  import { themed, useGlobalTheme } from '@atlaskit/theme/components';
13
- import { token } from '@atlaskit/tokens';
14
13
  import { B300, B75, DN100, DN200, N0, N30, N90 } from '@atlaskit/theme/colors';
15
14
  var taskCount = 0;
16
15
 
@@ -21,23 +20,23 @@ var getCheckBoxId = function getCheckBoxId(localId) {
21
20
  var checkboxStyles = function checkboxStyles(isRenderer) {
22
21
  return function (theme) {
23
22
  return css(_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: inline;\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 ", "\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({
24
- light: token('color.background.input', N0),
25
- dark: token('color.background.input', DN100)
23
+ light: "var(--ds-background-input, ".concat(N0, ")"),
24
+ dark: "var(--ds-background-input, ".concat(DN100, ")")
26
25
  })({
27
26
  theme: theme
28
27
  }), themed({
29
- light: token('color.border', N90),
30
- dark: token('color.border', DN200)
28
+ light: "var(--ds-border, ".concat(N90, ")"),
29
+ dark: "var(--ds-border, ".concat(DN200, ")")
31
30
  })({
32
31
  theme: theme
33
32
  }), isRenderer ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:focus-visible + div:after {\n outline: 2px solid\n ", ";\n }\n "])), themed({
34
- light: token('color.border.focused', B300),
35
- dark: token('color.border.focused', B75)
33
+ light: "var(--ds-border-focused, ".concat(B300, ")"),
34
+ dark: "var(--ds-border-focused, ".concat(B75, ")")
36
35
  })({
37
36
  theme: theme
38
37
  })) : '', themed({
39
- light: token('color.background.input', N30),
40
- dark: token('color.background.input', B75)
38
+ light: "var(--ds-background-input, ".concat(N30, ")"),
39
+ dark: "var(--ds-background-input, ".concat(B75, ")")
41
40
  })({
42
41
  theme: theme
43
42
  }));
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/task-decision",
3
- "version": "17.5.6",
3
+ "version": "17.5.7",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/task-decision",
3
- "version": "17.5.6",
3
+ "version": "17.5.7",
4
4
  "description": "Tasks and decisions react components",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"