@atlaskit/radio 5.3.1 → 5.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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @atlaskit/radio
2
2
 
3
+ ## 5.3.5
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 5.3.4
10
+
11
+ ### Patch Changes
12
+
13
+ - [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
14
+ - Updated dependencies
15
+
16
+ ## 5.3.3
17
+
18
+ ### Patch Changes
19
+
20
+ - Updated dependencies
21
+
22
+ ## 5.3.2
23
+
24
+ ### Patch Changes
25
+
26
+ - Updated dependencies
27
+
3
28
  ## 5.3.1
4
29
 
5
30
  ### Patch Changes
package/dist/cjs/Radio.js CHANGED
@@ -23,13 +23,11 @@ var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
23
23
 
24
24
  var _constants = require("@atlaskit/theme/constants");
25
25
 
26
- var _tokens = require("@atlaskit/tokens");
27
-
28
26
  var _styles = _interopRequireDefault(require("./styles"));
29
27
 
30
- /** @jsx jsx */
28
+ var _excluded = ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "mode", "name", "onChange", "value", "testId", "analyticsContext"];
31
29
  var packageName = "@atlaskit/radio";
32
- var packageVersion = "5.3.1";
30
+ var packageVersion = "5.3.5";
33
31
  var fontFamily = (0, _constants.fontFamily)();
34
32
 
35
33
  var noop = function noop() {};
@@ -45,15 +43,15 @@ var labelStyles = (0, _core.css)({
45
43
  fontFamily: fontFamily,
46
44
  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
47
45
  '&[data-disabled]': {
48
- color: (0, _tokens.token)('color.text.disabled', _colors.N80),
46
+ color: "var(--ds-text-disabled, ".concat(_colors.N80, ")"),
49
47
  cursor: 'not-allowed'
50
48
  }
51
49
  });
52
50
  var lightLabelStyles = (0, _core.css)({
53
- color: (0, _tokens.token)('color.text.highEmphasis', _colors.N900)
51
+ color: "var(--ds-text-highEmphasis, ".concat(_colors.N900, ")")
54
52
  });
55
53
  var darkLabelStyles = (0, _core.css)({
56
- color: (0, _tokens.token)('color.text.highEmphasis', _colors.DN600)
54
+ color: "var(--ds-text-highEmphasis, ".concat(_colors.DN600, ")")
57
55
  });
58
56
  var radioStyles = (0, _core.css)({
59
57
  display: 'flex',
@@ -165,7 +163,7 @@ var RadioWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, re
165
163
  value = props.value,
166
164
  testId = props.testId,
167
165
  analyticsContext = props.analyticsContext,
168
- rest = (0, _objectWithoutProperties2.default)(props, ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "mode", "name", "onChange", "value", "testId", "analyticsContext"]);
166
+ rest = (0, _objectWithoutProperties2.default)(props, _excluded);
169
167
  var onChangeAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)({
170
168
  fn: onChange,
171
169
  action: 'changed',
package/dist/cjs/index.js CHANGED
@@ -5,16 +5,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- Object.defineProperty(exports, "RadioGroup", {
8
+ Object.defineProperty(exports, "Radio", {
9
9
  enumerable: true,
10
10
  get: function get() {
11
- return _RadioGroup.default;
11
+ return _Radio.default;
12
12
  }
13
13
  });
14
- Object.defineProperty(exports, "Radio", {
14
+ Object.defineProperty(exports, "RadioGroup", {
15
15
  enumerable: true,
16
16
  get: function get() {
17
- return _Radio.default;
17
+ return _RadioGroup.default;
18
18
  }
19
19
  });
20
20
 
@@ -7,40 +7,38 @@ exports.default = getRadioCustomProperties;
7
7
 
8
8
  var _colors = require("@atlaskit/theme/colors");
9
9
 
10
- var _tokens = require("@atlaskit/tokens");
11
-
12
10
  var radioThemeColors = {
13
11
  light: {
14
- background: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', _colors.N10),
15
- backgroundHover: (0, _tokens.token)('color.background.default', _colors.N30),
16
- backgroundActive: (0, _tokens.token)('color.background.subtleBorderedNeutral.pressed', _colors.N30),
17
- backgroundChecked: (0, _tokens.token)('color.background.boldBrand.resting', _colors.B400),
18
- backgroundCheckedHover: (0, _tokens.token)('color.background.boldBrand.hover', _colors.B300),
19
- backgroundCheckedActive: (0, _tokens.token)('color.background.boldBrand.pressed', _colors.B50),
20
- backgroundDisabled: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', _colors.N20),
21
- dotChecked: (0, _tokens.token)('color.text.onBold', _colors.N10),
22
- dotDisabled: (0, _tokens.token)('color.text.disabled', _colors.N70),
23
- dotActive: (0, _tokens.token)('color.text.onBold', _colors.B400),
24
- border: (0, _tokens.token)('color.border.neutral', _colors.N40),
25
- borderHover: (0, _tokens.token)('color.border.neutral', _colors.N40),
26
- borderDisabled: (0, _tokens.token)('color.background.disabled', _colors.N20),
27
- borderFocus: (0, _tokens.token)('color.border.focus', _colors.B100)
12
+ background: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(_colors.N10, ")"),
13
+ backgroundHover: "var(--ds-background-default, ".concat(_colors.N30, ")"),
14
+ backgroundActive: "var(--ds-background-subtleBorderedNeutral-pressed, ".concat(_colors.N30, ")"),
15
+ backgroundChecked: "var(--ds-background-boldBrand-resting, ".concat(_colors.B400, ")"),
16
+ backgroundCheckedHover: "var(--ds-background-boldBrand-hover, ".concat(_colors.B300, ")"),
17
+ backgroundCheckedActive: "var(--ds-background-boldBrand-pressed, ".concat(_colors.B50, ")"),
18
+ backgroundDisabled: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(_colors.N20, ")"),
19
+ dotChecked: "var(--ds-text-onBold, ".concat(_colors.N10, ")"),
20
+ dotDisabled: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
21
+ dotActive: "var(--ds-text-onBold, ".concat(_colors.B400, ")"),
22
+ border: "var(--ds-border-neutral, ".concat(_colors.N40, ")"),
23
+ borderHover: "var(--ds-border-neutral, ".concat(_colors.N40, ")"),
24
+ borderDisabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
25
+ borderFocus: "var(--ds-border-focus, ".concat(_colors.B100, ")")
28
26
  },
29
27
  dark: {
30
- background: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', _colors.DN10),
31
- backgroundHover: (0, _tokens.token)('color.background.default', _colors.DN30),
32
- backgroundActive: (0, _tokens.token)('color.background.subtleBorderedNeutral.pressed', _colors.B200),
33
- backgroundChecked: (0, _tokens.token)('color.background.boldBrand.resting', _colors.B400),
34
- backgroundCheckedHover: (0, _tokens.token)('color.background.boldBrand.hover', _colors.B75),
35
- backgroundCheckedActive: (0, _tokens.token)('color.background.boldBrand.pressed', _colors.B200),
36
- backgroundDisabled: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', _colors.DN10),
37
- dotChecked: (0, _tokens.token)('color.text.onBold', _colors.DN10),
38
- dotDisabled: (0, _tokens.token)('color.text.disabled', _colors.DN90),
39
- dotActive: (0, _tokens.token)('color.text.onBold', _colors.DN10),
40
- border: (0, _tokens.token)('color.border.neutral', _colors.DN80),
41
- borderHover: (0, _tokens.token)('color.border.neutral', _colors.DN200),
42
- borderDisabled: (0, _tokens.token)('color.background.disabled', _colors.DN10),
43
- borderFocus: (0, _tokens.token)('color.border.focus', _colors.B75)
28
+ background: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(_colors.DN10, ")"),
29
+ backgroundHover: "var(--ds-background-default, ".concat(_colors.DN30, ")"),
30
+ backgroundActive: "var(--ds-background-subtleBorderedNeutral-pressed, ".concat(_colors.B200, ")"),
31
+ backgroundChecked: "var(--ds-background-boldBrand-resting, ".concat(_colors.B400, ")"),
32
+ backgroundCheckedHover: "var(--ds-background-boldBrand-hover, ".concat(_colors.B75, ")"),
33
+ backgroundCheckedActive: "var(--ds-background-boldBrand-pressed, ".concat(_colors.B200, ")"),
34
+ backgroundDisabled: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(_colors.DN10, ")"),
35
+ dotChecked: "var(--ds-text-onBold, ".concat(_colors.DN10, ")"),
36
+ dotDisabled: "var(--ds-text-disabled, ".concat(_colors.DN90, ")"),
37
+ dotActive: "var(--ds-text-onBold, ".concat(_colors.DN10, ")"),
38
+ border: "var(--ds-border-neutral, ".concat(_colors.DN80, ")"),
39
+ borderHover: "var(--ds-border-neutral, ".concat(_colors.DN200, ")"),
40
+ borderDisabled: "var(--ds-background-disabled, ".concat(_colors.DN10, ")"),
41
+ borderFocus: "var(--ds-border-focus, ".concat(_colors.B75, ")")
44
42
  }
45
43
  };
46
44
 
@@ -61,6 +59,6 @@ function getRadioCustomProperties(mode) {
61
59
  '--local-dot-active': radioColors.dotActive,
62
60
  '--local-dot-checked': radioColors.dotChecked,
63
61
  '--local-dot-disabled': radioColors.dotDisabled,
64
- '--local-invalid': (0, _tokens.token)('color.iconBorder.danger', _colors.R300)
62
+ '--local-invalid': "var(--ds-iconBorder-danger, ".concat(_colors.R300, ")")
65
63
  };
66
64
  }
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/radio",
3
- "version": "5.3.1",
3
+ "version": "5.3.5",
4
4
  "sideEffects": false
5
5
  }
@@ -7,10 +7,9 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatfor
7
7
  import { DN600, N80, N900 } from '@atlaskit/theme/colors';
8
8
  import GlobalTheme from '@atlaskit/theme/components';
9
9
  import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
10
- import { token } from '@atlaskit/tokens';
11
10
  import getRadioCustomProperties from './styles';
12
11
  const packageName = "@atlaskit/radio";
13
- const packageVersion = "5.3.1";
12
+ const packageVersion = "5.3.5";
14
13
  const fontFamily = getFontFamily();
15
14
 
16
15
  const noop = () => {};
@@ -26,15 +25,15 @@ const labelStyles = css({
26
25
  fontFamily: fontFamily,
27
26
  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
28
27
  '&[data-disabled]': {
29
- color: token('color.text.disabled', N80),
28
+ color: `var(--ds-text-disabled, ${N80})`,
30
29
  cursor: 'not-allowed'
31
30
  }
32
31
  });
33
32
  const lightLabelStyles = css({
34
- color: token('color.text.highEmphasis', N900)
33
+ color: `var(--ds-text-highEmphasis, ${N900})`
35
34
  });
36
35
  const darkLabelStyles = css({
37
- color: token('color.text.highEmphasis', DN600)
36
+ color: `var(--ds-text-highEmphasis, ${DN600})`
38
37
  });
39
38
  const radioStyles = css({
40
39
  display: 'flex',
@@ -1,37 +1,36 @@
1
1
  import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
2
- import { token } from '@atlaskit/tokens';
3
2
  const radioThemeColors = {
4
3
  light: {
5
- background: token('color.background.subtleBorderedNeutral.resting', N10),
6
- backgroundHover: token('color.background.default', N30),
7
- backgroundActive: token('color.background.subtleBorderedNeutral.pressed', N30),
8
- backgroundChecked: token('color.background.boldBrand.resting', B400),
9
- backgroundCheckedHover: token('color.background.boldBrand.hover', B300),
10
- backgroundCheckedActive: token('color.background.boldBrand.pressed', B50),
11
- backgroundDisabled: token('color.background.subtleBorderedNeutral.resting', N20),
12
- dotChecked: token('color.text.onBold', N10),
13
- dotDisabled: token('color.text.disabled', N70),
14
- dotActive: token('color.text.onBold', B400),
15
- border: token('color.border.neutral', N40),
16
- borderHover: token('color.border.neutral', N40),
17
- borderDisabled: token('color.background.disabled', N20),
18
- borderFocus: token('color.border.focus', B100)
4
+ background: `var(--ds-background-subtleBorderedNeutral-resting, ${N10})`,
5
+ backgroundHover: `var(--ds-background-default, ${N30})`,
6
+ backgroundActive: `var(--ds-background-subtleBorderedNeutral-pressed, ${N30})`,
7
+ backgroundChecked: `var(--ds-background-boldBrand-resting, ${B400})`,
8
+ backgroundCheckedHover: `var(--ds-background-boldBrand-hover, ${B300})`,
9
+ backgroundCheckedActive: `var(--ds-background-boldBrand-pressed, ${B50})`,
10
+ backgroundDisabled: `var(--ds-background-subtleBorderedNeutral-resting, ${N20})`,
11
+ dotChecked: `var(--ds-text-onBold, ${N10})`,
12
+ dotDisabled: `var(--ds-text-disabled, ${N70})`,
13
+ dotActive: `var(--ds-text-onBold, ${B400})`,
14
+ border: `var(--ds-border-neutral, ${N40})`,
15
+ borderHover: `var(--ds-border-neutral, ${N40})`,
16
+ borderDisabled: `var(--ds-background-disabled, ${N20})`,
17
+ borderFocus: `var(--ds-border-focus, ${B100})`
19
18
  },
20
19
  dark: {
21
- background: token('color.background.subtleBorderedNeutral.resting', DN10),
22
- backgroundHover: token('color.background.default', DN30),
23
- backgroundActive: token('color.background.subtleBorderedNeutral.pressed', B200),
24
- backgroundChecked: token('color.background.boldBrand.resting', B400),
25
- backgroundCheckedHover: token('color.background.boldBrand.hover', B75),
26
- backgroundCheckedActive: token('color.background.boldBrand.pressed', B200),
27
- backgroundDisabled: token('color.background.subtleBorderedNeutral.resting', DN10),
28
- dotChecked: token('color.text.onBold', DN10),
29
- dotDisabled: token('color.text.disabled', DN90),
30
- dotActive: token('color.text.onBold', DN10),
31
- border: token('color.border.neutral', DN80),
32
- borderHover: token('color.border.neutral', DN200),
33
- borderDisabled: token('color.background.disabled', DN10),
34
- borderFocus: token('color.border.focus', B75)
20
+ background: `var(--ds-background-subtleBorderedNeutral-resting, ${DN10})`,
21
+ backgroundHover: `var(--ds-background-default, ${DN30})`,
22
+ backgroundActive: `var(--ds-background-subtleBorderedNeutral-pressed, ${B200})`,
23
+ backgroundChecked: `var(--ds-background-boldBrand-resting, ${B400})`,
24
+ backgroundCheckedHover: `var(--ds-background-boldBrand-hover, ${B75})`,
25
+ backgroundCheckedActive: `var(--ds-background-boldBrand-pressed, ${B200})`,
26
+ backgroundDisabled: `var(--ds-background-subtleBorderedNeutral-resting, ${DN10})`,
27
+ dotChecked: `var(--ds-text-onBold, ${DN10})`,
28
+ dotDisabled: `var(--ds-text-disabled, ${DN90})`,
29
+ dotActive: `var(--ds-text-onBold, ${DN10})`,
30
+ border: `var(--ds-border-neutral, ${DN80})`,
31
+ borderHover: `var(--ds-border-neutral, ${DN200})`,
32
+ borderDisabled: `var(--ds-background-disabled, ${DN10})`,
33
+ borderFocus: `var(--ds-border-focus, ${B75})`
35
34
  }
36
35
  };
37
36
  export default function getRadioCustomProperties(mode) {
@@ -51,6 +50,6 @@ export default function getRadioCustomProperties(mode) {
51
50
  '--local-dot-active': radioColors.dotActive,
52
51
  '--local-dot-checked': radioColors.dotChecked,
53
52
  '--local-dot-disabled': radioColors.dotDisabled,
54
- '--local-invalid': token('color.iconBorder.danger', R300)
53
+ '--local-invalid': `var(--ds-iconBorder-danger, ${R300})`
55
54
  };
56
55
  }
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/radio",
3
- "version": "5.3.1",
3
+ "version": "5.3.5",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/Radio.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
+ var _excluded = ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "mode", "name", "onChange", "value", "testId", "analyticsContext"];
3
4
 
4
5
  /** @jsx jsx */
5
6
  import { forwardRef, memo, useMemo } from 'react';
@@ -8,10 +9,9 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatfor
8
9
  import { DN600, N80, N900 } from '@atlaskit/theme/colors';
9
10
  import GlobalTheme from '@atlaskit/theme/components';
10
11
  import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
11
- import { token } from '@atlaskit/tokens';
12
12
  import getRadioCustomProperties from './styles';
13
13
  var packageName = "@atlaskit/radio";
14
- var packageVersion = "5.3.1";
14
+ var packageVersion = "5.3.5";
15
15
  var fontFamily = getFontFamily();
16
16
 
17
17
  var noop = function noop() {};
@@ -27,15 +27,15 @@ var labelStyles = css({
27
27
  fontFamily: fontFamily,
28
28
  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
29
29
  '&[data-disabled]': {
30
- color: token('color.text.disabled', N80),
30
+ color: "var(--ds-text-disabled, ".concat(N80, ")"),
31
31
  cursor: 'not-allowed'
32
32
  }
33
33
  });
34
34
  var lightLabelStyles = css({
35
- color: token('color.text.highEmphasis', N900)
35
+ color: "var(--ds-text-highEmphasis, ".concat(N900, ")")
36
36
  });
37
37
  var darkLabelStyles = css({
38
- color: token('color.text.highEmphasis', DN600)
38
+ color: "var(--ds-text-highEmphasis, ".concat(DN600, ")")
39
39
  });
40
40
  var radioStyles = css({
41
41
  display: 'flex',
@@ -147,7 +147,7 @@ var RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
147
147
  value = props.value,
148
148
  testId = props.testId,
149
149
  analyticsContext = props.analyticsContext,
150
- rest = _objectWithoutProperties(props, ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "mode", "name", "onChange", "value", "testId", "analyticsContext"]);
150
+ rest = _objectWithoutProperties(props, _excluded);
151
151
 
152
152
  var onChangeAnalytics = usePlatformLeafEventHandler({
153
153
  fn: onChange,
@@ -1,37 +1,36 @@
1
1
  import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
2
- import { token } from '@atlaskit/tokens';
3
2
  var radioThemeColors = {
4
3
  light: {
5
- background: token('color.background.subtleBorderedNeutral.resting', N10),
6
- backgroundHover: token('color.background.default', N30),
7
- backgroundActive: token('color.background.subtleBorderedNeutral.pressed', N30),
8
- backgroundChecked: token('color.background.boldBrand.resting', B400),
9
- backgroundCheckedHover: token('color.background.boldBrand.hover', B300),
10
- backgroundCheckedActive: token('color.background.boldBrand.pressed', B50),
11
- backgroundDisabled: token('color.background.subtleBorderedNeutral.resting', N20),
12
- dotChecked: token('color.text.onBold', N10),
13
- dotDisabled: token('color.text.disabled', N70),
14
- dotActive: token('color.text.onBold', B400),
15
- border: token('color.border.neutral', N40),
16
- borderHover: token('color.border.neutral', N40),
17
- borderDisabled: token('color.background.disabled', N20),
18
- borderFocus: token('color.border.focus', B100)
4
+ background: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(N10, ")"),
5
+ backgroundHover: "var(--ds-background-default, ".concat(N30, ")"),
6
+ backgroundActive: "var(--ds-background-subtleBorderedNeutral-pressed, ".concat(N30, ")"),
7
+ backgroundChecked: "var(--ds-background-boldBrand-resting, ".concat(B400, ")"),
8
+ backgroundCheckedHover: "var(--ds-background-boldBrand-hover, ".concat(B300, ")"),
9
+ backgroundCheckedActive: "var(--ds-background-boldBrand-pressed, ".concat(B50, ")"),
10
+ backgroundDisabled: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(N20, ")"),
11
+ dotChecked: "var(--ds-text-onBold, ".concat(N10, ")"),
12
+ dotDisabled: "var(--ds-text-disabled, ".concat(N70, ")"),
13
+ dotActive: "var(--ds-text-onBold, ".concat(B400, ")"),
14
+ border: "var(--ds-border-neutral, ".concat(N40, ")"),
15
+ borderHover: "var(--ds-border-neutral, ".concat(N40, ")"),
16
+ borderDisabled: "var(--ds-background-disabled, ".concat(N20, ")"),
17
+ borderFocus: "var(--ds-border-focus, ".concat(B100, ")")
19
18
  },
20
19
  dark: {
21
- background: token('color.background.subtleBorderedNeutral.resting', DN10),
22
- backgroundHover: token('color.background.default', DN30),
23
- backgroundActive: token('color.background.subtleBorderedNeutral.pressed', B200),
24
- backgroundChecked: token('color.background.boldBrand.resting', B400),
25
- backgroundCheckedHover: token('color.background.boldBrand.hover', B75),
26
- backgroundCheckedActive: token('color.background.boldBrand.pressed', B200),
27
- backgroundDisabled: token('color.background.subtleBorderedNeutral.resting', DN10),
28
- dotChecked: token('color.text.onBold', DN10),
29
- dotDisabled: token('color.text.disabled', DN90),
30
- dotActive: token('color.text.onBold', DN10),
31
- border: token('color.border.neutral', DN80),
32
- borderHover: token('color.border.neutral', DN200),
33
- borderDisabled: token('color.background.disabled', DN10),
34
- borderFocus: token('color.border.focus', B75)
20
+ background: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(DN10, ")"),
21
+ backgroundHover: "var(--ds-background-default, ".concat(DN30, ")"),
22
+ backgroundActive: "var(--ds-background-subtleBorderedNeutral-pressed, ".concat(B200, ")"),
23
+ backgroundChecked: "var(--ds-background-boldBrand-resting, ".concat(B400, ")"),
24
+ backgroundCheckedHover: "var(--ds-background-boldBrand-hover, ".concat(B75, ")"),
25
+ backgroundCheckedActive: "var(--ds-background-boldBrand-pressed, ".concat(B200, ")"),
26
+ backgroundDisabled: "var(--ds-background-subtleBorderedNeutral-resting, ".concat(DN10, ")"),
27
+ dotChecked: "var(--ds-text-onBold, ".concat(DN10, ")"),
28
+ dotDisabled: "var(--ds-text-disabled, ".concat(DN90, ")"),
29
+ dotActive: "var(--ds-text-onBold, ".concat(DN10, ")"),
30
+ border: "var(--ds-border-neutral, ".concat(DN80, ")"),
31
+ borderHover: "var(--ds-border-neutral, ".concat(DN200, ")"),
32
+ borderDisabled: "var(--ds-background-disabled, ".concat(DN10, ")"),
33
+ borderFocus: "var(--ds-border-focus, ".concat(B75, ")")
35
34
  }
36
35
  };
37
36
  export default function getRadioCustomProperties(mode) {
@@ -51,6 +50,6 @@ export default function getRadioCustomProperties(mode) {
51
50
  '--local-dot-active': radioColors.dotActive,
52
51
  '--local-dot-checked': radioColors.dotChecked,
53
52
  '--local-dot-disabled': radioColors.dotDisabled,
54
- '--local-invalid': token('color.iconBorder.danger', R300)
53
+ '--local-invalid': "var(--ds-iconBorder-danger, ".concat(R300, ")")
55
54
  };
56
55
  }
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/radio",
3
- "version": "5.3.1",
3
+ "version": "5.3.5",
4
4
  "sideEffects": false
5
5
  }
@@ -1,18 +1,18 @@
1
1
  import { ThemeModes } from '@atlaskit/theme/types';
2
2
  export default function getRadioCustomProperties(mode: ThemeModes): {
3
- '--local-background': "var(--background-subtleBorderedNeutral-resting)";
4
- '--local-background-active': "var(--background-subtleBorderedNeutral-pressed)";
5
- '--local-background-checked': "var(--background-boldBrand-resting)";
6
- '--local-background-checked-active': "var(--background-boldBrand-pressed)";
7
- '--local-background-checked-hover': "var(--background-boldBrand-hover)";
8
- '--local-background-disabled': "var(--background-subtleBorderedNeutral-resting)";
9
- '--local-background-hover': "var(--background-default)";
10
- '--local-border': "var(--border-neutral)";
11
- '--local-border-disabled': "var(--background-disabled)";
12
- '--local-border-hover': "var(--border-neutral)";
13
- '--local-border-focus': "var(--border-focus)";
14
- '--local-dot-active': "var(--text-onBold)";
15
- '--local-dot-checked': "var(--text-onBold)";
16
- '--local-dot-disabled': "var(--text-disabled)";
17
- '--local-invalid': "var(--iconBorder-danger)";
3
+ '--local-background': "var(--ds-background-subtleBorderedNeutral-resting)";
4
+ '--local-background-active': "var(--ds-background-subtleBorderedNeutral-pressed)";
5
+ '--local-background-checked': "var(--ds-background-boldBrand-resting)";
6
+ '--local-background-checked-active': "var(--ds-background-boldBrand-pressed)";
7
+ '--local-background-checked-hover': "var(--ds-background-boldBrand-hover)";
8
+ '--local-background-disabled': "var(--ds-background-subtleBorderedNeutral-resting)";
9
+ '--local-background-hover': "var(--ds-background-default)";
10
+ '--local-border': "var(--ds-border-neutral)";
11
+ '--local-border-disabled': "var(--ds-background-disabled)";
12
+ '--local-border-hover': "var(--ds-border-neutral)";
13
+ '--local-border-focus': "var(--ds-border-focus)";
14
+ '--local-dot-active': "var(--ds-text-onBold)";
15
+ '--local-dot-checked': "var(--ds-text-onBold)";
16
+ '--local-dot-disabled': "var(--ds-text-disabled)";
17
+ '--local-invalid': "var(--ds-iconBorder-danger)";
18
18
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/radio",
3
- "version": "5.3.1",
3
+ "version": "5.3.5",
4
4
  "description": "A radio input allows people to select only one option from a number of choices. Radio is generally displayed in a radio group.",
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": "Radio"
@@ -30,8 +29,8 @@
30
29
  },
31
30
  "dependencies": {
32
31
  "@atlaskit/analytics-next": "^8.0.0",
33
- "@atlaskit/theme": "^11.4.0",
34
- "@atlaskit/tokens": "^0.2.0",
32
+ "@atlaskit/theme": "^12.1.0",
33
+ "@atlaskit/tokens": "^0.5.0",
35
34
  "@babel/runtime": "^7.0.0",
36
35
  "@emotion/core": "^10.0.9"
37
36
  },
@@ -39,11 +38,10 @@
39
38
  "react": "^16.8.0"
40
39
  },
41
40
  "devDependencies": {
42
- "@atlaskit/build-utils": "*",
43
41
  "@atlaskit/button": "^16.1.0",
44
42
  "@atlaskit/checkbox": "^12.3.0",
45
43
  "@atlaskit/docs": "^9.0.0",
46
- "@atlaskit/form": "^8.3.0",
44
+ "@atlaskit/form": "^8.4.0",
47
45
  "@atlaskit/section-message": "^6.1.0",
48
46
  "@atlaskit/ssr": "*",
49
47
  "@atlaskit/visual-regression": "*",
@@ -66,7 +64,10 @@
66
64
  "@repo/internal": {
67
65
  "ui-components": "lite-mode",
68
66
  "analytics": "analytics-next",
69
- "styling": "emotion",
67
+ "styling": [
68
+ "static",
69
+ "emotion"
70
+ ],
70
71
  "theming": "tokens",
71
72
  "deprecation": "no-deprecated-imports"
72
73
  }