@atlaskit/eslint-plugin-design-system 8.33.0 → 8.36.0

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::bcb633b9d5c2def00d43b11139433c5c>>
+ * @codegen <<SignedSource::d90c2cf5e100daf98915f9467f2e5663>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -35,6 +35,7 @@ export default {
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',
+    '@atlaskit/design-system/use-tokens-typography': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }
 };

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

@@ -8,7 +8,7 @@ import { lintJSXIdentifierForColor, lintJSXLiteralForColor, lintJSXMemberForColo
 import { errorBoundary } from './error-boundary';
 import ruleMeta from './rule-meta';
 import { lintObjectForSpacing } from './spacing';
-import { convertHyphenatedNameToCamelCase, emToPixels, getDomainsForProperty, getFontSizeFromNode, getFontSizeValueInScope, getTokenReplacement, getValueFromShorthand, getValueFromTemplateLiteralRaw, includesTokenString, insertTokensImport, isAuto, isCalc, isTokenValueString, isValidSpacingValue, isZero, processCssNode, splitShorthandValues } from './utils';
+import { convertHyphenatedNameToCamelCase, emToPixels, getDomainsForProperty, getFontSizeValueInScope, getPropertyNodeFromParent, getTokenReplacement, getValueForPropertyNode, getValueFromShorthand, getValueFromTemplateLiteralRaw, includesTokenString, insertTokensImport, isAuto, isCalc, isTokenValueString, isValidSpacingValue, isZero, processCssNode, splitShorthandValues } from './utils';
 const defaultConfig = {
   domains: ['color', 'spacing'],
   applyImport: true,
@@ -89,11 +89,12 @@ const createWithConfig = initialConfig => context => {
         if (domains.includes('color')) {
           return lintObjectForColor(node, context, config);
         }
-        if (domains.includes('spacing') || domains.includes('shape') || domains.includes('typography')) {
+        if (domains.includes('spacing') || domains.includes('shape')) {
           /**
-           * We do this in case the fontSize for a style object is declared alongside the `em` or `lineHeight` declaration
+           * We do this in case the fontSize for a style object is declared alongside the `em` or `lineHeight` declaration.
            */
-          const fontSize = getFontSizeFromNode(parentNode, context);
+          const fontSizeNode = getPropertyNodeFromParent('fontSize', parentNode);
+          const fontSize = fontSizeNode && getValueForPropertyNode(fontSizeNode, context);
           return lintObjectForSpacing(node, context, config, fontSize, tokenNode);
         }
       }
@@ -140,7 +141,7 @@ const createWithConfig = initialConfig => context => {
             return currentSource;
           }
         }
-        if (domains.includes('spacing') || domains.includes('typography') || domains.includes('shape')) {
+        if (domains.includes('spacing') || domains.includes('shape')) {
           if (!isValidSpacingValue(resolvedCssValues, globalFontSize)) {
             // no changes should be made to the current property
             return currentSource;

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

@@ -1,4 +1,4 @@
-const domainsToLint = ['color', 'spacing', 'typography', 'shape'];
+const domainsToLint = ['color', 'spacing', 'shape'];
 const ruleMeta = {
   name: 'ensure-design-token-usage',
   hasSuggestions: true,

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

@@ -64,7 +64,8 @@ export const lintObjectForSpacing = (node, context, ruleConfig, fontSize, tokenN
         payload: `${propertyName}:${pixelValue}`
       },
       fix: fixer => {
-        const replacementNode = getTokenReplacement(propertyName, pixelValue);
+        // Casting due to possibility of pixelValue being string | number from emToPixels
+        const replacementNode = pixelValue && getTokenReplacement(propertyName, pixelValue);
         if (!replacementNode) {
           return null;
         }
@@ -110,6 +111,8 @@ export const lintObjectForSpacing = (node, context, ruleConfig, fontSize, tokenN
         if (!allResolvableValues) {
           return null;
         }
+
+        // Casting due to possibility of value being string | number
         const valuesWithTokenReplacement = valuesForProperty.filter(value => findTokenNameByPropertyValue(propertyName, value)).filter(value => value !== 0);
         if (valuesWithTokenReplacement.length === 0) {
           // all values could be replaceable but that just means they're numeric
@@ -139,6 +142,7 @@ export const lintObjectForSpacing = (node, context, ruleConfig, fontSize, tokenN
           const pixelValueString = `${pixelValue}px`;
           // if there is a token we take it, otherwise we go with the original value
 
+          // Casting due to possibility of value being string | number
           return findTokenNameByPropertyValue(propertyName, value) ? `\${${getTokenNodeForValue(propertyName, pixelValueString)}}` : originalValues[index];
         }).join(' ')}\``)]);
       }

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

@@ -5,7 +5,6 @@ import { spacing as spacingScale } from '@atlaskit/tokens/tokens-raw';
 import { findIdentifierInParentScope } from '../utils/find-in-parent';
 import { isColorCssPropertyName, isCurrentSurfaceCustomPropertyName } from '../utils/is-color';
 import { borderWidthValueToToken, isBorderRadius, isBorderSizeProperty, isShapeProperty, radiusValueToToken } from './shape';
-import { isCodeFontFamily, isFontFamily, isFontSize, isFontSizeSmall, isTypographyProperty, typographyValueToToken } from './typography';
 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'];
 const spacingValueToToken = Object.fromEntries(spacingScale.map(token => [token.value, token.cleanName]));
 export function insertTokensImport(fixer) {
@@ -31,8 +30,10 @@ export const splitShorthandValues = str => {
 };
 export const getValueFromShorthand = str => {
   const valueString = String(str);
-  const fontFamily = /(sans-serif$)|(monospace$)/;
-  if (fontFamily.test(valueString)) {
+  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)
@@ -57,6 +58,8 @@ const getRawExpressionForToken = (node, 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;
@@ -73,12 +76,6 @@ const getValueFromCallExpression = (node, context) => {
   if (isFontSizeSmall(node)) {
     return 11;
   }
-  if (isFontFamily(node)) {
-    return `-apple-system, BlinkMacSystemFont, \'Segoe UI\', \'Roboto\', \'Oxygen\', \'Ubuntu\', \'Fira Sans\', \'Droid Sans\', \'Helvetica Neue\', sans-serif`;
-  }
-  if (isCodeFontFamily(node)) {
-    return `\'SFMono-Medium\', \'SF Mono\', \'Segoe UI Mono\', \'Roboto Mono\', \'Ubuntu Mono\', Menlo, Consolas, Courier, monospace`;
-  }
   if (isToken(node)) {
     return getRawExpressionForToken(node, context);
   }
@@ -281,7 +278,7 @@ export const convertHyphenatedNameToCamelCase = prop => {
 
 /**
  * @param node
- * @returns The furthest parent node that is on the same line as the input node
+ * @returns The furthest parent node that is on the same line as the input node.
  */
 export const findParentNodeForLine = node => {
   var _node$loc, _node$parent$loc;
@@ -296,14 +293,13 @@ export const findParentNodeForLine = node => {
 };
 
 /**
- * Returns an array of domains that are relevant to the provided property based on the rule options
+ * Returns an array of domains that are relevant to the provided property based on the rule options.
  * @param propertyName camelCase CSS property
- * @param targetOptions Array containing the types of properties that should be included in the rule
+ * @param targetOptions Array containing the types of properties that should be included in the rule.
  * @example
  * ```
  * propertyName: padding, targetOptions: ['spacing'] -> returns ['spacing']
- * propertyName: fontWeight, targetOptions: ['spacing', 'typography'] -> returns ['typography']
- * propertyName: backgroundColor, targetOptions: ['spacing', 'typography'] -> returns []
+ * propertyName: backgroundColor, targetOptions: ['spacing'] -> returns []
  * propertyName: backgroundColor, targetOptions: ['color', 'spacing'] -> returns ['color']
  * ```
  */
@@ -318,15 +314,12 @@ export function getDomainsForProperty(propertyName, targetOptions) {
   if (isShapeProperty(propertyName) && targetOptions.includes('shape')) {
     domains.push('shape');
   }
-  if (isTypographyProperty(propertyName) && targetOptions.includes('typography')) {
-    domains.push('typography');
-  }
   return domains;
 }
 
 /**
  * Function that removes JS comments from a string of code,
- * sometimes makers will have single or multiline comments in their tagged template literals styles, this can mess with our parsing logic
+ * sometimes makers will have single or multiline comments in their tagged template literals styles, this can mess with our parsing logic.
  */
 export function cleanComments(str) {
   return str.replace(/\/\*([\s\S]*?)\*\//g, '').replace(/\/\/(.*)/g, '');
@@ -334,11 +327,11 @@ export function cleanComments(str) {
 
 /**
  * Returns an array of tuples representing a processed css within `TaggedTemplateExpression` node.
- * each element of the array is a tuple `[string, string]`,
+ * Each element of the array is a tuple `[string, string]`,
  * where the first element is the processed css line with computed values
- * and the second element of the tuple is the original css line from source
- * @param node TaggedTemplateExpression node
- * @param context Rule.RuleContext
+ * and the second element of the tuple is the original css line from source.
+ * @param node TaggedTemplateExpression node.
+ * @param context Rule.RuleContext.
  * @example
  * ```
  * `[['padding: 8', 'padding: ${gridSize()}'], ['margin: 6', 'margin: 6px' ]]`
@@ -403,7 +396,7 @@ export function getFontSizeValueInScope(cssProperties) {
 
 /**
  * Attempts to remove all non-essential words & characters from a style block.
- * Including selectors and queries
+ * Including selectors and queries.
  * @param styleString string of css properties
  */
 export function splitCssProperties(styleString) {
@@ -418,8 +411,8 @@ export function splitCssProperties(styleString) {
 }
 
 /**
- * returns whether the current string is a token value
- * @param originalVaue string representing a css property value e.g 1em, 12px
+ * Returns whether the current string is a token value.
+ * @param originalVaue string representing a css property value e.g 1em, 12px.
  */
 export function isTokenValueString(originalValue) {
   return originalValue.startsWith('${token(') && originalValue.endsWith('}');
@@ -433,19 +426,27 @@ export function includesTokenString(originalValue) {
  *
  * -> for pixels this '8px'
  * -> for weights     '400'
- * -> for family      'Arial'
+ * -> for family      'Arial'.
  *
  * @internal
  */
 export function normaliseValue(propertyName, value) {
-  const isFontWeightOrFamily = /fontWeight|fontFamily/.test(propertyName);
+  const isFontStringProperty = /fontWeight|fontFamily|fontStyle/.test(propertyName);
+  const isLineHeight = /lineHeight/.test(propertyName);
   const propertyValue = typeof value === 'string' ? value.trim() : value;
-  const lookupValue = isFontWeightOrFamily ? propertyValue : typeof propertyValue === 'string' ? propertyValue : `${propertyValue}px`;
+  let lookupValue;
+  if (isFontStringProperty) {
+    lookupValue = `${propertyValue}`;
+  } else if (isLineHeight) {
+    lookupValue = value === 1 ? `${propertyValue}` : `${propertyValue}px`;
+  } else {
+    lookupValue = typeof propertyValue === 'string' ? propertyValue : `${propertyValue}px`;
+  }
   return lookupValue;
 }
 export function findTokenNameByPropertyValue(propertyName, value) {
   const lookupValue = normaliseValue(propertyName, value);
-  const tokenName = isShapeProperty(propertyName) ? isBorderSizeProperty(propertyName) ? borderWidthValueToToken[lookupValue] : radiusValueToToken[lookupValue] : isTypographyProperty(propertyName) ? typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
+  const tokenName = isShapeProperty(propertyName) ? isBorderSizeProperty(propertyName) ? borderWidthValueToToken[lookupValue] : radiusValueToToken[lookupValue] : spacingValueToToken[lookupValue];
   if (!tokenName) {
     return undefined;
   }
@@ -454,9 +455,9 @@ export function findTokenNameByPropertyValue(propertyName, 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'
+ * 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);
@@ -466,17 +467,20 @@ export function getTokenReplacement(propertyName, value) {
   const fallbackValue = normaliseValue(propertyName, value);
   return getTokenNodeForValue(propertyName, fallbackValue);
 }
-export function getFontSizeFromNode(parentNode, context) {
-  const fontSizeNode = parentNode.properties.find(node => {
+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 === 'fontSize';
+    return node.key.name === property;
   });
-  const fontSizeValue = isNodeOfType(fontSizeNode, 'Property') ? getValue(fontSizeNode.value, context) : null;
-  const fontSize = Array.isArray(fontSizeValue) ? fontSizeValue[0] : fontSizeValue;
-  return fontSize;
+  return propertyNode;
+}
+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/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::23062a8759ba919facf30a402e5546bd>>
+ * @codegen <<SignedSource::c283cd7ede5e813a9119cd707d339273>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -32,6 +32,7 @@ import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-car
 import useHrefInLinkItem from './use-href-in-link-item';
 import usePrimitives from './use-primitives';
 import usePrimitivesText from './use-primitives-text';
+import useTokensTypography from './use-tokens-typography';
 import useVisuallyHidden from './use-visually-hidden';
 export default {
   'consistent-css-prop-usage': consistentCssPropUsage,
@@ -63,5 +64,6 @@ export default {
   'use-href-in-link-item': useHrefInLinkItem,
   'use-primitives': usePrimitives,
   'use-primitives-text': usePrimitivesText,
+  'use-tokens-typography': useTokensTypography,
   'use-visually-hidden': useVisuallyHidden
 };

package/dist/es2019/rules/use-primitives/transformers/compiled-styled/find-valid-jsx-usage-to-transform.js

@@ -1,10 +1,13 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-
+const JSX_IDENTIFIER = 'JSXIdentifier';
 /**
  * Given a component name finds its JSX usages and performs some
  * additional validations to ensure transformation can be done correctly
+ *
+ * anyOrder: if true, the order of the references doesn't matter (JSX or style declaration)
  */
-export const findValidJsxUsageToTransform = (componentName, scope) => {
+export const findValidJsxUsageToTransform = (componentName, scope, anyOrder = false) => {
+  var _variableDeclaration$;
   const variableDeclaration = scope.variables.find(v => v.name === componentName);
   if (!variableDeclaration) {
     return;
@@ -18,7 +21,18 @@ export const findValidJsxUsageToTransform = (componentName, scope) => {
   if (variableDeclaration.references.length !== 2) {
     return;
   }
-  const jsxUsage = variableDeclaration.references[1].identifier;
+  let jsxUsage = (_variableDeclaration$ = variableDeclaration.references[1]) === null || _variableDeclaration$ === void 0 ? void 0 : _variableDeclaration$.identifier;
+  if (anyOrder) {
+    const [firstIdentifier, secondIdentifier] = variableDeclaration.references.map(ref => ref === null || ref === void 0 ? void 0 : ref.identifier);
+    // Check if the first reference is a JSXOpeningElement and the second is not or vice versa
+    if (isNodeOfType(firstIdentifier, JSX_IDENTIFIER) && !isNodeOfType(secondIdentifier, JSX_IDENTIFIER)) {
+      jsxUsage = firstIdentifier;
+    } else if (isNodeOfType(secondIdentifier, JSX_IDENTIFIER) && !isNodeOfType(firstIdentifier, JSX_IDENTIFIER)) {
+      jsxUsage = secondIdentifier;
+    } else {
+      return;
+    }
+  }
   if (!isNodeOfType(jsxUsage, 'JSXIdentifier')) {
     return;
   }

package/dist/es2019/rules/use-primitives/transformers/compiled-styled/index.js

@@ -57,7 +57,8 @@ export const CompiledStyled = {
         success: false
       };
     }
-    const styledComponentJsxRef = findValidJsxUsageToTransform(styledComponentVariableRef.id.name, context.getScope());
+    const anyOrder = config.patterns.includes('jsx-order-fix');
+    const styledComponentJsxRef = findValidJsxUsageToTransform(styledComponentVariableRef.id.name, context.getScope(), anyOrder);
     if (!styledComponentJsxRef) {
       return {
         success: false

package/dist/es2019/rules/use-primitives-text/config/index.js

@@ -1,5 +1,6 @@
 const defaults = {
-  patterns: ['paragraph-elements', 'span-elements', 'strong-elements', 'emphasis-elements']
+  patterns: ['paragraph-elements', 'span-elements', 'strong-elements', 'emphasis-elements'],
+  inheritColor: false
 };
 export const getConfig = overrides => {
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

package/dist/es2019/rules/use-primitives-text/transformers/common.js

@@ -1,6 +1,5 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import * as ast from '../../../ast-nodes';
-
 // Rename data-testid prop to testId if present
 export function updateTestIdAttributeFix(node, fixer) {
   const testIdAttr = ast.JSXElement.getAttributeByName(node, 'data-testid');
@@ -8,10 +7,18 @@ export function updateTestIdAttributeFix(node, fixer) {
     return ast.JSXAttribute.updateName(testIdAttr, 'testId', fixer);
   }
 }
+
+// Add color="inherit" prop depending on config
+export function addColorInheritAttributeFix(node, config, fixer) {
+  if (!config.inheritColor) {
+    return;
+  }
+  return ast.JSXElement.addAttribute(node, 'color', 'inherit', fixer);
+}
 export const allowedAttrs = ['id', 'data-testid', 'key'];
 
 // Only allow elements with strings as children
-// The use of `FormattedMessage` component and `formatMessage` are allowed as these are used for i18n
+// The use of `<FormattedMessage ... />` component and `{formatMessage(...)}` are allowed as these are used for i18n
 export function hasTextChildrenOnly(node) {
   var _node$children;
   return (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.every(child => {

package/dist/es2019/rules/use-primitives-text/transformers/emphasis-elements.js

@@ -3,7 +3,7 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import * as ast from '../../../ast-nodes';
 import { upsertImportDeclaration } from '../../use-primitives/transformers/emotion-css/upsert-import-declaration';
-import { allowedAttrs, updateTestIdAttributeFix } from './common';
+import { addColorInheritAttributeFix, allowedAttrs, updateTestIdAttributeFix } from './common';
 export const EmphasisElements = {
   lint(node, {
     context,
@@ -26,7 +26,8 @@ export const EmphasisElements = {
       suggest: [{
         desc: `Convert to Text`,
         fix: EmphasisElements._fix(node, {
-          context
+          context,
+          config
         })
       }]
     });
@@ -56,7 +57,8 @@ export const EmphasisElements = {
     return true;
   },
   _fix(node, {
-    context
+    context,
+    config
   }) {
     return fixer => {
       const importFix = upsertImportDeclaration({
@@ -65,8 +67,9 @@ export const EmphasisElements = {
       }, context, fixer);
       const elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
       const asAttributeFix = ast.JSXElement.addAttribute(node, 'as', 'em', fixer);
+      const colorAttributeFix = addColorInheritAttributeFix(node, config, fixer);
       const testAttributeFix = updateTestIdAttributeFix(node, fixer);
-      return [importFix, ...elementNameFixes, asAttributeFix, testAttributeFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
+      return [importFix, ...elementNameFixes, asAttributeFix, colorAttributeFix, testAttributeFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
     };
   }
 };

package/dist/es2019/rules/use-primitives-text/transformers/paragraph-elements.js

@@ -3,7 +3,7 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import * as ast from '../../../ast-nodes';
 import { upsertImportDeclaration } from '../../use-primitives/transformers/emotion-css/upsert-import-declaration';
-import { allowedAttrs, updateTestIdAttributeFix } from './common';
+import { addColorInheritAttributeFix, allowedAttrs, updateTestIdAttributeFix } from './common';
 export const ParagraphElements = {
   lint(node, {
     context,
@@ -44,6 +44,7 @@ export const ParagraphElements = {
           desc: 'Convert to Text and Stack',
           fix: ParagraphElements._fixMultiple(node, {
             context,
+            config,
             refs
           })
         }]
@@ -55,7 +56,8 @@ export const ParagraphElements = {
         suggest: [{
           desc: 'Convert to Text',
           fix: ParagraphElements._fixSingle(node, {
-            context
+            context,
+            config
           })
         }]
       });
@@ -122,6 +124,13 @@ export const ParagraphElements = {
           }
         };
       }
+    } else if (!ast.JSXElement.hasAllowedAttrsOnly(node, allowedAttrs)) {
+      return {
+        success: false,
+        refs: {
+          siblings
+        }
+      };
     }
     const importDeclaration = ast.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/primitives');
 
@@ -142,7 +151,8 @@ export const ParagraphElements = {
     };
   },
   _fixSingle(node, {
-    context
+    context,
+    config
   }) {
     return fixer => {
       const importFix = upsertImportDeclaration({
@@ -150,13 +160,16 @@ export const ParagraphElements = {
         specifiers: ['Text']
       }, context, fixer);
       const elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
+      const asAttributeFix = ast.JSXElement.addAttribute(node, 'as', 'p', fixer);
+      const colorAttributeFix = addColorInheritAttributeFix(node, config, fixer);
       const testAttributeFix = updateTestIdAttributeFix(node, fixer);
-      return [importFix, ...elementNameFixes, testAttributeFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
+      return [importFix, ...elementNameFixes, asAttributeFix, colorAttributeFix, testAttributeFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
     };
   },
 
   _fixMultiple(node, {
     context,
+    config,
     refs
   }) {
     return fixer => {
@@ -172,8 +185,10 @@ export const ParagraphElements = {
       const siblingFixes = refs.siblings.map(sibling => {
         if (isNodeOfType(sibling, 'JSXElement')) {
           const elementNameFixes = ast.JSXElement.updateName(sibling, 'Text', fixer);
+          const asAttributeFix = ast.JSXElement.addAttribute(sibling, 'as', 'p', fixer);
+          const colorAttributeFix = addColorInheritAttributeFix(sibling, config, fixer);
           const testAttributeFix = updateTestIdAttributeFix(sibling, fixer);
-          return [...elementNameFixes, testAttributeFix];
+          return [...elementNameFixes, asAttributeFix, colorAttributeFix, testAttributeFix];
         }
         return undefined;
       }).flat();

package/dist/es2019/rules/use-primitives-text/transformers/span-elements.js

@@ -3,7 +3,7 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import * as ast from '../../../ast-nodes';
 import { upsertImportDeclaration } from '../../use-primitives/transformers/emotion-css/upsert-import-declaration';
-import { allowedAttrs, hasTextChildrenOnly, updateTestIdAttributeFix } from './common';
+import { addColorInheritAttributeFix, allowedAttrs, hasTextChildrenOnly, updateTestIdAttributeFix } from './common';
 export const SpanElements = {
   lint(node, {
     context,
@@ -26,7 +26,8 @@ export const SpanElements = {
       suggest: [{
         desc: `Convert to Text`,
         fix: SpanElements._fix(node, {
-          context
+          context,
+          config
         })
       }]
     });
@@ -61,7 +62,8 @@ export const SpanElements = {
     return true;
   },
   _fix(node, {
-    context
+    context,
+    config
   }) {
     return fixer => {
       const importFix = upsertImportDeclaration({
@@ -69,9 +71,9 @@ export const SpanElements = {
         specifiers: ['Text']
       }, context, fixer);
       const elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
-      const variantAttributeFix = ast.JSXElement.addAttribute(node, 'variant', 'ui', fixer);
+      const colorAttributeFix = addColorInheritAttributeFix(node, config, fixer);
       const testAttributeFix = updateTestIdAttributeFix(node, fixer);
-      return [importFix, ...elementNameFixes, variantAttributeFix, testAttributeFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
+      return [importFix, ...elementNameFixes, colorAttributeFix, testAttributeFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
     };
   }
 };

package/dist/es2019/rules/use-primitives-text/transformers/strong-elements.js

@@ -3,7 +3,7 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import * as ast from '../../../ast-nodes';
 import { upsertImportDeclaration } from '../../use-primitives/transformers/emotion-css/upsert-import-declaration';
-import { allowedAttrs, updateTestIdAttributeFix } from './common';
+import { addColorInheritAttributeFix, allowedAttrs, updateTestIdAttributeFix } from './common';
 export const StrongElements = {
   lint(node, {
     context,
@@ -26,7 +26,8 @@ export const StrongElements = {
       suggest: [{
         desc: `Convert to Text`,
         fix: StrongElements._fix(node, {
-          context
+          context,
+          config
         })
       }]
     });
@@ -56,7 +57,8 @@ export const StrongElements = {
     return true;
   },
   _fix(node, {
-    context
+    context,
+    config
   }) {
     return fixer => {
       const importFix = upsertImportDeclaration({
@@ -65,8 +67,9 @@ export const StrongElements = {
       }, context, fixer);
       const elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
       const asAttributeFix = ast.JSXElement.addAttribute(node, 'as', 'strong', fixer);
+      const colorAttributeFix = addColorInheritAttributeFix(node, config, fixer);
       const testAttributeFix = updateTestIdAttributeFix(node, fixer);
-      return [importFix, ...elementNameFixes, asAttributeFix, testAttributeFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
+      return [importFix, ...elementNameFixes, asAttributeFix, colorAttributeFix, testAttributeFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
     };
   }
 };

package/dist/es2019/rules/use-tokens-typography/config/index.js

@@ -0,0 +1,20 @@
+export const ruleSchema = {
+  type: 'array',
+  items: {
+    type: 'object',
+    properties: {
+      failSilently: {
+        type: 'boolean'
+      }
+    }
+  }
+};
+const defaultConfig = {
+  failSilently: false
+};
+export const getConfig = overrides => {
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
+  // start with an empty object, then merge in the defaults, then merge in overrides.
+  // The empty object is returned, as well as modified in place
+  return Object.assign({}, defaultConfig, overrides);
+};

package/dist/es2019/rules/use-tokens-typography/error-boundary.js

@@ -0,0 +1,19 @@
+/**
+ * ESLint rules should NEVER throw exceptions, because that breaks the VSCode ESLint server
+ * (and probably the IntelliJ one too), which causes linting to fail in a file.
+ *
+ * It also breaks CI, which was the reason this error boundary was added. It's a final
+ * catch all.
+ */
+export const errorBoundary = (func, {
+  config
+}) => {
+  try {
+    func();
+  } catch (err) {
+    if (!config.failSilently) {
+      // eslint-disable-next-line no-console
+      console.warn(err);
+    }
+  }
+};