@atlaskit/checkbox 12.3.6 → 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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
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
+
3
10
  ## 12.3.6
4
11
 
5
12
  ### Patch Changes
@@ -114,7 +114,7 @@ var CheckboxWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Checkbox(pro
114
114
  analyticsData: analyticsContext,
115
115
  componentName: 'checkbox',
116
116
  packageName: "@atlaskit/checkbox",
117
- packageVersion: "12.3.6"
117
+ packageVersion: "12.3.7"
118
118
  });
119
119
  var internalRef = (0, _react.useRef)(null);
120
120
  var mergedRefs = (0, _mergeRefs.default)([internalRef, ref]); // firefox doesn't properly dispatch events from label to its child input elements
@@ -22,7 +22,7 @@ var labelCSS = function labelCSS() {
22
22
  fontFamily: fontFamily,
23
23
  alignItems: 'center',
24
24
  display: 'flex',
25
- color: "var(--ds-text-highEmphasis, ".concat(_colors.N900, ")"),
25
+ color: "var(--ds-text, ".concat(_colors.N900, ")"),
26
26
  cursor: 'default',
27
27
  '&[data-disabled]': {
28
28
  color: "var(--ds-text-disabled, ".concat(_colors.N80, ")"),
@@ -19,54 +19,54 @@ var checkboxStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _t
19
19
  var checkboxThemeColors = {
20
20
  light: {
21
21
  borderColor: {
22
- rest: "var(--ds-border-neutral, ".concat(_colors.N40, ")"),
23
- hovered: "var(--ds-border-neutral, ".concat(_colors.N40, ")"),
22
+ rest: "var(--ds-border, ".concat(_colors.N40, ")"),
23
+ hovered: "var(--ds-border, ".concat(_colors.N40, ")"),
24
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, ")")
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, ")")
31
31
  },
32
32
  boxColor: {
33
- rest: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(_colors.N10, ")"),
34
- hovered: "var(--ds-background-default, ".concat(_colors.N30, ")"),
33
+ rest: "var(--ds-background-input, ".concat(_colors.N10, ")"),
34
+ hovered: "var(--ds-surface, ".concat(_colors.N30, ")"),
35
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, ")")
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, ")")
39
39
  },
40
40
  tickColor: {
41
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, ")")
42
+ activeAndChecked: "var(--ds-text-inverse, ".concat(_colors.B400, ")"),
43
+ checked: "var(--ds-text-inverse, ".concat(_colors.N10, ")")
44
44
  }
45
45
  },
46
46
  dark: {
47
47
  borderColor: {
48
- rest: "var(--ds-border-neutral, ".concat(_colors.DN80, ")"),
49
- hovered: "var(--ds-border-neutral, ".concat(_colors.DN200, ")"),
48
+ rest: "var(--ds-border, ".concat(_colors.DN80, ")"),
49
+ hovered: "var(--ds-border, ".concat(_colors.DN200, ")"),
50
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, ")")
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, ")")
57
57
  },
58
58
  boxColor: {
59
- rest: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(_colors.DN10, ")"),
60
- hovered: "var(--ds-background-default, ".concat(_colors.DN30, ")"),
59
+ rest: "var(--ds-background-input, ".concat(_colors.DN10, ")"),
60
+ hovered: "var(--ds-surface, ".concat(_colors.DN30, ")"),
61
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, ")")
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, ")")
65
65
  },
66
66
  tickColor: {
67
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, ")")
68
+ activeAndChecked: "var(--ds-text-inverse, ".concat(_colors.DN10, ")"),
69
+ checked: "var(--ds-text-inverse, ".concat(_colors.DN10, ")")
70
70
  }
71
71
  }
72
72
  };
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "12.3.6",
3
+ "version": "12.3.7",
4
4
  "sideEffects": false
5
5
  }
@@ -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.6"
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
@@ -8,7 +8,7 @@ export const labelCSS = () => ({
8
8
  fontFamily: fontFamily,
9
9
  alignItems: 'center',
10
10
  display: 'flex',
11
- color: `var(--ds-text-highEmphasis, ${N900})`,
11
+ color: `var(--ds-text, ${N900})`,
12
12
  cursor: 'default',
13
13
  '&[data-disabled]': {
14
14
  color: `var(--ds-text-disabled, ${N80})`,
@@ -138,54 +138,54 @@ const checkboxStyles = css`
138
138
  const checkboxThemeColors = {
139
139
  light: {
140
140
  borderColor: {
141
- rest: `var(--ds-border-neutral, ${N40})`,
142
- hovered: `var(--ds-border-neutral, ${N40})`,
141
+ rest: `var(--ds-border, ${N40})`,
142
+ hovered: `var(--ds-border, ${N40})`,
143
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})`
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})`
150
150
  },
151
151
  boxColor: {
152
- rest: `var(--ds-background-subtleBorderedNeutral-resting, ${N10})`,
153
- hovered: `var(--ds-background-default, ${N30})`,
152
+ rest: `var(--ds-background-input, ${N10})`,
153
+ hovered: `var(--ds-surface, ${N30})`,
154
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})`
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})`
158
158
  },
159
159
  tickColor: {
160
160
  disabledAndChecked: `var(--ds-text-disabled, ${N70})`,
161
- activeAndChecked: `var(--ds-text-onBold, ${B400})`,
162
- checked: `var(--ds-text-onBold, ${N10})`
161
+ activeAndChecked: `var(--ds-text-inverse, ${B400})`,
162
+ checked: `var(--ds-text-inverse, ${N10})`
163
163
  }
164
164
  },
165
165
  dark: {
166
166
  borderColor: {
167
- rest: `var(--ds-border-neutral, ${DN80})`,
168
- hovered: `var(--ds-border-neutral, ${DN200})`,
167
+ rest: `var(--ds-border, ${DN80})`,
168
+ hovered: `var(--ds-border, ${DN200})`,
169
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})`
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})`
176
176
  },
177
177
  boxColor: {
178
- rest: `var(--ds-background-subtleBorderedNeutral-resting, ${DN10})`,
179
- hovered: `var(--ds-background-default, ${DN30})`,
178
+ rest: `var(--ds-background-input, ${DN10})`,
179
+ hovered: `var(--ds-surface, ${DN30})`,
180
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})`
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})`
184
184
  },
185
185
  tickColor: {
186
186
  disabledAndChecked: `var(--ds-text-disabled, ${DN90})`,
187
- activeAndChecked: `var(--ds-text-onBold, ${DN10})`,
188
- checked: `var(--ds-text-onBold, ${DN10})`
187
+ activeAndChecked: `var(--ds-text-inverse, ${DN10})`,
188
+ checked: `var(--ds-text-inverse, ${DN10})`
189
189
  }
190
190
  }
191
191
  };
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "12.3.6",
3
+ "version": "12.3.7",
4
4
  "sideEffects": false
5
5
  }
@@ -98,7 +98,7 @@ var CheckboxWithMode = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
98
98
  analyticsData: analyticsContext,
99
99
  componentName: 'checkbox',
100
100
  packageName: "@atlaskit/checkbox",
101
- packageVersion: "12.3.6"
101
+ packageVersion: "12.3.7"
102
102
  });
103
103
  var internalRef = useRef(null);
104
104
  var mergedRefs = mergeRefs([internalRef, ref]); // firefox doesn't properly dispatch events from label to its child input elements
@@ -9,7 +9,7 @@ export var labelCSS = function labelCSS() {
9
9
  fontFamily: fontFamily,
10
10
  alignItems: 'center',
11
11
  display: 'flex',
12
- color: "var(--ds-text-highEmphasis, ".concat(N900, ")"),
12
+ color: "var(--ds-text, ".concat(N900, ")"),
13
13
  cursor: 'default',
14
14
  '&[data-disabled]': {
15
15
  color: "var(--ds-text-disabled, ".concat(N80, ")"),
@@ -8,54 +8,54 @@ var checkboxStyles = css(_templateObject || (_templateObject = _taggedTemplateLi
8
8
  var checkboxThemeColors = {
9
9
  light: {
10
10
  borderColor: {
11
- rest: "var(--ds-border-neutral, ".concat(N40, ")"),
12
- hovered: "var(--ds-border-neutral, ".concat(N40, ")"),
11
+ rest: "var(--ds-border, ".concat(N40, ")"),
12
+ hovered: "var(--ds-border, ".concat(N40, ")"),
13
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, ")")
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, ")")
20
20
  },
21
21
  boxColor: {
22
- rest: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(N10, ")"),
23
- hovered: "var(--ds-background-default, ".concat(N30, ")"),
22
+ rest: "var(--ds-background-input, ".concat(N10, ")"),
23
+ hovered: "var(--ds-surface, ".concat(N30, ")"),
24
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, ")")
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, ")")
28
28
  },
29
29
  tickColor: {
30
30
  disabledAndChecked: "var(--ds-text-disabled, ".concat(N70, ")"),
31
- activeAndChecked: "var(--ds-text-onBold, ".concat(B400, ")"),
32
- checked: "var(--ds-text-onBold, ".concat(N10, ")")
31
+ activeAndChecked: "var(--ds-text-inverse, ".concat(B400, ")"),
32
+ checked: "var(--ds-text-inverse, ".concat(N10, ")")
33
33
  }
34
34
  },
35
35
  dark: {
36
36
  borderColor: {
37
- rest: "var(--ds-border-neutral, ".concat(DN80, ")"),
38
- hovered: "var(--ds-border-neutral, ".concat(DN200, ")"),
37
+ rest: "var(--ds-border, ".concat(DN80, ")"),
38
+ hovered: "var(--ds-border, ".concat(DN200, ")"),
39
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, ")")
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, ")")
46
46
  },
47
47
  boxColor: {
48
- rest: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(DN10, ")"),
49
- hovered: "var(--ds-background-default, ".concat(DN30, ")"),
48
+ rest: "var(--ds-background-input, ".concat(DN10, ")"),
49
+ hovered: "var(--ds-surface, ".concat(DN30, ")"),
50
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, ")")
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, ")")
54
54
  },
55
55
  tickColor: {
56
56
  disabledAndChecked: "var(--ds-text-disabled, ".concat(DN90, ")"),
57
- activeAndChecked: "var(--ds-text-onBold, ".concat(DN10, ")"),
58
- checked: "var(--ds-text-onBold, ".concat(DN10, ")")
57
+ activeAndChecked: "var(--ds-text-inverse, ".concat(DN10, ")"),
58
+ checked: "var(--ds-text-inverse, ".concat(DN10, ")")
59
59
  }
60
60
  }
61
61
  };
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/checkbox",
3
- "version": "12.3.6",
3
+ "version": "12.3.7",
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.6",
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/"
@@ -29,7 +29,7 @@
29
29
  "@atlaskit/ds-lib": "^1.3.0",
30
30
  "@atlaskit/icon": "^21.10.0",
31
31
  "@atlaskit/theme": "^12.1.0",
32
- "@atlaskit/tokens": "^0.5.0",
32
+ "@atlaskit/tokens": "^0.6.0",
33
33
  "@babel/runtime": "^7.0.0",
34
34
  "@emotion/core": "^10.0.9"
35
35
  },