@atlaskit/eslint-plugin-design-system 13.20.1 → 13.21.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 13.21.0
+
+### Minor Changes
+
+- [`8a95abe487d79`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8a95abe487d79) - -
+  Added `use-tokens-shape` rule to enforce borderRadius and borderWidth values.
+  - Updated `ensure-design-token-usage` rule to apply correct shape tokens. Note this rule should
+    not be used for shape - instead use the `use-tokens-shape` rule instead.
+
 ## 13.20.1
 
 ### Patch Changes

package/README.md

@@ -112,6 +112,7 @@ module.exports = {
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-primitives-text/README.md">use-primitives-text</a>                                                 | Encourage the usage of text components.                                                                                                                                                                                                                                                                             |             | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-should-render-to-parent/README.md">use-should-render-to-parent</a>                                 | Encourages makers to use the `shouldRenderToParent` where possible in Atlassian Design System `Popup` and `DropdownMenu` components.                                                                                                                                                                                | Yes         |         | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-tag-group-label/README.md">use-tag-group-label</a>                                                 | Ensures tag groups are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                                   | Yes         |         | Yes         |
+| <a href="./packages/design-system/eslint-plugin/src/rules/use-tokens-shape/README.md">use-tokens-shape</a>                                                       | Enforces usage of shape design tokens rather than hard-coded values.                                                                                                                                                                                                                                                |             | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-tokens-space/README.md">use-tokens-space</a>                                                       | Enforces usage of space design tokens rather than hard-coded values.                                                                                                                                                                                                                                                |             | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-tokens-typography/README.md">use-tokens-typography</a>                                             | Enforces usage of design tokens for typography properties rather than hard-coded values.                                                                                                                                                                                                                            |             | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-visually-hidden/README.md">use-visually-hidden</a>                                                 | Enforce usage of the visually hidden component.                                                                                                                                                                                                                                                                     | Yes         | Yes     |             |

package/dist/cjs/presets/all-flat.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e075ab709ebd382d6f5e39fd78de9d6d>>
+ * @codegen <<SignedSource::c8428e53319286fb2b37a107968f2be8>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -75,6 +75,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-should-render-to-parent': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',
+    '@atlaskit/design-system/use-tokens-shape': 'error',
     '@atlaskit/design-system/use-tokens-space': 'error',
     '@atlaskit/design-system/use-tokens-typography': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'

package/dist/cjs/presets/all.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d78f5649534c2e153e3ce48063649a8a>>
+ * @codegen <<SignedSource::a739ba6d63b1aa39d462906ee1876ce6>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -74,6 +74,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-should-render-to-parent': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',
+    '@atlaskit/design-system/use-tokens-shape': 'error',
     '@atlaskit/design-system/use-tokens-space': 'error',
     '@atlaskit/design-system/use-tokens-typography': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'

package/dist/cjs/rules/ensure-design-token-usage/shape.js

@@ -11,19 +11,15 @@ exports.isShapeProperty = isShapeProperty;
 exports.radiusValueToToken = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _tokensRaw = require("@atlaskit/tokens/tokens-raw");
-var shapeProperties = ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius', 'borderRadius'];
+var shapeProperties = ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius', 'borderRadius', 'borderStartStartRadius', 'borderStartEndRadius', 'borderEndStartRadius', 'borderEndEndRadius'];
 var borderSizeProperties = ['borderWidth', 'outlineWidth', 'borderRightWidth', 'borderLeftWidth', 'borderTopWidth', 'borderBottomWidth', 'borderInlineWidth', 'borderBlockWidth'];
 var radiusValueToToken = exports.radiusValueToToken = Object.fromEntries(_tokensRaw.shape.filter(function (t) {
-  return t.name.startsWith('border.radius');
-})
-// we prefer using the default (border.radius) over its aliases
-.filter(function (t) {
-  return !t.name.startsWith('border.radius.100');
+  return t.name.startsWith('radius');
 }).map(function (t) {
   return [t.value, t.cleanName];
-}).concat([['3px', 'border.radius']]) // add in an extra entry to resolve 3px to border.radius (normally 4px)
-.concat([['50%', 'border.radius.circle']]) // add in an extra entry to resolve 50% to border.radius.circle (normally 2002rem)
-);
+})
+// add in extra entries to resolve 3px, 50%, and 100% to tokens
+.concat([['3px', 'radius.small'], ['50%', 'radius.full'], ['100%', 'radius.full']]));
 var borderWidthValueToToken = exports.borderWidthValueToToken = Object.fromEntries(_tokensRaw.shape.filter(function (t) {
   return t.name.startsWith('border.width');
 }).map(function (t) {

package/dist/cjs/rules/index.codegen.js

@@ -68,12 +68,13 @@ var _usePrimitives = _interopRequireDefault(require("./use-primitives"));
 var _usePrimitivesText = _interopRequireDefault(require("./use-primitives-text"));
 var _useShouldRenderToParent = _interopRequireDefault(require("./use-should-render-to-parent"));
 var _useTagGroupLabel = _interopRequireDefault(require("./use-tag-group-label"));
+var _useTokensShape = _interopRequireDefault(require("./use-tokens-shape"));
 var _useTokensSpace = _interopRequireDefault(require("./use-tokens-space"));
 var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typography"));
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::53ad66d79f989ce9beb46ee0186685b2>>
+ * @codegen <<SignedSource::5fbd59fcd3fd6cb0602821de4a0a32aa>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -141,6 +142,7 @@ var rules = exports.rules = {
   'use-primitives-text': _usePrimitivesText.default,
   'use-should-render-to-parent': _useShouldRenderToParent.default,
   'use-tag-group-label': _useTagGroupLabel.default,
+  'use-tokens-shape': _useTokensShape.default,
   'use-tokens-space': _useTokensSpace.default,
   'use-tokens-typography': _useTokensTypography.default,
   'use-visually-hidden': _useVisuallyHidden.default

package/dist/cjs/rules/use-tokens-shape/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createRule = require("../utils/create-rule");
+var _transformers = require("./transformers");
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'use-tokens-shape',
+    type: 'problem',
+    fixable: 'code',
+    hasSuggestions: true,
+    docs: {
+      description: 'Enforces usage of shape design tokens rather than hard-coded values.',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      noRawShapeValues: 'The use of shape tokens is preferred over the direct application of border radius and border width properties.'
+    }
+  },
+  create: function create(context) {
+    return {
+      'CallExpression[callee.name="css"] ObjectExpression Property': function CallExpressionCalleeNameCss_ObjectExpression_Property(node) {
+        return _transformers.StyleProperty.lint(node, {
+          context: context
+        });
+      },
+      'CallExpression[callee.name="keyframes"] ObjectExpression Property': function CallExpressionCalleeNameKeyframes_ObjectExpression_Property(node) {
+        return _transformers.StyleProperty.lint(node, {
+          context: context
+        });
+      },
+      'CallExpression[callee.name="cssMap"] ObjectExpression Property': function CallExpressionCalleeNameCssMap_ObjectExpression_Property(node) {
+        return _transformers.StyleProperty.lint(node, {
+          context: context
+        });
+      },
+      'CallExpression[callee.object.name=styled] ObjectExpression Property': function CallExpressionCalleeObjectNameStyled_ObjectExpression_Property(node) {
+        return _transformers.StyleProperty.lint(node, {
+          context: context
+        });
+      },
+      'CallExpression[callee.object.name=styled2] ObjectExpression Property': function CallExpressionCalleeObjectNameStyled2_ObjectExpression_Property(node) {
+        return _transformers.StyleProperty.lint(node, {
+          context: context
+        });
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/cjs/rules/use-tokens-shape/transformers/index.js

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyleProperty = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var ast = _interopRequireWildcard(require("../../../ast-nodes"));
+var _utils = require("../../use-tokens-space/utils");
+var _styleMap = require("./style-map");
+var _supported = _interopRequireDefault(require("./supported"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+var messageId = 'noRawShapeValues';
+var StyleProperty = exports.StyleProperty = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context;
+    // Check whether all criteria needed to make a transformation are met
+    var _StyleProperty$_check = StyleProperty._check(node),
+      success = _StyleProperty$_check.success,
+      ref = _StyleProperty$_check.ref;
+    if (!success) {
+      return;
+    }
+    context.report({
+      node: ref.node.value,
+      messageId: messageId,
+      fix: ref.token ? StyleProperty._fix(ref, context) : undefined
+    });
+  },
+  _check: function _check(node) {
+    if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Property')) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+
+    /**
+     * Currently, we support values like:
+     * ```
+     * {
+     *   borderRadius: '8px', // value.type is Literal
+     *   borderWidth: 2, // value.type is UnaryExpression
+     * }
+     * ```
+     */
+    if (!((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'Literal') || (0, _eslintCodemodUtils.isNodeOfType)(node.value, 'UnaryExpression'))) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+    var _ast$ObjectEntry$getP = ast.ObjectEntry.getProperty(node),
+      property = _ast$ObjectEntry$getP.value;
+
+    // Bail if the property is not `borderRadius`, `borderWidth`, etc
+    if (!property || !_styleMap.styleMap[property]) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+    var value = ast.ObjectEntry.getValue(node);
+
+    // This is mainly useful as a type guard, so the checks after don't have to have duplicate checks for other types.
+    if (!(0, _utils.isStringOrNumber)(value)) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+
+    // ignore CSS vars. See: https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/74844/overview?commentId=6741571
+    if (value.toString().startsWith('var(')) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+
+    // There are valid values to ignore, such as `margin: auto`
+    if (_supported.default.values.ignore.includes(value)) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+
+    // Don't report on stuff like `borderRadius: '3px 8px'`.
+    // We may iterate to handle values like this in future.
+    if (value.toString().includes(' ')) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+    var ref = {
+      node: node,
+      token: _styleMap.styleMap[property][value],
+      fallback: value
+    };
+    return {
+      success: true,
+      ref: ref
+    };
+  },
+  /**
+   * All required validation steps have been taken care of before this
+   * transformer is called, so it just goes ahead providing all necessary fixes
+   */
+  _fix: function _fix(ref, context) {
+    return function (fixer) {
+      var importFix = ast.Root.upsertNamedImportDeclaration({
+        module: '@atlaskit/tokens',
+        specifiers: ['token']
+      }, context, fixer);
+      var tokenCall = "token('".concat(ref.token, "')");
+      var tokenFix = fixer.replaceText(ref.node.value, tokenCall);
+      return [importFix, tokenFix].filter(function (fix) {
+        return Boolean(fix);
+      }); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};

package/dist/cjs/rules/use-tokens-shape/transformers/style-map.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styleMap = void 0;
+var radiusTokenMap = {
+  '2px': 'radius.xsmall',
+  '3px': 'radius.small',
+  '4px': 'radius.small',
+  '6px': 'radius.medium',
+  '8px': 'radius.large',
+  '12px': 'radius.xlarge',
+  '50%': 'radius.full',
+  '100%': 'radius.full',
+  2: 'radius.xsmall',
+  3: 'radius.small',
+  4: 'radius.small',
+  6: 'radius.medium',
+  8: 'radius.large',
+  12: 'radius.xlarge',
+  '0.125rem': 'radius.xsmall',
+  '0.25rem': 'radius.small',
+  '0.375rem': 'radius.medium',
+  '0.5rem': 'radius.large',
+  '0.75rem': 'radius.xlarge'
+};
+var borderWidthTokenMap = {
+  '1px': 'border.width'
+};
+var styleMap = exports.styleMap = {
+  borderRadius: radiusTokenMap,
+  borderTopLeftRadius: radiusTokenMap,
+  borderTopRightRadius: radiusTokenMap,
+  borderBottomRightRadius: radiusTokenMap,
+  borderBottomLeftRadius: radiusTokenMap,
+  borderStartStartRadius: radiusTokenMap,
+  borderStartEndRadius: radiusTokenMap,
+  borderEndStartRadius: radiusTokenMap,
+  borderEndEndRadius: radiusTokenMap,
+  borderWidth: borderWidthTokenMap,
+  borderBottomWidth: borderWidthTokenMap,
+  borderLeftWidth: borderWidthTokenMap,
+  borderRightWidth: borderWidthTokenMap,
+  borderTopWidth: borderWidthTokenMap,
+  borderBlockWidth: borderWidthTokenMap,
+  borderInlineWidth: borderWidthTokenMap,
+  outlineWidth: borderWidthTokenMap
+};

package/dist/cjs/rules/use-tokens-shape/transformers/supported.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var supported = {
+  values: {
+    ignore: ['initial', 'inherit', 'unset', 'revert', 'revert-layer', 'none',
+    // outline-offset can be set to none
+    // Currently the DST opinion is that 0 is valid.
+    0, '0', '0px', '0em', '0rem']
+  }
+};
+var _default = exports.default = supported;

package/dist/es2019/presets/all-flat.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e075ab709ebd382d6f5e39fd78de9d6d>>
+ * @codegen <<SignedSource::c8428e53319286fb2b37a107968f2be8>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -70,6 +70,7 @@ export default {
     '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-should-render-to-parent': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',
+    '@atlaskit/design-system/use-tokens-shape': 'error',
     '@atlaskit/design-system/use-tokens-space': 'error',
     '@atlaskit/design-system/use-tokens-typography': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'

package/dist/es2019/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d78f5649534c2e153e3ce48063649a8a>>
+ * @codegen <<SignedSource::a739ba6d63b1aa39d462906ee1876ce6>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -69,6 +69,7 @@ export default {
     '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-should-render-to-parent': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',
+    '@atlaskit/design-system/use-tokens-shape': 'error',
     '@atlaskit/design-system/use-tokens-space': 'error',
     '@atlaskit/design-system/use-tokens-typography': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'

package/dist/es2019/rules/ensure-design-token-usage/shape.js

@@ -1,14 +1,12 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { shape as shapeTokens } from '@atlaskit/tokens/tokens-raw';
-const shapeProperties = ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius', 'borderRadius'];
+const shapeProperties = ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius', 'borderRadius', 'borderStartStartRadius', 'borderStartEndRadius', 'borderEndStartRadius', 'borderEndEndRadius'];
 const borderSizeProperties = ['borderWidth', 'outlineWidth', 'borderRightWidth', 'borderLeftWidth', 'borderTopWidth', 'borderBottomWidth', 'borderInlineWidth', 'borderBlockWidth'];
-export const radiusValueToToken = Object.fromEntries(shapeTokens.filter(t => t.name.startsWith('border.radius'))
-// we prefer using the default (border.radius) over its aliases
-.filter(t => !t.name.startsWith('border.radius.100')).map(t => {
+export const radiusValueToToken = Object.fromEntries(shapeTokens.filter(t => t.name.startsWith('radius')).map(t => {
   return [t.value, t.cleanName];
-}).concat([['3px', 'border.radius']]) // add in an extra entry to resolve 3px to border.radius (normally 4px)
-.concat([['50%', 'border.radius.circle']]) // add in an extra entry to resolve 50% to border.radius.circle (normally 2002rem)
-);
+})
+// add in extra entries to resolve 3px, 50%, and 100% to tokens
+.concat([['3px', 'radius.small'], ['50%', 'radius.full'], ['100%', 'radius.full']]));
 export const borderWidthValueToToken = Object.fromEntries(shapeTokens.filter(t => t.name.startsWith('border.width')).map(t => [t.value, t.cleanName]).concat([['2px', 'border.width']]));
 export function isRadiusProperty(propertyName) {
   return shapeProperties.includes(propertyName);

package/dist/es2019/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::53ad66d79f989ce9beb46ee0186685b2>>
+ * @codegen <<SignedSource::5fbd59fcd3fd6cb0602821de4a0a32aa>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -66,6 +66,7 @@ import usePrimitives from './use-primitives';
 import usePrimitivesText from './use-primitives-text';
 import useShouldRenderToParent from './use-should-render-to-parent';
 import useTagGroupLabel from './use-tag-group-label';
+import useTokensShape from './use-tokens-shape';
 import useTokensSpace from './use-tokens-space';
 import useTokensTypography from './use-tokens-typography';
 import useVisuallyHidden from './use-visually-hidden';
@@ -133,6 +134,7 @@ export const rules = {
   'use-primitives-text': usePrimitivesText,
   'use-should-render-to-parent': useShouldRenderToParent,
   'use-tag-group-label': useTagGroupLabel,
+  'use-tokens-shape': useTokensShape,
   'use-tokens-space': useTokensSpace,
   'use-tokens-typography': useTokensTypography,
   'use-visually-hidden': useVisuallyHidden

package/dist/es2019/rules/use-tokens-shape/index.js

@@ -0,0 +1,38 @@
+import { createLintRule } from '../utils/create-rule';
+import { StyleProperty } from './transformers';
+const rule = createLintRule({
+  meta: {
+    name: 'use-tokens-shape',
+    type: 'problem',
+    fixable: 'code',
+    hasSuggestions: true,
+    docs: {
+      description: 'Enforces usage of shape design tokens rather than hard-coded values.',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      noRawShapeValues: 'The use of shape tokens is preferred over the direct application of border radius and border width properties.'
+    }
+  },
+  create(context) {
+    return {
+      'CallExpression[callee.name="css"] ObjectExpression Property': node => StyleProperty.lint(node, {
+        context
+      }),
+      'CallExpression[callee.name="keyframes"] ObjectExpression Property': node => StyleProperty.lint(node, {
+        context
+      }),
+      'CallExpression[callee.name="cssMap"] ObjectExpression Property': node => StyleProperty.lint(node, {
+        context
+      }),
+      'CallExpression[callee.object.name=styled] ObjectExpression Property': node => StyleProperty.lint(node, {
+        context
+      }),
+      'CallExpression[callee.object.name=styled2] ObjectExpression Property': node => StyleProperty.lint(node, {
+        context
+      })
+    };
+  }
+});
+export default rule;

package/dist/es2019/rules/use-tokens-shape/transformers/index.js

@@ -0,0 +1,120 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../ast-nodes';
+import { isStringOrNumber } from '../../use-tokens-space/utils';
+import { styleMap } from './style-map';
+import supported from './supported';
+const messageId = 'noRawShapeValues';
+export const StyleProperty = {
+  lint(node, {
+    context
+  }) {
+    // Check whether all criteria needed to make a transformation are met
+    const {
+      success,
+      ref
+    } = StyleProperty._check(node);
+    if (!success) {
+      return;
+    }
+    context.report({
+      node: ref.node.value,
+      messageId,
+      fix: ref.token ? StyleProperty._fix(ref, context) : undefined
+    });
+  },
+  _check(node) {
+    if (!isNodeOfType(node, 'Property')) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+
+    /**
+     * Currently, we support values like:
+     * ```
+     * {
+     *   borderRadius: '8px', // value.type is Literal
+     *   borderWidth: 2, // value.type is UnaryExpression
+     * }
+     * ```
+     */
+    if (!(isNodeOfType(node.value, 'Literal') || isNodeOfType(node.value, 'UnaryExpression'))) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+    const {
+      value: property
+    } = ast.ObjectEntry.getProperty(node);
+
+    // Bail if the property is not `borderRadius`, `borderWidth`, etc
+    if (!property || !styleMap[property]) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+    const value = ast.ObjectEntry.getValue(node);
+
+    // This is mainly useful as a type guard, so the checks after don't have to have duplicate checks for other types.
+    if (!isStringOrNumber(value)) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+
+    // ignore CSS vars. See: https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/74844/overview?commentId=6741571
+    if (value.toString().startsWith('var(')) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+
+    // There are valid values to ignore, such as `margin: auto`
+    if (supported.values.ignore.includes(value)) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+
+    // Don't report on stuff like `borderRadius: '3px 8px'`.
+    // We may iterate to handle values like this in future.
+    if (value.toString().includes(' ')) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+    const ref = {
+      node,
+      token: styleMap[property][value],
+      fallback: value
+    };
+    return {
+      success: true,
+      ref
+    };
+  },
+  /**
+   * All required validation steps have been taken care of before this
+   * transformer is called, so it just goes ahead providing all necessary fixes
+   */
+  _fix(ref, context) {
+    return fixer => {
+      const importFix = ast.Root.upsertNamedImportDeclaration({
+        module: '@atlaskit/tokens',
+        specifiers: ['token']
+      }, context, fixer);
+      const tokenCall = `token('${ref.token}')`;
+      const tokenFix = fixer.replaceText(ref.node.value, tokenCall);
+      return [importFix, tokenFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};

package/dist/es2019/rules/use-tokens-shape/transformers/style-map.js

@@ -0,0 +1,43 @@
+const radiusTokenMap = {
+  '2px': 'radius.xsmall',
+  '3px': 'radius.small',
+  '4px': 'radius.small',
+  '6px': 'radius.medium',
+  '8px': 'radius.large',
+  '12px': 'radius.xlarge',
+  '50%': 'radius.full',
+  '100%': 'radius.full',
+  2: 'radius.xsmall',
+  3: 'radius.small',
+  4: 'radius.small',
+  6: 'radius.medium',
+  8: 'radius.large',
+  12: 'radius.xlarge',
+  '0.125rem': 'radius.xsmall',
+  '0.25rem': 'radius.small',
+  '0.375rem': 'radius.medium',
+  '0.5rem': 'radius.large',
+  '0.75rem': 'radius.xlarge'
+};
+const borderWidthTokenMap = {
+  '1px': 'border.width'
+};
+export const styleMap = {
+  borderRadius: radiusTokenMap,
+  borderTopLeftRadius: radiusTokenMap,
+  borderTopRightRadius: radiusTokenMap,
+  borderBottomRightRadius: radiusTokenMap,
+  borderBottomLeftRadius: radiusTokenMap,
+  borderStartStartRadius: radiusTokenMap,
+  borderStartEndRadius: radiusTokenMap,
+  borderEndStartRadius: radiusTokenMap,
+  borderEndEndRadius: radiusTokenMap,
+  borderWidth: borderWidthTokenMap,
+  borderBottomWidth: borderWidthTokenMap,
+  borderLeftWidth: borderWidthTokenMap,
+  borderRightWidth: borderWidthTokenMap,
+  borderTopWidth: borderWidthTokenMap,
+  borderBlockWidth: borderWidthTokenMap,
+  borderInlineWidth: borderWidthTokenMap,
+  outlineWidth: borderWidthTokenMap
+};

package/dist/es2019/rules/use-tokens-shape/transformers/supported.js

@@ -0,0 +1,9 @@
+const supported = {
+  values: {
+    ignore: ['initial', 'inherit', 'unset', 'revert', 'revert-layer', 'none',
+    // outline-offset can be set to none
+    // Currently the DST opinion is that 0 is valid.
+    0, '0', '0px', '0em', '0rem']
+  }
+};
+export default supported;

package/dist/esm/presets/all-flat.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e075ab709ebd382d6f5e39fd78de9d6d>>
+ * @codegen <<SignedSource::c8428e53319286fb2b37a107968f2be8>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -70,6 +70,7 @@ export default {
     '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-should-render-to-parent': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',
+    '@atlaskit/design-system/use-tokens-shape': 'error',
     '@atlaskit/design-system/use-tokens-space': 'error',
     '@atlaskit/design-system/use-tokens-typography': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'

package/dist/esm/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d78f5649534c2e153e3ce48063649a8a>>
+ * @codegen <<SignedSource::a739ba6d63b1aa39d462906ee1876ce6>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -69,6 +69,7 @@ export default {
     '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-should-render-to-parent': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',
+    '@atlaskit/design-system/use-tokens-shape': 'error',
     '@atlaskit/design-system/use-tokens-space': 'error',
     '@atlaskit/design-system/use-tokens-typography': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'

package/dist/esm/rules/ensure-design-token-usage/shape.js

@@ -1,18 +1,14 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { shape as shapeTokens } from '@atlaskit/tokens/tokens-raw';
-var shapeProperties = ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius', 'borderRadius'];
+var shapeProperties = ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius', 'borderRadius', 'borderStartStartRadius', 'borderStartEndRadius', 'borderEndStartRadius', 'borderEndEndRadius'];
 var borderSizeProperties = ['borderWidth', 'outlineWidth', 'borderRightWidth', 'borderLeftWidth', 'borderTopWidth', 'borderBottomWidth', 'borderInlineWidth', 'borderBlockWidth'];
 export var radiusValueToToken = Object.fromEntries(shapeTokens.filter(function (t) {
-  return t.name.startsWith('border.radius');
-})
-// we prefer using the default (border.radius) over its aliases
-.filter(function (t) {
-  return !t.name.startsWith('border.radius.100');
+  return t.name.startsWith('radius');
 }).map(function (t) {
   return [t.value, t.cleanName];
-}).concat([['3px', 'border.radius']]) // add in an extra entry to resolve 3px to border.radius (normally 4px)
-.concat([['50%', 'border.radius.circle']]) // add in an extra entry to resolve 50% to border.radius.circle (normally 2002rem)
-);
+})
+// add in extra entries to resolve 3px, 50%, and 100% to tokens
+.concat([['3px', 'radius.small'], ['50%', 'radius.full'], ['100%', 'radius.full']]));
 export var borderWidthValueToToken = Object.fromEntries(shapeTokens.filter(function (t) {
   return t.name.startsWith('border.width');
 }).map(function (t) {

package/dist/esm/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::53ad66d79f989ce9beb46ee0186685b2>>
+ * @codegen <<SignedSource::5fbd59fcd3fd6cb0602821de4a0a32aa>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -66,6 +66,7 @@ import usePrimitives from './use-primitives';
 import usePrimitivesText from './use-primitives-text';
 import useShouldRenderToParent from './use-should-render-to-parent';
 import useTagGroupLabel from './use-tag-group-label';
+import useTokensShape from './use-tokens-shape';
 import useTokensSpace from './use-tokens-space';
 import useTokensTypography from './use-tokens-typography';
 import useVisuallyHidden from './use-visually-hidden';
@@ -133,6 +134,7 @@ export var rules = {
   'use-primitives-text': usePrimitivesText,
   'use-should-render-to-parent': useShouldRenderToParent,
   'use-tag-group-label': useTagGroupLabel,
+  'use-tokens-shape': useTokensShape,
   'use-tokens-space': useTokensSpace,
   'use-tokens-typography': useTokensTypography,
   'use-visually-hidden': useVisuallyHidden

package/dist/esm/rules/use-tokens-shape/index.js

@@ -0,0 +1,48 @@
+import { createLintRule } from '../utils/create-rule';
+import { StyleProperty } from './transformers';
+var rule = createLintRule({
+  meta: {
+    name: 'use-tokens-shape',
+    type: 'problem',
+    fixable: 'code',
+    hasSuggestions: true,
+    docs: {
+      description: 'Enforces usage of shape design tokens rather than hard-coded values.',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      noRawShapeValues: 'The use of shape tokens is preferred over the direct application of border radius and border width properties.'
+    }
+  },
+  create: function create(context) {
+    return {
+      'CallExpression[callee.name="css"] ObjectExpression Property': function CallExpressionCalleeNameCss_ObjectExpression_Property(node) {
+        return StyleProperty.lint(node, {
+          context: context
+        });
+      },
+      'CallExpression[callee.name="keyframes"] ObjectExpression Property': function CallExpressionCalleeNameKeyframes_ObjectExpression_Property(node) {
+        return StyleProperty.lint(node, {
+          context: context
+        });
+      },
+      'CallExpression[callee.name="cssMap"] ObjectExpression Property': function CallExpressionCalleeNameCssMap_ObjectExpression_Property(node) {
+        return StyleProperty.lint(node, {
+          context: context
+        });
+      },
+      'CallExpression[callee.object.name=styled] ObjectExpression Property': function CallExpressionCalleeObjectNameStyled_ObjectExpression_Property(node) {
+        return StyleProperty.lint(node, {
+          context: context
+        });
+      },
+      'CallExpression[callee.object.name=styled2] ObjectExpression Property': function CallExpressionCalleeObjectNameStyled2_ObjectExpression_Property(node) {
+        return StyleProperty.lint(node, {
+          context: context
+        });
+      }
+    };
+  }
+});
+export default rule;

package/dist/esm/rules/use-tokens-shape/transformers/index.js

@@ -0,0 +1,119 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../ast-nodes';
+import { isStringOrNumber } from '../../use-tokens-space/utils';
+import { styleMap } from './style-map';
+import supported from './supported';
+var messageId = 'noRawShapeValues';
+export var StyleProperty = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context;
+    // Check whether all criteria needed to make a transformation are met
+    var _StyleProperty$_check = StyleProperty._check(node),
+      success = _StyleProperty$_check.success,
+      ref = _StyleProperty$_check.ref;
+    if (!success) {
+      return;
+    }
+    context.report({
+      node: ref.node.value,
+      messageId: messageId,
+      fix: ref.token ? StyleProperty._fix(ref, context) : undefined
+    });
+  },
+  _check: function _check(node) {
+    if (!isNodeOfType(node, 'Property')) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+
+    /**
+     * Currently, we support values like:
+     * ```
+     * {
+     *   borderRadius: '8px', // value.type is Literal
+     *   borderWidth: 2, // value.type is UnaryExpression
+     * }
+     * ```
+     */
+    if (!(isNodeOfType(node.value, 'Literal') || isNodeOfType(node.value, 'UnaryExpression'))) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+    var _ast$ObjectEntry$getP = ast.ObjectEntry.getProperty(node),
+      property = _ast$ObjectEntry$getP.value;
+
+    // Bail if the property is not `borderRadius`, `borderWidth`, etc
+    if (!property || !styleMap[property]) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+    var value = ast.ObjectEntry.getValue(node);
+
+    // This is mainly useful as a type guard, so the checks after don't have to have duplicate checks for other types.
+    if (!isStringOrNumber(value)) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+
+    // ignore CSS vars. See: https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/74844/overview?commentId=6741571
+    if (value.toString().startsWith('var(')) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+
+    // There are valid values to ignore, such as `margin: auto`
+    if (supported.values.ignore.includes(value)) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+
+    // Don't report on stuff like `borderRadius: '3px 8px'`.
+    // We may iterate to handle values like this in future.
+    if (value.toString().includes(' ')) {
+      return {
+        success: false,
+        ref: undefined
+      };
+    }
+    var ref = {
+      node: node,
+      token: styleMap[property][value],
+      fallback: value
+    };
+    return {
+      success: true,
+      ref: ref
+    };
+  },
+  /**
+   * All required validation steps have been taken care of before this
+   * transformer is called, so it just goes ahead providing all necessary fixes
+   */
+  _fix: function _fix(ref, context) {
+    return function (fixer) {
+      var importFix = ast.Root.upsertNamedImportDeclaration({
+        module: '@atlaskit/tokens',
+        specifiers: ['token']
+      }, context, fixer);
+      var tokenCall = "token('".concat(ref.token, "')");
+      var tokenFix = fixer.replaceText(ref.node.value, tokenCall);
+      return [importFix, tokenFix].filter(function (fix) {
+        return Boolean(fix);
+      }); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};

package/dist/esm/rules/use-tokens-shape/transformers/style-map.js

@@ -0,0 +1,43 @@
+var radiusTokenMap = {
+  '2px': 'radius.xsmall',
+  '3px': 'radius.small',
+  '4px': 'radius.small',
+  '6px': 'radius.medium',
+  '8px': 'radius.large',
+  '12px': 'radius.xlarge',
+  '50%': 'radius.full',
+  '100%': 'radius.full',
+  2: 'radius.xsmall',
+  3: 'radius.small',
+  4: 'radius.small',
+  6: 'radius.medium',
+  8: 'radius.large',
+  12: 'radius.xlarge',
+  '0.125rem': 'radius.xsmall',
+  '0.25rem': 'radius.small',
+  '0.375rem': 'radius.medium',
+  '0.5rem': 'radius.large',
+  '0.75rem': 'radius.xlarge'
+};
+var borderWidthTokenMap = {
+  '1px': 'border.width'
+};
+export var styleMap = {
+  borderRadius: radiusTokenMap,
+  borderTopLeftRadius: radiusTokenMap,
+  borderTopRightRadius: radiusTokenMap,
+  borderBottomRightRadius: radiusTokenMap,
+  borderBottomLeftRadius: radiusTokenMap,
+  borderStartStartRadius: radiusTokenMap,
+  borderStartEndRadius: radiusTokenMap,
+  borderEndStartRadius: radiusTokenMap,
+  borderEndEndRadius: radiusTokenMap,
+  borderWidth: borderWidthTokenMap,
+  borderBottomWidth: borderWidthTokenMap,
+  borderLeftWidth: borderWidthTokenMap,
+  borderRightWidth: borderWidthTokenMap,
+  borderTopWidth: borderWidthTokenMap,
+  borderBlockWidth: borderWidthTokenMap,
+  borderInlineWidth: borderWidthTokenMap,
+  outlineWidth: borderWidthTokenMap
+};

package/dist/esm/rules/use-tokens-shape/transformers/supported.js

@@ -0,0 +1,9 @@
+var supported = {
+  values: {
+    ignore: ['initial', 'inherit', 'unset', 'revert', 'revert-layer', 'none',
+    // outline-offset can be set to none
+    // Currently the DST opinion is that 0 is valid.
+    0, '0', '0px', '0em', '0rem']
+  }
+};
+export default supported;

package/dist/types/index.codegen.d.ts

@@ -78,6 +78,7 @@ export declare const plugin: {
         'use-primitives-text': import("eslint").Rule.RuleModule;
         'use-should-render-to-parent': import("eslint").Rule.RuleModule;
         'use-tag-group-label': import("eslint").Rule.RuleModule;
+        'use-tokens-shape': import("eslint").Rule.RuleModule;
         'use-tokens-space': import("eslint").Rule.RuleModule;
         'use-tokens-typography': import("eslint").Rule.RuleModule;
         'use-visually-hidden': import("eslint").Rule.RuleModule;
@@ -148,6 +149,7 @@ export declare const plugin: {
                 '@atlaskit/design-system/use-primitives-text': "warn";
                 '@atlaskit/design-system/use-should-render-to-parent': "warn";
                 '@atlaskit/design-system/use-tag-group-label': "warn";
+                '@atlaskit/design-system/use-tokens-shape': "error";
                 '@atlaskit/design-system/use-tokens-space': "error";
                 '@atlaskit/design-system/use-tokens-typography': "warn";
                 '@atlaskit/design-system/use-visually-hidden': "error";
@@ -220,6 +222,7 @@ export declare const plugin: {
                 '@atlaskit/design-system/use-primitives-text': "warn";
                 '@atlaskit/design-system/use-should-render-to-parent': "warn";
                 '@atlaskit/design-system/use-tag-group-label': "warn";
+                '@atlaskit/design-system/use-tokens-shape': "error";
                 '@atlaskit/design-system/use-tokens-space': "error";
                 '@atlaskit/design-system/use-tokens-typography': "warn";
                 '@atlaskit/design-system/use-visually-hidden': "error";
@@ -397,6 +400,7 @@ declare const configs: {
             '@atlaskit/design-system/use-primitives-text': "warn";
             '@atlaskit/design-system/use-should-render-to-parent': "warn";
             '@atlaskit/design-system/use-tag-group-label': "warn";
+            '@atlaskit/design-system/use-tokens-shape': "error";
             '@atlaskit/design-system/use-tokens-space': "error";
             '@atlaskit/design-system/use-tokens-typography': "warn";
             '@atlaskit/design-system/use-visually-hidden': "error";
@@ -469,6 +473,7 @@ declare const configs: {
             '@atlaskit/design-system/use-primitives-text': "warn";
             '@atlaskit/design-system/use-should-render-to-parent': "warn";
             '@atlaskit/design-system/use-tag-group-label': "warn";
+            '@atlaskit/design-system/use-tokens-shape': "error";
             '@atlaskit/design-system/use-tokens-space': "error";
             '@atlaskit/design-system/use-tokens-typography': "warn";
             '@atlaskit/design-system/use-visually-hidden': "error";

package/dist/types/presets/all-flat.codegen.d.ts

@@ -63,6 +63,7 @@ declare const _default: {
         '@atlaskit/design-system/use-primitives-text': "warn";
         '@atlaskit/design-system/use-should-render-to-parent': "warn";
         '@atlaskit/design-system/use-tag-group-label': "warn";
+        '@atlaskit/design-system/use-tokens-shape': "error";
         '@atlaskit/design-system/use-tokens-space': "error";
         '@atlaskit/design-system/use-tokens-typography': "warn";
         '@atlaskit/design-system/use-visually-hidden': "error";

package/dist/types/presets/all.codegen.d.ts

@@ -63,6 +63,7 @@ declare const _default: {
         '@atlaskit/design-system/use-primitives-text': "warn";
         '@atlaskit/design-system/use-should-render-to-parent': "warn";
         '@atlaskit/design-system/use-tag-group-label': "warn";
+        '@atlaskit/design-system/use-tokens-shape': "error";
         '@atlaskit/design-system/use-tokens-space': "error";
         '@atlaskit/design-system/use-tokens-typography': "warn";
         '@atlaskit/design-system/use-visually-hidden': "error";

package/dist/types/rules/index.codegen.d.ts

@@ -62,6 +62,7 @@ export declare const rules: {
     'use-primitives-text': import("eslint").Rule.RuleModule;
     'use-should-render-to-parent': import("eslint").Rule.RuleModule;
     'use-tag-group-label': import("eslint").Rule.RuleModule;
+    'use-tokens-shape': import("eslint").Rule.RuleModule;
     'use-tokens-space': import("eslint").Rule.RuleModule;
     'use-tokens-typography': import("eslint").Rule.RuleModule;
     'use-visually-hidden': import("eslint").Rule.RuleModule;

package/dist/types/rules/use-tokens-shape/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types/rules/use-tokens-shape/transformers/index.d.ts

@@ -0,0 +1,26 @@
+import type { Rule } from 'eslint';
+import { type Property } from 'eslint-codemod-utils';
+type Ref = {
+    node: Property;
+    token?: string;
+    fallback?: string | number;
+};
+type Check = {
+    success: false;
+    ref: undefined;
+} | {
+    success: true;
+    ref: Ref;
+};
+export declare const StyleProperty: {
+    lint(node: Rule.Node, { context }: {
+        context: Rule.RuleContext;
+    }): void;
+    _check(node: Rule.Node): Check;
+    /**
+     * All required validation steps have been taken care of before this
+     * transformer is called, so it just goes ahead providing all necessary fixes
+     */
+    _fix(ref: Ref, context: Rule.RuleContext): (fixer: Rule.RuleFixer) => Rule.Fix[];
+};
+export {};

package/dist/types/rules/use-tokens-shape/transformers/style-map.d.ts

@@ -0,0 +1,10 @@
+declare const radiusTokenMap: {
+    [key: string]: string;
+};
+declare const borderWidthTokenMap: {
+    [key: string]: string;
+};
+export declare const styleMap: {
+    [key: string]: typeof radiusTokenMap | typeof borderWidthTokenMap;
+};
+export {};

package/dist/types/rules/use-tokens-shape/transformers/supported.d.ts

@@ -0,0 +1,6 @@
+declare const supported: {
+    values: {
+        ignore: (string | number)[];
+    };
+};
+export default supported;

package/dist/types-ts4.5/index.codegen.d.ts

@@ -78,6 +78,7 @@ export declare const plugin: {
         'use-primitives-text': import("eslint").Rule.RuleModule;
         'use-should-render-to-parent': import("eslint").Rule.RuleModule;
         'use-tag-group-label': import("eslint").Rule.RuleModule;
+        'use-tokens-shape': import("eslint").Rule.RuleModule;
         'use-tokens-space': import("eslint").Rule.RuleModule;
         'use-tokens-typography': import("eslint").Rule.RuleModule;
         'use-visually-hidden': import("eslint").Rule.RuleModule;
@@ -151,6 +152,7 @@ export declare const plugin: {
                 '@atlaskit/design-system/use-primitives-text': "warn";
                 '@atlaskit/design-system/use-should-render-to-parent': "warn";
                 '@atlaskit/design-system/use-tag-group-label': "warn";
+                '@atlaskit/design-system/use-tokens-shape': "error";
                 '@atlaskit/design-system/use-tokens-space': "error";
                 '@atlaskit/design-system/use-tokens-typography': "warn";
                 '@atlaskit/design-system/use-visually-hidden': "error";
@@ -226,6 +228,7 @@ export declare const plugin: {
                 '@atlaskit/design-system/use-primitives-text': "warn";
                 '@atlaskit/design-system/use-should-render-to-parent': "warn";
                 '@atlaskit/design-system/use-tag-group-label': "warn";
+                '@atlaskit/design-system/use-tokens-shape': "error";
                 '@atlaskit/design-system/use-tokens-space': "error";
                 '@atlaskit/design-system/use-tokens-typography': "warn";
                 '@atlaskit/design-system/use-visually-hidden': "error";
@@ -412,6 +415,7 @@ declare const configs: {
             '@atlaskit/design-system/use-primitives-text': "warn";
             '@atlaskit/design-system/use-should-render-to-parent': "warn";
             '@atlaskit/design-system/use-tag-group-label': "warn";
+            '@atlaskit/design-system/use-tokens-shape': "error";
             '@atlaskit/design-system/use-tokens-space': "error";
             '@atlaskit/design-system/use-tokens-typography': "warn";
             '@atlaskit/design-system/use-visually-hidden': "error";
@@ -487,6 +491,7 @@ declare const configs: {
             '@atlaskit/design-system/use-primitives-text': "warn";
             '@atlaskit/design-system/use-should-render-to-parent': "warn";
             '@atlaskit/design-system/use-tag-group-label': "warn";
+            '@atlaskit/design-system/use-tokens-shape': "error";
             '@atlaskit/design-system/use-tokens-space': "error";
             '@atlaskit/design-system/use-tokens-typography': "warn";
             '@atlaskit/design-system/use-visually-hidden': "error";

package/dist/types-ts4.5/presets/all-flat.codegen.d.ts

@@ -66,6 +66,7 @@ declare const _default: {
         '@atlaskit/design-system/use-primitives-text': "warn";
         '@atlaskit/design-system/use-should-render-to-parent': "warn";
         '@atlaskit/design-system/use-tag-group-label': "warn";
+        '@atlaskit/design-system/use-tokens-shape': "error";
         '@atlaskit/design-system/use-tokens-space': "error";
         '@atlaskit/design-system/use-tokens-typography': "warn";
         '@atlaskit/design-system/use-visually-hidden': "error";

package/dist/types-ts4.5/presets/all.codegen.d.ts

@@ -66,6 +66,7 @@ declare const _default: {
         '@atlaskit/design-system/use-primitives-text': "warn";
         '@atlaskit/design-system/use-should-render-to-parent': "warn";
         '@atlaskit/design-system/use-tag-group-label': "warn";
+        '@atlaskit/design-system/use-tokens-shape': "error";
         '@atlaskit/design-system/use-tokens-space': "error";
         '@atlaskit/design-system/use-tokens-typography': "warn";
         '@atlaskit/design-system/use-visually-hidden': "error";

package/dist/types-ts4.5/rules/index.codegen.d.ts

@@ -62,6 +62,7 @@ export declare const rules: {
     'use-primitives-text': import("eslint").Rule.RuleModule;
     'use-should-render-to-parent': import("eslint").Rule.RuleModule;
     'use-tag-group-label': import("eslint").Rule.RuleModule;
+    'use-tokens-shape': import("eslint").Rule.RuleModule;
     'use-tokens-space': import("eslint").Rule.RuleModule;
     'use-tokens-typography': import("eslint").Rule.RuleModule;
     'use-visually-hidden': import("eslint").Rule.RuleModule;

package/dist/types-ts4.5/rules/use-tokens-shape/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types-ts4.5/rules/use-tokens-shape/transformers/index.d.ts

@@ -0,0 +1,26 @@
+import type { Rule } from 'eslint';
+import { type Property } from 'eslint-codemod-utils';
+type Ref = {
+    node: Property;
+    token?: string;
+    fallback?: string | number;
+};
+type Check = {
+    success: false;
+    ref: undefined;
+} | {
+    success: true;
+    ref: Ref;
+};
+export declare const StyleProperty: {
+    lint(node: Rule.Node, { context }: {
+        context: Rule.RuleContext;
+    }): void;
+    _check(node: Rule.Node): Check;
+    /**
+     * All required validation steps have been taken care of before this
+     * transformer is called, so it just goes ahead providing all necessary fixes
+     */
+    _fix(ref: Ref, context: Rule.RuleContext): (fixer: Rule.RuleFixer) => Rule.Fix[];
+};
+export {};

package/dist/types-ts4.5/rules/use-tokens-shape/transformers/style-map.d.ts

@@ -0,0 +1,10 @@
+declare const radiusTokenMap: {
+    [key: string]: string;
+};
+declare const borderWidthTokenMap: {
+    [key: string]: string;
+};
+export declare const styleMap: {
+    [key: string]: typeof radiusTokenMap | typeof borderWidthTokenMap;
+};
+export {};

package/dist/types-ts4.5/rules/use-tokens-shape/transformers/supported.d.ts

@@ -0,0 +1,6 @@
+declare const supported: {
+    values: {
+        ignore: (string | number)[];
+    };
+};
+export default supported;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
 	"description": "The essential plugin for use with the Atlassian Design System.",
-	"version": "13.20.1",
+	"version": "13.21.0",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {
@@ -43,7 +43,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/eslint-utils": "^2.0.0",
-		"@atlaskit/icon": "^28.1.0",
+		"@atlaskit/icon": "^28.2.0",
 		"@atlaskit/icon-lab": "^5.7.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -59,7 +59,7 @@
 	"devDependencies": {
 		"@af/formatting": "workspace:^",
 		"@atlaskit/ds-lib": "^5.0.0",
-		"@atlaskit/theme": "^20.0.0",
+		"@atlaskit/theme": "^21.0.0",
 		"@atlassian/codegen": "^0.1.0",
 		"@atlassian/eslint-utils": "^0.5.0",
 		"@atlassian/ts-loader": "^0.1.0",