@atlaskit/checkbox 12.3.3 → 12.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/CHANGELOG.md +26 -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 -38
  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 -37
  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 -37
  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 +9 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,31 @@
1
1
  # @atlaskit/checkbox
2
2
 
3
+ ## 12.3.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
8
+ - Updated dependencies
9
+
10
+ ## 12.3.6
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
16
+ ## 12.3.5
17
+
18
+ ### Patch Changes
19
+
20
+ - [`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.
21
+ - Updated dependencies
22
+
23
+ ## 12.3.4
24
+
25
+ ### Patch Changes
26
+
27
+ - Updated dependencies
28
+
3
29
  ## 12.3.3
4
30
 
5
31
  ### 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.3"
117
+ packageVersion: "12.3.7"
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, ".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,62 +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
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"])));
21
19
  var checkboxThemeColors = {
22
20
  light: {
23
21
  borderColor: {
24
- rest: (0, _tokens.token)('color.border.neutral', _colors.N40),
25
- hovered: (0, _tokens.token)('color.border.neutral', _colors.N40),
26
- disabled: (0, _tokens.token)('color.background.disabled', _colors.N20),
27
- checked: (0, _tokens.token)('color.background.boldBrand.resting', _colors.B400),
28
- active: (0, _tokens.token)('color.border.neutral', _colors.B50),
29
- invalid: (0, _tokens.token)('color.iconBorder.danger', _colors.R300),
30
- invalidAndChecked: (0, _tokens.token)('color.iconBorder.danger', _colors.R300),
31
- focused: (0, _tokens.token)('color.border.focus', _colors.B100),
32
- hoveredAndChecked: (0, _tokens.token)('color.background.boldBrand.hover', _colors.B300)
22
+ rest: "var(--ds-border, ".concat(_colors.N40, ")"),
23
+ hovered: "var(--ds-border, ".concat(_colors.N40, ")"),
24
+ disabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
25
+ checked: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
26
+ active: "var(--ds-border, ".concat(_colors.B50, ")"),
27
+ invalid: "var(--ds-border-danger, ".concat(_colors.R300, ")"),
28
+ invalidAndChecked: "var(--ds-border-danger, ".concat(_colors.R300, ")"),
29
+ focused: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
30
+ hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B300, ")")
33
31
  },
34
32
  boxColor: {
35
- rest: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', _colors.N10),
36
- hovered: (0, _tokens.token)('color.background.default', _colors.N30),
37
- disabled: (0, _tokens.token)('color.background.disabled', _colors.N20),
38
- active: (0, _tokens.token)('color.background.subtleBorderedNeutral.pressed', _colors.B50),
39
- hoveredAndChecked: (0, _tokens.token)('color.background.boldBrand.hover', _colors.B300),
40
- checked: (0, _tokens.token)('color.background.boldBrand.resting', _colors.B400)
33
+ rest: "var(--ds-background-input, ".concat(_colors.N10, ")"),
34
+ hovered: "var(--ds-surface, ".concat(_colors.N30, ")"),
35
+ disabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
36
+ active: "var(--ds-background-input-pressed, ".concat(_colors.B50, ")"),
37
+ hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B300, ")"),
38
+ checked: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")")
41
39
  },
42
40
  tickColor: {
43
- disabledAndChecked: (0, _tokens.token)('color.text.disabled', _colors.N70),
44
- activeAndChecked: (0, _tokens.token)('color.text.onBold', _colors.B400),
45
- checked: (0, _tokens.token)('color.text.onBold', _colors.N10)
41
+ disabledAndChecked: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
42
+ activeAndChecked: "var(--ds-text-inverse, ".concat(_colors.B400, ")"),
43
+ checked: "var(--ds-text-inverse, ".concat(_colors.N10, ")")
46
44
  }
47
45
  },
48
46
  dark: {
49
47
  borderColor: {
50
- rest: (0, _tokens.token)('color.border.neutral', _colors.DN80),
51
- hovered: (0, _tokens.token)('color.border.neutral', _colors.DN200),
52
- disabled: (0, _tokens.token)('color.background.disabled', _colors.DN10),
53
- checked: (0, _tokens.token)('color.background.boldBrand.resting', _colors.B400),
54
- active: (0, _tokens.token)('color.border.neutral', _colors.B200),
55
- invalid: (0, _tokens.token)('color.iconBorder.danger', _colors.R300),
56
- invalidAndChecked: (0, _tokens.token)('color.iconBorder.danger', _colors.R300),
57
- focused: (0, _tokens.token)('color.border.focus', _colors.B75),
58
- hoveredAndChecked: (0, _tokens.token)('color.background.boldBrand.hover', _colors.B75)
48
+ rest: "var(--ds-border, ".concat(_colors.DN80, ")"),
49
+ hovered: "var(--ds-border, ".concat(_colors.DN200, ")"),
50
+ disabled: "var(--ds-background-disabled, ".concat(_colors.DN10, ")"),
51
+ checked: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
52
+ active: "var(--ds-border, ".concat(_colors.B200, ")"),
53
+ invalid: "var(--ds-border-danger, ".concat(_colors.R300, ")"),
54
+ invalidAndChecked: "var(--ds-border-danger, ".concat(_colors.R300, ")"),
55
+ focused: "var(--ds-border-focused, ".concat(_colors.B75, ")"),
56
+ hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B75, ")")
59
57
  },
60
58
  boxColor: {
61
- rest: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', _colors.DN10),
62
- hovered: (0, _tokens.token)('color.background.default', _colors.DN30),
63
- disabled: (0, _tokens.token)('color.background.disabled', _colors.DN10),
64
- active: (0, _tokens.token)('color.background.subtleBorderedNeutral.pressed', _colors.B200),
65
- hoveredAndChecked: (0, _tokens.token)('color.background.boldBrand.hover', _colors.B75),
66
- checked: (0, _tokens.token)('color.background.boldBrand.resting', _colors.B400)
59
+ rest: "var(--ds-background-input, ".concat(_colors.DN10, ")"),
60
+ hovered: "var(--ds-surface, ".concat(_colors.DN30, ")"),
61
+ disabled: "var(--ds-background-disabled, ".concat(_colors.DN10, ")"),
62
+ active: "var(--ds-background-input-pressed, ".concat(_colors.B200, ")"),
63
+ hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B75, ")"),
64
+ checked: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")")
67
65
  },
68
66
  tickColor: {
69
- disabledAndChecked: (0, _tokens.token)('color.text.disabled', _colors.DN90),
70
- activeAndChecked: (0, _tokens.token)('color.text.onBold', _colors.DN10),
71
- checked: (0, _tokens.token)('color.text.onBold', _colors.DN10)
67
+ disabledAndChecked: "var(--ds-text-disabled, ".concat(_colors.DN90, ")"),
68
+ activeAndChecked: "var(--ds-text-inverse, ".concat(_colors.DN10, ")"),
69
+ checked: "var(--ds-text-inverse, ".concat(_colors.DN10, ")")
72
70
  }
73
71
  }
74
72
  };
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "12.3.3",
3
+ "version": "12.3.7",
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.3"
89
+ packageVersion: "12.3.7"
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, ${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,6 +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';
4
3
  const checkboxStyles = css`
5
4
  /* Make the input invisible */
6
5
  -webkit-appearance: none;
@@ -139,54 +138,54 @@ const checkboxStyles = css`
139
138
  const checkboxThemeColors = {
140
139
  light: {
141
140
  borderColor: {
142
- rest: token('color.border.neutral', N40),
143
- hovered: token('color.border.neutral', N40),
144
- disabled: token('color.background.disabled', N20),
145
- checked: token('color.background.boldBrand.resting', B400),
146
- active: token('color.border.neutral', B50),
147
- invalid: token('color.iconBorder.danger', R300),
148
- invalidAndChecked: token('color.iconBorder.danger', R300),
149
- focused: token('color.border.focus', B100),
150
- hoveredAndChecked: token('color.background.boldBrand.hover', B300)
141
+ rest: `var(--ds-border, ${N40})`,
142
+ hovered: `var(--ds-border, ${N40})`,
143
+ disabled: `var(--ds-background-disabled, ${N20})`,
144
+ checked: `var(--ds-background-brand-bold, ${B400})`,
145
+ active: `var(--ds-border, ${B50})`,
146
+ invalid: `var(--ds-border-danger, ${R300})`,
147
+ invalidAndChecked: `var(--ds-border-danger, ${R300})`,
148
+ focused: `var(--ds-border-focused, ${B100})`,
149
+ hoveredAndChecked: `var(--ds-background-brand-bold-hovered, ${B300})`
151
150
  },
152
151
  boxColor: {
153
- rest: token('color.background.subtleBorderedNeutral.resting', N10),
154
- hovered: token('color.background.default', N30),
155
- disabled: token('color.background.disabled', N20),
156
- active: token('color.background.subtleBorderedNeutral.pressed', B50),
157
- hoveredAndChecked: token('color.background.boldBrand.hover', B300),
158
- checked: token('color.background.boldBrand.resting', B400)
152
+ rest: `var(--ds-background-input, ${N10})`,
153
+ hovered: `var(--ds-surface, ${N30})`,
154
+ disabled: `var(--ds-background-disabled, ${N20})`,
155
+ active: `var(--ds-background-input-pressed, ${B50})`,
156
+ hoveredAndChecked: `var(--ds-background-brand-bold-hovered, ${B300})`,
157
+ checked: `var(--ds-background-brand-bold, ${B400})`
159
158
  },
160
159
  tickColor: {
161
- disabledAndChecked: token('color.text.disabled', N70),
162
- activeAndChecked: token('color.text.onBold', B400),
163
- checked: token('color.text.onBold', N10)
160
+ disabledAndChecked: `var(--ds-text-disabled, ${N70})`,
161
+ activeAndChecked: `var(--ds-text-inverse, ${B400})`,
162
+ checked: `var(--ds-text-inverse, ${N10})`
164
163
  }
165
164
  },
166
165
  dark: {
167
166
  borderColor: {
168
- rest: token('color.border.neutral', DN80),
169
- hovered: token('color.border.neutral', DN200),
170
- disabled: token('color.background.disabled', DN10),
171
- checked: token('color.background.boldBrand.resting', B400),
172
- active: token('color.border.neutral', B200),
173
- invalid: token('color.iconBorder.danger', R300),
174
- invalidAndChecked: token('color.iconBorder.danger', R300),
175
- focused: token('color.border.focus', B75),
176
- hoveredAndChecked: token('color.background.boldBrand.hover', B75)
167
+ rest: `var(--ds-border, ${DN80})`,
168
+ hovered: `var(--ds-border, ${DN200})`,
169
+ disabled: `var(--ds-background-disabled, ${DN10})`,
170
+ checked: `var(--ds-background-brand-bold, ${B400})`,
171
+ active: `var(--ds-border, ${B200})`,
172
+ invalid: `var(--ds-border-danger, ${R300})`,
173
+ invalidAndChecked: `var(--ds-border-danger, ${R300})`,
174
+ focused: `var(--ds-border-focused, ${B75})`,
175
+ hoveredAndChecked: `var(--ds-background-brand-bold-hovered, ${B75})`
177
176
  },
178
177
  boxColor: {
179
- rest: token('color.background.subtleBorderedNeutral.resting', DN10),
180
- hovered: token('color.background.default', DN30),
181
- disabled: token('color.background.disabled', DN10),
182
- active: token('color.background.subtleBorderedNeutral.pressed', B200),
183
- hoveredAndChecked: token('color.background.boldBrand.hover', B75),
184
- checked: token('color.background.boldBrand.resting', B400)
178
+ rest: `var(--ds-background-input, ${DN10})`,
179
+ hovered: `var(--ds-surface, ${DN30})`,
180
+ disabled: `var(--ds-background-disabled, ${DN10})`,
181
+ active: `var(--ds-background-input-pressed, ${B200})`,
182
+ hoveredAndChecked: `var(--ds-background-brand-bold-hovered, ${B75})`,
183
+ checked: `var(--ds-background-brand-bold, ${B400})`
185
184
  },
186
185
  tickColor: {
187
- disabledAndChecked: token('color.text.disabled', DN90),
188
- activeAndChecked: token('color.text.onBold', DN10),
189
- checked: token('color.text.onBold', DN10)
186
+ disabledAndChecked: `var(--ds-text-disabled, ${DN90})`,
187
+ activeAndChecked: `var(--ds-text-inverse, ${DN10})`,
188
+ checked: `var(--ds-text-inverse, ${DN10})`
190
189
  }
191
190
  }
192
191
  };
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "12.3.3",
3
+ "version": "12.3.7",
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.3"
101
+ packageVersion: "12.3.7"
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, ".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,59 +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';
8
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"])));
9
8
  var checkboxThemeColors = {
10
9
  light: {
11
10
  borderColor: {
12
- rest: token('color.border.neutral', N40),
13
- hovered: token('color.border.neutral', N40),
14
- disabled: token('color.background.disabled', N20),
15
- checked: token('color.background.boldBrand.resting', B400),
16
- active: token('color.border.neutral', B50),
17
- invalid: token('color.iconBorder.danger', R300),
18
- invalidAndChecked: token('color.iconBorder.danger', R300),
19
- focused: token('color.border.focus', B100),
20
- hoveredAndChecked: token('color.background.boldBrand.hover', B300)
11
+ rest: "var(--ds-border, ".concat(N40, ")"),
12
+ hovered: "var(--ds-border, ".concat(N40, ")"),
13
+ disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
14
+ checked: "var(--ds-background-brand-bold, ".concat(B400, ")"),
15
+ active: "var(--ds-border, ".concat(B50, ")"),
16
+ invalid: "var(--ds-border-danger, ".concat(R300, ")"),
17
+ invalidAndChecked: "var(--ds-border-danger, ".concat(R300, ")"),
18
+ focused: "var(--ds-border-focused, ".concat(B100, ")"),
19
+ hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(B300, ")")
21
20
  },
22
21
  boxColor: {
23
- rest: token('color.background.subtleBorderedNeutral.resting', N10),
24
- hovered: token('color.background.default', N30),
25
- disabled: token('color.background.disabled', N20),
26
- active: token('color.background.subtleBorderedNeutral.pressed', B50),
27
- hoveredAndChecked: token('color.background.boldBrand.hover', B300),
28
- checked: token('color.background.boldBrand.resting', B400)
22
+ rest: "var(--ds-background-input, ".concat(N10, ")"),
23
+ hovered: "var(--ds-surface, ".concat(N30, ")"),
24
+ disabled: "var(--ds-background-disabled, ".concat(N20, ")"),
25
+ active: "var(--ds-background-input-pressed, ".concat(B50, ")"),
26
+ hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(B300, ")"),
27
+ checked: "var(--ds-background-brand-bold, ".concat(B400, ")")
29
28
  },
30
29
  tickColor: {
31
- disabledAndChecked: token('color.text.disabled', N70),
32
- activeAndChecked: token('color.text.onBold', B400),
33
- checked: token('color.text.onBold', N10)
30
+ disabledAndChecked: "var(--ds-text-disabled, ".concat(N70, ")"),
31
+ activeAndChecked: "var(--ds-text-inverse, ".concat(B400, ")"),
32
+ checked: "var(--ds-text-inverse, ".concat(N10, ")")
34
33
  }
35
34
  },
36
35
  dark: {
37
36
  borderColor: {
38
- rest: token('color.border.neutral', DN80),
39
- hovered: token('color.border.neutral', DN200),
40
- disabled: token('color.background.disabled', DN10),
41
- checked: token('color.background.boldBrand.resting', B400),
42
- active: token('color.border.neutral', B200),
43
- invalid: token('color.iconBorder.danger', R300),
44
- invalidAndChecked: token('color.iconBorder.danger', R300),
45
- focused: token('color.border.focus', B75),
46
- hoveredAndChecked: token('color.background.boldBrand.hover', B75)
37
+ rest: "var(--ds-border, ".concat(DN80, ")"),
38
+ hovered: "var(--ds-border, ".concat(DN200, ")"),
39
+ disabled: "var(--ds-background-disabled, ".concat(DN10, ")"),
40
+ checked: "var(--ds-background-brand-bold, ".concat(B400, ")"),
41
+ active: "var(--ds-border, ".concat(B200, ")"),
42
+ invalid: "var(--ds-border-danger, ".concat(R300, ")"),
43
+ invalidAndChecked: "var(--ds-border-danger, ".concat(R300, ")"),
44
+ focused: "var(--ds-border-focused, ".concat(B75, ")"),
45
+ hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(B75, ")")
47
46
  },
48
47
  boxColor: {
49
- rest: token('color.background.subtleBorderedNeutral.resting', DN10),
50
- hovered: token('color.background.default', DN30),
51
- disabled: token('color.background.disabled', DN10),
52
- active: token('color.background.subtleBorderedNeutral.pressed', B200),
53
- hoveredAndChecked: token('color.background.boldBrand.hover', B75),
54
- checked: token('color.background.boldBrand.resting', B400)
48
+ rest: "var(--ds-background-input, ".concat(DN10, ")"),
49
+ hovered: "var(--ds-surface, ".concat(DN30, ")"),
50
+ disabled: "var(--ds-background-disabled, ".concat(DN10, ")"),
51
+ active: "var(--ds-background-input-pressed, ".concat(B200, ")"),
52
+ hoveredAndChecked: "var(--ds-background-brand-bold-hovered, ".concat(B75, ")"),
53
+ checked: "var(--ds-background-brand-bold, ".concat(B400, ")")
55
54
  },
56
55
  tickColor: {
57
- disabledAndChecked: token('color.text.disabled', DN90),
58
- activeAndChecked: token('color.text.onBold', DN10),
59
- checked: token('color.text.onBold', DN10)
56
+ disabledAndChecked: "var(--ds-text-disabled, ".concat(DN90, ")"),
57
+ activeAndChecked: "var(--ds-text-inverse, ".concat(DN10, ")"),
58
+ checked: "var(--ds-text-inverse, ".concat(DN10, ")")
60
59
  }
61
60
  }
62
61
  };
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "12.3.3",
3
+ "version": "12.3.7",
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.3",
3
+ "version": "12.3.7",
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.9.0",
32
- "@atlaskit/theme": "^12.0.0",
33
- "@atlaskit/tokens": "^0.2.0",
30
+ "@atlaskit/icon": "^21.10.0",
31
+ "@atlaskit/theme": "^12.1.0",
32
+ "@atlaskit/tokens": "^0.6.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
42
  "@atlaskit/form": "^8.4.0",
45
43
  "@atlaskit/section-message": "^6.1.0",
46
44
  "@atlaskit/ssr": "*",
47
- "@atlaskit/toggle": "^12.3.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/",