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

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-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);
+    }
+  }
+};

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

@@ -0,0 +1,36 @@
+import { createLintRule } from '../utils/create-rule';
+import { getConfig, ruleSchema } from './config';
+import { errorBoundary } from './error-boundary';
+import { StyleObject } from './transformers/style-object';
+const create = context => {
+  const config = getConfig(context.options[0]);
+  return {
+    // const styles = css({ fontSize: '14px, ... }), styled.div({ fontSize: 14, ... })
+    ObjectExpression: node => errorBoundary(() => {
+      return StyleObject.lint(node, {
+        context
+      });
+    }, {
+      config
+    })
+  };
+};
+const rule = createLintRule({
+  meta: {
+    name: 'use-tokens-typography',
+    type: 'problem',
+    fixable: 'code',
+    hasSuggestions: true,
+    docs: {
+      description: 'Enforces usage of design tokens for typography properties rather than hard-coded values.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      noRawTypographyValues: 'Typography primitives or tokens should be used instead of hard-coded values.\n\n@meta <<{{payload}}>>.'
+    },
+    schema: ruleSchema
+  },
+  create
+});
+export default rule;

package/dist/es2019/rules/use-tokens-typography/transformers/style-object.js

@@ -0,0 +1,209 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { Object as ASTObject, ObjectEntry, Root } from '../../../ast-nodes';
+import { getValueForPropertyNode, insertTokensImport, normaliseValue } from '../../ensure-design-token-usage/utils';
+import { isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfType } from '../../utils/is-node';
+import { convertPropertyNodeToStringableNode, defaultFontWeight, findFontFamilyValueForToken, findFontWeightTokenForValue, findTypographyTokenForValues, fontWeightMap, getLiteralProperty, getTokenProperty, isValidPropertyNode, notUndefined } from '../utils';
+export const StyleObject = {
+  lint(node, {
+    context
+  }) {
+    // To force the correct node type
+    if (!isNodeOfType(node, 'ObjectExpression')) {
+      return {
+        success: false
+      };
+    }
+
+    // Check whether all criteria needed to make a transformation are met
+    const {
+      success,
+      refs
+    } = StyleObject._check(node, {
+      context
+    });
+    if (!success || !refs) {
+      return;
+    }
+    const {
+      fontSizeNode,
+      fontSizeRaw,
+      tokensImportNode
+    } = refs;
+    const fontSizeValue = normaliseValue('fontSize', fontSizeRaw);
+
+    // -- Font weight --
+    const fontWeightNode = ASTObject.getEntryByPropertyName(node, 'fontWeight');
+    const fontWeightRaw = fontWeightNode && getValueForPropertyNode(fontWeightNode, context);
+
+    // If no fontWeight value exists, default to 400 to avoid matching with a bolder token resulting in a visual change
+    let fontWeightValue = fontWeightRaw && normaliseValue('fontWeight', fontWeightRaw) || defaultFontWeight;
+    fontWeightValue = fontWeightValue.length === 3 ? fontWeightValue : fontWeightMap[fontWeightValue] || defaultFontWeight;
+
+    // -- Line height --
+    const lineHeightNode = ASTObject.getEntryByPropertyName(node, 'lineHeight');
+    const lineHeightRaw = lineHeightNode && getValueForPropertyNode(lineHeightNode, context);
+    let shouldAddFontWeight = false;
+    let lineHeightValue = lineHeightRaw && normaliseValue('lineHeight', lineHeightRaw) || undefined;
+    if (lineHeightValue === fontSizeValue) {
+      lineHeightValue = '1';
+    }
+
+    // -- Match tokens --
+    let matchingTokens = findTypographyTokenForValues(fontSizeValue, lineHeightValue);
+    if (matchingTokens.length) {
+      // If we have multiple matching tokens, try matching fontWeight
+      let matchingTokensWithWeight = matchingTokens.filter(token => fontWeightValue ? token.values.fontWeight === fontWeightValue : token);
+      if (matchingTokensWithWeight.length) {
+        // Possibly narrowed down tokens
+        matchingTokens = matchingTokensWithWeight;
+      } else {
+        // Ended up with 0 matches by matching fontWeight
+        // return body token and add fontWeight manually
+        matchingTokens = matchingTokens.filter(token => token.tokenName.includes('.body'));
+        shouldAddFontWeight = true;
+      }
+    }
+
+    // Get other font-* nodes that we can replace/remove.
+    // These aren't needed for token matching.
+
+    // -- Font family --
+    const fontFamilyNode = ASTObject.getEntryByPropertyName(node, 'fontFamily');
+    const fontFamilyRaw = fontFamilyNode && getValueForPropertyNode(fontFamilyNode, context);
+    const fontFamilyValue = fontFamilyRaw && normaliseValue('fontFamily', fontFamilyRaw) || undefined;
+    let fontFamilyToAdd;
+    // If font family uses the Charlie font we can't replace; exit
+    if (fontFamilyValue) {
+      if (fontFamilyValue.toLowerCase().includes('charlie display')) {
+        fontFamilyToAdd = 'heading';
+      } else if (fontFamilyValue.toLowerCase().includes('charlie text')) {
+        fontFamilyToAdd = 'body';
+      }
+    } else {
+      // Font family node exists but we can't resolve its value
+      // Will need to re-add it below the font property to ensure it still applies
+      fontFamilyToAdd = fontFamilyNode ? 'original' : undefined;
+    }
+
+    // -- Font style --
+    const fontStyleNode = ASTObject.getEntryByPropertyName(node, 'fontStyle');
+    const fontStyleRaw = fontStyleNode && getValueForPropertyNode(fontStyleNode, context);
+    const fontStyleValue = fontStyleRaw && normaliseValue('fontStyle', fontStyleRaw) || undefined;
+    let fontStyleToAdd;
+    if (fontStyleValue === 'italic') {
+      fontStyleToAdd = 'italic';
+    }
+
+    // -- Letter spacing --
+    const letterSpacingNode = ASTObject.getEntryByPropertyName(node, 'letterSpacing');
+
+    // A single matching token
+    // TOOD: Maybe suggest options if > 1 matching token
+    if (matchingTokens.length === 1) {
+      const matchingToken = matchingTokens[0];
+
+      // fontSize node is always first
+      const nodesToReplace = [fontSizeNode, fontWeightNode, lineHeightNode, fontFamilyNode, fontStyleNode, letterSpacingNode].filter(notUndefined);
+      const fontFamilyTokenName = fontFamilyToAdd ? `font.family.brand.${fontFamilyToAdd}` : '';
+      const fontWeightReplacementToken = shouldAddFontWeight ? findFontWeightTokenForValue(fontWeightValue) : undefined;
+      const fontWeightReplacement = fontWeightReplacementToken && getTokenProperty('fontWeight', fontWeightReplacementToken.tokenName, fontWeightValue);
+      const fontFamilyReplacement = fontFamilyToAdd && (fontFamilyToAdd === 'original' ? convertPropertyNodeToStringableNode(
+      // This will always exist if fontFamilyToAdd === 'original', TS can't figure that out.
+      fontFamilyNode) : getTokenProperty('fontFamily', fontFamilyTokenName, findFontFamilyValueForToken(fontFamilyTokenName)));
+      const fontStyleReplacement = fontStyleToAdd && getLiteralProperty('fontStyle', fontStyleToAdd);
+      const fixerRefs = {
+        matchingToken,
+        nodesToReplace,
+        tokensImportNode,
+        fontWeightReplacement,
+        fontFamilyReplacement,
+        fontStyleReplacement
+      };
+      context.report({
+        node: fontSizeNode,
+        messageId: 'noRawTypographyValues',
+        data: {
+          payload: `fontSize:${fontSizeRaw}`
+        },
+        fix: StyleObject._fix(fixerRefs, context)
+      });
+    } else if (!matchingTokens.length) {
+      context.report({
+        node: fontSizeNode,
+        messageId: 'noRawTypographyValues',
+        data: {
+          payload: `fontSize:${fontSizeRaw}`
+        }
+      });
+    }
+    return;
+  },
+  _check(node, {
+    context
+  }) {
+    if (!isDecendantOfStyleBlock(node) && !isDecendantOfType(node, 'JSXExpressionContainer')) {
+      return {
+        success: false
+      };
+    }
+
+    // -- Font size --
+    const fontSizeNode = ASTObject.getEntryByPropertyName(node, 'fontSize');
+    if (!fontSizeNode || !isValidPropertyNode(fontSizeNode) || isDecendantOfGlobalToken(fontSizeNode.value)) {
+      return {
+        success: false
+      };
+    }
+    const fontSizeRaw = getValueForPropertyNode(fontSizeNode, context);
+
+    // Without a valid fontSize value we can't be certain what token should be used; exit
+    if (!fontSizeRaw) {
+      return {
+        success: false
+      };
+    }
+    const importDeclaration = Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/tokens');
+
+    // If there is more than one `@atlaskit/tokens` import, then it becomes difficult to determine which import to transform
+    if (importDeclaration.length > 1) {
+      return {
+        success: false
+      };
+    }
+    return {
+      success: true,
+      refs: {
+        fontSizeNode,
+        fontSizeRaw,
+        tokensImportNode: importDeclaration[0]
+      }
+    };
+  },
+  _fix(refs, context) {
+    return fixer => {
+      const {
+        matchingToken,
+        nodesToReplace,
+        tokensImportNode,
+        fontWeightReplacement,
+        fontFamilyReplacement,
+        fontStyleReplacement
+      } = refs;
+      const fontSizeNode = nodesToReplace[0];
+      return (!tokensImportNode ? [insertTokensImport(fixer)] : []).concat(nodesToReplace.map((node, index) => {
+        // Replace first node with token, delete remaining nodes. Guaranteed to be fontSize
+        if (index === 0) {
+          return fixer.replaceText(node, `${getTokenProperty('font', matchingToken.tokenName, matchingToken.tokenValue)}`);
+        }
+
+        // We don't replace fontWeight/fontFamily/fontStyle here in case it occurs before the font property.
+        // Instead delete the original property and add below
+        return ObjectEntry.deleteEntry(node, context, fixer);
+      }),
+      // Make sure font weight/family/style properties are added AFTER font property to ensure they override corectly
+      fontWeightReplacement ? [fixer.insertTextAfter(fontSizeNode, `,\n${fontWeightReplacement}`)] : [], fontFamilyReplacement ? [fixer.insertTextAfter(fontSizeNode, `,\n${fontFamilyReplacement}`)] : [], fontStyleReplacement ? [fixer.insertTextAfter(fontSizeNode, `,\n${fontStyleReplacement}`)] : []);
+    };
+  }
+};

package/dist/es2019/rules/use-tokens-typography/utils.js

@@ -0,0 +1,99 @@
+import { callExpression, identifier, isNodeOfType, literal, property } from 'eslint-codemod-utils';
+import { typographyPalette } from '@atlaskit/tokens/palettes-raw';
+import { typographyAdg3 as typographyTokens } from '@atlaskit/tokens/tokens-raw';
+export const typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
+export const isTypographyProperty = propertyName => {
+  return typographyProperties.includes(propertyName);
+};
+export const isFontSize = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'fontSize' || node.callee.name === 'getFontSize');
+export const isFontSizeSmall = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && node.callee.name === 'fontSizeSmall';
+export const isFontFamily = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'fontFamily' || node.callee.name === 'getFontFamily');
+export const isCodeFontFamily = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'codeFontFamily' || node.callee.name === 'getCodeFontFamily');
+export const typographyValueToToken = typographyTokens
+// we're filtering here to remove the `font` tokens.
+.filter(t => t.attributes.group === 'typography').filter(t => t.cleanName.includes('font.heading') || t.cleanName.includes('font.body')).map(currentToken => {
+  var _typographyPalette$fi, _typographyPalette$fi2, _typographyPalette$fi3;
+  const individualValues = {
+    fontSize: (_typographyPalette$fi = typographyPalette.find(baseToken => baseToken.path.slice(-1)[0] ===
+    // @ts-expect-error token.original.value can be a string, due to the typographyTokens export including deprecated tokens
+    currentToken.original.value.fontSize)) === null || _typographyPalette$fi === void 0 ? void 0 : _typographyPalette$fi.value,
+    fontWeight: (_typographyPalette$fi2 = typographyPalette.find(baseToken => baseToken.path.slice(-1)[0] ===
+    // @ts-expect-error token.original.value can be a string, due to the typographyTokens export including deprecated tokens
+    currentToken.original.value.fontWeight)) === null || _typographyPalette$fi2 === void 0 ? void 0 : _typographyPalette$fi2.value,
+    lineHeight: (_typographyPalette$fi3 = typographyPalette.find(baseToken => baseToken.path.slice(-1)[0] ===
+    // @ts-expect-error token.original.value can be a string, due to the typographyTokens export including deprecated tokens
+    currentToken.original.value.lineHeight)) === null || _typographyPalette$fi3 === void 0 ? void 0 : _typographyPalette$fi3.value
+  };
+  return {
+    tokenName: currentToken.cleanName,
+    tokenValue: currentToken.value,
+    values: individualValues
+  };
+});
+export function findTypographyTokenForValues(fontSize, lineHeight) {
+  let matchingTokens = typographyValueToToken.filter(token => token.values.fontSize === fontSize)
+  // If lineHeight == 1, we don't match to a token
+  .filter(() => lineHeight === '1' ? false : true);
+  return matchingTokens;
+}
+export const fontWeightTokens = typographyTokens.filter(token => token.attributes.group === 'fontWeight').map(token => {
+  return {
+    tokenName: token.cleanName,
+    tokenValue: token.value,
+    values: {}
+  };
+});
+export function findFontWeightTokenForValue(fontWeight) {
+  return fontWeightTokens.find(token => token.tokenValue === fontWeight);
+}
+export const fontWeightMap = {
+  regular: '400',
+  medium: '500',
+  semibold: '600',
+  bold: '700'
+};
+export const defaultFontWeight = fontWeightMap.regular;
+export const fontFamilyTokens = typographyTokens.filter(token => token.attributes.group === 'fontFamily');
+export function findFontFamilyValueForToken(tokenName) {
+  var _fontFamilyTokens$fin;
+  // Note this will only ever be undefined if the tokens get renamed, and should never happen.
+  return ((_fontFamilyTokens$fin = fontFamilyTokens.find(token => token.cleanName === tokenName)) === null || _fontFamilyTokens$fin === void 0 ? void 0 : _fontFamilyTokens$fin.value) || '';
+}
+export function notUndefined(value) {
+  return value !== undefined;
+}
+export function isValidPropertyNode(node) {
+  if (!isNodeOfType(node.key, 'Identifier') && !isNodeOfType(node.key, 'Literal')) {
+    return false;
+  }
+  return true;
+}
+function getTokenNode(tokenName, tokenValue) {
+  return callExpression({
+    callee: identifier({
+      name: 'token'
+    }),
+    arguments: [literal({
+      value: `'${tokenName}'`
+    }), literal(tokenValue)],
+    optional: false
+  });
+}
+export function getTokenProperty(propertyName, tokenName, tokenFallback) {
+  return property({
+    key: identifier(propertyName),
+    value: getTokenNode(tokenName, tokenFallback)
+  });
+}
+export function getLiteralProperty(propertyName, propertyValue) {
+  return property({
+    key: identifier(propertyName),
+    value: literal(propertyValue)
+  });
+}
+export function convertPropertyNodeToStringableNode(node) {
+  return property({
+    key: node.key,
+    value: node.value
+  });
+}

package/dist/esm/ast-nodes/index.js

@@ -3,4 +3,5 @@ export { Import } from './import';
 export { JSXAttribute } from './jsx-attribute';
 export { JSXElement } from './jsx-element';
 export { Object } from './object';
+export { ObjectEntry } from './object-entry';
 export { Root } from './root';

package/dist/esm/ast-nodes/object-entry.js

@@ -0,0 +1,22 @@
+var ObjectEntry = {
+  deleteEntry: function deleteEntry(node, context, fixer) {
+    var _lastToken;
+    // context.getSourceCode() is deprecated in favour of context.sourceCode, however this returns undefined for some reason
+    var sourceCode = context.getSourceCode();
+
+    // fixer.remove() doesn't account for things like commas or newlines within an ObjectExpression and will result in invalid output.
+    // This approach specifically removes the node and trailing comma, and should work for single- and multi-line objects.
+    // From https://github.com/eslint/eslint/issues/9576#issuecomment-341737453
+    var prevToken = sourceCode.getTokenBefore(node);
+    while (((_prevToken = prevToken) === null || _prevToken === void 0 ? void 0 : _prevToken.value) !== ',' && ((_prevToken2 = prevToken) === null || _prevToken2 === void 0 ? void 0 : _prevToken2.value) !== '{') {
+      var _prevToken, _prevToken2;
+      prevToken = sourceCode.getTokenBefore(node);
+    }
+    var lastToken = sourceCode.getTokenAfter(node);
+    if (((_lastToken = lastToken) === null || _lastToken === void 0 ? void 0 : _lastToken.value) !== ',') {
+      lastToken = sourceCode.getTokenBefore(lastToken);
+    }
+    return fixer.removeRange([prevToken.range[1], lastToken.range[1]]);
+  }
+};
+export { ObjectEntry };

package/dist/esm/ast-nodes/object.js

@@ -27,7 +27,7 @@ var ASTObjectExpression = {
     });
   },
   /**
-   * Returns a key-value pair like: `padding: '8px'` from: `{ padding: '8px' }`.
+   * Returns the first Property node from an Object that matches the provided name.
    */
   getEntryByPropertyName: function getEntryByPropertyName(node, name) {
     return node.properties.find(function (property) {

package/dist/esm/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'
   }
 };