@atlaskit/eslint-plugin-design-system 5.1.0 → 5.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 5.3.0
+
+### Minor Changes
+
+- [`51a48a1bb1b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/51a48a1bb1b) - Update docs to accept a `severity` property so the purpose of `recommended` is no longer double. "all" preset now respects this preference - before it was always "error". This makes the presets more aligned with the underlying implementations."
+
+## 5.2.0
+
+### Minor Changes
+
+- [`11e5168f1c2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/11e5168f1c2) - Internal refactor of ensure-design-token-usage which also addresses some false positives
+
 ## 5.1.0
 
 ### Minor Changes

package/README.md

@@ -58,7 +58,7 @@ module.exports = {
 | <a href="./src/rules/no-deprecated-imports/README.md">no-deprecated-imports</a>                         | Disallow importing deprecated modules.                                                          | Yes         |         |             |
 | <a href="./src/rules/no-margin/README.md">no-margin</a>                                                 | Disallow using the margin CSS property.                                                         |             |         |             |
 | <a href="./src/rules/no-unsafe-design-token-usage/README.md">no-unsafe-design-token-usage</a>           | Enforces design token usage is statically and locally analyzable.                               | Yes         | Yes     |             |
-| <a href="./src/rules/use-primitives/README.md">use-primitives</a>                                       | Encourage the usage of primitives components.                                                   |             | Yes     |             |
+| <a href="./src/rules/use-primitives/README.md">use-primitives</a>                                       | Encourage the usage of primitives components.                                                   |             | Yes     | Yes         |
 | <a href="./src/rules/use-visually-hidden/README.md">use-visually-hidden</a>                             | Enforce usage of the visually hidden component.                                                 | Yes         | Yes     |             |
 
 <!-- END_RULE_TABLE_CODEGEN -->

package/constellation/index/usage.mdx

@@ -22,7 +22,7 @@ This plugin contains rules that should be used when working with the [Atlassian
 | <a href="#no-deprecated-imports">no-deprecated-imports</a>                         | Disallow importing deprecated modules.                                                          | Yes         |         |             |
 | <a href="#no-margin">no-margin</a>                                                 | Disallow using the margin CSS property.                                                         |             |         |             |
 | <a href="#no-unsafe-design-token-usage">no-unsafe-design-token-usage</a>           | Enforces design token usage is statically and locally analyzable.                               | Yes         | Yes     |             |
-| <a href="#use-primitives">use-primitives</a>                                       | Encourage the usage of primitives components.                                                   |             | Yes     |             |
+| <a href="#use-primitives">use-primitives</a>                                       | Encourage the usage of primitives components.                                                   |             | Yes     | Yes         |
 | <a href="#use-visually-hidden">use-visually-hidden</a>                             | Enforce usage of the visually hidden component.                                                 | Yes         | Yes     |             |
 
 <!-- END_RULE_TABLE_CODEGEN -->

package/dist/cjs/presets/all.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::536ea9ab01a5dbae76af59e8ca84f921>>
+ * @codegen <<SignedSource::3f9b973d6350522de7bd32f13c58ce56>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = {
@@ -14,14 +14,14 @@ var _default = {
   rules: {
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage-spacing': 'error',
-    '@atlaskit/design-system/icon-label': 'error',
+    '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-deprecated-apis': 'error',
-    '@atlaskit/design-system/no-deprecated-design-token-usage': 'error',
+    '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
     '@atlaskit/design-system/no-deprecated-imports': 'error',
-    '@atlaskit/design-system/no-margin': 'error',
+    '@atlaskit/design-system/no-margin': 'warn',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
-    '@atlaskit/design-system/use-primitives': 'error',
+    '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }
 };

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

@@ -1,21 +1,22 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _escodegenWallaby = _interopRequireDefault(require("escodegen-wallaby"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _createRule = require("../utils/create-rule");
 var _getIsException = require("../utils/get-is-exception");
 var _isColor = require("../utils/is-color");
 var _isElevation = require("../utils/is-elevation");
 var _isNode = require("../utils/is-node");
+// @ts-expect-error
+
 var defaultConfig = {
   shouldEnforceFallbacks: false
 };
-var getNodeColumn = function getNodeColumn(node) {
-  return node.loc ? node.loc.start.column : 0;
-};
 var getTokenSuggestion = function getTokenSuggestion(node, reference, config) {
   return [{
     shouldReturnSuggestion: !(0, _isNode.isDecendantOfGlobalToken)(node) && config.shouldEnforceFallbacks === false,
@@ -31,6 +32,9 @@ var getTokenSuggestion = function getTokenSuggestion(node, reference, config) {
     }
   }].filter(filterSuggestion);
 };
+var getNodeColumn = function getNodeColumn(node) {
+  return node.loc ? node.loc.start.column : 0;
+};
 var filterSuggestion = function filterSuggestion(_ref) {
   var shouldReturnSuggestion = _ref.shouldReturnSuggestion;
   return shouldReturnSuggestion;
@@ -41,7 +45,8 @@ var rule = (0, _createRule.createLintRule)({
     hasSuggestions: true,
     docs: {
       description: 'Enforces usage of design tokens.',
-      recommended: 'error'
+      recommended: true,
+      severity: 'error'
     },
     fixable: 'code',
     type: 'problem',
@@ -55,43 +60,10 @@ var rule = (0, _createRule.createLintRule)({
     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) && !isException(node)) {
-          context.report({
-            messageId: 'hardCodedColor',
-            node: node,
-            suggest: getTokenSuggestion(node, node.name, config)
-          });
+        if (node.type !== 'Identifier') {
           return;
         }
-      },
-      Identifier: function Identifier(node) {
-        if (isException(node) || (0, _isNode.isDecendantOfGlobalToken)(node) || (0, _isNode.isDecendantOfType)(node, 'SwitchCase') || (0, _isNode.isDecendantOfType)(node, 'ImportDeclaration') || (0, _isNode.isDecendantOfType)(node, 'IfStatement') || (0, _isNode.isPropertyKey)(node) || (0, _isNode.isVariableName)(node)) {
-          return;
-        }
-        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;
-          }
-          context.report({
-            messageId: 'hardCodedColor',
-            node: node,
-            suggest: getTokenSuggestion(node, node.name, config)
-          });
+        if ((0, _isNode.isDecendantOfGlobalToken)(node) || !(0, _isNode.isDecendantOfStyleBlock)(node)) {
           return;
         }
         var elevation = (0, _isElevation.isLegacyElevation)(node.name);
@@ -110,6 +82,14 @@ var rule = (0, _createRule.createLintRule)({
             }
           });
         }
+        if (((0, _isColor.isLegacyColor)(node.name) || (0, _isColor.isLegacyNamedColor)(node.name)) && !isException(node)) {
+          context.report({
+            messageId: 'hardCodedColor',
+            node: node,
+            suggest: getTokenSuggestion(node, node.name, config)
+          });
+          return;
+        }
       },
       'TaggedTemplateExpression[tag.name="css"],TaggedTemplateExpression[tag.object.name="styled"]': function TaggedTemplateExpressionTagNameCssTaggedTemplateExpressionTagObjectNameStyled(node) {
         if (node.type !== 'TaggedTemplateExpression') {
@@ -137,58 +117,154 @@ var rule = (0, _createRule.createLintRule)({
           }
         });
       },
+      'ObjectExpression > Property > Identifier, ObjectExpression > Property > MemberExpression': function ObjectExpressionPropertyIdentifierObjectExpressionPropertyMemberExpression(node) {
+        if ((0, _isNode.isDecendantOfGlobalToken)(node)) {
+          return;
+        }
+        var property = node.parent;
+        var propertyKey = '';
+        if (property.key.type === 'Identifier') {
+          propertyKey = property.key.name.toString();
+        }
+        if (property.key.type === 'Literal') {
+          var _property$key$value;
+          propertyKey = ((_property$key$value = property.key.value) === null || _property$key$value === void 0 ? void 0 : _property$key$value.toString()) || '';
+        }
+        if (!(0, _isColor.isColorCssPropertyName)(propertyKey)) {
+          return;
+        }
+        if (!(0, _isNode.isDecendantOfStyleBlock)(node) && !(0, _isNode.isDecendantOfType)(node, 'JSXExpressionContainer')) {
+          return;
+        }
+        var identifierNode;
+        if (node.type === 'Identifier') {
+          // identifier is the key and not the value
+          if (node.name === propertyKey) {
+            return;
+          }
+          identifierNode = node;
+        }
+        if (node.type === 'MemberExpression') {
+          if (node.property.type !== 'Identifier') {
+            context.report({
+              messageId: 'hardCodedColor',
+              node: node,
+              suggest: getTokenSuggestion(node, _escodegenWallaby.default.generate(node), config)
+            });
+            return;
+          }
+          identifierNode = node.property;
+        }
+        if (((0, _isColor.isHardCodedColor)(identifierNode.name) || (0, _isColor.includesHardCodedColor)(identifierNode.name) || (0, _isColor.isLegacyColor)(identifierNode.name)) && !isException(identifierNode)) {
+          context.report({
+            messageId: 'hardCodedColor',
+            node: identifierNode,
+            suggest: getTokenSuggestion(identifierNode, identifierNode.name, config)
+          });
+          return;
+        }
+      },
       'ObjectExpression > Property > Literal': function ObjectExpressionPropertyLiteral(node) {
-        if (node.type !== 'Literal' || typeof node.value !== 'string') {
+        var _node$value;
+        if (node.type !== 'Literal') {
+          return;
+        }
+        if ((0, _isNode.isDecendantOfGlobalToken)(node)) {
           return;
         }
-        if (!(0, _isNode.isDecendantOfStyleBlock)(node) && !(0, _isNode.isDecendantOfStyleJsxAttribute)(node)) {
+        if (!(0, _isNode.isDecendantOfStyleBlock)(node) && !(0, _isNode.isDecendantOfType)(node, 'JSXExpressionContainer')) {
           return;
         }
-        if (((0, _isColor.isHardCodedColor)(node.value) || (0, _isColor.includesHardCodedColor)(node.value)) && !isException(node)) {
+        var nodeVal = ((_node$value = node.value) === null || _node$value === void 0 ? void 0 : _node$value.toString()) || '';
+        if (((0, _isColor.isHardCodedColor)(nodeVal) || (0, _isColor.includesHardCodedColor)(nodeVal)) && !isException(node)) {
           context.report({
             messageId: 'hardCodedColor',
             node: node,
-            suggest: getTokenSuggestion(node, "'".concat(node.value, "'"), config)
+            suggest: getTokenSuggestion(node, "'".concat(nodeVal, "'"), config)
           });
-          return;
         }
       },
-      CallExpression: function CallExpression(node) {
-        if (node.type !== 'CallExpression' || node.callee.type !== 'Identifier') {
+      'ObjectExpression > Property > CallExpression': function ObjectExpressionPropertyCallExpression(node) {
+        if (node.type !== 'CallExpression') {
+          return;
+        }
+        if ((0, _isNode.isDecendantOfGlobalToken)(node)) {
           return;
         }
-        if (!(0, _isNode.isDecendantOfStyleBlock)(node) && !(0, _isNode.isDecendantOfStyleJsxAttribute)(node)) {
+        if (!(0, _isNode.isDecendantOfStyleBlock)(node) && !(0, _isNode.isDecendantOfType)(node, 'JSXExpressionContainer')) {
           return;
         }
-        if (!(0, _isColor.isLegacyNamedColor)(node.callee.name) || (0, _isNode.isDecendantOfGlobalToken)(node) || isException(node)) {
+        if (
+        // @ts-expect-error
+        !(0, _isColor.isLegacyNamedColor)(node.callee.name) || isException(node)) {
           return;
         }
         context.report({
           messageId: 'hardCodedColor',
           node: node,
+          // @ts-expect-error
           suggest: getTokenSuggestion(node, "".concat(node.callee.name, "()"), config)
         });
       },
-      JSXAttribute: function JSXAttribute(node) {
-        if (!node.value) {
+      'JSXAttribute > Literal': function JSXAttributeLiteral(node) {
+        if (node.type !== 'Literal') {
           return;
         }
-        if (['alt', 'src', 'label'].includes(node.name.name)) {
+
+        // @ts-expect-error
+        if (['alt', 'src', 'label', 'key'].includes(node.parent.name.name)) {
           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;
-          }
+        if (isException(node.parent)) {
+          return;
+        }
+        if (
+        // @ts-expect-error
+        (0, _isColor.isHardCodedColor)(node.value) ||
+        // @ts-expect-error
+        (0, _isColor.includesHardCodedColor)(node.value)) {
+          context.report({
+            messageId: 'hardCodedColor',
+            node: node,
+            // @ts-expect-error
+            suggest: getTokenSuggestion(node, node.value, config)
+          });
+          return;
+        }
+      },
+      'JSXExpressionContainer > MemberExpression': function JSXExpressionContainerMemberExpression(node) {
+        if (node.type !== 'MemberExpression') {
+          return;
+        }
+        if (
+        // @ts-expect-error
+        (0, _isColor.isLegacyColor)(node.property.name) ||
+        // @ts-expect-error
+        node.object.name === 'colors' &&
+        // @ts-expect-error
+        (0, _isColor.isLegacyNamedColor)(node.property.name)) {
+          context.report({
+            messageId: 'hardCodedColor',
+            node: node,
+            suggest: getTokenSuggestion(node, // @ts-expect-error
+            "".concat(node.object.name, ".").concat(node.property.name), config)
+          });
+        }
+      },
+      'JSXExpressionContainer > Identifier': function JSXExpressionContainerIdentifier(node) {
+        if (node.type !== 'Identifier') {
+          return;
+        }
+        if (isException(node)) {
+          return;
+        }
+        if ((0, _isColor.isLegacyColor)(node.name) || (0, _isColor.includesHardCodedColor)(node.name)) {
+          context.report({
+            messageId: 'hardCodedColor',
+            node: node,
+            suggest: getTokenSuggestion(node, node.name, config)
+          });
+          return;
         }
       }
     };

package/dist/cjs/rules/icon-label/index.js

@@ -16,7 +16,8 @@ var rule = (0, _createRule.createLintRule)({
     type: 'suggestion',
     docs: {
       description: 'Enforces accessible usage of icon labels when composed with Atlassian Design System components.',
-      recommended: 'warn'
+      recommended: true,
+      severity: 'warn'
     },
     messages: {
       unneededLabelPropContents: 'Label prop should be an empty string to prevent duplicate screen reader announcements. Learn more here: http://go/adsc/icon/usage#accessibility-guidelines.',

package/dist/cjs/rules/no-banned-imports/index.js

@@ -13,7 +13,8 @@ var rule = (0, _createRule.createLintRule)({
     type: 'problem',
     docs: {
       description: 'Disallow importing banned modules.',
-      recommended: 'error'
+      recommended: true,
+      severity: 'error'
     },
     messages: {
       path: "The '{{importSource}}' import is restricted from being used. {{customMessage}}"

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

@@ -13,7 +13,8 @@ var rule = (0, _createRule.createLintRule)({
     name: 'no-deprecated-design-token-usage',
     docs: {
       description: 'Disallow using deprecated design tokens.',
-      recommended: 'warn'
+      recommended: true,
+      severity: 'warn'
     },
     fixable: 'code',
     type: 'problem',

package/dist/cjs/rules/no-margin/index.js

@@ -12,6 +12,7 @@ var rule = (0, _createRule.createLintRule)({
     type: 'problem',
     docs: {
       recommended: false,
+      severity: 'warn',
       description: 'Disallow using the margin CSS property.'
     },
     messages: {

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

@@ -20,7 +20,8 @@ var rule = (0, _createRule.createLintRule)({
     name: 'no-unsafe-design-token-usage',
     docs: {
       description: 'Enforces design token usage is statically and locally analyzable.',
-      recommended: 'error'
+      recommended: true,
+      severity: 'error'
     },
     fixable: 'code',
     type: 'problem',

package/dist/cjs/rules/use-primitives/index.js

@@ -15,9 +15,11 @@ var rule = (0, _createRule.createLintRule)({
     name: 'use-primitives',
     type: 'suggestion',
     fixable: 'code',
+    hasSuggestions: true,
     docs: {
       description: 'Encourage the usage of primitives components.',
-      recommended: false
+      recommended: false,
+      severity: 'warn'
     },
     messages: {
       preferPrimitivesBox: "This \"{{element}}\" may be able to be replaced with a \"Box\". See ".concat(boxDocsUrl, " for guidance."),

package/dist/cjs/rules/use-visually-hidden/index.js

@@ -20,7 +20,8 @@ var rule = (0, _createRule.createLintRule)({
     fixable: 'code',
     docs: {
       description: 'Enforce usage of the visually hidden component.',
-      recommended: 'error'
+      recommended: true,
+      severity: 'error'
     },
     messages: {
       noDeprecatedUsage: 'Using the export `{{local}}` from `{{import}}` as a mixin is discouraged. Please use `@atlaskit/visually-hidden` instead.',

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isLegacyNamedColor = exports.isLegacyColor = exports.isHardCodedColor = exports.includesHardCodedColor = void 0;
+exports.isLegacyNamedColor = exports.isLegacyColor = exports.isHardCodedColor = exports.isColorCssPropertyName = exports.includesHardCodedColor = void 0;
 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:
@@ -48,4 +48,14 @@ var isHardCodedColor = function isHardCodedColor(value) {
   }
   return false;
 };
-exports.isHardCodedColor = isHardCodedColor;
+exports.isHardCodedColor = isHardCodedColor;
+var validColorPropertyNames = new Set(['color', 'background', 'background-color', 'border', 'border-left', 'border-right', 'border-top', 'border-bottom', 'border-color', 'border-left-color', 'border-right-color', 'border-top-color', 'border-bottom-color', 'outline', 'outline-color', 'box-shadow']);
+var kebabize = function kebabize(str) {
+  return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, function ($, ofs) {
+    return (ofs ? '-' : '') + $.toLowerCase();
+  });
+};
+var isColorCssPropertyName = function isColorCssPropertyName(value) {
+  return validColorPropertyNames.has(kebabize(value));
+};
+exports.isColorCssPropertyName = isColorCssPropertyName;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isVariableName = exports.isStyledTemplateNode = exports.isStyledObjectNode = exports.isPropertyKey = exports.isDecendantOfType = exports.isDecendantOfStyleJsxAttribute = exports.isDecendantOfStyleBlock = exports.isDecendantOfGlobalToken = exports.isChildOfType = void 0;
+exports.isStyledTemplateNode = exports.isStyledObjectNode = exports.isPropertyKey = exports.isDecendantOfType = exports.isDecendantOfStyleJsxAttribute = exports.isDecendantOfStyleBlock = exports.isDecendantOfGlobalToken = exports.isChildOfType = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var isDecendantOfGlobalToken = function isDecendantOfGlobalToken(node) {
   if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'token' || node.callee.name === 'getTokenValue')) {
@@ -34,13 +34,6 @@ var isPropertyKey = function isPropertyKey(node) {
   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": "5.1.0",
+	"version": "5.3.0",
 	"sideEffects": false
 }

package/dist/es2019/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::536ea9ab01a5dbae76af59e8ca84f921>>
+ * @codegen <<SignedSource::3f9b973d6350522de7bd32f13c58ce56>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -8,14 +8,14 @@ export default {
   rules: {
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage-spacing': 'error',
-    '@atlaskit/design-system/icon-label': 'error',
+    '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-deprecated-apis': 'error',
-    '@atlaskit/design-system/no-deprecated-design-token-usage': 'error',
+    '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
     '@atlaskit/design-system/no-deprecated-imports': 'error',
-    '@atlaskit/design-system/no-margin': 'error',
+    '@atlaskit/design-system/no-margin': 'warn',
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
-    '@atlaskit/design-system/use-primitives': 'error',
+    '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }
 };