Reorganize color mapping code

packages/theme/src/color/index.ts

@@ -1,7 +1,8 @@
 import Color from 'colorjs.io';
 import { ThemeProps, TokensObject } from '../types';
 import { generateColorScales } from './algos';
-import { mapColors } from './map';
+import { COLOR_MAP } from './map';
+import { mapColorsToScale } from './utils';
 
 export function generateColors( color: ThemeProps[ 'color' ] ) {
 	// Bridge the gap between color algos and our API surface.
@@ -19,7 +20,7 @@ export function generateColors( color: ThemeProps[ 'color' ] ) {
 	return {
 		[ 'neutral-scale' ]: colorScales.grayScale,
 		[ 'primary-scale' ]: colorScales.accentScale,
-		neutral: mapColors( colorScales.grayScale ),
-		primary: mapColors( colorScales.accentScale ),
+		neutral: mapColorsToScale( colorScales.grayScale, COLOR_MAP ),
+		primary: mapColorsToScale( colorScales.accentScale, COLOR_MAP ),
 	} as TokensObject;
 }

packages/theme/src/color/map.ts

@@ -1,24 +1,6 @@
-// map showing which lightness in scale each use case should use
-// type ColorMap< T > = Partial<
-// 	Record<
-// 		'bg' | 'text' | 'border',
-// 		Partial<
-// 			Record<
-// 				'default' | 'hover' | 'active' | 'input' | 'muted' | 'strong' | 'inverse' | 'disabled',
-// 				T | Partial< Record< 'default' | 'disabled' | 'hover' | 'strong', T > >
-// 			>
-// 		>
-// 	>
-// >;
+import { ColorMap } from './types';
 
-import type { TokensObject } from '../types';
-import type { ArrayOf12, ColorScaleIndex } from './types';
-
-type ColorMap< T > = {
-	[ key: string ]: T | ColorMap< T >;
-};
-
-const COLOR_MAP: ColorMap< ColorScaleIndex > = {
+export const COLOR_MAP: ColorMap = {
 	bg: {
 		default: 2,
 		hover: 3,
@@ -55,12 +37,3 @@ const COLOR_MAP: ColorMap< ColorScaleIndex > = {
 		hover: 6,
 	},
 };
-
-// maps a color map to a color scale
-export const mapColors = ( colorScale: ArrayOf12< string >, mapToObject = COLOR_MAP ) => {
-	const map: TokensObject = {};
-	Object.entries( mapToObject ).forEach( ( [ alias, color ] ) => {
-		map[ alias ] = typeof color === 'object' ? mapColors( colorScale, color ) : colorScale[ color ];
-	} );
-	return map;
-};

packages/theme/src/color/types.ts

@@ -1,2 +1,6 @@
 export type ArrayOf12< T > = [ T, T, T, T, T, T, T, T, T, T, T, T ];
 export type ColorScaleIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
+
+export type ColorMap = {
+	[ key: string ]: ColorScaleIndex | ColorMap;
+};

packages/theme/src/color/utils.ts

@@ -0,0 +1,25 @@
+// map showing which lightness in scale each use case should use
+// type ColorMap< T > = Partial<
+// 	Record<
+// 		'bg' | 'text' | 'border',
+// 		Partial<
+// 			Record<
+// 				'default' | 'hover' | 'active' | 'input' | 'muted' | 'strong' | 'inverse' | 'disabled',
+// 				T | Partial< Record< 'default' | 'disabled' | 'hover' | 'strong', T > >
+// 			>
+// 		>
+// 	>
+// >;
+
+import type { TokensObject } from '../types';
+import type { ArrayOf12, ColorMap } from './types';
+
+// maps a color map to a color scale
+export const mapColorsToScale = ( colorScale: ArrayOf12< string >, mapToObject: ColorMap ) => {
+	const map: TokensObject = {};
+	Object.entries( mapToObject ).forEach( ( [ alias, color ] ) => {
+		map[ alias ] =
+			typeof color === 'object' ? mapColorsToScale( colorScale, color ) : colorScale[ color ];
+	} );
+	return map;
+};