@atlaskit/eslint-plugin-design-system 4.8.1 → 4.10.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 4.10.0
+
+### Minor Changes
+
+- [`bb808f9a186`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bb808f9a186) - Add exceptions option to ensure-design-token-usage rule
+
+## 4.9.0
+
+### Minor Changes
+
+- [`9701bf4a8b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9701bf4a8b3) - Fix false positives for variable names and object property keys
+
+## 4.8.2
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
 ## 4.8.1
 
 ### Patch Changes

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

@@ -58,13 +58,20 @@ var rule = {
   },
   create: function create(context) {
     var config = context.options[0] || defaultConfig;
+
+    var isException = function isException(value) {
+      var _config$exceptions$in, _config$exceptions;
+
+      return (_config$exceptions$in = (_config$exceptions = config.exceptions) === null || _config$exceptions === void 0 ? void 0 : _config$exceptions.includes(value)) !== null && _config$exceptions$in !== void 0 ? _config$exceptions$in : false;
+    };
+
     return {
       'TemplateLiteral > Identifier': function TemplateLiteralIdentifier(node) {
         if (!(0, _isNode.isDecendantOfStyleBlock)(node)) {
           return;
         }
 
-        if (node.type === 'Identifier' && (0, _isColor.isLegacyNamedColor)(node.name)) {
+        if (node.type === 'Identifier' && (0, _isColor.isLegacyNamedColor)(node.name) && !isException(node.name)) {
           context.report({
             messageId: 'hardCodedColor',
             node: node,
@@ -74,17 +81,26 @@ var rule = {
         }
       },
       Identifier: function Identifier(node) {
-        if ((0, _isNode.isDecendantOfGlobalToken)(node) || (0, _isNode.isDecendantOfType)(node, 'ImportDeclaration')) {
+        if (isException(node.name) || (0, _isNode.isDecendantOfGlobalToken)(node) || (0, _isNode.isDecendantOfType)(node, 'ImportDeclaration') || (0, _isNode.isPropertyKey)(node) || (0, _isNode.isVariableName)(node)) {
           return;
         }
 
-        if ((0, _isColor.isLegacyColor)(node.name) || (0, _isColor.isHardCodedColor)(node.name)) {
-          if (node.parent.type === 'MemberExpression' && node.parent.object.type === 'Identifier') {
-            context.report({
-              messageId: 'hardCodedColor',
-              node: node,
-              suggest: getTokenSuggestion(node.parent, "".concat(node.parent.object.name, ".").concat(node.name), config)
-            });
+        var isNodeLegacyColor = (0, _isColor.isLegacyColor)(node.name);
+
+        if (isNodeLegacyColor || (0, _isColor.isHardCodedColor)(node.name)) {
+          if (node.parent.type === 'MemberExpression') {
+            if (node.parent.object.type === 'Identifier') {
+              // Object members as named colors, like obj.ivory, should be valid,
+              // and hexes and color functions cannot be property names anyway.
+              if (isNodeLegacyColor) {
+                context.report({
+                  messageId: 'hardCodedColor',
+                  node: node,
+                  suggest: getTokenSuggestion(node.parent, "".concat(node.parent.object.name, ".").concat(node.name), config)
+                });
+              }
+            }
+
             return;
           }
 
@@ -155,6 +171,10 @@ var rule = {
           return;
         }
 
+        if (isException(node.value)) {
+          return;
+        }
+
         if ((0, _isColor.isHardCodedColor)(node.value) || (0, _isColor.includesHardCodedColor)(node.value)) {
           context.report({
             messageId: 'hardCodedColor',
@@ -173,7 +193,7 @@ var rule = {
           return;
         }
 
-        if (!(0, _isColor.isLegacyNamedColor)(node.callee.name) || (0, _isNode.isDecendantOfGlobalToken)(node)) {
+        if (!(0, _isColor.isLegacyNamedColor)(node.callee.name) || (0, _isNode.isDecendantOfGlobalToken)(node) || isException(node.callee.name)) {
           return;
         }
 
@@ -192,13 +212,21 @@ var rule = {
           return;
         }
 
-        if (node.value.type === 'Literal' && ((0, _isColor.isHardCodedColor)(node.value.value) || (0, _isColor.includesHardCodedColor)(node.value.value))) {
-          context.report({
-            messageId: 'hardCodedColor',
-            node: node,
-            suggest: getTokenSuggestion(node.value, node.value.value, config)
-          });
-          return;
+        if (node.value.type === 'Literal') {
+          var literalValue = node.value.value;
+
+          if (isException(literalValue)) {
+            return;
+          }
+
+          if ((0, _isColor.isHardCodedColor)(literalValue) || (0, _isColor.includesHardCodedColor)(literalValue)) {
+            context.report({
+              messageId: 'hardCodedColor',
+              node: node,
+              suggest: getTokenSuggestion(node.value, literalValue, config)
+            });
+            return;
+          }
         }
       }
     };

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

@@ -4,29 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isLegacyNamedColor = exports.isLegacyColor = exports.isHardCodedColor = exports.includesHardCodedColor = void 0;
-var namedColors = ['black', 'silver', 'gray', 'white', 'maroon', 'red', 'purple', 'fuchsia', 'green', 'lime', 'olive', 'yellow', 'navy', 'blue', 'teal', 'aqua', 'orange', 'aliceblue', 'antiquewhite', 'aquamarine', 'azure', 'beige', 'bisque', 'blanchedalmond', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'limegreen', 'linen', 'magenta', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'oldlace', 'olivedrab', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue', 'tan', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'whitesmoke', 'yellowgreen', 'rebeccapurple'];
-var legacyColors = ['R50', 'R75', 'R100', 'R200', 'R300', 'R400', 'R500', 'Y50', 'Y75', 'Y100', 'Y200', 'Y300', 'Y400', 'Y500', 'G50', 'G75', 'G100', 'G200', 'G300', 'G400', 'G500', 'B50', 'B75', 'B100', 'B200', 'B300', 'B400', 'B500', 'P50', 'P75', 'P100', 'P200', 'P300', 'P400', 'P500', 'T50', 'T75', 'T100', 'T200', 'T300', 'T400', 'T500', 'N0', 'N10', 'N20', 'N30', 'N40', 'N50', 'N60', 'N70', 'N80', 'N90', 'N100', 'N200', 'N300', 'N400', 'N500', 'N600', 'N700', 'N800', 'N900', 'N10A', 'N20A', 'N30A', 'N40A', 'N50A', 'N60A', 'N70A', 'N80A', 'N90A', 'N100A', 'N200A', 'N300A', 'N400A', 'N500A', 'N600A', 'N700A', 'N800A', 'DN900', 'DN800', 'DN700', 'DN600', 'DN500', 'DN400', 'DN300', 'DN200', 'DN100', 'DN90', 'DN80', 'DN70', 'DN60', 'DN50', 'DN40', 'DN30', 'DN20', 'DN10', 'DN0', 'DN800A', 'DN700A', 'DN600A', 'DN500A', 'DN400A', 'DN300A', 'DN200A', 'DN100A', 'DN90A', 'DN80A', 'DN70A', 'DN60A', 'DN50A', 'DN40A', 'DN30A', 'DN20A', 'DN10A'];
-var legacyColorMixins = ['background', 'backgroundActive', 'backgroundHover', 'backgroundOnLayer', 'text', 'textHover', 'textActive', 'subtleText', 'placeholderText', 'heading', 'subtleHeading', 'codeBlock', 'link', 'linkHover', 'linkActive', 'linkOutline', 'primary', 'blue', 'teal', 'purple', 'red', 'yellow', 'green', 'skeleton'];
+var namedColors = new Set(['black', 'silver', 'gray', 'white', 'maroon', 'red', 'purple', 'fuchsia', 'green', 'lime', 'olive', 'yellow', 'navy', 'blue', 'teal', 'aqua', 'orange', 'aliceblue', 'antiquewhite', 'aquamarine', 'azure', 'beige', 'bisque', 'blanchedalmond', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'limegreen', 'linen', 'magenta', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'oldlace', 'olivedrab', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue', 'tan', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'whitesmoke', 'yellowgreen', 'rebeccapurple']);
+var legacyColors = new Set(['R50', 'R75', 'R100', 'R200', 'R300', 'R400', 'R500', 'Y50', 'Y75', 'Y100', 'Y200', 'Y300', 'Y400', 'Y500', 'G50', 'G75', 'G100', 'G200', 'G300', 'G400', 'G500', 'B50', 'B75', 'B100', 'B200', 'B300', 'B400', 'B500', 'P50', 'P75', 'P100', 'P200', 'P300', 'P400', 'P500', 'T50', 'T75', 'T100', 'T200', 'T300', 'T400', 'T500', 'N0', 'N10', 'N20', 'N30', 'N40', 'N50', 'N60', 'N70', 'N80', 'N90', 'N100', 'N200', 'N300', 'N400', 'N500', 'N600', 'N700', 'N800', 'N900', 'N10A', 'N20A', 'N30A', 'N40A', 'N50A', 'N60A', 'N70A', 'N80A', 'N90A', 'N100A', 'N200A', 'N300A', 'N400A', 'N500A', 'N600A', 'N700A', 'N800A', 'DN900', 'DN800', 'DN700', 'DN600', 'DN500', 'DN400', 'DN300', 'DN200', 'DN100', 'DN90', 'DN80', 'DN70', 'DN60', 'DN50', 'DN40', 'DN30', 'DN20', 'DN10', 'DN0', 'DN800A', 'DN700A', 'DN600A', 'DN500A', 'DN400A', 'DN300A', 'DN200A', 'DN100A', 'DN90A', 'DN80A', 'DN70A', 'DN60A', 'DN50A', 'DN40A', 'DN30A', 'DN20A', 'DN10A', // Legacy Trello colors:
+'AtlassianBlue50', 'AtlassianBlue200', 'AtlassianBlue300', 'AtlassianBlue400', 'TrelloBlue25', 'TrelloBlue50', 'TrelloBlue100', 'TrelloBlue200', 'TrelloBlue300', 'TrelloBlue400', 'TrelloBlue500', 'TrelloBlue600', 'TrelloBlue700', 'TrelloBlue800', 'TrelloBlue900', 'Green50', 'Green100', 'Green200', 'Green300', 'Green400', 'Green500', 'Green600', 'Green700', 'Green800', 'Green900', 'Orange50', 'Orange100', 'Orange200', 'Orange300', 'Orange400', 'Orange500', 'Orange600', 'Orange700', 'Orange800', 'Orange900', 'Red50', 'Red100', 'Red200', 'Red300', 'Red400', 'Red500', 'Red600', 'Red700', 'Red800', 'Red900', 'Yellow50', 'Yellow100', 'Yellow200', 'Yellow300', 'Yellow400', 'Yellow500', 'Yellow600', 'Yellow700', 'Yellow800', 'Yellow900', 'Purple50', 'Purple100', 'Purple200', 'Purple300', 'Purple400', 'Purple500', 'Purple600', 'Purple700', 'Purple800', 'Purple900', 'VioletMbgAlert', 'Pink50', 'Pink100', 'Pink200', 'Pink300', 'Pink400', 'Pink500', 'Pink600', 'Pink700', 'Pink800', 'Pink900', 'Sky25', 'Sky50', 'Sky100', 'Sky200', 'Sky300', 'Sky400', 'Sky500', 'Sky600', 'Sky700', 'Sky800', 'Sky900', 'Lime50', 'Lime100', 'Lime200', 'Lime300', 'Lime400', 'Lime500', 'Lime600', 'Lime700', 'Lime800', 'Lime900', 'BusinessBlue50', 'BusinessBlue100', 'BusinessBlue200', 'BusinessBlue300', 'BusinessBlue400', 'BusinessBlue500', 'BusinessBlue600', 'BusinessBlue700', 'BusinessBlue800', 'BusinessBlue900', 'Opacity1', 'Opacity2', 'Opacity3', 'Opacity4', 'Opacity5', 'Opacity6', 'Opacity7', 'Opacity8', 'Opacity9', 'OpacityDark1', 'OpacityDark2', 'OpacityDark3', 'OpacityDark4', 'OpacityDark5', 'OpacityDark6', 'OpacityDark7', 'OpacityDark8', 'OpacityDark9', 'Black']);
+var legacyColorMixins = new Set(['background', 'backgroundActive', 'backgroundHover', 'backgroundOnLayer', 'text', 'textHover', 'textActive', 'subtleText', 'placeholderText', 'heading', 'subtleHeading', 'codeBlock', 'link', 'linkHover', 'linkActive', 'linkOutline', 'primary', 'blue', 'teal', 'purple', 'red', 'yellow', 'green', 'skeleton']);
 
 var includesWholeWord = function includesWholeWord(value, options) {
   var values = value.replace(/[^a-zA-Z ]/g, ' ').trim().split(/(?:,|\.| )+/);
-  var result = false;
-  options.forEach(function (el) {
-    if (values.includes(el)) {
-      result = true;
-    }
+  return values.some(function (value) {
+    return options.has(value);
   });
-  return result;
 };
 
 var isLegacyColor = function isLegacyColor(value) {
-  return legacyColors.includes(value);
+  return legacyColors.has(value);
 };
 
 exports.isLegacyColor = isLegacyColor;
 
 var isLegacyNamedColor = function isLegacyNamedColor(value) {
-  return legacyColorMixins.includes(value);
+  return legacyColorMixins.has(value);
 };
 
 exports.isLegacyNamedColor = isLegacyNamedColor;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isStyledTemplateNode = exports.isStyledObjectNode = exports.isDecendantOfType = exports.isDecendantOfStyleJsxAttribute = exports.isDecendantOfStyleBlock = exports.isDecendantOfGlobalToken = exports.isChildOfType = void 0;
+exports.isVariableName = exports.isStyledTemplateNode = exports.isStyledObjectNode = exports.isPropertyKey = exports.isDecendantOfType = exports.isDecendantOfStyleJsxAttribute = exports.isDecendantOfStyleBlock = exports.isDecendantOfGlobalToken = exports.isChildOfType = void 0;
 
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 
@@ -37,6 +37,27 @@ var isDecendantOfType = function isDecendantOfType(node, type) {
 
 exports.isDecendantOfType = isDecendantOfType;
 
+var isPropertyKey = function isPropertyKey(node) {
+  if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'Identifier') && isDecendantOfType(node, 'Property')) {
+    var parent = node.parent;
+    return node === parent.key || parent.shorthand;
+  }
+
+  return false;
+};
+
+exports.isPropertyKey = isPropertyKey;
+
+var isVariableName = function isVariableName(node) {
+  if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'Identifier') && isDecendantOfType(node, 'VariableDeclarator')) {
+    return node === node.parent.id;
+  }
+
+  return false;
+};
+
+exports.isVariableName = isVariableName;
+
 var isDecendantOfStyleJsxAttribute = function isDecendantOfStyleJsxAttribute(node) {
   // @ts-ignore
   if (node.type === 'JSXAttribute') {

package/dist/cjs/version.json

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

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

@@ -1,7 +1,7 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { includesHardCodedColor, isHardCodedColor, isLegacyColor, isLegacyNamedColor } from '../utils/is-color';
 import { isLegacyElevation } from '../utils/is-elevation';
-import { isChildOfType, isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfStyleJsxAttribute, isDecendantOfType } from '../utils/is-node';
+import { isChildOfType, isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfStyleJsxAttribute, isDecendantOfType, isPropertyKey, isVariableName } from '../utils/is-node';
 const defaultConfig = {
   shouldEnforceFallbacks: false
 };
@@ -49,13 +49,20 @@ token('color.background.blanket');
 
   create(context) {
     const config = context.options[0] || defaultConfig;
+
+    const isException = value => {
+      var _config$exceptions$in, _config$exceptions;
+
+      return (_config$exceptions$in = (_config$exceptions = config.exceptions) === null || _config$exceptions === void 0 ? void 0 : _config$exceptions.includes(value)) !== null && _config$exceptions$in !== void 0 ? _config$exceptions$in : false;
+    };
+
     return {
       'TemplateLiteral > Identifier': node => {
         if (!isDecendantOfStyleBlock(node)) {
           return;
         }
 
-        if (node.type === 'Identifier' && isLegacyNamedColor(node.name)) {
+        if (node.type === 'Identifier' && isLegacyNamedColor(node.name) && !isException(node.name)) {
           context.report({
             messageId: 'hardCodedColor',
             node,
@@ -66,17 +73,26 @@ token('color.background.blanket');
       },
 
       Identifier(node) {
-        if (isDecendantOfGlobalToken(node) || isDecendantOfType(node, 'ImportDeclaration')) {
+        if (isException(node.name) || isDecendantOfGlobalToken(node) || isDecendantOfType(node, 'ImportDeclaration') || isPropertyKey(node) || isVariableName(node)) {
           return;
         }
 
-        if (isLegacyColor(node.name) || isHardCodedColor(node.name)) {
-          if (node.parent.type === 'MemberExpression' && node.parent.object.type === 'Identifier') {
-            context.report({
-              messageId: 'hardCodedColor',
-              node,
-              suggest: getTokenSuggestion(node.parent, `${node.parent.object.name}.${node.name}`, config)
-            });
+        const isNodeLegacyColor = isLegacyColor(node.name);
+
+        if (isNodeLegacyColor || isHardCodedColor(node.name)) {
+          if (node.parent.type === 'MemberExpression') {
+            if (node.parent.object.type === 'Identifier') {
+              // Object members as named colors, like obj.ivory, should be valid,
+              // and hexes and color functions cannot be property names anyway.
+              if (isNodeLegacyColor) {
+                context.report({
+                  messageId: 'hardCodedColor',
+                  node,
+                  suggest: getTokenSuggestion(node.parent, `${node.parent.object.name}.${node.name}`, config)
+                });
+              }
+            }
+
             return;
           }
 
@@ -152,6 +168,10 @@ ${' '.repeat(getNodeColumn(node) - 2)}box-shadow: \${token('${elevation.shadow}'
           return;
         }
 
+        if (isException(node.value)) {
+          return;
+        }
+
         if (isHardCodedColor(node.value) || includesHardCodedColor(node.value)) {
           context.report({
             messageId: 'hardCodedColor',
@@ -171,7 +191,7 @@ ${' '.repeat(getNodeColumn(node) - 2)}box-shadow: \${token('${elevation.shadow}'
           return;
         }
 
-        if (!isLegacyNamedColor(node.callee.name) || isDecendantOfGlobalToken(node)) {
+        if (!isLegacyNamedColor(node.callee.name) || isDecendantOfGlobalToken(node) || isException(node.callee.name)) {
           return;
         }
 
@@ -191,13 +211,21 @@ ${' '.repeat(getNodeColumn(node) - 2)}box-shadow: \${token('${elevation.shadow}'
           return;
         }
 
-        if (node.value.type === 'Literal' && (isHardCodedColor(node.value.value) || includesHardCodedColor(node.value.value))) {
-          context.report({
-            messageId: 'hardCodedColor',
-            node,
-            suggest: getTokenSuggestion(node.value, node.value.value, config)
-          });
-          return;
+        if (node.value.type === 'Literal') {
+          const literalValue = node.value.value;
+
+          if (isException(literalValue)) {
+            return;
+          }
+
+          if (isHardCodedColor(literalValue) || includesHardCodedColor(literalValue)) {
+            context.report({
+              messageId: 'hardCodedColor',
+              node,
+              suggest: getTokenSuggestion(node.value, literalValue, config)
+            });
+            return;
+          }
         }
       }
 

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

@@ -1,20 +1,15 @@
-const namedColors = ['black', 'silver', 'gray', 'white', 'maroon', 'red', 'purple', 'fuchsia', 'green', 'lime', 'olive', 'yellow', 'navy', 'blue', 'teal', 'aqua', 'orange', 'aliceblue', 'antiquewhite', 'aquamarine', 'azure', 'beige', 'bisque', 'blanchedalmond', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'limegreen', 'linen', 'magenta', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'oldlace', 'olivedrab', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue', 'tan', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'whitesmoke', 'yellowgreen', 'rebeccapurple'];
-const legacyColors = ['R50', 'R75', 'R100', 'R200', 'R300', 'R400', 'R500', 'Y50', 'Y75', 'Y100', 'Y200', 'Y300', 'Y400', 'Y500', 'G50', 'G75', 'G100', 'G200', 'G300', 'G400', 'G500', 'B50', 'B75', 'B100', 'B200', 'B300', 'B400', 'B500', 'P50', 'P75', 'P100', 'P200', 'P300', 'P400', 'P500', 'T50', 'T75', 'T100', 'T200', 'T300', 'T400', 'T500', 'N0', 'N10', 'N20', 'N30', 'N40', 'N50', 'N60', 'N70', 'N80', 'N90', 'N100', 'N200', 'N300', 'N400', 'N500', 'N600', 'N700', 'N800', 'N900', 'N10A', 'N20A', 'N30A', 'N40A', 'N50A', 'N60A', 'N70A', 'N80A', 'N90A', 'N100A', 'N200A', 'N300A', 'N400A', 'N500A', 'N600A', 'N700A', 'N800A', 'DN900', 'DN800', 'DN700', 'DN600', 'DN500', 'DN400', 'DN300', 'DN200', 'DN100', 'DN90', 'DN80', 'DN70', 'DN60', 'DN50', 'DN40', 'DN30', 'DN20', 'DN10', 'DN0', 'DN800A', 'DN700A', 'DN600A', 'DN500A', 'DN400A', 'DN300A', 'DN200A', 'DN100A', 'DN90A', 'DN80A', 'DN70A', 'DN60A', 'DN50A', 'DN40A', 'DN30A', 'DN20A', 'DN10A'];
-const legacyColorMixins = ['background', 'backgroundActive', 'backgroundHover', 'backgroundOnLayer', 'text', 'textHover', 'textActive', 'subtleText', 'placeholderText', 'heading', 'subtleHeading', 'codeBlock', 'link', 'linkHover', 'linkActive', 'linkOutline', 'primary', 'blue', 'teal', 'purple', 'red', 'yellow', 'green', 'skeleton'];
+const namedColors = new Set(['black', 'silver', 'gray', 'white', 'maroon', 'red', 'purple', 'fuchsia', 'green', 'lime', 'olive', 'yellow', 'navy', 'blue', 'teal', 'aqua', 'orange', 'aliceblue', 'antiquewhite', 'aquamarine', 'azure', 'beige', 'bisque', 'blanchedalmond', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'limegreen', 'linen', 'magenta', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'oldlace', 'olivedrab', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue', 'tan', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'whitesmoke', 'yellowgreen', 'rebeccapurple']);
+const legacyColors = new Set(['R50', 'R75', 'R100', 'R200', 'R300', 'R400', 'R500', 'Y50', 'Y75', 'Y100', 'Y200', 'Y300', 'Y400', 'Y500', 'G50', 'G75', 'G100', 'G200', 'G300', 'G400', 'G500', 'B50', 'B75', 'B100', 'B200', 'B300', 'B400', 'B500', 'P50', 'P75', 'P100', 'P200', 'P300', 'P400', 'P500', 'T50', 'T75', 'T100', 'T200', 'T300', 'T400', 'T500', 'N0', 'N10', 'N20', 'N30', 'N40', 'N50', 'N60', 'N70', 'N80', 'N90', 'N100', 'N200', 'N300', 'N400', 'N500', 'N600', 'N700', 'N800', 'N900', 'N10A', 'N20A', 'N30A', 'N40A', 'N50A', 'N60A', 'N70A', 'N80A', 'N90A', 'N100A', 'N200A', 'N300A', 'N400A', 'N500A', 'N600A', 'N700A', 'N800A', 'DN900', 'DN800', 'DN700', 'DN600', 'DN500', 'DN400', 'DN300', 'DN200', 'DN100', 'DN90', 'DN80', 'DN70', 'DN60', 'DN50', 'DN40', 'DN30', 'DN20', 'DN10', 'DN0', 'DN800A', 'DN700A', 'DN600A', 'DN500A', 'DN400A', 'DN300A', 'DN200A', 'DN100A', 'DN90A', 'DN80A', 'DN70A', 'DN60A', 'DN50A', 'DN40A', 'DN30A', 'DN20A', 'DN10A', // Legacy Trello colors:
+'AtlassianBlue50', 'AtlassianBlue200', 'AtlassianBlue300', 'AtlassianBlue400', 'TrelloBlue25', 'TrelloBlue50', 'TrelloBlue100', 'TrelloBlue200', 'TrelloBlue300', 'TrelloBlue400', 'TrelloBlue500', 'TrelloBlue600', 'TrelloBlue700', 'TrelloBlue800', 'TrelloBlue900', 'Green50', 'Green100', 'Green200', 'Green300', 'Green400', 'Green500', 'Green600', 'Green700', 'Green800', 'Green900', 'Orange50', 'Orange100', 'Orange200', 'Orange300', 'Orange400', 'Orange500', 'Orange600', 'Orange700', 'Orange800', 'Orange900', 'Red50', 'Red100', 'Red200', 'Red300', 'Red400', 'Red500', 'Red600', 'Red700', 'Red800', 'Red900', 'Yellow50', 'Yellow100', 'Yellow200', 'Yellow300', 'Yellow400', 'Yellow500', 'Yellow600', 'Yellow700', 'Yellow800', 'Yellow900', 'Purple50', 'Purple100', 'Purple200', 'Purple300', 'Purple400', 'Purple500', 'Purple600', 'Purple700', 'Purple800', 'Purple900', 'VioletMbgAlert', 'Pink50', 'Pink100', 'Pink200', 'Pink300', 'Pink400', 'Pink500', 'Pink600', 'Pink700', 'Pink800', 'Pink900', 'Sky25', 'Sky50', 'Sky100', 'Sky200', 'Sky300', 'Sky400', 'Sky500', 'Sky600', 'Sky700', 'Sky800', 'Sky900', 'Lime50', 'Lime100', 'Lime200', 'Lime300', 'Lime400', 'Lime500', 'Lime600', 'Lime700', 'Lime800', 'Lime900', 'BusinessBlue50', 'BusinessBlue100', 'BusinessBlue200', 'BusinessBlue300', 'BusinessBlue400', 'BusinessBlue500', 'BusinessBlue600', 'BusinessBlue700', 'BusinessBlue800', 'BusinessBlue900', 'Opacity1', 'Opacity2', 'Opacity3', 'Opacity4', 'Opacity5', 'Opacity6', 'Opacity7', 'Opacity8', 'Opacity9', 'OpacityDark1', 'OpacityDark2', 'OpacityDark3', 'OpacityDark4', 'OpacityDark5', 'OpacityDark6', 'OpacityDark7', 'OpacityDark8', 'OpacityDark9', 'Black']);
+const legacyColorMixins = new Set(['background', 'backgroundActive', 'backgroundHover', 'backgroundOnLayer', 'text', 'textHover', 'textActive', 'subtleText', 'placeholderText', 'heading', 'subtleHeading', 'codeBlock', 'link', 'linkHover', 'linkActive', 'linkOutline', 'primary', 'blue', 'teal', 'purple', 'red', 'yellow', 'green', 'skeleton']);
 
 const includesWholeWord = (value, options) => {
   const values = value.replace(/[^a-zA-Z ]/g, ' ').trim().split(/(?:,|\.| )+/);
-  let result = false;
-  options.forEach(el => {
-    if (values.includes(el)) {
-      result = true;
-    }
-  });
-  return result;
+  return values.some(value => options.has(value));
 };
 
-export const isLegacyColor = value => legacyColors.includes(value);
-export const isLegacyNamedColor = value => legacyColorMixins.includes(value);
+export const isLegacyColor = value => legacyColors.has(value);
+export const isLegacyNamedColor = value => legacyColorMixins.has(value);
 export const includesHardCodedColor = raw => {
   const value = raw.toLowerCase();
 

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

@@ -21,6 +21,21 @@ export const isDecendantOfType = (node, type, skipNode = true) => {
 
   return false;
 };
+export const isPropertyKey = node => {
+  if (isNodeOfType(node, 'Identifier') && isDecendantOfType(node, 'Property')) {
+    const parent = node.parent;
+    return node === parent.key || parent.shorthand;
+  }
+
+  return false;
+};
+export const isVariableName = node => {
+  if (isNodeOfType(node, 'Identifier') && isDecendantOfType(node, 'VariableDeclarator')) {
+    return node === node.parent.id;
+  }
+
+  return false;
+};
 export const isDecendantOfStyleJsxAttribute = node => {
   // @ts-ignore
   if (node.type === 'JSXAttribute') {

package/dist/es2019/version.json

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

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

@@ -1,7 +1,7 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { includesHardCodedColor, isHardCodedColor, isLegacyColor, isLegacyNamedColor } from '../utils/is-color';
 import { isLegacyElevation } from '../utils/is-elevation';
-import { isChildOfType, isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfStyleJsxAttribute, isDecendantOfType } from '../utils/is-node';
+import { isChildOfType, isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfStyleJsxAttribute, isDecendantOfType, isPropertyKey, isVariableName } from '../utils/is-node';
 var defaultConfig = {
   shouldEnforceFallbacks: false
 };
@@ -47,13 +47,20 @@ var rule = {
   },
   create: function create(context) {
     var config = context.options[0] || defaultConfig;
+
+    var isException = function isException(value) {
+      var _config$exceptions$in, _config$exceptions;
+
+      return (_config$exceptions$in = (_config$exceptions = config.exceptions) === null || _config$exceptions === void 0 ? void 0 : _config$exceptions.includes(value)) !== null && _config$exceptions$in !== void 0 ? _config$exceptions$in : false;
+    };
+
     return {
       'TemplateLiteral > Identifier': function TemplateLiteralIdentifier(node) {
         if (!isDecendantOfStyleBlock(node)) {
           return;
         }
 
-        if (node.type === 'Identifier' && isLegacyNamedColor(node.name)) {
+        if (node.type === 'Identifier' && isLegacyNamedColor(node.name) && !isException(node.name)) {
           context.report({
             messageId: 'hardCodedColor',
             node: node,
@@ -63,17 +70,26 @@ var rule = {
         }
       },
       Identifier: function Identifier(node) {
-        if (isDecendantOfGlobalToken(node) || isDecendantOfType(node, 'ImportDeclaration')) {
+        if (isException(node.name) || isDecendantOfGlobalToken(node) || isDecendantOfType(node, 'ImportDeclaration') || isPropertyKey(node) || isVariableName(node)) {
           return;
         }
 
-        if (isLegacyColor(node.name) || isHardCodedColor(node.name)) {
-          if (node.parent.type === 'MemberExpression' && node.parent.object.type === 'Identifier') {
-            context.report({
-              messageId: 'hardCodedColor',
-              node: node,
-              suggest: getTokenSuggestion(node.parent, "".concat(node.parent.object.name, ".").concat(node.name), config)
-            });
+        var isNodeLegacyColor = isLegacyColor(node.name);
+
+        if (isNodeLegacyColor || isHardCodedColor(node.name)) {
+          if (node.parent.type === 'MemberExpression') {
+            if (node.parent.object.type === 'Identifier') {
+              // Object members as named colors, like obj.ivory, should be valid,
+              // and hexes and color functions cannot be property names anyway.
+              if (isNodeLegacyColor) {
+                context.report({
+                  messageId: 'hardCodedColor',
+                  node: node,
+                  suggest: getTokenSuggestion(node.parent, "".concat(node.parent.object.name, ".").concat(node.name), config)
+                });
+              }
+            }
+
             return;
           }
 
@@ -144,6 +160,10 @@ var rule = {
           return;
         }
 
+        if (isException(node.value)) {
+          return;
+        }
+
         if (isHardCodedColor(node.value) || includesHardCodedColor(node.value)) {
           context.report({
             messageId: 'hardCodedColor',
@@ -162,7 +182,7 @@ var rule = {
           return;
         }
 
-        if (!isLegacyNamedColor(node.callee.name) || isDecendantOfGlobalToken(node)) {
+        if (!isLegacyNamedColor(node.callee.name) || isDecendantOfGlobalToken(node) || isException(node.callee.name)) {
           return;
         }
 
@@ -181,13 +201,21 @@ var rule = {
           return;
         }
 
-        if (node.value.type === 'Literal' && (isHardCodedColor(node.value.value) || includesHardCodedColor(node.value.value))) {
-          context.report({
-            messageId: 'hardCodedColor',
-            node: node,
-            suggest: getTokenSuggestion(node.value, node.value.value, config)
-          });
-          return;
+        if (node.value.type === 'Literal') {
+          var literalValue = node.value.value;
+
+          if (isException(literalValue)) {
+            return;
+          }
+
+          if (isHardCodedColor(literalValue) || includesHardCodedColor(literalValue)) {
+            context.report({
+              messageId: 'hardCodedColor',
+              node: node,
+              suggest: getTokenSuggestion(node.value, literalValue, config)
+            });
+            return;
+          }
         }
       }
     };

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

@@ -1,23 +1,20 @@
-var namedColors = ['black', 'silver', 'gray', 'white', 'maroon', 'red', 'purple', 'fuchsia', 'green', 'lime', 'olive', 'yellow', 'navy', 'blue', 'teal', 'aqua', 'orange', 'aliceblue', 'antiquewhite', 'aquamarine', 'azure', 'beige', 'bisque', 'blanchedalmond', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'limegreen', 'linen', 'magenta', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'oldlace', 'olivedrab', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue', 'tan', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'whitesmoke', 'yellowgreen', 'rebeccapurple'];
-var legacyColors = ['R50', 'R75', 'R100', 'R200', 'R300', 'R400', 'R500', 'Y50', 'Y75', 'Y100', 'Y200', 'Y300', 'Y400', 'Y500', 'G50', 'G75', 'G100', 'G200', 'G300', 'G400', 'G500', 'B50', 'B75', 'B100', 'B200', 'B300', 'B400', 'B500', 'P50', 'P75', 'P100', 'P200', 'P300', 'P400', 'P500', 'T50', 'T75', 'T100', 'T200', 'T300', 'T400', 'T500', 'N0', 'N10', 'N20', 'N30', 'N40', 'N50', 'N60', 'N70', 'N80', 'N90', 'N100', 'N200', 'N300', 'N400', 'N500', 'N600', 'N700', 'N800', 'N900', 'N10A', 'N20A', 'N30A', 'N40A', 'N50A', 'N60A', 'N70A', 'N80A', 'N90A', 'N100A', 'N200A', 'N300A', 'N400A', 'N500A', 'N600A', 'N700A', 'N800A', 'DN900', 'DN800', 'DN700', 'DN600', 'DN500', 'DN400', 'DN300', 'DN200', 'DN100', 'DN90', 'DN80', 'DN70', 'DN60', 'DN50', 'DN40', 'DN30', 'DN20', 'DN10', 'DN0', 'DN800A', 'DN700A', 'DN600A', 'DN500A', 'DN400A', 'DN300A', 'DN200A', 'DN100A', 'DN90A', 'DN80A', 'DN70A', 'DN60A', 'DN50A', 'DN40A', 'DN30A', 'DN20A', 'DN10A'];
-var legacyColorMixins = ['background', 'backgroundActive', 'backgroundHover', 'backgroundOnLayer', 'text', 'textHover', 'textActive', 'subtleText', 'placeholderText', 'heading', 'subtleHeading', 'codeBlock', 'link', 'linkHover', 'linkActive', 'linkOutline', 'primary', 'blue', 'teal', 'purple', 'red', 'yellow', 'green', 'skeleton'];
+var namedColors = new Set(['black', 'silver', 'gray', 'white', 'maroon', 'red', 'purple', 'fuchsia', 'green', 'lime', 'olive', 'yellow', 'navy', 'blue', 'teal', 'aqua', 'orange', 'aliceblue', 'antiquewhite', 'aquamarine', 'azure', 'beige', 'bisque', 'blanchedalmond', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'limegreen', 'linen', 'magenta', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'oldlace', 'olivedrab', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue', 'tan', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'whitesmoke', 'yellowgreen', 'rebeccapurple']);
+var legacyColors = new Set(['R50', 'R75', 'R100', 'R200', 'R300', 'R400', 'R500', 'Y50', 'Y75', 'Y100', 'Y200', 'Y300', 'Y400', 'Y500', 'G50', 'G75', 'G100', 'G200', 'G300', 'G400', 'G500', 'B50', 'B75', 'B100', 'B200', 'B300', 'B400', 'B500', 'P50', 'P75', 'P100', 'P200', 'P300', 'P400', 'P500', 'T50', 'T75', 'T100', 'T200', 'T300', 'T400', 'T500', 'N0', 'N10', 'N20', 'N30', 'N40', 'N50', 'N60', 'N70', 'N80', 'N90', 'N100', 'N200', 'N300', 'N400', 'N500', 'N600', 'N700', 'N800', 'N900', 'N10A', 'N20A', 'N30A', 'N40A', 'N50A', 'N60A', 'N70A', 'N80A', 'N90A', 'N100A', 'N200A', 'N300A', 'N400A', 'N500A', 'N600A', 'N700A', 'N800A', 'DN900', 'DN800', 'DN700', 'DN600', 'DN500', 'DN400', 'DN300', 'DN200', 'DN100', 'DN90', 'DN80', 'DN70', 'DN60', 'DN50', 'DN40', 'DN30', 'DN20', 'DN10', 'DN0', 'DN800A', 'DN700A', 'DN600A', 'DN500A', 'DN400A', 'DN300A', 'DN200A', 'DN100A', 'DN90A', 'DN80A', 'DN70A', 'DN60A', 'DN50A', 'DN40A', 'DN30A', 'DN20A', 'DN10A', // Legacy Trello colors:
+'AtlassianBlue50', 'AtlassianBlue200', 'AtlassianBlue300', 'AtlassianBlue400', 'TrelloBlue25', 'TrelloBlue50', 'TrelloBlue100', 'TrelloBlue200', 'TrelloBlue300', 'TrelloBlue400', 'TrelloBlue500', 'TrelloBlue600', 'TrelloBlue700', 'TrelloBlue800', 'TrelloBlue900', 'Green50', 'Green100', 'Green200', 'Green300', 'Green400', 'Green500', 'Green600', 'Green700', 'Green800', 'Green900', 'Orange50', 'Orange100', 'Orange200', 'Orange300', 'Orange400', 'Orange500', 'Orange600', 'Orange700', 'Orange800', 'Orange900', 'Red50', 'Red100', 'Red200', 'Red300', 'Red400', 'Red500', 'Red600', 'Red700', 'Red800', 'Red900', 'Yellow50', 'Yellow100', 'Yellow200', 'Yellow300', 'Yellow400', 'Yellow500', 'Yellow600', 'Yellow700', 'Yellow800', 'Yellow900', 'Purple50', 'Purple100', 'Purple200', 'Purple300', 'Purple400', 'Purple500', 'Purple600', 'Purple700', 'Purple800', 'Purple900', 'VioletMbgAlert', 'Pink50', 'Pink100', 'Pink200', 'Pink300', 'Pink400', 'Pink500', 'Pink600', 'Pink700', 'Pink800', 'Pink900', 'Sky25', 'Sky50', 'Sky100', 'Sky200', 'Sky300', 'Sky400', 'Sky500', 'Sky600', 'Sky700', 'Sky800', 'Sky900', 'Lime50', 'Lime100', 'Lime200', 'Lime300', 'Lime400', 'Lime500', 'Lime600', 'Lime700', 'Lime800', 'Lime900', 'BusinessBlue50', 'BusinessBlue100', 'BusinessBlue200', 'BusinessBlue300', 'BusinessBlue400', 'BusinessBlue500', 'BusinessBlue600', 'BusinessBlue700', 'BusinessBlue800', 'BusinessBlue900', 'Opacity1', 'Opacity2', 'Opacity3', 'Opacity4', 'Opacity5', 'Opacity6', 'Opacity7', 'Opacity8', 'Opacity9', 'OpacityDark1', 'OpacityDark2', 'OpacityDark3', 'OpacityDark4', 'OpacityDark5', 'OpacityDark6', 'OpacityDark7', 'OpacityDark8', 'OpacityDark9', 'Black']);
+var legacyColorMixins = new Set(['background', 'backgroundActive', 'backgroundHover', 'backgroundOnLayer', 'text', 'textHover', 'textActive', 'subtleText', 'placeholderText', 'heading', 'subtleHeading', 'codeBlock', 'link', 'linkHover', 'linkActive', 'linkOutline', 'primary', 'blue', 'teal', 'purple', 'red', 'yellow', 'green', 'skeleton']);
 
 var includesWholeWord = function includesWholeWord(value, options) {
   var values = value.replace(/[^a-zA-Z ]/g, ' ').trim().split(/(?:,|\.| )+/);
-  var result = false;
-  options.forEach(function (el) {
-    if (values.includes(el)) {
-      result = true;
-    }
+  return values.some(function (value) {
+    return options.has(value);
   });
-  return result;
 };
 
 export var isLegacyColor = function isLegacyColor(value) {
-  return legacyColors.includes(value);
+  return legacyColors.has(value);
 };
 export var isLegacyNamedColor = function isLegacyNamedColor(value) {
-  return legacyColorMixins.includes(value);
+  return legacyColorMixins.has(value);
 };
 export var includesHardCodedColor = function includesHardCodedColor(raw) {
   var value = raw.toLowerCase();

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

@@ -23,6 +23,21 @@ export var isDecendantOfType = function isDecendantOfType(node, type) {
 
   return false;
 };
+export var isPropertyKey = function isPropertyKey(node) {
+  if (isNodeOfType(node, 'Identifier') && isDecendantOfType(node, 'Property')) {
+    var parent = node.parent;
+    return node === parent.key || parent.shorthand;
+  }
+
+  return false;
+};
+export var isVariableName = function isVariableName(node) {
+  if (isNodeOfType(node, 'Identifier') && isDecendantOfType(node, 'VariableDeclarator')) {
+    return node === node.parent.id;
+  }
+
+  return false;
+};
 export var isDecendantOfStyleJsxAttribute = function isDecendantOfStyleJsxAttribute(node) {
   // @ts-ignore
   if (node.type === 'JSXAttribute') {

package/dist/esm/version.json

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

package/dist/types/rules/utils/is-node.d.ts

@@ -2,6 +2,8 @@ import type { Rule } from 'eslint';
 import { CallExpression, Expression, TaggedTemplateExpression } from 'eslint-codemod-utils';
 export declare const isDecendantOfGlobalToken: (node: Rule.Node) => boolean;
 export declare const isDecendantOfType: (node: Rule.Node, type: Rule.Node['type'], skipNode?: boolean) => boolean;
+export declare const isPropertyKey: (node: Rule.Node) => boolean;
+export declare const isVariableName: (node: Rule.Node) => boolean;
 export declare const isDecendantOfStyleJsxAttribute: (node: Rule.Node) => boolean;
 export declare const isStyledTemplateNode: (node?: Expression | null | undefined) => node is TaggedTemplateExpression;
 export declare const isStyledObjectNode: (node?: Expression | null | undefined) => node is CallExpression;

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.8.1",
+  "version": "4.10.0",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,12 +35,12 @@
     "@atlaskit/theme": "^12.0.2",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/core": "^10.0.9",
-    "@emotion/styled": "^10.0.7",
+    "@emotion/styled": "^11.0.0",
     "eslint": "^7.7.0",
     "react": "^16.8.0",
     "ts-node": "^10.0.0",
     "tsconfig-paths": "^3.9.0",
-    "typescript": "4.2.4"
+    "typescript": "4.3.5"
   },
   "techstack": {
     "@atlassian/frontend": {