feat: Update CustomProperties component to use JSON tokens

loom.config.ts

@@ -14,6 +14,7 @@ import {stylelint} from '@shopify/loom-plugin-stylelint';
 import {prettier} from '@shopify/loom-plugin-prettier';
 import replace from '@rollup/plugin-replace';
 import image from '@rollup/plugin-image';
+import json from '@rollup/plugin-json';
 
 import packageJSON from './package.json';
 import {styles} from './config/rollup/plugin-styles';
@@ -140,6 +141,9 @@ function rollupAdjustPluginsPlugin() {
         delimiters: ['', ''],
       }),
       image(),
+      json({
+        compact: true,
+      }),
       styles(stylesConfig),
     ];
   });

package.json

@@ -66,7 +66,7 @@
     "version": "yarn run readme-update-version",
     "storybook": "start-storybook -p 6006 --quiet",
     "storybook:build": "build-storybook -o build-internal/storybook/static",
-    "validate-tokens": "ajv validate -s tokens/schemas/token-group.json -d 'tokens/*.json'"
+    "validate-tokens": "ajv validate -s src/tokens/schemas/token-group.json -d 'src/tokens/token-groups/*.json'"
   },
   "dependencies": {
     "@shopify/polaris-icons": "^4.10.0",
@@ -86,6 +86,7 @@
     "@babel/core": "^7.15.0",
     "@babel/node": "^7.14.9",
     "@rollup/plugin-image": "^2.0.5",
+    "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-replace": "^2.3.3",
     "@rollup/pluginutils": "^3.1.0",
     "@shopify/babel-preset": "^24.1.2",

src/components/IndexTable/README.md

@@ -156,7 +156,7 @@ function SimpleSmallScreenIndexTableExample() {
         selected={selectedResources.includes(id)}
         position={index}
       >
-        <div style={{padding: '1.2rem 1.6rem'}}>
+        <div style={{padding: '12px 16px'}}>
           <p>
             <TextStyle variation="strong">{name}</TextStyle>
           </p>