build(ui-scripts): fix changed token/theme parsing to follow the new design token structure

packages/emotion/src/styleUtils/applyColorModifiers.ts

@@ -0,0 +1,91 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import { colorToHsla } from '@instructure/ui-color-utils'
+
+type ModifyColor = {
+  value: string
+  modify: {
+    type: 'lighten' | 'darken'
+    value: number
+  }
+}
+
+// Matches Tokens Studio's HSL modifier math: move L by `amount` (0–1) of the
+// remaining distance toward the endpoint, so the step shrinks as it approaches
+// black/white and never overshoots.
+const modifyLightness = (
+  l: number,
+  amount: number,
+  type: 'darken' | 'lighten'
+): number =>
+  type === 'darken'
+    ? Math.max(0, l - l * amount)
+    : Math.min(1, l + (1 - l) * amount)
+
+const formatHsla = (h: number, s: number, l: number, a: number): string => {
+  const hh = Math.round(h)
+  const ss = +(s * 100).toFixed(2)
+  const ll = +(l * 100).toFixed(2)
+  return a < 1
+    ? `hsla(${hh}, ${ss}%, ${ll}%, ${a})`
+    : `hsl(${hh}, ${ss}%, ${ll}%)`
+}
+
+/**
+ * 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.
+ *
+ * @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.
+ */
+const applyColorModifiers = (
+  componentTheme: Record<string, string | ModifyColor> | undefined | null
+) => {
+  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 }
+    },
+    {}
+  )
+}
+
+export default applyColorModifiers
+export { applyColorModifiers }

packages/emotion/src/useStyleNew.ts

@@ -24,6 +24,7 @@
 
 import { useTheme } from './useTheme'
 import { mergeDeep } from '@instructure/ui-utils'
+import { applyColorModifiers } from './styleUtils/applyColorModifiers'
 import type {
   NewComponentTypes,
   SharedTokens,
@@ -121,9 +122,11 @@ const useStyleNew = <
     sharedTokensOverrides as Record<string, unknown>
   )
 
-  const baseComponentTheme = generateComponentTheme
-    ? generateComponentTheme({ primitives, semantics, sharedTokens })
-    : theme.newTheme.components[componentWithTokensId]?.(semantics)
+  const baseComponentTheme = applyColorModifiers(
+    generateComponentTheme
+      ? generateComponentTheme({ primitives, semantics, sharedTokens })
+      : theme.newTheme.components[componentWithTokensId]?.(semantics)
+  )
 
   const componentThemeFromSettingsProvider = mergeDeep(
     baseComponentTheme,

packages/emotion/src/withStyleNew.tsx

@@ -36,6 +36,7 @@ import { warn } from '@instructure/console'
 import { decorator } from '@instructure/ui-decorator'
 
 import { useTheme } from './useTheme'
+import { applyColorModifiers } from './styleUtils/applyColorModifiers'
 
 import type { ComponentTheme, InstUIComponent } from '@instructure/shared-types'
 import type {
@@ -233,14 +234,15 @@ const withStyleNew = decorator(
         sharedTokensOverrides as Record<string, unknown>
       ) as SharedTokens
       // Note: Some components do not have a theme, e.g., FormFieldMessages
-      const baseComponentTheme = generateComponentTheme
-        ? generateComponentTheme({
-            primitives,
-            semantics,
-            sharedTokens
-          })
-        : theme.newTheme.components[componentId]?.(semantics)
-
+      const baseComponentTheme = applyColorModifiers(
+        generateComponentTheme
+          ? generateComponentTheme({
+              primitives,
+              semantics,
+              sharedTokens
+            })
+          : theme.newTheme.components[componentId]?.(semantics)
+      )
       const componentThemeFromSettingsProvider = mergeDeep(
         baseComponentTheme,
         componentOverridesFromSettingsProvider as Record<string, unknown>

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

@@ -32,6 +32,12 @@ const formatComponent = (collection, key) => {
       return { ...acc, [key]: formatComponent(value, key) }
     }, {})
   }
+  if (value['$extensions']) {
+    return {
+      value: value.value,
+      modify: value['$extensions']['studio.tokens'].modify
+    }
+  }
   return value.value
 }
 
@@ -40,9 +46,9 @@ const formatReference = (reference) => {
   const lastElement = referenceArr[referenceArr.length - 1]
 
   if (!isNaN(Number(lastElement))) {
-    return `semantics.${referenceArr.slice(0, -1).join('.')}[${lastElement}],\n`
+    return `${referenceArr.slice(0, -1).join('.')}[${lastElement}],\n`
   }
-  return `semantics.${reference.slice(1, -1)},\n`
+  return `${reference.slice(1, -1)},\n`
 }
 
 export const resolveReferences = (semantics, key) => {

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

@@ -22,6 +22,65 @@
  * SOFTWARE.
  */
 
+//////////////////////////////////////////////////////////////////////////////////
+// START OF MERGFEDEEP
+//////////////////////////////////////////////////////////////////////////////////
+//This is needed because scripts can't have dependencies (e.g. ui-utils) because it needs to be resolved before build
+
+function mergeDeep(...args: Record<string, unknown>[]): Record<string, any> {
+  // note: This could be typed as the union of its args, but since
+  // its barely used its not worth the effort currently
+  let target = {}
+  args.forEach((arg) => {
+    target = mergeSourceIntoTarget(target, arg)
+  })
+  return target
+}
+
+function mergeSourceIntoTarget(
+  target: Record<string, any>,
+  source: Record<string, any>
+) {
+  if (isObject(source)) {
+    const keys = [
+      ...Object.keys(source),
+      ...Object.getOwnPropertySymbols(source)
+    ]
+    const merged = { ...target }
+
+    keys.forEach((key: any) => {
+      if (isObject(target[key]) && isObject(source[key])) {
+        merged[key] = mergeSourceIntoTarget(target[key], source[key])
+      } else if (isArray(source[key]) && isArray(target[key])) {
+        merged[key] = [...new Set([...target[key], ...source[key]])]
+      } else if (isArray(target[key])) {
+        merged[key] = [...new Set([...target[key], ...[source[key]]])]
+      } else {
+        merged[key] = source[key]
+      }
+    })
+    return merged
+  } else {
+    return { ...target }
+  }
+}
+
+function isObject(item: unknown) {
+  return (
+    item &&
+    (typeof item === 'object' || typeof item === 'function') &&
+    !Array.isArray(item)
+  )
+}
+
+function isArray(item: unknown): boolean {
+  return Array.isArray(item)
+}
+
+//////////////////////////////////////////////////////////////////////////////////
+// END OF MERGFEDEEP
+//////////////////////////////////////////////////////////////////////////////////
+
 const isReference = (expression: any): boolean =>
   expression[0] === '{' && expression[expression.length - 1] === '}'
 
@@ -104,8 +163,11 @@ export const resolveTypeReferences = (semantics: any, key?: any): string => {
   return `${typeof value}, `
 }
 
-export const mergeSemanticSets = (semanticList: any[]) =>
-  semanticList.reduce((acc, semantic) => ({ ...acc, ...semantic }), {})
+export const mergeSemanticSets = (semanticList: any[]) => {
+  return semanticList.reduce((acc, semantic) => {
+    return mergeDeep(acc, semantic)
+  }, {})
+}
 
 const generateSemantics = (data: any): string => {
   const formattedSemantic = formatSemantic(data)

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

@@ -126,7 +126,10 @@ const setupThemes = async (targetPath: string, input: any): Promise<void> => {
     await createFile(`${themePath}/primitives.ts`, primitivesFileContent)
 
     // semantics
-    const mergedSemanticData = mergeSemanticSets(themeData[theme].semantic)
+    const mergedSemanticData = mergeSemanticSets(
+      themeData[theme].semantic
+    ).semantic
+
     const semantics = generateSemantics(mergedSemanticData)
     const semanticsTypes = generateSemanticsType(mergedSemanticData)
     const semanticsFileContent = `
@@ -163,25 +166,22 @@ const setupThemes = async (targetPath: string, input: any): Promise<void> => {
         const componentThemeVars = generateComponent(
           component.data[fullComponentName]
         )
-
         const componentTypes = generateComponentType(
           component.data[fullComponentName]
         )
-        const usesSemantic = componentThemeVars.includes('semantics.')
+
+        const usesSemantic = componentThemeVars.includes('semantic.')
 
         // SharedTokens have to be at the component level in the input data
         // because of Figma, but it should be one level higher for our purposes
         if (rawComponentName !== 'SharedTokens') {
           const componentFileContent = `
 
           ${usesSemantic ? "import type { Semantics} from '../semantics'" : ''}
-          import type { ${capitalize(
-            fullComponentName
-          )} } from '../../componentTypes/${fullComponentName}'
 
           const ${fullComponentName} = (${
-            usesSemantic ? 'semantics: Semantics' : ''
-          }): ${capitalize(fullComponentName)} => ({${componentThemeVars}})
+            usesSemantic ? 'semantic: Semantics' : ''
+          }) => ({${componentThemeVars}})
           export default ${fullComponentName}
             `
           await createFile(
@@ -195,9 +195,9 @@ const setupThemes = async (targetPath: string, input: any): Promise<void> => {
           const componentFileContent = `
 
         import { SharedTokens } from '../commonTypes'
-        import { Semantics } from "./semantics"
+        import type { Semantics } from "./semantics"
 
-        const ${fullComponentName} = (semantics: Semantics): ${capitalize(
+        const ${fullComponentName} = (semantic: Semantics): ${capitalize(
             fullComponentName
           )} => ({${componentThemeVars}})
         export default ${fullComponentName}
@@ -281,7 +281,7 @@ const setupThemes = async (targetPath: string, input: any): Promise<void> => {
           (
             componentName // TODO type better
           ) =>
-            `${capitalize(componentName)}: (semantics: any) => ${capitalize(
+            `${capitalize(componentName)}: (semantic: any) => ${capitalize(
               componentName
             )}`
         )
@@ -336,7 +336,7 @@ const setupThemes = async (targetPath: string, input: any): Promise<void> => {
   export type BaseTheme<P = any, S = any> = {
     primitives: P
     semantics: (primitives: P) => S
-    sharedTokens: (semantics: S) => SharedTokens
+    sharedTokens: (semantic: S) => SharedTokens
     components: ComponentTypes
   }
   `