Use gen-colors script to get color palette

polaris-tokens/package.json

@@ -14,10 +14,6 @@
       "import": "./dist/esm/build/index.mjs",
       "require": "./dist/cjs/build/index.js"
     },
-    "./colors": {
-      "import": "./dist/esm/src/colors.mjs",
-      "require": "./dist/cjs/src/colors.js"
-    },
     "./css/*": "./dist/css/*",
     "./scss/*": "./dist/scss/*"
   },

polaris.shopify.com/package.json

@@ -6,7 +6,7 @@
     "node": "^16.17.0 || >=18.12.0"
   },
   "scripts": {
-    "build": "yarn gen-assets && playroom build && next build && cp -r public ./.next/standalone/polaris.shopify.com/ && mkdirp ./.next/standalone/polaris.shopify.com/.next && cp -r .next/static ./.next/standalone/polaris.shopify.com/.next/",
+    "build": "yarn gen-assets && yarn gen-colors && playroom build && next build && cp -r public ./.next/standalone/polaris.shopify.com/ && mkdirp ./.next/standalone/polaris.shopify.com/.next && cp -r .next/static ./.next/standalone/polaris.shopify.com/.next/",
     "start": "cd ./.next/standalone/polaris.shopify.com && node ./server.js",
     "dev": "yarn get-props && run-p dev:*",
     "dev:server": "open http://localhost:3000 && next dev",
@@ -20,7 +20,8 @@
     "create-component": "generact --root src/components src/components/Template/Template.tsx",
     "gen-sitemap": "yarn next-sitemap",
     "get-props": "./scripts/get-props/src/get-props.ts",
-    "gen-assets": "yarn get-props && node scripts/gen-assets.mjs"
+    "gen-assets": "yarn get-props && node scripts/gen-assets.mjs",
+    "gen-colors": "ts-node ./scripts/gen-colors.ts"
   },
   "dependencies": {
     "@floating-ui/react-dom-interactions": "^0.10.1",

polaris.shopify.com/scripts/gen-colors.ts

@@ -0,0 +1,9 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+
+import * as colors from '../../polaris-tokens/src/colors';
+
+const cacheDir = path.join(process.cwd(), '.cache');
+const colorJsonFile = path.join(cacheDir, 'colors.json');
+
+fs.writeFileSync(colorJsonFile, JSON.stringify(colors, null, 2));

polaris.shopify.com/src/components/Markdown/Markdown.module.scss

@@ -3,7 +3,7 @@
 @import '../../styles/variables.scss';
 
 .Image {
-  border-radius: var(--border-radius-200);
+  border-radius: var(--p-border-radius-200);
   width: 100%;
   height: auto;
 }

polaris.shopify.com/src/components/Markdown/components/Colors/Colors.module.scss

@@ -31,18 +31,18 @@
       background: url(/images/icon-do.svg) black no-repeat;
       background-position: center;
       display: block;
-      width: var(--p-space-5);
-      height: var(--p-space-5);
-      top: var(--p-space-5);
-      border-radius: var(--p-border-radius-2);
+      width: var(--p-space-500);
+      height: var(--p-space-500);
+      top: var(--p-space-500);
+      border-radius: var(--p-border-radius-200);
     }
   }
 }
 
 .ColorsContainer {
-  border-radius: var(--p-border-radius-2);
+  border-radius: var(--p-border-radius-200);
   overflow: hidden;
-  margin-bottom: var(--p-space-2);
+  margin-bottom: var(--p-space-200);
 }
 
 .ColorsContrastContainer {
@@ -57,14 +57,14 @@
 
   .ColorBox {
     display: flex;
-    gap: var(--p-space-2);
-    margin-top: var(--p-space-2);
+    gap: var(--p-space-200);
+    margin-top: var(--p-space-200);
     align-items: center;
 
     div {
-      height: var(--p-space-8);
-      width: var(--p-space-8);
-      border-radius: var(--p-border-radius-2);
+      height: var(--p-space-800);
+      width: var(--p-space-800);
+      border-radius: var(--p-border-radius-200);
       border: 1px solid rgba(0, 0, 0, 0.2);
       display: inline-block;
     }
@@ -79,8 +79,8 @@
 .ColorsWCAG {
   display: inline-block;
   background-color: var(--surface);
-  padding: var(--p-space-05) var(--p-space-2) var(--p-space-05) var(--p-space-5);
-  border-radius: var(--p-space-2);
+  padding: var(--p-space-050) var(--p-space-200) var(--p-space-050) var(--p-space-500);
+  border-radius: var(--p-space-200);
   font-size: var(--font-size-100);
   font-weight: var(--font-weight-600);
   line-height: 1rem;

polaris.shopify.com/src/components/Markdown/components/Colors/index.tsx

@@ -4,8 +4,7 @@ import {capitalize} from '../../../../utils/various';
 import {Card} from '../../../Card';
 import styles from './Colors.module.scss';
 
-// @ts-ignore
-import * as palette from '@shopify/polaris-tokens/colors';
+import palette from '../../../../../.cache/colors.json';
 
 type ColorScale =
   | '1'