@atlaskit/checkbox 12.6.11 → 13.0.1

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 (18) hide show
  1. package/CHANGELOG.md +60 -47
  2. package/codemods/utils.tsx +20 -16
  3. package/dist/cjs/checkbox.js +2 -3
  4. package/dist/cjs/internal/checkbox-icon.js +1 -2
  5. package/dist/cjs/internal/constants.js +1 -2
  6. package/dist/cjs/internal/label.js +33 -69
  7. package/dist/es2019/checkbox.js +1 -1
  8. package/dist/es2019/internal/label.js +34 -70
  9. package/dist/esm/checkbox.js +1 -1
  10. package/dist/esm/internal/label.js +34 -69
  11. package/dist/types/types.d.ts +8 -8
  12. package/dist/types-ts4.5/types.d.ts +8 -8
  13. package/package.json +5 -4
  14. package/dist/cjs/internal/theme.js +0 -64
  15. package/dist/es2019/internal/theme.js +0 -57
  16. package/dist/esm/internal/theme.js +0 -57
  17. package/dist/types/internal/theme.d.ts +0 -55
  18. package/dist/types-ts4.5/internal/theme.d.ts +0 -55
package/dist/es2019/internal/label.js CHANGED
@@ -1,10 +1,9 @@
1
1
  /** @jsx jsx */
2
2
  import { css, jsx } from '@emotion/react';
3
- import { N80, N900 } from '@atlaskit/theme/colors';
4
- import { useGlobalTheme } from '@atlaskit/theme/components';
3
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
4
+ import { B200, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
5
5
  import { fontFamily } from './constants';
6
- import theme from './theme';
7
- const labelStyles = css({
6
+ const baseStyles = css({
8
7
  display: 'grid',
9
8
  gridAutoColumns: '1fr',
10
9
  gridAutoRows: 'min-content',
@@ -20,68 +19,36 @@ const disabledStyles = css({
20
19
  color: `var(--ds-text-disabled, ${N80})`,
21
20
  cursor: 'not-allowed'
22
21
  });
23
- const themeStyles = {
24
- light: css({
25
- /**
26
- * Background
27
- */
28
- '--local-background': theme.light.boxColor.rest,
29
- '--local-background-active': theme.light.boxColor.active,
30
- '--local-background-checked': theme.light.boxColor.checked,
31
- '--local-background-checked-hover': theme.light.boxColor.hoveredAndChecked,
32
- '--local-background-disabled': theme.light.boxColor.disabled,
33
- '--local-background-hover': theme.light.boxColor.hovered,
34
- /**
35
- * Border
36
- */
37
- '--local-border': theme.light.borderColor.rest,
38
- '--local-border-active': theme.light.borderColor.active,
39
- '--local-border-checked': theme.light.borderColor.checked,
40
- '--local-border-checked-hover': theme.light.borderColor.hoveredAndChecked,
41
- '--local-border-checked-invalid': theme.light.borderColor.invalidAndChecked,
42
- '--local-border-disabled': theme.light.borderColor.disabled,
43
- '--local-border-focus': theme.light.borderColor.focused,
44
- '--local-border-hover': theme.light.borderColor.hovered,
45
- '--local-border-invalid': theme.light.borderColor.invalid,
46
- /**
47
- * Tick
48
- */
49
- '--local-tick-active': theme.light.tickColor.activeAndChecked,
50
- '--local-tick-checked': theme.light.tickColor.checked,
51
- '--local-tick-disabled': theme.light.tickColor.disabledAndChecked,
52
- '--local-tick-rest': 'transparent'
53
- }),
54
- dark: css({
55
- /**
56
- * Background
57
- */
58
- '--local-background': theme.dark.boxColor.rest,
59
- '--local-background-active': theme.dark.boxColor.active,
60
- '--local-background-checked': theme.dark.boxColor.checked,
61
- '--local-background-checked-hover': theme.dark.boxColor.hoveredAndChecked,
62
- '--local-background-disabled': theme.dark.boxColor.disabled,
63
- '--local-background-hover': theme.dark.boxColor.hovered,
64
- /**
65
- * Border
66
- */
67
- '--local-border': theme.dark.borderColor.rest,
68
- '--local-border-active': theme.dark.borderColor.active,
69
- '--local-border-checked': theme.dark.borderColor.checked,
70
- '--local-border-checked-hover': theme.dark.borderColor.hoveredAndChecked,
71
- '--local-border-checked-invalid': theme.dark.borderColor.invalidAndChecked,
72
- '--local-border-disabled': theme.dark.borderColor.disabled,
73
- '--local-border-focus': theme.dark.borderColor.focused,
74
- '--local-border-hover': theme.dark.borderColor.hovered,
75
- '--local-border-invalid': theme.dark.borderColor.invalid,
76
- /**
77
- * Tick
78
- */
79
- '--local-tick-active': theme.dark.tickColor.activeAndChecked,
80
- '--local-tick-checked': theme.dark.tickColor.checked,
81
- '--local-tick-disabled': theme.dark.tickColor.disabledAndChecked,
82
- '--local-tick-rest': 'transparent'
83
- })
84
- };
22
+ const labelStyles = css({
23
+ /**
24
+ * Background
25
+ */
26
+ '--local-background': `var(--ds-background-input, ${N10})`,
27
+ '--local-background-active': `var(--ds-background-input-pressed, ${B50})`,
28
+ '--local-background-checked': `var(--ds-background-selected-bold, ${B400})`,
29
+ '--local-background-checked-hover': `var(--ds-background-selected-bold-hovered, ${B300})`,
30
+ '--local-background-disabled': `var(--ds-background-disabled, ${N20})`,
31
+ '--local-background-hover': `var(--ds-background-input-hovered, ${N30})`,
32
+ /**
33
+ * Border
34
+ */
35
+ '--local-border': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
36
+ '--local-border-active': `var(--ds-border, ${B50})`,
37
+ '--local-border-checked': `var(--ds-background-selected-bold, ${B400})`,
38
+ '--local-border-checked-hover': `var(--ds-background-selected-bold-hovered, ${B300})`,
39
+ '--local-border-checked-invalid': `var(--ds-border-danger, ${R300})`,
40
+ '--local-border-disabled': `var(--ds-background-disabled, ${N20})`,
41
+ '--local-border-focus': `var(--ds-border-focused, ${B200})`,
42
+ '--local-border-hover': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
43
+ '--local-border-invalid': `var(--ds-border-danger, ${R300})`,
44
+ /**
45
+ * Tick
46
+ */
47
+ '--local-tick-active': `var(--ds-icon-inverse, ${B400})`,
48
+ '--local-tick-checked': `var(--ds-icon-inverse, ${N10})`,
49
+ '--local-tick-disabled': `var(--ds-icon-disabled, ${N70})`,
50
+ '--local-tick-rest': 'transparent'
51
+ });
85
52
  export default function Label({
86
53
  children,
87
54
  isDisabled,
@@ -89,11 +56,8 @@ export default function Label({
89
56
  label,
90
57
  id
91
58
  }) {
92
- const {
93
- mode
94
- } = useGlobalTheme();
95
59
  return jsx("label", {
96
- css: [labelStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
60
+ css: [baseStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, labelStyles],
97
61
  "data-testid": testId,
98
62
  "data-disabled": isDisabled || undefined,
99
63
  id: id
package/dist/esm/checkbox.js CHANGED
@@ -154,7 +154,7 @@ var Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Checkbox(prop
154
154
  analyticsData: analyticsContext,
155
155
  componentName: 'checkbox',
156
156
  packageName: "@atlaskit/checkbox",
157
- packageVersion: "12.6.11"
157
+ packageVersion: "13.0.1"
158
158
  });
159
159
  var internalRef = useRef(null);
160
160
  var mergedRefs = mergeRefs([internalRef, ref]);
package/dist/esm/internal/label.js CHANGED
@@ -1,10 +1,9 @@
1
1
  /** @jsx jsx */
2
2
  import { css, jsx } from '@emotion/react';
3
- import { N80, N900 } from '@atlaskit/theme/colors';
4
- import { useGlobalTheme } from '@atlaskit/theme/components';
3
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
4
+ import { B200, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
5
5
  import { fontFamily } from './constants';
6
- import theme from './theme';
7
- var labelStyles = css({
6
+ var baseStyles = css({
8
7
  display: 'grid',
9
8
  gridAutoColumns: '1fr',
10
9
  gridAutoRows: 'min-content',
@@ -20,78 +19,44 @@ var disabledStyles = css({
20
19
  color: "var(--ds-text-disabled, ".concat(N80, ")"),
21
20
  cursor: 'not-allowed'
22
21
  });
23
- var themeStyles = {
24
- light: css({
25
- /**
26
- * Background
27
- */
28
- '--local-background': theme.light.boxColor.rest,
29
- '--local-background-active': theme.light.boxColor.active,
30
- '--local-background-checked': theme.light.boxColor.checked,
31
- '--local-background-checked-hover': theme.light.boxColor.hoveredAndChecked,
32
- '--local-background-disabled': theme.light.boxColor.disabled,
33
- '--local-background-hover': theme.light.boxColor.hovered,
34
- /**
35
- * Border
36
- */
37
- '--local-border': theme.light.borderColor.rest,
38
- '--local-border-active': theme.light.borderColor.active,
39
- '--local-border-checked': theme.light.borderColor.checked,
40
- '--local-border-checked-hover': theme.light.borderColor.hoveredAndChecked,
41
- '--local-border-checked-invalid': theme.light.borderColor.invalidAndChecked,
42
- '--local-border-disabled': theme.light.borderColor.disabled,
43
- '--local-border-focus': theme.light.borderColor.focused,
44
- '--local-border-hover': theme.light.borderColor.hovered,
45
- '--local-border-invalid': theme.light.borderColor.invalid,
46
- /**
47
- * Tick
48
- */
49
- '--local-tick-active': theme.light.tickColor.activeAndChecked,
50
- '--local-tick-checked': theme.light.tickColor.checked,
51
- '--local-tick-disabled': theme.light.tickColor.disabledAndChecked,
52
- '--local-tick-rest': 'transparent'
53
- }),
54
- dark: css({
55
- /**
56
- * Background
57
- */
58
- '--local-background': theme.dark.boxColor.rest,
59
- '--local-background-active': theme.dark.boxColor.active,
60
- '--local-background-checked': theme.dark.boxColor.checked,
61
- '--local-background-checked-hover': theme.dark.boxColor.hoveredAndChecked,
62
- '--local-background-disabled': theme.dark.boxColor.disabled,
63
- '--local-background-hover': theme.dark.boxColor.hovered,
64
- /**
65
- * Border
66
- */
67
- '--local-border': theme.dark.borderColor.rest,
68
- '--local-border-active': theme.dark.borderColor.active,
69
- '--local-border-checked': theme.dark.borderColor.checked,
70
- '--local-border-checked-hover': theme.dark.borderColor.hoveredAndChecked,
71
- '--local-border-checked-invalid': theme.dark.borderColor.invalidAndChecked,
72
- '--local-border-disabled': theme.dark.borderColor.disabled,
73
- '--local-border-focus': theme.dark.borderColor.focused,
74
- '--local-border-hover': theme.dark.borderColor.hovered,
75
- '--local-border-invalid': theme.dark.borderColor.invalid,
76
- /**
77
- * Tick
78
- */
79
- '--local-tick-active': theme.dark.tickColor.activeAndChecked,
80
- '--local-tick-checked': theme.dark.tickColor.checked,
81
- '--local-tick-disabled': theme.dark.tickColor.disabledAndChecked,
82
- '--local-tick-rest': 'transparent'
83
- })
84
- };
22
+ var labelStyles = css({
23
+ /**
24
+ * Background
25
+ */
26
+ '--local-background': "var(--ds-background-input, ".concat(N10, ")"),
27
+ '--local-background-active': "var(--ds-background-input-pressed, ".concat(B50, ")"),
28
+ '--local-background-checked': "var(--ds-background-selected-bold, ".concat(B400, ")"),
29
+ '--local-background-checked-hover': "var(--ds-background-selected-bold-hovered, ".concat(B300, ")"),
30
+ '--local-background-disabled': "var(--ds-background-disabled, ".concat(N20, ")"),
31
+ '--local-background-hover': "var(--ds-background-input-hovered, ".concat(N30, ")"),
32
+ /**
33
+ * Border
34
+ */
35
+ '--local-border': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
36
+ '--local-border-active': "var(--ds-border, ".concat(B50, ")"),
37
+ '--local-border-checked': "var(--ds-background-selected-bold, ".concat(B400, ")"),
38
+ '--local-border-checked-hover': "var(--ds-background-selected-bold-hovered, ".concat(B300, ")"),
39
+ '--local-border-checked-invalid': "var(--ds-border-danger, ".concat(R300, ")"),
40
+ '--local-border-disabled': "var(--ds-background-disabled, ".concat(N20, ")"),
41
+ '--local-border-focus': "var(--ds-border-focused, ".concat(B200, ")"),
42
+ '--local-border-hover': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
43
+ '--local-border-invalid': "var(--ds-border-danger, ".concat(R300, ")"),
44
+ /**
45
+ * Tick
46
+ */
47
+ '--local-tick-active': "var(--ds-icon-inverse, ".concat(B400, ")"),
48
+ '--local-tick-checked': "var(--ds-icon-inverse, ".concat(N10, ")"),
49
+ '--local-tick-disabled': "var(--ds-icon-disabled, ".concat(N70, ")"),
50
+ '--local-tick-rest': 'transparent'
51
+ });
85
52
  export default function Label(_ref) {
86
53
  var children = _ref.children,
87
54
  isDisabled = _ref.isDisabled,
88
55
  testId = _ref.testId,
89
56
  label = _ref.label,
90
57
  id = _ref.id;
91
- var _useGlobalTheme = useGlobalTheme(),
92
- mode = _useGlobalTheme.mode;
93
58
  return jsx("label", {
94
- css: [labelStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, mode === 'light' && themeStyles.light, mode === 'dark' && themeStyles.dark],
59
+ css: [baseStyles, label && textLabelLayoutStyles, isDisabled && disabledStyles, labelStyles],
95
60
  "data-testid": testId,
96
61
  "data-disabled": isDisabled || undefined,
97
62
  id: id
package/dist/types/types.d.ts CHANGED
@@ -10,11 +10,11 @@ export type Size = 'small' | 'medium' | 'large' | 'xlarge';
10
10
  */
11
11
  export type OwnProps = {
12
12
  /**
13
- * Sets whether the checkbox begins checked.
13
+ * Sets whether the checkbox begins as checked or unchecked.
14
14
  */
15
15
  defaultChecked?: boolean;
16
16
  /**
17
- * id assigned to input
17
+ * The ID assigned to the input.
18
18
  */
19
19
  id?: string;
20
20
  /**
@@ -22,7 +22,7 @@ export type OwnProps = {
22
22
  */
23
23
  isChecked?: boolean;
24
24
  /**
25
- * Sets whether the checkbox is disabled.
25
+ * Sets whether the checkbox is disabled. Don’t use a disabled checkbox if it needs to remain in the tab order for assistive technologies.
26
26
  */
27
27
  isDisabled?: boolean;
28
28
  /**
@@ -49,7 +49,7 @@ export type OwnProps = {
49
49
  name?: string;
50
50
  /**
51
51
  * Function that is called whenever the state of the checkbox changes. It will
52
- * be called with an object containing the react synthetic event. Use currentTarget to get value, name and checked
52
+ * be called with an object containing the react synthetic event. Use `currentTarget` to get value, name and checked.
53
53
  */
54
54
  onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
55
55
  /**
@@ -57,7 +57,7 @@ export type OwnProps = {
57
57
  */
58
58
  value?: number | string;
59
59
  /**
60
- * The size of the Checkbox
60
+ * The size of the checkbox.
61
61
  */
62
62
  size?: Size;
63
63
  /**
@@ -67,7 +67,7 @@ export type OwnProps = {
67
67
  */
68
68
  testId?: string;
69
69
  /**
70
- * Additional information to be included in the `context` of analytics events that come from radio
70
+ * Additional information to be included in the `context` of analytics events that come from radio.
71
71
  */
72
72
  analyticsContext?: Record<string, any>;
73
73
  };
@@ -91,12 +91,12 @@ export interface LabelTextProps extends React.HTMLProps<HTMLSpanElement> {
91
91
  export interface LabelProps extends React.HTMLProps<HTMLInputElement> {
92
92
  isDisabled?: boolean;
93
93
  /**
94
- * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
94
+ * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
95
95
  */
96
96
  testId?: string;
97
97
  /**
98
98
  * Click handler that is conditionally applied for Firefox
99
- * as Firefox does not dispatch modified click events (e.g. Ctrl+Click) down to the underlying input element
99
+ * as Firefox does not dispatch modified click events (e.g. Ctrl+Click) down to the underlying input element.
100
100
  */
101
101
  onClick?: React.MouseEventHandler;
102
102
  }
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -10,11 +10,11 @@ export type Size = 'small' | 'medium' | 'large' | 'xlarge';
10
10
  */
11
11
  export type OwnProps = {
12
12
  /**
13
- * Sets whether the checkbox begins checked.
13
+ * Sets whether the checkbox begins as checked or unchecked.
14
14
  */
15
15
  defaultChecked?: boolean;
16
16
  /**
17
- * id assigned to input
17
+ * The ID assigned to the input.
18
18
  */
19
19
  id?: string;
20
20
  /**
@@ -22,7 +22,7 @@ export type OwnProps = {
22
22
  */
23
23
  isChecked?: boolean;
24
24
  /**
25
- * Sets whether the checkbox is disabled.
25
+ * Sets whether the checkbox is disabled. Don’t use a disabled checkbox if it needs to remain in the tab order for assistive technologies.
26
26
  */
27
27
  isDisabled?: boolean;
28
28
  /**
@@ -49,7 +49,7 @@ export type OwnProps = {
49
49
  name?: string;
50
50
  /**
51
51
  * Function that is called whenever the state of the checkbox changes. It will
52
- * be called with an object containing the react synthetic event. Use currentTarget to get value, name and checked
52
+ * be called with an object containing the react synthetic event. Use `currentTarget` to get value, name and checked.
53
53
  */
54
54
  onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void;
55
55
  /**
@@ -57,7 +57,7 @@ export type OwnProps = {
57
57
  */
58
58
  value?: number | string;
59
59
  /**
60
- * The size of the Checkbox
60
+ * The size of the checkbox.
61
61
  */
62
62
  size?: Size;
63
63
  /**
@@ -67,7 +67,7 @@ export type OwnProps = {
67
67
  */
68
68
  testId?: string;
69
69
  /**
70
- * Additional information to be included in the `context` of analytics events that come from radio
70
+ * Additional information to be included in the `context` of analytics events that come from radio.
71
71
  */
72
72
  analyticsContext?: Record<string, any>;
73
73
  };
@@ -91,12 +91,12 @@ export interface LabelTextProps extends React.HTMLProps<HTMLSpanElement> {
91
91
  export interface LabelProps extends React.HTMLProps<HTMLInputElement> {
92
92
  isDisabled?: boolean;
93
93
  /**
94
- * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
94
+ * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
95
95
  */
96
96
  testId?: string;
97
97
  /**
98
98
  * Click handler that is conditionally applied for Firefox
99
- * as Firefox does not dispatch modified click events (e.g. Ctrl+Click) down to the underlying input element
99
+ * as Firefox does not dispatch modified click events (e.g. Ctrl+Click) down to the underlying input element.
100
100
  */
101
101
  onClick?: React.MouseEventHandler;
102
102
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "12.6.11",
3
+ "version": "13.0.1",
4
4
  "description": "A checkbox is an input control that allows a user to select one or more options from a number of choices.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -39,10 +39,10 @@
39
39
  "dependencies": {
40
40
  "@atlaskit/analytics-next": "^9.1.0",
41
41
  "@atlaskit/ds-lib": "^2.2.0",
42
- "@atlaskit/icon": "^21.12.0",
42
+ "@atlaskit/icon": "^22.0.0",
43
43
  "@atlaskit/platform-feature-flags": "^0.2.0",
44
- "@atlaskit/theme": "^12.5.0",
45
- "@atlaskit/tokens": "^1.17.0",
44
+ "@atlaskit/theme": "^12.6.0",
45
+ "@atlaskit/tokens": "^1.28.0",
46
46
  "@babel/runtime": "^7.0.0",
47
47
  "@emotion/react": "^11.7.1"
48
48
  },
@@ -51,6 +51,7 @@
51
51
  },
52
52
  "devDependencies": {
53
53
  "@af/accessibility-testing": "*",
54
+ "@af/visual-regression": "*",
54
55
  "@atlaskit/ssr": "*",
55
56
  "@atlaskit/visual-regression": "*",
56
57
  "@atlaskit/webdriver-runner": "*",
package/dist/cjs/internal/theme.js DELETED
@@ -1,64 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
8
- var _colors = require("@atlaskit/theme/colors");
9
- var theme = {
10
- light: {
11
- borderColor: {
12
- 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, ")"),
13
- 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, ")"),
14
- disabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
15
- checked: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
16
- active: "var(--ds-border, ".concat(_colors.B50, ")"),
17
- invalid: "var(--ds-border-danger, ".concat(_colors.R300, ")"),
18
- invalidAndChecked: "var(--ds-border-danger, ".concat(_colors.R300, ")"),
19
- focused: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
20
- hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")")
21
- },
22
- boxColor: {
23
- rest: "var(--ds-background-input, ".concat(_colors.N10, ")"),
24
- hovered: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
25
- disabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
26
- active: "var(--ds-background-input-pressed, ".concat(_colors.B50, ")"),
27
- hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")"),
28
- checked: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")")
29
- },
30
- tickColor: {
31
- disabledAndChecked: "var(--ds-icon-disabled, ".concat(_colors.N70, ")"),
32
- activeAndChecked: "var(--ds-icon-inverse, ".concat(_colors.B400, ")"),
33
- checked: "var(--ds-icon-inverse, ".concat(_colors.N10, ")")
34
- }
35
- },
36
- dark: {
37
- borderColor: {
38
- rest: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(_colors.DN200, ")") : "var(--ds-border-input, ".concat(_colors.DN80, ")"),
39
- hovered: "var(--ds-border-input, ".concat(_colors.DN200, ")"),
40
- disabled: "var(--ds-background-disabled, ".concat(_colors.DN10, ")"),
41
- checked: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
42
- active: "var(--ds-border, ".concat(_colors.B200, ")"),
43
- invalid: "var(--ds-border-danger, ".concat(_colors.R300, ")"),
44
- invalidAndChecked: "var(--ds-border-danger, ".concat(_colors.R300, ")"),
45
- focused: "var(--ds-border-focused, ".concat(_colors.B75, ")"),
46
- hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B75, ")")
47
- },
48
- boxColor: {
49
- rest: "var(--ds-background-input, ".concat(_colors.DN10, ")"),
50
- hovered: "var(--ds-background-input-hovered, ".concat(_colors.DN30, ")"),
51
- disabled: "var(--ds-background-disabled, ".concat(_colors.DN10, ")"),
52
- active: "var(--ds-background-input-pressed, ".concat(_colors.B200, ")"),
53
- hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B75, ")"),
54
- checked: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")")
55
- },
56
- tickColor: {
57
- disabledAndChecked: "var(--ds-icon-disabled, ".concat(_colors.DN90, ")"),
58
- activeAndChecked: "var(--ds-icon-inverse, ".concat(_colors.DN10, ")"),
59
- checked: "var(--ds-icon-inverse, ".concat(_colors.DN10, ")")
60
- }
61
- }
62
- };
63
- var _default = theme;
64
- exports.default = _default;
package/dist/es2019/internal/theme.js DELETED
@@ -1,57 +0,0 @@
1
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
2
- import { B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N100, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
3
- const theme = {
4
- light: {
5
- borderColor: {
6
- rest: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
7
- hovered: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
8
- disabled: `var(--ds-background-disabled, ${N20})`,
9
- checked: `var(--ds-background-selected-bold, ${B400})`,
10
- active: `var(--ds-border, ${B50})`,
11
- invalid: `var(--ds-border-danger, ${R300})`,
12
- invalidAndChecked: `var(--ds-border-danger, ${R300})`,
13
- focused: `var(--ds-border-focused, ${B200})`,
14
- hoveredAndChecked: `var(--ds-background-selected-bold-hovered, ${B300})`
15
- },
16
- boxColor: {
17
- rest: `var(--ds-background-input, ${N10})`,
18
- hovered: `var(--ds-background-input-hovered, ${N30})`,
19
- disabled: `var(--ds-background-disabled, ${N20})`,
20
- active: `var(--ds-background-input-pressed, ${B50})`,
21
- hoveredAndChecked: `var(--ds-background-selected-bold-hovered, ${B300})`,
22
- checked: `var(--ds-background-selected-bold, ${B400})`
23
- },
24
- tickColor: {
25
- disabledAndChecked: `var(--ds-icon-disabled, ${N70})`,
26
- activeAndChecked: `var(--ds-icon-inverse, ${B400})`,
27
- checked: `var(--ds-icon-inverse, ${N10})`
28
- }
29
- },
30
- dark: {
31
- borderColor: {
32
- rest: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${DN200})` : `var(--ds-border-input, ${DN80})`,
33
- hovered: `var(--ds-border-input, ${DN200})`,
34
- disabled: `var(--ds-background-disabled, ${DN10})`,
35
- checked: `var(--ds-background-selected-bold, ${B400})`,
36
- active: `var(--ds-border, ${B200})`,
37
- invalid: `var(--ds-border-danger, ${R300})`,
38
- invalidAndChecked: `var(--ds-border-danger, ${R300})`,
39
- focused: `var(--ds-border-focused, ${B75})`,
40
- hoveredAndChecked: `var(--ds-background-selected-bold-hovered, ${B75})`
41
- },
42
- boxColor: {
43
- rest: `var(--ds-background-input, ${DN10})`,
44
- hovered: `var(--ds-background-input-hovered, ${DN30})`,
45
- disabled: `var(--ds-background-disabled, ${DN10})`,
46
- active: `var(--ds-background-input-pressed, ${B200})`,
47
- hoveredAndChecked: `var(--ds-background-selected-bold-hovered, ${B75})`,
48
- checked: `var(--ds-background-selected-bold, ${B400})`
49
- },
50
- tickColor: {
51
- disabledAndChecked: `var(--ds-icon-disabled, ${DN90})`,
52
- activeAndChecked: `var(--ds-icon-inverse, ${DN10})`,
53
- checked: `var(--ds-icon-inverse, ${DN10})`
54
- }
55
- }
56
- };
57
- export default theme;
package/dist/esm/internal/theme.js DELETED
@@ -1,57 +0,0 @@
1
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
2
- import { B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N100, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
3
- var theme = {
4
- light: {
5
- borderColor: {
6
- rest: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
7
- hovered: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
8
- disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
9
- checked: "var(--ds-background-selected-bold, ".concat(B400, ")"),
10
- active: "var(--ds-border, ".concat(B50, ")"),
11
- invalid: "var(--ds-border-danger, ".concat(R300, ")"),
12
- invalidAndChecked: "var(--ds-border-danger, ".concat(R300, ")"),
13
- focused: "var(--ds-border-focused, ".concat(B200, ")"),
14
- hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(B300, ")")
15
- },
16
- boxColor: {
17
- rest: "var(--ds-background-input, ".concat(N10, ")"),
18
- hovered: "var(--ds-background-input-hovered, ".concat(N30, ")"),
19
- disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
20
- active: "var(--ds-background-input-pressed, ".concat(B50, ")"),
21
- hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(B300, ")"),
22
- checked: "var(--ds-background-selected-bold, ".concat(B400, ")")
23
- },
24
- tickColor: {
25
- disabledAndChecked: "var(--ds-icon-disabled, ".concat(N70, ")"),
26
- activeAndChecked: "var(--ds-icon-inverse, ".concat(B400, ")"),
27
- checked: "var(--ds-icon-inverse, ".concat(N10, ")")
28
- }
29
- },
30
- dark: {
31
- borderColor: {
32
- rest: getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(DN200, ")") : "var(--ds-border-input, ".concat(DN80, ")"),
33
- hovered: "var(--ds-border-input, ".concat(DN200, ")"),
34
- disabled: "var(--ds-background-disabled, ".concat(DN10, ")"),
35
- checked: "var(--ds-background-selected-bold, ".concat(B400, ")"),
36
- active: "var(--ds-border, ".concat(B200, ")"),
37
- invalid: "var(--ds-border-danger, ".concat(R300, ")"),
38
- invalidAndChecked: "var(--ds-border-danger, ".concat(R300, ")"),
39
- focused: "var(--ds-border-focused, ".concat(B75, ")"),
40
- hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(B75, ")")
41
- },
42
- boxColor: {
43
- rest: "var(--ds-background-input, ".concat(DN10, ")"),
44
- hovered: "var(--ds-background-input-hovered, ".concat(DN30, ")"),
45
- disabled: "var(--ds-background-disabled, ".concat(DN10, ")"),
46
- active: "var(--ds-background-input-pressed, ".concat(B200, ")"),
47
- hoveredAndChecked: "var(--ds-background-selected-bold-hovered, ".concat(B75, ")"),
48
- checked: "var(--ds-background-selected-bold, ".concat(B400, ")")
49
- },
50
- tickColor: {
51
- disabledAndChecked: "var(--ds-icon-disabled, ".concat(DN90, ")"),
52
- activeAndChecked: "var(--ds-icon-inverse, ".concat(DN10, ")"),
53
- checked: "var(--ds-icon-inverse, ".concat(DN10, ")")
54
- }
55
- }
56
- };
57
- export default theme;