Skip to content

Commit

Permalink
Merge pull request #38 from lukasoppermann/fix-for-transparent-color
Browse files Browse the repository at this point in the history
Converting named color transparent correctly
  • Loading branch information
lukasoppermann committed Nov 20, 2023
2 parents fe57690 + f77e33f commit d68a5ec
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 2 deletions.
9 changes: 9 additions & 0 deletions __tests__/transformer/color-to-hex.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,13 @@ describe('Transformer: colorToHex', () => {
"#34343466"
]);
})

it('transforms `named colors` and `transparent` to hex value', () => {
const input = [{ value: 'purple' }, { value: 'transparent' }]
const expectedOutput = [
"#800080",
"#00000000",
]
expect(input.map(item => colorToHex.transformer(item as StyleDictionary.TransformedToken, {}))).toStrictEqual(expectedOutput)
})
})
9 changes: 9 additions & 0 deletions __tests__/transformer/color-to-rgb.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,13 @@ describe('Transformer: colorToHex', () => {
"rgba(52, 52, 52, 0.4)"
]);
})

it('transforms `named colors` and `transparent` to rgb value', () => {
const input = [{ value: 'purple' }, { value: 'transparent' }]
const expectedOutput = [
"rgba(128, 0, 128, 1)",
"rgba(0, 0, 0, 0)",
]
expect(input.map(item => colorToRgba.transformer(item as StyleDictionary.TransformedToken, {}))).toStrictEqual(expectedOutput)
})
})
19 changes: 19 additions & 0 deletions __tests__/transformer/color-to-rgba-float.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -118,4 +118,23 @@ describe('Transformer: colorToRgbaFloat', () => {
]
expect(input.map(item => colorToRgbaFloat.transformer(item as StyleDictionary.TransformedToken, {}))).toStrictEqual(expectedOutput)
})

it('transforms `named colors` and `transparent` to rgb float value', () => {
const input = [{ value: 'purple' }, { value: 'transparent' }]
const expectedOutput = [
{
r: 0.5019607843137255,
g: 0,
b: 0.5019607843137255,
a: 1,
},
{
r: 0,
g: 0,
b: 0,
a: 0,
},
]
expect(input.map(item => colorToRgbaFloat.transformer(item as StyleDictionary.TransformedToken, {}))).toStrictEqual(expectedOutput)
})
})
4 changes: 2 additions & 2 deletions src/transformer/color-to-rgba-float.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ const toRgbaFloat = (color: string, alpha?: number) => {
// get hex value from color string
const hex = toHex(color)
// retrieve spots from hex value (hex 3, hex 6 or hex 8)
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex) ?? ['00', '00', '00']
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex) ?? ['00', '00', '00', 'ff']
// return parsed rgba float object using alpha value from token, from hex code or defaults to 1
return {
r: parseInt(result[1], 16) / 255,
g: parseInt(result[2], 16) / 255,
b: parseInt(result[3], 16) / 255,
a: alpha !== undefined ? alpha : parseInt(result[4], 16) / 255 || 1,
a: alpha ?? (result[4] !== undefined ? parseInt(result[4], 16) / 255 : 1),
}
}
// sum up the values of all values in an array
Expand Down

0 comments on commit d68a5ec

Please sign in to comment.