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

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

@@ -0,0 +1,24 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { getValueFromShorthand } from './get-value-from-shorthand';
+export function getFontSizeValueInScope(cssProperties) {
+  var fontSizeNode = cssProperties.find(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 1),
+      style = _ref2[0];
+    var _style$split = style.split(':'),
+      _style$split2 = _slicedToArray(_style$split, 2),
+      rawProperty = _style$split2[0],
+      value = _style$split2[1];
+    return /font-size/.test(rawProperty) ? value : null;
+  });
+  if (!fontSizeNode) {
+    return undefined;
+  }
+  var _fontSizeNode$0$split = fontSizeNode[0].split(':'),
+    _fontSizeNode$0$split2 = _slicedToArray(_fontSizeNode$0$split, 2),
+    _ = _fontSizeNode$0$split2[0],
+    fontSizeValue = _fontSizeNode$0$split2[1];
+  if (!fontSizeValue) {
+    return undefined;
+  }
+  return getValueFromShorthand(fontSizeValue)[0];
+}

package/dist/esm/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) {
+  var propertyNode = parentNode.properties.find(function (node) {
+    if (!isNodeOfType(node, 'Property')) {
+      return;
+    }
+    if (!isNodeOfType(node.key, 'Identifier')) {
+      return;
+    }
+    return node.key.name === property;
+  });
+  return propertyNode;
+}

package/dist/esm/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) {
+  var token = findTokenNameByPropertyValue(propertyName, value);
+  var fallbackValue = propertyName === 'fontFamily' ? {
+    value: "".concat(value),
+    raw: "`".concat(value, "`")
+  } : "".concat(value);
+  return callExpression({
+    callee: identifier({
+      name: 'token'
+    }),
+    arguments: [literal({
+      value: "'".concat(token !== null && token !== void 0 ? token : '', "'")
+    }), literal(fallbackValue)],
+    optional: false
+  });
+}

package/dist/esm/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) {
+  var tokenName = findTokenNameByPropertyValue(propertyName, value);
+  if (!tokenName) {
+    return undefined;
+  }
+  var fallbackValue = normaliseValue(propertyName, value);
+  return getTokenNodeForValue(propertyName, fallbackValue);
+}

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

@@ -0,0 +1,21 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { isDecendantOfGlobalToken } from '../utils/is-decendant-of-global-token';
+var filterSuggestion = function filterSuggestion(_ref) {
+  var shouldReturnSuggestion = _ref.shouldReturnSuggestion;
+  return shouldReturnSuggestion;
+};
+export var getTokenSuggestion = function getTokenSuggestion(node, reference, config) {
+  return [{
+    shouldReturnSuggestion: !isDecendantOfGlobalToken(node) && config.shouldEnforceFallbacks === false,
+    desc: "Convert to token",
+    fix: function fix(fixer) {
+      return 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: function fix(fixer) {
+      return fixer.replaceText(isNodeOfType(node.parent, 'MemberExpression') ? node.parent : node, isNodeOfType(node.parent, 'JSXAttribute') ? "{token('', ".concat(reference, ")}") : "token('', ".concat(reference, ")"));
+    }
+  }].filter(filterSuggestion);
+};

package/dist/esm/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) {
+  var propertyValueRaw = isNodeOfType(propertyNode, 'Property') ? getValue(propertyNode.value, context) : null;
+  var propertyValue = Array.isArray(propertyValueRaw) ? propertyValueRaw[0] : propertyValueRaw;
+  return propertyValue;
+}

package/dist/esm/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 var getValueFromShorthand = function getValueFromShorthand(str) {
+  var valueString = String(str);
+  var fontFamily = /(Charlie)|(sans-serif$)|(monospace$)/;
+  var fontWeightString = /(regular$)|(medium$)|(semibold$)|(bold$)/;
+  var 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/esm/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 var getValueFromTemplateLiteralRaw = function getValueFromTemplateLiteralRaw(node, context) {
+  if (!isNodeOfType(node, "TemplateLiteral")) {
+    return null;
+  }
+  var combinedString = node.quasis.map(function (q, i) {
+    return "".concat(q.value.raw).concat(node.expressions[i] ? getValue(node.expressions[i], context) : '');
+  }).join('').trim();
+  var fontFamily = /(sans-serif$)|(monospace$)/;
+  if (fontFamily.test(combinedString)) {
+    return combinedString;
+  }
+  return combinedString.split(' ');
+};

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

@@ -0,0 +1,135 @@
+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';
+var isGridSize = function isGridSize(node) {
+  return 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;
+};
+var isToken = function isToken(node) {
+  return isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && node.callee.name === 'token';
+};
+var getRawExpressionForToken = function getRawExpressionForToken(node, context) {
+  var args = node.arguments;
+  var call = "${token(".concat(args.map(function (argNode) {
+    if (isNodeOfType(argNode, 'Literal')) {
+      return argNode.raw;
+    }
+    if (isNodeOfType(argNode, 'Identifier')) {
+      return argNode.name;
+    }
+    if (isNodeOfType(argNode, 'MemberExpression')) {
+      return getValue(argNode, context);
+    }
+  }).join(', '), ")}");
+  return call;
+};
+var isFontSize = function isFontSize(node) {
+  return isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'fontSize' || node.callee.name === 'getFontSize');
+};
+var isFontSizeSmall = function isFontSizeSmall(node) {
+  return isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && node.callee.name === 'fontSizeSmall';
+};
+var getValueFromCallExpression = function 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;
+};
+var getValueFromUnaryExpression = function getValueFromUnaryExpression(node, context) {
+  if (!isNodeOfType(node, 'UnaryExpression')) {
+    return null;
+  }
+  var value = getValue(node.argument, context);
+  if (!value) {
+    return null;
+  }
+
+  // eslint-disable-next-line no-eval
+  return eval("".concat(node.operator, "(").concat(value, ")"));
+};
+var getValueFromBinaryExpression = function getValueFromBinaryExpression(node, context) {
+  if (!isNodeOfType(node, 'BinaryExpression')) {
+    return null;
+  }
+  var left = node.left,
+    right = node.right,
+    operator = node.operator;
+  var leftValue = getValue(left, context);
+  var rightValue = getValue(right, context);
+  var final = rightValue && leftValue ?
+  // eslint-disable-next-line no-eval
+  eval("".concat(leftValue).concat(operator).concat(rightValue)) : null;
+  return final;
+};
+var getValueFromIdentifier = function getValueFromIdentifier(node, context) {
+  if (!isNodeOfType(node, 'Identifier')) {
+    return null;
+  }
+  if (node.name === 'gridSize') {
+    return 8;
+  }
+  var scope = getScope(context, node);
+  var variable = findIdentifierInParentScope({
+    scope: scope,
+    identifierName: node.name
+  });
+  if (!variable) {
+    return null;
+  }
+  var 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);
+};
+var getValueFromTemplateLiteral = function getValueFromTemplateLiteral(node, context) {
+  var value = getValueFromTemplateLiteralRaw(node, context);
+  return Array.isArray(value) ? value.map(removePixelSuffix) : value;
+};
+export var getValue = function 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/esm/rules/ensure-design-token-usage/index.js

@@ -2,31 +2,45 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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';
 var defaultConfig = {
   domains: ['color', 'spacing'],
   applyImport: true,
   shouldEnforceFallbacks: false,
   failSilently: false
 };
-var createWithConfig = function createWithConfig(initialConfig) {
+export var createWithConfig = function createWithConfig(initialConfig) {
   return function (context) {
     // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
     var userConfig = context.options[0];
@@ -312,5 +326,4 @@ var rule = createLintRule({
   meta: ruleMeta,
   create: createWithConfig(defaultConfig)
 });
-export default rule;
-export { createWithConfig };
+export default rule;

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

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

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

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

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

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

package/dist/esm/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/esm/rules/ensure-design-token-usage/is-spacing-property.js

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

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

@@ -0,0 +1,20 @@
+var emRegex = /(.*\d+)em$/;
+var invalidSpacingUnitRegex = /(\d+rem$)|(vw$)|(vh$)/;
+export 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;
+};

package/dist/esm/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 var lintJSXIdentifierForColor = function lintJSXIdentifierForColor(node, context, config) {
+  // To force the correct node type
+  if (node.type !== 'Identifier') {
+    return;
+  }
+  var isException = getIsException(config.exceptions);
+  if (isException(node)) {
+    return;
+  }
+  if (isLegacyColor(node.name) || includesHardCodedColor(node.name)) {
+    context.report({
+      messageId: 'hardCodedColor',
+      node: node,
+      suggest: getTokenSuggestion(node, node.name, config)
+    });
+    return;
+  }
+};

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

@@ -0,0 +1,146 @@
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, 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 o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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
+ */
+var isTagComponentColorProp = function isTagComponentColorProp(jsxAttributeNode, context) {
+  var _variable$defs;
+  if (!isNodeOfType(jsxAttributeNode, 'JSXAttribute')) {
+    return false;
+  }
+
+  // Check if the attribute name is 'color'
+  var attributeName = typeof jsxAttributeNode.name.name === 'string' ? jsxAttributeNode.name.name : jsxAttributeNode.name.name.name;
+  if (attributeName !== 'color') {
+    return false;
+  }
+
+  // Find the JSXOpeningElement
+  var currentNode = jsxAttributeNode.parent;
+  while (currentNode && !isNodeOfType(currentNode, 'JSXOpeningElement')) {
+    currentNode = currentNode.parent;
+  }
+  if (!currentNode || !isNodeOfType(currentNode, 'JSXOpeningElement')) {
+    return false;
+  }
+
+  // Get the component name
+  var 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)
+  var scope = getScope(context, jsxAttributeNode);
+  var variable = scope.variables.find(function (v) {
+    return v.name === elementName;
+  });
+  if (variable !== null && variable !== void 0 && (_variable$defs = variable.defs) !== null && _variable$defs !== void 0 && _variable$defs.length) {
+    var _iterator = _createForOfIteratorHelper(variable.defs),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var def = _step.value;
+        if (def.type === 'ImportBinding' && def.parent && isNodeOfType(def.parent, 'ImportDeclaration')) {
+          var importSource = def.parent.source.value;
+          if (typeof importSource === 'string' && importSource.match(/^@atlaskit\/tag(\/|$)/)) {
+            return true;
+          }
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }
+
+  // Fallback: scan AST for ImportDeclaration (more reliable when scope differs e.g. in some monorepo/parser setups)
+  var sourceCode = getSourceCode(context);
+  var ast = sourceCode.ast;
+  if (ast !== null && ast !== void 0 && ast.body) {
+    var _iterator2 = _createForOfIteratorHelper(ast.body),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var _node$source, _node$specifiers;
+        var node = _step2.value;
+        if (!isNodeOfType(node, 'ImportDeclaration')) {
+          continue;
+        }
+        var source = (_node$source = node.source) === null || _node$source === void 0 ? void 0 : _node$source.value;
+        if (typeof source !== 'string' || !source.match(/^@atlaskit\/tag(\/|$)/)) {
+          continue;
+        }
+        var hasMatchingImport = (_node$specifiers = node.specifiers) === null || _node$specifiers === void 0 ? void 0 : _node$specifiers.some(function (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;
+        }
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+  }
+  return false;
+};
+
+// JSXAttribute > Literal
+export var lintJSXLiteralForColor = function 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
+  var 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;
+  }
+  var 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: node,
+      suggest: getTokenSuggestion(node, node.value, config)
+    });
+    return;
+  }
+};

package/dist/esm/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 var lintJSXMemberForColor = function 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: node,
+      suggest: getTokenSuggestion(node, generate(node).toString(), config)
+    });
+    return;
+  }
+};