@atlaskit/radio 5.6.2 → 5.6.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/radio
 
+## 5.6.3
+
+### Patch Changes
+
+- [`53ffecf71cb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/53ffecf71cb) - Updated selected radio to use `color.background.selected.bold` instead of `color.background.brand.bold`. There's no visual change as these tokens have same hex value in both light and dark mode.
+
 ## 5.6.2
 
 ### Patch Changes

package/__perf__/radio.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 
 import { fireEvent } from '@testing-library/react';

package/dist/cjs/radio.js

@@ -19,7 +19,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 var _excluded = ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "mode", "name", "onChange", "value", "testId", "analyticsContext"];
 /** @jsx jsx */
 var packageName = "@atlaskit/radio";
-var packageVersion = "5.6.2";
+var packageVersion = "5.6.3";
 var fontFamily = (0, _constants.fontFamily)();
 var noop = _noop.default;
 var labelPaddingStyles = (0, _react2.css)({
@@ -164,10 +164,7 @@ var RadioWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, re
     // eslint-disable-next-line jsx-a11y/label-has-associated-control,jsx-a11y/label-has-for
     (0, _react2.jsx)("label", {
       "data-testid": testId && "".concat(testId, "--radio-label"),
-      "data-disabled": isDisabled ? 'true' : undefined
-      // TODO these will no longer be dynamic styles when legacy theming removed
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-      ,
+      "data-disabled": isDisabled ? 'true' : undefined,
       css: [labelStyles, mode === 'light' ? lightLabelStyles : darkLabelStyles]
     }, (0, _react2.jsx)("input", (0, _extends2.default)({}, rest, {
       "aria-label": ariaLabel,
@@ -184,7 +181,7 @@ var RadioWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, re
       ,
       "data-invalid": isInvalid ? 'true' : undefined
       // TODO radioCustomProperties can be defined at top of file when legacy theming removed
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
       css: [radioStyles, radioCustomProperties],
       ref: ref

package/dist/cjs/styles.js

@@ -11,9 +11,9 @@ var radioThemeColors = {
     background: "var(--ds-background-input, ".concat(_colors.N10, ")"),
     backgroundHover: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
     backgroundActive: "var(--ds-background-input-pressed, ".concat(_colors.N30, ")"),
-    backgroundChecked: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
-    backgroundCheckedHover: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B300, ")"),
-    backgroundCheckedActive: "var(--ds-background-brand-bold-pressed, ".concat(_colors.B50, ")"),
+    backgroundChecked: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
+    backgroundCheckedHover: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")"),
+    backgroundCheckedActive: "var(--ds-background-selected-bold-pressed, ".concat(_colors.B50, ")"),
     backgroundDisabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
     dotChecked: "var(--ds-icon-inverse, ".concat(_colors.N10, ")"),
     dotDisabled: "var(--ds-icon-disabled, ".concat(_colors.N70, ")"),
@@ -27,9 +27,9 @@ var radioThemeColors = {
     background: "var(--ds-background-input, ".concat(_colors.DN10, ")"),
     backgroundHover: "var(--ds-background-input-hovered, ".concat(_colors.DN30, ")"),
     backgroundActive: "var(--ds-background-input-pressed, ".concat(_colors.B200, ")"),
-    backgroundChecked: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
-    backgroundCheckedHover: "var(--ds-background-brand-bold-hovered, ".concat(_colors.B75, ")"),
-    backgroundCheckedActive: "var(--ds-background-brand-bold-pressed, ".concat(_colors.B200, ")"),
+    backgroundChecked: "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
+    backgroundCheckedHover: "var(--ds-background-selected-bold-hovered, ".concat(_colors.B75, ")"),
+    backgroundCheckedActive: "var(--ds-background-selected-bold-pressed, ".concat(_colors.B200, ")"),
     backgroundDisabled: "var(--ds-background-disabled, ".concat(_colors.DN10, ")"),
     dotChecked: "var(--ds-icon-inverse, ".concat(_colors.DN10, ")"),
     dotDisabled: "var(--ds-icon-disabled, ".concat(_colors.DN90, ")"),

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/radio",
-	"version": "5.6.2",
+	"version": "5.6.3",
 	"sideEffects": false
 }

package/dist/es2019/radio.js

@@ -10,7 +10,7 @@ import GlobalTheme from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import getRadioCustomProperties from './styles';
 const packageName = "@atlaskit/radio";
-const packageVersion = "5.6.2";
+const packageVersion = "5.6.3";
 const fontFamily = getFontFamily();
 const noop = __noop;
 const labelPaddingStyles = css({
@@ -152,10 +152,7 @@ const RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
     // eslint-disable-next-line jsx-a11y/label-has-associated-control,jsx-a11y/label-has-for
     jsx("label", {
       "data-testid": testId && `${testId}--radio-label`,
-      "data-disabled": isDisabled ? 'true' : undefined
-      // TODO these will no longer be dynamic styles when legacy theming removed
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-      ,
+      "data-disabled": isDisabled ? 'true' : undefined,
       css: [labelStyles, mode === 'light' ? lightLabelStyles : darkLabelStyles]
     }, jsx("input", _extends({}, rest, {
       "aria-label": ariaLabel,
@@ -172,7 +169,7 @@ const RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
       ,
       "data-invalid": isInvalid ? 'true' : undefined
       // TODO radioCustomProperties can be defined at top of file when legacy theming removed
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
       css: [radioStyles, radioCustomProperties],
       ref: ref

package/dist/es2019/styles.js

@@ -5,9 +5,9 @@ const radioThemeColors = {
     background: `var(--ds-background-input, ${N10})`,
     backgroundHover: `var(--ds-background-input-hovered, ${N30})`,
     backgroundActive: `var(--ds-background-input-pressed, ${N30})`,
-    backgroundChecked: `var(--ds-background-brand-bold, ${B400})`,
-    backgroundCheckedHover: `var(--ds-background-brand-bold-hovered, ${B300})`,
-    backgroundCheckedActive: `var(--ds-background-brand-bold-pressed, ${B50})`,
+    backgroundChecked: `var(--ds-background-selected-bold, ${B400})`,
+    backgroundCheckedHover: `var(--ds-background-selected-bold-hovered, ${B300})`,
+    backgroundCheckedActive: `var(--ds-background-selected-bold-pressed, ${B50})`,
     backgroundDisabled: `var(--ds-background-disabled, ${N20})`,
     dotChecked: `var(--ds-icon-inverse, ${N10})`,
     dotDisabled: `var(--ds-icon-disabled, ${N70})`,
@@ -21,9 +21,9 @@ const radioThemeColors = {
     background: `var(--ds-background-input, ${DN10})`,
     backgroundHover: `var(--ds-background-input-hovered, ${DN30})`,
     backgroundActive: `var(--ds-background-input-pressed, ${B200})`,
-    backgroundChecked: `var(--ds-background-brand-bold, ${B400})`,
-    backgroundCheckedHover: `var(--ds-background-brand-bold-hovered, ${B75})`,
-    backgroundCheckedActive: `var(--ds-background-brand-bold-pressed, ${B200})`,
+    backgroundChecked: `var(--ds-background-selected-bold, ${B400})`,
+    backgroundCheckedHover: `var(--ds-background-selected-bold-hovered, ${B75})`,
+    backgroundCheckedActive: `var(--ds-background-selected-bold-pressed, ${B200})`,
     backgroundDisabled: `var(--ds-background-disabled, ${DN10})`,
     dotChecked: `var(--ds-icon-inverse, ${DN10})`,
     dotDisabled: `var(--ds-icon-disabled, ${DN90})`,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/radio",
-	"version": "5.6.2",
+	"version": "5.6.3",
 	"sideEffects": false
 }

package/dist/esm/radio.js

@@ -12,7 +12,7 @@ import GlobalTheme from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import getRadioCustomProperties from './styles';
 var packageName = "@atlaskit/radio";
-var packageVersion = "5.6.2";
+var packageVersion = "5.6.3";
 var fontFamily = getFontFamily();
 var noop = __noop;
 var labelPaddingStyles = css({
@@ -157,10 +157,7 @@ var RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
     // eslint-disable-next-line jsx-a11y/label-has-associated-control,jsx-a11y/label-has-for
     jsx("label", {
       "data-testid": testId && "".concat(testId, "--radio-label"),
-      "data-disabled": isDisabled ? 'true' : undefined
-      // TODO these will no longer be dynamic styles when legacy theming removed
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-      ,
+      "data-disabled": isDisabled ? 'true' : undefined,
       css: [labelStyles, mode === 'light' ? lightLabelStyles : darkLabelStyles]
     }, jsx("input", _extends({}, rest, {
       "aria-label": ariaLabel,
@@ -177,7 +174,7 @@ var RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
       ,
       "data-invalid": isInvalid ? 'true' : undefined
       // TODO radioCustomProperties can be defined at top of file when legacy theming removed
-      // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
       css: [radioStyles, radioCustomProperties],
       ref: ref

package/dist/esm/styles.js

@@ -5,9 +5,9 @@ var radioThemeColors = {
     background: "var(--ds-background-input, ".concat(N10, ")"),
     backgroundHover: "var(--ds-background-input-hovered, ".concat(N30, ")"),
     backgroundActive: "var(--ds-background-input-pressed, ".concat(N30, ")"),
-    backgroundChecked: "var(--ds-background-brand-bold, ".concat(B400, ")"),
-    backgroundCheckedHover: "var(--ds-background-brand-bold-hovered, ".concat(B300, ")"),
-    backgroundCheckedActive: "var(--ds-background-brand-bold-pressed, ".concat(B50, ")"),
+    backgroundChecked: "var(--ds-background-selected-bold, ".concat(B400, ")"),
+    backgroundCheckedHover: "var(--ds-background-selected-bold-hovered, ".concat(B300, ")"),
+    backgroundCheckedActive: "var(--ds-background-selected-bold-pressed, ".concat(B50, ")"),
     backgroundDisabled: "var(--ds-background-disabled, ".concat(N20, ")"),
     dotChecked: "var(--ds-icon-inverse, ".concat(N10, ")"),
     dotDisabled: "var(--ds-icon-disabled, ".concat(N70, ")"),
@@ -21,9 +21,9 @@ var radioThemeColors = {
     background: "var(--ds-background-input, ".concat(DN10, ")"),
     backgroundHover: "var(--ds-background-input-hovered, ".concat(DN30, ")"),
     backgroundActive: "var(--ds-background-input-pressed, ".concat(B200, ")"),
-    backgroundChecked: "var(--ds-background-brand-bold, ".concat(B400, ")"),
-    backgroundCheckedHover: "var(--ds-background-brand-bold-hovered, ".concat(B75, ")"),
-    backgroundCheckedActive: "var(--ds-background-brand-bold-pressed, ".concat(B200, ")"),
+    backgroundChecked: "var(--ds-background-selected-bold, ".concat(B400, ")"),
+    backgroundCheckedHover: "var(--ds-background-selected-bold-hovered, ".concat(B75, ")"),
+    backgroundCheckedActive: "var(--ds-background-selected-bold-pressed, ".concat(B200, ")"),
     backgroundDisabled: "var(--ds-background-disabled, ".concat(DN10, ")"),
     dotChecked: "var(--ds-icon-inverse, ".concat(DN10, ")"),
     dotDisabled: "var(--ds-icon-disabled, ".concat(DN90, ")"),

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/radio",
-	"version": "5.6.2",
+	"version": "5.6.3",
 	"sideEffects": false
 }

package/dist/types/styles.d.ts

@@ -2,9 +2,9 @@ import { ThemeModes } from '@atlaskit/theme/types';
 export default function getRadioCustomProperties(mode: ThemeModes): {
     '--local-background': "var(--ds-background-input)";
     '--local-background-active': "var(--ds-background-input-pressed)";
-    '--local-background-checked': "var(--ds-background-brand-bold)";
-    '--local-background-checked-active': "var(--ds-background-brand-bold-pressed)";
-    '--local-background-checked-hover': "var(--ds-background-brand-bold-hovered)";
+    '--local-background-checked': "var(--ds-background-selected-bold)";
+    '--local-background-checked-active': "var(--ds-background-selected-bold-pressed)";
+    '--local-background-checked-hover': "var(--ds-background-selected-bold-hovered)";
     '--local-background-disabled': "var(--ds-background-disabled)";
     '--local-background-hover': "var(--ds-background-input-hovered)";
     '--local-border': "var(--ds-border-input)";

package/dist/types-ts4.5/styles.d.ts

@@ -2,9 +2,9 @@ import { ThemeModes } from '@atlaskit/theme/types';
 export default function getRadioCustomProperties(mode: ThemeModes): {
     '--local-background': "var(--ds-background-input)";
     '--local-background-active': "var(--ds-background-input-pressed)";
-    '--local-background-checked': "var(--ds-background-brand-bold)";
-    '--local-background-checked-active': "var(--ds-background-brand-bold-pressed)";
-    '--local-background-checked-hover': "var(--ds-background-brand-bold-hovered)";
+    '--local-background-checked': "var(--ds-background-selected-bold)";
+    '--local-background-checked-active': "var(--ds-background-selected-bold-pressed)";
+    '--local-background-checked-hover': "var(--ds-background-selected-bold-hovered)";
     '--local-background-disabled': "var(--ds-background-disabled)";
     '--local-background-hover': "var(--ds-background-input-hovered)";
     '--local-border': "var(--ds-border-input)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/radio",
-  "version": "5.6.2",
+  "version": "5.6.3",
   "description": "A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -44,7 +44,7 @@
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },