@atlaskit/eslint-plugin-design-system 14.2.0 → 14.3.1

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

@@ -1,56 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-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:
-'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(/(?:,|\.| )+/);
-  return values.some(function (value) {
-    return options.has(value);
-  });
-};
-var isLegacyColor = exports.isLegacyColor = function isLegacyColor(value) {
-  return legacyColors.has(value);
-};
-var isLegacyNamedColor = exports.isLegacyNamedColor = function isLegacyNamedColor(value) {
-  return legacyColorMixins.has(value);
-};
-var includesHardCodedColor = exports.includesHardCodedColor = function includesHardCodedColor(raw) {
-  var value = raw.toLowerCase();
-  if (/#(?:[a-f0-9]{3}|[a-f0-9]{6}|[a-f0-9]{8})\b|((?:rgb|hsl)a?|(lch|lab|color))\([^\)]*\)/.exec(value.toLowerCase())) {
-    return true;
-  }
-  if (includesWholeWord(value, namedColors)) {
-    return true;
-  }
-  return false;
-};
-var isHardCodedColor = exports.isHardCodedColor = function isHardCodedColor(value) {
-  if (includesWholeWord(value.toLowerCase(), namedColors)) {
-    return true;
-  }
-  if (value.startsWith('rgb(') || value.startsWith('rgba(') || value.startsWith('hsl(') || value.startsWith('hsla(') || value.startsWith('lch(') || value.startsWith('lab(') || value.startsWith('color(')) {
-    return true;
-  }
-  if (value.startsWith('#') && (
-  // short hex, hex, or hex with alpha
-  value.length === 4 || value.length === 7 || value.length === 9)) {
-    return true;
-  }
-  return false;
-};
-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 = exports.isColorCssPropertyName = function isColorCssPropertyName(value) {
-  return validColorPropertyNames.has(kebabize(value));
-};

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

@@ -1,296 +0,0 @@
-import { node as generate, isNodeOfType } from 'eslint-codemod-utils';
-import { getScope, getSourceCode } from '@atlaskit/eslint-utils/context-compat';
-import { getIsException } from '../utils/get-is-exception';
-import { isChildOfType } from '../utils/is-child-of-type';
-import { includesHardCodedColor, isHardCodedColor, isLegacyColor, isLegacyNamedColor } from '../utils/is-color';
-import { isDecendantOfGlobalToken } from '../utils/is-decendant-of-global-token';
-import { isDecendantOfPrimitive } from '../utils/is-decendant-of-primitive';
-import { isDecendantOfSvgElement } from '../utils/is-decendant-of-svg-element';
-import { isLegacyElevation } from '../utils/is-elevation';
-import { isDecendantOfStyleBlock } from '../utils/is-node';
-import { getElevationTokenExample } from './get-elevation-token-example';
-/**
- * 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;
-};
-
-// TemplateLiteral > Identifier
-export const lintTemplateIdentifierForColor = (node, context, config) => {
-  if (node.type !== 'Identifier') {
-    return;
-  }
-  if (isDecendantOfGlobalToken(node) || !isDecendantOfStyleBlock(node)) {
-    return;
-  }
-  const elevation = isLegacyElevation(node.name);
-  if (elevation) {
-    context.report({
-      messageId: 'legacyElevation',
-      node,
-      data: {
-        example: getElevationTokenExample(elevation)
-      },
-      fix: fixer => {
-        if (isChildOfType(node, 'TemplateLiteral') && node.range) {
-          return fixer.replaceTextRange([node.range[0] - 2, node.range[1] + 1], `background-color: \${token('${elevation.background}')};
-${' '.repeat(getNodeColumn(node) - 2)}box-shadow: \${token('${elevation.shadow}')}`);
-        }
-        return null;
-      }
-    });
-  }
-  const isException = getIsException(config.exceptions);
-  if (isLegacyColor(node.name) || isLegacyNamedColor(node.name) && !isException(node)) {
-    context.report({
-      messageId: 'hardCodedColor',
-      node,
-      suggest: getTokenSuggestion(node, node.name, config)
-    });
-    return;
-  }
-};
-
-// 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;
-};
-
-// 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;
-  }
-};
-
-// 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;
-  }
-};
-
-// 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;
-  }
-};
-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);
-const filterSuggestion = ({
-  shouldReturnSuggestion
-}) => shouldReturnSuggestion;
-const getNodeColumn = node => node.loc ? node.loc.start.column : 0;

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

@@ -1,11 +0,0 @@
-const shapeProperties = ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius', 'borderRadius', 'borderStartStartRadius', 'borderStartEndRadius', 'borderEndStartRadius', 'borderEndEndRadius'];
-const borderSizeProperties = ['borderWidth', 'outlineWidth', 'borderRightWidth', 'borderLeftWidth', 'borderTopWidth', 'borderBottomWidth', 'borderInlineWidth', 'borderBlockWidth'];
-export function isRadiusProperty(propertyName) {
-  return shapeProperties.includes(propertyName);
-}
-export function isBorderSizeProperty(propertyName) {
-  return borderSizeProperties.includes(propertyName);
-}
-export function isShapeProperty(propertyName) {
-  return isRadiusProperty(propertyName) || isBorderSizeProperty(propertyName);
-}