refactor: restore deep path generation for colors

Author: Evan Jacobs

packages/system/src/styles/colors.ts

@@ -1,11 +1,8 @@
 import * as CSS from 'csstype'
 import { themeGetter } from '../style'
-import { ThemeNamespaceValue, ITheme, Theme } from '../types'
+import { SynthesizedPath, ITheme, Theme } from '../types'
 
-export type ThemeColor<T extends ITheme = Theme> = ThemeNamespaceValue<
-  'colors',
-  T
->
+export type ThemeColor<T extends ITheme = Theme> = SynthesizedPath<T['colors']>
 export type Color<T extends ITheme = Theme> = ThemeColor<T> | CSS.Property.Color
 export const getColor = themeGetter<ThemeColor>({
   name: 'color',

packages/system/src/types.ts

@@ -115,18 +115,17 @@ export interface TransformValue {
   ): CSSScalar
 }
 
-// declare type SynthesizedPath<T> = {
-//   [P in keyof T]:
-//     | (T[P] extends { [key: string]: any; [key: number]: any }
-//         ? `${string & P}` | `${string & P}.${SynthesizedPath<T[P]>}`
-//         : `${string & P}`)
-//     | (number & P)
-// }[T extends any[] ? number & keyof T : keyof T]
-
-// export type ThemeNamespaceValue<
-//   K extends string,
-//   T extends ITheme,
-// > = SynthesizedPath<T[K]>
+/**
+ * Recursively explores a given object and creates a union of the deep paths
+ * leading to primitive values (non-objects.)
+ */
+export type SynthesizedPath<T extends Record<string, unknown>> = {
+  [P in keyof T]:
+    | (T[P] extends Record<string, unknown>
+        ? `${string & P}.${SynthesizedPath<T[P]>}`
+        : `${string & P}`)
+    | number
+}[T extends any[] ? number & keyof T : keyof T]
 
 export type ThemeNamespaceValue<K extends string, T extends ITheme> =
   | NamespaceType<T[K]>