@atlaskit/radio 5.3.2 → 5.3.6

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/radio
 
+## 5.3.6
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- Updated dependencies
+
+## 5.3.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.3.4
+
+### Patch Changes
+
+- [`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.
+- Updated dependencies
+
+## 5.3.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.3.2
 
 ### Patch Changes

package/dist/cjs/Radio.js

@@ -23,13 +23,11 @@ var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _styles = _interopRequireDefault(require("./styles"));
 
-/** @jsx jsx */
+var _excluded = ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "mode", "name", "onChange", "value", "testId", "analyticsContext"];
 var packageName = "@atlaskit/radio";
-var packageVersion = "5.3.2";
+var packageVersion = "5.3.6";
 var fontFamily = (0, _constants.fontFamily)();
 
 var noop = function noop() {};
@@ -45,15 +43,15 @@ var labelStyles = (0, _core.css)({
   fontFamily: fontFamily,
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
   '&[data-disabled]': {
-    color: (0, _tokens.token)('color.text.disabled', _colors.N80),
+    color: "var(--ds-text-disabled, ".concat(_colors.N80, ")"),
     cursor: 'not-allowed'
   }
 });
 var lightLabelStyles = (0, _core.css)({
-  color: (0, _tokens.token)('color.text.highEmphasis', _colors.N900)
+  color: "var(--ds-text, ".concat(_colors.N900, ")")
 });
 var darkLabelStyles = (0, _core.css)({
-  color: (0, _tokens.token)('color.text.highEmphasis', _colors.DN600)
+  color: "var(--ds-text, ".concat(_colors.DN600, ")")
 });
 var radioStyles = (0, _core.css)({
   display: 'flex',
@@ -165,7 +163,7 @@ var RadioWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, re
       value = props.value,
       testId = props.testId,
       analyticsContext = props.analyticsContext,
-      rest = (0, _objectWithoutProperties2.default)(props, ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "mode", "name", "onChange", "value", "testId", "analyticsContext"]);
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var onChangeAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)({
     fn: onChange,
     action: 'changed',

package/dist/cjs/index.js

@@ -5,16 +5,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "RadioGroup", {
+Object.defineProperty(exports, "Radio", {
   enumerable: true,
   get: function get() {
-    return _RadioGroup.default;
+    return _Radio.default;
   }
 });
-Object.defineProperty(exports, "Radio", {
+Object.defineProperty(exports, "RadioGroup", {
   enumerable: true,
   get: function get() {
-    return _Radio.default;
+    return _RadioGroup.default;
   }
 });
 

package/dist/cjs/styles.js

@@ -7,40 +7,38 @@ exports.default = getRadioCustomProperties;
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var radioThemeColors = {
   light: {
-    background: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', _colors.N10),
-    backgroundHover: (0, _tokens.token)('color.background.default', _colors.N30),
-    backgroundActive: (0, _tokens.token)('color.background.subtleBorderedNeutral.pressed', _colors.N30),
-    backgroundChecked: (0, _tokens.token)('color.background.boldBrand.resting', _colors.B400),
-    backgroundCheckedHover: (0, _tokens.token)('color.background.boldBrand.hover', _colors.B300),
-    backgroundCheckedActive: (0, _tokens.token)('color.background.boldBrand.pressed', _colors.B50),
-    backgroundDisabled: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', _colors.N20),
-    dotChecked: (0, _tokens.token)('color.text.onBold', _colors.N10),
-    dotDisabled: (0, _tokens.token)('color.text.disabled', _colors.N70),
-    dotActive: (0, _tokens.token)('color.text.onBold', _colors.B400),
-    border: (0, _tokens.token)('color.border.neutral', _colors.N40),
-    borderHover: (0, _tokens.token)('color.border.neutral', _colors.N40),
-    borderDisabled: (0, _tokens.token)('color.background.disabled', _colors.N20),
-    borderFocus: (0, _tokens.token)('color.border.focus', _colors.B100)
+    background: "var(--ds-background-input, ".concat(_colors.N10, ")"),
+    backgroundHover: "var(--ds-surface, ".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, ")"),
+    backgroundDisabled: "var(--ds-background-input, ".concat(_colors.N20, ")"),
+    dotChecked: "var(--ds-text-inverse, ".concat(_colors.N10, ")"),
+    dotDisabled: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
+    dotActive: "var(--ds-text-inverse, ".concat(_colors.B400, ")"),
+    border: "var(--ds-border, ".concat(_colors.N40, ")"),
+    borderHover: "var(--ds-border, ".concat(_colors.N40, ")"),
+    borderDisabled: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
+    borderFocus: "var(--ds-border-focused, ".concat(_colors.B100, ")")
   },
   dark: {
-    background: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', _colors.DN10),
-    backgroundHover: (0, _tokens.token)('color.background.default', _colors.DN30),
-    backgroundActive: (0, _tokens.token)('color.background.subtleBorderedNeutral.pressed', _colors.B200),
-    backgroundChecked: (0, _tokens.token)('color.background.boldBrand.resting', _colors.B400),
-    backgroundCheckedHover: (0, _tokens.token)('color.background.boldBrand.hover', _colors.B75),
-    backgroundCheckedActive: (0, _tokens.token)('color.background.boldBrand.pressed', _colors.B200),
-    backgroundDisabled: (0, _tokens.token)('color.background.subtleBorderedNeutral.resting', _colors.DN10),
-    dotChecked: (0, _tokens.token)('color.text.onBold', _colors.DN10),
-    dotDisabled: (0, _tokens.token)('color.text.disabled', _colors.DN90),
-    dotActive: (0, _tokens.token)('color.text.onBold', _colors.DN10),
-    border: (0, _tokens.token)('color.border.neutral', _colors.DN80),
-    borderHover: (0, _tokens.token)('color.border.neutral', _colors.DN200),
-    borderDisabled: (0, _tokens.token)('color.background.disabled', _colors.DN10),
-    borderFocus: (0, _tokens.token)('color.border.focus', _colors.B75)
+    background: "var(--ds-background-input, ".concat(_colors.DN10, ")"),
+    backgroundHover: "var(--ds-surface, ".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, ")"),
+    backgroundDisabled: "var(--ds-background-input, ".concat(_colors.DN10, ")"),
+    dotChecked: "var(--ds-text-inverse, ".concat(_colors.DN10, ")"),
+    dotDisabled: "var(--ds-text-disabled, ".concat(_colors.DN90, ")"),
+    dotActive: "var(--ds-text-inverse, ".concat(_colors.DN10, ")"),
+    border: "var(--ds-border, ".concat(_colors.DN80, ")"),
+    borderHover: "var(--ds-border, ".concat(_colors.DN200, ")"),
+    borderDisabled: "var(--ds-background-disabled, ".concat(_colors.DN10, ")"),
+    borderFocus: "var(--ds-border-focused, ".concat(_colors.B75, ")")
   }
 };
 
@@ -61,6 +59,6 @@ function getRadioCustomProperties(mode) {
     '--local-dot-active': radioColors.dotActive,
     '--local-dot-checked': radioColors.dotChecked,
     '--local-dot-disabled': radioColors.dotDisabled,
-    '--local-invalid': (0, _tokens.token)('color.iconBorder.danger', _colors.R300)
+    '--local-invalid': "var(--ds-icon-danger, ".concat(_colors.R300, ")")
   };
 }

package/dist/cjs/version.json

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

package/dist/es2019/Radio.js

@@ -7,10 +7,9 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatfor
 import { DN600, N80, N900 } from '@atlaskit/theme/colors';
 import GlobalTheme from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import getRadioCustomProperties from './styles';
 const packageName = "@atlaskit/radio";
-const packageVersion = "5.3.2";
+const packageVersion = "5.3.6";
 const fontFamily = getFontFamily();
 
 const noop = () => {};
@@ -26,15 +25,15 @@ const labelStyles = css({
   fontFamily: fontFamily,
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
   '&[data-disabled]': {
-    color: token('color.text.disabled', N80),
+    color: `var(--ds-text-disabled, ${N80})`,
     cursor: 'not-allowed'
   }
 });
 const lightLabelStyles = css({
-  color: token('color.text.highEmphasis', N900)
+  color: `var(--ds-text, ${N900})`
 });
 const darkLabelStyles = css({
-  color: token('color.text.highEmphasis', DN600)
+  color: `var(--ds-text, ${DN600})`
 });
 const radioStyles = css({
   display: 'flex',

package/dist/es2019/styles.js

@@ -1,37 +1,36 @@
 import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 const radioThemeColors = {
   light: {
-    background: token('color.background.subtleBorderedNeutral.resting', N10),
-    backgroundHover: token('color.background.default', N30),
-    backgroundActive: token('color.background.subtleBorderedNeutral.pressed', N30),
-    backgroundChecked: token('color.background.boldBrand.resting', B400),
-    backgroundCheckedHover: token('color.background.boldBrand.hover', B300),
-    backgroundCheckedActive: token('color.background.boldBrand.pressed', B50),
-    backgroundDisabled: token('color.background.subtleBorderedNeutral.resting', N20),
-    dotChecked: token('color.text.onBold', N10),
-    dotDisabled: token('color.text.disabled', N70),
-    dotActive: token('color.text.onBold', B400),
-    border: token('color.border.neutral', N40),
-    borderHover: token('color.border.neutral', N40),
-    borderDisabled: token('color.background.disabled', N20),
-    borderFocus: token('color.border.focus', B100)
+    background: `var(--ds-background-input, ${N10})`,
+    backgroundHover: `var(--ds-surface, ${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})`,
+    backgroundDisabled: `var(--ds-background-input, ${N20})`,
+    dotChecked: `var(--ds-text-inverse, ${N10})`,
+    dotDisabled: `var(--ds-text-disabled, ${N70})`,
+    dotActive: `var(--ds-text-inverse, ${B400})`,
+    border: `var(--ds-border, ${N40})`,
+    borderHover: `var(--ds-border, ${N40})`,
+    borderDisabled: `var(--ds-background-disabled, ${N20})`,
+    borderFocus: `var(--ds-border-focused, ${B100})`
   },
   dark: {
-    background: token('color.background.subtleBorderedNeutral.resting', DN10),
-    backgroundHover: token('color.background.default', DN30),
-    backgroundActive: token('color.background.subtleBorderedNeutral.pressed', B200),
-    backgroundChecked: token('color.background.boldBrand.resting', B400),
-    backgroundCheckedHover: token('color.background.boldBrand.hover', B75),
-    backgroundCheckedActive: token('color.background.boldBrand.pressed', B200),
-    backgroundDisabled: token('color.background.subtleBorderedNeutral.resting', DN10),
-    dotChecked: token('color.text.onBold', DN10),
-    dotDisabled: token('color.text.disabled', DN90),
-    dotActive: token('color.text.onBold', DN10),
-    border: token('color.border.neutral', DN80),
-    borderHover: token('color.border.neutral', DN200),
-    borderDisabled: token('color.background.disabled', DN10),
-    borderFocus: token('color.border.focus', B75)
+    background: `var(--ds-background-input, ${DN10})`,
+    backgroundHover: `var(--ds-surface, ${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})`,
+    backgroundDisabled: `var(--ds-background-input, ${DN10})`,
+    dotChecked: `var(--ds-text-inverse, ${DN10})`,
+    dotDisabled: `var(--ds-text-disabled, ${DN90})`,
+    dotActive: `var(--ds-text-inverse, ${DN10})`,
+    border: `var(--ds-border, ${DN80})`,
+    borderHover: `var(--ds-border, ${DN200})`,
+    borderDisabled: `var(--ds-background-disabled, ${DN10})`,
+    borderFocus: `var(--ds-border-focused, ${B75})`
   }
 };
 export default function getRadioCustomProperties(mode) {
@@ -51,6 +50,6 @@ export default function getRadioCustomProperties(mode) {
     '--local-dot-active': radioColors.dotActive,
     '--local-dot-checked': radioColors.dotChecked,
     '--local-dot-disabled': radioColors.dotDisabled,
-    '--local-invalid': token('color.iconBorder.danger', R300)
+    '--local-invalid': `var(--ds-icon-danger, ${R300})`
   };
 }

package/dist/es2019/version.json

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

package/dist/esm/Radio.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "mode", "name", "onChange", "value", "testId", "analyticsContext"];
 
 /** @jsx jsx */
 import { forwardRef, memo, useMemo } from 'react';
@@ -8,10 +9,9 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatfor
 import { DN600, N80, N900 } from '@atlaskit/theme/colors';
 import GlobalTheme from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import getRadioCustomProperties from './styles';
 var packageName = "@atlaskit/radio";
-var packageVersion = "5.3.2";
+var packageVersion = "5.3.6";
 var fontFamily = getFontFamily();
 
 var noop = function noop() {};
@@ -27,15 +27,15 @@ var labelStyles = css({
   fontFamily: fontFamily,
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
   '&[data-disabled]': {
-    color: token('color.text.disabled', N80),
+    color: "var(--ds-text-disabled, ".concat(N80, ")"),
     cursor: 'not-allowed'
   }
 });
 var lightLabelStyles = css({
-  color: token('color.text.highEmphasis', N900)
+  color: "var(--ds-text, ".concat(N900, ")")
 });
 var darkLabelStyles = css({
-  color: token('color.text.highEmphasis', DN600)
+  color: "var(--ds-text, ".concat(DN600, ")")
 });
 var radioStyles = css({
   display: 'flex',
@@ -147,7 +147,7 @@ var RadioWithMode = /*#__PURE__*/forwardRef(function Radio(props, ref) {
       value = props.value,
       testId = props.testId,
       analyticsContext = props.analyticsContext,
-      rest = _objectWithoutProperties(props, ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "mode", "name", "onChange", "value", "testId", "analyticsContext"]);
+      rest = _objectWithoutProperties(props, _excluded);
 
   var onChangeAnalytics = usePlatformLeafEventHandler({
     fn: onChange,

package/dist/esm/styles.js

@@ -1,37 +1,36 @@
 import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 var radioThemeColors = {
   light: {
-    background: token('color.background.subtleBorderedNeutral.resting', N10),
-    backgroundHover: token('color.background.default', N30),
-    backgroundActive: token('color.background.subtleBorderedNeutral.pressed', N30),
-    backgroundChecked: token('color.background.boldBrand.resting', B400),
-    backgroundCheckedHover: token('color.background.boldBrand.hover', B300),
-    backgroundCheckedActive: token('color.background.boldBrand.pressed', B50),
-    backgroundDisabled: token('color.background.subtleBorderedNeutral.resting', N20),
-    dotChecked: token('color.text.onBold', N10),
-    dotDisabled: token('color.text.disabled', N70),
-    dotActive: token('color.text.onBold', B400),
-    border: token('color.border.neutral', N40),
-    borderHover: token('color.border.neutral', N40),
-    borderDisabled: token('color.background.disabled', N20),
-    borderFocus: token('color.border.focus', B100)
+    background: "var(--ds-background-input, ".concat(N10, ")"),
+    backgroundHover: "var(--ds-surface, ".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, ")"),
+    backgroundDisabled: "var(--ds-background-input, ".concat(N20, ")"),
+    dotChecked: "var(--ds-text-inverse, ".concat(N10, ")"),
+    dotDisabled: "var(--ds-text-disabled, ".concat(N70, ")"),
+    dotActive: "var(--ds-text-inverse, ".concat(B400, ")"),
+    border: "var(--ds-border, ".concat(N40, ")"),
+    borderHover: "var(--ds-border, ".concat(N40, ")"),
+    borderDisabled: "var(--ds-background-disabled, ".concat(N20, ")"),
+    borderFocus: "var(--ds-border-focused, ".concat(B100, ")")
   },
   dark: {
-    background: token('color.background.subtleBorderedNeutral.resting', DN10),
-    backgroundHover: token('color.background.default', DN30),
-    backgroundActive: token('color.background.subtleBorderedNeutral.pressed', B200),
-    backgroundChecked: token('color.background.boldBrand.resting', B400),
-    backgroundCheckedHover: token('color.background.boldBrand.hover', B75),
-    backgroundCheckedActive: token('color.background.boldBrand.pressed', B200),
-    backgroundDisabled: token('color.background.subtleBorderedNeutral.resting', DN10),
-    dotChecked: token('color.text.onBold', DN10),
-    dotDisabled: token('color.text.disabled', DN90),
-    dotActive: token('color.text.onBold', DN10),
-    border: token('color.border.neutral', DN80),
-    borderHover: token('color.border.neutral', DN200),
-    borderDisabled: token('color.background.disabled', DN10),
-    borderFocus: token('color.border.focus', B75)
+    background: "var(--ds-background-input, ".concat(DN10, ")"),
+    backgroundHover: "var(--ds-surface, ".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, ")"),
+    backgroundDisabled: "var(--ds-background-input, ".concat(DN10, ")"),
+    dotChecked: "var(--ds-text-inverse, ".concat(DN10, ")"),
+    dotDisabled: "var(--ds-text-disabled, ".concat(DN90, ")"),
+    dotActive: "var(--ds-text-inverse, ".concat(DN10, ")"),
+    border: "var(--ds-border, ".concat(DN80, ")"),
+    borderHover: "var(--ds-border, ".concat(DN200, ")"),
+    borderDisabled: "var(--ds-background-disabled, ".concat(DN10, ")"),
+    borderFocus: "var(--ds-border-focused, ".concat(B75, ")")
   }
 };
 export default function getRadioCustomProperties(mode) {
@@ -51,6 +50,6 @@ export default function getRadioCustomProperties(mode) {
     '--local-dot-active': radioColors.dotActive,
     '--local-dot-checked': radioColors.dotChecked,
     '--local-dot-disabled': radioColors.dotDisabled,
-    '--local-invalid': token('color.iconBorder.danger', R300)
+    '--local-invalid': "var(--ds-icon-danger, ".concat(R300, ")")
   };
 }

package/dist/esm/version.json

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

package/dist/types/styles.d.ts

@@ -1,18 +1,18 @@
 import { ThemeModes } from '@atlaskit/theme/types';
 export default function getRadioCustomProperties(mode: ThemeModes): {
-    '--local-background': "var(--background-subtleBorderedNeutral-resting)";
-    '--local-background-active': "var(--background-subtleBorderedNeutral-pressed)";
-    '--local-background-checked': "var(--background-boldBrand-resting)";
-    '--local-background-checked-active': "var(--background-boldBrand-pressed)";
-    '--local-background-checked-hover': "var(--background-boldBrand-hover)";
-    '--local-background-disabled': "var(--background-subtleBorderedNeutral-resting)";
-    '--local-background-hover': "var(--background-default)";
-    '--local-border': "var(--border-neutral)";
-    '--local-border-disabled': "var(--background-disabled)";
-    '--local-border-hover': "var(--border-neutral)";
-    '--local-border-focus': "var(--border-focus)";
-    '--local-dot-active': "var(--text-onBold)";
-    '--local-dot-checked': "var(--text-onBold)";
-    '--local-dot-disabled': "var(--text-disabled)";
-    '--local-invalid': "var(--iconBorder-danger)";
+    '--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-disabled': "var(--ds-background-input)";
+    '--local-background-hover': "var(--ds-surface)";
+    '--local-border': "var(--ds-border)";
+    '--local-border-disabled': "var(--ds-background-disabled)";
+    '--local-border-hover': "var(--ds-border)";
+    '--local-border-focus': "var(--ds-border-focused)";
+    '--local-dot-active': "var(--ds-text-inverse)";
+    '--local-dot-checked': "var(--ds-text-inverse)";
+    '--local-dot-disabled': "var(--ds-text-disabled)";
+    '--local-invalid': "var(--ds-icon-danger)";
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/radio",
-  "version": "5.3.2",
+  "version": "5.3.6",
   "description": "A radio input allows people to select only one option from a number of choices. Radio is generally displayed in a radio group.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -16,7 +16,6 @@
   "atlaskit:src": "src/index.ts",
   "atlassian": {
     "team": "Design System Team",
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Radio"
@@ -30,8 +29,8 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.2.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.6.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -39,7 +38,6 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/build-utils": "*",
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/checkbox": "^12.3.0",
     "@atlaskit/docs": "^9.0.0",
@@ -66,7 +64,10 @@
     "@repo/internal": {
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
-      "styling": "emotion",
+      "styling": [
+        "static",
+        "emotion"
+      ],
       "theming": "tokens",
       "deprecation": "no-deprecated-imports"
     }