wip

src/platforms/css.ts

@@ -27,12 +27,12 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
     preprocessors: ['themeOverrides'],
     transforms: [
       'name/pathToKebabCase',
-      'color/hex',
-      'color/hexMix',
+      // 'color/hexMix',
+      'colorAlpha/css',
       'cubicBezier/css',
       'dimension/rem',
       'duration/css',
-      'shadow/css',
+      // 'shadow/css',
       'border/css',
       'typography/css',
       'fontFamily/css',

src/primerStyleDictionary.ts

@@ -38,6 +38,7 @@ import {
   jsonFigma,
 } from './formats/index.js'
 import {themeOverrides} from './preprocessors/themeOverrides.js'
+import {colorAlphaToCss} from './transformers/colorAlphaToCss.js'
 
 /**
  * @name {@link PrimerStyleDictionary}
@@ -100,6 +101,8 @@ PrimerStyleDictionary.registerFormat({
  * Transformers
  *
  */
+PrimerStyleDictionary.registerTransform(colorAlphaToCss)
+
 PrimerStyleDictionary.registerTransform(colorToRgbAlpha)
 
 PrimerStyleDictionary.registerTransform(colorToRgbaFloat)

src/schemas/colorToken.ts

@@ -21,7 +21,6 @@ export const colorToken = baseToken
       .optional(),
     $extensions: z
       .object({
-        alpha: z.number().min(0).max(1).optional().nullable(),
         'org.primer.figma': z
           .object({
             collection: collection([

src/transformers/colorAlphaToCss.test.ts

@@ -0,0 +1,37 @@
+import {getMockToken} from '../test-utilities/index.js'
+import {colorAlphaToCss} from './colorAlphaToCss.js'
+
+describe('Transformer: colorAlphaToCss', () => {
+  it('transforms hex3, hex6, hex8 `color` tokens without alpha value', () => {
+    const input = [
+      getMockToken({$value: '#123'}),
+      getMockToken({$value: '#343434'}),
+      getMockToken({$value: '#34343455'}),
+    ]
+    const expectedOutput = ['#123', '#343434', '#34343455']
+    expect(input.map(item => colorAlphaToCss.transform(item, {}, {}))).toStrictEqual(expectedOutput)
+  })
+
+  it('transforms hex3, hex6, hex8 `color` tokens with alpha value', () => {
+    const input = [
+      getMockToken({$value: '#123', alpha: 0.25}),
+      getMockToken({$value: '#343434', alpha: 0.6}),
+      getMockToken({$value: '#34343466', alpha: 0.1}),
+    ]
+    const expectedOutput = [
+      'color-mix(#123, transparent 25%)',
+      'color-mix(#343434, transparent 60%)',
+      'color-mix(#34343466, transparent 10%)',
+    ]
+    expect(input.map(item => colorAlphaToCss.transform(item, {}, {}))).toStrictEqual(expectedOutput)
+  })
+
+  it('transforms references with and without alpha value', () => {
+    const input = [
+      getMockToken({$value: '{base.color.green.5}'}),
+      getMockToken({$value: '{base.color.red.5}', alpha: 0.25}),
+    ]
+    const expectedOutput = ['{base.color.green.5}', 'color-mix({base.color.red.5}, transparent 25%)']
+    expect(input.map(item => colorAlphaToCss.transform(item, {}, {}))).toStrictEqual(expectedOutput)
+  })
+})

src/transformers/colorAlphaToCss.ts

@@ -0,0 +1,24 @@
+import {Transform, TransformedToken} from 'style-dictionary/types'
+import {isColorWithAlpha} from '../filters/isColorWithAlpha.js'
+import {getTokenValue} from './utilities/getTokenValue.js'
+
+const cssColorMix = (colorA: string, colorB: string, colorBPercent: number) => {
+  if (colorBPercent < 0 || colorBPercent > 1) {
+    throw new Error(
+      `Invalid argument for "cssColorMix", colorBPercent must be between 0 and 1, ${colorBPercent} provided.`,
+    )
+  }
+
+  return `color-mix(in srgb, ${colorA}, ${colorB} ${colorBPercent * 100}%)`
+}
+
+export const colorAlphaToCss: Transform = {
+  name: 'colorAlpha/css',
+  type: 'value',
+  transitive: true,
+  filter: isColorWithAlpha,
+  transform: (token: TransformedToken) => {
+    if (!token.alpha || token.alpha === null) return getTokenValue(token)
+    return cssColorMix(getTokenValue(token), 'transparent', token.alpha)
+  },
+}

src/transformers/colorToHex.ts

@@ -15,7 +15,7 @@ export const colorToHex: Transform = {
   transitive: true,
   filter: isColor,
   transform: (token: TransformedToken) => {
-    const alphaValue = token.alpha ?? token.$extensions?.alpha
+    const alphaValue = token.alpha
     if (alphaValue === null || alphaValue === undefined) {
       return toHex(getTokenValue(token))
     }