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

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/es2019/rules/utils/is-node.js

@@ -49,11 +49,11 @@ export const isDecendantOfSvgElement = node => {
   return false;
 };
 export const isDecendantOfPrimitive = (node, context) => {
-  const primitivesToCheck = ['Box', 'Text'];
+  const primitivesToCheck = ['Box', 'Text', 'Tile'];
   if (isNodeOfType(node, 'JSXElement')) {
     // @ts-ignore
     if (primitivesToCheck.includes(node.openingElement.name.name)) {
-      const importDeclaration = Root.findImportsByModule(getSourceCode(context).ast.body, ['@atlaskit/primitives', '@atlaskit/primitives/box', '@atlaskit/primitives/text', '@atlaskit/primitives/compiled']);
+      const importDeclaration = Root.findImportsByModule(getSourceCode(context).ast.body, ['@atlaskit/primitives', '@atlaskit/primitives/box', '@atlaskit/primitives/text', '@atlaskit/primitives/compiled', '@atlaskit/tile']);
       if (importDeclaration.length) {
         return true;
       }

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

@@ -3,10 +3,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) { _defineProperty(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>>
  */
 export var positiveSpaceMap = {
   '0px': 'space.0',

package/dist/esm/index.codegen.js

@@ -3,7 +3,7 @@ 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) { _defineProperty(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
  */
 

package/dist/esm/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 {
+var 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/esm/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 {
+var 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/esm/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 {
+var 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/esm/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 {
+var 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/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,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 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/esm/rules/utils/is-node.js

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