@payfit/unity-themes 2.55.22 → 2.56.0

package/src/scripts/formats/processors/grid-processor.test.ts

@@ -1,378 +0,0 @@
-import type { Config, Dictionary, LocalOptions } from 'style-dictionary/types'
-
-import { describe, expect, it } from 'vitest'
-
-import { processGridTokens } from './grid-processor.js'
-
-describe('processGridTokens', () => {
-  const createMockOptions = (prefix?: string): Config & LocalOptions => ({
-    prefix,
-    platforms: {},
-    source: [],
-    include: [],
-    exclude: [],
-    files: [],
-    transform: {},
-    transformGroup: {},
-    format: {},
-    action: {},
-    fileHeader: '',
-    log: {},
-  })
-
-  it('should return empty string when no grid tokens are provided', () => {
-    const dictionary: Dictionary = {
-      tokens: {},
-      allTokens: [],
-      properties: {},
-      usesReference: () => false,
-      getReferences: () => [],
-      transformTokens: () => [],
-    } as unknown as Dictionary
-
-    const options = createMockOptions()
-    const result = processGridTokens(dictionary, options)
-
-    expect(result).toMatchInlineSnapshot(`""`)
-  })
-
-  it('should generate single grid utility with default breakpoint only', () => {
-    const dictionary: Dictionary = {
-      tokens: {
-        grid: {
-          layout: {
-            default: {
-              columns: { $value: 6 },
-              gutter: { $value: '1rem' },
-              margin: { $value: '1rem' },
-            },
-          },
-        },
-        breakpoint: {
-          md: { $value: '768px' },
-          lg: { $value: '1024px' },
-        },
-      },
-      allTokens: [],
-      properties: {},
-      usesReference: () => false,
-      getReferences: () => [],
-      transformTokens: () => [],
-    } as unknown as Dictionary
-
-    const options = createMockOptions()
-    const result = processGridTokens(dictionary, options)
-
-    expect(result).toMatchInlineSnapshot(`
-      "@utility grid-layout {
-        display: grid;
-        grid-template-columns: repeat(var(--grid-layout-columns--default), 1fr);
-        grid-gap: var(--grid-layout-gutter--default);
-        margin: 0 var(--grid-layout-margin--default);
-      }
-      "
-    `)
-  })
-
-  it('should generate grid utility with responsive breakpoints', () => {
-    const dictionary: Dictionary = {
-      tokens: {
-        grid: {
-          layout: {
-            default: {
-              columns: { $value: 6 },
-              gutter: { $value: '1rem' },
-              margin: { $value: '1rem' },
-            },
-            md: {
-              columns: { $value: 12 },
-              gutter: { $value: '1.5rem' },
-              margin: { $value: '2rem' },
-            },
-            lg: {
-              columns: { $value: 12 },
-              gutter: { $value: '2rem' },
-              margin: { $value: '3rem' },
-            },
-          },
-        },
-        breakpoint: {
-          md: { $value: '768px' },
-          lg: { $value: '1024px' },
-        },
-      },
-      allTokens: [],
-      properties: {},
-      usesReference: () => false,
-      getReferences: () => [],
-      transformTokens: () => [],
-    } as unknown as Dictionary
-
-    const options = createMockOptions()
-    const result = processGridTokens(dictionary, options)
-
-    expect(result).toMatchInlineSnapshot(`
-      "@utility grid-layout {
-        display: grid;
-        grid-template-columns: repeat(var(--grid-layout-columns--default), 1fr);
-        grid-gap: var(--grid-layout-gutter--default);
-        margin: 0 var(--grid-layout-margin--default);
-        @media screen and (min-width: 768px) {
-          grid-template-columns: repeat(var(--grid-layout-columns--md), 1fr);
-          grid-gap: var(--grid-layout-gutter--md);
-          margin: 0 var(--grid-layout-margin--md);
-        }
-        @media screen and (min-width: 1024px) {
-          grid-template-columns: repeat(var(--grid-layout-columns--lg), 1fr);
-          grid-gap: var(--grid-layout-gutter--lg);
-          margin: 0 var(--grid-layout-margin--lg);
-        }
-      }
-      "
-    `)
-  })
-
-  it('should generate multiple grid utilities', () => {
-    const dictionary: Dictionary = {
-      tokens: {
-        grid: {
-          layout: {
-            default: {
-              columns: { $value: 6 },
-              gutter: { $value: '1rem' },
-              margin: { $value: '1rem' },
-            },
-            md: {
-              columns: { $value: 12 },
-              gutter: { $value: '1.5rem' },
-              margin: { $value: '2rem' },
-            },
-          },
-          sidebar: {
-            default: {
-              columns: { $value: 4 },
-              gutter: { $value: '0.5rem' },
-              margin: { $value: '0.5rem' },
-            },
-            lg: {
-              columns: { $value: 6 },
-              gutter: { $value: '1rem' },
-              margin: { $value: '1rem' },
-            },
-          },
-        },
-        breakpoint: {
-          md: { $value: '768px' },
-          lg: { $value: '1024px' },
-        },
-      },
-      allTokens: [],
-      properties: {},
-      usesReference: () => false,
-      getReferences: () => [],
-      transformTokens: () => [],
-    } as unknown as Dictionary
-
-    const options = createMockOptions()
-    const result = processGridTokens(dictionary, options)
-
-    expect(result).toMatchInlineSnapshot(`
-      "@utility grid-layout {
-        display: grid;
-        grid-template-columns: repeat(var(--grid-layout-columns--default), 1fr);
-        grid-gap: var(--grid-layout-gutter--default);
-        margin: 0 var(--grid-layout-margin--default);
-        @media screen and (min-width: 768px) {
-          grid-template-columns: repeat(var(--grid-layout-columns--md), 1fr);
-          grid-gap: var(--grid-layout-gutter--md);
-          margin: 0 var(--grid-layout-margin--md);
-        }
-      }
-
-      @utility grid-sidebar {
-        display: grid;
-        grid-template-columns: repeat(var(--grid-sidebar-columns--default), 1fr);
-        grid-gap: var(--grid-sidebar-gutter--default);
-        margin: 0 var(--grid-sidebar-margin--default);
-        @media screen and (min-width: 1024px) {
-          grid-template-columns: repeat(var(--grid-sidebar-columns--lg), 1fr);
-          grid-gap: var(--grid-sidebar-gutter--lg);
-          margin: 0 var(--grid-sidebar-margin--lg);
-        }
-      }
-      "
-    `)
-  })
-
-  it('should apply prefix to variable names when provided', () => {
-    const dictionary: Dictionary = {
-      tokens: {
-        grid: {
-          layout: {
-            default: {
-              columns: { $value: 6 },
-              gutter: { $value: '1rem' },
-              margin: { $value: '1rem' },
-            },
-            md: {
-              columns: { $value: 12 },
-              gutter: { $value: '1.5rem' },
-              margin: { $value: '2rem' },
-            },
-          },
-        },
-        breakpoint: {
-          md: { $value: '768px' },
-        },
-      },
-      allTokens: [],
-      properties: {},
-      usesReference: () => false,
-      getReferences: () => [],
-      transformTokens: () => [],
-    } as unknown as Dictionary
-
-    const options = createMockOptions('uy')
-    const result = processGridTokens(dictionary, options)
-
-    expect(result).toMatchInlineSnapshot(`
-      "@utility grid-layout {
-        display: grid;
-        grid-template-columns: repeat(var(--uy-grid-layout-columns--default), 1fr);
-        grid-gap: var(--uy-grid-layout-gutter--default);
-        margin: 0 var(--uy-grid-layout-margin--default);
-        @media screen and (min-width: 768px) {
-          grid-template-columns: repeat(var(--uy-grid-layout-columns--md), 1fr);
-          grid-gap: var(--uy-grid-layout-gutter--md);
-          margin: 0 var(--uy-grid-layout-margin--md);
-        }
-      }
-      "
-    `)
-  })
-
-  it('should skip breakpoints not defined in breakpoint tokens', () => {
-    const dictionary: Dictionary = {
-      tokens: {
-        grid: {
-          layout: {
-            default: {
-              columns: { $value: 6 },
-              gutter: { $value: '1rem' },
-              margin: { $value: '1rem' },
-            },
-            custom: {
-              columns: { $value: 8 },
-              gutter: { $value: '1.2rem' },
-              margin: { $value: '1.5rem' },
-            },
-          },
-        },
-        breakpoint: {
-          md: { $value: '768px' },
-          // Note: 'custom' breakpoint is not defined here
-        },
-      },
-      allTokens: [],
-      properties: {},
-      usesReference: () => false,
-      getReferences: () => [],
-      transformTokens: () => [],
-    } as unknown as Dictionary
-
-    const options = createMockOptions()
-    const result = processGridTokens(dictionary, options)
-
-    expect(result).toMatchInlineSnapshot(`
-      "@utility grid-layout {
-        display: grid;
-        grid-template-columns: repeat(var(--grid-layout-columns--default), 1fr);
-        grid-gap: var(--grid-layout-gutter--default);
-        margin: 0 var(--grid-layout-margin--default);
-      }
-      "
-    `)
-  })
-
-  it('should handle missing breakpoint token values', () => {
-    const dictionary: Dictionary = {
-      tokens: {
-        grid: {
-          layout: {
-            default: {
-              columns: { $value: 6 },
-              gutter: { $value: '1rem' },
-              margin: { $value: '1rem' },
-            },
-            md: {
-              columns: { $value: 12 },
-              gutter: { $value: '1.5rem' },
-              margin: { $value: '2rem' },
-            },
-          },
-        },
-        breakpoint: {
-          md: {}, // Missing $value
-        },
-      },
-      allTokens: [],
-      properties: {},
-      usesReference: () => false,
-      getReferences: () => [],
-      transformTokens: () => [],
-    } as unknown as Dictionary
-
-    const options = createMockOptions()
-    const result = processGridTokens(dictionary, options)
-
-    expect(result).toMatchInlineSnapshot(`
-      "@utility grid-layout {
-        display: grid;
-        grid-template-columns: repeat(var(--grid-layout-columns--default), 1fr);
-        grid-gap: var(--grid-layout-gutter--default);
-        margin: 0 var(--grid-layout-margin--default);
-        @media screen and (min-width: undefined) {
-          grid-template-columns: repeat(var(--grid-layout-columns--md), 1fr);
-          grid-gap: var(--grid-layout-gutter--md);
-          margin: 0 var(--grid-layout-margin--md);
-        }
-      }
-      "
-    `)
-  })
-
-  it('should handle complex identifier names', () => {
-    const dictionary: Dictionary = {
-      tokens: {
-        grid: {
-          'main-content': {
-            default: {
-              columns: { $value: 8 },
-              gutter: { $value: '1rem' },
-              margin: { $value: '1rem' },
-            },
-          },
-        },
-        breakpoint: {},
-      },
-      allTokens: [],
-      properties: {},
-      usesReference: () => false,
-      getReferences: () => [],
-      transformTokens: () => [],
-    } as unknown as Dictionary
-
-    const options = createMockOptions()
-    const result = processGridTokens(dictionary, options)
-
-    expect(result).toMatchInlineSnapshot(`
-      "@utility grid-main-content {
-        display: grid;
-        grid-template-columns: repeat(var(--grid-main-content-columns--default), 1fr);
-        grid-gap: var(--grid-main-content-gutter--default);
-        margin: 0 var(--grid-main-content-margin--default);
-      }
-      "
-    `)
-  })
-})

package/src/scripts/formats/processors/grid-processor.ts

@@ -1,64 +0,0 @@
-import type { Config, Dictionary, LocalOptions } from 'style-dictionary/types'
-
-/*
-convert each grid token inside `grid` category to a tailwindcss utility. Each grid token has structure:
-grid > {identifier} > {breakpoint} > $value
-
-for each grid token, compile all its tokens into a single utility:
-
-```css
-@utility grid-{identifier} {
-  display: grid;
-  grid-template-columns: repeat(var(--grid-columns--default), 1fr);
-  grid-gap: var(--grid-gutter--default);
-  margin: 0 var(--grid-margin--default);
-  @media screen and (min-width: {breakpoint}) {
-    display: grid;
-    grid-template-columns: repeat(var(--grid-columns--{breakpoint}), 1fr);
-    grid-gap: var(--grid-gutter--{breakpoint});
-    margin: 0 var(--grid-margin--{breakpoint});
-  }
-}
-```
-Append prefix to the utility name if it is provided.
-*/
-export function processGridTokens(
-  dictionary: Dictionary,
-  options: Config & LocalOptions,
-): string {
-  const gridTokens = dictionary.tokens.grid ?? {}
-  const breakpointTokens = dictionary.tokens.breakpoint ?? {}
-
-  if (Object.keys(gridTokens).length === 0) {
-    return ''
-  }
-
-  const utilities = []
-  for (const [identifier, breakpoints] of Object.entries(gridTokens)) {
-    const utilityName = `grid-${identifier}`
-    const variableBase = options.prefix
-      ? `--${options.prefix}-grid-${identifier}`
-      : `--grid-${identifier}`
-    let utility = `@utility ${utilityName} {\n`
-    utility += `  display: grid;\n`
-    utility += `  grid-template-columns: repeat(var(${variableBase}-columns--default), 1fr);\n`
-    utility += `  grid-gap: var(${variableBase}-gutter--default);\n`
-    utility += `  margin: 0 var(${variableBase}-margin--default);\n`
-
-    for (const [breakpoint] of Object.entries(breakpoints)) {
-      const breakpointToken = breakpointTokens[breakpoint]
-      if (!breakpointToken || breakpoint === 'default') {
-        continue
-      }
-      utility += `  @media screen and (min-width: ${breakpointToken.$value}) {\n`
-      utility += `    grid-template-columns: repeat(var(${variableBase}-columns--${breakpoint}), 1fr);\n`
-      utility += `    grid-gap: var(${variableBase}-gutter--${breakpoint});\n`
-      utility += `    margin: 0 var(${variableBase}-margin--${breakpoint});\n`
-      utility += `  }\n`
-    }
-    utility += `}\n`
-    utilities.push(utility)
-  }
-
-  return utilities.join('\n')
-}

package/src/scripts/formats/processors/typography-processor.test.ts

@@ -1,111 +0,0 @@
-import type { Config, Dictionary, LocalOptions } from 'style-dictionary/types'
-
-import type { TokenWithCTIAttrs } from '../../types.js'
-
-import { describe, expect, it } from 'vitest'
-
-import { processTypographyTokens } from './typography-processor.js'
-
-describe('processTypographyTokens', () => {
-  const createMockToken = (
-    attributes: Record<string, any>,
-    type = 'typography',
-  ): TokenWithCTIAttrs =>
-    ({
-      $type: type,
-      attributes,
-    }) as unknown as TokenWithCTIAttrs
-
-  const createMockDictionary = (
-    tokens: TokenWithCTIAttrs[] = [],
-    breakpoints: Record<string, any> = {},
-  ): Dictionary =>
-    ({
-      allTokens: tokens,
-      tokens: { breakpoint: breakpoints },
-    }) as unknown as Dictionary
-
-  const createMockOptions = (): Config & LocalOptions =>
-    ({}) as unknown as Config & LocalOptions
-
-  it('should generate utility with fallback to default', () => {
-    const tokens = [createMockToken({ item: 'sm' })]
-    const breakpoints = { sm: { $value: '490px' } }
-    const dictionary = createMockDictionary(tokens, breakpoints)
-    const options = createMockOptions()
-
-    const result = processTypographyTokens(dictionary, options)
-
-    expect(result).toMatchInlineSnapshot(`
-      "@utility typography-* {
-        font: --value(--typography-default-*);
-        @media screen and (min-width: 490px) {
-          font: --value(--typography-sm-*);
-        }
-      }
-      "
-    `)
-  })
-
-  it('should generate utility with multiple media queries', () => {
-    const tokens = [
-      createMockToken({ item: 'sm' }),
-      createMockToken({ item: 'md' }),
-      createMockToken({ item: 'lg' }),
-    ]
-    const breakpoints = {
-      sm: { $value: '490px' },
-      md: { $value: '768px' },
-      lg: { $value: '1024px' },
-    }
-    const dictionary = createMockDictionary(tokens, breakpoints)
-    const options = createMockOptions()
-
-    const result = processTypographyTokens(dictionary, options)
-
-    expect(result).toMatchInlineSnapshot(`
-      "@utility typography-* {
-        font: --value(--typography-default-*);
-        @media screen and (min-width: 490px) {
-          font: --value(--typography-sm-*);
-        }
-        @media screen and (min-width: 768px) {
-          font: --value(--typography-md-*);
-        }
-        @media screen and (min-width: 1024px) {
-          font: --value(--typography-lg-*);
-        }
-      }
-      "
-    `)
-  })
-
-  it('should handle unordered and sparse breakpoints', () => {
-    const tokens = [
-      createMockToken({ item: 'lg' }),
-      createMockToken({ item: 'sm' }),
-    ]
-    const breakpoints = {
-      sm: { $value: '490px' },
-      md: { $value: '768px' }, // This breakpoint is not in the tokens
-      lg: { $value: '1024px' },
-    }
-    const dictionary = createMockDictionary(tokens, breakpoints)
-    const options = createMockOptions()
-
-    const result = processTypographyTokens(dictionary, options)
-
-    expect(result).toMatchInlineSnapshot(`
-      "@utility typography-* {
-        font: --value(--typography-default-*);
-        @media screen and (min-width: 490px) {
-          font: --value(--typography-sm-*);
-        }
-        @media screen and (min-width: 1024px) {
-          font: --value(--typography-lg-*);
-        }
-      }
-      "
-    `)
-  })
-})

package/src/scripts/formats/processors/typography-processor.ts

@@ -1,48 +0,0 @@
-import type { Config, Dictionary, LocalOptions } from 'style-dictionary/types'
-
-import type { BreakpointToken, TokenWithCTIAttrs } from '../../types.js'
-
-export function processTypographyTokens(
-  dictionary: Dictionary,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _options: Config & LocalOptions,
-): string {
-  const typographyTokens = dictionary.allTokens.filter(
-    token => token.$type === 'typography',
-  ) as TokenWithCTIAttrs[]
-
-  const breakpoints =
-    (dictionary.tokens.breakpoint as BreakpointToken | undefined) ??
-    ({} as BreakpointToken)
-
-  const availableBreakpoints = new Set<string>()
-  for (const token of typographyTokens) {
-    const item = token.attributes.item
-    if (item && item !== 'default' && breakpoints[item]) {
-      availableBreakpoints.add(item)
-    }
-  }
-
-  const sortedBreakpoints = [...availableBreakpoints].sort((a, b) => {
-    if (!breakpoints[a] || !breakpoints[b]) {
-      return 0
-    }
-    const aValue = (breakpoints[a] as unknown as BreakpointToken).$value
-    const bValue = (breakpoints[b] as unknown as BreakpointToken).$value
-
-    return parseFloat(aValue) - parseFloat(bValue)
-  })
-
-  let utility = '@utility typography-* {\n'
-  utility += '  font: --value(--typography-default-*);\n'
-
-  for (const breakpointName of sortedBreakpoints) {
-    const breakpointValue = breakpoints[breakpointName].$value
-    utility += `  @media screen and (min-width: ${breakpointValue}) {\n`
-    utility += `    font: --value(--typography-${breakpointName}-*);\n`
-    utility += '  }\n'
-  }
-
-  utility += '}\n'
-  return utility
-}