@atlaskit/eslint-plugin-design-system 8.4.2 → 8.4.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.4.4
+
+### Patch Changes
+
+- [`f7a807adba2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f7a807adba2) - Update the `ensure-design-token-usage` rule to disallow setting the 'current surface' CSS variable (--ds-elevation-surface-current) to a hardcoded color.
+- Updated dependencies
+
+## 8.4.3
+
+### Patch Changes
+
+- [`96e35ec4b9d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/96e35ec4b9d) - Tweak `use-primitives` and `prefer-primitives` logic to stop false positives for component names that contain HTML element names.
+
 ## 8.4.2
 
 ### Patch Changes

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

@@ -13,7 +13,7 @@ var _isNode = require("../utils/is-node");
 var _color = require("./color");
 var _ruleMeta = _interopRequireDefault(require("./rule-meta"));
 var _spacing = require("./spacing");
-var _spacingUtils = require("./spacing-utils");
+var _utils = require("./utils");
 var defaultConfig = {
   domains: ['color', 'spacing'],
   applyImport: true,
@@ -69,12 +69,13 @@ var createWithConfig = function createWithConfig(initialConfig) {
           if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'ObjectExpression')) {
             return node.value.properties.forEach(findObjectStyles);
           }
-          if (!(0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier')) {
+          if (!(0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier') && !(0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Literal')) {
             return;
           }
+          var propertyName = (0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier') ? node.key.name : String(node.key.value);
 
           // Returns which domains to lint against based on rule's config and current property
-          var domains = (0, _spacingUtils.getDomainsForProperty)(node.key.name, config.domains);
+          var domains = (0, _utils.getDomainsForProperty)(propertyName, config.domains);
           if (domains.length === 0 || (0, _isNode.isDecendantOfGlobalToken)(node.value)) {
             return;
           }
@@ -88,7 +89,7 @@ var createWithConfig = function createWithConfig(initialConfig) {
             /**
              * We do this in case the fontSize for a style object is declared alongside the `em` or `lineHeight` declaration
              */
-            var fontSize = (0, _spacingUtils.getFontSizeFromNode)(parentNode, context);
+            var fontSize = (0, _utils.getFontSizeFromNode)(parentNode, context);
             return (0, _spacing.lintObjectForSpacing)(node, context, config, fontSize, tokenNode);
           }
         }
@@ -102,12 +103,12 @@ var createWithConfig = function createWithConfig(initialConfig) {
         if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'TaggedTemplateExpression')) {
           return;
         }
-        var processedCssLines = (0, _spacingUtils.processCssNode)(node, context);
+        var processedCssLines = (0, _utils.processCssNode)(node, context);
         if (!processedCssLines) {
           // if we can't get a processed css we bail
           return;
         }
-        var globalFontSize = (0, _spacingUtils.getFontSizeValueInScope)(processedCssLines);
+        var globalFontSize = (0, _utils.getFontSizeValueInScope)(processedCssLines);
         var textForSource = context.getSourceCode().getText(node.quasi);
         var allReplacedValues = [];
         var completeSource = processedCssLines.reduce(function (currentSource, _ref) {
@@ -122,16 +123,16 @@ var createWithConfig = function createWithConfig(initialConfig) {
             _originalCssLine$spli2 = (0, _slicedToArray2.default)(_originalCssLine$spli, 2),
             _ = _originalCssLine$spli2[0],
             originalCssValues = _originalCssLine$spli2[1];
-          var propertyName = (0, _spacingUtils.convertHyphenatedNameToCamelCase)(originalProperty);
+          var propertyName = (0, _utils.convertHyphenatedNameToCamelCase)(originalProperty);
           var isFontFamily = /fontFamily/.test(propertyName);
           var replacedValuesPerProperty = [originalProperty];
-          var domains = (0, _spacingUtils.getDomainsForProperty)(propertyName, config.domains);
+          var domains = (0, _utils.getDomainsForProperty)(propertyName, config.domains);
           if (domains.length === 0 || !resolvedCssValues) {
             // in both of these cases no changes should be made to the current property
             return currentSource;
           }
           if (domains.includes('color')) {
-            if ((0, _spacingUtils.includesTokenString)(resolvedCssValues.trim())) {
+            if ((0, _utils.includesTokenString)(resolvedCssValues.trim())) {
               return currentSource;
             }
             if ((0, _isColor.includesHardCodedColor)(resolvedCssValues)) {
@@ -143,16 +144,16 @@ var createWithConfig = function createWithConfig(initialConfig) {
             }
           }
           if (domains.includes('spacing') || domains.includes('typography') || domains.includes('shape')) {
-            if (!(0, _spacingUtils.isValidSpacingValue)(resolvedCssValues, globalFontSize)) {
+            if (!(0, _utils.isValidSpacingValue)(resolvedCssValues, globalFontSize)) {
               // no changes should be made to the current property
               return currentSource;
             }
 
             // gets the values from the associated property, numeric values or NaN
-            var processedNumericValues = (0, _spacingUtils.getValueFromShorthand)(resolvedCssValues);
-            var processedValues = (0, _spacingUtils.splitShorthandValues)(resolvedCssValues);
+            var processedNumericValues = (0, _utils.getValueFromShorthand)(resolvedCssValues);
+            var processedValues = (0, _utils.splitShorthandValues)(resolvedCssValues);
             // only splits shorthand values but it does not transform NaNs so tokens are preserved
-            var originalValues = (0, _spacingUtils.splitShorthandValues)(originalCssValues);
+            var originalValues = (0, _utils.splitShorthandValues)(originalCssValues);
 
             // reconstructing the string
             // should replace what it can and preserve the raw value for everything else
@@ -162,7 +163,7 @@ var createWithConfig = function createWithConfig(initialConfig) {
             .map(function (value, index) {
               return [
               // if emToPX conversion fails we'll default to original value
-              (0, _spacingUtils.emToPixels)(value, globalFontSize) || value, processedValues[index], originalValues[index]];
+              (0, _utils.emToPixels)(value, globalFontSize) || value, processedValues[index], originalValues[index]];
             }).map(function (_ref3) {
               var _ref4 = (0, _slicedToArray2.default)(_ref3, 3),
                 numericOrNanValue = _ref4[0],
@@ -171,13 +172,13 @@ var createWithConfig = function createWithConfig(initialConfig) {
               if (!originalValue) {
                 return originalValue;
               }
-              if ((0, _spacingUtils.isTokenValueString)(originalValue)) {
+              if ((0, _utils.isTokenValueString)(originalValue)) {
                 // if the value is already valid, nothing to report or replace
                 return originalValue;
               }
 
               // do not replace 0 or auto with tokens
-              if ((0, _spacingUtils.isZero)(pxValue) || (0, _spacingUtils.isAuto)(pxValue)) {
+              if ((0, _utils.isZero)(pxValue) || (0, _utils.isAuto)(pxValue)) {
                 return originalValue;
               }
               if (isNaN(numericOrNanValue) && !isFontFamily) {
@@ -195,7 +196,7 @@ var createWithConfig = function createWithConfig(initialConfig) {
               });
 
               // from here on we know value is numeric or a font family, so it might or might not have a token equivalent
-              var replacementNode = (0, _spacingUtils.getTokenReplacement)(propertyName, numericOrNanValue);
+              var replacementNode = (0, _utils.getTokenReplacement)(propertyName, numericOrNanValue);
               if (!replacementNode) {
                 return originalValue;
               }
@@ -225,7 +226,7 @@ var createWithConfig = function createWithConfig(initialConfig) {
             node: node,
             messageId: 'autofixesPossible',
             fix: function fix(fixer) {
-              return (!tokenNode && config.applyImport ? [(0, _spacingUtils.insertTokensImport)(fixer)] : []).concat([fixer.replaceText(node.quasi, completeSource)]);
+              return (!tokenNode && config.applyImport ? [(0, _utils.insertTokensImport)(fixer)] : []).concat([fixer.replaceText(node.quasi, completeSource)]);
             }
           });
         }

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

@@ -8,11 +8,11 @@ exports.lintObjectForSpacing = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
-var _spacingUtils = require("./spacing-utils");
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _utils = require("./utils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var lintObjectForSpacing = function lintObjectForSpacing(node, context, ruleConfig, fontSize, tokenNode) {
-  if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'Literal') && !(0, _spacingUtils.isValidSpacingValue)(node.value.value, fontSize)) {
+  if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'Literal') && !(0, _utils.isValidSpacingValue)(node.value.value, fontSize)) {
     context.report({
       node: node,
       messageId: 'noRawSpacingValues',
@@ -24,12 +24,12 @@ var lintObjectForSpacing = function lintObjectForSpacing(node, context, ruleConf
   }
 
   // Don't report on CSS calc function
-  if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'Literal') && (0, _spacingUtils.isCalc)(node.value.value)) {
+  if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'Literal') && (0, _utils.isCalc)(node.value.value)) {
     return;
   }
   var propertyName = node.key.name;
   var isFontFamily = /fontFamily/.test(propertyName);
-  var value = (0, _spacingUtils.getValue)(node.value, context);
+  var value = (0, _utils.getValue)(node.value, context);
 
   // Value is a token string (e.g. set via a variable)
   if (typeof value === 'string' && /\${token\(.*\)}/.test(value)) {
@@ -37,7 +37,7 @@ var lintObjectForSpacing = function lintObjectForSpacing(node, context, ruleConf
   }
 
   // value is either NaN or it can't be resolved (e.g. em, 100% etc...)
-  if (!(value && (0, _spacingUtils.isValidSpacingValue)(value, fontSize))) {
+  if (!(value && (0, _utils.isValidSpacingValue)(value, fontSize))) {
     return context.report({
       node: node,
       messageId: 'noRawSpacingValues',
@@ -57,10 +57,10 @@ var lintObjectForSpacing = function lintObjectForSpacing(node, context, ruleConf
       _value = _valuesForProperty[0];
 
     // Do not report or suggest a token to replace 0 or auto
-    if ((0, _spacingUtils.isZero)(_value) || (0, _spacingUtils.isAuto)(_value)) {
+    if ((0, _utils.isZero)(_value) || (0, _utils.isAuto)(_value)) {
       return;
     }
-    var pixelValue = isFontFamily ? _value : (0, _spacingUtils.emToPixels)(_value, fontSize);
+    var pixelValue = isFontFamily ? _value : (0, _utils.emToPixels)(_value, fontSize);
     return context.report({
       node: node,
       messageId: 'noRawSpacingValues',
@@ -68,11 +68,11 @@ var lintObjectForSpacing = function lintObjectForSpacing(node, context, ruleConf
         payload: "".concat(propertyName, ":").concat(pixelValue)
       },
       fix: function fix(fixer) {
-        var replacementNode = (0, _spacingUtils.getTokenReplacement)(propertyName, pixelValue);
+        var replacementNode = (0, _utils.getTokenReplacement)(propertyName, pixelValue);
         if (!replacementNode) {
           return null;
         }
-        return (!tokenNode && ruleConfig.applyImport ? [(0, _spacingUtils.insertTokensImport)(fixer)] : []).concat([fixer.replaceText(node, (0, _eslintCodemodUtils.property)(_objectSpread(_objectSpread({}, node), {}, {
+        return (!tokenNode && ruleConfig.applyImport ? [(0, _utils.insertTokensImport)(fixer)] : []).concat([fixer.replaceText(node, (0, _eslintCodemodUtils.property)(_objectSpread(_objectSpread({}, node), {}, {
           value: replacementNode
         })).toString())]);
       }
@@ -87,10 +87,10 @@ var lintObjectForSpacing = function lintObjectForSpacing(node, context, ruleConf
    * { padding: '8px 0px' }
    */
   valuesForProperty.forEach(function (val) {
-    var pixelValue = (0, _spacingUtils.emToPixels)(val, fontSize);
+    var pixelValue = (0, _utils.emToPixels)(val, fontSize);
 
     // Do not report or suggest a token to replace 0 or auto
-    if ((0, _spacingUtils.isZero)(val) || (0, _spacingUtils.isAuto)(val)) {
+    if ((0, _utils.isZero)(val) || (0, _utils.isAuto)(val)) {
       return;
     }
     context.report({
@@ -101,13 +101,13 @@ var lintObjectForSpacing = function lintObjectForSpacing(node, context, ruleConf
       },
       fix: function fix(fixer) {
         var allResolvableValues = valuesForProperty.every(function (value) {
-          return !Number.isNaN((0, _spacingUtils.emToPixels)(value, fontSize));
+          return !Number.isNaN((0, _utils.emToPixels)(value, fontSize));
         });
         if (!allResolvableValues) {
           return null;
         }
         var valuesWithTokenReplacement = valuesForProperty.filter(function (value) {
-          return (0, _spacingUtils.findTokenNameByPropertyValue)(propertyName, value);
+          return (0, _utils.findTokenNameByPropertyValue)(propertyName, value);
         }).filter(function (value) {
           return value !== 0;
         });
@@ -116,7 +116,7 @@ var lintObjectForSpacing = function lintObjectForSpacing(node, context, ruleConf
           // if none of the values have token replacement we bail
           return null;
         }
-        var originalCssString = (0, _spacingUtils.getRawExpression)(node.value, context);
+        var originalCssString = (0, _utils.getRawExpression)(node.value, context);
         if (!originalCssString) {
           return null;
         }
@@ -126,20 +126,20 @@ var lintObjectForSpacing = function lintObjectForSpacing(node, context, ruleConf
          * we'll need to remove all quote chars since `getRawExpression` will return those as part of the string
          * given they're part of the substring of the current node
          */
-        var originalValues = (0, _spacingUtils.splitShorthandValues)(originalCssString.replace(/`|'|"/g, ''));
+        var originalValues = (0, _utils.splitShorthandValues)(originalCssString.replace(/`|'|"/g, ''));
         if (originalValues.length !== valuesForProperty.length) {
           // we bail just in case original values don't correspond to the replaced values
           return null;
         }
-        return (!tokenNode && ruleConfig.applyImport ? [(0, _spacingUtils.insertTokensImport)(fixer)] : []).concat([fixer.replaceText(node.value, "`".concat(valuesForProperty.map(function (value, index) {
-          if ((0, _spacingUtils.isZero)(value)) {
+        return (!tokenNode && ruleConfig.applyImport ? [(0, _utils.insertTokensImport)(fixer)] : []).concat([fixer.replaceText(node.value, "`".concat(valuesForProperty.map(function (value, index) {
+          if ((0, _utils.isZero)(value)) {
             return originalValues[index];
           }
-          var pixelValue = (0, _spacingUtils.emToPixels)(value, fontSize);
+          var pixelValue = (0, _utils.emToPixels)(value, fontSize);
           var pixelValueString = "".concat(pixelValue, "px");
           // if there is a token we take it, otherwise we go with the original value
 
-          return (0, _spacingUtils.findTokenNameByPropertyValue)(propertyName, value) ? "${".concat((0, _spacingUtils.getTokenNodeForValue)(propertyName, pixelValueString), "}") : originalValues[index];
+          return (0, _utils.findTokenNameByPropertyValue)(propertyName, value) ? "${".concat((0, _utils.getTokenNodeForValue)(propertyName, pixelValueString), "}") : originalValues[index];
         }).join(' '), "`"))]);
       }
     });

package/dist/cjs/rules/ensure-design-token-usage/{spacing-utils.js → utils.js}

@@ -351,7 +351,7 @@ var findParentNodeForLine = function findParentNodeForLine(node) {
 exports.findParentNodeForLine = findParentNodeForLine;
 function getDomainsForProperty(propertyName, targetOptions) {
   var domains = [];
-  if ((0, _isColor.isColorCssPropertyName)(propertyName) && targetOptions.includes('color')) {
+  if (((0, _isColor.isColorCssPropertyName)(propertyName) || (0, _isColor.isCurrentSurfaceCustomPropertyName)(propertyName)) && targetOptions.includes('color')) {
     domains.push('color');
   }
   if (isSpacingProperty(propertyName) && targetOptions.includes('spacing')) {

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

@@ -9,8 +9,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _ensureDesignTokenUsage = require("../ensure-design-token-usage");
 var _ruleMeta = _interopRequireDefault(require("../ensure-design-token-usage/rule-meta"));
 var _createRule = require("../utils/create-rule");
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var defaultConfig = {
   domains: ['spacing'],
   applyImport: true,

package/dist/cjs/rules/prefer-primitives/index.js

@@ -53,7 +53,7 @@ var rule = (0, _createRule.createLintRule)({
 
         // styled.div``
         if ((0, _eslintCodemodUtils.isNodeOfType)(node.property, 'Identifier')) {
-          if (_utils.validPrimitiveElements.test(node.property.name)) {
+          if (_utils.validPrimitiveElements.has(node.property.name)) {
             var styledIdentifier = node.object.name;
             var elementName = node.property.name;
 
@@ -80,7 +80,7 @@ var rule = (0, _createRule.createLintRule)({
         if ((0, _eslintCodemodUtils.isNodeOfType)(node.arguments[0], 'Literal')) {
           var argValue = node.arguments[0].raw;
           if (typeof argValue === 'string') {
-            var suggest = _utils.validPrimitiveElements.test(argValue.replaceAll("'", '') // argValue will have '' around the element name, strip it out for this test
+            var suggest = _utils.validPrimitiveElements.has(argValue.replaceAll("'", '') // argValue will have '' around the element name, strip it out for this test
             );
 
             if (suggest) {

package/dist/cjs/rules/use-primitives/utils.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.validPrimitiveElements = exports.shouldSuggestText = exports.shouldSuggestStack = exports.shouldSuggestInline = exports.shouldSuggestBox = exports.primitiveFixer = exports.isWhiteSpace = exports.isValidPrimitiveElement = exports.getChildrenByType = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var shouldSuggestBox = function shouldSuggestBox(node
 // scope: Scope.Scope,
 ) {
@@ -322,11 +322,10 @@ var getCSSPropStyleObject = function getCSSPropStyleObject(node, context) {
   }
   return styleObj;
 };
-var validPrimitiveElements = /^div|span|article|aside|dialog|footer|header|li|main|nav|ol|section|ul$/;
+var validPrimitiveElements = new Set(['div', 'span', 'article', 'aside', 'dialog', 'footer', 'header', 'li', 'main', 'nav', 'ol', 'section', 'ul']);
 exports.validPrimitiveElements = validPrimitiveElements;
 var isValidPrimitiveElement = function isValidPrimitiveElement(node) {
-  // For now we are only targeting div and span elements
-  return validPrimitiveElements.test(node.openingElement.name.name);
+  return validPrimitiveElements.has(node.openingElement.name.name.toLowerCase());
 };
 exports.isValidPrimitiveElement = isValidPrimitiveElement;
 var hasInlineCompatibleStyles = function hasInlineCompatibleStyles(cssStyleObject) {

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

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isLegacyNamedColor = exports.isLegacyColor = exports.isHardCodedColor = exports.isColorCssPropertyName = exports.includesHardCodedColor = void 0;
+exports.isLegacyNamedColor = exports.isLegacyColor = exports.isHardCodedColor = exports.isCurrentSurfaceCustomPropertyName = exports.isColorCssPropertyName = exports.includesHardCodedColor = void 0;
+var _tokens = require("@atlaskit/tokens");
 var namedColors = new Set(['black', 'silver', 'gray', 'white', 'maroon', 'red', 'purple', 'fuchsia', 'green', 'lime', 'olive', 'yellow', 'navy', 'blue', 'teal', 'aqua', 'orange', 'aliceblue', 'antiquewhite', 'aquamarine', 'azure', 'beige', 'bisque', 'blanchedalmond', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'limegreen', 'linen', 'magenta', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'oldlace', 'olivedrab', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue', 'tan', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'whitesmoke', 'yellowgreen', 'rebeccapurple']);
 var legacyColors = new Set(['R50', 'R75', 'R100', 'R200', 'R300', 'R400', 'R500', 'Y50', 'Y75', 'Y100', 'Y200', 'Y300', 'Y400', 'Y500', 'G50', 'G75', 'G100', 'G200', 'G300', 'G400', 'G500', 'B50', 'B75', 'B100', 'B200', 'B300', 'B400', 'B500', 'P50', 'P75', 'P100', 'P200', 'P300', 'P400', 'P500', 'T50', 'T75', 'T100', 'T200', 'T300', 'T400', 'T500', 'N0', 'N10', 'N20', 'N30', 'N40', 'N50', 'N60', 'N70', 'N80', 'N90', 'N100', 'N200', 'N300', 'N400', 'N500', 'N600', 'N700', 'N800', 'N900', 'N10A', 'N20A', 'N30A', 'N40A', 'N50A', 'N60A', 'N70A', 'N80A', 'N90A', 'N100A', 'N200A', 'N300A', 'N400A', 'N500A', 'N600A', 'N700A', 'N800A', 'DN900', 'DN800', 'DN700', 'DN600', 'DN500', 'DN400', 'DN300', 'DN200', 'DN100', 'DN90', 'DN80', 'DN70', 'DN60', 'DN50', 'DN40', 'DN30', 'DN20', 'DN10', 'DN0', 'DN800A', 'DN700A', 'DN600A', 'DN500A', 'DN400A', 'DN300A', 'DN200A', 'DN100A', 'DN90A', 'DN80A', 'DN70A', 'DN60A', 'DN50A', 'DN40A', 'DN30A', 'DN20A', 'DN10A',
 // Legacy Trello colors:
@@ -58,4 +59,8 @@ var kebabize = function kebabize(str) {
 var isColorCssPropertyName = function isColorCssPropertyName(value) {
   return validColorPropertyNames.has(kebabize(value));
 };
-exports.isColorCssPropertyName = isColorCssPropertyName;
+exports.isColorCssPropertyName = isColorCssPropertyName;
+var isCurrentSurfaceCustomPropertyName = function isCurrentSurfaceCustomPropertyName(value) {
+  return value === 'CURRENT_SURFACE_CSS_VAR' || value === _tokens.CURRENT_SURFACE_CSS_VAR;
+};
+exports.isCurrentSurfaceCustomPropertyName = isCurrentSurfaceCustomPropertyName;

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

@@ -5,7 +5,7 @@ import { isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfType }
 import { lintJSXIdentifierForColor, lintJSXLiteralForColor, lintJSXMemberForColor, lintObjectForColor, lintTemplateIdentifierForColor } from './color';
 import ruleMeta from './rule-meta';
 import { lintObjectForSpacing } from './spacing';
-import { convertHyphenatedNameToCamelCase, emToPixels, getDomainsForProperty, getFontSizeFromNode, getFontSizeValueInScope, getTokenReplacement, getValueFromShorthand, includesTokenString, insertTokensImport, isAuto, isTokenValueString, isValidSpacingValue, isZero, processCssNode, splitShorthandValues } from './spacing-utils';
+import { convertHyphenatedNameToCamelCase, emToPixels, getDomainsForProperty, getFontSizeFromNode, getFontSizeValueInScope, getTokenReplacement, getValueFromShorthand, includesTokenString, insertTokensImport, isAuto, isTokenValueString, isValidSpacingValue, isZero, processCssNode, splitShorthandValues } from './utils';
 const defaultConfig = {
   domains: ['color', 'spacing'],
   applyImport: true,
@@ -52,12 +52,13 @@ const createWithConfig = initialConfig => context => {
         if (isNodeOfType(node.value, 'ObjectExpression')) {
           return node.value.properties.forEach(findObjectStyles);
         }
-        if (!isNodeOfType(node.key, 'Identifier')) {
+        if (!isNodeOfType(node.key, 'Identifier') && !isNodeOfType(node.key, 'Literal')) {
           return;
         }
+        const propertyName = isNodeOfType(node.key, 'Identifier') ? node.key.name : String(node.key.value);
 
         // Returns which domains to lint against based on rule's config and current property
-        const domains = getDomainsForProperty(node.key.name, config.domains);
+        const domains = getDomainsForProperty(propertyName, config.domains);
         if (domains.length === 0 || isDecendantOfGlobalToken(node.value)) {
           return;
         }

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

@@ -1,5 +1,5 @@
 import { isNodeOfType, property } from 'eslint-codemod-utils';
-import { emToPixels, findTokenNameByPropertyValue, getRawExpression, getTokenNodeForValue, getTokenReplacement, getValue, insertTokensImport, isAuto, isCalc, isValidSpacingValue, isZero, splitShorthandValues } from './spacing-utils';
+import { emToPixels, findTokenNameByPropertyValue, getRawExpression, getTokenNodeForValue, getTokenReplacement, getValue, insertTokensImport, isAuto, isCalc, isValidSpacingValue, isZero, splitShorthandValues } from './utils';
 export const lintObjectForSpacing = (node, context, ruleConfig, fontSize, tokenNode) => {
   if (isNodeOfType(node.value, 'Literal') && !isValidSpacingValue(node.value.value, fontSize)) {
     context.report({

package/dist/es2019/rules/ensure-design-token-usage/{spacing-utils.js → utils.js}

@@ -1,7 +1,7 @@
 import { callExpression, identifier, insertAtStartOfFile, insertImportDeclaration, isNodeOfType, literal } from 'eslint-codemod-utils';
 import { spacing as spacingScale } from '@atlaskit/tokens/tokens-raw';
 import { findIdentifierInParentScope } from '../utils/find-in-parent';
-import { isColorCssPropertyName } from '../utils/is-color';
+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'];
@@ -303,7 +303,7 @@ export const findParentNodeForLine = node => {
  */
 export function getDomainsForProperty(propertyName, targetOptions) {
   const domains = [];
-  if (isColorCssPropertyName(propertyName) && targetOptions.includes('color')) {
+  if ((isColorCssPropertyName(propertyName) || isCurrentSurfaceCustomPropertyName(propertyName)) && targetOptions.includes('color')) {
     domains.push('color');
   }
   if (isSpacingProperty(propertyName) && targetOptions.includes('spacing')) {

package/dist/es2019/rules/prefer-primitives/index.js

@@ -48,7 +48,7 @@ const rule = createLintRule({
 
         // styled.div``
         if (isNodeOfType(node.property, 'Identifier')) {
-          if (validPrimitiveElements.test(node.property.name)) {
+          if (validPrimitiveElements.has(node.property.name)) {
             const styledIdentifier = node.object.name;
             const elementName = node.property.name;
 
@@ -75,7 +75,7 @@ const rule = createLintRule({
         if (isNodeOfType(node.arguments[0], 'Literal')) {
           const argValue = node.arguments[0].raw;
           if (typeof argValue === 'string') {
-            const suggest = validPrimitiveElements.test(argValue.replaceAll(`'`, '') // argValue will have '' around the element name, strip it out for this test
+            const suggest = validPrimitiveElements.has(argValue.replaceAll(`'`, '') // argValue will have '' around the element name, strip it out for this test
             );
 
             if (suggest) {

package/dist/es2019/rules/use-primitives/utils.js

@@ -303,10 +303,9 @@ const getCSSPropStyleObject = (node, context) => {
   }
   return styleObj;
 };
-export const validPrimitiveElements = /^div|span|article|aside|dialog|footer|header|li|main|nav|ol|section|ul$/;
+export const validPrimitiveElements = new Set(['div', 'span', 'article', 'aside', 'dialog', 'footer', 'header', 'li', 'main', 'nav', 'ol', 'section', 'ul']);
 export const isValidPrimitiveElement = node => {
-  // For now we are only targeting div and span elements
-  return validPrimitiveElements.test(node.openingElement.name.name);
+  return validPrimitiveElements.has(node.openingElement.name.name.toLowerCase());
 };
 const hasInlineCompatibleStyles = cssStyleObject => {
   if (!['flex', 'inline-flex'].includes(cssStyleObject['display'])) {

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

@@ -1,3 +1,4 @@
+import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 const namedColors = new Set(['black', 'silver', 'gray', 'white', 'maroon', 'red', 'purple', 'fuchsia', 'green', 'lime', 'olive', 'yellow', 'navy', 'blue', 'teal', 'aqua', 'orange', 'aliceblue', 'antiquewhite', 'aquamarine', 'azure', 'beige', 'bisque', 'blanchedalmond', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'limegreen', 'linen', 'magenta', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'oldlace', 'olivedrab', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue', 'tan', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'whitesmoke', 'yellowgreen', 'rebeccapurple']);
 const legacyColors = new Set(['R50', 'R75', 'R100', 'R200', 'R300', 'R400', 'R500', 'Y50', 'Y75', 'Y100', 'Y200', 'Y300', 'Y400', 'Y500', 'G50', 'G75', 'G100', 'G200', 'G300', 'G400', 'G500', 'B50', 'B75', 'B100', 'B200', 'B300', 'B400', 'B500', 'P50', 'P75', 'P100', 'P200', 'P300', 'P400', 'P500', 'T50', 'T75', 'T100', 'T200', 'T300', 'T400', 'T500', 'N0', 'N10', 'N20', 'N30', 'N40', 'N50', 'N60', 'N70', 'N80', 'N90', 'N100', 'N200', 'N300', 'N400', 'N500', 'N600', 'N700', 'N800', 'N900', 'N10A', 'N20A', 'N30A', 'N40A', 'N50A', 'N60A', 'N70A', 'N80A', 'N90A', 'N100A', 'N200A', 'N300A', 'N400A', 'N500A', 'N600A', 'N700A', 'N800A', 'DN900', 'DN800', 'DN700', 'DN600', 'DN500', 'DN400', 'DN300', 'DN200', 'DN100', 'DN90', 'DN80', 'DN70', 'DN60', 'DN50', 'DN40', 'DN30', 'DN20', 'DN10', 'DN0', 'DN800A', 'DN700A', 'DN600A', 'DN500A', 'DN400A', 'DN300A', 'DN200A', 'DN100A', 'DN90A', 'DN80A', 'DN70A', 'DN60A', 'DN50A', 'DN40A', 'DN30A', 'DN20A', 'DN10A',
 // Legacy Trello colors:
@@ -35,4 +36,5 @@ export const isHardCodedColor = value => {
 };
 const validColorPropertyNames = new Set(['color', 'background', 'background-color', 'border', 'border-left', 'border-right', 'border-top', 'border-bottom', 'border-color', 'border-left-color', 'border-right-color', 'border-top-color', 'border-bottom-color', 'outline', 'outline-color', 'box-shadow']);
 const kebabize = str => str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
-export const isColorCssPropertyName = value => validColorPropertyNames.has(kebabize(value));
+export const isColorCssPropertyName = value => validColorPropertyNames.has(kebabize(value));
+export const isCurrentSurfaceCustomPropertyName = value => value === 'CURRENT_SURFACE_CSS_VAR' || value === CURRENT_SURFACE_CSS_VAR;

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

@@ -6,7 +6,7 @@ import { isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfType }
 import { lintJSXIdentifierForColor, lintJSXLiteralForColor, lintJSXMemberForColor, lintObjectForColor, lintTemplateIdentifierForColor } from './color';
 import ruleMeta from './rule-meta';
 import { lintObjectForSpacing } from './spacing';
-import { convertHyphenatedNameToCamelCase, emToPixels, getDomainsForProperty, getFontSizeFromNode, getFontSizeValueInScope, getTokenReplacement, getValueFromShorthand, includesTokenString, insertTokensImport, isAuto, isTokenValueString, isValidSpacingValue, isZero, processCssNode, splitShorthandValues } from './spacing-utils';
+import { convertHyphenatedNameToCamelCase, emToPixels, getDomainsForProperty, getFontSizeFromNode, getFontSizeValueInScope, getTokenReplacement, getValueFromShorthand, includesTokenString, insertTokensImport, isAuto, isTokenValueString, isValidSpacingValue, isZero, processCssNode, splitShorthandValues } from './utils';
 var defaultConfig = {
   domains: ['color', 'spacing'],
   applyImport: true,
@@ -62,12 +62,13 @@ var createWithConfig = function createWithConfig(initialConfig) {
           if (isNodeOfType(node.value, 'ObjectExpression')) {
             return node.value.properties.forEach(findObjectStyles);
           }
-          if (!isNodeOfType(node.key, 'Identifier')) {
+          if (!isNodeOfType(node.key, 'Identifier') && !isNodeOfType(node.key, 'Literal')) {
             return;
           }
+          var propertyName = isNodeOfType(node.key, 'Identifier') ? node.key.name : String(node.key.value);
 
           // Returns which domains to lint against based on rule's config and current property
-          var domains = getDomainsForProperty(node.key.name, config.domains);
+          var domains = getDomainsForProperty(propertyName, config.domains);
           if (domains.length === 0 || isDecendantOfGlobalToken(node.value)) {
             return;
           }

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

@@ -1,9 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { isNodeOfType, property } from 'eslint-codemod-utils';
-import { emToPixels, findTokenNameByPropertyValue, getRawExpression, getTokenNodeForValue, getTokenReplacement, getValue, insertTokensImport, isAuto, isCalc, isValidSpacingValue, isZero, splitShorthandValues } from './spacing-utils';
+import { emToPixels, findTokenNameByPropertyValue, getRawExpression, getTokenNodeForValue, getTokenReplacement, getValue, insertTokensImport, isAuto, isCalc, isValidSpacingValue, isZero, splitShorthandValues } from './utils';
 export var lintObjectForSpacing = function lintObjectForSpacing(node, context, ruleConfig, fontSize, tokenNode) {
   if (isNodeOfType(node.value, 'Literal') && !isValidSpacingValue(node.value.value, fontSize)) {
     context.report({

package/dist/esm/rules/ensure-design-token-usage/{spacing-utils.js → utils.js}

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { callExpression, identifier, insertAtStartOfFile, insertImportDeclaration, isNodeOfType, literal } from 'eslint-codemod-utils';
 import { spacing as spacingScale } from '@atlaskit/tokens/tokens-raw';
 import { findIdentifierInParentScope } from '../utils/find-in-parent';
-import { isColorCssPropertyName } from '../utils/is-color';
+import { isColorCssPropertyName, isCurrentSurfaceCustomPropertyName } from '../utils/is-color';
 import { borderWidthValueToToken, isBorderRadius, isBorderSizeProperty, isShapeProperty, radiusValueToToken } from './shape';
 import { isCodeFontFamily, isFontFamily, isFontSize, isFontSizeSmall, isTypographyProperty, typographyValueToToken } from './typography';
 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'];
@@ -312,7 +312,7 @@ export var findParentNodeForLine = function findParentNodeForLine(node) {
  */
 export function getDomainsForProperty(propertyName, targetOptions) {
   var domains = [];
-  if (isColorCssPropertyName(propertyName) && targetOptions.includes('color')) {
+  if ((isColorCssPropertyName(propertyName) || isCurrentSurfaceCustomPropertyName(propertyName)) && targetOptions.includes('color')) {
     domains.push('color');
   }
   if (isSpacingProperty(propertyName) && targetOptions.includes('spacing')) {

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { createWithConfig } from '../ensure-design-token-usage';
 import ruleMeta from '../ensure-design-token-usage/rule-meta';
 import { createLintRule } from '../utils/create-rule';

package/dist/esm/rules/prefer-primitives/index.js

@@ -47,7 +47,7 @@ var rule = createLintRule({
 
         // styled.div``
         if (isNodeOfType(node.property, 'Identifier')) {
-          if (validPrimitiveElements.test(node.property.name)) {
+          if (validPrimitiveElements.has(node.property.name)) {
             var styledIdentifier = node.object.name;
             var elementName = node.property.name;
 
@@ -74,7 +74,7 @@ var rule = createLintRule({
         if (isNodeOfType(node.arguments[0], 'Literal')) {
           var argValue = node.arguments[0].raw;
           if (typeof argValue === 'string') {
-            var suggest = validPrimitiveElements.test(argValue.replaceAll("'", '') // argValue will have '' around the element name, strip it out for this test
+            var suggest = validPrimitiveElements.has(argValue.replaceAll("'", '') // argValue will have '' around the element name, strip it out for this test
             );
 
             if (suggest) {

package/dist/esm/rules/use-primitives/utils.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { getIdentifierInParentScope, hasImportDeclaration, insertImportDeclaration, insertImportSpecifier, isNodeOfType, jsxAttribute, jsxIdentifier, jsxOpeningElement, literal } from 'eslint-codemod-utils';
 export var shouldSuggestBox = function shouldSuggestBox(node
 // scope: Scope.Scope,
@@ -309,10 +309,9 @@ var getCSSPropStyleObject = function getCSSPropStyleObject(node, context) {
   }
   return styleObj;
 };
-export var validPrimitiveElements = /^div|span|article|aside|dialog|footer|header|li|main|nav|ol|section|ul$/;
+export var validPrimitiveElements = new Set(['div', 'span', 'article', 'aside', 'dialog', 'footer', 'header', 'li', 'main', 'nav', 'ol', 'section', 'ul']);
 export var isValidPrimitiveElement = function isValidPrimitiveElement(node) {
-  // For now we are only targeting div and span elements
-  return validPrimitiveElements.test(node.openingElement.name.name);
+  return validPrimitiveElements.has(node.openingElement.name.name.toLowerCase());
 };
 var hasInlineCompatibleStyles = function hasInlineCompatibleStyles(cssStyleObject) {
   if (!['flex', 'inline-flex'].includes(cssStyleObject['display'])) {

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

@@ -1,3 +1,4 @@
+import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 var namedColors = new Set(['black', 'silver', 'gray', 'white', 'maroon', 'red', 'purple', 'fuchsia', 'green', 'lime', 'olive', 'yellow', 'navy', 'blue', 'teal', 'aqua', 'orange', 'aliceblue', 'antiquewhite', 'aquamarine', 'azure', 'beige', 'bisque', 'blanchedalmond', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'limegreen', 'linen', 'magenta', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'oldlace', 'olivedrab', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue', 'tan', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'whitesmoke', 'yellowgreen', 'rebeccapurple']);
 var legacyColors = new Set(['R50', 'R75', 'R100', 'R200', 'R300', 'R400', 'R500', 'Y50', 'Y75', 'Y100', 'Y200', 'Y300', 'Y400', 'Y500', 'G50', 'G75', 'G100', 'G200', 'G300', 'G400', 'G500', 'B50', 'B75', 'B100', 'B200', 'B300', 'B400', 'B500', 'P50', 'P75', 'P100', 'P200', 'P300', 'P400', 'P500', 'T50', 'T75', 'T100', 'T200', 'T300', 'T400', 'T500', 'N0', 'N10', 'N20', 'N30', 'N40', 'N50', 'N60', 'N70', 'N80', 'N90', 'N100', 'N200', 'N300', 'N400', 'N500', 'N600', 'N700', 'N800', 'N900', 'N10A', 'N20A', 'N30A', 'N40A', 'N50A', 'N60A', 'N70A', 'N80A', 'N90A', 'N100A', 'N200A', 'N300A', 'N400A', 'N500A', 'N600A', 'N700A', 'N800A', 'DN900', 'DN800', 'DN700', 'DN600', 'DN500', 'DN400', 'DN300', 'DN200', 'DN100', 'DN90', 'DN80', 'DN70', 'DN60', 'DN50', 'DN40', 'DN30', 'DN20', 'DN10', 'DN0', 'DN800A', 'DN700A', 'DN600A', 'DN500A', 'DN400A', 'DN300A', 'DN200A', 'DN100A', 'DN90A', 'DN80A', 'DN70A', 'DN60A', 'DN50A', 'DN40A', 'DN30A', 'DN20A', 'DN10A',
 // Legacy Trello colors:
@@ -47,4 +48,7 @@ var kebabize = function kebabize(str) {
 };
 export var isColorCssPropertyName = function isColorCssPropertyName(value) {
   return validColorPropertyNames.has(kebabize(value));
+};
+export var isCurrentSurfaceCustomPropertyName = function isCurrentSurfaceCustomPropertyName(value) {
+  return value === 'CURRENT_SURFACE_CSS_VAR' || value === CURRENT_SURFACE_CSS_VAR;
 };

package/dist/types/rules/use-primitives/utils.d.ts

@@ -8,6 +8,6 @@ export declare const primitiveFixer: (node: EslintNode, nodeName: string, contex
 export declare const isWhiteSpace: (value: string) => boolean;
 type JSXChild = 'JSXElement' | 'JSXExpressionContainer' | 'JSXFragment' | 'JSXText' | 'JSXSpreadChild'[];
 export declare const getChildrenByType: (node: JSXElement, types: JSXChild[]) => (JSXElement | JSXExpressionContainer | import("estree-jsx").JSXFragment | JSXText | import("estree-jsx").JSXSpreadChild)[];
-export declare const validPrimitiveElements: RegExp;
+export declare const validPrimitiveElements: Set<string>;
 export declare const isValidPrimitiveElement: (node: JSXElement) => boolean;
 export {};

package/dist/types/rules/utils/is-color.d.ts

@@ -3,3 +3,4 @@ export declare const isLegacyNamedColor: (value: string) => boolean;
 export declare const includesHardCodedColor: (raw: string) => boolean;
 export declare const isHardCodedColor: (value: string) => boolean;
 export declare const isColorCssPropertyName: (value: string) => boolean;
+export declare const isCurrentSurfaceCustomPropertyName: (value: string) => boolean;

package/dist/types-ts4.5/rules/use-primitives/utils.d.ts

@@ -8,6 +8,6 @@ export declare const primitiveFixer: (node: EslintNode, nodeName: string, contex
 export declare const isWhiteSpace: (value: string) => boolean;
 type JSXChild = 'JSXElement' | 'JSXExpressionContainer' | 'JSXFragment' | 'JSXText' | 'JSXSpreadChild'[];
 export declare const getChildrenByType: (node: JSXElement, types: JSXChild[]) => (JSXElement | JSXExpressionContainer | import("estree-jsx").JSXFragment | JSXText | import("estree-jsx").JSXSpreadChild)[];
-export declare const validPrimitiveElements: RegExp;
+export declare const validPrimitiveElements: Set<string>;
 export declare const isValidPrimitiveElement: (node: JSXElement) => boolean;
 export {};

package/dist/types-ts4.5/rules/utils/is-color.d.ts

@@ -3,3 +3,4 @@ export declare const isLegacyNamedColor: (value: string) => boolean;
 export declare const includesHardCodedColor: (raw: string) => boolean;
 export declare const isHardCodedColor: (value: string) => boolean;
 export declare const isColorCssPropertyName: (value: string) => boolean;
+export declare const isCurrentSurfaceCustomPropertyName: (value: string) => boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
   "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "8.4.2",
+  "version": "8.4.4",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"