feat: Update the custom Stylelint plugin to use JSON tokens (#4828)

Author: aaronccasanova

.stylelintrc.js

@@ -1,6 +1,25 @@
+const fs = require('fs');
 const path = require('path');
 
-const {tokenList} = require('./build/cjs/token-list');
+const tokenGroupsDir = path.join(__dirname, './src/tokens/token-groups');
+
+/**
+ * Allowed Polaris token custom properties.
+ *
+ * Result: ['--p-background', '--p-text', etc...]
+ */
+const polarisTokenCustomProperties = Array.from(
+  new Set(
+    fs
+      .readdirSync(tokenGroupsDir)
+      .map((file) => {
+        const tokenGroup = require(path.join(tokenGroupsDir, file));
+
+        return Object.keys(tokenGroup).map((token) => `--p-${token}`);
+      })
+      .flat(),
+  ),
+);
 
 /**
  * Allowed custom property names in Polaris component styles.
@@ -19,7 +38,10 @@ module.exports = {
         polarisComponentCustomProperties,
       ],
       allowedValues: {
-        '/.+/': [polarisComponentCustomProperties, ...tokenList],
+        '/.+/': [
+          polarisComponentCustomProperties,
+          ...polarisTokenCustomProperties,
+        ],
       },
     },
   },

loom.config.ts

@@ -27,7 +27,6 @@ import type {} from '@shopify/loom-plugin-jest';
 // eslint-disable-next-line import/no-default-export
 export default createPackage((pkg) => {
   pkg.entry({root: './src/index.ts'});
-  pkg.entry({name: 'token-list', root: './src/token-list.ts'});
   pkg.use(
     buildLibrary({
       rootEntrypoints: false,

src/components/Frame/README.md

@@ -693,7 +693,7 @@ function FrameExample() {
       >
         <Frame
           logo={logo}
-          offset="6rem"
+          offset="60px"
           globalRibbon={
             <div style={{background: '#C0FFEE', padding: '30px'}}>
               Global ribbon