@atlaskit/eslint-plugin-design-system 4.9.0 → 4.11.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 4.11.0
+
+### Minor Changes
+
+- [`268f92124e2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/268f92124e2) - Bolster isException logic to support descendants of excepted functions and to be case-agnostic
+
+## 4.10.1
+
+### Patch Changes
+
+- [`d76851b2f42`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d76851b2f42) - Improved NaN handling and output
+- [`0544fe823d1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0544fe823d1) - Updates to account for nested unary selectors.
+- [`1ed3db0c9be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1ed3db0c9be) - Improvements to lint rule and accounting for edge cases
+
+## 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

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

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 
+var _getIsException = require("../utils/get-is-exception");
+
 var _isColor = require("../utils/is-color");
 
 var _isElevation = require("../utils/is-elevation");
@@ -58,13 +60,14 @@ var rule = {
   },
   create: function create(context) {
     var config = context.options[0] || defaultConfig;
+    var isException = (0, _getIsException.getIsException)(config.exceptions);
     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)) {
           context.report({
             messageId: 'hardCodedColor',
             node: node,
@@ -74,22 +77,24 @@ var rule = {
         }
       },
       Identifier: function Identifier(node) {
-        if ((0, _isNode.isDecendantOfGlobalToken)(node) || (0, _isNode.isDecendantOfType)(node, 'ImportDeclaration') || (0, _isNode.isPropertyKey)(node) || (0, _isNode.isVariableName)(node)) {
+        if (isException(node) || (0, _isNode.isDecendantOfGlobalToken)(node) || (0, _isNode.isDecendantOfType)(node, 'ImportDeclaration') || (0, _isNode.isPropertyKey)(node) || (0, _isNode.isVariableName)(node)) {
           return;
         }
 
-        var isNodeHardCodedColor = (0, _isColor.isHardCodedColor)(node.name);
-
-        if ((0, _isColor.isLegacyColor)(node.name) || isNodeHardCodedColor) {
-          if (node.parent.type === 'MemberExpression' && 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 (!isNodeHardCodedColor) {
-              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;
@@ -150,11 +155,7 @@ var rule = {
         });
       },
       'ObjectExpression > Property > Literal': function ObjectExpressionPropertyLiteral(node) {
-        if (node.type !== 'Literal') {
-          return;
-        }
-
-        if (typeof node.value !== 'string') {
+        if (node.type !== 'Literal' || typeof node.value !== 'string') {
           return;
         }
 
@@ -162,7 +163,7 @@ var rule = {
           return;
         }
 
-        if ((0, _isColor.isHardCodedColor)(node.value) || (0, _isColor.includesHardCodedColor)(node.value)) {
+        if (((0, _isColor.isHardCodedColor)(node.value) || (0, _isColor.includesHardCodedColor)(node.value)) && !isException(node)) {
           context.report({
             messageId: 'hardCodedColor',
             node: node,
@@ -180,7 +181,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)) {
           return;
         }
 
@@ -199,13 +200,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') {
+          if (isException(node)) {
+            return;
+          }
+
+          var literalValue = node.value.value;
+
+          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/no-raw-spacing-values/index.js

@@ -13,6 +13,12 @@ var _eslintCodemodUtils = require("eslint-codemod-utils");
 
 var _utils = require("./utils");
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 var rule = {
   meta: {
     type: 'problem',
@@ -33,7 +39,7 @@ var rule = {
           return;
         }
         /**
-         * We do this in case we the fontSize for a style object is declared alongside the `em` or `lineHeight` declaration
+         * We do this in case the fontSize for a style object is declared alongside the `em` or `lineHeight` declaration
          */
 
 
@@ -64,26 +70,36 @@ var rule = {
             return;
           }
 
+          if (node.value.type === 'Literal' && !(0, _utils.isValidSpacingValue)(node.value.value, fontSize)) {
+            context.report({
+              node: node,
+              messageId: 'noRawSpacingValues',
+              data: {
+                payload: "NaN:".concat(node.value.value)
+              }
+            });
+            return;
+          }
+
           var value = (0, _utils.getValue)(node.value, context);
 
-          if (value) {
+          if (value && (0, _utils.isValidSpacingValue)(value, fontSize)) {
             var values = typeof value === 'number' || typeof value === 'string' ? [value] : value;
-            values.forEach(function (value) {
+            values.forEach(function (val) {
               context.report({
                 node: node,
                 messageId: 'noRawSpacingValues',
                 data: {
-                  payload: "".concat(node.key.name, ":").concat((0, _utils.emToPixels)(value, fontSize))
+                  payload: "".concat(node.key.name, ":").concat((0, _utils.emToPixels)(val, fontSize))
                 }
               });
             });
-            return;
           } else {
             context.report({
               node: node,
               messageId: 'noRawSpacingValues',
               data: {
-                payload: "".concat(node.key.name, ":NaN")
+                payload: "NaN:".concat(value)
               }
             });
           }
@@ -106,7 +122,9 @@ var rule = {
          * Adapted from ensure-design-token-usage
          */
 
-        var cssProperties = combinedString.replace(/\n/g, '').split(/;|{|}/).map(function (el) {
+        var cssProperties = combinedString.split('\n').filter(function (line) {
+          return !line.trim().startsWith('@');
+        }).join('\n').replace(/\n/g, '').split(/;|{|}/).map(function (el) {
           return el.trim() || '';
         });
         cssProperties.map(function (style) {
@@ -115,14 +133,41 @@ var rule = {
               property = _style$split2[0],
               value = _style$split2[1];
 
+          property = (0, _utils.convertHyphenatedNameToCamelCase)(property);
+
           if ((0, _utils.isSpacingProperty)(property)) {
-            context.report({
-              node: node,
-              messageId: 'noRawSpacingValues',
-              data: {
-                payload: "".concat(property, ":").concat((0, _utils.removePixelSuffix)(value.trim()))
+            if ((0, _utils.isValidSpacingValue)(value)) {
+              var values = (0, _utils.getValueFromShorthand)(value);
+
+              var _iterator = _createForOfIteratorHelper(values),
+                  _step;
+
+              try {
+                for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                  var val = _step.value;
+                  // could be array of values e.g. padding: 8px 12px 3px
+                  context.report({
+                    node: node,
+                    messageId: 'noRawSpacingValues',
+                    data: {
+                      payload: "".concat(property, ":").concat(val)
+                    }
+                  });
+                }
+              } catch (err) {
+                _iterator.e(err);
+              } finally {
+                _iterator.f();
               }
-            });
+            } else {
+              context.report({
+                node: node,
+                messageId: 'noRawSpacingValues',
+                data: {
+                  payload: "NaN:".concat(value)
+                }
+              });
+            }
           }
 
           return;

package/dist/cjs/rules/no-raw-spacing-values/utils.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.emToPixels = void 0;
+exports.emToPixels = exports.convertHyphenatedNameToCamelCase = void 0;
 exports.findIdentifierInParentScope = findIdentifierInParentScope;
-exports.removePixelSuffix = exports.isSpacingProperty = exports.getValueFromShorthand = exports.getValue = void 0;
+exports.removePixelSuffix = exports.isValidSpacingValue = exports.isSpacingProperty = exports.getValueFromShorthand = exports.getValue = void 0;
 
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 
-var properties = ['padding', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'margin', 'gap', 'fontSize', 'lineHeight', 'width', 'height'];
+var properties = ['padding', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'margin', 'gap', 'fontSize', 'lineHeight', 'width', 'height', 'rowGap', 'gridRowGap', 'columnGap', 'gridColumnGap'];
 
 function findIdentifierInParentScope(_ref) {
   var scope = _ref.scope,
@@ -123,6 +123,10 @@ var getValueFromIdentifier = function getValueFromIdentifier(node, context) {
 
   var definition = variable.defs[0];
 
+  if ((0, _eslintCodemodUtils.isNodeOfType)(definition.node, 'ImportSpecifier') && (0, _eslintCodemodUtils.isNodeOfType)(definition.node.parent, 'ImportDeclaration') && definition.node.parent.source.value === '@atlassian/jira-common-legacy-do-not-add-anything-new/src/styles') {
+    return definition.node.imported.name === 'gridSize' ? 8 : null;
+  }
+
   if (!(0, _eslintCodemodUtils.isNodeOfType)(definition.node, 'VariableDeclarator')) {
     return null;
   }
@@ -146,7 +150,7 @@ var getValueFromUnaryExpression = function getValueFromUnaryExpression(node, con
   } // eslint-disable-next-line no-eval
 
 
-  return eval("".concat(node.operator).concat(value));
+  return eval("".concat(node.operator, "(").concat(value, ")"));
 };
 /**
  * @example
@@ -198,9 +202,9 @@ var emToPixels = function emToPixels(value, fontSize) {
 
     if (match && typeof fontSize === 'number') {
       return Number(match[1]) * fontSize;
+    } else {
+      return null;
     }
-
-    return 'NaN';
   }
 
   return value;
@@ -220,4 +224,37 @@ var removePixelSuffix = function removePixelSuffix(value) {
   return Number(isString ? value.replace('px', '') : value);
 };
 
-exports.removePixelSuffix = removePixelSuffix;
+exports.removePixelSuffix = removePixelSuffix;
+var invalidSpacingUnitRegex = /(%$)|(\d+rem$)|(^calc)|(vw$)|(vh$)/;
+
+var isValidSpacingValue = function isValidSpacingValue(value, fontSize) {
+  if (typeof value === 'string') {
+    if (invalidSpacingUnitRegex.test(value)) {
+      return false;
+    }
+  } else if (Array.isArray(value)) {
+    // could be array due to shorthand
+    for (var val in value) {
+      if (invalidSpacingUnitRegex.test(val)) {
+        return false;
+      }
+    }
+  }
+
+  if (emRegex.test(value) && typeof fontSize !== 'number') {
+    return false;
+  }
+
+  return true;
+}; // convert line-height to lineHeight
+
+
+exports.isValidSpacingValue = isValidSpacingValue;
+
+var convertHyphenatedNameToCamelCase = function convertHyphenatedNameToCamelCase(prop) {
+  return prop.replace(/-./g, function (m) {
+    return m[1].toUpperCase();
+  });
+};
+
+exports.convertHyphenatedNameToCamelCase = convertHyphenatedNameToCamelCase;

package/dist/cjs/rules/utils/get-is-exception.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getIsException = void 0;
+
+var getNodeValue = function getNodeValue(node) {
+  var _node$value;
+
+  switch (node.type) {
+    case 'Identifier':
+      return node.name;
+
+    case 'Literal':
+      return typeof node.value === 'string' ? node.value : null;
+
+    case 'CallExpression':
+      return node.callee.type === 'Identifier' ? node.callee.name : null;
+    // @ts-expect-error
+
+    case 'JSXAttribute':
+      // @ts-expect-error
+      return ((_node$value = node.value) === null || _node$value === void 0 ? void 0 : _node$value.type) === 'Literal' ? node.value.value : null;
+
+    default:
+      return null;
+  }
+};
+
+var getIsException = function getIsException(exceptions) {
+  if (!(exceptions !== null && exceptions !== void 0 && exceptions.length)) {
+    return function () {
+      return false;
+    };
+  }
+
+  var exceptionsSet = new Set(exceptions.map(function (x) {
+    return x.toLowerCase();
+  }));
+
+  var isException = function isException(node) {
+    var value = getNodeValue(node);
+
+    if (value) {
+      var splitValues = value.split(/[-_\s]+/);
+
+      if (splitValues.some(function (v) {
+        return exceptionsSet.has(v.toLowerCase());
+      })) {
+        return true;
+      }
+    }
+
+    if (node.parent) {
+      return isException(node.parent);
+    }
+
+    return false;
+  };
+
+  return isException;
+};
+
+exports.getIsException = getIsException;

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/version.json

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

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

@@ -1,4 +1,5 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
+import { getIsException } from '../utils/get-is-exception';
 import { includesHardCodedColor, isHardCodedColor, isLegacyColor, isLegacyNamedColor } from '../utils/is-color';
 import { isLegacyElevation } from '../utils/is-elevation';
 import { isChildOfType, isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfStyleJsxAttribute, isDecendantOfType, isPropertyKey, isVariableName } from '../utils/is-node';
@@ -49,13 +50,14 @@ token('color.background.blanket');
 
   create(context) {
     const config = context.options[0] || defaultConfig;
+    const isException = getIsException(config.exceptions);
     return {
       'TemplateLiteral > Identifier': node => {
         if (!isDecendantOfStyleBlock(node)) {
           return;
         }
 
-        if (node.type === 'Identifier' && isLegacyNamedColor(node.name)) {
+        if (node.type === 'Identifier' && isLegacyNamedColor(node.name) && !isException(node)) {
           context.report({
             messageId: 'hardCodedColor',
             node,
@@ -66,22 +68,24 @@ token('color.background.blanket');
       },
 
       Identifier(node) {
-        if (isDecendantOfGlobalToken(node) || isDecendantOfType(node, 'ImportDeclaration') || isPropertyKey(node) || isVariableName(node)) {
+        if (isException(node) || isDecendantOfGlobalToken(node) || isDecendantOfType(node, 'ImportDeclaration') || isPropertyKey(node) || isVariableName(node)) {
           return;
         }
 
-        const isNodeHardCodedColor = isHardCodedColor(node.name);
-
-        if (isLegacyColor(node.name) || isNodeHardCodedColor) {
-          if (node.parent.type === 'MemberExpression' && 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 (!isNodeHardCodedColor) {
-              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;
@@ -147,11 +151,7 @@ ${' '.repeat(getNodeColumn(node) - 2)}box-shadow: \${token('${elevation.shadow}'
         });
       },
       'ObjectExpression > Property > Literal': node => {
-        if (node.type !== 'Literal') {
-          return;
-        }
-
-        if (typeof node.value !== 'string') {
+        if (node.type !== 'Literal' || typeof node.value !== 'string') {
           return;
         }
 
@@ -159,7 +159,7 @@ ${' '.repeat(getNodeColumn(node) - 2)}box-shadow: \${token('${elevation.shadow}'
           return;
         }
 
-        if (isHardCodedColor(node.value) || includesHardCodedColor(node.value)) {
+        if ((isHardCodedColor(node.value) || includesHardCodedColor(node.value)) && !isException(node)) {
           context.report({
             messageId: 'hardCodedColor',
             node,
@@ -178,7 +178,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)) {
           return;
         }
 
@@ -198,13 +198,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') {
+          if (isException(node)) {
+            return;
+          }
+
+          const literalValue = node.value.value;
+
+          if (isHardCodedColor(literalValue) || includesHardCodedColor(literalValue)) {
+            context.report({
+              messageId: 'hardCodedColor',
+              node,
+              suggest: getTokenSuggestion(node.value, literalValue, config)
+            });
+            return;
+          }
         }
       }