@payfit/unity-themes 2.24.2 → 2.25.0

package/src/scripts/transforms/tailwind-grid-token.ts

@@ -1,13 +1,15 @@
 import type { Token } from 'style-dictionary'
 import type { NameTransform } from 'style-dictionary/types'
 
+import { prefixTransform } from '../utils/prefix-transform'
+
 type Transformer = NameTransform['transform']
 
 export function filter(token: Token): boolean {
   return token.attributes?.category === 'grid'
 }
 
-export const transform: Transformer = token => {
+export const tailwindGridTokenNameTransform: Transformer = (token, config) => {
   if (!token.attributes) {
     return token.name
   }
@@ -17,7 +19,9 @@ export const transform: Transformer = token => {
   >
   let name = String(category)
   if (type) name += `-${type}`
-  if (item) name += `-${subitem}`
-  if (subitem) name += `--${item}`
+  if (subitem) name += `-${subitem}`
+  if (item) name += `--${item}`
   return name
 }
+
+export const transform = prefixTransform(tailwindGridTokenNameTransform)

package/src/scripts/transforms/tailwind-spacing-token.test.ts

@@ -302,5 +302,14 @@ describe('tailwind spacing token transform', () => {
         expect(result).toBe(expected)
       })
     })
+
+    it('should prepend prefix when config.prefix is set', () => {
+      const token = createMockToken(['spacing', '1', 'base'])
+      const config = { ...createMockPlatformConfig(), prefix: 'uy' }
+
+      const result = transform(token, config)
+
+      expect(result).toBe('uy-spacing-1')
+    })
   })
 })

package/src/scripts/transforms/tailwind-spacing-token.ts

@@ -1,11 +1,24 @@
 import type { Token } from 'style-dictionary'
-import type { Config, PlatformConfig } from 'style-dictionary/types'
+import type {
+  Config,
+  NameTransform,
+  PlatformConfig,
+} from 'style-dictionary/types'
+
+import { prefixTransform } from '../utils/prefix-transform'
+
+type Transformer = NameTransform['transform']
 
 export function filter(token: Token, options: Config): boolean {
   return token.path[0] === 'spacing'
 }
 
-export function transform(token: Token, _config: PlatformConfig): string {
+const tailwindSpacingTokenNameTransform: Transformer = (
+  token: Token,
+  config: PlatformConfig,
+) => {
   const ignoreDefault = (nameToken: string) => !nameToken.includes('base')
   return [...(token.path as string[]).filter(ignoreDefault)].join('-')
 }
+
+export const transform = prefixTransform(tailwindSpacingTokenNameTransform)

package/src/scripts/transforms/tailwind-text-token.test.ts

@@ -306,5 +306,23 @@ describe('tailwind text token transform', () => {
         expect(result).toBe(expected)
       })
     })
+
+    it('should prepend prefix when config.prefix is set', () => {
+      const token = createMockToken(['text', 'heading'])
+      const config = { ...createMockPlatformConfig(), prefix: 'uy' }
+
+      const result = transform(token, config)
+
+      expect(result).toBe('uy-text-heading')
+    })
+
+    it('should prepend prefix with -- variant when config.prefix is set', () => {
+      const token = createMockToken(['text', 'heading--large'])
+      const config = { ...createMockPlatformConfig(), prefix: 'uy' }
+
+      const result = transform(token, config)
+
+      expect(result).toBe('uy-text-heading--large')
+    })
   })
 })

package/src/scripts/transforms/tailwind-text-token.ts

@@ -1,11 +1,22 @@
 import type { Token } from 'style-dictionary'
-import type { Config, PlatformConfig } from 'style-dictionary/types'
+import type {
+  Config,
+  NameTransform,
+  PlatformConfig,
+} from 'style-dictionary/types'
+
+import { prefixTransform } from '../utils/prefix-transform'
+
+type Transformer = NameTransform['transform']
 
 export function filter(token: Token, options: Config): boolean {
   return token.path[0] === 'text'
 }
 
-export function transform(token: Token, _config: PlatformConfig): string {
+const tailwindTextTokenNameTransform: Transformer = (
+  token: Token,
+  config: PlatformConfig,
+) => {
   const path = token.path as string[]
 
   if (path[1]?.includes('--')) {
@@ -15,3 +26,5 @@ export function transform(token: Token, _config: PlatformConfig): string {
 
   return `text-${path[1]}`
 }
+
+export const transform = prefixTransform(tailwindTextTokenNameTransform)

package/src/scripts/transforms/tailwind-typography-token.test.ts

@@ -36,14 +36,20 @@ describe('tailwind typography token transform', () => {
   describe('transform', () => {
     it('should reorder the path elements correctly', () => {
       const token = createMockToken(['typography', 'h1', 'sm'])
-      const result = transform(token, {} as any, {})
+      const result = transform(token, {}, {})
       expect(result).toBe('typography-sm-h1')
     })
 
     it('should handle "default" breakpoint correctly', () => {
       const token = createMockToken(['typography', 'h1', 'default'])
-      const result = transform(token, {} as any, {})
+      const result = transform(token, {}, {})
       expect(result).toBe('typography-default-h1')
     })
+
+    it('should prepend prefix when config.prefix is set', () => {
+      const token = createMockToken(['typography', 'h1', 'sm'])
+      const result = transform(token, { prefix: 'uy' }, {})
+      expect(result).toBe('uy-typography-sm-h1')
+    })
   })
 })

package/src/scripts/transforms/tailwind-typography-token.ts

@@ -1,16 +1,20 @@
 import type { Token } from 'style-dictionary'
 import type { NameTransform } from 'style-dictionary/types'
 
+import { prefixTransform } from '../utils/prefix-transform'
+
 type Transformer = NameTransform['transform']
 
 export function filter(token: Token): boolean {
   return token.$type === 'typography'
 }
 
-export const transform: Transformer = token => {
+const tailwindTypographyTransform: Transformer = (token, config) => {
   const [_category, type, item] = token.path
   // Reorders the token path from [typography, h1, sm]
   // to the string "typography-sm-h1"
   const newPath = ['typography', item, type]
   return newPath.join('-')
 }
+
+export const transform = prefixTransform(tailwindTypographyTransform)

package/src/scripts/utils/prefix-transform.test.ts

@@ -0,0 +1,137 @@
+import type {
+  Config,
+  PlatformConfig,
+  TransformedToken,
+} from 'style-dictionary/types'
+
+import { describe, expect, it, vi } from 'vitest'
+
+import { prefixTransform } from './prefix-transform.js'
+
+describe('prefixTransform', () => {
+  const createMockToken = (): TransformedToken =>
+    ({
+      name: 'test-token',
+      value: '#000000',
+      type: 'color',
+      path: ['color', 'primary'],
+      original: {},
+      filePath: '',
+      isSource: false,
+    }) as TransformedToken
+
+  const createMockConfig = (prefix?: string): PlatformConfig =>
+    ({
+      platforms: {},
+      source: [],
+      include: [],
+      prefix,
+    }) as unknown as PlatformConfig
+
+  const createMockOptions = (): Config =>
+    ({
+      platforms: {},
+      source: [],
+      include: [],
+    }) as Config
+
+  describe('without prefix', () => {
+    it('should return the original transformer value when no prefix is set', () => {
+      const transformer = vi.fn(() => 'color-primary')
+      const wrapped = prefixTransform(transformer)
+
+      const result = wrapped(
+        createMockToken(),
+        createMockConfig(),
+        createMockOptions(),
+      )
+
+      expect(result).toBe('color-primary')
+    })
+
+    it('should return the original transformer value when prefix is empty string', () => {
+      const transformer = vi.fn(() => 'color-primary')
+      const wrapped = prefixTransform(transformer)
+
+      const result = wrapped(
+        createMockToken(),
+        createMockConfig(''),
+        createMockOptions(),
+      )
+
+      expect(result).toBe('color-primary')
+    })
+  })
+
+  describe('with prefix', () => {
+    it('should prepend the prefix to the transformer value', () => {
+      const transformer = vi.fn(() => 'color-primary')
+      const wrapped = prefixTransform(transformer)
+
+      const result = wrapped(
+        createMockToken(),
+        createMockConfig('uy'),
+        createMockOptions(),
+      )
+
+      expect(result).toBe('uy-color-primary')
+    })
+
+    it('should work with different prefix values', () => {
+      const transformer = vi.fn(() => 'spacing-md')
+      const wrapped = prefixTransform(transformer)
+
+      const result = wrapped(
+        createMockToken(),
+        createMockConfig('my-prefix'),
+        createMockOptions(),
+      )
+
+      expect(result).toBe('my-prefix-spacing-md')
+    })
+  })
+
+  describe('async transformer', () => {
+    it('should handle a transformer that returns a Promise', async () => {
+      const transformer = vi.fn(() => Promise.resolve('color-primary'))
+      const wrapped = prefixTransform(transformer)
+
+      const result = wrapped(
+        createMockToken(),
+        createMockConfig('uy'),
+        createMockOptions(),
+      )
+
+      expect(result).toBeInstanceOf(Promise)
+      await expect(result).resolves.toBe('uy-color-primary')
+    })
+
+    it('should handle a Promise result without prefix', async () => {
+      const transformer = vi.fn(() => Promise.resolve('color-primary'))
+      const wrapped = prefixTransform(transformer)
+
+      const result = wrapped(
+        createMockToken(),
+        createMockConfig(),
+        createMockOptions(),
+      )
+
+      await expect(result).resolves.toBe('color-primary')
+    })
+  })
+
+  describe('argument passthrough', () => {
+    it('should forward all arguments to the wrapped transformer', () => {
+      const transformer = vi.fn(() => 'result')
+      const wrapped = prefixTransform(transformer)
+
+      const token = createMockToken()
+      const config = createMockConfig('uy')
+      const options = createMockOptions()
+
+      void wrapped(token, config, options)
+
+      expect(transformer).toHaveBeenCalledWith(token, config, options)
+    })
+  })
+})

package/src/scripts/utils/prefix-transform.ts

@@ -0,0 +1,16 @@
+import type { NameTransform } from 'style-dictionary/types'
+
+type Transformer = NameTransform['transform']
+
+export const prefixTransform: (transformer: Transformer) => Transformer =
+  transformer =>
+  (...args) => {
+    const [, config] = args
+    const prefix = config.prefix ? `${config.prefix}-` : ''
+    const value = transformer(...args)
+
+    if (value instanceof Promise) {
+      return value.then(val => `${prefix}${val}`)
+    }
+    return `${prefix}${value}`
+  }

package/src/utils/cn.ts

@@ -6,8 +6,8 @@ import { twMergeConfig } from './merge-config'
  * Internal Unity-configured class name utility function.
  * @internal
  */
-const uyCn = (...classes: string[]) =>
-  cnMerge(...classes)({
+const uyCn = (...params: Parameters<typeof cnMerge>) =>
+  cnMerge(...params)({
     twMerge: true,
     twMergeConfig,
   })

package/tokens/common/aspect-ratios.json

@@ -0,0 +1,11 @@
+{
+  "aspect": {
+    "$type": "number",
+    "video": {
+      "$value": "16 / 9"
+    },
+    "square": {
+      "$value": "1 / 1"
+    }
+  }
+}

package/tokens/common/breakpoints.json

@@ -0,0 +1,18 @@
+{
+  "breakpoint": {
+    "$type": "dimension",
+    "$description": "Supported viewport breakpoints",
+    "sm": {
+      "$value": "490px"
+    },
+    "md": {
+      "$value": "768px"
+    },
+    "lg": {
+      "$value": "1280px"
+    },
+    "xl": {
+      "$value": "1440px"
+    }
+  }
+}

package/tokens/{text.json → common/font-sizes.json}

@@ -1,32 +1,4 @@
 {
-  "font": {
-    "$type": "fontFamily",
-    "serif": {
-      "$value": ["Source Serif 4", "serif"]
-    },
-    "sans": {
-      "$value": ["Inter", "sans-serif"]
-    },
-    "mono": {
-      "$value": ["Roboto Mono", "monospace"]
-    }
-  },
-  "font-weight": {
-    "$type": "fontWeight",
-    "$description": "Font weights for the design system",
-    "regular": {
-      "$value": 400
-    },
-    "medium": {
-      "$value": 500
-    },
-    "semibold": {
-      "$value": 600
-    },
-    "bold": {
-      "$value": 700
-    }
-  },
   "text": {
     "$type": "dimension",
     "$description": "Font sizes for the design system",

package/tokens/common/font-weights.json

@@ -0,0 +1,18 @@
+{
+  "font-weight": {
+    "$type": "fontWeight",
+    "$description": "Font weights for the design system",
+    "regular": {
+      "$value": 400
+    },
+    "medium": {
+      "$value": 500
+    },
+    "semibold": {
+      "$value": 600
+    },
+    "bold": {
+      "$value": 700
+    }
+  }
+}

package/tokens/{radii.json → common/radii.json}

@@ -32,21 +32,6 @@
     "400": {
       "$value": "32px"
     },
-    "xs": {
-      "$value": "{radius.50}"
-    },
-    "sm": {
-      "$value": "{radius.75}"
-    },
-    "md": {
-      "$value": "{radius.100}"
-    },
-    "lg": {
-      "$value": "{radius.200}"
-    },
-    "xl": {
-      "$value": "{radius.300}"
-    },
     "circle": {
       "$value": "50%",
       "$extensions": {

package/tokens/{spacings.json → common/spacings.json}

@@ -51,30 +51,5 @@
     "1000": {
       "$value": "80px"
     }
-  },
-  "breakpoint": {
-    "$type": "dimension",
-    "$description": "Supported viewport breakpoints",
-    "sm": {
-      "$value": "490px"
-    },
-    "md": {
-      "$value": "768px"
-    },
-    "lg": {
-      "$value": "1280px"
-    },
-    "xl": {
-      "$value": "1440px"
-    }
-  },
-  "aspect": {
-    "$type": "number",
-    "video": {
-      "$value": "16 / 9"
-    },
-    "square": {
-      "$value": "1 / 1"
-    }
   }
 }

package/tokens/legacy/radii.json

@@ -0,0 +1,21 @@
+{
+  "radius": {
+    "$type": "dimension",
+    "$description": "Semantic Corner radius scale for the design system",
+    "xs": {
+      "$value": "{radius.50}"
+    },
+    "sm": {
+      "$value": "{radius.75}"
+    },
+    "md": {
+      "$value": "{radius.100}"
+    },
+    "lg": {
+      "$value": "{radius.200}"
+    },
+    "xl": {
+      "$value": "{radius.300}"
+    }
+  }
+}

package/tokens/legacy/text.json

@@ -0,0 +1,14 @@
+{
+  "font": {
+    "$type": "fontFamily",
+    "serif": {
+      "$value": ["Source Serif 4", "serif"]
+    },
+    "sans": {
+      "$value": ["Inter", "sans-serif"]
+    },
+    "mono": {
+      "$value": ["Roboto Mono", "monospace"]
+    }
+  }
+}