@atlaskit/checkbox 12.3.1 → 12.3.5

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 (17) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/cjs/checkbox.js +1 -1
  3. package/dist/cjs/internal/label.js +2 -4
  4. package/dist/cjs/internal/required-indicator.js +1 -3
  5. package/dist/cjs/internal/styles.js +36 -39
  6. package/dist/cjs/version.json +1 -1
  7. package/dist/es2019/checkbox.js +1 -1
  8. package/dist/es2019/internal/label.js +2 -3
  9. package/dist/es2019/internal/required-indicator.js +1 -2
  10. package/dist/es2019/internal/styles.js +36 -38
  11. package/dist/es2019/version.json +1 -1
  12. package/dist/esm/checkbox.js +1 -1
  13. package/dist/esm/internal/label.js +2 -3
  14. package/dist/esm/internal/required-indicator.js +1 -2
  15. package/dist/esm/internal/styles.js +36 -38
  16. package/dist/esm/version.json +1 -1
  17. package/package.json +11 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @atlaskit/checkbox
2
2
 
3
+ ## 12.3.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [`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.
8
+ - Updated dependencies
9
+
10
+ ## 12.3.4
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
16
+ ## 12.3.3
17
+
18
+ ### Patch Changes
19
+
20
+ - Updated dependencies
21
+
22
+ ## 12.3.2
23
+
24
+ ### Patch Changes
25
+
26
+ - Updated dependencies
27
+
3
28
  ## 12.3.1
4
29
 
5
30
  ### Patch Changes
package/dist/cjs/checkbox.js CHANGED
@@ -115,7 +115,7 @@ var CheckboxWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox(pro
115
115
  analyticsData: analyticsContext,
116
116
  componentName: 'checkbox',
117
117
  packageName: "@atlaskit/checkbox",
118
- packageVersion: "12.3.1"
118
+ packageVersion: "12.3.5"
119
119
  });
120
120
  var internalRef = (0, _react.useRef)(null);
121
121
  var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]); // firefox doesn't properly dispatch events from label to its child input elements
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.1",
3
+ "version": "12.3.5",
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.1"
89
+ packageVersion: "12.3.5"
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.1",
3
+ "version": "12.3.5",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/checkbox.js CHANGED
@@ -97,7 +97,7 @@ var CheckboxWithMode = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
97
97
  analyticsData: analyticsContext,
98
98
  componentName: 'checkbox',
99
99
  packageName: "@atlaskit/checkbox",
100
- packageVersion: "12.3.1"
100
+ packageVersion: "12.3.5"
101
101
  });
102
102
  var internalRef = useRef(null);
103
103
  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.1",
3
+ "version": "12.3.5",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "12.3.1",
3
+ "version": "12.3.5",
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/"
@@ -28,9 +28,9 @@
28
28
  "dependencies": {
29
29
  "@atlaskit/analytics-next": "^8.2.0",
30
30
  "@atlaskit/ds-lib": "^1.3.0",
31
- "@atlaskit/icon": "^21.8.0",
32
- "@atlaskit/theme": "^11.5.0",
33
- "@atlaskit/tokens": "^0.1.0",
31
+ "@atlaskit/icon": "^21.9.0",
32
+ "@atlaskit/theme": "^12.0.0",
33
+ "@atlaskit/tokens": "^0.4.0",
34
34
  "@babel/runtime": "^7.0.0",
35
35
  "@emotion/core": "^10.0.9"
36
36
  },
@@ -41,10 +41,10 @@
41
41
  "@atlaskit/build-utils": "*",
42
42
  "@atlaskit/button": "^16.1.0",
43
43
  "@atlaskit/docs": "*",
44
- "@atlaskit/form": "^8.3.0",
44
+ "@atlaskit/form": "^8.4.0",
45
45
  "@atlaskit/section-message": "^6.1.0",
46
46
  "@atlaskit/ssr": "*",
47
- "@atlaskit/toggle": "^12.2.0",
47
+ "@atlaskit/toggle": "^12.3.0",
48
48
  "@atlaskit/visual-regression": "*",
49
49
  "@atlaskit/webdriver-runner": "*",
50
50
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -68,9 +68,12 @@
68
68
  "ui-components": "lite-mode",
69
69
  "analytics": "analytics-next",
70
70
  "theming": "tokens",
71
- "deprecation": "no-deprecated-imports"
71
+ "deprecation": "no-deprecated-imports",
72
+ "styling": [
73
+ "emotion"
74
+ ]
72
75
  }
73
76
  },
74
77
  "homepage": "https://atlassian.design/components/checkbox/",
75
78
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
76
- }
79
+ }