@atlaskit/task-decision 17.9.8 → 17.9.10
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 +12 -0
- package/afm-cc/tsconfig.json +3 -0
- package/dist/cjs/components/styles.js +2 -1
- package/dist/cjs/components/theme.js +5 -4
- package/dist/es2019/components/styles.js +2 -1
- package/dist/es2019/components/theme.js +6 -5
- package/dist/esm/components/styles.js +2 -1
- package/dist/esm/components/theme.js +6 -5
- package/dist/types/components/theme.d.ts +4 -4
- package/dist/types-ts4.5/components/theme.d.ts +4 -4
- package/package.json +7 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/task-decision
|
|
2
2
|
|
|
3
|
+
## 17.9.10
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#81438](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81438) [`cba2e815ce28`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cba2e815ce28) - React 18 types for @atlaskit/task-decisions
|
|
8
|
+
|
|
9
|
+
## 17.9.9
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#81644](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81644) [`8ab7a816dca7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8ab7a816dca7) - Revert input border change from the previous version
|
|
14
|
+
|
|
3
15
|
## 17.9.8
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/afm-cc/tsconfig.json
CHANGED
|
@@ -7,6 +7,7 @@ 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");
|
|
10
11
|
var _colors = require("@atlaskit/theme/colors");
|
|
11
12
|
var _theme = _interopRequireDefault(require("./theme"));
|
|
12
13
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
@@ -31,5 +32,5 @@ var placeholderStyles = exports.placeholderStyles = function placeholderStyles(o
|
|
|
31
32
|
* which will allow migration to use @atlaskit/checkbox instead
|
|
32
33
|
*/
|
|
33
34
|
var checkboxStyles = exports.checkboxStyles = function checkboxStyles(isRenderer) {
|
|
34
|
-
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, 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)(_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));
|
|
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));
|
|
35
36
|
};
|
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
7
8
|
var _colors = require("@atlaskit/theme/colors");
|
|
8
9
|
/**
|
|
9
10
|
* Styles taken from packages/design-system/checkbox/src/internal/theme.tsx
|
|
@@ -12,8 +13,8 @@ var _colors = require("@atlaskit/theme/colors");
|
|
|
12
13
|
var checkboxTheme = {
|
|
13
14
|
light: {
|
|
14
15
|
borderColor: {
|
|
15
|
-
rest: "var(--ds-border-
|
|
16
|
-
hovered: "var(--ds-border-
|
|
16
|
+
rest: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(_colors.N100, ")") : "var(--ds-border-input, ".concat(_colors.N40, ")"),
|
|
17
|
+
hovered: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(_colors.N100, ")") : "var(--ds-border-input, ".concat(_colors.N40, ")"),
|
|
17
18
|
disabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
|
|
18
19
|
checked: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
|
|
19
20
|
active: "var(--ds-border, ".concat(_colors.B50, ")"),
|
|
@@ -42,8 +43,8 @@ var checkboxTheme = {
|
|
|
42
43
|
*/
|
|
43
44
|
dark: {
|
|
44
45
|
borderColor: {
|
|
45
|
-
rest: "var(--ds-border-
|
|
46
|
-
hovered: "var(--ds-border-
|
|
46
|
+
rest: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(_colors.DN200, ")") : "var(--ds-border-input, #A6C5E229)",
|
|
47
|
+
hovered: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(_colors.DN200, ")") : "var(--ds-border-input, #A6C5E229)",
|
|
47
48
|
disabled: "var(--ds-background-disabled, #BCD6F00A)",
|
|
48
49
|
checked: "var(--ds-background-selected-bold, #579DFF)",
|
|
49
50
|
active: "var(--ds-border, #A6C5E229)",
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { css } from '@emotion/react';
|
|
2
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
2
3
|
import { N200, N20A } from '@atlaskit/theme/colors';
|
|
3
4
|
import checkboxTheme from './theme';
|
|
4
5
|
|
|
@@ -108,7 +109,7 @@ export const checkboxStyles = isRenderer => css`
|
|
|
108
109
|
}
|
|
109
110
|
rect:first-of-type {
|
|
110
111
|
stroke: ${checkboxTheme.light.borderColor.rest};
|
|
111
|
-
stroke-width: ${1};
|
|
112
|
+
stroke-width: ${getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? 1 : 2};
|
|
112
113
|
transition: stroke 0.2s ease-in-out;
|
|
113
114
|
}
|
|
114
115
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
2
|
+
import { B100, B300, B400, B50, DN200, N10, N20, N30, N40, N70, N100 } from '@atlaskit/theme/colors';
|
|
2
3
|
|
|
3
4
|
/**
|
|
4
5
|
* Styles taken from packages/design-system/checkbox/src/internal/theme.tsx
|
|
@@ -7,8 +8,8 @@ import { B100, B300, B400, B50, DN200, N10, N20, N30, N70, N100 } from '@atlaski
|
|
|
7
8
|
const checkboxTheme = {
|
|
8
9
|
light: {
|
|
9
10
|
borderColor: {
|
|
10
|
-
rest: `var(--ds-border-
|
|
11
|
-
hovered: `var(--ds-border-
|
|
11
|
+
rest: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
|
|
12
|
+
hovered: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
|
|
12
13
|
disabled: `var(--ds-background-disabled, ${N20})`,
|
|
13
14
|
checked: `var(--ds-background-selected-bold, ${B400})`,
|
|
14
15
|
active: `var(--ds-border, ${B50})`,
|
|
@@ -37,8 +38,8 @@ const checkboxTheme = {
|
|
|
37
38
|
*/
|
|
38
39
|
dark: {
|
|
39
40
|
borderColor: {
|
|
40
|
-
rest: `var(--ds-border-
|
|
41
|
-
hovered: `var(--ds-border-
|
|
41
|
+
rest: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${DN200})` : "var(--ds-border-input, #A6C5E229)",
|
|
42
|
+
hovered: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${DN200})` : "var(--ds-border-input, #A6C5E229)",
|
|
42
43
|
disabled: "var(--ds-background-disabled, #BCD6F00A)",
|
|
43
44
|
checked: "var(--ds-background-selected-bold, #579DFF)",
|
|
44
45
|
active: "var(--ds-border, #A6C5E229)",
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
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
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
4
5
|
import { N200, N20A } from '@atlaskit/theme/colors';
|
|
5
6
|
import checkboxTheme from './theme';
|
|
6
7
|
|
|
@@ -25,5 +26,5 @@ export var placeholderStyles = function placeholderStyles(offset) {
|
|
|
25
26
|
* which will allow migration to use @atlaskit/checkbox instead
|
|
26
27
|
*/
|
|
27
28
|
export var checkboxStyles = function checkboxStyles(isRenderer) {
|
|
28
|
-
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, 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(_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));
|
|
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));
|
|
29
30
|
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
2
|
+
import { B100, B300, B400, B50, DN200, N10, N20, N30, N40, N70, N100 } from '@atlaskit/theme/colors';
|
|
2
3
|
|
|
3
4
|
/**
|
|
4
5
|
* Styles taken from packages/design-system/checkbox/src/internal/theme.tsx
|
|
@@ -7,8 +8,8 @@ import { B100, B300, B400, B50, DN200, N10, N20, N30, N70, N100 } from '@atlaski
|
|
|
7
8
|
var checkboxTheme = {
|
|
8
9
|
light: {
|
|
9
10
|
borderColor: {
|
|
10
|
-
rest: "var(--ds-border-
|
|
11
|
-
hovered: "var(--ds-border-
|
|
11
|
+
rest: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
|
|
12
|
+
hovered: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
|
|
12
13
|
disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
|
|
13
14
|
checked: "var(--ds-background-selected-bold, ".concat(B400, ")"),
|
|
14
15
|
active: "var(--ds-border, ".concat(B50, ")"),
|
|
@@ -37,8 +38,8 @@ var checkboxTheme = {
|
|
|
37
38
|
*/
|
|
38
39
|
dark: {
|
|
39
40
|
borderColor: {
|
|
40
|
-
rest: "var(--ds-border-
|
|
41
|
-
hovered: "var(--ds-border-
|
|
41
|
+
rest: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(DN200, ")") : "var(--ds-border-input, #A6C5E229)",
|
|
42
|
+
hovered: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(DN200, ")") : "var(--ds-border-input, #A6C5E229)",
|
|
42
43
|
disabled: "var(--ds-background-disabled, #BCD6F00A)",
|
|
43
44
|
checked: "var(--ds-background-selected-bold, #579DFF)",
|
|
44
45
|
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-input)";
|
|
9
|
-
hovered: "var(--ds-border-input)";
|
|
8
|
+
rest: "var(--ds-border-bold)" | "var(--ds-border-input)";
|
|
9
|
+
hovered: "var(--ds-border-bold)" | "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-input)";
|
|
39
|
-
hovered: "var(--ds-border-input)";
|
|
38
|
+
rest: "var(--ds-border-bold)" | "var(--ds-border-input)";
|
|
39
|
+
hovered: "var(--ds-border-bold)" | "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-input)";
|
|
9
|
-
hovered: "var(--ds-border-input)";
|
|
8
|
+
rest: "var(--ds-border-bold)" | "var(--ds-border-input)";
|
|
9
|
+
hovered: "var(--ds-border-bold)" | "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-input)";
|
|
39
|
-
hovered: "var(--ds-border-input)";
|
|
38
|
+
rest: "var(--ds-border-bold)" | "var(--ds-border-input)";
|
|
39
|
+
hovered: "var(--ds-border-bold)" | "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.9.
|
|
3
|
+
"version": "17.9.10",
|
|
4
4
|
"description": "Tasks and decisions react components",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -43,6 +43,7 @@
|
|
|
43
43
|
"@atlaskit/analytics-namespaced-context": "^6.9.0",
|
|
44
44
|
"@atlaskit/analytics-next": "^9.2.0",
|
|
45
45
|
"@atlaskit/icon": "^22.1.0",
|
|
46
|
+
"@atlaskit/platform-feature-flags": "^0.2.2",
|
|
46
47
|
"@atlaskit/theme": "^12.6.0",
|
|
47
48
|
"@atlaskit/tokens": "^1.41.0",
|
|
48
49
|
"@atlaskit/util-service-support": "^6.2.0",
|
|
@@ -84,5 +85,10 @@
|
|
|
84
85
|
]
|
|
85
86
|
}
|
|
86
87
|
},
|
|
88
|
+
"platform-feature-flags": {
|
|
89
|
+
"platform.design-system-team.update-border-radio-checkbox_7askv": {
|
|
90
|
+
"type": "boolean"
|
|
91
|
+
}
|
|
92
|
+
},
|
|
87
93
|
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
|
|
88
94
|
}
|