From 60dcf94a5dc53589d1473275c9112e2bd83590ce Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Wed, 11 Sep 2024 15:51:27 +0200 Subject: [PATCH] replace hexAlpha with hex (#1048) --- .github/workflows/consumer_test.yml | 2 +- .github/workflows/visual_regression_test.yml | 10 +++--- integration/integration.test.ts | 5 --- package-lock.json | 16 ++++------ src/PrimerStyleDictionary.ts | 6 ---- src/platforms/css.ts | 1 - src/platforms/docJson.ts | 1 - src/platforms/fallbacks.ts | 1 - src/platforms/javascript.ts | 1 - src/platforms/json.ts | 1 - src/platforms/styleLint.ts | 1 - src/platforms/typeDefinitions.ts | 1 - src/platforms/typescript.ts | 1 - src/transformers/colorToHex.test.ts | 33 ++++++++++++++------ src/transformers/colorToHex.ts | 9 +++++- src/transformers/colorToHexAlpha.test.ts | 30 ------------------ src/transformers/colorToHexAlpha.ts | 23 -------------- src/transformers/index.ts | 1 - 18 files changed, 44 insertions(+), 99 deletions(-) delete mode 100644 src/transformers/colorToHexAlpha.test.ts delete mode 100644 src/transformers/colorToHexAlpha.ts diff --git a/.github/workflows/consumer_test.yml b/.github/workflows/consumer_test.yml index e94fee133..3db20e24d 100644 --- 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 index 27bdd8e49..54a520385 100644 --- 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 \ No newline at end of file + run: exit 1 diff --git a/integration/integration.test.ts b/integration/integration.test.ts index 1976da613..d43c15634 100644 --- 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 index 456f7ec6a..627fdf932 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,20 +1,23 @@ { "name": "@primer/primitives", - "version": "8.2.3", + "version": "9.1.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@primer/primitives", - "version": "8.2.3", + "version": "9.1.1", "license": "MIT", + "dependencies": { + "@prettier/sync": "^0.5.2", + "prettier": "3.3" + }, "devDependencies": { "@actions/github": "^6.0.0", "@changesets/changelog-github": "^0.5.0", "@changesets/cli": "^2.27.7", "@github/prettier-config": "^0.0.6", "@playwright/test": "^1.45.1", - "@prettier/sync": "^0.5.2", "@types/node": "^20.14.9", "@typescript-eslint/eslint-plugin": "^7.15.0", "@typescript-eslint/parser": "^7.15.0", @@ -34,16 +37,12 @@ "eslint-plugin-storybook": "^0.8.0", "json5": "^2.2.1", "markdown-table-ts": "^1.0.3", - "prettier": "3.3", "style-dictionary": "^3.9.2", "tsx": "^4.16.2", "typescript": "5.5", "vitest": "^2.0.1", "zod": "3.23", "zod-validation-error": "3.3" - }, - "engines": { - "node": ">=18.18.0 <18.19.0" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -1534,7 +1533,6 @@ "version": "0.5.2", "resolved": "https://registry.npmjs.org/@prettier/sync/-/sync-0.5.2.tgz", "integrity": "sha512-Yb569su456XNx5BsH/Vyem7xD6g/y9iLmLUzRKM1a/dhU/D7HqqvkAG72znulXlMXztbV0iiu9O5AL8K98TzZQ==", - "dev": true, "dependencies": { "make-synchronized": "^0.2.8" }, @@ -6149,7 +6147,6 @@ "version": "0.2.9", "resolved": "https://registry.npmjs.org/make-synchronized/-/make-synchronized-0.2.9.tgz", "integrity": "sha512-4wczOs8SLuEdpEvp3vGo83wh8rjJ78UsIk7DIX5fxdfmfMJGog4bQzxfvOwq7Q3yCHLC4jp1urPHIxRS/A93gA==", - "dev": true, "funding": { "url": "https://github.com/fisker/make-synchronized?sponsor=1" } @@ -8129,7 +8126,6 @@ "version": "3.3.2", "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz", "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==", - "dev": true, "bin": { "prettier": "bin/prettier.cjs" }, diff --git a/src/PrimerStyleDictionary.ts b/src/PrimerStyleDictionary.ts index 0d11a9904..ae542ddf7 100644 --- 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 index 69a4c8081..83189a0eb 100644 --- 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 index 3c5af0e7e..9d9c28584 100644 --- 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 index 46302d3f4..273bef0c9 100644 --- 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 index 2e1dc68e0..3ffed7908 100644 --- 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 index 70bce42b4..e98358043 100644 --- 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 index 0681c2097..21fc83cd6 100644 --- 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 index bb83e12ea..c70596947 100644 --- 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 index 63633e587..3743c596c 100644 --- 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 index c38dba5ab..c104d67ab 100644 --- 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 index 7a77b6206..4da9389b2 100644 --- 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 deleted file mode 100644 index 0a9150002..000000000 --- a/src/transformers/colorToHexAlpha.test.ts +++ /dev/null @@ -1,30 +0,0 @@ -import {getMockToken} from '../test-utilities' -import {colorToHexAlpha} from './colorToHexAlpha' - -describe('Transformer: colorToHexAlpha', () => { - 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 => colorToHexAlpha.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(colorToHexAlpha.transformer(input, {})).toStrictEqual('#34343499') - }) - - it('transforms rgb `color` tokens with alpha value', () => { - const input = getMockToken({value: 'rgb(100,200,255)', alpha: 0.6}) - expect(colorToHexAlpha.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(colorToHexAlpha.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(colorToHexAlpha.transformer(input, {})).toStrictEqual('#64c8ff80') - }) -}) diff --git a/src/transformers/colorToHexAlpha.ts b/src/transformers/colorToHexAlpha.ts deleted file mode 100644 index 94fc3aa66..000000000 --- a/src/transformers/colorToHexAlpha.ts +++ /dev/null @@ -1,23 +0,0 @@ -import {toHex} from 'color2k' -import {alpha} from './utilities/alpha' -import {isColorWithAlpha} from '../filters' -import type StyleDictionary from 'style-dictionary' -import {getTokenValue} from './utilities/getTokenValue' -/** - * @description replaces tokens value with `hex8` color using the tokens `alpha` property to specify the value used for alpha - * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts) - * @matcher matches all tokens of $type `color` with an `alpha` property - * @transformer returns `hex8` string - */ -export const colorToHexAlpha: StyleDictionary.Transform = { - type: `value`, - transitive: true, - matcher: isColorWithAlpha, - transformer: (token: StyleDictionary.TransformedToken) => { - // don't change if alpha is null - if (token.alpha === null) { - return toHex(getTokenValue(token)) - } - return toHex(alpha(getTokenValue(token), token.alpha, token)) - }, -} diff --git a/src/transformers/index.ts b/src/transformers/index.ts index 3a435667a..9a86428aa 100644 --- 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'