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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 13.21.1
+
+### Patch Changes
+
+- [`f49681ffca5bc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f49681ffca5bc) -
+  Fixed an issue with the `ensure-design-token-usage` rule, where it was identifying non-issues with
+  the `@atlaskit/tile` `backgroundColor` prop.
+
+## 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/common/token-maps.partial.js

@@ -10,10 +10,10 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::a9fbd091c8b53fd9515afc7cdd793c6b>>
+ * @codegen <<SignedSource::f302f98104caa39f6137b6e8690eb7a8>>
  * @codegenId spacing
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen-token-maps
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::07b9c29f8d9f95e43d59a7b7ad4ce7a2>>
  */
 var positiveSpaceMap = exports.positiveSpaceMap = {
   '0px': 'space.0',

package/dist/cjs/index.codegen.js

@@ -20,7 +20,7 @@ var _index = require("./rules/index.codegen");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::1ca7a384145f3bf3577ede9b88907a52>>
+ * @codegen <<SignedSource::891a7e1d667de46cfe89cad670005f2c>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 // this uses require because not all node versions this package supports use the same import assertions/attributes

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

@@ -6,10 +6,11 @@ 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::6210f09c70f4d44befb986dfd548ed3e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
-var _default = exports.default = {
+
+var rules = {
   // NOTE: The reference to this plugin is inserted dynamically while creating the plugin in `index.codegen.tsx`
   plugins: {},
   rules: {
@@ -75,8 +76,10 @@ 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'
   }
-};
+};
+var _default = exports.default = rules;

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

@@ -6,10 +6,11 @@ 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::daf4a5893d65c7a1592f8bc6e51920c6>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
-var _default = exports.default = {
+
+var rules = {
   plugins: ['@atlaskit/design-system'],
   rules: {
     '@atlaskit/design-system/consistent-css-prop-usage': 'error',
@@ -74,8 +75,10 @@ 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'
   }
-};
+};
+var _default = exports.default = rules;

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

@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::310988af3dc2559509bf99f2110134b8>>
+ * @codegen <<SignedSource::3328b9c675a0d09876dcfbc5d29bc63f>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
-var _default = exports.default = {
+
+var rules = {
   // NOTE: The reference to this plugin is inserted dynamically while creating the plugin in `index.codegen.tsx`
   plugins: {},
   rules: {
@@ -60,4 +61,5 @@ var _default = exports.default = {
     '@atlaskit/design-system/use-tag-group-label': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }
-};
+};
+var _default = exports.default = rules;

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

@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ce9d9b39fba8bb67d218e48398271109>>
+ * @codegen <<SignedSource::b28f895280627b7a35f059f90783644a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
-var _default = exports.default = {
+
+var rules = {
   plugins: ['@atlaskit/design-system'],
   rules: {
     '@atlaskit/design-system/consistent-css-prop-usage': 'error',
@@ -59,4 +60,5 @@ var _default = exports.default = {
     '@atlaskit/design-system/use-tag-group-label': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }
-};
+};
+var _default = exports.default = rules;

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::4693db80b637ac078521dd6e0591f75b>>
  * @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/cjs/rules/utils/is-node.js

@@ -56,11 +56,11 @@ var _isDecendantOfSvgElement = exports.isDecendantOfSvgElement = function isDece
   return false;
 };
 var _isDecendantOfPrimitive = exports.isDecendantOfPrimitive = function isDecendantOfPrimitive(node, context) {
-  var primitivesToCheck = ['Box', 'Text'];
+  var primitivesToCheck = ['Box', 'Text', 'Tile'];
   if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
     // @ts-ignore
     if (primitivesToCheck.includes(node.openingElement.name.name)) {
-      var importDeclaration = _astNodes.Root.findImportsByModule((0, _contextCompat.getSourceCode)(context).ast.body, ['@atlaskit/primitives', '@atlaskit/primitives/box', '@atlaskit/primitives/text', '@atlaskit/primitives/compiled']);
+      var importDeclaration = _astNodes.Root.findImportsByModule((0, _contextCompat.getSourceCode)(context).ast.body, ['@atlaskit/primitives', '@atlaskit/primitives/box', '@atlaskit/primitives/text', '@atlaskit/primitives/compiled', '@atlaskit/tile']);
       if (importDeclaration.length) {
         return true;
       }

package/dist/es2019/common/token-maps.partial.js

@@ -1,9 +1,9 @@
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::a9fbd091c8b53fd9515afc7cdd793c6b>>
+ * @codegen <<SignedSource::f302f98104caa39f6137b6e8690eb7a8>>
  * @codegenId spacing
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen-token-maps
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::07b9c29f8d9f95e43d59a7b7ad4ce7a2>>
  */
 export const positiveSpaceMap = {
   '0px': 'space.0',

package/dist/es2019/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::1ca7a384145f3bf3577ede9b88907a52>>
+ * @codegen <<SignedSource::891a7e1d667de46cfe89cad670005f2c>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 

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

@@ -1,10 +1,10 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e075ab709ebd382d6f5e39fd78de9d6d>>
+ * @codegen <<SignedSource::6210f09c70f4d44befb986dfd548ed3e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
-export default {
+const rules = {
   // NOTE: The reference to this plugin is inserted dynamically while creating the plugin in `index.codegen.tsx`
   plugins: {},
   rules: {
@@ -70,8 +70,10 @@ 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'
   }
-};
+};
+export default rules;

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

@@ -1,10 +1,10 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d78f5649534c2e153e3ce48063649a8a>>
+ * @codegen <<SignedSource::daf4a5893d65c7a1592f8bc6e51920c6>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
-export default {
+const rules = {
   plugins: ['@atlaskit/design-system'],
   rules: {
     '@atlaskit/design-system/consistent-css-prop-usage': 'error',
@@ -69,8 +69,10 @@ 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'
   }
-};
+};
+export default rules;

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

@@ -1,10 +1,10 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::310988af3dc2559509bf99f2110134b8>>
+ * @codegen <<SignedSource::3328b9c675a0d09876dcfbc5d29bc63f>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
-export default {
+const rules = {
   // NOTE: The reference to this plugin is inserted dynamically while creating the plugin in `index.codegen.tsx`
   plugins: {},
   rules: {
@@ -55,4 +55,5 @@ export default {
     '@atlaskit/design-system/use-tag-group-label': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }
-};
+};
+export default rules;

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

@@ -1,10 +1,10 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ce9d9b39fba8bb67d218e48398271109>>
+ * @codegen <<SignedSource::b28f895280627b7a35f059f90783644a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
-export default {
+const rules = {
   plugins: ['@atlaskit/design-system'],
   rules: {
     '@atlaskit/design-system/consistent-css-prop-usage': 'error',
@@ -54,4 +54,5 @@ export default {
     '@atlaskit/design-system/use-tag-group-label': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }
-};
+};
+export default rules;

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,8 +1,9 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::53ad66d79f989ce9beb46ee0186685b2>>
+ * @codegen <<SignedSource::4693db80b637ac078521dd6e0591f75b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
+
 import consistentCssPropUsage from './consistent-css-prop-usage';
 import enforceInlineStylesInSelect from './enforce-inline-styles-in-select';
 import ensureDesignTokenUsage from './ensure-design-token-usage';
@@ -66,6 +67,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 +135,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