Skip to content

Commit 0bff545

Browse files
CopilotCopilot
authored
Merge 9ea3162 into 9fb1c7d 
2 parents 9fb1c7d + 9ea3162 commit 0bff545

30 files changed

+656
-489
lines changed

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/formats/jsonFigma.ts

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import type {RgbaFloat} from '../transformers/utilities/isRgbaFloat.js'
77
import {isRgbaFloat} from '../transformers/utilities/isRgbaFloat.js'
88
import {getReferences, sortByReference} from 'style-dictionary/utils'
99

10+
// Type for dimension value in new W3C object format
11+
type DimensionValue = {value: number; unit: string}
12+
1013
const isReference = (string: string): boolean => /^\{([^\\]*)\}$/g.test(string)
1114

1215
const getReference = (dictionary: Dictionary, refString: string, platform: PlatformConfig) => {
@@ -32,19 +35,31 @@ const getFigmaType = (type: string): string => {
3235

3336
const shadowToVariables = (
3437
name: string,
35-
values: Omit<ShadowTokenValue, 'color'> & {color: string | RgbaFloat},
38+
values: Omit<ShadowTokenValue, 'color' | 'offsetX' | 'offsetY' | 'blur' | 'spread'> & {
39+
color: string | RgbaFloat
40+
offsetX: DimensionValue
41+
offsetY: DimensionValue
42+
blur: DimensionValue
43+
spread: DimensionValue
44+
},
3645
token: TransformedToken,
3746
) => {
3847
// floatValue
39-
const floatValue = (property: 'offsetX' | 'offsetY' | 'blur' | 'spread') => ({
40-
name: `${name}/${property}`,
41-
value: parseInt(values[property].replace('px', '')),
42-
type: 'FLOAT',
43-
scopes: ['EFFECT_FLOAT'],
44-
mode,
45-
collection,
46-
group,
47-
})
48+
const floatValue = (property: 'offsetX' | 'offsetY' | 'blur' | 'spread') => {
49+
const dimValue = values[property]
50+
// New object format like {value: 1, unit: "px"}
51+
const numValue = dimValue.value
52+
53+
return {
54+
name: `${name}/${property}`,
55+
value: numValue,
56+
type: 'FLOAT',
57+
scopes: ['EFFECT_FLOAT'],
58+
mode,
59+
collection,
60+
group,
61+
}
62+
}
4863

4964
const {attributes} = token
5065
const {mode, collection, group} = attributes || {}

‎src/schemas/borderTokenSchema.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {borderToken, borderValue} from './borderToken.js'
33
const validBorderValue = {
44
color: '#333',
55
style: 'solid',
6-
width: '1px',
6+
width: {value: 1, unit: 'px'},
77
}
88

99
describe('Schema: borderValue', () => {

‎src/schemas/dimensionTokenSchema.test.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@ import {dimensionToken} from './dimensionToken.js'
22

33
describe('Schema: dimensionToken', () => {
44
const validToken = {
5-
$value: '1px',
5+
$value: {value: 1, unit: 'px'},
66
$type: 'dimension',
77
$description: 'a dimension token',
88
}
99

1010
it('passes on valid values', () => {
1111
expect(dimensionToken.safeParse(validToken).success).toStrictEqual(true)
12-
expect(dimensionToken.safeParse({...validToken, $value: '1em'}).success).toStrictEqual(true)
13-
expect(dimensionToken.safeParse({...validToken, $value: '1rem'}).success).toStrictEqual(true)
12+
expect(dimensionToken.safeParse({...validToken, $value: {value: 1, unit: 'em'}}).success).toStrictEqual(true)
13+
expect(dimensionToken.safeParse({...validToken, $value: {value: 1, unit: 'rem'}}).success).toStrictEqual(true)
1414
})
1515

1616
it('fails on invalid type', () => {
@@ -19,10 +19,13 @@ describe('Schema: dimensionToken', () => {
1919

2020
it('fails on invalid value', () => {
2121
expect(dimensionToken.safeParse({...validToken, $value: 'wrong'}).success).toStrictEqual(false)
22+
expect(dimensionToken.safeParse({...validToken, $value: '1px'}).success).toStrictEqual(false)
2223
expect(dimensionToken.safeParse({...validToken, $value: '1%'}).success).toStrictEqual(false)
2324
expect(dimensionToken.safeParse({...validToken, $value: undefined}).success).toStrictEqual(false)
2425
expect(dimensionToken.safeParse({...validToken, $value: ''}).success).toStrictEqual(false)
2526
expect(dimensionToken.safeParse({...validToken, $value: false}).success).toStrictEqual(false)
2627
expect(dimensionToken.safeParse({...validToken, $value: 1}).success).toStrictEqual(false)
28+
expect(dimensionToken.safeParse({...validToken, $value: {value: 1, unit: '%'}}).success).toStrictEqual(false)
29+
expect(dimensionToken.safeParse({...validToken, $value: {value: 'wrong', unit: 'px'}}).success).toStrictEqual(false)
2730
})
2831
})

‎src/schemas/dimensionValue.ts

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,6 @@
11
import {z} from 'zod'
2-
import {schemaErrorMessage} from '../utilities/index.js'
32

4-
export const dimensionValue = z.union([
5-
z.string().refine(
6-
dim => /(^-?[0-9]+(px|rem)$|^-?[0-9]+\.?[0-9]*em$)/.test(dim),
7-
val => ({
8-
message: schemaErrorMessage(
9-
`Invalid dimension: "${val}"`,
10-
`Dimension must be a string with a unit (px, rem or em) or 0`,
11-
),
12-
}),
13-
),
14-
z.literal('0'),
15-
z.literal(0),
16-
])
3+
export const dimensionValue = z.object({
4+
value: z.number(),
5+
unit: z.enum(['px', 'rem', 'em']),
6+
})

‎src/schemas/dimensionValueSchema.test.ts

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,31 @@
11
import {dimensionValue} from './dimensionValue.js'
22

33
describe('Schema: dimensionValue', () => {
4-
it('passes on valid values', () => {
5-
expect(dimensionValue.safeParse('1px').success).toStrictEqual(true)
6-
expect(dimensionValue.safeParse('-1px').success).toStrictEqual(true)
7-
expect(dimensionValue.safeParse('1em').success).toStrictEqual(true)
8-
expect(dimensionValue.safeParse('1rem').success).toStrictEqual(true)
9-
expect(dimensionValue.safeParse('0').success).toStrictEqual(true)
10-
expect(dimensionValue.safeParse(0).success).toStrictEqual(true)
4+
it('passes on valid object values', () => {
5+
expect(dimensionValue.safeParse({value: 1, unit: 'px'}).success).toStrictEqual(true)
6+
expect(dimensionValue.safeParse({value: -1, unit: 'px'}).success).toStrictEqual(true)
7+
expect(dimensionValue.safeParse({value: 16, unit: 'rem'}).success).toStrictEqual(true)
8+
expect(dimensionValue.safeParse({value: 1.5, unit: 'em'}).success).toStrictEqual(true)
9+
expect(dimensionValue.safeParse({value: 0, unit: 'px'}).success).toStrictEqual(true)
1110
})
1211

13-
it('fails on invalid value', () => {
12+
it('fails on invalid object values', () => {
13+
expect(dimensionValue.safeParse({value: 1, unit: '%'}).success).toStrictEqual(false)
14+
expect(dimensionValue.safeParse({value: 'small', unit: 'px'}).success).toStrictEqual(false)
15+
expect(dimensionValue.safeParse({value: 1}).success).toStrictEqual(false)
16+
expect(dimensionValue.safeParse({unit: 'px'}).success).toStrictEqual(false)
17+
expect(dimensionValue.safeParse({}).success).toStrictEqual(false)
18+
})
19+
20+
it('fails on invalid values', () => {
21+
expect(dimensionValue.safeParse('1px').success).toStrictEqual(false)
1422
expect(dimensionValue.safeParse('1%').success).toStrictEqual(false)
1523
expect(dimensionValue.safeParse(1).success).toStrictEqual(false)
1624
expect(dimensionValue.safeParse('small').success).toStrictEqual(false)
1725
expect(dimensionValue.safeParse('').success).toStrictEqual(false)
1826
expect(dimensionValue.safeParse(false).success).toStrictEqual(false)
1927
expect(dimensionValue.safeParse(undefined).success).toStrictEqual(false)
28+
expect(dimensionValue.safeParse('0').success).toStrictEqual(false)
29+
expect(dimensionValue.safeParse(0).success).toStrictEqual(false)
2030
})
2131
})

‎src/schemas/shadowTokenSchema.test.ts

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import {shadowValue, shadowToken} from './shadowToken.js'
33
const tokenValue = {
44
color: '#000000',
55
alpha: 0.5,
6-
offsetX: '4px',
7-
offsetY: '4px',
8-
blur: '2px',
9-
spread: '2px',
6+
offsetX: {value: 4, unit: 'px'},
7+
offsetY: {value: 4, unit: 'px'},
8+
blur: {value: 2, unit: 'px'},
9+
spread: {value: 2, unit: 'px'},
1010
inset: false,
1111
}
1212

@@ -15,8 +15,14 @@ describe('Schema: shadowValue', () => {
1515
expect(shadowValue.safeParse(tokenValue).success).toStrictEqual(true)
1616
// without inset
1717
expect(
18-
shadowValue.safeParse({color: '#000000', alpha: 0.5, offsetX: '4px', offsetY: '4px', blur: '2px', spread: '2px'})
19-
.success,
18+
shadowValue.safeParse({
19+
color: '#000000',
20+
alpha: 0.5,
21+
offsetX: {value: 4, unit: 'px'},
22+
offsetY: {value: 4, unit: 'px'},
23+
blur: {value: 2, unit: 'px'},
24+
spread: {value: 2, unit: 'px'},
25+
}).success,
2026
).toStrictEqual(true)
2127
})
2228

‎src/schemas/typographyTokenSchema.test.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import {typographyToken, typographyValue} from './typographyToken.js'
22

33
describe('Schema: typographyToken', () => {
44
const validValue = {
5-
fontSize: '16px',
6-
lineHeight: '24px',
5+
fontSize: {value: 16, unit: 'px'},
6+
lineHeight: {value: 24, unit: 'px'},
77
fontWeight: 600,
88
fontFamily: 'Helvetica',
99
}
@@ -31,14 +31,16 @@ describe('Schema: typographyToken', () => {
3131
})
3232

3333
it('it fails on invalid fontSize values', () => {
34-
expect(typographyValue.safeParse({...validValue, fontSize: '100%'}).success).toStrictEqual(false)
34+
expect(typographyValue.safeParse({...validValue, fontSize: {value: 100, unit: '%'}}).success).toStrictEqual(false)
35+
expect(typographyValue.safeParse({...validValue, fontSize: '16px'}).success).toStrictEqual(false)
3536
expect(typographyValue.safeParse({...validValue, fontSize: '100'}).success).toStrictEqual(false)
3637
expect(typographyValue.safeParse({...validValue, fontSize: ''}).success).toStrictEqual(false)
3738
expect(typographyValue.safeParse({...validValue, fontSize: 10}).success).toStrictEqual(false)
3839
})
3940

4041
it('it fails on invalid lineHeight values', () => {
41-
expect(typographyValue.safeParse({...validValue, lineHeight: '100%'}).success).toStrictEqual(false)
42+
expect(typographyValue.safeParse({...validValue, lineHeight: {value: 100, unit: '%'}}).success).toStrictEqual(false)
43+
expect(typographyValue.safeParse({...validValue, lineHeight: '24px'}).success).toStrictEqual(false)
4244
expect(typographyValue.safeParse({...validValue, lineHeight: '100'}).success).toStrictEqual(false)
4345
expect(typographyValue.safeParse({...validValue, lineHeight: ''}).success).toStrictEqual(false)
4446
expect(typographyValue.safeParse({...validValue, lineHeight: 10}).success).toStrictEqual(false)

0 commit comments

Comments
 (0)