@atlaskit/eslint-plugin-design-system 4.15.1 → 4.15.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 4.15.3
+
+### Patch Changes
+
+- [`965e9c7f5d7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/965e9c7f5d7) - Fix spacing token autofix in tagged template literal styles, enabling replacement of expression to equivalent spacing tokens
+
+## 4.15.2
+
+### Patch Changes
+
+- [`cf16d8f8bcc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf16d8f8bcc) - Removes usage of tokens which have been removed from the codebase
+- Updated dependencies
+
 ## 4.15.1
 
 ### Patch Changes

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

@@ -79,6 +79,20 @@ function shouldAnalyzeProperty(propertyName, targetOptions) {
   }
   return false;
 }
+/**
+ * Attempts to remove all non-essential words & characters from a style block.
+ * Including selectors and queries
+ * Adapted from ensure-design-token-usage
+ * @param styleString string of css properties
+ */
+function splitCssProperties(styleString) {
+  return styleString.split('\n').filter(function (line) {
+    return !line.trim().startsWith('@');
+  }).join('\n').replace(/\n/g, '').split(/;|(?<!\$){|(?<!\${.+?)}/) // don't split on template literal expressions i.e. `${...}`
+  .map(function (el) {
+    return el.trim() || '';
+  }).filter(Boolean);
+}
 var rule = {
   meta: {
     type: 'problem',
@@ -243,18 +257,11 @@ var rule = {
         var combinedString = node.quasi.quasis.map(function (q, i) {
           return "".concat(q.value.raw).concat(node.quasi.expressions[i] ? (0, _utils.getValue)(node.quasi.expressions[i], context) : '');
         }).join('');
-
-        /**
-         * Attempts to remove all non-essential words & characters from a style block.
-         * Including selectors and queries
-         * Adapted from ensure-design-token-usage
-         */
-        var cssProperties = combinedString.split('\n').filter(function (line) {
-          return !line.trim().startsWith('@');
-        }).join('\n').replace(/\n/g, '').split(/;|(?<!\$){|(?<!\${.+?)}/) // don't split on template literal expressions i.e. `${...}`
-        .map(function (el) {
-          return el.trim() || '';
-        }).filter(Boolean);
+        var rawString = node.quasi.quasis.map(function (q, i) {
+          return "".concat(q.value.raw).concat(node.quasi.expressions[i] ? "${".concat((0, _utils.getRawExpression)(node.quasi.expressions[i], context), "}") : '');
+        }).join('');
+        var cssProperties = splitCssProperties(combinedString);
+        var unalteredCssProperties = splitCssProperties(rawString);
 
         // Get font size
         var fontSizeNode = cssProperties.find(function (style) {
@@ -265,7 +272,7 @@ var rule = {
           return /font-size/.test(rawProperty) ? value : null;
         });
         var fontSize = (0, _utils.getValueFromShorthand)(fontSizeNode)[0];
-        cssProperties.forEach(function (style) {
+        cssProperties.forEach(function (style, currentPropIndex) {
           var _style$split3 = style.split(':'),
             _style$split4 = (0, _slicedToArray2.default)(_style$split3, 2),
             rawProperty = _style$split4[0],
@@ -325,9 +332,9 @@ var rule = {
                 var textForSource = context.getSourceCode().getText(node.quasi);
 
                 // find `<property>: ...;` in original
-                var searchRegExp = new RegExp(style, 'g');
+                var styleString = unalteredCssProperties[currentPropIndex];
                 // replace property:val with new property:val
-                var replacement = textForSource.replace(searchRegExp, //  padding: ${gridSize()}px;
+                var replacement = textForSource.replace(styleString, //  padding: ${gridSize()}px;
                 "".concat(rawProperty, ": ").concat(replacementValue));
                 if (!replacement) {
                   return [];

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

@@ -1,11 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.emToPixels = exports.convertHyphenatedNameToCamelCase = void 0;
 exports.findIdentifierInParentScope = findIdentifierInParentScope;
-exports.removePixelSuffix = exports.isValidSpacingValue = exports.isTypographyProperty = exports.isSpacingProperty = exports.getValueFromShorthand = exports.getValue = exports.findParentNodeForLine = void 0;
+exports.removePixelSuffix = exports.isValidSpacingValue = exports.isTypographyProperty = exports.isSpacingProperty = exports.getValueFromShorthand = exports.getValue = exports.getRawExpression = exports.findParentNodeForLine = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
 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'];
@@ -62,6 +64,21 @@ var isCodeFontFamily = function isCodeFontFamily(node) {
 var isToken = function isToken(node) {
   return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && node.callee.name === 'token';
 };
+var getRawExpressionForToken = function getRawExpressionForToken(node, context) {
+  var args = node.arguments;
+  var call = "${token(".concat(args.map(function (argNode) {
+    if ((0, _eslintCodemodUtils.isNodeOfType)(argNode, 'Literal')) {
+      return argNode.raw;
+    }
+    if ((0, _eslintCodemodUtils.isNodeOfType)(argNode, 'Identifier')) {
+      return argNode.name;
+    }
+    if ((0, _eslintCodemodUtils.isNodeOfType)(argNode, 'MemberExpression')) {
+      return getValue(argNode, context);
+    }
+  }).join(', '), ")}");
+  return call;
+};
 var getValueFromCallExpression = function getValueFromCallExpression(node, context) {
   if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression')) {
     return null;
@@ -82,19 +99,7 @@ var getValueFromCallExpression = function getValueFromCallExpression(node, conte
     return "'SFMono-Medium', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace";
   }
   if (isToken(node)) {
-    var args = node.arguments;
-    var call = "${token(".concat(args.map(function (argNode) {
-      if ((0, _eslintCodemodUtils.isNodeOfType)(argNode, 'Literal')) {
-        return argNode.raw;
-      }
-      if ((0, _eslintCodemodUtils.isNodeOfType)(argNode, 'Identifier')) {
-        return argNode.name;
-      }
-      if ((0, _eslintCodemodUtils.isNodeOfType)(argNode, 'MemberExpression')) {
-        return getValue(argNode, context);
-      }
-    }).join(', '), ")}");
-    return call;
+    return getRawExpressionForToken(node, context);
   }
   return null;
 };
@@ -120,6 +125,19 @@ var getValue = function getValue(node, context) {
   return null;
 };
 exports.getValue = getValue;
+var getRawExpression = function getRawExpression(node, context) {
+  if (!(
+  // if not one of our recognized types or doesn't have a range prop, early return
+
+  (0, _eslintCodemodUtils.isNodeOfType)(node, 'Literal') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'Identifier') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'BinaryExpression') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'UnaryExpression') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'TemplateLiteral') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression')) || !Array.isArray(node.range)) {
+    return null;
+  }
+  var _node$range = (0, _slicedToArray2.default)(node.range, 2),
+    start = _node$range[0],
+    end = _node$range[1];
+  return context.getSourceCode().getText().substring(start, end);
+};
+exports.getRawExpression = getRawExpression;
 var getValueFromIdentifier = function getValueFromIdentifier(node, context) {
   if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Identifier')) {
     return null;

package/dist/cjs/rules/utils/is-elevation.js

@@ -6,24 +6,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.isLegacyElevation = void 0;
 var legacyElevation = {
   e100: {
-    background: 'color.background.card',
-    shadow: 'shadow.card'
+    background: 'elevation.surface.raised',
+    shadow: 'elevation.shadow.raised'
   },
   e200: {
-    background: 'color.background.overlay',
-    shadow: 'shadow.overlay'
+    background: 'elevation.surface.overlay',
+    shadow: 'elevation.shadow.overlay'
   },
   e300: {
-    background: 'color.background.overlay',
-    shadow: 'shadow.overlay'
+    background: 'elevation.surface.overlay',
+    shadow: 'elevation.shadow.overlay'
   },
   e400: {
-    background: 'color.background.overlay',
-    shadow: 'shadow.overlay'
+    background: 'elevation.surface.overlay',
+    shadow: 'elevation.shadow.overlay'
   },
   e500: {
-    background: 'color.background.overlay',
-    shadow: 'shadow.overlay'
+    background: 'elevation.surface.overlay',
+    shadow: 'elevation.shadow.overlay'
   }
 };
 var isLegacyElevation = function isLegacyElevation(name) {

package/dist/cjs/version.json

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

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

@@ -3,7 +3,7 @@
 import { callExpression, identifier, isNodeOfType, literal, node as nodeFn, property } from 'eslint-codemod-utils';
 import { spacing as spacingScale, typography as typographyTokens } from '@atlaskit/tokens/tokens-raw';
 import { isDecendantOfGlobalToken } from '../utils/is-node';
-import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, getValue, getValueFromShorthand, isSpacingProperty, isTypographyProperty, isValidSpacingValue } from './utils';
+import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, getRawExpression, getValue, getValueFromShorthand, isSpacingProperty, isTypographyProperty, isValidSpacingValue } from './utils';
 /**
  * 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.
@@ -62,6 +62,16 @@ function shouldAnalyzeProperty(propertyName, targetOptions) {
   }
   return false;
 }
+/**
+ * Attempts to remove all non-essential words & characters from a style block.
+ * Including selectors and queries
+ * Adapted from ensure-design-token-usage
+ * @param styleString string of css properties
+ */
+function splitCssProperties(styleString) {
+  return styleString.split('\n').filter(line => !line.trim().startsWith('@')).join('\n').replace(/\n/g, '').split(/;|(?<!\$){|(?<!\${.+?)}/) // don't split on template literal expressions i.e. `${...}`
+  .map(el => el.trim() || '').filter(Boolean);
+}
 const rule = {
   meta: {
     type: 'problem',
@@ -224,14 +234,11 @@ const rule = {
         const combinedString = node.quasi.quasis.map((q, i) => {
           return `${q.value.raw}${node.quasi.expressions[i] ? getValue(node.quasi.expressions[i], context) : ''}`;
         }).join('');
-
-        /**
-         * Attempts to remove all non-essential words & characters from a style block.
-         * Including selectors and queries
-         * Adapted from ensure-design-token-usage
-         */
-        const cssProperties = combinedString.split('\n').filter(line => !line.trim().startsWith('@')).join('\n').replace(/\n/g, '').split(/;|(?<!\$){|(?<!\${.+?)}/) // don't split on template literal expressions i.e. `${...}`
-        .map(el => el.trim() || '').filter(Boolean);
+        const rawString = node.quasi.quasis.map((q, i) => {
+          return `${q.value.raw}${node.quasi.expressions[i] ? `\${${getRawExpression(node.quasi.expressions[i], context)}}` : ''}`;
+        }).join('');
+        const cssProperties = splitCssProperties(combinedString);
+        const unalteredCssProperties = splitCssProperties(rawString);
 
         // Get font size
         const fontSizeNode = cssProperties.find(style => {
@@ -239,7 +246,7 @@ const rule = {
           return /font-size/.test(rawProperty) ? value : null;
         });
         const fontSize = getValueFromShorthand(fontSizeNode)[0];
-        cssProperties.forEach(style => {
+        cssProperties.forEach((style, currentPropIndex) => {
           const [rawProperty, value] = style.split(':');
           const propertyName = convertHyphenatedNameToCamelCase(rawProperty);
           if (!shouldAnalyzeProperty(propertyName, targetCategories)) {
@@ -294,9 +301,9 @@ const rule = {
                 const textForSource = context.getSourceCode().getText(node.quasi);
 
                 // find `<property>: ...;` in original
-                const searchRegExp = new RegExp(style, 'g');
+                const styleString = unalteredCssProperties[currentPropIndex];
                 // replace property:val with new property:val
-                const replacement = textForSource.replace(searchRegExp,
+                const replacement = textForSource.replace(styleString,
                 //  padding: ${gridSize()}px;
                 `${rawProperty}: ${replacementValue}`);
                 if (!replacement) {

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

@@ -36,6 +36,21 @@ const isFontSizeSmall = node => isNodeOfType(node, 'CallExpression') && isNodeOf
 const isFontFamily = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'fontFamily' || node.callee.name === 'getFontFamily');
 const isCodeFontFamily = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'codeFontFamily' || node.callee.name === 'getCodeFontFamily');
 const isToken = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && node.callee.name === 'token';
+const getRawExpressionForToken = (node, context) => {
+  const args = node.arguments;
+  const call = `\${token(${args.map(argNode => {
+    if (isNodeOfType(argNode, 'Literal')) {
+      return argNode.raw;
+    }
+    if (isNodeOfType(argNode, 'Identifier')) {
+      return argNode.name;
+    }
+    if (isNodeOfType(argNode, 'MemberExpression')) {
+      return getValue(argNode, context);
+    }
+  }).join(', ')})}`;
+  return call;
+};
 const getValueFromCallExpression = (node, context) => {
   if (!isNodeOfType(node, 'CallExpression')) {
     return null;
@@ -56,19 +71,7 @@ const getValueFromCallExpression = (node, context) => {
     return `'SFMono-Medium', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace`;
   }
   if (isToken(node)) {
-    const args = node.arguments;
-    const call = `\${token(${args.map(argNode => {
-      if (isNodeOfType(argNode, 'Literal')) {
-        return argNode.raw;
-      }
-      if (isNodeOfType(argNode, 'Identifier')) {
-        return argNode.name;
-      }
-      if (isNodeOfType(argNode, 'MemberExpression')) {
-        return getValue(argNode, context);
-      }
-    }).join(', ')})}`;
-    return call;
+    return getRawExpressionForToken(node, context);
   }
   return null;
 };
@@ -93,6 +96,16 @@ export const getValue = (node, context) => {
   }
   return null;
 };
+export const getRawExpression = (node, context) => {
+  if (!(
+  // if not one of our recognized types or doesn't have a range prop, early return
+
+  isNodeOfType(node, 'Literal') || isNodeOfType(node, 'Identifier') || isNodeOfType(node, 'BinaryExpression') || isNodeOfType(node, 'UnaryExpression') || isNodeOfType(node, 'TemplateLiteral') || isNodeOfType(node, 'CallExpression')) || !Array.isArray(node.range)) {
+    return null;
+  }
+  const [start, end] = node.range;
+  return context.getSourceCode().getText().substring(start, end);
+};
 const getValueFromIdentifier = (node, context) => {
   if (!isNodeOfType(node, 'Identifier')) {
     return null;

package/dist/es2019/rules/utils/is-elevation.js

@@ -1,23 +1,23 @@
 const legacyElevation = {
   e100: {
-    background: 'color.background.card',
-    shadow: 'shadow.card'
+    background: 'elevation.surface.raised',
+    shadow: 'elevation.shadow.raised'
   },
   e200: {
-    background: 'color.background.overlay',
-    shadow: 'shadow.overlay'
+    background: 'elevation.surface.overlay',
+    shadow: 'elevation.shadow.overlay'
   },
   e300: {
-    background: 'color.background.overlay',
-    shadow: 'shadow.overlay'
+    background: 'elevation.surface.overlay',
+    shadow: 'elevation.shadow.overlay'
   },
   e400: {
-    background: 'color.background.overlay',
-    shadow: 'shadow.overlay'
+    background: 'elevation.surface.overlay',
+    shadow: 'elevation.shadow.overlay'
   },
   e500: {
-    background: 'color.background.overlay',
-    shadow: 'shadow.overlay'
+    background: 'elevation.surface.overlay',
+    shadow: 'elevation.shadow.overlay'
   }
 };
 export const isLegacyElevation = name => {

package/dist/es2019/version.json

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

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

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { callExpression, identifier, isNodeOfType, literal, node as nodeFn, property } from 'eslint-codemod-utils';
 import { spacing as spacingScale, typography as typographyTokens } from '@atlaskit/tokens/tokens-raw';
 import { isDecendantOfGlobalToken } from '../utils/is-node';
-import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, getValue, getValueFromShorthand, isSpacingProperty, isTypographyProperty, isValidSpacingValue } from './utils';
+import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, getRawExpression, getValue, getValueFromShorthand, isSpacingProperty, isTypographyProperty, isValidSpacingValue } from './utils';
 /**
  * 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.
@@ -74,6 +74,20 @@ function shouldAnalyzeProperty(propertyName, targetOptions) {
   }
   return false;
 }
+/**
+ * Attempts to remove all non-essential words & characters from a style block.
+ * Including selectors and queries
+ * Adapted from ensure-design-token-usage
+ * @param styleString string of css properties
+ */
+function splitCssProperties(styleString) {
+  return styleString.split('\n').filter(function (line) {
+    return !line.trim().startsWith('@');
+  }).join('\n').replace(/\n/g, '').split(/;|(?<!\$){|(?<!\${.+?)}/) // don't split on template literal expressions i.e. `${...}`
+  .map(function (el) {
+    return el.trim() || '';
+  }).filter(Boolean);
+}
 var rule = {
   meta: {
     type: 'problem',
@@ -238,18 +252,11 @@ var rule = {
         var combinedString = node.quasi.quasis.map(function (q, i) {
           return "".concat(q.value.raw).concat(node.quasi.expressions[i] ? getValue(node.quasi.expressions[i], context) : '');
         }).join('');
-
-        /**
-         * Attempts to remove all non-essential words & characters from a style block.
-         * Including selectors and queries
-         * Adapted from ensure-design-token-usage
-         */
-        var cssProperties = combinedString.split('\n').filter(function (line) {
-          return !line.trim().startsWith('@');
-        }).join('\n').replace(/\n/g, '').split(/;|(?<!\$){|(?<!\${.+?)}/) // don't split on template literal expressions i.e. `${...}`
-        .map(function (el) {
-          return el.trim() || '';
-        }).filter(Boolean);
+        var rawString = node.quasi.quasis.map(function (q, i) {
+          return "".concat(q.value.raw).concat(node.quasi.expressions[i] ? "${".concat(getRawExpression(node.quasi.expressions[i], context), "}") : '');
+        }).join('');
+        var cssProperties = splitCssProperties(combinedString);
+        var unalteredCssProperties = splitCssProperties(rawString);
 
         // Get font size
         var fontSizeNode = cssProperties.find(function (style) {
@@ -260,7 +267,7 @@ var rule = {
           return /font-size/.test(rawProperty) ? value : null;
         });
         var fontSize = getValueFromShorthand(fontSizeNode)[0];
-        cssProperties.forEach(function (style) {
+        cssProperties.forEach(function (style, currentPropIndex) {
           var _style$split3 = style.split(':'),
             _style$split4 = _slicedToArray(_style$split3, 2),
             rawProperty = _style$split4[0],
@@ -320,9 +327,9 @@ var rule = {
                 var textForSource = context.getSourceCode().getText(node.quasi);
 
                 // find `<property>: ...;` in original
-                var searchRegExp = new RegExp(style, 'g');
+                var styleString = unalteredCssProperties[currentPropIndex];
                 // replace property:val with new property:val
-                var replacement = textForSource.replace(searchRegExp, //  padding: ${gridSize()}px;
+                var replacement = textForSource.replace(styleString, //  padding: ${gridSize()}px;
                 "".concat(rawProperty, ": ").concat(replacementValue));
                 if (!replacement) {
                   return [];

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

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { isNodeOfType } from 'eslint-codemod-utils';
 var typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
 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'];
@@ -51,6 +52,21 @@ var isCodeFontFamily = function isCodeFontFamily(node) {
 var isToken = function isToken(node) {
   return isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && node.callee.name === 'token';
 };
+var getRawExpressionForToken = function getRawExpressionForToken(node, context) {
+  var args = node.arguments;
+  var call = "${token(".concat(args.map(function (argNode) {
+    if (isNodeOfType(argNode, 'Literal')) {
+      return argNode.raw;
+    }
+    if (isNodeOfType(argNode, 'Identifier')) {
+      return argNode.name;
+    }
+    if (isNodeOfType(argNode, 'MemberExpression')) {
+      return getValue(argNode, context);
+    }
+  }).join(', '), ")}");
+  return call;
+};
 var getValueFromCallExpression = function getValueFromCallExpression(node, context) {
   if (!isNodeOfType(node, 'CallExpression')) {
     return null;
@@ -71,19 +87,7 @@ var getValueFromCallExpression = function getValueFromCallExpression(node, conte
     return "'SFMono-Medium', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace";
   }
   if (isToken(node)) {
-    var args = node.arguments;
-    var call = "${token(".concat(args.map(function (argNode) {
-      if (isNodeOfType(argNode, 'Literal')) {
-        return argNode.raw;
-      }
-      if (isNodeOfType(argNode, 'Identifier')) {
-        return argNode.name;
-      }
-      if (isNodeOfType(argNode, 'MemberExpression')) {
-        return getValue(argNode, context);
-      }
-    }).join(', '), ")}");
-    return call;
+    return getRawExpressionForToken(node, context);
   }
   return null;
 };
@@ -108,6 +112,18 @@ export var getValue = function getValue(node, context) {
   }
   return null;
 };
+export var getRawExpression = function getRawExpression(node, context) {
+  if (!(
+  // if not one of our recognized types or doesn't have a range prop, early return
+
+  isNodeOfType(node, 'Literal') || isNodeOfType(node, 'Identifier') || isNodeOfType(node, 'BinaryExpression') || isNodeOfType(node, 'UnaryExpression') || isNodeOfType(node, 'TemplateLiteral') || isNodeOfType(node, 'CallExpression')) || !Array.isArray(node.range)) {
+    return null;
+  }
+  var _node$range = _slicedToArray(node.range, 2),
+    start = _node$range[0],
+    end = _node$range[1];
+  return context.getSourceCode().getText().substring(start, end);
+};
 var getValueFromIdentifier = function getValueFromIdentifier(node, context) {
   if (!isNodeOfType(node, 'Identifier')) {
     return null;

package/dist/esm/rules/utils/is-elevation.js

@@ -1,23 +1,23 @@
 var legacyElevation = {
   e100: {
-    background: 'color.background.card',
-    shadow: 'shadow.card'
+    background: 'elevation.surface.raised',
+    shadow: 'elevation.shadow.raised'
   },
   e200: {
-    background: 'color.background.overlay',
-    shadow: 'shadow.overlay'
+    background: 'elevation.surface.overlay',
+    shadow: 'elevation.shadow.overlay'
   },
   e300: {
-    background: 'color.background.overlay',
-    shadow: 'shadow.overlay'
+    background: 'elevation.surface.overlay',
+    shadow: 'elevation.shadow.overlay'
   },
   e400: {
-    background: 'color.background.overlay',
-    shadow: 'shadow.overlay'
+    background: 'elevation.surface.overlay',
+    shadow: 'elevation.shadow.overlay'
   },
   e500: {
-    background: 'color.background.overlay',
-    shadow: 'shadow.overlay'
+    background: 'elevation.surface.overlay',
+    shadow: 'elevation.shadow.overlay'
   }
 };
 export var isLegacyElevation = function isLegacyElevation(name) {

package/dist/esm/version.json

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

package/dist/types/rules/ensure-design-token-usage-spacing/utils.d.ts

@@ -8,6 +8,7 @@ export declare const isSpacingProperty: (propertyName: string) => boolean;
 export declare const isTypographyProperty: (propertyName: string) => boolean;
 export declare const getValueFromShorthand: (str: unknown) => any[];
 export declare const getValue: (node: EslintNode, context: Rule.RuleContext) => string | number | any[] | null | undefined;
+export declare const getRawExpression: (node: EslintNode, context: Rule.RuleContext) => string | null;
 export declare const emToPixels: <T extends unknown>(value: T, fontSize: number | null | undefined) => number | T | null;
 export declare const removePixelSuffix: (value: string | number) => string | number;
 export declare const isValidSpacingValue: (value: string | number | boolean | RegExp | null | undefined | any[] | bigint, fontSize?: number | null | undefined) => boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
   "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "4.15.1",
+  "version": "4.15.3",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^0.13.0",
+    "@atlaskit/tokens": "^1.1.0",
     "@babel/runtime": "^7.0.0",
     "eslint-codemod-utils": "^1.5.0"
   },