Refine color function logic and types clean up

Author: sam-b-rose

polaris-migrator/src/migrations/replace-sass-color/color-maps.ts

@@ -1,41 +1,17 @@
 import type {FileInfo, API, Options} from 'jscodeshift';
 import postcss, {Plugin} from 'postcss';
 import valueParser from 'postcss-value-parser';
-import {colors as tokenColors} from '@shopify/polaris-tokens';
+import {colors as tokenColors, createVar} from '@shopify/polaris-tokens';
 
 import {
   NamespaceOptions,
   namespace,
-  isSassFunction,
   getFunctionArgs,
   stripQuotes,
   StopWalkingFunctionNodes,
 } from '../../utilities/sass';
 import {isKeyOf} from '../../utilities/type-guards';
 
-import {
-  backgroundColorMap,
-  borderColorMap,
-  colorMap,
-  fillColorMap,
-} from './color-maps';
-
-const tokenColorsKeys = Object.keys(tokenColors);
-const maps = {
-  colorMap,
-  backgroundColorMap,
-  borderColorMap,
-  fillColorMap,
-};
-const propertyMap: {[key: string]: keyof typeof maps} = {
-  color: 'colorMap',
-  background: 'backgroundColorMap',
-  'background-color': 'backgroundColorMap',
-  border: 'borderColorMap',
-  'border-color': 'borderColorMap',
-  fill: 'fillColorMap',
-};
-
 export default function replaceSassColors(
   file: FileInfo,
   _: API,
@@ -48,7 +24,7 @@ export default function replaceSassColors(
 
 const processed = Symbol('processed');
 const polarisCustomPropertyRegEx = new RegExp(
-  String.raw`--p-(${tokenColorsKeys.join('|')})`,
+  Object.keys(tokenColors).map(createVar).join('|'),
 );
 
 interface PluginOptions extends Options, NamespaceOptions {}
@@ -62,9 +38,8 @@ const plugin = (options: PluginOptions = {}): Plugin => {
       // @ts-expect-error - Skip if processed so we don't process it again
       if (decl[processed]) return;
 
-      if (!isKeyOf(propertyMap, decl.prop)) return;
-      const propertyMapKey = propertyMap[decl.prop];
-      const replacementMap = maps[propertyMapKey];
+      if (!isKeyOf(propertyMaps, decl.prop)) return;
+      const replacementMap = propertyMaps[decl.prop];
       const parsed = valueParser(decl.value);
 
       parsed.walk((node) => {
@@ -76,18 +51,16 @@ const plugin = (options: PluginOptions = {}): Plugin => {
 
         // 1. Remove color() fallbacks
         if (node.value === 'var') {
-          const {nodes} = node;
-          const polarisCustomPropertyIndex = nodes.findIndex(
-            (node) =>
-              node.type === 'word' &&
-              polarisCustomPropertyRegEx.test(node.value),
+          const args = getFunctionArgs(node);
+          const polarisCustomPropertyIndex = args.findIndex((arg) =>
+            polarisCustomPropertyRegEx.test(arg),
           );
-          const colorFnFallbackIndex = nodes.findIndex((node) =>
-            isSassFunction(namespacedColor, node),
+          const colorFnFallbackIndex = args.findIndex((arg) =>
+            arg.startsWith(namespacedColor),
           );
 
           if (polarisCustomPropertyIndex < colorFnFallbackIndex) {
-            node.nodes = [nodes[0]];
+            node.nodes = [node.nodes[0]];
           }
 
           return StopWalkingFunctionNodes;
@@ -133,3 +106,138 @@ const plugin = (options: PluginOptions = {}): Plugin => {
     },
   };
 };
+
+/*
+ * See the legacy Sass API file for the original color palette
+ * documentation/guides/legacy-polaris-v8-public-api.scss
+ */
+
+const colorMap = {
+  blue: {
+    dark: '--p-interactive-hovered',
+    base: '--p-interactive',
+  },
+  green: {
+    dark: '--p-text-success',
+    base: '--p-text-success',
+  },
+  yellow: {
+    dark: '--p-text-warning',
+    base: '--p-text-warning',
+  },
+  red: {
+    dark: '--p-text-critical',
+    base: '--p-text-critical',
+  },
+  ink: {
+    base: '--p-text',
+    light: '--p-text-subdued',
+    lighter: '--p-text-subdued',
+    lightest: '--p-text-subdued',
+  },
+  sky: {
+    dark: '--p-text-subdued-on-dark',
+    base: '--p-text-on-dark',
+    light: '--p-text-on-dark',
+    lighter: '--p-text-on-dark',
+  },
+  black: {
+    base: '--p-text',
+  },
+  white: {
+    base: '--p-text-on-dark',
+  },
+};
+
+const backgroundColorMap = {
+  green: {
+    light: '--p-surface-success',
+    lighter: '--p-surface-success-subdued',
+  },
+  yellow: {
+    light: '--p-surface-warning',
+    lighter: '--p-surface-warning-subdued',
+  },
+  red: {
+    light: '--p-surface-critical',
+    lighter: '--p-surface-critical-subdued',
+  },
+  ink: {
+    dark: '--p-surface-dark',
+    base: '--p-surface-neutral-subdued-dark',
+  },
+  sky: {
+    base: '--p-surface-neutral',
+    light: '--p-surface-neutral-subdued',
+    lighter: '--p-surface-subdued',
+  },
+  black: {
+    base: '--p-surface-dark',
+  },
+  white: {
+    base: '--p-surface',
+  },
+};
+
+const borderColorMap = {
+  green: {
+    dark: '--p-border-success',
+    base: '--p-border-success',
+    light: '--p-border-success-subdued',
+    lighter: '--p-border-success-subdued',
+  },
+  yellow: {
+    dark: '--p-border-warning',
+    base: '--p-border-warning',
+    light: '--p-border-warning-disabled',
+    lighter: '--p-border-warning-subdued',
+  },
+  red: {
+    dark: '--p-border-critical',
+    base: '--p-border-critical',
+    light: '--p-border-critical-subdued',
+    lighter: '--p-border-critical-subdued',
+  },
+  ink: {
+    lightest: '--p-border',
+  },
+  sky: {
+    light: '--p-border-subdued',
+  },
+};
+
+const fillColorMap = {
+  green: {
+    dark: '--p-icon-success',
+    base: '--p-icon-success',
+  },
+  yellow: {
+    dark: '--p-icon-warning',
+    base: '--p-icon-warning',
+  },
+  red: {
+    dark: '--p-icon-critical',
+    base: '--p-icon-critical',
+  },
+  ink: {
+    base: '--p-icon',
+    light: '--p-icon',
+    lighter: '--p-icon-subdued',
+    lightest: '--p-icon-disabled',
+  },
+  black: {
+    base: '--p-icon',
+  },
+  white: {
+    base: '--p-icon-on-dark',
+  },
+};
+
+const propertyMaps = {
+  color: colorMap,
+  background: backgroundColorMap,
+  'background-color': backgroundColorMap,
+  border: borderColorMap,
+  'border-color': borderColorMap,
+  fill: fillColorMap,
+};