@atlaskit/task-decision 17.9.12 → 17.10.0
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.
- package/CHANGELOG.md +1400 -956
- package/afm-cc/tsconfig.json +0 -3
- package/dist/cjs/components/styles.js +59 -9
- package/dist/cjs/components/theme.js +4 -5
- package/dist/es2019/components/styles.js +57 -61
- package/dist/es2019/components/theme.js +5 -6
- package/dist/esm/components/styles.js +59 -9
- package/dist/esm/components/theme.js +5 -6
- package/dist/types/components/theme.d.ts +4 -4
- package/dist/types-ts4.5/components/theme.d.ts +4 -4
- package/package.json +3 -9
package/afm-cc/tsconfig.json
CHANGED
|
@@ -7,23 +7,61 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.taskStyles = exports.taskListStyles = exports.placeholderStyles = exports.listStyles = exports.decisionStyles = exports.contentStyles = exports.checkboxStyles = void 0;
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
11
10
|
var _colors = require("@atlaskit/theme/colors");
|
|
12
11
|
var _theme = _interopRequireDefault(require("./theme"));
|
|
13
|
-
var _templateObject
|
|
12
|
+
var _templateObject;
|
|
14
13
|
/*
|
|
15
14
|
Increasing specificity with double ampersand to ensure these rules take
|
|
16
15
|
priority over the global styles applied to 'ol' elements.
|
|
17
16
|
*/
|
|
18
|
-
var listStyles = exports.listStyles = (0, _react.css)(
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
var listStyles = exports.listStyles = (0, _react.css)({
|
|
18
|
+
'&&': {
|
|
19
|
+
listStyleType: 'none',
|
|
20
|
+
paddingLeft: 0
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
var taskListStyles = exports.taskListStyles = (0, _react.css)({
|
|
24
|
+
'div + div': {
|
|
25
|
+
marginTop: "var(--ds-space-050, 4px)"
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
var contentStyles = exports.contentStyles = (0, _react.css)({
|
|
29
|
+
margin: 0,
|
|
30
|
+
wordWrap: 'break-word',
|
|
31
|
+
minWidth: 0,
|
|
32
|
+
flex: '1 1 auto'
|
|
33
|
+
});
|
|
34
|
+
var taskStyles = exports.taskStyles = (0, _react.css)({
|
|
35
|
+
display: 'flex',
|
|
36
|
+
flexDirection: 'row',
|
|
37
|
+
position: 'relative'
|
|
38
|
+
});
|
|
22
39
|
var decisionStyles = exports.decisionStyles = function decisionStyles() {
|
|
23
|
-
return (0, _react.css)(
|
|
40
|
+
return (0, _react.css)({
|
|
41
|
+
display: 'flex',
|
|
42
|
+
flexDirection: 'row',
|
|
43
|
+
margin: "var(--ds-space-100, 8px)".concat(" 0 0 0"),
|
|
44
|
+
padding: "var(--ds-space-100, 8px)",
|
|
45
|
+
paddingLeft: "var(--ds-space-150, 12px)",
|
|
46
|
+
borderRadius: "var(--ds-border-radius-100, 3px)",
|
|
47
|
+
backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N20A, ")"),
|
|
48
|
+
position: 'relative',
|
|
49
|
+
'.decision-item': {
|
|
50
|
+
cursor: 'initial'
|
|
51
|
+
}
|
|
52
|
+
});
|
|
24
53
|
};
|
|
25
54
|
var placeholderStyles = exports.placeholderStyles = function placeholderStyles(offset) {
|
|
26
|
-
return (0, _react.css)(
|
|
55
|
+
return (0, _react.css)({
|
|
56
|
+
margin: "0 0 0 ".concat(offset, "px"),
|
|
57
|
+
position: 'absolute',
|
|
58
|
+
color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
|
|
59
|
+
pointerEvents: 'none',
|
|
60
|
+
textOverflow: 'ellipsis',
|
|
61
|
+
overflow: 'hidden',
|
|
62
|
+
whiteSpace: 'nowrap',
|
|
63
|
+
maxWidth: 'calc(100% - 50px)'
|
|
64
|
+
});
|
|
27
65
|
};
|
|
28
66
|
|
|
29
67
|
/**
|
|
@@ -32,5 +70,17 @@ var placeholderStyles = exports.placeholderStyles = function placeholderStyles(o
|
|
|
32
70
|
* which will allow migration to use @atlaskit/checkbox instead
|
|
33
71
|
*/
|
|
34
72
|
var checkboxStyles = exports.checkboxStyles = function checkboxStyles(isRenderer) {
|
|
35
|
-
return (0, _react.css)(
|
|
73
|
+
return (0, _react.css)(_templateObject || (_templateObject = (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, 1, _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)({
|
|
74
|
+
'&:focus + span > svg, &:checked:focus + span > svg': {
|
|
75
|
+
'rect:first-of-type': {
|
|
76
|
+
stroke: _theme.default.light.borderColor.focused
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}) : (0, _react.css)({
|
|
80
|
+
'&:active:focus + span > svg, &:checked:active:focus + span > svg': {
|
|
81
|
+
'rect:first-of-type': {
|
|
82
|
+
stroke: _theme.default.light.borderColor.focused
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}));
|
|
36
86
|
};
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
8
7
|
var _colors = require("@atlaskit/theme/colors");
|
|
9
8
|
/**
|
|
10
9
|
* Styles taken from packages/design-system/checkbox/src/internal/theme.tsx
|
|
@@ -13,8 +12,8 @@ var _colors = require("@atlaskit/theme/colors");
|
|
|
13
12
|
var checkboxTheme = {
|
|
14
13
|
light: {
|
|
15
14
|
borderColor: {
|
|
16
|
-
rest:
|
|
17
|
-
hovered:
|
|
15
|
+
rest: "var(--ds-border-input, ".concat(_colors.N100, ")"),
|
|
16
|
+
hovered: "var(--ds-border-input, ".concat(_colors.N100, ")"),
|
|
18
17
|
disabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
|
|
19
18
|
checked: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
|
|
20
19
|
active: "var(--ds-border, ".concat(_colors.B50, ")"),
|
|
@@ -43,8 +42,8 @@ var checkboxTheme = {
|
|
|
43
42
|
*/
|
|
44
43
|
dark: {
|
|
45
44
|
borderColor: {
|
|
46
|
-
rest:
|
|
47
|
-
hovered:
|
|
45
|
+
rest: "var(--ds-border-input, ".concat(_colors.DN200, ")"),
|
|
46
|
+
hovered: "var(--ds-border-input, ".concat(_colors.DN200, ")"),
|
|
48
47
|
disabled: "var(--ds-background-disabled, #BCD6F00A)",
|
|
49
48
|
checked: "var(--ds-background-selected-bold, #579DFF)",
|
|
50
49
|
active: "var(--ds-border, #A6C5E229)",
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { css } from '@emotion/react';
|
|
2
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
3
2
|
import { N200, N20A } from '@atlaskit/theme/colors';
|
|
4
3
|
import checkboxTheme from './theme';
|
|
5
4
|
|
|
@@ -7,52 +6,51 @@ import checkboxTheme from './theme';
|
|
|
7
6
|
Increasing specificity with double ampersand to ensure these rules take
|
|
8
7
|
priority over the global styles applied to 'ol' elements.
|
|
9
8
|
*/
|
|
10
|
-
export const listStyles = css
|
|
11
|
-
&& {
|
|
12
|
-
|
|
13
|
-
|
|
9
|
+
export const listStyles = css({
|
|
10
|
+
'&&': {
|
|
11
|
+
listStyleType: 'none',
|
|
12
|
+
paddingLeft: 0
|
|
14
13
|
}
|
|
15
|
-
|
|
16
|
-
export const taskListStyles = css
|
|
17
|
-
div + div {
|
|
18
|
-
|
|
14
|
+
});
|
|
15
|
+
export const taskListStyles = css({
|
|
16
|
+
'div + div': {
|
|
17
|
+
marginTop: "var(--ds-space-050, 4px)"
|
|
19
18
|
}
|
|
20
|
-
|
|
21
|
-
export const contentStyles = css
|
|
22
|
-
margin: 0
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
flex: 1 1 auto
|
|
26
|
-
|
|
27
|
-
export const taskStyles = css
|
|
28
|
-
display: flex
|
|
29
|
-
|
|
30
|
-
position: relative
|
|
31
|
-
|
|
32
|
-
export const decisionStyles = () => css
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
`;
|
|
19
|
+
});
|
|
20
|
+
export const contentStyles = css({
|
|
21
|
+
margin: 0,
|
|
22
|
+
wordWrap: 'break-word',
|
|
23
|
+
minWidth: 0,
|
|
24
|
+
flex: '1 1 auto'
|
|
25
|
+
});
|
|
26
|
+
export const taskStyles = css({
|
|
27
|
+
display: 'flex',
|
|
28
|
+
flexDirection: 'row',
|
|
29
|
+
position: 'relative'
|
|
30
|
+
});
|
|
31
|
+
export const decisionStyles = () => css({
|
|
32
|
+
display: 'flex',
|
|
33
|
+
flexDirection: 'row',
|
|
34
|
+
margin: `${"var(--ds-space-100, 8px)"} 0 0 0`,
|
|
35
|
+
padding: "var(--ds-space-100, 8px)",
|
|
36
|
+
paddingLeft: "var(--ds-space-150, 12px)",
|
|
37
|
+
borderRadius: "var(--ds-border-radius-100, 3px)",
|
|
38
|
+
backgroundColor: `var(--ds-background-neutral, ${N20A})`,
|
|
39
|
+
position: 'relative',
|
|
40
|
+
'.decision-item': {
|
|
41
|
+
cursor: 'initial'
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
export const placeholderStyles = offset => css({
|
|
45
|
+
margin: `0 0 0 ${offset}px`,
|
|
46
|
+
position: 'absolute',
|
|
47
|
+
color: `var(--ds-text-subtlest, ${N200})`,
|
|
48
|
+
pointerEvents: 'none',
|
|
49
|
+
textOverflow: 'ellipsis',
|
|
50
|
+
overflow: 'hidden',
|
|
51
|
+
whiteSpace: 'nowrap',
|
|
52
|
+
maxWidth: 'calc(100% - 50px)'
|
|
53
|
+
});
|
|
56
54
|
|
|
57
55
|
/**
|
|
58
56
|
* References packages/design-system/checkbox/src/checkbox.tsx
|
|
@@ -109,7 +107,7 @@ export const checkboxStyles = isRenderer => css`
|
|
|
109
107
|
}
|
|
110
108
|
rect:first-of-type {
|
|
111
109
|
stroke: ${checkboxTheme.light.borderColor.rest};
|
|
112
|
-
stroke-width: ${
|
|
110
|
+
stroke-width: ${1};
|
|
113
111
|
transition: stroke 0.2s ease-in-out;
|
|
114
112
|
}
|
|
115
113
|
}
|
|
@@ -189,20 +187,18 @@ export const checkboxStyles = isRenderer => css`
|
|
|
189
187
|
}
|
|
190
188
|
}
|
|
191
189
|
|
|
192
|
-
${isRenderer ? css
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
}
|
|
206
|
-
`}
|
|
190
|
+
${isRenderer ? css({
|
|
191
|
+
'&:focus + span > svg, &:checked:focus + span > svg': {
|
|
192
|
+
'rect:first-of-type': {
|
|
193
|
+
stroke: checkboxTheme.light.borderColor.focused
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
}) : css({
|
|
197
|
+
'&:active:focus + span > svg, &:checked:active:focus + span > svg': {
|
|
198
|
+
'rect:first-of-type': {
|
|
199
|
+
stroke: checkboxTheme.light.borderColor.focused
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
})}
|
|
207
203
|
}
|
|
208
204
|
`;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { B100, B300, B400, B50, DN200, N10, N20, N30, N40, N70, N100 } from '@atlaskit/theme/colors';
|
|
1
|
+
import { B100, B300, B400, B50, DN200, N10, N20, N30, N70, N100 } from '@atlaskit/theme/colors';
|
|
3
2
|
|
|
4
3
|
/**
|
|
5
4
|
* Styles taken from packages/design-system/checkbox/src/internal/theme.tsx
|
|
@@ -8,8 +7,8 @@ import { B100, B300, B400, B50, DN200, N10, N20, N30, N40, N70, N100 } from '@at
|
|
|
8
7
|
const checkboxTheme = {
|
|
9
8
|
light: {
|
|
10
9
|
borderColor: {
|
|
11
|
-
rest:
|
|
12
|
-
hovered:
|
|
10
|
+
rest: `var(--ds-border-input, ${N100})`,
|
|
11
|
+
hovered: `var(--ds-border-input, ${N100})`,
|
|
13
12
|
disabled: `var(--ds-background-disabled, ${N20})`,
|
|
14
13
|
checked: `var(--ds-background-selected-bold, ${B400})`,
|
|
15
14
|
active: `var(--ds-border, ${B50})`,
|
|
@@ -38,8 +37,8 @@ const checkboxTheme = {
|
|
|
38
37
|
*/
|
|
39
38
|
dark: {
|
|
40
39
|
borderColor: {
|
|
41
|
-
rest:
|
|
42
|
-
hovered:
|
|
40
|
+
rest: `var(--ds-border-input, ${DN200})`,
|
|
41
|
+
hovered: `var(--ds-border-input, ${DN200})`,
|
|
43
42
|
disabled: "var(--ds-background-disabled, #BCD6F00A)",
|
|
44
43
|
checked: "var(--ds-background-selected-bold, #579DFF)",
|
|
45
44
|
active: "var(--ds-border, #A6C5E229)",
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject
|
|
2
|
+
var _templateObject;
|
|
3
3
|
import { css } from '@emotion/react';
|
|
4
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
5
4
|
import { N200, N20A } from '@atlaskit/theme/colors';
|
|
6
5
|
import checkboxTheme from './theme';
|
|
7
6
|
|
|
@@ -9,15 +8,54 @@ import checkboxTheme from './theme';
|
|
|
9
8
|
Increasing specificity with double ampersand to ensure these rules take
|
|
10
9
|
priority over the global styles applied to 'ol' elements.
|
|
11
10
|
*/
|
|
12
|
-
export var listStyles = css(
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
export var listStyles = css({
|
|
12
|
+
'&&': {
|
|
13
|
+
listStyleType: 'none',
|
|
14
|
+
paddingLeft: 0
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
export var taskListStyles = css({
|
|
18
|
+
'div + div': {
|
|
19
|
+
marginTop: "var(--ds-space-050, 4px)"
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
export var contentStyles = css({
|
|
23
|
+
margin: 0,
|
|
24
|
+
wordWrap: 'break-word',
|
|
25
|
+
minWidth: 0,
|
|
26
|
+
flex: '1 1 auto'
|
|
27
|
+
});
|
|
28
|
+
export var taskStyles = css({
|
|
29
|
+
display: 'flex',
|
|
30
|
+
flexDirection: 'row',
|
|
31
|
+
position: 'relative'
|
|
32
|
+
});
|
|
16
33
|
export var decisionStyles = function decisionStyles() {
|
|
17
|
-
return css(
|
|
34
|
+
return css({
|
|
35
|
+
display: 'flex',
|
|
36
|
+
flexDirection: 'row',
|
|
37
|
+
margin: "var(--ds-space-100, 8px)".concat(" 0 0 0"),
|
|
38
|
+
padding: "var(--ds-space-100, 8px)",
|
|
39
|
+
paddingLeft: "var(--ds-space-150, 12px)",
|
|
40
|
+
borderRadius: "var(--ds-border-radius-100, 3px)",
|
|
41
|
+
backgroundColor: "var(--ds-background-neutral, ".concat(N20A, ")"),
|
|
42
|
+
position: 'relative',
|
|
43
|
+
'.decision-item': {
|
|
44
|
+
cursor: 'initial'
|
|
45
|
+
}
|
|
46
|
+
});
|
|
18
47
|
};
|
|
19
48
|
export var placeholderStyles = function placeholderStyles(offset) {
|
|
20
|
-
return css(
|
|
49
|
+
return css({
|
|
50
|
+
margin: "0 0 0 ".concat(offset, "px"),
|
|
51
|
+
position: 'absolute',
|
|
52
|
+
color: "var(--ds-text-subtlest, ".concat(N200, ")"),
|
|
53
|
+
pointerEvents: 'none',
|
|
54
|
+
textOverflow: 'ellipsis',
|
|
55
|
+
overflow: 'hidden',
|
|
56
|
+
whiteSpace: 'nowrap',
|
|
57
|
+
maxWidth: 'calc(100% - 50px)'
|
|
58
|
+
});
|
|
21
59
|
};
|
|
22
60
|
|
|
23
61
|
/**
|
|
@@ -26,5 +64,17 @@ export var placeholderStyles = function placeholderStyles(offset) {
|
|
|
26
64
|
* which will allow migration to use @atlaskit/checkbox instead
|
|
27
65
|
*/
|
|
28
66
|
export var checkboxStyles = function checkboxStyles(isRenderer) {
|
|
29
|
-
return css(
|
|
67
|
+
return css(_templateObject || (_templateObject = _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, 1, 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({
|
|
68
|
+
'&:focus + span > svg, &:checked:focus + span > svg': {
|
|
69
|
+
'rect:first-of-type': {
|
|
70
|
+
stroke: checkboxTheme.light.borderColor.focused
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}) : css({
|
|
74
|
+
'&:active:focus + span > svg, &:checked:active:focus + span > svg': {
|
|
75
|
+
'rect:first-of-type': {
|
|
76
|
+
stroke: checkboxTheme.light.borderColor.focused
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}));
|
|
30
80
|
};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { B100, B300, B400, B50, DN200, N10, N20, N30, N40, N70, N100 } from '@atlaskit/theme/colors';
|
|
1
|
+
import { B100, B300, B400, B50, DN200, N10, N20, N30, N70, N100 } from '@atlaskit/theme/colors';
|
|
3
2
|
|
|
4
3
|
/**
|
|
5
4
|
* Styles taken from packages/design-system/checkbox/src/internal/theme.tsx
|
|
@@ -8,8 +7,8 @@ import { B100, B300, B400, B50, DN200, N10, N20, N30, N40, N70, N100 } from '@at
|
|
|
8
7
|
var checkboxTheme = {
|
|
9
8
|
light: {
|
|
10
9
|
borderColor: {
|
|
11
|
-
rest:
|
|
12
|
-
hovered:
|
|
10
|
+
rest: "var(--ds-border-input, ".concat(N100, ")"),
|
|
11
|
+
hovered: "var(--ds-border-input, ".concat(N100, ")"),
|
|
13
12
|
disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
|
|
14
13
|
checked: "var(--ds-background-selected-bold, ".concat(B400, ")"),
|
|
15
14
|
active: "var(--ds-border, ".concat(B50, ")"),
|
|
@@ -38,8 +37,8 @@ var checkboxTheme = {
|
|
|
38
37
|
*/
|
|
39
38
|
dark: {
|
|
40
39
|
borderColor: {
|
|
41
|
-
rest:
|
|
42
|
-
hovered:
|
|
40
|
+
rest: "var(--ds-border-input, ".concat(DN200, ")"),
|
|
41
|
+
hovered: "var(--ds-border-input, ".concat(DN200, ")"),
|
|
43
42
|
disabled: "var(--ds-background-disabled, #BCD6F00A)",
|
|
44
43
|
checked: "var(--ds-background-selected-bold, #579DFF)",
|
|
45
44
|
active: "var(--ds-border, #A6C5E229)",
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
declare const checkboxTheme: {
|
|
6
6
|
light: {
|
|
7
7
|
borderColor: {
|
|
8
|
-
rest: "var(--ds-border-
|
|
9
|
-
hovered: "var(--ds-border-
|
|
8
|
+
rest: "var(--ds-border-input)";
|
|
9
|
+
hovered: "var(--ds-border-input)";
|
|
10
10
|
disabled: "var(--ds-background-disabled)";
|
|
11
11
|
checked: "var(--ds-background-selected-bold)";
|
|
12
12
|
active: "var(--ds-border)";
|
|
@@ -35,8 +35,8 @@ declare const checkboxTheme: {
|
|
|
35
35
|
*/
|
|
36
36
|
dark: {
|
|
37
37
|
borderColor: {
|
|
38
|
-
rest: "var(--ds-border-
|
|
39
|
-
hovered: "var(--ds-border-
|
|
38
|
+
rest: "var(--ds-border-input)";
|
|
39
|
+
hovered: "var(--ds-border-input)";
|
|
40
40
|
disabled: "var(--ds-background-disabled)";
|
|
41
41
|
checked: "var(--ds-background-selected-bold)";
|
|
42
42
|
active: "var(--ds-border)";
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
declare const checkboxTheme: {
|
|
6
6
|
light: {
|
|
7
7
|
borderColor: {
|
|
8
|
-
rest: "var(--ds-border-
|
|
9
|
-
hovered: "var(--ds-border-
|
|
8
|
+
rest: "var(--ds-border-input)";
|
|
9
|
+
hovered: "var(--ds-border-input)";
|
|
10
10
|
disabled: "var(--ds-background-disabled)";
|
|
11
11
|
checked: "var(--ds-background-selected-bold)";
|
|
12
12
|
active: "var(--ds-border)";
|
|
@@ -35,8 +35,8 @@ declare const checkboxTheme: {
|
|
|
35
35
|
*/
|
|
36
36
|
dark: {
|
|
37
37
|
borderColor: {
|
|
38
|
-
rest: "var(--ds-border-
|
|
39
|
-
hovered: "var(--ds-border-
|
|
38
|
+
rest: "var(--ds-border-input)";
|
|
39
|
+
hovered: "var(--ds-border-input)";
|
|
40
40
|
disabled: "var(--ds-background-disabled)";
|
|
41
41
|
checked: "var(--ds-background-selected-bold)";
|
|
42
42
|
active: "var(--ds-border)";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/task-decision",
|
|
3
|
-
"version": "17.
|
|
3
|
+
"version": "17.10.0",
|
|
4
4
|
"description": "Tasks and decisions react components",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -41,11 +41,10 @@
|
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"@atlaskit/analytics-namespaced-context": "^6.9.0",
|
|
44
|
-
"@atlaskit/analytics-next": "^9.
|
|
44
|
+
"@atlaskit/analytics-next": "^9.3.0",
|
|
45
45
|
"@atlaskit/icon": "^22.1.0",
|
|
46
|
-
"@atlaskit/platform-feature-flags": "^0.2.2",
|
|
47
46
|
"@atlaskit/theme": "^12.7.0",
|
|
48
|
-
"@atlaskit/tokens": "^1.
|
|
47
|
+
"@atlaskit/tokens": "^1.45.0",
|
|
49
48
|
"@atlaskit/util-service-support": "^6.2.0",
|
|
50
49
|
"@babel/runtime": "^7.0.0",
|
|
51
50
|
"@emotion/react": "^11.7.1",
|
|
@@ -85,10 +84,5 @@
|
|
|
85
84
|
]
|
|
86
85
|
}
|
|
87
86
|
},
|
|
88
|
-
"platform-feature-flags": {
|
|
89
|
-
"platform.design-system-team.update-border-radio-checkbox_7askv": {
|
|
90
|
-
"type": "boolean"
|
|
91
|
-
}
|
|
92
|
-
},
|
|
93
87
|
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
|
|
94
88
|
}
|