adding transforms

Author: lukasoppermann

src/platforms/css.ts

@@ -37,6 +37,7 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
       'typography/css',
       'fontFamily/css',
       'fontWeight/number',
+      'gradient/css',
     ],
     options: {
       basePxFontSize: 16,

src/primerStyleDictionary.ts

@@ -12,6 +12,7 @@ import {
   fontFamilyToCss,
   fontFamilyToFigma,
   fontWeightToNumber,
+  gradientToCss,
   jsonDeprecated,
   namePathToDotNotation,
   namePathToCamelCase,
@@ -157,4 +158,6 @@ PrimerStyleDictionary.registerTransform(fontFamilyToCss)
 
 PrimerStyleDictionary.registerTransform(fontFamilyToFigma)
 
+PrimerStyleDictionary.registerTransform(gradientToCss)
+
 PrimerStyleDictionary.registerPreprocessor(themeOverrides)

src/schemas/gradientToken.test.ts

@@ -32,6 +32,11 @@ describe('Schema: gradientToken', () => {
           },
         ],
         $type: 'gradient',
+        $extensions: {
+          'org.primer.gradient': {
+            angle: 45,
+          },
+        },
       },
     ]
 

src/schemas/gradientToken.ts

@@ -18,5 +18,12 @@ export const gradientToken = baseToken
       referenceValue,
     ]),
     $type: tokenType('gradient'),
+    $extensions: z
+      .object({
+        'org.primer.gradient': z.object({
+          angle: z.number().int().min(0).max(360).optional(),
+        }),
+      })
+      .optional(),
   })
   .strict()

src/transformers/gradientToCss.test.ts

@@ -0,0 +1,51 @@
+import {getMockToken} from '../test-utilities/index.js'
+import {gradientToCss} from './gradientToCss.js'
+
+describe('Transformer: gradientToCss', () => {
+  it('transforms a simple `gradient` token to css gradient string', () => {
+    const input = getMockToken({
+      $value: [
+        {
+          color: '#000000',
+          position: 0,
+        },
+        {
+          color: '#ffffff',
+          position: 1,
+        },
+      ],
+      $type: 'gradient',
+    })
+
+    const expectedOutput = 'linear-gradient(180deg, #000000 0%, #ffffff 100%)'
+    expect(gradientToCss.transform(input, {}, {})).toStrictEqual(expectedOutput)
+  })
+
+  it('transforms complex `gradient` token to css gradient string', () => {
+    const input = getMockToken({
+      $value: [
+        {
+          color: '#000000',
+          position: 0,
+        },
+        {
+          color: '#555',
+          position: 0.3,
+        },
+        {
+          color: '#ffffff',
+          position: 0.5,
+        },
+      ],
+      $type: 'gradient',
+      $extensions: {
+        'org.primer.gradient': {
+          angle: 45,
+        },
+      },
+    })
+
+    const expectedOutput = 'linear-gradient(45deg, #000000 0%, #555555 30%, #ffffff 50%)'
+    expect(gradientToCss.transform(input, {}, {})).toStrictEqual(expectedOutput)
+  })
+})

src/transformers/gradientToCss.ts

@@ -0,0 +1,25 @@
+import {toHex} from 'color2k'
+import {isGradient} from '../filters/isGradient.js'
+import {getTokenValue} from './utilities/getTokenValue.js'
+import type {Transform, TransformedToken} from 'style-dictionary/types'
+
+/**
+ * @description converts gradient tokens value to css gradient
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `gradient`
+ * @transformer returns a `css gradient` string
+ */
+export const gradientToCss: Transform = {
+  name: 'gradient/css',
+  type: 'value',
+  transitive: true,
+  filter: isGradient,
+  transform: (token: TransformedToken) => {
+    const {angle} = token.$extensions?.['org.primer.gradient'] ?? {}
+    const stops = getTokenValue(token).map(({color, position}: {color: string; position: number}) => {
+      return `${toHex(color)} ${position * 100}%`
+    })
+
+    return `linear-gradient(${angle || 180}deg, ${stops.join(', ')})`
+  },
+}

src/transformers/index.ts

@@ -5,6 +5,7 @@ export {colorToRgbaFloat} from './colorToRgbaFloat.js'
 export {cubicBezierToCss} from './cubicBezierToCss.js'
 export {floatToPixel} from './floatToPixel.js'
 export {floatToPixelUnitless} from './floatToPixel.js'
+export {gradientToCss} from './gradientToCss.js'
 export {dimensionToRem} from './dimensionToRem.js'
 export {dimensionToRemPxArray} from './dimensionToRemPxArray.js'
 export {dimensionToPixelUnitless} from './dimensionToPixelUnitless.js'