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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.34.0
+
+### Minor Changes
+
+- [#75311](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75311) [`96ca033f8748`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/96ca033f8748) - Added new `use-tokens-typography` rule that handles converting fontSize and similar font properties to tokens. Removed typography functionality from `ensure-design-token-usage` rule.
+
 ## 8.33.0
 
 ### Minor Changes

package/README.md

@@ -78,6 +78,7 @@ module.exports = {
 | <a href="./src/rules/use-href-in-link-item/README.md">use-href-in-link-item</a>                                     | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes         | Yes     | Yes         |
 | <a href="./src/rules/use-primitives/README.md">use-primitives</a>                                                   | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | Yes         |
 | <a href="./src/rules/use-primitives-text/README.md">use-primitives-text</a>                                         | Encourage the usage of text components.                                                                                                                                                                                                                                                                             |             | Yes     | Yes         |
+| <a href="./src/rules/use-tokens-typography/README.md">use-tokens-typography</a>                                     | Enforces usage of design tokens for typography properties rather than hard-coded values.                                                                                                                                                                                                                            |             | Yes     | Yes         |
 | <a href="./src/rules/use-visually-hidden/README.md">use-visually-hidden</a>                                         | Enforce usage of the visually hidden component.                                                                                                                                                                                                                                                                     | Yes         | Yes     |             |
 
 <!-- END_RULE_TABLE_CODEGEN -->

package/constellation/ensure-design-token-usage/usage.mdx

@@ -2,7 +2,7 @@
 
 Using design tokens results in a harmonious experience for end users whilst providing theming and consistency.
 All experiences must use color tokens otherwise when switching between themes, unexpected incidents can occur where not all of the UI is themed.
-Space, typography, and shape tokens are strongly recommended to further align our experiences and make future changes easier.
+Space, and shape tokens are strongly recommended to further align our experiences and make future changes easier.
 
 ## Examples
 
@@ -57,7 +57,7 @@ This rule comes with options to aid in migrating to design tokens.
 
 ### domains
 
-An array specifiying which token domains to lint against (`color`, `spacing`, `typography`, `shape`). Defaults to [`'color'`] if not provided.
+An array specifiying which token domains to lint against (`color`, `spacing`, `shape`). Defaults to [`'color'`] if not provided.
 
 ### applyImport
 

package/constellation/index/usage.mdx

@@ -40,6 +40,7 @@ This plugin contains rules that should be used when working with the [Atlassian
 | <a href="use-href-in-link-item/usage">use-href-in-link-item</a>                                     | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes         | Yes     | Yes         |
 | <a href="use-primitives/usage">use-primitives</a>                                                   | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | Yes         |
 | <a href="use-primitives-text/usage">use-primitives-text</a>                                         | Encourage the usage of text components.                                                                                                                                                                                                                                                                             |             | Yes     | Yes         |
+| <a href="use-tokens-typography/usage">use-tokens-typography</a>                                     | Enforces usage of design tokens for typography properties rather than hard-coded values.                                                                                                                                                                                                                            |             | Yes     | Yes         |
 | <a href="use-visually-hidden/usage">use-visually-hidden</a>                                         | Enforce usage of the visually hidden component.                                                                                                                                                                                                                                                                     | Yes         | Yes     |             |
 
 <!-- END_RULE_TABLE_CODEGEN -->

package/constellation/use-tokens-typography/usage.mdx

@@ -0,0 +1,42 @@
+# use-tokens-typography
+
+Enforces the use of design tokens for typography properties.
+
+Using design tokens results in a harmonious experience for end users whilst providing theming and consistency.
+Typography tokens are strongly recommended to further align our experiences and make future changes easier.
+
+Note: This rule is fairly defensive when it comes to replacing values with tokens. It will only run over style blocks that contain a fontSize property. It will then attempt to match that font size to a token. If multiple matching tokens are found it then tries to match on font weight. If a token can be found to match the font size but not font weight, the token is applied and then a font weight token override is applied to ensure the tokenised styles match the original. One main exception is line height - **this rule will match against tokens that have a different line height**. Letter spacing values are also ignored.
+
+## Examples
+
+Using anything other than design tokens such as hardcoded values or legacy theme constants will be considered violations.
+
+### Incorrect
+
+```js
+import { fontSize } from '@atlaskit/theme/constants';
+
+css({ fontSize: fontSize() });
+                ^^^^^^^^^^
+
+css({ fontSize: '14px' });
+                ^^^^^^
+
+css({
+  fontSize: '14px',
+            ^^^^^^
+  lineHeight: '20px',
+  fontWeight: 600
+});
+
+```
+
+### Correct
+
+```js
+import { token } from '@atlaskit/tokens';
+
+css({ fontSize: token('font.heading.large') });
+
+css({ fontSize: token('font.body') });
+```

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

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "Object", {
     return _object.Object;
   }
 });
+Object.defineProperty(exports, "ObjectEntry", {
+  enumerable: true,
+  get: function get() {
+    return _objectEntry.ObjectEntry;
+  }
+});
 Object.defineProperty(exports, "Root", {
   enumerable: true,
   get: function get() {
@@ -44,4 +50,5 @@ var _import = require("./import");
 var _jsxAttribute = require("./jsx-attribute");
 var _jsxElement = require("./jsx-element");
 var _object = require("./object");
+var _objectEntry = require("./object-entry");
 var _root = require("./root");

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ObjectEntry = void 0;
+var ObjectEntry = exports.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]]);
+  }
+};

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

@@ -33,7 +33,7 @@ var ASTObjectExpression = exports.Object = {
     });
   },
   /**
-   * 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/cjs/presets/all.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * 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
  */
 var _default = exports.default = {
@@ -41,6 +41,7 @@ var _default = exports.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/cjs/rules/ensure-design-token-usage/index.js

@@ -111,11 +111,12 @@ var createWithConfig = exports.createWithConfig = function createWithConfig(init
             if (domains.includes('color')) {
               return (0, _color.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.
                */
-              var fontSize = (0, _utils.getFontSizeFromNode)(parentNode, context);
+              var fontSizeNode = (0, _utils.getPropertyNodeFromParent)('fontSize', parentNode);
+              var fontSize = fontSizeNode && (0, _utils.getValueForPropertyNode)(fontSizeNode, context);
               return (0, _spacing.lintObjectForSpacing)(node, context, config, fontSize, tokenNode);
             }
           }
@@ -173,7 +174,7 @@ var createWithConfig = exports.createWithConfig = function createWithConfig(init
                 return currentSource;
               }
             }
-            if (domains.includes('spacing') || domains.includes('typography') || domains.includes('shape')) {
+            if (domains.includes('spacing') || domains.includes('shape')) {
               if (!(0, _utils.isValidSpacingValue)(resolvedCssValues, globalFontSize)) {
                 // no changes should be made to the current property
                 return currentSource;

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var domainsToLint = ['color', 'spacing', 'typography', 'shape'];
+var domainsToLint = ['color', 'spacing', 'shape'];
 var ruleMeta = {
   name: 'ensure-design-token-usage',
   hasSuggestions: true,

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

@@ -74,7 +74,8 @@ var lintObjectForSpacing = exports.lintObjectForSpacing = function lintObjectFor
         payload: "".concat(propertyName, ":").concat(pixelValue)
       },
       fix: function fix(fixer) {
-        var replacementNode = (0, _utils.getTokenReplacement)(propertyName, pixelValue);
+        // Casting due to possibility of pixelValue being string | number from emToPixels
+        var replacementNode = pixelValue && (0, _utils.getTokenReplacement)(propertyName, pixelValue);
         if (!replacementNode) {
           return null;
         }
@@ -121,6 +122,8 @@ var lintObjectForSpacing = exports.lintObjectForSpacing = function lintObjectFor
         if (!allResolvableValues) {
           return null;
         }
+
+        // Casting due to possibility of value being string | number
         var valuesWithTokenReplacement = valuesForProperty.filter(function (value) {
           return (0, _utils.findTokenNameByPropertyValue)(propertyName, value);
         }).filter(function (value) {
@@ -154,6 +157,7 @@ var lintObjectForSpacing = exports.lintObjectForSpacing = function lintObjectFor
           var pixelValueString = "".concat(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 (0, _utils.findTokenNameByPropertyValue)(propertyName, value) ? "${".concat((0, _utils.getTokenNodeForValue)(propertyName, pixelValueString), "}") : originalValues[index];
         }).join(' '), "`"))]);
       }

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

@@ -8,12 +8,14 @@ exports.cleanComments = cleanComments;
 exports.findParentNodeForLine = exports.emToPixels = exports.convertHyphenatedNameToCamelCase = void 0;
 exports.findTokenNameByPropertyValue = findTokenNameByPropertyValue;
 exports.getDomainsForProperty = getDomainsForProperty;
-exports.getFontSizeFromNode = getFontSizeFromNode;
 exports.getFontSizeValueInScope = getFontSizeValueInScope;
+exports.getPropertyNodeFromParent = getPropertyNodeFromParent;
 exports.getRawExpression = void 0;
 exports.getTokenNodeForValue = getTokenNodeForValue;
 exports.getTokenReplacement = getTokenReplacement;
-exports.getValueFromTemplateLiteralRaw = exports.getValueFromShorthand = exports.getValue = void 0;
+exports.getValue = void 0;
+exports.getValueForPropertyNode = getValueForPropertyNode;
+exports.getValueFromTemplateLiteralRaw = exports.getValueFromShorthand = void 0;
 exports.includesTokenString = includesTokenString;
 exports.insertTokensImport = insertTokensImport;
 exports.isSpacingProperty = exports.isCalc = exports.isAuto = void 0;
@@ -30,7 +32,6 @@ var _tokensRaw = require("@atlaskit/tokens/tokens-raw");
 var _findInParent = require("../utils/find-in-parent");
 var _isColor = require("../utils/is-color");
 var _shape = require("./shape");
-var _typography = require("./typography");
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 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'];
@@ -60,8 +61,10 @@ var splitShorthandValues = exports.splitShorthandValues = function splitShorthan
 };
 var getValueFromShorthand = exports.getValueFromShorthand = function getValueFromShorthand(str) {
   var valueString = String(str);
-  var fontFamily = /(sans-serif$)|(monospace$)/;
-  if (fontFamily.test(valueString)) {
+  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)
@@ -90,6 +93,12 @@ var getRawExpressionForToken = function getRawExpressionForToken(node, context)
   }).join(', '), ")}");
   return call;
 };
+var isFontSize = function isFontSize(node) {
+  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'fontSize' || node.callee.name === 'getFontSize');
+};
+var isFontSizeSmall = function isFontSizeSmall(node) {
+  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && node.callee.name === 'fontSizeSmall';
+};
 var getValueFromCallExpression = function getValueFromCallExpression(node, context) {
   if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression')) {
     return null;
@@ -100,18 +109,12 @@ var getValueFromCallExpression = function getValueFromCallExpression(node, conte
   if ((0, _shape.isBorderRadius)(node)) {
     return 3;
   }
-  if ((0, _typography.isFontSize)(node)) {
+  if (isFontSize(node)) {
     return 14;
   }
-  if ((0, _typography.isFontSizeSmall)(node)) {
+  if (isFontSizeSmall(node)) {
     return 11;
   }
-  if ((0, _typography.isFontFamily)(node)) {
-    return "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
-  }
-  if ((0, _typography.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);
   }
@@ -316,7 +319,7 @@ var convertHyphenatedNameToCamelCase = exports.convertHyphenatedNameToCamelCase
 
 /**
  * @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.
  */
 var findParentNodeForLine = exports.findParentNodeForLine = function findParentNodeForLine(node) {
   var _node$loc, _node$parent$loc;
@@ -331,14 +334,13 @@ var findParentNodeForLine = exports.findParentNodeForLine = function findParentN
 };
 
 /**
- * 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']
  * ```
  */
@@ -353,15 +355,12 @@ function getDomainsForProperty(propertyName, targetOptions) {
   if ((0, _shape.isShapeProperty)(propertyName) && targetOptions.includes('shape')) {
     domains.push('shape');
   }
-  if ((0, _typography.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.
  */
 function cleanComments(str) {
   return str.replace(/\/\*([\s\S]*?)\*\//g, '').replace(/\/\/(.*)/g, '');
@@ -369,11 +368,11 @@ 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' ]]`
@@ -448,7 +447,7 @@ 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
  */
 function splitCssProperties(styleString) {
@@ -473,8 +472,8 @@ 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.
  */
 function isTokenValueString(originalValue) {
   return originalValue.startsWith('${token(') && originalValue.endsWith('}');
@@ -488,19 +487,27 @@ function includesTokenString(originalValue) {
  *
  * -> for pixels this '8px'
  * -> for weights     '400'
- * -> for family      'Arial'
+ * -> for family      'Arial'.
  *
  * @internal
  */
 function normaliseValue(propertyName, value) {
-  var isFontWeightOrFamily = /fontWeight|fontFamily/.test(propertyName);
+  var isFontStringProperty = /fontWeight|fontFamily|fontStyle/.test(propertyName);
+  var isLineHeight = /lineHeight/.test(propertyName);
   var propertyValue = typeof value === 'string' ? value.trim() : value;
-  var lookupValue = isFontWeightOrFamily ? propertyValue : typeof propertyValue === 'string' ? propertyValue : "".concat(propertyValue, "px");
+  var lookupValue;
+  if (isFontStringProperty) {
+    lookupValue = "".concat(propertyValue);
+  } else if (isLineHeight) {
+    lookupValue = value === 1 ? "".concat(propertyValue) : "".concat(propertyValue, "px");
+  } else {
+    lookupValue = typeof propertyValue === 'string' ? propertyValue : "".concat(propertyValue, "px");
+  }
   return lookupValue;
 }
 function findTokenNameByPropertyValue(propertyName, value) {
   var lookupValue = normaliseValue(propertyName, value);
-  var tokenName = (0, _shape.isShapeProperty)(propertyName) ? (0, _shape.isBorderSizeProperty)(propertyName) ? _shape.borderWidthValueToToken[lookupValue] : _shape.radiusValueToToken[lookupValue] : (0, _typography.isTypographyProperty)(propertyName) ? _typography.typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
+  var tokenName = (0, _shape.isShapeProperty)(propertyName) ? (0, _shape.isBorderSizeProperty)(propertyName) ? _shape.borderWidthValueToToken[lookupValue] : _shape.radiusValueToToken[lookupValue] : spacingValueToToken[lookupValue];
   if (!tokenName) {
     return undefined;
   }
@@ -509,9 +516,9 @@ 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'.
  */
 function getTokenReplacement(propertyName, value) {
   var tokenName = findTokenNameByPropertyValue(propertyName, value);
@@ -521,17 +528,20 @@ function getTokenReplacement(propertyName, value) {
   var fallbackValue = normaliseValue(propertyName, value);
   return getTokenNodeForValue(propertyName, fallbackValue);
 }
-function getFontSizeFromNode(parentNode, context) {
-  var fontSizeNode = parentNode.properties.find(function (node) {
+function getPropertyNodeFromParent(property, parentNode) {
+  var propertyNode = parentNode.properties.find(function (node) {
     if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Property')) {
       return;
     }
     if (!(0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier')) {
       return;
     }
-    return node.key.name === 'fontSize';
+    return node.key.name === property;
   });
-  var fontSizeValue = (0, _eslintCodemodUtils.isNodeOfType)(fontSizeNode, 'Property') ? getValue(fontSizeNode.value, context) : null;
-  var fontSize = Array.isArray(fontSizeValue) ? fontSizeValue[0] : fontSizeValue;
-  return fontSize;
+  return propertyNode;
+}
+function getValueForPropertyNode(propertyNode, context) {
+  var propertyValueRaw = (0, _eslintCodemodUtils.isNodeOfType)(propertyNode, 'Property') ? getValue(propertyNode.value, context) : null;
+  var propertyValue = Array.isArray(propertyValueRaw) ? propertyValueRaw[0] : propertyValueRaw;
+  return propertyValue;
 }

package/dist/cjs/rules/index.codegen.js

@@ -34,10 +34,11 @@ var _useHeadingLevelInSpotlightCard = _interopRequireDefault(require("./use-head
 var _useHrefInLinkItem = _interopRequireDefault(require("./use-href-in-link-item"));
 var _usePrimitives = _interopRequireDefault(require("./use-primitives"));
 var _usePrimitivesText = _interopRequireDefault(require("./use-primitives-text"));
+var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typography"));
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * 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
  */
 var _default = exports.default = {
@@ -70,5 +71,6 @@ var _default = exports.default = {
   'use-href-in-link-item': _useHrefInLinkItem.default,
   'use-primitives': _usePrimitives.default,
   'use-primitives-text': _usePrimitivesText.default,
+  'use-tokens-typography': _useTokensTypography.default,
   'use-visually-hidden': _useVisuallyHidden.default
 };

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ruleSchema = exports.getConfig = void 0;
+var ruleSchema = exports.ruleSchema = {
+  type: 'array',
+  items: {
+    type: 'object',
+    properties: {
+      failSilently: {
+        type: 'boolean'
+      }
+    }
+  }
+};
+var defaultConfig = {
+  failSilently: false
+};
+var getConfig = exports.getConfig = function 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/cjs/rules/use-tokens-typography/error-boundary.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.errorBoundary = void 0;
+/**
+ * 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.
+ */
+var errorBoundary = exports.errorBoundary = function errorBoundary(func, _ref) {
+  var config = _ref.config;
+  try {
+    func();
+  } catch (err) {
+    if (!config.failSilently) {
+      // eslint-disable-next-line no-console
+      console.warn(err);
+    }
+  }
+};

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createRule = require("../utils/create-rule");
+var _config = require("./config");
+var _errorBoundary = require("./error-boundary");
+var _styleObject = require("./transformers/style-object");
+var create = function create(context) {
+  var config = (0, _config.getConfig)(context.options[0]);
+  return {
+    // const styles = css({ fontSize: '14px, ... }), styled.div({ fontSize: 14, ... })
+    ObjectExpression: function ObjectExpression(node) {
+      return (0, _errorBoundary.errorBoundary)(function () {
+        return _styleObject.StyleObject.lint(node, {
+          context: context
+        });
+      }, {
+        config: config
+      });
+    }
+  };
+};
+var rule = (0, _createRule.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: _config.ruleSchema
+  },
+  create: create
+});
+var _default = exports.default = rule;