@atlaskit/eslint-plugin-design-system 5.3.2 → 5.4.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 5.4.1
+
+### Patch Changes
+
+- [`432d4ce47ee`](https://bitbucket.org/atlassian/atlassian-frontend/commits/432d4ce47ee) - Account for additional border properties in spacing rule.
+
+## 5.4.0
+
+### Minor Changes
+
+- [`eb75c962cfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eb75c962cfb) - `gridSize` imports from `@atlaskit/theme` are now deprecated in favor of applying space tokens via `@atlaskit/tokens`.
+
+### Patch Changes
+
+- [`019af32072d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/019af32072d) - Add shape token handling to the `ensure-design-token-usage-spacing` rule.
+- [`7b017c0be76`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7b017c0be76) - Internal tweaks to spacing rule fixers.
+- Updated dependencies
+
 ## 5.3.2
 
 ### Patch Changes

package/configs/deprecated.json

@@ -43,6 +43,11 @@
             {
                 "moduleSpecifier": "@atlaskit/logo"
             }
+        ],
+        "enableRemoteAdminLinks": [
+            {
+                "moduleSpecifier": "@atlassian/switcher"
+            }
         ]
     },
     "imports": {
@@ -101,6 +106,10 @@
                 {
                     "importName": "focusRing",
                     "message": "The focusRing mixin is deprecated. Please use `@atlaskit/focus-ring` instead."
+                },
+                {
+                    "importName": "gridSize",
+                    "message": "The gridSize mixin is deprecated. Please use space tokens via `@atlaskit/tokens` instead."
                 }
             ]
         },
@@ -117,6 +126,10 @@
                 {
                     "importName": "focusRing",
                     "message": "The focusRing mixin is deprecated. Please use `@atlaskit/focus-ring` instead."
+                },
+                {
+                    "importName": "gridSize",
+                    "message": "The gridSize mixin is deprecated. Please use space tokens via `@atlaskit/tokens` instead."
                 }
             ]
         },

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

@@ -45,6 +45,7 @@ var rule = (0, _createRule.createRule)({
       recommended: false
     },
     messages: {
+      noRawRadiusValues: 'The use of shape tokens is preferred over the direct application of border properties.\n\n@meta <<{{payload}}>>',
       noRawSpacingValues: 'The use of spacing primitives or tokens is preferred over the direct application of spacing properties.\n\n@meta <<{{payload}}>>',
       autofixesPossible: 'Automated corrections available for spacing values. Apply autofix to replace values with appropriate tokens'
     }
@@ -108,7 +109,7 @@ var rule = (0, _createRule.createRule)({
           if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'TemplateLiteral') && node.value.expressions.some(_isNode.isDecendantOfGlobalToken)) {
             return;
           }
-          if (node.value.type === 'Literal' && !(0, _utils.isValidSpacingValue)(node.value.value, fontSize)) {
+          if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'Literal') && !(0, _utils.isValidSpacingValue)(node.value.value, fontSize)) {
             context.report({
               node: node,
               messageId: 'noRawSpacingValues',
@@ -120,7 +121,7 @@ var rule = (0, _createRule.createRule)({
           }
 
           // Don't report on CSS calc function
-          if (node.value.type === 'Literal' && (0, _utils.isCalc)(node.value.value)) {
+          if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'Literal') && (0, _utils.isCalc)(node.value.value)) {
             return;
           }
           var propertyName = node.key.name;
@@ -161,15 +162,12 @@ var rule = (0, _createRule.createRule)({
                 if (!(0, _utils.shouldAnalyzeProperty)(propertyName, ruleConfig.addons)) {
                   return null;
                 }
-                var pixelValueString = "".concat(pixelValue, "px");
-                var lookupValue = /fontWeight|fontFamily/.test(propertyName) ? pixelValue : pixelValueString;
-                var tokenName = (0, _utils.isTypographyProperty)(propertyName) ? _utils.typographyValueToToken[propertyName][lookupValue] : _utils.spacingValueToToken[lookupValue];
-                if (!tokenName) {
+                var replacementNode = (0, _utils.getTokenReplacement)(propertyName, pixelValue);
+                if (!replacementNode) {
                   return null;
                 }
-                var replacementValue = (0, _utils.getTokenNodeForValue)(propertyName, lookupValue);
                 return (!tokenNode && ruleConfig.applyImport ? [(0, _utils.insertTokensImport)(fixer)] : []).concat([fixer.insertTextBefore(node, "// TODO Delete this comment after verifying spacing token -> previous value `".concat((0, _eslintCodemodUtils.node)(node.value), "`\n").concat(' '.padStart(((_node$loc = node.loc) === null || _node$loc === void 0 ? void 0 : _node$loc.start.column) || 0))), fixer.replaceText(node, (0, _eslintCodemodUtils.property)(_objectSpread(_objectSpread({}, node), {}, {
-                  value: replacementValue
+                  value: replacementNode
                 })).toString())]);
               }
             });
@@ -182,7 +180,7 @@ var rule = (0, _createRule.createRule)({
            * @example
            * { padding: '8px 0px' }
            */
-          values.forEach(function (val, index) {
+          values.forEach(function (val) {
             var pixelValue = (0, _utils.emToPixels)(val, fontSize);
 
             // Do not report or suggest a token to replace 0 or auto
@@ -247,7 +245,7 @@ var rule = (0, _createRule.createRule)({
       // const cssTemplateLiteral = css`color: red; padding: 12px`;
       // const styledTemplateLiteral = styled.p`color: red; padding: 8px`;
       'TaggedTemplateExpression[tag.name="css"],TaggedTemplateExpression[tag.object.name="styled"],TaggedTemplateExpression[tag.callee.name="styled"]': function TaggedTemplateExpressionTagNameCssTaggedTemplateExpressionTagObjectNameStyledTaggedTemplateExpressionTagCalleeNameStyled(node) {
-        if (node.type !== 'TaggedTemplateExpression') {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'TaggedTemplateExpression')) {
           return;
         }
         var processedCssLines = (0, _utils.processCssNode)(node, context);
@@ -323,10 +321,11 @@ var rule = (0, _createRule.createRule)({
             });
 
             // from here on we know value is numeric or a font family, so it might or might not have a token equivalent
-            var replacementToken = (0, _utils.getTokenReplacement)(propertyName, numericOrNanValue);
-            if (!replacementToken) {
+            var replacementTokenNode = (0, _utils.getTokenReplacement)(propertyName, numericOrNanValue);
+            if (!replacementTokenNode) {
               return originalValue;
             }
+            var replacementToken = '${' + replacementTokenNode.toString() + '}';
             replacedValuesPerProperty.push(isFontFamily ? numericOrNanValue.trim() : pxValue);
             return replacementToken;
           }).join(' ');

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.borderWidthValueToToken = void 0;
+exports.isBorderRadius = isBorderRadius;
+exports.isBorderSizeProperty = isBorderSizeProperty;
+exports.isRadiusProperty = isRadiusProperty;
+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 borderSizeProperties = ['borderWidth', 'outlineWidth', 'borderRightWidth', 'borderLeftWidth', 'borderTopWidth', 'borderBottomWidth', 'borderInlineWidth', 'borderBlockWidth'];
+var radiusValueToToken = Object.fromEntries(_tokensRaw.shape.filter(function (t) {
+  return t.name.startsWith('border.radius');
+}).map(function (t) {
+  var value = t.value === '4px' ? '3px' : t.value;
+  return [value, t.name];
+}));
+exports.radiusValueToToken = radiusValueToToken;
+var borderWidthValueToToken = Object.fromEntries(_tokensRaw.shape.filter(function (t) {
+  return t.name.startsWith('border.width');
+}).map(function (t) {
+  return [t.value, t.name];
+}));
+exports.borderWidthValueToToken = borderWidthValueToToken;
+function isRadiusProperty(propertyName) {
+  return shapeProperties.includes(propertyName);
+}
+function isBorderSizeProperty(propertyName) {
+  return borderSizeProperties.includes(propertyName);
+}
+function isShapeProperty(propertyName) {
+  return isRadiusProperty(propertyName) || isBorderSizeProperty(propertyName);
+}
+function isBorderRadius(node) {
+  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'borderRadius' || node.callee.name === 'getBorderRadius');
+}

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.typographyValueToToken = exports.isTypographyProperty = exports.isFontSizeSmall = exports.isFontSize = exports.isFontFamily = exports.isCodeFontFamily = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _tokensRaw = require("@atlaskit/tokens/tokens-raw");
+var typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
+var isTypographyProperty = function isTypographyProperty(propertyName) {
+  return typographyProperties.includes(propertyName);
+};
+exports.isTypographyProperty = isTypographyProperty;
+var isFontSize = function isFontSize(node) {
+  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'fontSize' || node.callee.name === 'getFontSize');
+};
+exports.isFontSize = isFontSize;
+var isFontSizeSmall = function isFontSizeSmall(node) {
+  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && node.callee.name === 'fontSizeSmall';
+};
+exports.isFontSizeSmall = isFontSizeSmall;
+var isFontFamily = function isFontFamily(node) {
+  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'fontFamily' || node.callee.name === 'getFontFamily');
+};
+exports.isFontFamily = isFontFamily;
+var isCodeFontFamily = function isCodeFontFamily(node) {
+  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'codeFontFamily' || node.callee.name === 'getCodeFontFamily');
+};
+exports.isCodeFontFamily = isCodeFontFamily;
+var typographyValueToToken = Object.fromEntries(_tokensRaw.typography.map(function (currentToken) {
+  // Group tokens by property name (e.g. fontSize, fontFamily, lineHeight)
+  // This allows us to look up values specific to a property
+  // (so as not to mix tokens with overlapping values e.g. font size and line height both have tokens for 16px)
+  var tokenGroup = currentToken.attributes.group;
+  return [tokenGroup, Object.fromEntries(_tokensRaw.typography.map(function (token) {
+    return token.attributes.group === tokenGroup ? [token.value.replaceAll("\"", "'"), token.name] : [];
+  }).filter(function (token) {
+    return token.length;
+  }))];
+}));
+exports.typographyValueToToken = typographyValueToToken;

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

@@ -17,43 +17,22 @@ exports.getValueFromShorthand = exports.getValue = void 0;
 exports.insertTokensImport = insertTokensImport;
 exports.isSpacingProperty = exports.isCalc = exports.isAuto = void 0;
 exports.isTokenValueString = isTokenValueString;
-exports.onlyScaleTokens = exports.isZero = exports.isValidSpacingValue = exports.isTypographyProperty = void 0;
+exports.isZero = exports.isValidSpacingValue = void 0;
+exports.normaliseValue = normaliseValue;
 exports.processCssNode = processCssNode;
 exports.removePixelSuffix = void 0;
 exports.shouldAnalyzeProperty = shouldAnalyzeProperty;
-exports.spacingValueToToken = void 0;
 exports.splitCssProperties = splitCssProperties;
-exports.typographyValueToToken = exports.splitShorthandValues = void 0;
+exports.splitShorthandValues = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _tokensRaw = require("@atlaskit/tokens/tokens-raw");
-var typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
+var _shape = require("./shape");
+var _typography = require("./typography");
 var properties = ['padding', 'paddingBlock', 'paddingInline', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd', 'margin', 'gap', 'rowGap', 'gridRowGap', 'columnGap', 'gridColumnGap', 'top', 'left', 'right', 'bottom', 'inlineStart', 'inlineEnd', 'blockStart', 'blockEnd', 'outline-offset'];
-/**
- * Currently we have a wide range of experimental spacing tokens that we are testing.
- * We only want transforms to apply to the stable scale values, not the rest.
- * This could be removed in the future.
- */
-var onlyScaleTokens = _tokensRaw.spacing.filter(function (token) {
-  return token.name.startsWith('space.');
-});
-exports.onlyScaleTokens = onlyScaleTokens;
-var spacingValueToToken = Object.fromEntries(onlyScaleTokens.map(function (token) {
-  return [token.attributes['pixelValue'], token.name];
-}));
-exports.spacingValueToToken = spacingValueToToken;
-var typographyValueToToken = Object.fromEntries(_tokensRaw.typography.map(function (currentToken) {
-  // Group tokens by property name (e.g. fontSize, fontFamily, lineHeight)
-  // This allows us to look up values specific to a property
-  // (so as not to mix tokens with overlapping values e.g. font size and line height both have tokens for 16px)
-  var tokenGroup = currentToken.attributes.group;
-  return [tokenGroup, Object.fromEntries(_tokensRaw.typography.map(function (token) {
-    return token.attributes.group === tokenGroup ? [token.value.replaceAll("\"", "'"), token.name] : [];
-  }).filter(function (token) {
-    return token.length;
-  }))];
+var spacingValueToToken = Object.fromEntries(_tokensRaw.spacing.map(function (token) {
+  return [token.value, token.name];
 }));
-exports.typographyValueToToken = typographyValueToToken;
 function findIdentifierInParentScope(_ref) {
   var scope = _ref.scope,
     identifierName = _ref.identifierName;
@@ -75,10 +54,6 @@ function insertTokensImport(fixer) {
 var isSpacingProperty = function isSpacingProperty(propertyName) {
   return properties.includes(propertyName);
 };
-exports.isSpacingProperty = isSpacingProperty;
-var isTypographyProperty = function isTypographyProperty(propertyName) {
-  return typographyProperties.includes(propertyName);
-};
 
 /**
  * Accomplishes split str by whitespace but preserves expressions in between ${...}
@@ -91,7 +66,7 @@ var isTypographyProperty = function isTypographyProperty(propertyName) {
  * second part is a white space delimiter
  * For input `-${gridSize / 2}px ${token(...)} 18px -> [`-${gridSize / 2}px`, `${token(...)}`, `18px`]
  */
-exports.isTypographyProperty = isTypographyProperty;
+exports.isSpacingProperty = isSpacingProperty;
 var splitShorthandValues = function splitShorthandValues(str) {
   return str.split(/(\S*\$\{[^{}]*(?:\{[^{}]*\}[^{}]*)*\}\S*)|\s+/g).filter(Boolean);
 };
@@ -109,18 +84,6 @@ exports.getValueFromShorthand = getValueFromShorthand;
 var isGridSize = function isGridSize(node) {
   return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'gridSize' || node.callee.name === 'getGridSize');
 };
-var isFontSize = function isFontSize(node) {
-  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'fontSize' || node.callee.name === 'getFontSize');
-};
-var isFontSizeSmall = function isFontSizeSmall(node) {
-  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && node.callee.name === 'fontSizeSmall';
-};
-var isFontFamily = function isFontFamily(node) {
-  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'fontFamily' || node.callee.name === 'getFontFamily');
-};
-var isCodeFontFamily = function isCodeFontFamily(node) {
-  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'codeFontFamily' || node.callee.name === 'getCodeFontFamily');
-};
 var isToken = function isToken(node) {
   return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && node.callee.name === 'token';
 };
@@ -146,16 +109,19 @@ var getValueFromCallExpression = function getValueFromCallExpression(node, conte
   if (isGridSize(node)) {
     return 8;
   }
-  if (isFontSize(node)) {
+  if ((0, _shape.isBorderRadius)(node)) {
+    return 3;
+  }
+  if ((0, _typography.isFontSize)(node)) {
     return 14;
   }
-  if (isFontSizeSmall(node)) {
+  if ((0, _typography.isFontSizeSmall)(node)) {
     return 11;
   }
-  if (isFontFamily(node)) {
+  if ((0, _typography.isFontFamily)(node)) {
     return "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
   }
-  if (isCodeFontFamily(node)) {
+  if ((0, _typography.isCodeFontFamily)(node)) {
     return "'SFMono-Medium', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace";
   }
   if (isToken(node)) {
@@ -397,7 +363,10 @@ function shouldAnalyzeProperty(propertyName, targetOptions) {
   if (isSpacingProperty(propertyName) && targetOptions.includes('spacing')) {
     return true;
   }
-  if (isTypographyProperty(propertyName) && targetOptions.includes('typography')) {
+  if ((0, _shape.isShapeProperty)(propertyName) && targetOptions.includes('shape')) {
+    return true;
+  }
+  if ((0, _typography.isTypographyProperty)(propertyName) && targetOptions.includes('typography')) {
     return true;
   }
   return false;
@@ -452,7 +421,7 @@ function processCssNode(node, context) {
  * ```
  */
 function getTokenNodeForValue(propertyName, value) {
-  var token = isTypographyProperty(propertyName) ? typographyValueToToken[propertyName][value] : spacingValueToToken[value];
+  var token = findTokenNameByPropertyValue(propertyName, value);
   var fallbackValue = propertyName === 'fontFamily' ? {
     value: "".concat(value),
     raw: "`".concat(value, "`")
@@ -524,13 +493,25 @@ function splitCssProperties(styleString) {
 function isTokenValueString(originalValue) {
   return originalValue.startsWith('${token(') && originalValue.endsWith('}');
 }
-function findTokenNameByPropertyValue(propertyName, value) {
+
+/**
+ * Translate a raw value into the same value format for further parsing:
+ *
+ * -> for pixels this '8px'
+ * -> for weights     '400'
+ * -> for family      'Arial'
+ *
+ * @internal
+ */
+function normaliseValue(propertyName, value) {
   var isFontWeightOrFamily = /fontWeight|fontFamily/.test(propertyName);
   var propertyValue = typeof value === 'string' ? value.trim() : value;
-  var pixelValue = propertyValue;
-  var pixelValueString = "".concat(propertyValue, "px");
-  var lookupValue = isFontWeightOrFamily ? pixelValue : pixelValueString;
-  var tokenName = isTypographyProperty(propertyName) ? typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
+  var lookupValue = isFontWeightOrFamily ? propertyValue : typeof propertyValue === 'string' ? propertyValue : "".concat(propertyValue, "px");
+  return lookupValue;
+}
+function findTokenNameByPropertyValue(propertyName, value) {
+  var lookupValue = normaliseValue(propertyName, value);
+  var tokenName = (0, _shape.isShapeProperty)(propertyName) ? (0, _shape.isBorderSizeProperty)(propertyName) ? _shape.borderWidthValueToToken[lookupValue] : _shape.radiusValueToToken[lookupValue] : (0, _typography.isTypographyProperty)(propertyName) ? _typography.typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
   if (!tokenName) {
     return undefined;
   }
@@ -538,24 +519,16 @@ function findTokenNameByPropertyValue(propertyName, value) {
 }
 
 /**
- * Returns a string with token expression corresponding to input parameters
+ * Returns a stringifiable node with the token expression corresponding to its matching token.
  * if no token found for the pair the function returns undefined
  * @param propertyName string camelCased css property
  * @param value the computed value e.g '8px' -> '8'
  */
 function getTokenReplacement(propertyName, value) {
-  var isFontWeightOrFamily = /fontWeight|fontFamily/.test(propertyName);
-  var propertyValue = typeof value === 'string' ? value.trim() : value;
-  var pixelValue = propertyValue;
-  var pixelValueString = "".concat(propertyValue, "px");
-  var lookupValue = isFontWeightOrFamily ? pixelValue : pixelValueString;
   var tokenName = findTokenNameByPropertyValue(propertyName, value);
   if (!tokenName) {
     return undefined;
   }
-  var replacementTokenValue = getTokenNodeForValue(propertyName, lookupValue);
-
-  // ${token('...', '...')}
-  var replacementSubValue = '${' + replacementTokenValue.toString() + '}';
-  return replacementSubValue;
+  var fallbackValue = normaliseValue(propertyName, value);
+  return getTokenNodeForValue(propertyName, fallbackValue);
 }

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "5.3.2",
+	"version": "5.4.1",
 	"sideEffects": false
 }

package/dist/configs/deprecated.json

@@ -43,6 +43,11 @@
             {
                 "moduleSpecifier": "@atlaskit/logo"
             }
+        ],
+        "enableRemoteAdminLinks": [
+            {
+                "moduleSpecifier": "@atlassian/switcher"
+            }
         ]
     },
     "imports": {
@@ -101,6 +106,10 @@
                 {
                     "importName": "focusRing",
                     "message": "The focusRing mixin is deprecated. Please use `@atlaskit/focus-ring` instead."
+                },
+                {
+                    "importName": "gridSize",
+                    "message": "The gridSize mixin is deprecated. Please use space tokens via `@atlaskit/tokens` instead."
                 }
             ]
         },
@@ -117,6 +126,10 @@
                 {
                     "importName": "focusRing",
                     "message": "The focusRing mixin is deprecated. Please use `@atlaskit/focus-ring` instead."
+                },
+                {
+                    "importName": "gridSize",
+                    "message": "The gridSize mixin is deprecated. Please use space tokens via `@atlaskit/tokens` instead."
                 }
             ]
         },

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

@@ -3,7 +3,7 @@
 import { isNodeOfType, node as nodeFn, property } from 'eslint-codemod-utils';
 import { createRule } from '../utils/create-rule';
 import { isDecendantOfGlobalToken } from '../utils/is-node';
-import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, findTokenNameByPropertyValue, getFontSizeValueInScope, getRawExpression, getTokenNodeForValue, getTokenReplacement, getValue, getValueFromShorthand, insertTokensImport, isAuto, isCalc, isTokenValueString, isTypographyProperty, isValidSpacingValue, isZero, processCssNode, shouldAnalyzeProperty, spacingValueToToken, splitShorthandValues, typographyValueToToken } from './utils';
+import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, findTokenNameByPropertyValue, getFontSizeValueInScope, getRawExpression, getTokenNodeForValue, getTokenReplacement, getValue, getValueFromShorthand, insertTokensImport, isAuto, isCalc, isTokenValueString, isValidSpacingValue, isZero, processCssNode, shouldAnalyzeProperty, splitShorthandValues } from './utils';
 const rule = createRule({
   defaultOptions: [{
     addons: ['spacing'],
@@ -35,6 +35,7 @@ const rule = createRule({
       recommended: false
     },
     messages: {
+      noRawRadiusValues: 'The use of shape tokens is preferred over the direct application of border properties.\n\n@meta <<{{payload}}>>',
       noRawSpacingValues: 'The use of spacing primitives or tokens is preferred over the direct application of spacing properties.\n\n@meta <<{{payload}}>>',
       autofixesPossible: 'Automated corrections available for spacing values. Apply autofix to replace values with appropriate tokens'
     }
@@ -99,7 +100,7 @@ const rule = createRule({
           if (isNodeOfType(node.value, 'TemplateLiteral') && node.value.expressions.some(isDecendantOfGlobalToken)) {
             return;
           }
-          if (node.value.type === 'Literal' && !isValidSpacingValue(node.value.value, fontSize)) {
+          if (isNodeOfType(node.value, 'Literal') && !isValidSpacingValue(node.value.value, fontSize)) {
             context.report({
               node,
               messageId: 'noRawSpacingValues',
@@ -111,7 +112,7 @@ const rule = createRule({
           }
 
           // Don't report on CSS calc function
-          if (node.value.type === 'Literal' && isCalc(node.value.value)) {
+          if (isNodeOfType(node.value, 'Literal') && isCalc(node.value.value)) {
             return;
           }
           const propertyName = node.key.name;
@@ -151,16 +152,13 @@ const rule = createRule({
                 if (!shouldAnalyzeProperty(propertyName, ruleConfig.addons)) {
                   return null;
                 }
-                const pixelValueString = `${pixelValue}px`;
-                const lookupValue = /fontWeight|fontFamily/.test(propertyName) ? pixelValue : pixelValueString;
-                const tokenName = isTypographyProperty(propertyName) ? typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
-                if (!tokenName) {
+                const replacementNode = getTokenReplacement(propertyName, pixelValue);
+                if (!replacementNode) {
                   return null;
                 }
-                const replacementValue = getTokenNodeForValue(propertyName, lookupValue);
                 return (!tokenNode && ruleConfig.applyImport ? [insertTokensImport(fixer)] : []).concat([fixer.insertTextBefore(node, `// TODO Delete this comment after verifying spacing token -> previous value \`${nodeFn(node.value)}\`\n${' '.padStart(((_node$loc = node.loc) === null || _node$loc === void 0 ? void 0 : _node$loc.start.column) || 0)}`), fixer.replaceText(node, property({
                   ...node,
-                  value: replacementValue
+                  value: replacementNode
                 }).toString())]);
               }
             });
@@ -173,7 +171,7 @@ const rule = createRule({
            * @example
            * { padding: '8px 0px' }
            */
-          values.forEach((val, index) => {
+          values.forEach(val => {
             const pixelValue = emToPixels(val, fontSize);
 
             // Do not report or suggest a token to replace 0 or auto
@@ -232,7 +230,7 @@ const rule = createRule({
       // const cssTemplateLiteral = css`color: red; padding: 12px`;
       // const styledTemplateLiteral = styled.p`color: red; padding: 8px`;
       'TaggedTemplateExpression[tag.name="css"],TaggedTemplateExpression[tag.object.name="styled"],TaggedTemplateExpression[tag.callee.name="styled"]': node => {
-        if (node.type !== 'TaggedTemplateExpression') {
+        if (!isNodeOfType(node, 'TaggedTemplateExpression')) {
           return;
         }
         const processedCssLines = processCssNode(node, context);
@@ -293,10 +291,11 @@ const rule = createRule({
             });
 
             // from here on we know value is numeric or a font family, so it might or might not have a token equivalent
-            const replacementToken = getTokenReplacement(propertyName, numericOrNanValue);
-            if (!replacementToken) {
+            const replacementTokenNode = getTokenReplacement(propertyName, numericOrNanValue);
+            if (!replacementTokenNode) {
               return originalValue;
             }
+            const replacementToken = '${' + replacementTokenNode.toString() + '}';
             replacedValuesPerProperty.push(isFontFamily ? numericOrNanValue.trim() : pxValue);
             return replacementToken;
           }).join(' ');

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

@@ -0,0 +1,21 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { shape as shapeTokens } from '@atlaskit/tokens/tokens-raw';
+const shapeProperties = ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius', 'borderRadius'];
+const borderSizeProperties = ['borderWidth', 'outlineWidth', 'borderRightWidth', 'borderLeftWidth', 'borderTopWidth', 'borderBottomWidth', 'borderInlineWidth', 'borderBlockWidth'];
+export const radiusValueToToken = Object.fromEntries(shapeTokens.filter(t => t.name.startsWith('border.radius')).map(t => {
+  const value = t.value === '4px' ? '3px' : t.value;
+  return [value, t.name];
+}));
+export const borderWidthValueToToken = Object.fromEntries(shapeTokens.filter(t => t.name.startsWith('border.width')).map(t => [t.value, t.name]));
+export function isRadiusProperty(propertyName) {
+  return shapeProperties.includes(propertyName);
+}
+export function isBorderSizeProperty(propertyName) {
+  return borderSizeProperties.includes(propertyName);
+}
+export function isShapeProperty(propertyName) {
+  return isRadiusProperty(propertyName) || isBorderSizeProperty(propertyName);
+}
+export function isBorderRadius(node) {
+  return isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'borderRadius' || node.callee.name === 'getBorderRadius');
+}

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

@@ -0,0 +1,17 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { typography as typographyTokens } from '@atlaskit/tokens/tokens-raw';
+const typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
+export const isTypographyProperty = propertyName => {
+  return typographyProperties.includes(propertyName);
+};
+export const isFontSize = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'fontSize' || node.callee.name === 'getFontSize');
+export const isFontSizeSmall = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && node.callee.name === 'fontSizeSmall';
+export const isFontFamily = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'fontFamily' || node.callee.name === 'getFontFamily');
+export const isCodeFontFamily = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'codeFontFamily' || node.callee.name === 'getCodeFontFamily');
+export const typographyValueToToken = Object.fromEntries(typographyTokens.map(currentToken => {
+  // Group tokens by property name (e.g. fontSize, fontFamily, lineHeight)
+  // This allows us to look up values specific to a property
+  // (so as not to mix tokens with overlapping values e.g. font size and line height both have tokens for 16px)
+  const tokenGroup = currentToken.attributes.group;
+  return [tokenGroup, Object.fromEntries(typographyTokens.map(token => token.attributes.group === tokenGroup ? [token.value.replaceAll(`"`, `'`), token.name] : []).filter(token => token.length))];
+}));