@atlaskit/radio 5.2.1 → 5.3.3

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 (13) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/__perf__/radio.tsx +1 -0
  3. package/dist/cjs/Radio.js +129 -12
  4. package/dist/cjs/styles.js +48 -37
  5. package/dist/cjs/version.json +1 -1
  6. package/dist/es2019/Radio.js +127 -22
  7. package/dist/es2019/styles.js +47 -144
  8. package/dist/es2019/version.json +1 -1
  9. package/dist/esm/Radio.js +128 -12
  10. package/dist/esm/styles.js +47 -34
  11. package/dist/esm/version.json +1 -1
  12. package/dist/types/styles.d.ts +17 -1
  13. package/package.json +12 -17
package/CHANGELOG.md CHANGED
@@ -1,5 +1,38 @@
1
1
  # @atlaskit/radio
2
2
 
3
+ ## 5.3.3
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 5.3.2
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 5.3.1
16
+
17
+ ### Patch Changes
18
+
19
+ - Updated dependencies
20
+
21
+ ## 5.3.0
22
+
23
+ ### Minor Changes
24
+
25
+ - [`f276913fa2c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f276913fa2c) - Instrumented Radio with the new theming package, `@atlaskit/tokens`.
26
+
27
+ New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
28
+ These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
29
+
30
+ ### Patch Changes
31
+
32
+ - [`af4bca32ad4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/af4bca32ad4) - Internal changes to supress eslint rules.
33
+ - [`2d7cc544696`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2d7cc544696) - Updates token usage to match the latest token set
34
+ - Updated dependencies
35
+
3
36
  ## 5.2.1
4
37
 
5
38
  ### Patch Changes
package/__perf__/radio.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
1
2
  import React from 'react';
2
3
 
3
4
  import { fireEvent } from '@testing-library/react';
package/dist/cjs/Radio.js CHANGED
@@ -9,8 +9,6 @@ exports.default = void 0;
9
9
 
10
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
11
 
12
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
12
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
15
13
 
16
14
  var _react = require("react");
@@ -25,16 +23,131 @@ var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
25
23
 
26
24
  var _constants = require("@atlaskit/theme/constants");
27
25
 
28
- var _styles = _interopRequireDefault(require("./styles"));
26
+ var _tokens = require("@atlaskit/tokens");
29
27
 
30
- var _templateObject, _templateObject2;
28
+ var _styles = _interopRequireDefault(require("./styles"));
31
29
 
30
+ /** @jsx jsx */
32
31
  var packageName = "@atlaskit/radio";
33
- var packageVersion = "5.2.1";
32
+ var packageVersion = "5.3.3";
34
33
  var fontFamily = (0, _constants.fontFamily)();
35
34
 
36
35
  var noop = function noop() {};
37
36
 
37
+ var labelPaddingStyles = (0, _core.css)({
38
+ padding: '2px 4px'
39
+ });
40
+ var labelStyles = (0, _core.css)({
41
+ display: 'flex',
42
+ boxSizing: 'border-box',
43
+ position: 'relative',
44
+ alignItems: 'flex-start',
45
+ fontFamily: fontFamily,
46
+ // eslint-disable-next-line @repo/internal/styles/no-nested-styles
47
+ '&[data-disabled]': {
48
+ color: (0, _tokens.token)('color.text.disabled', _colors.N80),
49
+ cursor: 'not-allowed'
50
+ }
51
+ });
52
+ var lightLabelStyles = (0, _core.css)({
53
+ color: (0, _tokens.token)('color.text.highEmphasis', _colors.N900)
54
+ });
55
+ var darkLabelStyles = (0, _core.css)({
56
+ color: (0, _tokens.token)('color.text.highEmphasis', _colors.DN600)
57
+ });
58
+ var radioStyles = (0, _core.css)({
59
+ display: 'flex',
60
+
61
+ /*
62
+ The circle should be 14px * 14px centred in a 24px * 24px box.
63
+ This is inclusive of a 2px border and inner circle with 2px radius.
64
+ There is a Chrome bug that makes the circle become an oval and the
65
+ inner circle not be centred at various zoom levels. This bug is fixed
66
+ in all browsers if a scale of 14/24 is applied.
67
+ */
68
+ width: '24px',
69
+ height: '24px',
70
+ margin: 0,
71
+ position: 'relative',
72
+ alignItems: 'center',
73
+ justifyContent: 'center',
74
+ flexShrink: 0,
75
+ backgroundColor: 'var(--radio-background-color)',
76
+
77
+ /* Border should be 2px, multiply by 24/14 to offset scale */
78
+ border: 'calc(2px * 12 / 7) solid var(--radio-border-color)',
79
+ borderRadius: '50%',
80
+ MozAppearance: 'none',
81
+ outline: 'none',
82
+
83
+ /*
84
+ Change the variables --radio-background-color, --radio-border-color,
85
+ -radio-dot-color and -radio-dot-opacity according to user interactions.
86
+ All other variables are constant
87
+ */
88
+ '--radio-background-color': 'var(--local-background)',
89
+ '--radio-border-color': 'var(--local-border)',
90
+ '--radio-dot-color': 'var(--local-dot-checked)',
91
+ '--radio-dot-opacity': 0,
92
+
93
+ /* 24px * 7 / 12 === 14px height and width */
94
+ transform: 'scale(calc(7 / 12))',
95
+ transition: 'border-color 0.2s ease-in-out, background-color 0.2s ease-in-out',
96
+ verticalAlign: 'top',
97
+ WebkitAppearance: 'none',
98
+ '&::after': {
99
+ /* Height and width should by 4px, multiply by 24/14 to offset scale */
100
+ width: 'calc(4px * 12 / 7)',
101
+ height: 'calc(4px * 12 / 7)',
102
+ position: 'absolute',
103
+ background: 'var(--radio-dot-color)',
104
+ borderRadius: '50%',
105
+ content: "''",
106
+ opacity: 'var(--radio-dot-opacity)',
107
+ transition: 'background-color 0.2s ease-in-out, opacity 0.2s ease-in-out'
108
+ },
109
+ '&:hover': {
110
+ '--radio-background-color': 'var(--local-background-hover)',
111
+ '--radio-border-color': 'var(local-border-hover)'
112
+ },
113
+ '&:active': {
114
+ '--radio-background-color': 'var(--local-background-active)'
115
+ },
116
+ '&:focus': {
117
+ '--radio-border-color': 'var(--local-border-focus)'
118
+ },
119
+ '&:checked': {
120
+ '--radio-background-color': 'var(--local-background-checked)',
121
+ '--radio-border-color': 'var(--local-background-checked)',
122
+ '--radio-dot-opacity': 1
123
+ },
124
+ '&:checked:hover': {
125
+ '--radio-background-color': 'var(--local-background-checked-hover)',
126
+ '--radio-border-color': 'var(--local-background-checked-hover)'
127
+ },
128
+ '&:checked:active': {
129
+ '--radio-background-color': 'var(--local-background-checked-active)',
130
+ '--radio-border-color': 'var(--local-border-hover)',
131
+ '--radio-dot-color': 'var(--local-dot-active)'
132
+ },
133
+ '&:checked:focus': {
134
+ '--radio-border-color': 'var(--local-border-focus)'
135
+ },
136
+ // eslint-disable-next-line @repo/internal/styles/no-nested-styles
137
+ '&[data-invalid], &:checked[data-invalid]': {
138
+ '--radio-border-color': 'var(--local-invalid)'
139
+ },
140
+ '&:disabled, &:disabled:hover, &:disabled:focus, &:disabled:active, &:disabled[data-invalid]': {
141
+ cursor: 'not-allowed',
142
+ '--radio-background-color': 'var(--local-background-disabled)',
143
+ '--radio-border-color': 'var(--local-border-disabled)',
144
+ '--radio-dot-color': 'var(--local-dot-disabled)'
145
+ },
146
+ '&:checked:disabled': {
147
+ '--radio-border-color': 'transparent' // TODO: Investigate token solution
148
+
149
+ }
150
+ });
38
151
  var RadioWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, ref) {
39
152
  var ariaLabel = props.ariaLabel,
40
153
  _props$isDisabled = props.isDisabled,
@@ -61,15 +174,17 @@ var RadioWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, re
61
174
  packageName: packageName,
62
175
  packageVersion: packageVersion
63
176
  });
64
- var styles = (0, _react.useMemo)(function () {
65
- return (0, _styles.default)(mode);
177
+ var radioCustomProperties = (0, _react.useMemo)(function () {
178
+ return (0, _core.css)((0, _styles.default)(mode));
66
179
  }, [mode]);
67
180
  return (// https://product-fabric.atlassian.net/browse/DST-1971
68
181
  // eslint-disable-next-line jsx-a11y/label-has-associated-control,jsx-a11y/label-has-for
69
182
  (0, _core.jsx)("label", {
70
183
  "data-testid": testId && "".concat(testId, "--radio-label"),
71
- "data-disabled": isDisabled ? 'true' : undefined,
72
- css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n align-items: flex-start;\n font-family: ", ";\n color: ", ";\n display: flex;\n position: relative;\n /* Content box changes intended size of the input */\n box-sizing: border-box;\n &[data-disabled] {\n color: ", ";\n cursor: not-allowed;\n }\n "])), fontFamily, mode === 'light' ? _colors.N900 : _colors.DN600, _colors.N80)
184
+ "data-disabled": isDisabled ? 'true' : undefined // TODO these will no longer be dynamic styles when legacy theming removed
185
+ // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
186
+ ,
187
+ css: [labelStyles, mode === 'light' ? lightLabelStyles : darkLabelStyles]
73
188
  }, (0, _core.jsx)("input", (0, _extends2.default)({}, rest, {
74
189
  "aria-label": ariaLabel,
75
190
  checked: isChecked,
@@ -82,11 +197,13 @@ var RadioWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, re
82
197
  "data-testid": testId && "".concat(testId, "--radio-input") // isInvalid is used in a nonstandard way so cannot
83
198
  // use :invalid selector
84
199
  ,
85
- "data-invalid": isInvalid ? 'true' : undefined,
86
- css: styles,
200
+ "data-invalid": isInvalid ? 'true' : undefined // TODO radioCustomProperties can be defined at top of file when legacy theming removed
201
+ // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
202
+ ,
203
+ css: [radioStyles, radioCustomProperties],
87
204
  ref: ref
88
205
  })), label ? (0, _core.jsx)("span", {
89
- css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n padding: 2px 4px;\n "])))
206
+ css: labelPaddingStyles
90
207
  }, label) : null)
91
208
  );
92
209
  });
package/dist/cjs/styles.js CHANGED
@@ -1,55 +1,66 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
3
  Object.defineProperty(exports, "__esModule", {
6
4
  value: true
7
5
  });
8
- exports.default = getRadioStyles;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
-
12
- var _core = require("@emotion/core");
6
+ exports.default = getRadioCustomProperties;
13
7
 
14
8
  var _colors = require("@atlaskit/theme/colors");
15
9
 
16
- var _templateObject, _templateObject2;
10
+ var _tokens = require("@atlaskit/tokens");
17
11
 
18
12
  var radioThemeColors = {
19
13
  light: {
20
- background: _colors.N10,
21
- backgroundHover: _colors.N30,
22
- backgroundActive: _colors.B50,
23
- backgroundChecked: _colors.B400,
24
- backgroundCheckedHover: _colors.B300,
25
- dotChecked: _colors.N10,
26
- dotDisabled: _colors.N70,
27
- dotActive: _colors.B400,
28
- border: _colors.N40,
29
- borderHover: _colors.N40,
30
- borderFocus: _colors.B100,
31
- disabled: _colors.N20,
32
- invalid: _colors.R300
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)
33
28
  },
34
29
  dark: {
35
- background: _colors.DN10,
36
- backgroundHover: _colors.DN30,
37
- backgroundActive: _colors.B200,
38
- backgroundChecked: _colors.B400,
39
- backgroundCheckedHover: _colors.B75,
40
- dotChecked: _colors.DN10,
41
- dotDisabled: _colors.DN90,
42
- dotActive: _colors.DN10,
43
- border: _colors.DN80,
44
- borderHover: _colors.DN200,
45
- borderFocus: _colors.B75,
46
- disabled: _colors.DN10,
47
- invalid: _colors.R300
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)
48
44
  }
49
45
  };
50
- var radioStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n /*\n Change the variables --radio-background-color, --radio-border-color,\n -radio-dot-color and -radio-dot-opacity according to user interactions.\n All other variables are constant\n */\n\n --radio-background-color: var(--local-background);\n --radio-border-color: var(--local-border);\n --radio-dot-color: var(--local-dot-checked);\n --radio-dot-opacity: 0;\n\n -webkit-appearance: none;\n -moz-appearance: none;\n\n /*\n The circle should be 14px * 14px centred in a 24px * 24px box.\n This is inclusive of a 2px border and inner circle with 2px radius.\n There is a Chrome bug that makes the circle become an oval and the\n inner circle not be centred at various zoom levels. This bug is fixed\n in all browsers if a scale of 14/24 is applied.\n */\n height: 24px;\n width: 24px;\n flex-shrink: 0;\n margin: 0;\n /* 24px * 7 / 12 === 14px height and width */\n transform: scale(calc(7 / 12));\n\n outline: none;\n display: inline-block;\n vertical-align: top;\n position: relative;\n /* Border should be 2px, multiply by 24/14 to offset scale */\n border: calc(2px * 12 / 7) solid var(--radio-border-color);\n background-color: var(--radio-background-color);\n transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;\n border-radius: 50%;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n &::after {\n content: '';\n border-radius: 50%;\n /* Height and width should by 4px, multiply by 24/14 to offset scale */\n height: calc(4px * 12 / 7);\n width: calc(4px * 12 / 7);\n background: var(--radio-dot-color);\n opacity: var(--radio-dot-opacity);\n position: absolute;\n transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;\n }\n\n &:checked {\n --radio-dot-opacity: 1;\n }\n &:hover {\n --radio-background-color: var(--local-background-hover);\n --radio-border-color: var(local-border-hover);\n }\n &:focus {\n --radio-border-color: var(--local-border-focus);\n }\n &:checked {\n --radio-background-color: var(--local-background-checked);\n --radio-border-color: var(--local-background-checked);\n }\n &:checked:hover {\n --radio-background-color: var(--local-background-checked-hover);\n --radio-border-color: var(--local-background-checked-hover);\n }\n &:checked:focus {\n --radio-border-color: var(--local-border-focus);\n }\n &:checked:active {\n --radio-background-color: var(--local-background-active);\n --radio-dot-color: var(--local-dot-active);\n --radio-border-color: var(--local-border-focus);\n }\n\n &[data-invalid],\n &:checked[data-invalid] {\n --radio-border-color: var(--local-invalid);\n }\n\n &:disabled,\n &:disabled:hover,\n &:disabled:focus,\n &:disabled:active,\n &:disabled[data-invalid] {\n --radio-background-color: var(--local-disabled);\n --radio-border-color: var(--local-disabled);\n --radio-dot-color: var(--local-dot-disabled);\n cursor: not-allowed;\n }\n"])));
51
46
 
52
- function getRadioStyles(mode) {
47
+ function getRadioCustomProperties(mode) {
53
48
  var radioColors = radioThemeColors[mode];
54
- return [(0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n --local-background: ", ";\n --local-background-hover: ", ";\n --local-background-active: ", ";\n --local-background-checked: ", ";\n --local-background-checked-hover: ", ";\n\n --local-dot-checked: ", ";\n --local-dot-disabled: ", ";\n --local-dot-active: ", ";\n\n --local-border: ", ";\n --local-border-hover: ", ";\n --local-border-focus: ", ";\n\n --local-disabled: ", ";\n --local-invalid: ", ";\n "])), radioColors.background, radioColors.backgroundHover, radioColors.backgroundActive, radioColors.backgroundChecked, radioColors.backgroundCheckedHover, radioColors.dotChecked, radioColors.dotDisabled, radioColors.dotActive, radioColors.border, radioColors.borderHover, radioColors.borderFocus, radioColors.disabled, _colors.R300), radioStyles];
49
+ return {
50
+ '--local-background': radioColors.background,
51
+ '--local-background-active': radioColors.backgroundActive,
52
+ '--local-background-checked': radioColors.backgroundChecked,
53
+ '--local-background-checked-active': radioColors.backgroundCheckedActive,
54
+ '--local-background-checked-hover': radioColors.backgroundCheckedHover,
55
+ '--local-background-disabled': radioColors.backgroundDisabled,
56
+ '--local-background-hover': radioColors.backgroundHover,
57
+ '--local-border': radioColors.border,
58
+ '--local-border-disabled': radioColors.borderDisabled,
59
+ '--local-border-hover': radioColors.borderHover,
60
+ '--local-border-focus': radioColors.borderFocus,
61
+ '--local-dot-active': radioColors.dotActive,
62
+ '--local-dot-checked': radioColors.dotChecked,
63
+ '--local-dot-disabled': radioColors.dotDisabled,
64
+ '--local-invalid': (0, _tokens.token)('color.iconBorder.danger', _colors.R300)
65
+ };
55
66
  }
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/radio",
3
- "version": "5.2.1",
3
+ "version": "5.3.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/Radio.js CHANGED
@@ -7,13 +7,128 @@ 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 getRadioStyles from './styles';
10
+ import { token } from '@atlaskit/tokens';
11
+ import getRadioCustomProperties from './styles';
11
12
  const packageName = "@atlaskit/radio";
12
- const packageVersion = "5.2.1";
13
+ const packageVersion = "5.3.3";
13
14
  const fontFamily = getFontFamily();
14
15
 
15
16
  const noop = () => {};
16
17
 
18
+ const labelPaddingStyles = css({
19
+ padding: '2px 4px'
20
+ });
21
+ const labelStyles = css({
22
+ display: 'flex',
23
+ boxSizing: 'border-box',
24
+ position: 'relative',
25
+ alignItems: 'flex-start',
26
+ fontFamily: fontFamily,
27
+ // eslint-disable-next-line @repo/internal/styles/no-nested-styles
28
+ '&[data-disabled]': {
29
+ color: token('color.text.disabled', N80),
30
+ cursor: 'not-allowed'
31
+ }
32
+ });
33
+ const lightLabelStyles = css({
34
+ color: token('color.text.highEmphasis', N900)
35
+ });
36
+ const darkLabelStyles = css({
37
+ color: token('color.text.highEmphasis', DN600)
38
+ });
39
+ const radioStyles = css({
40
+ display: 'flex',
41
+
42
+ /*
43
+ The circle should be 14px * 14px centred in a 24px * 24px box.
44
+ This is inclusive of a 2px border and inner circle with 2px radius.
45
+ There is a Chrome bug that makes the circle become an oval and the
46
+ inner circle not be centred at various zoom levels. This bug is fixed
47
+ in all browsers if a scale of 14/24 is applied.
48
+ */
49
+ width: '24px',
50
+ height: '24px',
51
+ margin: 0,
52
+ position: 'relative',
53
+ alignItems: 'center',
54
+ justifyContent: 'center',
55
+ flexShrink: 0,
56
+ backgroundColor: 'var(--radio-background-color)',
57
+
58
+ /* Border should be 2px, multiply by 24/14 to offset scale */
59
+ border: 'calc(2px * 12 / 7) solid var(--radio-border-color)',
60
+ borderRadius: '50%',
61
+ MozAppearance: 'none',
62
+ outline: 'none',
63
+
64
+ /*
65
+ Change the variables --radio-background-color, --radio-border-color,
66
+ -radio-dot-color and -radio-dot-opacity according to user interactions.
67
+ All other variables are constant
68
+ */
69
+ '--radio-background-color': 'var(--local-background)',
70
+ '--radio-border-color': 'var(--local-border)',
71
+ '--radio-dot-color': 'var(--local-dot-checked)',
72
+ '--radio-dot-opacity': 0,
73
+
74
+ /* 24px * 7 / 12 === 14px height and width */
75
+ transform: 'scale(calc(7 / 12))',
76
+ transition: 'border-color 0.2s ease-in-out, background-color 0.2s ease-in-out',
77
+ verticalAlign: 'top',
78
+ WebkitAppearance: 'none',
79
+ '&::after': {
80
+ /* Height and width should by 4px, multiply by 24/14 to offset scale */
81
+ width: 'calc(4px * 12 / 7)',
82
+ height: 'calc(4px * 12 / 7)',
83
+ position: 'absolute',
84
+ background: 'var(--radio-dot-color)',
85
+ borderRadius: '50%',
86
+ content: "''",
87
+ opacity: 'var(--radio-dot-opacity)',
88
+ transition: 'background-color 0.2s ease-in-out, opacity 0.2s ease-in-out'
89
+ },
90
+ '&:hover': {
91
+ '--radio-background-color': 'var(--local-background-hover)',
92
+ '--radio-border-color': 'var(local-border-hover)'
93
+ },
94
+ '&:active': {
95
+ '--radio-background-color': 'var(--local-background-active)'
96
+ },
97
+ '&:focus': {
98
+ '--radio-border-color': 'var(--local-border-focus)'
99
+ },
100
+ '&:checked': {
101
+ '--radio-background-color': 'var(--local-background-checked)',
102
+ '--radio-border-color': 'var(--local-background-checked)',
103
+ '--radio-dot-opacity': 1
104
+ },
105
+ '&:checked:hover': {
106
+ '--radio-background-color': 'var(--local-background-checked-hover)',
107
+ '--radio-border-color': 'var(--local-background-checked-hover)'
108
+ },
109
+ '&:checked:active': {
110
+ '--radio-background-color': 'var(--local-background-checked-active)',
111
+ '--radio-border-color': 'var(--local-border-hover)',
112
+ '--radio-dot-color': 'var(--local-dot-active)'
113
+ },
114
+ '&:checked:focus': {
115
+ '--radio-border-color': 'var(--local-border-focus)'
116
+ },
117
+ // eslint-disable-next-line @repo/internal/styles/no-nested-styles
118
+ '&[data-invalid], &:checked[data-invalid]': {
119
+ '--radio-border-color': 'var(--local-invalid)'
120
+ },
121
+ '&:disabled, &:disabled:hover, &:disabled:focus, &:disabled:active, &:disabled[data-invalid]': {
122
+ cursor: 'not-allowed',
123
+ '--radio-background-color': 'var(--local-background-disabled)',
124
+ '--radio-border-color': 'var(--local-border-disabled)',
125
+ '--radio-dot-color': 'var(--local-dot-disabled)'
126
+ },
127
+ '&:checked:disabled': {
128
+ '--radio-border-color': 'transparent' // TODO: Investigate token solution
129
+
130
+ }
131
+ });
17
132
  const RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
18
133
  const {
19
134
  ariaLabel,
@@ -39,25 +154,15 @@ const RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
39
154
  packageName,
40
155
  packageVersion
41
156
  });
42
- const styles = useMemo(() => getRadioStyles(mode), [mode]);
157
+ const radioCustomProperties = useMemo(() => css(getRadioCustomProperties(mode)), [mode]);
43
158
  return (// https://product-fabric.atlassian.net/browse/DST-1971
44
159
  // eslint-disable-next-line jsx-a11y/label-has-associated-control,jsx-a11y/label-has-for
45
160
  jsx("label", {
46
161
  "data-testid": testId && `${testId}--radio-label`,
47
- "data-disabled": isDisabled ? 'true' : undefined,
48
- css: css`
49
- align-items: flex-start;
50
- font-family: ${fontFamily};
51
- color: ${mode === 'light' ? N900 : DN600};
52
- display: flex;
53
- position: relative;
54
- /* Content box changes intended size of the input */
55
- box-sizing: border-box;
56
- &[data-disabled] {
57
- color: ${N80};
58
- cursor: not-allowed;
59
- }
60
- `
162
+ "data-disabled": isDisabled ? 'true' : undefined // TODO these will no longer be dynamic styles when legacy theming removed
163
+ // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
164
+ ,
165
+ css: [labelStyles, mode === 'light' ? lightLabelStyles : darkLabelStyles]
61
166
  }, jsx("input", _extends({}, rest, {
62
167
  "aria-label": ariaLabel,
63
168
  checked: isChecked,
@@ -70,13 +175,13 @@ const RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
70
175
  "data-testid": testId && `${testId}--radio-input` // isInvalid is used in a nonstandard way so cannot
71
176
  // use :invalid selector
72
177
  ,
73
- "data-invalid": isInvalid ? 'true' : undefined,
74
- css: styles,
178
+ "data-invalid": isInvalid ? 'true' : undefined // TODO radioCustomProperties can be defined at top of file when legacy theming removed
179
+ // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
180
+ ,
181
+ css: [radioStyles, radioCustomProperties],
75
182
  ref: ref
76
183
  })), label ? jsx("span", {
77
- css: css`
78
- padding: 2px 4px;
79
- `
184
+ css: labelPaddingStyles
80
185
  }, label) : null)
81
186
  );
82
187
  });
package/dist/es2019/styles.js CHANGED
@@ -1,153 +1,56 @@
1
- import { css } from '@emotion/core';
2
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
3
  const radioThemeColors = {
4
4
  light: {
5
- background: N10,
6
- backgroundHover: N30,
7
- backgroundActive: B50,
8
- backgroundChecked: B400,
9
- backgroundCheckedHover: B300,
10
- dotChecked: N10,
11
- dotDisabled: N70,
12
- dotActive: B400,
13
- border: N40,
14
- borderHover: N40,
15
- borderFocus: B100,
16
- disabled: N20,
17
- invalid: R300
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)
18
19
  },
19
20
  dark: {
20
- background: DN10,
21
- backgroundHover: DN30,
22
- backgroundActive: B200,
23
- backgroundChecked: B400,
24
- backgroundCheckedHover: B75,
25
- dotChecked: DN10,
26
- dotDisabled: DN90,
27
- dotActive: DN10,
28
- border: DN80,
29
- borderHover: DN200,
30
- borderFocus: B75,
31
- disabled: DN10,
32
- invalid: R300
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)
33
35
  }
34
36
  };
35
- const radioStyles = css`
36
- /*
37
- Change the variables --radio-background-color, --radio-border-color,
38
- -radio-dot-color and -radio-dot-opacity according to user interactions.
39
- All other variables are constant
40
- */
41
-
42
- --radio-background-color: var(--local-background);
43
- --radio-border-color: var(--local-border);
44
- --radio-dot-color: var(--local-dot-checked);
45
- --radio-dot-opacity: 0;
46
-
47
- -webkit-appearance: none;
48
- -moz-appearance: none;
49
-
50
- /*
51
- The circle should be 14px * 14px centred in a 24px * 24px box.
52
- This is inclusive of a 2px border and inner circle with 2px radius.
53
- There is a Chrome bug that makes the circle become an oval and the
54
- inner circle not be centred at various zoom levels. This bug is fixed
55
- in all browsers if a scale of 14/24 is applied.
56
- */
57
- height: 24px;
58
- width: 24px;
59
- flex-shrink: 0;
60
- margin: 0;
61
- /* 24px * 7 / 12 === 14px height and width */
62
- transform: scale(calc(7 / 12));
63
-
64
- outline: none;
65
- display: inline-block;
66
- vertical-align: top;
67
- position: relative;
68
- /* Border should be 2px, multiply by 24/14 to offset scale */
69
- border: calc(2px * 12 / 7) solid var(--radio-border-color);
70
- background-color: var(--radio-background-color);
71
- transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
72
- border-radius: 50%;
73
-
74
- display: flex;
75
- align-items: center;
76
- justify-content: center;
77
-
78
- &::after {
79
- content: '';
80
- border-radius: 50%;
81
- /* Height and width should by 4px, multiply by 24/14 to offset scale */
82
- height: calc(4px * 12 / 7);
83
- width: calc(4px * 12 / 7);
84
- background: var(--radio-dot-color);
85
- opacity: var(--radio-dot-opacity);
86
- position: absolute;
87
- transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
88
- }
89
-
90
- &:checked {
91
- --radio-dot-opacity: 1;
92
- }
93
- &:hover {
94
- --radio-background-color: var(--local-background-hover);
95
- --radio-border-color: var(local-border-hover);
96
- }
97
- &:focus {
98
- --radio-border-color: var(--local-border-focus);
99
- }
100
- &:checked {
101
- --radio-background-color: var(--local-background-checked);
102
- --radio-border-color: var(--local-background-checked);
103
- }
104
- &:checked:hover {
105
- --radio-background-color: var(--local-background-checked-hover);
106
- --radio-border-color: var(--local-background-checked-hover);
107
- }
108
- &:checked:focus {
109
- --radio-border-color: var(--local-border-focus);
110
- }
111
- &:checked:active {
112
- --radio-background-color: var(--local-background-active);
113
- --radio-dot-color: var(--local-dot-active);
114
- --radio-border-color: var(--local-border-focus);
115
- }
116
-
117
- &[data-invalid],
118
- &:checked[data-invalid] {
119
- --radio-border-color: var(--local-invalid);
120
- }
121
-
122
- &:disabled,
123
- &:disabled:hover,
124
- &:disabled:focus,
125
- &:disabled:active,
126
- &:disabled[data-invalid] {
127
- --radio-background-color: var(--local-disabled);
128
- --radio-border-color: var(--local-disabled);
129
- --radio-dot-color: var(--local-dot-disabled);
130
- cursor: not-allowed;
131
- }
132
- `;
133
- export default function getRadioStyles(mode) {
37
+ export default function getRadioCustomProperties(mode) {
134
38
  const radioColors = radioThemeColors[mode];
135
- return [css`
136
- --local-background: ${radioColors.background};
137
- --local-background-hover: ${radioColors.backgroundHover};
138
- --local-background-active: ${radioColors.backgroundActive};
139
- --local-background-checked: ${radioColors.backgroundChecked};
140
- --local-background-checked-hover: ${radioColors.backgroundCheckedHover};
141
-
142
- --local-dot-checked: ${radioColors.dotChecked};
143
- --local-dot-disabled: ${radioColors.dotDisabled};
144
- --local-dot-active: ${radioColors.dotActive};
145
-
146
- --local-border: ${radioColors.border};
147
- --local-border-hover: ${radioColors.borderHover};
148
- --local-border-focus: ${radioColors.borderFocus};
149
-
150
- --local-disabled: ${radioColors.disabled};
151
- --local-invalid: ${R300};
152
- `, radioStyles];
39
+ return {
40
+ '--local-background': radioColors.background,
41
+ '--local-background-active': radioColors.backgroundActive,
42
+ '--local-background-checked': radioColors.backgroundChecked,
43
+ '--local-background-checked-active': radioColors.backgroundCheckedActive,
44
+ '--local-background-checked-hover': radioColors.backgroundCheckedHover,
45
+ '--local-background-disabled': radioColors.backgroundDisabled,
46
+ '--local-background-hover': radioColors.backgroundHover,
47
+ '--local-border': radioColors.border,
48
+ '--local-border-disabled': radioColors.borderDisabled,
49
+ '--local-border-hover': radioColors.borderHover,
50
+ '--local-border-focus': radioColors.borderFocus,
51
+ '--local-dot-active': radioColors.dotActive,
52
+ '--local-dot-checked': radioColors.dotChecked,
53
+ '--local-dot-disabled': radioColors.dotDisabled,
54
+ '--local-invalid': token('color.iconBorder.danger', R300)
55
+ };
153
56
  }
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/radio",
3
- "version": "5.2.1",
3
+ "version": "5.3.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/Radio.js CHANGED
@@ -1,9 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
3
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
3
 
5
- var _templateObject, _templateObject2;
6
-
7
4
  /** @jsx jsx */
8
5
  import { forwardRef, memo, useMemo } from 'react';
9
6
  import { css, jsx } from '@emotion/core';
@@ -11,13 +8,128 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatfor
11
8
  import { DN600, N80, N900 } from '@atlaskit/theme/colors';
12
9
  import GlobalTheme from '@atlaskit/theme/components';
13
10
  import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
14
- import getRadioStyles from './styles';
11
+ import { token } from '@atlaskit/tokens';
12
+ import getRadioCustomProperties from './styles';
15
13
  var packageName = "@atlaskit/radio";
16
- var packageVersion = "5.2.1";
14
+ var packageVersion = "5.3.3";
17
15
  var fontFamily = getFontFamily();
18
16
 
19
17
  var noop = function noop() {};
20
18
 
19
+ var labelPaddingStyles = css({
20
+ padding: '2px 4px'
21
+ });
22
+ var labelStyles = css({
23
+ display: 'flex',
24
+ boxSizing: 'border-box',
25
+ position: 'relative',
26
+ alignItems: 'flex-start',
27
+ fontFamily: fontFamily,
28
+ // eslint-disable-next-line @repo/internal/styles/no-nested-styles
29
+ '&[data-disabled]': {
30
+ color: token('color.text.disabled', N80),
31
+ cursor: 'not-allowed'
32
+ }
33
+ });
34
+ var lightLabelStyles = css({
35
+ color: token('color.text.highEmphasis', N900)
36
+ });
37
+ var darkLabelStyles = css({
38
+ color: token('color.text.highEmphasis', DN600)
39
+ });
40
+ var radioStyles = css({
41
+ display: 'flex',
42
+
43
+ /*
44
+ The circle should be 14px * 14px centred in a 24px * 24px box.
45
+ This is inclusive of a 2px border and inner circle with 2px radius.
46
+ There is a Chrome bug that makes the circle become an oval and the
47
+ inner circle not be centred at various zoom levels. This bug is fixed
48
+ in all browsers if a scale of 14/24 is applied.
49
+ */
50
+ width: '24px',
51
+ height: '24px',
52
+ margin: 0,
53
+ position: 'relative',
54
+ alignItems: 'center',
55
+ justifyContent: 'center',
56
+ flexShrink: 0,
57
+ backgroundColor: 'var(--radio-background-color)',
58
+
59
+ /* Border should be 2px, multiply by 24/14 to offset scale */
60
+ border: 'calc(2px * 12 / 7) solid var(--radio-border-color)',
61
+ borderRadius: '50%',
62
+ MozAppearance: 'none',
63
+ outline: 'none',
64
+
65
+ /*
66
+ Change the variables --radio-background-color, --radio-border-color,
67
+ -radio-dot-color and -radio-dot-opacity according to user interactions.
68
+ All other variables are constant
69
+ */
70
+ '--radio-background-color': 'var(--local-background)',
71
+ '--radio-border-color': 'var(--local-border)',
72
+ '--radio-dot-color': 'var(--local-dot-checked)',
73
+ '--radio-dot-opacity': 0,
74
+
75
+ /* 24px * 7 / 12 === 14px height and width */
76
+ transform: 'scale(calc(7 / 12))',
77
+ transition: 'border-color 0.2s ease-in-out, background-color 0.2s ease-in-out',
78
+ verticalAlign: 'top',
79
+ WebkitAppearance: 'none',
80
+ '&::after': {
81
+ /* Height and width should by 4px, multiply by 24/14 to offset scale */
82
+ width: 'calc(4px * 12 / 7)',
83
+ height: 'calc(4px * 12 / 7)',
84
+ position: 'absolute',
85
+ background: 'var(--radio-dot-color)',
86
+ borderRadius: '50%',
87
+ content: "''",
88
+ opacity: 'var(--radio-dot-opacity)',
89
+ transition: 'background-color 0.2s ease-in-out, opacity 0.2s ease-in-out'
90
+ },
91
+ '&:hover': {
92
+ '--radio-background-color': 'var(--local-background-hover)',
93
+ '--radio-border-color': 'var(local-border-hover)'
94
+ },
95
+ '&:active': {
96
+ '--radio-background-color': 'var(--local-background-active)'
97
+ },
98
+ '&:focus': {
99
+ '--radio-border-color': 'var(--local-border-focus)'
100
+ },
101
+ '&:checked': {
102
+ '--radio-background-color': 'var(--local-background-checked)',
103
+ '--radio-border-color': 'var(--local-background-checked)',
104
+ '--radio-dot-opacity': 1
105
+ },
106
+ '&:checked:hover': {
107
+ '--radio-background-color': 'var(--local-background-checked-hover)',
108
+ '--radio-border-color': 'var(--local-background-checked-hover)'
109
+ },
110
+ '&:checked:active': {
111
+ '--radio-background-color': 'var(--local-background-checked-active)',
112
+ '--radio-border-color': 'var(--local-border-hover)',
113
+ '--radio-dot-color': 'var(--local-dot-active)'
114
+ },
115
+ '&:checked:focus': {
116
+ '--radio-border-color': 'var(--local-border-focus)'
117
+ },
118
+ // eslint-disable-next-line @repo/internal/styles/no-nested-styles
119
+ '&[data-invalid], &:checked[data-invalid]': {
120
+ '--radio-border-color': 'var(--local-invalid)'
121
+ },
122
+ '&:disabled, &:disabled:hover, &:disabled:focus, &:disabled:active, &:disabled[data-invalid]': {
123
+ cursor: 'not-allowed',
124
+ '--radio-background-color': 'var(--local-background-disabled)',
125
+ '--radio-border-color': 'var(--local-border-disabled)',
126
+ '--radio-dot-color': 'var(--local-dot-disabled)'
127
+ },
128
+ '&:checked:disabled': {
129
+ '--radio-border-color': 'transparent' // TODO: Investigate token solution
130
+
131
+ }
132
+ });
21
133
  var RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
22
134
  var ariaLabel = props.ariaLabel,
23
135
  _props$isDisabled = props.isDisabled,
@@ -45,15 +157,17 @@ var RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
45
157
  packageName: packageName,
46
158
  packageVersion: packageVersion
47
159
  });
48
- var styles = useMemo(function () {
49
- return getRadioStyles(mode);
160
+ var radioCustomProperties = useMemo(function () {
161
+ return css(getRadioCustomProperties(mode));
50
162
  }, [mode]);
51
163
  return (// https://product-fabric.atlassian.net/browse/DST-1971
52
164
  // eslint-disable-next-line jsx-a11y/label-has-associated-control,jsx-a11y/label-has-for
53
165
  jsx("label", {
54
166
  "data-testid": testId && "".concat(testId, "--radio-label"),
55
- "data-disabled": isDisabled ? 'true' : undefined,
56
- css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-items: flex-start;\n font-family: ", ";\n color: ", ";\n display: flex;\n position: relative;\n /* Content box changes intended size of the input */\n box-sizing: border-box;\n &[data-disabled] {\n color: ", ";\n cursor: not-allowed;\n }\n "])), fontFamily, mode === 'light' ? N900 : DN600, N80)
167
+ "data-disabled": isDisabled ? 'true' : undefined // TODO these will no longer be dynamic styles when legacy theming removed
168
+ // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
169
+ ,
170
+ css: [labelStyles, mode === 'light' ? lightLabelStyles : darkLabelStyles]
57
171
  }, jsx("input", _extends({}, rest, {
58
172
  "aria-label": ariaLabel,
59
173
  checked: isChecked,
@@ -66,11 +180,13 @@ var RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
66
180
  "data-testid": testId && "".concat(testId, "--radio-input") // isInvalid is used in a nonstandard way so cannot
67
181
  // use :invalid selector
68
182
  ,
69
- "data-invalid": isInvalid ? 'true' : undefined,
70
- css: styles,
183
+ "data-invalid": isInvalid ? 'true' : undefined // TODO radioCustomProperties can be defined at top of file when legacy theming removed
184
+ // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
185
+ ,
186
+ css: [radioStyles, radioCustomProperties],
71
187
  ref: ref
72
188
  })), label ? jsx("span", {
73
- css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: 2px 4px;\n "])))
189
+ css: labelPaddingStyles
74
190
  }, label) : null)
75
191
  );
76
192
  });
package/dist/esm/styles.js CHANGED
@@ -1,43 +1,56 @@
1
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
-
3
- var _templateObject, _templateObject2;
4
-
5
- import { css } from '@emotion/core';
6
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';
7
3
  var radioThemeColors = {
8
4
  light: {
9
- background: N10,
10
- backgroundHover: N30,
11
- backgroundActive: B50,
12
- backgroundChecked: B400,
13
- backgroundCheckedHover: B300,
14
- dotChecked: N10,
15
- dotDisabled: N70,
16
- dotActive: B400,
17
- border: N40,
18
- borderHover: N40,
19
- borderFocus: B100,
20
- disabled: N20,
21
- invalid: R300
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)
22
19
  },
23
20
  dark: {
24
- background: DN10,
25
- backgroundHover: DN30,
26
- backgroundActive: B200,
27
- backgroundChecked: B400,
28
- backgroundCheckedHover: B75,
29
- dotChecked: DN10,
30
- dotDisabled: DN90,
31
- dotActive: DN10,
32
- border: DN80,
33
- borderHover: DN200,
34
- borderFocus: B75,
35
- disabled: DN10,
36
- invalid: R300
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)
37
35
  }
38
36
  };
39
- var radioStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n /*\n Change the variables --radio-background-color, --radio-border-color,\n -radio-dot-color and -radio-dot-opacity according to user interactions.\n All other variables are constant\n */\n\n --radio-background-color: var(--local-background);\n --radio-border-color: var(--local-border);\n --radio-dot-color: var(--local-dot-checked);\n --radio-dot-opacity: 0;\n\n -webkit-appearance: none;\n -moz-appearance: none;\n\n /*\n The circle should be 14px * 14px centred in a 24px * 24px box.\n This is inclusive of a 2px border and inner circle with 2px radius.\n There is a Chrome bug that makes the circle become an oval and the\n inner circle not be centred at various zoom levels. This bug is fixed\n in all browsers if a scale of 14/24 is applied.\n */\n height: 24px;\n width: 24px;\n flex-shrink: 0;\n margin: 0;\n /* 24px * 7 / 12 === 14px height and width */\n transform: scale(calc(7 / 12));\n\n outline: none;\n display: inline-block;\n vertical-align: top;\n position: relative;\n /* Border should be 2px, multiply by 24/14 to offset scale */\n border: calc(2px * 12 / 7) solid var(--radio-border-color);\n background-color: var(--radio-background-color);\n transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;\n border-radius: 50%;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n &::after {\n content: '';\n border-radius: 50%;\n /* Height and width should by 4px, multiply by 24/14 to offset scale */\n height: calc(4px * 12 / 7);\n width: calc(4px * 12 / 7);\n background: var(--radio-dot-color);\n opacity: var(--radio-dot-opacity);\n position: absolute;\n transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;\n }\n\n &:checked {\n --radio-dot-opacity: 1;\n }\n &:hover {\n --radio-background-color: var(--local-background-hover);\n --radio-border-color: var(local-border-hover);\n }\n &:focus {\n --radio-border-color: var(--local-border-focus);\n }\n &:checked {\n --radio-background-color: var(--local-background-checked);\n --radio-border-color: var(--local-background-checked);\n }\n &:checked:hover {\n --radio-background-color: var(--local-background-checked-hover);\n --radio-border-color: var(--local-background-checked-hover);\n }\n &:checked:focus {\n --radio-border-color: var(--local-border-focus);\n }\n &:checked:active {\n --radio-background-color: var(--local-background-active);\n --radio-dot-color: var(--local-dot-active);\n --radio-border-color: var(--local-border-focus);\n }\n\n &[data-invalid],\n &:checked[data-invalid] {\n --radio-border-color: var(--local-invalid);\n }\n\n &:disabled,\n &:disabled:hover,\n &:disabled:focus,\n &:disabled:active,\n &:disabled[data-invalid] {\n --radio-background-color: var(--local-disabled);\n --radio-border-color: var(--local-disabled);\n --radio-dot-color: var(--local-dot-disabled);\n cursor: not-allowed;\n }\n"])));
40
- export default function getRadioStyles(mode) {
37
+ export default function getRadioCustomProperties(mode) {
41
38
  var radioColors = radioThemeColors[mode];
42
- return [css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n --local-background: ", ";\n --local-background-hover: ", ";\n --local-background-active: ", ";\n --local-background-checked: ", ";\n --local-background-checked-hover: ", ";\n\n --local-dot-checked: ", ";\n --local-dot-disabled: ", ";\n --local-dot-active: ", ";\n\n --local-border: ", ";\n --local-border-hover: ", ";\n --local-border-focus: ", ";\n\n --local-disabled: ", ";\n --local-invalid: ", ";\n "])), radioColors.background, radioColors.backgroundHover, radioColors.backgroundActive, radioColors.backgroundChecked, radioColors.backgroundCheckedHover, radioColors.dotChecked, radioColors.dotDisabled, radioColors.dotActive, radioColors.border, radioColors.borderHover, radioColors.borderFocus, radioColors.disabled, R300), radioStyles];
39
+ return {
40
+ '--local-background': radioColors.background,
41
+ '--local-background-active': radioColors.backgroundActive,
42
+ '--local-background-checked': radioColors.backgroundChecked,
43
+ '--local-background-checked-active': radioColors.backgroundCheckedActive,
44
+ '--local-background-checked-hover': radioColors.backgroundCheckedHover,
45
+ '--local-background-disabled': radioColors.backgroundDisabled,
46
+ '--local-background-hover': radioColors.backgroundHover,
47
+ '--local-border': radioColors.border,
48
+ '--local-border-disabled': radioColors.borderDisabled,
49
+ '--local-border-hover': radioColors.borderHover,
50
+ '--local-border-focus': radioColors.borderFocus,
51
+ '--local-dot-active': radioColors.dotActive,
52
+ '--local-dot-checked': radioColors.dotChecked,
53
+ '--local-dot-disabled': radioColors.dotDisabled,
54
+ '--local-invalid': token('color.iconBorder.danger', R300)
55
+ };
43
56
  }
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/radio",
3
- "version": "5.2.1",
3
+ "version": "5.3.3",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/styles.d.ts CHANGED
@@ -1,2 +1,18 @@
1
1
  import { ThemeModes } from '@atlaskit/theme/types';
2
- export default function getRadioStyles(mode: ThemeModes): import("@emotion/core").SerializedStyles[];
2
+ export default function getRadioCustomProperties(mode: ThemeModes): {
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
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/radio",
3
- "version": "5.2.1",
3
+ "version": "5.3.3",
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/"
@@ -30,7 +30,8 @@
30
30
  },
31
31
  "dependencies": {
32
32
  "@atlaskit/analytics-next": "^8.0.0",
33
- "@atlaskit/theme": "^11.3.0",
33
+ "@atlaskit/theme": "^12.0.0",
34
+ "@atlaskit/tokens": "^0.3.0",
34
35
  "@babel/runtime": "^7.0.0",
35
36
  "@emotion/core": "^10.0.9"
36
37
  },
@@ -39,10 +40,11 @@
39
40
  },
40
41
  "devDependencies": {
41
42
  "@atlaskit/build-utils": "*",
42
- "@atlaskit/button": "^15.1.0",
43
- "@atlaskit/checkbox": "^12.0.0",
43
+ "@atlaskit/button": "^16.1.0",
44
+ "@atlaskit/checkbox": "^12.3.0",
44
45
  "@atlaskit/docs": "^9.0.0",
45
- "@atlaskit/form": "^8.1.0",
46
+ "@atlaskit/form": "^8.4.0",
47
+ "@atlaskit/section-message": "^6.1.0",
46
48
  "@atlaskit/ssr": "*",
47
49
  "@atlaskit/visual-regression": "*",
48
50
  "@atlaskit/webdriver-runner": "*",
@@ -62,18 +64,11 @@
62
64
  "import-structure": "atlassian-conventions"
63
65
  },
64
66
  "@repo/internal": {
65
- "ui-components": [
66
- "lite-mode"
67
- ],
68
- "analytics": [
69
- "analytics-next"
70
- ],
71
- "theming": [
72
- "new-theming-api"
73
- ],
74
- "deprecation": [
75
- "no-deprecated-imports"
76
- ]
67
+ "ui-components": "lite-mode",
68
+ "analytics": "analytics-next",
69
+ "styling": "emotion",
70
+ "theming": "tokens",
71
+ "deprecation": "no-deprecated-imports"
77
72
  }
78
73
  },
79
74
  "homepage": "https://atlassian.design/components/radio/",