replace hexAlpha with hex (#1048)

primer · Sep 11, 2024 · 60dcf94 · 60dcf94
1 parent a38ee38
commit 60dcf94
Show file tree

Hide file tree

Showing 18 changed files with 44 additions and 99 deletions.
diff --git a/.github/workflows/consumer_test.yml b/.github/workflows/consumer_test.yml
@@ -21,7 +21,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - run: |
-          echo "Re-enable this workflow when primer/brand has been updated to usev8 tokens"
+          echo "Re-enable this workflow when primer/brand has been updated to latest tokens"
       # - name: Checkout current repo
       #   uses: actions/checkout@v4
 

diff --git a/.github/workflows/visual_regression_test.yml b/.github/workflows/visual_regression_test.yml
@@ -14,10 +14,10 @@ jobs:
       fail-fast: false
       matrix:
         shard: [1, 2, 3, 4, 5]
-    
+
     steps:
       - uses: actions/checkout@v4
-  
+
       - name: Setup node
         uses: actions/setup-node@v4
         with:
@@ -27,7 +27,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Build v8 tokens
+      - name: Build tokens
         run: npm run build
 
       - name: Build storybook
@@ -68,7 +68,7 @@ jobs:
     if: ${{ always() }}
     runs-on: ubuntu-latest
     needs: vrt-runner
-    
+
     steps:
       - uses: actions/checkout@v4
 
@@ -99,4 +99,4 @@ jobs:
 
       - name: Check vrt-runner job status
         if: ${{ needs.vrt-runner.result == 'failure' }}
-        run: exit 1
+        run: exit 1
diff --git a/integration/integration.test.ts b/integration/integration.test.ts
@@ -11,7 +11,6 @@ describe('PrimerStyleDictionary', () => {
         transforms: [
           'name/pathToKebabCase',
           'color/hex',
-          'color/hexAlpha',
           'color/hexMix',
           'dimension/rem',
           'duration/css',
@@ -37,7 +36,6 @@ describe('PrimerStyleDictionary', () => {
         transforms: [
           'color/hex',
           'color/hexMix',
-          'color/hexAlpha',
           'dimension/rem',
           'shadow/css',
           'border/css',
@@ -62,7 +60,6 @@ describe('PrimerStyleDictionary', () => {
         transforms: [
           'color/hex',
           'color/hexMix',
-          'color/hexAlpha',
           'dimension/rem',
           'shadow/css',
           'border/css',
@@ -108,7 +105,6 @@ describe('PrimerStyleDictionary', () => {
         transforms: [
           'color/hex',
           'color/hexMix',
-          'color/hexAlpha',
           'dimension/rem',
           'shadow/css',
           'border/css',
@@ -131,7 +127,6 @@ describe('PrimerStyleDictionary', () => {
         buildPath: `${basePath}/build/js/`,
         transforms: [
           'color/hex',
-          'color/hexAlpha',
           'shadow/css',
           'border/css',
           'dimension/rem',

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/PrimerStyleDictionary.ts b/src/PrimerStyleDictionary.ts
@@ -2,7 +2,6 @@ import StyleDictionary from 'style-dictionary'
 import {w3cJsonParser} from './parsers'
 import {
   borderToCss,
-  colorToHexAlpha,
   colorToRgbAlpha,
   colorToHex,
   colorToHexMix,
@@ -108,11 +107,6 @@ StyleDictionary.registerTransform({
   ...colorToRgbaFloat,
 })
 
-StyleDictionary.registerTransform({
-  name: 'color/hexAlpha',
-  ...colorToHexAlpha,
-})
-
 StyleDictionary.registerTransform({
   name: 'color/hexMix',
   ...colorToHexMix,

diff --git a/src/platforms/css.ts b/src/platforms/css.ts
@@ -28,7 +28,6 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
     transforms: [
       'name/pathToKebabCase',
       'color/hex',
-      'color/hexAlpha',
       'color/hexMix',
       'dimension/rem',
       'duration/css',

diff --git a/src/platforms/docJson.ts b/src/platforms/docJson.ts
@@ -9,7 +9,6 @@ export const docJson: PlatformInitializer = (outputFile, prefix, buildPath): Sty
     'name/pathToKebabCase',
     'color/hex',
     'color/hexMix',
-    'color/hexAlpha',
     'dimension/rem',
     'shadow/css',
     'border/css',

diff --git a/src/platforms/fallbacks.ts b/src/platforms/fallbacks.ts
@@ -9,7 +9,6 @@ export const fallbacks: PlatformInitializer = (outputFile, prefix, buildPath): S
     'name/pathToKebabCase',
     'color/hex',
     'color/hexMix',
-    'color/hexAlpha',
     'dimension/rem',
     'shadow/css',
     'border/css',

diff --git a/src/platforms/javascript.ts b/src/platforms/javascript.ts
@@ -8,7 +8,6 @@ export const javascript: PlatformInitializer = (outputFile, prefix, buildPath):
   transforms: [
     'color/hex',
     'color/hexMix',
-    'color/hexAlpha',
     'dimension/rem',
     'shadow/css',
     'border/css',

diff --git a/src/platforms/json.ts b/src/platforms/json.ts
@@ -8,7 +8,6 @@ export const json: PlatformInitializer = (outputFile, prefix, buildPath): StyleD
   transforms: [
     'color/hex',
     'color/hexMix',
-    'color/hexAlpha',
     'dimension/rem',
     'shadow/css',
     'border/css',

diff --git a/src/platforms/styleLint.ts b/src/platforms/styleLint.ts
@@ -9,7 +9,6 @@ export const styleLint: PlatformInitializer = (outputFile, prefix, buildPath): S
     'name/pathToKebabCase',
     'color/hex',
     'color/hexMix',
-    'color/hexAlpha',
     'dimension/remPxArray',
     'shadow/css',
     'border/css',

diff --git a/src/platforms/typeDefinitions.ts b/src/platforms/typeDefinitions.ts
@@ -8,7 +8,6 @@ export const typeDefinitions: PlatformInitializer = (outputFile, prefix, buildPa
   buildPath,
   transforms: [
     'color/hex',
-    'color/hexAlpha',
     'shadow/css',
     'border/css',
     'dimension/rem',

diff --git a/src/platforms/typescript.ts b/src/platforms/typescript.ts
@@ -8,7 +8,6 @@ export const typescript: PlatformInitializer = (outputFile, prefix, buildPath):
   transforms: [
     'color/hex',
     'color/hexMix',
-    'color/hexAlpha',
     'dimension/rem',
     'shadow/css',
     'border/css',

diff --git a/src/transformers/colorToHex.test.ts b/src/transformers/colorToHex.test.ts
@@ -14,14 +14,29 @@ describe('Transformer: colorToHex', () => {
     expect(input.map(item => colorToHex.transformer(item, {}))).toStrictEqual(expectedOutput)
   })
 
-  it('transforms `color` tokens and ignores alpha value', () => {
-    expect(
-      [
-        getMockToken({value: '#343434', alpha: 0.4}),
-        getMockToken({value: '#34343466', alpha: 0.9}),
-        getMockToken({value: 'rgb(100,200,255)', alpha: 0.4}),
-        getMockToken({value: 'rgba(100,200,255,0.8)', alpha: 0.4}),
-      ].map(item => colorToHex.transformer(item, {})),
-    ).toStrictEqual(['#343434', '#34343466', '#64c8ff', '#64c8ffcc'])
+  it('transforms hex3, hex6 `color` tokens with alpha value', () => {
+    const input = [getMockToken({value: '#123', alpha: 0.2}), getMockToken({value: '#343434', alpha: 0.4})]
+    const expectedOutput = ['#11223333', '#34343466']
+    expect(input.map(item => colorToHex.transformer(item, {}))).toStrictEqual(expectedOutput)
+  })
+
+  it('transforms hex8 `color` tokens with alpha value, ignoring the initial alpha from the hex8', () => {
+    const input = getMockToken({value: '#34343466', alpha: 0.6})
+    expect(colorToHex.transformer(input, {})).toStrictEqual('#34343499')
+  })
+
+  it('transforms rgb `color` tokens with alpha value', () => {
+    const input = getMockToken({value: 'rgb(100,200,255)', alpha: 0.6})
+    expect(colorToHex.transformer(input, {})).toStrictEqual('#64c8ff99')
+  })
+
+  it('transforms rgba `color` tokens with alpha value, ignoring the initial alpha from the hex8', () => {
+    const input = getMockToken({value: 'rgba(100,200,255, 0.2)', alpha: 0.6})
+    expect(colorToHex.transformer(input, {})).toStrictEqual('#64c8ff99')
+  })
+
+  it('transforms rgba `color` tokens with alpha null, ignoring alpha', () => {
+    const input = getMockToken({value: 'rgba(100,200,255, 0.5)', alpha: null})
+    expect(colorToHex.transformer(input, {})).toStrictEqual('#64c8ff80')
   })
 })
diff --git a/src/transformers/colorToHex.ts b/src/transformers/colorToHex.ts
@@ -2,6 +2,7 @@ import {toHex} from 'color2k'
 import {isColor} from '../filters'
 import type StyleDictionary from 'style-dictionary'
 import {getTokenValue} from './utilities/getTokenValue'
+import {alpha} from './utilities/alpha'
 /**
  * @description converts color tokens value to `hex6` or `hex8`
  * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
@@ -12,5 +13,11 @@ export const colorToHex: StyleDictionary.Transform = {
   type: `value`,
   transitive: true,
   matcher: isColor,
-  transformer: (token: StyleDictionary.TransformedToken) => toHex(getTokenValue(token)),
+  transformer: (token: StyleDictionary.TransformedToken) => {
+    const alphaValue = token.alpha ?? token.$extensions?.alpha
+    if (alphaValue === null || alphaValue === undefined) {
+      return toHex(getTokenValue(token))
+    }
+    return toHex(alpha(getTokenValue(token), alphaValue, token))
+  },
 }
diff --git a/src/transformers/colorToHexAlpha.test.ts b/src/transformers/colorToHexAlpha.test.ts
diff --git a/src/transformers/colorToHexAlpha.ts b/src/transformers/colorToHexAlpha.ts
diff --git a/src/transformers/index.ts b/src/transformers/index.ts
@@ -1,6 +1,5 @@
 export {borderToCss} from './borderToCss'
 export {colorToHex} from './colorToHex'
-export {colorToHexAlpha} from './colorToHexAlpha'
 export {colorToHexMix} from './colorToHexMix'
 export {colorToRgbAlpha} from './colorToRgbAlpha'
 export {colorToRgbaFloat} from './colorToRgbaFloat'