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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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
+
+- [`2896429aaa267`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2896429aaa267) -
+  Update the no-custom-icons eslint rule to include checking for custom svg usage
+
 ## 13.20.0
 
 ### Minor 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/no-custom-icons/index.js

@@ -30,11 +30,12 @@ var rule = (0, _createRule.createLintRule)({
       additionalProperties: false
     }],
     messages: {
-      noCustomIcons: "Custom icons from {{importSource}} are no longer supported. Migrate to an icon from '@atlaskit/(icon-labs|icon/core|icon/utility)'{{locationMessage}}.\n[Migration guide](https://hello.atlassian.net/wiki/spaces/DST/pages/3748692796/New+ADS+iconography+-+Code+migration+guide)."
+      noCustomIcons: "Custom icons/svgs from {{importSource}} are no longer supported. Migrate to an icon from '@atlaskit/(icon-labs|icon/core|icon/utility)'{{locationMessage}}.\n[Migration guide](https://hello.atlassian.net/wiki/spaces/DST/pages/3748692796/New+ADS+iconography+-+Code+migration+guide)."
     }
   },
   create: function create(context) {
     var _context$options$;
+    var isIconSvg = (0, _isFromImportSource.createIsFromImportSourceFor)('@atlaskit/icon/svg');
     var isIconBase = (0, _isFromImportSource.createIsFromImportSourceFor)('@atlaskit/icon', '@atlaskit/icon/base');
 
     // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
@@ -43,14 +44,25 @@ var rule = (0, _createRule.createLintRule)({
       centralLocation = _ref$centralLocation === void 0 ? '' : _ref$centralLocation,
       _ref$failSilently = _ref.failSilently,
       failSilently = _ref$failSilently === void 0 ? false : _ref$failSilently;
+    function checkNode(node) {
+      isIconBase.importDeclarationHook(node);
+      isIconSvg.importDeclarationHook(node);
+    }
     var locationMessage = centralLocation ? ", move the icon to '".concat(centralLocation, "', or, if it's a third party logo, migrate to a standard <svg> element with a `label`.") : '';
     return (0, _errorBoundary.errorBoundary)({
       JSXElement: function JSXElement(node) {
-        var _isIconBase$getImport;
-        if (!isIconBase(node) || !(0, _hasProp.hasProp)(node, 'glyph')) {
+        var isSvg = isIconSvg(node);
+        var isBase = isIconBase(node);
+        // Not an icon import
+        if (!isSvg && (!isBase || !(0, _hasProp.hasProp)(node, 'glyph'))) {
           return;
         }
-        var importSource = (_isIconBase$getImport = isIconBase.getImportSource(node)) !== null && _isIconBase$getImport !== void 0 ? _isIconBase$getImport : '';
+        var importSource = '';
+        if (isSvg) {
+          importSource = isIconSvg.getImportSource(node);
+        } else if (isBase) {
+          importSource = isIconBase.getImportSource(node);
+        }
         context.report({
           node: node.openingElement,
           messageId: 'noCustomIcons',
@@ -60,7 +72,7 @@ var rule = (0, _createRule.createLintRule)({
           }
         });
       },
-      ImportDeclaration: isIconBase.importDeclarationHook
+      ImportDeclaration: checkNode
     }, failSilently);
   }
 });

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/no-custom-icons/index.js

@@ -24,12 +24,13 @@ const rule = createLintRule({
       additionalProperties: false
     }],
     messages: {
-      noCustomIcons: `Custom icons from {{importSource}} are no longer supported. Migrate to an icon from '@atlaskit/(icon-labs|icon/core|icon/utility)'{{locationMessage}}.
+      noCustomIcons: `Custom icons/svgs from {{importSource}} are no longer supported. Migrate to an icon from '@atlaskit/(icon-labs|icon/core|icon/utility)'{{locationMessage}}.
 [Migration guide](https://hello.atlassian.net/wiki/spaces/DST/pages/3748692796/New+ADS+iconography+-+Code+migration+guide).`
     }
   },
   create(context) {
     var _context$options$;
+    const isIconSvg = createIsFromImportSourceFor('@atlaskit/icon/svg');
     const isIconBase = createIsFromImportSourceFor('@atlaskit/icon', '@atlaskit/icon/base');
 
     // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
@@ -37,14 +38,25 @@ const rule = createLintRule({
       centralLocation = '',
       failSilently = false
     } = (_context$options$ = context.options[0]) !== null && _context$options$ !== void 0 ? _context$options$ : {};
+    function checkNode(node) {
+      isIconBase.importDeclarationHook(node);
+      isIconSvg.importDeclarationHook(node);
+    }
     const locationMessage = centralLocation ? `, move the icon to '${centralLocation}', or, if it's a third party logo, migrate to a standard <svg> element with a \`label\`.` : '';
     return errorBoundary({
       JSXElement(node) {
-        var _isIconBase$getImport;
-        if (!isIconBase(node) || !hasProp(node, 'glyph')) {
+        const isSvg = isIconSvg(node);
+        const isBase = isIconBase(node);
+        // Not an icon import
+        if (!isSvg && (!isBase || !hasProp(node, 'glyph'))) {
           return;
         }
-        const importSource = (_isIconBase$getImport = isIconBase.getImportSource(node)) !== null && _isIconBase$getImport !== void 0 ? _isIconBase$getImport : '';
+        let importSource = '';
+        if (isSvg) {
+          importSource = isIconSvg.getImportSource(node);
+        } else if (isBase) {
+          importSource = isIconBase.getImportSource(node);
+        }
         context.report({
           node: node.openingElement,
           messageId: 'noCustomIcons',
@@ -54,7 +66,7 @@ const rule = createLintRule({
           }
         });
       },
-      ImportDeclaration: isIconBase.importDeclarationHook
+      ImportDeclaration: checkNode
     }, failSilently);
   }
 });

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;