@atlaskit/checkbox 12.3.2 → 12.3.6

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 (22) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/cjs/checkbox.js +3 -4
  3. package/dist/cjs/index.js +4 -4
  4. package/dist/cjs/internal/index.js +6 -6
  5. package/dist/cjs/internal/label.js +2 -4
  6. package/dist/cjs/internal/required-indicator.js +1 -3
  7. package/dist/cjs/internal/styles.js +36 -39
  8. package/dist/cjs/version.json +1 -1
  9. package/dist/es2019/checkbox.js +1 -1
  10. package/dist/es2019/internal/label.js +2 -3
  11. package/dist/es2019/internal/required-indicator.js +1 -2
  12. package/dist/es2019/internal/styles.js +36 -38
  13. package/dist/es2019/version.json +1 -1
  14. package/dist/esm/checkbox.js +3 -2
  15. package/dist/esm/internal/label.js +2 -3
  16. package/dist/esm/internal/required-indicator.js +1 -2
  17. package/dist/esm/internal/styles.js +36 -38
  18. package/dist/esm/version.json +1 -1
  19. package/dist/types/internal/label-text.d.ts +1 -0
  20. package/dist/types/internal/label.d.ts +1 -0
  21. package/dist/types/internal/required-indicator.d.ts +1 -0
  22. package/package.json +10 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @atlaskit/checkbox
2
2
 
3
+ ## 12.3.6
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 12.3.5
10
+
11
+ ### Patch Changes
12
+
13
+ - [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
14
+ - Updated dependencies
15
+
16
+ ## 12.3.4
17
+
18
+ ### Patch Changes
19
+
20
+ - Updated dependencies
21
+
22
+ ## 12.3.3
23
+
24
+ ### Patch Changes
25
+
26
+ - Updated dependencies
27
+
3
28
  ## 12.3.2
4
29
 
5
30
  ### Patch Changes
package/dist/cjs/checkbox.js CHANGED
@@ -27,8 +27,7 @@ var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
27
27
 
28
28
  var _internal = require("./internal");
29
29
 
30
- /** @jsx jsx */
31
- // eslint-disable-next-line @atlassian/tangerine/import/entry-points
30
+ var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "mode", "name", "value", "isRequired", "testId"];
32
31
  // firefox doesn't handle cmd+click/ctrl+click properly
33
32
  var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
34
33
 
@@ -95,7 +94,7 @@ var CheckboxWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox(pro
95
94
  value = props.value,
96
95
  isRequired = props.isRequired,
97
96
  testId = props.testId,
98
- rest = (0, _objectWithoutProperties2.default)(props, ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "mode", "name", "value", "isRequired", "testId"]);
97
+ rest = (0, _objectWithoutProperties2.default)(props, _excluded);
99
98
 
100
99
  var _useState = (0, _react.useState)(isCheckedProp !== undefined ? isCheckedProp : defaultChecked),
101
100
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -115,7 +114,7 @@ var CheckboxWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox(pro
115
114
  analyticsData: analyticsContext,
116
115
  componentName: 'checkbox',
117
116
  packageName: "@atlaskit/checkbox",
118
- packageVersion: "12.3.2"
117
+ packageVersion: "12.3.6"
119
118
  });
120
119
  var internalRef = (0, _react.useRef)(null);
121
120
  var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]); // firefox doesn't properly dispatch events from label to its child input elements
package/dist/cjs/index.js CHANGED
@@ -5,16 +5,16 @@ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- Object.defineProperty(exports, "default", {
8
+ Object.defineProperty(exports, "Checkbox", {
9
9
  enumerable: true,
10
10
  get: function get() {
11
- return _checkbox.default;
11
+ return _checkbox.Checkbox;
12
12
  }
13
13
  });
14
- Object.defineProperty(exports, "Checkbox", {
14
+ Object.defineProperty(exports, "default", {
15
15
  enumerable: true,
16
16
  get: function get() {
17
- return _checkbox.Checkbox;
17
+ return _checkbox.default;
18
18
  }
19
19
  });
20
20
 
package/dist/cjs/internal/index.js CHANGED
@@ -5,12 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- Object.defineProperty(exports, "getCheckboxStyles", {
9
- enumerable: true,
10
- get: function get() {
11
- return _styles.default;
12
- }
13
- });
14
8
  Object.defineProperty(exports, "Label", {
15
9
  enumerable: true,
16
10
  get: function get() {
@@ -29,6 +23,12 @@ Object.defineProperty(exports, "RequiredIndicator", {
29
23
  return _requiredIndicator.default;
30
24
  }
31
25
  });
26
+ Object.defineProperty(exports, "getCheckboxStyles", {
27
+ enumerable: true,
28
+ get: function get() {
29
+ return _styles.default;
30
+ }
31
+ });
32
32
 
33
33
  var _styles = _interopRequireDefault(require("./styles"));
34
34
 
package/dist/cjs/internal/label.js CHANGED
@@ -14,8 +14,6 @@ var _colors = require("@atlaskit/theme/colors");
14
14
 
15
15
  var _constants = require("@atlaskit/theme/constants");
16
16
 
17
- var _tokens = require("@atlaskit/tokens");
18
-
19
17
  /** @jsx jsx */
20
18
  var fontFamily = (0, _constants.fontFamily)();
21
19
 
@@ -24,10 +22,10 @@ var labelCSS = function labelCSS() {
24
22
  fontFamily: fontFamily,
25
23
  alignItems: 'center',
26
24
  display: 'flex',
27
- color: (0, _tokens.token)('color.text.highEmphasis', _colors.N900),
25
+ color: "var(--ds-text-highEmphasis, ".concat(_colors.N900, ")"),
28
26
  cursor: 'default',
29
27
  '&[data-disabled]': {
30
- color: (0, _tokens.token)('color.text.disabled', _colors.N80),
28
+ color: "var(--ds-text-disabled, ".concat(_colors.N80, ")"),
31
29
  cursor: 'not-allowed'
32
30
  }
33
31
  };
package/dist/cjs/internal/required-indicator.js CHANGED
@@ -15,15 +15,13 @@ var _colors = require("@atlaskit/theme/colors");
15
15
 
16
16
  var _constants = require("@atlaskit/theme/constants");
17
17
 
18
- var _tokens = require("@atlaskit/tokens");
19
-
20
18
  /** @jsx jsx */
21
19
  var paddingLeft = "".concat((0, _constants.gridSize)() * 0.25, "px");
22
20
 
23
21
  function RequiredIndicator(props) {
24
22
  return (0, _core.jsx)("span", (0, _extends2.default)({
25
23
  css: {
26
- color: (0, _tokens.token)('color.text.danger', _colors.R500),
24
+ color: "var(--ds-text-danger, ".concat(_colors.R500, ")"),
27
25
  paddingLeft: paddingLeft
28
26
  }
29
27
  }, props), "*");
package/dist/cjs/internal/styles.js CHANGED
@@ -13,63 +13,60 @@ var _core = require("@emotion/core");
13
13
 
14
14
  var _colors = require("@atlaskit/theme/colors");
15
15
 
16
- var _tokens = require("@atlaskit/tokens");
17
-
18
16
  var _templateObject, _templateObject2;
19
17
 
20
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
21
18
  var checkboxStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n /* Make the input invisible */\n -webkit-appearance: none;\n -moz-appearance: none;\n margin: 0;\n /* Necessary to hide correctly on mobile Safari */\n border: none;\n width: 0px;\n height: 0px;\n /* Necessary to hide focus ring on Firefox */\n outline: none;\n\n /*\n Change the variables --checkbox-background-color, --checkbox-border-color\n and --checkbox-tick-color according to user interactions.\n All other variables are constant.\n All styles from the input target the sibling svg.\n */\n & + svg {\n --checkbox-background-color: var(--local-background);\n --checkbox-border-color: var(--local-border);\n --checkbox-tick-color: var(--local-tick-rest);\n /* Color changes the background color */\n color: var(--checkbox-background-color);\n /* Fill changes the tick color */\n fill: var(--checkbox-tick-color);\n transition: color 0.2s ease-in-out, fill 0.2s ease-in-out;\n flex-shrink: 0;\n /* If the label is multiple lines, don't center the checkbox */\n align-self: flex-start;\n }\n & + svg rect:first-of-type {\n /* Stroke changes the color of the border */\n stroke: var(--checkbox-border-color);\n stroke-width: 2px;\n transition: stroke 0.2s ease-in-out;\n }\n\n /* Styles are listed in order of increasing specificity */\n\n /*\n Compiled will order the pseudo classes by LVFHA\n As the background colour changes on hover, it is okay for the\n border focus colour to take precedence over hover.\n && is used to make the focus styles more specific than the hover\n styles\n */\n &&:focus + svg,\n &&:checked:focus + svg {\n --checkbox-border-color: var(--local-border-focus);\n }\n\n &:hover + svg {\n --checkbox-background-color: var(--local-background-hover);\n --checkbox-border-color: var(--local-border-hover);\n }\n &:checked:hover + svg {\n --checkbox-background-color: var(--local-background-checked-hover);\n --checkbox-border-color: var(--local-border-checked-hover);\n }\n\n &:checked + svg {\n --checkbox-background-color: var(--local-background-checked);\n --checkbox-border-color: var(--local-border-checked);\n --checkbox-tick-color: var(--local-tick-checked);\n }\n\n &[data-invalid] + svg {\n --checkbox-border-color: var(--local-border-invalid);\n }\n &:checked[data-invalid] + svg {\n --checkbox-border-color: var(--local-border-checked-invalid);\n }\n\n &:active + svg {\n --checkbox-background-color: var(--local-background-active);\n --checkbox-border-color: var(--local-border-active);\n }\n &:checked:active + svg {\n --checkbox-tick-color: var(--local-tick-active);\n --checkbox-background-color: var(--local-background-active);\n --checkbox-border-color: var(--local-border-active);\n }\n\n &:disabled + svg,\n &:disabled:hover + svg,\n &:disabled:focus + svg,\n &:disabled:active + svg,\n &:disabled[data-invalid] + svg {\n --checkbox-background-color: var(--local-background-disabled);\n --checkbox-border-color: var(--local-border-disabled);\n pointer-events: none;\n cursor: not-allowed;\n }\n\n &:disabled:checked + svg {\n --checkbox-tick-color: var(--local-tick-disabled);\n }\n\n @media screen and (forced-colors: active) {\n & + svg {\n --checkbox-background-color: Canvas;\n --checkbox-border-color: CanvasText;\n --checkbox-tick-color: CanvasText;\n }\n\n &:checked + svg,\n &:checked:hover + svg {\n --checkbox-background-color: Canvas;\n --checkbox-border-color: CanvasText;\n --checkbox-tick-color: CanvasText;\n }\n\n &:focus + svg rect:first-of-type {\n stroke: Highlight;\n }\n\n &[data-invalid] + svg {\n --checkbox-border-color: Highlight;\n }\n &:checked[data-invalid] + svg {\n --checkbox-border-color: Highlight;\n }\n\n &:disabled + svg,\n &:disabled:hover + svg,\n &:disabled:focus + svg,\n &:disabled:active + svg,\n &:disabled[data-invalid] + svg {\n --checkbox-background-color: Canvas;\n --checkbox-border-color: GrayText;\n --checkbox-tick-color: GrayText;\n }\n }\n"])));
22
19
  var checkboxThemeColors = {
23
20
  light: {
24
21
  borderColor: {
25
- rest: (0, _tokens.token)('color.border.neutral', _colors.N40),
26
- hovered: (0, _tokens.token)('color.border.neutral', _colors.N40),
27
- disabled: (0, _tokens.token)('color.background.disabled', _colors.N20),
28
- checked: (0, _tokens.token)('color.background.boldBrand.resting', _colors.B400),
29
- active: (0, _tokens.token)('color.border.neutral', _colors.B50),
30
- invalid: (0, _tokens.token)('color.iconBorder.danger', _colors.R300),
31
- invalidAndChecked: (0, _tokens.token)('color.iconBorder.danger', _colors.R300),
32
- focused: (0, _tokens.token)('color.border.focus', _colors.B100),
33
- hoveredAndChecked: (0, _tokens.token)('color.background.boldBrand.hover', _colors.B300)
22
+ rest: "var(--ds-border-neutral, ".concat(_colors.N40, ")"),
23
+ hovered: "var(--ds-border-neutral, ".concat(_colors.N40, ")"),
24
+ disabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
25
+ checked: "var(--ds-background-boldBrand-resting, ".concat(_colors.B400, ")"),
26
+ active: "var(--ds-border-neutral, ".concat(_colors.B50, ")"),
27
+ invalid: "var(--ds-iconBorder-danger, ".concat(_colors.R300, ")"),
28
+ invalidAndChecked: "var(--ds-iconBorder-danger, ".concat(_colors.R300, ")"),
29
+ focused: "var(--ds-border-focus, ".concat(_colors.B100, ")"),
30
+ hoveredAndChecked: "var(--ds-background-boldBrand-hover, ".concat(_colors.B300, ")")
34
31
  },
35
32
  boxColor: {
36
- rest: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', _colors.N10),
37
- hovered: (0, _tokens.token)('color.background.default', _colors.N30),
38
- disabled: (0, _tokens.token)('color.background.disabled', _colors.N20),
39
- active: (0, _tokens.token)('color.background.subtleBorderedNeutral.pressed', _colors.B50),
40
- hoveredAndChecked: (0, _tokens.token)('color.background.boldBrand.hover', _colors.B300),
41
- checked: (0, _tokens.token)('color.background.boldBrand.resting', _colors.B400)
33
+ rest: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(_colors.N10, ")"),
34
+ hovered: "var(--ds-background-default, ".concat(_colors.N30, ")"),
35
+ disabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
36
+ active: "var(--ds-background-subtleBorderedNeutral-pressed, ".concat(_colors.B50, ")"),
37
+ hoveredAndChecked: "var(--ds-background-boldBrand-hover, ".concat(_colors.B300, ")"),
38
+ checked: "var(--ds-background-boldBrand-resting, ".concat(_colors.B400, ")")
42
39
  },
43
40
  tickColor: {
44
- disabledAndChecked: (0, _tokens.token)('color.text.disabled', _colors.N70),
45
- activeAndChecked: (0, _tokens.token)('color.text.onBold', _colors.B400),
46
- checked: (0, _tokens.token)('color.text.onBold', _colors.N10)
41
+ disabledAndChecked: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
42
+ activeAndChecked: "var(--ds-text-onBold, ".concat(_colors.B400, ")"),
43
+ checked: "var(--ds-text-onBold, ".concat(_colors.N10, ")")
47
44
  }
48
45
  },
49
46
  dark: {
50
47
  borderColor: {
51
- rest: (0, _tokens.token)('color.border.neutral', _colors.DN80),
52
- hovered: (0, _tokens.token)('color.border.neutral', _colors.DN200),
53
- disabled: (0, _tokens.token)('color.background.disabled', _colors.DN10),
54
- checked: (0, _tokens.token)('color.background.boldBrand.resting', _colors.B400),
55
- active: (0, _tokens.token)('color.border.neutral', _colors.B200),
56
- invalid: (0, _tokens.token)('color.iconBorder.danger', _colors.R300),
57
- invalidAndChecked: (0, _tokens.token)('color.iconBorder.danger', _colors.R300),
58
- focused: (0, _tokens.token)('color.border.focus', _colors.B75),
59
- hoveredAndChecked: (0, _tokens.token)('color.background.boldBrand.hover', _colors.B75)
48
+ rest: "var(--ds-border-neutral, ".concat(_colors.DN80, ")"),
49
+ hovered: "var(--ds-border-neutral, ".concat(_colors.DN200, ")"),
50
+ disabled: "var(--ds-background-disabled, ".concat(_colors.DN10, ")"),
51
+ checked: "var(--ds-background-boldBrand-resting, ".concat(_colors.B400, ")"),
52
+ active: "var(--ds-border-neutral, ".concat(_colors.B200, ")"),
53
+ invalid: "var(--ds-iconBorder-danger, ".concat(_colors.R300, ")"),
54
+ invalidAndChecked: "var(--ds-iconBorder-danger, ".concat(_colors.R300, ")"),
55
+ focused: "var(--ds-border-focus, ".concat(_colors.B75, ")"),
56
+ hoveredAndChecked: "var(--ds-background-boldBrand-hover, ".concat(_colors.B75, ")")
60
57
  },
61
58
  boxColor: {
62
- rest: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', _colors.DN10),
63
- hovered: (0, _tokens.token)('color.background.default', _colors.DN30),
64
- disabled: (0, _tokens.token)('color.background.disabled', _colors.DN10),
65
- active: (0, _tokens.token)('color.background.subtleBorderedNeutral.pressed', _colors.B200),
66
- hoveredAndChecked: (0, _tokens.token)('color.background.boldBrand.hover', _colors.B75),
67
- checked: (0, _tokens.token)('color.background.boldBrand.resting', _colors.B400)
59
+ rest: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(_colors.DN10, ")"),
60
+ hovered: "var(--ds-background-default, ".concat(_colors.DN30, ")"),
61
+ disabled: "var(--ds-background-disabled, ".concat(_colors.DN10, ")"),
62
+ active: "var(--ds-background-subtleBorderedNeutral-pressed, ".concat(_colors.B200, ")"),
63
+ hoveredAndChecked: "var(--ds-background-boldBrand-hover, ".concat(_colors.B75, ")"),
64
+ checked: "var(--ds-background-boldBrand-resting, ".concat(_colors.B400, ")")
68
65
  },
69
66
  tickColor: {
70
- disabledAndChecked: (0, _tokens.token)('color.text.disabled', _colors.DN90),
71
- activeAndChecked: (0, _tokens.token)('color.text.onBold', _colors.DN10),
72
- checked: (0, _tokens.token)('color.text.onBold', _colors.DN10)
67
+ disabledAndChecked: "var(--ds-text-disabled, ".concat(_colors.DN90, ")"),
68
+ activeAndChecked: "var(--ds-text-onBold, ".concat(_colors.DN10, ")"),
69
+ checked: "var(--ds-text-onBold, ".concat(_colors.DN10, ")")
73
70
  }
74
71
  }
75
72
  };
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "12.3.2",
3
+ "version": "12.3.6",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/checkbox.js CHANGED
@@ -86,7 +86,7 @@ const CheckboxWithMode = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
86
86
  analyticsData: analyticsContext,
87
87
  componentName: 'checkbox',
88
88
  packageName: "@atlaskit/checkbox",
89
- packageVersion: "12.3.2"
89
+ packageVersion: "12.3.6"
90
90
  });
91
91
  const internalRef = useRef(null);
92
92
  const mergedRefs = mergeRefs([internalRef, ref]); // firefox doesn't properly dispatch events from label to its child input elements
package/dist/es2019/internal/label.js CHANGED
@@ -3,16 +3,15 @@ import { useMemo } from 'react';
3
3
  import { jsx } from '@emotion/core';
4
4
  import { N80, N900 } from '@atlaskit/theme/colors';
5
5
  import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
6
- import { token } from '@atlaskit/tokens';
7
6
  const fontFamily = getFontFamily();
8
7
  export const labelCSS = () => ({
9
8
  fontFamily: fontFamily,
10
9
  alignItems: 'center',
11
10
  display: 'flex',
12
- color: token('color.text.highEmphasis', N900),
11
+ color: `var(--ds-text-highEmphasis, ${N900})`,
13
12
  cursor: 'default',
14
13
  '&[data-disabled]': {
15
- color: token('color.text.disabled', N80),
14
+ color: `var(--ds-text-disabled, ${N80})`,
16
15
  cursor: 'not-allowed'
17
16
  }
18
17
  });
package/dist/es2019/internal/required-indicator.js CHANGED
@@ -4,12 +4,11 @@ import _extends from "@babel/runtime/helpers/extends";
4
4
  import { jsx } from '@emotion/core';
5
5
  import { R500 } from '@atlaskit/theme/colors';
6
6
  import { gridSize } from '@atlaskit/theme/constants';
7
- import { token } from '@atlaskit/tokens';
8
7
  const paddingLeft = `${gridSize() * 0.25}px`;
9
8
  export default function RequiredIndicator(props) {
10
9
  return jsx("span", _extends({
11
10
  css: {
12
- color: token('color.text.danger', R500),
11
+ color: `var(--ds-text-danger, ${R500})`,
13
12
  paddingLeft
14
13
  }
15
14
  }, props), "*");
package/dist/es2019/internal/styles.js CHANGED
@@ -1,7 +1,5 @@
1
1
  import { css } from '@emotion/core';
2
2
  import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
3
- import { token } from '@atlaskit/tokens'; // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
4
-
5
3
  const checkboxStyles = css`
6
4
  /* Make the input invisible */
7
5
  -webkit-appearance: none;
@@ -140,54 +138,54 @@ const checkboxStyles = css`
140
138
  const checkboxThemeColors = {
141
139
  light: {
142
140
  borderColor: {
143
- rest: token('color.border.neutral', N40),
144
- hovered: token('color.border.neutral', N40),
145
- disabled: token('color.background.disabled', N20),
146
- checked: token('color.background.boldBrand.resting', B400),
147
- active: token('color.border.neutral', B50),
148
- invalid: token('color.iconBorder.danger', R300),
149
- invalidAndChecked: token('color.iconBorder.danger', R300),
150
- focused: token('color.border.focus', B100),
151
- hoveredAndChecked: token('color.background.boldBrand.hover', B300)
141
+ rest: `var(--ds-border-neutral, ${N40})`,
142
+ hovered: `var(--ds-border-neutral, ${N40})`,
143
+ disabled: `var(--ds-background-disabled, ${N20})`,
144
+ checked: `var(--ds-background-boldBrand-resting, ${B400})`,
145
+ active: `var(--ds-border-neutral, ${B50})`,
146
+ invalid: `var(--ds-iconBorder-danger, ${R300})`,
147
+ invalidAndChecked: `var(--ds-iconBorder-danger, ${R300})`,
148
+ focused: `var(--ds-border-focus, ${B100})`,
149
+ hoveredAndChecked: `var(--ds-background-boldBrand-hover, ${B300})`
152
150
  },
153
151
  boxColor: {
154
- rest: token('color.background.subtleBorderedNeutral.resting', N10),
155
- hovered: token('color.background.default', N30),
156
- disabled: token('color.background.disabled', N20),
157
- active: token('color.background.subtleBorderedNeutral.pressed', B50),
158
- hoveredAndChecked: token('color.background.boldBrand.hover', B300),
159
- checked: token('color.background.boldBrand.resting', B400)
152
+ rest: `var(--ds-background-subtleBorderedNeutral-resting, ${N10})`,
153
+ hovered: `var(--ds-background-default, ${N30})`,
154
+ disabled: `var(--ds-background-disabled, ${N20})`,
155
+ active: `var(--ds-background-subtleBorderedNeutral-pressed, ${B50})`,
156
+ hoveredAndChecked: `var(--ds-background-boldBrand-hover, ${B300})`,
157
+ checked: `var(--ds-background-boldBrand-resting, ${B400})`
160
158
  },
161
159
  tickColor: {
162
- disabledAndChecked: token('color.text.disabled', N70),
163
- activeAndChecked: token('color.text.onBold', B400),
164
- checked: token('color.text.onBold', N10)
160
+ disabledAndChecked: `var(--ds-text-disabled, ${N70})`,
161
+ activeAndChecked: `var(--ds-text-onBold, ${B400})`,
162
+ checked: `var(--ds-text-onBold, ${N10})`
165
163
  }
166
164
  },
167
165
  dark: {
168
166
  borderColor: {
169
- rest: token('color.border.neutral', DN80),
170
- hovered: token('color.border.neutral', DN200),
171
- disabled: token('color.background.disabled', DN10),
172
- checked: token('color.background.boldBrand.resting', B400),
173
- active: token('color.border.neutral', B200),
174
- invalid: token('color.iconBorder.danger', R300),
175
- invalidAndChecked: token('color.iconBorder.danger', R300),
176
- focused: token('color.border.focus', B75),
177
- hoveredAndChecked: token('color.background.boldBrand.hover', B75)
167
+ rest: `var(--ds-border-neutral, ${DN80})`,
168
+ hovered: `var(--ds-border-neutral, ${DN200})`,
169
+ disabled: `var(--ds-background-disabled, ${DN10})`,
170
+ checked: `var(--ds-background-boldBrand-resting, ${B400})`,
171
+ active: `var(--ds-border-neutral, ${B200})`,
172
+ invalid: `var(--ds-iconBorder-danger, ${R300})`,
173
+ invalidAndChecked: `var(--ds-iconBorder-danger, ${R300})`,
174
+ focused: `var(--ds-border-focus, ${B75})`,
175
+ hoveredAndChecked: `var(--ds-background-boldBrand-hover, ${B75})`
178
176
  },
179
177
  boxColor: {
180
- rest: token('color.background.subtleBorderedNeutral.resting', DN10),
181
- hovered: token('color.background.default', DN30),
182
- disabled: token('color.background.disabled', DN10),
183
- active: token('color.background.subtleBorderedNeutral.pressed', B200),
184
- hoveredAndChecked: token('color.background.boldBrand.hover', B75),
185
- checked: token('color.background.boldBrand.resting', B400)
178
+ rest: `var(--ds-background-subtleBorderedNeutral-resting, ${DN10})`,
179
+ hovered: `var(--ds-background-default, ${DN30})`,
180
+ disabled: `var(--ds-background-disabled, ${DN10})`,
181
+ active: `var(--ds-background-subtleBorderedNeutral-pressed, ${B200})`,
182
+ hoveredAndChecked: `var(--ds-background-boldBrand-hover, ${B75})`,
183
+ checked: `var(--ds-background-boldBrand-resting, ${B400})`
186
184
  },
187
185
  tickColor: {
188
- disabledAndChecked: token('color.text.disabled', DN90),
189
- activeAndChecked: token('color.text.onBold', DN10),
190
- checked: token('color.text.onBold', DN10)
186
+ disabledAndChecked: `var(--ds-text-disabled, ${DN90})`,
187
+ activeAndChecked: `var(--ds-text-onBold, ${DN10})`,
188
+ checked: `var(--ds-text-onBold, ${DN10})`
191
189
  }
192
190
  }
193
191
  };
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "12.3.2",
3
+ "version": "12.3.6",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/checkbox.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
+ var _excluded = ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "mode", "name", "value", "isRequired", "testId"];
4
5
 
5
6
  /** @jsx jsx */
6
7
  import { forwardRef, memo, useCallback, useMemo, useRef, useState } from 'react';
@@ -77,7 +78,7 @@ var CheckboxWithMode = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
77
78
  value = props.value,
78
79
  isRequired = props.isRequired,
79
80
  testId = props.testId,
80
- rest = _objectWithoutProperties(props, ["isChecked", "isDisabled", "isInvalid", "defaultChecked", "isIndeterminate", "size", "onChange", "analyticsContext", "label", "mode", "name", "value", "isRequired", "testId"]);
81
+ rest = _objectWithoutProperties(props, _excluded);
81
82
 
82
83
  var _useState = useState(isCheckedProp !== undefined ? isCheckedProp : defaultChecked),
83
84
  _useState2 = _slicedToArray(_useState, 2),
@@ -97,7 +98,7 @@ var CheckboxWithMode = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
97
98
  analyticsData: analyticsContext,
98
99
  componentName: 'checkbox',
99
100
  packageName: "@atlaskit/checkbox",
100
- packageVersion: "12.3.2"
101
+ packageVersion: "12.3.6"
101
102
  });
102
103
  var internalRef = useRef(null);
103
104
  var mergedRefs = mergeRefs([internalRef, ref]); // firefox doesn't properly dispatch events from label to its child input elements
package/dist/esm/internal/label.js CHANGED
@@ -3,17 +3,16 @@ import { useMemo } from 'react';
3
3
  import { jsx } from '@emotion/core';
4
4
  import { N80, N900 } from '@atlaskit/theme/colors';
5
5
  import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
6
- import { token } from '@atlaskit/tokens';
7
6
  var fontFamily = getFontFamily();
8
7
  export var labelCSS = function labelCSS() {
9
8
  return {
10
9
  fontFamily: fontFamily,
11
10
  alignItems: 'center',
12
11
  display: 'flex',
13
- color: token('color.text.highEmphasis', N900),
12
+ color: "var(--ds-text-highEmphasis, ".concat(N900, ")"),
14
13
  cursor: 'default',
15
14
  '&[data-disabled]': {
16
- color: token('color.text.disabled', N80),
15
+ color: "var(--ds-text-disabled, ".concat(N80, ")"),
17
16
  cursor: 'not-allowed'
18
17
  }
19
18
  };
package/dist/esm/internal/required-indicator.js CHANGED
@@ -4,12 +4,11 @@ import _extends from "@babel/runtime/helpers/extends";
4
4
  import { jsx } from '@emotion/core';
5
5
  import { R500 } from '@atlaskit/theme/colors';
6
6
  import { gridSize } from '@atlaskit/theme/constants';
7
- import { token } from '@atlaskit/tokens';
8
7
  var paddingLeft = "".concat(gridSize() * 0.25, "px");
9
8
  export default function RequiredIndicator(props) {
10
9
  return jsx("span", _extends({
11
10
  css: {
12
- color: token('color.text.danger', R500),
11
+ color: "var(--ds-text-danger, ".concat(R500, ")"),
13
12
  paddingLeft: paddingLeft
14
13
  }
15
14
  }, props), "*");
package/dist/esm/internal/styles.js CHANGED
@@ -4,60 +4,58 @@ var _templateObject, _templateObject2;
4
4
 
5
5
  import { css } from '@emotion/core';
6
6
  import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
7
- import { token } from '@atlaskit/tokens'; // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
8
-
9
7
  var checkboxStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n /* Make the input invisible */\n -webkit-appearance: none;\n -moz-appearance: none;\n margin: 0;\n /* Necessary to hide correctly on mobile Safari */\n border: none;\n width: 0px;\n height: 0px;\n /* Necessary to hide focus ring on Firefox */\n outline: none;\n\n /*\n Change the variables --checkbox-background-color, --checkbox-border-color\n and --checkbox-tick-color according to user interactions.\n All other variables are constant.\n All styles from the input target the sibling svg.\n */\n & + svg {\n --checkbox-background-color: var(--local-background);\n --checkbox-border-color: var(--local-border);\n --checkbox-tick-color: var(--local-tick-rest);\n /* Color changes the background color */\n color: var(--checkbox-background-color);\n /* Fill changes the tick color */\n fill: var(--checkbox-tick-color);\n transition: color 0.2s ease-in-out, fill 0.2s ease-in-out;\n flex-shrink: 0;\n /* If the label is multiple lines, don't center the checkbox */\n align-self: flex-start;\n }\n & + svg rect:first-of-type {\n /* Stroke changes the color of the border */\n stroke: var(--checkbox-border-color);\n stroke-width: 2px;\n transition: stroke 0.2s ease-in-out;\n }\n\n /* Styles are listed in order of increasing specificity */\n\n /*\n Compiled will order the pseudo classes by LVFHA\n As the background colour changes on hover, it is okay for the\n border focus colour to take precedence over hover.\n && is used to make the focus styles more specific than the hover\n styles\n */\n &&:focus + svg,\n &&:checked:focus + svg {\n --checkbox-border-color: var(--local-border-focus);\n }\n\n &:hover + svg {\n --checkbox-background-color: var(--local-background-hover);\n --checkbox-border-color: var(--local-border-hover);\n }\n &:checked:hover + svg {\n --checkbox-background-color: var(--local-background-checked-hover);\n --checkbox-border-color: var(--local-border-checked-hover);\n }\n\n &:checked + svg {\n --checkbox-background-color: var(--local-background-checked);\n --checkbox-border-color: var(--local-border-checked);\n --checkbox-tick-color: var(--local-tick-checked);\n }\n\n &[data-invalid] + svg {\n --checkbox-border-color: var(--local-border-invalid);\n }\n &:checked[data-invalid] + svg {\n --checkbox-border-color: var(--local-border-checked-invalid);\n }\n\n &:active + svg {\n --checkbox-background-color: var(--local-background-active);\n --checkbox-border-color: var(--local-border-active);\n }\n &:checked:active + svg {\n --checkbox-tick-color: var(--local-tick-active);\n --checkbox-background-color: var(--local-background-active);\n --checkbox-border-color: var(--local-border-active);\n }\n\n &:disabled + svg,\n &:disabled:hover + svg,\n &:disabled:focus + svg,\n &:disabled:active + svg,\n &:disabled[data-invalid] + svg {\n --checkbox-background-color: var(--local-background-disabled);\n --checkbox-border-color: var(--local-border-disabled);\n pointer-events: none;\n cursor: not-allowed;\n }\n\n &:disabled:checked + svg {\n --checkbox-tick-color: var(--local-tick-disabled);\n }\n\n @media screen and (forced-colors: active) {\n & + svg {\n --checkbox-background-color: Canvas;\n --checkbox-border-color: CanvasText;\n --checkbox-tick-color: CanvasText;\n }\n\n &:checked + svg,\n &:checked:hover + svg {\n --checkbox-background-color: Canvas;\n --checkbox-border-color: CanvasText;\n --checkbox-tick-color: CanvasText;\n }\n\n &:focus + svg rect:first-of-type {\n stroke: Highlight;\n }\n\n &[data-invalid] + svg {\n --checkbox-border-color: Highlight;\n }\n &:checked[data-invalid] + svg {\n --checkbox-border-color: Highlight;\n }\n\n &:disabled + svg,\n &:disabled:hover + svg,\n &:disabled:focus + svg,\n &:disabled:active + svg,\n &:disabled[data-invalid] + svg {\n --checkbox-background-color: Canvas;\n --checkbox-border-color: GrayText;\n --checkbox-tick-color: GrayText;\n }\n }\n"])));
10
8
  var checkboxThemeColors = {
11
9
  light: {
12
10
  borderColor: {
13
- rest: token('color.border.neutral', N40),
14
- hovered: token('color.border.neutral', N40),
15
- disabled: token('color.background.disabled', N20),
16
- checked: token('color.background.boldBrand.resting', B400),
17
- active: token('color.border.neutral', B50),
18
- invalid: token('color.iconBorder.danger', R300),
19
- invalidAndChecked: token('color.iconBorder.danger', R300),
20
- focused: token('color.border.focus', B100),
21
- hoveredAndChecked: token('color.background.boldBrand.hover', B300)
11
+ rest: "var(--ds-border-neutral, ".concat(N40, ")"),
12
+ hovered: "var(--ds-border-neutral, ".concat(N40, ")"),
13
+ disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
14
+ checked: "var(--ds-background-boldBrand-resting, ".concat(B400, ")"),
15
+ active: "var(--ds-border-neutral, ".concat(B50, ")"),
16
+ invalid: "var(--ds-iconBorder-danger, ".concat(R300, ")"),
17
+ invalidAndChecked: "var(--ds-iconBorder-danger, ".concat(R300, ")"),
18
+ focused: "var(--ds-border-focus, ".concat(B100, ")"),
19
+ hoveredAndChecked: "var(--ds-background-boldBrand-hover, ".concat(B300, ")")
22
20
  },
23
21
  boxColor: {
24
- rest: token('color.background.subtleBorderedNeutral.resting', N10),
25
- hovered: token('color.background.default', N30),
26
- disabled: token('color.background.disabled', N20),
27
- active: token('color.background.subtleBorderedNeutral.pressed', B50),
28
- hoveredAndChecked: token('color.background.boldBrand.hover', B300),
29
- checked: token('color.background.boldBrand.resting', B400)
22
+ rest: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(N10, ")"),
23
+ hovered: "var(--ds-background-default, ".concat(N30, ")"),
24
+ disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
25
+ active: "var(--ds-background-subtleBorderedNeutral-pressed, ".concat(B50, ")"),
26
+ hoveredAndChecked: "var(--ds-background-boldBrand-hover, ".concat(B300, ")"),
27
+ checked: "var(--ds-background-boldBrand-resting, ".concat(B400, ")")
30
28
  },
31
29
  tickColor: {
32
- disabledAndChecked: token('color.text.disabled', N70),
33
- activeAndChecked: token('color.text.onBold', B400),
34
- checked: token('color.text.onBold', N10)
30
+ disabledAndChecked: "var(--ds-text-disabled, ".concat(N70, ")"),
31
+ activeAndChecked: "var(--ds-text-onBold, ".concat(B400, ")"),
32
+ checked: "var(--ds-text-onBold, ".concat(N10, ")")
35
33
  }
36
34
  },
37
35
  dark: {
38
36
  borderColor: {
39
- rest: token('color.border.neutral', DN80),
40
- hovered: token('color.border.neutral', DN200),
41
- disabled: token('color.background.disabled', DN10),
42
- checked: token('color.background.boldBrand.resting', B400),
43
- active: token('color.border.neutral', B200),
44
- invalid: token('color.iconBorder.danger', R300),
45
- invalidAndChecked: token('color.iconBorder.danger', R300),
46
- focused: token('color.border.focus', B75),
47
- hoveredAndChecked: token('color.background.boldBrand.hover', B75)
37
+ rest: "var(--ds-border-neutral, ".concat(DN80, ")"),
38
+ hovered: "var(--ds-border-neutral, ".concat(DN200, ")"),
39
+ disabled: "var(--ds-background-disabled, ".concat(DN10, ")"),
40
+ checked: "var(--ds-background-boldBrand-resting, ".concat(B400, ")"),
41
+ active: "var(--ds-border-neutral, ".concat(B200, ")"),
42
+ invalid: "var(--ds-iconBorder-danger, ".concat(R300, ")"),
43
+ invalidAndChecked: "var(--ds-iconBorder-danger, ".concat(R300, ")"),
44
+ focused: "var(--ds-border-focus, ".concat(B75, ")"),
45
+ hoveredAndChecked: "var(--ds-background-boldBrand-hover, ".concat(B75, ")")
48
46
  },
49
47
  boxColor: {
50
- rest: token('color.background.subtleBorderedNeutral.resting', DN10),
51
- hovered: token('color.background.default', DN30),
52
- disabled: token('color.background.disabled', DN10),
53
- active: token('color.background.subtleBorderedNeutral.pressed', B200),
54
- hoveredAndChecked: token('color.background.boldBrand.hover', B75),
55
- checked: token('color.background.boldBrand.resting', B400)
48
+ rest: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(DN10, ")"),
49
+ hovered: "var(--ds-background-default, ".concat(DN30, ")"),
50
+ disabled: "var(--ds-background-disabled, ".concat(DN10, ")"),
51
+ active: "var(--ds-background-subtleBorderedNeutral-pressed, ".concat(B200, ")"),
52
+ hoveredAndChecked: "var(--ds-background-boldBrand-hover, ".concat(B75, ")"),
53
+ checked: "var(--ds-background-boldBrand-resting, ".concat(B400, ")")
56
54
  },
57
55
  tickColor: {
58
- disabledAndChecked: token('color.text.disabled', DN90),
59
- activeAndChecked: token('color.text.onBold', DN10),
60
- checked: token('color.text.onBold', DN10)
56
+ disabledAndChecked: "var(--ds-text-disabled, ".concat(DN90, ")"),
57
+ activeAndChecked: "var(--ds-text-onBold, ".concat(DN10, ")"),
58
+ checked: "var(--ds-text-onBold, ".concat(DN10, ")")
61
59
  }
62
60
  }
63
61
  };
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "12.3.2",
3
+ "version": "12.3.6",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/internal/label-text.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { LabelTextProps } from '../types';
2
3
  export declare const labelTextCSS: {
3
4
  paddingRight: number;
package/dist/types/internal/label.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { CSSObject } from '@emotion/core';
2
3
  import { LabelProps } from '../types';
3
4
  export declare const labelCSS: () => CSSObject;
package/dist/types/internal/required-indicator.d.ts CHANGED
@@ -1,2 +1,3 @@
1
+ /// <reference types="react" />
1
2
  import { RequiredIndicatorProps } from '../types';
2
3
  export default function RequiredIndicator(props: RequiredIndicatorProps): JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "12.3.2",
3
+ "version": "12.3.6",
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/"
@@ -16,7 +16,6 @@
16
16
  "atlaskit:src": "src/index.ts",
17
17
  "atlassian": {
18
18
  "team": "Design System Team",
19
- "inPublicMirror": true,
20
19
  "releaseModel": "scheduled",
21
20
  "website": {
22
21
  "name": "Checkbox"
@@ -28,9 +27,9 @@
28
27
  "dependencies": {
29
28
  "@atlaskit/analytics-next": "^8.2.0",
30
29
  "@atlaskit/ds-lib": "^1.3.0",
31
- "@atlaskit/icon": "^21.8.0",
32
- "@atlaskit/theme": "^11.5.0",
33
- "@atlaskit/tokens": "^0.2.0",
30
+ "@atlaskit/icon": "^21.10.0",
31
+ "@atlaskit/theme": "^12.1.0",
32
+ "@atlaskit/tokens": "^0.5.0",
34
33
  "@babel/runtime": "^7.0.0",
35
34
  "@emotion/core": "^10.0.9"
36
35
  },
@@ -38,13 +37,12 @@
38
37
  "react": "^16.8.0"
39
38
  },
40
39
  "devDependencies": {
41
- "@atlaskit/build-utils": "*",
42
40
  "@atlaskit/button": "^16.1.0",
43
41
  "@atlaskit/docs": "*",
44
- "@atlaskit/form": "^8.3.0",
42
+ "@atlaskit/form": "^8.4.0",
45
43
  "@atlaskit/section-message": "^6.1.0",
46
44
  "@atlaskit/ssr": "*",
47
- "@atlaskit/toggle": "^12.2.0",
45
+ "@atlaskit/toggle": "^12.4.0",
48
46
  "@atlaskit/visual-regression": "*",
49
47
  "@atlaskit/webdriver-runner": "*",
50
48
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -68,7 +66,10 @@
68
66
  "ui-components": "lite-mode",
69
67
  "analytics": "analytics-next",
70
68
  "theming": "tokens",
71
- "deprecation": "no-deprecated-imports"
69
+ "deprecation": "no-deprecated-imports",
70
+ "styling": [
71
+ "emotion"
72
+ ]
72
73
  }
73
74
  },
74
75
  "homepage": "https://atlassian.design/components/checkbox/",