feat(ui-scripts): refactor theme type generation and fix token fetching script

Author: HerrTopi

packages/emotion/src/styleUtils/applyColorModifiers.ts

@@ -52,39 +52,56 @@ const formatHsla = (h: number, s: number, l: number, a: number): string => {
     : `hsl(${hh}, ${ss}%, ${ll}%)`
 }
 
+const isModifyColor = (val: unknown): val is ModifyColor =>
+  typeof val === 'object' &&
+  val !== null &&
+  typeof (val as ModifyColor).value === 'string' &&
+  typeof (val as ModifyColor).modify === 'object' &&
+  (val as ModifyColor).modify !== null
+
+const resolveModifyColor = ({ value, modify }: ModifyColor): string => {
+  if (modify.type === 'darken' || modify.type === 'lighten') {
+    const { h, s, l, a } = colorToHsla(value)
+    const newL = modifyLightness(l, modify.value, modify.type)
+    return formatHsla(h, s, newL, a)
+  }
+  return value
+}
+
 /**
  * Resolves a component theme object by applying color modifiers to any entries
  * shaped as `{ value, modify: { type, value } }`. Entries with `modify.type` of
  * `'darken'` or `'lighten'` are transformed in HSL space using the same math
  * Tokens Studio applies (`space: "hsl"`): `amount` is a 0–1 fraction of the
- * remaining distance to black/white. Plain string values and unrecognized
- * modifier types are passed through unchanged.
+ * remaining distance to black/white. Plain values and unrecognized modifier
+ * types are passed through unchanged. Nested plain objects are walked
+ * recursively so modifiers anywhere in the tree get resolved.
  *
- * @param componentTheme - Theme map whose values are either plain CSS color strings
- *   or `ModifyColor` objects describing a base color and a darken/lighten modifier.
- * @returns A new theme object with the same keys, where modifier objects have been
- *   collapsed to their final resolved color string.
+ * @param componentTheme - Theme map whose values can be CSS strings, `ModifyColor`
+ *   objects, or nested theme objects containing the same.
+ * @returns A new theme object mirroring the input shape, with every `ModifyColor`
+ *   collapsed to its final resolved color string.
  */
 const applyColorModifiers = (
-  componentTheme: Record<string, string | ModifyColor> | undefined | null
-) => {
+  componentTheme: Record<string, unknown> | undefined | null
+): Record<string, unknown> => {
   if (componentTheme == null) return {}
-  return Object.keys(componentTheme).reduce<Record<string, string>>(
-    (res, k) => {
-      const entry = componentTheme[k]
-      if (typeof entry === 'object' && entry !== null) {
-        const { value, modify } = entry
-        if (modify.type === 'darken' || modify.type === 'lighten') {
-          const { h, s, l, a } = colorToHsla(value)
-          const newL = modifyLightness(l, modify.value, modify.type)
-          return { ...res, [k]: formatHsla(h, s, newL, a) }
-        }
-        return { ...res, [k]: value }
-      }
-      return { ...res, [k]: entry }
-    },
-    {}
-  )
+  const result: Record<string, unknown> = {}
+  for (const key of Object.keys(componentTheme)) {
+    const entry = componentTheme[key]
+    if (isModifyColor(entry)) {
+      result[key] = resolveModifyColor(entry)
+    } else if (
+      typeof entry === 'object' &&
+      entry !== null &&
+      !Array.isArray(entry)
+    ) {
+      result[key] = applyColorModifiers(entry as Record<string, unknown>)
+    } else {
+      result[key] = entry
+    }
+  }
+  return result
 }
 
 export default applyColorModifiers

packages/ui-scripts/lib/build/buildThemes/generateComponents.js

@@ -32,6 +32,10 @@ const formatComponent = (collection, key) => {
       return { ...acc, [key]: formatComponent(value, key) }
     }, {})
   }
+  // `$extensions` is the Design Tokens Format spec's escape hatch for tool-specific
+  // metadata. Tokens Studio writes color modifiers there under `studio.tokens.modify`
+  // (e.g. `{ type: 'darken', value: 0.1 }`); we forward that payload so the runtime
+  // (`applyColorModifiers`) can resolve the final color at theme apply time.
   if (value['$extensions']) {
     return {
       value: value.value,

packages/ui-scripts/lib/build/buildThemes/generateSemantics.ts

@@ -23,7 +23,7 @@
  */
 
 //////////////////////////////////////////////////////////////////////////////////
-// START OF MERGFEDEEP
+// START OF MERGEDEEP
 //////////////////////////////////////////////////////////////////////////////////
 //This is needed because scripts can't have dependencies (e.g. ui-utils) because it needs to be resolved before build
 
@@ -78,7 +78,7 @@ function isArray(item: unknown): boolean {
 }
 
 //////////////////////////////////////////////////////////////////////////////////
-// END OF MERGFEDEEP
+// END OF MERGEDEEP
 //////////////////////////////////////////////////////////////////////////////////
 
 const isReference = (expression: any): boolean =>

packages/ui-scripts/lib/build/buildThemes/setupThemes.ts

@@ -166,7 +166,6 @@ const setupThemes = async (targetPath: string, input: any): Promise<void> => {
         const componentThemeVars = generateComponent(
           component.data[fullComponentName]
         )
-
         const componentTypes = generateComponentType(
           component.data[fullComponentName]
         )
@@ -179,13 +178,10 @@ const setupThemes = async (targetPath: string, input: any): Promise<void> => {
           const componentFileContent = `
 
           ${usesSemantic ? "import type { Semantics} from '../semantics'" : ''}
-          import type { ${capitalize(
-            fullComponentName
-          )} } from '../../componentTypes/${fullComponentName}'
 
           const ${fullComponentName} = (${
             usesSemantic ? 'semantic: Semantics' : ''
-          }): ${capitalize(fullComponentName)} => ({${componentThemeVars}})
+          }) => ({${componentThemeVars}})
           export default ${fullComponentName}
             `
           await createFile(