@atlaskit/eslint-plugin-design-system 14.1.0 → 14.3.0

package/dist/es2019/rules/ensure-design-token-usage/get-font-size-value-in-scope.js

@@ -0,0 +1,15 @@
+import { getValueFromShorthand } from './get-value-from-shorthand';
+export function getFontSizeValueInScope(cssProperties) {
+  const fontSizeNode = cssProperties.find(([style]) => {
+    const [rawProperty, value] = style.split(':');
+    return /font-size/.test(rawProperty) ? value : null;
+  });
+  if (!fontSizeNode) {
+    return undefined;
+  }
+  const [_, fontSizeValue] = fontSizeNode[0].split(':');
+  if (!fontSizeValue) {
+    return undefined;
+  }
+  return getValueFromShorthand(fontSizeValue)[0];
+}

package/dist/es2019/rules/ensure-design-token-usage/get-property-node-from-parent.js

@@ -0,0 +1,13 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+export function getPropertyNodeFromParent(property, parentNode) {
+  const propertyNode = parentNode.properties.find(node => {
+    if (!isNodeOfType(node, 'Property')) {
+      return;
+    }
+    if (!isNodeOfType(node.key, 'Identifier')) {
+      return;
+    }
+    return node.key.name === property;
+  });
+  return propertyNode;
+}

package/dist/es2019/rules/ensure-design-token-usage/get-token-node-for-value.js

@@ -0,0 +1,29 @@
+import { callExpression, identifier, literal } from 'eslint-codemod-utils';
+import { findTokenNameByPropertyValue } from './find-token-name-by-property-value';
+
+/**
+ * Returns a token node for a given value including fallbacks.
+ * @param propertyName camelCase CSS property
+ * @param value string representing pixel value, or font family, or number representing font weight
+ * @example
+ * ```
+ * propertyName: padding, value: '8px' => token('space.100', '8px')
+ * propertyName: fontWeight, value: 400 => token('font.weight.regular', '400')
+ * ```
+ */
+export function getTokenNodeForValue(propertyName, value) {
+  const token = findTokenNameByPropertyValue(propertyName, value);
+  const fallbackValue = propertyName === 'fontFamily' ? {
+    value: `${value}`,
+    raw: `\`${value}\``
+  } : `${value}`;
+  return callExpression({
+    callee: identifier({
+      name: 'token'
+    }),
+    arguments: [literal({
+      value: `'${token !== null && token !== void 0 ? token : ''}'`
+    }), literal(fallbackValue)],
+    optional: false
+  });
+}

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

@@ -0,0 +1,18 @@
+import { findTokenNameByPropertyValue } from './find-token-name-by-property-value';
+import { getTokenNodeForValue } from './get-token-node-for-value';
+import { normaliseValue } from './normalise-value';
+
+/**
+ * Returns a stringifiable node with the token expression corresponding to its matching token.
+ * If no token found for the pair the function returns undefined.
+ * @param propertyName string camelCased css property.
+ * @param value The computed value e.g '8px' -> '8'.
+ */
+export function getTokenReplacement(propertyName, value) {
+  const tokenName = findTokenNameByPropertyValue(propertyName, value);
+  if (!tokenName) {
+    return undefined;
+  }
+  const fallbackValue = normaliseValue(propertyName, value);
+  return getTokenNodeForValue(propertyName, fallbackValue);
+}

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

@@ -0,0 +1,14 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { isDecendantOfGlobalToken } from '../utils/is-decendant-of-global-token';
+const filterSuggestion = ({
+  shouldReturnSuggestion
+}) => shouldReturnSuggestion;
+export const getTokenSuggestion = (node, reference, config) => [{
+  shouldReturnSuggestion: !isDecendantOfGlobalToken(node) && config.shouldEnforceFallbacks === false,
+  desc: `Convert to token`,
+  fix: fixer => fixer.replaceText(isNodeOfType(node.parent, 'MemberExpression') ? node.parent : node, isNodeOfType(node.parent, 'JSXAttribute') ? `{token('')}` : `token('')`)
+}, {
+  shouldReturnSuggestion: !isDecendantOfGlobalToken(node) && config.shouldEnforceFallbacks === true,
+  desc: `Convert to token with fallback`,
+  fix: fixer => fixer.replaceText(isNodeOfType(node.parent, 'MemberExpression') ? node.parent : node, isNodeOfType(node.parent, 'JSXAttribute') ? `{token('', ${reference})}` : `token('', ${reference})`)
+}].filter(filterSuggestion);

package/dist/es2019/rules/ensure-design-token-usage/get-value-for-property-node.js

@@ -0,0 +1,7 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { getValue } from './get-value';
+export function getValueForPropertyNode(propertyNode, context) {
+  const propertyValueRaw = isNodeOfType(propertyNode, 'Property') ? getValue(propertyNode.value, context) : null;
+  const propertyValue = Array.isArray(propertyValueRaw) ? propertyValueRaw[0] : propertyValueRaw;
+  return propertyValue;
+}

package/dist/es2019/rules/ensure-design-token-usage/get-value-from-shorthand.js

@@ -0,0 +1,13 @@
+import { removePixelSuffix } from './remove-pixel-suffix';
+import { splitShorthandValues } from './split-shorthand-values';
+export const getValueFromShorthand = str => {
+  const valueString = String(str);
+  const fontFamily = /(Charlie)|(sans-serif$)|(monospace$)/;
+  const fontWeightString = /(regular$)|(medium$)|(semibold$)|(bold$)/;
+  const fontStyleString = /(inherit$)|(normal$)|(italic$)/;
+  if (fontFamily.test(valueString) || fontWeightString.test(valueString) || fontStyleString.test(valueString)) {
+    return [valueString];
+  }
+  // If we want to filter out NaN just add .filter(Boolean)
+  return splitShorthandValues(String(str).trim()).map(removePixelSuffix);
+};

package/dist/es2019/rules/ensure-design-token-usage/get-value-from-template-literal-raw.js

@@ -0,0 +1,30 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { getValue } from './get-value';
+
+/**
+ * @example
+ * ```js
+ * `2 ${variable} 0`
+ *
+ * // results in [2, NaN, 0]
+ * ```
+ * ```js
+ * const variable = 4;
+ * `2 ${variable} 0`
+ *
+ * // results in [2, 4, 0]
+ * ```
+ */
+export const getValueFromTemplateLiteralRaw = (node, context) => {
+  if (!isNodeOfType(node, `TemplateLiteral`)) {
+    return null;
+  }
+  const combinedString = node.quasis.map((q, i) => {
+    return `${q.value.raw}${node.expressions[i] ? getValue(node.expressions[i], context) : ''}`;
+  }).join('').trim();
+  const fontFamily = /(sans-serif$)|(monospace$)/;
+  if (fontFamily.test(combinedString)) {
+    return combinedString;
+  }
+  return combinedString.split(' ');
+};

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

@@ -0,0 +1,129 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { getScope } from '@atlaskit/eslint-utils/context-compat';
+import { findIdentifierInParentScope } from '../utils/find-in-parent';
+import { getValueFromShorthand } from './get-value-from-shorthand';
+import { getValueFromTemplateLiteralRaw } from './get-value-from-template-literal-raw';
+import { isBorderRadius } from './is-border-radius';
+import { removePixelSuffix } from './remove-pixel-suffix';
+const isGridSize = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'gridSize' || node.callee.name === 'getGridSize') &&
+// If there are arguments we know it's a custom gridSize function and cannot be certain what it returns
+node.arguments.length === 0;
+const isToken = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && node.callee.name === 'token';
+const getRawExpressionForToken = (node, context) => {
+  const args = node.arguments;
+  const call = `\${token(${args.map(argNode => {
+    if (isNodeOfType(argNode, 'Literal')) {
+      return argNode.raw;
+    }
+    if (isNodeOfType(argNode, 'Identifier')) {
+      return argNode.name;
+    }
+    if (isNodeOfType(argNode, 'MemberExpression')) {
+      return getValue(argNode, context);
+    }
+  }).join(', ')})}`;
+  return call;
+};
+const isFontSize = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'fontSize' || node.callee.name === 'getFontSize');
+const isFontSizeSmall = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && node.callee.name === 'fontSizeSmall';
+const getValueFromCallExpression = (node, context) => {
+  if (!isNodeOfType(node, 'CallExpression')) {
+    return null;
+  }
+  if (isGridSize(node)) {
+    return 8;
+  }
+  if (isBorderRadius(node)) {
+    return 3;
+  }
+  if (isFontSize(node)) {
+    return 14;
+  }
+  if (isFontSizeSmall(node)) {
+    return 11;
+  }
+  if (isToken(node)) {
+    return getRawExpressionForToken(node, context);
+  }
+  return null;
+};
+const getValueFromUnaryExpression = (node, context) => {
+  if (!isNodeOfType(node, 'UnaryExpression')) {
+    return null;
+  }
+  const value = getValue(node.argument, context);
+  if (!value) {
+    return null;
+  }
+
+  // eslint-disable-next-line no-eval
+  return eval(`${node.operator}(${value})`);
+};
+const getValueFromBinaryExpression = (node, context) => {
+  if (!isNodeOfType(node, 'BinaryExpression')) {
+    return null;
+  }
+  const {
+    left,
+    right,
+    operator
+  } = node;
+  const leftValue = getValue(left, context);
+  const rightValue = getValue(right, context);
+  const final = rightValue && leftValue ?
+  // eslint-disable-next-line no-eval
+  eval(`${leftValue}${operator}${rightValue}`) : null;
+  return final;
+};
+const getValueFromIdentifier = (node, context) => {
+  if (!isNodeOfType(node, 'Identifier')) {
+    return null;
+  }
+  if (node.name === 'gridSize') {
+    return 8;
+  }
+  const scope = getScope(context, node);
+  const variable = findIdentifierInParentScope({
+    scope,
+    identifierName: node.name
+  });
+  if (!variable) {
+    return null;
+  }
+  const definition = variable.defs[0];
+  if (isNodeOfType(definition.node, 'ImportSpecifier') && isNodeOfType(definition.node.parent, 'ImportDeclaration') && definition.node.parent.source.value === '@atlassian/jira-common-styles/src/main.tsx') {
+    return definition.node.imported.type === 'Identifier' && definition.node.imported.name === 'gridSize' ? 8 : null;
+  }
+  if (!isNodeOfType(definition.node, 'VariableDeclarator')) {
+    return null;
+  }
+  if (!definition.node.init) {
+    return null;
+  }
+  return getValue(definition.node.init, context);
+};
+const getValueFromTemplateLiteral = (node, context) => {
+  const value = getValueFromTemplateLiteralRaw(node, context);
+  return Array.isArray(value) ? value.map(removePixelSuffix) : value;
+};
+export const getValue = (node, context) => {
+  if (isNodeOfType(node, 'Literal')) {
+    return getValueFromShorthand(node.value);
+  }
+  if (isNodeOfType(node, 'BinaryExpression')) {
+    return getValueFromBinaryExpression(node, context);
+  }
+  if (isNodeOfType(node, 'UnaryExpression')) {
+    return getValueFromUnaryExpression(node, context);
+  }
+  if (isNodeOfType(node, 'CallExpression')) {
+    return getValueFromCallExpression(node, context);
+  }
+  if (isNodeOfType(node, 'Identifier')) {
+    return getValueFromIdentifier(node, context);
+  }
+  if (isNodeOfType(node, 'TemplateLiteral')) {
+    return getValueFromTemplateLiteral(node, context);
+  }
+  return null;
+};

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

@@ -1,31 +1,45 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { getScope, getSourceCode } from '@atlaskit/eslint-utils/context-compat';
 import { getImportSources } from '@atlaskit/eslint-utils/is-supported-import';
-import { createLintRule } from '../utils/create-rule';
+import { createLintRule } from '../utils/create-lint-rule';
 import { errorBoundary } from '../utils/error-boundary';
-import { includesHardCodedColor } from '../utils/is-color';
+import { includesHardCodedColor } from '../utils/includes-hard-coded-color';
 import { isDecendantOfGlobalToken } from '../utils/is-decendant-of-global-token';
+import { isDecendantOfStyleBlock } from '../utils/is-decendant-of-style-block';
 import { isDecendantOfType } from '../utils/is-decendant-of-type';
 import { isDecendantOfXcssBlock } from '../utils/is-decendant-of-xcss-block';
-import { isDecendantOfStyleBlock } from '../utils/is-node';
-import { lintJSXIdentifierForColor, lintJSXLiteralForColor, lintJSXMemberForColor, lintObjectForColor, lintTemplateIdentifierForColor } from './color';
 import { convertHyphenatedNameToCamelCase } from './convert-hyphenated-name-to-camel-case';
+import { emToPixels } from './em-to-pixels';
+import { getDomainsForProperty } from './get-domains-for-property';
+import { getFontSizeValueInScope } from './get-font-size-value-in-scope';
+import { getPropertyNodeFromParent } from './get-property-node-from-parent';
+import { getTokenReplacement } from './get-token-replacement';
+import { getValueForPropertyNode } from './get-value-for-property-node';
+import { getValueFromShorthand } from './get-value-from-shorthand';
+import { getValueFromTemplateLiteralRaw } from './get-value-from-template-literal-raw';
 import { includesTokenString } from './includes-token-string';
 import { insertTokensImport } from './insert-tokens-import';
 import { isAuto } from './is-auto';
+import { isCalc } from './is-calc';
 import { isTokenValueString } from './is-token-value-string';
+import { isValidSpacingValue } from './is-valid-spacing-value';
 import { isZero } from './is-zero';
+import { lintJSXIdentifierForColor } from './lint-jsx-identifier-for-color';
+import { lintJSXLiteralForColor } from './lint-jsx-literal-for-color';
+import { lintJSXMemberForColor } from './lint-jsx-member-for-color';
+import { lintObjectForColor } from './lint-object-for-color';
+import { lintTemplateIdentifierForColor } from './lint-template-identifier-for-color';
+import { processCssNode } from './process-css-node';
 import ruleMeta from './rule-meta';
 import { lintObjectForSpacing } from './spacing';
 import { splitShorthandValues } from './split-shorthand-values';
-import { emToPixels, getDomainsForProperty, getFontSizeValueInScope, getPropertyNodeFromParent, getTokenReplacement, getValueForPropertyNode, getValueFromShorthand, getValueFromTemplateLiteralRaw, isCalc, isValidSpacingValue, processCssNode } from './utils';
 const defaultConfig = {
   domains: ['color', 'spacing'],
   applyImport: true,
   shouldEnforceFallbacks: false,
   failSilently: false
 };
-const createWithConfig = initialConfig => context => {
+export const createWithConfig = initialConfig => context => {
   // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
   const userConfig = context.options[0];
   // merge configs
@@ -288,5 +302,4 @@ const rule = createLintRule({
   meta: ruleMeta,
   create: createWithConfig(defaultConfig)
 });
-export default rule;
-export { createWithConfig };
+export default rule;

package/dist/es2019/rules/ensure-design-token-usage/is-border-size-property.js

@@ -0,0 +1,4 @@
+const borderSizeProperties = ['borderWidth', 'outlineWidth', 'borderRightWidth', 'borderLeftWidth', 'borderTopWidth', 'borderBottomWidth', 'borderInlineWidth', 'borderBlockWidth'];
+export function isBorderSizeProperty(propertyName) {
+  return borderSizeProperties.includes(propertyName);
+}

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

@@ -0,0 +1,9 @@
+const calcRegex = /(^calc)/;
+export const isCalc = value => {
+  if (typeof value === 'string') {
+    if (calcRegex.test(value)) {
+      return true;
+    }
+  }
+  return false;
+};

package/dist/es2019/rules/ensure-design-token-usage/is-radius-property.js

@@ -0,0 +1,4 @@
+const shapeProperties = ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius', 'borderRadius', 'borderStartStartRadius', 'borderStartEndRadius', 'borderEndStartRadius', 'borderEndEndRadius'];
+export function isRadiusProperty(propertyName) {
+  return shapeProperties.includes(propertyName);
+}

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

@@ -0,0 +1,5 @@
+import { isBorderSizeProperty } from './is-border-size-property';
+import { isRadiusProperty } from './is-radius-property';
+export function isShapeProperty(propertyName) {
+  return isRadiusProperty(propertyName) || isBorderSizeProperty(propertyName);
+}

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

@@ -0,0 +1,4 @@
+const properties = ['padding', 'paddingBlock', 'paddingInline', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd', 'margin', 'gap', 'rowGap', 'gridRowGap', 'columnGap', 'gridColumnGap', 'top', 'left', 'right', 'bottom', 'inlineStart', 'inlineEnd', 'blockStart', 'blockEnd', 'outline-offset'];
+export const isSpacingProperty = propertyName => {
+  return properties.includes(propertyName);
+};

package/dist/es2019/rules/ensure-design-token-usage/is-valid-spacing-value.js

@@ -0,0 +1,20 @@
+const emRegex = /(.*\d+)em$/;
+const invalidSpacingUnitRegex = /(\d+rem$)|(vw$)|(vh$)/;
+export const 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 (const val in value) {
+      if (invalidSpacingUnitRegex.test(val)) {
+        return false;
+      }
+    }
+  }
+  if (emRegex.test(value) && typeof fontSize !== 'number') {
+    return false;
+  }
+  return true;
+};

package/dist/es2019/rules/ensure-design-token-usage/lint-jsx-identifier-for-color.js

@@ -0,0 +1,23 @@
+import { getIsException } from '../utils/get-is-exception';
+import { includesHardCodedColor } from '../utils/includes-hard-coded-color';
+import { isLegacyColor } from '../utils/is-legacy-color';
+import { getTokenSuggestion } from './get-token-suggestion';
+// JSXExpressionContainer > Identifier
+export const lintJSXIdentifierForColor = (node, context, config) => {
+  // To force the correct node type
+  if (node.type !== 'Identifier') {
+    return;
+  }
+  const isException = getIsException(config.exceptions);
+  if (isException(node)) {
+    return;
+  }
+  if (isLegacyColor(node.name) || includesHardCodedColor(node.name)) {
+    context.report({
+      messageId: 'hardCodedColor',
+      node,
+      suggest: getTokenSuggestion(node, node.name, config)
+    });
+    return;
+  }
+};

package/dist/es2019/rules/ensure-design-token-usage/lint-jsx-literal-for-color.js

@@ -0,0 +1,123 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { getScope, getSourceCode } from '@atlaskit/eslint-utils/context-compat';
+import { getIsException } from '../utils/get-is-exception';
+import { includesHardCodedColor } from '../utils/includes-hard-coded-color';
+import { isDecendantOfPrimitive } from '../utils/is-decendant-of-primitive';
+import { isDecendantOfSvgElement } from '../utils/is-decendant-of-svg-element';
+import { isHardCodedColor } from '../utils/is-hard-coded-color';
+import { getTokenSuggestion } from './get-token-suggestion';
+/**
+ * Check if the JSXAttribute is a 'color' prop on a Tag component imported from @atlaskit/tag
+ */
+const isTagComponentColorProp = (jsxAttributeNode, context) => {
+  var _variable$defs;
+  if (!isNodeOfType(jsxAttributeNode, 'JSXAttribute')) {
+    return false;
+  }
+
+  // Check if the attribute name is 'color'
+  const attributeName = typeof jsxAttributeNode.name.name === 'string' ? jsxAttributeNode.name.name : jsxAttributeNode.name.name.name;
+  if (attributeName !== 'color') {
+    return false;
+  }
+
+  // Find the JSXOpeningElement
+  let currentNode = jsxAttributeNode.parent;
+  while (currentNode && !isNodeOfType(currentNode, 'JSXOpeningElement')) {
+    currentNode = currentNode.parent;
+  }
+  if (!currentNode || !isNodeOfType(currentNode, 'JSXOpeningElement')) {
+    return false;
+  }
+
+  // Get the component name
+  const elementName = isNodeOfType(currentNode.name, 'JSXIdentifier') ? currentNode.name.name : null;
+  if (!elementName) {
+    return false;
+  }
+
+  // Check if the component is imported from @atlaskit/tag (scope-based resolution)
+  const scope = getScope(context, jsxAttributeNode);
+  const variable = scope.variables.find(v => v.name === elementName);
+  if (variable !== null && variable !== void 0 && (_variable$defs = variable.defs) !== null && _variable$defs !== void 0 && _variable$defs.length) {
+    for (const def of variable.defs) {
+      if (def.type === 'ImportBinding' && def.parent && isNodeOfType(def.parent, 'ImportDeclaration')) {
+        const importSource = def.parent.source.value;
+        if (typeof importSource === 'string' && importSource.match(/^@atlaskit\/tag(\/|$)/)) {
+          return true;
+        }
+      }
+    }
+  }
+
+  // Fallback: scan AST for ImportDeclaration (more reliable when scope differs e.g. in some monorepo/parser setups)
+  const sourceCode = getSourceCode(context);
+  const ast = sourceCode.ast;
+  if (ast !== null && ast !== void 0 && ast.body) {
+    for (const node of ast.body) {
+      var _node$source, _node$specifiers;
+      if (!isNodeOfType(node, 'ImportDeclaration')) {
+        continue;
+      }
+      const source = (_node$source = node.source) === null || _node$source === void 0 ? void 0 : _node$source.value;
+      if (typeof source !== 'string' || !source.match(/^@atlaskit\/tag(\/|$)/)) {
+        continue;
+      }
+      const hasMatchingImport = (_node$specifiers = node.specifiers) === null || _node$specifiers === void 0 ? void 0 : _node$specifiers.some(s => {
+        var _s$local, _s$local2;
+        return s.type === 'ImportDefaultSpecifier' && ((_s$local = s.local) === null || _s$local === void 0 ? void 0 : _s$local.name) === elementName || s.type === 'ImportSpecifier' && ((_s$local2 = s.local) === null || _s$local2 === void 0 ? void 0 : _s$local2.name) === elementName;
+      });
+      if (hasMatchingImport) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+
+// JSXAttribute > Literal
+export const lintJSXLiteralForColor = (node, context, config) => {
+  // To force the correct node type
+  if (node.type !== 'Literal') {
+    return;
+  }
+
+  // Changed this condition to properly handle both direct literals and expression containers
+  const parent = isNodeOfType(node.parent, 'JSXExpressionContainer') ? node.parent.parent : node.parent;
+  if (!isNodeOfType(parent, 'JSXAttribute')) {
+    return;
+  }
+  if (isDecendantOfSvgElement(parent)) {
+    return;
+  }
+
+  // Box backgroundColor prop accepts token names directly - don't lint against this
+  if (isDecendantOfPrimitive(parent, context)) {
+    return;
+  }
+  if (['alt', 'src', 'label', 'key', 'appearance'].includes(typeof parent.name.name === 'string' ? parent.name.name : parent.name.name.name)) {
+    return;
+  }
+  const isException = getIsException(config.exceptions);
+  if (isException(parent)) {
+    return;
+  }
+
+  // Bypass Tag component color prop from @atlaskit/tag
+  if (isTagComponentColorProp(parent, context)) {
+    return;
+  }
+
+  // We only care about hex values
+  if (typeof node.value !== 'string') {
+    return;
+  }
+  if (isHardCodedColor(node.value) || includesHardCodedColor(node.value)) {
+    context.report({
+      messageId: 'hardCodedColor',
+      node,
+      suggest: getTokenSuggestion(node, node.value, config)
+    });
+    return;
+  }
+};

package/dist/es2019/rules/ensure-design-token-usage/lint-jsx-member-for-color.js

@@ -0,0 +1,22 @@
+import { node as generate, isNodeOfType } from 'eslint-codemod-utils';
+import { isLegacyColor } from '../utils/is-legacy-color';
+import { isLegacyNamedColor } from '../utils/is-legacy-named-color';
+import { getTokenSuggestion } from './get-token-suggestion';
+// JSXExpressionContainer > MemberExpression
+export const lintJSXMemberForColor = (node, context, config) => {
+  // To force the correct node type
+  if (node.type !== 'MemberExpression') {
+    return;
+  }
+  if (!isNodeOfType(node.property, 'Identifier')) {
+    return;
+  }
+  if (isLegacyColor(node.property.name) || isNodeOfType(node.object, 'Identifier') && node.object.name === 'colors' && isLegacyNamedColor(node.property.name)) {
+    context.report({
+      messageId: 'hardCodedColor',
+      node,
+      suggest: getTokenSuggestion(node, generate(node).toString(), config)
+    });
+    return;
+  }
+};

package/dist/es2019/rules/ensure-design-token-usage/lint-object-for-color.js

@@ -0,0 +1,88 @@
+import { node as generate, isNodeOfType } from 'eslint-codemod-utils';
+import { getIsException } from '../utils/get-is-exception';
+import { includesHardCodedColor } from '../utils/includes-hard-coded-color';
+import { isHardCodedColor } from '../utils/is-hard-coded-color';
+import { isLegacyColor } from '../utils/is-legacy-color';
+import { isLegacyNamedColor } from '../utils/is-legacy-named-color';
+import { getTokenSuggestion } from './get-token-suggestion';
+// ObjectExpression
+export const lintObjectForColor = (propertyNode, context, config) => {
+  var _identifierNode;
+  let propertyKey = '';
+  if (propertyNode.key.type === 'Identifier') {
+    propertyKey = propertyNode.key.name.toString();
+  }
+  const node = propertyNode.value;
+
+  // ObjectExpression > Property > Literal
+  if (node.type === 'Literal') {
+    var _node$value;
+    const nodeVal = ((_node$value = node.value) === null || _node$value === void 0 ? void 0 : _node$value.toString()) || '';
+    const isException = getIsException(config.exceptions);
+    if ((isHardCodedColor(nodeVal) || includesHardCodedColor(nodeVal)) && !isException(node)) {
+      context.report({
+        messageId: 'hardCodedColor',
+        node,
+        suggest: getTokenSuggestion(node, `'${nodeVal}'`, config)
+      });
+    }
+    return;
+  }
+  const isException = getIsException(config.exceptions);
+
+  // ObjectExpression > Property > CallExpression
+  if (node.type === 'CallExpression') {
+    if (!isNodeOfType(node.callee, 'Identifier')) {
+      return;
+    }
+    if (!isLegacyNamedColor(node.callee.name) || isException(node)) {
+      return;
+    }
+    context.report({
+      messageId: 'hardCodedColor',
+      node: node,
+      suggest: getTokenSuggestion(node, `${node.callee.name}()`, config)
+    });
+    return;
+  }
+
+  // Template literals are already handled by 'TemplateLiteral > Identifier' in the main file
+  if (node.type === 'TemplateLiteral') {
+    return;
+  }
+  let identifierNode = null;
+
+  // ObjectExpression > Property > MemberExpression
+  if (node.type === 'MemberExpression') {
+    if (node.property.type !== 'Identifier') {
+      context.report({
+        messageId: 'hardCodedColor',
+        node: node,
+        suggest: getTokenSuggestion(node, generate(node).toString(), config)
+      });
+      return;
+    }
+    identifierNode = node.property;
+  }
+  if (node.type === 'Identifier') {
+    // identifier is the key and not the value
+    if (node.name === propertyKey) {
+      return;
+    }
+    identifierNode = node;
+  }
+
+  // ObjectExpression > Property > MemberExpression > Identifier
+  // ObjectExpression > Property > Identifier
+  if (((_identifierNode = identifierNode) === null || _identifierNode === void 0 ? void 0 : _identifierNode.type) === 'Identifier') {
+    if ((isHardCodedColor(identifierNode.name) || includesHardCodedColor(identifierNode.name) || isLegacyColor(identifierNode.name)) && !isException(identifierNode)) {
+      context.report({
+        messageId: 'hardCodedColor',
+        node: identifierNode,
+        suggest: getTokenSuggestion(identifierNode, identifierNode.name, config)
+      });
+      return;
+    }
+  }
+  return;
+};